/* ---------------------------------------------------------------------------
   Khối "Dự án tiêu biểu" + "Tin tức nổi bật" ngay dưới slide đầu trang.

   Một tấm thẻ trắng chia hai cột, nằm hẳn bên dưới slide.
   --------------------------------------------------------------------------- */

.nv-highlights {
  position: relative;
  z-index: 4;
  /* Trước đây khối này kéo lên -70px để đè một phần vào slide cho hai phần nối
     liền nhau. Bỏ: slide đầu trang là chỗ đặt thông điệp chính và nút yêu cầu
     báo giá, che mất một mảng đáy là che đúng phần người ta vừa đọc tới. Giờ
     khối nằm hẳn bên dưới, cách slide 30px. */
  margin-top: 30px;
  margin-bottom: 30px;
}

.nv-hl-panel {
  background: #fff;
  border-radius: 16px;
  padding: 28px 30px 30px;
  box-shadow: 0 22px 60px rgba(10, 25, 40, .16);
}

/* Khung hai cột. Tên phải khác .nv-hl-grid (swiper lưới ảnh bên trong cột trái),
   không thì hai luật đè lên nhau. */
.nv-hl-grid-wrap {
  display: grid;
  /* minmax(0, …) là bắt buộc: ô lưới mặc định không co nhỏ hơn nội dung, gặp
     tiêu đề dài là cột phình ra đẩy vỡ cả hàng. */
  /* Cột thẻ dự án rộng gấp đôi cột lưới tin, giữ nguyên như trước khi hai cột
     đổi chỗ - đổi vị trí chứ không đổi dáng. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 30px;
}

/* Vạch ngăn hai cột, vẽ bằng viền của cột phải cho khỏi thêm thẻ trống. */
.nv-hl-col--grid {
  border-left: 1px solid #e6ebef;
  padding-left: 30px;
}

/* Tiêu đề sát mép trái, cụm nút lật đẩy sang mép phải. */
.nv-hl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.nv-hl-title {
  margin: 0;
  font-size: 16px;
  letter-spacing: .02em;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--nv-primary);
}

.nv-hl-title a {
  color: inherit;
}

/* Tiêu đề vốn đã là màu chính, nên lúc rê chuột phải chuyển sang tông đậm hơn -
   để nguyên màu cũ thì bấm vào chẳng thấy phản hồi gì. */
.nv-hl-title a:hover {
  color: var(--nv-primary-deep);
  text-decoration: none;
}

/* Mô tả đi theo tiêu đề, cùng căn trái. */
.nv-hl-desc {
  margin: -8px 0 16px;
  font-size: 13px;
  color: #6b7a86;
  line-height: 1.6;
}

/* Nút lật trang lưới dự án ------------------------------------------------ */

.nv-hl-nav {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.nv-hl-nav button {
  width: 28px;
  height: 28px;
  border: 1px solid #dfe6ec;
  border-radius: 6px;
  background: #fff;
  color: #8a97a1;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nv-hl-nav button:hover {
  background: var(--nv-primary);
  border-color: var(--nv-primary);
  color: #fff;
}

/* Swiper của Swiper 4 đặt .swiper-button-disabled khi hết trang. */
.nv-hl-nav button.swiper-button-disabled {
  opacity: .45;
  cursor: default;
  background: #fff;
  border-color: #dfe6ec;
  color: #8a97a1;
}

/* Lưới ảnh dự án --------------------------------------------------------- */

/* Bỏ autoHeight của Swiper (đo một lần rồi ghim chiều cao, hàng thứ hai bị cắt),
   để chiều cao tự chảy theo nội dung. */
.nv-hl-grid .swiper-slide {
  height: auto;
}

/* Hai ô một hàng chứ không phải ba: ba ô trong cột hẹp thì mỗi ô chỉ khoảng
   80px, ảnh chẳng thấy gì mà tên dự án cũng không đọc nổi. */
.nv-hl-thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Ô vuông cho cao hẳn lên, đọc được tên dự án.
   Cố ý KHÔNG dùng min-height kèm aspect-ratio: có min-height thì trình duyệt tính
   ngược bề rộng từ chiều cao (130 x 4/3 = 173px), ô rộng hơn cột lưới 164px rồi
   thò qua vạch ngăn hai cột. Muốn cao hơn thì đổi tỉ lệ, đừng đặt min-height. */
.nv-hl-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #eef3f7;
}

.nv-hl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.nv-hl-thumb:hover img {
  transform: scale(1.08);
}

/* Tên dự án đè lên đáy ảnh. Nền tối mờ vì ảnh công trình sáng tối khác nhau,
   không có nó thì chữ trắng biến mất trên ảnh sáng. */
.nv-hl-thumb-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 10px 8px;
  background: linear-gradient(to top, rgba(10, 25, 40, .88), rgba(10, 25, 40, 0));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

/* Tên dài cắt còn hai dòng.
   Việc cắt phải làm ở thẻ TRONG chứ không phải thẻ ngoài: thẻ ngoài đặt
   position: absolute nên trình duyệt đổi display của nó thành block, mà
   -webkit-line-clamp chỉ chạy trên -webkit-box. Để ở thẻ ngoài thì dòng thứ ba
   vẫn hiện một nửa rồi bị mép ô cắt ngang, nhìn như lỗi. */
.nv-hl-thumb-name > span {
  /* Phải nhắc lại line-height: website.css có luật `span { line-height: 28px }`
     áp thẳng vào thẻ này, thắng cả giá trị thừa hưởng từ thẻ ngoài. */
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ba thẻ tin ------------------------------------------------------------- */

/* Cột tin nay là một swiper: bề rộng từng thẻ do Swiper tính, không dùng lưới
   nữa. overflow: hidden để thẻ thứ tư không thò ra ngoài thẻ trắng. */
.nv-hl-cards {
  overflow: hidden;
}

/*
 * Mép dưới cột thẻ trùng với hàng thứ hai của cột lưới ảnh.
 *
 * Không đặt chiều cao cứng: chiều cao cột lưới phụ thuộc bề rộng cột (ô vuông),
 * mà bề rộng cột lại đổi theo màn hình - đặt số cố định là sai ngay khi đổi màn.
 * Thay vào đó cho cột thẻ dãn theo chiều cao của hàng lưới, mà hàng lưới lại cao
 * bằng cột cao nhất. Thẻ bỏ tỉ lệ cố định, cao 100%.
 *
 * Nói theo kiểu bố cục chứ không nói trái/phải: hai cột đã đổi chỗ vài lần, ghi
 * "bên trái" vào đây là lần sau đọc lại thành sai.
 */
@media (min-width: 1200px) {
  .nv-hl-col--cards {
    display: flex;
    flex-direction: column;
  }

  .nv-hl-cards {
    /* Cả hai min-* đều bắt buộc với ô flex, và vì hai lý do khác nhau:
       - min-height: 0 để nó chịu co theo chiều cao được cấp, không phình ra
         bằng nội dung;
       - min-width: 0 vì Swiper đặt bề rộng cứng cho từng thẻ, ô flex mặc định
         không chịu hẹp hơn nội dung nên swiper phình rộng hơn cột rồi đẩy cả
         trang tràn ngang (đo được 898px trong cột 767px). overflow: hidden
         không cứu được: nó cắt phần con thò ra chứ không ngăn chính ô phình. */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    /* Bắt buộc: swiper.min.css đặt `.swiper-container { margin: 0 auto }`, mà
       margin auto ở trục ngang VÔ HIỆU HOÁ align-self: stretch của ô flex - ô
       không còn rộng bằng cột nữa mà tự co giãn theo nội dung, tức tổng bề rộng
       mọi thẻ tin (đo được 898px trong cột 767px) rồi đẩy cả trang tràn ngang. */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .nv-hl-cards .swiper-wrapper {
    height: 100%;
  }

  .nv-hl-card {
    height: 100%;
    aspect-ratio: auto;
  }
}

.nv-hl-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #17242f;
  aspect-ratio: 3 / 4;
}

.nv-hl-card > a {
  display: block;
  height: 100%;
}

.nv-hl-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.nv-hl-card:hover .nv-hl-card-img {
  transform: scale(1.06);
}

/* Chữ nằm thẳng trên ảnh nên phải có lớp tối chuyển dần từ đáy lên; ảnh tin do
   người biên tập chọn, sáng tối thế nào không biết trước. */
.nv-hl-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 16px 16px;
  background: linear-gradient(to top, rgba(10, 20, 30, .94) 30%, rgba(10, 20, 30, 0));
  color: #fff;
}

.nv-hl-card-cat {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, .75);
}

.nv-hl-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nv-hl-card > a:hover .nv-hl-card-title {
  color: var(--nv-primary);
}

.nv-hl-card-excerpt {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nv-hl-card-date {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
}

/* Dưới 1200px hai cột xếp dọc. Không cố giữ hai cột đến 992px: ở đó thẻ tin chỉ
   còn khoảng 176px, chữ chen chúc mà hai cột cũng không còn căn đáy với nhau
   được nữa. */
@media (max-width: 1199px) {
  .nv-highlights {
    /* Màn hẹp thì mọi khoảng cách đều thu lại một chút cho đỡ trống. */
    margin-top: 24px;
  }

  .nv-hl-panel {
    padding: 20px;
  }

  .nv-hl-grid-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .nv-hl-col--grid {
    border-left: 0;
    border-top: 1px solid #e6ebef;
    padding-left: 0;
    padding-top: 24px;
  }
}

@media (max-width: 575px) {
  .nv-hl-card {
    aspect-ratio: 16 / 10;
  }
}