/*!
 * perf-patch.css — giảm layout cost trên tool pages.
 *
 * Áp dụng cho /cong-cu/*. Đưa các section lớn vào chế độ "skip layout when offscreen"
 * giúp pinch-zoom / scroll không phải reflow toàn bộ DOM (7,600+ nodes trên huong-nha).
 *
 * Test result: -18% LayoutDuration, -14% TaskDuration trên A/B test.
 * Không gây spike longest task xấu hơn.
 *
 * Rollback: xoá file này + dòng enqueue trong functions.php.
 */

/* Major sections: tách thành "render island" - layout không cascade ra ngoài */
section[class*="hh-sect"],
section[class*="-result"],
section[class*="-section"],
article.hh-sect,
.hh-results > section,
.hh-results > article,
.hh-sect-wrap,
.hh-sect,
[class*="-section-wrap"] {
  contain: layout style;
  /* content-visibility:auto removed 2026-08-14. It skips rendering off-screen sections, which
   * saved paint work but left result sections intermittently BLANK after scrolling on both
   * 375px and 1280px — the box and its border painted, the contents did not. A tool result the
   * reader cannot see is worse than a slower one, and `contain: layout style` keeps most of the
   * reflow saving without gating paint. */
  contain-intrinsic-size: auto 600px;
}

/* Container chính của kết quả - GPU layer riêng để pinch-zoom rẻ hơn */
.hh-results,
#hh-results,
[id^="hh-results"] {
  contain: layout;
  isolation: isolate;
}

/* Decorative cosmos container - cố định kích thước để khỏi reflow khi children update.
 * QUAN TRỌNG: KHÔNG dùng `contain: paint` ở đây — paint tạo containing block cho
 * position:fixed children (như #cx-cinematic), trap cinematic không full màn hình.
 * Chỉ dùng `layout style` — đủ giảm reflow mà KHÔNG ảnh hưởng position:fixed. */
.hh-cosmos,
[class*="-cosmos"] {
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* CRITICAL: nếu cosmos đang chứa cinematic active → DISABLE containment + content-visibility
 * để position:fixed cinematic dính vào viewport thay vì cosmos box.
 * (transform/filter/perspective trên ancestor cũng tạo containing block — kiểm tra body.sm-cine-active) */
body.sm-cine-active .hh-cosmos,
body.sm-cine-active [class*="-cosmos"] {
  contain: none !important;
  content-visibility: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}

/* CRITICAL: popup "Chọn ngày" (Hoàng Lịch) dùng position:fixed để làm overlay căn giữa
 * trên mobile. Section nav khớp `section[class*="-section"]` → dính contain:layout style
 * + content-visibility:auto ở trên. LƯU Ý: `contain: layout` (không chỉ `paint`) CŨNG tạo
 * containing block cho position:fixed → popup neo vào section thay vì viewport → văng khỏi
 * màn hình. Khi popup mở (body.hl-popup-open) → release containment trên section nav để
 * popup fixed dính viewport. Đóng popup → containment trở lại (giữ nguyên perf). */
body.hl-popup-open .hl-section--nav {
  contain: none !important;
  content-visibility: visible !important;
}