/* Lớp tăng cường — nạp SAU CSS của app, chỉ thêm hiệu ứng và sửa vùng chạm.
   Không đụng vào bố cục sẵn có để lần build lại app không bị lệch. */
:root{ --enh-ease: cubic-bezier(.16,1,.3,1); }

button, a, [role="button"], select, input, textarea{
  transition: background-color .18s var(--enh-ease), border-color .18s var(--enh-ease),
              color .18s var(--enh-ease), box-shadow .2s var(--enh-ease), transform .18s var(--enh-ease);
}
button:not(:disabled):hover, [role="button"]:not([aria-disabled="true"]):hover{ transform: translateY(-1px); }
button:not(:disabled):active, [role="button"]:active{ transform: translateY(0); }

/* Viền focus rõ ràng cho người dùng bàn phím (giữ nguyên khi dùng chuột) */
:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* Bảng và khối rộng phải cuộn trong khung của nó, không đẩy cả trang trượt ngang */
table{ max-width: 100%; }
pre, table{ overflow-x: auto; }
img, video, canvas, svg{ max-width: 100%; height: auto; }

@media (max-width: 820px){
  /* Vùng chạm tối thiểu 40px theo khuyến nghị khả dụng trên di động */
  button, [role="button"], select, a.btn{ min-height: 40px; }
  input, select, textarea{ font-size: 16px; } /* dưới 16px iOS tự phóng to trang khi focus */
  body{ overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  button:hover, [role="button"]:hover{ transform:none !important; }
}