/* ================= HỆ THỐNG NÚT BẤM 3D TACTILE & HIỆU ỨNG TRỰC QUAN (GAME JUICE) ================= */
/* Thiết kế theo phong cách Cozy 2D Pixel Art Tạp Hóa Việt Nam:
   - Nút bấm có độ dày 3D vật lý, viền bắt sáng trên, lún xuống & nảy đàn hồi (Squash & Stretch)
   - Lớp phủ hiệu ứng toàn cục (#lop-hieu-ung-juice) tách biệt hoàn toàn với chu kỳ render của #app
   - Giữ nguyên 100% kích thước khung mobile 390×740 và chiều cao cố định của kệ/ngăn kéo */

/* 1. LỚP PHỦ HIỆU ỨNG TOÀN CỤC (KHÔNG CHẶN CLICK) */
.lop-hieu-ung-juice {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none !important;
  overflow: hidden;
  z-index: 99999;
}

.lop-hieu-ung-juice * {
  pointer-events: none !important;
  user-select: none;
}

/* 2. THIẾT KẾ NÚT BẤM 3D TACTILE COZY PIXEL TOÀN GIAO DIỆN */

/* Hiệu ứng chung cho mọi nút bấm có thể tương tác */
button:not(:disabled),
.o-hang-ke,
.cuon-so-no-that-trong-hoc,
.quat-ban-tuong-tac,
.doi-tuong-khan-cap {
  transition:
    transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.12s ease,
    filter 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease;
  will-change: transform;
}

/* Micro-interaction: Squash & Stretch khi nhấp vào bất kỳ nút hay ô hàng nào
   (Dùng thuộc tính độc lập `scale` thay vì ghi đè `transform` để không bao giờ làm lệch vị trí các nút dùng translateX/translate/rotate) */
@keyframes nutSquashStretch {
  0% {
    scale: 1 1;
  }
  28% {
    scale: 0.94 0.89;
    filter: brightness(1.12);
  }
  68% {
    scale: 1.04 1.03;
    filter: brightness(1.06);
  }
  100% {
    scale: 1 1;
    filter: brightness(1);
  }
}

.nut-dang-nhap-juice {
  animation: nutSquashStretch 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Hiệu ứng lắc/nảy icon bên trong nút khi chạm */
@keyframes iconWiggleBounce {
  0% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.2) rotate(-10deg);
  }
  65% {
    transform: scale(1.14) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.icon-nhay-juice {
  animation: iconWiggleBounce 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Nút Icon Bánh Răng Cài Đặt xoay tròn khi bấm */
@keyframes xoayBanhRangCaiDat {
  0% {
    transform: scale(0.9) rotate(0deg);
  }
  60% {
    transform: scale(1.12) rotate(115deg);
  }
  100% {
    transform: scale(1) rotate(90deg);
  }
}

.nut-cai-dat-goc-phai.nut-dang-nhap-juice .khung-dohoa,
.nut-cai-dat-goc-phai.nut-dang-nhap-juice .anh-sprite-svg {
  animation: xoayBanhRangCaiDat 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Nâng cấp Nút Nhỏ & Nút Hành Động Chính (Modal, Shop, Chốt Sổ) */
.nut-nho {
  background: linear-gradient(180deg, #fff1a8 0%, #f7c948 52%, #e09f1f 100%);
  color: #3b1c0a;
  border: 2px solid #2b1d14;
  border-radius: 8px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(120, 53, 15, 0.35),
    0 2.5px 0 #2b1d14,
    0 4px 6px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 0 rgba(255, 250, 220, 0.65);
}

.nut-nho:hover:not(:disabled) {
  filter: brightness(1.06);
}

.nut-nho:active:not(:disabled) {
  transform: translateY(2px) scale(0.96);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.25),
    0 0.5px 0 #2b1d14;
}

/* Nút Chính To (Mở kệ, Sang ngày mới, Bắt đầu...) */
.nut-to-chinh {
  position: relative;
  overflow: hidden;
  border: 2px solid #2b1d14;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 3px 0 #2b1d14,
    0 5px 10px rgba(0, 0, 0, 0.28);
}

.nut-to-chinh:active:not(:disabled) {
  transform: translateY(2.5px) scale(0.97);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 1px 0 #2b1d14;
}

/* Vệt sáng lấp lánh quét ngang (Glossy Sheen) cho các nút CTA quan trọng */
@keyframes vetSangQuetNgangNut {
  0%,
  72% {
    transform: translateX(-140%) skewX(-22deg);
  }
  100% {
    transform: translateX(240%) skewX(-22deg);
  }
}

.nut-to-chinh::after,
.ngan-keo-gon__mo-cua::after,
.ngan-keo-gon__thu:not(:disabled)::after,
.nut-giao-tien-hoc-trai.san-sang-thu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-140%) skewX(-22deg);
  animation: vetSangQuetNgangNut 3.2s infinite ease-in-out;
  pointer-events: none;
}

/* Nâng cấp Nút HUD Vùng Xanh (Kệ Hàng, Ngoài Phố, Ngày/Cấp, Đồng Hồ) */
#app .vung-xanh-duong .chi-so-nut-cap {
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 194, 0.45),
    0 2px 0 #1c1008;
}

#app .vung-xanh-duong .chi-so-nut-cap:active {
  transform: translateY(1.5px) scale(0.96);
  box-shadow: 0 0.5px 0 #1c1008;
}

#app .vung-xanh-duong .nut-vung-xanh {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 252, 220, 0.6),
    inset 0 -1px 0 rgba(67, 30, 8, 0.35),
    0 2.5px 0 #231309,
    0 3px 5px rgba(0, 0, 0, 0.25);
}

#app .vung-xanh-duong .nut-vung-xanh:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 0.5px 0 #231309;
}

/* Nâng cấp 2 Tab Quầy (Vật phẩm / Tiền & sổ) kiểu Thẻ Gỗ Cài Đồng Thau */
#app .thanh-tab-quay .tab-quay {
  position: relative;
  overflow: hidden;
  border: 1.5px solid #8c6230;
  background: linear-gradient(180deg, #4f3521 0%, #362214 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 179, 0.25),
    0 2px 0 #22140b;
  font-weight: 800;
  letter-spacing: 0.1px;
}

#app .thanh-tab-quay .tab-quay--dang-mo {
  border-color: #ffe49e;
  background: linear-gradient(180deg, #ffefc2 0%, #f3c66f 52%, #d4943a 100%);
  color: #361f0d;
  box-shadow:
    inset 0 1.5px 0 #ffffff,
    inset 0 -1px 0 rgba(120, 62, 14, 0.35),
    0 2px 0 #2b180a,
    0 0 8px rgba(255, 214, 102, 0.38);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

@keyframes nhipTimTabSanSang {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
  }
}

#app .tab-quay__nhan--san-sang {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid #a7f3d0;
  font-weight: 800;
  animation: nhipTimTabSanSang 1.25s infinite ease-in-out;
}

/* Nâng cấp 6 Nút Nhóm Kệ Hàng (.nut-nhom-hang) */
#app .man-hinh-quay-gon .vung-do-goi-hang .nut-nhom-hang {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 0 #26150b;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

#app .man-hinh-quay-gon .vung-do-goi-hang .nut-nhom-hang.dang-chon {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8),
    0 2px 0 #26150b,
    0 0 0 1.5px #ffe082 !important;
  filter: brightness(1.05);
}

@keyframes nhapNhayNhomCoMonCan {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 2px 0 #26150b,
      0 0 0 1px #fbbf24;
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 2px 0 #26150b,
      0 0 0 2px #fde047,
      0 0 8px rgba(251, 191, 36, 0.65);
  }
}

#app .man-hinh-quay-gon .vung-do-goi-hang .nut-nhom-hang.nhom-co-mon-can {
  animation: nhapNhayNhomCoMonCan 1.2s infinite ease-in-out !important;
}

/* Nâng cấp 5 Ô Gói Hàng Trên Kệ (.o-hang-ke) */
#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    0 2.5px 0 rgba(43, 29, 20, 0.88);
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke:active {
  transform: translateY(2px) scale(0.95) !important;
}

@keyframes monKhachDangCanPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1.5px #10b981,
      0 2.5px 0 #065f46,
      0 0 6px rgba(16, 185, 129, 0.45);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px #34d399,
      0 2.5px 0 #065f46,
      0 0 12px rgba(52, 211, 153, 0.8);
  }
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke.khach-dang-can {
  border-color: #059669 !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
  animation: monKhachDangCanPulse 1.15s infinite ease-in-out !important;
}

/* Nâng cấp Các Nút Trong Ngăn Kéo Gọn (.ngan-keo-gon__nut) */
.ngan-keo-gon .ngan-keo-gon__nut {
  position: relative;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 214, 0.65),
    0 2px 0 #2b180c;
}

.ngan-keo-gon .ngan-keo-gon__nut:not(:disabled):active {
  transform: translateY(1.5px) scale(0.95);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    0 0.5px 0 #2b180c;
}

.ngan-keo-gon .ngan-keo-gon__thu:not(:disabled),
.ngan-keo-gon .ngan-keo-gon__mo-cua:not(:disabled) {
  overflow: hidden;
  border: 1.5px solid #2b180c;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #d97706 100%);
  color: #2b1406;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1.5px 0 #fffbeb,
    0 2px 0 #2b180c;
}

.ngan-keo-gon .ngan-keo-gon__keo:not(:disabled) {
  border: 1.5px solid #451a03;
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 60%, #be123c 100%);
  color: #fffbeb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 0 #3b0a14;
}

.ngan-keo-gon .ngan-keo-gon__hoan-tac:not(:disabled),
.ngan-keo-gon .ngan-keo-gon__xoa:not(:disabled) {
  background: linear-gradient(180deg, #f3dec0 0%, #cfa872 100%);
  color: #362010;
  border: 1.5px solid #362010;
}

/* 3. HIỆU ỨNG CHẠM MÀN HÌNH MOBILE TOÀN CỤC (TOUCH RIPPLE & SPARKLES) */

.cum-cham-mobile {
  position: fixed;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

@keyframes vongSongChamNoRong {
  0% {
    width: 6px;
    height: 6px;
    opacity: 0.92;
    border-width: 2.5px;
  }
  100% {
    width: 44px;
    height: 44px;
    opacity: 0;
    border-width: 1px;
  }
}

.vong-song-cham {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #ffe082;
  box-shadow: 0 0 8px rgba(255, 214, 102, 0.55);
  animation: vongSongChamNoRong 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vong-song-cham.vong-phu {
  border-color: #ffffff;
  animation-duration: 0.26s;
}

.cum-cham-mobile.chu-de-vang-kim .vong-song-cham {
  border-color: #ffd166;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.75);
}

.cum-cham-mobile.chu-de-san-khau .vong-song-cham {
  border-color: #a7f3d0;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.65);
}

@keyframes hatChamBayToa {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 1;
  }
  65% {
    opacity: 0.95;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 16px)), calc(-50% + var(--dy, -16px)))
      scale(1.1) rotate(45deg);
    opacity: 0;
  }
}

.hat-cham-pixel {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  color: #ffe082;
  text-shadow: 0 1px 2px rgba(43, 29, 20, 0.85);
  animation: hatChamBayToa 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hat-cham-pixel.hat-thu-2 {
  color: #ffffff;
  font-size: 9px;
}

.hat-cham-pixel.hat-thu-3 {
  color: #fbbf24;
  font-size: 12px;
}

.cum-cham-mobile.chu-de-san-khau .hat-cham-pixel.hat-thu-1 {
  color: #6ee7b7;
}

/* 4. CỤM ĐƯA KHÁCH TRÊN MẶT BÀN GỖ (KHÔNG KHUNG): VẬT PHẨM ĐẶT ĐÈ LÊN TIỀN THỐI + THẺ "⬆ BÀN: SỐ TIỀN" */

.khay-mon-tren-mat-ban-quay {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 13;
  pointer-events: auto;
  max-width: 100%;
}

.long-khay-do-va-tien-dua-khach {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 36px;
  min-width: 76px;
}

/* Khi có cả vật phẩm và tiền thối: Tiền thối nằm dưới mặt gỗ, Vật phẩm đè lên trên tiền */
.khay-mon-tren-mat-ban-quay.vat-pham-de-len-tien .long-khay-do-va-tien-dua-khach .cum-tien-thoi-tren-mat-ban {
  position: absolute !important;
  left: 50% !important;
  bottom: -2px !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
}

.khay-mon-tren-mat-ban-quay.vat-pham-de-len-tien .long-khay-do-va-tien-dua-khach .hang-vat-pham-tren-ban {
  position: relative;
  z-index: 2;
  margin-bottom: 3px;
}

.hang-vat-pham-tren-ban {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.hang-vat-pham-tren-ban.nhieu-mon-tren-ban {
  gap: 3px;
}

.hang-vat-pham-tren-ban.nhieu-mon-tren-ban .mon-dat-tren-ban {
  width: 36px;
  height: 36px;
}

.mon-dat-tren-ban {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 40px;
  height: 40px;
  transform-origin: center bottom;
}

.bong-do-mon-tren-ban {
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 32px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(24, 12, 5, 0.5);
  filter: blur(1px);
}

.than-mon-tren-ban {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thẻ "⬆ Bàn: số tiền" đồng bộ 100% kích thước, font chữ, chiều cao với "⬇ Lấy: số tiền" bên trái */
.bang-tong-tien-hang-tren-ban {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 22px;
  height: 22px;
  padding: 2px 8px;
  border-radius: 6px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #8a3c14 0%, #4e1e07 100%);
  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);
  pointer-events: auto;
  white-space: nowrap;
}

.bang-tong-tien-hang-tren-ban.co-the-bam-giao {
  cursor: pointer;
}

.cum-chu-ban-so-tien,
.cum-chu-lay-so-tien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.15;
  white-space: nowrap;
}

.bang-tong-tien-hang-tren-ban .nhan-chu-tong-ban {
  font-family: var(--font-body) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  color: #fef3c7;
  text-shadow: 0 1px 1px #1c0902;
  white-space: nowrap;
}

.bang-tong-tien-hang-tren-ban .so-tien-tong-ban-cong-don {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: 11px !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 #1c0902;
  white-space: nowrap;
}

@keyframes nhipCongThemMonTrenBan {
  0% {
    transform: scale(0.92);
  }
  42% {
    transform: scale(1.14);
    border-color: #bbf7d0;
    box-shadow:
      0 0 0 2px rgba(253, 224, 71, 0.65),
      0 3px 8px rgba(16, 185, 129, 0.65);
  }
  100% {
    transform: scale(1);
  }
}

.bang-tong-tien-hang-tren-ban.vua-cong-them-mon {
  animation: nhipCongThemMonTrenBan 0.44s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Khi món hàng vừa mới nhặt xong, chờ 200ms (lúc món đang bay trên không) rồi nảy vật lý trên mặt bàn */
@keyframes hienMonTrenBanSauKhiBay {
  0%,
  32% {
    opacity: 0;
    transform: scale(0.3);
  }
  52% {
    opacity: 1;
    transform: scale(1.26, 0.74);
  }
  74% {
    opacity: 1;
    transform: scale(0.92, 1.12);
  }
  88% {
    opacity: 1;
    transform: scale(1.05, 0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

.mon-dat-tren-ban.vua-tiep-dat {
  animation: hienMonTrenBanSauKhiBay 0.66s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Riêng nhóm chai lọ khi vừa đặt lên bàn sẽ lắc lư như con lật đật */
@keyframes chaiLoLacLuTrenBan {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }
  45% {
    opacity: 1;
    transform: scale(1.12, 0.88) rotate(-22deg);
  }
  62% {
    opacity: 1;
    transform: scale(0.96, 1.06) rotate(18deg);
  }
  78% {
    opacity: 1;
    transform: scale(1.03, 0.98) rotate(-10deg);
  }
  90% {
    opacity: 1;
    transform: scale(1) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.mon-dat-tren-ban.vua-tiep-dat.kieu-chai_lo {
  animation: chaiLoLacLuTrenBan 0.78s ease-out forwards;
}

/* Riêng nhóm nước lạnh khi đặt trên bàn sẽ rung bần bật vì gas */
@keyframes lonNuocLanhXiGasTrenBan {
  0%,
  30% {
    opacity: 0;
    transform: scale(0.4);
  }
  45% {
    opacity: 1;
    transform: scale(1.15, 0.86) translateX(-2px);
  }
  55% {
    transform: scale(1.04) translateX(2px);
  }
  65% {
    transform: scale(1.06) translateX(-2px);
  }
  75% {
    transform: scale(1.02) translateX(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.mon-dat-tren-ban.vua-tiep-dat.kieu-nuoc_lanh {
  animation: lonNuocLanhXiGasTrenBan 0.72s ease-out forwards;
}

/* Riêng nhóm kem lạnh trượt ngang mặt bàn rồi phanh gấp */
@keyframes kemTruotBangTrenBan {
  0%,
  28% {
    opacity: 0;
    transform: translateX(48px) skewX(-18deg) scale(0.85);
  }
  58% {
    opacity: 1;
    transform: translateX(-8px) skewX(14deg) scale(1.08, 0.92);
  }
  80% {
    opacity: 1;
    transform: translateX(3px) skewX(-5deg) scale(0.98, 1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0deg) scale(1);
  }
}

.mon-dat-tren-ban.vua-tiep-dat.kieu-kem_lanh {
  animation: kemTruotBangTrenBan 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 5. HIỆU ỨNG MÓN ĐỒ ĐANG BAY LÊN BÀN & NHÃN TRUYỆN TRANH HÀI HƯỚC */

@keyframes duongBayMonLenBan {
  0% {
    transform: translate(-50%, -50%) scale(0.75) rotate(0deg);
    opacity: 1;
  }
  45% {
    transform: translate(
        calc(-50% + var(--bay-dx, 0px) * 0.6),
        calc(-50% + var(--bay-dy, -120px) * 0.75 - 38px)
      )
      scale(1.22) rotate(12deg);
    opacity: 1;
  }
  78% {
    transform: translate(
        calc(-50% + var(--bay-dx, 0px)),
        calc(-50% + var(--bay-dy, -120px))
      )
      scale(1.28, 0.74) rotate(-6deg);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--bay-dx, 0px)),
        calc(-50% + var(--bay-dy, -120px) - 6px)
      )
      scale(0.95) rotate(0deg);
    opacity: 0;
  }
}

.mon-bay-len-ban {
  position: fixed;
  width: 48px;
  height: 48px;
  z-index: 99995;
  animation: duongBayMonLenBan 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cum-tiep-dat-hai-huoc {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 99996;
}

@keyframes vongChanDongMatBan {
  0% {
    width: 10px;
    height: 5px;
    opacity: 0.9;
  }
  100% {
    width: 72px;
    height: 22px;
    opacity: 0;
  }
}

.vong-chan-dong-ban {
  position: absolute;
  top: 8px;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #fde047;
  animation: vongChanDongMatBan 0.42s ease-out forwards;
}

@keyframes nhanTruyenTranhNayLen {
  0% {
    transform: translate(-50%, 0) scale(0.4) rotate(-6deg);
    opacity: 0;
  }
  16% {
    transform: translate(-50%, -26px) scale(1.12) rotate(3deg);
    opacity: 1;
  }
  84% {
    transform: translate(-50%, -34px) scale(1) rotate(-1deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -46px) scale(0.88) rotate(0deg);
    opacity: 0;
  }
}

.nhan-truyen-tranh-mon {
  position: absolute;
  top: -12px;
  left: 0;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  border: 2px solid #2b1d14;
  background: linear-gradient(180deg, #fffbeb 0%, #fde047 100%);
  color: #7c2d12;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 2px 0 #2b1d14, 0 4px 8px rgba(0, 0, 0, 0.28);
  animation: nhanTruyenTranhNayLen 1.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nhom-tiep-dat-nuoc_lanh .nhan-truyen-tranh-mon,
.nhom-tiep-dat-kem_lanh .nhan-truyen-tranh-mon {
  background: linear-gradient(180deg, #ecfeff 0%, #67e8f9 100%);
  color: #0f172a;
}

.nhom-tiep-dat-hu_nang .nhan-truyen-tranh-mon {
  background: linear-gradient(180deg, #fef2f2 0%, #fca5a5 100%);
  color: #7f1d1d;
}

@keyframes nhanCongTienMonBayLen {
  0% {
    transform: translate(-50%, 6px) scale(0.5);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -10px) scale(1.14);
    opacity: 1;
  }
  85% {
    transform: translate(-50%, -18px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -30px) scale(0.92);
    opacity: 0;
  }
}

.nhan-cong-tien-vat-pham {
  position: absolute;
  top: 6px;
  left: 0;
  white-space: nowrap;
  padding: 2.5px 8px;
  border-radius: 999px;
  border: 1.5px solid #064e3b;
  background: linear-gradient(180deg, #dcfce7 0%, #4ade80 100%);
  color: #052e16;
  font-family: var(--font-pixel);
  font-size: 9.5px;
  font-weight: 900;
  box-shadow: 0 2px 0 #064e3b, 0 3px 6px rgba(0, 0, 0, 0.35);
  animation: nhanCongTienMonBayLen 1.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hatVangTiepDat {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--hx, 20px)), calc(-50% + var(--hy, -24px)))
      scale(1.15) rotate(25deg);
    opacity: 0;
  }
}

.hat-vang-khi-dat-ban {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  animation: hatVangTiepDat 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Hiệu ứng Rung Mặt Bàn Quầy khi đặt Hũ Bánh / Hộp Thiếc nặng */
@keyframes rungSanKhauNang {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2.5px, 2px);
  }
  40% {
    transform: translate(2.5px, -2px);
  }
  60% {
    transform: translate(-2px, 1.5px);
  }
  80% {
    transform: translate(1.5px, -1px);
  }
}

.san-khau-rung-nang {
  animation: rungSanKhauNang 0.32s ease-in-out !important;
}

/* Hiệu ứng Nhặt Nhầm Món Khách Không Gọi (Lò xo búng ngược về kệ!) */
@keyframes monNhatNhamBoing {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  18% {
    transform: translate(-50%, -95px) scale(1.12) rotate(-8deg);
    opacity: 1;
  }
  82% {
    transform: translate(-50%, -88px) scale(1) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-30%, -12px) scale(0.6) rotate(18deg);
    opacity: 0;
  }
}

.cum-mon-nhat-nham-boing {
  position: fixed;
  z-index: 99996;
  animation: monNhatNhamBoing 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sprite-mon-bi-bung {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dau-x-nhat-nham {
  position: absolute;
  inset: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.nhan-boing-hai-huoc {
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  border: 2px solid #7f1d1d;
  background: #fef2f2;
  color: #991b1b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 0 #450a0a;
}

/* Hiệu ứng Nhập Lô Hàng Vào Kệ (Pha 1) */
@keyframes nhapHangBayLenKe {
  0% {
    transform: translate(-50%, 10px) scale(0.7);
    opacity: 0;
  }
  18% {
    transform: translate(-50%, -26px) scale(1.1);
    opacity: 1;
  }
  82% {
    transform: translate(-50%, -36px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -54px) scale(0.95);
    opacity: 0;
  }
}

.cum-nhap-hang-bay-vao-ke {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99995;
  animation: nhapHangBayLenKe 1.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nhan-cong-ton-kho-noi {
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1.5px solid #064e3b;
  background: #10b981;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 0 #064e3b;
}

/* 6. HIỆU ỨNG CẢM XÚC SỐNG ĐỘNG CỦA NPC KHÁCH HÀNG */

@keyframes npcNhunVuiVe {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  35% {
    transform: translateX(-50%) translateY(-7px) scale(1.04, 0.96);
  }
  70% {
    transform: translateX(-50%) translateY(0) scale(0.98, 1.02);
  }
}

.san-khau-quay .khu-khach-hang.npc-nhun-vui {
  animation: npcNhunVuiVe 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bongCamXucNpcBay {
  0% {
    transform: translate(-50%, 8px) scale(0.5);
    opacity: 0;
  }
  16% {
    transform: translate(-50%, -14px) scale(1.12);
    opacity: 1;
  }
  84% {
    transform: translate(-50%, -22px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -36px) scale(0.95);
    opacity: 0;
  }
}

.bong-cam-xuc-npc {
  position: fixed;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1.5px solid #2b1d14;
  background: #fffbeb;
  color: #9a3412;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 0 #2b1d14;
  animation: bongCamXucNpcBay 1.8s ease-out forwards;
}

/* 7. HIỆU ỨNG RÚT TIỀN THỐI, THỐI KẸO OISHI & ĐÓNG DẤU SỔ NAM TÀO */

@keyframes toTienRutLenBan {
  0% {
    transform: translate(-50%, 0) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  18% {
    transform: translate(-50%, -32px) scale(1.1) rotate(var(--goc-to-tien, -6deg));
    opacity: 1;
  }
  84% {
    transform: translate(-50%, -42px) scale(1) rotate(var(--goc-to-tien, -6deg));
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -58px) scale(0.95) rotate(var(--goc-to-tien, -6deg));
    opacity: 0;
  }
}

.to-tien-rut-khoi-hoc {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 99996;
  animation: toTienRutLenBan 1.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nhan-to-tien-rut {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1.5px solid #1e293b;
  background: var(--mau-to-tien, #10b981);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 #0f172a;
}

.huy-hieu-khop-tien-thoi {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1.5px solid #064e3b;
  background: #fde047;
  color: #065f46;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 #064e3b;
}

@keyframes toTienCatXuongHoc {
  0% {
    transform: translate(-50%, -20px) scale(1);
    opacity: 1;
  }
  75% {
    transform: translate(-50%, -14px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 16px) scale(0.6);
    opacity: 0;
  }
}

.to-tien-cat-ve-hoc {
  position: fixed;
  z-index: 99995;
  animation: toTienCatXuongHoc 1.35s ease-in forwards;
}

.nhan-to-tien-cat {
  padding: 2px 6px;
  border-radius: 5px;
  background: #f59e0b;
  color: #2b1d14;
  border: 1.5px solid #2b1d14;
  font-size: 9px;
  font-weight: 800;
}

/* Viên kẹo Oishi bay vòng cung lên cho khách */
@keyframes vienKeoOishiBayLen {
  0% {
    transform: translate(-50%, -50%) scale(0.6) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(
        calc(-50% + var(--keo-dx, 0px) * 0.5),
        calc(-50% + var(--keo-dy, -160px) * 0.65 - 36px)
      )
      scale(1.35) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--keo-dx, 0px)),
        calc(-50% + var(--keo-dy, -160px))
      )
      scale(0.85) rotate(360deg);
    opacity: 0;
  }
}

.vien-keo-oishi-bay {
  position: fixed;
  font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  animation: vienKeoOishiBayLen 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nhan-bay-giao-dich {
  position: fixed;
  z-index: 99997;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1.5px solid #1e0b03;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #3b1504;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 #1e0b03, 0 4px 10px rgba(0, 0, 0, 0.38);
  animation: bongCamXucNpcBay 2.1s ease-out forwards;
}

/* Con dấu đỏ đóng CỘP vào Sổ Nam Tào */
@keyframes dongDauCopSoNo {
  0% {
    transform: translate(-50%, -50%) scale(2.4) rotate(-18deg);
    opacity: 0;
  }
  18% {
    transform: translate(-50%, -50%) scale(0.92) rotate(-8deg);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.05) rotate(-10deg);
    opacity: 1;
  }
  86% {
    transform: translate(-50%, -50%) scale(1) rotate(-9deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -62%) scale(0.95) rotate(-9deg);
    opacity: 0;
  }
}

.con-dau-ghi-so-nam-tao {
  position: fixed;
  z-index: 99997;
  animation: dongDauCopSoNo 2.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.khung-con-dau-do {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 12px;
  border: 3px double #b91c1c;
  border-radius: 6px;
  background: rgba(254, 242, 242, 0.95);
  color: #b91c1c;
  box-shadow: 0 3px 0 #7f1d1d, 0 6px 14px rgba(0, 0, 0, 0.35);
}

.chu-con-dau-chinh {
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.chu-con-dau-phu {
  font-size: 10px;
  font-weight: 800;
}

/* Tờ tiền thối bay lên giao cho khách */
@keyframes toTienGiaoKhach {
  0% {
    transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--giao-dx, 0px)),
        calc(-50% + var(--giao-dy, -150px))
      )
      scale(1.2) rotate(-20deg);
    opacity: 0;
  }
}

.to-tien-giao-cho-khach {
  position: fixed;
  font-size: 19px;
  animation: toTienGiaoKhach 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 8. HIỆU ỨNG +TIỀN VÀO TÀI KHOẢN (MƯA TIỀN BAY VỀ VÍ & SỐ CUỘN HUD) */

@keyframes hatTienBayVeViHud {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  22% {
    transform: translate(
        calc(-50% + var(--vi-dx, 0px) * 0.15 - 18px),
        calc(-50% + var(--vi-dy, -300px) * 0.12 + 12px)
      )
      scale(1.18) rotate(-18deg);
    opacity: 1;
  }
  65% {
    transform: translate(
        calc(-50% + var(--vi-dx, 0px) * 0.68 + 14px),
        calc(-50% + var(--vi-dy, -300px) * 0.62)
      )
      scale(1.06) rotate(15deg);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--vi-dx, 0px)),
        calc(-50% + var(--vi-dy, -300px))
      )
      scale(0.55) rotate(45deg);
    opacity: 0;
  }
}

.hat-tien-bay-ve-vi {
  position: fixed;
  z-index: 99998;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: hatTienBayVeViHud 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes chuTienNoiBayLen {
  0% {
    transform: translate(-50%, 8px) scale(0.5);
    opacity: 0;
  }
  16% {
    transform: translate(-50%, -18px) scale(1.14);
    opacity: 1;
  }
  84% {
    transform: translate(-50%, -28px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -46px) scale(0.9);
    opacity: 0;
  }
}

.chu-tien-noi-bay-len {
  position: fixed;
  z-index: 99998;
  animation: chuTienNoiBayLen 1.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nhan-so-tien-cong-lon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 2px solid #064e3b;
  background: linear-gradient(180deg, #6ee7b7 0%, #10b981 100%);
  color: #022c22;
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2.5px 0 #064e3b, 0 4px 10px rgba(0, 0, 0, 0.35);
}

.nhan-so-tien-tru-lon {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px solid #7f1d1d;
  background: linear-gradient(180deg, #fecaca 0%, #f87171 100%);
  color: #450a0a;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 0 #7f1d1d;
}

/* Hiệu ứng Ô Tiền Mặt trên HUD nảy phình lên khi nhận tiền */
@keyframes viTienHudNayCong {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.22);
    filter: brightness(1.35) drop-shadow(0 0 8px #fde047);
  }
  65% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.vi-tien-dang-cong {
  animation: viTienHudNayCong 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes viTienHudRungTru {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
    filter: brightness(1.2);
  }
  75% {
    transform: translateX(3px);
  }
}

.vi-tien-dang-tru {
  animation: viTienHudRungTru 0.36s ease-in-out !important;
}

@keyframes noSaoTaiViHud {
  0% {
    transform: translate(-50%, 0) scale(0.5);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -14px) scale(1.04);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -22px) scale(1.1);
    opacity: 0;
  }
}

.no-sao-tai-vi-hud {
  position: fixed;
  z-index: 99999;
  animation: noSaoTaiViHud 1.55s ease-out forwards;
}

.badge-cong-ngay-hud {
  padding: 1px 6px;
  border-radius: 999px;
  background: #fde047;
  border: 1.5px solid #78350f;
  color: #78350f;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

/* 9. HIỆU ỨNG CHUYỂN PHA (CỬA SẮT KÉO TẠP HÓA), CHUYỂN BUỔI & CHUYỂN TAB */

@keyframes cuaSatKeoMoLen {
  0%,
  36% {
    transform: translateY(0%);
    opacity: 1;
  }
  85% {
    transform: translateY(-92%);
    opacity: 1;
  }
  100% {
    transform: translateY(-105%);
    opacity: 0;
  }
}

@keyframes cuaSatKeoSapXuong {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }
  38% {
    transform: translateY(0%);
    opacity: 1;
  }
  84% {
    transform: translateY(-2%);
    opacity: 1;
  }
  100% {
    transform: translateY(0%);
    opacity: 0;
  }
}

.man-cua-sat-keo-tap-hoa {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(51, 65, 85, 0.92) 0px,
      rgba(51, 65, 85, 0.92) 14px,
      rgba(71, 85, 105, 0.92) 14px,
      rgba(71, 85, 105, 0.92) 28px
    );
  border-bottom: 6px solid #f59e0b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  z-index: 99997;
}

.man-cua-sat-keo-tap-hoa.kieu-keo-mo-len,
.man-cua-sat-keo-tap-hoa.kieu-binh-minh-sang {
  animation: cuaSatKeoMoLen 1.35s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.man-cua-sat-keo-tap-hoa.kieu-keo-sap-xuong {
  animation: cuaSatKeoSapXuong 1.35s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.nan-cua-sat-xep {
  flex: 1;
  background-image:
    linear-gradient(45deg, rgba(148, 163, 184, 0.35) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.35) 25%, transparent 25%);
  background-size: 28px 28px;
}

.thanh-day-cua-sat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
  border-top: 2px solid #94a3b8;
}

.bang-dong-cua-sat {
  padding: 4px 12px;
  border-radius: 6px;
  border: 2px solid #78350f;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #451a03;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 0 #451a03;
}

/* Dải ánh sáng khi chuyển Buổi (Sáng -> Trưa -> Chiều) */
@keyframes daiChuyenBuoiLuotQua {
  0% {
    transform: translateY(14px) scale(0.9);
    opacity: 0;
  }
  14% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  86% {
    transform: translateY(-4px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-16px) scale(0.95);
    opacity: 0;
  }
}

.dai-chuyen-buoi-san-khau {
  position: fixed;
  display: flex;
  justify-content: center;
  z-index: 99995;
  animation: daiChuyenBuoiLuotQua 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.nhan-chuyen-buoi-noi {
  padding: 5px 14px;
  border-radius: 999px;
  border: 2px solid #451a03;
  background: linear-gradient(90deg, #fef08a 0%, #fbbf24 50%, #fde047 100%);
  color: #451a03;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 3px 0 #451a03, 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* Hiệu ứng Chuyển Tab Quầy & Chuyển Nhóm Kệ Hàng */
@keyframes keoHocThuNganRa {
  0% {
    transform: translateY(-10px) scale(0.97);
    opacity: 0.65;
  }
  65% {
    transform: translateY(2px) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.hieu-ung-keo-hoc-thu-ngan {
  animation: keoHocThuNganRa 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes latTabVatPham {
  0% {
    transform: translateY(6px);
    opacity: 0.72;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.hieu-ung-lat-tab-vat-pham {
  animation: latTabVatPham 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes songNay5MonTrenKe {
  0% {
    transform: translateY(7px) scale(0.92);
    opacity: 0.6;
  }
  65% {
    transform: translateY(-2px) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.hieu-ung-song-5-mon .o-hang-ke {
  animation: songNay5MonTrenKe 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) backwards !important;
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.hieu-ung-song-5-mon .o-hang-ke:nth-child(1) {
  animation-delay: 0ms !important;
}
#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.hieu-ung-song-5-mon .o-hang-ke:nth-child(2) {
  animation-delay: 24ms !important;
}
#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.hieu-ung-song-5-mon .o-hang-ke:nth-child(3) {
  animation-delay: 48ms !important;
}
#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.hieu-ung-song-5-mon .o-hang-ke:nth-child(4) {
  animation-delay: 72ms !important;
}
#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.hieu-ung-song-5-mon .o-hang-ke:nth-child(5) {
  animation-delay: 96ms !important;
}

/* Hiệu ứng mở Modal đàn hồi (Shop, Sổ Nam Tào, Cài Đặt...) */
@keyframes modalPopSpring {
  0% {
    transform: translateY(16px) scale(0.92);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

#app .lop-phu-modal .hop-modal {
  animation: modalPopSpring 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#app .lop-phu-modal.modal-da-mo-san .hop-modal,
#app .hop-modal.modal-da-mo-san {
  animation: none !important;
}

/* 10. CÁC HIỆU ỨNG BỔ SUNG: QUẠT CÓC, COMBO, TỜ 500K, ĐẬP TRỘM & PHÁO GIẤY */

@keyframes luongGioQuatBay {
  0% {
    transform: translate(0, 0) scale(0.7);
    opacity: 0.95;
  }
  20%,
  80% {
    transform: translate(calc(var(--gio-dx, -90px) * 0.75), calc(var(--gio-dy, -24px) * 0.75)) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translate(var(--gio-dx, -90px), var(--gio-dy, -24px)) scale(1.12);
    opacity: 0;
  }
}

.luong-gio-quat-mat {
  position: fixed;
  z-index: 99996;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(207, 250, 254, 0.92);
  border: 1.5px solid #0891b2;
  color: #0e7490;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  animation: luongGioQuatBay 1.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.quat-xoay-tang-toc {
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.8));
  transform: scale(1.08);
}

/* Hiệu ứng Hit-marker khi bấm bắt trộm / đuổi chuột */
@keyframes hitSuKienBungNo {
  0% {
    transform: translate(-50%, -50%) scale(0.4) rotate(-12deg);
    opacity: 1;
  }
  22% {
    transform: translate(-50%, -65%) scale(1.2) rotate(5deg);
    opacity: 1;
  }
  82% {
    transform: translate(-50%, -74%) scale(1.05) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -95%) scale(0.9) rotate(0deg);
    opacity: 0;
  }
}

.hieu-ung-hit-su-kien {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 99998;
  animation: hitSuKienBungNo 1.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.chu-hit-truyen-tranh {
  padding: 3px 8px;
  border-radius: 6px;
  border: 2px solid #450a0a;
  background: #fde047;
  color: #b91c1c;
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 0 #450a0a;
}

/* Huy hiệu Combo bán hàng liên hoàn & Áp lực tờ 500k */
@keyframes huyHieuComboPop {
  0% {
    transform: translate(-50%, 10px) scale(0.5);
    opacity: 0;
  }
  14% {
    transform: translate(-50%, 0) scale(1.1);
    opacity: 1;
  }
  86% {
    transform: translate(-50%, -4px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -18px) scale(0.9);
    opacity: 0;
  }
}

.huy-hieu-combo-ban-hang,
.hao-quang-to-500k-boss {
  position: fixed;
  z-index: 99996;
  animation: huyHieuComboPop 2.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.chu-combo-ban-hang {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid #7c2d12;
  background: linear-gradient(90deg, #fde047 0%, #f97316 50%, #fde047 100%);
  color: #431407;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2.5px 0 #7c2d12, 0 4px 12px rgba(249, 115, 22, 0.5);
}

.nhan-ap-luc-500k {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid #0c4a6e;
  background: linear-gradient(90deg, #bae6fd 0%, #38bdf8 50%, #fde047 100%);
  color: #082f49;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2.5px 0 #0c4a6e, 0 0 14px rgba(56, 189, 248, 0.8);
}

/* Pháo giấy Confetti chúc mừng trúng vé số / lên cấp / mở kệ */
.cum-phao-giay-chuc-mung {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 99998;
}

.bang-ron-chuc-mung-noi {
  position: absolute;
  top: -28px;
  left: 0;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  border: 2px solid #451a03;
  background: linear-gradient(180deg, #fffbeb 0%, #fbbf24 100%);
  color: #78350f;
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 3px 0 #451a03, 0 6px 16px rgba(0, 0, 0, 0.35);
}

@keyframes manhPhaoGiayBay {
  0% {
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--px, 40px)), calc(-50% + var(--py, 60px)))
      scale(1) rotate(var(--goc-xoay, 180deg));
    opacity: 0;
  }
}

.manh-phao-giay {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 5px;
  border-radius: 1.5px;
  background: var(--mau-phao, #ffd166);
  border: 1px solid rgba(43, 29, 20, 0.45);
  animation: manhPhaoGiayBay 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .man-cua-sat-keo-tap-hoa,
  .mon-bay-len-ban,
  .hat-tien-bay-ve-vi {
    animation-duration: 0.12s !important;
  }
}

/* ==========================================================================
   8. STUDIO SOUND MIXER, RESET CENTER & AUDIO CONTROLS
   ========================================================================== */
.khoi-reset-studio {
  border: 2px solid #d97706 !important;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
}

.luoi-nut-reset-studio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.nut-canh-bao-do {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border-color: #450a0a !important;
  box-shadow: 0 3px 0 #450a0a !important;
}

.khoi-master-sound-studio {
  border: 2px solid #0284c7 !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
}

.luoi-thanh-truot-master {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 8px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(120, 53, 15, 0.2);
}

.dong-thanh-truot-am {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: #3b2314;
}

.dong-thanh-truot-am input[type='range'] {
  flex: 1;
  min-width: 65px;
  accent-color: #d97706;
  cursor: pointer;
}

.thanh-loc-nhom-am-thanh {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(254, 243, 199, 0.65);
  border: 1px dashed #d97706;
}

.the-dieu-chinh-am-thanh {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.the-dieu-chinh-am-thanh.co-file-am-thanh-rieng {
  border: 2px solid #16a34a !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

.the-dieu-chinh-am-thanh.dang-tat-tieng-rieng {
  opacity: 0.68;
}

.hang-badge-trang-thai-sound {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.badge-sound-custom,
.badge-sound-macdinh,
.badge-sound-mute {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.badge-sound-custom {
  background: #16a34a;
  color: #ffffff;
}

.badge-sound-macdinh {
  background: #fde68a;
  color: #78350f;
  border: 1px solid #d97706;
}

.badge-sound-mute {
  background: #dc2626;
  color: #ffffff;
}

.hang-chon-file-sound {
  margin-top: 6px;
}

.nhan-chon-file-sound {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #431407;
  cursor: pointer;
}

.input-file-am-thanh-studio {
  font-size: 11px;
  max-width: 100%;
}

.hang-duong-dan-sound {
  margin-top: 5px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.o-nhap-duong-dan-sound {
  flex: 1;
  font-size: 11px !important;
  padding: 4px 8px !important;
}

/* Kho 31 Tiếng Chọn Lọc trong Studio & Setting Game */
.khoi-kho-sound-chon-loc {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
  border: 2px solid #d97706 !important;
}

.luoi-nut-nghe-thu-kho-sound {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  max-height: 155px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  border: 1px dashed #d97706;
}

.nut-pill-sound-chon-loc {
  font-size: 10.5px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #fff7ed !important;
  border: 1px solid #ea580c !important;
  color: #7c2d12 !important;
}

.nut-pill-sound-chon-loc:hover {
  background: #ffedd5 !important;
}

.hang-chon-nhanh-kho-sound {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(254, 243, 199, 0.72);
  border-radius: 8px;
  border: 1.5px solid #d97706;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.cum-dropdown-nghe-chon-studio {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  flex-wrap: nowrap;
}

.select-sound-chon-loc-studio {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px !important;
  padding: 5px 7px !important;
  font-weight: 700;
  color: #3b2314;
  background: #ffffff;
}

.nut-nghe-thu-dropdown-studio {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #fff7ed !important;
  border: 1.5px solid #ea580c !important;
  color: #9a3412 !important;
  font-weight: 800 !important;
  padding: 5px 8px !important;
}

.nut-xac-nhan-chon-sound {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 800 !important;
  padding: 5px 9px !important;
}

.nut-xac-nhan-chon-sound.nut-chon-sound-sang {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
  border-color: #14532d !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
}

.hang-bien-the-sound-nhanh {
  margin-top: 4px;
  padding: 4px 6px;
  background: rgba(220, 252, 231, 0.55);
  border-radius: 7px;
  border: 1px dashed #16a34a;
}

.hang-loc-folder-nhac-nen {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(224, 242, 254, 0.78);
  border-radius: 8px;
  border: 1.5px solid #0284c7;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.select-folder-nhac-nen-bgm {
  flex: 1 1 auto !important;
  min-width: 0;
  font-size: 12px !important;
  padding: 5px 7px !important;
  font-weight: 700;
  color: #0c4a6e;
  background: #ffffff;
}

.khoi-duyet-nhac-nen-download {
  border: 2px solid #0284c7 !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
}

.pill-bai-hat-nhac-da-download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  background: #ffffff;
  border: 1px solid #bae6fd;
  border-radius: 999px;
}

.pill-bai-hat-nhac-da-download.dang-dung-bai-hat-bgm {
  border-color: #16a34a;
  background: #dcfce7;
}

.danh-sach-sound-nhanh-cai-dat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 310px;
  overflow-y: auto;
  padding: 6px;
  background: #fffaf0;
  border: 1px solid #dfc59f;
  border-radius: 8px;
}

.dong-sound-nhanh-cai-dat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #ead4b4;
  border-radius: 7px;
}

.nhan-dong-sound-cai-dat {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nhan-dong-sound-cai-dat strong {
  font-size: 11.5px;
  color: #3b2314;
}

.nhan-dong-sound-cai-dat small {
  font-size: 10px;
  color: #78553a;
}

.cum-nut-dong-sound-cai-dat {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  flex-wrap: nowrap;
}

.select-sound-cai-dat-nhanh {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  max-width: none;
  font-size: 12px !important;
  padding: 5px 6px !important;
  font-weight: 700;
}

/* ============================================================================
   12. HỆ THỐNG CỬ CHỈ ĐA THAO TÁC (NHẤP / LƯỚT KÉO LÊN / NẮM KÉO THẢ & KÉO VỀ)
       CHO VẬT PHẨM & TIỀN (TRÊN KỆ, TRONG HỘC KÉO & TRÊN MẶT BÀN)
   ============================================================================ */

.o-hang-ke[data-mat-hang-id],
.mon-dat-tren-ban[data-mat-hang-ban-id],
.kien-hang-cho-si-tren-ban[data-vi-tri-lo-si],
[data-menh-gia],
[data-vi-tri-to-ban],
[data-tien-khach-dua],
[data-thoi-keo],
[data-so-no] {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.mon-dat-tren-ban {
  pointer-events: auto !important;
  cursor: grab;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
}

.mon-dat-tren-ban:hover {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.06);
}

.mon-dat-tren-ban:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.cum-tien-khach-tren-ban.san-sang-thu-ngay {
  border-color: #22c55e !important;
  box-shadow:
    0 0 0 1.5px #86efac,
    0 3px 8px rgba(34, 197, 94, 0.55) !important;
}

.dang-keo-tha-nguon {
  opacity: 0.58 !important;
  transform: scale(0.94) !important;
  filter: saturate(0.85) brightness(0.95) !important;
}

.bong-keo-tha-juice {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: translate(-50%, -68%) rotate(var(--goc-nghieng-keo, 0deg));
  pointer-events: none !important;
  will-change: left, top, transform;
}

.hinh-bong-keo-vat-pham {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 251, 235, 0.94) 0%, rgba(253, 224, 71, 0.82) 100%);
  border: 2px solid #451a03;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.42),
    0 0 0 2px rgba(254, 240, 138, 0.85);
}

.to-tien-bong-keo-tha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 36px;
  padding: 2px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--mau-to-keo, #10b981) 0%, #064e3b 100%);
  border: 2px solid #fef08a;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.chu-to-tien-bong-keo {
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 800;
  color: #fffbeb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.nhan-trang-thai-keo-tha {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(30, 17, 10, 0.92);
  border: 1.5px solid #fde047;
  color: #fef08a;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.nhan-trang-thai-keo-tha.kieu-hanh-dong-len {
  background: linear-gradient(180deg, #16a34a 0%, #14532d 100%);
  border-color: #bbf7d0;
  color: #ffffff;
}

.nhan-trang-thai-keo-tha.kieu-hanh-dong-ve {
  background: linear-gradient(180deg, #d97706 0%, #78350f 100%);
  border-color: #fde68a;
  color: #fffbeb;
}

/* ============================================================================
   13. SÂN KHẤU CHỢ ĐẦU HẺM (1:1), BÀN CÂN NHƠN HÒA & THAO TÁC NHẬP HÀNG ĐẦU BUỔI
   ============================================================================ */

/* Nút chuyển nhanh Ra Chợ Nhập Hàng <-> Về Quầy Tiệm trên Vùng Xanh HUD */
#app .vung-xanh-duong .nut-cho-si-vung-xanh {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
  border-color: #bbf7d0 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(6, 78, 59, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 0 #14532d !important;
}

#app .vung-xanh-duong .nut-cho-si-vung-xanh:not(.dang-o-cho-si) {
  animation: nhapNhayNutChoSiTrenHud 1.05s ease-in-out infinite;
}

#app .vung-xanh-duong .nut-cho-si-vung-xanh.dang-o-cho-si {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  border-color: #fde68a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 0 #78350f !important;
}

/* Cụm 2 nút hành động đầu buổi xếp dọc ở chính giữa màn hình (Nút Ra Chợ Sỉ ở trên nhấp nháy • Nút Mở Cửa ở dưới) */
.cum-nut-dau-buoi-tai-tiem {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  max-width: calc(100% - 20px);
  pointer-events: none;
}

.nut-hanh-dong-dau-buoi {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid #451a03;
  font-family: var(--font-body);
  font-size: 11.2px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    0 3px 0 #291305,
    0 4px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.nut-hanh-dong-dau-buoi:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08);
}

.nut-hanh-dong-dau-buoi:active {
  transform: translateY(1px) scale(0.97);
}

/* Nút Ra Chợ Sỉ ở giữa màn hình — luôn nhấp nháy thu hút ánh nhìn */
.nut-ra-cho-dau-buoi {
  height: 33px;
  padding: 0 15px;
  font-size: 11.8px;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 52%, #d97706 100%);
  border: 2px solid #ffffff;
  outline: 2px solid #451a03;
  color: #2b1103;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  animation: nhapNhayNutRaChoSiGiua 0.95s ease-in-out infinite;
}

.nut-ra-cho-dau-buoi::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -120%;
  width: 55%;
  height: 140%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: vachSangQuetNutChoSi 2.1s ease-in-out infinite;
}

.nut-ra-cho-dau-buoi.co-canh-bao-kho {
  background: linear-gradient(180deg, #fde047 0%, #f97316 42%, #dc2626 100%);
  border-color: #fef08a;
  outline: 2px solid #450a0a;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(69, 10, 10, 0.95);
  animation: nhapNhayNutRaChoSiCanhBao 0.85s ease-in-out infinite;
}

.nut-mo-cua-dau-buoi {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border-color: #dcfce7;
  outline: 1.5px solid #052e16;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(6, 78, 59, 0.9);
}

@keyframes nhapNhayNutChoSi {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes nhapNhayNutChoSiTrenHud {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 2px 0 #14532d,
      0 0 0 0 rgba(254, 240, 138, 0) !important;
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.16);
    border-color: #fef08a !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 2px 0 #14532d,
      0 0 9px rgba(250, 204, 21, 0.9) !important;
  }
}

@keyframes nhapNhayNutRaChoSiGiua {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
      0 3px 0 #451a03,
      0 4px 10px rgba(0, 0, 0, 0.45),
      0 0 0 0 rgba(254, 240, 138, 0.2);
  }
  50% {
    transform: translateY(-1.5px) scale(1.06);
    filter: brightness(1.15);
    box-shadow:
      inset 0 1.5px 0 #ffffff,
      0 3px 0 #451a03,
      0 0 0 3px rgba(254, 240, 138, 0.88),
      0 0 16px rgba(250, 204, 21, 0.95);
  }
}

@keyframes nhapNhayNutRaChoSiCanhBao {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
      0 3px 0 #450a0a,
      0 4px 10px rgba(0, 0, 0, 0.5),
      0 0 4px rgba(249, 115, 22, 0.5);
  }
  50% {
    transform: translateY(-2px) scale(1.07);
    filter: brightness(1.18);
    border-color: #ffffff;
    box-shadow:
      inset 0 1.5px 0 #ffffff,
      0 3px 0 #450a0a,
      0 0 0 3px rgba(254, 240, 138, 0.95),
      0 0 18px rgba(251, 191, 36, 1);
  }
}

@keyframes vachSangQuetNutChoSi {
  0%,
  55% {
    left: -120%;
  }
  100% {
    left: 160%;
  }
}

/* Sân khấu Chợ Đầu Hẻm (Giữ nguyên 100% khung .san-khau-quay nhưng dùng camera POV không bóp ngang Ông Chú & Cân Nhơn Hòa) */
#app .san-khau-quay.san-khau-cho-dau-hem {
  position: relative;
  overflow: hidden;
  background-color: #1f1209 !important;
  background-image: none !important;
}

.khung-camera-cho-si-pov {
  position: absolute;
  top: 0;
  left: -19%;
  width: 138%;
  height: 100%;
  transform-origin: 50% 54%;
  z-index: 2;
  will-change: transform;
}

.anh-nen-cho-dau-hem-vuong {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill !important;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
}

/* Bong bóng thoại Ông Chủ Sỉ nằm ngay dưới tấm bảng hiệu vàng "ĐẠI LÝ SỈ BÁCH HÓA - CHỢ ĐẦU HẺM" (không che bảng hiệu!) */
.bong-thoai-cho-si-gon {
  position: absolute;
  top: 19.2%;
  left: 10px;
  right: 10px;
  z-index: 24;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.noi-dung-thoai-ong-chu-si {
  max-width: 96%;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 251, 235, 0.93);
  border: 2px solid #451a03;
  color: #291305;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.38);
}

/* 3 Hotzone chạm vào kệ sỉ trực tiếp trên hình nền chợ (khớp 1:1 bên trong .khung-camera-cho-si-pov) */
.hotzone-sap-cho-si {
  position: absolute;
  z-index: 12;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px;
  background: rgba(255, 255, 255, 0.01);
  border: 1.5px dashed transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hotzone-sap-cho-si:hover {
  border-color: rgba(254, 240, 138, 0.75);
  background: rgba(254, 240, 138, 0.08);
}

.hotzone-cho-si-trai {
  left: 13.5%;
  top: 20.0%;
  width: 17.0%;
  height: 60.0%;
}

.hotzone-cho-si-giua {
  left: 32.0%;
  top: 19.5%;
  width: 36.0%;
  height: 21.0%;
}

.hotzone-cho-si-phai {
  left: 68.8%;
  right: auto;
  top: 28.0%;
  width: 17.2%;
  height: 56.0%;
}

.nhan-hotzone-cho-si {
  display: none !important;
}

/* Hotspot trực tiếp trên chiếc Cân Đồng Hồ Nhơn Hòa màu xanh lá trên mặt bàn */
.hotspot-can-nhon-hoa-that {
  position: absolute;
  left: 31.5%;
  top: 63.6%;
  width: 9.2%;
  height: 19.4%;
  z-index: 18;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1.5px dashed transparent;
  border-radius: 8px;
  cursor: pointer;
}

.hotspot-can-nhon-hoa-that:hover {
  border-color: #4ade80;
}

.nhan-so-ky-can-nhon-hoa {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 62, 34, 0.96);
  border: 1.5px solid #86efac;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* Hotspot trực tiếp trên Ông Chủ Đại Lý Sỉ (Nhãn Mặc Cả đặt ở cạnh dưới trước ngực/tạp dề, tuyệt đối không che mặt) */
.hotspot-ong-chu-si-that {
  position: absolute;
  left: 42.0%;
  top: 41.0%;
  width: 16.8%;
  height: 35.5%;
  z-index: 17;
  display: flex;
  align-items: flex-end !important;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nhan-goi-y-mac-ca-ong-chu {
  transform: translateY(2px);
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4ade80 0%, #15803d 100%);
  border: 1.5px solid #fef08a;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  animation: nhapNhayNutChoSi 1.2s ease-in-out infinite;
}

/* Khay các kiện hàng đã cân đặt trực tiếp lên mặt bàn gỗ phía trước Ông Chủ Sỉ */
.khay-ban-can-cho-si {
  position: absolute;
  left: 8px;
  right: 102px;
  bottom: 8px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
}

.danh-sach-kien-hang-tren-can {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 2px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.danh-sach-kien-hang-tren-can::-webkit-scrollbar {
  display: none;
}

.goi-y-keo-hang-len-can {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 18, 9, 0.82);
  border: 1px solid rgba(253, 224, 71, 0.7);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  color: #fef3c7;
  white-space: nowrap;
}

.kien-hang-cho-si-tren-ban {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 42%, #fffbeb 0%, #fde68a 100%);
  border: 1.5px solid #92400e;
  cursor: grab;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease;
}

.kien-hang-cho-si-tren-ban.kien-hang-sale {
  border-color: #ef4444;
  box-shadow:
    0 0 0 1px #fca5a5,
    0 2px 6px rgba(239, 68, 68, 0.45);
}

.kien-hang-cho-si-tren-ban:hover {
  transform: translateY(-2px) scale(1.05);
}

.badge-so-luong-kien-si {
  position: absolute;
  bottom: -2px;
  right: -2px;
  padding: 0 4px;
  border-radius: 999px;
  background: #15803d;
  border: 1px solid #dcfce7;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 900;
  line-height: 12px;
}

.cum-nut-ban-can-cho-si {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
}

.nut-ban-can-cho-si {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1.5px solid #451a03;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 0 #291305;
}

.nut-mac-ca-ban-can {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #451a03;
}

.nut-mac-ca-ban-can.san-sang-mac-ca {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  border-color: #dcfce7;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(6, 78, 59, 0.9);
  animation: nhapNhayNutChoSi 1.3s ease-in-out infinite;
}

.nut-mac-ca-ban-can.da-mac-ca {
  background: rgba(30, 41, 59, 0.85);
  border-color: #64748b;
  color: #cbd5e1;
}

.nut-thung-mu-ban-can {
  background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%);
  border-color: #f3e8ff;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(59, 7, 100, 0.9);
}

.nut-ve-tiem-ban-can {
  background: linear-gradient(180deg, #fbbf24 0%, #b45309 100%);
  border-color: #fef3c7;
  color: #291305;
}

.nut-mo-cua-ngay-cho-si {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border-color: #dcfce7;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(6, 78, 59, 0.9);
}

/* Huy hiệu & trạng thái trên thẻ hàng Vùng Đỏ khi ở Chợ Sỉ hoặc Kiểm Kho */
#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke .badge-sale-cho-si {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 4;
  padding: 0 4px;
  height: 13px;
  line-height: 13px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 1px solid #fef08a;
  color: #fffbeb;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 900;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke .so-luong-badge.badge-da-chat-cho-si {
  background: linear-gradient(180deg, #16a34a 0%, #14532d 100%) !important;
  border-color: #bbf7d0 !important;
  color: #ffffff !important;
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke .so-luong-badge.badge-sap-het-kho {
  background: linear-gradient(180deg, #ea580c 0%, #9a3412 100%) !important;
  border-color: #fed7aa !important;
  color: #ffffff !important;
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke .gia-mon-ke.gia-sale-cho-si {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%) !important;
  border-color: #fde047 !important;
  color: #fef08a !important;
}

#app .man-hinh-quay-gon .vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke .gia-mon-ke.gia-kiem-kho-tiem {
  font-size: 8.5px !important;
}

/* ============================================================================
   10. GIAO DIỆN NHẬP HÀNG THEO LIST (+1, +5, +10, HIỆN TIỀN & BẤM NHẬP 1 LẦN)
   ============================================================================ */

#app .man-hinh-quay-gon > .vung-do-goi-hang.vung-do-chuan-bi-list {
  grid-template-rows: 32px 192px;
  flex: 0 0 238px;
  height: 238px;
  min-height: 238px;
  max-height: 238px;
}

#app .man-hinh-quay-gon .vung-do-chuan-bi-list .bang-quay.bang-quay--nhap-list {
  height: 192px;
}

.khung-list-nhap-hang-cho-si {
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr) 36px;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.khung-list-nhap-hang-cho-si.list-nhap-trong-modal {
  height: 410px;
  grid-template-rows: 30px minmax(0, 1fr) 42px;
  gap: 6px;
}

/* Thanh lọc nhóm kệ ở đầu list */
.thanh-loc-list-nhap-hang {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 0 1px;
}

.thanh-loc-list-nhap-hang::-webkit-scrollbar {
  display: none;
}

.nut-loc-nhom-nhap {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1.5px solid #8a5a36;
  background: rgba(43, 25, 14, 0.92);
  color: #f3e2c7;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s ease, background 0.12s ease;
}

.nut-loc-nhom-nhap.dang-chon {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  border-color: #fffbeb;
  color: #3b1806;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.45);
}

.nut-loc-nhom-nhap.co-mon-chon:not(.dang-chon) {
  border-color: #4ade80;
  color: #bbf7d0;
}

.nut-loc-nhom-nhap.chua-mo {
  opacity: 0.78;
  border-style: dashed;
}

.nut-loc-nhom-nhap.nut-mo-rong-list-nhap {
  margin-left: auto;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: #bfdbfe;
  color: #ffffff;
}

/* Danh sách cuộn dọc các mặt hàng */
.danh-sach-items-nhap-hang {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px;
  min-height: 0;
  border-radius: 8px;
  background: rgba(24, 13, 7, 0.55);
  border: 1px solid rgba(161, 108, 62, 0.45);
}

.dong-item-nhap-hang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 3px 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #b45309;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
  overflow: hidden;
}

.dong-item-nhap-hang.dang-co-chon {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #16a34a;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dong-item-nhap-hang.dong-item-sale-si:not(.dang-co-chon) {
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #e11d48;
}

.cot-trai-item-list {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.icon-item-list-nhap {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(180, 83, 9, 0.3);
}

.thong-tin-item-nhap-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.dong-ten-item-nhap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
}

.ten-item-nhap {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 900;
  color: #291305;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tag-sale-item-nhap {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 4px;
  background: #dc2626;
  color: #fffbeb;
  font-size: 8.5px;
  font-weight: 900;
  white-space: nowrap;
}

.tag-ton-kho-item-nhap {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(120, 53, 15, 0.14);
  color: #572508;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.tag-ton-kho-item-nhap.sap-het {
  background: #ea580c;
  color: #ffffff;
}

.dong-gia-item-nhap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  line-height: 1.15;
  height: 15px;
  min-width: 0;
  overflow: hidden;
}

.don-gia-item-nhap {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  color: #78350f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thanh-tien-item-dang-chon {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 900;
  color: #15803d;
  background: rgba(187, 247, 208, 0.85);
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid #22c55e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cụm nút -10, +10, +15, +20 bên phải mỗi dòng item (luôn cố định độ rộng) */
.cum-nut-cong-item-list {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.nut-cong-nhap-so {
  width: 31px;
  min-width: 31px;
  height: 27px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1.5px solid #1e293b;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.65);
  transition: transform 0.08s ease, filter 0.1s ease;
  touch-action: manipulation;
  box-sizing: border-box;
}

.nut-cong-nhap-so:active {
  transform: translateY(1px) scale(0.96);
}

.nut-cong-nhap-so.nut-cong-1 {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  border-color: #92400e;
  color: #3b1806;
}

.nut-cong-nhap-so.nut-cong-5 {
  background: linear-gradient(180deg, #86efac 0%, #16a34a 100%);
  border-color: #14532d;
  color: #052e16;
}

.nut-cong-nhap-so.nut-cong-10 {
  background: linear-gradient(180deg, #93c5fd 0%, #2563eb 100%);
  border-color: #1e3a8a;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.8);
}

.nut-cong-nhap-so.nut-tru-nhap-so {
  width: 28px;
  min-width: 28px;
  padding: 0 3px;
  background: linear-gradient(180deg, #fecaca 0%, #ef4444 100%);
  border-color: #7f1d1d;
  color: #ffffff;
}

.nut-cong-nhap-so.nut-tru-nhap-so.nut-tru-an {
  visibility: hidden;
  pointer-events: none;
}

/* Thanh đáy chốt đơn: Hiện tổng tiền và nút bấm Nhập Hàng 1 lần */
.thanh-chot-nhap-hang-1-lan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 36px;
  padding: 2px 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2b180d 0%, #1b0e06 100%);
  border: 1.5px solid #d97706;
  box-sizing: border-box;
}

.cum-tong-tien-nhap-list {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

.noi-dung-tong-tien-nhap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.nhan-so-mon-da-cong {
  padding: 1px 6px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.so-tong-tien-nhap {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  color: #fde047;
  white-space: nowrap;
}

.so-tong-tien-nhap.vuot-ngan-sach {
  color: #f87171;
}

.goi-y-bam-cong-nhap {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nut-xoa-gio-nhap {
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid #94a3b8;
  background: rgba(51, 65, 85, 0.9);
  color: #f8fafc;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}

.cum-nut-chot-nhap-list {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.nut-chot-nhap-1-lan {
  height: 29px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1.5px solid #64748b;
  background: rgba(51, 65, 85, 0.85);
  color: #cbd5e1;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, filter 0.12s ease;
}

.nut-chot-nhap-1-lan.san-sang-nhap {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border-color: #dcfce7;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(5, 46, 22, 0.9);
  animation: nhapNhayNutChoSi 1.2s ease-in-out infinite;
}

.nut-chot-nhap-1-lan.khong-du-tien {
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  border-color: #fecaca;
  color: #ffffff;
}

.kien-hang-cho-si-tren-ban.kien-hang-dang-chon-tam {
  border-style: dashed;
  border-color: #4ade80;
  background: rgba(20, 83, 45, 0.88);
}

.badge-so-luong-kien-si.badge-kien-tam {
  background: #f59e0b;
  color: #291305;
}

.nut-nhap-1-lan-tren-ban {
  background: linear-gradient(180deg, #fde047 0%, #ea580c 100%);
  border-color: #fffbeb;
  color: #291305;
  font-weight: 900;
  animation: nhapNhayNutChoSi 1.15s ease-in-out infinite;
}

.hop-mo-ke-trong-list-nhap {
  grid-column: 1 / -1;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(30, 17, 9, 0.92);
  border: 1.5px solid #d97706;
  color: #fef3c7;
}

.thong-tin-mo-ke-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chu-mo-ke-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

.cum-nut-mo-ke-list {
  display: flex;
  align-items: center;
  gap: 8px;
}