/* ============================================================
   CORE VENTURES — CON TRỎ (bản 3.0, 2026-08-15)
   ============================================================

   LỊCH SỬ NGẮN
   Bản 1  — vẽ vòng ngắm bằng DOM + GSAP, ẩn con trỏ hệ thống. Bỏ vì LUÔN TRỄ
            (quickTo duration .15), giòn (JS lỗi = mất con trỏ), và nuốt luôn
            con trỏ chữ I của form.
   Bản 2.x — quay về `cursor: url(<svg>)` thuần CSS. Ổn định tuyệt đối nhưng
            hoàn toàn tĩnh: chỉ đổi màu, không có phản hồi nào.
   Bản 3.0 — GIỮ NGUYÊN nền tảng CSS của 2.2 làm lớp đáy, rồi CHỒNG THÊM một
            lớp JS tuỳ chọn cho phần chuyển động.

   KIẾN TRÚC HAI LỚP — đọc kỹ trước khi sửa
   ┌─ LỚP ĐÁY (file này, thuần CSS) ─────────────────────────────────────┐
   │ `cursor: url(<svg data-uri>)`. Hệ điều hành vẽ → trễ bằng 0, không   │
   │ phụ thuộc JS. Mọi khai báo kết bằng từ khoá dự phòng (auto/pointer/  │
   │ text) nên KHÔNG BAO GIỜ mất con trỏ. Đây là thứ người dùng thấy khi  │
   │ JS chết, khi bật "giảm chuyển động", hoặc trên thiết bị cảm ứng.     │
   └─────────────────────────────────────────────────────────────────────┘
   ┌─ LỚP TRÊN (cursor.js, tuỳ chọn) ────────────────────────────────────┐
   │ Chỉ bật khi: có chuột thật, KHÔNG bật giảm chuyển động, và JS chạy   │
   │ được. Khi bật, cursor.js gắn `html.cur-js` → lớp đáy tự tắt, thay    │
   │ bằng một SVG DOM nghiêng nhẹ theo hướng tay + vòng azure khi rê qua  │
   │ phần tử bấm được + thu nhỏ nhẹ khi nhấn giữ chuột.                   │
   │ Mũi tên DOM đặt đúng toạ độ chuột mỗi frame, KHÔNG nội suy → vẫn 0   │
   │ độ trễ. Chỉ vòng azure và độ nghiêng mới có quán tính.               │
   └─────────────────────────────────────────────────────────────────────┘

   HÌNH: "cánh diều" — thân tam giác lõm đáy, nửa trái tô azure làm điểm
   nhấn thương hiệu. ĐỈNH NẰM Ở GÓC TRÊN-TRÁI, thân chếch xuống dưới-phải
   khoảng 40°, đúng quy ước con trỏ của mọi hệ điều hành: người dùng đọc vị
   trí trỏ ở ĐỈNH, và họ chỉ tìm đỉnh ở góc trên-trái. Bản dựng đầu tiên để
   hình chĩa thẳng lên trên (đối xứng trục dọc) nên trông như một cánh buồm
   dựng đứng chứ không ra con trỏ — hình chỉ "đọc" được khi nó xoay theo
   hướng di chuyển, mà xoay thì đã bị loại. Ô 32px, viền 2.4px màu ĐỐI LẬP
   với thân: đi ngang nút
   navy trên nền trắng thì viền trắng bắt sáng, đi ngang nền navy thì thân
   trắng bắt sáng. Không dùng `filter: drop-shadow` vì filter trong SVG
   data-URI của thuộc tính `cursor` không đáng tin và hỏng thì hỏng im lặng.

   NỀN TỐI lấy theo class sẵn có: `.on-dark` (quy ước design-system),
   `.bg-navy`, `.bg-navy-2`, `.page-hero`, `.hero`, `.art-strip`, `.nw-mast`,
   `.site-footer`. Section tối mới chỉ cần gắn `on-dark` là con trỏ tự đúng.
   ============================================================ */

@media (pointer: fine) {

  /* ══ LỚP ĐÁY — thuần CSS ═══════════════════════════════════════════ */

  /* Nền sáng: thân navy, viền trắng, đuôi azure */
  html:not(.cur-js), html:not(.cur-js) body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M4%2C3 L25.7%2C14.8 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%23001A3D%22 stroke=%22%23FFFFFF%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22 paint-order=%22stroke%22/%3E%3Cpath d=%22M4%2C3 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%233E8FE6%22/%3E%3C/svg%3E") 4 3, auto;
  }

  /* Bấm được: đổi MÀU chứ không đổi HÌNH. Dự phòng `pointer`. */
  html:not(.cur-js) :is(a, button, [role="button"], summary, label[for],
  input[type="submit"], input[type="button"], input[type="checkbox"],
  input[type="radio"], select, .nw-tab, .filter-pill) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M4%2C3 L25.7%2C14.8 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%232456C0%22 stroke=%22%23FFFFFF%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22 paint-order=%22stroke%22/%3E%3Cpath d=%22M4%2C3 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%23001A3D%22/%3E%3C/svg%3E") 4 3, pointer;
  }

  /* Nền tối: đảo thành thân trắng, viền navy */
  html:not(.cur-js) :is(.on-dark, .bg-navy, .bg-navy-2, .page-hero,
  .art-strip, .hero, .nw-mast, .site-footer) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M4%2C3 L25.7%2C14.8 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%23FFFFFF%22 stroke=%22%23001A3D%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22 paint-order=%22stroke%22/%3E%3Cpath d=%22M4%2C3 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%233E8FE6%22/%3E%3C/svg%3E") 4 3, auto;
  }

  /* `cursor` có kế thừa, nhưng selector phần tử bấm được ở trên khớp TRỰC
     TIẾP nên thắng kế thừa → link trong vùng tối sẽ ăn nhầm con trỏ nền
     sáng. Vì vậy cần rule riêng, độ ưu tiên cao hơn. */
  html:not(.cur-js) :is(.on-dark, .bg-navy, .bg-navy-2, .page-hero,
  .art-strip, .hero, .nw-mast, .site-footer)
  :is(a, button, [role="button"], summary, label[for], select, .nw-tab) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M4%2C3 L25.7%2C14.8 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%23FFFFFF%22 stroke=%22%23001A3D%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22 paint-order=%22stroke%22/%3E%3Cpath d=%22M4%2C3 L15.6%2C16.8 L11.9%2C26.4 Z%22 fill=%22%232456C0%22/%3E%3C/svg%3E") 4 3, pointer;
  }

  /* ══ LỚP TRÊN — chỉ sống khi cursor.js bật `html.cur-js` ═══════════ */

  /* Ẩn con trỏ hệ thống, TRỪ ô nhập liệu: con trỏ chữ I là quy ước phải
     giữ — nó cho biết chỗ nào gõ được và giúp đặt điểm chèn chính xác.
     Bản 1 đã ghi đè cả đây và làm form mất tín hiệu đó. */
  .cur-js, .cur-js body,
  .cur-js :is(a, button, [role="button"], summary, label[for], select,
              .nw-tab, .filter-pill, input[type="submit"],
              input[type="button"], input[type="checkbox"],
              input[type="radio"]) { cursor: none; }

  .cur-js :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea) {
    cursor: text;
  }

  /* Sân khấu: fixed, không nhận chuột, nằm trên mọi thứ. */
  #cv-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 2147483000;
  }

  #cv-ptr, #cv-ring {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    transition: opacity .18s linear;
  }

  /* `cur-live` được gắn sau lần rê chuột đầu tiên — trước đó không vẽ gì,
     tránh một mũi tên "ma" đứng giữa màn hình khi trang vừa tải. */
  .cur-live #cv-ptr, .cur-live #cv-ring { opacity: 1; }
  /* Trên ô nhập liệu thì trả sân khấu về cho con trỏ chữ I của hệ thống. */
  .cur-text #cv-ptr, .cur-text #cv-ring { opacity: 0 !important; }

  #cv-ptr {
    width: 32px; height: 32px;
    margin: -3px 0 0 -4px;    /* đưa đỉnh mũi tên (4,3) về đúng toạ độ chuột */
    transform-origin: 4px 3px;
  }
  #cv-ptr .body {
    fill: #001A3D; stroke: #FFFFFF; stroke-width: 2.4;
    stroke-linejoin: round; paint-order: stroke;
    transition: fill .16s ease, stroke .16s ease;
  }
  #cv-ptr .tail { fill: #3E8FE6; stroke: none; transition: fill .16s ease; }

  .cur-inv #cv-ptr .body { fill: #FFFFFF; stroke: #001A3D; }
  .cur-hot #cv-ptr .body { fill: #2456C0; }
  .cur-hot #cv-ptr .tail { fill: #FFFFFF; }
  .cur-inv.cur-hot #cv-ptr .body { fill: #3E8FE6; stroke: #001A3D; }
  .cur-inv.cur-hot #cv-ptr .tail { fill: #001A3D; }

  /* Vòng azure: chỉ hiện khi rê qua phần tử bấm được. Đây là lớp DUY NHẤT
     được phép có quán tính — nó là trang trí, không phải dụng cụ chỉ điểm. */
  #cv-ring {
    width: 42px; height: 42px; margin: -21px 0 0 -21px;
    border: 1.5px solid #3E8FE6; border-radius: 50%;
    opacity: 0;
  }
  .cur-live.cur-hot #cv-ring { opacity: .85; }

  /* Nhấn giữ chuột: thu nhỏ mũi tên một chút rồi bật lại. Đây là phản hồi
     duy nhất khi bấm — thay cho vòng sóng lan của bản thử nghiệm, vốn vẽ ra
     một hình TO HƠN CẢ CON TRỎ ở đúng chỗ mắt đang nhìn, và bắn ra ở mọi cú
     bấm kể cả khi bấm vào chỗ trống. Thu nhỏ thì giống hành vi vật lý của
     một cái nút bị ấn, mắt hiểu ngay mà không cần chú ý. */
  /* Hệ số thu nhỏ do cursor.js nội suy và ghi thẳng vào transform —
     KHÔNG đặt `transform` cho #cv-ptr ở đây, sẽ đá nhau với JS. */

  /* ── Vô hiệu hoá ────────────────────────────────────────────────── */
  [disabled], [aria-disabled="true"] { cursor: not-allowed; }
}

/* Thiết bị cảm ứng: không có con trỏ nào để tuỳ biến. Sân khấu vẫn có thể
   đã được chèn nếu máy có cả chuột lẫn cảm ứng, nên ẩn cứng ở đây. */
@media (pointer: coarse) {
  #cv-layer { display: none; }
}