/* ══════════════════════════════════════════════
   THEME TOKENS — light (default) + dark (Nexa)
   ══════════════════════════════════════════════ */
:root {
  --bg-app:         #f2f2f7;
  --bg-header:      #ffffff;
  --bg-sidebar:     #f5f5f7;
  --bg-card:        #ffffff;
  --bg-input:       #f9f9fb;
  --bg-tab-bar:     #f2f2f7;
  --bg-tab-inner:   #e3e3e8;
  --bg-tab-active:  #ffffff;
  --bg-chip-bar:    #e3e3e8;
  --bg-chip-active: #ffffff;

  --border:         rgba(0,0,0,0.08);
  --border-strong:  rgba(0,0,0,0.15);
  --border-input:   #e5e5ea;

  --text-primary:   #1d1d1f;
  --text-secondary: #636366;
  --text-tertiary:  #8e8e93;

  /* Mono + gold: light accent = ink (không xanh iOS); dark accent = gold (#FFD100) */
  --accent:         #131316;
  --accent-bg:      #f0f0f2;
  --accent-border:  #131316;

  --btn-ghost-bg:    #ffffff;
  --btn-ghost-color: #1d1d1f;
  --btn-ghost-hover: #f5f5f7;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.10);
  --scrollbar-thumb: #d1d1d6;
}

[data-theme="dark"] {
  /* Nexa black × gold: gold CHỈ ở accent/CTA; nền-viền-chữ đều trung tính.
     Nền xám đậm (không đen thuần), elevation = bề mặt sáng dần,
     viền trắng-alpha thay viền nhuộm vàng (gây cảm giác ố cũ). */
  --bg-app:         #121214;
  --bg-header:      #17171a;
  --bg-sidebar:     #17171a;
  --bg-card:        #1b1b1e;
  --bg-input:       #202024;
  --bg-tab-bar:     #17171a;
  --bg-tab-inner:   #1b1b1e;
  --bg-tab-active:  #28282d;
  --bg-chip-bar:    #1b1b1e;
  --bg-chip-active: #28282d;

  --border:         rgba(255,255,255,0.09);
  --border-strong:  rgba(255,255,255,0.18);
  --border-input:   rgba(255,255,255,0.10);

  --text-primary:   #ededee;
  --text-secondary: #a0a0a8;
  --text-tertiary:  #82828b; /* nâng từ #6e6e76 — bớt chìm trên nền tối (contrast ~4.9) */

  --accent:         #FFD100;
  --accent-bg:      rgba(255,209,0,0.10);
  --accent-border:  rgba(255,209,0,0.50);

  --btn-ghost-bg:    #1b1b1e;
  --btn-ghost-color: #ededee;
  --btn-ghost-hover: #26262b;

  --shadow-sm: 0 1px 6px rgba(0,0,0,0.55);
  --shadow-md: 0 4px 32px rgba(0,0,0,0.65);
  --scrollbar-thumb: rgba(255,255,255,0.18);
}

/* ── Theme switch: 1s transition on all color props ── */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition:
    background-color 1s cubic-bezier(0.4, 0, 0.2, 1),
    background     1s cubic-bezier(0.4, 0, 0.2, 1),
    border-color   1s cubic-bezier(0.4, 0, 0.2, 1),
    color          1s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow     1s cubic-bezier(0.4, 0, 0.2, 1),
    text-shadow    1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  overflow: hidden;
}
/* #root chứa app (đúng 1 màn hình) + khối giới thiệu SEO nằm ngay dưới. overflow:hidden
   vẫn cho trình duyệt TỰ cuộn khi focus/đưa nút vào tầm nhìn → cả app trượt lên, mất header
   (gặp ở studio Jersey trên điện thoại). clip chặn mọi kiểu cuộn. */
@supports (overflow: clip) {
  #root { overflow: clip; }
}

body {
  font-family: var(--font-outfit), 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

button:focus-visible {
  outline: 2px solid #0f0f0f;
  outline-offset: 2px;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dvh = viewport thực tế trên mobile (trừ thanh địa chỉ động).
                     100vh trên mobile là "large viewport" → đẩy toolbar (bottom:0)
                     xuống dưới nếp gấp khi thanh URL hiện. Trình duyệt cũ bỏ qua dvh → về 100vh. */
}

/* Trang chính (tab editor) cuộn được để lộ "Sản phẩm thật" ở đáy. */
.app--home { overflow-y: auto; overflow-x: hidden; }
.app__viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Khung màn hình đầu tiên bám đúng viewport thực → toolbar (bottom:0)
                     luôn nằm trong tầm nhìn, không bị thanh địa chỉ mobile che. */
  position: relative;
  flex: 0 0 auto;
}
/* Toolbar bám đáy khung công cụ (cuộn xuống thì trôi theo, không đè lên section).
   CHỈ desktop: mobile phải giữ `position: fixed` (Toolbar.css @media) để bám đáy
   VÙNG-NHÌN động — nếu để absolute, trên máy thật toolbar bám mốc 100dvh (thanh URL
   ẩn) nên "lơ lửng giữa" khi thanh URL hiện + lệch với sheetbar (vốn fixed). */
@media (min-width: 769px) {
  .app--home .toolbar { position: absolute; }
}

/* Dải "Sản phẩm đã thực hiện" — FULL-WIDTH ở ranh giới khung công cụ ↔ gallery.
   Full-width nên KHÔNG bao giờ đè toolbar (căn giữa) ở bất kỳ cỡ màn nào — thay
   cho pill nổi cũ (.scroll-cue) vốn va toolbar ở dải 769–1268px và bị chip bar
   che trên mobile. Desktop: rút .app__viewport ngắn 48px (.app--has-strip) để
   dải lộ ngay đáy fold. Mobile: dải là header của gallery, cuộn tới tự nhiên. */
.gallery-strip {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  border: none; border-top: 1px solid var(--border);
  background: var(--bg-sidebar); color: var(--text-secondary);
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.gallery-strip:hover { background: var(--bg-tab-active); color: var(--text-primary); }
.gallery-strip__chev { width: 15px; height: 15px; color: var(--accent); animation: scroll-cue-bob 1.6s ease-in-out infinite; }
@keyframes scroll-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Rút khung đầu tiên đúng chiều cao dải → dải lộ ở đáy fold (desktop). */
.app--has-strip .app__viewport { height: calc(100dvh - 48px); }
/* Mobile: giữ full 100dvh — dải là header gallery, cuộn tới (đáy đã chật: sheetbar + toolbar). */
@media (max-width: 768px) { .app--has-strip .app__viewport { height: 100dvh; } }

/* Nút "Về công cụ" — nổi khi đã cuộn xuống gallery, đưa khách về khung thiết kế. */
.back-to-top {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px;
  z-index: 200;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-input); background: var(--bg-card); color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md); cursor: pointer;
  animation: btt-in .2s ease;
}
.back-to-top:hover { border-color: var(--accent); }
.back-to-top svg { width: 15px; height: 15px; color: var(--accent); }
@keyframes btt-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* Mobile: the editor's two fixed bottom bars stay up while browsing the gallery, so the
   pill sits above them and the page ends with room to scroll the footer clear of them. */
@media (max-width: 768px) {
  .back-to-top { bottom: calc(var(--startee-toolbar-h, 50px) + var(--startee-sheetbar-h, 48px) + 12px + env(safe-area-inset-bottom, 0px)); }
  /* + 64px: room for the floating pill and Nexa bubble above the bars */
  .app .ed-footer { padding-bottom: calc(var(--startee-toolbar-h, 50px) + var(--startee-sheetbar-h, 48px) + 64px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .gallery-strip__chev { animation: none; } }

.app__workspace {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  min-height: 0;
}

.app__main {
  flex: 1 1;
  display: flex;
  overflow: hidden;
  position: relative; /* containing block cho overlay empty-state (Phase 3) */
}

/* ── Mobile ── */
@media (max-width: 768px) {
  /* Chiều cao 2 thanh đáy của editor — KHOÁ bằng biến để mọi nơi (toolbar, sheetbar,
     nút Nexa, padding canvas) tính vị trí khớp nhau. Trước đây các con số 56/46 rải rác
     nhiều file và lệch nhau (sheetbar thực tế cao 71px do nhãn xuống 2 dòng) khiến nút
     Nexa bị sheetbar (z:150) che mất đáy. Gom về đây + ép thanh gọn lại cho đỡ chiếm chỗ. */
  .app {
    --startee-toolbar-h: 50px;   /* thanh View/Front/Back + Thêm giỏ (đáy cùng) */
    --startee-sheetbar-h: 48px;  /* thanh chip Sản phẩm/Màu/Vị trí in/Thiết kế (trên toolbar) */
  }

  .app__workspace {
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--startee-toolbar-h); /* chỗ cho toolbar fixed */
    min-height: 0;
  }

  .app__main {
    flex: 1 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* bắt buộc — flex item co lại được để scroll hoạt động */
  }
}

.processing-overlay {
  position: fixed;
  inset: 0;

  background: rgba(0,0,0,.55);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 99999;

  -webkit-backdrop-filter: blur(4px);

          backdrop-filter: blur(4px);
}

.processing-modal {
  background: white;

  padding: 32px;

  border-radius: 16px;

  min-width: 320px;

  text-align: center;

  box-shadow:
    0 20px 60px rgba(0,0,0,.25);
}

.processing-modal h3 {
  margin: 16px 0 8px;
}

.processing-modal p {
  margin: 0;
}

.processing-spinner {
  width: 50px;
  height: 50px;
  margin: 10px auto 20px;
  border: 3px solid rgba(0, 122, 255, 0.1);
  border-top-color: var(--accent, #131316);
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

.processing-modal-desc {
  margin: 10px 0 0;
  font-size: 13px;
  color: #8e8e93;
  line-height: 1.5;
}

.processing-logo--success {
  color: #34c759; /* Apple Green */
  animation: bounceSuccess 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes bounceSuccess {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.processing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  animation: fadeInActions 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInActions {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.processing-modal {
  width: 420px;
  max-width: calc(100vw - 32px);

  background: #fff;

  border-radius: 20px;

  padding: 30px;

  text-align: center;

  box-shadow:
    0 25px 60px rgba(0,0,0,.2);
}

.processing-logo {
  font-size: 48px;
  margin-bottom: 12px;

  animation: pulse 1.5s infinite;
}

.processing-steps {
  margin-top: 20px;

  text-align: left;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* ── Mobile: drop the heavy blur on full-screen scrims ──
   `backdrop-filter: blur()` forces the GPU to recompose the whole page every
   frame — brutal on phones, and while a synchronous task (AI remove-bg / effect)
   blocks the main thread it "freezes" mid-blur, so the sidebar underneath looks
   smeared. A plain dark scrim reads the same but costs almost nothing. */
@media (max-width: 768px) {
  .processing-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.62);
  }
}

/* ── Main Area and FAB Transitions ── */
.app__main {
  animation: mainFadeScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sidebar-fab {
  animation: fabBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes mainFadeScale {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fabBounce {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}


/* ══════════════════════════════════════════════════════════════════════════
   RAIL công cụ (Workspace 2.0) — thay thanh tab ngang .app__tabs (đã bỏ khỏi JSX).
   Desktop: cột dọc 68px bên trái workspace, mở rộng vô hạn bằng cách thêm icon.
   Mobile: workspace là column nên rail tự thành thanh NGANG ở đỉnh.
   ══════════════════════════════════════════════════════════════════════════ */
.app__rail {
  flex: 0 0 auto;
  display: flex;
  background: var(--bg-tab-bar);
  border-right: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.app__rail-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  width: 68px;
}
.rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.rail-btn:hover { color: var(--text-primary); background: var(--btn-ghost-hover, rgba(0, 0, 0, 0.04)); }
.rail-btn--active { background: var(--bg-tab-active); color: var(--text-primary); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .rail-btn--active { color: #FFD100; background: #2a2a30; box-shadow: 0 0 0 1px rgba(255,209,0,0.15), 0 2px 8px rgba(0,0,0,0.4); }
.rail-btn__icon {
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.rail-btn__ai-ico { width: 20px; height: 20px; display: block; }
[data-theme="dark"] .rail-btn--ai.rail-btn--active .rail-btn__ai-ico { color: #FFD100; }
.rail-btn__label { font-size: 10px; line-height: 1; letter-spacing: 0.02em; }
.app__rail-sep { height: 1px; margin: 4px 6px; background: var(--border-strong, rgba(0, 0, 0, 0.1)); }

@media (max-width: 768px) {
  /* Rail → thanh ngang ở đỉnh (workspace là column trên mobile) */
  .app__rail { border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
  .app__rail::-webkit-scrollbar { display: none; }
  .app__rail-inner { flex-direction: row; width: 100%; padding: 8px 10px; gap: 6px; }
  .rail-btn { flex: 1 1; flex-direction: row; gap: 6px; padding: 8px 6px; font-size: 12px; border-radius: 10px; }
  .rail-btn__icon, .rail-btn__ai-ico { width: 17px; height: 17px; }
  .app__rail-sep { display: none; }
}
@media (max-width: 420px) {
  /* 6 công cụ (thêm Bandana) không vừa 1 hàng icon+nhãn ngang trên 375px → icon trên, nhãn dưới. */
  .rail-btn { flex-direction: column; gap: 3px; padding: 6px 2px; }
  .rail-btn__label { font-size: 10px; }
}

/* ── Mockup Disclaimer Banner ── */
.mockup-disclaimer {
  padding: 8px 16px;
  background: transparent;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  margin-top: 4px;
}

.disclaimer-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary); /* fine-print trung tính — bỏ đỏ (đỏ chỉ dành cho badge giỏ) */
  margin: 0;
  letter-spacing: 0.2px;
  text-align: center;
}

.disclaimer-note--print {
  font-weight: 500;
  font-size: 11px;
}

.disclaimer-ico {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .app__workspace--full {
    padding-bottom: 0 !important;
  }

  .contact-fab__btn {
    width: 44px;
    height: 44px;
  }

  .contact-fab__assistant {
    width: 44px;
    height: 44px;
  }

  .sidebar-fab {
    bottom: 72px;
    width: 44px;
    height: 44px;
  }
}

/* ── Safe area insets (iPhone notch / home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .app__workspace {
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   Công cụ AI — nút gộp trên thanh tab + drawer chứa Tách nền / Vector / Effect
   ══════════════════════════════════════════════════════════════════════════ */

.aitools {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.32s;
}
.aitools--open { transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }

.aitools__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.aitools__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  flex-shrink: 0;
}
.aitools__title svg { width: 19px; height: 19px; }
[data-theme="dark"] .aitools__title svg { color: #FFD100; }

.aitools__subtabs {
  display: flex;
  gap: 3px;
  background: var(--bg-tab-inner);
  border-radius: 11px;
  padding: 3px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.aitools__subtabs::-webkit-scrollbar { display: none; }
.aitools__subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.aitools__subtab:hover { color: var(--text-primary); }
.aitools__subtab.is-active { background: var(--bg-tab-active); color: var(--text-primary); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .aitools__subtab.is-active { color: #FFD100; background: #2a2a30; }
.aitools__subicon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.aitools__label-short { display: none; }
.aitools__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.aitools__close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.aitools__close svg { width: 20px; height: 20px; }

.aitools__body {
  flex: 1 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 768px) {
  .aitools__head { gap: 8px; padding: 8px 10px; }
  .aitools__title { font-size: 0; gap: 0; } /* ẩn chữ, giữ icon ✨ */
  .aitools__title svg { width: 22px; height: 22px; }
  .aitools__subtabs { margin: 0; flex: 1 1; min-width: 0; overflow: hidden; }
  .aitools__subtab { flex: 1 1; min-width: 0; justify-content: center; padding: 7px 5px; font-size: 11.5px; }
  .aitools__subicon { display: none; }
  .aitools__label-full { display: none; }
  .aitools__label-short { display: inline; }
}

/* Bottom sheet mobile (P1.1): editor chừa chỗ cho chip bar + scrim nhạt */
@media (max-width: 768px) {
  .app__workspace:not(.app__workspace--full) {
    padding-bottom: calc(56px + 46px + env(safe-area-inset-bottom, 0));
  }
  .sidebar-overlay--sheet { background: rgba(0, 0, 0, 0.16); }
}

/* Banner "Sửa thiết kế từ giỏ" (P2.1) */
.edit-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px;
  background: #fbf3d8; border-bottom: 1px solid #ecd79a;
  color: #6b5200; font-size: 13px; font-weight: 600;
}
.edit-banner__text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.edit-banner__text svg { width: 15px; height: 15px; flex-shrink: 0; }
.edit-banner__cancel {
  border: 1px solid #ecd79a; background: #fff; color: #6b5200;
  border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.edit-banner__cancel:hover { background: #fbf3d8; }
[data-theme="dark"] .edit-banner { background: #2a2312; border-color: #5a4a1e; color: #e6c24d; }
[data-theme="dark"] .edit-banner__cancel { background: #1a1a1a; border-color: #5a4a1e; color: #e6c24d; }
@media (max-width: 768px) { .edit-banner { font-size: 12px; padding: 7px 12px; } .edit-banner__text span { display: inline; } }

/* Banner "Thiết kế áo tiếp theo" (sau khi thêm 1 thiết kế vào giỏ) — dùng khung edit-banner,
   CTA vàng thương hiệu (gold chỉ dùng cho CTA). */
.next-banner__actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.next-banner__go { background: #FFD100; border-color: #FFD100; color: #111; }
.next-banner__go:hover { background: #ffdb33; }
.next-banner__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent;
  color: inherit; cursor: pointer; padding: 0;
}
.next-banner__close svg { width: 15px; height: 15px; }
.next-banner__close:hover { background: rgba(0, 0, 0, 0.06); }
[data-theme="dark"] .next-banner__go { background: #FFD100; border-color: #FFD100; color: #111; }
[data-theme="dark"] .next-banner__close:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 480px) { .next-banner__go { padding: 5px 9px; } }

/* Nexa đang vẽ ảnh lên áo → khoá đổi công cụ (bấm vẫn được chặn + báo bằng toast) */
.app__rail--locked .rail-btn { opacity: 0.4; cursor: not-allowed; }