/* ============================================================
   style-all.css — CSS viết mới cho Bước 1/2/3(substep 1-3), layout
   copy từ aoc/mockup.html (.step-card-box / .cards-row-grid /
   .substep-progress-bar...), dùng token css/tokens.css thay hex thô.
   ĐỘC LẬP khỏi bootstrap-theme.css/aoc-wow.css/components.css/
   workspace.css cho các phần đã redesign.

   Ngoại lệ BẮT BUỘC (tên class do main.js hard-code, không đổi
   được — nhưng style của chúng vẫn do file NÀY định nghĩa, không
   kế thừa từ CSS cũ): d-none, zone-locked, drag-over, attn, style-card.
   ============================================================ */

/* ── Trạng thái ẩn/hiện bắt buộc (tên do main.js hard-code) ──── */
.aoc-w1 .d-none,
.aoc-w2 .d-none {
  display: none !important;
}

/* FIX KHẨN: #colorDetailMount (modal "Chi tiết màu" — component
   ngoài phạm vi các panel redesign, do color-detail.js tự render)
   đang lộ ra ngay lúc tải trang thay vì ẩn kín (aoc-wow.css
   .color-detail vốn chỉ opacity:0 + pointer-events:none, KHÔNG
   display:none). Ép ẩn cứng bằng display:none cho tới khi có
   .is-open — an toàn tuyệt đối, không phụ thuộc opacity/transition. */
#colorDetailMount.color-detail:not(.is-open) {
  display: none !important;
}

/* ── Ẩn thuần trang trí (tên class TỰ đặt, không phải hook JS) ── */
.aoc-hidden,
.aoc-hidden-input {
  display: none !important;
}

/* ── Reset — cô lập .aoc-w1/.aoc-w2 khỏi style kế thừa Bootstrap/CSS cũ. ── */
.aoc-w1, .aoc-w1 *,
.aoc-w2, .aoc-w2 * {
  box-sizing: border-box;
}
.aoc-w1 button,
.aoc-w2 button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.aoc-w1 input[type="checkbox"] {
  appearance: none;
}
.aoc-w1 p, .aoc-w1 h1, .aoc-w1 h2, .aoc-w1 h3,
.aoc-w2 p, .aoc-w2 h1, .aoc-w2 h2, .aoc-w2 h3 {
  margin: 0;
}
.aoc-w1, .aoc-w2 {
  font-family: var(--font-ui, 'Montserrat', sans-serif);
  color: var(--ink, #2b2d29);
}

/* ============================================================
   Card ngang dùng chung Bước 1+2 — khớp .step-card-box mockup.html:
   viền mảnh, nền gần trắng, shadow rất nhẹ.
   ============================================================ */
.aoc-step-card-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5, 1.5rem);
  background: var(--surface, #fff);
  border: 1px solid var(--line-2, #dbdcd5);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-5, 1.5rem);
  box-shadow: 0 4px 16px rgba(24, 26, 22, .03);
  margin-bottom: var(--space-4, 1rem);
}

/* Badge số bước tròn — khớp .step-badge-circle mockup.html. */
.aoc-step-badge {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green, #2f7d57);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
}

.aoc-step-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.aoc-step-title {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-2, .5rem);
}

.aoc-step-sub {
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: var(--space-2, .5rem);
}

.aoc-verify-note {
  color: var(--danger, #a32222);
  font-weight: 700;
  font-size: .88rem;
  margin-top: var(--space-2, .5rem);
}

.aoc-link-btn {
  color: var(--danger, #a32222);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.aoc-link-btn:hover {
  color: var(--green-hover, #276a49);
}

.aoc-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-5, 1.5rem);
}

/* ── Nút pill dùng chung (btnNext1/btnNext2) ──────────────────── */
.aoc-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, .5rem);
  border-radius: var(--radius-pill, 999px);
  padding: .5rem 1.6rem;
  font-weight: 700;
  font-size: .85rem;
  border: 1px solid transparent;
  transition: transform var(--dur, .18s) var(--ease-out, ease),
              box-shadow var(--dur, .18s) var(--ease-out, ease),
              background var(--dur, .18s) var(--ease-out, ease),
              opacity var(--dur, .18s) var(--ease-out, ease);
}
.aoc-pill-btn-solid {
  background: var(--green, #2f7d57);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.aoc-pill-btn-solid:hover:not(:disabled) {
  background: var(--green-hover, #276a49);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.aoc-pill-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.aoc-pill-btn-lg {
  padding: .6rem 2rem;
  font-size: .9rem;
}
.aoc-pill-btn-outline {
  background: transparent;
  border-color: var(--line-2, #dbdcd5);
  color: var(--ink-2, #61635d);
}
.aoc-pill-btn-outline:hover {
  border-color: var(--green, #2f7d57);
  color: var(--green, #2f7d57);
}

.aoc-panel-nav {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4, 1rem);
}
.aoc-panel-nav-block {
  justify-content: flex-start;
}

/* Khung showcase — cùng viền/shadow/bo góc với .aoc-step-card-box phía
   trên để 2 khối nhìn thành 1 NHÓM thống nhất, không phải 2 kiểu rời
   rạc. CHỈ style wrapper ngoài cùng — nội dung con (.gs-head/.gs-
   carousel...) do gallery-showcase.js tự render, không đụng. */
.aoc-showcase-mount {
  background: var(--surface, #fff);
  border: 1px solid var(--line-2, #dbdcd5);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-5, 1.5rem);
  box-shadow: 0 4px 16px rgba(24, 26, 22, .03);
}

/* ============================================================
   Grid 3 cột dùng chung (showcase Bước 1 + style card Bước 2) —
   khớp .cards-row-grid mockup.html.
   ============================================================ */
.aoc-cards-row-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.5rem);
}
@media (max-width: 767.98px) {
  .aoc-cards-row-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BƯỚC 1 — Ô tải ảnh (#uploadZone) / preview (#previewBox)
   160×135, khớp box ảnh .step-card-box mockup.html.
   ============================================================ */
.aoc-upload-box {
  position: relative;
  flex: 0 0 auto;
  width: 160px;
  height: 135px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: var(--surface-2, #ebebeb);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  overflow: hidden;
  transition: opacity var(--dur, .18s) var(--ease-out, ease);
}

.aoc-upload-plus {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink-2, #444);
}

.aoc-upload-btn {
  background: var(--green, #2f7d57);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 999px);
  transition: background var(--dur, .18s) var(--ease-out, ease);
}
.aoc-upload-btn:hover {
  background: var(--green-hover, #276a49);
}

.aoc-upload-hint {
  font-size: .62rem;
  color: var(--ink-2, #777);
}

/* .drag-over — tên bắt buộc, JS toggle khi kéo file qua #uploadZone. */
.aoc-upload-box.drag-over {
  outline: 2px solid var(--green, #2f7d57) !important;
  outline-offset: -2px;
}

/* .zone-locked — tên bắt buộc, JS toggle theo checkbox xác thực. */
.aoc-upload-box.zone-locked {
  cursor: not-allowed;
  opacity: .55;
}
.aoc-upload-box.zone-locked .aoc-upload-btn {
  pointer-events: none;
}

/* .attn — tên bắt buộc, JS thêm/bớt để rung cảnh báo (remove→reflow→add). */
.aoc-upload-box.attn {
  animation: aocAttnShake .4s ease-out;
}
@keyframes aocAttnShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .aoc-upload-box.attn { animation: none; }
}

.aoc-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aoc-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink, #222);
  box-shadow: var(--shadow-card);
  font-size: .78rem;
}

/* ── Lỗi validate upload ──────────────────────────────────────── */
.aoc-error-msg:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--danger-soft, #fcecea);
  border: 1px solid var(--danger, #c0392b);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  margin-top: var(--space-2, .5rem);
  color: var(--danger, #c0392b);
  font-size: .78rem;
  line-height: 1.5;
}
.aoc-error-msg:not(:empty)::before {
  content: "⚠";
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .aoc-step-card-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .aoc-upload-box {
    width: 100%;
    height: 140px;
  }
}

/* ============================================================
   BƯỚC 2 — Nhận diện & chọn phong cách (.aoc-w2)
   ============================================================ */
.aoc-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, .25rem);
  color: var(--ink-2, #61635d);
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: var(--space-3, .75rem);
}
.aoc-back-btn:hover {
  color: var(--green, #2f7d57);
}

/* Ô ảnh nhà đang phân tích — 170×135 khớp .scan-preview-box mockup.html. */
.aoc-gate-photo {
  position: relative;
  flex: 0 0 auto;
  width: 170px;
  height: 135px;
  overflow: hidden;
  border-radius: var(--radius, 8px);
  background: var(--surface-2, #f6f7f4);
}
.aoc-gate-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aoc-gate-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
}
.aoc-gate-photo-overlay.d-none {
  display: none;
}
.aoc-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: aocSpin .8s linear infinite;
}
@keyframes aocSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aoc-spinner { animation-duration: 1.6s; }
}

/* Badge % tròn (conic-gradient) đè GIỮA ảnh — khớp .percent-circle-box
   mockup.html (65px ngoài, lớp nền tối 53px bên trong, chữ trắng đậm). */
.aoc-gate-photo-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--brand-orange, #f27a24) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .45) 0);
}
.aoc-gate-photo-badge::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(35, 35, 35, .8);
}
.aoc-gate-photo-badge-text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
}

/* #gateResult — mount JS-owned (gate-result.js tự render class gate-*).
   CHỈ style selector con, không hand-author nội dung. Dùng !important
   trên các rule ẨN để thắng tuyệt đối, bất kể thứ tự nạp CSS cũ
   (bootstrap-theme.css/aoc-wow.css có định nghĩa .gate-bar-track riêng
   với kích thước/màu — không có display, nhưng !important ở đây đảm bảo
   không bao giờ bị lộ ra dù cascade đổi thứ tự trong tương lai). */
.aoc-gate-card {
  flex: 1 1 auto;
  min-width: 0;
}
.aoc-gate-card.card,
.aoc-gate-card .card-header,
.aoc-gate-card .card-body {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.aoc-gate-card .gate-header {
  display: block;
  margin-bottom: var(--space-1, .25rem);
}
.aoc-gate-card .gate-icon,
.aoc-gate-card .gate-subtitle,
.aoc-gate-card .gate-msg,
.aoc-gate-card .gate-bar-track,
.aoc-gate-card .gate-palette-row,
.aoc-gate-card .gate-info-btn,
.aoc-gate-card .gate-meta-row {
  display: none !important;
}
.aoc-gate-card .gate-title {
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.aoc-gate-card .gate-fields {
  color: var(--ink-2, #61635d);
  font-size: .88rem;
  line-height: 1.5;
  margin-top: var(--space-2, .5rem);
}
.aoc-gate-card .gate-primary {
  margin-top: 2px;
}
.aoc-gate-card .gate-primary-eyebrow {
  font-size: .95rem;
  color: var(--ink-2, #666);
  font-weight: 500;
  margin-bottom: 2px;
}
.aoc-gate-card .gate-primary-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.aoc-gate-card .gate-primary-style-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: #333;
}
.aoc-gate-card .gate-primary-confidence {
  color: var(--brand-orange, #f27a24);
  font-weight: 700;
  font-size: 1.05rem;
}
.aoc-gate-card .gate-actions {
  margin-top: var(--space-2, .5rem);
}

/* Placeholder "Đang nhận diện…" — hiện SONG SONG với #gateResult trong
   markup (cả 2 luôn tồn tại trong DOM), nhưng CHỈ 1 trong 2 được thấy:
   #gateResult ẩn mặc định bằng .d-none (main.js show() khi có kết quả)
   → placeholder ẩn NGAY khi #gateResult hết .d-none (sibling selector),
   và ngược lại hiện khi #gateResult còn .d-none. */
.aoc-gate-loading-text {
  flex: 1 1 auto;
  min-width: 0;
}
.aoc-gate-loading-title {
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.aoc-gate-loading-sub {
  color: var(--ink-2, #61635d);
  font-size: .9rem;
  line-height: 1.5;
}
#gateResult:not(.d-none) ~ .aoc-gate-loading-text {
  display: none !important;
}

/* Grid 4 thẻ phong cách (#styleGrid) — dùng .aoc-cards-row-grid chung,
   nhưng cần 4 cột ở desktop rộng thay vì 3 (đặc thù riêng của lưới này). */
#styleGrid.aoc-cards-row-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991.98px) {
  #styleGrid.aoc-cards-row-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  #styleGrid.aoc-cards-row-grid {
    grid-template-columns: 1fr;
  }
}

/* Card phong cách — ảnh full-bleed 190px + tên đè trên ảnh (overlay) +
   thanh mã màu bên dưới, đúng mockup .architecture-card. Giữ class
   functional "style-card" (main.js query bằng tên này) song song. */
.aoc-style-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: var(--surface, #fff);
  box-shadow: 0 4px 14px rgba(24, 26, 22, .06);
  cursor: pointer;
  transition: transform var(--dur, .18s) var(--ease-out, ease),
              box-shadow var(--dur, .18s) var(--ease-out, ease);
}
.aoc-style-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.aoc-style-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: var(--surface-2, #f6f7f4);
}
.aoc-style-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aoc-style-card-overlay {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.aoc-style-card-tag {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
}
.aoc-style-name {
  display: block;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
}
.aoc-style-desc {
  display: none;
}

/* Overlay "Thử màu phong cách này" — chỉ hiện khi hover/focus, đè đáy ảnh. */
.style-try-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2, .5rem);
  background: linear-gradient(0deg, rgba(20, 22, 18, .75), transparent);
  opacity: 0;
  transition: opacity var(--dur, .18s) var(--ease-out, ease);
}
.aoc-style-card:hover .style-try-overlay,
.aoc-style-card:focus-visible .style-try-overlay {
  opacity: 1;
}
.aoc-style-try-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill, 999px);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  font-size: .74rem;
  font-weight: 700;
  color: #fff;
  background: var(--green, #2f7d57);
}

/* Thanh mã màu dưới ảnh — #styleGrid nạp .style-preview-dot qua
   renderStylePreviews() (main.js), không đụng JS, chỉ style pill nhỏ. */
.style-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2, #f6f7f4);
}
.style-preview:not(:empty) {
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
}
.style-preview-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .1);
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

@media (max-width: 575.98px) {
  .aoc-step-card-box.aoc-gate-frame,
  #wzPanel2 .aoc-step-card-box {
    flex-direction: column;
    align-items: stretch;
  }
  .aoc-gate-photo {
    width: 100%;
    height: 160px;
  }
}

/* ============================================================
   BƯỚC 3 substep 1-3 — Chọn màu (.aoc-w3), layout copy từ
   mockup.html view-3 (.substep-progress-bar/.substep-content-pane).
   #step3Assignment trở xuống KHÔNG thuộc phạm vi này — giữ CSS cũ.
   ============================================================ */
.aoc-w3 {
  font-family: var(--font-ui, 'Montserrat', sans-serif);
  color: var(--ink, #2b2d29);
}
/* Reset CHỈ áp cho phần tử MỚI (progress bar) — #step3Assignment trở
   xuống dùng nút Bootstrap .btn thật (#schemeGoRenderBtn...), KHÔNG
   được reset nhầm vì vẫn nằm trong cùng #wzPanel3.aoc-w3. */
.aoc-substep-item,
.aoc-back-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
}

.aoc-step3-header {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-5, 1.5rem);
}
.aoc-step3-badge {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: var(--green, #2f7d57);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
}
.aoc-step3-title {
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.aoc-step3-sub {
  font-size: .92rem;
  color: var(--ink-2, #444);
  max-width: 820px;
  line-height: 1.5;
  margin-top: 4px;
}

/* ── Progress bar 3 nấc (Màu yêu thích / Độ sáng / Bộ màu hãng) ──── */
.aoc-substep-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2, #f8faf9);
  border: 1px solid var(--line, #e0e8e3);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-3, .75rem) var(--space-5, 1.25rem);
  margin-bottom: var(--space-5, 1.5rem);
}
.aoc-substep-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  opacity: .5;
  transition: opacity var(--dur, .18s) var(--ease-out, ease);
  font-size: .9rem;
  color: var(--ink);
}
.aoc-substep-item.is-active {
  opacity: 1;
  font-weight: 700;
}
.aoc-substep-item.is-done {
  opacity: .9;
}
.aoc-substep-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line-2, #ccc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  flex: 0 0 auto;
}
.aoc-substep-item.is-active .aoc-substep-num {
  background: var(--green, #2f7d57);
}
.aoc-substep-item.is-done .aoc-substep-num {
  background: var(--info, #2a9d8f);
}
.aoc-substep-sep {
  flex: 1;
  height: 2px;
  background: var(--line, #e2e8f0);
  margin: 0 var(--space-3, .9rem);
}

/* ── Substep 1/2 — style ĐÈ lên markup/JS-hook THẬT (.step3a-group,
   .pref-bar, .cp-tone-presets...) — KHÔNG đổi cấu trúc/id, chỉ đổi
   giao diện cho khớp .preference-palette-row/.brightness-seg-tabs
   của mockup.html. wireStep3aAccordion() trong main.js vẫn cần đúng
   .step3a-group > .step3a-group-title — không đụng. ────────────── */
.aoc-w3 .step3a-group {
  scroll-margin-top: var(--space-6, 2rem);
  background: #fff;
  border: 1px solid var(--line, #e0e0e0);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  margin-bottom: var(--space-4, 1rem);
}
.aoc-w3 .step3a-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
}
.aoc-w3 .step3a-group-num {
  display: none;
}
.aoc-w3 .pref-bar {
  margin-top: var(--space-3, .75rem);
}
.aoc-w3 .pref-mini-label {
  font-size: .95rem !important;
  font-weight: 700;
  color: var(--ink);
}
/* #loveGrid/#hateGrid — JS-owned (renderPreferenceGrids trong main.js
   render .cp-family con) — CHỈ style container grid, không đụng con. */
.aoc-w3 .cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3, .75rem);
}
@media (max-width: 575.98px) {
  .aoc-w3 .cp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.aoc-w3 .tone-filter-switch-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.aoc-w3 .cp-tone-presets {
  display: flex;
  border: 1px solid var(--line-2, #d4d4d4);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: #fff;
  max-width: 600px;
  margin-top: var(--space-3, .75rem);
}
.aoc-w3 .cp-tone-btn {
  flex: 1;
  text-align: center;
  padding: var(--space-3, .75rem);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink-2, #555);
  border-right: 1px solid var(--line, #e0e0e0);
  border-radius: 0;
}
.aoc-w3 .cp-tone-btn:last-child {
  border-right: none;
}
.aoc-w3 .cp-tone-btn.active {
  background: var(--green, #2f7d57);
  color: #fff;
}

/* ── Substep 3: Bộ màu hãng — #step3aPhaseResult (đúng khớp
   .color-combos-grid/.combo-card mockup.html). ──────────────────── */
.aoc-w3 #step3aPhaseResult {
  scroll-margin-top: var(--space-6, 2rem);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line, #e4e4e4);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5, 1.5rem);
}
/* #step3ComboGrid — JS-owned (renderStep3ComboGrid trong main.js render
   .step3-combo-card con) — CHỈ style container grid, không đụng con. */
.aoc-w3 #step3ComboGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4, 1rem);
}
@media (max-width: 991.98px) {
  .aoc-w3 #step3ComboGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .aoc-w3 #step3ComboGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BƯỚC 3 substep 4 — Gán màu vị trí (#step3Assignment), khớp
   .paint-locations-grid/.location-box mockup.html.
   ============================================================ */
.aoc-scheme-block {
  scroll-margin-top: var(--space-6, 2rem);
  margin-top: var(--space-6, 2rem);
  padding-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--line, #e0e8e3);
}
.aoc-scheme-heading {
  margin-bottom: var(--space-4, 1rem);
}

.aoc-scheme-quick {
  background: #fff;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  margin-bottom: var(--space-4, 1rem);
}
.aoc-scheme-quick-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
}
.aoc-scheme-quick-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-size: .9rem;
  background: transparent;
  color: var(--ink);
}
.aoc-scheme-quick-hint {
  font-size: .76rem;
  color: var(--ink-2, #777);
  margin-top: 4px;
}

/* #schemeGrid — JS-owned (renderSchemeGrid trong main.js render .scheme-cell
   con) — CHỈ style container + class con, không hand-author markup. */
.aoc-scheme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 1rem);
  margin: var(--space-4, 1rem) 0 var(--space-6, 2rem);
}
@media (max-width: 767.98px) {
  .aoc-scheme-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .aoc-scheme-grid {
    grid-template-columns: 1fr;
  }
}

.scheme-cell {
  position: relative;
  background: #fcfcfc;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4, 1.1rem) var(--space-3, .9rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background var(--dur, .18s) var(--ease-out, ease),
              border-color var(--dur, .18s) var(--ease-out, ease);
}
.scheme-cell:hover {
  background: var(--green-tint, #f5f8f6);
  border-color: var(--green, #2f7d57);
}
.scheme-cell.disabled {
  opacity: .55;
}
.scheme-cell.scheme-cell-located {
  border-color: var(--green, #2f7d57);
  box-shadow: 0 0 0 2px var(--green-ring, rgba(47, 125, 87, .28));
}

.scheme-cell-main {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  color: var(--green, #2f7d57);
  cursor: pointer;
}
.scheme-cell-main svg {
  width: 2.1rem;
  height: 2.1rem;
}
.scheme-cell.disabled .scheme-cell-main {
  color: #a5a5a5;
}
.scheme-cell-label {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}
.scheme-cell.disabled .scheme-cell-label {
  color: #888;
}
.scheme-cell-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #d0d0d0;
  display: inline-block;
  margin-top: 2px;
}

.scheme-cell-check {
  position: absolute;
  top: 10px;
  right: 12px;
  cursor: pointer;
  color: var(--green, #2f7d57);
}
.scheme-cell-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.scheme-cell-check span {
  display: block;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-2, #bbb);
  border-radius: 4px;
}
.scheme-cell-check span::after {
  content: "";
  display: none;
}
.scheme-cell-check input:checked + span {
  border-color: var(--green, #2f7d57);
  background: var(--green, #2f7d57);
}

.scheme-cell-del {
  position: absolute;
  top: 8px;
  left: 10px;
  background: none;
  border: none;
  color: #999;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.scheme-cell-del:hover {
  color: var(--danger, #c0392b);
}

.scheme-cell-add {
  border-style: dashed;
  color: #888;
  cursor: pointer;
}
.scheme-cell-adding {
  gap: var(--space-2, .5rem);
}
.scheme-add-input {
  width: 100%;
  border: 1px solid var(--line-2, #ccc);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 10px;
  font-size: .85rem;
  text-align: center;
}
.scheme-add-actions {
  display: flex;
  gap: 6px;
}

/* ============================================================
   BƯỚC 4 — Tinh chỉnh & phối màu (.aoc-w4), header dùng chung
   .aoc-step3-header/.aoc-step3-badge/.aoc-back-btn với Bước 3.
   ============================================================ */
.aoc-w4 {
  font-family: var(--font-ui, 'Montserrat', sans-serif);
  color: var(--ink, #2b2d29);
}

/* #colorEditorMount → .ce-zones (JS-owned, mountColorEditor trong
   color-editor.js render .ce-zone con) — CHỈ style container + class
   con, không hand-author markup. Khớp .paint-locations-grid/.location-box
   mockup.html. */
.aoc-w4 .ce-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 1rem);
  margin: var(--space-4, 1rem) 0;
}
@media (max-width: 767.98px) {
  .aoc-w4 .ce-zones {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .aoc-w4 .ce-zones {
    grid-template-columns: 1fr;
  }
}

.aoc-w4 .ce-zone {
  position: relative;
  background: #fcfcfc;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4, 1.1rem) var(--space-3, .9rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  transition: background var(--dur, .18s) var(--ease-out, ease),
              border-color var(--dur, .18s) var(--ease-out, ease);
}
.aoc-w4 .ce-zone:hover {
  border-color: var(--green, #2f7d57);
  background: var(--green-tint, #f5f8f6);
}
.aoc-w4 .ce-zone.ce-dragging {
  opacity: .5;
}
.aoc-w4 .ce-zone.ce-drop {
  border-color: var(--green, #2f7d57);
  box-shadow: 0 0 0 2px var(--green-ring, rgba(47, 125, 87, .28));
}

.aoc-w4 .ce-zone-label {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}

.aoc-w4 .ce-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #d0d0d0;
  display: inline-block;
  cursor: grab;
}

.aoc-w4 .ce-edit-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--green, #2f7d57);
  font-size: .74rem;
  font-weight: 700;
  text-decoration: underline;
}

.aoc-w4 .ce-zone-body {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: inherit;
}

.aoc-w4 .ce-zone-clear {
  position: absolute;
  top: 8px;
  right: 8px;
}

.aoc-w4 .ce-zone-name {
  font-size: .72rem;
  color: var(--ink-2, #777);
}

.aoc-w4 .ce-add-cell {
  border-style: dashed;
  color: #888;
  cursor: pointer;
}

/* ── Checkbox làm sạch bề mặt ─────────────────────────────────── */
.aoc-clean-surface-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  margin: var(--space-3, .75rem) 0 var(--space-2, .5rem);
  font-size: .86rem;
  color: var(--ink);
  cursor: pointer;
}
.aoc-clean-surface-note {
  color: var(--ink-2, #777);
}

/* ── Nút "Phối màu ngay" + Lưu combo yêu thích ───────────────────── */
.aoc-run-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, .75rem);
  margin-top: var(--space-3, .75rem);
}
.aoc-run-btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, .5rem);
  background: var(--green, #2f7d57);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill, 999px);
  padding: .85rem 1.5rem;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 125, 87, .3);
  transition: background var(--dur, .18s) var(--ease-out, ease),
              transform var(--dur, .18s) var(--ease-out, ease);
}
.aoc-run-btn:hover {
  background: var(--green-hover, #276a49);
  transform: translateY(-2px);
}
.aoc-run-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.aoc-run-fav-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-2, #dbdcd5);
  background: #fff;
  color: var(--ink-2, #61635d);
  cursor: pointer;
}
.aoc-run-fav-btn[aria-pressed="true"] {
  color: var(--danger, #c0392b);
  border-color: var(--danger, #c0392b);
}
.aoc-run-hint {
  text-align: center;
  color: var(--ink-2, #777);
  font-size: .72rem;
  margin-top: 4px;
}