/**
 * ==========================================================================
 * LP BBMS - Do rong noi dung toan trang
 *
 * Flatsome gioi han .row o 1120px tren trang nay. Thay vi de tung
 * element tu pha vo bang cong thuc tinh toan (de hong), noi thang
 * .row len 1300px va chi ap dung cho trang co class .lp-bbms tren
 * body (do functions.php gan), nen khong anh huong trang khac.
 * ==========================================================================
 */
.row {
  max-width: 1300px;
}

.lp-hero__heading span,
.lp-problems__heading span,
.lp-benefits__heading span,
.lp-products__heading span,
.lp-factory__heading span,
.lp-certificates__heading span,
.lp-partners__heading span,
.lp-contact__heading span {
  color: #50b848;
}

/**
 * ==========================================================================
 * LP BBMS - Hero
 * ==========================================================================
 */
/*
 * Full-bleed: thoát khỏi max-width của row/column Flatsome đang bọc
 * ngoài element, để banner luôn chiếm trọn chiều rộng màn hình.
 */
.lp-hero {
  --lp-hero-primary: #1e73be;
  --lp-hero-green: #50b848;
  --lp-hero-text: #1a1a1a;

  /*
   * Tran het chieu ngang man hinh du nam trong row/column.
   *
   * Dong dau la fallback thuan CSS bang 100vw - luon chay duoc ke
   * ca khi JS loi hoac bi plugin cache chan.
   * Hai dong sau dung --lp-vw (assets/js/lp.js do clientWidth, khong
   * tinh thanh cuon) de canh chinh xac tuyet doi. Boc trong max()
   * de neu bien loi / bang 0 thi tu roi ve 100% chu khong lam sap
   * layout nhu truoc.
   */
  position: relative;
  max-width: none;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  width: max(100%, var(--lp-vw, 0px));
  margin-left: calc(50% - max(100%, var(--lp-vw, 0px)) / 2);
  margin-right: calc(50% - max(100%, var(--lp-vw, 0px)) / 2);
  display: flex;
  align-items: center;

  height: calc(100vh - var(--lp-header-h, 84px));
  min-height: 520px;

  overflow: hidden;
  background: #ffffff;
}

/*
 * Ảnh phủ full width/height toàn bộ banner.
 */
.lp-hero__bg {
  position: absolute;
  inset: 0;

  background-image: var(--lp-hero-bg-desktop);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
 * Lớp phủ mờ để chữ đè lên ảnh vẫn đọc rõ.
 * Đậm bên trái (chỗ có chữ), nhạt dần sang phải để vẫn thấy ảnh.
 */
.lp-hero__bg::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.82) 32%,
    rgba(255, 255, 255, 0.35) 58%,
    rgba(255, 255, 255, 0) 78%
  );
}

/*
 * Padding dọc riêng của Hero (max-width 1300px canh giữa nằm ở
 * khối CSS ".lp-hero__inner" thứ 2, cuối file).
 */
.lp-hero__inner {
  position: relative;
  z-index: 2;

  padding: 24px 0;
}

.lp-hero__content {
  max-width: 620px;
}

/*
 * Mô tả và tag bó hẹp hơn tiêu đề để không lấn sang vùng ảnh.
 */
.lp-hero__desc,
.lp-hero__tags {
  max-width: 600px;
}

.lp-hero__brand {
  margin: 0 0 10px;

  color: var(--lp-hero-green);

  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.lp-hero__heading {
  margin: 0 0 20px;

  color: var(--lp-hero-primary);

  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.lp-hero__desc {
  margin: 0 0 18px;

  color: var(--lp-hero-text);

  font-size: 17px;
  line-height: 1.7;
}

.lp-hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;

  margin: 0 0 30px;
  padding: 0;

  list-style: none;
}

.lp-hero__tags li {
  position: relative;

  padding-left: 14px;
  margin-left: 0px !important;
  color: #555;

  font-size: 14px;
  font-weight: 600;
}

.lp-hero__tags li:first-child {
  padding-left: 0;
}

.lp-hero__tags li::before {
  /*
   * Dùng mã escape CSS thuần ASCII (\2022) thay vì gõ trực tiếp ký
   * tự "•" — ký tự đa byte UTF-8 rất dễ bị hỏng thành "•" khi
   * upload file qua FTP/trình quản lý file convert sai encoding.
   * \2022 luôn hiển thị đúng dấu chấm tròn, bất kể encoding lúc
   * upload.
   */
  content: "\2022";

  position: absolute;
  left: 0;

  color: #999;
}

.lp-hero__tags li:first-child::before {
  display: none;
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.lp-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 15px 30px;

  border: 2px solid transparent;
  border-radius: 6px;

  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.lp-hero__btn--primary {
  background: #1c5e2a;
  border-color: #1c5e2a;
  color: #ffffff;
}

.lp-hero__btn--primary:hover {
  background: #256328;
  border-color: #256328;
  color: #ffffff;
}

.lp-hero__btn--secondary {
  background: transparent;
  border-color: #1c5e2a;
  color: #1c5e2a;
}

.lp-hero__btn--secondary:hover {
  background: #1c5e2a;
  color: #ffffff;
}

@media screen and (max-width: 1024px) {
  /*
	 * Màn hẹp hơn: overlay phủ rộng hơn để chữ không đè lên
	 * phần ảnh còn quá rõ, dễ nhìn.
	 */
  .lp-hero__bg::after {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.85) 45%,
      rgba(255, 255, 255, 0.45) 72%,
      rgba(255, 255, 255, 0.1) 100%
    );
  }
}

@media screen and (max-width: 768px) {
  /*
	 * Trên mobile ảnh vẫn phủ full nền, chữ đè lên trên,
	 * nhưng overlay phủ gần như toàn bộ vì cột hẹp không còn
	 * chỗ "trống" bên phải để lộ ảnh.
	 */
  .lp-hero {
    height: auto;
    min-height: 70vh;
  }

  .lp-hero__bg {
    background-image: var(--lp-hero-bg-mobile);
  }

  .lp-hero__bg::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.9) 55%,
      rgba(255, 255, 255, 0.65) 100%
    );
  }

  .lp-hero__inner {
    padding: 60px 0;
  }

  .lp-hero__content {
    max-width: none;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Vấn đề doanh nghiệp gặp phải
 * ==========================================================================
 */
/*
 * Không fix max-width riêng: nội dung lấy đúng độ rộng của
 * row/column Flatsome đang bọc element này.
 */
.lp-problems {
  --lp-problems-primary: #1a3f8c;
  --lp-problems-icon: #2f7d32;
  --lp-problems-icon-bg: #e5f4e6;

  padding: 48px 0;
}

.lp-problems__header {
  max-width: 640px;
  margin: 0 auto 32px;

  text-align: center;
}

.lp-problems__heading {
  margin: 0 0 14px;

  color: var(--lp-problems-primary);

  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
}

.lp-problems__desc {
  margin: 0;

  color: #666;

  font-size: 16px;
  line-height: 1.7;
}

.lp-problems__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 56px;
}

.lp-problems__item {
  background: #ffffff;
  border: 1px solid #eef0f4;
  padding: 20px 20px 15px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(20, 30, 60, 0.05);
  display: flex;
  gap: 18px;
}

.lp-problems__icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;

  border-radius: 50%;
  background: var(--lp-problems-icon-bg);
}

.lp-problems__icon img {
  display: block;

  width: 55px;
  height: 55px;
  object-fit: contain;
}

.lp-problems__content {
  min-width: 0;
}

.lp-problems__item-title {
  margin: 0 0 10px;

  color: black;

  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.lp-problems__item-desc {
  margin: 0;

  color: #666;

  font-size: 15px;
  line-height: 1.75;
}

@media screen and (max-width: 768px) {
  .lp-problems {
    padding: 34px 0;
  }

  .lp-problems__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Lợi ích túi tái chế
 * ==========================================================================
 */
.lp-benefits {
  --lp-benefits-primary: #1a3f8c;
  --lp-benefits-highlight: #2f7d32;
  --lp-benefits-icon-bg: #eef8ef;
  --lp-benefits-card-border: #eef0f4;

  padding: 48px 0;
}

.lp-benefits__header {
  max-width: 800px;
  margin: 0 auto 30px;

  text-align: center;
}

.lp-benefits__heading {
  margin: 0 0 12px;

  color: var(--lp-benefits-primary);

  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

.lp-benefits__desc {
  margin: 0;

  color: #666;

  font-size: 16px;
  line-height: 1.7;
}

.lp-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lp-benefits__card {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 34px 20px;

  background: #ffffff;
  border: 1px solid var(--lp-benefits-card-border);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(20, 30, 60, 0.05);

  text-align: center;
}

.lp-benefits__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 94px;
  height: 94px;
  margin-bottom: 18px;

  border-radius: 50%;
  background: var(--lp-benefits-icon-bg);
}

.lp-benefits__icon img {
  display: block;

  width: 48px;
  height: 48px;
  object-fit: contain;
}

.lp-benefits__card-title {
  margin: 0;

  color: black;

  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

@media screen and (max-width: 900px) {
  .lp-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 560px) {
  .lp-benefits {
    padding: 34px 0;
  }

  .lp-benefits__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Sản phẩm túi tái chế
 * ==========================================================================
 */
.lp-products {
  --lp-products-primary: #1a3f8c;
  --lp-products-highlight: #2f7d32;

  padding: 48px 0;
}

.lp-products__header {
  max-width: 640px;
  margin: 0 auto 32px;

  text-align: center;
}

.lp-products__heading {
  margin: 0 0 12px;

  color: var(--lp-products-primary);

  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

.lp-products__desc {
  margin: 0;

  color: #666;

  font-size: 16px;
  line-height: 1.7;
}

.lp-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 46px 56px;
}

.lp-products__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.lp-products__image {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 240px;
  height: 220px;
}

.lp-products__image img {
  display: block;

  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lp-products__content {
  min-width: 0;
}

.lp-products__item-title {
  margin: 0 0 10px;

  color: black;

  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.lp-products__item-desc {
  margin: 0 0 16px;

  color: #666;

  font-size: 15px;
  line-height: 1.75;
}

.lp-products__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 11px 22px;

  border: 1.5px solid var(--lp-products-highlight);
  border-radius: 6px;

  color: var(--lp-products-highlight);

  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.lp-products__button i {
  font-style: normal;
  line-height: 1;
}

.lp-products__button:hover {
  background: var(--lp-products-highlight);
  color: #ffffff;
}

@media screen and (max-width: 900px) {
  .lp-products__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media screen and (max-width: 480px) {
  .lp-products {
    padding: 34px 0;
  }

  .lp-products__item {
    flex-direction: column;
    align-items: flex-start;
  }

  .lp-products__image {
    width: 100%;
    height: 240px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Năng lực nhà máy
 * ==========================================================================
 */
.lp-factory {
  --lp-factory-primary: #1a3f8c;
  --lp-factory-green: #2f7d32;

  padding: 48px 0;
}

.lp-factory__top {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 50px;

  margin-bottom: 32px;
}

.lp-factory__heading {
  margin: 0 0 18px;

  color: var(--lp-factory-primary);

  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
}

.lp-factory__desc {
  margin: 0 0 34px;

  color: #555;

  font-size: 16px;
  line-height: 1.75;
}

.lp-factory__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.lp-factory__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-factory__stat-icon {
  margin-bottom: 12px;
}

.lp-factory__stat-icon img {
  display: block;

  width: 46px;
  height: 46px;
  object-fit: contain;
}

.lp-factory__stat-number {
  margin-bottom: 4px;

  color: var(--lp-factory-green);

  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.lp-factory__stat-label {
  color: #777;

  font-size: 13px;
  line-height: 1.45;
}

.lp-factory__media img {
  display: block;

  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;

  border-radius: 14px;
}

.lp-factory__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.lp-factory__gallery-image {
  margin-bottom: 4px;
}

.lp-factory__gallery-image img {
  display: block;

  width: 100%;
  height: 150px;
  object-fit: cover;

  border-radius: 12px;
}

.lp-factory__gallery-caption {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-factory__gallery-icon {
  flex: 0 0 auto;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  /*
   * Nền trắng tròn, kéo icon nhích lên đè vào mép dưới ảnh phía
   * trên (giống badge nổi trên ảnh) thay vì nằm tách hẳn bên dưới.
   */
  margin-top: -20px;

  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(20, 30, 60, 0.16);
}

.lp-factory__gallery-icon img {
  display: block;

  width: 20px;
  height: 20px;
  object-fit: contain;
}

.lp-factory__gallery-text {
  color: #444;
  padding-top: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

@media screen and (max-width: 900px) {
  .lp-factory__top {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .lp-factory__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 560px) {
  .lp-factory {
    padding: 34px 0;
  }

  .lp-factory__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .lp-factory__gallery {
    grid-template-columns: 1fr;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Chứng nhận
 * ==========================================================================
 */
.lp-certificates {
  --lp-certificates-primary: #1a3f8c;
  --lp-certificates-card-border: #eef0f4;

  padding: 48px 0;
}

.lp-certificates__header {
  max-width: 640px;
  margin: 0 auto 28px;

  text-align: center;
}

.lp-certificates__heading {
  margin: 0 0 12px;

  color: var(--lp-certificates-primary);

  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

.lp-certificates__desc {
  margin: 0;

  color: #666;

  font-size: 16px;
  line-height: 1.7;
}

.lp-certificates__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.lp-certificates__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  padding: 26px 16px 20px;

  background: #ffffff;
  border: 1px solid var(--lp-certificates-card-border);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(20, 30, 60, 0.05);

  text-align: center;
}

.lp-certificates__image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 120px;
  margin-bottom: 16px;
}

.lp-certificates__image img {
  display: block;

  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lp-certificates__label {
  color: #333;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.lp-certificates__footer {
  width: 780px;
  margin: 0 auto;
  color: #555;
  margin-top: 30px !important;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .lp-certificates__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 640px) {
  .lp-certificates {
    padding: 34px 0;
  }

  .lp-certificates__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .lp-certificates__image {
    height: 90px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Đối tác
 * ==========================================================================
 */
.lp-partners {
  --lp-partners-primary: #1a3f8c;

  padding: 48px 0;
}

.lp-partners__header {
  max-width: 640px;
  margin: 0 auto 28px;

  text-align: center;
}

.lp-partners__heading {
  margin: 0 0 12px;

  color: var(--lp-partners-primary);

  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

.lp-partners__desc {
  margin: 0;

  color: #666;

  font-size: 16px;
  line-height: 1.7;
}

.lp-partners__grid {
  display: grid;
  grid-template-columns: repeat(var(--lp-partners-columns, 6), 1fr);
  gap: 26px 20px;
}

.lp-partners__item {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 120px;
  padding: 0px;
}

.lp-partners__item img {
  display: block;

  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 1024px) {
  .lp-partners__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 640px) {
  .lp-partners {
    padding: 34px 0;
  }

  .lp-partners__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 12px;
  }

  .lp-partners__item {
    height: 70px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Form tư vấn báo giá
 * ==========================================================================
 */
/*
 * Bang mau dung chung cho form bao gia.
 *
 * Khai bao o ca 2 noi vi form xuat hien o 2 cho: trong section
 * "Tu van bao gia" (.lp-contact) va trong modal (.lp-modal). Neu chi
 * khai bao tren .lp-contact thi form trong modal se mat het vien, nen
 * o nhap va mau nut - vi bien CSS khong ton tai o do.
 *
 * Sua mau tai day la ca 2 noi doi theo cung luc.
 */
.lp-contact,
.lp-modal {
  --lp-contact-primary: #1a3f8c;
  --lp-contact-green: #1c5e2a;
  --lp-contact-green-light: #e8f5e9;
  --lp-contact-border: #e3e6ec;
  --lp-contact-field-bg: #fafbfc;
}

.lp-contact {
  padding: 48px 0;
}

.lp-contact__header {
  max-width: 640px;
  margin: 0 auto 30px;

  text-align: center;
}

.lp-contact__heading {
  margin: 0 0 12px;

  color: var(--lp-contact-primary);

  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

.lp-contact__desc {
  margin: 0;

  color: #666;

  font-size: 16px;
  line-height: 1.7;
}

.lp-contact__layout {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  align-items: start;
  gap: 28px;
}

.lp-contact__form,
.lp-contact__side {
  padding: 30px;

  background: #ffffff;
  border: 1px solid var(--lp-contact-border);
  border-radius: 14px;
}

/*
 * Box liên hệ nhanh bên phải.
 */
.lp-contact__side-title {
  position: relative;

  margin: 0 0 30px;
  padding-bottom: 14px;

  color: var(--lp-contact-primary);

  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.lp-contact__side-title::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 36px;
  height: 3px;

  background: #4caf50;
  border-radius: 2px;
}

.lp-contact__channel {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding-bottom: 20px;
  margin-bottom: 20px;

  border-bottom: 1px solid #eef0f4;
}

.lp-contact__channel:last-child {
  padding-bottom: 0;
  margin-bottom: 0;

  border-bottom: 0;
}

.lp-contact__channel-icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  background: var(--lp-contact-green-light);
  border-radius: 50%;
}

.lp-contact__channel-icon img {
  display: block;

  width: 27px;
  height: 27px;
  object-fit: contain;
}

.lp-contact__channel-content {
  min-width: 0;
}

.lp-contact__channel-title {
  margin-bottom: 4px;

  color: #222;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.lp-contact__channel-text {
  display: block;

  color: #666;

  font-size: 14px;
  line-height: 1.55;
  text-decoration: none;
}

a.lp-contact__channel-text:hover {
  color: var(--lp-contact-green);
}

.lp-contact__channel-text--highlight {
  color: var(--lp-contact-primary);

  font-size: 18px;
  font-weight: 700;
}

/*
 * ==========================================================================
 * Form Contact Form 7 bên trong element
 * ==========================================================================
 */
.lp-contact__form .wpcf7-form p {
  margin: 0;
}

.lp-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;

  margin-bottom: 18px;
}

.lp-form__row--full {
  grid-template-columns: 1fr;
}

.lp-form__label {
  display: block;

  margin-bottom: 8px;

  color: #222;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.lp-form__field {
  position: relative;

  display: flex;
  align-items: center;

  background: var(--lp-contact-field-bg);
  border: 1px solid var(--lp-contact-border);
  border-radius: 8px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.lp-form__field:focus-within {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
}

.lp-form__icon {
  position: absolute;
  top: 50%;
  left: 14px;

  /*
   * z-index de icon luon ve tren nen cua o nhap. Khi trinh duyet tu
   * dien (autofill), Chrome ve mot lop nen rieng cho input - neu
   * khong dat z-index thi icon se bi lop nen do phu mat.
   */
  z-index: 2;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 21px;
  height: 21px;

  color: #2f7d32;
  pointer-events: none;
}

.lp-form__icon svg {
  width: 100%;
  height: 100%;
}

/*
 * Contact Form 7 tự chèn thêm <p> và <br> vào markup (wpautop).
 * Thẻ <p> này mới là flex item thật sự nên phải ép nó kéo full,
 * đồng thời ẩn <br> để icon không bị đẩy lệch.
 */
.lp-contact__form br {
  display: none;
}

.lp-form__field > p,
.lp-form__field > .wpcf7-form-control-wrap {
  flex: 1 1 auto;

  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.lp-form__field p {
  margin: 0;
  padding: 0;
}

.lp-form__field .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  min-width: 0;
}

/*
 * Nút gửi cũng có thể bị bọc trong <p>.
 */
.lp-form__submit p {
  margin: 0;
  padding: 0;
}

.lp-form__field input[type="text"],
.lp-form__field input[type="tel"],
.lp-form__field input[type="email"],
.lp-form__field input[type="number"],
.lp-form__field select {
  /*
	 * CF7 tự đặt thuộc tính size cho input nên phải ép width,
	 * nếu không ô Email và Select sẽ ngắn hơn khung.
	 */
  width: 100% !important;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 16px 0 46px;

  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;

  color: #333;

  font-size: 15px;
  line-height: 52px;

  appearance: none;
  -webkit-appearance: none;
}

.lp-form__field input:focus,
.lp-form__field select:focus {
  outline: none;
  box-shadow: none;
}

.lp-form__field input::placeholder {
  color: #9aa0a8;
}

.lp-form__field--select select {
  padding-right: 40px;

  color: #6b7280;
  cursor: pointer;
}

.lp-form__caret {
  position: absolute;
  top: 50%;
  right: 14px;

  z-index: 2;

  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  color: #6b7280;
  pointer-events: none;
}

.lp-form__caret svg {
  width: 100%;
  height: 100%;
}

.lp-form__note {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 20px !important;

  color: var(--lp-contact-green);

  font-size: 14px;
  line-height: 1.55;
}

.lp-form__note-icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
}

.lp-form__note-icon svg {
  width: 100%;
  height: 100%;
}

/*
 * Trinh duyet tu dien thong tin (autofill) se to nen rieng cho o
 * nhap, lam lech mau va co the phu len icon. Dung box-shadow inset
 * day de "son" lai dung mau nen cua form.
 */
.lp-form__field input:-webkit-autofill,
.lp-form__field input:-webkit-autofill:hover,
.lp-form__field input:-webkit-autofill:focus,
.lp-form__field select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--lp-contact-field-bg) inset;
  box-shadow: 0 0 0 1000px var(--lp-contact-field-bg) inset;

  -webkit-text-fill-color: #333;

  /* Giu mau nen lau hon thoi gian trinh duyet tu doi lai */
  transition: background-color 5000s ease-in-out 0s;
}

/*
 * Nút submit.
 */
.lp-form__submit {
  position: relative;
}

.lp-form__submit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  color: #ffffff;

  transform: translate(-96px, -50%);
  pointer-events: none;
}

.lp-form__submit-icon svg {
  width: 100%;
  height: 100%;
}

.lp-form__submit input[type="submit"] {
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 20px 0 44px;

  background: var(--lp-contact-green);
  border: 0;
  border-radius: 8px;

  color: #ffffff;

  font-size: 16px;
  font-weight: 700;
  line-height: 58px;
  text-transform: none;
  letter-spacing: 0;

  cursor: pointer;
  transition: background-color 0.25s ease;
}

.lp-form__submit input[type="submit"]:hover {
  background: #164a21;
}

/*
 * Thông báo và cảnh báo của CF7.
 */
.lp-contact__form .wpcf7-not-valid-tip {
  margin-top: 6px;

  color: #d32f2f;

  font-size: 12px;
}

.lp-contact__form .wpcf7-response-output {
  margin: 18px 0 0 !important;
  padding: 12px 14px !important;

  border-radius: 8px;

  font-size: 13px;
}

@media screen and (max-width: 900px) {
  .lp-contact__layout {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 560px) {
  .lp-contact {
    padding: 34px 0;
  }

  .lp-contact__form,
  .lp-contact__side {
    padding: 22px 18px;
  }

  .lp-form__row {
    grid-template-columns: 1fr;
  }

  .lp-form__submit-icon {
    transform: translate(-88px, -50%);
  }
}

/**
 * ==========================================================================
 * LP BBMS - Footer
 * ==========================================================================
 */
.lp-footer {
  --lp-footer-blue: #1a73c8;
  --lp-footer-icon-bg: #eaf3fd;
  --lp-footer-border: #e6e9ef;

  padding: 34px 0;
}

.lp-footer__layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr 0.85fr;
  align-items: center;
  gap: 40px;

  padding: 34px 30px;

  background: #ffffff;
  border: 1px solid var(--lp-footer-border);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(20, 30, 60, 0.05);
}

/*
 * Cột trái: logo và tên công ty.
 */
.lp-footer__brand {
  text-align: center;
}

.lp-footer__logo {
  display: block;

  margin-bottom: 18px;
}

.lp-footer__logo img {
  display: block;

  width: auto;
  max-width: 100%;
  max-height: 130px;
  margin: 0 auto;
  object-fit: contain;
}

.lp-footer__company {
  color: #333;

  font-size: 16px;
  line-height: 1.55;
}

/*
 * Cột giữa: thông tin liên hệ.
 */
.lp-footer__info {
  display: flex;
  flex-direction: column;
  gap: 18px;

  padding: 0 30px;

  border-right: 1px solid var(--lp-footer-border);
  border-left: 1px solid var(--lp-footer-border);
}

.lp-footer__info-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-footer__info-icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  background: var(--lp-footer-icon-bg);
  border-radius: 50%;
}

.lp-footer__info-icon img {
  display: block;

  width: 22px;
  height: 22px;
  object-fit: contain;
}

.lp-footer__info-text {
  min-width: 0;

  color: #333;

  font-size: 16px;
  line-height: 1.55;
}

.lp-footer__info-text strong {
  margin-right: 4px;

  color: #111;

  font-weight: 700;
}

.lp-footer__info-text a {
  color: #333;
  text-decoration: none;
}

.lp-footer__info-text a:hover {
  color: var(--lp-footer-blue);
}

/*
 * Cột phải: liên kết nhanh và mạng xã hội.
 */
.lp-footer__links {
  margin: 0 0 22px;
  padding: 0 0 22px;

  border-bottom: 1px solid var(--lp-footer-border);

  list-style: none;
}

.lp-footer__links li {
  margin: 0 0 12px;
  padding: 0;
  margin-left: 0px !important;
  list-style: none;
}

.lp-footer__links li:last-child {
  margin-bottom: 0;
}

.lp-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #333;

  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;

  transition: color 0.2s ease;
}

.lp-footer__links a:hover {
  color: var(--lp-footer-blue);
}

.lp-footer__links i {
  color: var(--lp-footer-blue);

  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.lp-footer__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.lp-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  transition: transform 0.2s ease;
}

.lp-footer__social:hover {
  transform: translateY(-2px);
}

.lp-footer__social img {
  display: block;

  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 900px) {
  .lp-footer__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lp-footer__info {
    padding: 24px 0;

    border-right: 0;
    border-left: 0;
    border-top: 1px solid var(--lp-footer-border);
    border-bottom: 1px solid var(--lp-footer-border);
  }

  .lp-footer__socials {
    justify-content: center;
  }

  .lp-footer__links {
    text-align: left;
  }
}

@media screen and (max-width: 560px) {
  .lp-footer {
    padding: 26px 0;
  }

  .lp-footer__layout {
    padding: 24px 18px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Header
 * ==========================================================================
 */
.lp-header {
  --lp-header-green: #1c5e2a;
  --lp-header-text: #333;
  --lp-header-hover: #2f7d32;

  /*
	 * Tràn hết chiều ngang màn hình dù nằm trong row/column.
	 * --lp-vw do assets/js/lp.js gán bằng clientWidth (không tính
	 * thanh cuộn) nên không bao giờ lệch hay tràn ngang như 100vw.
	 * Khi chưa có JS thì rơi về 100% và nằm gọn trong row.
	 */
  position: relative;
  width: var(--lp-vw, 100%);
  max-width: none;
  margin-left: calc(50% - var(--lp-vw, 100%) / 2);
  margin-right: calc(50% - var(--lp-vw, 100%) / 2);

  background: #ffffff;
  z-index: 99;
}

/*
 * Dùng position: fixed thay vì sticky.
 * Lý do: theme có sẵn 1 tổ tiên (html/body) đặt overflow khác
 * "visible" (vd overflow-x: hidden để chặn tràn ngang) — theo chuẩn
 * CSS, bất kỳ tổ tiên nào có overflow != visible đều làm hỏng
 * position: sticky của phần tử con. fixed thì luôn neo theo viewport,
 * không bị ảnh hưởng bởi việc này.
 */
.lp-header--sticky {
  position: fixed;
  /*
	 * Né thanh Admin Bar của WordPress khi đang đăng nhập.
	 * --lp-admin-bar-h do assets/js/lp.js đo chiều cao #wpadminbar
	 * thật, tự động = 0 với khách truy cập bình thường (không đăng
	 * nhập). Fixed bỏ qua margin-top mà WP gắn cho <html> khi có
	 * admin bar, nên phải tự bù bằng tay.
	 */
  top: var(--lp-admin-bar-h, 0px);
  left: 0;

  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Vì header fixed bị đưa ra khỏi luồng, phải chừa khoảng trống bằng
 * đúng chiều cao header để nội dung không bị header đè lên.
 * --lp-header-h do assets/js/lp.js đo và cập nhật liên tục.
 */
body:has(.lp-header--sticky) {
  padding-top: var(--lp-header-h, 84px);
}

.lp-header--scrolled {
  box-shadow: 0 2px 14px rgba(20, 30, 60, 0.08);
}

/*
 * Padding dọc riêng của Header (max-width 1300px canh giữa nằm ở
 * khối CSS ".lp-header__inner" thứ 2, cuối file).
 */
.lp-header__inner {
  display: flex;
  align-items: center;
  gap: 30px;

  padding: 12px 0;
}

.lp-header__logo {
  flex: 0 0 auto;

  display: block;
}

.lp-header__logo img {
  display: block !important;

  width: auto;
  max-width: 210px;
  max-height: 60px;
  height: auto;
  object-fit: contain;
}

.lp-header__nav {
  flex: 1 1 auto;
}

.lp-header__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 34px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.lp-header__menu li {
  margin: 0;
  padding: 0;

  list-style: none;
}

.lp-header__menu a {
  position: relative;

  display: block;

  padding: 6px 0;

  color: var(--lp-header-text);

  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;

  transition: color 0.2s ease;
}

.lp-header__menu a::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 0;

  width: 0;
  height: 2px;

  background: var(--lp-header-hover);
  border-radius: 2px;

  transition: width 0.25s ease;
}

.lp-header__menu a:hover,
.lp-header__menu a.is-active {
  color: var(--lp-header-hover);
}

.lp-header__menu a:hover::after,
.lp-header__menu a.is-active::after {
  width: 100%;
}

.lp-header__button {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 12px 26px;

  background: var(--lp-header-green);
  border-radius: 999px;

  color: #ffffff;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;

  transition: background-color 0.25s ease;
}

.lp-header__button:hover {
  background: #164a21;
  color: #ffffff;
}

.lp-header__button-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
}

.lp-header__button-icon svg,
.lp-header__button-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * Nút mở menu trên mobile.
 */
.lp-header__toggle {
  display: none;

  flex-direction: column;
  justify-content: center;
  gap: 5px;

  width: 42px;
  height: 42px;
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 8px;

  cursor: pointer;
}

.lp-header__toggle span {
  display: block;

  width: 22px;
  height: 2px;
  margin: 0 auto;

  background: #333;
  border-radius: 2px;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.lp-header--open .lp-header__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.lp-header--open .lp-header__toggle span:nth-child(2) {
  opacity: 0;
}

.lp-header--open .lp-header__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 1024px) {
  .lp-header__inner {
    gap: 20px;
  }

  .lp-header__menu {
    gap: 6px 22px;
  }

  .lp-header__menu a {
    font-size: 14px;
  }

  .lp-header__button {
    padding: 10px 18px;

    font-size: 14px;
  }
}

@media screen and (max-width: 900px) {
  .lp-header__inner {
    flex-wrap: wrap;
    gap: 14px;
  }

  .lp-header__toggle {
    display: flex;

    order: 3;
    margin-left: auto;
  }

  .lp-header__button {
    order: 2;
    margin-left: auto;
  }
}

@media screen and (max-width: 560px) {
  .lp-header__inner {
    padding: 10px 0;
  }

  .lp-header__logo img {
    max-height: 42px;
  }

  .lp-header__button {
    padding: 9px 14px;

    font-size: 13px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Tối ưu Mobile (đồng nhất cho toàn bộ element)
 *
 * Đặt cuối file để ghi đè các khai báo phía trên, giúp mọi section
 * dùng chung một hệ khoảng cách và cỡ chữ trên thiết bị nhỏ.
 * ==========================================================================
 */
@media screen and (max-width: 768px) {
  /*
	 * Khoảng cách dọc chung giữa các section.
	 */
  .lp-problems,
  .lp-benefits,
  .lp-products,
  .lp-factory,
  .lp-certificates,
  .lp-partners,
  .lp-contact {
    padding: 34px 0;
  }

  .lp-footer {
    padding: 26px 0;
  }

  /*
	 * Cỡ chữ tiêu đề và mô tả dùng chung.
	 */
  .lp-problems__heading,
  .lp-benefits__heading,
  .lp-products__heading,
  .lp-factory__heading,
  .lp-certificates__heading,
  .lp-partners__heading,
  .lp-contact__heading {
    margin-bottom: 8px;

    font-size: 23px;
    line-height: 1.3;
  }

  .lp-problems__desc,
  .lp-benefits__desc,
  .lp-products__desc,
  .lp-certificates__desc,
  .lp-partners__desc,
  .lp-contact__desc {
    font-size: 15px;
    line-height: 1.65;
  }

  /*
	 * Khoảng cách giữa header và nội dung của section.
	 */
  .lp-problems__header,
  .lp-benefits__header,
  .lp-products__header,
  .lp-certificates__header,
  .lp-partners__header,
  .lp-contact__header {
    margin-bottom: 24px;
  }

  /*
	 * Vấn đề doanh nghiệp: icon nhỏ lại cho cân với chữ.
	 */
  .lp-problems__grid {
    gap: 24px;
  }

  .lp-problems__icon {
    width: 54px;
    height: 54px;
  }

  .lp-problems__icon img {
    width: 25px;
    height: 25px;
  }

  .lp-problems__item-title {
    margin-bottom: 6px;

    font-size: 17px;
  }

  .lp-problems__item-desc {
    font-size: 14.5px;
  }

  /*
	 * Lợi ích: giữ 2 cột cho gọn, không kéo dài thành 1 cột.
	 */
  .lp-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .lp-benefits__card {
    padding: 20px 12px;
  }

  .lp-benefits__icon {
    width: 68px;
    height: 68px;
    margin-bottom: 12px;
  }

  .lp-benefits__icon img {
    width: 34px;
    height: 34px;
  }

  .lp-benefits__card-title {
    font-size: 15px;
    line-height: 1.4;
  }

  /*
	 * Sản phẩm: ảnh nằm trên, nội dung căn giữa.
	 */
  .lp-products__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lp-products__item {
    flex-direction: column;
    align-items: center;
    gap: 14px;

    text-align: center;
  }

  .lp-products__image {
    width: 100%;
    height: 190px;
  }

  .lp-products__item-title {
    margin-bottom: 8px;

    font-size: 17px;
  }

  .lp-products__item-desc {
    font-size: 14.5px;
  }

  .lp-products__item-desc {
    margin-bottom: 14px;
  }

  /*
	 * Năng lực nhà máy.
	 */
  .lp-factory__top {
    gap: 26px;

    margin-bottom: 26px;
  }

  .lp-factory__desc {
    margin-bottom: 24px;

    font-size: 14px;
  }

  .lp-factory__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
  }

  .lp-factory__stat-icon {
    margin-bottom: 8px;
  }

  .lp-factory__stat-icon img {
    width: 34px;
    height: 34px;
  }

  .lp-factory__stat-number {
    font-size: 20px;
  }

  .lp-factory__stat-label {
    font-size: 11.5px;
  }

  .lp-factory__media img {
    max-height: 250px;
  }

  .lp-factory__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 14px;
  }

  .lp-factory__gallery-image {
    margin-bottom: 3px;
  }

  .lp-factory__gallery-image img {
    height: 120px;
  }

  .lp-factory__gallery-icon {
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }

  .lp-factory__gallery-icon img {
    width: 16px;
    height: 16px;
  }

  .lp-factory__gallery-text {
    font-size: 12px;
  }

  /*
	 * Chứng nhận và đối tác.
	 */
  .lp-certificates__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .lp-certificates__item {
    padding: 18px 10px 14px;
  }

  .lp-certificates__image {
    height: 74px;
    margin-bottom: 10px;
  }

  .lp-certificates__label {
    font-size: 13px;
  }

  .lp-certificates__footer {
    margin-top: 22px;
    width: auto;
    font-size: 13px;
    line-height: 1.6;
  }

  .lp-partners__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 12px;
  }

  .lp-partners__item {
    height: 66px;
    padding: 4px;
  }

  /*
	 * Form báo giá.
	 */
  .lp-contact__layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .lp-contact__form,
  .lp-contact__side {
    padding: 20px 16px;
  }

  .lp-form__row {
    grid-template-columns: 1fr;
    gap: 14px;

    margin-bottom: 14px;
  }

  .lp-form__field input[type="text"],
  .lp-form__field input[type="tel"],
  .lp-form__field input[type="email"],
  .lp-form__field select {
    height: 46px;

    line-height: 46px;
  }

  .lp-form__submit input[type="submit"] {
    height: 52px;

    font-size: 15px;
    line-height: 52px;
  }

  .lp-form__submit-icon {
    transform: translate(-88px, -50%);
  }

  .lp-contact__side-title {
    margin-bottom: 22px;
  }

  .lp-contact__channel {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .lp-contact__channel-text--highlight {
    font-size: 17px;
  }

  /*
	 * Footer.
	 */
  .lp-footer__layout {
    padding: 22px 18px;
    gap: 22px;
  }

  .lp-footer__logo img {
    max-height: 100px;
  }

  .lp-footer__info {
    gap: 14px;
  }

  .lp-footer__info-icon {
    width: 36px;
    height: 36px;
  }

  .lp-footer__info-icon img {
    width: 18px;
    height: 18px;
  }

  .lp-footer__info-text,
  .lp-footer__links a {
    font-size: 14px;
  }

  .lp-footer__links {
    margin-bottom: 18px;
    padding-bottom: 18px;
  }

  .lp-footer__social {
    width: 38px;
    height: 38px;
  }
}

@media screen and (max-width: 480px) {
  /*
	 * Điện thoại nhỏ: thu gọn thêm một mức.
	 */
  .lp-problems,
  .lp-benefits,
  .lp-products,
  .lp-factory,
  .lp-certificates,
  .lp-partners,
  .lp-contact {
    padding: 28px 0;
  }

  .lp-problems__heading,
  .lp-benefits__heading,
  .lp-products__heading,
  .lp-factory__heading,
  .lp-certificates__heading,
  .lp-partners__heading,
  .lp-contact__heading {
    font-size: 21px;
  }

  .lp-problems__item {
    gap: 14px;
  }

  .lp-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-certificates__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-partners__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .lp-factory__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }

  .lp-products__image {
    height: 170px;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Chặn tràn ngang và tối ưu Hero / Header trên mobile
 * ==========================================================================
 */

/*
 * Không để bất kỳ element nào đẩy trang tràn ngang.
 * (Không đặt max-width:100% cho .lp-problems...footer nữa vì sẽ đè
 * mất công thức width:min(1300px, ...) vừa viết riêng cho landing
 * page — min() ở trên đã tự đảm bảo không tràn ngang rồi.)
 */
.lp-header img,
.lp-hero img,
.lp-problems img,
.lp-benefits img,
.lp-products img,
.lp-factory img,
.lp-certificates img,
.lp-partners img,
.lp-contact img,
.lp-footer img {
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  /*
	 * Hero: bỏ ép chiều cao theo màn hình, canh nội dung gọn gàng.
	 */
  .lp-hero {
    display: block;

    height: auto;
    min-height: 0;
  }

  .lp-hero__inner {
    padding: 46px 0 44px;
  }

  .lp-hero__content,
  .lp-hero__desc,
  .lp-hero__tags {
    max-width: none;
  }

  .lp-hero__brand {
    margin-bottom: 8px;

    font-size: 21px;
    line-height: 1.25;
  }

  .lp-hero__heading {
    margin-bottom: 14px;

    font-size: 26px;
    line-height: 1.28;
  }

  .lp-hero__desc {
    margin-bottom: 16px;

    font-size: 15px;
    line-height: 1.65;
  }

  .lp-hero__tags {
    gap: 4px 8px;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }

  .lp-hero__tags li {
    font-size: 13.5px;
  }

  /*
	 * Hai nút xếp dọc, chiếm trọn chiều ngang cho dễ bấm.
	 */
  .lp-hero__actions {
    flex-direction: column;
    gap: 10px;
  }

  .lp-hero__btn {
    justify-content: center;

    width: 100%;
    padding: 14px 20px;

    font-size: 15px;
  }

  /*
	 * Header: logo trái, nút hotline phải, hamburger sau cùng.
	 */
  .lp-header__inner {
    flex-wrap: nowrap;
    gap: 10px;

    padding: 10px 0;
  }

  .lp-header__logo {
    margin-right: auto;
  }

  .lp-header__logo img {
    max-width: 130px;
    max-height: 44px;
  }

  .lp-header__button {
    order: 2;

    padding: 10px 16px;

    font-size: 14px;
  }

  .lp-header__toggle {
    order: 3;
    margin: 0px !important;
    width: 38px;
    height: 38px;
    margin-left: 0;
  }

  .lp-header__nav {
    order: 4;
  }

  .lp-header__menu a {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .lp-hero__inner {
    padding: 38px 0 36px;
  }

  .lp-hero__brand {
    font-size: 19px;
  }

  .lp-hero__heading {
    font-size: 23px;
    text-align: center;
  }

  .lp-hero__desc {
    font-size: 14.5px;
    text-align: center;
  }

  /*
	 * Màn rất hẹp: ẩn chữ nút hotline, chỉ giữ icon tròn.
	 */
  .lp-header__logo img {
    max-width: 112px;
    max-height: 40px;
  }

  .lp-header__button {
    gap: 0;

    width: 42px;
    height: 42px;
    padding: 0;

    justify-content: center;
  }

  .lp-header__button-text {
    display: none;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Menu dạng sidebar trượt từ phải + padding 2 bên trên mobile
 * ==========================================================================
 */

/*
 * Flatsome đặt z-index: 1 cho mọi .section-content nên mỗi Section là
 * một stacking context riêng, Section sau sẽ vẽ đè lên Section trước.
 * Nâng riêng Section chứa header lên trên cùng để sidebar không bị
 * nội dung phía dưới che mất. (assets/js/lp.js cũng xử lý tương tự
 * cho trình duyệt chưa hỗ trợ :has)
 */
.section:has(.lp-header),
.section:has(.lp-header) .section-content,
.section:has(.lp-header) .col,
.section:has(.lp-header) .col-inner {
  position: relative;
  z-index: 100;
}

/*
 * Chỉ khi sidebar đang mở mới nâng lên thật cao để vượt qua widget
 * chat của bên thứ ba. Đóng menu là trả lại mức thường, nhờ vậy thanh
 * admin WordPress và UX Builder vẫn dùng bình thường.
 */
body.lp-menu-open .section:has(.lp-header),
body.lp-menu-open .section:has(.lp-header) .section-content,
body.lp-menu-open .section:has(.lp-header) .col,
body.lp-menu-open .section:has(.lp-header) .col-inner {
  z-index: 1000010;
}

/*
 * Lớp phủ nền khi mở menu. Mặc định ẩn hoàn toàn.
 */
.lp-header__overlay {
  position: fixed;
  top: var(--lp-admin-bar-h, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 98;

  display: none;

  background: rgba(15, 22, 40, 0.5);

  opacity: 0;
  transition: opacity 0.3s ease;
}

/*
 * Nút đóng nằm trong sidebar, chỉ hiện trên mobile.
 */
.lp-header__close {
  display: none;

  position: absolute;
  top: 14px;
  right: 14px;

  width: 40px;
  height: 40px;
  padding: 0;

  background: transparent;
  border: 0;

  cursor: pointer;
}

.lp-header__close span {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: 20px;
  height: 2px;

  background: #333;
  border-radius: 2px;
}

.lp-header__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lp-header__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 900px) {
  /*
	 * Menu chuyển thành sidebar cố định bên phải màn hình.
	 */
  .lp-header__nav {
    position: fixed;
    top: var(--lp-admin-bar-h, 0px);
    right: 0;
    bottom: 0;
    z-index: 99;

    display: block;

    width: min(300px, 82vw);
    padding: 66px 22px 28px;

    background: #ffffff;
    border-top: 0;
    box-shadow: -6px 0 26px rgba(15, 22, 40, 0.16);

    overflow-y: auto;
    overscroll-behavior: contain;

    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
  }

  .lp-header--open .lp-header__nav {
    transform: translateX(0);
    visibility: visible;
  }

  .lp-header__overlay {
    display: block;
  }

  .lp-header--open .lp-header__overlay {
    opacity: 1;
  }

  .lp-header:not(.lp-header--open) .lp-header__overlay {
    pointer-events: none;
  }

  .lp-header__close {
    display: block;
  }

  /*
	 * Danh sách menu trong sidebar.
	 */
  .lp-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .lp-header__menu a {
    padding: 14px 2px;

    border-bottom: 1px solid #f0f2f5;

    font-size: 16px;
    font-weight: 600;
  }

  .lp-header__menu li:last-child a {
    border-bottom: 0;
  }

  .lp-header__menu a::after {
    display: none;
  }

  /*
	 * Khoá cuộn trang khi sidebar đang mở.
	 */
  body.lp-menu-open {
    overflow: hidden;
  }
}

/*
 * Header va Hero tu full-bleed ra het viewport, nen phan chu ben
 * trong phai tu gioi han lai 1300px va canh giua.
 *
 * Padding trai/phai dung dung 15px bang voi padding cua .col
 * Flatsome, nho vay chu trong Header/Hero thang hang tuyet doi voi
 * noi dung cua cac section ben duoi (deu bat dau cach mep row 15px).
 */
.lp-header__inner,
.lp-hero__inner {
  /*
   * width: 100% la bat buoc - .lp-hero la flex container nen neu
   * khong ep, .lp-hero__inner chi rong bang noi dung roi bi margin
   * auto keo vao giua, lam chu Hero khong con thang hang ben trai.
   */
  width: 100%;
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

/**
 * ==========================================================================
 * LP BBMS - Nen xen ke giua cac section + diem nhan giao dien
 *
 * Dat cuoi file de ghi de moi khai bao phia tren.
 *
 * Cac element .lp-* deu da full-bleed (tran het chieu ngang man
 * hinh) nen to nen thang len chung la du - mau phu tron ven, khong
 * bi hut 2 ben. Nho vay khong con phu thuoc :has(), class tren body
 * hay JavaScript nua.
 * ==========================================================================
 */

/* Loi ich tui tai che - xanh la cuc nhat */
.lp-benefits {
  background-color: #f4faf5;
}

/* Nang luc nha may - xanh duong cuc nhat */
.lp-factory {
  background-color: #f4f8fc;
}

/* Doi tac - xam xanh trung tinh */
.lp-partners {
  background-color: #f7f9fb;
}

/* Form bao gia - chuyen sac nhe cho co chieu sau */
.lp-contact {
  background-image: linear-gradient(180deg, #eaf2fa 0%, #f8fbfd 100%);
}

/* Footer - tach khoi phan noi dung phia tren */
.lp-footer {
  background-color: #f3f6f9;
}

/*
 * Duong ke mo phan tach giua 2 section cung mau trang, tranh cam
 * giac troi noi dung vao nhau.
 */
.lp-products {
  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5;
}

/**
 * ==========================================================================
 * Gach chan gradient duoi tieu de section
 * ==========================================================================
 */
.lp-problems__heading,
.lp-benefits__heading,
.lp-products__heading,
.lp-certificates__heading,
.lp-partners__heading,
.lp-contact__heading,
.lp-factory__heading {
  position: relative;

  /* Chua cho cho gach chan ben duoi */
  padding-bottom: 16px;
}

.lp-problems__heading::after,
.lp-benefits__heading::after,
.lp-products__heading::after,
.lp-certificates__heading::after,
.lp-partners__heading::after,
.lp-contact__heading::after,
.lp-factory__heading::after {
  content: "";

  position: absolute;
  bottom: 0;

  display: block;

  width: 56px;
  height: 3px;

  background-image: linear-gradient(90deg, #1e73be 0%, #50b848 100%);
  border-radius: 3px;
}

/*
 * Tieu de cua cac section can giua thi gach chan cung can giua.
 */
.lp-problems__heading::after,
.lp-benefits__heading::after,
.lp-products__heading::after,
.lp-certificates__heading::after,
.lp-partners__heading::after,
.lp-contact__heading::after {
  left: 50%;

  transform: translateX(-50%);
}

/*
 * Rieng "Nang luc nha may" can trai nen gach chan cung can trai.
 */
.lp-factory__heading::after {
  left: 0;
}

/**
 * ==========================================================================
 * Hieu ung hover cho cac the card
 * ==========================================================================
 */
.lp-benefits__card,
.lp-certificates__item {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.lp-benefits__card:hover,
.lp-certificates__item:hover {
  transform: translateY(-4px);

  border-color: #dbe7f2;
  box-shadow: 0 10px 26px rgba(20, 40, 80, 0.1);
}

/*
 * Anh trong luoi Nang luc nha may va San pham: phong to rat nhe
 * khi ro chuot vao cho co cam giac tuong tac.
 */
.lp-factory__gallery-image,
.lp-products__image {
  overflow: hidden;
  border-radius: 12px;
}

.lp-factory__gallery-image img,
.lp-products__image img {
  transition: transform 0.35s ease;
}

.lp-factory__gallery-item:hover .lp-factory__gallery-image img,
.lp-products__item:hover .lp-products__image img {
  transform: scale(1.04);
}

/*
 * Thiet bi dung cam ung khong co trang thai hover, tat cac hieu ung
 * tren de tranh bi "dinh" trang thai sau khi cham.
 */
@media (hover: none) {
  .lp-benefits__card:hover,
  .lp-certificates__item:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(20, 30, 60, 0.05);
  }

  .lp-factory__gallery-item:hover .lp-factory__gallery-image img,
  .lp-products__item:hover .lp-products__image img {
    transform: none;
  }
}

/**
 * ==========================================================================
 * LP BBMS - Trang thai ban dau cua hieu ung cuon (GSAP)
 *
 * Cac rule duoi day CHI ap dung khi the <html> co class "lp-anim"
 * (do functions.php gan ngay dau trang). Nho vay:
 *   - Tat JavaScript  -> class khong duoc gan -> noi dung hien binh thuong
 *   - Bat giam chuyen dong -> khong gan class -> hien binh thuong
 *   - GSAP tai loi -> assets/js/lp-animations.js tu go class -> hien lai
 *
 * Muc dich: dau san phan tu TRUOC khi trinh duyet ve, tranh hien
 * tuong noi dung hien ra roi moi giat vao vi tri.
 *
 * will-change giup trinh duyet chuan bi truoc, chay muot hon tren
 * may yeu; chi dat o nhung phan tu that su co chuyen dong.
 * ==========================================================================
 */

/* ---- Hero: chu truot len tu duoi ---- */
html.lp-anim .lp-hero__brand,
html.lp-anim .lp-hero__heading,
html.lp-anim .lp-hero__desc,
html.lp-anim .lp-hero__tags,
html.lp-anim .lp-hero__actions {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}

/* ---- Tieu de cac section: truot len ---- */
html.lp-anim .lp-problems__header,
html.lp-anim .lp-benefits__header,
html.lp-anim .lp-products__header,
html.lp-anim .lp-certificates__header,
html.lp-anim .lp-partners__header,
html.lp-anim .lp-contact__header,
html.lp-anim .lp-certificates__footer {
  opacity: 0;
  transform: translateY(34px);
  will-change: transform, opacity;
}

/* ---- Van de doanh nghiep / San pham: truot len ---- */
html.lp-anim .lp-problems__item,
html.lp-anim .lp-products__item {
  opacity: 0;
  transform: translateY(38px);
  will-change: transform, opacity;
}

/* ---- Loi ich: noi len kem phong nhe cho co chieu sau ---- */
html.lp-anim .lp-benefits__card {
  opacity: 0;
  transform: translateY(34px) scale(0.96);
  will-change: transform, opacity;
}

/* ---- Chung nhan / Doi tac: hien dan, phong rat nhe ---- */
html.lp-anim .lp-certificates__item,
html.lp-anim .lp-partners__item {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  will-change: transform, opacity;
}

/* ---- Nang luc nha may: chu ben trai truot sang phai ---- */
html.lp-anim .lp-factory__heading,
html.lp-anim .lp-factory__desc {
  opacity: 0;
  transform: translateX(-34px);
  will-change: transform, opacity;
}

html.lp-anim .lp-factory__stat,
html.lp-anim .lp-factory__gallery-item {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}

/* Anh lon ben phai truot nguoc chieu voi chu ben trai */
html.lp-anim .lp-factory__media {
  opacity: 0;
  transform: translateX(38px);
  will-change: transform, opacity;
}

/* ---- Form bao gia: 2 khoi truot vao tu 2 phia ---- */
html.lp-anim .lp-contact__form {
  opacity: 0;
  transform: translateX(-34px);
  will-change: transform, opacity;
}

html.lp-anim .lp-contact__side {
  opacity: 0;
  transform: translateX(34px);
  will-change: transform, opacity;
}

/* ---- Footer ---- */
html.lp-anim .lp-footer__brand,
html.lp-anim .lp-footer__info-item,
html.lp-anim .lp-footer__aside {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

/*
 * Tren mobile giam bien do chuyen dong ngang lai, vi man hinh hep
 * neu truot xa qua se tao thanh cuon ngang.
 */
@media screen and (max-width: 768px) {
  html.lp-anim .lp-factory__heading,
  html.lp-anim .lp-factory__desc,
  html.lp-anim .lp-contact__form {
    transform: translateX(-18px);
  }

  html.lp-anim .lp-factory__media,
  html.lp-anim .lp-contact__side {
    transform: translateX(18px);
  }
}

/**
 * ==========================================================================
 * LP BBMS - Do rong noi dung cua tat ca section
 *
 * Moi section duoc chia lam 2 lop, dung y het Hero va Header:
 *
 *   .lp-xxx         -> tran het chieu ngang man hinh (full-bleed),
 *                      de mau nen phu tron ven khong bi hut 2 ben
 *   .lp-xxx__inner  -> gioi han noi dung o 1300px va canh giua
 *
 * Nho vay do rong khong con phu thuoc .row cua Flatsome nua (theme
 * dang gioi han o 1120px), va cung khong phu thuoc class .lp-bbms
 * tren body.
 * ==========================================================================
 */
.lp-problems,
.lp-benefits,
.lp-products,
.lp-factory,
.lp-certificates,
.lp-partners,
.lp-contact,
.lp-footer {
  /*
   * Dong dau la fallback thuan CSS bang 100vw - luon chay duoc ke ca
   * khi JavaScript loi hoac bi plugin cache chan.
   * Hai dong sau dung --lp-vw (assets/js/lp.js do clientWidth, khong
   * tinh thanh cuon) de canh chinh xac tuyet doi. Boc trong max() de
   * neu bien loi hoac bang 0 thi tu roi ve 100%, khong lam sap layout.
   */
  position: relative;
  max-width: none;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  width: max(100%, var(--lp-vw, 0px));
  margin-left: calc(50% - max(100%, var(--lp-vw, 0px)) / 2);
  margin-right: calc(50% - max(100%, var(--lp-vw, 0px)) / 2);
}

/*
 * Lop trong: gioi han 1300px va canh giua.
 *
 * padding trai/phai dung 15px bang dung padding cua .col Flatsome,
 * nho vay noi dung moi section thang hang tuyet doi voi Header va
 * Hero (deu bat dau cach mep khung 1300px dung 15px).
 */
.lp-problems__inner,
.lp-benefits__inner,
.lp-products__inner,
.lp-factory__inner,
.lp-certificates__inner,
.lp-partners__inner,
.lp-contact__inner,
.lp-footer__inner {
  width: 100%;
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

/**
 * ==========================================================================
 * LP BBMS - Modal tu van bao gia
 *
 * Mo bang cach bam vao bat ky lien ket nao co href="#modal-tu-van".
 * Modal duoc in truc tiep trong <body> (xem inc/lp-modal.php) nen
 * khong bi ket trong stacking context cua Section Flatsome.
 * ==========================================================================
 */
.lp-modal {
  position: fixed;
  inset: 0;

  /*
   * Cao hon ca widget chat cua ben thu ba (tawk.to dung khoang
   * 1.000.004) de modal khong bi bong bong chat che mat.
   */
  z-index: 1000020;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px 16px;

  /* An hoan toan khi chua mo, khong doc duoc bang trinh doc man hinh */
  visibility: hidden;
  opacity: 0;

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.lp-modal--open {
  visibility: visible;
  opacity: 1;
}

.lp-modal__overlay {
  position: absolute;
  inset: 0;

  background: rgba(15, 22, 40, 0.55);
}

.lp-modal__dialog {
  position: relative;

  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  padding: 34px 30px 30px;

  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 22, 40, 0.28);

  overflow-y: auto;
  overscroll-behavior: contain;

  /* Truot len mot chut khi mo cho co chieu sau */
  transform: translateY(18px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-modal--open .lp-modal__dialog {
  transform: translateY(0) scale(1);
}

/*
 * Nut dong hinh chu X o goc tren phai.
 */
.lp-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;

  width: 40px;
  height: 40px;
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 50%;

  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lp-modal__close:hover {
  background: #f2f4f7;
}

.lp-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: 18px;
  height: 2px;

  background: #333;
  border-radius: 2px;
}

.lp-modal__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lp-modal__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * Tieu de va mo ta cua modal.
 */
.lp-modal__header {
  margin-bottom: 22px;
  padding-right: 44px;
}

.lp-modal__title {
  margin: 0 0 8px;

  color: var(--lp-contact-primary);
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
}

.lp-modal__desc {
  margin: 0;

  color: #666;

  font-size: 15px;
  line-height: 1.6;
}

/*
 * Khung form trong modal dung chung class .lp-contact__form de tan
 * dung toan bo CSS da viet san. O day chi bo phan khung the (padding,
 * vien, bo goc) vi da co khung cua modal bao ben ngoai roi.
 */
.lp-modal__form {
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
}

/*
 * Hieu ung cuon GSAP an san .lp-contact__form. Form trong modal
 * khong duoc phep bi an theo, nen tra lai trang thai hien binh
 * thuong o day.
 */
html.lp-anim .lp-modal .lp-contact__form {
  opacity: 1;
  transform: none;
}

/*
 * Khoa cuon trang phia sau khi modal dang mo.
 */
body.lp-modal-open {
  overflow: hidden;
}

@media screen and (max-width: 560px) {
  .lp-modal {
    padding: 16px 12px;
  }

  .lp-modal__dialog {
    max-height: calc(100vh - 32px);
    padding: 30px 18px 22px;
  }

  .lp-modal__header {
    margin-bottom: 18px;
  }

  .lp-modal__title {
    font-size: 19px;
  }

  .lp-modal__desc {
    font-size: 14px;
  }
}