/* ============================================================
   style.css — Banner mockup + component styles
   (layout tổng dùng Tailwind trong index.html)
   ============================================================ */

/* ---------- BANNER MOCKUP ----------
   Kích thước dùng cqw → co giãn theo khung. Màu set qua JS. */
.banner{
  --grid:#1A1A1A; --outline:#000000;
  container-type: inline-size;
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  background: #111111;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
  user-select: none;
}
.bn-grid{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(var(--grid) 0.25cqw, transparent 0.25cqw),
    linear-gradient(90deg, var(--grid) 0.25cqw, transparent 0.25cqw);
  background-size: 6cqw 6cqw;
  opacity:.85;
}
.bn-brush{
  position:absolute; z-index:1;
  left:1.5%; top:13.5%;
  width:55cqw; height:31cqw;
  border-radius: 47% 53% 62% 38% / 58% 47% 53% 42%;
  transform: rotate(-7deg);
  filter: blur(0.35cqw);
}
.bn-content{ position:absolute; inset:0; z-index:2; }
.bn-vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow: inset 0 0 17cqw 6cqw rgba(0,0,0,.55);
}
.bn-content > *{ position:absolute; }

.bn-ribbon{
  top:0; left:0;
  transform: skewX(-12deg) translateX(-16%);
  background:#E8302A;
  padding:1.2cqw 5.5cqw 1.2cqw 8cqw;
  box-shadow:0 0.6cqw 1.4cqw rgba(0,0,0,.45);
}
.bn-ribbon span{
  display:inline-block; transform:skewX(12deg);
  color:#fff; font-weight:800; font-size:3cqw; letter-spacing:.06em;
}
.bn-circle{
  top:4cqw; right:4cqw;
  width:18cqw; height:18cqw; border-radius:50%;
  background:#E8302A;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  box-shadow:0 0.6cqw 1.4cqw rgba(0,0,0,.45);
}
.bn-circle .ic{ font-size:5.4cqw; line-height:1; }
.bn-circle .tx{ color:#fff; font-weight:800; font-size:2cqw; line-height:1.05; margin-top:.5cqw; }

.bn-headline{ left:6%; top:12.5%; width:56%; }
.bn-qty{
  font-family:'Anton',sans-serif;
  font-size:25cqw; line-height:.8; color:#fff;
  -webkit-text-stroke:0.7cqw var(--outline);
  letter-spacing:.005em;
}
.bn-name{
  font-weight:900; font-size:5.6cqw; line-height:1.02;
  color:#fff; text-transform:uppercase; margin-top:1.6cqw;
}
.bn-size{ font-size:2.9cqw; color:#CCC; margin-top:1.1cqw; }

.bn-price{ left:6%; top:55%; }
.bn-price-prefix{ font-style:italic; font-weight:600; font-size:3cqw; color:#fff; }
.bn-slab{ display:inline-block; margin-top:.6cqw; padding:.7cqw 3cqw; }
.bn-slab .amt{ font-family:'Anton',sans-serif; font-size:11cqw; line-height:1; color:#fff; }
.bn-underline{ height:1.5cqw; margin-top:.5cqw; background:#E8302A; border-radius:1cqw; }

.bn-features{ left:6%; bottom:13%; display:flex; gap:2.6cqw; }
.bn-feat{ display:flex; align-items:center; gap:1.4cqw; }
.bn-feat-ic{
  width:8.4cqw; height:8.4cqw; border-radius:50%;
  border:0.6cqw solid #22C55E;
  display:flex; align-items:center; justify-content:center;
  font-size:3.8cqw; flex:none;
}
.bn-feat-t{ font-weight:800; font-size:2.5cqw; line-height:1; }
.bn-feat-s{ font-weight:400; font-size:1.7cqw; line-height:1.15; margin-top:.4cqw; max-width:17cqw; opacity:.85; }

.bn-product{ right:1.5%; top:25%; width:44cqw; height:48cqw; }
.bn-sticker{
  position:absolute; width:21cqw; height:21cqw; border-radius:3.5cqw;
  border:0.9cqw solid #fff;
  display:flex; align-items:center; justify-content:center; font-size:10cqw;
  box-shadow:0 1.2cqw 2.4cqw rgba(0,0,0,.55);
}
.bn-footer{ left:0; right:0; bottom:0; width:100%; padding:1.9cqw 3cqw; text-align:center; }
.bn-tagline{ font-weight:800; font-size:2.9cqw; line-height:1.15; }
.bn-foot-badges{ display:flex; justify-content:center; gap:3.4cqw; margin-top:1.1cqw; }
.bn-foot-badge{ display:flex; align-items:center; gap:.6cqw; font-weight:700; font-size:1.8cqw; }

/* ---------- TABS ---------- */
.tab{
  flex:1; font-size:13px; font-weight:700; padding:10px;
  border:0; background:#e2e8f0; color:#64748b; cursor:pointer;
  transition:background .12s;
}
.tab:first-child{ border-radius:9px 0 0 9px; }
.tab:last-child{ border-radius:0 9px 9px 0; }
.tab.is-active{ background:#0f172a; color:#fff; }

/* ---------- SETUP CONTROLS ---------- */
.theme-btn{
  font-size:12px; font-weight:600; padding:7px 11px;
  border:1px solid #cbd5e1; border-radius:8px; background:#fff;
  color:#475569; cursor:pointer;
}
.theme-btn.is-active{ background:#0f172a; color:#fff; border-color:#0f172a; }
.chip{
  width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  outline:3px solid transparent; outline-offset:2px; transition:outline-color .12s;
}
.chip.is-active{ outline-color:#0f172a; }

/* ---------- EDIT PART ACCORDION ---------- */
.part{
  border:1px solid #e2e8f0; border-radius:10px;
  margin-bottom:8px; background:#fff; overflow:hidden;
}
.part[open]{ box-shadow:0 1px 3px rgba(0,0,0,.06); }
.part-sum{
  list-style:none; cursor:pointer; padding:11px 13px;
  display:flex; align-items:center; gap:8px; user-select:none;
}
.part-sum::-webkit-details-marker{ display:none; }
.part-sum:hover{ background:#f8fafc; }
.part-title{ font-size:13px; font-weight:700; color:#0f172a; }
.part-badge{
  font-size:10px; font-weight:700; color:#6366f1;
  background:#eef2ff; padding:2px 7px; border-radius:99px;
}
.part-body{ padding:2px 13px 12px; border-top:1px solid #f1f5f9; }
.part-tools{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; border-bottom:1px dashed #e2e8f0; margin-bottom:4px;
}
.raw-toggle{
  font-size:12px; font-weight:600; color:#475569;
  display:flex; align-items:center; gap:6px; cursor:pointer;
}
.part-reset{
  font-size:11px; font-weight:600; color:#64748b;
  background:none; border:0; cursor:pointer;
}
.part-reset:hover{ color:#ef4444; }
.raw-text{
  width:100%; font-family:ui-monospace,Menlo,monospace; font-size:12px;
  padding:9px; border:1px solid #cbd5e1; border-radius:7px; resize:vertical;
}
.raw-text:focus{ outline:2px solid #6366f1; outline-offset:-1px; }
.raw-hint{ font-size:11px; color:#94a3b8; margin-top:5px; }

/* ---------- FIELD ROW ---------- */
.fld{ padding:9px 0; border-bottom:1px solid #f1f5f9; }
.fld:last-child{ border-bottom:0; }
.fld-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.fld-label{ font-size:12px; font-weight:600; color:#475569; }
.fld-dot{ display:none; color:#6366f1; margin-left:5px; font-size:8px; vertical-align:middle; }
.fld-revert{
  display:none; font-size:11px; font-weight:600; color:#6366f1;
  background:none; border:0; cursor:pointer;
}
.fld-revert:hover{ text-decoration:underline; }
.fld.is-touched .fld-dot{ display:inline; }
.fld.is-touched .fld-revert{ display:inline-flex; }
.fld-color{ display:flex; align-items:center; gap:8px; }
.fld-color input[type=color]{
  width:38px; height:34px; border:1px solid #cbd5e1; border-radius:7px;
  padding:2px; cursor:pointer; background:#fff; flex:none;
}
.fld-hex{
  width:92px; font-family:ui-monospace,Menlo,monospace; text-transform:uppercase;
  font-size:12px; padding:7px 8px; border:1px solid #cbd5e1; border-radius:7px;
}
.fld-cname{ font-size:11px; color:#94a3b8; }
.fld-input{
  width:100%; font-size:13px; padding:7px 9px;
  border:1px solid #cbd5e1; border-radius:7px; background:#fff;
}
textarea.fld-input{ resize:vertical; }
.fld-input:focus, .fld-hex:focus{
  outline:2px solid #6366f1; outline-offset:-1px; border-color:#6366f1;
}

/* ---------- WARNINGS ---------- */
.warn{
  display:inline-block; font-size:11px; font-weight:600;
  color:#b45309; background:#fef3c7; border:1px solid #fde68a;
  border-radius:6px; padding:3px 8px; margin:2px 4px 2px 0;
}