/* ==========================================================================
   Navi+ Illustration Kit — hình vẽ sơ đồ thay ảnh chụp (ILLUSTRATION-KIT.md)
   - Mọi kích thước tính bằng em; .ill-stage đặt font-size theo bề rộng khung
     (container query) nên cả hình co giãn như một tấm ảnh.
   - Màu chỉ lấy từ biến --ill-*. 1 màu nhấn = --ill-accent (chú thích + phần Navi+).
   - Dark: [data-bs-theme="dark"], html.dark, body.dark, .ill--dark,
     hoặc html[data-ill-theme="auto"] + hệ điều hành đang dark.
   ========================================================================== */

.ill,
.ill-inline {
  --ill-bg: #ffffff;
  --ill-canvas: #f3f4f6;
  --ill-line: #d5dae0;
  --ill-line-2: #e7eaee;
  --ill-ink: #1f2328;
  --ill-ink-2: #5c6570;
  --ill-mute: #a0a9b3;
  --ill-fill: #e8ecf0;
  --ill-fill-2: #f5f7f9;
  --ill-btn: #303030;
  --ill-btn-ink: #ffffff;
  --ill-on: #303030;
  --ill-ok: #1f9d63;
  --ill-danger: #d64545;
  --ill-accent: #303030; /* N6: nhấn của site = đen; xanh lá chỉ còn ở --ill-ok (trạng thái bật/đạt) */
  --ill-accent-2: #303030;
  --ill-accent-soft: rgba(48, 48, 48, 0.16);
  --ill-accent-tint: #ececec;
  --ill-on-accent: #ffffff;
  --ill-tip-bg: #1f2328;
  --ill-tip-ink: #ffffff;
  --ill-shadow: 0 0.15em 0.6em rgba(17, 24, 39, 0.08);
  --ill-shadow-pop: 0 0.4em 1.6em rgba(17, 24, 39, 0.16);
  --ill-scrim: rgba(17, 24, 39, 0.38);
}
.ill {
  container-type: inline-size;
  display: block;
  width: 100%;
  max-width: var(--ill-max, 820px);
  margin: 1.5rem auto;
  padding: 0;
  overflow-x: clip;
  overflow-clip-margin: 0.5rem;
}

[data-bs-theme="dark"] .ill,
[data-bs-theme="dark"] .ill-inline,
html.dark .ill,
html.dark .ill-inline,
body.dark .ill,
body.dark .ill-inline,
.ill.ill--dark {
  --ill-bg: #1d2127;
  --ill-canvas: #15181c;
  --ill-line: #39404a;
  --ill-line-2: #2c323a;
  --ill-ink: #e7eaee;
  --ill-ink-2: #a9b2bc;
  --ill-mute: #5f6873;
  --ill-fill: #2b3139;
  --ill-fill-2: #22272e;
  --ill-btn: #e7eaee;
  --ill-btn-ink: #15181c;
  --ill-on: #e7eaee;
  --ill-accent: #e3e3e3;
  --ill-accent-2: #e3e3e3;
  --ill-accent-soft: rgba(227, 227, 227, 0.22);
  --ill-accent-tint: #30353c;
  --ill-on-accent: #1a1a1a;
  --ill-ok: #3ecf8e;
  --ill-tip-bg: #f1f3f5;
  --ill-tip-ink: #15181c;
  --ill-shadow: 0 0.15em 0.6em rgba(0, 0, 0, 0.4);
  --ill-shadow-pop: 0 0.4em 1.6em rgba(0, 0, 0, 0.55);
  --ill-scrim: rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  html[data-ill-theme="auto"] .ill,
  html[data-ill-theme="auto"] .ill-inline {
    --ill-bg: #1d2127;
    --ill-canvas: #15181c;
    --ill-line: #39404a;
    --ill-line-2: #2c323a;
    --ill-ink: #e7eaee;
    --ill-ink-2: #a9b2bc;
    --ill-mute: #5f6873;
    --ill-fill: #2b3139;
    --ill-fill-2: #22272e;
    --ill-btn: #e7eaee;
    --ill-btn-ink: #15181c;
    --ill-on: #e7eaee;
    --ill-accent: #e3e3e3;
    --ill-accent-2: #e3e3e3;
    --ill-accent-soft: rgba(227, 227, 227, 0.22);
    --ill-accent-tint: #30353c;
    --ill-on-accent: #1a1a1a;
    --ill-ok: #3ecf8e;
    --ill-tip-bg: #f1f3f5;
    --ill-tip-ink: #15181c;
    --ill-shadow: 0 0.15em 0.6em rgba(0, 0, 0, 0.4);
    --ill-shadow-pop: 0 0.4em 1.6em rgba(0, 0, 0, 0.55);
    --ill-scrim: rgba(0, 0, 0, 0.55);
  }
}

/* Kích cỡ khung: sm/md/lg/full giới hạn bề rộng tối đa của cả hình */
.ill--sm { --ill-max: 360px; }
.ill--md { --ill-max: 560px; }
.ill--lg { --ill-max: 820px; }
.ill--full { --ill-max: none; }

.ill-stage {
  position: relative;
  font-size: 13px;
  font-size: calc(100cqw / var(--ill-em, 64));
  line-height: 1.35;
  color: var(--ill-ink);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  text-align: left;
  padding: 1.6em 1.4em;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.ill-stage *,
.ill-stage *::before,
.ill-stage *::after { box-sizing: border-box; }
.ill-stage b { font-weight: 650; }
.ill figcaption {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-muted, #6b7280);
  text-align: center;
}

/* ---------- icon ---------- */
.ill-ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.22em;
}

/* ---------- lớp chú thích: vòng, số, nhãn ---------- */
/* QUY TẮC: vòng số / vòng khoanh / nhãn nằm lệch ra ngoài phần tử, nên mọi phần tử chứa
   lớp chú thích (và cha trực tiếp của nó) phải để overflow:visible, nếu không sẽ bị cắt.
   Khung ngoài cùng (.ill) chừa 0.5rem + .ill-stage có padding. Kiểm bằng tools/ill-clip-check.py */
.ill-stage :has(> .ill-t > .ill-hl),
.ill-stage :has(> .ill-hl) { overflow: visible; }
.ill-stage .ill-hl, .ill-stage .ill-hl > * { overflow: visible; }
.ill-t { position: relative; }
.ill-t:has(> .ill-hl) { z-index: 6; }
.ill-hl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.ill-ring {
  position: absolute;
  inset: -0.32em;
  border: 0.17em solid var(--ill-accent);
  border-radius: 0.7em;
  box-shadow: 0 0 0 0.32em var(--ill-accent-soft);
}
.ill-hl--round .ill-ring { border-radius: 999px; }
.ill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--ill-accent);
  color: var(--ill-on-accent);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
  box-shadow: 0 0 0 0.18em var(--ill-bg);
}
.ill-hl > .ill-num {
  position: absolute;
  top: -1.05em;
  left: -1.05em;
  z-index: 2;
}
.ill-tip {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: 17em;
  padding: 0.55em 0.8em;
  border-radius: 0.55em;
  background: var(--ill-tip-bg);
  color: var(--ill-tip-ink);
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
  box-shadow: var(--ill-shadow-pop);
}
.ill-tip::before {
  content: "";
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  background: var(--ill-tip-bg);
  transform: rotate(45deg);
  translate: var(--ill-sx, 0) var(--ill-sy, 0); /* ill.js dịch nhãn vào trong khung → mũi nhọn dịch ngược để vẫn chỉ đúng chỗ */
}
/* b = dưới (mặc định), t = trên, r = phải, l = trái; bl/br/tl/tr = canh mép */
.ill-hl--b .ill-tip, .ill-hl--bl .ill-tip, .ill-hl--br .ill-tip { top: calc(100% + 0.95em); }
.ill-hl--t .ill-tip, .ill-hl--tl .ill-tip, .ill-hl--tr .ill-tip { bottom: calc(100% + 0.95em); }
.ill-hl--b .ill-tip, .ill-hl--t .ill-tip { left: 50%; transform: translateX(-50%); }
.ill-hl--bl .ill-tip, .ill-hl--tl .ill-tip { left: -0.3em; }
.ill-hl--br .ill-tip, .ill-hl--tr .ill-tip { right: -0.3em; }
.ill-hl--b .ill-tip::before, .ill-hl--bl .ill-tip::before, .ill-hl--br .ill-tip::before { top: -0.35em; }
.ill-hl--t .ill-tip::before, .ill-hl--tl .ill-tip::before, .ill-hl--tr .ill-tip::before { bottom: -0.35em; }
.ill-hl--b .ill-tip::before, .ill-hl--t .ill-tip::before { left: calc(50% - 0.4em); }
.ill-hl--bl .ill-tip::before, .ill-hl--tl .ill-tip::before { left: 1.2em; }
.ill-hl--br .ill-tip::before, .ill-hl--tr .ill-tip::before { right: 1.2em; }
.ill-hl--r .ill-tip { left: calc(100% + 0.95em); top: 50%; transform: translateY(-50%); }
.ill-hl--l .ill-tip { right: calc(100% + 0.95em); top: 50%; transform: translateY(-50%); }
.ill-hl--r .ill-tip::before { left: -0.35em; top: calc(50% - 0.4em); }
/* rr = phải XA: nhãn nhảy qua vùng bên cạnh (vd qua panel giữa của Visual Editor sang khoảng trống của khung xem trước)
   kèm đường gạch nối, để nhãn không đè nút/ô nhập. --ill-rr = khoảng nhảy (tính theo cỡ chữ nhãn). */
.ill-hl--rr .ill-tip { left: calc(100% + var(--ill-rr, 3em)); top: 50%; transform: translateY(-50%); }
.ill-hl--rr .ill-tip::before { left: -0.35em; top: calc(50% - 0.4em); }
.ill-hl--rr .ill-tip::after { content: ""; position: absolute; right: 100%; top: 50%; width: calc(var(--ill-rr, 3em) - 0.6em); border-top: 0.14em dashed var(--ill-accent); }
.ill-ve__rail .ill-hl--rr .ill-tip { --ill-rr: 29.5em; }
.ill-hl--l .ill-tip::before { right: -0.35em; top: calc(50% - 0.4em); }

/* làm mờ phần không được chú thích: focus="true" */
.ill--focus .ill-t:not(:has(.ill-hl)):not(.ill-t:not(:has(.ill-hl)) .ill-t) { opacity: 0.4; filter: grayscale(1); }

/* số tròn dùng trong câu chữ */
.ill-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: baseline;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  line-height: 1.2;
  color: var(--ill-ink);
}
.ill-inline .ill-num { font-size: 0.78em; min-width: 1.6em; height: 1.6em; box-shadow: none; vertical-align: 0.1em; }

/* ---------- nguyên tử: nút, ô nhập, công tắc, chip ---------- */
.ill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  height: 2.3em;
  padding: 0 0.95em;
  border-radius: 0.55em;
  border: 1px solid var(--ill-line);
  background: var(--ill-bg);
  color: var(--ill-ink);
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.ill-btn--primary {
  background: var(--ill-btn);
  border-color: var(--ill-btn);
  color: var(--ill-btn-ink);
  box-shadow: inset 0 -0.12em 0 rgba(255, 255, 255, 0.18);
}
.ill-btn--accent { background: var(--ill-accent); border-color: var(--ill-accent); color: var(--ill-on-accent); }
.ill-btn--plain { border-color: transparent; background: transparent; color: var(--ill-ink-2); padding: 0 0.4em; }
.ill-btn--link { border-color: transparent; background: transparent; color: #2463eb; padding: 0 0.2em; }
.ill-btn--danger { color: var(--ill-danger); }
.ill-btn--sm { height: 1.9em; padding: 0 0.7em; font-size: 0.9em; }
.ill-btn--icon { width: 2.3em; padding: 0; }
.ill-btn--up { text-transform: uppercase; letter-spacing: 0.02em; }
.ill-inline.ill-btn { height: auto; padding: 0.15em 0.6em; font-size: 0.86em; border-radius: 0.45em; vertical-align: 0.05em; }

.ill-field { display: flex; flex-direction: column; gap: 0.35em; }
.ill-field__label { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; font-size: 0.92em; color: var(--ill-ink-2); }
.ill-field__label small { font-size: 0.9em; color: var(--ill-mute); display: inline-flex; gap: 0.2em; align-items: center; }
.ill-input {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.4em;
  padding: 0 0.75em;
  border: 1px solid var(--ill-line);
  border-radius: 0.5em;
  background: var(--ill-bg);
  color: var(--ill-ink);
  font-size: 1em;
  white-space: nowrap;
  overflow: visible; /* không hidden: vòng số/nhãn lệch ra ngoài góc không bị cắt */
}
.ill-input__ph { color: var(--ill-mute); }
.ill-input .ill-ic { margin-left: auto; color: var(--ill-ink-2); }
.ill-inline.ill-input { display: inline-flex; min-height: 0; padding: 0.12em 0.55em; font-size: 0.86em; vertical-align: 0.05em; overflow: visible; }

.ill-switch { display: inline-flex; align-items: center; gap: 0.6em; font-weight: 600; }
.ill-switch__track {
  position: relative;
  width: 2.6em;
  height: 1.5em;
  border-radius: 999px;
  background: var(--ill-fill);
  border: 1px solid var(--ill-line);
  flex: none;
}
.ill-switch__track::after {
  content: "";
  position: absolute;
  top: 0.14em;
  left: 0.16em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 999px;
  background: var(--ill-bg);
  box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.25);
}
.ill-switch.is-on .ill-switch__track { background: var(--ill-on); border-color: var(--ill-on); }
.ill-switch.is-on .ill-switch__track::after { left: auto; right: 0.16em; background: var(--ill-btn-ink); }
.ill-switch--accent.is-on .ill-switch__track { background: var(--ill-ok); border-color: var(--ill-ok); }
.ill-inline.ill-switch { font-size: 0.86em; vertical-align: -0.15em; font-weight: 600; }

.ill-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  height: 1.6em;
  padding: 0 0.55em;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--ill-fill);
  color: var(--ill-ink-2);
  white-space: nowrap;
}
.ill-chip--on { background: var(--ill-accent-tint); color: var(--ill-accent-2); }
.ill-chip--off { background: var(--ill-fill); color: var(--ill-ink-2); }
.ill-chip--dark { background: var(--ill-btn); color: var(--ill-btn-ink); }
.ill-chip--bad { background: var(--ill-bad-bg); color: var(--ill-bad-ink); }
.ill-note-warn { background: var(--ill-warn-bg) !important; border-color: var(--ill-warn-line) !important; color: var(--ill-warn-ink); box-shadow: none !important; }
.ill, .ill-inline { --ill-bad-bg: #fde8e8; --ill-bad-ink: #b42318; --ill-warn-bg: #fff7e0; --ill-warn-line: #f1d48a; --ill-warn-ink: #6b4e00; }
[data-bs-theme="dark"] .ill, html.dark .ill, body.dark .ill, .ill.ill--dark { --ill-bad-bg: #3d1d1d; --ill-bad-ink: #ff9b9b; --ill-warn-bg: #352b10; --ill-warn-line: #6b5520; --ill-warn-ink: #f5d77f; }
.ill-check { display: inline-flex; align-items: center; gap: 0.45em; }
.ill-check::before {
  content: "";
  width: 1em; height: 1em; border-radius: 0.25em;
  border: 1px solid var(--ill-line); background: var(--ill-bg);
}
.ill-check.is-on::before { background: var(--ill-on); border-color: var(--ill-on); box-shadow: inset 0 0 0 0.2em var(--ill-bg); }
.ill-radio { display: inline-flex; align-items: center; gap: 0.45em; }
.ill-radio::before { content: ""; width: 1em; height: 1em; border-radius: 999px; border: 1px solid var(--ill-line); background: var(--ill-bg); flex: none; }
.ill-radio.is-on::before { border: 0.32em solid var(--ill-on); }

/* thanh xám thay chữ (skeleton) */
.ill-bar { display: block; height: 0.55em; border-radius: 999px; background: var(--ill-fill); }
.ill-bar--dark { background: var(--ill-line); }
.ill-bar + .ill-bar { margin-top: 0.45em; }
.ill-ph {
  display: block;
  position: relative;
  border-radius: 0.5em;
  background: var(--ill-fill-2);
  border: 1px solid var(--ill-line-2);
  overflow: hidden;
}
.ill-ph::before, .ill-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--ill-line-2) 50%, transparent calc(50% + 0.5px));
}
.ill-ph::after { transform: scaleX(-1); }

/* nhãn góc hình (tag="Trước" state="bad|good") */
.ill-tag {
  position: absolute; top: 0.2em; left: 0.4em; z-index: 8;
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.25em 0.7em; border-radius: 999px;
  background: var(--ill-tip-bg); color: var(--ill-tip-ink);
  font-size: 0.95em; font-weight: 700;
}
.ill-tag .ill-ic { width: 1em; height: 1em; stroke-width: 2.6; }
.ill-tag--bad { background: var(--ill-danger); color: #fff; }
.ill-tag--good { background: var(--ill-ok); color: #fff; }

/* lưới nhiều hình (viết trong markdown: <div class="ill-grid ill-grid--3"> ... </div>) */
.ill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 1.5rem 0; align-items: start; }
.ill-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ill-grid > .ill { margin: 0; max-width: none; }
@media (max-width: 575px) {
  .ill-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* mũi tên nối các khung */
.ill-flow { display: flex; align-items: center; justify-content: center; gap: 1em; flex-wrap: nowrap; }
.ill-flow > .ill-flow__item { flex: 1 1 0; min-width: 0; }
.ill-arrow { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 0.3em; color: var(--ill-accent); font-weight: 700; font-size: 0.9em; }
.ill-arrow .ill-ic { width: 2.2em; height: 2.2em; stroke-width: 2.2; }
.ill-arrow span { font-size: 0.85em; color: var(--ill-ink-2); }
.ill-flow { align-items: stretch; }
.ill-flow > .ill-arrow { align-self: center; }
.ill-flow--v { flex-direction: column; align-items: stretch; gap: 0.5em; }
.ill-flow__box { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0.45em; padding: 1.1em 0.9em; }
.ill-flow__box b { font-size: 1.05em; }
.ill-flow__ic { width: 3em; height: 3em; border-radius: 999px; background: var(--ill-accent-tint); color: var(--ill-accent-2); display: inline-flex; align-items: center; justify-content: center; }
.ill-flow__ic .ill-ic { width: 1.5em; height: 1.5em; }
.ill-flow__box.is-bad { border-color: var(--ill-danger); box-shadow: 0 0 0 1px var(--ill-danger); }
.ill-flow__box.is-bad .ill-flow__ic { background: var(--ill-bad-bg); color: var(--ill-bad-ink); }
.ill-flow__box.is-good { border-color: var(--ill-ok); box-shadow: 0 0 0 1px var(--ill-ok); }

/* ==========================================================================
   KHUNG (frame): app · admin · browser · phone · none
   ========================================================================== */
.ill-win {
  border: 1px solid var(--ill-line);
  border-radius: 0.9em;
  background: var(--ill-canvas);
  box-shadow: var(--ill-shadow);
}
.ill-win__bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.8em;
  padding: 0 1em;
  border-bottom: 1px solid var(--ill-line-2);
  background: var(--ill-bg);
  border-radius: 0.9em 0.9em 0 0;
  font-weight: 650;
}
.ill-win__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 0.4em;
  background: var(--ill-accent); color: var(--ill-on-accent);
  font-size: 0.85em; font-weight: 800;
}
.ill-win__bar .ill-ic { color: var(--ill-ink-2); }
.ill-win__end { margin-left: auto; display: inline-flex; gap: 0.5em; align-items: center; }
.ill-win__body { padding: 1.2em; border-radius: 0 0 0.9em 0.9em; }
.ill-win--flush .ill-win__body { padding: 0; }

/* Trình duyệt */
.ill-browser__dots { display: inline-flex; gap: 0.35em; }
.ill-browser__dots i { width: 0.7em; height: 0.7em; border-radius: 999px; background: var(--ill-line); }
.ill-browser__url {
  flex: 1; max-width: 26em; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  height: 1.8em; border-radius: 999px; background: var(--ill-fill-2);
  border: 1px solid var(--ill-line-2);
  font-size: 0.9em; font-weight: 500; color: var(--ill-ink-2);
}
.ill-browser__url .ill-ic { width: 1em; height: 1em; }

/* Shopify admin */
.ill-admin { display: grid; grid-template-columns: 11em 1fr; border-radius: 0 0 0.9em 0.9em; min-height: 18em; }
.ill-admin__top { background: #1a1a1a; color: #e3e3e3; border-bottom: 0; }
.ill-admin__top .ill-browser__url { background: #303030; border-color: #3a3a3a; color: #b5b5b5; max-width: 20em; }
.ill-admin__logo { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: #fff; }
.ill-admin__logo i { width: 1.2em; height: 1.2em; border-radius: 0.3em; background: #95bf47; display: inline-block; }
.ill-admin__nav { padding: 0.8em 0.6em; background: var(--ill-fill-2); border-right: 1px solid var(--ill-line-2); border-radius: 0 0 0 0.9em; display: flex; flex-direction: column; gap: 0.2em; font-size: 0.95em; }
.ill-admin__nav span { display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0.5em; border-radius: 0.4em; color: var(--ill-ink-2); font-weight: 550; }
.ill-admin__nav .is-sub { padding-left: 2.2em; font-weight: 500; }
.ill-admin__nav .is-on { background: var(--ill-bg); color: var(--ill-ink); box-shadow: var(--ill-shadow); }
.ill-admin__nav .ill-admin__sec { margin-top: 0.6em; font-size: 0.85em; text-transform: none; color: var(--ill-mute); }
.ill-admin__main { padding: 1em; min-width: 0; }

/* Điện thoại */
.ill-phone {
  position: relative;
  width: 100%;
  border: 0.55em solid var(--ill-ink);
  border-radius: 2.6em;
  background: var(--ill-bg);
  box-shadow: var(--ill-shadow-pop);
}
[data-bs-theme="dark"] .ill-phone, html.dark .ill-phone, body.dark .ill-phone, .ill--dark .ill-phone { border-color: #4a525c; }
.ill-phone__screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  height: auto;
  min-height: 0;
  border-radius: 2.05em;
  background: var(--ill-bg);
  display: flex;
  flex-direction: column;
}
/* B5: chỉ MỘT tỉ lệ máy thật 9/19.5; --short (cũ) không còn làm lùn. Cần nhỏ hơn thì thu bề rộng. */
.ill-phone__status { display: flex; justify-content: space-between; align-items: center; height: 2.2em; padding: 0 1.6em; font-size: 0.85em; font-weight: 700; }
.ill-phone__status i { display: inline-block; width: 4.5em; height: 1.25em; border-radius: 999px; background: var(--ill-ink); }
.ill-phone__status em { font-style: normal; letter-spacing: 0.1em; }
.ill-phone__url { margin: 0 0.8em 0.3em; height: 1.9em; border-radius: 999px; background: var(--ill-fill-2); display: flex; align-items: center; justify-content: center; gap: 0.35em; font-size: 0.85em; color: var(--ill-ink-2); }
.ill-phone__url .ill-ic { width: 0.95em; height: 0.95em; }
.ill-phone__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ill-phone__home { position: absolute; left: 50%; bottom: 0.45em; transform: translateX(-50%); width: 7em; height: 0.3em; border-radius: 999px; background: var(--ill-ink); opacity: 0.8; z-index: 4; }

/* ==========================================================================
   STOREFRONT mẫu (cửa hàng giả) + các loại menu Navi+
   ========================================================================== */
.ill-store { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.ill-store__head { display: flex; align-items: center; gap: 0.8em; height: 3em; padding: 0 1em; border-bottom: 1px solid var(--ill-line-2); }
.ill-store__logo { font-weight: 800; font-size: 1.05em; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.35em; }
.ill-store__logo i { width: 1.1em; height: 1.1em; border-radius: 0.3em; background: var(--ill-ink); display: inline-block; }
.ill-store__icons { margin-left: auto; display: inline-flex; gap: 0.75em; color: var(--ill-ink-2); }
.ill-store__nav { display: flex; gap: 1.6em; margin-left: 2em; font-weight: 600; font-size: 0.95em; color: var(--ill-ink-2); align-items: center; height: 100%; }
.ill-store__nav > span { display: inline-flex; align-items: center; gap: 0.15em; height: 100%; }
.ill-store__nav > span.is-open { color: var(--ill-ink); box-shadow: inset 0 -0.18em 0 var(--ill-accent); }
.ill-store__nav .ill-ic { width: 1em; height: 1em; }
.ill-store__content { flex: 1; min-height: 0; padding: 0.9em; display: flex; flex-direction: column; gap: 0.8em; }
.ill-store__hero { height: 9em; border-radius: 0.7em; background: var(--ill-fill-2); border: 1px solid var(--ill-line-2); display: flex; flex-direction: column; justify-content: center; padding: 0 1.2em; gap: 0.5em; flex: none; }
.ill-store__hero .ill-bar:first-child { width: 55%; height: 0.8em; background: var(--ill-line); }
.ill-store__hero .ill-bar:nth-child(2) { width: 38%; }
.ill-store__hero .ill-store__cta { width: 6em; height: 1.8em; border-radius: 0.4em; background: var(--ill-ink); opacity: 0.85; margin-top: 0.3em; }
.ill-store__grid { display: grid; grid-template-columns: repeat(var(--ill-cols, 2), 1fr); gap: 0.7em; }
.ill-store__card { display: flex; flex-direction: column; min-width: 0; }
.ill-store__card .ill-ph { aspect-ratio: 1 / 1; }
.ill-stage hr { opacity: 1; }
.ill-store__card .ill-bar { margin-top: 0.45em; width: 75%; }
.ill-store__card .ill-bar + .ill-bar { width: 40%; margin-top: 0.3em; }

/* phần do Navi+ vẽ: viền nhấn nhẹ để chủ shop thấy "đây là menu Navi+" */
.ill-navi { position: relative; }
.ill--mark-navi .ill-navi { outline: 0.15em dashed var(--ill-accent); outline-offset: 0.15em; }

/* Tab Bar */
.ill-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(var(--ill-n, 5), 1fr);
  padding: 0.5em 0.4em 1.3em;
  background: var(--ill-bg);
  border-top: 1px solid var(--ill-line-2);
  border-radius: 0 0 2.05em 2.05em;
  box-shadow: 0 -0.3em 1em rgba(17, 24, 39, 0.06);
}
.ill-tabbar__tab { display: flex; flex-direction: column; align-items: center; gap: 0.25em; font-size: 0.78em; font-weight: 600; color: var(--ill-ink-2); padding: 0.2em 0; border-radius: 0.6em; }
.ill-tabbar__tab .ill-ic { width: 1.75em; height: 1.75em; }
.ill-tabbar__tab.is-active { color: var(--ill-accent); }
.ill-tabbar__ico { position: relative; display: inline-flex; }
.ill-tabbar__badge { position: absolute; top: -0.35em; right: -0.65em; min-width: 1.35em; height: 1.35em; padding: 0 0.3em; border-radius: 999px; background: var(--ill-danger); color: #fff; font-size: 0.8em; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ill-tabbar--float { left: 0.8em; right: 0.8em; bottom: 1.3em; border-radius: 1.4em; border: 1px solid var(--ill-line-2); padding-bottom: 0.5em; }

/* Mobile Menu (ngăn kéo trượt) */
.ill-scrim { position: absolute; inset: 0; background: var(--ill-scrim); z-index: 3; border-radius: 0 0 2.05em 2.05em; }
.ill-drawer {
  position: absolute; top: 0; bottom: 0; left: 0; width: 82%; z-index: 4;
  background: var(--ill-bg);
  border-radius: 0 0 0 2.05em;
  box-shadow: var(--ill-shadow-pop);
  display: flex; flex-direction: column;
}
.ill-drawer--right { left: auto; right: 0; border-radius: 0 0 2.05em 0; }
.ill-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 3em; padding: 0 1em; border-bottom: 1px solid var(--ill-line-2); font-weight: 700; }
.ill-drawer__list { display: flex; flex-direction: column; padding: 0.4em 0; }
.ill-drawer__item { display: flex; align-items: center; gap: 0.7em; height: 2.9em; padding: 0 1em; font-weight: 600; border-bottom: 1px solid var(--ill-line-2); }
.ill-drawer__item .ill-ic:last-child { margin-left: auto; color: var(--ill-mute); width: 1em; height: 1em; }
.ill-drawer__item.is-sub { padding-left: 2.4em; font-weight: 500; color: var(--ill-ink-2); background: var(--ill-fill-2); }
.ill-drawer__back { display: flex; align-items: center; gap: 0.4em; padding: 0.8em 1em 0.4em; font-weight: 700; color: var(--ill-ink-2); }
.ill-drawer__banner { margin: 0.8em 1em; height: 5em; }

/* Icon Menu (lưới/hàng ô danh mục) */
.ill-iconmenu { display: grid; grid-template-columns: repeat(var(--ill-n, 4), 1fr); gap: 0.6em; padding: 0.2em 0; }
.ill-iconmenu__tile { display: flex; flex-direction: column; align-items: center; gap: 0.35em; font-size: 0.8em; font-weight: 600; color: var(--ill-ink-2); text-align: center; }
.ill-iconmenu__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 999px; background: var(--ill-accent-tint); color: var(--ill-accent-2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--ill-line-2); }
.ill-iconmenu__img .ill-ic { width: 45%; height: 45%; }
.ill-iconmenu--square .ill-iconmenu__img { border-radius: 0.8em; }

/* Floating Button */
.ill-fab { position: absolute; right: 1em; bottom: 1.6em; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6em; }
.ill-fab--left { right: auto; left: 1em; align-items: flex-start; }
.ill-fab__main { width: 3.6em; height: 3.6em; border-radius: 999px; background: var(--ill-accent); color: var(--ill-on-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--ill-shadow-pop); }
.ill-fab__main .ill-ic { width: 1.7em; height: 1.7em; }
.ill-fab__act { display: flex; align-items: center; gap: 0.5em; font-size: 0.85em; font-weight: 650; }
.ill-fab__act > span:first-child { padding: 0.35em 0.7em; border-radius: 0.5em; background: var(--ill-bg); box-shadow: var(--ill-shadow); }
.ill-fab__act > i { width: 2.8em; height: 2.8em; border-radius: 999px; background: var(--ill-bg); border: 1px solid var(--ill-line-2); box-shadow: var(--ill-shadow); display: inline-flex; align-items: center; justify-content: center; color: var(--ill-ink); }

/* Mobile Mega Menu */
.ill-mmega { border: 1px solid var(--ill-line-2); border-radius: 0.7em; background: var(--ill-bg); }
.ill-mmega__tabs { display: flex; gap: 0.3em; padding: 0.45em; border-bottom: 1px solid var(--ill-line-2); overflow: hidden; }
.ill-mmega__tabs span { padding: 0.35em 0.8em; border-radius: 999px; font-size: 0.85em; font-weight: 650; color: var(--ill-ink-2); white-space: nowrap; }
.ill-mmega__tabs span.is-active { background: var(--ill-ink); color: var(--ill-bg); }
.ill-mmega__panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; padding: 0.7em; }
.ill-mmega__panel .ill-iconmenu__tile { font-size: 0.75em; }
.ill-mmega__panel .ill-iconmenu__img { border-radius: 0.6em; }

/* Desktop Mega Menu */
.ill-mega {
  position: absolute; left: 1em; right: 1em; top: 3em; z-index: 4;
  display: grid; grid-template-columns: repeat(var(--ill-cols, 3), 1fr) 1.3fr; gap: 1.4em;
  padding: 1.3em 1.4em;
  background: var(--ill-bg);
  border: 1px solid var(--ill-line-2);
  border-radius: 0 0 0.8em 0.8em;
  box-shadow: var(--ill-shadow-pop);
}
.ill-mega__col { display: flex; flex-direction: column; gap: 0.55em; min-width: 0; }
.ill-mega__col b { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ill-ink); margin-bottom: 0.15em; }
.ill-mega__col span { font-size: 0.92em; color: var(--ill-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-mega__img { display: flex; flex-direction: column; gap: 0.45em; }
.ill-mega__img .ill-ph { flex: 1; min-height: 7em; }
.ill-store--desk .ill-store__content { padding: 1.2em; }
.ill-store--desk .ill-store__hero { height: 12em; }
.ill-store--desk { min-height: 26em; }

/* ==========================================================================
   APP Navi+ (admin)
   ========================================================================== */
.ill-app { display: flex; flex-direction: column; gap: 1em; }
.ill-app__title { display: flex; align-items: center; gap: 0.7em; }
.ill-app__title h4, .ill-app__title .ill-h { margin: 0; font-size: 1.55em; font-weight: 750; color: var(--ill-ink); line-height: 1.2; }
.ill-app__title .ill-app__end { margin-left: auto; display: inline-flex; gap: 0.5em; }
.ill-card { background: var(--ill-bg); border: 1px solid var(--ill-line-2); border-radius: 0.8em; box-shadow: var(--ill-shadow); }
.ill-card__pad { padding: 1em 1.1em; }
.ill-muted { color: var(--ill-ink-2); }
.ill-small { font-size: 0.85em; }
.ill-link { color: #2463eb; font-weight: 600; }

/* danh sách menu */
.ill-table { width: 100%; }
.ill-table__head, .ill-table__row { display: grid; grid-template-columns: 1.8em 5.6em minmax(0, 2.6fr) 1.3fr 1.5fr 6.4em; gap: 0.9em; align-items: center; padding: 0 1.1em; }
.ill-table__head { height: 2.6em; font-size: 0.9em; font-weight: 650; color: var(--ill-ink-2); border-bottom: 1px solid var(--ill-line-2); }
.ill-table__row { padding-top: 0.9em; padding-bottom: 0.9em; border-bottom: 1px solid var(--ill-line-2); }
.ill-table__row:last-child { border-bottom: 0; }
.ill-table__thumb { height: 3.8em; border-radius: 0.45em; border: 1px solid var(--ill-line-2); background: var(--ill-fill-2); position: relative; overflow: hidden; }
.ill-table__thumb::before { content: ""; position: absolute; left: 12%; right: 12%; top: 28%; height: 0.35em; border-radius: 999px; background: var(--ill-line); box-shadow: 0 0.8em 0 var(--ill-fill), 0 1.6em 0 var(--ill-fill); }
.ill-table__thumb.is-tabbar::before { top: auto; bottom: 14%; height: 0.55em; left: 8%; right: 8%; background: var(--ill-accent-soft); box-shadow: none; }
.ill-table__name b { display: block; font-size: 1.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-table__name span { display: block; font-size: 0.85em; color: var(--ill-ink-2); margin-top: 0.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-table__name small { display: inline-block; margin-top: 0.3em; font-size: 0.78em; color: var(--ill-mute); }
.ill-table__pub { display: flex; flex-direction: column; gap: 0.3em; align-items: flex-start; font-size: 0.85em; }
.ill-table__act { display: flex; align-items: center; justify-content: flex-end; gap: 0.2em; }

/* trình sửa menu */
.ill-ed { display: flex; flex-direction: column; gap: 0.8em; }
.ill-ed__head { display: flex; align-items: center; gap: 0.6em; flex-wrap: nowrap; }
.ill-ed__name { font-size: 1.25em; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; margin-right: auto; }
.ill-ed__steps { display: flex; align-items: center; gap: 0.3em; flex: none; }
.ill-step {
  display: inline-flex; align-items: center; gap: 0.35em;
  height: 2.2em; padding: 0 0.65em;
  border-radius: 0.5em;
  border: 1px solid var(--ill-line);
  background: var(--ill-fill);
  color: var(--ill-ink-2);
  font-size: 0.86em; font-weight: 650; white-space: nowrap;
}
.ill-step i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: 999px; border: 1px solid currentColor; font-size: 0.85em; }
.ill-step.is-active { background: var(--ill-btn); border-color: var(--ill-btn); color: var(--ill-btn-ink); }
.ill-status { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 2.2em; padding: 0 0.5em; border: 1px solid var(--ill-line); border-radius: 0.45em; background: var(--ill-bg); line-height: 1; }
.ill-status small { font-size: 0.55em; font-weight: 700; letter-spacing: 0.06em; color: var(--ill-ink-2); }
.ill-status b { font-size: 0.8em; color: var(--ill-danger); }
.ill-status.is-on b { color: var(--ill-ok); }
.ill-ed__body { display: grid; grid-template-columns: 22em 1fr; gap: 0.9em; align-items: start; }
.ill-ed__panel { padding: 0; overflow: visible; }
.ill-ed__panelhead { display: flex; align-items: center; gap: 0.5em; padding: 0.75em 0.9em; border-bottom: 1px solid var(--ill-line-2); }
.ill-ed__panelhead .ill-h { font-size: 1.1em; font-weight: 700; margin-right: auto; }
.ill-ed__panelbody { padding: 0.8em 0.9em 0.9em; display: flex; flex-direction: column; gap: 0.7em; }
.ill-ed__preview { padding: 0; }
.ill-ed__prevbar { display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.9em; border-bottom: 1px solid var(--ill-line-2); }
.ill-ed__prevbar .ill-h { font-weight: 700; }
.ill-seg { display: inline-flex; padding: 0.2em; border-radius: 0.5em; background: var(--ill-fill); gap: 0.15em; margin: 0 auto; }
.ill-seg span { padding: 0.3em 0.75em; border-radius: 0.4em; font-size: 0.85em; font-weight: 600; color: var(--ill-ink-2); }
.ill-seg span.is-on { background: var(--ill-bg); color: var(--ill-ink); box-shadow: var(--ill-shadow); }
.ill-ed__prevbody { padding: 1em; display: flex; justify-content: center; }
.ill-ed__prevbody .ill-phone { width: 12em; max-width: 100%; flex: none; font-size: 0.8em; }
.ill-ed__prevbody .ill-deskmini { width: 100%; }
.ill-deskmini { border: 1px solid var(--ill-line); border-radius: 0.6em; background: var(--ill-bg); font-size: 0.72em; position: relative; }

/* V1 (03/11/2026) — trình sửa menu = VISUAL EDITOR (mặc định từ 27/09/2026):
   thanh bước dọc bên trái · panel "Menu items" · vùng xem trước lớn · thanh công cụ nổi bên phải.
   Configure / Preview & Test / Publish mở thành tấm lớn phủ từ phải (có nút ×). */
.ill-ve { position: relative; display: grid; grid-template-columns: 4.6em 19.5em minmax(0, 1fr); min-height: 34em; margin: -1.2em; background: var(--ill-bg); border-radius: 0 0 0.9em 0.9em; overflow: visible; }
.ill-ve__rail { display: flex; flex-direction: column; align-items: stretch; gap: 0.45em; padding: 0 0.35em 0.4em; border-right: 1px solid var(--ill-line-2); background: var(--ill-bg); }
.ill-ve__back { display: flex; align-items: center; justify-content: center; height: 2.6em; margin: 0 -0.35em 0.2em; border-bottom: 1px solid var(--ill-line-2); color: var(--ill-ink-2); }
.ill-ve__step { display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.45em 0.1em; border-radius: 0.55em; background: var(--ill-fill-2); color: var(--ill-ink-2); font-size: 0.72em; font-weight: 700; line-height: 1.15; text-align: center; }
.ill-ve__step i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 999px; border: 1px solid currentColor; background: var(--ill-bg); color: var(--ill-ink); font-size: 0.95em; }
.ill-ve__step.is-active { background: var(--ill-btn); color: var(--ill-btn-ink); }
.ill-ve__step.is-active i { background: var(--ill-btn-ink); color: var(--ill-btn); border-color: var(--ill-btn-ink); }
.ill-ve__pill { display: inline-block; padding: 0.05em 0.45em; border-radius: 0.3em; border: 1px solid var(--ill-line); background: var(--ill-bg); color: var(--ill-danger); font-size: 0.95em; letter-spacing: 0.04em; }
.ill-ve__pill.is-on { color: var(--ill-ok); }
.ill-ve__more { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 0.1em; padding: 0.5em 0 0.2em; border-top: 1px solid var(--ill-line-2); margin-left: -0.35em; margin-right: -0.35em; font-size: 0.72em; font-weight: 700; color: var(--ill-ink); }
.ill-ve__panel { position: relative; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--ill-line-2); background: var(--ill-bg); }
.ill-ve__panel > .ill-ed__panelhead { background: var(--ill-fill-2); min-height: 2.6em; padding-top: 0.4em; padding-bottom: 0.4em; }
.ill-ve__panel > .ill-ed__panelbody { padding: 1em 1.1em; }
.ill-ve__canvas { position: relative; display: flex; align-items: flex-start; justify-content: center; padding: 1em 4.6em 1em 1.2em; min-width: 0; background: var(--ill-bg); }
.ill-ve__canvas .ill-phone { width: 12.4em; max-width: 100%; flex: none; font-size: 0.8em; }
.ill-ve__canvas .ill-deskmini { width: 100%; align-self: flex-start; margin-top: 0.4em; }
.ill-ve__tools { position: absolute; right: 0.6em; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.45em; padding: 0.4em 0.3em; border-radius: 1.2em; border: 1px solid var(--ill-line-2); background: var(--ill-bg); box-shadow: var(--ill-shadow-pop); font-size: 0.66em; font-weight: 650; color: var(--ill-ink-2); z-index: 3; }
.ill-ve__tools > span { display: flex; flex-direction: column; align-items: center; gap: 0.15em; width: 4.2em; padding: 0.35em 0; border-radius: 0.8em; text-align: center; line-height: 1.1; }
.ill-ve__tools > span.is-on { background: var(--ill-fill-2); color: var(--ill-ink); box-shadow: var(--ill-shadow); }
.ill-ve__tools > span.ill-ve__round { width: 2.6em; height: 2.6em; padding: 0; justify-content: center; border-radius: 999px; border: 1px solid var(--ill-line-2); }
.ill-ve__tools .ill-ic { width: 1.35em; height: 1.35em; }
.ill-ve__mini { display: inline-block; width: 2.2em; height: 1.2em; border-radius: 999px; background: var(--ill-fill); border: 1px solid var(--ill-line); position: relative; }
.ill-ve__mini::after { content: ""; position: absolute; left: 0.12em; top: 0.12em; width: 0.86em; height: 0.86em; border-radius: 999px; background: var(--ill-bg); box-shadow: var(--ill-shadow); }
.ill-ve__mini.is-on { background: var(--ill-on); border-color: var(--ill-on); }
.ill-ve__mini.is-on::after { left: auto; right: 0.12em; }
.ill-ve__scrim { position: absolute; left: 4.6em; top: 0; bottom: 0; right: 0; background: var(--ill-scrim); opacity: 0.55; border-radius: 0 0 0.6em 0; z-index: 4; }
.ill-ve__sheet { position: absolute; left: 13em; right: 0; top: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; background: var(--ill-fill-2); border-left: 1px solid var(--ill-line-2); box-shadow: var(--ill-shadow-pop); border-radius: 0 0 0.6em 0; overflow: visible; }
.ill-ve__sheethead { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 1em; background: var(--ill-bg); border-bottom: 1px solid var(--ill-line-2); }
.ill-ve__sheethead .ill-h { font-size: 1.15em; font-weight: 750; margin-right: auto; }
.ill-ve__sheetbody { padding: 0.9em 1em; display: flex; flex-direction: column; gap: 0.8em; }
.ill-ve__chips { display: flex; gap: 0.35em; flex-wrap: nowrap; overflow: hidden; }
.ill-ve__chips span { flex: none; padding: 0.3em 0.7em; border-radius: 999px; border: 1px solid var(--ill-line); background: var(--ill-bg); font-size: 0.78em; font-weight: 600; color: var(--ill-ink); white-space: nowrap; }
.ill-ve__pos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.45em; }
.ill-ve__pos i { height: 3em; border-radius: 0.4em; border: 1px solid var(--ill-line); background: var(--ill-fill-2); position: relative; }
.ill-ve__pos i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 15%; bottom: 0; background: var(--ill-bg); border: 1px solid var(--ill-line-2); border-bottom: 0; }
.ill-ve__pos i.is-on { border: 2px solid var(--ill-ink); }
.ill-ve__qr { position: relative; width: 6em; height: 6em; background: repeating-conic-gradient(var(--ill-ink) 0 25%, transparent 0 50%) 0 0 / 1em 1em; opacity: 0.85; }
.ill-ve__qr::before, .ill-ve__qr::after { content: ""; position: absolute; width: 1.8em; height: 1.8em; border: 0.4em solid var(--ill-ink); background: var(--ill-bg); box-shadow: inset 0 0 0 0.35em var(--ill-bg), inset 0 0 0 1em var(--ill-ink); }
.ill-ve__qr::before { left: 0; top: 0; }
.ill-ve__qr::after { right: 0; top: 0; }
/* cây VE: dòng đường dẫn khi đã mở vào 1 cấp + ô "N ›" */
.ill-tree__crumb { display: flex; align-items: center; gap: 0.45em; font-size: 0.85em; color: var(--ill-ink-2); padding: 0 0 0.3em 0.2em; }
.ill-tree__crumb b { color: var(--ill-ink); }
.ill-row__kids { flex: none; display: inline-flex; align-items: center; gap: 0.15em; padding: 0.1em 0.5em; border: 1px solid var(--ill-line); border-radius: 999px; font-size: 0.8em; font-weight: 650; color: var(--ill-ink); background: var(--ill-bg); }
.ill-row__kids .ill-ic { width: 0.9em; height: 0.9em; }
.ill-row__hover { position: absolute; left: 2.6em; top: -1.15em; z-index: 6; display: inline-flex; align-items: center; gap: 0.2em; padding: 0.15em 0.25em; border-radius: 0.45em; background: #2463eb; color: #fff; font-size: 0.78em; font-weight: 650; box-shadow: var(--ill-shadow); white-space: nowrap; }
.ill-row__hover > span { display: inline-flex; align-items: center; gap: 0.25em; padding: 0.15em 0.4em; border-radius: 0.3em; }
.ill-row__hover .ill-ic { width: 1em; height: 1em; }
.ill-tree--ve .ill-row { position: relative; margin-left: 0; }
.ill-tree--ve .ill-row.is-selected { border-color: #2463eb; box-shadow: 0 0 0 1px #2463eb; }
.ill-tree--ve .ill-tree__add { height: 2.4em; border: 1px dashed #2463eb; background: rgba(36, 99, 235, 0.06); color: #2463eb; font-size: 0.82em; letter-spacing: 0.04em; }

/* cây mục menu */
.ill-tree { display: flex; flex-direction: column; gap: 0.4em; }
.ill-row {
  display: flex; align-items: center; gap: 0.65em;
  min-height: 3.1em;
  padding: 0.4em 0.6em;
  margin-left: calc(var(--lv, 0) * 1.6em);
  border: 1px solid var(--ill-line-2);
  border-radius: 0.55em;
  background: var(--ill-bg);
}
.ill-row__ic { width: 2.1em; height: 2.1em; border-radius: 0.45em; background: var(--ill-fill-2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ill-ink); }
.ill-row__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ill-row__txt b { font-size: 0.98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-row__txt span { font-size: 0.8em; color: var(--ill-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-row__tag { font-size: 0.7em; color: var(--ill-mute); align-self: flex-start; }
.ill-row__grip { color: var(--ill-mute); flex: none; }
.ill-row--col { background: #f1f0e4; border-color: #e3e1cc; }
[data-bs-theme="dark"] .ill-row--col, html.dark .ill-row--col, body.dark .ill-row--col, .ill--dark .ill-row--col { background: #2c2b22; border-color: #3d3b2c; }
.ill-row--group b { font-weight: 600; }
.ill-row--group .ill-row__kind { font-size: 0.72em; letter-spacing: 0.05em; color: var(--ill-mute); font-weight: 700; padding-right: 0.5em; border-right: 1px solid var(--ill-line); margin-right: 0.2em; }
.ill-row.is-selected { border-color: var(--ill-ink); box-shadow: 0 0 0 1px var(--ill-ink); }
.ill-tree__add { display: flex; align-items: center; justify-content: center; gap: 0.4em; height: 2.6em; border: 1px dashed var(--ill-line); border-radius: 0.55em; color: var(--ill-ink-2); font-weight: 650; }

/* menu chuột phải / thao tác mục */
.ill-ctx { position: absolute; z-index: 7; width: 13em; padding: 0.35em; border-radius: 0.7em; background: var(--ill-bg); border: 1px solid var(--ill-line-2); box-shadow: var(--ill-shadow-pop); font-size: 0.92em; }
.ill-ctx > span { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.6em; border-radius: 0.4em; }
.ill-ctx > span kbd { margin-left: auto; font: inherit; font-size: 0.8em; padding: 0.05em 0.45em; border-radius: 0.3em; border: 1px solid var(--ill-line); color: var(--ill-ink-2); background: var(--ill-fill-2); }
.ill-ctx > hr { border: 0; border-top: 1px solid var(--ill-line-2); margin: 0.3em 0; }
.ill-ctx .is-danger { color: var(--ill-danger); }
.ill-ctx__move { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; padding: 0.3em; }
.ill-ctx__move i { height: 1.9em; border-radius: 0.4em; background: var(--ill-fill); display: inline-flex; align-items: center; justify-content: center; }
.ill-ctx__move .ill-ic { width: 1em; height: 1em; }

/* form */
.ill-sec { margin: 0 -0.9em; padding: 0.55em 0.9em; background: var(--ill-fill-2); border-top: 1px solid var(--ill-line-2); border-bottom: 1px solid var(--ill-line-2); font-weight: 700; }
.ill-media { display: grid; grid-template-columns: 5em 1.4em 1fr; align-items: center; gap: 0.4em; }
.ill-media__ico { height: 4em; border: 1px solid var(--ill-line); border-radius: 0.5em; display: flex; align-items: center; justify-content: center; gap: 0.2em; background: var(--ill-bg); }
.ill-media__ico .ill-ic { width: 1.8em; height: 1.8em; }
.ill-media__or { font-size: 0.7em; font-weight: 700; color: var(--ill-ink-2); text-align: center; }
.ill-media__up { height: 4em; border: 1px dashed var(--ill-line); border-radius: 0.5em; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.82em; color: var(--ill-ink-2); text-align: center; gap: 0.15em; }
.ill-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.ill-optrow { display: flex; gap: 0.35em; flex-wrap: wrap; }
.ill-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2em; height: 2.4em; padding: 0 0.4em; border: 1px solid var(--ill-line); border-radius: 0.45em; font-size: 0.7em; font-weight: 700; color: var(--ill-ink-2); background: var(--ill-bg); }
.ill-opt.is-on { border: 2px solid var(--ill-ink); color: var(--ill-ink); }
.ill-kv { display: flex; align-items: center; justify-content: space-between; padding: 0.45em 0; border-bottom: 1px solid var(--ill-line-2); font-size: 0.92em; }
.ill-kv:last-child { border-bottom: 0; }
.ill-kv .ill-ic { color: var(--ill-mute); width: 1em; height: 1em; }
/* panel phóng to: chừa 40% bên phải cho nhãn chú thích */
.ill-zoom { width: 58%; }
.ill-zoom .ill-ed__panel { width: 100%; }
.ill-phone .ill-tip { max-width: 12em; }

/* thẻ lựa chọn (Add menu, wizard, cách đặt menu) */
.ill-pick { display: grid; grid-template-columns: repeat(var(--ill-cols, 3), 1fr); gap: 0.9em; }
.ill-pickcard { display: flex; flex-direction: column; gap: 0.5em; padding: 0.7em; border-radius: 0.8em; border: 1px solid var(--ill-line-2); background: var(--ill-bg); box-shadow: var(--ill-shadow); }
.ill-pickcard.is-on { border-color: var(--ill-ink); box-shadow: 0 0 0 1px var(--ill-ink); }
.ill-pickcard__art { position: relative; height: 7.5em; border-radius: 0.55em; background: var(--ill-fill-2); border: 1px solid var(--ill-line-2); overflow: hidden; }
.ill-pickcard b { font-size: 1em; }
.ill-pickcard span { font-size: 0.8em; color: var(--ill-ink-2); }
.ill-pickcard__btns { display: flex; gap: 0.4em; margin-top: 0.2em; }
/* hình nhỏ minh hoạ từng loại menu trong thẻ */
.ill-mini { position: absolute; background: var(--ill-bg); border: 1px solid var(--ill-line); }
.ill-mini--desk { left: 8%; right: 8%; top: 12%; bottom: 0; border-radius: 0.4em 0.4em 0 0; }
.ill-mini--desk::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0.7em; height: 0.45em; border-radius: 999px; background: var(--ill-fill); }
.ill-mini--phone { left: 32%; right: 32%; top: 10%; bottom: -10%; border-radius: 0.7em; border-width: 0.18em; border-color: var(--ill-ink); }
.ill-mini__navi { position: absolute; background: var(--ill-accent-tint); border: 1px solid var(--ill-accent); border-radius: 0.25em; }

/* popup */
.ill-modal { position: relative; border-radius: 0.9em; background: var(--ill-bg); border: 1px solid var(--ill-line-2); box-shadow: var(--ill-shadow-pop); }
.ill-modal__head { display: flex; align-items: center; gap: 0.6em; padding: 0.8em 1em; border-bottom: 1px solid var(--ill-line-2); }
.ill-modal__head .ill-h { font-size: 1.2em; font-weight: 750; margin-right: auto; }
.ill-modal__body { padding: 1em; display: flex; flex-direction: column; gap: 0.9em; }
.ill-modal__foot { display: flex; align-items: center; gap: 0.5em; justify-content: flex-end; padding: 0.75em 1em; border-top: 1px solid var(--ill-line-2); }
.ill-kicker { font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ill-ink-2); text-align: center; }
.ill-stepbox { display: flex; flex-direction: column; gap: 0.55em; }
.ill-stepbox__t { display: flex; align-items: center; gap: 0.6em; font-weight: 650; }
.ill-stepbox__t i { font-style: normal; font-size: 0.72em; font-weight: 800; letter-spacing: 0.05em; padding: 0.3em 0.55em; border: 1.5px solid var(--ill-ink); border-radius: 0.35em; }
.ill-stepbox__d { font-size: 0.88em; color: var(--ill-ink-2); }
.ill-dashbox { border: 1px dashed var(--ill-line); border-radius: 0.6em; padding: 0.8em 1em; display: inline-flex; }

/* add item: danh sách loại */
.ill-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; }
.ill-type { display: flex; flex-direction: column; align-items: center; gap: 0.35em; padding: 0.7em 0.4em; border: 1px solid var(--ill-line-2); border-radius: 0.6em; font-size: 0.85em; font-weight: 650; background: var(--ill-bg); }
.ill-type .ill-ic { width: 1.6em; height: 1.6em; color: var(--ill-ink-2); }
.ill-type.is-on { border-color: var(--ill-ink); box-shadow: 0 0 0 1px var(--ill-ink); }
/* V1: popup Add item mới (addFlow.js + addFlowLayout.js) — thanh Insert to · tìm · Classic view, menu nhóm bên trái */
.ill-af__bar { display: flex; align-items: center; gap: 0.5em; padding: 0.6em 0.9em; border-bottom: 1px solid var(--ill-line-2); font-size: 0.78em; white-space: nowrap; }
.ill-af__bar > .ill-input { min-width: 0; }
.ill-af__seg { display: inline-flex; border: 1px solid var(--ill-line); border-radius: 0.45em; background: var(--ill-fill-2); padding: 0.15em; gap: 0.15em; flex: none; }
.ill-af__seg > span { padding: 0.3em 0.6em; border-radius: 0.35em; font-weight: 600; color: var(--ill-ink-2); white-space: nowrap; }
.ill-af__seg > span.is-on { background: var(--ill-bg); color: var(--ill-ink); box-shadow: var(--ill-shadow); }
.ill-af__body { display: grid; grid-template-columns: 10em minmax(0, 1fr); min-height: 18em; }
.ill-af__nav { display: flex; flex-direction: column; gap: 0.15em; padding: 0.7em 0.5em; border-right: 1px solid var(--ill-line-2); font-size: 0.82em; }
.ill-af__nav > span { display: flex; align-items: center; gap: 0.4em; padding: 0.35em 0.4em; border-radius: 0.35em; color: var(--ill-ink); }
.ill-af__nav > span small { margin-left: auto; color: var(--ill-mute); }
.ill-af__nav .ill-ic { width: 1em; height: 1em; color: var(--ill-ink-2); }
.ill-af__main { padding: 0.8em 1em; display: flex; flex-direction: column; gap: 0.5em; }
.ill-af__h { font-size: 0.72em; font-weight: 750; letter-spacing: 0.06em; color: var(--ill-ink-2); text-transform: uppercase; }
.ill-af__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; }
.ill-af__card { display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 0.35em 0.35em 0.45em; border: 1px solid var(--ill-line-2); border-radius: 0.5em; background: var(--ill-bg); font-size: 0.78em; font-weight: 650; text-align: center; }
.ill-af__card > i { align-self: stretch; height: 3.2em; border-radius: 0.35em; background: var(--ill-fill-2); display: flex; align-items: center; justify-content: center; color: var(--ill-ink-2); }
.ill-af__card > i .ill-ic { width: 1.5em; height: 1.5em; }
.ill-af__card.is-on { border-color: var(--ill-ink); box-shadow: 0 0 0 1px var(--ill-ink); }
.ill-stepper { display: flex; align-items: center; gap: 0.5em; font-size: 0.85em; font-weight: 650; color: var(--ill-mute); }
.ill-stepper span.is-on { color: var(--ill-ink); }
.ill-stepper .ill-ic { width: 0.9em; height: 0.9em; }

/* palette */
.ill-swatches { display: flex; gap: 0.35em; }
.ill-swatches i { width: 1.4em; height: 1.4em; border-radius: 0.35em; border: 1px solid var(--ill-line); display: inline-block; }
.ill-tabs { display: flex; gap: 0.2em; border-bottom: 1px solid var(--ill-line-2); }
.ill-tabs span { padding: 0.5em 0.8em; font-weight: 650; font-size: 0.92em; color: var(--ill-ink-2); border-bottom: 0.15em solid transparent; margin-bottom: -1px; }
.ill-tabs span.is-on { color: var(--ill-ink); border-bottom-color: var(--ill-ink); }
.ill-tabs span { white-space: nowrap; }
/* V1: tab Palette / Main menu / Sub menu trong VE là ô xám, ô đang mở nền trắng viền */
.ill-ve__panel .ill-tabs span, .ill-zoom .ill-tabs span { padding: 0.4em 0.7em; border: 1px solid var(--ill-line); border-bottom: 0; border-radius: 0.5em 0.5em 0 0; background: var(--ill-fill); font-size: 0.86em; }
.ill-ve__panel .ill-tabs span.is-on, .ill-zoom .ill-tabs span.is-on { background: var(--ill-bg); border-color: var(--ill-line); }
.ill-ve__stage { position: relative; display: inline-flex; }

/* Theme editor (Shopify) */
.ill-te { display: grid; grid-template-columns: 3.2em 15em 1fr; min-height: 20em; border-radius: 0 0 0.9em 0.9em; background: var(--ill-bg); }
.ill-te__rail { display: flex; flex-direction: column; align-items: center; gap: 0.6em; padding: 0.8em 0; border-right: 1px solid var(--ill-line-2); color: var(--ill-ink-2); }
.ill-te__rail span { width: 2.3em; height: 2.3em; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5em; }
.ill-te__rail span.is-on { background: var(--ill-fill); color: var(--ill-ink); }
.ill-te__panel { border-right: 1px solid var(--ill-line-2); padding: 0.8em; display: flex; flex-direction: column; gap: 0.6em; }
.ill-te__panel .ill-h { font-weight: 750; font-size: 1.05em; }
.ill-te__embed { display: flex; align-items: center; gap: 0.6em; padding: 0.6em; border: 1px solid var(--ill-line-2); border-radius: 0.6em; }
.ill-te__embed.is-dim { opacity: 0.45; }
.ill-te__embed .ill-row__txt b { font-size: 0.92em; }
.ill-te__appic { width: 2em; height: 2em; border-radius: 0.45em; background: var(--ill-accent); color: var(--ill-on-accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ill-te__appic.is-gray { background: var(--ill-fill); }
.ill-te__appic .ill-ic { width: 1.1em; height: 1.1em; }
.ill-te__prev { padding: 0.9em; background: var(--ill-canvas); border-radius: 0 0 0.9em 0; }
.ill-te__prev .ill-deskmini { font-size: 0.8em; }
.ill-te__top { gap: 0.9em; }
.ill-te__top .ill-te__theme { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 650; }

/* ==========================================================================
   B2 (NAVI01349) — bổ sung
   ========================================================================== */

/* Màu menu Navi+ trên cửa hàng: palette="ink|brand|sand|mint" hoặc menu_bg/menu_text/menu_accent */
.ill-pal--ink { --ill-menu-bg: #14161a; --ill-menu-ink: #e9ecef; --ill-menu-accent: #ffd24a; }
.ill-pal--brand { --ill-menu-bg: #1f6feb; --ill-menu-ink: #ffffff; --ill-menu-accent: #ffe08a; }
.ill-pal--sand { --ill-menu-bg: #f7f0e6; --ill-menu-ink: #5b4630; --ill-menu-accent: #b8782e; }
.ill-pal--mint { --ill-menu-bg: #e8f7f0; --ill-menu-ink: #11694a; --ill-menu-accent: #0d8a5c; }
.ill-pal .ill-tabbar, .ill-pal .ill-drawer, .ill-pal .ill-mega, .ill-pal .ill-mmega, .ill-pal .ill-drawer__head { background: var(--ill-menu-bg); border-color: var(--ill-menu-ink); border-color: color-mix(in srgb, var(--ill-menu-ink) 18%, transparent); }
.ill-pal .ill-tabbar__tab, .ill-pal .ill-drawer__item, .ill-pal .ill-drawer__head, .ill-pal .ill-mega__col span, .ill-pal .ill-mega__col b, .ill-pal .ill-iconmenu__tile, .ill-pal .ill-mmega__tabs span { color: var(--ill-menu-ink); }
.ill-pal .ill-drawer__item { border-bottom-color: color-mix(in srgb, var(--ill-menu-ink) 15%, transparent); }
.ill-pal .ill-drawer__item.is-sub { background: color-mix(in srgb, var(--ill-menu-ink) 8%, transparent); }
.ill-pal .ill-store__nav.ill-navi { background: var(--ill-menu-bg); color: var(--ill-menu-ink); padding: 0 1em; margin-left: 1.5em; border-radius: 0.4em; }
.ill-pal .ill-store__nav.ill-navi > span { color: var(--ill-menu-ink); }
.ill-pal .ill-tabbar__tab.is-active, .ill-pal .ill-store__nav > span.is-open { color: var(--ill-menu-accent); }
.ill-pal .ill-store__nav > span.is-open { box-shadow: inset 0 -0.18em 0 var(--ill-menu-accent); }
.ill-pal .ill-iconmenu__img { background: color-mix(in srgb, var(--ill-menu-accent) 18%, var(--ill-bg)); color: var(--ill-menu-accent); }
.ill-pal .ill-fab__main { background: var(--ill-menu-accent); color: var(--ill-menu-bg); }
.ill-pal .ill-mmega__tabs span.is-active { background: var(--ill-menu-accent); color: var(--ill-menu-bg); }

/* Chip ngôn ngữ trên header cửa hàng */
.ill-langchip { display: inline-flex; align-items: center; gap: 0.15em; font-size: 0.78em; font-weight: 700; padding: 0.25em 0.5em; border: 1px solid var(--ill-line); border-radius: 0.4em; color: var(--ill-ink-2); }
.ill-langchip .ill-ic { width: 0.9em; height: 0.9em; }

/* Mũi tên mở rộng của Mobile Menu (khoá arrow-n) */
.ill-drawer__arrow { margin-left: auto; display: inline-flex; }
.ill-drawer__item .ill-drawer__arrow .ill-ic { margin-left: 0; }

/* Mục ghim đầu / chân của Mobile Menu */
.ill-drawer__pin { background: var(--ill-accent-tint); color: var(--ill-accent-2); }
.ill-drawer__pin .ill-ic:last-child { color: var(--ill-accent-2); }
.ill-drawer__pin--foot { margin-top: auto; border-top: 1px solid var(--ill-line-2); border-bottom: 0; }
.ill-drawer__list { flex: 1; min-height: 0; }

/* Widget của app khác chồng lên menu (chat, banner cookie) */
.ill-widget { position: absolute; z-index: 5; }
.ill-widget--chat { right: 0.8em; bottom: 5.4em; width: 3em; height: 3em; border-radius: 999px; background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--ill-shadow-pop); }
.ill-widget--chat .ill-ic { width: 1.5em; height: 1.5em; }
.ill-widget--cookie { left: 0.6em; right: 0.6em; bottom: 0.9em; padding: 0.7em 0.8em; border-radius: 0.7em; background: var(--ill-ink); color: var(--ill-bg); display: grid; grid-template-columns: 1fr auto; gap: 0.35em 0.6em; align-items: center; box-shadow: var(--ill-shadow-pop); }
.ill-widget--cookie .ill-bar { background: var(--ill-bg); opacity: 0.7; grid-column: 1; }
.ill-widget--cookie .ill-btn { grid-column: 2; grid-row: 1 / span 2; }

/* Icon Menu trên máy tính: 8 ô một hàng */
.ill-iconmenu--desk { max-width: 100%; }
.ill-store--desk .ill-iconmenu__tile { font-size: 0.7em; }
.ill-store--desk .ill-iconmenu__img { width: 3.6em; aspect-ratio: 1 / 1; margin: 0 auto; }

/* dia-structure: hộp lồng hộp có nhãn class */
.ill-struct { padding: 0.2em 9em 0.2em 0.2em; }
.ill-struct__box { border: 0.1em dashed var(--ill-line); border-radius: 0.6em; padding: 0.55em 0.8em 0.8em; background: var(--ill-bg); margin-top: 0; }
.ill-struct__box:nth-child(even) { background: var(--ill-fill-2); }
.ill-struct__tag { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; margin-bottom: 0.45em; }
.ill-struct__tag code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 0.92em; color: var(--ill-ink); background: var(--ill-fill); padding: 0.1em 0.45em; border-radius: 0.3em; }
.ill-struct__tag small { color: var(--ill-mute); font-size: 0.85em; }

/* ---- B2: tiện ích chung ---- */
.ill-dim { opacity: 0.45; }
.ill-dsub { display: block; margin: 0.5em 0 0.15em; font-size: 0.78em; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ill-ink-2); }
.ill-dv { display: inline-flex; align-items: center; gap: 0.35em; }
.ill-dv__sw { width: 1.1em; height: 1.1em; border-radius: 0.3em; border: 1px solid var(--ill-line); display: inline-block; vertical-align: -0.2em; margin-right: 0.3em; }
.ill-boxmodel { display: flex; flex-direction: column; gap: 0.3em; padding: 0.6em; border: 1px dashed var(--ill-line); border-radius: 0.5em; font-size: 0.85em; color: var(--ill-ink-2); }
.ill-boxmodel > span { border: 1px dashed var(--ill-line); border-radius: 0.4em; padding: 0.4em; display: flex; flex-direction: column; gap: 0.2em; }
.ill-boxmodel i { font-style: normal; font-weight: 700; font-size: 0.85em; }
.ill-num-dot { width: 1.6em; height: 1.6em; border-radius: 999px; background: var(--ill-fill); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: 750; }
.ill-spinner { width: 2.4em; height: 2.4em; border-radius: 999px; border: 0.25em solid var(--ill-line); border-top-color: var(--ill-accent); display: inline-block; }
.ill-input__btn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; border-radius: 0.4em; background: var(--ill-fill); color: var(--ill-ink); }
.ill-input__btn .ill-ic { margin-left: 0; color: inherit; }
.ill-input--code { min-height: 4em; align-items: flex-start; padding-top: 0.6em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ill-progress { width: 100%; height: 0.7em; border-radius: 999px; background: var(--ill-fill); overflow: hidden; display: block; }
.ill-progress i { display: block; height: 100%; background: var(--ill-accent); }

/* mini phone thẻ chọn Position */
.ill-miniphone { display: flex; align-items: flex-end; justify-content: center; height: 5em; }
.ill-miniphone__bar { display: block; width: 3.4em; height: 0.7em; background: var(--ill-accent); border-radius: 0.2em; }
.ill-miniphone__bar--float { width: 2.8em; margin-bottom: 0.5em; border-radius: 999px; }

/* Danh sách theme */
.ill-themerow { display: grid; grid-template-columns: 1fr auto auto; gap: 0.7em; align-items: center; padding: 0.55em 0.6em; border: 1px solid var(--ill-line-2); border-radius: 0.6em; }
.ill-themerow__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
.ill-themerow__name .ill-small { flex-basis: 100%; }
.ill-table__row .ill-themerow__name .ill-chip { font-size: 0.8em; }

/* Navi+ Live: khung khoanh + chip selector + panel nổi */
.ill-livebox { position: absolute; z-index: 5; border: 0.16em dashed var(--ill-accent); background: var(--ill-accent-soft); border-radius: 0.3em; pointer-events: none; }
.ill-livebox--header { left: 0; right: 0; top: 0; height: 3.4em; }
.ill-livebox--nav { left: 8em; width: 26em; top: 0.6em; height: 2.2em; }
.ill-livebox--hero { left: 1.2em; right: 1.2em; top: 5em; height: 10em; }
.ill-livebox--phone.ill-livebox--header { height: 3em; }
.ill-livebox--phone.ill-livebox--nav { left: 2.5em; right: 3.5em; width: auto; top: 0.5em; height: 2em; }
.ill-livebox--phone.ill-livebox--hero { left: 0.9em; right: 0.9em; top: 4em; height: 6em; }
.ill-livechip { position: absolute; left: 0.5em; bottom: -2.2em; z-index: 6; padding: 0.3em 0.7em; border-radius: 0.4em; background: var(--ill-tip-bg); color: var(--ill-tip-ink); font-size: 0.85em; white-space: nowrap; }
.ill-livechip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ill-livepanel { position: absolute; z-index: 8; right: 1em; bottom: 1em; width: 17em; padding: 0.8em; border-radius: 0.8em; background: var(--ill-bg); border: 1px solid var(--ill-line); box-shadow: var(--ill-shadow-pop); display: flex; flex-direction: column; gap: 0.5em; font-size: 0.9em; }
.ill-livepanel__row { display: grid; grid-template-columns: 0.7em 1fr auto; gap: 0.5em; align-items: center; }
.ill-livepanel__row i { width: 0.7em; height: 0.7em; border-radius: 999px; background: var(--ill-accent); }
.ill-livepanel__row b { display: block; font-size: 0.95em; }
.ill-livepanel__row code { font-size: 0.8em; color: var(--ill-ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ill-phone .ill-livepanel { left: 0.6em; right: 0.6em; bottom: 1.6em; width: auto; }

/* Link picker */
.ill-lp__row { display: flex; gap: 0.5em; align-items: center; }
.ill-lp__table { border: 1px solid var(--ill-line-2); border-radius: 0.6em; overflow: hidden; font-size: 0.9em; }
.ill-lp__head, .ill-lp__r { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 0.7em; padding: 0.4em 0.7em; align-items: center; }
.ill-lp__head { background: var(--ill-fill-2); font-weight: 700; color: var(--ill-ink-2); font-size: 0.9em; }
.ill-lp__grp { padding: 0.35em 0.7em; background: var(--ill-fill); font-weight: 700; font-size: 0.85em; display: flex; align-items: center; gap: 0.5em; }
.ill-lp__r { border-top: 1px solid var(--ill-line-2); }
.ill-lp code, .ill-kv code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; color: var(--ill-ink-2); }
.ill-lp__split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.6em; min-height: 6em; }
.ill-lp__list { display: flex; flex-direction: column; gap: 0.35em; border: 1px solid var(--ill-line-2); border-radius: 0.5em; padding: 0.5em; font-size: 0.9em; }
.ill-lp__list b { font-weight: 600; padding: 0.25em 0.4em; border-radius: 0.3em; }
.ill-lp__list b.is-on { background: var(--ill-fill); }

/* Add item: Customize */
.ill-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; align-items: start; }

/* Card: căn dọc */
.ill-cardit-row { display: flex; gap: 0.7em; }
.ill-cardit-row--3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.ill-cardit-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4em; min-width: 0; }
.ill-cardit { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 0.7em; overflow: hidden; border: 1px solid var(--ill-line-2); }
.ill-cardit .ill-ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.ill-cardit__txt { position: absolute; left: 0.7em; right: 0.7em; display: flex; flex-direction: column; gap: 0.3em; font-style: normal; z-index: 1; }
.ill-cardit__txt small { font-weight: 700; font-size: 0.85em; color: var(--ill-ink); background: var(--ill-bg); padding: 0.1em 0.4em; border-radius: 0.3em; align-self: flex-start; }
.ill-cardit__txt--top { top: 0.7em; }
.ill-cardit__txt--middle { top: 50%; transform: translateY(-50%); }
.ill-cardit__txt--bottom { bottom: 0.7em; }
.ill-cardit__lbl { display: inline-flex; align-items: center; gap: 0.3em; }
.ill-cardit-row:not(.ill-cardit-row--3) .ill-cardit { width: 6em; }

/* Lưới 12 cột */
.ill-gridpick { display: flex; flex-direction: column; gap: 0.4em; }
.ill-gp { display: inline-flex; flex-direction: column; gap: 0.25em; padding: 0.4em 0.5em; border: 1px solid var(--ill-line); border-radius: 0.45em; background: var(--ill-bg); min-width: 4.4em; }
.ill-gp.is-on { border: 2px solid var(--ill-ink); }
.ill-gp i { display: block; height: 0.5em; border-radius: 0.15em; background: linear-gradient(90deg, var(--ill-ink) calc(var(--c, 3) / var(--n, 12) * 100%), var(--ill-fill) 0); }
.ill-gp b { font-size: 0.85em; }
.ill-gp small { font-size: 0.7em; color: var(--ill-mute); }

/* Vị trí menu */
.ill-poslist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.ill-posopt { display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.5em; border: 1px solid var(--ill-line); border-radius: 0.6em; background: var(--ill-fill-2); }
.ill-posopt.is-on { border: 2px solid var(--ill-ink); background: var(--ill-bg); }
.ill-posopt small { font-size: 0.7em; font-weight: 800; letter-spacing: 0.05em; color: var(--ill-ink-2); }
.ill-mp { position: relative; display: block; width: 3.6em; height: 5.6em; border-radius: 0.6em; background: var(--ill-line); overflow: hidden; }
.ill-mp--big { width: 6em; height: 10em; }
.ill-mp__dock { position: absolute; background: var(--ill-accent); }
.ill-mp__dock--bottom { left: 0; right: 0; bottom: 0; height: 0.8em; }
.ill-mp__dock--top { left: 0; right: 0; top: 0; height: 0.8em; }
.ill-mp__dock--right-mid { right: 0; top: 38%; width: 0.8em; height: 1.6em; border-radius: 0.4em 0 0 0.4em; }
.ill-mp__dock--left-mid { left: 0; top: 38%; width: 0.8em; height: 1.6em; border-radius: 0 0.4em 0.4em 0; }
.ill-mp__dock--right-bottom { right: 0; bottom: 0.7em; width: 0.8em; height: 1.6em; border-radius: 0.4em 0 0 0.4em; }
.ill-mp__dock--left-bottom { left: 0; bottom: 0.7em; width: 0.8em; height: 1.6em; border-radius: 0 0.4em 0.4em 0; }
.ill-mp__fab { position: absolute; bottom: 0.9em; width: 1.5em; height: 1.5em; border-radius: 999px; background: var(--ill-accent); }
.ill-mp__fab--left { left: 0.7em; }
.ill-mp__fab--center { left: calc(50% - 0.75em); }
.ill-mp__fab--right { right: 0.7em; }
.ill-mp__slide { position: absolute; background: var(--ill-accent); opacity: 0.85; }
.ill-mp__slide--left { left: 0; top: 0; bottom: 0; width: 55%; }
.ill-mp__slide--right { right: 0; top: 0; bottom: 0; width: 55%; }
.ill-mp__slide--top { left: 0; right: 0; top: 0; height: 55%; }
.ill-mp__slide--bottom { left: 0; right: 0; bottom: 0; height: 55%; }
.ill-mp__slide--full { inset: 0; }
.ill-mp__slide--popup { left: 12%; right: 12%; top: 22%; bottom: 22%; border-radius: 0.4em; }
.ill-mp__slide--fixed { left: 0; top: 0; bottom: 0; width: 30%; }

/* Publish: đầu thẻ */
.ill-pubhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.ill-pubhead__st { display: inline-flex; align-items: center; gap: 0.5em; flex: none; }

/* Backup / confirm / dropzone */
.ill-dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 1em; border: 1.5px dashed var(--ill-line); border-radius: 0.6em; color: var(--ill-ink-2); text-align: center; }
.ill-dropzone .ill-ic { width: 1.8em; height: 1.8em; }
.ill-dropzone small { color: var(--ill-mute); }
.ill-confirm-over { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; background: var(--ill-scrim); border-radius: 0.9em; }
.ill-confirm { background: var(--ill-bg); border-radius: 0.7em; padding: 1em; display: flex; flex-direction: column; align-items: center; gap: 0.6em; width: 72%; text-align: center; box-shadow: var(--ill-shadow-pop); }
.ill-dialog { background: var(--ill-bg); border: 1px solid var(--ill-line-2); border-top: 0.3em solid var(--ill-danger); border-radius: 0.8em; padding: 1.2em; display: flex; flex-direction: column; align-items: center; gap: 0.8em; box-shadow: var(--ill-shadow-pop); text-align: center; }
.ill-dialog__ic { width: 2.6em; height: 2.6em; border-radius: 999px; background: var(--ill-bad-bg); color: var(--ill-danger); display: inline-flex; align-items: center; justify-content: center; }
.ill-dialog__ic--warn { background: var(--ill-warn-bg); color: var(--ill-warn-ink); }
.ill-dialog__ic .ill-ic { width: 1.4em; height: 1.4em; }
.ill-snackbar { display: inline-block; margin: 0 auto; padding: 0.8em 1.4em; border-radius: 0.6em; background: #333; color: #fff; font-size: 0.95em; min-width: 14em; text-align: center; }
.ill-savebar { display: flex; align-items: center; justify-content: center; gap: 0.8em; padding: 0.8em; border: 1px solid var(--ill-line-2); border-radius: 0.7em; background: var(--ill-bg); }
.ill-badge-warn { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.7em; border-radius: 0.5em; background: #ffec98; color: #4a3a00; font-size: 0.85em; font-weight: 650; }

/* Analytics */
.ill-stat { display: flex; flex-direction: column; gap: 0.1em; padding: 0.5em 0.7em; border: 1px solid var(--ill-line-2); border-radius: 0.6em; }
.ill-stat small { color: var(--ill-ink-2); font-size: 0.8em; }
.ill-stat b { font-size: 1.5em; font-weight: 750; }
.ill-delta { font-style: normal; font-size: 0.75em; font-weight: 700; color: var(--ill-ok); }
.ill-spark { display: block; height: 11em; border: 1px solid var(--ill-line-2); border-radius: 0.6em; padding: 0.6em; }
.ill-spark svg { width: 100%; height: 100%; }
.ill-spark path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ill-spark__a { stroke: var(--ill-accent); }
.ill-spark__b { stroke: var(--ill-ink-2); }
.ill-heat { display: flex; flex-direction: column; font-size: 0.92em; }
.ill-heat__h, .ill-heat__r { display: grid; grid-template-columns: 1.2fr 1.6fr 0.7fr 0.6fr; gap: 0.6em; padding: 0.4em 0.6em; align-items: center; }
.ill-heat__h { font-weight: 700; color: var(--ill-ink-2); font-size: 0.85em; }
.ill-heat__r { background: color-mix(in srgb, var(--ill-accent) calc(var(--h, 10) * 1%), transparent); border-radius: 0.3em; margin-top: 0.15em; }
.ill-heat__scale { display: inline-block; width: 6em; height: 0.6em; border-radius: 999px; vertical-align: middle; background: linear-gradient(90deg, var(--ill-accent-tint), var(--ill-accent)); }
.ill-heat code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; color: var(--ill-ink-2); }

/* Danh sách menu: nhóm, dòng tối ưu, Tools */
.ill-table__grp { display: flex; align-items: center; gap: 0.5em; padding: 0.6em 1.1em; background: var(--ill-fill-2); border-bottom: 1px solid var(--ill-line-2); font-size: 0.92em; }
.ill-table__grp .ill-ic { width: 1.1em; height: 1.1em; color: var(--ill-ink-2); }
.ill-optnote { display: flex; align-items: center; gap: 0.5em; margin-top: 0.4em; padding: 0.35em 0.5em; border-radius: 0.5em; background: var(--ill-warn-bg); border: 1px solid var(--ill-warn-line); color: var(--ill-warn-ink); font-size: 0.85em; }
.ill-optnote .ill-ic { width: 1.1em; height: 1.1em; }
.ill-ctx--wide { width: 16em; }
.ill-ctx__pair { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.3em; padding: 0.2em !important; }
.ill-ctx__pair .ill-btn { justify-content: center; }
.ill-mega__prod { display: flex; flex-direction: column; gap: 0.45em; }
.ill-mega__prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.ill-livebox--burger { left: 0.7em; top: 0.4em; width: 2.2em; height: 2.2em; }
.ill-livebox--phone.ill-livebox--burger { left: 0.7em; top: 3.2em; }

/* N5 (04/11/2026): Mobile Menu "rich" (header + ô tìm kiếm, lưới ô ảnh, banner, danh sách ›) và Tab Bar open="sub" (popup có caret) */
.ill-drawer--rich { width: 88%; overflow: hidden; }
.ill-drawer--rich .ill-drawer__head { gap: 0.6em; height: 3.2em; }
.ill-drawer--rich .ill-store__logo { flex: none; }
.ill-drawer__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4em; height: 1.9em; padding: 0 0.7em; border-radius: 999px; background: var(--ill-fill-2); border: 1px solid var(--ill-line-2); color: var(--ill-mute); }
.ill-drawer__search .ill-ic { width: 1em; height: 1em; flex: none; }
.ill-drawer__search .ill-bar { width: 55%; margin: 0; }
.ill-rich { padding: 0.7em 0.9em 0.3em; display: flex; flex-direction: column; gap: 0.7em; }
.ill-rich__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; }
.ill-rich__tile { display: flex; flex-direction: column; align-items: center; gap: 0.35em; }
.ill-rich__tile .ill-bar { width: 70%; height: 0.45em; margin: 0; }
.ill-rich__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 0.6em; overflow: hidden; display: block; border: 1px solid var(--ill-line-2); }
.ill-rich__img svg, .ill-rich__banner svg { width: 100%; height: 100%; display: block; }
.ill-rich__img svg { fill: rgba(255, 255, 255, 0.55); }
.ill-rich__img--1 { background: linear-gradient(135deg, #bfe3d0, #7fc4a3); }
.ill-rich__img--2 { background: linear-gradient(135deg, #f6d9b8, #eeae78); }
.ill-rich__img--3 { background: linear-gradient(135deg, #cfd8f6, #9aaae8); }
.ill-rich__img--4 { background: linear-gradient(135deg, #f3cbd9, #e592ae); }
.ill-rich__banner { position: relative; height: 4.6em; border-radius: 0.7em; overflow: hidden; background: linear-gradient(120deg, #1f9d63, #62c79a); display: flex; align-items: center; }
.ill-rich__banner svg { position: absolute; right: 0; top: 0; width: 55%; fill: rgba(255, 255, 255, 0.28); }
.ill-rich__btxt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.4em; padding: 0 0.9em; width: 55%; }
.ill-rich__btxt .ill-bar { height: 0.55em; margin: 0; background: rgba(255, 255, 255, 0.85); }
.ill-rich__btxt .ill-bar + .ill-bar { width: 60%; background: rgba(255, 255, 255, 0.5); }
.ill-rich__btxt i { align-self: flex-start; font-style: normal; font-weight: 800; font-size: 0.8em; letter-spacing: 0.06em; padding: 0.2em 0.7em; border-radius: 999px; background: #fff; color: #17804f; }
.ill-drawer--rich .ill-drawer__list { padding: 0.2em 0 0; flex: none; }
.ill-drawer--rich .ill-drawer__item { height: 2.5em; }

.ill-subpop { position: absolute; left: 0.6em; right: 0.6em; bottom: 5.2em; z-index: 4; display: flex; flex-direction: column; padding: 0.3em; border-radius: 1em; background: var(--ill-bg); border: 1px solid var(--ill-line-2); box-shadow: var(--ill-shadow-pop); }
.ill-subpop--float { bottom: 6.2em; }
.ill-subpop::after { content: ""; position: absolute; bottom: -0.5em; left: calc((100% + 1.2em) * var(--ill-caret, 50) / 100 - 0.6em - 0.5em); width: 0.9em; height: 0.9em; background: var(--ill-bg); border-right: 1px solid var(--ill-line-2); border-bottom: 1px solid var(--ill-line-2); transform: rotate(45deg); border-radius: 0 0 0.2em 0; }
.ill-subpop__it { display: flex; align-items: center; gap: 0.65em; height: 2.5em; padding: 0 0.7em; border-radius: 0.7em; font-size: 0.82em; font-weight: 600; color: var(--ill-ink); }
.ill-subpop__it:first-child { background: var(--ill-accent-tint); color: var(--ill-accent-2); }
.ill-subpop__it .ill-ic { width: 1.35em; height: 1.35em; flex: none; }
.ill-subpop__it b { font-weight: 600; flex: none; }
.ill-subpop__it .ill-ic:last-child { margin-left: auto; width: 1em; height: 1em; color: var(--ill-mute); }
.ill-subpop__tag { font-style: normal; font-size: 0.72em; font-weight: 800; letter-spacing: 0.05em; padding: 0.15em 0.5em; border-radius: 999px; background: var(--ill-danger); color: #fff; }

/* N5d (04/11/2026): 6 hình loại menu ở trang "Navi+ là gì?" — bản rich (ảnh màu, tag SALE) + hoạt hình CSS (animate="true"). */
.ill-sale { display: inline-block; font-style: normal; font-size: 0.62em; font-weight: 800; letter-spacing: 0.05em; line-height: 1; padding: 0.22em 0.5em; border-radius: 999px; background: var(--ill-danger); color: #fff; vertical-align: middle; margin-left: 0.4em; flex: none; }
.ill-sale--hot { background: #f08a1c; }
.ill-rich__img { position: relative; }
.ill-rich__img .ill-sale { position: absolute; top: 0.3em; left: 0.3em; margin: 0; font-size: 0.55em; }
.ill-rich__img--5 { background: linear-gradient(135deg, #d9cff3, #a58ae0); }
.ill-rich__img--6 { background: linear-gradient(135deg, #fbe7a8, #f2c14e); }
.ill-store--desk .ill-store__nav > span .ill-sale { font-size: 0.55em; }
.ill-store--desk .ill-store__nav > span { position: relative; }
/* Desktop mega rich */
.ill-mega--rich { grid-template-columns: 1fr 1.7fr; grid-template-areas: "links tiles" "banner banner"; gap: 0.9em 1.3em; padding: 1.1em 1.3em 1em; transform-origin: top center; }
.ill-mega--rich .ill-mega__links { grid-area: links; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; min-width: 0; }
.ill-mega--rich .ill-mega__col span { display: flex; align-items: center; }
.ill-mega__tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
.ill-mega__tile { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }
.ill-mega__tile .ill-rich__img { aspect-ratio: 4 / 3; border-radius: 0.55em; }
.ill-mega__tile .ill-bar { height: 0.5em; margin: 0; width: 75%; }
.ill-mega__banner { grid-area: banner; position: relative; display: flex; align-items: center; gap: 1em; height: 3.1em; padding: 0 1em; border-radius: 0.7em; overflow: hidden; background: linear-gradient(120deg, #d4381f, #f08a1c); }
.ill-mega__banner svg { position: absolute; right: 0; top: 0; height: 100%; width: auto; aspect-ratio: 3 / 2; fill: rgba(255, 255, 255, 0.25); }
.ill-mega__banner .ill-rich__btxt { width: 12em; flex: none; padding: 0; }
.ill-mega__bcta { position: relative; font-style: normal; font-weight: 800; font-size: 0.85em; padding: 0.3em 0.9em; border-radius: 999px; background: #fff; color: #c2391b; }
/* Mobile mega rich */
.ill-mmega--rich .ill-mmega__tabs span { display: inline-flex; align-items: center; }
.ill-mmega--rich .ill-mmega__panel { display: block; padding: 0.6em; }
.ill-mmega__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
.ill-mmega--rich .ill-rich__tile .ill-rich__img { border-radius: 0.5em; }
.ill-mmega--rich .ill-rich__tile .ill-bar { width: 60%; }
.ill-rich__banner--sm { height: 2.6em; margin-top: 0.5em; border-radius: 0.55em; background: linear-gradient(120deg, #d4381f, #f08a1c); }
.ill-rich__banner--sm .ill-rich__btxt { flex-direction: row; align-items: center; gap: 0.6em; }
.ill-rich__banner--sm .ill-rich__btxt .ill-bar { width: 50%; }
.ill-rich__banner--sm .ill-rich__btxt i { color: #c2391b; margin: 0; }
/* Icon menu rich */
.ill-iconmenu--rich { grid-template-columns: repeat(4, 1fr); row-gap: 0.7em; padding: 0.5em 0; }
.ill-iconmenu--rich .ill-iconmenu__tile { position: relative; }
.ill-iconmenu--rich .ill-iconmenu__img { border: 0; color: #fff; border-radius: 0.9em; }
.ill-iconmenu--rich .ill-iconmenu__img--1 { background: linear-gradient(135deg, #7fc4a3, #1f9d63); }
.ill-iconmenu--rich .ill-iconmenu__img--2 { background: linear-gradient(135deg, #eeae78, #e07a2f); }
.ill-iconmenu--rich .ill-iconmenu__img--3 { background: linear-gradient(135deg, #9aaae8, #5a6fd6); }
.ill-iconmenu--rich .ill-iconmenu__img--4 { background: linear-gradient(135deg, #f08a8a, #d4381f); }
.ill-iconmenu--rich .ill-iconmenu__img--5 { background: linear-gradient(135deg, #e592ae, #cf4f7e); }
.ill-iconmenu--rich .ill-iconmenu__img--6 { background: linear-gradient(135deg, #f2c14e, #d9962a); }
.ill-iconmenu--rich .ill-iconmenu__img--7 { background: linear-gradient(135deg, #a58ae0, #7a56cf); }
.ill-iconmenu--rich .ill-iconmenu__img--8 { background: linear-gradient(135deg, #6fc7d9, #2f9ab5); }
.ill-iconmenu--rich .ill-sale { position: absolute; top: -0.35em; right: 0; margin: 0; font-size: 0.6em; }
/* FAB rich */
.ill-fab--rich { gap: 0.55em; }
.ill-fab--rich .ill-fab__act > i { border: 0; color: #fff; }
.ill-fab--rich .ill-fab__act--1 > i { background: #25a95a; }
.ill-fab--rich .ill-fab__act--2 > i { background: #3b82f6; }
.ill-fab--rich .ill-fab__act--3 > i { background: var(--ill-accent); color: var(--ill-on-accent); }
.ill-fab--rich .ill-fab__act--4 > i { background: #4b5563; }
.ill-fab--rich .ill-fab__main { position: relative; }
.ill-fab__dot { position: absolute; top: -0.2em; right: -0.1em; min-width: 1.4em; height: 1.4em; border-radius: 999px; background: var(--ill-danger); color: #fff; font-size: 0.72em; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ill-bg); }
.ill-fab--rich .ill-fab__main .ill-ic { flex: none; }

/* ---- Hoạt hình: chỉ khi .ill-anim (animate="true"), tắt khi người dùng giảm chuyển động (khi đó đứng yên ở trạng thái mở) ---- */
@media (prefers-reduced-motion: no-preference) {
  .ill-anim { --ill-ad: 0s; }
  /* Desktop mega: thả xuống / thu lên */
  .ill-anim .ill-mega { animation: ill-a-drop 7s ease-in-out var(--ill-ad) infinite both; }
  .ill-anim .ill-mega--rich .ill-mega__tile { animation: ill-a-rise 7s ease-out var(--ill-ad) infinite both; }
  .ill-anim .ill-mega--rich .ill-mega__tile:nth-child(2) { animation-delay: calc(var(--ill-ad) + 0.12s); }
  .ill-anim .ill-mega--rich .ill-mega__tile:nth-child(3) { animation-delay: calc(var(--ill-ad) + 0.24s); }
  .ill-anim .ill-mega__banner { animation: ill-a-rise 7s ease-out calc(var(--ill-ad) + 0.34s) infinite both; }
  .ill-anim .ill-store__nav > span.is-open { animation: ill-a-tab 7s ease-in-out var(--ill-ad) infinite both; }
  /* Mobile Menu: ngăn kéo trượt ra / vào */
  .ill-anim .ill-drawer { animation: ill-a-drawer 7.5s cubic-bezier(.3,.7,.2,1) var(--ill-ad) infinite both; }
  .ill-anim .ill-scrim { animation: ill-a-fade 7.5s ease-in-out var(--ill-ad) infinite both; }
  .ill-anim .ill-rich__tile { animation: ill-a-rise 7.5s ease-out var(--ill-ad) infinite both; }
  .ill-anim .ill-rich__tile:nth-child(2) { animation-delay: calc(var(--ill-ad) + 0.1s); }
  .ill-anim .ill-rich__tile:nth-child(3) { animation-delay: calc(var(--ill-ad) + 0.2s); }
  .ill-anim .ill-rich__tile:nth-child(4) { animation-delay: calc(var(--ill-ad) + 0.3s); }
  /* Tab Bar: sub menu bật lên / hạ xuống */
  .ill-anim .ill-subpop { transform-origin: calc(var(--ill-caret, 50) * 1%) 100%; animation: ill-a-pop 6.5s cubic-bezier(.3,.8,.3,1.1) var(--ill-ad) infinite both; }
  .ill-anim .ill-subpop__it { animation: ill-a-rise 6.5s ease-out var(--ill-ad) infinite both; }
  .ill-anim .ill-subpop__it:nth-child(2) { animation-delay: calc(var(--ill-ad) + 0.08s); }
  .ill-anim .ill-subpop__it:nth-child(3) { animation-delay: calc(var(--ill-ad) + 0.16s); }
  .ill-anim .ill-subpop__it:nth-child(4) { animation-delay: calc(var(--ill-ad) + 0.24s); }
  .ill-anim .ill-tabbar__tab.is-active .ill-tabbar__ico { animation: ill-a-bob 6.5s ease-in-out var(--ill-ad) infinite both; }
  /* Mobile mega: panel cuộn xuống / cuộn lên */
  .ill-anim .ill-mmega--rich .ill-mmega__panel { animation: ill-a-roll 7s ease-in-out var(--ill-ad) infinite both; }
  .ill-anim .ill-mmega--rich .ill-rich__tile { animation: ill-a-rise 7s ease-out var(--ill-ad) infinite both; }
  .ill-anim .ill-mmega--rich .ill-rich__tile:nth-child(2) { animation-delay: calc(var(--ill-ad) + 0.1s); }
  .ill-anim .ill-mmega--rich .ill-rich__tile:nth-child(3) { animation-delay: calc(var(--ill-ad) + 0.2s); }
  .ill-anim .ill-mmega--rich .ill-rich__tile:nth-child(4) { animation-delay: calc(var(--ill-ad) + 0.3s); }
  .ill-anim .ill-mmega--rich .ill-rich__tile:nth-child(5) { animation-delay: calc(var(--ill-ad) + 0.4s); }
  .ill-anim .ill-mmega--rich .ill-rich__tile:nth-child(6) { animation-delay: calc(var(--ill-ad) + 0.5s); }
  /* Icon menu: lưới ô trượt lên rồi hạ xuống theo làn sóng */
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile { animation: ill-a-wave 6s ease-in-out var(--ill-ad) infinite both; }
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile:nth-child(2) { animation-delay: calc(var(--ill-ad) + 0.1s); }
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile:nth-child(3) { animation-delay: calc(var(--ill-ad) + 0.2s); }
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile:nth-child(4) { animation-delay: calc(var(--ill-ad) + 0.3s); }
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile:nth-child(5) { animation-delay: calc(var(--ill-ad) + 0.2s); }
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile:nth-child(6) { animation-delay: calc(var(--ill-ad) + 0.3s); }
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile:nth-child(7) { animation-delay: calc(var(--ill-ad) + 0.4s); }
  .ill-anim .ill-iconmenu--rich .ill-iconmenu__tile:nth-child(8) { animation-delay: calc(var(--ill-ad) + 0.5s); }
  /* FAB: bung / thu nút con */
  .ill-anim .ill-fab__act { animation: ill-a-fab 6.5s cubic-bezier(.3,.8,.3,1.15) var(--ill-ad) infinite both; transform-origin: 100% 100%; }
  .ill-anim .ill-fab__act--3 { animation-delay: calc(var(--ill-ad) + 0.08s); }
  .ill-anim .ill-fab__act--2 { animation-delay: calc(var(--ill-ad) + 0.16s); }
  .ill-anim .ill-fab__act--1 { animation-delay: calc(var(--ill-ad) + 0.24s); }
  .ill-anim .ill-fab__main .ill-ic { animation: ill-a-spin 6.5s ease-in-out var(--ill-ad) infinite both; }
  .ill-anim .ill-fab__main { animation: ill-a-ring 3.2s ease-out var(--ill-ad) infinite; }
  /* Tag SALE nhấp nháy nhẹ */
  .ill-anim .ill-sale, .ill-anim .ill-subpop__tag { animation: ill-a-blink 1.8s ease-in-out var(--ill-ad) infinite; }
  .ill-anim .ill-rich__banner { animation: ill-a-shine 7s ease-in-out var(--ill-ad) infinite; }
}
@keyframes ill-a-drop { 0%, 6% { opacity: 0; transform: translateY(-1.2em) scaleY(0.82); pointer-events: none; } 16%, 70% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-1.2em) scaleY(0.82); } }
@keyframes ill-a-rise { 0%, 8% { opacity: 0; transform: translateY(0.9em); } 22%, 70% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(0.9em); } }
@keyframes ill-a-tab { 0%, 6%, 82%, 100% { box-shadow: inset 0 -0.18em 0 transparent; } 16%, 70% { box-shadow: inset 0 -0.18em 0 var(--ill-accent); } }
@keyframes ill-a-drawer { 0%, 8% { transform: translateX(-104%); } 24%, 72% { transform: none; } 88%, 100% { transform: translateX(-104%); } }
@keyframes ill-a-fade { 0%, 8% { opacity: 0; } 24%, 72% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes ill-a-pop { 0%, 8% { opacity: 0; transform: translateY(1em) scale(0.8); } 20%, 72% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: translateY(1em) scale(0.8); } }
@keyframes ill-a-bob { 0%, 6%, 80%, 100% { transform: none; } 14% { transform: translateY(-0.35em); } 22%, 72% { transform: none; } }
@keyframes ill-a-roll { 0%, 8% { opacity: 0; clip-path: inset(0 0 100% 0); } 24%, 70% { opacity: 1; clip-path: inset(0 0 0 0); } 86%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); } }
@keyframes ill-a-wave { 0%, 8% { opacity: 0; transform: translateY(1.2em) scale(0.85); } 22%, 40% { opacity: 1; transform: none; } 31% { transform: translateY(-0.45em); } 55%, 70% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(1.2em) scale(0.85); } }
@keyframes ill-a-fab { 0%, 8% { opacity: 0; transform: translateY(1.4em) scale(0.3); } 22%, 72% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(1.4em) scale(0.3); } }
@keyframes ill-a-spin { 0%, 6% { transform: rotate(-90deg) scale(0.7); } 20%, 72% { transform: none; } 86%, 100% { transform: rotate(-90deg) scale(0.7); } }
@keyframes ill-a-ring { 0% { box-shadow: var(--ill-shadow-pop), 0 0 0 0 rgba(31, 157, 99, 0.45); } 70%, 100% { box-shadow: var(--ill-shadow-pop), 0 0 0 0.9em rgba(31, 157, 99, 0); } }
@keyframes ill-a-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.72; transform: scale(1.1); } }
@keyframes ill-a-shine { 0%, 100% { filter: none; } 40% { filter: brightness(1.12); } }
.ill-store.ill-anim { overflow: hidden; }

/* N15 (04/11/2026): Desktop Mega có Tab — thanh tab bên trái (mặc định) hoặc phía trên, mỗi tab một bảng nội dung */
.ill-mega--tabs { display: grid; grid-template-columns: 9em 1fr; gap: 0; padding: 0; overflow: hidden; transform-origin: top center; }
.ill-mega--tabs-top { grid-template-columns: 1fr; }
.ill-mega__rail { display: flex; flex-direction: column; gap: 0.15em; padding: 0.9em 0.7em; background: var(--ill-canvas); border-right: 1px solid var(--ill-line-2); }
.ill-mega--tabs-top .ill-mega__rail { flex-direction: row; gap: 0.3em; padding: 0.6em 1em 0; border-right: 0; border-bottom: 1px solid var(--ill-line-2); }
.ill-mega__tab { display: block; padding: 0.55em 0.8em; border-radius: 0.5em; font-size: 0.92em; font-weight: 650; color: var(--ill-ink-2); white-space: nowrap; }
.ill-mega__tab.is-on { background: var(--ill-ink); color: #fff; }
.ill-mega--tabs-top .ill-mega__tab { border-radius: 0.5em 0.5em 0 0; background: transparent; border-bottom: 0.2em solid transparent; }
.ill-mega--tabs-top .ill-mega__tab.is-on { background: transparent; color: var(--ill-ink); border-bottom-color: #1a7a4f; }
.ill-mega__pane { display: grid; grid-template-columns: 1fr 1.7fr; gap: 1.2em; padding: 1.1em 1.3em; min-width: 0; }
.ill-mega--tabs .ill-mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; min-width: 0; }
.ill-mega__tiles--2 { grid-template-columns: repeat(2, 1fr); }
@media (prefers-reduced-motion: no-preference) {
  .ill-anim .ill-mega--tabs .ill-mega__tile { animation: ill-a-rise 7s ease-out var(--ill-ad) infinite both; }
}

/* N15: hình nhỏ khối động trong cột Desktop Mega (_includes/ill/mega-block.html) */
.ill-mb { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.2em; padding: 1.1em 1.2em; background: var(--ill-bg); border: 1px solid var(--ill-line-2); border-radius: 0.8em; box-shadow: var(--ill-shadow-pop); }
.ill-mb__links { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.ill-mb__links b { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ill-ink); }
.ill-mb__links span { font-size: 0.92em; color: var(--ill-ink-2); }
.ill-mb__blk { position: relative; display: flex; min-width: 0; }
.ill-mb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; flex: 1; }
.ill-mb__grid .ill-rich__img { aspect-ratio: 4 / 3; border-radius: 0.5em; display: block; }
.ill-mb__badge { position: absolute; top: -0.5em; right: -0.5em; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #1a7a4f; color: #fff; }
.ill-mb__badge .ill-ic { width: 1em; height: 1em; }
.ill-mb__spot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; min-height: 8em; padding: 0.9em; border: 0.15em dashed var(--ill-danger); border-radius: 0.6em; text-align: center; }
.ill-mb__spot b { font-size: 1.05em; color: var(--ill-ink); }
.ill-mb__cd { display: inline-flex; align-items: center; gap: 0.25em; font-weight: 800; color: var(--ill-ink); }
.ill-mb__cd u { text-decoration: none; padding: 0.3em 0.45em; border-radius: 0.35em; background: var(--ill-ink); color: #fff; }
.ill-mb__lab { font-size: 0.75em; font-weight: 700; color: var(--ill-danger); text-transform: uppercase; letter-spacing: 0.05em; }
.ill-mb__spot--html { border-color: var(--ill-line); background: var(--ill-canvas); }
.ill-mb__spot--html .ill-mb__lab { color: var(--ill-ink-2); }
.ill-mb__play { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--ill-ink); color: #fff; }
.ill-mb__play .ill-ic { width: 1.2em; height: 1.2em; }
.ill-mega__pane > .ill-mega__links, .ill-mega__pane > .ill-mega__tiles { grid-area: auto; align-self: start; }
.ill-mega--tabs-top .ill-mega__pane { grid-template-columns: 1fr 1.5fr; }

/* N15b: hình nhỏ cho các mẫu item của Desktop Mega (tabs / list / grid / banner) */
.ill-mb--one { grid-template-columns: 1fr; }
.ill-mb--tabs { grid-template-columns: 6.2em 1fr; padding: 0; overflow: hidden; gap: 0; }
.ill-mb__rail { display: flex; flex-direction: column; gap: 0.15em; padding: 0.8em 0.6em; background: var(--ill-canvas); border-right: 1px solid var(--ill-line-2); }
.ill-mb__rail i { font-style: normal; font-size: 0.9em; font-weight: 650; padding: 0.45em 0.6em; border-radius: 0.45em; color: var(--ill-ink-2); }
.ill-mb__rail i.is-on { background: var(--ill-ink); color: #fff; }
.ill-mb--tabs .ill-mb__blk { padding: 0.9em 1em; }
.ill-mb__pane { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 0.8em; flex: 1; align-items: start; }
.ill-mb__thumb { display: block; aspect-ratio: 4 / 5; border-radius: 0.5em; }
.ill-mb__list { flex: 1; display: flex; flex-direction: column; }
.ill-mb__list b { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3em; }
.ill-mb__list > span { display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0; border-bottom: 1px solid var(--ill-line-2); font-size: 0.92em; color: var(--ill-ink-2); }
.ill-mb__list > span .ill-ic { width: 0.9em; height: 0.9em; }
.ill-mb__cats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.ill-mb__cats > span { display: flex; flex-direction: column; gap: 0.3em; font-size: 0.85em; font-weight: 600; color: var(--ill-ink-2); text-align: center; }
.ill-mb__cats i { display: block; aspect-ratio: 1; border-radius: 0.5em; }
.ill-mb__bn { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.6em; }
.ill-mb__banner { display: flex; flex-direction: column; justify-content: center; gap: 0.5em; padding: 1em; border-radius: 0.6em; background: linear-gradient(120deg, #d4381f, #f08a1c); color: #fff; min-height: 7em; }
.ill-mb__banner b { font-size: 1.15em; }
.ill-mb__banner .ill-bar { width: 60%; background: rgba(255,255,255,.55); }
.ill-mb__banner i { font-style: normal; align-self: flex-start; padding: 0.25em 0.7em; border-radius: 99em; background: #fff; color: #c2391b; font-size: 0.8em; font-weight: 800; }
.ill-mb__card { position: relative; display: block; border-radius: 0.6em; min-height: 7em; }
.ill-mb__card em { position: absolute; left: 0.5em; bottom: 0.5em; font-style: normal; font-size: 0.8em; font-weight: 700; padding: 0.2em 0.6em; border-radius: 0.4em; background: rgba(0,0,0,.65); color: #fff; }

/* N15c — thanh menu tràn: rớt dòng thứ hai (wrap=2) / giữ một dòng + nút › (wrap=arrows) */
.ill-store__head--wrap { height: auto !important; min-height: 3.4em; align-items: flex-start; padding-top: .55em; padding-bottom: .55em; }
.ill-store__head--wrap .ill-store__icons { align-self: flex-start; margin-top: .15em; }
.ill-store__nav--2 { flex-wrap: wrap; height: auto; flex: 0 1 46%; row-gap: .25em; gap: .3em 1.1em; margin-left: 1em; align-self: flex-start; }
.ill-store__nav--2 > span { height: auto; }
.ill-store__nav--arrows { flex: 0 1 64%; min-width: 0; overflow: hidden; position: relative; gap: 1.1em; margin-left: 1em; white-space: nowrap; padding-right: 2.6em !important; align-self: center; }
.ill-store__nav--arrows > span { flex: none; }
.ill-store__navarrow { position: absolute; right: .25em; top: 50%; transform: translateY(-50%); width: 1.7em; height: 1.7em; border-radius: 50%; background: #e6e8ec; box-shadow: -.9em 0 .5em .3em #fff; display: grid; place-items: center; font-style: normal; }
.ill-store__navarrow .ill-ic { width: 1em; height: 1em; }

/* Khôi 04/11: vòng khoanh nằm NGOÀI thẻ (+ quầng mờ) tạo "line bọc line" chìa ra — vẽ vòng trùng đúng viền thẻ, cùng bo góc, bỏ quầng */
.ill-hl { border-radius: inherit; }
.ill-ring { inset: -1px; border-radius: inherit; box-shadow: none; border-width: 2px; }
.ill-hl--round .ill-ring { border-radius: 999px; }
.ill-pickcard.is-on:has(> .ill-hl) { box-shadow: none; }
/* Khôi 04/11: nút [x] góc popup gây nhầm "bấm được" — ẩn ở mọi popup app, trừ khi bài đang khoanh chính nút đó */
.ill-modal__head > .ill-btn--icon:has(path[d="M6 6l12 12M18 6 6 18"]):not(:has(.ill-hl)) { display: none; }