/* ================================================================ VAS UI STANDARDS Font, button, status and dense-data rules shared by every page. Keep this file after page-level dependencies in . ================================================================ */ @font-face { font-family: "Vasfont"; src: url("../Fonts/GlyphaVO.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } /* ================================================================ FORM CONTROL WIDTH STANDARD — shared by every Master Page screen ================================================================ */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea, select, .form-control, .form-select, .form-ctrl, .page-search-wrap, .page-search-combo, .page-search-control, .stable-combobox, .stable-combobox__control, .cbx-wrap, .cbx-combo, .cbx-control ) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( .page-search-field, .form-row, .form-group, .col-form, .cbx-field, .row > [class^="col"], .row > [class*=" col"] ) { min-width: 0; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) textarea { max-width: 100% !important; resize: vertical; } body :is(.modal, .modal-overlay, .vas-modal-root) :is( input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], textarea, select, .form-control, .form-select, .form-ctrl, .page-search-control, .stable-combobox, .stable-combobox__control, .cbx-wrap, .cbx-combo, .cbx-control ) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ================================================================ COMPACT DATE / TIME CONTROL WIDTH Keep temporal values readable without stretching across the row. Canonical Flatpickr classes follow the same shared dimensions. ================================================================ */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( input[type="date"], input[type="month"], input[type="week"], input.fp-date ), body :is(.modal, .modal-overlay, .vas-modal-root) :is( input[type="date"], input[type="month"], input[type="week"], input.fp-date ) { width: 100% !important; max-width: 180px !important; min-width: 0 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( input[type="time"], input.fp-time ), body :is(.modal, .modal-overlay, .vas-modal-root) :is( input[type="time"], input.fp-time ) { width: 100% !important; max-width: 140px !important; min-width: 0 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( input[type="datetime"], input[type="datetime-local"] ), body :is(.modal, .modal-overlay, .vas-modal-root) :is( input[type="datetime"], input[type="datetime-local"] ) { width: 100% !important; max-width: 240px !important; min-width: 0 !important; } /* HR_Emp has legacy ID-scoped full-width locks. Cap both the native field and the visible Flatpickr wrapper so employee date fields follow this standard. */ #hrEmployeePage #employeeModal input[type="date"], #hrEmployeePage #employeeModal .fp-input-wrap, #hrEmployeePage :is(#familyModal, #prevJobModal, #transferModal) input[type="date"], #hrEmployeePage :is(#familyModal, #prevJobModal, #transferModal) .fp-input-wrap { width: 100% !important; max-width: 180px !important; min-width: 0 !important; } @media (max-width: 767.98px) { :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input.fp-date, input.fp-time ), body :is(.modal, .modal-overlay, .vas-modal-root) :is( input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input.fp-date, input.fp-time ) { width: 100% !important; max-width: 100% !important; } #hrEmployeePage #employeeModal input[type="date"], #hrEmployeePage #employeeModal .fp-input-wrap, #hrEmployeePage :is(#familyModal, #prevJobModal, #transferModal) input[type="date"], #hrEmployeePage :is(#familyModal, #prevJobModal, #transferModal) .fp-input-wrap { width: 100% !important; max-width: 100% !important; } } body :is(.modal, .modal-overlay, .vas-modal-root) textarea { resize: vertical; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ================================================================ CBX — common searchable DropDownList/select implementation ================================================================ */ .cbx-field { min-width: 0; } .cbx-label { display: block; margin-bottom: 5px; color: #68766f; font-size: 11px; font-weight: 850; } .cbx-field.is-required .cbx-label::after { content: " *"; color: #c85f0a; font-weight: 950; } .cbx-label.is-required::after { content: " *"; color: #c85f0a; font-weight: 950; } .cbx-wrap, .cbx-combo { position: relative; width: 100%; max-width: 100%; min-width: 0; } select.cbx-select.cbx-native { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; } .cbx-control { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 4px 10px !important; border: 1px solid #d1ddd7 !important; border-radius: 9px !important; background: #fff !important; background-color: #fff !important; background-image: none !important; color: #17211d !important; -webkit-text-fill-color: #17211d !important; font-family: Vasfont, "Glypha VO", "Segoe UI", Arial, sans-serif !important; font-size: 11.5px !important; font-weight: 750 !important; line-height: 1.25 !important; text-align: left !important; box-shadow: none !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; transition: all .18s ease; } .cbx-control:hover { border-color: #91b8a6 !important; } .cbx-control:focus, .cbx-combo.is-open .cbx-control { outline: none !important; border-color: #0f6b4f !important; box-shadow: 0 0 0 3px rgba(15,107,79,.13) !important; } .cbx-control:disabled, .cbx-combo.is-disabled .cbx-control { background: #f3f4f6 !important; color: #94a3b8 !important; cursor: not-allowed !important; } .cbx-field.is-required .cbx-control { border-color: #f0bd8d !important; background: #fff3e8 !important; } .cbx-control.is-invalid { border-color: #dc2626 !important; background: #fff1f2 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important; } .cbx-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cbx-value.is-placeholder { color: #7a8981; font-weight: 600; } .cbx-arrow { width: 0; height: 0; margin-left: 8px; border-top: 5px solid #607169; border-right: 4px solid transparent; border-left: 4px solid transparent; transition: transform .16s ease; } .cbx-combo.is-open .cbx-arrow { transform: rotate(180deg); } .cbx-portal { display: none; position: fixed; z-index: 100500; overflow: hidden; border: 1px solid #bfd2c8; border-radius: 10px; background: #fff; box-shadow: 0 18px 44px rgba(15,23,42,.22); font-family: Vasfont, "Glypha VO", "Segoe UI", Arial, sans-serif; } .cbx-portal.is-open { display: block; } .cbx-searchbar { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; padding: 7px; border-bottom: 1px solid #e2ebe6; background: #f7faf8; } .cbx-portal.is-search-only .cbx-searchbar { grid-template-columns: minmax(0, 1fr); } .cbx-input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; height: 35px !important; min-height: 35px !important; padding: 5px 9px !important; border: 1px solid #cedbd4 !important; border-radius: 8px !important; background: #fff !important; font-size: 12px !important; } .cbx-input:focus { outline: none !important; border-color: #0f6b4f !important; box-shadow: 0 0 0 3px rgba(15,107,79,.12) !important; } .cbx-clear { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 35px !important; min-width: 34px !important; min-height: 35px !important; padding: 0 !important; border: 1px solid #cedbd4 !important; border-radius: 8px !important; background: #fff !important; color: #53645c !important; font-size: 18px !important; cursor: pointer !important; } .cbx-clear[hidden] { display: none !important; } .cbx-list { max-height: 300px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 5px; } .cbx-list::-webkit-scrollbar { width: 5px; } .cbx-list::-webkit-scrollbar-thumb { background: #EB8023; border-radius: 4px; } .cbx-list::-webkit-scrollbar-track { background: rgba(0,0,0,.05); } .cbx-option { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-height: 38px !important; padding: 6px 8px !important; border: 0 !important; border-radius: 7px !important; background: #fff !important; color: #17211d !important; text-align: left !important; cursor: pointer !important; font-family: inherit !important; } .cbx-option:hover, .cbx-option.is-active { background: #eaf7f0 !important; color: #0c7049 !important; } .cbx-option.is-selected { background: #dff3e8 !important; color: #0a6542 !important; font-weight: 850 !important; } .cbx-option-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .cbx-option-code { max-width: 120px; padding: 2px 6px; border-radius: 999px; background: #f3f4f6; color: #68766f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.5px; font-weight: 850; } .cbx-option.is-selected .cbx-option-code { background: #edf2ef; color: #0a6542; } .cbx-empty { padding: 18px 10px; color: #68766f; text-align: center; font-size: 11.5px; font-weight: 700; } .cbx-validation-message { margin-top: 4px; color: #dc2626; font-size: 11px; font-weight: 750; line-height: 1.3; } /* ================================================================ MODAL STANDARD — centered, scrollable, close action at bottom-right ================================================================ */ body .modal.vas-modal-root.show { display: flex !important; align-items: center !important; justify-content: center !important; padding: .75rem !important; } body .modal.vas-modal-root > .modal-dialog, body .modal.vas-modal-root > .modal-dialog-centered { width: min(100%, var(--bs-modal-width, 500px)); min-height: 0 !important; margin: auto !important; } body .modal.vas-modal-root > .modal-dialog > .modal-content, .vas-modal-panel { display: flex !important; flex-direction: column !important; max-height: 92dvh !important; overflow: hidden !important; border-radius: 12px !important; } .vas-modal-root { align-items: center !important; justify-content: center !important; } .vas-modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .vas-modal-panel.vas-modal-panel-scroll { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .vas-modal-footer, .vas-generated-modal-footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex: 0 0 auto !important; width: 100%; padding: 10px 13px !important; border-top: 1px solid #e2e8f0 !important; background: #fff !important; } .vas-modal-close-btn, .vas-modal-footer .vas-modal-existing-close { min-width: 82px !important; width: auto !important; height: 38px !important; min-height: 38px !important; padding: 6px 16px !important; border: 1px solid #EB8023 !important; border-radius: 9px !important; background: #EB8023 !important; color: #fff !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.2 !important; cursor: pointer !important; transition: all .18s ease; } .vas-modal-existing-close { order: 999; } .vas-modal-close-btn:hover, .vas-modal-close-btn:focus, .vas-modal-footer .vas-modal-existing-close:hover, .vas-modal-footer .vas-modal-existing-close:focus { border-color: #d6701a !important; background: #d6701a !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(235,128,35,.25) !important; outline: none !important; } /* ================================================================ GLOBAL MOBILE SCROLL-TO-TOP — identical on every screen ================================================================ */ #vasGlobalTopButton { display: none; } .vas-legacy-top-button { display: none !important; } @media (max-width: 767.98px) { #vasGlobalTopButton { position: fixed; right: 14px; bottom: calc(var(--bottom-nav-h, 80px) + 16px); z-index: 99980; display: none; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 0; transform: translateY(8px); pointer-events: none; cursor: pointer; transition: opacity .18s ease, transform .18s ease; } #vasGlobalTopButton.is-show { display: inline-flex; opacity: 1; transform: translateY(0); pointer-events: auto; } #vasGlobalTopButton img { display: block !important; width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important; object-fit: contain !important; pointer-events: none; } body.modal-open #vasGlobalTopButton, body.vas-any-modal-open #vasGlobalTopButton { display: none !important; } .vas-modal-close-btn { min-width: 88px !important; min-height: 44px !important; font-size: 12.5px !important; } } /* ================================================================ FINAL SHARED-CONTROL LOCK Kept at the end so page-wide button/input rules cannot override the dedicated combobox, modal and DataTables geometry above. ================================================================ */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .vas-width-auto { width: auto !important; max-width: none !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .input-group > :is( input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], select, textarea, .form-control, .form-select, .form-ctrl ) { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .input-group > :is( .cbx-wrap, .stable-combobox, .select2-container, .flatpickr-wrapper ) { flex: 1 1 auto !important; width: 1% !important; max-width: 100% !important; min-width: 0 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( .page-search-wrap, .page-search-combo, .page-search-control, .stable-combobox, .stable-combobox__control ) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( .page-search-control, .stable-combobox__control, .cbx-control ) { height: 38px !important; min-height: 38px !important; padding: 4px 10px !important; border: 1px solid #d1ddd7 !important; border-radius: 9px !important; background: #fff !important; color: #17211d !important; font-size: 11.5px !important; font-weight: 750 !important; text-align: left !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( .page-search-control, .stable-combobox__control, .cbx-control ):focus { border-color: #0f6b4f !important; box-shadow: 0 0 0 3px rgba(15,107,79,.13) !important; outline: none !important; } body :is(.stable-combobox__panel, .cbx-portal) { z-index: 100500 !important; max-width: calc(100vw - 12px); } body .vas-modal-panel { display: flex !important; flex-direction: column !important; max-height: 92dvh !important; overflow: hidden !important; border-radius: 12px !important; } body .vas-modal-footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; gap: 8px !important; width: 100% !important; padding: 10px 13px !important; } body .vas-modal-footer .vas-modal-close-btn { min-width: 82px !important; min-height: 38px !important; height: 38px !important; padding: 6px 16px !important; border-radius: 9px !important; font-size: 13px !important; } body .vas-dt-toolbar .vas-dt-search input[type="search"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; font-size: 13px !important; } body .vas-dt-toolbar .vas-dt-length select { width: auto !important; min-width: 66px !important; height: 38px !important; min-height: 38px !important; } body .vas-dt-toolbar .vas-dt-export :is(.vas-dt-excel-button, .buttons-excel, .buttons-excelHtml5) { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; font-size: 0 !important; } @media (max-width: 767.98px) { body :is(.modal, .modal-overlay, .vas-modal-root) :is( input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], select, textarea, .form-control, .form-select, .stable-combobox__search, .select2-search__field, .cbx-input ) { font-size: 16px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( .page-search-control, .stable-combobox__control, .cbx-control ) { height: 38px !important; min-height: 38px !important; font-size: 10.5px !important; } body .vas-modal-footer .vas-modal-close-btn { min-width: 88px !important; min-height: 44px !important; height: 44px !important; font-size: 12.5px !important; } body .vas-dt-toolbar .vas-dt-search input[type="search"] { height: 44px !important; min-height: 44px !important; font-size: 16px !important; } body .vas-dt-toolbar .vas-dt-length select { height: 44px !important; min-height: 44px !important; font-size: 16px !important; } body .vas-dt-toolbar .vas-dt-export :is(.vas-dt-excel-button, .buttons-excel, .buttons-excelHtml5) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } } /* ================================================================ DATATABLES STANDARD — length | search | Excel; info | pagination ================================================================ */ .vas-dt-toolbar { display: grid !important; grid-template-columns: auto minmax(180px, 1fr) auto !important; grid-template-areas: "length search export" !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; margin: 0 0 8px !important; } .vas-dt-length { grid-area: length; justify-self: start; min-width: 0; } .vas-dt-search { grid-area: search; width: 100% !important; min-width: 0 !important; } .vas-dt-export { grid-area: export; justify-self: end; min-width: 38px; } .vas-dt-toolbar > :empty, .vas-dt-footer > :empty { display: none !important; } .vas-dt-toolbar :is(.dt-length, .dataTables_length, .dt-search, .dataTables_filter, .dt-buttons), .vas-dt-toolbar > :is(.vas-dt-length, .vas-dt-search, .vas-dt-export) { display: flex !important; align-items: center !important; margin: 0 !important; min-height: 38px !important; } .vas-dt-length label, .vas-dt-search label { display: flex !important; align-items: center !important; gap: 6px !important; width: 100%; min-width: 0; margin: 0 !important; white-space: nowrap; } .vas-dt-search label { font-size: 12px !important; font-weight: 700 !important; color: #334155 !important; } /* DataTables 2.x places the label next to the input; 1.x wraps the input. */ .vas-dt-search .dt-search > label { flex: 0 0 auto; width: auto !important; } .vas-dt-search input[type="search"] { flex: 1 1 auto; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 5px 10px !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; background: #fff !important; font-size: 13px !important; box-sizing: border-box !important; } .vas-dt-search input[type="search"]:focus { border-color: #EB8023 !important; box-shadow: 0 0 0 3px rgba(235,128,35,.25) !important; outline: 0 !important; } .vas-dt-length select { width: auto !important; min-width: 66px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; background-color: #fff !important; font-size: 13px !important; font-weight: 700 !important; } .vas-dt-export .dt-buttons, .vas-dt-export .dataTables_buttons { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; margin: 0 !important; } .vas-dt-excel-button, .vas-dt-export :is(.buttons-excel, .buttons-excelHtml5) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; background: #fff !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; } .vas-dt-excel-button:hover, .vas-dt-excel-button:focus, .vas-dt-export :is(.buttons-excel, .buttons-excelHtml5):hover, .vas-dt-export :is(.buttons-excel, .buttons-excelHtml5):focus { border-color: #EB8023 !important; background: #fff7ed !important; box-shadow: 0 0 0 3px rgba(235,128,35,.25) !important; outline: 0 !important; } .vas-dt-excel-button img, .vas-dt-export :is(.buttons-excel, .buttons-excelHtml5) img { display: block !important; width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; margin: 0 !important; object-fit: contain !important; pointer-events: none; } /* Keep an original server-side export control alive for postback/download logic. The toolbar proxy remains the only visible trigger. */ .vas-dt-excel-source[data-vas-excel-source-owner] { display: none !important; } .vas-dt-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; margin: 8px 0 0 !important; } .vas-dt-info { min-width: 0; color: #6b7280; font-size: 12px !important; } .vas-dt-paging { margin-left: auto !important; } .vas-dt-paging :is(.dt-paging, .dataTables_paginate) { display: flex !important; justify-content: flex-end !important; max-width: 100%; margin: 0 !important; } .vas-dt-empty-layout { display: none !important; } @media (max-width: 767.98px) { .cbx-control { height: 38px !important; min-height: 38px !important; font-size: 10.5px !important; } .cbx-portal { max-width: calc(100vw - 12px) !important; } .cbx-list { max-height: min(340px, 53vh); } .cbx-input { font-size: 16px !important; } .cbx-option { min-height: 42px !important; } .cbx-option-text { font-size: 10.5px; } .vas-dt-toolbar { grid-template-columns: minmax(0, 1fr) 44px !important; grid-template-areas: "length export" "search search" !important; gap: 7px !important; } .vas-dt-toolbar :is(.dt-length, .dataTables_length, .dt-search, .dataTables_filter, .dt-buttons), .vas-dt-toolbar > :is(.vas-dt-length, .vas-dt-search, .vas-dt-export) { min-height: 44px !important; } .vas-dt-search input[type="search"] { width: 100% !important; height: 44px !important; min-height: 44px !important; font-size: 16px !important; } .vas-dt-search label { font-size: 0 !important; gap: 0 !important; } .vas-dt-search .dt-search > label { width: 0 !important; flex-basis: 0 !important; overflow: hidden !important; } .vas-dt-length label { font-size: 0 !important; gap: 5px !important; } .vas-dt-length label::after { content: "dòng"; color: #475569; font-size: 11px; font-weight: 700; } .vas-dt-length select { height: 44px !important; min-height: 44px !important; font-size: 16px !important; } .vas-dt-export, .vas-dt-export .dt-buttons { width: 44px !important; min-width: 44px !important; } .vas-dt-excel-button, .vas-dt-export :is(.buttons-excel, .buttons-excelHtml5) { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } .vas-dt-footer { flex-direction: column !important; align-items: stretch !important; gap: 7px !important; } .vas-dt-info { width: 100% !important; text-align: center !important; } .vas-dt-paging { display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .vas-dt-paging :is(.dt-paging, .dataTables_paginate) { justify-content: center !important; min-width: max-content; } } @media (max-width: 640px) { .modal .cbx-control, .modal-overlay .cbx-control, .vas-modal-root .cbx-control { height: 38px !important; min-height: 38px !important; font-size: 10.5px !important; } } /* ================================================================ PROMPT HỢP NHẤT 2026 — chỉ trang nội dung, loại trừ Index.aspx Toolbar được khai báo trực tiếp trong ASPX; JS chỉ gắn chức năng. ================================================================ */ body.vas-current-prompt-page .vas-page-table-toolbar, body.vas-current-prompt-page [data-vas-table-toolbar] { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; margin: 0 0 8px !important; } body.vas-current-prompt-page :is(.vas-page-table-length, .vas-page-table-search, .vas-page-table-support-actions) { min-width: 0 !important; margin: 0 !important; } body.vas-current-prompt-page .vas-page-table-search, body.vas-current-prompt-page .vas-page-table-search-input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body.vas-current-prompt-page :is(.vas-page-table-length-select, .vas-page-table-search-input) { height: 34px !important; min-height: 34px !important; margin: 0 !important; border: 1px solid #d1d5db !important; border-radius: 8px !important; background: #fff !important; color: #484848 !important; font-size: 12.5px !important; line-height: 1 !important; box-sizing: border-box !important; outline: 0 !important; transition: border-color .18s ease, box-shadow .18s ease !important; } body.vas-current-prompt-page .vas-page-table-length-select { width: auto !important; min-width: 92px !important; padding: 4px 28px 4px 8px !important; } body.vas-current-prompt-page .vas-page-table-search-input { padding: 4px 9px !important; } body.vas-current-prompt-page :is(.vas-page-table-length-select, .vas-page-table-search-input):focus { border-color: #EB8023 !important; box-shadow: 0 0 0 3px rgba(235,128,35,.25) !important; } body.vas-current-prompt-page .vas-page-table-excel-button { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 7px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; cursor: pointer; transition: opacity .18s ease, transform .18s ease !important; } body.vas-current-prompt-page .vas-page-table-excel-button:is(:hover, :focus-visible) { border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: .78; transform: translateY(-1px); outline: 2px solid rgba(235,128,35,.35) !important; outline-offset: 2px; } body.vas-current-prompt-page .vas-page-table-excel-button:disabled { background: transparent !important; opacity: .4; cursor: not-allowed; transform: none; } body.vas-current-prompt-page .vas-page-table-excel-button > img { display: block !important; width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; margin: 0 !important; object-fit: contain !important; filter: none !important; pointer-events: none; } /* Giữ server event xuất Excel hiện hữu nhưng chỉ toolbar ASPX chuẩn được hiển thị. */ body.vas-current-prompt-page .vas-declared-excel-source { display: none !important; } /* Các control mặc định chỉ là phần dư của cấu hình cũ. Khi toolbar ASPX đã được liên kết, chúng không được xuất hiện thành toolbar thứ hai. */ body.vas-current-prompt-page :is(.dt-container, .dataTables_wrapper).vas-declared-toolbar-mode :is(.dt-length, .dt-search, .dataTables_length, .dataTables_filter, .dt-buttons) { display: none !important; } /* Icon trong cột thao tác và menu thao tác giữ nguyên PNG, không nền/border. */ body.vas-current-prompt-page table :is(button, a, [role="button"]):has(> img[src*="/Images/Control/"]), body.vas-current-prompt-page table :is(button, a, [role="button"]):has(> img[src*="/Images/Menu/MENUALL.png"]) { border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } body.vas-current-prompt-page table :is(button, a, [role="button"]):has(> img[src*="/Images/Control/"]):is(:hover, :focus-visible), body.vas-current-prompt-page table :is(button, a, [role="button"]):has(> img[src*="/Images/Menu/MENUALL.png"]):is(:hover, :focus-visible) { border: 0 !important; background: transparent !important; background-image: none !important; opacity: .78; } body.vas-current-prompt-page img[src*="/Images/Control/"], body.vas-current-prompt-page img[src*="/Images/Menu/"] { filter: none !important; } /* Chuẩn header bảng áp dụng cho các trang nội dung của prompt hiện tại. Index.aspx không có class phạm vi này nên hoàn toàn không bị ảnh hưởng. */ body.vas-current-prompt-page .app-main.vas-ui-scope table thead th { background: #484848 !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.25 !important; vertical-align: middle; } @media (max-width: 767.98px) { body.vas-current-prompt-page .vas-page-table-toolbar, body.vas-current-prompt-page [data-vas-table-toolbar] { grid-template-columns: max-content minmax(0, 1fr) 44px !important; gap: 8px !important; } body.vas-current-prompt-page :is(.vas-page-table-length-select, .vas-page-table-search-input) { height: 44px !important; min-height: 44px !important; } body.vas-current-prompt-page :is(.vas-page-table-length-select, .vas-page-table-search-input):focus { font-size: 16px !important; } /* Mọi control thực sự nhận focus phải đạt 16px, kể cả portal combobox và SweetAlert được append trực tiếp dưới body (ngoài .app-main). */ body.vas-current-prompt-page :is( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea, .cbx-input, .stable-combobox__search, .select2-search__field, .swal2-input ):focus { font-size: 16px !important; } body.vas-current-prompt-page #hrEmployeePage :is(input, select, textarea):focus, body.vas-current-prompt-page #cargoModal .equipment-search:focus, body.vas-current-prompt-page .edb-swal-form .swal2-input:focus { font-size: 16px !important; } body.vas-current-prompt-page .vas-page-table-excel-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 12px !important; } /* Chuẩn mới hủy hoàn toàn card view: mọi DataTable/mobile-card-list trở lại cấu trúc table thật và cuộn ngang trong wrapper hiện hữu. */ body.vas-current-prompt-page .app-main.vas-ui-scope :is(table.dataTable, table.vas-current-data-table, table.mobile-card-list) { display: table !important; width: 100% !important; min-width: max-content !important; table-layout: auto !important; border-collapse: separate; border-spacing: 0; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(table.dataTable, table.vas-current-data-table, table.mobile-card-list) thead { display: table-header-group !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(table.dataTable, table.vas-current-data-table, table.mobile-card-list) tbody { display: table-row-group !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(table.dataTable, table.vas-current-data-table, table.mobile-card-list) tr { display: table-row !important; width: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(table.dataTable, table.vas-current-data-table, table.mobile-card-list) :is(th, td) { display: table-cell !important; width: auto !important; min-width: 0; padding: 4px 6px !important; border-bottom: 1px solid #e5e7eb !important; background: inherit; text-align: inherit; white-space: nowrap !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(table.dataTable, table.vas-current-data-table, table.mobile-card-list) td::before { content: none !important; display: none !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, .dt-layout-table, [class*="-table-wrap"], [class*="-table-scroll"]) { max-width: 100% !important; overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* Bảng danh sách thường (chưa dùng DataTables vì đang bảo toàn GridView/ workflow cũ) cũng không được biến thành card. */ body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, [class*="-table-wrap"], [class*="-table-scroll"]) :is(table, thead, tbody, tr, th, td) { box-sizing: border-box; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, [class*="-table-wrap"], [class*="-table-scroll"]) table { display: table !important; width: 100% !important; min-width: max-content !important; table-layout: auto !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, [class*="-table-wrap"], [class*="-table-scroll"]) table thead { display: table-header-group !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, [class*="-table-wrap"], [class*="-table-scroll"]) table tbody { display: table-row-group !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, [class*="-table-wrap"], [class*="-table-scroll"]) table tr { display: table-row !important; width: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, [class*="-table-wrap"], [class*="-table-scroll"]) table :is(th, td) { display: table-cell !important; width: auto !important; padding: 4px 6px !important; white-space: nowrap !important; } body.vas-current-prompt-page .app-main.vas-ui-scope :is(.table-responsive, [class*="-table-wrap"], [class*="-table-scroll"]) table td::before { content: none !important; display: none !important; } } /* Ngoại lệ cũ căn modal nhập liệu lên đầu bị hủy bởi chuẩn modal giữa màn hình. */ body.vas-current-prompt-page #formWrap.entry-modal { align-items: center !important; justify-content: center !important; } body.vas-current-prompt-page :is(.btn-close, .btn-close-white):has(img[src*="/Images/Control/CLOSE.png"]) { filter: none !important; } @media (prefers-reduced-motion: reduce) { body.vas-current-prompt-page *, body.vas-current-prompt-page *::before, body.vas-current-prompt-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } :root { --vas-ui-font: "Vasfont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --vas-ui-brand: #EB8023; --vas-ui-brand-hover: #d6701a; --vas-ui-dark: #484848; --vas-ui-dark-hover: #363636; --vas-ui-success: #16A34A; --vas-ui-success-hover: #15803d; --vas-ui-danger: #DC2626; --vas-ui-danger-hover: #b91c1c; --vas-ui-warning: #F5A623; --vas-ui-warning-hover: #d97706; --vas-ui-info: #6C5CE7; --vas-ui-info-hover: #5b4bd6; --vas-ui-border: #d1d5db; --vas-ui-focus: 0 0 0 3px rgba(235, 128, 35, .25); --vas-ui-radius: 10px; } body { font-family: var(--vas-ui-font) !important; font-size: 13px; line-height: 1.4; } .app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page { color: #334155; font-family: var(--vas-ui-font) !important; font-size: 13px; line-height: 1.4; } .app-main.vas-ui-scope *, body.vas-ui-scope.vas-standards-page * { font-family: var(--vas-ui-font) !important; } /* Preserve icon and code typefaces after the page-wide font rule. */ .bi, [class^="bi-"], [class*=" bi-"], .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: "bootstrap-icons" !important; } .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"], .fa::before, .fas::before, .far::before, .fab::before, .fa-solid::before, .fa-regular::before, .fa-brands::before, [class^="fa-"]::before, [class*=" fa-"]::before { font-family: var(--fa-style-family, "Font Awesome 6 Free") !important; } .material-icons, .material-icons-outlined, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp { font-family: "Material Symbols Outlined", "Material Icons" !important; } code, pre, kbd, samp, .td-code { font-family: Consolas, "Courier New", monospace !important; } /* Typography by context. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(p, li, dd, dt, .body-text, .description) { font-size: 13px; line-height: 1.4; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) h1, :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-title, .page-title, .hero-title, [class$="-page-title"], [class$="-hero-title"]) { font-size: 19px !important; font-weight: 900 !important; line-height: 1.28 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) h2, :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.card-title, .section-title, .panel-title, [class$="-card-title"], [class$="-section-title"]) { font-size: 15px !important; font-weight: 800 !important; line-height: 1.28 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(h3, h4, h5, h6, .modal-title, [class$="-modal-title"], [class$="-chart-title"]) { font-size: 13px !important; font-weight: 800 !important; line-height: 1.3 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-kicker, [class$="-kicker"]) { font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; text-transform: uppercase; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-subtitle, .page-subtitle, .hero-subtitle, [class$="-subtitle"]) { font-size: 12px !important; line-height: 1.4 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(label, .form-label, caption, .caption, .form-text, small) { font-size: 11.5px; line-height: 1.35; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea, .form-control, .form-select) { border-radius: 10px; font-size: 13px !important; line-height: 1.35; padding: 4px 8px; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(input, select, textarea, .form-control, .form-select):focus { border-color: var(--vas-ui-brand); box-shadow: var(--vas-ui-focus); outline: 0; } /* Dense table and DataTables typography. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table { font-size: 12.5px !important; line-height: 1.35; font-variant-numeric: tabular-nums; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table th { font-size: 11.5px !important; font-weight: 700 !important; line-height: 1.25 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table td { font-size: 12.5px !important; line-height: 1.35 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(table.dataTable, table.rla-table, table.table, table.mobile-card-list) thead th { padding: 6px 8px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(table.dataTable, table.rla-table, table.table, table.mobile-card-list) tbody td { padding: 5px 8px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.dt-container, .dataTables_wrapper, .dt-info, .dataTables_info, .dt-paging, .dataTables_paginate, .dt-search, .dataTables_filter, .dt-length, .dataTables_length) { font-size: 12px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.dt-search input, .dataTables_filter input, .dt-length select, .dataTables_length select) { font-size: 13px !important; } /* --------------------------------------------------------------- Button foundation Do not force display: hidden Web Forms postback bridges stay hidden. --------------------------------------------------------------- */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(button, input[type="button"], input[type="submit"], input[type="reset"], a.btn, a[role="button"], a[href*="__doPostBack"], a[class$="-btn"], a[class*="-btn "]) { box-sizing: border-box; min-height: 34px !important; max-width: 100%; padding: 6px 14px !important; border-radius: var(--vas-ui-radius) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; gap: 6px; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; cursor: pointer; transition: all .18s ease; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) { border: 1px solid var(--vas-ui-border); background: #fff; color: var(--vas-ui-dark); } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(button, input[type="button"], input[type="submit"], input[type="reset"], a.btn, a[role="button"], a[href*="__doPostBack"], a[class$="-btn"], a[class*="-btn "]):focus-visible { border-color: var(--vas-ui-brand) !important; box-shadow: var(--vas-ui-focus) !important; outline: 0 !important; } /* Primary / brand. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-primary, .btn-brand, .btn-main, .btn-submit, [class*="-btn-primary"], [class*="-button-primary"], [class*="-btn-brand"], [class*="-button-brand"], [class*="-btn-main"], [class*="-button-main"], [class*="-btn-submit"], [class*="-button-submit"], button.is-brand, input.is-brand, a.is-brand) { --bs-btn-bg: var(--vas-ui-brand); --bs-btn-border-color: var(--vas-ui-brand); --bs-btn-hover-bg: var(--vas-ui-brand-hover); --bs-btn-hover-border-color: var(--vas-ui-brand-hover); border-color: var(--vas-ui-brand) !important; background: var(--vas-ui-brand) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-primary, .btn-brand, .btn-main, .btn-submit, [class*="-btn-primary"], [class*="-button-primary"], [class*="-btn-brand"], [class*="-button-brand"], [class*="-btn-main"], [class*="-button-main"], [class*="-btn-submit"], [class*="-button-submit"], button.is-brand, input.is-brand, a.is-brand):hover { border-color: var(--vas-ui-brand-hover) !important; background: var(--vas-ui-brand-hover) !important; color: #fff !important; } /* Secondary / outline. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-secondary, .btn-outline-secondary, .btn-soft, .btn-gray, [class*="-btn-light"], [class*="-button-light"], [class*="-btn-soft"], [class*="-button-soft"], [class*="-btn-gray"], [class*="-button-gray"]) { --bs-btn-bg: #fff; --bs-btn-color: var(--vas-ui-dark); --bs-btn-border-color: var(--vas-ui-border); border-color: var(--vas-ui-border) !important; background: #fff !important; color: var(--vas-ui-dark) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-secondary, .btn-outline-secondary, .btn-soft, .btn-gray, [class*="-btn-light"], [class*="-button-light"], [class*="-btn-soft"], [class*="-button-soft"], [class*="-btn-gray"], [class*="-button-gray"]):hover { border-color: var(--vas-ui-brand) !important; background: #fff !important; color: var(--vas-ui-dark) !important; box-shadow: var(--vas-ui-focus) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-outline-primary, [class*="-btn-outline-primary"]) { border: 1px solid var(--vas-ui-brand) !important; background: #fff !important; color: var(--vas-ui-brand) !important; } /* Dark. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-dark, [class*="-btn-dark"], [class*="-button-dark"]) { border-color: var(--vas-ui-dark) !important; background: var(--vas-ui-dark) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-dark, [class*="-btn-dark"], [class*="-button-dark"]):hover { border-color: var(--vas-ui-dark-hover) !important; background: var(--vas-ui-dark-hover) !important; color: #fff !important; } /* Success / approve. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-success, .btn-green, .btn-approve, [class*="-btn-success"], [class*="-button-success"], [class*="-btn-approve"], [class*="-button-approve"], button.is-success, input.is-success, a.is-success) { border-color: var(--vas-ui-success) !important; background: var(--vas-ui-success) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-success, .btn-green, .btn-approve, [class*="-btn-success"], [class*="-button-success"], [class*="-btn-approve"], [class*="-button-approve"], button.is-success, input.is-success, a.is-success):hover { border-color: var(--vas-ui-success-hover) !important; background: var(--vas-ui-success-hover) !important; color: #fff !important; } /* Danger / reject. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-danger, .btn-red, .btn-reject, [class*="-btn-danger"], [class*="-button-danger"], [class*="-btn-reject"], [class*="-button-reject"]) { border-color: var(--vas-ui-danger) !important; background: var(--vas-ui-danger) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-danger, .btn-red, .btn-reject, [class*="-btn-danger"], [class*="-button-danger"], [class*="-btn-reject"], [class*="-button-reject"]):hover { border-color: var(--vas-ui-danger-hover) !important; background: var(--vas-ui-danger-hover) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-danger-outline, .btn-outline-danger, .btn-delete, [class*="-btn-delete"], [class*="-button-delete"], [class*="-delete-btn"]) { border: 1px solid #fecaca !important; background: #fff !important; color: var(--vas-ui-danger) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-danger-outline, .btn-outline-danger, .btn-delete, [class*="-btn-delete"], [class*="-button-delete"], [class*="-delete-btn"]):hover { border-color: #fecaca !important; background: #fef2f2 !important; color: var(--vas-ui-danger-hover) !important; } /* Warning, information and ghost actions. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-warning, [class*="-btn-warning"], [class*="-button-warning"]) { border-color: var(--vas-ui-warning) !important; background: var(--vas-ui-warning) !important; color: var(--vas-ui-dark) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-warning, [class*="-btn-warning"], [class*="-button-warning"]):hover { border-color: var(--vas-ui-warning-hover) !important; background: var(--vas-ui-warning-hover) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-info, [class*="-btn-info"], [class*="-button-info"], [class*="-btn-ai"], [class*="-button-ai"]) { border-color: var(--vas-ui-info) !important; background: var(--vas-ui-info) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-info, [class*="-btn-info"], [class*="-button-info"], [class*="-btn-ai"], [class*="-button-ai"]):hover { border-color: var(--vas-ui-info-hover) !important; background: var(--vas-ui-info-hover) !important; color: #fff !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-link, .btn-ghost, [class*="-btn-ghost"], [class*="-button-ghost"]) { border-color: transparent !important; background: transparent !important; color: var(--vas-ui-brand) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-link, .btn-ghost, [class*="-btn-ghost"], [class*="-button-ghost"]):hover { background: rgba(235, 128, 35, .08) !important; color: var(--vas-ui-brand-hover) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(button, input[type="button"], input[type="submit"], input[type="reset"], a.btn, a[role="button"], a[href*="__doPostBack"]):is(:disabled, .disabled, [aria-disabled="true"]) { border-color: #e5e7eb !important; background: #e5e7eb !important; color: #9ca3af !important; box-shadow: none !important; cursor: not-allowed !important; opacity: 1 !important; } /* Compact toolbar/table actions. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-sm, .btn-mini, .td-btn, .act-btn, .dt-tool-btn, .wk-btn-mini, [class*="-btn-mini"], [class*="-button-mini"], [class*="-tool-btn"], [class*="-page-btn"], [class*="-pager-button"]) { min-height: 32px !important; padding: 4px 10px !important; font-size: 12px !important; } /* Standard PNG action icons from Images/Control and Images/Menu. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( img.action-icon, img.btn-img-icon, img.table-action-img, img.action-img, img.gsp-icon-img, .action-desktop img, .action-mobile img, button > img[src*="/Images/Control/"], button > img[src*="/Images/Menu/MENUALL.png"], a[role="button"] > img[src*="/Images/Control/"], a[class*="-btn"] > img[src*="/Images/Control/"] ) { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; object-fit: contain; display: block; flex: 0 0 20px; margin: 0; pointer-events: none; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .dt-buttons img[src*="/Images/Control/EXCEL.png"] { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex-basis: 22px; } /* Giữ nguyên asp:Button/code-behind cũ nhưng hiển thị nút xuất Excel dạng icon-only. */ .rla-server-excel-wrap { --rla-server-excel-icon: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } input[type="submit"].rla-server-excel-button, input[type="button"].rla-server-excel-button { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; font-size: 0 !important; color: transparent !important; background-image: var(--rla-server-excel-icon) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px 22px !important; } @media (max-width: 767.98px) { input[type="submit"].rla-server-excel-button, input[type="button"].rla-server-excel-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } } /* Icon-only actions. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-icon, .table-icon-btn, .row-action-trigger, .act-btn, [class$="-icon-btn"], [class*="-icon-btn "], [class$="-btn-icon"], [class*="-btn-icon "], [class$="-icon-action"], [class*="-icon-action "]) { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; } /* Close controls use the standard CLOSE.png child icon. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-close, .btn-close-white, button.modal-close) { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border-radius: 10px !important; background-image: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; } /* Modal footer. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .modal-footer :is(.btn, button, input[type="button"], input[type="submit"], a[role="button"]) { min-height: 36px !important; padding: 6px 16px !important; font-size: 13px !important; } /* DataTables toolbar is the deliberate compact mobile exception. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .dt-buttons :is(.btn, .dt-button, button) { height: 38px !important; min-height: 38px !important; padding: 0 10px !important; font-size: 12px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.dt-paging-button, .paginate_button) { min-height: 32px !important; border-radius: 8px !important; font-size: 12px !important; } /* Stable-select is a widget, not a regular command button. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .stable-combobox__control { min-height: 34px !important; height: 34px !important; padding: 4px 8px !important; font-size: 12.5px !important; font-weight: 700 !important; text-align: left; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .stable-combobox__value { font-size: 12.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .stable-combobox__option { min-height: 30px !important; height: auto !important; padding: 6px 8px !important; font-size: 12px !important; font-weight: 700 !important; text-align: left; white-space: normal; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .row-action-menu button { width: 100% !important; min-height: 38px !important; height: auto !important; padding: 7px 9px !important; font-size: 12px !important; text-align: left; white-space: normal; } /* Mobile top controls remain transparent image buttons. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-mobile-top-btn, .rlh-mobile-top-btn, .mobile-top-btn, .rsp-top-btn) { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* MENUUP remains a full 42px transparent PNG, not a compact row-action icon. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) button > img[src*="/Images/Menu/MENUUP.png"] { width: 42px !important; height: 42px !important; max-width: 42px !important; max-height: 42px !important; flex-basis: 42px; } /* Badge/status typography. Layout aliases keep their page-specific geometry. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .badge { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border-radius: 6px !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .02em; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.status-badge, .badge-status, .status-pill, .wk-badge-mini) { border-radius: 6px !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .02em; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.badge, .status-badge, .badge-status, .status-pill):is(.badge-success, .status-active, .status-approved, .is-approved) { background: #dcfce7 !important; color: var(--vas-ui-success) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.badge, .status-badge, .badge-status, .status-pill):is(.badge-warning, .status-pending, .status-processing, .is-pending) { background: #fef3c7 !important; color: #d97706 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.badge, .status-badge, .badge-status, .status-pill):is(.badge-danger, .status-rejected, .status-error, .is-rejected) { background: #fee2e2 !important; color: var(--vas-ui-danger) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.badge, .status-badge, .badge-status, .status-pill):is(.badge-secondary, .status-inactive, .status-cancel, .status-cancelled) { background: #f3f4f6 !important; color: #6b7280 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.badge, .status-badge, .badge-status, .status-pill):is(.badge-info, .status-new) { background: #ede9fe !important; color: var(--vas-ui-info) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.badge, .status-badge, .badge-status, .status-pill):is(.badge-complete, .status-complete, .status-done) { background: #ccfbf1 !important; color: #0D9488 !important; } /* Summary, empty state, breadcrumb and tooltips. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.dashboard-sumary-card__value, .summary-value, [class$="-summary-value"]) { font-size: 22px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.dashboard-sumary-card__sub, .summary-label, [class$="-summary-label"]) { font-size: 11px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.breadcrumb, .breadcrumb-item) { font-size: 11.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .rla-empty-state :is(.empty-title, [class$="-title"]) { font-size: 14px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .rla-empty-state :is(.empty-description, [class$="-description"], p) { font-size: 12px !important; } .select2-container, .select2-dropdown, .flatpickr-calendar, .swal2-container, .toastify, .tippy-box { font-family: var(--vas-ui-font) !important; } .tippy-box { font-size: 11.5px !important; } .swal2-title { font-size: 15px !important; } .swal2-html-container, .swal2-content { font-size: 12.5px !important; } .swal2-styled { min-height: 38px !important; padding: 6px 16px !important; border-radius: 10px !important; font-family: var(--vas-ui-font) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; } @media (max-width: 767.98px) { body, .app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page { font-size: 12px; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(p, li, dd, dt, .body-text, .description) { font-size: 12px; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) h1, :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-title, .page-title, .hero-title, [class$="-page-title"], [class$="-hero-title"]) { font-size: 16px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) h2, :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.card-title, .section-title, .panel-title, [class$="-card-title"], [class$="-section-title"]) { font-size: 13px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-kicker, [class$="-kicker"]) { font-size: 10px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-subtitle, .page-subtitle, .hero-subtitle, [class$="-subtitle"]) { font-size: 11px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(label, .form-label, caption, .caption, .form-text, small) { font-size: 11px; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table th { font-size: 11px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table td { font-size: 11.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(table.dataTable, table.rla-table, table.table, table.mobile-card-list) thead th { padding: 5px 7px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(table.dataTable, table.rla-table, table.table, table.mobile-card-list) tbody td { padding: 4px 6px !important; } /* Real 16px inputs prevent iOS Safari focus zoom. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea, .form-control, .form-select, .dt-search input, .dataTables_filter input, .dt-length select, .dataTables_length select, .select2-search__field, .stable-combobox__search), body :is(.select2-search__field, .flatpickr-time input, .flatpickr-time .flatpickr-am-pm, .swal2-input, .swal2-textarea) { font-size: 16px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(button, input[type="button"], input[type="submit"], input[type="reset"], a.btn, a[role="button"], a[href*="__doPostBack"], a[class$="-btn"], a[class*="-btn "]) { min-height: 44px !important; padding: 6px 12px !important; font-size: 12px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-icon, .table-icon-btn, .row-action-trigger, .act-btn, [class$="-icon-btn"], [class*="-icon-btn "], [class$="-btn-icon"], [class*="-btn-icon "], [class$="-icon-action"], [class*="-icon-action "]) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.btn-close, .btn-close-white, button.modal-close) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .modal-footer :is(.btn, button, input[type="button"], input[type="submit"], a[role="button"]) { min-height: 44px !important; padding: 6px 14px !important; font-size: 12.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.form-actions, .toolbar-actions, .action-buttons, .button-group, .modal-footer) { gap: 8px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .dt-buttons :is(.btn, .dt-button, button) { width: 42px !important; min-width: 42px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; font-size: 11.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.dt-paging-button, .paginate_button) { min-height: 44px !important; font-size: 11.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .stable-combobox__control { min-height: 44px !important; height: 44px !important; font-size: 12px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .stable-combobox__value { font-size: 12px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .stable-combobox__option { min-height: 44px !important; padding: 7px 9px !important; font-size: 12px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .row-action-menu button { min-height: 44px !important; font-size: 12px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.rla-mobile-top-btn, .rlh-mobile-top-btn, .mobile-top-btn, .rsp-top-btn) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.badge, .status-badge, .badge-status, .status-pill, .wk-badge-mini) { min-height: 18px; padding: 2px 7px; font-size: 10px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is(.dashboard-sumary-card__value, .summary-value, [class$="-summary-value"]) { font-size: 18px !important; } .tippy-box { font-size: 11px !important; } .swal2-title { font-size: 13px !important; } .swal2-html-container, .swal2-content { font-size: 12px !important; } .swal2-styled { min-height: 44px !important; padding: 6px 14px !important; font-size: 12px !important; } } /* Final cascade lock for shared widgets (must remain last in this file). */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( select.cbx-select.cbx-native, select.stable-select.stable-select-native, select.select2-hidden-accessible, select.stable-select-origin, select.stable-select-hidden, select.hr010-combo-native, select.hr010-rpt-search-native, select.hr010-target-search-native, select.supplier-select-native, select.hc-native ) { position: absolute !important; width: 1px !important; max-width: 1px !important; min-width: 1px !important; height: 1px !important; min-height: 1px !important; } body :is(.modal, .modal-overlay, .vas-modal-root) :is( select.cbx-select.cbx-native, select.stable-select.stable-select-native, select.select2-hidden-accessible, select.stable-select-origin, select.stable-select-hidden, select.hr010-combo-native, select.hr010-rpt-search-native, select.hr010-target-search-native, select.supplier-select-native, select.hc-native ) { position: absolute !important; width: 1px !important; max-width: 1px !important; min-width: 1px !important; height: 1px !important; min-height: 1px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( .page-search-control, button.stable-combobox__control, button.cbx-control, button.stable-select-btn, button.stable-trigger, button.hr010-combo-control, button.hr010-rpt-search-control, button.hr010-target-combo-control, button.hr-employee-search-control, button.sl001-search-control, button.supplier-combo-control, button.hc-combo-control, button.rs-combo-control, button.crane-combo-control ) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; padding: 4px 10px !important; border: 1px solid #d1ddd7 !important; border-radius: 9px !important; background: #fff !important; color: #17211d !important; font-size: 11.5px !important; text-align: left !important; box-sizing: border-box !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container :is( .select2-selection--single, .select2-selection--multiple, .select2-choice ) { width: 100% !important; min-width: 0 !important; min-height: 38px !important; border: 1px solid #d1ddd7 !important; border-radius: 9px !important; background: #fff !important; box-sizing: border-box !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container :is( .select2-selection--single .select2-selection__rendered, .select2-choice ) { min-width: 0 !important; line-height: 36px !important; padding-left: 10px !important; color: #17211d !important; font-size: 11.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container :is( .select2-selection--single .select2-selection__arrow, .select2-arrow ) { height: 36px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container--open :is( .select2-selection--single, .select2-selection--multiple ) { border-color: #0f6b4f !important; box-shadow: 0 0 0 3px rgba(15,107,79,.13) !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .form-control-color { width: 3rem !important; max-width: 3rem !important; min-width: 3rem !important; } body :is(.dt-length, .dataTables_length) select { width: auto !important; max-width: none !important; min-width: 66px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) button.cbx-control { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; padding: 4px 10px !important; border: 1px solid #d1ddd7 !important; border-radius: 9px !important; background: #fff !important; color: #17211d !important; font-size: 11.5px !important; text-align: left !important; } body .vas-modal-panel { display: flex !important; flex-direction: column !important; max-height: 92dvh !important; overflow: hidden !important; } body .vas-modal-root { align-items: center !important; justify-content: center !important; place-items: center !important; } body .vas-modal-root:not(.modal):is(.is-open, .open, .show, .active, [aria-hidden="false"]), body .vas-modal-root[style*="display: block" i], body .vas-modal-root[style*="display:block" i] { display: flex !important; } body .vas-modal-footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; width: 100% !important; } body .vas-modal-footer .vas-modal-close-btn { min-width: 82px !important; min-height: 38px !important; height: 38px !important; padding: 6px 16px !important; border-radius: 9px !important; font-size: 13px !important; } body .swal2-container { /* Luôn cao hơn modal/combobox nội bộ; tránh popup tồn tại nhưng bị backdrop của trang che khiến người dùng tưởng giao diện bị treo. */ z-index: 2147483000 !important; } body .vas-dt-toolbar .vas-dt-search input[type="search"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; font-size: 13px !important; } body .vas-dt-toolbar .vas-dt-length select { width: auto !important; min-width: 66px !important; height: 38px !important; min-height: 38px !important; } body .vas-dt-toolbar .vas-dt-export :is(.vas-dt-excel-button, .buttons-excel, .buttons-excelHtml5) { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; font-size: 0 !important; } @media (max-width: 767.98px) { :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) :is( .page-search-control, button.stable-combobox__control, button.cbx-control, button.stable-select-btn, button.stable-trigger, button.hr010-combo-control, button.hr010-rpt-search-control, button.hr010-target-combo-control, button.hr-employee-search-control, button.sl001-search-control, button.supplier-combo-control, button.hc-combo-control, button.rs-combo-control, button.crane-combo-control ) { height: 38px !important; min-height: 38px !important; font-size: 10.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container :is( .select2-selection--single, .select2-choice ) { height: 38px !important; min-height: 38px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container .select2-selection--multiple { min-height: 38px !important; height: auto !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container :is( .select2-selection--single .select2-selection__rendered, .select2-choice ) { line-height: 36px !important; font-size: 10.5px !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .select2-container :is( .select2-selection--single .select2-selection__arrow, .select2-arrow ) { height: 36px !important; } body .vas-modal-footer .vas-modal-close-btn { min-width: 88px !important; min-height: 44px !important; height: 44px !important; font-size: 12.5px !important; } body .vas-dt-toolbar .vas-dt-search input[type="search"] { height: 44px !important; min-height: 44px !important; font-size: 16px !important; } body .vas-dt-toolbar .vas-dt-length select { height: 44px !important; min-height: 44px !important; font-size: 16px !important; } body .vas-dt-toolbar .vas-dt-export :is(.vas-dt-excel-button, .buttons-excel, .buttons-excelHtml5) { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } } /* Explicit per-control escape hatch. Duplicate class specificity ensures this override wins over the shared typed-input baseline even with !important. */ :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) .vas-width-auto.vas-width-auto { width: auto !important; max-width: none !important; } /* Final CBX locks: keep the searchable-select geometry above generic button rules. */ body button.cbx-option { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; width: 100% !important; min-height: 38px !important; height: auto !important; margin: 0 !important; padding: 6px 8px !important; border: 0 !important; border-radius: 7px !important; font-size: 11px !important; line-height: 1.25 !important; text-align: left !important; } body button.cbx-clear { display: inline-flex !important; width: 34px !important; min-width: 34px !important; height: 35px !important; min-height: 35px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #cedbd4 !important; border-radius: 8px !important; font-size: 18px !important; line-height: 1 !important; } body button.cbx-clear[hidden] { display: none !important; } body button.cbx-control:focus-visible, body .cbx-combo.is-open button.cbx-control { outline: none !important; border-color: #0f6b4f !important; box-shadow: 0 0 0 3px rgba(15,107,79,.13) !important; } body .cbx-field.is-required .cbx-control.is-invalid { border-color: #dc2626 !important; background: #fff1f2 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important; } body .cbx-field.is-required .cbx-combo.is-disabled .cbx-control { border-color: #d1d5db !important; background: #f3f4f6 !important; color: #94a3b8 !important; } @media (max-width: 640px) { body button.cbx-option { min-height: 42px !important; font-size: 10.5px !important; } body .cbx-option-text { font-size: 10.5px !important; } } /* Visual bridge for existing searchable engines kept for business compatibility. */ body :is( .stable-combobox__option, .stable-select-option, .stable-option, .hr010-combo-option, .hr010-rpt-search-option, .hr010-target-combo-option, .hr-employee-search-option, .sl001-search-option, .supplier-combo-option, .hc-portal-option, .select2-results__option ) { min-height: 38px !important; border-radius: 7px !important; color: #17211d !important; font-size: 11px !important; line-height: 1.25 !important; transition: all .18s ease !important; } body :is( .stable-combobox__option, .stable-select-option, .stable-option, .hr010-combo-option, .hr010-rpt-search-option, .hr010-target-combo-option, .hr-employee-search-option, .sl001-search-option, .supplier-combo-option, .hc-portal-option, .select2-results__option ):is(:hover, :focus, .is-active, .active, .select2-results__option--highlighted) { background: #eaf7f0 !important; color: #0c7049 !important; } body :is( .stable-combobox__option, .stable-select-option, .stable-option, .hr010-combo-option, .hr010-rpt-search-option, .hr010-target-combo-option, .hr-employee-search-option, .sl001-search-option, .supplier-combo-option, .hc-portal-option, .select2-results__option ):is(.is-selected, .selected, [aria-selected="true"], .select2-results__option--selected) { background: #dff3e8 !important; color: #0a6542 !important; font-weight: 850 !important; } @media (max-width: 640px) { body :is( .stable-combobox__option, .stable-select-option, .stable-option, .hr010-combo-option, .hr010-rpt-search-option, .hr010-target-combo-option, .hr-employee-search-option, .sl001-search-option, .supplier-combo-option, .hc-portal-option, .select2-results__option ) { min-height: 42px !important; font-size: 10.5px !important; } body :is( .select2-search__field, .stable-combobox__search, .hr010-combo-search, .hr010-rpt-search-input, .hr010-target-combo-search, .hr-employee-search-input, .sl001-search-input, .supplier-combo-search, .hc-portal-search ) { font-size: 16px !important; } } /* Final lock cho toolbar ASPX của bản prompt hợp nhất. Đặt cuối cascade để không bị nền tảng nút cũ thêm radius, nền hoặc border vào icon Excel. */ body.vas-current-prompt-page .app-main.vas-ui-scope button.vas-page-table-excel-button { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 7px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; } body.vas-current-prompt-page .app-main.vas-ui-scope button.vas-page-table-excel-button:is(:hover, :focus, :focus-visible, :active) { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } @media (max-width: 767.98px) { body.vas-current-prompt-page .app-main.vas-ui-scope button.vas-page-table-excel-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 12px !important; } } /* Hero dùng chung cho các trang nội dung theo bản prompt hợp nhất. */ body.vas-current-prompt-page .rla-hero { position: relative; overflow: hidden; border-radius: 10px; padding: 14px 16px 12px; margin: 0 0 8px; color: #fff; background: #484848; box-shadow: 0 6px 18px rgba(15, 23, 42, .12); } body.vas-current-prompt-page .rla-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #EB8023; } body.vas-current-prompt-page .rla-hero::after { content: ""; position: absolute; top: -70px; right: -70px; width: 180px; height: 180px; border-radius: 50%; background: rgba(235, 128, 35, .20); pointer-events: none; } body.vas-current-prompt-page .rla-hero-content, body.vas-current-prompt-page .rla-hero > :is(.rla-kicker, .rla-title, .rla-subtitle) { position: relative; z-index: 1; } body.vas-current-prompt-page .rla-hero .rla-kicker { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; margin: 0 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fed7aa !important; } body.vas-current-prompt-page .rla-hero .rla-title { margin: 0; color: #fff !important; } body.vas-current-prompt-page .rla-hero .rla-subtitle { max-width: 900px; margin: 4px 0 0; color: rgba(255, 255, 255, .78) !important; } @media (max-width: 767.98px) { body.vas-current-prompt-page .rla-hero { padding: 10px 12px; margin-bottom: 6px; } body.vas-current-prompt-page .rla-hero .rla-kicker { min-height: 18px; padding: 2px 6px; font-size: 10px !important; } body.vas-current-prompt-page .rla-hero .rla-title { font-size: 16px !important; } body.vas-current-prompt-page .rla-hero .rla-subtitle { margin-top: 3px; font-size: 11px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ================================================================ CỘT THAO TÁC TRÊN MOBILE — ICON NGANG GIỐNG DESKTOP vas-ui-standards.js đánh dấu đúng nhóm icon của từng row sau khi Repeater/GridView/DataTables/UpdatePanel render. Cách này tương thích các prefix cũ khác nhau và không tác động MENUALL ngoài table. ================================================================ */ @media (max-width: 900px) { :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table :is(td, th).vas-table-action-cell { overflow: visible !important; white-space: nowrap !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table .vas-mobile-action-trigger { display: none !important; visibility: hidden !important; pointer-events: none !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table .vas-table-actions-inline { position: static !important; inset: auto !important; z-index: auto !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; float: none !important; width: max-content !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table .vas-table-actions-inline::before, :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table .vas-table-actions-inline::after { content: none !important; display: none !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table .vas-table-action-control { position: static !important; display: inline-flex !important; flex: 0 0 44px !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-size: 0 !important; line-height: 1 !important; text-decoration: none !important; vertical-align: middle !important; visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table .vas-table-action-control:is(:hover, :focus, :focus-visible, :active) { border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: 0 0 0 3px rgba(235, 128, 35, .25) !important; outline: none !important; } :is(.app-main.vas-ui-scope, body.vas-ui-scope.vas-standards-page) table .vas-table-action-control img[src*="/Images/Control/"] { display: block !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 0 !important; object-fit: contain !important; pointer-events: none !important; } }