/* HiTD p2 · CSS riêng nhóm trang Hạ tầng (ha-tang.html, ha-tang-*.html)
   Nạp sau ../style.css. Chỉ viết ở đây phần chỉ nhóm này dùng; phần dùng chung sửa ở style.css. */

/* Hạ tầng · 1, 4: đoạn giới thiệu, mô tả và danh sách tick về cỡ chữ thường chung (--fs-body ở style.css), màu --text-body */
#gioi-thieu .sec__sub,.split__text,.split__text p,.tick p{font-size:var(--fs-body,15px);line-height:1.7;color:var(--text-body)}

/* FB-80 · Hạ tầng · 3: lưới 12 cột, tự chia đều hàng cho bất kỳ số thẻ nào, không để thẻ lẻ.
   n chia hết 3: hàng 3 thẻ. Dư 2: hàng cuối 2 thẻ chia đôi (5 = 3+2, 8 = 3+3+2). Dư 1: 4 thẻ cuối thành 2 hàng 2 thẻ (7 = 3+2+2, 10 = 3+3+2+2).
   Khi data-more đang thu gọn (còn thẻ .is-extra) thì chỉ hiện 6 thẻ = 2 hàng 3. */
.eco-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3)}
.eco-grid>*{grid-column:span 4;--ar:2/1}
.eco-grid:not(:has(>.is-extra))>:last-child:nth-child(3n+2),
.eco-grid:not(:has(>.is-extra))>:nth-last-child(2):nth-child(3n+1),
.eco-grid:not(:has(>.is-extra)):has(>:last-child:nth-child(3n+1))>:nth-last-child(-n+4){grid-column:span 6;--ar:3/1}
.eco-grid:not(:has(>.is-extra))>:only-child{grid-column:1/-1}
.eco-grid .pcard .photo{aspect-ratio:var(--ar)}
.eco-grid .pcard__body{gap:10px;padding:20px 24px}
.eco-grid .pcard h3{font-size:19px}
@media (max-width:1100px){
  .eco-grid>*,.eco-grid:not(:has(>.is-extra))>:last-child:nth-child(3n+2),.eco-grid:not(:has(>.is-extra))>:nth-last-child(2):nth-child(3n+1),.eco-grid:not(:has(>.is-extra)):has(>:last-child:nth-child(3n+1))>:nth-last-child(-n+4){grid-column:span 6;--ar:2/1}
  .eco-grid:not(:has(>.is-extra))>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:720px){
  .eco-grid>*,.eco-grid>:last-child:nth-child(odd),.eco-grid:not(:has(>.is-extra))>:last-child:nth-child(3n+2),.eco-grid:not(:has(>.is-extra))>:nth-last-child(2):nth-child(3n+1),.eco-grid:not(:has(>.is-extra)):has(>:last-child:nth-child(3n+1))>:nth-last-child(-n+4){grid-column:1/-1}
}

/* FB-84: khối «Tổng quan giải pháp» của trang con: ảnh cao bằng khối chữ, chữ căn giữa theo chiều dọc */
.sec--intro .split{align-items:stretch}
.sec--intro .split__text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sec--intro .split__text .sec__title{margin:8px 0 20px}
.sec--intro .split__text .label{display:block}
.sec--intro .split .photo{aspect-ratio:auto;height:auto;min-height:280px}
.sec--intro .split .photo img{position:absolute;inset:0}
@media (max-width:960px){.sec--intro .split .photo{aspect-ratio:16/10;min-height:0}}

/* FB-88: mô tả thẻ «Các giải pháp liên quan» tối đa 3 dòng */
#lien-quan .pcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}