.aspect-cover {
  aspect-ratio: 2 / 3;
}

/* ==============================
       CHẾ ĐỘ SÁNG / TỐI
       Chỉ áp dụng khi body có .dark-mode
       ============================== */

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

body.dark-mode {
  color-scheme: dark;
}

body.dark-mode option {
  background-color: #172033;
}

body.dark-mode .hover\:bg-white:hover {
  background-color: #273449 !important;
}

body.dark-mode .hover\:bg-gray-50:hover {
  background-color: #273449 !important;
}

body.dark-mode .hover\:bg-gray-100:hover {
  background-color: #273449 !important;
}

body.dark-mode .hover\:text-gray-900:hover,
    body.dark-mode .hover\:text-gray-700:hover,
    body.dark-mode .hover\:text-black:hover {
  color: #ffffff !important;
}

body.dark-mode .bg-amber-50 {
  background-color: #713f12 !important;
}

body.dark-mode .ring-gray-200 {
  --tw-ring-color: #334155 !important;
}

#theme-toggle {
  white-space: nowrap;
}

/* ==============================
       DARK MODE - BẢNG MÀU TƯƠNG PHẢN CAO
       Ưu tiên dễ đọc, phân lớp rõ ràng, không dùng nền đen tuyệt đối
       ============================== */

body.dark-mode {
  color: #e5e7eb !important;
}

/* Các lớp nền chính */

body.dark-mode .bg-gray-100 {
  background-color: #0b1120 !important;
}

body.dark-mode .bg-gray-200 {
  background-color: #263244 !important;
}

body.dark-mode .bg-gray-300 {
  background-color: #334155 !important;
}

/* Chữ: trắng sáng cho nội dung chính, xám xanh cho nội dung phụ */

body.dark-mode .text-black,
    body.dark-mode .text-gray-900,
    body.dark-mode .text-gray-800,
    body.dark-mode .text-gray-700 {
  color: #f8fafc !important;
}

body.dark-mode .text-gray-600 {
  color: #d1d5db !important;
}

body.dark-mode .text-gray-500 {
  color: #a8b3c7 !important;
}

body.dark-mode .text-gray-400 {
  color: #94a3b8 !important;
}

body.dark-mode .text-gray-300 {
  color: #cbd5e1 !important;
}

/* Màu nhấn giữ đủ độ sáng trên nền tối */

body.dark-mode .text-indigo-900,
    body.dark-mode .text-indigo-700 {
  color: #c7d2fe !important;
}

body.dark-mode .text-indigo-600 {
  color: #a5b4fc !important;
}

body.dark-mode .text-indigo-500 {
  color: #818cf8 !important;
}

body.dark-mode .text-indigo-400 {
  color: #a5b4fc !important;
}

body.dark-mode .text-blue-600 {
  color: #60a5fa !important;
}

body.dark-mode .text-emerald-500,
    body.dark-mode .text-emerald-600,
    body.dark-mode .text-emerald-700 {
  color: #34d399 !important;
}

body.dark-mode .text-amber-500,
    body.dark-mode .text-amber-600,
    body.dark-mode .text-amber-700,
    body.dark-mode .text-amber-800 {
  color: #fbbf24 !important;
}

body.dark-mode .text-orange-400,
    body.dark-mode .text-orange-500 {
  color: #fb923c !important;
}

body.dark-mode .text-pink-500,
    body.dark-mode .text-pink-600 {
  color: #f472b6 !important;
}

body.dark-mode .text-rose-500,
    body.dark-mode .text-rose-600,
    body.dark-mode .text-rose-700 {
  color: #fb7185 !important;
}

body.dark-mode .text-white {
  color: #ffffff !important;
}

/* Điều hướng qua/lại: đồng bộ độ tương phản cho toàn bộ ứng dụng.
       Popup/ảnh dùng nền phủ nhẹ để luôn nhìn thấy trên mọi màu ảnh;
       thanh công cụ dùng màu theo giao diện sáng/tối. */

#vol-detail-prev,
    #vol-detail-next,
    #goods-detail-prev,
    #goods-detail-next,
    #goods-btn-prev,
    #goods-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 30px !important;
  height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 7px !important;
  background: rgba(15,23,42,.58) !important;
  color: #ffffff !important;
  align-items: center;
  justify-content: center;
  opacity: .92;
  box-shadow: 0 2px 8px rgba(0,0,0,.24), inset 0 0 0 1px rgba(15,23,42,.10) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .15s ease, transform .15s ease, color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#vol-detail-prev, #goods-detail-prev {
  left: 5px;
}

#vol-detail-next, #goods-detail-next {
  right: 5px;
}

#goods-btn-prev {
  left: 5px;
}

#goods-btn-next {
  right: 5px;
}

#vol-detail-prev i, #vol-detail-next i,
    #goods-detail-prev i, #goods-detail-next i,
    #goods-btn-prev i, #goods-btn-next i {
  font-size: 13px !important;
  line-height: 1;
  color: currentColor !important;
  opacity: 1 !important;
}

#vol-detail-prev:hover:not(:disabled),
    #vol-detail-next:hover:not(:disabled),
    #goods-detail-prev:hover:not(:disabled),
    #goods-detail-next:hover:not(:disabled),
    #goods-btn-prev:hover:not(:disabled),
    #goods-btn-next:hover:not(:disabled) {
  opacity: 1;
  color: #fff !important;
  background: rgba(15,23,42,.82) !important;
  border-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.32) !important;
  transform: translateY(-50%) scale(1.05);
}

#vol-detail-prev:active:not(:disabled),
    #vol-detail-next:active:not(:disabled),
    #goods-detail-prev:active:not(:disabled),
    #goods-detail-next:active:not(:disabled),
    #goods-btn-prev:active:not(:disabled),
    #goods-btn-next:active:not(:disabled) {
  transform: translateY(-50%) scale(.95);
}

#vol-detail-prev:focus-visible, #vol-detail-next:focus-visible,
    #goods-detail-prev:focus-visible, #goods-detail-next:focus-visible,
    #goods-btn-prev:focus-visible, #goods-btn-next:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  opacity: 1;
}

#vol-detail-prev:disabled, #vol-detail-next:disabled,
    #goods-detail-prev:disabled, #goods-detail-next:disabled,
    #goods-btn-prev:disabled, #goods-btn-next:disabled {
  cursor: default;
  opacity: .30;
}

#goods-detail-prev, #goods-detail-next {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

#goods-detail-prev.hidden, #goods-detail-next.hidden,
    #goods-btn-prev.hidden, #goods-btn-next.hidden,
    #vol-detail-prev.hidden, #vol-detail-next.hidden {
  display: none !important;
}

/* Popup phụ kiện/tập là mốc định vị cho mũi tên điều hướng. */

#goods-detail-modal > div:first-child,
    #vol-detail-modal > div:first-child {
  position: relative;
}

/* Bộ phân trang cũ (nếu được dùng lại) cũng theo cùng quy tắc tương phản. */

/* Dark mode: popup arrows sáng hơn trên nền tối, vẫn có viền để không chìm vào ảnh. */

body.dark-mode #vol-detail-prev, body.dark-mode #vol-detail-next,
    body.dark-mode #goods-detail-prev, body.dark-mode #goods-detail-next,
    body.dark-mode #goods-btn-prev, body.dark-mode #goods-btn-next {
  color: #f8fafc !important;
  background: rgba(248,250,252,.16) !important;
  border-color: rgba(248,250,252,.42) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.40), inset 0 0 0 1px rgba(15,23,42,.20) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  opacity: .96;
}

body.dark-mode #vol-detail-prev:hover:not(:disabled),
    body.dark-mode #vol-detail-next:hover:not(:disabled),
    body.dark-mode #goods-detail-prev:hover:not(:disabled),
    body.dark-mode #goods-detail-next:hover:not(:disabled),
    body.dark-mode #goods-btn-prev:hover:not(:disabled),
    body.dark-mode #goods-btn-next:hover:not(:disabled) {
  color: #fff !important;
  background: rgba(248,250,252,.27) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 3px 11px rgba(0,0,0,.48) !important;
}

@media (max-width: 640px) {
  #vol-detail-prev, #vol-detail-next,
      #goods-detail-prev, #goods-detail-next,
      #goods-btn-prev, #goods-btn-next {
    width: 28px !important;
    height: 34px !important;
  }
  #vol-detail-prev, #goods-detail-prev {
    left: 3px;
  }
  #vol-detail-next, #goods-detail-next {
    right: 3px;
  }
  #goods-btn-prev {
    left: 3px;
  }
  #goods-btn-next {
    right: 3px;
  }
  #vol-detail-prev i, #vol-detail-next i,
      #goods-detail-prev i, #goods-detail-next i,
      #goods-btn-prev i, #goods-btn-next i {
    font-size: 12px !important;
  }
}

/* Viền */

body.dark-mode .border,
    body.dark-mode .border-gray-100,
    body.dark-mode .border-gray-200,
    body.dark-mode .border-gray-300,
    body.dark-mode .border-indigo-200,
    body.dark-mode .border-indigo-300,
    body.dark-mode .border-orange-100,
    body.dark-mode .border-orange-200,
    body.dark-mode .border-amber-100 {
  border-color: #334155 !important;
}

body.dark-mode .border-indigo-500,
    body.dark-mode .border-indigo-600 {
  border-color: #6366f1 !important;
}

body.dark-mode .border-amber-400,
    body.dark-mode .border-amber-500 {
  border-color: #b7791f !important;
}

body.dark-mode .border-b,
    body.dark-mode .border-t,
    body.dark-mode .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
    body.dark-mode .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

/* Input / Select / Textarea */

body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea {
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
  caret-color: #a5b4fc;
  color-scheme: dark;
}

body.dark-mode input:focus,
    body.dark-mode select:focus,
    body.dark-mode textarea:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18) !important;
  outline: none;
}

body.dark-mode input::placeholder,
    body.dark-mode textarea::placeholder {
  color: #7f8ca3 !important;
  opacity: 1;
}

body.dark-mode option {
  background: #111827;
  color: #f8fafc;
}

/* Các nền màu nhạt -> nền tối có màu để vẫn phân biệt trạng thái */

body.dark-mode .bg-indigo-50 {
  background-color: #25245a !important;
}

body.dark-mode .bg-indigo-100 {
  background-color: #312e81 !important;
}

body.dark-mode .bg-blue-50 {
  background-color: #172554 !important;
}

body.dark-mode .bg-blue-100 {
  background-color: #1e3a8a !important;
}

body.dark-mode .bg-green-50 {
  background-color: #12351f !important;
}

body.dark-mode .bg-green-100 {
  background-color: #14532d !important;
}

body.dark-mode .bg-emerald-50 {
  background-color: #073b31 !important;
}

body.dark-mode .bg-emerald-100 {
  background-color: #065f46 !important;
}

body.dark-mode .bg-amber-50,
    body.dark-mode .bg-amber-50\/60 {
  background-color: #3d2d0b !important;
}

body.dark-mode .bg-amber-100 {
  background-color: #5b420f !important;
}

body.dark-mode .bg-yellow-50 {
  background-color: #3d2d0b !important;
}

body.dark-mode .bg-yellow-100 {
  background-color: #5b420f !important;
}

body.dark-mode .bg-pink-50 {
  background-color: #4a1737 !important;
}

body.dark-mode .bg-purple-50 {
  background-color: #2e1b4d !important;
}

body.dark-mode .bg-rose-50 {
  background-color: #4b1722 !important;
}

body.dark-mode .bg-rose-100 {
  background-color: #701a32 !important;
}

/* Hover: tránh trắng chói trong Dark Mode */

body.dark-mode .hover\:bg-white:hover,
    body.dark-mode .hover\:bg-gray-50:hover,
    body.dark-mode .hover\:bg-gray-100:hover,
    body.dark-mode .hover\:bg-gray-200:hover {
  background-color: #263244 !important;
}

body.dark-mode .hover\:bg-indigo-100:hover {
  background-color: #3730a3 !important;
}

body.dark-mode .hover\:text-gray-600:hover,
    body.dark-mode .hover\:text-gray-700:hover,
    body.dark-mode .hover\:text-gray-900:hover,
    body.dark-mode .hover\:text-black:hover {
  color: #ffffff !important;
}

/* Nút màu đậm */

body.dark-mode .bg-indigo-900 {
  background-color: #3730a3 !important;
}

body.dark-mode .hover\:bg-indigo-800:hover {
  background-color: #4338ca !important;
}

body.dark-mode .hover\:bg-indigo-700:hover {
  background-color: #4f46e5 !important;
}

body.dark-mode .bg-indigo-600 {
  background-color: #4f46e5 !important;
}

body.dark-mode .hover\:bg-emerald-700:hover {
  background-color: #047857 !important;
}

body.dark-mode .hover\:bg-amber-600:hover {
  background-color: #d97706 !important;
}

body.dark-mode .bg-red-600 {
  background-color: #dc2626 !important;
}

/* Shadow nhẹ hơn, tạo chiều sâu mà không làm giao diện nặng */

body.dark-mode .shadow-sm,
    body.dark-mode .shadow,
    body.dark-mode .shadow-md,
    body.dark-mode .shadow-lg,
    body.dark-mode .shadow-xl {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

/* Nút chuyển theme cố định: icon-only, có thể bấm ở bất kỳ trang/tab nào */

#theme-toggle {
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

#theme-toggle:hover {
  color: #4338ca !important;
}

#theme-toggle:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.28) !important;
  outline-offset: 2px !important;
}

#theme-toggle i {
  line-height: 1 !important;
}

body.dark-mode #theme-toggle {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
}

body.dark-mode #theme-toggle:hover {
  background: #263244 !important;
  border-color: #64748b !important;
  color: #fde68a !important;
}

/* ==============================
       LỊCH PHÁT HÀNH - GIAO DIỆN DẠNG DÒNG THỜI GIAN
       ============================== */

#release-view {
  margin: 0 auto;
}

.release-shell {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  min-height: calc(100vh - 64px);
}

.release-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.release-toolbar-left,
    .release-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.release-icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #374151;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
}

.release-icon-btn:hover:not(:disabled) {
  background: var(--glass-control);
  color: #111827;
  transform: translateY(-1px);
}

.release-icon-btn:disabled {
  opacity: .22;
  cursor: default;
}

/* Mũi tên chuyển tháng: tương phản rõ ở cả giao diện sáng/tối.
       Tách riêng khỏi nút Trang chủ để không làm thay đổi các nút khác. */

.release-period-nav {
  color: #111827 !important;
  background: var(--glass-control) !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 14px rgba(51,65,85,.045) !important;
  opacity: 1 !important;
}

.release-period-nav i {
  color: currentColor !important;
  opacity: 1 !important;
  font-size: 14px !important;
  line-height: 1;
}

.release-period-nav:hover:not(:disabled) {
  color: #000 !important;
  background: var(--glass-control) !important;
}

.release-period-nav:disabled {
  color: #6b7280 !important;
  background: var(--glass-control) !important;
  border-color: var(--glass-border-soft) !important;
  opacity: .52 !important;
}

.release-home-btn {
  font-size: 17px;
}

.release-slash {
  color: #6b7280;
  font-size: 20px;
  padding: 0 3px;
  user-select: none;
}

.release-period-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.release-period-select {
  height: 32px;
  padding: 0 28px 0 11px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 7px;
  background: var(--glass-control);
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  color-scheme: light;
}

.release-month-select {
  min-width: 92px;
}

.release-year-select {
  min-width: 78px;
}

.release-month-total {
  height: 32px;
  min-width: 104px;
  max-width: 150px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 7px;
  background: var(--glass-control);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 7px 20px rgba(30,41,59,.07);
  -webkit-backdrop-filter: blur(13px) saturate(1.15);
  backdrop-filter: blur(13px) saturate(1.15);
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  font-variant-numeric: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}


.release-month-total-label,
.release-month-total-value {
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-variant-numeric: inherit;
}

.release-period-select option {
  background: #fff;
  color: #111827;
}

.release-publisher-wrap {
  min-width: 200px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 7px;
  background: var(--glass-control);
  padding: 0 9px;
  color: #6b7280;
}

.release-publisher-wrap select {
  min-width: 0;
  flex: 1;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  padding: 0 !important;
}

.release-publisher-chevron {
  font-size: 10px;
  color: #9ca3af;
}

.release-event-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px 20px 2px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: rgba(248,250,252,.86);
}

.release-event-tab {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ui-legacy-secondary);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease,color .15s ease,box-shadow .15s ease;
}

.release-event-tab.active {
  background: #fff;
  color: #4338ca;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}

.release-content {
  padding: 8px 20px 56px;
}

.release-day-group {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  scroll-margin-top: calc(var(--app-topbar-h, 0px) + 76px);
}

.release-day-group + .release-day-group {
  padding-top: 8px;
}

.release-date-column {
  width: 76px;
  padding-top: 1px;
  color: #343941;
  position: sticky;
  left: 0;
  align-self: start;
}

.release-weekday {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 1px;
  white-space: nowrap;
}

.release-day-number,
    .release-month-number {
  font-size: 42px;
  line-height: .94;
  font-weight: 800;
  letter-spacing: -2px;
}

.release-month-number {
  margin-top: 4px;
}

.release-day-total {
  margin-top: 11px;
  font-size: 10px;
  line-height: 1.25;
  color: #9ca3af;
}

.release-day-total span,
    .release-day-total strong {
  display: block;
}

.release-day-total strong {
  color: #2563eb;
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
}

.release-books-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 22px;
}

.release-book-card {
  width: 168px;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  scroll-margin-top: calc(var(--app-topbar-h, 0px) + 76px);
  transition: transform .16s ease, opacity .16s ease, outline-color .18s ease;
}

.release-book-card.release-focus-target,
.release-day-group.release-focus-target {
  outline: 2px solid rgba(99, 102, 241, .42);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .release-book-card,
  .release-day-group {
    scroll-behavior: auto;
  }
}

.release-book-card:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 4px;
}

.release-book-cover {
  width: 168px;
  aspect-ratio: 2 / 3;
  background: #f8fafc;
  border: 1px solid #dfe3e8;
}

.release-event-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}

.release-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(180,83,9,.22);
}

.release-event-badge.is-preorder {
  background: rgba(217,119,6,.96);
}

.release-event-badge.is-release {
  background: rgba(37,99,235,.90);
}

.release-preorder-relative {
  display: inline-flex;
  margin-left: 6px;
  color: #d97706;
  font-size: .88em;
  font-weight: 800;
  white-space: nowrap;
}

.release-shop-links {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 7px;
  overflow: hidden;
}

.release-shop-link,
.release-shop-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(217,119,6,.24);
  border-radius: 8px;
  background: rgba(245,158,11,.10);
  color: #b45309;
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.release-shop-link:hover {
  background: rgba(245,158,11,.17);
  border-color: rgba(217,119,6,.38);
}

.release-shop-links:not(.is-expanded) .release-shop-link.is-extra {
  display: none;
}

.release-shop-links.is-expanded {
  flex-wrap: wrap;
}

.release-shop-more {
  flex: 0 0 auto;
  padding-inline: 6px;
  color: var(--ui-legacy-secondary);
  border-color: rgba(148,163,184,.24);
  background: rgba(148,163,184,.10);
  cursor: pointer;
}

.release-day-preorder-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(245,158,11,.09);
  color: #b45309;
  font-size: 9px;
  font-weight: 800;
}

.release-day-preorder-count strong {
  font-size: 10px;
}

.release-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.release-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.release-book-title {
  color: #23272f;
  margin-top: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
}

.release-book-meta,
    .release-book-price {
  margin-top: 7px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.2;
}

.release-book-price {
  margin-top: 6px;
}

.release-empty-state {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
}

.release-empty-state i {
  font-size: 28px;
  color: #cbd5e1;
}

/* Dark-mode release calendar: the old rule must not force an opaque
   background on .release-content. Its later Liquid Glass styles own the fill. */
body.dark-mode .release-shell,
    body.dark-mode .release-toolbar {
  background: #111827 !important;
  border-color: #334155 !important;
}

body.dark-mode .release-event-tabs {
  background: rgba(15,23,42,.58);
  border-color: rgba(148,163,184,.20);
}

body.dark-mode .release-event-tab {
  color: #94a3b8;
}

body.dark-mode .release-event-tab.active {
  background: rgba(99,102,241,.18);
  color: #c7d2fe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

body.dark-mode .release-shop-link {
  color: #fbbf24;
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.20);
}

body.dark-mode .release-shop-more {
  color: #cbd5e1;
  background: rgba(148,163,184,.08);
  border-color: rgba(148,163,184,.16);
}

body.dark-mode .release-toolbar {
  border-bottom-color: #60a5fa !important;
}

body.dark-mode .release-icon-btn {
  color: #cbd5e1;
}

body.dark-mode .release-icon-btn:hover:not(:disabled) {
  background: var(--glass-control);
  color: #fff;
}

body.dark-mode .release-period-nav {
  color: #f8fafc !important;
  background: var(--glass-control) !important;
  border-color: var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.14) !important;
  opacity: 1 !important;
}

body.dark-mode .release-period-nav:hover:not(:disabled) {
  color: #ffffff !important;
  background: var(--glass-control) !important;
  border-color: var(--glass-border) !important;
}

body.dark-mode .release-period-nav:disabled {
  color: #94a3b8 !important;
  background: var(--glass-control) !important;
  border-color: var(--glass-border-soft) !important;
  opacity: .52 !important;
}

body.dark-mode .release-home-btn {
  color: #60a5fa;
}

body.dark-mode .release-slash {
  color: #64748b;
}

body.dark-mode .release-publisher-wrap {
  background: var(--glass-control);
  border-color: var(--glass-border-soft);
  color: #94a3b8;
}

body.dark-mode .release-publisher-wrap select {
  color: #e5e7eb !important;
}

body.dark-mode .release-period-select {
  background: var(--glass-control) !important;
  border-color: var(--glass-border-soft) !important;
  color: #fff !important;
}

body.dark-mode .release-weekday,
    body.dark-mode .release-book-meta,
    body.dark-mode .release-book-price {
  color: #94a3b8;
}

body.dark-mode .release-day-number,
    body.dark-mode .release-month-number,
    body.dark-mode .release-book-title {
  color: #f8fafc;
}

body.dark-mode .release-book-cover {
  background: #172033;
  border-color: #334155;
}

body.dark-mode .release-cover-placeholder {
  color: #94a3b8;
}

body.dark-mode .release-day-total {
  color: #64748b;
}

body.dark-mode .release-day-total strong {
  color: #60a5fa;
}

@media (max-width: 640px) {
  #release-view {
    margin: -4px 0 0;
  }
  .release-shell {
    min-height: calc(100vh - 24px);
  }
  .release-toolbar {
    padding: 7px 8px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .release-toolbar-left {
    gap: 2px;
    flex-wrap: wrap;
  }
  .release-period-filter {
    gap: 4px;
  }
  .release-month-select {
    min-width: 86px;
  }
  .release-year-select {
    min-width: 74px;
  }
  .release-toolbar-right {
    width: 100%;
  }
  .release-publisher-wrap {
    width: 100%;
    min-width: 0;
  }
  .release-content {
    padding: 9px 10px 36px;
  }
  .release-day-group {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 10px;
    padding-bottom: 42px;
  }
  .release-date-column {
    width: 54px;
  }
  .release-weekday {
    font-size: 10px;
  }
  .release-day-number,
      .release-month-number {
    font-size: 34px;
    letter-spacing: -1px;
  }
  .release-day-total {
    margin-top: 8px;
    font-size: 9px;
  }
  .release-day-total strong {
    font-size: 9px;
    white-space: normal;
    word-break: break-word;
  }
  .release-books-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    padding: 0 2px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .release-books-row::-webkit-scrollbar {
    height: 5px;
  }
  .release-book-card {
    width: 132px;
    min-width: 132px;
    scroll-snap-align: start;
  }
  .release-book-cover {
    width: 132px;
  }
  .release-book-title {
    font-size: 13px;
    min-height: 35px;
  }
  .release-book-meta,
      .release-book-price {
    font-size: 11px;
  }
}

/* Thông tin card được gom thành một panel rõ ràng; giá nằm trong panel thay vì "rơi" ra ngoài. */

.manga-card-meta-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.manga-card-meta-line {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  color: var(--ui-legacy-secondary);
  line-height: 1.25;
  font-weight: 600;
}

.manga-card-meta-line > i {
  width: 14px;
  flex: 0 0 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 10px;
}

.manga-card-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manga-card-mini-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.manga-card-rating-chip,
.manga-card-volume-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.manga-card-rating-chip {
  padding-left: 6px;
  padding-right: 6px;
  color: #b45309;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.18);
}

.manga-card-rating-chip .stars-compact {
  color: #f59e0b;
  display: inline-flex;
  gap: 1px;
  font-size: 8px;
}

.manga-card-volume-chip {
  color: #4f46e5;
  background: rgba(99,102,241,.09);
  border: 1px solid rgba(99,102,241,.16);
}

.manga-card-volume-chip .owned {
  color: #f59e0b;
}

.manga-card-price-panel {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.manga-card-sale-price {
  color: #059669;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -.025em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.manga-card-cover-price {
  color: #94a3b8;
  font-weight: 700;
  font-size: 10px;
  text-decoration: line-through;
  text-decoration-thickness: 1.2px;
  text-decoration-color: rgba(100,116,139,.62);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* List view: giữ cùng ngôn ngữ thiết kế nhưng trải ngang gọn hơn. */

.manga-card-list-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.manga-card-list-info .manga-card-meta-panel {
  margin-top: 6px;
  padding: 8px 10px;
}

.manga-card-list-info .manga-card-price-panel {
  width: auto;
  padding-inline: 13px;
}

body.dark-mode .manga-card-meta-panel {
  background: linear-gradient(180deg, rgba(30,41,59,.70), rgba(15,23,42,.68));
  border-color: rgba(148,163,184,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

body.dark-mode .manga-card-meta-line {
  color: #94a3b8;
}

body.dark-mode .manga-card-meta-line > i {
  color: #64748b;
}

body.dark-mode .manga-card-rating-chip {
  color: #fbbf24;
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.17);
}

body.dark-mode .manga-card-volume-chip {
  color: #c7d2fe;
  background: rgba(99,102,241,.12);
  border-color: rgba(129,140,248,.17);
}

body.dark-mode .manga-card-price-panel {
  border-color: rgba(52,211,153,.14);
}

body.dark-mode .manga-card-sale-price {
  color: #34d399;
}

body.dark-mode .manga-card-cover-price {
  color: #64748b;
  text-decoration-color: #64748b;
}

@media (max-width: 640px) {
  .manga-card-meta-panel {
    padding: 8px 7px;
    gap: 6px;
    border-radius: 12px;
  }
  .manga-card-meta-line {
    font-size: 9px;
    gap: 3px;
  }
  .manga-card-meta-line > i {
    width: 11px;
    flex-basis: 11px;
    font-size: 8px;
  }
  .manga-card-rating-chip,
  .manga-card-volume-chip {
    min-height: 22px;
    padding: 3px 5px;
    font-size: 9px;
    gap: 3px;
  }
  .manga-card-rating-chip .stars-compact {
    font-size: 7px;
  }
  .manga-card-price-panel {
    min-height: 34px;
    padding: 7px 5px;
    gap: 5px;
  }
  .manga-card-sale-price {
    font-size: 12px;
  }
  .manga-card-cover-price {
    font-size: 8.5px;
  }
  .manga-card-list-info {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .manga-card-list-info .manga-card-price-panel {
    width: fit-content;
    min-width: 0;
  }
}

/* Logo NXB thu gọn theo cỡ chữ: nhận diện rõ nhưng không lấn át tên truyện. */

.publisher-logo-badge {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 2px 6px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.82);
  position: relative;
}

.publisher-logo-badge img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 1px;
  background: #fff;
}

/* Logo NXB Trẻ do người dùng cung cấp: giữ đúng biểu tượng, chỉ thu gọn theo badge. */

.publisher-logo-badge.publisher-logo-tre img {
  padding: 0;
}

.publisher-logo-badge.publisher-logo-ipm img {
  padding: 0;
}

.publisher-logo-fallback {
  width: 100%;
  height: 100%;
  display: none;
  place-items: center;
  padding: 1px;
  color: #4f46e5;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  font-size: 6px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.02em;
  text-align: center;
}

.publisher-logo-badge.no-logo .publisher-logo-fallback,
.publisher-logo-badge.logo-fallback-mode .publisher-logo-fallback {
  display: grid;
}

.publisher-logo-badge.logo-fallback-mode img {
  display: none !important;
}

.manga-card-meta-panel {
  margin-top: 0;
}

body.dark-mode .publisher-logo-badge {
  background: #fff;
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 2px 7px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.025);
}

body.dark-mode .publisher-logo-fallback {
  color: #c7d2fe;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
}

/* List view dùng cùng tỷ lệ để toàn bộ app đồng nhất. */

.manga-card-list-info .publisher-logo-badge {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

@media (max-width: 640px) {
  .publisher-logo-badge {
    width: 16px;
    height: 16px;
    border-radius: 5px;
  }
  .publisher-logo-badge img {
    padding: 1px;
  }
  .publisher-logo-badge.publisher-logo-tre img,
  .publisher-logo-badge.publisher-logo-ipm img {
    padding: 0;
  }
  .publisher-logo-fallback {
    font-size: 5px;
  }
  .manga-card-list-info .publisher-logo-badge {
    width: 16px;
    height: 16px;
  }
}

/* Đưa logo NXB lên góc trái ảnh bìa để phần tiêu đề sạch và cân giữa tuyệt đối. */

.manga-card-cover-wrap {
  position: relative;
  isolation: isolate;
}

.manga-card-cover-wrap > .publisher-logo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 12px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.manga-card-cover-wrap > .publisher-logo-badge .publisher-logo-fallback {
  font-size: 7px;
  background: rgba(255,255,255,.96);
}

/* Dạng lưới: tên truyện căn giữa, tối đa 2 dòng để các card thẳng hàng. */

.manga-card-title {
  width: 100%;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  hyphens: auto;
}

/* Dạng danh sách: logo nằm trên ảnh, tên căn trái cùng cột thông tin. */

.manga-card-list-cover > .publisher-logo-badge {
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.manga-card-list-cover > .publisher-logo-badge .publisher-logo-fallback {
  font-size: 5px;
}

.manga-card-list-info .manga-card-title {
  min-height: 0;
  padding: 0 !important;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  text-overflow: clip;
  margin-bottom: 0;
}

body.dark-mode .manga-card-cover-wrap > .publisher-logo-badge {
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 14px rgba(0,0,0,.34), 0 0 0 1px rgba(15,23,42,.20);
}

@media (max-width: 640px) {
  .manga-card-cover-wrap > .publisher-logo-badge {
    top: 6px;
    left: 6px;
    width: 21px;
    height: 21px;
    border-radius: 6px;
  }
  .manga-card-cover-wrap > .publisher-logo-badge img {
    padding: 1.5px;
  }
  .manga-card-cover-wrap > .publisher-logo-badge .publisher-logo-fallback {
    font-size: 6px;
  }
  .manga-card-title {
    min-height: 2.65em;
    padding-inline: 1px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .manga-card-list-info .manga-card-title {
    padding-inline: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .manga-card-list-cover > .publisher-logo-badge {
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
  }
}

/* Popup tập dùng đúng kiểu điều hướng của popup phụ kiện: không nút, kéo/vuốt ngang hoặc bàn phím. */

#vol-detail-image-stage {
  cursor: grab !important;
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#vol-detail-image-stage:active {
  cursor: grabbing !important;
}

#vol-detail-image-stage #vol-info-cover {
  pointer-events: none;
  -webkit-user-drag: none;
}

#vol-detail-image-stage.vol-swiping .vol-zoom-overlay {
  opacity: 0 !important;
}

.vol-swipe-hint {
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-size: 10px;
  line-height: 1.35;
  color: var(--ui-legacy-caption);
  text-align: center;
}

.vol-swipe-hint:not(.hidden) {
  display: flex !important;
}

body.dark-mode .vol-swipe-hint {
  color: #94a3b8 !important;
}

.volume-hover-target .volume-inline-preview {
  border-radius: 16px 16px 8px 8px;
}

.volume-hover-target .volume-inline-preview::before {
  -webkit-backdrop-filter: blur(9px) saturate(1.10);
  backdrop-filter: blur(9px) saturate(1.10);
}

.volume-hover-target .vhp-row .vhp-seal,
  .volume-hover-target .vhp-row .vhp-edition,
  .volume-hover-target .vhp-row .vhp-date,
  .volume-hover-target .vhp-row .vhp-goods {
  overflow-wrap: anywhere;
}



.volume-hover-target .vhp-goods {
  -webkit-line-clamp: 2 !important;
}

@media (hover:none), (pointer:coarse), (max-width:767px){
  .volume-hover-target .volume-inline-preview {
    height: 52% !important;
    min-height: 52% !important;
  }
}

#vol-detail-modal #vol-info-goods-list.vol-info-goods-strip {
  display: flex !important;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 2px 8px 2px !important;
  max-height: none !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

#vol-detail-modal #vol-info-goods-list.vol-info-goods-strip::-webkit-scrollbar {
  height: 8px;
}

#vol-detail-modal #vol-info-goods-list.vol-info-goods-strip::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.35);
  border-radius: 999px;
}

#vol-detail-modal .vol-info-good-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
}

#vol-detail-modal .vol-info-good-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,.14);
}

#vol-detail-modal .vol-info-good-thumb {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#vol-detail-modal .vol-info-good-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#vol-detail-modal .vol-info-good-name {
  width: 100%;
  text-align: center;
  font-weight: 700;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

#vol-detail-modal .vol-info-goods-empty {
  width: 100%;
  font-style: italic;
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 640px){
  #vol-detail-modal #vol-info-goods-list.vol-info-goods-strip {
    gap: 10px;
    padding-bottom: 6px !important;
  }
  #vol-detail-modal .vol-info-good-card {
    border-radius: 14px;
  }
  #vol-detail-modal .vol-info-good-thumb {
    border-radius: 12px;
  }
}

#vol-detail-modal .vol-info-goods-inline {
  display: flex;
  flex-direction: column;
}

#vol-detail-modal .vol-info-goods-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

#vol-detail-modal #vol-info-goods-list.vol-info-goods-inline-strip {
  padding: 2px 2px 4px 2px !important;
  gap: 10px;
}

#vol-detail-modal .vol-info-good-card {
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  padding: 8px 7px;
  gap: 6px;
  border-radius: 15px;
}

#vol-detail-modal .vol-info-good-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

#vol-detail-modal .vol-info-good-name {
  font-size: 11px;
  line-height: 1.25;
  min-height: 28px;
}

#vol-detail-modal .vol-info-goods-empty {
  padding: 2px 0 4px;
}

@media (min-width: 640px){
  #vol-detail-modal #vol-detail-image-stage {
    height: 18rem !important;
  }
}

@media (max-width: 640px){
  #vol-detail-modal .vol-info-goods-inline {
    gap: 8px;
  }
  #vol-detail-modal .vol-info-good-card {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    padding: 8px 7px;
  }
  #vol-detail-modal .vol-info-good-thumb {
    width: 48px;
    height: 48px;
  }
  #vol-detail-modal .vol-info-good-name {
    font-size: 11px;
    min-height: 28px;
  }
}

#vol-detail-modal .vol-detail-layout {
  align-items: flex-start;
}

#vol-detail-modal .vol-info-main-column {
  padding-top: 2px;
}

#vol-detail-modal .vol-info-goods-inline {
  gap: 9px;
}

#vol-detail-modal .vol-info-goods-inline-head {
  padding-top: 1px;
}

@media (min-width: 640px){
  #vol-detail-modal .vol-detail-layout {
    column-gap: 28px !important;
  }
  #vol-detail-modal .vol-info-main-column {
    padding-top: 4px;
  }
  #vol-detail-modal .vol-info-goods-inline {
    margin-top: 14px;
  }
}

@media (max-width: 639px){
  #vol-detail-modal .vol-info-goods-inline {
    margin-top: 10px;
  }
}

#vol-detail-modal .vol-price-summary {
  --vol-price-gap: 8px;
  --vol-price-pad-x: 14px;
  --vol-price-pad-y: 10px;
  --vol-price-label-size: 10.5px;
  --vol-price-value-size: 13px;
  --vol-price-line-height: 1.2;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  padding: var(--vol-price-pad-y) var(--vol-price-pad-x) !important;
  gap: var(--vol-price-gap) !important;
  text-align: left !important;
  overflow: visible !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

#vol-detail-modal .vol-price-summary > .vol-price-cell {
  display: flex;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

/* Các ô giá bị ẩn phải rời khỏi hàng hoàn toàn.
   Giá thị trường ở popup thông tin được JS quyết định theo tag MUA/Cần mua + giá > 0,
   nên không khóa theo trạng thái đăng nhập tại CSS. */
#vol-detail-modal .vol-price-summary > .vol-price-cell.hidden {
  display: none !important;
}

#vol-detail-modal .vol-price-summary > .vol-price-cell > span {
  max-width: 100%;
  text-align: left !important;
  line-height: var(--vol-price-line-height) !important;
}

#vol-detail-modal .vol-price-summary > .vol-price-cell > span:first-child {
  font-size: var(--vol-price-label-size) !important;
}

#vol-detail-modal .vol-price-summary > .vol-price-cell > span:last-child {
  font-size: var(--vol-price-value-size) !important;
}

/* Density is based on the number of cells that are actually visible after all
   auth/responsive rules are applied. Fewer cells receive more visual breathing room. */
#vol-detail-modal .vol-price-summary[data-visible-price-count="2"] {
  --vol-price-gap: 12px;
  --vol-price-pad-x: 16px;
  --vol-price-label-size: 11.5px;
  --vol-price-value-size: 15.5px;
}

#vol-detail-modal .vol-price-summary[data-visible-price-count="3"] {
  --vol-price-gap: 9px;
  --vol-price-pad-x: 14px;
  --vol-price-label-size: 11px;
  --vol-price-value-size: 14px;
}

#vol-detail-modal .vol-price-summary[data-visible-price-count="4"] {
  --vol-price-gap: 6px;
  --vol-price-pad-x: 11px;
  --vol-price-label-size: 10px;
  --vol-price-value-size: 12.5px;
}

#vol-detail-modal .vol-price-summary[data-visible-price-count="5"] {
  --vol-price-gap: 4px;
  --vol-price-pad-x: 9px;
  --vol-price-label-size: 9px;
  --vol-price-value-size: 11.25px;
}

#vol-detail-modal .vol-info-goods-inline {
  margin-top: 10px !important;
}

@media (max-width: 640px) and (orientation: portrait) {
  #vol-detail-modal .vol-price-summary {
    --vol-price-pad-y: 9px;
    padding: var(--vol-price-pad-y) var(--vol-price-pad-x) !important;
    margin-top: 9px !important;
  }
  #vol-detail-modal .vol-info-goods-inline {
    margin-top: 9px !important;
  }

  /* Five logical prices do not fit comfortably on portrait. Keep the four monetary
     values and hide discount first, exactly as the mobile priority rule requires. */
  #vol-detail-modal .vol-price-summary.has-market-price.has-retail-price #vol-info-discount-row {
    display: none !important;
  }

  /* Portrait values stay readable: padding/labels shrink before the numbers do. */
  #vol-detail-modal .vol-price-summary[data-visible-price-count="2"] {
    --vol-price-gap: 9px;
    --vol-price-pad-x: 12px;
    --vol-price-label-size: 10.5px;
    --vol-price-value-size: 14.5px;
  }
  #vol-detail-modal .vol-price-summary[data-visible-price-count="3"] {
    --vol-price-gap: 6px;
    --vol-price-pad-x: 10px;
    --vol-price-label-size: 9.5px;
    --vol-price-value-size: 12.5px;
  }
  #vol-detail-modal .vol-price-summary[data-visible-price-count="4"] {
    --vol-price-gap: 4px;
    --vol-price-pad-x: 8px;
    --vol-price-label-size: 8.5px;
    --vol-price-value-size: clamp(10.5px, 2.9vw, 11.5px);
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  #vol-detail-modal .vol-price-summary {
    --vol-price-pad-x: 7px;
  }
  /* On very narrow phones, any optional price takes priority over discount. */
  #vol-detail-modal .vol-price-summary.has-market-price #vol-info-discount-row,
  #vol-detail-modal .vol-price-summary.has-retail-price #vol-info-discount-row {
    display: none !important;
  }
  #vol-detail-modal .vol-price-summary[data-visible-price-count="3"] {
    --vol-price-gap: 4px;
    --vol-price-pad-x: 7px;
    --vol-price-label-size: 8.5px;
    --vol-price-value-size: 11px;
  }
  #vol-detail-modal .vol-price-summary[data-visible-price-count="4"] {
    --vol-price-gap: 3px;
    --vol-price-pad-x: 6px;
    --vol-price-label-size: 8px;
    --vol-price-value-size: 10.25px;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  #vol-detail-modal .vol-price-summary[data-visible-price-count="4"] {
    --vol-price-label-size: 9.5px;
    --vol-price-value-size: 12px;
  }
  #vol-detail-modal .vol-price-summary[data-visible-price-count="5"] {
    --vol-price-label-size: 8.75px;
    --vol-price-value-size: 10.75px;
  }
}

:root {
  --ui-bg: #f5f7fb;
  --ui-bg-2: #eef2ff;
  --ui-border: rgba(148,163,184,.22);
  --ui-border-strong: rgba(99,102,241,.22);
  --ui-text: #172033;
  --ui-muted: #37465c;
  --ui-subtle: #344256;
  --ui-legacy-caption: #344256;
  --ui-legacy-secondary: #37465c;
  --ui-primary: #5b5bd6;
  --ui-primary-2: #7c3aed;
  --ui-primary-soft: rgba(99,102,241,.10);
  --ui-accent: #f59e0b;
  --ui-success: #10b981;
  --ui-danger: #f43f5e;
  --ui-shadow: 0 18px 45px rgba(51,65,85,.09), 0 2px 8px rgba(51,65,85,.04);
  --ui-shadow-hover: 0 24px 55px rgba(67,56,202,.15), 0 6px 18px rgba(51,65,85,.08);
  --ui-radius: 22px;
  --ui-radius-sm: 14px;
}

body.dark-mode {
  --ui-bg: #090e1a;
  --ui-bg-2: #111831;
  --ui-surface: rgba(20,28,47,.88);
  --ui-surface-solid: #141c2f;
  --ui-surface-soft: rgba(24,34,55,.94);
  --ui-border: rgba(148,163,184,.16);
  --ui-border-strong: rgba(129,140,248,.28);
  --ui-text: #f4f7fb;
  --ui-muted: #b7c0cf;
  --ui-subtle: #7f8ba1;
  --ui-legacy-caption: #94a3b8;
  --ui-legacy-secondary: #64748b;
  --ui-primary: #8b8cf8;
  --ui-primary-2: #a78bfa;
  --ui-primary-soft: rgba(129,140,248,.14);
  --ui-shadow: 0 18px 55px rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.20);
  --ui-shadow-hover: 0 26px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(129,140,248,.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(circle at 8% 0%, rgba(99,102,241,.12), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(236,72,153,.08), transparent 24%),
    linear-gradient(145deg, var(--ui-bg) 0%, #f8fafc 46%, var(--ui-bg-2) 100%) !important;
  color: var(--ui-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
  position: relative;
  overflow-x: hidden;
}

body.dark-mode {
  background: radial-gradient(circle at 10% -5%, rgba(99,102,241,.20), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(147,51,234,.13), transparent 24%),
    linear-gradient(145deg, var(--ui-bg) 0%, #0c1323 48%, var(--ui-bg-2) 100%) !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
  opacity: .65;
}

body::before {
  width: 280px;
  height: 280px;
  left: -120px;
  top: 18%;
  background: rgba(99,102,241,.08);
}

body::after {
  width: 340px;
  height: 340px;
  right: -170px;
  bottom: 8%;
  background: rgba(245,158,11,.07);
}

#shelf-view, #goods-view, #selling-view, #detail-view, #spending-view, #release-view {
  position: relative;
}

#shelf-view:not(.hidden), #goods-view:not(.hidden), #selling-view:not(.hidden), #detail-view:not(.hidden), #spending-view:not(.hidden) {
  animation: modernViewIn .28s ease both;
}

/* Lịch phát hành chứa toolbar fixed ở portrait. Không dùng transform trên ancestor này:
   Safari/WebKit có thể biến fixed descendant thành phần tử bám theo ancestor đã transform. */
#release-view:not(.hidden) {
  animation: releaseViewFadeIn .18s ease both;
}

@keyframes modernViewIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes releaseViewFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Universal interactions */

button, input, select, textarea {
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.14) !important;
}

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: var(--ui-border) !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--ui-text) !important;
  border-radius: 13px !important;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]),
body.dark-mode select,
body.dark-mode textarea {
  background: rgba(15,23,42,.72) !important;
  border-color: rgba(148,163,184,.20) !important;
  color: var(--ui-text) !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: rgba(99,102,241,.62) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.10) !important;
}

/* Floating theme button */

#theme-toggle {
  right: 20px !important;
  bottom: 20px !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.dark-mode #theme-toggle {
  background: rgba(20,28,47,.88) !important;
  color: #fbbf24 !important;
  border-color: rgba(148,163,184,.20) !important;
}

/* ========== SHELF / HOME ========== */

#shelf-view > div:first-child {
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#shelf-view > div:first-child h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
  letter-spacing: -.04em;
}

#shelf-view > div:first-child h1 i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 58%, #ec4899);
  box-shadow: 0 8px 22px rgba(99,102,241,.28);
}

#shelf-view > div:first-child p {
  margin-top: 3px;
  color: var(--ui-muted) !important;
}

#shelf-view > div:first-child button,
#shelf-view > div:first-child #auth-user-box {
  min-height: 42px;
  border-radius: 13px !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

#shelf-view > div:first-child > div:last-child > button:nth-child(2) {
  border: 0 !important;
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(79,70,229,.22) !important;
}

#shelf-view > div:first-child button:hover {
  transform: translateY(-1px);
}

#shelf-view > div:nth-child(2) > div {
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 10px 30px rgba(51,65,85,.06) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#shelf-view > div:nth-child(2) > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow-hover) !important;
  border-color: var(--ui-border-strong) !important;
}

#shelf-view > div:nth-child(2) > div > i {
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
}

#shelf-view > div:nth-child(2) > div span[id^="stat-"] {
  letter-spacing: -.045em;
  color: var(--ui-text);
}

#shelf-view > div:nth-child(3) {
  border-radius: 22px !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#search-input {
  min-height: 46px;
  padding-left: 42px !important;
  background-image: linear-gradient(transparent,transparent) !important;
}

#shelf-view > div:nth-child(3) {
  position: relative;
}

#shelf-view > div:nth-child(3)::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 28px;
  left: 29px;
  color: #94a3b8;
  z-index: 2;
  font-size: 13px;
  pointer-events: none;
}

#shelf-view > div:nth-child(3) .bg-gray-100,
#detail-view .bg-gray-100 {
  background: rgba(148,163,184,.09) !important;
  border-color: var(--ui-border) !important;
}

/* Manga cards */

#manga-grid > div {
  border-radius: 20px !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: 0 8px 26px rgba(51,65,85,.07) !important;
}

#manga-grid > div:hover {
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.28) !important;
  box-shadow: var(--ui-shadow-hover) !important;
}

#manga-grid > div > div:first-child {
  border-radius: 15px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}

#manga-grid > div > div:first-child img {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

#manga-grid h3 {
  letter-spacing: -.025em;
}

#manga-grid .text-orange-400, #manga-grid .text-orange-500 {
  color: #f59e0b !important;
}

/* v671 — Card Hover Lift 115%, restricted to five approved content areas.
   Tủ Truyện / Tập truyện / Phụ kiện / Thanh lý / Lịch phát hành.
   Hover with a real pointer only; never re-route click/touch events.  The card
   owns the transform so cover images must not receive a second hover zoom. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Include both grid and list layouts in the two detail tabs. */
  :is(#shelf-view #manga-grid > .manga-shelf-card,
      #detail-view #volumes-grid > .volume-grid-card,
      #detail-view #volumes-grid > .volume-list-card,
      #detail-view #goods-grid > .goods-grid-card,
      #detail-view #goods-grid > .goods-detail-card,
      #selling-view .selling-grid > .selling-card,
      #release-view .release-books-row > .release-book-card) {
    position: relative;
    transform-origin: center center;
    transition: transform .34s cubic-bezier(.22,.76,.22,1), box-shadow .34s ease;
  }
  /* Beat legacy per-card translations/glows, including selling-labelled cards.
     Scaling the grid item never changes placement of neighbouring grid items. */
  html body #shelf-view#shelf-view #manga-grid > .manga-shelf-card:hover,
  html body #detail-view#detail-view #volumes-grid > .volume-grid-card:hover,
  html body #detail-view#detail-view #volumes-grid > .volume-list-card:hover,
  html body #detail-view#detail-view #goods-grid > .goods-grid-card:hover,
  html body #detail-view#detail-view #goods-grid > .goods-detail-card:hover,
  html body #selling-view#selling-view .selling-grid > .selling-card:hover,
  html body #release-view#release-view .release-books-row > .release-book-card:hover {
    transform: scale(1.15) !important;
    z-index: 80 !important;
    box-shadow: 0 24px 52px rgba(16,23,42,.34) !important;
  }
  /* No nested cover hover zoom on the five selected kinds of cards.
     Do not wipe filter: release owned/sold tint and missing-cover greyscale
     are meaningful states, and unrelated image animations stay untouched. */
  :is(#shelf-view #manga-grid > .manga-shelf-card,
      #detail-view #volumes-grid > .volume-grid-card,
      #detail-view #volumes-grid > .volume-list-card,
      #detail-view #goods-grid > .goods-grid-card,
      #detail-view #goods-grid > .goods-detail-card,
      #selling-view .selling-grid > .selling-card,
      #release-view .release-books-row > .release-book-card):hover img {
    transform: none !important;
  }
  /* Independent images in OTHER areas retain their preexisting hover
     behaviour.  Do not promote those areas to Card Hover Lift. */
  :is(#detail-cover-img,
      #book-vault-view .vault-book-card img,
      #global-search-results .global-search-result img,
      #vol-detail-modal #vol-info-cover,
      #goods-detail-modal #goods-detail-img,
      #vol-detail-modal .vol-info-good-card img) {
    transform-origin: center center;
    transition: transform .34s cubic-bezier(.22,.76,.22,1), box-shadow .34s ease, filter .34s ease;
  }
  :is(#detail-cover-img,
      #book-vault-view .vault-book-card img,
      #global-search-results .global-search-result img,
      #vol-detail-modal #vol-info-cover,
      #goods-detail-modal #goods-detail-img,
      #vol-detail-modal .vol-info-good-card img):hover,
  :is(#book-vault-view .vault-book-card:hover img,
      #global-search-results .global-search-result:hover img,
      #vol-detail-modal .vol-info-good-card:hover img) {
    transform: scale(1.15) !important;
    box-shadow: 0 17px 38px rgba(16,23,42,.38) !important;
    filter: drop-shadow(0 8px 13px rgba(16,23,42,.18));
    position: relative;
    z-index: 42;
  }
  #vol-detail-image-stage.vol-swiping #vol-info-cover:hover,
  #goods-detail-image-stage.goods-swiping #goods-detail-img:hover {
    transform: none !important;
  }
}

/* Pagination */

#shelf-pagination, #volumes-pagination, #goods-pagination {
  border-top-color: var(--ui-border) !important;
}

#shelf-pagination button, #volumes-pagination button, #goods-pagination button {
  min-width: 34px;
  min-height: 34px;
  border-radius: 11px !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text);
}

#shelf-pagination button.bg-indigo-600, #volumes-pagination button.bg-indigo-600, #goods-pagination button.bg-indigo-600 {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  box-shadow: 0 7px 18px rgba(99,102,241,.22) !important;
}

/* ========== GOODS PAGE ========== */

#goods-view > div:first-child button,
#detail-view > div:first-child button,
#spending-view > div:first-child button {
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: 0 5px 16px rgba(51,65,85,.05);
}

#goods-view > div:nth-child(4) {
  border-radius: 24px !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#goods-category-tabs > button {
  border-radius: 17px !important;
  border-color: var(--ui-border) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.82)) !important;
  box-shadow: 0 6px 18px rgba(51,65,85,.045);
}

#goods-category-tabs > button:not(:disabled):hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.34) !important;
  box-shadow: 0 14px 28px rgba(245,158,11,.10) !important;
}

body.dark-mode #goods-category-tabs > button {
  background: linear-gradient(145deg, rgba(24,34,55,.96), rgba(15,23,42,.88)) !important;
}

/* ========== DETAIL PAGE ========== */

#detail-view > div:nth-child(2) {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  border: 1px solid var(--ui-border) !important;
  background: radial-gradient(circle at 88% 14%, rgba(99,102,241,.12), transparent 28%),
    var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#detail-cover-container {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 18px 38px rgba(30,41,59,.22) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

#detail-cover-container:hover {
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: 0 24px 44px rgba(30,41,59,.28) !important;
}

#detail-genre > * {
  border-radius: 999px !important;
  padding: 5px 10px !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  border: 1px solid rgba(99,102,241,.10) !important;
}

#detail-view > div:nth-child(2) .grid.grid-cols-2 {
  border-top-color: var(--ui-border) !important;
}

#detail-view > div:nth-child(2) .grid.grid-cols-2 > div {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(148,163,184,.055);
}

#related-manga-section,
#detail-view > div:nth-child(5) {
  border-radius: 22px !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

#detail-view > div:nth-child(4) {
  border: 0 !important;
  overflow: visible !important;
}

#detail-view > div:nth-child(4) nav {
  width: fit-content;
  padding: 5px;
  border-radius: 15px;
  border: 1px solid var(--ui-border);
  background: rgba(148,163,184,.08);
}

#tab-btn-volumes.border-indigo-600, #tab-btn-goods.border-indigo-600 {
  background: var(--ui-surface-solid) !important;
  color: var(--ui-primary) !important;
  box-shadow: 0 5px 15px rgba(51,65,85,.09) !important;
}

#detail-view > div:nth-child(5) {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#volumes-grid > div,
#goods-grid > div {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: 0 7px 22px rgba(51,65,85,.055) !important;
}

#volumes-grid > div:hover,
#goods-grid > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow-hover) !important;
  border-color: rgba(99,102,241,.24) !important;
}

/* ========== SPENDING ========== */

#spending-view > div:nth-child(3) > div {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

#spending-view > div:nth-child(3) > div::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -42px;
  bottom: -46px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(99,102,241,.13), rgba(236,72,153,.08));
}

#spending-content-box {
  border-radius: 26px !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#spending-content-box table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

#spending-content-box thead th {
  color: var(--ui-subtle) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px !important;
}

#spending-content-box tbody tr {
  background: rgba(148,163,184,.055);
}

#spending-content-box tbody td:first-child {
  border-radius: 12px 0 0 12px;
}

#spending-content-box tbody td:last-child {
  border-radius: 0 12px 12px 0;
}

/* ========== RELEASE CALENDAR ========== */

.release-shell {
  max-width: 1220px !important;
  margin: 0 auto !important;
  border-radius: 28px !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  overflow: visible;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.release-toolbar {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,.64) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.dark-mode .release-toolbar {
  background: rgba(15,23,42,.58) !important;
}

.release-icon-btn,
.release-period-select,
.release-publisher-wrap {
  border: 1px solid var(--glass-border-soft) !important;
  background: var(--glass-control) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 14px rgba(51,65,85,.045) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
}

body.dark-mode .release-icon-btn,
body.dark-mode .release-period-select,
body.dark-mode .release-publisher-wrap {
  border-color: var(--glass-border-soft) !important;
  background: var(--glass-control) !important;
}

.release-home-btn {
  color: var(--ui-text) !important;
  border: 1px solid var(--glass-border-soft) !important;
  background: var(--glass-control) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 14px rgba(51,65,85,.045) !important;
}

.release-period-nav:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,.36) !important;
  color: var(--ui-primary) !important;
}

.release-content {
  background: transparent !important;
}

.release-day-group {
  position: relative;
  margin: 8px 0 26px;
  padding: 18px 16px 26px !important;
  border-radius: 22px;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(148,163,184,.13);
}

body.dark-mode .release-day-group {
  background: rgba(15,23,42,.38);
  border-color: rgba(148,163,184,.12);
}

.release-day-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6366f1, #a855f7, #ec4899);
  opacity: .70;
}

.release-weekday {
  color: var(--ui-muted) !important;
  text-transform: capitalize;
}

.release-day-number, .release-month-number {
  color: var(--ui-text) !important;
}

.release-day-total {
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: rgba(99,102,241,.08) !important;
  border: 1px solid rgba(99,102,241,.10);
}

.release-book-card {
  padding: 10px !important;
  border-radius: 20px !important;
  background: var(--ui-surface-solid) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: 0 7px 20px rgba(51,65,85,.055) !important;
}

.release-book-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--ui-shadow-hover) !important;
  border-color: rgba(99,102,241,.25) !important;
}

.release-book-cover {
  border-radius: 15px !important;
}

.release-book-card:hover .release-book-cover img {
  transform: scale(1.04);
}

.release-book-title {
  color: var(--ui-text) !important;
  font-size: 14px !important;
  line-height: 1.34 !important;
  font-weight: 760 !important;
  letter-spacing: -.018em !important;
}

.release-book-meta {
  color: var(--ui-muted) !important;
}

.release-book-price {
  color: var(--ui-primary) !important;
  font-size: 14px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
}


/* ========== MODALS ========== */

[id$="-modal"].fixed.inset-0:not(:where(#global-search-modal)) {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

[id$="-modal"].fixed.inset-0 > .bg-white {
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.28) !important;
}

body.dark-mode [id$="-modal"].fixed.inset-0 > .bg-white {
  background: rgba(20,28,47,.97) !important;
  border-color: rgba(148,163,184,.18) !important;
}

#vol-detail-modal > div,
#goods-detail-modal > div {
  overflow: hidden;
}

#goods-detail-modal .bg-gray-50, #vol-detail-modal .bg-gray-50 {
  background: rgba(148,163,184,.07) !important;
}

/* Make text colors consistent with the modern variables */

body:not(.dark-mode) .text-gray-900,
body:not(.dark-mode) .text-gray-800,
body:not(.dark-mode) .text-gray-700 {
  color: var(--ui-text) !important;
}

body:not(.dark-mode) .text-gray-600,
body:not(.dark-mode) .text-gray-500 {
  color: var(--ui-muted) !important;
}

body:not(.dark-mode) .text-gray-400 {
  color: var(--ui-subtle) !important;
}

body.dark-mode .bg-white {
  background-color: var(--ui-surface-solid) !important;
}

body.dark-mode .bg-gray-50 {
  background-color: rgba(15,23,42,.70) !important;
}

body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .border {
  border-color: var(--ui-border) !important;
}

/* Accent buttons */

.bg-indigo-600, .bg-indigo-700, .bg-indigo-900 {
  background-image: linear-gradient(135deg, #5b5bd6, #7c3aed) !important;
  border-color: transparent !important;
}

button.bg-indigo-600:hover, button.bg-indigo-700:hover, button.bg-indigo-900:hover, button.bg-emerald-600:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Scrollbars */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.30) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.24);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,.38);
}

/* Responsive refinements */

@media (max-width: 640px) {
  body {
    padding: 10px !important;
  }
  #shelf-view > div:first-child {
    padding: 14px;
    border-radius: 20px;
  }
  #shelf-view > div:nth-child(2) > div {
    border-radius: 17px !important;
  }
  #shelf-view > div:nth-child(3) {
    border-radius: 18px !important;
  }
  #shelf-view > div:nth-child(3)::before {
    top: 27px;
    left: 25px;
  }
  #manga-grid > div {
    border-radius: 17px !important;
  }
  #detail-view > div:nth-child(2) {
    border-radius: 22px !important;
  }
  .release-shell {
    border-radius: 20px !important;
  }
  .release-day-group {
    border-radius: 17px;
    padding: 13px 10px 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== ACCESSORY DETAIL MODAL — LARGE RESPONSIVE LAYOUT ========== */

/* Popup phụ kiện rộng hơn để cân đối với giao diện desktop, nhưng vẫn co gọn trên mobile. */

#goods-detail-modal > div:first-child {
  width: min(94vw, 860px) !important;
  max-width: 860px !important;
  max-height: calc(100vh - 36px) !important;
  overflow-y: auto !important;
  padding: 26px !important;
  scrollbar-width: thin;
}

#goods-detail-image-stage {
  width: 100% !important;
  height: clamp(390px, 58vh, 650px) !important;
  min-height: 390px !important;
  max-height: 650px !important;
  border-radius: 20px !important;
  background: rgba(245, 158, 11, .055) !important;
}

#goods-detail-image-stage #goods-detail-img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 18px !important;
}

#goods-detail-modal #goods-thumbnails-container {
  padding-top: 2px;
}

#goods-detail-modal > div:first-child > .bg-gray-50,
#goods-detail-modal > div:first-child > div.bg-gray-50 {
  border-radius: 16px !important;
}

/* Trên màn hình rất rộng, popup tăng nhẹ để không bị lọt thỏm giữa trang. */

@media (min-width: 1440px) {
  #goods-detail-modal > div:first-child {
    width: min(88vw, 920px) !important;
    max-width: 920px !important;
  }
  #goods-detail-image-stage {
    height: clamp(430px, 60vh, 690px) !important;
    min-height: 430px !important;
    max-height: 690px !important;
  }
}

/* Tablet: vẫn lớn nhưng tránh chiếm quá nhiều chiều cao. */

@media (max-width: 900px) {
  #goods-detail-modal > div:first-child {
    width: min(94vw, 720px) !important;
    max-width: 720px !important;
    padding: 22px !important;
  }
  #goods-detail-image-stage {
    height: clamp(340px, 54vh, 560px) !important;
    min-height: 340px !important;
    max-height: 560px !important;
  }
}

/* Mobile: gần full màn hình, ảnh vẫn hiển thị trọn vẹn và không bị cắt. */

@media (max-width: 640px) {
  #goods-detail-modal {
    padding: 10px !important;
  }
  #goods-detail-modal > div:first-child {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: calc(100vh - 20px) !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }
  #goods-detail-image-stage {
    border-radius: 16px !important;
  }
  #goods-detail-image-stage #goods-detail-img {
    border-radius: 14px !important;
  }
}

/* ========== ACCESSORY DETAIL MODAL — LANDSCAPE / GESTURE NAVIGATION ========== */

/* Giữ popup gọn như bản cũ nhưng đổi sang bố cục ngang: ảnh trái, thông tin phải. */

#goods-detail-modal {
  padding: 14px !important;
}

#goods-detail-modal .goods-detail-card {
  width: min(92vw, 800px) !important;
  max-width: 800px !important;
  max-height: min(86vh, 560px) !important;
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(285px, .82fr) !important;
  gap: 20px !important;
  overflow: hidden !important;
}

#goods-detail-modal .goods-detail-media,
#goods-detail-modal .goods-detail-side {
  min-width: 0;
}

#goods-detail-modal .goods-detail-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

#goods-detail-modal .goods-detail-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

#goods-detail-modal #goods-detail-image-stage {
  border-radius: 18px !important;
  cursor: grab !important;
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  background: rgba(245,158,11,.055) !important;
}

#goods-detail-modal #goods-detail-image-stage:active {
  cursor: grabbing !important;
}

#goods-detail-modal #goods-detail-img {
  max-height: none !important;
  pointer-events: none;
}

#goods-detail-modal #goods-thumbnails-container {
  min-height: 50px;
  max-width: 100%;
}

#goods-detail-modal .goods-detail-header {
  min-height: 58px;
}

#goods-detail-modal #goods-detail-name {
  font-size: 1.05rem !important;
}

#goods-detail-modal .goods-detail-close {
  transition: .18s ease;
}

#goods-detail-modal .goods-detail-close:hover {
  background: rgba(148,163,184,.12);
}

#goods-detail-modal .goods-detail-info {
  flex: 0 0 auto;
}

#goods-detail-modal .goods-detail-price {
  flex: 0 0 auto;
}

#goods-detail-modal .goods-detail-keyboard-note {
  line-height: 1.45;
}

#goods-detail-modal .goods-detail-footer {
  padding-top: 2px;
}

/* Không còn nút mũi tên nhìn thấy. Điều hướng bằng kéo/vuốt hoặc bàn phím. */

#goods-detail-prev,
#goods-detail-next,
#goods-btn-prev,
#goods-btn-next {
  display: none !important;
}

#goods-detail-modal .goods-swipe-hint {
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ui-legacy-caption);
  min-height: 18px;
  text-align: center;
}

#goods-detail-modal .goods-swipe-hint:not(.hidden) {
  display: flex !important;
}

body.dark-mode #goods-detail-modal .goods-swipe-hint,
body.dark-mode #goods-detail-modal .goods-detail-keyboard-note {
  color: #94a3b8 !important;
}

/* Trong khi đang kéo, tắt overlay zoom để cảm giác vuốt tự nhiên hơn. */

#goods-detail-image-stage.goods-swiping .goods-zoom-overlay {
  opacity: 0 !important;
}

@media (max-width: 760px) {
  #goods-detail-modal {
    padding: 10px !important;
  }
  #goods-detail-modal .goods-detail-card {
    width: min(96vw, 560px) !important;
    max-width: 560px !important;
    max-height: calc(100vh - 20px) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }
  #goods-detail-modal #goods-detail-image-stage {
    height: min(45vh, 390px) !important;
    min-height: 260px !important;
    max-height: 390px !important;
  }
  #goods-detail-modal .goods-detail-side {
    gap: 11px;
  }
  #goods-detail-modal .goods-detail-header {
    min-height: auto;
  }
  #goods-detail-modal .goods-detail-keyboard-note {
    display: none;
  }
}

@media (max-width: 430px) {
  #goods-detail-modal .goods-detail-card {
    padding: 13px !important;
    border-radius: 20px !important;
  }
  #goods-detail-modal #goods-detail-image-stage {
    min-height: 235px !important;
    height: 39vh !important;
  }
  #goods-detail-modal .goods-detail-info > div {
    padding: 12px !important;
  }
  #goods-detail-modal .goods-detail-price {
    padding: 12px !important;
  }
}

html {
  background: #f5f7fb;
}

/* v602: The browser canvas on mobile portrait must NOT be an opaque
   near-black slab unlike the frosted Liquid Glass gradient underneath. */
html.dark-mode {
  background-color: #202641 !important;
  background-image:
    radial-gradient(ellipse 78% 56% at 10% 0%, rgba(99,102,241,.22), transparent 74%),
    radial-gradient(ellipse 65% 50% at 95% 9%, rgba(147,51,234,.13), transparent 78%),
    linear-gradient(145deg, #11182d, #19203c 51%, #171e36) !important;
  background-attachment: fixed !important;
  color-scheme: dark;
}

/* Let body show its existing multilayer gradients; never paint a separate
   flat #090e1a backing over them in either festival or manual dark mode. */
html.dark-mode body,
body.dark-mode {
  background-color: transparent !important;
}

/* Main shelf pagination: stable geometry on every screen size. */

#shelf-pagination {
  width: 100%;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: center !important;
  row-gap: 8px !important;
  column-gap: 8px !important;
}

#shelf-pagination button {
  width: 38px;
  height: 38px;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#shelf-pagination > span {
  min-width: 18px;
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#shelf-pagination button:disabled {
  opacity: .42;
}

@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  /* v602: Root cause of the portrait-only near-black top strip.
     The old rule forced BOTH html and body to #090e1a with !important,
     overriding the translucent Liquid Glass scene only below 640px.
     The browser uses html as its top chrome/status background source.
     One shared viewport-anchored backdrop prevents a sharp seam. */
  html.dark-mode {
    --tt-portrait-glass-canvas:
      radial-gradient(ellipse 78% 56% at 10% 0%, rgba(99,102,241,.22), transparent 74%),
      radial-gradient(ellipse 65% 50% at 95% 9%, rgba(147,51,234,.13), transparent 78%),
      linear-gradient(145deg, #11182d, #19203c 51%, #171e36);
    background-color: #202641 !important;
  }
  html.dark-mode,
  html.dark-mode body,
  body.dark-mode {
    background-image: var(--tt-portrait-glass-canvas) !important;
    background-attachment: fixed !important;
  }
  html.dark-mode body,
  body.dark-mode {
    background-color: transparent !important;
  }
  body {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
  #shelf-view {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
  }
  /* Give the dark mobile surfaces clearer hierarchy and less "flat block" feeling. */
  body.dark-mode #shelf-view > div:first-child,
  body.dark-mode #shelf-view > div:nth-child(3) {
    background: linear-gradient(145deg, rgba(25,35,57,.97), rgba(17,24,39,.96)) !important;
    border-color: rgba(148,163,184,.17) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
  }
  body.dark-mode #shelf-view > div:nth-child(2) > div {
    background: linear-gradient(145deg, rgba(27,38,61,.96), rgba(20,28,47,.96)) !important;
    border-color: rgba(148,163,184,.16) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.20) !important;
  }
  body.dark-mode #manga-grid > div {
    background: linear-gradient(160deg, #121c30 0%, #101827 100%) !important;
    border-color: rgba(148,163,184,.16) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.22) !important;
  }
  /* Slightly tighter, more consistent portrait rhythm. */
  #manga-grid.grid-cols-2 {
    column-gap: 12px !important;
    row-gap: 14px !important;
    align-items: stretch;
  }
  #manga-grid.grid-cols-2 > div {
    height: 100%;
    min-width: 0;
  }
  /* Portrait luôn giữ đúng lưới hai cột. Thẻ cuối của trang lẻ nằm ở cột trái,
     không kéo vào giữa làm mất trục cân đối với các hàng phía trên. */
  #manga-grid.grid-cols-2 > div:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
  /* Pagination gets its own centered lane so the floating theme button never shifts it. */
  #shelf-pagination {
    box-sizing: border-box;
    padding: 18px 4px calc(16px + env(safe-area-inset-bottom)) !important;
    margin-top: 22px !important;
  }
  #shelf-pagination > span {
    flex: 0 0 16px;
  }
  body.dark-mode #shelf-pagination {
    border-top-color: rgba(148,163,184,.14) !important;
  }
  body.dark-mode #shelf-pagination button:not(.bg-indigo-600) {
    background: rgba(20,28,47,.92) !important;
    border-color: rgba(148,163,184,.20) !important;
    color: #e5e7eb !important;
  }
  body.dark-mode #shelf-pagination button:not(.bg-indigo-600):not(:disabled):active {
    background: rgba(38,50,73,.96) !important;
  }
  /* Keep the floating theme button visually separate from bottom pagination/browser chrome. */
  #theme-toggle {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.20) !important;
  }
}

/* Landscape cũng giữ luồng lưới tự nhiên. */

@media (max-width: 640px) and (orientation: landscape) {
  #manga-grid.grid-cols-2 > div:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
}

/* iPhone portrait CSS viewport is usually below 430px: tune text density without shrinking touch targets. */

@media (max-width: 430px) and (orientation: portrait) {
  #shelf-view > div:first-child {
    margin-bottom: 16px !important;
  }
  #shelf-view > div:nth-child(2) {
    margin-bottom: 16px !important;
  }
  #shelf-view > div:nth-child(3) {
    margin-bottom: 18px !important;
  }
  #manga-grid.grid-cols-2 > div {
    padding: 9px !important;
  }
  #manga-grid.grid-cols-2 h3 {
    line-height: 1.35 !important;
  }
  #shelf-pagination button {
    width: 36px;
    height: 36px;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

.compact-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-soft) !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.06);
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
  flex: 0 0 auto;
}

.compact-icon-btn i {
  font-size: 14px;
}

.compact-icon-btn:hover {
  transform: translateY(-1px);
  color: var(--ui-primary) !important;
  border-color: rgba(99,102,241,.32) !important;
  box-shadow: 0 8px 18px rgba(79,70,229,.11);
}

.compact-icon-btn:active {
  transform: translateY(0) scale(.96);
}

.compact-icon-btn-danger {
  color: #e11d48 !important;
}

.compact-icon-btn-danger:hover {
  color: #be123c !important;
  border-color: rgba(225,29,72,.30) !important;
  background: rgba(244,63,94,.07) !important;
}

body.dark-mode .compact-icon-btn {
  background: rgba(15,23,42,.70) !important;
  border-color: rgba(148,163,184,.18) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.18);
}

body.dark-mode .compact-icon-btn:hover {
  color: #c4b5fd !important;
  border-color: rgba(129,140,248,.40) !important;
}

body.dark-mode .compact-icon-btn-danger {
  color: #fb7185 !important;
}

body.dark-mode .compact-icon-btn-danger:hover {
  color: #fda4af !important;
  background: rgba(244,63,94,.10) !important;
}

.detail-actionbar {
  min-height: 42px;
}

.detail-price-summary {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin-top: 2px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99,102,241,.075), rgba(236,72,153,.035));
}

.detail-price-summary > div {
  min-width: 0;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.detail-market-summary {
  grid-column: auto;
  border-left: 1px solid var(--ui-border);
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

.detail-market-summary.hidden {
  display: none !important;
}

.detail-market-price {
  color: #a5b4fc;
}

body.dark-mode .detail-market-summary {
  border-left-color: rgba(148,163,184,.16);
}

.detail-price-summary-main {
  border-right: 1px solid var(--ui-border);
}

.detail-price-summary-label {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
  margin-bottom: 4px;
}

.detail-total-sale-price {
  display: block;
  min-width: 0;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.025em;
  color: #10b981;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-total-cover-price {
  display: block;
  min-width: 0;
  line-height: 1.1;
  font-weight: 700;
  color: var(--ui-legacy-caption);
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(100,116,139,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode .detail-price-summary {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(15,23,42,.32));
  border-color: rgba(148,163,184,.16);
}

body.dark-mode .detail-price-summary-main {
  border-right-color: rgba(148,163,184,.16);
}

body.dark-mode .detail-total-sale-price {
  color: #34d399;
}

body.dark-mode .detail-total-cover-price {
  color: #64748b;
  text-decoration-color: #64748b;
}

@media (min-width: 640px) {
  #detail-view .detail-price-summary {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 639px) {
  .compact-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  #detail-view .detail-price-summary {
    margin-left: auto;
    margin-right: auto;
  }
  .detail-price-summary > div {
    padding: 10px 9px;
    text-align: center;
  }
}

/* Logo NXB được làm sạch nền và nhúng trực tiếp vào HTML để hiển thị ổn định cả online/offline. */

.manga-card-cover-wrap > .publisher-logo-badge,
.manga-card-list-cover > .publisher-logo-badge {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.58) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.manga-card-cover-wrap > .publisher-logo-badge img,
.manga-card-list-cover > .publisher-logo-badge img,
.publisher-logo-badge.publisher-logo-tre img,
.publisher-logo-badge.publisher-logo-ipm img,
.publisher-logo-badge.publisher-logo-kimdong img {
  background: transparent !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Logo đã có alpha nên giảm padding để phần nhận diện không bị bé thêm. */

.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-tre img {
  padding: 2px !important;
}

.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-ipm img {
  padding: 2px !important;
}

.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-kimdong img {
  padding: 1px !important;
}

body.dark-mode .manga-card-cover-wrap > .publisher-logo-badge,
body.dark-mode .manga-card-list-cover > .publisher-logo-badge {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.32), 0 0 0 1px rgba(15,23,42,.12) !important;
}

.manga-card-cover-wrap > .publisher-logo-badge,
.manga-card-list-cover > .publisher-logo-badge,
body.dark-mode .manga-card-cover-wrap > .publisher-logo-badge,
body.dark-mode .manga-card-list-cover > .publisher-logo-badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

.manga-card-cover-wrap > .publisher-logo-badge img,
.manga-card-list-cover > .publisher-logo-badge img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.72)) drop-shadow(0 2px 4px rgba(15,23,42,.34));
}

body.dark-mode .manga-card-cover-wrap > .publisher-logo-badge img,
body.dark-mode .manga-card-list-cover > .publisher-logo-badge img {
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.62)) drop-shadow(0 2px 5px rgba(0,0,0,.48));
}

/* Chỉ fallback NXB chưa có logo mới có nền để đọc được chữ viết tắt. */

.manga-card-cover-wrap > .publisher-logo-badge.no-logo,
.manga-card-cover-wrap > .publisher-logo-badge.logo-fallback-mode,
.manga-card-list-cover > .publisher-logo-badge.no-logo,
.manga-card-list-cover > .publisher-logo-badge.logo-fallback-mode {
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.18) !important;
  overflow: hidden !important;
}

/* Hiệu ứng lật trang 3D cho popup Phụ kiện và Tập truyện */

#goods-detail-image-stage,
#vol-detail-image-stage {
  perspective: 1400px;
  transform-style: preserve-3d;
  isolation: isolate;
}

#goods-detail-img,
#vol-info-cover {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

#goods-detail-image-stage::after,
#vol-detail-image-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  mix-blend-mode: soft-light;
}

#goods-detail-image-stage.page-turning-next::after,
#vol-detail-image-stage.page-turning-next::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.38) 53%, rgba(15,23,42,.18) 72%, rgba(15,23,42,0) 100%);
  animation: pageFlipSheenNext .38s ease both;
}

#goods-detail-image-stage.page-turning-prev::after,
#vol-detail-image-stage.page-turning-prev::after {
  background: linear-gradient(270deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.38) 53%, rgba(15,23,42,.18) 72%, rgba(15,23,42,0) 100%);
  animation: pageFlipSheenPrev .38s ease both;
}

#goods-detail-img.page-flip-out-next,
#vol-info-cover.page-flip-out-next {
  transform-origin: left center;
  animation: pageFlipOutNext .16s cubic-bezier(.55,.05,.72,.35) both;
}

#goods-detail-img.page-flip-in-next,
#vol-info-cover.page-flip-in-next {
  transform-origin: right center;
  animation: pageFlipInNext .22s cubic-bezier(.22,.72,.24,1) both;
}

#goods-detail-img.page-flip-out-prev,
#vol-info-cover.page-flip-out-prev {
  transform-origin: right center;
  animation: pageFlipOutPrev .16s cubic-bezier(.55,.05,.72,.35) both;
}

#goods-detail-img.page-flip-in-prev,
#vol-info-cover.page-flip-in-prev {
  transform-origin: left center;
  animation: pageFlipInPrev .22s cubic-bezier(.22,.72,.24,1) both;
}

@keyframes pageFlipOutNext {
  from {
    transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  to {
    transform: rotateY(-78deg) translateX(-2%) scale(.985);
    opacity: .18;
    filter: brightness(.72);
  }
}

@keyframes pageFlipInNext {
  from {
    transform: rotateY(78deg) translateX(2%) scale(.985);
    opacity: .18;
    filter: brightness(.78);
  }
  to {
    transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes pageFlipOutPrev {
  from {
    transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  to {
    transform: rotateY(78deg) translateX(2%) scale(.985);
    opacity: .18;
    filter: brightness(.72);
  }
}

@keyframes pageFlipInPrev {
  from {
    transform: rotateY(-78deg) translateX(-2%) scale(.985);
    opacity: .18;
    filter: brightness(.78);
  }
  to {
    transform: rotateY(0deg) translateX(0) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes pageFlipSheenNext {
  0% {
    opacity: 0;
    transform: translateX(42%);
  }
  42% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform: translateX(-42%);
  }
}

@keyframes pageFlipSheenPrev {
  0% {
    opacity: 0;
    transform: translateX(-42%);
  }
  42% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform: translateX(42%);
  }
}

/* Nội dung bên cạnh đổi rất nhẹ để cảm giác liền mạch hơn. */

#goods-detail-modal .goods-detail-side.page-info-changing,
#vol-detail-modal .page-info-changing {
  opacity: .68;
  transform: translateY(2px);
  transition: opacity .13s ease, transform .13s ease;
}

#goods-detail-modal .goods-detail-side,
#vol-detail-modal .page-info-target {
  transition: opacity .18s ease, transform .18s ease;
}

/* Khi đang kéo, ảnh hơi nghiêng theo tay trước khi thực hiện cú lật. */

#goods-detail-image-stage.goods-swiping #goods-detail-img,
#vol-detail-image-stage.vol-swiping #vol-info-cover {
  transition: none !important;
  transform: translateX(var(--page-drag-x, 0px)) rotateY(var(--page-drag-tilt, 0deg));
}

@media (prefers-reduced-motion: reduce) {
  #goods-detail-img.page-flip-out-next,
  #goods-detail-img.page-flip-in-next,
  #goods-detail-img.page-flip-out-prev,
  #goods-detail-img.page-flip-in-prev,
  #vol-info-cover.page-flip-out-next,
  #vol-info-cover.page-flip-in-next,
  #vol-info-cover.page-flip-out-prev,
  #vol-info-cover.page-flip-in-prev,
  #goods-detail-image-stage.page-turning-next::after,
  #goods-detail-image-stage.page-turning-prev::after,
  #vol-detail-image-stage.page-turning-next::after,
  #vol-detail-image-stage.page-turning-prev::after {
    animation: none !important;
  }
}

#volume-display-mode-panel {
  background: linear-gradient(135deg, rgba(238,242,255,.96), rgba(248,250,252,.96));
  border: 1px solid #c7d2fe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#volume-display-mode-panel .volume-display-mode-label {
  color: #3730a3;
}

#volume-display-mode-panel .volume-display-mode-help {
  color: var(--ui-legacy-secondary);
}

#volume-display-mode-panel .volume-display-mode-help b {
  color: #4338ca;
  font-weight: 700;
}

#volume-display-mode-panel .volume-display-mode-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  color-scheme: light;
}

#volume-display-mode-panel .volume-display-mode-select:focus {
  outline: none;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

body.dark-mode #volume-display-mode-panel {
  background: linear-gradient(135deg, #17213a 0%, #151d31 100%) !important;
  border-color: #354366 !important;
  box-shadow: inset 0 1px 0 rgba(148,163,184,.06), 0 6px 18px rgba(0,0,0,.10);
}

body.dark-mode #volume-display-mode-panel .volume-display-mode-label {
  color: #dbe4ff !important;
}

body.dark-mode #volume-display-mode-panel .volume-display-mode-help {
  color: #9aa9c0 !important;
}

body.dark-mode #volume-display-mode-panel .volume-display-mode-help b {
  color: #c7d2fe !important;
}

body.dark-mode #volume-display-mode-panel .volume-display-mode-select {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #41516e !important;
  color-scheme: dark;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.dark-mode #volume-display-mode-panel .volume-display-mode-select:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.18);
}

body.dark-mode #volume-display-mode-panel .volume-display-mode-select option {
  background: #0f172a;
  color: #f8fafc;
}

#volume-display-mode-panel {
  overflow: visible;
}

/* Collection editors: one column in portrait; equal, bounded panes in landscape.
   Geometry is shared across orientations; surfaces inherit the site's glass theme. */
:is(#modal, #volume-modal, #goods-modal).collection-editor {
  --editor-gap: 16px;
  --editor-control: 44px;
  --editor-surface: transparent;
  --editor-panel: transparent;
  --editor-input: var(--glass-control);
  --editor-pad: 20px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  background: rgba(5, 10, 22, .18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
  align-items: center !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor *,
:is(#modal, #volume-modal, #goods-modal).collection-editor *::before,
:is(#modal, #volume-modal, #goods-modal).collection-editor *::after { box-sizing: border-box; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card {
  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  width: min(960px, 100%) !important;
  min-width: 0 !important;
  max-width: 960px !important;
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 22px !important;
  color: var(--ui-text) !important;
  background: var(--editor-surface) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-filter) !important;
  -webkit-backdrop-filter: var(--glass-filter) !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card > * { margin: 0 !important; position: relative; z-index: 1; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  opacity: 0;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-header {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px var(--editor-pad) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--glass-border-soft) !important;
  background: var(--editor-panel) !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-header > div:first-child { min-width: 0; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-header h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  color: var(--ui-text) !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-header p {
  margin: 4px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-form-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: var(--editor-gap) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: var(--editor-pad) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  background: transparent !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-section {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  padding: 16px !important;
  margin: 0 !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: 16px !important;
  background: var(--editor-panel) !important;
  box-shadow: none !important;
  order: var(--editor-mobile-order, 0);
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane { display: contents; }
:is(#modal, #volume-modal, #goods-modal).collection-editor [data-editor-order="1"] { --editor-mobile-order: 1; }
:is(#modal, #volume-modal, #goods-modal).collection-editor [data-editor-order="2"] { --editor-mobile-order: 2; }
:is(#modal, #volume-modal, #goods-modal).collection-editor [data-editor-order="3"] { --editor-mobile-order: 3; }
:is(#modal, #volume-modal, #goods-modal).collection-editor [data-editor-order="4"] { --editor-mobile-order: 4; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-section-heading {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ui-text) !important;
  border: 0 !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-section-heading p { font-size: 12px; font-weight: 400; margin: 4px 0 0; color: color-mix(in srgb, var(--ui-text) 68%, var(--ui-muted)); }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-stack { display: flex; flex-direction: column; gap: var(--editor-gap); min-width: 0; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card .editor-section > * + * { margin-top: var(--editor-gap) !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--editor-gap) !important;
  align-items: start !important;
  min-width: 0;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-row > *,
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-field { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-field,
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-market-field {
  padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(label:not([class*="switch"]):not(.goods-volume-option), .private-market-title, .manga-rating-label) {
  display: block;
  margin: 0 0 6px !important;
  padding: 0;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  color: color-mix(in srgb, var(--ui-text) 72%, var(--ui-muted)) !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea, .pretty-select-trigger, .volume-mode-trigger) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--editor-control) !important;
  min-height: var(--editor-control) !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--glass-border-soft) !important;
  border-radius: 10px !important;
  background: var(--editor-input) !important;
  color: var(--ui-text) !important;
  font-family: inherit !important;
  /* Một nguồn cỡ chữ cho ô nhập; Safari iPhone cần >=16px khi nhận focus. */
  font-size: var(--editor-field-font-size, 14px) !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  box-shadow: none !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(select, .pretty-select-trigger, .volume-mode-trigger) { padding-right: 28px !important; text-overflow: ellipsis; }
:is(#modal, #volume-modal, #goods-modal).collection-editor select:is(.pretty-select-native, .volume-display-native) { width: 1px !important; height: 1px !important; min-height: 1px !important; min-width: 1px !important; padding: 0 !important; border: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.pretty-select-wrap, .volume-mode-picker) { width: 100% !important; min-width: 0 !important; margin-top: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .pretty-select-label { font-size: inherit !important; line-height: inherit !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor textarea { height: 84px !important; resize: vertical; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor input[readonly] { color: var(--ui-primary) !important; background: var(--ui-primary-soft) !important; font-weight: 700 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.editor-note, .vol-cover-editor-note, .volume-batch-help, .volume-display-mode-help, .vol-display-override-help, #vol-custom-title-help) {
  margin: 6px 0 0 !important; color: var(--ui-muted) !important; font-size: 12px !important; line-height: 1.5 !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-price-row {
  display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 12px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pricing-row { grid-template-columns: minmax(0,3fr) minmax(0,1fr); }
:is(#modal, #volume-modal, #goods-modal).collection-editor .private-market-head { min-height: 18px; margin: 0 0 6px !important; padding: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .private-market-title { margin: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .private-market-private { display: none; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .private-market-input-row { display: flex !important; gap: 8px !important; margin: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .private-market-price-wrap { flex: 1 1 0; min-width: 0; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.private-market-price-wrap, .manga-selling-price-row, .volume-selling-price-wrap, .goods-selling-price-wrap) input { padding-right: 28px !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.private-market-use-btn, .edition-picker-action, .image-source-btn, .volume-preorder-link-remove) {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--editor-control); width: var(--editor-control) !important; height: var(--editor-control) !important;
  min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 1px solid var(--glass-border-soft) !important; border-radius: 10px !important;
  background: var(--editor-input) !important; color: var(--ui-primary) !important; box-shadow: none !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-editor-media-saved { background: transparent !important; box-shadow: none !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #goods-images-preview-list { background: transparent !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .image-source-box {
  display: grid !important; grid-template-columns: minmax(0,1fr) var(--editor-control) !important;
  gap: 8px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  min-width: 0 !important; min-height: 0 !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .image-source-box > input:not([type="file"]) { grid-column: 1; grid-row: 1; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .image-source-actions { grid-column: 2; grid-row: 1; position: static !important; margin: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.image-source-preview,.image-source-status) { grid-column: 1/-1; margin: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.image-source-preview,.image-source-status):empty { display: none !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-rating-field { display: block !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #rating-picker { display: flex; align-items: center; gap: 8px; height: var(--editor-control); font-size: 20px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #rating-picker i { padding: 6px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #related-manga-picker {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
  max-height: 192px; min-height: 0; overflow: auto; padding: 8px 0; margin: 8px 0 0;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor #related-manga-picker label {
  display: flex !important; align-items: center; min-width: 0; gap: 8px; padding: 8px !important;
  margin: 0 !important; border: 1px solid var(--glass-border-soft); border-radius: 8px; min-height: 40px;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor #related-manga-picker label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#modal, #volume-modal, #goods-modal).collection-editor input[type="checkbox"] { accent-color: var(--ui-primary); }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.manga-selling-panel, .volume-selling-panel, .goods-selling-panel, .goods-limited-field) {
  padding: 12px !important; margin: 0; min-width: 0; min-height: 0 !important; height: auto !important;
  border: 1px solid var(--glass-border-soft) !important; border-radius: 12px !important; background: var(--editor-input) !important; box-shadow: none !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.manga-selling-head, .goods-toggle-head) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.manga-selling-title, .volume-selling-title, .goods-toggle-title) { font-size: 13px !important; font-weight: 650 !important; line-height: 20px !important; color: var(--ui-text) !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.manga-selling-subtitle, .volume-selling-subtitle, .goods-toggle-note) { display: none !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.manga-selling-switch, .volume-selling-switch, .goods-selling-switch) { margin: 0 !important; flex-shrink: 0; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-limited-field { align-self: end; min-height: var(--editor-control) !important; padding: 9px 12px !important; }
/* v692 · Phụ kiện bán nguyên bộ: cùng hệ kính của popup Sửa truyện */
.tt-bundle-goods-panel,.tt-bundle-legacy{grid-column:1/-1;border:1px solid var(--glass-border-soft);border-radius:12px;padding:12px;background:transparent;min-width:0}
.tt-bundle-legacy{margin-top:12px}
.tt-bundle-goods-panel>strong,.tt-bundle-legacy>strong{display:block;font-size:13px;margin-bottom:4px;color:var(--ui-text)}
.tt-bundle-hint{font-size:11px;color:var(--ui-muted);line-height:1.5;margin:4px 0 10px}
.tt-bundle-goods-options{max-height:180px;overflow:auto;display:grid;gap:5px}
.collection-editor .tt-bundle-goods-option{display:flex!important;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--glass-border-soft);border-radius:10px;cursor:pointer;min-width:0;color:var(--ui-text);font-size:12px}
.tt-bundle-goods-option>input{accent-color:var(--ui-accent,#0d9488);flex:none}
.collection-editor .tt-bundle-goods-option>span{display:block;flex:1;min-width:0;overflow-wrap:anywhere}
.collection-editor .tt-bundle-goods-option>strong{display:block;font-size:11px;flex:none;font-variant-numeric:tabular-nums}
.tt-bundle-legacy .sale-complete-btn{width:100%;margin-top:12px}
:is(#modal, #volume-modal, #goods-modal).collection-editor .manga-selling-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--editor-gap); }
:is(#modal, #volume-modal, #goods-modal).collection-editor .manga-selling-settings > div > .flex:first-child { height: 24px; align-items: start; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .manga-selling-settings > :is(.sales-profit-grid, .sale-complete-btn) { grid-column: 1/-1; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.manga-selling-settings, .volume-selling-settings, .goods-selling-settings) { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--glass-border-soft); }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-editor-utility-grid { display: block !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-footer {
  display: flex !important; align-items: center; justify-content: flex-end; flex: 0 0 auto;
  gap: 10px; padding: 12px var(--editor-pad) !important; border: 0 !important;
  border-top: 1px solid var(--glass-border-soft) !important; background: var(--editor-panel) !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-editor-footer-actions { display: flex; gap: 10px; margin-left: auto; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-footer button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 10px 18px !important; margin: 0 !important; border-radius: 10px !important;
  border: 1px solid var(--glass-border-soft) !important; color: var(--ui-text); background: var(--editor-input); font-size: 13px; font-weight: 650;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-footer [id^="btn-save-"] { background: #6055d8 !important; color: #fff !important; border-color: transparent !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #goods-save-status { min-width: 0; margin: 0; font-size: 12px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .manga-editor-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: var(--editor-input); }
:is(#modal, #volume-modal, #goods-modal).collection-editor #vol-tab-container { flex-shrink: 0; gap: 4px; padding: 8px var(--editor-pad); border-radius: 0; background: var(--editor-panel); }
:is(#modal, #volume-modal, #goods-modal).collection-editor #vol-tab-container button { min-height: 38px; font-size: 13px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row {
  display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) repeat(2,var(--editor-control)) !important;
  gap: 12px !important; align-items: end !important; padding: 0 !important; margin: 0 !important; width: 100% !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row > * { grid-column: auto !important; min-width: 0 !important; margin: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row > .edition-picker-action { align-self: end !important; transform: translateY(-6px) !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row.volume-number-hidden { grid-template-columns: repeat(2,minmax(0,1fr)) repeat(2,var(--editor-control)) !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-volume-display-row:not(:has(#vol-custom-title-wrap:not(.hidden))) { grid-template-columns: minmax(0,1fr); }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.volume-native-input-shell, .volume-release-date-shell) {
  display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
:is(#modal, #volume-modal, #goods-modal).collection-editor input:is([type="date"],[type="time"]) { appearance: none; -webkit-appearance: none; text-align: left; }
:is(#modal, #volume-modal, #goods-modal).collection-editor input::-webkit-date-and-time-value { text-align: left; min-height: 22px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-disclosure { display: block !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-disclosure > summary { cursor: pointer; list-style: none; margin-bottom: 0 !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-disclosure > summary::-webkit-details-marker { display: none; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-disclosure > summary i { font-size: 11px; color: var(--ui-muted); }
:is(#modal, #volume-modal, #goods-modal).collection-editor .editor-disclosure[open] > summary i { transform: rotate(180deg); }
:is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-datetime { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--editor-gap); }
:is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-datetime label > span:first-child { display: block; margin-bottom: 6px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-datetime label > span:first-child { font-size: 12px; font-weight: 600; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-links-head button { min-height: 36px; font-size: 12px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-link-row { display: grid; grid-template-columns: minmax(90px,1fr) minmax(0,3fr) var(--editor-control); gap: 8px; min-width: 0; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-volume-picker { background: transparent !important; box-shadow: none !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-volume-picker-head { background: transparent !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-volume-picker-head span { color: color-mix(in srgb, var(--ui-text) 68%, var(--ui-muted)) !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-volume-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-height: 220px; min-height: 0; overflow: auto; gap: 6px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-volume-option { display: flex; align-items: center; margin: 0 !important; padding: 10px !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor :is(.goods-volume-option-text, .goods-volume-picker-head span, .goods-volume-clear) { font-size: 12px !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-volume-mobile-toggle { display: none; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-editor-media-row { display: flex !important; flex-direction: column; gap: 12px; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .goods-editor-media-row > * { min-width: 0; width: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; }
:is(#modal, #volume-modal, #goods-modal).collection-editor .hidden,
:is(#modal, #volume-modal, #goods-modal).collection-editor.hidden,
#volume-modal.collection-editor.seal-inline-active .volume-seal-field { display: none !important; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card {
    background: var(--glass-panel-strong) !important;
  }
}
@media (orientation: landscape) and (min-width: 640px) {
  :is(#modal, #volume-modal, #goods-modal).collection-editor {
    --editor-body-height: 560px;
  }
  #volume-modal.collection-editor { --editor-body-height: 540px; }
  #goods-modal.collection-editor { --editor-body-height: 460px; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    max-height: min(760px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)))) !important;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-form-body {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    height: var(--editor-body-height);
    max-height: calc(100dvh - 180px);
    overflow: hidden !important;
    scrollbar-gutter: auto;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane {
    display: flex;
    flex-direction: column;
    gap: var(--editor-gap);
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    border: 1px solid var(--glass-border-soft);
    border-radius: 16px;
    background: var(--editor-panel);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-border-strong) transparent;
    scrollbar-gutter: stable;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane > .editor-section {
    order: initial;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane > .editor-section + .editor-section {
    padding-top: var(--editor-gap) !important;
    border-top: 1px solid var(--glass-border-soft) !important;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane .editor-pricing-row {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane :is(#related-manga-picker, .goods-volume-options) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: 220px;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane [data-editor-group="images"] .image-source-preview {
    max-height: 144px;
    overflow-y: auto;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane::-webkit-scrollbar { width: 5px; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border-radius: 8px; }
}
@media (orientation: landscape) and (min-width: 640px) and (max-width: 1100px) {
  :is(#modal, #volume-modal, #goods-modal).collection-editor { --editor-pad: 12px; --editor-gap: 12px; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-section { padding: 12px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row {
    grid-template-columns: repeat(3,minmax(0,1fr)) 32px 32px !important;
    gap: 6px !important;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row.volume-number-hidden {
    grid-template-columns: repeat(2,minmax(0,1fr)) 32px 32px !important;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row .edition-picker-action { width: 32px !important; transform: translateY(-6px) !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row :is(input,select,.pretty-select-trigger) {
    padding-left: 6px !important; padding-right: 16px !important;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row label {
    font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane :is(.manga-selling-settings, .editor-volume-display-row) { grid-template-columns: minmax(0,1fr); }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane .volume-preorder-link-row { grid-template-columns: minmax(0,1fr) var(--editor-control); }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane .volume-preorder-link-row input:first-child { grid-column: 1; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane .volume-preorder-link-row input:nth-child(2) { grid-column: 1; grid-row: 2; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane .volume-preorder-link-remove { grid-column: 2; grid-row: 1/3; align-self: center; }
}
@media (orientation: landscape) and (min-width: 640px) and (max-width: 780px) {
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane .editor-row { grid-template-columns: minmax(0,1fr); }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-pane .volume-preorder-datetime { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
  :is(#modal, #volume-modal, #goods-modal).collection-editor { --editor-gap: 12px; --editor-pad: 12px; padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card { max-height: calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))) !important; border-radius: 18px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-section { padding: 12px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-row { grid-template-columns: minmax(0,1fr); }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-price-row { gap: 8px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row { gap: 6px !important; grid-template-columns: repeat(3,minmax(0,1fr)) 32px 32px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row.volume-number-hidden { grid-template-columns: repeat(2,minmax(0,1fr)) 32px 32px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row .edition-picker-action { width: 32px !important; transform: translateY(-6px) !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row :is(input,select,.pretty-select-trigger) { padding-left: 6px !important; padding-right: 16px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor #single-volume-editor-row label { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor :is(#related-manga-picker,.goods-volume-options) { grid-template-columns: minmax(0,1fr); }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .manga-selling-settings { grid-template-columns: minmax(0,1fr); }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .goods-volume-mobile-toggle { display: inline-flex; flex-shrink: 0; gap: 8px; align-items: center; font-size: 12px; min-height: 36px; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .goods-editor-volume-column:not(.is-expanded) :is(.goods-volume-picker-head,.goods-volume-options) { display: none !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-link-row { grid-template-columns: minmax(0,1fr) var(--editor-control); }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-link-row input:first-child { grid-column: 1; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-link-row input:nth-child(2) { grid-column: 1; grid-row: 2; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .volume-preorder-link-remove { grid-column: 2; grid-row: 1/3; align-self: center; }
}
@media (orientation: landscape) and (max-height: 540px) {
  :is(#modal, #volume-modal, #goods-modal).collection-editor { --editor-pad: 12px; --editor-gap: 12px; padding-top: 6px !important; padding-bottom: 6px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-card { max-height: calc(100dvh - 12px) !important; border-radius: 14px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-header { padding-top: 8px !important; padding-bottom: 8px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-footer { padding-top: 8px !important; padding-bottom: 8px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-header h2 { font-size: 18px !important; }
  :is(#modal, #volume-modal, #goods-modal).collection-editor .editor-header p { display: none; }
}


.volume-mode-picker {
  position: relative;
}

.volume-display-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

.volume-mode-trigger {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.volume-mode-trigger:hover {
  border-color: #a5b4fc;
}

.volume-mode-trigger:focus-visible,
    .volume-mode-picker.open .volume-mode-trigger {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.volume-mode-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.volume-mode-chevron {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ui-legacy-secondary);
  transition: transform .18s ease, color .18s ease;
}

.volume-mode-picker.open .volume-mode-chevron {
  transform: rotate(180deg);
  color: #4f46e5;
}

.volume-mode-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 120;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #dbe3f0;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
  overflow: hidden;
}

.volume-mode-option {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.volume-mode-option + .volume-mode-option {
  margin-top: 2px;
}

.volume-mode-option:hover {
  background: #f1f5f9;
}

.volume-mode-option.active {
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
  color: #3730a3;
}

.volume-mode-option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.volume-mode-option-copy strong {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

.volume-mode-option-copy small {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ui-legacy-secondary);
  font-weight: 500;
}

.volume-mode-option.active .volume-mode-option-copy small {
  color: #6366f1;
}

.volume-mode-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 9px;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .15s ease, transform .15s ease;
}

.volume-mode-option.active .volume-mode-check {
  opacity: 1;
  transform: scale(1);
}

body.dark-mode .volume-mode-trigger {
  background: #0f172a;
  color: #f8fafc;
  border-color: #41516e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.dark-mode .volume-mode-trigger:hover {
  border-color: #6677a2;
}

body.dark-mode .volume-mode-trigger:focus-visible,
    body.dark-mode .volume-mode-picker.open .volume-mode-trigger {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129,140,248,.18);
}

body.dark-mode .volume-mode-chevron {
  color: #9aa9c0;
}

body.dark-mode .volume-mode-picker.open .volume-mode-chevron {
  color: #a5b4fc;
}

body.dark-mode .volume-mode-menu {
  background: #111a2e;
  border-color: #354366;
  box-shadow: 0 16px 38px rgba(0,0,0,.36), 0 2px 10px rgba(0,0,0,.22);
}

body.dark-mode .volume-mode-option {
  color: #f8fafc;
}

body.dark-mode .volume-mode-option:hover {
  background: #1a2540;
}

body.dark-mode .volume-mode-option.active {
  background: linear-gradient(135deg, rgba(79,70,229,.24), rgba(30,41,59,.72));
  color: #e0e7ff;
}

body.dark-mode .volume-mode-option-copy small {
  color: #94a3b8;
}

body.dark-mode .volume-mode-option.active .volume-mode-option-copy small {
  color: #a5b4fc;
}

body.dark-mode .volume-mode-check {
  background: #6366f1;
}

#vol-display-override-panel {
  background: linear-gradient(135deg, rgba(248,250,252,.98), rgba(238,242,255,.78));
  border: 1px solid #dbe3f0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

#vol-display-override-panel .vol-display-override-label {
  color: #475569;
}

#vol-display-override-panel .vol-display-override-help {
  color: var(--ui-legacy-secondary);
}

#vol-display-override-panel .vol-display-override-select {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  color-scheme: light;
}

#vol-display-override-panel .vol-display-override-select:focus {
  outline: none;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.13);
}

body.dark-mode #vol-display-override-panel {
  background: linear-gradient(135deg, #17213a 0%, #141c2f 100%) !important;
  border-color: #33425f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

body.dark-mode #vol-display-override-panel .vol-display-override-label {
  color: #d9e2f2 !important;
}

body.dark-mode #vol-display-override-panel .vol-display-override-help {
  color: #93a4bc !important;
}

body.dark-mode #vol-display-override-panel .vol-display-override-select {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #40506d !important;
  color-scheme: dark;
}

body.dark-mode #vol-display-override-panel .vol-display-override-select:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.18);
}

body.dark-mode #vol-display-override-panel .vol-display-override-select option {
  background: #0f172a;
  color: #f8fafc;
}

.spent-eye-toggle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #64748b;
  border: 1px solid transparent;
  background: transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.spent-eye-toggle:hover {
  color: #10b981;
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.18);
}

.spent-eye-toggle:active {
  transform: scale(.94);
}

.spent-eye-toggle:focus-visible {
  outline: 2px solid rgba(99,102,241,.55);
  outline-offset: 2px;
}

html.dark .spent-eye-toggle {
  color: #94a3b8;
}

html.dark .spent-eye-toggle:hover {
  color: #6ee7b7;
  background: rgba(16,185,129,.12);
  border-color: rgba(110,231,183,.2);
}

@media (max-width: 640px) {
  .spent-eye-toggle {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }
}

.app-global-header-card {
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.app-global-header-card h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
  letter-spacing: -.04em;
}

.app-global-header-card h1 i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 58%, #ec4899);
  box-shadow: 0 8px 22px rgba(99,102,241,.28);
}

.app-global-header-card p {
  margin-top: 3px;
  color: var(--ui-muted) !important;
}

.app-global-header-card button,
  .app-global-header-card #auth-user-box {
  min-height: 42px;
  border-radius: 13px !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

.app-global-header-card > div:last-child > button:nth-child(2) {
  border: 0 !important;
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(79,70,229,.22) !important;
}

.app-global-header-card button:hover {
  transform: translateY(-1px);
}

/* Brand bấm được nhưng không còn mảng nền xám/hover lộ ra. */

body.dark-mode .app-global-header-card {
  background: linear-gradient(145deg, rgba(25,35,57,.97), rgba(17,24,39,.96)) !important;
  border-color: rgba(148,163,184,.17) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
}

@media (max-width: 640px) {
  .app-global-header-card {
    padding: 14px;
    border-radius: 20px;
  }
  #app-global-header-wrap {
    margin-bottom: 16px !important;
  }
}

#app-global-header-wrap {
  max-height: 320px;
  will-change: max-height, margin-bottom, opacity, transform;
}

/* Chỉ trang con mới có cơ chế auto-hide. Trang Tủ Truyện luôn hiển thị như bình thường. */

body.subpage-header-autohide #app-global-header-wrap:not(.is-revealed) {
  max-height: 0;
  margin-bottom: 0 !important;
  transform: translateY(-18px);
  overflow: hidden;
}

body.subpage-header-autohide #app-global-header-wrap.is-revealed {
  max-height: 320px;
  margin-bottom: 24px !important;
  transform: translateY(0);
  overflow: visible;
}

/* Vùng cảm ứng chuột mỏng ở mép trên: không chiếm layout, chỉ dùng để gọi header ra. */

#app-global-header-hotzone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 79;
  pointer-events: none;
  background: transparent;
}

body.subpage-header-autohide #app-global-header-hotzone {
  pointer-events: auto;
}

/* Một vệt rất mảnh chỉ xuất hiện khi dùng chuột để người dùng biết mép trên có thể gọi menu. */

@media (hover: hover) and (pointer: fine) {
  body.subpage-header-autohide #app-global-header-hotzone::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: rgba(99,102,241,.28);
    opacity: .42;
  }
  body.subpage-header-autohide #app-global-header-hotzone:hover::after {
    width: 62px;
    opacity: .9;
    background: rgba(99,102,241,.72);
  }
  body.dark-mode.subpage-header-autohide #app-global-header-hotzone::after {
    background: rgba(129,140,248,.38);
  }
}

@media (max-width: 640px) {
  body.subpage-header-autohide #app-global-header-wrap.is-revealed {
    margin-bottom: 16px !important;
  }
  /* Mobile dùng thao tác vuốt, không cần vệt gợi ý ở mép trên. */
  #app-global-header-hotzone {
    height: 8px;
  }
  #app-global-header-hotzone::after {
    display: none !important;
  }
}

#app-global-header-wrap {
  transition: max-width .32s cubic-bezier(.22,.72,.22,1),
      max-height .34s cubic-bezier(.22,.72,.22,1),
      margin-bottom .34s cubic-bezier(.22,.72,.22,1),
      opacity .22s ease,
      transform .34s cubic-bezier(.22,.72,.22,1);
}

@media (max-width: 1024px) {
  body.header-detail-width #app-global-header-wrap,
    #app-global-header-wrap {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-global-header-wrap {
    transition-duration: .01ms !important;
  }
}

.detail-view-switcher > button {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.detail-missing-toggle {
  border-radius: .375rem;
  color: var(--ui-legacy-caption);
  background: transparent;
}

.detail-missing-toggle:hover {
  color: var(--ui-legacy-secondary);
  background: rgba(148,163,184,.13);
}

.detail-missing-toggle.is-active {
  color: #f59e0b;
  background: #fff7ed;
  box-shadow: 0 1px 2px rgba(15,23,42,.08), inset 0 0 0 1px rgba(245,158,11,.18);
}

.detail-missing-toggle.is-active i {
  filter: drop-shadow(0 0 5px rgba(245,158,11,.32));
}

.detail-missing-toggle:active {
  transform: scale(.94);
}

body.dark-mode .detail-missing-toggle {
  color: #64748b;
}

body.dark-mode .detail-missing-toggle:hover {
  color: #94a3b8;
  background: rgba(148,163,184,.10);
}

body.dark-mode .detail-missing-toggle.is-active {
  color: #fbbf24;
  background: rgba(245,158,11,.14);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.18);
}

@media (max-width: 640px) {
  .detail-view-switcher > button {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }
}

.shelf-selling-filter {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: var(--ui-legacy-secondary);
  font-size: 12px;
  font-weight: 800;
  transition: .18s ease;
  white-space: nowrap;
}

.shelf-selling-filter:hover {
  color: #e11d48;
  border-color: #fda4af;
  background: #fff1f2;
}

.shelf-selling-filter.active {
  color: #fff;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(225,29,72,.20);
}

body.dark-mode .shelf-selling-filter {
  background: rgba(15,23,42,.72);
  color: #94a3b8;
  border-color: rgba(148,163,184,.18);
}

body.dark-mode .shelf-selling-filter:hover {
  color: #fda4af;
  border-color: rgba(244,63,94,.45);
  background: rgba(136,19,55,.22);
}

body.dark-mode .shelf-selling-filter.active {
  color: #fff;
  background: linear-gradient(135deg,#f43f5e,#be123c);
  border-color: transparent;
}

.manga-selling-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(244,63,94,.96), rgba(190,18,60,.96));
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 5px 14px rgba(76,5,25,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  pointer-events: none;
}

.manga-selling-badge i {
  font-size: 9px;
}

/* Wishlist của cả bộ: nhãn MUA dùng đúng vị trí của tag BÁN.
   Không dùng cho bộ `Chưa phát hành`; Wishlist/neon vẫn giữ nguyên. */
.manga-wishlist-buy-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(124,58,237,.94), rgba(219,39,119,.94));
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 5px 14px rgba(88,28,135,.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  pointer-events: none;
}

.manga-wishlist-buy-badge i {
  font-size: 9px;
}

/* List view dùng cùng vị trí/kích thước thu gọn như tag BÁN. */
.manga-card-list-cover .manga-wishlist-buy-badge {
  top: 4px;
  right: 4px;
  padding: 3px 4px;
}

.manga-card-list-cover .manga-wishlist-buy-badge span {
  display: none;
}

@media (max-width: 640px) {
  .manga-wishlist-buy-badge {
    top: 6px;
    right: 6px;
    padding: 4px 6px;
    font-size: 8px;
  }
  .manga-wishlist-buy-badge i {
    font-size: 8px;
  }
  .manga-card-list-cover .manga-wishlist-buy-badge {
    top: 4px;
    right: 4px;
    padding: 3px 4px;
  }
}

.manga-card-list-cover .manga-selling-badge {
  top: 4px;
  right: 4px;
  padding: 3px 4px;
}

.manga-card-list-cover .manga-selling-badge span {
  display: none;
}

@media (max-width: 640px) {
  .manga-selling-badge {
    top: 6px;
    right: 6px;
    padding: 4px 6px;
    font-size: 8px;
  }
  .manga-selling-badge i {
    font-size: 8px;
  }
  .shelf-selling-filter span {
    display: none;
  }
  .shelf-selling-filter {
    width: 34px;
    padding: 6px;
  }
}

/* Ngày cập nhật Giá thị trường dùng một tooltip nổi duy nhất để không bị cắt bởi popup/banner. */
.market-date-source {
  cursor: help;
}

.market-date-source:focus-visible {
  outline: 2px solid rgba(129,140,248,.72);
  outline-offset: 3px;
  border-radius: 5px;
}

.market-date-popover {
  position: fixed;
  z-index: 200500;
  max-width: calc(100vw - 16px);
  padding: 6px 9px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  background: rgba(15,23,42,.96);
  color: #f8fafc;
  box-shadow: 0 10px 28px rgba(2,6,23,.28);
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.market-date-popover.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body:not(.dark-mode) .market-date-popover {
  border-color: rgba(100,116,139,.22);
  background: rgba(255,255,255,.98);
  color: #334155;
  box-shadow: 0 10px 28px rgba(15,23,42,.16);
}

/* Giá thị trường riêng tư: section độc lập, không tham gia grid của các trường hiện có. */
.private-market-panel {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(99,102,241,.22);
  background: linear-gradient(145deg, rgba(238,242,255,.78), rgba(248,250,252,.94));
  border-radius: 14px;
  padding: 11px 12px;
  box-sizing: border-box;
}

.private-market-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.private-market-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4338ca;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 900;
}


.private-market-private {
  flex: 0 0 auto;
  color: var(--ui-legacy-caption);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.private-market-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  margin-top: 9px;
  min-width: 0;
}

.private-market-price-wrap {
  position: relative;
  min-width: 0;
}

.private-market-price-input {
  width: 100%;
  min-width: 0;
  min-height: 37px;
  padding: 8px 30px 8px 10px;
  border: 1px solid rgba(99,102,241,.24);
  border-radius: 9px;
  background: rgba(255,255,255,.86);
  color: #4338ca;
  font-size: 13px;
  font-weight: 900;
  outline: none;
  box-sizing: border-box;
}

.private-market-price-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}

.private-market-currency {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #818cf8;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.private-market-use-btn {
  min-height: 37px;
  max-width: 210px;
  padding: 7px 10px;
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 9px;
  background: rgba(255,255,255,.66);
  color: #4f46e5;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: normal;
  cursor: pointer;
}

.private-market-use-btn:hover {
  border-color: rgba(99,102,241,.40);
  background: rgba(238,242,255,.96);
}


body.dark-mode .private-market-panel {
  border-color: rgba(129,140,248,.24);
  background: linear-gradient(145deg, rgba(99,102,241,.10), rgba(15,23,42,.28));
}

body.dark-mode .private-market-title,
body.dark-mode .private-market-price-input,
body.dark-mode .private-market-use-btn {
  color: #c7d2fe;
}

body.dark-mode .private-market-currency {
  color: #a5b4fc;
}

body.dark-mode .private-market-price-input,
body.dark-mode .private-market-use-btn {
  border-color: rgba(129,140,248,.24);
  background: rgba(15,23,42,.28);
}

/* Popup sửa phụ kiện: Giá thị trường + Giá trị phụ kiện luôn cùng một hàng. */

#goods-detail-market-row {
  border-color: rgba(99,102,241,.20) !important;
}

body.dark-mode #goods-detail-market-row {
  border-color: rgba(129,140,248,.20) !important;
}

@media (max-width: 420px) {
  .private-market-panel {
    padding: 10px;
  }
  .private-market-input-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .private-market-use-btn {
    width: 100%;
    max-width: none;
  }
  .private-market-private {
    font-size: 9px;
  }
}

.manga-selling-panel {
  border: 1px solid #e2e8f0;
  background: linear-gradient(145deg, #fff 0%, #fff7f8 100%);
  border-radius: 14px;
  padding: 12px;
}

.manga-selling-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.manga-selling-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.manga-selling-title i {
  color: #f43f5e;
}

.manga-selling-subtitle {
  margin-top: 3px;
  color: var(--ui-legacy-caption);
  font-size: 10.5px;
  line-height: 1.35;
}

.manga-selling-settings {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.manga-selling-settings.hidden {
  display: none !important;
}

.manga-selling-field-label {
  display: block;
  color: var(--ui-legacy-secondary);
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 5px;
}

.manga-selling-control {
  width: 100%;
  min-height: 36px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  padding: 7px 9px;
  font-size: 12px;
  outline: none;
  transition: .15s ease;
}

.manga-selling-control:focus {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(244,63,94,.10);
}

.manga-selling-control.is-readonly {
  color: var(--ui-legacy-secondary);
  background: #f8fafc;
  cursor: default;
}

.manga-selling-price-row {
  position: relative;
}

.manga-selling-price-input {
  padding-right: 28px;
  font-weight: 900;
  color: #059669;
}

.manga-selling-currency {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-legacy-caption);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.manga-selling-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e11d48;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 7px;
  transition: .15s ease;
}

.manga-selling-reset:hover {
  background: #fff1f2;
}

.manga-selling-preview {
  margin-top: 5px;
  color: var(--ui-legacy-caption);
  font-size: 10px;
  line-height: 1.4;
}

.manga-selling-preview strong {
  color: #059669;
}

.manga-selling-switch {
  flex: 0 0 auto;
  cursor: pointer;
}

.manga-selling-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.manga-selling-switch-track {
  width: 42px;
  height: 24px;
  padding: 3px;
  display: block;
  background: #cbd5e1;
  border-radius: 999px;
  transition: .2s ease;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}

.manga-selling-switch-thumb {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.22);
  transition: .2s ease;
}

.manga-selling-switch input:checked + .manga-selling-switch-track {
  background: linear-gradient(135deg,#fb7185,#e11d48);
}

.manga-selling-switch input:checked + .manga-selling-switch-track .manga-selling-switch-thumb {
  transform: translateX(18px);
}

.manga-selling-switch input:focus-visible + .manga-selling-switch-track {
  outline: 3px solid rgba(244,63,94,.20);
  outline-offset: 2px;
}

body.dark-mode .manga-selling-panel {
  background: linear-gradient(145deg,rgba(15,23,42,.92),rgba(45,13,29,.60));
  border-color: rgba(148,163,184,.18);
}

body.dark-mode .manga-selling-title {
  color: #f8fafc;
}

body.dark-mode .manga-selling-title i {
  color: #fb7185;
}

body.dark-mode .manga-selling-subtitle, body.dark-mode .manga-selling-field-label, body.dark-mode .manga-selling-preview {
  color: var(--ui-legacy-caption);
}

body.dark-mode .manga-selling-settings {
  border-top-color: rgba(148,163,184,.16);
}

body.dark-mode .manga-selling-control {
  background: rgba(15,23,42,.74);
  border-color: rgba(148,163,184,.20);
  color: #e2e8f0;
}

body.dark-mode .manga-selling-control.is-readonly {
  background: rgba(2,6,23,.45);
  color: #94a3b8;
}

body.dark-mode .manga-selling-price-input {
  color: #34d399;
}

body.dark-mode .manga-selling-preview strong {
  color: #34d399;
}

body.dark-mode .manga-selling-reset {
  color: #fda4af;
}

body.dark-mode .manga-selling-reset:hover {
  background: rgba(136,19,55,.26);
}

body.dark-mode .manga-selling-switch-track {
  background: #334155;
}

@media (max-width: 640px) {
  .manga-selling-settings {
    grid-template-columns: 1fr;
  }
}


/* Related manga rows: compact checkbox + balanced spacing. */


/* Portrait/tablet/mobile: stack vertically, one natural scroll area. */



/* Very narrow phones: only fields that become cramped collapse to one column. */



#goods-detail-modal .goods-detail-info > :not([hidden]) ~ :not([hidden]) {
  border-top-color: var(--ui-border) !important;
}

@media (min-width: 768px) and (orientation: landscape) {


  /* Keep the content areas tidy when one side has more fields. */
  
  /* Related series keeps its own internal scroll; no outer-column
     scrollbar is needed just because this list has many titles. */
  
  /* Price/rating card stretches naturally without moving its content. */
  
}

/* At shorter landscape heights, equal widths stay in place but rows
   return to natural height so no field is squeezed. */



@media (min-width: 768px) and (orientation: landscape) {
  /* The top row needs more room than the price/related row when
     the selling switch is enabled.  This prevents the selling
     controls from spilling into the "Truyện liên quan" card. */
  
  /* Never allow the selling card itself to be visually clipped. */


}

/* On shorter landscape screens, let the columns scroll naturally
   instead of forcing the expanded selling panel into a fixed row. */



/* Keep native number steppers from crowding the currency marker. */


@media (min-width: 768px) and (orientation: landscape) {
  
  /* Hai cột không còn thanh cuộn riêng ở mép ngoài. */
  
  
  /* Giữ hai hàng cân đối nhưng chừa đủ chỗ cho list liên quan. */
  
  /* Card Truyện liên quan tự chứa toàn bộ nội dung, không để list chạm đáy. */


}

/* Với màn hình ngang thấp: chỉ phần BODY cuộn khi thật sự cần,
   không tạo scrollbar riêng ở từng cột. */



@media (min-width: 768px) and (orientation: landscape) {


  /* Quan trọng: bỏ 1fr/min-height cũ khiến hai khung trên bị kéo dài. */
  
  
  /* Khối liên quan chỉ cao vừa đủ, danh sách tự cuộn bên trong. */


  /* Giữ khối bán truyện thoáng nhưng không tạo chiều cao giả. */
  
}

/* Màn hình thấp: body mới cuộn khi thực sự không đủ chỗ. */



.pretty-select-wrap {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.pretty-select-wrap.pretty-select-fill {
  display: block;
  width: 100%;
}

.pretty-select-wrap.pretty-select-hidden {
  display: none !important;
}

.pretty-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
}

.pretty-select-trigger {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--ui-border, #dbe3ee);
  border-radius: 10px;
  background: var(--ui-surface-solid, #fff);
  color: var(--ui-text, #0f172a);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.pretty-select-trigger:hover {
  border-color: rgba(99,102,241,.45);
}

.pretty-select-trigger:focus-visible,
  .pretty-select-wrap.pretty-select-open .pretty-select-trigger {
  border-color: var(--ui-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}

.pretty-select-trigger:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.pretty-select-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pretty-select-chevron {
  flex: 0 0 auto;
  color: var(--ui-muted, #64748b);
  font-size: 10px;
  transition: transform .16s ease, color .16s ease;
}

.pretty-select-wrap.pretty-select-open .pretty-select-chevron {
  transform: rotate(180deg);
  color: var(--ui-primary, #6366f1);
}

#pretty-select-portal {
  position: fixed;
  z-index: 100000;
  display: none;
  max-height: min(320px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--ui-border, #dbe3ee);
  border-radius: 12px;
  background: var(--ui-surface-solid, #fff);
  box-shadow: 0 18px 44px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.48) transparent;
}

#pretty-select-portal::-webkit-scrollbar {
  width: 6px;
}

#pretty-select-portal::-webkit-scrollbar-track {
  background: transparent;
}

#pretty-select-portal::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.45);
  border-radius: 999px;
}

.pretty-select-option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text, #0f172a);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}

.pretty-select-option + .pretty-select-option {
  margin-top: 2px;
}

.pretty-select-option:hover {
  background: var(--ui-surface-soft, #f1f5f9);
}

.pretty-select-option.is-selected {
  color: var(--ui-primary, #4f46e5);
  background: var(--ui-primary-soft, #eef2ff);
  font-weight: 800;
}

.pretty-select-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.pretty-select-option-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pretty-select-option-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ui-primary, #6366f1);
  color: #fff;
  font-size: 8px;
  opacity: 0;
  transform: scale(.78);
  transition: opacity .13s ease, transform .13s ease;
}

.pretty-select-option.is-selected .pretty-select-option-check {
  opacity: 1;
  transform: scale(1);
}

body.dark-mode .pretty-select-trigger {
  background: rgba(15,23,42,.82);
  border-color: rgba(148,163,184,.24);
  color: #f8fafc;
}

body.dark-mode .pretty-select-trigger:hover {
  border-color: rgba(129,140,248,.55);
}

body.dark-mode #pretty-select-portal {
  background: #111a2e;
  border-color: #354366;
  box-shadow: 0 20px 48px rgba(0,0,0,.42), 0 3px 12px rgba(0,0,0,.24);
}

body.dark-mode .pretty-select-option {
  color: #f8fafc;
}

body.dark-mode .pretty-select-option:hover {
  background: #1a2540;
}

body.dark-mode .pretty-select-option.is-selected {
  color: #c7d2fe;
  background: linear-gradient(135deg, rgba(79,70,229,.28), rgba(30,41,59,.84));
}

/* Giữ đúng kích thước/nhịp của các dropdown đặc biệt */

.release-period-filter .pretty-select-wrap {
  width: auto;
  flex: 0 0 auto;
}

.release-period-filter .pretty-select-wrap[data-select-id="release-month-select"] {
  min-width: 92px;
}

.release-period-filter .pretty-select-wrap[data-select-id="release-year-select"] {
  min-width: 78px;
}

.release-period-filter .pretty-select-trigger {
  height: 32px;
  min-height: 32px;
  padding: 0 25px 0 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 750;
  position: relative;
}

.release-period-filter .pretty-select-chevron {
  position: absolute;
  right: 9px;
}

.release-publisher-wrap.pretty-select-host {
  gap: 8px;
}

.release-publisher-wrap.pretty-select-host .pretty-select-wrap {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
}

.release-publisher-wrap.pretty-select-host .pretty-select-trigger {
  height: 100%;
  min-height: 32px;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 650;
}

.release-publisher-wrap.pretty-select-host .pretty-select-chevron {
  position: absolute;
  right: 2px;
}

.release-publisher-wrap.pretty-select-host > .release-publisher-chevron {
  display: none !important;
}

.manga-selling-panel .pretty-select-trigger {
  min-height: 36px;
  border-radius: 9px;
}


@media (max-width: 640px) {
  #pretty-select-portal {
    max-height: min(280px, calc(100vh - 20px));
  }
  .pretty-select-option {
    min-height: 42px;
    font-size: 13px;
  }
}

.image-source-box {
  border: 1px solid #d7ddea;
  background: rgba(248,250,252,.72);
  border-radius: 12px;
  padding: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.image-source-box:focus-within,
.image-source-box.is-paste-focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
  background: rgba(255,255,255,.95);
}

.image-source-box input[type="text"] {
  margin: 0 !important;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.image-source-native-file {
  display: none !important;
}

.image-source-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.image-source-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid #d7ddea;
  border-radius: 9px;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}

.image-source-btn:hover {
  border-color: #a5b4fc;
  color: #4f46e5;
  background: #f5f7ff;
  box-shadow: 0 4px 12px rgba(79,70,229,.10);
}

.image-source-btn:active {
  transform: scale(.96);
}

.image-source-preview {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.image-source-preview:empty {
  display: none;
}

.image-source-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d7ddea;
  background: #eef2f7;
  position: relative;
  flex: 0 0 auto;
}

.image-source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-source-count {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.image-source-status {
  grid-column: 1 / -1;
  margin-top: 0;
  min-height: 0;
  font-size: 9.5px;
  color: var(--ui-legacy-secondary);
}

.image-source-status:empty,
.image-source-status.is-ready {
  display: none;
}

.image-source-status.is-error {
  display: block;
  margin-top: 1px;
  color: #e11d48;
}

body.dark-mode .image-source-box {
  border-color: #334155;
  background: rgba(15,23,42,.38);
}

body.dark-mode .image-source-box:focus-within,
body.dark-mode .image-source-box.is-paste-focus {
  border-color: #818cf8;
  background: rgba(15,23,42,.68);
  box-shadow: 0 0 0 3px rgba(129,140,248,.14);
}

body.dark-mode .image-source-btn {
  border-color: #334155;
  background: #111b30;
  color: #cbd5e1;
}

body.dark-mode .image-source-btn:hover {
  border-color: #6366f1;
  color: #c7d2fe;
  background: #17203a;
}

body.dark-mode .image-source-thumb {
  border-color: #334155;
  background: #111827;
}

body.dark-mode .image-source-count {
  background: rgba(99,102,241,.18);
  color: #c7d2fe;
}

body.dark-mode .image-source-status {
  color: #94a3b8;
}

body.dark-mode .image-source-status.is-ready {
  color: #34d399;
}

body.dark-mode .image-source-status.is-error {
  color: #fb7185;
}

@media (max-width: 640px) {
  .image-source-box {
    padding: 8px;
  }
  .image-source-actions {
    margin: 0;
  }
  .image-source-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 12px;
  }
  .image-source-thumb {
    width: 38px;
    height: 38px;
  }
}

#release-view {
  max-width: 72rem !important;
}

#release-view .release-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 1024px) {
  #release-view {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  body {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  #app-global-header-wrap {
    margin-bottom: 14px !important;
  }
  .app-global-header-card {
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 21px !important;
  }
  /* Có 4 mục điều hướng: xếp 2 x 2 để không đẩy tài khoản lẻ sang hàng mới. */
  .app-global-header-card > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .app-global-header-card > div:last-child > button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    gap: 7px !important;
    white-space: nowrap;
  }
  .app-global-header-card > div:last-child > .col-span-2 {
    grid-column: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .app-global-header-card #auth-login-btn,
  .app-global-header-card #auth-user-box {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    overflow: hidden;
  }
  .app-global-header-card #auth-user-box.hidden,
  .app-global-header-card #auth-login-btn.hidden {
    display: none !important;
  }
  .app-global-header-card #auth-user-email {
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }
  .app-global-header-card #auth-user-box > i {
    font-size: 15px !important;
  }
  .app-global-header-card #auth-user-box > button {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    box-shadow: none !important;
  }
  /* Statistic cards: same visual weight, less dead space. */
  #shelf-view > div:nth-child(2) {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  #shelf-view > div:nth-child(2) > div {
    min-height: 82px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
    border-radius: 17px !important;
  }
  #shelf-view > div:nth-child(2) > div > i {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
  }
  #shelf-view > div:nth-child(2) span[id^="stat-"] {
    font-size: 1.25rem !important;
    line-height: 1.05 !important;
  }
  #shelf-view > div:nth-child(2) .text-\[10px\] {
    font-size: 9px !important;
    letter-spacing: .06em !important;
    margin-top: 4px !important;
  }
  #stat-spent-toggle {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
  }
  /* Filter card: 1 search row + 1 three-column select row + 1 compact action row. */
  #shelf-view > div:nth-child(3) {
    padding: 12px !important;
    margin-bottom: 16px !important;
    border-radius: 18px !important;
    row-gap: 10px !important;
  }
  #shelf-view > div:nth-child(3)::before {
    top: 25px !important;
    left: 25px !important;
  }
  #search-input {
    min-height: 44px !important;
    height: 44px !important;
    padding: 9px 12px 9px 40px !important;
    font-size: 13px !important;
  }
  .shelf-filter-selects {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .shelf-filter-selects > select,
  .shelf-filter-selects > .custom-select-shell,
  .shelf-filter-selects .custom-select-trigger {
    min-width: 0 !important;
    width: 100% !important;
  }
  .shelf-filter-selects select,
  .shelf-filter-selects .custom-select-trigger {
    min-height: 40px !important;
    height: 40px !important;
    padding: 7px 27px 7px 9px !important;
    font-size: 11px !important;
    border-radius: 11px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shelf-action-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    padding-top: 0 !important;
    min-width: 0 !important;
  }
  .shelf-view-tools {
    flex: 0 0 auto !important;
    gap: 6px !important;
    align-self: stretch !important;
  }
  .shelf-view-tools > .flex.bg-gray-100 {
    height: 40px !important;
    padding: 3px !important;
    border-radius: 11px !important;
  }
  #shelf-view-mode-grid,
  #shelf-view-mode-list {
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }
  .shelf-view-tools .compact-icon-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 11px !important;
  }
  .shelf-primary-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 6px !important;
    align-self: stretch !important;
  }
  #backup-menu-wrap {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 30 !important;
  }
  .shelf-primary-actions > button.auth-only,
  .shelf-primary-actions #backup-data-btn {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 7px 6px !important;
    border-radius: 11px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .shelf-primary-actions > button.auth-only i,
  .shelf-primary-actions #backup-data-btn i {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 11px !important;
  }
  .shelf-primary-actions > button.auth-only span,
  .shelf-primary-actions #backup-data-btn span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Manga grid: keep two columns but give the content more breathing room than the controls. */
  #manga-grid.grid-cols-2 {
    column-gap: 10px !important;
    row-gap: 12px !important;
  }
  #manga-grid.grid-cols-2 > div {
    padding: 9px !important;
    border-radius: 17px !important;
  }
  #manga-grid.grid-cols-2 h3 {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-top: 9px !important;
  }
}

/* Menu Sao lưu được đưa ra body khi mở để luôn nằm trên card và hoạt động ổn định khi chạm trên mobile. */
#backup-data-menu {
  position: fixed;
  z-index: 10000;
  margin: 0 !important;
  max-width: calc(100vw - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  isolation: isolate;
}
#backup-data-menu > button {
  touch-action: manipulation;
}
#backup-data-btn {
  touch-action: manipulation;
}
body.dark-mode #backup-data-menu {
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(15, 23, 42, .96) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42) !important;
}
body.dark-mode #backup-data-menu strong { color: #e5e7eb !important; }
body.dark-mode #backup-data-menu button:hover { background: rgba(255,255,255,.06) !important; }
body.dark-mode #backup-data-menu .text-gray-500 { color: #94a3b8 !important; }


/* Popup hướng dẫn gửi file cập nhật tập mới cho ChatGPT. */
body.update-backup-prompt-open {
  overflow: hidden !important;
}
#update-backup-prompt-modal {
  overscroll-behavior: contain;
}
#update-backup-prompt-modal .update-backup-prompt-card {
  -webkit-overflow-scrolling: touch;
}
#update-backup-prompt-modal .update-backup-prompt-textarea {
  min-height: 250px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}
body.dark-mode #update-backup-prompt-modal .update-backup-prompt-card {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .98) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5) !important;
}
body.dark-mode #update-backup-prompt-modal h2 { color: #f8fafc !important; }
body.dark-mode #update-backup-prompt-modal p { color: #94a3b8 !important; }
body.dark-mode #update-backup-prompt-modal .update-backup-prompt-textarea {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(2, 6, 23, .62) !important;
  color: #e5e7eb !important;
}
body.dark-mode #update-backup-file-name {
  border-color: rgba(99, 102, 241, .28) !important;
  background: rgba(79, 70, 229, .12) !important;
  color: #c7d2fe !important;
}
body.dark-mode #update-backup-prompt-modal button:not(#update-backup-copy-btn) {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(30, 41, 59, .76) !important;
  color: #e5e7eb !important;
}
@media (max-width: 640px) {
  #update-backup-prompt-modal {
    align-items: flex-end !important;
    padding: 10px !important;
  }
  #update-backup-prompt-modal .update-backup-prompt-card {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 18px !important;
  }
  #update-backup-prompt-modal .update-backup-prompt-textarea {
    min-height: 230px;
  }
}

/* Điện thoại rất hẹp vẫn giữ lưới 2 x 2, chỉ thu chữ và khoảng đệm. */

@media (max-width: 365px) and (orientation: portrait) {
  .app-global-header-card > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .app-global-header-card > div:last-child > button {
    width: 100% !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
  .app-global-header-card #auth-user-email {
    font-size: 10px !important;
  }
  .shelf-action-row {
    gap: 6px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .shelf-view-tools {
    gap: 5px !important;
  }
  .shelf-view-tools > .flex.bg-gray-100 {
    height: 36px !important;
  }
  #shelf-view-mode-grid,
  #shelf-view-mode-list {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
  }
  .shelf-view-tools .compact-icon-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  .shelf-primary-actions {
    gap: 4px !important;
  }
  #backup-menu-wrap {
    height: 36px !important;
    min-height: 36px !important;
  }
  .shelf-primary-actions > button.auth-only,
  .shelf-primary-actions #backup-data-btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 4px !important;
    font-size: 9.5px !important;
    gap: 3px !important;
  }
  .shelf-primary-actions > button.auth-only i,
  .shelf-primary-actions #backup-data-btn i {
    font-size: 10px !important;
  }
  .shelf-filter-selects {
    grid-template-columns: 1fr 1fr !important;
  }
  .shelf-filter-selects > :last-child {
    grid-column: 1 / -1 !important;
  }
}

/* Landscape phones/tablets keep the wide layout; only tighten spacing after Import/Export removal. */

@media (max-height: 520px) and (orientation: landscape) {
  .shelf-action-row {
    align-items: center !important;
  }
  .shelf-primary-actions {
    width: auto !important;
  }
}

body.dark-mode #vol-detail-modal .auth-only[title="Sửa tập"] {
  border-color: rgba(148, 163, 184, .22) !important;
  color: #94a3b8 !important;
  background: rgba(15, 23, 42, .22) !important;
}

body.dark-mode #vol-detail-modal .auth-only[title="Sửa tập"]:hover {
  color: #a5b4fc !important;
  border-color: rgba(129, 140, 248, .42) !important;
  background: rgba(99, 102, 241, .12) !important;
}



#goods-grid.goods-responsive-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: start;
}

@media (min-width: 640px){
  #goods-grid.goods-responsive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px){
  #goods-grid.goods-responsive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px){
  #goods-grid.goods-responsive-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* v662 — Chuyển Ghép tranh / Mặc định dùng chung cho cả khách;
   chỉ chủ tủ có quyền thay số cột/hàng và lưu Supabase. */
.volume-layout-settings { display: none; }
#tab-content-volumes .volume-layout-settings:not(.is-list-mode):not(.hidden) {
  display: block;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--glass-border, rgba(130,145,175,.28));
  border-radius: 12px;
  background: transparent;
}
body:not(.is-authenticated) #volume-layout-settings .volume-layout-admin-only {
  display: none !important;
}
.volume-layout-fields {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 7px 9px;
  min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; white-space: nowrap;
}
.volume-layout-fields label { font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.volume-layout-fields input {
  box-sizing: border-box; width: 70px; height: 34px; padding: 5px 8px;
  border: 1px solid var(--glass-border, rgba(130,145,175,.4));
  border-radius: 8px; background: transparent; color: inherit;
  font-size: 13px; font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.volume-layout-fields button {
  min-height: 34px; padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; flex: 0 0 auto;
  border: 1px solid var(--glass-border, rgba(130,145,175,.4));
}
#volume-layout-save { background: #4f46e5; color: #fff; border-color: #4f46e5; }
#volume-layout-reset { background: transparent; color: inherit; }
#volume-layout-save[aria-pressed="false"] { background: transparent; border-color: var(--glass-border, rgba(130,145,175,.4)); color: inherit; }
#volume-layout-reset[aria-pressed="true"] { background: #4f46e5; color: #fff; border-color: #4f46e5; }
#volume-layout-feedback:not(:empty) { margin-top: 5px; font-size: 12px; white-space: normal; }
#volume-layout-feedback.is-error { color: #d44343; }
body.dark-mode #volume-layout-feedback.is-error { color: #ff9292; }
#volume-layout-feedback.is-success { color: #247d57; }
body.dark-mode #volume-layout-feedback.is-success { color: #81d6a7; }
@media (max-width: 640px) and (orientation: portrait) {
  #tab-content-volumes .volume-layout-settings:not(.is-list-mode):not(.hidden) { padding: 7px 6px; }
  .volume-layout-fields { flex-wrap: nowrap; gap: 4px; }
  .volume-layout-fields label { font-size: 10px; }
  .volume-layout-fields input { width: 39px; height: 30px; padding: 3px 4px; font-size: 11px; }
  .volume-layout-fields button { min-height: 30px; padding: 4px 6px; font-size: 10px; }
}
@media (max-width: 350px) and (orientation: portrait) {
  .volume-layout-fields { gap: 3px; }
  .volume-layout-fields input { width: 36px; }
  .volume-layout-fields button { padding-inline: 4px; }
}
/* Scroll chỉ trong lưới tập; chừa vùng đệm cho Hover Lift 115%.
   v670: Không dùng margin-top âm: hộp cuộn từng chồng lên các nút
   Ghép bìa / Mặc định phía trên và tạo lớp kính phủ nhầm vùng bấm.
   Giữ mép trái/phải và đệm dưới để không đổi cuộn ngang/hiệu ứng card. */
#volume-layout-scroll.is-custom {
  overflow-x: auto; overflow-y: hidden;
  padding: 28px 40px 42px;
  margin: 0 -40px -42px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
#volume-layout-scroll.is-custom #volumes-grid { max-width: none; }

@media (max-width: 640px) and (orientation: portrait) {
  /* Vùng cuộn bắt đầu sau thanh nút, không che nút trên màn hình dọc. */
  #volume-layout-scroll.is-custom {
    padding: 16px 12px 22px;
    margin: 0 -12px -22px;
  }
}

/* ===== Volume cards / variant selector ===== */

#volumes-grid {
  align-items: start;
}

.volume-grid-card {
  overflow: visible !important;
}

.volume-grid-card--expanded {
  z-index: 60;
}

.volume-variant-panel {
  box-sizing: border-box;
  max-width: 100%;
}

/* Desktop/tablet: keep the compact floating selector but guarantee it stays above siblings. */

@media (min-width: 641px) {
  .volume-grid-card--expanded {
    position: relative;
    z-index: 80;
  }
  .volume-variant-panel {
    z-index: 90 !important;
    max-height: min(44vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Portrait/mobile: variant list expands IN FLOW instead of floating over the next row. */

@media (max-width: 640px) {
  #volumes-grid.grid-cols-2 {
    align-items: start !important;
  }
  .volume-grid-card--expanded {
    z-index: 2;
  }
  .volume-variant-panel {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin-top: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    order: 3;
  }
  .volume-variant-panel > div {
    min-width: 0;
  }
  .volume-variant-panel button {
    min-width: 28px;
    min-height: 28px;
  }
}

/* ===== Release calendar: shared sizing / overflow safety ===== */

#release-view,
#release-view .release-shell,
#release-view .release-toolbar,
#release-view .release-content,
#release-view .release-day-group,
#release-view .release-books-row {
  box-sizing: border-box;
  min-width: 0;
}

#release-view {
  overflow: visible;
}

#release-view .release-shell {
  overflow: visible;
}

#release-view .release-toolbar {
  position: sticky;
  top: var(--app-topbar-h);
  z-index: 1100;
  border-radius: 28px;
}

#release-view .release-content {
  border-radius: 28px;
  margin-top: 14px;
}

.release-toolbar-left,
.release-toolbar-right,
.release-period-filter,
.release-books-row {
  min-width: 0;
}

.release-books-row {
  max-width: 100%;
}

/* Desktop/landscape: preserve the timeline layout, but keep rows aligned inside the shell. */

@media (min-width: 641px), ((max-width: 640px) and (orientation: landscape)) {
  #release-view .release-shell {
    border-radius: 28px !important;
  }
  #release-view .release-toolbar {
    border-radius: 28px !important;
  }
  #release-view .release-content {
    border-radius: 28px !important;
    margin-top: 14px !important;
  }
}

@media (min-width: 641px) {
  .release-content {
    width: 100%;
  }
  .release-day-group {
    width: 100%;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 18px !important;
  }
  .release-date-column {
    width: 82px !important;
  }
  .release-books-row {
    width: 100%;
    overflow: visible;
  }
}

/* Phone portrait: turn each date into a compact header + clean 2-column grid.
   This removes the clipped horizontal carousel and keeps every card inside its day panel. */

@media (max-width: 640px) and (orientation: portrait) {
  #release-view {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    --release-mobile-toolbar-h: 58px;
  }
  #release-view .release-shell {
    width: 100% !important;
    min-height: 0 !important;
    padding-top: var(--release-mobile-toolbar-h) !important;
    border-radius: 18px !important;
  }
  #release-view .release-toolbar {
    position: fixed !important;
    top: var(--app-topbar-h) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: auto !important;
    height: var(--release-mobile-toolbar-h) !important;
    min-height: var(--release-mobile-toolbar-h) !important;
    margin: 0 !important;
    z-index: 1140 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }
  #release-view .release-content {
    border-radius: 0 0 18px 18px;
  }
  .release-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 3.2fr) minmax(72px, .8fr) !important;
    grid-template-rows: 34px !important;
    align-items: center !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .release-toolbar-left {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .release-toolbar-right {
    width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }
  .release-home-btn,
  .release-period-nav {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 34px !important;
  }
  .release-slash {
    flex: 0 0 6px !important;
    width: 6px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
  }
  .release-period-filter {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(58px, 1.08fr) minmax(43px, .72fr) minmax(62px, 1fr) !important;
    gap: 3px !important;
  }
  .release-period-filter .pretty-select-wrap,
  .release-period-filter .pretty-select-wrap[data-select-id="release-month-select"],
  .release-period-filter .pretty-select-wrap[data-select-id="release-year-select"],
  .release-month-select,
  .release-year-select {
    width: 100% !important;
    min-width: 0 !important;
  }
  .release-period-filter .pretty-select-trigger {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
    font-size: 12px !important;
  }
  .release-period-filter .pretty-select-chevron {
    right: 7px !important;
  }
  .release-month-total {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    padding: 0 5px !important;
    gap: 3px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    border-radius: 7px !important;
  }
  .release-month-total-label {
    display: none !important;
  }
  .release-month-total::before {
    content: "Σ";
    flex: 0 0 auto;
    opacity: .72;
    font-size: .92em;
  }
  .release-month-total-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .release-publisher-wrap,
  .release-publisher-wrap.pretty-select-host {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 6px !important;
    gap: 4px !important;
  }
  .release-publisher-wrap > i:first-child {
    flex: 0 0 auto !important;
    font-size: 12px !important;
  }
  .release-publisher-wrap.pretty-select-host .pretty-select-trigger {
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-right: 16px !important;
    font-size: 11px !important;
  }
  .release-publisher-wrap.pretty-select-host .pretty-select-chevron {
    right: 1px !important;
  }
  .release-event-tabs {
    width: calc(100% - 20px);
    margin: 9px 10px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 3px !important;
    padding: 3px !important;
  }
  .release-event-tab {
    width: 100%;
    min-width: 0;
    min-height: 29px;
    padding: 0 5px;
    font-size: 9.5px;
  }
  .release-content {
    width: 100% !important;
    padding: 12px 10px 32px !important;
  }
  .release-day-group {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 13px 12px 15px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }
  .release-day-group + .release-day-group {
    padding-top: 13px !important;
  }
  .release-day-group::before {
    top: 13px !important;
    bottom: 13px !important;
  }
  .release-date-column {
    position: static !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto auto auto minmax(0,1fr);
    align-items: center;
    column-gap: 5px;
    padding: 0 0 11px 7px !important;
    margin: 0 0 11px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
  }
  .release-weekday {
    grid-column: 1 / -1;
    margin: 0 0 2px !important;
    font-size: 10px !important;
    line-height: 1.2;
  }
  .release-day-number,
  .release-month-number {
    font-size: 26px !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
    margin: 0 !important;
  }
  .release-day-number::after {
    content: "/";
    display: inline-block;
    margin-left: 5px;
    color: var(--ui-subtle);
    font-weight: 500;
  }
  .release-day-total {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    min-width: 78px;
    margin: 0 !important;
    padding: 5px 8px !important;
    text-align: right;
  }
  .release-day-total span,
  .release-day-total strong {
    display: inline !important;
    white-space: nowrap !important;
  }
  .release-day-total span {
    margin-right: 4px;
  }
  .release-day-preorder-count {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    margin: 0 !important;
    padding: 4px 6px;
    font-size: 8px;
  }
  .release-day-preorder-count + .release-day-total {
    margin-top: 0 !important;
  }
  .release-event-badges {
    top: 6px;
    left: 6px;
    gap: 3px;
    max-width: calc(100% - 58px);
  }
  .release-event-badge {
    padding: 3px 5px;
    font-size: 8px;
    gap: 3px;
  }
  .release-preorder-relative {
    display: block;
    margin: 3px 0 0;
    font-size: 9px;
  }
  .release-shop-links {
    gap: 4px;
    margin-top: 5px;
  }
  .release-shop-link,
  .release-shop-more {
    min-height: 23px;
    padding: 4px 6px;
    font-size: 8.5px;
  }
  .release-books-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .release-book-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }
  .release-book-cover {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 2 / 3 !important;
  }
  .release-book-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 1.32em !important;
    min-height: 1.32em !important;
    max-height: 1.32em !important;
    margin-top: 9px !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
    font-weight: 760 !important;
    letter-spacing: -.018em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  .release-book-meta {
    margin-top: 5px !important;
    font-size: 10.5px !important;
  }
  .release-book-price {
    margin-top: 6px !important;
    font-size: clamp(12.5px, 3.5vw, 15px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 370px) and (orientation: portrait) {
  #release-view {
    --release-mobile-toolbar-h: 54px;
  }
  .release-toolbar {
    grid-template-columns: minmax(0, 3.6fr) minmax(60px, .65fr) !important;
    gap: 4px !important;
    padding: 7px 6px !important;
  }
  .release-toolbar-left {
    gap: 2px !important;
  }
  .release-home-btn,
  .release-period-nav {
    flex-basis: 25px !important;
    width: 25px !important;
    height: 32px !important;
  }
  .release-slash {
    flex-basis: 3px !important;
    width: 3px !important;
    font-size: 14px !important;
  }
  .release-period-filter {
    grid-template-columns: minmax(45px, 1.02fr) minmax(34px, .70fr) minmax(58px, 1.12fr) !important;
    gap: 2px !important;
  }
  .release-period-filter .pretty-select-trigger {
    height: 32px !important;
    min-height: 32px !important;
    padding-left: 6px !important;
    padding-right: 17px !important;
    font-size: 10.5px !important;
  }
  .release-period-filter .pretty-select-chevron {
    right: 5px !important;
  }
  .release-month-total {
    height: 32px !important;
    padding: 0 3px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }
  .release-publisher-wrap,
  .release-publisher-wrap.pretty-select-host {
    height: 32px !important;
    padding: 0 5px !important;
    gap: 3px !important;
  }
  .release-publisher-wrap > i:first-child {
    display: none !important;
  }
  .release-publisher-wrap.pretty-select-host .pretty-select-trigger {
    height: 32px !important;
    min-height: 32px !important;
    padding-right: 14px !important;
    font-size: 10px !important;
  }
}


/* Narrow phones: retain two columns but reduce the date/card spacing slightly. */

@media (max-width: 365px) and (orientation: portrait) {
  .release-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .release-day-group {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .release-books-row {
    gap: 10px 8px !important;
  }
  .release-book-card {
    padding: 6px !important;
  }
}

.goods-selling-panel {
  border: 1px solid #fecdd3;
  background: linear-gradient(145deg, #fff7f8, #fff1f2);
}

.goods-selling-switch {
  flex: 0 0 auto;
  cursor: pointer;
}

.goods-selling-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.goods-selling-switch-track {
  width: 42px;
  height: 24px;
  padding: 3px;
  display: block;
  background: #cbd5e1;
  border-radius: 999px;
  transition: .2s ease;
}

.goods-selling-switch-thumb {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.22);
  transition: .2s ease;
}

.goods-selling-switch input:checked + .goods-selling-switch-track {
  background: linear-gradient(135deg,#fb7185,#e11d48);
}

.goods-selling-switch input:checked + .goods-selling-switch-track .goods-selling-switch-thumb {
  transform: translateX(18px);
}

.goods-selling-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg,#fb7185,#e11d48);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(225,29,72,.20);
}

.goods-sale-price {
  color: #e11d48;
  font-weight: 900;
}

.goods-value-muted {
  color: var(--ui-legacy-caption);
  font-size: 10px;
  font-weight: 700;
}

.goods-selling-filter {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: var(--ui-legacy-secondary);
  font-size: 11px;
  font-weight: 800;
  transition: .16s ease;
}

.goods-selling-filter:hover {
  color: #e11d48;
  border-color: #fda4af;
  background: #fff1f2;
}

.goods-selling-filter.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg,#fb7185,#e11d48);
  box-shadow: 0 5px 16px rgba(225,29,72,.18);
}

/* Main shelf: the 5th stat is an action card. */

.selling-stat-card {
  position: relative;
  overflow: hidden;
}

.selling-stat-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  right: -30px;
  bottom: -45px;
  background: rgba(244,63,94,.07);
  pointer-events: none;
}

/* Selling summary */

.selling-summary-tabs {
  display: inline-flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.selling-summary-tab {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 9px;
  color: var(--ui-legacy-secondary);
  font-size: 12px;
  font-weight: 900;
  transition: .15s ease;
}

.selling-summary-tab.active {
  background: linear-gradient(135deg,#6366f1,#7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,.20);
}

.selling-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

.selling-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  transition: .18s ease;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}

.selling-card:hover {
  transform: translateY(-2px);
  border-color: #c4b5fd;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.selling-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.selling-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selling-card-title {
  margin-top: 9px;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.selling-card-sub {
  color: var(--ui-legacy-caption);
  font-size: 10px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selling-card-prices {
  margin-top: 7px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.selling-card-sale {
  color: #059669;
  font-size: 13px;
  font-weight: 900;
}

.selling-card-original {
  color: var(--ui-legacy-caption);
  font-size: 10px;
  font-weight: 700;
  text-decoration: line-through;
}

.selling-card.goods .selling-card-sale {
  color: #e11d48;
}

.selling-card.goods .selling-card-cover {
  aspect-ratio: 1/1;
}

.selling-empty {
  grid-column: 1/-1;
  padding: 40px 16px;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: var(--ui-legacy-caption);
  font-size: 13px;
}

body.dark-mode .goods-selling-panel {
  background: linear-gradient(145deg,rgba(15,23,42,.94),rgba(64,13,34,.54));
}

body.dark-mode .goods-selling-subtitle {
  color: #94a3b8;
}

body.dark-mode .goods-selling-settings {
  border-top-color: rgba(251,113,133,.18);
}

body.dark-mode .goods-selling-switch-track {
  background: #334155;
}

body.dark-mode .goods-selling-filter {
  background: rgba(15,23,42,.72);
  color: #94a3b8;
  border-color: rgba(148,163,184,.18);
}

body.dark-mode .goods-selling-filter:hover {
  color: #fda4af;
  background: rgba(136,19,55,.22);
  border-color: rgba(244,63,94,.45);
}

body.dark-mode .goods-selling-filter.active {
  color: #fff;
  background: linear-gradient(135deg,#f43f5e,#be123c);
  border-color: transparent;
}

body.dark-mode .selling-summary-tabs {
  background: rgba(15,23,42,.75);
  border-color: rgba(148,163,184,.16);
}

body.dark-mode .selling-summary-tab {
  color: #94a3b8;
}

body.dark-mode .selling-card {
  background: rgba(20,30,49,.96);
  border-color: rgba(148,163,184,.16);
}

body.dark-mode .selling-card:hover {
  border-color: rgba(139,92,246,.5);
}

body.dark-mode .selling-card-cover {
  background: #0f172a;
  border-color: rgba(148,163,184,.14);
}

body.dark-mode .selling-card-title {
  color: #f8fafc;
}

body.dark-mode .selling-card-sub, body.dark-mode .selling-card-original {
  color: var(--ui-legacy-caption);
}

body.dark-mode .selling-card-sale {
  color: #34d399;
}

body.dark-mode .selling-card.goods .selling-card-sale {
  color: #fda4af;
}

body.dark-mode .selling-empty {
  border-color: rgba(148,163,184,.2);
  color: #64748b;
}

@media (max-width: 900px) {
  .selling-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 640px) {
  .selling-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .selling-card {
    padding: 8px;
    border-radius: 14px;
  }
  .selling-card-title {
    font-size: 11px;
  }
  .goods-selling-filter span {
    display: none;
  }
  .goods-selling-filter {
    width: 36px;
    padding: 7px;
  }
  #shelf-view > div:nth-child(2) > .selling-stat-card {
    grid-column: 1 / -1;
    min-height: 68px !important;
  }
  #shelf-view > div:nth-child(2) > .selling-stat-card > div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }
}

body.dark-mode #selling-manga-count {
  color: #a5b4fc!important;
}

body.dark-mode #selling-volume-count {
  color: #fbbf24!important;
}

body.dark-mode #selling-goods-count {
  color: #fda4af!important;
}

.volume-selling-panel {
  border: 1px solid #fde68a;
  background: linear-gradient(145deg,#fffdf5,#fffbeb);
  border-radius: 13px;
  padding: 11px;
}

.volume-selling-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #92400e;
  font-size: 11.5px;
  font-weight: 900;
}

.volume-selling-title i {
  color: #f59e0b;
}

.volume-selling-subtitle {
  color: var(--ui-legacy-caption);
  font-size: 10px;
  line-height: 1.35;
  margin-top: 3px;
}

.volume-selling-settings {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(245,158,11,.18);
}

.volume-selling-settings.hidden {
  display: none!important;
}

.volume-selling-price-wrap {
  position: relative;
}

.volume-selling-price-input {
  width: 100%;
  min-height: 37px;
  padding: 8px 28px 8px 10px;
  border: 1px solid #fde68a;
  border-radius: 9px;
  background: #fff;
  color: #d97706;
  font-size: 13px;
  font-weight: 900;
  outline: none;
}

.volume-selling-price-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.10);
}

.volume-selling-currency {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-legacy-caption);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.volume-selling-switch {
  flex: 0 0 auto;
  cursor: pointer;
}

.volume-selling-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.volume-selling-switch-track {
  width: 42px;
  height: 24px;
  padding: 3px;
  display: block;
  background: #cbd5e1;
  border-radius: 999px;
  transition: .2s ease;
}

.volume-selling-switch-thumb {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.22);
  transition: .2s ease;
}

.volume-selling-switch input:checked + .volume-selling-switch-track {
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
}

.volume-selling-switch input:checked + .volume-selling-switch-track .volume-selling-switch-thumb {
  transform: translateX(18px);
}

.volume-selling-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg,#fbbf24,#d97706);
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(217,119,6,.18);
}

body.dark-mode .volume-selling-panel {
  background: linear-gradient(145deg,rgba(15,23,42,.92),rgba(69,39,7,.52));
  border-color: rgba(245,158,11,.28);
}

body.dark-mode .volume-selling-title {
  color: #fde68a;
}

body.dark-mode .volume-selling-subtitle {
  color: var(--ui-legacy-caption);
}

body.dark-mode .volume-selling-settings {
  border-top-color: rgba(251,191,36,.18);
}

body.dark-mode .volume-selling-price-input {
  background: rgba(15,23,42,.75);
  border-color: rgba(245,158,11,.28);
  color: #fbbf24;
}

body.dark-mode .volume-selling-switch-track {
  background: #334155;
}

.selling-card.volume .selling-card-sale {
  color: #d97706;
}

body.dark-mode .selling-card.volume .selling-card-sale {
  color: #fbbf24;
}

.volume-cover-selling-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 18;
}

.volume-cover-not-owned.has-selling-badge {
  top: 29px!important;
}

#vol-info-sale-row.hidden {
  display: none!important;
}

@media (max-width:640px){
  .selling-summary-tabs {
    width: 100%;
    display: grid!important;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .selling-summary-tab {
    min-width: 0;
    padding: 7px 6px!important;
    font-size: 10.5px!important;
    white-space: nowrap;
  }
  .selling-summary-tab i {
    margin-right: 3px!important;
  }
}

@media (min-width: 641px) {
  #release-view .release-content {
    width: 100% !important;
    padding: 14px 14px 36px !important;
  }
  #release-view .release-day-group {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px 20px !important;
    margin: 8px 0 18px !important;
    overflow: visible !important;
  }
  #release-view .release-date-column {
    position: static !important;
    width: 84px !important;
    min-width: 0 !important;
    padding: 2px 0 0 2px !important;
  }
  /* Không dùng flex + width cố định nữa: grid giúp các card luôn nằm đúng
     trong khung, đều cột và tự đổi số cột theo chiều rộng màn hình. */
  #release-view .release-books-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }
  #release-view .release-book-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
  #release-view .release-book-cover {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    aspect-ratio: 2 / 3 !important;
  }
  #release-view .release-book-title {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 1.34em !important;
    min-height: 1.34em !important;
    max-height: 1.34em !important;
    margin-top: 11px !important;
    font-size: 14px !important;
    line-height: 1.34 !important;
    font-weight: 760 !important;
    letter-spacing: -.018em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  #release-view .release-book-meta {
    margin-top: 6px !important;
    min-height: 1.2em;
    overflow-wrap: anywhere;
  }
  #release-view .release-book-price {
    margin-top: 7px !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
  }
}

/* Laptop / cửa sổ ngang cỡ vừa */

@media (min-width: 641px) and (max-width: 767px) {
  #release-view .release-books-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  #release-view .release-books-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Laptop phổ biến */

@media (min-width: 901px) and (max-width: 1799px) {
  #release-view .release-books-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Desktop rộng: giữ 5 cột cân bằng như bố cục mục tiêu */

@media (min-width: 1800px) {
}

@media (min-width: 901px) and (max-width: 1799px) {
  #release-view .release-book-title {
    font-size: clamp(14px,.76vw,17px) !important;
    line-height: 1.34 !important;
    font-weight: 800 !important;
  }
  #release-view .release-book-price {
    font-size: clamp(14px,.75vw,17px) !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
}

@media (max-width: 430px) and (orientation: portrait) {
  #release-view .release-book-card {
    padding: 9px !important;
    border-radius: 17px !important;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  #vol-detail-modal .vol-detail-media {
    width: 100% !important;
    max-width: none !important;
    align-items: center !important;
    position: relative;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: grab;
    padding: 2px 0 4px;
  }
  #vol-detail-modal .vol-detail-media:active {
    cursor: grabbing;
  }
  #vol-detail-image-stage {
    width: min(62vw, 230px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    flex: 0 0 auto;
  }
  #vol-detail-modal .vol-swipe-hint {
    width: min(82vw, 340px) !important;
    margin-inline: auto;
  }
  /* Vùng nhận vuốt vô hình rộng gần hết popup, nhưng chỉ cao quanh ảnh + dòng gợi ý. */
  #vol-detail-modal .vol-detail-media::before {
    content: "";
    position: absolute;
    inset: -8px -2px -8px -2px;
    border-radius: 18px;
    pointer-events: none;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  /* Chỉ căn giữa popup ĐANG MỞ. Không bao giờ ép display:flex
     cho popup có .hidden trên màn hình dọc iPhone. */
  #vol-detail-modal:not(.hidden),
  #goods-detail-modal:not(.hidden) {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    align-items: safe center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: max(12px, env(safe-area-inset-top))
      10px
      max(28px, calc(env(safe-area-inset-bottom) + 14px))
      10px !important;
    scroll-padding-top: max(12px, env(safe-area-inset-top));
  }
  /* Popup Tập: bỏ max-height/overflow bị khóa bởi CSS desktop.
     Outer modal sẽ là nơi cuộn duy nhất. */
  #vol-detail-modal > div:first-child {
    width: 100% !important;
    max-width: 560px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }
  /* Danh sách phụ kiện trong popup tập không tự tạo một thanh cuộn con nữa.
     Điều này loại bỏ tình trạng ngón tay bị "kẹt" khi chạm đúng danh sách. */
  #vol-detail-modal #vol-info-goods-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
    overscroll-behavior: auto !important;
  }
  /* Media vẫn nhận pan-y để người dùng có thể bắt đầu cuộn dọc ngay trên ảnh. */
  #vol-detail-modal .vol-detail-media,
  #vol-detail-image-stage {
    touch-action: pan-y !important;
  }
  /* Popup Phụ kiện cũng dùng outer modal làm vùng cuộn duy nhất.
     Gỡ overflow-y:auto + max-height cũ của goods-detail-card. */
  #goods-detail-modal .goods-detail-card {
    width: 100% !important;
    max-width: 560px !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    grid-template-columns: 1fr !important;
  }
  #goods-detail-modal .goods-detail-media,
  #goods-detail-modal .goods-detail-side,
  #goods-detail-image-stage {
    touch-action: pan-y !important;
  }
  /* Các vùng text dài không được tạo overflow riêng theo chiều dọc. */
  #goods-detail-modal .goods-detail-side {
    overflow: visible !important;
    min-height: 0 !important;
  }
  /* Khoảng cuối popup đủ rộng để nút Đóng không bị thanh Safari che. */
  #vol-detail-modal > div:first-child > :last-child,
  #goods-detail-modal .goods-detail-footer {
    margin-bottom: max(2px, env(safe-area-inset-bottom)) !important;
  }
}

/* Dùng dvh cho mobile landscape/tablet thấp nữa, nhưng không đổi bố cục ngang. */

@media (max-height: 620px) and (pointer: coarse) {
  #vol-detail-modal,
  #goods-detail-modal {
    max-height: 100dvh !important;
  }
}

#detail-mobile-backdrop {
  display: none;
}

@media (max-width: 640px) and (orientation: portrait) {
  #detail-mobile-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    -webkit-backdrop-filter: blur(18px) saturate(.72) brightness(.72);
    backdrop-filter: blur(18px) saturate(.72) brightness(.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
    transform: translateZ(0);
    will-change: opacity;
  }
  #detail-mobile-backdrop.detail-backdrop-visible {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  /* Backdrop đã được tách thành một lớp fixed riêng.
     Popup chỉ lo nhiệm vụ cuộn nên không còn phụ thuộc bg-black/50. */
  #vol-detail-modal,
  #goods-detail-modal {
    isolation: isolate;
  }
  /* Card luôn nằm phía trên backdrop. */
  #vol-detail-modal > div:first-child,
  #goods-detail-modal .goods-detail-card {
    position: relative;
    z-index: 1;
  }
  /* Khóa trang phía sau; chỉ vùng popup được phép cuộn. */
  html.detail-info-open,
  body.detail-info-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

/* Giảm hiệu ứng nếu thiết bị yêu cầu giảm chuyển động. */

@media (prefers-reduced-motion: reduce) {
  #detail-mobile-backdrop {
    transition: none !important;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  /* Light mode: nền phía sau vẫn nhìn nhận được nhưng tối + blur đủ mạnh. */
  #detail-mobile-backdrop {
    z-index: 2147483000 !important;
    background: rgba(15, 23, 42, .56) !important;
    -webkit-backdrop-filter: blur(20px) saturate(.78) brightness(.72) !important;
    backdrop-filter: blur(20px) saturate(.78) brightness(.72) !important;
  }
  /* Dark mode tối hơn một chút, tránh nền phía sau bị sáng xuyên qua. */
  /* Modal phải cao hơn backdrop và tất cả header / dropdown / nút nổi cũ. */
  #vol-detail-modal,
  #goods-detail-modal {
    z-index: 2147483001 !important;
  }
  /* Không để header, hotzone, theme button hay portal lọt lên trên popup. */
  body.detail-info-open #app-global-header-wrap,
  body.detail-info-open #app-global-header-hotzone,
  body.detail-info-open #theme-toggle,
  body.detail-info-open #pretty-select-portal {
    z-index: 1 !important;
    pointer-events: none !important;
  }
  /* Card popup giữ nền theme rõ ràng; backdrop không được làm trắng/đen card. */
  body.dark-mode #vol-detail-modal > div:first-child,
  body.dark-mode #goods-detail-modal .goods-detail-card {
    background: rgba(20, 30, 49, .985) !important;
    border-color: rgba(148, 163, 184, .18) !important;
    box-shadow: 0 26px 76px rgba(0, 0, 0, .48) !important;
  }
  /* Tránh vùng overscroll của modal ló màu body ở mép trên/dưới. */
  #vol-detail-modal,
  #goods-detail-modal {
    background-color: transparent !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 640px) {
  #vol-detail-modal .vol-zoom-overlay,
  #goods-detail-modal .goods-zoom-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

#vol-detail-modal .vol-zoom-overlay,
#goods-detail-modal .goods-zoom-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (hover: none) and (pointer: coarse) {
  #vol-detail-image-stage,
  #goods-detail-image-stage {
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent;
  }
}

#image-zoom-modal {
  z-index: 2147483646 !important;
  background: rgba(2, 6, 23, .94) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  isolation: isolate;
}

#image-zoom-modal > div {
  position: relative;
  z-index: 1;
}

/* Mobile: dùng viewport động để ảnh không bị Safari che và không lọt xuống dưới popup. */

@media (max-width: 640px) {
  #image-zoom-modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top))
      10px
      max(18px, env(safe-area-inset-bottom))
      10px !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: none;
  }
  #image-zoom-modal > div {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #image-zoom-modal #zoomed-image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  #image-zoom-modal button {
    top: 4px !important;
    right: 4px !important;
    z-index: 2;
  }
}

/* Khi zoom đang mở, popup thông tin phía dưới không nhận thao tác. */

body.image-zoom-open #vol-detail-modal,
body.image-zoom-open #goods-detail-modal {
  pointer-events: none !important;
}

@media (max-width: 640px) and (orientation: portrait) {
  /* LIGHT MODE
     Dùng một lớp kính sáng gần kín viewport thay vì phủ xanh/đen.
     Nhờ vậy phần ngoài card popup không còn tạo hai dải tối khó chịu. */
  body:not(.dark-mode) #detail-mobile-backdrop {
    background: rgba(248, 250, 252, .88) !important;
    -webkit-backdrop-filter: blur(22px) saturate(.72) brightness(1.04) !important;
    backdrop-filter: blur(22px) saturate(.72) brightness(1.04) !important;
  }
  /* Popup sáng hòa với lớp nền, vẫn có bóng nhẹ để nhận biết ranh giới. */
  body:not(.dark-mode) #vol-detail-modal > div:first-child,
  body:not(.dark-mode) #goods-detail-modal .goods-detail-card {
    background: #ffffff !important;
    border-color: rgba(203, 213, 225, .82) !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .14),
      0 0 0 1px rgba(255, 255, 255, .72) inset !important;
  }
  /* DARK MODE giữ nền tối đồng bộ như trước. */
  body.dark-mode #detail-mobile-backdrop {
    background: rgba(2, 6, 23, .76) !important;
    -webkit-backdrop-filter: blur(20px) saturate(.70) brightness(.62) !important;
    backdrop-filter: blur(20px) saturate(.70) brightness(.62) !important;
  }
  /* Đảm bảo toàn bộ vùng nhìn thấy ngoài card đều do backdrop xử lý,
     không để màu nền page lọt ra trong lúc cuộn/overscroll. */
  #vol-detail-modal,
  #goods-detail-modal {
    background: transparent !important;
  }
  html.detail-info-open,
  body.detail-info-open {
    background-color: transparent !important;
  }
}

@media (max-width: 640px) {
  /* LIGHT MODE: bỏ nền đen, dùng nền sáng dịu + blur */
  body:not(.dark-mode) #image-zoom-modal {
    background: rgba(248, 250, 252, .96) !important;
    -webkit-backdrop-filter: blur(18px) saturate(.82) brightness(1.03) !important;
    backdrop-filter: blur(18px) saturate(.82) brightness(1.03) !important;
  }
  /* Nút đóng ở Light Mode cũng đồng bộ nền sáng */
  body:not(.dark-mode) #image-zoom-modal button {
    background: rgba(255, 255, 255, .94) !important;
    color: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, .30) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12) !important;
  }
  /* DARK MODE vẫn dùng nền tối như trước */
  body.dark-mode #image-zoom-modal {
    background: rgba(2, 6, 23, .94) !important;
    -webkit-backdrop-filter: blur(8px) saturate(.72) brightness(.72) !important;
    backdrop-filter: blur(8px) saturate(.72) brightness(.72) !important;
  }
  body.dark-mode #image-zoom-modal button {
    background: rgba(15, 23, 42, .90) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, .24) !important;
  }
  /* Ảnh giữ nguyên màu, không bị filter bởi theme */
  #image-zoom-modal #zoomed-image {
    filter: none !important;
  }
}

.release-book-cover {
  position: relative !important;
}

.release-book-cover img {
  transition: transform .4s ease, filter .22s ease, opacity .22s ease !important;
}

/* Chưa mua: giữ bìa sáng, nổi bật hơn một chút */

.release-book-card.release-unowned .release-book-cover img {
  filter: brightness(1.04) saturate(1.04) !important;
  opacity: 1 !important;
}

.release-book-card.release-unowned .release-book-cover {
  box-shadow: 0 0 0 1px rgba(244, 63, 94, .12),
              0 8px 22px rgba(15, 23, 42, .08);
}

/* Đã mua: cố tình hạ sáng để nhìn lịch là biết ngay cuốn nào còn thiếu */

.release-book-card.release-owned .release-book-cover img {
  filter: brightness(.60) saturate(.78) !important;
  opacity: .92 !important;
}

.release-book-card.release-owned .release-cover-placeholder {
  filter: brightness(.72);
  opacity: .78;
}

.release-book-card.release-owned .release-book-title,
.release-book-card.release-owned .release-book-meta,
.release-book-card.release-owned .release-book-price {
  opacity: .72;
}

.release-unowned-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(244, 63, 94, .96);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 5px 14px rgba(190, 24, 93, .24);
  pointer-events: none;
}

/* Hover không được làm mất trạng thái sáng/tối */

.release-book-card.release-unowned:hover .release-book-cover img {
  filter: brightness(1.04) saturate(1.04) !important;
}

.release-book-card.release-owned:hover .release-book-cover img {
  filter: brightness(.64) saturate(.80) !important;
}

/* Dark mode: chênh lệch vẫn rõ nhưng không quá đen */

body.dark-mode .release-book-card.release-owned .release-book-cover img {
  filter: brightness(.50) saturate(.72) !important;
}

body.dark-mode .release-book-card.release-unowned .release-book-cover img {
  filter: brightness(1.02) saturate(1.05) !important;
}

/* Mobile: tag gọn hơn để không che bìa */

@media (max-width: 640px) {
  .release-unowned-badge {
    top: 6px;
    right: 6px;
    padding: 3px 5px;
    font-size: 8px;
    gap: 3px;
  }
}

@media (hover: hover) and (pointer: fine) {
  body.subpage-header-autohide #app-global-header-wrap {
    max-height: var(--global-header-open-height, 160px);
    transition: max-height .48s cubic-bezier(.16, 1, .3, 1),
      margin-bottom .48s cubic-bezier(.16, 1, .3, 1),
      opacity .30s ease,
      transform .48s cubic-bezier(.16, 1, .3, 1),
      filter .30s ease !important;
    transform-origin: top center;
    will-change: max-height, margin-bottom, opacity, transform;
  }
  body.subpage-header-autohide #app-global-header-wrap:not(.is-revealed) {
    max-height: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(.992) !important;
    filter: blur(1px);
    overflow: hidden !important;
    pointer-events: none;
  }
  body.subpage-header-autohide #app-global-header-wrap.is-revealed {
    max-height: var(--global-header-open-height, 160px) !important;
    margin-bottom: 24px !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    filter: blur(0);
    overflow: visible !important;
    pointer-events: auto;
  }
  /* Hotzone bớt "nhạy giật": vệt báo hiệu chuyển nhẹ hơn. */
  body.subpage-header-autohide #app-global-header-hotzone::after {
    transition: opacity .28s ease,
      width .32s cubic-bezier(.16, 1, .3, 1),
      background-color .28s ease !important;
  }
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  body.subpage-header-autohide #app-global-header-wrap {
    max-height: var(--global-header-open-height, 180px);
    transition: max-height .48s cubic-bezier(.16, 1, .3, 1),
      margin-bottom .48s cubic-bezier(.16, 1, .3, 1),
      opacity .30s ease,
      transform .48s cubic-bezier(.16, 1, .3, 1),
      filter .30s ease !important;
    transform-origin: top center;
    will-change: max-height, margin-bottom, opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  body.subpage-header-autohide #app-global-header-wrap:not(.is-revealed) {
    max-height: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    transform: translate3d(0, -10px, 0) scale(.994) !important;
    filter: blur(.6px);
    overflow: hidden !important;
    pointer-events: none;
  }
  body.subpage-header-autohide #app-global-header-wrap.is-revealed {
    max-height: var(--global-header-open-height, 180px) !important;
    margin-bottom: 16px !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: blur(0);
    overflow: visible !important;
    pointer-events: auto;
  }
}

.volume-actions-toggle,
.volume-actions-menu button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226, 232, 240, .92);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .18);
  -webkit-tap-highlight-color: transparent;
}

.volume-actions-toggle {
  top: 50%;
  right: 6px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.volume-actions-toggle:hover {
  background: #fff;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .22);
}

.volume-actions-menu {
  position: absolute;
  top: 50%;
  right: 42px;
  align-items: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(9px, -50%) scale(.92);
  transform-origin: right center;
  transition: opacity .16s ease,
    visibility .16s ease,
    transform .22s cubic-bezier(.16,1,.3,1);
}

.volume-quick-actions.is-open .volume-actions-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}

.volume-quick-actions.is-open .volume-actions-toggle i {
  transform: rotate(180deg);
}

.volume-actions-menu button {
  pointer-events: auto;
  font-size: 11px;
  transition: transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease;
}

.volume-actions-menu button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 17px rgba(15, 23, 42, .22);
}

.volume-action-add {
  background: #f59e0b;
  color: #fff;
  border-color: rgba(245,158,11,.9) !important;
}

.volume-action-edit,
.volume-action-delete {
  background: rgba(255,255,255,.96);
  color: #475569;
}

.volume-action-edit:hover {
  color: #4f46e5;
}

.volume-action-delete:hover {
  color: #dc2626;
}

body.dark-mode .volume-actions-toggle,
body.dark-mode .volume-action-edit,
body.dark-mode .volume-action-delete {
  background: rgba(15, 23, 42, .92);
  color: #e2e8f0;
  border-color: rgba(100,116,139,.58);
}

body.dark-mode .volume-actions-toggle:hover,
body.dark-mode .volume-action-edit:hover {
  color: #a5b4fc;
}

body.dark-mode .volume-action-delete:hover {
  color: #fca5a5;
}

@media (max-width: 640px) {
  .volume-actions-toggle,
  .volume-actions-menu button {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .volume-actions-toggle {
    right: 5px;
  }
  .volume-actions-menu {
    right: 38px;
    gap: 5px;
  }
}

.volume-actions-menu {
  display: none !important;
}

/* Nút ba chấm: nhỏ, nhẹ, nằm trên viền ngoài card */

.volume-actions-toggle {
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
}

/* Menu nổi toàn cục — không nằm trong card nên không bị crop/chiếm chỗ */

#volume-actions-popover {
  position: fixed;
  z-index: 2147482500;
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease,
    visibility .15s ease,
    transform .20s cubic-bezier(.16,1,.3,1);
}

#volume-actions-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#volume-actions-popover button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease,
    background-color .15s ease,
    color .15s ease;
}

/* Mobile: nút đủ dễ chạm nhưng vẫn rất gọn */

@media (max-width: 640px) {
  #volume-actions-popover {
    border-radius: 14px;
  }
  #volume-actions-popover button {
    border-radius: 10px;
  }
}

/* Badge góc dưới phải vốn đã có trên bìa -> kiêm luôn nút mở thao tác */

.volume-cover-action-trigger {
  gap: 5px !important;
  -webkit-backdrop-filter: blur(8px) saturate(.9);
  backdrop-filter: blur(8px) saturate(.9);
}

.volume-cover-action-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  border-left: 1px solid rgba(255,255,255,.25);
  font-size: 9px;
  opacity: .92;
}

/* Nếu tập dùng tên riêng, không cần badge "Tập X": chỉ còn một nút chấm cực nhỏ
   tại chính vị trí badge cũ. */

.volume-cover-action-trigger.is-label-hidden {
  height: 20px !important;
  min-height: 20px !important;
  justify-content: center !important;
  border-radius: 7px !important;
}

.volume-cover-action-trigger.is-label-hidden .volume-cover-action-dots {
  padding: 0 !important;
  border-left: 0 !important;
}

/* Menu mở ra mới hiển thị chức năng. Dạng menu ngữ cảnh gọn, có chữ rõ ràng. */

#volume-actions-popover {
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
}

body.dark-mode #volume-actions-popover .volume-pop-add:hover {
  background: rgba(245,158,11,.12) !important;
}

body.dark-mode #volume-actions-popover .volume-pop-edit:hover {
  background: rgba(129,140,248,.11) !important;
}

body.dark-mode #volume-actions-popover .volume-pop-delete:hover {
  background: rgba(251,113,133,.10) !important;
}

@media (max-width: 640px) {
  .volume-cover-action-trigger {
    gap: 4px !important;
  }
  .volume-cover-action-dots {
    padding-left: 4px;
    font-size: 8px;
  }
  #volume-actions-popover {
    width: 150px !important;
  }
}

.volume-cover-action-trigger {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  z-index: 18 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  min-height: 20px !important;
  padding: 3px 7px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 6px !important;
  background: rgba(15,23,42,.64) !important;
  color: #fff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
  -webkit-backdrop-filter: blur(7px) saturate(.9);
  backdrop-filter: blur(7px) saturate(.9);
  cursor: pointer;
  pointer-events: auto !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease !important;
}

.volume-cover-action-trigger:hover,
.volume-cover-action-trigger[aria-expanded="true"] {
  background: rgba(15,23,42,.78) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}

.volume-cover-action-label {
  display: inline-block !important;
}

/* Khi không có label số tập, vẫn chỉ hiện một trigger rất nhỏ */

.volume-cover-action-trigger.is-label-hidden {
  min-width: 24px !important;
  width: 24px !important;
  padding: 0 !important;
}

.volume-cover-action-trigger.is-label-hidden::after {
  content: "•••";
  font-size: 8px;
  letter-spacing: 1px;
  transform: translateY(-1px);
}

/* Menu icon nổi: nhỏ, thoáng, không có chữ */

#volume-actions-popover {
  transform-origin: bottom right !important;
}

#volume-actions-popover button {
  font-weight: 700 !important;
}

#volume-actions-popover button i {
  text-align: center !important;
}

@media (max-width: 640px) {
  .volume-cover-action-trigger {
    right: 3px !important;
    bottom: 3px !important;
    min-width: 32px !important;
    min-height: 19px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
    border-radius: 6px !important;
  }
  #volume-actions-popover button {
    font-size: 10px !important;
  }
}

.volume-cover-static-label {
  pointer-events: none !important;
}

.volume-quick-actions {
  position: absolute !important;
  top: -9px !important;
  right: -9px !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto -9px auto auto !important;
  width: 22px !important;
  height: 22px !important;
  z-index: 46 !important;
  pointer-events: none !important;
}

.volume-actions-toggle {
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  background: rgba(255,255,255,.94) !important;
  color: #64748b !important;
  border: 1px solid rgba(203,213,225,.78) !important;
  box-shadow: 0 4px 11px rgba(15,23,42,.13),
    0 0 0 1px rgba(255,255,255,.35) inset !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
  font-size: 9px !important;
  line-height: 1 !important;
  cursor: pointer;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s cubic-bezier(.2,.8,.2,1),
    color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease !important;
}

.volume-actions-toggle:hover,
.volume-actions-toggle[aria-expanded="true"] {
  transform: scale(1.07) !important;
  color: #4f46e5 !important;
  background: rgba(255,255,255,.99) !important;
  box-shadow: 0 6px 15px rgba(79,70,229,.16),
    0 0 0 1px rgba(99,102,241,.12) inset !important;
}

.volume-actions-toggle i {
  transform: none !important;
  transition: none !important;
}

body.dark-mode .volume-actions-toggle {
  background: rgba(15,23,42,.90) !important;
  color: #cbd5e1 !important;
  border-color: rgba(100,116,139,.52) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

body.dark-mode .volume-actions-toggle:hover,
body.dark-mode .volume-actions-toggle[aria-expanded="true"] {
  background: rgba(30,41,59,.98) !important;
  color: #c7d2fe !important;
}

#volume-actions-popover button {
  gap: 0 !important;
}

@media (max-width: 640px) {
  .volume-quick-actions {
    top: -8px !important;
    right: -8px !important;
    inset: auto -8px auto auto !important;
    width: 21px !important;
    height: 21px !important;
  }
  .volume-actions-toggle {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    font-size: 8px !important;
  }
}

.volume-quick-actions {
  display: none !important;
}

/* Badge Tập X giữ đúng vị trí/kích thước như cũ. */

.volume-cover-static-label,
.volume-cover-action-label-button {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  z-index: 18 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* Chỉ badge của người đã đăng nhập mới bấm được. */

.volume-cover-action-label-button {
  cursor: pointer;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}

/* Menu 3 icon tối giản. */

#volume-actions-popover {
  display: flex !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(203,213,225,.76) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.15),
    0 2px 7px rgba(15,23,42,.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

#volume-actions-popover button {
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

#volume-actions-popover button span {
  display: none !important;
}

#volume-actions-popover button i {
  width: auto !important;
  font-size: 10px !important;
}

#volume-actions-popover .volume-pop-add {
  background: rgba(245,158,11,.13) !important;
}

#volume-actions-popover .volume-pop-edit {
  background: rgba(99,102,241,.11) !important;
}

#volume-actions-popover .volume-pop-delete {
  background: rgba(244,63,94,.10) !important;
}

#volume-actions-popover .volume-pop-add:hover {
  background: rgba(245,158,11,.20) !important;
}

#volume-actions-popover .volume-pop-edit:hover {
  background: rgba(99,102,241,.18) !important;
}

#volume-actions-popover .volume-pop-delete:hover {
  background: rgba(244,63,94,.16) !important;
}

body.dark-mode #volume-actions-popover {
  background: rgba(15,23,42,.97) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.36) !important;
}

body.dark-mode #volume-actions-popover .volume-pop-add {
  background: rgba(245,158,11,.15) !important;
}

body.dark-mode #volume-actions-popover .volume-pop-edit {
  background: rgba(129,140,248,.14) !important;
}

body.dark-mode #volume-actions-popover .volume-pop-delete {
  background: rgba(251,113,133,.12) !important;
}

@media (max-width: 640px) {
  .volume-cover-static-label,
  .volume-cover-action-label-button {
    right: 3px !important;
    bottom: 3px !important;
    font-size: 8px !important;
    border-radius: 6px !important;
  }
  #volume-actions-popover {
    padding: 4px !important;
  }
}

/* "Tập X": không còn nền đen, vẫn giữ vị trí và khả năng bấm */

.volume-cover-static-label,
.volume-cover-action-label-button {
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* Giữ chữ đọc rõ trên mọi ảnh bìa mà không cần nền */
}

.volume-cover-action-label-button:hover,
.volume-cover-action-label-button[aria-expanded="true"] {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.96),
    0 0 5px rgba(0,0,0,.80) !important;
}

/* Khung bao quanh 3 icon: hoàn toàn trong suốt */

#volume-actions-popover {
  border-color: transparent !important;
}

/* Từng icon cũng bỏ nền tròn; chỉ giữ màu icon */

#volume-actions-popover button,
#volume-actions-popover .volume-pop-add,
#volume-actions-popover .volume-pop-edit,
#volume-actions-popover .volume-pop-delete,
body.dark-mode #volume-actions-popover .volume-pop-add,
body.dark-mode #volume-actions-popover .volume-pop-edit,
body.dark-mode #volume-actions-popover .volume-pop-delete {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Giữ màu hiện tại của ba chức năng */

/* Hover chỉ phóng nhẹ icon, không tạo mảng nền */

#volume-actions-popover button:hover {
  background: transparent !important;
  transform: scale(1.12) !important;
}

/* Dark mode container cũng phải thật sự trong suốt */

body.dark-mode #volume-actions-popover {
  border-color: transparent !important;
}

/* Badge "Tập X": nền kính mờ nhỏ vừa đủ ôm chữ */

.volume-cover-static-label,
.volume-cover-action-label-button {
  background: rgba(15, 23, 42, .48) !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .15),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.88) !important;
  backdrop-filter: blur(8px) saturate(.88) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.62) !important;
  min-width: 34px !important;
  min-height: 19px !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
}

.volume-cover-action-label-button:hover,
.volume-cover-action-label-button[aria-expanded="true"] {
  background: rgba(15, 23, 42, .62) !important;
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow: 0 3px 9px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.035) inset !important;
}

/* Không tạo một thanh nền lớn phía sau 3 icon */

#volume-actions-popover,
body.dark-mode #volume-actions-popover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 1px !important;
  gap: 5px !important;
}

/* Mỗi icon có một mặt kính riêng: đủ tương phản nhưng vẫn rất nhẹ */

#volume-actions-popover button,
body.dark-mode #volume-actions-popover button {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  background: rgba(15, 23, 42, .52) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 3px 9px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
  -webkit-backdrop-filter: blur(9px) saturate(.88) !important;
  backdrop-filter: blur(9px) saturate(.88) !important;
  border-radius: 999px !important;
  transform: none !important;
  transition: transform .15s cubic-bezier(.2,.8,.2,1),
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}

/* Giữ nguyên màu chức năng */

#volume-actions-popover .volume-pop-add,
body.dark-mode #volume-actions-popover .volume-pop-add {
  color: #fbbf24 !important;
}

#volume-actions-popover .volume-pop-edit,
body.dark-mode #volume-actions-popover .volume-pop-edit {
  color: #a5b4fc !important;
}

#volume-actions-popover .volume-pop-delete,
body.dark-mode #volume-actions-popover .volume-pop-delete {
  color: #fda4af !important;
}

#volume-actions-popover button i {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important;
}

/* Hover/focus chỉ nhấn nhẹ từng icon, không sinh khung lớn */

#volume-actions-popover button:hover,
#volume-actions-popover button:focus-visible {
  background: rgba(15, 23, 42, .68) !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.035) inset !important;
  transform: translateY(-1px) scale(1.05) !important;
}

@media (max-width: 640px) {
  .volume-cover-static-label,
  .volume-cover-action-label-button {
    min-width: 32px !important;
    min-height: 19px !important;
    padding: 3px 6px !important;
  }
  #volume-actions-popover {
    gap: 4px !important;
  }
  #volume-actions-popover button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

#volume-actions-popover,
body.dark-mode #volume-actions-popover {
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  transform-origin: bottom right !important;
}

/* Hiệu ứng mở theo chiều từ dưới lên trên */

#volume-actions-popover {
  transform: translateY(7px) scale(.94) !important;
}

#volume-actions-popover.is-open {
  transform: translateY(0) scale(1) !important;
}

.volume-variant-row {
  gap: 7px !important;
}

.volume-variant-thumb {
  align-self: center;
}

.volume-variant-title {
  /* Cho tên phiên bản tối đa 2 dòng thay vì cắt còn "T..." */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Hàng dưới: giá bên trái, icon thao tác gom gọn bên phải */

.volume-variant-bottom {
  justify-content: space-between;
  gap: 5px;
}

.volume-variant-price {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.volume-variant-actions {
  flex: 0 0 auto;
}

/* Trạng thái đang chọn đã đủ rõ bằng nền + border, không cần icon check chiếm chỗ */

.volume-variant-selected-check {
  display: none !important;
}

body.dark-mode .volume-variant-row {
  border-color: rgba(100,116,139,.34) !important;
}

@media (max-width: 640px) {
  .volume-variant-panel {
    padding: 5px !important;
  }
  .volume-variant-row {
    gap: 6px !important;
  }
  .volume-variant-title {
    line-height: 1.18 !important;
  }
}

/* Dành đúng một cột nhỏ bên phải cho 2 icon xếp dọc */

/* Hàng giá không còn phải chia ngang với 2 icon */

/* Sửa trên — Xóa dưới */

/* Tên phiên bản được tận dụng phần chiều ngang vừa giải phóng */

@media (max-width: 640px) {
  .volume-variant-actions {
    right: 4px !important;
    width: 20px !important;
    min-width: 20px !important;
  }
}

/* 6 card trên desktop; mobile vẫn 2 cột */

.contact-stat-card {
  cursor: pointer;
  color: #0ea5e9;
}

.contact-stat-card:hover {
  border-color: rgba(14,165,233,.34) !important;
}

.contact-stat-card > i {
  color: #0ea5e9 !important;
  background: rgba(14,165,233,.09) !important;
}

.contact-stat-arrow {
  position: absolute;
  right: 11px;
  top: 11px;
  font-size: 9px;
  color: #94a3b8;
  opacity: .72;
  transition: transform .18s ease, opacity .18s ease;
}

.contact-stat-card:hover .contact-stat-arrow {
  transform: translate(2px,-2px);
  opacity: 1;
}

#contact-modal {
  position: fixed;
  inset: 0;
  z-index: 2147481800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15,23,42,.32);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
  backdrop-filter: blur(16px) saturate(.82);
}

#contact-modal.hidden {
  display: none !important;
}

.contact-modal-card {
  width: min(720px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  border-radius: 28px;
  border: 1px solid rgba(226,232,240,.85);
  background: radial-gradient(circle at 92% 8%, rgba(99,102,241,.10), transparent 28%),
    radial-gradient(circle at 4% 88%, rgba(14,165,233,.08), transparent 30%),
    rgba(255,255,255,.97);
  box-shadow: 0 28px 80px rgba(15,23,42,.22),
    0 4px 18px rgba(15,23,42,.08);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.contact-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(226,232,240,.8);
}

.contact-profile-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.contact-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #6366f1, #0ea5e9);
  color: #fff;
  box-shadow: 0 8px 22px rgba(79,70,229,.20);
  font-size: 17px;
}

.contact-head-title {
  font-size: 17px;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.02em;
}

.contact-head-sub {
  margin-top: 3px;
  color: var(--ui-legacy-caption);
  font-size: 11px;
  line-height: 1.35;
}

.contact-close-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: rgba(248,250,252,.9);
  border: 1px solid #e2e8f0;
  transition: .18s ease;
}

.contact-close-btn:hover {
  color: #0f172a;
  transform: rotate(4deg);
  background: #fff;
}

.contact-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  gap: 14px;
  padding: 18px 22px 22px;
}

.contact-social-panel,
.contact-bank-panel {
  border-radius: 20px;
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(248,250,252,.66);
  padding: 14px;
}

.contact-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-legacy-secondary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-social-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.contact-link-btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.82);
  text-align: left;
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    border-color .18s ease;
}

.contact-link-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}

.contact-link-btn.is-empty {
  opacity: .55;
  cursor: default;
}

.contact-link-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.contact-link-copy {
  min-width: 0;
  flex: 1;
}

.contact-link-name {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  color: #1e293b;
}

.contact-link-value {
  display: block;
  margin-top: 2px;
  color: var(--ui-legacy-caption);
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-link-chevron {
  color: #cbd5e1;
  font-size: 9px;
}

.contact-facebook .contact-link-icon {
  background: rgba(24,119,242,.10);
  color: #1877f2;
}

.contact-messenger .contact-link-icon {
  background: rgba(104,63,251,.10);
  color: #6840ff;
}

.contact-zalo .contact-link-icon {
  background: rgba(0,104,255,.10);
  color: #0068ff;
  font-size: 12px;
  font-weight: 950;
}

/* QR bank */

.contact-bank-panel {
  display: flex;
  flex-direction: column;
}

.contact-bank-card {
  flex: 1;
  min-height: 218px;
  border-radius: 17px;
  padding: 12px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226,232,240,.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-bank-qr {
  width: min(154px, 100%);
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(14,165,233,.08));
  border: 1px dashed rgba(148,163,184,.42);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  position: relative;
}

.contact-bank-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.contact-bank-qr-placeholder {
  text-align: center;
  padding: 12px;
}

.contact-bank-qr-placeholder i {
  display: block;
  font-size: 35px;
  margin-bottom: 8px;
  color: #94a3b8;
}

.contact-bank-qr-placeholder span {
  display: block;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 800;
}

.contact-bank-meta {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.contact-bank-name {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
}

.contact-bank-account {
  color: var(--ui-legacy-secondary);
  font-size: 9.5px;
  margin-top: 2px;
}

.contact-bank-hint {
  margin-top: 10px;
  color: var(--ui-legacy-caption);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
}

body.dark-mode #contact-modal {
  background: rgba(2,6,23,.62);
}

body.dark-mode .contact-modal-card {
  border-color: rgba(100,116,139,.28);
  background: radial-gradient(circle at 92% 8%, rgba(99,102,241,.11), transparent 28%),
    radial-gradient(circle at 4% 88%, rgba(14,165,233,.08), transparent 30%),
    rgba(15,23,42,.97);
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
}

body.dark-mode .contact-modal-head {
  border-bottom-color: rgba(100,116,139,.22);
}

body.dark-mode .contact-head-title {
  color: #f8fafc;
}

body.dark-mode .contact-head-sub {
  color: var(--ui-legacy-caption);
}

body.dark-mode .contact-close-btn {
  color: #cbd5e1;
  background: rgba(30,41,59,.86);
  border-color: rgba(100,116,139,.28);
}

body.dark-mode .contact-social-panel,
body.dark-mode .contact-bank-panel {
  border-color: rgba(100,116,139,.24);
  background: rgba(30,41,59,.42);
}

body.dark-mode .contact-link-btn,
body.dark-mode .contact-bank-card {
  background: rgba(15,23,42,.62);
  border-color: rgba(100,116,139,.20);
}

body.dark-mode .contact-link-name,
body.dark-mode .contact-bank-name {
  color: #f1f5f9;
}

body.dark-mode .contact-bank-qr {
  border-color: rgba(148,163,184,.26);
  background: rgba(30,41,59,.68);
}

@media (max-width: 640px) {
  #shelf-view > div:nth-child(2) > .contact-stat-card {
    grid-column: 1 / -1;
    min-height: 68px !important;
  }
  #shelf-view > div:nth-child(2) > .contact-stat-card > div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }
  #contact-modal {
    align-items: flex-end;
    padding: 10px;
  }
  .contact-modal-card {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 24px;
  }
  .contact-modal-head {
    padding: 16px 16px 13px;
  }
  .contact-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
  }
  .contact-modal-body {
    grid-template-columns: 1fr;
    padding: 13px 16px 18px;
  }
  .contact-social-panel,
  .contact-bank-panel {
    border-radius: 17px;
    padding: 11px;
  }
  .contact-social-list {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
  }
  .contact-link-btn {
    min-height: 78px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 5px;
    text-align: center;
  }
  .contact-link-copy {
    width: 100%;
  }
  .contact-link-name {
    font-size: 10px;
  }
  .contact-link-value,
  .contact-link-chevron {
    display: none;
  }
  .contact-bank-card {
    min-height: 190px;
  }
  .contact-bank-qr {
    width: 138px;
  }
}

.contact-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.contact-edit-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.16);
  transition: .18s ease;
}

.contact-edit-btn:hover {
  transform: translateY(-1px);
  background: rgba(99,102,241,.13);
  box-shadow: 0 7px 16px rgba(79,70,229,.10);
}

.contact-edit-panel {
  padding: 18px 22px 22px;
}

.contact-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-edit-section {
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(248,250,252,.68);
  padding: 14px;
}

.contact-edit-field {
  margin-top: 10px;
}

.contact-edit-field:first-of-type {
  margin-top: 0;
}

.contact-edit-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ui-legacy-secondary);
  font-size: 10px;
  font-weight: 800;
}

.contact-edit-input {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-size: 11px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.contact-edit-input:focus {
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
  background: #fff;
}

.contact-edit-help {
  margin-top: 5px;
  color: var(--ui-legacy-caption);
  font-size: 8.5px;
  line-height: 1.35;
}

.contact-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.contact-edit-cancel,
.contact-edit-save {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 900;
  transition: .18s ease;
}

.contact-edit-cancel {
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.contact-edit-save {
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 8px 18px rgba(79,70,229,.18);
}

.contact-edit-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(79,70,229,.23);
}

.contact-edit-save:disabled {
  opacity: .62;
  cursor: wait;
  transform: none;
}

.contact-edit-qr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 7px;
  align-items: center;
}

.contact-edit-qr-pick {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.16);
}

.contact-edit-status {
  min-height: 16px;
  margin-top: 8px;
  color: var(--ui-legacy-secondary);
  font-size: 9px;
  line-height: 1.35;
}

.contact-edit-status.is-error {
  color: #e11d48;
}

.contact-edit-status.is-success {
  color: #059669;
}

body.dark-mode .contact-edit-section {
  border-color: rgba(100,116,139,.24);
  background: rgba(30,41,59,.42);
}

body.dark-mode .contact-edit-input {
  border-color: rgba(100,116,139,.30);
  background: rgba(15,23,42,.62);
  color: #f8fafc;
}

body.dark-mode .contact-edit-input:focus {
  border-color: rgba(129,140,248,.55);
  background: rgba(15,23,42,.82);
}

body.dark-mode .contact-edit-label,
body.dark-mode .contact-edit-status {
  color: #94a3b8;
}

body.dark-mode .contact-edit-cancel {
  color: #cbd5e1;
  background: rgba(30,41,59,.78);
  border-color: rgba(100,116,139,.28);
}

body.dark-mode .contact-edit-btn,
body.dark-mode .contact-edit-qr-pick {
  color: #a5b4fc;
  background: rgba(129,140,248,.10);
  border-color: rgba(129,140,248,.18);
}

@media (max-width: 640px) {
  .contact-edit-panel {
    padding: 13px 16px 18px;
  }
  .contact-edit-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .contact-edit-section {
    padding: 12px;
    border-radius: 16px;
  }
  .contact-edit-actions {
    position: sticky;
    bottom: 0;
    padding-top: 8px;
    background: linear-gradient(to top, rgba(255,255,255,.98) 72%, rgba(255,255,255,0));
  }
  body.dark-mode .contact-edit-actions {
    background: linear-gradient(to top, rgba(15,23,42,.98) 72%, rgba(15,23,42,0));
  }
  .contact-edit-cancel,
  .contact-edit-save {
    flex: 1;
  }
}

/* Desktop: giữ 6 card cân hàng */

@media (min-width: 768px) {
  #shelf-view > div:nth-child(2) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Contact card giống hệ card thống kê còn lại */

.contact-stat-card {
  min-height: 88px;
  justify-content: flex-start !important;
}

.contact-stat-card .contact-stat-copy {
  min-width: 0;
  flex: 1;
}

.contact-stat-card .contact-stat-title {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

.contact-stat-card .contact-stat-sub {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .10em;
  color: var(--ui-legacy-secondary);
}

/* Bỏ mũi tên riêng để card đồng bộ với các card thống kê khác */

.contact-stat-arrow {
  display: none !important;
}

body.dark-mode .contact-stat-card .contact-stat-title {
  color: #f8fafc;
}

body.dark-mode .contact-stat-card .contact-stat-sub {
  color: #94a3b8;
}

/* Mobile: Đang bán + Liên hệ nằm cùng 1 hàng, mỗi card 1 cột */

@media (max-width: 767px) {
  #shelf-view > div:nth-child(2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #shelf-view > div:nth-child(2) > .selling-stat-card,
  #shelf-view > div:nth-child(2) > .contact-stat-card {
    grid-column: auto !important;
    min-height: 96px !important;
    padding: 13px !important;
    gap: 10px !important;
  }
  #shelf-view > div:nth-child(2) > .contact-stat-card > i:first-child,
  #shelf-view > div:nth-child(2) > .selling-stat-card > i:first-child {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    font-size: 18px !important;
  }
  .contact-stat-card .contact-stat-sub {
    letter-spacing: .08em !important;
  }
}

/* Điện thoại hẹp: giữ card gọn, không tràn chữ */

@media (max-width: 390px) {
  #shelf-view > div:nth-child(2) > .selling-stat-card,
  #shelf-view > div:nth-child(2) > .contact-stat-card {
    padding: 11px !important;
    gap: 8px !important;
  }
  #shelf-view > div:nth-child(2) > .contact-stat-card > i:first-child,
  #shelf-view > div:nth-child(2) > .selling-stat-card > i:first-child {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .contact-stat-card .contact-stat-title {
    font-size: 15px !important;
  }
  .contact-stat-card .contact-stat-sub {
    font-size: 8px !important;
  }
}

#contact-modal .contact-link-btn:not(.is-empty) {
  cursor: pointer;
}

#contact-modal .contact-link-btn:not(.is-empty):active {
  transform: scale(.985);
}

#contact-modal .contact-link-btn.is-empty {
  pointer-events: none;
}

@media (max-width: 640px) {
  #contact-modal .contact-link-btn:not(.is-empty) {
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.08);
  }
}

@media (max-width: 767px) {
  #shelf-view > div:nth-child(2) > .selling-stat-card,
  #shelf-view > div:nth-child(2) > .contact-stat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  #shelf-view > div:nth-child(2) > .selling-stat-card > div,
  #shelf-view > div:nth-child(2) > .contact-stat-card > .contact-stat-copy {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Số Thanh lý ở trên, chữ THANH LÝ ở dưới */
  #shelf-view > div:nth-child(2) > .selling-stat-card #stat-selling {
    display: block !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  #shelf-view > div:nth-child(2) > .selling-stat-card #stat-selling + span {
    display: block !important;
    margin-top: 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  /* Liên hệ ở trên, THÔNG TIN ở dưới */
  .contact-stat-card .contact-stat-title {
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .contact-stat-card .contact-stat-sub {
    display: block !important;
    margin-top: 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

button:has(> i.fa-xmark),
button:has(i.fa-xmark) {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

button:has(> i.fa-xmark):hover,
button:has(i.fa-xmark):hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

button:has(> i.fa-xmark) > i,
button:has(i.fa-xmark) i.fa-xmark {
  font-size: 14px !important;
  line-height: 1 !important;
}

body.dark-mode button:has(> i.fa-xmark),
body.dark-mode button:has(i.fa-xmark) {
  border-color: rgba(100,116,139,.34) !important;
  background: transparent !important;
  color: #94a3b8 !important;
}

body.dark-mode button:has(> i.fa-xmark):hover,
body.dark-mode button:has(i.fa-xmark):hover {
  background: rgba(30,41,59,.72) !important;
  border-color: rgba(148,163,184,.44) !important;
  color: #e2e8f0 !important;
}

@media (max-width: 640px) {
  button:has(> i.fa-xmark),
  button:has(i.fa-xmark) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

#contact-modal .contact-social-list > .contact-link-btn {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 9px 11px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  flex-shrink: 1 !important;
}

#contact-modal .contact-social-list > .contact-link-btn .contact-link-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 640px) {
  #contact-modal .contact-social-list > .contact-link-btn {
    min-height: 78px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 5px !important;
  }
}

.modal-text-close {
  width: auto !important;
  min-width: 68px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: rgba(248,250,252,.92) !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  transition: background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

.modal-text-close:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

.modal-text-close:active {
  transform: scale(.98);
}

body.dark-mode .modal-text-close {
  background: rgba(30,41,59,.72) !important;
  border-color: rgba(100,116,139,.34) !important;
  color: #cbd5e1 !important;
}

body.dark-mode .modal-text-close:hover {
  background: rgba(51,65,85,.82) !important;
  border-color: rgba(148,163,184,.44) !important;
  color: #f1f5f9 !important;
}

@media (max-width: 640px) {
  .modal-text-close {
    min-width: 72px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 641px) {
  #vol-detail-modal > div:first-child {
    width: min(650px, calc(100vw - 64px)) !important;
    max-width: 650px !important;
    padding: 24px 26px 26px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }
  /* Đây là flex-row thật trong HTML */
  #vol-detail-modal > div:first-child > .flex.flex-col.sm\:flex-row {
    gap: 26px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  /* Cột ảnh chỉ rộng vừa đủ, tuyệt đối không chiếm 100% */
  #vol-detail-modal .vol-detail-media {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex: 0 0 180px !important;
  }
  #vol-detail-image-stage {
    width: 180px !important;
    height: auto !important;
    max-width: 180px !important;
    aspect-ratio: 2 / 3 !important;
  }
  #vol-detail-modal .vol-swipe-hint {
    width: 180px !important;
    max-width: 180px !important;
    margin-inline: auto !important;
  }
  /* Khối thông tin phải được phép co đúng trong phần còn lại */
  #vol-detail-modal .space-y-4.flex-1 {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #vol-detail-modal .space-y-4.flex-1 > * {
    min-width: 0 !important;
  }
}

@media (min-width: 1100px) {
  #vol-detail-modal > div:first-child {
    width: min(690px, calc(100vw - 96px)) !important;
    max-width: 690px !important;
    padding: 26px 28px 28px !important;
  }
  #vol-detail-modal > div:first-child > .flex.flex-col.sm\:flex-row {
    gap: 30px !important;
  }
  #vol-detail-modal .vol-detail-media {
    width: 195px !important;
    min-width: 195px !important;
    max-width: 195px !important;
    flex-basis: 195px !important;
  }
  #vol-detail-image-stage {
    width: 195px !important;
    max-width: 195px !important;
  }
  #vol-detail-modal .vol-swipe-hint {
    width: 195px !important;
    max-width: 195px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .volume-cover-action-label-button {
    cursor: default !important;
  }
  .volume-cover-action-label-button:hover {
    transform: translateY(-1px);
  }
  #volume-actions-popover {
    transition: opacity .14s ease,
      visibility .14s ease,
      transform .19s cubic-bezier(.16,1,.3,1) !important;
  }
}

#goods-detail-modal .goods-detail-info > div {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 14px !important;
}

#goods-detail-modal .goods-detail-info > div > :first-child {
  white-space: nowrap !important;
}

#goods-detail-modal .goods-detail-info #goods-detail-manga,
#goods-detail-modal .goods-detail-info #goods-detail-volumes,
#goods-detail-modal .goods-detail-info #goods-detail-item-name {
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#goods-detail-modal .goods-detail-info #goods-detail-manga {
  display: block !important;
  color: #4f46e5 !important;
}

body.dark-mode #goods-detail-modal .goods-detail-info #goods-detail-manga {
  color: #a5b4fc !important;
}

/* Desktop rộng: cho cột bên phải thêm không gian, tránh cắt tên truyện ngắn-vừa. */

@media (min-width: 641px) {
  #goods-detail-modal .goods-detail-info > div {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }
}

/* Mobile vẫn ưu tiên không tràn; nếu màn quá hẹp mới ellipsis thay vì xuống dòng xấu. */

@media (max-width: 640px) {
  #goods-detail-modal .goods-detail-info > div {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }
}

.goods-volume-picker {
  margin-top: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.goods-volume-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f7;
  background: #f8fafc;
}

.goods-volume-picker-head span {
  font-size: 10px;
  color: var(--ui-legacy-secondary);
}

.goods-volume-clear {
  font-size: 9px;
  color: #6366f1;
  padding: 3px 6px;
  border-radius: 7px;
}

.goods-volume-clear:hover {
  background: #eef2ff;
}

.goods-volume-options {
  max-height: 174px;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.goods-volume-option {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  transition: .15s ease;
}

.goods-volume-option:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.goods-volume-option:has(input:checked) {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.goods-volume-option input {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  flex: 0 0 auto;
}

.goods-volume-option-text {
  min-width: 0;
  color: var(--ui-text);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goods-volume-selected-summary {
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 7px 8px 0;
}

.goods-volume-selected-summary:empty {
  display: none;
}

.goods-volume-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #dbeafe;
  white-space: nowrap;
}

.goods-volume-detail-list {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.goods-volume-detail-btn {
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #dbeafe;
  font-size: 10px;
  line-height: 1.15;
  transition: .15s ease;
}

.goods-volume-detail-btn:hover {
  background: #e0e7ff;
  border-color: #c7d2fe;
}

.goods-volume-card-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

body.dark-mode .goods-volume-picker {
  background: rgba(15,23,42,.72);
  border-color: rgba(100,116,139,.30);
}

body.dark-mode .goods-volume-picker-head {
  background: rgba(30,41,59,.68);
  border-bottom-color: rgba(100,116,139,.22);
}

body.dark-mode .goods-volume-option:hover {
  background: rgba(30,41,59,.70);
  border-color: rgba(100,116,139,.30);
}

body.dark-mode .goods-volume-option:has(input:checked) {
  background: rgba(79,70,229,.18);
  border-color: rgba(129,140,248,.35);
}

body.dark-mode .goods-volume-option-text {
  color: #cbd5e1;
}

body.dark-mode .goods-volume-chip,
body.dark-mode .goods-volume-detail-btn {
  background: rgba(99,102,241,.15);
  color: #a5b4fc;
  border-color: rgba(129,140,248,.24);
}

@media (max-width: 640px) {
  .goods-volume-options {
    grid-template-columns: 1fr;
    max-height: 190px;
  }
}


.goods-volume-mobile-toggle {
  display: none;
}


.goods-volume-selected-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  color: #4f46e5;
  background: #eef2ff;
  font-size: 9px;
}


#goods-save-status {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  max-height: min(100px, 20vh);
  overflow-y: auto;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
}

#goods-save-status:empty {
  display: none;
}

#goods-save-status.is-error {
  color: #b91c1c;
}

body.dark-mode #goods-save-status {
  color: #cbd5e1;
}

body.dark-mode #goods-save-status.is-error {
  color: #fca5a5;
}


body.dark-mode .goods-volume-selected-count {
  color: #a5b4fc;
  background: rgba(99,102,241,.15);
}



@media (max-width: 640px) and (orientation: portrait) {


  .goods-volume-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 9px;
    border-radius: 9px;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #dbeafe;
    font-size: 9px;
    font-weight: 800;
  }
  .goods-volume-mobile-toggle i {
    font-size: 8px;
    transition: transform .2s ease;
  }


  body.dark-mode .goods-volume-mobile-toggle {
    color: #a5b4fc;
    background: rgba(99,102,241,.15);
    border-color: rgba(129,140,248,.24);
  }
  
}



/* Dùng system UI trước để iPhone/macOS có cảm giác tự nhiên hơn,
   Windows vẫn fallback về Segoe UI / Inter. */

#goods-detail-modal {
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif !important;
}

/* Chip tập: bớt đậm/cứng, thoáng chữ hơn */

.goods-volume-chip,
.goods-volume-detail-btn,
.goods-volume-option-text {
  letter-spacing: -0.01em !important;
}

.goods-volume-chip {
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  padding: 4px 8px !important;
}

/* Tên phụ kiện như "Vé concert": giảm độ nặng nhưng vẫn rõ */

#goods-detail-item-name {
  line-height: 1.25 !important;
}

/* Tên truyện / tập trong popup phụ kiện cũng đồng bộ */

#goods-detail-manga,
#goods-detail-volumes,
.goods-volume-detail-btn {
  letter-spacing: -0.012em !important;
}

/* Label bên trái dịu hơn, tránh cảm giác chữ kỹ thuật/cứng */

#goods-detail-modal .goods-detail-info > div > :first-child {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* Form thêm/sửa phụ kiện */

.goods-volume-picker-head span,
.goods-volume-clear {
  letter-spacing: -0.01em !important;
}

.goods-volume-selected-count {
  font-weight: 650 !important;
}

/* Mobile: chữ hơi lớn hơn một chút để vẫn mềm và dễ đọc */

@media (max-width: 640px) {
  .goods-volume-chip,
  .goods-volume-detail-btn {
    font-size: 9px !important;
  }
}

#goods-view .goods-card-title,
#detail-view .goods-card-title,
.goods-card-title,
#goods-detail-item-name {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Mobile giữ độ rõ nhưng không nặng */

@media (max-width: 640px) {
  #goods-view .goods-card-title,
  #detail-view .goods-card-title,
  .goods-card-title,
  #goods-detail-item-name {
    font-weight: 500 !important;
  }
}

/* Tailwind utility classes used throughout the app */

/* Common app headings / modal headings / card names */

h1, h2, h3, h4, h5, h6,
.modal-title,
.section-title,
.card-title,
.goods-card-title,
#goods-detail-item-name,
#manga-modal-title,
#vol-modal-title,
#goods-modal-title,
#contact-modal-title,
.selling-card-title,
.release-card-title {
  font-weight: 500 !important;
}

/* Form labels and section labels */

label,
.goods-volume-picker-head span,
.goods-volume-clear,
.goods-volume-chip,
.goods-volume-detail-btn,
.goods-volume-option-text {
  font-weight: 500 !important;
}

/* Inputs/selects sometimes carried explicit heavier weight */

input.font-medium,
select.font-medium,
button.font-medium,
.font-medium {
  font-weight: 500 !important;
}

/* Keep text modern and slightly tighter without looking heavy */

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.goods-card-title,
.modal-title {
  letter-spacing: -0.012em;
}

/* Utility font weights */

.font-semibold,
.font-bold,
.font-extrabold,
.font-black,
.font-medium {
  font-weight: 500 !important;
}

/* Toàn bộ tiêu đề / label / tên item / nút chữ trong modal & card */

h1,
h2,
h3,
h4,
h5,
h6,
label,
button:not(:has(i:only-child)),
select,
option,
.modal-title,
.section-title,
.card-title,
.goods-card-title,
.selling-card-title,
.release-card-title,
.contact-section-label,
.contact-link-name,
.contact-bank-name,
.volume-variant-title,
.volume-variant-price,
.goods-volume-option-text,
.goods-volume-chip,
.goods-volume-detail-btn,
.goods-selling-title,
.goods-selling-subtitle,
.volume-selling-badge,
.goods-selling-badge,
#goods-detail-item-name,
#goods-detail-manga,
#goods-detail-volumes,
#manga-modal-title,
#vol-modal-title,
#goods-modal-title,
#contact-modal-title,
#selling-view,
#goods-view,
#release-view {
  font-weight: 500 !important;
}

/* Các vùng editor từng có CSS riêng mạnh hơn */

#manga-modal *,
#contact-modal * {
  --soft-font-weight: 500;
}

/* Text cụ thể trong popup Chỉnh sửa truyện */

/* Danh sách truyện liên quan */

/* Popup tập / phụ kiện / các danh sách phiên bản */

#vol-detail-modal .font-bold,
#vol-detail-modal .font-semibold,
#goods-detail-modal .font-bold,
#goods-detail-modal .font-semibold,
.volume-variant-row .font-bold,
.volume-variant-row .font-semibold,
.goods-card .font-bold,
.goods-card .font-semibold {
  font-weight: 500 !important;
}

/* Tên phụ kiện ngoài card */

.goods-card-title,
#goods-view [class*="font-bold"],
#goods-view [class*="font-semibold"],
#detail-view [class*="font-bold"],
#detail-view [class*="font-semibold"] {
  font-weight: 500 !important;
}

/* Giữ số liệu lớn vẫn rõ nhưng không quá nặng */

#stat-count,
#stat-volumes,
#stat-goods,
#stat-selling,
.stat-value,
.summary-value {
  font-weight: 500 !important;
}

/* Letter spacing nhẹ hơn, hiện đại hơn */

h1,
h2,
h3,
h4,
h5,
h6,
label,
.card-title,
.goods-card-title,
.volume-variant-title,
.contact-link-name {
  letter-spacing: -0.01em !important;
}

/* =========================================================
   QUAN TRỌNG: phục hồi đúng weight Font Awesome
   ========================================================= */

.fa-solid,
.fas,
i.fa-solid,
i.fas,
button i.fa-solid,
button i.fas,
label i.fa-solid,
label i.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.fa-regular,
.far,
i.fa-regular,
i.far,
button i.fa-regular,
button i.far,
label i.fa-regular,
label i.far {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}

.fa-brands,
.fab,
i.fa-brands,
i.fab,
button i.fa-brands,
button i.fab,
label i.fa-brands,
label i.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}


/* ===== Tiêu đề chính ===== */


/* ===== Dòng mô tả ngay dưới tiêu đề ===== */


/* ===== Tiêu đề từng khối ===== */


/* Riêng tiêu đề cột tập đang viết uppercase từ HTML/CSS cũ */


/* ===== Label form ===== */


/* ===== Input / Select / trigger ===== */


/* Giá readonly vẫn có thể nổi bật bằng màu, nhưng không cần đậm */


/* ===== Mô tả / trợ giúp ===== */


/* ===== Tabs popup tập ===== */


/* ===== Toggle bán ===== */


/* ===== Truyện liên quan ===== */


/* ===== Danh sách tập trong popup phụ kiện ===== */


/* ===== Nút hành động có chữ ===== */


/* ===== Font Awesome: giữ glyph đúng ===== */


/* Mobile: cùng hệ font, chỉ thu kích thước tiêu đề nhẹ */



/* Label form: Ảnh bìa, Tên truyện, Tác giả, Dịch giả,
   Thể loại, Nhà xuất bản, Tổng số tập, Tình trạng,
   Cùng series hoặc thương hiệu... */


/* Các tiêu đề section */

/* Custom dropdown Kiểu hiển thị tập truyện */


/* Phần hướng dẫn, kể cả chữ nhấn như "Tên riêng" */


/* Truyện liên quan: tên truyện trước đây vẫn bị 700/800 */


/* Giá bán và các text được highlight bằng màu vẫn nhẹ, không cần bold */


/* Select native/options cũng cùng hệ */


/* Các thẻ strong/b còn sót trong manga editor:
   chỉ đổi chữ; Font Awesome đã được bảo vệ riêng bên dưới. */


/* Bảo vệ icon Font Awesome khỏi rule typography */


/* ===== Tiêu đề khối ===== */


/* Tiêu đề khối uppercase ở popup tập: tăng nhẹ nhưng không quá to */


/* ===== Label form chính ===== */


/* ===== Label nhóm/phụ ===== */


/* ===== Custom dropdown / lựa chọn ===== */


/* ===== Danh sách truyện liên quan / danh sách tập ===== */


/* ===== Dòng mô tả dưới label ===== */


/* ===== Input/select giữ hơi nhỏ hơn label một chút để hierarchy rõ ===== */


/* Mobile: không thu label xuống quá nhỏ */



.publisher-logo-badge.publisher-logo-wings,
.publisher-logo-badge.publisher-logo-amak {
  background: rgba(255,255,255,.94) !important;
}

.publisher-logo-badge.publisher-logo-wings img,
.publisher-logo-badge.publisher-logo-amak img,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-wings img,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-amak img,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-wings img,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-amak img {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

body.dark-mode .publisher-logo-badge.publisher-logo-wings,
body.dark-mode .publisher-logo-badge.publisher-logo-amak {
  background: rgba(255,255,255,.96) !important;
}

.publisher-logo-badge.publisher-logo-amak,
body.dark-mode .publisher-logo-badge.publisher-logo-amak {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.publisher-logo-badge.publisher-logo-amak img,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-amak img,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-amak img {
  background: transparent !important;
  padding: 0 !important;
  object-fit: contain !important;
  filter: none !important;
}

.goods-volume-card-label {
  line-height: 1.2 !important;
  text-align: left !important;
  max-width: 100% !important;
}

.goods-volume-detail-btn {
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .goods-volume-card-label {
    font-size: 9px !important;
  }
}

#detail-missing {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
}

.missing-volume-count {
  color: inherit;
}

.missing-volume-paren,
.missing-volume-separator {
  color: inherit;
}

.missing-volume-link {
  appearance: none;
  border: 0;
  padding: 0 1px;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
  transition: color .15s ease,
    background-color .15s ease,
    transform .15s ease;
}

.missing-volume-link:hover {
  color: #e11d48;
  background: rgba(244,63,94,.08);
}

.missing-volume-link:active {
  transform: scale(.95);
}

.missing-volume-link:focus-visible {
  outline: 2px solid rgba(244,63,94,.35);
  outline-offset: 2px;
}

body.dark-mode .missing-volume-link:hover {
  color: #fb7185;
  background: rgba(251,113,133,.10);
}

.missing-volume-range {
  appearance: none;
  border: 0;
  padding: 0 2px;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s ease,
    background-color .15s ease,
    transform .15s ease;
}

.missing-volume-range:hover {
  color: #e11d48;
  background: rgba(244,63,94,.08);
}

body.dark-mode .missing-volume-range:hover {
  color: #fb7185;
  background: rgba(251,113,133,.10);
}

.missing-volume-collapse {
  appearance: none;
  border: 0;
  padding: 0 3px;
  margin-left: 2px;
  background: transparent;
  color: var(--ui-legacy-caption);
  font: inherit;
  font-size: .78em;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
}

.missing-volume-collapse:hover {
  color: #e11d48;
}

@media (max-width: 640px) {
  .missing-volume-link {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }
}

#batch-import-modal {
  display: flex;
}

#batch-import-modal.hidden {
  display: none!important;
}

.batch-import-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.46);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

.batch-import-card {
  z-index: 1;
  width: min(980px,100%);
  max-height: min(830px,calc(100dvh - 30px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 85px rgba(15,23,42,.24);
}

.batch-import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eef2f7;
}

.batch-import-head h2 {
  font-size: 19px;
  line-height: 1.2;
  font-weight: 500!important;
  letter-spacing: -.016em;
  color: #0f172a;
}

.batch-import-head p {
  margin-top: 3px;
  font-size: 10px;
  color: var(--ui-legacy-caption);
}

.batch-import-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #94a3b8;
  background: transparent;
}

.batch-import-body {
  min-height: 0;
  overflow: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 14px;
}

.batch-import-source,.batch-import-preview {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #f8fafc;
}

.batch-import-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
}

.batch-import-section-title i {
  color: #6366f1;
}

.batch-import-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 9px;
}

.batch-import-file-btn {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 10px;
  font-weight: 500;
}

#batch-import-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-legacy-caption);
  font-size: 9px;
}

#batch-import-json {
  width: 100%;
  height: 280px;
  resize: vertical;
  padding: 11px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 10px;
  line-height: 1.45;
  outline: none;
}

#batch-import-json:focus {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}

.batch-import-source-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}

.batch-import-source-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  color: #64748b;
  font-size: 9.5px;
  font-weight: 500;
}

.batch-import-source-actions button.is-primary {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

.batch-import-tip {
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 10px;
  background: #eef2ff;
  color: var(--ui-legacy-secondary);
  font-size: 9px;
  line-height: 1.45;
}

.batch-import-preview-empty {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ui-legacy-caption);
}

.batch-import-preview-empty i {
  font-size: 28px;
  margin-bottom: 9px;
  color: #cbd5e1;
}

.batch-import-preview-empty strong {
  font-size: 11px;
  font-weight: 500!important;
  color: var(--ui-legacy-secondary);
}

.batch-import-preview-empty span {
  margin-top: 4px;
  font-size: 9px;
  max-width: 260px;
}

.batch-import-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.batch-import-stats>div {
  padding: 9px;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  background: #fff;
}

.batch-import-stats span {
  display: block;
  color: var(--ui-legacy-caption);
  font-size: 8.5px;
}

.batch-import-stats strong {
  display: block;
  margin-top: 2px;
  color: #334155;
  font-size: 15px;
  font-weight: 500!important;
}

.batch-import-manga-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.batch-import-manga-item {
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.batch-import-manga-name {
  color: #0f172a;
  font-size: 11px;
  font-weight: 500!important;
  line-height: 1.3;
}

.batch-import-manga-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.batch-import-manga-meta span {
  padding: 3px 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--ui-legacy-secondary);
  font-size: 8px;
}

.batch-import-status {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 9.5px;
  line-height: 1.4;
}

.batch-import-status.is-working {
  display: block!important;
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

.batch-import-status.is-success {
  display: block!important;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.batch-import-status.is-error {
  display: block!important;
  color: #be123c;
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.batch-import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px 16px;
  border-top: 1px solid #eef2f7;
}

.batch-import-safety {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ui-legacy-caption);
  font-size: 8.5px;
  line-height: 1.35;
}

.batch-import-safety i {
  color: #10b981;
}

.batch-import-footer-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.batch-import-cancel,.batch-import-confirm {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 500;
}

.batch-import-cancel {
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.batch-import-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #6366f1;
  background: #6366f1;
  color: #fff;
}

.batch-import-confirm:disabled {
  opacity: .45;
  cursor: not-allowed;
}

body.dark-mode .batch-import-card {
  border-color: rgba(100,116,139,.28);
  background: #0f172a;
}

body.dark-mode .batch-import-head,body.dark-mode .batch-import-footer {
  border-color: rgba(100,116,139,.22);
}

body.dark-mode .batch-import-head h2,body.dark-mode .batch-import-manga-name {
  color: #f8fafc;
}

body.dark-mode .batch-import-source,body.dark-mode .batch-import-preview {
  border-color: rgba(100,116,139,.24);
  background: rgba(30,41,59,.48);
}

body.dark-mode #batch-import-json,body.dark-mode .batch-import-stats>div,body.dark-mode .batch-import-manga-item {
  border-color: rgba(100,116,139,.24);
  background: rgba(15,23,42,.72);
  color: #cbd5e1;
}

body.dark-mode .batch-import-stats strong {
  color: #e2e8f0;
}

@media (max-width:700px){
  #batch-import-modal {
    align-items: flex-end;
    padding: 8px;
  }
  .batch-import-card {
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
  }
  .batch-import-head {
    padding: 15px 14px 12px;
  }
  .batch-import-body {
    display: block;
    padding: 12px;
  }
  .batch-import-preview {
    margin-top: 10px;
  }
  #batch-import-json {
    height: 220px;
  }
  .batch-import-footer {
    align-items: flex-end;
    padding: 10px 12px max(12px,env(safe-area-inset-bottom));
  }
  .batch-import-safety {
    display: none;
  }
  .batch-import-footer-actions {
    width: 100%;
  }
  .batch-import-cancel,.batch-import-confirm {
    flex: 1;
  }
}

.batch-import-tip::before {
  content: "Ảnh nhúng ✓";
  display: inline-flex;
  margin-right: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  color: #059669;
  font-size: 8px;
  font-weight: 500;
}

.publisher-logo-badge.publisher-logo-daisy {
  background: rgba(255,255,255,.95) !important;
}

/* Skycomics: giữ nền trong suốt đúng theo PNG gốc do người dùng cung cấp. */
.publisher-logo-badge.publisher-logo-skycomics,
body.dark-mode .publisher-logo-badge.publisher-logo-skycomics {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.publisher-logo-badge.publisher-logo-skycomics img {
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Chỉ dùng nền cho chữ dự phòng nếu ảnh logo không tải được. */
.publisher-logo-badge.publisher-logo-skycomics .publisher-logo-fallback {
  color: #fff !important;
  background: #10131b !important;
}


.publisher-logo-badge.publisher-logo-daisy img,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-daisy img,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-daisy img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 1px !important;
}

.goods-volume-card-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Mobile: giá trị "Còn thiếu" phải nằm chính giữa card thống kê. */

@media (max-width: 640px) {
  #detail-view > div:nth-child(2) .grid.grid-cols-2 > div:nth-child(3) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #detail-missing {
    width: 100% !important;
    min-height: 26px !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
    text-align: center !important;
    line-height: 1.25 !important;
    column-gap: 1px !important;
    row-gap: 0 !important;
    margin-top: 2px !important;
  }
  #detail-missing .missing-volume-link,
  #detail-missing .missing-volume-range {
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Có thêm nút trang đầu/cuối nên thu nhẹ kích thước để cả thanh vẫn cân trên iPhone. */
  #shelf-pagination,
  #volumes-pagination,
  #goods-pagination {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  #shelf-pagination button,
  #volumes-pagination button,
  #goods-pagination button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    flex: 0 0 32px !important;
  }
  #shelf-pagination .pagination-edge-btn,
  #volumes-pagination .pagination-edge-btn,
  #goods-pagination .pagination-edge-btn {
    width: 29px !important;
    min-width: 29px !important;
    flex-basis: 29px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }
  #shelf-pagination > span,
  #volumes-pagination > span,
  #goods-pagination > span {
    min-width: 10px !important;
    flex: 0 0 10px !important;
    padding: 0 !important;
    font-size: 10px !important;
    text-align: center !important;
  }
}

/* Desktop/tablet: nút đầu/cuối cùng ngôn ngữ thiết kế với pagination hiện tại. */

.pagination-edge-btn {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em;
}

.pagination-edge-btn:disabled {
  opacity: .38 !important;
}

#goods-category-tabs > button {
  position: relative;
}

.contact-stat-card .contact-stat-copy {
  display: flex !important;
  align-items: center !important;
  min-height: 44px;
}

.contact-stat-card .contact-stat-title {
  margin: 0 !important;
  line-height: 1.15 !important;
}

.contact-stat-card .contact-stat-sub {
  display: none !important;
}

@media (max-width: 767px) {
  #shelf-view > div:nth-child(2) > .contact-stat-card > .contact-stat-copy {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
  }
  .contact-stat-card .contact-stat-title {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }
}

.publisher-logo-badge.publisher-logo-tsuki,
body.dark-mode .publisher-logo-badge.publisher-logo-tsuki,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-tsuki,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-tsuki {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  overflow: visible !important;
}

.publisher-logo-badge.publisher-logo-tsuki img,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-tsuki img,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-tsuki img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  filter: none !important;
  opacity: 1 !important;
}

.publisher-logo-badge.publisher-logo-wings,
body.dark-mode .publisher-logo-badge.publisher-logo-wings,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-wings,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-wings {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  overflow: visible !important;
}

.publisher-logo-badge.publisher-logo-wings img,
.manga-card-cover-wrap > .publisher-logo-badge.publisher-logo-wings img,
.manga-card-list-cover > .publisher-logo-badge.publisher-logo-wings img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}

#goods-category-tabs .font-bold,
#goods-category-tabs .text-\[11px\] {
  text-rendering: optimizeLegibility;
}

/* Section: shelf-native-links-fix2 */

#manga-grid > .manga-shelf-card {
  position: relative;
  isolation: isolate;
}

#manga-grid > .manga-shelf-card > .manga-card-link {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}

#manga-grid > .manga-shelf-card > .manga-card-link:focus-visible {
  outline: 3px solid #6366f1;
  outline-offset: -4px;
}

body.dark-mode #manga-grid > .manga-shelf-card > .manga-card-link:focus-visible {
  outline-color: #a5b4fc;
}

#manga-grid > .manga-shelf-card img {
  pointer-events: none;
}

/* Section: popup-order-and-goods-editor-fix */

/* Popup vừa mở ở trên; form phụ kiện co theo viewport và chỉ cuộn phần thân. */

html.app-popup-open, body.app-popup-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

[data-app-popup][inert] {
  pointer-events: none !important;
}

/* Section: entity-links-and-popup-actions */

/* Thao tác và tên nội dung dùng chung, không đổi bố cục lưới/danh sách. */

.entity-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
}

.entity-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entity-link:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 3px;
}

.entity-link-separator {
  color: #94a3b8;
}

.entity-linked-volumes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}

.entity-linked-volumes .entity-link {
  white-space: normal;
  overflow-wrap: anywhere;
}

.entity-popup-actions {
  flex-shrink: 0;
}

.entity-action-btn.hidden {
  display: none !important;
}

body.dark-mode .entity-action-btn {
  color: #cbd5e1;
  border-color: rgba(148,163,184,.25);
}

body.dark-mode .entity-action-danger:hover {
  color: #fda4af;
}

#image-zoom-modal .entity-zoom-actions {
  border-radius: 14px;
}

#image-zoom-modal .entity-action-btn {
  color: #f8fafc;
  border-color: rgba(255,255,255,.28);
}

.release-book-card a {
  display: block;
}

@media (max-width: 640px) {
  .entity-popup-actions {
    gap: 4px;
  }
  .entity-action-btn {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  #vol-detail-modal .entity-popup-actions, #goods-detail-modal .entity-popup-actions {
    max-width: 112px;
  }
  #vol-info-manga-title, #goods-detail-manga {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .entity-linked-volumes {
    font-size: 10px;
  }
}

/* Tìm kiếm chung và QR — gọn trên desktop, dạng sheet trên mobile. */

/* One search dimming layer on portrait, landscape and desktop.
   The modal itself is excluded from the shared modal backdrop rules above. */
.global-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,13,28,.46);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.qr-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.54);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#global-search-modal,#qr-share-modal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px,8vh,72px) 12px 12px;
}

#global-search-modal.hidden,#qr-share-modal.hidden {
  display: none!important;
}

.global-search-card {
  z-index: 1;
  width: min(620px,100%);
  max-height: min(720px,calc(100dvh - 28px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(15,23,42,.28);
}

.global-search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #eef2f7;
}

/* Header của tìm kiếm luôn có vùng đệm, kể cả desktop/ngang.
   Trước đây chỉ được định dạng trong media query mobile, dẫn đến cắt chữ. */
#global-search-modal .tt-search-sheet-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 0;
  box-sizing: border-box;
  padding: 9px 16px 4px;
  text-align: center;
  color: #25334c;
}
#global-search-modal .tt-search-sheet-header strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  white-space: normal;
}
body.dark-mode #global-search-modal .tt-search-sheet-header {
  color: #f3f6ff;
}
/* Tiêu đề phụ chỉ dùng cho trình đọc màn hình, không tạo dòng dư. */
#global-search-modal #global-search-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.global-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.global-search-input-wrap>i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}

#global-search-input {
  width: 100%;
  min-height: 46px;
  padding: 0 42px;
  border: 1px solid #dbe2ea;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 15px;
  outline: none;
}

#global-search-input:focus {
  border-color: #818cf8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}

.global-search-clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.global-search-close {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #64748b;
}

.global-search-results {
  min-height: 180px;
  overflow-y: auto;
  padding: 10px 12px 14px;
}

.global-search-state {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ui-legacy-caption);
  font-size: 12px;
  gap: 8px;
}

.global-search-state i {
  font-size: 27px;
  color: #cbd5e1;
}

.global-search-section-title {
  padding: 8px 8px 5px;
  color: var(--ui-legacy-caption);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.global-search-result {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 13px;
  color: inherit;
  text-decoration: none;
}

.global-search-result:hover,.global-search-result:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.global-search-result-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef2ff;
  color: #6366f1;
}

.global-search-result[data-entity-kind="volume"] .global-search-result-icon {
  background: #fff7ed;
  color: #f59e0b;
}

.global-search-result[data-entity-kind="goods"] .global-search-result-icon {
  background: #fff1f2;
  color: #f43f5e;
}

.global-search-result-copy {
  min-width: 0;
}

.global-search-result-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
}

.global-search-result-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  color: var(--ui-legacy-caption);
  font-size: 10px;
}

.global-search-result-arrow {
  color: #cbd5e1;
  font-size: 11px;
}

.global-search-footer {
  padding: 9px 14px;
  border-top: 1px solid #eef2f7;
  color: var(--ui-legacy-caption);
  font-size: 9px;
  text-align: center;
}

#qr-share-modal {
  align-items: center;
  padding: 14px;
}

.qr-share-card {
  z-index: 1;
  width: min(390px,100%);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(15,23,42,.28);
}

.qr-share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 13px;
  border-bottom: 1px solid #eef2f7;
}

.qr-share-head h2 {
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
}

.qr-share-head p {
  margin-top: 3px;
  color: var(--ui-legacy-caption);
  font-size: 10px;
  line-height: 1.4;
}

.qr-share-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  color: #64748b;
}

.qr-share-body {
  padding: 18px;
}

#qr-share-code {
  width: 246px;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
}

#qr-share-code img,#qr-share-code canvas {
  max-width: 100%;
  height: auto!important;
}

.qr-share-url {
  margin-top: 12px;
  padding: 9px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ui-legacy-secondary);
  font-size: 9px;
  text-align: center;
}

.qr-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.qr-share-actions button {
  min-height: 39px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
}

.qr-share-actions .is-primary {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

body.dark-mode .global-search-card,body.dark-mode .qr-share-card {
  border-color: rgba(100,116,139,.28);
  background: #0f172a;
}

body.dark-mode #global-search-input,body.dark-mode .qr-share-url {
  border-color: #334155;
  background: #111827;
  color: #f8fafc;
}

body.dark-mode .global-search-head,body.dark-mode .global-search-footer,body.dark-mode .qr-share-head {
  border-color: rgba(100,116,139,.24);
}

body.dark-mode .global-search-result:hover,body.dark-mode .global-search-result:focus-visible {
  background: #1e293b;
}

body.dark-mode .global-search-result-title,body.dark-mode .qr-share-head h2 {
  color: #f8fafc;
}

@media (max-width:760px){
  #global-search-modal {
    align-items: flex-end;
    padding: 8px;
  }
  .global-search-card {
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
  }
}

@media (max-width:520px){
  #qr-share-code {
    width: 230px;
  }
}

/* Trang Tủ Truyện mới: poster điện ảnh và viền tối giản. */

:root {
  --detail-accent: #6366f1;
  --detail-accent-rgb: 99,102,241;
  --detail-accent-soft: rgba(99,102,241,.18)

;}

/* Card ngoài Tủ: ảnh 2:3, thông tin căn giữa và giá luôn nằm cuối. */

#manga-grid>.manga-shelf-card {
  border: 0!important;
  background: var(--ui-surface-solid)!important;
  box-shadow: 0 10px 30px rgba(30,41,59,.09)!important;
  animation: shelfCardIn .42s both;
  animation-delay: calc(min(var(--card-index,0),10)*35ms);
}

#manga-grid>.manga-shelf-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(30,41,59,.15)!important;
}

.manga-card-cover-wrap:not(.manga-card-list-cover) {
  height: auto!important;
  aspect-ratio: 2/3;
  margin-bottom: 11px!important;
}

#detail-cover-container>[class*="complete"],.manga-card-cover-wrap>[class*="complete"],#detail-cover-container>[data-status="complete"],.manga-card-cover-wrap>[data-status="complete"] {
  display: none!important;
}

.manga-card-info {
  align-items: center!important;
  text-align: center!important;
  gap: 7px!important;
}

.manga-card-title {
  min-height: 2.7em;
  text-align: center!important;
  padding: 0!important;
  font-size: 13px!important;
  line-height: 1.35!important;
  letter-spacing: -.02em!important;
}

.manga-card-meta-panel {
  flex: 1;
  margin: 0!important;
  padding: 0!important;
  border: 0!important;
  border-radius: 0!important;
  background: transparent!important;
  box-shadow: none!important;
  gap: 7px!important;
}

.manga-card-meta-line,.manga-card-mini-row {
  justify-content: center!important;
}

.manga-card-meta-line {
  font-size: 9.5px!important;
}

.manga-card-mini-row {
  gap: 5px!important;
}

.manga-card-rating-chip,.manga-card-volume-chip {
  min-height: 23px!important;
  padding: 3px 6px!important;
}

.manga-card-price-panel {
  margin-top: auto!important;
  min-height: 34px!important;
  max-width: 100%!important;
  padding: 7px 9px!important;
  justify-content: center!important;
  border: 0!important;
  border-radius: 10px!important;
  background: linear-gradient(135deg,rgba(16,185,129,.10),rgba(99,102,241,.045))!important;
  box-sizing: border-box!important;
  overflow: hidden!important;
}

.manga-card-progress {
  width: 100%;
  margin-top: 1px;
}

.manga-card-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--ui-legacy-caption);
  font-size: 8px;
  font-weight: 750;
}

.manga-card-progress-copy strong {
  color: var(--ui-legacy-secondary);
  font-size: 8px;
}

.manga-card-progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.18);
}

.manga-card-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6366f1,#a855f7);
  transition: width .65s cubic-bezier(.2,.8,.2,1);
}

.manga-card-list-info {
  align-items: stretch!important;
}

.manga-card-list-info .manga-card-title {
  text-align: left!important;
}

.manga-card-list-info .manga-card-meta-panel {
  display: grid!important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 6px 12px!important;
}

.manga-card-list-info .manga-card-meta-line {
  grid-column: 1;
  justify-content: flex-start!important;
}

.manga-card-list-info .manga-card-mini-row {
  grid-column: 1;
  justify-content: flex-start!important;
}

.manga-card-list-info .manga-card-progress {
  grid-column: 1;
}

.manga-card-list-info .manga-card-price-panel {
  grid-column: 2;
  grid-row: 1/4;
  align-self: stretch;
  min-width: 145px;
}

/* Trang chi tiết kiểu poster */

#detail-view {
  --detail-accent: #6366f1;
  --detail-accent-rgb: 99,102,241;
  --detail-accent-soft: rgba(99,102,241,.18)

;}

#detail-view>#detail-poster-hero.detail-poster-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 390px;
  border: 0!important;
  border-radius: 30px!important;
  background: #111827!important;
  color: #fff;
  box-shadow: 0 28px 72px rgba(15,23,42,.26)!important;
  animation: posterReveal .5s both;
}

.detail-poster-backdrop {
  position: absolute;
  z-index: -3;
  inset: -35px;
  background-position: center;
  background-size: cover;
  filter: blur(30px) saturate(1.25);
  opacity: .58;
  transform: scale(1.12);
  transition: background-image .35s ease,opacity .35s ease;
}

.detail-poster-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg,rgba(8,15,29,.94) 0%,rgba(8,15,29,.78) 48%,rgba(8,15,29,.50) 100%),linear-gradient(0deg,rgba(var(--detail-accent-rgb),.23),transparent 54%);
}

.detail-poster-content {
  position: relative;
  display: grid;
  grid-template-columns: clamp(210px,26vw,270px) minmax(0,1fr);
  gap: 26px;
  align-items: stretch;
  padding: 30px;
}

.detail-poster-cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 390px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20)!important;
  border-radius: 20px!important;
  color: #fff;
  font-size: 46px;
  cursor: zoom-in;
  box-shadow: 0 24px 55px rgba(0,0,0,.42)!important;
  transition: transform .25s ease,box-shadow .25s ease;
}

.detail-poster-cover:hover {
  transform: translateY(-4px) rotate(-.35deg);
  box-shadow: 0 30px 64px rgba(0,0,0,.50)!important;
}

.detail-poster-copy {
  min-width: 0;
  text-align: left;
}

.detail-poster-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
  color: rgba(255,255,255,.68);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#detail-title {
  color: #fff!important;
  font-size: clamp(25px,4vw,43px)!important;
  line-height: 1.03!important;
  letter-spacing: -.05em!important;
  text-wrap: balance;
}

.detail-people-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 9px;
  color: rgba(255,255,255,.75);
}

#detail-author {
  color: #fff!important;
}

#detail-translator {
  color: rgba(255,255,255,.56)!important;
}

#detail-genre {
  margin-top: 12px!important;
}

#detail-genre>* {
  border: 1px solid rgba(255,255,255,.14)!important;
  background: rgba(255,255,255,.10)!important;
  color: #fff!important;
  backdrop-filter: blur(10px);
}

.detail-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.detail-badge-row>span {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 999px!important;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.detail-badge-row>span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));
  opacity: .9;
  pointer-events: none;
}

/* Bộ 3 badge dùng ba màu riêng nhưng cùng độ trong/độ sáng để giữ tổng thể cân đối. */

#detail-status {
  --badge-rgb: 124,107,232;
  border: 1px solid rgba(167,155,255,.42)!important;
  background: linear-gradient(135deg,rgba(124,107,232,.88),rgba(99,86,207,.72))!important;
  color: #fff!important;
  text-shadow: 0 1px 0 rgba(15,23,42,.16);
  box-shadow: 0 10px 24px rgba(99,86,207,.22), inset 0 1px 0 rgba(255,255,255,.18)!important;
}

/* v673 — Một bộ icon ngữ nghĩa dùng chung cho 7 tình trạng của bộ truyện.
   Ngừng mua có nét chéo trên xe đẩy; không sửa ảnh, layout card hay nút chức năng. */
.tt-status-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  line-height: 1;
  vertical-align: middle;
  margin-right: .25em;
}
.tt-status-icon i { font-size: 1em; line-height: 1; }
/* v678 – Phương án B: chỉ đổi màu ký hiệu tình trạng, không nền tròn.
   Tông màu dùng chung tại card Tủ Truyện và trang chi tiết. */
.tt-status-icon--pending { color: #c18a20; }       /* Chưa phát hành: vàng hổ phách */
.tt-status-icon--publishing { color: #159d86; }    /* Đang phát hành: xanh ngọc */
.tt-status-icon--paused { color: #d47824; }        /* Tạm dừng: cam */
.tt-status-icon--completed { color: #20985f; }     /* Đã hoàn thành: xanh lá */
.tt-status-icon--discontinued { color: #df4e69; }  /* Ngừng phát hành: đỏ hồng */
.tt-status-icon--stop-buy { color: #8b65dd; }      /* Ngừng mua: tím (giữ nét chéo) */
.tt-status-icon--sold { color: #5181be; }          /* Đã bán: xanh dương */

/* Nền tím của badge chi tiết cần biểu tượng sáng hơn để vẫn dễ nhìn;
   không đổi màu khung/chữ hoặc Liquid Glass. */
#detail-status > .tt-status-icon--pending { color: #ffe6a0; }
#detail-status > .tt-status-icon--publishing { color: #a6ffe6; }
#detail-status > .tt-status-icon--paused { color: #ffddb5; }
#detail-status > .tt-status-icon--completed { color: #baf4cf; }
#detail-status > .tt-status-icon--discontinued { color: #ffe1e8; }
#detail-status > .tt-status-icon--stop-buy { color: #eee0ff; }
#detail-status > .tt-status-icon--sold { color: #cce6ff; }
#detail-status > .tt-status-icon {
  text-shadow: 0 1px 2px rgba(24, 18, 65, .55);
}
/* Trong nền tối, màu sáng giúp icon còn rõ khi card được phủ kính. */
body.dark-mode #shelf-view .tt-status-icon--pending { color: #f1c15f; }
body.dark-mode #shelf-view .tt-status-icon--publishing { color: #5ce5c8; }
body.dark-mode #shelf-view .tt-status-icon--paused { color: #ffad69; }
body.dark-mode #shelf-view .tt-status-icon--completed { color: #7ee6a8; }
body.dark-mode #shelf-view .tt-status-icon--discontinued { color: #ff879c; }
body.dark-mode #shelf-view .tt-status-icon--stop-buy { color: #c3a8ff; }
body.dark-mode #shelf-view .tt-status-icon--sold { color: #9ac5f8; }

.tt-status-icon--stop-buy::after {
  content: "";
  position: absolute;
  left: 1%;
  top: 48%;
  width: 100%;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(15,23,42,.25);
  transform: rotate(-43deg);
  pointer-events: none;
}
#detail-status { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
#detail-status > .tt-status-icon { margin-right: 3px; }
#shelf-view #manga-grid .manga-card-progress-status .tt-status-icon { margin-right: 2px; font-size: .92em; }

#detail-volumes-badge {
  --badge-rgb: 54,166,151;
  border: 1px solid rgba(103,211,192,.34)!important;
  background: linear-gradient(135deg,rgba(54,166,151,.28),rgba(38,128,119,.18))!important;
  color: #dffbf5!important;
  text-shadow: 0 1px 0 rgba(8,47,43,.20);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 10px 22px rgba(28,120,108,.11), inset 0 1px 0 rgba(255,255,255,.11)!important;
}

#detail-release-duration {
  --badge-rgb: 203,157,78;
  border: 1px solid rgba(229,190,119,.34)!important;
  background: linear-gradient(135deg,rgba(203,157,78,.27),rgba(157,119,56,.17))!important;
  color: #fff1d3!important;
  text-shadow: 0 1px 0 rgba(74,48,14,.18);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  box-shadow: 0 10px 22px rgba(126,91,37,.10), inset 0 1px 0 rgba(255,255,255,.11)!important;
}

/* v676: Portrait uses compact time by default, but shows full month/day
   names when the existing three-badge row has room. Landscape stays unchanged. */
#detail-release-duration .detail-release-duration-compact,
#detail-release-duration .detail-release-duration-readable { display: none; }

@media (max-width: 800px) and (orientation: portrait) {
  #detail-release-duration .detail-release-duration-full { display: none; }
  #detail-release-duration .detail-release-duration-compact {
    display: inline;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  #detail-release-duration.is-readable-duration .detail-release-duration-compact { display: none; }
  #detail-release-duration.is-readable-duration .detail-release-duration-readable {
    display: inline;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  #detail-view #detail-poster-hero #detail-release-duration {
    white-space: nowrap !important;
  }
}

#detail-volumes-badge:hover,
#detail-release-duration:hover,
#detail-status:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(var(--badge-rgb),.18), inset 0 1px 0 rgba(255,255,255,.15)!important;
}

.detail-collection-progress {
  width: min(100%,620px);
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  background: rgba(15,23,42,.30);
  backdrop-filter: blur(14px);
}

.detail-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255,255,255,.68);
  font-size: 9px;
  font-weight: 800;
}

.detail-progress-head strong {
  color: #fff;
  font-size: 11px;
}

.detail-progress-track {
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
}

.detail-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--detail-accent),#fff);
  box-shadow: 0 0 16px rgba(var(--detail-accent-rgb),.5);
  transition: width .75s cubic-bezier(.2,.8,.2,1);
}

.detail-collection-progress p {
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-size: 9px;
  line-height: 1.45;
}

.detail-poster-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
  margin-top: 14px;
}

.detail-poster-stats>div {
  min-width: 0;
  padding: 9px 10px;
  border: 0!important;
  border-radius: 12px;
  background: rgba(255,255,255,.085)!important;
  backdrop-filter: blur(10px);
}

.detail-poster-stats span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.54)!important;
  font-size: 8px;
  font-weight: 750;
}

.detail-poster-stats strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff!important;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.detail-poster-hero .detail-price-summary {
  width: 100%;
  max-width: none;
  margin-top: 10px!important;
  border: 0!important;
  background: rgba(255,255,255,.085)!important;
}

.detail-poster-hero .detail-price-summary-main {
  border-right-color: rgba(255,255,255,.12)!important;
}

.detail-poster-hero .detail-price-summary-label {
  color: rgba(255,255,255,.48);
}

.detail-poster-hero .detail-total-cover-price {
  color: rgba(255,255,255,.45);
}

.detail-poster-hero.is-loading .detail-poster-copy>* {
  position: relative;
  overflow: hidden;
  opacity: .42;
}

.detail-poster-hero.is-loading .detail-poster-copy>*::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  animation: skeletonSweep 1.2s infinite;
  animation-play-state: var(--tt-animation-state,running) !important;
}

/* Nền mờ của toàn bộ phần bên dưới, dùng cùng ảnh bìa và màu nhấn với poster. */

.detail-lower-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 18px;
  border: 0;
  border-radius: 30px;
  background: #111827;
  box-shadow: 0 28px 72px rgba(15,23,42,.26);
}

.detail-lower-panel::before,.detail-lower-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
}

.detail-lower-panel::before {
  z-index: 0;
  inset: -35px;
  background-image: var(--detail-lower-cover,none);
  background-position: center;
  background-size: cover;
  filter: blur(30px) saturate(1.25);
  opacity: .58;
  transform: scale(1.12);
  transition: background-image .35s ease,opacity .35s ease;
}

.detail-lower-panel::after {
  z-index: 0;
  background: linear-gradient(90deg,rgba(8,15,29,.94) 0%,rgba(8,15,29,.78) 48%,rgba(8,15,29,.50) 100%),linear-gradient(0deg,rgba(var(--detail-accent-rgb),.23),transparent 54%);
}

.detail-lower-panel>* {
  position: relative;
  z-index: 1;
}

/* Tabs và bảng thông tin */

.detail-tabs-shell {
  border: 1px solid rgba(255,255,255,.11)!important;
  border-radius: 17px;
  background: rgba(15,23,42,.30);
  box-shadow: 0 9px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.detail-tabs-shell nav {
  width: fit-content;
  padding: 5px;
  border: 0;
  border-radius: 15px;
  background: rgba(255,255,255,.04);
}

#tab-btn-volumes,#tab-btn-goods,#tab-btn-info {
  border: 0!important;
  border-radius: 11px!important;
  padding: 9px 14px!important;
}

.detail-tabs-shell #tab-btn-volumes,.detail-tabs-shell #tab-btn-goods,.detail-tabs-shell #tab-btn-info {
  color: rgba(255,255,255,.70)!important;
}

#tab-btn-volumes.border-indigo-600,#tab-btn-goods.border-amber-500,#tab-btn-info.is-active {
  background: var(--ui-surface-solid)!important;
  color: var(--detail-accent)!important;
  box-shadow: 0 5px 15px rgba(51,65,85,.09)!important;
}

#tab-content-volumes:not(.hidden),#tab-content-goods:not(.hidden),#tab-content-info:not(.hidden) {
  animation: tabContentIn .25s both;
}

#detail-filter-toolbar {
  border: 1px solid rgba(255,255,255,.11)!important;
  background: rgba(15,23,42,.30)!important;
  box-shadow: 0 12px 34px rgba(0,0,0,.11)!important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#related-manga-section {
  border-color: rgba(255,255,255,.11)!important;
  background: rgba(15,23,42,.30)!important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#related-manga-section h3 {
  color: #fff!important;
}

#related-manga-section p {
  color: rgba(255,255,255,.76)!important;
}

.detail-info-panel {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background: rgba(15,23,42,.30);
  box-shadow: 0 15px 42px rgba(0,0,0,.11);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.detail-info-grid article {
  min-width: 0;
  padding: 14px;
  border: 0;
  border-radius: 15px;
  background: rgba(148,163,184,.075);
}

.detail-info-grid article>i {
  margin-bottom: 10px;
  color: var(--detail-accent);
  font-size: 16px;
}

.detail-info-grid span,.detail-info-grid strong {
  display: block;
}

.detail-info-grid span {
  color: var(--ui-legacy-caption);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.detail-info-grid strong {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.detail-story {
  margin-top: 12px;
  padding: 16px;
  border-radius: 17px;
  background: rgba(148,163,184,.075);
}

.detail-story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.detail-story-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 900;
}

.detail-story-title i {
  color: var(--detail-accent);
}

.detail-story-edit {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--detail-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(var(--detail-accent-rgb),.2);
}

.detail-story-content {
  min-height: 76px;
  color: var(--ui-text-soft);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.detail-story-content.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-legacy-caption);
  font-style: italic;
  text-align: center;
}

.manga-description-control {
  min-height: 116px;
  resize: vertical;
  line-height: 1.55;
}

.detail-info-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 15px;
  background: linear-gradient(135deg,rgba(var(--detail-accent-rgb),.12),rgba(168,85,247,.06));
  color: var(--ui-text-soft);
  font-size: 11px;
  line-height: 1.55;
}

.detail-info-message>i {
  margin-top: 2px;
  color: var(--detail-accent);
}

.detail-lower-panel .detail-info-grid strong,.detail-lower-panel .detail-story-title {
  color: #f8fafc;
}

.detail-lower-panel .detail-story-content,.detail-lower-panel .detail-info-message {
  color: rgba(255,255,255,.70);
}

/* Viền tối giản cho các vùng chính. */

#shelf-view>div:nth-child(2)>div,#shelf-view>div:has(> #search-input),#related-manga-section,.detail-tabs-shell nav {
  border-color: transparent!important;
}

body.dark-mode .manga-card-progress-copy strong {
  color: #cbd5e1;
}

body.dark-mode .manga-card-price-panel {
  background: linear-gradient(135deg,rgba(16,185,129,.12),rgba(99,102,241,.09))!important;
}

body.dark-mode .detail-tabs-shell,body.dark-mode #detail-filter-toolbar,body.dark-mode #related-manga-section,body.dark-mode .detail-info-panel {
  border-color: rgba(255,255,255,.11)!important;
  background: rgba(15,23,42,.30)!important;
}

body.dark-mode .detail-info-grid article,body.dark-mode .detail-story {
  background: rgba(148,163,184,.08);
}

@keyframes shelfCardIn{
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes posterReveal{
  from {
    opacity: 0;
    transform: translateY(12px) scale(.992);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tabContentIn{
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes skeletonSweep{
  to {
    transform: translateX(110%);
  }
}

@media (max-width:760px){
  #detail-view>#detail-poster-hero.detail-poster-hero {
    border-radius: 23px!important;
  }
  .detail-poster-content {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 20px 16px;
  }
  .detail-poster-cover {
    width: 150px;
    height: auto;
    min-height: 0;
    aspect-ratio: 2/3;
    margin: 0 auto;
  }
  .detail-poster-copy {
    text-align: center;
  }
  .detail-poster-eyebrow,.detail-people-row,.detail-badge-row,#detail-genre {
    justify-content: center;
  }
  .detail-collection-progress {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .detail-poster-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .detail-poster-hero .detail-price-summary {
    margin-left: auto!important;
    margin-right: auto!important;
  }
  .detail-lower-panel {
    gap: 17px;
    padding: 13px;
    border-radius: 23px;
  }
  .detail-tabs-shell nav {
    width: max-content;
    min-width: 100%;
  }
  .detail-info-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .manga-card-list-info .manga-card-meta-panel {
    display: flex!important;
  }
  .manga-card-list-info .manga-card-price-panel {
    min-width: 0;
    width: fit-content!important;
    align-self: flex-start;
  }
}

@media (max-width:520px){
  .manga-card-title {
    font-size: 11px!important;
  }
  .manga-card-sale-price {
    font-size: 11px!important;
  }
  .manga-card-cover-price {
    font-size: 8px!important;
  }
  .manga-card-meta-line {
    font-size: 8.5px!important;
  }
  .manga-card-progress-copy {
    font-size: 7.5px;
  }
  .detail-poster-content {
    padding: 18px 12px;
  }
  .detail-poster-cover {
    width: 138px;
  }
  .detail-badge-row {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .detail-badge-row>span {
    padding-left: 8px!important;
    padding-right: 8px!important;
    font-size: 10px!important;
  }
  #detail-release-duration {
    font-size: 9px!important;
  }
  .detail-poster-stats {
    gap: 6px;
  }
  .detail-poster-stats>div {
    padding: 8px;
  }
  .detail-info-panel {
    padding: 12px;
  }
  .detail-info-grid {
    gap: 7px;
  }
  .detail-info-grid article {
    padding: 11px;
  }
  .detail-info-message {
    padding: 12px;
  }
}

/* Giá card Tủ Truyện trên điện thoại dọc: hai mức giá là một cụm cân giữa,
   giá bán nổi bật hơn nhưng không được chiếm hết panel. */
@media (orientation: portrait) and (max-width: 640px) {
  #shelf-view #manga-grid:not(.shelf-list-layout) .manga-card-price-panel {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 6px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  #shelf-view #manga-grid:not(.shelf-list-layout) .manga-card-sale-price {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 60% !important;
    font-size: clamp(12.5px, 3.5vw, 15px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #shelf-view #manga-grid:not(.shelf-list-layout) .manga-card-cover-price {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 34% !important;
    font-size: clamp(7.5px, 2.15vw, 9.5px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #manga-grid>.manga-shelf-card,.detail-poster-hero,#tab-content-volumes:not(.hidden),#tab-content-goods:not(.hidden),#tab-content-info:not(.hidden) {
    animation: none!important;
  }
  .manga-card-cover-wrap>img,.detail-progress-track span,.manga-card-progress-track span {
    transition: none!important;
  }
}

/* Liquid Glass: kính thật sự xuyên nền, có vùng sữa mỏng và mép bắt sáng. */

:root {
  --glass-panel: rgba(255,255,255,.025);
  --glass-panel-strong: rgba(255,255,255,.46);
  --glass-control: rgba(255,255,255,.24);
  --glass-inner-bg: rgba(255,255,255,.13);
  --glass-inner-strong: rgba(255,255,255,.22);
  --glass-border: rgba(255,255,255,.70);
  --glass-border-soft: rgba(255,255,255,.42);
  --glass-panel-bg: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.010) 48%,transparent 90%);
  --glass-card-bg: linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.008) 45%,transparent 90%);
  --home-glass-panel-bg: linear-gradient(145deg,rgba(255,255,255,.036),rgba(255,255,255,.007) 50%,transparent 90%);
  --home-glass-card-bg: linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.006) 50%,transparent 92%);
  --glass-modal-bg: linear-gradient(145deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.018) 42%,transparent 92%);
  --glass-shadow: 0 24px 64px rgba(30,41,59,.14),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.26);
  --glass-card-shadow: 0 14px 36px rgba(30,41,59,.11),inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(255,255,255,.20);
  --glass-filter: blur(30px) saturate(1.48) brightness(1.04);
  --glass-card-filter: blur(20px) saturate(1.36) brightness(1.03);
  --ui-surface: var(--glass-panel);
  --ui-surface-solid: var(--glass-panel-strong);
  --ui-surface-soft: var(--glass-control);
}

body.dark-mode {
  --glass-panel: rgba(255,255,255,.018);
  --glass-panel-strong: rgba(16,28,49,.38);
  --glass-control: rgba(255,255,255,.045);
  --glass-inner-bg: rgba(255,255,255,.028);
  --glass-inner-strong: rgba(255,255,255,.055);
  --glass-border: rgba(255,255,255,.24);
  --glass-border-soft: rgba(255,255,255,.13);
  --glass-panel-bg: linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.006) 50%,transparent 92%);
  --glass-card-bg: linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.004) 50%,transparent 92%);
  --home-glass-panel-bg: linear-gradient(145deg,rgba(255,255,255,.023),rgba(255,255,255,.004) 50%,transparent 92%);
  --home-glass-card-bg: linear-gradient(145deg,rgba(255,255,255,.020),rgba(255,255,255,.003) 48%,transparent 92%);
  --glass-modal-bg: linear-gradient(145deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.008) 40%,transparent 90%);
  --glass-shadow: 0 28px 76px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.055);
  --glass-card-shadow: 0 16px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(255,255,255,.04);
}

/* Nền môi trường có màu để các mặt kính ở trang chính thật sự nhìn thấy độ xuyên và blur. */

body:not(.dark-mode) {
  background: radial-gradient(ellipse 52% 38% at 3% 4%,rgba(16,185,129,.30),transparent 70%),
    radial-gradient(ellipse 48% 42% at 96% 7%,rgba(124,58,237,.28),transparent 70%),
    radial-gradient(ellipse 44% 36% at 14% 63%,rgba(236,72,153,.19),transparent 72%),
    radial-gradient(ellipse 50% 38% at 82% 86%,rgba(14,165,233,.23),transparent 72%),
    linear-gradient(145deg,#edf3fb 0%,#f8fafc 48%,#eef2ff 100%)!important;
  background-attachment: fixed!important;
}

body.dark-mode {
  background: radial-gradient(ellipse 55% 40% at 2% 3%,rgba(16,185,129,.18),transparent 69%),
    radial-gradient(ellipse 50% 43% at 98% 5%,rgba(124,58,237,.23),transparent 69%),
    radial-gradient(ellipse 46% 38% at 12% 64%,rgba(219,39,119,.12),transparent 72%),
    radial-gradient(ellipse 52% 40% at 84% 88%,rgba(14,165,233,.18),transparent 72%),
    radial-gradient(ellipse 42% 30% at 52% 42%,rgba(99,102,241,.10),transparent 74%),
    linear-gradient(145deg,#060d19 0%,#0a1222 48%,#11142e 100%)!important;
  background-attachment: fixed!important;
}

/* Quầng màu nằm ngay sau lưới: màu phải xuyên qua từng card, không chỉ lộ ở khe trống. */

#shelf-view#shelf-view #manga-grid {
  position: relative;
  isolation: isolate;
}

#shelf-view#shelf-view #manga-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -55px -28px;
  pointer-events: none;
  background-image: radial-gradient(circle 270px at 5% 9%,rgba(16,185,129,.24),transparent 72%),
    radial-gradient(circle 310px at 35% 30%,rgba(168,85,247,.22),transparent 72%),
    radial-gradient(circle 270px at 66% 12%,rgba(236,72,153,.17),transparent 72%),
    radial-gradient(circle 320px at 95% 35%,rgba(14,165,233,.25),transparent 72%),
    radial-gradient(circle 300px at 14% 78%,rgba(244,63,94,.16),transparent 72%),
    radial-gradient(circle 330px at 61% 88%,rgba(59,130,246,.22),transparent 72%),
    var(--shelf-glass-art-1,none),
    var(--shelf-glass-art-2,none),
    var(--shelf-glass-art-3,none),
    var(--shelf-glass-art-4,none);
  background-position: center,center,center,center,center,center,
    0 20px,34% 190px,68% 40px,100% 230px;
  background-size: auto,auto,auto,auto,auto,auto,
    29% 430px,29% 470px,29% 440px,29% 480px;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,
    repeat-y,repeat-y,repeat-y,repeat-y;
  background-blend-mode: screen,screen,screen,screen,screen,screen,soft-light,soft-light,soft-light,soft-light;
  filter: blur(68px) saturate(1.08) brightness(.48);
  opacity: .34;
  transform: translateZ(0);
}

#shelf-view#shelf-view #manga-grid>.manga-shelf-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
}

#shelf-view#shelf-view #manga-grid>.manga-shelf-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.052),transparent 27% 70%,rgba(129,140,248,.025));
}

body:not(.dark-mode) #shelf-view#shelf-view #manga-grid::before {
  opacity: .44;
  filter: blur(60px) saturate(1.28) brightness(1.05);
}

/* Các panel chính. */

.app-global-header-card,
#shelf-view>div:nth-child(2)>div,
#shelf-view>div:has(> #search-input),
#goods-view .goods-summary-cards>div,
#goods-view .goods-category-section,
.selling-summary-hero,
.selling-summary-count-card,
.selling-summary-tabs,
#spending-view .spending-filterbar,
#spending-view .spending-summary-grid>.spending-stat-card,
#spending-content-box,
.release-day-group {
  border: 1px solid var(--glass-border)!important;
  background: var(--glass-panel-bg)!important;
  box-shadow: var(--glass-shadow)!important;
  -webkit-backdrop-filter: var(--glass-filter)!important;
  backdrop-filter: var(--glass-filter)!important;
}

/* Release shell must not establish a containing block: its toolbar is viewport-fixed on phone portrait. */
.release-shell {
  border: 1px solid var(--glass-border)!important;
  background: var(--glass-panel-bg)!important;
  box-shadow: var(--glass-shadow)!important;
  -webkit-backdrop-filter: none!important;
  backdrop-filter: none!important;
}

/* Card nội dung: trong nhẹ hơn panel để ảnh và chữ vẫn nổi. */

#manga-grid>.manga-shelf-card,
#volumes-grid>div,
#goods-grid>div,
.selling-card,
.release-book-card,
#goods-category-tabs>button {
  border: 1px solid var(--glass-border)!important;
  background: var(--glass-card-bg)!important;
  box-shadow: var(--glass-card-shadow)!important;
  -webkit-backdrop-filter: var(--glass-card-filter)!important;
  backdrop-filter: var(--glass-card-filter)!important;
}

#manga-grid>.manga-shelf-card:hover,
#volumes-grid>div:hover,
#goods-grid>div:hover,
.selling-card:hover,
.release-book-card:hover,
#goods-category-tabs>button:not(:disabled):hover {
  border-color: rgba(129,140,248,.38)!important;
  box-shadow: 0 22px 48px rgba(67,56,202,.16),inset 0 1px 0 rgba(255,255,255,.60)!important;
}

/* Điều khiển phụ cũng là kính; các nút màu chính vẫn giữ gradient nhận diện. */

.app-global-header-card>div:last-child>button:not(:nth-child(2)),
.app-global-header-card #auth-login-btn,
.app-global-header-card #auth-user-box,
.compact-icon-btn,
.release-icon-btn,
.release-period-select,
.release-publisher-wrap,
.release-month-total,
.goods-selling-filter,
.pretty-select-trigger,
.qr-share-actions button:not(.is-primary),
.global-search-close {
  border-color: var(--glass-border)!important;
  background: var(--glass-control)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 7px 20px rgba(30,41,59,.07)!important;
  -webkit-backdrop-filter: blur(13px) saturate(1.15)!important;
  backdrop-filter: blur(13px) saturate(1.15)!important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.pretty-select-trigger,
.qr-share-url {
  border-color: var(--glass-border-soft)!important;
  background: var(--glass-control)!important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
}

.pretty-select-portal {
  border-color: var(--glass-border)!important;
  background: var(--glass-modal-bg)!important;
  box-shadow: var(--glass-shadow)!important;
  -webkit-backdrop-filter: blur(24px) saturate(1.22)!important;
  backdrop-filter: blur(24px) saturate(1.22)!important;
}

/* Popup: lớp kính đậm hơn panel thường để biểu mẫu luôn dễ đọc. */

[id$="-modal"].fixed.inset-0:not(:where(#global-search-modal)) {
  background: rgba(5,10,22,.18)!important;
  -webkit-backdrop-filter: blur(15px) saturate(1.22)!important;
  backdrop-filter: blur(15px) saturate(1.22)!important;
}

[id$="-modal"].fixed.inset-0>.bg-white,
.batch-import-card,
.contact-modal-card,
.global-search-card,
.qr-share-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-border)!important;
  background: var(--glass-modal-bg)!important;
  box-shadow: 0 36px 100px rgba(5,10,22,.38),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.055)!important;
  -webkit-backdrop-filter: blur(42px) saturate(1.62) brightness(1.08)!important;
  backdrop-filter: blur(42px) saturate(1.62) brightness(1.08)!important;
}

[id$="-modal"].fixed.inset-0>.bg-white::before,
.batch-import-card::before,
.contact-modal-card::before,
.global-search-card::before,
.qr-share-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(75% 34% at 18% 0%,rgba(255,255,255,.22),transparent 72%),
    linear-gradient(115deg,rgba(255,255,255,.12),transparent 24% 72%,rgba(129,140,248,.07));
  opacity: .92;
}

[id$="-modal"].fixed.inset-0>.bg-white>*,
.batch-import-card>*,
.contact-modal-card>*,
.global-search-card>*,
.qr-share-card>* {
  position: relative;
  z-index: 1;
}

.batch-import-head,
.batch-import-footer,
.batch-import-source,
.batch-import-preview,
.contact-modal-head,
.contact-modal-body,
.contact-edit-panel,
#vol-detail-modal .bg-gray-50,
#goods-detail-modal .bg-gray-50 {
  border-color: var(--glass-border-soft)!important;
  background: rgba(255,255,255,.18)!important;
}

body.dark-mode .batch-import-head,
body.dark-mode .batch-import-footer,
body.dark-mode .batch-import-source,
body.dark-mode .batch-import-preview,
body.dark-mode .contact-modal-head,
body.dark-mode .contact-modal-body,
body.dark-mode .contact-edit-panel,
body.dark-mode #vol-detail-modal .bg-gray-50,
body.dark-mode #goods-detail-modal .bg-gray-50 {
  background: rgba(255,255,255,.035)!important;
}

.global-search-head,
.global-search-footer,
.qr-share-head {
  border-color: var(--glass-border-soft)!important;
  background: rgba(255,255,255,.12)!important;
}

body.dark-mode .global-search-head,
body.dark-mode .global-search-footer,
body.dark-mode .qr-share-head {
  background: rgba(15,23,42,.20)!important;
}

#qr-share-code {
  background: #fff!important;
  -webkit-backdrop-filter: none!important;
  backdrop-filter: none!important;
}

#theme-toggle {
  border-color: var(--glass-border)!important;
  background: var(--glass-panel-bg)!important;
  box-shadow: var(--glass-shadow)!important;
  -webkit-backdrop-filter: var(--glass-filter)!important;
  backdrop-filter: var(--glass-filter)!important;
}

/* =========================================================
   Khóa Liquid Glass theo từng giao diện.
   Dùng ID của chính popup/panel để thắng toàn bộ nền đặc từ CSS phiên bản cũ.
   ========================================================= */

#app-global-header-wrap#app-global-header-wrap .app-global-header-card,
#shelf-view#shelf-view>div:nth-child(2)>div,
#shelf-view#shelf-view>div:has(> #search-input),
#goods-view#goods-view .goods-summary-cards>div,
#goods-view#goods-view .goods-category-section,
#selling-view#selling-view .selling-summary-hero,
#selling-view#selling-view .selling-summary-count-card,
#selling-view#selling-view .selling-summary-tabs,
#spending-view#spending-view .spending-filterbar,
#spending-view#spending-view .spending-summary-grid>.spending-stat-card,
#spending-view#spending-view #spending-content-box,
#release-view#release-view .release-toolbar,
#release-view#release-view .release-day-group {
  border-color: var(--glass-border)!important;
  background: var(--home-glass-panel-bg)!important;
  box-shadow: var(--glass-shadow)!important;
  -webkit-backdrop-filter: blur(32px) saturate(1.24) brightness(.90)!important;
  backdrop-filter: blur(32px) saturate(1.24) brightness(.90)!important;
}

#release-view#release-view .release-shell {
  border-color: var(--glass-border)!important;
  background: var(--home-glass-panel-bg)!important;
  box-shadow: var(--glass-shadow)!important;
  -webkit-backdrop-filter: none!important;
  backdrop-filter: none!important;
}

#shelf-view#shelf-view #manga-grid>.manga-shelf-card,
#goods-view#goods-view #goods-category-tabs>button,
#selling-view#selling-view .selling-card,
#detail-view#detail-view #volumes-grid>div,
#detail-view#detail-view #goods-grid>div,
#release-view#release-view .release-book-card {
  border-color: var(--glass-border)!important;
  background: var(--home-glass-card-bg)!important;
  box-shadow: var(--glass-card-shadow)!important;
  /* v616: do not darken the background behind glass cards. The old
     brightness(.84) created a grey plate, most visible in light mode. */
  -webkit-backdrop-filter: blur(18px) saturate(1.18)!important;
  backdrop-filter: blur(18px) saturate(1.18)!important;
}

/* Kính khói tối: vẫn xuyên nền nhưng không tự nâng sáng trên giao diện tối. */

body.dark-mode #shelf-view#shelf-view #manga-grid>.manga-shelf-card {
  background: linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,.005) 46%,rgba(129,140,248,.032)),rgba(4,10,22,.30)!important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(255,255,255,.03)!important;
}

body:not(.dark-mode) #shelf-view#shelf-view #manga-grid>.manga-shelf-card {
  background: linear-gradient(145deg,rgba(255,255,255,.31),rgba(255,255,255,.035) 46%,rgba(224,231,255,.12))!important;
}

body.dark-mode #shelf-view#shelf-view .manga-card-price-panel {
  background: linear-gradient(135deg,rgba(16,185,129,.075),rgba(99,102,241,.035)),rgba(4,10,22,.16)!important;
}

/* Light desktop: cạnh trái/phải phần dưới trùng tuyệt đối với nội dung poster (30px). */

@media (min-width:761px){
  body:not(.dark-mode) #detail-view#detail-view .detail-lower-panel {
    padding: 30px!important;
  }
}

/* Trang truyện ở chế độ sáng: kính trắng trung tính, không lấy màu/ảnh theo bìa truyện. */

body:not(.dark-mode) #detail-view#detail-view>.detail-poster-hero,
body:not(.dark-mode) #detail-view#detail-view>.detail-lower-panel {
  border: 1px solid rgba(255,255,255,.72)!important;
  background: var(--home-glass-panel-bg)!important;
  color: var(--ui-text)!important;
  box-shadow: 0 24px 64px rgba(51,65,85,.13),inset 0 1px 0 rgba(255,255,255,.90),inset 0 -1px 0 rgba(255,255,255,.24)!important;
  -webkit-backdrop-filter: blur(34px) saturate(1.20) brightness(1.02)!important;
  backdrop-filter: blur(34px) saturate(1.20) brightness(1.02)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-poster-backdrop,
body:not(.dark-mode) #detail-view#detail-view .detail-lower-panel::before {
  background-image: none!important;
  opacity: 0!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-poster-shade,
body:not(.dark-mode) #detail-view#detail-view .detail-lower-panel::after {
  background: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.015) 48%,rgba(224,231,255,.07))!important;
}

/* Chữ và các khung con đổi sang hệ màu sáng để không phải giữ lớp nền tối. */

body:not(.dark-mode) #detail-view#detail-view #detail-title,
body:not(.dark-mode) #detail-view#detail-view #detail-author,
body:not(.dark-mode) #detail-view#detail-view .detail-poster-stats strong,
body:not(.dark-mode) #detail-view#detail-view .detail-lower-panel .detail-info-grid strong,
body:not(.dark-mode) #detail-view#detail-view .detail-lower-panel .detail-story-title {
  color: #0f172a!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-poster-eyebrow,
body:not(.dark-mode) #detail-view#detail-view .detail-people-row,
body:not(.dark-mode) #detail-view#detail-view #detail-translator,
body:not(.dark-mode) #detail-view#detail-view .detail-progress-head,
body:not(.dark-mode) #detail-view#detail-view .detail-collection-progress p,
body:not(.dark-mode) #detail-view#detail-view .detail-poster-stats span,
body:not(.dark-mode) #detail-view#detail-view .detail-price-summary-label,
body:not(.dark-mode) #detail-view#detail-view .detail-lower-panel .detail-story-content,
body:not(.dark-mode) #detail-view#detail-view .detail-lower-panel .detail-info-message {
  color: #64748b!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-progress-head strong {
  color: #0f172a!important;
}

body:not(.dark-mode) #detail-view#detail-view #detail-genre>* {
  border-color: rgba(100,116,139,.18)!important;
  background: rgba(255,255,255,.22)!important;
  color: #334155!important;
}

body:not(.dark-mode) #detail-view#detail-view #detail-status {
  --badge-rgb: 111,96,218;
  border-color: rgba(111,96,218,.24)!important;
  background: linear-gradient(135deg,rgba(124,107,232,.86),rgba(105,91,207,.74))!important;
  color: #fff!important;
  box-shadow: 0 10px 22px rgba(99,86,207,.16), inset 0 1px 0 rgba(255,255,255,.25)!important;
}

body:not(.dark-mode) #detail-view#detail-view #detail-volumes-badge {
  --badge-rgb: 40,139,128;
  border-color: rgba(40,139,128,.22)!important;
  background: linear-gradient(135deg,rgba(68,184,168,.16),rgba(68,184,168,.09))!important;
  color: #17675f!important;
  text-shadow: none;
  box-shadow: 0 9px 18px rgba(40,139,128,.07), inset 0 1px 0 rgba(255,255,255,.48)!important;
}

body:not(.dark-mode) #detail-view#detail-view #detail-release-duration {
  --badge-rgb: 182,132,54;
  border-color: rgba(182,132,54,.22)!important;
  background: linear-gradient(135deg,rgba(218,174,99,.17),rgba(218,174,99,.09))!important;
  color: #8a5a12!important;
  text-shadow: none;
  box-shadow: 0 9px 18px rgba(182,132,54,.07), inset 0 1px 0 rgba(255,255,255,.48)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-collection-progress,
body:not(.dark-mode) #detail-view#detail-view .detail-poster-stats>div,
body:not(.dark-mode) #detail-view#detail-view .detail-poster-hero .detail-price-summary {
  border-color: rgba(255,255,255,.52)!important;
  background: rgba(255,255,255,.20)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-progress-track {
  background: rgba(100,116,139,.16)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-poster-hero .detail-price-summary-main {
  border-right-color: rgba(100,116,139,.14)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-poster-hero .detail-market-summary {
  border-left-color: rgba(100,116,139,.14)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-total-cover-price {
  color: #94a3b8!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-tabs-shell,
body:not(.dark-mode) #detail-view#detail-view #detail-filter-toolbar,
body:not(.dark-mode) #detail-view#detail-view #related-manga-section,
body:not(.dark-mode) #detail-view#detail-view .detail-info-panel {
  border-color: rgba(255,255,255,.58)!important;
  background: rgba(255,255,255,.13)!important;
  box-shadow: 0 12px 34px rgba(51,65,85,.08),inset 0 1px 0 rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12)!important;
  backdrop-filter: blur(18px) saturate(1.12)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-tabs-shell nav {
  background: rgba(255,255,255,.14)!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-tabs-shell #tab-btn-volumes,
body:not(.dark-mode) #detail-view#detail-view .detail-tabs-shell #tab-btn-goods,
body:not(.dark-mode) #detail-view#detail-view .detail-tabs-shell #tab-btn-info {
  color: #64748b!important;
}

body:not(.dark-mode) #detail-view#detail-view #tab-btn-volumes.border-indigo-600,
body:not(.dark-mode) #detail-view#detail-view #tab-btn-goods.border-amber-500,
body:not(.dark-mode) #detail-view#detail-view #tab-btn-info.is-active {
  background: rgba(255,255,255,.38)!important;
  color: var(--detail-accent)!important;
}

body:not(.dark-mode) #detail-view#detail-view #related-manga-section h3 {
  color: #0f172a!important;
}

body:not(.dark-mode) #detail-view#detail-view #related-manga-section p {
  color: #64748b!important;
}

body:not(.dark-mode) #detail-view#detail-view .detail-info-grid article,
body:not(.dark-mode) #detail-view#detail-view .detail-story {
  background: rgba(255,255,255,.16)!important;
}

body:not(.dark-mode) #detail-view#detail-view input:not([type="checkbox"]):not([type="radio"]),
body:not(.dark-mode) #detail-view#detail-view select,
body:not(.dark-mode) #detail-view#detail-view textarea {
  border-color: rgba(255,255,255,.62)!important;
  background: rgba(255,255,255,.22)!important;
  color: #334155!important;
  -webkit-backdrop-filter: blur(13px) saturate(1.10)!important;
  backdrop-filter: blur(13px) saturate(1.10)!important;
}

/* Khóa cuối theo trạng thái theme thật: JS tải truyện không thể gắn lại nền bìa ở light mode. */

html[data-theme="light"] body #detail-view#detail-view>.detail-poster-hero,
html[data-theme="light"] body #detail-view#detail-view>.detail-lower-panel {
  background: linear-gradient(145deg,rgba(255,255,255,.38),rgba(255,255,255,.075) 48%,rgba(238,242,255,.14)),rgba(255,255,255,.07)!important;
}

html[data-theme="light"] body #detail-view#detail-view .detail-poster-backdrop,
html[data-theme="light"] body #detail-view#detail-view .detail-poster-shade,
html[data-theme="light"] body #detail-view#detail-view .detail-lower-panel::before,
html[data-theme="light"] body #detail-view#detail-view .detail-lower-panel::after {
  display: none!important;
  background-image: none!important;
}

html[data-theme="light"] body #detail-view#detail-view #detail-title,
html[data-theme="light"] body #detail-view#detail-view #detail-author,
html[data-theme="light"] body #detail-view#detail-view .detail-poster-stats strong {
  color: #0f172a!important;
}

html[data-theme="light"] body #detail-view#detail-view .detail-poster-eyebrow,
html[data-theme="light"] body #detail-view#detail-view #detail-translator,
html[data-theme="light"] body #detail-view#detail-view .detail-progress-head,
html[data-theme="light"] body #detail-view#detail-view .detail-collection-progress p,
html[data-theme="light"] body #detail-view#detail-view .detail-poster-stats span,
html[data-theme="light"] body #detail-view#detail-view .detail-price-summary-label {
  color: #64748b!important;
}

/* Mọi loại popup dùng cùng đúng mặt kính như popup Thêm phụ kiện. */

#vol-detail-modal#vol-detail-modal>div:first-child,
#goods-detail-modal#goods-detail-modal>.goods-detail-card,
#contact-modal#contact-modal>.contact-modal-card,
#batch-import-modal#batch-import-modal>.batch-import-card,
#qr-share-modal#qr-share-modal>.qr-share-card,
#auth-modal#auth-modal>div:first-child {
  position: relative!important;
  isolation: isolate!important;
  border: 1px solid var(--glass-border)!important;
  background: var(--glass-modal-bg)!important;
  box-shadow: 0 36px 100px rgba(5,10,22,.38),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.055)!important;
  -webkit-backdrop-filter: blur(42px) saturate(1.62) brightness(1.08)!important;
  backdrop-filter: blur(42px) saturate(1.62) brightness(1.08)!important;
}

/* v643: Tìm kiếm dùng một mặt Liquid Glass ở mọi màn hình.
   Mobile lấy cùng các biến này, không tách thành một bản nền đặc riêng.
   Không sửa màu/nền của bất kỳ popup khác. */
#global-search-modal {
  --tt-search-glass-surface: rgba(238, 246, 255, .60);
  --tt-search-glass-border: rgba(255, 255, 255, .79);
  --tt-search-glass-shadow: 0 23px 66px rgba(17, 28, 48, .27), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(255,255,255,.14);
  --tt-search-glass-head: rgba(255,255,255,.07);
  --tt-search-field-bg: rgba(255,255,255,.39);
  --tt-search-field-border: rgba(164,180,207,.53);
  --tt-search-close-bg: rgba(255,255,255,.30);
  --tt-search-caption: #40516b;
  --tt-search-placeholder: #4a5c77;
}
body.dark-mode #global-search-modal {
  --tt-search-glass-surface: rgba(20, 29, 51, .69);
  --tt-search-glass-border: rgba(173, 189, 229, .34);
  --tt-search-glass-shadow: 0 26px 72px rgba(0,0,0,.43), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(255,255,255,.025);
  --tt-search-glass-head: rgba(14,22,40,.10);
  --tt-search-field-bg: rgba(29, 41, 64, .53);
  --tt-search-field-border: rgba(145,162,201,.37);
  --tt-search-close-bg: rgba(38, 51, 76, .48);
  --tt-search-caption: #aab7d1;
  --tt-search-placeholder: #a6b2cc;
}
#global-search-modal#global-search-modal > .global-search-card {
  background: var(--tt-search-glass-surface) !important;
  border: 1px solid var(--tt-search-glass-border) !important;
  box-shadow: var(--tt-search-glass-shadow) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.38) !important;
  backdrop-filter: blur(28px) saturate(1.38) !important;
}
/* Desktop and portrait share the same compact search-sheet behavior.
   Only the screen width and available result height may differ. */
#global-search-modal#global-search-modal .global-search-head {
  gap: 9px !important;
  padding: 9px 13px 12px !important;
  border: 0 !important;
  background: var(--tt-search-glass-head) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#global-search-modal#global-search-modal .tt-search-sheet-header {
  border: 0 !important;
  background: transparent !important;
}
#global-search-modal#global-search-modal .tt-search-grabber {
  display: block;
  flex: 0 0 4px;
  width: 37px;
  height: 4px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: rgba(100,116,139,.34);
}
body.dark-mode #global-search-modal#global-search-modal .tt-search-grabber {
  background: rgba(198,208,232,.38);
}
#global-search-modal#global-search-modal #global-search-input {
  min-height: 49px !important;
  height: 49px !important;
  padding-left: 41px !important;
  padding-right: 35px !important;
  border-radius: 15px !important;
  font-size: 16px !important;
}
#global-search-modal#global-search-modal .global-search-close {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
}
#global-search-modal#global-search-modal.is-empty-search .global-search-card {
  height: auto !important;
  min-height: 0 !important;
}
#global-search-modal#global-search-modal.is-empty-search .global-search-results {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 0 16px 16px !important;
}
#global-search-modal#global-search-modal.is-empty-search .global-search-state {
  min-height: 86px !important;
  padding: 8px 12px 10px !important;
  gap: 6px !important;
}
#global-search-modal#global-search-modal.is-empty-search .global-search-state i {
  font-size: 21px !important;
  color: #9294ed !important;
}
#global-search-modal#global-search-modal .global-search-footer {
  display: none !important;
}
/* Glass fields rather than a second solid white/dark plate. */
#global-search-modal#global-search-modal #global-search-input {
  background: var(--tt-search-field-bg) !important;
  border-color: var(--tt-search-field-border) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
}
#global-search-modal#global-search-modal .global-search-close {
  background: var(--tt-search-close-bg) !important;
  border-color: var(--tt-search-field-border) !important;
}
#global-search-modal#global-search-modal #global-search-input::placeholder {
  color: var(--tt-search-placeholder) !important;
}
#global-search-modal#global-search-modal .global-search-state {
  color: var(--tt-search-caption) !important;
}

/* Toàn bộ phần thân và các khung con không được tạo lại một mảng nền đặc. */

#vol-detail-modal#vol-detail-modal .bg-gray-50,
#vol-detail-modal#vol-detail-modal .bg-gray-100,
#vol-detail-modal#vol-detail-modal #vol-info-goods-list>div,
#goods-detail-modal#goods-detail-modal .goods-detail-info,
#goods-detail-modal#goods-detail-modal .goods-detail-price,
#contact-modal#contact-modal .contact-modal-head,
#contact-modal#contact-modal .contact-modal-body,
#contact-modal#contact-modal .contact-social-panel,
#contact-modal#contact-modal .contact-bank-panel,
#contact-modal#contact-modal .contact-link-btn,
#contact-modal#contact-modal .contact-bank-card,
#contact-modal#contact-modal .contact-edit-panel,
#contact-modal#contact-modal .contact-edit-section,
#batch-import-modal#batch-import-modal .batch-import-head,
#batch-import-modal#batch-import-modal .batch-import-body,
#batch-import-modal#batch-import-modal .batch-import-footer,
#batch-import-modal#batch-import-modal .batch-import-source,
#batch-import-modal#batch-import-modal .batch-import-preview,
#batch-import-modal#batch-import-modal .batch-import-stats>div,
#batch-import-modal#batch-import-modal .batch-import-manga-item,
#global-search-modal#global-search-modal .global-search-results,
#qr-share-modal#qr-share-modal .qr-share-head,
#qr-share-modal#qr-share-modal .qr-share-body {
  border-color: var(--glass-border-soft)!important;
  background: var(--glass-inner-bg)!important;
  -webkit-backdrop-filter: blur(16px) saturate(1.22)!important;
  backdrop-filter: blur(16px) saturate(1.22)!important;
}

#batch-import-modal#batch-import-modal .batch-import-body,
#qr-share-modal#qr-share-modal .qr-share-body {
  background: transparent!important;
}
#global-search-modal#global-search-modal .global-search-results {
  border: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Ô nhập/select cũng phải trong như kính, không dùng nền xanh đen cũ. */

#contact-modal#contact-modal input:not([type="checkbox"]):not([type="radio"]),
#contact-modal#contact-modal select,
#contact-modal#contact-modal textarea,
#batch-import-modal#batch-import-modal input:not([type="checkbox"]):not([type="radio"]),
#batch-import-modal#batch-import-modal select,
#batch-import-modal#batch-import-modal textarea,
#auth-modal#auth-modal input:not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--glass-border-soft)!important;
  background: var(--glass-control)!important;
  -webkit-backdrop-filter: blur(13px) saturate(1.18)!important;
  backdrop-filter: blur(13px) saturate(1.18)!important;
}

#pretty-select-portal#pretty-select-portal {
  border-color: var(--glass-border)!important;
  background: var(--glass-modal-bg)!important;
  -webkit-backdrop-filter: blur(32px) saturate(1.48)!important;
  backdrop-filter: blur(32px) saturate(1.48)!important;
}

#image-zoom-modal#image-zoom-modal {
  background: rgba(5,10,22,.28)!important;
  -webkit-backdrop-filter: blur(18px) saturate(1.28) brightness(.90)!important;
  backdrop-filter: blur(18px) saturate(1.28) brightness(.90)!important;
}

/* Nền phía sau popup chi tiết trên điện thoại phải giống các popup còn lại. */

@media (max-width:640px) and (orientation:portrait){
  #detail-mobile-backdrop#detail-mobile-backdrop,
  body.dark-mode #detail-mobile-backdrop#detail-mobile-backdrop,
  body:not(.dark-mode) #detail-mobile-backdrop#detail-mobile-backdrop {
    background: rgba(5,10,22,.18)!important;
    -webkit-backdrop-filter: blur(15px) saturate(1.22) brightness(.96)!important;
    backdrop-filter: blur(15px) saturate(1.22) brightness(.96)!important;
  }
  #vol-detail-modal#vol-detail-modal>div:first-child,
  #goods-detail-modal#goods-detail-modal>.goods-detail-card {
    background: var(--glass-modal-bg)!important;
    border-color: var(--glass-border)!important;
    box-shadow: 0 30px 80px rgba(5,10,22,.34),inset 0 1px 0 rgba(255,255,255,.28)!important;
  }
}

/* Safari/iPhone và thiết bị cảm ứng: giảm compositing trên nhiều card để cuộn vẫn mượt. */

@media (max-width:640px), (hover:none) and (pointer:coarse){
  :root {
    --glass-filter: blur(18px) saturate(1.28);
    --glass-card-filter: none;
  }
  body:not(.dark-mode),body.dark-mode {
    background-attachment: scroll!important;
  }

  /* Trang Tủ Truyện có 24 card/trang. Trên iPhone, backdrop-filter trên từng card
     + lớp nền ảnh blur lớn khiến Safari phải composite lại liên tục khi cuộn.
     Giữ cảm giác kính bằng nền alpha/gradient, nhưng bỏ blur per-card và ảnh nền blur. */
  #shelf-view#shelf-view #manga-grid::before {
    inset: -24px -12px !important;
    background-image:
      radial-gradient(circle 250px at 8% 10%,rgba(16,185,129,.18),transparent 72%),
      radial-gradient(circle 280px at 62% 34%,rgba(168,85,247,.17),transparent 72%),
      radial-gradient(circle 260px at 88% 76%,rgba(14,165,233,.18),transparent 72%) !important;
    background-position: center !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-blend-mode: normal !important;
    filter: none !important;
    opacity: .32 !important;
    transform: none !important;
  }
  #shelf-view#shelf-view #manga-grid > .manga-shelf-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }
  body:not(.dark-mode) #shelf-view#shelf-view #manga-grid > .manga-shelf-card {
    background: linear-gradient(145deg,rgba(255,255,255,.90),rgba(248,250,252,.78) 58%,rgba(238,242,255,.76)) !important;
  }
  body.dark-mode #shelf-view#shelf-view #manga-grid > .manga-shelf-card {
    background: linear-gradient(145deg,rgba(17,26,45,.92),rgba(8,17,31,.84) 58%,rgba(20,22,48,.82)) !important;
  }
  #shelf-view#shelf-view #manga-grid > .manga-shelf-card:hover {
    transform: none !important;
  }
  #shelf-view#shelf-view #manga-grid > .manga-shelf-card > .manga-card-cover-wrap > img {
    transition: none !important;
  }

  .app-global-header-card,
  #shelf-view>div:nth-child(2)>div,
  #shelf-view>div:has(> #search-input),
  #goods-view .goods-summary-cards>div,
  #goods-view .goods-category-section,
  .selling-summary-hero,
  #spending-content-box,
  .release-shell {
    box-shadow: 0 16px 38px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.24)!important;
  }
  [id$="-modal"].fixed.inset-0>.bg-white,
.batch-import-card,
.contact-modal-card,
.global-search-card,
.qr-share-card {
    -webkit-backdrop-filter: blur(30px) saturate(1.42) brightness(1.06)!important;
    backdrop-filter: blur(30px) saturate(1.42) brightness(1.06)!important;
  }
}

/* Trình duyệt không hỗ trợ blur vẫn có nền đủ tương phản. */

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root {
    --glass-panel: rgba(255,255,255,.90);
    --glass-panel-strong: rgba(255,255,255,.94);
    --glass-control: rgba(255,255,255,.88)

  ;}
  body.dark-mode {
    --glass-panel: rgba(15,23,42,.94);
    --glass-panel-strong: rgba(20,30,50,.96);
    --glass-control: rgba(15,23,42,.91)

  ;}
}

/* Light mode tuyệt đối: không dùng ảnh/màu theo bộ truyện. Đặt cuối <head> để thắng mọi CSS cũ. */

html[data-theme="light"] #detail-view[data-detail-theme="light"] > .detail-poster-hero,
html[data-theme="light"] #detail-view[data-detail-theme="light"] > .detail-lower-panel {
  background: linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.20) 48%,rgba(248,250,252,.34)),rgba(255,255,255,.12)!important;
  border-color: rgba(255,255,255,.78)!important;
  color: #0f172a!important;
  box-shadow: 0 22px 60px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.94),inset 0 -1px 0 rgba(255,255,255,.30)!important;
  -webkit-backdrop-filter: blur(30px) saturate(1.14)!important;
  backdrop-filter: blur(30px) saturate(1.14)!important;
}

html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-poster-backdrop,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-poster-shade,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-lower-panel::before,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-lower-panel::after {
  display: none!important;
  opacity: 0!important;
  background: none!important;
  background-image: none!important;
}

html[data-theme="light"] #detail-view[data-detail-theme="light"] #detail-title,
html[data-theme="light"] #detail-view[data-detail-theme="light"] #detail-author,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-poster-stats strong,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-progress-head strong,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-story-title {
  color: #0f172a!important;
}

html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-poster-eyebrow,
html[data-theme="light"] #detail-view[data-detail-theme="light"] #detail-translator,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-progress-head,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-collection-progress p,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-poster-stats span,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-price-summary-label,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-story-content,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-info-message {
  color: #64748b!important;
}

html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-collection-progress,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-poster-stats>div,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-price-summary,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-tabs-shell,
html[data-theme="light"] #detail-view[data-detail-theme="light"] #detail-filter-toolbar,
html[data-theme="light"] #detail-view[data-detail-theme="light"] #related-manga-section,
html[data-theme="light"] #detail-view[data-detail-theme="light"] .detail-info-panel {
  background: rgba(255,255,255,.28)!important;
  border-color: rgba(255,255,255,.72)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72),0 10px 32px rgba(15,23,42,.06)!important;
}

html[data-theme="light"] #detail-view[data-detail-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] #detail-view[data-detail-theme="light"] select,
html[data-theme="light"] #detail-view[data-detail-theme="light"] textarea {
  background: rgba(255,255,255,.34)!important;
  border-color: rgba(255,255,255,.76)!important;
  color: #334155!important;
}

html[data-theme="light"] #detail-view[data-detail-theme="light"] .volume-grid-card,
html[data-theme="light"] #detail-view[data-detail-theme="light"] #tab-content-volumes > div,
html[data-theme="light"] #detail-view[data-detail-theme="light"] #tab-content-goods > div {
  background: rgba(255,255,255,.24)!important;
  border-color: rgba(255,255,255,.70)!important;
}

@media (max-width:760px){
  html[data-theme="light"] #detail-view[data-detail-theme="light"] > .detail-poster-hero,
  html[data-theme="light"] #detail-view[data-detail-theme="light"] > .detail-lower-panel {
    background: rgba(255,255,255,.42)!important;
    -webkit-backdrop-filter: blur(22px) saturate(1.10)!important;
    backdrop-filter: blur(22px) saturate(1.10)!important;
  }
}

#image-zoom-modal .entity-zoom-actions {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

#image-zoom-modal .entity-zoom-actions > .entity-action-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  background: rgba(15,23,42,.38) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24),
    0 7px 20px rgba(2,6,23,.20) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
  backdrop-filter: blur(18px) saturate(1.22) !important;
  transition: background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    color .16s ease !important;
}

#image-zoom-modal .entity-zoom-actions > .entity-action-btn:hover {
  background: rgba(30,41,59,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36),
    0 9px 24px rgba(2,6,23,.25) !important;
}

#image-zoom-modal .entity-zoom-actions > .entity-action-danger:hover {
  background: rgba(127,29,29,.42) !important;
}

/* Light mode: cùng component kính, chỉ đổi tông sáng. */

html[data-theme="light"] body #image-zoom-modal .entity-zoom-actions > .entity-action-btn,
body:not(.dark-mode) #image-zoom-modal .entity-zoom-actions > .entity-action-btn {
  border-color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.34) !important;
  color: #64748b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96),
    0 0 0 1px rgba(148,163,184,.18),
    0 7px 20px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] body #image-zoom-modal .entity-zoom-actions > .entity-action-danger,
body:not(.dark-mode) #image-zoom-modal .entity-zoom-actions > .entity-action-danger {
  color: #9f536a !important;
}

html[data-theme="light"] body #image-zoom-modal .entity-zoom-actions > .entity-action-btn:hover,
body:not(.dark-mode) #image-zoom-modal .entity-zoom-actions > .entity-action-btn:hover {
  background: rgba(255,255,255,.52) !important;
  border-color: #fff !important;
}

/* Mobile: thu nhẹ nhưng vẫn tách thành 3 nút riêng, không chồng nhau. */

@media (max-width:640px){
  #image-zoom-modal .entity-zoom-actions {
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    gap: 6px !important;
  }
  #image-zoom-modal .entity-zoom-actions > .entity-action-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 12px !important;
  }
}

html[data-theme="light"] body #shelf-view#shelf-view #manga-grid > .manga-shelf-card,
body:not(.dark-mode) #shelf-view#shelf-view #manga-grid > .manga-shelf-card {
  background: linear-gradient(145deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.075) 46%,
      rgba(238,242,255,.10) 100%) !important;
  border-color: rgba(255,255,255,.86) !important;
  box-shadow: 0 12px 30px rgba(71,85,105,.075),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.20) brightness(1.07) !important;
  backdrop-filter: blur(24px) saturate(1.20) brightness(1.07) !important;
}

/* Bỏ lớp phủ xám tối trên mặt card, chỉ giữ một ánh kính rất nhẹ. */

html[data-theme="light"] body #shelf-view#shelf-view #manga-grid > .manga-shelf-card::before,
body:not(.dark-mode) #shelf-view#shelf-view #manga-grid > .manga-shelf-card::before {
  background: linear-gradient(135deg,
      rgba(255,255,255,.17),
      transparent 29% 72%,
      rgba(129,140,248,.025)) !important;
  opacity: .72 !important;
}

/* Hover vẫn trong, chỉ nhấc nhẹ chứ không biến thành khối trắng. */

html[data-theme="light"] body #shelf-view#shelf-view #manga-grid > .manga-shelf-card:hover,
body:not(.dark-mode) #shelf-view#shelf-view #manga-grid > .manga-shelf-card:hover {
  background: linear-gradient(145deg,
      rgba(255,255,255,.25),
      rgba(255,255,255,.095) 48%,
      rgba(238,242,255,.12)) !important;
  border-color: rgba(255,255,255,.98) !important;
  box-shadow: 0 17px 38px rgba(71,85,105,.10),
    inset 0 1px 0 #fff !important;
}

/* Ô giá ở đáy cũng bỏ sắc xám đục, chuyển thành kính xanh rất nhẹ. */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-price-panel,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-price-panel {
  background: linear-gradient(135deg,
      rgba(16,185,129,.075),
      rgba(99,102,241,.035)),
    rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* Tác giả: rõ hơn, vẫn mềm hơn tiêu đề truyện. */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-meta-line,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-meta-line {
  color: #64748b !important;
  font-weight: 620 !important;
}

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-meta-text,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-meta-text {
  color: #64748b !important;
  opacity: 1 !important;
}

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-meta-line > i,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-meta-line > i {
  color: #718096 !important;
  opacity: .92 !important;
}

/* "Tập phát hành": tăng tương phản vừa đủ.
   Số tập bên phải đậm hơn một cấp để mắt quét nhanh. */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-progress-copy,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-progress-copy {
  color: #66758b !important;
  font-weight: 720 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-progress-copy strong,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-progress-copy strong {
  color: #475569 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* Track sáng, nhưng vẫn đủ nhìn trên nền kính. */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-progress-track,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-progress-track {
  background: rgba(100,116,139,.16) !important;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.04) !important;
}

/* Tên truyện giữ độ rõ cao, không đổi thành đen gắt. */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-title,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-title {
  color: #263244 !important;
  font-weight: 760 !important;
}

/* Mobile: giảm blur một chút cho mượt, giữ đúng màu chữ. */

@media (max-width:640px){
  html[data-theme="light"] body #shelf-view#shelf-view #manga-grid > .manga-shelf-card,
  body:not(.dark-mode) #shelf-view#shelf-view #manga-grid > .manga-shelf-card {
    -webkit-backdrop-filter: blur(18px) saturate(1.15) brightness(1.06) !important;
    backdrop-filter: blur(18px) saturate(1.15) brightness(1.06) !important;
  }
}

/* Icon quyển sách: cùng hệ tím nhưng nhạt hơn chữ số */

/* Nếu số đã sở hữu và tổng số được tách span riêng */

/* Dấu / trung tính hơn để badge không quá nhiều màu */

/* Hover nhẹ, không làm badge sáng gắt */

/* Fallback cho badge số tập nếu class cũ khác tên */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-meta-panel .bg-indigo-900\/50,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-meta-panel .bg-indigo-900\/50 {
  background: rgba(99,102,241,.10) !important;
  border-color: rgba(99,102,241,.16) !important;
  color: #4f46e5 !important;
}

/* Cam ở khu rating vẫn giữ, nhưng hạ bớt độ chói để cân tổng thể */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-rating,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-rating {
  background: rgba(245,158,11,.085) !important;
  border-color: rgba(217,119,6,.16) !important;
}

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-rating i,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-rating i {
  color: #d97706 !important;
}

/* ===== CHIP SỐ TẬP ===== */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-volume-chip,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-volume-chip {
  color: #64748b !important;
  background: linear-gradient(135deg,
      rgba(99,102,241,.105),
      rgba(148,163,184,.055)) !important;
  border: 1px solid rgba(99,102,241,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72),
    0 2px 7px rgba(79,70,229,.035) !important;
}

/* Icon sách: tím xanh vừa phải */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-volume-chip > i,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-volume-chip > i {
  color: #6366f1 !important;
  opacity: .88 !important;
}

/* Số đã có: bỏ cam hoàn toàn */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-volume-chip .owned,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-volume-chip .owned {
  color: #4338ca !important;
  font-weight: 850 !important;
}

/* Dấu / và tổng số: xám xanh dịu */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-volume-chip > span:not(.owned),
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-volume-chip > span:not(.owned) {
  color: #64748b !important;
  font-weight: 760 !important;
  opacity: .96 !important;
}

/* ===== CHIP ĐÁNH GIÁ ===== */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-rating-chip,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-rating-chip {
  color: #8a6a2f !important;
  background: linear-gradient(135deg,
      rgba(180,145,75,.095),
      rgba(255,255,255,.10)) !important;
  border: 1px solid rgba(161,124,52,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70),
    0 2px 7px rgba(120,89,30,.025) !important;
}

/* Sao champagne trầm — không còn cam neon */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-rating-chip .stars-compact,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-rating-chip .stars-compact {
  color: #a47b32 !important;
  opacity: .90 !important;
}

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-rating-chip .stars-compact i,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-rating-chip .stars-compact i {
  color: inherit !important;
}

/* Hover vẫn dịu */

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-volume-chip:hover,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-volume-chip:hover {
  background: rgba(99,102,241,.13) !important;
  border-color: rgba(99,102,241,.20) !important;
}

html[data-theme="light"] body #shelf-view#shelf-view .manga-card-rating-chip:hover,
body:not(.dark-mode) #shelf-view#shelf-view .manga-card-rating-chip:hover {
  background: rgba(180,145,75,.12) !important;
  border-color: rgba(161,124,52,.18) !important;
}

/* Tăng nhẹ tên truyện ở trang chính, vẫn giữ tối đa 2 dòng và card cân hàng. */

#shelf-view #manga-grid .manga-card-title {
  font-size: 14px !important;
  line-height: 1.34 !important;
  min-height: 2.68em !important;
  font-weight: 760 !important;
  letter-spacing: -.018em !important;
}

@media (max-width:640px){
  #shelf-view #manga-grid .manga-card-title {
    font-size: 12px !important;
    line-height: 1.32 !important;
    min-height: 2.64em !important;
  }
}

/* -------- 1) MỌI NÚT XÓA — kể cả markup/class cũ -------- */

html[data-theme="light"] body button.entity-action-danger,
body:not(.dark-mode) button.entity-action-danger,
html[data-theme="light"] body button.compact-icon-btn-danger,
body:not(.dark-mode) button.compact-icon-btn-danger,
html[data-theme="light"] body button.volume-action-delete,
body:not(.dark-mode) button.volume-action-delete,
html[data-theme="light"] body button.volume-pop-delete,
body:not(.dark-mode) button.volume-pop-delete,
html[data-theme="light"] body button[id*="delete" i],
body:not(.dark-mode) button[id*="delete" i],
html[data-theme="light"] body button[onclick*="delete" i],
body:not(.dark-mode) button[onclick*="delete" i] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.96) !important;
  background: linear-gradient(145deg,
      rgba(255,255,255,.34),
      rgba(255,240,244,.24)) !important;
  color: #a64d67 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(148,163,184,.18),
    0 6px 16px rgba(71,85,105,.075) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

/* Ép icon thùng rác luôn nhận đúng màu, không bị text-gray cũ thắng. */

html[data-theme="light"] body button.entity-action-danger i,
body:not(.dark-mode) button.entity-action-danger i,
html[data-theme="light"] body button.compact-icon-btn-danger i,
body:not(.dark-mode) button.compact-icon-btn-danger i,
html[data-theme="light"] body button.volume-action-delete i,
body:not(.dark-mode) button.volume-action-delete i,
html[data-theme="light"] body button.volume-pop-delete i,
body:not(.dark-mode) button.volume-pop-delete i,
html[data-theme="light"] body button[id*="delete" i] i,
body:not(.dark-mode) button[id*="delete" i] i,
html[data-theme="light"] body button[onclick*="delete" i] i,
body:not(.dark-mode) button[onclick*="delete" i] i {
  color: #a64d67 !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

/* Hover Xóa: vẫn cùng component, chỉ đỏ hơn một chút. */

html[data-theme="light"] body button.entity-action-danger:hover,
body:not(.dark-mode) button.entity-action-danger:hover,
html[data-theme="light"] body button.compact-icon-btn-danger:hover,
body:not(.dark-mode) button.compact-icon-btn-danger:hover,
html[data-theme="light"] body button.volume-action-delete:hover,
body:not(.dark-mode) button.volume-action-delete:hover,
html[data-theme="light"] body button.volume-pop-delete:hover,
body:not(.dark-mode) button.volume-pop-delete:hover,
html[data-theme="light"] body button[id*="delete" i]:hover,
body:not(.dark-mode) button[id*="delete" i]:hover,
html[data-theme="light"] body button[onclick*="delete" i]:hover,
body:not(.dark-mode) button[onclick*="delete" i]:hover {
  background: linear-gradient(145deg,
      rgba(255,255,255,.46),
      rgba(255,228,234,.34)) !important;
  border-color: #fff !important;
  color: #913d57 !important;
  box-shadow: inset 0 1px 0 #fff,
    0 0 0 1px rgba(190,24,93,.08),
    0 8px 18px rgba(71,85,105,.10) !important;
  transform: translateY(-1px) !important;
}

/* -------- 2) NÚT QUAY LẠI Ở LỊCH PHÁT HÀNH -------- */

html[data-theme="light"] body #release-view .release-back-btn,
body:not(.dark-mode) #release-view .release-back-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.94) !important;
  background: linear-gradient(145deg,
      rgba(255,255,255,.48),
      rgba(248,250,252,.25)) !important;
  color: #475569 !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(100,116,139,.16),
    0 6px 15px rgba(71,85,105,.075) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.16) !important;
  backdrop-filter: blur(17px) saturate(1.16) !important;
}

/* Rule cũ từng ép release-home-btn thành gradient tím/white.
   Khóa icon về tông xám rõ trong light mode. */

html[data-theme="light"] body #release-view .release-back-btn > i,
body:not(.dark-mode) #release-view .release-back-btn > i {
  color: #475569 !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

/* Back button không được nhận gradient tím cũ */

html[data-theme="light"] body #release-view .release-home-btn.release-back-btn,
body:not(.dark-mode) #release-view .release-home-btn.release-back-btn {
  background: var(--glass-control) !important;
  color: #475569 !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 5px 14px rgba(51,65,85,.045) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
}

html[data-theme="light"] body #release-view .release-back-btn:hover:not(:disabled),
body:not(.dark-mode) #release-view .release-back-btn:hover:not(:disabled) {
  background: var(--glass-control) !important;
  border-color: var(--glass-border) !important;
  color: #334155 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 7px 18px rgba(71,85,105,.08) !important;
  transform: translateY(-1px) !important;
}

/* Mobile: vẫn đồng bộ nhưng gọn hơn */

@media (max-width:640px){
  html[data-theme="light"] body button.entity-action-danger,
  body:not(.dark-mode) button.entity-action-danger,
  html[data-theme="light"] body button.compact-icon-btn-danger,
  body:not(.dark-mode) button.compact-icon-btn-danger,
  html[data-theme="light"] body button[id*="delete" i],
  body:not(.dark-mode) button[id*="delete" i],
  html[data-theme="light"] body button[onclick*="delete" i],
  body:not(.dark-mode) button[onclick*="delete" i] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }
  html[data-theme="light"] body #release-view .release-back-btn,
  body:not(.dark-mode) #release-view .release-back-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
  }
}

/* Legacy action-button visual patch removed in v541; canonical system is at EOF. */

/* ===== 2. BANNER TRUYỆN — TYPOGRAPHY CÂN ĐỐI HƠN ===== */

/* Ghi chú "Còn thiếu..." */

/* 3 ô thống kê */

#detail-view .detail-poster-stats {
  gap: 9px !important;
  margin-top: 15px !important;
}

#detail-view .detail-poster-stats > div {
  padding: 12px 13px !important;
  border-radius: 13px !important;
}

/* Giá */

#detail-view .detail-price-summary {
  margin-top: 12px !important;
}

#detail-view .detail-price-summary > div {
  padding: 13px 15px !important;
}

#detail-view .detail-price-summary-label {
  margin-bottom: 5px !important;
}

/* Eyebrow NXB + rating cũng tăng nhẹ */

#detail-view .detail-poster-eyebrow {
  font-size: 10px !important;
  line-height: 1.3 !important;
}

/* Mobile: tăng vừa phải, không làm vỡ banner */

@media (max-width:640px){
  .entity-popup-actions > button,
  #detail-view .detail-actionbar .compact-icon-btn,
  #image-zoom-modal .entity-zoom-actions > .entity-action-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 12px !important;
  }
}

/* ===== 1) ICON CLOSE CÂN BẰNG THỊ GIÁC ===== */

.entity-popup-actions > button:last-child i,
.entity-popup-actions > button:last-child .fa-xmark,
.entity-popup-actions > button:last-child .fa-times,
#detail-view .detail-actionbar .compact-icon-btn:last-child i,
#image-zoom-modal .entity-zoom-actions > .entity-action-btn:last-child i {
  font-size: 16px !important;
  line-height: 1 !important;
  transform: scale(1.04) !important;
}

/* Edit / Delete giữ 14px để ba icon nhìn gần bằng nhau theo diện tích nét */

.entity-popup-actions > button:not(:last-child) i,
#detail-view .detail-actionbar .compact-icon-btn:not(:last-child) i,
#image-zoom-modal .entity-zoom-actions > .entity-action-btn:not(:last-child) i {
  font-size: 14px !important;
}

/* ===== 2) BANNER — TĂNG SIZE THÊM MỘT NẤC ===== */

#detail-view .detail-progress-head {
  font-size: 12px !important;
  line-height: 1.36 !important;
  font-weight: 650 !important;
}

#detail-view .detail-progress-head strong {
  font-size: 13px !important;
  font-weight: 680 !important;
}

#detail-view .detail-collection-progress p {
  margin-top: 7px !important;
}

/* ===== 3) 3 Ô THỐNG KÊ ===== */

#detail-view .detail-poster-stats span {
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 560 !important;
  letter-spacing: .002em !important;
}

#detail-view .detail-poster-stats strong {
  margin-top: 5px !important;
  font-size: 16px !important;
  line-height: 1.16 !important;
  font-weight: 640 !important;
}

/* Nếu phần "Còn thiếu" có số + danh sách tập tách nhau thì đồng bộ weight */

#detail-view .detail-poster-stats strong *,
#detail-view .detail-poster-stats strong span,
#detail-view .detail-poster-stats strong b {
  font-weight: 640 !important;
}

/* ===== 4) NHÃN GIÁ — GIẢM ĐỘ ĐẬM ===== */

/* Giá tiền: mọi giá trong cùng hàng dùng chung kích thước để cân bằng thị giác. */

#detail-view .detail-price-summary .detail-price-value {
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.08 !important;
}

#detail-view .detail-total-cover-price,
#detail-view .detail-market-price {
  font-weight: 620 !important;
}

/* Giảm weight các strong/b trong price summary để tránh rule cũ đè lại */

#detail-view .detail-price-summary strong,
#detail-view .detail-price-summary b {
  font-weight: 620 !important;
}

#detail-view .detail-price-summary .detail-total-sale-price {
  font-weight: 680 !important;
}

/* ===== Mobile ===== */

@media (max-width:640px){
  .entity-popup-actions > button:last-child i,
  .entity-popup-actions > button:last-child .fa-xmark,
  .entity-popup-actions > button:last-child .fa-times,
  #detail-view .detail-actionbar .compact-icon-btn:last-child i,
  #image-zoom-modal .entity-zoom-actions > .entity-action-btn:last-child i {
    font-size: 15px !important;
  }
  #detail-view .detail-progress-head {
    font-size: 10.5px !important;
  }
  #detail-view .detail-progress-head strong {
    font-size: 11.5px !important;
  }
  #detail-view .detail-collection-progress p {
    font-size: 10px !important;
  }
  #detail-view .detail-poster-stats span {
    font-size: 9.5px !important;
  }
  #detail-view .detail-poster-stats strong {
    font-size: 14.5px !important;
    font-weight: 640 !important;
  }
  #detail-view .detail-price-summary > div {
    padding: 10px 8px !important;
  }
  #detail-view .detail-price-summary-label {
    font-size: 10px !important;
    font-weight: 560 !important;
  }
  #detail-view .detail-price-summary .detail-price-value {
    font-size: clamp(14px, 4.1vw, 17px) !important;
  }
}

#detail-view {
  --banner-info-size: 12px;
  --banner-info-weight: 650;
  --banner-info-line: 1.38;
  --banner-info-color: #64748b;
  --banner-info-strong: #334155;
}

/* Dòng đầu progress + % */

#detail-view .detail-progress-head,
#detail-view .detail-progress-head strong {
  font-size: var(--banner-info-size) !important;
  line-height: var(--banner-info-line) !important;
  font-weight: var(--banner-info-weight) !important;
}

#detail-view .detail-progress-head {
  color: var(--banner-info-color) !important;
}

#detail-view .detail-progress-head strong {
  color: var(--banner-info-strong) !important;
}

/* Dòng "Còn thiếu..." */

#detail-view .detail-collection-progress p {
  font-size: var(--banner-info-size) !important;
  line-height: var(--banner-info-line) !important;
  font-weight: var(--banner-info-weight) !important;
  color: var(--banner-info-color) !important;
}

/* Nhãn + số ở 3 ô thống kê */

#detail-view .detail-poster-stats span,
#detail-view .detail-poster-stats strong,
#detail-view .detail-poster-stats strong *,
#detail-view .detail-poster-stats strong b {
  font-size: var(--banner-info-size) !important;
  line-height: var(--banner-info-line) !important;
  font-weight: var(--banner-info-weight) !important;
}

#detail-view .detail-poster-stats span {
  color: var(--banner-info-color) !important;
}

#detail-view .detail-poster-stats strong,
#detail-view .detail-poster-stats strong *,
#detail-view .detail-poster-stats strong b {
  color: var(--banner-info-strong) !important;
}

/* Nhãn giá dùng đúng typography chuẩn */

#detail-view .detail-price-summary-label {
  font-size: var(--banner-info-size) !important;
  line-height: var(--banner-info-line) !important;
  font-weight: var(--banner-info-weight) !important;
  color: var(--banner-info-color) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Giá tiền vẫn lớn để phân cấp, nhưng weight đồng bộ semibold */

#detail-view .detail-total-sale-price {
  font-weight: var(--banner-info-weight) !important;
}

#detail-view .detail-total-cover-price,
#detail-view .detail-price-summary strong,
#detail-view .detail-price-summary b {
  font-weight: var(--banner-info-weight) !important;
}

/* Light mode: cùng hệ màu xám xanh, không chỗ đậm chỗ nhạt */

html[data-theme="light"] body #detail-view .detail-progress-head,
html[data-theme="light"] body #detail-view .detail-collection-progress p,
html[data-theme="light"] body #detail-view .detail-poster-stats span,
html[data-theme="light"] body #detail-view .detail-price-summary-label,
body:not(.dark-mode) #detail-view .detail-progress-head,
body:not(.dark-mode) #detail-view .detail-collection-progress p,
body:not(.dark-mode) #detail-view .detail-poster-stats span,
body:not(.dark-mode) #detail-view .detail-price-summary-label {
  color: #64748b !important;
}

html[data-theme="light"] body #detail-view .detail-progress-head strong,
html[data-theme="light"] body #detail-view .detail-poster-stats strong,
html[data-theme="light"] body #detail-view .detail-poster-stats strong *,
body:not(.dark-mode) #detail-view .detail-progress-head strong,
body:not(.dark-mode) #detail-view .detail-poster-stats strong,
body:not(.dark-mode) #detail-view .detail-poster-stats strong * {
  color: #334155 !important;
}

/* Mobile giảm nhẹ size nhưng vẫn đồng bộ 100% */

@media (max-width:640px){
  #detail-view {
    --banner-info-size: 11px;
  }
}

/* Số Tổng số quyển + Đã có */

#detail-view .detail-poster-stats > div:nth-child(1) > strong,
#detail-view .detail-poster-stats > div:nth-child(2) > strong {
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  margin-top: 6px !important;
}

/* Cột Còn thiếu: lớn gần gấp đôi so với typography nhãn */

#detail-view .detail-poster-stats > div:nth-child(3) > strong,
#detail-view #detail-missing {
  font-size: 21px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  margin-top: 6px !important;
}

/* Toàn bộ thành phần bên trong "1 (20)" phải cùng cỡ */

/* Không để button tập thiếu bị padding làm lệch baseline */

#detail-view #detail-missing .missing-volume-link,
#detail-view #detail-missing .missing-volume-range {
  padding: 0 2px !important;
}

/* Mobile giảm nhẹ để không vỡ 3 cột */

@media (max-width:640px){
  #detail-view .detail-poster-stats > div:nth-child(1) > strong,
  #detail-view .detail-poster-stats > div:nth-child(2) > strong {
    font-size: 16px !important;
  }
  #detail-view .detail-poster-stats > div:nth-child(3) > strong,
  #detail-view #detail-missing,
  #detail-view #detail-missing .missing-volume-count,
  #detail-view #detail-missing .missing-volume-paren,
  #detail-view #detail-missing .missing-volume-separator,
  #detail-view #detail-missing .missing-volume-link,
  #detail-view #detail-missing .missing-volume-range {
    font-size: 18px !important;
  }
}

#detail-view #detail-missing {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

#detail-view .detail-poster-stats > div:nth-child(3) {
  min-width: 0 !important;
}

/* Số lượng thiếu: nhỏ khoảng một nửa */

#detail-view #detail-missing .missing-volume-count {
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  color: var(--banner-info-color, #64748b) !important;
}

/* Danh sách tập thiếu vẫn là phần nổi bật */

#detail-view #detail-missing .missing-volume-paren,
#detail-view #detail-missing .missing-volume-separator,
#detail-view #detail-missing .missing-volume-link,
#detail-view #detail-missing .missing-volume-range {
  font-size: 21px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  color: var(--banner-info-strong, #334155) !important;
  white-space: nowrap !important;
}

/* Nếu dấu ngoặc/text nằm trực tiếp trong node */

#detail-view #detail-missing > span:not(.missing-volume-count),
#detail-view #detail-missing > button {
  font-size: 21px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
}

@media (max-width:640px){
  #detail-view #detail-missing {
    gap: 3px !important;
  }
  #detail-view #detail-missing .missing-volume-count {
    font-size: 9px !important;
  }
  #detail-view #detail-missing .missing-volume-paren,
  #detail-view #detail-missing .missing-volume-separator,
  #detail-view #detail-missing .missing-volume-link,
  #detail-view #detail-missing .missing-volume-range,
  #detail-view #detail-missing > span:not(.missing-volume-count),
  #detail-view #detail-missing > button {
    font-size: 16px !important;
  }
}

/* Legacy duplicated action-group sizing rules removed in v541. */

#goods-detail-modal #goods-detail-volumes {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Nút/link tập chỉ còn text, không còn ô nền trắng */

#goods-detail-modal #goods-detail-volumes .goods-volume-detail-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Hover chỉ đổi màu chữ, không tạo lại nền */

#goods-detail-modal #goods-detail-volumes .goods-volume-detail-btn:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #4338ca !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Dark mode đồng bộ tương tự */

body.dark-mode #goods-detail-modal #goods-detail-volumes .goods-volume-detail-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.dark-mode #goods-detail-modal #goods-detail-volumes .goods-volume-detail-btn:hover {
  background: transparent !important;
  color: #c7d2fe !important;
}

/* Popup phụ kiện — dòng giá trị Tập đồng bộ với Tên truyện / Phụ kiện */

#goods-detail-modal #goods-detail-volumes {
  font-size: 14px !important;
  line-height: 1.25rem !important;
  font-weight: 700 !important;
  text-align: right !important;
  color: #4f46e5 !important;
}

#goods-detail-modal #goods-detail-volumes .goods-volume-detail-btn {
  font-size: 14px !important;
  line-height: 1.25rem !important;
  font-weight: 700 !important;
  color: #4f46e5 !important;
}

body.dark-mode #goods-detail-modal #goods-detail-volumes,
body.dark-mode #goods-detail-modal #goods-detail-volumes .goods-volume-detail-btn {
  color: #a5b4fc !important;
}

html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes,
body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #667085 !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

/* Thay background vàng bằng một dấu nhận diện rất nhẹ */

html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes::before,
body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes::before {
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  border-radius: 999px !important;
  background: #7777d9 !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.08) !important;
  opacity: .82 !important;
}

/* Link Tập: tím-xám dịu, không cam/vàng */

html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes .entity-link,
body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes .entity-link {
  color: #6068b8 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 680 !important;
  text-decoration: none !important;
}

/* Separator nếu một phụ kiện gắn nhiều tập */

html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes .entity-link-separator,
body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes .entity-link-separator {
  color: #a0a8b8 !important;
  font-weight: 500 !important;
}

/* Hover chỉ nhấn chữ, tuyệt đối không hiện nền lại */

html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes .entity-link:hover,
body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes .entity-link:hover {
  color: #4f46e5 !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Giá phụ kiện 0đ: hạ cam ở light mode để tổng thể dịu hơn */

html[data-theme="light"] body #detail-view #goods-grid .text-amber-600,
body:not(.dark-mode) #detail-view #goods-grid .text-amber-600 {
  color: #b06f2d !important;
}

/* Mobile giữ gọn */

@media (max-width:640px){
  html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes,
  body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes {
    font-size: 10px !important;
    gap: 4px !important;
  }
  html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes::before,
  body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes::before {
    width: 4px !important;
    height: 4px !important;
    min-width: 4px !important;
  }
}

html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes::before,
body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes::before {
  content: none !important;
  display: none !important;
}

html[data-theme="light"] body #detail-view #goods-grid .entity-linked-volumes,
body:not(.dark-mode) #detail-view #goods-grid .entity-linked-volumes {
  gap: 0 !important;
}

#detail-view #goods-grid .goods-card-action-btn {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  background: rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96),
    0 0 0 1px rgba(148,163,184,.16),
    0 6px 16px rgba(51,65,85,.07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  color: #718096 !important;
  transition: background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

#detail-view #goods-grid .goods-card-action-btn i {
  font-size: 14px !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Xóa chỉ khác màu icon, khung giống Sửa */

#detail-view #goods-grid .goods-card-action-delete {
  color: #b05269 !important;
}

/* Hover cùng một kiểu khung */

#detail-view #goods-grid .goods-card-action-btn:hover {
  background: rgba(255,255,255,.40) !important;
  border-color: #fff !important;
  box-shadow: inset 0 1px 0 #fff,
    0 0 0 1px rgba(148,163,184,.20),
    0 8px 18px rgba(51,65,85,.09) !important;
  transform: translateY(-1px) !important;
}

#detail-view #goods-grid .goods-card-action-edit:hover {
  color: #5b6f8d !important;
}

#detail-view #goods-grid .goods-card-action-delete:hover {
  color: #963f57 !important;
}

body.dark-mode #detail-view #goods-grid .goods-card-action-btn {
  border-color: rgba(148,163,184,.25) !important;
  background: rgba(15,23,42,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
    0 7px 18px rgba(2,6,23,.18) !important;
  color: #94a3b8 !important;
}

body.dark-mode #detail-view #goods-grid .goods-card-action-delete {
  color: #f08aa1 !important;
}

@media (max-width:640px){
  #detail-view #goods-grid .goods-card-action-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 12px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn i {
    font-size: 13px !important;
  }
}

#image-zoom-stage {
  touch-action: pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#image-zoom-stage #zoomed-image {
  transform: translateX(var(--zoom-drag-x,0)) !important;
  transition: transform .16s ease !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

#image-zoom-stage.zoom-gallery-swiping #zoomed-image {
  transition: none !important;
}

body.dark-mode #detail-view {
  --banner-info-color: #94a3b8 !important;
  /* nhãn / mô tả */
  --banner-info-strong: #e2e8f0 !important;
  /* số liệu chính */
}

body.dark-mode #detail-view .detail-progress-head,
body.dark-mode #detail-view .detail-collection-progress p {
  color: #94a3b8 !important;
}

body.dark-mode #detail-view .detail-progress-head strong {
  color: #e2e8f0 !important;
}

/* Ba ô thống kê: nhãn dịu, số sáng rõ */

body.dark-mode #detail-view .detail-poster-stats span {
  color: #94a3b8 !important;
}

body.dark-mode #detail-view .detail-poster-stats strong,
body.dark-mode #detail-view .detail-poster-stats strong * {
  color: #e2e8f0 !important;
}

/* Số lượng thiếu nhỏ hơn vẫn phải đọc được */

body.dark-mode #detail-view #detail-missing .missing-volume-count {
  color: #a5b4c7 !important;
}

/* Danh sách tập còn thiếu dùng indigo-lavender để ăn với accent của web */

body.dark-mode #detail-view #detail-missing .missing-volume-paren,
body.dark-mode #detail-view #detail-missing .missing-volume-separator {
  color: #94a3b8 !important;
}

body.dark-mode #detail-view #detail-missing .missing-volume-link,
body.dark-mode #detail-view #detail-missing .missing-volume-range,
body.dark-mode #detail-view #detail-missing > button {
  color: #a5b4fc !important;
}

/* Nhãn giá */

body.dark-mode #detail-view .detail-price-summary-label {
  color: #94a3b8 !important;
}

/* Giá bán giữ emerald nhưng sáng vừa đủ trên nền tối */

body.dark-mode #detail-view .detail-total-sale-price {
  color: #34d399 !important;
}

/* Giá bìa gạch ngang: sáng hơn bản cũ #64748b để không bị chìm */

body.dark-mode #detail-view .detail-total-cover-price {
  color: #94a3b8 !important;
  text-decoration-color: #64748b !important;
}

/* Các ô kính thống kê không đổi layout, chỉ nâng nhẹ chiều sâu */

body.dark-mode #detail-view .detail-poster-stats > div,
body.dark-mode #detail-view .detail-price-summary {
  border-color: rgba(148,163,184,.13) !important;
}

#shelf-pagination,
#volumes-pagination,
#goods-pagination {
  flex-wrap: wrap !important;
}

.pagination-jump {
  height: 38px;
  margin-left: 6px;
  padding: 4px 5px 4px 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 13px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62),
    0 5px 15px rgba(15,23,42,.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

.pagination-jump-label,
.pagination-jump-total {
  color: #64748b;
  font-size: 11px;
  line-height: 1;
  font-weight: 650;
  white-space: nowrap;
}

.pagination-jump-input {
  box-sizing: border-box;
  width: 48px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(99,102,241,.16);
  border-radius: 9px;
  outline: none;
  background: rgba(255,255,255,.28);
  color: #334155;
  font-size: 12px;
  line-height: 28px;
  font-weight: 760;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.pagination-jump-input::-webkit-outer-spin-button,
.pagination-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pagination-jump-input::placeholder {
  color: var(--ui-legacy-caption);
  opacity: .78;
}

.pagination-jump-input:focus {
  border-color: rgba(99,102,241,.52);
  background: rgba(255,255,255,.52);
  box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}

.pagination-jump-go {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 9px;
  background: linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.11));
  color: #5b5bd6;
  transition: transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.pagination-jump-go i {
  font-size: 10px;
}

.pagination-jump-go:hover {
  transform: translateX(1px);
  border-color: rgba(99,102,241,.30);
  background: linear-gradient(135deg,rgba(99,102,241,.22),rgba(139,92,246,.16));
}

body.dark-mode .pagination-jump {
  border-color: rgba(148,163,184,.16);
  background: rgba(15,23,42,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
    0 7px 18px rgba(2,6,23,.12);
}

body.dark-mode .pagination-jump-label,
body.dark-mode .pagination-jump-total {
  color: #94a3b8;
}

body.dark-mode .pagination-jump-input {
  border-color: rgba(129,140,248,.22);
  background: rgba(15,23,42,.42);
  color: #e2e8f0;
}

body.dark-mode .pagination-jump-input::placeholder {
  color: #64748b;
}

body.dark-mode .pagination-jump-input:focus {
  border-color: rgba(129,140,248,.58);
  background: rgba(30,41,59,.58);
  box-shadow: 0 0 0 3px rgba(99,102,241,.13);
}

body.dark-mode .pagination-jump-go {
  border-color: rgba(129,140,248,.24);
  background: linear-gradient(135deg,rgba(99,102,241,.28),rgba(124,58,237,.20));
  color: #c7d2fe;
}

/* Mobile: xuống hàng tự nhiên, giữ cụm gọn */

@media (max-width:640px){
  .pagination-jump {
    height: 36px;
    margin-left: 2px;
    padding-left: 8px;
    gap: 5px;
    border-radius: 12px;
  }
  .pagination-jump-input {
    width: 44px;
    height: 26px;
    line-height: 26px;
    font-size: 11px;
  }
  .pagination-jump-go {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
  }
}

.pagination-jump {
  padding-left: 5px !important;
  gap: 5px !important;
}

#detail-view .volume-cover-named-label {
  max-width: calc(100% - 10px) !important;
  min-width: 0 !important;
  width: auto !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-align: right !important;
}

/* Tên dài vẫn nằm gọn trong ảnh, không kéo chiều cao card */

@media (min-width:640px){
  #detail-view .volume-cover-named-label {
    font-size: 10.5px !important;
    max-width: calc(100% - 12px) !important;
  }
}

@media (max-width:640px){
  #detail-view .volume-cover-named-label {
    font-size: 9px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

#detail-view .volume-cover-named-label.volume-cover-numbered-title {
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
  justify-items: end;
  gap: 3px;
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  box-sizing: border-box;
}

#detail-view .volume-cover-number-line,
#detail-view .volume-cover-title-badge {
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 6px;
  background: rgba(15,23,42,.48);
  box-shadow: 0 2px 7px rgba(0,0,0,.15),inset 0 0 0 1px rgba(255,255,255,.025);
  -webkit-backdrop-filter: blur(8px) saturate(.88);
  backdrop-filter: blur(8px) saturate(.88);
}

#detail-view .volume-cover-number-line {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  text-align: right;
}

#detail-view .volume-cover-title-window {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
}

#detail-view .volume-cover-title-text {
  display: inline-block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  vertical-align: top;
}

#detail-view .volume-cover-title-window.is-overflowing {
  text-align: left;
}

#detail-view .volume-cover-title-window.is-overflowing .volume-cover-title-text {
  animation: volume-cover-title-pan var(--volume-title-duration,6s) ease-in-out infinite alternate;
  animation-play-state: var(--tt-animation-state,running) !important;
}

@keyframes volume-cover-title-pan{
  0%,15% {
    transform: translateX(0);
  }
  85%,100% {
    transform: translateX(var(--volume-title-shift,0px));
  }
}

@media (prefers-reduced-motion:reduce){
  #detail-view .volume-cover-title-window.is-overflowing {
    overflow-x: auto;
    scrollbar-width: none;
  }
  #detail-view .volume-cover-title-window::-webkit-scrollbar {
    display: none;
  }
  #detail-view .volume-cover-title-window.is-overflowing .volume-cover-title-text {
    animation: none;
  }
}

.volume-cover-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.volume-cover-stack.has-multiple::before {
  content: "";
  position: absolute;
  inset: 3px -4px -4px 4px;
  border-radius: .55rem;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.62);
  z-index: 0;
}

.volume-cover-stack>img {
  position: relative;
  z-index: 1;
}

.volume-multi-cover-badge {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 12;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(15,23,42,.18);
}

.volume-cover-action-label-button~.volume-multi-cover-badge,.volume-cover-static-label~.volume-multi-cover-badge {
  bottom: 27px;
}

.vol-cover-thumbnails {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: none;
}

.vol-cover-thumbnails::-webkit-scrollbar {
  display: none;
}

.vol-cover-thumb {
  width: 38px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .72;
  transition: .18s;
  box-shadow: 0 2px 8px rgba(15,23,42,.10);
}

.vol-cover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vol-cover-thumb:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.vol-cover-thumb.is-active {
  opacity: 1;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,.14);
}

.vol-cover-editor-note {
  font-size: 10px;
  line-height: 1.45;
  color: var(--ui-legacy-caption);
  margin-top: 5px;
}

.volume-multi-cover-badge {
  display: none !important;
}

.volume-auto-cover {
  transition: opacity .22s ease, filter .22s ease;
  will-change: opacity;
}

.volume-auto-cover.is-switching {
  opacity: .16;
}

/* Nút xóa bìa: ô vuông đỏ nhỏ như mẫu "Ảnh đã lưu" */

#vol_cover_file_preview .image-source-thumb {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 7px !important;
}

#vol_cover_file_preview .image-source-thumb > img {
  border-radius: 7px !important;
}

/* Không dùng nút glass/tròn nữa */

#vol_cover_file_preview .image-source-remove {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 8 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 2px !important;
  outline: 0 !important;
  background: #ef2f3f !important;
  color: #fff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-size: 10px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background .12s ease !important;
}

#vol_cover_file_preview .image-source-remove i {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

#vol_cover_file_preview .image-source-remove:hover {
  background: #d92334 !important;
  transform: none !important;
  box-shadow: none !important;
}

#vol_cover_file_preview .image-source-remove:active {
  background: #bf1d2d !important;
  transform: none !important;
}

/* Dark mode vẫn giữ đúng cùng một kiểu đỏ */

body.dark-mode #vol_cover_file_preview .image-source-remove {
  border: 0 !important;
  background: #ef2f3f !important;
  color: #fff !important;
}

@media (max-width:640px){
  #vol_cover_file_preview .image-source-remove {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    top: 0 !important;
    right: 0 !important;
  }
}

body:not(.is-authenticated) .auth-only {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Phòng trường hợp một action button auth-only nằm trong cụm popup
   bị các rule đồng bộ nút ép display:inline-flex !important. */

body:not(.is-authenticated) .entity-popup-actions > .auth-only,
body:not(.is-authenticated) .entity-zoom-actions > .auth-only,
body:not(.is-authenticated) #detail-view .auth-only,
body:not(.is-authenticated) #volumes-grid .auth-only,
body:not(.is-authenticated) #goods-grid .auth-only {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

button[title^="Xóa"],
button[aria-label^="Xóa"],
.image-source-remove,
.volume-pop-delete,
#zoom-delete,
#contact-delete-btn {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  pointer-events: auto !important;
}

/* Giữ nút X thumbnail nhìn 16x16 nhưng vùng chạm dễ bấm hơn trên điện thoại */

#vol_cover_file_preview .image-source-remove::after {
  content: "";
  position: absolute;
  inset: -7px;
}

/* Desktop: footer chỉ hiện nút Đóng như cũ */

.goods-detail-mobile-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.goods-detail-mobile-footer-actions > .goods-detail-mobile-edit,
.goods-detail-mobile-footer-actions > .goods-detail-mobile-delete {
  display: none !important;
}

@media (max-width:760px){
  /* Bỏ toàn bộ cụm action ở header trên mobile:
     Sửa/Xóa đã chuyển xuống footer, X không còn cần thiết. */
  #goods-detail-modal .goods-detail-header > .entity-popup-actions {
    display: none !important;
  }
  #goods-detail-modal .goods-detail-footer {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-top: 8px !important;
  }
  #goods-detail-modal .goods-detail-mobile-footer-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
  }
  /* Hai nút icon dùng cùng kích thước/hình dạng */
  #goods-detail-modal .goods-detail-mobile-edit,
  #goods-detail-modal .goods-detail-mobile-delete {
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    background: rgba(15,23,42,.04) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
    backdrop-filter: blur(14px) saturate(1.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
      0 5px 14px rgba(2,6,23,.10) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* auth-only vẫn quyết định có hiện hay không */
  body.is-authenticated #goods-detail-modal .goods-detail-mobile-edit:not(.hidden),
  body.is-authenticated #goods-detail-modal .goods-detail-mobile-delete:not(.hidden) {
    display: inline-flex !important;
  }
  #goods-detail-modal .goods-detail-mobile-edit {
    color: #94a3b8 !important;
  }
  #goods-detail-modal .goods-detail-mobile-delete {
    color: #fb7185 !important;
    border-color: rgba(251,113,133,.28) !important;
  }
  #goods-detail-modal .goods-detail-mobile-edit i,
  #goods-detail-modal .goods-detail-mobile-delete i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
  }
  /* Đóng giữ dạng nút chữ nhưng cao bằng hai nút icon */
  #goods-detail-modal .goods-detail-mobile-close {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    touch-action: manipulation !important;
  }
}

/* Màn hình rất hẹp vẫn giữ một hàng gọn */

@media (max-width:380px){
  #goods-detail-modal .goods-detail-mobile-edit,
  #goods-detail-modal .goods-detail-mobile-delete {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  #goods-detail-modal .goods-detail-mobile-close {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
  }
}

#spending-view {
  space-y: 0!important;
}

#spending-view * {
  box-sizing: border-box;
}

.spending-filterbar {
  display: grid;
  grid-template-columns: minmax(220px,1.45fr) repeat(3,minmax(130px,.72fr));
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--glass-border,rgba(148,163,184,.26));
  border-radius: 20px;
  background: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  backdrop-filter: blur(26px) saturate(1.15);
}

.spending-search-wrap {
  position: relative;
  min-width: 0;
}

.spending-search-wrap i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #94a3b8;
  pointer-events: none;
}

.spending-search-wrap input {
  padding-left: 34px!important;
}

.spending-filterbar input,.spending-filterbar select,.spending-custom-date-range input,.spending-year-select {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(148,163,184,.26);
  border-radius: 12px;
  background: rgba(255,255,255,.34);
  color: var(--ui-text,#1f2937);
  padding: 0 11px;
  font-size: 11px;
  font-weight: 550;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

.spending-filterbar input:focus,.spending-filterbar select:focus,.spending-custom-date-range input:focus {
  border-color: rgba(99,102,241,.48);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}

.spending-custom-date-range {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 4px 12px;
  color: var(--ui-muted,#64748b);
  font-size: 10px;
}

.spending-custom-date-range.hidden {
  display: none!important;
}

.spending-custom-date-range label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.spending-custom-date-range input {
  width: 142px;
}

.spending-summary-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
  margin: 16px 0;
}

.spending-stat-card {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--glass-border,rgba(148,163,184,.26));
  border-radius: 20px;
  background: rgba(255,255,255,.24);
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
  -webkit-backdrop-filter: blur(25px) saturate(1.16);
  backdrop-filter: blur(25px) saturate(1.16);
  overflow: hidden;
}

.spending-stat-card::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  right: -35px;
  bottom: -42px;
  border-radius: 999px;
  opacity: .26;
  background: currentColor;
  filter: blur(2px);
}

.spending-stat-card>div:last-child {
  position: relative;
  min-width: 0;
  z-index: 1;
}

.spending-stat-icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(255,255,255,.44);
  border: 1px solid rgba(255,255,255,.44);
}

.spending-stat-label {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ui-subtle,#94a3b8);
}

.spending-stat-card strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 650!important;
  letter-spacing: -.025em;
  color: var(--ui-text,#111827);
}

.spending-stat-card small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: var(--ui-muted,#64748b);
}

.spending-stat-card.is-total {
  color: #7268df;
}

.spending-stat-card.is-total .spending-stat-icon {
  color: #655bd4;
  background: rgba(99,102,241,.10);
}

.spending-stat-card.is-month {
  color: #d85c92;
}

.spending-stat-card.is-month .spending-stat-icon {
  color: #c94f86;
  background: rgba(236,72,153,.09);
}

.spending-stat-card.is-year {
  color: #36a58e;
}

.spending-stat-card.is-year .spending-stat-icon {
  color: #218b78;
  background: rgba(16,185,129,.09);
}

.spending-stat-card.is-top {
  color: #c58a25;
}

.spending-stat-card.is-top .spending-stat-icon {
  color: #b67c1e;
  background: rgba(245,158,11,.10);
}

.spending-stat-card.is-average {
  color: #428eb4;
}

.spending-stat-card.is-average .spending-stat-icon {
  color: #347fa5;
  background: rgba(14,165,233,.09);
}

.spending-chart-grid {
  display: grid;
  grid-template-columns: .88fr 1.32fr;
  gap: 14px;
  margin-bottom: 14px;
}

.spending-content-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 14px;
  margin-bottom: 14px;
}

.spending-panel {
  border: 1px solid var(--glass-border,rgba(148,163,184,.26));
  border-radius: 24px;
  background: rgba(255,255,255,.24);
  box-shadow: 0 12px 32px rgba(15,23,42,.055);
  -webkit-backdrop-filter: blur(28px) saturate(1.16);
  backdrop-filter: blur(28px) saturate(1.16);
  overflow: hidden;
}

.spending-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 10px;
}

.spending-panel-eyebrow {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #8b92aa;
  margin-bottom: 2px;
}

.spending-panel h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650!important;
  letter-spacing: -.015em;
  color: var(--ui-text,#111827);
}

.spending-soft-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 999px;
  background: rgba(148,163,184,.08);
  color: var(--ui-muted,#64748b);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.spending-year-select {
  width: auto!important;
  min-width: 78px;
  height: 30px!important;
  padding: 0 8px!important;
  border-radius: 9px!important;
  font-size: 10px!important;
}

.spending-panel-crown {
  color: #d39a35;
  font-size: 17px;
  margin-right: 3px;
}

.spending-donut-layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 15px;
  padding: 8px 18px 20px;
}

.spending-donut-wrap {
  display: flex;
  justify-content: center;
}

.spending-donut {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#777 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16),0 10px 25px rgba(15,23,42,.08);
}

.spending-donut-center {
  width: 91px;
  height: 91px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(248,250,252,.88);
  border: 1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 5px 18px rgba(15,23,42,.07);
}

.spending-donut-center small {
  font-size: 8px;
  color: var(--ui-legacy-caption);
}

.spending-donut-center strong {
  margin-top: 3px;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 650!important;
  color: #334155;
}

.spending-donut-legend {
  display: grid;
  gap: 8px;
}

.spending-legend-row {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--ui-muted,#64748b);
}

.spending-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
}

.spending-legend-row strong {
  font-size: 10px;
  font-weight: 650!important;
  color: var(--ui-text,#334155);
}

.spending-legend-row small {
  grid-column: 2/4;
  font-size: 8px;
  color: var(--ui-legacy-caption);
  margin-top: -4px;
}

.spending-monthly-chart {
  height: 200px;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  align-items: end;
  gap: 6px;
  padding: 12px 18px 20px;
  border-top: 1px solid rgba(148,163,184,.10);
}

.spending-bar-col {
  position: relative;
  height: 164px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.spending-bar-track {
  position: relative;
  width: 100%;
  max-width: 25px;
  height: 138px;
  border-radius: 9px;
  background: rgba(148,163,184,.09);
  overflow: visible;
  display: flex;
  align-items: flex-end;
}

.spending-bar-fill {
  position: relative;
  width: 100%;
  min-height: 3px;
  border-radius: 9px;
  background: linear-gradient(180deg,#7c83e6,#a25bd2);
  box-shadow: 0 5px 13px rgba(99,102,241,.14);
  transition: height .28s ease,filter .18s ease;
}

.spending-bar-fill:hover {
  filter: brightness(1.08);
}

.spending-bar-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  display: none;
  z-index: 5;
  padding: 4px 6px;
  border-radius: 7px;
  background: rgba(15,23,42,.88);
  color: #fff;
  font-size: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15,23,42,.16);
}

.spending-bar-label {
  font-size: 8px;
  color: #8b92aa;
}

.spending-bar-col.is-current .spending-bar-label {
  color: #6366f1;
  font-weight: 700;
}

.spending-bar-col.is-current .spending-bar-fill {
  background: linear-gradient(180deg,#5f69e8,#e06bb0);
}

.spending-top-list {
  display: grid;
  gap: 7px;
  padding: 5px 16px 17px;
}

.spending-top-row {
  display: grid;
  grid-template-columns: 26px 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(148,163,184,.055);
  border: 1px solid rgba(148,163,184,.08);
}

.spending-top-rank {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #8b92aa;
}

.spending-top-row:nth-child(1) .spending-top-rank {
  color: #d69a2e;
}

.spending-top-row:nth-child(2) .spending-top-rank {
  color: #8d98a7;
}

.spending-top-row:nth-child(3) .spending-top-rank {
  color: #b77b52;
}

.spending-top-cover {
  width: 40px;
  height: 51px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(255,255,255,.38);
}

.spending-top-main {
  min-width: 0;
}

.spending-top-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 650;
  color: var(--ui-text,#1f2937);
}

.spending-top-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 8px;
  color: #8b92aa;
}

.spending-top-progress {
  height: 3px;
  margin-top: 5px;
  border-radius: 9px;
  background: rgba(148,163,184,.12);
  overflow: hidden;
}

.spending-top-progress>span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#7c83e6,#d66ea6);
}

.spending-top-money {
  text-align: right;
  font-size: 10px;
  font-weight: 650;
  color: #5e66c9;
  white-space: nowrap;
}

.spending-recent-covers {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
  padding: 6px 16px 17px;
}

.spending-recent-card {
  position: relative;
  display: block;
  min-width: 0;
  text-decoration: none!important;
  color: inherit!important;
}

.spending-recent-image {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 7px 18px rgba(15,23,42,.08);
}

.spending-recent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .22s ease;
}

.spending-recent-card:hover img {
  transform: scale(1.035);
}

.spending-recent-price {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(15,23,42,.70);
  color: #fff;
  font-size: 7px;
  font-weight: 650;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.spending-recent-title {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 600;
  color: var(--ui-text,#334155);
}

.spending-recent-date {
  display: block;
  margin-top: 1px;
  font-size: 7px;
  color: var(--ui-legacy-caption);
}

.spending-timeline-panel {
  margin-bottom: 18px;
}

.spending-timeline {
  padding: 4px 16px 8px;
}

.spending-timeline-group {
  margin-bottom: 14px;
}

.spending-timeline-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 7px;
  font-size: 9px;
  font-weight: 650;
  color: #7c83a2;
}

.spending-timeline-group-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(148,163,184,.13);
}

.spending-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: rgba(148,163,184,.05);
  border: 1px solid rgba(148,163,184,.075);
}

.spending-timeline-row::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 4px;
  background: #777;
}

.spending-timeline-row.is-volume::before {
  background: #716bd7;
}

.spending-timeline-row.is-goods::before {
  background: #d09238;
}

.spending-timeline-cover {
  width: 38px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(148,163,184,.10);
}

.spending-timeline-main {
  min-width: 0;
}

.spending-timeline-type {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 650;
  margin-bottom: 3px;
}

.spending-timeline-row.is-volume .spending-timeline-type {
  background: rgba(99,102,241,.10);
  color: #6963cb;
}

.spending-timeline-row.is-goods .spending-timeline-type {
  background: rgba(245,158,11,.10);
  color: #a8711f;
}

.spending-timeline-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-text,#273449);
}

.spending-timeline-date {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  color: var(--ui-legacy-caption);
}

.spending-timeline-price {
  font-size: 10px;
  font-weight: 650;
  color: #5f67c7;
  white-space: nowrap;
}

.spending-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  gap: 7px;
  color: var(--ui-legacy-caption);
  text-align: center;
  font-size: 10px;
}

.spending-empty i {
  font-size: 22px;
  opacity: .55;
}

body.dark-mode .spending-hero,body.dark-mode .spending-filterbar,body.dark-mode .spending-stat-card,body.dark-mode .spending-panel {
  background: rgba(15,23,42,.28)!important;
  border-color: rgba(148,163,184,.22)!important;
  box-shadow: 0 14px 36px rgba(2,6,23,.16)!important;
}

body.dark-mode .spending-filterbar input,body.dark-mode .spending-filterbar select,body.dark-mode .spending-custom-date-range input,body.dark-mode .spending-year-select {
  background: rgba(15,23,42,.34)!important;
  color: #e5e7eb!important;
  border-color: rgba(148,163,184,.20)!important;
}

body.dark-mode .spending-donut-center {
  background: rgba(15,23,42,.82);
  border-color: rgba(255,255,255,.10);
}

body.dark-mode .spending-donut-center strong {
  color: #e5e7eb;
}

.dark-mode .spending-top-row,.dark-mode .spending-timeline-row {
  background: rgba(15,23,42,.18);
  border-color: rgba(148,163,184,.09);
}

/* Mới mua gần đây: 3 cột dọc, 4 cột ngang thường, 5 cột ngang siêu rộng. */
@media (orientation:portrait){
  .spending-recent-covers {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media (orientation:landscape) and (min-width:1800px){
  .spending-recent-covers {
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
}

@media (max-width:980px){
  .spending-summary-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .spending-chart-grid,.spending-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:720px){
  #spending-view {
    padding-left: 10px!important;
    padding-right: 10px!important;
  }
  .spending-filterbar {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    border-radius: 17px;
  }
  .spending-search-wrap {
    grid-column: 1/-1;
  }
  .spending-summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .spending-stat-card {
    padding: 12px;
    border-radius: 17px;
  }
  .spending-stat-card strong {
    font-size: 16px;
  }
  .spending-stat-card.is-average {
    grid-column: 1/-1;
  }
  .spending-chart-grid,.spending-content-grid {
    gap: 11px;
  }
  .spending-panel {
    border-radius: 20px;
  }
  .spending-donut-layout {
    grid-template-columns: 126px 1fr;
    padding-left: 12px;
    padding-right: 12px;
  }
  .spending-donut {
    width: 118px;
    height: 118px;
  }
  .spending-donut-center {
    width: 78px;
    height: 78px;
  }
  .spending-monthly-chart {
    gap: 3px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .spending-bar-label {
    font-size: 7px;
  }
  .spending-recent-covers {
    gap: 7px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .spending-timeline {
    padding-left: 10px;
    padding-right: 10px;
  }
  .spending-timeline-row {
    grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 8px;
  }
  .spending-timeline-cover {
    width: 34px;
    height: 45px;
  }
  .spending-custom-date-range {
    justify-content: stretch;
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
  }
  .spending-custom-date-range label {
    display: block;
  }
  .spending-custom-date-range input {
    width: 100%;
    margin-top: 4px;
  }
}

@media (max-width:430px){
  .spending-filterbar {
    grid-template-columns: 1fr;
  }
  .spending-search-wrap {
    grid-column: auto;
  }
  .spending-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
  .spending-stat-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
  }
  .spending-stat-card {
    gap: 8px;
  }
  .spending-stat-label {
    font-size: 8px;
  }
  .spending-stat-card strong {
    font-size: 14px;
  }
  .spending-donut-layout {
    grid-template-columns: 1fr;
  }
  .spending-donut-legend {
    grid-template-columns: 1fr 1fr;
  }
  .spending-monthly-chart {
    height: 180px;
  }
  .spending-bar-col {
    height: 145px;
  }
  .spending-bar-track {
    height: 120px;
  }
  .spending-timeline-price {
    font-size: 9px;
  }
  .spending-panel-head {
    padding: 15px 13px 9px;
  }
}

#spending-view .spending-monthly-chart {
  height: auto !important;
  padding-top: 52px !important;
}

#spending-view .spending-bar-col.is-selected {
  z-index: 6;
}

#spending-view .spending-bar-trigger {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#spending-view .spending-bar-tooltip {
  bottom: calc(var(--spending-bar-height) + 7px);
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: #fff !important;
  pointer-events: none;
  user-select: none;
}

#spending-view .spending-bar-col.is-selected .spending-bar-tooltip {
  display: flex;
}

#spending-view .spending-bar-col:nth-child(-n+2) .spending-bar-tooltip {
  left: 0;
  transform: none;
}

#spending-view .spending-bar-col:nth-last-child(-n+2) .spending-bar-tooltip {
  left: auto;
  right: 0;
  transform: none;
}

#spending-view .spending-bar-trigger:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 3px;
}

/* Bộ lọc */

#spending-view .spending-search-wrap i {
  font-size: 13px !important;
}

#spending-view .spending-filterbar input,
#spending-view .spending-filterbar select,
#spending-view .spending-custom-date-range input {
  height: 42px !important;
  font-size: 13px !important;
}

#spending-view .spending-custom-date-range {
  font-size: 12px !important;
}

/* 5 thẻ thống kê */

#spending-view .spending-stat-card {
  padding: 17px !important;
  gap: 13px !important;
}

#spending-view .spending-stat-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  font-size: 18px !important;
}

#spending-view .spending-stat-label {
  font-size: 11px !important;
}

#spending-view .spending-stat-card strong {
  font-size: 21px !important;
}

#spending-view .spending-stat-card small {
  font-size: 11px !important;
}

/* Tiêu đề các khối */

#spending-view .spending-panel-eyebrow {
  font-size: 10px !important;
}

#spending-view .spending-panel h2 {
  font-size: 17px !important;
}

#spending-view .spending-soft-chip {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

/* Donut */

#spending-view .spending-donut-center small {
  font-size: 10px !important;
}

#spending-view .spending-donut-center strong {
  font-size: 14px !important;
}

#spending-view .spending-legend-row {
  font-size: 12px !important;
}

#spending-view .spending-legend-row strong {
  font-size: 12px !important;
}

#spending-view .spending-legend-row small {
  font-size: 10px !important;
}

/* Biểu đồ cột */

#spending-view .spending-bar-label {
  font-size: 10px !important;
}

#spending-view .spending-bar-tooltip {
  font-size: 10px !important;
  padding: 5px 7px !important;
}

/* Top 10 */

#spending-view .spending-top-rank {
  font-size: 14px !important;
}

#spending-view .spending-top-title {
  font-size: 12px !important;
}

#spending-view .spending-top-sub {
  font-size: 10px !important;
}

#spending-view .spending-top-money {
  font-size: 12px !important;
}

/* Mới mua gần đây */

#spending-view .spending-recent-price {
  font-size: 9px !important;
}

#spending-view .spending-recent-title {
  font-size: 10.5px !important;
}

#spending-view .spending-recent-date {
  font-size: 9px !important;
}

/* Dòng tiền */

/* =============================
   Dropdown năm custom
   ============================= */

#spending-view .spending-year-picker {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 96px !important;
  min-width: 96px !important;
}

#spending-view .spending-year-select {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 36px !important;
  padding: 0 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border: 1px solid rgba(148,163,184,.26) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.34) !important;
  color: var(--ui-text,#1f2937) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

#spending-view .spending-year-select > span {
  display: block !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  letter-spacing: 0 !important;
}

#spending-view .spending-year-select > i {
  font-size: 9px !important;
  transition: transform .16s ease !important;
}

#spending-view .spending-year-select.is-open > i {
  transform: rotate(180deg) !important;
}

#spending-view .spending-year-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  z-index: 80 !important;
  width: 96px !important;
  min-width: 96px !important;
  max-height: 230px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 5px !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  border-radius: 12px !important;
  background: rgba(245,247,252,.94) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.16) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
}

#spending-view .spending-year-menu.hidden {
  display: none !important;
}

#spending-view .spending-year-option {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--ui-text,#273449) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  cursor: pointer !important;
}

#spending-view .spending-year-option span {
  display: block !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

#spending-view .spending-year-option:hover,
#spending-view .spending-year-option.is-selected {
  color: #6366f1 !important;
}

#spending-view .spending-year-option i {
  font-size: 9px !important;
}

body.dark-mode #spending-view .spending-year-select {
  background: rgba(15,23,42,.34) !important;
  border-color: rgba(148,163,184,.20) !important;
}

body.dark-mode #spending-view .spending-year-option {
  color: #e5e7eb !important;
}

/* Timeline chỉ 10 mục nên bỏ hẳn vùng xem thêm cũ */

/* Mobile vẫn giữ chữ đủ lớn, không thu nhỏ về mức cũ */

@media (max-width:720px){
  #spending-view .spending-filterbar input,
  #spending-view .spending-filterbar select {
    font-size: 12px !important;
  }
  #spending-view .spending-stat-card strong {
    font-size: 18px !important;
  }
  #spending-view .spending-stat-label {
    font-size: 10px !important;
  }
  #spending-view .spending-stat-card small {
    font-size: 10px !important;
  }
  #spending-view .spending-panel h2 {
    font-size: 16px !important;
  }
  #spending-view .spending-top-title,
  #spending-view .spending-timeline-name {
    font-size: 11.5px !important;
  }
  #spending-view .spending-top-sub,
  #spending-view .spending-timeline-date {
    font-size: 9.5px !important;
  }
}

@media (max-width:430px){
  #spending-view .spending-stat-card strong {
    font-size: 17px !important;
  }
  #spending-view .spending-panel-eyebrow {
    font-size: 9.5px !important;
  }
}

#manga-grid .manga-card-cover-wrap {
  position: relative !important;
}

#manga-grid .manga-today-release-badge {
  position: absolute !important;
  left: 7px !important;
  bottom: 7px !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: calc(100% - 14px) !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 999px !important;
  background: rgba(35,49,76,.66) !important;
  color: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  backdrop-filter: blur(14px) saturate(1.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
    0 5px 14px rgba(15,23,42,.16) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

#manga-grid .manga-today-release-badge i {
  flex: 0 0 auto !important;
  color: #b9c2ff !important;
  font-size: 10px !important;
}

#manga-grid .manga-today-release-badge span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Card phát hành hôm nay chỉ có viền sáng rất nhẹ để nhận ra nhanh,
   không đổi màu nền kính của từng truyện. */

#manga-grid .manga-shelf-card:has(.manga-today-release-badge) {
  border-color: rgba(124,131,230,.42) !important;
  box-shadow: 0 10px 30px rgba(30,41,59,.09),
    0 0 0 1px rgba(124,131,230,.08) !important;
}

body:not(.dark-mode) #manga-grid .manga-today-release-badge {
  background: rgba(55,65,96,.62) !important;
  border-color: rgba(255,255,255,.72) !important;
}

body.dark-mode #manga-grid .manga-today-release-badge {
  background: rgba(23,31,52,.72) !important;
  border-color: rgba(148,163,184,.30) !important;
}

@media (max-width:640px){
  #manga-grid .manga-today-release-badge {
    left: 5px !important;
    bottom: 5px !important;
    min-height: 22px !important;
    padding: 0 7px !important;
    gap: 4px !important;
    font-size: 8px !important;
  }
  #manga-grid .manga-today-release-badge i {
    font-size: 9px !important;
  }
  /* List view nhỏ: chỉ giữ icon + chữ, không làm cover bị chật */
  #manga-grid .manga-card-list-cover .manga-today-release-badge {
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    max-width: none !important;
    justify-content: center !important;
    padding: 0 4px !important;
  }
  #manga-grid .manga-card-list-cover .manga-today-release-badge span {
    display: none !important;
  }
}

#manga-grid .manga-upcoming-release-badge {
  position: absolute !important;
  left: 7px !important;
  bottom: 7px !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: calc(100% - 14px) !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 999px !important;
  background: rgba(27,58,89,.66) !important;
  color: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  backdrop-filter: blur(14px) saturate(1.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
    0 5px 14px rgba(15,23,42,.16) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

#manga-grid .manga-upcoming-release-badge i {
  flex: 0 0 auto !important;
  color: #8be9ff !important;
  font-size: 10px !important;
}

#manga-grid .manga-upcoming-release-badge span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#manga-grid .manga-shelf-card:has(.manga-upcoming-release-badge):not(:has(.manga-today-release-badge)) {
  border-color: rgba(74,190,215,.34) !important;
  box-shadow: 0 10px 30px rgba(30,41,59,.09),
    0 0 0 1px rgba(74,190,215,.08) !important;
}

body:not(.dark-mode) #manga-grid .manga-upcoming-release-badge {
  background: rgba(44,76,106,.60) !important;
  border-color: rgba(255,255,255,.72) !important;
}

body.dark-mode #manga-grid .manga-upcoming-release-badge {
  background: rgba(18,39,63,.74) !important;
  border-color: rgba(125,211,252,.24) !important;
}

@media (max-width:640px){
  #manga-grid .manga-upcoming-release-badge {
    left: 5px !important;
    bottom: 5px !important;
    min-height: 22px !important;
    padding: 0 7px !important;
    gap: 4px !important;
    font-size: 8px !important;
  }
  #manga-grid .manga-upcoming-release-badge i {
    font-size: 9px !important;
  }
  #manga-grid .manga-card-list-cover .manga-upcoming-release-badge {
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    max-width: none !important;
    justify-content: center !important;
    padding: 0 4px !important;
  }
  #manga-grid .manga-card-list-cover .manga-upcoming-release-badge span {
    display: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #manga-grid .manga-today-release-badge,
  #manga-grid .manga-upcoming-release-badge {
    overflow: hidden !important;
    isolation: isolate !important;
    transform-origin: center center !important;
  }
  #manga-grid .manga-today-release-badge > *,
  #manga-grid .manga-upcoming-release-badge > * {
    position: relative !important;
    z-index: 1 !important;
  }
  #manga-grid .manga-today-release-badge::after,
  #manga-grid .manga-upcoming-release-badge::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(110deg,
      transparent 0%,
      transparent 28%,
      rgba(255,255,255,.05) 42%,
      rgba(255,255,255,.24) 50%,
      rgba(255,255,255,.06) 58%,
      transparent 72%,
      transparent 100%);
    transform: translateX(-160%);
  }
  #manga-grid .manga-today-release-badge {
    animation: todayReleaseBadgePulse 2.8s ease-in-out infinite !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #manga-grid .manga-upcoming-release-badge {
    animation: upcomingReleaseBadgePulse 3.1s ease-in-out infinite !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #manga-grid .manga-today-release-badge::after {
    animation: releaseBadgeSheen 3.8s ease-in-out infinite !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #manga-grid .manga-upcoming-release-badge::after {
    animation: releaseBadgeSheen 4.4s ease-in-out infinite 0.45s !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #manga-grid .manga-shelf-card:has(.manga-today-release-badge) {
    animation: shelfTodayReleaseGlow 2.9s ease-in-out infinite !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #manga-grid .manga-shelf-card:has(.manga-upcoming-release-badge):not(:has(.manga-today-release-badge)) {
    animation: shelfUpcomingReleaseGlow 3.2s ease-in-out infinite !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #manga-grid .manga-today-release-badge i {
    animation: releaseBadgeIconBlink 2.6s ease-in-out infinite !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #manga-grid .manga-upcoming-release-badge i {
    animation: releaseBadgeIconBlink 3s ease-in-out infinite !important;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
}

@keyframes todayReleaseBadgePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
      0 5px 14px rgba(15,23,42,.16),
      0 0 0 1px rgba(166,180,255,.08),
      0 0 0 rgba(166,180,255,0);
  }
  50% {
    transform: translateY(-1px) scale(1.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
      0 8px 20px rgba(15,23,42,.20),
      0 0 0 1px rgba(186,198,255,.18),
      0 0 18px rgba(119,140,255,.24);
  }
}

@keyframes upcomingReleaseBadgePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
      0 5px 14px rgba(15,23,42,.16),
      0 0 0 1px rgba(110,216,255,.05),
      0 0 0 rgba(110,216,255,0);
  }
  50% {
    transform: translateY(-1px) scale(1.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
      0 8px 20px rgba(15,23,42,.20),
      0 0 0 1px rgba(110,216,255,.12),
      0 0 16px rgba(75,194,255,.20);
  }
}

@keyframes releaseBadgeSheen {
  0%, 55%, 100% {
    transform: translateX(-160%);
  }
  70% {
    transform: translateX(160%);
  }
}

@keyframes releaseBadgeIconBlink {
  0%, 100% {
    opacity: .92;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes shelfTodayReleaseGlow {
  0%, 100% {
    border-color: rgba(124,131,230,.42);
    box-shadow: 0 10px 30px rgba(30,41,59,.09),
      0 0 0 1px rgba(124,131,230,.08),
      0 0 0 rgba(124,131,230,0);
  }
  50% {
    border-color: rgba(157,166,255,.58);
    box-shadow: 0 12px 34px rgba(30,41,59,.11),
      0 0 0 1px rgba(157,166,255,.16),
      0 0 22px rgba(116,134,255,.15);
  }
}

@keyframes shelfUpcomingReleaseGlow {
  0%, 100% {
    border-color: rgba(74,190,215,.34);
    box-shadow: 0 10px 30px rgba(30,41,59,.09),
      0 0 0 1px rgba(74,190,215,.08),
      0 0 0 rgba(74,190,215,0);
  }
  50% {
    border-color: rgba(102,216,238,.48);
    box-shadow: 0 12px 34px rgba(30,41,59,.11),
      0 0 0 1px rgba(102,216,238,.14),
      0 0 18px rgba(74,190,215,.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  #manga-grid .manga-today-release-badge,
  #manga-grid .manga-upcoming-release-badge,
  #manga-grid .manga-shelf-card:has(.manga-today-release-badge),
  #manga-grid .manga-shelf-card:has(.manga-upcoming-release-badge):not(:has(.manga-today-release-badge)) {
    animation: none !important;
  }
  #manga-grid .manga-today-release-badge::after,
  #manga-grid .manga-upcoming-release-badge::after,
  #manga-grid .manga-today-release-badge i,
  #manga-grid .manga-upcoming-release-badge i {
    animation: none !important;
  }
}


/* Tab Một tập / Nhiều tập / Theo bộ */


/* Preorder của từng tập — cùng editor, không tạo hệ thống lịch thứ hai. */
.volume-preorder-panel {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(245,158,11,.20);
  border-radius: 13px;
  background: rgba(245,158,11,.035);
}

.volume-preorder-panel.hidden {
  display: none !important;
}

.volume-preorder-head,
.volume-preorder-links-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.volume-preorder-head > div {
  min-width: 0;
}

.volume-preorder-head strong,
.volume-preorder-links-head > span {
  display: block;
  color: var(--ui-text,#0f172a);
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

.volume-preorder-head span,
.volume-preorder-note {
  display: block;
  margin-top: 2px;
  color: var(--ui-subtle,#94a3b8);
  font-size: 9.5px;
  line-height: 1.4;
}

.volume-preorder-head > i {
  color: #d97706;
  font-size: 13px;
}

.volume-preorder-datetime {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(96px,.65fr);
  column-gap: 10px;
  row-gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.volume-preorder-datetime label {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.volume-preorder-datetime label > span:first-child {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-muted,#64748b);
  font-size: 9.5px;
  font-weight: 800;
}


.volume-preorder-links-head button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(217,119,6,.22);
  border-radius: 8px;
  background: rgba(245,158,11,.09);
  color: #b45309;
  font-size: 9.5px;
  font-weight: 850;
}

.volume-preorder-links {
  display: grid;
  gap: 6px;
}


.volume-preorder-note {
  margin: 0;
}


/* Giao diện dọc: Ngày mở + Giờ mở luôn cùng một hàng, có khoảng cách và không tràn khung. */
@media (orientation: portrait) and (max-width: 1024px){
  .volume-preorder-datetime {
    grid-template-columns: minmax(0,1.48fr) minmax(88px,.72fr);
    column-gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .volume-preorder-datetime label {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }


}

@media (orientation: portrait) and (max-width: 420px){
  .volume-preorder-datetime {
    grid-template-columns: minmax(0,1.52fr) minmax(84px,.68fr);
    column-gap: 8px;
  }
  
}



/* Tất cả input/select/date/number — trong hơn nhưng vẫn đủ tương phản */


/* Những khung lớn đang bị nền đặc */


/* mode-multiple/full chỉ cần nền rất nhẹ; không tạo "khối trong khối" */


/* Khung chọn ảnh và nút ảnh */


/* Giá bán readonly trước đây bị đặc hơn 2 ô bên cạnh */


/* Bán truyện lẻ chỉ giữ sắc cam ở viền/chữ, không đổ mảng nâu đặc */


/* Hint của chọn phiên bản hàng loạt */


/* Dark mode: giữ trong suốt, tuyệt đối không quay về xanh đen đặc */


/* Light mode: kính trắng nhẹ, không biến thành mảng xám */


/* Mobile: giữ khoảng thở và selector phiên bản không bị bó */



/* Khung kính cấp 1 */

#spending-view .spending-hero,
#spending-view .spending-filterbar,
#spending-view .spending-panel {
  background: var(--home-glass-panel-bg) !important;
  background-color: transparent !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-filter) !important;
  backdrop-filter: var(--glass-filter) !important;
}

/* Card thống kê dùng kính nhẹ hơn để thấy nền xuyên rõ */

#spending-view .spending-stat-card {
  background: var(--home-glass-card-bg) !important;
  background-color: transparent !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: var(--glass-card-shadow) !important;
  -webkit-backdrop-filter: var(--glass-card-filter) !important;
  backdrop-filter: var(--glass-card-filter) !important;
}

/* Quầng màu chỉ là phản xạ rất nhẹ, không được biến thành mảng màu */

#spending-view .spending-stat-card::after {
  opacity: .10 !important;
  filter: blur(12px) !important;
}

/* Toàn bộ control bên trong phải là kính, không phải ô nền đặc */

#spending-view .spending-filterbar input,
#spending-view .spending-filterbar select,
#spending-view .spending-custom-date-range input,
#spending-view .spending-year-select {
  background: var(--glass-inner-bg) !important;
  background-color: transparent !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
    0 3px 12px rgba(15,23,42,.025) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

#spending-view .spending-filterbar input:focus,
#spending-view .spending-filterbar select:focus,
#spending-view .spending-custom-date-range input:focus {
  background: var(--glass-inner-strong) !important;
  border-color: rgba(129,140,248,.46) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Badge/Chip cũng phải xuyên nền */

#spending-view .spending-hero-badge,
#spending-view .spending-soft-chip {
  background: var(--glass-inner-bg) !important;
  border-color: var(--glass-border-soft) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.16) !important;
  backdrop-filter: blur(16px) saturate(1.16) !important;
}

/* Icon card: bỏ ô trắng/đen đặc */

#spending-view .spending-stat-icon {
  background: var(--glass-inner-strong) !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
}

#spending-view .spending-stat-card.is-total .spending-stat-icon {
  background: rgba(99,102,241,.075) !important;
}

#spending-view .spending-stat-card.is-month .spending-stat-icon {
  background: rgba(236,72,153,.065) !important;
}

#spending-view .spending-stat-card.is-year .spending-stat-icon {
  background: rgba(16,185,129,.065) !important;
}

#spending-view .spending-stat-card.is-top .spending-stat-icon {
  background: rgba(245,158,11,.070) !important;
}

#spending-view .spending-stat-card.is-average .spending-stat-icon {
  background: rgba(14,165,233,.065) !important;
}

/* Donut: phần giữa hiện tại gần như nền trắng đặc -> đổi sang kính */

#spending-view .spending-donut-center {
  background: var(--glass-card-bg) !important;
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: 0 7px 20px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
  backdrop-filter: blur(24px) saturate(1.22) !important;
}

/* Track biểu đồ không còn là thanh xanh đen đặc */

#spending-view .spending-bar-track {
  background: rgba(148,163,184,.075) !important;
  border: 1px solid rgba(148,163,184,.055) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* Dòng Top 10 + Timeline */

#spending-view .spending-top-row,
#spending-view .spending-timeline-row {
  background: var(--glass-inner-bg) !important;
  background-color: transparent !important;
  border: 1px solid rgba(148,163,184,.105) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.12) !important;
  backdrop-filter: blur(17px) saturate(1.12) !important;
}

#spending-view .spending-top-row:hover,
#spending-view .spending-timeline-row:hover {
  background: var(--glass-inner-strong) !important;
  border-color: rgba(129,140,248,.19) !important;
}

/* Ảnh bìa vẫn nổi nhưng khung xung quanh nhẹ */

#spending-view .spending-top-cover,
#spending-view .spending-recent-image,
#spending-view .spending-timeline-cover {
  border-color: var(--glass-border-soft) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Dropdown năm custom */

#spending-view .spending-year-menu {
  background: var(--glass-modal-bg) !important;
  background-color: transparent !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-card-shadow) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.42) !important;
  backdrop-filter: blur(30px) saturate(1.42) !important;
}

#spending-view .spending-year-option {
  background: transparent !important;
}

#spending-view .spending-year-option:hover,
#spending-view .spending-year-option.is-selected {
  background: rgba(99,102,241,.075) !important;
}

/* Tooltip biểu đồ: vẫn tối để chữ đọc được nhưng có độ xuyên */

#spending-view .spending-bar-tooltip {
  background: rgba(15,23,42,.72) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  backdrop-filter: blur(12px) saturate(1.15) !important;
}

/* ===== LIGHT MODE =====
   Không dùng nền trắng sữa quá dày; để màu môi trường xuyên rõ.
*/

body:not(.dark-mode) #spending-view .spending-hero,
body:not(.dark-mode) #spending-view .spending-filterbar,
body:not(.dark-mode) #spending-view .spending-panel {
  background: linear-gradient(145deg,
      rgba(255,255,255,.28),
      rgba(255,255,255,.035) 48%,
      rgba(224,231,255,.09)
    ) !important;
}

body:not(.dark-mode) #spending-view .spending-stat-card {
  background: linear-gradient(145deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.018) 47%,
      rgba(199,210,254,.07)
    ) !important;
}

body:not(.dark-mode) #spending-view .spending-filterbar input,
body:not(.dark-mode) #spending-view .spending-filterbar select,
body:not(.dark-mode) #spending-view .spending-custom-date-range input,
body:not(.dark-mode) #spending-view .spending-year-select,
body:not(.dark-mode) #spending-view .spending-top-row,
body:not(.dark-mode) #spending-view .spending-timeline-row {
  background: rgba(255,255,255,.085) !important;
}

/* ===== DARK MODE =====
   Bỏ rule cũ rgba(15,23,42,.28/.34) vì nó làm dashboard thành khối xanh đặc.
*/

body.dark-mode #spending-view .spending-hero,
body.dark-mode #spending-view .spending-filterbar,
body.dark-mode #spending-view .spending-panel {
  background: linear-gradient(145deg,
      rgba(255,255,255,.050),
      rgba(255,255,255,.004) 50%,
      rgba(129,140,248,.027)
    ),
    rgba(4,10,22,.19) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 62px rgba(0,0,0,.21),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
}

body.dark-mode #spending-view .spending-stat-card {
  background: linear-gradient(145deg,
      rgba(255,255,255,.044),
      rgba(255,255,255,.003) 48%,
      rgba(129,140,248,.025)
    ),
    rgba(4,10,22,.15) !important;
  border-color: rgba(255,255,255,.13) !important;
}

body.dark-mode #spending-view .spending-filterbar input,
body.dark-mode #spending-view .spending-filterbar select,
body.dark-mode #spending-view .spending-custom-date-range input,
body.dark-mode #spending-view .spending-year-select {
  background: rgba(255,255,255,.028) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e5e7eb !important;
}

body.dark-mode #spending-view .spending-top-row,
body.dark-mode #spending-view .spending-timeline-row {
  background: rgba(255,255,255,.018) !important;
  border-color: rgba(255,255,255,.075) !important;
}

body.dark-mode #spending-view .spending-donut-center {
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.008)),
    rgba(4,10,22,.28) !important;
  border-color: rgba(255,255,255,.13) !important;
}

body.dark-mode #spending-view .spending-year-menu {
  background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.012)),
    rgba(4,10,22,.52) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Không để background cũ thắng bằng specificity */

body.dark-mode .spending-hero,
body.dark-mode .spending-filterbar,
body.dark-mode .spending-stat-card,
body.dark-mode .spending-panel {
  -webkit-backdrop-filter: blur(30px) saturate(1.42) !important;
  backdrop-filter: blur(30px) saturate(1.42) !important;
}

/* Mobile vẫn giữ cùng chất kính, chỉ giảm blur chút để nhẹ máy */

@media (max-width:720px){
  #spending-view .spending-hero,
  #spending-view .spending-filterbar,
  #spending-view .spending-panel {
    -webkit-backdrop-filter: blur(24px) saturate(1.32) !important;
    backdrop-filter: blur(24px) saturate(1.32) !important;
  }
  #spending-view .spending-stat-card {
    -webkit-backdrop-filter: blur(20px) saturate(1.28) !important;
    backdrop-filter: blur(20px) saturate(1.28) !important;
  }
}

.entity-linked-volumes .goods-volume-range-summary {
  display: inline !important;
  max-width: 100% !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}

.entity-linked-volumes:has(.goods-volume-range-summary) {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Card phụ kiện trong trang truyện: khi đã rút gọn thì badge chỉ cao 1 dòng */

#goods-grid .entity-linked-volumes:has(.goods-volume-range-summary) {
  width: auto !important;
  max-width: 100% !important;
  min-height: 22px !important;
  padding: 3px 8px !important;
  border-radius: 7px !important;
  line-height: 1.25 !important;
}

/* Không cho separator tạo khoảng cách quá lớn khi có nhiều nhóm phiên bản */

.entity-linked-volumes .goods-volume-range-summary .entity-link-separator {
  margin: 0 2px !important;
}

@media (max-width:640px){
  #goods-grid .entity-linked-volumes:has(.goods-volume-range-summary) {
    min-height: 20px !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
  }
}

#detail-view .detail-story-content {
  font-size: 16px !important;
  line-height: 1.72 !important;
  letter-spacing: -0.006em !important;
  font-weight: 400 !important;
}

/* Trạng thái chưa có nội dung giữ cùng nhịp typography */

#detail-view .detail-story-content.is-empty {
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

/* Điện thoại: giảm nhẹ để đoạn văn không bị kéo quá dài theo chiều dọc */

@media (max-width:640px){
  #detail-view .detail-story-content,
  #detail-view .detail-story-content.is-empty {
    font-size: 15px !important;
    line-height: 1.68 !important;
  }
}


/* Cả desktop lẫn mobile: danh sách phiên bản bung trong luồng card. */

#detail-view #volumes-grid .volume-grid-card--expanded {
  height: auto !important;
  overflow: visible !important;
  z-index: 5 !important;
}

#detail-view #volumes-grid .volume-variant-panel {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  order: 3 !important;
  margin-top: 8px !important;
  /* Không tạo vùng scroll con. Cuộn bằng chính trang web. */
  max-height: none !important;
  overscroll-behavior: auto !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Grid phải tính chiều cao thật của card sau khi bung. */

#detail-view #volumes-grid {
  align-items: start !important;
  overflow: visible !important;
}

/* Panel lớn bao ngoài cũng không được cắt phần card vừa tăng chiều cao. */

#detail-view .detail-lower-panel {
  min-height: 0 !important;
}

/* Cho chút khoảng thở dưới grid để phiên bản hàng cuối không dính pagination. */

#detail-view #volumes-grid:has(.volume-grid-card--expanded) {
  padding-bottom: 10px !important;
}

/* Tablet/mobile giữ khoảng cách nhỏ hơn. */

@media (max-width:640px){
  #detail-view #volumes-grid .volume-variant-panel {
    margin-top: 7px !important;
    box-shadow: none !important;
  }
}

.volume-variant-actions {
  top: auto !important;
}

@media (max-width: 640px){
  .volume-variant-actions {
    gap: 4px !important;
  }
}

.volume-variant-panel {
  padding: 8px !important;
  gap: 8px !important;
}

.volume-variant-row {
  display: grid !important;
  min-width: 0 !important;
  border-radius: 14px !important;
}

.volume-variant-thumb {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,0.14) !important;
}

.volume-variant-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.volume-variant-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.volume-variant-title-row {
  display: flex !important;
  align-items: center !important;
}

.volume-variant-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-line-clamp: unset !important;
}

.volume-variant-selling {
  margin-top: 0 !important;
  flex: 0 0 auto !important;
}

.volume-variant-bottom {
  display: flex !important;
  align-items: center !important;
}

.volume-variant-price {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

.volume-variant-actions {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  width: auto !important;
  min-width: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  z-index: 2 !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.volume-variant-actions button {
  padding: 0 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15,23,42,0.70) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.22) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.volume-variant-actions button:hover {
  background: rgba(30,41,59,0.84) !important;
}

.volume-variant-actions button i {
  font-size: 10px !important;
}

.volume-variant-selected-check {
  align-self: start !important;
  margin-top: 2px !important;
}

@media (hover: none){
}

@media (max-width: 640px){
  .volume-variant-row {
    column-gap: 8px !important;
  }
  .volume-variant-actions button {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 6px !important;
  }
  .volume-variant-actions button i {
    font-size: 9px !important;
  }
}

.volume-variant-row {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  align-items: center !important;
  min-height: 84px !important;
  padding: 8px !important;
  padding-right: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}

.volume-variant-thumb {
  width: 52px !important;
  height: 72px !important;
  min-width: 52px !important;
  border-radius: 10px !important;
}

.volume-variant-content {
  min-width: 0 !important;
  padding-right: 18px !important;
  gap: 5px !important;
}

.volume-variant-title-row {
  min-width: 0 !important;
  gap: 6px !important;
  padding-right: 0 !important;
}

.volume-variant-title {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.volume-variant-bottom {
  min-width: 0 !important;
}

.volume-variant-price {
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.volume-variant-selected-check {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  opacity: .95 !important;
}

.volume-variant-actions {
  opacity: 0 !important;
  transform: translateY(8px) scale(.94) !important;
  pointer-events: none !important;
}

.volume-variant-row:hover .volume-variant-actions,
.volume-variant-row:focus-within .volume-variant-actions {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.volume-variant-actions button {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

@media (hover: none){
  .volume-variant-actions {
    opacity: 0 !important;
    transform: translateY(8px) scale(.94) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 640px){
  .volume-variant-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-height: 78px !important;
    padding: 7px !important;
    padding-right: 10px !important;
  }
  .volume-variant-thumb {
    width: 48px !important;
    height: 66px !important;
    min-width: 48px !important;
  }
  .volume-variant-content {
    padding-right: 16px !important;
  }
  .volume-variant-title {
    font-size: 13px !important;
  }
  .volume-variant-price {
    font-size: 11px !important;
  }
}

#detail-view #volumes-grid .volume-variant-panel {
  width: clamp(228px, 24vw, 272px) !important;
  min-width: max(100%, 228px) !important;
  max-width: min(272px, calc(100vw - 18px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  padding: 8px !important;
  gap: 8px !important;
  overflow: visible !important;
}

#detail-view #volumes-grid .volume-variant-panel .volume-variant-row {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 88px !important;
  padding: 8px !important;
  padding-right: 10px !important;
  border-radius: 14px !important;
  position: relative !important;
  overflow: hidden !important;
}

#detail-view #volumes-grid .volume-variant-thumb {
  position: relative !important;
  width: 56px !important;
  height: 78px !important;
  min-width: 56px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(15,23,42,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.14) !important;
}

#detail-view #volumes-grid .volume-variant-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#detail-view #volumes-grid .volume-variant-content {
  min-width: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
}

#detail-view #volumes-grid .volume-variant-title-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#detail-view #volumes-grid .volume-variant-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 14px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
}

#detail-view #volumes-grid .volume-variant-bottom {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

#detail-view #volumes-grid .volume-variant-price {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#detail-view #volumes-grid .volume-variant-selected-check {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.12) !important;
}

#detail-view #volumes-grid .volume-variant-actions {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  width: auto !important;
  min-width: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  z-index: 3 !important;
  opacity: 0 !important;
  transform: translateY(8px) scale(.94) !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

#detail-view #volumes-grid .volume-variant-actions button {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15,23,42,.74) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.24) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#detail-view #volumes-grid .volume-variant-actions button i {
  font-size: 10px !important;
}

@media (hover: hover) and (pointer: fine){
  #detail-view #volumes-grid .volume-variant-row:hover .volume-variant-actions,
  #detail-view #volumes-grid .volume-variant-row:focus-within .volume-variant-actions {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
}

@media (hover: none), (pointer: coarse){
  #detail-view #volumes-grid .volume-variant-row.show-touch-actions .volume-variant-actions,
  #detail-view #volumes-grid .volume-variant-row.touch-actions-visible .volume-variant-actions {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 640px){
  #detail-view #volumes-grid .volume-variant-panel {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-top: 8px !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    overflow: visible !important;
  }
  #detail-view #volumes-grid .volume-variant-panel .volume-variant-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    min-height: 76px !important;
    padding: 7px !important;
    padding-right: 9px !important;
  }
  #detail-view #volumes-grid .volume-variant-thumb {
    width: 48px !important;
    height: 66px !important;
    min-width: 48px !important;
  }
  #detail-view #volumes-grid .volume-variant-title {
    font-size: 13px !important;
  }
  #detail-view #volumes-grid .volume-variant-price {
    font-size: 11px !important;
  }
}

/* Nút mở modal */

.volume-variant-trigger {
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(124,58,237,.07)) !important;
  border-color: rgba(129,140,248,.28) !important;
  color: #6665c9 !important;
  min-height: 27px !important;
  transition: transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}

.volume-variant-trigger:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(129,140,248,.48) !important;
  background: linear-gradient(135deg, rgba(99,102,241,.19), rgba(124,58,237,.10)) !important;
  box-shadow: 0 5px 14px rgba(99,102,241,.10) !important;
}

.volume-variant-trigger-list {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 31px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(129,140,248,.25) !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.variant-mini-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 76 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(5,9,19,.48) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.06) !important;
  backdrop-filter: blur(13px) saturate(1.06) !important;
}

.variant-mini-overlay.hidden {
  display: none !important;
}

/* Shell kính */

.variant-mini-shell {
  width: min(590px, 100%) !important;
  max-height: min(84vh, 760px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.23) !important;
  border-radius: 26px !important;
  background: linear-gradient(145deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.028) 48%,
      rgba(117,129,255,.07)),
    rgba(18,25,42,.72) !important;
  box-shadow: 0 36px 100px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -1px 0 rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.34) !important;
  backdrop-filter: blur(34px) saturate(1.34) !important;
}

/* Header */

.variant-mini-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 21px 22px 14px !important;
  border-bottom: 1px solid rgba(148,163,184,.12) !important;
}

.variant-mini-heading {
  min-width: 0 !important;
}

.variant-mini-kicker {
  display: block !important;
  margin-bottom: 4px !important;
  color: #a4a7ff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  letter-spacing: .14em !important;
}

.variant-mini-heading h2 {
  margin: 0 !important;
  color: #f3f5fb !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 720 !important;
  letter-spacing: -.025em !important;
}

.variant-mini-heading p {
  margin: 5px 0 0 !important;
  max-width: 430px !important;
  color: #9ba6bb !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.variant-mini-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.045) !important;
  color: #9aa6bb !important;
  transition: .16s ease !important;
}

.variant-mini-close:hover {
  background: rgba(255,255,255,.085) !important;
  color: #fff !important;
  border-color: rgba(148,163,184,.32) !important;
}

/* Summary */

.variant-mini-summary {
  display: flex !important;
  align-items: center !important;
  padding: 11px 22px 4px !important;
  color: #929db3 !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
}

/* Variant cards */

.variant-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 11px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 13px 22px 18px !important;
  overscroll-behavior: contain !important;
}

.variant-mini-card {
  position: relative !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0,1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.025) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}

.variant-mini-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(129,140,248,.25) !important;
  background: rgba(255,255,255,.045) !important;
}

.variant-mini-card.is-selected {
  border-color: rgba(132,130,255,.62) !important;
  background: linear-gradient(135deg,
      rgba(99,102,241,.13),
      rgba(124,58,237,.045)) !important;
  box-shadow: 0 8px 24px rgba(72,76,190,.10),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.variant-mini-cover {
  position: relative !important;
  width: 88px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(15,23,42,.22) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.18) !important;
}

.variant-mini-cover img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.variant-mini-info {
  min-width: 0 !important;
}

.variant-mini-edition {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin-bottom: 6px !important;
}

.variant-mini-edition strong {
  min-width: 0 !important;
  color: #eef1f8 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.variant-mini-price {
  display: block !important;
  color: #aaa8ff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 680 !important;
  white-space: nowrap !important;
}

.variant-mini-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 8px !important;
}

.variant-mini-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 22px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(148,163,184,.11) !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.055) !important;
  color: #9aa6bb !important;
  font-size: 8px !important;
  font-weight: 650 !important;
}

.variant-mini-pill.is-owned {
  color: #7fd5b7 !important;
  background: rgba(16,185,129,.075) !important;
  border-color: rgba(16,185,129,.15) !important;
}

.variant-mini-pill.is-selling {
  color: #f2b86d !important;
  background: rgba(245,158,11,.07) !important;
  border-color: rgba(245,158,11,.15) !important;
}

.variant-mini-check {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: 25px !important;
  height: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.92) !important;
  color: white !important;
  font-size: 10px !important;
  box-shadow: 0 5px 14px rgba(99,102,241,.25) !important;
}

/* Sửa / Xóa: Desktop hover, Mobile long press */

.variant-mini-actions {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  opacity: 0 !important;
  transform: translateY(7px) scale(.95) !important;
  pointer-events: none !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

.variant-mini-actions button {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 9px !important;
  background: rgba(11,17,30,.78) !important;
  color: #c6cedd !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.20) !important;
}

.variant-mini-actions button:hover {
  color: #fff !important;
  background: rgba(24,32,50,.92) !important;
}

.variant-mini-actions button.variant-mini-delete:hover {
  color: #fb7185 !important;
  border-color: rgba(251,113,133,.25) !important;
}

@media (hover:hover) and (pointer:fine){
  .variant-mini-card:hover .variant-mini-actions,
  .variant-mini-card:focus-within .variant-mini-actions {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
}

@media (hover:none), (pointer:coarse){
  .variant-mini-card.show-actions .variant-mini-actions {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
}

/* Footer */

/* Light mode */

body:not(.dark-mode) .variant-mini-overlay {
  background: rgba(34,41,58,.24) !important;
}

body:not(.dark-mode) .variant-mini-shell {
  background: linear-gradient(145deg,
      rgba(255,255,255,.77),
      rgba(248,250,252,.54) 52%,
      rgba(236,239,255,.46)) !important;
  border-color: rgba(255,255,255,.78) !important;
  box-shadow: 0 32px 90px rgba(30,41,59,.20),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

body:not(.dark-mode) .variant-mini-heading h2,
body:not(.dark-mode) .variant-mini-edition strong {
  color: #1f2937 !important;
}

body:not(.dark-mode) .variant-mini-heading p,
body:not(.dark-mode) .variant-mini-summary,
body:not(.dark-mode) .variant-mini-pill {
  color: #6b778d !important;
}

body:not(.dark-mode) .variant-mini-card {
  background: rgba(255,255,255,.24) !important;
  border-color: rgba(148,163,184,.16) !important;
}

body:not(.dark-mode) .variant-mini-card.is-selected {
  background: linear-gradient(135deg,
      rgba(99,102,241,.10),
      rgba(167,139,250,.055)) !important;
}

body:not(.dark-mode) .variant-mini-price {
  color: #6366f1 !important;
}

@media (max-width:640px){
  .variant-mini-overlay {
    align-items: flex-end !important;
    padding: 8px !important;
  }
  .variant-mini-shell {
    width: 100% !important;
    max-height: 86dvh !important;
    border-radius: 24px 24px 18px 18px !important;
  }
  .variant-mini-header {
    padding: 18px 17px 12px !important;
  }
  .variant-mini-heading h2 {
    font-size: 19px !important;
  }
  .variant-mini-heading p {
    max-width: 260px !important;
    font-size: 10px !important;
  }
  .variant-mini-summary {
    padding: 10px 17px 3px !important;
  }
  .variant-mini-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 11px 17px 15px !important;
  }
  .variant-mini-card {
    grid-template-columns: 68px minmax(0,1fr) !important;
    min-height: 111px !important;
    padding: 8px !important;
  }
  .variant-mini-cover {
    width: 68px !important;
  }
  .variant-mini-edition strong {
    font-size: 13px !important;
  }
  .variant-mini-price {
    font-size: 12px !important;
  }
}

/* Desktop: đây là popover, không phải modal toàn màn hình */

@media (min-width: 641px){
  body.variant-mini-modal-open {
    overflow: auto !important;
  }
  .variant-side-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 76 !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
  }
  .variant-side-overlay.hidden {
    display: none !important;
  }
  .variant-side-shell {
    position: fixed !important;
    z-index: 77 !important;
    width: 330px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(74vh, 620px) !important;
    margin: 0 !important;
    border-radius: 20px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: linear-gradient(145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.025) 48%,
        rgba(112,124,255,.055)),
      rgba(16,23,39,.86) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.30) !important;
    backdrop-filter: blur(28px) saturate(1.30) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .16s ease,
      transform .16s ease !important;
  }
  .variant-side-shell.is-positioning {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Mũi nhọn neo vào card */
  .variant-side-shell::before {
    content: "" !important;
    position: absolute !important;
    top: 28px !important;
    width: 13px !important;
    height: 13px !important;
    background: rgba(25,33,51,.93) !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    transform: rotate(45deg) !important;
    z-index: -1 !important;
  }
  .variant-side-shell[data-side="right"]::before {
    left: -7px !important;
    border-top: 0 !important;
    border-right: 0 !important;
  }
  .variant-side-shell[data-side="left"]::before {
    right: -7px !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
  }
  .variant-mini-header {
    padding: 17px 17px 11px !important;
  }
  .variant-mini-heading h2 {
    font-size: 18px !important;
  }
  .variant-mini-heading p {
    max-width: 245px !important;
    font-size: 10px !important;
  }
  .variant-mini-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
  }
  .variant-mini-summary {
    padding: 9px 17px 3px !important;
  }
  /* Danh sách 1 cột đúng tinh thần side panel */
  .variant-mini-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-height: min(48vh, 430px) !important;
    overflow-y: auto !important;
    padding: 10px 13px 13px !important;
  }
  .variant-mini-card {
    grid-template-columns: 70px minmax(0,1fr) !important;
    min-height: 108px !important;
    gap: 11px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }
  .variant-mini-cover {
    width: 70px !important;
    border-radius: 9px !important;
  }
  .variant-mini-edition {
    padding-right: 22px !important;
  }
  .variant-mini-edition strong {
    font-size: 13px !important;
  }
  .variant-mini-price {
    font-size: 12px !important;
  }
  .variant-mini-meta {
    margin-top: 7px !important;
  }
  .variant-mini-check {
    width: 22px !important;
    height: 22px !important;
    top: 8px !important;
    right: 8px !important;
  }
  .variant-mini-actions {
    right: 7px !important;
    bottom: 7px !important;
  }
  /* Light */
  body:not(.dark-mode) .variant-side-shell {
    background: linear-gradient(145deg,
        rgba(255,255,255,.82),
        rgba(250,251,255,.63) 52%,
        rgba(238,241,255,.52)) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: 0 22px 62px rgba(30,41,59,.18),
      inset 0 1px 0 rgba(255,255,255,.90) !important;
  }
  body:not(.dark-mode) .variant-side-shell::before {
    background: rgba(246,248,253,.96) !important;
    border-color: rgba(148,163,184,.20) !important;
  }
}

/* Mobile: side popover tự chuyển thành bottom sheet */

@media (max-width: 640px){
  body.variant-mini-modal-open {
    overflow: hidden !important;
  }
  .variant-side-overlay {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 8px !important;
    background: rgba(5,9,19,.48) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
    backdrop-filter: blur(12px) saturate(1.05) !important;
    pointer-events: auto !important;
  }
  .variant-side-overlay.hidden {
    display: none !important;
  }
  .variant-side-shell {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 86dvh !important;
    margin: 0 !important;
    border-radius: 24px 24px 18px 18px !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .variant-side-shell::before {
    display: none !important;
  }
  .variant-mini-grid {
    grid-template-columns: 1fr !important;
  }
}

.volume-card-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.volume-card-price {
  margin: 0 !important;
  line-height: 1.25 !important;
}

.volume-edition-compact {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ui-muted,#94a3b8) !important;
  line-height: 1.15 !important;
}

.volume-edition-icon-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
  backdrop-filter: blur(10px) saturate(1.12) !important;
  transition: background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease !important;
}

.volume-edition-name {
  min-width: 0 !important;
  display: block !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.volume-edition-compact--interactive {
  cursor: pointer !important;
}

.volume-edition-compact--interactive:hover,
.volume-edition-compact--interactive:focus-visible {
  color: #7374d4 !important;
  outline: none !important;
}

.volume-edition-compact--interactive:hover .volume-edition-icon-chip,
.volume-edition-compact--interactive:focus-visible .volume-edition-icon-chip {
  border-color: rgba(129,140,248,.38) !important;
}

.volume-edition-compact--static {
  cursor: default !important;
}

.volume-list-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.volume-list-price {
  display: block !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.volume-edition-compact--list {
  justify-content: flex-start !important;
  max-width: 220px !important;
}

body.dark-mode .volume-edition-icon-chip {
  border-color: rgba(148,163,184,.16) !important;
}

body.dark-mode .volume-edition-compact--interactive:hover .volume-edition-icon-chip,
body.dark-mode .volume-edition-compact--interactive:focus-visible .volume-edition-icon-chip {
  border-color: rgba(129,140,248,.34) !important;
}

@media (max-width:640px){
  .volume-card-meta {
    gap: 3px !important;
  }
  .volume-edition-compact {
    min-height: 20px !important;
    gap: 4px !important;
    font-size: 9px !important;
  }
  .volume-edition-icon-chip {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 5px !important;
  }
}

.volume-edition-compact {
  font-size: 11px !important;
  font-weight: 650 !important;
  gap: 5px !important;
}

.volume-edition-name {
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

/* Nhiều phiên bản: icon lớp thẻ nhỏ, không khung */

.volume-edition-icon-chip {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: #7778d7 !important;
}

.volume-edition-icon-chip i {
  font-size: 10px !important;
  line-height: 1 !important;
}

.volume-edition-compact--interactive:hover .volume-edition-icon-chip,
.volume-edition-compact--interactive:focus-visible .volume-edition-icon-chip {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #6366f1 !important;
}

/* Một phiên bản: chỉ hiện text */

.volume-edition-compact--single {
  gap: 0 !important;
  min-height: 20px !important;
}

body.dark-mode .volume-edition-icon-chip {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8d91df !important;
}

body.dark-mode .volume-edition-compact--interactive:hover .volume-edition-icon-chip,
body.dark-mode .volume-edition-compact--interactive:focus-visible .volume-edition-icon-chip {
  border: 0 !important;
  background: transparent !important;
  color: #a5a8ff !important;
}

@media (max-width:640px){
  .volume-edition-compact,
  .volume-edition-name {
    font-size: 10px !important;
  }
  .volume-edition-icon-chip i {
    font-size: 9px !important;
  }
}

.volume-card-meta {
  gap: 3px !important;
}

.volume-edition-text {
  display: block !important;
  max-width: 100% !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ui-muted,#94a3b8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.volume-edition-text--interactive {
  cursor: pointer !important;
}

.volume-edition-text--interactive:active {
  opacity: .72 !important;
}

.volume-edition-text--static {
  cursor: default !important;
  pointer-events: none !important;
}

.volume-edition-text--list {
  max-width: 220px !important;
  text-align: left !important;
}

/* Không còn footer xác nhận: grid variant được thêm khoảng thở dưới */

.variant-side-shell .variant-mini-grid {
  padding-bottom: 15px !important;
}

/* Summary gọn, hint đẩy về phải */

.variant-mini-summary {
  justify-content: space-between !important;
  gap: 10px !important;
}

.variant-mini-summary-hint {
  min-width: 0 !important;
  color: #7f8ba1 !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.dark-mode .volume-edition-text--interactive:hover,
body.dark-mode .volume-edition-text--interactive:focus-visible {
  color: #a4a6ff !important;
}

@media (max-width:640px){
  .volume-edition-text {
    font-size: 10px !important;
    min-height: 19px !important;
  }
  .variant-mini-summary-hint {
    font-size: 8px !important;
  }
}

@keyframes editionChipGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(122, 108, 255, 0.18),
      0 8px 18px rgba(82, 78, 165, 0.12),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(154, 146, 255, 0.28),
      0 10px 22px rgba(101, 96, 197, 0.18),
      0 0 18px rgba(139, 126, 255, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.10);
  }
}

@keyframes editionChipShine {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  15% {
    opacity: .0;
  }
  35% {
    opacity: .42;
  }
  60% {
    opacity: .15;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}

.volume-edition-text--interactive {
  color: #cfd6ff !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.volume-edition-text--interactive::before {
  inset: -2px auto -2px -30% !important;
  width: 42% !important;
  transform: translateX(-130%) !important;
}

.volume-edition-text--interactive:hover,
.volume-edition-text--interactive:focus-visible {
  color: #f3f4ff !important;
  border-color: rgba(160, 153, 255, 0.42) !important;
}

.volume-edition-text--list {
  justify-content: flex-start !important;
}

body:not(.dark-mode) .volume-edition-text--interactive {
  color: #4953a8 !important;
  border-color: rgba(120, 109, 238, 0.18) !important;
  background: linear-gradient(135deg, rgba(120,109,238,0.10), rgba(152,143,255,0.08), rgba(255,255,255,0.35)) !important;
}

body:not(.dark-mode) .volume-edition-text--interactive:hover,
body:not(.dark-mode) .volume-edition-text--interactive:focus-visible {
  color: #3841a2 !important;
  border-color: rgba(120,109,238,0.30) !important;
  background: linear-gradient(135deg, rgba(120,109,238,0.16), rgba(165,156,255,0.12), rgba(255,255,255,0.52)) !important;
}

@media (max-width: 640px){
  .volume-edition-text--interactive {
    min-height: 22px !important;
    padding: 3px 9px !important;
  }
}

@keyframes editionTextPulseOnly {
  0%, 100% {
    text-shadow: 0 0 0 rgba(255,255,255,0),
      0 0 0 rgba(123, 107, 255, 0),
      0 0 0 rgba(123, 107, 255, 0);
    transform: translateY(0);
  }
  50% {
    text-shadow: 0 0 8px rgba(255,255,255,0.10),
      0 0 14px rgba(123, 107, 255, 0.18),
      0 0 22px rgba(123, 107, 255, 0.10);
    transform: translateY(-0.5px);
  }
}

@keyframes editionUnderlineSweepOnly {
  0% {
    opacity: .15;
    transform: scaleX(.22);
  }
  50% {
    opacity: .55;
    transform: scaleX(1);
  }
  100% {
    opacity: .15;
    transform: scaleX(.22);
  }
}

.volume-edition-text--interactive {
  isolation: auto !important;
}

.volume-edition-text--interactive::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -2px !important;
  height: 1.5px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: .18 !important;
  transform-origin: center !important;
  animation: editionUnderlineSweepOnly 2.4s ease-in-out infinite !important;
  pointer-events: none !important;
  animation-play-state: var(--tt-animation-state,running) !important;
}

.volume-edition-text--interactive:hover,
.volume-edition-text--interactive:focus-visible {
  color: inherit !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.12),
    0 0 18px rgba(123, 107, 255, 0.20),
    0 0 24px rgba(123, 107, 255, 0.10) !important;
  transform: translateY(-1px) !important;
}

.volume-edition-text--interactive:active {
  transform: translateY(0) scale(.98) !important;
}

body:not(.dark-mode) .volume-edition-text--interactive {
  color: inherit !important;
}

body:not(.dark-mode) .volume-edition-text--interactive:hover,
body:not(.dark-mode) .volume-edition-text--interactive:focus-visible {
  color: inherit !important;
  text-shadow: 0 0 6px rgba(255,255,255,0.16),
    0 0 12px rgba(123, 107, 255, 0.14),
    0 0 18px rgba(123, 107, 255, 0.08) !important;
}

@keyframes editionTextBlinkOnly {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .58;
  }
}

.volume-edition-text--interactive {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  margin-top: 2px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  color: inherit !important;
  overflow: visible !important;
  transform: none !important;
  transition: opacity .18s ease !important;
}

.volume-edition-text--interactive::before,
.volume-edition-text--interactive::after {
  content: none !important;
  display: none !important;
}

.volume-edition-text--interactive:hover,
.volume-edition-text--interactive:focus-visible,
.volume-edition-text--interactive:active {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: inherit !important;
  transform: none !important;
  outline: none !important;
}

.volume-edition-text--interactive.volume-edition-text--list {
  justify-content: flex-start !important;
}

body:not(.dark-mode) .volume-edition-text--interactive,
body:not(.dark-mode) .volume-edition-text--interactive:hover,
body:not(.dark-mode) .volume-edition-text--interactive:focus-visible,
body:not(.dark-mode) .volume-edition-text--interactive:active {
  color: inherit !important;
  text-shadow: none !important;
}

#volume-variant-mini-modal,
.variant-side-overlay,
.variant-mini-overlay {
  display: none !important;
}

body.variant-mini-modal-open {
  overflow: auto !important;
}

@keyframes editionTextBlinkSoft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .84;
  }
}

@media (max-width:640px){
  .volume-edition-text,
  .volume-edition-text--static,
  .volume-edition-text--interactive {
    font-size: 10px !important;
  }
}

@keyframes editionTextBlinkStrong {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    transform: translateZ(0);
  }
  50% {
    opacity: .38;
    text-shadow: 0 0 10px rgba(255,255,255,0.28);
    transform: translateZ(0);
  }
}

.volume-edition-text,
.volume-edition-text--static,
.volume-edition-text--interactive {
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.volume-edition-text--interactive {
  font-weight: 800 !important;
  animation: editionTextBlinkStrong 0.95s ease-in-out infinite !important;
  animation-play-state: var(--tt-animation-state,running) !important;
}

.volume-edition-text--interactive:hover,
.volume-edition-text--interactive:focus-visible,
.volume-edition-text--interactive:active {
  font-weight: 800 !important;
}

@media (max-width: 640px) {
  .volume-edition-text,
  .volume-edition-text--static,
  .volume-edition-text--interactive {
    font-size: 11px !important;
  }
}

#book-vault-view {
  --cx-panel: rgba(16,25,45,.72);
  --cx-panel-2: rgba(26,37,61,.68);
  --cx-line: rgba(148,163,184,.18);
  --cx-line-strong: rgba(148,163,184,.28);
  --cx-text: #eef3ff;
  --cx-muted: #93a0b8;
  --cx-soft: #6f7c95;
  --cx-indigo: #818cf8;
  --cx-purple: #a78bfa;
  --cx-blue: #60a5fa;
  --cx-cyan: #38bdf8;
  --cx-emerald: #34d399;
  --cx-pink: #f472b6;
  --cx-amber: #fbbf24;
  position: relative;
  margin: 0 auto;
  padding: 12px 0 38px;
  color: var(--cx-text);
}

body:not(.dark-mode) #book-vault-view {
  --cx-panel: rgba(255,255,255,.58);
  --cx-panel-2: rgba(250,252,255,.62);
  --cx-line: rgba(100,116,139,.16);
  --cx-line-strong: rgba(100,116,139,.24);
  --cx-text: #172033;
  --cx-muted: #64748b;
  --cx-soft: #8793a7;
}

#book-vault-view::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 3% 12%,rgba(16,185,129,.11),transparent 26%),
    radial-gradient(circle at 92% 10%,rgba(99,102,241,.16),transparent 30%),
    radial-gradient(circle at 12% 92%,rgba(168,85,247,.10),transparent 28%),
    linear-gradient(145deg,#07101f 0%,#0a1428 45%,#10254a 100%);
}

body:not(.dark-mode) #book-vault-view::before {
  background: radial-gradient(circle at 5% 12%,rgba(56,189,248,.10),transparent 27%),
    radial-gradient(circle at 92% 10%,rgba(139,92,246,.11),transparent 30%),
    radial-gradient(circle at 12% 92%,rgba(244,114,182,.08),transparent 28%),
    linear-gradient(145deg,#f8fbff,#eef5ff 55%,#f7f3ff);
}

.collection-page-head,
.collection-panel,
.collection-stat-card {
  border: 1px solid var(--cx-line);
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    var(--cx-panel);
  box-shadow: 0 18px 50px rgba(2,6,23,.15),
    inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
}

body:not(.dark-mode) .collection-page-head,
body:not(.dark-mode) .collection-panel,
body:not(.dark-mode) .collection-stat-card {
  box-shadow: 0 18px 45px rgba(30,41,59,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.collection-page-head {
  min-height: 100px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
}

.collection-page-head::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 270px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(99,102,241,.20),transparent 68%);
  pointer-events: none;
}

.collection-back-btn,
.collection-page-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cx-line-strong);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: var(--cx-text);
  flex: none;
}

.collection-back-btn {
  cursor: pointer;
  transition: .16s ease;
}

.collection-back-btn:hover {
  transform: translateX(-2px);
  border-color: rgba(129,140,248,.45);
}

.collection-page-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.collection-page-icon {
  width: 50px;
  height: 50px;
  font-size: 20px;
  border: 0;
}



.collection-page-icon-vault {
  background: linear-gradient(135deg,rgba(139,92,246,.28),rgba(59,130,246,.16));
  color: #b6a5ff;
}

.collection-page-kicker,
.collection-eyebrow {
  display: block;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  color: #8f9ab2;
  margin-bottom: 6px;
}

.collection-page-title h1 {
  margin: 0;
  font-size: 31px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: -.04em;
  color: var(--cx-text);
}

.collection-page-title p {
  margin: 7px 0 0;
  color: var(--cx-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.collection-head-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: rgba(99,102,241,.08);
  color: #a9adff;
  font-size: 9px;
  font-weight: 700;
}

.collection-stat-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 11px;
  margin-bottom: 13px;
}

.collection-stat-card {
  min-width: 0;
  min-height: 132px;
  border-radius: 24px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.collection-stat-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  right: -55px;
  bottom: -70px;
  background: radial-gradient(circle,var(--stat-glow,rgba(99,102,241,.18)),transparent 70%);
}

.collection-stat-icon {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stat-bg,rgba(99,102,241,.18));
  color: var(--stat-color,#a5b4fc);
  font-size: 38px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 32px rgba(2,6,23,.22);
}

.collection-stat-card strong {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cx-text);
  font-size: 34px;
  line-height: 1;
  font-weight: 860;
  letter-spacing: -.045em;
}

.collection-stat-card span {
  display: block;
  margin-top: 8px;
  color: var(--stat-color,#a5b4fc);
  font-size: 13px;
  line-height: 1;
  font-weight: 840;
}

.collection-stat-card small {
  display: block;
  margin-top: 7px;
  color: var(--cx-muted);
  font-size: 11px;
  line-height: 1.34;
}

.collection-panel {
  border-radius: 22px;
  padding: 15px;
  min-width: 0;
}

.collection-panel-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.collection-panel-head.compact {
  min-height: 30px;
  margin-bottom: 8px;
}

.collection-panel-head h2 {
  margin: 0;
  color: var(--cx-text);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: -.02em;
}

.collection-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: rgba(2,6,23,.14);
}

.collection-segmented button {
  min-width: 32px;
  height: 27px;
  border: 0;
  border-radius: 7px;
  padding: 0 9px;
  background: transparent;
  color: var(--cx-muted);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.collection-segmented button.active {
  color: white;
  background: linear-gradient(135deg,#6366f1,#7c3aed);
  box-shadow: 0 4px 12px rgba(99,102,241,.22);
}

.vault-filter-grid input, .vault-filter-grid select {
  height: 34px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  outline: none;
  background: rgba(2,6,23,.14);
  color: var(--cx-text);
  padding: 0 10px;
  font-size: 8.5px;
}

body:not(.dark-mode) .vault-filter-grid input, body:not(.dark-mode) .vault-filter-grid select {
  background: rgba(255,255,255,.48);
}

/* ===== Kho Quyển ===== */

.vault-filter-panel {
  margin-bottom: 12px;
}

.vault-filter-grid {
  display: grid;
  grid-template-columns: minmax(250px,1.55fr) repeat(4,minmax(135px,.8fr));
  gap: 8px;
}

.vault-search-wrap {
  position: relative;
}

.vault-search-wrap i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #77849b;
  font-size: 10px;
  pointer-events: none;
}

.vault-search-wrap input {
  width: 100%;
  padding-left: 30px;
}

.vault-filter-grid select {
  width: 100%;
}

.vault-map-panel {
  margin-bottom: 12px;
}

.vault-group-chips {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
}

.vault-group-chip {
  min-height: 70px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  padding: 9px;
  background: rgba(255,255,255,.025);
  color: var(--cx-text);
  cursor: pointer;
  text-align: left;
  transition: .16s ease;
}

.vault-group-chip:hover,.vault-group-chip.active {
  border-color: rgba(129,140,248,.48);
  background: rgba(99,102,241,.08);
}

.vault-group-chip i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(99,102,241,.11);
  color: #9ca3ff;
  font-size: 16px;
}

.vault-group-chip strong {
  display: block;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-group-chip span {
  display: block;
  font-size: 9px;
  color: var(--cx-muted);
  margin-top: 4px;
}

.vault-main-layout {
  display: grid;
  grid-template-columns: minmax(0,1.85fr) minmax(290px,.72fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.vault-books-panel {
  min-height: 720px;
}

.vault-detail-panel {
  position: sticky;
  top: 16px;
}

.vault-book-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 8px;
}

.vault-book-card {
  min-width: 0;
  border: 1px solid var(--cx-line);
  border-radius: 13px;
  padding: 6px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: .16s ease;
  position: relative;
}

.vault-book-card:hover,.vault-book-card.selected {
  border-color: rgba(129,140,248,.48);
  transform: translateY(-2px);
  background: rgba(99,102,241,.055);
}

.vault-book-cover {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(148,163,184,.08);
}

.vault-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vault-book-state {
  position: absolute;
  left: 5px;
  bottom: 5px;
  min-height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: rgba(5,10,20,.70);
  color: #86efac;
  font-size: 6.5px;
  font-weight: 750;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.vault-book-state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
}

.vault-book-card h3 {
  margin: 6px 0 0;
  color: var(--cx-text);
  font-size: 8px;
  line-height: 1.2;
  font-weight: 720;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-book-card p {
  margin: 3px 0 0;
  color: var(--cx-muted);
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-book-card small {
  display: block;
  margin-top: 3px;
  color: #9ca3ff;
  font-size: 7px;
  font-weight: 700;
}

.vault-book-grid.list-mode {
  grid-template-columns: 1fr;
}

.vault-book-grid.list-mode .vault-book-card {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px;
}

.vault-book-grid.list-mode .vault-book-cover {
  width: 48px;
  aspect-ratio: 2/3;
}

.vault-book-grid.list-mode .vault-book-card h3 {
  font-size: 10px;
  margin: 0;
}

.vault-book-grid.list-mode .vault-book-card p {
  font-size: 8px;
}

.vault-book-grid.list-mode .vault-book-card small {
  font-size: 8px;
  text-align: right;
  margin: 0;
}

.vault-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  min-height: 32px;
}

.vault-pagination button {
  min-width: 30px;
  height: 30px;
  border: 1px solid var(--cx-line);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: var(--cx-muted);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.vault-pagination button.active {
  background: linear-gradient(135deg,#6366f1,#7c3aed);
  color: white;
  border-color: transparent;
}

.vault-detail-cover {
  width: 150px;
  max-width: 70%;
  aspect-ratio: 2/3;
  margin: 4px auto 11px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  box-shadow: 0 12px 30px rgba(2,6,23,.22);
}

.vault-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vault-detail-title {
  text-align: center;
}

.vault-detail-title h3 {
  margin: 0;
  color: var(--cx-text);
  font-size: 14px;
  font-weight: 760;
}

.vault-detail-title p {
  margin: 4px 0 0;
  color: #a5b4fc;
  font-size: 9px;
  font-weight: 700;
}

.vault-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 13px;
}

.vault-detail-cell {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: rgba(255,255,255,.022);
}

.vault-detail-cell span {
  display: block;
  color: var(--cx-muted);
  font-size: 7px;
}

.vault-detail-cell strong {
  display: block;
  color: var(--cx-text);
  font-size: 9px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-detail-price {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(129,140,248,.18);
  border-radius: 11px;
  background: rgba(99,102,241,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vault-detail-price span {
  font-size: 8px;
  color: var(--cx-muted);
}

.vault-detail-price strong {
  font-size: 13px;
  color: #a5b4fc;
}

.vault-detail-open {
  width: 100%;
  height: 36px;
  margin-top: 9px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg,#6366f1,#7c3aed);
  color: white;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.vault-bottom-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: 12px;
}

.vault-recent-list,.vault-side-list {
  display: grid;
  gap: 7px;
}

.vault-recent-row,.vault-side-row {
  min-width: 0;
  min-height: 45px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: 1px solid rgba(148,163,184,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.vault-recent-row img,.vault-side-row img {
  width: 34px;
  height: 45px;
  object-fit: cover;
  border-radius: 6px;
}

.vault-recent-row strong,.vault-side-row strong {
  display: block;
  font-size: 8px;
  color: var(--cx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-recent-row span,.vault-side-row span {
  display: block;
  font-size: 7px;
  color: var(--cx-muted);
  margin-top: 2px;
}

.vault-recent-row b,.vault-side-row b {
  font-size: 8px;
  color: #a5b4fc;
  white-space: nowrap;
}

@media (max-width:1180px){
  .collection-stat-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  
  
  
  .vault-filter-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .vault-filter-grid .vault-search-wrap {
    grid-column: span 3;
  }
  .vault-main-layout {
    grid-template-columns: 1fr 300px;
  }
  .vault-book-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
}

@media (max-width:820px){
  #book-vault-view {
    width: min(100% - 16px,1480px);
    padding-top: 6px;
  }
  .collection-page-head {
    grid-template-columns: auto minmax(0,1fr);
    padding: 14px;
    border-radius: 20px;
  }
  .collection-head-badge {
    display: none;
  }
  .collection-page-title {
    gap: 10px;
  }
  .collection-page-icon {
    width: 42px;
    height: 42px;
  }
  .collection-page-title h1 {
    font-size: 21px;
  }
  .collection-stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .vault-bottom-layout {
    grid-template-columns: 1fr;
  }
  
  
  
  
  
  .collection-panel-head {
    flex-wrap: wrap;
  }
  .vault-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .vault-filter-grid .vault-search-wrap {
    grid-column: 1/-1;
  }
  .vault-group-chips {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .vault-main-layout {
    grid-template-columns: 1fr;
  }
  .vault-detail-panel {
    position: static;
  }
  .vault-book-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}

@media (max-width:540px){
  .collection-page-head {
    gap: 9px;
  }
  .collection-back-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .collection-page-title .collection-page-icon {
    display: none;
  }
  .collection-page-title h1 {
    font-size: 21px;
  }
  .collection-page-title p {
    font-size: 9px;
  }
  .collection-stat-grid {
    gap: 7px;
  }
  .collection-stat-card {
    min-height: 96px;
    padding: 13px;
    grid-template-columns: 50px minmax(0,1fr);
    gap: 11px;
    border-radius: 18px;
  }
  .collection-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 19px;
  }
  .collection-stat-card strong {
    font-size: 22px;
  }
  .collection-panel {
    padding: 11px;
    border-radius: 18px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .vault-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vault-filter-grid .vault-search-wrap {
    grid-column: 1 / -1;
  }
  .vault-group-chips {
    grid-template-columns: 1fr 1fr;
  }
  .vault-book-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

/* Stat cards: icon lớn và cân với khung */

/* Vũ trụ: bỏ panel/card feeling */

/* Điểm sáng tự do */

/* Tâm giữa: không vòng tròn, chỉ text + glow tự do */

/* Publisher node: tuyệt đối không có vòng/card */

/* Nhãn thể loại chỉ như chữ nổi */

/* Bỏ mấy decoration cũ */

@media (max-width:820px){
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

#book-vault-view .collection-stat-card > .collection-stat-icon {
  margin-top: 0 !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  padding: 0 !important;
}



#book-vault-view .collection-stat-card > .collection-stat-icon i {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Chỉ label bên phải mới nhận style chữ; không áp vào khung icon */

#book-vault-view .collection-stat-card > div > span {
  display: block !important;
}

@media (max-width:820px){
  
  #book-vault-view .collection-stat-card > .collection-stat-icon i {
    font-size: 22px !important;
  }
}

:root {
  --app-sidebar-w: 252px;
  --app-topbar-h: 70px;
  --app-shell-gap: 22px;
  --nav-bg: rgba(8,18,35,.84);
  --nav-border: rgba(148,163,184,.13);
  --nav-text: #aab7cf;
  --nav-text-active: #eef3ff;
  --nav-active: linear-gradient(135deg,rgba(79,70,229,.25),rgba(59,130,246,.16));
}

body:not(.dark-mode) {
  --nav-bg: rgba(247,250,255,.84);
  --nav-border: rgba(100,116,139,.16);
  --nav-text: #39495f;
  --nav-text-active: #24324b;
  --nav-active: linear-gradient(135deg,rgba(99,102,241,.12),rgba(59,130,246,.08));
}

/* ===== Desktop application shell ===== */

/* Keep the body gradient spanning the full viewport even on short views.
   Previously html/body each painted their own background: on pages like
   Phụ kiện the body's height stopped after the last card, exposing the
   differently colored root canvas and creating a full-width horizontal seam. */
html {
  min-height: 100%;
}

body {
  box-sizing: border-box;
  min-height: 100dvh;
  padding: calc(var(--app-topbar-h) + 18px) var(--app-shell-gap) 30px calc(var(--app-sidebar-w) + var(--app-shell-gap)) !important;
}

#app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--app-sidebar-w);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 16px;
  border-right: 1px solid var(--nav-border);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  backdrop-filter: blur(28px) saturate(1.18);
  box-shadow: 14px 0 40px rgba(2,6,23,.08);
}

.app-sidebar-brand {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 8px 14px;
  border: 0;
  background: transparent;
  color: var(--ui-text,#eef3ff);
  text-align: left;
  cursor: pointer;
}

.app-sidebar-brand-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: block;
  flex: none;
  overflow: hidden;
  background-color: transparent;
  background-image: url("./images/branding/tutruyen-logo-light.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 22px rgba(59,130,246,.12);
}

body.dark-mode .app-sidebar-brand-icon {
  background-image: url("./images/branding/tutruyen-logo-dark.webp");
}

/* Compatibility: if an older cached HTML still contains the former icon child,
   the brand tile itself remains the single visual source. */
.app-sidebar-brand-icon > i,
.app-sidebar-brand-icon > img {
  display: none !important;
}

.app-sidebar-brand-copy {
  min-width: 0;
  display: block;
}

.app-sidebar-brand-copy strong {
  display: block;
  font-size: 18px;
  font-weight: 840;
  letter-spacing: -.025em;
  color: var(--ui-text,#eef3ff);
}

.app-sidebar-brand-copy small {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--nav-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.app-sidebar-item {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--nav-text);
  text-align: left;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 720;
  transition: background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}

.app-sidebar-item i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: inherit;
}

.app-sidebar-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-item:hover {
  color: var(--nav-text-active);
  background: rgba(99,102,241,.055);
  transform: translateX(1px);
}

.app-sidebar-item.active {
  color: var(--nav-text-active);
  border-color: rgba(129,140,248,.20);
  background: var(--nav-active);
  box-shadow: inset 3px 0 0 #818cf8,0 8px 20px rgba(2,6,23,.05);
}

.app-sidebar-item.active i {
  color: #a5b4fc;
}

.app-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--nav-border);
}

.app-sidebar-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 4px;
  color: var(--nav-text);
  font-size: 10.5px;
  opacity: .78;
}

.app-sidebar-note i {
  color: #a78bfa;
}

/* ===== Header ngang ===== */

#app-global-header-hotzone {
  display: none!important;
}

#app-global-header-wrap {
  position: fixed!important;
  top: 0!important;
  left: var(--app-sidebar-w)!important;
  right: 0!important;
  width: auto!important;
  max-width: none!important;
  height: var(--app-topbar-h)!important;
  margin: 0!important;
  padding: 0 22px!important;
  z-index: 1150!important;
  overflow: visible!important;
  transform: none!important;
  opacity: 1!important;
  pointer-events: auto!important;
}

body.subpage-header-autohide #app-global-header-wrap,
body.subpage-header-autohide #app-global-header-wrap:not(.is-revealed),
body.subpage-header-autohide #app-global-header-wrap.is-revealed {
  transform: none!important;
  opacity: 1!important;
  max-height: none!important;
  pointer-events: auto!important;
}

#app-global-header-wrap .app-global-header-card {
  width: 100%!important;
  max-width: none!important;
  height: var(--app-topbar-h)!important;
  min-height: var(--app-topbar-h)!important;
  display: grid!important;
  grid-template-columns: auto minmax(260px,600px) minmax(0,1fr)!important;
  align-items: center!important;
  gap: 14px!important;
  margin: 0!important;
  padding: 0!important;
  border: 0!important;
  border-bottom: 1px solid var(--nav-border)!important;
  border-radius: 0!important;
  background: rgba(8,18,35,.56)!important;
  box-shadow: none!important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18)!important;
  backdrop-filter: blur(24px) saturate(1.18)!important;
}

body:not(.dark-mode) #app-global-header-wrap .app-global-header-card {
  background: rgba(248,251,255,.66)!important;
}

#app-global-header-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8,18,35,.56);
  border-bottom: 1px solid var(--nav-border);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
}

body:not(.dark-mode) #app-global-header-wrap::before {
  background: rgba(248,251,255,.66);
}

#app-sidebar-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: var(--ui-text,#eef3ff);
  cursor: pointer;
}

#app-sidebar-close {
  display: none;
  position: absolute;
  top: 14px;
  right: 12px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--nav-border);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: var(--nav-text);
  cursor: pointer;
  z-index: 1;
}

#app-sidebar-close:hover {
  color: var(--nav-text-active);
  border-color: rgba(129,140,248,.34);
  background: rgba(99,102,241,.08);
}

.app-header-search {
  height: 40px;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: var(--nav-text);
  text-align: left;
  cursor: pointer;
  transition: .16s ease;
}

body:not(.dark-mode) .app-header-search {
  background: rgba(255,255,255,.42);
}

.app-header-search:hover {
  border-color: rgba(129,140,248,.34);
  background: rgba(99,102,241,.055);
}

.app-header-search i {
  font-size: 12px;
  color: #8794ad;
}

.app-header-search span {
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-search kbd {
  min-width: 42px;
  padding: 3px 6px;
  border: 1px solid var(--nav-border);
  border-radius: 7px;
  font-size: 7px;
  font-family: inherit;
  text-align: center;
  color: #7f8ba2;
  background: rgba(255,255,255,.04);
}

.app-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

#theme-toggle {
  position: static!important;
  inset: auto!important;
  width: 40px!important;
  height: 40px!important;
  min-width: 40px!important;
  min-height: 40px!important;
  display: grid!important;
  place-items: center!important;
  margin: 0!important;
  padding: 0!important;
  border: 1px solid var(--nav-border)!important;
  border-radius: 12px!important;
  background: rgba(255,255,255,.04)!important;
  color: #aab6cf!important;
  box-shadow: none!important;
  transform: none!important;
  -webkit-backdrop-filter: none!important;
  backdrop-filter: none!important;
}

#theme-toggle:hover {
  transform: none!important;
  border-color: rgba(129,140,248,.34)!important;
  background: rgba(99,102,241,.06)!important;
}

#theme-toggle i {
  font-size: 14px!important;
}

.app-header-login,.app-header-user {
  min-height: 44px;
  display: flex!important;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 5px!important;
  border: 1px solid var(--nav-border)!important;
  border-radius: 14px!important;
  background: rgba(255,255,255,.035)!important;
  color: var(--ui-text,#eef3ff)!important;
  box-shadow: none!important;
  cursor: pointer;
}

body:not(.dark-mode) .app-header-login,body:not(.dark-mode) .app-header-user {
  background: rgba(255,255,255,.48)!important;
}

#auth-login-btn.hidden,#auth-user-box.hidden {
  display: none!important;
}

.app-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #c4b5fd;
  background: linear-gradient(135deg,rgba(99,102,241,.24),rgba(244,114,182,.12));
  border: 1px solid rgba(167,139,250,.20);
  font-size: 12px;
}

.app-header-login-copy,.app-header-user-copy {
  display: block;
  min-width: 0;
  text-align: left;
}

.app-header-login-copy strong,.app-header-user-copy strong {
  display: block;
  max-width: 150px;
  font-size: 9px;
  font-weight: 780;
  color: var(--ui-text,#eef3ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-login-copy small,.app-header-user-copy small {
  display: block;
  margin-top: 2px;
  font-size: 7.5px;
  color: var(--nav-text);
}

.app-header-logout {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7f8ba2;
  cursor: pointer;
}

.app-header-logout:hover {
  color: #fb7185;
  background: rgba(244,63,94,.08);
}

/* Nội dung sử dụng toàn bộ vùng bên phải sidebar */

#shelf-view, #goods-view, #selling-view, #detail-view, #spending-view, #release-view, #book-vault-view {
  width: 100%!important;
  max-width: none!important;
  margin-left: 0!important;
  margin-right: 0!important;
}

body.header-detail-width #app-global-header-wrap {
  width: auto!important;
  max-width: none!important;
  left: var(--app-sidebar-w)!important;
  right: 0!important;
}

#app-sidebar-overlay {
  display: none;
}

/* ===== Màn hình rộng: tận dụng không gian, 10 bộ / hàng ===== */

@media (min-width: 1800px){
}

/* ===== Tablet / mobile: sidebar thành drawer ===== */

@media (max-width:900px), (orientation:landscape) and (max-height:600px) and (max-width:1200px){
  :root {
    --app-sidebar-w: 252px;
    --app-topbar-h: 62px;
    --app-shell-gap: 12px

  ;}
  body {
    padding: calc(var(--app-topbar-h) + 12px) 10px 22px 10px!important;
  }
  #app-sidebar {
    width: var(--app-sidebar-w);
    transform: translateX(-104%);
    transition: transform .22s ease;
    box-shadow: 20px 0 50px rgba(2,6,23,.22);
  }
  /* Portrait drawer: use the same mint/lilac/blush palette as the page
     instead of the near-opaque white v637 tint. Keep the existing sidebar
     backdrop blur and all landscape/desktop rules unchanged. */
  @media (orientation: portrait) {
    body:not(.dark-mode) {
      --nav-bg:
        radial-gradient(ellipse 95% 46% at 2% 0%, rgba(16,185,129,.25), transparent 76%),
        radial-gradient(ellipse 85% 48% at 110% 8%, rgba(124,58,237,.13), transparent 78%),
        radial-gradient(ellipse 105% 50% at 18% 100%, rgba(236,72,153,.11), transparent 80%),
        rgba(243,248,253,.68);
    }
    body.dark-mode { --nav-bg: rgba(8,18,35,.92); }
  }
  #app-sidebar .app-sidebar-brand {
    padding-right: 48px;
  }
  #app-sidebar-close {
    display: grid;
  }
  body.app-sidebar-open #app-sidebar {
    transform: none;
  }
  #app-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    border: 0;
    background: rgba(2,6,23,.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  body.app-sidebar-open #app-sidebar-overlay {
    display: block;
  }
  #app-global-header-wrap {
    left: 0!important;
    padding: 0 10px!important;
  }
  body.header-detail-width #app-global-header-wrap {
    left: 0!important;
    right: 0!important;
  }
  #app-sidebar-toggle {
    display: grid;
    place-items: center;
  }
  #app-global-header-wrap .app-global-header-card {
    gap: 8px!important;
  }
  .app-header-search {
    height: 38px;
  }
  .app-header-search kbd {
    display: none;
  }
  .app-header-actions {
    gap: 6px;
  }
  #theme-toggle {
    width: 38px!important;
    height: 38px!important;
    min-width: 38px!important;
    min-height: 38px!important;
  }
  .app-header-login-copy,.app-header-user-copy {
    display: none;
  }
  .app-header-login,.app-header-user {
    min-height: 38px;
    padding: 2px!important;
    border-radius: 12px!important;
  }
  .app-header-avatar {
    width: 32px;
    height: 32px;
  }
  .app-header-logout {
    width: 26px;
    height: 26px;
  }

}

@media (max-width:520px){
  .app-header-search span {
    font-size: 8.5px;
  }
  .app-header-user .app-header-logout {
    display: none;
  }
  .app-header-user,.app-header-login {
    border: 0!important;
    background: transparent!important;
  }
  #app-global-header-wrap .app-global-header-card {
    grid-template-columns: 38px minmax(0,1fr) auto!important;
  }
}

/* ---------- THANH LÝ ---------- */

@media (min-width: 901px) and (max-width: 1799px) {
  #selling-view .selling-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 1800px) {
  #selling-view .selling-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #selling-view .selling-card {
    padding: 7px !important;
    border-radius: 13px !important;
  }
  #selling-view .selling-card-cover {
    border-radius: 9px !important;
  }
  #selling-view .selling-card-title {
    margin-top: 7px !important;
    line-height: 1.28 !important;
  }
}

/* ---------- LỊCH PHÁT HÀNH ---------- */

@media (min-width: 1100px) and (max-width: 1799px) {
  #release-view .release-books-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (min-width: 1800px) {
  #release-view .release-books-row {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #release-view .release-day-group {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }
  #release-view .release-book-card {
    padding: 8px !important;
    border-radius: 20px !important;
  }
  #release-view .release-book-cover {
    border-radius: 15px !important;
  }
  #release-view .release-book-title {
    display: block !important;
    height: 1.34em !important;
    min-height: 1.34em !important;
    max-height: 1.34em !important;
    margin-top: 8px !important;
    font-size: 15px !important;
    line-height: 1.34 !important;
    font-weight: 800 !important;
    letter-spacing: -.018em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  #release-view .release-book-meta {
    margin-top: 5px !important;
    font-size: 10.5px !important;
  }
  #release-view .release-book-price {
    margin-top: 5px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
  }
}

@media (min-width: 901px) {
  /* ==========================================================
     1. TỦ TRUYỆN — chữ dưới bìa rõ và cân hơn
     ========================================================== */
  #shelf-view #manga-grid .manga-card-info {
    gap: 9px !important;
  }
  #shelf-view #manga-grid .manga-card-title {
    font-size: clamp(14px,.76vw,17px) !important;
    line-height: 1.34 !important;
    min-height: 2.68em !important;
    font-weight: 800 !important;
  }
  #shelf-view #manga-grid .manga-card-meta-panel {
    gap: 9px !important;
  }
  #shelf-view #manga-grid .manga-card-meta-line {
    font-size: clamp(10px,.56vw,12px) !important;
    line-height: 1.35 !important;
  }
  #shelf-view #manga-grid .manga-card-meta-line > i {
    font-size: clamp(9px,.50vw,11px) !important;
  }
  #shelf-view #manga-grid .manga-card-rating-chip,
  #shelf-view #manga-grid .manga-card-volume-chip {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: clamp(10px,.55vw,12px) !important;
    gap: 4px !important;
    border-radius: 9px !important;
  }
  #shelf-view #manga-grid .manga-card-rating-chip .stars-compact {
    font-size: clamp(9px,.49vw,11px) !important;
  }
  #shelf-view #manga-grid .manga-card-progress-copy {
    margin-bottom: 6px !important;
    font-size: clamp(9.5px,.52vw,11px) !important;
  }
  #shelf-view #manga-grid .manga-card-progress-copy strong {
    font-size: clamp(9.5px,.52vw,11px) !important;
  }
  #shelf-view #manga-grid .manga-card-progress-track {
    height: 5px !important;
  }
  #shelf-view #manga-grid .manga-card-price-panel {
    min-height: 43px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
  }
  #shelf-view #manga-grid .manga-card-sale-price {
    font-size: clamp(14px,.75vw,17px) !important;
    font-weight: 850 !important;
  }
  #shelf-view #manga-grid .manga-card-cover-price {
    font-size: clamp(9px,.50vw,11px) !important;
  }
  /* ==========================================================
     2. THANH LÝ — bỏ kiểu chữ siêu nhỏ ở chế độ 10 cột
     ========================================================== */
  #selling-view .selling-card {
    padding: 9px !important;
  }
  #selling-view .selling-card-title {
    margin-top: 9px !important;
    font-size: clamp(12.5px,.67vw,15px) !important;
    line-height: 1.34 !important;
    font-weight: 850 !important;
  }
  #selling-view .selling-card-sub {
    margin-top: 5px !important;
    font-size: clamp(10px,.54vw,12px) !important;
    line-height: 1.35 !important;
  }
  #selling-view .selling-card-prices {
    margin-top: 8px !important;
    gap: 7px !important;
  }
  #selling-view .selling-card-sale {
    font-size: clamp(13px,.70vw,16px) !important;
    font-weight: 900 !important;
  }
  #selling-view .selling-card-original {
    font-size: clamp(9.5px,.50vw,11px) !important;
  }
  /* ==========================================================
     3. BẢN ĐỒ BỘ SƯU TẬP — các bảng không còn chữ li ti
     ========================================================== */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ==========================================================
     4. KHO QUYỂN — thông tin dưới bìa + panel chi tiết
     ========================================================== */
  #book-vault-view .collection-panel-head h2 {
    font-size: clamp(16px,.85vw,20px) !important;
  }
  #book-vault-view .collection-eyebrow {
    font-size: clamp(9px,.50vw,11px) !important;
  }
  #book-vault-view .vault-book-card {
    padding: 8px !important;
    border-radius: 15px !important;
  }
  #book-vault-view .vault-book-state {
    left: 7px !important;
    bottom: 7px !important;
    min-height: 23px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
  }
  #book-vault-view .vault-book-state::before {
    width: 6px !important;
    height: 6px !important;
  }
  #book-vault-view .vault-book-card h3 {
    margin-top: 8px !important;
    font-size: clamp(11.5px,.62vw,14px) !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
  }
  #book-vault-view .vault-book-card p {
    margin-top: 5px !important;
    font-size: clamp(9.5px,.52vw,11.5px) !important;
    line-height: 1.3 !important;
  }
  #book-vault-view .vault-book-card small {
    margin-top: 5px !important;
    font-size: clamp(10px,.55vw,12px) !important;
    font-weight: 800 !important;
  }
  #book-vault-view .vault-detail-cover {
    width: 180px !important;
    margin-bottom: 15px !important;
  }
  #book-vault-view .vault-detail-title h3 {
    font-size: clamp(16px,.90vw,20px) !important;
    font-weight: 820 !important;
  }
  #book-vault-view .vault-detail-title p {
    margin-top: 6px !important;
    font-size: clamp(11px,.60vw,13px) !important;
  }
  #book-vault-view .vault-detail-grid {
    gap: 9px !important;
    margin-top: 16px !important;
  }
  #book-vault-view .vault-detail-cell {
    padding: 10px !important;
  }
  #book-vault-view .vault-detail-cell span {
    font-size: clamp(9px,.50vw,11px) !important;
  }
  #book-vault-view .vault-detail-cell strong {
    margin-top: 5px !important;
    font-size: clamp(11px,.60vw,13px) !important;
  }
  #book-vault-view .vault-detail-price {
    margin-top: 10px !important;
    padding: 12px !important;
  }
  #book-vault-view .vault-detail-price span {
    font-size: clamp(9.5px,.52vw,11px) !important;
  }
  #book-vault-view .vault-detail-price strong {
    font-size: clamp(14px,.78vw,17px) !important;
  }
  #book-vault-view .vault-detail-open {
    height: 42px !important;
    margin-top: 11px !important;
    font-size: clamp(10.5px,.57vw,12.5px) !important;
  }
  #book-vault-view .vault-recent-row,
  #book-vault-view .vault-side-row {
    min-height: 58px !important;
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    gap: 10px !important;
    padding: 7px 8px !important;
  }
  #book-vault-view .vault-recent-row img,
  #book-vault-view .vault-side-row img {
    width: 42px !important;
    height: 56px !important;
  }
  #book-vault-view .vault-recent-row strong,
  #book-vault-view .vault-side-row strong {
    font-size: clamp(10px,.55vw,12px) !important;
  }
  #book-vault-view .vault-recent-row span,
  #book-vault-view .vault-side-row span {
    margin-top: 3px !important;
    font-size: clamp(9px,.49vw,10.5px) !important;
  }
  #book-vault-view .vault-recent-row b,
  #book-vault-view .vault-side-row b {
    font-size: clamp(9.5px,.52vw,11.5px) !important;
  }
  /* ==========================================================
     5. CHI TIÊU — Top 10 dễ đọc hơn, cân với thumbnail
     ========================================================== */
  #spending-view .spending-top-panel .spending-panel-head {
    padding: 20px 20px 13px !important;
  }
  #spending-view .spending-top-panel .spending-panel-eyebrow {
    font-size: 11px !important;
  }
  #spending-view .spending-top-panel h2 {
    font-size: clamp(18px,.95vw,22px) !important;
  }
  #spending-view .spending-top-list {
    gap: 9px !important;
    padding: 7px 20px 20px !important;
  }
  #spending-view .spending-top-row {
    grid-template-columns: 32px 50px minmax(0,1fr) auto !important;
    gap: 12px !important;
    min-height: 72px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
  }
  #spending-view .spending-top-rank {
    font-size: 16px !important;
    font-weight: 800 !important;
  }
  #spending-view .spending-top-cover {
    width: 50px !important;
    height: 64px !important;
    border-radius: 9px !important;
  }
  #spending-view .spending-top-title {
    font-size: clamp(12.5px,.68vw,15px) !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
  }
  #spending-view .spending-top-sub {
    margin-top: 5px !important;
    gap: 7px !important;
    font-size: clamp(10px,.54vw,12px) !important;
  }
  #spending-view .spending-top-progress {
    height: 4px !important;
    margin-top: 7px !important;
  }
  #spending-view .spending-top-money {
    font-size: clamp(12px,.66vw,15px) !important;
    font-weight: 800 !important;
  }
}

/* Giá card Tủ Truyện trên điện thoại xoay ngang: vẫn là một cụm cân giữa,
   nhưng co theo card nhiều cột và rút gọn giá bìa trước khi có nguy cơ tràn. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  #shelf-view #manga-grid:not(.shelf-list-layout) .manga-card-price-panel {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 5px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  #shelf-view #manga-grid:not(.shelf-list-layout) .manga-card-sale-price {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 62% !important;
    font-size: clamp(11px, 1.35vw, 13px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #shelf-view #manga-grid:not(.shelf-list-layout) .manga-card-cover-price {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 32% !important;
    font-size: clamp(7.5px, .9vw, 9px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Màn hình rất rộng: giữ 10 cột nhưng không thu chữ xuống nữa */

@media (min-width: 1800px) {
  #selling-view .selling-card-title {
    font-size: 13px !important;
  }
  #selling-view .selling-card-sub {
    font-size: 10.5px !important;
  }
  #selling-view .selling-card-sale {
    font-size: 14px !important;
  }
  #selling-view .selling-card-original {
    font-size: 10px !important;
  }
  #shelf-view #manga-grid .manga-card-title {
    font-size: 15px !important;
  }
  #shelf-view #manga-grid .manga-card-meta-line {
    font-size: 10.5px !important;
  }
  #shelf-view #manga-grid .manga-card-rating-chip,
  #shelf-view #manga-grid .manga-card-volume-chip {
    font-size: 10.5px !important;
  }
  #shelf-view #manga-grid .manga-card-sale-price {
    font-size: 15px !important;
  }
}

#spending-view .spending-timeline-head {
  padding: 20px 20px 13px !important;
}

#spending-view .spending-timeline-head .spending-panel-eyebrow {
  font-size: 11px !important;
  letter-spacing: .16em !important;
}

#spending-view .spending-timeline-head h2 {
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

#spending-view .spending-timeline-head .spending-soft-chip {
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 10.5px !important;
}

#spending-view .spending-timeline {
  padding: 7px 18px 12px !important;
}

#spending-view .spending-timeline-group {
  margin-bottom: 18px !important;
}

#spending-view .spending-timeline-group-title {
  gap: 10px !important;
  margin: 8px 0 10px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
}

#spending-view .spending-timeline-row {
  grid-template-columns: 54px minmax(0,1fr) auto !important;
  gap: 13px !important;
  min-height: 82px !important;
  padding: 11px 12px !important;
  margin-bottom: 8px !important;
  border-radius: 16px !important;
}

#spending-view .spending-timeline-row::before {
  top: 12px !important;
  bottom: 12px !important;
  width: 4px !important;
}

#spending-view .spending-timeline-cover {
  width: 54px !important;
  height: 70px !important;
  border-radius: 9px !important;
}

#spending-view .spending-timeline-main {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

#spending-view .spending-timeline-type {
  align-self: flex-start !important;
  padding: 4px 8px !important;
  margin-bottom: 6px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
}

#spending-view .spending-timeline-name {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

#spending-view .spending-timeline-date {
  margin-top: 5px !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}

#spending-view .spending-timeline-price {
  padding-left: 10px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

/* Cửa sổ hẹp vẫn lớn hơn bản cũ nhưng không bị chật */

@media (max-width:720px){
  #spending-view .spending-timeline-head {
    padding: 16px 13px 10px !important;
  }
  #spending-view .spending-timeline-head h2 {
    font-size: 18px !important;
  }
  #spending-view .spending-timeline {
    padding: 5px 10px 10px !important;
  }
  #spending-view .spending-timeline-group-title {
    font-size: 12px !important;
  }
  #spending-view .spending-timeline-row {
    gap: 10px !important;
  }
  #spending-view .spending-timeline-type {
    font-size: 9.5px !important;
    padding: 3px 7px !important;
    margin-bottom: 5px !important;
  }
  #spending-view .spending-timeline-name {
    font-size: 12.5px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  #spending-view .spending-timeline-date {
    font-size: 10.5px !important;
  }
  #spending-view .spending-timeline-price {
    padding-left: 0 !important;
    font-size: 12.5px !important;
  }
}

/* ===== BẢN ĐỒ + KHO QUYỂN: HEADER ===== */

#book-vault-view .collection-page-head {
  margin-bottom: 9px !important;
}

#book-vault-view .collection-page-kicker {
  margin-bottom: 3px !important;
}

#book-vault-view .collection-page-title p {
  margin-top: 3px !important;
}

/* ===== BẢN ĐỒ + KHO QUYỂN: 5 THẺ THỐNG KÊ ===== */

#book-vault-view .collection-stat-grid {
  gap: 8px !important;
  margin-bottom: 9px !important;
}

#book-vault-view .collection-stat-card > .collection-stat-icon {
  min-height: 50px !important;
  font-size: 20px !important;
  margin: 0 !important;
}

#book-vault-view .collection-stat-card > div > span {
  margin-top: 4px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}

/* ===== CHI TIÊU: HERO ĐẦU TRANG ===== */

/* ===== TABLET / DỌC ===== */

@media (max-width:820px){
  #book-vault-view .collection-page-head {
    grid-template-columns: 32px minmax(0,1fr) !important;
  }
  /* 1 hàng cuộn ngang thay vì 2–3 hàng */
  #book-vault-view .collection-stat-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 4px !important;
    margin-bottom: 7px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  #book-vault-view .collection-stat-grid::-webkit-scrollbar {
    display: none;
  }
  #book-vault-view .collection-stat-card {
    flex: 0 0 158px !important;
    min-width: 158px !important;
    min-height: 66px !important;
    padding: 8px 9px !important;
    grid-template-columns: 40px minmax(0,1fr) !important;
    gap: 8px !important;
    border-radius: 15px !important;
    scroll-snap-align: start;
  }
  #book-vault-view .collection-stat-card > .collection-stat-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
  #book-vault-view .collection-stat-card strong {
    font-size: 19px !important;
  }
  #book-vault-view .collection-stat-card > div > span {
    margin-top: 3px !important;
    font-size: 9px !important;
  }
  #book-vault-view .collection-stat-card small {
    margin-top: 2px !important;
    font-size: 7.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ===== ĐIỆN THOẠI HẸP ===== */

@media (max-width:430px){
  #book-vault-view .collection-stat-card {
    flex-basis: 148px !important;
    min-width: 148px !important;
    min-height: 62px !important;
  }
}

/* Dòng quay lại phía trên */

#selling-view > .flex.justify-between.items-center:first-child {
  min-height: 32px !important;
  margin-bottom: 0 !important;
}

#selling-view > .flex.justify-between.items-center:first-child .compact-icon-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

#selling-view > .flex.justify-between.items-center:first-child > div:last-child {
  font-size: 9px !important;
}

/* 3 ô số liệu bên phải */

#selling-view #selling-manga-count,
#selling-view #selling-volume-count,
#selling-view #selling-goods-count {
  margin-top: 3px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Tabs cũng thu nhẹ cho cùng nhịp */

#selling-view .selling-summary-tabs {
  padding: 3px !important;
  gap: 3px !important;
  border-radius: 10px !important;
}

#selling-view .selling-summary-tab {
  min-height: 31px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
}

/* Tablet / dọc */

@media (max-width:820px){
  #selling-view {
    gap: 8px !important;
  }
  #selling-view > .flex.justify-between.items-center:first-child {
    min-height: 30px !important;
  }
  #selling-view #selling-manga-count,
  #selling-view #selling-volume-count,
  #selling-view #selling-goods-count {
    font-size: 16px !important;
  }
}

/* Điện thoại hẹp: 3 số liệu thành một hàng nhỏ phía dưới tiêu đề */

@media (max-width:560px){
  #selling-view #selling-manga-count,
  #selling-view #selling-volume-count,
  #selling-view #selling-goods-count {
    font-size: 15px !important;
  }
  #selling-view .selling-summary-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  #selling-view .selling-summary-tab {
    min-width: 0 !important;
    padding: 5px 4px !important;
    font-size: 9.5px !important;
  }
}

#app-global-header-wrap .app-header-actions {
  position: fixed !important;
  top: 10px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1320 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate !important;
}

/* Ép cả 2 khung luôn sắc nét, không dùng blur nền */

#app-global-header-wrap .app-header-actions #theme-toggle,
#app-global-header-wrap .app-header-actions #auth-login-btn,
#app-global-header-wrap .app-header-actions #auth-user-box {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 22px rgba(2,6,23,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Theme */

#app-global-header-wrap .app-header-actions #theme-toggle {
  position: relative !important;
  inset: auto !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  border-radius: 13px !important;
  background: #101a2c !important;
  color: #fbbf24 !important;
}

#app-global-header-wrap .app-header-actions #theme-toggle i {
  font-size: 16px !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Login / user */

#app-global-header-wrap .app-header-actions .app-header-login,
#app-global-header-wrap .app-header-actions .app-header-user {
  min-height: 42px !important;
  height: 42px !important;
  padding: 4px 8px 4px 5px !important;
  gap: 8px !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  border-radius: 13px !important;
  background: #101a2c !important;
  color: #eef3ff !important;
}

#app-global-header-wrap .app-header-actions .app-header-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  background: #27234b !important;
  border-color: rgba(167,139,250,.30) !important;
  color: #c4b5fd !important;
  opacity: 1 !important;
  filter: none !important;
}

#app-global-header-wrap .app-header-actions .app-header-user-copy strong,
#app-global-header-wrap .app-header-actions .app-header-login-copy strong {
  max-width: 180px !important;
  color: #f8fafc !important;
  font-size: 9.5px !important;
  opacity: 1 !important;
}

#app-global-header-wrap .app-header-actions .app-header-user-copy small,
#app-global-header-wrap .app-header-actions .app-header-login-copy small {
  color: #9eabc2 !important;
  font-size: 7.5px !important;
  opacity: 1 !important;
}

#app-global-header-wrap .app-header-actions .app-header-logout {
  color: #9ba8be !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Light mode: vẫn rõ, nhưng dùng nền trắng gần đặc */

body:not(.dark-mode) #app-global-header-wrap .app-header-actions #theme-toggle,
body:not(.dark-mode) #app-global-header-wrap .app-header-actions .app-header-login,
body:not(.dark-mode) #app-global-header-wrap .app-header-actions .app-header-user {
  background: #f8fbff !important;
  border-color: rgba(100,116,139,.22) !important;
  box-shadow: 0 8px 22px rgba(30,41,59,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body:not(.dark-mode) #app-global-header-wrap .app-header-actions .app-header-user-copy strong,
body:not(.dark-mode) #app-global-header-wrap .app-header-actions .app-header-login-copy strong {
  color: #172033 !important;
}

body:not(.dark-mode) #app-global-header-wrap .app-header-actions .app-header-user-copy small,
body:not(.dark-mode) #app-global-header-wrap .app-header-actions .app-header-login-copy small {
  color: #64748b !important;
}

/* Chừa khoảng trống bên phải topbar để search/header không đè vào cụm tài khoản */

@media (min-width:901px) and (min-height:601px){
  #app-global-header-wrap {
    padding-right: 310px !important;
  }
  #app-global-header-wrap .app-global-header-card {
    grid-template-columns: minmax(260px,600px) minmax(0,1fr) !important;
  }
  #app-global-header-wrap #app-sidebar-toggle {
    display: none !important;
  }
  #app-global-header-wrap .app-header-search {
    grid-column: 1 !important;
  }
}

/* Tablet / mobile và điện thoại xoay ngang: actions là cột thật của header.
   Không dùng position:fixed và không chừa khoảng trắng giả bên phải. */

@media (max-width:900px), (orientation:landscape) and (max-height:600px) and (max-width:1200px){
  #app-global-header-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #app-global-header-wrap .app-global-header-card {
    grid-template-columns: 40px minmax(0,1fr) auto !important;
    column-gap: 8px !important;
  }
  #app-global-header-wrap #app-sidebar-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #app-global-header-wrap .app-header-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #app-global-header-wrap .app-header-actions {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  #app-global-header-wrap .app-header-actions #theme-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-login,
  #app-global-header-wrap .app-header-actions .app-header-user {
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
  #app-global-header-wrap .app-header-user-copy,
  #app-global-header-wrap .app-header-login-copy {
    display: none !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-logout {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
}

@media (max-width:560px){
  #app-global-header-wrap {
    padding-right: 96px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-user-copy,
  #app-global-header-wrap .app-header-actions .app-header-login-copy {
    display: none !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-login,
  #app-global-header-wrap .app-header-actions .app-header-user {
    padding: 4px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-logout {
    width: 25px !important;
    height: 25px !important;
  }
}

/* ===== Desktop thường ===== */

@media (min-width: 901px) and (max-width: 1799px){
  /* Tủ Truyện */
  #shelf-view #manga-grid.grid-cols-2 {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  /* Trang chi tiết > Tập Truyện */
  #detail-view #volumes-grid {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 12px !important;
  }
}

/* ===== Màn hình rộng ===== */

@media (min-width: 1800px){
  /* Ghi đè quy tắc 10 cột cũ */
  #shelf-view #manga-grid.grid-cols-2 {
    grid-template-columns: repeat(12,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  #shelf-view #manga-grid.grid-cols-2 > .manga-shelf-card {
    padding: 8px !important;
  }
  #shelf-view #manga-grid.grid-cols-2 .manga-card-cover-wrap {
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
  }
  /* Tập Truyện */
  #detail-view #volumes-grid {
    grid-template-columns: repeat(12,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  #detail-view #volumes-grid > .volume-grid-card,
  #detail-view #volumes-grid > div {
    min-width: 0 !important;
  }
  #detail-view #volumes-grid .volume-grid-card {
    padding: 8px !important;
    border-radius: 13px !important;
  }
}

/* Màn hình cực rộng: vẫn cố định 12 cột, không tăng thêm */

@media (min-width: 2600px){
  #shelf-view #manga-grid.grid-cols-2,
  #detail-view #volumes-grid {
    grid-template-columns: repeat(12,minmax(0,1fr)) !important;
  }
}

#detail-view #goods-grid {
  display: grid !important;
  grid-template-columns: repeat(1,minmax(0,1fr)) !important;
  align-items: start !important;
}

/* Tablet */

@media (min-width:640px) and (max-width:1023px){
  #detail-view #goods-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

/* Cửa sổ desktop nhỏ / thường */

@media (min-width:1024px) and (max-width:1439px){
  #detail-view #goods-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}

/* Cửa sổ lớn */

@media (min-width:1800px){
  #detail-view #goods-grid {
    grid-template-columns: repeat(8,minmax(0,1fr)) !important;
  }
}

/* Khi empty state, JS có thể đổi class; vẫn cho nội dung chiếm đủ hàng */

#detail-view #goods-grid.col-span-full {
  grid-template-columns: 1fr !important;
}

/* Selling header counts */

/* Goods: gọn style nút lọc trong header */

/* Spending + selling spacing after đổi header */

#goods-view,
#selling-view,
#spending-view {
  gap: 12px !important;
}

#spending-view .spending-topbar,
#selling-view > .flex.justify-between.items-center:first-child {
  display: none !important;
}

.collection-page-icon-goods {
  background: linear-gradient(135deg,rgba(245,158,11,.28),rgba(251,191,36,.16));
  color: #f6c14d;
}

.collection-page-icon-spending {
  background: linear-gradient(135deg,rgba(99,102,241,.26),rgba(168,85,247,.16));
  color: #a9adff;
}

.collection-page-icon-selling {
  background: linear-gradient(135deg,rgba(244,63,94,.28),rgba(251,113,133,.16));
  color: #ff9ab0;
}

.collection-page-head-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.collection-head-tool {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: var(--cx-text);
  transition: .16s ease;
}

.collection-head-tool:hover {
  transform: translateY(-1px);
  border-color: rgba(129,140,248,.42);
  color: #fff;
}

.collection-head-badge.is-action {
  cursor: pointer;
  transition: .16s ease;
}

.collection-head-badge.is-action:hover {
  transform: translateY(-1px);
  border-color: rgba(129,140,248,.36);
  background: rgba(99,102,241,.14);
}

.collection-head-badge.is-goods-selling[aria-pressed="true"] {
  color: #f8d38a;
  border-color: rgba(251,191,36,.28);
  background: rgba(251,191,36,.12);
}

.collection-head-badge.is-selling {
  color: #ffb4c3;
  background: rgba(244,63,94,.08);
}

.collection-head-badge.is-spending {
  color: #a9adff;
  background: rgba(99,102,241,.08);
}

.collection-head-stat {
  min-width: 84px;
  padding: 10px 12px 9px;
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.collection-head-stat span {
  display: block;
  font-size: 9px;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8f9ab2;
}

.collection-head-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
}

.collection-head-stat--manga strong {
  color: #818cf8;
}

.collection-head-stat--volume strong {
  color: #fbbf24;
}

.collection-head-stat--goods strong {
  color: #fb7185;
}

@media (max-width: 900px){
  .collection-page-head-side {
    justify-content: flex-start;
  }
}

@media (max-width: 640px){
  .collection-head-stat {
    min-width: 0;
    padding: 8px 9px 7px;
    border-radius: 12px;
  }
  .collection-head-stat span {
    font-size: 7px;
  }
  .collection-head-stat strong {
    font-size: 16px;
  }
}

/* Cùng hệ biến màu để header 3 trang mới render y như Map/Vault */

#goods-view,
#selling-view,
#spending-view {
  --cx-panel: rgba(16,25,45,.72);
  --cx-panel-2: rgba(26,37,61,.68);
  --cx-line: rgba(148,163,184,.18);
  --cx-line-strong: rgba(148,163,184,.28);
  --cx-text: #eef3ff;
  --cx-muted: #93a0b8;
  --cx-soft: #6f7c95;
  --cx-indigo: #818cf8;
}

body:not(.dark-mode) #goods-view,
body:not(.dark-mode) #selling-view,
body:not(.dark-mode) #spending-view {
  --cx-panel: rgba(255,255,255,.58);
  --cx-panel-2: rgba(250,252,255,.62);
  --cx-line: rgba(100,116,139,.16);
  --cx-line-strong: rgba(100,116,139,.24);
  --cx-text: #172033;
  --cx-muted: #64748b;
  --cx-soft: #8793a7;
}

/* Cùng chiều rộng và khoảng cách mép trang */

#book-vault-view, #goods-view, #selling-view, #spending-view {
  width: min(1480px,calc(100vw - 28px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 12px !important;
  padding-bottom: 38px !important;
}

/* ===== HEADER CHUNG DESKTOP ===== */

#book-vault-view .collection-page-head, #goods-view .collection-page-head, #selling-view .collection-page-head, #spending-view .collection-page-head {
  min-height: 72px !important;
  height: auto !important;
  padding: 10px 14px !important;
  margin: 0 0 9px !important;
  border-radius: 19px !important;
  gap: 11px !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: center !important;
}

/* Nút quay lại giống hệt nhau */

#book-vault-view .collection-back-btn, #goods-view .collection-back-btn, #selling-view .collection-back-btn, #spending-view .collection-back-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Khối title */

#book-vault-view .collection-page-title, #goods-view .collection-page-title, #selling-view .collection-page-title, #spending-view .collection-page-title {
  gap: 10px !important;
  min-width: 0 !important;
}

/* Icon */

#book-vault-view .collection-page-icon, #goods-view .collection-page-icon, #selling-view .collection-page-icon, #spending-view .collection-page-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: 17px !important;
  margin: 0 !important;
}

/* Kicker */

#book-vault-view .collection-page-kicker, #goods-view .collection-page-kicker, #selling-view .collection-page-kicker, #spending-view .collection-page-kicker {
  margin: 0 0 3px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
}

/* Title */

#book-vault-view .collection-page-title h1, #goods-view .collection-page-title h1, #selling-view .collection-page-title h1, #spending-view .collection-page-title h1 {
  margin: 0 !important;
  font-size: 23px !important;
  line-height: 1.05 !important;
  font-weight: 780 !important;
  letter-spacing: -.03em !important;
}

/* Mô tả */

#book-vault-view .collection-page-title p, #goods-view .collection-page-title p, #selling-view .collection-page-title p, #spending-view .collection-page-title p {
  margin: 3px 0 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

/* Badge / tool bên phải */

#book-vault-view .collection-head-badge, #goods-view .collection-head-badge, #selling-view .collection-head-badge, #spending-view .collection-head-badge {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 9px !important;
  gap: 5px !important;
  border-radius: 9px !important;
  font-size: 8.5px !important;
}

#goods-view .collection-head-tool,
#selling-view .collection-head-tool,
#spending-view .collection-head-tool {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

/* Không để utility space-y cũ tạo khoảng trống khác Map/Vault */

#goods-view > .collection-page-head + *,
#selling-view > .collection-page-head + *,
#spending-view > .collection-page-head + * {
  margin-top: 0 !important;
}

/* Khoảng cách phần ngay sau header đồng bộ 9px */

#goods-view > .collection-page-head + .grid,
#selling-view > .collection-page-head + .collection-head-stats,
#spending-view > .collection-page-head + .spending-filterbar {
  margin-top: 0 !important;
}

/* Stats bán nằm sát nhịp với stats của Map/Vault */

/* Phụ kiện: stat đầu trang cùng nhịp */

#goods-view > .grid.grid-cols-3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Spending: filterbar không bị cách header quá xa */

#spending-view .spending-filterbar {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* ============================================================
   TABLET / GIAO DIỆN DỌC
   ============================================================ */

@media (max-width:820px){
  #book-vault-view, #goods-view, #selling-view, #spending-view {
    width: min(calc(100% - 16px),1480px) !important;
    padding-top: 6px !important;
    padding-bottom: 28px !important;
  }
  #book-vault-view .collection-page-head, #goods-view .collection-page-head, #selling-view .collection-page-head, #spending-view .collection-page-head {
    min-height: 62px !important;
    padding: 8px 10px !important;
    margin-bottom: 7px !important;
    border-radius: 16px !important;
    gap: 8px !important;
    grid-template-columns: 32px minmax(0,1fr) auto !important;
  }
  #book-vault-view .collection-back-btn, #goods-view .collection-back-btn, #selling-view .collection-back-btn, #spending-view .collection-back-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }
  /* 5 trang đều bỏ icon phụ khi dọc để tiết kiệm diện tích */
  #book-vault-view .collection-page-icon, #goods-view .collection-page-icon, #selling-view .collection-page-icon, #spending-view .collection-page-icon {
    display: none !important;
  }
  #book-vault-view .collection-page-title, #goods-view .collection-page-title, #selling-view .collection-page-title, #spending-view .collection-page-title {
    gap: 0 !important;
  }
  #book-vault-view .collection-page-title h1, #goods-view .collection-page-title h1, #selling-view .collection-page-title h1, #spending-view .collection-page-title h1 {
    font-size: 19px !important;
  }
  #book-vault-view .collection-page-kicker, #goods-view .collection-page-kicker, #selling-view .collection-page-kicker, #spending-view .collection-page-kicker {
    margin-bottom: 2px !important;
    font-size: 7.5px !important;
  }
  #book-vault-view .collection-page-title p, #goods-view .collection-page-title p, #selling-view .collection-page-title p, #spending-view .collection-page-title p {
    margin-top: 2px !important;
    max-width: 100% !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Badge cơ bản của Map/Vault vẫn ẩn như cũ.
     Action thực tế của Goods/Spending vẫn giữ được để không mất chức năng. */
  #book-vault-view > .collection-page-head > .collection-head-badge {
    display: none !important;
  }
  #goods-view .collection-page-head-side,
  #selling-view .collection-page-head-side,
  #spending-view .collection-page-head-side {
    display: flex !important;
    gap: 5px !important;
  }
  #goods-view .collection-head-badge,
  #selling-view .collection-head-badge,
  #spending-view .collection-head-badge {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 7px !important;
    font-size: 7.5px !important;
  }
  #spending-view .collection-head-tool {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* ============================================================
   MOBILE HẸP
   ============================================================ */

@media (max-width:430px){
  #book-vault-view .collection-page-head, #goods-view .collection-page-head, #selling-view .collection-page-head, #spending-view .collection-page-head {
    min-height: 56px !important;
    padding: 7px 9px !important;
    grid-template-columns: 30px minmax(0,1fr) auto !important;
  }
  #book-vault-view .collection-back-btn, #goods-view .collection-back-btn, #selling-view .collection-back-btn, #spending-view .collection-back-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
  #book-vault-view .collection-page-title p, #goods-view .collection-page-title p, #selling-view .collection-page-title p, #spending-view .collection-page-title p {
    display: none !important;
  }
  #book-vault-view .collection-page-title h1, #goods-view .collection-page-title h1, #selling-view .collection-page-title h1, #spending-view .collection-page-title h1 {
    font-size: 17px !important;
  }
  #goods-view .collection-head-badge span,
  #spending-view .collection-head-badge span {
    display: none !important;
  }
  #goods-view .collection-head-badge,
  #spending-view .collection-head-badge {
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

/* Desktop lớn: body đã tự chừa sidebar + khoảng cách mép,
   nên child chỉ cần width:100% là vừa khít vùng nội dung còn lại. */

@media (min-width:1440px){
  #book-vault-view, #goods-view, #selling-view, #spending-view {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Màn hình rất rộng vẫn giữ full, không bị giới hạn lại bởi rule cũ */

@media (min-width:1800px){
  #book-vault-view, #goods-view, #selling-view, #spending-view {
    width: 100% !important;
    max-width: none !important;
  }
}

#selling-view .collection-page-head {
  overflow: visible !important;
}

#selling-view .selling-inline-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

#selling-view .selling-inline-stats .collection-head-stat {
  min-width: 72px !important;
  width: 72px !important;
  min-height: 46px !important;
  padding: 7px 9px !important;
  border-radius: 11px !important;
  margin: 0 !important;
}

#selling-view .selling-inline-stats .collection-head-stat span {
  font-size: 7.5px !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
}

#selling-view .selling-inline-stats .collection-head-stat strong {
  margin-top: 5px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

/* Không còn hàng stat riêng bên dưới header */

/* Màn hình vừa/dọc: vẫn nằm TRONG header, chuyển thành hàng thứ hai */

@media (max-width:900px){
  #selling-view .collection-page-head {
    grid-template-columns: 32px minmax(0,1fr) !important;
    grid-template-areas: "back title"
      "stats stats" !important;
    row-gap: 7px !important;
  }
  #selling-view .collection-back-btn {
    grid-area: back !important;
  }
  #selling-view .collection-page-title {
    grid-area: title !important;
  }
  #selling-view .selling-inline-stats {
    grid-area: stats !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  #selling-view .selling-inline-stats .collection-head-stat {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
  }
}

/* Mobile hẹp: tiếp tục 3 ô trong header nhưng gọn hơn */

@media (max-width:430px){
  #selling-view .collection-page-head {
    grid-template-columns: 30px minmax(0,1fr) !important;
    grid-template-areas: "back title"
      "stats stats" !important;
  }
  #selling-view .selling-inline-stats {
    gap: 5px !important;
  }
  #selling-view .selling-inline-stats .collection-head-stat {
    min-height: 38px !important;
    padding: 5px 6px !important;
    border-radius: 10px !important;
  }
  #selling-view .selling-inline-stats .collection-head-stat span {
    font-size: 6.8px !important;
  }
  #selling-view .selling-inline-stats .collection-head-stat strong {
    margin-top: 4px !important;
    font-size: 15px !important;
  }
}

/* ===== TỦ TRUYỆN ===== */

#shelf-view > div:nth-child(2) {
  gap: 12px !important;
}

#shelf-view > div:nth-child(2) > div > i:first-child {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.dark-mode #shelf-view > div:nth-child(2) > div > i:first-child {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#shelf-view > div:nth-child(2) > div .text-xl.sm\:text-2xl.font-bold,
#shelf-view > div:nth-child(2) > div #stat-selling,
#shelf-view > div:nth-child(2) > div .contact-stat-title {
  font-size: 18px !important;
  line-height: 1.14 !important;
}

#shelf-view > div:nth-child(2) > div .text-\[10px\].sm\:text-xs,
#shelf-view > div:nth-child(2) > div .contact-stat-sub {
  font-size: 9px !important;
  line-height: 1.18 !important;
  letter-spacing: .07em !important;
}

#shelf-view > div:nth-child(2) > div .min-w-0,
#shelf-view > div:nth-child(2) > div .contact-stat-copy {
  min-width: 0 !important;
}

/* ===== BẢN ĐỒ BỘ SƯU TẬP + KHO QUYỂN ===== */

#book-vault-view .collection-stat-card {
  grid-template-columns: 52px minmax(0,1fr) !important;
}

#book-vault-view .collection-stat-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.dark-mode #book-vault-view .collection-stat-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* màu icon giữ đồng bộ hệ màu giống chi tiêu */

#book-vault-view .collection-stat-card[data-stat="series"] .collection-stat-icon {
  background: rgba(99,102,241,.10) !important;
  color: #655bd4 !important;
}

@media (max-width: 980px){
  #book-vault-view .collection-stat-card {
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: 11px !important;
    min-height: 102px !important;
    padding: 14px 15px !important;
  }
  #book-vault-view .collection-stat-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 15px !important;
    font-size: 18px !important;
  }
  #book-vault-view .collection-stat-icon i {
    font-size: 18px !important;
  }
  #book-vault-view .collection-stat-card strong {
    font-size: 18px !important;
  }
}

@media (max-width: 720px){
  #shelf-view > div:nth-child(2) > div > i:first-child {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }
  #shelf-view > div:nth-child(2) > div .text-xl.sm\:text-2xl.font-bold,
  #shelf-view > div:nth-child(2) > div #stat-selling,
  #shelf-view > div:nth-child(2) > div .contact-stat-title {
    font-size: 16px !important;
  }
  #book-vault-view .collection-stat-card {
    grid-template-columns: 44px minmax(0,1fr) !important;
    gap: 10px !important;
    min-height: 96px !important;
    padding: 13px 14px !important;
  }
  #book-vault-view .collection-stat-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 13px !important;
  }
  #book-vault-view .collection-stat-icon i {
    font-size: 17px !important;
  }
  #book-vault-view .collection-stat-card strong {
    font-size: 17px !important;
  }
  #book-vault-view .collection-stat-card span {
    font-size: 9.5px !important;
  }
}

/* ===== KHUNG CARD GIỐNG CHI TIÊU ===== */

#shelf-view > div:nth-child(2) > div, #book-vault-view .collection-stat-card {
  position: relative !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 15px !important;
  min-height: 88px !important;
  border: 1px solid var(--glass-border, rgba(148,163,184,.26)) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.24) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.05) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.16) !important;
  backdrop-filter: blur(25px) saturate(1.16) !important;
  overflow: hidden !important;
}

#shelf-view > div:nth-child(2) > div::after, #book-vault-view .collection-stat-card::after {
  content: "" !important;
  position: absolute !important;
  width: 80px !important;
  height: 80px !important;
  right: -35px !important;
  bottom: -42px !important;
  border-radius: 999px !important;
  opacity: .26 !important;
  background: currentColor !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

body.dark-mode #shelf-view > div:nth-child(2) > div, body.dark-mode #book-vault-view .collection-stat-card {
  background: rgba(15,23,42,.28) !important;
  border-color: rgba(148,163,184,.22) !important;
  box-shadow: 0 14px 36px rgba(2,6,23,.16) !important;
}

/* ===== ICON BOX GIỐNG CHI TIÊU ===== */

#shelf-view > div:nth-child(2) > div > i:first-child, #book-vault-view .collection-stat-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 13px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.44) !important;
  border: 1px solid rgba(255,255,255,.44) !important;
  box-shadow: none !important;
}

body.dark-mode #shelf-view > div:nth-child(2) > div > i:first-child, body.dark-mode #book-vault-view .collection-stat-icon {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* ===== PHẦN CHỮ GIỐNG CHI TIÊU ===== */

#shelf-view > div:nth-child(2) > div > div, #book-vault-view .collection-stat-card > div {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#shelf-view > div:nth-child(2) > div > div > span:first-child, #shelf-view > div:nth-child(2) > div #stat-selling, #shelf-view > div:nth-child(2) > div .contact-stat-title, #book-vault-view .collection-stat-card strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}

#shelf-view > div:nth-child(2) > div > div > span:last-child, #shelf-view > div:nth-child(2) > div .contact-stat-sub, #book-vault-view .collection-stat-card span {
  display: block !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--ui-muted,#64748b) !important;
  text-transform: none !important;
}

body.dark-mode #shelf-view > div:nth-child(2) > div > div > span:first-child, body.dark-mode #shelf-view > div:nth-child(2) > div #stat-selling, body.dark-mode #shelf-view > div:nth-child(2) > div .contact-stat-title, body.dark-mode #book-vault-view .collection-stat-card strong {
  color: #f8fafc !important;
}

body.dark-mode #shelf-view > div:nth-child(2) > div > div > span:last-child, body.dark-mode #shelf-view > div:nth-child(2) > div .contact-stat-sub, body.dark-mode #book-vault-view .collection-stat-card span, body.dark-mode #book-vault-view .collection-stat-card small {
  color: #94a3b8 !important;
}

/* ===== MÀU TỪNG ICON GIỐNG HỆ CHI TIÊU ===== */

/* Tủ truyện */

#shelf-view > div:nth-child(2) > div:nth-child(1) {
  color: #7268df !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(1) > i:first-child {
  color: #655bd4 !important;
  background: rgba(99,102,241,.10) !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(2) {
  color: #d85c92 !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(2) > i:first-child {
  color: #c94f86 !important;
  background: rgba(236,72,153,.09) !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(3) {
  color: #c58a25 !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(3) > i:first-child {
  color: #b67c1e !important;
  background: rgba(245,158,11,.10) !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(4) {
  color: #36a58e !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(4) > i:first-child {
  color: #218b78 !important;
  background: rgba(16,185,129,.09) !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(5) {
  color: #df6b80 !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(5) > i:first-child {
  color: #d45169 !important;
  background: rgba(244,63,94,.09) !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(6) {
  color: #428eb4 !important;
}

#shelf-view > div:nth-child(2) > div:nth-child(6) > i:first-child {
  color: #347fa5 !important;
  background: rgba(14,165,233,.09) !important;
}


/* Kho Quyển */

/* nút eye ở card Đã chi giữ cân với kiểu Chi tiêu */

#shelf-view > div:nth-child(2) > div #stat-spent-toggle {
  margin-left: 2px !important;
}

/* responsive giống Chi tiêu */

@media (max-width:720px){
  #shelf-view > div:nth-child(2) > div, #book-vault-view .collection-stat-card {
    padding: 12px !important;
    border-radius: 17px !important;
    gap: 10px !important;
    min-height: 82px !important;
  }
  #shelf-view > div:nth-child(2) > div > i:first-child, #book-vault-view .collection-stat-icon {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    flex-basis: 35px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
  #book-vault-view .collection-stat-icon i {
    font-size: 14px !important;
  }
  #shelf-view > div:nth-child(2) > div > div > span:first-child, #shelf-view > div:nth-child(2) > div #stat-selling, #shelf-view > div:nth-child(2) > div .contact-stat-title, #book-vault-view .collection-stat-card strong {
    font-size: 16px !important;
  }
  #shelf-view > div:nth-child(2) > div > div > span:last-child, #shelf-view > div:nth-child(2) > div .contact-stat-sub, #book-vault-view .collection-stat-card span, #book-vault-view .collection-stat-card small {
    font-size: 8px !important;
  }
}

/* Không bao giờ cho link Tập bẻ từng ký tự */

#detail-view #goods-grid .entity-linked-volumes,
#detail-view #goods-grid .entity-linked-volumes .entity-link,
#detail-view #goods-grid .goods-volume-range-summary {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#detail-view #goods-grid .goods-detail-card {
  min-width: 0 !important;
}

#detail-view #goods-grid .goods-detail-info {
  min-width: 0 !important;
}

#detail-view #goods-grid .goods-detail-meta {
  min-width: 0 !important;
  max-width: 100% !important;
}

#detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
  flex-wrap: nowrap !important;
}

#detail-view #goods-grid .goods-detail-name {
  min-width: 0 !important;
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Desktop thường: card ngang như cũ nhưng không bị co chữ */

@media (min-width:1024px) and (max-width:1439px){
  #detail-view #goods-grid .goods-detail-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #detail-view #goods-grid .goods-detail-thumb {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }
  #detail-view #goods-grid .goods-detail-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ============================================================
   Desktop lớn: 8 món/hàng.
   Không dùng card ngang Ảnh + Text + 2 nút trên cùng một hàng vì
   chiều ngang mỗi card không đủ. Tách thành:
   hàng 1 = ảnh + nút thao tác
   hàng 2 = toàn bộ thông tin
   ============================================================ */

@media (min-width:1800px){
  #detail-view #goods-grid .goods-detail-card {
    position: relative !important;
    display: grid !important;
    grid-template-areas: "thumb actions"
      "info info" !important;
    align-items: start !important;
    row-gap: 8px !important;
    border-radius: 13px !important;
  }
  #detail-view #goods-grid .goods-detail-thumb {
    grid-area: thumb !important;
    border-radius: 10px !important;
  }
  #detail-view #goods-grid .goods-detail-info {
    grid-area: info !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #detail-view #goods-grid .goods-detail-actions {
    grid-area: actions !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    gap: 4px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn {
    border-radius: 9px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn i {
    font-size: 10px !important;
  }
  #detail-view #goods-grid .goods-detail-meta {
    margin-bottom: 5px !important;
    width: 100% !important;
  }
  #detail-view #goods-grid .goods-detail-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.28 !important;
    min-height: 2.56em !important;
  }
  #detail-view #goods-grid .goods-detail-info p,
  #detail-view #goods-grid .goods-detail-info .goods-sale-price,
  #detail-view #goods-grid .goods-detail-info .goods-value-muted {
    font-size: 10px !important;
  }
}

/* Màn hình rất rộng: tăng nhẹ kích thước nhưng vẫn 8 cột */

@media (min-width:1800px){
  #detail-view #goods-grid .goods-detail-card {
    grid-template-columns: 58px minmax(0,1fr) !important;
    min-height: 166px !important;
    padding: 10px !important;
    column-gap: 9px !important;
  }
  #detail-view #goods-grid .goods-detail-thumb {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
  }
  #detail-view #goods-grid .goods-detail-name {
    font-size: 11.5px !important;
  }
}

/* Tablet/mobile vẫn sử dụng card ngang, nhưng chặn lỗi chữ dọc */

@media (max-width:1023px){
  #detail-view #goods-grid .goods-detail-card {
    min-width: 0 !important;
  }
  #detail-view #goods-grid .goods-detail-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Desktop thường */

@media (min-width:1024px) and (max-width:1799px){
  #detail-view #goods-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
}

/* Desktop lớn */

@media (min-width:1440px){
  #detail-view #goods-grid {
    grid-template-columns: repeat(8,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
}

/* Cả hai desktop đều dùng bố cục ngang */

@media (min-width:1024px){
  #detail-view #goods-grid .goods-detail-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: 8px !important;
    min-height: 72px !important;
    height: auto !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }
  #detail-view #goods-grid .goods-detail-thumb {
    grid-area: auto !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 9px !important;
  }
  #detail-view #goods-grid .goods-detail-info {
    grid-area: auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  #detail-view #goods-grid .goods-detail-actions {
    grid-area: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-left: auto !important;
  }
  #detail-view #goods-grid .goods-card-action-btn {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    border-radius: 9px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn i {
    font-size: 10px !important;
  }
  #detail-view #goods-grid .goods-detail-meta {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 3px !important;
  }
  #detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
  #detail-view #goods-grid .goods-detail-name {
    display: block !important;
    min-height: 0 !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }
  #detail-view #goods-grid .goods-detail-info p,
  #detail-view #goods-grid .goods-detail-info .goods-sale-price,
  #detail-view #goods-grid .goods-detail-info .goods-value-muted {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }
}

/* 8 cột cần gọn hơn một chút để vẫn giữ đúng hàng ngang */

@media (min-width:1440px){
  #detail-view #goods-grid .goods-detail-card {
    gap: 6px !important;
    min-height: 66px !important;
    padding: 7px !important;
  }
  #detail-view #goods-grid .goods-detail-thumb {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 8px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn i {
    font-size: 9px !important;
  }
  #detail-view #goods-grid .goods-detail-actions {
    gap: 3px !important;
  }
  #detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
    font-size: 8.5px !important;
  }
  #detail-view #goods-grid .goods-detail-name {
    font-size: 9.5px !important;
  }
  #detail-view #goods-grid .goods-detail-info p,
  #detail-view #goods-grid .goods-detail-info .goods-sale-price,
  #detail-view #goods-grid .goods-detail-info .goods-value-muted {
    font-size: 8.8px !important;
  }
}

/* Màn hình rất rộng: cho card thở hơn nhưng vẫn 8 cột ngang */

@media (min-width:2200px){
  #detail-view #goods-grid {
    gap: 9px !important;
  }
  #detail-view #goods-grid .goods-detail-card {
    gap: 7px !important;
    min-height: 72px !important;
    padding: 8px !important;
  }
  #detail-view #goods-grid .goods-detail-thumb {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
  #detail-view #goods-grid .goods-card-action-btn {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }
  #detail-view #goods-grid .goods-detail-name {
    font-size: 10.5px !important;
  }
  #detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
    font-size: 9px !important;
  }
}

#detail-view #goods-grid.goods-cols-1 {
  grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}

#detail-view #goods-grid.goods-cols-2 {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

#detail-view #goods-grid.goods-cols-4 {
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 10px !important;
}

#detail-view #goods-grid.goods-cols-8 {
  grid-template-columns: repeat(8,minmax(0,1fr)) !important;
  gap: 8px !important;
}

/* 4 cột: bố cục ngang thoáng */

#detail-view #goods-grid.goods-cols-4 .goods-detail-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-thumb {
  flex: 0 0 46px !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  margin-left: auto !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-card-action-btn {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 8 cột: vẫn giữ ngang ảnh + chữ + 2 nút, chỉ compact hơn */

#detail-view #goods-grid.goods-cols-8 .goods-detail-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-thumb {
  flex: 0 0 40px !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 3px !important;
  margin-left: auto !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-card-action-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Chặn mọi kiểu grid-area cũ nếu đã từng được áp */

#detail-view #goods-grid.goods-cols-4 .goods-detail-card,
#detail-view #goods-grid.goods-cols-8 .goods-detail-card {
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-thumb,
#detail-view #goods-grid.goods-cols-4 .goods-detail-info,
#detail-view #goods-grid.goods-cols-4 .goods-detail-actions,
#detail-view #goods-grid.goods-cols-8 .goods-detail-thumb,
#detail-view #goods-grid.goods-cols-8 .goods-detail-info,
#detail-view #goods-grid.goods-cols-8 .goods-detail-actions {
  grid-area: auto !important;
}

#detail-view #goods-grid .goods-detail-info {
  line-height: 1.22 !important;
}

#detail-view #goods-grid .goods-detail-meta {
  margin-bottom: 3px !important;
}

#detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

#detail-view #goods-grid .goods-detail-meta > span:not(.entity-linked-volumes) {
  font-size: 10px !important;
  line-height: 1.15 !important;
  padding: 3px 6px !important;
}

#detail-view #goods-grid .goods-detail-name {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

#detail-view #goods-grid .goods-detail-info p,
#detail-view #goods-grid .goods-detail-info .goods-sale-price,
#detail-view #goods-grid .goods-detail-info .goods-value-muted {
  line-height: 1.2 !important;
}

#detail-view #goods-grid .goods-detail-info p,
#detail-view #goods-grid .goods-detail-info .goods-sale-price {
  font-size: 12px !important;
}

#detail-view #goods-grid .goods-detail-info .goods-value-muted {
  font-size: 10.5px !important;
}

/* Desktop nhỏ: 4 món / hàng */

#detail-view #goods-grid.goods-cols-4 .goods-detail-card {
  min-height: 78px !important;
  padding: 9px !important;
  gap: 10px !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-thumb {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex-basis: 48px !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-name {
  font-size: 13px !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-meta .entity-linked-volumes {
  font-size: 11.5px !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-info p,
#detail-view #goods-grid.goods-cols-4 .goods-detail-info .goods-sale-price {
  font-size: 12.5px !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-info .goods-value-muted {
  font-size: 11px !important;
}

/* Desktop lớn: 8 món / hàng */

#detail-view #goods-grid.goods-cols-8 .goods-detail-card {
  min-height: 72px !important;
  padding: 8px !important;
  gap: 7px !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-thumb {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  flex-basis: 42px !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-name {
  font-size: 11.5px !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-meta .entity-linked-volumes {
  font-size: 10.5px !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-info p,
#detail-view #goods-grid.goods-cols-8 .goods-detail-info .goods-sale-price {
  font-size: 11.5px !important;
}

#detail-view #goods-grid.goods-cols-8 .goods-detail-info .goods-value-muted {
  font-size: 10px !important;
}

#detail-view #goods-grid .goods-detail-name {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#detail-view #goods-grid .goods-detail-info p,
#detail-view #goods-grid .goods-detail-info .goods-sale-price {
  font-weight: 700 !important;
}

#detail-view #goods-grid .goods-detail-meta .entity-linked-volumes,
#detail-view #goods-grid .goods-detail-meta > span:not(.entity-linked-volumes) {
  font-weight: 600 !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-name,
#detail-view #goods-grid.goods-cols-8 .goods-detail-name {
  font-weight: 700 !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-info p,
#detail-view #goods-grid.goods-cols-4 .goods-detail-info .goods-sale-price,
#detail-view #goods-grid.goods-cols-8 .goods-detail-info p,
#detail-view #goods-grid.goods-cols-8 .goods-detail-info .goods-sale-price {
  font-weight: 700 !important;
}

#detail-view #goods-grid .goods-detail-meta {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 3px 8px !important;
  border-radius: 7px !important;
}

#detail-view #goods-grid .goods-detail-meta .entity-linked-volumes .entity-link,
#detail-view #goods-grid .goods-detail-meta .entity-linked-volumes .goods-volume-range-summary {
  display: inline !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#detail-view #goods-grid.goods-cols-4 .goods-detail-meta .entity-linked-volumes,
#detail-view #goods-grid.goods-cols-8 .goods-detail-meta .entity-linked-volumes {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
}

@media (min-width:1800px){
  #detail-view #goods-grid .goods-detail-meta .entity-linked-volumes {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }
}

#release-view .release-book-cover .release-auto-cover {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .18s ease, transform .4s ease !important;
}

#release-view .release-book-cover .release-auto-cover.is-switching {
  opacity: .35 !important;
}

@media (prefers-reduced-motion: reduce){
  #release-view .release-book-cover .release-auto-cover {
    transition: none !important;
  }
}

#shelf-view #manga-grid .manga-card-cover-wrap > img {
  transition: opacity .22s ease, transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease !important;
}

#global-search-input {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Phòng trường hợp trình duyệt vẫn coi input là search ở cache cũ */

#global-search-input::-webkit-search-cancel-button,
#global-search-input::-webkit-search-decoration,
#global-search-input::-webkit-search-results-button,
#global-search-input::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* X xóa từ khoá: nhỏ, không viền để không giống nút đóng popup */

.global-search-clear {
  width: 28px !important;
  height: 28px !important;
  right: 9px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.global-search-clear.hidden {
  display: none !important;
}

.global-search-clear:hover {
  background: rgba(148,163,184,.12) !important;
  color: #334155 !important;
}

body.dark-mode .global-search-clear {
  color: #94a3b8 !important;
}

body.dark-mode .global-search-clear:hover {
  background: rgba(148,163,184,.10) !important;
  color: #e2e8f0 !important;
}

/* Nút đóng popup vẫn là nút vuông riêng, dễ phân biệt */

.global-search-close {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
}

#selling-view .selling-card-cover {
  position: relative !important;
}

/* Giữ badge BÁN bên phải, badge giảm giá ở trái */

#selling-view .selling-discount-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 25 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 48px !important;
  height: 25px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .015em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.22) !important;
  overflow: hidden !important;
  pointer-events: none !important;
  isolation: isolate !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.22) !important;
  backdrop-filter: blur(8px) saturate(1.22) !important;
  animation: sellingDiscountPulse 2.4s ease-in-out infinite !important;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#selling-view .selling-discount-badge > span {
  position: relative !important;
  z-index: 2 !important;
}

/* Vệt sáng chạy qua badge */

#selling-view .selling-discount-badge::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: -55% !important;
  left: -55% !important;
  width: 42% !important;
  height: 210% !important;
  transform: rotate(22deg) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.10) 25%,
    rgba(255,255,255,.70) 50%,
    rgba(255,255,255,.12) 75%,
    transparent 100%
  ) !important;
  animation: sellingDiscountShimmer 2.15s linear infinite !important;
  animation-play-state: var(--tt-animation-state,running) !important;
}

/* < 10%: tím */

#selling-view .selling-discount-badge.discount-low {
  background: linear-gradient(135deg,#6d5dfc,#9b5de5) !important;
  box-shadow: 0 5px 15px rgba(109,93,252,.38),
    0 0 15px rgba(155,93,229,.30) !important;
}

/* 10–29%: cam/vàng */

#selling-view .selling-discount-badge.discount-mid {
  background: linear-gradient(135deg,#f59e0b,#fb7c2e) !important;
  box-shadow: 0 5px 15px rgba(245,158,11,.42),
    0 0 15px rgba(251,124,46,.32) !important;
}

/* >= 30%: đỏ/hồng */

#selling-view .selling-discount-badge.discount-high {
  background: linear-gradient(135deg,#f43f5e,#ef4444) !important;
  box-shadow: 0 5px 16px rgba(244,63,94,.45),
    0 0 18px rgba(239,68,68,.34) !important;
}

@keyframes sellingDiscountShimmer{
  0% {
    left: -58%;
    opacity: .25;
  }
  18% {
    opacity: .95;
  }
  62%,100% {
    left: 125%;
    opacity: .18;
  }
}

@keyframes sellingDiscountPulse{
  0%,100% {
    transform: translateZ(0) scale(1);
    filter: saturate(1);
  }
  50% {
    transform: translateZ(0) scale(1.035);
    filter: saturate(1.12);
  }
}

@media (max-width:640px){
  #selling-view .selling-discount-badge {
    top: 6px !important;
    left: 6px !important;
    min-width: 44px !important;
    height: 23px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #selling-view .selling-discount-badge,
  #selling-view .selling-discount-badge::after {
    animation: none !important;
  }
}

@media (max-width:640px){
  #selling-view .selling-pagination {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 4px 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #selling-view .selling-pagination::-webkit-scrollbar {
    display: none !important;
  }
  #selling-view .selling-page-btn {
    flex: 0 0 auto !important;
    width: 32px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
  #selling-view .selling-page-ellipsis {
    flex: 0 0 12px !important;
    min-width: 12px !important;
    width: 12px !important;
    font-size: 11px !important;
  }
  #selling-view .selling-page-jump {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    margin: 0 0 0 2px !important;
    padding: 3px 4px !important;
    gap: 4px !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    border-radius: 11px !important;
  }
  #selling-view .selling-page-jump input {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 28px !important;
    padding: 0 3px !important;
    font-size: 11px !important;
  }
  #selling-view .selling-page-jump span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 9px !important;
  }
  #selling-view .selling-page-jump button {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
  }
}

#shelf-view #stat-spent-toggle[data-auth-locked="true"] {
  cursor: pointer !important;
  opacity: .72 !important;
}

#shelf-view #stat-spent-toggle[data-auth-locked="true"]:hover {
  opacity: 1 !important;
}

#selling-view .selling-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

#selling-view .selling-card-cover {
  flex-shrink: 0 !important;
}

#selling-view .selling-card-footer,
#selling-view .selling-card-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

#selling-view .selling-card-footer {
  margin-top: 0 !important;
}

#selling-view .selling-card-footer .selling-card-title {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
}

#selling-view .selling-card-title > .entity-link,
#selling-view .selling-card-title > span {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#selling-view .selling-card-sub {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  min-height: 1.4em !important;
}

#selling-view .selling-card-sub .entity-linked-volumes,
#selling-view .selling-card-sub .entity-link,
#selling-view .selling-card-sub .goods-volume-range-summary {
  display: inline !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

#selling-view .selling-card-prices {
  margin-top: auto !important;
  padding-top: 8px !important;
  min-height: 28px !important;
}

#selling-view .selling-card-prices > span {
  white-space: nowrap !important;
}

/* Section: detail-rating-gold-spin */

#detail-view #detail-rating,
#shelf-view#shelf-view #manga-grid .stars-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px !important;
  color: #ffc928 !important;
  overflow: visible;
}

#detail-view #detail-rating > .fa-star,
#shelf-view#shelf-view #manga-grid .stars-compact > .fa-star {
  display: inline-block;
  color: #ffc928 !important;
  font-size: 12px !important;
  text-shadow: 0 0 5px rgba(255, 193, 7, .65), 0 0 11px rgba(255, 174, 0, .35);
  -webkit-text-stroke: .25px #bd7900;
  transform-origin: 50% 50%;
  animation: detail-rating-star-spin 3.6s linear infinite;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#detail-view #detail-rating > .fa-star.is-unrated,
#shelf-view#shelf-view #manga-grid .stars-compact > .fa-star.is-unrated {
  color: rgba(148, 163, 184, .6) !important;
  text-shadow: none;
  -webkit-text-stroke: 0;
  animation: none;
  transform: none;
}

@keyframes detail-rating-star-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #detail-view #detail-rating > .fa-star,
#shelf-view#shelf-view #manga-grid .stars-compact > .fa-star {
    animation: none;
  }
}

#detail-view .detail-rating-row {
  margin-top: 10px;
  line-height: 1;
}

/* Section: named-missing-titles */

#detail-view #detail-missing.has-named-missing {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-auto-flow: column !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden;
}

#detail-view #detail-missing.has-named-missing > .missing-volume-count {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: inline-block !important;
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
}

#detail-view #detail-missing.has-named-missing > .missing-named-titles {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  flex: 0 1 auto;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

@media (max-width: 640px) {
  #detail-view #detail-missing.has-named-missing > .missing-named-titles {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 12px !important;
  }
}

/* Section: goods-frame-original-ratio */

#goods-detail-modal #goods-detail-image-stage {
  width: var(--goods-fit-width, 100%) !important;
  height: var(--goods-fit-height, auto) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  align-self: center;
  box-sizing: border-box;
}

#goods-detail-modal #goods-detail-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
}

/* Section: missing-edition-chips */

#detail-view #detail-missing.has-named-missing:has(.missing-chip-row) {
  gap: 10px!important;
  align-items: center!important;
}

#detail-view #detail-missing:has(.missing-chip-row)>.missing-volume-count {
  font-size: 24px!important;
  font-weight: 750!important;
  line-height: 1.2!important;
}

#detail-missing .missing-chip-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

#detail-missing .missing-edition-chip,#detail-missing .missing-edition-more {
  display: block;
  border: 1px solid rgba(100,116,139,.18);
  border-radius: 8px;
  background: rgba(100,116,139,.08);
  color: inherit;
  font-size: 12px!important;
  font-weight: 600!important;
  line-height: 1.4;
  padding: 4px 7px;
  text-decoration: none!important;
  cursor: pointer;
}

#detail-missing .missing-edition-chip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

#detail-missing .missing-edition-more {
  flex: 0 0 auto;
}

#missing-editions-dialog {
  box-sizing: border-box;
  width: min(440px,calc(100vw - 32px));
  max-height: 75dvh;
  padding: 20px;
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 20px;
  background: rgba(248,250,252,.94);
  color: #334155;
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 70px #0004;
}

body.dark-mode #missing-editions-dialog {
  background: rgba(20,29,47,.94);
  color: #e2e8f0;
}

#missing-editions-dialog::backdrop {
  background: #02061766;
  backdrop-filter: blur(5px);
}

.missing-editions-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.missing-editions-heading h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.missing-editions-heading button {
  background: transparent;
  border: 1px solid #94a3b844;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  flex: none;
  font-size: 22px;
  color: inherit;
  cursor: pointer;
}

#missing-editions-dialog p {
  font-size: 12px;
  opacity: .75;
  margin: 10px 0 16px;
}

.missing-editions-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  align-items: stretch;
}

.missing-editions-list > button {
  min-width: 0;
  max-width: 100%;
}

.missing-editions-list button {
  color: inherit;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #94a3b833;
  background: #94a3b810;
  border-radius: 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
  font-size: 14px;
}

@media (max-width:640px){
  #detail-view #detail-missing.has-named-missing:has(.missing-chip-row) {
    gap: 6px!important;
  }
  #detail-missing .missing-edition-chip,#detail-missing .missing-edition-more {
    font-size: 11px!important;
    padding: 3px 5px;
  }
}

/* Section: missing-count-match-stats */

#detail-view #detail-missing#detail-missing .missing-volume-count {
  font-size: 18px!important;
  font-weight: 650!important;
  line-height: 1.15!important;
  color: inherit!important;
}

@media (max-width:640px){
  #detail-view #detail-missing#detail-missing .missing-volume-count {
    font-size: 16px!important;
  }
}

/* Section: missing-dialog-close-alignment */

#missing-editions-dialog .missing-editions-heading > button {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  padding: 0!important;
  line-height: 1!important;
  box-sizing: border-box;
}

#missing-editions-dialog .missing-editions-heading > button > svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  pointer-events: none;
}

/* Section: data-health-page-styles */

.data-health-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 12px;
  padding-bottom: 38px;
  color: #334155;
}

.data-health-head,.data-health-panel,.data-health-summary>div {
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 36px rgba(30,41,59,.07);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.data-health-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  margin-bottom: 14px;
}

.data-health-head-main {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.data-health-head-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow: 0 9px 22px rgba(99,102,241,.24);
}

.data-health-eyebrow {
  display: block;
  color: #6366f1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.data-health-head h1 {
  margin: 2px 0 1px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.data-health-head p {
  margin: 0;
  color: var(--ui-legacy-secondary);
  font-size: 12px;
}

.data-health-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
}

.data-health-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  padding: 9px 13px;
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 12px;
  background: rgba(99,102,241,.09);
  color: #4f46e5;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.data-health-image-refresh {
  border-color: rgba(14,165,233,.24);
  background: rgba(14,165,233,.08);
  color: #0284c7;
}

.data-health-refresh:disabled {
  opacity: .55;
  cursor: wait;
}

.data-health-refresh:hover:not(:disabled) {
  background: rgba(99,102,241,.15);
}

.data-health-image-refresh:hover:not(:disabled) {
  background: rgba(14,165,233,.14);
}

.data-health-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 13px;
  background: rgba(248,250,252,.38);
}

.data-health-view-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.data-health-view-switch button.active {
  background: linear-gradient(135deg,#6366f1,#7c3aed);
  color: #fff;
  box-shadow: 0 7px 18px rgba(99,102,241,.2);
}

.data-health-summary {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.data-health-summary>div {
  position: relative;
  overflow: hidden;
  padding: 15px 17px;
  border-radius: 17px;
}

.data-health-summary>div:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #6366f1;
}

.data-health-summary .is-critical:before {
  background: #f43f5e;
}

.data-health-summary .is-warning:before {
  background: #f59e0b;
}

.data-health-summary .is-polish:before {
  background: #0ea5e9;
}

.data-health-summary span,.data-health-summary small {
  display: block;
}

.data-health-summary span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ui-legacy-secondary);
}

.data-health-summary strong {
  display: block;
  margin: 4px 0 1px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  color: #1e293b;
}

.data-health-summary small {
  font-size: 10px;
  color: var(--ui-legacy-caption);
}

.data-health-panel {
  padding: 16px;
  border-radius: 22px;
}

.data-health-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(180px,240px) 190px;
  gap: 10px;
}

.data-health-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 12px;
  background: rgba(248,250,252,.48);
}

.data-health-search i {
  color: #94a3b8;
}

.data-health-search input,.data-health-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
}

.data-health-toolbar select {
  padding: 0 12px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 12px;
  background: rgba(248,250,252,.48);
}

.data-health-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 2px 10px;
  color: var(--ui-legacy-secondary);
  font-size: 11px;
}

.data-health-result-head>div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.data-health-result-head strong {
  font-size: 13px;
  color: #334155;
}

.data-health-result-head>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #10b981;
  font-weight: 700;
}

.data-health-result-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.data-health-read-only {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #10b981;
  font-weight: 700;
}

.data-health-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 290px;
  padding: 6px 9px;
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 9px;
  background: rgba(99,102,241,.08);
  color: #4f46e5;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.data-health-active-filter span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-health-toolbar.is-score-mode {
  grid-template-columns: minmax(0,1fr);
}

.data-health-toolbar.is-score-mode select {
  display: none;
}

.data-health-results {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.data-health-issue {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  gap: 9px 11px;
  min-height: 112px;
  padding: 13px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 14px;
  background: rgba(248,250,252,.38);
}

.data-health-issue-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(14,165,233,.09);
  color: #0284c7;
}

.data-health-issue.is-critical .data-health-issue-icon {
  background: rgba(244,63,94,.1);
  color: #e11d48;
}

.data-health-issue.is-warning .data-health-issue-icon {
  background: rgba(245,158,11,.1);
  color: #d97706;
}

.data-health-issue-copy {
  min-width: 0;
  padding-right: 63px;
}

.data-health-issue-copy strong,.data-health-issue-copy span {
  display: block;
}

.data-health-issue-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #1e293b;
}

.data-health-issue-copy span {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ui-legacy-secondary);
  line-height: 1.45;
}

.data-health-manga-title-link {
  all: unset;
  display: inline;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-weight: inherit;
}

.data-health-manga-title-link:hover,.data-health-manga-title-link:focus-visible {
  color: #6366f1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-health-manga-title-link:focus-visible {
  outline: 2px solid rgba(99,102,241,.45);
  outline-offset: 2px;
  border-radius: 4px;
}

.data-health-issue-actions {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  max-width: none;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.data-health-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  max-width: 190px;
  padding: 6px 9px;
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 9px;
  background: rgba(99,102,241,.07);
  color: #4f46e5;
  font-size: 10px;
  font-weight: 750;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.data-health-open span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-health-loading,.data-health-empty {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 160px;
  color: var(--ui-legacy-caption);
  font-size: 13px;
  text-align: center;
}

.data-health-empty {
  flex-direction: column;
}

.data-health-empty i {
  font-size: 28px;
  color: #10b981;
}

.data-health-more {
  grid-column: 1/-1;
  padding: 12px;
  text-align: center;
  color: #64748b;
  font-size: 11px;
}

.data-health-skip-actions {
  position: absolute;
  z-index: 1;
  top: 9px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.data-health-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 9px;
  background: rgba(248,250,252,.64);
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
}

.data-health-skip:hover {
  color: #4f46e5;
  border-color: rgba(99,102,241,.34);
  background: rgba(99,102,241,.1);
}

.data-health-skip:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.data-health-issue.is-ignored {
  opacity: .62;
  filter: saturate(.45);
}

.data-health-issue.is-ignored .data-health-issue-icon {
  color: #64748b;
  background: rgba(100,116,139,.1);
}

.data-health-common-issue {
  grid-column: 1/-1;
  min-height: 0;
}

.data-health-common-issue .data-health-issue-copy {
  padding-right: 0;
}

.data-health-common-issue .data-health-issue-actions {
  flex-wrap: wrap;
  overflow: visible;
  padding-top: 2px;
}

.data-health-common-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.data-health-common-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(99,102,241,.17);
  border-radius: 999px;
  background: rgba(99,102,241,.07);
  color: #6366f1;
  font-size: 9px;
  font-weight: 800;
}

.data-health-common-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 9px;
  border: 1px solid rgba(14,165,233,.22);
  border-radius: 9px;
  background: rgba(14,165,233,.08);
  color: #0284c7;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.data-health-common-toggle:hover {
  background: rgba(14,165,233,.14);
}

.data-health-common-note {
  grid-column: 1/-1;
  color: var(--ui-legacy-caption);
  font-size: 10px;
  line-height: 1.45;
}

.data-health-common-issue .data-health-open {
  max-width: 260px;
}

.data-health-common-issue .data-health-open span {
  max-width: 220px;
}

.data-health-score-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 15px;
  background: rgba(248,250,252,.38);
}

.data-health-score-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.data-health-score-title {
  min-width: 0;
}

.data-health-score-title strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
  font-size: 13px;
}

.data-health-score-title span {
  display: block;
  margin-top: 3px;
  color: var(--ui-legacy-caption);
  font-size: 10px;
}

.data-health-score-value {
  display: grid;
  place-items: center;
  flex: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 3px solid #10b981;
  color: #059669;
  font-size: 12px;
  font-weight: 850;
}

.data-health-score-card.is-warning .data-health-score-value {
  border-color: #f59e0b;
  color: #d97706;
}

.data-health-score-card.is-critical .data-health-score-value {
  border-color: #f43f5e;
  color: #e11d48;
}

.data-health-score-bar {
  height: 5px;
  margin: 11px 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148,163,184,.16);
}

.data-health-score-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6366f1,#10b981);
}

.data-health-score-categories {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 5px;
}

.data-health-score-category {
  min-width: 0;
  padding: 7px 3px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 9px;
  background: rgba(255,255,255,.26);
  color: #64748b;
  text-align: center;
  cursor: pointer;
}

.data-health-score-category i,.data-health-score-category span,.data-health-score-category small {
  display: block;
}

.data-health-score-category i {
  margin-bottom: 4px;
  font-size: 10px;
  color: #6366f1;
}

.data-health-score-category span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 750;
}

.data-health-score-category small {
  margin-top: 2px;
  font-size: 8px;
  color: var(--ui-legacy-caption);
}

.data-health-score-category:disabled {
  cursor: default;
  opacity: .58;
}

.data-health-score-category:not(:disabled):hover {
  border-color: rgba(99,102,241,.34);
  background: rgba(99,102,241,.08);
  color: #4f46e5;
}

body.dark-mode .data-health-page {
  color: #dbe4f0;
}

body.dark-mode .data-health-head,body.dark-mode .data-health-panel,body.dark-mode .data-health-summary>div {
  background: rgba(15,23,42,.66);
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

body.dark-mode .data-health-head p,body.dark-mode .data-health-result-head,body.dark-mode .data-health-issue-copy span {
  color: var(--ui-legacy-caption);
}

body.dark-mode .data-health-summary strong,body.dark-mode .data-health-result-head strong,body.dark-mode .data-health-issue-copy strong {
  color: #e2e8f0;
}

body.dark-mode .data-health-search,body.dark-mode .data-health-toolbar select,body.dark-mode .data-health-issue {
  background: rgba(30,41,59,.48);
  border-color: rgba(148,163,184,.16);
}

body.dark-mode .data-health-open {
  color: #c7d2fe;
  background: rgba(99,102,241,.14);
}

body.dark-mode .data-health-view-switch,body.dark-mode .data-health-score-card {
  background: rgba(30,41,59,.48);
  border-color: rgba(148,163,184,.16);
}

body.dark-mode .data-health-score-title strong {
  color: #e2e8f0;
}

body.dark-mode .data-health-score-category {
  background: rgba(15,23,42,.3);
  border-color: rgba(148,163,184,.15);
  color: #cbd5e1;
}

body.dark-mode .data-health-skip {
  color: #94a3b8;
  border-color: rgba(148,163,184,.17);
  background: rgba(15,23,42,.72);
}

body.dark-mode .data-health-active-filter {
  color: #c7d2fe;
  background: rgba(99,102,241,.14);
}

body.dark-mode .data-health-common-pill {
  color: #c7d2fe;
  background: rgba(99,102,241,.14);
  border-color: rgba(129,140,248,.18);
}

body.dark-mode .data-health-common-toggle {
  color: #7dd3fc;
  background: rgba(14,165,233,.12);
  border-color: rgba(56,189,248,.18);
}

body.dark-mode .data-health-common-note {
  color: #64748b;
}

@media (min-width:1280px){
  .data-health-results {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (min-width:2800px){
  .data-health-results {
    grid-template-columns: repeat(6,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .data-health-page {
    width: 100%;
    padding-top: 0;
  }
  .data-health-head {
    align-items: flex-start;
    padding: 14px;
  }
  .data-health-head-icon {
    display: none;
  }
  .data-health-head h1 {
    font-size: 19px;
  }
  .data-health-head p {
    max-width: 210px;
  }
  .data-health-head-actions {
    gap: 5px;
  }
  .data-health-refresh span {
    display: none;
  }
  .data-health-refresh {
    width: 38px;
    height: 38px;
    padding: 0;
  }
  .data-health-summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .data-health-summary>div {
    padding: 12px 13px;
  }
  .data-health-summary strong {
    font-size: 21px;
  }
  .data-health-panel {
    padding: 11px;
  }
  .data-health-toolbar {
    /* Mobile: keep search on top, with problem and severity filters side by side. */
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .data-health-toolbar > .data-health-search {
    grid-column: 1 / -1;
    min-width: 0;
  }
  /* Custom select UI wraps native selects and may set an inline pixel width.
     Fit each wrapper to its grid cell without changing dropdown behavior. */
  .data-health-toolbar > .pretty-select-wrap {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }
  .data-health-toolbar > .pretty-select-wrap .pretty-select-trigger {
    min-width: 0;
    padding-inline: 10px;
    gap: 6px;
  }
  .data-health-result-head>span {
    display: none;
  }
  .data-health-issue {
    grid-template-columns: 32px minmax(0,1fr);
    padding: 10px;
    gap: 9px;
  }
  .data-health-issue-icon {
    width: 32px;
    height: 32px;
  }
  .data-health-issue-copy {
    padding-right: 57px;
  }
  .data-health-issue-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: auto;
  }
  .data-health-open {
    flex: none;
    max-width: 122px;
  }
  .data-health-issue-copy strong {
    font-size: 12px;
  }
  .data-health-issue-copy span {
    font-size: 10px;
  }
  .data-health-skip-actions {
    top: 7px;
    right: 7px;
  }
  .data-health-skip {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
}

@media (max-width:420px){
  .data-health-head {
    gap: 8px;
  }
  .data-health-head-main {
    gap: 8px;
  }
  .data-health-head p {
    display: none;
  }
  .data-health-head-actions {
    align-self: center;
  }
  .data-health-refresh {
    width: 34px;
    height: 34px;
  }
}

@media (max-width:560px){
  .data-health-results {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width:720px){
  .data-health-view-switch {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: 100%;
  }
  .data-health-view-switch button {
    padding: 0 6px;
    font-size: 10px;
  }
  .data-health-result-tools {
    max-width: 58%;
  }
  .data-health-read-only {
    display: none;
  }
  .data-health-active-filter {
    max-width: 100%;
  }
  .data-health-score-categories {
    gap: 4px;
  }
  .data-health-score-category {
    padding: 6px 2px;
  }
  .data-health-score-category span,.data-health-score-category small {
    font-size: 7px;
  }
  .data-health-common-issue .data-health-open {
    max-width: 150px;
  }
  .data-health-common-issue .data-health-open span {
    max-width: 112px;
  }
}

.data-health-limits-card {
  margin-bottom: 14px;
  padding: 16px 17px;
  border: 1px solid rgba(148,163,184,.23);
  border-radius: 19px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 36px rgba(30,41,59,.065);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #334155;
}

.data-health-limits-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.data-health-limits-head h2 {
  margin: 2px 0 2px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 850;
  color: #1e293b;
}

.data-health-limits-head p {
  margin: 0;
  color: var(--ui-legacy-secondary);
  font-size: 10.5px;
  line-height: 1.45;
}

.data-health-limits-manual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 9px;
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 999px;
  background: rgba(16,185,129,.075);
  color: #059669;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.data-health-limits-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}

.data-health-limit-item {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: rgba(248,250,252,.38);
}

.data-health-limit-item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #6366f1;
}

.data-health-limit-item.is-cloudinary:before {
  background: #0ea5e9;
}

.data-health-limit-item.is-supabase:before {
  background: #10b981;
}

.data-health-limit-item.is-vercel:before {
  background: #8b5cf6;
}

.data-health-limit-top {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.data-health-limit-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(99,102,241,.09);
  color: #6366f1;
}

.is-cloudinary .data-health-limit-icon {
  background: rgba(14,165,233,.09);
  color: #0284c7;
}

.is-supabase .data-health-limit-icon {
  background: rgba(16,185,129,.09);
  color: #059669;
}

.is-vercel .data-health-limit-icon {
  background: rgba(139,92,246,.10);
  color: #7c3aed;
}

.data-health-limit-top strong,.data-health-limit-top small {
  display: block;
}

.data-health-limit-top strong {
  font-size: 11.5px;
  color: #1e293b;
}

.data-health-limit-top small {
  margin-top: 1px;
  font-size: 8.5px;
  color: var(--ui-legacy-caption);
}

.data-health-limit-quota {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.data-health-limit-quota strong {
  font-size: 17px;
  line-height: 1;
  color: #1e293b;
}

.data-health-limit-quota span {
  font-size: 9px;
  color: var(--ui-legacy-secondary);
  font-weight: 700;
}

.data-health-limit-item>p {
  min-height: 31px;
  margin: 7px 0 8px;
  color: var(--ui-legacy-secondary);
  font-size: 9px;
  line-height: 1.45;
}

.data-health-limit-local {
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(148,163,184,.075);
}

.data-health-limit-local span,.data-health-limit-local strong {
  display: block;
}

.data-health-limit-local span {
  font-size: 7.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-legacy-caption);
}

.data-health-limit-local strong {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: #334155;
}

.data-health-limit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  color: #6366f1;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.data-health-limit-link:hover {
  text-decoration: underline;
}

.is-cloudinary .data-health-limit-link {
  color: #0284c7;
}

.is-supabase .data-health-limit-link {
  color: #059669;
}

.is-vercel .data-health-limit-link {
  color: #7c3aed;
}

body.dark-mode .is-cloudinary .data-health-limit-link {
  color: #38bdf8;
}

body.dark-mode .is-supabase .data-health-limit-link {
  color: #34d399;
}

body.dark-mode .is-vercel .data-health-limit-link {
  color: #c4b5fd;
}

.data-health-limit-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.14);
  color: var(--ui-legacy-secondary);
  font-size: 8.5px;
}

.data-health-limit-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 750;
}

.data-health-limit-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.data-health-limit-legend .is-green {
  background: #10b981;
}

.data-health-limit-legend .is-yellow {
  background: #f59e0b;
}

.data-health-limit-legend .is-red {
  background: #f43f5e;
}

.data-health-limit-legend small {
  margin-left: auto;
  color: var(--ui-legacy-caption);
  font-size: 8px;
}

body.dark-mode .data-health-limits-card {
  background: rgba(15,23,42,.66);
  border-color: rgba(148,163,184,.16);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  color: #dbe4f0;
}

body.dark-mode .data-health-limits-head h2,body.dark-mode .data-health-limit-top strong,body.dark-mode .data-health-limit-quota strong,body.dark-mode .data-health-limit-local strong {
  color: #e2e8f0;
}

body.dark-mode .data-health-limits-head p,body.dark-mode .data-health-limit-item>p,body.dark-mode .data-health-limit-quota span,body.dark-mode .data-health-limit-legend {
  color: #94a3b8;
}

body.dark-mode .data-health-limit-item {
  background: rgba(30,41,59,.44);
  border-color: rgba(148,163,184,.13);
}

body.dark-mode .data-health-limit-local {
  background: rgba(15,23,42,.34);
}

body.dark-mode .is-vercel .data-health-limit-icon {
  background: rgba(139,92,246,.14);
  color: #c4b5fd;
}

@media (max-width:900px){
  .data-health-limits-grid {
    grid-template-columns: 1fr;
  }
  .data-health-limit-item>p {
    min-height: 0;
  }
  .data-health-limit-legend small {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width:520px){
  .data-health-limits-card {
    padding: 13px;
  }
  .data-health-limits-head {
    display: block;
  }
  .data-health-limits-manual {
    margin-top: 8px;
  }
  .data-health-limit-legend {
    gap: 7px 10px;
  }
}

.data-health-cloudinary-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
  padding: 15px 17px;
  border: 1px solid rgba(14,165,233,.22);
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(14,165,233,.075),rgba(99,102,241,.055)),rgba(255,255,255,.58);
  box-shadow: 0 14px 36px rgba(30,41,59,.065);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #334155;
}

.data-health-cloudinary-main {
  min-width: 0;
}

.data-health-cloudinary-card .cloudinary-migration-head {
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
}

.data-health-cloudinary-card .cloudinary-migration-icon {
  background: linear-gradient(135deg,rgba(14,165,233,.14),rgba(99,102,241,.14));
  color: #2563eb;
}

.data-health-cloudinary-card .cloudinary-migration-copy strong {
  font-size: 13px;
  color: #1e293b;
}

.data-health-cloudinary-card .cloudinary-migration-copy span {
  font-size: 11px;
  color: var(--ui-legacy-secondary);
}

.data-health-cloudinary-card .cloudinary-migration-progress {
  margin-top: 10px;
  height: 5px;
}

.data-health-cloudinary-card .cloudinary-migration-detail {
  margin-top: 7px;
  min-height: 15px;
}

.data-health-cloudinary-metrics {
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.data-health-cloudinary-metric {
  min-width: 112px;
  padding: 7px 9px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.32);
}

.data-health-cloudinary-metric span,.data-health-cloudinary-metric strong {
  display: block;
}

.data-health-cloudinary-metric span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ui-legacy-caption);
}

.data-health-cloudinary-metric strong {
  margin-top: 2px;
  font-size: 13px;
  color: #334155;
}

.data-health-cloudinary-side {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.data-health-cloudinary-side .cloudinary-migration-actions {
  display: flex;
  margin: 0;
  gap: 7px;
  justify-content: flex-end;
}

.data-health-cloudinary-side .cloudinary-migration-actions.hidden {
  display: none!important;
}

.data-health-cloudinary-scan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(14,165,233,.22);
  border-radius: 10px;
  background: rgba(14,165,233,.075);
  color: #0284c7;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.data-health-cloudinary-scan:hover {
  background: rgba(14,165,233,.13);
}

.data-health-cloudinary-card.is-done {
  border-color: rgba(16,185,129,.23);
  background: linear-gradient(135deg,rgba(16,185,129,.065),rgba(14,165,233,.045)),rgba(255,255,255,.58);
}

.data-health-cloudinary-card.is-done .cloudinary-migration-icon {
  background: rgba(16,185,129,.11);
  color: #059669;
}

.data-health-cloudinary-card.has-errors {
  border-color: rgba(245,158,11,.25);
}

.data-health-cloudinary-card.has-errors .cloudinary-migration-icon {
  background: rgba(245,158,11,.12);
  color: #d97706;
}

body.dark-mode .data-health-cloudinary-card {
  background: linear-gradient(135deg,rgba(14,165,233,.09),rgba(99,102,241,.07)),rgba(15,23,42,.66);
  border-color: rgba(56,189,248,.18);
  color: #dbe4f0;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

body.dark-mode .data-health-cloudinary-card .cloudinary-migration-copy strong,body.dark-mode .data-health-cloudinary-metric strong {
  color: #e2e8f0;
}

body.dark-mode .data-health-cloudinary-card .cloudinary-migration-copy span,body.dark-mode .data-health-cloudinary-card .cloudinary-migration-detail {
  color: #94a3b8;
}

body.dark-mode .data-health-cloudinary-metric {
  background: rgba(30,41,59,.44);
  border-color: rgba(148,163,184,.14);
}

body.dark-mode .data-health-cloudinary-scan {
  background: rgba(14,165,233,.10);
  color: #7dd3fc;
  border-color: rgba(56,189,248,.18);
}

@media (max-width:720px){
  .data-health-cloudinary-card {
    grid-template-columns: 1fr;
    padding: 13px;
    gap: 11px;
  }
  .data-health-cloudinary-side {
    justify-content: flex-start;
  }
  .data-health-cloudinary-side .cloudinary-migration-actions {
    justify-content: flex-start;
  }
  .data-health-cloudinary-metric {
    min-width: 0;
    flex: 1;
  }
  .data-health-cloudinary-scan span {
    display: inline;
  }
}

@media (max-width:420px){
  .data-health-cloudinary-side {
    display: grid;
    grid-template-columns: 1fr;
  }
  .data-health-cloudinary-side .cloudinary-migration-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .data-health-cloudinary-side button {
    width: 100%;
  }
  .data-health-cloudinary-metrics {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.cloudinary-migration-panel {
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 1000000;
  width: min(390px,calc(100vw - 28px));
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 50px rgba(15,23,42,.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
  color: #0f172a;
}

.cloudinary-migration-panel.hidden {
  display: none!important;
}

.cloudinary-migration-head {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 34px;
  gap: 10px;
  align-items: center;
}

.cloudinary-migration-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(59,130,246,.11);
  color: #2563eb;
}

.cloudinary-migration-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cloudinary-migration-copy strong {
  font-size: 13px;
  line-height: 1.25;
}

.cloudinary-migration-copy span {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ui-legacy-secondary);
}

.cloudinary-migration-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(148,163,184,.11);
  color: #64748b;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.cloudinary-migration-progress {
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  overflow: hidden;
}

.cloudinary-migration-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#60a5fa,#6366f1);
  transition: width .22s ease;
}

.cloudinary-migration-detail {
  margin-top: 9px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ui-legacy-secondary);
}

.cloudinary-migration-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.cloudinary-migration-actions.hidden {
  display: none!important;
}

.cloudinary-migration-actions button {
  border: 1px solid rgba(239,68,68,.22);
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(239,68,68,.08);
  color: #dc2626;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.cloudinary-migration-panel.is-done .cloudinary-migration-icon {
  background: rgba(16,185,129,.11);
  color: #059669;
}

.cloudinary-migration-panel.has-errors .cloudinary-migration-icon {
  background: rgba(245,158,11,.12);
  color: #d97706;
}

body.dark-mode .cloudinary-migration-panel {
  background: rgba(15,23,42,.84);
  border-color: rgba(148,163,184,.22);
  color: #f8fafc;
  box-shadow: 0 20px 55px rgba(0,0,0,.42);
}

body.dark-mode .cloudinary-migration-copy span,body.dark-mode .cloudinary-migration-detail {
  color: #94a3b8;
}

body.dark-mode .cloudinary-migration-close {
  background: rgba(148,163,184,.12);
  color: #cbd5e1;
}

#cloudinary-migration-start {
  border-color: rgba(37,99,235,.22);
  background: rgba(37,99,235,.09);
  color: #2563eb;
}

#cloudinary-migration-start:hover {
  background: rgba(37,99,235,.14);
}

#cloudinary-migration-retry {
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.09);
  color: #d97706;
}

@media (max-width:640px){
  .cloudinary-migration-panel {
    right: 12px;
    bottom: 68px;
    width: calc(100vw - 24px);
    border-radius: 16px;
  }
}


/* Ba trường Tập / Phiên bản / Tình trạng có cấu trúc, nhãn và khoảng cách giống nhau. */


/* Ba khung chính luôn bằng nhau về chiều rộng (do 1fr) và chiều cao. */


/* Native select đã được PrettySelect thay thế không được chiếm thêm một ô lưới. */


/* Vị trí chuẩn khi truyện không chia phần. */


/* Hai nút hành động nằm đúng baseline với ba khung, không có hàng riêng. */


/* Nếu bộ truyện chia phần: thêm Phần truyện vào cùng hàng, vẫn không wrap. */


/* Chế độ Chỉ tên riêng ẩn ô Tập và tái chia cột ngay trong cùng một lưới. */


/* Một tập dùng tình trạng inline; ô tình trạng cũ bên dưới chỉ dành cho mode khác. */


/* Màn hình hẹp vẫn BẮT BUỘC một hàng; chỉ thu nút/gap và chữ, không đổi cấu trúc. */

@media (max-width:720px){
  #spending-view .spending-timeline-row {
    grid-template-columns: 62px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    column-gap: 11px !important;
    row-gap: 4px !important;
    min-height: 118px !important;
    padding: 9px 10px !important;
  }
  #spending-view .spending-timeline-cover {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 62px !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
  }
  #spending-view .spending-timeline-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-content: center !important;
  }
  #spending-view .spending-timeline-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: start !important;
    margin-top: 0 !important;
    padding: 0 0 2px !important;
  }
}

@media (max-width:430px){
  #spending-view .spending-timeline-row {
    grid-template-columns: 64px minmax(0,1fr) !important;
    min-height: 122px !important;
  }
  #spending-view .spending-timeline-cover {
    width: 64px !important;
  }
}

/* Limited accessories: static rainbow names, with readable theme-specific stops. */

body .goods-limited-name {
  --goods-name-rainbow: linear-gradient(100deg,#be185d 0%,#c2410c 16%,#a16207 32%,#15803d 49%,#0369a1 65%,#4f46e5 82%,#9333ea 100%);
  color: #7e22ce !important;
  text-shadow: none !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

body.dark-mode .goods-limited-name {
  --goods-name-rainbow: linear-gradient(100deg,#fda4af 0%,#fdba74 16%,#fde68a 32%,#86efac 49%,#7dd3fc 65%,#a5b4fc 82%,#d8b4fe 100%);
  color: #d8b4fe !important;
}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
  body .goods-limited-name,
  body.dark-mode .goods-limited-name {
    background-image: var(--goods-name-rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
  }
}

@media (forced-colors:active){
  body .goods-limited-name,
  body.dark-mode .goods-limited-name {
    background-image: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText !important;
  }
}

.goods-limited-card {
  border-color: rgba(250,204,21,.22)!important;
  box-shadow: 0 0 0 1px rgba(250,204,21,.06), 0 10px 30px rgba(124,58,237,.08)!important;
}

.goods-limited-thumb {
  box-shadow: 0 0 0 1px rgba(250,204,21,.20), 0 0 20px rgba(168,85,247,.12);
  border-color: rgba(250,204,21,.26)!important;
}

.goods-limited-field,
.goods-selling-panel {
  margin-top: 10px;
  border: 1px solid #d7ddea;
  background: rgba(248,250,252,.72);
  border-radius: 12px;
  padding: 9px 10px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.goods-limited-field:focus-within,
.goods-selling-panel:focus-within {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
  background: rgba(255,255,255,.95);
}

body.dark-mode .goods-limited-field,
body.dark-mode .goods-selling-panel {
  border-color: #334155;
  background: rgba(15,23,42,.38);
}

body.dark-mode .goods-limited-field:focus-within,
body.dark-mode .goods-selling-panel:focus-within {
  border-color: #818cf8;
  background: rgba(15,23,42,.68);
  box-shadow: 0 0 0 3px rgba(129,140,248,.14);
}

.goods-limited-switch,
.goods-selling-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.goods-limited-switch .goods-limited-copy,
.goods-selling-head > div:first-child {
  min-width: 0;
}

.goods-limited-switch .goods-limited-title,
.goods-selling-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.goods-limited-switch .goods-limited-title i,
.goods-selling-title i {
  color: #64748b;
}

.goods-limited-switch .goods-limited-subtitle,
.goods-selling-subtitle {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.35;
}

body.dark-mode .goods-limited-switch .goods-limited-title,
body.dark-mode .goods-selling-title {
  color: #cbd5e1;
}

body.dark-mode .goods-limited-switch .goods-limited-title i,
body.dark-mode .goods-selling-title i {
  color: #94a3b8;
}

.goods-selling-settings {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.18);
}

.goods-selling-settings.hidden {
  display: none !important;
}

.goods-selling-price-wrap {
  position: relative;
}

.goods-selling-price-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 28px 8px 10px;
  border: 1px solid #d7ddea;
  border-radius: 10px;
  background: rgba(255,255,255,.95);
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.goods-selling-price-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

body.dark-mode .goods-selling-price-input {
  background: rgba(15,23,42,.82);
  border-color: #334155;
  color: #e2e8f0;
}

body.dark-mode .goods-selling-price-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129,140,248,.14);
}

.goods-selling-currency {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-legacy-caption);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

@media (max-width: 760px){
  .vol-goods-utility-grid {
    gap: 12px;
  }


}

@media (max-width: 420px){
  .vol-goods-utility-grid .goods-selling-panel,
.vol-goods-utility-grid .goods-limited-inline-panel {
    padding-left: 12px!important;
    padding-right: 12px!important;
  }
}

@media (max-width: 760px){
  .vol-goods-utility-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important;
    align-items: start!important;
  }
  .vol-goods-utility-grid > .goods-selling-panel {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }
  .vol-goods-utility-grid > .goods-limited-inline-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .vol-goods-utility-grid > .vol-goods-value-field {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}

.vol-goods-utility-grid {
  display: grid!important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important;
  gap: 12px 14px!important;
  align-items: start!important;
}

.vol-goods-utility-grid > .goods-selling-panel {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.vol-goods-utility-grid > .goods-limited-inline-panel {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.vol-goods-utility-grid > .vol-goods-value-field {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.vol-goods-utility-grid > .vol-goods-value-field,
.vol-goods-utility-grid > .goods-limited-inline-panel {
  min-height: 0;
}


@media (max-width: 420px){
  .vol-goods-utility-grid {
    gap: 10px 10px!important;
  }
}

/* Popup edit phụ kiện */


/* Popup tập */

/* Chỉ chỉnh popup tập lẻ để 3 khung giống popup phụ kiện */

.release-ownership-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .16s ease,filter .16s ease,opacity .16s ease;
}

.release-ownership-badge.release-unowned-badge {
  background: rgba(244,63,94,.96);
  box-shadow: 0 5px 14px rgba(190,24,93,.24);
}

.release-ownership-badge.release-owned-badge {
  background: rgba(16,185,129,.96);
  box-shadow: 0 5px 14px rgba(5,150,105,.22);
}

.release-ownership-badge.release-unreleased-badge {
  background: rgba(14,165,233,.96);
  box-shadow: 0 5px 14px rgba(2,132,199,.22);
}

button.release-ownership-badge {
  cursor: pointer;
  pointer-events: auto;
}

button.release-ownership-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

button.release-ownership-badge:focus-visible {
  outline: 2px solid rgba(255,255,255,.96);
  outline-offset: 2px;
}

.release-ownership-badge.is-locked {
  cursor: default;
  pointer-events: none;
  opacity: .94;
}

.release-ownership-badge.is-saving {
  opacity: .65;
  cursor: wait;
  transform: none!important;
}

.release-ownership-badge:disabled {
  pointer-events: none;
}

@media (max-width:640px){
  .release-ownership-badge {
    top: 6px;
    right: 6px;
    padding: 3px 5px;
    font-size: 8px;
    gap: 3px;
  }
}

#pretty-select-portal[data-select-id="release-month-select"] .pretty-select-option-text,
#pretty-select-portal[data-select-id="release-year-select"] .pretty-select-option-text {
  white-space: nowrap!important;
  overflow-wrap: normal!important;
  word-break: keep-all!important;
}

#pretty-select-portal[data-select-id="release-month-select"] {
  min-width: 118px!important;
}

#pretty-select-portal[data-select-id="release-year-select"] {
  min-width: 96px!important;
}

@media (max-width: 640px){
  /* Ngày phát hành dùng cùng cơ chế khung chứa với preorder để Safari/iOS không vượt viền. */


}

.sales-profit-grid {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-top: 2px;
}

.sales-profit-card {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.sales-profit-card span {
  display: block;
  color: var(--ui-legacy-secondary);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.sales-profit-card strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-profit-card.is-profit strong {
  color: #059669;
}

.sales-profit-card.is-loss strong {
  color: #e11d48;
}

.sale-complete-btn {
  grid-column: 1/-1;
  min-height: 38px;
  border: 1px solid rgba(16,185,129,.28);
  border-radius: 11px;
  background: linear-gradient(135deg,rgba(16,185,129,.14),rgba(34,197,94,.08));
  color: #047857;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: .16s ease;
}

.sale-complete-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(16,185,129,.42);
  background: linear-gradient(135deg,rgba(16,185,129,.20),rgba(34,197,94,.12));
}

.sale-complete-btn.hidden {
  display: none!important;
}

.sale-last-summary {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 11px;
  background: rgba(16,185,129,.06);
  color: var(--ui-text);
  font-size: 10px;
  line-height: 1.45;
}

.sale-last-summary strong {
  color: #047857;
}

.sale-last-summary.hidden {
  display: none!important;
}

.volume-seal-field {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 5px;
}

.volume-seal-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--ui-border,#dbe3ee);
  border-radius: 10px;
  background: var(--ui-surface-solid,#fff);
  color: var(--ui-text,#0f172a);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 750;
  outline: none;
}

.volume-seal-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}

body.dark-mode .sales-profit-card {
  background: rgba(15,23,42,.54);
  border-color: rgba(148,163,184,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.dark-mode .sales-profit-card span {
  color: #94a3b8;
}

body.dark-mode .sales-profit-card strong {
  color: #f8fafc;
}

body.dark-mode .sales-profit-card.is-profit strong {
  color: #34d399;
}

body.dark-mode .sales-profit-card.is-loss strong {
  color: #fb7185;
}

body.dark-mode .sale-complete-btn {
  color: #6ee7b7;
  border-color: rgba(52,211,153,.28);
  background: linear-gradient(135deg,rgba(6,78,59,.42),rgba(20,83,45,.30));
}

body.dark-mode .sale-last-summary {
  background: rgba(6,78,59,.24);
  border-color: rgba(52,211,153,.18);
  color: #a7f3d0;
}

body.dark-mode .sale-last-summary strong {
  color: #6ee7b7;
}

@media (max-width:640px){
  .sales-profit-grid {
    gap: 6px;
  }
  .sales-profit-card {
    padding: 8px;
  }
  .sales-profit-card strong {
    font-size: 11px;
  }
}

.overview-unified-stat, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"], #book-vault-view .collection-stat-card {
  position: relative !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 15px !important;
  min-height: 88px !important;
  border: 1px solid var(--glass-border,rgba(148,163,184,.26)) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.24) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.05) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.16) !important;
  backdrop-filter: blur(25px) saturate(1.16) !important;
  overflow: hidden !important;
}

.overview-unified-stat::after, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"]::after, #book-vault-view .collection-stat-card::after {
  content: "" !important;
  position: absolute !important;
  width: 80px !important;
  height: 80px !important;
  right: -35px !important;
  bottom: -42px !important;
  border-radius: 999px !important;
  opacity: .26 !important;
  background: currentColor !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

body.dark-mode .overview-unified-stat, body.dark-mode #shelf-view > div:nth-child(2) > div[data-unified-stat="1"], body.dark-mode #book-vault-view .collection-stat-card {
  background: rgba(15,23,42,.28) !important;
  border-color: rgba(148,163,184,.22) !important;
  box-shadow: 0 14px 36px rgba(2,6,23,.16) !important;
}

.overview-unified-icon, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-icon, #book-vault-view .collection-stat-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.44) !important;
  border: 1px solid rgba(255,255,255,.44) !important;
  box-shadow: none !important;
}

.overview-unified-icon i, #book-vault-view .collection-stat-icon i {
  font-size: 15px !important;
  line-height: 1 !important;
}

body.dark-mode .overview-unified-icon, body.dark-mode #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-icon, body.dark-mode #book-vault-view .collection-stat-icon {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.overview-unified-copy, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-copy, #book-vault-view .collection-stat-card > div {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.overview-unified-label, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-label, #book-vault-view .collection-stat-card .overview-unified-label {
  display: block !important;
  margin-bottom: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  color: var(--ui-muted,#64748b) !important;
  text-transform: uppercase !important;
}

.overview-unified-value-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.overview-unified-value, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-value, #book-vault-view .collection-stat-card strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
  color: var(--ui-text,#111827) !important;
}

.overview-unified-sub, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-sub, #book-vault-view .collection-stat-card small {
  display: block !important;
  margin-top: 3px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  color: var(--ui-muted,#64748b) !important;
}

body.dark-mode .overview-unified-value, body.dark-mode #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-value, body.dark-mode #book-vault-view .collection-stat-card strong {
  color: #f8fafc !important;
}

body.dark-mode .overview-unified-label, body.dark-mode .overview-unified-sub, body.dark-mode #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-label, body.dark-mode #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-sub, body.dark-mode #book-vault-view .collection-stat-card .overview-unified-label, body.dark-mode #book-vault-view .collection-stat-card small {
  color: #94a3b8 !important;
}

/* màu tone cho từng card */

.overview-tone-purple {
  color: #7268df !important;
}

.overview-tone-purple .overview-unified-icon {
  color: #655bd4 !important;
  background: rgba(99,102,241,.10) !important;
}

.overview-tone-pink {
  color: #d85c92 !important;
}

.overview-tone-pink .overview-unified-icon {
  color: #c94f86 !important;
  background: rgba(236,72,153,.09) !important;
}

.overview-tone-green {
  color: #36a58e !important;
}

.overview-tone-green .overview-unified-icon {
  color: #218b78 !important;
  background: rgba(16,185,129,.09) !important;
}

.overview-tone-gold {
  color: #c58a25 !important;
}

.overview-tone-gold .overview-unified-icon {
  color: #b67c1e !important;
  background: rgba(245,158,11,.10) !important;
}

.overview-tone-blue {
  color: #428eb4 !important;
}

.overview-tone-blue .overview-unified-icon {
  color: #347fa5 !important;
  background: rgba(14,165,233,.09) !important;
}

.overview-tone-rose {
  color: #df6b80 !important;
}

.overview-tone-rose .overview-unified-icon {
  color: #d45169 !important;
  background: rgba(244,63,94,.09) !important;
}

#book-vault-view .collection-stat-card[data-stat="volumes"] {
  color: #7268df !important;
}

#book-vault-view .collection-stat-card[data-stat="volumes"] .collection-stat-icon {
  color: #655bd4 !important;
  background: rgba(99,102,241,.10) !important;
}

#book-vault-view .collection-stat-card[data-stat="standard"] {
  color: #36a58e !important;
}

#book-vault-view .collection-stat-card[data-stat="standard"] .collection-stat-icon {
  color: #218b78 !important;
  background: rgba(16,185,129,.09) !important;
}

#book-vault-view .collection-stat-card[data-stat="special"] {
  color: #d85c92 !important;
}

#book-vault-view .collection-stat-card[data-stat="special"] .collection-stat-icon {
  color: #c94f86 !important;
  background: rgba(236,72,153,.09) !important;
}

#book-vault-view .collection-stat-card[data-stat="multi"] {
  color: #428eb4 !important;
}

#book-vault-view .collection-stat-card[data-stat="multi"] .collection-stat-icon {
  color: #347fa5 !important;
  background: rgba(14,165,233,.09) !important;
}

#book-vault-view .collection-stat-card[data-stat="manga"] {
  color: #5c9bf0 !important;
}

#book-vault-view .collection-stat-card[data-stat="manga"] .collection-stat-icon {
  color: #4d88df !important;
  background: rgba(96,165,250,.10) !important;
}

#shelf-view .overview-unified-stat .spent-eye-toggle {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#shelf-view .overview-unified-stat .spent-eye-toggle i {
  font-size: 11px !important;
  line-height: 1 !important;
}

@media (max-width:720px){
  .overview-unified-stat, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"], #book-vault-view .collection-stat-card {
    padding: 12px !important;
    border-radius: 17px !important;
    gap: 10px !important;
    min-height: 82px !important;
  }
  .overview-unified-icon, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-icon, #book-vault-view .collection-stat-icon {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    flex-basis: 35px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
  .overview-unified-icon i, #book-vault-view .collection-stat-icon i {
    font-size: 14px !important;
  }
  .overview-unified-value, #shelf-view > div:nth-child(2) > div[data-unified-stat="1"] .overview-unified-value, #book-vault-view .collection-stat-card strong {
    font-size: 16px !important;
  }
  .overview-unified-label, .overview-unified-sub, #book-vault-view .collection-stat-card .overview-unified-label, #book-vault-view .collection-stat-card small {
    font-size: 8px !important;
  }
}

#book-vault-view .collection-stat-card > .collection-stat-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  flex: 0 0 50px !important;
  border-radius: 14px !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

#book-vault-view .collection-stat-card > .collection-stat-icon i {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Kho Quyển: dùng cùng ngôn ngữ visual như icon tiêu đề */

#book-vault-view .collection-stat-card[data-stat="volumes"] > .collection-stat-icon {
  background: linear-gradient(135deg,rgba(139,92,246,.28),rgba(59,130,246,.16)) !important;
  color: #b6a5ff !important;
}

#book-vault-view .collection-stat-card[data-stat="standard"] > .collection-stat-icon {
  background: linear-gradient(135deg,rgba(16,185,129,.28),rgba(34,197,94,.16)) !important;
  color: #66e1b3 !important;
}

#book-vault-view .collection-stat-card[data-stat="special"] > .collection-stat-icon {
  background: linear-gradient(135deg,rgba(236,72,153,.28),rgba(168,85,247,.16)) !important;
  color: #ff8fcd !important;
}

#book-vault-view .collection-stat-card[data-stat="multi"] > .collection-stat-icon {
  background: linear-gradient(135deg,rgba(59,130,246,.28),rgba(6,182,212,.16)) !important;
  color: #7dc2ff !important;
}

#book-vault-view .collection-stat-card[data-stat="manga"] > .collection-stat-icon {
  background: linear-gradient(135deg,rgba(96,165,250,.28),rgba(59,130,246,.16)) !important;
  color: #87bcff !important;
}

@media (max-width: 720px){
  #book-vault-view .collection-stat-card > .collection-stat-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
    border-radius: 13px !important;
  }
  #book-vault-view .collection-stat-card > .collection-stat-icon i {
    font-size: 18px !important;
  }
}

/* Card Liên hệ: chỉ giữ đúng 1 chữ "Liên hệ" */

#shelf-view .contact-stat-card.overview-unified-stat {
  align-items: center !important;
}

#shelf-view .contact-stat-card.overview-unified-stat .overview-unified-label,
#shelf-view .contact-stat-card.overview-unified-stat .overview-unified-sub,
#shelf-view .contact-stat-card .contact-stat-sub {
  display: none !important;
}

#shelf-view .contact-stat-card.overview-unified-stat .overview-unified-copy,
#shelf-view .contact-stat-card .contact-stat-copy {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

#shelf-view .contact-stat-card.overview-unified-stat .overview-unified-value,
#shelf-view .contact-stat-card .contact-stat-title {
  margin: 0 !important;
  font-size: clamp(18px,2.4vw,28px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: .01em !important;
}

/* Mobile: tách cụm Sáng/Tối + Tài khoản sang khoảng trống bên phải */

@media (max-width: 767px){
  #app-global-header-wrap {
    padding-right: 0 !important;
  }
  #app-global-header-wrap .app-global-header-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0,1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    padding-right: 12px !important;
  }
  #app-global-header-wrap #app-sidebar-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #app-global-header-wrap .app-header-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #app-global-header-wrap .app-header-actions {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  #app-global-header-wrap .app-header-actions #theme-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-login-copy,
  #app-global-header-wrap .app-header-actions .app-header-user-copy {
    display: none !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-login,
  #app-global-header-wrap .app-header-actions .app-header-user {
    min-height: 40px !important;
    height: 40px !important;
    padding: 4px 6px !important;
    gap: 6px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
  /* nếu đã đăng nhập thì vẫn giữ nút đăng xuất nhỏ gọn ở bên phải avatar */
  #app-global-header-wrap .app-header-actions .app-header-logout {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
  }
}

@media (max-width: 420px){
  #app-global-header-wrap .app-global-header-card {
    grid-template-columns: 50px minmax(0,1fr) auto !important;
    column-gap: 7px !important;
    padding-right: 10px !important;
  }
  #app-global-header-wrap .app-header-actions {
    gap: 5px !important;
  }
  #app-global-header-wrap .app-header-actions #theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-login,
  #app-global-header-wrap .app-header-actions .app-header-user {
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 5px !important;
  }
  #app-global-header-wrap .app-header-actions .app-header-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

#book-vault-view .vault-bottom-layout .collection-panel-head.compact h2 {
  font-size: clamp(18px, 1.02vw, 24px) !important;
  line-height: 1.16 !important;
}

#book-vault-view .vault-bottom-layout .collection-panel-head.compact .collection-eyebrow {
  font-size: clamp(10.5px, 0.62vw, 13px) !important;
  letter-spacing: .16em !important;
}

#book-vault-view .vault-bottom-layout .vault-recent-row,
#book-vault-view .vault-bottom-layout .vault-side-row {
  min-height: 72px !important;
  grid-template-columns: 52px minmax(0,1fr) auto !important;
  gap: 12px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
}

#book-vault-view .vault-bottom-layout .vault-recent-row img,
#book-vault-view .vault-bottom-layout .vault-side-row img {
  width: 52px !important;
  height: 68px !important;
  border-radius: 8px !important;
}

#book-vault-view .vault-bottom-layout .vault-recent-row strong,
#book-vault-view .vault-bottom-layout .vault-side-row strong {
  font-size: clamp(12.5px, 0.72vw, 15.5px) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

#book-vault-view .vault-bottom-layout .vault-recent-row span,
#book-vault-view .vault-bottom-layout .vault-side-row span {
  margin-top: 4px !important;
  font-size: clamp(10.5px, 0.62vw, 12.5px) !important;
  line-height: 1.3 !important;
}

#book-vault-view .vault-bottom-layout .vault-recent-row b,
#book-vault-view .vault-bottom-layout .vault-side-row b {
  font-size: clamp(11.5px, 0.68vw, 14px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

#book-vault-view .vault-bottom-layout .text-xs.text-gray-400 {
  font-size: 13px !important;
}

@media (max-width: 767px){
  #book-vault-view .vault-bottom-layout .collection-panel-head.compact h2 {
    font-size: 19px !important;
  }
  #book-vault-view .vault-bottom-layout .collection-panel-head.compact .collection-eyebrow {
    font-size: 11px !important;
  }
  #book-vault-view .vault-bottom-layout .vault-recent-row,
  #book-vault-view .vault-bottom-layout .vault-side-row {
    min-height: 68px !important;
    grid-template-columns: 48px minmax(0,1fr) auto !important;
    gap: 11px !important;
    padding: 8px 9px !important;
  }
  #book-vault-view .vault-bottom-layout .vault-recent-row img,
  #book-vault-view .vault-bottom-layout .vault-side-row img {
    width: 48px !important;
    height: 62px !important;
  }
  #book-vault-view .vault-bottom-layout .vault-recent-row strong,
  #book-vault-view .vault-bottom-layout .vault-side-row strong {
    font-size: 13px !important;
  }
  #book-vault-view .vault-bottom-layout .vault-recent-row span,
  #book-vault-view .vault-bottom-layout .vault-side-row span {
    font-size: 11px !important;
  }
  #book-vault-view .vault-bottom-layout .vault-recent-row b,
  #book-vault-view .vault-bottom-layout .vault-side-row b {
    font-size: 12px !important;
  }
}

#detail-view #goods-grid .goods-detail-card {
  position: relative !important;
}

#detail-view #goods-grid .goods-detail-actions {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#detail-view #goods-grid .goods-card-action-btn {
  position: relative !important;
  z-index: 31 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

#detail-view #goods-grid .goods-card-action-delete {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

@media (max-width:640px){
  #detail-view #goods-grid .goods-detail-actions {
    z-index: 50 !important;
    pointer-events: auto !important;
  }
  #detail-view #goods-grid .goods-card-action-btn {
    z-index: 51 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  /* Vùng tap đủ lớn trên iPhone nhưng không làm card phình thêm */
  #detail-view #goods-grid .goods-card-action-delete::before,
  #detail-view #goods-grid .goods-card-action-edit::before {
    content: "" !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 14px !important;
  }
}

#app-global-header-wrap .app-header-account-trigger {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  z-index: 1511 !important;
}

.mobile-account-popover {
  display: none;
}

@media (max-width:767px){
  #app-global-header-wrap,
  #app-global-header-wrap .app-global-header-card,
  #app-global-header-wrap .app-header-actions,
  #app-global-header-wrap #auth-user-box {
    overflow: visible !important;
  }
  #app-global-header-wrap .app-header-actions {
    position: relative !important;
    z-index: 1510 !important;
  }
  #app-global-header-wrap #auth-user-box {
    position: relative !important;
    z-index: 1512 !important;
    pointer-events: auto !important;
  }
  #app-global-header-wrap .app-header-account-trigger {
    z-index: 1514 !important;
  }
  #mobile-account-popover {
    position: fixed !important;
    top: 74px !important;
    right: 12px !important;
    z-index: 5000 !important;
    width: min(260px,calc(100vw - 24px)) !important;
    padding: 10px !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    border-radius: 16px !important;
    background: rgba(15,23,42,.94) !important;
    color: #f8fafc !important;
    box-shadow: 0 18px 42px rgba(2,6,23,.28) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.15) !important;
    backdrop-filter: blur(26px) saturate(1.15) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  #mobile-account-popover:not(.hidden) {
    display: block !important;
  }
  .mobile-account-popover-user {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 4px 3px 10px !important;
    border-bottom: 1px solid rgba(148,163,184,.16) !important;
  }
  .mobile-account-popover-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(124,58,237,.22) !important;
    color: #c4b5fd !important;
  }
  .mobile-account-popover-user strong {
    display: block !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
  }
  .mobile-account-popover-user small {
    display: block !important;
    margin-top: 3px !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
  }
  .mobile-account-logout-btn {
    width: 100% !important;
    min-height: 40px !important;
    margin-top: 8px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(251,113,133,.20) !important;
    border-radius: 11px !important;
    background: rgba(159,18,57,.16) !important;
    color: #fda4af !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .mobile-account-logout-btn:active {
    transform: scale(.98) !important;
  }
  body:not(.dark-mode) #mobile-account-popover {
    background: rgba(255,255,255,.96) !important;
    color: #172033 !important;
    border-color: rgba(100,116,139,.20) !important;
    box-shadow: 0 18px 42px rgba(30,41,59,.16) !important;
  }
  body:not(.dark-mode) .mobile-account-popover-user {
    border-bottom-color: rgba(100,116,139,.14) !important;
  }
  body:not(.dark-mode) .mobile-account-popover-user small {
    color: #64748b !important;
  }
  body:not(.dark-mode) .mobile-account-logout-btn {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border-color: #fecdd3 !important;
  }
}

@media (min-width:768px){
  #mobile-account-popover {
    display: none !important;
  }
}

.edition-picker-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px 36px;
  gap: 6px;
  align-items: stretch;
}

.edition-picker-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 38px;
  border: 1px solid var(--glass-border,rgba(148,163,184,.26));
  border-radius: 10px;
  background: rgba(255,255,255,.34);
  color: #667085;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  touch-action: manipulation;
}

.edition-picker-action:hover {
  border-color: rgba(99,102,241,.38);
  color: #6756e8;
  background: rgba(99,102,241,.08);
}

.edition-picker-add {
  color: #655bd4;
}

.edition-picker-manage {
  color: #64748b;
}

body.dark-mode .edition-picker-action {
  background: rgba(15,23,42,.30);
  border-color: rgba(148,163,184,.22);
  color: #a7b2c8;
}

body.dark-mode .edition-picker-add {
  color: #a99cff;
}

.edition-manager-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.edition-manager-modal.hidden {
  display: none!important;
}

.edition-manager-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,7,18,.48);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.edition-manager-card {
  position: relative;
  z-index: 1;
  width: min(540px,100%);
  max-height: min(720px,calc(100vh - 28px));
  overflow: auto;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 22px;
  padding: 18px;
  background: rgba(250,252,255,.94);
  box-shadow: 0 28px 70px rgba(15,23,42,.24);
  color: #172033;
}

body.dark-mode .edition-manager-card {
  background: rgba(12,20,36,.96);
  border-color: rgba(148,163,184,.22);
  color: #f8fafc;
}

.edition-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148,163,184,.16);
}

.edition-manager-kicker {
  display: block;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  color: #818cf8;
}

.edition-manager-head h3 {
  margin: 3px 0 0;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 850;
}

.edition-manager-head p {
  margin: 5px 0 0;
  font-size: 11px;
  color: #7b879c;
  line-height: 1.35;
}

.edition-manager-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 11px;
  border: 1px solid rgba(148,163,184,.20);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.26);
}

.edition-manager-editor {
  padding: 15px 0;
}

.edition-manager-editor label {
  font-size: 11px;
  font-weight: 750;
  color: #667085;
}

.edition-manager-input-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  margin-top: 6px;
}

.edition-manager-input-row input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 12px;
  background: rgba(255,255,255,.48);
  font-size: 13px;
  outline: none;
}

.edition-manager-input-row input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}

body.dark-mode .edition-manager-input-row input {
  background: rgba(15,23,42,.50);
  color: #f8fafc;
  border-color: rgba(148,163,184,.22);
}

#edition-manager-save {
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg,#6366f1,#7c3aed);
  color: white;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

#edition-manager-save:disabled {
  opacity: .55;
  cursor: wait;
}

.edition-manager-status {
  min-height: 16px;
  margin: 6px 2px 0;
  font-size: 10.5px;
  color: var(--ui-legacy-secondary);
}

.edition-manager-status.error {
  color: #e11d48;
}

.edition-manager-status.success {
  color: #059669;
}

.edition-manager-section {
  border-top: 1px solid rgba(148,163,184,.14);
  padding-top: 13px;
}

.edition-manager-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.edition-manager-section-head strong {
  font-size: 12px;
}

.edition-manager-section-head span {
  min-width: 25px;
  height: 25px;
  border-radius: 999px;
  background: rgba(99,102,241,.10);
  color: #655bd4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

.edition-manager-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.edition-manager-empty {
  padding: 18px 12px;
  text-align: center;
  border: 1px dashed rgba(148,163,184,.24);
  border-radius: 13px;
  color: #8894a8;
  font-size: 11px;
}

.edition-manager-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 13px;
  background: rgba(255,255,255,.26);
}

body.dark-mode .edition-manager-item {
  background: rgba(255,255,255,.035);
}

.edition-manager-item-copy {
  min-width: 0;
}

.edition-manager-item-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}

.edition-manager-item-copy small {
  display: block;
  margin-top: 3px;
  color: #8a96aa;
  font-size: 9.5px;
}

.edition-manager-item-actions {
  display: flex;
  gap: 5px;
}

.edition-manager-item-actions button {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  border: 1px solid rgba(148,163,184,.20);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.24);
  font-size: 10px;
  color: #64748b;
}

.edition-manager-defaults {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.14);
  font-size: 9.5px;
  color: #7b879c;
}

.edition-manager-defaults>span:not(:first-child) {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(148,163,184,.09);
}

@media (max-width:640px){
  .edition-picker-row {
    grid-template-columns: minmax(0,1fr) 38px 38px;
  }
  .edition-picker-action {
    height: 40px;
  }
  .edition-manager-modal {
    padding: 10px;
    align-items: flex-end;
  }
  .edition-manager-card {
    width: 100%;
    max-height: 86vh;
    border-radius: 22px 22px 16px 16px;
    padding: 15px;
  }
  .edition-manager-head h3 {
    font-size: 18px;
  }
  .edition-manager-input-row {
    grid-template-columns: minmax(0,1fr) auto;
  }
  #edition-manager-save span {
    display: none;
  }
  #edition-manager-save {
    width: 42px;
    padding: 0;
    justify-content: center;
  }
}

#edition-manager-modal.edition-manager-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}

#edition-manager-modal .edition-manager-backdrop {
  z-index: 0 !important;
  pointer-events: auto !important;
}

#edition-manager-modal .edition-manager-card {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

.edition-manager-item-actions {
  align-items: center !important;
}

.edition-manager-item-actions .edition-delete {
  width: auto !important;
  min-width: 58px !important;
  padding: 0 9px !important;
  gap: 5px !important;
  color: #e0526f !important;
  border-color: rgba(244,63,94,.22) !important;
  background: rgba(244,63,94,.06) !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

.edition-manager-item-actions .edition-delete span {
  display: inline !important;
  font-size: 10px !important;
}

.edition-manager-item-actions .edition-delete:not(:disabled):hover {
  background: rgba(244,63,94,.12) !important;
  border-color: rgba(244,63,94,.34) !important;
}

.edition-manager-item-actions .edition-delete.is-disabled,
.edition-manager-item-actions .edition-delete:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
  color: #94a3b8 !important;
  border-color: rgba(148,163,184,.16) !important;
  background: rgba(148,163,184,.05) !important;
}

@media (max-width:640px){
  #edition-manager-modal.edition-manager-modal {
    z-index: 2147483646 !important;
  }
  .edition-manager-item {
    grid-template-columns: minmax(0,1fr) auto !important;
  }
  .edition-manager-item-actions .edition-delete {
    min-width: 54px !important;
    padding: 0 7px !important;
  }
}

#edition-manager-modal .edition-manager-section-head strong {
  font-size: 13px !important;
}

#edition-manager-modal .edition-manager-help-note {
  display: block !important;
  margin-top: 13px !important;
  padding-top: 11px !important;
  border-top: 1px solid rgba(148,163,184,.14) !important;
  color: #7f8ba0 !important;
  font-size: 9.5px !important;
  line-height: 1.4 !important;
}

#edition-manager-modal .edition-manager-help-note span {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#edition-manager-modal .edition-manager-help-note i {
  margin-top: 2px !important;
  color: #818cf8 !important;
}

#edition-manager-modal .edition-manager-item {
  grid-template-columns: minmax(0,1fr) auto !important;
}

#edition-manager-modal .edition-manager-item-copy strong {
  font-size: 13px !important;
}

#edition-manager-modal .edition-manager-origin {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 6px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: rgba(99,102,241,.08) !important;
  color: #7c83d9 !important;
  font-size: 7.5px !important;
  font-weight: 750 !important;
  vertical-align: middle !important;
}

#edition-manager-modal .edition-manager-item-actions button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 3 !important;
}

#edition-manager-modal .edition-manager-item-actions .edition-edit {
  color: #64748b !important;
}

#edition-manager-modal .edition-manager-item-actions .edition-edit:hover {
  color: #4f46e5 !important;
  border-color: rgba(99,102,241,.28) !important;
  background: rgba(99,102,241,.08) !important;
}

#edition-manager-modal .edition-manager-item-actions .edition-delete:not(:disabled) {
  pointer-events: auto !important;
}

#edition-manager-modal .edition-manager-item-actions .edition-delete:disabled {
  pointer-events: none !important;
}

body.dark-mode #edition-manager-modal .edition-manager-origin {
  background: rgba(129,140,248,.10) !important;
  color: #a5b4fc !important;
}

#selling-view .selling-grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

#selling-view .selling-pagination {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  padding: 18px 8px 4px !important;
}

#selling-view .selling-pagination.hidden {
  display: none !important;
}

#selling-view .selling-page-btn {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.34) !important;
  color: var(--ui-text,#334155) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transition: .16s ease !important;
}

#selling-view .selling-page-btn.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg,#6366f1,#7c3aed) !important;
  box-shadow: 0 7px 18px rgba(99,102,241,.25) !important;
}

#selling-view .selling-page-btn:not(:disabled):hover {
  transform: translateY(-1px) !important;
}

#selling-view .selling-page-btn:disabled {
  opacity: .36 !important;
  cursor: not-allowed !important;
}

#selling-view .selling-page-ellipsis {
  min-width: 18px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
}

#selling-view .selling-page-jump {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 5px !important;
  padding: 4px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.26) !important;
}

#selling-view .selling-page-jump input {
  width: 52px !important;
  height: 28px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.46) !important;
  color: inherit !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#selling-view .selling-page-jump span {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

#selling-view .selling-page-jump button {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: inherit !important;
}

body.dark-mode #selling-view .selling-page-btn,
body.dark-mode #selling-view .selling-page-jump {
  background: rgba(15,23,42,.56) !important;
  border-color: rgba(148,163,184,.18) !important;
  color: #e2e8f0 !important;
}

body.dark-mode #selling-view .selling-page-btn.active {
  background: linear-gradient(135deg,#6366f1,#7c3aed) !important;
}

body.dark-mode #selling-view .selling-page-jump input {
  background: rgba(30,41,59,.72) !important;
  color: #f8fafc !important;
}

@media (min-width:900px){
  /* 6/12 cột nên card gọn hơn để vẫn cân đối. */
  #selling-view .selling-card {
    padding: 8px !important;
    border-radius: 14px !important;
  }
  #selling-view .selling-card-cover {
    border-radius: 10px !important;
  }
}

@media (min-width:1700px){
  #selling-view .selling-card {
    padding: 6px !important;
    border-radius: 12px !important;
  }
  #selling-view .selling-card-cover {
    border-radius: 9px !important;
  }
  #selling-view .selling-card-title {
    margin-top: 6px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  #selling-view .selling-card-sub {
    font-size: 8.5px !important;
  }
  #selling-view .selling-card-sale {
    font-size: 11px !important;
  }
  #selling-view .selling-card-original {
    font-size: 8.5px !important;
  }
}

@media (max-width:640px){
  #selling-view .selling-pagination {
    gap: 5px !important;
    padding-top: 14px !important;
  }
  #selling-view .selling-page-btn {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
  }
  #selling-view .selling-page-jump {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
  }
}

/* 1 khung duy nhất -> padding -> tiêu đề/mô tả -> grid card */

#goods-view .goods-summary-cards {
  margin-bottom: 18px !important;
}

#goods-view .goods-category-section {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  margin: 18px 0 0 0 !important;
  padding: 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 18px !important;
  outline: none !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 8px 22px rgba(51,65,85,.05) !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
}

/* Heading + grid không có khung riêng. */

#goods-view .goods-category-heading,
#goods-view .goods-category-heading-copy,
#goods-view #goods-category-tabs {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#goods-view .goods-category-heading {
  display: block !important;
  margin: 0 0 14px !important;
}

#goods-view .goods-category-heading-copy {
  margin: 0 !important;
}

#goods-view .goods-category-heading h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.25 !important;
}

#goods-view .goods-category-heading p {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.35 !important;
}

#goods-view #goods-category-tabs {
  margin: 0 !important;
}

#goods-view .goods-category-section::before,
#goods-view .goods-category-section::after,
#goods-view .goods-category-heading::before,
#goods-view .goods-category-heading::after,
#goods-view .goods-category-heading-copy::before,
#goods-view .goods-category-heading-copy::after,
#goods-view #goods-category-tabs::before,
#goods-view #goods-category-tabs::after {
  content: none !important;
  display: none !important;
}

body.dark-mode #goods-view .goods-category-section {
  background: rgba(15,23,42,.38) !important;
  border-color: rgba(148,163,184,.22) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.12) !important;
}

@media (max-width:640px){
  #goods-view .goods-category-section {
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }
  #goods-view .goods-category-heading {
    margin-bottom: 12px !important;
  }
}

@media (max-width:760px) and (orientation:portrait){
  /* Header chung: text co được, action luôn nằm gọn bên phải. */
  .popup-unified-head {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: start !important;
    column-gap: 12px !important;
  }
  .popup-unified-head > :first-child {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }
  /* Không còn ép 3 nút vào 112px. */
  #vol-detail-modal .entity-popup-actions,
#goods-detail-modal .entity-popup-actions {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    justify-self: end !important;
  }
  /* Tất cả nút icon header cùng kích thước. */
  #vol-detail-modal .entity-popup-actions > button {
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    touch-action: manipulation !important;
  }
  #vol-detail-modal .entity-popup-actions > button i {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  /* Popup chi tiết Tập: chừa mép thực ở cả hai bên header. */
  #vol-detail-modal {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #vol-detail-modal > div:first-child {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 560px !important;
    padding: 18px 18px 20px !important;
    overflow-x: hidden !important;
  }
  #vol-detail-modal .popup-unified-head {
    margin: 0 !important;
    padding: 0 0 14px !important;
  }
  /* Sửa Tập: cùng cách đặt title/action, không sát mép. */


  /* Sửa Phụ kiện + Sửa Truyện: thống nhất khoảng cách header. */
  
  /* Popup quản lý phiên bản: nút X cùng nhịp với popup khác. */
  #edition-manager-modal .edition-manager-head.popup-unified-head {
    gap: 12px !important;
  }
  #edition-manager-modal .edition-manager-close {
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 13px !important;
    align-self: start !important;
  }
  /* Popup phụ kiện chi tiết vốn chuyển Sửa/Xóa xuống footer trên mobile;
     giữ hành vi đó, chỉ đảm bảo header không tràn ngang. */
  #goods-detail-modal .popup-unified-head {
    min-width: 0 !important;
    overflow: visible !important;
  }
  /* Các close icon popup phụ khác cũng giữ khoảng cách an toàn. */
  .variant-mini-close,
  .global-search-close {
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    border-radius: 13px !important;
  }
}

@media (max-width:640px){
  #selling-view #selling-pagination.selling-pagination {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 14px 2px 5px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #selling-view #selling-pagination.selling-pagination::-webkit-scrollbar {
    display: none !important;
  }
  #selling-view #selling-pagination .selling-page-btn {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
  #selling-view #selling-pagination .selling-page-ellipsis {
    flex: 0 0 12px !important;
    width: 12px !important;
    min-width: 12px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  #selling-view #selling-pagination .selling-page-jump {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 0 2px !important;
    padding: 2px 4px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
  }
  #selling-view #selling-pagination .selling-page-jump input {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
  #selling-view #selling-pagination .selling-page-jump span {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  #selling-view #selling-pagination .selling-page-jump button {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== 1) Thanh thao tác gọn khi cuộn sâu trong trang chi tiết ===== */

#mobile-detail-dock {
  display: none;
}

@media (max-width:640px){
  #mobile-detail-dock {
    /* chừa nút giao diện cố định đang có ở góc phải */
    z-index: 48;
    min-height: 54px;
    padding: 5px;
    border-radius: 17px;
    -webkit-backdrop-filter: blur(22px) saturate(1.24);
    backdrop-filter: blur(22px) saturate(1.24);
    align-items: stretch;
    gap: 3px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.985);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  #mobile-detail-dock.is-visible {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  #mobile-detail-dock .mobile-detail-dock-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 5px 3px;
    border: 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font: inherit;
    font-size: 9px;
    line-height: 1.05;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }
  #mobile-detail-dock .mobile-detail-dock-btn i {
    font-size: 14px;
    line-height: 1;
  }
  #mobile-detail-dock .mobile-detail-dock-btn:active {
    transform: scale(.95);
  }
  #mobile-detail-dock .mobile-detail-dock-btn[data-action="goods"].is-active {
    color: #d97706;
    background: rgba(245,158,11,.12);
  }
  #mobile-detail-dock .mobile-detail-dock-btn[hidden] {
    display: none !important;
  }
  body.dark-mode #mobile-detail-dock .mobile-detail-dock-btn {
    color: #a8b3c7;
  }
  body.dark-mode #mobile-detail-dock .mobile-detail-dock-btn.is-active {
    color: #c7d2fe;
    background: rgba(99,102,241,.20);
  }
  body.dark-mode #mobile-detail-dock .mobile-detail-dock-btn[data-action="goods"].is-active {
    color: #fbbf24;
    background: rgba(245,158,11,.16);
  }
}

.volume-hover-target {
  position: relative;
  isolation: isolate;
}

.volume-hover-target .volume-inline-preview {
  position: absolute;
  z-index: 18;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.975) translateY(3px);
  transition: opacity .30s cubic-bezier(.22,.61,.36,1),
      transform .34s cubic-bezier(.22,.61,.36,1),
      visibility .30s ease;
  will-change: opacity, transform;
}

.volume-hover-target.is-preview-visible .volume-inline-preview {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

.volume-hover-target .volume-inline-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(15,23,42,.16) 0%, rgba(15,23,42,.24) 42%, rgba(15,23,42,.36) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.10);
  backdrop-filter: blur(10px) saturate(1.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.volume-hover-target .volume-inline-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,0) 45%);
}

.volume-hover-target .volume-inline-preview > * {
  position: relative;
  z-index: 1;
}

.volume-hover-target .vhp-row {
  display: grid;
  grid-template-columns: 15px minmax(0,1fr);
  gap: 6px;
  align-items: center;
  align-content: center;
  color: rgba(241,245,249,.92);
  font-size: 10px;
  line-height: 1.30;
  text-shadow: 0 1px 9px rgba(0,0,0,.34);
  border-top: 1px solid rgba(255,255,255,.10);
}

.volume-hover-target .vhp-row i {
  width: 15px;
  padding-top: 1px;
  text-align: center;
  color: #a5b4fc;
  font-size: 10px;
}

.volume-hover-target .vhp-row strong {
  display: block;
  color: #ffffff;
  font-size: 10px;
  font-weight: 780;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 10px rgba(0,0,0,.38);
}

.volume-hover-target .vhp-goods {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

body.dark-mode .volume-hover-target .volume-inline-preview::before {
  background: linear-gradient(180deg, rgba(2,6,23,.20) 0%, rgba(2,6,23,.30) 42%, rgba(2,6,23,.44) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

@media (hover:none), (pointer:coarse), (max-width:767px){
  #volume-hover-preview {
    display: none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #mobile-detail-dock,
    .volume-inline-preview {
    transition: none !important;
  }
}

@media (max-width:640px){
  @keyframes mobileDockLiquidSweep {
    0% {
      transform: translate3d(-14%, 0, 0) scaleX(.96);
      opacity: .62;
    }
    50% {
      transform: translate3d(10%, -1%, 0) scaleX(1.03);
      opacity: .92;
    }
    100% {
      transform: translate3d(-14%, 0, 0) scaleX(.96);
      opacity: .62;
    }
  }
  @keyframes mobileDockLiquidBlob {
    0% {
      transform: translate3d(-12%, 0, 0) scale(1);
      opacity: .34;
    }
    50% {
      transform: translate3d(14%, -2%, 0) scale(1.08);
      opacity: .56;
    }
    100% {
      transform: translate3d(-12%, 0, 0) scale(1);
      opacity: .34;
    }
  }
  #mobile-detail-dock {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    overflow: hidden;
    isolation: isolate;
    background: rgba(255,255,255,.018) !important;
    border: 1px solid rgba(255,255,255,.23) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.07),
        inset 0 1.2px 0 rgba(255,255,255,.34),
        inset 0 -1px 0 rgba(255,255,255,.07),
        0 0 0 1px rgba(255,255,255,.035) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.55) brightness(1.08) contrast(1.08) !important;
    backdrop-filter: blur(22px) saturate(1.55) brightness(1.08) contrast(1.08) !important;
  }
  #mobile-detail-dock::before {
    content: "";
    position: absolute;
    inset: -18% -8% -10%;
    border-radius: inherit;
    background: radial-gradient(34% 58% at 18% 18%, rgba(255,255,255,.34), rgba(255,255,255,0) 68%),
        radial-gradient(42% 62% at 82% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%),
        linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.03) 28%, rgba(255,255,255,0) 54%),
        linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 44%, rgba(255,255,255,.10) 76%, rgba(255,255,255,.04));
    filter: blur(8px);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .92;
    z-index: 0;
    animation: mobileDockLiquidSweep 7.5s ease-in-out infinite;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #mobile-detail-dock::after {
    content: "";
    position: absolute;
    inset: 12% 10% 30% 10%;
    border-radius: 999px;
    background: radial-gradient(60% 120% at 28% 38%, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
        radial-gradient(45% 100% at 72% 18%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%);
    filter: blur(13px);
    pointer-events: none;
    opacity: .85;
    z-index: 0;
    animation: mobileDockLiquidBlob 8.5s ease-in-out infinite;
    animation-play-state: var(--tt-animation-state,running) !important;
  }
  #mobile-detail-dock .mobile-detail-dock-btn {
    position: relative;
    z-index: 1;
    color: rgba(242,246,255,.96);
    text-shadow: 0 1px 1px rgba(15,23,42,.14);
    background: transparent !important;
    box-shadow: none !important;
  }
  #mobile-detail-dock .mobile-detail-dock-btn.is-active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(255,255,255,.055) !important;
  }
  #mobile-detail-dock .mobile-detail-dock-btn[data-action="goods"].is-active,
    #mobile-detail-dock .mobile-detail-dock-btn[data-action="add"].is-active {
    background: linear-gradient(180deg, rgba(255,255,255,.125), rgba(255,255,255,.04)) !important;
  }
  #mobile-detail-dock .mobile-detail-dock-btn[data-action="add"] {
    background: transparent !important;
    color: rgba(242,246,255,.96) !important;
    box-shadow: none !important;
  }
  body.dark-mode #mobile-detail-dock {
    background: rgba(255,255,255,.014) !important;
    border-color: rgba(255,255,255,.19) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.08),
        inset 0 1.1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(255,255,255,.03) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.42) brightness(1.03) contrast(1.06) !important;
    backdrop-filter: blur(22px) saturate(1.42) brightness(1.03) contrast(1.06) !important;
  }
  body.dark-mode #mobile-detail-dock::before {
    background: radial-gradient(34% 58% at 18% 18%, rgba(255,255,255,.25), rgba(255,255,255,0) 68%),
        radial-gradient(42% 62% at 82% 10%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%),
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.025) 28%, rgba(255,255,255,0) 54%),
        linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.015) 44%, rgba(255,255,255,.075) 76%, rgba(255,255,255,.03));
  }
  body.dark-mode #mobile-detail-dock::after {
    background: radial-gradient(60% 120% at 28% 38%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
        radial-gradient(45% 100% at 72% 18%, rgba(255,255,255,.09), rgba(255,255,255,0) 62%);
  }
}

@media (max-width:640px){
  #mobile-detail-dock {
    left: 50% !important;
    right: auto !important;
    width: var(--mobile-detail-dock-width, 284px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: calc(var(--mobile-detail-dock-width, 284px) / -2) !important;
  }
}

/* Chừa khoảng cuộn cuối trang để dock cố định không che pagination trên điện thoại. */

@media (max-width:640px){
  #tab-content-volumes,
    #tab-content-goods,
    #tab-content-info {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #volumes-pagination,
    #goods-pagination {
    position: relative;
    z-index: 1;
  }
}

/* ===== Ý tưởng 4: chuyển bìa kiểu liquid glass ===== */

#volumes-grid .volume-cover-stack,
#goods-grid .volume-cover-stack {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#volumes-grid .volume-cover-stack.has-multiple::before,
#goods-grid .volume-cover-stack.has-multiple::before {
  content: "";
  position: absolute;
  inset: -10% -35%;
  background: radial-gradient(circle at 20% 25%, rgba(255,255,255,.20), transparent 35%),
      radial-gradient(circle at 74% 68%, rgba(129,140,248,.17), transparent 34%),
      linear-gradient(120deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.18) 28%, rgba(255,255,255,.07) 40%, rgba(255,255,255,0) 56%);
  opacity: .46;
  pointer-events: none;
  transform: translateX(-18%) scale(1.04);
  mix-blend-mode: screen;
  z-index: 1;
}

#volumes-grid .volume-cover-stack.has-multiple::after,
#goods-grid .volume-cover-stack.has-multiple::after {
  content: "";
  position: absolute;
  inset: -14% -50%;
  background: linear-gradient(112deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.48) 40%, rgba(255,255,255,.18) 51%, rgba(255,255,255,.05) 56%, rgba(255,255,255,0) 72%),
      radial-gradient(circle at 55% 48%, rgba(255,255,255,.22), rgba(255,255,255,.06) 24%, transparent 52%);
  opacity: 0;
  pointer-events: none;
  filter: blur(7px);
  z-index: 3;
}

#volumes-grid .volume-cover-stack.has-multiple .volume-auto-cover,
#goods-grid .volume-cover-stack.has-multiple .volume-auto-cover {
  position: relative;
  z-index: 0;
  transform: scale(1.022);
  transform-origin: center center;
  transition: transform .9s cubic-bezier(.2,.7,.15,1), filter .5s ease, opacity .38s ease;
  will-change: transform, opacity, filter;
}

#volumes-grid .volume-cover-stack.is-liquid-switching::after,
#goods-grid .volume-cover-stack.is-liquid-switching::after {
  opacity: 1;
  animation: coverLiquidSweep .86s cubic-bezier(.2,.75,.2,1) forwards;
}

#volumes-grid .volume-cover-stack.is-liquid-switching .volume-auto-cover,
#goods-grid .volume-cover-stack.is-liquid-switching .volume-auto-cover {
  filter: contrast(1.04) saturate(1.05);
}

#volumes-grid .volume-cover-stack .volume-cover-ghost,
#goods-grid .volume-cover-stack .volume-cover-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
  transform: scale(1.082);
  filter: blur(.4px) saturate(1.04);
  opacity: .64;
  animation: coverGhostShift .86s cubic-bezier(.22,.74,.16,1) forwards;
}

#volumes-grid .volume-cover-stack .volume-auto-cover.is-liquid-entering,
#goods-grid .volume-cover-stack .volume-auto-cover.is-liquid-entering {
  animation: coverNewEnter .86s cubic-bezier(.18,.78,.18,1);
}

@keyframes coverLiquidSweep{
  0% {
    transform: translateX(-34%) scale(1.08) rotate(-4deg);
    opacity: 0;
  }
  18% {
    opacity: .92;
  }
  100% {
    transform: translateX(33%) scale(1.02) rotate(2deg);
    opacity: 0;
  }
}

@keyframes coverGhostShift{
  0% {
    transform: translateX(0) scale(1.082);
    opacity: .70;
    filter: blur(.35px) saturate(1.03);
  }
  100% {
    transform: translateX(-10%) scale(1.14);
    opacity: 0;
    filter: blur(2.8px) saturate(1.18);
  }
}

@keyframes coverNewEnter{
  0% {
    transform: scale(.93) translateX(10%);
    filter: blur(3px) saturate(1.16) brightness(1.02);
    opacity: .45;
  }
  38% {
    transform: scale(1.045) translateX(0);
    filter: blur(.7px) saturate(1.11);
    opacity: 1;
  }
  100% {
    transform: scale(1.022) translateX(0);
    filter: none;
    opacity: 1;
  }
}

/* ===== Nút & modal chia sẻ ===== */

.feature-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
}

.feature-modal-overlay[hidden] {
  display: none !important;
}

.feature-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,11,24,.54);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
}

.feature-modal-card {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100vw - 28px));
  max-height: min(90vh, 940px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(16,24,43,.80), rgba(10,16,32,.86));
  box-shadow: 0 28px 90px rgba(2,6,23,.42);
  color: #e5eefc;
  -webkit-backdrop-filter: blur(28px) saturate(1.16);
  backdrop-filter: blur(28px) saturate(1.16);
}

.feature-modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 14% 10%, rgba(255,255,255,.14), transparent 28%),
      radial-gradient(circle at 86% 16%, rgba(129,140,248,.18), transparent 26%),
      radial-gradient(circle at 74% 86%, rgba(45,212,191,.14), transparent 28%);
  pointer-events: none;
}

.feature-modal-card > * {
  position: relative;
  z-index: 1;
}

.feature-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(148,163,184,.14);
}

.feature-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.feature-modal-head h2 {
  margin: 10px 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #f8fafc;
}

.feature-modal-head p {
  margin: 0;
  color: #9fb0ca;
  font-size: 12px;
  line-height: 1.55;
}

.feature-modal-close,
  .feature-tool-btn {
  min-width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.06);
  color: #d8e3f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .18s ease;
}

.feature-modal-close:hover,.feature-tool-btn:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}

.feature-modal-body {
  padding: 18px 22px 22px;
}

.share-card-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 310px;
  gap: 20px;
  align-items: start;
}

.share-card-preview-shell,
  .share-card-actions-panel,
  .year-review-shell,
  .year-review-stat,
  .year-review-panel,
  .year-review-strip,
  .year-review-select {
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.14);
  backdrop-filter: blur(24px) saturate(1.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.share-card-preview-shell {
  padding: 14px;
  border-radius: 24px;
}

.share-card-preview-wrap {
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(4,11,26,.88), rgba(12,19,39,.92));
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#share-card-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
}

.share-card-actions-panel {
  padding: 16px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.share-card-actions-panel h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: #f8fafc;
}

.share-card-actions-panel p {
  margin: 0;
  color: #9fb0ca;
  font-size: 11px;
  line-height: 1.55;
}

.share-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.feature-primary-btn,
  .feature-secondary-btn,
  .feature-ghost-btn {
  min-height: 44px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: .18s ease;
}

.feature-primary-btn {
  border: 1px solid rgba(129,140,248,.36);
  background: linear-gradient(135deg, rgba(129,140,248,.92), rgba(168,85,247,.92));
  color: #fff;
  box-shadow: 0 14px 32px rgba(99,102,241,.24);
}

.feature-secondary-btn {
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
}

.feature-ghost-btn {
  border: 1px dashed rgba(148,163,184,.26);
  background: transparent;
  color: #cbd5e1;
}

.feature-primary-btn:hover,.feature-secondary-btn:hover,.feature-ghost-btn:hover {
  transform: translateY(-1px);
}

.share-card-meta {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.share-card-meta-item {
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(148,163,184,.12);
}

.share-card-meta-item span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8ea2c0;
  font-weight: 700;
  margin-bottom: 5px;
}

.share-card-meta-item strong {
  display: block;
  font-size: 12px;
  color: #f8fafc;
  line-height: 1.45;
}

#share-card-feedback {
  min-height: 16px;
  font-size: 11px;
  color: #7dd3fc;
}

/* ===== Year in Review ===== */

.year-review-shell {
  border-radius: 24px;
  padding: 16px;
  display: grid;
  gap: 16px;
}

.year-review-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.year-review-topbar p {
  margin: 0;
  color: #a8b6cb;
  font-size: 11px;
}

.year-review-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.year-review-select {
  appearance: none;
  min-width: 120px;
  padding: 0 14px;
  height: 42px;
  border-radius: 14px;
  color: #f8fafc;
}

.year-review-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}

.year-review-stat {
  padding: 14px;
  border-radius: 20px;
}

.year-review-stat span {
  display: block;
  color: var(--ui-legacy-caption);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 800;
}

.year-review-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -.03em;
}

.year-review-stat small {
  display: block;
  margin-top: 4px;
  color: #b8c5d9;
  font-size: 11px;
  line-height: 1.45;
}

.year-review-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 14px;
}

.year-review-panel {
  border-radius: 22px;
  padding: 15px;
}

.year-review-panel h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: #f8fafc;
}

.year-review-panel .sub {
  margin-top: 4px;
  color: #91a4bf;
  font-size: 11px;
}

.year-review-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.year-review-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.10);
}

.year-review-rank {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(129,140,248,.16);
  color: #c7d2fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.year-review-item strong {
  display: block;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.45;
}

.year-review-item span {
  display: block;
  margin-top: 2px;
  color: #97a8c1;
  font-size: 10px;
  line-height: 1.45;
}

.year-review-item b {
  color: #7dd3fc;
  font-size: 12px;
}

.year-review-empty {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  color: var(--ui-legacy-caption);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.year-review-strip {
  border-radius: 22px;
  padding: 15px;
}

.year-review-strip-title {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: #f8fafc;
}

.year-review-strip-subtitle {
  margin-top: 4px;
  color: #91a4bf;
  font-size: 11px;
}

.year-review-cover-row {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
}

.year-review-cover {
  aspect-ratio: 2/3;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.14);
}

.year-review-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.year-review-chip-list {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.year-review-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.14);
  color: #dbe7f6;
  font-size: 11px;
  font-weight: 650;
}

.year-review-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 980px){
  .share-card-layout,
    .year-review-grid {
    grid-template-columns: 1fr;
  }
  .year-review-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .feature-modal-card {
    width: min(100vw - 16px, 100%);
    border-radius: 24px;
  }
  .feature-modal-head {
    padding: 16px 16px 14px;
  }
  .feature-modal-head h2 {
    font-size: 20px;
  }
  .feature-modal-body {
    padding: 14px 16px 16px;
  }
  .year-review-stats {
    grid-template-columns: 1fr;
  }
  .year-review-cover-row {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

#open-year-review-btn.year-review-tool {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#open-year-review-btn.year-review-tool::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at 26% 22%, rgba(255,255,255,.78), transparent 34%),
      radial-gradient(circle at 74% 75%, rgba(255,255,255,.22), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  opacity: .92;
  pointer-events: none;
}

body.dark-mode #open-year-review-btn.year-review-tool {
  border-color: rgba(129,140,248,.28);
  background: linear-gradient(145deg, rgba(129,140,248,.18), rgba(255,255,255,.06));
  box-shadow: 0 12px 28px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.14);
}

body:not(.dark-mode) #open-year-review-btn.year-review-tool {
  border-color: rgba(148,163,184,.28);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(241,245,249,.78));
  box-shadow: 0 12px 28px rgba(148,163,184,.18), inset 0 1px 0 rgba(255,255,255,.95);
}

.year-review-logo {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.year-review-logo-core {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(99,102,241,.34));
  animation: yearReviewFloat 3.6s ease-in-out infinite;
  animation-play-state: var(--tt-animation-state,running) !important;
}

.year-review-logo-core svg {
  width: 100%;
  height: 100%;
  display: block;
}

.year-review-spark {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  animation: yearReviewSparkle 2.6s ease-in-out infinite;
  opacity: .84;
  animation-play-state: var(--tt-animation-state,running) !important;
}

.year-review-spark-a {
  width: 5px;
  height: 5px;
  right: -1px;
  top: 1px;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(253,224,71,.95) 42%, rgba(253,224,71,0) 72%);
  animation-delay: -.4s;
}

.year-review-spark-b {
  width: 4px;
  height: 4px;
  left: -1px;
  bottom: 2px;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(125,211,252,.95) 42%, rgba(125,211,252,0) 72%);
  animation-delay: -1.2s;
}

@keyframes yearReviewFloat{
  0%,100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.04);
  }
}

@keyframes yearReviewSparkle{
  0%,100% {
    transform: scale(.6);
    opacity: .30;
  }
  40% {
    transform: scale(1.18);
    opacity: 1;
  }
  70% {
    transform: scale(.85);
    opacity: .56;
  }
}

body:not(.dark-mode) .feature-modal-backdrop {
  background: rgba(241,245,249,.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

body:not(.dark-mode) .feature-modal-card {
  border-color: rgba(148,163,184,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,250,252,.88));
  color: #0f172a;
  box-shadow: 0 28px 90px rgba(148,163,184,.20);
}

body:not(.dark-mode) .feature-modal-card::before {
  background: radial-gradient(circle at 14% 10%, rgba(255,255,255,.78), transparent 28%),
      radial-gradient(circle at 84% 16%, rgba(129,140,248,.14), transparent 26%),
      radial-gradient(circle at 74% 86%, rgba(45,212,191,.12), transparent 28%);
}

body:not(.dark-mode) .feature-modal-head {
  border-bottom-color: rgba(148,163,184,.18);
}

body:not(.dark-mode) .feature-modal-kicker {
  background: rgba(99,102,241,.08);
  color: #5b6b83;
}

body:not(.dark-mode) .feature-modal-head h2,
  body:not(.dark-mode) .share-card-actions-panel h3,
  body:not(.dark-mode) .year-review-panel h3,
  body:not(.dark-mode) .year-review-strip h3,
  body:not(.dark-mode) .share-card-meta-item strong,
  body:not(.dark-mode) .year-review-stat strong,
  body:not(.dark-mode) .year-review-item strong,
  body:not(.dark-mode) .year-review-select {
  color: #0f172a;
}

body:not(.dark-mode) .feature-modal-head p,
  body:not(.dark-mode) .share-card-actions-panel p,
  body:not(.dark-mode) .year-review-topbar p,
  body:not(.dark-mode) .year-review-panel .sub,
  body:not(.dark-mode) .share-card-meta-item span,
  body:not(.dark-mode) .year-review-stat small,
  body:not(.dark-mode) .year-review-item span,
  body:not(.dark-mode) .year-review-empty,
  body:not(.dark-mode) .year-review-stat span {
  color: #5f7089;
}

body:not(.dark-mode) .share-card-preview-shell,
  body:not(.dark-mode) .share-card-actions-panel,
  body:not(.dark-mode) .year-review-shell,
  body:not(.dark-mode) .year-review-stat,
  body:not(.dark-mode) .year-review-panel,
  body:not(.dark-mode) .year-review-strip,
  body:not(.dark-mode) .year-review-select {
  border-color: rgba(148,163,184,.20);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.02);
  backdrop-filter: blur(22px) saturate(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

body:not(.dark-mode) .share-card-preview-wrap {
  background: linear-gradient(180deg, rgba(241,245,249,.95), rgba(226,232,240,.92));
}

body:not(.dark-mode) .feature-secondary-btn {
  border-color: rgba(148,163,184,.24);
  background: rgba(255,255,255,.72);
  color: #334155;
}

body:not(.dark-mode) .feature-ghost-btn {
  border-color: rgba(148,163,184,.26);
  color: #475569;
}

body:not(.dark-mode) .feature-modal-close,
  body:not(.dark-mode) .feature-tool-btn {
  border-color: rgba(148,163,184,.20);
  background: rgba(255,255,255,.64);
  color: #334155;
}

body:not(.dark-mode) .share-card-meta-item,
  body:not(.dark-mode) .year-review-item,
  body:not(.dark-mode) .year-review-empty,
  body:not(.dark-mode) .year-review-chip,
  body:not(.dark-mode) .year-review-cover {
  border-color: rgba(148,163,184,.18);
  background: rgba(255,255,255,.56);
}

body:not(.dark-mode) .year-review-rank {
  background: rgba(99,102,241,.12);
  color: #6366f1;
}

body:not(.dark-mode) .year-review-item b,
  body:not(.dark-mode) #share-card-feedback {
  color: #2563eb;
}

body:not(.dark-mode) .year-review-chip {
  color: #334155;
}

body:not(.dark-mode) #year-review-modal .year-review-strip h3,
  body:not(.dark-mode) #year-review-modal .year-review-panel h3,
  body:not(.dark-mode) #year-review-modal .year-review-stat strong,
  body:not(.dark-mode) #year-review-modal .year-review-item strong,
  body:not(.dark-mode) #share-card-modal .share-card-actions-panel h3,
  body:not(.dark-mode) #share-card-modal .share-card-meta-item strong {
  color: #172033 !important;
}

body:not(.dark-mode) #year-review-modal .year-review-strip .sub,
  body:not(.dark-mode) #year-review-modal .year-review-panel .sub {
  color: #64748b !important;
}

body:not(.dark-mode) #year-review-modal .year-review-select option {
  color: #0f172a;
  background: #ffffff;
}

body.dark-mode #year-review-modal .year-review-select option {
  color: #f8fafc;
  background: #0f172a;
}

.volume-hover-target .volume-inline-preview {
  inset: auto 0 0 0 !important;
  top: auto !important;
  bottom: 0 !important;
  min-height: 0 !important;
  max-height: calc(100% - 8px) !important;
  justify-content: flex-start !important;
  padding: 12px 11px 12px !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.volume-hover-target .vhp-row {
  flex: 0 0 auto !important;
  min-height: auto !important;
  padding: 5px 0 0 !important;
}

.volume-hover-target .vhp-row > div {
  min-width: 0 !important;
}

.volume-hover-target .vhp-row strong {
  margin-top: 2px !important;
  line-height: 1.25 !important;
}

.volume-hover-target .vhp-goods {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
}

@media (hover:none), (pointer:coarse), (max-width:767px){
  .volume-hover-target .volume-inline-preview {
    max-height: calc(100% - 8px) !important;
    padding: 11px 10px 12px !important;
    gap: 5px !important;
  }
}

/* 1) Chặn hiện tượng bẻ chữ xấu trong dropdown / control / chip / tab */

.pretty-select-trigger, .pretty-select-label, #pretty-select-portal .pretty-select-option, #pretty-select-portal .pretty-select-option-text, .volume-mode-option, .volume-mode-option-copy strong, .volume-mode-option-copy small, .goods-volume-option, .goods-volume-option-text, .release-period-filter .pretty-select-trigger, .release-period-filter .pretty-select-option-text, .mobile-detail-dock button, .mobile-detail-dock .dock-item, .card-overlay-line strong, .card-overlay-line span, .vhp-row strong, .vhp-row span, .vhp-title, .volume-inline-preview, .volume-inline-preview *, #data-health-view select, #data-health-view option {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* 2) Các title / text dài vẫn được xuống hàng, nhưng chỉ xuống theo cụm từ chứ không chẻ chữ */

.manga-title, .manga-card-title, .detail-title, #detail-title, .share-card-title, .selling-card-title, .data-health-item-title, .book-vault-item-title, .volume-modal-title, .selling-hero-title, .share-card-hero-title {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* 3) Portal dropdown đủ rộng để các lựa chọn như Seal / Reseal / Unseal không bị bẻ dòng */

#pretty-select-portal {
  overflow-x: visible !important;
}

#pretty-select-portal[data-select-id="vol_seal_status_inline"],
  #pretty-select-portal[data-select-id="vol_seal_status"] {
  min-width: 132px !important;
}

#pretty-select-portal[data-select-id="vol_edition"] {
  min-width: 148px !important;
}

#pretty-select-portal[data-select-id="release-month-select"],
  #pretty-select-portal[data-select-id="release-year-select"],
  #pretty-select-portal[data-select-id="vol_seal_status_inline"],
  #pretty-select-portal[data-select-id="vol_seal_status"],
  #pretty-select-portal[data-select-id="vol_edition"] {
  width: max-content !important;
  max-width: min(92vw, 320px) !important;
}

/* 4) Sweep toàn bộ select native / custom để menu không tự chẻ chữ */

option,
  select,
  .pretty-select-option-text,
  .pretty-select-trigger .pretty-select-label {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}


/* 6) Overlay thông tin trên bìa: cho panel tự ôm nội dung và không bẻ chữ kỳ cục */

.volume-hover-target .volume-inline-preview {
  height: auto !important;
}

.volume-hover-target .vhp-row,
  .volume-hover-target .vhp-row strong,
  .volume-hover-target .vhp-goods {
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* 7) Một số khối số liệu / card thông tin: giữ dòng gọn, không xé chữ */

.selling-price-box *,
  .share-card-stats *,
  .selling-card-stats *,
  .volume-detail-meta *,
  .goods-inline-name,
  .release-card-price,
  .release-card-edition {
  word-break: keep-all !important;
  hyphens: none !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  box-shadow: 0 4px 12px rgba(2,6,23,.16),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
  transition: transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease,
    border-color .16s ease !important;
  cursor: default !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon i {
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Đã mua — xanh ngọc nhẹ */

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-owned {
  border-color: rgba(52,211,153,.28) !important;
  background: linear-gradient(145deg,rgba(52,211,153,.18),rgba(16,185,129,.08)) !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.10),
    inset 0 1px 0 rgba(255,255,255,.19) !important;
}

/* Chưa mua — cam hổ phách nhẹ */

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-missing {
  border-color: rgba(251,191,36,.30) !important;
  background: linear-gradient(145deg,rgba(251,191,36,.18),rgba(245,158,11,.08)) !important;
  box-shadow: 0 4px 12px rgba(245,158,11,.10),
    inset 0 1px 0 rgba(255,255,255,.19) !important;
}

/* Chưa phát hành — xanh lam để tách khỏi Chưa mua. */
#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-unreleased {
  color: #0284c7 !important;
  border-color: rgba(56,189,248,.30) !important;
  background: linear-gradient(145deg,rgba(56,189,248,.18),rgba(14,165,233,.08)) !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.10),
    inset 0 1px 0 rgba(255,255,255,.19) !important;
}

/* Hover sáng nhẹ đúng kiểu liquid glass */

@media (hover:hover) and (pointer:fine){
  #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon:hover {
    transform: translateY(-1px) scale(1.05) !important;
    filter: brightness(1.16) saturate(1.10) !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-owned:hover {
    border-color: rgba(52,211,153,.46) !important;
    box-shadow: 0 6px 16px rgba(16,185,129,.18),
      0 0 0 3px rgba(52,211,153,.07),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-missing:hover {
    border-color: rgba(251,191,36,.48) !important;
    box-shadow: 0 6px 16px rgba(245,158,11,.18),
      0 0 0 3px rgba(251,191,36,.07),
      inset 0 1px 0 rgba(255,255,255,.24) !important;
  }
}

/* Dark mode vẫn giữ độ dịu, không chói. */

body.dark-mode #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-owned {
  color: #5eead4 !important;
  background: linear-gradient(145deg,rgba(20,184,166,.18),rgba(6,78,59,.16)) !important;
  border-color: rgba(94,234,212,.24) !important;
}

body.dark-mode #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-missing {
  color: #fcd34d !important;
  background: linear-gradient(145deg,rgba(245,158,11,.18),rgba(120,53,15,.16)) !important;
  border-color: rgba(252,211,77,.25) !important;
}

body.dark-mode #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-unreleased {
  color: #7dd3fc !important;
  background: linear-gradient(145deg,rgba(14,165,233,.20),rgba(7,89,133,.18)) !important;
  border-color: rgba(125,211,252,.28) !important;
}

/* Cửa sổ rất rộng: icon gọn thêm chút để card 12 cột vẫn thoáng. */

@media (min-width:1800px){
  #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon {
    flex-basis: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon i {
    font-size: 8px !important;
  }
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-sold,
#volume-variant-mini-modal .variant-mini-pill.is-sold,
#release-view .release-ownership-badge.release-sold-badge {
  background: #eee7f8!important;
  border-color: #c5b2df!important;
  color: #55367b!important;
}

body.dark-mode #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-sold,
body.dark-mode #volume-variant-mini-modal .variant-mini-pill.is-sold,
body.dark-mode #release-view .release-ownership-badge.release-sold-badge {
  background: #483660!important;
  border-color: #8d72b2!important;
  color: #f5efff!important;
}

#volume-variant-mini-modal .variant-mini-pill.is-unreleased {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #075985 !important;
}

body.dark-mode #volume-variant-mini-modal .variant-mini-pill.is-unreleased {
  background: #0c4a6e !important;
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
}

#detail-view #volumes-grid .volume-cover-not-owned.is-unreleased {
  color: #fff !important;
  background: #0284c7 !important;
  border: 1px solid #7dd3fc !important;
  opacity: 1 !important;
}

#shelf-view .manga-selling-badge.is-sold,
#detail-view #volumes-grid .volume-cover-not-owned.is-sold {
  color: #fff!important;
  background: #63488a!important;
  border: 1px solid #bca7d7!important;
  opacity: 1!important;
  font-weight: 800!important;
  text-shadow: none!important;
  box-shadow: 0 2px 7px rgba(24,13,42,.25)!important;
}

body.dark-mode #shelf-view .manga-selling-badge.is-sold,
body.dark-mode #detail-view #volumes-grid .volume-cover-not-owned.is-sold {
  color: #fff!important;
  background: #584077!important;
  border-color: #a58cc8!important;
}

#detail-view #volumes-grid .volume-cover-not-owned.is-sold {
  font-size: 10px!important;
  line-height: 1.2!important;
  padding: 4px 7px!important;
  white-space: nowrap!important;
}

#shelf-view .manga-selling-badge.is-sold {
  letter-spacing: .035em!important;
}

@keyframes shelfSellingSoftPulse {
  0%,100% {
    box-shadow: 0 0 0 1px rgba(251,113,133,.20), 0 16px 34px rgba(244,63,94,.14), 0 0 22px rgba(251,113,133,.10);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(251,113,133,.28), 0 18px 40px rgba(244,63,94,.18), 0 0 30px rgba(251,113,133,.14);
  }
}

@keyframes shelfSellingBadgeShimmer {
  0% {
    transform: translateX(-120%) skewX(-18deg);
    opacity: 0;
  }
  18% {
    opacity: .78;
  }
  42%,100% {
    transform: translateX(210%) skewX(-18deg);
    opacity: 0;
  }
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  border-color: rgba(251,113,133,.52) !important;
  background: radial-gradient(circle at top right, rgba(251,113,133,.10), transparent 28%),
    radial-gradient(circle at bottom left, rgba(245,158,11,.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,252,.98)) !important;
  box-shadow: 0 0 0 1px rgba(251,113,133,.20),
    0 16px 34px rgba(244,63,94,.14),
    0 0 22px rgba(251,113,133,.10) !important;
  animation: shelfSellingSoftPulse 3.4s ease-in-out infinite;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,0) 32%, rgba(251,113,133,.12) 62%, rgba(245,158,11,.10));
  opacity: .75;
  z-index: 0;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  opacity: .95;
  z-index: 0;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling > * {
  position: relative;
  z-index: 1;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling:hover {
  transform: translateY(-8px) scale(1.012) !important;
  border-color: rgba(251,113,133,.62) !important;
  box-shadow: 0 0 0 1px rgba(251,113,133,.30),
    0 22px 48px rgba(244,63,94,.20),
    0 0 36px rgba(251,113,133,.18) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap {
  border: 1px solid rgba(251,113,133,.32) !important;
  box-shadow: 0 12px 22px rgba(15,23,42,.08),
    0 0 0 3px rgba(255,255,255,.16),
    0 0 0 1px rgba(251,113,133,.16) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-title {
  color: #7f1d1d !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-rating-chip,
#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-volume-chip {
  border-color: rgba(251,113,133,.18) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-price-panel {
  border: 1px solid rgba(251,113,133,.30) !important;
  background: radial-gradient(circle at top left, rgba(255,255,255,.26), transparent 42%),
    linear-gradient(135deg, rgba(255,246,248,.98), rgba(255,232,240,.94) 58%, rgba(255,244,232,.90)) !important;
  box-shadow: 0 10px 20px rgba(244,63,94,.12),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-sale-price {
  color: #e11d48 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-price {
  color: #9f1239 !important;
  opacity: .78 !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
  z-index: 12 !important;
  backdrop-filter: blur(14px) saturate(138%);
  -webkit-backdrop-filter: blur(14px) saturate(138%);
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.10) 24%, rgba(255,255,255,.60) 33%, rgba(255,255,255,.08) 44%, transparent 54%);
  animation: shelfSellingBadgeShimmer 3.8s ease-in-out infinite;
  pointer-events: none;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-list-cover .manga-selling-badge:not(.is-sold) {
  min-height: 24px !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling {
  border-color: rgba(251,113,133,.40) !important;
  background: radial-gradient(circle at top right, rgba(251,113,133,.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(245,158,11,.10), transparent 32%),
    linear-gradient(180deg, rgba(17,24,39,.92), rgba(26,25,40,.92)) !important;
  box-shadow: 0 0 0 1px rgba(251,113,133,.14),
    0 18px 40px rgba(0,0,0,.28),
    0 0 28px rgba(251,113,133,.14) !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap {
  border-color: rgba(251,113,133,.24) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.24),
    0 0 0 1px rgba(251,113,133,.14),
    0 0 0 3px rgba(255,255,255,.03) !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-title {
  color: #fff1f2 !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-rating-chip,
body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-volume-chip {
  border-color: rgba(251,113,133,.14) !important;
  background: rgba(30,41,59,.62) !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-price-panel {
  border-color: rgba(251,113,133,.28) !important;
  background: radial-gradient(circle at top left, rgba(255,255,255,.10), transparent 42%),
    linear-gradient(135deg, rgba(79,18,43,.56), rgba(59,18,26,.42) 60%, rgba(92,39,12,.28)) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.26),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-sale-price {
  color: #fb7185 !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-price {
  color: #fecdd3 !important;
  opacity: .76 !important;
}

@media (max-width: 640px){
  #shelf-view #manga-grid > .manga-shelf-card.is-selling:hover {
    transform: translateY(-4px) scale(1.008) !important;
  }
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
    min-height: 26px !important;
  }
}

/* ---------- TỦ TRUYỆN: bộ đã bán ---------- */

#shelf-view #manga-grid > .manga-shelf-card.is-sold .manga-card-cover-wrap > img {
  filter: brightness(.60) saturate(.78) !important;
  opacity: .92 !important;
  transition: transform .4s ease, filter .22s ease, opacity .22s ease !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-sold .manga-card-info,
#shelf-view #manga-grid > .manga-shelf-card.is-sold .manga-card-list-info {
  opacity: .72 !important;
  transition: opacity .22s ease !important;
}

/* Tag ĐÃ BÁN vẫn phải nổi rõ */

#shelf-view #manga-grid > .manga-shelf-card.is-sold .manga-selling-badge.is-sold {
  opacity: 1 !important;
  filter: none !important;
}

/* Hover chỉ sáng lên nhẹ, vẫn giữ cảm giác "đã bán" */

#shelf-view #manga-grid > .manga-shelf-card.is-sold:hover .manga-card-cover-wrap > img {
  filter: brightness(.64) saturate(.80) !important;
  opacity: .94 !important;
}

/* ---------- TẬP TRUYỆN: grid view ---------- */

#detail-view #volumes-grid .volume-grid-card.is-sold .volume-cover-stack img,
#detail-view #volumes-grid .volume-grid-card.is-sold > div:first-child > img {
  filter: brightness(.60) saturate(.78) !important;
  opacity: .92 !important;
  transition: filter .22s ease, opacity .22s ease, transform .4s ease !important;
}

#detail-view #volumes-grid .volume-grid-card.is-sold .volume-card-meta {
  opacity: .72 !important;
  transition: opacity .22s ease !important;
}

#detail-view #volumes-grid .volume-grid-card.is-sold:hover .volume-cover-stack img,
#detail-view #volumes-grid .volume-grid-card.is-sold:hover > div:first-child > img {
  filter: brightness(.64) saturate(.80) !important;
  opacity: .94 !important;
}

/* Badge Đã bán trên bìa luôn rõ */

#detail-view #volumes-grid .volume-grid-card.is-sold .volume-cover-not-owned.is-sold {
  opacity: 1 !important;
  filter: none !important;
}

/* ---------- TẬP TRUYỆN: list view ---------- */

#detail-view #volumes-grid .volume-list-card.is-sold .volume-list-cover > img {
  filter: brightness(.60) saturate(.78) !important;
  opacity: .92 !important;
  transition: filter .22s ease, opacity .22s ease !important;
}

#detail-view #volumes-grid .volume-list-card.is-sold .volume-list-title,
#detail-view #volumes-grid .volume-list-card.is-sold .volume-list-meta {
  opacity: .72 !important;
  transition: opacity .22s ease !important;
}

/* Icon Đã bán vẫn rõ, không bị mờ theo text */

#detail-view #volumes-grid .volume-list-card.is-sold .volume-list-owned-icon.is-sold {
  opacity: 1 !important;
  filter: none !important;
}

#detail-view #volumes-grid .volume-list-card.is-sold:hover .volume-list-cover > img {
  filter: brightness(.64) saturate(.80) !important;
  opacity: .94 !important;
}

/* ---------- LỊCH PHÁT HÀNH: tập đã bán ---------- */

/* Sold dùng cùng mức dim với release-owned đang có */

#release-view .release-book-card.release-sold .release-book-cover img {
  filter: brightness(.60) saturate(.78) !important;
  opacity: .92 !important;
}

#release-view .release-book-card.release-sold .release-cover-placeholder {
  filter: brightness(.72) !important;
  opacity: .78 !important;
}

#release-view .release-book-card.release-sold .release-book-title,
#release-view .release-book-card.release-sold .release-book-meta,
#release-view .release-book-card.release-sold .release-book-price {
  opacity: .72 !important;
}

#release-view .release-book-card.release-sold:hover .release-book-cover img {
  filter: brightness(.64) saturate(.80) !important;
}

/* Badge Đã bán trong lịch vẫn rõ */

#release-view .release-book-card.release-sold .release-sold-badge {
  opacity: 1 !important;
  filter: none !important;
}

/* Dark mode: cùng độ tối của release-owned hiện tại */

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-sold .manga-card-cover-wrap > img,
body.dark-mode #detail-view #volumes-grid .volume-grid-card.is-sold .volume-cover-stack img,
body.dark-mode #detail-view #volumes-grid .volume-list-card.is-sold .volume-list-cover > img,
body.dark-mode #release-view .release-book-card.release-sold .release-book-cover img {
  filter: brightness(.50) saturate(.72) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
  top: 8px !important;
  right: 8px !important;
  min-height: auto !important;
  gap: 4px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  text-shadow: none !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  box-shadow: 0 6px 14px rgba(225,29,72,.22) !important;
  transform: none !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold)::after {
  display: none !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling:hover .manga-selling-badge:not(.is-sold) {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 8px 18px rgba(225,29,72,.30) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) i {
  font-size: 9px !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-list-cover .manga-selling-badge:not(.is-sold) {
  top: 4px !important;
  right: 4px !important;
  padding: 3px 6px !important;
  font-size: 8px !important;
  border-radius: 999px !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-list-cover .manga-selling-badge:not(.is-sold) i {
  font-size: 8px !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-list-cover .manga-selling-badge:not(.is-sold) span {
  display: inline !important;
}

@keyframes sellingCoverDanceFloat {
  0% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
  18% {
    transform: translate3d(0,-3px,0) rotate(-1deg) scale(1.012);
  }
  38% {
    transform: translate3d(0,1px,0) rotate(1deg) scale(1.016);
  }
  58% {
    transform: translate3d(0,-2px,0) rotate(-.8deg) scale(1.01);
  }
  78% {
    transform: translate3d(0,1px,0) rotate(.8deg) scale(1.014);
  }
  100% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
}

@keyframes sellingCoverGlowPulse {
  0%,100% {
    box-shadow: 0 10px 22px rgba(15,23,42,.08), 0 0 0 3px rgba(255,255,255,.16), 0 0 0 1px rgba(251,113,133,.16), 0 0 0 rgba(251,113,133,0);
  }
  50% {
    box-shadow: 0 12px 24px rgba(15,23,42,.10), 0 0 0 3px rgba(255,255,255,.18), 0 0 0 1px rgba(251,113,133,.22), 0 0 18px rgba(251,113,133,.18);
  }
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
  border-color: rgba(255,255,255,.22) !important;
  background: linear-gradient(135deg, rgba(251,113,133,.96), rgba(225,29,72,.96)) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.28), 0 0 0 1px rgba(251,113,133,.10) !important;
}

@media (max-width: 640px){
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
    top: 7px !important;
    right: 7px !important;
    padding: 4px 8px !important;
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #shelf-view #manga-grid > .manga-shelf-card.is-selling,
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap,
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap > img,
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes sellingCoverDanceFun {
  0% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
  10% {
    transform: translate3d(-1px,-4px,0) rotate(-1.4deg) scale(1.016);
  }
  22% {
    transform: translate3d(1px,1px,0) rotate(1.9deg) scale(1.022);
  }
  34% {
    transform: translate3d(-1px,-2px,0) rotate(-1.6deg) scale(1.018);
  }
  48% {
    transform: translate3d(1px,2px,0) rotate(2.1deg) scale(1.024);
  }
  62% {
    transform: translate3d(-1px,-3px,0) rotate(-1.8deg) scale(1.02);
  }
  76% {
    transform: translate3d(1px,1px,0) rotate(1.5deg) scale(1.018);
  }
  88% {
    transform: translate3d(0,-2px,0) rotate(-1deg) scale(1.012);
  }
  100% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
}

@keyframes sellingCardSparklePulse {
  0%,100% {
    box-shadow: 0 12px 24px rgba(15,23,42,.10), 0 0 0 3px rgba(255,255,255,.16), 0 0 0 1px rgba(251,113,133,.16), 0 0 0 rgba(251,113,133,0);
  }
  50% {
    box-shadow: 0 16px 28px rgba(15,23,42,.14), 0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(251,113,133,.26), 0 0 22px rgba(251,113,133,.22);
  }
}

@keyframes sellingBadgeHappyWiggle {
  0%,100% {
    transform: translate3d(0,0,0) rotate(0deg);
  }
  20% {
    transform: translate3d(0,-1px,0) rotate(-4deg);
  }
  40% {
    transform: translate3d(0,0,0) rotate(4deg);
  }
  60% {
    transform: translate3d(0,-1px,0) rotate(-3deg);
  }
  80% {
    transform: translate3d(0,0,0) rotate(3deg);
  }
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap {
  animation: sellingCardSparklePulse 2.6s ease-in-out infinite !important;
  transform-origin: 50% 82%;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap > img {
  animation: sellingCoverDanceFun 2.35s cubic-bezier(.4,0,.2,1) infinite !important;
  transform-origin: 50% 82%;
  will-change: transform;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
  animation: sellingBadgeHappyWiggle 1.6s ease-in-out infinite !important;
  transform-origin: 50% 50%;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling:hover .manga-card-cover-wrap > img {
  animation-duration: 1.9s !important;
}

body.dark-mode #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap {
  animation: sellingCardSparklePulse 2.6s ease-in-out infinite !important;
  animation-play-state: var(--tt-animation-state,running) !important;
}

@media (prefers-reduced-motion: reduce){
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap,
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap > img,
  #shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge:not(.is-sold) {
    animation: none !important;
  }
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling > .manga-card-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: transparent !important;
  border-radius: inherit !important;
}

#shelf-view #manga-grid > .manga-shelf-card.is-selling::before,
#shelf-view #manga-grid > .manga-shelf-card.is-selling::after,
#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-selling-badge,
#shelf-view #manga-grid > .manga-shelf-card.is-selling .manga-card-cover-wrap {
  pointer-events: none !important;
}

@keyframes volumeGoodsSellingDance {
  0% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
  10% {
    transform: translate3d(-1px,-4px,0) rotate(-1.5deg) scale(1.018);
  }
  22% {
    transform: translate3d(1px,1px,0) rotate(2deg) scale(1.024);
  }
  34% {
    transform: translate3d(-1px,-2px,0) rotate(-1.7deg) scale(1.020);
  }
  48% {
    transform: translate3d(1px,2px,0) rotate(2.2deg) scale(1.026);
  }
  62% {
    transform: translate3d(-1px,-3px,0) rotate(-1.9deg) scale(1.022);
  }
  76% {
    transform: translate3d(1px,1px,0) rotate(1.6deg) scale(1.020);
  }
  88% {
    transform: translate3d(0,-2px,0) rotate(-1deg) scale(1.014);
  }
  100% {
    transform: translate3d(0,0,0) rotate(0deg) scale(1);
  }
}

@keyframes volumeGoodsSellingGlow {
  0%,100% {
    box-shadow: 0 7px 15px rgba(15,23,42,.08),
      0 0 0 1px rgba(251,113,133,.15),
      0 0 0 rgba(251,113,133,0);
  }
  50% {
    box-shadow: 0 9px 18px rgba(15,23,42,.11),
      0 0 0 1px rgba(251,113,133,.28),
      0 0 16px rgba(251,113,133,.20);
  }
}

/* ===== TẬP LẺ — GRID ===== */

#detail-view #volumes-grid .volume-grid-card.is-selling > div:first-child {
  animation: volumeGoodsSellingGlow 2.6s ease-in-out infinite !important;
  border-color: rgba(251,113,133,.28) !important;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#detail-view #volumes-grid .volume-grid-card.is-selling .volume-cover-stack > img {
  animation: volumeGoodsSellingDance 2.35s cubic-bezier(.4,0,.2,1) infinite !important;
  transform-origin: 50% 82%;
  will-change: transform;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#detail-view #volumes-grid .volume-grid-card.is-selling .volume-card-price {
  color: #e11d48 !important;
}

/* ===== TẬP LẺ — LIST ===== */

#detail-view #volumes-grid .volume-list-card.is-selling .volume-list-cover {
  animation: volumeGoodsSellingGlow 2.6s ease-in-out infinite !important;
  border: 1px solid rgba(251,113,133,.24) !important;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#detail-view #volumes-grid .volume-list-card.is-selling .volume-list-cover > img {
  animation: volumeGoodsSellingDance 2.35s cubic-bezier(.4,0,.2,1) infinite !important;
  transform-origin: 50% 82%;
  will-change: transform;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#detail-view #volumes-grid .volume-list-card.is-selling .volume-list-price {
  color: #e11d48 !important;
}

/* ===== PHỤ KIỆN ===== */

#detail-view #goods-grid .goods-detail-card.is-selling .goods-detail-thumb {
  animation: volumeGoodsSellingDance 2.35s cubic-bezier(.4,0,.2,1) infinite,
    volumeGoodsSellingGlow 2.6s ease-in-out infinite !important;
  transform-origin: 50% 82%;
  border-color: rgba(251,113,133,.28) !important;
  will-change: transform;
  animation-play-state: var(--tt-animation-state,running) !important;
}

#detail-view #goods-grid .goods-detail-card.is-selling .goods-sale-price,
#detail-view #goods-grid .goods-detail-card.is-selling .goods-detail-info > p,
#detail-view #goods-grid .goods-detail-card.is-selling .goods-detail-info .text-amber-600 {
  color: #e11d48 !important;
}

/* Dark mode vẫn giữ đỏ/hồng rõ. */

body.dark-mode #detail-view #volumes-grid .volume-grid-card.is-selling .volume-card-price,
body.dark-mode #detail-view #volumes-grid .volume-list-card.is-selling .volume-list-price,
body.dark-mode #detail-view #goods-grid .goods-detail-card.is-selling .goods-sale-price,
body.dark-mode #detail-view #goods-grid .goods-detail-card.is-selling .goods-detail-info > p,
body.dark-mode #detail-view #goods-grid .goods-detail-card.is-selling .goods-detail-info .text-amber-600 {
  color: #fb7185 !important;
}

/* Không đụng đến trang Thanh lý: mọi selector phía trên đều bị khóa trong #detail-view. */

@media (prefers-reduced-motion:reduce){
  #detail-view #volumes-grid .volume-grid-card.is-selling > div:first-child,
  #detail-view #volumes-grid .volume-grid-card.is-selling .volume-cover-stack > img,
  #detail-view #volumes-grid .volume-list-card.is-selling .volume-list-cover,
  #detail-view #volumes-grid .volume-list-card.is-selling .volume-list-cover > img,
  #detail-view #goods-grid .goods-detail-card.is-selling .goods-detail-thumb {
    animation: none !important;
  }
}

#detail-view #volumes-grid .volume-card-price-row,
#detail-view #volumes-grid .volume-list-price-row {
  justify-content: center;
  white-space: nowrap;
}

#detail-view #volumes-grid .volume-card-sale-price,
#detail-view #volumes-grid .volume-list-sale-price {
  color: #e11d48 !important;
  font-weight: 900 !important;
  line-height: 1.1;
}

#detail-view #volumes-grid .volume-card-original-price,
#detail-view #volumes-grid .volume-list-original-price {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  line-height: 1.1;
}

/* Grid: cân theo kích thước card hiện tại. */

/* List view: giữ cùng hàng trong cả giao diện ngang và dọc. */

#detail-view #volumes-grid.grid-cols-1 .volume-list-price-row {
  max-width: 100%;
}

/* Điện thoại dọc / card rất hẹp: vẫn ưu tiên nằm cạnh nhau, tự thu chữ. */

@media (max-width:768px) and (orientation:portrait){
  #detail-view #volumes-grid:not(.grid-cols-1) .volume-card-price-row {
    gap: 4px;
  }
  #detail-view #volumes-grid:not(.grid-cols-1) .volume-card-sale-price {
    font-size: 11px;
  }
  #detail-view #volumes-grid:not(.grid-cols-1) .volume-card-original-price {
    font-size: 8px;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-price-row {
    gap: 4px;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-original-price {
    font-size: calc(var(--list-price-fs, 12px) * .72);
  }
}

/* Giao diện ngang / màn hình rộng: cho giá thoáng hơn một chút. */

@media (min-width:769px) and (orientation:landscape){
  #detail-view #volumes-grid:not(.grid-cols-1) .volume-card-price-row {
    gap: 6px;
  }
  #detail-view #volumes-grid:not(.grid-cols-1) .volume-card-sale-price {
    font-size: 12.5px;
  }
  #detail-view #volumes-grid:not(.grid-cols-1) .volume-card-original-price {
    font-size: 9.5px;
  }
}

/* Dark mode. */

body.dark-mode #detail-view #volumes-grid .volume-card-sale-price,
body.dark-mode #detail-view #volumes-grid .volume-list-sale-price {
  color: #fb7185 !important;
}

body.dark-mode #detail-view #volumes-grid .volume-card-original-price,
body.dark-mode #detail-view #volumes-grid .volume-list-original-price {
  color: #94a3b8 !important;
}

/* Không áp dụng ở #selling-view vì toàn bộ selector đều khóa trong #detail-view. */

:root {
  --tt-status-selling: #e11d48;
  --tt-status-selling-soft: #fb7185;
  --tt-status-sold: #63488a;
  --tt-status-owned: #10b981;
  --tt-status-missing: #f59e0b;
}

/* Chống tràn ngang / chữ dài ở mọi breakpoint mà không đổi bố cục đã chốt. */

#shelf-view, #goods-view, #selling-view, #detail-view, #spending-view, #release-view, #book-vault-view, #data-health-view {
  min-width: 0;
  max-width: 100%;
}

.manga-shelf-card,.volume-grid-card,.volume-list-card,.goods-detail-card,.selling-card,
.data-health-issue,.release-book-card {
  min-width: 0;
}

.manga-card-title,.volume-list-title,.goods-detail-name,.selling-card-title,
.data-health-issue-copy,.detail-poster-info,.contact-edit-label {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Popup: giữ trong viewport ngang/dọc và safe-area, không để nội dung chui khỏi màn hình. */

#vol-detail-modal,
#goods-detail-modal,
#auth-modal,
#batch-import-modal,
#global-search-modal,
#qr-share-modal,
#contact-modal,
#image-zoom-modal {
  box-sizing: border-box;
  overscroll-behavior: contain;
}

#vol-detail-modal>div,
#goods-detail-modal>div,
#batch-import-modal>div,
#global-search-modal>div,
#qr-share-modal>div,
#contact-modal>div {
  max-width: calc(100vw - 16px);
}

#auth-modal > div:first-child {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: min(24rem,100%);
  margin: auto;
}

@media (max-width:640px){
  #vol-detail-modal,
#goods-detail-modal,
#auth-modal,
#batch-import-modal,
#global-search-modal,
#qr-share-modal,
#contact-modal {
    padding-left: max(8px,env(safe-area-inset-left))!important;
    padding-right: max(8px,env(safe-area-inset-right))!important;
  }
}

/* Không để lớp trang trí của card BÁN chặn click link/card. */

#shelf-view #manga-grid>.manga-shelf-card.is-selling::before,
#shelf-view #manga-grid>.manga-shelf-card.is-selling::after,
#shelf-view #manga-grid>.manga-shelf-card .manga-selling-badge,
#shelf-view #manga-grid>.manga-shelf-card .publisher-logo-badge {
  pointer-events: none!important;
}

#shelf-view #manga-grid>.manga-shelf-card>.manga-card-link {
  z-index: 30!important;
  pointer-events: auto!important;
}

/* Hệ màu trạng thái dùng chung: BÁN = đỏ, ĐÃ BÁN = tím, ĐÃ MUA = xanh, CHƯA MUA = hổ phách. */

#shelf-view .manga-selling-badge:not(.is-sold),
#detail-view .volume-selling-badge,
#detail-view .goods-selling-badge {
  background: linear-gradient(135deg,var(--tt-status-selling-soft),var(--tt-status-selling))!important;
  color: #fff!important;
  border-color: rgba(255,255,255,.45)!important;
}

#shelf-view .manga-selling-badge.is-sold,
#detail-view .volume-cover-not-owned.is-sold,
#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-sold,
#release-view .release-ownership-badge.release-sold-badge {
  background: var(--tt-status-sold)!important;
  color: #fff!important;
  border-color: #a58cc8!important;
}

#release-view .release-ownership-badge.release-owned-badge {
  background: var(--tt-status-owned)!important;
  color: #fff!important;
}

#release-view .release-ownership-badge.release-unowned-badge,
#detail-view .volume-cover-not-owned:not(.is-sold) {
  background: linear-gradient(135deg,#fbbf24,var(--tt-status-missing))!important;
  color: #fff!important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-owned {
  color: #34d399!important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon.is-missing {
  color: #fbbf24!important;
}

/* Giá đang thanh lý luôn cùng quy ước đỏ; giá gốc luôn muted + gạch ngang. */

#detail-view .volume-card-sale-price,
#detail-view .volume-list-sale-price,
#detail-view .goods-sale-price,
#shelf-view .manga-shelf-card.is-selling .manga-card-sale-price {
  color: var(--tt-status-selling)!important;
}

#detail-view .volume-card-original-price,
#detail-view .volume-list-original-price,
#detail-view .goods-value-muted,
#shelf-view .manga-shelf-card.is-selling .manga-card-cover-price {
  color: #94a3b8!important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

body.dark-mode #detail-view .volume-card-sale-price,
body.dark-mode #detail-view .volume-list-sale-price,
body.dark-mode #detail-view .goods-sale-price,
body.dark-mode #shelf-view .manga-shelf-card.is-selling .manga-card-sale-price {
  color: #fb7185!important;
}

/* Tôn trọng người dùng giảm chuyển động. */

@media (prefers-reduced-motion:reduce){
  #shelf-view .is-selling *,#detail-view .is-selling * {
    animation: none!important;
    transition-duration: .01ms!important;
  }
}

#detail-view #volumes-grid .volume-card-price-row,
#detail-view #volumes-grid .volume-list-price-row {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: clamp(7px, 3.2cqi, 11px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Giá bán luôn được ưu tiên hiển thị đủ, không bị ép co rồi vẽ chồng sang giá gốc. */

#detail-view #volumes-grid .volume-card-sale-price,
#detail-view #volumes-grid .volume-list-sale-price {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Giá gốc chỉ dùng phần chiều ngang còn lại; thiếu chỗ thì cắt gọn thay vì đè lên giá bán. */

#detail-view #volumes-grid .volume-card-original-price,
#detail-view #volumes-grid .volume-list-original-price {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Grid căn giữa, List căn trái — giữ đúng bố cục hiện tại. */

#detail-view #volumes-grid:not(.grid-cols-1) .volume-card-price-row {
  justify-content: center !important;
}

/* List view tự co font theo chính card để cả dọc lẫn ngang không chật. */

#detail-view #volumes-grid.grid-cols-1 .volume-list-sale-price {
  font-size: clamp(8px, 6.2cqi, var(--list-price-fs, 12px)) !important;
}

/* Grid/card nhỏ cũng ưu tiên giá bán, giá gốc nhỏ hơn một nấc. */

#detail-view #volumes-grid:not(.grid-cols-1) .volume-card-sale-price {
  font-size: clamp(9px, 7cqi, 12.5px) !important;
}

#detail-view #volumes-grid:not(.grid-cols-1) .volume-card-original-price {
  font-size: clamp(7px, 5cqi, 9.5px) !important;
}

@media (max-width:768px) and (orientation:portrait){
  #detail-view #volumes-grid .volume-card-price-row,
  #detail-view #volumes-grid .volume-list-price-row {
    gap: clamp(6px, 2.8cqi, 9px) !important;
  }
}

#shelf-view #manga-grid .manga-card-progress-copy {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  align-items: center !important;
  width: 100% !important;
  gap: 6px !important;
}

#shelf-view #manga-grid .manga-card-progress-copy > * {
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.15 !important;
}

#shelf-view #manga-grid .manga-card-progress-label {
  text-align: left !important;
}

#shelf-view #manga-grid .manga-card-progress-count {
  text-align: center !important;
}

#shelf-view #manga-grid .manga-card-progress-status {
  text-align: right !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

body.dark-mode #shelf-view #manga-grid .manga-card-progress-status {
  color: #cbd5e1 !important;
}

/* Card nhỏ / điện thoại dọc: vẫn giữ đúng 3 cột và không đè chữ. */

@media (max-width:640px){
  #shelf-view #manga-grid .manga-card-progress-copy {
    gap: 3px !important;
    font-size: 7.2px !important;
  }
  #shelf-view #manga-grid .manga-card-progress-copy strong,
  #shelf-view #manga-grid .manga-card-progress-status {
    font-size: 7.2px !important;
  }
}

/* Giao diện ngang / card rộng: cho chữ thoáng hơn một chút. */

@media (min-width:641px){
  #shelf-view #manga-grid .manga-card-progress-copy {
    gap: 8px !important;
  }
}

/* List view cũng dùng 3 vùng bằng nhau trên phần thông tin bên trái. */

#shelf-view #manga-grid .manga-card-list-info .manga-card-progress-copy {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

/* ===== NỀN TẢNG CHUNG CHO LIST MODE ===== */

#shelf-view #manga-grid.shelf-list-layout {
  display: grid !important;
  align-items: stretch !important;
}

#shelf-view #manga-grid.shelf-list-layout > .manga-shelf-card {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 10px !important;
  gap: 10px !important;
  align-items: center !important;
  overflow: hidden !important;
  container-type: inline-size;
}

/* Bìa: bỏ w/h nhỏ cũ, luôn giữ đúng tỉ lệ truyện. */

#shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover {
  width: clamp(94px, 27vw, 116px) !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  min-width: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Khối thông tin: xếp dọc để card hẹp vẫn sạch, giá luôn nằm cuối. */

#shelf-view #manga-grid.shelf-list-layout .manga-card-list-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: auto !important;
  align-self: stretch !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-list-info > .min-w-0 {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  line-height: 1.2 !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-meta-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line .manga-card-meta-text {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-mini-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip,
#shelf-view #manga-grid.shelf-list-layout .manga-card-volume-chip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

/* Hàng Tập phát hành | số tập | trạng thái: tuyệt đối 1 dòng. */

#shelf-view #manga-grid.shelf-list-layout .manga-card-progress {
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 1px !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > * {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Giá luôn 1 hàng, không co chồng lên nhau. */

#shelf-view #manga-grid.shelf-list-layout .manga-card-price-panel {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 31px !important;
  margin-top: auto !important;
  padding: 6px 8px !important;
  gap: 5px !important;
  align-self: auto !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-sale-price {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

#shelf-view #manga-grid.shelf-list-layout .manga-card-cover-price {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ===== GIAO DIỆN DỌC: GIỮ NGUYÊN 1 CỘT ===== */

@media (orientation:portrait){
  #shelf-view #manga-grid.shelf-list-layout {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 12px !important;
  }
}

/* ===== GIAO DIỆN NGANG — CỬA SỔ NHỎ / THƯỜNG: 4 CỘT ===== */

@media (orientation:landscape) and (max-width:1799px){
  #shelf-view #manga-grid.shelf-list-layout {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout > .manga-shelf-card {
    padding: 9px !important;
    gap: 9px !important;
  }
}

/* ===== GIAO DIỆN NGANG — CỬA SỔ LỚN: 8 CỘT ===== */

@media (orientation:landscape) and (min-width:1800px){
  #shelf-view #manga-grid.shelf-list-layout {
    grid-template-columns: repeat(8,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout > .manga-shelf-card {
    padding: 8px !important;
    gap: 8px !important;
  }
}

/* Cửa sổ ngang rất hẹp: vẫn giữ 4 cột theo yêu cầu,
   nhưng thu bìa/chữ để tuyệt đối không lấn nhau. */

@media (orientation:landscape) and (max-width:900px){
  #shelf-view #manga-grid.shelf-list-layout {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout > .manga-shelf-card {
    padding: 6px !important;
    gap: 6px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover {
    width: clamp(52px, 34%, 66px) !important;
    border-radius: 7px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info {
    gap: 3px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-panel {
    gap: 3px !important;
    margin-top: 3px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line {
    font-size: 6.5px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-volume-chip {
    min-height: 16px !important;
    padding: 1px 3px !important;
    font-size: 6px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip .stars-compact {
    font-size: 5px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-track {
    height: 2px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-price-panel {
    min-height: 22px !important;
    padding: 3px 4px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-sale-price {
    font-size: 7px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-cover-price {
    font-size: 5.5px !important;
  }
}

/* Bảo đảm link phủ card không cản layout và badge không làm tăng kích thước. */

#shelf-view #manga-grid.shelf-list-layout .manga-card-link {
  position: absolute !important;
  inset: 0 !important;
}

#shelf-view #manga-grid.shelf-list-layout .publisher-logo-badge,
#shelf-view #manga-grid.shelf-list-layout .manga-selling-badge,
#shelf-view #manga-grid.shelf-list-layout .manga-today-release-badge,
#shelf-view #manga-grid.shelf-list-layout .manga-upcoming-release-badge {
  max-width: calc(100% - 8px) !important;
}

@media (orientation:landscape){
  /* Tên truyện dùng tối đa 2 dòng để không phí khoảng trống. */
  /* Hàng chữ progress: to hơn, gần nhau hơn, giàn đều hơn. */
  /* Thanh tím xuống thấp hơn; khung giá chỉ cách một khoảng nhỏ. */
}

/* Ngang cửa sổ nhỏ / thường: tăng rõ cỡ chữ hàng progress. */

@media (orientation:landscape) and (max-width:1799px){
}

/* Ngang cửa sổ lớn: vẫn to hơn bản cũ nhưng giữ an toàn trong 8 cột. */

@media (orientation:landscape) and (min-width:1800px){
}

/* Ngang rất hẹp: vẫn cho title 2 dòng, progress rõ hơn nhưng an toàn. */

@media (orientation:landscape) and (max-width:900px){
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    font-size: 8.8px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
    grid-template-columns: minmax(0,1fr) minmax(0,.78fr) minmax(0,.9fr) !important;
    column-gap: 2px !important;
    margin-bottom: 2px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    font-size: 6.9px !important;
    line-height: 1.08 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-price-panel {
    margin-top: 2px !important;
  }
}

@media (orientation:landscape){
  #shelf-view #manga-grid.shelf-list-layout > .manga-shelf-card {
    align-items: stretch !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 3px !important;
    min-height: 100% !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info > .min-w-0 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    line-height: 1.14 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    margin: 0 0 1px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-panel {
    margin: 1px 0 0 !important;
    padding-top: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-mini-row {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress {
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
    grid-template-columns: minmax(0,1fr) minmax(max-content,.72fr) minmax(0,1fr) !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :first-child {
    justify-self: start !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :nth-child(2) {
    justify-self: center !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :last-child {
    justify-self: end !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-price-panel {
    align-self: stretch !important;
  }
}

/* Ngang cửa sổ nhỏ / thường */

@media (orientation:landscape) and (max-width:1799px){
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover {
    width: clamp(76px, 30%, 112px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-volume-chip {
    min-height: 20px !important;
    padding: 2px 5px !important;
    font-size: clamp(7.6px, .68vw, 9px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip .stars-compact {
    font-size: clamp(7px, .62vw, 8.4px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    line-height: 1.12 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-track {
    height: 4px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-sale-price {
    font-size: clamp(11px, .95vw, 13px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-cover-price {
    font-size: clamp(7.8px, .68vw, 9.2px) !important;
  }
}

/* Ngang cửa sổ lớn */

@media (orientation:landscape) and (min-width:1800px){
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover {
    width: clamp(82px, 31%, 102px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-panel {
    gap: 2px !important;
    margin-top: 1px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-volume-chip {
    min-height: 20px !important;
    padding: 2px 5px !important;
    gap: 3px !important;
    font-size: clamp(7.5px, .45vw, 8.7px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip .stars-compact {
    font-size: clamp(6.8px, .41vw, 8px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    line-height: 1.1 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-track {
    height: 3px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-price-panel {
    min-height: 29px !important;
    padding: 5px 7px !important;
    gap: 4px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-sale-price {
    font-size: clamp(10px, .6vw, 12px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-cover-price {
    font-size: clamp(7px, .42vw, 8.4px) !important;
  }
}

/* Ngang khá hẹp: vẫn không để chữ dính chùm. */

@media (orientation:landscape) and (max-width:1100px){
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover {
    width: clamp(64px, 31%, 84px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    font-size: clamp(10.2px, 1.22vw, 12px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line {
    font-size: clamp(7.2px, .86vw, 8.3px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
    grid-template-columns: minmax(0,1fr) minmax(max-content,.66fr) minmax(0,1fr) !important;
    column-gap: 4px !important;
    margin-bottom: 2px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-sale-price {
    font-size: clamp(9.5px, 1vw, 11px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-cover-price {
    font-size: clamp(6.8px, .72vw, 8px) !important;
  }
}

@media (orientation:landscape){
  /* Không giữ chiều cao giả 2 dòng cho title ngắn nữa. */
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    min-height: 0 !important;
    max-height: calc(2 * 1.14em) !important;
    align-self: flex-start !important;
    margin-bottom: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info > .min-w-0 {
    gap: 1px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-panel {
    margin-top: 1px !important;
    gap: 2px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress {
    margin-top: 1px !important;
    margin-bottom: 0 !important;
  }
  /* Dùng flex thay vì 3 cột cứng để tránh dính chùm ở card hẹp. */
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 2px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
    min-width: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :first-child {
    flex: 1 1 auto !important;
    text-align: left !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :nth-child(2),
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :last-child {
    flex: 0 0 auto !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :nth-child(2) {
    text-align: center !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :last-child {
    text-align: right !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-track {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-price-panel {
    margin-top: 1px !important;
  }
}

/* Landscape card width nhỏ / 4 cột: ưu tiên dễ đọc, tránh dính chùm */

@media (orientation:landscape) and (max-width:1799px){
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info {
    gap: 2px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    font-size: clamp(12px, 1.1vw, 15px) !important;
    line-height: 1.12 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line {
    font-size: clamp(8.2px, .78vw, 9.6px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    font-size: clamp(9.3px, .88vw, 11px) !important;
    font-weight: 800 !important;
  }
}

/* Landscape card width lớn / 8 cột: chữ lớn lên rõ ràng hơn bản trước */

@media (orientation:landscape) and (min-width:1800px){
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info {
    gap: 2px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    font-size: clamp(12px, .76vw, 14.5px) !important;
    line-height: 1.12 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line {
    font-size: clamp(8.2px, .52vw, 9.6px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    font-size: clamp(9.2px, .56vw, 10.8px) !important;
    font-weight: 800 !important;
  }
}

/* Landscape rất hẹp: nén khoảng cách thay vì để chữ đè nhau */

@media (orientation:landscape) and (max-width:1100px){
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
    gap: 3px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    font-size: clamp(8px, .95vw, 9.2px) !important;
  }
}

@media (orientation:portrait){
  #shelf-view #manga-grid.shelf-list-layout > .manga-shelf-card {
    align-items: stretch !important;
    padding: 12px !important;
    gap: 12px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover {
    width: clamp(104px, 26vw, 128px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-height: 100% !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info > .min-w-0 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    line-height: 1.14 !important;
    min-height: 0 !important;
    max-height: calc(2 * 1.14em) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    margin: 0 0 1px !important;
    font-size: clamp(15px, 4.1vw, 21px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-panel {
    gap: 4px !important;
    margin-top: 1px !important;
    padding-top: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line {
    font-size: clamp(10px, 2.55vw, 13px) !important;
    line-height: 1.18 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-mini-row {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-volume-chip {
    min-height: 24px !important;
    padding: 3px 7px !important;
    gap: 4px !important;
    font-size: clamp(9px, 2.2vw, 11px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip .stars-compact {
    font-size: clamp(8px, 2vw, 10px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 4px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em !important;
    min-width: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :first-child {
    flex: 1 1 auto !important;
    text-align: left !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :nth-child(2),
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :last-child {
    flex: 0 0 auto !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :nth-child(2) {
    text-align: center !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy > :last-child {
    text-align: right !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    font-size: clamp(10px, 2.45vw, 12.8px) !important;
    font-weight: 800 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-track {
    height: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-price-panel {
    margin-top: 2px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    gap: 6px !important;
    align-self: stretch !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-sale-price {
    font-size: clamp(17px, 4.2vw, 22px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-cover-price {
    font-size: clamp(9px, 2.1vw, 12px) !important;
  }
}

/* Dọc hẹp hơn (điện thoại nhỏ): nén vừa đủ, vẫn giữ dễ đọc và không dính chùm */

@media (orientation:portrait) and (max-width:430px){
  #shelf-view #manga-grid.shelf-list-layout > .manga-shelf-card {
    padding: 10px !important;
    gap: 10px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-cover {
    width: clamp(92px, 25vw, 108px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-list-info .manga-card-title {
    font-size: clamp(13px, 4vw, 17px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-meta-line {
    font-size: clamp(9px, 2.45vw, 11.5px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-rating-chip,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-volume-chip {
    min-height: 22px !important;
    padding: 2px 6px !important;
    font-size: clamp(8px, 2vw, 10px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy strong,
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-status {
    font-size: clamp(9.3px, 2.3vw, 11px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-progress-copy {
    gap: 6px !important;
    margin-bottom: 3px !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-sale-price {
    font-size: clamp(15px, 3.8vw, 19px) !important;
  }
  #shelf-view #manga-grid.shelf-list-layout .manga-card-cover-price {
    font-size: clamp(8.5px, 1.95vw, 10.5px) !important;
  }
}

#detail-view #volumes-grid.grid-cols-1 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#detail-view #volumes-grid.grid-cols-1 > .volume-list-card {
  container: volume-list-card / inline-size !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 10px !important;
  overflow: hidden !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-layout {
  --list-cover-w: clamp(80px,28cqi,108px);
  --list-cover-h: calc(var(--list-cover-w) * 1.5);
  --list-title-fs: 15px;
  --list-price-fs: 13px;
  --list-action-size: 30px;
  display: grid !important;
  grid-template-columns: var(--list-cover-w) minmax(0,1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: var(--list-cover-h) !important;
  height: 100% !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-layout:has(.volume-list-actions) {
  grid-template-columns: var(--list-cover-w) minmax(0,1fr) var(--list-action-size) !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-cover {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: var(--list-cover-w) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--list-cover-h) !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 !important;
  align-self: center !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-cover > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  align-self: stretch !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-head {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-title,
#detail-view #volumes-grid.grid-cols-1 .volume-list-title > a,
#detail-view #volumes-grid.grid-cols-1 .volume-list-title > span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--list-title-fs) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-title {
  flex: 0 1 auto !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon {
  flex: 0 0 19px !important;
  width: 19px !important;
  min-width: 19px !important;
  max-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  margin: 0 !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon i {
  font-size: 9px !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-price,
#detail-view #volumes-grid.grid-cols-1 .volume-edition-text--list,
#detail-view #volumes-grid.grid-cols-1 .volume-seal-text {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: var(--list-price-fs) !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-price {
  font-weight: 800 !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-seal-text {
  color: rgba(226,232,240,.9) !important;
}

body:not(.dark-mode) #detail-view #volumes-grid.grid-cols-1 .volume-seal-text {
  color: #475569 !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-price-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 2px 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-sale-price,
#detail-view #volumes-grid.grid-cols-1 .volume-list-original-price {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: var(--list-price-fs) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-original-price {
  font-size: 12px !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: var(--list-action-size) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-actions button {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--list-action-size) !important;
  width: var(--list-action-size) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--list-action-size) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-actions button i {
  font-size: 12px !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-goods-badge,
#detail-view #volumes-grid.grid-cols-1 .volume-list-sale-badge {
  position: absolute !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-height: 19px !important;
  padding: 3px 5px !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 8px rgba(15,23,42,.22) !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-goods-badge {
  left: 4px !important;
  top: 4px !important;
  background: rgba(245,158,11,.94) !important;
  max-width: calc(100% - 8px) !important;
  overflow: hidden !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-sale-badge {
  right: 4px !important;
  top: auto !important;
  bottom: 4px !important;
  width: 20px !important;
  min-width: 20px !important;
  padding: 3px !important;
  background: var(--tt-status-selling,#e11d48) !important;
}

#detail-view #volumes-grid.grid-cols-1 .volume-list-actions button:focus-visible,
#detail-view #volumes-grid.grid-cols-1 .volume-edition-text--interactive:focus-visible,
#detail-view #volumes-grid.grid-cols-1 .volume-list-title a:focus-visible {
  outline: 2px solid #818cf8 !important;
  outline-offset: -2px !important;
}

/* Retain the two-column portrait list. Very narrow screens use a readable full row. */

@media (max-width:768px) and (orientation:portrait){
  #detail-view #volumes-grid.grid-cols-1 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 > .volume-list-card {
    padding: 8px !important;
  }
}

@media (max-width:360px) and (orientation:portrait){
  #detail-view #volumes-grid.grid-cols-1 {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

@container volume-list-card (max-width:250px){
  #detail-view #volumes-grid.grid-cols-1 .volume-list-layout {
    --list-cover-w: clamp(48px,41cqi,78px);
    --list-title-fs: clamp(12px,7.8cqi,14px);
    --list-price-fs: 12px;
    --list-action-size: 20px;
    grid-template-columns: var(--list-cover-w) minmax(0,1fr) !important;
    grid-template-rows: auto !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    min-height: var(--list-cover-h) !important;
    align-items: center !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-layout:has(.volume-list-actions) {
    grid-template-columns: var(--list-cover-w) minmax(0,1fr) var(--list-action-size) !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-main {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-head {
    gap: 3px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-meta {
    gap: 3px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon {
    flex-basis: 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-owned-icon i {
    font-size: 7px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-original-price {
    font-size: 11px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    align-self: stretch !important;
    justify-self: end !important;
    justify-content: center !important;
    width: var(--list-action-size) !important;
    gap: 10px !important;
  }
  #detail-view #volumes-grid.grid-cols-1 .volume-list-actions button i {
    font-size: 11px !important;
  }
}

/* Reserve readable text space at the narrowest two-column widths. */

@container volume-list-card (max-width:145px){
  #detail-view #volumes-grid.grid-cols-1 .volume-list-layout {
    --list-cover-w: clamp(42px,calc(100cqi - 84px),60px);
  }
}

@supports not (container-type:inline-size){
  @media (max-width:768px){
    #detail-view #volumes-grid.grid-cols-1 {
      grid-template-columns: minmax(0,1fr) !important;
    }
  }
}

[data-tt-motion-paused],
#mobile-detail-dock:not(.is-visible),
body.app-popup-open :is(#shelf-view,#detail-view,#goods-view,#selling-view,#spending-view,#release-view) {
  --tt-animation-state: paused;
}

/* v652 — Đồng bộ thanh công cụ hai hàng Tập truyện và Phụ kiện.
   Hàng trên: tìm kiếm + bộ lọc phù hợp tab (+ quản lý phần nếu là Tập truyện).
   Hàng dưới: sắp xếp + biểu tượng chức năng + nút thêm.
   Giữ Part ở hàng cuộn ngang riêng, không xuất hiện trong Phụ kiện. */
#detail-filter-toolbar .detail-toolbar-manage-slot { display: none; }
#detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-primary {
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) auto;
  align-items: stretch;
  gap: 8px;
}
#detail-filter-toolbar.detail-toolbar-goods .detail-toolbar-primary {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  align-items: stretch;
  gap: 8px;
}
#detail-filter-toolbar.detail-toolbar-goods .detail-toolbar-primary > :is(#detail-filter-owned,.pretty-select-wrap[data-select-id="detail-filter-owned"]) {
  grid-column: 2; grid-row: 1; min-width: 0; width: 100%;
}
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-primary > .detail-toolbar-search {
  grid-column: 1; grid-row: 1; min-width: 0;
}
#detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-primary > :is(#detail-filter-edition,.pretty-select-wrap[data-select-id="detail-filter-edition"]) {
  grid-column: 2; grid-row: 1; min-width: 0; width: 100%;
}
#detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot {
  display: flex; grid-column: 3; grid-row: 1; min-width: 0;
}
#detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn:not(.hidden) {
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
}
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort-and-views {
  display: contents;
}
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
}
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort {
  min-width: 0;
}
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort > :is(select,.pretty-select-wrap) {
  min-width: 0; max-width: 100%; width: 100%;
}
/* PrettySelect measures a fixed pixel width when it first mounts. Remove that
   one measurement only in the two detail toolbars so the sort fits the grid track. */
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort > .pretty-select-wrap {
  width: 100% !important;
}
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher {
  display: flex; flex-wrap: nowrap; min-width: 0;
}
/* v664: Nút Thêm tập / Thêm phụ kiện đồng bộ chữ và độ cao
   với nút Quản lý phần; giữ nguyên màu và quy tắc thu gọn trên mobile. */
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn:not(.hidden) {
  display: inline-flex; align-items: center; justify-content: center;
  justify-self: end; margin: 0; white-space: nowrap;
  gap: 6px;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800; /* quy tắc font-weight chung của website vẫn được ưu tiên */
}
#detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn .detail-add-plus {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; line-height: 1; font-size: 12px;
}
#detail-filter-toolbar.detail-toolbar-volumes #volume-part-filter-wrap {
  width: 100%; min-width: 0;
}
/* Giữ dấu cộng của nút Thêm truyện ngoài trang chủ thẳng tâm dòng. */
#add-manga-btn > i.fa-plus {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
@media (max-width: 600px) {
  #detail-filter-toolbar.detail-toolbar-goods .detail-toolbar-primary {
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
    gap: 6px;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-primary {
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) 36px;
    gap: 6px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-search > input {
    width: 100%; min-width: 0; height: 38px;
    text-overflow: ellipsis; padding-left: 27px; padding-right: 5px;
    font-size: 11px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-search > i {
    left: 8px; top: 13px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-primary .pretty-select-trigger {
    min-width: 0; width: 100%; height: 38px; padding: 6px 7px; font-size: 11px; gap: 3px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-primary .pretty-select-label {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn:not(.hidden) {
    width: 36px; height: 38px; padding: 0; border-radius: 10px; flex: 0 0 36px;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn span {
    display: none;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn i {
    font-size: 14px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-actions {
    grid-template-columns: minmax(0,1fr) auto 36px;
    gap: 5px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort :is(select,.pretty-select-trigger) {
    height: 36px; min-height: 36px; min-width: 0;
    padding: 5px 5px; font-size: 11px; width: 100%;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort .pretty-select-trigger {
    gap: 3px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort .pretty-select-label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher {
    padding: 3px; gap: 1px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher > button {
    width: 25px; height: 28px; flex-basis: 25px; padding: 0 !important;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn:not(.hidden) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; min-width: 0; padding: 0;
    line-height: 1; border-radius: 10px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn .detail-add-caption {
    display: none;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn .detail-add-plus {
    font-size: 15px;
    align-self: center;
    justify-self: center;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-primary {
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-actions {
    grid-template-columns: minmax(0,1fr) auto auto;
  }
}


/* v665 — Giao diện dọc: giữ 2 hàng nhưng thay thứ tự điều khiển.
   Hàng 1: phiên bản/trạng thái -> sắp xếp.
   Hàng 2: tìm kiếm -> icon xem/lọc -> quản lý phần -> thêm.
   Sắp xếp bằng CSS (display:contents) để giữ nguyên DOM, ID và JavaScript;
   áp dụng đúng cho cả select gốc lẫn PrettySelect bọc động. */
@media (orientation: portrait) {
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) > .detail-toolbar-primary,
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) > .detail-toolbar-actions,
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort-and-views {
    display: contents;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-primary > :is(#detail-filter-edition,.pretty-select-wrap[data-select-id="detail-filter-edition"]),
  #detail-filter-toolbar.detail-toolbar-goods .detail-toolbar-primary > :is(#detail-filter-owned,.pretty-select-wrap[data-select-id="detail-filter-owned"]) {
    order: 1;
    flex: 1 1 0%;
    width: 0 !important;
    min-width: 0;
    max-width: none;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort {
    order: 2;
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
  }
  /* Ngắt hàng cố định, không phụ thuộc số nút mà tài khoản được phép thấy. */
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods)::before {
    content: "";
    display: block;
    order: 3;
    flex: 0 0 100%;
    height: 0;
    margin-bottom: 8px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-primary > .detail-toolbar-search {
    order: 4;
    flex: 1 1 42px;
    min-width: 0;
    width: auto;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher {
    order: 5;
    flex: 0 0 auto;
    justify-self: auto;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot {
    order: 6;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn:not(.hidden) {
    order: 7;
    flex: 0 0 auto;
    margin: 0;
  }
  #detail-filter-toolbar.detail-toolbar-volumes #volume-part-filter-wrap {
    order: 8;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) :is(.pretty-select-wrap,.pretty-select-trigger,.pretty-select-label) {
    min-width: 0;
    max-width: 100%;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .pretty-select-trigger {
    width: 100%;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .pretty-select-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (orientation: portrait) and (max-width: 380px) {
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) {
    column-gap: 4px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher {
    padding: 2px;
    gap: 0;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher > button {
    width: 22px;
    flex-basis: 22px;
    height: 27px;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn:not(.hidden),
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn:not(.hidden) {
    width: 32px;
    height: 36px;
    min-width: 0;
    padding: 0;
  }
}

/* v660 — Thanh điều khiển một hàng trong giao diện NGANG.
   Các nút vẫn nằm đúng chỗ DOM gốc. display:contents chỉ trải phẳng
   2 nhóm công cụ vào một CSS grid; Part pills vẫn là hàng độc lập.
   Giao diện DỌC giữ nguyên bố cục hai hàng v652. */
@media (orientation: landscape) {
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) {
    display: grid;
    align-items: center;
    gap: 8px;
    grid-template-columns: minmax(90px,1.5fr) minmax(105px,1fr) minmax(105px,1fr) auto auto auto;
  }
  #detail-filter-toolbar.detail-toolbar-goods {
    grid-template-columns: minmax(90px,1.5fr) minmax(105px,1fr) minmax(105px,1fr) auto auto;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) > .detail-toolbar-primary,
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) > .detail-toolbar-actions,
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort-and-views {
    display: contents;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-primary > .detail-toolbar-search {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-search > input {
    width: 100%;
    min-width: 0;
    height: 38px;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-primary > :is(#detail-filter-edition,.pretty-select-wrap[data-select-id="detail-filter-edition"]),
  #detail-filter-toolbar.detail-toolbar-goods .detail-toolbar-primary > :is(#detail-filter-owned,.pretty-select-wrap[data-select-id="detail-filter-owned"]) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100% !important;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-sort {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    width: 100%;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    flex-wrap: nowrap;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot {
    display: flex;
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    align-items: center;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn:not(.hidden) {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    justify-content: center;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn:not(.hidden) {
    grid-column: 6;
    grid-row: 1;
    justify-self: end;
  }
  #detail-filter-toolbar.detail-toolbar-goods #detail-add-btn:not(.hidden) {
    grid-column: 5;
  }
  #detail-filter-toolbar.detail-toolbar-volumes #volume-part-filter-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) :is(.pretty-select-wrap,.pretty-select-trigger,.pretty-select-label) {
    min-width: 0;
    max-width: 100%;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .pretty-select-trigger {
    height: 38px;
    width: 100%;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .pretty-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* Điện thoại nằm ngang: vẫn một hàng, nhưng nút Thêm / Quản lý phần
   dùng biểu tượng có aria-label để không ép mất chỗ ô tìm/lọc. */
@media (orientation: landscape) and (max-width: 780px) {
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) {
    column-gap: 5px;
    grid-template-columns: minmax(80px,1.3fr) minmax(90px,1fr) minmax(90px,1fr) auto 34px 34px;
  }
  #detail-filter-toolbar.detail-toolbar-goods {
    grid-template-columns: minmax(80px,1.3fr) minmax(90px,1fr) minmax(90px,1fr) auto 34px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-toolbar-search > input {
    font-size: 11px;
    padding-right: 5px;
    text-overflow: ellipsis;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .pretty-select-trigger {
    font-size: 11px;
    padding: 5px 6px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher {
    padding: 3px;
    gap: 1px;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) .detail-view-switcher > button {
    width: 25px;
    flex-basis: 25px;
    height: 28px;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn:not(.hidden) {
    width: 34px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
    flex: 0 0 34px;
  }
  #detail-filter-toolbar.detail-toolbar-volumes .detail-toolbar-manage-slot > .volume-part-manage-btn span {
    display: none;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn:not(.hidden) {
    width: 34px;
    height: 36px;
    min-width: 0;
    padding: 0;
    justify-content: center;
  }
  #detail-filter-toolbar:is(.detail-toolbar-volumes,.detail-toolbar-goods) #detail-add-btn .detail-add-caption {
    display: none;
  }
}

#volume-part-filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding-top: 2px;
}

#volume-part-filter-wrap.hidden {
  display: none!important;
}

#volume-part-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 1px 1px 3px;
}

.volume-part-tab {
  flex: 0 0 auto;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(248,250,252,.82);
  color: #64748b;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  transition: .16s ease;
}

.volume-part-tab:hover {
  border-color: #818cf8;
  color: #4f46e5;
  background: #eef2ff;
}

.volume-part-tab.is-active {
  color: #fff;
  border-color: #4f46e5;
  background: #4f46e5;
  box-shadow: 0 4px 12px rgba(79,70,229,.18);
}

.volume-part-manage-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(99,102,241,.24);
  background: rgba(99,102,241,.08);
  color: #4f46e5;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.volume-part-heading {
  grid-column: 1 / -1 !important;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(99,102,241,.16);
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(99,102,241,.09),rgba(139,92,246,.04));
  color: #4338ca;
}

.volume-part-heading:first-child {
  margin-top: 0;
}

.volume-part-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.volume-part-heading span {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--ui-legacy-secondary);
  font-weight: 750;
}

.volume-part-unassigned {
  border-color: rgba(245,158,11,.22);
  background: rgba(245,158,11,.07);
  color: #b45309;
}

/* Ô Phần truyện trong editor */

.volume-part-field label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: #4b5563;
}

.volume-part-select {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

/* Manager */

#volume-parts-manager-modal {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(2,6,23,.58);
}

#volume-parts-manager-modal.hidden {
  display: none!important;
}

.volume-parts-manager-shell {
  width: min(880px,100%);
  max-height: min(88vh,900px);
  overflow: auto;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 24px 70px rgba(2,6,23,.30);
}

.volume-parts-manager-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #e5e7eb;
  backdrop-filter: blur(12px);
}

.volume-parts-manager-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #312e81;
}

.volume-parts-manager-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.volume-parts-note {
  padding: 10px 12px;
  border: 1px solid rgba(99,102,241,.16);
  border-radius: 11px;
  background: #f5f3ff;
  color: #5b21b6;
  font-size: 12px;
  line-height: 1.5;
}

.volume-parts-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.volume-part-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 120px 36px;
  gap: 8px;
  align-items: center;
}

.volume-part-row input {
  min-width: 0;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  font-size: 13px;
}

.volume-part-row button,
.volume-parts-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  color: #64748b;
  background: #fff;
}

.volume-part-row button:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff1f2;
}

.volume-parts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.volume-parts-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #475569;
}

.volume-parts-actions .is-primary {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

.volume-parts-assign-head {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) minmax(130px,190px);
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  font-size: 10px;
  font-weight: 850;
  color: var(--ui-legacy-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

#volume-parts-assignment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.volume-part-assignment-row {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) minmax(130px,190px);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}

.volume-part-assignment-copy {
  min-width: 0;
}

.volume-part-assignment-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #1f2937;
}

.volume-part-assignment-copy small {
  display: block;
  margin-top: 2px;
  color: var(--ui-legacy-caption);
  font-size: 10px;
}

.volume-part-assignment-row select,
#volume-parts-bulk-target {
  min-width: 0;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.volume-parts-bulk {
  display: grid;
  grid-template-columns: minmax(150px,220px) auto;
  gap: 8px;
  align-items: center;
}

.volume-parts-manager-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(255,255,255,.95);
  border-top: 1px solid #e5e7eb;
  backdrop-filter: blur(12px);
}

.volume-parts-manager-footer button {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  border: 1px solid #d1d5db;
}

.volume-parts-save {
  color: #fff;
  background: #4f46e5;
  border-color: #4f46e5!important;
}

/* Missing labels with part name */

.missing-part-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(244,63,94,.20);
  background: rgba(244,63,94,.08);
  color: #be123c;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode #volume-part-filter-wrap .volume-part-tab {
  background: rgba(30,41,59,.75);
  border-color: rgba(148,163,184,.20);
  color: #cbd5e1;
}

body.dark-mode #volume-part-filter-wrap .volume-part-tab.is-active {
  color: #fff;
  background: #6366f1;
  border-color: #818cf8;
}

body.dark-mode .volume-part-manage-btn {
  color: #c7d2fe;
  background: rgba(99,102,241,.14);
  border-color: rgba(129,140,248,.24);
}

body.dark-mode .volume-part-heading {
  color: #c7d2fe;
  background: rgba(99,102,241,.10);
  border-color: rgba(129,140,248,.18);
}

body.dark-mode .volume-part-heading span {
  color: #94a3b8;
}

body.dark-mode .volume-parts-manager-shell,
body.dark-mode .volume-parts-manager-head,
body.dark-mode .volume-parts-manager-footer {
  background: #111827;
  color: #e5e7eb;
  border-color: #334155;
}

body.dark-mode .volume-parts-manager-head h2 {
  color: #e0e7ff;
}

body.dark-mode .volume-parts-note {
  background: rgba(99,102,241,.12);
  border-color: rgba(129,140,248,.20);
  color: #c7d2fe;
}

body.dark-mode .volume-part-row input,
body.dark-mode .volume-part-assignment-row select,
body.dark-mode #volume-parts-bulk-target,
body.dark-mode .volume-part-select {
  background: #0f172a;
  color: #f8fafc;
  border-color: #475569;
}

body.dark-mode .volume-part-assignment-row {
  background: #172033;
  border-color: #334155;
}

body.dark-mode .volume-part-assignment-copy strong {
  color: #f8fafc;
}

body.dark-mode .volume-parts-actions button,
body.dark-mode .volume-part-row button {
  background: #172033;
  border-color: #334155;
  color: #cbd5e1;
}

@media (max-width:640px){
  #volume-part-filter-wrap {
    align-items: stretch;
    flex-direction: column;
  }
  .volume-parts-manager-shell .volume-part-manage-btn {
    align-self: flex-start;
  }
  .volume-part-row {
    grid-template-columns: minmax(0,1fr) 92px 34px;
  }

  /* Mobile dọc: checkbox + thông tin tập + chọn phần luôn cùng một hàng. */
  .volume-parts-assign-head,
  .volume-part-assignment-row {
    grid-template-columns: 24px minmax(0,1fr) minmax(108px,128px);
    gap: 7px;
    align-items: center;
  }
  .volume-parts-assign-head {
    padding-inline: 8px;
  }
  .volume-parts-assign-head > :last-child {
    display: block;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
  }
  .volume-part-assignment-row {
    padding: 8px;
  }
  .volume-part-assignment-row select {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 38px;
    padding: 7px 26px 7px 8px;
    box-sizing: border-box;
    font-size: 11px;
    line-height: 1.2;
  }
  .volume-part-assignment-copy {
    min-width: 0;
  }
  .volume-part-assignment-copy strong,
  .volume-part-assignment-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .volume-parts-bulk {
    grid-template-columns: 1fr;
  }
}

@media (max-width:380px){
  .volume-parts-assign-head,
  .volume-part-assignment-row {
    grid-template-columns: 22px minmax(0,1fr) minmax(96px,112px);
    gap: 6px;
  }
  .volume-part-assignment-row {
    padding: 7px;
  }
  .volume-part-assignment-row select {
    min-height: 36px;
    padding: 6px 24px 6px 7px;
    font-size: 10.5px;
  }
}

#volume-parts-manager-modal {
  overflow: hidden !important;
}

#volume-parts-manager-modal .volume-parts-manager-shell {
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  width: min(880px,100%) !important;
  height: min(88vh,900px) !important;
  max-height: min(88vh,900px) !important;
  overflow: hidden !important;
}

/* Header không cần sticky vì shell đã chia vùng cố định. */

#volume-parts-manager-modal .volume-parts-manager-head {
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
}

/* Chỉ phần body được cuộn. Nhờ vậy hàng cuối luôn nằm TRÊN footer. */

#volume-parts-manager-modal .volume-parts-manager-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 22px !important;
  scroll-padding-bottom: 22px !important;
}

/* Footer là một hàng layout thật, không phủ lên nội dung nữa. */

#volume-parts-manager-modal .volume-parts-manager-footer {
  position: relative !important;
  bottom: auto !important;
  z-index: 4 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  box-shadow: 0 -8px 22px rgba(15,23,42,.07) !important;
}

/* Hàng gán phần cuối cùng luôn chừa một chút khoảng thở. */

#volume-parts-manager-modal #volume-parts-assignment-list {
  padding-bottom: 4px !important;
}

#volume-parts-manager-modal #volume-parts-assignment-list > .volume-part-assignment-row:last-child {
  margin-bottom: 4px !important;
}

/* Mobile / cửa sổ thấp: popup dùng gần hết chiều cao nhưng vẫn không bị footer đè. */

@media (max-width:640px), (max-height:720px){
  #volume-parts-manager-modal {
    padding: 8px !important;
    align-items: center !important;
  }
  #volume-parts-manager-modal .volume-parts-manager-shell {
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }
  #volume-parts-manager-modal .volume-parts-manager-body {
    padding: 12px 12px 18px !important;
  }
  #volume-parts-manager-modal .volume-parts-manager-head {
    padding: 13px 14px !important;
  }
  #volume-parts-manager-modal .volume-parts-manager-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

body.dark-mode #volume-parts-manager-modal .volume-parts-manager-footer {
  box-shadow: 0 -8px 24px rgba(0,0,0,.28) !important;
}

.volume-part-tab-short {
  display: none;
}


html.tt-user-scrolling {
  --tt-animation-state: paused !important;
}


/* Cân lại popup tập: phần giá tập chuyển sang cột phải dưới phụ kiện */

/* Lịch phát hành: gom thông tin preorder lên ảnh bìa */
.release-book-cover {
  overflow: hidden;
}

.release-event-badges {
  max-width: calc(100% - 18px);
}

.release-event-badge.is-preorder {
  max-width: 100%;
}

.release-cover-preorder-action {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: calc(100% - 16px);
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(217,119,6,.96);
  box-shadow: 0 5px 14px rgba(180,83,9,.22);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .16s ease,filter .16s ease,opacity .16s ease;
}

.release-cover-preorder-action.is-link {
  cursor: pointer;
  pointer-events: auto;
}

.release-cover-preorder-action.is-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.release-cover-preorder-action.is-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.96);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .release-cover-preorder-action {
    right: 6px;
    bottom: 6px;
    padding: 3px 5px;
    font-size: 8px;
    gap: 3px;
    max-width: calc(100% - 12px);
  }
}

/* Regression guard: Giá thị trường + Bán tập lẻ luôn cùng một hàng.
   Giữ cả class bố cục ổn định và class icon để thay đổi nút không làm mất grid. */

/* Lịch phát hành: đồng bộ toàn bộ tag trên ảnh bìa theo hệ kích thước/tag của "Chưa phát hành" */
.release-book-cover .release-event-badges.release-event-badges--bottom {
  position: absolute;
  top: auto;
  left: auto;
  right: 8px;
  bottom: 36px;
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  max-width: calc(100% - 16px);
  pointer-events: none;
}

.release-book-cover .release-event-badges.release-event-badges--bottom .release-event-badge.is-preorder,
.release-book-cover .release-cover-preorder-action {
  max-width: 100%;
  min-height: 0;
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.release-book-cover .release-event-badges.release-event-badges--bottom .release-event-badge.is-preorder {
  box-shadow: 0 5px 14px rgba(180,83,9,.22);
  background: rgba(217,119,6,.96);
}

.release-book-cover .release-cover-preorder-action {
  right: 8px;
  bottom: 8px;
  z-index: 6;
  gap: 4px;
  max-width: calc(100% - 16px);
  box-shadow: 0 5px 14px rgba(180,83,9,.22);
  background: rgba(217,119,6,.96);
}

@media (max-width: 640px) {
  .release-book-cover .release-event-badges.release-event-badges--bottom {
    right: 6px;
    bottom: 28px;
    max-width: calc(100% - 12px);
  }

  .release-book-cover .release-event-badges.release-event-badges--bottom .release-event-badge.is-preorder,
  .release-book-cover .release-cover-preorder-action {
    padding: 3px 5px;
    font-size: 8px;
    gap: 3px;
  }

  .release-book-cover .release-cover-preorder-action {
    right: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
  }
}

/* Release card title typography: match Tủ Truyện exactly, including perceived weight/color */
html[data-theme="light"] body #release-view#release-view .release-book-title,
body:not(.dark-mode) #release-view#release-view .release-book-title {
  color: #263244 !important;
  font-weight: 760 !important;
}

body.dark-mode #release-view#release-view .release-book-title {
  color: #f8fafc !important;
}

#release-view .release-book-title > .entity-link {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

/* Lịch phát hành: đồng bộ typography giá với giá nổi bật trên card Tủ Truyện.
   Giữ nguyên màu/opacity riêng của Lịch phát hành. */
#release-view .release-book-price {
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: normal !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

@media (orientation: portrait) and (max-width: 640px) {
  #release-view .release-book-price {
    font-size: clamp(12.5px, 3.5vw, 15px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  #release-view .release-book-price {
    font-size: clamp(11px, 1.35vw, 13px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }
}

@media (min-width: 901px) {
  #release-view .release-book-price {
    font-size: clamp(14px, .75vw, 17px) !important;
    line-height: normal !important;
    font-weight: 850 !important;
  }
}

@media (min-width: 1800px) {
  #release-view .release-book-price {
    font-size: 15px !important;
  }
}


/* Tổng tiền tháng trên thanh Lịch phát hành */
@media (min-width: 641px) and (max-width: 980px) {
  .release-month-total {
    min-width: 92px;
    max-width: 126px;
    padding-inline: 8px;
    font-size: 12px;
  }
}


/* Đồng bộ typography của toàn bộ control trên thanh Lịch phát hành.
   Dùng chung một token để Tổng không nhìn to/đậm hơn Tháng, Năm và NXB. */
#release-view .release-period-filter .pretty-select-trigger,
#release-view .release-publisher-wrap.pretty-select-host .pretty-select-trigger,
#release-view .release-month-total {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}

#release-view .release-month-total-label,
#release-view .release-month-total-value {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

@media (max-width: 640px) and (orientation: portrait) {
  #release-view .release-period-filter .pretty-select-trigger,
  #release-view .release-publisher-wrap.pretty-select-host .pretty-select-trigger,
  #release-view .release-month-total {
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 370px) and (orientation: portrait) {
  #release-view .release-period-filter .pretty-select-trigger,
  #release-view .release-publisher-wrap.pretty-select-host .pretty-select-trigger,
  #release-view .release-month-total {
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }
}

/* ===== Wishlist popup actions + neon card sync ===== */
.wishlist-action-btn {
  color: var(--ui-muted, #64748b) !important;
}
.wishlist-action-btn:hover {
  color: #ec4899 !important;
  border-color: rgba(236, 72, 153, .28) !important;
  background: rgba(236, 72, 153, .08) !important;
}
.wishlist-action-btn.is-active {
  color: #ec4899 !important;
  border-color: rgba(236, 72, 153, .34) !important;
  background: linear-gradient(135deg, rgba(236,72,153,.13), rgba(168,85,247,.10)) !important;
  box-shadow: 0 0 0 1px rgba(236,72,153,.04), 0 0 18px rgba(236,72,153,.13) !important;
}
body.dark-mode .wishlist-action-btn.is-active {
  color: #f9a8d4 !important;
  border-color: rgba(249,168,212,.34) !important;
  background: linear-gradient(135deg, rgba(190,24,93,.20), rgba(126,34,206,.16)) !important;
}

@property --wishlist-neon-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.wishlist-neon-card {
  position: relative !important;
  isolation: isolate;
}

.wishlist-neon-runner {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  border-radius: inherit;
  padding: 2px;
  background:
    conic-gradient(
      from var(--wishlist-neon-angle),
      transparent 0deg 28deg,
      #22d3ee 42deg,
      #8b5cf6 65deg,
      #ec4899 88deg,
      transparent 112deg 205deg,
      #f59e0b 228deg,
      #ec4899 250deg,
      #8b5cf6 272deg,
      transparent 298deg 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: wishlist-neon-run 2.8s linear infinite;
  filter:
    drop-shadow(0 0 3px rgba(34, 211, 238, .75))
    drop-shadow(0 0 6px rgba(236, 72, 153, .50));
}

@keyframes wishlist-neon-run {
  to { --wishlist-neon-angle: 360deg; }
}


/* Những card có sẵn overflow vẫn giữ hình dạng; neon chạy trong mép card. */
.manga-shelf-card.wishlist-neon-card, .volume-grid-card.wishlist-neon-card, .volume-list-card.wishlist-neon-card, .goods-detail-card.wishlist-neon-card, .selling-card.wishlist-neon-card, .release-book-card.wishlist-neon-card, .vol-info-good-card.wishlist-neon-card, .vault-book-card.wishlist-neon-card, .global-search-result.wishlist-neon-card {
  border-color: rgba(236, 72, 153, .32) !important;
}


@media (prefers-reduced-motion: reduce) {
  .wishlist-neon-runner {
    animation: none !important;
  }
  .wishlist-neon-runner {
    --wishlist-neon-angle: 40deg;
  }
}

/* Wishlist filter cạnh nút Lưới/Danh sách ngoài Tủ Truyện: dùng đúng nhịp nút hiển thị. */
#shelf-wishlist-filter.text-pink-500 i {
  filter: drop-shadow(0 0 5px rgba(236,72,153,.28));
}
body.dark-mode #shelf-wishlist-filter.bg-white {
  background: rgba(30,41,59,.92) !important;
  color: #f472b6 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}


/* Tìm kiếm trên iPhone: neo ô nhập ở đầu vùng nhìn thấy, kể cả khi bàn phím mở. */
@media (max-width: 760px) {
  #global-search-modal:not(.hidden) {
    position: fixed !important;
    inset: auto 0 auto 0 !important;
    top: var(--tt-search-viewport-top, 0px) !important;
    height: var(--tt-search-viewport-height, 100dvh) !important;
    max-height: var(--tt-search-viewport-height, 100dvh) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }
  /* Trạng thái rỗng không chiếm nửa màn hình: chỉ cao vừa ô tìm kiếm + gợi ý. */
  #global-search-modal:not(.hidden).is-empty-search {
    height: auto !important;
    max-height: none !important;
    bottom: auto !important;
    padding-bottom: 0 !important;
  }
  #global-search-modal.is-empty-search .global-search-card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  #global-search-modal.is-empty-search .global-search-results {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: 8px 12px 12px !important;
    overflow: visible !important;
  }
  #global-search-modal.is-empty-search .global-search-state {
    min-height: 0 !important;
    gap: 5px !important;
    padding: 4px 8px 6px !important;
  }
  #global-search-modal.is-empty-search .global-search-state i {
    font-size: 20px !important;
  }
  #global-search-modal.is-empty-search .global-search-state span {
    line-height: 1.35 !important;
  }
  #global-search-modal .global-search-backdrop {
    position: absolute !important;
    inset: 0 !important;
  }
  #global-search-modal .global-search-card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  #global-search-modal .global-search-head {
    flex: 0 0 auto !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  #global-search-modal #global-search-input {
    min-height: 46px !important;
    font-size: 16px !important; /* iOS không tự phóng to trang khi nhập */
  }
  #global-search-modal .global-search-results {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  #global-search-modal .global-search-state {
    min-height: 120px !important;
  }
  #global-search-modal .global-search-footer {
    display: none !important; /* nhường chiều cao cho kết quả trên điện thoại */
  }
}

/* ===== Trang chi tiết: gom các thao tác vào một menu duy nhất ===== */
#detail-view .detail-actionbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  overflow: visible !important;
}
#detail-view .detail-actionbar > button:first-child {
  position: relative;
  flex: 0 0 40px;
  z-index: 2;
}
#detail-view .detail-action-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  margin-left: auto;
  z-index: 3;
}
#detail-view #detail-action-menu-toggle {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
}
#detail-view .detail-action-menu-panel {
  /* Fixed anchor: the toggle stays put; the panel unfolds leftwards beside it. */
  position: absolute !important;
  right: calc(100% + 7px) !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  inset-inline-start: auto !important;
  transform: translateY(-50%) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(calc(100vw - 112px), 440px) !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#detail-view .detail-action-menu-panel.hidden { display: none !important; }
#detail-view .detail-action-menu-panel .detail-menu-item {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 43px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding: 10px 11px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
  font: inherit !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-indent: 0 !important;
  white-space: normal !important;
  transform: none !important;
  cursor: pointer;
}
#detail-view .detail-action-menu-panel .detail-menu-item i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: #64748b !important;
}
#detail-view .detail-action-menu-panel .detail-menu-item-label {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 650;
}
#detail-view .detail-action-menu-panel .detail-menu-item:hover,
#detail-view .detail-action-menu-panel .detail-menu-item:focus-visible {
  background: rgba(99,102,241,.10) !important;
  border-color: rgba(99,102,241,.13) !important;
  color: #4338ca !important;
  outline: none;
}
#detail-view .detail-action-menu-panel .detail-menu-item:hover i,
#detail-view .detail-action-menu-panel .detail-menu-item:focus-visible i {
  color: #4f46e5 !important;
}
#detail-view .detail-action-menu-panel .detail-menu-item-danger,
#detail-view .detail-action-menu-panel .detail-menu-item-danger i { color: #be4560 !important; }
#detail-view .detail-action-menu-panel .detail-menu-item-danger:hover {
  background: rgba(244,63,94,.09) !important;
  border-color: rgba(244,63,94,.12) !important;
  color: #9f1239 !important;
}
#detail-view .detail-action-menu-panel .detail-menu-divider {
  height: 1px;
  margin: 5px 8px;
  background: rgba(148,163,184,.25);
}
body.dark-mode #detail-view .detail-action-menu-panel .detail-menu-item { color: #e2e8f0 !important; }
body.dark-mode #detail-view .detail-action-menu-panel .detail-menu-item i { color: #cbd5e1 !important; }
body.dark-mode #detail-view .detail-action-menu-panel .detail-menu-item:hover,
body.dark-mode #detail-view .detail-action-menu-panel .detail-menu-item:focus-visible {
  background: rgba(129,140,248,.15) !important;
  border-color: rgba(129,140,248,.2) !important;
  color: #c7d2fe !important;
}
body.dark-mode #detail-view .detail-action-menu-panel .detail-menu-item:hover i,
body.dark-mode #detail-view .detail-action-menu-panel .detail-menu-item:focus-visible i { color: #c7d2fe !important; }
@media (max-width: 640px) {
  #detail-view #detail-action-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex-basis: 38px !important;
  }
  #detail-view .detail-action-menu-panel .detail-menu-item { min-height: 44px !important; }
}



/* MOBILE POPUP SAFETY PATCH v1
   Keep every modal inside the visible dynamic viewport; allow the modal body to scroll
   instead of letting tall content cover the close/actions or fall behind browser chrome. */
@media (max-width: 640px) {
  :root { --popup-mobile-vh: 100dvh; }
  /* Dùng cùng font-size nguồn của ô nhập editor, tránh Safari tự zoom khi focus. */
  :is(#modal, #volume-modal, #goods-modal).collection-editor { --editor-field-font-size: 16px; }
  #vol-detail-modal,
  #goods-detail-modal,
  #volume-modal,
  #goods-modal,
  #manga-modal,
  #auth-modal,
  #contact-modal,
  #edition-manager-modal,
  #batch-import-modal,
  #global-search-modal,
  #qr-share-modal,
  #share-card-modal,
  #update-backup-prompt-modal,
  #volume-parts-manager-modal,
  #volume-variant-mini-modal,
  #year-review-modal {
    box-sizing: border-box !important;
    max-height: 100dvh !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
  }

  #vol-detail-modal > div:first-child,
  #goods-detail-modal > div:first-child,
  #volume-modal > div:first-child,
  #goods-modal > div:first-child,
  #manga-modal > div:first-child,
  #auth-modal > div:first-child,
  #contact-modal > div:first-child,
  #edition-manager-modal > div:first-child,
  #batch-import-modal > div:first-child,
  #global-search-modal > div:first-child,
  #qr-share-modal > div:first-child,
  #share-card-modal > div:first-child,
  #update-backup-prompt-modal > div:first-child,
  #volume-parts-manager-modal > div:first-child,
  #volume-variant-mini-modal > div:first-child,
  #year-review-modal > div:first-child {
    box-sizing: border-box !important;
    width: min(100%, 100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Large artwork must not push popup controls below the visible screen. */
  #goods-detail-image-stage {
    height: min(40dvh, 340px) !important;
    min-height: 170px !important;
    max-height: 340px !important;
  }
  #vol-detail-image-stage {
    max-height: 40dvh !important;
    min-height: 0 !important;
  }
  #goods-detail-image-stage img,
  #vol-detail-image-stage img,
  #goods-detail-img,
  #vol-info-cover {
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* Dialogs and menus with content-first layouts should shrink rather than overflow sideways. */
  #missing-editions-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  .missing-editions-list { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Older Safari versions do not support dvh; use vh as a fallback. */
@supports not (height: 100dvh) {
  @media (max-width: 640px) {
    #vol-detail-modal,
    #goods-detail-modal,
    #volume-modal,
    #goods-modal,
    #manga-modal,
    #auth-modal,
    #contact-modal,
    #edition-manager-modal,
    #batch-import-modal,
    #global-search-modal,
    #qr-share-modal,
    #share-card-modal,
    #update-backup-prompt-modal,
    #volume-parts-manager-modal,
    #volume-variant-mini-modal,
    #year-review-modal { max-height: 100vh !important; }
    #vol-detail-modal > div:first-child,
    #goods-detail-modal > div:first-child,
    #volume-modal > div:first-child,
    #goods-modal > div:first-child,
    #manga-modal > div:first-child,
    #auth-modal > div:first-child,
    #contact-modal > div:first-child,
    #edition-manager-modal > div:first-child,
    #batch-import-modal > div:first-child,
    #global-search-modal > div:first-child,
    #qr-share-modal > div:first-child,
    #share-card-modal > div:first-child,
    #update-backup-prompt-modal > div:first-child,
    #volume-parts-manager-modal > div:first-child,
    #volume-variant-mini-modal > div:first-child,
    #year-review-modal > div:first-child {
      max-height: calc(100vh - 32px) !important;
    }
  }
}

/* ===== Detail accessories: independent list/grid modes ===== */
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
#detail-view #goods-grid.goods-list-mode {
  grid-template-columns: minmax(0, 1fr);
}
#detail-view #goods-grid .goods-grid-card {
  min-width: 0;
  align-items: stretch;
  cursor: pointer;
}
#detail-view #goods-grid .goods-grid-cover {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 2 / 3;
}
#detail-view #goods-grid .goods-grid-cover > img {
  display: block;
  width: 100%;
  height: 100%;
}
#detail-view #goods-grid .goods-grid-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
#detail-view #goods-grid .goods-grid-name {
  min-width: 0;
  margin: 0;
  color: var(--text-primary, #111827);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#detail-view #goods-grid .goods-grid-linked-volumes {
  min-width: 0;
  color: var(--text-secondary, #64748b);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#detail-view #goods-grid .goods-grid-linked-volumes .entity-linked-volumes,
#detail-view #goods-grid .goods-grid-linked-volumes .linked-volume-range {
  max-width: 100%;
  white-space: normal;
}
#detail-view #goods-grid .goods-grid-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
}
#detail-view #goods-grid .goods-grid-sale-price,
#detail-view #goods-grid .goods-grid-base-only {
  color: #d97706;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  margin: 0;
  overflow-wrap: anywhere;
}
#detail-view #goods-grid .goods-grid-base-price {
  color: var(--ui-legacy-caption);
  font-size: 10px;
  line-height: 1.35;
  text-decoration: line-through;
  overflow-wrap: anywhere;
}
#detail-view #goods-grid .goods-grid-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
#detail-view #goods-grid .goods-grid-limited-badge {
  padding: 2px 5px;
  border-radius: 5px;
  background: #7c3aed;
  color: #fff;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 900;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
body.dark-mode #detail-view #goods-grid .goods-grid-name {
  color: #f1f5f9;
}
body.dark-mode #detail-view #goods-grid .goods-grid-linked-volumes {
  color: #94a3b8;
}
@media (max-width: 380px) {
  #detail-view #goods-grid.goods-grid-mode {
    gap: 8px;
  }
  #detail-view #goods-grid .goods-grid-card {
    padding: 6px;
  }
  #detail-view #goods-grid .goods-grid-name {
    font-size: 11px;
  }
}


/* ===== Final parity: Phụ kiện lưới dùng đúng số cột Tập truyện ===== */
#detail-view #goods-grid.goods-grid-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  align-items: start !important;
}
@media (min-width: 640px) {
  #detail-view #goods-grid.goods-grid-mode {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
}
@media (min-width: 768px) {
  #detail-view #goods-grid.goods-grid-mode {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 901px) and (max-width: 1799px) {
  #detail-view #goods-grid.goods-grid-mode {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
}
@media (min-width: 1800px) {
  #detail-view #goods-grid.goods-grid-mode {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
  }
}
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0.5rem !important;
  align-items: center !important;
}
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-cover {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  background: rgba(148, 163, 184, 0.10) !important;
}
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-cover > .volume-cover-stack {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-cover > .volume-cover-stack > .volume-auto-cover {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-meta {
  width: 100% !important;
  text-align: center !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-name,
#detail-view #goods-grid.goods-grid-mode .goods-grid-linked-volumes {
  width: 100% !important;
  text-align: center !important;
}
@media (max-width: 380px) {
  #detail-view #goods-grid.goods-grid-mode > .goods-grid-card {
    padding: 0.5rem !important;
  }
}


/* ===== Phụ kiện lưới: tên luôn nằm trên một hàng ===== */
#detail-view #goods-grid.goods-grid-mode .goods-grid-name {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.35 !important;
  height: 1.35em !important;
  max-height: 1.35em !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-name > *,
#detail-view #goods-grid.goods-grid-mode .goods-grid-name a,
#detail-view #goods-grid.goods-grid-mode .goods-grid-name .entity-link {
  display: inline !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: top !important;
}

/* ===== Phụ kiện lưới: tag Giới hạn ở góc trên trái, nhãn tập ở góc dưới phải ===== */
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-cover {
  position: relative !important;
  overflow: hidden !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-limited-badge {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: calc(100% - 8px) !important;
  white-space: nowrap !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-volume-label {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  left: auto !important;
  z-index: 11 !important;
  display: block !important;
  width: max-content !important;
  max-width: calc(100% - 8px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 3px 6px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 6px !important;
  background: rgba(15,23,42,.58) !important;
  color: #fff !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.025) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.88) !important;
  backdrop-filter: blur(8px) saturate(.88) !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-volume-label a,
#detail-view #goods-grid.goods-grid-mode .goods-grid-volume-label .goods-volume-range-summary,
#detail-view #goods-grid.goods-grid-mode .goods-grid-volume-label .goods-combo-prefix {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-volume-label .entity-link-separator {
  color: rgba(255,255,255,.78) !important;
}
@media (max-width: 640px) {
  #detail-view #goods-grid.goods-grid-mode .goods-grid-volume-label {
    right: 3px !important;
    bottom: 3px !important;
    max-width: calc(100% - 6px) !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
  }
  #detail-view #goods-grid.goods-grid-mode .goods-grid-limited-badge {
    top: 3px !important;
    left: 3px !important;
    font-size: 8px !important;
  }
}

/* ===== Phụ kiện lưới: giữ chiều cao card đồng nhất kể cả khi không có giá ===== */
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-meta {
  min-height: 56px !important;
  box-sizing: border-box !important;
  flex: 0 0 56px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 0 !important;
  padding-block: 0 !important;
}
/* Keep the accessory title and price group vertically centered in the reserved area. */
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-meta > .goods-grid-name,
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-meta > .goods-grid-linked-volumes,
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-meta > .goods-grid-price-row {
  flex: 0 0 auto !important;
  margin-block: 0 !important;
}
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-meta > .goods-grid-price-row {
  min-height: 1.35em !important;
  align-items: center !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-linked-volumes {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.35 !important;
  height: 1.35em !important;
  max-height: 1.35em !important;
}
#detail-view #goods-grid.goods-grid-mode .goods-grid-price-row {
  min-height: 1.35em !important;
  flex: 0 0 auto !important;
}


/* ===== Phụ kiện lưới: ảnh khác tỉ lệ được phóng phủ kín khung vuông ===== */
#detail-view #goods-grid.goods-grid-mode > .goods-grid-card > .goods-grid-cover > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* Popup Tập: gom các nút chức năng vào menu trên mobile dọc בלבד. */
#vol-detail-modal .vol-detail-action-menu-panel {
  display: flex;
}
#vol-detail-modal .vol-detail-action-menu-toggle {
  display: none !important;
}
#vol-detail-modal .vol-detail-action-menu-panel > button {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 13px !important;
  border: 1px solid rgba(148,163,184,.38) !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: #718096 !important;
}
#vol-detail-modal .vol-detail-action-menu-panel > button i {
  font-size: 14px !important;
  line-height: 1 !important;
}
#vol-detail-modal .vol-detail-action-menu-panel > button.entity-action-danger,
#vol-detail-modal .vol-detail-action-menu-panel > button[id*="delete" i] {
  color: #b05269 !important;
}
#vol-detail-modal .vol-detail-action-menu-panel > button.entity-action-danger i,
#vol-detail-modal .vol-detail-action-menu-panel > button[id*="delete" i] i {
  color: #b05269 !important;
}
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button {
  border-color: rgba(148,163,184,.34) !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button.entity-action-danger,
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button[id*="delete" i] {
  color: #f08aa1 !important;
}
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button.entity-action-danger i,
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button[id*="delete" i] i {
  color: #f08aa1 !important;
}

@media (max-width: 640px) and (orientation: portrait) {
  #vol-detail-modal .vol-detail-header-actions {
    gap: 8px !important;
  }
  #vol-detail-modal .vol-detail-action-menu-toggle:not(.hidden) {
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 50px !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 176px !important;
    max-width: min(220px, 68vw) !important;
    padding: 6px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 16px 40px rgba(15,23,42,.20) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
  }
  #vol-detail-modal .vol-detail-header-actions.vol-detail-actions-open .vol-detail-action-menu-panel {
    display: flex !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden) {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    text-align: left !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #475569 !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):hover,
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):active {
    background: rgba(99,102,241,.09) !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden) i {
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
  }
  #vol-detail-modal .vol-detail-action-label {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden).entity-action-danger,
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden)[id*="delete" i],
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden).entity-action-danger i,
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden)[id*="delete" i] i {
    color: #b05269 !important;
  }
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel {
    border-color: rgba(148,163,184,.28) !important;
    background: rgba(15,23,42,.97) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.42) !important;
  }
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden) {
    color: #e2e8f0 !important;
  }
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):hover,
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):active {
    background: rgba(129,140,248,.16) !important;
  }
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden).entity-action-danger,
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden)[id*="delete" i],
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden).entity-action-danger i,
  body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden)[id*="delete" i] i {
    color: #f08aa1 !important;
  }
  #vol-detail-modal #vol-info-manga-title {
    display: block !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}


/* FIX: popup tập — menu chức năng luôn nổi phía trên ảnh bìa trên mobile dọc.
   Đặt header vào stacking context cao hơn phần ảnh/nội dung bên dưới. */
@media (max-width: 640px) and (orientation: portrait) {
  #vol-detail-modal > div:first-child > .popup-unified-head {
    position: relative !important;
    z-index: 1200 !important;
    isolation: isolate !important;
  }
  #vol-detail-modal .vol-detail-header-actions {
    position: relative !important;
    z-index: 1201 !important;
    isolation: isolate !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel {
    z-index: 1202 !important;
  }
  #vol-detail-modal .vol-detail-layout {
    position: relative !important;
    z-index: 1 !important;
  }
}


/* ===== FIX v3: popup tập — ảnh phủ kín khung bo, viền luôn nổi trên ảnh ===== */
#vol-detail-modal #vol-detail-image-stage {
  position: relative !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
  contain: none !important;
  border: 1px solid rgba(148,163,184,.66) !important;
  background: rgba(148,163,184,.10) !important;
}
#vol-detail-modal #vol-detail-image-stage #vol-info-cover {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 1 !important;
}
/* A dedicated top frame keeps the rounded border visible even while the page-turn animation runs. */
#vol-detail-modal #vol-detail-image-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(148,163,184,.70) !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
}
body.dark-mode #vol-detail-modal #vol-detail-image-stage {
  border-color: rgba(203,213,225,.42) !important;
  background: rgba(15,23,42,.20) !important;
}
body.dark-mode #vol-detail-modal #vol-detail-image-stage::before {
  border-color: rgba(203,213,225,.48) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* Legacy liquid-glass control styling removed; canonical icon-action rules are defined at EOF. */

/* ===== FIX v4: menu chức năng popup Tập trên mọi giao diện, bung ngang về bên trái ===== */
#vol-detail-modal .vol-detail-header-actions {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  z-index: 1201 !important;
}
#vol-detail-modal .vol-detail-action-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  z-index: 1202 !important;
}
#vol-detail-modal .vol-detail-action-menu-toggle:not(.hidden) {
  display: inline-flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 13px !important;
}
#vol-detail-modal .vol-detail-action-menu-panel {
  display: none !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 8px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(72vw, 560px) !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index: 1203 !important;
}
#vol-detail-modal .vol-detail-header-actions.vol-detail-actions-open .vol-detail-action-menu-panel {
  display: flex !important;
}
#vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden) {
  display: inline-flex !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
#vol-detail-modal .vol-detail-action-label {
  display: none !important;
}
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (max-width: 640px) {
  #vol-detail-modal .vol-detail-action-menu-toggle:not(.hidden) {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex-basis: 38px !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel {
    max-width: calc(100vw - 118px) !important;
    gap: 5px !important;
    padding: 5px !important;
  }
  #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex-basis: 36px !important;
  }
}


/* ===== FIX v3: popup TẬP chỉ giữ khung Liquid Glass bên ngoài menu ===== */
/* Các nút bên trong để phẳng, không có viền/nền/đổ bóng riêng; đồng bộ menu BỘ TRUYỆN. */
#vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden) {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  outline: none !important;
}
#vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):hover,
#vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):focus-visible,
#vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):active {
  border-color: transparent !important;
  background: rgba(99,102,241,.10) !important;
  box-shadow: none !important;
}
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):hover,
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):focus-visible,
body.dark-mode #vol-detail-modal .vol-detail-action-menu-panel > button:not(.hidden):active {
  border-color: transparent !important;
  background: rgba(129,140,248,.16) !important;
  box-shadow: none !important;
}


/* ===== FIX v4: popup TẬP — clip ảnh theo đủ bốn góc bo của khung ===== */
/* Dùng clip-path bo góc ở chính khung để ảnh không thể lấn ra ngoài khi chuyển tập/lật trang. */
#vol-detail-modal #vol-detail-image-stage {
  overflow: hidden !important;
  border-radius: 0.75rem !important;
  clip-path: inset(0 round 0.75rem) !important;
  -webkit-clip-path: inset(0 round 0.75rem) !important;
}
#vol-detail-modal #vol-detail-image-stage #vol-info-cover {
  border-radius: 0.65rem !important;
  overflow: hidden !important;
}
#goods-detail-modal .goods-detail-action-menu-toggle:not(.hidden) {
  display: inline-flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 13px !important;
}
#goods-detail-modal .goods-detail-action-menu-panel {
  display: none !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 8px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(72vw, 560px) !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index: 1203 !important;
}
#goods-detail-modal .goods-detail-header-actions.goods-detail-actions-open .goods-detail-action-menu-panel {
  display: flex !important;
}
#goods-detail-modal .goods-detail-action-menu-panel > button:not(.hidden) {
  display: inline-flex !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}
#goods-detail-modal .goods-detail-action-label {
  display: none !important;
}
body.dark-mode #goods-detail-modal .goods-detail-action-menu-panel {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (max-width: 640px) {
  #goods-detail-modal .goods-detail-action-menu-toggle:not(.hidden) {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex-basis: 38px !important;
  }
  #goods-detail-modal .goods-detail-action-menu-panel {
    max-width: calc(100vw - 118px) !important;
    gap: 5px !important;
    padding: 5px !important;
  }
  #goods-detail-modal .goods-detail-action-menu-panel > button:not(.hidden) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex-basis: 36px !important;
  }
}




/* Popup Phu kien: menu chuc nang + X tren header moi giao dien */
#goods-detail-modal .goods-detail-footer,#goods-detail-modal .goods-detail-mobile-footer-actions,#goods-detail-modal .goods-detail-mobile-close{display:none!important}
#goods-detail-modal .goods-detail-header>.entity-popup-actions,#goods-detail-modal .goods-detail-header-actions{display:flex!important;box-sizing:border-box!important;position:relative!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;flex-wrap:nowrap!important;gap:8px!important;min-width:0!important;max-width:none!important;margin:0!important;overflow:visible!important;z-index:1205!important}
#goods-detail-modal .goods-detail-action-menu{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;min-width:0!important;z-index:1206!important}
#goods-detail-modal .goods-detail-close{display:inline-flex!important;box-sizing:border-box!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;min-height:38px!important;max-height:38px!important;flex:0 0 38px!important;padding:0!important;margin:0!important;border-radius:13px!important;position:relative!important;z-index:1207!important}
#goods-detail-modal .goods-detail-header.popup-unified-head{position:relative!important;z-index:1205!important;isolation:isolate!important;overflow:visible!important}
@media(max-width:760px){#goods-detail-modal .goods-detail-header>.entity-popup-actions,#goods-detail-modal .goods-detail-header-actions{display:flex!important}#goods-detail-modal .goods-detail-footer{display:none!important}}
@media(max-width:640px){#goods-detail-modal .goods-detail-close{width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;min-height:38px!important;max-height:38px!important;flex-basis:38px!important}}


/* Legacy v537/v538 targeted button overrides removed after consolidation. */


/* =====================================================================
   TUTRUYEN v541 — AUTHORITATIVE ICON ACTION SYSTEM
   Old overlapping action skins were removed above. Layout/event behavior
   remains owned by the original components; this block owns visual skin.
   ===================================================================== */
:is(
  button.compact-icon-btn, button.release-icon-btn, button.entity-action-btn,
  button.detail-menu-item, button.edition-picker-action, button.image-source-btn,
  button.feature-modal-close, button.spent-eye-toggle, button.app-sidebar-item-icon-button,
  button#app-sidebar-close, button#app-sidebar-toggle, button#theme-toggle,
  button.app-header-logout, button.goods-detail-close, button.manga-editor-close,
  #detail-view .detail-view-header button[aria-label="Đóng"],
  #vol-detail-modal .vol-detail-header-actions > button[aria-label="Đóng"]
) {
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(148,163,184,.38) !important;
  border-radius: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
  cursor: pointer;
}
/* Action clusters are not pills; each button owns its own subtle frame. */
:is(.entity-popup-actions, #image-zoom-modal .entity-zoom-actions) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  min-width: 0;
}
:is(.entity-popup-actions, #image-zoom-modal .entity-zoom-actions) > button {
  flex-shrink: 0 !important;
}
:is(
  button.compact-icon-btn, button.release-icon-btn, button.entity-action-btn,
  button.detail-menu-item, button.edition-picker-action, button.image-source-btn,
  button.feature-modal-close, button.spent-eye-toggle, button.app-sidebar-item-icon-button,
  button#app-sidebar-close, button#app-sidebar-toggle, button#theme-toggle,
  button.app-header-logout, button.goods-detail-close, button.manga-editor-close,
  #detail-view .detail-view-header button[aria-label="Đóng"],
  #vol-detail-modal .vol-detail-header-actions > button[aria-label="Đóng"]
):hover {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(129,140,248,.58) !important;
  box-shadow: 0 0 0 2px rgba(129,140,248,.10) !important;
}
:is(
  button.compact-icon-btn, button.release-icon-btn, button.entity-action-btn,
  button.detail-menu-item, button.edition-picker-action, button.image-source-btn,
  button.feature-modal-close, button.spent-eye-toggle, button.app-sidebar-item-icon-button,
  button#app-sidebar-close, button#app-sidebar-toggle, button#theme-toggle,
  button.app-header-logout, button.goods-detail-close, button.manga-editor-close,
  #detail-view .detail-view-header button[aria-label="Đóng"],
  #vol-detail-modal .vol-detail-header-actions > button[aria-label="Đóng"]
):focus-visible {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(129,140,248,.68) !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.20) !important;
  outline: none !important;
}
:is(
  button.compact-icon-btn, button.release-icon-btn, button.entity-action-btn,
  button.detail-menu-item, button.edition-picker-action, button.image-source-btn,
  button.feature-modal-close, button.spent-eye-toggle, button.app-sidebar-item-icon-button,
  button#app-sidebar-close, button#app-sidebar-toggle, button#theme-toggle,
  button.app-header-logout, button.goods-detail-close, button.manga-editor-close,
  #detail-view .detail-view-header button[aria-label="Đóng"],
  #vol-detail-modal .vol-detail-header-actions > button[aria-label="Đóng"]
):active {
  background: rgba(99,102,241,.12) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.08) !important;
}
:is(button.entity-action-danger, button.compact-icon-btn-danger, button[id*="delete" i]) { color: #b05269 !important; }
:is(button.entity-action-danger, button.compact-icon-btn-danger, button[id*="delete" i]) i { color: inherit !important; }
body.dark-mode :is(
  button.compact-icon-btn, button.release-icon-btn, button.entity-action-btn,
  button.detail-menu-item, button.edition-picker-action, button.image-source-btn,
  button.feature-modal-close, button.spent-eye-toggle, button.app-sidebar-item-icon-button,
  button#app-sidebar-close, button#app-sidebar-toggle, button#theme-toggle,
  button.app-header-logout, button.goods-detail-close, button.manga-editor-close,
  #detail-view .detail-view-header button[aria-label="Đóng"],
  #vol-detail-modal .vol-detail-header-actions > button[aria-label="Đóng"]
) {
  background: transparent !important;
  border-color: rgba(148,163,184,.34) !important;
  color: #cbd5e1 !important;
}
body.dark-mode :is(
  button.compact-icon-btn, button.release-icon-btn, button.entity-action-btn,
  button.detail-menu-item, button.edition-picker-action, button.image-source-btn,
  button.feature-modal-close, button.spent-eye-toggle, button.app-sidebar-item-icon-button,
  button#app-sidebar-close, button#app-sidebar-toggle, button#theme-toggle,
  button.app-header-logout, button.goods-detail-close, button.manga-editor-close,
  #detail-view .detail-view-header button[aria-label="Đóng"],
  #vol-detail-modal .vol-detail-header-actions > button[aria-label="Đóng"]
):hover,
body.dark-mode :is(
  button.compact-icon-btn, button.release-icon-btn, button.entity-action-btn,
  button.detail-menu-item, button.edition-picker-action, button.image-source-btn,
  button.feature-modal-close, button.spent-eye-toggle, button.app-sidebar-item-icon-button,
  button#app-sidebar-close, button#app-sidebar-toggle, button#theme-toggle,
  button.app-header-logout, button.goods-detail-close, button.manga-editor-close,
  #detail-view .detail-view-header button[aria-label="Đóng"],
  #vol-detail-modal .vol-detail-header-actions > button[aria-label="Đóng"]
):focus-visible {
  background: rgba(129,140,248,.12) !important;
  border-color: rgba(148,163,184,.54) !important;
  color: #e2e8f0 !important;
}
body.dark-mode :is(button.entity-action-danger, button.compact-icon-btn-danger, button[id*="delete" i]) { color: #f08aa1 !important; }

/* One-row action menus: transparent container; each icon button owns its own frame. */
#vol-detail-modal #vol-detail-action-menu-panel,
#goods-detail-modal #goods-detail-action-menu-panel,
#goods-detail-modal .goods-detail-action-menu-panel {
  box-sizing: border-box !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 7px !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: min(calc(100vw - 24px), 440px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  scrollbar-width: thin;
}
#detail-view #detail-action-menu-panel.hidden,
#vol-detail-modal .vol-detail-header-actions:not(.vol-detail-actions-open) #vol-detail-action-menu-panel,
#goods-detail-modal .goods-detail-header-actions:not(.goods-detail-actions-open) #goods-detail-action-menu-panel,
#goods-detail-modal .goods-detail-header-actions:not(.goods-detail-actions-open) .goods-detail-action-menu-panel { display: none !important; }
#detail-view #detail-action-menu-panel > button,
#detail-view #detail-action-menu-panel > .detail-menu-item,
#vol-detail-modal #vol-detail-action-menu-panel > button,
#goods-detail-modal #goods-detail-action-menu-panel > button,
#goods-detail-modal .goods-detail-action-menu-panel > button {
  display: inline-flex !important;
  flex: 0 0 38px !important;
  width: 38px !important; min-width: 38px !important; max-width: 38px !important;
  height: 38px !important; min-height: 38px !important; max-height: 38px !important;
  align-items: center !important; justify-content: center !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid rgba(148,163,184,.38) !important;
  border-radius: 11px !important; background: transparent !important;
  box-shadow: none !important; transform: none !important;
  line-height: 1 !important; white-space: nowrap !important;
}
#detail-view #detail-action-menu-panel > button.hidden,
#detail-view #detail-action-menu-panel > .detail-menu-item.hidden,
#vol-detail-modal #vol-detail-action-menu-panel > button.hidden,
#goods-detail-modal #goods-detail-action-menu-panel > button.hidden,
#goods-detail-modal .goods-detail-action-menu-panel > button.hidden { display: none !important; }
#detail-view #detail-action-menu-panel .detail-menu-item-label,
#vol-detail-modal #vol-detail-action-menu-panel .vol-detail-action-label,
#vol-detail-modal #vol-detail-action-menu-panel .detail-menu-item-label,
#goods-detail-modal #goods-detail-action-menu-panel .detail-menu-item-label,
#goods-detail-modal .goods-detail-action-menu-panel .detail-menu-item-label { display: none !important; }
body.dark-mode #detail-view #detail-action-menu-panel,
body.dark-mode #vol-detail-modal #vol-detail-action-menu-panel,
body.dark-mode #goods-detail-modal #goods-detail-action-menu-panel,
body.dark-mode #goods-detail-modal .goods-detail-action-menu-panel {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.dark-mode #detail-view #detail-action-menu-panel > button,
body.dark-mode #detail-view #detail-action-menu-panel > .detail-menu-item,
body.dark-mode #vol-detail-modal #vol-detail-action-menu-panel > button,
body.dark-mode #goods-detail-modal #goods-detail-action-menu-panel > button,
body.dark-mode #goods-detail-modal .goods-detail-action-menu-panel > button {
  border-color: rgba(148,163,184,.34) !important;
  background: transparent !important;
  color: #cbd5e1 !important;
}
#detail-view #detail-action-menu-panel > button:hover,
#detail-view #detail-action-menu-panel > .detail-menu-item:hover,
#vol-detail-modal #vol-detail-action-menu-panel > button:hover,
#goods-detail-modal #goods-detail-action-menu-panel > button:hover,
#goods-detail-modal .goods-detail-action-menu-panel > button:hover,
#detail-view #detail-action-menu-panel > button:focus-visible,
#detail-view #detail-action-menu-panel > .detail-menu-item:focus-visible,
#vol-detail-modal #vol-detail-action-menu-panel > button:focus-visible,
#goods-detail-modal #goods-detail-action-menu-panel > button:focus-visible,
#goods-detail-modal .goods-detail-action-menu-panel > button:focus-visible {
  background: rgba(99,102,241,.08) !important;
  border-color: rgba(129,140,248,.58) !important;
  box-shadow: 0 0 0 2px rgba(129,140,248,.12) !important;
  outline: none !important;
}
body.dark-mode #detail-view #detail-action-menu-panel > button:hover,
body.dark-mode #detail-view #detail-action-menu-panel > .detail-menu-item:hover,
body.dark-mode #vol-detail-modal #vol-detail-action-menu-panel > button:hover,
body.dark-mode #goods-detail-modal #goods-detail-action-menu-panel > button:hover,
body.dark-mode #goods-detail-modal .goods-detail-action-menu-panel > button:hover,
body.dark-mode #detail-view #detail-action-menu-panel > button:focus-visible,
body.dark-mode #detail-view #detail-action-menu-panel > .detail-menu-item:focus-visible,
body.dark-mode #vol-detail-modal #vol-detail-action-menu-panel > button:focus-visible,
body.dark-mode #goods-detail-modal #goods-detail-action-menu-panel > button:focus-visible,
body.dark-mode #goods-detail-modal .goods-detail-action-menu-panel > button:focus-visible {
  background: rgba(129,140,248,.12) !important;
  border-color: rgba(148,163,184,.54) !important;
  color: #e2e8f0 !important;
}


/* v554: authoritative portrait alignment for the two entity-detail overlays.
   Keep the overlay as the scroll container; center short cards, but never clip
   the top of a card that exceeds the available viewport (safe flex alignment). */
@media (max-width: 640px) and (orientation: portrait) {
  #vol-detail-modal.fixed.inset-0:not(.hidden),
  #goods-detail-modal.fixed.inset-0:not(.hidden) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-items: safe center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #vol-detail-modal.fixed.inset-0 > div:first-child,
  #goods-detail-modal.fixed.inset-0 > .goods-detail-card {
    margin-block: auto !important;
  }
}


/* v558 / v637: Keep the intentionally clear desktop and landscape sidebar.
   On phone/tablet portrait, use the canonical drawer glass defined above instead.
   This fixes the old !important declarations cancelling the drawer's background. */
@media (min-width: 901px), (orientation: landscape) {
#app-sidebar#app-sidebar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-right: 1px solid rgba(127,127,127,.22) !important;
  box-shadow: none !important;
}
body.dark-mode #app-sidebar#app-sidebar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-right-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
}
#app-sidebar#app-sidebar .app-sidebar-item {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
#app-sidebar#app-sidebar .app-sidebar-item:hover {
  background: rgba(127,127,127,.08) !important;
  border-color: rgba(127,127,127,.18) !important;
  box-shadow: none !important;
}
body.dark-mode #app-sidebar#app-sidebar .app-sidebar-item:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
#app-sidebar#app-sidebar .app-sidebar-item.active {
  background: rgba(127,127,127,.12) !important;
  border-color: rgba(127,127,127,.20) !important;
  box-shadow: none !important;
}
body.dark-mode #app-sidebar#app-sidebar .app-sidebar-item.active {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}

/* ================================================================
   v593 - Detail lower panel: transparent Liquid Glass in Dark Mode.
   The legacy cover blur and near-opaque black gradient (::before /
   ::after) made the area below Thông tin / Tập truyện / Phụ kiện
   much darker than the rest of the site's glass panels.
   Keep the existing layout, tabs, cards, filters and Light Mode.
   ================================================================ */
/* v631: Remove the obsolete dark-mode filled/blurred panel from v593.
   It had higher specificity than the later v604/v629 clear-glass rules,
   despite appearing earlier in this file. The shared rule below now owns
   the lower panel in every theme; preserve positioning and decorations. */
body.dark-mode #detail-view#detail-view > #detail-lower-panel.detail-lower-panel::before,
body.dark-mode #detail-view#detail-view > #detail-lower-panel.detail-lower-panel::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}


/* ================================================================
   v595 — Popup visibility is authoritative on all viewport modes.
   Regression guard: on iPhone portrait, old centering CSS used
   display:flex!important even while .hidden was present, reopening
   an empty accessory modal over the home page and making it appear
   to alternate with Contact. Keep this higher-specificity guard
   independent of Tailwind availability and Seasonal animations.
   ================================================================ */
#vol-detail-modal.fixed.inset-0.hidden,
#goods-detail-modal.fixed.inset-0.hidden,
#contact-modal.hidden,
#vol-detail-modal[hidden],
#goods-detail-modal[hidden],
#contact-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ================================================================
   v596 — Detail navigation: only Back and More buttons are visible.
   The full-width action row is a layout-only flex container, not a
   glass/filled toolbar. Keep the two icon buttons and menu behavior.
   Scoped strictly to the manga detail page, all screen sizes/themes.
   ================================================================ */
#detail-view#detail-view > .detail-actionbar.detail-actionbar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
#detail-view#detail-view > .detail-actionbar.detail-actionbar::before,
#detail-view#detail-view > .detail-actionbar.detail-actionbar::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}


/* v600: Semantic Liquid Glass selectors, independent of inserted festival banners.
   The shelf search/filter block is the direct parent of #search-input,
   regardless of whether the festive ribbon is present.
   Keep explicit light/dark glass variables from the existing theme. */
#shelf-view#shelf-view > div:has(> #search-input) {
  border: 1px solid var(--glass-border) !important;
  background: var(--home-glass-panel-bg) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.24) brightness(.90) !important;
  backdrop-filter: blur(32px) saturate(1.24) brightness(.90) !important;
}


/* ================================================================
   v603 — Safari iPhone portrait: make the document the real scroller.
   Do not create an independent BODY scrollbox from overflow-x:hidden:
   CSS computes overflow-y:auto when overflow-x is hidden. Using clip
   prevents that scrollbox and leaves page pixels available to Safari's
   translucent status area while scrolling. Keep regular layout intact.
   ================================================================ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) and (orientation: portrait) {
    html, body {
      overflow-x: clip !important;
    }
    html.dark-mode {
      background-image: none !important;
      background-attachment: scroll !important;
    }
  }
}


/* =====================================================================
   v604 — ONE GLASS SYSTEM across Tủ Truyện
   Visual-only harmonization with the volume/accessory detail popups.
   Use translucent surfaces instead of opaque extra backing layers.
   Do not change layout, scrolling, controls, imagery, dialogs or data.
   ===================================================================== */
:root {
  --tt-unified-pane: linear-gradient(145deg,
      rgba(255,255,255,.040) 0%,
      rgba(255,255,255,.008) 50%,
      transparent 100%);
  /* v616: subtle clear glass, not the old grey/white filled tiles. */
  --tt-unified-card: linear-gradient(155deg,
      rgba(255,255,255,.028) 0%,
      rgba(255,255,255,.004) 54%,
      transparent 100%);
  --tt-unified-inner: rgba(255,255,255,.024);
  --tt-unified-border: rgba(255,255,255,.55);
  --tt-unified-pane-shadow: 0 14px 38px rgba(35,51,85,.085),
      inset 0 1px 0 rgba(255,255,255,.57);
  --tt-unified-card-shadow: 0 8px 26px rgba(35,51,85,.07),
      inset 0 1px 0 rgba(255,255,255,.43);
}
body.dark-mode {
  --tt-unified-pane: linear-gradient(145deg,
      rgba(255,255,255,.024) 0%,
      rgba(255,255,255,.004) 48%,
      transparent 100%);
  --tt-unified-card: linear-gradient(155deg,
      rgba(255,255,255,.019) 0%,
      rgba(255,255,255,.003) 54%,
      transparent 100%);
  --tt-unified-inner: rgba(255,255,255,.018);
  --tt-unified-border: rgba(255,255,255,.23);
  --tt-unified-pane-shadow: 0 18px 42px rgba(0,0,0,.13),
      inset 0 1px 0 rgba(255,255,255,.17);
  --tt-unified-card-shadow: 0 10px 30px rgba(0,0,0,.105),
      inset 0 1px 0 rgba(255,255,255,.11);
}

/* Detail page: the two poster-sized underlays carried old black/cover
   backdrops. Keep the poster and every actual card, remove the extra skin. */
html body #detail-view#detail-view > #detail-poster-hero.detail-poster-hero {
  background: var(--tt-unified-pane) !important;
  border-color: var(--tt-unified-border) !important;
  box-shadow: var(--tt-unified-pane-shadow) !important;
  -webkit-backdrop-filter: blur(27px) saturate(1.22) !important;
  backdrop-filter: blur(27px) saturate(1.22) !important;
}
#detail-view#detail-view .detail-poster-backdrop,
#detail-view#detail-view .detail-poster-shade {
  display: none !important;
  background: none !important;
  background-image: none !important;
}
/* v632: Preserve the large outer outline around ALL detail tabs and
   volume/accessory cards. v604's transparent border + no shadow removed
   this frame after v631 cleared the old dark fill. The glass must remain
   see-through (no tint, backdrop blur or cover image). */
html body #detail-view#detail-view > #detail-lower-panel.detail-lower-panel {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--tt-unified-border, rgba(255,255,255,.23)) !important;
  box-shadow: var(--tt-unified-pane-shadow, 0 18px 42px rgba(0,0,0,.13)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body #detail-view#detail-view > #detail-lower-panel.detail-lower-panel::before,
html body #detail-view#detail-view > #detail-lower-panel.detail-lower-panel::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
/* Real functional cards below the poster get the popup-like frosted glass. */
html body #detail-view#detail-view #related-manga-section,
html body #detail-view#detail-view .detail-tabs-shell,
html body #detail-view#detail-view #detail-filter-toolbar,
html body #detail-view#detail-view .detail-info-panel,
html body #detail-view#detail-view .detail-story {
  background: var(--tt-unified-pane) !important;
  border-color: var(--tt-unified-border) !important;
  box-shadow: var(--tt-unified-pane-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
  backdrop-filter: blur(22px) saturate(1.15) !important;
}
html body #detail-view#detail-view .detail-tabs-shell nav {
  background: transparent !important;
  box-shadow: none !important;
}
/* Detail stats and read-only summaries should look like glass controls,
   not a black box inside a second black box. */
html body #detail-view#detail-view .detail-collection-progress,
html body #detail-view#detail-view .detail-poster-stats > div,
html body #detail-view#detail-view .detail-price-summary,
html body #detail-view#detail-view .detail-info-grid article {
  background: var(--tt-unified-inner) !important;
  border-color: var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Shared page-level cards: light/dark translucency uses the same two
   glass recipes everywhere, retaining existing borders and click targets. */
html body #shelf-view#shelf-view > div:nth-child(2) > div,
html body #shelf-view#shelf-view > div:has(> #search-input),
html body #goods-view#goods-view .goods-summary-cards > div,
html body #goods-view#goods-view .goods-category-section,
html body #selling-view#selling-view .selling-summary-hero,
html body #selling-view#selling-view .selling-summary-count-card,
html body #selling-view#selling-view .selling-summary-tabs,
html body #selling-view#selling-view .collection-page-head,
html body #spending-view#spending-view .spending-filterbar,
html body #spending-view#spending-view .spending-hero,
html body #spending-view#spending-view .spending-panel,
html body #release-view#release-view .release-toolbar,
html body #release-view#release-view .release-day-group,
html body #book-vault-view#book-vault-view .collection-page-head,
html body #book-vault-view#book-vault-view .collection-panel,
html body #goods-view#goods-view .collection-page-head,
html body #spending-view#spending-view .collection-page-head,
html body .collection-stat-card,
html body #app-global-header-wrap .app-global-header-card {
  background: var(--tt-unified-pane) !important;
  border-color: var(--tt-unified-border) !important;
  box-shadow: var(--tt-unified-pane-shadow) !important;
}
html body #release-view#release-view .release-shell {
  /* No blur here: Safari's fixed month toolbar depends on this not being
     a backdrop-filter containing block. Children remain frosted. */
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Deep nested containers have no separate filled sheet. */
html body #spending-view#spending-view #spending-content-box,
html body #spending-view#spending-view .spending-timeline,
html body #goods-view#goods-view .goods-page-content,
html body #selling-view#selling-view .selling-grid {
  background: transparent !important;
  background-image: none !important;
}
/* Collection header decorative orb once formed a large tinted plate. */
html body .collection-page-head::after { opacity: .16 !important; }

/* Individual catalogue cards and release tiles keep their own silhouette,
   just drop any near-opaque backing color. Leave image/cover art untouched. */
html body #goods-view#goods-view .goods-card,
html body #goods-view#goods-view .goods-grid-card,
html body #selling-view#selling-view .selling-card,
html body #detail-view#detail-view #volumes-grid > div,
html body #detail-view#detail-view #goods-grid > div,
html body #release-view#release-view .release-book-card,
html body #book-vault-view#book-vault-view .collection-stat-card,
html body #spending-view#spending-view .spending-stat-card {
  background: var(--tt-unified-card) !important;
  border-color: var(--tt-unified-border) !important;
  box-shadow: var(--tt-unified-card-shadow) !important;
}

/* =====================================================================
   v625 — Clear shelf catalogue cards (all orientations, both themes).
   Remove only the blue/grey plate and per-card backdrop blur.  Preserve
   the existing card frame, highlight, hover and special selling/wishlist
   borders, cover imagery, ratings, prices and all click targets.
   The storm remains visible THROUGH the card rather than being blurred.
   ===================================================================== */
html body.dark-mode #shelf-view#shelf-view #manga-grid > .manga-shelf-card,
html body:not(.dark-mode) #shelf-view#shelf-view #manga-grid > .manga-shelf-card,
html body.dark-mode #shelf-view#shelf-view #manga-grid > .manga-shelf-card:hover,
html body:not(.dark-mode) #shelf-view#shelf-view #manga-grid > .manga-shelf-card:hover {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* A subtle specular sheen, but NO tinted sheet across the whole card.
   Selling cards have their own pink decorative layer, so leave it alone. */
html body #shelf-view#shelf-view #manga-grid > .manga-shelf-card:not(.is-selling)::before {
  background: linear-gradient(135deg,
    rgba(255,255,255,.045) 0%, transparent 28% 85%,
    rgba(255,255,255,.014) 100%) !important;
  opacity: .7 !important;
}

/* Never flatten content badges (status/price), progress bars or buttons. */

/* Screen-reader behavior, popup hidden guards, the no-full-width-detail-nav
   rule and all portrait/landscape layout rules are
   untouched by this visual harmonization. */


/* ====================================================================
   v611 — Mobile PORTRAIT only: Blue Box hero layout matches approved mockup.
   Cover LEFT, exactly the existing publisher/title/author/translator/rating/
   genres/status-volume-duration fields RIGHT. No added buttons or metadata.
   Keep the original progress, totals, and prices BELOW the compact top card.
   Desktop & landscape remain untouched. All IDs remain in the DOM.
   ==================================================================== */
@media (max-width: 800px) and (orientation: portrait) {
  html body #detail-view#detail-view > #detail-poster-hero.detail-poster-hero {
    min-height: 0 !important;
    overflow: visible !important;
    isolation: auto;
    border: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  #detail-view #detail-poster-hero .detail-poster-content {
    display: grid !important;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: start !important;
    padding: 13px !important;
    min-width: 0;
  }
  /* One continuous Liquid Glass frame encloses ALL portrait hero rows:
     cover + metadata, progress, three statistics and price summary. */
  #detail-view #detail-poster-hero .detail-poster-content::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    align-self: stretch;
    margin: -13px;
    border-radius: 22px;
    border: 1px solid var(--tt-unified-border, rgba(255,255,255,.23));
    background: transparent;
    box-shadow: var(--tt-unified-pane-shadow, 0 12px 30px rgba(0,0,0,.10));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    position: relative;
    z-index: 0;
  }
  #detail-view #detail-poster-hero .detail-poster-cover {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    align-self: start;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 23px rgba(8,14,35,.22) !important;
  }
  #detail-view #detail-poster-hero .detail-poster-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #detail-view #detail-poster-hero .detail-poster-copy {
    display: contents !important;
  }
  #detail-view #detail-poster-hero .detail-poster-meta {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    align-self: center;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left !important;
    padding: 0;
  }
  #detail-view #detail-poster-hero .detail-poster-eyebrow {
    justify-content: flex-start !important;
    margin: 0 0 5px !important;
    font-size: 8px !important;
    line-height: 1.15;
    letter-spacing: .09em;
  }
  #detail-view #detail-poster-hero #detail-title {
    font-size: clamp(18px, 5.9vw, 25px) !important;
    line-height: 1.13 !important;
    letter-spacing: -.025em !important;
    margin: 0 !important;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }
  #detail-view #detail-poster-hero .detail-people-row {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    margin-top: 6px !important;
    min-width: 0;
  }
  #detail-view #detail-poster-hero #detail-author {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    overflow-wrap: anywhere;
  }
  #detail-view #detail-poster-hero #detail-translator {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    overflow-wrap: anywhere;
  }
  #detail-view #detail-poster-hero .detail-rating-row {
    margin-top: 9px !important;
    min-height: 15px;
    text-align: left !important;
  }
  #detail-view #detail-poster-hero #detail-rating { gap: 3px !important; }
  #detail-view #detail-poster-hero #detail-rating .fa-star {
    font-size: 12px !important;
  }
  /* The mockup includes the numeric value after the five stars. This is
     derived from already-rendered star classes, with no data/API changes. */
  #detail-view #detail-poster-hero #detail-rating::after {
    content: "0.0";
    color: rgba(210,218,241,.64);
    font-size: 9px;
    font-weight: 600;
    margin-left: 4px;
    text-shadow: none;
  }
  #detail-view #detail-poster-hero #detail-rating:has(> .is-rated:nth-child(1))::after { content: "1.0"; }
  #detail-view #detail-poster-hero #detail-rating:has(> .is-rated:nth-child(2))::after { content: "2.0"; }
  #detail-view #detail-poster-hero #detail-rating:has(> .is-rated:nth-child(3))::after { content: "3.0"; }
  #detail-view #detail-poster-hero #detail-rating:has(> .is-rated:nth-child(4))::after { content: "4.0"; }
  #detail-view #detail-poster-hero #detail-rating:has(> .is-rated:nth-child(5))::after { content: "5.0"; }
  body:not(.dark-mode) #detail-view #detail-poster-hero #detail-rating::after,
  html[data-theme="light"] #detail-view #detail-poster-hero #detail-rating::after {
    color: #64748b;
  }
  #detail-view #detail-poster-hero #detail-genre {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 8px 0 0 !important;
    min-width: 0;
  }
  #detail-view #detail-poster-hero #detail-genre > * {
    padding: 4px 6px !important;
    border-radius: 999px !important;
    line-height: 1.15 !important;
    font-size: 8px !important;
    white-space: nowrap;
    max-width: 100%;
  }
  #detail-view #detail-poster-hero .detail-badge-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    margin-top: 10px !important;
    min-width: 0;
  }
  #detail-view #detail-poster-hero .detail-badge-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    max-width: 100%;
    padding: 3px 4px !important;
    font-size: 7.2px !important;
    line-height: 1.22 !important;
    text-align: center;
    white-space: nowrap !important;
  }
  #detail-view #detail-poster-hero #detail-status {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 86px;
    white-space: normal !important;
  }
  #detail-view #detail-poster-hero #detail-volumes-badge {
    flex: 0 0 auto;
  }
  #detail-view #detail-poster-hero #detail-release-duration {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    white-space: nowrap !important;
  }
  /* Cosmetic glyphs; the actual values and existing spans remain unchanged. */
  #detail-view #detail-poster-hero #detail-volumes-badge::after,
  #detail-view #detail-poster-hero #detail-release-duration::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    order: -1;
    margin-right: 3px;
    font-size: 9px;
    flex: none;
  }
  #detail-view #detail-poster-hero #detail-volumes-badge::after { content: "\f518"; }
  #detail-view #detail-poster-hero #detail-release-duration::after { content: "\f017"; }

  /* Original functional data is kept, placed in full-width rows below.
     Do not squeeze progress/statistics/prices into the 2-column mockup. */
  #detail-view #detail-poster-hero .detail-collection-progress,
  #detail-view #detail-poster-hero .detail-poster-stats,
  #detail-view #detail-poster-hero .detail-price-summary {
    position: relative;
    z-index: 1;
  }
  #detail-view #detail-poster-hero .detail-collection-progress {
    grid-column: 1 / -1;
    grid-row: 2;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 9px 0 0 !important;
  }
  #detail-view #detail-poster-hero .detail-poster-stats {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0 !important;
  }
  #detail-view #detail-poster-hero .detail-price-summary {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0 !important;
  }
}
@media (max-width: 359px) and (orientation: portrait) {
  #detail-view #detail-poster-hero .detail-poster-content {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 10px !important;
  }
  #detail-view #detail-poster-hero .detail-poster-content::before { margin: -10px; }
  #detail-view #detail-poster-hero #detail-title { font-size: 18px !important; }
  #detail-view #detail-poster-hero #detail-genre > * { font-size: 7px !important; padding: 3px 5px !important; }
}

/* ============================================================================
   v615 – Phụ kiện KHÔNG bán kèm theo từng phiên bản truyện.
   Không thay đổi các style Liquid Glass và khả năng tương tác popup cũ.
   ============================================================================ */
.tt-sale-goods-editor { margin-top:12px; padding:10px; border:1px solid rgba(135,151,188,.28); border-radius:13px; background:rgba(124,139,180,.055); }
.tt-sale-goods-editor-heading { display:flex;align-items:center;gap:7px;font-size:12px;font-weight:750;margin-bottom:8px;color:var(--text-primary,#e1e8fa); }
.tt-sale-goods-editor-heading > i { color:#edac51; }
.tt-sale-goods-list { display:flex;flex-direction:column;gap:7px; }
.tt-sale-goods-empty { font-size:11px;color:var(--text-muted,#98a5bb);padding:5px 1px; }
.tt-sale-goods-row { position:relative;display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid rgba(140,154,187,.23);border-radius:11px;min-width:0;background:rgba(139,154,197,.065); }
.tt-sale-goods-title { flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;font-weight:600;color:var(--text-primary,#e1e8fa); }
.tt-sale-goods-thumb { width:43px;height:43px;min-width:43px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:9px;overflow:hidden;background:rgba(136,153,187,.18);color:#d7a25f; }
.tt-sale-goods-thumb img { width:100%;height:100%;object-fit:cover; }
.tt-sale-goods-action { position:relative;flex:none; }
.tt-sale-goods-menu-btn { display:flex;align-items:center;justify-content:center;width:33px;height:33px;border:1px solid rgba(144,158,198,.34);border-radius:10px;background:rgba(128,144,184,.1);color:var(--text-primary,#e1e8fa);cursor:pointer; }
.tt-sale-goods-menu-btn:hover { background:rgba(128,144,184,.23); }
.tt-sale-goods-popover { position:absolute;z-index:50;right:0;top:calc(100% + 4px);width:155px;padding:5px;border:1px solid rgba(127,147,190,.35);border-radius:12px;background:#252c49;color:#f4f5fc;box-shadow:0 12px 36px rgba(0,0,0,.32); }
.tt-sale-goods-popover.hidden { display:none!important; }
.tt-sale-goods-popover button { display:flex;width:100%;align-items:center;gap:7px;padding:9px 8px;border-radius:8px;text-align:left;font-size:11px;font-weight:650;color:inherit;background:transparent;cursor:pointer; }
.tt-sale-goods-popover button:hover { background:rgba(180,194,234,.16); }
.tt-sale-goods-popover button[aria-checked="true"] { color:#87efcd; }
.tt-sale-goods-popover i { min-width:14px; }
.tt-sale-goods-dim { position:absolute;z-index:2;inset:0;background:rgba(0,0,0,.60);pointer-events:none; }
.tt-not-included-marker { position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85)); }
.tt-not-included-marker.hidden { display:none!important; }
.tt-not-included-gift { color:#fff;font-size:25px;line-height:1; }
.tt-not-included-x { position:absolute;top:4px;right:1px;display:grid;place-items:center;width:14px;height:14px;border:1.5px solid white;border-radius:50%;font-size:10px;font-weight:900;color:#fff;background:#df273d;box-shadow:0 1px 3px rgba(0,0,0,.55); }
#vol-detail-modal .tt-sale-good-not-included .vol-info-good-thumb { position:relative;isolation:isolate; }
#vol-detail-modal .tt-sale-good-not-included .vol-info-good-thumb .tt-not-included-marker { width:34px;height:34px; }
#vol-detail-modal .tt-sale-good-not-included .vol-info-good-thumb .tt-not-included-gift { font-size:23px; }
#vol-detail-modal .tt-sale-good-not-included .vol-info-good-thumb .tt-not-included-x { right:0;top:3px; }
#goods-detail-image-stage.tt-sale-excluded-detail-stage::after { content:"";position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.60);pointer-events:none; }
#goods-detail-image-stage.tt-sale-excluded-detail-stage > .tt-not-included-marker { z-index:12;width:68px;height:68px; }
#goods-detail-image-stage.tt-sale-excluded-detail-stage .tt-not-included-gift { font-size:48px; }
#goods-detail-image-stage.tt-sale-excluded-detail-stage .tt-not-included-x { width:22px;height:22px;font-size:15px;top:5px;right:3px; }
@media(max-width:640px) { .tt-sale-goods-popover { right:0; } }

/* Trong popup ảnh phụ kiện, quy tắc page-flip cũ có opacity:0 cho ::after. */
#goods-detail-image-stage.tt-sale-excluded-detail-stage::after { opacity:1;mix-blend-mode:normal; }
.tt-hover-good-excluded { opacity:.54; }
.tt-hover-good-excluded > span { display:inline-flex;position:relative;vertical-align:middle;color:#fff;margin-left:2px;font-size:11px; }
.tt-hover-good-excluded > span .fa-xmark { position:absolute;top:-4px;right:-5px;background:#df273d;border-radius:50%;color:#fff;font-size:8px;padding:2px; }


/* ===========================================================================
   v628 — Sidebar tab surfaces match the CLEAR cards of the Tủ Truyện shelf.
   Scope: Kho Quyển, Phụ kiện, Thanh lý, Chi tiêu, Lịch phát hành ONLY.
   - Remove blue/navy plates, including state/hover card backgrounds.
   - Keep real content, covers, typography, selected-state borders, badges,
     charts, active buttons, price colors, and weather/wet-glass overlays.
   - Structural panes retain a very faint NEUTRAL glass glint, not blue fill.
   - Do not create a new stacking context or scrolling container.
   =========================================================================== */
:root {
  --tt-sidebar-clear-pane: linear-gradient(145deg,
      rgba(255,255,255,.030) 0%, rgba(255,255,255,.005) 43%, transparent 100%);
}
body.dark-mode {
  --tt-sidebar-clear-pane: linear-gradient(145deg,
      rgba(255,255,255,.018) 0%, rgba(255,255,255,.003) 43%, transparent 100%);
}

/* Kho Quyển used to paint its OWN navy/blue viewport backdrop, which made
   even transparent cards appear to have another blue backing. Reuse BODY. */
html body #book-vault-view#book-vault-view::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Major frames: a near-clear neutral glass reflection without colored fill. */
html body #book-vault-view#book-vault-view .collection-page-head,
html body #book-vault-view#book-vault-view .collection-panel,
html body #goods-view#goods-view .collection-page-head,
html body #goods-view#goods-view .goods-category-section,
html body #goods-view#goods-view .goods-summary-cards > div,
html body #selling-view#selling-view .collection-page-head,
html body #selling-view#selling-view .selling-summary-hero,
html body #selling-view#selling-view .selling-summary-count-card,
html body #selling-view#selling-view .selling-summary-tabs,
html body #spending-view#spending-view .collection-page-head,
html body #spending-view#spending-view .spending-hero,
html body #spending-view#spending-view .spending-filterbar,
html body #spending-view#spending-view .spending-panel,
html body #release-view#release-view .release-toolbar,
html body #release-view#release-view .release-day-group {
  background: var(--tt-sidebar-clear-pane) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
}

/* Actual cards and nested read-only tiles: just the frame, like v625 shelf.
   Turning blur OFF on individual cards preserves the visible rain behind. */
html body #book-vault-view#book-vault-view .collection-stat-card,
html body #book-vault-view#book-vault-view .vault-book-card,
html body #book-vault-view#book-vault-view .vault-book-card:hover,
html body #book-vault-view#book-vault-view .vault-book-card.selected,
html body #book-vault-view#book-vault-view .vault-detail-cell,
html body #book-vault-view#book-vault-view .vault-detail-price,
html body #book-vault-view#book-vault-view .vault-recent-row,
html body #book-vault-view#book-vault-view .vault-side-row,
html body #goods-view#goods-view #goods-category-tabs > button,
html body #goods-view#goods-view #goods-category-tabs > button:hover,
html body #goods-view#goods-view .goods-card,
html body #goods-view#goods-view .goods-grid-card,
html body #selling-view#selling-view .selling-card,
html body #selling-view#selling-view .selling-card:hover,
html body #selling-view#selling-view .selling-summary-count-card > .selling-stat-card,
html body #spending-view#spending-view .spending-stat-card,
html body #spending-view#spending-view .spending-top-row,
html body #spending-view#spending-view .spending-top-row:hover,
html body #spending-view#spending-view .spending-timeline-row,
html body #spending-view#spending-view .spending-timeline-row:hover,
html body #release-view#release-view .release-book-card,
html body #release-view#release-view .release-book-card:hover {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Small non-interactive blue backing plates in the same sections. */
html body #selling-view#selling-view .collection-head-stat,
html body #spending-view#spending-view .spending-soft-chip,
html body #release-view#release-view .release-day-total {
  background: rgba(255,255,255,.028) !important;
  background-image: none !important;
}
/* Keep active tabs, badges and special meaningful colors; just remove the
   big blue decorative orb inside headers of these OTHER sidebar pages. */
html body #book-vault-view#book-vault-view .collection-page-head::after,
html body #goods-view#goods-view .collection-page-head::after,
html body #selling-view#selling-view .collection-page-head::after,
html body #spending-view#spending-view .collection-page-head::after {
  content: none !important;
  display: none !important;
}
/* Release's sticky toolbar retains a little contrast on scroll, but neither
   dark navy nor blue. It still does NOT create a fixed/scrolling ancestor. */
html body #release-view#release-view .release-shell {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* v628 audit follow-up: Chi tiêu summary tiles had a stronger selector in
   legacy CSS; match its exact structural specificity to remove blue. */
html body #spending-view#spending-view .spending-summary-grid > .spending-stat-card,
html body #spending-view#spending-view .spending-summary-grid > .spending-stat-card:hover {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The sign-in-only sidebar tab Kiểm tra Tủ Truyện uses older opaque navy
   sheets; include it in the same sidebar-wide appearance harmonization. */
html body #data-health-view#data-health-view .data-health-head,
html body #data-health-view#data-health-view .data-health-panel {
  background: var(--tt-sidebar-clear-pane) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
}
html body #data-health-view#data-health-view .data-health-summary > div,
html body #data-health-view#data-health-view .data-health-issue {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* =====================================================================
   v629 — CLEAR GLASS, ALL VIEWS. The remaining blue slabs were produced by:
   (1) indigo-tinted shared surface tokens; (2) aggressive 10–42px blur
   on big structural panes, and (3) v612's mobile poster ::before plate.
   Tokens and mobile source rule are corrected above. These scoped rules
   also neutralize legacy fixed-color plates WITHOUT flattening controls,
   badges, active tabs, readable form fields, image art or popup backdrops.
   Preserve rain/wet-glass pseudo overlays and all stacking/scroll rules.
   ===================================================================== */

/* Large structural surfaces: the OUTLINE remains, with no teal/navy sheet
   or backdrop blur hiding weather through the surface. */
html body #detail-view#detail-view > #detail-poster-hero.detail-poster-hero,
html body #detail-view#detail-view .detail-tabs-shell,
html body #detail-view#detail-view #detail-filter-toolbar,
html body #detail-view#detail-view #related-manga-section,
html body #detail-view#detail-view .detail-info-panel,
html body #detail-view#detail-view .detail-story,
html body #shelf-view#shelf-view > div:has(> #search-input),
html body #shelf-view#shelf-view > div:nth-child(2) > div,
html body #app-global-header-wrap .app-global-header-card,
html body #book-vault-view#book-vault-view .collection-page-head,
html body #book-vault-view#book-vault-view .collection-panel,
html body #book-vault-view#book-vault-view .vault-filter-panel,
html body #book-vault-view#book-vault-view .vault-map-panel,
html body #book-vault-view#book-vault-view .vault-books-panel,
html body #book-vault-view#book-vault-view .vault-detail-panel,
html body #goods-view#goods-view .collection-page-head,
html body #goods-view#goods-view .goods-category-section,
html body #goods-view#goods-view .goods-summary-cards > div,
html body #selling-view#selling-view .collection-page-head,
html body #selling-view#selling-view .selling-summary-hero,
html body #selling-view#selling-view .selling-summary-count-card,
html body #selling-view#selling-view .selling-summary-tabs,
html body #spending-view#spending-view .collection-page-head,
html body #spending-view#spending-view .spending-filterbar,
html body #spending-view#spending-view .spending-hero,
html body #spending-view#spending-view .spending-panel,
html body #release-view#release-view .release-toolbar,
html body #release-view#release-view .release-day-group,
html body #data-health-view#data-health-view .data-health-head,
html body #data-health-view#data-health-view .data-health-panel,
html body .year-review-panel {
  background: var(--tt-unified-pane) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Light-mode legacy rule has a NOT(.dark-mode) class in addition to two
   detail-view IDs. Override at matching/higher specificity to prevent its
   white/blue sheet and 18px blur from returning above the rain. */
html body:not(.dark-mode) #detail-view#detail-view .detail-tabs-shell,
html body:not(.dark-mode) #detail-view#detail-view #detail-filter-toolbar,
html body:not(.dark-mode) #detail-view#detail-view #related-manga-section,
html body:not(.dark-mode) #detail-view#detail-view .detail-info-panel {
  background: var(--tt-unified-pane) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body:not(.dark-mode) #detail-view#detail-view .detail-collection-progress,
html body:not(.dark-mode) #detail-view#detail-view .detail-poster-stats > div,
html body:not(.dark-mode) #detail-view#detail-view .detail-price-summary {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Portrait hero's frame is the ::before plate, not the hero itself.
   Let rain and wet-glass streaks show through as they do in the lower tabs. */
@media (max-width: 800px) and (orientation: portrait) {
  html body #detail-view#detail-view > #detail-poster-hero.detail-poster-hero {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html body #detail-view#detail-view .detail-poster-content::before {
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* Inner read-only stats are separate stacked tinted plates in v628. */
html body #detail-view#detail-view .detail-collection-progress,
html body #detail-view#detail-view .detail-poster-stats > div,
html body #detail-view#detail-view .detail-price-summary,
html body #detail-view#detail-view .detail-info-grid article,
html body #book-vault-view#book-vault-view .collection-stat-card,
html body #goods-view#goods-view .goods-card,
html body #goods-view#goods-view .goods-grid-card,
html body #selling-view#selling-view .selling-card,
html body #spending-view#spending-view .spending-stat-card,
html body #release-view#release-view .release-book-card,
html body #detail-view#detail-view #volumes-grid > div,
html body #detail-view#detail-view #goods-grid > div {
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Popup glass gets a neutral, almost clear surface; avoid a strong blur that
   hides the storm behind the glass. Keep modal OVERLAY for focus and contrast. */
html body [id$="-modal"].fixed.inset-0 > .bg-white,
html body .batch-import-card,
html body .contact-modal-card,
html body .qr-share-card,
html body .manga-editor-card,
html body .volume-editor-card,
html body .goods-editor-card,
html body .goods-detail-card,
html body .edition-manager-card,
html body .feature-modal-card {
  background: var(--glass-modal-bg) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}
/* The glossy pseudo highlight is neutral; no purple or blue corner tint. */
html body [id$="-modal"].fixed.inset-0 > .bg-white::before,
html body .batch-import-card::before,
html body .contact-modal-card::before,
html body .global-search-card::before,
html body .qr-share-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 34% 90%) !important;
}

/* Do not alter --glass-control, button gradients, status chips, rain layers,
   wet-glass overlays, dedicated image previews, or share-card exported art. */

/* v681: Align the three release-date inputs with the adjacent ownership control.
   Keep the existing glass input styling and responsive editor grid. */
#volume-modal .volume-release-date-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; gap: 8px; width: 100%; min-width: 0; margin-top: 0; }
#volume-modal .volume-release-date-parts input { box-sizing: border-box; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 40px; padding: 8px 5px !important; border: 1px solid var(--glass-border-soft); border-radius: 10px; background: var(--editor-input); color: var(--ui-text); font-size: 14px; font-weight: 500; }
#volume-modal .volume-release-date-parts input:focus-visible { outline: 2px solid #8275e9; outline-offset: 1px; }
#volume-modal .volume-release-date-parts input::-webkit-inner-spin-button, #volume-modal .volume-release-date-parts input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#volume-modal .volume-release-date-parts input { appearance: textfield; -moz-appearance: textfield; }

/* v684: Popup phân tích GIÁ RIÊNG, tuyệt đối không đổi các grid/component v683. */
#tt-private-price-editor.tt-private-price-editor{display:block;min-width:0;width:100%;margin-top:10px;border:1px solid rgba(148,163,184,.28);border-radius:13px;background:rgba(110,120,145,.07);overflow:hidden}
#tt-private-price-editor.hidden{display:none!important}
#tt-private-price-editor>summary{list-style:none;cursor:pointer;display:flex;gap:9px;align-items:center;padding:11px 13px;font-size:12px;font-weight:700;color:inherit}
#tt-private-price-editor>summary::-webkit-details-marker{display:none}
#tt-private-price-editor .tt-private-arrow{margin-left:auto;transition:transform .2s}
#tt-private-price-editor[open] .tt-private-arrow{transform:rotate(180deg)}
#tt-private-price-editor .tt-private-price-content{display:grid;gap:9px;padding:0 13px 13px}
#tt-private-price-editor .tt-private-price-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
#tt-private-price-editor .tt-private-price-field{display:flex;flex-direction:column;gap:5px;min-width:0}
#tt-private-price-editor label,#tt-private-price-editor p{font-size:12px;line-height:1.5;margin:0}
#tt-private-price-editor .tt-private-price-field label{font-size:11px;font-weight:600;white-space:nowrap}
#tt-private-price-editor input{box-sizing:border-box;width:100%;min-width:0;border:1px solid rgba(148,163,184,.45);border-radius:10px;padding:10px 12px;background:var(--glass-card-bg,rgba(255,255,255,.12));color:inherit;font-size:14px}
#tt-private-price-editor .tt-private-price-fields input{padding:10px 8px}
#tt-private-price-editor .tt-private-price-note{opacity:.68}
/* v687: Bảng Phân tích giá và nút dọc dùng đúng biến Liquid Glass của
   popup thông tin tập, không có màu tối/trắng đục cố định. */
:is(#tt-price-analysis,#tt-goods-price-analysis){position:fixed;z-index:2147483412;box-sizing:border-box;width:320px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;isolation:isolate;border-radius:20px;padding:16px;color:var(--ui-text);background:var(--glass-modal-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(42px) saturate(1.62) brightness(1.08);backdrop-filter:blur(42px) saturate(1.62) brightness(1.08);box-shadow:0 36px 100px rgba(5,10,22,.38),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.055);font-family:inherit;font-size:12px}
:is(#tt-price-analysis,#tt-goods-price-analysis)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 34% 90%)}
:is(#tt-price-analysis,#tt-goods-price-analysis).hidden{display:none!important}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-price-analysis-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-price-analysis-head button{border:1px solid var(--glass-border-soft);background:var(--glass-control);color:var(--ui-text);border-radius:8px;padding:6px 8px;cursor:pointer}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-analysis-source{margin:7px 0 12px;font-size:11px;color:var(--ui-muted)}
:is(#tt-price-analysis,#tt-goods-price-analysis) section{padding:12px 0;border-top:1px solid var(--glass-border-soft)}
:is(#tt-price-analysis,#tt-goods-price-analysis) h4{margin:0 0 10px;font-size:12px;font-weight:750;color:var(--ui-text)}
:is(#tt-price-analysis,#tt-goods-price-analysis) section>div{display:flex;align-items:start;justify-content:space-between;gap:8px;margin:8px 0}
:is(#tt-price-analysis,#tt-goods-price-analysis) section>div>span{color:var(--ui-muted);max-width:60%}
:is(#tt-price-analysis,#tt-goods-price-analysis) section>div>strong{text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* v698: Chú thích giá nhà sách mặc định tách dòng, không phụ thuộc Tailwind CDN. */
#tt-price-analysis #tt-an-actual-note{display:block;margin-top:3px;font-size:10px;line-height:1.4;font-weight:400;color:var(--ui-muted)}
#tt-price-analysis #tt-an-actual-note.hidden{display:none!important}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-analysis-result.hidden{display:none!important}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-analysis-result>strong{display:block;color:var(--ui-success);font-size:22px;margin:6px 0}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-analysis-result>strong.is-negative{color:var(--ui-danger)}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-analysis-result>p{margin:0;color:var(--ui-muted)}
:is(#tt-price-analysis,#tt-goods-price-analysis) .tt-analysis-result>small{display:block;opacity:.72;line-height:1.5}

/* v689: cùng chiều cao dựa trên kích thước TỰ NHIÊN lớn hơn của hai popup.
   Class measuring chỉ để đo, không kéo giãn; class paired mới giãn/căn giữa. */
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) > div:first-child {
  box-sizing: border-box;
  flex: none;
  width: var(--tt-v685-main-width) !important;
  max-width: none !important;
  height: var(--tt-v685-height, auto) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px);
  transform: translateX(var(--tt-v685-shift));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) > div:first-child > .popup-unified-head {
  flex: 0 0 auto;
}
#vol-detail-modal.tt-v685-paired .vol-detail-layout {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  align-items: safe center !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .vol-detail-media {
  box-sizing: border-box;
  width: var(--tt-v685-cover-width) !important;
  max-width: var(--tt-v685-cover-width) !important;
  flex: 0 0 var(--tt-v685-cover-width) !important;
  min-width: 0 !important;
  align-self: safe center;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) #vol-detail-image-stage {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .vol-swipe-hint,
#vol-detail-modal.tt-v685-paired #vol-cover-thumbnails {
  width: 100% !important;
  max-width: 100% !important;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) #vol-detail-image-stage #vol-info-cover {
  object-fit: contain !important;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .vol-info-main-column {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  align-self: safe center;
  min-width: 0;
  min-height: auto;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .vol-info-main-column > * {
  flex-shrink: 0;
}
/* v688: Ảnh phụ kiện co theo chiều cao tham chiếu của bảng giá,
   chỉ trong bố cục hai popup. Không thay đổi popup đơn và giao diện dọc. */
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .vol-info-good-card {
  width: var(--tt-v688-good-width) !important;
  min-width: var(--tt-v688-good-width) !important;
  max-width: var(--tt-v688-good-width) !important;
  padding: 6px 4px;
  gap: 4px;
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .vol-info-good-thumb {
  width: min(46px, calc(var(--tt-v688-good-width) - 14px));
  height: min(46px, calc(var(--tt-v688-good-width) - 14px));
}
#vol-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .vol-info-good-name {
  font-size: 10px;
  line-height: 1.2;
  min-height: 24px;
}
:is(#tt-price-analysis,#tt-goods-price-analysis):not(.is-stacked) {
  overscroll-behavior: contain;
}
#vol-detail-modal.tt-v689-measuring .vol-detail-layout { flex: 0 0 auto; min-height: 0; overflow: visible; align-items: center !important; }
#vol-detail-modal.tt-v689-measuring .vol-info-main-column { justify-content: center; }
#vol-detail-modal .vol-price-summary.tt-analysis-price-trigger { cursor: pointer; }
#vol-detail-modal .vol-price-summary.tt-analysis-price-trigger:focus-visible { outline:2px solid var(--ui-primary); outline-offset:3px; }
/* v694: Khi không đủ chỗ ghép ngang, modal gốc là vùng cuộn duy nhất.
   Popup chính rồi tới popup phân tích, không có backdrop/z-index/fixed riêng.
   Chỉ bật lớp bố cục này khi Admin chạm khung giá. */
:is(#vol-detail-modal,#goods-detail-modal).fixed.inset-0.tt-v694-stacked:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-padding-top: max(12px, env(safe-area-inset-top));
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling: touch;
}
:is(#vol-detail-modal,#goods-detail-modal).fixed.inset-0.tt-v694-stacked > :is(div:first-child,.goods-detail-card) {
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#vol-detail-modal.tt-v694-stacked { --tt-v694-panel-width: 576px; }
#goods-detail-modal.tt-v694-stacked { --tt-v694-panel-width: 720px; }
:is(#vol-detail-modal,#goods-detail-modal) > :is(#tt-price-analysis,#tt-goods-price-analysis).is-stacked {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto;
  flex: 0 0 auto !important;
  display: block;
  width: min(100%, var(--tt-v694-panel-width)) !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  :is(#tt-price-analysis,#tt-goods-price-analysis).is-stacked { padding: 14px; }
}


/* v693 — cặp popup phụ kiện: CÙNG quy tắc đo tự nhiên -> chiều cao lớn hơn ->
   áp bằng nhau của .tt-v689-measuring / .tt-v685-paired ở cặp popup tập. */
#goods-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) > .goods-detail-card {
  box-sizing: border-box;
  flex: none;
  width: var(--tt-v685-main-width) !important;
  max-width: none !important;
  height: var(--tt-v685-height, auto) !important;
  max-height: calc(100dvh - 32px) !important;
  min-height: 0 !important;
  transform: translateX(var(--tt-v685-shift));
  grid-template-columns: minmax(0, 1.13fr) minmax(270px, .87fr) !important;
  overflow: hidden !important;
}
#goods-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .goods-detail-media {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  align-self: stretch; overflow: hidden;
}
#goods-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) .goods-detail-side {
  display: flex; flex-direction: column; min-height: 0; justify-content: safe center;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
#goods-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) #goods-detail-image-stage {
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto;
}
#goods-detail-modal.tt-v689-measuring #goods-detail-image-stage {
  flex: 0 0 var(--tt-goods-measure-stage, 330px);
  height: var(--tt-goods-measure-stage, 330px) !important;
}
#goods-detail-modal:is(.tt-v685-paired,.tt-v689-measuring) #goods-detail-img {
  object-fit: contain !important;
}
#goods-detail-modal .goods-detail-price.tt-analysis-price-trigger { cursor: pointer; }
#goods-detail-modal .goods-detail-price.tt-analysis-price-trigger:focus-visible {
  outline: 2px solid var(--ui-primary); outline-offset: 3px;
}
/* v687: cả sáng/tối dùng chung biến theme; không cần ghi đè màu riêng. */