/* ============================================================
   TƯƠNG TÁC MƯỢT — dùng chung cho cả 9 trang
   Mọi nút, liên kết, ô nhập, biểu tượng đều có phản hồi khi rê chuột,
   khi bấm giữ và khi chọn bằng bàn phím.
   ============================================================ */

/* --- Nền tảng: mọi thứ bấm được đều đổi trạng thái mượt --- */
a, button, input, select, textarea, summary, label, [role="button"], .item, .fdot {
  transition:
    color .3s ease,
    background-color .32s ease,
    background .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    opacity .3s ease,
    filter .3s ease,
    transform .38s cubic-bezier(.22, 1, .36, 1);
}
button, a, label, summary { -webkit-tap-highlight-color: transparent; }

/* --- Viền chọn bằng bàn phím: vàng kim, rất rõ --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Nút chính: nâng lên khi rê, lún xuống khi bấm, có vệt sáng quét --- */
.btn-cta, .nav__signup, .reg__btn, .up__cta, .acc__all {
  position: relative;
  overflow: hidden;
}
.btn-cta::after, .nav__signup::after, .reg__btn::after,
.up__cta::after, .acc__all::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@keyframes nutQuetSang {
  0%   { left: -70%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.btn-cta:hover::after, .nav__signup:hover::after, .reg__btn:hover:not(:disabled)::after,
.up__cta:hover::after, .acc__all:hover::after {
  animation: nutQuetSang .85s cubic-bezier(.25, .6, .3, 1);
}
.btn-cta:hover, .nav__signup:hover, .up__cta:hover, .acc__all:hover { transform: translateY(-2px) scale(1.03); }
.btn-cta:active, .nav__signup:active, .up__cta:active,
.acc__all:active, .reg__btn:active:not(:disabled) { transform: translateY(0) scale(.96); }
.reg__btn:hover:not(:disabled) { transform: translateY(-2px); }

/* --- Liên kết trên thanh menu: gạch chân chạy từ giữa ra --- */
.nav__link { position: relative; }
.nav__link:hover { color: #fff; }

/* --- Liên kết trong danh sách: mũi tên đẩy nhẹ --- */
.tm__toclist a:hover, .tm__back a:hover, .hd__back a:hover, .up__back a:hover {
  transform: translateX(4px);
}
.tm__toclist a, .tm__back a, .hd__back a, .up__back a { display: inline-flex; }

/* --- Nút tải ứng dụng --- */
.store-btn:hover { transform: translateY(-3px) scale(1.02); }
.store-btn:active { transform: translateY(0) scale(.98); }

/* --- Biểu tượng mạng xã hội --- */
.footer__social a:hover {
  transform: translateY(-4px) rotate(-6deg) scale(1.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(37, 99, 235, 0.5);
  border-color: var(--blue-pale);
}
.footer__social a:active { transform: translateY(-1px) scale(.96); }

/* --- Nút hamburger: 3 vạch xoay thành dấu X --- */
.hamburger span { transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .24s ease, background .24s ease; }
.hamburger:active { transform: scale(.92); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mục trong menu điện thoại --- */
.mobile-menu__link:hover, .mobile-menu__link:active { transform: translateX(5px); color: #fff; }

/* --- Nút đóng popup: xoay khi rê --- */
.modal__close:hover { transform: rotate(90deg) scale(1.12); color: #fff; }
.modal__close:active { transform: rotate(90deg) scale(.92); }

/* --- Ô nhập: viền sáng và nhích lên khi đang gõ --- */
.reg__input:focus, .reg__select:focus, .reg__textarea:focus,
.modal input:focus, .modal textarea:focus, .modal select:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), 0 8px 22px rgba(0, 0, 0, 0.35);
}
.reg__input:hover, .reg__select:hover, .reg__textarea:hover,
.modal input:hover, .modal textarea:hover { border-color: rgba(96, 165, 250, 0.5); }

/* --- Ô đánh dấu và nhãn bấm được --- */
label:hover { cursor: pointer; }

/* --- Chấm chỉ trang mục Tính năng --- */
.fdot:hover { transform: scale(1.35); background: var(--blue-pale); border-color: var(--blue-pale); }
.fdot.is-on:hover { transform: none; }

/* --- Thanh tiêu đề mục thu gọn: nhích sang khi rê --- */
.acc__btn:hover { transform: translateX(3px); }
.acc__btn:active { transform: translateX(3px) scale(.995); }

/* --- Máy cảm ứng: bỏ hiệu ứng rê chuột, chỉ giữ phản hồi khi chạm --- */
@media (hover: none) and (pointer: coarse) {
  .btn-cta:hover, .nav__signup:hover, .up__cta:hover, .acc__all:hover,
  .store-btn:hover, .acc__btn:hover, .footer__social a:hover { transform: none; }
  .btn-cta:hover::after, .nav__signup:hover::after, .reg__btn:hover::after,
  .up__cta:hover::after, .acc__all:hover::after { animation: none; }
  .btn-cta:active, .nav__signup:active, .reg__btn:active:not(:disabled),
  .up__cta:active, .store-btn:active, .acc__all:active { transform: scale(.97); }
}

/* --- Máy chọn giảm chuyển động --- */
@media (prefers-reduced-motion: reduce) {
  a, button, input, select, textarea, summary, label, [role="button"] { transition: none; }
  .btn-cta:hover, .nav__signup:hover, .up__cta:hover, .acc__all:hover,
  .store-btn:hover, .acc__btn:hover, .footer__social a:hover,
  .modal__close:hover, .fdot:hover, .mobile-menu__link:hover { transform: none; }
  .btn-cta:hover::after, .nav__signup:hover::after, .reg__btn:hover::after,
  .up__cta:hover::after, .acc__all:hover::after { animation: none; }
}