/* ═══════════════════════════════════════════════════════════════════════════
   _shared/vo-starduct.css — VỎ STARDUCT v1.1
   🔴 TỆP SINH RA — ĐỪNG SỬA TAY. Sửa _dev/_tcgd.js (khối VO / HE) hoặc
      _dev/gen_vo_starduct.js rồi chạy: node _dev/gen_vo_starduct.js .
   Hợp đồng: _mockups/MOCKUP_TONGTHE_V3_2026-09-25.html · Nguyên tắc: _docs/VO_STARDUCT_V1_1.md
   Mọi luật nằm sau body.vo11 (core/vo-starduct.js gắn). Gỡ lớp = về vỏ cũ.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① TOKEN TCGD — chỉ trên phần tử VỎ (xem ghi chú ở bộ sinh) */
body.vo11 .topbar,body.vo11 .page-hd,body.vo11 .tb-user-dropdown,body.vo11 #tbb-panel,body.vo11 .vo-bieu-mod{--nhan:#C2410C;--nhan-dam:#9A3412;--nhan-nhat:#FFF7ED;--nhan-vien:#FED7AA;--nhan-chu:#FFFFFF;--nhan-sang:#E8620F;--ok:#15803D;--ok-nen:#F0FDF4;--canh:#856600;--canh-nen:#FEFCE8;--chan:#BE123C;--chan-nen:#FFF1F2;--tin:#0369A1;--tin-nen:#F0F9FF;--nen:#F5F5F4;--the:#FFFFFF;--chim:#EFEEEC;--chim-2:#E7E5E4;--vien:#D8D5D2;--vien-dam:#C4C0BC;--chu:#1C1917;--chu-2:#44403C;--chu-3:#57534E;--chu-4:#78716C;--chu-5:#A8A29E;--mo:#FAFAF9;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,
         "Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Consolas,monospace;--lo-xo:cubic-bezier(.32,.72,0,1);--bong:0 0 0 .5px rgba(28,25,23,.10), 0 1px 2px rgba(28,25,23,.05),
         0 8px 20px -10px rgba(28,25,23,.16);--bong-nho:0 0 0 .5px rgba(28,25,23,.12), 0 1px 1px rgba(28,25,23,.06)}
:root[data-theme="dark"] body.vo11 .topbar,:root[data-theme="dark"] body.vo11 .page-hd,:root[data-theme="dark"] body.vo11 .tb-user-dropdown,:root[data-theme="dark"] body.vo11 #tbb-panel,:root[data-theme="dark"] body.vo11 .vo-bieu-mod{--nhan:#FB923C;--nhan-dam:#FDBA74;--nhan-nhat:#2A1508;--nhan-vien:#4A240B;--nhan-chu:#1C1917;--nhan-sang:#FDBA74;--ok:#4ADE80;--ok-nen:#0D2617;--canh:#F2E75C;--canh-nen:#1F1C04;--chan:#FB7185;--chan-nen:#2A0D14;--tin:#7DD3FC;--tin-nen:#0A1F2E;--nen:#1C1917;--the:#292524;--chim:#332E2B;--chim-2:#44403C;--vien:#443E3A;--vien-dam:#56504B;--chu:#FAFAF9;--chu-2:#D6D3D1;--chu-3:#B5AFAA;--chu-4:#9A928C;--chu-5:#78716C;--mo:#232020;--bong:0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4),
         0 8px 20px -10px rgba(0,0,0,.6);--bong-nho:0 0 0 .5px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4)}

/* ② MÀU NHẬN DIỆN 7 NHÓM — CHỈ cho điều hướng. Nút chính/liên kết giữ --nhan cam,
      nhãn trạng thái giữ bộ chung. Nhóm đọc từ DANH_MUC (core/app-launcher.js). */
body.vo11{--nhom-sp:#C2410C;--nhom-sp-nhat:#FFF7ED;--nhom-ban:#4338CA;--nhom-ban-nhat:#EEF2FF;--nhom-sx:#0F766E;--nhom-sx-nhat:#F0FDFA;--nhom-tc:#1D4ED8;--nhom-tc-nhat:#EFF6FF;--nhom-ns:#7E22CE;--nhom-ns-nhat:#FAF5FF;--nhom-dh:#4D7C0F;--nhom-dh-nhat:#F7FEE7;--nhom-qt:#57534E;--nhom-qt-nhat:#F5F5F4;--nm:var(--nhom-sp);--nm-nhat:var(--nhom-sp-nhat);--topbar-h:48px;--font-doc:"Source Serif 4",Georgia,"Times New Roman",serif}
:root[data-theme="dark"] body.vo11{--nhom-sp:#FB923C;--nhom-sp-nhat:#2A1508;--nhom-ban:#A5B4FC;--nhom-ban-nhat:#1E1B4B;--nhom-sx:#5EEAD4;--nhom-sx-nhat:#042F2E;--nhom-tc:#93C5FD;--nhom-tc-nhat:#172554;--nhom-ns:#D8B4FE;--nhom-ns-nhat:#2E1065;--nhom-dh:#BEF264;--nhom-dh-nhat:#1A2E05;--nhom-qt:#D6D3D1;--nhom-qt-nhat:#332E2B}
body.vo11[data-nhom="sp"],body.vo11 [data-nhom="sp"]{--nm:var(--nhom-sp);--nm-nhat:var(--nhom-sp-nhat)}
body.vo11[data-nhom="ban"],body.vo11 [data-nhom="ban"]{--nm:var(--nhom-ban);--nm-nhat:var(--nhom-ban-nhat)}
body.vo11[data-nhom="sx"],body.vo11 [data-nhom="sx"]{--nm:var(--nhom-sx);--nm-nhat:var(--nhom-sx-nhat)}
body.vo11[data-nhom="tc"],body.vo11 [data-nhom="tc"]{--nm:var(--nhom-tc);--nm-nhat:var(--nhom-tc-nhat)}
body.vo11[data-nhom="ns"],body.vo11 [data-nhom="ns"]{--nm:var(--nhom-ns);--nm-nhat:var(--nhom-ns-nhat)}
body.vo11[data-nhom="dh"],body.vo11 [data-nhom="dh"]{--nm:var(--nhom-dh);--nm-nhat:var(--nhom-dh-nhat)}
body.vo11[data-nhom="qt"],body.vo11 [data-nhom="qt"]{--nm:var(--nhom-qt);--nm-nhat:var(--nhom-qt-nhat)}

/* ③ CẦU MÀU ĐỢT 2 — "cả hệ đồng bộ màu": giá trị TCGD đổ vào TÊN BIẾN của theme.css
      (bảng ánh xạ của _shared/erp-tcgd.css, chạy ở PDM từ 15/09). Xanh → cam hành động,
      xám lạnh → xám ấm. Module đã có lớp .tcgd/#pdm-root tự khai lại — không bị đè. */
body.vo11{--b50:#FFF7ED;--b100:#FFEDD5;--b200:#FED7AA;--b300:#FB923C;--b400:#C2410C;--b500:#9A3412;--b600:#7C2D12;--info:#C2410C;--info2:#FFF7ED;--ok:#15803D;--ok2:#F0FDF4;--warn:#856600;--warn2:#FEFCE8;--err:#BE123C;--err2:#FFF1F2;--surface:#FFFFFF;--surface-1:#FAFAF9;--surface-2:#F5F5F4;--surface-3:#EFEEEC;--border:#E0DEDB;--border-2:#D0CCC8;--border-strong:#A8A29E;--text:#1C1917;--text-2:#44403C;--text-3:#57534E;--text-4:#78716C;--text-5:#A8A29E;--sb-bg:transparent;--sb-hover:rgba(28,25,23,.06);--sb-active:#FFF7ED;--sb-border:#E0DEDB;--sb-text:#44403C;--sb-text-a:#C2410C;--sb-accent:#C2410C;--ink:#C2410C;--ink-hover:#9A3412;--ink-fg:#FFFFFF;--shadow:0 0 0 .5px rgba(28,25,23,.10), 0 1px 1px rgba(28,25,23,.05);--shadow-md:0 0 0 .5px rgba(28,25,23,.10), 0 1px 2px rgba(28,25,23,.06),
              0 6px 16px -10px rgba(28,25,23,.16);--shadow-lg:0 0 0 .5px rgba(28,25,23,.12), 0 2px 4px rgba(28,25,23,.06),
              0 16px 36px -16px rgba(28,25,23,.24);--font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",
              "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace;--lo-xo:cubic-bezier(.32,.72,0,1);--n0:#FFFFFF;--n50:#FAFAF9;--n100:#EFEEEC;--n200:#E7E5E4;--n300:#D8D5D2;--n400:#A8A29E;--n500:#78716C;--n600:#57534E;--n700:#44403C;--n800:#1C1917}
:root[data-theme="dark"] body.vo11{--b50:#2A1508;--b100:#3A1C09;--b200:#4A240B;--b300:#EA7C3C;--b400:#FB923C;--b500:#FDBA74;--b600:#FED7AA;--info:#FB923C;--info2:#2A1508;--ok:#4ADE80;--ok2:#0D2617;--warn:#F2E75C;--warn2:#1F1C04;--err:#FB7185;--err2:#2A0D14;--surface:#292524;--surface-1:#1C1917;--surface-2:#332E2B;--surface-3:#44403C;--border:#3A3532;--border-2:#4A4441;--border-strong:#6B6360;--text:#FAFAF9;--text-2:#D6D3D1;--text-3:#B5AFAA;--text-4:#9A928C;--text-5:#78716C;--sb-hover:rgba(255,255,255,.07);--sb-active:#2A1508;--sb-border:#3A3532;--sb-text:#D6D3D1;--sb-text-a:#FB923C;--sb-accent:#FB923C;--ink:#FB923C;--ink-hover:#FDBA74;--ink-fg:#1C1917;--shadow:0 0 0 .5px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4);--shadow-md:0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.45),
              0 6px 16px -10px rgba(0,0,0,.6);--shadow-lg:0 0 0 .5px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.5),
              0 16px 36px -16px rgba(0,0,0,.7);--n0:#1C1917;--n50:#292524;--n100:#332E2B;--n200:#44403C;--n300:#443E3A;--n400:#78716C;--n500:#9A928C;--n600:#B5AFAA;--n700:#D6D3D1;--n800:#FAFAF9}

/* ④ FONT PHỐI — serif cho tên màn, tiêu đề, cây, đoạn chữ · --font cho bảng, số, ô nhập,
      nút · --mono cho mã. :where() giữ độ đặc hiệu 0 để CSS riêng của trang vẫn thắng. */
body.vo11 :is(.tb-mod,.tb-ud-fullname,.tb-ud-btn,.kg-ben .muc,.kg-ben .dau .t-nhan,.vo-tabtrang button,.vo-vet .phb-seg.current,.phb-seg.current){font-family:var(--font-doc)}
body.vo11 :where(.content h1,.content h2,.content h3,.t-trang,.t-muc,.sc-the .ten){font-family:var(--font-doc)}

/* ⑤ THANH TRÊN — cao 48 · tab 28 · Trang chủ + 5 module gần nhất */
body.vo11 .topbar{height:48px;padding:0 12px;gap:8px;background:var(--the);border-bottom:0;box-shadow:inset 0 -.5px 0 var(--vien);font-family:var(--font);color:var(--chu)}
body.vo11 .tb-logo{gap:8px;height:32px;padding:0 8px 0 2px;margin-right:0;border-radius:8px}
body.vo11 .tb-logo:hover{background:var(--chim)}
body.vo11 .tb-logo .vo-bieu{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:linear-gradient(160deg,var(--nhan-sang),var(--nhan));color:var(--nhan-chu);font-size:11px;font-weight:700;line-height:14px}
body.vo11 .vo-logo-chu{font-size:13px;font-weight:700;line-height:17px;color:var(--chu);white-space:nowrap}
body.vo11 .tb-launch{height:28px;padding:0 10px;gap:6px;border:0;border-radius:6px;background:var(--the);color:var(--chu-2);font-size:13px;font-weight:500;line-height:17px;box-shadow:var(--bong-nho)}
body.vo11 .tb-launch:hover{background:var(--chim)}
body.vo11 .tb-launch-div{width:1px;height:20px;background:var(--vien)}
body.vo11 .tb-modules{height:48px;padding-left:4px;gap:2px;align-items:center}
body.vo11 .tb-mod{height:28px;padding:0 10px;gap:6px;border:0;border-radius:6px;background:transparent;color:var(--chu-3);font-size:13px;font-weight:500;line-height:17px;letter-spacing:0;transition:background .2s var(--lo-xo),color .2s var(--lo-xo)}
body.vo11 .tb-mod:hover{background:var(--chim);color:var(--chu)}
body.vo11 .tb-mod.active{background:var(--nm-nhat);color:var(--nm);font-weight:600;border:0}
body.vo11 .tb-mod-dot,body.vo11 .tb-mod.active .tb-mod-dot{width:6px;height:6px;border-radius:4px;background:var(--nm);box-shadow:none}
body.vo11 .tb-mod-badge{padding:0 4px;border:0;border-radius:4px;background:var(--chim);color:var(--chu-4);font-family:var(--font);font-size:11px;font-weight:600;line-height:16px}
body.vo11 :is(.tb-more,.tb-add-mod,.sb-toggle-btn,.tb-live,.tb-clock,.tb-theme-btn,.tb-logo-ver,.tb-logo-name,.tb-logo-mark){display:none!important}
body.vo11 .tb-right{gap:4px;margin-left:auto}
body.vo11 .vo-tim{display:flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 8px;border:0;border-radius:6px;background:var(--chim);color:var(--chu-4);font-size:13px;line-height:17px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 0 0 .5px var(--vien)}
body.vo11 .vo-tim:hover{box-shadow:inset 0 0 0 .5px var(--vien-dam)}
body.vo11 .vo-tim .kbd{padding:0 4px;border-radius:4px;font-family:var(--mono);font-size:11px;line-height:14px;color:var(--chu-4);box-shadow:inset 0 0 0 .5px var(--vien-dam)}
body.vo11 :is(.vo-nut,#tbb-btn){position:relative;width:28px;height:28px;flex:none;border:0;border-radius:6px;background:transparent;color:var(--chu-3);display:grid;place-items:center;cursor:pointer;font-size:13px}
body.vo11 :is(.vo-nut,#tbb-btn):hover{background:var(--chim);color:var(--chu)}
body.vo11 #tbb-btn.has{color:var(--nhan)}
body.vo11 .tbb-badge{top:0;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--chan);color:var(--the);font-size:11px;font-weight:600;line-height:16px;box-shadow:none}
body.vo11 .tb-user{height:32px;padding:0 6px 0 2px;gap:6px;border:0;border-radius:8px;background:transparent}
body.vo11 .tb-user:hover{background:var(--chim)}
body.vo11 .tb-user>div:nth-child(2){display:none}
body.vo11 .tb-user-av{width:28px;height:28px;border-radius:50%;background:var(--chim-2);color:var(--chu-2);font-size:11px;font-weight:700}
body.vo11 .tb-user-dropdown{min-width:260px;padding:4px;border:0;border-radius:10px;background:var(--the);box-shadow:var(--bong);color:var(--chu)}
body.vo11 .tb-ud-header{padding:8px 8px 10px;gap:10px;border-bottom:0;box-shadow:inset 0 -.5px 0 var(--vien)}
body.vo11 .tb-ud-av{border-radius:50%;background:var(--chim-2);color:var(--chu-2)}
body.vo11 .tb-ud-fullname{font-size:13px;font-weight:600;line-height:17px;color:var(--chu)}
body.vo11 .tb-ud-email{font-size:12px;line-height:16px;color:var(--chu-4)}
body.vo11 .tb-ud-meta{padding:8px;border-bottom:0;box-shadow:inset 0 -.5px 0 var(--vien)}
body.vo11 .tb-ud-row{font-size:12px;line-height:16px;color:var(--chu-3)}
body.vo11 .tb-ud-row>span:first-child{display:none}
body.vo11 .tb-ud-actions{padding:4px 0 0}
body.vo11 .tb-ud-btn{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--chu);font-size:13px;line-height:17px;text-align:left;cursor:pointer}
body.vo11 .tb-ud-btn:hover{background:var(--chim);color:var(--chu)}
body.vo11 .tb-ud-btn.danger,body.vo11 .tb-ud-btn.danger:hover{color:var(--chan)}
body.vo11 .tb-ud-btn svg{flex:none;color:var(--chu-4)}
body.vo11 .tb-ud-btn .tb-ud-goi{margin-left:auto;opacity:1;font-size:11px;line-height:14px;color:var(--chu-5)}

/* ⑥ ĐƯỜNG DẪN — thanh cũ gọn lại; khi có khung cây thì đường dẫn nằm bên phải cây (vo-dau) */
body.vo11 .page-hd{height:40px;padding:0 16px;gap:8px;background:var(--the);border-bottom:0;box-shadow:inset 0 -.5px 0 var(--vien)}
body.vo11.vo-khung .page-hd{display:none}
body.vo11 :is(.page-hd,.vo-dau) .phb-seg{font-size:12px;line-height:16px;color:var(--chu-4)}
body.vo11 :is(.page-hd,.vo-dau) .phb-seg:hover{color:var(--nm)}
body.vo11 :is(.page-hd,.vo-dau) .phb-seg.current{color:var(--chu-2);font-weight:500}
body.vo11 :is(.page-hd,.vo-dau) .phb-sep{color:var(--chu-5);font-size:12px}
body.vo11 .phn-btn{width:28px;height:28px;border:0;border-radius:6px;color:var(--chu-3)}
body.vo11 .phn-btn:hover:not(:disabled){background:var(--chim);color:var(--chu);border:0}
body.vo11 .content{background:var(--surface-2)}

/* ⑦ KHUNG CÂY — cây 240px cuộn riêng · ô phải: đường dẫn + dải tab đứng yên, trang cuộn */
body.vo11.vo-khung .content{padding:0;overflow:hidden}
body.vo11 .vo-hubk{display:flex;height:100%;min-height:0;position:relative}
body.vo11 .vo-hubk .kg-ben.ben{position:relative;top:auto;width:240px;height:100%;max-height:none;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0;box-shadow:inset -.5px 0 0 var(--vien),inset 0 2px 0 var(--nm)}
body.vo11 .vo-hubk .kg-ben .dau{padding:12px 12px 8px;gap:10px}
body.vo11 .vo-hubk .kg-ben .tim{padding:0 8px 6px}
body.vo11 .vo-hubk #kg-cay{flex:1;min-height:0;overflow:auto;padding:4px 8px 8px;display:flex;flex-direction:column;gap:2px}
body.vo11 .vo-bieu-mod,body.vo11 .kg-ben .dau .bieu.vo-bieu-mod{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--nm);color:var(--nhan-chu);box-shadow:none}
body.vo11 .vo-hubk .kg-ben .dau .t-phu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.vo11 :is(.vo-vet,.page-hd-breadcrumb)>.phb-seg:first-child,body.vo11 :is(.vo-vet,.page-hd-breadcrumb)>.phb-seg:first-child+.phb-sep{display:none}
body.vo11 .vo-hubk .kg-ben .muc{height:32px}
body.vo11 .vo-hubk .kg-ben .muc[aria-current="true"]{background:var(--nm-nhat);color:var(--nm)}
body.vo11 .vo-hubk .kg-ben .muc[aria-current="true"] :is(.bt,.dem){color:var(--nm)}
body.vo11 .vo-hubk .kg-ben .nhom-ben{padding:12px 10px 4px}
body.vo11 .kg-chan{flex:none;display:flex;flex-direction:column;gap:2px;padding:8px;box-shadow:inset 0 .5px 0 var(--vien);position:relative}
body.vo11 .kg-chan-hang{display:flex;align-items:center;gap:4px}
body.vo11 .kg-chan-hang #kg-caidat{flex:1;min-width:0}
body.vo11 .kg-chan-sp{flex:1}
body.vo11 .kg-chan .kg-thu-mo{margin-left:auto}
/* đầu cây: nút ▾ "Đổi module" (vo-cay-dau của mockup) — mở bảng chọn module ⑪ */
body.vo11 .kg-ben .kg-doi-mod{margin-left:auto;flex:none;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--chu-4);cursor:pointer;display:grid;place-items:center}
body.vo11 .kg-ben .kg-doi-mod:hover,body.vo11 .kg-ben .kg-doi-mod[aria-expanded="true"]{background:var(--chim);color:var(--nm)}
body.vo11 .kg-ben.kg-thu:not(.kg-mo-tay) :is(.kg-doi-mod,.kg-chan-sp),body.vo11.hub-gon .kg-ben:not(.kg-mo-tay) :is(.kg-doi-mod,.kg-chan-sp){display:none}
body.vo11 .kg-ben.kg-thu:not(.kg-mo-tay) .kg-chan-hang,body.vo11.hub-gon .kg-ben:not(.kg-mo-tay) .kg-chan-hang{flex-direction:column}
body.vo11 .kg-ben.kg-thu:not(.kg-mo-tay) .kg-chan .kg-thu-mo,body.vo11.hub-gon .kg-ben:not(.kg-mo-tay) .kg-chan .kg-thu-mo{margin-left:0}
body.vo11 .kg-caidat-pop{position:absolute;left:8px;right:8px;bottom:calc(100% - 4px);display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:10px;background:var(--the);box-shadow:var(--bong);z-index:20}
body.vo11 .kg-caidat-pop[hidden]{display:none}
body.vo11 .hubk-phai{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
body.vo11 .vo-dau{flex:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 8px;background:var(--the);box-shadow:inset 0 -.5px 0 var(--vien);font-family:var(--font)}
body.vo11 .vo-dau .vo-nut:disabled{opacity:.3;cursor:default}
body.vo11 .vo-vet{flex:1;min-width:0;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
body.vo11 .vo-dau-nut{display:flex;align-items:center;gap:8px}
body.vo11 .vo-tabtrang{flex:none;display:flex;gap:4px;padding:0 16px;background:var(--the);box-shadow:inset 0 -.5px 0 var(--vien);overflow-x:auto}
body.vo11 .vo-tabtrang[hidden]{display:none}
body.vo11 .vo-tabtrang button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;background:transparent;color:var(--chu-3);font-size:13px;font-weight:500;line-height:17px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:color .2s var(--lo-xo),box-shadow .2s var(--lo-xo)}
body.vo11 .vo-tabtrang button:hover{color:var(--chu)}
body.vo11 .vo-tabtrang button[aria-selected="true"]{color:var(--chu);font-weight:600;box-shadow:inset 0 -2px 0 var(--nm)}
body.vo11 .vo-hubk .hubk-trang{flex:1;min-height:0;overflow:auto;padding:16px 24px 24px}

/* ⑧ THẺ MODULE ở Trang chủ / Ứng dụng — biểu tượng nét trên ô màu nhóm */
body.vo11 .sc-the .ico.vo-bieu-mod{font-size:13px}
body.vo11 .reg-card .rc-ico.vo-bieu-mod{width:32px;height:32px;font-size:13px}
body.vo11 .reg-card .rc-name{font-family:var(--font-doc)}
body.vo11 .al-chip{display:inline-flex;align-items:center;gap:6px}
body.vo11 .al-chip .al-chip-ico.vo-bieu-mod{width:20px;height:20px;border-radius:6px}
body.vo11 .al-chip .al-chip-ico.vo-bieu-mod svg{width:12px;height:12px}

/* ⑪ BẢNG CHỌN MODULE — nút Ứng dụng + nút ▾ đầu cây (core/vo-starduct.js moUngDung).
      Số đo = vePop('ungdung') + .menu của MOCKUP_TONGTHE_V3 (bài thử đọc thẳng từ mockup) */
body.vo11 .vo-pop-ud{position:fixed;z-index:1300}
body.vo11 .vo-pop-ud .menu{background:var(--the);border-radius:8px;box-shadow:var(--bong);padding:4px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 64px);overflow:auto;font-family:var(--font);color:var(--chu)}
body.vo11 .vo-pop-ud .vo-luoi-ud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px;padding:8px;width:720px;max-width:calc(100vw - 32px)}
body.vo11 .vo-pop-ud .nhom-ud{display:flex;flex-direction:column;gap:2px}
body.vo11 .vo-pop-ud .t-nhan-nhom{padding:8px 8px 4px}
body.vo11 .vo-pop-ud .vo-mod{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--chu);font-family:var(--font-doc);font-size:13px;line-height:17px;cursor:pointer;text-align:left;width:100%}
body.vo11 .vo-pop-ud .vo-mod:hover{background:var(--chim)}
body.vo11 .vo-pop-ud .vo-mod[aria-current="true"]{background:var(--nm-nhat);color:var(--nm);font-weight:600}
body.vo11 .vo-pop-ud .vo-mod .vo-bieu-mod{width:24px;height:24px;border-radius:6px}
body.vo11 .vo-pop-ud .vo-ud-chan{padding:4px 8px;box-shadow:inset 0 .5px 0 var(--vien)}
body.vo11 .vo-pop-ud .vo-ud-tat{border:0;background:transparent;padding:6px 8px;color:var(--nhan);font:inherit;font-size:12px;cursor:pointer}
body.vo11 .vo-pop-ud .vo-ud-tat:hover{text-decoration:underline}
@media (max-width:1023px){body.vo11 .vo-pop-ud .vo-luoi-ud{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ⑫ BẢNG MÀN CON — bấm tab module · Ứng dụng › module nhiều màn (core/vo-starduct.js moBangMan / veBangMan).
      Số đo = .pop-dau · .man · .pop-luoi · .ve-lai của MOCKUP_MENU_MAN_CON_V2 (bài thử đọc thẳng từ mockup).
      Lệch mockup có lý do: mô tả màn 11.5→12px, nhãn cách chữ 3→4px (thang chữ/cách của TCGD). */
body.vo11 .tb-mod .vo-tab-mui{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;color:var(--chu-5);transition:transform .2s var(--lo-xo)}
body.vo11 .tb-mod.active .vo-tab-mui{color:var(--nm)}
body.vo11 .tb-mod[aria-expanded="true"]{background:var(--nm-nhat);color:var(--nm);box-shadow:inset 0 0 0 .5px var(--nm)}
body.vo11 .tb-mod[aria-expanded="true"] .vo-tab-mui{transform:rotate(180deg);color:var(--nm)}
body.vo11 .vo-pop-ud .vo-mod .vo-ud-so{margin-left:auto;font-family:var(--font);font-size:11px;font-weight:400;color:var(--chu-5)}
body.vo11 .vo-pop-ud .vo-mod .vo-ud-mui{display:grid;color:var(--chu-5)}
body.vo11 .vo-pop-ud .vo-ban-lui{display:flex;align-items:center;gap:8px;padding:4px 4px 0}
body.vo11 .vo-pop-ud .vo-ban-duong{font-size:12px;color:var(--chu-5)}
body.vo11 .vo-pop-ud .vo-ban-dau{display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px 8px;border:0;border-radius:6px;background:transparent;color:var(--chu);text-align:left;cursor:pointer}
body.vo11 .vo-pop-ud .vo-ban-dau:hover{background:var(--chim)}
body.vo11 .vo-pop-ud .vo-ban-ten{display:flex;flex-direction:column;min-width:0}
body.vo11 .vo-pop-ud .vo-ban-ten b{font-family:var(--font-doc);font-size:15px;line-height:20px;font-weight:600}
body.vo11 .vo-pop-ud .vo-ban-ten small{font-size:12px;line-height:16px;color:var(--chu-4)}
body.vo11 .vo-pop-ud .vo-ban-vao{margin-left:auto;font-size:12px;color:var(--nhan);white-space:nowrap}
body.vo11 .vo-pop-ud .vo-luoi-ban{display:grid;gap:4px 16px;padding:4px 8px 8px;max-width:calc(100vw - 32px)}
body.vo11 .vo-pop-ud .vo-man{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:32px;padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--chu);text-align:left;cursor:pointer}
body.vo11 .vo-pop-ud .vo-man:hover{background:var(--chim)}
body.vo11 .vo-pop-ud .vo-man-bt{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;background:var(--chim);color:var(--chu-3)}
body.vo11 .vo-pop-ud .vo-man-chu{display:flex;flex-direction:column;min-width:0;padding-top:4px}
body.vo11 .vo-pop-ud .vo-man-ten{font-family:var(--font-doc);font-size:13px;line-height:17px}
body.vo11 .vo-pop-ud .vo-man-mt{font-size:12px;line-height:15px;color:var(--chu-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.vo11 .vo-pop-ud .vo-man[aria-current="true"]{background:var(--nm-nhat)}
body.vo11 .vo-pop-ud .vo-man[aria-current="true"] .vo-man-ten{color:var(--nm);font-weight:600}
body.vo11 .vo-pop-ud .vo-man[aria-current="true"] .vo-man-bt{background:var(--nm);color:var(--nhan-chu)}
body.vo11 .vo-pop-ud .vo-ban-chan{display:flex;align-items:center;gap:8px}
body.vo11 .vo-pop-ud .vo-ban-nut{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:6px 8px;border-radius:6px;color:var(--chu-3);font:inherit;font-size:12px;cursor:pointer}
body.vo11 .vo-pop-ud .vo-ban-nut:hover{background:var(--chim);color:var(--chu)}
body.vo11 .vo-pop-ud .vo-ban-phim{margin-left:auto;font-size:11px;color:var(--chu-5)}
body.vo11 .vo-pop-ud .vo-ban-phim kbd{font-family:var(--font);font-size:11px;border:.5px solid var(--vien);border-radius:4px;padding:0 4px;background:var(--mo)}

/* ⑨ CỠ MÀN — ≥ 1280: cây đủ 240px · 1024–1279: cây thành dải 52px, mở ra thì đè
      lên trang · ≤ 768: vỏ điện thoại (_shared/mobile.js), vỏ này không gắn */
@media (max-width:1279px){
body.vo11 .vo-hubk{padding-left:52px}
body.vo11 .vo-hubk .kg-ben.ben{position:absolute;left:0;top:0;bottom:0;z-index:30}
body.vo11 .vo-hubk .kg-ben.ben:not(.kg-mo-tay){width:52px}
body.vo11 .vo-hubk .kg-ben.ben.kg-mo-tay{box-shadow:var(--bong),inset 0 2px 0 var(--nm)}
body.vo11 .vo-hubk .kg-ben:not(.kg-mo-tay) :is(.ten,.tim,.nhom-ben,.muc>span:not(.bt),.muc .dem){display:none}
body.vo11 .vo-hubk .kg-ben:not(.kg-mo-tay) .dau{flex-direction:column;padding:10px 4px 12px}
body.vo11 .vo-hubk .kg-ben:not(.kg-mo-tay) .muc{justify-content:center;padding:0}
body.vo11 .vo-hubk .kg-ben:not(.kg-mo-tay) .kg-thu-mo{margin-left:0;transform:none}
body.vo11 .vo-hubk .kg-ben:not(.kg-mo-tay) :is(.kg-doi-mod,.kg-chan-sp){display:none}
body.vo11 .vo-hubk .kg-ben:not(.kg-mo-tay) .kg-chan-hang{flex-direction:column}
body.vo11 .vo-hubk .hubk-trang{padding:16px}
body.vo11 .vo-tim span:not(.kbd),body.vo11 .vo-tim .kbd{display:none}
}
@media (min-width:1280px){
body.vo11 .vo-hubk .kg-ben.kg-thu{width:52px}
}

/* ⑩ CHẠM — máy tính bảng: nút 36px · mục cây, tab 40px (nấc CHẠM của VO) */
@media (pointer:coarse){
body.vo11 .tb-mod{height:36px}
body.vo11 :is(.vo-nut,#tbb-btn,.vo-tim){height:36px;min-width:36px}
body.vo11 .vo-hubk .kg-ben .muc,body.vo11 .vo-tabtrang button{height:40px}
body.vo11 .tb-ud-btn{height:40px}
}
@media (prefers-reduced-motion:reduce){body.vo11 *{transition:none!important}}
