/**
 * Hiệu ứng chuyển động thống nhất — site công khai, panel khách, admin.
 * Load sau các stylesheet trang để chỉnh timing/easing không phá layout.
 */

:root {
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-dur: 0.28s;
  --ui-dur-fast: 0.17s;
  --ui-dur-slow: 0.42s;
}

/* Toast popup — dùng chung public/panel/admin */
.app-toast-stack {
  position: fixed;
  z-index: 9999;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  width: min(380px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.app-toast {
  pointer-events: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition:
    opacity var(--ui-dur) var(--ui-ease-out),
    transform var(--ui-dur) var(--ui-ease-out);
}

.app-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

.app-toast.is-on {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.app-toast.is-out {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
}

.app-toast-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.app-toast-ico {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.72);
}

.app-toast.is-ok .app-toast-ico {
  background: rgba(34, 197, 94, 0.14);
  color: rgba(19, 82, 0, 1);
}

.app-toast.is-err .app-toast-ico {
  background: rgba(255, 77, 79, 0.14);
  color: rgba(167, 7, 26, 1);
}

.app-toast.is-ok::before {
  background: rgba(34, 197, 94, 0.9);
}

.app-toast.is-err::before {
  background: rgba(255, 77, 79, 0.92);
}

.app-toast-text {
  font-size: 13.5px;
  color: rgba(0, 0, 0, 0.80);
  line-height: 1.35;
  word-break: break-word;
  padding-right: 4px;
}

.app-toast-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1;
  pointer-events: auto;
  transition: transform var(--ui-dur-fast) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease);
}

.app-toast-close:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: scale(1.04);
}

.app-toast-close:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-dur: 0.001s;
    --ui-dur-fast: 0.001s;
    --ui-dur-slow: 0.001s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}

@keyframes ui-content-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.public-site .main {
    animation: ui-content-rise var(--ui-dur-slow) var(--ui-ease-out) both;
  }

  body.admin-body .admin-tw-content {
    animation: ui-content-rise var(--ui-dur-slow) var(--ui-ease-out) both;
  }

  .tw-layout .tw-content {
    animation: ui-content-rise var(--ui-dur-slow) var(--ui-ease-out) both;
  }
}

/* Header / sticky */
.public-site .topbar {
  transition:
    box-shadow var(--ui-dur) var(--ui-ease),
    border-color var(--ui-dur) var(--ui-ease),
    background-color var(--ui-dur) var(--ui-ease);
}

.topbar-cluster,
.topbar-nav-wrap,
.topbar-session {
  transition: box-shadow var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease);
}

.public-site .nav a,
.public-site .topbar-nav-wrap .nav a,
.nav-guest-actions a,
.topbar-session-out {
  transition:
    transform var(--ui-dur-fast) var(--ui-ease),
    background-color var(--ui-dur) var(--ui-ease),
    color var(--ui-dur-fast) var(--ui-ease),
    border-color var(--ui-dur) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease);
}

/* Nút — hover nhẹ */
.btn:not(:disabled),
.btn-sm:not(:disabled),
.btn-ghost:not(:disabled),
.btn-danger:not(:disabled),
.admin-btn:not(:disabled),
.pp-btn-primary,
.pp-btn-ghost,
.pp-dash-cta-new,
.adm-head-refresh,
.form-actions .btn,
button[type="submit"]:not(.nav-burger):not(:disabled) {
  transition:
    transform var(--ui-dur-fast) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease),
    background-color var(--ui-dur) var(--ui-ease),
    border-color var(--ui-dur) var(--ui-ease),
    color var(--ui-dur-fast) var(--ui-ease),
    filter var(--ui-dur) var(--ui-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):hover:not(:active),
  .btn-sm:not(:disabled):hover:not(:active),
  .btn-ghost:not(:disabled):hover:not(:active),
  .btn-danger:not(:disabled):hover:not(:active),
  .admin-btn:not(:disabled):hover:not(:active),
  .pp-btn-primary:hover:not(:active),
  .pp-btn-ghost:hover:not(:active),
  .btn-home-main:hover:not(:active) {
    transform: translateY(-2px);
  }

  .btn:not(:disabled):active,
  .btn-sm:not(:disabled):active,
  .btn-ghost:not(:disabled):active,
  .btn-danger:not(:disabled):active,
  .admin-btn:active,
  .pp-btn-primary:active,
  .pp-btn-ghost:active {
    transform: translateY(0) scale(0.985);
  }
}

.btn-home-main,
.btn-home-secondary {
  transition:
    transform var(--ui-dur-fast) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease),
    filter var(--ui-dur) var(--ui-ease) !important;
}

/* Sidebar & menu panel / admin */
.dvt-menu-item,
.admin-nav-root .admin-nav-group-body .dvt-menu-item,
.sidebar-brand,
.sidebar-footer a,
.admin-sidebar-btn,
.dvt-contact-fab,
.dvt-logout {
  transition:
    background-color var(--ui-dur) var(--ui-ease),
    color var(--ui-dur-fast) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease),
    transform var(--ui-dur-fast) var(--ui-ease),
    opacity var(--ui-dur-fast) var(--ui-ease);
}

.admin-nav-root .admin-nav-group-summary {
  transition:
    background-color var(--ui-dur) var(--ui-ease),
    color var(--ui-dur-fast) var(--ui-ease);
}

.admin-nav-root .admin-nav-group-chevron,
.user-nav-group-chevron {
  transition: transform 0.3s var(--ui-ease);
}

.user-nav-group-summary {
  transition: background-color var(--ui-dur) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .dvt-menu-item:hover:not(.is-active),
  .admin-nav-root .admin-nav-group-body .dvt-menu-item:hover:not(.is-active) {
    transform: translateX(2px);
  }

  .dvt-contact-fab:hover {
    transform: scale(1.06);
  }
}

.dvt-sidebar-overlay {
  transition: opacity var(--ui-dur) var(--ui-ease);
}

.public-site .site-nav-overlay {
  transition: opacity var(--ui-dur) var(--ui-ease);
}

.topbar-inner .topbar-cluster {
  transition: transform var(--ui-dur-slow) var(--ui-ease-out);
}

.tw-header.ant-layout-header,
.dvt-user-pill,
.header-balance-dvt {
  transition: box-shadow var(--ui-dur) var(--ui-ease), background-color var(--ui-dur) var(--ui-ease);
}

/* Thẻ & bảng */
.admin-card,
.pp-table-card,
.home-ed-bento-item,
.home-ed-panel-frame,
.home-ed-flow-shell,
.home-ed-feat,
.home-ed-steps li,
.card,
.auth-card,
.pp-dash-stat {
  transition:
    transform var(--ui-dur) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease),
    border-color var(--ui-dur) var(--ui-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .home-ed-bento-item:hover {
    transform: translateY(-4px);
  }

  .home-ed-feat:hover {
    transform: translateY(-2px);
  }

  .pp-dash-stat:hover {
    transform: translateY(-2px);
  }
}

.admin-table tbody tr,
.pp-table tbody tr,
.adm-dash-table tbody tr,
.adm-orders-table tbody tr {
  transition: background-color var(--ui-dur-fast) var(--ui-ease);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  transition:
    border-color var(--ui-dur) var(--ui-ease),
    box-shadow var(--ui-dur) var(--ui-ease),
    background-color var(--ui-dur) var(--ui-ease);
}

/* Landmark admin: phần nội dung chính */
#admin-main-content {
  scroll-padding-top: 1rem;
}