/* HiTD p2 · CSS riêng nhóm trang Giải pháp (giai-phap.html, gp-*.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. */

/* FB-03/85/89 · gp-its-quoc-gia.html #thanh-phan (10 hệ thống): .list-tick hai cột. Trang hub giai-phap.html đã chuyển sang lưới thẻ (Giải pháp · 2), không còn dùng .list-tick--2col */
.gp-tick2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.gp-tick2>li:nth-child(2){border-top:0}
@media (max-width:720px){
  .gp-tick2{grid-template-columns:minmax(0,1fr)}
  .gp-tick2>li:nth-child(2){border-top:1px solid var(--line-soft)}
}

/* Giải pháp · 2 (S4, sếp chốt #16361) · giai-phap.html #he-sinh-thai: lưới thẻ ảnh giống ha-tang.html, data-more="6" = tối đa 2 hàng, còn lại mở bằng «Xem thêm».
   Lưới 12 cột tự chia đều hàng, không để thẻ lẻ (cùng cách với css/ha-tang.css, viết lại vì file đó thuộc nhóm Hạ tầng):
   n chia hết 3: hàng 3 thẻ. Dư 2: hàng cuối 2 thẻ chia đôi (8 = 3+3+2). Dư 1: 4 thẻ cuối thành 2 hàng 2 thẻ (7 = 3+2+2).
   Khi còn thẻ .is-extra (đang thu gọn) 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-94, bảng phụ 7.3!I5 và 7.4!I3 · thẻ «Khám phá chi tiết» của trang hub (thu phí, bảo mật, giao thông): mô tả tối đa 3 dòng để các ô cao bằng nhau */
#he-sinh-thai .pcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#he-sinh-thai .grid{align-items:stretch}

/* bảng phụ 7.3!I4 · «Tổng quan» của trang hub bớt khoảng trống: ảnh thấp hơn */
.sec--ov .ov .photo{aspect-ratio:16/9}

/* 7.2!C6 · «Tổng quan» gp-giao-thong.html: nút CTA cách đoạn chữ rõ hơn (khách: «CTA hơi sát text») */
.gp-tong-quan .ov__text .btn{margin-top:40px}

/* FB-104, FB-105 · «Giới thiệu chung»: chữ và ảnh cùng căn đỉnh (đã đổi từ căn giữa: đoạn chữ ngắn bị đẩy xuống, cách tiêu đề cả 50-80px, xem Giải pháp · 4, 26, 29, 34) */
.sec--intro .split{align-items:start}
@media (min-width:961px){.sec--intro .split .photo{aspect-ratio:2/1}}

/* FB-90 · gp-cang-hang-khong.html #hang-muc, FB-106 · gp-ma-tuy.html #cong-nghe: mục .list-tick có các ý con */
.list-tick .bul{margin-top:6px;gap:4px}
.list-tick .bul li{max-width:none}
.gp-bul2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
@media (max-width:720px){.gp-bul2{grid-template-columns:minmax(0,1fr)}}

/* FB-102 · gp-kho.html #nghiep-vu theo p1: danh sách nghiệp vụ bên trái, khung «Hệ thống đồng thời tích hợp» bên phải */
.gp-ops{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.gp-ops__lead{margin-bottom:16px;font-size:17px;line-height:1.7;color:var(--text-body)}
.gp-ops__card{padding:24px;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface)}
.gp-ops__card h3{margin-bottom:16px;font-size:18px;line-height:1.35;font-weight:700}
.gp-ops__card .tick{background:rgb(var(--ov)/.04)}
.gp-ops__note{margin-top:24px;font-size:17px;line-height:1.7;color:var(--text-body)}
@media (max-width:960px){.gp-ops{grid-template-columns:minmax(0,1fr)}}

/* Giải pháp · 4, 26, 29, 34 (feedback 28/10) · «Giới thiệu chung»: tiêu đề nằm trên chữ, bỏ khoảng trống thừa giữa title và text (gap hàng của .sec__in 32px + lề dưới của .sec__rail 24px, gộp lại còn 20px) */
.sec--intro .sec__in{row-gap:0}
.sec--intro .sec__rail{margin-bottom:20px}

/* Giải pháp · 7, 24 (feedback 28/10) · lưới 2 thẻ của gp-giao-thong.html, gp-bao-mat.html: thẻ bé lại (ảnh thấp, lề và chữ gọn) */
#he-sinh-thai .grid--2 .pcard .photo{aspect-ratio:21/9}
#he-sinh-thai .grid--2 .pcard__body{gap:8px;padding:20px}
#he-sinh-thai .grid--2 .pcard h3{font-size:18px}
#he-sinh-thai .grid--2 .pcard p{font-size:14.5px;line-height:1.55}

/* Giải pháp · 19, 33 (feedback 28/10) · callout kết luận cùng cỡ và màu chữ nội dung (--text-body), không đậm hơn thân bài */
.sec__body .callout{font-size:18px;line-height:1.7;font-weight:400;color:var(--text-body)}