/* 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 {
  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; }
.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 { 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--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. */
.processed-product-form { --form-field-gap: 10px; --form-padding: 12px; }
.processed-product-form .form-preview__launchers { margin-block: 0; }
.processed-product-form .information-form__image-frame { aspect-ratio: auto; height: 100%; min-height: 160px; }
.processed-product-form__costs > .information-form__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container information-form-body (max-width: 600px) {
  .processed-product-form__costs > .information-form__fields { grid-template-columns: minmax(0, 1fr); }
}
/* 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 .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}