/*
 * BCL: thẻ dự án. Phần đầu là các rule .prli tách nguyên từ product.css (thẻ Nhà mẫu của BCP)
 * để dùng ở trang chủ / trang dự án mà không nạp cả product.css. Phần cuối là bổ sung cho dự án.
 */
.prli {padding: 8rem 0rem 10rem;}
@media screen and (max-width: 991px) {
  .prli {padding: 6rem 0rem;}
}
.prli {background: linear-gradient(180deg, rgba(254, 193, 16, 0.05) 0%, rgba(254, 193, 16, 0) 100%);}
.prli.bg-circle::before {right: -40%;
  bottom: -25%;}
.prli.bg-circle::after {top: 10%;
  left: -40%;
  position: absolute;
  content: "";
  z-index: -1;
  width: 126.2rem;
  height: 126.2rem;
  pointer-events: none;
  border-radius: var(--radius-circle);
  background: radial-gradient(50% 50% at 50% 50%, rgba(254, 193, 16, 0.15) 0%, rgba(254, 193, 16, 0) 100%);}
@media screen and (max-width: 1200px) {
  .prli.bg-circle::after {content: unset;}
}
@media screen and (max-width: 991px) {
  .prli-wrap {gap: 4rem;}
}
@media screen and (max-width: 991px) {
  .prli-heading {gap: 2.4rem;}
}
@media screen and (max-width: 991px) {
  .prli-inner {gap: 4rem;}
}
.prli-list {gap: 5.6rem 3.2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);}
@media screen and (max-width: 991px) {
  .prli-list {gap: 4rem 2.4rem;}
}
@media screen and (max-width: 767px) {
  .prli-list {gap: 3.2rem;
    grid-template-columns: 1fr;}
}
.prli-item {height: 100%;}
.prli-box {gap: 3.2rem;
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;}
@media screen and (max-width: 991px) {
  .prli-box {gap: 2rem;}
}
@media screen and (hover: hover) and (pointer: fine) and (min-width: 1201px) {
  .prli-box:hover .prli-box_img, .prli-box:focus-visible .prli-box_img {box-shadow: var(--box-shadow-2);}
  .prli-box:hover .prli-box_img > img, .prli-box:focus-visible .prli-box_img > img {transform: scale(1.05);}
  .prli-box:hover .prli-box_arrow, .prli-box:focus-visible .prli-box_arrow {opacity: 1;
    visibility: visible;
    transform: translate(0, 0);}
  .prli-box:hover .prli-box_title, .prli-box:focus-visible .prli-box_title {color: #fec110;}
}
.prli-box_img {width: 100%;
  height: 40rem;
  flex-shrink: 0;
  transition: 0.4s ease-in-out;
  border-radius: var(--radius-l);}
@media screen and (max-width: 1200px) {
  .prli-box_img {height: 32rem;}
}
@media screen and (max-width: 576px) {
  .prli-box_img {height: 24rem;}
}
.prli-box_tag {z-index: 2;
  top: 1.6rem;
  left: 1.6rem;
  color: white;
  position: absolute;
  border-radius: 10rem;
  padding: 0.8rem 1.6rem;
  background-color: #1e2943;}
@media screen and (max-width: 576px) {
  .prli-box_tag {top: 1.2rem;
    left: 1.2rem;
    padding: 0.6rem 1.2rem;}
}
.prli-box_arrow {z-index: 2;
  opacity: 0;
  top: 1.6rem;
  right: 1.6rem;
  visibility: hidden;
  position: absolute;
  width: 4.8rem;
  height: 4.8rem;
  transition: 0.4s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 4rem;
  background-color: #fec110;
  box-shadow: var(--box-shadow-2);
  transform: translate(0.8rem, -0.8rem);}
.prli-box_arrow img {position: static;
  width: 1.6rem;
  height: 1.6rem;
  -o-object-fit: contain;
     object-fit: contain;
  transform: rotate(-45deg);}
.prli-box_title {transition: 0.4s ease-in-out;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 2;}
.prli-box_meta li {position: relative;}
.prli-box_meta li:not(:last-child)::after {top: 0;
  content: "";
  right: -1.2rem;
  position: absolute;
  background-color: #d9d9d9;
  width: 0.1rem;
  height: 2.8rem;}
.prli-box_meta img {flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;}
@media screen and (max-width: 576px) {
  .prli-box_meta img {width: 2.4rem;
    height: 2.4rem;}
}

/* ---------- BCL: bổ sung cho dự án ---------- */
.prli-list.is-single {
  grid-template-columns: minmax(0, 72rem);
  justify-content: center;
}
.prli-box_location .ic {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}
.prli-box_summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.du-an-group + .du-an-group {
  padding-top: 0;
}
.du-an-empty {
  opacity: 0.7;
  padding: 2.4rem 0;
}

/* Banner: trời của ảnh BCL sáng (nắng góc trái) → dải tối mờ phía trên cho logo trắng + menu đọc rõ. */
.banner-home_sticky::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22rem;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 33, 58, 0.42) 0%, rgba(14, 33, 58, 0) 100%);
}

/* ---------- BCL: Video (3 video từ trang chủ canhob-one.com) ---------- */
.bcl-videos { padding: 10rem 0; }
@media screen and (max-width: 991px) { .bcl-videos { padding: 6rem 0; } }
.bcl-videos_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; }
@media screen and (max-width: 991px) { .bcl-videos_list { grid-template-columns: 1fr; gap: 2.4rem; } }
.bcl-videos_link { display: flex; flex-direction: column; gap: 1.6rem; color: #1e2943; }
.bcl-videos_img { position: relative; display: block; overflow: hidden; border-radius: 1.6rem; aspect-ratio: 16 / 9; }
.bcl-videos_img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.bcl-videos_play {
  position: absolute; top: 50%; left: 50%; width: 7.2rem; height: 7.2rem; margin: -3.6rem 0 0 -3.6rem;
  border-radius: 50%; background: rgba(254, 193, 16, 0.92); box-shadow: 0 0 0 1.2rem rgba(254, 193, 16, 0.25);
  transition: transform 0.4s ease;
}
.bcl-videos_play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 1.1rem 0 1.1rem 1.8rem; border-color: transparent transparent transparent #1e2943;
}
@media (hover: hover) and (pointer: fine) {
  .bcl-videos_link:hover .bcl-videos_img img { transform: scale(1.05); }
  .bcl-videos_link:hover .bcl-videos_play { transform: scale(1.1); }
  .bcl-videos_link:hover .bcl-videos_title { color: #fec110; }
}

/* ---------- BCL: Đối tác ---------- */
.bcl-partners { padding: 2rem 0 10rem; }
@media screen and (max-width: 991px) { .bcl-partners { padding: 0 0 6rem; } }
.bcl-partners_list { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.2rem; width: 100%; }
.bcl-partners_item { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; width: calc((100% - 6.4rem) / 3); max-width: 36rem; }
@media screen and (max-width: 767px) { .bcl-partners_item { width: 100%; } }
.bcl-partners_logo {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 2 / 1; padding: 2.4rem 3.2rem;
  border-radius: 1.6rem; background: #fff; box-shadow: 0 0.8rem 3.2rem rgba(30, 41, 67, 0.08); margin-bottom: 0.8rem;
}
.bcl-partners_logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- BCL: phần đầu trang dự án chưa có banner (template-parts/du-an/hero-simple.php) ---------- */
.bcl-hero { padding: var(--header-height) 0 8rem; background: linear-gradient(180deg, rgba(254, 193, 16, 0.08) 0%, rgba(254, 193, 16, 0) 100%); }
@media screen and (max-width: 991px) { .bcl-hero { padding-bottom: 5rem; } }
.bcl-hero_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6.4rem; align-items: center; margin-top: 4rem; }
@media screen and (max-width: 991px) { .bcl-hero_wrap { grid-template-columns: 1fr; gap: 3.2rem; margin-top: 2.4rem; } }
.bcl-hero_tag { align-self: flex-start; padding: 0.6rem 1.6rem; border-radius: 4rem; background: #1e2943; color: #fff; }
.bcl-hero_loc .ic { width: 2rem; height: 2rem; }
.bcl-hero_img { overflow: hidden; border-radius: 2.4rem; aspect-ratio: 800 / 680; box-shadow: 0 1.6rem 4rem rgba(30, 41, 67, 0.12); }
.bcl-hero_img img { width: 100%; height: 100%; object-fit: cover; }
.bcl-hero .view-link { align-self: flex-start; margin-top: 0.8rem; }