/* Nhóm trang dịch vụ pháp lý (dichVuPhapLy/*) — chỉ bố cục riêng của nhóm; mọi khối còn lại dùng component trong components.css.
   Nạp qua {% block page_css %} (trước components.css) nên selector ở đây có thêm tên khối để thắng khi cần. */

/* Nhiều hàng "chữ + ảnh" trong cùng một section, cách nhau space-7 (space-8 từ 992px) */
.vn-pl-stack { display: grid; gap: var(--vn-space-7); }
@media (min-width: 992px) {
  .vn-pl-stack { gap: var(--vn-space-8); }
}

/* Các card xếp dọc cạnh ảnh (nỗi đau của doanh nghiệp tự đăng ký, baoHoNhanHieu) */
.vn-pl-cards { display: grid; gap: var(--vn-space-4); }

/* Biểu tượng lớn thay ảnh minh họa (sáng chế, kiểu dáng, bản quyền): vòng tròn navy-100, không phải ảnh nên không lo bị phóng/mờ */
.vn-pl-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 160px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-100);
  color: var(--vn-navy-900);
  font-size: 4rem;
  line-height: 1;
}

/* Hai ảnh dấu mộc ở giữa khối lợi ích (baoHoNhanHieu): cạnh nhau dưới 992px, xếp dọc từ 992px; nhỏ hơn ảnh lợi ích mặc định */
.vn-benefits__media.vn-pl-stamps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--vn-space-4); }
.vn-benefits__media.vn-pl-stamps img { max-height: 140px; margin: 0; }
@media (min-width: 992px) {
  .vn-benefits__media.vn-pl-stamps { flex-direction: column; }
  .vn-benefits__media.vn-pl-stamps img { max-height: 180px; }
}

/* Link nhấn trong đoạn (vd. "ĐĂNG KÝ BẢO HỘ NHÃN HIỆU", "đây"): gạch chân, giữ inline (không làm dòng chữ nhảy cao); vùng bấm ≥ 44px nhờ padding (không đổi line box) */
.vn-pl-link { display: inline; margin-inline: -8px; padding: 12px 8px; color: var(--vn-text-heading); font-weight: var(--vn-fw-semibold); text-decoration: underline; }
.vn-pl-link:hover,
.vn-pl-link:focus-visible { color: var(--vn-gold-700); }

/* Ảnh minh họa trang trí (chữ "®", người thất vọng): thu nhỏ dưới 992px để không chiếm nửa màn hình mobile */
@media (max-width: 991.98px) {
  .vn-split__media.vn-pl-sm img { width: auto; max-width: 100%; max-height: 220px; margin-inline: auto; }
}
/* Ảnh có chữ/giấy tờ (infographic, giấy chứng nhận): dưới 992px tối đa 480px, không kéo hết container ở 768px */
@media (max-width: 991.98px) {
  .vn-split__media.vn-pl-cap img { max-width: min(100%, 480px); }
}

/* Ảnh minh họa có chữ (masomavachgs1 "Mã số mã vạch là gì"): không bị giới hạn 360px của --contain để chữ chú thích trong ảnh đọc được; vẫn không phóng quá cỡ gốc */
.vn-split__media--contain.vn-pl-big img { max-height: none; }

/* Card icon + tiêu đề + mô tả/checklist căn trái (icon cách tiêu đề space-3) */
.vn-pl-left .vn-feature__icon { margin-bottom: var(--vn-space-3); }

/* Một cột card dưới 992px không kéo hết ngang (3 card lợi ích ở 768px rộng ~680px): tối đa 560px, canh giữa */
@media (max-width: 991.98px) {
  .vn-pl-narrow { max-width: 560px; margin-inline: auto; }
}

/* Tiêu đề phụ làm nhãn cho dải logo (H2 "Đối tác của chúng tôi" nhỏ hơn H2 chính ngay trên nó) */
.vn-pl-sub .vn-section-heading { margin: var(--vn-space-6) 0 var(--vn-space-4); }
.vn-pl-sub .vn-section-heading__title { font-size: var(--vn-fs-h3); }

/* Khung placeholder vuông (sơ đồ chuỗi truy xuất, giaiPhapMinhBachThongTin): dưới 992px không kéo hết chiều ngang (1:1 ở 768px cao ~700px) */
@media (max-width: 991.98px) {
  .vn-split__media.vn-pl-ph .vn-ph { max-width: 420px; margin-inline: auto; }
}