SECAM CUNG CẤP GIẢI PHÁP CÔNG TRÌNH

/* ==================================================
   RESET VÀ KHUNG VÒNG LẶP
================================================== */

.css-box-gp,
.css-box-gp *,
.css-box-gp *::before,
.css-box-gp *::after {
  box-sizing: border-box;
}

.css-box-gp {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  gap: 70px;
  overflow: visible !important;
}


/* ==================================================
   BỐ CỤC CHUNG MỖI ITEM
================================================== */

.css-box-gp > .css-item-gp {
  display: grid !important;
  align-items: stretch !important;
  width: 100%;
  column-gap: 60px;

  /* Chừa chỗ cho hai lớp xanh bên phải ảnh */
  padding-right: 14px;

  overflow: visible !important;
}


/* ==================================================
   ITEM LẺ: ẢNH TRÁI – NỘI DUNG PHẢI
================================================== */

.css-box-gp > .css-item-gp:nth-child(odd) {
  grid-template-columns: 380px minmax(0, 1fr);
}

.css-box-gp > .css-item-gp:nth-child(odd)
> .brxe-block:first-child {
  grid-column: 1;
  grid-row: 1;
}

.css-box-gp > .css-item-gp:nth-child(odd)
> .css-content {
  grid-column: 2;
  grid-row: 1;
}


/* ==================================================
   ITEM CHẴN: NỘI DUNG TRÁI – ẢNH PHẢI
================================================== */

.css-box-gp > .css-item-gp:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.css-box-gp > .css-item-gp:nth-child(even)
> .brxe-block:first-child {
  grid-column: 2;
  grid-row: 1;
}

.css-box-gp > .css-item-gp:nth-child(even)
> .css-content {
  grid-column: 1;
  grid-row: 1;
}


/* ==================================================
   KHỐI CHỨA ẢNH
================================================== */

.css-box-gp > .css-item-gp
> .brxe-block:first-child {
  width: 100%;
  height: 330px;
  min-width: 0;
  overflow: visible !important;
}


/* ==================================================
   ẢNH VÀ HAI LỚP MÀU XANH
================================================== */

.css-box-gp .css-img-gp {
  position: relative;
  display: block;
  width: 100%;
  height: calc(100% - 14px) !important;
  min-height: 0 !important;
  margin: 0;
  overflow: visible !important;
}

.css-box-gp .css-img-gp img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;

  box-shadow:
    7px 7px 0 rgba(30, 107, 184, 0.75),
    14px 14px 0 rgba(30, 107, 184, 0.3);
}


/* ==================================================
   NỘI DUNG
================================================== */

.css-box-gp .css-content {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  width: 100%;
  height: 330px !important;
  min-width: 0;
}


/* ==================================================
   KHỐI NÚT XEM CHI TIẾT
================================================== */

.css-box-gp .css-btgp {
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 25px;
}

/* Item lẻ: nút căn phải */
.css-box-gp > .css-item-gp:nth-child(odd)
.css-btgp {
  justify-content: flex-end !important;
}

.css-box-gp > .css-item-gp:nth-child(odd)
.css-btgp .brxe-button {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* Item chẵn: nút căn trái */
.css-box-gp > .css-item-gp:nth-child(even)
.css-btgp {
  justify-content: flex-start !important;
}

.css-box-gp > .css-item-gp:nth-child(even)
.css-btgp .brxe-button {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* Thêm dấu >> sau chữ */
.css-box-gp .css-btgp .brxe-button::after {
  content: ">>";
  margin-left: 15px;
}


/* ==================================================
   TABLET: 768PX – 991PX
================================================== */

@media (min-width: 768px) and (max-width: 991px) {
  .css-box-gp {
    gap: 55px;
    overflow: visible !important;
  }

  .css-box-gp > .css-item-gp {
    column-gap: 35px;
    padding-right: 12px;
  }

  /* Item lẻ */
  .css-box-gp > .css-item-gp:nth-child(odd) {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  /* Item chẵn */
  .css-box-gp > .css-item-gp:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .css-box-gp > .css-item-gp
  > .brxe-block:first-child,
  .css-box-gp .css-content {
    height: 270px !important;
  }

  .css-box-gp .css-img-gp {
    width: 100%;
    height: calc(100% - 12px) !important;
  }

  .css-box-gp .css-img-gp img {
    box-shadow:
      6px 6px 0 rgba(30, 107, 184, 0.75),
      12px 12px 0 rgba(30, 107, 184, 0.3);
  }
}


/* ==================================================
   MOBILE: MỘT CỘT, ẢNH TRÊN – NỘI DUNG DƯỚI
================================================== */

@media (max-width: 767px) {
  .css-box-gp {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    gap: 55px;

    /* Ngăn lớp xanh làm tràn ngang trang */
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Reset bố cục xen kẽ */
  .css-box-gp > .css-item-gp,
  .css-box-gp > .css-item-gp:nth-child(odd),
  .css-box-gp > .css-item-gp:nth-child(even) {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    row-gap: 25px;

    /* Chừa chỗ cho lớp xanh bên phải */
    padding: 0 12px 0 0;

    overflow: visible !important;
  }

  /* Ảnh luôn nằm trên */
  .css-box-gp > .css-item-gp
  > .brxe-block:first-child {
    order: 1;
    width: 100%;
    height: auto !important;
    min-width: 0;
    overflow: visible !important;
  }

  /* Nội dung luôn nằm dưới */
  .css-box-gp > .css-item-gp
  > .css-content {
    order: 2;
    width: 100%;
    height: auto !important;
    min-width: 0;
  }

  .css-box-gp .css-img-gp {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: visible !important;
  }

  .css-box-gp .css-img-gp img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;

    box-shadow:
      6px 6px 0 rgba(30, 107, 184, 0.75),
      12px 12px 0 rgba(30, 107, 184, 0.3);
  }

  /* Mobile: tất cả nút căn trái */
  .css-box-gp .css-btgp,
  .css-box-gp > .css-item-gp:nth-child(odd)
  .css-btgp,
  .css-box-gp > .css-item-gp:nth-child(even)
  .css-btgp {
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding-top: 0;
  }

  .css-box-gp .css-btgp .brxe-button,
  .css-box-gp > .css-item-gp:nth-child(odd)
  .css-btgp .brxe-button,
  .css-box-gp > .css-item-gp:nth-child(even)
  .css-btgp .brxe-button {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}


/* ==================================================
   MOBILE NHỎ: TỐI ĐA 420PX
================================================== */

@media (max-width: 420px) {
  .css-box-gp {
    gap: 45px;
  }

  .css-box-gp > .css-item-gp,
  .css-box-gp > .css-item-gp:nth-child(odd),
  .css-box-gp > .css-item-gp:nth-child(even) {
    row-gap: 22px;
    padding-right: 10px;
  }

  .css-box-gp .css-img-gp {
    aspect-ratio: 16 / 10;
  }

  .css-box-gp .css-img-gp img {
    box-shadow:
      5px 5px 0 rgba(30, 107, 184, 0.75),
      10px 10px 0 rgba(30, 107, 184, 0.3);
  }

  .css-box-gp .css-btgp .brxe-button::after {
    margin-left: 8px;
  }
}