/* ===== Custom Cursor (Haravan) - Liquid Glass ===== */
:root{
  --aec-blue: #1c75bd;
  --aec-blue-2: rgba(28,117,189,.22);        /* glow */
  --aec-blue-border: rgba(28,117,189,.75);   /* viền */
  --aec-ripple: rgba(28,117,189,.35);        /* ripple */
}

html.has-am-cursor,
html.has-am-cursor body{
  cursor: auto !important; /* GIỮ cursor thật */
}

/* vòng lớn (LIQUID GLASS) */
.am-cursor{
  position: fixed;
  top: 0; left: 0;

  width: 14px;
  height: 14px;
  border-radius: 999px;

  /* viền kính */
  border: 1.6px solid rgba(255,255,255,.55);

  /* nền liquid glass */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.38),
    rgba(28,117,189,.12),
    rgba(255,255,255,.08)
  );

  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);

  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  opacity: 0;

  transition: opacity .2s ease, transform .15s ease, background .15s ease, border-color .15s ease;
  will-change: transform;

  /* glow + inner shine */
  box-shadow:
    0 0 14px rgba(28,117,189,.22),
    inset 0 0 12px rgba(255,255,255,.25);
}

/* highlight bóng kính */
.am-cursor::before{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius:999px;

  background: radial-gradient(circle at 30% 25%,
    rgba(255,255,255,.85),
    rgba(255,255,255,.12) 55%,
    rgba(255,255,255,0) 100%
  );

  opacity: .95;
  pointer-events:none;
}

/* Ripple lan (ĐẬM + NÉT + LAN TO) */
.am-cursor::after{
  content:"";
  position:absolute;
  inset:-8px;                 
  border-radius:999px;

  background: radial-gradient(circle,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.35) 25%,
    rgba(28,117,189,.22) 55%,
    rgba(28,117,189,.10) 72%,
    rgba(28,117,189,0) 100%
  );

  border: 2px solid rgba(28,117,189,.55);

  box-shadow:
    0 0 18px rgba(28,117,189,.30),
    0 0 10px rgba(255,255,255,.55) inset,
    0 0 0 2px rgba(255,255,255,.55);

  opacity: 0;
  transform: scale(0.65);
  pointer-events:none;
}



/* chấm nhỏ (LIQUID GLASS) */
.am-cursor-dot{
  position: fixed;
  top: 0; left: 0;

  width: 7px;
  height: 7px;
  border-radius: 999px;

  /* viền kính */
  border: 1.2px solid rgba(255,255,255,.65);

  /* nền liquid glass */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.75),
    rgba(28,117,189,.35),
    rgba(255,255,255,.18)
  );

  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);

  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  opacity: 0;

  transition: opacity .2s ease, transform .08s ease;
  will-change: transform;

  box-shadow:
    0 0 10px rgba(28,117,189,.28),
    inset 0 0 6px rgba(255,255,255,.35);
}

/* highlight bóng kính cho dot */
.am-cursor-dot::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius:999px;

  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.95),
    rgba(255,255,255,.12) 60%,
    rgba(255,255,255,0) 100%
  );

  opacity: .9;
  pointer-events:none;
}

/* Hover state */
html.has-am-cursor .am-cursor.is-hover{
  transform: translate(-50%, -50%) scale(1.28);

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.48),
    rgba(28,117,189,.18),
    rgba(255,255,255,.10)
  );

  border-color: rgba(255,255,255,.75);

  box-shadow:
    0 0 18px rgba(28,117,189,.32),
    inset 0 0 14px rgba(255,255,255,.35);
}

html.has-am-cursor .am-cursor.is-hover::after{
  opacity: 1;
  animation: aecRipple 1.15s cubic-bezier(.22,.75,.25,1) infinite;
}

html.has-am-cursor .am-cursor-dot.is-hover{
  transform: translate(-50%, -50%) scale(0.65);
}

/* Press state */
html.has-am-cursor .am-cursor.is-down{
  transform: translate(-50%, -50%) scale(1.1);
}

html.has-am-cursor .am-cursor-dot.is-down{
  transform: translate(-50%, -50%) scale(1.15);
}

/* Mobile: tắt cursor custom */
@media (hover: none), (pointer: coarse){
  html.has-am-cursor, html.has-am-cursor body{ cursor:auto !important; }
  .am-cursor, .am-cursor-dot{ display:none !important; }
}

/* Ripple animation: đậm đầu – lan xa – mờ dần */
@keyframes aecRipple{
  0%   { transform: scale(0.55); opacity: .75; }
  60%  { transform: scale(1.65); opacity: .22; }
  100% { transform: scale(1.95); opacity: 0; }
}
/* --- thêm vào CSS hiện tại (đặt cùng file) --- */
.am-cursor.am-hidden-selection,
.am-cursor-dot.am-hidden-selection{
  /* Ẩn hoàn toàn ngay lập tức khi đang chọn (không để che chữ) */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
  visibility: hidden !important;
}