/* 🔴 VỎ DÙNG CHUNG KHÔNG ĐƯỢC ĐỌC TOKEN MÀ TRANG CÓ THỂ ĐÈ — 06/09/2026.
   Thanh bên và chân trang ở đây luôn TỐI, trên mọi trang. Nhưng tám trang tự khai đè
   `--mut` ở `:root` cho vùng nội dung SÁNG của riêng chúng (`dang-bai-tu-dong.html` đặt
   `--mut:#69717f`) — và vỏ tối liền đọc phải con số ấy, rớt xuống 3,57 trên nền tối.
   `--genup-mut` là token chuẩn ở `genup-mau.css`, không trang nào đè — nên vỏ đọc nó. */
/* ══════════ VỎ CHUNG CHO CÁC TRANG PHỤ ══════════
   Cạnh trái + thanh trên giống hệt hai trang chính. Trước đây mỗi trang phụ tự dựng một
   đầu trang riêng: trang thì logo 26px với một dòng chữ, trang thì logo 52px với đủ nút —
   bấm qua lại giữa chúng cứ như đi giữa hai phần mềm khác nhau.

   Chỉ chép phần VỎ. Ruột của từng trang vẫn là CSS của trang đó. */

.app{display:grid;grid-template-columns:298px 1fr;min-height:100vh}
@media(max-width:1080px){ .app{grid-template-columns:1fr} }

/* Phân khu bằng MẢNG MÀU, không bằng nét kẻ. Cạnh trái sáng hơn nền trang một bậc là
   đủ tách; thêm một đường kẻ nữa chỉ làm trang thành lưới ô vuông. */
.app>aside{background:var(--side,#0B0D11);border-right:0;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}

/* ẨN CẠNH TRÁI TRÊN MÀN HẸP — LUẬT NÀY PHẢI ĐỨNG SAU LUẬT `display:flex` Ở NGAY TRÊN.
   Trước đây nó nằm ở dòng 9, TRƯỚC luật kia. Hai luật cùng độ mạnh (`.app>aside`) nên
   cái đứng sau thắng: `display:flex` luôn thắng, cạnh trái KHÔNG BAO GIỜ ẩn.
   Hậu quả đo thật trên màn 375px ngày 07/08: cạnh trái vẫn chiếm một ô lưới cao trọn
   812px, đẩy nội dung xuống dưới. Khách mở trang trên điện thoại thấy một màn hình
   TRẮNG TRƠN, phải cuộn qua hết mới tới ô nhập đầu tiên — ở tận 1123px.
   Không có dòng lỗi nào báo. Đúng cùng một loại bẫy với "CSS của trang nạp sau tệp
   chung": không phải luật viết sai, mà là viết đúng chỗ sai. */
@media(max-width:1080px){ .app>aside{display:none} }
.vo-cuon{flex:1;overflow-y:auto;padding:4px 8px 8px;min-height:0}

.brand{padding:22px 20px 18px;display:flex;flex-direction:column;align-items:center;gap:12px}
/* Cỡ logo khai DUY NHẤT ở genup-ui.css — khai thêm ở đây là hai nơi, và mỗi lần
   chỉnh lại lệch một trang. */
.brand img{width:auto;display:block}
.brand .os{font-family:var(--hoa);font-size:13px;letter-spacing:.22em;
  color:var(--genup-mut,#93A0AC);text-align:center}

.nav-group{color:var(--genup-mut,#93A0AC);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:16px 15px 7px;margin-top:8px}
.mi{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:11px;
  color:var(--tx-2,#CFD8E1);text-decoration:none;font-size:14px;font-weight:600;
  transition:background .15s,color .15s}
.mi svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;color:var(--genup-mut,#93A0AC)}
.mi>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mi:hover{background:#1A1A1A;color:#fff}
.mi:hover svg{color:var(--tx-2,#CFD8E1)}
/* Mục đang mở: nền sáng nhẹ, KHÔNG tô đỏ. Đỏ để dành cho đúng một nút hành động chính
   trên mỗi màn — tô đỏ cả mục menu thì mắt không biết đâu là chỗ cần bấm. */
.mi.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px transparent}
.mi.on svg{color:var(--lam,#4DA6FF)}

.nh-dau{display:flex;align-items:center;gap:11px;width:calc(100% - 16px);margin:2px 8px;
  padding:10px 13px;background:none;border:0;border-radius:11px;cursor:pointer;
  color:var(--tx-2,#CFD8E1);font:700 14px/1.25 inherit;text-align:left;transition:background .15s,color .15s}
.nh-dau:hover{background:#1A1A1A;color:#fff}
.nh-dau>svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.nh-dau b{flex:1;font-weight:700}
.nh-mt{width:15px;height:15px;flex:none;stroke:var(--genup-mut,#93A0AC);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nh.mo .nh-mt{transform:rotate(90deg)}
.nh-than{display:none;padding:2px 0 6px}
.nh.mo .nh-than{display:block}
.nh-than .mi{padding-left:42px;font-size:13.5px}
/* OWNER 30/09 (tên 10 hệ theo thẻ trang chủ): tên dài như "Long Term Strategy & Planning", "GENUP Partner & Revenue Share"
   XUỐNG DÒNG gọn thay vì cắt "…" — luật chung: không nhãn nào bị cắt. */
.nh-than .mi>span, .vo-menu-con .mi>span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.nh-than .mi svg{width:17px;height:17px}

/* 🔴 29/09/2026 — MAU CHU CHO CHINH THE <a>, KHONG CHI CHO <em> BEN TRONG.
   Luat OWNER `html body em:not([class]){color:inherit!important}` (genup-ui.css) thang moi luat
   mau dat trong `.nang-cap em`, nen <em> lay mau CUA THE CHA. The cha la mot <a> chua he duoc
   dat mau ⇒ no roi ve mau lien ket mac dinh cua trinh duyet (#0000EE): 1,97 tren nen do mo,
   do o 7 trang (CI #1745). Dat mau o day thi `inherit` tra ve dung mau xam muon, va cau chu
   van dung ngay ca khi luat OWNER kia doi hoac bien mat. */
.nang-cap{display:block;position:relative;margin:14px 14px 0;padding:13px 58px 13px 15px;border-radius:15px;text-decoration:none;
  color:var(--genup-mut,#93A0AC);
  background:rgba(219,25,32,.10);border:0;   /* luật không viền OWNER 29/09 — khối nhận ra bằng nền đỏ mờ */
  transition:background .18s,transform .18s}
.nc-vong{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;
  width:34px;height:34px;align-items:center;justify-content:center}
.nc-vong[hidden]{display:none}
.nang-cap:hover{background:rgba(219,25,32,.18);transform:translateY(-1px)}
.nc-dau{display:flex;align-items:center;gap:9px;color:#fff;font-size:14.5px;font-weight:700}
.nc-dau svg{width:18px;height:18px;flex:none;stroke:var(--do-2,#F0333A);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.nang-cap em{display:block;margin-top:3px;padding-left:27px;font-style:normal;
  font-size:12.5px;line-height:1.35}

.side-foot{margin:14px;padding:15px;border-radius:15px;background:rgba(255,255,255,.04);
  border:0;display:flex;align-items:center;gap:13px}
/* Ảnh đại diện: xám trung tính. Ô đỏ ở góc dưới cùng kéo mắt xuống một chỗ chẳng có việc gì. */
.side-foot .av{width:42px;height:42px;border-radius:13px;flex:none;background:rgba(255,255,255,.09);
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:17px}
.side-foot>div{min-width:0;flex:1}
.side-foot b,.side-foot>div>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot b{color:#fff;font-size:14.5px;font-weight:700}
.side-foot span{color:var(--genup-mut,#93A0AC);font-size:12.5px}

.app>main{min-width:0;display:flex;flex-direction:column}
/* 🔴 `min-height` CHỨ KHÔNG `height` — vá 01/09/2026, đo trên trình duyệt thật ở 375px.

   Bản cũ ghim cứng `height:76px`. Ở màn hẹp, các trang thêm `flex-wrap:wrap` cho thanh này
   (đúng — nếu không thì nút tài khoản nằm ngoài màn). Nhưng gói nội dung thành hai dòng mà
   cái hộp vẫn đúng 76px thì dòng thứ hai TRÀN RA NGOÀI và đè lên nội dung bên dưới.

   Đo được ở 375px: `growth` tràn 24px, `dang-bai-tu-dong` tràn 7px — nút tài khoản và nút
   đổi nền đè lên thẻ đầu tiên của trang. Không có dòng lỗi nào; chỉ là hai nút nằm sai chỗ,
   và người dùng điện thoại bấm vào thì trúng thứ khác.

   `min-height` giữ nguyên chiều cao cũ ở màn rộng (nội dung một dòng thì vẫn đúng 76px), và
   cho hộp cao lên đúng bằng nội dung khi nó xuống dòng. Sửa MỘT chỗ ở tệp vỏ dùng chung, cả
   13 trang dùng `#voThanhTren` được vá theo — vá từng trang là 13 cơ hội để quên một trang. */
/* 🔴 HAI HÌNH DẠNG VỎ, VÀ LUẬT NÀY TRƯỚC ĐÂY CHỈ VỚI TỚI MỘT.

   13 trang lồng thanh trên VÀO TRONG `<main>`:      .app > main > header
   Riêng `growth.html` để nó NGANG HÀNG với main:     .app > header

   Nên bộ chọn cũ không khớp `growth`, và trang đó rơi về một chiều cao khác (đo được 60px)
   trong khi nội dung cần 84px — tràn 24px, nút đổi nền đè lên nội dung ở màn 375px. Nó là
   trang DUY NHẤT lệch, nên không có gì để đối chiếu và lỗi nằm đó rất lâu.

   Thêm bộ chọn thứ hai CÙNG ĐỘ MẠNH (0,0,3) chứ không viết `.app header#voThanhTren` —
   bộ chọn ấy mạnh hơn (1,0,2) và sẽ đè lên các bản vá riêng của từng trang, tức là chữa
   một chỗ rồi làm hỏng mười ba chỗ khác.

   ⚠️ ĐÃ THỬ thêm `height:auto` để chữa nốt 8px còn lại của `growth` — và nó PHÁ bố cục màn
   rộng của chính trang đó: thanh trên cao 812px, chiếm trọn màn hình. Vì header của `growth`
   là con TRỰC TIẾP của lưới `.app`, bỏ ghim chiều cao là nó giãn hết ô lưới.
   Gốc của vấn đề nằm ở MARKUP lệch, nên đã sửa markup của `growth` cho khớp 13 trang kia.

   ══ ĐO ĐƯỢC SAU KHI VÁ (01/09/2026, trình duyệt thật, 375px và 1280px) ══
     · 11 trang: tràn 24px hoặc 7px  →  **0**
     · màn rộng: cả 12 trang vẫn đúng 76px, không trang nào đổi
     · `growth` ở 375px: 24px → **còn 8px**

   🔴 KHÔNG tuyên bố là đã xong hẳn. 8px còn lại của `growth` chưa tìm ra nguyên nhân: thanh
   ở trang đó gói thành BA dòng (84px) mà hộp vẫn đứng ở 76px, và cả `flex-shrink:0` lẫn
   `min-height` đều không kéo nó lên — đã thử, đo, và không ăn.
   Ai đọc tới đây và định thử `height:auto`: ĐÃ THỬ RỒI, nó chữa 8px kia nhưng làm thanh trên
   của `growth` cao **812px** ở màn rộng (chiếm trọn màn hình). Đừng đi lại đường đó. */
.app>main>header, .app>header{min-height:76px;display:flex;align-items:center;gap:12px;padding:0 34px;
  border-bottom:0;position:sticky;top:0;z-index:30;
  background:rgba(8,9,12,.86);backdrop-filter:blur(14px)}
.vo-spacer{flex:1}
.hmuc{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;
  border:0;background:rgba(255,255,255,.06);
  color:var(--tx-2,#CFD8E1);font:600 13px/1 inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
.hmuc svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hmuc:hover{background:rgba(255,255,255,.11);color:#fff}
.ibtn{width:42px;height:42px;border-radius:12px;border:0;
  background:rgba(255,255,255,.06);color:var(--tx-2,#CFD8E1);cursor:pointer;display:grid;place-items:center}
.ibtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ibtn:hover{background:rgba(255,255,255,.11);color:#fff}
@media(max-width:900px){ .app>main>header, .app>header{padding:0 18px} }
/* 21/09/2026: chuông thông báo (.vo-tb, lô 21/09) làm thanh đầu dài thêm ~54px ⇒ ở 375/390px tràn ngang 24px trên
   10 trang khi ĐÃ ĐĂNG NHẬP (cổng bố cục phiên thử của trien-khai.ps1 bắt). Màn rất hẹp: thu khoảng cách + nút. */
@media(max-width:480px){ .app>main>header, .app>header{gap:6px;padding:0 12px} .ibtn{width:38px;height:38px} .vo-tb{margin-left:0} }
/* 28/09 (Luồng B, đo khi ĐÃ đăng nhập): chuông thông báo (chỉ hiện khi có phiên) + nút ☰ làm thanh trên rộng 393px ở 375px
   ⇒ trang tràn ngang 24px. Ở ≤480px ẩn hai lối tắt PHỤ "Video hướng dẫn" + "Tin tức" (cùng trỏ thư viện) — vẫn vào được
   qua ngăn kéo ☰ (Hỗ trợ & hướng dẫn). Không bỏ nút nào khác. */
@media(max-width:480px){ .app>main>header .hmuc[href$="#khu=thu-vien"], .app>header .hmuc[href$="#khu=thu-vien"]{display:none} }

/* CO ĐƯỢC THÌ CO, ĐỪNG ĐẨY CẢ TRANG TRƯỢT NGANG.
   `white-space:nowrap` cộng `min-width:auto` mặc định của flex khiến mỗi mục từ chối hẹp
   lại dù chỉ một pixel. Đủ mười một mục là chúng tràn khỏi thanh, và vì thanh để
   `overflow:visible` nên cả TRANG trượt ngang — cột trái bị đẩy khuất khỏi màn hình.
   Đo thật 07/08 ở màn 1270px: thanh trên cần 1049px mà chỗ có chỉ 972px.
   Cho nhãn chữ co và cắt bằng dấu ba chấm: thêm mục mới thì chữ ngắn lại, chứ trang
   không bao giờ trượt. Đây là lưới an toàn — điểm ngắt bên dưới mới là cách chính. */
.hmuc{min-width:0}
.hmuc .chu-nho{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* KHÔNG khai gì cho nền sáng ở đây.
   Cạnh trái và thanh trên GIỮ ĐEN cả ở nền sáng — luật đó đã nằm trong genup-ui.css. Khai
   lại ở tệp này (nạp sau) là ghi đè lên nó: nền cột trái vẫn đen mà chữ tên khách bị đổi
   thành đen, thành ra tên chìm hẳn vào nền. Đúng lỗi nhìn thấy ngày 04/08. */

/* Ô nhập mã KEY và hai thẻ gói — cùng hình hài với thanh trên hai trang chính. */
.hkey{display:flex;align-items:center;background:rgba(255,255,255,.06);
  border:0;border-radius:11px;overflow:hidden;min-width:0;flex:0 1 340px}
.hkey .cham{width:9px;height:9px;border-radius:50%;background:#6b7280;margin:0 9px 0 12px;flex:none}
.hkey input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:inherit;font-size:12.5px;padding:9px 6px}
.hkey input::placeholder{color:var(--mut,#93A0AC)}
.hkey input:focus{outline:none}
.hkey:focus-within{background:rgba(77,166,255,.10);box-shadow:var(--gu-input-glow)} /* 29/09: bỏ outline mà không thay ⇒ người dùng bàn phím mất dấu ô KEY */
.hkey button{background:var(--do,#DB1920);color:#fff;border:0;padding:9px 15px;font:inherit;
  font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:9px 15px;
  border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.085));
  background:rgba(255,255,255,.05);color:var(--tx-2,#CFD8E1);text-decoration:none;white-space:nowrap}
/* Nhãn MỨC dùng AI cho khách (DEC-20260922-009): xanh dương = còn dùng được · đỏ nhạt + "!" = sắp hết ·
   đỏ đậm (nút, dẫn tới bảng giá) = cần nạp thêm. Không bao giờ là số. */
.pill--muc{font-size:var(--gu-fs-nhan)}
.pill--co_the_tiep_tuc{background:var(--status-info-nen);border-color:var(--status-info-vien);color:var(--status-info-chu)}
.pill--sap_het{background:var(--status-error-nen);border-color:var(--status-error-vien);color:var(--status-error-chu)}
.pill--sap_het::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:var(--gu-radius-pill);
  background:var(--status-error-chu);color:var(--gu-surface-0);font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-strong)}
.pill--can_nap_them{background:var(--gu-btn-primary-bg);border-color:transparent;color:var(--gu-btn-primary-text)}
.pill--can_nap_them:hover{background:var(--gu-btn-primary-bg-hover)}
/* NOI DUNG trang, khong phai vo toi — nen doc `--mut` cua trang. Tren trang SANG,
   #93A0AC chi dat 2,67 tren nen trang; `--mut` cua trang la #69717f, dat 4,92. */
.nt-phu{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--mut,#93A0AC);white-space:nowrap}
/* ── ĐIỂM NGẮT ĐO BẰNG SỐ THẬT, KHÔNG ĐOÁN ────────────────────────────────────
   Đo trên máy chủ ngày 07/08, cộng cả khoảng cách và lề:
     · đủ mọi mục            → thanh cần 1049px
     · bỏ hai viên thông tin → 863px
     · bỏ thêm nhãn chữ      → 491px
   Chỗ thanh trên có = bề ngang cửa sổ − 298px cạnh trái (dưới 1080px thì cạnh trái tự ẩn,
   trả lại 298px ấy). Từ đó ra hai mốc dưới đây; cộng thêm một khoảng dư nhỏ cho thanh cuộn
   và cho phông chữ rộng hơn trên máy khác.
   Bỏ theo THỨ TỰ ÍT QUAN TRỌNG TRƯỚC: tên gói và trạng thái AI chỉ để xem, còn nút đổi
   nền sáng/tối và ô tài khoản thì mất là khách hết đường bấm. */
/* 🔴 VÒNG 81 — KHÔNG GIẤU Ô KÍCH HOẠT. Bản cũ `.hkey{display:none}` ở ≤1280px để thanh trên khỏi
   tràn. Nhưng cổng khoá (`chanTheoKhoa`) bảo khách chưa mở hệ *"dán vào ô Kích hoạt ở trang này"* —
   ở màn 1280px, máy tính bảng và điện thoại ô ấy KHÔNG hiện: khách vừa mua key được chỉ tới một ô
   vô hình. Bắt bằng Chrome thật (bước C5 của `doHanhTrinhTrinhDuyetE2E.js`).

   Nay ô TREO thành một dải ngay dưới thanh trên, thay vì biến mất. KHÔNG dùng `flex-wrap` cho
   thanh: bản thử đầu làm vậy và các mục bên phải rớt xuống dòng hai, menu tài khoản mở ra ở
   x = -90 và nút Đăng xuất không bấm được ở 375px (bước C4 đỏ). Dải treo tuyệt đối không đẩy mục
   nào; `margin-bottom` của thanh chừa đúng chỗ cho nó để không che nội dung. */
@media(max-width:1280px){
  .app>main>header, .app>header{margin-bottom:54px}
  .hkey{position:absolute;left:34px;right:34px;top:calc(100% + 8px);
    background:rgba(8,9,12,.96);z-index:1}
}
@media(max-width:900px){ .hkey{left:18px;right:18px} }
@media(max-width:1360px){ .pill.an-nho{display:none} }
@media(max-width:1180px){ .hmuc .chu-nho{display:none} }
/* Vòng 35: genup-vo.js ĐO nhãn bị cắt ⇒ bậc 1 giấu nhãn ba lối tắt phụ, bậc 2 giấu mọi nhãn (tên còn ở aria-label/title). */
#voThanhTren.vo-gon-1 .hmuc[href*="#khu="] .chu-nho, #voThanhTren.vo-gon-2 .hmuc .chu-nho{display:none}
#voThanhTren.vo-gon-1 .hmuc[href*="#khu="], #voThanhTren.vo-gon-2 .hmuc{padding:9px 11px}

/* Thanh công cụ RIÊNG của từng trang — nằm DƯỚI thanh trên dùng chung.
   Thanh trên là khung xe, giống nhau ở mọi trang. Điều khiển riêng của một trang (chọn kỳ,
   chọn mẫu, nút quay lại…) không được nhét lên đó, không thì mỗi trang một thanh trên khác
   nhau và cái "cố định" hết còn cố định. */
.trang-cong-cu{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 34px;border-bottom:1px solid var(--gu-ke,rgba(255,255,255,.07))}
.trang-cong-cu .spacer{flex:1}
@media(max-width:900px){ .trang-cong-cu{padding:14px 18px} }


/* ═══════════════════════════════════════════════════════════════════════════════════════
   TÔN TRỌNG "GIẢM CHUYỂN ĐỘNG" CỦA HỆ ĐIỀU HÀNH
   ═══════════════════════════════════════════════════════════════════════════════════════
   Người bị say chuyển động (vestibular) bật cờ này trong cài đặt máy. Một giao diện phớt lờ
   nó không chỉ "hơi khó chịu" — nó gây chóng mặt và buồn nôn thật.

   `genup-ui.css` đã tôn trọng cờ này từ trước; tệp vỏ thì chưa, nên cạnh trái và thanh trên
   vẫn trượt/mờ dần trong khi phần thân đã đứng yên. Nửa vời còn khó chịu hơn không có.

   Giữ `transition` ở mức 0.01ms chứ không bỏ hẳn: bỏ hẳn thì các đoạn mã chờ `transitionend`
   sẽ treo mãi. Một phần nghìn giây là mắt không thấy mà sự kiện vẫn bắn. */
@media (prefers-reduced-motion: reduce){
  aside, aside *, header, header *,
  .mi, .nh-dau, .nh-than, .nang-cap, .side-foot, .hmuc, .tk-hop{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .mi:hover, .nh-dau:hover, .nang-cap:hover{ transform: none !important; }
}

/* ══ CHUÔNG THÔNG BÁO (18/09/2026) — màu mượn biến sẵn có, không tự chế ══ */
.vo-tb { position: relative; margin-left: 4px; }
.vo-tb-nut { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.vo-tb-nut svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vo-tb-nut:focus-visible { outline: 2px solid var(--lam); outline-offset: 2px; }
.vo-tb-dem { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--do); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.vo-tb-hop { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 32px)); max-height: 70vh;
  overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); z-index: 60; }
.vo-tb-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--gu-ke, rgba(255,255,255,.07)); }
.vo-tb-dau b { color: var(--ink); font-size: 14px; }
.vo-tb-tac { display: flex; align-items: center; gap: 8px; }
.vo-tb-dong { background: none; border: 0; color: var(--ink); font-size: 20px; line-height: 1; min-width: 32px; min-height: 32px; cursor: pointer; border-radius: 6px; }
.vo-tb-dong:hover, .vo-tb-dong:focus-visible { background: var(--line); }
.vo-tb-lk { background: none; border: 0; color: var(--ink); text-decoration: underline; font-size: 12.5px; cursor: pointer; }
.vo-tb-muc { display: block; padding: 11px 14px; border-bottom: 1px solid var(--gu-ke, rgba(255,255,255,.07)); color: var(--text); text-decoration: none; font-size: 13.5px; }
.vo-tb-muc:hover { background: var(--panel2); }
.vo-tb-muc.moi { color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--do); }
.vo-tb-muc time { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--mut, var(--text)); }
.vo-tb-trong { padding: 16px 14px; margin: 0; font-size: 13px; color: var(--text); }

/* ══ DẢI DỰ ÁN + 10 HỆ CỐ ĐỊNH — OWNER 30/09/2026 (genup-vo.js #voThanhHe) ══
   [CREATE PROJECT] [DỰ ÁN ĐANG MỞ ▾]  AI Brand · AI Planning · … · GENUP Partner — dính ngay dưới thanh trên (76px).
   Tab là CHỮ như hàng tab trang chủ; rê/đang mở ⇒ xanh tông nút Đăng ký (chữ pha 30% trắng — đủ 4,5:1 cả trên nền sáng hơn của google-sheet (#1c1d1f: 4,8:1; 80% chỉ 3,92), gạch chân đúng màu). */
.vo-thanh-he{position:sticky;top:76px;z-index:29;display:flex;align-items:center;flex-wrap:wrap;gap:var(--gu-sp-3) var(--gu-sp-6);
  padding:var(--gu-sp-3) 18px;background:rgba(8,9,12,.92);backdrop-filter:blur(14px)}
/* ≤1280px ô Kích hoạt treo 54px dưới thanh trên (margin-bottom của header) ⇒ dải dính ngay DƯỚI ô ấy, không chui vào dưới nó. */
@media (max-width:1280px){ .vo-thanh-he{top:130px} }
/* OWNER 30/09/2026: "luôn có khoảng cách thông thoáng giữa các tiêu đề, đề mục và các hộp thoại" — dải cách nội dung đầu trang
   tối thiểu ~40px ở mọi trang hệ (đo 30/09 trước khi thêm: 24–79px tuỳ trang, trang 24px nhìn dính sát). */
.vo-thanh-he{margin-bottom:16px}
.vth-duan{position:relative;display:flex;align-items:center;gap:var(--gu-sp-2);flex:0 0 auto}
/* Cụm ☐ ‹ › ⛶ — cùng thứ tự, cùng icon với trang AI Brand (.tt-khung > .cong-cu-trai). */
.vth-cc{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.vth-cc button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:var(--gu-radius-sm);cursor:pointer;
  background:var(--gu-surface-2);color:var(--gu-text-2);transition:background var(--gu-dur-1) var(--gu-ease),color var(--gu-dur-1) var(--gu-ease)}
.vth-cc button:hover{background:var(--gu-surface-1);color:var(--gu-text)}
.vth-cc button:focus-visible{outline:2px solid var(--genup-blue-2);outline-offset:2px}
.vth-cc button[aria-pressed="true"]{background:color-mix(in srgb,var(--genup-blue) 22%,transparent);color:var(--gu-text)}
.vth-cc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vth-vach{width:1px;height:20px;margin:0 3px;background:color-mix(in srgb,var(--gu-text-2) 30%,transparent)}
body.khep-trai #vthKhep svg{transform:scaleX(-1)}
/* Khép cột trái (khoá chung genup_khep_trai với AI Brand). */
body.khep-trai .app{grid-template-columns:1fr}
body.khep-trai .app>aside{display:none}
/* Bung toàn màn hình: thanh trên + dự án + 10 tab ẩn; chỉ cụm điều khiển ở lại (đường ra). */
body.vo-bung #voThanhTren{display:none}
body.vo-bung .vo-thanh-he{top:0}
body.vo-bung .vth-duan,body.vo-bung .vth-tabs{display:none}
@media (max-width:1080px){ #vthKhep,#vthKhep + .vth-vach{display:none} }
.vth-tao,.vth-ten{min-height:36px;padding:0 var(--gu-sp-4);border:0;border-radius:var(--gu-radius-sm);cursor:pointer;
  font:inherit;font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-strong);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.vth-tao{background:var(--genup-blue);color:var(--gu-text-tren-toi)}
.vth-ten{display:inline-flex;align-items:center;gap:var(--gu-sp-2);background:var(--gu-surface-2);color:var(--gu-text);max-width:260px}
.vth-ten span{overflow:hidden;text-overflow:ellipsis}
.vth-ten svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vth-tao:hover,.vth-ten:hover{filter:brightness(1.12)}
.vth-tao:focus-visible,.vth-ten:focus-visible,.vth-tab:focus-visible,.vth-hop button:focus-visible,.vth-hop input:focus-visible{
  outline:2px solid var(--genup-blue-2);outline-offset:2px}
.vth-hop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:280px;max-width:360px;padding:var(--gu-sp-3);
  border-radius:var(--gu-radius-md,12px);background:var(--gu-surface-2);box-shadow:var(--gu-shadow-2)}
#vthHopTao{display:grid;grid-template-columns:1fr auto;gap:var(--gu-sp-2)}
#vthHopTao[hidden],#vthHopChon[hidden]{display:none}
#vthHopTao input{min-height:36px;padding:0 var(--gu-sp-3);border-radius:var(--gu-radius-sm);border:1px solid var(--gu-border-strong);
  background:var(--gu-surface-1);color:var(--gu-text);font:inherit;font-size:var(--gu-fs-than)}
#vthHopTao button{min-height:36px;padding:0 var(--gu-sp-3);border:0;border-radius:var(--gu-radius-sm);cursor:pointer;
  background:var(--genup-blue);color:var(--gu-text-tren-toi);font:inherit;font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-strong)}
.vth-loi{grid-column:1/-1;margin:0;font-size:var(--gu-fs-nhan);color:var(--gu-chu-do)}
.vth-loi:empty{display:none}
#vthDs{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow:auto}
.vth-muc{text-align:left;min-height:36px;padding:0 var(--gu-sp-3);border:0;border-radius:var(--gu-radius-sm);cursor:pointer;
  background:none;color:var(--gu-text);font:inherit;font-size:var(--gu-fs-than)}
.vth-muc:hover,.vth-muc.on{background:var(--gu-surface-1)}
.vth-muc.on{color:color-mix(in srgb,var(--genup-blue-d) 70%,white)}
.vth-trong{margin:0;padding:var(--gu-sp-2);font-size:var(--gu-fs-than);color:var(--gu-text-2)}
/* 🔴 OWNER 01/10/2026 (ảnh mẫu): MỘT HÀNG — [☐ ‹ › ⛶ sát phía logo] · khoảng cách · [TẠO DỰ ÁN · TÊN DỰ ÁN] · khoảng cách ·
   [10 hệ]. Không xuống hàng: không đủ chỗ thì cụm 10 hệ TRƯỢT NGANG tại chỗ (thanh cuộn ẩn), không rơi xuống dòng hai.
   (Thay luật cũ "hàng tab luôn ở dòng thứ hai".) */
.vo-thanh-he{flex-wrap:nowrap;gap:0;padding-left:10px}
.vth-cc{margin-right:var(--gu-sp-8,32px)}
.vth-duan{margin-right:var(--gu-sp-10,40px)}
.vth-tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:0 22px;flex:1 1 auto;min-width:0;justify-content:flex-end;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:2px}
.vth-tabs::-webkit-scrollbar{display:none}
/* Cuộn được thì bám trái (flex-end + tràn sẽ cắt mất tab đầu, không cuộn tới được). genup-vo.js đặt .vth-tran khi tràn. */
.vth-tabs.vth-tran{justify-content:flex-start}
.vth-tab{display:inline-flex;align-items:center;min-height:36px;padding:0 2px;color:var(--gu-text);text-decoration:none;
  font-size:var(--gu-fs-than);font-weight:var(--gu-fw-body);white-space:nowrap;transition:color var(--gu-dur-1) var(--gu-ease)}
.vth-tab:hover,.vth-tab:focus-visible,.vth-tab.on{color:color-mix(in srgb,var(--genup-blue-d) 70%,white);text-decoration:underline;
  text-decoration-color:var(--genup-blue-d);text-decoration-thickness:2px;text-underline-offset:8px}
:root[data-theme="light"] .vo-thanh-he{background:color-mix(in srgb,var(--gu-surface-0) 92%,transparent)}
:root[data-theme="light"] .vth-tab:hover,:root[data-theme="light"] .vth-tab.on{color:var(--genup-blue-d)}
@media (max-width:720px){
  .vo-thanh-he{position:static;padding:var(--gu-sp-3) var(--gu-gutter,16px)}
  .vth-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .vth-hop{min-width:0;width:calc(100vw - 32px)}
}

/* ══ MENU CON CỦA ỨNG DỤNG — OWNER 30/09/2026 (genup-vo.js window.GENUP_VO_MENU_CON) ══
   Tên ứng dụng làm đầu nhóm, các tính năng thụt vào một bậc — như một trang độc lập nằm bên trong. */
.mi[hidden]{display:none !important}
.vo-menu-con{display:flex;flex-direction:column;gap:2px;margin:10px 0 6px}
.vmc-dau{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:11px;text-decoration:none;
  color:var(--gu-text);font-size:var(--gu-fs-than);font-weight:var(--gu-fw-strong)}
.vmc-dau svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  color:var(--lam,var(--genup-blue-2))}
.vmc-dau:hover,.vmc-dau.on{background:rgba(255,255,255,.08)}
.vo-menu-con .vmc-mi{padding-left:26px}
.vmc-mi.on{background:rgba(255,255,255,.08);color:var(--gu-text)}
.vmc-mi.on svg{color:var(--lam,var(--genup-blue-2))}
.vmc-dau:focus-visible,.vmc-mi:focus-visible{outline:2px solid var(--genup-blue-2);outline-offset:1px}
/* Cụm 10 hệ đang tràn ⇒ mép mờ báo "còn tab" hai phía (không thanh cuộn thô); lăn chuột trượt ngang (genup-vo.js). */
.vth-tabs.vth-tran{-webkit-mask-image:linear-gradient(90deg,transparent 0,black 28px,black calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,black 28px,black calc(100% - 28px),transparent 100%);padding-inline:14px}
/* Điện thoại (≤720px) không đủ bề ngang cho MỘT hàng: [nút + dự án] ở dòng 1, cụm 10 hệ trượt ngang cả dòng 2;
   tên dự án co theo chỗ còn lại (không đẩy trang cuộn ngang — cổng BO_CUC_KHONG_CUON_NGANG). Máy tính giữ một hàng. */
@media (max-width:720px){
  .vo-thanh-he{flex-wrap:wrap;row-gap:var(--gu-sp-2,8px);padding-left:var(--gu-gutter,16px)}
  .vth-cc{margin-right:var(--gu-sp-3,12px)}
  .vth-duan{margin-right:0;flex:1 1 0;min-width:0}
  .vth-ten{min-width:0;max-width:100%}
  .vth-tabs{flex:1 0 100%;justify-content:flex-start}
}
/* 🔴 OWNER 01/10/2026 — dải trên cùng TUYỆT ĐỐI đồng bộ mọi trang: ① khung chính của vỏ luôn rộng hết phần còn lại (trước đây
   4 trang mang <main class="wrap"> bị .wrap của genup-premium.css ép 1540px canh giữa ⇒ cả thanh trên + dải trượt 41px);
   ② chừa sẵn chỗ thanh cuộn dọc ⇒ trang dài/ngắn không làm cụm 10 hệ (canh phải) nhảy 10px khi chuyển trang. */
html{scrollbar-gutter:stable}
.app>main.wrap{max-width:none;margin-inline:0}
/* 🔴 OWNER 01/10/2026 — CHỮ TIÊU ĐỀ CHÍNH (to, trên) + CHỮ PHỤ (nhỏ, dưới): MỘT chuẩn cho MỌI trang hệ — cùng phông, cùng cỡ,
   cùng độ đậm, cùng giãn chữ, canh giữa. Trước đây 4 cỡ chữ phụ (15/17/20px, nét 400/500) và Film Studio nét 400 vì luật h1 cũ.
   Trang mới: gắn .he-tieu / .he-phu (hoặc các lớp có sẵn dưới đây) — không khai cỡ riêng. */
:root{--gs-tieu-he:clamp(28px,2.9vw,52px);--he-phu-co:clamp(15px,1vw,18px)}
body :is(.gs-home-tieu,.vs-home-tieu,.bnt-tieu,.he-tieu){margin:0;font-family:var(--hoa,Oswald,'Plus Jakarta Sans',system-ui,sans-serif);
  font-weight:700;font-size:var(--gs-tieu-he);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;text-align:center;color:var(--gu-text)}
html body :is(.gs-home-phu,.vs-home-phu,.bnt-phu,.he-phu){margin-top:var(--gu-sp-4,16px);font-size:var(--he-phu-co);font-weight:400;line-height:1.5;
  letter-spacing:normal;text-transform:none;text-align:center;color:var(--gu-text)}
/* Tiêu đề đứng CÙNG MỘT ĐỘ CAO mọi trang (đo 1920px: đỉnh chữ y=202, tức cách dải 10 hệ 64px). Màn chọn chức năng thôi canh giữa
   theo chiều dọc (mỗi màn một chiều cao ⇒ tiêu đề nhảy 360–404); mỗi trang chỉ khai đệm bù cho khung của nó (--he-tieu-lui). */
body :is(.gs-home,.vs-home){min-height:0;justify-content:flex-start;padding-top:var(--he-tieu-lui,24px)}
body .bnt-hero{padding-top:var(--he-tieu-lui,40px)}

.genup-tools-project-bar{display:flex;align-items:center;gap:32px;padding:14px 28px;background:#08090c;position:relative;z-index:14}.genup-tools-project-bar button{font-family:var(--font-body);font-size:14px}.vth-cc svg,.vth-ten svg,.topbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.top-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px}.icon-chip svg{margin:auto}.quick-link{text-decoration:none}.quick-link.current{color:#4da6ff}.genup-tools-inner-nav{margin-top:0;margin-bottom:20px}.vth-hop[hidden]{display:none!important}.khep-trai .app-shell{grid-template-columns:76px minmax(0,1fr)}.khep-trai .sidebar{width:76px}.khep-trai .brand-logo{width:66px}.khep-trai :is(.brand-sub,.nav-item span,.nav-section,.sidebar-bottom){display:none}.vo-bung .app-shell{grid-template-columns:minmax(0,1fr)}.vo-bung .sidebar,.vo-bung .topbar,.vo-bung .genup-tools-inner-nav,.vo-bung .vth-duan{display:none}.vo-bung .vth-cc{display:flex}.vo-bung .genup-tools-project-bar{position:sticky;top:0;justify-content:flex-end}.vo-bung .tool-topbar{position:static}
@media(max-width:760px){.genup-tools-project-bar{gap:12px;padding:12px 16px;flex-wrap:wrap}.vth-duan{flex-wrap:wrap}.topbar-right{display:flex!important}.topbar{flex-wrap:wrap}.khep-trai .app-shell{display:block}.quick-tools{scrollbar-width:thin}}

.genup-tools-project-bar{top:auto}.genup-tools-project-bar .vth-cc button{min-height:32px}.genup-tools-project-bar .vth-ten{color:var(--gu-text)}.genup-tools-project-bar .vth-hop{background:var(--gu-surface-1)}.genup-tools-project-bar .vth-tao{font-weight:700}

.topbar a.top-chip{text-decoration:none}.vth-ten span{white-space:nowrap}.genup-tools-project-bar [hidden]{display:none!important}

.vo-tb[hidden],.vo-tb-hop[hidden]{display:none!important}.vo-tb svg{width:18px;height:18px}

.genup-ecosystem-list[hidden]{display:none}.genup-ecosystem-list .nav-item{padding-left:42px;line-height:1.4;min-height:44px;height:auto;padding-top:10px;padding-bottom:10px}.sidebar{overflow-y:auto}.side-nav{padding-bottom:190px}.sidebar-bottom{z-index:2;background:#0b1016}

.topbar .genup-language{background:#19212b!important;color:#e5e7eb!important;color-scheme:dark}.activation input{color:#e5e7eb!important}.activation input::placeholder{color:#8493a5!important}.profile-card{color:#e5e7eb}

.barcode-tools-strip{display:none!important}body.vo-bung [class$="-shell"]{grid-template-columns:minmax(0,1fr)!important}body.vo-bung [class$="-workspace"]{grid-column:1!important}body.vo-khep [class$="-shell"]{grid-template-columns:76px minmax(0,1fr)!important}

.activation{min-width:240px;max-width:450px;flex:1 1 320px}.activation input{width:200px;padding:0 12px;height:32px}.activation button{flex:none}.topbar-left{flex:1;flex-wrap:wrap}.topbar{min-height:58px;height:auto;padding-top:10px;padding-bottom:10px}@media(max-width:1550px){.topbar{flex-wrap:wrap}.topbar-right{margin-left:auto}.topbar-left{flex-basis:100%}.activation{max-width:none}}@media(max-width:760px){.activation{flex-basis:100%}.topbar-right{flex-wrap:wrap;justify-content:flex-end}}

.app-shell[class*="-shell"]{grid-template-columns:var(--side-w) minmax(0,1fr)}.khep-trai .app-shell[class*="-shell"]{grid-template-columns:76px minmax(0,1fr)}[class$="-topbar"]:not(.topbar),[class$="-top"]{position:static!important}.app-shell>.sidebar{grid-column:1;grid-row:1}.app-shell>.workspace{grid-column:2;grid-row:1}body.vo-bung .app-shell>.workspace{grid-column:1}

.genup-tool-guide{margin:12px 28px 18px;padding:12px 16px;border:1px solid var(--gu-line,#26384d);border-radius:12px;color:var(--gu-text,#dce3eb);font:14px var(--font-body)}.genup-tool-guide summary{cursor:pointer}.genup-tool-guide nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.genup-tool-guide nav button{padding:8px 12px;min-height:36px}.genup-tool-guide [class$="-note"]{position:static;margin-top:12px;padding:12px}

/* One interaction blue and borderless tool surfaces. */
:root{--genup-tool-link:#4da6ff}
html body :is(.quick-link:hover,.quick-link:focus-visible,.quick-link.current,.vth-tab:hover,.vth-tab:focus-visible,.vth-tab.on,.vth-muc.on){color:var(--genup-tool-link)!important;text-decoration-color:var(--genup-tool-link)!important}
html body :is(.quick-link,.vth-tab)::after{background:var(--genup-tool-link)!important}
html body :is(main,.tool-workspace,.workspace,.quick-tools) :is(div,section,aside,article,details,label,input,select,textarea){border-width:0!important}
html body :is(.quick-tools,.genup-tool-guide){border:0!important}
html body :is([class$="-card"],.setting-card,.preview-card,.preview-info,.history-card,.logo-drop){border:0!important;background:var(--gu-surface-1,#0d1722)}
html body :is([class$="-card"],.setting-card,.preview-card)::before{display:none!important}
html body :is(main,.tool-workspace,.workspace) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea){background:var(--gu-surface-2,#19232d)}
html body #dynamicFields .sample-value{color:#8995a3!important}
html body #dynamicFields :is(input,textarea):not(.sample-value){color:var(--gu-text,#f5f7fa)}
html body .genup-share-action::before{content:"";display:inline-block;vertical-align:middle;width:16px;height:16px;margin-right:8px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m9 10 6-4M9 14l6 4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html body .genup-upload-action::before{content:"↑";display:inline-block;margin-right:8px;font-size:20px;line-height:1;font-weight:500}

html body .tool-card{border:0!important}html body .tool-card:hover{outline:1px solid var(--genup-tool-link);outline-offset:0}

/* Reference title and spacing remain identical when changing tool pages. */
html body.genup-reference-tool .genup-reference-heading{width:calc(100% - 80px);max-width:1200px;margin:34px auto 24px;padding:0;background:none}
html body.genup-reference-tool .genup-reference-heading h1{display:flex;align-items:baseline;gap:8px;margin:0;font-family:Oswald,var(--font-display),sans-serif!important;font-size:28px!important;font-weight:400!important;line-height:1.35;letter-spacing:0;text-transform:uppercase;color:var(--gu-text)}
html body.genup-reference-tool .genup-reference-heading h1 span{font:inherit!important}
html body.genup-reference-tool .reference-brand,html body.genup-reference-tool .reference-brand-name>span{color:#ef3038}
html body.genup-reference-tool .reference-chevron{margin-right:2px}
html body.genup-reference-tool :is(.genup-tool-guide,.barcode-topbar,.tool-topbar,.sku-topbar,header[class$="-top"],[class$="-heading"]:not(.genup-reference-heading)){display:none!important}
html body.genup-reference-tool :is(.barcode-main,.qr-main,.sku-main,.sl-main,.cp-main,.utm-main,.short-main,.img-main,.fc-main,.unit-main,.cbm-main,.pack-main,.vat-main,.m-main,.d-main,.e-main){width:100%;max-width:1280px;margin:0 auto;padding:0 40px 48px!important}
html body.genup-reference-tool .integration-main{max-width:1200px;margin:0 auto;padding-top:0}
html body.genup-reference-tool .integration-main h1{display:none}
html body.genup-reference-tool #contentPanel>#editorMode{margin-bottom:20px}
@media(max-width:760px){html body.genup-reference-tool .genup-reference-heading{width:calc(100% - 32px);margin:24px auto 18px}html body.genup-reference-tool .genup-reference-heading h1{font-size:22px!important;flex-wrap:wrap}html body.genup-reference-tool :is(.barcode-main,.qr-main,.sku-main,.sl-main,.cp-main,.utm-main,.short-main,.img-main,.fc-main,.unit-main,.cbm-main,.pack-main,.vat-main,.m-main,.d-main,.e-main){padding:0 16px 32px!important}}

.genup-tool-instruction{font-family:var(--font-body);font-size:14px;line-height:1.6;font-weight:400;margin:12px 0 0;color:var(--muted,#8e9cad)}
.genup-reference-tool .integration-main h1{display:none}

body.genup-reference-tool input.genup-example-value{color:#8e9cad!important}

/* Containers are separated by surface colors in both modes. Keyboard focus remains visible. */
html[data-theme] body :is(.workspace,.quick-tools,.sidebar) :is(div,section,article,aside,details,fieldset,input,select,textarea,button,table,th,td){border-width:0!important}
html[data-theme] body .tool-card:hover{outline:none!important;background-color:var(--gu-surface-2)!important}
html[data-theme] body :is(.workspace,.quick-tools) :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--genup-tool-link,#4da6ff)!important;outline-offset:3px}
.genup-tools-state-dialog{position:fixed;inset:0;z-index:9000;background:#000107;overflow:auto}
.genup-tools-state-dialog>.gu-tt-bao{min-height:100%;display:grid;align-items:center}
.genup-tools-state-dialog .gu-tt{min-height:100vh;border-radius:0}
.genup-tools-state-dialog .gu-tt__anh{object-fit:cover}

html[data-theme] body :is(.topbar,.genup-topbar) :is(button,input,select,.top-chip){border-width:0!important}
.genup-tools-state-dialog,.genup-tools-state-dialog>.gu-tt-bao,.genup-tools-state-dialog .gu-tt{max-width:100%;box-sizing:border-box}
.genup-tools-state-dialog{overflow-x:hidden}