/* ================= ANIMATION TRUYỆN TRANH TOÀN MÀN HÌNH: CƠ NGHIỆP BÀ HOÀNG ================= */

.man-hinh-truyen-tranh-co-nghiep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2650;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 13px 14px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 26%, rgba(251, 191, 36, 0.2) 0%, transparent 64%),
    linear-gradient(180deg, #1a0d06 0%, #2b1409 52%, #120803 100%);
  color: #fffbeb;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

/* Ở Khung 5 (Giao diện Design), chặn thao tác nhấp màn hình tự qua trang nên để con trỏ mặc định */
.man-hinh-truyen-tranh-co-nghiep.trang-comic-5 {
  cursor: default;
}

/* Hiệu ứng chuyển cảnh lật trang truyện tranh (Page-Turn & Shutter Transition) */
.man-hinh-truyen-tranh-co-nghiep.dang-lat-sang-trang-ke .vung-khung-tranh-focus,
.man-hinh-truyen-tranh-co-nghiep.dang-lat-sang-trang-ke .hop-loi-dan-truyen-tranh {
  animation: roiKhungSangTraiComic 0.19s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.man-hinh-truyen-tranh-co-nghiep.dang-lat-ve-trang-truoc .vung-khung-tranh-focus,
.man-hinh-truyen-tranh-co-nghiep.dang-lat-ve-trang-truoc .hop-loi-dan-truyen-tranh {
  animation: roiKhungSangPhaiComic 0.19s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes roiKhungSangTraiComic {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-26px) scale(0.95) rotate(-1.2deg);
    filter: brightness(1.3);
  }
}

@keyframes roiKhungSangPhaiComic {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    transform: translateX(26px) scale(0.95) rotate(1.2deg);
    filter: brightness(1.3);
  }
}

/* Lớp hạt chấm bi giấy truyện tranh (Halftone Screentone) */
.lop-hat-giay-truyen-tranh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image: radial-gradient(#fbbf24 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Thanh trên cùng: Tên khung bên trái + Chữ "bỏ qua >>>" góc phải trên (Không đóng khung nút) */
.thanh-tren-truyen-tranh {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nhan-chuong-truyen-tranh {
  font-size: 11.5px;
  font-weight: 800;
  color: #fcd34d;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  text-shadow: 0 1.5px 0 #140803;
}

.chu-bo-qua-goc-phai {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 2px;
  margin: 0;
  color: #fde68a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
  cursor: pointer;
  opacity: 0.92;
  text-shadow: 0 1.5px 0 #140803;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.chu-bo-qua-goc-phai:hover,
.chu-bo-qua-goc-phai:active {
  opacity: 1;
  color: #ffffff;
  transform: translateX(2px);
}

/* Dải đánh dấu mạch khung tranh nối tiếp */
.dai-khung-tranh-noi-tiep {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 5px;
}

.o-nho-mach-truyen {
  flex: 1;
  height: 6px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: rgba(254, 243, 199, 0.2);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: all 0.22s ease;
}

.o-nho-mach-truyen.da-qua {
  background: rgba(251, 191, 36, 0.58);
}

.o-nho-mach-truyen.dang-xem {
  background: #fde047;
  box-shadow: 0 0 10px rgba(253, 224, 71, 0.8);
  height: 8px;
}

/* Vùng Khung Tranh Truyện Tranh Chính (Focus 1 câu chuyện / hình ảnh) */
.vung-khung-tranh-focus {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  margin: 2px 0 6px;
}

.khung-tranh-chinh {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 278px;
  max-height: 392px;
  border-radius: 10px;
  border: 3.5px solid #fef3c7;
  outline: 3px solid #0f0703;
  background: linear-gradient(180deg, #451a03 0%, #291005 100%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.78),
    inset 0 0 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: latKhungTruyenTranh 0.38s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.man-hinh-truyen-tranh-co-nghiep.vao-tu-trang-truoc .khung-tranh-chinh {
  animation: latKhungTuTrangTruoc 0.38s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes latKhungTruyenTranh {
  0% {
    opacity: 0;
    transform: translateX(22px) scale(0.95) rotate(0.9deg);
    filter: brightness(1.32) contrast(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: brightness(1) contrast(1);
  }
}

@keyframes latKhungTuTrangTruoc {
  0% {
    opacity: 0;
    transform: translateX(-22px) scale(0.95) rotate(-0.9deg);
    filter: brightness(1.32) contrast(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: brightness(1) contrast(1);
  }
}

.nhan-goc-khung-tranh {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 9;
  background: #fef3c7;
  color: #1c0a03;
  border: 2px solid #1c0a03;
  border-radius: 4px;
  padding: 2.5px 8px;
  font-size: 10.2px;
  font-weight: 900;
  box-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.7);
}

/* ================= KHUNG 1: BỨC TRANH THỰC TẾ BÀ CHỦ ĐỨNG NGOÀI NHÌN VÀO TIỆM TRỐNG TRƠN CẢM THÁN ================= */
.tranh-canh-1-thuc-te {
  padding: 0;
  background: #1f0e06;
}

.lop-anh-tranh-canh-1-thuc-te {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 8, 3, 0.05) 0%, rgba(20, 8, 3, 0.12) 70%, rgba(20, 8, 3, 0.42) 100%),
    url('../../assets/ngoai_canh/intro_canh1_tiem_trong.jpg') 22% bottom / cover no-repeat;
  image-rendering: auto;
  animation: panZoomCanh1Truyen 9s ease-in-out infinite alternate;
}

@keyframes panZoomCanh1Truyen {
  0% {
    transform: scale(1.01);
    background-position: 19% bottom;
  }
  100% {
    transform: scale(1.055);
    background-position: 26% bottom;
  }
}

.lop-tia-nang-truyen {
  position: absolute;
  inset: -18%;
  background: conic-gradient(
    from 205deg at 76% 8%,
    rgba(253, 224, 71, 0.25) 0deg,
    transparent 32deg,
    rgba(253, 224, 71, 0.16) 52deg,
    transparent 88deg
  );
  pointer-events: none;
  z-index: 3;
}

.cum-hat-nang-bay-comic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.hat-nang-comic {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 8px #fde047;
  opacity: 0.7;
  animation: hatNangTroiNhe 3.6s ease-in-out infinite alternate;
}

.hat-nang-comic.h1 {
  top: 28%;
  left: 48%;
  animation-delay: 0s;
}
.hat-nang-comic.h2 {
  top: 42%;
  left: 62%;
  width: 5px;
  height: 5px;
  animation-delay: 0.8s;
}
.hat-nang-comic.h3 {
  top: 56%;
  left: 44%;
  animation-delay: 1.5s;
}
.hat-nang-comic.h4 {
  top: 34%;
  left: 74%;
  animation-delay: 2.1s;
}

@keyframes hatNangTroiNhe {
  from {
    transform: translateY(0) scale(0.85);
    opacity: 0.35;
  }
  to {
    transform: translateY(-10px) scale(1.2);
    opacity: 0.9;
  }
}

/* Bong bóng cảm thán nhỏ bật cạnh bà chủ ở Khung 1 */
.huy-hieu-cam-than-canh-1 {
  position: absolute;
  left: 26%;
  top: 38%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fffbeb;
  border: 2px solid #1c0a03;
  box-shadow: 2.5px 2.5px 0 #1c0a03;
  color: #b91c1c;
  animation: nhipCamThanCanh1 1.5s ease-in-out infinite alternate;
}

.huy-hieu-cam-than-canh-1 .ky-hieu-cam-than {
  font-size: 12px;
  font-weight: 900;
  color: #dc2626;
}

.huy-hieu-cam-than-canh-1 small {
  font-size: 10.5px;
  font-weight: 900;
  color: #451a03;
}

@keyframes nhipCamThanCanh1 {
  from {
    transform: translateY(0) rotate(-3deg) scale(0.97);
  }
  to {
    transform: translateY(-4px) rotate(2deg) scale(1.04);
  }
}

/* ================= KHUNG 2: CẬN CẢNH HỘP BÁNH ĐANISA TRÊN MẶT BÀN GỖ ================= */
.tranh-canh-2 {
  background:
    radial-gradient(circle at 50% 48%, rgba(253, 224, 71, 0.34) 0%, rgba(180, 83, 9, 0.2) 48%, transparent 72%),
    linear-gradient(180deg, #3b1708 0%, #6b2a0e 65%, #341305 100%);
}

.lop-nen-quay-go-canh-2 {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 11, 4, 0.58) 0%, rgba(45, 18, 6, 0.72) 100%),
    url('../../assets/sprites/bg_quay_tiem.png') center center / cover no-repeat;
  filter: blur(1.5px);
  transform: scale(1.04);
}

.mat-ban-go-day-khung-2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 237, 213, 0.04) 0px,
      rgba(255, 237, 213, 0.04) 18px,
      transparent 18px,
      transparent 36px
    ),
    linear-gradient(180deg, #9a4414 0%, #6e2c0b 45%, #3e1705 100%);
  border-top: 3px solid #290f03;
  box-shadow: inset 0 3px 0 rgba(253, 224, 71, 0.32);
  z-index: 2;
}

.vong-sang-tam-diem-comic {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 2px dashed rgba(253, 224, 71, 0.45);
  z-index: 3;
  animation: xoayVongSangComic 12s linear infinite;
}

@keyframes xoayVongSangComic {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.san-khau-ban-go-can-canh {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 18px 14px 10px;
}

.tam-diem-hop-danisa-comic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  filter: drop-shadow(0 6px 16px rgba(253, 224, 71, 0.55));
  animation: nhanVatThoNhe 1.8s ease-in-out infinite alternate;
}

.nhan-von-bay-comic {
  background: #fde047;
  color: #1c0a03;
  border: 2px solid #1c0a03;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.65);
}

/* ================= KHUNG 3: CHIA ĐÔI BẰNG 1 ĐƯỜNG CHIA XÉO NHẸ Ở GIỮA (TRÊN: CHỢ SỈ • DƯỚI: QUẦY HÀNG GỖ) ================= */
.khung-tranh-chinh.tranh-canh-3-cat-cheo {
  display: block !important;
  padding: 0 !important;
  background: #1a0b04;
}

.tranh-canh-3-cat-cheo .nua-khung-tranh {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
}

/* Nửa trên: Ảnh thực tế Chợ Sỉ Đầu Hẻm (scene4_cho_dau_hem.jpg), cắt xéo nhẹ ở đáy */
.tranh-canh-3-cat-cheo .nua-tren-cho-si {
  top: 0;
  height: 53.2%;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  z-index: 2;
}

.lop-anh-nen-nua-tren-cho-si {
  position: absolute;
  inset: 0;
  background: url('../../assets/ngoai_canh/scene4_cho_dau_hem.jpg') center 34% / cover no-repeat;
  transform: scale(1.03);
  z-index: 1;
}

.lop-phu-toi-nua-khung {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 28, 20, 0.38) 0%,
    rgba(8, 24, 16, 0.68) 100%
  );
  z-index: 2;
}

/* Nửa dưới: Background quầy tạp hóa & mặt bàn gỗ ấm áp cho Hũ Kẹo Oishi và Sổ Nam Tào */
.tranh-canh-3-cat-cheo .nua-duoi-quay-hang {
  bottom: 0;
  height: 53.2%;
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
}

.lop-anh-nen-nua-duoi-quay-go {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(48, 19, 6, 0.46) 0%, rgba(30, 11, 3, 0.72) 100%),
    url('../../assets/sprites/bg_quay_tiem.png') center bottom / cover no-repeat;
  z-index: 1;
}

/* Mặt bàn gỗ ấm áp đỡ dưới Hũ Kẹo và Sổ Nam Tào ở nửa dưới Khung 3 */
.mat-ban-go-keo-va-so {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(254, 243, 199, 0.05) 0px,
      rgba(254, 243, 199, 0.05) 14px,
      transparent 14px,
      transparent 28px
    ),
    linear-gradient(180deg, #9a4212 0%, #692909 55%, #3d1604 100%);
  border-top: 2.5px solid #260d02;
  box-shadow: inset 0 2px 0 rgba(253, 224, 71, 0.35);
  z-index: 2;
}

/* Đường chia xéo nhẹ ở giữa Khung 3 (độ xéo ít: -3.6deg) */
.duong-chia-xeo-giua-canh-3 {
  position: absolute;
  top: 50%;
  left: -6%;
  right: -6%;
  height: 6px;
  background: #fef3c7;
  border-top: 2.5px solid #140803;
  border-bottom: 2.5px solid #140803;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
  transform: translateY(-50%) rotate(-3.6deg);
  pointer-events: none;
  z-index: 7;
}

.noi-dung-nua-khung-tranh {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 94%;
  max-width: 336px;
}

.cum-icon-hang-si-canh-3,
.cum-keo-va-so-tren-ban-go {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.o-vat-pham-comic,
.de-go-ung-vat-pham {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 251, 235, 0.94) 0%, rgba(253, 230, 138, 0.88) 70%, rgba(245, 158, 11, 0.85) 100%);
  border: 2px solid #1e0b03;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 #1e0b03,
    0 6px 12px rgba(0, 0, 0, 0.55);
}

.hop-chu-nua-khung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(20, 9, 3, 0.82);
  border: 1.5px solid rgba(253, 224, 71, 0.65);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.tieu-de-nua-khung {
  font-size: 12.8px;
  color: #fde047;
  font-weight: 900;
  text-shadow: 0 1.5px 0 #140702;
}

.phu-de-nua-khung {
  font-size: 10.8px;
  color: #fffbeb;
  font-weight: 700;
  line-height: 1.25;
}

/* ================= KHUNG 4: GIẤC MƠ PHÍA CUỐI CON PHỐ (TẠP HÓA ICON NỮ CHÍNH) ================= */
.tranh-canh-4-bi-an {
  background:
    radial-gradient(circle at 24% 55%, rgba(251, 191, 36, 0.28) 0%, transparent 48%),
    linear-gradient(180deg, #090d16 0%, #1e1b4b 60%, #170d06 100%);
}

.bau-troi-dem-hem-comic {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 13, 22, 0.78) 0%, rgba(15, 23, 42, 0.86) 100%),
    url('../../assets/ngoai_canh/scene3_cap1_6_goc.jpg') center center / cover no-repeat;
  filter: grayscale(0.45) contrast(1.1);
}

.day-nha-bi-an-phia-xa {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 92%;
  align-items: stretch;
}

.khoi-nha-comic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 6px;
  border-radius: 10px;
  text-align: center;
}

.nha-hien-tai-sang {
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.85) 0%, rgba(120, 53, 15, 0.92) 100%);
  border: 2px solid #fde047;
  box-shadow:
    0 0 18px rgba(253, 224, 71, 0.42),
    0 4px 0 #1c0a03;
}

/* Icon Nữ Chính (Nhân vật chính) trong ô Tạp Hóa Hiện Tại ở Khung 4 */
.khung-icon-nu-chinh-tap-hoa {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2.5px solid #fde047;
  background: radial-gradient(circle at 50% 40%, #fffbeb 0%, #fde68a 75%, #f59e0b 100%);
  box-shadow:
    0 3px 0 #1c0a03,
    0 0 12px rgba(253, 224, 71, 0.55);
  overflow: hidden;
  flex-shrink: 0;
}

.khung-icon-nu-chinh-tap-hoa .anh-nu-chinh-o-tap-hoa {
  position: relative;
  width: 100%;
  height: 100%;
}

.khung-icon-nu-chinh-tap-hoa .anh-nu-chinh-o-tap-hoa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nha-hien-tai-sang strong {
  font-size: 12px;
  color: #fef08a;
  text-shadow: 0 1.5px 0 #1c0a03;
}

.nha-hien-tai-sang small {
  font-size: 10px;
  color: #bbf7d0;
  font-weight: 800;
}

.nha-bong-toi-bi-an {
  background: rgba(15, 23, 42, 0.88);
  border: 2px dashed rgba(148, 163, 184, 0.5);
  color: #94a3b8;
  box-shadow: 0 4px 0 rgba(2, 6, 23, 0.85);
}

.dau-hoi-bi-an {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.92);
  border: 1.5px solid rgba(253, 224, 71, 0.45);
  color: #fde047;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nhapNhayBiAn 2s ease-in-out infinite alternate;
}

@keyframes nhapNhayBiAn {
  from {
    opacity: 0.5;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

.nha-bong-toi-bi-an strong {
  font-size: 11px;
  color: #e2e8f0;
}

.nha-bong-toi-bi-an small {
  font-size: 9.8px;
  color: #94a3b8;
}

/* ================= KHUNG 5: KHAI TRƯƠNG & DESIGN DIỆN MẠO / BẢNG HIỆU ================= */
.tranh-canh-5-khai-truong {
  padding: 12px 10px 10px;
  justify-content: flex-end;
  gap: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(251, 191, 36, 0.28) 0%, transparent 65%),
  linear-gradient(180deg, #431407 0%, #240c04 100%);
  cursor: default;
}

.lop-nen-mat-tien-canh-5 {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(32, 12, 4, 0.36) 0%, rgba(24, 9, 3, 0.72) 100%),
    url('../../assets/ngoai_canh/scene3_cap1_6_goc.jpg') center center / cover no-repeat;
  z-index: 1;
}

/* Bảng hiệu đè khít 100% lên đúng khung biển hiệu trên mặt tiền scene3_cap1_6_goc.jpg */
.bang-hieu-truyen-tranh {
  position: absolute;
  top: 9.2%;
  left: 11.5%;
  width: 77%;
  height: 11.4%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4px 12px;
  border-radius: 4px;
  border: 3px solid #991b1b;
  outline: 2px solid #78350f;
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  color: #991b1b;
  font-family: 'Paytone One', 'Oswald', sans-serif;
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 2px rgba(254, 249, 195, 0.65),
    0 5px 14px rgba(0, 0, 0, 0.65);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bang-hieu-truyen-tranh span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cum-nhan-vat-chinh-truyen {
  position: relative;
  z-index: 4;
  margin-top: auto;
  margin-bottom: 2px;
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
  animation: nhanVatThoNhe 2.6s ease-in-out infinite alternate;
}

@keyframes nhanVatThoNhe {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

.cum-nhan-vat-chinh-truyen .anh-nhan-vat-chinh-comic {
  position: relative;
  width: 144px;
  height: 144px;
}

.cum-nhan-vat-chinh-truyen .anh-nhan-vat-chinh-comic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hop-tuy-chinh-nhanh-comic {
  position: relative;
  z-index: 6;
  width: 94%;
  background: rgba(20, 9, 4, 0.92);
  border: 2px solid #f59e0b;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.65);
  cursor: default;
}

.hang-chon-nhan-vat-comic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.nut-comic-nho {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  background: rgba(67, 20, 7, 0.9);
  color: #fed7aa;
  font-size: 11.8px;
  font-weight: 800;
  cursor: pointer;
}

.nut-comic-nho.dang-chon {
  background: #fde047;
  color: #1c0a03;
  border-color: #ffffff;
}

.nut-comic-nho.nut-doi-do {
  background: rgba(245, 158, 11, 0.28);
  color: #fef08a;
}

.nut-comic-nho.nut-doi-do.dang-chon-phu {
  background: rgba(251, 191, 36, 0.38);
  border-color: #fde047;
  color: #fffbeb;
}

.hang-ten-va-mau-comic {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6px;
}

.o-nhap-ten-chu-comic,
.o-nhap-ten-quan-comic {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 7px;
  border: 2px solid #f59e0b;
  background: #fffbeb;
  color: #1c0a03;
  font-size: 13.5px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.4px;
}

.day-mau-bang-hieu-comic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
}

.nut-mau-bang-hieu-comic {
  width: 100%;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  cursor: pointer;
  padding: 0;
}

.nut-mau-bang-hieu-comic.dang-chon {
  border-color: #fde047;
  transform: scale(1.06);
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.85);
}

/* ================= BÓNG THOẠI NHÂN VẬT CHÍNH & HỘP LỜI KỂ CHUYỆN KIỂU NPC NÓI (RPG DIALOGUE BOX) ================= */
.bong-thoai-nhan-vat-comic {
  position: relative;
  z-index: 6;
  margin-top: -12px;
  margin-left: 4px;
  margin-right: 4px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 2px solid #1e0b03;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 236, 179, 0.03) 0px,
      rgba(255, 236, 179, 0.03) 2px,
      transparent 2px,
      transparent 4px
    ),
    linear-gradient(180deg, rgba(78, 34, 11, 0.95) 0%, rgba(44, 18, 6, 0.98) 100%);
  color: #fffbeb;
  box-shadow:
    inset 0 0 0 2px #d97706,
    inset 0 3px 0 rgba(254, 240, 138, 0.42),
    0 4px 0 #1b0a02,
    0 6px 12px rgba(0, 0, 0, 0.55);
  animation: hienThoaiTruyenTranh 0.28s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hienThoaiTruyenTranh {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.avatar-nho-nhan-vat-comic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #fde047;
  background: radial-gradient(circle at 50% 40%, #fffbeb 0%, #fde68a 75%, #f59e0b 100%);
  box-shadow: 0 2px 0 #1e0b03;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.bong-thoai-nhan-vat-comic.dang-chay-chu .avatar-nho-nhan-vat-comic {
  animation: nhipAvatarNpcNoi 0.24s steps(2, end) infinite alternate;
}

@keyframes nhipAvatarNpcNoi {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-2px) scale(1.04);
  }
}

.avatar-nho-nhan-vat-comic .anh-avatar-nho-comic {
  position: relative;
  width: 100%;
  height: 100%;
}

.avatar-nho-nhan-vat-comic .anh-avatar-nho-comic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

.hang-ten-va-song-am-comic {
  display: flex;
  align-items: center;
  gap: 5px;
}

.the-ten-npc-comic {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  border: 1.5px solid #1e0b03;
  box-shadow:
    inset 0 1px 0 #fde047,
    0 1.5px 0 #1e0b03;
  font-size: 10px;
  font-weight: 900;
  color: #fffbeb;
  text-shadow: 0 1px 0 #1e0b03;
}

.nhan-trang-thai-thoai-comic {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  border: 1.5px solid #1e0b03;
  color: #3b1504;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 1.5px 0 #1e0b03;
}

/* Sóng âm Pixel nhảy bậc thang giống hệt lúc NPC nói */
.song-am-npc-comic {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  margin-left: auto;
  opacity: 0.35;
}

.bong-thoai-nhan-vat-comic.dang-chay-chu .song-am-npc-comic {
  opacity: 1;
}

.thanh-song-am-comic {
  width: 3px;
  height: 3px;
  background: #fde047;
  border: 0.5px solid #1e0b03;
}

.bong-thoai-nhan-vat-comic.dang-chay-chu .thanh-song-am-comic.s1 {
  animation: songAmComicNhay 0.28s steps(2, end) infinite;
}
.bong-thoai-nhan-vat-comic.dang-chay-chu .thanh-song-am-comic.s2 {
  animation: songAmComicNhay 0.28s steps(2, end) 0.09s infinite;
}
.bong-thoai-nhan-vat-comic.dang-chay-chu .thanh-song-am-comic.s3 {
  animation: songAmComicNhay 0.28s steps(2, end) 0.18s infinite;
}

@keyframes songAmComicNhay {
  0%,
  100% {
    height: 3px;
  }
  50% {
    height: 9px;
  }
}

.khung-dong-thoai-chay-comic {
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(22, 9, 3, 0.68);
  border: 1.5px solid #1b0a02;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.65),
    0 1px 0 rgba(253, 224, 71, 0.25);
  min-height: 2.5em;
  display: flex;
  align-items: center;
}

/* Font chữ kể chuyện cảm xúc giống lời thoại nhân vật (Ghi đè quy tắc reset font của typography.css) */
#app .man-hinh-truyen-tranh-co-nghiep .cau-thoai-nhan-vat-comic,
.man-hinh-truyen-tranh-co-nghiep .cau-thoai-nhan-vat-comic {
  margin: 0;
  font-family: 'Mali', 'Patrick Hand', 'Nunito', cursive !important;
  font-size: 12.2px;
  line-height: 1.36 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #fef08a;
  text-shadow: 0 1.5px 0 #160701;
}

.con-tro-chu-chay-comic,
.con-tro-loi-dan-comic {
  display: none;
  margin-left: 3px;
  font-size: 10px;
  color: #fde047;
}

.bong-thoai-nhan-vat-comic.dang-chay-chu .con-tro-chu-chay-comic,
.hop-loi-dan-truyen-tranh.dang-chay-chu .con-tro-loi-dan-comic {
  display: inline-block;
  animation: nhapNhayConTroComic 0.36s steps(2, start) infinite;
}

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

/* Hộp lời dẫn kể chuyện ở dưới */
.hop-loi-dan-truyen-tranh {
  position: relative;
  z-index: 5;
  padding: 9px 12px 10px;
  border-radius: 9px;
  border: 2px solid #1e0b03;
  background:
    linear-gradient(180deg, rgba(38, 16, 6, 0.94) 0%, rgba(20, 8, 3, 0.96) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(251, 191, 36, 0.52),
    0 4px 0 #120602,
    0 6px 16px rgba(0, 0, 0, 0.55);
  min-height: 54px;
}

.nhan-ke-chuyen-nho {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(253, 224, 71, 0.45);
  color: #fcd34d;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

#app .man-hinh-truyen-tranh-co-nghiep .van-ban-loi-dan-comic,
#app .man-hinh-truyen-tranh-co-nghiep .van-ban-loi-dan-comic span,
.man-hinh-truyen-tranh-co-nghiep .van-ban-loi-dan-comic {
  margin: 0;
  font-family: 'Mali', 'Patrick Hand', 'Nunito', cursive !important;
  font-size: 12.2px;
  line-height: 1.42 !important;
  color: #fffbeb;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1.5px 0 #120602;
}

/* Mũi tên ▼ nhấp nhô kiểu RPG ở góc dưới phải hộp kể chuyện khi đã hiện xong chữ */
.mui-ten-rpg-tiep-comic {
  position: absolute;
  right: 8px;
  bottom: 5px;
  font-size: 10px;
  color: #fde047;
  opacity: 0.9;
  animation: nhayMuiTenRpgComic 0.65s steps(2, end) infinite;
}

@keyframes nhayMuiTenRpgComic {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2.5px);
  }
}

/* Dòng chữ nhắc nhấp màn hình ở sát đáy (Khung 1..4) & Nút Khai Trương (Khung 5) */
.chan-nhac-cham-man-hinh {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
}

.chu-quay-lai-trang-truoc {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 4px;
  color: #fdba74;
  font-size: 11.8px;
  font-weight: 800;
  cursor: pointer;
}

.dong-chu-cham-tiep {
  font-size: 12px;
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.35px;
  animation: nhapNhayNhacCham 1.4s ease-in-out infinite alternate;
}

@keyframes nhapNhayNhacCham {
  from {
    opacity: 0.55;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(3px);
  }
}

/* Nút xác nhận Khai Trương riêng ở Khung 5 (khi đã chặn chạm màn hình tự qua trang) */
.nut-xac-nhan-khai-truong-comic {
  padding: 7px 14px;
  border-radius: 8px;
  border: 2px solid #1e0b03;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #290f02;
  font-size: 12px;
  font-weight: 900;
  box-shadow:
    inset 0 1.5px 0 #fef9c3,
    0 3px 0 #1e0b03,
    0 0 12px rgba(253, 224, 71, 0.45);
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.nut-xac-nhan-khai-truong-comic:hover {
  filter: brightness(1.06);
}

.nut-xac-nhan-khai-truong-comic:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 #fef9c3,
    0 1px 0 #1e0b03;
}

/* ==================== MODAL ỦNG HỘ TÁC GIẢ RIÊNG TRONG CÀI ĐẶT ==================== */
.than-modal-ung-ho-rieng {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.loi-cam-on-ung-ho-rieng {
  margin: 0;
  font-size: 12px;
  line-height: 1.42;
  color: #fef3c7;
  font-weight: 700;
}

.the-thong-tin-chuyen-khoan-ung-ho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid #f59e0b;
  background: #fffbeb;
  color: #451a03;
}

.cot-qr-ung-ho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #d97706;
  flex-shrink: 0;
}

.anh-qr-ung-ho-that {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.chu-thich-qr-nho {
  font-size: 9.5px;
  font-weight: 800;
  color: #78350f;
}

.cot-chi-tiet-tk-ung-ho {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dong-tk-ung-ho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
}

.nhan-tk-mo {
  color: #78350f;
  font-weight: 700;
}

.gia-tri-tk-noi {
  color: #451a03;
  font-weight: 900;
}

.gia-tri-stk-vang {
  color: #b91c1c;
  font-weight: 900;
  font-size: 12px;
}

.hang-nut-sao-chep-stk {
  margin-top: 4px;
}

.nut-sao-chep-stk-ung-ho {
  width: 100%;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1.5px solid #d97706;
  background: #fde047;
  color: #451a03;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
}

.nut-sao-chep-stk-ung-ho.da-chep {
  background: #10b981;
  color: #ffffff;
  border-color: #047857;
}

.hang-tha-tim-ung-ho-rieng {
  display: flex;
  justify-content: center;
}

.nut-moi-tra-da-tha-tim {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid #fde047;
  background: #be185d;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

/* Thanh phím tắt gọn trong Cài Đặt */
.thanh-tat-co-nghiep-cai-dat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(45, 18, 6, 0.72);
  border-bottom: 1px solid rgba(245, 158, 11, 0.28);
}

.nut-tat-co-nghiep-cai-dat {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1.5px solid rgba(251, 191, 36, 0.4);
  background: rgba(124, 45, 18, 0.55);
  color: #fef08a;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}

.nut-tat-co-nghiep-cai-dat.nut-ung-ho-noi {
  background: rgba(190, 24, 93, 0.55);
  border-color: rgba(244, 114, 182, 0.45);
  color: #fce7f3;
}