/* ═══════════════════════════════════════════════════════════════════════
   naptien.css — Tàng Tiền Các (v11.38)
   Phong cách: Matcha Soft 3D + plant pattern + screen-blend GIF gifts
   ═══════════════════════════════════════════════════════════════════════ */

body {
  background-color: var(--msd-ink-deepest, #14181a) !important;
  background-image: radial-gradient(circle at top center,
    color-mix(in srgb, var(--msd-matcha-700, #3d5a30) 18%, #14181a),
    #0a0d0c 65%) !important;
  background-attachment: fixed;
  padding-top: 100px;
  color: var(--msd-paper-primary, #f0e4cc);
}
html.in-iframe body { padding-top: 0 !important; }

#main-header { box-shadow: 0 4px 20px rgba(0,0,0,0.5); }

/* ── PAGE CONTAINER ── */
.np-page {
  max-width: 1100px;
  margin: 0 auto 50px;
  padding: 36px;
  background: var(--msd-surface, #1b1f1d);
  border: 1px solid var(--msd-border, #3a423d);
  border-radius: var(--msd-radius-xl, 28px);
  box-shadow: var(--msd-shadow-lg);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  position: relative;
}

/* [v11.43] Top-strip deprecated — balance đã chuyển vào right pane (cùng hàng ad slot).
   Giữ rỗng để tránh layout shift nếu HTML cũ còn ref. */
.np-top-strip { display: none; }

/* ── Ad slot v2 (S39) — carousel 3 gói VIP, đồng bộ Flash Sale config ── */
.np-ad-slot {
  width: 100%;
  min-height: 220px;
  border-radius: var(--msd-radius-lg);
  background: linear-gradient(135deg, #0c0a1e 0%, #1e1440 60%, #0e0b22 100%);
  border: 1px solid color-mix(in srgb, var(--msd-amber-500) 32%, transparent);
  box-shadow: var(--msd-shadow-md);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.3s ease;
}
.np-ad-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(212, 175, 55, 0.18);
}
.np-ad-slot:focus-visible {
  outline: 2px solid var(--msd-amber-300);
  outline-offset: 2px;
}
/* Khi flash-sale active, đổi viền sang đỏ pulse */
.np-ad-slot.is-onsale {
  border-color: color-mix(in srgb, var(--msd-crimson-400) 60%, transparent);
  animation: npAdSlotPulse 2.2s ease-in-out infinite;
}
@keyframes npAdSlotPulse {
  0%, 100% { box-shadow: var(--msd-shadow-md), 0 0 0 0 rgba(239, 83, 80, 0.0); }
  50%      { box-shadow: var(--msd-shadow-md), 0 0 22px 4px rgba(239, 83, 80, 0.28); }
}

/* Lớp nền: ảnh nhân vật phóng to để chỉ hiển thị từ ngực-vai lên đầu.
   Mặc định scale 200% + anchor top; mỗi slide có thể override qua inline style (set bởi JS). */
.np-ad-slot__bg {
  position: absolute;
  inset: 0;
  background-size: auto 200%;
  background-position: right -8% top -6%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.55s ease;
  z-index: 2;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
}
.np-ad-slot__bg.is-visible { opacity: 1; }

/* Gradient phủ trái → giúp text bên trái dễ đọc, không che mặt nhân vật bên phải */
.np-ad-slot__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 6, 22, 0.88) 0%,
    rgba(8, 6, 22, 0.62) 28%,
    rgba(8, 6, 22, 0.18) 50%,
    rgba(8, 6, 22, 0) 70%
  );
  z-index: 3;
  pointer-events: none;
}

/* ─────────────── Hiệu ứng đặc trưng per slide ─────────────── */
/* Effect 1: AURA — Hào quang vàng-cam pulse quanh nhân vật (vip1 / qcnt1) */
.np-ad-slot__aura {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: 60%;
  height: 130%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgba(255, 180, 80, 0.42) 0%,
    rgba(255, 140, 60, 0.22) 25%,
    rgba(255, 100, 50, 0.08) 45%,
    transparent 65%
  );
  opacity: 0;
  filter: blur(8px);
  animation: npAdAuraPulse 3.4s ease-in-out infinite;
}
.np-ad-slot[data-effect="aura"] .np-ad-slot__aura { opacity: 1; }
@keyframes npAdAuraPulse {
  0%, 100% { transform: scale(1);    filter: blur(8px)  brightness(1);    }
  50%      { transform: scale(1.08); filter: blur(12px) brightness(1.25); }
}

/* Effect 2: MIST — Sương mù trôi ngang (vip6 / qcnt2) */
.np-ad-slot__mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(ellipse 280px 100px at 30% 65%, rgba(180, 210, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 220px 80px  at 70% 35%, rgba(150, 190, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 200px 70px  at 50% 80%, rgba(200, 220, 255, 0.16), transparent 70%);
  background-size: 200% 100%, 220% 100%, 240% 100%;
  background-position: 0 0, 0 0, 0 0;
  mix-blend-mode: screen;
  animation: npAdMistDrift 16s linear infinite;
}
.np-ad-slot[data-effect="mist"] .np-ad-slot__mist { opacity: 1; }
@keyframes npAdMistDrift {
  0%   { background-position: 0% 0%,    0% 0%,    0% 0%; }
  100% { background-position: 100% 0%, -100% 0%, 100% 0%; }
}

/* Effect 2b: DARKMIST — Sương u ám đỏ-đen, tâm linh sát giả (vip1 / qcnt1 alt) */
.np-ad-slot__darkmist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(ellipse 360px 140px at 28% 72%, rgba(90, 18, 22, 0.55), transparent 72%),
    radial-gradient(ellipse 300px 110px at 70% 38%, rgba(60, 8, 14, 0.5),  transparent 72%),
    radial-gradient(ellipse 260px 90px  at 50% 88%, rgba(20, 5, 8,   0.6),  transparent 72%);
  background-size: 200% 100%, 220% 100%, 240% 100%;
  background-position: 0 0, 0 0, 0 0;
  mix-blend-mode: multiply;
  animation: npAdDarkMistDrift 22s linear infinite;
}
.np-ad-slot[data-effect="darkmist"] .np-ad-slot__darkmist { opacity: 1; }
/* Khi darkmist active, tint nhẹ slot màu đỏ-đen u ám */
.np-ad-slot[data-effect="darkmist"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 60% 50%, rgba(120, 10, 20, 0.18), transparent 70%);
  mix-blend-mode: multiply;
  animation: npAdDarkPulse 4.5s ease-in-out infinite;
}
@keyframes npAdDarkMistDrift {
  0%   { background-position: 0% 0%,    0% 0%,    0% 0%; }
  100% { background-position: 80% 0%,  -80% 0%,  60% 0%; }
}
@keyframes npAdDarkPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* Effect 2c: SNOW — Bông tuyết băng rơi xéo có gió (vip6 / qcnt2) */
.np-ad-slot__snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  overflow: hidden;
}
.np-ad-slot[data-effect="snow"] .np-ad-slot__snow { opacity: 1; }
/* Tint xanh-trắng băng lạnh nhẹ phủ slot */
.np-ad-slot[data-effect="snow"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 60% 40%, rgba(180, 220, 255, 0.12), transparent 70%);
  mix-blend-mode: screen;
}
.np-ad-flake {
  position: absolute;
  top: -8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(200, 230, 255, 0.45) 60%, transparent 100%);
  box-shadow: 0 0 6px rgba(200, 230, 255, 0.7);
  filter: blur(0.4px);
  animation: npAdSnowFall linear infinite;
  will-change: transform, opacity;
}
.np-ad-flake:nth-child(1) { left:  6%; width: 4px; height: 4px; animation-duration:  8s; animation-delay: 0s;   }
.np-ad-flake:nth-child(2) { left: 18%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: 1.6s; }
.np-ad-flake:nth-child(3) { left: 30%; width: 3px; height: 3px; animation-duration:  7s; animation-delay: 0.8s; }
.np-ad-flake:nth-child(4) { left: 42%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 2.4s; }
.np-ad-flake:nth-child(5) { left: 56%; width: 4px; height: 4px; animation-duration:  9s; animation-delay: 1.2s; }
.np-ad-flake:nth-child(6) { left: 70%; width: 6px; height: 6px; animation-duration: 12s; animation-delay: 3s;   }
.np-ad-flake:nth-child(7) { left: 84%; width: 3px; height: 3px; animation-duration:  8s; animation-delay: 0.4s; }
.np-ad-flake:nth-child(8) { left: 94%; width: 5px; height: 5px; animation-duration: 11s; animation-delay: 2s;   }
/* Bông tuyết rơi xéo có gió: translateX dao động sin-wave */
@keyframes npAdSnowFall {
  0%   { transform: translate3d(0,      0,    0) rotate(0);   opacity: 0;    }
  10%  { opacity: 0.95; }
  25%  { transform: translate3d(-10px,  60px, 0) rotate(90deg);  }
  50%  { transform: translate3d(8px,   130px, 0) rotate(180deg); }
  75%  { transform: translate3d(-6px,  200px, 0) rotate(270deg); }
  92%  { opacity: 0.6; }
  100% { transform: translate3d(12px,  280px, 0) rotate(360deg); opacity: 0; }
}

/* Effect 3: LIGHTNING — Sấm sét chéo + flash trắng (vip12 / qcnt3) */
.np-ad-slot__lightning {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.np-ad-slot[data-effect="lightning"] .np-ad-slot__lightning { opacity: 1; }
.np-ad-slot[data-effect="lightning"]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 30%, rgba(200, 220, 255, 0.0), transparent 60%);
  animation: npAdLightningFlash 5.5s ease-in-out infinite;
}
.np-ad-bolt {
  position: absolute;
  top: -10%;
  right: 22%;
  width: 3px;
  height: 130%;
  background: linear-gradient(180deg, transparent 0%, rgba(220, 230, 255, 0.85) 40%, rgba(180, 200, 255, 0.95) 50%, rgba(220, 230, 255, 0.85) 60%, transparent 100%);
  transform: rotate(12deg) translateY(-10%);
  filter: blur(0.6px) drop-shadow(0 0 6px rgba(180, 220, 255, 0.85));
  opacity: 0;
  animation: npAdBoltStrike 5.5s ease-in-out infinite;
}
.np-ad-bolt--2 {
  right: 38%;
  top: -8%;
  width: 2px;
  height: 110%;
  transform: rotate(-8deg);
  animation-delay: 2.6s;
  animation-duration: 5.5s;
}
@keyframes npAdLightningFlash {
  0%, 88%, 94%, 100% { background: radial-gradient(ellipse at 70% 30%, rgba(200, 220, 255, 0), transparent 60%); }
  90%, 92%           { background: radial-gradient(ellipse at 70% 30%, rgba(200, 220, 255, 0.35), transparent 65%); }
}
@keyframes npAdBoltStrike {
  0%, 86%, 100% { opacity: 0; }
  88%, 91%      { opacity: 1; }
  92%           { opacity: 0; }
  93%           { opacity: 0.85; }
  95%           { opacity: 0; }
}

/* ─────────────── Lớp chữ Hán thư pháp (effect-aware) ─────────────── */
.np-ad-slot__hanzi-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.np-ad-hanzi {
  position: absolute;
  font-family: 'Times New Roman', '宋体', serif;
  font-weight: 700;
  color: rgba(212, 175, 55, 0.18);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
  will-change: transform, opacity;
}

/* Default (aura): chữ rơi nhẹ, vàng ấm */
.np-ad-slot[data-effect="aura"] .np-ad-hanzi {
  top: -10%;
  color: rgba(255, 190, 100, 0.22);
  text-shadow: 0 0 10px rgba(255, 160, 70, 0.35);
  animation: npAdHanziFall linear infinite;
}
.np-ad-slot[data-effect="aura"] .np-ad-hanzi[data-i="0"] { left: 42%; font-size: 1.5rem; animation-duration: 9s;  animation-delay: 0s;   }
.np-ad-slot[data-effect="aura"] .np-ad-hanzi[data-i="1"] { left: 58%; font-size: 1.9rem; animation-duration: 11s; animation-delay: 2.4s; }
.np-ad-slot[data-effect="aura"] .np-ad-hanzi[data-i="2"] { left: 72%; font-size: 1.4rem; animation-duration: 8s;  animation-delay: 4.5s; }
.np-ad-slot[data-effect="aura"] .np-ad-hanzi[data-i="3"] { left: 88%; font-size: 2.1rem; animation-duration: 12s; animation-delay: 1.2s; }

/* Mist: chữ trôi ngang lề phải, xanh lam nhạt */
.np-ad-slot[data-effect="mist"] .np-ad-hanzi {
  top: auto;
  left: 110%;
  color: rgba(190, 220, 255, 0.32);
  text-shadow: 0 0 12px rgba(150, 200, 255, 0.55);
  animation: npAdHanziDriftLeft linear infinite;
}
.np-ad-slot[data-effect="mist"] .np-ad-hanzi[data-i="0"] { top: 18%; font-size: 1.4rem; animation-duration: 14s; animation-delay: 0s;   }
.np-ad-slot[data-effect="mist"] .np-ad-hanzi[data-i="1"] { top: 42%; font-size: 1.7rem; animation-duration: 18s; animation-delay: 3.5s; }
.np-ad-slot[data-effect="mist"] .np-ad-hanzi[data-i="2"] { top: 28%; font-size: 1.5rem; animation-duration: 16s; animation-delay: 7s;   }
.np-ad-slot[data-effect="mist"] .np-ad-hanzi[data-i="3"] { top: 62%; font-size: 1.9rem; animation-duration: 20s; animation-delay: 1.2s; }

/* Darkmist: câu thoại sát giả lửng lơ, đỏ máu, fade pulse menacing — KHÔNG rơi.
   Positions chọn cẩn thận để KHÔNG che mặt/đầu nhân vật (nhân vật ở vùng phải) */
.np-ad-slot[data-effect="darkmist"] .np-ad-hanzi {
  color: rgba(220, 50, 60, 0.45);
  text-shadow: 0 0 14px rgba(180, 10, 20, 0.75), 0 0 6px rgba(255, 80, 80, 0.55);
  font-family: 'Times New Roman', 'KaiTi', '楷体', serif;
  font-style: italic;
  font-weight: 800;
  animation: npAdDarkPhraseFade ease-in-out infinite;
  white-space: nowrap;
}
.np-ad-slot[data-effect="darkmist"] .np-ad-hanzi[data-i="0"] {
  /* 杀 — chữ đơn lớn, biên dưới slot bên trái, tránh face zone */
  top: 62%; left: 4%; font-size: 2.4rem; animation-duration: 5.5s; animation-delay: 0s;
}
.np-ad-slot[data-effect="darkmist"] .np-ad-hanzi[data-i="1"] {
  /* 你看我我就杀了你！— phía dưới slot góc phải, sau lưng nhân vật */
  top: 82%; left: 56%; font-size: 0.72rem; animation-duration: 7s;   animation-delay: 1.8s;
  transform: rotate(-2deg);
}
.np-ad-slot[data-effect="darkmist"] .np-ad-hanzi[data-i="2"] {
  /* 你脖子好柔软啊！— góc dưới giữa, KHÔNG còn ở vùng đầu */
  top: 88%; left: 28%; font-size: 0.7rem; animation-duration: 6.5s; animation-delay: 3.2s;
  transform: rotate(1deg);
}
.np-ad-slot[data-effect="darkmist"] .np-ad-hanzi[data-i="3"] {
  /* 别再看了！— góc phải xa, sau lưng nhân vật */
  top: 6%; left: 88%; font-size: 0.85rem;  animation-duration: 6s;   animation-delay: 0.8s;
  transform: rotate(-1deg);
}
@keyframes npAdDarkPhraseFade {
  0%, 100% { opacity: 0;    filter: blur(2px);   }
  20%      { opacity: 0.7;  filter: blur(0);     }
  70%      { opacity: 0.5;  filter: blur(0);     }
}

/* Snow: 4 câu thoại Vương Lâm dạng cột dọc bên phải slot, hiện cùng lúc rồi mờ dần.
   Vertical writing (cổ điển thư pháp) — tránh vùng text sale bên trái. */
.np-ad-slot[data-effect="snow"] .np-ad-hanzi {
  color: rgba(220, 240, 255, 0.62);
  text-shadow: 0 0 12px rgba(160, 210, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.6);
  font-family: 'Times New Roman', 'KaiTi', '楷体', serif;
  font-style: italic;
  font-weight: 700;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;        /* punctuation auto-rotate cho gọn */
  letter-spacing: 1px;
  top: 4%;                         /* reset từ -10% mặc định */
  animation: npAdSnowPhraseShow 5s ease-in-out infinite;
}
/* 4 cột stack ngược từ phải sang, mỗi cột cách nhau ~3.5% */
.np-ad-slot[data-effect="snow"] .np-ad-hanzi[data-i="0"] {
  /* 我是王琳你找我吗？— cột ngoài cùng phải, 9 ký tự */
  right: 2%;  font-size: 0.74rem; animation-delay: 0.1s;
}
.np-ad-slot[data-effect="snow"] .np-ad-hanzi[data-i="1"] {
  /* 宝贝！你想我吗？— cột thứ hai, 8 ký tự */
  right: 5.5%; font-size: 0.8rem;  animation-delay: 0.45s;
}
.np-ad-slot[data-effect="snow"] .np-ad-hanzi[data-i="2"] {
  /* 修仙之路有我你平安！— cột thứ ba, 10 ký tự */
  right: 9.5%; font-size: 0.74rem; animation-delay: 0.8s;
}
.np-ad-slot[data-effect="snow"] .np-ad-hanzi[data-i="3"] {
  /* 别多想了！来！跟我喝一瓶酒！— cột trong cùng, dài 14 ký tự, font nhỏ nhất */
  right: 13.5%; font-size: 0.66rem; animation-delay: 1.15s;
}
/* Hiện lên 1 thể (fade in 12%) → hold visible đến 65% → từ từ mờ dần đến 100%.
   Animation 5s ≈ chu kỳ rotate slide 5.5s → user đọc xong rồi mới chuyển. */
@keyframes npAdSnowPhraseShow {
  0%   { opacity: 0;    transform: translateY(-6px); filter: blur(2px); }
  12%  { opacity: 0.78; transform: translateY(0);    filter: blur(0);   }
  65%  { opacity: 0.7;  transform: translateY(0);    filter: blur(0);   }
  100% { opacity: 0;    transform: translateY(4px);  filter: blur(2px); }
}

/* Lightning: 4 chữ Hán nhỏ rải biên TRÊN slot (trên hair-line), opacity thấp, glow tím lạnh
   → atmospheric ambient, KHÔNG cạnh tranh visual với tóc/thân nhân vật */
.np-ad-slot[data-effect="lightning"] .np-ad-hanzi {
  top: 4%;
  color: rgba(220, 200, 255, 0.22);
  text-shadow: 0 0 12px rgba(180, 160, 255, 0.55);
  animation: npAdLightningCharFlash ease-in-out infinite;
}
/* 4 chữ rải ngang ở biên trên (top 4-8%), trên đầu tóc nhân vật */
.np-ad-slot[data-effect="lightning"] .np-ad-hanzi[data-i="0"] { left: 56%; top: 4%;  font-size: 1.1rem; animation-duration: 4s;   animation-delay: 0s;   }
.np-ad-slot[data-effect="lightning"] .np-ad-hanzi[data-i="1"] { left: 70%; top: 2%;  font-size: 1.3rem; animation-duration: 5s;   animation-delay: 1.2s; }
.np-ad-slot[data-effect="lightning"] .np-ad-hanzi[data-i="2"] { left: 84%; top: 5%;  font-size: 1.0rem; animation-duration: 4.5s; animation-delay: 2.4s; }
.np-ad-slot[data-effect="lightning"] .np-ad-hanzi[data-i="3"] { left: 94%; top: 3%;  font-size: 1.4rem; animation-duration: 6s;   animation-delay: 0.6s; }
/* Flash khi sét đánh: opacity tăng giật từ 0.2 → 0.9 → 0.2, mô phỏng nháy theo sét */
@keyframes npAdLightningCharFlash {
  0%, 100% { opacity: 0.35; filter: blur(0);   }
  45%      { opacity: 0.35; }
  50%      { opacity: 1;    filter: blur(0);   }
  55%      { opacity: 0.35; }
  85%      { opacity: 0.35; }
  88%      { opacity: 0.85; }
  92%      { opacity: 0.35; }
}

@keyframes npAdHanziFall {
  0%   { transform: translateY(0)     rotate(-4deg); opacity: 0;   }
  15%  { opacity: 1; }
  85%  { opacity: 0.65; }
  100% { transform: translateY(260px) rotate(6deg);  opacity: 0;   }
}
@keyframes npAdHanziDriftLeft {
  0%   { transform: translateX(0)      rotate(-2deg); opacity: 0;   }
  12%  { opacity: 1; }
  88%  { opacity: 0.5; }
  100% { transform: translateX(-540px) rotate(2deg);  opacity: 0;   }
}

/* Tôn trọng reduced-motion: tắt tất cả animation hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  .np-ad-hanzi,
  .np-ad-slot__aura,
  .np-ad-slot__mist,
  .np-ad-slot__darkmist,
  .np-ad-flake,
  .np-ad-bolt { animation: none; }
  .np-ad-slot[data-effect="aura"] .np-ad-hanzi,
  .np-ad-slot[data-effect="mist"] .np-ad-hanzi,
  .np-ad-slot[data-effect="lightning"] .np-ad-hanzi { opacity: 0.16; top: 20%; left: 50%; }
  .np-ad-slot[data-effect="darkmist"] .np-ad-hanzi,
  .np-ad-slot[data-effect="snow"] .np-ad-hanzi { opacity: 0.35; top: 30%; }
  .np-ad-slot[data-effect="snow"] .np-ad-flake { opacity: 0.4; top: 30%; }
  .np-ad-slot.is-onsale { animation: none; }
  .np-ad-slot[data-effect="lightning"]::before,
  .np-ad-slot[data-effect="darkmist"]::after { animation: none; }
}

/* Badge SALE inline — góc dưới trái: 🔥 emoji + số %, KHÔNG pill đỏ */
.np-ad-slot__sale-badge {
  position: absolute;
  left: 16px;
  bottom: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 800;
  letter-spacing: 0.4px;
  pointer-events: none;
}
.np-ad-slot__sale-badge[hidden] { display: none; }
.np-ad-slot__sale-flame {
  font-size: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(255, 180, 60, 0.85)) drop-shadow(0 0 12px rgba(255, 80, 30, 0.55));
  animation: npAdFlameFlicker 1.6s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.np-ad-slot__sale-pct {
  font-size: 1.05rem;
  background: linear-gradient(180deg, #ffe082 0%, #ffab40 45%, #f4511e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(255, 130, 40, 0.45);
  letter-spacing: 0.6px;
}
@keyframes npAdFlameFlicker {
  0%, 100% { transform: scale(1)    rotate(-2deg); filter: drop-shadow(0 0 6px rgba(255, 180, 60, 0.85)) drop-shadow(0 0 12px rgba(255, 80, 30, 0.55)); }
  50%      { transform: scale(1.12) rotate(2deg);  filter: drop-shadow(0 0 10px rgba(255, 210, 80, 1))   drop-shadow(0 0 18px rgba(255, 100, 30, 0.85)); }
}

/* Khối text overlay bên trái — width ~52% slot để chừa ảnh nhân vật bên phải */
.np-ad-slot__text {
  position: absolute;
  inset: 14px 48% 36px 16px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.np-ad-slot__text.is-fading { opacity: 0; }

.np-ad-slot__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid color-mix(in srgb, var(--msd-amber-500) 40%, transparent);
  color: var(--msd-amber-300);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.np-ad-slot__slogan {
  margin: 4px 0 2px;
  font-family: 'Times New Roman', 'Songti SC', serif;
  font-size: clamp(0.95rem, 3vw, 1.18rem);
  font-weight: 700;
  font-style: italic;
  color: #fff8e1;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
}

.np-ad-slot__sub {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 240, 200, 0.78);
  line-height: 1.4;
  max-width: 100%;
}

/* Khối giá khi flash-sale active */
.np-ad-slot__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.np-ad-slot__price-row[hidden] { display: none; }
.np-ad-slot__price-old {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  font-weight: 500;
}
.np-ad-slot__price-new {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ff8a80;
  text-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
  font-variant-numeric: tabular-nums;
}


/* Dots indicator */
.np-ad-slot__dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 6;
}
.np-ad-slot__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.25s, width 0.25s;
}
.np-ad-slot__dot.active {
  background: var(--msd-amber-300);
  width: 18px;
  border-radius: 4px;
}

/* Spacer giữa ad và balance — để 2 phần tử không stretch dính nhau */
.np-top-strip__spacer { flex: 1; }

/* [v11.92] Linh thạch balance — khung ảnh 479×112 (khung1.webp) + text CENTERED */
.np-balance {
  flex: 0 0 auto;
  /* Tỉ lệ ảnh 479:112 ≈ 4.28 → giữ tỉ lệ khi scale */
  width: 100%;
  max-width: 420px;
  aspect-ratio: 479 / 112;
  background: url('../images/anh_du_an_ytt/khung_chua_linhthach/khung1.webp') center / contain no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;        /* text/number CENTER */
  /* Padding 2 bên đối xứng để né 2 dragon decoration mỗi bên ~16% width */
  padding: 5% 17% 5% 17%;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}
/* [v11.93] Label "LINH THẠCH" hidden — số đứng một mình ở center khung */
.np-balance__label {
  display: none;
}
/* Wrapper flex cho icon gem + số — nằm giữa khung rồng */
.np-balance__inner {
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Icon gem trước số linh thạch trong khung rồng — nền tối nên không cần blend */
.np-balance__gem-img {
  width: clamp(1.2rem, 3.8cqw, 2rem);
  height: clamp(1.2rem, 3.8cqw, 2rem);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,213,79,0.5));
}
.np-balance__amount {
  /* clamp(min, preferred, max) — responsive scale theo width container */
  font-size: clamp(1.4rem, 4.2cqw + 0.8rem, 2.2rem);
  font-weight: 800;
  color: #ffd54f;
  text-shadow:
    0 0 14px rgba(255, 213, 79, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.8);
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
  letter-spacing: 0.5px;
}
/* Hiệu ứng khi đang tăng — bật flash vàng */
.np-balance__amount.is-counting {
  color: #fff8e1;
  transform: scale(1.06);
  text-shadow:
    0 0 28px rgba(255, 213, 79, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.7);
}

/* ── LEFT PANE — gói nạp + payment ── */
.np-left {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.np-section-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
}
.np-section-h__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--msd-matcha-500), var(--msd-matcha-700));
  color: var(--msd-paper-primary);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.np-section-h__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0;
}
.np-section-h__hint {
  font-size: 0.75rem;
  color: var(--msd-paper-muted);
  font-weight: 400;
  margin-left: auto;
}

/* ── VIBRANT PACK GRID — gradient riêng từng pack, soft 3D ── */
.np-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
.np-pack {
  position: relative;
  padding: 18px 12px 58px;
  border: none;
  border-radius: var(--msd-radius-lg);
  cursor: pointer;
  text-align: center;
  transition: transform var(--msd-dur-base) var(--msd-ease),
              box-shadow var(--msd-dur-base) var(--msd-ease);
  overflow: hidden;
  color: #fff;
}
/* Top highlight cong cho cảm giác 3D dome */
.np-pack::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
  border-radius: var(--msd-radius-lg) var(--msd-radius-lg) 50% 50%;
  pointer-events: none;
}
.np-pack:hover {
  transform: translateY(-4px);
}
.np-pack:active {
  transform: translateY(2px);
}

/* ── 6 GRADIENT THEMES — Vibrant per pack ── */
/* VIP 1 tháng — Purple/Violet (matches even1.gif neon music) */
.np-pack#np-pack-vip1 {
  background: linear-gradient(150deg, #7e57c2 0%, #4527a0 100%);
  box-shadow: 0 6px 0 #2a1870, 0 10px 22px rgba(0,0,0,0.38);
}
.np-pack#np-pack-vip1:hover { box-shadow: 0 10px 0 #2a1870, 0 14px 28px rgba(126,87,194,0.45); }

/* VIP 6 tháng — Royal Blue (matches even2.gif celestial wings) */
.np-pack#np-pack-vip6 {
  background: linear-gradient(150deg, #1e88e5 0%, #0d47a1 100%);
  box-shadow: 0 6px 0 #082c5e, 0 10px 22px rgba(0,0,0,0.38);
}
.np-pack#np-pack-vip6:hover { box-shadow: 0 10px 0 #082c5e, 0 14px 28px rgba(30,136,229,0.45); }

/* VIP 1 năm — Crimson/Magenta (PREMIUM, matches even4 purple crown) */
.np-pack#np-pack-vip12 {
  background: linear-gradient(150deg, #e91e63 0%, #ad1457 50%, #7c0e3d 100%);
  box-shadow: 0 6px 0 #4d0625, 0 10px 22px rgba(0,0,0,0.42);
}
.np-pack#np-pack-vip12:hover { box-shadow: 0 10px 0 #4d0625, 0 14px 28px rgba(233,30,99,0.5); }

/* GEM 20k — Emerald (cheap basic) */
.np-pack#np-pack-gem20 {
  background: linear-gradient(150deg, #43a047 0%, #1b5e20 100%);
  box-shadow: 0 6px 0 #0e3a13, 0 10px 22px rgba(0,0,0,0.36);
}
.np-pack#np-pack-gem20:hover { box-shadow: 0 10px 0 #0e3a13, 0 14px 28px rgba(67,160,71,0.45); }

/* GEM 50k — Teal/Cyan */
.np-pack#np-pack-gem50 {
  background: linear-gradient(150deg, #26c6da 0%, #00838f 100%);
  box-shadow: 0 6px 0 #00565e, 0 10px 22px rgba(0,0,0,0.36);
}
.np-pack#np-pack-gem50:hover { box-shadow: 0 10px 0 #00565e, 0 14px 28px rgba(38,198,218,0.45); }

/* GEM 100k — Orange/Amber (best deal) */
.np-pack#np-pack-gem100 {
  background: linear-gradient(150deg, #ff9800 0%, #e65100 100%);
  box-shadow: 0 6px 0 #803300, 0 10px 22px rgba(0,0,0,0.38);
}
.np-pack#np-pack-gem100:hover { box-shadow: 0 10px 0 #803300, 0 14px 28px rgba(255,152,0,0.48); }

/* ── Active state — ring vàng nổi bật, không đổi gradient ── */
.np-pack.active {
  outline: 3px solid #ffd54f;
  outline-offset: 2px;
}
/* Highlight flash khi user click ad slot → scroll vào pack tương ứng */
.np-pack.np-pack--highlight {
  animation: npPackHighlight 1.6s ease-out;
}
@keyframes npPackHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.65); }
  50%  { box-shadow: 0 0 0 12px rgba(255, 213, 79, 0.0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.0); }
}
.np-pack.active::after {
  content: '\f00c';
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ffd54f;
  color: #14181a;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
  z-index: 3;
}

.np-pack__best-seller {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd54f, #f57c00);
  color: #1a0e00;
  padding: 3px 14px;
  border-radius: 0 0 var(--msd-radius-sm) var(--msd-radius-sm);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  white-space: nowrap;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.np-pack__price {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 8px 0 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}
.np-pack__gems {
  color: rgba(255,255,255,0.92);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.np-pack__gems i { color: #ffd54f; }
.np-pack__bonus {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--msd-radius-full);
  background: rgba(0, 0, 0, 0.35);
  color: #ffd54f;
  border: 1px solid rgba(255, 213, 79, 0.4);
  position: relative;
  z-index: 1;
}

/* ── GIFT PREVIEW INSIDE PACK — screen blend ẩn nền đen GIF ──
   QUAN TRỌNG: parent .np-pack__gift KHÔNG được có background/transform/isolation/z-index,
   nếu không screen blend sẽ bị block bởi stacking context (theo memory feedback_hide_black_bg_gif). */
.np-pack__gift {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  /* KHÔNG background, KHÔNG border, KHÔNG transform, KHÔNG z-index — để screen blend hoạt động */
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-pack__gift-img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  /* Screen blend mode để ẩn nền đen GIF khung — blend với card gradient bên dưới */
  mix-blend-mode: screen;
}

/* ── GEM PACKS — không có gift section, nhỏ gọn hơn ── */
.np-pack--gem {
  padding: 16px 10px 22px;
}
.np-pack--gem .np-pack__price { font-size: 1rem; }

/* ── PAYMENT TABS ── */
.np-pay-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.np-pay-tab {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md);
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all var(--msd-dur-base) var(--msd-ease);
  background: var(--msd-surface-2);
  color: var(--msd-paper-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.np-pay-tab:hover {
  background: var(--msd-surface-3);
  color: var(--msd-paper-primary);
}
.np-pay-tab.active {
  background: linear-gradient(135deg, var(--msd-matcha-500), var(--msd-matcha-700));
  color: var(--msd-paper-primary);
  border-color: var(--msd-matcha-300);
  box-shadow: 0 4px 0 var(--msd-matcha-900),
              0 6px 12px rgba(0,0,0,0.3);
}

.np-pay-content {
  display: none;
  padding: 22px;
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-lg);
  background: var(--msd-surface-2);
}
.np-pay-content.active { display: block; }

/* ── MoMo QR + info ── */
/* ── Tab Quốc Tế (v11.79) — Hỗ trợ user nước ngoài thủ công ──── */
.np-intl {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.np-intl__hero {
  text-align: center;
  padding: 16px 12px 4px;
}
.np-intl__icon {
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4fc3f7, #1976d2);
  color: #fff;
  font-size: 1.7rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 6px 18px rgba(33, 150, 243, 0.45);
}
.np-intl__hero h4 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #4fc3f7;
  letter-spacing: 0.3px;
}
.np-intl__sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--msd-paper-secondary);
  line-height: 1.45;
}

.np-intl__methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-intl__method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--msd-border);
  border-left: 3px solid color-mix(in srgb, var(--ic, #4fc3f7) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.18);
  transition: transform 0.2s, border-color 0.2s;
}
.np-intl__method:hover {
  transform: translateX(2px);
  border-left-color: var(--ic, #4fc3f7);
}
.np-intl__method-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ic, #4fc3f7) 18%, var(--msd-ink-deepest));
  border: 1px solid color-mix(in srgb, var(--ic, #4fc3f7) 40%, transparent);
  color: var(--ic, #4fc3f7);
  font-size: 1rem;
  flex-shrink: 0;
}
.np-intl__method-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.np-intl__method-body strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  letter-spacing: 0.2px;
}
.np-intl__method-body span {
  font-size: 0.72rem;
  color: var(--msd-paper-muted);
  line-height: 1.4;
}

.np-intl__cta {
  text-align: center;
  padding: 14px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,132,255,0.08), rgba(0,132,255,0.02));
  border: 1px solid color-mix(in srgb, #0084ff 22%, transparent);
}
.np-intl__cta p {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--msd-paper-secondary);
}

.np-intl__note {
  margin: 0;
  padding: 9px 12px;
  font-size: 0.74rem;
  color: var(--msd-paper-muted);
  text-align: center;
  background: rgba(102, 187, 106, 0.06);
  border-radius: 8px;
  border-left: 2px solid var(--msd-matcha-500);
  line-height: 1.5;
}
.np-intl__note i { color: var(--msd-matcha-300); margin-right: 4px; }
.np-intl__note strong { color: var(--msd-matcha-300); font-weight: 700; }

/* ── PayPal Form — Scrollable container (v11.76) ─────────────── */
.np-paypal-rate {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--msd-paper-secondary);
  background: linear-gradient(135deg, rgba(0,132,255,0.08), rgba(0,132,255,0.02));
  border: 1px solid color-mix(in srgb, #0084ff 22%, transparent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.np-paypal-rate i { color: #4fa3ff; font-size: 0.9rem; flex-shrink: 0; }
.np-paypal-rate strong { color: var(--msd-amber-300); font-weight: 700; }

/* Scrollable wrapper cho PayPal form */
.np-paypal-scroll {
  max-height: 620px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px 4px 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,15,40,0.6), rgba(12,9,28,0.75));
  border: 1px solid color-mix(in srgb, var(--msd-amber-500) 14%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 12px rgba(0,0,0,0.3);
  scrollbar-width: thin;
  scrollbar-color: var(--msd-bronze-500) transparent;
}
.np-paypal-scroll::-webkit-scrollbar { width: 8px; }
.np-paypal-scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.18);
  border-radius: 4px;
}
.np-paypal-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--msd-bronze-500), var(--msd-amber-700));
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2);
}
.np-paypal-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--msd-amber-500), var(--msd-bronze-700));
}

/* Force text color cho PayPal labels render trong DOM (không phải iframe) — fix ẩn vào nền đen.
   PayPal Smart Buttons + Hosted Card Fields render mix giữa iframe và DOM text. */
.np-paypal-scroll label,
.np-paypal-scroll a,
.np-paypal-scroll p,
.np-paypal-scroll span:not([class*="paypal-mark"]):not([class*="paypal-logo"]) {
  color: var(--msd-paper-secondary) !important;
}
.np-paypal-scroll a {
  color: #80c0ff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.np-paypal-scroll a:hover { color: #4fa3ff !important; }

/* Mobile */
@media (max-width: 560px) {
  .np-paypal-scroll { max-height: 540px; padding: 4px 6px 4px 2px; }
  .np-paypal-rate { font-size: 0.78rem; padding: 8px 12px; }
}

/* ── MoMo QR Panel — 3D compact (v11.74) ──────────────────── */
.np-momo-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* QR card với 3D rim + ring glow */
.np-momo-qr__card {
  display: block;
  padding: 10px;
  background: linear-gradient(180deg, #fff 0%, #f5f1e8 100%);
  border-radius: 14px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.5),
    0 12px 28px rgba(212,175,55,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 6px rgba(0,0,0,0.08);
  margin-bottom: 14px;
  transition: transform 0.2s ease;
}
.np-momo-qr__card:hover {
  transform: translateY(-2px);
}
.np-momo-qr__img {
  display: block;
  width: 180px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
}

/* Info block — compact, 3D inset, full width của parent flex column */
.np-momo-info {
  align-self: stretch;
  text-align: left;
  background: linear-gradient(180deg, rgba(20,15,40,0.7), rgba(12,9,28,0.85));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--msd-amber-500) 16%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.np-momo-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--msd-paper-secondary);
}
.np-momo-info__lbl {
  color: var(--msd-paper-muted);
  font-size: 0.74rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.np-momo-info__val {
  color: var(--msd-paper-primary);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.np-momo-info__val a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s;
}
.np-momo-info__val a:hover { border-bottom-color: var(--msd-amber-300); }

/* Số tiền — nổi bật amber gradient text */
.np-momo-info__val--amount {
  background: linear-gradient(135deg, #ffd54f, #ffab40);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 1.1rem;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255, 180, 60, 0.3);
}

/* Nội dung chuyển — CRITICAL highlight, red accent */
.np-content-row {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(244,67,54,0.14), rgba(244,67,54,0.05));
  border: 1px solid color-mix(in srgb, var(--msd-crimson-500) 32%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 8px rgba(244,67,54,0.12);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.np-content-row__lbl {
  font-size: 0.7rem;
  color: #ff8a80;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.np-content-row__val {
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-content-row__val code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.8px;
  background: rgba(0,0,0,0.25);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(244,67,54,0.2);
  overflow-x: auto;
  white-space: nowrap;
}
.np-content-row__copy {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--msd-crimson-500) 35%, transparent);
  background: rgba(244,67,54,0.1);
  color: #ff8a80;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-content-row__copy:hover {
  background: rgba(244,67,54,0.22);
  border-color: var(--msd-crimson-500);
  color: #fff;
  transform: scale(1.05);
}
.np-content-row__copy:active { transform: scale(0.96); }

/* Copy icon inline (cho SĐT) */
.np-copy-btn {
  cursor: pointer;
  color: var(--msd-amber-300);
  font-size: 0.78rem;
  opacity: 0.7;
  transition: all 0.18s;
}
.np-copy-btn:hover {
  transform: scale(1.2);
  color: var(--msd-paper-primary);
  opacity: 1;
}

/* Status box — compact pill 3D */
.np-status-box {
  margin-top: 12px;
  padding: 9px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  transition: all var(--msd-dur-slow) var(--msd-ease);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.25);
}
.np-status-box.waiting {
  background: linear-gradient(135deg, rgba(102,187,106,0.14), rgba(102,187,106,0.06));
  border: 1px solid color-mix(in srgb, var(--msd-matcha-500) 32%, transparent);
  color: var(--msd-matcha-100);
}
.np-status-box.success {
  background: linear-gradient(135deg, rgba(102,187,106,0.32), rgba(102,187,106,0.14));
  border: 1px solid var(--msd-matcha-500);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 14px rgba(102,187,106,0.35);
}
.np-status-box i { font-size: 0.85rem; }
@keyframes np-spin { 100% { transform: rotate(360deg); } }
.np-status-box .np-spin-icon { animation: np-spin 2s linear infinite; }

/* Note auto-detect — subtle bottom note */
.np-momo-note {
  align-self: stretch;
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 0.72rem;
  color: var(--msd-paper-muted);
  text-align: center;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border-left: 2px solid var(--msd-amber-700);
}
.np-momo-note i { color: var(--msd-amber-300); margin-right: 4px; }

/* ── RIGHT PANE ── */
.np-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Bảng quy đổi — giờ nằm trong accordion body ── */
.np-exchange__h {
  /* deprecated — heading giờ là accordion button label, không dùng riêng nữa */
  display: none;
}
.np-exchange__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.np-exchange__table th {
  color: var(--msd-paper-muted);
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--msd-border);
}
.np-exchange__table td {
  padding: 7px 8px;
  color: var(--msd-paper-secondary);
}
.np-exchange__table tr:hover td { background: rgba(255,255,255,0.03); }
.np-exchange__bonus { color: var(--msd-matcha-300); font-weight: 700; }

.np-cost-list {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--msd-border);
}
.np-cost-list__h {
  font-size: 0.78rem;
  color: var(--msd-paper-muted);
  margin: 0 0 6px;
  letter-spacing: 0.3px;
}
.np-cost-list ul { list-style: none; padding: 0; margin: 0; }
.np-cost-list li {
  font-size: 0.82rem;
  color: var(--msd-paper-secondary);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-cost-list li i {
  color: var(--msd-matcha-300);
  width: 14px;
  text-align: center;
  font-size: 0.78rem;
}
.np-cost-list strong { color: var(--msd-amber-300); }
.np-cost-list__loading {
  color: var(--msd-paper-muted) !important;
  font-style: italic;
}
.np-cost-list ul[data-loading="1"] li,
.np-cost-list-modal[data-loading="1"] li { opacity: 0.6; }

/* Cost list trong modal — grid 2 cột để gọn hơn */
.np-cost-list-modal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.np-cost-list-modal li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--msd-paper-secondary);
}
.np-cost-list-modal li i {
  color: var(--msd-matcha-300);
  width: 16px;
  text-align: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.np-cost-list-modal li strong {
  color: var(--msd-amber-300);
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .np-cost-list-modal { grid-template-columns: 1fr; }
}
.np-cost-list__note {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 0.74rem;
  color: var(--msd-matcha-100);
  background: color-mix(in srgb, var(--msd-matcha-500) 15%, transparent);
  border-radius: var(--msd-radius-sm);
  border-left: 3px solid var(--msd-matcha-500);
}

/* ── Liên hệ Admin button — gọn, không sáng quá, phong cách messenger ── */
.np-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(0,132,255,0.12), rgba(0,132,255,0.04));
  border: 1px solid color-mix(in srgb, #0084ff 35%, transparent);
  color: #4fa3ff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s, transform 0.18s, color 0.2s;
  width: auto;
  letter-spacing: 0.2px;
}
.np-support-btn i {
  font-size: 1rem;
  opacity: 0.9;
}
.np-support-btn:hover {
  background: linear-gradient(135deg, rgba(0,132,255,0.2), rgba(0,132,255,0.08));
  border-color: #0084ff;
  color: #80c0ff;
  transform: translateY(-1px);
}
.np-support-btn:active { transform: translateY(0); }

/* ── FOMO Live Feed (v11.77) — 3D professional, color-coded items ── */
.np-fomo {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,15,40,0.7), rgba(12,9,28,0.85));
  border: 1px solid color-mix(in srgb, var(--msd-amber-500) 16%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 6px 18px rgba(0,0,0,0.35);
  overflow: hidden;
}
/* Subtle ambient glow corner top-right */
.np-fomo::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(212,175,55,0.16), transparent 70%);
  pointer-events: none;
}

.np-fomo__h {
  font-size: 0.84rem;
  color: var(--msd-paper-primary);
  font-weight: 700;
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--msd-amber-500) 18%, transparent);
  letter-spacing: 0.3px;
}
.np-fomo__h > div { display: inline-flex; align-items: center; }
.np-fomo__dot {
  width: 8px; height: 8px;
  background: #ef5350;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(239, 83, 80, 0.7), 0 0 16px rgba(239, 83, 80, 0.4);
  animation: np-fomo-pulse 1.5s infinite;
  display: inline-block;
  margin-right: 8px;
}
@keyframes np-fomo-pulse {
  0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 8px rgba(239,83,80,0.7), 0 0 16px rgba(239,83,80,0.4); }
  50%      { opacity: 0.55; transform: scale(1.55); box-shadow: 0 0 12px rgba(239,83,80,0.9), 0 0 24px rgba(239,83,80,0.6); }
}
.np-fomo__viewers {
  font-size: 0.7rem;
  color: var(--msd-paper-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.np-fomo__viewers i { font-size: 0.72rem; opacity: 0.65; }
.np-fomo__viewers span { color: var(--msd-matcha-300); font-weight: 700; }

.np-fomo__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: hidden;
}

/* Item compact 1 row — icon + body */
.np-fomo__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--fomo-bg-strong, rgba(102,187,106,0.1)), var(--fomo-bg-soft, rgba(102,187,106,0.03)));
  border: 1px solid var(--fomo-border, color-mix(in srgb, #66bb6a 30%, transparent));
  border-left: 3px solid var(--fomo-accent, #66bb6a);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 6px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(-10px);
  animation: np-fomo-slide 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: transform 0.2s, box-shadow 0.2s;
}
.np-fomo__item:hover {
  transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.3);
}
.np-fomo__item.fade-out { animation: np-fomo-fade 0.5s ease forwards; }
@keyframes np-fomo-slide { to { opacity: 1; transform: translateY(0); } }
@keyframes np-fomo-fade  { to { opacity: 0; transform: translateY(10px); } }

/* Theme per type */
.np-fomo__item.is-lt {
  --fomo-accent: #66bb6a;
  --fomo-bg-strong: rgba(102,187,106,0.12);
  --fomo-bg-soft: rgba(102,187,106,0.03);
  --fomo-border: color-mix(in srgb, #66bb6a 28%, transparent);
}
.np-fomo__item.is-vip {
  --fomo-accent: #ffd54f;
  --fomo-bg-strong: rgba(255,213,79,0.14);
  --fomo-bg-soft: rgba(255,213,79,0.03);
  --fomo-border: color-mix(in srgb, #ffd54f 30%, transparent);
}

/* [v11.78] Item của chính user (real, vừa nạp xong) — highlight glow + pulse 4s */
.np-fomo__item.is-real {
  --fomo-bg-strong: color-mix(in srgb, var(--fomo-accent) 22%, transparent);
  --fomo-bg-soft:   color-mix(in srgb, var(--fomo-accent) 8%, transparent);
  border-width: 1px;
  border-color: var(--fomo-accent);
  border-left-width: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 14px color-mix(in srgb, var(--fomo-accent) 35%, transparent),
    0 0 0 0 var(--fomo-accent);
  animation: np-fomo-slide 0.55s cubic-bezier(0.175,0.885,0.32,1.275) forwards, np-fomo-real-pulse 2.2s ease-out 0.6s 2;
}
@keyframes np-fomo-real-pulse {
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px color-mix(in srgb, var(--fomo-accent) 35%, transparent), 0 0 0 0   color-mix(in srgb, var(--fomo-accent) 55%, transparent); }
  60%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px color-mix(in srgb, var(--fomo-accent) 35%, transparent), 0 0 0 12px transparent; }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px color-mix(in srgb, var(--fomo-accent) 35%, transparent), 0 0 0 0   transparent; }
}
.np-fomo__you {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #14181a;
  background: linear-gradient(135deg, var(--fomo-accent), color-mix(in srgb, var(--fomo-accent) 65%, white));
  border-radius: 999px;
  vertical-align: middle;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--fomo-accent) 45%, transparent);
}

.np-fomo__icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--fomo-accent), color-mix(in srgb, var(--fomo-accent) 60%, transparent));
  color: #14181a;
  font-size: 0.85rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 2px 6px color-mix(in srgb, var(--fomo-accent) 35%, transparent);
}

.np-fomo__body { flex: 1; min-width: 0; }
.np-fomo__user {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--msd-paper-primary);
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-fomo__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  margin-top: 1px;
}
.np-fomo__action {
  color: var(--fomo-accent);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.np-fomo__time {
  color: var(--msd-paper-muted);
  font-weight: 500;
}

/* ── Accordion bảo hành ── */
.np-accordion {
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md);
  overflow: hidden;
}
.np-accordion__btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--msd-surface-2);
  color: var(--msd-amber-300);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border: none;
  font-size: 0.9rem;
}
.np-accordion__btn:hover { background: var(--msd-surface-3); }
.np-accordion__body { padding: 16px; display: none; background: var(--msd-ink-deepest); }
.np-accordion__body.open { display: block; }
.np-accordion__arrow { transition: transform 0.2s; font-size: 11px; }
.np-accordion__arrow.open { transform: rotate(180deg); }
.np-accordion__list { list-style: none; padding: 0; margin: 0; }
.np-accordion__list li {
  margin-bottom: 14px;
  font-size: 0.85rem;
  line-height: 1.55;
  padding-left: 26px;
  position: relative;
  color: var(--msd-paper-secondary);
}
.np-accordion__list li i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--msd-matcha-300);
  font-size: 1rem;
}
.np-accordion__list li.warning i { color: var(--msd-amber-300); }
.np-accordion__list strong { color: var(--msd-paper-primary); }

/* ── HISTORY ── card-style rich UI ── */
.np-history {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 1px solid var(--msd-border);
  content-visibility: auto; contain-intrinsic-size: 100% 300px;
}
.np-history h3 {
  font-size: 1.1rem;
  color: var(--msd-paper-primary);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--msd-border);
  font-weight: 700;
}
.np-history h3 i { color: var(--msd-bronze-300); margin-right: 8px; }

/* Filter tabs */
.np-hist-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.np-hist-filter__btn {
  padding: 6px 14px;
  border: 1px solid var(--msd-border);
  background: var(--msd-surface-2);
  color: var(--msd-paper-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--msd-radius-full);
  cursor: pointer;
  transition: all var(--msd-dur-base) var(--msd-ease);
}
.np-hist-filter__btn:hover {
  background: var(--msd-surface-3);
  color: var(--msd-paper-primary);
}
.np-hist-filter__btn.active {
  background: linear-gradient(135deg, var(--msd-amber-500), var(--msd-amber-700));
  color: var(--msd-ink-deepest);
  border-color: var(--msd-amber-500);
  box-shadow: 0 2px 0 var(--msd-amber-900);
}

/* Cards grid + scrollbar (chuẩn bị cho lịch sử >50 thẻ) */
.np-hist-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 8px;
  max-height: 540px;          /* ~6 hàng × 90px → scroll khi vượt */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;          /* chừa chỗ cho scrollbar không đè content */
  scrollbar-width: thin;
  scrollbar-color: var(--msd-bronze-500) transparent;
}
.np-hist-cards::-webkit-scrollbar {
  width: 8px;
}
.np-hist-cards::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.18);
  border-radius: 4px;
}
.np-hist-cards::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--msd-bronze-500), var(--msd-amber-700));
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2);
}
.np-hist-cards::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--msd-amber-500), var(--msd-bronze-700));
}

/* Single card — compact một hàng duy nhất, tất cả info inline */
.np-hist-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 14px;
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--msd-dur-base) var(--msd-ease),
              background var(--msd-dur-base) var(--msd-ease);
}
.np-hist-card:hover {
  transform: translateX(2px);
  background: var(--msd-surface-3);
}
/* Side accent stripe (mỏng hơn) */
.np-hist-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
}
.np-hist-card.is-vip::before { background: linear-gradient(180deg, #ffd54f, #f57c00); }
.np-hist-card.is-lt::before  { background: linear-gradient(180deg, #42a5f5, #1565c0); }

/* Left icon — gọn lại 36×36 */
.np-hist-card__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--msd-radius-sm);
  background: color-mix(in srgb, var(--ic, #888) 18%, var(--msd-ink-deepest));
  border: 1px solid color-mix(in srgb, var(--ic, #888) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ic, #fff);
  font-size: 16px;
}

/* Body — title + subtitle compact, không xuống dòng nhiều */
.np-hist-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.np-hist-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.np-hist-card__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0;
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-hist-card__subtitle {
  font-size: 0.72rem;
  color: var(--msd-paper-secondary);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-hist-card__subtitle b {
  color: var(--msd-amber-300);
  font-weight: 700;
}

/* Badge — gọn lại */
.np-hist-card__badge {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: var(--msd-radius-full);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.np-hist-card__badge.vip {
  background: linear-gradient(135deg, #ffd54f, #f57c00);
  color: #1a0e00;
  box-shadow: 0 1px 4px rgba(245, 124, 0, 0.35);
}
.np-hist-card__badge.lt {
  background: linear-gradient(135deg, #42a5f5, #0d47a1);
  color: #fff;
  box-shadow: 0 1px 4px rgba(33, 150, 243, 0.35);
}

/* Meta row — inline ngay sau subtitle, KHÔNG border-top, gap nhỏ */
.np-hist-card__meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 2px;
  align-items: center;
  overflow: hidden;
}
.np-hist-card__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  color: var(--msd-paper-muted);
  white-space: nowrap;
}
.np-hist-card__meta i { font-size: 0.7rem; }
.np-hist-card__payer i { color: var(--msd-bronze-300); }
.np-hist-card__pay { font-weight: 600; }
.np-hist-card__time { margin-left: auto; flex-shrink: 0; }

/* Mobile — narrower padding, smaller badges */
@media (max-width: 560px) {
  .np-hist-cards { grid-template-columns: 1fr; max-height: 460px; }
  .np-hist-card { padding: 7px 10px 7px 12px; }
  .np-hist-card__icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 14px; }
  .np-hist-card__title { font-size: 0.8rem; }
  .np-hist-card__subtitle { font-size: 0.68rem; }
  .np-hist-card__meta > span { font-size: 0.62rem; }
  .np-hist-card__badge { font-size: 0.62rem; padding: 2px 6px; }
}

/* ── Trigger buttons (Bảng Quy Đổi + Chính Sách) ───────────── */
.np-tos-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
  border: 1px solid color-mix(in srgb, var(--msd-amber-500) 30%, transparent);
  border-radius: var(--msd-radius-md);
  color: var(--msd-amber-300);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.2s, transform 0.18s, border-color 0.2s;
}
.np-tos-trigger:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.06));
  border-color: var(--msd-amber-500);
  transform: translateY(-1px);
}
.np-tos-trigger i { font-size: 0.78rem; opacity: 0.7; }
/* Variant cho "Bảng Quy Đổi" — màu cyan (matches diamond icon) */
.np-tos-trigger--qd {
  background: linear-gradient(135deg, rgba(38,198,218,0.10), rgba(38,198,218,0.02));
  border-color: color-mix(in srgb, #26c6da 32%, transparent);
  color: #4dd0e1;
}
.np-tos-trigger--qd:hover {
  background: linear-gradient(135deg, rgba(38,198,218,0.18), rgba(38,198,218,0.06));
  border-color: #26c6da;
}

/* ── MODAL Chính Sách & Điều Khoản ─────────────────────────── */
/* C5 2026-05-20 — padding-bottom dùng safe-area để không bị che bởi home indicator iPhone */
.np-tos-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px max(24px, env(safe-area-inset-bottom));
  animation: npTosModalFadeIn 0.22s ease-out;
}
.np-tos-modal[hidden] { display: none; }
@keyframes npTosModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.np-tos-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 1, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.np-tos-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  background: linear-gradient(180deg, #0c0a18 0%, #0a0814 100%);
  border: 1px solid color-mix(in srgb, var(--msd-amber-500) 32%, transparent);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 32px rgba(212, 175, 55, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: npTosModalSlideIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes npTosModalSlideIn {
  from { transform: scale(0.94) translateY(12px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
.np-tos-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--msd-amber-500) 22%, transparent);
  background: linear-gradient(135deg, rgba(212,175,55,0.1), transparent);
  flex-shrink: 0;
}
.np-tos-modal__header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--msd-amber-300);
  letter-spacing: 0.3px;
}
.np-tos-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--msd-paper-muted) 40%, transparent);
  background: rgba(255,255,255,0.04);
  color: var(--msd-paper-secondary);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s;
}
.np-tos-modal__close:hover {
  background: rgba(255, 100, 100, 0.18);
  border-color: #ff6b6b;
  color: #fff;
  transform: rotate(90deg);
}
.np-tos-modal__body {
  padding: 18px 22px 20px;
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--msd-paper-secondary);
  scrollbar-width: thin;
  scrollbar-color: var(--msd-bronze-500) transparent;
}
.np-tos-modal__body::-webkit-scrollbar { width: 8px; }
.np-tos-modal__body::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.np-tos-modal__body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--msd-bronze-500), var(--msd-amber-700));
  border-radius: 4px;
}

/* ── Section style — màu riêng cho từng mục ────────────────── */
.np-tos__sec {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--sec-accent, var(--msd-amber-500));
  background: var(--sec-bg, rgba(255, 255, 255, 0.02));
  border-radius: 0 8px 8px 0;
}
.np-tos__sec h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sec-accent, var(--msd-amber-300));
  letter-spacing: 0.2px;
}
.np-tos__sec p { margin: 0 0 6px; }
.np-tos__sec p:last-child { margin-bottom: 0; }
.np-tos__sec em {
  font-style: normal;
  font-weight: 700;
  color: var(--sec-accent, var(--msd-amber-300));
  text-shadow: 0 0 8px color-mix(in srgb, var(--sec-accent, #ffd54f) 35%, transparent);
}

/* Theme màu cho từng section */
.np-tos__sec--amber  { --sec-accent: #ffd54f; --sec-bg: rgba(255, 213, 79, 0.05);  }
.np-tos__sec--blue   { --sec-accent: #4fc3f7; --sec-bg: rgba(79, 195, 247, 0.05);  }
.np-tos__sec--green  { --sec-accent: #66bb6a; --sec-bg: rgba(102, 187, 106, 0.05); }
.np-tos__sec--orange { --sec-accent: #ff8a50; --sec-bg: rgba(255, 138, 80, 0.05);  }
.np-tos__sec--purple { --sec-accent: #ba68c8; --sec-bg: rgba(186, 104, 200, 0.05); }
.np-tos__sec--red    { --sec-accent: #ef5350; --sec-bg: rgba(239, 83, 80, 0.05);   }
.np-tos__sec--cyan   { --sec-accent: #26c6da; --sec-bg: rgba(38, 198, 218, 0.05);  }
.np-tos__sec--gold   { --sec-accent: #d4af37; --sec-bg: rgba(212, 175, 55, 0.05);  }

/* Bullets */
.np-tos__bullets {
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: none;
}
.np-tos__bullets li {
  position: relative;
  padding-left: 6px;
  margin-bottom: 5px;
}
.np-tos__bullets li::before {
  content: '•';
  position: absolute;
  left: -12px;
  color: var(--sec-accent, var(--msd-bronze-300));
  font-weight: 700;
}
.np-tos__bullets--mixed li.ok::before  { content: '✓'; color: #66bb6a; }
.np-tos__bullets--mixed li.no::before  { content: '✗'; color: #ef5350; }
.np-tos__bullets--warn li::before      { content: '▸'; color: var(--sec-accent); }

/* Footer updated date */
.np-tos__updated {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--msd-amber-500) 24%, transparent);
  font-size: 0.78rem;
  color: var(--msd-paper-muted);
  text-align: center;
  font-style: italic;
}
.np-tos__updated #np-tos-date {
  color: var(--msd-amber-300);
  font-weight: 700;
  font-style: normal;
}

/* Mobile: panel full-width, padding nhỏ — C5 safe-area */
@media (max-width: 560px) {
  .np-tos-modal { padding: 12px 8px max(12px, env(safe-area-inset-bottom)); }
  .np-tos-modal__panel { max-height: 90dvh; border-radius: 12px; }
  .np-tos-modal__header { padding: 12px 16px; }
  .np-tos-modal__header h3 { font-size: 0.95rem; }
  .np-tos-modal__body { padding: 14px 16px; font-size: 0.78rem; }
  .np-tos__sec { padding: 10px 12px; }
  .np-tos__sec h4 { font-size: 0.88rem; }
}

.np-empty { font-size: 0.9rem; color: var(--msd-paper-muted); text-align: center; padding: 28px 0; }
.np-loading { font-size: 0.9rem; color: var(--msd-paper-muted); text-align: center; padding: 20px 0; }
.np-skeleton-row {
  height: 44px;
  border-radius: var(--msd-radius-sm);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: np-shimmer 1.2s infinite;
  margin-bottom: 8px;
}
@keyframes np-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* [v11.43] Back button removed — logic không phù hợp (user nav trực tiếp qua sidebar, không cần back) */

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .np-page {
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 20px;
  }
  .np-balance { max-width: 100%; }
  .np-ad-slot { width: 100%; }
}
@media (max-width: 560px) {
  body { padding-top: 80px; }
  .np-page { padding: 14px; margin: 0 6px 50px; border-radius: 16px; gap: 16px; }
  .np-pack-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .np-pack { padding: 14px 8px 56px; }
  .np-pack__price { font-size: 0.92rem; }
  .np-pay-tabs { flex-direction: column; }
  .np-momo-qr__img { width: 160px; }
  .np-momo-qr__card { padding: 8px; }
  .np-momo-info { padding: 10px 12px; }
  .np-momo-info__row { font-size: 0.78rem; }
  .np-momo-info__val--amount { font-size: 0.95rem; }
  .np-content-row__val code { font-size: 0.78rem; }
  .np-ad-slot { min-height: 190px; }
  .np-ad-slot__text { inset: 12px 50% 36px 14px; gap: 4px; }
  /* .np-ad-slot__slogan font-size: xóa — dùng clamp(0.95rem, 3vw, 1.18rem) ở base */
  .np-ad-slot__sub { font-size: 0.7rem; }
  .np-ad-slot__sale-badge { left: 14px; bottom: 8px; }
  .np-ad-slot__sale-flame { font-size: 1.1rem; }
  .np-ad-slot__sale-pct { font-size: 0.95rem; }
  .np-ad-slot__price-new { font-size: 0.92rem; }
  .np-ad-slot__price-old { font-size: 0.7rem; }
  .np-ad-slot__bg { background-size: auto 180%; }
  /* [v11.91] balance amount đã dùng clamp() responsive — remove override */
}

/* ═══════════════════════════════════════════════════════════════════
   S52 — LIGHT MODE: Tàng Tiền Các (Nạp Tiền) earthy redesign
   Palette terracotta + petrol + blush + slate + honey + sage
   6 packs 6 màu earthy, MoMo QR + Quốc Tế tabs, TOS modals, FOMO ticker.
   Scope dưới html[data-theme="light"] — dark mode KHÔNG đổi.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Body background — override rule gốc body { ... !important } ─ */
html[data-theme="light"] body {
  background-color: #fdf6f3 !important;
  background-image: radial-gradient(circle at top center,
    rgba(199,49,47,0.06),
    #fdf6f3 65%) !important;
  background-attachment: fixed;
  color: #1a1a1a !important;
}

/* ─── Page container ────────────────────────────────────────── */
html[data-theme="light"] .np-page {
  background: #ffffff !important;
  border: 1.5px solid #5e6266 !important;
  box-shadow: 0 4px 18px rgba(58,61,63,0.10) !important;
  color: #1a1a1a !important;
}

/* ─── Section header (Đặc Quyền VIP / Nạp Lẻ / Thanh Toán) ── */
html[data-theme="light"] .np-section-h {
  border-bottom: 1.5px solid #e8c4b8;
}
html[data-theme="light"] .np-section-h__num {
  background: linear-gradient(135deg, #c7312f, #a82929);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(199,49,47,0.30);
  font-weight: 900;
}
html[data-theme="light"] .np-section-h__title {
  color: #1a1a1a;
  font-weight: 800;
}
html[data-theme="light"] .np-section-h__hint {
  color: #5e6266;
  font-weight: 600;
}

/* ─── 6 Packs — 6 màu earthy ────────────────────────────────── */
/* VIP 1m → brick terracotta */
html[data-theme="light"] .np-pack#np-pack-vip1 {
  background: linear-gradient(150deg, #d4998a 0%, #c7312f 100%);
  box-shadow: 0 3px 0 #a82929, 0 6px 16px rgba(199,49,47,0.25);
}
html[data-theme="light"] .np-pack#np-pack-vip1:hover {
  box-shadow: 0 5px 0 #a82929, 0 10px 22px rgba(199,49,47,0.38);
}

/* VIP 6m → petrol */
html[data-theme="light"] .np-pack#np-pack-vip6 {
  background: linear-gradient(150deg, #5e95a8 0%, #2a5a73 100%);
  box-shadow: 0 3px 0 #1a3f54, 0 6px 16px rgba(64,135,166,0.28);
}
html[data-theme="light"] .np-pack#np-pack-vip6:hover {
  box-shadow: 0 5px 0 #1a3f54, 0 10px 22px rgba(64,135,166,0.40);
}

/* VIP 12m (best seller) → brick darker premium */
html[data-theme="light"] .np-pack#np-pack-vip12 {
  background: linear-gradient(150deg, #c7312f 0%, #a82929 50%, #6e1818 100%);
  box-shadow: 0 3px 0 #4a0d0d, 0 6px 18px rgba(110,24,24,0.42);
}
html[data-theme="light"] .np-pack#np-pack-vip12:hover {
  box-shadow: 0 5px 0 #4a0d0d, 0 10px 24px rgba(199,49,47,0.50);
}

/* GEM 20k → sage cheap */
html[data-theme="light"] .np-pack#np-pack-gem20 {
  background: linear-gradient(150deg, #9ab87a 0%, #6b9a4d 100%);
  box-shadow: 0 3px 0 #4a6b30, 0 6px 16px rgba(107,154,77,0.30);
}
html[data-theme="light"] .np-pack#np-pack-gem20:hover {
  box-shadow: 0 5px 0 #4a6b30, 0 10px 22px rgba(107,154,77,0.42);
}

/* GEM 50k → blush peach */
html[data-theme="light"] .np-pack#np-pack-gem50 {
  background: linear-gradient(150deg, #e8a097 0%, #d4998a 100%);
  box-shadow: 0 3px 0 #b07568, 0 6px 16px rgba(212,153,138,0.32);
}
html[data-theme="light"] .np-pack#np-pack-gem50:hover {
  box-shadow: 0 5px 0 #b07568, 0 10px 22px rgba(212,153,138,0.45);
}

/* GEM 100k → honey best deal */
html[data-theme="light"] .np-pack#np-pack-gem100 {
  background: linear-gradient(150deg, #d4a574 0%, #b8842f 100%);
  box-shadow: 0 3px 0 #92670a, 0 6px 16px rgba(184,132,47,0.32);
}
html[data-theme="light"] .np-pack#np-pack-gem100:hover {
  box-shadow: 0 5px 0 #92670a, 0 10px 22px rgba(184,132,47,0.45);
}

/* Active state — ring brick thay yellow */
html[data-theme="light"] .np-pack.active {
  outline: 3px solid #c7312f;
}
html[data-theme="light"] .np-pack.active::after {
  background: #c7312f;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(199,49,47,0.40);
}
html[data-theme="light"] .np-pack__best-seller {
  background: linear-gradient(135deg, #d4a574, #b8842f);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(184,132,47,0.35);
}
html[data-theme="light"] .np-pack__bonus {
  background: rgba(0,0,0,0.20);
  color: #ffffff;
  border-color: rgba(255,255,255,0.40);
  font-weight: 800;
}
html[data-theme="light"] .np-pack__gems i {
  color: #fde0b2;
}

/* ─── Payment tabs (MoMo / Quốc Tế) ─────────────────────────── */
html[data-theme="light"] .np-pay-tab {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #1a1a1a;
  font-weight: 700;
}
html[data-theme="light"] .np-pay-tab:hover {
  background: rgba(232,196,184,0.30);
  border-color: #c7312f;
  color: #c7312f;
}
html[data-theme="light"] .np-pay-tab.active {
  background: linear-gradient(135deg, #c7312f 0%, #a82929 100%);
  color: #ffffff;
  border-color: #a82929;
  box-shadow: 0 2px 6px rgba(199,49,47,0.30);
  font-weight: 800;
}

/* Payment content panel */
html[data-theme="light"] .np-pay-content {
  background: #fdf6f3;
  border: 1.5px solid #5e6266;
  border-radius: 14px;
}

/* ─── MoMo QR card ──────────────────────────────────────────── */
html[data-theme="light"] .np-momo-qr__card {
  background: #ffffff;
  border: 2px solid #c7312f;
  box-shadow: 0 4px 12px rgba(199,49,47,0.18);
}
html[data-theme="light"] .np-momo-info {
  background: #ffffff;
  border: 1.5px solid #e8c4b8;
}
html[data-theme="light"] .np-momo-info__row {
  border-bottom-color: #e8c4b8;
}
html[data-theme="light"] .np-momo-info__lbl {
  color: #5e6266;
  font-weight: 700;
}
html[data-theme="light"] .np-momo-info__val {
  color: #1a1a1a;
  font-weight: 800;
}
html[data-theme="light"] .np-momo-info__val--amount {
  color: #c7312f;
  font-weight: 900;
}
html[data-theme="light"] .np-momo-info__val a {
  color: #4087a6;
  font-weight: 800;
}

/* Content row (Nội dung chuyển) */
html[data-theme="light"] .np-content-row {
  background: rgba(64,135,166,0.08);
  border: 1.5px solid #4087a6;
}
html[data-theme="light"] .np-content-row__lbl {
  color: #2a5a73;
  font-weight: 800;
}
html[data-theme="light"] .np-content-row__val code {
  background: #ffffff;
  color: #1a1a1a;
  border: 1.5px solid #5e6266;
  font-weight: 800;
}
html[data-theme="light"] .np-content-row__copy {
  background: linear-gradient(135deg, #4087a6, #2a5a73);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(64,135,166,0.30);
}
html[data-theme="light"] .np-content-row__copy:hover {
  filter: brightness(1.05);
}
html[data-theme="light"] .np-copy-btn {
  color: #4087a6;
}
html[data-theme="light"] .np-copy-btn:hover {
  color: #2a5a73;
}

/* Status box "Hệ thống đang dò tìm..." */
html[data-theme="light"] .np-status-box {
  background: rgba(212,165,116,0.14);
  border: 1.5px solid #b8842f;
  color: #92670a;
  font-weight: 700;
}
html[data-theme="light"] .np-status-box.waiting {
  background: rgba(212,165,116,0.14);
  color: #92670a;
}
html[data-theme="light"] .np-status-box.success {
  background: rgba(154,184,122,0.20);
  border-color: #6b9a4d;
  color: #4a6b30;
}
html[data-theme="light"] .np-status-box.error {
  background: rgba(199,49,47,0.10);
  border-color: #c7312f;
  color: #c7312f;
}
html[data-theme="light"] .np-momo-note {
  color: #5e6266;
  font-weight: 600;
}
html[data-theme="light"] .np-momo-note i {
  color: #b8842f;
}

/* ─── Tab Quốc Tế ───────────────────────────────────────────── */
html[data-theme="light"] .np-intl__hero h4 {
  color: #4087a6;
  font-weight: 800;
}
html[data-theme="light"] .np-intl__sub {
  color: #5e6266;
  font-weight: 600;
}
html[data-theme="light"] .np-intl__icon {
  background: linear-gradient(135deg, #4087a6, #2a5a73);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 4px 14px rgba(64,135,166,0.40);
}
html[data-theme="light"] .np-intl__method {
  background: #ffffff;
  border: 1.5px solid #e8c4b8;
}
html[data-theme="light"] .np-intl__method:hover {
  border-color: #c7312f;
  background: rgba(232,196,184,0.18);
}
html[data-theme="light"] .np-intl__method-body strong {
  color: #1a1a1a;
  font-weight: 800;
}
html[data-theme="light"] .np-intl__method-body span {
  color: #5e6266;
  font-weight: 600;
}
html[data-theme="light"] .np-intl__cta p {
  color: #1a1a1a;
  font-weight: 700;
}
html[data-theme="light"] .np-intl__note {
  background: rgba(154,184,122,0.10);
  border: 1.5px solid #6b9a4d;
  color: #4a6b30;
  font-weight: 600;
}
html[data-theme="light"] .np-intl__note i {
  color: #6b9a4d;
}

/* ─── Support button (Liên hệ Admin) — petrol gradient ──── */
html[data-theme="light"] .np-support-btn {
  background: linear-gradient(135deg, #4087a6, #2a5a73);
  border: none;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(64,135,166,0.30);
}
html[data-theme="light"] .np-support-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 14px rgba(64,135,166,0.40);
}

/* ─── Balance Linh Thạch ─────────────────────────────────── */
/* Nền .np-balance là image dragon dark frame cố định ở cả 2 mode,
   nên text BUỘC phải sáng (gold/honey) để nổi bật. GIỮ original gold
   nhưng glow đậm hơn để contrast tốt hơn. KHÔNG dùng clip-text. */
html[data-theme="light"] .np-balance__amount {
  color: #ffd54f !important;
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffd54f !important;
  font-weight: 900;
  text-shadow:
    0 0 18px rgba(255, 213, 79, 0.70),
    0 0 6px rgba(255, 152, 0, 0.50),
    0 2px 6px rgba(0, 0, 0, 0.85) !important;
}
html[data-theme="light"] .np-balance__amount.is-counting {
  color: #fff8e1 !important;
  -webkit-text-fill-color: #fff8e1 !important;
}

/* ─── 2 TOS trigger buttons (Bảng Quy Đổi + Chính Sách) ─── */
html[data-theme="light"] .np-tos-trigger {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #1a1a1a;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(58,61,63,0.06);
}
html[data-theme="light"] .np-tos-trigger:hover {
  background: rgba(232,196,184,0.30);
  border-color: #c7312f;
  color: #c7312f;
}
html[data-theme="light"] .np-tos-trigger--qd {
  background: linear-gradient(135deg, #fdf2e0, #fbe8d0);
  border-color: #b8842f;
}
html[data-theme="light"] .np-tos-trigger--qd:hover {
  background: linear-gradient(135deg, #d4a574, #b8842f);
  color: #ffffff;
  border-color: #92670a;
}

/* ─── TOS Modal (Chính Sách + Bảng Quy Đổi) ─────────────── */
html[data-theme="light"] .np-tos-modal__backdrop {
  background: rgba(58,61,63,0.40);
}
html[data-theme="light"] .np-tos-modal__panel {
  background: #fdf6f3;
  border: 2px solid #5e6266;
  box-shadow: 0 12px 40px rgba(58,61,63,0.22);
}
html[data-theme="light"] .np-tos-modal__header {
  background: linear-gradient(180deg, #fbeae5, #fdf6f3);
  border-bottom: 1.5px solid #e8c4b8;
}
html[data-theme="light"] .np-tos-modal__header h3 {
  color: #c7312f;
  font-weight: 800;
}
html[data-theme="light"] .np-tos-modal__close {
  background: #ffffff;
  border: 1.5px solid #5e6266;
  color: #1a1a1a;
}
html[data-theme="light"] .np-tos-modal__close:hover {
  background: #c7312f;
  color: #ffffff;
  border-color: #a82929;
}

/* TOS sections — 8 sec variants */
html[data-theme="light"] .np-tos__sec {
  color: #1a1a1a;
}
html[data-theme="light"] .np-tos__sec h4 {
  color: #1a1a1a;
  font-weight: 800;
}
html[data-theme="light"] .np-tos__sec p {
  color: #3a3d3f;
  font-weight: 500;
}
html[data-theme="light"] .np-tos__sec em {
  color: #c7312f;
  font-style: normal;
  font-weight: 800;
}
html[data-theme="light"] .np-tos__sec--cyan {
  background: rgba(64,135,166,0.08);
  border-left: 4px solid #4087a6;
}
html[data-theme="light"] .np-tos__sec--amber {
  background: rgba(184,132,47,0.10);
  border-left: 4px solid #b8842f;
}
html[data-theme="light"] .np-tos__sec--blue {
  background: rgba(64,135,166,0.10);
  border-left: 4px solid #2a5a73;
}
html[data-theme="light"] .np-tos__sec--green {
  background: rgba(107,154,77,0.10);
  border-left: 4px solid #6b9a4d;
}
html[data-theme="light"] .np-tos__sec--orange {
  background: rgba(212,165,116,0.12);
  border-left: 4px solid #d4a574;
}
html[data-theme="light"] .np-tos__sec--purple {
  background: rgba(94,98,102,0.10);
  border-left: 4px solid #5e6266;
}
html[data-theme="light"] .np-tos__sec--red {
  background: rgba(199,49,47,0.08);
  border-left: 4px solid #c7312f;
}
html[data-theme="light"] .np-tos__sec--gold {
  background: linear-gradient(135deg, rgba(212,165,116,0.14), rgba(184,132,47,0.10));
  border-left: 4px solid #b8842f;
}
html[data-theme="light"] .np-tos__bullets li {
  color: #3a3d3f;
  font-weight: 600;
}
html[data-theme="light"] .np-tos__bullets--mixed li.ok::before {
  color: #6b9a4d;
}
html[data-theme="light"] .np-tos__bullets--mixed li.no::before {
  color: #c7312f;
}
html[data-theme="light"] .np-tos__bullets--warn li::before {
  color: #b8842f;
}
html[data-theme="light"] .np-tos__updated {
  color: #5e6266;
  font-weight: 600;
}

/* Bảng Quy Đổi table */
html[data-theme="light"] .np-exchange__table {
  background: #ffffff;
  border: 1.5px solid #5e6266;
}
html[data-theme="light"] .np-exchange__table thead {
  background: linear-gradient(135deg, #c7312f, #a82929);
}
html[data-theme="light"] .np-exchange__table thead th {
  color: #ffffff;
  font-weight: 800;
}
html[data-theme="light"] .np-exchange__table tbody td {
  color: #1a1a1a;
  font-weight: 700;
  border-bottom-color: #e8c4b8;
}
html[data-theme="light"] .np-exchange__bonus {
  color: #6b9a4d;
  font-weight: 900;
}

/* Cost list (Chi phí AI) — text đen rõ, icon honey accent.
   ⚠️ CHỈ ĐỔI CSS — KHÔNG động JS/Firestore. Bảng giá đồng bộ realtime
   onSnapshot(server/ai_pricing) qua _subscribeAiPricing — render LT từ data. */
html[data-theme="light"] .np-cost-list-modal {
  color: #1a1a1a;
}
html[data-theme="light"] .np-cost-list-modal li {
  background: #ffffff !important;
  border: 1.5px solid #e8c4b8 !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
}
html[data-theme="light"] .np-cost-list-modal li:hover {
  border-color: #c7312f !important;
  background: rgba(232,196,184,0.18) !important;
}
/* Icon trái — honey caramel accent */
html[data-theme="light"] .np-cost-list-modal li i {
  color: #b8842f !important;
}
/* Giá LT (strong) — đen 800 đậm */
html[data-theme="light"] .np-cost-list-modal li strong {
  color: #1a1a1a !important;
  font-weight: 900 !important;
}
html[data-theme="light"] .np-cost-list__loading {
  color: #5e6266 !important;
}
html[data-theme="light"] .np-cost-list__note {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .np-cost-list__note strong {
  color: #c7312f !important;
  font-weight: 900 !important;
}

/* ─── FOMO ticker — earthy redesign ─────────────────────────── */
/* Container */
html[data-theme="light"] .np-fomo {
  background: linear-gradient(135deg, #fdf6f3, #fbeae5) !important;
  border: 1.5px solid #c7312f !important;
  box-shadow: 0 2px 8px rgba(199,49,47,0.10) !important;
}
html[data-theme="light"] .np-fomo__h {
  color: #c7312f !important;
  font-weight: 800 !important;
  border-bottom: 1px dashed #e8c4b8 !important;
}
html[data-theme="light"] .np-fomo__dot {
  background: #c7312f !important;
  box-shadow: 0 0 0 4px rgba(199,49,47,0.18) !important;
}
html[data-theme="light"] .np-fomo__viewers {
  color: #5e6266 !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .np-fomo__viewers i {
  color: #c7312f !important;
}

/* BỎ ICON kim cương + vương miện — chỉ hiện text */
html[data-theme="light"] .np-fomo__item .np-fomo__icon {
  display: none !important;
}

/* Item base — viền theo type, bg pastel earthy */
html[data-theme="light"] .np-fomo__item {
  padding: 9px 14px !important;
  border-radius: 10px;
  box-shadow: none !important;
}

/* LT type (Linh Thạch) — sage */
html[data-theme="light"] .np-fomo__item.is-lt {
  background: linear-gradient(135deg, #e9f0e0 0%, #d8e6c8 100%) !important;
  border: 1.5px solid #6b9a4d !important;
  border-left: 4px solid #4a6b30 !important;
}

/* VIP type — honey caramel */
html[data-theme="light"] .np-fomo__item.is-vip {
  background: linear-gradient(135deg, #fdf2e0 0%, #fbe8d0 100%) !important;
  border: 1.5px solid #b8842f !important;
  border-left: 4px solid #92670a !important;
}

/* Real (chính user vừa nạp) — viền brick nhấn mạnh */
html[data-theme="light"] .np-fomo__item.is-real {
  border-color: #c7312f !important;
  border-left-color: #a82929 !important;
  box-shadow: 0 4px 14px rgba(199,49,47,0.22) !important;
}

/* Username — đen 800 */
html[data-theme="light"] .np-fomo__user {
  color: #1a1a1a !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
}

/* "Bạn" badge — brick */
html[data-theme="light"] .np-fomo__you {
  background: linear-gradient(135deg, #c7312f, #a82929) !important;
  color: #ffffff !important;
}

/* Action text — đậm theo type */
html[data-theme="light"] .np-fomo__item.is-lt .np-fomo__action {
  color: #4a6b30 !important;
  font-weight: 900 !important;
}
html[data-theme="light"] .np-fomo__item.is-vip .np-fomo__action {
  color: #92670a !important;
  font-weight: 900 !important;
}
html[data-theme="light"] .np-fomo__action {
  font-size: 0.85rem !important;
  letter-spacing: 0.2px;
}

/* Time — slate 600 */
html[data-theme="light"] .np-fomo__time {
  color: #5e6266 !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
}

/* ─── History section — gọn lại, ít đường kẻ, text đậm ──── */
/* Bỏ border-top + border container, dùng spacing thay line.
   Section đứng riêng không cần card bao ngoài. */
html[data-theme="light"] .np-history {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  padding-top: 16px;
  margin-top: 8px;
}
html[data-theme="light"] .np-history h3 {
  color: #1a1a1a !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
}
html[data-theme="light"] .np-history h3 i {
  color: #c7312f !important;
}

/* ─── Filter buttons (Tất cả / VIP / Linh Thạch) ─────────── */
html[data-theme="light"] .np-hist-filter__btn {
  background: #ffffff !important;
  border: 1.5px solid #5e6266 !important;
  color: #1a1a1a !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  padding: 7px 16px !important;
}
html[data-theme="light"] .np-hist-filter__btn:hover {
  background: rgba(232,196,184,0.32) !important;
  border-color: #c7312f !important;
  color: #c7312f !important;
}
html[data-theme="light"] .np-hist-filter__btn.active {
  background: linear-gradient(135deg, #c7312f, #a82929) !important;
  color: #ffffff !important;
  border-color: #a82929 !important;
  box-shadow: 0 2px 6px rgba(199,49,47,0.30) !important;
}

/* ─── History card — single row compact ─────────────────── */
html[data-theme="light"] .np-hist-card {
  background: #ffffff !important;
  border: 1.5px solid #e8c4b8 !important;
  box-shadow: 0 1px 3px rgba(58,61,63,0.06);
}
html[data-theme="light"] .np-hist-card:hover {
  border-color: #c7312f !important;
  background: rgba(232,196,184,0.18) !important;
  transform: translateX(2px);
}

/* Side accent stripe — earthy */
html[data-theme="light"] .np-hist-card.is-vip::before {
  background: linear-gradient(180deg, #d4a574, #b8842f) !important;
}
html[data-theme="light"] .np-hist-card.is-lt::before {
  background: linear-gradient(180deg, #4087a6, #2a5a73) !important;
}

/* Icon square — earthy bg thay vì `ink-deepest` đen */
html[data-theme="light"] .np-hist-card__icon {
  background: color-mix(in srgb, var(--ic, #c7312f) 18%, #ffffff) !important;
  border: 1.5px solid color-mix(in srgb, var(--ic, #c7312f) 55%, transparent) !important;
  color: var(--ic, #c7312f) !important;
}

/* Title — đen 800, lớn hơn */
html[data-theme="light"] .np-hist-card__title {
  color: #1a1a1a !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
}

/* Subtitle — charcoal 700 */
html[data-theme="light"] .np-hist-card__subtitle {
  color: #3a3d3f !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
}
html[data-theme="light"] .np-hist-card__subtitle b {
  color: #c7312f !important;
  font-weight: 800;
}

/* Badges — đa dạng theo type */
html[data-theme="light"] .np-hist-card__badge.vip {
  background: linear-gradient(135deg, #d4a574, #b8842f) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(184,132,47,0.40) !important;
  font-weight: 800;
}
html[data-theme="light"] .np-hist-card__badge.lt {
  background: linear-gradient(135deg, #4087a6, #2a5a73) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(64,135,166,0.40) !important;
  font-weight: 800;
}

/* Meta row (UID / wallet / time) — charcoal 600 */
html[data-theme="light"] .np-hist-card__meta > span {
  color: #5e6266 !important;
  font-weight: 600 !important;
  font-size: 0.74rem !important;
}
html[data-theme="light"] .np-hist-card__payer i {
  color: #4087a6 !important;
}
html[data-theme="light"] .np-hist-card__pay {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .np-hist-card__pay i {
  color: #b8842f !important;
}
html[data-theme="light"] .np-hist-card__time {
  color: #5e6266 !important;
}
html[data-theme="light"] .np-hist-card__time i {
  color: #5e6266 !important;
}

/* Scrollbar */
html[data-theme="light"] .np-hist-cards::-webkit-scrollbar-track {
  background: rgba(212,165,116,0.10) !important;
}
html[data-theme="light"] .np-hist-cards::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d4a574, #b8842f) !important;
  border: 1px solid rgba(184,132,47,0.30) !important;
}
html[data-theme="light"] .np-hist-cards {
  scrollbar-color: #b8842f rgba(212,165,116,0.10) !important;
}

html[data-theme="light"] .np-empty,
html[data-theme="light"] .np-loading {
  color: #5e6266 !important;
  font-weight: 600 !important;
}

/* ─── Accordion ─────────────────────────────────────────── */
html[data-theme="light"] .np-accordion {
  background: #ffffff;
  border: 1.5px solid #e8c4b8;
}
html[data-theme="light"] .np-accordion__header {
  color: #1a1a1a;
  font-weight: 700;
}
html[data-theme="light"] .np-accordion__header:hover {
  background: rgba(232,196,184,0.18);
}
html[data-theme="light"] .np-accordion__arrow {
  color: #c7312f;
}
html[data-theme="light"] .np-accordion__body {
  color: #3a3d3f;
  font-weight: 500;
}

/* ─── Flash Sale Banner (giữ tone đỏ honey accent) ────── */
html[data-theme="light"] #flash-sale-banner {
  filter: none;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REDESIGN — Nạp Linh Thạch compact layout
   Reorder: balance + ads lên TOP; buttons compact; gem 3 cột
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* 1. np-right lên đầu; width + overflow khóa FOMO không tràn ngang */
  .np-right {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;        /* percentage flex-basis giải quyết đúng */
    overflow: hidden;   /* chặn mọi con tràn ra ngoài */
    min-width: 0;
  }

  /* 2. Balance: full width, căn giữa, compact */
  .np-balance {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    flex-shrink: 0;
  }

  /* 3. Ad slot: full width, compact height, chặn overflow con */
  .np-ad-slot {
    width: 100%;
    min-height: 160px;
    flex-shrink: 0;
    overflow: hidden;
  }
  /* Ẩn subtitle dài trên mobile — title + tag đủ rồi */
  .np-ad-slot__sub { display: none; }

  /* 4. TOS buttons: side-by-side compact */
  .np-tos-trigger {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    width: auto !important;
    padding: 7px 8px;
    font-size: 0.7rem;
    margin-bottom: 0;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
  }
  .np-tos-trigger span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .np-tos-trigger i { flex-shrink: 0; }

  /* 5. FOMO: full width, chặn overflow */
  .np-fomo {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .np-fomo__list { overflow: hidden; }
  .np-fomo__item { max-width: 100%; min-width: 0; overflow: hidden; }

  /* 7. VIP packs — 3 cột compact (đồng bộ với gem packs) */
  .np-pack-grid:has(#np-pack-vip1) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .np-pack-grid:has(#np-pack-vip1) .np-pack {
    padding: 10px 6px 18px;
  }
  .np-pack-grid:has(#np-pack-vip1) .np-pack__gift  { display: none; }
  /* !important bắt buộc để override newer section .np-pack__price { clamp !important } */
  .np-pack-grid:has(#np-pack-vip1) .np-pack__price { font-size: 0.72rem !important; margin: 4px 0; white-space: nowrap; }
  /* Duration: crown + "1 Năm" etc. nowrap + compact để fit 110px content width */
  .np-pack-grid:has(#np-pack-vip1) .np-pack__duration { font-size: 0.72rem; white-space: nowrap; gap: 3px; }
  .np-pack-grid:has(#np-pack-vip1) .np-pack__gems  { font-size: 0.62rem; gap: 2px; }
  .np-pack-grid:has(#np-pack-vip1) .np-pack__bonus { font-size: 0.52rem; padding: 2px 5px; margin-top: 3px; }
  .np-pack-grid:has(#np-pack-vip1) .np-pack__best-seller { font-size: 0.48rem; padding: 2px 8px; }

  /* 8. Gem packs — 3 cột compact */
  .np-pack-grid:has(#np-pack-gem20) {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .np-pack-grid:has(#np-pack-gem20) .np-pack--gem {
    padding: 10px 6px 18px;
  }
  /* !important override newer section; nowrap giữ "100.000 đ" 1 dòng */
  .np-pack-grid:has(#np-pack-gem20) .np-pack__price { font-size: 0.72rem !important; margin: 4px 0; white-space: nowrap; }
  .np-pack-grid:has(#np-pack-gem20) .np-pack__gems  { font-size: 0.65rem; gap: 2px; }
  /* Gem amount: scale xuống để "💎 12.000 LT" fit trong ~110px content, không clip */
  .np-pack-grid:has(#np-pack-gem20) .np-pack__gem-amount { font-size: 0.7rem; gap: 3px; }

  /* ── ROOT FIX: grid items thiếu min-width:0 → grid track expand theo min-content
     Nguyên nhân: code[white-space:nowrap] có min-content ~550px, đẩy cả grid lên 650px
     Fix: kẹp cả 2 grid items tại 0, content tự overflow:hidden bên trong ── */
  .np-left, .np-right { min-width: 0; }

  /* ── Transfer code: cho phép overflow scroll bên trong, không push container ── */
  .np-content-row__val code { min-width: 0; }

  /* ── Payment section: chặn overflow từ QR card + info rows ── */
  .np-pay-content { overflow: hidden; max-width: 100%; }
  .np-momo-qr__card { max-width: 100%; box-sizing: border-box; }

  /* Info rows (CHỦ TK, SĐT, SỐ TIỀN): value không tràn ngang ── */
  .np-momo-info__val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
    text-align: right;
  }

  /* ── Section hint: ẩn trên mobile — title cần toàn bộ space để không wrap ── */
  .np-section-h__hint { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   S80 — Tàng Tiền Các Redesign: Step-Flow + Modal Payment + Table History
   DESKTOP ONLY. Mobile breakpoints @max-width:900/560px giữ nguyên bên trên.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout: single-column flex ─────────────────────────────────────────── */
.np-page {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 28px 60px;
}

/* ── Hero Strip ─────────────────────────────────────────────────────────── */
.np-hero-strip {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Balance: freeze width, add container context for cqw units */
.np-balance {
  flex-shrink: 0;
  container-type: inline-size;
}

/* ── Step Sections ──────────────────────────────────────────────────────── */
.np-step {
  background: var(--msd-surface);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-xl, 18px);
  padding: 24px 28px;
  position: relative;
}

.np-step__head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.np-step__badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--msd-amber-600, #b8842f), var(--msd-amber-400, #ffd54f));
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(212,165,116,0.35);
}
.np-step__title-block { flex: 1; }
.np-step__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0 0 2px;
}
.np-step__sub {
  font-size: 0.78rem;
  color: var(--msd-paper-muted);
  margin: 0;
}
.np-step__hint {
  font-size: 0.75rem;
  color: var(--msd-paper-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Pack Card Redesign ─────────────────────────────────────────────────── */

/* Remove 3D dome */
.np-pack::before { display: none !important; }

/* Override base pack layout */
.np-pack {
  position: relative;
  padding: 20px 14px 18px !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--msd-radius-lg, 14px);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  /* @container base — enables cqi units in children */
  container-type: inline-size;
  container-name: pack-card;
}
.np-pack:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  border-color: var(--msd-amber-400, #ffd54f) !important;
}

/* Reposition active checkmark below the gift area */
.np-pack.active::after {
  top: auto !important;
  bottom: 8px !important;
  right: 10px !important;
}

/* Best-seller badge — inside card top-right (overflow hidden requires inside positioning) */
.np-pack__best-seller {
  position: absolute !important;
  top: 8px !important;
  left: auto !important;
  right: 8px !important;
  transform: none !important;
}

/* Price — keep class name (.np-pack__price) for flash sale compat */
.np-pack__price {
  font-size: clamp(0.95rem, 5cqi, 1.35rem) !important;
  font-weight: 800;
  color: var(--msd-amber-300, #ffd54f);
  margin: 0;
  line-height: 1.2;
}

/* Duration row — position:relative + z-index:1 để paint TRÊN ::before white-gradient overlay */
.np-pack__duration {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--msd-paper-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* Per-month breakdown */
.np-pack__per-month {
  font-size: 0.72rem;
  color: var(--msd-paper-muted);
  margin: 0;
}

/* Gem amount — z-index:1 paint trên ::before overlay; white-space:nowrap giữ "2.000 LT" 1 dòng */
.np-pack__gem-amount {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Gift: override absolute → flow. overflow: visible MUST be kept to avoid breaking mix-blend-mode screen on gift GIFs. */
.np-pack__gift {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  overflow: visible !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
}
.np-pack__gift-img {
  width: clamp(50px, 15cqi, 76px);
  height: clamp(50px, 15cqi, 76px);
  aspect-ratio: 1;
  object-fit: contain;
}
.np-pack__gift span {
  font-size: 0.68rem;
  color: var(--msd-paper-muted);
  max-width: 120px;
  text-align: center;
  line-height: 1.3;
}

/* Divider between VIP and Gem packs */
.np-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 6px;
  color: var(--msd-paper-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.np-divider::before,
.np-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--msd-border);
}

/* ── Order Summary Card ──────────────────────────────────────────────────── */
.np-order-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-lg, 14px);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.np-order-card__icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.np-order-card__icon .vip-gif-icon { width: 2rem; height: 2rem; vertical-align: middle; }
.np-order-card__info { flex: 1; min-width: 0; }
.np-order-card__name {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0 0 2px;
}
.np-order-card__sub {
  font-size: 0.78rem;
  color: var(--msd-paper-muted);
  margin: 0;
}
.np-order-card__price {
  text-align: right;
  flex-shrink: 0;
}
.np-order-card__price-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--msd-paper-muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.np-order-card__price-old {
  font-size: 0.82rem;
  text-decoration: line-through;
  color: var(--msd-paper-muted);
  display: block;
}
.np-order-card__price-new {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--msd-amber-300, #ffd54f);
  line-height: 1.1;
}

/* ── Payment Method Selection ────────────────────────────────────────────── */
.np-pay-choose-label {
  font-size: 0.88rem;
  color: var(--msd-paper-secondary);
  margin: 0 0 14px;
}
.np-pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.np-pay-method-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--msd-surface-2);
  border: 1.5px solid var(--msd-border);
  border-radius: var(--msd-radius-lg, 14px);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.15s;
}
.np-pay-method-card:hover {
  border-color: var(--msd-amber-400, #ffd54f);
  background: var(--msd-surface-3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.np-pay-method-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.np-pay-method-card__icon--momo {
  background: linear-gradient(135deg, #a50064, #d50089);
  color: #fff;
}
.np-pay-method-card__icon--intl {
  background: linear-gradient(135deg, #1565c0, #0288d1);
  color: #fff;
}
.np-pay-method-card__body { flex: 1; min-width: 0; }
.np-pay-method-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin-bottom: 2px;
}
.np-pay-method-card__desc {
  font-size: 0.74rem;
  color: var(--msd-paper-muted);
}
.np-pay-method-card__cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--msd-amber-400, #ffd54f);
  white-space: nowrap;
  flex-shrink: 0;
}
.np-pay-auto-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--msd-paper-muted);
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md, 10px);
  padding: 10px 14px;
  line-height: 1.5;
}
.np-pay-auto-note .fa-bolt { color: var(--msd-amber-400, #ffd54f); margin-top: 2px; flex-shrink: 0; }

/* ── Payment Modals ──────────────────────────────────────────────────────── */
.np-modal {
  position: fixed;
  inset: 0;
  z-index: 10200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.np-modal[hidden] { display: none !important; }
.np-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(5px);
}
.np-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--msd-surface);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-xl, 18px);
  max-width: 660px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 28px 80px rgba(0,0,0,0.55);
  scrollbar-width: thin;
}
.np-modal__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--msd-border);
  position: sticky;
  top: 0;
  background: var(--msd-surface);
  z-index: 2;
}
.np-modal__header-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.np-modal__header-icon--momo {
  background: linear-gradient(135deg, #a50064, #d50089);
  color: #fff;
  box-shadow: 0 4px 12px rgba(165,0,100,0.4);
}
.np-modal__header-icon--intl {
  background: linear-gradient(135deg, #1565c0, #0288d1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(21,101,192,0.4);
}
.np-modal__header-texts { flex: 1; min-width: 0; }
.np-modal__header-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0 0 2px;
}
.np-modal__header-sub {
  font-size: 0.8rem;
  color: var(--msd-paper-muted);
  margin: 0;
}
.np-modal__close {
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--msd-paper-secondary);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.np-modal__close:hover {
  background: rgba(239,83,80,0.12);
  color: #ef9a9a;
  border-color: rgba(239,83,80,0.3);
}
.np-modal__body {
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* QR + info 2-column layout */
.np-modal__payment-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
.np-momo-qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-momo-qr-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.np-momo-qr-img {
  display: block;
  width: 164px;
  height: 164px;
  object-fit: contain;
  border-radius: 6px;
}
.np-modal__info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-modal__info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-sm, 7px);
}
.np-modal__info-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--msd-paper-muted);
  flex-shrink: 0;
  text-transform: uppercase;
}
.np-modal__info-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--msd-paper-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}
.np-modal__info-value--amount {
  color: var(--msd-amber-300, #ffd54f);
  font-weight: 800;
  font-size: 1.0rem;
}

/* Transfer content box */
.np-modal__content-box {
  background: var(--msd-surface-2);
  border: 1.5px solid rgba(212,165,116,0.35);
  border-radius: var(--msd-radius-lg, 14px);
  overflow: hidden;
}
.np-modal__content-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--msd-amber-300, #ffd54f);
  background: rgba(212,165,116,0.08);
  border-bottom: 1px solid rgba(212,165,116,0.18);
  text-transform: uppercase;
}
.np-modal__content-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.np-modal__content-field code {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--msd-amber-300, #ffd54f);
  font-family: 'Courier New', monospace;
  word-break: break-all;
}
.np-modal__content-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--msd-radius-sm, 7px);
  background: linear-gradient(135deg, var(--msd-amber-600, #b8842f), var(--msd-amber-400, #ffd54f));
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.np-modal__content-copy:hover { opacity: 0.88; transform: translateY(-1px); }

/* Status box (inside modal) */
.np-status-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--msd-radius-md, 10px);
  font-size: 0.85rem;
  font-weight: 600;
}
.np-status-box.waiting {
  background: rgba(212,165,116,0.1);
  border: 1px solid rgba(212,165,116,0.28);
  color: var(--msd-amber-300, #ffd54f);
}
.np-status-box.success {
  background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.3);
  color: #81c784;
}
.np-status-box.error {
  background: rgba(239,83,80,0.1);
  border: 1px solid rgba(239,83,80,0.3);
  color: #ef9a9a;
}
.np-spin-icon { animation: np-spin 1.2s linear infinite; }
@keyframes np-spin { to { transform: rotate(360deg); } }

/* Note footer line */
.np-modal__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--msd-paper-muted);
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md, 10px);
  padding: 10px 14px;
  line-height: 1.55;
}
.np-modal__note .fa-bolt { color: var(--msd-amber-400, #ffd54f); margin-top: 2px; flex-shrink: 0; }

/* Copy icon button (small, inline) */
.np-copy-icon-btn {
  background: none;
  border: 1px solid var(--msd-border);
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  color: var(--msd-paper-muted);
  font-size: 0.72rem;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.np-copy-icon-btn:hover {
  background: var(--msd-surface-3);
  color: var(--msd-amber-300, #ffd54f);
}

/* ── Intl Modal content ───────────────────────────────────────────────────── */
.np-intl { display: flex; flex-direction: column; gap: 14px; }
.np-intl__hero { text-align: center; padding: 4px 0 8px; }
.np-intl__icon { font-size: 2.4rem; color: var(--msd-amber-400, #ffd54f); margin-bottom: 8px; }
.np-intl__hero h4 { font-size: 1.1rem; font-weight: 700; color: var(--msd-paper-primary); margin: 0 0 6px; }
.np-intl__sub { font-size: 0.8rem; color: var(--msd-paper-muted); margin: 0; }
.np-intl__methods { display: flex; flex-direction: column; gap: 8px; }
.np-intl__method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md, 10px);
}
.np-intl__method-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--ic, #888);
  color: #fff;
  flex-shrink: 0;
}
.np-intl__method-body { display: flex; flex-direction: column; gap: 2px; }
.np-intl__method-body strong { font-size: 0.88rem; font-weight: 700; color: var(--msd-paper-primary); }
.np-intl__method-body span { font-size: 0.74rem; color: var(--msd-paper-muted); }
.np-intl__cta { text-align: center; padding: 8px 0; }
.np-intl__cta p { font-size: 0.85rem; color: var(--msd-paper-secondary); margin: 0 0 12px; }
.np-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  background: linear-gradient(135deg, #1877f2, #0b5eda);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.15s, box-shadow 0.15s;
}
.np-support-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(24,119,242,0.42); }
.np-intl__note {
  font-size: 0.74rem;
  color: var(--msd-paper-muted);
  text-align: center;
  padding: 8px 12px;
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md, 10px);
  margin: 0;
  line-height: 1.5;
}
.np-intl__usd-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--msd-paper-secondary);
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-md, 10px);
  padding: 10px 14px;
  text-align: center;
}
.np-intl__usd-row .fa-exchange-alt { color: var(--msd-amber-400, #ffd54f); }

/* ── History: Table Layout ────────────────────────────────────────────────── */
.np-history {
  grid-column: auto !important;
  background: var(--msd-surface);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-xl, 18px);
  overflow: hidden;
}

.np-hist-head { padding: 20px 24px 0; }
.np-hist-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.np-hist-title-row h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--msd-paper-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-hist-meta {
  font-size: 0.72rem;
  color: var(--msd-paper-muted);
  flex: 1;
  min-width: 0;
}
/* Filter bar */
.np-hist-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--msd-border);
}
.np-hist-filter { display: flex; gap: 6px; }
.np-hist-filter__btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  color: var(--msd-paper-secondary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.np-hist-filter__btn:hover { border-color: var(--msd-amber-400, #ffd54f); color: var(--msd-amber-300, #ffd54f); }
.np-hist-filter__btn.active {
  background: linear-gradient(135deg, var(--msd-amber-600, #b8842f), var(--msd-amber-400, #ffd54f));
  border-color: transparent;
  color: #fff;
}

/* Date label ("Từ" / "Đến") */
.np-hist-date-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--msd-paper-muted);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* Actions trong hist-bar (desktop): vertical divider tách với filter buttons */
.np-hist-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  border-left: 1px solid var(--msd-border);
  padding-left: 10px;
}

/* Date picker */
.np-hist-date-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.np-hist-date-input {
  padding: 5px 10px;
  border-radius: var(--msd-radius-sm, 7px);
  border: 1px solid var(--msd-border);
  background: var(--msd-surface-2);
  color: var(--msd-paper-primary);
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.15s;
}
.np-hist-date-input:focus { border-color: var(--msd-amber-400, #ffd54f); }
.np-hist-date-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.np-hist-date-sep { color: var(--msd-paper-muted); font-size: 0.75rem; }
.np-hist-date-clear {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--msd-surface-2);
  border: 1px solid var(--msd-border);
  color: var(--msd-paper-muted);
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 0.15s, color 0.15s;
}
.np-hist-date-clear:hover { background: rgba(239,83,80,0.12); color: #ef9a9a; border-color: rgba(239,83,80,0.3); }

/* Table */
.np-hist-table-wrap { overflow-x: auto; }
.np-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.np-hist-table thead tr {
  background: var(--msd-surface-2);
  border-bottom: 1px solid var(--msd-border);
}
.np-hist-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--msd-paper-muted);
  white-space: nowrap;
  text-transform: uppercase;
}
.np-hist-table tbody tr {
  border-bottom: 1px solid var(--msd-border);
  transition: background 0.1s;
}
.np-hist-table tbody tr:last-child { border-bottom: none; }
.np-hist-table tbody tr:hover { background: rgba(212,165,116,0.05); }
.np-hist-table td {
  padding: 12px 16px;
  color: var(--msd-paper-secondary);
  vertical-align: middle;
}
.np-hist-td-gd { font-weight: 600; color: var(--msd-paper-primary) !important; }
.np-hist-td-gia { font-weight: 700; color: var(--msd-amber-300, #ffd54f) !important; }

/* Status badges */
.np-hist-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.np-hist-status--success { background: rgba(76,175,80,0.14); color: #81c784; border: 1px solid rgba(76,175,80,0.25); }
.np-hist-status--pending { background: rgba(255,193,7,0.12); color: #ffd54f; border: 1px solid rgba(255,193,7,0.22); }
.np-hist-status--failed  { background: rgba(239,83,80,0.12); color: #ef9a9a; border: 1px solid rgba(239,83,80,0.22); }
.np-hist-status--refunded { background: rgba(96,125,139,0.12); color: #90a4ae; border: 1px solid rgba(96,125,139,0.22); }

/* Loading / empty / error rows */
.np-hist-loading-row td,
.np-hist-empty-row td,
.np-hist-error-row td {
  text-align: center;
  color: var(--msd-paper-muted);
  padding: 40px 16px;
  font-size: 0.9rem;
}

/* Footer */
.np-hist-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-top: 1px solid var(--msd-border);
  font-size: 0.74rem;
  color: var(--msd-paper-muted);
  background: var(--msd-surface-2);
}
.np-hist-scroll-hint { font-size: 0.68rem; opacity: 0.55; }

/* ── S80 Light Mode Overrides ─────────────────────────────────────────────── */
html[data-theme="light"] .np-step {
  background: #ffffff;
  border-color: #e8c4b8;
}
html[data-theme="light"] .np-step__badge {
  background: linear-gradient(135deg, #c7312f, #e56b35);
}
html[data-theme="light"] .np-step__title { color: #1a1a1a; }
html[data-theme="light"] .np-step__sub,
html[data-theme="light"] .np-step__hint { color: #7a6560; }

/* Pack text trên nền màu (gradient) → trắng hoàn toàn */
html[data-theme="light"] .np-pack__price { color: #ffffff !important; }
html[data-theme="light"] .np-pack__duration { color: #ffffff; }
html[data-theme="light"] .np-pack__per-month { color: rgba(255,255,255,0.78); }
html[data-theme="light"] .np-pack__gift span { color: rgba(255,255,255,0.78); }
html[data-theme="light"] .np-pack__gem-amount { color: #ffffff; }
html[data-theme="light"] .np-divider { color: #9e8880; }
html[data-theme="light"] .np-divider::before,
html[data-theme="light"] .np-divider::after { background: #e8c4b8; }

html[data-theme="light"] .np-order-card {
  background: #fef8f4;
  border-color: #e8c4b8;
}
html[data-theme="light"] .np-order-card__name { color: #1a1a1a; }
html[data-theme="light"] .np-order-card__sub { color: #7a6560; }
html[data-theme="light"] .np-order-card__price-new { color: #b8842f; }
html[data-theme="light"] .np-order-card__price-old { color: #a09090; }

html[data-theme="light"] .np-pay-choose-label { color: #3a3d3f; }
html[data-theme="light"] .np-pay-method-card {
  background: #ffffff;
  border-color: #e8c4b8;
}
html[data-theme="light"] .np-pay-method-card:hover {
  background: #fef8f4;
  border-color: #c7312f;
}
html[data-theme="light"] .np-pay-method-card__name { color: #1a1a1a; }
html[data-theme="light"] .np-pay-method-card__desc { color: #7a6560; }
html[data-theme="light"] .np-pay-method-card__cta { color: #b8842f; }
html[data-theme="light"] .np-pay-auto-note { background: #fef8f4; border-color: #e8c4b8; color: #5e6266; }

html[data-theme="light"] .np-modal__panel { background: #ffffff; border-color: #e8c4b8; }
html[data-theme="light"] .np-modal__header { background: #ffffff; border-color: #e8c4b8; }
html[data-theme="light"] .np-modal__header-title { color: #1a1a1a; }
html[data-theme="light"] .np-modal__header-sub { color: #7a6560; }
html[data-theme="light"] .np-modal__close { background: #f9f2ec; border-color: #e8c4b8; color: #5e6266; }
html[data-theme="light"] .np-modal__close:hover { background: rgba(199,49,47,0.08); color: #c7312f; border-color: rgba(199,49,47,0.3); }
html[data-theme="light"] .np-modal__info-row { background: #fef8f4; border-color: #e8c4b8; }
html[data-theme="light"] .np-modal__info-value { color: #1a1a1a; }
html[data-theme="light"] .np-modal__info-value--amount { color: #b8842f; }
html[data-theme="light"] .np-modal__content-box { background: #fef8f4; border-color: #d4a571; }
html[data-theme="light"] .np-modal__content-field code { color: #b8842f; }
html[data-theme="light"] .np-modal__note { background: #f9f2ec; border-color: #e8c4b8; color: #5e6266; }
html[data-theme="light"] .np-modal__backdrop { background: rgba(0,0,0,0.5); }
html[data-theme="light"] .np-copy-icon-btn { border-color: #e8c4b8; color: #7a6560; }
html[data-theme="light"] .np-copy-icon-btn:hover { background: #fef8f4; color: #b8842f; }

html[data-theme="light"] .np-intl__method { background: #fef8f4; border-color: #e8c4b8; }
html[data-theme="light"] .np-intl__method-body strong { color: #1a1a1a; }
html[data-theme="light"] .np-intl__method-body span { color: #7a6560; }
html[data-theme="light"] .np-intl__note { background: #fef8f4; border-color: #e8c4b8; color: #5e6266; }
html[data-theme="light"] .np-intl__usd-row { background: #fef8f4; border-color: #e8c4b8; color: #3a3d3f; }
html[data-theme="light"] .np-intl__hero h4 { color: #1a1a1a; }
html[data-theme="light"] .np-intl__sub { color: #7a6560; }
html[data-theme="light"] .np-intl__cta p { color: #5e6266; }

html[data-theme="light"] .np-history { background: #ffffff; border-color: #e8c4b8; }
html[data-theme="light"] .np-hist-title-row h3 { color: #1a1a1a; }
html[data-theme="light"] .np-hist-meta { color: #7a6560; }
html[data-theme="light"] .np-hist-bar { border-color: #e8c4b8; }
html[data-theme="light"] .np-hist-filter__btn { background: #fff; border-color: #e8c4b8; color: #5e6266; }
html[data-theme="light"] .np-hist-filter__btn:hover { border-color: #c7312f; color: #c7312f; }
html[data-theme="light"] .np-hist-filter__btn.active {
  background: linear-gradient(135deg, #c7312f, #e56b35);
  color: #fff;
}
html[data-theme="light"] .np-hist-date-input { background: #fff; border-color: #e8c4b8; color: #1a1a1a; }
html[data-theme="light"] .np-hist-date-input::-webkit-calendar-picker-indicator { filter: none; }
html[data-theme="light"] .np-hist-date-input:focus { border-color: #c7312f; }
html[data-theme="light"] .np-hist-date-clear { background: #fff; border-color: #e8c4b8; color: #7a6560; }
html[data-theme="light"] .np-hist-table thead tr { background: #fef8f4; }
html[data-theme="light"] .np-hist-table thead th { color: #9e8880; }
html[data-theme="light"] .np-hist-table tbody tr { border-color: #f0e0d6; }
html[data-theme="light"] .np-hist-table tbody tr:hover { background: rgba(199,49,47,0.04); }
html[data-theme="light"] .np-hist-table td { color: #3a3d3f; }
html[data-theme="light"] .np-hist-td-gd { color: #1a1a1a !important; }
html[data-theme="light"] .np-hist-td-gia { color: #b8842f !important; }
html[data-theme="light"] .np-hist-footer { background: #fef8f4; border-color: #e8c4b8; color: #7a6560; }
html[data-theme="light"] .np-hist-loading-row td,
html[data-theme="light"] .np-hist-empty-row td,
html[data-theme="light"] .np-hist-error-row td { color: #7a6560; }

html[data-theme="light"] .np-status-box.waiting { background: rgba(180,120,30,0.08); border-color: rgba(180,120,30,0.3); color: #8a6000; }
html[data-theme="light"] .np-status-box.success { background: rgba(56,142,60,0.08); border-color: rgba(56,142,60,0.3); color: #388e3c; }
html[data-theme="light"] .np-status-box.error   { background: rgba(198,40,40,0.08); border-color: rgba(198,40,40,0.3); color: #c62828; }

/* ── Pack card: crown icon gold + gem icon vivid trong dark mode ── */
/* Crown icon: vàng rõ trên nền gradient (dark mode — light mode giữ white từ override) */
.np-pack__duration .fa-crown {
  color: #ffd54f;
  filter: drop-shadow(0 0 4px rgba(255,213,79,0.6));
}
/* Gem icon trong gói nạp lẻ (Linh Thạch packs): tăng saturation */
.np-pack__gems .fa-gem,
.np-pack__gems img,
.np-pack__gem-amount .fa-gem,
.np-pack__gem-amount img {
  filter: saturate(1.3) brightness(1.1) drop-shadow(0 0 5px rgba(76,200,130,0.5));
}

/* ══════════════════════════════════════════════════════════════
   MOBILE UI FIXES — 3 bugs Vivo X100 Pro (naptien.html)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {

  /* ── Bug 1: np-step__balance width:clamp(200px,...) → squeeze title-block còn ~77px
     Smart fix: reorder flex — hàng 1: badge (trái) + balance compact (phải)
                               hàng 2: title-block full width ── */
  .np-page { padding: 12px 12px 60px !important; }
  .np-step { padding: 16px 14px; }

  .np-step__badge   { order: 1; }
  .np-step__balance {
    order: 1;
    margin-left: auto !important;
    width: auto !important;          /* bỏ clamp(200px,...) */
    flex-shrink: 0;
  }
  .np-step__balance .np-balance__label { display: none; }   /* ẩn label "Linh Thạch" */
  .np-step__title-block {
    order: 2;
    flex: 0 0 100%;   /* hàng 2 riêng, chiếm full width */
    width: 100%;
    margin-top: 2px;
  }

  /* ── Bug 2: modal payment 2-column → quá hẹp trên mobile
     QR card ~180px + gap 20px → info grid chỉ còn ~100px → bị cắt
     Fix: stack 1 cột, QR căn giữa; giảm padding modal; code nhỏ hơn ── */
  .np-modal__payment-layout { grid-template-columns: 1fr; }
  .np-momo-qr-wrap { justify-content: center; }
  .np-modal__body { padding: 16px 16px 20px; }
  .np-modal__header { padding: 16px 16px 14px; }
  /* Transfer code 1.1rem → ~35 chars × ~10px = 350px → wrap 4 dòng */
  .np-modal__content-field code { font-size: 0.82rem; }

  /* ── Bug 3: history filter bar — scroll ngang, actions đồng hàng ── */
  .np-hist-meta { display: none; }
  /* Bar: single scrollable row — align-items:center căn đều tất cả children */
  .np-hist-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 10px;
    align-items: center;  /* căn giữa vertical tất cả: filter-div, actions-div, date-wrap */
  }
  .np-hist-bar::-webkit-scrollbar { display: none; }
  /* Filter/Actions wrappers: cũng align-items:center để buttons không bị lệch */
  /* margin-bottom:14px từ base L1716 gây lệch height trong flex row → reset về 0 */
  .np-hist-filter { flex-wrap: nowrap; gap: 6px; flex-shrink: 0; align-items: center; margin-bottom: 0 !important; }
  .np-hist-actions { align-items: center; }
  /* Active filter: bỏ box-shadow 3D (0 2px 0) để không trông cao hơn TOS triggers */
  .np-hist-bar .np-hist-filter__btn.active { box-shadow: none !important; }
  /* TOS triggers trong hist-bar: pill shape (20px) giống filter buttons */
  .np-hist-actions .np-tos-trigger,
  .np-hist-actions .np-tos-trigger--qd { border-radius: 20px !important; }
  /* Tất cả buttons trong bar: CÙNG height 32px, line-height:1 tránh font inflate */
  .np-hist-filter__btn,
  .np-hist-actions .np-tos-trigger,
  .np-hist-actions .np-tos-trigger--qd {
    height: 32px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.78rem;
  }
  /* Actions: divider + compact */
  .np-hist-actions {
    border-left: 1px solid var(--msd-border);
    padding-left: 6px;
    flex-shrink: 0;
    gap: 6px;
  }
  .np-hist-actions .np-tos-trigger,
  .np-hist-actions .np-tos-trigger--qd {
    flex: unset !important;
    overflow: visible !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
  .np-hist-actions .np-tos-trigger span,
  .np-hist-actions .np-tos-trigger--qd span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  /* Date wrap: luôn xuống hàng riêng (full width), không bị kéo theo scroll */
  .np-hist-date-wrap {
    flex: 0 0 100%;
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }
  .np-hist-date-input { flex: 1; min-width: 0; width: 0; }
  .np-hist-date-clear { flex-shrink: 0; }
  .np-hist-date-lbl { display: none; }

  /* ── Balance frame: min-width 220px đảm bảo "345.746" không tràn khung
     Tính toán: font clamp min=1.4rem=22px, "345.746"=7 chars × ~12px = 84px
     Padding 17% mỗi bên → content = 66% × 220px = 145px > 84px+gem(19px)+gap(5px)=108px ✓ ── */
  .np-step__balance { min-width: 220px !important; }
}

/* ── S80 Desktop preserve: hide old single-column elements ─────────────────── */
/* .np-left / .np-right no longer exist in HTML, CSS rules are inert. */
/* Old .np-pay-content, .np-pay-tab, .np-section-h etc. — inert, harmless. */

/* ════════════════════════════════════════════════════════════════════════════
   S80.2 — Flash Sale left panel + Balance trong step-1 head
   ════════════════════════════════════════════════════════════════════════════ */

/* .np-topbar đã xóa khỏi HTML — các rule dưới chỉ là inert fallback */
.np-topbar { display: none; }

/* Balance trong step__head của step-1 — right-aligned, fluid width */
.np-step__balance {
  margin-left: auto;
  flex-shrink: 0;
  width: clamp(200px, 28%, 300px);
  container-type: inline-size;
}

/* Ad slot chiếm phần còn lại của hero strip */
.np-hero-strip .np-ad-slot {
  width: auto;
  flex: 1;
  min-width: 0;
  min-height: clamp(180px, 20vw, 260px);
}

/* ── Flash Sale: panel bên trái hero strip ── */
#flash-sale-banner {
  flex: 0 0 230px;
  min-height: 220px;
  border-radius: var(--msd-radius-lg, 14px);
  background: linear-gradient(145deg, #5a1270 0%, #b71c1c 50%, #e53935 100%);
  border: 1px solid rgba(239, 83, 80, 0.5);
  box-shadow: 0 4px 20px rgba(183,28,28,0.4), 0 0 36px rgba(183,28,28,0.12);
  position: relative;
  overflow: hidden;
  align-items: stretch;
  flex-direction: column;
}
/* Glow aura góc trên phải */
#flash-sale-banner::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(255,200,120,0.28), transparent 65%);
  pointer-events: none;
}

/* Card bên trong banner */
.np-fs-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 20px;
  gap: 5px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.np-fs-card__eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(255,220,200,0.92);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.22);
  padding: 2px 9px;
  border-radius: 20px;
}
.np-fs-card__pct {
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 0 28px rgba(255,140,100,0.75), 0 2px 8px rgba(0,0,0,0.45);
  font-family: 'Poppins', sans-serif;
  margin: 4px 0 2px;
}
.np-fs-card__desc {
  font-size: 0.7rem;
  color: rgba(255,230,218,0.82);
  line-height: 1.4;
  margin-bottom: 10px;
}
.np-fs-card__cd {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.np-fs-card__cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.np-fs-card__cd-label {
  font-size: 0.56rem;
  color: rgba(255,205,185,0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.np-fs-card__cd-sep {
  font-size: 1.15rem;
  font-weight: 800;
  color: rgba(255,205,185,0.85);
  line-height: 1;
  padding-top: 3px;
}
/* Countdown boxes bên trong flash sale card */
.np-fs-card .np-cd-box {
  background: rgba(0,0,0,0.38);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.2rem;
  padding: 5px 9px;
  border-radius: 6px;
  min-width: 34px;
  text-align: center;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Light mode — flash sale giữ tone đỏ, brighten lên */
html[data-theme="light"] #flash-sale-banner {
  background: linear-gradient(145deg, #7b1fa2 0%, #c62828 48%, #ef5350 100%);
  box-shadow: 0 4px 20px rgba(198,40,40,0.45);
  filter: none;
}

/* ── GIF quà tặng light mode: screen blend trực tiếp lên pack bg, không cần dark container.
   base.css .ytt-gif-strip light mode = multiply+filter → đen GIF hiện nguyên → override lại.
   Black pixels GIF screen-blend với pack bg → transparent; neon float tự nhiên (như danh hiệu). */
html[data-theme="light"] .np-pack__gift-img {
  mix-blend-mode: screen !important;
  filter: none !important;
}

/* ── @container: fluid pack content — đề phòng layout squeeze ── */
@container pack-card (max-width: 230px) {
  .np-pack__price { font-size: 0.9rem !important; }
  .np-pack__gift-img { width: 48px; height: 48px; }
  .np-pack__duration { font-size: 0.8rem; }
  .np-pack__per-month { font-size: 0.66rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   S80.3 — @container responsive: fix pay method card overflow + step mobile UX
   Vấn đề: 505px viewport → step padding 28px + page padding 14px → content ~405px
   → pay-methods 1fr1fr → card ~195px → body còn ~10px → text tràn.
   Fix: container-type trên step-2 + @container switch 1 cột + giảm step padding mobile.
   ════════════════════════════════════════════════════════════════════════════ */

/* Step sections: container context để @container queries hoạt động */
#np-step-1 {
  container-type: inline-size;
  container-name: step-1;
}
#np-step-2 {
  container-type: inline-size;
  container-name: pay-step;
}

/* Mobile: giảm step padding + page padding để tăng không gian nội dung */
@media (max-width: 560px) {
  .np-step {
    padding: 18px 16px;
  }
  .np-step__head {
    gap: 10px;
    margin-bottom: 10px;
  }
  /* Hero strip: stack dọc trên mobile nhỏ */
  .np-hero-strip {
    flex-direction: column;
  }
  .np-hero-strip .np-ad-slot {
    min-height: clamp(140px, 30vw, 200px);
  }
  #flash-sale-banner {
    flex: none;
    min-height: 110px;
  }
}

/* Pay methods: switch to 1 column khi step container ≤480px
   (kích hoạt tại ~505px viewport sau khi step padding giảm) */
@container pay-step (max-width: 480px) {
  .np-pay-methods {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* Ẩn hint "Quét QR · LT cộng…" để gọn header */
  .np-step__hint {
    display: none;
  }
  /* Card 1 cột: giảm padding nhẹ cho cân đối */
  .np-pay-method-card {
    padding: 14px 16px;
    gap: 12px;
  }
}

/* Pay method card internal: @container tự động scale khi rất hẹp (<260px) */
.np-pay-method-card {
  container-type: inline-size;
  container-name: pay-card;
}
@container pay-card (max-width: 260px) {
  .np-pay-method-card__icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 10px; }
  .np-pay-method-card__name { font-size: 0.82rem; }
  .np-pay-method-card__desc { font-size: 0.66rem; }
  .np-pay-method-card__cta  { font-size: 0.72rem; }
}

/* Order card compact khi pay-step container rất hẹp (<360px) */
@container pay-step (max-width: 360px) {
  .np-order-card { padding: 12px 14px; gap: 12px; }
  .np-order-card__price-new { font-size: 1.1rem; }
  .np-order-card__icon { font-size: 1.5rem; }
}

/* Balance trong step-1 head: reduce min-width khi step hẹp */
@container step-1 (max-width: 440px) {
  .np-step__balance {
    width: clamp(150px, 42%, 280px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MÃ VIP PROMO — #np-vip-code-section
   ═══════════════════════════════════════════════════════════════════════ */
#np-vip-code-section {
  margin: 18px 0;
}

.np-vip-card {
  background: rgba(15, 10, 30, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  padding: 20px;
}

.np-vip-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-color, #FFD700);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.np-vip-subtitle {
  font-size: 0.78rem;
  color: rgba(212, 175, 55, 0.65);
  margin-bottom: 14px;
  line-height: 1.5;
}

.np-vip-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.np-vip-input {
  flex: 1;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s;
}

.np-vip-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.05em;
  font-family: inherit;
}

.np-vip-input:focus {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(255, 255, 255, 0.09);
}

.np-vip-btn {
  background: linear-gradient(135deg, #c8960c 0%, #FFD700 50%, #c8960c 100%);
  color: #1a1000;
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.1s;
  letter-spacing: 0.02em;
}

.np-vip-btn:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.np-vip-btn:active:not(:disabled) {
  transform: translateY(0);
}

.np-vip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}