/* Onpro — project page shell v1.0.0
 * Áp dụng cho tất cả /du-an/*
 * Created: 2026-10-14
 * Mục tiêu: lock layout chống vỡ + typography scale + nhịp thở section
 */

:root {
  /* Palette chuẩn — ON gold #C4A35A + champagne + navy */
  --ink: #1a2332;
  --ink-2: #3d4b61;
  --muted: #6b7280;
  --line: #e8e2d6;
  --cream: #FFFBED;
  --cream-2: #FAF8F4;
  --navy: #1E3A5F;
  --navy-2: #0F2337;
  --gold: #C4A35A;
  --gold-2: #B8912A;
  --blue: #24A1DE;
  
  /* Thang chữ chuẩn — bắt buộc dùng, không tự đặt px */
  --fs-h1: clamp(30px, 4.2vw, 44px);
  --fs-h2: clamp(24px, 3vw, 32px);
  --fs-h3: clamp(19px, 2vw, 23px);
  --fs-body: 16px;       /* iOS ≥16px không auto-zoom */
  --fs-small: 14px;
  
  /* Nhịp thở — P4: nâng 32-64 → 42-68px (whitespace 1.3x) */
  --sp-section: clamp(42px, 5.5vw, 68px);
  --sp-block: clamp(24px, 3.5vw, 48px);
  --container: min(1120px, 100% - 32px);
}

/* Container chuẩn — mọi section dự án PHẢI nằm trong này */
.op-container {
  width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Typography bắt buộc */
.project-block > h3,
main.section h2,
main.section h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}

main.section p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 72ch;
}

/* P4: whitespace — .project-block (KP 15 section, marTop 26px cố định).
   Selector cũ là main.section section.project-block KHÔNG match vì KP dùng
   <main class="wrap">. Dùng [class*="project-block"] + <section> để đủ rộng. */
main section[class*="project-block"],
section[class*="project-block"],
main [class*="project-block"] {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}

/* Section liền nhau: bỏ pad trên, dùng margin để không nhân đôi */
main [class*="project-block"] + [class*="project-block"],
section[class*="project-block"] + section[class*="project-block"] {
  padding-top: 0;
  margin-top: var(--sp-section);
}

/* Thẻ section thường (CITYON 13/15 section dùng class .section) cũng có nhịp thở */
main > section,
main section.section,
main section[class*="section"],
body section.section,
body section[class*="section"],
main [class*="map-section"],
main [class*="faq-section"] {
  padding-top: var(--sp-block);
  padding-bottom: var(--sp-block);
}

/* Section liền nhau — không nhân đôi, dùng margin cho khe nhỏ */
main > section + section,
main section.section + section.section,
body section.section + section.section {
  padding-top: 0;
  margin-top: var(--sp-block);
}

/* Touch target chuẩn iOS — ≥44px */
button,
.btn,
a.btn {
  min-height: 44px;
  padding: 12px 18px;
  font-size: var(--fs-body);
}

/* P4: chống chữ quá nhỏ trong nội dung dự án (KP 13px, Golden City 12.5px).
   Chỉ nới cho <p>/<li> trong section, KHÔNG đụng badge/giá/label nhỏ.
   Dùng !important để thắng inline style font-size:10-12px (170 chỗ ở OP2-3). */
main p,
main li,
main section p,
main section li,
[class*="desc"] p,
[class*="content"] p,
[class*="prose"] p {
  font-size: var(--fs-body) !important;
  line-height: 1.7 !important;
}

/* Giá/code căn/table nhỏ giữ nguyên nhưng phải ≥14px để đọc được */
main td,
main th,
main small,
main .price,
main [class*="price"],
main [class*="code"] {
  font-size: var(--fs-small) !important;
  line-height: 1.55 !important;
}

/* Section không cần <main> cha — vẫn giữ nhịp thở + chống vỡ ngang */
section,
main > section {
  max-width: 100%;
}

/* Lock layout — chống vỡ ngang desktop (bảo hiểm cho malformed HTML) */
main.section {
  max-width: 100%;
  overflow-x: hidden;
}

main.section > *,
.project-content-wrap > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* Mobile — padding đồng nhất */
@media (max-width: 640px) {
  :root {
    --sp-section: 32px;
    --sp-block: 20px;
  }
  
  .op-container {
    padding: 0 16px;
  }
  
  button,
  .btn,
  a.btn {
    font-size: 15px;  /* tránh dưới 16px trên iOS */
  }
}