/* Khung đã duyệt; phần bố cục cột/nhóm đang duyệt thử. Không ghi đè khung 5 vùng. */
.has-information-form, .has-information-form body { overflow: hidden; overscroll-behavior: none; }
.information-form {
  --form-radius: 14px;
  --form-title-size: 18px;
  --form-label-size: 14px;
  --form-content-weight: 500;
  width: min(var(--form-medium-width), calc(100% - var(--form-viewport-space)));
  max-width: calc(100vw - var(--form-viewport-space));
  max-height: calc(100dvh - var(--form-viewport-space));
  margin: auto; padding: 0; overflow: hidden;
  border: var(--form-border); border-radius: var(--form-radius);
  background: var(--surface); color: var(--text); font-family: var(--font-family);
}
.information-form--wide { width: min(var(--form-wide-width), calc(100% - var(--form-viewport-space))); --form-image-size: var(--form-wide-image-size); }
.information-form[open] { display: flex; flex-direction: column; }
.information-form::backdrop { background: var(--sidebar-overlay-backdrop); }
.information-form__header {
  flex-shrink: 0; height: var(--form-header-height); padding-inline: var(--form-padding);
  display: flex; align-items: center; justify-content: space-between; gap: var(--button-gap);
}
.information-form__header h2 { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--form-title-size); font-weight: var(--form-label-weight); }
.information-form__tabs { flex-shrink: 0; min-width: 0; padding-inline: var(--form-padding); background: var(--surface); }
.information-form__body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--form-padding); display: grid; align-content: start; gap: var(--form-row-gap, var(--form-field-gap)) var(--form-field-gap); container: information-form-body / inline-size; }
.information-form__content,
.information-form__image,
.information-form__groups,
.information-form__repeaters,
.information-form__repeater,
.information-form__fields { display: grid; gap: var(--form-row-gap, var(--form-field-gap)) var(--form-field-gap); min-width: 0; }
.information-form__content { grid-template-columns: minmax(0, 1fr); align-items: start; }
.information-form__content--with-image { grid-template-columns: minmax(0, 1fr) var(--form-image-size); }
.information-form__panels, .information-form__panel { min-width: 0; }
.information-form__image-frame { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: var(--filter-border); border-radius: var(--filter-radius); background: var(--workspace); color: var(--hint); font-size: var(--hint-size); font-weight: var(--hint-weight); }
@container information-form-body (max-width: 451px) {
  .information-form__content--with-image { grid-template-columns: minmax(0, 1fr); }
  .information-form__image { width: var(--form-image-size); }
}
.information-form__group { min-width: 0; background: var(--surface); border: var(--form-border); border-radius: var(--form-group-radius); padding: var(--form-padding); }
.information-form__group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--button-gap); list-style: none; cursor: pointer; color: var(--text); font-size: var(--form-group-title-size); font-weight: var(--form-label-weight); overflow-wrap: anywhere; }
.information-form__group > summary::-webkit-details-marker { display: none; }
.information-form__group-arrow { width: var(--button-icon-size); height: var(--button-icon-size); flex-shrink: 0; }
.information-form__group[open] > summary > .information-form__group-arrow { transform: rotate(180deg); }
.information-form__group > .information-form__fields,
.information-form__repeaters { margin-top: var(--form-row-gap, var(--form-field-gap)); }
.information-form__repeater { justify-items: start; }
.information-form__repeater h3 { margin: 0; color: var(--text); font-size: var(--form-text-size); font-weight: var(--form-label-weight); }
.information-form__repeat-list { display: grid; gap: var(--form-row-gap, var(--form-field-gap)) var(--form-field-gap); width: 100%; min-width: 0; }
.information-form__repeat-list:empty { display: none; }
.information-form__repeat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--form-row-gap, var(--form-field-gap)) var(--form-field-gap); width: 100%; min-width: 0; }
.information-form__fields { grid-template-columns: repeat(var(--form-columns, 1), minmax(0, 1fr)); align-items: start; }
.ui-address { container: ui-address / inline-size; grid-column: 1 / -1; min-width: 0; }
.ui-address > .ui-address__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--form-field-gap);
}
@container ui-address (width < 720px) {
  .ui-address > .ui-address__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-address__fields > :last-child { grid-column: 1 / -1; }
}
.information-form__field { display: grid; min-width: 0; gap: var(--form-label-gap); font-size: var(--form-text-size); font-weight: var(--form-label-weight); overflow-wrap: anywhere; }
.information-form__input, .information-form__textarea {
  width: 100%; min-width: 0; padding-inline: var(--filter-padding-x);
  border: var(--filter-border); border-radius: var(--filter-radius); background: var(--surface); color: var(--text);
  font-family: var(--font-family); font-size: var(--form-text-size); font-weight: var(--hint-weight);
}
.information-form__input { height: var(--filter-height); }
.information-form textarea.ui-note {
  height: var(--filter-height);
  min-height: var(--filter-height);
  resize: vertical;
}
.information-form__textarea { min-height: var(--form-textarea-min-height); padding-block: var(--form-padding); resize: vertical; }
.information-form__textarea--note { box-sizing: border-box; height: var(--form-note-height); min-height: var(--form-note-height); max-height: var(--form-note-height); resize: none; overflow-y: auto; overflow-x: hidden; }
.information-form__table-frame { width: 100%; min-width: 0; overflow: hidden; border: var(--table-border); border-radius: var(--table-radius); }
.information-form__editable-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--form-text-size); font-weight: var(--hint-weight); }
.information-form__editable-table th { height: var(--table-heading-height); background: var(--table-heading-background); color: var(--text); font-size: var(--hint-size); font-weight: var(--form-label-weight); text-align: left; }
.information-form__editable-table th:last-child { width: var(--form-table-action-width); }
.information-form__editable-table th, .information-form__editable-table td { padding: var(--form-label-gap); overflow-wrap: anywhere; border-bottom: var(--table-border); }
.information-form__editable-table tr:last-child td { border-bottom: 0; }
.information-form__checkbox { display: flex; min-width: 0; align-items: center; gap: var(--button-gap); font-size: var(--form-text-size); font-weight: var(--hint-weight); overflow-wrap: anywhere; }
.information-form__checkbox input { flex-shrink: 0; margin: 0; width: var(--form-checkbox-size); height: var(--form-checkbox-size); }
.information-form__hint { margin: 0; color: var(--hint); font-size: var(--hint-size); font-weight: var(--hint-weight); }
/* Hướng dẫn chung: tăng 50% từ 12px lên 18px, căn giữa nội dung. */
.information-form__guide { font-size: 18px; line-height: 1.5; text-align: center; justify-self: stretch; overflow-wrap: anywhere; }
.information-form--message .information-form__body { min-height: 96px; align-content: center; }
.information-form .information-form__body,
.information-form .information-form__body :is(
  .information-form__checkbox, .information-form__hint, .information-form__editable-table,
  .information-form__editable-table th, .information-form__repeater h3,
  .information-form__image-frame
) {
  font-family: inherit;
  font-size: var(--form-label-size);
  font-weight: var(--form-content-weight);
}
.information-form .information-form__body :is(.information-form__field, .information-form__field-caption) {
  font-size: var(--form-label-size);
  font-weight: var(--form-label-weight);
}
.information-form .information-form__body :is(
  .information-form__input, .information-form__textarea,
  .checkbox-select__trigger, .information-form__group > summary,
  .ui-tg__trigger, .ui-tg__value
) {
  font-family: inherit;
  font-size: var(--form-text-size);
  font-weight: 400;
}
.information-form :is(.information-form__input, .information-form__textarea)::placeholder {
  font: inherit;
}
.information-form button { font-family: inherit; }
.information-form--message .information-form__groups:empty { display: none; }
.information-form__footer, .information-form__footer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--button-gap); }
.information-form__footer { flex-shrink: 0; min-height: var(--form-footer-height); padding: 10px var(--form-padding); }
.information-form__footer-actions { margin-left: auto; }
.information-form__split-action { position: relative; display: flex; }
.information-form__split-action > .ui-button:first-child:not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.information-form__split-action > .ui-button[aria-haspopup] { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.information-form__footer-chevron { width: var(--button-icon-size); height: var(--button-icon-size); }
.information-form__split-action > [aria-expanded="true"] .information-form__footer-chevron { transform: rotate(180deg); }
.information-form__action-menu { position: absolute; bottom: calc(100% + var(--button-gap)); right: 0; z-index: 1; width: max-content; min-width: 100%; max-width: calc(100vw - var(--form-viewport-space)); overflow-y: auto; background: var(--surface); border: var(--account-menu-border); border-radius: var(--button-radius); box-shadow: var(--account-menu-shadow); padding: 4px; }
.information-form__action-menu:not([hidden]) { display: grid; }
.information-form__action-menu > .ui-button { justify-content: flex-start; text-align: left; white-space: normal; }
/* Trang duyệt độc lập, chỉ bố trí các nút mở mẫu. */
.form-preview { padding: var(--form-padding); }
.form-preview__launchers { display: flex; flex-wrap: wrap; gap: var(--button-gap); margin-block: var(--form-field-gap); }
@media (max-width: 960px) {
  .information-form { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .information-form__body { flex: 1; }
}

/* Compact product configuration, scoped to the processed-product editor. */




/* UI-KHAI BÁO: chuẩn form khai báo dùng chung, giữ vỏ UI-02. */
.ui-khai-bao-form { --form-padding:10px; --form-note-height:40px; }
.ui-khai-bao-form .information-form__repeaters { margin-top:0; }
.ui-khai-bao-form .information-form__field-caption:empty { display:none; }
.ui-khai-bao-form .information-form__textarea--note { padding-block:8px; }


/* UI-BANG LUONG — accepted 02/11/2026. */
.payroll-entry-form{--filter-height:36px;height:auto;max-height:min(80dvh,760px);max-width:calc(100vw - 32px)}
.payroll-entry-form .information-form__body{flex:0 1 auto;overflow-y:auto}
.payroll-entry-form > .information-form__footer{margin-top:auto}
.payroll-entry-form .data-table__scroll{min-height:0!important;max-height:none;overflow-y:visible}
.payroll-entry-form .data-table{min-height:0}
.payroll-entry-form .information-form__input,.payroll-entry-form .checkbox-select__trigger,.payroll-entry-form .ui-date-picker__trigger{height:36px;min-height:36px;box-sizing:border-box}
.payroll-entry-table td{vertical-align:middle}
.payroll-entry-table td .information-form__input{margin:0;width:100%;box-sizing:border-box}
.payroll-entry-table tbody tr{height:48px}
.payroll-entry-cell{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left}
.payroll-entry-cell__label{display:flex;flex-direction:column;gap:4px;font-weight:400;font-size:12px}
.payroll-entry-table td:has(.payroll-entry-cell),.payroll-entry-table td:has(.payroll-entry-component-totals){vertical-align:top;padding-top:8px;padding-bottom:8px}
.payroll-entry-salary{display:flex;flex-direction:column;gap:8px;min-width:0}
.payroll-entry-salary>.payroll-entry-cell{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:8px}
.payroll-entry-salary .payroll-entry-cell__label{line-height:16px}
.payroll-entry-component-totals{display:flex;flex-direction:column;gap:8px}
.payroll-entry-component-total{display:flex;flex-direction:column;gap:4px;min-height:56px;box-sizing:border-box}
.payroll-entry-component-total>small{font-size:12px;line-height:16px}
.payroll-entry-table :is(.payroll-entry-salary,.payroll-entry-component-totals) .information-form__input,.payroll-entry-table .payroll-entry-top-input,.payroll-entry-table .payroll-entry-note-row input{height:36px;min-height:36px}
.payroll-entry-actions{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.payroll-entry-actions>.ui-button{white-space:nowrap}
.payroll-entry-table td:has(>.payroll-entry-top-input),.payroll-entry-table td.payroll-entry-financial-cell{vertical-align:top;padding-top:28px;padding-bottom:8px}
.payroll-entry-table .payroll-entry-financial-row{height:72px}
.payroll-entry-table .payroll-entry-note-row{height:64px}
.payroll-entry-table .payroll-entry-note-row td{vertical-align:top;padding-top:8px;padding-bottom:8px;border-top:0}
.payroll-entry-table .payroll-entry-note-row td:last-child{padding-top:28px}
.payroll-entry-table .payroll-entry-financial-row td:not([rowspan]){border-bottom:0}
.payroll-entry-toolbar{display:flex;align-items:flex-end;gap:12px;min-width:0;flex-wrap:nowrap}
.payroll-entry-toolbar>.information-form__field{flex:1;min-width:0}
.payroll-entry-picker-slot{order:-1;flex:0 1 350px;width:350px;max-width:350px}
.payroll-entry-form .payroll-entry-picker.manufacturing-overview__filters{display:block;margin:0;padding:0;width:350px;max-width:100%;min-height:36px;box-sizing:border-box}
.payroll-entry-picker .checkbox-select{min-width:0;width:100%}
@media(max-width:480px){.payroll-entry-picker-slot{width:min(350px,100%);flex-basis:min(350px,100%)}.payroll-entry-form .payroll-entry-picker.manufacturing-overview__filters{width:100%}}
.payroll-list-detail__footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding-top:12px}
.payroll-list-detail{padding:12px;min-width:0}

.portal-account-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-account-fields > .information-form__checkbox,
.portal-account-fields > .ui-button {
  align-self: flex-start;
}
.portal-account-fields > [hidden] {
  display: none;
}
.portal-account-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.information-form.list-create {
  --form-viewport-space: 24px;
  --form-title-size: 16px;
  --form-label-size: 13px;
  font-family: Arial, sans-serif;
  color: #122333;
  inset: 0;
  margin: auto;
  width: calc(100vw - 24px);
  max-width: 1500px;
  height: calc(100vh - 24px);
  max-height: none;
  border: 1px solid #cfdef2;
  border-radius: 8px;
  background: #f5f6f8;
}
.list-create .information-form__header h2 {
  color: #090d12;
}
.information-form.list-create .information-form__body :is(.information-form__field-caption, .information-form__field > span:first-child) {
  color: #465869;
}
.list-create .information-form__body {
  flex: 1 1 auto;
}
.list-create .information-form__footer {
  border-top: var(--filter-border);
}
.list-create__layout,
.list-create__main {
  display: grid;
  gap: var(--list-create-gap, 12px);
  align-content: start;
}
.list-create__layout--account {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}
.material-norm-form__config {
  box-sizing: border-box;
  height: 70px;
  min-height: 70px;
  padding-block: 6px;
  overflow: auto;
  resize: vertical;
}
.material-norm-form__config > span { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 8px; line-height: 18px; }
.material-norm-form__config strong { font-size: 14px; font-weight: 600; }
.material-norm-form__fabric-color { font-size: 14px; font-weight: 600; }
.accessory-declaration__tile-caption > .material-norm-form__fabric-name { font-size: 13px; font-weight: 400; }
@container information-form-body (width >= 760px) {
  .material-norm-form .list-create__layout--account {
    grid-template-columns: minmax(0, calc((100% - var(--list-create-gap, 12px)) * 2 / 3 + 70px)) minmax(0, 1fr);
  }
}
.list-create__card {
  min-width: 0;
  padding: var(--list-create-card-padding, 12px);
  border: var(--filter-border);
  border-radius: 6px;
  background: var(--surface);
}
.list-create__card h3 {
  margin: 0 0 var(--list-create-gap, 12px);
  font-size: 14px;
  font-weight: 600;
}
.list-create--compact {
  --form-row-gap: 8px;
  --list-create-gap: 8px;
  --list-create-card-padding: 10px;
}
.list-create--compact .list-create__main > h3 { margin-block-end: 0; }
.accessory-profile__drop {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px dashed var(--secondary-hover-border);
  border-radius: var(--filter-radius);
  text-align: center;
}
.accessory-profile__drop p { margin: 0; }
.accessory-profile__drop input { width: 100%; }
.accessory-profile__drop img { max-width: 100%; max-height: 240px; object-fit: contain; }
.accessory-declaration__filters,
.accessory-declaration__products { display: flex; flex-wrap: wrap; gap: 8px; }
.accessory-declaration__filters > * { flex: 1 1 140px; min-width: 0; }
.accessory-declaration__products:not(:empty) { margin-top: 6px; }
.accessory-declaration__products { color: #0069c7; font: 400 12px Arial, sans-serif; }
.accessory-declaration__products button {
  border: 0;
  background: transparent;
  padding: 0 3px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.accessory-declaration__catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.accessory-declaration__catalog .accessory-declaration__tile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 64px;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  padding: 8px;
  border: var(--filter-border);
  border-radius: var(--filter-radius);
  background: var(--surface);
  color: var(--text);
  font: 400 13px/1.35 var(--font-family);
  text-align: left;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
.accessory-declaration__thumbnail {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  overflow: hidden;
  border-radius: var(--filter-radius);
  background: var(--table-heading-background);
}
.accessory-declaration__thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.accessory-declaration__tile-caption { display: grid; gap: 2px; min-width: 0; }
.accessory-declaration__tile-caption > span { font-weight: 600; }
.accessory-declaration__tile:not(:disabled):hover { background: var(--secondary-hover); }
.accessory-declaration__tile:disabled { opacity: .5; cursor: default; }
.accessory-declaration__remove-col { width: 40px; }
.accessory-declaration__index-col { width: 8%; }
.accessory-declaration__unit-col { width: 14%; }
.accessory-declaration__quantity-col { width: 20%; }
.accessory-declaration__amount-col { width: 23%; }
.accessory-declaration-form .information-form__body .information-form__editable-table th {
  font-size: 13px;
  font-weight: 600;
}
.accessory-declaration-form .information-form__editable-table th:last-child { width: auto; }
.accessory-declaration__main :is(th, td) { box-sizing: border-box; padding-block: 0; }
.accessory-declaration__main td { height: var(--table-row-height); vertical-align: middle; }
.accessory-declaration__main tr > :last-child:not([colspan]) { padding-inline-start: min(64px, 4vw); }
.accessory-declaration__main [data-space] td {
  height: calc(var(--table-row-height) * var(--empty-rows, 15));
  padding: 0;
  border: 0;
}
.accessory-declaration__main tbody :is(.information-form__input, .ui-button) {
  box-sizing: border-box;
  height: 26px;
  min-height: 0;
  padding-block: 0;
  vertical-align: middle;
}
.accessory-declaration__main tbody .ui-button { width: 28px; padding-inline: 0; }
.accessory-declaration__main tfoot td {
  background: var(--table-heading-background);
  border-top: var(--table-border);
  font-weight: 600;
}
.accessory-declaration__main tfoot td:first-child { text-align: right; }
.print-declaration__table .data-table__scroll { min-height: calc(var(--table-heading-height) + 15 * var(--table-row-height)); }
.print-declaration__total {
  padding: 8px 12px;
  border: var(--table-border);
  border-radius: var(--filter-radius);
  background: var(--table-heading-background);
  text-align: right;
  font-weight: 600;
}
.list-create__status .app-bar__group {
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.list-create .portal-account-fields > .app-bar__group > .information-form__checkbox {
  font-size: 13px;
  font-weight: 600;
}
.list-create .ui-address > .ui-address__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.list-create .ui-address__fields > :last-child {
  grid-column: 1 / -1;
}
.list-create .portal-account-row:has(input[type="tel"]) {
  grid-template-columns: minmax(0, 1fr);
}
@container information-form-body (width < 760px) {
  .list-create__layout--account {
    grid-template-columns: minmax(0, 1fr);
  }
}