/* ================= STYLESHEET ĐỘC LẬP CHO MODULE NGOẠI CẢNH & CLICK-TO-BUY (ngoai-canh.css) ================= */
/* Tách riêng 100% khỏi styles.css để dễ dàng cập nhật độc lập */

: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;
  --nc-bg-dark: #1f140e;
  --nc-bg-panel: #2d1d14;
  --nc-border-gold: #e6b85c;
  --nc-glow-gold: #ffe669;
  --nc-text-cream: #fff6e5;
  --nc-accent-red: #c93b2b;
  --nc-accent-green: #2e8b57;
}

* {
  box-sizing: border-box;
  font-family: var(--font-body);
}

body.nc-body-doc-lap {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  background: #18110c;
  color: var(--nc-text-cream);
  font-family: var(--font-body);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ung-dung-ngoai-canh {
  width: 390px;
  max-width: 390px !important;
  height: 740px;
  max-height: 740px !important;
  min-height: 0 !important;
  margin: auto !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  background: #2b1d14;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.85);
}

.nc-modal-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #2b1d14;
  color: var(--nc-text-cream);
  font-family: var(--font-body);
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Nút tích hợp trên khung cửa đường hẻm của Game Chính (index.html) */

.diem-bam-ra-ngoai-pho {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 12;
  background: linear-gradient(180deg, #fde047 0%, #d97706 100%);
  color: #2b1d14;
  border: 2px solid #2b1d14;
  border-radius: 999px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 0 #2b1d14, 0 0 10px rgba(253, 224, 71, 0.75);
  pointer-events: auto;
  transition: transform 0.15s ease;
}

.diem-bam-ra-ngoai-pho:hover {
  transform: scale(1.06);
}

/* ================= BỐ CỤC 3 VÙNG ĐỒNG BỘ 100% VỚI MÀN HÌNH BÁN HÀNG TRONG QUÁN (390 × 740) ================= */
.nc-man-hinh-3-vung {
  width: 390px;
  max-width: 390px !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 100%;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #2b1d14;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.85);
}

.nc-khung-nen-xanh-vang {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #2b1a10;
  border-bottom: 2px solid #2b1d14;
}

/* 1. VÙNG XANH DƯƠNG TRÊN CÙNG (Thanh Top HUD 1 hàng 45px đồng bộ 100% với HUD trong quầy) */
.nc-vung-xanh-duong {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  z-index: 26;
  padding: 3px 4px !important;
  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);
}

.nc-khung-bang-go-hud,
.nc-vung-xanh-duong .khung-bang-go-hud.hud-top-1-hang {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  padding: 4px 5px !important;
  border-radius: 9px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.18) 0%, transparent 75%),
    linear-gradient(180deg, #4f240d 0%, #2b1205 100%) !important;
  border: 1.5px solid #78350f !important;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.nc-vung-xanh-duong .thanh-dieu-huong-top-gon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.nc-vung-xanh-duong .thanh-dieu-huong-top-gon.nc-top-2-o {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.nc-vung-xanh-duong .thanh-dieu-huong-top-gon > .chi-so-item,
.nc-vung-xanh-duong .thanh-dieu-huong-top-gon > .nut-vung-xanh {
  width: 100%;
  min-width: 0;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  font-family: 'Be Vietnam Pro', 'Nunito', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.1px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.5px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box !important;
  cursor: pointer;
}

.nc-chi-so-ngay-cap {
  background: linear-gradient(180deg, #431d0a 0%, #271004 100%);
  border: 1px solid #b45309;
  color: #fde68a;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.2),
    0 1px 0 #0d0401;
}

.nc-chi-so-sao-lon {
  background: linear-gradient(180deg, #9a3412 0%, #5c1c07 100%);
  border: 1.5px solid #fbbf24;
  color: #fde047;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 #1f0a01;
}

.nc-gia-tri-sao-lon {
  color: #fde047;
  text-shadow: 0 1.5px 0 #451a03;
}

.nc-nut-vung-xanh {
  background: linear-gradient(180deg, #f5d08a 0%, #d99b43 58%, #b87924 100%);
  color: #2b1d14;
  border: 1.5px solid #3b1804;
  text-shadow: 0 1px 0 rgba(255, 250, 224, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.75),
    0 2px 0 #1c0c02;
}

.nc-nut-vung-xanh.dang-chon,
.nc-nut-vung-xanh.dang-o-cho-si {
  background: linear-gradient(180deg, #6ee7b7 0%, #059669 100%);
  color: #022c22;
  border-color: #fef08a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 8px rgba(52, 211, 153, 0.55);
}

.nc-icon-nho-hud {
  font-size: 11.5px;
  line-height: 1;
  flex-shrink: 0;
}

/* 2. VÙNG VÀNG Ở GIỮA: SÂN KHẤU VUÔNG 1:1 (390 × 390px) ĐỒNG BỘ TUYỆT ĐỐI VỚI TRONG QUÁN */
.nc-vung-vang-san-khau {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  background: #120a06;
}

.nc-khung-san-khau-16-9 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #120a06;
  user-select: none;
}

/* Mở rộng nhẹ trục ngang cho Scene 3 bên trong sân khấu vuông 390×390 để mặt tiền tiệm và cây cảnh cân đối tự nhiên mà vẫn khớp 100% tọa độ pixel */
.nc-khung-san-khau-16-9.san-khau-scene-3-c1 {
  width: 116%;
  left: -8%;
  height: 100%;
}

.nc-khung-san-khau-16-9.san-khau-scene-3-c7 {
  width: 112%;
  left: -6%;
  height: 100%;
}

.nc-anh-nen-chinh {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Bong bóng thông tin treo gọn sát đỉnh trên của Vùng Vàng (Giống .cum-bong-thoai-khach-tren trong quán) */
.nc-cum-bong-thoai-tren {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 374px;
  max-width: 96%;
  z-index: 16;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.nc-bong-thoai-tren {
  background: rgba(254, 243, 199, 0.96);
  color: #2b1d14;
  border: 2px solid #2b1d14;
  border-left: 5px solid #d97706;
  border-radius: 9px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.22;
  text-align: center;
  box-shadow: 0 2.5px 0 rgba(43, 29, 20, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.nc-layer-item {
  position: absolute;
  pointer-events: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}

/* Hiệu ứng Sáng Nhẹ Quanh Viền (Soft Contour Glow) cho món đồ vừa mua / đang chọn */
.nc-glow-vua-mua {
  filter: drop-shadow(0 0 7px #ffe669) drop-shadow(0 0 15px rgba(255, 224, 92, 0.92));
  animation: ncPulseGlow 2.2s infinite ease-in-out;
}

@keyframes ncPulseGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px #ffe669) drop-shadow(0 0 14px rgba(255, 224, 92, 0.85));
  }
  50% {
    filter: drop-shadow(0 0 11px #fff3a1) drop-shadow(0 0 22px rgba(255, 215, 64, 1));
  }
}

/* Các bộ lọc đổi màu Sơn Tường & Cửa Sắt Kéo (Đã dùng ảnh tách lớp chuẩn màu riêng cho từng loại sơn) */
.filter-son-xanh-mint,
.filter-son-vang-hoi-an,
.filter-son-hong-sai-gon,
img.bh-nen-do-tet {
  filter: none;
}

/* Các món đồ ngoại thất Click-to-Buy trực tiếp trên mặt tiền */
.nc-item-clickable {
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: block;
  transition: transform 0.18s ease, filter 0.22s ease, opacity 0.22s ease;
  z-index: 5;
}

.nc-item-clickable .nc-item-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* Khi món đồ CHƯA MUA: hiển thị bóng mờ gợi ý vị trí để người chơi biết có thể Click vào mua */
.nc-item-clickable.chua-mua-ghost {
  opacity: 0.42;
  filter: grayscale(0.65) brightness(1.15) drop-shadow(0 0 5px rgba(255, 255, 255, 0.65));
}

.nc-item-clickable.chua-mua-ghost:hover {
  opacity: 0.92;
  filter: drop-shadow(0 0 10px #76ff03) drop-shadow(0 0 18px rgba(118, 255, 3, 0.8));
  transform: scale(1.04);
  z-index: 20;
}

/* Khi món đồ ĐÃ MUA */
.nc-item-clickable.da-mua:hover {
  transform: scale(1.035);
  filter: drop-shadow(0 0 10px #ffe669) drop-shadow(0 0 20px rgba(255, 230, 105, 0.95));
  z-index: 20;
}

/* Nhãn nổi khi di chuột vào món đồ trên mặt tiền (Ẩn mặc định để không làm rối tranh) */
.nc-badge-item {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -2px);
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65);
  background: rgba(27, 94, 32, 0.95);
  color: #fff;
  border: 1.5px solid #b9f6ca;
}

.nc-item-clickable:hover .nc-badge-item {
  opacity: 1;
  transform: translate(-50%, -5px);
}

.nc-badge-item.badge-da-mua {
  background: rgba(59, 35, 20, 0.95);
  color: #ffe669;
  border: 1.5px solid #ffe669;
}

/* ================= TỌA ĐỘ CHÍNH XÁC 100% CHO CẤP 1 – 6 (1376x768) ================= */
.pos-c1-son-tuong {
  left: 27.8%;
  top: 0%;
  width: 44.6%;
  height: 81.5%;
  z-index: 2;
}

.pos-c1-hoa-giay {
  left: 24.0%;
  top: 0%;
  width: 20.0%;
  height: 14.5%;
  z-index: 7;
}

.pos-c1-mai-hien {
  left: 26.0%;
  top: 3.5%;
  width: 48.2%;
  height: 8.0%;
  z-index: 6;
}

.pos-c1-den-long {
  left: 24.5%;
  top: 9.5%;
  width: 51.0%;
  height: 20.0%;
  z-index: 5;
}

.pos-c1-bang-hieu-led {
  left: 30.5%;
  top: 9.5%;
  width: 39.0%;
  height: 13.0%;
  z-index: 4;
}

.pos-c1-bang-hieu-xanh-3d {
  left: 29.8%;
  top: 9.2%;
  width: 40.4%;
  height: 17.6%;
  z-index: 4;
}

.pos-c1-cau-vang {
  left: 12.5%;
  top: 68.5%;
  width: 12.0%;
  height: 19.5%;
  z-index: 9;
}

.pos-c1-cay-tac {
  left: 22.0%;
  top: 51.0%;
  width: 10.2%;
  height: 35.5%;
  z-index: 8;
}

.pos-c1-binh-tra-da {
  left: 30.2%;
  top: 64.0%;
  width: 7.3%;
  height: 23.0%;
  z-index: 9;
}

.pos-c1-meo-muop {
  left: 54.5%;
  top: 76.5%;
  width: 8.7%;
  height: 11.3%;
  z-index: 9;
}

.pos-c1-bang-phan {
  left: 62.5%;
  top: 72.0%;
  width: 7.3%;
  height: 16.8%;
  z-index: 9;
}

.pos-c1-cay-phat-tai {
  left: 67.8%;
  top: 56.0%;
  width: 8.2%;
  height: 30.0%;
  z-index: 8;
}

.pos-c1-dai-radio {
  left: 71.8%;
  top: 79.5%;
  width: 6.7%;
  height: 9.3%;
  z-index: 10;
}

/* ================= TỌA ĐỘ CHÍNH XÁC 100% CHO CẤP 7+ MỞ RỘNG (1376x768) ================= */
.pos-c7-hoa-giay {
  left: 22.0%;
  top: 0%;
  width: 20.0%;
  height: 14.5%;
  z-index: 7;
}

.pos-c7-mai-hien {
  left: 22.2%;
  top: 4.2%;
  width: 58.4%;
  height: 10.3%;
  z-index: 6;
}

.pos-c7-den-long {
  left: 22.0%;
  top: 13.0%;
  width: 58.8%;
  height: 23.5%;
  z-index: 5;
}

.pos-c7-bang-hieu-led {
  left: 27.5%;
  top: 14.2%;
  width: 47.0%;
  height: 16.6%;
  z-index: 4;
}

.pos-c7-cau-vang {
  left: 10.8%;
  top: 68.0%;
  width: 12.0%;
  height: 19.5%;
  z-index: 9;
}

.pos-c7-cay-tac {
  left: 20.5%;
  top: 49.5%;
  width: 9.5%;
  height: 36.0%;
  z-index: 8;
}

.pos-c7-binh-tra-da {
  left: 28.2%;
  top: 63.5%;
  width: 8.3%;
  height: 22.3%;
  z-index: 9;
}

.pos-c7-dai-radio {
  left: 62.2%;
  top: 76.0%;
  width: 5.0%;
  height: 9.2%;
  z-index: 9;
}

.pos-c7-bang-phan {
  left: 66.5%;
  top: 69.2%;
  width: 6.7%;
  height: 17.3%;
  z-index: 9;
}

.pos-c7-cay-phat-tai {
  left: 72.0%;
  top: 54.5%;
  width: 7.8%;
  height: 29.0%;
  z-index: 8;
}

.pos-c7-meo-muop {
  left: 72.2%;
  top: 81.5%;
  width: 8.6%;
  height: 8.7%;
  z-index: 10;
}

/* Hotspot Bảng Hiệu, Sơn Cửa Sắt & Mở Rộng Quán Kế Bên */
.nc-hotspot-vung {
  position: absolute;
  background: transparent;
  border: 2px dashed transparent;
  border-radius: 8px;
  cursor: pointer;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: all 0.18s ease;
}

.nc-hotspot-vung:hover {
  border-color: var(--nc-glow-gold);
  background: rgba(255, 230, 105, 0.12);
}

.nc-nhan-hotspot {
  background: rgba(38, 22, 13, 0.92);
  color: var(--nc-glow-gold);
  border: 1.5px solid var(--nc-glow-gold);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.16s ease;
}

.nc-hotspot-vung:hover .nc-nhan-hotspot {
  opacity: 1;
  transform: translateY(4px);
}

.pos-hotspot-son-cua-trai {
  left: 28.0%;
  top: 28.0%;
  width: 5.2%;
  height: 24.0%;
}

/* Hotspot Mua Đứt Quán Kế Bên Phải (Gọn nhẹ, không che khuất tranh) */
.nc-hotspot-mo-rong-cap7 {
  position: absolute;
  background: transparent;
  border: 1.5px dashed rgba(255, 230, 105, 0.55);
  border-radius: 10px;
  cursor: pointer;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 4px;
  color: #fff;
  transition: all 0.18s ease;
}

.nc-hotspot-mo-rong-cap7:hover {
  background: rgba(255, 230, 105, 0.12);
  border-color: #ffe669;
  box-shadow: 0 0 14px rgba(255, 230, 105, 0.55);
}

.pos-hotspot-quan-ke-ben {
  left: 75.5%;
  top: 34.0%;
  width: 16.5%;
  height: 35.0%;
}

.nc-nhan-mo-rong-gon {
  background: linear-gradient(180deg, #991b1b 0%, #450a0a 100%);
  color: #fef08a;
  border: 1.5px solid #fde047;
  border-radius: 999px;
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

/* Chữ Bảng Hiệu Động Khi Người Chơi Tự Gõ & Đổi Font (Nằm gọn trong lòng bảng hiệu, không bao giờ bị xoay màu xanh neon) */
.nc-bang-hieu-chu-dong {
  position: absolute;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1a4b8c 0%, #0f2c59 100%);
  border: 2px solid #f4c430;
  border-radius: 5px;
  box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  padding: 2px 6px;
  filter: none !important;
}

.pos-c1-bang-hieu-chu {
  left: 31.2%;
  top: 10.0%;
  width: 37.6%;
  height: 11.4%;
}

.pos-c7-bang-hieu-chu {
  left: 28.8%;
  top: 15.0%;
  width: 44.4%;
  height: 14.2%;
}

.nc-bang-hieu-chu-dong.bh-nen-vang-co-dien,
.nc-bang-hieu-chu-dong.bh-nen-den-led {
  background: linear-gradient(180deg, #fceabb 0%, #f8b500 100%);
  border-color: #b71c1c;
}

.nc-bang-hieu-chu-dong.bh-nen-do-tet {
  background: linear-gradient(180deg, #9b111e 0%, #5e0810 100%);
  border-color: #ffd700;
}

.nc-chu-chinh-bang-hieu {
  font-family: var(--font-signboard, var(--font-pixel));
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #ffd700;
  text-shadow: 1.5px 1.5px 0 #7f0000, -1px -1px 0 #3e2723;
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.nc-bang-hieu-chu-dong.bh-nen-vang-co-dien .nc-chu-chinh-bang-hieu,
.nc-bang-hieu-chu-dong.bh-nen-den-led .nc-chu-chinh-bang-hieu {
  color: #b71c1c;
  text-shadow: 1.5px 1.5px 0 #fff8e1;
}

.nc-khau-hieu-phu-bang-hieu {
  margin-top: 1.5px;
  background: #b71c1c;
  color: #fff9c4;
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 800;
  padding: 0.5px 6px;
  border-radius: 999px;
  border: 1px solid #ffd54f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

:is(#app, #ung-dung-ngoai-canh, .nc-modal-overlay) .bh-font-co-dien .nc-chu-chinh-bang-hieu {
  font-family: 'Paytone One', var(--font-signboard, var(--font-pixel)) !important;
}

:is(#app, #ung-dung-ngoai-canh, .nc-modal-overlay) .bh-font-ke-thuoc .nc-chu-chinh-bang-hieu {
  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 #b91c1c, 2.5px 2.5px 0 #1e1b4b !important;
}

:is(#app, #ung-dung-ngoai-canh, .nc-modal-overlay) .bh-font-khoi-3d .nc-chu-chinh-bang-hieu {
  font-family: 'Bungee', 'Coiny', var(--font-signboard, var(--font-pixel)) !important;
  text-transform: uppercase;
  color: #fde047 !important;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #78350f, 3px 3px 0 #1c0d06 !important;
}

:is(#app, #ung-dung-ngoai-canh, .nc-modal-overlay) .bh-font-chan-xua .nc-chu-chinh-bang-hieu {
  font-family: 'Roboto Slab', Georgia, serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

:is(#app, #ung-dung-ngoai-canh, .nc-modal-overlay) .bh-font-khuon-to .nc-chu-chinh-bang-hieu {
  font-family: 'Saira Stencil One', 'Chakra Petch', sans-serif !important;
  letter-spacing: 1px !important;
  color: #fef3c7 !important;
  text-shadow: 2px 2px 0 #052e16 !important;
}

:is(#app, #ung-dung-ngoai-canh, .nc-modal-overlay) .bh-font-thu-phap .nc-chu-chinh-bang-hieu {
  font-family: 'Mali', cursive !important;
  font-style: italic !important;
  letter-spacing: 0.8px !important;
}

/* Cụm nút điều hướng thiết kế trực tiếp trên mặt đường nhựa: [⬅ 🛵 Chợ Sỉ] bên trái + [🏪 Vào Quầy] trước cửa tiệm */
.nc-cum-nut-day-san-khau {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 344px;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.nc-cum-nut-day-san-khau.nc-mot-nut-ve-quan {
  justify-content: flex-end;
}

.nc-nut-goc-san-khau {
  position: absolute;
  bottom: 7px;
  z-index: 17;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 55%, #d97706 100%);
  color: #2b1d14;
  border: 2.2px solid #2b1d14;
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.78),
    0 3px 0 #1c1008,
    0 5px 10px rgba(0, 0, 0, 0.55);
  transition: transform 0.14s ease, filter 0.14s ease;
}

/* Nút [🏪 Vào Quầy ▴] thiết kế dạng bảng gỗ/đồng nổi bật ngay trước cửa tiệm (chính giữa bậc thềm lối vào Tạp Hóa Bà Hoàng) */
.nc-nut-goc-san-khau.nc-nut-vao-quay-truoc-cua {
  position: absolute;
  left: 0;
  right: 3%;
  width: max-content;
  margin-inline: auto;
  bottom: 16.2%;
  transform: none;
  z-index: 25;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffbeb 0%, #fde047 36%, #f59e0b 84%, #d97706 100%);
  color: #3b1106;
  border: 2.2px solid #2b1d14;
  font-size: 11.2px;
  font-weight: 900;
  letter-spacing: 0.15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 1.5px rgba(185, 28, 28, 0.65),
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    0 3px 0 #1c0d06,
    0 5px 12px rgba(0, 0, 0, 0.62),
    0 0 14px rgba(253, 224, 71, 0.48);
  animation: ncNhipMoiVaoQuayTruocCua 2.2s ease-in-out infinite;
}

.nc-nut-goc-san-khau.nc-nut-vao-quay-truoc-cua .nc-icon-cua-vao-quay {
  font-size: 12.5px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.nc-nut-goc-san-khau.nc-nut-vao-quay-truoc-cua .nc-mui-ten-vao-cua {
  font-size: 10.5px;
  line-height: 1;
  color: #991b1b;
  font-weight: 900;
}

.nc-nut-goc-san-khau.nc-nut-vao-quay-truoc-cua:hover {
  transform: translateY(-1.5px) scale(1.05);
  filter: brightness(1.06);
  animation-play-state: paused;
}

.nc-nut-goc-san-khau.nc-nut-vao-quay-truoc-cua:active {
  transform: translateY(1px) scale(0.96);
}

@keyframes ncNhipMoiVaoQuayTruocCua {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.nc-mui-ten-duong {
  font-size: 12px;
  line-height: 1;
  color: #fef08a;
  text-shadow: 0 1px 0 #022c22;
}

.nc-cum-nut-day-san-khau .nc-nut-goc-san-khau {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  transform: none;
}

.nc-cum-nut-day-san-khau .nc-nut-cho-si-day {
  background: linear-gradient(180deg, #34d399 0%, #10b981 52%, #047857 100%);
  color: #fffbeb;
  border: 2.2px solid #064e3b;
  text-shadow: 0 1px 1px rgba(2, 44, 34, 0.9);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.58),
    0 3px 0 #022c22,
    0 5px 10px rgba(0, 0, 0, 0.55);
}

.nc-cum-nut-day-san-khau .nc-nut-goc-san-khau:hover {
  transform: translateY(-1.5px) scale(1.04);
  filter: brightness(1.06);
}

.nc-cum-nut-day-san-khau .nc-nut-goc-san-khau:active {
  transform: translateY(1px) scale(0.96);
}

/* ================= HỆ THỐNG NGƯỜI ĐI BỘ & XE MÁY QUA LẠI NGOÀI MẶT TIỀN (SCENE 3) =================
   - Đi qua lại tự nhiên trên vỉa hè & lòng đường nhựa.
   - Tự động lách tránh (hạ thấp xuống mép bó vỉa) khi đi ngang qua các item ngoại thất đã mua
     (Bình trà đá, Cậu Vàng, Cây tắc, Mèo mướp, Bảng phấn, Cây phát tài, Đài radio).
   - pointer-events: none tuyệt đối để không bao giờ cản trở thao tác bấm vào item trên mặt tiền. */
.nc-lop-nguoi-di-duong {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  overflow: hidden;
  z-index: 14;
}

.nc-nguoi-di-bo {
  position: absolute;
  left: 0;
  pointer-events: none !important;
  will-change: transform;
}

.nc-nguoi-di-bo .khung-buoc-di-6-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nc-kt-npc, 154px) !important;
  height: var(--nc-kt-npc, 154px) !important;
  aspect-ratio: 1 / 1;
  --chu-ky-buoc: 1.22s;
}

.nc-nguoi-di-bo .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;
}

.nc-nguoi-di-bo .khung-buoc-di-6-frame.toc-do-xe-may::before {
  width: 74%;
  height: 14%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nc-nguoi-di-bo .anh-sprite-svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Kích thước từng NPC ngoài phố được gán chính xác qua biến --nc-kt-npc (1:1 không méo tỉ lệ, cao tương xứng cửa tiệm & cửa nhà hàng xóm) */
.nc-nguoi-di-bo .nc-kt-nguoi-lon {
  width: var(--nc-kt-npc, 154px);
  height: var(--nc-kt-npc, 154px);
}

.nc-nguoi-di-bo .nc-kt-nguoi-lon-xa {
  width: var(--nc-kt-npc, 158px);
  height: var(--nc-kt-npc, 158px);
}

.nc-nguoi-di-bo .nc-kt-tre-em {
  width: var(--nc-kt-npc, 128px);
  height: var(--nc-kt-npc, 128px);
}

.nc-nguoi-di-bo .nc-kt-xe-may {
  width: var(--nc-kt-npc, 132px);
  height: var(--nc-kt-npc, 132px);
}

/* ==========================================================================================
   ĐỒNG BỘ 100% VỊ TRÍ & TỐC ĐỘ THỜI GIAN THỰC (TRONG QUẦY <-> NGOÀI PHỐ)
   - Giữ nguyên 100% duration (22s..34s) và delay của Trong Quầy (styles.css).
   - Trong Quầy (styles.css): khung cửa rộng ~98px, NPC đi qua cửa trong đoạn 0%..38% chu kỳ
     (qua tâm cửa lúc 19%) với vận tốc ~18px/s (~5.5px mỗi 1% chu kỳ).
   - Ngoài Phố (ngoai-canh.css):
     * Đoạn 0%..38% chu kỳ: NPC đi ngang đúng vùng cửa tiệm (x = 63px <-> 273px, qua tâm cửa x = 168px lúc 19%)
       với CÙNG VẬN TỐC ~18px/s và vị trí đảo ngược 180° khớp từng mili-giây với Trong Quầy!
     * Đoạn 38%..68% chu kỳ: NPC tiếp tục bước đi với cùng vận tốc ~18px/s qua tiệm hàng xóm ra mép màn hình.
     * Đoạn 74%..100% chu kỳ: NPC xuất hiện từ mép màn hình bên kia, đi ngang tiệm hàng xóm với cùng vận tốc
       ~18px/s để đúng 100% (= 0%) vừa chạm mép cửa tiệm (63px / 273px) mượt liền mạch không giật!
   ========================================================================================== */

/* 1. Làn xe máy dưới lòng đường nhựa (khớp 100% .hem-track-xe-may-phai: 48s, delay -1.0s) */
.nc-nguoi-di-bo.hem-track-xe-may-phai,
.nc-nguoi-di-bo.hem-track-xa-phai-1 {
  bottom: 1.2%;
  z-index: 16;
  animation: ncDiXeMaySangTrai 48s linear infinite;
  animation-delay: -1.0s;
}

/* 2. Làn đi bộ mép đường nhựa phía ngoài (khớp 100% duration & delay với Trong Quầy, giãn cách đều 3s để chỉ có 2-3 người trên phố cùng lúc) */
.nc-nguoi-di-bo.hem-track-xa-trai-1 {
  bottom: 3.2%;
  z-index: 15;
  animation: ncDiBoXaSangPhai 60s linear infinite;
  animation-delay: -4.0s;
}

.nc-nguoi-di-bo.hem-track-xa-phai-2 {
  bottom: 3.6%;
  z-index: 15;
  animation: ncDiBoXaSangTrai 64s linear infinite;
  animation-delay: -10.0s;
}

.nc-nguoi-di-bo.hem-track-xa-trai-2 {
  bottom: 3.0%;
  z-index: 15;
  animation: ncDiBoXaSangPhai 62s linear infinite;
  animation-delay: -16.0s;
}

.nc-nguoi-di-bo.hem-track-xa-phai-3 {
  bottom: 3.4%;
  z-index: 15;
  animation: ncDiBoXaSangTrai 56s linear infinite;
  animation-delay: -22.0s;
}

.nc-nguoi-di-bo.hem-track-xa-trai-3 {
  bottom: 3.5%;
  z-index: 15;
  animation: ncDiBoXaSangPhai 66s linear infinite;
  animation-delay: -28.0s;
}

.nc-nguoi-di-bo.hem-track-xa-phai-4 {
  bottom: 2.9%;
  z-index: 15;
  animation: ncDiBoXaSangTrai 62s linear infinite;
  animation-delay: -34.0s;
}

.nc-nguoi-di-bo.hem-track-xa-trai-4 {
  bottom: 3.3%;
  z-index: 15;
  animation: ncDiBoXaSangPhai 64s linear infinite;
  animation-delay: -40.0s;
}

.nc-nguoi-di-bo.hem-track-xa-phai-5 {
  bottom: 3.7%;
  z-index: 15;
  animation: ncDiBoXaSangTrai 58s linear infinite;
  animation-delay: -46.0s;
}

/* 3. Làn đi bộ trên vỉa hè sát trước cửa tiệm (khớp 100% duration & delay với Trong Quầy) */
.nc-nguoi-di-bo.hem-track-gan-phai-1 {
  bottom: 7.4%;
  z-index: 13;
  animation: ncDiBoGanSangTrai 58s linear infinite;
  animation-delay: -7.0s;
}

.nc-nguoi-di-bo.hem-track-gan-trai-1 {
  bottom: 7.0%;
  z-index: 14;
  animation: ncDiBoGanSangPhai 54s linear infinite;
  animation-delay: -13.0s;
}

.nc-nguoi-di-bo.hem-track-gan-phai-2 {
  bottom: 7.7%;
  z-index: 13;
  animation: ncDiBoGanSangTrai 66s linear infinite;
  animation-delay: -19.0s;
}

.nc-nguoi-di-bo.hem-track-gan-trai-2 {
  bottom: 7.2%;
  z-index: 14;
  animation: ncDiBoGanSangPhai 60s linear infinite;
  animation-delay: -25.0s;
}

.nc-nguoi-di-bo.hem-track-gan-phai-3 {
  bottom: 7.5%;
  z-index: 13;
  animation: ncDiBoGanSangTrai 64s linear infinite;
  animation-delay: -31.0s;
}

.nc-nguoi-di-bo.hem-track-gan-trai-3 {
  bottom: 7.1%;
  z-index: 14;
  animation: ncDiBoGanSangPhai 56s linear infinite;
  animation-delay: -37.0s;
}

.nc-nguoi-di-bo.hem-track-gan-phai-4 {
  bottom: 7.6%;
  z-index: 13;
  animation: ncDiBoGanSangTrai 68s linear infinite;
  animation-delay: -43.0s;
}

.nc-nguoi-di-bo.hem-track-gan-trai-4 {
  bottom: 6.8%;
  z-index: 14;
  animation: ncDiBoGanSangPhai 56s linear infinite;
  animation-delay: -49.0s;
}

.nc-nguoi-di-bo.hem-track-gan-phai-5 {
  bottom: 7.3%;
  z-index: 13;
  animation: ncDiBoGanSangTrai 60s linear infinite;
  animation-delay: -52.0s;
}

.nc-nguoi-di-bo.hem-track-gan-trai-5 {
  bottom: 7.5%;
  z-index: 13;
  animation: ncDiBoGanSangPhai 64s linear infinite;
  animation-delay: -55.0s;
}

.nc-nguoi-di-bo.hem-track-gan-phai-6 {
  bottom: 7.6%;
  z-index: 13;
  animation: ncDiBoGanSangTrai 66s linear infinite;
  animation-delay: -58.0s;
}

.nc-nguoi-di-bo.hem-track-gan-trai-6 {
  bottom: 6.9%;
  z-index: 14;
  animation: ncDiBoGanSangPhai 58s linear infinite;
  animation-delay: -3.0s;
}

/* Khi ĐÃ MUA item bên trái (Cậu Vàng, Cây Tắc, Bình Trà Đá) hoặc bên phải (Mèo Mướp, Bảng Phấn, Cây Phát Tài, Đài Radio):
   Người đi bộ trên vỉa hè tự động lách nhẹ xuống mép bó vỉa tại vùng có item để không bao giờ giẫm lên hay che khuất item! */
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-phai-1,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-phai-2,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-phai-3,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-phai-4,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-phai-5,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-phai-6,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-phai-1,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-phai-2,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-phai-3,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-phai-4,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-phai-5,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-phai-6,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-phai-1,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-phai-2,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-phai-3,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-phai-4,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-phai-5,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-phai-6 {
  animation-name: ncDiBoGanSangTraiNeItem;
}

.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-trai-1,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-trai-2,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-trai-3,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-trai-4,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-trai-5,
.nc-tranh-vat-can-trai .nc-nguoi-di-bo.hem-track-gan-trai-6,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-trai-1,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-trai-2,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-trai-3,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-trai-4,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-trai-5,
.nc-tranh-vat-can-phai .nc-nguoi-di-bo.hem-track-gan-trai-6,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-trai-1,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-trai-2,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-trai-3,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-trai-4,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-trai-5,
.nc-tranh-ca-hai-ben .nc-nguoi-di-bo.hem-track-gan-trai-6 {
  animation-name: ncDiBoGanSangPhaiNeItem;
}

/* Quỹ đạo 1 chiều mượt mà (0% ngoài rìa -> 9% tâm cửa 140px -> 18% ngoài rìa bên kia -> 19%..100% đứng yên ngoài màn hình):
   Không bao giờ có hiện tượng tele hay trượt ngược trên màn hình! */
@keyframes ncDiBoGanSangTrai {
  0% {
    transform: translate(490px, 2px) scaleX(-1);
    opacity: 1;
  }
  9% {
    transform: translate(140px, 0px) scaleX(-1);
  }
  18% {
    transform: translate(-195px, 2px) scaleX(-1);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(-195px, 2px) scaleX(-1);
    opacity: 0;
  }
}

@keyframes ncDiBoGanSangPhai {
  0% {
    transform: translate(-195px, 2px);
    opacity: 1;
  }
  9% {
    transform: translate(140px, 0px);
  }
  18% {
    transform: translate(490px, 2px);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(490px, 2px);
    opacity: 0;
  }
}

@keyframes ncDiBoGanSangTraiNeItem {
  0% {
    transform: translate(490px, 3px) scaleX(-1);
    opacity: 1;
  }
  4% {
    transform: translate(330px, 9px) scaleX(-1);
  }
  7% {
    transform: translate(215px, 8px) scaleX(-1);
  }
  9% {
    transform: translate(140px, 1px) scaleX(-1);
  }
  11% {
    transform: translate(65px, 8px) scaleX(-1);
  }
  15% {
    transform: translate(-80px, 9px) scaleX(-1);
  }
  18% {
    transform: translate(-195px, 3px) scaleX(-1);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(-195px, 3px) scaleX(-1);
    opacity: 0;
  }
}

@keyframes ncDiBoGanSangPhaiNeItem {
  0% {
    transform: translate(-195px, 3px);
    opacity: 1;
  }
  4% {
    transform: translate(-45px, 9px);
  }
  7% {
    transform: translate(65px, 8px);
  }
  9% {
    transform: translate(140px, 1px);
  }
  11% {
    transform: translate(215px, 8px);
  }
  15% {
    transform: translate(365px, 9px);
  }
  18% {
    transform: translate(490px, 3px);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(490px, 3px);
    opacity: 0;
  }
}

@keyframes ncDiBoXaSangTrai {
  0% {
    transform: translate(490px, 0px) scaleX(-1);
    opacity: 1;
  }
  9% {
    transform: translate(140px, 0px) scaleX(-1);
  }
  18% {
    transform: translate(-195px, 0px) scaleX(-1);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(-195px, 0px) scaleX(-1);
    opacity: 0;
  }
}

@keyframes ncDiBoXaSangPhai {
  0% {
    transform: translate(-195px, 0px);
    opacity: 1;
  }
  9% {
    transform: translate(140px, 0px);
  }
  18% {
    transform: translate(490px, 0px);
    opacity: 1;
  }
  19%,
  100% {
    transform: translate(490px, 0px);
    opacity: 0;
  }
}

@keyframes ncDiXeMaySangTrai {
  0% {
    transform: translate(500px, 0px) scaleX(-1);
    opacity: 1;
  }
  7.5% {
    transform: translate(140px, 0px) scaleX(-1);
  }
  15% {
    transform: translate(-195px, 0px) scaleX(-1);
    opacity: 1;
  }
  16%,
  100% {
    transform: translate(-195px, 0px) scaleX(-1);
    opacity: 0;
  }
}

.nc-nut-goc-san-khau.goc-giua {
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  transform: none;
}

.nc-nut-goc-san-khau.goc-giua:hover {
  transform: scale(1.05);
}

.nc-nut-goc-san-khau.goc-giua:active {
  transform: scale(0.96);
}

.nc-nut-goc-san-khau.goc-trai {
  left: 7px;
}

.nc-nut-goc-san-khau.goc-phai {
  right: 7px;
}

/* Bù trừ vị trí nút góc khi Scene 3 mở rộng trục ngang 116% / 112% */
.san-khau-scene-3-c1 .nc-nut-goc-san-khau.goc-trai {
  left: calc(6.9% + 7px);
}

.san-khau-scene-3-c1 .nc-nut-goc-san-khau.goc-phai {
  right: calc(6.9% + 7px);
}

.san-khau-scene-3-c7 .nc-nut-goc-san-khau.goc-trai {
  left: calc(5.36% + 7px);
}

.san-khau-scene-3-c7 .nc-nut-goc-san-khau.goc-phai {
  right: calc(5.36% + 7px);
}

/* Đảm bảo khi mở Modal Shop / Cài đặt từ Mặt Tiền (#nc-modal-phu-doc-lap z-index 9999), Modal luôn nổi trên cùng */
#app .lop-phu-modal {
  z-index: 10020 !important;
}

#app .thong-bao-noi,
.nc-toast {
  z-index: 10050 !important;
}

/* Scene 4 Chợ Đầu Hẻm — Camera POV không bóp ngang & Hotspots khớp 1:1 */
.nc-san-khau-cho-dau-hem {
  position: relative;
  overflow: hidden;
  background-color: #1f1209 !important;
}

.nc-san-khau-cho-dau-hem .khung-camera-cho-si-pov {
  position: absolute;
  top: 0;
  left: -22%;
  width: 144%;
  height: 100%;
  transform-origin: 50% 54%;
  z-index: 2;
  will-change: transform;
}

.nc-san-khau-cho-dau-hem .lop-mai-hien-bang-hieu-cho-si {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18.6%;
  overflow: hidden;
  pointer-events: none;
  z-index: 15;
  border-bottom: 2px solid #2b1406;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 0%;
}

.nc-san-khau-cho-dau-hem .anh-mai-hien-cho-si {
  position: absolute;
  top: 0;
  left: -5%;
  width: 110%;
  height: 538%;
  object-fit: fill !important;
  image-rendering: pixelated;
  pointer-events: none;
  display: block;
}

.nc-hotspot-cho-si {
  position: absolute;
  z-index: 12;
  background: transparent;
  border: 1.5px dashed transparent;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 3px;
  transition: all 0.18s ease;
}

.nc-hotspot-cho-si:hover {
  background: rgba(253, 224, 71, 0.12);
  border-color: rgba(253, 224, 71, 0.85);
  box-shadow: inset 0 0 12px rgba(253, 224, 71, 0.25);
}

.nc-nhan-cho-si-gon {
  background: linear-gradient(180deg, #15803d 0%, #052e16 100%);
  color: #fef08a;
  border: 1.5px solid #86efac;
  border-radius: 999px;
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.nc-nhan-cho-si-gon.nhan-ong-chu {
  background: linear-gradient(180deg, #451a03 0%, #241004 100%);
  border-color: #fde047;
}

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

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

.pos-cho-si-ong-chu {
  left: 41.5%;
  top: 41.0%;
  width: 17.5%;
  height: 36.5%;
}

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

/* ================= 3. VÙNG ĐỎ DƯỚI ĐÁY: LẤP ĐẦY PHẦN CÒN LẠI (~305PX) ĐỒNG BỘ 100% VỚI TRONG QUÁN =================
   - Hàng 1 (88px): Khung Cháu Gái Bà Hoàng & Hệ Thống + Hiệu Ứng (52px) + [⭐ Shop | $ Tiền mặt] (32px)
   - Hàng 2 (36px): Thanh 4 Nhóm Kệ Mặt Tiền (🪴 Ngoại Thất • 🎨 Sơn & Bạt • 🪧 Bảng Hiệu • ✨ Hệ Thống Buff)
   - Hàng 3 (1fr):  Lưới 5 cột Thẻ Đồ Trang Trí Cao Cấp có gắn nhãn + Hiệu Ứng */
.nc-vung-do-goi-hang {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 88px 36px minmax(0, 1fr);
  align-content: stretch;
  gap: 5px;
  flex: 1 1 0;
  height: auto;
  min-height: 270px;
  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: 2px solid #d97706;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.28);
  padding: 4px 5px 5px;
  overflow: hidden;
}

/* Hàng 1 Vùng Đỏ (88px): Khung Cháu Gái Bà Hoàng & Tổng Hợp Buff (52px) + Thanh [⭐ Shop | $ Tiền] (32px) */
.nc-cum-thong-bao-shop-tien {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 52px 32px;
  gap: 4px;
  height: 88px;
  min-height: 88px;
  max-height: 88px;
  box-sizing: border-box;
}

.nc-khung-thong-bao-chinh {
  position: relative;
  width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}

.nc-hop-thong-bao-mat-tien {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  padding: 3.5px 7px;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(251, 191, 36, 0.14) 0%, transparent 72%),
    linear-gradient(180deg, #3b1c0b 0%, #241005 100%);
  border: 1.5px solid #b45309;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5px;
  overflow: hidden;
}

.nc-dong-tren-thong-bao-mt {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 22px;
}

.nc-nut-avatar-chau-nho {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  background: linear-gradient(180deg, #9a3412 0%, #5c1c07 100%);
  border: 1px solid #fbbf24;
  color: #fffbeb;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;
  box-shadow: 0 1px 0 #1e0b03;
}

.nc-icon-chau-nho {
  font-size: 11px;
  line-height: 1;
}

.nc-nv-stack-mini-bar {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  background: #2b1a10;
}

.nc-ten-chau-nho,
.nc-ten-chau-khe-tb {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 900;
}

.nc-chu-nghi-mat-tien,
.nc-loi-thoai-khe-tb {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 9.8px;
  font-weight: 800;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-cum-nut-nhanh-phai {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.nc-day-chip-buff-live {
  display: flex;
  align-items: center;
  gap: 3.5px;
  width: 100%;
  min-width: 0;
  height: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nc-day-chip-buff-live::-webkit-scrollbar {
  display: none;
}

.nc-nhan-he-thong-buff {
  font-family: var(--font-body);
  font-size: 8.8px;
  font-weight: 900;
  color: #fbbf24;
  white-space: nowrap;
  flex-shrink: 0;
}

.nc-chip-buff-tong {
  display: inline-flex;
  align-items: center;
  padding: 1px 5.5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
  border: 1px solid #4ade80;
  color: #fef08a;
  font-family: var(--font-body);
  font-size: 8.6px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
}

.nc-chip-buff-tong.nc-chip-dac-biet {
  background: linear-gradient(180deg, #7c2d12 0%, #451a03 100%);
  border-color: #fde047;
  color: #fffbeb;
}

.nc-chip-buff-goi-y {
  font-family: var(--font-body);
  font-size: 8.8px;
  font-weight: 700;
  color: #fed7aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thanh [⭐ Shop | $ Tiền mặt] (32px) đồng bộ cho cả #app và #ung-dung-ngoai-canh */
.nc-thanh-shop-tien {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  align-items: stretch;
}

.nc-thanh-shop-tien .nut-shop-tren-kiem-kho {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 7px !important;
  border-radius: 7px !important;
  border: 1.5px solid #fde047 !important;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #fffbeb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4.5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 #451a03 !important;
  cursor: pointer;
}

.nc-thanh-shop-tien .ten-nut-shop-duoi {
  font-family: 'Be Vietnam Pro', 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  color: #fffbeb;
  text-shadow: 0 1px 1px #451a03;
  white-space: nowrap;
}

.nc-thanh-shop-tien .nhan-phu-nut-shop-duoi {
  padding: 1.5px 4.5px;
  border-radius: 4px;
  background: rgba(43, 18, 5, 0.58);
  border: 1px solid rgba(254, 240, 138, 0.48);
  color: #fde047;
  font-family: 'Be Vietnam Pro', 'Nunito', sans-serif;
  font-size: 8.8px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-thanh-shop-tien .nut-shop-tren-kiem-kho.nut-tro-ve-thong-tin-quan {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
  border-color: #bbf7d0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 0 #052e16 !important;
}

.nc-thanh-shop-tien .nut-shop-tren-kiem-kho.nut-tro-ve-thong-tin-quan .nhan-phu-nut-shop-duoi {
  background: rgba(5, 46, 22, 0.65);
  border-color: rgba(187, 247, 208, 0.55);
  color: #dcfce7;
}

.icon-mui-ten-tro-ve-shop {
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: #fef08a;
  flex-shrink: 0;
}

/* ================= CHẾ ĐỘ MẶC ĐỊNH KHI NGOÀI QUÁN: BẢNG HỒ SƠ & THÔNG TIN VỀ QUÁN ================= */
.nc-vung-do-goi-hang.che-do-thong-tin-quan {
  grid-template-rows: 88px minmax(0, 1fr);
}

.nc-khung-ho-so-quan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4.5px 5.5px;
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.14), transparent 72%),
    linear-gradient(180deg, #2d1508 0%, #1a0b03 100%);
  border: 1.5px solid #b45309;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  overflow: hidden;
}

/* Khối 1: Bảng Danh Vị Cửa Quán & Chủ Tiệm */
.nc-ho-so-dau-quan {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 7px;
  background: linear-gradient(180deg, #4b230d 0%, #2d1305 100%);
  border: 1px solid #d97706;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.28);
  min-width: 0;
}

.nc-avatar-ho-so-btn {
  padding: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1.5px solid #fbbf24;
  background: #1f0e06;
  cursor: default;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 0 #140802;
}

.nc-nv-stack-ho-so-quan {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nc-cot-chu-ho-so-quan {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
}

.nc-dong-ten-quan-ho-so {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.nc-ten-quan-chinh-ho-so {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 1px 1px #1c0a02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-badge-cap-hang-quan {
  padding: 1px 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9a3412 0%, #5c1c07 100%);
  border: 1px solid #fbbf24;
  color: #fde68a;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
}

.nc-dong-chu-quan-ngay-tao {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 8.6px;
  font-weight: 700;
  color: #fed7aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-text-chu-quan-nho {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-dau-cham-ngan-ho-so {
  color: #d97706;
  flex-shrink: 0;
}

.nc-text-ngay-tao-noi-bat {
  color: #86efac;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.nc-nut-nhanh-trang-phuc-ho-so {
  height: 24px;
  padding: 0 6.5px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f5d08a 0%, #d99b43 60%, #b87924 100%);
  border: 1px solid #3b1804;
  color: #261205;
  font-family: var(--font-body);
  font-size: 8.6px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.72),
    0 1px 0 #1c0c02;
}

/* Khối 2: Lưới 4 Ô Thông Tin Chi Tiết Về Quán (2 cột × 2 hàng — Tông gỗ nâu hổ phách trầm ấm, chữ vàng/kem nổi bật dễ đọc) */
.nc-luoi-4-o-thong-tin-quan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-height: 0;
}

.nc-o-thong-tin-quan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5px;
  padding: 3.5px 7px;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(251, 191, 36, 0.2) 0%, transparent 72%),
    linear-gradient(180deg, #4e2610 0%, #311607 100%);
  border: 1.5px solid #d97706;
  border-bottom: 2.5px solid #170902;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.32),
    0 1.5px 3px rgba(0, 0, 0, 0.45);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.nc-nhan-o-thong-tin {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.15px;
  color: #fbbf24;
  text-shadow: 0 1px 1px #140702;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-gia-tri-o-thong-tin {
  font-family: var(--font-body);
  font-size: 9.6px;
  font-weight: 900;
  color: #fffbeb;
  text-shadow: 0 1.5px 1px rgba(15, 6, 2, 0.9);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-gia-tri-o-thong-tin.nc-chu-vang-sao {
  color: #fde047;
  text-shadow: 0 1.5px 1px #1c0a02;
}

.nc-phu-de-o-thong-tin {
  font-family: var(--font-body);
  font-size: 7.9px;
  font-weight: 700;
  color: #fed7aa;
  text-shadow: 0 1px 1px rgba(15, 6, 2, 0.75);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Khối 3: Khu Vực Tài Khoản Google & Đồng Bộ Đám Mây */
.nc-khung-tai-khoan-google {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3.5px 6.5px;
  border-radius: 7px;
  background: linear-gradient(180deg, #3a1c0b 0%, #220f05 100%);
  border: 1px solid #b45309;
  box-shadow: inset 0 1px 0 rgba(254, 240, 138, 0.2);
  min-width: 0;
}

.nc-cum-trai-google {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.nc-hop-icon-google {
  width: 23px;
  height: 23px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2b1407 0%, #180a03 100%);
  border: 1px solid #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(254, 240, 138, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

.nc-cot-chu-google {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.nc-dong-tieu-de-google {
  display: flex;
  align-items: center;
  gap: 4.5px;
  min-width: 0;
}

.nc-ten-muc-google {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 900;
  color: #fef08a;
  text-shadow: 0 1px 1px #140702;
  white-space: nowrap;
}

.nc-badge-trang-thai-google {
  padding: 0.5px 4.5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
  border: 1px solid #4ade80;
  color: #bbf7d0;
  font-family: var(--font-body);
  font-size: 7.4px;
  font-weight: 800;
  white-space: nowrap;
}

.nc-mo-ta-google {
  font-family: var(--font-body);
  font-size: 7.8px;
  font-weight: 700;
  color: #fed7aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-nut-dang-nhap-google {
  height: 24px;
  padding: 0 7px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f5d08a 0%, #d99b43 60%, #b87924 100%);
  border: 1px solid #3b1804;
  color: #261205;
  font-family: var(--font-body);
  font-size: 8.4px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.75),
    0 1.5px 0 #1c0c02;
}

.nc-nut-dang-nhap-google:active {
  transform: translateY(1px);
}

.nc-thanh-shop-tien .o-tien-chinh-canh-shop {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #140b06 0%, #231309 100%) !important;
  border: 1.5px solid rgba(185, 138, 82, 0.48) !important;
  border-top-color: #0b0502 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.88),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 228, 168, 0.14) !important;
}

.nc-thanh-shop-tien .icon-tien-do-la {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.55);
  color: #4ade80 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

.nc-thanh-shop-tien .gia-tri-tien-lon {
  font-family: 'Be Vietnam Pro', 'Nunito', sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #fde68a !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.nc-dong-cong-cu-vung-do,
.nc-dong-nhan-vat-vung-do,
.nc-dong-input-bang-hieu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5px;
  height: 22px;
  width: 100%;
}

.nc-nut-nhanh-vung-do {
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3b2314 0%, #24140a 100%);
  color: #f5dec3;
  border: 1.5px solid #92400e;
  border-radius: 5px;
  padding: 0 5.5px;
  font-family: var(--font-body);
  font-size: 8.8px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 0 #180a03;
}

.nc-nut-nhanh-vung-do.dang-bat,
.nc-nut-nhanh-vung-do.nut-vang {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #2b1d14;
  border-color: #451a03;
}

.nc-nut-nhanh-vung-do.nut-xanh-la {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #052e16;
  border-color: #052e16;
}

.nc-input-nho-vung-do {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  background: #1c0d06;
  color: #fef3c7;
  border: 1.5px solid #b45309;
  border-radius: 5px;
  padding: 0 5px;
  font-size: 10.5px !important;
  font-weight: 700;
  font-family: var(--font-body);
}

/* Hàng 2 Vùng Đỏ (36px): Thanh 4 Nhóm Kệ Mặt Tiền (Đã chuyển Tóc/Áo/Kính vào ⭐ Shop & bỏ Chợ Sỉ trùng lặp) */
.nc-thanh-nhom-hang {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  gap: 4px;
  flex-shrink: 0;
  overflow: visible;
}

.nc-thanh-nhom-hang.nc-thanh-4-nhom {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nc-nut-nhom-hang {
  position: relative;
  background: linear-gradient(180deg, #f5d08a 0%, #d99b43 58%, #b87924 100%);
  border: 1.5px solid #3b1804;
  color: #261205;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 2px 5px;
  gap: 4px;
  border-radius: 7px;
  min-width: 0;
  cursor: pointer;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.72),
    0 1.5px 0 #1c0c02;
}

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

.nc-badge-tab-nho {
  position: absolute;
  top: -4px;
  right: 3px;
  left: auto;
  background: #2b1d14;
  color: #fef08a;
  border: 1px solid #d97706;
  border-radius: 4px;
  padding: 0 3.5px;
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 900;
  line-height: 10px;
  z-index: 15;
  pointer-events: none;
}

.nc-icon-tab-nhom {
  font-size: 13.5px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nc-ten-nhom-ngan {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.15px;
  text-align: center;
  color: inherit;
  text-shadow: 0 1px 0 rgba(255, 250, 224, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hàng 3 Vùng Đỏ (1fr ~ 165px): Lưới 5 Cột Thẻ Trang Trí Cao Cấp & Hệ Thống + Hiệu Ứng */
.nc-khung-noi-dung-goi-hang {
  flex: 1 1 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.nc-luoi-ke-hang {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  min-width: 0;
  gap: 4px;
  padding: 3px 4px;
  overflow: hidden;
  align-items: stretch;
  border-radius: 8px;
  background: rgba(20, 10, 4, 0.32);
  border: 1.5px solid rgba(180, 83, 9, 0.45);
  box-sizing: border-box;
}

/* Khi kệ có > 5 món (10 món = 2 hàng × 5 cột), chia đều 2 hàng trong khung ~165px (~76px/thẻ) để hiển thị rõ Icon + Tên + Hiệu Ứng + Giá */
.nc-luoi-ke-hang.luoi-2-hang {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 3.5px;
  padding: 3px 3.5px;
  overflow: hidden;
}

.nc-o-hang-ke {
  position: relative;
  background: linear-gradient(180deg, #fffdf7 0%, #fef3c7 100%);
  border: 2px solid #92400e;
  border-bottom: 3px solid #451a03;
  border-radius: 7px;
  padding: 13px 2.5px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  cursor: pointer;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1.5px 0 #1c0c02;
  transition: transform 0.12s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-o-hang-ke {
  padding: 11px 2px 2px;
  border-width: 1.5px;
  border-bottom-width: 2.5px;
  gap: 1px;
}

/* Thiết kế phân hạng sang trọng cho thẻ đồ trang trí (Phổ Thông • Cao Cấp • Huyền Thoại) */
.nc-o-hang-ke.hang-pho-thong {
  background: linear-gradient(180deg, #fffdf8 0%, #fde68a 100%);
  border-color: #b45309;
}

.nc-o-hang-ke.hang-cao-cap {
  background:
    radial-gradient(circle at 50% 25%, #fffbeb 0%, #fde047 62%, #f59e0b 100%);
  border-color: #d97706;
  border-bottom-color: #78350f;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 6px rgba(245, 158, 11, 0.35),
    0 1.5px 0 #271004;
}

.nc-o-hang-ke.hang-huyen-thoai {
  background:
    radial-gradient(circle at 50% 22%, #fffbeb 0%, #fef08a 48%, #fbbf24 100%);
  border-color: #dc2626;
  border-bottom-color: #7f1d1d;
  box-shadow:
    inset 0 0 0 1px #fde047,
    0 0 9px rgba(250, 204, 21, 0.55),
    0 1.5px 0 #450a0a;
}

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

.nc-o-hang-ke.dang-chon-item {
  border-color: #16a34a !important;
  border-bottom-color: #14532d !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #bbf7d0 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 7px rgba(34, 197, 94, 0.55) !important;
}

.nc-so-luong-badge {
  position: absolute;
  top: 2px;
  left: 2.5px;
  background: #2b1d14;
  color: #fef08a;
  border-radius: 4px;
  padding: 0 3.5px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 900;
  line-height: 10.5px;
  z-index: 2;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-so-luong-badge {
  top: 1.5px;
  left: 2px;
  padding: 0 3px;
  font-size: 7px;
  line-height: 9px;
  border-radius: 3px;
}

.nc-so-luong-badge.badge-xanh {
  background: #15803d;
  color: #ffffff;
}

.nc-so-luong-badge.badge-vang {
  background: #b45309;
  color: #fef08a;
}

.nc-so-luong-badge.badge-tim-vip {
  background: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  color: #fde047;
  border: 0.8px solid #fde047;
}

.nc-nut-an-mon-nho {
  position: absolute;
  top: 1.5px;
  right: 2px;
  background: rgba(69, 26, 3, 0.88);
  color: #fde68a;
  border: 1px solid #b45309;
  border-radius: 4px;
  padding: 0 3px;
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 800;
  line-height: 10px;
  cursor: pointer;
  z-index: 3;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-nut-an-mon-nho {
  top: 1px;
  right: 1.5px;
  padding: 0 2.5px;
  font-size: 6.6px;
  line-height: 8.5px;
  border-radius: 3px;
}

.nc-khung-icon-mon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 100%;
  flex-shrink: 0;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-khung-icon-mon {
  height: 24px;
}

.nc-anh-icon-mon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.28));
}

.nc-luoi-ke-hang.luoi-2-hang .nc-anh-icon-mon {
  width: 34px;
  height: 23px;
}

.nc-emoji-icon-mon {
  font-size: 22px;
  line-height: 1;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-emoji-icon-mon {
  font-size: 16px;
}

.nc-ten-mon-ke {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0 1px;
  font-family: var(--font-body);
  font-size: 9.2px;
  line-height: 10.5px;
  font-weight: 900;
  color: #2b1d14;
  letter-spacing: -0.15px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-ten-mon-ke {
  display: block;
  height: 11px;
  min-height: 11px;
  font-size: 7.9px;
  line-height: 10.5px;
}

/* Nhãn + Hiệu ứng (Buff Pill) trên từng thẻ đồ trang trí */
.nc-pill-buff-ke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(120, 53, 15, 0.14);
  border: 1px solid rgba(180, 83, 9, 0.45);
  color: #7c2d12;
  font-family: var(--font-body);
  font-size: 7.6px;
  font-weight: 900;
  line-height: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-o-hang-ke.dang-chon-item .nc-pill-buff-ke {
  background: rgba(21, 128, 61, 0.16);
  border-color: rgba(22, 163, 74, 0.55);
  color: #14532d;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-pill-buff-ke {
  height: 11px;
  padding: 0 3px;
  font-size: 6.7px;
  line-height: 9.5px;
  border-radius: 3px;
}

.nc-gia-mon-ke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #451a03 0%, #271004 100%);
  color: #fef08a;
  border: 1px solid #d97706;
  border-radius: 4px;
  padding: 1px 4.5px;
  font-family: var(--font-body);
  font-size: 8.8px;
  font-weight: 900;
  line-height: 11.5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-luoi-ke-hang.luoi-2-hang .nc-gia-mon-ke {
  height: 12px;
  padding: 0 3.5px;
  font-size: 7.4px;
  line-height: 10.5px;
  border-radius: 3px;
}

.nc-gia-mon-ke.gia-da-mua {
  background: #78350f;
  color: #fde68a;
}

.nc-gia-mon-ke.gia-dang-dung {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border-color: #052e16;
  color: #ffffff;
}

/* Bảng Mua Sơn & Tự Design Bảng Hiệu */
.nc-khung-son-bang-hieu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.nc-cot-tuy-bien {
  background: var(--nc-bg-panel);
  border: 1.5px solid #5c3d28;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nc-tieu-de-cot {
  margin: 0 0 4px 0;
  color: var(--nc-glow-gold);
  font-size: 14px;
}

.nc-nut-chon-tuy-bien {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #21130c;
  color: #f5dec3;
  border: 1.5px solid #4e342e;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}

.nc-nut-chon-tuy-bien.dang-ap-dung {
  background: #4e301d;
  border-color: var(--nc-glow-gold);
  color: #fff;
}

.nc-gia-tuy-bien {
  font-weight: 800;
  color: #ffd54f;
  white-space: nowrap;
}

.nc-form-chu-bang-hieu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #5d4037;
}

.nc-input-bang-hieu {
  background: #140b07;
  color: #fff8e1;
  border: 1.5px solid #6d4c41;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
}

.nc-nut-phu-nho {
  background: #3e2723;
  color: #ffe082;
  border: 1px solid #8d6e63;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Toast Thông báo (Đồng bộ chuẩn Plaque 3D Pixel Art) */
.nc-toast {
  position: fixed;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(94vw, 460px);
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #42230f 0%, #241207 100%);
  color: #fffbeb;
  border: 2px solid #f59e0b;
  border-bottom: 4px solid #120802;
  border-radius: 12px;
  padding: 6px 11px 6px 8px;
  z-index: 10005;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 235, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.72),
    0 2px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
  text-align: left;
  transition: opacity 0.18s ease;
}

.nc-toast.nc-pop {
  animation: ncToastPop 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

.nc-toast.an {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.nc-toast-icon {
  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.7),
    0 2px 0 rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}

.nc-toast-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.nc-toast-label {
  font-family: var(--font-body);
  font-size: 10px;
  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);
}

.nc-toast-text {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.24;
  color: #fffbeb;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  text-wrap: balance;
}

.nc-toast-chips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.nc-toast-chip {
  font-family: var(--font-body);
  font-size: 11.5px;
  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);
}

.nc-toast-chip.nc-chip-tien-cong {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border-color: #86efac;
  color: #fef08a;
}

.nc-toast-chip.nc-chip-tien-tru {
  background: linear-gradient(180deg, #ea580c 0%, #9a3412 100%);
  border-color: #fdba74;
  color: #fff7ed;
}

.nc-toast.nc-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;
}

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

.nc-toast.nc-loai-thanh-cong .nc-toast-label {
  color: #86efac;
}

.nc-toast.nc-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;
}

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

.nc-toast.nc-loai-trang-tri {
  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;
}

.nc-toast.nc-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;
}

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

.nc-toast.nc-loai-canh-bao .nc-toast-label {
  color: #fca5a5;
}

/* ================= NHÂN VẬT CHÍNH: CHÁU CỦA BÀ HOÀNG ĐỨNG GIỮA QUẦY & GƯƠNG SOI 4X ================= */
.nc-nhan-vat-quay-btn {
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  pointer-events: none !important;
  cursor: default;
  z-index: 6;
  transform: translateX(-50%);
}

/* Vị trí Cháu của Bà Hoàng đứng sau quầy thu ngân ở Cấp 1–6 (nửa thân trên ~35px tựa mặt quầy tại bottom 53.0%, giữa 4 hũ kẹo và quạt bàn) */
.pos-c1-chau-ba-hoang {
  left: 47.5%;
  top: 44.0%;
  width: 6.0% !important;
  height: 9.0% !important;
}

/* Vị trí Cháu của Bà Hoàng đứng sau quầy thu ngân ở Cấp 7+ Mở Rộng (mặt quầy tại bottom 61.0%) */
.pos-c7-chau-ba-hoang {
  left: 54.4%;
  top: 52.0%;
  width: 5.8% !important;
  height: 9.0% !important;
}

.nc-nv-stack-trong-quay {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: brightness(0.95);
}

/* Nửa trên (đầu, tóc, kính, vai) giữ tỷ lệ vuông 1:1 để đầu nhân vật cân đối tự nhiên (~15px) */
.nc-nv-stack-trong-quay .nc-nv-phan-dau-vai {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%;
}

/* Phần thân áo dưới nối dài tự nhiên từ ngực xuống chạm mặt bàn gỗ của quầy */
.nc-nv-stack-trong-quay .nc-nv-phan-than-duoi {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 34%;
  overflow: hidden;
}

.nc-nv-stack-trong-quay .nc-nv-layer-than {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 600%;
  object-fit: fill !important;
  image-rendering: pixelated;
  pointer-events: none;
}

.nc-nv-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill !important;
  object-position: center bottom !important;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Quạt bàn cóc xanh 5 góc quay đặt trên mặt quầy gỗ bên phải chủ tiệm (sát trái máy tính tiền) khi nhìn từ Ngoài Phố vào */
.nc-quat-ban-trong-quay {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  transform: translateX(-50%);
  filter: brightness(0.95) drop-shadow(0 1px 2px rgba(20, 10, 4, 0.45));
}

.nc-quat-ban-trong-quay.pos-c1-quat-ban {
  left: 51.8%;
  top: 48.2%;
  width: 3.5%;
  height: 4.8%;
}

.nc-quat-ban-trong-quay.pos-c7-quat-ban {
  left: 60.8%;
  top: 56.2%;
  width: 3.4%;
  height: 4.8%;
}

.nc-quat-ban-trong-quay .khung-quat-ban-xoay {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.nc-quat-ban-trong-quay .khung-canh-quat {
  position: absolute;
  inset: 0;
}

.nc-quat-ban-trong-quay .anh-sprite-svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  image-rendering: pixelated;
}

.nc-quat-ban-trong-quay .cum-gio-quat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: scale(0.45);
  transform-origin: center center;
  animation: ncHuongGioQuat 5.6s steps(1, end) infinite;
}

.nc-quat-ban-trong-quay .quat-goc-trai {
  animation: ncQuatGocTrai 5.6s steps(1, end) infinite;
}

.nc-quat-ban-trong-quay .quat-goc-xeo-trai {
  animation: ncQuatGocXeoTrai 5.6s steps(1, end) infinite;
}

.nc-quat-ban-trong-quay .quat-goc-giua {
  animation: ncQuatGocGiua 5.6s steps(1, end) infinite;
}

.nc-quat-ban-trong-quay .quat-goc-xeo-phai {
  animation: ncQuatGocXeoPhai 5.6s steps(1, end) infinite;
}

.nc-quat-ban-trong-quay .quat-goc-phai {
  animation: ncQuatGocPhai 5.6s steps(1, end) infinite;
}

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

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

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

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

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

@keyframes ncHuongGioQuat {
  0% { transform: scale(0.45) translateX(-10px) scaleX(-1); }
  12.5% { transform: scale(0.45) translateX(-5px) scaleX(-0.85); }
  25% { transform: scale(0.48) translateX(0px); }
  37.5% { transform: scale(0.45) translateX(5px) scaleX(0.85); }
  50% { transform: scale(0.45) translateX(10px) scaleX(1); }
  62.5% { transform: scale(0.45) translateX(5px) scaleX(0.85); }
  75% { transform: scale(0.48) translateX(0px); }
  87.5%, 100% { transform: scale(0.45) translateX(-5px) scaleX(-0.85); }
}

/* ================= CÁC LỚP NỘI THẤT TRONG QUẦY NHÌN TỪ NGOÀI PHỐ VÀO (SCENE 3 — ĐẢO NGƯỢC PHỐI CẢNH 180 ĐỘ) =================
   - Đồng bộ 100% với Sân Khấu Trong Quầy:
     1. Đồng Hồ Treo Tường (`dong_ho_tuong`): Trong quầy treo tường phải -> Nhìn từ ngoài vào treo tường trái phía trên tủ Coca-Cola, lật ngang 180° hướng mặt đồng hồ vào trong tiệm.
     2. Đèn & Phong Thủy Giữa Trần Nhà (`tran_nha`): Treo đúng thanh sắt trần nhà ở khe giữa 2 cụm dây bim bim (ngay trên đầu Bà Chủ Nhỏ).
     3. Nóc Tủ Mát Coca-Cola (`noc_tu_lanh`): Đặt trên nóc đỏ của tủ Coca-Cola bên trái cửa, lật ngang 180° hướng mặt vào trong tiệm.
     4. Linh Vật Mặt Bàn (`mat_ban`): Đặt trên mặt quầy gỗ cạnh 4 hũ kẹo nắp đỏ.
     5. Lịch Bloc / Tranh Kính (`tuong_trai`): Trong quầy treo tường trái -> Nhìn từ ngoài vào treo tường phải cạnh kệ sắt. */
.nc-noi-that-trong-quay {
  position: absolute;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  overflow: visible;
  filter: brightness(0.96) drop-shadow(0 1.5px 2.5px rgba(15, 7, 2, 0.55));
  transition: filter 0.18s ease;
}

.nc-noi-that-trong-quay.nut-dang-nhap-juice {
  animation: none !important;
}

.nc-noi-that-trong-quay > .nt-item-visual {
  transform: scale(0.46);
  transform-origin: center center;
  transition: transform 0.16s ease;
}

.nc-noi-that-trong-quay.nc-lat-ngang-180 > .nt-item-visual {
  transform: scale(-0.46, 0.46);
  transform-origin: center center;
}

.nc-noi-that-trong-quay:hover {
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(254, 240, 138, 0.85));
  z-index: 18;
}

.nc-noi-that-trong-quay:hover > .nt-item-visual {
  transform: scale(0.52);
}

.nc-noi-that-trong-quay.nc-lat-ngang-180:hover > .nt-item-visual {
  transform: scale(-0.52, 0.52);
}

/* Khi lật ngang 180° cho Tivi CRT nhìn từ ngoài vào, lật lại chữ nhãn kênh để không bị ngược chữ */
.nc-noi-that-trong-quay.nc-lat-ngang-180 .nhan-kenh-tivi-svg {
  transform: scaleX(-1);
}

/* 1. Đồng Hồ Treo Tường nhìn từ ngoài vào (Treo trên mảng tường vàng bên trái, ngay phía trên tủ Coca-Cola) */
.pos-c1-nt-dong-ho {
  left: 33.1%;
  top: 26.2%;
  z-index: 6;
}

.pos-c7-nt-dong-ho {
  left: 37.5%;
  top: 33.5%;
  z-index: 6;
}

/* 2. Đèn & Phong Thủy Giữa Trần Nhà nhìn từ ngoài vào (Treo chính giữa thanh sắt trần nhà giữa 2 cụm dây bim bim) */
.pos-c1-nt-tran-nha {
  left: 48.0%;
  top: 27.6%;
  margin-left: -14px;
  z-index: 7;
}

.pos-c1-nt-tran-nha > .nt-item-visual {
  transform: scale(0.48);
  transform-origin: top center;
}

.pos-c1-nt-tran-nha:hover > .nt-item-visual {
  transform: scale(0.54);
}

.pos-c7-nt-tran-nha {
  left: 54.4%;
  top: 34.5%;
  margin-left: -14px;
  z-index: 7;
}

/* 3. Nóc Tủ Mát Coca-Cola nhìn từ ngoài vào (Đặt trên nóc đỏ của tủ Coca-Cola bên trái) */
.pos-c1-nt-noc-tu {
  left: 33.6%;
  top: 33.6%;
  z-index: 6;
}

.pos-c7-nt-noc-tu {
  left: 38.0%;
  top: 40.5%;
  z-index: 6;
}

/* 4. Linh Vật Mặt Bàn Quầy nhìn từ ngoài vào (Đặt trên mặt bàn gỗ cạnh 4 hũ kẹo nắp đỏ) */
.pos-c1-nt-mat-ban {
  left: 44.2%;
  top: 47.4%;
  z-index: 6;
}

.pos-c7-nt-mat-ban {
  left: 50.8%;
  top: 55.4%;
  z-index: 6;
}

/* 5. Lịch Bloc / Tranh Kính Tường Phải khi nhìn từ ngoài vào (Đảo 180° từ Tường Trái trong quầy) */
.pos-c1-nt-tuong-trai {
  left: 61.5%;
  top: 27.8%;
  z-index: 5;
}

.pos-c7-nt-tuong-trai {
  left: 66.2%;
  top: 35.0%;
  z-index: 5;
}

/* Khung Chỉnh Ngoại Hình & Gương Soi 4x Cận Cảnh */
.nc-khung-chinh-nhan-vat {
  display: grid;
  grid-template-columns: 220px repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 820px) {
  .nc-khung-chinh-nhan-vat {
    grid-template-columns: 1fr;
  }
}

.nc-guong-soi-nhan-vat {
  background: radial-gradient(circle at center, #3e2719 0%, #1d110a 100%);
  border: 2px solid var(--nc-border-gold);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nc-nhan-guong-soi {
  font-size: 13px;
  font-weight: 800;
  color: var(--nc-glow-gold);
  text-align: center;
}

.nc-nv-stack-guong-lon {
  position: relative;
  width: 136px;
  height: 136px;
  background: #2b1a10;
  border: 2px solid #8d6e63;
  border-radius: 12px;
  overflow: hidden;
}

.nc-cum-nut-chuyen-gioi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  background: #1a0e08;
  padding: 4px;
  border-radius: 9px;
  border: 1.5px solid #5c3d28;
}

.nc-nut-chuyen-gioi {
  background: #2a180e;
  color: #d7b899;
  border: 1.5px solid transparent;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: center;
  white-space: nowrap;
}

.nc-nut-chuyen-gioi:hover {
  background: #3d2415;
  color: #fff3e0;
}

.nc-nut-chuyen-gioi.dang-chon {
  background: linear-gradient(180deg, #b71c1c 0%, #7f0000 100%);
  color: #fff8e1;
  border-color: var(--nc-glow-gold);
  box-shadow: 0 0 10px rgba(255, 230, 105, 0.55);
}

.nc-input-ten-nv {
  width: 100%;
  text-align: center;
  font-weight: 700;
}

/* ============================================================================
   BỘ 2 ANIMATION LÁI XE RA CHỢ SỈ & VỀ TIỆM ĐỒNG BỘ 100% KHUNG GAME 390×740 (2.0 GIÂY)
   - Khớp tuyệt đối khung 390×740 (scale theo --ti-le-khung-mobile) và bố cục 3 vùng của game:
     1) Vùng 1: Top HUD Bảng Gỗ (#302016 • viền #a87945) + Thanh tiến độ lộ trình.
     2) Vùng 2: Sân Khấu Vuông 1:1 (390×390) nối liền Tiệm Bà Hoàng (Scene 3) <-> Chợ Sỉ (Scene 4).
     3) Vùng 3: Quầy Gỗ Dưới (#3b2212 • thẻ kem #fffcf1) hiện Avatar & Thoại của Nhân Vật Đã Chọn.
   ============================================================================ */

@keyframes csToanManHinh2Giay {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.cs-lop-chuyen-canh-xe-may {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483640 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at center, rgba(43, 29, 20, 0.72) 0%, rgba(18, 10, 5, 0.92) 100%);
  overflow: hidden !important;
  pointer-events: auto;
  user-select: none;
  animation: csToanManHinh2Giay 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity;
}

/* Khung 390×740 đồng bộ 100% với #app và #ung-dung-ngoai-canh */
.cs-khung-game-390x740 {
  width: 390px;
  min-width: 390px;
  max-width: 390px;
  height: 740px;
  min-height: 740px;
  max-height: 740px;
  background: #2b1d14;
  border: 2.5px solid #a87945;
  border-radius: 14px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 236, 179, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(var(--ti-le-khung-mobile, 1)) translateZ(0);
  transform-origin: center;
}

/* ================= VÙNG 1: TOP HUD BẢNG GỖ LỘ TRÌNH (45px) ================= */
.cs-top-hud-go {
  height: 46px;
  min-height: 46px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #3b2314 0%, #26150b 100%);
  border-bottom: 2.5px solid #a87945;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cs-hang-lo-trinh-hud {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2a170c 0%, #1b0e07 100%);
  border: 1.5px solid #8c5e32;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.cs-diem-lo-trinh {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 6px;
  background: #3e2414;
  color: #f5dec3;
  border: 1px solid #784b27;
  white-space: nowrap;
}

.cs-diem-lo-trinh.diem-dich-den {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #2b1406;
  border-color: #78350f;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.45);
}

.cs-thanh-duong-bay-hud {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #140a05;
  border: 1px solid #6b4423;
  overflow: visible;
}

@keyframes csTienDoHud2Giay {
  0% {
    width: 8%;
  }
  100% {
    width: 100%;
  }
}

.cs-vach-tien-do-hud {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(270deg, #22c55e 0%, #fde047 60%, #f59e0b 100%);
  animation: csTienDoHud2Giay 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.cs-lop-chuyen-canh-xe-may.chieu-ve-lai-tiem .cs-vach-tien-do-hud {
  right: auto;
  left: 0;
  background: linear-gradient(90deg, #22c55e 0%, #fde047 60%, #f59e0b 100%);
}

@keyframes csXeBayTrenHud {
  0% {
    left: 88%;
  }
  100% {
    left: 12%;
  }
}

@keyframes csXeBayVeTrenHud {
  0% {
    left: 12%;
  }
  100% {
    left: 88%;
  }
}

.cs-icon-xe-tren-hud {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -56%);
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px #000);
  animation: csXeBayTrenHud 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.cs-lop-chuyen-canh-xe-may.chieu-ve-lai-tiem .cs-icon-xe-tren-hud {
  transform: translate(-50%, -56%) scaleX(-1);
  animation-name: csXeBayVeTrenHud;
}

/* ================= VÙNG 2: SÂN KHẤU ĐƯỜNG PHỐ 1:1 (390×390) ================= */
.cs-vung-san-khau-vuong {
  position: relative;
  width: 390px;
  height: 390px;
  min-height: 390px;
  max-height: 390px;
  background: #e9d5b5;
  border-bottom: 3px solid #2b1d14;
  overflow: hidden;
  flex-shrink: 0;
}

.cs-khung-nen-duong-pho {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 1. BẦU TRỜI PIXEL ART ẤM ÁP ĐỒNG BỘ SCENE 3 */
.cs-lop-bau-troi-hem {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(180deg, #76bfe0 0%, #b8e2f2 58%, #f5e1b9 100%);
  overflow: hidden;
}

.cs-mat-troi-am {
  position: absolute;
  top: 10%;
  right: 12%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbeb 0%, #fde047 62%, rgba(245, 158, 11, 0) 100%);
  box-shadow: 0 0 24px rgba(253, 224, 71, 0.85);
}

@keyframes csTruotDaiMay2Giay {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-90px, 0, 0);
  }
}

.cs-dai-may-troi-muot {
  position: absolute;
  inset: 0;
  width: 520px;
  animation: csTruotDaiMay2Giay 2s linear forwards;
  will-change: transform;
}

.cs-dam-may {
  position: absolute;
  height: 16px;
  border-radius: 999px;
  background: #fffcf5;
  border: 2px solid #2b1d14;
  box-shadow: 12px -5px 0 1px #fffcf5;
}

.cs-dam-may.cs-may-1 {
  top: 18%;
  left: 10%;
  width: 52px;
}

.cs-dam-may.cs-may-2 {
  top: 32%;
  left: 46%;
  width: 64px;
}

.cs-dam-may.cs-may-3 {
  top: 16%;
  left: 78%;
  width: 56px;
}

.cs-day-dien-hem {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 14px;
  height: 18px;
  border-bottom: 2.5px solid #2b1d14;
  border-radius: 50%;
  box-shadow: 0 5px 0 rgba(43, 29, 20, 0.55);
}

/* 2. BĂNG CHUYỀN PANORAMA NỐI ĐẠI LÝ SỈ CHỢ ĐẦU HẺM (BÊN TRÁI) <-> TẠP HÓA BÀ HOÀNG (BÊN PHẢI) */
.cs-lop-day-nha-cuon {
  position: absolute;
  top: 6%;
  left: 0;
  right: 0;
  height: 67%;
  overflow: hidden;
  border-bottom: 3px solid #2b1d14;
}

/* Chiều ra chợ sỉ: xuất phát từ Tiệm Bà Hoàng (bên phải -730px) chạy qua trái tới Chợ Đầu Hẻm (0px) */
@keyframes csTruotDayNhaMotMach {
  0% {
    transform: translate3d(-730px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Chiều về lại tiệm: xuất phát từ Chợ Đầu Hẻm (bên trái 0px) chạy qua phải về Tiệm Bà Hoàng (-730px) */
@keyframes csTruotDayNhaVeTiemMotMach {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-730px, 0, 0);
  }
}

.cs-bang-chuyen-day-nha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 1120px;
  height: 100%;
  padding: 0 6px;
  box-sizing: border-box;
  animation: csTruotDayNhaMotMach 2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform;
}

.cs-lop-chuyen-canh-xe-may.chieu-ve-lai-tiem .cs-bang-chuyen-day-nha {
  animation-name: csTruotDayNhaVeTiemMotMach;
}

/* Khung ảnh thật của Tiệm Bà Hoàng (Scene 3) & Chợ Đầu Hẻm (Scene 4) ở 2 đầu lộ trình */
.cs-khung-canh-that {
  position: relative;
  width: 310px;
  height: 98%;
  border: 3px solid #2b1d14;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3dfba;
  box-shadow: 0 4px 10px rgba(43, 29, 20, 0.35);
}

.cs-anh-canh-that {
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center top;
  image-rendering: pixelated;
  display: block;
}

.cs-nhan-moc-dia-diem {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2.5px 9px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  border: 2px solid #2b1d14;
  box-shadow: 0 2px 0 #2b1d14;
}

.cs-nhan-moc-dia-diem.cs-moc-tiem {
  background: linear-gradient(180deg, #fef08a 0%, #f59e0b 100%);
  color: #451a03;
}

.cs-nhan-moc-dia-diem.cs-moc-cho-si {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fef08a;
}

.cs-nha-ong-item {
  position: relative;
  width: 156px;
  height: 92%;
  background: var(--mau-tuong, #f5c76b);
  border: 3px solid #2b1d14;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.cs-nha-mai-ngoi {
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    var(--mau-mai, #b4342a) 0px,
    var(--mau-mai, #b4342a) 12px,
    #7f1d1d 12px,
    #7f1d1d 16px
  );
  border-bottom: 2.5px solid #2b1d14;
}

.cs-nha-tang-tren {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px 2px;
}

.cs-nha-cua-so-tren {
  width: 58%;
  height: 62%;
  background: repeating-linear-gradient(
    180deg,
    #358b59 0px,
    #358b59 5px,
    #1f5c38 5px,
    #1f5c38 8px
  );
  border: 2.5px solid #2b1d14;
  border-radius: 3px;
}

.cs-nha-ban-cong {
  width: 84%;
  height: 9px;
  background: repeating-linear-gradient(
    90deg,
    #2b1d14 0px,
    #2b1d14 4px,
    transparent 4px,
    transparent 9px
  );
  border-top: 2.5px solid #2b1d14;
  border-bottom: 2.5px solid #2b1d14;
}

.cs-nha-bang-hieu {
  margin: 0 6px;
  padding: 4px 6px;
  background: linear-gradient(180deg, #e9c45a 0%, #d4a038 100%);
  border: 2.5px solid #b4342a;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 2.5px 0 #2b1d14;
}

.cs-nha-bang-hieu span {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 900;
  color: #991b1b;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cs-nha-mai-hien-soc {
  height: 12px;
  margin: 2px -3px 0;
  background: repeating-linear-gradient(
    90deg,
    #b4342a 0px,
    #b4342a 12px,
    #f3dfba 12px,
    #f3dfba 24px
  );
  border: 2px solid #2b1d14;
  border-radius: 0 0 5px 5px;
}

.cs-nha-cua-sat-duoi {
  height: 36%;
  margin: 0 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--mau-cua, #2f857a) 0px,
    var(--mau-cua, #2f857a) 10px,
    #1d524b 10px,
    #1d524b 13px
  );
  border: 2.5px solid #2b1d14;
  border-bottom: none;
  position: relative;
}

.cs-nha-chau-cay {
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 20px;
  height: 28px;
  border-radius: 50% 50% 4px 4px;
  background: radial-gradient(circle at 50% 35%, #4ade80 0%, #15803d 65%, #b45309 66%, #92400e 100%);
  border: 2px solid #2b1d14;
}

.cs-cay-bang-xanh {
  position: relative;
  width: 72px;
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.cs-tan-la-bang {
  width: 82px;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #65a30d 0%, #3f6212 65%, #1a2e05 100%);
  border: 3px solid #2b1d14;
  margin-bottom: -10px;
  z-index: 1;
}

.cs-than-cay-bang {
  width: 18px;
  height: 44%;
  background: linear-gradient(90deg, #78350f 0%, #5c3317 50%, #3b1d0a 100%);
  border-left: 2.5px solid #2b1d14;
  border-right: 2.5px solid #2b1d14;
}

.cs-cot-dien-panorama {
  position: relative;
  width: 20px;
  height: 98%;
  background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 48%, #6b7280 100%);
  border-left: 2.5px solid #2b1d14;
  border-right: 2.5px solid #2b1d14;
  flex-shrink: 0;
  margin: 0 12px;
  z-index: 3;
}

.cs-loa-phuong-cot-dien {
  position: absolute;
  top: 12%;
  left: -15px;
  width: 19px;
  height: 14px;
  background: #e5e7eb;
  border: 2px solid #2b1d14;
  border-radius: 4px 9px 9px 4px;
}

.cs-bien-xanh-dau-hem {
  position: absolute;
  top: 32%;
  left: 10px;
  padding: 4px 8px;
  border-radius: 5px;
  background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);
  border: 2px solid #ffffff;
  outline: 2px solid #2b1d14;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
}

/* 3. VỈA HÈ GẠCH VUÔNG KEM #D8CFC2 & LÒNG ĐƯỜNG NHỰA #787B80 KHỚP 100% SCENE 3 */
.cs-lop-mat-duong-nhua {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  overflow: hidden;
  background: #52555a;
}

@keyframes csTruotMatDuongMotMach {
  0% {
    transform: translate3d(-620px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes csTruotMatDuongVeTiemMotMach {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-620px, 0, 0);
  }
}

.cs-bang-chuyen-mat-duong {
  width: 1080px;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: csTruotMatDuongMotMach 2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform;
}

.cs-lop-chuyen-canh-xe-may.chieu-ve-lai-tiem .cs-bang-chuyen-mat-duong {
  animation-name: csTruotMatDuongVeTiemMotMach;
}

.cs-hang-gach-via-he {
  height: 24px;
  background: #d8cfc2;
  border-bottom: 2.5px solid #2b1d14;
  display: flex;
  align-items: stretch;
}

.cs-o-gach-via-he {
  width: 44px;
  border-right: 2px solid rgba(43, 29, 20, 0.32);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.42);
  flex-shrink: 0;
}

.cs-hang-bo-via-do-trang {
  height: 9px;
  background: repeating-linear-gradient(
    90deg,
    #e6e3dc 0px,
    #e6e3dc 32px,
    #9ca3af 32px,
    #9ca3af 35px
  );
  border-bottom: 2.5px solid #2b1d14;
}

.cs-long-duong-nhua-xam {
  flex: 1;
  background: linear-gradient(180deg, #787b80 0%, #5b5e63 55%, #45484d 100%);
  display: flex;
  align-items: center;
}

.cs-dai-vach-ke-duong {
  display: flex;
  align-items: center;
  gap: 34px;
  width: 100%;
  padding-left: 18px;
}

.cs-vach-trang-duong {
  width: 52px;
  height: 8px;
  border-radius: 4px;
  background: #fef3c7;
  border: 1.5px solid #2b1d14;
  flex-shrink: 0;
}

/* 4. VỆT GIÓ TỐC ĐỘ */
@keyframes csVetGioMotMach {
  0% {
    transform: translate3d(410px, 0, 0) scaleX(0.7);
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(-180px, 0, 0) scaleX(1.25);
    opacity: 0;
  }
}

.cs-lop-vet-gio-toc-do {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: scaleX(-1);
}

.cs-lop-chuyen-canh-xe-may.chieu-ve-lai-tiem .cs-lop-vet-gio-toc-do {
  transform: scaleX(1);
}

.cs-vet-gio-item {
  position: absolute;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(254, 240, 138, 0.92) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: csVetGioMotMach 0.65s linear both;
  animation-delay: var(--tre-gio, 0ms);
  will-change: transform, opacity;
}

/* 5. TỔ HỢP XE HONDA CUB 81 + CHỦ QUÁN NGỒI LÁI
   - Chợ Sỉ nằm bên trái: Đi Chợ Sỉ xe quay mặt sang trái (scaleX(-1)) và chạy từ phải (+115px) sang trái (-115px).
   - Khi về quán: Xe quay mặt sang phải (scaleX(1)) và chạy từ trái (-115px) sang phải (+115px). */
@keyframes csHanhTrinhXeToanManHinh {
  0% {
    transform: translate3d(115px, 0, 0) scaleX(-1) rotate(-1deg);
  }
  100% {
    transform: translate3d(-115px, 0, 0) scaleX(-1) rotate(-1deg);
  }
}

@keyframes csHanhTrinhXeVeTiemToanManHinh {
  0% {
    transform: translate3d(-115px, 0, 0) rotate(-1deg);
  }
  100% {
    transform: translate3d(115px, 0, 0) rotate(-1deg);
  }
}

.cs-cum-xe-va-lan-khoi {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  width: 248px;
  height: 158px;
  margin-left: -124px;
  z-index: 8;
  animation: csHanhTrinhXeToanManHinh 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform;
}

.cs-lop-chuyen-canh-xe-may.chieu-ve-lai-tiem .cs-cum-xe-va-lan-khoi {
  animation-name: csHanhTrinhXeVeTiemToanManHinh;
}

.cs-svg-xe-may-cho-hang {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(24, 14, 6, 0.55));
}

/* Cụm 4 lớp ảnh Pixel Art thật của Cháu Gái / Cháu Trai Bà Hoàng gắn lên cổ người lái xe */
@keyframes csNhunDauNhanVatTrenXe {
  0% {
    transform: translate3d(0, 0, 0) rotate(3deg);
  }
  100% {
    transform: translate3d(0, -2.5px, 0) rotate(3deg);
  }
}

.cs-nv-dau-pixel-tren-xe {
  position: absolute;
  left: 34.8%;
  top: -3.5%;
  width: 58px;
  height: 58px;
  pointer-events: none;
  z-index: 9;
  clip-path: inset(0 4% 21% 4% round 8px);
  filter: drop-shadow(0 2px 2px rgba(43, 29, 20, 0.55));
  animation: csNhunDauNhanVatTrenXe 0.14s ease-in-out infinite alternate;
}

.cs-nv-layer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

@keyframes csQuayBanhXe360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cs-nan-hoa-quay {
  animation: csQuayBanhXe360 0.16s linear infinite;
}

@keyframes csNhunThanXeNhipMay {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -2.5px, 0);
  }
}

.cs-than-xe-nhun-nhip {
  animation: csNhunThanXeNhipMay 0.14s ease-in-out infinite alternate;
}

/* 6. HỆ THỐNG LÀN KHÓI PÔ XE */
.cs-he-thong-lan-khoi {
  position: absolute;
  left: 15%;
  bottom: 24%;
  width: 0;
  height: 0;
  z-index: 7;
  pointer-events: none;
}

.cs-dai-khoi-luon-song {
  position: absolute;
  right: 0;
  top: -14px;
  width: 140px;
  height: 32px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at right center,
    rgba(255, 252, 241, 0.92) 0%,
    rgba(231, 211, 176, 0.72) 45%,
    rgba(148, 163, 184, 0) 100%
  );
  filter: blur(2.5px);
}

@keyframes csHatKhoiPoMotMach {
  0% {
    transform: translate3d(0, 0, 0) scale(0.25);
    opacity: 0;
  }
  18% {
    opacity: 0.92;
  }
  100% {
    transform: translate3d(-165px, var(--dy-khoi, -14px), 0) scale(2.3);
    opacity: 0;
  }
}

.cs-cum-khoi-po {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--kt-khoi, 22px);
  height: var(--kt-khoi, 22px);
  margin-left: calc(var(--kt-khoi, 22px) * -0.5);
  margin-top: calc(var(--kt-khoi, 22px) * -0.5);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 38%,
    rgba(255, 252, 241, 0.96) 0%,
    rgba(231, 211, 176, 0.85) 54%,
    rgba(168, 162, 158, 0) 100%
  );
  animation: csHatKhoiPoMotMach 0.68s ease-out both;
  animation-delay: var(--tre-khoi, 0ms);
  will-change: transform, opacity;
}

/* Đám khói mở màn sang cảnh đích */
@keyframes csDamKhoiMoMan {
  0%,
  60% {
    transform: scale(0.4);
    opacity: 0;
  }
  80% {
    transform: scale(1.25);
    opacity: 0.72;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.cs-dam-khoi-mo-man-cho-si {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  overflow: hidden;
}

.cs-bong-khoi-lon {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 251, 235, 0.86) 0%,
    rgba(245, 215, 161, 0.55) 52%,
    rgba(245, 215, 161, 0) 76%
  );
  filter: blur(6px);
  animation: csDamKhoiMoMan 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cs-bong-khoi-lon.cs-bong-1 {
  left: -25px;
  bottom: -20px;
}

.cs-bong-khoi-lon.cs-bong-2 {
  right: -25px;
  bottom: 8px;
  animation-delay: 45ms;
}

.cs-bong-khoi-lon.cs-bong-3 {
  left: 22%;
  top: 22%;
  animation-delay: 85ms;
}

/* ================= VÙNG 3: QUẦY GỖ DƯỚI ĐỒNG BỘ (.vung-do-goi-hang) ================= */
.cs-vung-quay-go-duoi {
  flex: 1;
  min-height: 0;
  padding: 10px 10px 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(217, 119, 6, 0.16), transparent 70%),
    linear-gradient(180deg, #3b2314 0%, #24140a 100%);
  border-top: 2px solid #a87945;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
}

/* Hàng 1: Khung Thoại & Avatar Nhân Vật Đang Lái Xe */
.cs-hop-thoai-nhan-vat-duoi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffcf1 0%, #f7ebd2 100%);
  border: 2.5px solid #a87945;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 10px rgba(15, 8, 3, 0.45);
}

.cs-khung-avatar-thoai {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 60%, #432716 0%, #1e1008 100%);
  border: 2px solid #d97706;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.cs-nv-avatar-nho {
  position: relative;
  width: 100%;
  height: 100%;
}

.cs-badge-gioi-tinh-nho {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 11px;
  line-height: 1;
  background: rgba(28, 14, 6, 0.85);
  border: 1px solid #fbbf24;
  border-radius: 4px;
  padding: 1px 2px;
}

.cs-noi-dung-thoai-duoi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-dong-ten-nhan-vat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.cs-ten-nhan-vat-lai {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  color: #5c1d0e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-chip-trang-thai-lai {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fef08a;
  border: 1px solid #450a0a;
  white-space: nowrap;
  flex-shrink: 0;
}

.cs-cau-thoai-nhan-vat {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11.2px;
  font-weight: 700;
  line-height: 1.32;
  color: #2b180d;
}

/* Hàng 2: Bảng 3 Ô Thông Tin Xe Cub & Chuyến Hàng Sỉ */
.cs-bang-cong-to-met-cub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.cs-o-chi-so-cub {
  padding: 7px 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2d180c 0%, #1c0e06 100%);
  border: 1.5px solid #8c5e32;
  box-shadow: inset 0 1px 0 rgba(255, 236, 179, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.cs-o-chi-so-cub.cs-o-giua-noi-bat {
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  border: 2px solid #d97706;
}

.cs-nhan-chi-so-cub {
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 900;
  color: #fde68a;
  letter-spacing: 0.2px;
}

.cs-o-chi-so-cub.cs-o-giua-noi-bat .cs-nhan-chi-so-cub {
  color: #78350f;
}

.cs-gia-tri-chi-so-cub {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cs-gia-tri-chi-so-cub.cs-chu-do-son {
  color: #b91c1c;
}

.cs-phu-chi-so-cub {
  font-family: var(--font-body);
  font-size: 8.8px;
  font-weight: 700;
  color: #d7b899;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cs-o-chi-so-cub.cs-o-giua-noi-bat .cs-phu-chi-so-cub {
  color: #5c2808;
}





/* ================= ĐỒ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;
}

.nc-day-mau-toc-mien-phi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 6px;
}

.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: #2b180d;
  border: 1.5px solid #6d4c41;
  color: #f5dec3;
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}

.nc-nut-mau-toc-free.dang-chon {
  background: linear-gradient(180deg, #fef08a 0%, #fbbf24 100%);
  border-color: #dc2626;
  color: #450a0a;
}

.nc-cham-mau-toc {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid #1c1008;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.45);
}

.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; }

.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-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);
  }
}