/* ════════════════════════════════════════════════════════════════════════
   NBRE · patek-rhythm.css
   Hệ đo lấy từ patek.com (đo trực tiếp bằng getComputedStyle, 1440×900).
   Chỉ mượn SỐ ĐO và CHUYỂN ĐỘNG — không dùng chữ, ảnh hay logo của họ.
   Nối SAU components.css, TRƯỚC theme-light.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Nhịp nền ────────────────────────────────────────────────────────
   Patek đặt tông phụ ở đúng một khối giữa trang. NBRE dài hơn → hai khối. */
.criteria,
.broker {
  background: var(--surface-2);
}

/* ── 2. Container + nhịp dọc ────────────────────────────────────────────
   container 1360 / padding 0 80px → inner 1200
   grid row  margin 0 -12px → 1224, cột padding 0 12px
   nhịp giữa section: margin-top 120px
   khối có nền riêng: padding 120px 0                                     */
.pk-container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 80px;
}

.pk-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}
.pk-row > * { padding-inline: 12px; }

/* Các section sẵn có đã padding-block 117px — gần đúng 120px của Patek.
   KHÔNG thêm margin-top nữa (sẽ thành 237px). Chỉ chuẩn hoá về đúng 120px
   cho hai khối mang nền riêng, để mép nền trùng nhịp. */
.pk-rhythm > section.criteria,
.pk-rhythm > section.broker {
  padding-block: 120px;
}

/* cột chữ theo đúng bề rộng đo được */
.pk-copy      { max-width: 588px; }
.pk-copy--narrow { max-width: 486px; }

@media (max-width: 1024px) {
  .pk-container { padding-inline: 36px; }
  .pk-rhythm > section.criteria,
  .pk-rhythm > section.broker { padding-block: 60px; }
}
@media (max-width: 640px) {
  .pk-container { padding-inline: 32px; }
}

/* ── 3. Nút CTA ─────────────────────────────────────────────────────────
   Patek: border 1px, radius 999px, height 52px, padding 0 24px,
          transition .7s cubic-bezier(.19,1,.22,1)                        */
.pk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 52px;
  padding: 0 24px;
  border: 1px solid var(--nbre-champagne);
  border-radius: 999px;
  background: transparent;
  color: var(--nbre-champagne);
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .28px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all .7s cubic-bezier(.19, 1, .22, 1);
}
.pk-cta:hover,
.pk-cta:focus-visible {
  background: var(--nbre-champagne);
  color: var(--nbre-black);
}
/* biến thể trong hero: cùng hình dáng, bỏ viền */
.pk-cta--contained { border-width: 0; }

/* ── 4. Thang chữ ───────────────────────────────────────────────────────
   Ánh xạ 1:1 vai trò font: openSans→Be Vietnam Pro, lora→Lora (đã trùng). */
.pk-eyebrow {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 14px; font-weight: 400; line-height: 18px;
  letter-spacing: .28px; text-transform: uppercase;
  color: var(--nbre-champagne);
}
.pk-h1 {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 40px; font-weight: 300; line-height: 48px;
  letter-spacing: .12px; text-transform: uppercase;
}
.pk-h2 {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 32px; font-weight: 300; line-height: 38.4px;
  letter-spacing: 1.08px; text-transform: uppercase;
}
.pk-h3 {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 24px; font-weight: 300; line-height: 30px;
  letter-spacing: .72px; text-transform: uppercase;
}
.pk-body {
  font-family: Lora, Georgia, serif;
  font-size: 16px; font-weight: 400; line-height: 26px;
}
@media (max-width: 1024px) {
  .pk-h1 { font-size: 30px; line-height: 38px; }
  .pk-h2 { font-size: 26px; line-height: 32px; }
}