/* ==========================================================================
   Prosperous Living Investment — Design system web
   Version: v0.2.0 (beta) | Date: 02/10/2026 | Hệ thương hiệu 2026, bước 3
   Vòng 4 (02/10/2026): một bản sáng duy nhất; nút phụ viền khung theo lối Henley & Partners;
   bố cục trang bám theo pli.com.vn hiện tại.
   Một tệp: token, nền tảng, thành phần. Tiền tố lớp: pli-
   Cỡ chữ và khoảng cách khai bằng rem; khoảng cách chữ bằng em.
   ========================================================================== */

/* 1. TOKEN ================================================================= */
:root {
  /* Màu thương hiệu */
  --pli-navy-900: #121D33;   /* chữ chính, footer */
  --pli-navy-700: #1B2A4A;   /* màu chủ đạo: navy hộ chiếu */
  --pli-navy-500: #3A4E78;   /* đường dẫn khi rê chuột */
  --pli-grey-50:  #F4F5F7;   /* nền khối xen kẽ */
  --pli-grey-100: #E8EBEF;   /* đường kẻ */
  --pli-grey-300: #C5CBD3;   /* kẻ trang trí, không dùng cho chữ */
  --pli-grey-500: #6B7482;   /* chú thích; viền ô nhập (4,7:1) */
  --pli-grey-700: #4A5466;   /* chữ phụ */
  --pli-gold:      #D6AD60;  /* chỉ trên nền navy */
  --pli-gold-deep: #A37E2D;  /* logo trên nền sáng, đồ hoạ */
  --pli-gold-ink:  #7A5C18;  /* chữ vàng trên nền sáng */
  --pli-white:     #FFFFFF;

  /* Màu trạng thái — đều đạt AA trên nền của nó */
  --pli-error:        #A33A2A;  --pli-error-bg:   #F8ECEA;
  --pli-success:      #2F6B4F;  --pli-success-bg: #EAF2EE;
  --pli-warning:      #7A5418;  --pli-warning-bg: #FBF3E3;
  --pli-info:         #3A4E78;  --pli-info-bg:    #EEF1F6;

  /* Vai trò */
  --pli-bg: var(--pli-white);
  --pli-bg-alt: var(--pli-grey-50);
  --pli-text: var(--pli-navy-900);
  --pli-text-muted: var(--pli-grey-700);
  --pli-text-subtle: var(--pli-grey-500);
  --pli-line: var(--pli-grey-100);
  --pli-surface-dark: var(--pli-navy-700);
  --pli-focus: var(--pli-navy-500);

  /* Chữ */
  --pli-font-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --pli-font-sans: "Be Vietnam Pro", Arial, sans-serif;
  --pli-text-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  --pli-text-h1: clamp(2.125rem, 1.65rem + 1.9vw, 3rem);
  --pli-text-h2: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --pli-text-h3: clamp(1.5rem, 1.45rem + .25vw, 1.625rem);
  --pli-text-lead: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);
  --pli-text-body: 1rem;
  --pli-text-small: .875rem;
  --pli-text-caption: .8125rem;
  --pli-text-ui: .9375rem;
  --pli-text-btn: 1.125rem;
  --pli-leading-tight: 1.1;
  --pli-leading-snug: 1.25;
  --pli-leading-body: 1.65;
  --pli-measure: 68ch;

  /* Khoảng cách: thang 4 px quy ra rem */
  --pli-space-1: .25rem;  --pli-space-2: .5rem;  --pli-space-3: .75rem;
  --pli-space-4: 1rem;    --pli-space-5: 1.5rem; --pli-space-6: 2rem;
  --pli-space-7: 3rem;    --pli-space-8: 4rem;   --pli-space-9: 6rem;
  --pli-space-10: 8rem;
  --pli-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Bố cục */
  --pli-container: 75rem;
  --pli-gutter: clamp(1rem, .25rem + 3.5vw, 3rem);
  --pli-header-h: 5.5rem;
  --pli-header-h-compact: 4rem;

  /* Hình khối: góc vuông, kẻ mảnh, không đổ bóng trang trí */
  --pli-radius: 0;
  --pli-ratio: 16 / 10;   /* mọi ảnh trong nội dung dùng chung tỉ lệ 16:10 — Edward chốt 02/10/2026 */
  --pli-hairline: 1px solid var(--pli-line);
  --pli-shadow-overlay: 0 .75rem 2rem rgba(0, 0, 0, .14);

  /* Chuyển động: một nhịp, tắt khi người dùng chọn giảm chuyển động */
  --pli-ease: cubic-bezier(.2, .7, .2, 1);
  --pli-dur-fast: 160ms;
  --pli-dur: 240ms;
  --pli-dur-slow: 480ms;
}

/* 2. NỀN TẢNG ============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pli-header-h-compact) + 1rem); }
body {
  margin: 0; background: var(--pli-bg); color: var(--pli-text);
  font: 400 var(--pli-text-body)/var(--pli-leading-body) var(--pli-font-sans);
  font-variant-numeric: lining-nums; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; caret-color: var(--pli-navy-700);
}
h1, h2, h3, h4 { font-family: var(--pli-font-serif); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: var(--pli-text-h1); line-height: var(--pli-leading-tight); }
h2 { font-size: var(--pli-text-h2); line-height: 1.15; }
h3 { font-size: var(--pli-text-h3); line-height: 1.2; font-weight: 500; }
h4 { font-family: var(--pli-font-sans); font-size: var(--pli-text-body); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--pli-navy-500); }
::selection { background: var(--pli-navy-700); color: var(--pli-white); }
:focus-visible { outline: 2px solid var(--pli-focus); outline-offset: 3px; }
.pli-on-dark :focus-visible { outline-color: var(--pli-gold); }
table { font-variant-numeric: tabular-nums; }
html { scrollbar-color: var(--pli-grey-300) transparent; }
.pli-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; } }

/* Chữ tiện ích */
.pli-display { font-family: var(--pli-font-serif); font-size: var(--pli-text-display); line-height: 1.05; font-weight: 400; letter-spacing: -.01em; }
.pli-lead { font-size: var(--pli-text-lead); line-height: 1.65; color: var(--pli-text); max-width: var(--pli-measure); }
.pli-muted { color: var(--pli-text-muted); }
.pli-small { font-size: var(--pli-text-small); line-height: 1.55; }
.pli-caption { font-size: var(--pli-text-caption); line-height: 1.5; color: var(--pli-text-subtle); }
.pli-prose > * + * { margin-top: 1.1em; }
.pli-prose { max-width: var(--pli-measure); }

/* 3. BỐ CỤC ================================================================ */
.pli-container { width: 100%; max-width: calc(var(--pli-container) + 2 * var(--pli-gutter)); margin-inline: auto; padding-inline: var(--pli-gutter); }
.pli-section { padding-block: var(--pli-section); }
.pli-section--alt { background: var(--pli-bg-alt); --pli-text-subtle: var(--pli-grey-700); }  /* xám 500 trên xám 50 chỉ đạt 4,3:1 nên đổi sang xám 700 */
.pli-section--dark { background: var(--pli-surface-dark); color: var(--pli-white); }
.pli-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pli-space-6); row-gap: var(--pli-space-7); }
/* Bố cục lệch 7/5 và 5/7 — mặc định cho mọi khối hai cột, không chia đôi đều */
.pli-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pli-space-8); align-items: end; }
.pli-split--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 56rem) {
  .pli-split, .pli-split--reverse { grid-template-columns: 1fr; gap: var(--pli-space-6); }
  .pli-grid { column-gap: var(--pli-space-4); }
}
.pli-rule { border: 0; border-top: var(--pli-hairline); margin: 0; }
.pli-on-dark .pli-rule, .pli-rule--gold { border-top-color: var(--pli-gold); }

/* 4. THANH MENU — bố cục A: logo đứng bên trái, menu bên phải ============== */
.pli-header { position: sticky; top: 0; z-index: 50; background: var(--pli-white); border-bottom: var(--pli-hairline); transition: box-shadow var(--pli-dur) var(--pli-ease); }
.pli-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pli-space-6); min-height: var(--pli-header-h); }
.pli-header__brand { display: block; flex: none; line-height: 0; }
.pli-header__logo { width: 100px; height: auto; transition: opacity var(--pli-dur) var(--pli-ease); }  /* tối thiểu 100 px — Edward chốt */
.pli-header__mark { display: none; height: 2.25rem; width: auto; }
.pli-nav { display: flex; align-items: center; gap: var(--pli-space-6); }
.pli-nav__list { display: flex; gap: var(--pli-space-5); list-style: none; margin: 0; padding: 0; }
.pli-nav__link { display: inline-block; white-space: nowrap; padding-block: var(--pli-space-2); font-size: var(--pli-text-ui); font-weight: 400; letter-spacing: .005em; color: var(--pli-text); text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--pli-dur) var(--pli-ease); }
.pli-nav__link:hover, .pli-nav__link[aria-current="page"] { color: var(--pli-text); background-size: 100% 1px; }
.pli-header__toggle { display: none; }
/* Thu gọn khi cuộn: chỉ còn biểu tượng P */
.pli-header.is-compact .pli-header__inner { min-height: var(--pli-header-h-compact); }
.pli-header.is-compact .pli-header__logo { display: none; }
.pli-header.is-compact .pli-header__mark { display: block; }
@media (max-width: 78rem) {  /* vòng 7: hết chỗ cho menu một dòng thì sang nút ba gạch — không để chữ menu rớt dòng */
  .pli-nav { display: none; }
  .pli-header__toggle { display: inline-flex; align-items: center; gap: var(--pli-space-2); background: none; border: 0; padding: var(--pli-space-2); font: 500 var(--pli-text-btn)/1 var(--pli-font-serif); color: var(--pli-text); cursor: pointer; }
  .pli-header__toggle svg { width: 1.5rem; height: 1.5rem; }
}
/* Menu điện thoại: một tấm navy phủ toàn màn hình */
.pli-drawer { position: fixed; inset: 0; z-index: 60; background: var(--pli-navy-700); color: var(--pli-white); padding: var(--pli-space-5) var(--pli-gutter) var(--pli-space-7); display: flex; flex-direction: column; transform: translateY(-1rem); opacity: 0; visibility: hidden; transition: opacity var(--pli-dur) var(--pli-ease), transform var(--pli-dur) var(--pli-ease), visibility 0s linear var(--pli-dur); }
.pli-drawer.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.pli-drawer__top { display: flex; justify-content: space-between; align-items: center; }
.pli-drawer__list { list-style: none; margin: var(--pli-space-7) 0 auto; padding: 0; border-top: 1px solid rgba(214, 173, 96, .5); }
.pli-drawer__list a { display: block; padding: var(--pli-space-4) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font: 400 1.75rem/1.2 var(--pli-font-serif); color: var(--pli-white); text-decoration: none; }

/* 5. NÚT VÀ ĐƯỜNG DẪN ======================================================
   Ba cấp, học theo Henley & Partners (vòng 4, Edward 02/10/2026: nút phụ trước đây trơ trọi,
   người xem không nhận ra là nút):
   - Nút chính: khối đặc. Navy trên nền sáng, vàng trên nền tối.
   - Nút phụ: khung viền 1 px cùng chiều cao với nút chính, nền trong. Rê chuột thì đổ đặc.
   - Đường dẫn trong thẻ: chữ serif kèm một vạch ngang, vạch dài ra khi rê chuột.
   Không gạch chân, không mũi tên ở cả ba cấp. */
.pli-btn {
  --_bg: var(--pli-navy-700); --_fg: var(--pli-white); --_bd: var(--pli-navy-700);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: 0 1.5em; border: 1px solid var(--_bd); border-radius: var(--pli-radius);
  background: var(--_bg); color: var(--_fg); font: 500 var(--pli-text-btn)/1 var(--pli-font-serif); letter-spacing: .01em;  /* nút dùng serif — Edward chốt 02/10/2026 */
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--pli-dur-fast) var(--pli-ease), color var(--pli-dur-fast) var(--pli-ease), border-color var(--pli-dur-fast) var(--pli-ease);
}
.pli-btn:hover { --_bg: var(--pli-navy-900); --_bd: var(--pli-navy-900); color: var(--_fg); text-decoration: none; }
.pli-btn:active { transform: translateY(1px); }
.pli-btn svg { width: 1.125em; height: 1.125em; flex: none; }
.pli-btn--gold { --_bg: var(--pli-gold); --_fg: var(--pli-navy-900); --_bd: var(--pli-gold); }
.pli-btn--gold:hover { --_bg: #E3C27F; --_bd: #E3C27F; }
/* Nút phụ: khung viền. --outline là tên cũ của cùng một nút, giữ để bảng thiết kế không vỡ. */
.pli-btn--secondary, .pli-btn--outline { --_bg: transparent; --_fg: var(--pli-navy-700); --_bd: var(--pli-navy-700); }
.pli-btn--secondary:hover, .pli-btn--outline:hover { --_bg: var(--pli-navy-700); --_fg: var(--pli-white); --_bd: var(--pli-navy-700); }
.pli-btn--outline-light { --_bg: transparent; --_fg: var(--pli-white); --_bd: rgba(255, 255, 255, .75); }
.pli-btn--outline-light:hover { --_bg: var(--pli-white); --_fg: var(--pli-navy-900); --_bd: var(--pli-white); }
.pli-btn--sm { min-height: 2.5rem; padding: 0 1.1em; font-size: 1rem; }
.pli-btn--block { width: 100%; }
/* Trên nền tối: nút chính tự sang vàng, nút phụ tự sang khung trắng */
:where(.pli-on-dark) .pli-btn:where(:not(.pli-btn--gold, .pli-btn--secondary, .pli-btn--outline, .pli-btn--outline-light)) { --_bg: var(--pli-gold); --_fg: var(--pli-navy-900); --_bd: var(--pli-gold); }
:where(.pli-on-dark) .pli-btn:where(:not(.pli-btn--gold, .pli-btn--secondary, .pli-btn--outline, .pli-btn--outline-light, [disabled], [aria-disabled="true"])):hover { --_bg: #E3C27F; --_bd: #E3C27F; }
.pli-on-dark .pli-btn--secondary, .pli-on-dark .pli-btn--outline { --_fg: var(--pli-white); --_bd: rgba(255, 255, 255, .75); }
.pli-on-dark .pli-btn--secondary:hover, .pli-on-dark .pli-btn--outline:hover { --_bg: var(--pli-white); --_fg: var(--pli-navy-900); --_bd: var(--pli-white); }
.pli-btn[disabled], .pli-btn[aria-disabled="true"], .pli-on-dark .pli-btn[disabled], .pli-on-dark .pli-btn[aria-disabled="true"] { --_bg: var(--pli-grey-100); --_fg: var(--pli-grey-700); --_bd: var(--pli-grey-100); cursor: not-allowed; transform: none; }
.pli-btn.is-loading { pointer-events: none; }
.pli-btn.is-loading::before { content: ""; width: .85em; height: .85em; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pli-spin .8s linear infinite; }
@keyframes pli-spin { to { transform: rotate(360deg); } }
/* Đường dẫn trong thẻ: chữ serif, vạch ngang 2 rem phía sau, dài ra 3 rem khi rê chuột */
.pli-link { display: inline-flex; align-items: center; gap: .75em; font: 500 1.0625rem/1.3 var(--pli-font-serif); letter-spacing: .01em; color: var(--pli-gold-ink); text-decoration: none; }
.pli-link:hover { color: var(--pli-navy-700); text-decoration: none; }
.pli-link--more { position: relative; z-index: 1; }  /* nằm trên lớp bấm của cả thẻ */
.pli-on-dark .pli-link { color: var(--pli-gold); }
.pli-on-dark .pli-link:hover { color: var(--pli-white); }
.pli-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pli-space-4); }

/* 6. FORM — theo lối GOV.UK: nhãn trên ô, gợi ý dưới nhãn, lỗi nêu cách sửa == */
.pli-form { display: grid; gap: var(--pli-space-6); max-width: 36rem; }
.pli-field { display: grid; gap: var(--pli-space-2); }
.pli-label { font-weight: 500; font-size: var(--pli-text-ui); line-height: 1.4; }
.pli-label .pli-optional { font-weight: 400; color: var(--pli-text-muted); }
.pli-hint { font-size: var(--pli-text-small); color: var(--pli-text-muted); line-height: 1.5; margin-top: -.125rem; }
.pli-input, .pli-select, .pli-textarea {
  width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid var(--pli-grey-500); border-radius: var(--pli-radius);
  background: var(--pli-white); color: var(--pli-text); font: 400 1rem/1.4 var(--pli-font-sans);
  transition: border-color var(--pli-dur-fast) var(--pli-ease), box-shadow var(--pli-dur-fast) var(--pli-ease);
}
.pli-textarea { min-height: 8rem; resize: vertical; }
.pli-input::placeholder, .pli-textarea::placeholder { color: var(--pli-grey-500); }
.pli-input:hover, .pli-select:hover, .pli-textarea:hover { border-color: var(--pli-navy-700); }
.pli-input:focus, .pli-select:focus, .pli-textarea:focus { outline: none; border-color: var(--pli-navy-700); box-shadow: 0 0 0 1px var(--pli-navy-700), 0 0 0 4px rgba(58, 78, 120, .22); }
.pli-select { appearance: none; padding-right: 2.75rem; background: var(--pli-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.125rem; }
.pli-input[disabled], .pli-select[disabled], .pli-textarea[disabled] { background: var(--pli-grey-50); border-color: var(--pli-grey-300); color: var(--pli-grey-500); }
/* Lỗi */
.pli-field.is-error .pli-input, .pli-field.is-error .pli-select, .pli-field.is-error .pli-textarea { border-color: var(--pli-error); box-shadow: 0 0 0 1px var(--pli-error); }
.pli-error-msg { display: flex; gap: .5em; align-items: flex-start; font-size: var(--pli-text-small); font-weight: 500; color: var(--pli-error); line-height: 1.5; }
.pli-error-msg svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .1rem; }
/* Tóm tắt lỗi đầu form: liệt kê mọi lỗi, mỗi lỗi là đường dẫn tới ô cần sửa */
.pli-error-summary { border: 1px solid var(--pli-error); background: var(--pli-error-bg); padding: var(--pli-space-5); }
.pli-error-summary h2 { font: 500 1.0625rem/1.4 var(--pli-font-sans); color: var(--pli-error); margin-bottom: var(--pli-space-3); }
.pli-error-summary ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--pli-space-2); }
.pli-error-summary a { color: var(--pli-error); font-weight: 500; }
/* Ô chọn và ô đánh dấu: hình vuông, khớp góc vuông của hệ */
.pli-choices { display: grid; gap: var(--pli-space-3); border: 0; margin: 0; padding: 0; }
.pli-choices legend { padding: 0; margin-bottom: var(--pli-space-2); }
.pli-choice { display: flex; gap: var(--pli-space-3); align-items: flex-start; cursor: pointer; line-height: 1.5; }
.pli-choice input { appearance: none; flex: none; width: 1.5rem; height: 1.5rem; margin: 0; border: 1px solid var(--pli-grey-500); background: var(--pli-white); display: grid; place-content: center; cursor: pointer; }
.pli-choice input[type="radio"] { border-radius: 50%; }
.pli-choice input[type="radio"]::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--pli-navy-700); transform: scale(0); transition: transform var(--pli-dur-fast) var(--pli-ease); }
.pli-choice input[type="checkbox"]::before { content: ""; width: 1rem; height: 1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform var(--pli-dur-fast) var(--pli-ease); }
.pli-choice input:checked { border-color: var(--pli-navy-700); }
.pli-choice input[type="checkbox"]:checked { background: var(--pli-navy-700); }
.pli-choice input[type="radio"]:checked::before { transform: scale(1); }
.pli-choice input[type="checkbox"]:checked::before { transform: scale(1); }
.pli-choice input:focus-visible { outline: 2px solid var(--pli-focus); outline-offset: 2px; }
/* Gửi xong */
.pli-confirm { border-top: 1px solid var(--pli-gold); padding-top: var(--pli-space-5); }
.pli-confirm h3 { margin-bottom: var(--pli-space-3); }

/* 7. THÔNG BÁO ============================================================= */
.pli-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--pli-space-3); padding: var(--pli-space-4) var(--pli-space-5); border: 1px solid; font-size: var(--pli-text-small); line-height: 1.6; }
.pli-notice svg { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.pli-notice strong { display: block; font-weight: 500; font-size: var(--pli-text-ui); margin-bottom: .15rem; }
.pli-notice--info { color: var(--pli-info); background: var(--pli-info-bg); border-color: rgba(58, 78, 120, .35); }
.pli-notice--success { color: var(--pli-success); background: var(--pli-success-bg); border-color: rgba(47, 107, 79, .35); }
.pli-notice--warning { color: var(--pli-warning); background: var(--pli-warning-bg); border-color: rgba(122, 84, 24, .35); }
.pli-notice--error { color: var(--pli-error); background: var(--pli-error-bg); border-color: rgba(163, 58, 42, .35); }

/* 8. HERO: ảnh tràn khung, chữ trong tấm navy đặc đè mép dưới ============= */
.pli-hero { position: relative; display: grid; }  /* vòng 7c: ảnh chạy tới đáy tấm chữ — Edward: "tạo ra khoảng trống không đẹp" */
.pli-hero__media, .pli-hero > .pli-container { grid-area: 1 / 1; }
.pli-hero__media { min-height: clamp(30rem, 72vh, 44rem); background: var(--pli-navy-700) center / cover no-repeat; }
.pli-hero > .pli-container { position: relative; align-self: end; padding-top: clamp(9rem, 22vh, 14rem); }  /* luôn chừa một dải ảnh phía trên tấm chữ */
.pli-hero__panel { position: relative; width: min(40rem, 100%); background: var(--pli-navy-700); color: var(--pli-white); padding: var(--pli-space-7) var(--pli-space-7) var(--pli-space-7); }
.pli-hero__panel .pli-display { margin-bottom: var(--pli-space-5); }
.pli-hero__panel p { color: rgba(255, 255, 255, .86); max-width: 34rem; }
.pli-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pli-space-5) var(--pli-space-6); margin-top: var(--pli-space-6); }
.pli-hero__caption { position: absolute; z-index: 1; right: var(--pli-gutter); bottom: var(--pli-space-4); font-size: var(--pli-text-caption); color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
@media (max-width: 40rem) {
  .pli-hero { display: block; }
  .pli-hero__media { min-height: 0; height: 18rem; }
  .pli-hero > .pli-container { padding: 0; }
  .pli-hero__panel { padding: var(--pli-space-6) var(--pli-gutter); }
  .pli-hero__caption { top: 15.5rem; bottom: auto; }
}

/* 9. LƯỚI ĐIỂM ĐẾN: ô viền mảnh, huy hiệu trên cùng, tên, mô tả, đường dẫn ở chân ô.
   Học theo lưới quốc gia của Henley & Partners. Không đặt ảnh trong ô. */
.pli-dest-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pli-space-5); }
.pli-dest { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--pli-space-6) var(--pli-space-6) var(--pli-space-5); background: var(--pli-white); border: 1px solid var(--pli-line); }
.pli-dest__arms { width: 3.25rem; height: 3.25rem; object-fit: contain; object-position: left center; margin-bottom: var(--pli-space-5); filter: saturate(.85); }
.pli-dest__name { font: 400 var(--pli-text-h3)/1.15 var(--pli-font-serif); margin-bottom: var(--pli-space-3); }
.pli-dest__name a { text-decoration: none; color: inherit; }
.pli-dest__name a::after { content: ""; position: absolute; inset: 0; }  /* cả ô bấm được */
.pli-dest__desc { color: var(--pli-text-muted); font-size: var(--pli-text-small); line-height: 1.6; flex: 1; }
.pli-dest .pli-link { margin-top: var(--pli-space-5); padding-top: var(--pli-space-4); border-top: var(--pli-hairline); width: 100%; }
.pli-dest:focus-within { outline: 2px solid var(--pli-focus); outline-offset: 3px; }
.pli-dest:focus-within a:focus-visible { outline: none; }
@media (max-width: 64rem) { .pli-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pli-dest-grid { grid-template-columns: 1fr; gap: var(--pli-space-4); } .pli-dest { padding: var(--pli-space-5); } }

/* 10. KHỐI ẢNH VÀ CHỮ: ảnh đặt trong lưới có lề, không tràn mép ============ */
.pli-feature__media { aspect-ratio: var(--pli-ratio); background: var(--pli-grey-100) center / cover no-repeat; }
.pli-feature__media--wide { aspect-ratio: var(--pli-ratio); }
.pli-feature__body > * + * { margin-top: var(--pli-space-5); }
.pli-figcaption { margin-top: var(--pli-space-3); font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }

/* 10b. CỤM ẢNH: một ảnh lớn, hai ảnh nhỏ lệch tầng — ảnh nằm trong lưới, có chú thích */
.pli-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pli-space-4); }
.pli-mosaic figure { margin: 0; }
.pli-mosaic__img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; display: block; }
.pli-mosaic__a { grid-column: 1 / -1; }
.pli-mosaic figcaption { margin-top: var(--pli-space-2); font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }

/* 10c. DANH SÁCH CAM KẾT CÓ ICON: hàng kẻ mảnh, icon nằm cạnh chữ, không phải thẻ */
.pli-pledges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pli-space-7); border-top: 1px solid var(--pli-navy-700); }
.pli-pledges li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--pli-space-4); padding: var(--pli-space-5) 0; border-bottom: var(--pli-hairline); }
.pli-pledges svg { width: 1.5rem; height: 1.5rem; color: var(--pli-gold-ink); margin-top: .15rem; }
.pli-pledges h3 { font-size: 1.375rem; margin-bottom: var(--pli-space-2); }
.pli-pledges p { color: var(--pli-text-muted); font-size: var(--pli-text-small); line-height: 1.6; }
@media (max-width: 48rem) { .pli-pledges { grid-template-columns: 1fr; } }

/* 10d. THÔNG TIN LIÊN HỆ CÓ ICON */
.pli-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pli-space-3); }
.pli-contact li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--pli-space-3); align-items: start; }
.pli-contact svg { width: 1.125rem; height: 1.125rem; margin-top: .2rem; color: currentColor; opacity: .85; }

/* 11. CÁC BƯỚC: số thứ tự mang thông tin nên được dùng ===================== */
.pli-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pli-navy-700); }
.pli-steps li { counter-increment: step; padding: var(--pli-space-5) var(--pli-space-5) 0 0; }
.pli-steps li + li { padding-left: var(--pli-space-5); border-left: var(--pli-hairline); }
.pli-steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 400 2.5rem/1 var(--pli-font-serif); color: var(--pli-gold-ink); margin-bottom: var(--pli-space-4); font-variant-numeric: lining-nums; }
.pli-steps h3 { font-size: 1.375rem; margin-bottom: var(--pli-space-3); }
.pli-steps p { color: var(--pli-text-muted); font-size: var(--pli-text-small); line-height: 1.6; }
@media (max-width: 56rem) { .pli-steps { grid-template-columns: 1fr; } .pli-steps li + li { padding-left: 0; border-left: 0; border-top: var(--pli-hairline); } .pli-steps li { padding-bottom: var(--pli-space-5); } }

/* 12. TRÍCH DẪN ============================================================ */
.pli-quote-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pli-space-8); align-items: center; }
.pli-quote-split figure { margin: 0; }
.pli-quote-split img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; display: block; }
@media (max-width: 56rem) { .pli-quote-split { grid-template-columns: 1fr; gap: var(--pli-space-6); } }
.pli-quote { margin: 0; padding-top: var(--pli-space-5); border-top: 1px solid var(--pli-gold-deep); max-width: 52rem; }
.pli-quote p { font: italic 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.3 var(--pli-font-serif); text-wrap: balance; }
.pli-on-dark .pli-quote { border-top-color: var(--pli-gold); }

/* 13. HỎI ĐÁP: details/summary, không cần JavaScript ======================= */
.pli-faq { border-top: 1px solid var(--pli-navy-700); }
.pli-faq details { border-bottom: var(--pli-hairline); }
.pli-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--pli-space-5); align-items: center; padding: var(--pli-space-5) 0; font: 400 1.375rem/1.3 var(--pli-font-serif); }
.pli-faq summary::-webkit-details-marker { display: none; }
.pli-faq summary::after { content: ""; width: 1.25rem; height: 1.25rem; background: linear-gradient(var(--pli-navy-700), var(--pli-navy-700)) center / 100% 1.5px no-repeat, linear-gradient(var(--pli-navy-700), var(--pli-navy-700)) center / 1.5px 100% no-repeat; transition: transform var(--pli-dur) var(--pli-ease); }
.pli-faq details[open] summary::after { transform: rotate(45deg); }
.pli-faq .pli-faq__a { padding: 0 0 var(--pli-space-5); color: var(--pli-text-muted); max-width: var(--pli-measure); }

/* 14. FOOTER — bố cục theo site hiện tại: các cột đường dẫn và ô đăng ký nhận tin,
   hàng thông tin pháp nhân (tên, mã số doanh nghiệp, văn phòng, giờ làm việc), hàng bản quyền và mạng xã hội. */
.pli-footer { background: var(--pli-navy-900); color: rgba(255, 255, 255, .74); padding-block: var(--pli-space-9) var(--pli-space-6); font-size: var(--pli-text-small); font-weight: 300; }  /* chữ sáng trên navy trông dày hơn, nên footer dùng độ đậm 300 — Edward 02/10/2026 */
.pli-footer__top { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 2fr)) minmax(0, 3.5fr); gap: var(--pli-space-6); padding-bottom: var(--pli-space-7); border-bottom: 1px solid rgba(214, 173, 96, .4); }
.pli-footer__top > :first-child { display: flex; flex-direction: column; align-items: center; justify-self: start; width: max-content; max-width: 100%; text-align: center; }  /* vòng 7c: logo canh giữa trên slogan */
.pli-footer__logo { width: 120px; }
.pli-footer__slogan { margin-top: var(--pli-space-5); font: italic 400 1.25rem/1.3 var(--pli-font-serif); color: var(--pli-white); }
.pli-footer h4, .pli-footer__h { font: 400 1.1875rem/1.3 var(--pli-font-serif); letter-spacing: 0; color: var(--pli-white); margin-bottom: var(--pli-space-4); }
.pli-footer ul:not(.pli-social) { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pli-space-3); }
.pli-footer a { color: inherit; text-decoration: none; }
.pli-footer a:hover { color: var(--pli-gold); }
.pli-footer__sub p { margin-bottom: var(--pli-space-4); }
.pli-footer__hot { display: flex; flex-wrap: wrap; gap: var(--pli-space-4) var(--pli-space-6); margin-top: var(--pli-space-5); }  /* vòng 7: không chia đôi cứng; thiếu chỗ thì email xuống hàng, số điện thoại không bao giờ gãy */
.pli-footer__hot dt { font-size: var(--pli-text-caption); color: rgba(255, 255, 255, .6); margin-bottom: .3rem; }
.pli-footer__hot dd { margin: 0; font: 400 1.125rem/1.3 var(--pli-font-serif); color: var(--pli-white); white-space: nowrap; }
.pli-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pli-space-4); padding-top: var(--pli-space-6); font-size: var(--pli-text-caption); color: rgba(255, 255, 255, .6); }
.pli-footer__legal p + p { margin-top: .35rem; }
.pli-footer__legal p a + a::before { content: "·"; margin: 0 .5em; color: rgba(255, 255, 255, .35); }
@media (max-width: 64rem) { .pli-footer__top { grid-template-columns: 1fr 1fr 1fr; } .pli-footer__top > :first-child, .pli-footer__top > :last-child { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .pli-footer__top { grid-template-columns: 1fr 1fr; } }

/* 15. ĐƯỜNG DẪN VỊ TRÍ ===================================================== */
.pli-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; font: 400 1rem/1.4 var(--pli-font-serif); color: var(--pli-text-subtle); }  /* serif, không gạch chân — Edward 02/10/2026 */
.pli-breadcrumb li + li::before { content: "/"; margin-right: .5em; color: var(--pli-grey-300); }
.pli-breadcrumb a { color: var(--pli-text-muted); text-decoration: none; }
.pli-breadcrumb a:hover { color: var(--pli-gold-ink); }


/* ===== Thành phần cho trang mẫu (bước 4) ================================ */

/* 16. MEGA MENU NỀN NAVY — mở khi rê chuột hoặc bấm phím.
   Cột nổi bật bên phải nền Navy 900 phủ kín chiều cao bảng và tràn sát mép phải màn hình,
   không chừa viền (Edward 02/10/2026). */
.pli-nav__item { position: static; }
.pli-nav__link--has-menu { display: inline-flex; align-items: center; gap: .3em; }
.pli-nav__link--has-menu svg { width: .9rem; height: .9rem; transition: transform var(--pli-dur) var(--pli-ease); }
.pli-mega { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; background: var(--pli-navy-700); color: var(--pli-white); border-top: 1px solid rgba(214, 173, 96, .35); border-bottom: 1px solid var(--pli-gold); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: opacity var(--pli-dur) var(--pli-ease), transform var(--pli-dur) var(--pli-ease), visibility 0s linear var(--pli-dur); }
.pli-nav__item:hover .pli-mega, .pli-nav__item:focus-within .pli-mega, .pli-mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pli-nav__item:hover .pli-nav__link--has-menu svg { transform: rotate(180deg); }
.pli-mega__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; }
.pli-mega__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--pli-space-7); padding: var(--pli-space-7) var(--pli-space-7) var(--pli-space-7) 0; }
.pli-mega__cols > .is-wide { grid-column: span 2; }
.pli-mega h4, .pli-mega__title { font: 400 1.375rem/1.3 var(--pli-font-serif); color: var(--pli-white); padding-bottom: var(--pli-space-3); margin-bottom: var(--pli-space-4); border-bottom: 1px solid rgba(214, 173, 96, .6); }
.pli-mega h4 a, .pli-mega__title a { color: inherit; text-decoration: none; }
.pli-mega h4 a:hover, .pli-mega__title a:hover { color: var(--pli-gold); }
.pli-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pli-space-1) var(--pli-space-6); }
.pli-mega ul.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pli-mega li a { display: block; padding: .3rem 0; text-decoration: none; color: rgba(255, 255, 255, .82); font-size: var(--pli-text-ui); }
.pli-mega li a:hover { color: var(--pli-gold); }
.pli-mega :focus-visible { outline-color: var(--pli-gold); }
/* Cột nổi bật: lề âm đúng bằng phần lề trống của khung chứa để chạm mép phải màn hình */
.pli-mega__feature { --_bleed: calc(var(--pli-gutter) + max(0px, (100vw - var(--pli-container) - 2 * var(--pli-gutter)) / 2)); position: relative; isolation: isolate; margin-right: calc(-1 * var(--_bleed)); min-height: 24rem; background: var(--pli-navy-900) var(--bg, none) center / cover no-repeat; color: var(--pli-white); display: flex; flex-direction: column; justify-content: flex-end; }
.pli-mega__feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 29, 51, .1) 0%, rgba(18, 29, 51, .45) 45%, rgba(18, 29, 51, .92) 100%); }  /* ảnh tối sẵn; chân cột đậm để chữ trắng đọc rõ */
.pli-mega__feature-body { display: grid; gap: var(--pli-space-4); justify-items: start; padding: var(--pli-space-6) calc(var(--_bleed) + var(--pli-space-6)) var(--pli-space-7) var(--pli-space-6); }
.pli-mega__feature h4, .pli-mega__feature .pli-mega__title { border: 0; padding: 0; margin: 0; }
.pli-mega__feature p { color: rgba(255, 255, 255, .85); font-size: var(--pli-text-small); }

/* 17. HAI LỘ TRÌNH: hai ô ảnh lớn đặt cạnh nhau */
.pli-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pli-space-6); }
.pli-route { position: relative; display: flex; flex-direction: column; }
.pli-route__media { aspect-ratio: var(--pli-ratio); overflow: hidden; }
.pli-route__media img { width: 100%; height: 100%; object-fit: cover; }
.pli-route__body { padding-top: var(--pli-space-5); display: grid; gap: var(--pli-space-3); }
.pli-route__body h3 { font-size: var(--pli-text-h2); font-weight: 400; }
.pli-route__body h3 a { text-decoration: none; color: inherit; }
.pli-route__body h3 a::after { content: ""; position: absolute; inset: 0; }
.pli-route__meta { font-size: var(--pli-text-small); color: var(--pli-text-subtle); }
@media (max-width: 48rem) { .pli-routes { grid-template-columns: 1fr; } }

/* 18. THẺ DỰ ÁN BẤT ĐỘNG SẢN: ảnh trên, chữ dưới, không huy hiệu */
.pli-projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pli-space-6) var(--pli-space-5); }
.pli-project { position: relative; display: flex; flex-direction: column; }
.pli-project__media { aspect-ratio: var(--pli-ratio); overflow: hidden; background: var(--pli-grey-100); }
.pli-project__media img { width: 100%; height: 100%; object-fit: cover; }
.pli-project__place { margin-top: var(--pli-space-4); font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }
.pli-project h3 { font-size: 1.5rem; font-weight: 400; margin-top: var(--pli-space-2); }
.pli-project h3 a { text-decoration: none; color: inherit; }
.pli-project h3 a::after { content: ""; position: absolute; inset: 0; }
.pli-project__note { margin-top: var(--pli-space-2); font-size: var(--pli-text-small); color: var(--pli-text-muted); }
@media (max-width: 56rem) { .pli-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pli-projects { grid-template-columns: 1fr; } }

/* 19. CÔNG CỤ PLI: hàng kẻ mảnh trên nền navy, icon vàng */
.pli-tools { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pli-gold); }
.pli-tools li a { display: grid; grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--pli-space-6); align-items: center; padding: var(--pli-space-5) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: var(--pli-white); text-decoration: none; }
.pli-tools svg { width: 1.75rem; height: 1.75rem; color: var(--pli-gold); }
.pli-tools .name { font: 400 1.625rem/1.2 var(--pli-font-serif); }
.pli-tools .desc { color: rgba(255, 255, 255, .78); font-size: var(--pli-text-small); }
.pli-tools .go svg { width: 1.25rem; height: 1.25rem; transition: transform var(--pli-dur) var(--pli-ease); }
.pli-tools li a:hover .name { color: var(--pli-gold); }
.pli-tools li a:hover .go svg { transform: translateX(.3em); }
@media (max-width: 48rem) { .pli-tools li a { grid-template-columns: 2rem minmax(0, 1fr); } .pli-tools .desc { grid-column: 2; } .pli-tools .go { display: none; } }

/* 20. TIN TỨC: một bài lớn, danh sách bài bên cạnh */
.pli-news { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pli-space-8); }
.pli-news__lead { position: relative; }
.pli-news__lead img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-news__lead h3 { font-size: var(--pli-text-h2); font-weight: 400; margin-top: var(--pli-space-4); }
.pli-news__lead h3 a, .pli-news__list h3 a { text-decoration: none; color: inherit; }
.pli-news__lead h3 a::after, .pli-news__list h3 a::after { content: ""; position: absolute; inset: 0; }
.pli-meta { display: flex; flex-wrap: wrap; gap: .4em 1em; font-size: var(--pli-text-caption); color: var(--pli-text-subtle); margin-top: var(--pli-space-4); }
.pli-news__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pli-navy-700); }
.pli-news__list li { position: relative; padding: var(--pli-space-5) 0; border-bottom: var(--pli-hairline); }
.pli-news__list h3 { font-size: 1.375rem; font-weight: 400; line-height: 1.3; }
.pli-news__list .pli-meta { margin-top: var(--pli-space-2); }
@media (max-width: 56rem) { .pli-news { grid-template-columns: 1fr; gap: var(--pli-space-6); } }

/* 21. THÔNG SỐ CHÍNH: danh sách định nghĩa ba cột */
.pli-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--pli-navy-700); }
.pli-facts > div { padding: var(--pli-space-5) var(--pli-space-5) var(--pli-space-5) 0; border-bottom: var(--pli-hairline); }
.pli-facts > div:not(:nth-child(3n + 1)) { padding-left: var(--pli-space-5); border-left: var(--pli-hairline); }
.pli-facts dt { font-size: var(--pli-text-caption); color: var(--pli-text-subtle); margin-bottom: var(--pli-space-2); }
.pli-facts dd { margin: 0; font: 400 1.375rem/1.3 var(--pli-font-serif); }
.pli-facts dd small { display: block; margin-top: var(--pli-space-2); font: 400 var(--pli-text-small)/1.55 var(--pli-font-sans); color: var(--pli-text-muted); }
@media (max-width: 56rem) { .pli-facts { grid-template-columns: 1fr 1fr; } .pli-facts > div:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .pli-facts > div:nth-child(2n) { padding-left: var(--pli-space-5); border-left: var(--pli-hairline); } }
@media (max-width: 40rem) { .pli-facts { grid-template-columns: 1fr; } .pli-facts > div:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* 22. BẢNG: bảng giá, bảng mức đầu tư */
.pli-table { width: 100%; border-collapse: collapse; font-size: var(--pli-text-body); }
.pli-table caption { text-align: left; font-size: var(--pli-text-caption); color: var(--pli-text-subtle); padding-bottom: var(--pli-space-3); }
.pli-table th { text-align: left; font-weight: 500; font-size: var(--pli-text-small); color: var(--pli-text-muted); padding: var(--pli-space-3) var(--pli-space-4) var(--pli-space-3) 0; border-bottom: 1px solid var(--pli-navy-700); }
.pli-table td { padding: var(--pli-space-4) var(--pli-space-4) var(--pli-space-4) 0; border-bottom: var(--pli-hairline); vertical-align: top; }
.pli-table td.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; font-family: var(--pli-font-serif); font-size: 1.25rem; }
.pli-table-wrap { overflow-x: auto; }

/* 23. TRANG CON: tiêu đề trang có đường dẫn vị trí, hero thấp */
.pli-pagehead { padding-top: var(--pli-space-6); }
.pli-pagehead .pli-breadcrumb { margin-bottom: var(--pli-space-5); }
.pli-hero--sub .pli-hero__media { min-height: clamp(20rem, 50vh, 30rem); }
.pli-hero--sub > .pli-container { padding-top: clamp(6rem, 14vh, 9rem); }
.pli-hero__arms { width: 3rem; height: 3rem; object-fit: contain; margin-bottom: var(--pli-space-4); }
@media (max-width: 40rem) { .pli-hero--sub .pli-hero__media { min-height: 0; } .pli-hero--sub > .pli-container { padding-top: 0; } }

/* 24. BÀI VIẾT: cột đọc 68ch, mục lục bám theo khi cuộn */
.pli-article { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--pli-space-8); align-items: start; }
.pli-toc { position: sticky; top: calc(var(--pli-header-h-compact) + 1.5rem); font-size: var(--pli-text-small); }
.pli-toc h2 { font: 500 var(--pli-text-small)/1.4 var(--pli-font-sans); color: var(--pli-text-subtle); margin-bottom: var(--pli-space-3); }
.pli-toc ol { list-style: none; margin: 0; padding: 0; border-left: var(--pli-hairline); }
.pli-toc a { display: block; padding: .4rem 0 .4rem var(--pli-space-4); margin-left: -1px; border-left: 1px solid transparent; color: var(--pli-text-muted); text-decoration: none; }
.pli-toc a:hover, .pli-toc a[aria-current="true"] { color: var(--pli-text); border-left-color: var(--pli-navy-700); }
.pli-article__body { max-width: var(--pli-measure); font-size: 1.0625rem; line-height: 1.75; }
.pli-article__body > * + * { margin-top: 1.15em; }
.pli-article__body h2 { font-size: 1.875rem; margin-top: 2em; scroll-margin-top: .5rem; }  /* header đã bù ở html scroll-padding-top */
.pli-article__body .pli-lead { font-size: 1.25rem; line-height: 1.6; color: var(--pli-text); }
.pli-article__figure { margin: 0 0 var(--pli-space-7); }
.pli-article__figure img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-tags { display: flex; flex-wrap: wrap; gap: var(--pli-space-2); list-style: none; margin: 0; padding: 0; }
.pli-tags a { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--pli-grey-300); font-size: var(--pli-text-small); text-decoration: none; color: var(--pli-text); }
.pli-tags a:hover { border-color: var(--pli-navy-700); }
.pli-callout { border: 1px solid var(--pli-line); background: var(--pli-bg-alt); padding: var(--pli-space-6); }
.pli-callout h3 { margin-bottom: var(--pli-space-3); }
.pli-callout p { color: var(--pli-text-muted); margin-bottom: var(--pli-space-5); }
@media (max-width: 64rem) { .pli-article { grid-template-columns: 1fr; } .pli-toc { position: static; } }

/* 25. DẢI KÊU GỌI CUỐI TRANG */
.pli-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pli-space-8); align-items: end; }
.pli-cta p { color: rgba(255, 255, 255, .82); }
.pli-cta__actions { display: flex; flex-wrap: wrap; gap: var(--pli-space-5); align-items: center; justify-content: flex-start; }
@media (max-width: 56rem) { .pli-cta { grid-template-columns: 1fr; gap: var(--pli-space-6); } }

/* 26. NỀN KHỐI BẰNG ẢNH PHỦ MÀU — Edward chốt 02/10/2026: nền không chỉ màu trơn. Vòng 5: nền tối chỉ dùng ảnh tối sẵn, phủ theo --ov; mô tả cũ bên dưới về 86% và phim ấm đã thay.
   Ảnh đặt trực tiếp trên chính khối: style="background-image:url(anh.jpg)". Không dùng biến CSS cho url(),
   vì trình duyệt tính đường dẫn trong biến theo vị trí tệp CSS chứ không theo trang.
   Phủ navy 86% cho chữ trắng (chữ trắng trên điểm trắng nhất của ảnh vẫn đạt 9:1);
   phủ trắng 90% cho chữ navy. Ảnh nền vẫn là ảnh đã qua lớp phủ phim ấm. */
.pli-section--photo { position: relative; isolation: isolate; background: var(--pli-navy-700) var(--bg, none) center / cover no-repeat; color: var(--pli-white); }
.pli-section--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(27, 42, 74, var(--ov, .45)); }  /* vòng 5: chỉ dùng ảnh tối sẵn, phủ nhẹ; --ov lấy từ kiem-nen-toi.py để chữ trắng đạt 4,5 : 1 trên 98% điểm ảnh */
.pli-section--photo-light { position: relative; isolation: isolate; background: var(--pli-white) var(--bg, none) center / cover no-repeat; }
.pli-section--photo-light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .84); }  /* vòng 4: 84%; chữ xám 700 trên điểm tối nhất vẫn đạt 5:1 */
.pli-section--photo-light .pli-steps li + li { border-left-color: rgba(18, 29, 51, .14); }

/* 27. THANH MENU NỀN NAVY — Edward 02/10/2026: menu nền trắng trên trang trắng không có tương phản.
   Logo bản chính vàng sáng, chữ menu trắng 90%, gạch chân và rê chuột màu vàng, nút đặt lịch màu vàng. */
.pli-header { background: var(--pli-navy-700); border-bottom: 1px solid rgba(214, 173, 96, .35); color: var(--pli-white); }
.pli-header .pli-nav__link { color: rgba(255, 255, 255, .9); background-image: linear-gradient(var(--pli-gold), var(--pli-gold)); }
.pli-header .pli-nav__link:hover, .pli-header .pli-nav__link[aria-current="page"] { color: var(--pli-white); }
.pli-header :focus-visible { outline-color: var(--pli-gold); }
.pli-header .pli-header__toggle { color: var(--pli-white); }
.pli-header.is-compact { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .22); }

/* 31. HAI NỀN TƯƠNG PHẢN XEN KẼ — Edward chốt 02/10/2026.
   Khối liền nhau luôn đổi nền: Sáng (trắng hoặc ảnh phủ trắng) rồi tối (navy hoặc ảnh phủ navy).
   Khối ngay trước footer luôn sáng. Không dùng nền xám 50 làm nền khối nữa.
   Dưới đây là cách các thành phần hiển thị khi nằm trên nền tối. */
.pli-on-dark .pli-muted, .pli-on-dark .pli-lead { color: rgba(255, 255, 255, .82); }
.pli-on-dark .pli-route__meta, .pli-on-dark .pli-meta, .pli-on-dark .pli-caption, .pli-on-dark .pli-project__place, .pli-on-dark .pli-figcaption { color: rgba(255, 255, 255, .7); }
.pli-on-dark .pli-project__note { color: rgba(255, 255, 255, .8); }
.pli-on-dark .pli-steps { border-top-color: var(--pli-gold); }
.pli-on-dark .pli-steps li + li { border-left-color: rgba(255, 255, 255, .16); }
.pli-on-dark .pli-steps li::before { color: var(--pli-gold); }
.pli-on-dark .pli-steps p { color: rgba(255, 255, 255, .8); }
.pli-on-dark .pli-table th { color: rgba(255, 255, 255, .72); border-bottom-color: var(--pli-gold); }
.pli-on-dark .pli-table td { border-bottom-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-table caption { color: rgba(255, 255, 255, .7); }
.pli-on-dark .pli-news__list { border-top-color: var(--pli-gold); }
.pli-on-dark .pli-news__list li { border-bottom-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-project__media { background: rgba(255, 255, 255, .08); }
.pli-on-dark .pli-notice--info { color: var(--pli-navy-900); background: var(--pli-info-bg); }
@media (max-width: 56rem) { .pli-on-dark .pli-steps li + li { border-top-color: rgba(255, 255, 255, .16); } }

/* 32. THÀNH PHẦN TRÊN NỀN TỐI (bổ sung)
   Ô huy hiệu quốc gia luôn nền trắng, chữ navy, kể cả khi nằm trên khối tối — Edward 02/10/2026. */
.pli-on-dark .pli-dest { background: var(--pli-white); color: var(--pli-text); border-color: transparent; }
.pli-on-dark .pli-dest .pli-link { color: var(--pli-gold-ink); }
.pli-on-dark .pli-pledges { border-top-color: var(--pli-gold); }
.pli-on-dark .pli-pledges li { border-bottom-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-pledges svg { color: var(--pli-gold); }
.pli-on-dark .pli-pledges p { color: rgba(255, 255, 255, .8); }
.pli-on-dark .pli-facts { border-top-color: var(--pli-gold); }
.pli-on-dark .pli-facts > div { border-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-facts dt { color: rgba(255, 255, 255, .7); }
.pli-on-dark .pli-facts dd small { color: rgba(255, 255, 255, .78); }
.pli-on-dark .pli-faq { border-top-color: var(--pli-gold); }
.pli-on-dark .pli-faq details { border-bottom-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-faq summary::after { background: linear-gradient(var(--pli-gold), var(--pli-gold)) center / 100% 1.5px no-repeat, linear-gradient(var(--pli-gold), var(--pli-gold)) center / 1.5px 100% no-repeat; }
.pli-on-dark .pli-faq .pli-faq__a { color: rgba(255, 255, 255, .8); }
.pli-on-dark .pli-toc h2, .pli-on-dark .pli-toc a { color: rgba(255, 255, 255, .7); }
.pli-on-dark .pli-toc ol { border-left-color: rgba(255, 255, 255, .16); }
.pli-on-dark .pli-toc a:hover, .pli-on-dark .pli-toc a[aria-current="true"] { color: var(--pli-white); border-left-color: var(--pli-gold); }
.pli-on-dark .pli-tags a { color: var(--pli-white); border-color: rgba(255, 255, 255, .3); }
.pli-on-dark .pli-tags a:hover { border-color: var(--pli-gold); }
.pli-on-dark .pli-callout { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.pli-on-dark .pli-callout p { color: rgba(255, 255, 255, .8); }
.pli-on-dark .pli-breadcrumb ol, .pli-on-dark .pli-breadcrumb a { color: rgba(255, 255, 255, .72); }
.pli-on-dark .pli-breadcrumb li + li::before { color: rgba(255, 255, 255, .35); }
.pli-on-dark a:not([class]) { color: var(--pli-white); }

/* Danh sách công cụ trên nền sáng */
.pli-section:not(.pli-on-dark) .pli-tools { border-top-color: var(--pli-navy-700); }
.pli-section:not(.pli-on-dark) .pli-tools li a { color: var(--pli-text); border-bottom-color: var(--pli-line); }
.pli-section:not(.pli-on-dark) .pli-tools svg { color: var(--pli-gold-ink); }
.pli-section:not(.pli-on-dark) .pli-tools .desc { color: var(--pli-text-muted); }
.pli-section:not(.pli-on-dark) .pli-tools li a:hover .name { color: var(--pli-gold-ink); }

/* 35. NÚT NGÔN NGỮ: CHỈ HIỆN NGÔN NGỮ CÒN LẠI, KHÔNG ICON — Edward 02/10/2026.
   Trang tiếng Việt hiện "EN", trang tiếng Anh hiện "VI". Khung viền mảnh để đọc ra là nút. */
.pli-lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.25rem; padding: 0 .7rem; border: 1px solid rgba(255, 255, 255, .45); color: var(--pli-white); font: 500 .8125rem/1 var(--pli-font-sans); letter-spacing: .08em; text-decoration: none; transition: border-color var(--pli-dur-fast) var(--pli-ease), color var(--pli-dur-fast) var(--pli-ease); }
.pli-lang-switch:hover { border-color: var(--pli-gold); color: var(--pli-gold); }

/* 36. MẠNG XÃ HỘI Ở FOOTER — icon nét đơn kiểu Lucide (assets/social-lucide/), không khung, nét khoá 1,2 px (mục 62 và ghi chú vòng 7e).
   Zalo là bản vẽ tạm cùng nét, chờ biểu tượng chính thức. Thư mục social-mf/ và social-net/ là bộ cũ, không dùng. */
svg.pli-net, .pli-share svg.pli-net, .pli-social svg.pli-net { fill: none; stroke: currentColor; }  /* vòng 7b: nét đơn kiểu Lucide, nét lấy từ thuộc tính stroke-width 1,5 trong tệp */
/* Giữ nguyên nét mảnh gốc của bộ (bản A Edward xem 02/10/2026); X thu nhỏ trong viewBox cho cân thị giác với các icon khác */
.pli-social { display: flex; flex-wrap: wrap; gap: var(--pli-space-1); list-style: none; margin: 0; padding: 0; }
.pli-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: rgba(255, 255, 255, .85); transition: color var(--pli-dur-fast) var(--pli-ease); }  /* icon đứng trần, không khung */
.pli-social a:hover { color: var(--pli-gold); }
.pli-social svg { width: 1.5rem; height: 1.5rem; }

/* 37. BỘ LỌC DẠNG NÚT CHỌN (danh sách bất động sản, tin tức) */
.pli-filters { display: flex; flex-wrap: wrap; gap: var(--pli-space-2); list-style: none; margin: 0 0 var(--pli-space-6); padding: 0; }
.pli-filters a { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--pli-grey-300); font-size: var(--pli-text-small); text-decoration: none; color: var(--pli-text); }
.pli-filters a:hover { border-color: var(--pli-navy-700); }
.pli-filters a[aria-current="true"] { background: var(--pli-navy-700); border-color: var(--pli-navy-700); color: var(--pli-white); }
.pli-on-dark .pli-filters a { border-color: rgba(255, 255, 255, .3); color: var(--pli-white); }
.pli-on-dark .pli-filters a[aria-current="true"] { background: var(--pli-gold); border-color: var(--pli-gold); color: var(--pli-navy-900); }
.pli-count { color: var(--pli-text-subtle); font-variant-numeric: tabular-nums; }
.pli-on-dark .pli-count { color: rgba(255, 255, 255, .6); }

/* 38. DANH SÁCH CHỦ ĐỀ CÓ SỐ ĐẾM (tin tức) */
.pli-topics { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: var(--pli-space-7); border-top: 1px solid var(--pli-navy-700); padding-top: var(--pli-space-3); }
.pli-topics li { break-inside: avoid; display: flex; justify-content: space-between; gap: var(--pli-space-4); padding: .6rem 0; border-bottom: var(--pli-hairline); }
.pli-topics a { text-decoration: none; color: inherit; }
.pli-topics a:hover { color: var(--pli-gold-ink); }
.pli-on-dark .pli-topics { border-top-color: var(--pli-gold); }
.pli-on-dark .pli-topics li { border-bottom-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-topics a:hover { color: var(--pli-gold); }
@media (max-width: 56rem) { .pli-topics { columns: 2; } }
@media (max-width: 40rem) { .pli-topics { columns: 1; } }

/* 39. CÔNG CỤ HỘ CHIẾU: bảng so sánh, ô chọn hộ chiếu, thẻ số liệu */
.pli-passport-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pli-space-4); max-width: 36rem; align-items: end; margin-bottom: var(--pli-space-7); }
.pli-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pli-navy-700); }
.pli-stat-row > div { padding: var(--pli-space-5) var(--pli-space-5) var(--pli-space-5) 0; border-bottom: var(--pli-hairline); }
.pli-stat-row > div + div { padding-left: var(--pli-space-5); border-left: var(--pli-hairline); }
.pli-stat-row dt { font-size: var(--pli-text-caption); color: var(--pli-text-subtle); margin-bottom: var(--pli-space-2); }
.pli-stat-row dd { margin: 0; font: 400 2.25rem/1.1 var(--pli-font-serif); font-variant-numeric: lining-nums tabular-nums; }
.pli-on-dark .pli-stat-row { border-top-color: var(--pli-gold); }
.pli-on-dark .pli-stat-row > div { border-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-stat-row dt { color: rgba(255, 255, 255, .7); }
@media (max-width: 48rem) { .pli-stat-row { grid-template-columns: 1fr 1fr; } .pli-stat-row > div + div { border-left: 0; padding-left: 0; } .pli-stat-row > div:nth-child(2n) { padding-left: var(--pli-space-5); border-left: var(--pli-hairline); } }
.pli-bar { display: block; height: .375rem; background: var(--pli-grey-100); margin-top: .4rem; }
.pli-bar i { display: block; height: 100%; background: var(--pli-navy-700); }
.pli-on-dark .pli-bar { background: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-bar i { background: var(--pli-gold); }
.pli-table tr.is-home td { font-weight: 500; }
.pli-table td .pli-arms-sm { width: 1.75rem; height: 1.75rem; object-fit: contain; vertical-align: middle; margin-right: .6rem; }

/* 40. KHỐI THÔNG TIN VĂN PHÒNG (liên hệ) */
.pli-office { display: grid; gap: var(--pli-space-5); }
.pli-office dt { font-size: var(--pli-text-caption); color: var(--pli-text-subtle); margin-bottom: .3rem; }
.pli-office dd { margin: 0; font: 400 1.25rem/1.4 var(--pli-font-serif); }
.pli-on-dark .pli-office dt { color: rgba(255, 255, 255, .7); }
.pli-on-dark .pli-hint, .pli-on-dark .pli-label .pli-optional { color: rgba(255, 255, 255, .75); }
.pli-on-dark .pli-choice input { border-color: rgba(255, 255, 255, .6); background: transparent; }
.pli-on-dark .pli-choice input:checked { border-color: var(--pli-gold); }
.pli-on-dark .pli-choice input[type="radio"]::before { background: var(--pli-gold); }
.pli-office--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pli-space-6); }
.pli-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56rem) { .pli-office--row, .pli-steps--3 { grid-template-columns: 1fr; } }

/* ===== Vòng 4 — bố cục bám pli.com.vn, phong cách hệ 2026 (02/10/2026) ===== */

/* 41. THANH TIỆN ÍCH VÀ CỤM NÚT TRÊN THANH MENU
   Giữ thanh tiện ích của site hiện tại (Hỏi đáp, Sự nghiệp, Hợp tác, Sự kiện, tìm kiếm, ngôn ngữ),
   nền Navy 900 thấp hơn thanh menu chính. Thanh này không bám khi cuộn. */
.pli-topbar { background: var(--pli-navy-900); color: rgba(255, 255, 255, .78); font-size: var(--pli-text-caption); }
.pli-topbar__inner { display: flex; justify-content: flex-end; align-items: center; gap: var(--pli-space-5); min-height: 2.5rem; }
.pli-topbar ul { display: flex; list-style: none; margin: 0; padding: 0; }
.pli-topbar li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
.pli-topbar li a { display: block; padding: .2rem .9rem; color: inherit; text-decoration: none; }
.pli-topbar li:last-child a { padding-right: 0; }
.pli-topbar a:hover { color: var(--pli-gold); }
.pli-topbar .pli-lang-switch { height: 1.75rem; min-width: 2.25rem; padding: 0 .5rem; font-size: .75rem; }
.pli-search-btn { display: inline-flex; align-items: center; gap: .5rem; height: 1.75rem; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .78); font: 400 var(--pli-text-caption)/1 var(--pli-font-sans); cursor: pointer; }
.pli-search-btn svg { width: .95rem; height: .95rem; }
.pli-search-btn:hover { color: var(--pli-gold); }
@media (max-width: 64rem) { .pli-topbar ul { display: none; } }
.pli-header__actions { display: flex; align-items: center; gap: var(--pli-space-5); flex: none; }
.pli-header__inner > .pli-nav { margin-left: auto; }
@media (max-width: 64rem) { .pli-header__actions .pli-btn { display: none; } }

/* 42. ĐẦU KHỐI: tiêu đề bên trái, đoạn dẫn và nút bên phải, chia 7/5, căn đáy.
   Thay cho tiêu đề bị ép vào cột hẹp ở vòng 3 (Edward: "justify lệch").
   Dưới tiêu đề luôn có một vạch vàng ngắn — dấu riêng giữ lại từ site hiện tại. */
.pli-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pli-space-5) var(--pli-space-8); align-items: end; margin-bottom: var(--pli-space-7); }
.pli-head > :only-child { grid-column: 1 / -1; max-width: 22em; }
.pli-head__aside { display: grid; gap: var(--pli-space-5); justify-items: start; }
.pli-head__aside p { color: var(--pli-text-muted); }
.pli-on-dark .pli-head__aside p { color: rgba(255, 255, 255, .82); }
.pli-foot { display: flex; flex-wrap: wrap; gap: var(--pli-space-4); margin-top: var(--pli-space-7); }
@media (max-width: 56rem) { .pli-head { grid-template-columns: 1fr; } }

/* 43. HAI CỘT ẢNH VÀ CHỮ: ảnh 16:10 một bên, chữ một bên (giới thiệu, vì sao chọn, liên hệ) */
.pli-media-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--pli-space-8); align-items: center; }
.pli-media-split--img-left > figure { order: -1; }
.pli-media-split figure { margin: 0; }
.pli-media-split figure img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-media-split__body > * + * { margin-top: var(--pli-space-5); }
.pli-media-split__body > h2 + * { margin-top: var(--pli-space-6); }  /* vòng 7c: vạch cách tiêu đề 1 rem, cách nội dung 2 rem */
@media (max-width: 56rem) { .pli-media-split { grid-template-columns: 1fr; gap: var(--pli-space-6); } .pli-media-split--img-left > figure { order: 0; } }

/* Danh sách ý có dấu kiểm (liên hệ, sự nghiệp, tiện ích dự án) */
.pli-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pli-space-3); }
.pli-checks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--pli-space-3); align-items: start; }
.pli-checks svg { width: 1.125rem; height: 1.125rem; margin-top: .25rem; color: var(--pli-gold-ink); }
.pli-on-dark .pli-checks svg { color: var(--pli-gold); }
.pli-checks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pli-space-6); border-top: var(--pli-hairline); gap: 0 var(--pli-space-6); }
.pli-checks--grid li { padding: var(--pli-space-3) 0; border-bottom: var(--pli-hairline); }
@media (max-width: 40rem) { .pli-checks--grid { grid-template-columns: 1fr; } }

/* Danh sách tính năng có icon trong ô vuông (vì sao chọn) */
.pli-features { list-style: none; margin: 0; padding: 0; }  /* vòng 7: bỏ vạch trên — Edward: "dư divider" */
.pli-features li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--pli-space-4); padding: var(--pli-space-5) 0; border-bottom: var(--pli-hairline); }
.pli-features .ico { display: block; padding-top: .2rem; color: var(--pli-gold-ink); }  /* icon đứng trần, không khung */
.pli-features svg { width: 1.5rem; height: 1.5rem; }
.pli-features h3 { font-size: 1.375rem; margin-bottom: var(--pli-space-2); }
.pli-features p { color: var(--pli-text-muted); font-size: var(--pli-text-small); line-height: 1.6; }
.pli-on-dark .pli-features li { border-bottom-color: rgba(255, 255, 255, .14); }
.pli-on-dark .pli-features .ico { color: var(--pli-gold); }
.pli-on-dark .pli-features p { color: rgba(255, 255, 255, .8); }

/* 44. CÁC BƯỚC KÈM ẢNH: ảnh bên trái, bốn bước xếp lưới 2 × 2 bên phải */
.pli-steps-media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pli-space-7); align-items: stretch; }
.pli-steps-media figure { position: relative; margin: 0; min-height: 20rem; }  /* vòng 7: ảnh cao bằng lưới bước, mép dưới thẳng ô 03–04 */
.pli-steps-media figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pli-steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: var(--pli-space-4); }
.pli-steps--grid li, .pli-steps--grid li + li { padding: var(--pli-space-5); border: 0; border-left: 1px solid var(--pli-gold-deep); background: var(--pli-grey-50); }
.pli-section--photo-light .pli-steps--grid li { background: var(--pli-white); }
.pli-steps--grid li::before { font-size: 2rem; margin-bottom: var(--pli-space-3); }
@media (max-width: 56rem) { .pli-steps-media { grid-template-columns: 1fr; } .pli-steps-media figure { min-height: 0; } .pli-steps-media figure img { position: static; height: auto; aspect-ratio: var(--pli-ratio); } .pli-steps--grid li + li { border-top: 0; } }
@media (max-width: 40rem) { .pli-steps--grid { grid-template-columns: 1fr; } }

/* 45. THẺ ẢNH DÙNG CHUNG: tin tức, dự án liên quan, vị trí tuyển dụng.
   Ảnh 16:10 trên, thân thẻ nền trắng viền mảnh, cả thẻ bấm được. */
.pli-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pli-space-5); }
.pli-card { position: relative; display: flex; flex-direction: column; background: var(--pli-white); color: var(--pli-text); border: 1px solid var(--pli-line); }
.pli-card__media { aspect-ratio: var(--pli-ratio); overflow: hidden; background: var(--pli-grey-100); }
.pli-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pli-card__body { display: flex; flex-direction: column; gap: var(--pli-space-3); flex: 1; padding: var(--pli-space-5); }
.pli-card__meta { font-size: var(--pli-text-caption); color: var(--pli-gold-ink); letter-spacing: .02em; }
.pli-card h3 { font: 400 1.375rem/1.3 var(--pli-font-serif); }
.pli-card h3 a { color: inherit; text-decoration: none; }
.pli-card h3 a::after { content: ""; position: absolute; inset: 0; }
.pli-card p { color: var(--pli-text-muted); font-size: var(--pli-text-small); line-height: 1.6; }
.pli-card .pli-link { margin-top: auto; padding-top: var(--pli-space-3); }
.pli-on-dark .pli-card { border-color: transparent; }
.pli-on-dark .pli-card .pli-link { color: var(--pli-gold-ink); }
.pli-card :focus-visible { outline-color: var(--pli-focus); }
@media (max-width: 56rem) { .pli-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pli-cards { grid-template-columns: 1fr; } }

/* 46. TIN TỨC TRANG CHỦ: bài lớn bên trái, năm bài có ảnh đại diện bên phải (Edward 02/10/2026) */
.pli-news__list--thumbs { display: flex; flex-direction: column; }  /* vòng 7c: cột phải giãn đều, đáy thẳng bài lớn */
.pli-news__list--thumbs li { flex: 1 1 auto; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--pli-space-4); align-items: start; padding: var(--pli-space-4) 0; }
.pli-news__list--thumbs img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-news__list--thumbs h3 { font-size: 1.1875rem; line-height: 1.3; }
.pli-news__list--thumbs .pli-meta { margin: 0 0 .35rem; }
@media (max-width: 40rem) { .pli-news__list--thumbs li { grid-template-columns: 6.5rem minmax(0, 1fr); } }

/* 47. BỐ CỤC CÓ CỘT PHỤ: nội dung 8 phần, cột phụ 4 phần bám theo khi cuộn */
.pli-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--pli-space-8); align-items: start; }
.pli-aside { display: grid; gap: var(--pli-space-5); align-content: start; }
.pli-aside > :first-child { position: sticky; top: calc(var(--pli-header-h-compact) + 1.5rem); z-index: 1; }  /* Codex v3: cả cụm cao ~900 px không vừa màn hình thấp */
.pli-aside--static { position: static; }
@media (max-width: 64rem) { .pli-layout { grid-template-columns: 1fr; gap: var(--pli-space-7); } .pli-aside > :first-child { position: static; } }
.pli-box { border: 1px solid var(--pli-line); background: var(--pli-white); padding: var(--pli-space-6); }
.pli-box > * + * { margin-top: var(--pli-space-4); }
.pli-box h3 { font-size: 1.5rem; }
.pli-box--dark { background: var(--pli-navy-700); color: var(--pli-white); border-color: var(--pli-navy-700); }
.pli-box--dark p { color: rgba(255, 255, 255, .84); }
.pli-box__sign { font: italic 400 1.125rem/1.3 var(--pli-font-serif); color: var(--pli-gold); }
.pli-kv { margin: 0; display: grid; }
.pli-kv > div { display: flex; justify-content: space-between; gap: var(--pli-space-4); padding: var(--pli-space-3) 0; border-bottom: var(--pli-hairline); font-size: var(--pli-text-small); }
.pli-kv dt { color: var(--pli-text-subtle); }
.pli-kv dd { margin: 0; text-align: right; font-weight: 500; }
.pli-badges { display: flex; flex-wrap: wrap; gap: var(--pli-space-2); }
.pli-badge { display: inline-block; padding: .3rem .6rem; font: 500 .75rem/1.35 var(--pli-font-sans); letter-spacing: .02em; background: var(--pli-navy-700); color: var(--pli-white); }
.pli-badge--gold { background: var(--pli-gold); color: var(--pli-navy-900); }
.pli-badge--line { background: var(--pli-white); color: var(--pli-text); box-shadow: inset 0 0 0 1px var(--pli-grey-300); }
.pli-form--compact { gap: var(--pli-space-4); max-width: none; }
.pli-form--compact .pli-input, .pli-form--compact .pli-select { min-height: 2.75rem; padding-block: .6rem; }

/* 48. DANH SÁCH BẤT ĐỘNG SẢN: thanh lọc, thanh sắp xếp, hàng dự án ảnh trái chữ phải, phân trang */
.pli-filterbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--pli-space-3); align-items: end; padding: var(--pli-space-5); background: var(--pli-white); border: 1px solid var(--pli-line); margin-bottom: var(--pli-space-7); }
.pli-filterbar .pli-label { font-size: var(--pli-text-caption); color: var(--pli-text-muted); font-weight: 400; }
@media (max-width: 64rem) { .pli-filterbar { grid-template-columns: 1fr 1fr; } .pli-filterbar .pli-btn { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .pli-filterbar { grid-template-columns: 1fr; } }
.pli-sortbar { display: flex; justify-content: space-between; align-items: center; gap: var(--pli-space-4); padding-bottom: var(--pli-space-4); margin-bottom: var(--pli-space-5); border-bottom: 1px solid var(--pli-navy-700); font-size: var(--pli-text-small); }
.pli-sortbar .pli-select { width: auto; min-height: 2.5rem; padding-block: .45rem; font-size: var(--pli-text-small); }
.pli-sortbar strong { font: 400 1.5rem/1 var(--pli-font-serif); margin-right: .3em; }
.pli-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pli-space-5); }
.pli-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--pli-white); border: 1px solid var(--pli-line); }
.pli-row__media { position: relative; aspect-ratio: var(--pli-ratio); overflow: hidden; }
.pli-row__media img { width: 100%; height: 100%; object-fit: cover; }
.pli-row__media .pli-badges { position: absolute; left: var(--pli-space-3); top: var(--pli-space-3); }
.pli-row__body { display: flex; flex-direction: column; gap: var(--pli-space-2); padding: var(--pli-space-5) var(--pli-space-6); }
.pli-row__type { font-size: var(--pli-text-caption); color: var(--pli-gold-ink); letter-spacing: .02em; }
.pli-row h3 { font: 400 1.625rem/1.2 var(--pli-font-serif); }
.pli-row h3 a { color: inherit; text-decoration: none; }
.pli-row h3 a::after { content: ""; position: absolute; inset: 0; }
.pli-place { display: flex; gap: .4rem; align-items: center; font-size: var(--pli-text-small); color: var(--pli-text-muted); }
.pli-place svg { width: 1rem; height: 1rem; flex: none; color: var(--pli-gold-ink); }
.pli-row .pli-link { margin-top: auto; padding-top: var(--pli-space-4); }
@media (max-width: 40rem) { .pli-row { grid-template-columns: 1fr; } }
.pli-pagination { display: flex; flex-wrap: wrap; gap: var(--pli-space-2); list-style: none; margin: var(--pli-space-7) 0 0; padding: 0; }
.pli-pagination a, .pli-pagination span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--pli-grey-300); text-decoration: none; color: var(--pli-text); font-variant-numeric: tabular-nums; }
.pli-pagination a:hover { border-color: var(--pli-navy-700); }
.pli-pagination [aria-current="page"] { background: var(--pli-navy-700); border-color: var(--pli-navy-700); color: var(--pli-white); }
.pli-dest__count { display: block; margin: -.25rem 0 var(--pli-space-3); font-size: var(--pli-text-caption); color: var(--pli-gold-ink); letter-spacing: .02em; }

/* 49. TRANG CHI TIẾT DỰ ÁN: thư viện ảnh, mặt bằng */
.pli-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pli-space-2); }
.pli-gallery a { display: block; aspect-ratio: var(--pli-ratio); overflow: hidden; }
.pli-gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.pli-gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) { .pli-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pli-doc > * + * { margin-top: var(--pli-space-5); }
.pli-doc > h2 { margin-top: var(--pli-space-8); }
.pli-doc > h2:first-child { margin-top: 0; }
.pli-doc > h3 { font-size: 1.5rem; margin-top: var(--pli-space-6); }
.pli-doc > h2 + * { margin-top: var(--pli-space-6); }  /* nội dung cách vạch vàng 2 rem, vạch cách tiêu đề 1 rem */
.pli-doc > p, .pli-doc > ul:not([class]) { color: var(--pli-text-muted); max-width: var(--pli-measure); }
.pli-doc > ul:not([class]) { padding-left: 1.2rem; display: grid; gap: var(--pli-space-2); }
.pli-doc figure { margin-inline: 0; margin-bottom: 0; }  /* vòng 7d: giữ margin-top từ luật * + *, ảnh không dính vạch vàng */
.pli-doc figure img { width: 100%; }
.pli-doc figcaption { margin-top: var(--pli-space-2); font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }

/* 50. ĐẦU BÀI VIẾT VÀ ĐẦU TIN TUYỂN DỤNG: dải sáng ngay dưới thanh menu, tương phản với menu navy */
.pli-titleband { background: var(--pli-grey-50); border-bottom: var(--pli-hairline); padding-block: var(--pli-space-7) var(--pli-space-6); }
.pli-titleband .pli-breadcrumb { margin-bottom: var(--pli-space-5); }
.pli-titleband h1 { font-size: var(--pli-text-h1); max-width: 22em; }
.pli-titleband__cat { font-size: var(--pli-text-caption); color: var(--pli-gold-ink); letter-spacing: .02em; margin-bottom: var(--pli-space-4); }
.pli-titleband__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pli-space-4); margin-top: var(--pli-space-6); padding-top: var(--pli-space-5); border-top: 1px solid var(--pli-grey-300); }
.pli-byline { display: flex; align-items: center; gap: var(--pli-space-3); font-size: var(--pli-text-small); color: var(--pli-text-muted); }
.pli-byline img { width: 2.75rem; height: 2.75rem; padding: .45rem; background: var(--pli-navy-700); }
.pli-byline strong { display: block; font-weight: 500; color: var(--pli-text); }
.pli-share { display: flex; gap: var(--pli-space-1); list-style: none; margin: 0; padding: 0; }
.pli-share a, .pli-share button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--pli-navy-700); cursor: pointer; }  /* icon đứng trần, vùng bấm 2,75 rem */
.pli-share a:hover, .pli-share button:hover { color: var(--pli-gold-ink); }
.pli-share svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pli-share svg.pli-net { width: 1.375rem; height: 1.375rem; }
.pli-feature-img { margin: 0 0 var(--pli-space-7); }
.pli-feature-img img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.pli-feature-img figcaption { margin-top: var(--pli-space-2); font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }
.pli-toc-box { padding: var(--pli-space-2) 0 0; }  /* vòng 7d: bỏ kẻ trên (sau sapo) và kẻ dưới (sau mục lục) — Edward 03/10/2026 */
.pli-toc-box h2 { font: 400 1.375rem/1.2 var(--pli-font-serif); margin: 0 0 var(--pli-space-3); }
.pli-toc-box ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--pli-space-2); }
.pli-toc-box a { color: var(--pli-gold-ink); text-decoration: none; }
.pli-toc-box a:hover { color: var(--pli-navy-700); }
.pli-article__body a:not([class]) { color: var(--pli-gold-ink); text-decoration: none; }
.pli-article__body a:not([class]):hover { color: var(--pli-navy-700); text-decoration: none; }
.pli-article__body .pli-callout { margin-block: var(--pli-space-6); border-left: 2px solid var(--pli-gold-deep); }
.pli-article__body .pli-callout p { margin-bottom: var(--pli-space-4); color: var(--pli-text); }
.pli-minilist { list-style: none; margin: 0; padding: 0; }
.pli-minilist li { position: relative; padding: var(--pli-space-3) 0; border-bottom: var(--pli-hairline); }
.pli-minilist li:last-child { border-bottom: 0; }
.pli-minilist .pli-caption { display: block; margin-bottom: .2rem; }
.pli-minilist a { font: 400 1.0625rem/1.35 var(--pli-font-serif); color: var(--pli-text); text-decoration: none; }
.pli-minilist a::after { content: ""; position: absolute; inset: 0; }

/* 51. TIN TUYỂN DỤNG: danh sách thông tin có icon ở cột phụ */
.pli-jobfacts { list-style: none; margin: 0; padding: 0; display: grid; }
.pli-jobfacts li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--pli-space-3); padding: var(--pli-space-4) 0; border-bottom: var(--pli-hairline); }
.pli-jobfacts li:first-child { padding-top: 0; }
.pli-jobfacts svg { width: 1.375rem; height: 1.375rem; color: var(--pli-gold-ink); margin-top: .15rem; }
.pli-jobfacts dt, .pli-jobfacts .k { font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }
.pli-jobfacts .v { font: 400 1.1875rem/1.4 var(--pli-font-serif); }
.pli-expired { display: inline-block; margin-left: .4rem; padding: .1rem .45rem; font: 500 .6875rem/1.4 var(--pli-font-sans); background: var(--pli-warning-bg); color: var(--pli-warning); vertical-align: middle; }

/* 52. KHỐI XEN ẢNH VÀ CHỮ LỆCH TẦNG (sự nghiệp): hàng chẵn đảo chiều */
.pli-zigzag { display: grid; gap: var(--pli-space-8); }
.pli-zigzag > div { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--pli-space-8); align-items: center; }
.pli-zigzag > div:nth-child(even) > figure { order: -1; }
.pli-zigzag figure { margin: 0; }
.pli-zigzag img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-zigzag h3 { font-size: var(--pli-text-h3); margin-bottom: var(--pli-space-4); }
@media (max-width: 56rem) { .pli-zigzag > div { grid-template-columns: 1fr; gap: var(--pli-space-5); } .pli-zigzag > div:nth-child(even) > figure { order: 0; } }

/* Ô đăng ký nhận tin (sự nghiệp, footer) */
.pli-subscribe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pli-space-2); }
.pli-subscribe .pli-input { min-height: 3rem; }
.pli-on-dark .pli-subscribe .pli-input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: var(--pli-white); }
.pli-on-dark .pli-subscribe .pli-input::placeholder { color: rgba(255, 255, 255, .6); }
@media (max-width: 40rem) { .pli-subscribe { grid-template-columns: 1fr; } }

/* 53. DẢI KÊU GỌI GIỮA TRANG CĂN GIỮA (sự nghiệp, cuối bài viết) — ngoại lệ duy nhất được căn giữa */
.pli-band { text-align: center; display: grid; justify-items: center; gap: var(--pli-space-5); }
.pli-band h2 { max-width: 24em; }
.pli-band p { max-width: 40rem; color: rgba(255, 255, 255, .84); }
.pli-section:not(.pli-on-dark) .pli-band p { color: var(--pli-text-muted); }
.pli-band em { font-style: italic; color: var(--pli-gold); }
.pli-section:not(.pli-on-dark) .pli-band em { color: var(--pli-gold-ink); }

/* 54. SỬA SAU LẦN SOÁT ĐẦU VÒNG 4
   - Tiêu đề thẻ trắng nằm trên khối tối bị luật "đường dẫn trên nền tối màu trắng" phủ thành chữ trắng trên nền trắng.
   - Khối ngay dưới dải tiêu đề không cần đệm trên đầy đủ.
   - Thư viện ảnh ba cột: một ảnh lớn 2 × 2, hai ảnh nhỏ bên phải, ba ảnh nhỏ hàng dưới, không chừa ô trống. */
.pli-on-dark .pli-dest a:not([class]), .pli-on-dark .pli-card a:not([class]), .pli-on-dark .pli-row a:not([class]), .pli-on-dark .pli-box:not(.pli-box--dark) a:not([class]) { color: inherit; }
.pli-titleband + .pli-section { padding-top: var(--pli-space-8); }

/* 55. SỬA THEO RÀ SOÁT CODEX 02/10/2026 */
/* Đường dẫn "Bỏ qua menu" hiện ra khi được focus bằng bàn phím */
.pli-skip { position: absolute; left: var(--pli-space-4); top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--pli-gold); color: var(--pli-navy-900); font-weight: 500; text-decoration: none; }
.pli-skip:focus { top: var(--pli-space-4); }
/* Vòng focus vàng trên thanh tiện ích và mọi bề mặt navy */
.pli-topbar :focus-visible, .pli-footer :focus-visible, .pli-box--dark :focus-visible { outline-color: var(--pli-gold); }
.pli-on-dark .pli-input:focus, .pli-on-dark .pli-select:focus, .pli-on-dark .pli-textarea:focus { border-color: var(--pli-gold); box-shadow: 0 0 0 1px var(--pli-gold), 0 0 0 4px rgba(214, 173, 96, .3); }
/* Chữ phụ trên dải xám nhạt và nền ảnh phủ trắng đổi sang xám 700 (xám 500 chỉ đạt 4,3 : 1) */
.pli-titleband, .pli-section--photo-light { --pli-text-subtle: var(--pli-grey-700); }
/* Bề mặt trắng nằm trong khối tối tự đặt lại vai trò màu, không thừa hưởng chữ trắng */
.pli-on-dark .pli-box:not(.pli-box--dark), .pli-on-dark .pli-card, .pli-on-dark .pli-row, .pli-on-dark .pli-dest, .pli-on-dark .pli-steps--grid li { color: var(--pli-text); }
.pli-on-dark .pli-box:not(.pli-box--dark) .pli-muted, .pli-on-dark .pli-card p, .pli-on-dark .pli-steps--grid li p { color: var(--pli-text-muted); }
.pli-on-dark .pli-steps--grid li::before { color: var(--pli-gold-ink); }
/* Menu điện thoại: bảng navy toàn màn hình, mở bằng nút Menu, đóng bằng nút Đóng hoặc phím Escape */
.pli-drawer { overflow-y: auto; }
.pli-drawer__list { margin-bottom: var(--pli-space-6); }
.pli-drawer__sub { list-style: none; margin: 0 0 var(--pli-space-6); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--pli-space-3) var(--pli-space-5); font-size: var(--pli-text-small); }
.pli-drawer__sub a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.pli-drawer .pli-header__toggle { display: inline-flex; color: var(--pli-white); }
.pli-drawer :focus-visible { outline-color: var(--pli-gold); }
body.has-drawer { overflow: hidden; }
/* Vùng bấm tối thiểu 44 px trên thiết bị cảm ứng */
@media (pointer: coarse) { .pli-search-btn, .pli-topbar .pli-lang-switch { height: 2.75rem; } .pli-social a, .pli-share a, .pli-share button { width: 2.75rem; height: 2.75rem; } }
.pli-drawer[hidden] { display: none; }

/* 56. VÒNG 5 — Edward 02/10/2026 tối */
/* Tên tác giả là đường dẫn, chữ serif */
.pli-byline__name { display: block; font: 500 1.125rem/1.3 var(--pli-font-serif); color: var(--pli-text); text-decoration: none; }
.pli-byline__name:hover { color: var(--pli-gold-ink); }
/* Thẻ, ô huy hiệu, hàng dự án, ảnh thư viện: không hiệu ứng khi rê; chỉ đổi con trỏ */
.pli-card, .pli-row, .pli-dest, .pli-route, .pli-news__list li, .pli-news__lead { cursor: pointer; }
/* Tiêu đề cột ảnh mega menu */
.pli-mega__feature .pli-mega__title { font: 400 1.625rem/1.25 var(--pli-font-serif); color: var(--pli-white); }

/* 57. SỬA THEO RÀ SOÁT CODEX VÒNG 2 */
/* Ô đang báo lỗi vẫn hiện vòng focus riêng khi được chọn */
.pli-field.is-error .pli-input:focus-visible, .pli-field.is-error .pli-select:focus-visible, .pli-field.is-error .pli-textarea:focus-visible { outline: 2px solid var(--pli-focus); outline-offset: 3px; }
/* Đường dẫn "xem thêm" chỉ rộng bằng chữ, nên vạch chỉ chạy khi rê đúng vào chữ; đường kẻ phân cách chuyển sang đoạn mô tả */
.pli-dest .pli-link, .pli-card .pli-link, .pli-row .pli-link, .pli-route .pli-link { align-self: flex-start; width: auto; border-top: 0; }
.pli-dest .pli-link { padding-top: var(--pli-space-4); margin-top: 0; }
.pli-dest__desc { padding-bottom: var(--pli-space-5); border-bottom: var(--pli-hairline); }
/* Chữ nhấn trong thân bài dùng đúng độ đậm đã tải (500), không để trình duyệt tự giả nét 700 */
strong, b { font-weight: 500; }
/* Đường dẫn trong bài: vàng, không gạch chân; thêm độ đậm 500 để không chỉ khác nhau ở màu */
.pli-article__body a:not([class]) { font-weight: 500; }
/* Nhóm ba thẻ: ở máy tính bảng chuyển thẳng sang một cột, không để hàng 2 + 1 */
@media (max-width: 56rem) { .pli-cards--3 { grid-template-columns: 1fr; } }
/* Nền trang sau menu điện thoại không cuộn và không nhận thao tác */
body.has-drawer main, body.has-drawer footer, body.has-drawer .pli-topbar { visibility: hidden; }


/* 58. THÀNH PHẦN CHO CÁC TRANG CÒN LẠI — thiết kế trước, áp sau (Edward 02/10/2026)
   Theo đúng bố cục site hiện tại: tin tức và kiến thức, chương trình, đánh giá hồ sơ, hỏi đáp,
   chỉ số hộ chiếu, báo cáo, giới thiệu, liên hệ. */

/* Thanh tab (tin tức, báo cáo, công cụ hộ chiếu) */
.pli-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--pli-space-6); list-style: none; margin: 0 0 var(--pli-space-7); padding: 0; border-bottom: var(--pli-hairline); }
.pli-tabs a { display: block; padding: var(--pli-space-4) 0; margin-bottom: -1px; border-bottom: 1px solid transparent; font: 400 1.0625rem/1.3 var(--pli-font-serif); color: var(--pli-text-muted); text-decoration: none; }
.pli-tabs a:hover { color: var(--pli-text); }
.pli-tabs a[aria-current="page"] { color: var(--pli-text); border-bottom-color: var(--pli-gold-deep); }

/* Ô quốc gia nhỏ: huy hiệu, tên, số bài (theo quốc gia) */
.pli-countries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pli-space-3); }
.pli-country { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--pli-space-3); align-items: center; padding: var(--pli-space-4); background: var(--pli-white); border: 1px solid var(--pli-line); cursor: pointer; }
.pli-country img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.pli-country a { font: 400 1.125rem/1.25 var(--pli-font-serif); color: var(--pli-text); text-decoration: none; }
.pli-country a::after { content: ""; position: absolute; inset: 0; }
.pli-country .pli-caption { display: block; margin-top: .1rem; }
@media (max-width: 56rem) { .pli-countries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .pli-countries { grid-template-columns: 1fr; } }

/* Ô chuyên mục có ảnh và số đếm */
.pli-topic-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pli-space-5); }
.pli-topic-tile { position: relative; cursor: pointer; }
.pli-topic-tile img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-topic-tile div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pli-space-4); padding-top: var(--pli-space-4); border-bottom: var(--pli-hairline); padding-bottom: var(--pli-space-3); }
.pli-topic-tile a { font: 400 1.5rem/1.2 var(--pli-font-serif); color: var(--pli-text); text-decoration: none; }
.pli-topic-tile a::after { content: ""; position: absolute; inset: 0; }
.pli-topic-tile .pli-caption { color: var(--pli-gold-ink); white-space: nowrap; }
@media (max-width: 56rem) { .pli-topic-tiles { grid-template-columns: 1fr; } }

/* Quy trình dạng dòng thời gian dọc (trang chương trình, đánh giá hồ sơ) */
.pli-timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; max-width: 44rem; }
.pli-timeline li { counter-increment: tl; position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--pli-space-5); padding-bottom: var(--pli-space-6); }
.pli-timeline li::before { content: counter(tl, decimal-leading-zero); display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--pli-gold-deep); background: var(--pli-white); font: 400 1.125rem/1 var(--pli-font-serif); color: var(--pli-gold-ink); position: relative; z-index: 1; }
.pli-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; border-left: 1px solid var(--pli-grey-300); }
.pli-timeline h3 { font-size: 1.375rem; margin: .55rem 0 var(--pli-space-2); }
.pli-timeline p { color: var(--pli-text-muted); font-size: var(--pli-text-small); line-height: 1.6; }
.pli-on-dark .pli-timeline li::before { background: transparent; border-color: var(--pli-gold); color: var(--pli-gold); }
.pli-on-dark .pli-timeline li:not(:last-child)::after { border-left-color: rgba(255, 255, 255, .2); }
.pli-on-dark .pli-timeline p { color: rgba(255, 255, 255, .8); }

/* Biểu mẫu nhiều bước: thanh tiến trình, nhóm trường có tiêu đề */
.pli-stepper { list-style: none; margin: 0 0 var(--pli-space-7); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: st; }
.pli-stepper li { counter-increment: st; padding-top: var(--pli-space-3); border-top: 2px solid var(--pli-grey-100); font-size: var(--pli-text-small); color: var(--pli-text-subtle); }
.pli-stepper li::before { content: "Bước " counter(st); display: block; font-size: var(--pli-text-caption); margin-bottom: .15rem; }
.pli-stepper li[aria-current="step"] { border-top-color: var(--pli-navy-700); color: var(--pli-text); font-weight: 500; }
.pli-stepper li.is-done { border-top-color: var(--pli-gold-deep); color: var(--pli-text-muted); }
.pli-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--pli-space-5); }
.pli-fieldset legend { padding: 0 0 var(--pli-space-3); margin-bottom: var(--pli-space-2); width: 100%; border-bottom: var(--pli-hairline); font: 400 1.5rem/1.2 var(--pli-font-serif); }
.pli-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pli-space-5); }
.pli-form__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--pli-space-4); padding-top: var(--pli-space-5); border-top: var(--pli-hairline); }
@media (max-width: 40rem) { .pli-form__row { grid-template-columns: 1fr; } .pli-stepper li { font-size: var(--pli-text-caption); } }

/* Ô tìm kiếm lớn (hỏi đáp, tra cứu) và trạng thái không có kết quả */
.pli-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 40rem; border: 1px solid var(--pli-grey-500); background: var(--pli-white); }
.pli-search input { border: 0; min-height: 3.25rem; padding: 0 1.25rem; font: 400 1.0625rem/1.4 var(--pli-font-sans); color: var(--pli-text); background: transparent; }
.pli-search input:focus { outline: none; }
.pli-search:focus-within { border-color: var(--pli-navy-700); box-shadow: 0 0 0 1px var(--pli-navy-700); }
.pli-search .pli-btn { min-height: 3.25rem; }
.pli-empty { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--pli-space-4); padding: var(--pli-space-6); border: 1px dashed var(--pli-grey-300); max-width: 40rem; }
.pli-empty svg { width: 1.75rem; height: 1.75rem; color: var(--pli-gold-ink); }
.pli-empty h3 { font-size: 1.375rem; margin-bottom: var(--pli-space-2); }
.pli-empty p { color: var(--pli-text-muted); font-size: var(--pli-text-small); margin-bottom: var(--pli-space-4); }
.pli-chips { display: flex; flex-wrap: wrap; gap: var(--pli-space-2); list-style: none; margin: 0; padding: 0; }
.pli-chips button { 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); cursor: pointer; }
.pli-chips button[aria-pressed="true"] { background: var(--pli-navy-700); border-color: var(--pli-navy-700); color: var(--pli-white); }
.pli-chips .n { margin-left: .4em; color: var(--pli-text-subtle); font-variant-numeric: tabular-nums; }
.pli-chips button[aria-pressed="true"] .n { color: rgba(255, 255, 255, .75); }

/* Thẻ hộ chiếu đang chọn và bảng xếp hạng */
.pli-passport { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pli-space-6); align-items: start; }
.pli-passport__card { padding: var(--pli-space-6); background: var(--pli-navy-700); color: var(--pli-white); border-top: 2px solid var(--pli-gold); }
.pli-passport__card .pli-caption { color: rgba(255, 255, 255, .7); }
.pli-passport__card h3 { font: 400 var(--pli-text-h1)/1.1 var(--pli-font-serif); margin: var(--pli-space-2) 0 var(--pli-space-3); }
.pli-passport__card p { color: rgba(255, 255, 255, .85); }
.pli-passport__card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--pli-space-5) 0 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.pli-passport__card dl div { padding-top: var(--pli-space-3); }
.pli-passport__card dt { font-size: var(--pli-text-caption); color: rgba(255, 255, 255, .7); }
.pli-passport__card dd { margin: 0; font: 400 1.75rem/1.1 var(--pli-font-serif); color: var(--pli-gold); font-variant-numeric: tabular-nums; }
.pli-rank { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pli-navy-700); }
.pli-rank li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--pli-space-3); align-items: center; padding: var(--pli-space-3) var(--pli-space-3) var(--pli-space-3) 0; border-bottom: var(--pli-hairline); font-variant-numeric: tabular-nums; }
.pli-rank .r { font: 400 1.125rem/1 var(--pli-font-serif); color: var(--pli-text-subtle); text-align: right; }
.pli-rank .v { font: 400 1.25rem/1 var(--pli-font-serif); }
.pli-rank li[aria-current="true"] { background: var(--pli-grey-50); box-shadow: inset 2px 0 0 var(--pli-gold-deep); }
@media (max-width: 56rem) { .pli-passport { grid-template-columns: 1fr; } .pli-passport__card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--pli-space-3); } }

/* Đầu trang báo cáo chia đôi và thẻ báo cáo */
.pli-report-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--pli-space-8); align-items: center; padding-block: var(--pli-space-7); }
.pli-report-head img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-report-head h1, .pli-report-head__title { font-size: var(--pli-text-h1); line-height: var(--pli-leading-tight); margin: var(--pli-space-4) 0; }
.pli-report-head .pli-badges { margin-bottom: var(--pli-space-2); }
.pli-report-head dl { display: flex; gap: var(--pli-space-7); margin: var(--pli-space-6) 0 0; padding-top: var(--pli-space-5); border-top: var(--pli-hairline); }
.pli-report-head dd { margin: 0 0 .2rem; font: 400 2rem/1 var(--pli-font-serif); color: var(--pli-gold-ink); font-variant-numeric: tabular-nums; }
.pli-report-head dt { font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }
@media (max-width: 56rem) { .pli-report-head { grid-template-columns: 1fr; gap: var(--pli-space-6); } }
.pli-doc-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--pli-space-4); align-items: center; padding: var(--pli-space-5); border: 1px solid var(--pli-line); background: var(--pli-white); }
.pli-doc-card > svg { width: 2rem; height: 2rem; color: var(--pli-gold-ink); }
.pli-doc-card h3 { font-size: 1.25rem; }
.pli-doc-card p { font-size: var(--pli-text-caption); color: var(--pli-text-subtle); margin-top: .2rem; }
@media (max-width: 40rem) { .pli-doc-card { grid-template-columns: 2.5rem minmax(0, 1fr); } .pli-doc-card .pli-btn { grid-column: 1 / -1; } }
.pli-numlist { list-style: none; margin: 0; padding: 0; counter-reset: nl; display: grid; gap: var(--pli-space-2); }
.pli-numlist li { counter-increment: nl; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); font-size: var(--pli-text-small); }
.pli-numlist li::before { content: counter(nl) "."; font: 400 1rem/1.4 var(--pli-font-serif); color: var(--pli-gold-ink); }

/* Thẻ chuyên gia: ảnh chân dung 4:5, họ tên, chức danh, lĩnh vực */
.pli-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pli-space-5); }
.pli-person img, .pli-person .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--pli-grey-100); }
.pli-person .ph { display: grid; place-items: center; color: var(--pli-grey-500); font-size: var(--pli-text-caption); }
.pli-person h3 { font-size: 1.375rem; margin-top: var(--pli-space-4); }
.pli-person .role { font-size: var(--pli-text-small); color: var(--pli-gold-ink); margin-top: .15rem; }
.pli-person p { font-size: var(--pli-text-small); color: var(--pli-text-muted); margin-top: var(--pli-space-2); }
@media (max-width: 56rem) { .pli-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Khối văn phòng kèm bản đồ (liên hệ) */
.pli-office-map { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--pli-line); background: var(--pli-white); }
.pli-office-map iframe, .pli-office-map .map { width: 100%; min-height: 22rem; border: 0; background: var(--pli-grey-100); display: block; }
.pli-office-map__body { padding: var(--pli-space-6); display: grid; gap: var(--pli-space-5); align-content: start; }
.pli-office-map__body h3 { font-size: 1.625rem; }
.pli-office-map__body a { text-decoration: none; } /* số điện thoại + email: không gạch chân */
@media (max-width: 56rem) { .pli-office-map { grid-template-columns: 1fr; } }

/* 59. ICON KHÔNG BAO GIỜ NẰM TRONG KHUNG — Edward chốt 02/10/2026. Áp tại chỗ ở các mục 36 (mạng xã hội),
   41 (nút tìm kiếm), 43 (danh sách tính năng), 50 (chia sẻ). Không thêm viền hay nền quanh icon ở thành phần mới. */

/* 60. FOOTER NHẸ HƠN — Edward 02/10/2026: chữ footer nặng mắt. Đã sửa tại chỗ ở mục 14:
   thân chữ Be Vietnam Pro 300, tiêu đề cột EB Garamond 400. Nút trong footer giữ 500. */
.pli-footer .pli-btn { font-weight: 500; }

/* 61. NỀN XÁM TRẮNG — Edward 02/10/2026: khối đã có ảnh nội dung thì không đặt thêm ảnh nền, tránh rối.
   Thử navy 20% rồi đổi sang xám trắng (Xám 100, #E8EBEF), chữ navy như khối sáng. Nhịp T trong script dựng.
   Vàng mực trên nền này đạt 5,2 : 1 nên giữ nguyên màu. */
.pli-section--tint { background: var(--pli-grey-100); --pli-text-subtle: var(--pli-grey-700); }
.pli-section--tint .pli-steps--grid li, .pli-section--tint .pli-box, .pli-section--tint .pli-card { background: var(--pli-white); }

/* 62. VÒNG 7 — Edward 03/10/2026
   Icon mạng xã hội: bộ nét mảnh liền (Magnific, Enamo Studios) cho Facebook, Instagram, LinkedIn, YouTube; TikTok bản nét mảnh cùng kiểu
   vẽ bằng stroke (thuộc tính stroke="currentColor" trên path thắng giá trị kế thừa stroke: none). X và Zalo giữ nguyên.
   Bộ cũ có đường đứt (khe hở trên nét) bị loại: "có lủng lỗ icon vậy là không được". Bản cũ lưu ở assets/social-mf/_cu-net-dut/. */
/* Vòng 7b — cùng ngày: bộ Enamo vẽ viền kép quanh hình (Instagram hai lớp) nên bị loại. Icon mạng xã hội chuyển sang nét đơn 1,5 px
   kiểu Lucide, cùng hệ với icon giao diện: Facebook, Instagram, LinkedIn, YouTube lấy từ Lucide; X, TikTok, Zalo vẽ trên lưới 24 theo nét Lucide.
   Tệp ở assets/social-lucide/. */
/* Đầu khối chỉ có nút (không đoạn dẫn): nút đứng bên phải, ngang dòng đầu của tiêu đề — Edward 03/10: "button nằm lưng chừng quá" */
.pli-head--bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--pli-space-5) var(--pli-space-8); }
.pli-head--bar > h2 { max-width: 22em; }
.pli-head--bar > .pli-head__aside { flex: none; }
/* Hero trang con — Edward 03/10/2026: đường dẫn vị trí nằm trong tấm chữ (không còn dải riêng phía trên ảnh);
   tấm chữ đặt trái hoặc phải tuỳ ảnh, luôn ở phía không che chủ thể (.pli-hero--right). */
.pli-hero__crumbs { margin-bottom: var(--pli-space-5); }
.pli-hero__crumbs ol { font-size: .9375rem; }
.pli-hero__crumbs a:hover { color: var(--pli-gold); }
.pli-hero__crumbs [aria-current] { color: rgba(255, 255, 255, .9); }
.pli-hero--right .pli-hero__panel { margin-left: auto; }
.pli-hero--right .pli-hero__caption { right: auto; left: var(--pli-gutter); }

/* 63. HERO CHỮ ĐÈ ẢNH — Edward 03/10/2026: tấm navy đặc che mất ảnh đẹp.
   Luật chọn: ảnh kiến trúc, phối cảnh, phong cảnh đáng xem trọn vẹn → .pli-hero--overlay (không tấm, chữ trắng trên lớp chuyển màu navy ở góc dưới trái, có bóng chữ).
   Ảnh có người → giữ tấm navy, đặt ở phía không che chủ thể (.pli-hero--right khi cần).
   Lớp chuyển màu đậm 85% ở đáy, nhạt dần về 0 ở hai phần ba phía trên, nên dải ảnh sát menu vẫn giữ nguyên (luật tương phản với menu không đổi). */
.pli-hero--overlay .pli-hero__media { position: relative; min-height: clamp(32rem, 80vh, 48rem); }
.pli-hero--overlay .pli-hero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(18, 29, 51, .9) 0%, rgba(18, 29, 51, .76) 42%, rgba(18, 29, 51, 0) 84%),
  linear-gradient(90deg, rgba(18, 29, 51, .62) 0%, rgba(18, 29, 51, .3) 40%, rgba(18, 29, 51, 0) 62%); }
.pli-hero--overlay > .pli-container { padding-top: clamp(14rem, 42vh, 24rem); }
.pli-hero--overlay .pli-hero__panel { width: min(46rem, 100%); padding: 0 0 var(--pli-space-8); background: none; }
.pli-hero--overlay .pli-hero__panel :is(h1, p, .pli-breadcrumb ol) { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 12px rgba(0, 0, 0, .22); }  /* bóng trung tính có độ lệch, không hào quang màu */
.pli-hero--overlay .pli-hero__panel p { color: rgba(255, 255, 255, .92); }
.pli-hero--overlay .pli-breadcrumb ol, .pli-hero--overlay .pli-breadcrumb a { color: rgba(255, 255, 255, .9); }  /* đo 03/10: nền sau đường dẫn ≥ 4,5 : 1 với chữ trắng */
@media (max-width: 40rem) {
  .pli-hero--overlay .pli-hero__media { min-height: 0; }
  .pli-hero--overlay .pli-hero__media::after { display: none; }
  .pli-hero--overlay .pli-hero__panel { padding: var(--pli-space-6) var(--pli-gutter); background: var(--pli-navy-700); }
  .pli-hero--overlay .pli-hero__panel :is(h1, p, .pli-breadcrumb ol) { text-shadow: none; }
}

/* 64. Ô CỘT PHỤ CÓ DẤU NHẬN DIỆN — tên chương trình luôn đi sau huy hiệu quốc gia; tên chủ đầu tư luôn đi dưới logo chủ đầu tư */
.pli-box__ident { display: flex; align-items: center; gap: var(--pli-space-3); margin-top: var(--pli-space-4); }
.pli-box__ident img { width: 2.25rem; height: 2.25rem; object-fit: contain; flex: none; }
.pli-box__ident strong { font-weight: 500; }
.pli-box__logo { display: block; height: 2.75rem; width: auto; max-width: 12rem; object-fit: contain; margin-top: var(--pli-space-4); }
.pli-box__logo + p { margin-top: var(--pli-space-3); }

/* 65. Ô TÌM KIẾM TRONG BỘ LỌC — Edward 03/10/2026: hàng đầu của bộ lọc, trải hết bề ngang; kính lúp đứng trần trong ô nhập */
.pli-filterbar__q { grid-column: 1 / -1; }
.pli-filterbar__search { position: relative; }
.pli-filterbar__search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--pli-text-subtle); pointer-events: none; }
.pli-filterbar__search .pli-input { width: 100%; padding-left: 2.75rem; }
.pli-filterbar__search .pli-input::-webkit-search-cancel-button { cursor: pointer; }

/* 66. TRANG BÀI VIẾT — Edward 03/10/2026: ảnh đại diện nằm trong cột nội dung, không tràn cả khung;
   chuyên mục và quốc gia gộp vào cuối đường dẫn vị trí bằng chữ vàng, bỏ dòng riêng cho gọn. */
.pli-article__body > .pli-feature-img { margin: 0 0 var(--pli-space-6); }
.pli-article__body > .pli-feature-img img { width: 100%; aspect-ratio: var(--pli-ratio); object-fit: cover; }
.pli-breadcrumb__terms a { color: var(--pli-gold-ink); }
.pli-breadcrumb__terms a:hover { color: var(--pli-navy-700); }
.pli-toc-box h2::before { content: none; }  /* tiêu đề "Nội dung" không mang vạch vàng của tiêu đề mục */
/* Vòng 7e — Edward 03/10/2026: nét icon mạng xã hội dày hơn icon Lucide trong nội dung (vì hiển thị to hơn, nét co giãn theo cỡ).
   Khoá nét theo điểm ảnh màn hình: 1,2 px ở mọi cỡ, bằng icon nội dung 18–20 px (1,5 trên lưới 24 → 1,1–1,25 px). */
svg.pli-net :is(path, rect, circle, line, polyline, polygon) { vector-effect: non-scaling-stroke; stroke-width: 1.2px; }

/* 67. SỬA THEO RÀ SOÁT CODEX VÒNG 3 (03/10/2026) */
/* 6. Hero chữ đè ảnh trên điện thoại: bỏ đệm trên (luật biến thể thắng luật mobile chung) */
@media (max-width: 40rem) { .pli-hero--overlay > .pli-container { padding-top: 0; } }
/* 7. Hero có tấm navy (ảnh có người): từ 56rem trở xuống, ảnh trên, tấm chữ dưới — tấm 40rem không còn che chủ thể ở máy tính bảng */
@media (max-width: 56rem) {
  .pli-hero:not(.pli-hero--overlay) { display: block; }
  .pli-hero:not(.pli-hero--overlay) .pli-hero__media { min-height: 0; height: clamp(18rem, 52vw, 26rem); }
  .pli-hero:not(.pli-hero--overlay) > .pli-container { padding: 0; max-width: none; }
  .pli-hero:not(.pli-hero--overlay) .pli-hero__panel { width: 100%; margin: 0; padding: var(--pli-space-6) var(--pli-gutter); }
  .pli-hero:not(.pli-hero--overlay) .pli-hero__caption { top: calc(clamp(18rem, 52vw, 26rem) - 2.25rem); bottom: auto; }
}
/* 8. Chú thích ảnh hero khi ảnh tách khỏi chữ: một nền navy nhỏ phía sau để luôn đọc được */
@media (max-width: 56rem) { .pli-hero__caption { padding: .15rem .5rem; background: rgba(18, 29, 51, .6); text-shadow: none; } }
/* 15. Ô đăng ký footer: ô nhập và nút tự xuống hai hàng khi cột hẹp; con trỏ nhập màu theo chữ */
.pli-footer .pli-subscribe { display: flex; flex-wrap: wrap; }
.pli-footer .pli-subscribe .pli-input { flex: 1 1 13rem; min-width: 0; }
.pli-footer .pli-subscribe .pli-btn { flex: 1 0 auto; }
.pli-input, .pli-select, .pli-textarea { caret-color: currentColor; }
.pli-aside--static > :first-child { position: static; }  /* trang dự án: cột phụ không bám */
/* 16. Đường dẫn trong thẻ "Hai lộ trình" (Grid): chỉ rộng bằng chữ, vạch chỉ chạy khi rê đúng vào chữ */
.pli-route__body .pli-link { justify-self: start; width: fit-content; }

/* 68. NÚT CHUYỂN TIỀN TỆ EUR / USD — Edward 03/10/2026. Hai chữ trần cạnh nhãn, không khung; đơn vị đang chọn có gạch vàng mảnh. */
.pli-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pli-space-3); }
.pli-currency { position: relative; display: inline-flex; align-items: baseline; margin: 0; padding: 0; border: 0; min-inline-size: 0; font: 500 var(--pli-text-caption)/1 var(--pli-font-sans); letter-spacing: .02em; }
.pli-currency label { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pli-currency label + label::before { content: "/"; padding: 0 .1rem; color: var(--pli-grey-300); }
.pli-currency input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pli-currency span { padding: .2rem .25rem; color: var(--pli-text-subtle); border-bottom: 1px solid transparent; }
.pli-currency input:checked + span { color: var(--pli-text); border-bottom-color: var(--pli-gold-deep); }
.pli-currency label:hover span { color: var(--pli-text); }
.pli-currency input:focus-visible + span { outline: 2px solid var(--pli-focus); outline-offset: 2px; }
@media (pointer: coarse) { .pli-currency span { padding: .6rem .5rem; } }

/* 69. TUYỂN DỤNG HẾT HẠN — nút ứng tuyển đóng băng (button disabled), kèm dòng hạn đã qua; thẻ vị trí có nhãn "Hết hạn" cạnh ngày. */
.pli-apply-note { align-self: center; font-size: var(--pli-text-caption); color: var(--pli-text-subtle); }
.pli-card__meta .pli-expired { margin-left: .5rem; }
.pli-currency { margin-block: -.4rem; }  /* nút không làm cao dòng nhãn: "Mức giá" thẳng hàng với các nhãn bên cạnh */

/* 71. SỬA THEO RÀ SOÁT CODEX VÒNG XÁC NHẬN (03/10/2026) */
/* 3. Mega menu đã đóng bằng Escape thì không hiện lại vì :hover/:focus-within cho tới khi rời mục */
.pli-nav__item.is-dismissed .pli-mega { opacity: 0; visibility: hidden; transform: translateY(-.5rem); }
/* 4. Bề mặt trắng nằm trong khối tối: đặt lại đủ vai trò màu (chữ phụ, nút viền, vòng focus) — không thừa hưởng màu nền tối */
.pli-on-dark :is(.pli-box:not(.pli-box--dark), .pli-card, .pli-row, .pli-dest) :is(.pli-caption, .pli-meta, .pli-route__meta, .pli-figcaption, .pli-project__place) { color: var(--pli-grey-700); }
.pli-on-dark :is(.pli-box:not(.pli-box--dark), .pli-card, .pli-row, .pli-dest) :is(.pli-btn--secondary, .pli-btn--outline) { --_fg: var(--pli-navy-700); --_bd: var(--pli-navy-700); }
.pli-on-dark :is(.pli-box:not(.pli-box--dark), .pli-card, .pli-row, .pli-dest) :is(.pli-btn--secondary, .pli-btn--outline):hover { --_bg: var(--pli-navy-700); --_fg: var(--pli-white); --_bd: var(--pli-navy-700); }
.pli-on-dark :is(.pli-box:not(.pli-box--dark), .pli-card, .pli-row, .pli-dest) :focus-visible { outline-color: var(--pli-focus); }
.pli-on-dark .pli-box:not(.pli-box--dark) :is(.pli-input, .pli-select, .pli-textarea):focus { border-color: var(--pli-navy-500); box-shadow: 0 0 0 1px var(--pli-navy-500), 0 0 0 4px rgba(56, 78, 120, .2); }
/* 7. Chú thích ảnh hero khi ảnh tách khỏi chữ: nền navy 80% để đạt ≥ 4,5 : 1 trên vùng ảnh sáng nhất */
@media (max-width: 56rem) { .pli-hero__caption { background: rgba(18, 29, 51, .8); color: var(--pli-white); } }
/* 11. Nhãn ô email footer hiện rõ, nằm trên ô nhập */
.pli-footer .pli-subscribe .pli-footer__label { flex-basis: 100%; font-size: var(--pli-text-caption); color: rgba(255, 255, 255, .72); }
/* Mạng lưới văn phòng: danh sách hàng, cờ · quốc gia · địa chỉ */
.pli-network { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pli-navy-900); }
.pli-network li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: var(--pli-space-6); padding: var(--pli-space-5) 0; border-bottom: var(--pli-hairline); }
.pli-network img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.pli-network h3 { font: 400 var(--pli-text-h3)/1.15 var(--pli-font-serif); margin: 0; }
.pli-network p { margin: 0; color: var(--pli-text-muted); font-size: var(--pli-text-small); line-height: 1.6; }
@media (max-width: 40rem) { .pli-network li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--pli-space-2) var(--pli-space-4); } .pli-network p { grid-column: 2; } }

/* ===== Chuyển động & phần tử phụ (toàn site) — tắt khi khách chọn giảm chuyển động ===== */
@media (prefers-reduced-motion: no-preference) {
  /* hiện dần khi cuộn tới; chỉ ẩn trước khi hiện nếu JS đã chạy (html.pli-anim) */
  .pli-anim .pli-rv { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s var(--pli-ease), transform .7s var(--pli-ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .pli-anim .pli-rv.is-in { opacity: 1; transform: none; }
  /* ảnh đầu trang: vào chậm, không đụng chữ (giữ LCP) */
  .pli-hero__media { animation: pli-hero-in 1.6s var(--pli-ease) both; }
  @keyframes pli-hero-in { from { transform: scale(1.06); } to { transform: none; } }
  /* thẻ nổi nhẹ khi rê chuột */
  .pli-card, .pli-row, .pli-dest, .pli-route, .pli-project { transition: transform .35s var(--pli-ease), box-shadow .35s var(--pli-ease), border-color .35s var(--pli-ease); }
  @media (hover: hover) {
    .pli-card:hover, .pli-dest:hover, .pli-route:hover, .pli-project:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(18, 29, 51, .10); border-color: var(--pli-grey-300); }
    .pli-network li { transition: padding-left .35s var(--pli-ease), background-color .35s var(--pli-ease); }
    .pli-network li:hover { padding-left: var(--pli-space-4); background: var(--pli-grey-50, rgba(18, 29, 51, .03)); }
  }
}
/* thanh tiến độ đọc */
.pli-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; background: var(--pli-gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
/* nút lên đầu trang */
.pli-totop { position: fixed; right: var(--pli-space-5); bottom: var(--pli-space-5); z-index: 90; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--pli-gold); background: var(--pli-navy-900); color: var(--pli-gold); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .3s, transform .3s, visibility .3s, background-color .2s; }
.pli-totop.is-show { opacity: 1; visibility: visible; transform: none; }
.pli-totop:hover { background: var(--pli-navy-700); }
.pli-totop:focus-visible { outline: 2px solid var(--pli-focus); outline-offset: 3px; }
.pli-totop svg { width: 1.1rem; height: 1.1rem; }

/* ===== Chuyển động vòng 2 ===== */
@media (prefers-reduced-motion: no-preference) {
  /* nút: mũi tên/đường kẻ dài ra, nút vàng sáng lên */
  .pli-btn { transition: background-color .25s var(--pli-ease), border-color .25s var(--pli-ease), color .25s var(--pli-ease), transform .25s var(--pli-ease), box-shadow .25s var(--pli-ease); }
  @media (hover: hover) { .pli-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18, 29, 51, .14); } .pli-btn:active { transform: none; box-shadow: none; } }
  /* menu: gạch chân trượt đã có; thêm dịch nhẹ cho dòng trong danh sách mục lục / bài liên quan */
  .pli-minilist a, .pli-toc a { transition: color .25s var(--pli-ease), padding-left .25s var(--pli-ease); }
  @media (hover: hover) { .pli-minilist a:hover, .pli-toc a:hover { padding-left: .35rem; } }
}
/* thanh kêu gọi cố định trên điện thoại */
.pli-stickycta { display: none; }
@media (max-width: 48rem) {
  .pli-stickycta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; padding: .6rem var(--pli-space-4) calc(.6rem + env(safe-area-inset-bottom)); background: var(--pli-navy-900); border-top: 1px solid var(--pli-gold); transform: translateY(110%); transition: transform .35s var(--pli-ease); }
  .pli-stickycta.is-show { transform: none; }
  .pli-stickycta .pli-btn { display: flex; width: 100%; justify-content: center; }
  .pli-stickycta.is-show ~ .pli-totop { bottom: 4.75rem; }
  body.has-drawer .pli-stickycta { display: none; }
}
/* liên kết "Xem… / Tìm hiểu": mũi tên mảnh theo màu chữ, trượt nhẹ sang phải khi rê chuột (thay vạch ngang cũ) */
.pli-link::after { content: ""; flex: none; width: 1.125em; height: 1.125em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--pli-dur) var(--pli-ease); }
.pli-link:hover::after, .pli-link:focus-visible::after, a:hover > .pli-link::after { transform: translateX(.3em); }
@media (prefers-reduced-motion: reduce) { .pli-link::after { transition: none; } }
/* Thẻ điểm đến có ảnh (trang chủ): ảnh nước ở đầu thẻ, huy hiệu nằm trong ô trắng chồng mép ảnh */
.pli-dest--photo { padding: 0 0 var(--pli-space-5); overflow: hidden; }
.pli-dest--photo > :not(.pli-dest__media) { margin-left: var(--pli-space-6); margin-right: var(--pli-space-6); }
.pli-dest__media { position: relative; margin-bottom: var(--pli-space-6); }
.pli-dest__media > img:first-child:not(.pli-dest__arms) { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--pli-ease); }
.pli-dest--photo .pli-dest__arms { position: absolute; left: var(--pli-space-6); bottom: -1.5rem; width: 3.25rem; height: 3.25rem; margin: 0; padding: .45rem; background: var(--pli-white); border: 1px solid var(--pli-line); object-position: center; box-shadow: 0 6px 16px rgba(18, 29, 51, .10); }
.pli-dest--photo .pli-dest__count { margin-top: var(--pli-space-2); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pli-dest--photo:hover .pli-dest__media > img:first-child:not(.pli-dest__arms) { transform: scale(1.05); } }
/* Mọi menu thả xuống cùng một chiều cao (Dịch vụ, Bất động sản, Thông tin, Công cụ) */
@media (min-width: 78.0625rem) { .pli-mega__inner { min-height: 33.5rem; } .pli-mega__feature { min-height: 0; } }
.pli-dest__media--trong { aspect-ratio: 16 / 10; background: var(--pli-navy-700) url("bieu-tuong-vang-sang.svg") center / 22% no-repeat; }  /* nước chưa có ảnh thật: ô navy + chữ P vàng */
@media (min-width: 64rem) { .pli-dest-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }  /* đúng 4 thẻ: một hàng, không lẻ thẻ */