@fui-org/fui-cli 2.1.4 → 2.2.1

package/skills/{fui-skill → fui}/assets/projectdefaultstyle.css

@@ -1,490 +1,490 @@
-.ga-1{
-    gap: 4px;
-}
-.ga-2{
-    gap: 8px;
-}
-.ga-3{
-    gap: 12px;
-}
-.ga-4{
-    gap: 16px;
-}
-.ga-5{
-    gap: 20px;
-}
-.ga-6{
-    gap: 24px;
-}
-.ga-7{
-    gap: 28px;
-}
-.ga-8{
-    gap: 32px;
-}
-.ga-9{
-    gap: 36px;
-}
-.ga-10{
-    gap: 40px;
-}
-.ga-11{
-    gap: 44px;
-}
-.ga-12{
-    gap: 48px;
-}
-/* ------------------------------------------------------------------------ */
-.mw-200 {
-    max-width: 200px;
-}
-
-.mw-300 {
-    max-width: 300px;
-}
-
-.mw-400 {
-    max-width: 400px;
-}
-
-.mw-500 {
-    max-width: 500px;
-}
-
-.mw-600 {
-    max-width: 600px;
-}
-
-.mw-700 {
-    max-width: 700px;
-}
-
-.mw-800 {
-    max-width: 800px;
-}
-
-.mw-900 {
-    max-width: 900px;
-}
-
-.mw-1000 {
-    max-width: 1000px;
-}
-
-.mw-1200 {
-    max-width: 1200px;
-}
-
-.mw-1400 {
-    max-width: 1400px;
-}
-
-.hidden-container{
-    display: none;
-}
-
-/* ============================================================= */
-html {
-    overflow-y: auto;
-    font-family: Roboto, sans-serif;
-}
-
-b {
-    font-weight: 500;
-}
-
-.wrs_editor .wrs_tickContainer {
-    display: none;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-input[type=number] {
-    -moz-appearance: textfield;
-}
-
-/* ================================================================================================= */
-/* json ace_editor  */
-.ace_editor.ace-jsoneditor {
-    font-size: 0.9em !important;
-}
-
-.jsoneditor-poweredBy {
-    display: none;
-}
-
-.jsoneditor {
-    border: none !important;
-}
-
-.jsoneditor-menu {
-    background-color: #1976d2 !important;
-    border: none !important;
-}
-
-/* jconfirm  */
-@media only screen and (min-width: 600px) {
-    .jconfirm .jconfirm-box {
-        min-width: 460px;
-        max-width: 500px;
-    }
-}
-
-.jconfirm .jconfirm-box {
-    font-family: Roboto, sans-serif !important;
-    border-top: 0 !important;
-}
-
-.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
-.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
-    font-weight: 400 !important;
-    font-size: .9rem !important;
-}
-
-.jconfirm .jconfirm-box-container {
-    margin: auto;
-    max-width: none;
-}
-
-.jconfirm .jconfirm-box .jconfirm-buttons>button {
-    margin-left: 10px !important;
-    margin-right: 10px !important;
-
-}
-
-.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,
-.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
-    font-size: 2.9em !important;
-    margin: 0 0 15px 0 !important;
-}
-
-.jconfirm .jconfirm-box div.jconfirm-title-c {
-    display: grid;
-    line-height: inherit;
-    text-align: center;
-    font-size: 1.1rem !important;
-}
-
-.jconfirm .jconfirm-box .jconfirm-content-pane .jconfirm-content,
-.jconfirm .jconfirm-box .jconfirm-buttons{
-    text-align: center;
-    float: inherit;
-}
-
-
-/* ============================================================== */
-
-.ck.ck-editor {
-    overflow-x: hidden;
-    font-size: initial;
-}
-
-
-/* =========== menu for mobile =================================================== */
-@media only screen and (max-width: 959px) {
-    .v-application .hidden-sm-and-down {
-        display: none !important;
-    }
-}
-
-
-/*================== Custom style ===================================================*/
-.v-text-field--filled.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
-.v-text-field--filled.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
-.v-text-field--filled.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
-.v-text-field--full-width.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
-.v-text-field--full-width.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
-.v-text-field--full-width.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
-.v-text-field--outlined.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
-.v-text-field--outlined.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
-.v-text-field--outlined.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot {
-    min-height: 36px;
-}
-
-.v-select.v-text-field--outlined:not(.v-text-field--single-line).v-input--dense .v-select__selections {
-    padding: 0px 0;
-}
-
-.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-inner,
-.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-outer,
-.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-inner,
-.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer,
-.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-inner,
-.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-outer,
-.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-inner,
-.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer {
-    margin-top: 6px;
-}
-.v-text-field--outlined.v-input--dense .v-label {
-    top: 8px;
-}
-
-.v-text-field input {
-    padding: 9px 0 7px 0;
-}
-
-.v-btn {
-    font-weight: 400;
-}
-
-.v-textarea textarea {
-    line-height: 1.5;
-}
-
-/*=================== v-data-table ======================================================= */
-.v-data-table>.v-data-table__wrapper>table>tbody>tr>td,
-.v-data-table>.v-data-table__wrapper>table>tbody>tr>th,
-.v-data-table>.v-data-table__wrapper>table>tfoot>tr>td,
-.v-data-table>.v-data-table__wrapper>table>tfoot>tr>th,
-.v-data-table>.v-data-table__wrapper>table>thead>tr>td,
-.v-data-table>.v-data-table__wrapper>table>thead>tr>th {
-    padding: 0 12px;
-}
-
-.v-select__selection--comma,
-.theme--light.v-data-table thead tr th,
-.theme--light.v-data-table,
-.theme--light.v-input input {
-    /* color: #000 !important; */
-    font-weight: 400;
-}
-
-.theme--light.v-data-table thead tr th {
-    font-size: .85rem !important;
-    font-weight: 500;
-    color: #505050 !important;
-    height: 36px !important;
-}
-
-.v-data-table .v-text-field>.v-input__control>.v-input__slot:before {
-    border-width: 0 0 0 0 !important;
-}
-
-.v-data-table .v-data-table__wrapper .v-input {
-    font-size: inherit !important;
-}
-
-.tTable {
-    border-top: thin solid rgba(0, 0, 0, .08) !important;
-}
-
-.tTable table th {
-    white-space: nowrap !important;
-    background-color: #f9f9f9 !important;
-    border-bottom: thin solid rgba(0, 0, 0, .08) !important;
-}
-
-.tTable table td {
-    border-bottom: thin solid rgba(0, 0, 0, .08) !important;
-}
-
-.theme--light.v-data-table .v-data-footer {
-    border-top: none !important;
-}
-
-.theme--light.v-data-table .v-data-table__divider {
-    border-right: thin solid rgba(0, 0, 0, .08) !important;
-}
-
-.tTable table th .v-icon.v-data-table-header__icon {
-    display: none;
-}
-
-.tTable table th.sortable.active .v-icon.v-data-table-header__icon {
-    display: inline-flex;
-}
-
-.tTable tbody tr:hover {
-    background-color: #f5f5f5 !important;
-}
-
-.tTableNoHover tbody tr:hover {
-    background: transparent !important;
-}
-
-.v-data-table .v-data-table-header-mobile {
-    display: none !important;
-}
-
-.v-data-table .v-data-table__mobile-row {
-    min-height: 34px;
-    height: 34px !important;
-}
-
-/* ===================================================================================================
-=============== scrollbar Style ============================================================================
-===================================================================================================  */
-/* Thanh cuộn mảnh, ẩn khi không hover, hiện dần khi rê chuột vào (giống #content-left-box của ME).
-   Màu thumb đi qua biến --fp-scrollbar; phải đăng ký @property thì biến mới transition được
-   (biến chưa đăng ký chỉ nhảy giá trị, không có hiệu ứng mờ dần). */
-@property --fp-scrollbar {
-    syntax: '<color>';
-    inherits: false;
-    initial-value: transparent;
-}
-
-.fpScrollbar, .v-navigation-drawer__content {
-    overflow-y: auto;
-    --fp-scrollbar: transparent;
-    /* Firefox */
-    scrollbar-width: thin;
-    scrollbar-color: var(--fp-scrollbar) transparent;
-    /* CHỈ transition biến. Thêm "scrollbar-color" vào đây thì mỗi khung hình biến đổi màu lại khởi động lại
-       transition của scrollbar-color từ đầu ⇒ màu đổi từng nấc, chậm gấp 2–3 lần (đo trên lhu-docs). */
-    transition: --fp-scrollbar 600ms ease;
-}
-
-.fpScrollbar:hover, .v-navigation-drawer__content:hover {
-    --fp-scrollbar: rgba(0, 0, 0, 0.25);
-    transition: --fp-scrollbar 300ms ease;
-}
-
-/* Chrome/Edge/Safari cũ. Từ Chrome 121, đã khai scrollbar-color thì Chrome BỎ QUA ::-webkit-scrollbar
-   ⇒ thanh thực tế rộng ~10px (mức "thin" của trình duyệt), không phải 5px. */
-.fpScrollbar::-webkit-scrollbar, .v-navigation-drawer__content::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-}
-
-.fpScrollbar::-webkit-scrollbar-track, .v-navigation-drawer__content::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.fpScrollbar::-webkit-scrollbar-thumb, .v-navigation-drawer__content::-webkit-scrollbar-thumb {
-    background-color: var(--fp-scrollbar);
-    border-radius: 4px;
-}
-
-/* ===================================================================================================
-=============== Loader ============================================================================
-===================================================================================================  */
-
-.loader-wrapper {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100000;
-}
-
-.loader-wrapper .loader {
-    display: block;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 111px;
-    height: 111px;
-    margin: -59px 0 0 -59px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #3498db;
-    -webkit-animation: fui-loader-spin 2s linear infinite;
-    /* Chrome, Opera 15+, Safari 5+ */
-    animation: fui-loader-spin 2s linear infinite;
-    /* Chrome, Firefox 16+, IE 10+, Opera */
-    z-index: 1001;
-}
-
-.loader-wrapper .loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #e74c3c;
-    -webkit-animation: fui-loader-spin 3s linear infinite;
-    /* Chrome, Opera 15+, Safari 5+ */
-    animation: fui-loader-spin 3s linear infinite;
-    /* Chrome, Firefox 16+, IE 10+, Opera */
-}
-
-.loader-wrapper .loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #f9c922;
-    -webkit-animation: fui-loader-spin 1.5s linear infinite;
-    /* Chrome, Opera 15+, Safari 5+ */
-    animation: fui-loader-spin 1.5s linear infinite;
-    /* Chrome, Firefox 16+, IE 10+, Opera */
-}
-
-@-webkit-keyframes fui-loader-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        /* Chrome, Opera 15+, Safari 3.1+ */
-        -ms-transform: rotate(0deg);
-        /* IE 9 */
-        transform: rotate(0deg);
-        /* Firefox 16+, IE 10+, Opera */
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        /* Chrome, Opera 15+, Safari 3.1+ */
-        -ms-transform: rotate(360deg);
-        /* IE 9 */
-        transform: rotate(360deg);
-        /* Firefox 16+, IE 10+, Opera */
-    }
-}
-
-@keyframes fui-loader-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        /* Chrome, Opera 15+, Safari 3.1+ */
-        -ms-transform: rotate(0deg);
-        /* IE 9 */
-        transform: rotate(0deg);
-        /* Firefox 16+, IE 10+, Opera */
-    }
-
-    100% {
-        -webkit-transform: rotate(360deg);
-        /* Chrome, Opera 15+, Safari 3.1+ */
-        -ms-transform: rotate(360deg);
-        /* IE 9 */
-        transform: rotate(360deg);
-        /* Firefox 16+, IE 10+, Opera */
-    }
-}
-/* ==============================================================================*/
-.fui-loading {
-    --color-1: #1867c0;
-    --size: 0.8px;
-  
-    width: calc(48 * var(--size));
-    height: calc(48 * var(--size));
-    border: calc(5 * var(--size)) dotted var(--color-1);
-    border-radius: 50%;
-    display: inline-block;
-    position: relative;
-    box-sizing: border-box;
-    animation: rotation 4s linear infinite;
-  }
-  
-  @keyframes rotation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  
-/* ===================================================================================================
-=============== Loader ============================================================================
+.ga-1{
+    gap: 4px;
+}
+.ga-2{
+    gap: 8px;
+}
+.ga-3{
+    gap: 12px;
+}
+.ga-4{
+    gap: 16px;
+}
+.ga-5{
+    gap: 20px;
+}
+.ga-6{
+    gap: 24px;
+}
+.ga-7{
+    gap: 28px;
+}
+.ga-8{
+    gap: 32px;
+}
+.ga-9{
+    gap: 36px;
+}
+.ga-10{
+    gap: 40px;
+}
+.ga-11{
+    gap: 44px;
+}
+.ga-12{
+    gap: 48px;
+}
+/* ------------------------------------------------------------------------ */
+.mw-200 {
+    max-width: 200px;
+}
+
+.mw-300 {
+    max-width: 300px;
+}
+
+.mw-400 {
+    max-width: 400px;
+}
+
+.mw-500 {
+    max-width: 500px;
+}
+
+.mw-600 {
+    max-width: 600px;
+}
+
+.mw-700 {
+    max-width: 700px;
+}
+
+.mw-800 {
+    max-width: 800px;
+}
+
+.mw-900 {
+    max-width: 900px;
+}
+
+.mw-1000 {
+    max-width: 1000px;
+}
+
+.mw-1200 {
+    max-width: 1200px;
+}
+
+.mw-1400 {
+    max-width: 1400px;
+}
+
+.hidden-container{
+    display: none;
+}
+
+/* ============================================================= */
+html {
+    overflow-y: auto;
+    font-family: Roboto, sans-serif;
+}
+
+b {
+    font-weight: 500;
+}
+
+.wrs_editor .wrs_tickContainer {
+    display: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type=number] {
+    -moz-appearance: textfield;
+}
+
+/* ================================================================================================= */
+/* json ace_editor  */
+.ace_editor.ace-jsoneditor {
+    font-size: 0.9em !important;
+}
+
+.jsoneditor-poweredBy {
+    display: none;
+}
+
+.jsoneditor {
+    border: none !important;
+}
+
+.jsoneditor-menu {
+    background-color: #1976d2 !important;
+    border: none !important;
+}
+
+/* jconfirm  */
+@media only screen and (min-width: 600px) {
+    .jconfirm .jconfirm-box {
+        min-width: 460px;
+        max-width: 500px;
+    }
+}
+
+.jconfirm .jconfirm-box {
+    font-family: Roboto, sans-serif !important;
+    border-top: 0 !important;
+}
+
+.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
+.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
+    font-weight: 400 !important;
+    font-size: .9rem !important;
+}
+
+.jconfirm .jconfirm-box-container {
+    margin: auto;
+    max-width: none;
+}
+
+.jconfirm .jconfirm-box .jconfirm-buttons>button {
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+
+}
+
+.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,
+.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
+    font-size: 2.9em !important;
+    margin: 0 0 15px 0 !important;
+}
+
+.jconfirm .jconfirm-box div.jconfirm-title-c {
+    display: grid;
+    line-height: inherit;
+    text-align: center;
+    font-size: 1.1rem !important;
+}
+
+.jconfirm .jconfirm-box .jconfirm-content-pane .jconfirm-content,
+.jconfirm .jconfirm-box .jconfirm-buttons{
+    text-align: center;
+    float: inherit;
+}
+
+
+/* ============================================================== */
+
+.ck.ck-editor {
+    overflow-x: hidden;
+    font-size: initial;
+}
+
+
+/* =========== menu for mobile =================================================== */
+@media only screen and (max-width: 959px) {
+    .v-application .hidden-sm-and-down {
+        display: none !important;
+    }
+}
+
+
+/*================== Custom style ===================================================*/
+.v-text-field--filled.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+.v-text-field--filled.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+.v-text-field--filled.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
+.v-text-field--full-width.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+.v-text-field--full-width.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+.v-text-field--full-width.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
+.v-text-field--outlined.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+.v-text-field--outlined.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+.v-text-field--outlined.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot {
+    min-height: 36px;
+}
+
+.v-select.v-text-field--outlined:not(.v-text-field--single-line).v-input--dense .v-select__selections {
+    padding: 0px 0;
+}
+
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-inner,
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-outer,
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-inner,
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-inner,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-outer,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-inner,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer {
+    margin-top: 6px;
+}
+.v-text-field--outlined.v-input--dense .v-label {
+    top: 8px;
+}
+
+.v-text-field input {
+    padding: 9px 0 7px 0;
+}
+
+.v-btn {
+    font-weight: 400;
+}
+
+.v-textarea textarea {
+    line-height: 1.5;
+}
+
+/*=================== v-data-table ======================================================= */
+.v-data-table>.v-data-table__wrapper>table>tbody>tr>td,
+.v-data-table>.v-data-table__wrapper>table>tbody>tr>th,
+.v-data-table>.v-data-table__wrapper>table>tfoot>tr>td,
+.v-data-table>.v-data-table__wrapper>table>tfoot>tr>th,
+.v-data-table>.v-data-table__wrapper>table>thead>tr>td,
+.v-data-table>.v-data-table__wrapper>table>thead>tr>th {
+    padding: 0 12px;
+}
+
+.v-select__selection--comma,
+.theme--light.v-data-table thead tr th,
+.theme--light.v-data-table,
+.theme--light.v-input input {
+    /* color: #000 !important; */
+    font-weight: 400;
+}
+
+.theme--light.v-data-table thead tr th {
+    font-size: .85rem !important;
+    font-weight: 500;
+    color: #505050 !important;
+    height: 36px !important;
+}
+
+.v-data-table .v-text-field>.v-input__control>.v-input__slot:before {
+    border-width: 0 0 0 0 !important;
+}
+
+.v-data-table .v-data-table__wrapper .v-input {
+    font-size: inherit !important;
+}
+
+.tTable {
+    border-top: thin solid rgba(0, 0, 0, .08) !important;
+}
+
+.tTable table th {
+    white-space: nowrap !important;
+    background-color: #f9f9f9 !important;
+    border-bottom: thin solid rgba(0, 0, 0, .08) !important;
+}
+
+.tTable table td {
+    border-bottom: thin solid rgba(0, 0, 0, .08) !important;
+}
+
+.theme--light.v-data-table .v-data-footer {
+    border-top: none !important;
+}
+
+.theme--light.v-data-table .v-data-table__divider {
+    border-right: thin solid rgba(0, 0, 0, .08) !important;
+}
+
+.tTable table th .v-icon.v-data-table-header__icon {
+    display: none;
+}
+
+.tTable table th.sortable.active .v-icon.v-data-table-header__icon {
+    display: inline-flex;
+}
+
+.tTable tbody tr:hover {
+    background-color: #f5f5f5 !important;
+}
+
+.tTableNoHover tbody tr:hover {
+    background: transparent !important;
+}
+
+.v-data-table .v-data-table-header-mobile {
+    display: none !important;
+}
+
+.v-data-table .v-data-table__mobile-row {
+    min-height: 34px;
+    height: 34px !important;
+}
+
+/* ===================================================================================================
+=============== scrollbar Style ============================================================================
+===================================================================================================  */
+/* Thanh cuộn mảnh, ẩn khi không hover, hiện dần khi rê chuột vào (giống #content-left-box của ME).
+   Màu thumb đi qua biến --fp-scrollbar; phải đăng ký @property thì biến mới transition được
+   (biến chưa đăng ký chỉ nhảy giá trị, không có hiệu ứng mờ dần). */
+@property --fp-scrollbar {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
+.fpScrollbar, .v-navigation-drawer__content {
+    overflow-y: auto;
+    --fp-scrollbar: transparent;
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--fp-scrollbar) transparent;
+    /* CHỈ transition biến. Thêm "scrollbar-color" vào đây thì mỗi khung hình biến đổi màu lại khởi động lại
+       transition của scrollbar-color từ đầu ⇒ màu đổi từng nấc, chậm gấp 2–3 lần (đo trên lhu-docs). */
+    transition: --fp-scrollbar 600ms ease;
+}
+
+.fpScrollbar:hover, .v-navigation-drawer__content:hover {
+    --fp-scrollbar: rgba(0, 0, 0, 0.25);
+    transition: --fp-scrollbar 300ms ease;
+}
+
+/* Chrome/Edge/Safari cũ. Từ Chrome 121, đã khai scrollbar-color thì Chrome BỎ QUA ::-webkit-scrollbar
+   ⇒ thanh thực tế rộng ~10px (mức "thin" của trình duyệt), không phải 5px. */
+.fpScrollbar::-webkit-scrollbar, .v-navigation-drawer__content::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+.fpScrollbar::-webkit-scrollbar-track, .v-navigation-drawer__content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.fpScrollbar::-webkit-scrollbar-thumb, .v-navigation-drawer__content::-webkit-scrollbar-thumb {
+    background-color: var(--fp-scrollbar);
+    border-radius: 4px;
+}
+
+/* ===================================================================================================
+=============== Loader ============================================================================
+===================================================================================================  */
+
+.loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100000;
+}
+
+.loader-wrapper .loader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 111px;
+    height: 111px;
+    margin: -59px 0 0 -59px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #3498db;
+    -webkit-animation: fui-loader-spin 2s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: fui-loader-spin 2s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+    z-index: 1001;
+}
+
+.loader-wrapper .loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #e74c3c;
+    -webkit-animation: fui-loader-spin 3s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: fui-loader-spin 3s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+.loader-wrapper .loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #f9c922;
+    -webkit-animation: fui-loader-spin 1.5s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: fui-loader-spin 1.5s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+@-webkit-keyframes fui-loader-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+}
+
+@keyframes fui-loader-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+}
+/* ==============================================================================*/
+.fui-loading {
+    --color-1: #1867c0;
+    --size: 0.8px;
+  
+    width: calc(48 * var(--size));
+    height: calc(48 * var(--size));
+    border: calc(5 * var(--size)) dotted var(--color-1);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: rotation 4s linear infinite;
+  }
+  
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+/* ===================================================================================================
+=============== Loader ============================================================================
 ===================================================================================================  */