/* ───────────────────────────────────────────────────────────────────────────
 * editor-mobile.css — lop GIAO DIEN APP DIEN THOAI cho /editor/ (<= 640px).
 *
 * Chu site 17/10/2026: *"Lam lai giao dien mobile cho giong mot app dien thoai that:
 * canvas la nhan vat chinh, cong cu giau o 2 mep xo ra khi can, thanh duoi cung co cac
 * hanh dong chinh."*
 *
 * ## Bo cuc
 *   .ed9  (cao = man hinh - dau trang site)
 *     └ .e9m                     khung app, overflow:hidden, stacking context rieng
 *         ├ .e9m-stage           san khau: .center-stage (3D) + .canvas-panel (ve pixel)
 *         │                      xep DE NHAU (absolute inset:0), doi nhau bang 2D/3D
 *         ├ .e9m-scrim           man mo khi drawer mo
 *         ├ .e9m-dw--l           DRAWER TRAI: .tool-rail + .part-picker-card
 *         ├ .e9m-dw--r           DRAWER PHAI: .color-card + .control-rail + Background
 *         ├ .e9m-tab--l/--r      hai tab nho dinh o mep, truot theo drawer
 *         └ .e9m-bar             thanh duoi: Open · Undo · Redo · 2D/3D · Save
 *
 * ## ⛔ MOI quy tac deu co tien to `html.e9m-on .ed9`
 *    - `.ed9` => khong lot ra chrome chung cua site (header, footer, mega menu).
 *    - `html.e9m-on` => CHI ap khi `editor-mobile.js` DA dung xong khung. Thieu cong nay
 *      thi trong khoang thoi gian CSS da nap ma JS chua chay (hoac JS loi/bi chan), cac
 *      quy tac `position:absolute; inset:0` se ap len `.center-stage` khi no VAN con nam
 *      trong `.editor-layout` — ba cot de len nhau thanh mot cuc, trang nhin nhu hong ma
 *      khong co loi nao o console.
 *
 * ## ⛔ Panel dang an dung `visibility` + `opacity`, KHONG dung `display:none`
 *    `widget-core.js` do kich thuoc bang `previewCanvas.clientWidth/clientHeight` va
 *    `canvasScroll.clientWidth/clientHeight`. `display:none` cho ca hai so do = 0, nen
 *    `viewer.width/height` bi dat ve 0 va `fitCanvasZoomToFrame()` thoat som — doi lai
 *    2D/3D mot vong la khung xem 3D tro thanh mot o 0px. `visibility:hidden` giu nguyen
 *    kich thuoc nen moi phep do van dung.
 *
 * ## ⛔ Khong dung `border` o dau
 *    `editor-9mc.css` co `.ed9, .ed9 * { border-color: transparent !important }`. Moi
 *    duong phan cach phai lam bang `box-shadow`.
 *
 * ## ⛔ Mau lay tu bien `--e9-*` cua `editor-9mc.css` (co ban du phong)
 *    Nho vay che do sang/toi — ca `[data-theme]` lan `prefers-color-scheme` — tu dung,
 *    khong phai viet lai mot khoi quy tac che do toi thu hai o day.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

/* ═══════════════════════════════════════════════════════════════════════════
 * 1. KHUNG NGOAI — editor chiem gan het chieu cao kha dung
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ⛔ `margin: 0 -16px` de bu dung `padding: 0 16px` cua `main.wrap` (chrome site) =>
 *    editor trai het be ngang nhu mot app, ma KHONG phai sua CSS cua chrome. */
html.e9m-on .ed9 {
  margin: 0 -16px !important;
  padding: 0 !important;
  height: calc(100vh - var(--e9m-top, 56px));
  height: calc(100svh - var(--e9m-top, 56px));
  min-height: 430px;
  overflow: hidden;
}

html.e9m-on .ed9 main.editor-page {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html.e9m-on .ed9 .editor-layout {
  display: block !important;
  grid-template-columns: none !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
}

html.e9m-on .ed9 .e9m {
  position: relative;
  isolation: isolate;          /* khong de bong cua drawer lot ra dau trang site */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--e9-mat, #fff);
}

html.e9m-on .ed9 .e9m-an { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 2. SAN KHAU — 3D va bang ve pixel xep de nhau, chiem het cho con lai
 * ═══════════════════════════════════════════════════════════════════════════ */

html.e9m-on .ed9 .e9m-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--e9-mat2, #f8f9fa);
}

html.e9m-on .ed9 .e9m-stage > .center-stage,
html.e9m-on .ed9 .e9m-stage > .canvas-panel {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  order: 0 !important;
  background-image: none !important;
  transition: opacity .18s ease;
}

/* ⛔ XEM GHI CHU DAU TEP: phai la `visibility`, khong duoc la `display:none`. */
html.e9m-on .ed9 .e9m-stage > .is-e9m-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── 2a. khung xem 3D ───────────────────────────────────────────────────── */
html.e9m-on .ed9 .e9m-stage #previewWrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

html.e9m-on .ed9 .e9m-stage #previewCanvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* ⛔ Thieu `touch-action:none` thi keo ngon tay de quay nguoi choi se CUON TRANG thay vi
   *    quay mo hinh — tren dien thoai gan nhu khong quay duoc. */
  touch-action: none;
}

/* thanh chip noi (Auto Rotate + cac hoat canh): mot hang, cuon ngang */
html.e9m-on .ed9 .e9m-stage .preview-bar {
  position: absolute !important;
  top: 8px !important;
  bottom: auto !important;
  left: 8px !important;
  right: 8px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  z-index: 6 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  /* ⛔ `justify-content: center` (mac dinh cua thanh noi ban goc) + `overflow-x:auto` thi
   *    chip dau tien bi CAT o mep trai va khong cuon tro lai duoc — mot loi chi thay bang
   *    mat, khong phep do nao bao. */
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: var(--e9-mat, #fff) !important;
  box-shadow: var(--e9-bong2, 0 2px 10px rgba(60, 64, 67, .3)) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.e9m-on .ed9 .e9m-stage .preview-bar::-webkit-scrollbar { display: none; }

html.e9m-on .ed9 .e9m-stage .preview-bar .anim-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

html.e9m-on .ed9 .e9m-stage .preview-bar .pill,
html.e9m-on .ed9 .e9m-stage .preview-bar .chip-button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: auto !important;
  white-space: nowrap !important;
  padding: 7px 13px !important;
  font-size: 11.5px !important;
}

/* nut thu/phong 3D: vien thuoc noi goc duoi phai */
html.e9m-on .ed9 .e9m-stage .preview-zoom-group {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  left: auto !important;
  z-index: 6 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: var(--e9-mat, #fff) !important;
  box-shadow: var(--e9-bong1, 0 1px 3px rgba(60, 64, 67, .3)) !important;
}
html.e9m-on .ed9 .e9m-stage .preview-zoom-group .sq-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
}
html.e9m-on .ed9 .e9m-stage #previewZoomValue {
  min-width: 42px !important;
  font-size: 13px !important;
  text-align: center;
}

/* khong con hang "Background" trong san khau (da chuyen sang drawer phai) */
html.e9m-on .ed9 .e9m-stage .preview-background-row { display: none !important; }
html.e9m-on .ed9 .e9m-stage .status-bar { display: none !important; }

/* ── 2b. bang ve pixel ─────────────────────────────────────────────────── */
html.e9m-on .ed9 .e9m-stage .canvas-meta-bar {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 14px 4px !important;
}

/* ⛔ `background-image: none`: `widget-full.css` dat cho `.canvas-scroll` mot o vuong co vua
 *    bang bon `linear-gradient`, va `.canvas-panel` mot nen chuyen mau XANH NHAT
 *    (#f8fff8 -> #f0fff8). Trong mot cot hep tren desktop thi khong de y, nhung o day no
 *    trai ca man hinh nen toan bo khung ve ngam mau xanh — lech han voi phan con lai cua
 *    app, va o che do toi thi thanh mot vung sang chen giua. widget-core VAN tu ve o vuong
 *    co vua VAO TRONG canvas, nen bo lop o vuong cua CSS khong mat thong tin gi. */
html.e9m-on .ed9 .e9m-stage .canvas-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  background-image: none !important;
  background-color: var(--e9-mat2, #f8f9fa) !important;
  overscroll-behavior: contain;
}

html.e9m-on .ed9 .e9m-stage #partCanvas {
  margin: auto !important;
  border-radius: 4px !important;
  touch-action: none;          /* ve bang ngon tay, khong cuon trang */
}

html.e9m-on .ed9 .e9m-stage .canvas-zoom-row {
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: var(--e9-mat, #fff) !important;
  box-shadow: var(--e9-bong1, 0 1px 3px rgba(60, 64, 67, .3)) !important;
}
html.e9m-on .ed9 .e9m-stage .canvas-zoom-row .sq-btn-sm {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  font-size: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. THANH DUOI CUNG
 * ═══════════════════════════════════════════════════════════════════════════ */

html.e9m-on .ed9 .e9m-bar {
  position: relative;
  z-index: 46;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--e9-mat, #fff);
  box-shadow: 0 -1px 0 rgba(60, 64, 67, .14), 0 -8px 20px rgba(60, 64, 67, .06);
}

:root[data-theme=dark] html.e9m-on .ed9 .e9m-bar,
html.e9m-on:root[data-theme=dark] .ed9 .e9m-bar {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .09), 0 -8px 20px rgba(0, 0, 0, .35);
}

/* ⛔ `.ed9 .tool-tile` va `.ed9 .action-box` co san `width`/`min-height`/`display:grid`
 *    kem `!important`. Phai go tung cai, neu khong #undoButton van la o vuong 84px va
 *    thanh duoi bi day cao gap doi. */
html.e9m-on .ed9 .e9m-bar > button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--e9-chu2, #5f6368) !important;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}

/* ⛔ `.action-icon-img` cua ban goc co `filter: brightness(0) invert(1)` (icon TRANG,
 *    danh cho nut nen tim). Tren thanh duoi nen sang thi icon trang = vo hinh. */
html.e9m-on .ed9 .e9m-bar > button svg {
  width: 21px !important;
  height: 21px !important;
  flex: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html.e9m-on .ed9 .e9m-bar > button .action-label,
html.e9m-on .ed9 .e9m-bar > button .e9m-lb {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: inherit !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.e9m-on .ed9 .e9m-bar > button:active {
  background: var(--e9-nhan-nh, #e8f0fe) !important;
  transform: none !important;
}

html.e9m-on .ed9 .e9m-bar > button.is-disabled {
  opacity: .32 !important;
  pointer-events: none;
}

/* Tai PNG la hanh dong chinh => to mau nhan */
html.e9m-on .ed9 .e9m-bar > .e9m-cta {
  background: var(--e9-nhan-nh, #e8f0fe) !important;
  color: var(--e9-nhan, #1a73e8) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4. HAI DRAWER + TAB O MEP + MAN MO
 * ═══════════════════════════════════════════════════════════════════════════ */

html.e9m-on .ed9 .e9m {
  --e9m-dw: min(86vw, 318px);
}

html.e9m-on .ed9 .e9m-scrim {
  position: absolute;
  inset: 0;
  z-index: 38;
  background: rgba(32, 33, 36, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
html.e9m-on .ed9 .e9m.is-l .e9m-scrim,
html.e9m-on .ed9 .e9m.is-r .e9m-scrim {
  opacity: 1;
  pointer-events: auto;
}

html.e9m-on .ed9 .e9m-dw {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 40;
  width: var(--e9m-dw);
  display: flex;
  flex-direction: column;
  background: var(--e9-mat, #fff);
  box-shadow: 0 10px 44px rgba(60, 64, 67, .34);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
html.e9m-on .ed9 .e9m-dw--l {
  left: 0;
  border-radius: 0 20px 20px 0;
  transform: translateX(-102%);
}
html.e9m-on .ed9 .e9m-dw--r {
  right: 0;
  border-radius: 20px 0 0 20px;
  transform: translateX(102%);
}
html.e9m-on .ed9 .e9m.is-l .e9m-dw--l,
html.e9m-on .ed9 .e9m.is-r .e9m-dw--r { transform: translateX(0); }

html.e9m-on .ed9 .e9m-dw__hd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 8px 9px 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--e9-chu2, #5f6368);
}
html.e9m-on .ed9 .e9m-dw__x {
  margin-left: auto;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--e9-chu2, #5f6368);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.e9m-on .ed9 .e9m-dw__x svg { width: 18px; height: 18px; }
html.e9m-on .ed9 .e9m-dw__x:active { background: var(--e9-nhan-nh, #e8f0fe); }

html.e9m-on .ed9 .e9m-dw__bd {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── tab nho dinh o mep, truot ra theo drawer ───────────────────────────── */
html.e9m-on .ed9 .e9m-tab {
  position: absolute;
  top: 50%;
  z-index: 44;
  width: 30px;
  height: 98px;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--e9-mat, #fff);
  color: var(--e9-chu2, #5f6368);
  box-shadow: 0 2px 12px rgba(60, 64, 67, .28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
html.e9m-on .ed9 .e9m-tab svg { width: 17px; height: 17px; flex: none; }
html.e9m-on .ed9 .e9m-tab__t {
  writing-mode: vertical-rl;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
html.e9m-on .ed9 .e9m-tab--l {
  left: 0;
  border-radius: 0 16px 16px 0;
  transform: translateY(-50%);
}
html.e9m-on .ed9 .e9m-tab--r {
  right: 0;
  border-radius: 16px 0 0 16px;
  transform: translateY(-50%);
}
html.e9m-on .ed9 .e9m.is-l .e9m-tab--l {
  transform: translate(var(--e9m-dw), -50%);
  color: var(--e9-nhan, #1a73e8);
}
html.e9m-on .ed9 .e9m.is-r .e9m-tab--r {
  transform: translate(calc(-1 * var(--e9m-dw)), -50%);
  color: var(--e9-nhan, #1a73e8);
}
/* tab dang mo thi mui chi quay nguoc lai = "dong" */
html.e9m-on .ed9 .e9m.is-l .e9m-tab--l .e9m-tab__m,
html.e9m-on .ed9 .e9m.is-r .e9m-tab--r .e9m-tab__m { transform: rotate(180deg); }
html.e9m-on .ed9 .e9m-tab__m { transition: transform .26s ease; }

@media (prefers-reduced-motion: reduce) {
  html.e9m-on .ed9 .e9m-dw,
  html.e9m-on .ed9 .e9m-tab,
  html.e9m-on .ed9 .e9m-scrim,
  html.e9m-on .ed9 .e9m-stage > .center-stage,
  html.e9m-on .ed9 .e9m-stage > .canvas-panel { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5. NOI DUNG TRONG DRAWER
 * ═══════════════════════════════════════════════════════════════════════════ */

html.e9m-on .ed9 .e9m-dw .tool-rail,
html.e9m-on .ed9 .e9m-dw .control-rail {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  overflow: visible !important;
  grid-auto-flow: row !important;
}

/* khoi con: the bo tron, nen xam rat nhat */
html.e9m-on .ed9 .e9m-dw .color-card,
html.e9m-on .ed9 .e9m-dw .part-picker-card,
html.e9m-on .ed9 .e9m-dw .toggle-group,
html.e9m-on .ed9 .e9m-dw .preview-background-row,
html.e9m-on .ed9 .e9m-dw .e9m-hop {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: var(--e9-mat2, #f8f9fa) !important;
  box-shadow: none !important;
  order: 0 !important;
}

html.e9m-on .ed9 .e9m-dw .e9m-nhan {
  width: 100%;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .9px;
  text-transform: uppercase;
  text-align: center;
  color: var(--e9-chu2, #5f6368);
}

/* ⛔ `editor.css` dat `display: contents` cho CA HAI lop duoi day tren mobile, lam bon nut
 *    co but tro thanh bon o luoi nam chen vao giua cac cong cu ve. `editor-mobile.js` da
 *    keo khoi nay ra mot the rieng; o day tra lai cho no mot hop that de xep thanh hang. */
html.e9m-on .ed9 .e9m-dw .tool-cell-size {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
html.e9m-on .ed9 .e9m-dw .brush-size-tile {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
html.e9m-on .ed9 .e9m-dw .e9m-hop .brush-option { height: 46px !important; }

/* ── 5a. hang cong cu ve: luoi 4 cot, o vuong co nhan chu ───────────────── */
html.e9m-on .ed9 .e9m-dw .tool-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  flex-wrap: nowrap !important;
}
html.e9m-on .ed9 .e9m-dw .tool-cell {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}
html.e9m-on .ed9 .e9m-dw .tool-tile.mini,
html.e9m-on .ed9 .e9m-dw .brush-size-tile .brush-option {
  width: 100% !important;
  height: 58px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  text-align: center !important;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
html.e9m-on .ed9 .e9m-dw .tool-icon {
  width: 21px !important;
  height: 21px !important;
  filter: none !important;
}
html.e9m-on .ed9 .e9m-dw .e9m-tl {
  max-width: 100%;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .3px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.e9m-on .ed9 .e9m-dw .reset-tile {
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 16px 0 46px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  text-align: left !important;
  order: 0 !important;
  background-position: 16px center !important;
}

/* ── 5b. bang mau ───────────────────────────────────────────────────────── */
/* ⛔ KHONG doi kich thuoc `#colorWheelCanvas` / `#colorSquareCanvas`: widget-core doi
 *    chieu toa do con tro theo `getBoundingClientRect()` NHUNG ve banh mau theo thuoc
 *    tinh `width`/`height` cua canvas. Phong bang CSS thi hinh ve bi keo nhoe. Giu
 *    nguyen 160/96 — vua du trong drawer 318px. */
html.e9m-on .ed9 .e9m-dw .wheel-shell {
  margin: 0 auto !important;
  place-items: center !important;
}
html.e9m-on .ed9 .e9m-dw .color-badge {
  width: 100% !important;
  height: 42px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

/* ── 5c. cac hang chip (lop · mo hinh · ban) ────────────────────────────── */
/* ⛔ KHONG dua `.back-equipment-row` / `.cape-preset-select` vao day. `editor.css` co
 *    chu dich `display:none !important` cho hai cai do tren mobile, va `editor-keo.js`
 *    DUA VAO dieu do: moi lan nap trang no xoa `cape-equipment-v3`/`cape-visible-v3` khoi
 *    localStorage voi ly do "the cape UI is hidden on this page". Cho chung hien lai o day
 *    thi nguoi dung chon duoc cape, trang tai lai la cape bien mat — khong co loi nao bao. */
html.e9m-on .ed9 .e9m-dw .layer-row,
html.e9m-on .ed9 .e9m-dw .model-row,
html.e9m-on .ed9 .e9m-dw .edition-row,
html.e9m-on .ed9 .e9m-dw .face-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
html.e9m-on .ed9 .e9m-dw .chip-button,
html.e9m-on .ed9 .e9m-dw .pill,
html.e9m-on .ed9 .e9m-dw #editionToggle {
  min-height: 36px !important;
  padding: 8px 15px !important;
  font-size: 12.5px !important;
}

/* ⛔ Trong mot THE (`--e9-mat2`), nut khong duoc chon cung mang nen `--e9-mat2` => no bien
 *    thanh CHU TRON, khong ai biet do la nut bam duoc. (Da thay: "ALEX" va "JAVA" nhin y
 *    nhu nhan chu, chi "STEVE" dang chon moi ra hinh nut.) Nang nut len mat `--e9-mat` va
 *    them mot vong vien mong.
 * ⛔ Vong vien dung mau xam trung tinh de dung duoc CA hai che do sang/toi — `--e9-*`
 *    khong co bien nao cho duong ke. */
html.e9m-on .ed9 .e9m-dw .toggle-group .chip-button,
html.e9m-on .ed9 .e9m-dw .toggle-group #editionToggle,
html.e9m-on .ed9 .e9m-dw .preview-background-row .preview-background-select,
html.e9m-on .ed9 .e9m-dw .e9m-hop .brush-option {
  background: var(--e9-mat, #fff) !important;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .26) !important;
}
html.e9m-on .ed9 .e9m-dw .toggle-group .chip-button.is-active,
html.e9m-on .ed9 .e9m-dw .e9m-hop .brush-option.is-active {
  background: var(--e9-nhan-nh, #e8f0fe) !important;
  color: var(--e9-nhan, #1a73e8) !important;
  box-shadow: 0 0 0 1.5px var(--e9-nhan, #1a73e8) !important;
}
html.e9m-on .ed9 .e9m-dw .canvas-title { text-align: center; }

/* ── 5d. hinh nguoi chon bo phan ────────────────────────────────────────── */
/* ⛔ O day KHONG duoc de `--part-cell` be nhu ban goc (20px). `editor-9mc.css` dat
 *    `.ed9 .chip-button{font-size:12.5px}`, de len `font-size:0` cua ban goc, nen cac nut
 *    bo phan CO CHU ("Left Arm", "Right Leg"...). Trong o 27px thi chu tran ra ngoai khung
 *    va de len nut ben canh. Nen phong o len va ha co chu cho vua.
 * ⛔ `overflow-x: auto`: khi mo hinh dang mang cape thi `.part-figure-side` hien them mot
 *    cot nua, tong be ngang vuot qua 270px cua drawer. Cho cuon de khong tran ra ngoai. */
html.e9m-on .ed9 .e9m-dw .part-figure {
  --part-cell: 42px !important;
  --part-gap: 8px !important;
  --part-side-gap: 12px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: var(--part-side-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  background: transparent !important;
  scrollbar-width: none;
}
html.e9m-on .ed9 .e9m-dw .part-figure::-webkit-scrollbar { display: none; }
html.e9m-on .ed9 .e9m-dw .part-figure .chip-button {
  min-height: 0 !important;
  padding: 1px !important;
  border-radius: 8px !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  background: var(--e9-mat, #fff) !important;
  box-shadow: inset 0 0 0 2px var(--e9-nhan, #1a73e8) !important;
}
html.e9m-on .ed9 .e9m-dw .part-figure .chip-button.is-active {
  background: var(--e9-nhan-nh, #e8f0fe) !important;
  color: var(--e9-nhan, #1a73e8) !important;
}

/* ── 5e. nut Download/Upload cape (chi hien khi mo hinh dang mang cape) ─── */
html.e9m-on .ed9 .e9m-dw .action-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  order: 0 !important;
}
html.e9m-on .ed9 .e9m-dw .action-box {
  flex: 1 1 0 !important;
  min-height: 62px !important;
  border-radius: 16px !important;
}
html.e9m-on .ed9 .e9m-dw .action-box svg {
  width: 23px !important;
  height: 23px !important;
  filter: none !important;
}
html.e9m-on .ed9 .e9m-dw .action-label { font-size: 10.5px !important; }

/* ── 5f. chon phong canh (Background) ───────────────────────────────────── */
html.e9m-on .ed9 .e9m-dw .preview-bg-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}
html.e9m-on .ed9 .e9m-dw .preview-background-select,
html.e9m-on .ed9 .e9m-dw .cape-preset-select {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
}
html.e9m-on .ed9 .e9m-dw .preview-background-label { text-align: center; }

/* ⛔ Cac khoi nay chi la hop chua, khong co dien mao rieng. `.cape-preset-group` tren
 *    mobile RONG HOAN TOAN (ca hai con cua no deu bi `editor.css` an), nen de no co nen
 *    xam thi drawer nhin nhu bi mot the trong vo nghia. */
html.e9m-on .ed9 .e9m-dw .picker-layout,
html.e9m-on .ed9 .e9m-dw .brush-row,
html.e9m-on .ed9 .e9m-dw .cape-preset-group {
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

} /* === het @media (max-width: 640px) === */