/* VINAM corporate branding for Frappe / ERPNext v16 */
:root,
[data-theme="light"] {
  --vinam-navy: #1f4f91;
  --vinam-blue: #456bb3;
  --vinam-blue-dark: #294f91;
  --vinam-blue-soft: #edf3fc;
  --vinam-green: #78b943;
  --vinam-green-dark: #5d9630;
  --vinam-green-soft: #f1f8eb;
  --primary: var(--vinam-blue);
  --primary-color: var(--vinam-blue);
  --btn-primary: var(--vinam-blue);
  --border-primary: var(--vinam-blue);
  --link-color: var(--vinam-navy);
  --focus-outline-color: rgba(69, 107, 179, 0.3);
  --ink-blue-2: var(--vinam-blue);
  --ink-blue-3: var(--vinam-blue-dark);
  --surface-blue-1: var(--vinam-blue-soft);
  --surface-blue-2: #dbe7f8;
  --surface-blue-3: var(--vinam-blue);
  --blue-500: #587dc0;
  --blue-600: var(--vinam-blue);
  --blue-700: var(--vinam-blue-dark);
}

[data-theme="dark"] {
  --primary: #6e94d1;
  --primary-color: #6e94d1;
  --btn-primary: #6e94d1;
  --border-primary: #6e94d1;
  --link-color: #9bb9e8;
  --ink-blue-2: #9bb9e8;
  --ink-blue-3: #c8daf7;
  --surface-blue-1: #1a3155;
  --surface-blue-2: #243f68;
  --surface-blue-3: #6e94d1;
}

/* Login */
body:has(.for-login) {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(120, 185, 67, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 82%,
      rgba(69, 107, 179, 0.13),
      transparent 34%
    ),
    #fff;
}

.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card,
.for-email-login .page-card,
.for-reset-password .page-card {
  border: 1px solid rgba(69, 107, 179, 0.14);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(52, 84, 150, 0.12);
}

.page-card-head img.app-logo {
  width: 150px !important;
  height: auto !important;
  max-height: 82px !important;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}

.page-card-head {
  align-items: center !important;
  text-align: center;
}

.page-card-head .page-card-head-text,
.page-card-head h4,
.page-card-head .page-card-subtitle {
  text-align: center;
}

.for-login .page-card .page-card-actions .btn-login,
.for-forgot .page-card .page-card-actions .btn-primary,
.for-reset-password .page-card .page-card-actions .btn-primary {
  background: linear-gradient(
    135deg,
    var(--vinam-blue),
    var(--vinam-blue-dark)
  ) !important;
  border-color: var(--vinam-blue) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(69, 107, 179, 0.22);
}

.for-login .page-card .page-card-actions .btn-login:hover,
.for-forgot .page-card .page-card-actions .btn-primary:hover,
.for-reset-password .page-card .page-card-actions .btn-primary:hover {
  background: var(--vinam-blue-dark) !important;
  border-color: var(--vinam-blue-dark) !important;
}

/* Password sign-in is the only login method exposed on the login card. */
.for-login .btn-login-option.btn-login-with-email-link {
  display: none !important;
}

.for-login a,
.for-forgot a,
.for-signup a,
.for-reset-password a {
  color: var(--vinam-blue-dark);
}

.for-login input:focus,
.for-forgot input:focus,
.for-reset-password input:focus {
  border-color: var(--vinam-blue);
  box-shadow: 0 0 0 2px rgba(69, 107, 179, 0.14);
}

/* Desk */
.navbar .navbar-brand .app-logo {
  max-width: 126px;
  object-fit: contain;
}

.navbar,
.desk-sidebar {
  border-color: rgba(69, 107, 179, 0.14);
}

.navbar .vinam-qcc01-live-link {
  background: var(--vinam-blue);
  border-radius: 6px;
  color: #fff !important;
  font-weight: 600;
  margin: 8px 10px;
  padding: 6px 12px !important;
}

.navbar .vinam-qcc01-live-link:hover {
  background: var(--vinam-blue-dark);
  color: #fff !important;
}

a:not(.btn),
.text-primary {
  color: var(--vinam-blue-dark);
}

a:not(.btn):hover {
  color: var(--vinam-navy);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--vinam-blue);
  border-color: var(--vinam-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--vinam-blue-dark);
  border-color: var(--vinam-blue-dark);
}

.standard-sidebar-item.selected,
.desk-sidebar-item.selected,
.list-sidebar .list-link.active {
  background-color: var(--vinam-blue-soft);
  color: var(--vinam-blue-dark);
  box-shadow: inset 3px 0 0 var(--vinam-green);
}

.form-control:focus,
.form-control:focus-visible,
.form-select:focus {
  border-color: var(--vinam-blue);
  box-shadow: 0 0 0 2px rgba(69, 107, 179, 0.16);
}

.badge-primary,
.indicator-pill.blue {
  background-color: var(--vinam-blue-soft);
  color: var(--vinam-blue-dark);
}

.indicator-pill.green,
.indicator-pill[data-filter*="green"] {
  --indicator-color: var(--vinam-green);
}

/* The reading width of the VINAM screens, taken from the source quote app
   (OPENCODE-QUOTE-AI-02, frontend/index.html):

     .wrap { max-width: 1180px; margin: 0 auto; padding: 18px 14px 70px }

   i.e. 1152px of content. Frappe's form column pads its own content by 15px on
   each side, so the container has to be 1152 + 30 = 1182px for the item table
   to land on the same 1152px as the source app's quotation list. The boards
   use the same token, so the two screens and the app they came from all line
   up. Nothing is forced to that width — it is a max, so narrow viewports still
   shrink. */
:root {
  --vinam-page-width: 1182px;
}

/* Quotation Board page head — the body class is set by vinam-desktop-tools.js
   only while that report is open, so every other page keeps its own controls. */
.vinam-board-page .page-head .standard-actions,
.vinam-board-page .page-head .custom-actions,
.vinam-board-page .page-head .custom-mobile-actions {
  display: none !important;
}

/* The boards are wide tables and the Quotation form is a wide document; the
   desk sidebar is dropped on both so the content gets the whole viewport.
   <body> is a flex row of .body-sidebar-container + .main-section, so hiding
   the container hands its width straight to the page. The navbar hamburger
   goes with it — with the sidebar gone by CSS the toggle would have nothing to
   open. Both come back on every other route, since the body classes are only
   set while those pages are open (vinam-desktop-tools.js). */
.vinam-board-page .body-sidebar-container,
.vinam-board-page .page-title .sidebar-toggle-btn,
.vinam-quotation-form .body-sidebar-container,
.vinam-quotation-form .page-title .sidebar-toggle-btn {
  display: none !important;
}

/* The Quotation form's page-head controls: "Get Items From", the ‹ › record
   pager, the ⋯ menu and the Actions button. The QUOTE DETAIL screen carries its
   own action row, so these are the desk's version of controls the page already
   states in its own terms.

   Listed one group at a time rather than hiding .standard-actions outright, the
   way the boards do: on a form that block also holds the primary Save button,
   which appears the moment the document is dirty and must stay. Workflow
   transitions currently live in the Actions menu; the form will carry its own
   Submit / Approve buttons, so nothing here is the last way to reach them. */
.vinam-quotation-form .page-head .custom-actions,
.vinam-quotation-form .page-head .custom-mobile-actions,
.vinam-quotation-form .page-head .standard-actions .page-icon-group,
.vinam-quotation-form .page-head .standard-actions .menu-btn-group,
.vinam-quotation-form .page-head .standard-actions .actions-btn-group {
  display: none !important;
}

/* …and with the right-hand controls gone, the breadcrumb was left alone against
   the far edge of a wide screen while the document itself sat in a centred
   1182px column — the two read as belonging to different pages. The page head
   joins that column, exactly as it does on the boards above, so "Selling /
   Quotation / SAL-QTN-…" starts on the same x as the QUOTE DETAIL title. */
.vinam-quotation-form .page-head .page-head-content {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--vinam-page-width);
}

/* "⌂ / Selling / Quotation / SAL-QTN-…" — the module crumb is dropped, leaving
   "⌂ / Quotation / SAL-QTN-…". Selling is a workspace nobody working a quote
   goes to; the two crumbs that matter are the list this document is one of and
   the document itself.

   frappe marks that crumb on the <a> (breadcrumbs.js,
   set_workspace_breadcrumb — the class is misspelled there and is copied here
   exactly), so the <li> around it is reached with :has(). The whole <li> has to
   go: hiding the link alone would leave its "/" separator behind. */
.vinam-quotation-form .navbar-breadcrumbs > li:has(> a.worksapce-breadcrumb) {
  display: none !important;
}

/* The wait, given a shape.
 *
 * Hiding ERPNext's form until the VINAM screen exists is what keeps the reader
 * from seeing a form that is about to vanish. The cost is that for the half
 * second between the page arriving and the document arriving there is nothing
 * at all — a white page with one stray "Enabled" pill floating on it, which
 * reads as a broken screen rather than a loading one.
 *
 * So the gap gets a skeleton instead: a title bar, a subtitle, and the block
 * the screen will fill, breathing gently. It is pure CSS in app_include_css, so
 * it is on the page at first paint — before any script has run, which is
 * exactly when it is needed. It goes when the screen arrives, because the
 * ready class the screen sets is what this selector is waiting on.
 *
 * ONLY these two screens. The Quotation form sets no ready class, so a skeleton
 * keyed to one there would never clear.
 */
.vinam-item-form:not(.vinam-item-ready) .page-body::after,
.vinam-bom-form:not(.vinam-bom-ready) .page-body::after {
  content: "";
  display: block;
  max-width: var(--vinam-page-width);
  margin: 22px auto 0;
  padding: 0 15px;
  height: 380px;
  background:
    linear-gradient(#e4e7e3, #e4e7e3) 15px 4px / min(420px, 45%) 30px no-repeat,
    linear-gradient(#eef0ed, #eef0ed) 15px 48px / min(620px, 70%) 15px no-repeat,
    linear-gradient(#f4f6f3, #f4f6f3) 15px 92px / calc(100% - 30px) 280px
      no-repeat;
  border-radius: 10px;
  animation: vinam-waiting 1.1s ease-in-out infinite alternate;
}

@keyframes vinam-waiting {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* Nothing to look at but this pill, on a page that is otherwise empty, is worse
   than an empty page. Both screens say their own state in their own header once
   they arrive — see the note on the BOM screen's pill below. */
.vinam-item-form .title-area > .indicator-pill {
  display: none !important;
}

/* The Item form, rebuilt as the source app's ITEM DETAIL screen
   (tools/erpnext_etl/postmigration/item_detail_client_script.js). The class is
   set by that script and only for an item that already exists, so creating an
   item still gets ERPNext's own form — which is why the standard fields are
   hidden from here rather than by `hidden` property setters.

   The screen is injected between .form-tabs-list and .form-tab-content, so
   hiding both of those leaves it standing and takes everything ERPNext drew
   with it: the tab bar (Details, Accounting, UOM, Tax, Inventory, Purchasing,
   Sales, Manufacturing, Quality, Pricing, Connections) and every field under
   it. */
.vinam-item-form .form-tabs-list,
.vinam-item-form .form-tab-content,
.vinam-item-form .layout-side-section.right,
.vinam-item-form .body-sidebar-container,
.vinam-item-form .page-title .sidebar-toggle-btn {
  display: none !important;
}

/* The crumb on this screen is rewritten by the Client Script to
   "⌂ / SAL-QTN-… / D01724772" — where the reader came from rather than where
   the record lives (item_detail_client_script.js, crumbs_html). frappe builds
   its own "Selling / Item / D01724772" first, and on a reload that trail was
   visible for as long as it took the Client Script to arrive. The body class is
   set from the URL before the desk renders anything (vinam-desktop-tools.js),
   so hiding every crumb the script did not write keeps that moment blank
   instead of wrong. */
.vinam-item-form .navbar-breadcrumbs > li:not(.vinam-crumb) {
  display: none !important;
}

/* The comment box and the activity feed live in .form-footer, ERPNext's own
   sibling of the tab content — so hiding the tabs left the footer standing
   alone under the page head, and that is what the reader saw on a reload:
   "Comments / Activity" filling the screen for the moment before the ITEM
   DETAIL screen arrived and pushed it back down.

   The footer belongs on the finished screen, so it is not hidden outright —
   only until the screen it belongs under exists. item_detail_client_script.js
   adds .vinam-item-ready once it has written the chrome, which is the first
   moment the footer has anything above it. */
.vinam-item-form:not(.vinam-item-ready) .form-footer {
  display: none !important;
}

.vinam-item-form .layout-main.layout-two-column > .layout-main-section-wrapper {
  flex: 0 0 100%;
  max-width: 100%;
}

/* The desk's page-head controls — View, Duplicate, the ‹ › record pager, the ⋯
   menu and Save — say the same things the screen says in its own words, and
   Save in particular now belongs to the screen's own Edit / Save changes pair.
   Unlike the Quotation form, .standard-actions goes whole: the primary Save
   button inside it is the one being replaced, not preserved.

   The screen mounts its own "← Quote · VQ-…" button into .page-actions but
   outside .standard-actions, which is why it survives this. */
.vinam-item-form .page-head .standard-actions,
.vinam-item-form .page-head .custom-actions,
.vinam-item-form .page-head .custom-mobile-actions {
  display: none !important;
}

/* The BOM form, rebuilt as the source app's BOM FORM screen
   (tools/erpnext_etl/postmigration/bom_detail_client_script.js, from
   OPENCODE-QUOTE-AI-02/Source/V22/frontend/index.html, brView() with
   kind="bom"). Every rule the Item screen needs, the BOM screen needs for the
   same reason — the two are the same shape of thing: a VINAM screen standing
   where ERPNext's tabs were, with the comment footer kept at the end of it.
   They are listed together rather than merged into one selector so that either
   screen can be changed without reading the other's requirements out of a
   shared rule. */
.vinam-bom-form .form-tabs-list,
.vinam-bom-form .form-tab-content,
.vinam-bom-form .layout-side-section.right,
.vinam-bom-form .body-sidebar-container,
.vinam-bom-form .page-title .sidebar-toggle-btn,
.vinam-bom-form .page-head .standard-actions,
.vinam-bom-form .page-head .custom-actions,
.vinam-bom-form .page-head .custom-mobile-actions,
.vinam-bom-form .navbar-breadcrumbs > li:not(.vinam-crumb) {
  display: none !important;
}

.vinam-bom-form:not(.vinam-bom-ready) .form-footer {
  display: none !important;
}

/* The "Draft" pill frappe hangs off the end of the breadcrumb — its docstatus,
   in a place that reads like part of the trail. The screen already says where
   the document stands, in its own words and its own corner: ACTIVE, DEFAULT,
   ĐÃ SUBMIT beside the title, and BOM FORM · CHỈNH SỬA / CHỈ XEM in the
   eyebrow above it. Two verdicts on the same thing, in two vocabularies, one
   of which is ERPNext's rather than the reader's.

   Scoped to .title-area so the indicators frappe puts elsewhere — the sidebar,
   the list view — are untouched. */
.vinam-bom-form .title-area > .indicator-pill {
  display: none !important;
}

/* "Submit this document to confirm" — the blue band frappe puts above the form
   for any draft of a submittable doctype (form.js set_form_header ->
   dashboard.add_comment -> layout.show_message, which renders into
   .form-message-container). It is advice about a step this screen does not
   offer: the BOM screen saves a draft, and submitting one is done from
   ERPNext's own form, where the button that does it lives. The screen already
   says DRAFT in the crumb and in its own header. */
.vinam-bom-form .form-message-container {
  display: none !important;
}

.vinam-bom-form .layout-main.layout-two-column > .layout-main-section-wrapper {
  flex: 0 0 100%;
  max-width: 100%;
}

.vinam-bom-form .page-head .page-head-content,
.vinam-bom-form #vinam-bom-chrome {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--vinam-page-width);
}

.vinam-bom-form #vinam-bom-chrome {
  padding: 12px 15px 0;
}

.vinam-bom-form {
  --page-max-width: var(--vinam-page-width);
}

/* Same column as the Quotation screen and the boards, so the breadcrumb, the
   page head and the document all start on one x no matter the screen width. */
.vinam-item-form {
  --page-max-width: var(--vinam-page-width);
}

.vinam-item-form .page-head .page-head-content,
.vinam-item-form #vinam-item-chrome {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--vinam-page-width);
}

.vinam-item-form #vinam-item-chrome {
  padding: 12px 15px 0;
}

/* The Quotation form's own right-hand rail (Assign / Attachments / Tags /
   Share / edit history) — the QUOTE DETAIL screen carries those actions in the
   page itself, so the rail is dropped and the two-column layout collapses to
   the single column it now holds. */
.vinam-quotation-form .layout-side-section.right {
  display: none !important;
}

.vinam-quotation-form
  .layout-main.layout-two-column
  > .layout-main-section-wrapper {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Every band of the form — sections, their heads, and the footer that carries
   comments and the activity feed — is centred on the shared width instead of
   the 900px reading column Frappe defaults to.

   Done by redefining Frappe's own --page-max-width for this page rather than
   by restating its rules: they are written as
   `body:not(.full-width) .std-form-layout .section-body`, which outranks any
   plain `.vinam-quotation-form .section-body` override, and there are several
   of them. Moving the variable moves everything keyed to it at once, and
   nothing outside the form sees the change. */
.vinam-quotation-form {
  --page-max-width: var(--vinam-page-width);
}

/* The QUOTE DETAIL header (title, meta line, action row, issue banner) is
   injected as a direct child of .form-page, so it spanned the whole page while
   everything below it — items, documents, comments — sat in that column. On a
   full-width screen the two read as different documents. The header joins the
   column, padded by the 15px the form column pads its own content by, so its
   edges land exactly on the item table's.

   The margin needs !important: the strip is built with an inline
   `margin:12px 15px 0` (quotation_item_grid_client_script.js), which no
   selector can outrank. Keyed off the id alone rather than the
   .vinam-quotation-form body class so the width is right on first paint,
   before the route watcher runs. */
#vinam-quote-chrome {
  margin: 12px auto 0 !important;
  max-width: var(--vinam-page-width);
  padding: 0 15px;
}

/* The boards keep the same column: the report body (tab strip, table, footer)
   and the page head above it, so the breadcrumb and the quick actions stay
   over the table rather than drifting to the edges of a wide screen. */
.vinam-board-page .layout-main-section,
.vinam-board-page .page-head .page-head-content {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--vinam-page-width);
}

/* query_report re-fills and .show()s its status line on every refresh, so this
   has to beat an inline display set by jQuery .show(). */
.vinam-status-hidden {
  display: none !important;
}

#vinam-board-tabs {
  border-bottom: 1px solid var(--gray-200, #ebeef0);
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding: 4px 0 0;
}

#vinam-board-tabs .vinam-board-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px 8px;
}

#vinam-board-tabs .vinam-board-tab:hover {
  color: var(--vinam-blue-dark);
}

#vinam-board-tabs .vinam-board-tab.is-active {
  border-bottom-color: var(--vinam-blue);
  color: var(--vinam-blue-dark);
}

#vinam-board-tabs .vinam-board-tab .count {
  font-weight: 500;
  opacity: 0.75;
}

/* The six buttons plus the breadcrumb are a close fit in
   var(--vinam-page-width), so anything that costs a few pixels — a longer
   breadcrumb, a slightly narrower window — used to push the last button onto a
   second line, which then spilled out of the head's fixed height and over the
   tab strip. The row never wraps: the breadcrumb gives up its width first
   (min-width:0, so it truncates rather than holding the row open), and if the
   buttons still do not fit they scroll sideways with their labels intact —
   the same treatment the narrow-screen rules below apply. */
.vinam-board-page .page-head .standard-items-section,
.vinam-board-page .page-head .page-actions {
  min-width: 0;
}

#vinam-board-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  /* flex-start, not flex-end: in a scrolling flex row, flex-end puts the
     overflow at the *start*, where it cannot be scrolled back into view. The
     bar is right-aligned by its own auto margin instead, which does nothing
     once it fills the space. */
  justify-content: flex-start;
  margin-left: auto;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

#vinam-board-actions .vinam-board-btn {
  align-items: center;
  border: 1px solid var(--gray-300, #dfe1e6);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 600;
  gap: 6px;
  /* Frappe spaces page-head buttons with
     `.page-actions .btn { margin-left: 10px }`, which lands on top of this
     row's own 8px gap: 18px between buttons, 50px of the row spent on nothing.
     Zeroing it is what lets all six fit on one line at the board width. */
  margin: 0;
  padding: 6px 12px;
  white-space: nowrap;
}

#vinam-board-actions .vinam-board-btn-primary,
#vinam-board-actions .vinam-board-btn-primary:hover,
#vinam-board-actions .vinam-board-btn-primary:focus {
  background: var(--vinam-blue-dark);
  border-color: var(--vinam-blue-dark);
  color: #fff;
}

#vinam-board-actions .vinam-board-icon {
  font-size: 13px;
  line-height: 1;
}

#vinam-board-actions .vinam-board-badge {
  background: #fde68a;
  border-radius: 8px;
  color: #7c5b00;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  min-width: 18px;
  padding: 0 5px;
  text-align: center;
}

/* Narrow screens: the six quick actions cannot share the page-head row with the
   breadcrumb. The row is allowed to wrap so they drop onto their own full-width
   line, and that line scrolls sideways instead of stacking into a tall block —
   the buttons keep their labels, which is what makes them readable ("Tạo Item
   hàng loạt" says nothing as a bare icon). */
@media (max-width: 991px) {
  /* .page-head and .page-head-content are both given a fixed
     var(--page-head-height); without releasing it the wrapped second line has
     nowhere to go and spills over the tab strip below. */
  .vinam-board-page .page-head,
  .vinam-board-page .page-head .page-head-content {
    height: auto;
  }

  .vinam-board-page .page-head .page-head-content {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }

  /* Every flex ancestor between the row and the buttons has to be allowed to
     shrink. Flex items default to min-width:auto, i.e. "never narrower than my
     content" — and that beats max-width. With .standard-items-section left at
     the default, the actions measured 816px inside a 375px viewport and pushed
     the whole page sideways, no matter what the descendants declared. */
  .vinam-board-page .page-head .standard-items-section {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }

  .vinam-board-page .page-actions {
    flex: 0 0 100%;
    justify-content: flex-start !important;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
  }

  /* The row already scrolls rather than wraps (see #vinam-board-actions
     above); here it also takes the whole of its own line. */
  .vinam-board-page #vinam-board-actions {
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    padding-bottom: 6px;
    width: 100%;
  }

  .vinam-board-page #vinam-board-tabs {
    overflow-x: auto;
  }

  .vinam-board-page #vinam-board-tabs .vinam-board-tab {
    flex: 0 0 auto;
  }
}

@media (max-width: 576px) {
  .page-card-head img.app-logo {
    width: 132px !important;
    max-height: 72px !important;
  }

  /* Tighter buttons so more than two fit before the row needs scrolling. */
  .vinam-board-page #vinam-board-actions {
    gap: 6px;
  }

  .vinam-board-page #vinam-board-actions .vinam-board-btn {
    font-size: 12px;
    padding: 5px 10px;
  }
}