/* 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ở — gấp 2x hiện tại để tạo phân đoạn rõ */
  --sp-section: clamp(32px, 5vw, 64px);
  --sp-block: clamp(20px, 3vw, 40px);
  --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;
}

/* Nhịp thở section — giảm stacking cho các section liền nhau */
main.section section.project-block {
  padding: var(--sp-section) 0;
}

main.section section.project-block + section.project-block {
  padding-top: 0;
  margin-top: var(--sp-section);
}

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

/* 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 */
  }
}