/* ==========================================================================
   ĂN MỪNG 3 TẦNG — TC9 (tờ giao Não Tập Đoàn 01/08/2026)
   --------------------------------------------------------------------------
   T1 tick nở ≤0,4s · T2 thẻ mừng ≤1,2s · T3 pháo giấy ≤1,5s.
   Mọi màu gọi biến CSS (TC19.1). Không mã HEX nào trong file này.
   Hiệu ứng KHÔNG chặn thao tác: mọi lớp phủ đều pointer-events:none,
   riêng nút trong thẻ mừng bật lại (auto) vì nó là chỗ duy nhất được bấm.
   ========================================================================== */

/* ---------- T1: tick nở gắn vào toast sẵn có ---------- */
.am-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px;
  border-radius: 50%; background: var(--card); color: var(--green);
  animation: am-no .35s ease-out;
}
.am-tick i { font-size: 15px; }
@keyframes am-no {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- T2: thẻ mừng ---------- */
.am-the {
  /* Căn giữa bằng left:0+right:0+margin auto — translateX(-50%) làm trang nở ngang
     (đo 03/08/2026, cùng bệnh với .tabbar trong style.css). */
  position: fixed; left: 0; right: 0; bottom: 128px; margin-inline: auto; width: fit-content;
  z-index: 61; max-width: 86%; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: 16px;
  background: var(--card); color: var(--text);
  border: 2px solid var(--blue-100);
  box-shadow: 0 6px 20px rgba(6, 42, 30, .18);
  font-size: 16px; font-weight: 600; line-height: 1.35;
  animation: am-len .4s ease-out;
}
.am-the .am-hinh {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue-800); font-size: 20px;
}
.am-the .am-nut {
  pointer-events: auto; flex: none; cursor: pointer;
  border: none; border-radius: 10px; padding: 9px 14px;
  background: var(--blue-800); color: var(--card);
  font-family: inherit; font-size: 16px; font-weight: 700;
}
.am-the.am-tan { opacity: 0; transition: opacity .3s; }
@keyframes am-len {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---------- T3: pháo giấy ---------- */
#am-phao {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
}

/* ---------- Người say chuyển động: bỏ động, giữ chữ (luật 7) ---------- */
@media (prefers-reduced-motion: reduce) {
  .am-tick, .am-the { animation: none; }
}