@font-face {
  font-family: 'Viet Pixel Game';
  src:
    url('assets/fonts/Viet_Pixel_Game-production.ttf') format('truetype'),
    url('assets/fonts/Viet_Pixel_Game-draft.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-signboard: 'Paytone One', 'Nunito', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-pixel: 'Nunito', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-hand: var(--font-body);
  --bg-page: #18110c;
  --bg-shop-wall: #fdf3dc;
  --bg-alley: #cfe8f3;
  --bg-counter: #8c5230;
  --bg-counter-top: #c68b59;
  --accent-red: #d62828;
  --accent-yellow: #fcbf49;
  --accent-green: #2a9d8f;
  --text-dark: #2b1d14;
  --card-bg: #fffdf7;
  --border-warm: #dfc59f;
}

html[data-font-game='paytone'] {
  --font-signboard: 'Paytone One', 'Nunito', 'Be Vietnam Pro', sans-serif;
  --font-pixel: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-hand: var(--font-body);
}

html[data-font-game='coiny'] {
  --font-signboard: 'Coiny', 'Nunito', 'Be Vietnam Pro', sans-serif;
  --font-pixel: 'Coiny', 'Nunito', 'Be Vietnam Pro', sans-serif;
  --font-body: 'Nunito', 'Be Vietnam Pro', sans-serif;
  --font-hand: var(--font-body);
}

html[data-font-game='nunito'] {
  --font-signboard: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-pixel: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-hand: var(--font-body);
}

html[data-font-game='chakra'] {
  --font-signboard: 'Chakra Petch', 'Be Vietnam Pro', sans-serif;
  --font-pixel: 'Chakra Petch', 'Be Vietnam Pro', sans-serif;
  --font-body: 'Chakra Petch', 'Be Vietnam Pro', sans-serif;
  --font-hand: var(--font-body);
}

html[data-font-game='mali'] {
  --font-signboard: 'Mali', 'Nunito', cursive;
  --font-pixel: 'Mali', 'Be Vietnam Pro', sans-serif;
  --font-body: 'Mali', 'Be Vietnam Pro', sans-serif;
  --font-hand: var(--font-body);
}

html[data-font-game='viet_pixel'] {
  --font-signboard: 'Viet Pixel Game', 'Be Vietnam Pro', monospace;
  --font-pixel: 'Viet Pixel Game', 'Be Vietnam Pro', monospace;
  --font-body: 'Be Vietnam Pro', sans-serif;
  --font-hand: var(--font-body);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
  font-synthesis: none;
}

body {
  background: var(--bg-page);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-synthesis: none;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: auto;
  touch-action: pan-y;
}

.anh-sprite-svg {
  display: block;
  flex-shrink: 0;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(43, 29, 20, 0.35));
}

/* KHUNG HIỂN THỊ FULL MÀN HÌNH DỌC CHUẨN MOBILE */
#app {
  width: 100%;
  max-width: 580px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg-shop-wall);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.85);
  overflow-x: clip;
  touch-action: pan-y;
}

/* 4 PHONG CÁCH BẢNG HIỆU ĐỒNG BỘ VỚI SPRITE */
.thanh-dau {
  padding: 6px 9px;
  border-bottom: 3px solid #fcbf49;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
}

.thanh-dau.bang-hieu-vang-do {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-bottom-color: #991b1b;
  color: #7f1d1d;
}

.thanh-dau.bang-hieu-vang-do .ten-tiem {
  color: #991b1b;
  text-shadow: 1.5px 1.5px 0 #fef3c7;
}

.thanh-dau.bang-hieu-vang-do .phu-de-tiem {
  color: #451a03;
}

.thanh-dau.bang-hieu-xanh-duong {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border-bottom-color: #fde047;
  color: #fff;
}

.thanh-dau.bang-hieu-xanh-la {
  background: linear-gradient(180deg, #15803d 0%, #14532d 100%);
  border-bottom-color: #fef3c7;
  color: #fff;
}

.thanh-dau.bang-hieu-do-son,
.thanh-dau.bang-hieu-neon {
  background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%);
  border-bottom-color: #fbbf24;
  color: #fef08a;
}

.thanh-dau.bang-hieu-do-son .ten-tiem,
.thanh-dau.bang-hieu-neon .ten-tiem {
  color: #fde047;
  text-shadow: 2px 2px 0 #2b0707;
}

.thanh-dau.bang-hieu-kem-xua {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-bottom-color: #1d4ed8;
  color: #7f1d1d;
}

.thanh-dau.bang-hieu-kem-xua .ten-tiem {
  color: #dc2626;
  text-shadow: 1.5px 1.5px 0 #1e3a8a;
}

.thanh-dau.bang-hieu-go-xua {
  background: linear-gradient(180deg, #451a03 0%, #231007 100%);
  border-bottom-color: #d97706;
  color: #fef08a;
}

.thanh-dau.bang-hieu-go-xua .ten-tiem {
  color: #fbbf24;
  text-shadow: 2px 2px 0 #140803;
}

.bang-hieu-chinh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.ten-tiem-box {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

.khoi-chu-bang-hieu {
  min-width: 0;
}

.ten-tiem {
  font-family: var(--font-pixel);
  font-size: 1.08rem;
  font-weight: 800;
  color: #ffe66d;
  text-shadow: 2px 2px 0 #2b1d14;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phu-de-tiem {
  font-size: 0.65rem;
  color: #fffbeb;
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phu-de-gel {
  font-size: 0.68rem;
  color: #6b4423;
  display: block;
}

.khoi-nhap-day-du {
  flex: 1;
}

.cum-nut-dau {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.nut-nho {
  background: #ffe66d;
  color: #3b1c0a;
  border: 2px solid #2b1d14;
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.nut-nho:active {
  transform: scale(0.95);
}

.nut-studio {
  background: #00f5d4;
  color: #0b2545;
}

.thanh-chi-so {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(24, 15, 9, 0.58);
  padding: 4px 6px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.chi-so-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

/* SÂN KHẤU 2D QUẦY TẠP HÓA FULL MÀN HÌNH DỌC & CAMERA ZOOM */
.khung-san-khau-ngoai {
  position: relative;
  width: 100%;
  height: calc(100dvh - 68px);
  min-height: 520px;
  overflow: hidden;
  border-bottom: 3.5px solid #2b1d14;
  background: #5c3d2e;
  flex-shrink: 0;
}

.san-khau-quay {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('assets/sprites/bg_quay_tiem_trong.png?v=20261021v108');
  background-size: 100% 100%;
  background-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
  transform-origin: center center;
}

/* LỚP TIỀN CẢNH MẶT BÀN GỖ & MÁY TÍNH TIỀN CHE NGANG BỤNG NPC ĐÚNG MÉP BÀN (y = 83.6%) */
.lop-mat-ban-che-npc {
  position: absolute;
  inset: 0;
  background-image: url('assets/sprites/bg_quay_tiem_trong.png?v=20261021v108');
  background-size: 100% 100%;
  background-position: center bottom;
  clip-path: polygon(0% 83.6%, 1.2% 81.5%, 5.5% 67.8%, 19.2% 67.8%, 21.2% 83.6%, 100% 83.6%, 100% 100%, 0% 100%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 8;
}

/* LỚP HÀNG HÓA PIXEL TRÊN TỪNG KỆ ĐÃ MỞ (ĐÈ KHỚP 100% LÊN KỆ TRỐNG bg_quay_tiem_trong.png) */
.lop-ke-da-mo {
  position: absolute;
  inset: 0;
  background-image: url('assets/sprites/bg_quay_tiem.png?v=20261021v108');
  background-size: 100% 100%;
  background-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  z-index: 2;
}

.lop-ke-da-mo.lop-day-nhom_mi {
  clip-path: polygon(0% 0%, 29.5% 0%, 29.5% 48.8%, 0% 51.2%);
}

.lop-ke-da-mo.lop-day-nhom_giavi {
  clip-path: polygon(0% 51.2%, 29.5% 48.8%, 29.5% 84.5%, 0% 84.5%);
}

.lop-ke-da-mo.lop-day-nhom_banhkeo {
  clip-path: polygon(31.5% 0%, 70% 0%, 70% 28.6%, 31.5% 28.6%);
}

.lop-ke-da-mo.lop-day-nhom_giaikhat {
  clip-path: polygon(68.8% 35.5%, 74.8% 35.5%, 74.8% 76.5%, 68.8% 72%);
}

.lop-ke-da-mo.lop-day-nhom_tappham {
  clip-path: polygon(79.2% 38.5%, 81.4% 38.5%, 81.4% 31.2%, 82.6% 31.2%, 82.6% 24.0%, 88.0% 21.5%, 100% 21.5%, 100% 57.5%, 79.2% 53.6%);
}

.lop-ke-da-mo.lop-day-nhom_dolanh {
  clip-path: polygon(72.0% 75.0%, 75.2% 75.0%, 75.2% 58.2%, 79.2% 53.6%, 100% 57.5%, 100% 100%, 72.0% 100%);
}

/* Cụm hũ bánh gấu nắp vàng & cây kẹo mút Chupa Chups đặt TRÊN mặt bàn gỗ (Đã bỏ hũ kẹo nắp đỏ đầu tiên để nhường chỗ cho Linh Vật Mặt Bàn) */
.lop-ke-da-mo.lop-hu-keo-tien-canh {
  display: block !important;
  clip-path: polygon(81.5% 74.5%, 90.5% 74.5%, 91.5% 70.5%, 91.5% 57.5%, 100% 57.5%, 100% 100%, 81.5% 100%);
  z-index: 8;
}

/* ================= HIỆU ỨNG SÁNG KỆ & TỦ LẠNH KHI CHỌN (CHỚP SÁNG 1 LẦN RỒI TẮT) ================= */
.khung-anh-sang-ke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.khung-anh-sang-ke.ke-chop-1-lan {
  animation: chopSangKe1Lan 0.52s ease-out 1 forwards;
}

.san-khau-quay:has(.anh-sang-nhom_dolanh.ke-chop-1-lan) .lop-hu-keo-tien-canh {
  animation: chopSangHuKeo1Lan 0.52s ease-out 1 forwards;
}

@keyframes chopSangKe1Lan {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(253, 224, 71, 0.92));
  }
  100% {
    opacity: 0;
    filter: none;
  }
}

@keyframes chopSangHuKeo1Lan {
  0%,
  100% {
    filter: none;
  }
  28% {
    filter: brightness(1.26) saturate(1.16) contrast(1.04) drop-shadow(0 0 8px rgba(253, 224, 71, 0.85));
  }
}

/* Lớp cha chứa filter: blur() nằm NGOÀI clip-path để ánh sáng đổ blur lan tỏa ra xung quanh kệ/tủ lạnh */
.khung-blur-ngoai-ke {
  position: absolute;
  inset: 0;
  filter: blur(9px) drop-shadow(0 0 12px rgba(255, 215, 85, 0.92)) drop-shadow(0 0 22px rgba(245, 158, 11, 0.65));
  opacity: 0.92;
}

.lop-ke-hat-sang {
  position: absolute;
  inset: 0;
  background-image: url('assets/sprites/bg_quay_tiem.png?v=20261021v108');
  background-size: 100% 100%;
  background-position: center bottom;
  background-color: rgba(255, 220, 95, 0.72);
  background-blend-mode: screen;
  filter: brightness(1.65) saturate(1.45);
}

.lop-ke-hat-sang.ke-trong {
  background-image: url('assets/sprites/bg_quay_tiem_trong.png?v=20261021v108');
}

/* Lớp kệ/tủ lạnh sắc nét sáng bừng lên nằm đè lên trên lớp hào quang blur */
.lop-ke-sang-ro {
  position: absolute;
  inset: 0;
  background-image: url('assets/sprites/bg_quay_tiem.png?v=20261021v108');
  background-size: 100% 100%;
  background-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: brightness(1.26) saturate(1.16) contrast(1.04);
}

.lop-ke-sang-ro.ke-trong {
  background-image: url('assets/sprites/bg_quay_tiem_trong.png?v=20261021v108');
}

/* Đa giác 3D ôm sát từng kệ hàng, tủ lạnh Coca-Cola đỏ và tủ kem */
.poly-ke-nhom_mi {
  clip-path: polygon(
    0.5% 5.5%,
    14.5% 5.5%,
    19.5% 11.5%,
    28.5% 21.5%,
    29.5% 30%,
    29.5% 48.8%,
    12.2% 51.2%,
    0.5% 51.2%
  );
}

.poly-ke-nhom_mi.ke-trong {
  clip-path: polygon(0.8% 20%, 12.2% 20%, 29.4% 30.2%, 29.4% 48.8%, 12.2% 51.2%, 0.8% 51.2%);
}

.poly-ke-nhom_giavi {
  clip-path: polygon(
    0.5% 51.2%,
    12.2% 51.2%,
    29.5% 48.8%,
    29.5% 81.5%,
    24.5% 83.4%,
    20.5% 83.4%,
    20.5% 80%,
    18.8% 68%,
    6.5% 68%,
    0.5% 74.5%
  );
}

.poly-ke-nhom_banhkeo {
  clip-path: polygon(
    31.5% 2.5%,
    69.5% 2.5%,
    69.5% 28.6%,
    54% 28.6%,
    54% 5.5%,
    46.5% 5.5%,
    46.5% 27.8%,
    31.5% 27.8%
  );
}

.poly-ke-nhom_banhkeo.ke-trong {
  clip-path: polygon(31.2% 2%, 69.8% 2%, 69.8% 8.8%, 31.2% 8.8%);
}

/* Tủ Mát Đỏ (Tủ lạnh Coca-Cola 3D nguyên khối) */
.poly-ke-nhom_giaikhat {
  clip-path: polygon(
    68.4% 32.2%,
    74.8% 29%,
    85.2% 29%,
    85.2% 37.5%,
    79.5% 38.5%,
    79.5% 61.2%,
    75.2% 64%,
    75.2% 83.4%,
    72% 83.4%,
    68.4% 78.5%
  );
}

/* Kệ Phải */
.poly-ke-nhom_tappham {
  clip-path: polygon(
    79.5% 38.5%,
    82% 24.0%,
    95.5% 21.5%,
    100% 21.5%,
    100% 57.5%,
    79.5% 53.6%
  );
}

.poly-ke-nhom_tappham.ke-trong {
  clip-path: polygon(79.5% 38.5%, 100% 33.5%, 100% 57.5%, 79.5% 53.6%);
}

/* Tủ Kem & Hũ */
.poly-ke-nhom_dolanh {
  clip-path: polygon(72.0% 75.0%, 75.2% 75.0%, 75.2% 60%, 84.5% 58.2%, 100% 58.2%, 100% 100%, 72.0% 100%);
}

.san-khau-quay.thoi-tiet-nang {
  filter: saturate(1.05) brightness(1.02);
}

.san-khau-quay.thoi-tiet-nang.buoi-trua {
  filter: saturate(1.12) brightness(1.07) contrast(1.03);
}

.san-khau-quay.thoi-tiet-nang.buoi-chieu {
  filter: sepia(0.14) saturate(1.16) brightness(0.96) contrast(1.04);
}

.san-khau-quay.thoi-tiet-mua {
  filter: saturate(0.96) brightness(0.97) contrast(1.02);
}

.san-khau-quay.thoi-tiet-dem {
  filter: saturate(0.95) brightness(0.76) contrast(1.1);
}

/* CAMERA ZOOM SCALE TARGETS */
.san-khau-quay.zoom-trom-bimbim {
  transform: scale(1.52) translate(22%, 10%);
}

.san-khau-quay.zoom-chuot-mi {
  transform: scale(1.55) translate(-24%, -14%);
}

.san-khau-quay.zoom-khach-chinh {
  transform: scale(1.42) translate(0%, 6%);
}

.san-khau-quay.zoom-to-500k {
  transform: scale(1.56) translate(4%, -4%);
}

.san-khau-quay.zoom-con-no {
  transform: scale(1.48) translate(-12%, 16%);
}

.khung-nen-tap-hoa-xanh-vang.zoom-muc-nho .san-khau-quay.dang-zoom {
  transform: scale(1.25);
}

.khung-nen-tap-hoa-xanh-vang.zoom-muc-manh .san-khau-quay.dang-zoom {
  transform: scale(1.72);
}

.rung-man-hinh {
  animation: rungLac 0.38s ease-in-out infinite;
}

@keyframes rungLac {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(4px, -2px); }
  75% { transform: translate(-3px, -2px); }
}

.lop-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle at 50% 45%, transparent 28%, rgba(0, 0, 0, 0.72) 85%);
  border: 4px solid #ffbe0b;
  z-index: 12;
}

.lop-spotlight.hien {
  opacity: 1;
}

.nhan-zoom-khan {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: #d62828;
  color: #fff;
  font-family: var(--font-pixel);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 2px 12px;
  border-radius: 999px;
  border: 2px solid #ffe66d;
  z-index: 15;
  white-space: nowrap;
}

.lop-mua {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    105deg,
    transparent,
    transparent 14px,
    rgba(255, 255, 255, 0.38) 14px,
    rgba(255, 255, 255, 0.38) 16px
  );
  animation: muaRoi 0.5s linear infinite;
  z-index: 8;
}

@keyframes muaRoi {
  from { background-position: 0 0; }
  to { background-position: -30px 60px; }
}

/* 6 VÙNG KỆ HÀNG TƯƠNG TÁC TRỰC TIẾP TRÊN GÓC NHÌN QUẦY BÁN (TÁCH BIỆT, KHÔNG ĐÈ NHAU) */
/* Vùng bấm tương tác kệ & tủ lạnh hoàn toàn trong suốt (không có ô vuông vàng) */
.vung-ke-san-khau {
  position: absolute;
  z-index: 6;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.vung-ke-san-khau:hover,
.vung-ke-san-khau.dang-mo-ke,
.vung-ke-san-khau.ke-co-mon-can {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.nhan-vung-ke,
.nhan-ke-khoa {
  display: none !important;
}

/* Tọa độ vùng bấm khớp với từng kệ & tủ lạnh */
.vung-ke-mi {
  top: 6%;
  left: 1%;
  width: 29%;
  height: 44%;
}

.vung-ke-giavi {
  top: 50%;
  left: 1%;
  width: 29%;
  height: 32%;
}

.vung-ke-banhkeo {
  top: 2%;
  left: 31%;
  width: 38.5%;
  height: 26%;
}

.vung-ke-giaikhat {
  top: 29%;
  right: 20.5%;
  width: 11.5%;
  height: 52%;
}

.vung-ke-tappham {
  top: 20%;
  right: 0.5%;
  width: 20%;
  height: 38%;
}

.vung-ke-dolanh {
  bottom: 16.5%;
  right: 0.5%;
  width: 24.5%;
  height: 24%;
}

.chu-quay-san-khau {
  position: absolute;
  bottom: 4px;
  left: 6px;
  z-index: 10;
  cursor: pointer;
}

.doi-tuong-khan-cap {
  position: absolute;
  z-index: 11;
  cursor: pointer;
  animation: nhapNhoKhanCap 0.45s ease-in-out infinite alternate;
}

.doi-tuong-khan-cap.vi-tri-trom {
  top: 30px;
  left: 4px;
}

.doi-tuong-khan-cap.vi-tri-chuot {
  bottom: 62px;
  right: 8px;
}

.doi-tuong-khan-cap.vi-tri-to-500k {
  bottom: 70px;
  right: 22px;
}

.doi-tuong-khan-cap.vi-tri-con-no {
  top: 24px;
  right: 14px;
}

.doi-tuong-khan-cap.vi-tri-oto-cua {
  top: 41%;
  left: 53%;
}

.doi-tuong-khan-cap.vi-tri-ve-so {
  bottom: 18%;
  right: 18%;
}

@keyframes nhapNhoKhanCap {
  from { transform: scale(0.95) rotate(-4deg); }
  to { transform: scale(1.08) rotate(4deg); }
}

/* Khu vực Khách Hàng Đứng Trước Quầy Bán: KHUẤT NGANG MÉP BÀN (z-index: 6 < 8) & ĐỨNG SAU CÂY QUẠT (z-index: 9) */
.khu-khach-hang {
  position: absolute;
  bottom: 16.2%;
  left: 49%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.38));
}

.cum-bong-thoai-khach-tren {
  position: absolute;
  top: 6px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 14;
  pointer-events: none;
}

.dong-ten-kien-nhan-khach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(24, 15, 9, 0.9);
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  border: 1.5px solid #2b1d14;
}

.bong-thoai-khach {
  font-family: var(--font-pixel);
  background: rgba(255, 253, 247, 0.97);
  color: #2b1d14;
  border: 2px solid #2b1d14;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.24;
  box-shadow: 0 3px 0 #2b1d14;
  margin-bottom: 3px;
  max-width: 280px;
  text-align: center;
}

.ten-khach-badge {
  font-family: var(--font-pixel);
  background: #fde047;
  color: #2b1d14;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid #2b1d14;
}

.thanh-kien-nhan {
  width: 78px;
  height: 7px;
  accent-color: #2a9d8f;
}

/* KHUNG ĐƯỜNG HẺM SỐNG ĐỘNG NGOÀI CỬA SẮT KÉO (5 KHUNG CẢNH THEO NGÀY + BẦU TRỜI 3 BUỔI + MƯA NGOÀI TRỜI) */
.khung-duong-hem-dong {
  position: absolute;
  left: 37.4%;
  width: 25.1%;
  top: 31.5%;
  height: 40.5%;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: filter 0.6s ease;
}

/* Sắc độ ngoài hẻm theo 3 buổi: Sáng xanh trong - Trưa nắng oi bức - Chiều mát mẻ nhẹ nhàng */
.khung-duong-hem-dong.hem-buoi-sang:not(.hem-dang-mua) {
  filter: saturate(1.04) brightness(1.01) contrast(1.02);
}

.khung-duong-hem-dong.hem-buoi-trua:not(.hem-dang-mua) {
  filter: saturate(1.10) brightness(1.04) contrast(1.04) sepia(0.04);
}

.khung-duong-hem-dong.hem-buoi-chieu:not(.hem-dang-mua) {
  filter: saturate(1.05) brightness(0.99) contrast(1.02);
}

.khung-duong-hem-dong.hem-buoi-toi {
  filter: saturate(0.92) brightness(0.72) contrast(1.08);
}

/* LỚP BẦU TRỜI & KHÍ HẬU NGOÀI HẺM KHỚP THEO GIỜ */
.lop-bau-troi-theo-buoi {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Khe bầu trời giữa 2 tòa nhà đối diện (x=41.5%..57.5%, y=0%..21%) */
.vung-bau-troi-khe-hem {
  position: absolute;
  left: 41.2%;
  width: 16.2%;
  top: 0;
  height: 21%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 62%);
  transition: background 0.6s ease, opacity 0.6s ease;
}

/* 1. Buổi Sáng: Bầu trời xanh trong trẻo + tia nắng sớm dịu */
.bau-troi-sang .vung-bau-troi-khe-hem {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.72) 0%, rgba(125, 211, 252, 0.45) 65%, rgba(224, 242, 254, 0.1) 100%);
}

.tia-nang-som-hem {
  position: absolute;
  top: 0;
  left: 36%;
  width: 34%;
  height: 68%;
  background: linear-gradient(162deg, rgba(186, 230, 253, 0.32) 0%, rgba(254, 249, 195, 0.18) 45%, transparent 82%);
  clip-path: polygon(18% 0%, 64% 0%, 100% 100%, 0% 100%);
}

/* 2. Buổi Trưa: Bầu trời nắng gắt vàng rực + hơi nóng oi bức bốc lên từ mặt đường nhựa */
.bau-troi-trua .vung-bau-troi-khe-hem {
  background: linear-gradient(180deg, rgba(254, 240, 138, 0.88) 0%, rgba(253, 224, 71, 0.58) 55%, rgba(251, 191, 36, 0.22) 100%);
}

.hoi-nong-oi-buc-trua {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 49% 6%, rgba(254, 240, 138, 0.48) 0%, rgba(251, 191, 36, 0.18) 38%, transparent 70%),
    linear-gradient(0deg, rgba(251, 191, 36, 0.18) 0%, rgba(254, 215, 170, 0.12) 32%, transparent 60%);
  animation: hoiNongOiBuc 1.8s ease-in-out infinite alternate;
}

@keyframes hoiNongOiBuc {
  0% {
    opacity: 0.72;
    transform: translateY(0px) scaleY(1);
  }
  100% {
    opacity: 1;
    transform: translateY(-2px) scaleY(1.03);
  }
}

/* 3. Buổi Chiều: Bầu trời dịu mát xanh tím pastel + làn gió chiều nhẹ nhàng thổi ngang hẻm */
.bau-troi-chieu .vung-bau-troi-khe-hem {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.62) 0%, rgba(167, 139, 250, 0.38) 55%, rgba(253, 186, 116, 0.25) 100%);
}

.lan-gio-chieu-mat-me {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.14) 0%, rgba(167, 243, 208, 0.08) 55%, rgba(253, 186, 116, 0.1) 100%);
  overflow: hidden;
}

.vet-gio-chieu {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(224, 242, 254, 0.78), rgba(167, 243, 208, 0.65), transparent);
  animation: gioChieuThoi 3.6s linear infinite;
}

.vet-gio-1 {
  top: 44%;
  width: 46%;
  animation-delay: -0.4s;
}

.vet-gio-2 {
  top: 64%;
  width: 38%;
  animation-delay: -2.1s;
}

@keyframes gioChieuThoi {
  0% {
    transform: translateX(240%);
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    transform: translateX(-140%);
    opacity: 0;
  }
}

/* 4. Buổi Tối (Chốt sổ): Bầu trời đêm xanh thẫm */
.bau-troi-toi .vung-bau-troi-khe-hem {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 41, 59, 0.68) 70%, rgba(51, 65, 85, 0.25) 100%);
}

/* 5. Khi Trời Mưa: Bầu trời mây xám xanh mưa rào (dùng soft-light để không che dây điện đen) */
.hem-dang-mua .vung-bau-troi-khe-hem {
  background: linear-gradient(
    180deg,
    rgba(100, 116, 139, 0.45) 0%,
    rgba(148, 163, 184, 0.28) 65%,
    rgba(203, 213, 225, 0.08) 100%
  );
  mix-blend-mode: soft-light;
}

/* HIỆU ỨNG TRỜI MƯA NGOÀI TRỜI 3 LỚP CHIỀU SÂU + GIỌT NHIỂU MÁI HIÊN & VÒNG SÓNG VŨNG NƯỚC */
.lop-mua-ngoai-troi {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* Lớp sương mưa dịu nhẹ ở đỉnh mái hiên & mặt đường ướt */
.lop-suong-mua-hem {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(148, 163, 184, 0.16) 0%,
      transparent 28%,
      transparent 68%,
      rgba(186, 230, 253, 0.1) 86%,
      transparent 100%
    );
}

.cum-hat-mua-roi {
  position: absolute;
  inset: -14% -6% 0 -6%;
  pointer-events: none;
}

/* Từng hạt mưa rời rạc có đầu sáng trắng xanh & đuôi mờ dần chuẩn Pixel Art */
.hat-mua-roi {
  position: absolute;
  top: -12%;
  height: var(--cao-mua, 16px);
  border-radius: 999px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: hatMuaRoiChuan var(--chu-ky-mua, 0.52s) linear infinite;
  animation-delay: var(--tre-mua, 0s);
}

.hat-mua-xa {
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(224, 242, 254, 0) 0%,
    rgba(186, 230, 253, 0.28) 45%,
    rgba(224, 242, 254, 0.52) 100%
  );
  opacity: 0.55;
}

.hat-mua-vua {
  width: 1.35px;
  background: linear-gradient(
    180deg,
    rgba(224, 242, 254, 0) 0%,
    rgba(186, 230, 253, 0.52) 50%,
    rgba(240, 249, 255, 0.88) 100%
  );
  box-shadow: 0 1px 2px rgba(186, 230, 253, 0.25);
  opacity: 0.78;
}

.hat-mua-gan {
  width: 1.7px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(186, 230, 253, 0.65) 48%,
    rgba(255, 255, 255, 0.96) 100%
  );
  box-shadow: 0 1px 3px rgba(224, 242, 254, 0.35);
  opacity: 0.9;
}

@keyframes hatMuaRoiChuan {
  0% {
    transform: translate3d(16px, -18px, 0) rotate(11deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  86% {
    opacity: 0.92;
  }
  100% {
    transform: translate3d(-34px, 245px, 0) rotate(11deg);
    opacity: 0;
  }
}

/* Giọt nước đọng ở mép trên mái tôn hiên cửa sắt rồi nhiểu thẳng xuống thềm */
.cum-giot-mai-hien {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

.giot-mua-mai-hien {
  position: absolute;
  top: 0;
  width: 2.2px;
  height: 5px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(180deg, rgba(186, 230, 253, 0.65), rgba(255, 255, 255, 0.96));
  animation: giotMaiHienNhieu var(--chu-ky-giot, 1.4s) ease-in infinite;
  animation-delay: var(--tre-giot, 0s);
}

@keyframes giotMaiHienNhieu {
  0% {
    transform: translateY(0) scale(0.45);
    opacity: 0.5;
  }
  38% {
    transform: translateY(1px) scale(1);
    opacity: 0.95;
  }
  44% {
    transform: translateY(6px) scaleX(0.75) scaleY(1.6);
    opacity: 1;
  }
  88% {
    transform: translateY(215px) scaleX(0.65) scaleY(1.9);
    opacity: 0.85;
  }
  92%, 100% {
    transform: translateY(222px) scale(0.2);
    opacity: 0;
  }
}

/* Cụm vòng sóng nước & tia nước bắn trên đúng mặt vũng nước đường nhựa & thềm gạch */
.cum-vong-nuoc-mua {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.diem-mua-nhieu {
  position: absolute;
  width: 14px;
  height: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(-50%);
  --delay-mua: 0s;
  --chu-ky-nhieu: 0.88s;
}

/* Giọt nước chạm mặt đường và nảy 2 hạt nhỏ hình chữ V */
.hat-nuoc-nhieu {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 1.2px;
  height: 4.5px;
  background: rgba(224, 242, 254, 0.9);
  transform: translateX(-50%);
  animation: hatNuocNhieuRoi var(--chu-ky-nhieu) ease-in infinite;
  animation-delay: var(--delay-mua);
}

.hat-nuoc-nhieu::before,
.hat-nuoc-nhieu::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 1.5px;
  height: 1.5px;
  background: rgba(240, 249, 255, 0.92);
  border-radius: 50%;
  opacity: 0;
}

.hat-nuoc-nhieu::before {
  left: -2px;
  animation: hatNuocBanTrai var(--chu-ky-nhieu) ease-out infinite;
  animation-delay: var(--delay-mua);
}

.hat-nuoc-nhieu::after {
  right: -2px;
  animation: hatNuocBanPhai var(--chu-ky-nhieu) ease-out infinite;
  animation-delay: var(--delay-mua);
}

/* Vòng sóng nước mảnh nhẹ tinh tế trên mặt vũng nước */
.vong-nuoc-mua {
  position: relative;
  width: 11px;
  height: 3px;
  border: 1px solid rgba(224, 242, 254, 0.72);
  border-radius: 50%;
  animation: vongNuocLanToa var(--chu-ky-nhieu) ease-out infinite;
  animation-delay: var(--delay-mua);
}

.vong-nuoc-mua::after {
  content: '';
  position: absolute;
  inset: 0.5px 1.5px;
  border: 0.8px solid rgba(186, 230, 253, 0.48);
  border-radius: 50%;
}

@keyframes hatNuocNhieuRoi {
  0% {
    transform: translate(-50%, -10px) scaleY(1.15);
    opacity: 0;
  }
  28% {
    transform: translate(-50%, -3px) scaleY(1);
    opacity: 0.9;
  }
  40% {
    transform: translate(-50%, 0px) scaleY(0.25);
    opacity: 0.95;
  }
  45%, 100% {
    transform: translate(-50%, 0px) scaleY(0);
    opacity: 0;
  }
}

@keyframes hatNuocBanTrai {
  0%, 36% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }
  46% {
    transform: translate(-2px, -2.5px) scale(1);
    opacity: 0.9;
  }
  70%, 100% {
    transform: translate(-4px, 0.5px) scale(0.3);
    opacity: 0;
  }
}

@keyframes hatNuocBanPhai {
  0%, 36% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }
  46% {
    transform: translate(2px, -2.5px) scale(1);
    opacity: 0.9;
  }
  70%, 100% {
    transform: translate(4px, 0.5px) scale(0.3);
    opacity: 0;
  }
}

@keyframes vongNuocLanToa {
  0%, 34% {
    transform: scale(0.2);
    opacity: 0;
  }
  44% {
    transform: scale(0.45);
    opacity: 0.82;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.diem-bam-thung-nhap-kho {
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 54%;
  height: 36%;
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
  background: rgba(251, 191, 36, 0.12);
  border: 1.5px dashed rgba(254, 240, 138, 0.85);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2px;
  animation: nhapNhayKeCan 0.9s ease-in-out infinite alternate;
}

.diem-bam-thung-nhap-kho:hover {
  background: rgba(251, 191, 36, 0.26);
  border-style: solid;
}

.nhan-thung-nhap-kho {
  font-family: var(--font-pixel);
  background: rgba(43, 29, 20, 0.92);
  color: #fde047;
  font-size: 0.56rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #f59e0b;
  white-space: nowrap;
}

.nguoi-di-bo-hem {
  position: absolute;
  left: 0;
  will-change: transform;
}

/* Làn xe máy chạy bên phải theo chiều Trái -> Phải (nửa dưới lòng đường nhựa, phía gần vỉa hè tiệm) */
.hem-track-xe-may-phai,
.hem-track-xa-phai-1 {
  bottom: 13.0%;
  z-index: 3;
  animation: diXeMaySangPhai 48s linear infinite;
  animation-delay: -1.0s;
}

/* Làn đi bộ phía bên kia đường (đi dưới lòng đường nhựa phía trước mũi xe tay ga đậu x=68%..100%) */
.hem-track-xa-trai-1 {
  bottom: 19.8%;
  z-index: 2;
  animation: diBoSangTraiXa 60s linear infinite;
  animation-delay: -4.0s;
}

.hem-track-xa-phai-2 {
  bottom: 18.8%;
  z-index: 2;
  animation: diBoSangPhaiXa 64s linear infinite;
  animation-delay: -10.0s;
}

.hem-track-xa-trai-2 {
  bottom: 20.2%;
  z-index: 2;
  animation: diBoSangTraiXa 62s linear infinite;
  animation-delay: -16.0s;
}

.hem-track-xa-phai-3 {
  bottom: 19.2%;
  z-index: 2;
  animation: diBoSangPhaiXa 56s linear infinite;
  animation-delay: -22.0s;
}

.hem-track-xa-trai-3 {
  bottom: 19.0%;
  z-index: 2;
  animation: diBoSangTraiXa 66s linear infinite;
  animation-delay: -28.0s;
}

.hem-track-xa-phai-4 {
  bottom: 20.4%;
  z-index: 2;
  animation: diBoSangPhaiXa 62s linear infinite;
  animation-delay: -34.0s;
}

.hem-track-xa-trai-4 {
  bottom: 19.6%;
  z-index: 2;
  animation: diBoSangTraiXa 64s linear infinite;
  animation-delay: -40.0s;
}

.hem-track-xa-phai-5 {
  bottom: 18.6%;
  z-index: 2;
  animation: diBoSangPhaiXa 58s linear infinite;
  animation-delay: -46.0s;
}

/* Làn vỉa hè lát gạch phía gần trước tiệm (trên bậc cửa sắt kéo) */
.hem-track-gan-phai-1 {
  bottom: 3.2%;
  z-index: 4;
  animation: diBoSangPhai 58s linear infinite;
  animation-delay: -7.0s;
}

.hem-track-gan-trai-1 {
  bottom: 4.0%;
  z-index: 4;
  animation: diBoSangTrai 54s linear infinite;
  animation-delay: -13.0s;
}

.hem-track-gan-phai-2 {
  bottom: 2.2%;
  z-index: 4;
  animation: diBoSangPhai 66s linear infinite;
  animation-delay: -19.0s;
}

.hem-track-gan-trai-2 {
  bottom: 3.6%;
  z-index: 4;
  animation: diBoSangTrai 60s linear infinite;
  animation-delay: -25.0s;
}

.hem-track-gan-phai-3 {
  bottom: 2.8%;
  z-index: 4;
  animation: diBoSangPhai 64s linear infinite;
  animation-delay: -31.0s;
}

.hem-track-gan-trai-3 {
  bottom: 3.8%;
  z-index: 4;
  animation: diBoSangTrai 56s linear infinite;
  animation-delay: -37.0s;
}

.hem-track-gan-phai-4 {
  bottom: 2.4%;
  z-index: 4;
  animation: diBoSangPhai 68s linear infinite;
  animation-delay: -43.0s;
}

.hem-track-gan-trai-4 {
  bottom: 4.2%;
  z-index: 4;
  animation: diBoSangTrai 56s linear infinite;
  animation-delay: -49.0s;
}

.hem-track-gan-phai-5 {
  bottom: 3.4%;
  z-index: 4;
  animation: diBoSangPhai 60s linear infinite;
  animation-delay: -52.0s;
}

.hem-track-gan-trai-5 {
  bottom: 2.6%;
  z-index: 4;
  animation: diBoSangTrai 64s linear infinite;
  animation-delay: -55.0s;
}

.hem-track-gan-phai-6 {
  bottom: 2.5%;
  z-index: 4;
  animation: diBoSangPhai 66s linear infinite;
  animation-delay: -58.0s;
}

.hem-track-gan-trai-6 {
  bottom: 3.9%;
  z-index: 4;
  animation: diBoSangTrai 58s linear infinite;
  animation-delay: -3.0s;
}

@keyframes diXeMaySangPhai {
  0% {
    transform: translateX(-66px);
  }
  15% {
    transform: translateX(172px);
  }
  100% {
    transform: translateX(172px);
  }
}

/* Quỹ đạo người đi bộ làn xa: lách nhẹ xuống lòng đường nhựa (translateY 5px) ở hai đầu trái/phải để đi vòng qua trước mũi xe tay ga đang đậu */
@keyframes diBoSangPhaiXa {
  0% {
    transform: translate(-62px, 4px);
  }
  4% {
    transform: translate(-10px, 3px);
  }
  7% {
    transform: translate(18px, 0px);
  }
  12% {
    transform: translate(72px, 0px);
  }
  15% {
    transform: translate(102px, 5px);
  }
  18% {
    transform: translate(166px, 5px);
  }
  100% {
    transform: translate(166px, 5px);
  }
}

@keyframes diBoSangTraiXa {
  0% {
    transform: translate(166px, 5px) scaleX(-1);
  }
  4% {
    transform: translate(100px, 5px) scaleX(-1);
  }
  7% {
    transform: translate(70px, 0px) scaleX(-1);
  }
  12% {
    transform: translate(16px, 0px) scaleX(-1);
  }
  15% {
    transform: translate(-12px, 3px) scaleX(-1);
  }
  18% {
    transform: translate(-62px, 4px) scaleX(-1);
  }
  100% {
    transform: translate(-62px, 4px) scaleX(-1);
  }
}

@keyframes diBoSangPhai {
  0% {
    transform: translateX(-62px);
  }
  18% {
    transform: translateX(166px);
  }
  100% {
    transform: translateX(166px);
  }
}

@keyframes diBoSangTrai {
  0% {
    transform: translateX(166px) scaleX(-1);
  }
  18% {
    transform: translateX(-62px) scaleX(-1);
  }
  100% {
    transform: translateX(-62px) scaleX(-1);
  }
}

/* HỆ THỐNG HOẠT ẢNH 6 FRAME BƯỚC ĐI TỰ NHIÊN (f1..f6) + BÓNG ĐỔ DƯỚI CHÂN CHO NGƯỜI ĐI BỘ & XE MÁY */
.khung-buoc-di-6-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --chu-ky-buoc: 1.22s;
}

/* Bóng đổ mặt đường tự nhiên ngay dưới bàn chân NPC đi bộ ngoài hẻm */
.khung-buoc-di-6-frame::before {
  content: '';
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(22, 14, 8, 0.56) 0%,
    rgba(28, 18, 10, 0.32) 55%,
    rgba(28, 18, 10, 0) 82%
  );
  filter: blur(0.8px);
  z-index: 0;
  pointer-events: none;
  animation: bongBuocChanHem calc(var(--chu-ky-buoc) / 2) ease-in-out infinite alternate;
}

/* Bóng đổ dài theo 2 bánh xe cho Shipper chạy xe máy */
.khung-buoc-di-6-frame.toc-do-xe-may::before {
  width: 74%;
  height: 14%;
  bottom: 1%;
  background: radial-gradient(
    ellipse at center,
    rgba(18, 12, 6, 0.62) 0%,
    rgba(24, 16, 10, 0.36) 60%,
    rgba(24, 16, 10, 0) 85%
  );
}

@keyframes bongBuocChanHem {
  0% {
    transform: translateX(-50%) scaleX(0.9);
    opacity: 0.85;
  }
  100% {
    transform: translateX(-50%) scaleX(1.08);
    opacity: 1;
  }
}

.khung-buoc-di-6-frame.toc-do-di-bo {
  --chu-ky-buoc: 1.22s;
}

.khung-buoc-di-6-frame.toc-do-chay-nhanh {
  --chu-ky-buoc: 0.92s;
}

.khung-buoc-di-6-frame.toc-do-thong-tha {
  --chu-ky-buoc: 1.48s;
}

.khung-buoc-di-6-frame.toc-do-xe-may {
  --chu-ky-buoc: 0.42s;
}

.khung-frame-di-bo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
}

.khung-frame-di-bo.buoc-f1 {
  animation: buocFrame1 var(--chu-ky-buoc) steps(1, end) infinite;
}

.khung-frame-di-bo.buoc-f2 {
  animation: buocFrame2 var(--chu-ky-buoc) steps(1, end) infinite;
}

.khung-frame-di-bo.buoc-f3 {
  animation: buocFrame3 var(--chu-ky-buoc) steps(1, end) infinite;
}

.khung-frame-di-bo.buoc-f4 {
  animation: buocFrame4 var(--chu-ky-buoc) steps(1, end) infinite;
}

.khung-frame-di-bo.buoc-f5 {
  animation: buocFrame5 var(--chu-ky-buoc) steps(1, end) infinite;
}

.khung-frame-di-bo.buoc-f6 {
  animation: buocFrame6 var(--chu-ky-buoc) steps(1, end) infinite;
}

@keyframes buocFrame1 {
  0% { opacity: 1; }
  16.67%, 100% { opacity: 0; }
}

@keyframes buocFrame2 {
  0%, 16.66% { opacity: 0; }
  16.67% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}

@keyframes buocFrame3 {
  0%, 33.32% { opacity: 0; }
  33.33% { opacity: 1; }
  50.00%, 100% { opacity: 0; }
}

@keyframes buocFrame4 {
  0%, 49.99% { opacity: 0; }
  50.00% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}

@keyframes buocFrame5 {
  0%, 66.66% { opacity: 0; }
  66.67% { opacity: 1; }
  83.33%, 100% { opacity: 0; }
}

@keyframes buocFrame6 {
  0%, 83.32% { opacity: 0; }
  83.33% { opacity: 1; }
  100% { opacity: 0; }
}

/* QUẠT BÀN CÓC XANH ĐẶT QUAY VÀO MÌNH (5 ANIMATION QUAY TRÁI - XÉO TRÁI - GIỮA - XÉO PHẢI - PHẢI + LUỒNG GIÓ) */
.khung-quat-ban-xoay {
  position: relative;
  width: 92px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.khung-canh-quat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* Chu kỳ 8 nhịp ping-pong mượt mà (5.6s — quay chậm lại gấp đôi):
   0%..12.5%   : 1. Quay hẳn sang trái (quat-goc-trai)
   12.5%..25%  : 2. Xéo trái (quat-goc-xeo-trai)
   25%..37.5%  : 3. Giữa - thẳng vào mình (quat-goc-giua)
   37.5%..50%  : 4. Xéo phải (quat-goc-xeo-phai)
   50%..62.5%  : 5. Quay hẳn sang phải (quat-goc-phai)
   62.5%..75%  : 6. Xéo phải (quat-goc-xeo-phai)
   75%..87.5%  : 7. Giữa - thẳng vào mình (quat-goc-giua)
   87.5%..100% : 8. Xéo trái (quat-goc-xeo-trai)
*/
.quat-goc-trai {
  animation: quatGocTrai 5.6s steps(1, end) infinite;
}

.quat-goc-xeo-trai {
  animation: quatGocXeoTrai 5.6s steps(1, end) infinite;
}

.quat-goc-giua {
  animation: quatGocGiua 5.6s steps(1, end) infinite;
}

.quat-goc-xeo-phai {
  animation: quatGocXeoPhai 5.6s steps(1, end) infinite;
}

.quat-goc-phai {
  animation: quatGocPhai 5.6s steps(1, end) infinite;
}

@keyframes quatGocTrai {
  0% { opacity: 1; }
  12.5%, 100% { opacity: 0; }
}

@keyframes quatGocXeoTrai {
  0% { opacity: 0; }
  12.5% { opacity: 1; }
  25% { opacity: 0; }
  87.5% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes quatGocGiua {
  0% { opacity: 0; }
  25% { opacity: 1; }
  37.5% { opacity: 0; }
  75% { opacity: 1; }
  87.5%, 100% { opacity: 0; }
}

@keyframes quatGocXeoPhai {
  0% { opacity: 0; }
  37.5% { opacity: 1; }
  50% { opacity: 0; }
  62.5% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

@keyframes quatGocPhai {
  0% { opacity: 0; }
  50% { opacity: 1; }
  62.5%, 100% { opacity: 0; }
}

/* Cụm luồng gió mát đổi hướng theo đúng 5 góc quay của quạt */
.cum-gio-quat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: huongGioQuat 5.6s steps(1, end) infinite;
}

@keyframes huongGioQuat {
  0% {
    transform: translateX(-14px) scaleX(-1);
  }
  12.5% {
    transform: translateX(-7px) scaleX(-0.85);
  }
  25% {
    transform: translateX(0px) scaleX(1.08) scaleY(1.08);
  }
  37.5% {
    transform: translateX(7px) scaleX(0.85);
  }
  50% {
    transform: translateX(14px) scaleX(1);
  }
  62.5% {
    transform: translateX(7px) scaleX(0.85);
  }
  75% {
    transform: translateX(0px) scaleX(1.08) scaleY(1.08);
  }
  87.5%, 100% {
    transform: translateX(-7px) scaleX(-0.85);
  }
}

.tia-gio-quat {
  position: absolute;
  display: block;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(167, 243, 208, 0.15), rgba(103, 232, 249, 0.92), rgba(224, 242, 254, 0.2));
  box-shadow: 0 0 4px rgba(103, 232, 249, 0.72);
}

.tia-gio-1 {
  top: 12px;
  right: -7px;
  width: 14px;
  height: 2.5px;
  animation: tiaGioBay 0.84s ease-out infinite;
}

.tia-gio-2 {
  top: 24px;
  right: -11px;
  width: 18px;
  height: 2.5px;
  animation: tiaGioBay 0.84s ease-out 0.28s infinite;
}

.tia-gio-3 {
  top: 36px;
  right: -7px;
  width: 14px;
  height: 2.5px;
  animation: tiaGioBay 0.84s ease-out 0.56s infinite;
}

@keyframes tiaGioBay {
  0% {
    opacity: 0.2;
    transform: translateX(-3px) scaleX(0.6);
  }
  50% {
    opacity: 0.95;
    transform: translateX(2px) scaleX(1.15);
  }
  100% {
    opacity: 0;
    transform: translateX(7px) scaleX(0.75);
  }
}

/* Cây quạt cóc xanh đặt trên mặt bàn gỗ giữa-trái, nhường góc trái cho Hũ Kẹo & Tiền khách đưa */
.quat-ban-tren-quay-preview {
  position: absolute;
  bottom: 1.4%;
  left: 33.5%;
  z-index: 9;
  pointer-events: none;
  filter: none;
  transform: scale(0.84);
  transform-origin: bottom center;
}

.nhan-quat-ban {
  background: #065f46;
  color: #a7f3d0;
  border-color: #10b981;
}

/* Mặt bàn quầy gỗ phía trước chứa 5 đạo cụ (z-index: 9, nằm trên mặt bàn gỗ thật của ảnh nền, trước NPC) */
.mat-ban-quay {
  position: absolute;
  bottom: 9.5%;
  left: 0;
  right: 0;
  height: 58px;
  background: transparent;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 6px 0 58px;
  z-index: 9;
}

.vat-pham-quay {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.vat-pham-quay:active {
  transform: scale(0.92);
}

.nhan-vat-pham {
  font-family: var(--font-pixel);
  background: #2b1d14;
  color: #fef08a;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.1;
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: -4px;
  white-space: nowrap;
  border: 1.5px solid #b45309;
  box-shadow: 0 1.5px 0 #000;
}

/* HUY HIỆU CHẤM ĐỎ BÁO MẶT HÀNG MỚI MỞ KHÓA (DÙNG SPRITE ui_cham_do.png) */
.cham-do-moi {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: nhapNhayChamDo 0.9s ease-in-out infinite alternate;
  z-index: 12;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
}

.cham-do-moi .anh-sprite-svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@keyframes nhapNhayChamDo {
  from { transform: scale(0.92); }
  to { transform: scale(1.08); }
}

.badge-so-mon-can {
  position: absolute;
  top: 1.5px;
  left: 2px;
  background: #10b981;
  color: #fff;
  border: 1.5px solid #064e3b;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 0 4px;
  border-radius: 999px;
  z-index: 11;
}

/* KHU VỰC ĐƠN HÀNG & NÚT CHỐT ĐƠN */
.khung-don-hang-hien-tai {
  background: #fff8e7;
  border-bottom: 2px solid var(--border-warm);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dong-mon-khach-goi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
}

.danh-sach-mon-yeu-cau {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.the-mon-yeu-cau {
  background: #ffffff;
  border: 2px solid #8c5230;
  border-radius: 9px;
  padding: 3px 8px 3px 5px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  color: #2b1d14;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.the-mon-yeu-cau.da-nhat {
  background: #d8f3dc;
  border-color: #2d6a4f;
  color: #1b4332;
}

.cum-nut-thu-ngan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.nut-hanh-dong {
  border: 2px solid #2b1d14;
  border-radius: 10px;
  padding: 5px 4px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.dong-nut-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nut-hanh-dong:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.nut-thu-tien {
  background: #52b788;
  color: #081c15;
}

.nut-thoi-keo {
  background: #ffbe0b;
  color: #3b1c0a;
}

.nut-so-no {
  background: #ff758f;
  color: #3c0919;
}

/* HỆ THỐNG TƯƠNG TÁC 2 BƯỚC: BẤM NHÓM MẶT HÀNG -> BẤM MẶT HÀNG */
.khu-ke-hang {
  padding: 8px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #f9ecc9;
}

.thanh-nhom-hang {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.nut-nhom-hang {
  position: relative;
  background: #fffdf7;
  border: 2px solid #8c5230;
  border-radius: 10px;
  padding: 5px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 0 #5c3d2e;
}

.nut-nhom-hang.dang-chon {
  background: #ffe66d;
  border-color: #d62828;
  box-shadow: 0 2.5px 0 #9b0000;
}

.ten-nhom-ngan {
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  font-weight: 800;
  color: #2b1d14;
  text-align: center;
  line-height: 1.05;
}

.gia-mo-nhom-nho {
  background: #fef08a;
  color: #991b1b;
  border: 1px solid #b45309;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1.15;
}

/* THANH TIÊU ĐỀ & KHUNG KỆ HÀNG MÔ PHỎNG ĐÚNG KỆ TRONG ẢNH 1 */
.thanh-tieu-de-ke-anh1 {
  font-family: var(--font-pixel);
  background: #2b1d14;
  color: #ffe66d;
  border: 2px solid #2b1d14;
  border-radius: 9px 9px 0 0;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.2px;
  margin-bottom: -7px;
  z-index: 2;
}

.thanh-tieu-de-ke-anh1.header-nhom_mi,
.thanh-tieu-de-ke-anh1.header-nhom_giavi {
  background: #334155;
  color: #fef08a;
  border-color: #1e293b;
}

.thanh-tieu-de-ke-anh1.header-nhom_giaikhat {
  background: #b91c1c;
  color: #fef08a;
  border-color: #7f1d1d;
}

.thanh-tieu-de-ke-anh1.header-nhom_dolanh {
  background: #0369a1;
  color: #e0f2fe;
  border-color: #0c4a6e;
}

.luoi-ke-hang {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border-radius: 9px;
  border: 3px solid #334155;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.14) 0px,
      rgba(15, 23, 42, 0.14) 10px,
      transparent 10px,
      transparent 20px
    ),
    linear-gradient(180deg, #475569 0%, #334155 55%, #1e293b 100%);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.35);
}

/* 1 & 2: Kệ Sắt Xám Đục Lỗ Bên Trái (Mì Hảo Hảo & Nước Mắm / Dầu Ăn) */
.luoi-ke-hang.ke-anh1-nhom_mi,
.luoi-ke-hang.ke-anh1-nhom_giavi {
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.15), transparent 70%),
    repeating-linear-gradient(
      90deg,
      rgba(30, 41, 59, 0.25) 0px,
      rgba(30, 41, 59, 0.25) 14px,
      rgba(71, 85, 105, 0.25) 14px,
      rgba(71, 85, 105, 0.25) 28px
    ),
    linear-gradient(180deg, #475569 0%, #334155 52%, #1e293b 100%);
  border: 2.5px solid #64748b;
  border-bottom: 4px solid #0f172a;
}

/* 3: Giàn Dây Bim Bim Treo Trần & Khung Gỗ Móc Sắt */
.luoi-ke-hang.ke-anh1-nhom_banhkeo {
  background:
    radial-gradient(circle at 50% 0%, rgba(254, 240, 138, 0.22), transparent 70%),
    repeating-linear-gradient(
      90deg,
      rgba(69, 26, 3, 0.28) 0px,
      rgba(69, 26, 3, 0.28) 16px,
      rgba(120, 53, 15, 0.28) 16px,
      rgba(120, 53, 15, 0.28) 32px
    ),
    linear-gradient(180deg, #78350f 0%, #5c2808 55%, #3b1804 100%);
  border: 2.5px solid #f59e0b;
  border-bottom: 4px solid #290f02;
}

/* 4: Tủ Mát Nước Ngọt Coca-Cola Màu Đỏ Bên Phải */
.luoi-ke-hang.ke-anh1-nhom_giaikhat {
  background:
    radial-gradient(circle at 50% 0%, rgba(125, 211, 252, 0.28), transparent 72%),
    repeating-linear-gradient(
      0deg,
      rgba(224, 242, 254, 0.08) 0px,
      rgba(224, 242, 254, 0.08) 3px,
      transparent 3px,
      transparent 8px
    ),
    linear-gradient(180deg, #0c4a6e 0%, #075985 52%, #082f49 100%);
  border: 3px solid #dc2626;
  box-shadow:
    inset 0 0 12px rgba(56, 189, 248, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 5: Tủ Đông Kem Trắng & Hũ Kẹo Mặt Quầy */
.luoi-ke-hang.ke-anh1-nhom_dolanh {
  background:
    radial-gradient(circle at 50% 0%, rgba(165, 243, 252, 0.28), transparent 72%),
    linear-gradient(180deg, #155e75 0%, #0e7490 52%, #164e63 100%);
  border: 2.5px solid #67e8f9;
  border-bottom: 4px solid #083344;
}

/* 6: Kệ Sắt Phải & Tủ Gỗ Hũ Bánh Nắp Đỏ */
.luoi-ke-hang.ke-anh1-nhom_tappham {
  background:
    radial-gradient(circle at 50% 0%, rgba(253, 224, 71, 0.18), transparent 70%),
    repeating-linear-gradient(
      90deg,
      rgba(69, 26, 3, 0.26) 0px,
      rgba(69, 26, 3, 0.26) 16px,
      rgba(113, 63, 18, 0.26) 16px,
      rgba(113, 63, 18, 0.26) 32px
    ),
    linear-gradient(180deg, #6b3410 0%, #4a2106 55%, #311402 100%);
  border: 2.5px solid #d97706;
  border-bottom: 4px solid #220d01;
}

/* Ô trưng bày từng món hàng: Vẽ nền hốc gỗ / khay kệ ấm áp, KHÔNG để nền trắng */
.o-hang-ke {
  background:
    radial-gradient(circle at 50% 34%, #fef08a 0%, #f5cb6c 58%, #d99b43 100%);
  border: 1.5px solid #3b1c0a;
  border-bottom: 4px solid #78350f;
  border-radius: 7px 7px 5px 5px;
  padding: 13px 3px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5px;
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 235, 0.72),
    0 2px 0 #1f1007;
  min-width: 0;
}

/* Hốc kệ sắt trái (Mì & Gia vị): Nền vàng gỗ bìa carton ấm trên thanh sắt xám */
.ke-anh1-nhom_mi .o-hang-ke,
.ke-anh1-nhom_giavi .o-hang-ke {
  background:
    radial-gradient(circle at 50% 34%, #fef3c7 0%, #ebd098 58%, #c79a52 100%);
  border-color: #1e293b;
  border-bottom: 4px solid #334155;
}

/* Hốc kệ Bim Bim & Kệ Phải: Nền gỗ thông vàng mật ong ấm áp */
.ke-anh1-nhom_banhkeo .o-hang-ke,
.ke-anh1-nhom_tappham .o-hang-ke {
  background:
    radial-gradient(circle at 50% 32%, #fef08a 0%, #f7c95c 58%, #d48c29 100%);
  border-color: #451a03;
  border-bottom: 4px solid #78350f;
}

/* Hốc Tủ Mát Đỏ & Tủ Kem: Nền kính lạnh băng tuyết xanh ngọc */
.ke-anh1-nhom_giaikhat .o-hang-ke,
.ke-anh1-nhom_dolanh .o-hang-ke {
  background:
    radial-gradient(circle at 50% 32%, #e0f2fe 0%, #93ddfd 58%, #38bdf8 100%);
  border-color: #0c4a6e;
  border-bottom: 4px solid #0369a1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 0 #082f49;
}

.o-hang-ke:active {
  transform: scale(0.95);
}

.o-hang-ke.het-hang {
  opacity: 0.94;
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%) !important;
  border-color: #334155 !important;
}

.o-hang-ke.het-hang .khung-icon-mon-chinh {
  opacity: 0.62;
  filter: grayscale(0.45);
}

.o-hang-ke.khach-dang-can {
  background:
    radial-gradient(circle at 50% 32%, #dcfce7 0%, #86efac 58%, #22c55e 100%) !important;
  border-color: #fef08a !important;
  border-bottom-color: #14532d !important;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.85),
    0 0 10px rgba(74, 222, 128, 0.8),
    0 2px 0 #052e16 !important;
  animation: nhipSangOMonCan 0.75s ease-in-out infinite alternate;
}

@keyframes nhipSangOMonCan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2px);
  }
}

.so-luong-badge {
  position: absolute;
  top: 2px;
  left: 2.5px;
  background: rgba(34, 18, 8, 0.92);
  color: #fde047;
  border: 1px solid #d97706;
  font-size: 0.54rem;
  font-weight: 800;
  padding: 0 4px;
  border-radius: 999px;
  line-height: 1.2;
}

.ten-mon-ke {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  color: #2b1d14;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.gia-mon-ke {
  font-family: var(--font-pixel);
  background: linear-gradient(180deg, #451a03 0%, #2b1204 100%);
  border: 1px solid #f59e0b;
  border-radius: 5px;
  padding: 0.5px 4px;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fde047;
}

/* THẺ SỰ KIỆN KHẨN CẤP */
.hop-su-kien-khan {
  background: linear-gradient(135deg, #fff3b0 0%, #ffccd5 100%);
  border: 2.5px solid #d62828;
  border-radius: 12px;
  padding: 8px 10px;
  margin: 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 18;
}

.dau-su-kien {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: #9b0000;
  font-size: 0.78rem;
}

.mo-ta-su-kien {
  font-size: 0.72rem;
  font-weight: 600;
}

.nut-bam-kip {
  width: 100%;
  background: #d62828;
  color: #fff;
  border: 2px solid #4a0a0a;
  border-radius: 9px;
  padding: 7px;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
}

/* MÀN HÌNH PHA 1 & PHA 3 */
.khung-pha-quan-ly {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.khu-cuon-quan-ly-duoi {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.the-thong-tin {
  background: var(--card-bg);
  border: 2px solid #c68b59;
  border-radius: 12px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tieu-de-the {
  font-family: var(--font-pixel);
  font-size: 0.94rem;
  font-weight: 800;
  color: #8e1414;
}

.loa-phuong-box {
  background: #fff3cd;
  border-left: 4px solid #d62828;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
}

.nut-to-chinh {
  background: linear-gradient(180deg, #2a9d8f 0%, #1d786d 100%);
  color: #fff;
  border: 2.5px solid #0f3f39;
  border-radius: 12px;
  padding: 9px 14px;
  font-family: var(--font-pixel);
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 3px 0 #0f3f39;
}

/* MODAL & STUDIO */
.lop-phu-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 7, 0.82);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  z-index: 100;
}

.hop-modal {
  background: #fffdf7;
  border: 3px solid #2b1d14;
  border-radius: 15px;
  width: 100%;
  max-width: 460px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dau-modal {
  background: #2b1d14;
  color: #ffe66d;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 0.94rem;
  font-weight: 800;
}

.than-modal {
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.luoi-chon-bang-hieu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.the-chon-bang-hieu {
  cursor: pointer;
}

.the-chon-bang-hieu.dang-chon-vien {
  border-color: #d62828;
  background: #fff8e7;
  box-shadow: 0 0 0 2px rgba(214, 40, 40, 0.25);
}

.thanh-tab-studio {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: #e9d8a6;
  padding: 5px;
}

.nut-tab {
  background: #fffdf7;
  border: 1.5px solid #8c5230;
  border-radius: 7px;
  padding: 5px 3px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.nut-tab.dang-chon {
  background: #d62828;
  color: #fff;
}

.muc-studio-item {
  background: #fff;
  border: 1.5px solid #d4a373;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hang-studio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.o-nhap-text {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid #b08968;
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.84rem;
}

/* ================= HỆ THỐNG Ô THÔNG BÁO NỔI (TOAST PLAQUE PIXEL ART ĐỒNG BỘ) ================= */
.thong-bao-noi {
  position: fixed;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(94vw, 456px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 7px;
  border-radius: 12px;
  background: linear-gradient(180deg, #42230f 0%, #241207 100%);
  color: #fffbeb;
  border: 2px solid #f59e0b;
  border-bottom: 4px solid #120802;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 235, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.65),
    0 2px 0 rgba(0, 0, 0, 0.45);
  z-index: 260;
  pointer-events: none;
  text-align: left;
}

.thong-bao-noi.hieu-ung-pop {
  animation: hieuUngThongBaoPop 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hieuUngThongBaoPop {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.thong-bao-icon-khung {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 100%);
  border: 1.5px solid #451a03;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thong-bao-icon-khung .anh-sprite-svg {
  width: 22px !important;
  height: 22px !important;
  filter: drop-shadow(0 1px 0 rgba(43, 29, 20, 0.35));
}

.thong-bao-noi-dung {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.thong-bao-nhan-loai {
  font-family: var(--font-pixel);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fde047;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}

.thong-bao-chu-chinh {
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.22;
  color: #fffbeb;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  text-wrap: balance;
}

.thong-bao-cum-chip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.thong-bao-chip {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.1;
  padding: 3px 7px;
  border-radius: 7px;
  white-space: nowrap;
  border: 1.5px solid #1f0d04;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 0 rgba(0, 0, 0, 0.45);
}

.thong-bao-chip.chip-tien-cong {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border-color: #86efac;
  color: #fef08a;
  text-shadow: 0 1px 0 #052e16;
}

.thong-bao-chip.chip-tien-tru {
  background: linear-gradient(180deg, #ea580c 0%, #9a3412 100%);
  border-color: #fdba74;
  color: #fff7ed;
  text-shadow: 0 1px 0 #431407;
}

.thong-bao-chip.chip-sao-cong {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border-color: #fef08a;
  color: #fffbeb;
  text-shadow: 0 1px 0 #451a03;
}

.thong-bao-chip.chip-sao-tru {
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  border-color: #fca5a5;
  color: #fef2f2;
  text-shadow: 0 1px 0 #450a0a;
}

.thong-bao-chip.chip-ghi-no {
  background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
  border-color: #fda4af;
  color: #fff1f2;
  text-shadow: 0 1px 0 #4c0519;
}

.thong-bao-chip.chip-thoi-gian {
  background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
  border-color: #7dd3fc;
  color: #f0f9ff;
  text-shadow: 0 1px 0 #082f49;
}

.thong-bao-chip.chip-diem-nhan {
  background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%);
  border-color: #fef9c3;
  color: #422006;
  text-shadow: none;
}

/* 6 Tông màu theo ngữ cảnh hành động trong tiệm */
.thong-bao-noi.loai-thoi-keo {
  background:
    radial-gradient(circle at 0% 50%, rgba(251, 191, 36, 0.22), transparent 65%),
    linear-gradient(180deg, #5c2808 0%, #331403 100%);
  border-color: #fbbf24;
  border-bottom-color: #1c0901;
}

.thong-bao-noi.loai-thoi-keo .thong-bao-icon-khung {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  border-color: #78350f;
}

.thong-bao-noi.loai-thoi-keo .thong-bao-nhan-loai {
  color: #fde047;
}

.thong-bao-noi.loai-thanh-cong {
  background:
    radial-gradient(circle at 0% 50%, rgba(52, 211, 153, 0.2), transparent 65%),
    linear-gradient(180deg, #134e35 0%, #07291b 100%);
  border-color: #34d399;
  border-bottom-color: #03170f;
}

.thong-bao-noi.loai-thanh-cong .thong-bao-icon-khung {
  background: linear-gradient(180deg, #dcfce7 0%, #4ade80 100%);
  border-color: #052e16;
}

.thong-bao-noi.loai-thanh-cong .thong-bao-nhan-loai {
  color: #86efac;
}

.thong-bao-noi.loai-ghi-so {
  background:
    radial-gradient(circle at 0% 50%, rgba(251, 113, 133, 0.22), transparent 65%),
    linear-gradient(180deg, #581329 0%, #300815 100%);
  border-color: #fb7185;
  border-bottom-color: #1c030b;
}

.thong-bao-noi.loai-ghi-so .thong-bao-icon-khung {
  background: linear-gradient(180deg, #ffe4e6 0%, #fb7185 100%);
  border-color: #4c0519;
}

.thong-bao-noi.loai-ghi-so .thong-bao-nhan-loai {
  color: #fda4af;
}

.thong-bao-noi.loai-thuong-lon {
  background:
    radial-gradient(circle at 15% 50%, rgba(253, 224, 71, 0.26), transparent 68%),
    linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
  border-color: #fde047;
  border-bottom-color: #260404;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 235, 0.35),
    0 0 14px rgba(250, 204, 21, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.68);
}

.thong-bao-noi.loai-thuong-lon .thong-bao-icon-khung {
  background: linear-gradient(180deg, #fef9c3 0%, #eab308 100%);
  border-color: #713f12;
}

.thong-bao-noi.loai-thuong-lon .thong-bao-nhan-loai {
  color: #fde047;
}

.thong-bao-noi.loai-quat-mat {
  background:
    radial-gradient(circle at 0% 50%, rgba(56, 189, 248, 0.22), transparent 65%),
    linear-gradient(180deg, #0e586e 0%, #083344 100%);
  border-color: #38bdf8;
  border-bottom-color: #041d29;
}

.thong-bao-noi.loai-quat-mat .thong-bao-icon-khung {
  background: linear-gradient(180deg, #e0f2fe 0%, #38bdf8 100%);
  border-color: #0c4a6e;
}

.thong-bao-noi.loai-quat-mat .thong-bao-nhan-loai {
  color: #7dd3fc;
}

.thong-bao-noi.loai-canh-bao {
  background:
    radial-gradient(circle at 0% 50%, rgba(248, 113, 113, 0.22), transparent 65%),
    linear-gradient(180deg, #4c1414 0%, #290909 100%);
  border-color: #f87171;
  border-bottom-color: #170404;
}

.thong-bao-noi.loai-canh-bao .thong-bao-icon-khung {
  background: linear-gradient(180deg, #fee2e2 0%, #f87171 100%);
  border-color: #450a0a;
}

.thong-bao-noi.loai-canh-bao .thong-bao-nhan-loai {
  color: #fca5a5;
}

.an {
  display: none !important;
}

/* ĐỒNG BỘ PIXEL ART 64x64 + BIỂU CẢM TÌNH HUỐNG HÀI / NGHIÊM */
.anh-sprite-chinh,
.san-khau-quay {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.nut-khong-khi-san-khau {
  font-family: var(--font-pixel);
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 12;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  border: 2px solid #2b1d14;
  box-shadow: 0 2px 0 #2b1d14;
  transition: transform 0.12s ease;
}

.nut-khong-khi-san-khau:active {
  transform: scale(0.95);
}

.nut-khong-khi-san-khau.khong-khi-hai {
  background: #fde047;
  color: #7f1d1d;
}

.nut-khong-khi-san-khau.khong-khi-nghiem {
  background: #dc2626;
  color: #fff;
  animation: nhapNhayDo 0.9s infinite alternate;
}

.cap-bieu-cam-box {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fffdf5;
  border: 1.5px dashed #b08968;
  border-radius: 8px;
  padding: 3px 6px;
}

/* HỆ THỐNG MỞ KHÓA THÊM KỆ HÀNG THEO CẤP (KHÔNG BÔI ĐEN KỆ, HIỂN THỊ KỆ TRỐNG PIXEL ART) */
.vung-ke-san-khau.vung-ke-chua-mo,
.vung-ke-san-khau.vung-ke-chua-mo:hover {
  background: transparent !important;
  backdrop-filter: none;
  border: none !important;
  box-shadow: none !important;
}

.nhan-ke-khoa {
  font-family: var(--font-pixel);
  background: rgba(43, 29, 20, 0.86);
  color: #fef08a;
  border: 1.5px solid #f59e0b;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  box-shadow: 0 1.5px 0 #1f120b;
  max-width: 96%;
}

.khung-o-ke-trong-anh {
  width: 52px;
  height: 52px;
  border: 1.5px dashed #b45309;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  font-weight: 800;
  color: #92400e;
  background: rgba(254, 243, 199, 0.45);
}

.nut-nhom-hang.chua-mo-ke {
  background: #f1f5f9;
  border-style: dashed;
  border-color: #64748b;
}

.hop-mo-khoa-ke-moi {
  grid-column: 1 / -1;
  background: #fffdf7;
  border: 2.5px dashed #d97706;
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  box-shadow: 0 3px 0 rgba(43, 29, 20, 0.25);
}

.hop-mo-khoa-ke-moi strong {
  font-family: var(--font-pixel);
  color: #991b1b;
  font-size: 0.96rem;
  line-height: 1.15;
}

.hop-mo-khoa-ke-moi p {
  font-size: 0.76rem;
  font-weight: 600;
  color: #451a03;
  max-width: 420px;
}

.cum-nut-mo-ke {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.o-hang-ke.o-ke-trong-chua-mo {
  background: rgba(254, 243, 199, 0.62);
  border: 2px dashed #92400e;
  border-bottom: 7px solid #78350f;
}

.o-hang-ke.o-ke-trong-chua-mo .anh-sprite-chinh {
  filter: grayscale(0.85) opacity(0.55);
}

/* ================= BỐ CỤC 3 VÙNG MÀN HÌNH DỌC CỐ ĐỊNH (KHÔNG SCROLL TRANG) =================
   1. Vùng Xanh Dương (Trên cùng) + Vùng Vàng (Giữa) = Chung Ảnh Nền Tạp Hóa (.khung-nen-tap-hoa-xanh-vang)
   2. Vùng Đỏ (Dưới đáy) = Tương tác Gói Hàng, Kệ Hàng & Thu Ngân (.vung-do-goi-hang)
============================================================================================== */
html,
body {
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

#app {
  width: 100%;
  max-width: 580px;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.man-hinh-3-vung {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #2b1d14;
}

/* KHUNG NỀN TẠP HÓA CHUNG CHO VÙNG XANH DƯƠNG + VÙNG VÀNG (Lấy trọn chiều cao còn lại để hiện full trần nhà tới mép bàn) */
.khung-nen-tap-hoa-xanh-vang {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #2b1a10;
  border-bottom: 2.5px solid #2b1d14;
}

/* 1. VÙNG XANH DƯƠNG: Khung Tủ Gỗ Lim Nẹp Đồng 2 Hàng (Đồng bộ 100% với Hộc Bàn Gỗ & Kệ Hàng bên dưới, không bao giờ cắt chữ) */
.vung-xanh-duong {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  z-index: 26;
  padding: max(3px, env(safe-area-inset-top)) 4px 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(92, 42, 16, 0.34) 0px,
      rgba(92, 42, 16, 0.34) 18px,
      rgba(56, 24, 8, 0.34) 18px,
      rgba(56, 24, 8, 0.34) 36px
    ),
    linear-gradient(180deg, #4b230d 0%, #2b1306 100%);
  border-bottom: 2.5px solid #2b1d14;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.28),
    0 3px 8px rgba(0, 0, 0, 0.52);
}

/* Lòng tủ gỗ lim viền đồng có 4 ke đồng bọc góc đồng bộ với Hộc Bàn Gỗ */
.khung-bang-go-hud {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.14) 0%, transparent 72%),
    linear-gradient(180deg, #5a2a11 0%, #3e1c0a 55%, #2b1205 100%);
  border: 2px solid #230d03;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(254, 240, 138, 0.18);
}

.khung-bang-go-hud > .ke-dong-goc-hoc {
  display: none !important;
}

/* Sân khấu Vùng Vàng nằm ngay dưới Vùng Xanh Dương, hiển thị full 100% từ trần nhà tới mép bàn */
.khung-nen-tap-hoa-xanh-vang > .san-khau-quay,
.khung-nen-tap-hoa-xanh-vang > .khung-san-khau-mo-dau {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

/* HÀNG 1: DẢI CHỈ SỐ TIỆM TRONG KHAY GỖ TRŨNG (ĐỐI XỨNG 3 CỘT VỚI HÀNG 2) */
.thanh-chi-so-vung-xanh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(124px, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 4.5px;
  width: 100%;
  background: #160803;
  border: 1.5px solid #1f0b03;
  border-bottom-color: #78350f;
  border-radius: 6px;
  padding: 2.5px 3px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85);
}

.thanh-chi-so-vung-xanh .chi-so-item {
  width: 100%;
  min-width: 0;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  border-radius: 5px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  box-sizing: border-box;
  white-space: nowrap;
}

.cum-chi-so-phai-vung-xanh {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3.5px;
  width: 100%;
  min-width: 0;
}

.chi-so-nut-cap,
.chi-so-dong-ho {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #431d0a 0%, #271004 100%);
  border: 1px solid #b45309;
  color: #fde68a;
  font-family: var(--font-pixel);
  font-size: clamp(0.62rem, 2.15vw, 0.7rem);
  font-weight: 800;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.2),
    0 1px 0 #0d0401;
}

.chi-so-nut-cap {
  cursor: pointer;
}

.chi-so-nut-cap:active {
  transform: translateY(1px);
}

.chi-so-dong-ho,
.chi-so-dong-ho:active {
  cursor: default !important;
  user-select: none;
  transform: none !important;
}

/* Ô SỐ TIỀN MẶT NỔI BẬT Ở TRUNG TÂM */
.chi-so-tien-lon {
  width: 100%;
  min-width: 0;
  background: linear-gradient(180deg, #115e38 0%, #063921 100%);
  border: 1.5px solid #4ade80;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 #021c12;
}

.gia-tri-tien-lon {
  font-family: var(--font-pixel);
  font-size: clamp(0.78rem, 3.05vw, 0.92rem);
  font-weight: 900;
  line-height: 1;
  color: #fef08a;
  text-shadow:
    0 1.5px 0 #032216,
    0 0 6px rgba(74, 222, 128, 0.4);
  white-space: nowrap;
}

/* Ô ĐIỂM SAO UY TÍN (ĐỐI XỨNG 100% VỚI Ô NGÀY/CẤP BÊN TRÁI) */
.chi-so-sao-lon {
  width: 100% !important;
  min-width: 0;
  padding: 0 5px !important;
  background: linear-gradient(180deg, #9a3412 0%, #5c1c07 100%);
  border: 1.5px solid #fbbf24;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 #1f0a01;
}

.gia-tri-sao-lon {
  font-family: var(--font-pixel);
  font-size: clamp(0.64rem, 2.2vw, 0.72rem);
  font-weight: 800;
  line-height: 1;
  color: #fde047;
  text-shadow: 0 1.5px 0 #451a03;
  white-space: nowrap;
}

/* HÀNG 2: ĐỐI XỨNG 3 CỘT CHUẨN VỚI HÀNG 1 (TRÁI: KỆ HÀNG • GIỮA: CHỢ/QUẦY • PHẢI: NGOÀI PHỐ) */
.thanh-nut-shop-vung-xanh {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(124px, 1.08fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4.5px !important;
  width: 100% !important;
  padding: 0 4.5px !important;
  box-sizing: border-box !important;
}

.thanh-nut-shop-vung-xanh:not(:has(.nut-cho-si-vung-xanh, .chi-so-dong-ho)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.nut-vung-xanh {
  width: 100%;
  height: 27px;
  min-height: 27px;
  margin: 0;
  background: linear-gradient(180deg, #f5d08a 0%, #d99b43 58%, #b87924 100%);
  color: #2b1d14;
  border: 1.5px solid #3b1804;
  border-radius: 6px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  font-family: var(--font-pixel);
  font-size: clamp(0.66rem, 2.3vw, 0.74rem);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.75),
    0 2px 0 #1c0c02;
  transition: transform 0.1s ease, filter 0.12s ease;
}

.nut-vung-xanh:active {
  transform: translateY(1px);
}

.nut-vung-xanh .anh-sprite-svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

.nut-vung-xanh.nut-upgrade-chinh {
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 55%, #d97706 100%);
  color: #7f1d1d;
  border-color: #78350f;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #230e04;
}

.nut-vung-xanh.nut-cho-si-vung-xanh:not(.dang-o-cho-si) {
  padding: 0 4px;
  font-size: 0.63rem !important;
}

.nut-vung-xanh.nut-ngoai-canh-xanh {
  margin-left: 0;
  background: linear-gradient(180deg, #fde68a 0%, #eab308 56%, #ca8a04 100%);
  color: #3b1804;
  border-color: #451a03;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 235, 0.85),
    0 2px 0 #1c0c02;
}

/* 2 ICON ĐẶT BÊN NGOÀI DƯỚI KHUNG GIAO DIỆN HUD (Sát góc trái trên: Studio • Sát góc phải trên: Bánh răng Cài Đặt tách nền sạch 100%) */
.nut-icon-ngoai-hud {
  position: absolute;
  top: calc(100% + 4px);
  width: 34px;
  height: 34px;
  z-index: 28;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72));
  transition: transform 0.16s ease, filter 0.16s ease;
}

.nut-icon-ngoai-hud .anh-sprite-svg {
  width: 34px !important;
  height: 34px !important;
  filter: none !important;
}

.nut-icon-ngoai-hud.nut-studio-goc-trai {
  left: 5px;
}

.nut-icon-ngoai-hud.nut-cai-dat-goc-phai {
  right: 5px;
}

.nut-icon-ngoai-hud.nut-cai-dat-goc-phai .anh-sprite-svg {
  width: 34px !important;
  height: 34px !important;
}

.nut-icon-ngoai-hud:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(254, 240, 138, 0.85)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.nut-icon-ngoai-hud.nut-cai-dat-goc-phai:hover {
  transform: scale(1.08) rotate(24deg);
}

.nut-icon-ngoai-hud:active {
  transform: scale(0.94);
}

/* ================= MODAL CÀI ĐẶT TRÒ CHƠI ĐA TAB (CHUẨN GAME) ================= */
#app .lop-phu-cai-dat-game {
  background: rgba(12, 7, 4, 0.84);
  backdrop-filter: blur(3px);
}

#app .hop-modal.hop-modal-cai-dat {
  position: relative;
  width: 372px;
  max-width: 372px;
  height: 646px;
  max-height: 664px;
  background: linear-gradient(180deg, #361f10 0%, #241309 100%);
  border: 3px solid #c88a36;
  border-radius: 16px;
  padding: 5px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.78),
    0 0 0 2px #1a0d05,
    inset 0 1px 0 rgba(255, 236, 179, 0.45);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.dau-modal.dau-modal-cai-dat-game {
  background:
    radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.22), transparent 65%),
    linear-gradient(180deg, #4a2813 0%, #2b1608 100%);
  border: 1.5px solid #b47627;
  border-radius: 11px 11px 6px 6px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 199, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

.cum-tieu-de-modal-cai-dat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.khung-icon-dau-cai-dat {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fde68a 0%, #d97706 100%);
  border: 1.5px solid #451a03;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 0 #1c0b03;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.khoi-chu-dau-cai-dat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tieu-de-chinh-cai-dat {
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  font-weight: 900;
  color: #ffe885;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 #140903;
  line-height: 1.15;
}

.phu-de-chinh-cai-dat {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  color: #ebd0a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nut-dong-modal-game {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid #fca5a5;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #fffbeb;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 #450a0a;
  transition: transform 0.1s ease, filter 0.12s ease;
}

.nut-dong-modal-game:hover {
  filter: brightness(1.08);
}

.nut-dong-modal-game:active {
  transform: translateY(1.5px);
  box-shadow: 0 0.5px 0 #450a0a;
}

/* Thanh 3 Tab Cài Đặt Chuẩn Game */
.thanh-tab-cai-dat-game {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  background: #1d0f07;
  border: 1.5px solid #6e4522;
  border-radius: 10px;
  flex-shrink: 0;
}

.nut-tab-cai-dat-game {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 6px;
  border-radius: 7px;
  border: 1.5px solid #5c391c;
  background: linear-gradient(180deg, #3b2313 0%, #28170b 100%);
  color: #d9be96;
  cursor: pointer;
  box-shadow: 0 2px 0 #120904;
  transition: transform 0.1s ease, background 0.14s ease, border-color 0.14s ease;
}

.nut-tab-cai-dat-game:hover:not(.dang-chon) {
  background: linear-gradient(180deg, #4c2e19 0%, #331d0e 100%);
  color: #fff3d1;
}

.nut-tab-cai-dat-game.dang-chon {
  background: linear-gradient(180deg, #fff0b3 0%, #f5b82e 52%, #d97706 100%);
  border-color: #fffbeb;
  color: #2b1406;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #78350f,
    0 0 10px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.icon-tab-cai-dat {
  font-size: 0.92rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.nhan-tab-cai-dat {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

/* Vùng thân cuộn mượt bên trong Cài Đặt */
.than-modal.than-modal-cai-dat-game {
  flex: 1 1 auto;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 0%, #fffdf7 0%, #f7ebd2 100%);
  border: 2px solid #9c662c;
  border-radius: 10px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b47b3c #f3e3c3;
  box-shadow: inset 0 2px 6px rgba(43, 22, 8, 0.14);
}

/* Thẻ nhóm cài đặt (Section Card) */
.the-cai-dat-game {
  background: #fffcf5;
  border: 1.5px solid #d4a86a;
  border-bottom: 3px solid #b58347;
  border-radius: 10px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 2px 4px rgba(59, 35, 20, 0.08);
  flex-shrink: 0;
}

.dau-the-cai-dat-game {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1.5px dashed #e6ccb2;
}

.tieu-de-the-cai-dat {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  font-weight: 800;
  color: #431e08;
}

.nhan-phu-the-cai-dat {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f3e8d2;
  color: #6c4524;
  border: 1px solid #d5b485;
  white-space: nowrap;
}

.nhan-phu-the-cai-dat.nhan-xanh {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.nhan-phu-the-cai-dat.nhan-vang {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.nhan-phu-the-cai-dat.nhan-xam {
  background: #e2e8f0;
  color: #475569;
  border-color: #cbd5e1;
}

.nut-mini-cai-dat {
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  border: 1.5px solid #b45309;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 800;
  color: #451a03;
  cursor: pointer;
  box-shadow: 0 1.5px 0 #78350f;
}

.nut-mini-cai-dat:active {
  transform: translateY(1px);
  box-shadow: none;
}

.mo-ta-ngan-the-cai-dat {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.32;
  color: #6b4423;
}

/* Dòng Công Tắc Bật/Tắt Chuẩn Game (Toggle Switch Row) */
.dong-cong-tac-cai-dat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 9px;
  background: #fdf6e7;
  border: 1px solid #e7d1b1;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.dong-cong-tac-cai-dat.dong-dang-bat {
  background: linear-gradient(90deg, #f8fbee 0%, #f0fdf4 100%);
  border-color: #bbf7d0;
}

.cum-trai-dong-cong-tac {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.icon-dong-cong-tac {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #fffbeb;
  border: 1px solid #d9a05b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 #ffffff;
}

.chu-dong-cong-tac {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tieu-de-dong-cong-tac {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 800;
  color: #2b180a;
  line-height: 1.2;
}

.mo-ta-dong-cong-tac {
  font-family: var(--font-body);
  font-size: 0.64rem;
  color: #6c4a2b;
  line-height: 1.25;
}

/* Nút Gạt Công Tắc (Pill Switch) */
.cong-tac-game {
  position: relative;
  width: 56px;
  height: 26px;
  border-radius: 999px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cong-tac-game.dang-bat {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border: 2px solid #14532d;
  justify-content: flex-start;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 2px 0 #052e16;
}

.cong-tac-game.dang-tat {
  background: linear-gradient(180deg, #786252 0%, #524135 100%);
  border: 2px solid #36281e;
  justify-content: flex-end;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    0 2px 0 #241911;
}

.nhan-cong-tac-game {
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  user-select: none;
  z-index: 1;
}

.nut-gat-cong-tac-game {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #fef3c7 100%);
  border: 1.5px solid #451a03;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cong-tac-game.dang-bat .nut-gat-cong-tac-game {
  transform: translateX(30px);
}

.cong-tac-game.dang-tat .nut-gat-cong-tac-game {
  transform: translateX(0);
}

/* Thanh Trượt Âm Lượng Chuẩn Game */
.danh-sach-slider-cai-dat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dong-slider-cai-dat-game {
  display: grid;
  grid-template-columns: 112px 1fr 44px;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  background: #fdf6e7;
  border: 1px solid #e7d1b1;
  border-radius: 8px;
}

.nhan-slider-cai-dat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  color: #3b2110;
  white-space: nowrap;
}

.icon-slider-am {
  font-size: 0.86rem;
}

.thanh-keo-am-game {
  width: 100%;
  height: 7px;
  accent-color: #d97706;
  cursor: pointer;
  margin: 0;
}

.badge-phan-tram-am {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 2px 4px;
  border-radius: 6px;
  background: #3b2314;
  color: #fde68a;
  border: 1px solid #92400e;
  font-variant-numeric: tabular-nums;
}

.thanh-thu-am-nhanh-game {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 2px;
}

.nut-thu-am-game {
  background: linear-gradient(180deg, #fff8eb 0%, #f5dfc0 100%);
  border: 1.5px solid #a8723a;
  border-radius: 7px;
  padding: 5px 4px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 800;
  color: #3b2110;
  cursor: pointer;
  box-shadow: 0 2px 0 #784b21;
  white-space: nowrap;
}

.nut-thu-am-game.dang-phat {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  border-color: #78350f;
  color: #2b1406;
}

.nut-thu-am-game:active {
  transform: translateY(1.5px);
  box-shadow: none;
}

/* Các nút hành động chuẩn game trong Cài Đặt */
.hang-nut-doi-sound-cai-dat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.nut-hanh-dong-cai-dat {
  border-radius: 8px;
  padding: 7px 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s ease, filter 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nut-hanh-dong-cai-dat.nut-full-cai-dat {
  width: 100%;
}

.nut-hanh-dong-cai-dat.nut-vang-cai-dat {
  background: linear-gradient(180deg, #fde047 0%, #eab308 55%, #ca8a04 100%);
  border: 1.5px solid #713f12;
  color: #2b1406;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2.5px 0 #713f12;
}

.nut-hanh-dong-cai-dat.nut-xanh-cai-dat {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 60%, #15803d 100%);
  border: 1.5px solid #14532d;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2.5px 0 #052e16;
}

.nut-hanh-dong-cai-dat.nut-phu-cai-dat {
  background: linear-gradient(180deg, #fffaf0 0%, #f2dec0 100%);
  border: 1.5px solid #9c6b3b;
  color: #3b2110;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #6e4723;
}

.nut-hanh-dong-cai-dat.nut-vieng-do-cai-dat {
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  border: 1.5px solid #e11d48;
  color: #9f1239;
  box-shadow: 0 2px 0 #881337;
}

.nut-hanh-dong-cai-dat.nut-do-canh-bao-cai-dat {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border: 1.5px solid #450a0a;
  color: #ffffff;
  box-shadow: 0 2.5px 0 #450a0a;
}

.nut-hanh-dong-cai-dat:active {
  transform: translateY(1.5px);
  box-shadow: none;
}

/* Tab 2: Bảng xem trước Font & Lưới 2 Cột Font Chữ */
.bang-xem-truoc-font-game {
  background: linear-gradient(180deg, #3b2110 0%, #261409 100%);
  border: 2px solid #d97706;
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#app .tieu-de-xem-truoc-font {
  font-family: var(--font-signboard, var(--font-pixel));
  font-size: 0.78rem;
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 1px 0 #000;
}

#app .noi-dung-xem-truoc-font {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: #f5dec3;
  line-height: 1.25;
}

#app .the-mau-font-game.mau-font-paytone .ten-mau-font,
#app .the-mau-font-game.mau-font-paytone .dong-chu-thu-font {
  font-family: 'Paytone One', 'Nunito', 'Be Vietnam Pro', sans-serif;
}

#app .the-mau-font-game.mau-font-nunito .ten-mau-font,
#app .the-mau-font-game.mau-font-nunito .dong-chu-thu-font {
  font-family: 'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;
}

#app .the-mau-font-game.mau-font-chakra .ten-mau-font,
#app .the-mau-font-game.mau-font-chakra .dong-chu-thu-font {
  font-family: 'Chakra Petch', 'Be Vietnam Pro', sans-serif;
}

#app .the-mau-font-game.mau-font-mali .ten-mau-font,
#app .the-mau-font-game.mau-font-mali .dong-chu-thu-font {
  font-family: 'Mali', 'Nunito', cursive;
}

#app .the-mau-font-game.mau-font-coiny .ten-mau-font,
#app .the-mau-font-game.mau-font-coiny .dong-chu-thu-font {
  font-family: 'Coiny', 'Nunito', 'Be Vietnam Pro', sans-serif;
}

#app .the-mau-font-game.mau-font-viet_pixel .ten-mau-font,
#app .the-mau-font-game.mau-font-viet_pixel .dong-chu-thu-font {
  font-family: 'Viet Pixel Game', 'Be Vietnam Pro', monospace;
}

.luoi-chon-font-game-2-cot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.the-mau-font-game {
  width: 100%;
  text-align: left;
  background: #fffdf8;
  border: 1.5px solid #d4a373;
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(140, 82, 48, 0.22);
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}

.the-mau-font-game:active {
  transform: translateY(1px);
}

.the-mau-font-game.dang-chon-font {
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
  border-color: #d97706;
  box-shadow:
    0 0 0 1.5px rgba(217, 119, 6, 0.35),
    0 2px 0 #92400e;
}

.dau-the-mau-font {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}

.ten-mau-font {
  font-size: 0.68rem;
  font-weight: 800;
  color: #2b1d14;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nhan-trang-thai-font {
  width: 18px;
  height: 18px;
  font-size: 0.62rem;
  font-weight: 900;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nhan-trang-thai-font.dang-dung {
  background: #16a34a;
  color: #ffffff;
  border-color: #14532d;
}

.dong-chu-thu-font {
  font-size: 0.7rem;
  font-weight: 800;
  color: #065f46;
  background: rgba(16, 185, 129, 0.12);
  border: 1px dashed rgba(5, 150, 105, 0.38);
  border-radius: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lưới 2x2 chọn màu bảng hiệu trong Cài Đặt */
.luoi-mau-bang-hieu-cai-dat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.nut-chon-bang-hieu-cai-dat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 8px;
  background: #fdf6e7;
  border: 1.5px solid #d4a373;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 0 rgba(140, 82, 48, 0.2);
}

.nut-chon-bang-hieu-cai-dat.dang-chon {
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
  border-color: #d97706;
  box-shadow: 0 2px 0 #92400e;
}

.chu-nut-bang-hieu-cai-dat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chu-nut-bang-hieu-cai-dat strong {
  font-size: 0.7rem;
  color: #2b180a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chu-nut-bang-hieu-cai-dat small {
  font-size: 0.6rem;
  color: #784b21;
}

/* Tab 3 & 4: Cẩm nang, Hồ sơ Save & PWA */
.hop-cam-nang-cai-dat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 9px;
  background: #fdf6e7;
  border: 1px solid #e5cca9;
}

.chu-cam-nang-cai-dat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.chu-cam-nang-cai-dat strong {
  font-size: 0.74rem;
  color: #2b180a;
}

.chu-cam-nang-cai-dat small {
  font-size: 0.65rem;
  line-height: 1.3;
  color: #6b4423;
}

.icon-pwa-cai-dat-nho {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid #92400e;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.khung-thong-tin-save-game {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 9px;
  background: linear-gradient(90deg, #fef9c3 0%, #fffbeb 100%);
  border: 1.5px solid #eab308;
}

.avatar-save-game {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #3b2314;
  border: 1.5px solid #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* ─── CLOUD SYNC: Avatar & Trạng thái đồng bộ ─── */
.avatar-nguoi-dung-dam-may {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.avatar-mac-dinh-dam-may {
  font-size: 24px;
  line-height: 1;
}
.loi-dong-bo-cai-dat {
  color: #f87171;
  font-size: 11px;
}
.the-canh-bao-xung-dot {
  border-color: #f59e0b !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

.chi-tiet-save-game {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ten-quan-save-game {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: #451a03;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chi-tiet-save-game small {
  font-size: 0.65rem;
  color: #78350f;
}

.luoi-chi-so-save-game-4-cot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.o-chi-so-save-nho {
  background: #fdf6e7;
  border: 1px solid #e2c79f;
  border-radius: 7px;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
}

.o-chi-so-save-nho small {
  font-size: 0.58rem;
  color: #78553a;
  font-weight: 700;
}

.o-chi-so-save-nho strong {
  font-size: 0.66rem;
  color: #2b180a;
  font-weight: 900;
  white-space: nowrap;
}

/* Chân Modal Cài Đặt */
.chan-modal-cai-dat-game {
  background: linear-gradient(180deg, #2d180b 0%, #1c0e05 100%);
  border: 1.5px solid #7c4d23;
  border-radius: 6px 6px 11px 11px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.thong-tin-phien-ban-game {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  color: #c7a67b;
}

.nut-xong-cai-dat-game {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  border: 1.5px solid #fef08a;
  border-radius: 7px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 900;
  color: #2b1406;
  cursor: pointer;
  box-shadow: 0 2px 0 #78350f;
}

.nut-xong-cai-dat-game:active {
  transform: translateY(1.5px);
  box-shadow: none;
}

/* 2. VÙNG VÀNG: Tương tác NPC, Sự kiện, Kệ tường, Mép bàn & Cây quạt bàn */
.khung-nen-tap-hoa-xanh-vang .vung-ke-banhkeo {
  top: 2%;
  left: 31%;
  width: 38.5%;
  height: 26%;
}

.khung-nen-tap-hoa-xanh-vang .vung-ke-mi {
  top: 6%;
  left: 1%;
  width: 29%;
  height: 44%;
}

.khung-nen-tap-hoa-xanh-vang .vung-ke-giavi {
  top: 50%;
  left: 1%;
  width: 29%;
  height: 32%;
}

.khung-nen-tap-hoa-xanh-vang .vung-ke-tappham {
  top: 20%;
  right: 0.5%;
  width: 20%;
  height: 38%;
}

.khung-nen-tap-hoa-xanh-vang .vung-ke-giaikhat {
  top: 29%;
  right: 20.5%;
  width: 11.5%;
  height: 52%;
}

.khung-nen-tap-hoa-xanh-vang .vung-ke-dolanh {
  bottom: 16.5%;
  right: 0.5%;
  width: 24.5%;
  height: 24%;
}

/* NPC (Bà Hoàng / Chủ Quầy / Khách hàng) đồ họa HD rõ nét,
   đứng khuất ngang mép bàn gỗ (z-index: 6 < .lop-mat-ban-che-npc z-index: 8) và đứng sau cây quạt (z-index: 9) */
.nhan-vat-tam-diem-mo-dau,
.khu-khach-hang {
  position: absolute !important;
  bottom: 15.2% !important;
  left: 48.5% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  max-height: 41.5% !important;
  z-index: 6 !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32)) !important;
  image-rendering: auto !important;
}

/* Cậu bé Thằng Tí, Bé Bo & Bé Na ở quầy vẫn căn sâu sau mép bàn 15.2% nhưng kích thước 126px thấp nhỏ hơn người lớn */
.khu-khach-hang.khach-tre-em {
  bottom: 15.2% !important;
  max-height: 33.5% !important;
}

/* Nhân vật Chủ Tiệm (Nữ/Nam kèm Tóc, Áo, Kính đang mặc) đứng sau quầy ở pha Chuẩn Bị & Chốt Sổ */
.nhan-vat-tam-diem-mo-dau.nv-chu-tiem-tuong-tac {
  pointer-events: auto !important;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.nhan-vat-tam-diem-mo-dau.nv-chu-tiem-tuong-tac:hover {
  transform: translateX(-50%) scale(1.03) !important;
  filter:
    drop-shadow(0 0 8px rgba(254, 240, 138, 0.72))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.36)) !important;
}

.nhan-vat-tam-diem-mo-dau.nv-chu-tiem-tuong-tac:active {
  transform: translateX(-50%) scale(0.98) !important;
}

.khung-nv-chu-tiem-san-khau {
  position: relative;
  width: var(--npc-square, 162px);
  height: var(--npc-square, 162px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.khung-nv-chu-tiem-nut-nho {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: #2b1a10;
  border: 1px solid #fbbf24;
}

.khung-nv-chu-tiem-san-khau .nc-nv-layer,
.khung-nv-chu-tiem-nut-nho .nc-nv-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: pixelated;
  pointer-events: none;
}

.nhan-vat-tam-diem-mo-dau .anh-sprite-svg,
.khu-khach-hang .anh-sprite-svg,
.khach-xep-hang .anh-sprite-svg,
.khung-quat-ban-xoay .anh-sprite-svg {
  image-rendering: auto !important;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: none !important;
}

.nguoi-di-bo-hem .anh-sprite-svg {
  image-rendering: -moz-crisp-edges !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  image-rendering: pixelated !important;
  filter: none !important;
}

/* Cây quạt bàn xanh đặt trên mặt bàn gỗ bên trái, sát cạnh máy tính tiền (left: 27.5%, bottom: 1.0%) */
.quat-ban-tren-quay-preview {
  position: absolute !important;
  bottom: 1.0% !important;
  left: 27.5% !important;
  transform: translateX(-50%) !important;
  z-index: 9 !important;
  pointer-events: none;
  filter: none !important;
}

/* Bóng tiếp xúc (Contact Shadow) tông nâu gỗ ấm ôm vừa khít phần đế quạt (48px × 10px) */
.quat-ban-tren-quay-preview::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(38, 14, 3, 0.62) 0%,
    rgba(45, 18, 4, 0.38) 58%,
    rgba(45, 18, 4, 0) 84%
  );
  filter: blur(1.2px);
  mix-blend-mode: multiply;
  z-index: -1;
  pointer-events: none;
}

/* Bóng lan mềm tự nhiên quanh chân đế quạt trên thớ gỗ (62px × 14px) */
.quat-ban-tren-quay-preview::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 49%;
  transform: translateX(-50%);
  width: 62px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(48, 18, 4, 0.36) 0%,
    rgba(56, 22, 6, 0.18) 62%,
    rgba(56, 22, 6, 0) 86%
  );
  filter: blur(2.2px);
  mix-blend-mode: multiply;
  z-index: -2;
  pointer-events: none;
}

.quat-ban-tren-quay-preview.quat-ban-tuong-tac {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Mặt bàn quầy gỗ chứa 5 đạo cụ tương tác ở Bước 2 Mở đầu (z-index: 9, trước NPC) */
.mat-ban-quay {
  position: absolute !important;
  bottom: 9.5% !important;
  left: 0;
  right: 0;
  height: 52px !important;
  background: transparent !important;
  border-top: none !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 22% 0 18% !important;
  z-index: 9 !important;
}

/* Bong bóng thoại của Khách hàng & Loa Phường treo gọn sát đỉnh trên của Vùng Vàng (top: 6px), TUYỆT ĐỐI KHÔNG CHE MẶT NPC */
.cum-bong-thoai-khach-tren {
  position: absolute !important;
  top: 6px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 88px), 360px) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 14 !important;
  pointer-events: none;
}

.bong-thoai-khach,
.bong-thoai-loa-phuong {
  background: #fffdf7 !important;
  color: #2b1d14 !important;
  border: 2px solid #2b1d14 !important;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.24;
  text-align: center;
  box-shadow: 0 3px 0 rgba(43, 29, 20, 0.45);
  max-width: 100%;
  margin-bottom: 3px;
}

.bong-thoai-loa-phuong {
  background: #fef3c7 !important;
  border-left: 5px solid #d97706 !important;
}

/* 3. VÙNG ĐỎ (Dưới đáy - Gọn gàng, vẽ nền tủ gỗ tạp hóa cổ điển, TUYỆT ĐỐI KHÔNG ĐỂ VÙNG TRẮNG): */
.vung-do-goi-hang {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  width: 100%;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.16), transparent 68%),
    repeating-linear-gradient(
      90deg,
      rgba(38, 18, 7, 0.36) 0px,
      rgba(38, 18, 7, 0.36) 18px,
      rgba(64, 32, 14, 0.36) 18px,
      rgba(64, 32, 14, 0.36) 36px
    ),
    linear-gradient(180deg, #4a2814 0%, #321a0b 55%, #200f05 100%);
  border-top: 2.5px solid #d97706;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.28);
  padding: 3px 4px max(4px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  overflow: hidden !important;
}

/* Khay gỗ Thu Ngân & Đơn Hàng ở đầu Vùng Đỏ (Nền vân gỗ lim nẹp đồng, KHÔNG để nền trắng) */
.thanh-don-hang-vung-do {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.16) 0%, transparent 72%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 220, 140, 0.04) 0px,
      rgba(255, 220, 140, 0.04) 2px,
      transparent 2px,
      transparent 5px
    ),
    linear-gradient(180deg, #633519 0%, #482510 55%, #33190a 100%);
  border: 1.5px solid #d97706;
  border-radius: 7px;
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.28),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    0 2px 3px rgba(0, 0, 0, 0.35);
}

.thanh-don-hang-vung-do .dong-mon-khach-goi {
  margin-bottom: 0;
  gap: 4px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
}

.thanh-don-hang-vung-do .danh-sach-mon-yeu-cau {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}

.thanh-don-hang-vung-do .danh-sach-mon-yeu-cau::-webkit-scrollbar {
  display: none;
}

.thanh-don-hang-vung-do .the-mon-yeu-cau {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  border: 1.5px solid #451a03;
  border-radius: 6px;
  padding: 1.5px 6px 1.5px 4px;
  font-size: 0.66rem;
  font-weight: 800;
  color: #2b1d14;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1.5px 0 #1f0d04;
}

.thanh-don-hang-vung-do .the-mon-yeu-cau.da-nhat {
  background: linear-gradient(180deg, #86efac 0%, #22c55e 100%);
  border-color: #052e16;
  color: #052e16;
}

.tong-tien-don-do {
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  font-weight: 800;
  color: #86efac;
  background: linear-gradient(180deg, #0f291e 0%, #051810 100%);
  border: 1.5px solid #4ade80;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.45);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.thanh-don-hang-vung-do .cum-nut-thu-ngan {
  gap: 3.5px;
}

.thanh-don-hang-vung-do .nut-hanh-dong {
  padding: 2px 3px;
  min-height: 26px;
  font-size: 0.65rem;
  border-radius: 6px;
  border: 1.5px solid #1f0d04;
  gap: 0;
  line-height: 1.05;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 0 #180a03;
}

.thanh-don-hang-vung-do .nut-hanh-dong .dong-nut-icon {
  gap: 3px;
}

.thanh-don-hang-vung-do .nut-hanh-dong .anh-sprite-svg {
  width: 13px !important;
  height: 13px !important;
}

.thanh-don-hang-vung-do .nut-hanh-dong small {
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.05;
}

.thanh-don-hang-vung-do .nut-thu-tien {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #052e16;
}

.thanh-don-hang-vung-do .nut-thoi-keo {
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  color: #451a03;
}

.thanh-don-hang-vung-do .nut-so-no {
  background: linear-gradient(180deg, #fda4af 0%, #e11d48 100%);
  color: #3c0919;
}

.thanh-don-hang-vung-do .nut-hanh-dong:disabled {
  opacity: 0.64;
  filter: saturate(0.55) brightness(0.84);
}

/* Thanh 6 Nhóm Kệ Hàng nằm gọn trên 1 hàng (HIỂN THỊ ĐỦ CẢ 6 KỆ, KHÔNG BỊ KHUẤT KỆ THỨ 6) */
.vung-do-goi-hang .thanh-nhom-hang {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 2.5px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
  overflow: hidden !important;
}

.vung-do-goi-hang .nut-nhom-hang {
  background: linear-gradient(180deg, #f5d08a 0%, #d99b43 58%, #b87924 100%);
  border: 1.5px solid #3b1804;
  color: #2b1d14;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 2px 1px !important;
  min-height: 31px !important;
  gap: 1px !important;
  border-radius: 6px;
  min-width: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.68),
    0 1.5px 0 #1c0c02;
}

.vung-do-goi-hang .nut-nhom-hang.dang-chon {
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 55%, #d97706 100%);
  border-color: #dc2626;
  color: #7f1d1d;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 6px rgba(251, 191, 36, 0.65),
    0 1.5px 0 #7f1d1d;
}

.vung-do-goi-hang .nut-nhom-hang.chua-mo-ke {
  background: linear-gradient(180deg, #574133 0%, #3d2b20 100%);
  border: 1.5px dashed #a18065;
  color: #e7d8c9;
}

.vung-do-goi-hang .nut-nhom-hang.chua-mo-ke .ten-nhom-ngan {
  color: #f5ebe1;
}

.vung-do-goi-hang .nut-nhom-hang .khung-icon-tab-nhom .anh-sprite-svg {
  width: 15px !important;
  height: 15px !important;
}

.vung-do-goi-hang .nut-nhom-hang .cham-do-moi {
  top: 1.5px !important;
  right: 2px !important;
  width: 12px !important;
  height: 12px !important;
}

.vung-do-goi-hang .nut-nhom-hang .cham-do-moi .anh-sprite-svg {
  width: 12px !important;
  height: 12px !important;
}

.vung-do-goi-hang .ten-nhom-ngan {
  font-size: clamp(0.52rem, 1.95vw, 0.62rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
  text-align: center !important;
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vung-do-goi-hang .gia-mo-nhom-nho {
  font-size: 0.5rem !important;
  padding: 0 2.5px !important;
  line-height: 1.05 !important;
}

/* Khung chứa 5 Gói Hàng của kệ đang chọn: HIỂN THỊ ĐỦ 5 MÓN TRÊN 1 HÀNG NGANG GỌN GÀNG, KHÔNG THỪA KHOẢNG TRỐNG */
.khung-noi-dung-goi-hang-do {
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden !important;
  display: block;
}

.vung-do-goi-hang .luoi-ke-hang {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 3.5px !important;
  padding: 4px 4px 5px !important;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden !important;
}

.vung-do-goi-hang .o-hang-ke {
  padding: 13px 2px 3px !important;
  gap: 1.5px !important;
  justify-content: space-between;
  border-radius: 6px;
  border-bottom-width: 3.5px !important;
  min-width: 0 !important;
}

.vung-do-goi-hang .o-hang-ke .khung-icon-mon-chinh .anh-sprite-svg {
  width: 32px !important;
  height: 32px !important;
}

.vung-do-goi-hang .o-hang-ke .cham-do-moi {
  top: 2px !important;
  right: 2.5px !important;
  width: 14px !important;
  height: 14px !important;
}

.vung-do-goi-hang .o-hang-ke .cham-do-moi .anh-sprite-svg {
  width: 14px !important;
  height: 14px !important;
}

.vung-do-goi-hang .so-luong-badge {
  font-size: 0.52rem !important;
  padding: 0 3.5px !important;
  top: 1.5px !important;
  left: 2px !important;
}

.vung-do-goi-hang .ten-mon-ke {
  font-size: clamp(0.54rem, 2.02vw, 0.64rem) !important;
  line-height: 1.04 !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.1rem;
  width: 100%;
}

.vung-do-goi-hang .gia-mon-ke {
  font-size: clamp(0.53rem, 1.95vw, 0.62rem) !important;
  font-weight: 800 !important;
  padding: 0.5px 4px !important;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vung-do-goi-hang .hop-mo-khoa-ke-moi {
  grid-column: 1 / -1;
  width: 100%;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border: 2px dashed #b45309;
  padding: 5px 8px;
  gap: 2.5px;
}

.vung-do-goi-hang .hop-mo-khoa-ke-moi strong {
  font-size: 0.78rem;
}

.vung-do-goi-hang .hop-mo-khoa-ke-moi p {
  font-size: 0.68rem;
}

.thanh-day-vung-do {
  flex-shrink: 0;
}

.nut-keo-cua-vung-do {
  width: 100%;
  padding: 6px 8px !important;
  font-size: 0.82rem !important;
}

.vung-do-chot-so,
.vung-do-mo-dau {
  max-height: 38dvh;
}

.the-chot-so-gon {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
  margin-bottom: 0;
  font-size: 0.78rem;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #92400e;
}

.the-chot-so-gon p {
  margin-bottom: 3px;
}

/* ================= MỞ ĐẦU TƯƠNG TÁC 5 BƯỚC (THEO ĐÚNG 3 VÙNG: XANH + VÀNG TRÊN, ĐỎ DƯỚI) ================= */
.lop-phu-modal.lop-phu-mo-dau-full {
  padding: 0;
  align-items: stretch;
  justify-content: center;
  background: #1a0f0a;
}

.hop-modal-mo-dau {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: 100dvh;
  max-height: 100dvh;
  border: none;
  border-radius: 0;
  background: #2b1d14;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.khung-san-khau-mo-dau {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 0;
  border: none;
  overflow: hidden;
  background: #3b2314;
  z-index: 1;
}

.cum-dau-mo-dau-overlay .dau-modal {
  padding: 0 2px 3px;
  background: transparent;
  border-bottom: none;
  color: #fef08a;
  font-size: 0.82rem;
  font-weight: 800;
}

.vung-do-mo-dau {
  justify-content: space-between;
}

.than-modal-mo-dau {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fffdf7;
  border: 2px solid #2b1d14;
  border-radius: 10px;
}

.thanh-dieu-huong-mo-dau-overlay {
  flex-shrink: 0;
  background: #fffdf7;
  border: 2px solid #2b1d14;
  border-radius: 10px;
  padding: 5px 8px;
}

.thanh-buoc-mo-dau {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.nut-buoc-mo-dau {
  background: #f3e8d2;
  color: #5c3d2e;
  border: 1.5px solid #2b1d14;
  border-radius: 6px;
  padding: 4px 2px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nut-buoc-mo-dau.da-qua {
  background: #dcfce7;
  color: #14532d;
  border-color: #15803d;
}

.nut-buoc-mo-dau.dang-focus {
  background: #f59e0b;
  color: #fff;
  border-color: #7f1d1d;
}

.san-khau-quay.camera-mo-dau-1,
.san-khau-quay.camera-mo-dau-2,
.san-khau-quay.camera-mo-dau-3,
.san-khau-quay.camera-mo-dau-4,
.san-khau-quay.camera-mo-dau-5 {
  transform: none;
}

.nhan-goc-camera-mo-dau {
  position: absolute;
  bottom: 17.5%;
  right: 6px;
  background: rgba(24, 15, 9, 0.88);
  color: #fde047;
  border: 1.5px solid #f59e0b;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  z-index: 15;
  pointer-events: none;
}

.huy-hieu-dao-cu-bay {
  position: absolute;
  bottom: 24%;
  left: 58%;
  z-index: 10;
  background: #fffbeb;
  border: 2.5px solid #2b1d14;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 3px 0 #2b1d14;
  animation: nhapNhoKhanCap 0.7s ease-in-out infinite alternate;
}

.hop-thoai-rpg-mo-dau {
  background: #fffdf7;
  border: 2px solid #2b1d14;
  border-left: 6px solid #d97706;
  border-radius: 9px;
  padding: 6px 9px;
}

.chu-thoai-rpg {
  font-size: 0.84rem;
  line-height: 1.34;
  color: #2b1d14;
  font-weight: 700;
}

.nhan-chon-nhanh {
  font-size: 0.76rem;
  font-weight: 800;
  color: #7c2d12;
}

.day-nut-nhip-truyen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.nut-nhip-truyen {
  background: #fff8e7;
  border: 1.5px solid #2b1d14;
  border-radius: 8px;
  padding: 4px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.nut-nhip-truyen.dang-chon-nhip {
  background: #fde047;
  border-color: #991b1b;
}

.mat-ban-focus-buoc-2 {
  padding-left: 8px;
  height: 58px;
  background: transparent;
}

.vat-pham-quay.bao-vat-dang-spotlight {
  transform: scale(1.15) translateY(-4px);
  filter: drop-shadow(0 0 8px #fde047);
}

.luoi-5-bao-vat {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.nut-chon-bao-vat {
  background: #fffdf7;
  border: 1.5px solid #2b1d14;
  border-radius: 8px;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}

.nut-chon-bao-vat.dang-chon-bv {
  background: #fef08a;
  border-color: #b91c1c;
}

.the-chi-tiet-bao-vat {
  background: #fffdf7;
  border: 1.5px solid #2b1d14;
  border-radius: 9px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mo-ta-bao-vat {
  font-size: 0.78rem;
  line-height: 1.3;
  color: #3b1c0a;
}

.san-khau-3-bieu-cam {
  position: absolute;
  bottom: 43%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  z-index: 14;
}

.the-bieu-cam-mini {
  background: rgba(24, 15, 9, 0.88);
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  padding: 3px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.the-bieu-cam-mini.dang-focus-mat {
  background: rgba(180, 83, 9, 0.95);
  border-color: #fde047;
  transform: scale(1.05);
}

.luoi-3-chu-quay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.the-chon-chu-quay-focus {
  background: #fffdf7;
  border: 1.5px solid #2b1d14;
  border-radius: 8px;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  cursor: pointer;
}

.the-chon-chu-quay-focus strong {
  font-size: 0.76rem;
  color: #7f1d1d;
}

.the-chon-chu-quay-focus small {
  font-size: 0.66rem;
  color: #5c3d2e;
  line-height: 1.2;
}

.the-chon-chu-quay-focus.dang-chon-nv {
  background: #fef08a;
  border-color: #b91c1c;
}

.bang-hieu-live-focus {
  position: absolute;
  bottom: 43%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 2.5px solid #2b1d14;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 14;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55);
}

.bang-hieu-live-focus.bang-hieu-vang-do {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.bang-hieu-live-focus.bang-hieu-xanh-duong {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
}

.bang-hieu-live-focus.bang-hieu-xanh-la {
  background: linear-gradient(180deg, #15803d 0%, #14532d 100%);
}

.bang-hieu-live-focus.bang-hieu-do-son,
.bang-hieu-live-focus.bang-hieu-neon {
  background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%);
  border-color: #fbbf24;
}

.bang-hieu-live-focus.bang-hieu-kem-xua {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-color: #1d4ed8;
}

.bang-hieu-live-focus.bang-hieu-go-xua {
  background: linear-gradient(180deg, #451a03 0%, #231007 100%);
  border-color: #d97706;
}

.luoi-4-bang-hieu-focus {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.the-bang-hieu-gon {
  background: #fffdf7;
  border: 1.5px solid #2b1d14;
  border-radius: 8px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: left;
}

.the-bang-hieu-gon.dang-chon-bh {
  background: #fef08a;
  border-color: #b91c1c;
}

.chu-bang-hieu-gon {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chu-bang-hieu-gon strong {
  font-size: 0.74rem;
  color: #2b1d14;
}

.chu-bang-hieu-gon small {
  font-size: 0.65rem;
  color: #7c2d12;
}

.day-goi-y-ten-quan {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nut-goi-y-ten {
  background: #fef3c7;
  border: 1.5px solid #b45309;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #78350f;
  cursor: pointer;
}

.spotlight-ke-trai-cap1 {
  position: absolute;
  top: 22%;
  left: 1.5%;
  width: 28%;
  height: 44%;
  border: 3px solid #fde047;
  border-radius: 10px;
  background: rgba(253, 224, 71, 0.14);
  box-shadow: 0 0 18px rgba(253, 224, 71, 0.85);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  z-index: 12;
}

.nhan-spotlight-ke-cap1 {
  background: #991b1b;
  color: #fef08a;
  border: 1.5px solid #fde047;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.64rem;
  font-weight: 800;
}

.day-5-mon-khoi-dau {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.o-mon-khoi-dau-mini {
  background: #fff8e7;
  border: 1.5px solid #2b1d14;
  border-radius: 7px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  font-size: 0.64rem;
  font-weight: 800;
}

.luoi-lo-trinh-6-cap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.the-lo-trinh-cap {
  background: #f8fafc;
  border: 1.5px dashed #64748b;
  border-radius: 7px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
}

.the-lo-trinh-cap.da-mo-cap1 {
  background: #dcfce7;
  border: 2px solid #15803d;
}

.the-lo-trinh-cap strong {
  display: block;
  font-size: 0.72rem;
  color: #2b1d14;
}

.the-lo-trinh-cap small {
  font-size: 0.64rem;
  color: #475569;
}

.khoi-buoc-focus {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.thanh-dieu-huong-buoc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nut-buoc-phu {
  padding: 6px 10px;
  font-size: 0.78rem;
}

.chi-so-buoc-nho {
  font-size: 0.76rem;
  font-weight: 800;
  color: #7c2d12;
}

.nut-tiep-theo-focus {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.88rem;
}

.nut-khai-truong {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border-color: #450a0a;
  color: #fef08a;
}

/* Sự kiện khẩn cấp nổi trong Vùng Vàng */
.hud-su-kien-noi {
  position: absolute;
  top: 66px;
  left: 8px;
  right: 8px;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: rgba(254, 243, 199, 0.96);
  border: 2px solid #dc2626;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #7f1d1d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.hud-su-kien-noi .mo-ta-su-kien {
  font-size: 0.74rem;
  line-height: 1.25;
  color: #451a03;
}

.nhan-cho-khach-tiep {
  font-size: 0.66rem;
  font-weight: 800;
  color: #fde68a;
  padding: 1px 3px;
  white-space: nowrap;
  text-shadow: 0 1px 0 #1f0d04;
}

.the-mon-yeu-cau.nut-goi-khach-ngay {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%) !important;
  border-color: #451a03 !important;
  color: #451a03 !important;
}

.the-mon-yeu-cau.nut-xin-loi-het-mon {
  background: linear-gradient(180deg, #fecaca 0%, #ef4444 100%) !important;
  border-color: #450a0a !important;
  color: #450a0a !important;
}

.nut-so-no.dang-xin-no {
  border-color: #fef08a !important;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.75) !important;
}

/* KHÁCH ĐỨNG XẾP HÀNG CHỜ TỚI LƯỢT PHÍA SAU KHÁCH CHÍNH (CHỜ #2, CHỜ #3) - CĂN KHỚP MÉP BÀN 16.2% */
.khach-xep-hang {
  position: absolute !important;
  transform: translateX(-50%) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5 !important;
  pointer-events: none;
  image-rendering: auto !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  transition: left 0.28s ease, bottom 0.28s ease, opacity 0.22s ease;
}

.khach-xep-hang-1 {
  left: 65.5% !important;
  bottom: 15.2% !important;
  opacity: 0.96;
}

.khach-xep-hang-2 {
  left: 31.5% !important;
  bottom: 15.2% !important;
  opacity: 0.92;
}

.khach-xep-hang.khach-xep-hang-tre-em.khach-xep-hang-1 {
  bottom: 15.2% !important;
}

.khach-xep-hang.khach-xep-hang-tre-em.khach-xep-hang-2 {
  bottom: 15.2% !important;
}

.nhan-thu-tu-xep-hang {
  position: relative;
  z-index: 2;
  font-family: var(--font-pixel);
  background: rgba(24, 15, 9, 0.92);
  color: #fde047;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.66rem;
  font-weight: 800;
  margin-bottom: -8px;
  white-space: nowrap;
}

.badge-xep-hang-quay {
  font-family: var(--font-pixel);
  background: #f59e0b;
  color: #2b1d14;
  border: 1px solid #2b1d14;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

button,
input,
select,
textarea,
.vat-pham-quay,
.o-hang-ke,
.vung-ke-san-khau,
.doi-tuong-khan-cap,
.ten-tiem-box,
.the-bieu-cam-mini {
  touch-action: manipulation;
}

.thong-bao-noi {
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px));
}

@media (max-width: 600px) {
  #app {
    max-width: 100vw;
    box-shadow: none;
  }

  .o-nhap-text,
  input[type='text'],
  input[type='number'],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* NÚT CÀI APP & MODAL CÀI APP MOBILE (PWA) */
.thanh-nut-shop-vung-xanh.co-nut-cai-app {
  grid-template-columns: 0.98fr 1fr 0.9fr 1.04fr 0.8fr 0.94fr;
  gap: 2px;
}

.nut-vung-xanh.nut-cai-app-xanh {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #fff;
  border-color: #14532d;
  text-shadow: 0 1px 0 #14532d;
}

.the-cai-app-hero {
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
  border: 2px solid #b45309;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.icon-cai-app-preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 2px solid #2b1d14;
  flex-shrink: 0;
  image-rendering: pixelated;
  box-shadow: 0 2px 0 #2b1d14;
}

.khoi-chu-cai-app {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.khoi-chu-cai-app strong {
  font-size: 0.86rem;
  color: #7f1d1d;
}

.khoi-chu-cai-app small {
  font-size: 0.74rem;
  line-height: 1.38;
  color: #3b1c0a;
  white-space: pre-line;
  font-weight: 700;
}

.nut-cai-app-ngay {
  width: 100%;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #fff;
  border-color: #14532d;
  font-size: 0.88rem;
  padding: 9px 12px;
}

.buoc-cai-app-text {
  font-size: 0.78rem;
  line-height: 1.38;
  color: #2b1d14;
  font-weight: 700;
  margin-top: 4px;
}

/* NÚT MUA VÉ SỐ 2 CHỮ SỐ & KẾT QUẢ XỔ SỐ CUỐI NGÀY */
.the-mon-yeu-cau.nut-mua-ve-so {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%) !important;
  border-color: #991b1b !important;
  color: #7f1d1d !important;
  box-shadow: 0 1.5px 0 #451a03;
  animation: nhapNhayKeCan 0.9s ease-in-out infinite alternate;
}

.the-mon-yeu-cau.badge-da-mua-ve-so {
  background: #fef9c3 !important;
  border-color: #ca8a04 !important;
  color: #854d0e !important;
}

.cum-phai-don-hang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.badge-ve-so-dang-giu {
  font-family: var(--font-pixel);
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #7f1d1d;
  border: 1.5px solid #451a03;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.hop-ket-qua-ve-so-cuoi-ngay {
  background: #fef9c3;
  border: 1.5px solid #d97706;
  border-left: 4px solid #dc2626;
  border-radius: 7px;
  padding: 4px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.74rem;
  color: #451a03;
}

.hop-ket-qua-ve-so-cuoi-ngay strong {
  color: #991b1b;
  font-size: 0.78rem;
}

/* ============================================================================
   NGĂN KÉO TỦ 2 HỘC (HỘC TRÁI TIỀN CHẴN/LẺ VN • HỘC PHẢI SỔ GHI NỢ VIẾT TAY)
   & GIAO DIỆN FOCUS VÀO ICON (TRONG CHAT KHÁCH HÀNG + KỆ BÊN DƯỚI)
   ============================================================================ */
:root {
  --font-hand: var(--font-body);
}

/* 1. BONG BÓNG CHAT KHÁCH HÀNG FOCUS VÀO ICON MÓN MUA */
.bong-thoai-khach.bong-thoai-co-icon {
  pointer-events: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 8px !important;
  background: linear-gradient(180deg, #fffef9 0%, #fef3c7 100%) !important;
  border: 2px solid #3e1e0c !important;
  border-radius: 11px;
  box-shadow: 0 3px 0 rgba(35, 16, 6, 0.55);
}

.cum-icon-mon-trong-chat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.o-icon-mon-chat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 4px;
  border-radius: 8px;
  border: 1.5px solid #92400e;
  background: linear-gradient(180deg, #ffffff 0%, #fde68a 100%);
  box-shadow: 0 1.5px 0 #451a03;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.o-icon-mon-chat:active {
  transform: scale(0.95);
}

.o-icon-mon-chat .khung-dohoa {
  width: 26px !important;
  height: 26px !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.o-icon-mon-chat .nhan-ten-icon-chat {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  font-weight: 800;
  color: #2b1d14;
}

.o-icon-mon-chat.da-nhat {
  background: linear-gradient(180deg, #dcfce7 0%, #86efac 100%);
  border-color: #15803d;
  color: #14532d;
}

.badge-thanh-toan-chat {
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dcfce7;
  color: #14532d;
  border: 1.5px solid #15803d;
  white-space: nowrap;
}

.badge-thanh-toan-chat.badge-xin-no-chat {
  background: #fee2e2;
  color: #991b1b;
  border-color: #b91c1c;
}

.loi-thoai-khach-ngan {
  font-size: 0.7rem;
  font-weight: 700;
  color: #451a03;
  line-height: 1.18;
  max-width: 100%;
}

/* 2. HỘC BÀN GỖ KÉO RA 3D TỪ DƯỚI GẦM BÀN QUẦY (TRÁI: KHAY GỖ 8 NGĂN TIỀN THẬT VN • PHẢI: 1 CUỐN SỔ GHI NỢ THẬT) */
.vung-do-goi-hang .thanh-don-hang-vung-do.khung-ngan-keo-2-hoc {
  position: relative;
  background:
    linear-gradient(180deg, #4b210a 0%, #2d1205 18%, #1c0b03 100%) !important;
  border: 2px solid #230d03 !important;
  border-top: 2.5px solid #d9822b !important;
  border-radius: 9px;
  padding: 2px 5px 5px !important;
  gap: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.35),
    0 3px 6px rgba(0, 0, 0, 0.65) !important;
}

/* Mép gờ mặt bàn quầy phía trên hộc bàn kéo */
.vung-do-goi-hang .khung-ngan-keo-2-hoc .dong-mon-khach-goi {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(120, 56, 18, 0.22) 0px,
      rgba(120, 56, 18, 0.22) 18px,
      rgba(88, 38, 10, 0.22) 18px,
      rgba(88, 38, 10, 0.22) 36px
    ),
    linear-gradient(180deg, #a85820 0%, #824012 65%, #5c2b0a 100%);
  border: 1.5px solid #2b1104;
  border-bottom: 2px solid #1f0b02;
  border-radius: 6px 6px 3px 3px;
  padding: 2px 5px;
  box-shadow:
    inset 0 1px 0 rgba(254, 215, 170, 0.5),
    0 2px 3px rgba(0, 0, 0, 0.7);
  z-index: 4;
}

/* Khe hở & bóng đổ dưới gầm mặt bàn nơi hộc bàn gỗ trượt kéo ra */
.khe-gam-ban-keo-hoc {
  height: 4px;
  margin: 0 3px;
  background: linear-gradient(180deg, #090301 0%, #240e04 65%, #4a210b 100%);
  border-left: 3px solid #6b3413;
  border-right: 3px solid #6b3413;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9);
}

.bang-tinh-tien-nho {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
}

.bang-tinh-tien-nho .nhan-don-nho,
.bang-tinh-tien-nho .nhan-dua-nho {
  background: rgba(28, 12, 4, 0.75);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 4px;
  padding: 1px 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
}

.icon-to-tien-khach-dua {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 14px;
  flex-shrink: 0;
}

.icon-to-tien-khach-dua .svg-to-tien-ve-that {
  width: 100%;
  height: 100%;
  display: block;
}

.bang-tinh-tien-nho .nhan-thoi-nho {
  background: #fde047;
  color: #451a03;
  border: 1px solid #2b1d14;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 800;
  white-space: nowrap;
}

.bang-tinh-tien-nho .nhan-thoi-nho.nhan-no-nho {
  background: #fca5a5;
  color: #7f1d1d;
}

/* THÙNG HỘC BÀN GỖ KÉO RA 3D (Có 2 ray trượt bên hông, thành gỗ sồi/xoan đào sáng ấm, vách ngăn gỗ nổi & mặt trước hộc bàn kéo có ổ khóa + tay nắm đồng) */
.khung-thung-go-hoc-ban-that {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 3px;
  /* Thành gỗ 2 bên hộc bàn kéo có màu gỗ tự nhiên sáng ấm (#d6873b -> #9e541c) */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(140, 70, 22, 0.18) 0px,
      rgba(140, 70, 22, 0.18) 10px,
      rgba(195, 114, 48, 0.18) 10px,
      rgba(195, 114, 48, 0.18) 20px
    ),
    linear-gradient(180deg, #c67631 0%, #a5591e 55%, #7e3e11 100%);
  border: 2px solid #2d1204;
  border-top: 2px solid #eab36e;
  border-radius: 3px 3px 8px 8px;
  padding: 4px 6px 0;
  box-shadow:
    inset 3px 0 0 #e5a35a,
    inset -3px 0 0 #e5a35a,
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    0 5px 8px rgba(0, 0, 0, 0.72);
}

/* 2 Thanh ray trượt kim loại/gỗ ở hai bên hông hộc bàn khi kéo ra */
.ray-truot-hoc-ban {
  position: absolute;
  top: 2px;
  bottom: 14px;
  width: 4px;
  background: linear-gradient(90deg, #475569 0%, #cbd5e1 50%, #334155 100%);
  border: 1px solid #1e293b;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.65);
}

.ray-truot-hoc-ban.ray-truot-trai {
  left: -5px;
  border-radius: 2px 0 0 3px;
}

.ray-truot-hoc-ban.ray-truot-phai {
  right: -5px;
  border-radius: 0 2px 3px 0;
}

/* Ke đồng bắt vít ở 4 góc hộc bàn gỗ */
.ke-dong-goc-hoc {
  position: absolute;
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #fef08a 0%, #d97706 60%, #78350f 100%);
  border: 1px solid #2b1d14;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.ke-dong-goc-hoc.ke-goc-trai-tren {
  top: 1px;
  left: 1px;
  border-radius: 3px 0 4px 0;
}

.ke-dong-goc-hoc.ke-goc-phai-tren {
  top: 1px;
  right: 1px;
  border-radius: 0 3px 0 4px;
}

.ke-dong-goc-hoc.ke-goc-trai-duoi {
  bottom: 2px;
  left: 8px;
  border-radius: 2px;
}

.ke-dong-goc-hoc.ke-goc-phai-duoi {
  bottom: 2px;
  right: 8px;
  border-radius: 2px;
}

/* Lòng Hộc Bàn chia 2 khoang bởi Vách Gỗ Dày ở giữa (Hộc Trái ~60% - Vách Gỗ 9px - Hộc Phải ~40%) */
.than-ngan-keo-2-hoc {
  display: grid;
  grid-template-columns: minmax(0, 1.54fr) 9px minmax(0, 1fr);
  gap: 0;
  width: 100%;
  align-items: stretch;
  background: #4e250d;
  border: 2px solid #2e1305;
  border-top: 2.5px solid #240d03;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.65),
    0 1px 0 #f3be7a;
}

/* Thanh vách ngăn gỗ đặc ở chính giữa chia đôi Hộc Trái và Hộc Phải (màu gỗ sáng nổi khối 3D) */
.vach-go-ngan-doi-hoc-ban {
  width: 9px;
  background:
    linear-gradient(
      90deg,
      #3b1806 0%,
      #b86924 20%,
      #f2bd76 50%,
      #b0611f 80%,
      #331405 100%
    );
  border-left: 1px solid #240d03;
  border-right: 1px solid #240d03;
  box-shadow:
    -3px 0 5px rgba(0, 0, 0, 0.55),
    3px 0 5px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

/* GỜ GỖ MẶT TRƯỚC HỘC BÀN KÉO (Cạnh dưới cùng dày dặn như tấm ván mặt trước ngăn kéo bàn thật, có mộng gỗ 2 đầu, chỉ soi nổi, ổ khóa đồng & tay nắm đồng kéo ra) */
.go-mat-truoc-hoc-ban-that {
  position: relative;
  height: 16px;
  margin: 2px -6px 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(120, 55, 16, 0.2) 0px,
      rgba(120, 55, 16, 0.2) 22px,
      rgba(168, 86, 30, 0.2) 22px,
      rgba(168, 86, 30, 0.2) 44px
    ),
    linear-gradient(180deg, #d28339 0%, #9e521b 45%, #6e350d 82%, #3f1b05 100%);
  border-top: 2px solid #f7ca88;
  border-bottom: 2px solid #1f0b02;
  border-radius: 0 0 7px 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 5px rgba(0, 0, 0, 0.75);
}

/* Mộng gỗ ghép đuôi én ở 2 đầu mặt trước hộc bàn kéo */
.mong-go-hoc-ban {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(
    180deg,
    #783912 0px,
    #783912 4px,
    #c67631 4px,
    #c67631 8px
  );
  border-left: 1px solid #2e1305;
  border-right: 1px solid #2e1305;
}

.mong-go-hoc-ban.mong-go-trai {
  left: 0;
  border-radius: 0 0 0 5px;
}

.mong-go-hoc-ban.mong-go-phai {
  right: 0;
  border-radius: 0 0 5px 0;
}

/* Ốp gỗ soi chỉ nổi ở giữa mặt trước ngăn kéo bàn */
.op-go-noi-mat-truoc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 16px;
  height: 12px;
  background: linear-gradient(180deg, #8c4514 0%, #5c2a0a 100%);
  border: 1px solid #351605;
  border-bottom-color: #dca05a;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.cum-tay-nam-khoa-dong-hoc-ban {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.o-khoa-dong-hoc-ban {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #f59e0b 55%, #78350f 100%);
  border: 1px solid #1e0b03;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
}

.o-khoa-dong-hoc-ban::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 1.5px;
  height: 4px;
  background: #1e0b03;
  border-radius: 1px;
}

/* Tay nắm kéo hộc bàn chữ U bằng đồng đúc 3D có 2 chân ốc đồng */
.tay-nam-keo-hoc-ban-3d {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.chan-oc-tay-nam {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #b45309 75%, #451a03 100%);
  border: 1px solid #1e0b03;
  z-index: 1;
}

.tay-nam-dong-hoc-ban {
  width: 48px;
  height: 6px;
  margin: 0 -2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffbeb 0%, #fbbf24 42%, #b45309 85%, #451a03 100%);
  border: 1px solid #1e0b03;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2.5px 3px rgba(0, 0, 0, 0.88);
}

/* Lòng mỗi hộc bàn (đáy ván gỗ ấm tự nhiên, có bóng đổ sâu từ thành hộc bàn xuống đáy) */
.hoc-ngan-keo {
  position: relative;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(122, 61, 22, 0.25) 0px,
      rgba(122, 61, 22, 0.25) 8px,
      rgba(86, 40, 12, 0.25) 8px,
      rgba(86, 40, 12, 0.25) 16px
    ),
    linear-gradient(180deg, #52260d 0%, #683313 50%, #4b220b 100%);
  padding: 3.5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.65);
  min-width: 0;
}

/* HỘC TRÁI: KHAY VÁCH GỖ CHIA 8-9 Ô ĐỰNG CÁC XẤP TIỀN THẬT VIỆT NAM */
.khay-go-chia-ngan-tien {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  /* Khung vách ngăn gỗ sáng ấm như gỗ thông/gỗ xoan đào chia từng ô tiền */
  background: linear-gradient(180deg, #d88b42 0%, #a85c1f 100%);
  padding: 3px;
  border-radius: 4px;
  border: 1.5px solid #3d1a07;
  box-shadow:
    inset 0 1px 0 #fae0b0,
    0 2px 3px rgba(0, 0, 0, 0.65);
}

.hang-ngan-tien {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.5px;
  align-items: stretch;
  background: transparent;
}

.hang-ngan-tien.hang-tien-le {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Mỗi ô gỗ nhỏ trong Hộc Trái đựng 1 xấp tiền thật Việt Nam */
.o-ngan-go-to-tien.ngan-to-tien {
  position: relative;
  height: 34px;
  padding: 1.5px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #2d1306 0%, #49210b 100%) !important;
  border: 1px solid #260f04;
  border-top: 1.5px solid #1a0902;
  border-bottom: 1.5px solid #f4c17a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  overflow: visible;
  transition: transform 0.12s ease, filter 0.12s ease;
}

/* Thanh kẹp tiền bằng thép/đồng gắn ở mép trên mỗi ô gỗ giữ xấp tiền */
.kep-sat-giu-xap-tien {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #94a3b8 0%, #f8fafc 50%, #64748b 100%);
  border: 1px solid #1e293b;
  border-top: none;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.khung-xap-tien-ve-that {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* XẤP TIỀN / TỜ TIỀN THẬT VIỆT NAM (Dùng ảnh chụp/scan tiền thật Việt Nam, có cửa sổ polymer bóng & cạnh xấp giấy 3D rõ độ dày theo số tờ) */
.svg-to-tien-ve-that {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  transition: transform 0.12s ease;
}

.to-tien-anh-that-vn.xap-tien-that-ngan-keo {
  --tong-lop-xap: 3;
  --mau-canh-xap-sang: #fff8e7;
  --mau-canh-xap-toi: #d8c39e;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

.to-tien-anh-that-vn.to-100k {
  --mau-canh-xap-sang: #d1fae5;
  --mau-canh-xap-toi: #6ee7b7;
}

.to-tien-anh-that-vn.to-50k {
  --mau-canh-xap-sang: #fce7f3;
  --mau-canh-xap-toi: #f9a8d4;
}

.to-tien-anh-that-vn.to-20k {
  --mau-canh-xap-sang: #e0f2fe;
  --mau-canh-xap-toi: #7dd3fc;
}

.to-tien-anh-that-vn.to-10k {
  --mau-canh-xap-sang: #fef3c7;
  --mau-canh-xap-toi: #fcd34d;
}

.to-tien-anh-that-vn.to-5k {
  --mau-canh-xap-sang: #e0e7ff;
  --mau-canh-xap-toi: #a5b4fc;
}

.to-tien-anh-that-vn.to-2k {
  --mau-canh-xap-sang: #ecfccb;
  --mau-canh-xap-toi: #bef264;
}

.to-tien-anh-that-vn.to-1k {
  --mau-canh-xap-sang: #fef9c3;
  --mau-canh-xap-toi: #fde047;
}

.to-tien-anh-that-vn.to-500d {
  --mau-canh-xap-sang: #ffe4e6;
  --mau-canh-xap-toi: #fda4af;
}

/* Các lớp tờ tiền xếp chồng bậc thang bên dưới tạo độ dày cọc tiền thật trong ngăn kéo gỗ:
   - 1 tờ (--tong-lop-xap: 0): mỏng dính 1 tờ nằm sát đáy ngăn gỗ
   - Nhiều tờ (--tong-lop-xap: 1..5): cọc tiền nhô cao dần và lộ rõ từng mép tờ tiền xếp chồng ở cạnh dưới & cạnh phải */
.lop-day-xap-tien {
  position: absolute;
  top: calc(9px - (var(--tong-lop-xap, 0) - var(--bac-xap, 1)) * 1.7px);
  left: calc(1px + var(--bac-xap, 1) * 0.9px);
  right: calc(1px + (var(--tong-lop-xap, 0) - var(--bac-xap, 1)) * 0.9px);
  bottom: calc((var(--tong-lop-xap, 0) - var(--bac-xap, 1)) * 1.7px);
  border-radius: 2px;
  background: var(--mau-canh-xap-sang, #f7ecd5);
  border: 1px solid #231106;
  pointer-events: none;
  z-index: calc(10 - var(--bac-xap, 1));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.lop-day-xap-tien.lop-xap-chan {
  background: var(--mau-canh-xap-toi, #d8c39e);
}

.mat-to-tien-anh-that {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2.5px;
  overflow: hidden;
  border: 1px solid rgba(35, 18, 8, 0.9);
  background: #f8fafc;
  z-index: 12;
  box-shadow:
    inset 0 0 0 0.8px rgba(255, 250, 235, 0.55),
    0 1.5px 2px rgba(0, 0, 0, 0.65);
}

.to-tien-anh-that-vn.xap-tien-that-ngan-keo > .mat-to-tien-anh-that {
  position: absolute;
  width: auto;
  height: auto;
  top: calc(9px - var(--tong-lop-xap, 0) * 1.7px);
  left: 1px;
  right: calc(1px + var(--tong-lop-xap, 0) * 0.9px);
  bottom: calc(var(--tong-lop-xap, 0) * 1.7px);
}

.badge-so-to-trong-hoc {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 6;
  padding: 0.5px 3px;
  border-radius: 3px;
  border: 1px solid #fde68a;
  background: rgba(24, 13, 6, 0.92);
  color: #fef08a;
  font-family: var(--font-pixel);
  font-size: 0.44rem;
  font-weight: 800;
  line-height: 1.1;
  pointer-events: none;
}

.badge-so-to-trong-hoc.nhieu-to {
  background: #065f46;
  border-color: #6ee7b7;
  color: #ecfdf5;
}

.badge-so-to-trong-hoc.sap-het-to {
  background: #9a3412;
  border-color: #fde047;
  color: #fffbeb;
}

.badge-so-to-trong-hoc.het-to {
  background: #7f1d1d;
  border-color: #fca5a5;
  color: #fecaca;
}

.anh-to-tien-that-vn {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(1.1) contrast(1.06) brightness(1.02);
}

/* Cửa sổ trong suốt ánh bạc đặc trưng trên tờ tiền Polymer Việt Nam (10k -> 500k) */
.cua-so-polymer-that {
  position: absolute;
  top: 18%;
  right: 11%;
  width: 12%;
  height: 56%;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(224, 242, 254, 0.18) 48%,
    rgba(255, 255, 255, 0.42) 100%
  );
  border: 0.6px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.75);
  pointer-events: none;
  z-index: 2;
}

/* Nhãn số mệnh giá nhỏ gọn góc phải dưới giúp đọc nhanh mà không che chân dung Bác Hồ trên tờ tiền thật */
.nhan-menh-gia-goc-to-tien {
  position: absolute;
  left: 1px;
  bottom: 1px;
  z-index: 3;
  padding: 0 2.5px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.78);
  color: #fef08a;
  border: 0.5px solid rgba(254, 240, 138, 0.65);
  font-family: var(--font-pixel);
  font-size: 0.41rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  pointer-events: none;
  text-shadow: 0 1px 0 #000000;
}

.o-ngan-go-to-tien.ngan-to-tien:hover:not(:disabled) .svg-to-tien-ve-that {
  transform: translateY(-2px) scale(1.04);
}

.o-ngan-go-to-tien.ngan-to-tien:active:not(:disabled) .svg-to-tien-ve-that {
  transform: translateY(0.5px) scale(0.97);
}

.o-ngan-go-to-tien.ngan-to-tien:disabled {
  opacity: 0.85;
  filter: brightness(0.9) saturate(0.92);
  cursor: not-allowed;
}

.o-ngan-go-to-tien.ngan-to-tien.goi-y-thoi:not(:disabled) {
  border-color: #fde047;
  box-shadow:
    inset 0 0 5px rgba(253, 224, 71, 0.45),
    0 0 6px rgba(253, 224, 71, 0.75);
}

.o-ngan-go-to-tien.ngan-to-tien.dang-chon-to {
  border-color: #ffffff !important;
  box-shadow:
    0 0 0 1.5px #f59e0b,
    0 2px 5px rgba(0, 0, 0, 0.7) !important;
}

.o-ngan-go-to-tien.ngan-to-tien.dang-chon-to .svg-to-tien-ve-that {
  transform: translateY(-3px) scale(1.06);
}

.badge-so-to-chon {
  position: absolute;
  top: -5px;
  right: -3px;
  z-index: 7;
  background: #dc2626;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 999px;
  font-family: var(--font-pixel);
  font-size: 0.46rem;
  font-weight: 800;
  padding: 0 3px;
  line-height: 1.15;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* KHAY CẦM TIỀN THỐI & NÚT GIAO TIỀN Ở MÉP TRƯỚC HỘC TRÁI */
.chan-hoc-trai-hanh-dong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-height: 24px;
  background: linear-gradient(180deg, #381807 0%, #240e04 100%);
  border: 1px solid #7c3f18;
  border-radius: 4px;
  padding: 2px 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75);
}

.khay-to-tien-dang-cam {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.to-tien-mini-dang-cam {
  width: 34px;
  height: 17px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s ease;
}

.to-tien-mini-dang-cam:hover {
  transform: translateY(-2px) scale(1.08);
}

.so-to-cam-them {
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  font-weight: 800;
  color: #fde047;
  padding: 0 2px;
}

.nhan-trang-thai-khay-tien {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.tom-tat-thoi-hoc-trai {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(254, 243, 199, 0.14);
  color: #fef08a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tom-tat-thoi-hoc-trai.du-tien-thoi {
  background: #16a34a;
  color: #ffffff;
}

.tom-tat-thoi-hoc-trai.du-qua-tay {
  background: #dc2626;
  color: #ffffff;
}

.nut-xoa-tien-thoi {
  padding: 2px 4px;
  border-radius: 4px;
  background: #7f1d1d;
  color: #fecaca;
  border: 1px solid #ef4444;
  font-family: var(--font-pixel);
  font-size: 0.52rem;
  font-weight: 800;
  flex-shrink: 0;
  cursor: pointer;
}

.nut-giao-tien-hoc-trai {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3.5px 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%);
  color: #2b1d14;
  border: 1.5px solid #2b1d14;
  font-family: var(--font-pixel);
  font-size: 0.54rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1.5px 0 #1a0902;
}

.nut-giao-tien-hoc-trai.san-sang-thu {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #ffffff;
  border-color: #052e16;
  text-shadow: 0 1px 0 #052e16;
  animation: nhapNhayKeCan 0.85s ease-in-out infinite alternate;
}

/* ============================================================================
   3. HỘC PHẢI: NGUYÊN 1 CUỐN SỔ GHI NỢ THẬT ĐẶT TRONG LÒNG HỘC BÀN GỖ
      (Có bìa cứng đỏ đô, bọc góc đồng, gáy lò xo sắt, độ dày xấp giấy 3D,
       dây ruy-băng đỏ đánh dấu trang, cây bút bi xanh & chữ viết tay trên dòng kẻ)
   ============================================================================ */
.hoc-ngan-keo.hoc-phai-so-no {
  padding: 4px 5px 6px 4px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.hoc-ngan-keo.hoc-phai-so-no.hoc-so-no-dang-can {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(180, 83, 9, 0.35) 0%, rgba(18, 7, 2, 0.92) 100%),
    #1c0b03;
}

/* Bản thân Cuốn Sổ Ghi Nợ Thật nằm trong hộc gỗ phải */
.cuon-so-no-that-trong-hoc {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 86px;
  /* Bìa cứng màu đỏ đô bọc ngoài trang giấy */
  background: linear-gradient(145deg, #991b1b 0%, #650f12 60%, #450a0a 100%);
  border: 2px solid #240705;
  border-radius: 3px 7px 7px 3px;
  padding: 2.5px 5px 4px 7px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* Độ dày xấp trang giấy trắng ngà ở cạnh phải và cạnh đáy + bóng đổ xuống đáy hộc bàn gỗ */
  box-shadow:
    1.5px 1.5px 0 #dfd3bd,
    3px 3px 0 #bfb093,
    4px 4px 0 #230c03,
    0 5px 8px rgba(0, 0, 0, 0.78);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.cuon-so-no-that-trong-hoc:hover {
  transform: translateY(-1px) rotate(-0.4deg);
}

.cuon-so-no-that-trong-hoc.so-dang-cho-ky {
  box-shadow:
    1.5px 1.5px 0 #dfd3bd,
    3px 3px 0 #bfb093,
    4px 4px 0 #230c03,
    0 0 10px rgba(251, 191, 36, 0.7);
}

/* 2 góc bọc đồng mạ vàng của bìa cứng cuốn sổ */
.goc-dong-bia-so {
  position: absolute;
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 55%, #92400e 100%);
  border: 1px solid #2b1d14;
  z-index: 4;
  pointer-events: none;
}

.goc-dong-bia-so.goc-dong-tren-phai {
  top: -1px;
  right: -1px;
  border-radius: 0 6px 0 4px;
}

.goc-dong-bia-so.goc-dong-duoi-phai {
  bottom: -1px;
  right: -1px;
  border-radius: 4px 0 6px 0;
}

/* Gáy lò xo sắt / khâu chỉ bên mép trái cuốn sổ */
.gay-lo-xo-cuon-so {
  position: absolute;
  top: 5px;
  bottom: 6px;
  left: -3px;
  width: 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 5;
  pointer-events: none;
}

.khoen-lo-xo-so {
  width: 9px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fafc 0%, #94a3b8 55%, #334155 100%);
  border: 1px solid #0f172a;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
}

/* Dây ruy-băng đỏ đánh dấu trang thò ra ở đáy cuốn sổ */
.day-ruy-bang-do-so {
  position: absolute;
  bottom: -6px;
  left: 38%;
  width: 8px;
  height: 8px;
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  border: 1px solid #2b1d14;
  border-top: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  z-index: 2;
  pointer-events: none;
}

/* Cây bút bi Thiên Long màu xanh đặt nghiêng bên mép phải cuốn sổ */
.khung-but-bi-tren-so {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 15px;
  height: 76px;
  transform: rotate(12deg);
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.45));
}

.svg-cay-but-bi-that {
  width: 100%;
  height: 100%;
  display: block;
}

/* Trang giấy vở trắng ngà có dòng kẻ ngang xanh & đường lề đỏ dọc bên trong cuốn sổ */
.trang-so-tay-hoc-phai.trang-giay-so-no-that {
  position: relative;
  flex: 1;
  background:
    linear-gradient(
      90deg,
      transparent 10px,
      rgba(220, 38, 38, 0.52) 10px,
      rgba(220, 38, 38, 0.52) 11.2px,
      transparent 11.2px,
      transparent 12.6px,
      rgba(220, 38, 38, 0.35) 12.6px,
      rgba(220, 38, 38, 0.35) 13.4px,
      transparent 13.4px
    ),
    repeating-linear-gradient(
      180deg,
      #fffdf6 0px,
      #fffdf6 14px,
      rgba(59, 130, 246, 0.32) 14px,
      rgba(59, 130, 246, 0.32) 15px
    );
  border: 1px solid #92400e;
  border-radius: 2px 5px 5px 2px;
  padding: 2px 13px 2px 16px;
  box-shadow:
    inset 3px 0 5px rgba(120, 53, 15, 0.18),
    1px 1px 0 #e7dcc6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Nếp gấp góc trang giấy dưới cùng bên phải */
.nep-gap-goc-trang-so {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #f3ead6 0%, #d6c5a3 50%, #7f1d1d 52%, #5c1012 100%);
  border-top: 1px solid #b45309;
  border-left: 1px solid #b45309;
  border-radius: 2px 0 0 0;
  pointer-events: none;
}

.dau-trang-so-no-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  border-bottom: 1.5px double rgba(185, 28, 28, 0.55);
  padding-bottom: 1px;
}

.moc-do-tieu-de-so {
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  font-weight: 800;
  color: #991b1b;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.dong-ngay-so-tay-mini {
  font-family: var(--font-hand);
  font-size: 0.58rem;
  font-weight: 700;
  color: #7c2d12;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nut-lat-mo-so-goc {
  padding: 0 3px;
  border-radius: 3px;
  background: #fef3c7;
  color: #991b1b;
  border: 1px solid #b45309;
  font-family: var(--font-pixel);
  font-size: 0.44rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  flex-shrink: 0;
}

.noi-dung-viet-tay-mini {
  font-family: var(--font-hand);
  color: #1e293b;
  line-height: 1.12;
  padding: 1px 0;
}

.chu-viet-tay-dong-1 {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e3a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chu-viet-tay-so-tien {
  font-size: 0.74rem;
  font-weight: 700;
  color: #b91c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chu-viet-tay-phu-de {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Con dấu ký nhận hoặc dòng lật trang ngay trên mặt giấy của cuốn sổ */
.nut-ky-so-hoc-phai.con-dau-ky-so-tren-giay {
  width: 100%;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(254, 226, 226, 0.9);
  color: #991b1b;
  border: 1.5px dashed #dc2626;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.nut-ky-so-hoc-phai.con-dau-ky-so-tren-giay.san-sang-ky {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  border: 1.5px solid #450a0a;
  box-shadow: 0 1px 0 #450a0a;
  animation: nhapNhayKeCan 0.85s ease-in-out infinite alternate;
}

.dong-chan-trang-so-that {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nhan-lat-trang-so {
  font-family: var(--font-hand);
  font-size: 0.64rem;
  font-weight: 700;
  color: #991b1b;
  text-decoration: underline;
  text-decoration-style: dotted;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4. KỆ BÊN DƯỚI FOCUS VÀO ICON TO RÕ, GỌN CHỮ */
.vung-do-goi-hang .nut-nhom-hang.nhom-co-mon-can {
  border-color: #fde047 !important;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.65);
}

.vung-do-goi-hang .o-hang-ke.o-hang-focus-icon {
  min-height: 78px;
  padding: 13px 2px 3px;
  gap: 1px;
}

.vung-do-goi-hang .o-hang-ke .khung-icon-mon-chinh {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
}

.vung-do-goi-hang .o-hang-ke .khung-icon-mon-chinh .khung-dohoa {
  width: 38px !important;
  height: 38px !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
  transition: transform 0.14s ease;
}

.vung-do-goi-hang .o-hang-ke:hover .khung-icon-mon-chinh .khung-dohoa {
  transform: scale(1.07);
}

.vung-do-goi-hang .o-hang-ke.da-nhat-mon-nay {
  border-color: #16a34a !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #bbf7d0 100%) !important;
}

/* 5. MODAL SỔ GHI NỢ VIẾT TAY (VIẾT ĐÚNG DÒNG KẺ, 1 MÀU MỰC BÚT BI ĐƠN GIẢN, LẬT TRANG 3D NHƯ SỔ THẬT) */
.hop-modal-so-no-viet-tay {
  background: #3d1d0e !important;
  border: 3px solid #240f06 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.72) !important;
}

.dau-modal-bia-so {
  background: linear-gradient(180deg, #5c2418 0%, #3b150d 100%) !important;
  color: #f6e7c8 !important;
  border-bottom: 2px solid #8a5229 !important;
  padding: 7px 10px !important;
}

.nut-dong-so-no-x {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid rgba(254, 240, 138, 0.55);
  background: rgba(36, 15, 6, 0.65);
  color: #fde68a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease, background 0.12s ease;
}

.nut-dong-so-no-x:hover {
  background: rgba(127, 29, 29, 0.85);
}

.nut-dong-so-no-x:active {
  transform: scale(0.94);
}

.than-modal-so-tay {
  padding: 10px 10px 12px !important;
  background: radial-gradient(circle at 50% 45%, #472312 0%, #261107 100%) !important;
  perspective: 1100px;
  overflow: hidden;
}

.trang-vo-ke-ngang-so-no.trang-giay-so-no-lat {
  position: relative;
  background: #faf3e0;
  border: 1.5px solid #bfa77a;
  border-left: 8px solid #6b2d26;
  border-radius: 3px 9px 9px 3px;
  padding: 10px 12px 10px 30px;
  box-shadow:
    inset 0 0 16px rgba(160, 120, 60, 0.14),
    3px 3px 0 #e6dac0,
    6px 6px 0 #cfc0a1,
    0 8px 18px rgba(0, 0, 0, 0.48);
  color: #1d3557;
  transform-origin: left center;
  touch-action: pan-y;
  user-select: none;
}

.trang-giay-so-no-lat.hieu-ung-lat-trang-tiep {
  animation: latTrangSoTiep3D 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.trang-giay-so-no-lat.hieu-ung-lat-trang-lui {
  animation: latTrangSoLui3D 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes latTrangSoTiep3D {
  0% {
    opacity: 0.55;
    transform: perspective(1100px) rotateY(-28deg) translateX(10px) scale(0.98);
    box-shadow:
      inset 28px 0 36px rgba(0, 0, 0, 0.22),
      3px 3px 0 #e6dac0,
      6px 6px 0 #cfc0a1;
  }
  100% {
    opacity: 1;
    transform: perspective(1100px) rotateY(0deg) translateX(0) scale(1);
    box-shadow:
      inset 0 0 16px rgba(160, 120, 60, 0.14),
      3px 3px 0 #e6dac0,
      6px 6px 0 #cfc0a1,
      0 8px 18px rgba(0, 0, 0, 0.48);
  }
}

@keyframes latTrangSoLui3D {
  0% {
    opacity: 0.55;
    transform: perspective(1100px) rotateY(24deg) translateX(-10px) scale(0.98);
    box-shadow:
      inset -28px 0 36px rgba(0, 0, 0, 0.2),
      3px 3px 0 #e6dac0,
      6px 6px 0 #cfc0a1;
  }
  100% {
    opacity: 1;
    transform: perspective(1100px) rotateY(0deg) translateX(0) scale(1);
    box-shadow:
      inset 0 0 16px rgba(160, 120, 60, 0.14),
      3px 3px 0 #e6dac0,
      6px 6px 0 #cfc0a1,
      0 8px 18px rgba(0, 0, 0, 0.48);
  }
}

.gay-lo-xo-trang-so {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -6px;
  width: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}

.vong-kem-lo-xo {
  display: block;
  width: 12px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #475569 0%, #cbd5e1 50%, #334155 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.le-do-trang-vo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 1.5px;
  background: rgba(185, 80, 80, 0.38);
  pointer-events: none;
}

.danh-sach-dong-ke-so-no {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Mỗi dòng kẻ có chiều cao tối thiểu 34px, tự giãn theo nội dung viết tay để không bao giờ bị khuất chữ */
.dong-ke-so-no {
  box-sizing: border-box;
  height: auto;
  min-height: 34px;
  padding: 5px 4px 4px 6px;
  border-bottom: 1px solid rgba(110, 148, 185, 0.45);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: 6px;
  row-gap: 2px;
  overflow: visible;
  white-space: normal;
  color: #1d3557;
}

.dong-ke-so-no--dau-trang {
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px double rgba(110, 148, 185, 0.72);
}

.dong-ke-so-no--dau-trang .chu-so-no-in-dam,
.dong-ke-so-no--dau-trang .chu-so-no-nho {
  flex: 0 1 auto;
}

.dong-ke-so-no--dau-trang .chu-so-no-nho {
  margin-left: auto;
  text-align: right;
}

.dong-ke-so-no--can-phai {
  justify-content: flex-end;
  text-align: right;
}

.dong-ke-so-no--nut-ky {
  height: auto;
  min-height: 40px;
  padding-top: 4px;
  padding-bottom: 4px;
  align-items: center;
}

.nhan-dong-so-no {
  color: rgba(29, 53, 87, 0.74);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.28;
  flex-shrink: 0;
}

.chu-so-no-in-dam {
  color: #1d3557;
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.28;
  flex: 1 1 150px;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
}

.chu-so-no-thuong {
  color: #1d3557;
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.28;
  flex: 1 1 130px;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
}

.chu-so-no-nghieng {
  color: #1d3557;
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.32;
  flex: 1 1 160px;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
}

.chu-so-no-nho {
  color: rgba(29, 53, 87, 0.82);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.28;
  flex: 1 1 150px;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
}

.cum-icon-vat-pham-so-no {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: center;
  flex-shrink: 0;
  margin-bottom: -2px;
}

.nhan-chu-ky-duoi-phai {
  color: rgba(29, 53, 87, 0.76);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 100%;
  margin-left: auto;
  text-align: right;
  white-space: normal;
  overflow: visible;
}

.chu-ky-tay-duoi-phai {
  color: #1d3557;
  font-size: 20.5px;
  font-weight: 700;
  line-height: 1.35;
  padding: 2px 4px 2px 0;
  max-width: 100%;
  margin-left: auto;
  text-align: right;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
}

.nut-ky-so-duoi-phai {
  height: auto;
  min-height: 30px;
  max-width: 100%;
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1.5px dashed rgba(29, 53, 87, 0.55);
  background: rgba(29, 53, 87, 0.08);
  color: #1d3557;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.22;
  white-space: normal;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.nut-ky-so-duoi-phai.san-sang-ky {
  border-style: solid;
  border-color: #1d3557;
  background: #1d3557;
  color: #faf3e0;
  box-shadow: 0 2px 5px rgba(29, 53, 87, 0.35);
}

.nut-ky-so-duoi-phai:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.chan-trang-lat-so {
  margin-top: 8px;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.nut-lat-trang-so {
  height: 28px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid rgba(29, 53, 87, 0.38);
  background: rgba(29, 53, 87, 0.07);
  color: #1d3557;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}

.nut-lat-trang-so:disabled {
  opacity: 0.35;
  cursor: default;
}

.chi-so-trang-so {
  color: rgba(29, 53, 87, 0.76);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* ============================================================================
   ĐỒNG BỘ TỈ LỆ CHIỀU CAO KỆ (CHUẨN TỈ LỆ KỆ 4 BỊ KHÓA = 132px)
   & VẼ Ô KỆ / Ô HÀNG BỊ KHÓA (CÓ NAN SẮT CHÉO, Ổ KHÓA & BÓNG MỜ MÓN HÀNG)
   ============================================================================ */

/* 1. Ô TAB KỆ BỊ KHÓA TRÊN THANH 6 NHÓM (.nut-nhom-hang.chua-mo-ke) */
.vung-do-goi-hang .nut-nhom-hang {
  position: relative;
  overflow: hidden;
}

.vung-do-goi-hang .nut-nhom-hang.chua-mo-ke {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(15, 23, 42, 0.36) 0px,
      rgba(15, 23, 42, 0.36) 5px,
      rgba(51, 65, 85, 0.36) 5px,
      rgba(51, 65, 85, 0.36) 10px
    ),
    linear-gradient(180deg, #3f322a 0%, #261d18 100%) !important;
  border: 1.5px solid #78716c !important;
  color: #d6d3d1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 8px rgba(0, 0, 0, 0.65),
    0 1.5px 0 #140d09 !important;
}

/* Khi đang bấm xem một kệ bị khóa */
.vung-do-goi-hang .nut-nhom-hang.chua-mo-ke.dang-chon {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(69, 26, 3, 0.42) 0px,
      rgba(69, 26, 3, 0.42) 5px,
      rgba(120, 53, 15, 0.42) 5px,
      rgba(120, 53, 15, 0.42) 10px
    ),
    linear-gradient(180deg, #78350f 0%, #451a03 100%) !important;
  border: 1.5px solid #fbbf24 !important;
  color: #fef08a !important;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.45),
    0 0 6px rgba(245, 158, 11, 0.65),
    0 1.5px 0 #230e04 !important;
}

.khung-icon-tab-nhom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vung-do-goi-hang .nut-nhom-hang.chua-mo-ke .khung-icon-tab-nhom .khung-dohoa,
.vung-do-goi-hang .nut-nhom-hang.chua-mo-ke .khung-icon-tab-nhom .anh-sprite-svg {
  filter: grayscale(0.55) brightness(0.75) contrast(1.08);
  opacity: 0.78;
}

.icon-o-khoa-tab {
  position: absolute;
  bottom: -2px;
  right: -5px;
  font-size: 0.54rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}

.vung-do-goi-hang .gia-mo-nhom-nho.badge-khoa-cap-ke {
  position: absolute;
  top: 1px;
  right: 1.5px;
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%) !important;
  color: #fde047 !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 4px !important;
  font-family: var(--font-pixel);
  font-size: 0.44rem !important;
  font-weight: 800;
  padding: 0 2.5px !important;
  line-height: 1.15 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* 2. KHÓA CỨNG CHIỀU CAO KHUNG KỆ (.luoi-ke-hang = 132px) ĐỂ MỌI KỆ 1..6 ĐỀU ĐỒNG ĐỀU 100% NHƯ KỆ 4 */
.vung-do-goi-hang .khung-noi-dung-goi-hang-do {
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
  flex: 0 0 132px !important;
}

.vung-do-goi-hang .luoi-ke-hang {
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
  box-sizing: border-box !important;
}

.vung-do-goi-hang .luoi-ke-hang.ke-da-mo {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  padding: 5px 4px !important;
  gap: 3.5px !important;
}

.vung-do-goi-hang .luoi-ke-hang.ke-da-mo .o-hang-ke {
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* 3. KHI CHỌN VÀO KỆ BỊ KHÓA (.luoi-ke-hang.ke-dang-bi-khoa):
      Hàng trên vẽ 5 Ô BỊ KHÓA (có bóng mờ món hàng + nan sắt khóa chéo + ổ khóa)
      Hàng dưới là Thanh Mở Khóa Kệ 1 dòng gọn gàng không bao giờ nhảy dòng */
.vung-do-goi-hang .luoi-ke-hang.ke-dang-bi-khoa {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 4px !important;
}

.hang-5-o-ke-bi-khoa {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3.5px;
  width: 100%;
  height: 66px;
  flex: 0 0 66px;
}

.o-hang-ke.o-ke-bi-khoa-preview {
  position: relative;
  height: 100% !important;
  min-height: 0 !important;
  padding: 3px 2px 2px !important;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      -38deg,
      rgba(15, 23, 42, 0.34) 0px,
      rgba(15, 23, 42, 0.34) 6px,
      rgba(51, 65, 85, 0.34) 6px,
      rgba(51, 65, 85, 0.34) 12px
    ),
    linear-gradient(180deg, #332922 0%, #1e1713 100%) !important;
  border: 1.5px solid #64748b !important;
  border-bottom: 3px solid #0f172a !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.12) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}

/* Vẽ 2 thanh nan sắt/gỗ đóng chéo chữ X khóa lên từng ô hàng bị khóa */
.o-hang-ke.o-ke-bi-khoa-preview::before,
.o-hang-ke.o-ke-trong-chua-mo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      28deg,
      transparent 44%,
      rgba(15, 23, 42, 0.65) 45%,
      rgba(148, 163, 184, 0.55) 49%,
      rgba(71, 85, 105, 0.75) 52%,
      rgba(15, 23, 42, 0.65) 55%,
      transparent 56%
    ),
    linear-gradient(
      -28deg,
      transparent 44%,
      rgba(15, 23, 42, 0.65) 45%,
      rgba(148, 163, 184, 0.55) 49%,
      rgba(71, 85, 105, 0.75) 52%,
      rgba(15, 23, 42, 0.65) 55%,
      transparent 56%
    );
  pointer-events: none;
  z-index: 2;
}

.badge-khoa-o-nho {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;
  font-size: 0.62rem;
  line-height: 1;
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid #fbbf24;
  border-radius: 4px;
  padding: 1px 2.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.khung-icon-mon-khoa {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 100%;
  margin-top: 4px;
}

.khung-icon-mon-khoa .khung-dohoa,
.khung-icon-mon-khoa .anh-sprite-svg {
  width: 28px !important;
  height: 28px !important;
  filter: grayscale(0.75) brightness(0.68) contrast(1.15);
  opacity: 0.75;
}

.ten-mon-ke-khoa {
  position: relative;
  z-index: 3;
  width: 100%;
  background: rgba(15, 23, 42, 0.82);
  color: #cbd5e1;
  border-radius: 3px;
  padding: 1px 2px;
  font-size: 0.52rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hộp mở khóa kệ ở hàng dưới (cao cố định 54px, không bao giờ rớt dòng làm lệch tỉ lệ) */
.vung-do-goi-hang .hop-mo-khoa-ke-moi.hop-mo-khoa-dong-bo {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex: 0 0 54px !important;
  padding: 4px 7px !important;
  border-radius: 7px;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
  border: 2px solid #b45309 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #230e04 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.thong-tin-mo-ke-gon {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.thong-tin-mo-ke-gon .khung-dohoa,
.thong-tin-mo-ke-gon .anh-sprite-svg {
  width: 26px !important;
  height: 26px !important;
  flex-shrink: 0;
}

.cum-chu-mo-ke-gon {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.tieu-de-ke-khoa-1-dong {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #7f1d1d !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.mo-ta-ke-khoa-1-dong {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #451a03 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.15 !important;
  text-align: left !important;
  margin: 0 !important;
}

.cum-nut-mo-ke-dong-bo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cum-nut-mo-ke-dong-bo .nut-mo-ke-chinh {
  padding: 5px 8px !important;
  font-size: 0.64rem !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #042f2e !important;
  box-shadow: 0 2px 0 #042f2e !important;
}

.cum-nut-mo-ke-dong-bo .nut-mo-ke-test {
  padding: 5px 6px !important;
  font-size: 0.58rem !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* 4. Ô MÓN HÀNG LẺ CHƯA MỞ TRONG KỆ ĐÃ MỞ (.o-hang-ke.o-ke-trong-chua-mo) */
.vung-do-goi-hang .o-hang-ke.o-ke-trong-chua-mo {
  position: relative;
  background:
    repeating-linear-gradient(
      -38deg,
      rgba(15, 23, 42, 0.34) 0px,
      rgba(15, 23, 42, 0.34) 6px,
      rgba(51, 65, 85, 0.34) 6px,
      rgba(51, 65, 85, 0.34) 12px
    ),
    linear-gradient(180deg, #3a2e25 0%, #241b15 100%) !important;
  border: 1.5px solid #64748b !important;
  border-bottom: 3.5px solid #0f172a !important;
  color: #e2e8f0 !important;
  opacity: 1 !important;
  overflow: hidden;
}

.vung-do-goi-hang .o-hang-ke.o-ke-trong-chua-mo .khung-icon-mon-chinh {
  position: relative;
}

.vung-do-goi-hang .o-hang-ke.o-ke-trong-chua-mo .khung-icon-mon-chinh .khung-dohoa,
.vung-do-goi-hang .o-hang-ke.o-ke-trong-chua-mo .khung-icon-mon-chinh .anh-sprite-svg {
  filter: grayscale(0.8) brightness(0.62) contrast(1.15);
  opacity: 0.72;
}

.nhan-o-khoa-giua-mon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 0.86rem;
  background: rgba(15, 23, 42, 0.88);
  border: 1.5px solid #fbbf24;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.vung-do-goi-hang .so-luong-badge.badge-mon-bi-khoa {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%) !important;
  color: #fde047 !important;
  border-color: #94a3b8 !important;
  z-index: 3;
}

.vung-do-goi-hang .o-hang-ke.o-ke-trong-chua-mo .ten-mon-ke {
  position: relative;
  z-index: 3;
  color: #f1f5f9 !important;
}

.vung-do-goi-hang .o-hang-ke.o-ke-trong-chua-mo .gia-mon-ke {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #fffbeb !important;
  border-color: #fde047 !important;
}

/* ============================================================================
   ĐỒNG BỘ TỈ LỆ KHUNG HÌNH & NHÂN VẬT TRÊN MỌI MÀN HÌNH ĐIỆN THOẠI (16:9 -> 21:9)
   - Không bao giờ bị lùn người hoặc méo hình khi kéo dài màn hình dọc / ngang
   ============================================================================ */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #18110c;
}

#app,
.hop-modal-mo-dau {
  width: 100% !important;
  max-width: min(100vw, 540px, calc(100dvh * 0.565)) !important;
  height: 100dvh !important;
  max-height: min(100dvh, calc(100vw * 2.22)) !important;
  min-height: 0 !important;
  margin: auto !important;
}

.man-hinh-3-vung {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  --chieu-cao-ke-dong-bo: clamp(114px, 18.2dvh, 162px);
}

/* Cho phép chiều cao kệ hàng co giãn mượt theo chiều dài màn hình nhưng vẫn khóa đồng bộ 100% giữa 6 kệ */
.vung-do-goi-hang .khung-noi-dung-goi-hang-do,
.vung-do-goi-hang .luoi-ke-hang {
  height: var(--chieu-cao-ke-dong-bo) !important;
  min-height: var(--chieu-cao-ke-dong-bo) !important;
  max-height: var(--chieu-cao-ke-dong-bo) !important;
  flex: 0 0 var(--chieu-cao-ke-dong-bo) !important;
}

.hang-5-o-ke-bi-khoa {
  height: calc(var(--chieu-cao-ke-dong-bo) - 66px) !important;
  flex: 0 0 calc(var(--chieu-cao-ke-dong-bo) - 66px) !important;
}

/* Sân khấu 2D dùng Container Query Units (cqh/cqw) để mọi nhân vật & đạo cụ co giãn 100% theo tỉ lệ tiệm */
.san-khau-quay {
  container-type: size;
}

/* Nhân vật chính (Bà Hoàng / Khách hàng đứng quầy):
   Luôn cao đúng 44.5% chiều cao sân khấu và giữ tỉ lệ vuông 1:1 (ghi đè inline style 162px của JS) */
.nhan-vat-tam-diem-mo-dau,
.khu-khach-hang {
  position: absolute !important;
  bottom: 15.2% !important;
  left: 48.5% !important;
  transform: translateX(-50%) !important;
  height: 44.5% !important;
  max-height: 44.5% !important;
  width: auto !important;
  max-width: 64% !important;
  aspect-ratio: 1 / 1 !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.khu-khach-hang.khach-tre-em {
  bottom: 15.2% !important;
  height: 38% !important;
  max-height: 38% !important;
  width: auto !important;
  max-width: 54% !important;
  aspect-ratio: 1 / 1 !important;
}

.nhan-vat-tam-diem-mo-dau .anh-sprite-svg,
.khu-khach-hang .anh-sprite-svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* Khách xếp hàng chờ #2, #3 phía sau cũng co giãn theo chiều cao sân khấu (cqh) */
.khach-xep-hang-1 .anh-sprite-svg {
  width: 41cqh !important;
  height: 41cqh !important;
  max-width: 52cqw !important;
  max-height: 52cqw !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.khach-xep-hang-2 .anh-sprite-svg {
  width: 38.2cqh !important;
  height: 38.2cqh !important;
  max-width: 48cqw !important;
  max-height: 48cqw !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.khach-xep-hang.khach-xep-hang-tre-em.khach-xep-hang-1 .anh-sprite-svg {
  width: 35cqh !important;
  height: 35cqh !important;
}

.khach-xep-hang.khach-xep-hang-tre-em.khach-xep-hang-2 .anh-sprite-svg {
  width: 32.5cqh !important;
  height: 32.5cqh !important;
}

/* Quạt bàn xanh trên mặt quầy gỗ co giãn đồng bộ theo chiều cao sân khấu */
.quat-ban-tren-quay-preview .khung-quat-ban-xoay {
  width: clamp(64px, 22cqh, 128px) !important;
  height: clamp(64px, 22cqh, 128px) !important;
  aspect-ratio: 1 / 1 !important;
}

.quat-ban-tren-quay-preview .khung-quat-ban-xoay .anh-sprite-svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Khung đường hẻm ngoài cửa sắt kéo: người đi bộ & xe máy co giãn đồng bộ theo khung cửa */
.khung-duong-hem-dong {
  container-type: size;
}

.nguoi-di-bo-hem[class*='hem-track-gan-'] .khung-buoc-di-6-frame {
  width: 34cqh !important;
  height: 34cqh !important;
  aspect-ratio: 1 / 1 !important;
}

.nguoi-di-bo-hem[class*='hem-track-xa-'] .khung-buoc-di-6-frame {
  width: 28cqh !important;
  height: 28cqh !important;
  aspect-ratio: 1 / 1 !important;
}

.nguoi-di-bo-hem.hem-track-xe-may-phai .khung-buoc-di-6-frame {
  width: 38cqh !important;
  height: 38cqh !important;
  aspect-ratio: 1 / 1 !important;
}

.khung-buoc-di-6-frame .anh-sprite-svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

@keyframes diXeMaySangPhai {
  0% {
    transform: translateX(-110cqw);
    opacity: 1;
  }
  15% {
    transform: translateX(125cqw);
    opacity: 1;
  }
  16%,
  100% {
    transform: translateX(125cqw);
    opacity: 0;
  }
}

@keyframes diBoSangPhaiXa {
  0% {
    transform: translate(-105cqw, 4px);
    opacity: 1;
  }
  4% {
    transform: translate(-46cqw, 3px);
  }
  7% {
    transform: translate(-10cqw, 0px);
  }
  12% {
    transform: translate(43cqw, 0px);
  }
  15% {
    transform: translate(79cqw, 5px);
  }
  18% {
    transform: translate(120cqw, 5px);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(120cqw, 5px);
    opacity: 0;
  }
}

@keyframes diBoSangTraiXa {
  0% {
    transform: translate(120cqw, 5px) scaleX(-1);
    opacity: 1;
  }
  4% {
    transform: translate(73cqw, 5px) scaleX(-1);
  }
  7% {
    transform: translate(37cqw, 0px) scaleX(-1);
  }
  12% {
    transform: translate(-16cqw, 0px) scaleX(-1);
  }
  15% {
    transform: translate(-52cqw, 3px) scaleX(-1);
  }
  18% {
    transform: translate(-105cqw, 4px) scaleX(-1);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(-105cqw, 4px) scaleX(-1);
    opacity: 0;
  }
}

@keyframes diBoSangPhai {
  0% {
    transform: translateX(-105cqw);
    opacity: 1;
  }
  18% {
    transform: translateX(120cqw);
    opacity: 1;
  }
  19%,
  100% {
    transform: translateX(120cqw);
    opacity: 0;
  }
}

@keyframes diBoSangTrai {
  0% {
    transform: translateX(120cqw) scaleX(-1);
    opacity: 1;
  }
  18% {
    transform: translateX(-105cqw) scaleX(-1);
    opacity: 1;
  }
  19%,
  100% {
    transform: translateX(-105cqw) scaleX(-1);
    opacity: 0;
  }
}

/* ============================================================================
   KHAY TIỀN & HŨ KẸO TRÊN MẶT BÀN GỖ (.khu-tien-tren-mat-ban) & MODAL ĐI ĐỔI TIỀN LẺ
   - BÊN TRÁI (.cum-trai-mat-ban-quay): Xấp tiền khách đưa
   - BÊN PHẢI (.cum-phai-mat-ban-quay): Xấp tiền thối 3D + Hũ Kẹo Oishi nắp đỏ nằm chung với đống hũ kẹo góc phải bàn
   ============================================================================ */
.khu-tien-tren-mat-ban {
  position: absolute;
  bottom: 1.2%;
  left: 2%;
  right: 1.8%;
  z-index: 12;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.cum-trai-mat-ban-quay {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  pointer-events: none;
  flex-shrink: 0;
}

.cum-phai-mat-ban-quay {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  pointer-events: none;
  flex-shrink: 0;
}

/* Hũ Kẹo Oishi nắp đỏ đặt chung với đống hũ kẹo ở góc phải mặt bàn gỗ */
.nut-hu-keo-thoi-tren-ban {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  background: transparent;
  border: 0;
  padding: 2px 3px 0;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}

.nut-hu-keo-thoi-tren-ban:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.07);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.72));
}

.nut-hu-keo-thoi-tren-ban:active:not(:disabled) {
  transform: translateY(0px) scale(0.95);
}

@keyframes nhipGoiYBocKeo {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 5px rgba(253, 224, 71, 0.55));
  }
  50% {
    transform: translateY(-2.5px) scale(1.05);
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.9));
  }
}

.nut-hu-keo-thoi-tren-ban.goi-y-boc-keo-sang {
  animation: nhipGoiYBocKeo 1.3s ease-in-out infinite;
}

.nut-hu-keo-thoi-tren-ban.hu-keo-het {
  opacity: 0.86;
}

.goi-y-boc-keo-tren-ban {
  position: absolute;
  bottom: calc(100% - 2px);
  right: 0;
  z-index: 4;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  border: 1.5px solid #451a03;
  font-family: var(--font-pixel);
  font-size: 8.5px;
  font-weight: 900;
  color: #451a03;
  white-space: nowrap;
  box-shadow: 0 2px 0 #451a03, 0 3px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.bong-do-hu-keo-ban,
.bong-chan-hu-keo-mat-ban {
  position: absolute;
  bottom: 12px;
  width: 38px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18, 9, 3, 0.72) 0%, rgba(18, 9, 3, 0) 75%);
  pointer-events: none;
  z-index: 0;
}

.than-hu-keo-tren-ban {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  filter: drop-shadow(0 3px 3px rgba(15, 8, 3, 0.72));
}

.svg-hu-keo-thoi-tren-ban {
  display: block;
  width: 44px;
  height: 48px;
}

.nhan-hu-keo-tren-ban {
  position: relative;
  z-index: 2;
  margin-top: -3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7c2d12 0%, #3b0f04 100%);
  border: 1.2px solid #fbbf24;
  font-family: var(--font-pixel);
  font-size: 8.5px;
  font-weight: 900;
  color: #fef08a;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.65);
}

.cum-tien-khach-tren-ban {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: 2px 3px 0;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease;
  flex-shrink: 0;
}

.cum-tien-khach-tren-ban:hover {
  transform: translateY(-2px) scale(1.04);
}

/* Xấp tiền khách đưa xếp chồng 3D trực tiếp trên mặt bàn gỗ (phóng to rõ nét) */
.xap-to-khach-dua-mat-ban {
  position: relative;
  width: 78px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.to-khach-dua-item {
  position: absolute;
  left: 4px;
  bottom: 2px;
  width: 68px;
  height: 34px;
  transform: rotate(-5deg);
  filter: drop-shadow(0 3px 4px rgba(15, 8, 3, 0.75));
  transition: transform 0.14s ease;
}

.to-khach-dua-item.to-khach-idx-0 {
  z-index: 1;
  transform: translate(0px, 0px) rotate(-5.5deg);
}

.to-khach-dua-item.to-khach-idx-1 {
  z-index: 2;
  transform: translate(4px, -3px) rotate(5deg);
}

.to-khach-dua-item.to-khach-idx-2 {
  z-index: 3;
  transform: translate(1.5px, -6px) rotate(-2deg);
}

.to-khach-dua-item.to-khach-idx-3 {
  z-index: 4;
  transform: translate(5px, -8px) rotate(4deg);
}

.nhan-tien-khach-tren-ban {
  padding: 1.5px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 22, 9, 0.96) 0%, rgba(24, 12, 5, 0.98) 100%);
  border: 1.2px solid #f59e0b;
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 900;
  color: #fde68a;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

.cum-tien-thoi-tren-mat-ban {
  position: relative;
  pointer-events: auto;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

/* Xấp tiền thối đặt trực tiếp trên mặt gỗ dưới chân vật phẩm (phóng to rõ nét 66x32px đồng bộ tiền bên trái) */
.day-to-tien-tren-mat-ban,
.day-to-tien-tren-mat-ban.xap-tien-chong-tren-ban {
  position: relative;
  width: 82px;
  height: 36px;
  display: block;
  padding: 0;
  overflow: visible;
}

.nhan-tien-thoi-tren-xap {
  position: absolute;
  right: -8px;
  bottom: 2px;
  z-index: 16;
  padding: 1px 4.5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #065f46 0%, #022c22 100%);
  border: 1px solid #6ee7b7;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.15;
  color: #fde047;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.7);
}

@keyframes datToTienLenBan {
  0% {
    opacity: 0;
    transform: translate(0px, 14px) scale(0.84) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(var(--lech-x, 0px), var(--lech-y, 0px)) scale(1) rotate(var(--goc-to, -4deg));
  }
}

.nut-to-tien-tren-mat-ban {
  position: absolute;
  left: 8px;
  bottom: 2px;
  width: 66px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  animation: datToTienLenBan 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  transition: transform 0.14s ease, filter 0.14s ease;
  filter: drop-shadow(0 2.5px 3.5px rgba(12, 6, 2, 0.78));
}

.nut-to-tien-tren-mat-ban.to-xap-idx-0 {
  --lech-x: 0px;
  --lech-y: 0px;
  --goc-to: -6deg;
  z-index: 1;
  transform: translate(0px, 0px) rotate(-6deg);
}

.nut-to-tien-tren-mat-ban.to-xap-idx-1 {
  --lech-x: 3px;
  --lech-y: -2.5px;
  --goc-to: 4.5deg;
  z-index: 2;
  transform: translate(3px, -2.5px) rotate(4.5deg);
}

.nut-to-tien-tren-mat-ban.to-xap-idx-2 {
  --lech-x: -1.5px;
  --lech-y: -5px;
  --goc-to: -2.5deg;
  z-index: 3;
  transform: translate(-1.5px, -5px) rotate(-2.5deg);
}

.nut-to-tien-tren-mat-ban.to-xap-idx-3 {
  --lech-x: 4px;
  --lech-y: -7px;
  --goc-to: 6.5deg;
  z-index: 4;
  transform: translate(4px, -7px) rotate(6.5deg);
}

.nut-to-tien-tren-mat-ban.to-xap-idx-4 {
  --lech-x: 0.5px;
  --lech-y: -9px;
  --goc-to: -4deg;
  z-index: 5;
  transform: translate(0.5px, -9px) rotate(-4deg);
}

.nut-to-tien-tren-mat-ban.to-xap-idx-5 {
  --lech-x: 3.5px;
  --lech-y: -11px;
  --goc-to: 3deg;
  z-index: 6;
  transform: translate(3.5px, -11px) rotate(3deg);
}

.nut-to-tien-tren-mat-ban.to-xap-idx-6,
.nut-to-tien-tren-mat-ban.to-xap-idx-7,
.nut-to-tien-tren-mat-ban.to-xap-idx-8,
.nut-to-tien-tren-mat-ban.to-xap-idx-9 {
  --lech-x: 2px;
  --lech-y: -12.5px;
  --goc-to: -5deg;
  z-index: 7;
  transform: translate(2px, -12.5px) rotate(-5deg);
}

.nut-to-tien-tren-mat-ban.to-tren-cung-xap:hover {
  transform: translate(var(--lech-x, 2px), calc(var(--lech-y, -4px) - 4px)) scale(1.07) rotate(0deg);
  z-index: 15;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.8));
}

.nut-to-tien-tren-mat-ban:active {
  transform: translate(var(--lech-x, 0px), calc(var(--lech-y, 0px) + 1px)) scale(0.95);
}

.to-tien-tren-mat-ban-that {
  width: 100%;
  height: 100%;
  border-radius: 2.5px;
  overflow: hidden;
  border: 1px solid rgba(254, 243, 199, 0.92);
  box-shadow: inset 0 0 0 0.8px rgba(43, 22, 8, 0.45);
  position: relative;
}

.to-tien-tren-mat-ban-that .mat-to-tien-anh-that {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0;
}

.to-tien-tren-mat-ban-that .anh-to-tien-that-vn {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.06) brightness(1.02);
}

.to-tien-tren-mat-ban-that .nhan-menh-gia-goc-to-tien {
  position: absolute;
  left: auto;
  right: 1.5px;
  bottom: 1px;
  background: rgba(15, 23, 42, 0.86);
  color: #fef08a;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 900;
  padding: 0 3px;
  border-radius: 2.5px;
  line-height: 1.2;
}

.hint-cat-to-tien {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #dc2626;
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 7.5px;
  font-weight: 900;
  padding: 0 3.5px;
  border-radius: 3px;
  border: 1px solid #fef2f2;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  white-space: nowrap;
}

.nut-to-tien-tren-mat-ban:hover .hint-cat-to-tien {
  opacity: 1;
}

.o-trong-dat-tien-mat-ban {
  background: rgba(28, 15, 7, 0.84);
  border: 1.5px dashed #fbbf24;
  border-radius: 6px;
  padding: 3px 7px;
  color: #fef3c7;
  font-family: var(--font-pixel);
  font-size: 8.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.o-trong-dat-tien-mat-ban.can-doi-tien-le {
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.92) 0%, rgba(120, 53, 15, 0.95) 100%);
  border-style: solid;
  border-color: #fde047;
  color: #fffbeb;
}

.thanh-trang-thai-tien-mat-ban {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nhan-tong-tien-tren-mat-ban {
  background: rgba(20, 12, 8, 0.92);
  border: 1px solid #f59e0b;
  color: #fde68a;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
}

.nut-chot-thoi-tren-mat-ban {
  border: 1.2px solid #2b1d14;
  border-radius: 999px;
  padding: 1px 6px;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 1.5px 0 #1b120c;
  white-space: nowrap;
}

.nut-chot-thoi-tren-mat-ban.nut-giao-thoi-trung-tinh,
.nut-chot-thoi-tren-mat-ban.du-chinh-xac,
.nut-chot-thoi-tren-mat-ban.thoi-du-hao-phong {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #3b1c0a;
  border-color: #2b1d14;
}

/* ================= MODAL ĐỔI TIỀN LẺ ĐẦU HẺM (GIAO DIỆN BẢNG GAME 2D GỌN 1 MÀN HÌNH KHÔNG CUỘN, KHÔNG LỆCH LAYOUT) ================= */
#app .lop-phu-modal.lop-phu-doi-tien-game {
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

#app .hop-modal.hop-modal-doi-tien-game {
  box-sizing: border-box !important;
  width: 372px !important;
  min-width: 372px !important;
  max-width: 372px !important;
  height: 604px !important;
  min-height: 604px !important;
  max-height: 604px !important;
  padding: 6px !important;
  gap: 5px !important;
  background: linear-gradient(180deg, #321e12 0%, #1d1008 100%);
  border: 2.5px solid #c88a36;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 179, 0.35),
    0 18px 42px rgba(10, 5, 2, 0.78);
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

.dau-modal.dau-modal-doi-tien {
  box-sizing: border-box !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 5px 8px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(74, 222, 128, 0.18), transparent 65%),
    linear-gradient(180deg, #14532d 0%, #052e16 100%);
  border-color: #22c55e;
  flex: 0 0 46px !important;
  overflow: hidden !important;
}

.dau-modal.dau-modal-doi-tien .tieu-de-chinh-cai-dat {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.khung-icon-dau-doi-tien {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  border-color: #14532d;
}

.than-modal.than-modal-doi-tien-game {
  box-sizing: border-box !important;
  height: 536px !important;
  min-height: 536px !important;
  max-height: 536px !important;
  flex: 0 0 536px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px !important;
  padding: 6px !important;
  background: linear-gradient(180deg, #fffdf5 0%, #f6ead0 100%);
  border: 2px solid #b58958;
  border-radius: 10px;
  overflow: hidden !important;
  overflow: clip !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* 1. Sân khấu 2D tương tác trực tiếp với Hàng Xóm (Chiều cao khóa cố định 88px cho mọi trạng thái) */
.san-khau-doi-tien-hem {
  box-sizing: border-box !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  flex: 0 0 88px !important;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 85% 15%, rgba(253, 224, 71, 0.16), transparent 60%),
    linear-gradient(180deg, #2d180c 0%, #1c0e06 100%);
  border: 1.5px solid #d97706;
  color: #fffbeb;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.24);
  overflow: hidden !important;
}

.san-khau-doi-tien-hem.trang-thai-doi-duoc {
  background:
    radial-gradient(circle at 80% 10%, rgba(74, 222, 128, 0.2), transparent 60%),
    linear-gradient(180deg, #064e3b 0%, #022c22 100%);
  border-color: #4ade80;
}

.san-khau-doi-tien-hem.trang-thai-doi-hut {
  background:
    radial-gradient(circle at 80% 10%, rgba(251, 191, 36, 0.18), transparent 60%),
    linear-gradient(180deg, #451a03 0%, #290f02 100%);
  border-color: #f59e0b;
}

.cot-avatar-san-khau-doi {
  width: 48px;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 48px;
}

.khung-chan-dung-san-khau-doi {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 35%, #fef3c7 0%, #fde68a 68%, #f59e0b 100%);
  border: 1.5px solid #fbbf24;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.nhan-ket-qua-chan-dung {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.nhan-ket-qua-chan-dung.nhan-thanh-cong {
  background: #16a34a;
  color: #f0fdf4;
}

.nhan-ket-qua-chan-dung.nhan-hut-keo {
  background: #d97706;
  color: #fffbeb;
}

.nhan-ket-qua-chan-dung.nhan-cho {
  background: #78350f;
  color: #fde68a;
}

.cot-thoai-san-khau-doi {
  flex: 1 1 0;
  min-width: 0;
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  overflow: hidden;
}

.hang-dau-thoai-doi-tien {
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
}

.ten-npc-san-khau-doi {
  font-family: var(--font-pixel);
  font-size: 9.5px;
  font-weight: 900;
  color: #fde047;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.badge-ket-qua-doi-game {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.15;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-ket-qua-doi-game.badge-doi-duoc {
  background: #22c55e;
  color: #052e16;
}

.badge-ket-qua-doi-game.badge-doi-hut {
  background: #f59e0b;
  color: #290f02;
}

.badge-ket-qua-doi-game.badge-goi-y {
  background: rgba(254, 240, 138, 0.2);
  border: 1px solid #fbbf24;
  color: #fef08a;
}

.bong-thoai-npc-doi-tien {
  margin: 0;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  font-size: 9.2px;
  line-height: 14.5px !important;
  color: #fef3c7;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

.day-to-tien-vua-doi {
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 2.5px;
  margin: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.chip-to-tien-nhan {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  padding: 1px 4.5px;
  border-radius: 4px;
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #22c55e;
  color: #064e3b;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

.chip-to-tien-nhan.chip-to-tien-gon {
  padding: 1px 3.5px;
  font-size: 7.6px;
}

.chip-to-tien-nhan.chip-trang-thai-phu {
  background: rgba(254, 243, 199, 0.16);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde68a;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cham-mau-to-tien {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

/* 2. Khung 9 ngăn tiền thối trong hộc bàn (Chiều cao khóa cố định 114px) */
.khung-hoc-tien-doi-gon {
  box-sizing: border-box !important;
  height: 114px !important;
  min-height: 114px !important;
  max-height: 114px !important;
  flex: 0 0 114px !important;
  background: #fffbeb;
  border: 1.5px solid #c69249;
  border-radius: 8px;
  padding: 5px 6px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden !important;
}

/* 3. Khung danh sách 6 hàng xóm đầu hẻm (Chiều cao khóa cố định 306px) */
.khung-danh-sach-hang-xom-gon {
  box-sizing: border-box !important;
  height: 306px !important;
  min-height: 306px !important;
  max-height: 306px !important;
  flex: 0 0 306px !important;
  background: #fffbeb;
  border: 1.5px solid #c69249;
  border-radius: 8px;
  padding: 5px 6px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden !important;
}

.dau-khu-doi-tien-gon {
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
}

.tieu-de-khu-doi-tien-gon {
  font-family: var(--font-pixel);
  font-size: 9.2px;
  font-weight: 900;
  color: #451a03;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.pill-trang-thai-hoc-doi {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pill-trang-thai-hoc-doi.co-het-to {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #f87171;
}

.pill-trang-thai-hoc-doi.du-to {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #4ade80;
}

.ghi-chu-phi-tra-da-gon {
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.luoi-9-ngan-tien-doi {
  box-sizing: border-box !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  padding-top: 4px !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 22px);
  gap: 4px;
  flex-shrink: 0;
}

.o-ngan-tien-doi {
  box-sizing: border-box !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #fef9c3 100%);
  border: 1.2px solid #d97706;
  font-family: var(--font-pixel);
}

.o-ngan-tien-doi.sap-het-to {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-color: #ea580c;
}

.o-ngan-tien-doi.het-to {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
  border-color: #ef4444;
}

.o-ngan-tien-doi.vua-duoc-cong {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #16a34a;
  box-shadow: 0 0 0 1.5px rgba(34, 197, 94, 0.35);
}

.badge-vua-cong-ngan {
  position: absolute;
  top: -5px;
  right: 3px;
  background: #16a34a;
  color: #ffffff;
  font-family: var(--font-pixel);
  font-size: 7.5px;
  line-height: 1.1;
  font-weight: 900;
  padding: 0 3.5px;
  border-radius: 999px;
  border: 1px solid #dcfce7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.nhan-menh-gia-ngan-doi {
  font-size: 9px;
  font-weight: 900;
  color: #451a03;
  white-space: nowrap;
}

.so-to-ngan-doi {
  font-size: 9px;
  font-weight: 900;
  color: #15803d;
  white-space: nowrap;
}

.o-ngan-tien-doi.sap-het-to .so-to-ngan-doi {
  color: #c2410c;
}

.o-ngan-tien-doi.het-to .so-to-ngan-doi {
  color: #b91c1c;
}

/* Lưới 6 hàng xóm đầu hẻm (2 cột × 3 hàng khóa cứng 85px/hàng, không bao giờ lệch khi bấm Đổi) */
.luoi-hang-xom-doi-tien {
  box-sizing: border-box !important;
  height: 271px !important;
  min-height: 271px !important;
  max-height: 271px !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 85px);
  gap: 6px 5px;
  flex-shrink: 0;
}

.the-npc-doi-tien-game {
  box-sizing: border-box !important;
  height: 85px !important;
  min-height: 85px !important;
  max-height: 85px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  padding: 4px 5px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fffdf7 0%, #fef3c7 100%);
  border: 1.5px solid #d4a359;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1.5px 0 rgba(120, 53, 15, 0.14);
  overflow: hidden !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.the-npc-doi-tien-game.goi-y-nen-doi {
  border-color: #ea580c;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
}

.the-npc-doi-tien-game.dang-tren-san-khau {
  border-color: #16a34a;
  box-shadow:
    inset 0 0 0 1.5px rgba(34, 197, 94, 0.35),
    0 1.5px 0 rgba(22, 163, 74, 0.25);
}

.the-npc-doi-tien-game.da-doi-thanh-cong {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}

.the-npc-doi-tien-game.da-hoi-hut-keo {
  background: #f5f5f4;
  border-color: #d6d3d1;
  opacity: 0.86;
}

.dau-the-npc-doi-game {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-shrink: 0;
}

.avatar-npc-doi-game {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 35%, #fef9c3 0%, #fde047 100%);
  border: 1.5px solid #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.cum-ten-npc-doi-game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.ten-ngan-npc-doi {
  font-family: var(--font-pixel);
  font-size: 9.2px;
  font-weight: 900;
  color: #291507;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vai-tro-ngan-npc-doi {
  font-size: 8.2px;
  line-height: 1.15;
  color: #78350f;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-tag-menh-gia-npc {
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 2.5px;
  overflow: hidden;
  flex-shrink: 0;
}

.tag-mg-npc {
  font-family: var(--font-pixel);
  font-size: 7.8px;
  font-weight: 800;
  line-height: 1.1;
  padding: 1px 3.5px;
  border-radius: 3.5px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #d97706;
  color: #78350f;
  white-space: nowrap;
  flex-shrink: 0;
}

.tag-mg-npc.dang-thieu-mg {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
  font-weight: 900;
}

.nut-doi-tien-npc-game {
  box-sizing: border-box !important;
  width: 100%;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 4px !important;
  border-radius: 5px;
  border: 1.2px solid #78350f;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #3b1704;
  font-family: var(--font-pixel);
  font-size: 8.8px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation !important;
  transform: none !important;
  animation: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1.5px 0 #78350f;
  transition: filter 0.12s ease;
}

.nut-doi-tien-npc-game.nut-uu-tien-doi {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  border-color: #14532d;
  color: #052e16;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1.5px 0 #14532d;
}

.nut-doi-tien-npc-game:hover:not(:disabled) {
  filter: brightness(1.06);
}

.nut-doi-tien-npc-game:active:not(:disabled) {
  filter: brightness(0.96);
}

.nut-doi-tien-npc-game.da-doi-xong {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
  box-shadow: none;
  cursor: default;
}

.nut-doi-tien-npc-game.da-hoi-hut {
  background: #e7e5e4;
  border-color: #a8a29e;
  color: #78716c;
  box-shadow: none;
  cursor: default;
}

/* ================= MODAL SHOP BÀ HOÀNG ĐA TAB & HIỆU ỨNG ANIMATION LÚC MUA ================= */
#app .hop-modal.hop-modal-shop-game {
  position: relative;
  width: 374px;
  max-width: 96vw;
  height: 658px;
  max-height: 92dvh;
  overflow: hidden;
}

.dau-modal.dau-modal-shop-game {
  padding: 6px 8px;
}

.cum-phai-dau-shop {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.vi-tien-dau-shop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
  border: 1.5px solid #4ade80;
  color: #fef08a;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 0 #021c0e;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.vi-tien-dau-shop.vi-tien-nhay-mua {
  animation: shopViTienNhay 0.56s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shopViTienNhay {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.14) rotate(-2deg);
    border-color: #fde047;
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.85);
  }
  65% {
    transform: scale(0.96) rotate(1deg);
  }
  100% {
    transform: scale(1);
  }
}

/* Thanh 4 Tab chính của Shop */
.thanh-tab-cai-dat-game.thanh-tab-shop-4-cot {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 3.5px;
}

.nut-tab-cai-dat-game.nut-tab-shop-chinh {
  flex-direction: column;
  gap: 2px;
  padding: 4px 3px;
  min-width: 0;
}

.hang-icon-badge-tab-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
}

.badge-nho-tab-shop {
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(20, 10, 4, 0.55);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.45);
  line-height: 1.05;
  white-space: nowrap;
}

.nut-tab-shop-chinh.dang-chon .badge-nho-tab-shop {
  background: #78350f;
  color: #fffbeb;
  border-color: #451a03;
}

.nut-tab-shop-chinh .nhan-tab-cai-dat {
  font-size: 0.64rem;
}

/* Thanh Sub-tab lọc danh mục con trong Shop */
.thanh-subtab-shop {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #efe0c2;
  border: 1.5px solid #c99b59;
  border-radius: 9px;
  padding: 3px;
  flex-shrink: 0;
}

.nut-subtab-shop {
  flex: 1 1 0;
  min-width: 0;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #5c3415;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 5px 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.14s ease;
}

.nut-subtab-shop:hover:not(.dang-chon) {
  background: rgba(255, 251, 235, 0.65);
}

.nut-subtab-shop.dang-chon {
  background: linear-gradient(180deg, #431e08 0%, #291103 100%);
  color: #fef08a;
  border-color: #d97706;
  box-shadow: 0 1.5px 0 #140802;
}

/* Tiến độ Hạng Tiệm trong Tab 1 */
.khung-tien-do-len-cap-shop {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mo-ta-cap-tiep-shop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fef9c3;
  border: 1px dashed #ca8a04;
  border-radius: 7px;
  padding: 5px 7px;
}

.mo-ta-cap-tiep-shop strong {
  font-size: 0.72rem;
  color: #713f12;
}

.mo-ta-cap-tiep-shop small {
  font-size: 0.63rem;
  color: #854d0e;
  line-height: 1.25;
}

.luoi-2-thanh-tien-do-shop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.o-tien-do-cap-shop {
  background: #f8efe0;
  border: 1px solid #d6b68a;
  border-radius: 7px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nhan-tien-do-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.63rem;
  color: #451a03;
}

.thanh-bar-nen-shop {
  width: 100%;
  height: 7px;
  background: #dfd0b8;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #b58d58;
}

.thanh-bar-fill-shop {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #eab308 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.thanh-bar-fill-shop.da-dat-moc {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

/* Thẻ Hũ Kẹo Oishi trong Shop */
.than-the-keo-shop {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-hu-keo-lon-shop {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: radial-gradient(circle, #fffbeb 0%, #fde68a 100%);
  border: 1.5px solid #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 #fff;
}

.thong-tin-hu-keo-shop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.thong-tin-hu-keo-shop strong {
  font-size: 0.72rem;
  color: #7c2d12;
  line-height: 1.2;
}

.thong-tin-hu-keo-shop small {
  font-size: 0.62rem;
  color: #57534e;
  line-height: 1.25;
}

.luoi-2-nut-mua-keo-shop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}

.nut-mua-hang-shop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1.5px solid #451a03;
  border-bottom-width: 3px;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.12s ease;
}

.nut-mua-hang-shop:active {
  transform: translateY(1.5px);
}

.nut-mua-hang-shop.nut-mua-vang {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #451a03;
}

.nut-mua-hang-shop.nut-mua-xanh-la {
  background: linear-gradient(180deg, #86efac 0%, #16a34a 100%);
  color: #052e16;
  border-color: #052e16;
}

.nhan-chinh-nut-mua {
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
}

.gia-nut-mua-shop {
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.55);
  padding: 1px 6px;
  border-radius: 999px;
}

/* Khung Gương Soi Cháu Bà Hoàng Trực Tiếp (Tab 2) */
.khung-guong-soi-shop-live {
  background: linear-gradient(180deg, #321c0e 0%, #1f1007 100%);
  border-color: #d97706;
  color: #fffbeb;
}

.bo-cuc-guong-soi-2-cot {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.cot-anh-guong-shop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nc-nv-stack-guong-lon.shop-guong-nv-live {
  width: 102px;
  height: 102px;
  border-radius: 11px;
  border: 2px solid #fbbf24;
  background: radial-gradient(circle at 50% 60%, #4b2c18 0%, #1c0f07 100%);
  box-shadow:
    inset 0 0 12px rgba(251, 191, 36, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.55);
}

.shop-guong-nv-live.shop-nv-nhay-mung {
  animation: shopNvNhayMung 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shopNvNhayMung {
  0% {
    transform: scale(1) translateY(0);
  }
  28% {
    transform: scale(1.09, 0.93) translateY(2px);
  }
  56% {
    transform: scale(0.96, 1.08) translateY(-8px);
    filter: drop-shadow(0 0 12px #fde047);
  }
  80% {
    transform: scale(1.03, 0.98) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.nhan-ten-nv-duoi-guong {
  font-size: 0.62rem;
  font-weight: 800;
  color: #fde68a;
  text-align: center;
  max-width: 104px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cot-dieu-khien-guong-shop {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  min-width: 0;
}

.nhan-nho-guong-shop {
  font-size: 0.63rem;
  font-weight: 800;
  color: #fcd34d;
}

.cum-2-nut-gioi-tinh-shop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.nut-gioi-tinh-shop {
  padding: 4px 6px;
  border-radius: 6px;
  border: 1.5px solid #78350f;
  background: #29160b;
  color: #e7cba9;
  font-size: 0.65rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.14s ease;
}

.nut-gioi-tinh-shop.dang-chon {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #fffbeb;
  border-color: #fde047;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
}

.input-ten-nv-shop {
  height: 25px;
  font-size: 0.68rem !important;
  padding: 2px 7px !important;
  background: #160b05 !important;
  color: #fef3c7 !important;
  border: 1.5px solid #92400e !important;
  border-radius: 6px !important;
}

.tom-tat-do-dang-mac-shop {
  font-size: 0.59rem;
  color: #ebd0a8;
  line-height: 1.22;
  background: rgba(0, 0, 0, 0.28);
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px dashed rgba(251, 191, 36, 0.35);
}

.nut-phoi-ngau-nhien-shop {
  padding: 4.5px 8px;
  border-radius: 6px;
  border: 1.5px solid #fde047;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #fffbeb;
  font-size: 0.65rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 0 #1c0a02;
}

.nut-phoi-ngau-nhien-shop:active {
  transform: translateY(1px);
}

/* Lưới 2 Cột Thẻ Vật Phẩm Chuẩn Shop Game */
.luoi-shop-2-cot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.the-item-shop-card {
  position: relative;
  background: linear-gradient(180deg, #fffdf9 0%, #fef5e4 100%);
  border: 2px solid #c99a5b;
  border-bottom: 3.5px solid #8c5828;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.the-item-shop-card:hover:not(.dang-khoa) {
  transform: translateY(-1.5px);
  border-color: #d97706;
  box-shadow: 0 4px 10px rgba(69, 26, 3, 0.14);
}

.the-item-shop-card:active:not(.dang-khoa) {
  transform: translateY(1px);
}

.the-item-shop-card.dang-trang-bi {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #16a34a;
  border-bottom-color: #14532d;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.25);
}

.the-item-shop-card.dang-khoa {
  background: linear-gradient(180deg, #f5f5f4 0%, #e7e5e4 100%);
  border-color: #a8a29e;
  border-style: dashed;
  cursor: default;
  opacity: 0.88;
}

/* Animation Thẻ Vừa Mua / Vừa Trang Bị */
.the-item-shop-card.shop-card-vua-mua,
.the-keo-oishi-shop.shop-card-vua-mua {
  animation: shopCardPopGlow 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  border-color: #f59e0b !important;
  box-shadow:
    0 0 0 2px #fde047,
    0 0 18px rgba(245, 158, 11, 0.65) !important;
}

.the-item-shop-card.shop-card-vua-mua::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.78) 50%,
    transparent 80%
  );
  animation: shopCardShimmerSweep 0.75s ease-out forwards;
  pointer-events: none;
}

@keyframes shopCardPopGlow {
  0% {
    transform: scale(0.92);
  }
  38% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shopCardShimmerSweep {
  0% {
    left: -100%;
  }
  100% {
    left: 140%;
  }
}

.dau-card-item-shop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
}

.badge-trang-thai-shop {
  font-size: 0.54rem;
  font-weight: 900;
  padding: 1.5px 5.5px;
  border-radius: 999px;
  line-height: 1.1;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-trang-thai-shop.badge-dang-dung {
  background: #15803d;
  color: #ffffff;
}

.badge-trang-thai-shop.badge-da-mo {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}

.badge-trang-thai-shop.badge-moi {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fb923c;
}

.badge-trang-thai-shop.badge-khoa {
  background: #57534e;
  color: #f5f5f4;
}

.badge-vua-sam-shop {
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fef08a;
  animation: nhapNhayDo 0.5s infinite alternate;
}

.badge-ton-kho-ke-shop {
  font-size: 0.58rem;
  font-weight: 800;
  color: #166534;
  background: #dcfce7;
  padding: 1px 5px;
  border-radius: 5px;
}

.badge-ton-kho-ke-shop.sap-het {
  color: #991b1b;
  background: #fee2e2;
}

.khung-anh-card-shop {
  width: 100%;
  height: 58px;
  border-radius: 8px;
  background: radial-gradient(circle, #fffbeb 0%, #f5e6c8 100%);
  border: 1px solid #e2c799;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.khung-anh-card-shop.khung-avatar-thu-shop {
  height: 68px;
  background: radial-gradient(circle at 50% 60%, #3e2414 0%, #1e1008 100%);
  border-color: #b47b3c;
}

.shop-avatar-thu-do {
  position: relative;
  width: 62px;
  height: 62px;
}

.anh-item-ngoai-that-shop {
  max-width: 90%;
  max-height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.ten-card-item-shop {
  font-size: 0.69rem;
  font-weight: 900;
  color: #2b1406;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mo-ta-ngan-card-shop {
  font-size: 0.59rem;
  color: #5c4028;
  line-height: 1.24;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 23px;
}

.day-icon-mon-mini-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(254, 243, 199, 0.65);
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px dashed #d4a359;
}

.o-icon-mon-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nut-card-item-shop {
  width: 100%;
  padding: 5px 6px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 900;
  cursor: pointer;
  border: 1.5px solid #3b1804;
  border-bottom-width: 2.5px;
  transition: transform 0.1s ease, filter 0.12s ease;
}

.nut-card-item-shop:active {
  transform: translateY(1px);
}

.nut-card-item-shop.nut-mua-moi-vang {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #451a03;
  border-color: #78350f;
  box-shadow: inset 0 1px 0 #fff;
}

.nut-card-item-shop.nut-trang-bi-ngay {
  background: linear-gradient(180deg, #fed7aa 0%, #ea580c 100%);
  color: #fffbeb;
  border-color: #7c2d12;
}

.nut-card-item-shop.nut-dang-dung {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
  border-color: #052e16;
}

.nhan-khoa-card-shop {
  width: 100%;
  padding: 4.5px 6px;
  border-radius: 7px;
  background: #e7e5e4;
  color: #57534e;
  font-size: 0.62rem;
  font-weight: 800;
  border: 1px solid #a8a29e;
}

.nut-cat-mon-shop-nho {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 0.56rem;
  font-weight: 800;
  cursor: pointer;
}

/* Khung Đại Lý Cấp 7+ trong Tab Ngoại Thất */
.hop-nang-cap-cap7-shop {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #451a03 0%, #260d02 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  padding: 6px 7px;
  color: #fffbeb;
}

.anh-preview-cap7-nho {
  width: 48px;
  height: 36px;
  object-fit: contain;
  border-radius: 5px;
  background: #180a03;
  border: 1px solid #d97706;
  flex-shrink: 0;
}

.chu-nang-cap-cap7-shop {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
}

.chu-nang-cap-cap7-shop strong {
  font-size: 0.66rem;
  color: #fde047;
  line-height: 1.15;
}

.chu-nang-cap-cap7-shop small {
  font-size: 0.57rem;
  color: #fed7aa;
  line-height: 1.2;
}

.nut-cap7-shop {
  flex-shrink: 0;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 0.63rem;
  font-weight: 900;
  cursor: pointer;
  border: 1.5px solid #fde047;
  white-space: nowrap;
}

.nut-cap7-shop.chua-mo-cap7 {
  background: linear-gradient(180deg, #fef08a 0%, #eab308 100%);
  color: #451a03;
}

.nut-cap7-shop.da-mo-cap7 {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
}

/* Tab 4: Bảng Hiệu & Đổi Tên Quán */
.bang-hieu-preview-shop-box {
  position: relative;
  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  border: 2.5px solid #2b1d14;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.35);
  color: #fffbeb;
}

.bang-hieu-preview-shop-box.bang-hieu-vang-do {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-color: #991b1b;
  box-shadow:
    inset 0 0 0 2px #fef08a,
    inset 0 0 0 3.5px #b91c1c,
    0 3px 0 rgba(0, 0, 0, 0.35);
}

.bang-hieu-preview-shop-box.bang-hieu-do-son,
.bang-hieu-preview-shop-box.bang-hieu-neon {
  background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%);
  border-color: #fbbf24;
  box-shadow:
    inset 0 0 0 2px #fde047,
    inset 0 0 0 3.5px #450a0a,
    0 3px 0 rgba(0, 0, 0, 0.45);
}

.bang-hieu-preview-shop-box.bang-hieu-xanh-duong {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  border-color: #fef3c7;
  box-shadow:
    inset 0 0 0 2px #fffbeb,
    inset 0 0 0 3.5px #1e40af,
    0 3px 0 rgba(0, 0, 0, 0.35);
}

.bang-hieu-preview-shop-box.bang-hieu-xanh-la {
  background: linear-gradient(180deg, #15803d 0%, #14532d 100%);
  border-color: #fef3c7;
  box-shadow:
    inset 0 0 0 2px #fef9c3,
    inset 0 0 0 3.5px #052e16,
    0 3px 0 rgba(0, 0, 0, 0.35);
}

.bang-hieu-preview-shop-box.bang-hieu-kem-xua {
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  border-color: #1d4ed8;
  box-shadow:
    inset 0 0 0 2px #1d4ed8,
    inset 0 0 0 4px #dc2626,
    0 3px 0 rgba(0, 0, 0, 0.32);
}

.bang-hieu-preview-shop-box.bang-hieu-kem-xua .ten-tiem {
  color: #dc2626;
  text-shadow: 1.5px 1.5px 0 #1e3a8a;
}

.bang-hieu-preview-shop-box.bang-hieu-kem-xua .phu-de-tiem {
  color: #1e3a8a;
}

.bang-hieu-preview-shop-box.bang-hieu-go-xua {
  background: linear-gradient(180deg, #451a03 0%, #231007 100%);
  border-color: #d97706;
  box-shadow:
    inset 0 0 0 2px #fbbf24,
    inset 0 0 0 4px #2b1408,
    0 3px 0 rgba(0, 0, 0, 0.5);
}

.bang-hieu-preview-shop-box .khoi-chu-bang-hieu {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bang-hieu-preview-shop-box .ten-tiem {
  font-size: 0.9rem;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 1.5px 1.5px 0 #451a03;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bang-hieu-preview-shop-box .phu-de-tiem {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fffbeb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thanh tổng chỉ số mặt tiền đang kích hoạt trên đầu Tab Bảng Hiệu */
.thanh-tong-buff-bang-hieu-shop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 7px;
  background: linear-gradient(180deg, #451a03 0%, #260d02 100%);
  border: 1px solid #d97706;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.2);
}

.nhan-tong-buff-bh {
  font-size: 0.56rem;
  font-weight: 800;
  color: #fde68a;
  margin-right: 2px;
}

.chip-tong-buff-bh {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 5.5px;
  border-radius: 999px;
  background: rgba(254, 240, 138, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: #fef08a;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.2;
}

/* Nhãn đánh giá độ đẹp & Dãy chip chỉ số cộng thêm trên từng thẻ Biển Hiệu / Sơn Tường / Font Xưa */
.badge-hang-dep-shop {
  font-size: 0.47rem;
  font-weight: 900;
  color: #7c2d12;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}

.day-chip-buff-bh-shop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin: 1px 0 2px;
}

.chip-buff-bh-nho {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #d97706;
  color: #7c2d12;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 1px 0 rgba(120, 53, 15, 0.15);
}

/* Khung thu nhỏ của từng mẫu Biển Quảng Cáo Hồi Xưa trong thẻ Shop */
.khung-mau-bien-xua-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 6px !important;
  position: relative;
  overflow: hidden;
}

.tam-bien-xua-mini {
  flex: 1;
  min-width: 0;
  padding: 3px 5px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1.5px solid #991b1b;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: inset 0 0 0 1px #fef3c7;
}

.khung-mau-bien-xua-shop.bang-hieu-do-son .tam-bien-xua-mini {
  background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%);
  border-color: #fbbf24;
  box-shadow: inset 0 0 0 1px #fde047;
}

.khung-mau-bien-xua-shop.bang-hieu-xanh-la .tam-bien-xua-mini {
  background: linear-gradient(180deg, #15803d 0%, #14532d 100%);
  border-color: #fef3c7;
  box-shadow: inset 0 0 0 1px #dcfce7;
}

.khung-mau-bien-xua-shop.bang-hieu-xanh-duong .tam-bien-xua-mini {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  border-color: #fef3c7;
  box-shadow: inset 0 0 0 1px #dbeafe;
}

.khung-mau-bien-xua-shop.bang-hieu-kem-xua .tam-bien-xua-mini {
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  border-color: #1d4ed8;
  box-shadow: inset 0 0 0 1.5px #dc2626;
}

.khung-mau-bien-xua-shop.bang-hieu-go-xua .tam-bien-xua-mini {
  background: linear-gradient(180deg, #451a03 0%, #231007 100%);
  border-color: #d97706;
  box-shadow: inset 0 0 0 1px #fbbf24;
}

.nhan-phu-bien-xua-mini {
  font-size: 0.45rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #7f1d1d;
  background: rgba(255, 251, 235, 0.9);
  padding: 0.5px 4px;
  border-radius: 3px;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khung-mau-bien-xua-shop.bang-hieu-do-son .nhan-phu-bien-xua-mini,
.khung-mau-bien-xua-shop.bang-hieu-go-xua .nhan-phu-bien-xua-mini {
  background: #450a0a;
  color: #fde047;
  border: 0.5px solid #fbbf24;
}

.chu-chinh-bien-xua-mini {
  font-size: 0.68rem;
  font-weight: 900;
  color: #991b1b;
  text-shadow: 1px 1px 0 #fef9c3;
  line-height: 1.15;
  white-space: nowrap;
}

.khung-mau-bien-xua-shop.bang-hieu-do-son .chu-chinh-bien-xua-mini,
.khung-mau-bien-xua-shop.bang-hieu-xanh-la .chu-chinh-bien-xua-mini,
.khung-mau-bien-xua-shop.bang-hieu-xanh-duong .chu-chinh-bien-xua-mini,
.khung-mau-bien-xua-shop.bang-hieu-go-xua .chu-chinh-bien-xua-mini {
  color: #fde047;
  text-shadow: 1.5px 1.5px 0 #1c0d06;
}

.khung-mau-bien-xua-shop.bang-hieu-kem-xua .chu-chinh-bien-xua-mini {
  color: #dc2626;
  text-shadow: 1px 1px 0 #1e3a8a;
}

/* ================= 6 KIỂU CHỮ (FONT) BIỂN QUẢNG CÁO VẼ TAY HỒI XƯA ================= */
/* 1. Chữ Cọ Tròn Vẽ Tay Đầu Ngõ (Paytone One - Nền tôn vàng nghệ viền đỏ) */
#app .mau-chu-bh-shop.bh-font-co-dien {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  border: 2px solid #991b1b !important;
  box-shadow: inset 0 0 0 2px #fef3c7, inset 0 0 0 3px #b91c1c !important;
}

#app .bang-hieu-preview-shop-box.bh-font-co-dien .ten-tiem,
#app .mau-chu-bh-shop.bh-font-co-dien .chu-mau-font-bh-shop {
  font-family: 'Paytone One', var(--font-signboard), sans-serif !important;
  letter-spacing: 0.5px !important;
  color: #991b1b !important;
  text-shadow:
    1.5px 1.5px 0 #fffbeb,
    2.5px 2.5px 0 #451a03 !important;
}

#app .bang-hieu-preview-shop-box:not(.bang-hieu-vang-do):not(.bang-hieu-kem-xua).bh-font-co-dien .ten-tiem {
  color: #fde047 !important;
  text-shadow:
    1.5px 1.5px 0 #7f1d1d,
    2.5px 2.5px 0 #1c0d06 !important;
}

/* 2. Chữ Cao Gọn Kẻ Thước Sài Gòn 1965 (Oswald Condensed - Nền xanh Cửu Long viền trắng) */
#app .mau-chu-bh-shop.bh-font-ke-thuoc {
  background: linear-gradient(180deg, #1d4ed8 0%, #172554 100%) !important;
  border: 2px solid #fef3c7 !important;
  box-shadow: inset 0 0 0 2px #f59e0b !important;
}

#app .bang-hieu-preview-shop-box.bh-font-ke-thuoc .ten-tiem,
#app .mau-chu-bh-shop.bh-font-ke-thuoc .chu-mau-font-bh-shop {
  font-family: 'Oswald', 'Be Vietnam Pro', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: #fffbeb !important;
  text-shadow:
    1.5px 1.5px 0 #dc2626,
    3px 3px 0 #1e1b4b !important;
}

/* 3. Chữ Khối Nổi Sơn Dầu Đổ Bóng Lệch 45° (Bungee - Nền đỏ son Chợ Lớn thếp vàng) */
#app .mau-chu-bh-shop.bh-font-khoi-3d {
  background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%) !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: inset 0 0 0 2px #fde047 !important;
}

#app .bang-hieu-preview-shop-box.bh-font-khoi-3d .ten-tiem,
#app .mau-chu-bh-shop.bh-font-khoi-3d .chu-mau-font-bh-shop {
  font-family: 'Bungee', 'Coiny', cursive !important;
  letter-spacing: 0.6px !important;
  color: #fde047 !important;
  text-shadow:
    1px 1px 0 #b45309,
    2px 2px 0 #78350f,
    3px 3px 0 #1c0d06 !important;
}

/* 4. Chữ Có Chân Hiệu Buôn & Báo Chí Xưa (Roboto Slab Black - Nền kem ngà viền xanh đỏ Sài Gòn xưa) */
#app .mau-chu-bh-shop.bh-font-chan-xua {
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%) !important;
  border: 2px solid #1d4ed8 !important;
  box-shadow: inset 0 0 0 2px #dc2626 !important;
}

#app .bang-hieu-preview-shop-box.bh-font-chan-xua .ten-tiem,
#app .mau-chu-bh-shop.bh-font-chan-xua .chu-mau-font-bh-shop {
  font-family: 'Roboto Slab', Georgia, serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  color: #b91c1c !important;
  text-shadow:
    1.5px 1.5px 0 #fef9c3,
    2.5px 2.5px 0 #1e3a8a !important;
}

#app .bang-hieu-preview-shop-box.bang-hieu-do-son.bh-font-chan-xua .ten-tiem,
#app .bang-hieu-preview-shop-box.bang-hieu-go-xua.bh-font-chan-xua .ten-tiem {
  color: #fef08a !important;
  text-shadow: 2px 2px 0 #2b0707 !important;
}

/* 5. Chữ Khuôn Tô Bách Hóa Mậu Dịch 1978 (Saira Stencil One - Nền xanh rêu bao cấp) */
#app .mau-chu-bh-shop.bh-font-khuon-to {
  background: linear-gradient(180deg, #15803d 0%, #052e16 100%) !important;
  border: 2px solid #fef3c7 !important;
  box-shadow: inset 0 0 0 1.5px #86efac !important;
}

#app .bang-hieu-preview-shop-box.bh-font-khuon-to .ten-tiem,
#app .mau-chu-bh-shop.bh-font-khuon-to .chu-mau-font-bh-shop {
  font-family: 'Saira Stencil One', 'Chakra Petch', sans-serif !important;
  letter-spacing: 1px !important;
  color: #fef3c7 !important;
  text-shadow:
    2px 2px 0 #052e16,
    -1px -1px 0 #14532d !important;
}

/* 6. Chữ Nét Cọ Mềm Gia Truyền & Lễ Hội (Mali Italic - Nền gỗ sơn mài thếp vàng) */
#app .mau-chu-bh-shop.bh-font-thu-phap {
  background: linear-gradient(180deg, #451a03 0%, #1c0d06 100%) !important;
  border: 2px solid #d97706 !important;
  box-shadow: inset 0 0 0 1.5px #fbbf24 !important;
}

#app .bang-hieu-preview-shop-box.bh-font-thu-phap .ten-tiem,
#app .mau-chu-bh-shop.bh-font-thu-phap .chu-mau-font-bh-shop {
  font-family: 'Mali', cursive !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: #fde047 !important;
  text-shadow:
    1.5px 1.5px 0 #991b1b,
    2.5px 2.5px 0 #1c0d06 !important;
}

.hang-input-doi-ten-quan-shop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 3px;
}

.input-ten-quan-shop,
.input-phu-de-quan-shop {
  height: 26px;
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
}

.mau-chu-bh-shop {
  background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
  border-color: #f59e0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px !important;
}

.nhan-nam-font-xua {
  font-size: 0.44rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: #fef3c7;
  background: rgba(28, 13, 6, 0.58);
  border: 1px solid rgba(254, 240, 138, 0.5);
  border-radius: 3px;
  padding: 0.5px 5px;
  line-height: 1.15;
  white-space: nowrap;
}

.chu-mau-font-bh-shop {
  font-size: 0.92rem;
  font-weight: 900;
  color: #fde047;
  text-shadow: 1.5px 1.5px 0 #7f1d1d;
  line-height: 1.15;
}

/* Banner Chúc Mừng Nổi Trên Khung Preview Khi Vừa Mua */
.bang-chuc-mung-mua-shop {
  background: linear-gradient(90deg, #15803d 0%, #16a34a 50%, #15803d 100%);
  color: #fef08a;
  border: 1.5px solid #fde047;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.45);
  animation: shopBannerBounceIn 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shopBannerBounceIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chan-modal-shop-game {
  justify-content: space-between;
}

.nut-phu-chan-shop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid #d97706;
  background: linear-gradient(180deg, #451a03 0%, #271004 100%);
  color: #fde68a;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

/* ================= LỚP PARTICLE & VẬT PHẨM BAY KHI MUA TRONG SHOP ================= */
.lop-animation-mua-shop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

.shop-fx-vong-song {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 999px;
  border: 3px solid #fde047;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.9);
  animation: shopFxVongSong 0.55s ease-out forwards;
}

.shop-fx-vong-song.song-trang-bi {
  border-color: #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.9);
}

@keyframes shopFxVongSong {
  0% {
    transform: scale(0.35);
    opacity: 1;
  }
  100% {
    transform: scale(4.2);
    opacity: 0;
  }
}

.shop-fx-hat-sao {
  position: absolute;
  font-size: 14px;
  line-height: 1;
  margin-left: -7px;
  margin-top: -7px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
  animation: shopFxHatSaoBay 0.78s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.shop-fx-hat-sao.hat-mau-1 {
  color: #fde047;
}
.shop-fx-hat-sao.hat-mau-2 {
  color: #4ade80;
}
.shop-fx-hat-sao.hat-mau-3 {
  color: #fb923c;
}
.shop-fx-hat-sao.hat-mau-4 {
  color: #38bdf8;
}

@keyframes shopFxHatSaoBay {
  0% {
    transform: translate(0, 0) scale(0.4) rotate(0deg);
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx, 0px), var(--ty, -40px)) scale(1.15) rotate(190deg);
    opacity: 0;
  }
}

.shop-fx-vat-pham-bay {
  position: absolute;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-radius: 12px;
  background: radial-gradient(circle, #fffbeb 0%, #fde047 100%);
  border: 2px solid #b45309;
  box-shadow:
    0 0 16px rgba(253, 224, 71, 0.95),
    0 6px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shopFxVatPhamBayLen 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.shop-fx-anh-bay {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

.shop-fx-emoji-bay {
  font-size: 24px;
  line-height: 1;
}

@keyframes shopFxVatPhamBayLen {
  0% {
    transform: translate(0, 0) scale(0.75) rotate(-10deg);
    opacity: 1;
  }
  45% {
    transform: translate(
        calc(var(--fly-dx, 0px) * 0.55),
        calc(var(--fly-dy, -120px) * 0.55 - 28px)
      )
      scale(1.24) rotate(8deg);
    opacity: 1;
  }
  88% {
    transform: translate(var(--fly-dx, 0px), var(--fly-dy, -120px)) scale(0.92) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--fly-dx, 0px), var(--fly-dy, -120px)) scale(0.2);
    opacity: 0;
  }
}

.shop-fx-nhan-bay {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
  border: 1.5px solid #fde047;
  color: #fffbeb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  animation: shopFxNhanBayLen 1.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.shop-fx-chip-gia {
  background: #dc2626;
  color: #fef08a;
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
}

.shop-fx-chip-ten {
  font-size: 0.65rem;
  font-weight: 900;
  color: #fef08a;
}

@keyframes shopFxNhanBayLen {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.82);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -14px) scale(1.06);
  }
  84% {
    opacity: 1;
    transform: translate(-50%, -26px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -44px) scale(0.92);
  }
}

.shop-fx-no-dich {
  position: absolute;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.95) 0%, rgba(245, 158, 11, 0) 72%);
  opacity: 0;
  animation: shopFxNoDich 0.48s ease-out 0.44s forwards;
}

@keyframes shopFxNoDich {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  40% {
    opacity: 1;
    transform: scale(2.3);
  }
  100% {
    opacity: 0;
    transform: scale(3.1);
  }
}

/* ================= ICON VÉ SỐ CẠNH NÚT CÀI ĐẶT & GIAO DIỆN TRÒ CHƠI VÉ SỐ 3 SỐ (ĐỘC ĐẮC 10 TRIỆU) ================= */
.nut-icon-ngoai-hud.nut-ve-so-canh-cai-dat {
  right: 43px;
  width: 36px;
  height: 36px;
}

.nut-icon-ngoai-hud.nut-ve-so-canh-cai-dat .icon-ve-so-svg {
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 2;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.badge-nut-ve-so-hud {
  position: absolute;
  bottom: -3px;
  right: -4px;
  z-index: 3;
  min-width: 17px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  color: #fef08a;
  border: 1.5px solid #fffbeb;
  font-family: var(--font-pixel);
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 12px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.badge-nut-ve-so-hud.badge-xo-ngay {
  background: linear-gradient(180deg, #fde047 0%, #ea580c 100%);
  color: #450a0a;
  border-color: #7f1d1d;
  font-size: 0.52rem;
  animation: nhapNhayBadgeXoSo 0.65s ease-in-out infinite alternate;
}

.badge-nut-ve-so-hud.badge-da-do-xong {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
}

/* Khi tới giờ xổ: Icon Vé Số phát sáng vàng rực + vòng hào quang + lắc nhẹ báo hiệu */
.nut-icon-ngoai-hud.nut-ve-so-canh-cai-dat.ve-so-dang-xo-sang {
  filter:
    drop-shadow(0 0 8px rgba(253, 224, 71, 0.98))
    drop-shadow(0 0 15px rgba(245, 158, 11, 0.9))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
  animation: rungNheVeSoXo 1.15s ease-in-out infinite;
}

.vong-sang-ve-so-xo {
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(254, 240, 138, 0.85) 0%,
    rgba(245, 158, 11, 0.45) 52%,
    rgba(245, 158, 11, 0) 76%
  );
  z-index: 1;
  pointer-events: none;
  animation: phatSangVongVeSo 1s ease-in-out infinite alternate;
}

@keyframes phatSangVongVeSo {
  0% {
    transform: scale(0.86);
    opacity: 0.72;
  }
  100% {
    transform: scale(1.25);
    opacity: 1;
  }
}

@keyframes rungNheVeSoXo {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-2px) rotate(-8deg) scale(1.08);
  }
  40% {
    transform: translateY(-2px) rotate(8deg) scale(1.08);
  }
  60% {
    transform: translateY(-1px) rotate(-5deg) scale(1.05);
  }
  80% {
    transform: translateY(0) rotate(4deg) scale(1.02);
  }
}

@keyframes nhapNhayBadgeXoSo {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.12);
  }
}

/* MODAL TRÒ CHƠI VÉ SỐ KIẾN THIẾT — GỌN 1 MÀN HÌNH KHÔNG CẦN CUỘN */
#app .hop-modal.hop-modal-ve-so-game {
  height: auto !important;
  max-height: min(92dvh, 660px) !important;
  background: linear-gradient(180deg, #302016 0%, #1c110a 100%);
  border: 2.5px solid #a87945;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 185, 0.22),
    0 18px 42px rgba(15, 8, 3, 0.72);
}

.dau-modal.dau-modal-ve-so {
  padding: 8px 10px;
  background:
    radial-gradient(circle at 20% 0%, rgba(253, 224, 71, 0.2), transparent 65%),
    linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
  border-color: #d97706;
}

.khung-icon-dau-ve-so {
  background: linear-gradient(180deg, #fffbeb 0%, #fde047 100%);
  border-color: #991b1b;
}

.than-modal.than-modal-ve-so-game {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 9px;
  background: linear-gradient(180deg, #fffcf1 0%, #f7ebd2 100%);
  border: 2px solid #b58958;
  border-radius: 10px;
  overflow-y: auto;
}

/* 1. Khu vực Đài Radio Phát Thanh & 3 Lồng Cầu */
.khung-dai-radio-xo-so {
  background: linear-gradient(180deg, #2d160b 0%, #1a0b05 100%);
  border: 2px solid #d97706;
  border-radius: 11px;
  padding: 7px 8px;
  color: #fffbeb;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.32);
  flex-shrink: 0;
}

.khung-dai-radio-xo-so.da-co-ket-qua {
  border-color: #fde047;
  box-shadow:
    inset 0 0 0 1px rgba(253, 224, 71, 0.35),
    0 3px 10px rgba(180, 83, 9, 0.28);
}

.dau-dai-radio-xo-so {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.loa-radio-va-ten-dai {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.icon-loa-radio {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.chu-ten-dai-radio {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.chu-ten-dai-radio strong {
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  color: #fde047;
  line-height: 1.15;
}

.chu-ten-dai-radio small {
  font-size: 0.58rem;
  color: #fed7aa;
  line-height: 1.2;
}

.nut-bat-tat-co-cau-giai {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid #fbbf24;
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  color: #fef08a;
  font-size: 0.58rem;
  font-weight: 800;
  cursor: pointer;
}

/* Bảng cơ cấu giải thưởng 10 Triệu */
.bang-co-cau-giai-ve-so {
  background: #fffbeb;
  border: 1.5px solid #d97706;
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  color: #2b1406;
}

.tieu-de-bang-co-cau {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  font-weight: 900;
  color: #991b1b;
  text-align: center;
  border-bottom: 1px dashed #d97706;
  padding-bottom: 3px;
}

.dong-co-cau-giai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2.5px 5px;
  border-radius: 5px;
  background: rgba(254, 243, 199, 0.65);
}

.dong-co-cau-giai.dong-giai-doc_dac {
  background: linear-gradient(90deg, #fef08a 0%, #fde68a 100%);
  border: 1px solid #dc2626;
}

.ten-va-dieu-kien-giai {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ten-va-dieu-kien-giai strong {
  font-size: 0.62rem;
  color: #7f1d1d;
  line-height: 1.15;
}

.ten-va-dieu-kien-giai small {
  font-size: 0.54rem;
  color: #5c4028;
  line-height: 1.15;
}

.muc-thuong-co-cau-giai {
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  font-weight: 900;
  color: #b91c1c;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 2 cột Lồng Cầu Giải Nhất & Giải Đặc Biệt */
.khung-hai-giai-long-cau {
  display: grid;
  grid-template-columns: 0.9fr 1.35fr;
  gap: 6px;
  align-items: stretch;
}

.cot-giai-nhat-radio,
.cot-giai-dac-biet-radio {
  background: rgba(0, 0, 0, 0.36);
  border: 1.5px solid #78350f;
  border-radius: 8px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cot-giai-dac-biet-radio {
  background: radial-gradient(circle at 50% 20%, rgba(220, 38, 38, 0.35), rgba(28, 10, 4, 0.72));
  border-color: #fbbf24;
}

.nhan-giai-radio {
  font-family: var(--font-pixel);
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #fde68a;
}

.nhan-giai-radio.nhan-giai-db {
  color: #fde047;
  text-shadow: 0 1px 0 #7f1d1d;
}

.day-bong-giai-nhat,
.day-long-cau-dac-biet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.bong-so-radio {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2e8f0 65%, #94a3b8 100%);
  border: 2px solid #475569;
  color: #1e293b;
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.bong-so-radio.da-khoa-so {
  background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #fde047 65%, #eab308 100%);
  border-color: #b45309;
  color: #7f1d1d;
}

.long-cau-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5px;
}

.bong-so-long-cau {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #fffbeb 0%, #fde047 52%, #d97706 100%);
  border: 2.5px solid #991b1b;
  color: #7f1d1d;
  font-family: var(--font-pixel);
  font-size: 1.02rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 2px #ffffff,
    0 2px 5px rgba(0, 0, 0, 0.55);
}

.long-cau-item.long-cau-dang-xoay .bong-so-long-cau {
  animation: xoayLongCauNhanh 0.25s linear infinite;
}

.long-cau-item.long-cau-da-no .bong-so-long-cau {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #fef08a 48%, #f59e0b 100%);
  border-color: #dc2626;
  box-shadow:
    0 0 10px rgba(253, 224, 71, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

@keyframes xoayLongCauNhanh {
  0% {
    transform: translateY(-1px) scale(0.96);
  }
  50% {
    transform: translateY(1px) scale(1.05);
  }
  100% {
    transform: translateY(-1px) scale(0.96);
  }
}

.nhan-hang-long-cau {
  font-size: 0.5rem;
  font-weight: 800;
  color: #fed7aa;
}

.nut-quay-long-cau-chinh {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 2px solid #fef08a;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fef08a;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 #450a0a;
}

.nut-quay-long-cau-chinh.nut-quay-sang-ruc {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 55%, #dc2626 100%);
  color: #450a0a;
  border-color: #ffffff;
  box-shadow:
    0 0 12px rgba(253, 224, 71, 0.75),
    0 3px 0 #7f1d1d;
}

.thanh-trang-thai-da-quay-xong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: rgba(254, 240, 138, 0.14);
  border: 1px dashed #fbbf24;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fef08a;
}

.nut-do-nhanh-tat-ca-ve {
  flex-shrink: 0;
  padding: 3.5px 8px;
  border-radius: 6px;
  border: 1.5px solid #fef08a;
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  font-size: 0.59rem;
  font-weight: 900;
  cursor: pointer;
}

/* 2. Khu vực Bàn Nặn Vé Số Tương Tác */
.khung-ban-nan-ve-so {
  background: #fffcf5;
  border: 1.5px solid #d4a359;
  border-radius: 10px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.dau-ban-nan-ve-so {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tieu-de-khu-nan-ve {
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  color: #7f1d1d;
}

.day-tab-chon-ve-so {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tab-to-ve-so-nho {
  flex-shrink: 0;
  padding: 3.5px 8px;
  border-radius: 999px;
  border: 1.5px solid #b45309;
  background: #fef3c7;
  color: #451a03;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tab-to-ve-so-nho.dang-chon {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fef08a;
  border-color: #450a0a;
}

.tab-to-ve-so-nho.ve-trung-thuong {
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  color: #7f1d1d;
  border-color: #b91c1c;
}

/* Tờ Vé Số Kiến Thiết Cổ Điển 3 Số */
.to-ve-so-kien-thiet-lon {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, #fffbeb 0%, #fef3c7 68%, #fde68a 100%);
  border: 2.5px solid #b91c1c;
  border-radius: 10px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow:
    inset 0 0 0 2px #fde047,
    inset 0 0 0 3.5px rgba(185, 28, 28, 0.32),
    0 3px 8px rgba(43, 20, 6, 0.16);
}

.to-ve-so-kien-thiet-lon.to-ve-trung-lon {
  border-color: #dc2626;
  box-shadow:
    inset 0 0 0 2px #fde047,
    0 0 14px rgba(234, 179, 8, 0.55);
}

.bang-do-dau-to-ve {
  background: linear-gradient(90deg, #991b1b 0%, #dc2626 50%, #991b1b 100%);
  border-radius: 6px;
  padding: 3.5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fef08a;
}

.chu-kien-thiet-ve {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.menh-gia-in-tren-ve {
  background: #fef08a;
  color: #991b1b;
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
}

.hang-thong-tin-nguoi-ban-ve {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #5c2808;
}

.cum-nguoi-ban-tren-ve {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ky-hieu-ky-ve {
  font-family: var(--font-pixel);
  font-size: 0.56rem;
  color: #991b1b;
  background: rgba(254, 226, 226, 0.75);
  padding: 1.5px 6px;
  border-radius: 4px;
  border: 1px dashed #dc2626;
}

/* 3 Ô Số Lớn Để Nặn */
.khung-ba-o-so-nan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.o-so-ve-so-nan {
  position: relative;
  height: 74px;
  border-radius: 9px;
  border: 2px solid #b45309;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.o-so-ve-so-nan.khop-so-db {
  background: linear-gradient(180deg, #fef9c3 0%, #fde047 100%);
  border-color: #dc2626;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.65);
}

.o-so-ve-so-nan.khop-so-g1 {
  background: linear-gradient(180deg, #dcfce7 0%, #86efac 100%);
  border-color: #15803d;
}

.nhan-hang-o-ve {
  font-size: 0.53rem;
  font-weight: 800;
  color: #78350f;
}

.con-so-in-tren-ve {
  font-family: var(--font-pixel);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  color: #b91c1c;
  text-shadow: 1px 1px 0 #fef08a;
}

.nhan-khop-so-nho {
  font-size: 0.52rem;
  font-weight: 900;
  color: #991b1b;
}

/* Miếng Ngón Tay Cái Che Số Khi Chưa Nặn */
.mieng-ngon-tay-che-so {
  position: absolute;
  inset: 17px 2px 2px 2px;
  border-radius: 7px;
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  border: 1.5px dashed #fde047;
  color: #fef08a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

.o-so-ve-so-nan:hover .mieng-ngon-tay-che-so {
  transform: translateY(3px);
}

.icon-ngon-tay-nan {
  font-size: 1.05rem;
  line-height: 1;
}

.mieng-ngon-tay-che-so small {
  font-size: 0.54rem;
  font-weight: 900;
}

/* Thanh Kéo Ngón Tay Cái Nặn Vé */
.hop-keo-ngon-tay-nan {
  background: rgba(180, 83, 9, 0.1);
  border: 1px solid #d97706;
  border-radius: 8px;
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hang-nhan-keo-nan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #7c2d12;
}

.nut-nan-so-ke-tiep {
  padding: 2.5px 7px;
  border-radius: 6px;
  border: 1.5px solid #7f1d1d;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #450a0a;
  font-size: 0.58rem;
  font-weight: 900;
  cursor: pointer;
}

.thanh-range-nan-ve-so {
  width: 100%;
  accent-color: #dc2626;
  height: 18px;
  cursor: pointer;
}

.con-dau-moc-do-ve-so {
  border-radius: 7px;
  padding: 5px 8px;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  border: 2px solid #dc2626;
}

.con-dau-moc-do-ve-so.moc-trung-thuong {
  background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
  color: #fef08a;
  border-color: #fde047;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.45);
}

.con-dau-moc-do-ve-so.moc-truot {
  background: #f5f5f4;
  color: #57534e;
  border-color: #a8a29e;
  border-style: dashed;
}

.dong-binh-luan-nan-ve {
  background: #fffbeb;
  border-left: 3.5px solid #d97706;
  border-radius: 5px;
  padding: 4.5px 7px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #451a03;
  line-height: 1.28;
}

.hop-chua-co-ve-so {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: #5c4028;
  background: #fffbeb;
  border: 1.5px dashed #d97706;
  border-radius: 8px;
}

/* 3. Rổ Vé Số Mua Thêm */
.khung-ro-ve-so-mua-them {
  background: #fffcf5;
  border: 1.5px solid #d4a359;
  border-radius: 10px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.dau-ro-ve-so-mua-them {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dau-ro-ve-so-mua-them strong {
  font-family: var(--font-pixel);
  font-size: 0.64rem;
  color: #7f1d1d;
  display: block;
}

.phu-de-ro-ve-so {
  font-size: 0.56rem;
  color: #6b4423;
}

.nut-doi-ro-ve-moi {
  flex-shrink: 0;
  padding: 3.5px 7px;
  border-radius: 6px;
  border: 1.5px solid #78350f;
  background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 100%);
  color: #451a03;
  font-size: 0.58rem;
  font-weight: 900;
  cursor: pointer;
}

.luoi-ba-ve-trong-ro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.the-ve-trong-ro {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #b45309;
  border-radius: 8px;
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.the-ve-trong-ro:active {
  transform: scale(0.96);
}

.the-ve-trong-ro.da-mua-ro {
  opacity: 0.58;
  cursor: default;
}

.dau-the-ve-ro {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
}

.ten-nguoi-ban-ro {
  font-size: 0.52rem;
  font-weight: 800;
  color: #5c2808;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-ve-3-so-ro {
  font-family: var(--font-pixel);
  font-size: 0.88rem;
  font-weight: 900;
  color: #b91c1c;
  letter-spacing: 0.5px;
}

.nut-mua-nhanh-ro {
  width: 100%;
  padding: 2.5px 4px;
  border-radius: 5px;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fef08a;
  font-size: 0.55rem;
  font-weight: 900;
  text-align: center;
}

/* ================= GIAO DIỆN DÒ VÉ SỐ GỌN 1 MÀN HÌNH (CHỈ SỐ ĐÃ XỔ & SỐ CỦA MÌNH) ================= */
.dau-khu-ve-so-gon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 1.5px dashed rgba(146, 64, 14, 0.25);
}

.tieu-de-khu-ve-so-gon {
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  font-weight: 900;
  color: #5c1d0e;
  letter-spacing: 0.25px;
}

.pill-trang-thai-xo-gon {
  font-size: 0.58rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
}

.pill-trang-thai-xo-gon.da-xo {
  background: #dcfce7;
  color: #166534;
  border: 1.5px solid #16a34a;
}

.pill-trang-thai-xo-gon.cho-xo {
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #d97706;
}

/* KHU 1: TỜ DÒ SỐ ĐÃ XỔ */
.khung-to-do-so-da-xo {
  background: #fffdf8;
  border: 2px solid #991b1b;
  border-radius: 10px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(69, 10, 10, 0.08);
}

/* Spotlight Giải Độc Đắc 10.000.000đ */
.hang-spotlight-doc-dac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: linear-gradient(90deg, #7f1d1d 0%, #991b1b 55%, #b45309 100%);
  border: 2px solid #fbbf24;
  color: #fffbeb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hang-spotlight-doc-dac.trung-giai-db {
  background: linear-gradient(90deg, #15803d 0%, #16a34a 55%, #ca8a04 100%);
  border-color: #fde047;
}

.cot-thong-tin-doc-dac {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nhan-cup-doc-dac {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.3px;
}

.so-tien-doc-dac-lon {
  font-family: var(--font-pixel);
  font-size: 0.86rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.ghi-chu-doc-dac-nho {
  font-size: 0.56rem;
  font-weight: 700;
  color: #fef3c7;
}

.day-ba-bong-doc-dac {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bong-so-doc-dac {
  width: 34px;
  height: 36px;
  border-radius: 7px;
  border: 2px solid #fde047;
  background: rgba(0, 0, 0, 0.35);
  color: #fde68a;
  font-family: var(--font-pixel);
  font-size: 1.12rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bong-so-doc-dac.da-mo {
  background: linear-gradient(180deg, #fffbeb 0%, #fde047 100%);
  border-color: #ffffff;
  color: #991b1b;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Lưới 2 Cột: Giải Nhất, Nhì, Ba, Tư */
.luoi-giai-phu-2-cot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.o-giai-phu-gon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 7px;
  background: #fffbeb;
  border: 1.5px solid #e6c687;
}

.o-giai-phu-gon.co-trung-giai,
.thanh-giai-khuyen-khich-gon.co-trung-giai {
  background: linear-gradient(90deg, #dcfce7 0%, #fef9c3 100%);
  border-color: #16a34a;
}

.thong-tin-giai-phu-gon {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.thong-tin-giai-phu-gon strong {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: #451a03;
  white-space: nowrap;
}

.tien-giai-phu-gon {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  font-weight: 900;
  color: #b91c1c;
}

.thong-tin-giai-phu-gon small {
  font-size: 0.52rem;
  font-weight: 700;
  color: #78350f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-so-giai-phu-gon {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.o-so-nho-kq {
  width: 22px;
  height: 25px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-family: var(--font-pixel);
  font-size: 0.82rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.o-so-nho-kq.da-mo {
  background: #ffffff;
  border-color: #b91c1c;
  color: #991b1b;
  box-shadow: 0 1px 0 rgba(185, 28, 28, 0.2);
}

/* Thanh Khuyến Khích 1 dòng gọn */
.thanh-giai-khuyen-khich-gon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 7px;
  background: #fef9c3;
  border: 1.5px solid #eab308;
}

.chu-khuyen-khich-gon {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.chu-khuyen-khich-gon strong {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: #78350f;
}

.chu-khuyen-khich-gon small {
  font-size: 0.54rem;
  font-weight: 700;
  color: #92400e;
}

/* KHU 2: SỐ CỦA MÌNH (VÉ ĐANG GIỮ) */
.khung-so-cua-minh-gon {
  background: #fffdf8;
  border: 2px solid #b45309;
  border-radius: 10px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ghi-chu-khu-ve-cua-minh {
  font-size: 0.56rem;
  font-weight: 800;
  color: #78350f;
}

.ghi-chu-khu-ve-cua-minh.dang-co-thuong {
  color: #15803d;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #16a34a;
}

.luoi-ve-cua-minh-gon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.luoi-ve-cua-minh-gon.mot-to-duy-nhat {
  grid-template-columns: minmax(0, 1fr);
}

.the-ve-cua-minh-gon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 2px solid #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  box-shadow: 0 2px 0 rgba(180, 83, 9, 0.16);
}

.the-ve-cua-minh-gon.ve-trung-thuong {
  border-color: #16a34a;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22);
}

.the-ve-cua-minh-gon.ve-khong-trung {
  border-color: #d6d3d1;
  background: #f5f5f4;
  box-shadow: none;
}

.dau-the-ve-gon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.nguoi-ban-the-ve-gon {
  font-size: 0.58rem;
  font-weight: 900;
  color: #451a03;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nhan-ket-qua-the-ve-gon {
  font-size: 0.55rem;
  font-weight: 900;
  padding: 1.5px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.nhan-ket-qua-the-ve-gon.cho {
  background: #fde68a;
  color: #78350f;
}

.nhan-ket-qua-the-ve-gon.trung {
  background: #16a34a;
  color: #ffffff;
}

.nhan-ket-qua-the-ve-gon.truot {
  background: #e7e5e4;
  color: #57534e;
}

.day-ba-so-cua-minh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
}

.o-so-ve-cua-minh {
  width: 34px;
  height: 36px;
  border-radius: 7px;
  border: 2px solid #b91c1c;
  background: #ffffff;
  color: #b91c1c;
  font-family: var(--font-pixel);
  font-size: 1.12rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(185, 28, 28, 0.22);
}

.o-so-ve-cua-minh.o-so-khop {
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #15803d;
  color: #166534;
}

.dong-ten-giai-trung-gon {
  font-size: 0.54rem;
  font-weight: 800;
  color: #166534;
  text-align: center;
}

.hop-chua-mua-ve-gon {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1.5px dashed #d97706;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}

.chan-modal-cai-dat-game.chan-modal-ve-so-game {
  padding: 7px 10px;
}

/* ================= REDESIGN GIAO DIỆN SHOP: ĐỒNG BỘ MÀU GAME & THÂN THIỆN DỄ ĐỌC ================= */
/* 1. Khung Modal Shop đồng bộ 100% bảng gỗ nâu-vàng kem của Bảng Nhập Hàng & Quầy Thu Ngân */
#app .hop-modal-shop-game {
  border: 4px solid #a87945 !important;
  border-radius: 14px !important;
  background: #fffcf1 !important;
  box-shadow:
    0 12px 32px rgba(15, 8, 3, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  color: #2b180d !important;
}

/* 2. Đầu Modal Shop (Nền gỗ cà phê #302016 + Chữ vàng #ffe46e giống hệt đầu Bảng Nhập Hàng) */
#app .hop-modal-shop-game .dau-modal-shop-game {
  background: #302016 !important;
  border-bottom: 2.5px solid #a87945 !important;
  padding: 8px 10px !important;
  border-radius: 10px 10px 0 0 !important;
}

#app .hop-modal-shop-game .tieu-de-chinh-cai-dat {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #ffe46e !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 1.5px 0 #140a04 !important;
}

#app .hop-modal-shop-game .phu-de-chinh-cai-dat {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #f3d59b !important;
}

#app .hop-modal-shop-game .vi-tien-dau-shop {
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #15803d 0%, #064e3b 100%) !important;
  border: 1.5px solid #86efac !important;
  color: #fef08a !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
}

/* 3. Thanh 4 Tab chính của Shop (Tông gỗ nâu ấm + Tab đang chọn vàng mật ong nổi bật như nút Về Quầy / Tất cả) */
#app .hop-modal-shop-game .thanh-tab-shop-4-cot {
  background: #24160d !important;
  border-bottom: 2px solid #8c6239 !important;
  padding: 5px 6px !important;
  gap: 5px !important;
}

#app .hop-modal-shop-game .nut-tab-shop-chinh {
  background: #422c1d !important;
  border: 1.5px solid #6e4e35 !important;
  border-radius: 9px !important;
  padding: 5px 4px !important;
  color: #f5ebd6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 #140b05 !important;
}

#app .hop-modal-shop-game .nut-tab-shop-chinh .nhan-tab-cai-dat {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #f5ebd6 !important;
}

#app .hop-modal-shop-game .nut-tab-shop-chinh.dang-chon {
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%) !important;
  border-color: #fffbeb !important;
  color: #2b1406 !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    0 2.5px 0 #78350f !important;
}

#app .hop-modal-shop-game .nut-tab-shop-chinh.dang-chon .nhan-tab-cai-dat {
  color: #2b1406 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#app .hop-modal-shop-game .nut-tab-shop-chinh.dang-chon .badge-nho-tab-shop {
  background: #3b1804 !important;
  color: #fef08a !important;
  border-color: #2b1406 !important;
}

/* 4. Thanh Sub-tab dạng Pill (Giống hệt thanh pill Tất cả / Kệ Trái Trên ngoài màn hình chính) */
#app .hop-modal-shop-game .thanh-subtab-shop {
  background: #f5ead4 !important;
  border: 1.5px solid #c8a26a !important;
  border-radius: 11px !important;
  padding: 4px !important;
  gap: 5px !important;
}

#app .hop-modal-shop-game .nut-subtab-shop {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  background: #4a3728 !important;
  border: 1.5px solid #2b1c10 !important;
  color: #fff8e7 !important;
  font-size: 10.2px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  padding: 5px 5px !important;
  box-shadow: 0 1.5px 0 #1f1209 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#app .hop-modal-shop-game .thanh-subtab-shop.thanh-subtab-noi-that {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px !important;
}

#app .hop-modal-shop-game .thanh-subtab-shop.thanh-subtab-noi-that .nut-subtab-shop {
  width: 100% !important;
  padding: 5.5px 4px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

#app .hop-modal-shop-game .nut-subtab-shop.dang-chon {
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%) !important;
  border-color: #fffbeb !important;
  color: #2b1406 !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 0 #78350f !important;
}

/* 5. Thân cuộn Shop & Các Khung Nhóm: Nền kem ấm #f3e5cc dịu mắt, đồng bộ hoàn toàn màu game */
#app .hop-modal-shop-game .than-modal-shop-game {
  background: #e9d8bc !important;
  padding: 8px !important;
  gap: 8px !important;
}

#app .hop-modal-shop-game .the-cai-dat-game {
  background: #fffcf1 !important;
  border: 2px solid #b88b52 !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 2px 6px rgba(43, 24, 13, 0.12) !important;
}

#app .hop-modal-shop-game .khung-guong-soi-shop-live {
  background: linear-gradient(180deg, #321f13 0%, #21130b 100%) !important;
  border: 2px solid #d97706 !important;
}

/* Sửa lỗi ô nhập text bị phóng to 16px làm tràn chữ trên mobile */
#app .hop-modal-shop-game input[type='text'],
#app .hop-modal-shop-game .o-nhap-text {
  font-size: 12px !important;
  font-weight: 800 !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  background: #fffaf0 !important;
  color: #2b1406 !important;
  border: 1.5px solid #b47b3c !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* 6. Danh sách Thẻ Vật Phẩm: Chuyển sang Thẻ Ngang Rộng Rãi (1 cột chuẩn Danh Sách Nhập Hàng) để đọc trọn tên & chỉ số */
#app .hop-modal-shop-game .luoi-shop-2-cot {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

#app .hop-modal-shop-game .the-item-shop-card {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  grid-template-areas:
    "thumb badges"
    "thumb title"
    "thumb icons"
    "thumb desc"
    "thumb buffs"
    "thumb action" !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  align-items: center !important;
  text-align: left !important;
  padding: 9px 10px !important;
  border-radius: 11px !important;
  background: #fffaf0 !important;
  border: 2px solid #c2955a !important;
  border-bottom: 3.5px solid #8c5828 !important;
  box-shadow: 0 2px 5px rgba(43, 24, 13, 0.1) !important;
}

#app .hop-modal-shop-game .the-item-shop-card.dang-trang-bi {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #16a34a !important;
  border-bottom-color: #14532d !important;
}

#app .hop-modal-shop-game .the-item-shop-card.da-so-huu:not(.dang-trang-bi) {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #d97706 !important;
  border-bottom-color: #92400e !important;
}

/* Riêng thẻ Biển Hiệu, Bảng Mặt Tiền & Font Chữ Xưa: Khung biển hiệu nằm ngang rộng 100% ở trên đầu thẻ để nhìn rõ trọn bảng hiệu */
#app .hop-modal-shop-game .the-item-shop-card:has(.khung-mau-bien-xua-shop),
#app .hop-modal-shop-game .the-item-shop-card:has(.khung-anh-mat-tien-rong),
#app .hop-modal-shop-game .the-item-shop-card:has(.mau-chu-bh-shop) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "badges"
    "thumb"
    "title"
    "desc"
    "buffs"
    "action" !important;
  row-gap: 5px !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .khung-anh-card-shop {
  grid-area: thumb !important;
  width: 78px !important;
  height: 82px !important;
  border-radius: 9px !important;
  align-self: center !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .khung-anh-card-shop:not(.mau-chu-bh-shop):not(.khung-avatar-thu-shop):not(.khung-mau-bien-xua-shop):not(.khung-anh-mat-tien-rong) {
  background: radial-gradient(circle, #fffdf7 0%, #f3e1be 100%) !important;
  border: 1.5px solid #cfa66e !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .khung-anh-card-shop.khung-avatar-thu-shop {
  background: radial-gradient(circle at 50% 60%, #432716 0%, #1e1008 100%) !important;
  border-color: #d97706 !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .khung-anh-card-shop.khung-mau-bien-xua-shop,
#app .hop-modal-shop-game .the-item-shop-card > .khung-anh-card-shop.mau-chu-bh-shop,
#app .hop-modal-shop-game .the-item-shop-card > .khung-anh-card-shop.khung-anh-mat-tien-rong {
  width: 100% !important;
  height: 62px !important;
  padding: 5px 8px !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .khung-anh-card-shop.khung-anh-mat-tien-rong {
  background: linear-gradient(180deg, #321f13 0%, #1c1008 100%) !important;
  border: 1.5px solid #b47b3c !important;
}

#app .hop-modal-shop-game .anh-bang-hieu-mat-tien-shop {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Ghép 2 lớp ảnh cho thẻ Sơn Tường trong Shop để lấp đầy lòng quầy ấm cúng & giữ nguyên màu chuẩn */
#app .hop-modal-shop-game .khung-anh-son-tuong-shop {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#app .hop-modal-shop-game .anh-nen-son-tuong-shop,
#app .hop-modal-shop-game .anh-layer-son-tuong-shop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: pixelated;
}

#app .hop-modal-shop-game .anh-layer-son-tuong-shop.filter-son-xanh-mint,
#app .hop-modal-shop-game .anh-layer-son-tuong-shop.filter-son-vang-hoi-an,
#app .hop-modal-shop-game .anh-layer-son-tuong-shop.filter-son-hong-sai-gon,
#app .hop-modal-shop-game .anh-bang-hieu-mat-tien-shop.bh-nen-do-tet {
  filter: none !important;
}

#app .hop-modal-shop-game .tam-bien-xua-mini {
  padding: 4px 10px !important;
}

#app .hop-modal-shop-game .chu-chinh-bien-xua-mini {
  font-size: 0.92rem !important;
}

#app .hop-modal-shop-game .nhan-phu-bien-xua-mini {
  font-size: 0.54rem !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .dau-card-item-shop {
  grid-area: badges !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

#app .hop-modal-shop-game .badge-trang-thai-shop {
  font-size: 10.5px !important;
  padding: 2px 7px !important;
}

#app .hop-modal-shop-game .badge-hang-dep-shop {
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  max-width: none !important;
  background: #fef3c7 !important;
  color: #7c2d12 !important;
  border: 1px solid #f59e0b !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .ten-card-item-shop {
  grid-area: title !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #2b1406 !important;
  line-height: 1.25 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  white-space: normal !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .day-icon-mon-mini-shop {
  grid-area: icons !important;
  justify-content: flex-start !important;
  width: fit-content !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .mo-ta-ngan-card-shop {
  grid-area: desc !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #5c3d24 !important;
  line-height: 1.32 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  min-height: 0 !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .day-chip-buff-bh-shop {
  grid-area: buffs !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 1px 0 !important;
}

#app .hop-modal-shop-game .chip-buff-bh-nho {
  font-size: 10.5px !important;
  padding: 2px 6.5px !important;
  border-radius: 6px !important;
  background: #fef3c7 !important;
  border: 1px solid #d97706 !important;
  color: #7c2d12 !important;
}

#app .hop-modal-shop-game .the-item-shop-card > .nut-card-item-shop,
#app .hop-modal-shop-game .the-item-shop-card > .nhan-khoa-card-shop {
  grid-area: action !important;
  height: 32px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

#app .hop-modal-shop-game .nut-card-item-shop.nut-mua-moi-vang {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%) !important;
  border: 1.5px solid #78350f !important;
  border-bottom-width: 3px !important;
  color: #2b1406 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

#app .hop-modal-shop-game .nut-card-item-shop.nut-dang-dung {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 48%, #15803d 100%) !important;
  border: 1.5px solid #14532d !important;
  border-bottom-width: 3px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 #064e3b !important;
}

/* Chân Modal Shop đồng bộ nền gỗ nâu đậm #302016 */
#app .hop-modal-shop-game .chan-modal-shop-game {
  background: #302016 !important;
  border-top: 2px solid #a87945 !important;
  padding: 7px 10px !important;
}

/* ================= HỆ THỐNG NỘI THẤT TRONG QUẦY & 4 CẤP ĐỒNG HỒ TREO TƯỜNG ================= */
#app .hop-modal-shop-game .thanh-tab-shop-5-cot {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3.5px !important;
  padding: 4px 5px !important;
}

#app .hop-modal-shop-game .thanh-tab-shop-5-cot .nut-tab-shop-chinh {
  padding: 4px 2px !important;
}

#app .hop-modal-shop-game .thanh-tab-shop-5-cot .nut-tab-shop-chinh .nhan-tab-cai-dat {
  font-size: 10.2px !important;
  letter-spacing: -0.2px !important;
}

#app .hop-modal-shop-game .thanh-tab-shop-5-cot .badge-nho-tab-shop {
  font-size: 9px !important;
  padding: 1px 3.5px !important;
}

/* Khung Ảnh Quầy Trong Shop — Chỉ hiển thị vật phẩm đã mua & đang trang trí */
.san-khau-mini-preview-noi-that {
  position: relative;
  width: 100%;
  height: 146px;
  border-radius: 10px;
  border: 2px solid #78350f;
  background:
    linear-gradient(180deg, rgba(43, 24, 10, 0.08) 0%, rgba(28, 14, 5, 0.22) 100%),
    url('assets/sprites/bg_quay_tiem.png?v=20261021v108') 0 0 / 100% 100% no-repeat;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  margin: 4px 0;
}

.o-vi-tri-preview-nt {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.preview-pos-tuong-trai {
  top: 15%;
  left: 25.5%;
  transform: scale(0.56);
  transform-origin: top left;
}

.preview-pos-tran-nha {
  top: 2%;
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
  transform: scale(0.56);
  transform-origin: top center;
}

.preview-pos-dong-ho-phai {
  top: 4%;
  right: 13.5%;
  transform: scale(0.56);
  transform-origin: top right;
  z-index: 3;
}

.preview-pos-noc-tu {
  top: 18%;
  right: 23.5%;
  transform: scale(0.55);
  transform-origin: top right;
}

.preview-pos-quat-ban {
  bottom: 13%;
  left: 17.5%;
  transform: scale(0.55);
  transform-origin: bottom left;
}

.preview-pos-mat-ban {
  bottom: 11%;
  right: 26.5%;
  transform: scale(0.58);
  transform-origin: bottom right;
}

.chip-luu-y-giu-buff-nt {
  background: linear-gradient(90deg, #92400e, #b45309) !important;
  color: #fef08a !important;
  border-color: #fde047 !important;
}

/* Khung Nhóm Chuỗi Nâng Cấp Theo Từng Vị Trí Nội Thất (Cấp 1 ➔ Cấp 4) */
.khung-nhom-nang-cap-nt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 7px;
  border-radius: 11px;
  background: rgba(69, 26, 3, 0.07);
  border: 1.5px solid rgba(146, 64, 14, 0.32);
}

.dau-nhom-nang-cap-nt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, #451a03 0%, #78350f 100%);
  border: 1px solid #d97706;
  color: #fffbeb;
}

.cum-ten-slot-nang-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ten-slot-nang-cap-nt {
  font-size: 12px;
  font-weight: 900;
  color: #fef08a;
}

.badge-tien-do-cap-nt {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(254, 240, 138, 0.18);
  border: 1px solid #fbbf24;
  color: #fde68a;
  font-size: 9.5px;
  font-weight: 900;
}

.badge-tien-do-cap-nt.da-max-cap {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border-color: #86efac;
  color: #ffffff;
}

.nhan-buff-hien-tai-slot-nt {
  font-size: 10px;
  font-weight: 800;
  color: #fde68a;
}

.badge-trang-thai-shop.badge-nang-cap-tiep {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #fffbeb;
  border: 1px solid #78350f;
}

.badge-trang-thai-shop.badge-khoa-cap {
  background: #78716c;
  color: #f5f5f4;
}

#app .hop-modal-shop-game .the-item-shop-card.bi-khoa-cap-nt {
  opacity: 0.82;
}

.nhan-bac-anim-nt-card.nhan-giu-buff-cap-cao {
  background: linear-gradient(90deg, #15803d 0%, #047857 100%) !important;
  color: #fef08a !important;
  border: 1px solid #86efac;
}

#app .hop-modal-shop-game .nut-card-item-shop.nut-khoa-cap-truoc {
  background: linear-gradient(180deg, #d6d3d1 0%, #a8a29e 100%) !important;
  color: #44403c !important;
  border-color: #57534e !important;
}

.chip-combo-phong-thuy-nt {
  background: linear-gradient(90deg, #dc2626, #d97706) !important;
  color: #fffbeb !important;
  border-color: #fde047 !important;
}

/* Thẻ Vật Phẩm Nội Thất theo Bậc 1..4 */
#app .hop-modal-shop-game .the-item-shop-card.dang-xem-thu-nt-card {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #2563eb !important;
  border-bottom-color: #1d4ed8 !important;
}

.badge-trang-thai-shop.badge-dang-thu-nt {
  background: #2563eb;
  color: #ffffff;
}

#app .hop-modal-shop-game .badge-hang-dep-shop.badge-bac-nt-3 {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%) !important;
  color: #451a03 !important;
  border-color: #b45309 !important;
}

#app .hop-modal-shop-game .badge-hang-dep-shop.badge-bac-nt-4 {
  background: linear-gradient(90deg, #7f1d1d 0%, #b91c1c 50%, #7f1d1d 100%) !important;
  color: #fef08a !important;
  border-color: #fde047 !important;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.55);
}

#app .hop-modal-shop-game .khung-preview-item-noi-that {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

#app .hop-modal-shop-game .khung-preview-item-noi-that.nen-bac-nt-2 {
  background: radial-gradient(circle, #fffbeb 0%, #fde68a 100%) !important;
  border-color: #d97706 !important;
}

#app .hop-modal-shop-game .khung-preview-item-noi-that.nen-bac-nt-3 {
  background: radial-gradient(circle, #451a03 0%, #1c0a02 100%) !important;
  border-color: #f59e0b !important;
}

#app .hop-modal-shop-game .khung-preview-item-noi-that.nen-bac-nt-4 {
  background: radial-gradient(circle, #581c87 0%, #3b0764 55%, #1c052e 100%) !important;
  border: 2px solid #fde047 !important;
  box-shadow: inset 0 0 12px rgba(250, 204, 21, 0.45) !important;
}

.nhan-bac-anim-nt-card {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  font-size: 7.2px;
  font-weight: 900;
  text-align: center;
  color: #fef08a;
  background: rgba(28, 13, 6, 0.82);
  border-radius: 4px;
  padding: 1px 2px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#app .hop-modal-shop-game .the-item-shop-card > .hang-2-nut-card-noi-that {
  grid-area: action !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.nut-thu-noi-that-card {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1.5px solid #1e40af;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #dbeafe 0%, #93c5fd 100%);
  color: #1e3a8a;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.nut-thu-noi-that-card.dang-thu {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #172554;
}

#app .hop-modal-shop-game .hang-2-nut-card-noi-that > .nut-card-item-shop {
  flex: 1 1 auto !important;
  height: 32px !important;
  font-size: 12px !important;
  margin-top: 0 !important;
}

/* ================= VỊ TRÍ CÁC MÓN NỘI THẤT TRÊN SÂN KHẤU CHÍNH (.san-khau-quay) ================= */
.hotspot-noi-that-san-khau {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), filter 0.18s ease;
}

.hotspot-noi-that-san-khau:hover {
  filter: brightness(1.08) drop-shadow(0 0 6px rgba(254, 240, 138, 0.75));
}

.hotspot-noi-that-san-khau.nut-dang-nhap-juice {
  animation: none !important;
}

.hotspot-noi-that-san-khau:active > .nt-item-visual,
.hotspot-noi-that-san-khau.nut-dang-nhap-juice > .nt-item-visual,
.hotspot-noi-that-san-khau.nt-vua-bam-kich-hoat > .nt-item-visual {
  animation: ntClickBouncePop 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes ntClickBouncePop {
  0% { transform: scale(1); }
  35% { transform: scale(1.14) rotate(-2deg); filter: drop-shadow(0 0 12px #fde047); }
  70% { transform: scale(0.96) rotate(1.5deg); }
  100% { transform: scale(1); }
}

/* 1. Vị trí Đồng Hồ Treo Tường Bên Phải (Nằm đúng mảng tường vàng trống phía trên tủ Coca-Cola, dưới icon Vé Số & Cài Đặt, đã tích hợp sẵn phối cảnh 3D xoay mặt sang TRÁI trong SVG) */
.nt-vi-tri-dong-ho-tuong-phai {
  top: max(12.2%, 43px);
  right: 12.2%;
  z-index: 7;
  transform: perspective(180px) rotateY(-14deg);
}

/* 2. Vị trí Đèn & Phong Thủy Giữa Trần Nhà (Treo đúng thanh sắt giữa 2 cụm dây Bim Bim, căn giữa bằng margin-inline để không bao giờ bị giật lệch ngang khi bấm) */
.nt-vi-tri-tran-nha-giua {
  top: 2.2%;
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
  z-index: 7;
}

/* 3. Vị trí Nóc Tủ Mát Coca-Cola (Đặt trên nóc trước tủ Coca-Cola, lệch trái so với Đồng Hồ Treo Tường để không chồng lấp) */
.nt-vi-tri-noc-tu-coca {
  top: 21.6%;
  right: 23.2%;
  z-index: 6;
}

/* 4. Vị trí Cột Tường Trái Cạnh Cửa Sắt (Lịch Bloc / Tranh Kính) */
.nt-vi-tri-tuong-trai-lich {
  top: 14.5%;
  left: 25.4%;
  z-index: 5;
}

/* 5. Vị trí Linh Vật Chiêu Tài Mặt Bàn Gỗ Thu Ngân (Đặt đúng vị trí hũ kẹo đầu tiên bên trái hũ bánh gấu nắp vàng) */
.nt-vi-tri-mat-ban-phai {
  bottom: 2.2%;
  right: 18.8%;
  z-index: 10;
}

.nt-khung-anh-mat-ban {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bóng đổ tiếp xúc mặt bàn gỗ lệch nhẹ sang phải đồng bộ 100% với bóng đổ của Hũ Bánh Gấu & Chupa Chups */
.bong-do-mat-ban-pixel {
  position: absolute;
  bottom: -2px;
  left: 54%;
  transform: translateX(-50%);
  width: 54px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 48% 50%, rgba(28, 8, 2, 0.78) 0%, rgba(56, 20, 4, 0.56) 62%, rgba(72, 26, 5, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.bong-do-mat-ban-pixel.bong-coc-ngoc {
  width: 62px;
  height: 15px;
}

.anh-pixel-mat-ban {
  position: relative;
  z-index: 2;
  display: block;
  width: 58px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(2px 3px 2px rgba(28, 10, 2, 0.58));
  transform-origin: 50% 92%;
}

.anh-pixel-heo-dat {
  animation: heoDatNhunNhay 1.8s ease-in-out infinite alternate;
}

.anh-pixel-meo-than-tai {
  animation: meoThanTaiNghiengVay 1.6s ease-in-out infinite alternate;
}

.anh-pixel-coc-ngoc {
  width: 64px;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.55)) drop-shadow(0 3px 3px rgba(34, 15, 4, 0.6));
  animation: heoDatNhunNhay 2.1s ease-in-out infinite alternate;
}

@keyframes meoThanTaiNghiengVay {
  0% { transform: rotate(-2.5deg) translateY(0); }
  100% { transform: rotate(2.5deg) translateY(-2px); }
}

.nt-khung-anh-mat-ban.nt-che-do-mini .anh-pixel-mat-ban {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
}

.nhan-xem-thu-nt-nho {
  position: absolute;
  bottom: -5px;
  padding: 0.5px 4px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.92);
  border: 1px solid #bfdbfe;
  color: #ffffff;
  font-size: 7px;
  font-weight: 900;
  line-height: 1.1;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ================= ĐỒ HỌA SVG 2D PIXEL-VECTOR CHO 4 CẤP ĐỒNG HỒ TREO TƯỜNG ================= */
.nt-khung-svg-dong-ho {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.svg-dong-ho-tuong {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(24, 11, 4, 0.42));
}

.svg-dong-ho-tuong.svg-dh-gimiko {
  width: 40px;
  height: 45px;
}

.svg-dong-ho-tuong.svg-dh-seiko {
  width: 42px;
  height: 52px;
}

.svg-dong-ho-tuong.svg-dh-cuccu {
  width: 44px;
  height: 55px;
}

.svg-dong-ho-tuong.svg-dh-hoang-kim {
  width: 45px;
  height: 55px;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.68)) drop-shadow(0 2px 4px rgba(15, 7, 2, 0.65));
}

.svg-dong-ho-tuong.svg-mini {
  width: 48px !important;
  height: 56px !important;
}

/* Đồ họa SVG 2D Pixel-Vector cho 3 cấp Đèn & Phong Thủy Giữa Trần Nhà (Slot #2: tran_nha) */
.nt-khung-svg-tran-nha {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.svg-den-tran-nha {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(15, 7, 2, 0.55));
}

.svg-den-tran-nha.svg-den-day-toc {
  width: 46px;
  height: 56px;
  filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.55));
}

.svg-den-tran-nha.svg-chuong-gio {
  width: 48px;
  height: 62px;
}

.svg-den-tran-nha.svg-den-keo-quan {
  width: 54px;
  height: 65px;
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.72)) drop-shadow(0 2px 4px rgba(15, 7, 2, 0.65));
}

.svg-den-tran-nha.svg-mini {
  width: 48px !important;
  height: 56px !important;
}

.svg-nhom-den-tran-swing {
  animation: denTranSwingNhe 2.6s ease-in-out infinite alternate;
}

@keyframes denTranSwingNhe {
  0% { transform: rotate(-3.5deg); }
  100% { transform: rotate(3.5deg); }
}

.svg-ong-truc-1 {
  animation: denTranSwingNhe 1.2s ease-in-out infinite alternate;
}

.svg-ong-truc-2 {
  animation: denTranSwingNhe 1.2s ease-in-out infinite alternate-reverse;
}

.svg-bong-keo-quan-chay {
  animation: bongKeoQuanChayNgang 2.2s ease-in-out infinite alternate;
}

@keyframes bongKeoQuanChayNgang {
  0% { transform: translateX(-5px) scaleX(0.92); opacity: 0.72; }
  50% { transform: translateX(0px) scaleX(1.05); opacity: 1; }
  100% { transform: translateX(5px) scaleX(0.92); opacity: 0.72; }
}

/* Đồ họa SVG 2D Pixel-Vector cho 3 cấp Nóc Tủ Mát Coca-Cola (Slot #3: noc_tu_lanh) */
.nt-khung-svg-noc-tu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.svg-noc-tu-lanh {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(15, 7, 2, 0.55));
}

.svg-noc-tu-lanh.svg-radio-do {
  width: 44px;
  height: 36px;
}

.svg-noc-tu-lanh.svg-tivi-crt {
  width: 46px;
  height: 39px;
}

.svg-noc-tu-lanh.svg-dan-neon-vip {
  width: 48px;
  height: 41px;
  filter: drop-shadow(0 0 7px rgba(236, 72, 153, 0.65)) drop-shadow(0 2px 3px rgba(15, 7, 2, 0.6));
}

.svg-noc-tu-lanh.svg-mini {
  width: 50px !important;
  height: 42px !important;
}

.svg-cuon-bang-xoay {
  animation: banhRangXoay 2.2s linear infinite;
}

.svg-hat-song-tivi {
  animation: songTiviChopSang 1.1s ease-in-out infinite alternate;
}

@keyframes songTiviChopSang {
  0% { opacity: 0.45; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.25); }
}

.svg-canh-tivi-dong {
  animation: canhTiviNhipNhang 1.4s ease-in-out infinite alternate;
}

@keyframes canhTiviNhipNhang {
  0% { transform: translateX(-0.8px); }
  100% { transform: translateX(0.8px); }
}

.nhan-kenh-tivi-svg {
  position: absolute;
  top: 12px;
  left: 7px;
  padding: 0 2.5px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.82);
  color: #fde047;
  font-size: 6px;
  font-weight: 900;
  line-height: 1.15;
  pointer-events: none;
}

.svg-neon-vip-nhap-nhay {
  animation: neonVipChopSang 1.2s ease-in-out infinite alternate;
}

@keyframes neonVipChopSang {
  0% { filter: brightness(0.92); }
  100% { filter: brightness(1.22) drop-shadow(0 0 4px #f43f5e); }
}

.svg-loa-bass-dap {
  animation: loaBassDapNhip 0.48s ease-in-out infinite alternate;
}

@keyframes loaBassDapNhip {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.08); }
}

.svg-cot-eq {
  animation: cotEqNhay 0.55s ease-in-out infinite alternate;
}
.svg-cot-eq-2 { animation-delay: -0.15s; }
.svg-cot-eq-3 { animation-delay: -0.32s; }
.svg-cot-eq-4 { animation-delay: -0.08s; }
.svg-cot-eq-5 { animation-delay: -0.24s; }

@keyframes cotEqNhay {
  0% { transform: scaleY(0.45); }
  100% { transform: scaleY(1.15); }
}

/* Animation Kim Giây SVG giật từng nấc chuẩn đồng hồ treo tường */
.svg-nhom-kim-giay-quay {
  animation: kimGiayTichTac 12s steps(12, end) infinite;
}

/* Animation Quả Lắc Đồng Seiko / Chiếc Lá Cúc Cu / Ngọc Bích Hoàng Kim đung đưa mượt mà */
.svg-nhom-qua-lac-swing {
  animation: quaLacSeikoSwing 1.1s ease-in-out infinite alternate;
}

/* Animation Bánh Răng Cơ Khí & Hào Quang Hoàng Kim trong SVG */
.svg-banh-rang-xoay-trai {
  animation: banhRangXoay 4.5s linear infinite;
}

.svg-banh-rang-xoay-phai {
  animation: banhRangXoay 4.5s linear infinite reverse;
}

.svg-vong-hao-quang-hk {
  animation: banhRangXoay 11s linear infinite;
}

/* Animation Chim Cúc Cu bật ra hướng sang TRÁI và 2 quả tạ trái thông kéo xích */
.svg-chim-cuccu-nhay {
  animation: chimCucCuSvgPop 2.4s ease-in-out infinite;
}

@keyframes chimCucCuSvgPop {
  0%, 42%, 100% {
    transform: translateY(1px) scale(0.82);
  }
  52%, 82% {
    transform: translate(-2px, -2.5px) scale(1.16);
  }
}

.svg-ta-thong-trai {
  animation: taThongKeoXich 1.8s ease-in-out infinite alternate;
}

.svg-ta-thong-phai {
  animation: taThongKeoXich 1.8s ease-in-out infinite alternate;
  animation-delay: -0.9s;
}

/* ================= ĐỒ HỌA PIXEL-VECTOR & ANIMATION ĐA LỚP CHO 18 MÓN NỘI THẤT ================= */
.nt-item-visual {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.nt-item-visual.nt-che-do-mini {
  transform: scale(0.88);
}

/* Mặt đồng hồ kim chung (Đồng bộ giờ/phút theo ca bán + kim giây giật tích-tắc) */
.nt-mat-dong-ho {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf7 0%, #fef3c7 100%);
  border: 2px solid #2b1d14;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.nt-mat-dong-ho.mat-gimiko {
  border-radius: 6px;
  width: 30px;
  height: 30px;
}

.nt-mat-dong-ho.mat-hoangkim {
  background: radial-gradient(circle, #065f46 0%, #022c22 100%);
  border: 2px solid #fde047;
  box-shadow: inset 0 0 6px rgba(250, 204, 21, 0.55);
}

.nt-so-dh {
  position: absolute;
  font-family: var(--font-pixel);
  font-size: 5.5px;
  font-weight: 900;
  color: #2b1406;
  line-height: 1;
}

.mat-hoangkim .nt-so-dh {
  color: #fde047;
}

.nt-so-dh.so-12 { top: 2px; left: 50%; transform: translateX(-50%); }
.nt-so-dh.so-6 { bottom: 2px; left: 50%; transform: translateX(-50%); }
.nt-so-dh.so-3 { right: 2.5px; top: 50%; transform: translateY(-50%); }
.nt-so-dh.so-9 { left: 2.5px; top: 50%; transform: translateY(-50%); }

.nt-kim-dh {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  border-radius: 999px;
}

.nt-kim-dh.kim-gio {
  width: 2.2px;
  height: 8px;
  margin-left: -1.1px;
  background: #1c0d06;
  transform: rotate(var(--goc-kim-gio, 60deg));
}

.nt-kim-dh.kim-phut {
  width: 1.6px;
  height: 11px;
  margin-left: -0.8px;
  background: #451a03;
  transform: rotate(var(--goc-kim-phut, 180deg));
}

.mat-hoangkim .nt-kim-dh.kim-gio,
.mat-hoangkim .nt-kim-dh.kim-phut {
  background: #fef08a;
}

.nt-kim-dh.kim-giay {
  width: 1.2px;
  height: 12px;
  margin-left: -0.6px;
  background: #dc2626;
  animation: kimGiayTichTac 12s steps(12, end) infinite;
}

@keyframes kimGiayTichTac {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.nt-chot-kim-dh {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1px solid #2b1d14;
  z-index: 2;
}

.nt-vet-kinh-dh {
  position: absolute;
  top: -20%;
  left: -120%;
  width: 55%;
  height: 140%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: vetKinhQuetNgang 3.6s ease-in-out infinite;
  pointer-events: none;
}

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

/* 1. ĐỒNG HỒ BẬC 1: Gimiko Nhựa Đỏ 90s */
.dh-gimiko-than-do {
  position: relative;
  padding: 5px;
  border-radius: 9px;
  background: linear-gradient(145deg, #ef4444 0%, #b91c1c 100%);
  border: 2.2px solid #2b1d14;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    2px 3px 0 rgba(43, 29, 20, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dh-gimiko-nhan {
  font-size: 4.5px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.4px;
  margin-bottom: 1px;
}

.nt-hat-nhip-tich-tac {
  position: absolute;
  top: -4px;
  right: -4px;
  color: #fde047;
  font-size: 10px;
  animation: nhapNhayTichTac 1s steps(2, start) infinite;
}

@keyframes nhapNhayTichTac {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 2. ĐỒNG HỒ BẬC 2: Quả Lắc Gỗ Seiko Chuông Ngân */
.dh-seiko-chop-mao {
  width: 34px;
  height: 7px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #92400e 0%, #451a03 100%);
  border: 2px solid #2b1d14;
  border-bottom: none;
}

.dh-seiko-than-go {
  padding: 4px 5px;
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  border: 2px solid #2b1d14;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px #b45309,
    2px 4px 0 rgba(28, 13, 6, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.dh-seiko-buong-kinh-duoi {
  position: relative;
  width: 24px;
  height: 20px;
  border-radius: 3px 3px 6px 6px;
  background: radial-gradient(circle at 50% 30%, #291509 0%, #120803 100%);
  border: 1.5px solid #d97706;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.dh-seiko-qua-lac {
  position: relative;
  width: 12px;
  height: 18px;
  transform-origin: 50% 0%;
  animation: quaLacSeikoSwing 1.15s ease-in-out infinite alternate;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@keyframes quaLacSeikoSwing {
  0% { transform: rotate(-24deg); }
  100% { transform: rotate(24deg); }
}

.can-qua-lac {
  width: 1.6px;
  height: 10px;
  background: #fcd34d;
}

.dia-tron-qua-lac {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #f59e0b 70%, #b45309 100%);
  border: 1px solid #451a03;
  box-shadow: 0 0 5px rgba(251, 191, 36, 0.8);
}

.dh-seiko-de-go {
  width: 40px;
  height: 5px;
  border-radius: 2px;
  background: #3b1806;
  border: 1.5px solid #1c0a02;
}

.vet-sang-kinh-seiko {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: vetKinhQuetNgang 3s ease-in-out infinite;
}

/* 3. ĐỒNG HỒ BẬC 3: Gỗ Cúc Cu Cơ Khí Thụy Sĩ */
.dh-cuccu-mai-nha {
  width: 46px;
  height: 12px;
  background: linear-gradient(180deg, #991b1b 0%, #5c0a0a 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 1.5px 0 #2b1d14);
}

.dh-cuccu-la-phong-dinh {
  font-size: 7px;
  line-height: 1;
}

.dh-cuccu-than-nha {
  position: relative;
  padding: 4px 6px;
  background: linear-gradient(180deg, #7c2d12 0%, #431407 100%);
  border: 2px solid #2b1d14;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 2px 4px 0 rgba(28, 13, 6, 0.65);
}

.dh-cuccu-o-cua-chim {
  position: relative;
  width: 14px;
  height: 11px;
  border-radius: 6px 6px 2px 2px;
  background: #1c0a02;
  border: 1.5px solid #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.dh-cuccu-chim-vang {
  position: relative;
  width: 9px;
  height: 7px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  border: 1px solid #451a03;
  animation: chimCucCuNhayHot 2.4s ease-in-out infinite;
}

.canh-chim-cuccu {
  position: absolute;
  top: 1px;
  left: -3px;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: #f59e0b;
  animation: canhChimVay 0.35s ease-in-out infinite alternate;
}

.mo-chim-cuccu {
  position: absolute;
  top: 2px;
  right: -3px;
  width: 0;
  height: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 3.5px solid #dc2626;
}

@keyframes chimCucCuNhayHot {
  0%, 45%, 100% { transform: translateY(1px) scale(0.78); }
  55%, 85% { transform: translateY(-3px) scale(1.22); box-shadow: 0 0 6px #fde047; }
}

@keyframes canhChimVay {
  from { transform: rotate(-25deg); }
  to { transform: rotate(30deg); }
}

.dh-cuccu-banh-rang {
  position: absolute;
  top: 16px;
  font-size: 9px;
  color: #fbbf24;
  text-shadow: 0 1px 1px #1c0a02;
  animation: banhRangXoay 4s linear infinite;
}

.dh-cuccu-banh-rang.br-trai { left: -4px; }
.dh-cuccu-banh-rang.br-phai { right: -4px; animation-direction: reverse; }

@keyframes banhRangXoay {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dh-cuccu-cum-ta-duoi {
  position: relative;
  width: 32px;
  height: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 4px;
}

.day-xich-ta {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d97706 0%, #78350f 100%);
  border: 1px solid #2b1406;
  animation: taThongKeoXich 1.8s ease-in-out infinite alternate;
}

.day-xich-ta.ta-phai {
  animation-delay: -0.9s;
}

@keyframes taThongKeoXich {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

/* 4. ĐỒNG HỒ BẬC 4 (TUYỆT PHẨM): Hoàng Kim Khảm Trai "Long Phụng Hòa Minh" */
.nt-dh-hoang-kim {
  filter: drop-shadow(0 0 7px rgba(250, 204, 21, 0.72));
}

.dh-hk-hao-quang-nen {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.45) 0%, transparent 72%);
  animation: haoQuangHoangKimTho 2s ease-in-out infinite alternate;
  pointer-events: none;
}

.dh-hk-vong-mandala-xoay {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px dashed rgba(253, 224, 71, 0.75);
  animation: banhRangXoay 9s linear infinite;
  pointer-events: none;
}

.dh-hk-mao-long-phung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 2;
  font-size: 7.5px;
  color: #fde047;
  text-shadow: 0 1px 2px #000;
}

.vien-ngoc-chau-dinh {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fde047 55%, #dc2626 100%);
  box-shadow: 0 0 8px #fde047;
}

.dh-hk-than-kham-trai {
  position: relative;
  padding: 5px 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1c0d06 0%, #090402 100%);
  border: 2px solid #fde047;
  box-shadow:
    inset 0 0 0 1px #f59e0b,
    0 3px 8px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  z-index: 2;
}

.lop-anh-xa-cu-7-mau {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(45, 212, 191, 0.28) 0%,
    rgba(244, 114, 182, 0.32) 35%,
    rgba(250, 204, 21, 0.35) 70%,
    rgba(56, 189, 248, 0.28) 100%
  );
  background-size: 220% 220%;
  animation: xaCu7MauChay 3.2s linear infinite;
  pointer-events: none;
}

@keyframes xaCu7MauChay {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.dh-hk-buong-ngoc-duoi {
  width: 26px;
  height: 18px;
  border-radius: 4px;
  background: radial-gradient(circle, #064e3b 0%, #022c22 100%);
  border: 1.5px solid #fde047;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.can-qua-lac-vang {
  width: 1.8px;
  height: 9px;
  background: #fde047;
}

.ngoc-bich-qua-lac {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #6ee7b7 0%, #10b981 65%, #047857 100%);
  border: 1px solid #fde047;
  box-shadow: 0 0 6px #34d399;
}

.dh-hk-de-rong-vang {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b45309, #fde047, #b45309);
  border: 1.5px solid #451a03;
  z-index: 2;
}

@keyframes haoQuangHoangKimTho {
  from { transform: scale(0.92); opacity: 0.65; }
  to { transform: scale(1.08); opacity: 1; }
}

/* Hạt bụi vàng, hoa & nốt nhạc bay chung cho đồ Bậc 2-4 */
.hat-bui-hoang-kim,
.nt-not-nhac-chuong,
.nt-hat-hoa-cuccu,
.hat-loc-do-roi {
  position: absolute;
  pointer-events: none;
  font-weight: 900;
  z-index: 4;
}

.hat-bui-hoang-kim {
  color: #fde047;
  font-size: 8px;
  text-shadow: 0 0 4px #f59e0b;
  animation: hatBuiVangBayLen 2.2s ease-in-out infinite;
}

.hat-bui-hoang-kim.b1 { top: 4px; left: -6px; animation-delay: 0s; }
.hat-bui-hoang-kim.b2 { top: 10px; right: -7px; animation-delay: -0.7s; }
.hat-bui-hoang-kim.b3 { bottom: 6px; left: -5px; animation-delay: -1.3s; }
.hat-bui-hoang-kim.b4 { bottom: 8px; right: -6px; animation-delay: -1.8s; }

@keyframes hatBuiVangBayLen {
  0% { opacity: 0; transform: translateY(4px) scale(0.6); }
  50% { opacity: 1; transform: translateY(-4px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.7); }
}

.nt-not-nhac-chuong,
.nt-hat-hoa-cuccu,
.hat-loc-do-roi {
  color: #fef08a;
  font-size: 9px;
  text-shadow: 1px 1px 0 #78350f;
  animation: notNhacBayNghieng 2.4s ease-in-out infinite;
}

.nt-not-nhac-chuong.n1, .nt-hat-hoa-cuccu.h1 { top: -2px; right: -7px; }
.nt-not-nhac-chuong.n2, .nt-hat-hoa-cuccu.h2 { top: 8px; left: -8px; animation-delay: -1.1s; }
.nt-hat-hoa-cuccu.h3 { top: -6px; left: -4px; animation-delay: -0.6s; color: #f472b6; }

@keyframes notNhacBayNghieng {
  0% { opacity: 0; transform: translate(0, 3px) scale(0.7); }
  45% { opacity: 1; transform: translate(3px, -5px) scale(1.1); }
  100% { opacity: 0; transform: translate(6px, -12px) scale(0.8); }
}

/* 5-7. ĐÈN TRẦN & CHUÔNG GIÓ PHONG THỦY */
.nt-den-day-toc,
.nt-chuong-gio,
.nt-den-keo-quan {
  transform-origin: 50% 0%;
  animation: denTranDungDua 3.2s ease-in-out infinite alternate;
}

@keyframes denTranDungDua {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

.day-dien-den-tran,
.day-treo-do-phong-thuy,
.xich-vang-treo-den {
  width: 2px;
  height: 10px;
  background: #2b1d14;
}

.day-treo-do-phong-thuy { background: #dc2626; }
.xich-vang-treo-den { background: #fbbf24; }

.choa-sat-trang-men {
  width: 28px;
  height: 8px;
  border-radius: 50% 50% 2px 2px;
  background: linear-gradient(180deg, #f5f5f4 0%, #d6d3d1 100%);
  border: 1.5px solid #2b1d14;
}

.bong-den-day-toc-vang {
  width: 10px;
  height: 10px;
  margin-top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fde047 60%, #f59e0b 100%);
  box-shadow: 0 0 12px #fde047, 0 0 22px rgba(251, 191, 36, 0.75);
}

.quang-sang-non-den {
  position: absolute;
  top: 16px;
  width: 48px;
  height: 36px;
  background: radial-gradient(ellipse at 50% 0%, rgba(254, 240, 138, 0.38) 0%, transparent 75%);
  pointer-events: none;
}

.dom-dom-bay-den {
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 5px #fde047;
  animation: domDomBayQuanh 2.6s ease-in-out infinite alternate;
}

.dom-dom-bay-den.d1 { top: 14px; left: -8px; }
.dom-dom-bay-den.d2 { top: 20px; right: -8px; animation-delay: -1.3s; }

@keyframes domDomBayQuanh {
  from { transform: translate(-4px, -2px); }
  to { transform: translate(5px, 4px); }
}

.nut-that-cat-tuong {
  width: 10px;
  height: 10px;
  background: #dc2626;
  border: 1.5px solid #fde047;
  transform: rotate(45deg);
}

.vom-truc-chuong-gio {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.xu-ngu-de {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  border: 1px solid #78350f;
}

.cum-ong-truc-chuong {
  display: flex;
  gap: 3px;
  margin-top: 1px;
}

.ong-truc-cg {
  width: 3.5px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fcd34d 0%, #b45309 100%);
  border: 1px solid #451a03;
  animation: taThongKeoXich 1.2s ease-in-out infinite alternate;
}

.ong-truc-cg.o2 { height: 20px; animation-delay: -0.4s; }
.ong-truc-cg.o3 { height: 18px; animation-delay: -0.8s; }

.tua-rua-do-cg,
.tua-rua-hoang-kim {
  width: 4px;
  height: 10px;
  border-radius: 0 0 4px 4px;
  background: #dc2626;
  margin-top: 1px;
}

.mao-vang-den-keo-quan,
.de-vang-den-keo-quan {
  width: 30px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b45309, #fde047, #b45309);
  border: 1px solid #451a03;
}

.long-kinh-keo-quan-360 {
  position: relative;
  width: 26px;
  height: 22px;
  border-radius: 5px;
  background: radial-gradient(circle, #fef08a 0%, #dc2626 85%);
  border: 1.5px solid #fde047;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.8);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ruot-keo-quan-xoay {
  display: flex;
  gap: 4px;
  font-size: 9px;
  animation: ruotKeoQuanChay 3s linear infinite;
}

@keyframes ruotKeoQuanChay {
  from { transform: translateX(18px); }
  to { transform: translateX(-28px); }
}

/* 8-10. ĐÀI RADIO / TIVI CRT / DÀN LOA NEON TRÊN NÓC TỦ MÁT COCA */
.anten-radio-bac {
  width: 18px;
  height: 1.5px;
  background: #e5e7eb;
  transform: rotate(-28deg) translateX(4px);
}

.than-radio-sony-do {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  border: 1.8px solid #2b1d14;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.loa-tron-radio {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #374151 0%, #111827 100%);
  border: 1px solid #fca5a5;
  animation: loaRadioRung 0.45s ease-in-out infinite alternate;
}

@keyframes loaRadioRung {
  from { transform: scale(0.94); }
  to { transform: scale(1.08); }
}

.hoc-bang-cassette-doi {
  display: flex;
  gap: 2px;
  padding: 2px 3px;
  border-radius: 2px;
  background: #1f2937;
  border: 1px solid #fde047;
}

.cuon-bang-xoay {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px dashed #fef08a;
  animation: banhRangXoay 1.6s linear infinite;
}

/* Tivi Màu CRT 14 Inch */
.anten-rau-tho-tivi {
  position: relative;
  width: 24px;
  height: 8px;
  display: flex;
  justify-content: center;
}

.rau-anten-trai,
.rau-anten-phai {
  width: 1.5px;
  height: 10px;
  background: #d1d5db;
}

.rau-anten-trai { transform: rotate(-32deg); }
.rau-anten-phai { transform: rotate(32deg); }

.tia-song-tivi {
  position: absolute;
  top: -5px;
  font-size: 7px;
  color: #fde047;
  animation: nhapNhayTichTac 0.9s infinite;
}

.thung-tivi-crt-xam {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 5px;
  border-radius: 6px;
  background: linear-gradient(180deg, #57534e 0%, #292524 100%);
  border: 2px solid #1c1917;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.55);
}

.man-hinh-loi-crt {
  position: relative;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(135deg, #38bdf8 0%, #1d4ed8 50%, #f43f5e 100%);
  background-size: 200% 200%;
  border: 1.5px solid #0f172a;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.65);
  overflow: hidden;
  animation: xaCu7MauChay 2.2s ease-in-out infinite;
}

.nt-tivi-crt.kenh-1 .man-hinh-loi-crt {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 60%, #fde047 100%);
}

.nt-tivi-crt.kenh-2 .man-hinh-loi-crt {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 60%, #fde047 100%);
}

.nhan-kenh-tivi-goc {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 5.5px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 1px 1px 0 #000;
}

.bang-nut-tivi-phai {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.num-xoay-tivi {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a8a29e;
}

.den-nguon-tivi-do {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}

/* Dàn Đèn Neon VIP & Loa LED Equalizer */
.bang-chu-neon-vip {
  padding: 1.5px 6px;
  border-radius: 999px;
  background: #1e1b4b;
  border: 1.5px solid #f472b6;
  box-shadow: 0 0 8px #ec4899;
  margin-bottom: 2px;
}

.chu-neon-phat-sang {
  font-size: 6px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 0 4px #f472b6;
  animation: nhapNhayTichTac 0.7s infinite alternate;
}

.cum-loa-equalizer-led {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 5px;
  border-radius: 5px;
  background: #0f172a;
  border: 1.8px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
}

.loa-bass-neon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #f472b6 0%, #3b0764 100%);
  border: 1px solid #fde047;
  animation: loaRadioRung 0.32s ease-in-out infinite alternate;
}

.day-5-cot-led-eq {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 12px;
}

.cot-led-eq {
  width: 2.5px;
  height: 10px;
  border-radius: 1px;
  background: linear-gradient(180deg, #ef4444 0%, #fde047 50%, #22c55e 100%);
  transform-origin: 50% 100%;
  animation: cotEqNhay 0.42s ease-in-out infinite alternate;
}

.cot-led-eq.c2 { animation-delay: -0.15s; }
.cot-led-eq.c3 { animation-delay: -0.3s; }
.cot-led-eq.c4 { animation-delay: -0.1s; }
.cot-led-eq.c5 { animation-delay: -0.25s; }

@keyframes cotEqNhay {
  from { transform: scaleY(0.3); }
  to { transform: scaleY(1); }
}

/* 11-13. LINH VẬT CHIÊU TÀI MẶT BÀN THU NGÂN (Heo Đất • Mèo Thần Tài • Cóc Ngọc) */
.than-heo-dat-do {
  position: relative;
  width: 30px;
  height: 22px;
  border-radius: 55% 45% 48% 48%;
  background: radial-gradient(circle at 35% 30%, #f87171 0%, #dc2626 60%, #991b1b 100%);
  border: 2px solid #2b1d14;
  box-shadow: 0 3px 0 rgba(43, 29, 20, 0.5);
  animation: heoDatNhunNhay 1.4s ease-in-out infinite alternate;
}

@keyframes heoDatNhunNhay {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.05, 0.96); }
}

.dong-xu-roi-vao-heo {
  font-size: 8px;
  margin-bottom: -3px;
  animation: xuRoiLưngHeo 1.4s ease-in-out infinite;
  z-index: 2;
}

@keyframes xuRoiLưngHeo {
  0% { transform: translateY(-6px) scale(0.8); opacity: 0; }
  50% { transform: translateY(0) scale(1.1); opacity: 1; }
  100% { transform: translateY(4px) scale(0.5); opacity: 0; }
}

.hoa-mai-bung-heo {
  position: absolute;
  bottom: 3px;
  left: 8px;
  font-size: 9px;
  color: #fde047;
}

/* Mèo Thần Tài Vẫy Tay */
.than-meo-su-trang {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 46% 46% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, #fef3c7 85%);
  border: 2px solid #2b1d14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tai-meo-do {
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 2px 6px 0 0;
  background: #dc2626;
  border: 1.5px solid #2b1d14;
}

.tai-meo-do.t-trai { left: 2px; transform: rotate(-15deg); }
.tai-meo-do.t-phai { right: 2px; transform: rotate(15deg); }

.vong-co-chuong-vang {
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: #dc2626;
  border: 1px solid #fde047;
  margin-top: 6px;
}

.tay-meo-vay-lien-tuc {
  position: absolute;
  top: 4px;
  left: -5px;
  width: 8px;
  height: 13px;
  border-radius: 6px;
  background: #ffffff;
  border: 1.8px solid #2b1d14;
  transform-origin: 50% 90%;
  animation: tayMeoVayKhach 0.55s ease-in-out infinite alternate;
}

@keyframes tayMeoVayKhach {
  from { transform: rotate(-28deg); }
  to { transform: rotate(22deg); }
}

.thoi-vang-van-loc {
  font-size: 5px;
  font-weight: 900;
  padding: 1px 3px;
  border-radius: 3px;
  background: #fbbf24;
  border: 1px solid #78350f;
  color: #7f1d1d;
  margin-top: 1px;
}

.dem-do-meo-than-tai {
  width: 32px;
  height: 5px;
  border-radius: 999px;
  background: #dc2626;
  border: 1.5px solid #fde047;
}

/* Cóc Ngọc Thiềm Thừ Phun Tiền & Đỉnh Trầm */
.vong-hao-quang-coc-ngoc {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px dashed #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.55);
  animation: banhRangXoay 7s linear infinite;
}

.than-coc-ngoc-bich {
  position: relative;
  width: 30px;
  height: 22px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 40% 30%, #6ee7b7 0%, #10b981 60%, #065f46 100%);
  border: 2px solid #fde047;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
  z-index: 2;
}

.xu-vang-phun-bay {
  position: absolute;
  top: -8px;
  left: 8px;
  font-size: 8px;
  animation: hatBuiVangBayLen 1.5s ease-in-out infinite;
}

.xu-vang-phun-bay.x2 {
  left: 18px;
  animation-delay: -0.75s;
}

.de-thoi-vang-coc {
  width: 34px;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b45309, #fde047, #b45309);
  border: 1.5px solid #451a03;
  z-index: 2;
}

/* 14-15. LỊCH BLOC ĐẠI & TRANH KÍNH KHẢM XÀ CỪ TƯỜNG TRÁI */
.bia-do-lich-bloc {
  width: 24px;
  padding: 2px;
  border-radius: 3px;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  border: 1.5px solid #fde047;
  box-shadow: 1.5px 2.5px 0 rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.chu-phuc-vang-lich {
  font-size: 6.5px;
  font-weight: 900;
  color: #fde047;
  line-height: 1;
}

.to-giay-lich-ngay-dong {
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
  padding: 1px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0%;
  animation: giayLichBayNhe 2.2s ease-in-out infinite alternate;
}

@keyframes giayLichBayNhe {
  from { transform: rotateX(0deg) skewX(0deg); }
  to { transform: rotateX(18deg) skewX(-4deg); }
}

.nhan-thang-lich {
  font-size: 4px;
  font-weight: 900;
  color: #dc2626;
  line-height: 1;
}

.so-ngay-lich-lon {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 900;
  color: #15803d;
  line-height: 1.05;
}

.khung-go-tranh-kinh {
  position: relative;
  width: 30px;
  height: 22px;
  border-radius: 3px;
  background: #0f172a;
  border: 2px solid #d97706;
  box-shadow:
    inset 0 0 0 1px #fde047,
    1.5px 2.5px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nen-kinh-xa-cu-7-mau {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, #0284c7, #7c3aed, #db2777, #eab308);
  background-size: 220% 220%;
  animation: xaCu7MauChay 3s linear infinite;
  opacity: 0.78;
}

.thuyen-buom-vang-xa-cu {
  position: relative;
  font-size: 12px;
  z-index: 2;
  filter: drop-shadow(0 1px 2px #000);
}

/* 16-18. HIỆU ỨNG ĐỘ QUẠT BÀN (Phun sương đá lạnh & Hoàng Kim phả tuyết) */
.khung-quat-ban-xoay.quat-do-phun-suong {
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.75));
}

.khung-quat-ban-xoay.quat-do-hoang-kim {
  filter: sepia(0.35) saturate(1.6) brightness(1.08) drop-shadow(0 0 8px rgba(250, 204, 21, 0.88));
}

.vong-hao-quang-quat-hk {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(253, 224, 71, 0.75);
  animation: banhRangXoay 6s linear infinite;
  pointer-events: none;
}

.cum-suong-da-quat,
.cum-tuyet-hoang-kim-quat {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lan-suong-quat {
  position: absolute;
  top: 28%;
  right: -18px;
  width: 32px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(186, 230, 253, 0.75) 0%, transparent 75%);
  animation: suongDaThoiNgang 1.3s ease-out infinite;
}

.lan-suong-quat.suong-2 {
  top: 48%;
  animation-delay: -0.65s;
}

.bong-bong-suong,
.bong-tuyet-quat {
  position: absolute;
  right: -10px;
  font-size: 9px;
  font-weight: 900;
  color: #bae6fd;
  text-shadow: 0 0 4px #0284c7;
  animation: suongDaThoiNgang 1.5s linear infinite;
}

.bong-tuyet-quat {
  color: #fef08a;
  text-shadow: 0 0 5px #38bdf8;
}

.bong-bong-suong.b1, .bong-tuyet-quat.t1 { top: 20%; animation-delay: 0s; }
.bong-bong-suong.b2, .bong-tuyet-quat.t2 { top: 42%; animation-delay: -0.5s; }
.bong-bong-suong.b3, .bong-tuyet-quat.t3 { top: 62%; animation-delay: -1s; }
.bong-tuyet-quat.t4 { top: 30%; animation-delay: -1.25s; }

@keyframes suongDaThoiNgang {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(36px, -6px) scale(1.25); }
}

/* ĐỒNG BỘ 100% GIAO DIỆN TIỀN MẶT GIỮA QUẦY • CHỢ SỈ • NGOÀI PHỐ • SHOP • CHỐT SỔ */
#app .vung-xanh-duong .thanh-dieu-huong-top-gon.hud-top-cho-si-3-o {
  grid-template-columns: 1.15fr 0.85fr 1.25fr !important;
}

.vi-tien-dau-shop .icon-tien-do-la,
.the-chot-so-gon .icon-tien-do-la {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #86efac 0%, #22c55e 52%, #15803d 100%);
  border: 1.5px solid #fef08a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-shadow: 0 1px 0 #064e3b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.the-chot-so-gon .ten-tiem-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.the-chot-so-gon .ten-tiem-box .tieu-de-the {
  flex: 1 1 auto;
  min-width: 0;
}

.the-chot-so-gon .ten-tiem-box .o-tien-chinh-canh-shop {
  flex: 0 0 auto;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 7px !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #431d0a 0%, #271004 100%) !important;
  border: 1.5px solid #d97706 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

/* ================= MODAL XÁC NHẬN NHẬP HÀNG NHANH & BADGE NHẬP HÀNG NHANH ================= */
.gia-mon-ke.gia-nhap-hang-nhanh {
  background: linear-gradient(180deg, #f97316 0%, #c2410c 100%) !important;
  border: 1px solid #fef08a !important;
  color: #fffbeb !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}

.hop-modal-nhap-nhanh {
  max-width: 348px !important;
  border: 2.5px solid #9a6533 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #3c2618 0%, #24150c 100%) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.72) !important;
}

.than-modal-nhap-nhanh {
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.the-preview-mon-nhap-nhanh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf7 0%, #f5e6c8 100%);
  border: 1.5px solid #cfa66e;
}

.khung-anh-mon-nhap-nhanh {
  width: 58px;
  height: 58px;
  border-radius: 9px;
  background: radial-gradient(circle, #fef3c7 0%, #e7c896 100%);
  border: 1.5px solid #b47b3c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thong-tin-mon-nhap-nhanh {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ten-mon-nhap-nhanh {
  font-size: 14px;
  font-weight: 900;
  color: #2b1406;
  line-height: 1.2;
}

.badge-het-hang-nhap-nhanh {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fee2e2;
  border: 1px solid #ef4444;
  color: #991b1b;
  font-size: 10.5px;
  font-weight: 800;
}

.gia-ban-mon-nhap-nhanh {
  font-size: 11px;
  font-weight: 700;
  color: #5c3d24;
}

.bang-chi-tiet-nhap-nhanh {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(20, 11, 5, 0.58);
  border: 1px solid #784b27;
}

.dong-chi-tiet-nhap-nhanh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #f3e5d0;
}

.so-luong-cong-nhap-nhanh {
  color: #4ade80;
  font-weight: 900;
}

.chi-phi-nhap-nhanh {
  color: #fde047;
  font-weight: 900;
}

.tien-mat-hien-co-nhap-nhanh {
  color: #86efac;
  font-weight: 900;
}

.tien-mat-hien-co-nhap-nhanh.thieu-tien {
  color: #f87171;
}

.ghi-chu-nhap-nhanh {
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(254, 243, 199, 0.12);
  border: 1px dashed rgba(251, 191, 36, 0.45);
  color: #fef3c7;
  font-size: 11.2px;
  line-height: 1.35;
}

.ghi-chu-nhap-nhanh.canh-bao-thieu-tien {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(248, 113, 113, 0.6);
  color: #fecaca;
}

.chan-modal-nhap-nhanh {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8px;
  padding: 9px 12px 11px;
  background: #24150c;
  border-top: 1.5px solid #6b4423;
}

.nut-huy-nhap-nhanh {
  height: 36px;
  border-radius: 9px;
  border: 1.5px solid #8c6239;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #4b311d 0%, #332012 100%);
  color: #f5ebe1;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.nut-xac-nhan-nhap-nhanh {
  height: 36px;
  border-radius: 9px;
  border: 1.5px solid #78350f;
  border-bottom-width: 3px;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #2b1406;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.nut-xac-nhan-nhap-nhanh:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* ================= NÚT X ĐÓNG KHUNG CHAT & BẤM NPC MỞ LẠI TRONG MODAL ================= */
.hop-thoai-rpg-mo-dau {
  position: relative;
  padding-right: 36px !important;
}

.hop-thoai-rpg-mo-dau.chat-dang-an,
.bong-thoai-npc-doi-tien.chat-dang-an {
  display: none !important;
}

.nut-dong-chat-mo-dau {
  position: absolute;
  top: 5px;
  right: 5px;
}

.npc-co-the-mo-chat {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.npc-co-the-mo-chat:active {
  transform: scale(0.95);
}




/* ================= CẢNH BÁO TRỰC QUAN KHI THAO TÁC MUA SHOP BỊ CHẶN ================= */
#app .thong-bao-noi.thong-bao-noi-tren-modal {
  z-index: 10090 !important;
}

#app .hop-modal-shop-game .nut-card-item-shop.nut-thieu-tien-shop {
  background: linear-gradient(180deg, #fee2e2 0%, #fca5a5 100%) !important;
  color: #7f1d1d !important;
  border-color: #991b1b !important;
}

#app .hop-modal-shop-game .shop-card-bi-chan {
  animation: shopCardRungCanhBao 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35), 0 4px 12px rgba(127, 29, 29, 0.28) !important;
}

#app .hop-modal-shop-game #vi-tien-shop-live.vi-tien-canh-bao-do {
  background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) !important;
  border-color: #fef08a !important;
  animation: shopCardRungCanhBao 0.42s ease both !important;
}

@keyframes shopCardRungCanhBao {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}

.shop-fx-canh-bao-chan {
  position: absolute;
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: 248px;
  padding: 6px 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
  border: 1.5px solid #fde047;
  border-bottom: 3px solid #1c0404;
  color: #fffbeb;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65);
  z-index: 380;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  animation: shopCanhBaoPopLen 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.shop-fx-canh-bao-chan.kieu-khoa-cap {
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  border-color: #fbbf24;
}

.shop-fx-canh-bao-chan.kieu-thong-tin {
  background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
  border-color: #86efac;
}

.shop-fx-canh-bao-tieu-de {
  font-size: 11px;
  font-weight: 900;
  color: #fef08a;
  line-height: 1.2;
}

.shop-fx-canh-bao-phu {
  font-size: 9.8px;
  font-weight: 700;
  color: #fffbeb;
  line-height: 1.25;
}

@keyframes shopCanhBaoPopLen {
  0% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
}


/* ================= MODAL CHỌN ĐĂNG NHẬP VỪA VÀO GAME & MODAL LỰA CHỌN 2 TIẾN TRÌNH THÔNG MINH ================= */
.lop-phu-chon-dang-nhap-dau-game,
.lop-phu-chon-tien-trinh {
  z-index: 420 !important;
  backdrop-filter: blur(4px);
}

.hop-modal-chon-dang-nhap,
.hop-modal-chon-tien-trinh {
  width: min(94vw, 412px) !important;
  max-height: 90dvh !important;
  border: 2.5px solid #d97706 !important;
  background: linear-gradient(180deg, #fffcf2 0%, #f5e6c8 100%) !important;
  box-shadow:
    0 18px 42px rgba(20, 10, 4, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.than-modal-chon-dang-nhap,
.than-modal-chon-tien-trinh {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px !important;
  overflow-y: auto;
}

/* Sân khấu Bà Hoàng chào đón vừa vào game */
.san-khau-chao-mung-dang-nhap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b2110 0%, #241207 100%);
  border: 2px solid #d97706;
  color: #fffbeb;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.22);
}

.cum-avatar-chao-mung-dang-nhap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.vong-sang-avatar-chao-mung {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: radial-gradient(circle, #fef3c7 0%, #d97706 100%);
  border: 2px solid #fde047;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nhan-avatar-chao-mung {
  font-size: 9.5px;
  font-weight: 900;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: #78350f;
  color: #fef08a;
  border: 1px solid #f59e0b;
  white-space: nowrap;
}

.noi-dung-thoai-chao-mung-dang-nhap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.hang-ten-ba-hoang-chao-mung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.hang-ten-ba-hoang-chao-mung strong {
  font-size: 12.5px;
  font-weight: 900;
  color: #fef08a;
}

.badge-mot-lan-duy-nhat {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.28);
  color: #bbf7d0;
  border: 1px solid #4ade80;
}

.cau-thoai-chao-mung-dang-nhap {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.38;
  color: #fef3c7;
  font-weight: 600;
}

/* 2 Nút lớn chọn chế độ đầu game */
.danh-sach-2-nut-dang-nhap-dau-game {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nut-chon-che-do-dau-game {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.nut-chon-che-do-dau-game:active {
  transform: translateY(2px) scale(0.99);
}

.nut-dang-nhap-google-chinh {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border: 2px solid #052e16;
  border-bottom: 4px solid #052e16;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(21, 128, 61, 0.28);
}

.nut-choi-che-do-khach {
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  border: 2px solid #92400e;
  border-bottom: 4px solid #78350f;
  color: #2b1406;
  box-shadow: 0 3px 8px rgba(120, 53, 15, 0.16);
}

.khung-icon-nut-che-do {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.khung-icon-google-trang {
  background: #ffffff;
  border: 1.5px solid #dcfce7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.khung-icon-khach-vang {
  background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 100%);
  border: 1.5px solid #92400e;
}

.emoji-nut-che-do {
  font-size: 22px;
  line-height: 1;
}

.khoi-chu-nut-che-do {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hang-tieu-de-nut-che-do {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.hang-tieu-de-nut-che-do strong {
  font-size: 13.5px;
  font-weight: 900;
}

.tag-khuyen-dung-nut-che-do {
  font-size: 9.5px;
  font-weight: 900;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: #fef08a;
  color: #14532d;
  border: 1px solid #166534;
}

.tag-phu-nut-che-do {
  font-size: 9.5px;
  font-weight: 900;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: #78350f;
  color: #fef08a;
}

.nut-dang-nhap-google-chinh .khoi-chu-nut-che-do small {
  font-size: 10.8px;
  line-height: 1.3;
  color: #dcfce7;
  font-weight: 600;
}

.nut-choi-che-do-khach .khoi-chu-nut-che-do small {
  font-size: 10.8px;
  line-height: 1.3;
  color: #5c3d24;
  font-weight: 700;
}

.mui-ten-nut-che-do {
  font-size: 22px;
  font-weight: 900;
  opacity: 0.85;
  flex-shrink: 0;
}

.ghi-chu-cam-ket-khong-hoi-lai {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(180, 83, 9, 0.1);
  border: 1px dashed #b45309;
  font-size: 10.5px;
  line-height: 1.35;
  color: #5c3d24;
  font-weight: 700;
  text-align: center;
}

/* ================= MODAL LỰA CHỌN THÔNG MINH 2 TIẾN TRÌNH ================= */
.hop-co-van-thong-minh {
  padding: 9px 11px;
  border-radius: 11px;
  background: linear-gradient(135deg, #3b2110 0%, #261408 100%);
  border: 1.5px solid #f59e0b;
  color: #fffbeb;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dau-hop-co-van-thong-minh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.badge-co-van-thong-minh {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f59e0b;
  color: #2b1406;
}

.email-tai-khoan-xung-dot {
  font-size: 10px;
  color: #fde68a;
  font-weight: 700;
}

.noi-dung-co-van-thong-minh {
  margin: 0;
  font-size: 11.2px;
  line-height: 1.35;
  color: #fef3c7;
  font-weight: 600;
}

.luoi-so-sanh-2-tien-trinh {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.the-tien-trinh-so-sanh {
  padding: 8px 9px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fffcf5;
  border: 2px solid #c2955a;
}

.the-tien-trinh-khach {
  border-color: #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}

.the-tien-trinh-cloud {
  border-color: #0284c7;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
}

.dau-the-tien-trinh {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nhan-loai-tien-trinh {
  font-size: 10.5px;
  font-weight: 900;
  color: #2b1406;
}

.dau-the-tien-trinh small {
  font-size: 9.5px;
  color: #5c3d24;
  font-weight: 700;
}

.ten-tiem-so-sanh {
  font-size: 11.5px;
  font-weight: 900;
  color: #451a03;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bang-chi-so-so-sanh {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
  border-top: 1px dashed rgba(120, 53, 15, 0.25);
}

.dong-chi-so-so-sanh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.2px;
  color: #44403c;
}

.dong-chi-so-so-sanh strong {
  font-weight: 900;
  color: #1c1917;
}

.chu-tien-so-sanh {
  color: #15803d !important;
}

/* Khối Gộp Thông Minh (Khuyên dùng) */
.the-gop-thong-minh-khuyen-dung {
  padding: 10px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #16a34a;
  border-bottom: 4px solid #15803d;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.dau-the-gop-thong-minh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.dau-the-gop-thong-minh strong {
  font-size: 11.8px;
  font-weight: 900;
  color: #14532d;
}

.tag-khuyen-dung-gop {
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: #15803d;
  color: #fef08a;
}

.mo-ta-gop-thong-minh {
  margin: 0;
  font-size: 10.8px;
  line-height: 1.35;
  color: #166534;
  font-weight: 700;
}

.day-chip-ket-qua-gop {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip-ket-qua-gop {
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #86efac;
  color: #14532d;
}

.chip-tien-gop {
  background: #fef9c3;
  border-color: #facc15;
  color: #713f12;
}

.nut-chon-gop-thong-minh-chinh {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border: 1.5px solid #052e16;
  border-bottom: 3.5px solid #052e16;
  color: #ffffff;
  font-size: 12.2px;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 1px 0 #052e16;
}

.nut-chon-gop-thong-minh-chinh:active {
  transform: translateY(2px);
}

.hang-2-nut-chon-rieng-tien-trinh {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.nut-chon-rieng-tien-trinh {
  padding: 7px 8px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  text-align: center;
}

.nut-chon-rieng-tien-trinh strong {
  font-size: 11px;
  font-weight: 900;
}

.nut-chon-rieng-tien-trinh small {
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.9;
}

.nut-chon-rieng-cloud {
  background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
  border: 1.5px solid #0284c7;
  border-bottom: 3px solid #0369a1;
  color: #0c4a6e;
}

.nut-chon-rieng-local {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #d97706;
  border-bottom: 3px solid #92400e;
  color: #451a03;
}

/* Avatar người dùng đám mây trong Cài Đặt */
.avatar-nguoi-dung-dam-may {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #16a34a;
}

.avatar-mac-dinh-dam-may {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fef3c7;
  border: 2px solid #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}


/* ================= ĐỒNG BỘ AVATAR TOP HUD, THANH ĐỔI MÀU TÓC MIỄN PHÍ (0Đ) & HIỆU ỨNG LẤP LÁNH CẤP 2-4 ================= */
.nc-nv-stack-hud-top-icon {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  background: radial-gradient(circle at 50% 45%, #4a2a16 0%, #241207 100%);
  border: 1px solid rgba(253, 224, 71, 0.65);
}

.nc-nv-stack-hud-top-icon .nc-nv-layer {
  position: absolute;
  left: -18%;
  top: -8%;
  width: 136%;
  height: 136%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Thanh chọn 6 màu tóc miễn phí (0đ) trong Shop */
.thanh-chon-mau-toc-mien-phi-shop {
  padding: 8px 10px !important;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #fffdf6 0%, #fef3c7 100%) !important;
  border: 1.5px solid #d97706 !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dau-thanh-mau-toc-free {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.nhan-thanh-mau-toc-free {
  font-size: 11px;
  font-weight: 900;
  color: #5c2808;
}

.badge-mau-toc-dang-chon {
  font-size: 9.8px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 999px;
  background: #15803d;
  color: #fef08a;
  border: 1px solid #052e16;
}

.day-nut-mau-toc-free-shop,
.nc-day-mau-toc-mien-phi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.nut-mau-toc-free-shop,
.nc-nut-mau-toc-free {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1.5px solid #c2955a;
  border-bottom: 2.5px solid #78350f;
  color: #3b1d0a;
  font-size: 9.2px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease;
}

.nut-mau-toc-free-shop:active,
.nc-nut-mau-toc-free:active {
  transform: translateY(1px) scale(0.97);
}

.nut-mau-toc-free-shop.dang-chon,
.nc-nut-mau-toc-free.dang-chon {
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 100%);
  border-color: #dc2626;
  border-bottom-color: #7f1d1d;
  color: #450a0a;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.cham-mau-toc-shop,
.nc-cham-mau-toc {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #1c1008;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.nc-mau-toc-den { background-color: #18181b; }
.nc-mau-toc-nau_hat_de { background-color: #7c3f1d; }
.nc-mau-toc-do_ruou { background-color: #9f1239; }
.nc-mau-toc-vang_khoi { background-color: #d4a338; }
.nc-mau-toc-xanh_reu { background-color: #1f6f5b; }
.nc-mau-toc-bach_kim { background-color: #cbd5e1; }

.ten-ngan-mau-toc-shop {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}

/* Hiệu ứng Hạt Lấp Lánh (Sparkle Aura) trên Nhân Vật theo Cấp 2 -> Cấp 4 */
.nc-nv-lop-lap-lanh {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  z-index: 9;
  overflow: visible;
}

.nc-nv-hat-lap-lanh {
  position: absolute;
  font-size: 10px;
  line-height: 1;
  color: #fef08a;
  text-shadow:
    0 0 4px #f59e0b,
    0 0 8px rgba(254, 240, 138, 0.95);
  animation: nvHatLapLanhNhay 1.6s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

.nc-nv-lop-lap-lanh.cap-lap-lanh-3 .nc-nv-hat-lap-lanh {
  font-size: 11px;
  color: #fffbeb;
  text-shadow:
    0 0 5px #fbbf24,
    0 0 10px rgba(251, 191, 36, 0.95);
}

.nc-nv-lop-lap-lanh.cap-lap-lanh-4 .nc-nv-hat-lap-lanh {
  font-size: 12px;
  color: #ffffff;
  text-shadow:
    0 0 6px #fde047,
    0 0 12px #f59e0b,
    0 0 18px rgba(220, 38, 38, 0.85);
}

.nc-nv-hat-lap-lanh.hat-ll-1 { top: 14%; left: 16%; animation-delay: 0s; }
.nc-nv-hat-lap-lanh.hat-ll-2 { top: 22%; right: 14%; animation-delay: 0.45s; }
.nc-nv-hat-lap-lanh.hat-ll-3 { bottom: 26%; left: 18%; animation-delay: 0.9s; }
.nc-nv-hat-lap-lanh.hat-ll-4 { top: 8%; right: 26%; animation-delay: 0.25s; }
.nc-nv-hat-lap-lanh.hat-ll-5 { bottom: 22%; right: 16%; animation-delay: 0.7s; }
.nc-nv-hat-lap-lanh.hat-ll-6 { top: 38%; left: 10%; animation-delay: 0.15s; }
.nc-nv-hat-lap-lanh.hat-ll-7 { top: 42%; right: 10%; animation-delay: 0.6s; }
.nc-nv-hat-lap-lanh.hat-ll-8 { top: 4%; left: 46%; animation-delay: 1.1s; }

@keyframes nvHatLapLanhNhay {
  0%, 100% {
    opacity: 0.18;
    transform: scale(0.65) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.18) rotate(18deg);
  }
}

.nc-nv-lap-lanh-cap-3 .nc-nv-layer,
.nc-nv-lap-lanh-cap-3 .sk-meme-nv-layer {
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.35));
}

.nc-nv-lap-lanh-cap-4 .nc-nv-layer,
.nc-nv-lap-lanh-cap-4 .sk-meme-nv-layer {
  filter: drop-shadow(0 0 4.5px rgba(253, 224, 71, 0.58));
}

/* Viền & Nền Thẻ Shop theo Cấp Lấp Lánh (Cấp 2 -> Cấp 4) */
.the-item-shop-card.the-item-lap-lanh-cap-3 {
  border-color: #d97706 !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 0 8px rgba(245, 158, 11, 0.22);
}

.the-item-shop-card.the-item-lap-lanh-cap-4 {
  border-color: #eab308 !important;
  box-shadow: inset 0 0 0 1px #fef08a, 0 0 12px rgba(250, 204, 21, 0.38);
}

.khung-avatar-thu-shop.nen-lap-lanh-cap-2 {
  background: radial-gradient(circle at 50% 55%, #4a2c18 0%, #241309 100%) !important;
}

.khung-avatar-thu-shop.nen-lap-lanh-cap-3 {
  background: radial-gradient(circle at 50% 50%, #6b3410 0%, #2c1406 72%, #180a03 100%) !important;
  border-color: #f59e0b !important;
}

.khung-avatar-thu-shop.nen-lap-lanh-cap-4 {
  background: radial-gradient(circle at 50% 45%, #854d0e 0%, #451a03 65%, #1c0a02 100%) !important;
  border-color: #fde047 !important;
  box-shadow: inset 0 0 10px rgba(253, 224, 71, 0.35);
}

.badge-hang-dep-shop.badge-lap-lanh-cap-3 {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #fffbeb !important;
  border-color: #fef08a !important;
}

.badge-hang-dep-shop.badge-lap-lanh-cap-4 {
  background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) !important;
  color: #fef08a !important;
  border: 1px solid #fde047 !important;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.55);
}

/* Hỗ trợ thao tác lướt ngang (swipe trái/phải) chuyển tab mượt mà trong Shop */
#app .hop-modal-shop-game .than-modal-shop-game {
  touch-action: pan-y;
}

@keyframes shopTruotTabTiep {
  0% {
    opacity: 0.45;
    transform: translateX(26px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shopTruotTabLui {
  0% {
    opacity: 0.45;
    transform: translateX(-26px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#app .hop-modal-shop-game .than-modal-shop-game.shop-hieu-ung-truot-tiep {
  animation: shopTruotTabTiep 0.19s cubic-bezier(0.22, 1, 0.36, 1);
}

#app .hop-modal-shop-game .than-modal-shop-game.shop-hieu-ung-truot-lui {
  animation: shopTruotTabLui 0.19s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================= ICON SỔ KẾT TOÁN CẠNH VÉ SỐ & MODAL BẢNG THỐNG KÊ CUỐI NGÀY (KHÔNG SCROLL) ================= */
.nut-icon-ngoai-hud.nut-thong-ke-canh-ve-so {
  right: 43px;
  width: 36px;
  height: 36px;
}

.nut-icon-ngoai-hud.nut-thong-ke-canh-ve-so.co-ve-so-ben-canh {
  right: 82px;
}

.nut-icon-ngoai-hud.nut-thong-ke-canh-ve-so .icon-bang-thong-ke-svg {
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 2;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.nut-icon-ngoai-hud.nut-thong-ke-canh-ve-so:hover .icon-bang-thong-ke-svg {
  transform: translateY(-1px) scale(1.06);
}

.nut-icon-ngoai-hud.nut-thong-ke-canh-ve-so.thong-ke-dang-chot-so {
  filter:
    drop-shadow(0 0 8px rgba(253, 224, 71, 0.98))
    drop-shadow(0 0 14px rgba(245, 158, 11, 0.85))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
  animation: rungNheVeSoXo 1.3s ease-in-out infinite;
}

/* Modal Bảng Thống Kê Cuối Ngày — Thiết kế 1 màn hình tuyệt đối KHÔNG SCROLL */
.lop-phu-thong-ke-ngay {
  z-index: 380 !important;
  backdrop-filter: blur(3px);
}

#app .hop-modal.hop-modal-thong-ke-ngay {
  width: min(95vw, 426px) !important;
  height: auto !important;
  max-height: min(94dvh, 668px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 3px solid #b47b3c !important;
  background: linear-gradient(180deg, #321f13 0%, #1c1008 100%) !important;
  box-shadow:
    0 18px 44px rgba(12, 6, 2, 0.82),
    inset 0 1px 0 rgba(255, 238, 194, 0.25) !important;
}

.dau-modal.dau-modal-thong-ke-ngay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.22), transparent 68%),
    linear-gradient(180deg, #432310 0%, #271307 100%);
  border-bottom: 2px solid #b47b3c;
  flex-shrink: 0;
}

.cum-tieu-de-thong-ke-ngay {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.khung-icon-dau-thong-ke {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: radial-gradient(circle, #fef3c7 0%, #f59e0b 100%);
  border: 1.5px solid #fde047;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.khoi-chu-dau-thong-ke {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  min-width: 0;
}

.hang-ten-dau-thong-ke {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tieu-de-chinh-thong-ke {
  font-family: var(--font-pixel);
  font-size: 13.5px;
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.3px;
  text-shadow: 0 1.5px 0 #140802;
}

.badge-trang-thai-thong-ke {
  font-size: 9.2px;
  font-weight: 900;
  padding: 1.5px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-trang-thai-thong-ke.badge-chot-so {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fef08a;
  border: 1px solid #fde047;
}

.badge-trang-thai-thong-ke.badge-tam-tinh {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  color: #e0f2fe;
  border: 1px solid #7dd3fc;
}

.phu-de-dau-thong-ke {
  font-size: 9.8px;
  font-weight: 700;
  color: #f3d59b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thân Bảng Thống Kê: Không bao giờ cuộn dọc */
.than-modal-thong-ke-khong-scroll {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 8px;
  background: linear-gradient(180deg, #fffcf2 0%, #f4e4c6 100%);
  overflow: hidden !important;
  flex: 1 1 auto;
}

/* 1. Hero Banner: Lãi Ròng + Quỹ Tiệm + Chuỗi Ngày Lãi + Con Dấu Mộc Đỏ */
.khung-hero-thong-ke-ngay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2d180b 0%, #1c0e06 100%);
  border: 2px solid #d97706;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.22);
  flex-shrink: 0;
}

.khung-hero-thong-ke-ngay.hero-co-lai {
  border-color: #16a34a;
  background:
    radial-gradient(circle at 12% 20%, rgba(34, 197, 94, 0.22), transparent 55%),
    linear-gradient(135deg, #26160b 0%, #160c05 100%);
}

.cot-trai-hero-thong-ke {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nhan-nho-hero-thong-ke {
  font-size: 9.5px;
  font-weight: 900;
  color: #fde68a;
  letter-spacing: 0.3px;
}

.so-tien-lai-rong-hero {
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 0 #090401;
}

.so-tien-lai-rong-hero.so-duong {
  color: #4ade80;
}

.so-tien-lai-rong-hero.so-am {
  color: #fb923c;
}

.day-chip-phu-hero-thong-ke {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.chip-phu-hero {
  font-size: 9.3px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.chip-phu-hero.chip-quy-tien {
  background: rgba(254, 240, 138, 0.16);
  color: #fef08a;
  border: 1px solid rgba(251, 191, 36, 0.55);
}

.chip-phu-hero.chip-chuoi-lai {
  background: rgba(234, 88, 12, 0.28);
  color: #ffedd5;
  border: 1px solid #fb923c;
}

/* Con Dấu Mộc Đỏ Bà Hoàng */
.con-dau-ket-toan-ngay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px 8px;
  border-radius: 8px;
  border: 2px dashed #fde047;
  transform: rotate(-3deg);
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

.con-dau-ket-toan-ngay.moc-vang {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  border-color: #fde047;
  color: #fef08a;
}

.con-dau-ket-toan-ngay.moc-xanh {
  background: linear-gradient(180deg, #15803d 0%, #14532d 100%);
  border-color: #86efac;
  color: #fef08a;
}

.con-dau-ket-toan-ngay.moc-kha {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  border-color: #fde68a;
  color: #fffbeb;
}

.con-dau-ket-toan-ngay.moc-cam {
  background: linear-gradient(180deg, #7c2d12 0%, #431407 100%);
  border-color: #fdba74;
  color: #ffedd5;
}

.chu-chinh-con-dau {
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.2px;
}

.chu-phu-con-dau {
  font-size: 8.5px;
  font-weight: 700;
  opacity: 0.92;
  margin-top: 1px;
}

/* 2. Lưới 2x2 Chi Tiết Tiền Bạc */
.luoi-4-o-tien-thong-ke {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  flex-shrink: 0;
}

.o-tien-thong-ke {
  background: #fffdf7;
  border: 1.5px solid #c89d66;
  border-bottom: 2.5px solid #9c6b34;
  border-radius: 9px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dau-o-tien-thong-ke {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-o-tien {
  font-size: 11px;
  line-height: 1;
}

.nhan-o-tien {
  font-size: 9.8px;
  font-weight: 800;
  color: #5c3a1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gia-tri-o-tien {
  font-family: var(--font-pixel);
  font-size: 12.2px;
  font-weight: 900;
  line-height: 1.15;
}

.gia-tri-o-tien.chu-xanh-la {
  color: #15803d;
}

.gia-tri-o-tien.chu-vang-dam {
  color: #b45309;
}

.gia-tri-o-tien.chu-do-cam {
  color: #c2410c;
}

.phu-o-tien {
  font-size: 8.8px;
  font-weight: 700;
  color: #785536;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. Dải Sao Uy Tín, Khách & Tiến Độ Cấp Tiệm */
.khung-sao-uy-tin-thong-ke {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #d97706;
  border-radius: 9px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.hang-tren-sao-thong-ke,
.hang-duoi-sao-thong-ke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.cum-sao-hien-tai-thong-ke {
  display: flex;
  align-items: center;
  gap: 5px;
}

.so-sao-lon-thong-ke {
  font-family: var(--font-pixel);
  font-size: 11.8px;
  font-weight: 900;
  color: #92400e;
}

.badge-sao-bien-doi {
  font-size: 9.2px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
}

.badge-sao-bien-doi.sao-tang {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #4ade80;
}

.badge-sao-bien-doi.sao-giam {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #f87171;
}

.badge-sao-bien-doi.sao-giu-nguyen {
  background: #f5f5f4;
  color: #57534e;
  border: 1px solid #d6d3d1;
}

.badge-khach-thong-ke {
  font-size: 9.5px;
  font-weight: 800;
  color: #451a03;
}

.nhan-danh-tieng-thong-ke {
  font-size: 9.8px;
  font-weight: 900;
  color: #78350f;
}

.nhan-tien-do-cap-thong-ke {
  font-size: 9.3px;
  font-weight: 800;
  color: #15803d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4. Lưới 2 Cột: Sự Kiện Trong Ngày & Xổ Số 3 Số */
.luoi-2-cot-su-kien-ve-so {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 5px;
  flex-shrink: 0;
}

.hop-nho-thong-ke {
  background: #fffdf8;
  border: 1.5px solid #c89d66;
  border-radius: 9px;
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}

.dau-hop-nho-thong-ke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.dau-hop-nho-thong-ke strong {
  font-size: 10px;
  font-weight: 900;
  color: #451a03;
  white-space: nowrap;
}

.dem-su-kien-nho,
.badge-kq-xo-so-nho {
  font-size: 8.6px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  white-space: nowrap;
}

.badge-kq-xo-so-nho {
  background: #fee2e2;
  color: #991b1b;
  border-color: #ef4444;
}

.danh-sach-chip-su-kien-ngay {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dong-chip-su-kien-ngay {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #f5efe4;
  font-size: 9px;
  font-weight: 800;
  color: #3b1d0a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dong-chip-su-kien-ngay.loai-tot {
  background: #dcfce7;
  color: #14532d;
}

.dong-chip-su-kien-ngay.loai-xau {
  background: #fee2e2;
  color: #7f1d1d;
}

.chu-chip-sk {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mo-ta-ve-so-thong-ke {
  margin: 0;
  font-size: 9px;
  line-height: 1.25;
  font-weight: 700;
  color: #5c3a1e;
}

.nut-mo-ve-so-trong-thong-ke {
  width: 100%;
  padding: 4.5px 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  border: 1.5px solid #7f1d1d;
  border-bottom: 2.5px solid #450a0a;
  color: #fef08a;
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
}

.nut-mo-ve-so-trong-thong-ke.nut-ve-so-nhap-nhay {
  background: linear-gradient(180deg, #fde047 0%, #ea580c 100%);
  color: #450a0a;
  border-color: #7f1d1d;
}

/* 5. Thanh Dự Báo Hẻm Ngày Mai & Điểm Danh Kho Sắp Hết */
.thanh-du-bao-ngay-mai-thong-ke {
  background: linear-gradient(180deg, #2d1a0e 0%, #1f1108 100%);
  border: 1.5px solid #b45309;
  border-radius: 9px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fef3c7;
  flex-shrink: 0;
}

.dong-du-bao-thoi-tiet-mai {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nhan-loa-du-bao {
  color: #fbbf24;
  font-weight: 800;
  flex-shrink: 0;
}

.ten-su-kien-du-bao-mai {
  color: #fef08a;
  font-weight: 900;
  flex-shrink: 0;
}

.goi-y-du-bao-mai {
  color: #fed7aa;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dong-diem-danh-kho-sap-het {
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chu-kho-sap-het.co-canh-bao {
  color: #fca5a5;
}

.chu-kho-sap-het.kho-on-dinh {
  color: #86efac;
}

/* 6. Chân Modal: Ô Checkbox "Không tự hiện cho ngày sau" + 2 Nút Hành Động */
.chan-modal-thong-ke-ngay {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 9px;
  background: #27150a;
  border-top: 2px solid #9c6b34;
  flex-shrink: 0;
}

.dong-checkbox-khong-hien-ngay-sau {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.45);
  cursor: pointer;
  user-select: none;
}

.dong-checkbox-khong-hien-ngay-sau.dang-tick {
  background: rgba(22, 163, 74, 0.18);
  border-color: #4ade80;
}

.o-input-checkbox-thong-ke {
  display: none;
}

.o-vuong-tick-thong-ke {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #fbbf24;
  background: #1c0f07;
  color: #fef08a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

.dong-checkbox-khong-hien-ngay-sau.dang-tick .o-vuong-tick-thong-ke {
  background: #16a34a;
  border-color: #bbf7d0;
  color: #ffffff;
}

.khoi-chu-checkbox-thong-ke {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.khoi-chu-checkbox-thong-ke strong {
  font-size: 10.2px;
  font-weight: 900;
  color: #fef08a;
  line-height: 1.2;
}

.khoi-chu-checkbox-thong-ke small {
  font-size: 8.6px;
  font-weight: 700;
  color: #fed7aa;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hang-nut-chan-thong-ke-ngay {
  display: grid;
  grid-template-columns: 0.92fr 1.18fr;
  gap: 7px;
}

.nut-phu-chan-thong-ke,
.nut-mo-cai-dat-tu-thong-ke {
  padding: 8px 8px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  border: 1.5px solid #92400e;
  border-bottom: 3px solid #78350f;
  color: #3b1d0a;
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
}

.nut-chinh-sang-ngay-moi-thong-ke {
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border: 1.5px solid #bbf7d0;
  border-bottom: 3.5px solid #052e16;
  color: #ffffff;
  font-family: var(--font-pixel);
  font-size: 11.2px;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 1px 0 #052e16;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.38);
}

.nut-chinh-sang-ngay-moi-thong-ke:active,
.nut-phu-chan-thong-ke:active {
  transform: translateY(1.5px);
}

/* Thanh đáy màn hình Chốt Sổ 3 nút: Sổ Kết Toán + Vé Số + Sang Ngày Mới */
.thanh-day-vung-do.thanh-day-chot-so-2-nut {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.nut-phu-mo-thong-ke-chot-so,
.nut-phu-mo-ve-so-chot-so {
  padding: 0 10px;
  border-radius: 10px;
  border: 2px solid #92400e;
  border-bottom: 3.5px solid #451a03;
  background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 100%);
  color: #2b1406;
  font-family: var(--font-pixel);
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nut-phu-mo-ve-so-chot-so {
  background: linear-gradient(180deg, #fee2e2 0%, #f87171 100%);
  border-color: #991b1b;
  border-bottom-color: #450a0a;
  color: #450a0a;
}

/* Badge thưởng Set Đồ Đồng Bộ (Combo Bonus) dưới Gương Soi Shop Thời Trang */
.badge-set-dong-bo-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 9.8px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.badge-set-dong-bo-shop.chua-kich-hoat {
  background: rgba(120, 53, 15, 0.08);
  border: 1px dashed rgba(180, 83, 9, 0.45);
  color: #78350f;
}

.badge-set-dong-bo-shop.dang-kich-hoat {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #d97706;
  color: #78350f;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.22);
}

.badge-set-dong-bo-shop.dang-kich-hoat.cap-set-3 {
  background: linear-gradient(135deg, #fae8ff 0%, #f5d0fe 50%, #fde68a 100%);
  border-color: #a855f7;
  color: #581c87;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.28);
}

.badge-set-dong-bo-shop.dang-kich-hoat.cap-set-4 {
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 55%, #fbbf24 100%);
  border-color: #b45309;
  color: #451a03;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.42);
}