/* ============================================================================
   MODULE HIỆU ỨNG BAY & TRƯỢT VẬT LÝ TÁI SỬ DỤNG (bo-hieu-ung-bay-truot.css)
   - Bố cục mặt bàn chuẩn xác: Tờ tiền khách đưa nằm trên mặt bàn gỗ trước mặt khách,
     TUYỆT ĐỐI KHÔNG đè lên cây quạt bàn xanh.
   - Hiệu ứng tờ tiền khách đưa trượt nhẹ trên mặt bàn về phía người chơi.
   - Hệ thống vật thể bay 60fps từ đúng vị trí thả tay tới thẳng đích (Tiền & Món hàng).
   ============================================================================ */

/* 1. BỐ CỤC MẶT BÀN QUẦY TẠP HÓA ĐỒNG BỘ 3 VÙNG RÕ RÀNG:
   - CỤM TRÁI ("⬇ MÌNH LẤY"): Xấp tiền khách đưa đặt bên trái (mình thu vào hộc)
   - CỤM GIỮA-PHẢI ("⬆ ĐƯA KHÁCH"): Vật phẩm + Tiền thối đặt chung 1 khay + Thanh "Bàn: số tiền"
   - GÓC PHẢI: Hũ Kẹo Oishi nắp đỏ */

/* Quạt bàn xanh đặt bên trái sát máy tính tiền */
#app .san-khau-quay .quat-ban-tren-quay-preview {
  left: 16.5% !important;
  bottom: 1.0% !important;
  z-index: 9 !important;
}

/* Khung mặt bàn trải từ bên phải quạt bàn tới sát mép phải quầy (2 cụm tiền Khách đưa & Tiền hàng đặt gần nhau ở trung tâm) */
#app .san-khau-quay .khu-tien-tren-mat-ban {
  position: absolute !important;
  left: 26.8% !important;
  right: 1.0% !important;
  bottom: 0.8% !important;
  height: auto !important;
  min-height: 52px;
  z-index: 12 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  pointer-events: none !important;
}

/* Vùng 1 — Cụm trái mặt bàn ("⬇ Lấy": Tiền khách đưa) */
#app .san-khau-quay .cum-trai-mat-ban-quay {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  pointer-events: none !important;
  z-index: 13 !important;
}

/* Vùng 2 — Cụm giữa mặt bàn ("⬆ Bàn": Vật phẩm + Tiền thối + Bàn: số tiền) đặt sát ngay bên phải cụm Lấy */
#app .san-khau-quay .vung-giua-dua-khach-mat-ban {
  position: relative !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  pointer-events: none !important;
  z-index: 13 !important;
}

#app .san-khau-quay .vung-giua-dua-khach-mat-ban:empty {
  display: none !important;
}

/* Vùng 3 — Cụm góc phải mặt bàn: Hũ Kẹo Oishi nắp đỏ */
#app .san-khau-quay .cum-phai-mat-ban-quay {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  z-index: 13 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  pointer-events: none !important;
}

/* CỤM TIỀN BÊN TRÁI ("⬇ Lấy: số tiền") — Đặt trực tiếp trên mặt gỗ KHÔNG KHUNG, chữ đồng bộ 100% với bên phải */
#app .san-khau-quay .cum-tien-khach-tren-ban {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: translate3d(0, 0, 0);
  z-index: 13 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: grab;
  will-change: transform, opacity;
  transition:
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.16s ease;
}

#app .san-khau-quay .cum-tien-khach-tren-ban:hover {
  transform: translate3d(0, -2px, 0) scale(1.04);
  filter: brightness(1.06);
}

#app .san-khau-quay .cum-tien-khach-tren-ban:active {
  cursor: grabbing;
  transform: translate3d(0, 0, 0) scale(0.96);
}

#app .san-khau-quay .cum-tien-khach-tren-ban.dang-keo-tha-nguon {
  opacity: 0.42 !important;
  transform: translate3d(0, 0, 0) scale(0.92) !important;
}

/* Kích thước tờ tiền khách đưa to rõ đặt trực tiếp trên mặt gỗ */
#app .san-khau-quay .xap-to-khach-dua-mat-ban {
  position: relative;
  width: 74px !important;
  height: 35px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app .san-khau-quay .to-khach-dua-item {
  width: 66px !important;
  height: 32px !important;
  left: 4px !important;
  bottom: 1px !important;
  filter: drop-shadow(0 2.5px 3.5px rgba(18, 9, 3, 0.76));
}

/* Nhãn "Khách đưa: số tiền" và "Tiền hàng: số tiền" đồng bộ 100% kích thước, font chữ, chiều cao & căn dòng */
#app .san-khau-quay :is(.nhan-tien-khach-tren-ban, .bang-tong-tien-hang-tren-ban) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 2px 6.5px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

#app .san-khau-quay .nhan-tien-khach-tren-ban {
  background: linear-gradient(180deg, #065f46 0%, #022c22 100%) !important;
  border: 1.5px solid #34d399;
  color: #ecfdf5;
  box-shadow:
    inset 0 1px 0 rgba(167, 243, 208, 0.36),
    0 2px 4px rgba(0, 0, 0, 0.55);
}

#app .san-khau-quay .bang-tong-tien-hang-tren-ban {
  background: linear-gradient(180deg, #8a3c14 0%, #4e1e07 100%) !important;
  border: 1.5px solid #fde047;
  color: #fffbeb;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 235, 0.38),
    0 2px 4px rgba(0, 0, 0, 0.55);
}

#app .san-khau-quay :is(.cum-chu-lay-so-tien, .cum-chu-ban-so-tien) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

#app .san-khau-quay :is(.nhan-chu-minh-lay, .nhan-chu-tong-ban) {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
}

#app .san-khau-quay .nhan-tien-khach-tren-ban .nhan-chu-minh-lay {
  color: #d1fae5;
  text-shadow: 0 1px 1px #022c22;
}

#app .san-khau-quay .bang-tong-tien-hang-tren-ban .nhan-chu-tong-ban {
  color: #fef3c7;
  text-shadow: 0 1px 1px #1c0902;
}

#app .san-khau-quay :is(.so-tien-minh-lay, .so-tien-tong-ban-cong-don) {
  display: inline-block !important;
  font-family: var(--font-body) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  color: #fde047;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
  white-space: nowrap !important;
}

/* Hiệu ứng 2 số tiền (Lấy & Bàn) chớp sáng nhẹ đồng bộ khi cần thối tiền */
@keyframes chopSangNheHaiSoTienCanThoi {
  0%,
  100% {
    color: #fde047;
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.88),
      0 0 2px rgba(253, 224, 71, 0.25);
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    color: #ffffff;
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.88),
      0 0 6px rgba(254, 240, 138, 0.95),
      0 0 12px rgba(250, 204, 21, 0.72);
    filter: brightness(1.14);
    transform: scale(1.045);
  }
}

@keyframes chopSangNheVienLayCanThoi {
  0%,
  100% {
    border-color: #34d399;
    box-shadow:
      inset 0 1px 0 rgba(167, 243, 208, 0.36),
      0 2px 4px rgba(0, 0, 0, 0.55);
  }
  50% {
    border-color: #a7f3d0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 0 8px rgba(52, 211, 153, 0.62),
      0 2px 4px rgba(0, 0, 0, 0.55);
  }
}

@keyframes chopSangNheVienBanCanThoi {
  0%,
  100% {
    border-color: #fde047;
    box-shadow:
      inset 0 1px 0 rgba(255, 251, 235, 0.38),
      0 2px 4px rgba(0, 0, 0, 0.55);
  }
  50% {
    border-color: #fef9c3;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 8px rgba(253, 224, 71, 0.68),
      0 2px 4px rgba(0, 0, 0, 0.55);
  }
}

#app .san-khau-quay :is(.so-tien-minh-lay, .so-tien-tong-ban-cong-don).chop-sang-can-thoi {
  animation: chopSangNheHaiSoTienCanThoi 1.25s ease-in-out infinite !important;
}

#app .san-khau-quay .nhan-tien-khach-tren-ban.dang-can-thoi-tien {
  animation: chopSangNheVienLayCanThoi 1.25s ease-in-out infinite !important;
}

#app .san-khau-quay .bang-tong-tien-hang-tren-ban.dang-can-thoi-tien {
  animation: chopSangNheVienBanCanThoi 1.25s ease-in-out infinite !important;
}

#app .san-khau-quay .bang-tong-tien-hang-tren-ban.vua-cong-them-mon.dang-can-thoi-tien {
  animation:
    nhipCongThemMonTrenBan 0.44s cubic-bezier(0.34, 1.56, 0.64, 1),
    chopSangNheVienBanCanThoi 1.25s ease-in-out 0.44s infinite !important;
}

/* CỤM GIỮA-PHẢI ("⬆ Bàn: số tiền"): KHÔNG KHUNG — Vật phẩm đặt đè lên tiền thối trực tiếp trên mặt bàn gỗ */
#app .san-khau-quay .khay-mon-tren-mat-ban-quay {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 13 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Cụm xấp tiền thối đặt ngay bên cạnh vật phẩm trong cùng khay Đưa Khách */
#app .san-khau-quay .cum-tien-thoi-tren-mat-ban {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 13 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Tắt animation tự nhảy mặc định của các tờ tiền cũ trên bàn để tránh nháy khi render lại */
#app .san-khau-quay .nut-to-tien-tren-mat-ban {
  animation: none !important;
}

/* 2. HIỆU ỨNG TỜ TIỀN KHÁCH ĐƯA TRƯỢT NHẸ TRÊN MẶT BÀN VỀ PHÍA MÌNH */

@keyframes truotNheToTienKhachVePhiaMinh {
  0% {
    opacity: 0;
    transform: translate3d(0, -22px, 0) scale(0.9);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, -17px, 0) scale(0.94);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes truotTungToTienTrenGo {
  0% {
    transform: translate3d(0, -10px, 0) rotate(calc(var(--goc-khach, -5deg) - 7deg)) scale(0.94);
  }
  70% {
    transform: translate3d(var(--lech-khach-x, 0px), calc(var(--lech-khach-y, 0px) - 1px), 0)
      rotate(calc(var(--goc-khach, -5deg) + 1deg)) scale(1);
  }
  100% {
    transform: translate3d(var(--lech-khach-x, 0px), var(--lech-khach-y, 0px), 0)
      rotate(var(--goc-khach, -5deg)) scale(1);
  }
}

@keyframes hienNhanTienKhachSauTruot {
  0%,
  30% {
    opacity: 0;
    transform: translateY(-4px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#app .san-khau-quay .cum-tien-khach-tren-ban.vua-truot-tien-khach {
  animation: truotNheToTienKhachVePhiaMinh 0.56s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#app .san-khau-quay .cum-tien-khach-tren-ban.vua-truot-tien-khach .to-khach-dua-item {
  animation: truotTungToTienTrenGo 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#app .san-khau-quay .cum-tien-khach-tren-ban.vua-truot-tien-khach .to-khach-dua-item.to-khach-idx-1 {
  animation-delay: 45ms;
}

#app .san-khau-quay .cum-tien-khach-tren-ban.vua-truot-tien-khach .to-khach-dua-item.to-khach-idx-2 {
  animation-delay: 90ms;
}

#app .san-khau-quay .cum-tien-khach-tren-ban.vua-truot-tien-khach .to-khach-dua-item.to-khach-idx-3 {
  animation-delay: 135ms;
}

#app .san-khau-quay .cum-tien-khach-tren-ban.vua-truot-tien-khach .nhan-tien-khach-tren-ban {
  animation: hienNhanTienKhachSauTruot 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 3. BÓNG KÉO THẢ TỜ TIỀN THẬT & VẬT PHẨM DƯỚI NGÓN TAY */

.khung-to-tien-bong-keo-that {
  width: 72px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  border: 1.5px solid #fef08a;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.48),
    0 0 0 1.5px rgba(43, 22, 8, 0.75);
  background: #14532d;
}

.khung-to-tien-bong-keo-that .svg-to-tien-ve-that {
  width: 100%;
  height: 100%;
}

/* 4. VẬT THỂ BAY MƯỢT 60FPS TỪ VỊ TRÍ THẢ TAY TỚI ĐÍCH (TIỀN & MÓN HÀNG) */

.vat-the-bay-tai-su-dung {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 99997;
  will-change: transform, opacity;
}

.vat-the-bay-tai-su-dung__bong {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 12px;
  transform: translate(-50%, 10px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 10, 4, 0.48) 0%, rgba(20, 10, 4, 0) 75%);
  filter: blur(1.5px);
  will-change: transform, opacity;
}

.vat-the-bay-tai-su-dung.loai-bay-to-tien .vat-the-bay-tai-su-dung__bong {
  width: 64px;
  height: 16px;
  transform: translate(-50%, 8px);
}

.vat-the-bay-tai-su-dung__than {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.vat-the-bay-tai-su-dung__to-tien {
  width: 68px;
  height: 34px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(254, 243, 199, 0.95);
  box-shadow:
    0 5px 12px rgba(15, 8, 3, 0.46),
    inset 0 0 0 0.8px rgba(43, 22, 8, 0.45);
}

.vat-the-bay-tai-su-dung__to-tien .svg-to-tien-ve-that {
  width: 100%;
  height: 100%;
}

.vat-the-bay-tai-su-dung__vat-pham {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 7px rgba(15, 8, 3, 0.42));
}

.nhan-phu-khi-cham-dich {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid #2b1d14;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #2b1406;
  font-family: var(--font-pixel);
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 #2b1d14, 0 3px 8px rgba(0, 0, 0, 0.32);
  pointer-events: none !important;
  z-index: 99998;
}

.nhan-phu-khi-cham-dich.kieu-cong-tien {
  border-color: #064e3b;
  background: linear-gradient(180deg, #dcfce7 0%, #4ade80 100%);
  color: #052e16;
  box-shadow: 0 2px 0 #064e3b, 0 3px 8px rgba(0, 0, 0, 0.32);
}

.nhan-phu-khi-cham-dich.kieu-cat-ve {
  border-color: #451a03;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
  color: #3b1806;
}

.dang-an-cho-bay-toi {
  opacity: 0 !important;
}

/* 5. HIỆU ỨNG TỜ VÉ SỐ KIẾN THIẾT BAY TỪ Ô CHAT VÀO TỜ VÉ SỐ CẠNH NÚT CÀI ĐẶT */

.khung-to-ve-so-bay-hud {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2.5px 6px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 62%, #f59e0b 100%);
  border: 2px solid #1e0b03;
  box-shadow:
    inset 0 0 0 1px #d97706,
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 3px 0 #1e0b03,
    0 5px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(245, 158, 11, 0.65);
  white-space: nowrap;
}

.khung-to-ve-so-bay-hud::before,
.khung-to-ve-so-bay-hud::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: #3b1706;
  border: 1.2px solid #1e0b03;
  transform: translateY(-50%);
}

.khung-to-ve-so-bay-hud::before {
  left: -3.5px;
}

.khung-to-ve-so-bay-hud::after {
  right: -3.5px;
}

.khung-to-ve-so-bay-hud .icon-ve-so-svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.khung-to-ve-so-bay-hud .so-ve-so-bay-hud {
  padding: 1px 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 1px solid #290702;
  color: #fffbeb;
  text-shadow: 0 1px 0 #290702;
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.2px;
}

.nut-icon-ngoai-hud.nut-ve-so-canh-cai-dat.vua-nhan-ve-so-bay {
  filter:
    drop-shadow(0 0 10px rgba(254, 240, 138, 1))
    drop-shadow(0 0 20px rgba(245, 158, 11, 0.95))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85)) !important;
  animation: naySangToVeSoHud 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes naySangToVeSoHud {
  0% {
    transform: scale(0.84) rotate(-10deg);
  }
  42% {
    transform: scale(1.26) rotate(6deg);
  }
  72% {
    transform: scale(0.95) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}