/* Prosperous Living Investment — keo nối design system với WordPress.
   Chỉ chứa những gì pli-ds.css không biết: markup do plugin sinh ra. Không đặt lại token. */

/* Ô nhận tin CF7 903 ở chân trang: dựng lại lưới của .pli-subscribe trên markup CF7
   (CF7 bọc ô và nút trong <p> nằm trong một div có style flex viết cứng). */
.pli-footer__sub .wpcf7-form > div[style] { display: block !important; }
.pli-footer__sub .wpcf7-form p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pli-space-2); margin: 0; }
.pli-footer__sub .wpcf7-form p > span { display: block; }
.pli-footer__sub .wpcf7-form-control-wrap { display: block; }
.pli-footer__sub .pli-input { width: 100%; min-height: 3rem; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: var(--pli-white); }
.pli-footer__sub .pli-input::placeholder { color: rgba(255, 255, 255, .6); }
.pli-footer__sub .wpcf7-spinner { display: none; }
.pli-footer__sub .wpcf7-not-valid-tip, .pli-footer__sub .wpcf7-response-output { margin: var(--pli-space-2) 0 0; padding: 0; border: 0; font-size: var(--pli-text-small); color: var(--pli-gold); }
.pli-footer__sub .wpcf7-turnstile { margin-bottom: var(--pli-space-2); }
@media (max-width: 40rem) { .pli-footer__sub .wpcf7-form p { grid-template-columns: 1fr; } }
/* Nút giữ đúng cao ô nhập (không giãn theo dòng lỗi); form một ô thì dòng lỗi dưới ô là đủ — ẩn câu chung
   "Một hoặc nhiều trường có lỗi" để không nói hai lần. Gửi thành công / lỗi máy chủ vẫn hiện. */
.pli-footer__sub .wpcf7-submit { align-self: start; min-height: 3rem; }
.pli-footer__sub .wpcf7-not-valid-tip { display: block; line-height: 1.45; }
/* Gỡ hai lớp span bọc ô để ô, nút, dòng lỗi cùng nằm trên lưới: dòng lỗi trải hết bề ngang dưới hàng ô + nút. */
.pli-footer__sub .wpcf7-form p > span, .pli-footer__sub .wpcf7-form-control-wrap { display: contents; }
.pli-footer__sub .wpcf7-form p .pli-input { grid-column: 1; grid-row: 1; }
.pli-footer__sub .wpcf7-form p .wpcf7-submit { grid-column: 2; grid-row: 1; }
.pli-footer__sub .wpcf7-form p .wpcf7-not-valid-tip { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
@media (max-width: 40rem) { .pli-footer__sub .wpcf7-form p .wpcf7-submit { grid-column: 1; grid-row: 3; } }
.pli-footer__sub .wpcf7-form.invalid .wpcf7-response-output { display: none; }
.pli-footer__sub .wpcf7-response-output { line-height: 1.45; }
/* Ô thông báo form bản tin: quy tắc của plugin (.wpcf7 form …) mạnh hơn nên từng hiện khung viền xanh rỗng dưới ô email. */
.pli-footer__sub .wpcf7 form .wpcf7-response-output { margin: var(--pli-space-2) 0 0; padding: 0; border: 0; }
.pli-footer__sub .wpcf7 form .wpcf7-response-output:empty { display: none; }
/* Điện thoại (2 cột): cột thứ ba "Thông tin" đứng lẻ một hàng → trải ngang, danh sách chia 2 cột. */
@media (max-width: 40rem) { .pli-footer__top > :nth-child(4) { grid-column: 1 / -1; } .pli-footer__top > :nth-child(4) ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pli-space-6); } }

/* Nền tối thiểu của Contact Form 7 — tệp CSS của plugin không nạp, các quy tắc này trước nằm trong pli.css cũ.
   Thiếu chúng thì vùng thông báo dành cho trình đọc màn hình hiện ra trên form và câu lỗi lặp hai lần. */
.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7-turnstile iframe { border: 0; display: block; }

/* Lớp chuẩn WordPress */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Trang trong chưa dựng lại vẫn nạp pli.css cũ: .pli-btn cũ in hoa chữ — chặn ở khung chung.
   Xoá khi gỡ pli.css. */
:is(.pli-header, .pli-drawer, .pli-footer) .pli-btn { text-transform: none; }

/* Nội dung nhập từ trình soạn thảo (iframe bản đồ width="600", ảnh lớn) không được nong cột lưới
   .pli-layout trên điện thoại: cột về một hàng là 1fr, mà 1fr không co dưới min-content. */
.pli-layout > * { min-width: 0; }
.pli-doc iframe, .pli-article__body iframe { max-width: 100%; }
.pli-map iframe { width: 100%; height: auto; aspect-ratio: 16 / 10; border: 0; }

/* Contact Form 7 trong khối .pli-cf7 (trang Liên hệ, Đánh giá hồ sơ, Sự nghiệp…).
   Lớp pli-label / pli-input / pli-select / pli-textarea / pli-btn gắn ở functions.php;
   ở đây chỉ dựng nhịp dọc và trạng thái theo mục Form của bảng thành phần. */
.pli-cf7 .wpcf7-form { display: grid; gap: var(--pli-space-2); }
.pli-cf7 .wpcf7-form > p, .pli-cf7 .wpcf7-form > div > p, .pli-cf7 .pli-property-form > p { margin: 0; }
.pli-cf7 .wpcf7-form br { display: none; }
.pli-cf7 .pli-label { display: block; margin-top: var(--pli-space-4); }
.pli-cf7 .wpcf7-form-control-wrap { display: block; margin-top: var(--pli-space-2); }
.pli-cf7 .pli-input, .pli-cf7 .pli-select, .pli-cf7 .pli-textarea { width: 100%; }
.pli-cf7 .pli-textarea { min-height: 8rem; }
.pli-cf7 .required { color: var(--pli-error); }
.pli-cf7 .wpcf7-form .pli-cf7__nhom { margin: var(--pli-space-8) 0 var(--pli-space-1); padding-bottom: var(--pli-space-3); border-bottom: var(--pli-hairline); font: 400 1.5rem/1.2 var(--pli-font-serif); }
.pli-cf7 .wpcf7-form .pli-cf7__nhom:first-child { margin-top: 0; }
.pli-cf7 .wpcf7-submit { margin-top: var(--pli-space-5); }
.pli-cf7 .wpcf7-turnstile { margin-bottom: var(--pli-space-3); }
.pli-cf7 .wpcf7-spinner { display: none; }
/* Lỗi từng trường: CF7 tự gắn aria-invalid và aria-describedby trỏ tới dòng báo lỗi. */
.pli-cf7 .wpcf7-not-valid { border-color: var(--pli-error); box-shadow: 0 0 0 1px var(--pli-error); }
.pli-cf7 .wpcf7-not-valid-tip { display: block; margin-top: var(--pli-space-2); font-size: var(--pli-text-small); font-weight: 500; line-height: 1.5; color: var(--pli-error); }
/* Đang gửi / gửi xong / lỗi */
.pli-cf7 .wpcf7-form.submitting .wpcf7-submit { opacity: .6; pointer-events: none; }
.pli-cf7 .wpcf7-response-output { margin: var(--pli-space-4) 0 0 !important; padding: var(--pli-space-4) var(--pli-space-5) !important; border: 0 !important; font-size: var(--pli-text-small); line-height: 1.5; }
.pli-cf7 .wpcf7-form.sent .wpcf7-response-output { border-top: 1px solid var(--pli-gold) !important; background: var(--pli-success-bg); color: var(--pli-success); }
.pli-cf7 .wpcf7-form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output { background: var(--pli-error-bg); color: var(--pli-error); }

/* Nút khối WordPress trong thân bài (tải tệp, nút bấm). Theme có theme.json thì WordPress bỏ
   classic-theme-styles, còn global-styles in sau tệp này nút xám #32373c bằng :root :where(.wp-element-button)
   — tiền tố :root để thắng, cho các nút này theo kiểu .pli-btn của gói. */
:root :is(.wp-block-file__button, .wp-block-button__link) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5em;
  border: 1px solid var(--pli-navy-700); border-radius: var(--pli-radius); background: var(--pli-navy-700); color: var(--pli-white);
  font: 500 var(--pli-text-btn)/1 var(--pli-font-serif); letter-spacing: .01em; text-decoration: none;
}
:root :is(.wp-block-file__button, .wp-block-button__link):hover { background: var(--pli-navy-900); border-color: var(--pli-navy-900); color: var(--pli-white); text-decoration: none; }
.wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pli-space-4); }

/* Trang công cụ: khung của từng công cụ chiếm trọn bề ngang khối. */
.pli-tool__khung #pi-passport { padding-bottom: 0; }
.pli-tool__khung #pi-passport > .wrap { width: 100%; padding: 0; }
.pli-tool__khung :is(#qol20, #cbr30) { margin: 0; }

/* Dải chữ cái A–Z (Thuật ngữ): .pli-chips của gói chỉ tạo kiểu <button>; ở đây là liên kết neo. */
.pli-chips a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--pli-grey-300); background: var(--pli-white); font: 400 var(--pli-text-small)/1.2 var(--pli-font-sans); color: var(--pli-text); text-decoration: none; }
.pli-chips a:hover { border-color: var(--pli-navy-700); }

/* Hero — David 05/10/2026: tấm chữ không dính mép dưới ảnh, nền navy trong suốt một phần để thấy ảnh
   phía sau. Chỉ khi tấm nằm đè lên ảnh (≥40rem); điện thoại tấm nằm dưới ảnh nên giữ nền đặc.
   (Khác ghi chú vòng 7c của gói "ảnh chạy tới đáy tấm chữ" — theo yêu cầu của David.) */
@media (min-width: 40.01rem) {
  .pli-hero > .pli-container { padding-bottom: var(--pli-space-8); }
  .pli-hero:not(.pli-hero--overlay) .pli-hero__panel { background: rgba(27, 42, 74, .8); }
}
/* Hero trang con — David 06/10/2026: mọi trang cùng một chiều cao trên máy tính (trước đây 450–720 px tuỳ kiểu
   hero và độ dài chữ). Đặt cứng 36rem, đệm trên nhỏ để tấm chữ dài nhất vẫn nằm gọn trong khung ảnh. */
@media (min-width: 56.01rem) {
  .pli-hero.pli-hero--sub .pli-hero__media { min-height: 36rem; }
  .pli-hero.pli-hero--sub > .pli-container { padding-top: var(--pli-space-8); }
}

/* Lưới 2 thẻ (Tầm nhìn / Sứ mệnh) và dải 5 mục đánh số (Giá trị cốt lõi). */
.pli-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pli-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 64rem) { .pli-steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pli-steps--5 li:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 56rem) { .pli-cards--2, .pli-steps--5 { grid-template-columns: 1fr; } }
/* Lưới 4 ô một hàng (Lĩnh vực hợp tác); 2 cột trên máy tính bảng, 1 cột trên điện thoại. */
.pli-dest-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .pli-dest-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pli-dest-grid--4 { grid-template-columns: 1fr; } }

/* Văn bản pháp lý: vài trang mang <style> nhúng trong nội dung (vd .pli-aml-policy h2 màu xanh lá cũ #013a25).
   Tiêu đề trong .pli-doc luôn theo màu chữ của gói; không sửa nội dung trang. (QC 06/10/2026) */
:root .pli-doc :is(h1, h2, h3, h4, h5, h6) { color: var(--pli-text); }

/* Hero chuyên mục Cuộc sống, Du lịch: người đứng lệch phải ảnh, điện thoại cắt giữa sẽ mất người → lệch khung sang phải. */
@media (max-width: 40rem) { .pli-hero__media:is([style*="cuoc-song-gia-dinh"], [style*="du-lich-cap-doi"]) { background-position: 78% center; } }
@media (max-width: 40rem) { .pli-hero__media[style*="bao-lanh-me-con"] { background-position: 85% center; } .pli-hero__media:is([style*="dinh-cu-bo-con"], [style*="du-hoc-sinh-vien"]) { background-position: 22% center; } }