/* The app read through one design set (giaodien.js puts shadcn's variables on <html> as --sc-…; giaodien-phongcach.css, generated, gives
   each of the 8 styles its buttons, inputs, cards, tables, tabs, dialogs, menus). This file only:
   1. the radius ladder of shadcn (globals.css: sm ×0.6, md ×0.8, lg ×1, xl ×1.4, 2xl ×1.8, 3xl ×2.2, 4xl ×2.6);
   2. the app's own variable names read from the set, in one place (the screens keep writing var(--text), var(--line)…);
   3. the old glass look taken off (theme.css draws frosted layers that the set has no place for);
   4. the frame (menu on the set's sidebar colours, the page one sheet: shadcn's inset sidebar) and the pieces of the app that shadcn has no
      class for (the menu's parent rows, the file pages, the left lists, the facts of a file, the Sẵn kho band), all from the set's variables.
   Owner 27/10/2026 (Q144): "các themes cũ mày bỏ hết đi, giữ lại mình mục mẫu giao diện … theo link tao gửi thì mọi thứ đều có list có bộ". */

/* ---------- 1. radius ladder ---------- */
:root { --sc-radius-sm: calc(var(--sc-radius) * .6); --sc-radius-md: calc(var(--sc-radius) * .8); --sc-radius-lg: var(--sc-radius);
  --sc-radius-xl: calc(var(--sc-radius) * 1.4); --sc-radius-2xl: calc(var(--sc-radius) * 1.8); --sc-radius-3xl: calc(var(--sc-radius) * 2.2); --sc-radius-4xl: calc(var(--sc-radius) * 2.6);
  --card-spacing: 1.5rem; }

/* ---------- 2. the app's names, from the set ---------- */
html[data-ui-style]:not(#_) {
  --theme: var(--sc-primary); --theme-hover: color-mix(in oklch, var(--sc-primary) 85%, black); --theme-soft: var(--sc-accent); --theme-line: var(--sc-border);
  /* --text-2 is the old look's grey words (app.css #5B687A): the set's grey, not a third shade between black and grey (U-08) */
  --text: var(--sc-foreground); --text-2: var(--sc-muted-foreground); --muted: var(--sc-muted-foreground);
  /* the focus ring: the set's ring is 2.6:1 on white, under the 3:1 a ring needs; its grey words colour holds 4.8:1 light, 6.8:1 dark */
  --sc-ring: var(--sc-muted-foreground); --sc-sidebar-ring: var(--sc-muted-foreground);
  --placeholder: color-mix(in oklch, var(--sc-muted-foreground) 70%, var(--sc-background));
  --page: var(--sc-sidebar); --panel: var(--sc-card); --panel-2: var(--sc-card); --glass: var(--sc-card); --glass-strong: var(--sc-popover); --glass-border: var(--sc-border);
  --line: var(--sc-border); --line-2: var(--sc-border); --input: var(--sc-input); --float-border: var(--sc-border);
  --hover: color-mix(in oklch, var(--sc-muted) 50%, transparent); --selected: var(--sc-accent); --readonly: var(--sc-muted); --fill: var(--sc-muted);
  --red: var(--sc-destructive); --bar-a: var(--sc-chart-2); --bar-b: var(--sc-chart-3);
  /* the app's own accents (shadcn has none): one colour, the set's primary; ok / warn words in plain text, only bad in red (U-08, Q140) */
  --blue: var(--sc-primary); --violet: var(--sc-primary); --teal: var(--sc-primary); --cyan: var(--sc-primary);
  --blue-soft: color-mix(in oklch, var(--sc-primary) 12%, transparent); --violet-soft: color-mix(in oklch, var(--sc-primary) 12%, transparent);
  --green: var(--sc-foreground); --green-text: var(--sc-foreground); --orange: var(--sc-foreground); --yellow: var(--sc-foreground);
  --green-soft: var(--sc-muted); --orange-soft: var(--sc-muted); --yellow-soft: var(--sc-muted);
  --red-soft: color-mix(in oklch, var(--sc-destructive) 12%, transparent); --grey-tag: var(--sc-muted-foreground);
  --glass-shadow: none; --shadow-pane: none; --shadow-widget: none; --bg-image: none; --blur: none; --r: var(--sc-radius-md); --r-lg: var(--sc-radius-xl);
  --shadow-pop: 0 10px 15px -3px rgb(0 0 0 / .16), 0 4px 6px -4px rgb(0 0 0 / .16); --shadow-dialog: 0 25px 50px -12px rgb(0 0 0 / .4);
  /* the old look's frosted floats (theme.css: column filter, print preview, board tools, chips) get the set's solid popover */
  --float-bg: var(--sc-popover); --float-border: var(--sc-border); --float-blur: none; --tk-pin-bg: var(--sc-card);
  color-scheme: light;
}
html[data-ui-style][data-mode="dark"] { color-scheme: dark; }

/* ---------- 3. no glass ---------- */
html[data-ui-style] *, html[data-ui-style] *::before, html[data-ui-style] *::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui-style] body { background: var(--sc-sidebar) !important; background-image: none !important; color: var(--sc-foreground); font-family: var(--font-sans) !important; }
html[data-ui-style] body::before, html[data-ui-style] body::after { display: none !important; }
html[data-ui-style] :is(.side, .pane, .dialog, .hs-list, .hs-tap, .pt-card, .wg, .pop, .viewer)::before { display: none !important; }
/* the old look (theme.css) makes .side, .pane, .dialog and .viewer transparent and paints their ground on ::before, hidden above: each
   needs its ground back. .side, .pane and .dialog get theirs from the set; the file viewer is not a shadcn piece, it takes the dialog's */
html[data-ui-style] .viewer { background: var(--sc-popover) !important; color: var(--sc-popover-foreground); border-color: var(--sc-border) !important; }
/* the phone's bottom sheet (ui.js fsheet) carries its own frosted ground in theme.css */
html[data-ui-style] .fsheet { background: var(--sc-popover) !important; color: var(--sc-popover-foreground); border-color: var(--sc-border) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui-style] :is(button, input, select, textarea) { font-family: inherit; }
html[data-ui-style] :is(h1, h2, h3, .pane-title, .hs-tap-h h2, .dlg-h b, .sep-label) { font-family: var(--font-heading); }

/* ---------- 4. the frame: shadcn's inset sidebar ---------- */
html[data-ui-style] .shell { background: var(--sc-sidebar) !important; gap: 0 !important; }
html[data-ui-style] .side { background: var(--sc-sidebar) !important; color: var(--sc-sidebar-foreground) !important; border: 0 !important; box-shadow: none !important; }
html[data-ui-style] .side .app-name { color: var(--sc-sidebar-foreground) !important; font-weight: 600; }
html[data-ui-style] .side .app-icon { background: var(--sc-primary) !important; color: var(--sc-primary-foreground) !important; border-radius: var(--sc-radius-md) !important; box-shadow: none !important; }
html[data-ui-style] .side :is(.collapse-btn, .side-search svg) { color: var(--sc-muted-foreground) !important; }
/* the menu itself (search, group names, modules, their tabs, the foot) is drawn by the set's own sidebar rules (giaodien-phongcach.css,
   cn-sidebar-*); here only what shadcn's sidebar has no class for: the group padding around the rows, the words taking the row's colour,
   the fold mark of a group (owner 26/10/2026, Q131: a group folds and unfolds) */
/* the search box as shadcn's sidebar search form (blocks/sidebar-01/search-form.tsx): the box holds only the input (its place in the
   menu is the group's 8px), the input "pl-8", the magnifier "absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50" */
html[data-ui-style][data-ui-style] .side .side-search { position: relative; padding: 0 !important; margin: 0 8px 8px !important; }
html[data-ui-style] .side .side-search input { padding-left: 2rem !important; }
html[data-ui-style] .side .side-search svg { position: absolute; left: .5rem !important; top: 50% !important; transform: translateY(-50%); width: 1rem; height: 1rem; opacity: .5; color: var(--sc-sidebar-foreground) !important; pointer-events: none; }
/* the search box above a list table, the same form: the set's input rule (px-3, later in giaodien-phongcach.css) wrote over app.css's
   room for the magnifier, so the glass sat on the first letters (L-36 again, 30/10/2026); two marks weigh more than that rule */
html[data-ui-style][data-ui-style] .search-box input { padding-left: 2rem !important; }
html[data-ui-style][data-ui-style] .search-box svg { left: .5rem !important; top: 50% !important; transform: translateY(-50%); width: 1rem; height: 1rem; pointer-events: none; }
html[data-ui-style] .side .node { border-left: 0 !important; margin: 1px 8px !important; }
html[data-ui-style] .side .node .nm { color: inherit !important; font-weight: inherit !important; }
html[data-ui-style] .side .nav-sec.nav-sec-p { width: calc(100% - 16px) !important; margin: 8px 8px 0 !important; display: flex !important; align-items: center; }
html[data-ui-style] .side .nav-sec.nav-sec-p::before { color: inherit; }
html[data-ui-style] .side .nav-kid { border: 0 !important; margin-left: 0 !important; }
html[data-ui-style] .side .nav-sub { display: flex; flex-direction: column; border-left-style: solid; }
html[data-ui-style] .side .nav-sub .node.child { margin: 0 !important; display: flex; align-items: center; }
html[data-ui-style] .side .side-foot { border-top: 1px solid var(--sc-sidebar-border, var(--sc-border)) !important; background: none !important; }
/* the menu in two steps (owner 02/11/2026, Q307, sample docs/de-xuat/thanh-ben-trai.html after the bar the owner sent): a group row with
   its icon, the name heavy in the set's main colour and a small arrow at the right; its entries plain, set in to the group's words,
   no line beside them; the entry open on a light ground, heavy. Over the old rule that hid the menu's icons (app.css, 26/10/2026) */
html[data-ui-style][data-ui-style] .side .nav-grp { display: flex; flex-direction: column; margin-top: 2px; }
html[data-ui-style][data-ui-style] .side .node.nav-g { height: 34px !important; margin: 1px 8px !important; padding: 0 8px !important; gap: 8px !important; display: flex !important; align-items: center;
  font-weight: 600 !important; color: var(--sc-primary) !important; background: transparent; }
html[data-ui-style][data-ui-style] .side .node.nav-g.on { background: var(--sc-sidebar-accent) !important; }
html[data-ui-style][data-ui-style] .shell:not(.collapsed) .side-nav .node.nav-g > svg { display: inline-block !important; flex: none; width: 16px; height: 16px; color: var(--sc-primary); }
html[data-ui-style][data-ui-style] .side .node.nav-g .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui-style][data-ui-style] .side .nav-cv { display: inline-flex; margin-left: auto; color: var(--sc-muted-foreground); }
html[data-ui-style][data-ui-style] .side .nav-items { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; }
html[data-ui-style][data-ui-style] .side .nav-items .node.child { height: 32px !important; margin: 0 8px !important; padding: 0 8px 0 32px !important; display: flex !important; align-items: center;
  font-weight: 400 !important; color: var(--sc-sidebar-foreground) !important; border-radius: var(--sc-radius-md) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui-style][data-ui-style] .side .nav-items .node.child:hover { background: var(--sc-sidebar-accent) !important; }
html[data-ui-style][data-ui-style] .side .nav-items .node.child.on { background: var(--sc-sidebar-accent) !important; color: var(--sc-primary) !important; font-weight: 600 !important; }
html[data-ui-style][data-ui-style] .shell.collapsed .side :is(.nav-items, .nav-cv) { display: none !important; }
/* the canvas as /create shows a set: the pane on the set's muted ground, the cards, tables and the head bar on its card colour (owner
   27/10/2026: "màu nền … rất mờ nhạt ở chế độ sáng, gần như không thấy gì; và rất tối (thậm chí mày để luôn màu đen) ở chế độ tối") */
html[data-ui-style] .pane { background: var(--sc-muted) !important; margin: 8px 8px 8px 0 !important; border-radius: var(--sc-radius-2xl) !important;
  border: 0 !important; box-shadow: 0 0 0 1px color-mix(in oklch, var(--sc-foreground) 8%, transparent), 0 1px 3px 0 rgb(0 0 0 / .16) !important; }
html[data-ui-style] .pane-head { background: var(--sc-card) !important; border-bottom: 1px solid var(--sc-border) !important; }
html[data-ui-style] .pane-title { color: var(--sc-foreground); font-weight: 500 !important; }
html[data-ui-style] .pane-body { background: var(--sc-muted); }
@media (max-width: 760px) { html[data-ui-style] .pane { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } }
/* the module tabs in the head: shadcn's "line" tabs */
html[data-ui-style] .mtabs { background: none !important; }
html[data-ui-style] .mtab { border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--sc-muted-foreground) !important; border-bottom: 2px solid transparent !important; font-weight: 500 !important; }
html[data-ui-style] .mtab:hover, html[data-ui-style] .mtab.on { color: var(--sc-foreground) !important; }
html[data-ui-style] .mtab.on { border-bottom-color: var(--sc-foreground) !important; }

/* ---------- the pieces shadcn has no class for ---------- */
/* links in the pages: the text colour, a light underline */
html[data-ui-style] :is(.pane-body, .dialog, .pop) a:not(.btn):not(.node):not(.mtab) { color: var(--sc-foreground); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--sc-foreground) 25%, transparent); text-underline-offset: 3px; }
html[data-ui-style] :is(.pane-body, .dialog, .pop) a:not(.btn):not(.node):not(.mtab):hover { text-decoration-color: var(--sc-foreground); }
/* tables: shadcn's data table sits in one bordered frame; a table inside a card takes none */
html[data-ui-style] :is(.grid-wrap, .tbl-box, .hs-scroll) { border: 1px solid var(--sc-border) !important; border-radius: var(--sc-radius-lg) !important; background: var(--sc-card) !important; box-shadow: none !important; overflow: auto; }
html[data-ui-style] :is(.wg, .doc-card, .board-card, .task-sum, .ds-blk) :is(.grid-wrap, .tbl-box, .hs-scroll) { border: 0 !important; border-radius: 0 !important; }
html[data-ui-style] table { border-collapse: collapse !important; }
html[data-ui-style] table tbody tr:hover > td { background: color-mix(in oklch, var(--sc-muted) 50%, transparent) !important; }
/* every table of the app ruled as the accounting book (owner 30/10/2026 on sample 1, ORD2608-01 and kho HANA: "Ổn hơn hẳn đấy, áp dụng
   cho các bảng trong app đi"): lines down and across, the heading on a grey ground and centred, 13px, a tight inset, no line breaks; a
   product name plain, only a group row and the Tổng row heavy. Three marks: the set's generated table rules weigh more and come later.
   The left lists and .so-kt keep their own rules. Owner 31/10/2026 ("xấu quá … chưa đủ chiều cao mỗi dòng", by button: "30px-> 35px;
   chữ 13px giữ nguyên"): a row 35px high, the text still 13px. */
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) :is(th, td) { border: 1px solid var(--sc-border) !important;
  padding-top: 7.5px !important; padding-bottom: 7.5px !important; padding-right: 8px !important; height: auto !important; font-size: 13px !important; line-height: 1.45; white-space: nowrap; }
html[data-ui-style][data-ui-style] table :is(th, td) { padding-left: 8px !important; }
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) th { background: color-mix(in oklch, var(--sc-foreground) 6%, var(--sc-card)) !important; color: var(--sc-foreground) !important; font-weight: 600 !important; text-align: center !important; vertical-align: middle; }
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) tr > :first-child { border-left: 0 !important; }
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) tr > :last-child { border-right: 0 !important; }
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) > :first-child > tr:first-child > * { border-top: 0 !important; }
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) > :last-child > tr:last-child > * { border-bottom: 0 !important; }
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) :is(tfoot tr, tr.pt-tot, tr.ord-tot) { background: none !important; }
html[data-ui-style][data-ui-style][data-ui-style] table:not(:is(.pt-left, .so-kt) table) :is(tfoot tr, tr.pt-tot, tr.ord-tot) > td { background: none !important; font-weight: 700 !important; }
/* a narrow frame (owner 01/11/2026 on ORD2608-01 at 1440px, Q302 "Cách B"): a column heading may take two lines, a product name stays
   whole, a long Diễn giải (td.dg) stops at 260px with "…" and shows whole on hover (ui.js puts the words in its title). On a phone the
   table slides sideways anyway and a heading in two lines only made the heading row tall: there it stays on one line */
@media (min-width: 769px) { html[data-ui-style][data-ui-style][data-ui-style] table.hs-t thead th { white-space: normal; } }
html[data-ui-style][data-ui-style][data-ui-style] table.hs-t td.dg { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* a group row is one cell across the whole row; a product row stays plain even when its name spans a few columns (ORD Hóa đơn spans
   Ngày HĐ · Số HĐ · PXK and was heavy while the same row in Nhận thành phẩm was plain; owner 30/10/2026: "bảng bôi đậm bảng chữ thường") */
html[data-ui-style][data-ui-style][data-ui-style] .pt-t tr.pt-par:not(:has(> td:only-child)) > td,
html[data-ui-style][data-ui-style][data-ui-style] .pt-t tr.pt-par:not(:has(> td:only-child)) > td :is(a, b, strong) { font-weight: 400 !important; }
html[data-ui-style][data-ui-style][data-ui-style] .pt-t tr.pt-par:has(> td:only-child) > td { font-weight: 700 !important; }
/* inside a cell a number or a code weighs what its row weighs (ORD Hồ sơ had PXK, HĐ, lô, PNK heavy in plain rows; U-08) */
html[data-ui-style][data-ui-style][data-ui-style] table:not(.so-kt) tbody td :is(b, strong, .no) { font-weight: inherit !important; }
html[data-ui-style] table tr.pt-par > td { font-weight: 600; }
html[data-ui-style] table tr.pt-kid > td { color: var(--sc-muted-foreground); }
/* Q394 (owner 03/11/2026: "2 dòng này đổi màu đi 1 chút, để như này không phân biệt phần chính phần phụ. Rà soát toàn app"): the main row
   of a group and its difference row on a soft ground, the detail rows under it plain; replaces U-08's "no ground" for these rows */
html[data-ui-style] table :is(tr.pt-par, tr.pt-lech, tr.mt-band-0, tr.mt-sub) > td { background: var(--row-main); }
html[data-ui-style] table tr.pt-lech > td { color: var(--sc-foreground); }
html[data-ui-style] table.pt-fix tr:not(.pt-par, .pt-lech, .pt-tot) > td:is(.pt-f1, .pt-f2, .pt-f3) { background: var(--sc-card); }
html[data-ui-style][data-ui-style][data-ui-style] table.pt-fix :is(th, td).pt-f1 { white-space: normal; }
html[data-ui-style] table.pt-fix tr.pt-tot > td:is(.pt-f1, .pt-f2, .pt-f3) { background: var(--sc-card) !important; }
html[data-ui-style] table tr.pt-fold:hover > td { background: color-mix(in oklch, var(--sc-foreground) 9%, var(--sc-card)); }
html[data-ui-style] { --row-main: color-mix(in oklch, var(--sc-foreground) 4%, var(--sc-card)); }
html[data-ui-style] table tr.pt-kid > td:first-child { padding-left: 28px !important; }
/* status words: the app's coloured tags become the set's outline badge; red stays the set's red */
html[data-ui-style] .tag { background: transparent !important; border: 1px solid var(--sc-border) !important; color: var(--sc-foreground) !important; }
html[data-ui-style] .tag.red { color: var(--sc-destructive) !important; border-color: color-mix(in oklch, var(--sc-destructive) 40%, transparent) !important; }
/* the compartment row: the tabs (they scroll on a phone) and, at its right end, the one "+" of the compartment (ui.js AddMenu, Q225) */
html[data-ui-style] .pt-subs-row { display: flex; align-items: center; gap: 8px; }
html[data-ui-style] .pt-subs-row > .pt-subs { flex: 1 1 auto; min-width: 0; }
html[data-ui-style] .pt-subs-row > .pop-anchor { flex: none; position: relative; }
html[data-ui-style][data-ui-style] .btn.add-menu { width: 2rem; padding: 0 !important; justify-content: center; }
html[data-ui-style] .add-menu-pop { min-width: 200px; }
/* the set of papers of a record (ui.js DocsPanel, owner 30/10/2026): a ruled table STT · Giấy tờ · Tình trạng · File · actions with
   a Cộng row; "Đã gửi kế toán" and "+ Giấy khác" on one line under it */
html[data-ui-style] .doc-set { display: block; margin-bottom: 8px; }
/* the table is as wide as its box; on a phone it slides sideways in .hs-scroll (no line breaks in tables) and the "+" menu floats over it (Pop) */
html[data-ui-style][data-ui-style] table.doc-tbl { min-width: 0; width: 100%; }
html[data-ui-style] table.doc-tbl :is(th, td) { vertical-align: middle; }
html[data-ui-style] table.doc-tbl .dt-n { width: 44px; text-align: right; }
html[data-ui-style] table.doc-tbl .dt-s { width: 88px; text-align: center; }
html[data-ui-style] table.doc-tbl .dt-c { width: 72px; text-align: right; }
html[data-ui-style] table.doc-tbl .dt-a { width: 48px; text-align: center; }
html[data-ui-style] table.doc-tbl .dt-a .pop-anchor { display: inline-block; position: relative; }
/* the record's right column scrolls as one: the notes are not cut to half its height in a box of their own with its own
   scroll bars (owner 31/10/2026 on ORD2608-01: "cuọn này bỏ đi này, giới hạn hiển thị làm gì?"); as on a phone (theme.css) */
html[data-ui-style] .rec-side { overflow-x: hidden; overflow-y: auto; }
html[data-ui-style] .rec-side :is(.side-notes-top, .rec-side-b) { max-height: none; overflow: visible; flex: none; min-width: 0; }
html[data-ui-style] .rec-side .side-rest { flex: none; }
/* a record's own facts at the top of its right column (ORD, owner 31/10/2026 preview 3): one a line, the name left, the value right on
   one line; then Lưu ý under a line */
html[data-ui-style] .rec-side .side-facts { padding: 12px 14px 10px; border-bottom: 1px solid var(--sc-border); display: grid; gap: 4px; }
/* a value that does not fit beside its label moves whole to the next line, right-aligned — a number is never cut or broken (Q247) */
html[data-ui-style] .rec-side .sf-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: 13px; line-height: 1.5; }
html[data-ui-style] .rec-side .sf-l { flex: 0 1 auto; color: var(--sc-muted-foreground); }
html[data-ui-style] .rec-side .sf-v { flex: 0 0 auto; margin-left: auto; max-width: 100%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui-style] .rec-side .side-flow { padding: 10px 14px; border-bottom: 1px solid var(--sc-border); }
/* a note's head (its kind, then Đã xử lý · pin · sửa · xóa) goes onto two lines in the narrow column instead of running off its right edge */
html[data-ui-style] .rec-side .nt-top { flex-wrap: wrap; row-gap: 4px; }
/* Q229 (phương án A): the two parts of the block, then the files grouped by paper */
html[data-ui-style] .doc-sec { font-size: 14px; font-weight: 600; color: var(--sc-foreground); }
html[data-ui-style] .doc-set > .doc-sec { margin-bottom: 6px; }
html[data-ui-style] .doc-grp { font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
html[data-ui-style] .doc-grp .muted { font-weight: 400; }
html[data-ui-style] .doc-set-foot { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
html[data-ui-style] .doc-set-foot .cl-i.sent { margin: 0; display: flex; align-items: center; gap: 6px; background: none !important; padding: 0; }
/* an item code opens nothing (peek.js, owner 30/10/2026: "TAO KHÔNG CẦN HIỆN RA CÁI GÌ HẾT"), so it is written as plain words; the menu
   and the search box still go to an item */
html[data-ui-style][data-ui-style] a[href^="/items/"]:not(:is(.side, nav, .search-dlg) a),
html[data-ui-style][data-ui-style] a[href^="/items/"]:not(:is(.side, nav, .search-dlg) a):hover { color: inherit !important; text-decoration: none !important; cursor: inherit !important; }
/* inside a table only black and grey (U-08; owner 30/10/2026, asked "Chữ và nhãn màu đỏ trong bảng số giữ hay bỏ?": "Bỏ, chỉ đen xám"):
   a short figure (.neg), a status word (.tag) and the other coloured words keep their place and sign, lose the colour; links and
   buttons (Xóa) keep theirs. The accounting book .so-kt has its own fixed colours (Q201). */
html[data-ui-style][data-ui-style][data-ui-style] table:not(.so-kt) :is(td, th) :is(.neg, .pos, .ok-t, .tag, .lot-diff, .danger-t, .bom-ch, .conv.odd, .docs-b),
html[data-ui-style][data-ui-style][data-ui-style] table:not(.so-kt) td.imp-err { color: var(--sc-foreground) !important; background: transparent !important; border-color: var(--sc-border) !important; }
/* cards: the figure large, the words small and grey; a card that opens the compartment shown is ringed in the main colour */
html[data-ui-style] :is(.kpi-mini .l, .pt-ans .k, .pt-box .k) { color: var(--sc-muted-foreground); font-size: .875rem !important; }
/* the figure of the four cards at the head of a page: text-lg on every screen (owner 27/10/2026, Q158, on AMZ24 at ~1500px: "chữ số to như con voi thế này à?" — 24px was cut at the card's edge) */
html[data-ui-style] :is(.kpi-mini .v, .pt-ans .v) { font-size: 1.125rem !important; font-weight: 600; letter-spacing: -.01em; color: var(--sc-card-foreground); }
html[data-ui-style] :is(.kpi-mini .s, .pt-ans .h) { color: var(--sc-muted-foreground); font-size: .875rem !important; }
html[data-ui-style] :is(.kpi-mini.warn, .kpi-mini.ok) .v { color: var(--sc-card-foreground) !important; }
html[data-ui-style] .kpi-mini.bad .v { color: var(--sc-destructive) !important; }
html[data-ui-style] :is(.kpi-mini.on, .pt-ans .pt-card.on, .pt-box.on) { --tw-ring-color: var(--sc-primary) !important; --tw-ring-shadow: 0 0 0 2px var(--sc-primary) !important; box-shadow: var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; }
html[data-ui-style] .pt-ans { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important; }
/* a number card of the app is one block (name, figure, note), not shadcn's card of header / content / footer: its lines sit close; on a
   phone two to a row with a smaller inset (owner 27/10/2026 on the phone: "to vầy mày? kiểm tra kỹ nhé") */
html[data-ui-style][data-ui-style] :is(.kpi-mini, .pt-ans .pt-card, .pt-box) { gap: 4px !important; }
@media (max-width: 600px) {
  html[data-ui-style] .pt-ans { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-ui-style][data-ui-style] :is(.kpi-mini, .pt-ans .pt-card, .pt-box) { --card-spacing: .875rem !important; }
}
/* the file pages (ORD, PO, Kho, Công nợ): one sheet, nothing framed inside but its cards and tables */
html[data-ui-style] :is(.hs-list, .hs-tap, .hs-ngan) { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html[data-ui-style] .pt-app :is(.hs-list, .hs-tap) { padding: 0 !important; }
html[data-ui-style] .pt-app { gap: 20px; }
/* the left list of a file page: on a computer it stays put with its own scroll (Q180); on a phone it is one column and runs its full
   length. Owner 31/10/2026 ("bên trái và bên phải cố định kt màn hình đi, còn lại cuộn, nhảy nhót nhức mắt mất tập trung"): on a
   computer the page itself no longer scrolls, the left list and the file on the right fill the screen's height, each with its own scroll;
   a table inside the file has no scroll of its own up and down (one scroll on the right) */
@media (min-width: 761px) {
  html[data-ui-style] .pane-body:has(> .pt-app) { overflow: hidden; display: flex; flex-direction: column; }
  html[data-ui-style] .pane-body > .pt-app { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  html[data-ui-style] .pt-app > :is(.hs-list, .hs-tap) { position: static; align-self: stretch; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  html[data-ui-style] .pt-app > .hs-list { overflow-x: hidden; }
  html[data-ui-style] .pt-app > :is(.hs-list, .hs-tap) { align-content: start; }
  /* its own scroll clips what stands out of its edge (the ring of the picked card, 2px): a little room, given back by the margin */
  html[data-ui-style][data-ui-style] .pt-app > .hs-tap { padding: 4px !important; margin: -4px; }
  html[data-ui-style] .pt-app .hs-tap .hs-scroll { max-height: none; }
}
@media (max-width: 760px) { html[data-ui-style] .pt-app .hs-list { max-height: none; } }
html[data-ui-style] .hs-tap { gap: 16px; } html[data-ui-style] .hs-ngan { display: grid; gap: 10px; }
html[data-ui-style] .hs-ngan-h { background: none !important; padding: 0 !important; min-height: 0; }
html[data-ui-style] .hs-ngan-h:not(:has(button)) { display: none; }
html[data-ui-style] .hs-tap-h h2 { font-size: 1.5rem !important; font-weight: 600; letter-spacing: -.01em; }
html[data-ui-style] .hs-tap-h h2 a { text-decoration: none !important; }
/* HỒ SƠ: the app's warnings under a paper and in "App đối chiếu" in black, not red (U-08; owner 27/10/2026 chose the preview) */
html[data-ui-style] :is(.hs-p .warn, .hs-n) { color: var(--sc-foreground); }
.pt-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.pt-facts > div { display: grid; gap: 2px; } .pt-facts dt { font-size: 12px; color: var(--muted); } .pt-facts dd { margin: 0; font-weight: 500; }
.pt-n { font-size: .75rem; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: color-mix(in oklch, var(--line) 60%, var(--panel)); color: var(--muted); display: inline-grid; place-items: center; font-weight: 500; }
html[data-ui-style] .pt-subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 0; border-bottom: 0 !important; }
html[data-ui-style] .pt-subs::-webkit-scrollbar { display: none; }
html[data-ui-style] .pt-subs button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* the list of files on the left of a file page, and the other left lists: no frame; the one shown on the set's accent */
html[data-ui-style] .pt-left :is(.tbl-box, .mt-wrap) { border: 0 !important; background: none !important; box-shadow: none !important; }
html[data-ui-style] .pt-left table :is(th, td) { border: 0 !important; }
html[data-ui-style] .pt-left table th { color: var(--sc-muted-foreground) !important; font-weight: 500 !important; font-size: .875rem !important; }
html[data-ui-style] .pt-left table td { background: none !important; border-radius: var(--sc-radius-md); }
html[data-ui-style] .pt-left td:has(.ord-cur) { background: var(--sc-accent) !important; box-shadow: none !important; }
html[data-ui-style] .pt-left a { text-decoration: none !important; font-weight: 500; }
html[data-ui-style] .hs-it { border-radius: var(--sc-radius-md) !important; outline: 0 !important; box-shadow: none !important; }
html[data-ui-style] .hs-it:hover { background: color-mix(in oklch, var(--sc-muted) 60%, transparent) !important; }
html[data-ui-style] :is(.hs-it.on, .pt-tree .o.on) { background: var(--sc-accent) !important; color: var(--sc-accent-foreground); box-shadow: none !important; border-color: transparent !important; }
/* notes on the right of a file */
html[data-ui-style] .pt-side textarea { background: var(--sc-card) !important; border: 1px solid var(--sc-input) !important; border-radius: var(--sc-radius-lg) !important; box-shadow: none !important; padding: 8px 10px; }
html[data-ui-style] .pt-side textarea:focus { border-color: var(--sc-ring) !important; outline: 0; }
/* the Sẵn kho group of the packaging check (owner 27/10/2026 chose "tô màu nhạt"): a pale band from the heading down */
html[data-ui-style] .pack-split table :is(td, th).sk { background: color-mix(in oklch, var(--sc-muted) 70%, transparent) !important; }
html[data-ui-style] .pack-split table th.pack-grp { text-align: center !important; }
/* dialogs and forms: header and footer on the set's background, ruled */
html[data-ui-style] .dlg-h { background: transparent !important; border-bottom: 1px solid var(--sc-border) !important; }
html[data-ui-style] :is(.form-foot, .dlg-f) { background: transparent !important; border-top: 1px solid var(--sc-border) !important; }
html[data-ui-style] .sep-label { color: var(--sc-foreground) !important; font-weight: 600 !important; }
html[data-ui-style] .sep-label::before { display: none !important; }
html[data-ui-style] .ro { background: var(--sc-muted) !important; border-radius: var(--sc-radius-md); }
/* menus: the set's popover; "trong mờ" as shadcn's cn-menu-translucent (70% ground, a blur behind) */
html[data-ui-style] :is(.pop-item.on, .pop-item:hover, .sel-o.on, .sel-o:hover) { background: var(--sc-accent) !important; color: var(--sc-accent-foreground) !important; }
html[data-ui-style][data-menu$="translucent"] :is(.pop, .cf-pop, .sel-pop) { background: color-mix(in oklch, var(--sc-popover) 70%, transparent) !important; -webkit-backdrop-filter: blur(40px) saturate(1.5) !important; backdrop-filter: blur(40px) saturate(1.5) !important; }
html[data-ui-style][data-menu^="inverted"] :is(.pop, .cf-pop, .sel-pop) { color: var(--sc-popover-foreground) !important; }
/* charts and progress: the set's chart colours and main colour */
html[data-ui-style] .prog { background: color-mix(in oklch, var(--sc-primary) 20%, transparent) !important; }
html[data-ui-style] .prog-bar { background: var(--sc-primary) !important; }
html[data-ui-style] .prog-bar.over { background: var(--sc-destructive) !important; }
html[data-ui-style] .chart .gl { stroke: var(--sc-border); }
html[data-ui-style] .chart text { fill: var(--sc-muted-foreground); }

/* ---------- what the old look still drew by hand (found by scanning every screen, light and dark, 27/10/2026) ---------- */
/* a card is drawn by its ring (shadcn), never by the old glass border */
html[data-ui-style] :is(.kpi-mini, .pt-ans .pt-card, .pt-box, .wg, .doc-card, .board-card, .task-sum, .pack-card) { border-color: transparent !important; }
/* lines inside tables: the set's border, never the colour of the words (the white lines in the dark) */
html[data-ui-style] :is(.pt-t tr.pt-par td, .pt-t tr.pt-tot td, .tree-tbl tr td) { border-color: var(--sc-border) !important; }
/* MergeTable { band } columns (Q250): the parent as a row across the table — the first level bold, the next ones grey (U-08) */
html[data-ui-style] .tree-tbl tr.mt-band > td { border-top: 1px solid var(--sc-border); }
html[data-ui-style] .tree-tbl tr.mt-band-0 > td { font-weight: 600; color: var(--sc-foreground); }
html[data-ui-style] .tree-tbl tr.mt-band-1 > td { font-weight: 400; color: var(--sc-muted-foreground); padding-left: 20px; }
html[data-ui-style] .tree-tbl tr.mt-tree-h > td { background: color-mix(in oklch, var(--sc-muted) 50%, transparent) !important; }
html[data-ui-style] .info-i { background: transparent !important; border-color: var(--sc-border) !important; color: var(--sc-muted-foreground) !important; }
html[data-ui-style] :is(.info-i:hover, .info-i.on) { background: var(--sc-primary) !important; border-color: var(--sc-primary) !important; color: var(--sc-primary-foreground) !important; }
html[data-ui-style] :is(.pager button, .pager .pg) { background: var(--sc-card) !important; border-color: var(--sc-border) !important; color: var(--sc-foreground) !important; }
html[data-ui-style] .th-tools { background: transparent !important; }
html[data-ui-style] .dp-clip { background: color-mix(in oklch, var(--sc-primary) 10%, transparent) !important; color: var(--sc-primary) !important; }
html[data-ui-style] .hs-bar { background: var(--sc-muted) !important; } html[data-ui-style] .hs-bar i { background: var(--sc-primary) !important; }
html[data-ui-style] :is(input, textarea, select) { color: var(--sc-foreground); }
/* shadcn's base layer (app/globals.css: "* { @apply border-border outline-ring/50 }"): a line with no colour of its own takes the set's
   border, never the colour of the words; :where() keeps it below every rule of the app that names a colour */
:where(html[data-ui-style]) :where(*, *::before, *::after) { border-color: var(--sc-border); outline-color: color-mix(in oklch, var(--sc-ring) 50%, transparent); }

/* the pieces shadcn draws without a class of its own here (Q147) */
html[data-ui-style] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--sc-primary); }
html[data-ui-style] .sep { border-bottom-color: var(--sc-border) !important; } html[data-ui-style] .sep-label::before { background: var(--sc-primary) !important; }
html[data-ui-style] .spinner { border-color: var(--sc-border) !important; border-top-color: var(--sc-primary) !important; }
html[data-ui-style] .chart text { fill: var(--sc-muted-foreground) !important; }
html[data-ui-style] .toast { background: var(--sc-popover) !important; color: var(--sc-popover-foreground) !important; border: 0 !important; border-radius: var(--sc-radius-xl) !important;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--sc-foreground) 10%, transparent), 0 10px 15px -3px rgb(0 0 0 / .16) !important; }
html[data-ui-style] .toast::before { background: var(--sc-primary) !important; color: var(--sc-primary-foreground) !important; }
html[data-ui-style] .toast.err::before { background: var(--sc-destructive) !important; color: #fff !important; }
/* the calendar's days as shadcn's (calendar.tsx): plain, today on muted, the chosen one on the primary colour */
html[data-ui-style] .cal-d { border-radius: var(--sc-radius-md) !important; color: var(--sc-foreground) !important; box-shadow: none !important; }
html[data-ui-style] .cal-d:hover { background: var(--sc-accent) !important; color: var(--sc-accent-foreground) !important; }
html[data-ui-style] .cal-d.today { background: var(--sc-muted) !important; font-weight: 500; }
html[data-ui-style] .cal-d.on { background: var(--sc-primary) !important; color: var(--sc-primary-foreground) !important; }
/* parent and child, one rule for the menu and for every tree on the pages (owner 27/10/2026: "tao không thể phân biệt nổi đâu là mục
   mẹ đâu là mục con … Mục mẹ và mục con có ở cả trang phân hệ lẫn trang thực thi"; "mũi tên quá rối, tao không cần mũi tên"; chosen from
   the second sample): a parent in 14px, heavier; its children set in one step, 14px, plain; a grandchild one step more; only the page
   that is open is marked. The menu keeps its line down the children (shadcn's sub menu, Q145); the tables have none (owner 21/10/2026:
   "bỏ ngay cái que vô duyên này"). A parent still folds and unfolds by a click on its row. */
html[data-ui-style][data-ui-style] .side .nav-sec.nav-sec-p { height: 36px !important; padding: 0 12px !important; font-size: .875rem !important; font-weight: 600 !important;
  color: var(--sc-sidebar-foreground) !important; border-radius: var(--sc-radius-lg) !important; display: flex !important; align-items: center; text-transform: none !important; letter-spacing: 0 !important; }
html[data-ui-style][data-ui-style] .side .nav-sec.nav-sec-p:hover { background: var(--sc-sidebar-accent) !important; }
html[data-ui-style][data-ui-style] .side .nav-sec.nav-sec-p::after { content: none !important; }
html[data-ui-style][data-ui-style] .side .nav-kid { border-left: 1px solid var(--sc-sidebar-border) !important; margin: 0 14px 0 22px !important; padding: 2px 0 2px 10px !important; display: flex; flex-direction: column; gap: 1px; }
html[data-ui-style][data-ui-style] .side .nav-kid > .node, html[data-ui-style][data-ui-style] .side .nav-kid > div > .node { height: 28px !important; margin: 0 !important; padding: 0 8px !important; font-weight: 400 !important; border-radius: var(--sc-radius-md) !important; }
html[data-ui-style][data-ui-style] .side .nav-kid .nav-sub { margin: 0 0 0 12px !important; padding: 2px 0 2px 10px !important; }
html[data-ui-style] .side div:has(> .nav-sub .node.child.on) > .node.on { background: transparent !important; color: var(--sc-sidebar-foreground) !important; font-weight: 400 !important; }
html[data-ui-style] .side div:has(> .nav-sub .node.child.on) > .node.on:hover { background: var(--sc-sidebar-accent) !important; }
html[data-ui-style][data-ui-style] .tree-tbl tr.mt-tree-h > td[data-col="0"] .tree-b > :is(b, a, strong, span):first-child { font-size: .875rem !important; font-weight: 600 !important; color: var(--sc-foreground) !important; }
html[data-ui-style][data-ui-style] .tree-tbl tr.mt-tree-c > td[data-col="0"] { padding-left: 32px !important; }
html[data-ui-style][data-ui-style] .tree-tbl tr.mt-tree-c > td[data-col="0"] .tree-c { padding-left: 0 !important; }
html[data-ui-style][data-ui-style] .tree-tbl tr.mt-tree-c > td[data-col="0"] .tree-b > :is(b, a, strong, span):first-child { font-size: .875rem !important; font-weight: 400 !important; }
html[data-ui-style] .pt-grpb::before { content: none !important; }
html[data-ui-style] .pt-grp { font-size: .875rem !important; font-weight: 600 !important; }
html[data-ui-style] .pt-grp ~ .pt-it { padding-left: 30px !important; }
html[data-ui-style] .pt-grp ~ .pt-it > b:first-child { font-weight: 400 !important; font-size: .875rem !important; }
/* the other folds of a parent over its children, the same rule (Q154): no mark, the parent row folds; an SO over its PXK lines */
html[data-ui-style] :is(.plan-h, .bom-sec-h) > .caret { display: none !important; }
html[data-ui-style] tr.so > td:first-child { font-weight: 600; }
html[data-ui-style] tr.so ~ tr.px > td:first-child { padding-left: 32px !important; }
/* the accounting book (Q201, owner 28/10/2026 on the Giá thành sample, light and dark: "tao khá thích cách mày show bảng như này, từ cách
   bố trí, màu, đến font chữ, cỡ chữ"): for the books and forms of new screens only, the old screens keep the set's table (owner's pick).
   <div class="so-kt"> <div class="so-kt-head"><div class="t">TÊN BẢNG</div><div class="m">kỳ</div></div>
   <div class="so-kt-tw"><table> th two tiers (rowspan / colspan) · tr.cols the column marks (A, B, 1, 2, "3 = 2 − 1") · td.n a figure ·
   td.c centred grey · tr.tot the Cộng row · tr.sel the picked row · button.so a voucher number </table></div> <div class="so-kt-foot"> */
html[data-ui-style] .so-kt { --sk-card: #ffffff; --sk-fg: #18181b; --sk-muted: #6b6b73; --sk-line: #d4d4d8; --sk-soft: #f4f4f5; --sk-link: #1d4ed8;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; min-width: 0; background: var(--sk-card); color: var(--sk-fg); border: 1px solid var(--sk-line); border-radius: 6px;
  font-family: "Be Vietnam Pro", var(--font-sans); font-size: 13px; line-height: 1.45; }
html[data-ui-style][data-mode="dark"] .so-kt { --sk-card: #18181b; --sk-fg: #f4f4f5; --sk-muted: #a1a1aa; --sk-line: #3a3a40; --sk-soft: #222226; --sk-link: #93b4f5; }
html[data-ui-style] .so-kt-head { display: grid; gap: 2px; text-align: center; }
html[data-ui-style] .so-kt-head .t { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
html[data-ui-style] .so-kt :is(.so-kt-head .m, .so-kt-foot) { color: var(--sk-muted); }
html[data-ui-style] .so-kt-foot { font-size: 12px; }
html[data-ui-style] .so-kt-tw { overflow-x: auto; border: 0 !important; border-radius: 0 !important; background: none !important; }
html[data-ui-style] .so-kt table { border-collapse: collapse !important; width: 100%; font-size: 13px; }
html[data-ui-style] .so-kt table :is(th, td) { padding: 5px 8px !important; border: 1px solid var(--sk-line) !important; text-align: left; vertical-align: top; white-space: nowrap;
  background: none !important; color: var(--sk-fg) !important; font-size: 13px !important; height: auto !important; }
html[data-ui-style] .so-kt table th { font-weight: 600 !important; background: var(--sk-soft) !important; text-align: center !important; vertical-align: middle; }
html[data-ui-style] .so-kt table td.n { text-align: right !important; font-variant-numeric: tabular-nums; }
html[data-ui-style] .so-kt table :is(td.c, tr.cols > td) { text-align: center !important; color: var(--sk-muted) !important; }
html[data-ui-style] .so-kt table tr.tot > td { font-weight: 700 !important; }
html[data-ui-style] .so-kt table tbody tr:hover > td { background: none !important; }
html[data-ui-style] .so-kt table tbody tr.sel > td, html[data-ui-style] .so-kt table tbody tr.sel:hover > td { background: var(--sk-soft) !important; }
html[data-ui-style] .so-kt button.so { font: inherit; background: none; border: 0; padding: 0; color: var(--sk-link); cursor: pointer; text-decoration: underline dotted; }
html[data-ui-style] .so-kt :is(button, select):focus-visible { outline: 2px solid var(--sk-link); outline-offset: 2px; }
/* the books of the store by the forms of TT133 (owner 01/11/2026, Q298, the Kho sample 5: S06-DNN, S07-DNN, S08-DNN, 01-VT, 02-VT, 05-VT):
   <div class="so-kt-form"><div><b>CÔNG TY …</b></div><div class="f"><b>Mẫu số S06-DNN</b><br><i>(Ban hành theo …)</i></div></div> above
   .so-kt-head; tr.grp a group row ("Bao bì (54 mã)"): one cell across, heavy, on the soft ground */
html[data-ui-style] .so-kt-form { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; }
html[data-ui-style] .so-kt-form .f { text-align: right; }
html[data-ui-style] .so-kt table tr.grp > td { font-weight: 600 !important; background: var(--sk-soft) !important; }
/* MultiSelect (ui.js, Q298 "1 ô, chọn mã nào có tick chọn mã đó"): the list of Select with a tick on each line, the code and its grey name */
html[data-ui-style] .ms-o { display: flex; align-items: center; gap: 8px; }
html[data-ui-style] .ms-o input { flex: none; margin: 0; pointer-events: none; accent-color: var(--sc-primary); }
html[data-ui-style] .ms-o .ms-l { white-space: nowrap; }
html[data-ui-style] .ms-o .ms-s { color: var(--sc-muted-foreground); min-width: 0; }
html[data-ui-style] .ms .ms-k { color: var(--sc-muted-foreground); }
/* the report blocks of Tổng quan (.wg): small and even, whatever the style's card spacing (three marks: the generated card rule weighs 0,3,1 and comes later; owner 29/10/2026: "toàn bộ các ô báo cáo của
   mày, mày làm to như con bò … 1 trang mày thể hiện phải luôn có sự hài hòa … Font chữ cũng to như con bò cái luôn") */
html[data-ui-style][data-ui-style][data-ui-style] .wg { --card-spacing: 14px !important; gap: 8px !important; border-radius: min(var(--sc-radius-lg), 10px) !important; }
html[data-ui-style][data-ui-style][data-ui-style] .wg-h { min-height: 0; padding: 0; }
html[data-ui-style][data-ui-style][data-ui-style] .wg-h h3 { font-size: 13px !important; line-height: 20px; font-weight: 600; }
html[data-ui-style][data-ui-style][data-ui-style] .wg-h a { font-size: 12px !important; }
html[data-ui-style][data-ui-style][data-ui-style] .wg-b { padding: 0; }
html[data-ui-style][data-ui-style] .big-n { font-size: 20px !important; /* text-xl: 22px was off the scale (Q150) */ font-weight: 600; line-height: 1.2; }
html[data-ui-style][data-ui-style] .big-n.mid { font-size: 20px !important; }
html[data-ui-style][data-ui-style] .big-n.long { font-size: 18px !important; }
html[data-ui-style][data-ui-style] .big-s { font-size: 12px !important; margin-top: 2px; }
html[data-ui-style][data-ui-style][data-ui-style] .wg.title { min-height: 0; --card-spacing: 10px !important; padding-left: 14px !important; padding-right: 14px !important; }
html[data-ui-style][data-ui-style][data-ui-style] .wg.title :is(span, h2, h3, b) { font-size: 14px !important; }
/* the summary cards of the other pages, the same measure as the report blocks (owner 29/10/2026, "Làm luôn" to the cards of Kho, Công nợ,
   the ORD / PO files) */
html[data-ui-style][data-ui-style][data-ui-style] :is(.kpi-mini, .pt-ans .pt-card, .pt-box, .doc-card, .board-card, .task-sum, .pack-card, .ds-blk) {
  --card-spacing: 12px !important; padding-left: 14px !important; padding-right: 14px !important; border-radius: min(var(--sc-radius-lg), 10px) !important; }
html[data-ui-style][data-ui-style][data-ui-style] :is(.kpi-mini .l, .pt-ans .k, .pt-box .k, .kpi-mini .s, .pt-ans .h) { font-size: 12px !important; }
html[data-ui-style][data-ui-style][data-ui-style] :is(.kpi-mini .v, .pt-ans .v) { font-size: 16px !important; }
html[data-ui-style][data-ui-style][data-ui-style] .task-sum .n { font-size: 20px !important; }
html[data-ui-style][data-ui-style][data-ui-style] .task-sum .l { font-size: 12px !important; }
/* a button standing in a line of a table cell (owner 30/10/2026: "Lập PNK" beside each receipt in Vận chuyển): as tall as the line, so
   the numbers of the cells beside it stay level with their own */
html[data-ui-style][data-ui-style][data-ui-style] table .btn.btn-line { height: 19px !important; min-height: 0 !important; padding: 0 6px !important;
  font-size: 12px !important; line-height: 17px !important; vertical-align: baseline; margin-left: 4px; }
/* a button inside a cell of a record's table is words, as the other cells' links (06 mục 14 G5: "+" and "+ HĐ" in Vận chuyển were
   pills while every other table had plain words; U-08 no coloured ground in a table): no frame, no ground, the set's link colour; the
   file count (.dp-clip) likewise loses its tinted ground */
html[data-ui-style][data-ui-style][data-ui-style] table.hs-t td :is(.btn:not(.primary):not(.sel-data), .dp-clip) { border: 0 !important; background: none !important;
  box-shadow: none !important; color: var(--sc-primary) !important; height: auto !important; min-height: 0 !important; padding: 0 2px !important; }
html[data-ui-style][data-ui-style][data-ui-style] table.hs-t td :is(.btn:not(.primary):not(.sel-data), .dp-clip):hover { text-decoration: underline; }
/* the buttons, everywhere (owner 31/10/2026, the print preview's buttons ringed: "toàn bộ nút trong app đều rất TO, to cả chữ lẫn khung
   bo xung quanh sửa ngay lập tức"): the text as the tables' (13px), the frame lower and narrower; over the style sheet's own sizes */
html[data-ui-style][data-ui-style] :is(.btn, .icon-btn, .seg button) { font-size: 13px !important; line-height: 18px !important; }
html[data-ui-style][data-ui-style] .btn:not(.sm):not(.pt-mini):not(.btn-line) { height: 30px !important; padding-left: 10px !important; padding-right: 10px !important; }
html[data-ui-style][data-ui-style] .btn.sm:not(.pt-mini):not(.btn-line) { height: 28px !important; padding-left: 9px !important; padding-right: 9px !important; }
html[data-ui-style][data-ui-style] .icon-btn:not(.sm) { width: 30px !important; height: 30px !important; }
html[data-ui-style][data-ui-style] .icon-btn.sm { width: 28px !important; height: 28px !important; }
html[data-ui-style][data-ui-style] .seg button { height: 28px !important; padding: 0 10px !important; }
html[data-ui-style][data-ui-style] .seg { padding: 2px !important; }
html[data-ui-style][data-ui-style] :is(.ov-switch button, .view-switch) { font-size: 13px !important; }
html[data-ui-style][data-ui-style] .ov-switch button { min-height: 28px !important; }
/* the boxes typed in a line of a table in a form (owner 31/10/2026 on Sửa ORD › Chi tiết ORD: "nút nào nút nấy tranh nhau hiện ra với
   số và chữ, mũi tên đè hết lên nhau, không hiểu như nào"): low and narrow-padded, a small corner, the text of the table (13px), so a
   figure is not cut in a narrow column; a list's arrow has its own room at the end of the box, everywhere, never over the words */
html[data-ui-style][data-ui-style] .inp.sel { padding-right: 26px !important; }
html[data-ui-style][data-ui-style] table td :is(input.inp, button.inp, .sel-data, .date-in input) { height: 28px !important; min-height: 0 !important;
  padding: 0 6px !important; border-radius: 6px !important; font-size: 13px !important; line-height: 18px !important; }
html[data-ui-style][data-ui-style] table td .inp.sel { padding-right: 18px !important; }
html[data-ui-style][data-ui-style] table td .inp.sel .sel-c { right: 7px; width: 6px; height: 6px; margin-top: -4px; }
html[data-ui-style][data-ui-style] table td .inp::placeholder { font-size: 12px; }
html[data-ui-style][data-ui-style] table td .date-in input.inp { padding-right: 26px !important; }
html[data-ui-style][data-ui-style] table td .btn.sel-data:not(.sm):not(.pt-mini):not(.btn-line) { height: 28px !important; border-radius: 6px !important; }
/* the (i) notes (owner 31/10/2026: "toàn bộ ghi chú của mày đen sì hết nhé"): no black bubble with grey words; the look of the app's
   other pop-ups (light card, its line, dark words), the text as the tables' */
html[data-ui-style][data-ui-style] .info-bubble { background: var(--sc-popover) !important; color: var(--sc-popover-foreground) !important;
  border: 1px solid var(--sc-border) !important; box-shadow: 0 8px 24px rgb(0 0 0 / .12) !important; border-radius: 10px !important;
  padding: 8px 12px !important; font-size: 13px !important; line-height: 1.5 !important; }
html[data-ui-style][data-ui-style] .info-bubble :is(.info-b, .info-t) { color: var(--sc-popover-foreground) !important; }
html[data-ui-style][data-ui-style] .info-bubble a { color: var(--sc-primary) !important; }
/* the boxes of a form (owner 31/10/2026 on Lập ORD › Thông tin ORD: "gọn gàng hơn đi"): one height for every box, as the buttons (30px),
   the text 13px; a typed box was 36px and a list 32px side by side */
html[data-ui-style][data-ui-style] :is(input.inp, button.inp):not(table td *) { height: 30px !important; min-height: 0 !important; font-size: 13px !important;
  line-height: 18px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html[data-ui-style][data-ui-style] :is(input.inp, button.inp):not(table td *):not(:is(.search-box, .side-search) *) { padding-left: 10px !important; }
html[data-ui-style][data-ui-style] input.inp:not(table td *):not(.date-in *):not(:is(.search-box, .side-search) *) { padding-right: 10px !important; }
html[data-ui-style][data-ui-style] .date-in input.inp:not(table td *) { padding-right: 30px !important; }
/* the document set on a phone: a long paper's name runs onto a second line rather than pushing the Bản giấy tick out of view */
@media (max-width: 760px) { html[data-ui-style] table.doc-tbl tbody td:nth-child(2) { white-space: normal !important; } }
/* the order form as Odoo draws it (owner 02/11/2026, Q313, docs/de-xuat/ord-po-theo-odoo.html; ui.js OrderSheet, StatusBar,
   StatButtons, InfoGrid, Totals; tapkit.js StatTabs): one card; the bar (title, actions, steps) over the button box, then the body.
   Black and grey words (U-08); the step the record is in is the one filled block, in the set's main colour, as Odoo marks it */
html[data-ui-style] .ob-form { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); overflow: hidden; }
html[data-ui-style] .ob-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--sc-border); }
html[data-ui-style] .ob-t { font-weight: 600; font-size: 16px; margin-right: auto; min-width: 0; }
html[data-ui-style] .ob-acts { display: flex; gap: 6px; flex-wrap: wrap; }
html[data-ui-style] .ob-steps { display: flex; font-size: 12px; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); overflow: hidden; }
html[data-ui-style] .ob-step { padding: 4px 10px; color: var(--sc-muted-foreground); border-left: 1px solid var(--sc-border); white-space: nowrap; }
html[data-ui-style] .ob-step:first-child { border-left: 0; }
html[data-ui-style] .ob-step.on { background: var(--sc-primary); color: var(--sc-primary-foreground); font-weight: 600; }
html[data-ui-style] .ob-bar .pop-anchor:has(.ob-steps-m) { display: none; }
html[data-ui-style] .ob-steps-m { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 8px 4px 10px;
  border: 1px solid var(--sc-primary); border-radius: var(--sc-radius-md); background: var(--sc-primary); color: var(--sc-primary-foreground); cursor: pointer; }
html[data-ui-style] .ob-steps-pop .pop-item.on { font-weight: 600; }
html[data-ui-style] .ob-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; border-bottom: 1px solid var(--sc-border); }
html[data-ui-style] .ob-stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 96px; min-height: 44px; padding: 6px 14px;
  font: inherit; font-size: 12px; color: var(--sc-muted-foreground); background: none; border: 0; border-left: 1px solid var(--sc-border); cursor: pointer; text-align: left; white-space: nowrap; }
html[data-ui-style] .ob-stat b { font-size: 16px; color: var(--sc-foreground); font-variant-numeric: tabular-nums; }
html[data-ui-style] .ob-stat:hover, html[data-ui-style] .ob-stat.on { background: var(--sc-muted); color: var(--sc-foreground); }
html[data-ui-style] .ob-body { padding: 14px; }
html[data-ui-style] .ob-no { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
html[data-ui-style] .ob-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin-bottom: 12px; }
html[data-ui-style] .ob-kv > div { display: flex; gap: 12px; min-width: 0; }
html[data-ui-style] .ob-kv > div > span:first-child { color: var(--sc-muted-foreground); width: 150px; flex: none; }
html[data-ui-style] .ob-tot { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 2px 24px; margin-top: 10px; font-size: 13px; }
html[data-ui-style] .ob-tot span { color: var(--sc-muted-foreground); text-align: right; }
html[data-ui-style] .ob-tot b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ui-style] .ob-box-bar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
html[data-ui-style] .ob-box-bar:empty { display: none; }
@media (max-width: 768px) {
  html[data-ui-style] .ob-steps { display: none; }
  html[data-ui-style] .ob-bar .pop-anchor:has(.ob-steps-m) { display: inline-flex; }
  html[data-ui-style] .ob-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); margin-left: -1px; }
  html[data-ui-style] .ob-stat { min-width: 0; border-top: 1px solid var(--sc-border); margin-top: -1px; }
  html[data-ui-style] .ob-kv { grid-template-columns: 1fr; }
  html[data-ui-style] .ob-kv > div > span:first-child { width: 120px; }
  html[data-ui-style] .ob-no { font-size: 18px; }
}

/* words that must stay readable (owner 03/11/2026, Q369 "Làm công cụ đó", what tools/giao-dien/soat-hien-thi.mjs found; U-09). */
/* a tag of several words wraps inside its pill: the page's .hs-chips.wrap asks for it, the style's fixed tag height was beating it */
html[data-ui-style][data-ui-style] .hs-chips.wrap .tag { height: auto !important; min-height: 20px; white-space: normal; line-height: 1.35; padding-top: 2px; padding-bottom: 2px; }
/* the card of a BOM: the code stays whole and sets its column, the name under it is cut to that column, a tag goes under the figure */
html[data-ui-style] .bom-card .tbl { table-layout: auto; }
html[data-ui-style] .bom-card .tbl td .clip { max-width: 0; min-width: 100%; }
html[data-ui-style] .bom-card .tbl td.num { white-space: normal; }
html[data-ui-style] .bom-card .tbl td.num .tag { display: flex; width: fit-content; margin-left: auto; white-space: nowrap; }
html[data-ui-style] .sub-actions { flex-wrap: wrap; }
/* a compact row on a phone: the figure always whole, then the head, the grey text takes what is left; a short date or code beside the
   head is never cut, the figure goes under it when the three do not fit */
/* the card's one column must not grow with its rows, or the card cuts them at its edge */
html[data-ui-style] :is(.ov-ord, .ov-list, .ov-row) { grid-template-columns: minmax(0, 1fr); }
html[data-ui-style] .pv-row .pv-h { flex: 0 1 auto; min-width: 0; max-width: none; }
html[data-ui-style] .pv-row .ov-sp { flex: 1 1 0; min-width: 0; }
html[data-ui-style] .pv-row .ov-sp.keep { flex: none; }
html[data-ui-style] .pv-row .ov-right { flex: none; max-width: none; margin-left: auto; }
html[data-ui-style] .pv-row .ov-r1:has(> .keep) { flex-wrap: wrap; }
/* its second part holds two rows of one height, so the row after them is out of sight whole and never halved (a tap shows every column) */
html[data-ui-style] .pv-r2 { max-height: 54px; gap: 6px; }
html[data-ui-style] .pv-r2 > .pv-m { min-height: 24px; }
html[data-ui-style][data-ui-style] .pv-m .hs-chips.wrap .tag { height: 20px !important; white-space: nowrap; }
/* a product's full name on a record's table stays whole (Q302) on as many lines as it needs: on one line it lay over the figure beside it
   once the names grew for the invoices (owner 03/11/2026) */
html[data-ui-style][data-ui-style][data-ui-style] .pt-t td.pt-iname { white-space: normal !important; }
@media (max-width: 768px) {
  /* no hover on a phone: a long name in a table or a field wraps instead of being cut */
  html[data-ui-style] :is(table td .clip, .bc-h .clip, .sel-data .clip, .pv-gv .muted.small) { white-space: normal; text-overflow: clip; }
  html[data-ui-style][data-ui-style][data-ui-style] table.hs-t td.dg { white-space: normal; text-overflow: clip; min-width: 200px; }
  html[data-ui-style][data-ui-style] .btn.sel-data.has { height: auto !important; min-height: 32px; white-space: normal; text-align: left; }
  html[data-ui-style][data-ui-style][data-ui-style] table td .btn.sel-data.has:not(.sm):not(.pt-mini):not(.btn-line) { height: auto !important; }
  html[data-ui-style][data-ui-style] .bom-card .tbl td.num .tag { white-space: normal; height: auto !important; text-align: right; }
  /* a form's footer stays one row, each button as wide as its words (theme.css shared the row in equal parts and cut the longer ones) */
  html[data-ui-style][data-ui-style] .form-page .form-foot { padding-left: 14px; padding-right: 14px; }
  html[data-ui-style][data-ui-style][data-ui-style] .form-page .form-foot .btn { flex: 1 1 auto; padding-left: 6px !important; padding-right: 6px !important; }
  /* the figure's cell gives way before the code: its unit and note go under it; words beside a tick and a card's small line wrap too */
  html[data-ui-style][data-ui-style] .bom-card .tbl td.num { white-space: normal !important; }
  html[data-ui-style] .fld .chk { white-space: normal; align-items: flex-start; }
  html[data-ui-style] .kpi-mini .s { white-space: normal; text-overflow: clip; }
}
/* Q483 (05/11/2026): a partner's profile line with a long note wraps the note under it, never a tall strip beside it; a document card's linked record likewise */
html[data-ui-style] .chk-row { flex-wrap: wrap; }
html[data-ui-style] .checks { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
html[data-ui-style] .doc-lib .doc-card .dc-m { flex-wrap: wrap; }
/* an empty table wider than its box: the message stays in sight; a table that fits looks as before */
html[data-ui-style] td.empty .empty-in { display: inline-block; position: sticky; left: 16px; right: 16px; }
html[data-ui-style] .chk-row .chk { white-space: normal; }
/* Q521: MergeTable's tick column and its "Thao tác" menu (mergetable.js actions) */
html[data-ui-style] .tree-tbl th.tk, html[data-ui-style] .tree-tbl td.tk { width: 36px; min-width: 36px; padding-left: 10px; padding-right: 4px; text-align: center; }
html[data-ui-style] .pop-item.danger { color: var(--red); }
/* the menu stands first, the main button after it (demo bản 2: Thao tác, nút chính, Tìm) */
.toolbar > .pop-anchor:has(.mt-acts) { order: -2; }
/* the phone card's tick (phoneviews.js CompactList tick) */
html[data-ui-style] .pv-row .pv-tk { flex: none; width: 18px; height: 18px; margin: 0 8px 0 0; }
/* words in the main colour on the dark grounds: the set's dark primary is a fill (light words on it, 6.9:1) and reads 2.4:1 as words on
   the dark card; there they take the set's own bright menu amber (sidebar-primary, 8.1:1). Fills and their words stay as they are */
html[data-ui-style][data-ui-style][data-ui-style][data-mode="dark"] :is(.side .node.nav-g, .side-nav .node.nav-g > svg, .side .nav-items .node.child.on,
  .dp-clip, table td .btn:not(.primary):not(.sel-data):not(.danger), .btn.link, .tab-u.on, .period.on .period-l, .chip.on, .info-bubble a, .ms-lnk) { color: var(--sc-sidebar-primary) !important; }
/* the (i) draws its letter: as a word inside the button it ran into the label, "Ngày dự kiến chi" read as "Ngày dự kiến chii" by a screen
   reader, a copy or a page read (the button keeps its name "Ghi chú") */
html[data-ui-style] .info-g::before { content: "i"; }