--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/assets/scss/base/_helpers.scss	Sat May 31 09:21:51 2025 +0800
@@ -0,0 +1,614 @@
+/********************************
+*********************************
+HELPER CLASSES
+*********************************
+*********************************/
+
+/* Colors
+========================*/
+@each $col, $val in $theme-colors {
+  .progress-bar-#{$col},
+	.bg-#{$col} {
+		background-color: $val !important;
+		border-color: $val !important;
+    color: #fff;
+	}
+
+	.bg-#{$col}-dark {
+		background-color: darken($val, 10%);
+		border-color: darken($val, 10%);
+	}
+
+	.bg-#{$col}-light {
+		background-color: lighten($val, 15%);
+		border-color: lighten($val, 15%);
+	}
+
+  .bg-#{$col}-contrast {
+    background-color: rgba($val,.1);
+    color: $val;
+  }
+
+  a.bg-#{$col}-contrast:hover {
+    background: $val;
+  }
+
+  %color-#{$col},
+	.color-#{$col},
+	.color-hover-#{$col}:hover,
+	.text-#{$col} {
+		color: $val !important;
+	}
+
+	.border-color-#{$col} {
+		border-color: $val !important;
+	}
+}
+
+@each $col, $val in $colors {
+  .badge-#{$col},
+  .progress-bar-#{$col},
+	.bg-#{$col} {
+		background-color: $val !important;
+		border-color: $val;
+	}
+
+	.bg-#{$col}-dark {
+		background-color: darken($val, 10%);
+		border-color: darken($val, 10%);
+	}
+
+	.bg-#{$col}-light {
+		background-color: lighten($val, 15%);
+		border-color: lighten($val, 15%);
+	}
+
+	.color-#{$col},
+	.color-hover-#{$col}:hover,
+	.text-#{$col} {
+		color: $val !important;
+    h1,h2,h3,h4,h5,h6 { color: $val !important; }
+	}
+
+	.border-color-#{$col} {
+		border-color: $val !important;
+	}
+}
+
+.bg-none {
+  background: none !important;
+}
+
+/* Basic
+========================*/
+@mixin hidden {display: none}
+%block, .block {display: block}
+%inline, .inline {display: inline}
+%inline-block, .inline-block {display: inline-block}
+
+%overflow-hidden, .overflow-hidden {overflow: hidden}
+%overflow-scroll, .overflow-scroll {overflow: scroll}
+%overflow-auto, .overflow-auto {overflow: auto}
+
+%pre, .pre {white-space: pre}
+%nowrap, .nowrap {white-space: nowrap}
+%resize-none, .resize-none {resize: none}
+%resize-vertical, .resize-vertical {resize: vertical}
+%resize-horizontal, .resize-horizontal {resize: horizontal}
+%cursor-pointer, .cursor-pointer {cursor: pointer}
+%no-pointer-events, .no-pointer-events { pointer-events: none}
+%border-0, .border-0 {border: 0;}
+%vertical-middle, .vertical-middle { vertical-align: middle !important }
+
+%disabled,
+.disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+%fullscreen,
+.fullscreen {
+	min-height: 100vh;
+	min-width: 100%;
+}
+
+%scroll-horizontal,
+.scroll-horizontal {
+	overflow-x: scroll;
+	overflow-y: hidden;
+}
+
+%scroll-vertical,
+.scroll-vertical {
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+	width: 0;
+	height: 0;
+	background: transparent;
+}
+
+
+/* Position
+========================*/
+%pos-static, .pos-static {position: static}
+%pos-fixed, .pos-fixed {position: fixed}
+%pos-relative, .pos-relative {position: relative}
+%pos-absolute, .pos-absolute {position: absolute}
+%pos-top, .pos-top {top: 0}
+%pos-right, .pos-right {right: 0}
+%pos-left, .pos-left {left: 0}
+%pos-bottom, .pos-bottom {bottom: 0}
+%pos-left, .pos-left {left: 0}
+%pos-0, .pos-0 {
+  @extend .pos-absolute;
+  @extend .pos-left;
+  @extend .pos-right;
+  @extend .pos-bottom;
+  @extend .pos-top;
+}
+
+%horizontal-center,
+.horizontal-center {
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+%vertical-center,
+.vertical-center {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+%absolute-center,
+.absolute-center {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+/* Opacity
+=========================*/
+%opacity-0 , .opacity-0-hover:hover,  .opacity-0  {opacity: 0}
+%opacity-01, .opacity-01-hover:hover, .opacity-01 {opacity: 0.1}
+%opacity-02, .opacity-02-hover:hover, .opacity-02 {opacity: 0.2}
+%opacity-03, .opacity-03-hover:hover, .opacity-03 {opacity: 0.3}
+%opacity-04, .opacity-04-hover:hover, .opacity-04 {opacity: 0.4}
+%opacity-05, .opacity-05-hover:hover, .opacity-05 {opacity: 0.5}
+%opacity-06, .opacity-06-hover:hover, .opacity-06 {opacity: 0.6}
+%opacity-07, .opacity-07-hover:hover, .opacity-07 {opacity: 0.7}
+%opacity-08, .opacity-08-hover:hover, .opacity-08 {opacity: 0.8}
+%opacity-09, .opacity-09-hover:hover, .opacity-09 {opacity: 0.9}
+%opacity-1 , .opacity-1-hover:hover,  .opacity-1  {opacity: 1}
+
+
+/* Width
+=========================*/
+%width-100, .width-100 {width: 100%}
+%width-80 , .width-80 {width: 80%}
+%width-75 , .width-75 {width: 75%}
+%width-67 , .width-67 {width: 66.66666666666667%}
+%width-50 , .width-50 {width: 50%}
+%width-33 , .width-33 {width: 33.33333333333333%}
+%width-25 , .width-25 {width: 25%}
+%width-20 , .width-20 {width: 20%}
+
+/* Font Weight
+========================*/
+@for $i from 1 through 9 {
+  %flex-#{$i},
+  .flex-#{$i} { flex: 1 }
+}
+
+/* Font Weight
+========================*/
+@for $i from 1 through 9 {
+  %fw-#{$i}00,
+	.fw-#{$i}00 {
+		font-weight: #{$i * 100} !important;
+	}
+}
+%fw-normal, .fw-normal {font-weight: $font-weight-normal;}
+%fw-medium, .fw-medium{font-weight: $font-weight-medium;}
+%fw-semibold, .fw-semibold{font-weight: $font-weight-semibold;}
+%fw-bold, .fw-bold{font-weight: $font-weight-bold;}
+%italic, .italic {font-style: italic;}
+
+.text-indent-full {
+  text-indent: -9999px;
+}
+
+/* Z Index
+========================*/
+@for $i from 1 through 9 {
+  %zi-#{$i},
+	.zi-#{$i} {
+		z-index: #{$i} !important;
+	}
+}
+.zi-n-1 {
+  z-index: -1 !important;
+}
+
+/* Font Size
+========================*/
+$font-sizes: 10;
+
+@while $font-sizes <= 60 {
+  %fs-#{$font-sizes},
+	.fs-#{$font-sizes} {
+		font-size: rem($font-sizes) !important;
+	}
+
+	@if $font-sizes < 16 {
+		$font-sizes: $font-sizes + 1;
+	} @else {
+		$font-sizes: $font-sizes + 2;
+	}
+}
+
+.fs-base {
+  font-size: $font-size-base !important;
+}
+
+/* Letter Spacing
+========================*/
+.letter-spacing-minus {
+  letter-spacing: em(-.8,16px);
+}
+
+.letter-spacing-plus {
+  letter-spacing: em(.8,16px);
+}
+
+/* Text Helpers 
+========================*/
+.text-underline {
+  text-decoration: underline;
+}
+
+/* Line Height
+========================*/
+@for $i from 10 through 30 {
+  %lh-#{$i},
+	.lh-#{$i} {
+		line-height: #{$i/10}em;
+	}
+}
+
+/* Border Helpers
+=========================*/
+%border-left, .border-left { border-left: $border-width solid $theme-border-color }
+%border-top, .border-top { border-top: $border-width solid $theme-border-color }
+%border-right, .border-right { border-right: $border-width solid $theme-border-color }
+%border-bottom, .border-bottom{ border-bottom: $border-width solid $theme-border-color }
+%border-left-rtl, body.rtl .border-left-rtl { border-left: $border-width solid $theme-border-color }
+%border-top-rtl, body.rtl .border-top-rtl { border-top: $border-width solid $theme-border-color }
+%border-right-rtl, body.rtl .border-right-rtl { border-right: $border-width solid $theme-border-color }
+%border-bottom-rtl, body.rtl .border-bottom-rtl { border-bottom: $border-width solid $theme-border-color }
+%border-all, .border-all {
+  @extend .border-left;
+  @extend .border-right;
+  @extend .border-top;
+  @extend .border-bottom;
+}
+
+%border-left-dotted,  .border-left-dotted { border-left-style: dotted }
+%border-left-dashed,  .border-left-dashed { border-left-style: dashed }
+%border-left-solid,   .border-left-solid  { border-left-style: solid }
+%border-left-double,  .border-left-double { border-left-style: double }
+%border-left-groove,  .border-left-groove { border-left-style: groove }
+%border-left-ridge,   .border-left-ridge  { border-left-style: ridge }
+%border-left-inset,   .border-left-inset  { border-left-style: ridge }
+%border-left-outset,  .border-left-outset { border-left-style: outset }
+%border-left-none,    .border-left-none   { border-left-style: none }
+%border-left-hidden,  .border-left-hidden { border-left-style: hidden }
+
+%border-right-dotted, .border-right-dotted { border-right-style: dotted }
+%border-right-dashed, .border-right-dashed { border-right-style: dashed }
+%border-right-solid , .border-right-solid  { border-right-style: solid }
+%border-right-double, .border-right-double { border-right-style: double }
+%border-right-groove, .border-right-groove { border-right-style: groove }
+%border-right-ridge , .border-right-ridge  { border-right-style: ridge }
+%border-right-inset , .border-right-inset  { border-right-style: ridge }
+%border-right-outset, .border-right-outset { border-right-style: outset }
+%border-right-none  , .border-right-none   { border-right-style: none }
+%border-right-hidden, .border-right-hidden { border-right-style: hidden }
+
+%border-top-dotted, .border-top-dotted { border-top-style: dotted }
+%border-top-dashed, .border-top-dashed { border-top-style: dashed }
+%border-top-solid , .border-top-solid  { border-top-style: solid }
+%border-top-double, .border-top-double { border-top-style: double }
+%border-top-groove, .border-top-groove { border-top-style: groove }
+%border-top-ridge , .border-top-ridge  { border-top-style: ridge }
+%border-top-inset , .border-top-inset  { border-top-style: ridge }
+%border-top-outset, .border-top-outset { border-top-style: outset }
+%border-top-none  , .border-top-none   { border-top-style: none }
+%border-top-hidden, .border-top-hidden { border-top-style: hidden }
+
+%border-bottom-dotted, .border-bottom-dotted { border-bottom-style: dotted }
+%border-bottom-dashed, .border-bottom-dashed { border-bottom-style: dashed }
+%border-bottom-solid , .border-bottom-solid  { border-bottom-style: solid }
+%border-bottom-double, .border-bottom-double { border-bottom-style: double }
+%border-bottom-groove, .border-bottom-groove { border-bottom-style: groove }
+%border-bottom-ridge , .border-bottom-ridge  { border-bottom-style: ridge }
+%border-bottom-inset , .border-bottom-inset  { border-bottom-style: ridge }
+%border-bottom-outset, .border-bottom-outset { border-bottom-style: outset }
+%border-bottom-none  , .border-bottom-none   { border-bottom-style: none }
+%border-bottom-hidden, .border-bottom-hidden { border-bottom-style: hidden }
+
+%border-y-dotted, .border-y-dotted { @extend .border-top-dotted; @extend .border-bottom-dotted }
+%border-y-dashed, .border-y-dashed { @extend .border-top-dashed; @extend .border-bottom-dashed }
+%border-y-solid , .border-y-solid  { @extend .border-top-solid;  @extend .border-bottom-solid }
+%border-y-double, .border-y-double { @extend .border-top-double; @extend .border-bottom-double }
+%border-y-groove, .border-y-groove { @extend .border-top-groove; @extend .border-bottom-groove }
+%border-y-ridge , .border-y-ridge  { @extend .border-top-ridge;  @extend .border-bottom-ridge }
+%border-y-inset , .border-y-inset  { @extend .border-top-inset;  @extend .border-bottom-inset }
+%border-y-outset, .border-y-outset { @extend .border-top-outset; @extend .border-bottom-outset }
+%border-y-none  , .border-y-none   { @extend .border-top-none;   @extend .border-bottom-none }
+%border-y-hidden, .border-y-hidden { @extend .border-top-hidden; @extend .border-bottom-hidden }
+
+%border-x-dotted, .border-x-dotted { @extend .border-right-dotted; @extend .border-left-dotted }
+%border-x-dashed, .border-x-dashed { @extend .border-right-dashed; @extend .border-left-dashed }
+%border-x-solid , .border-x-solid  { @extend .border-right-solid;  @extend .border-left-solid }
+%border-x-double, .border-x-double { @extend .border-right-double; @extend .border-left-double }
+%border-x-groove, .border-x-groove { @extend .border-right-groove; @extend .border-left-groove }
+%border-x-ridge , .border-x-ridge  { @extend .border-right-ridge;  @extend .border-left-ridge }
+%border-x-inset , .border-x-inset  { @extend .border-right-inset;  @extend .border-left-inset }
+%border-x-outset, .border-x-outset { @extend .border-right-outset; @extend .border-left-outset }
+%border-x-none  , .border-x-none   { @extend .border-right-none;   @extend .border-left-none }
+%border-x-hidden, .border-x-hidden { @extend .border-right-hidden; @extend .border-left-hidden }
+
+%border-dotted, .border-dotted { @extend .border-x-dotted; @extend .border-y-dotted }
+%border-dashed, .border-dashed { @extend .border-x-dashed; @extend .border-y-dashed }
+%border-solid , .border-solid  { @extend .border-x-solid;  @extend .border-y-solid }
+%border-double, .border-double { @extend .border-x-double; @extend .border-y-double }
+%border-groove, .border-groove { @extend .border-x-groove; @extend .border-y-groove }
+%border-ridge , .border-ridge  { @extend .border-x-ridge;  @extend .border-y-ridge }
+%border-inset , .border-inset  { @extend .border-x-inset;  @extend .border-y-inset }
+%border-outset, .border-outset { @extend .border-x-outset; @extend .border-y-outset }
+%border-none  , .border-none   { @extend .border-x-none;   @extend .border-y-none }
+%border-hidden, .border-hidden { @extend .border-x-hidden; @extend .border-y-hidden }
+
+/* Border Width
+=========================*/
+@for $i from 0 through 10 {
+  %bw-y-#{$i},
+  %bw-t-#{$i},
+  .bw-y-#{$i},
+  .bw-t-#{$i},
+  body.rtl .bw-y-#{$i}-rtl,
+  body.rtl .bw-t-#{$i}-rtl {
+    border-top-width: #{$i}px !important;
+  }
+  %bw-y-#{$i},
+  %bw-b-#{$i},
+  .bw-y-#{$i},
+  .bw-b-#{$i},
+  body.rtl .bw-y-#{$i}-rtl,
+  body.rtl .bw-b-#{$i}-rtl {
+    border-bottom-width: #{$i}px !important;
+  }
+  %bw-x-#{$i},
+  %bw-r-#{$i},
+  .bw-x-#{$i},
+  .bw-r-#{$i},
+  body.rtl .bw-x-#{$i}-rtl,
+  body.rtl .bw-r-#{$i}-rtl {
+    border-right-width: #{$i}px !important;
+  }
+  %bw-y-#{$i},
+  %bw-l-#{$i},
+  .bw-y-#{$i},
+  .bw-l-#{$i},
+  body.rtl .bw-y-#{$i}-rtl,
+  body.rtl .bw-l-#{$i}-rtl {
+    border-left-width: #{$i}px !important;
+  }
+  %bw-#{$i},
+	body.rtl .bw-#{$i}-rtl,
+	.bw-#{$i} {
+    @extend .bw-x-#{$i};
+    @extend .bw-y-#{$i};
+  }
+}
+
+/* Border Radius
+=========================*/
+%radius-0, .radius-0 { border-radius: 0; }
+%radius-full, .radius-full { border-radius: 100%; }
+@for $i from 2 through 20 {
+	%radius-#{$i}, .radius-#{$i} {
+		border-radius: #{$i}px !important;
+    overflow: hidden;
+	}
+}
+
+/* Padding & Margin
+=========================*/
+%padded-reverse, .padded-reverse {	margin: 0 -20px}
+
+%mr-lr-auto, .mr-lr-auto {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+$num-list: 0 5 10 20 30 40 50 60 70 80 90 100 150 200;
+@each $current-num in $num-list {
+
+	body.rtl .pd-t-#{$current-num}-rtl,
+	body.rtl .pd-tb-#{$current-num}-rtl,
+	%pd-t-#{$current-num},
+	%pd-tb-#{$current-num},
+	.pd-t-#{$current-num},
+	.pd-tb-#{$current-num} {
+		padding-top: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .pd-b-#{$current-num}-rtl,
+	body.rtl .pd-tb-#{$current-num}-rtl,
+	%pd-b-#{$current-num},
+	%pd-tb-#{$current-num},
+	.pd-b-#{$current-num},
+	.pd-tb-#{$current-num} {
+		padding-bottom: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .pd-#{$current-num}-rtl,
+	%pd-#{$current-num},
+	.pd-#{$current-num} {
+		padding: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .mr-t-#{$current-num}-rtl,
+	body.rtl .mr-tb-#{$current-num}-rtl,
+	%mr-t-#{$current-num},
+	%mr-tb-#{$current-num},
+	.mr-t-#{$current-num},
+	.mr-tb-#{$current-num} {
+		margin-top: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .mr-b-#{$current-num}-rtl,
+	body.rtl .mr-tb-#{$current-num}-rtl,
+	%mr-b-#{$current-num},
+	%mr-tb-#{$current-num},
+	.mr-b-#{$current-num},
+	.mr-tb-#{$current-num} {
+		margin-bottom: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .mr-#{$current-num}-rtl,
+	%mr-#{$current-num},
+	.mr-#{$current-num} {
+		margin: #{$current-num/16}rem !important;
+	}
+}
+
+$num-list: 0 5 10 15 20 30 40 50 60 70 80 90;
+@each $current-num in $num-list {
+
+	body.rtl .pd-l-#{$current-num}-rtl,
+	body.rtl .pd-lr-#{$current-num}-rtl,
+	%pd-l-#{$current-num},
+	%pd-lr-#{$current-num},
+	.pd-l-#{$current-num},
+	.pd-lr-#{$current-num} {
+		padding-left: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .pd-r-#{$current-num}-rtl,
+	body.rtl .pd-lr-#{$current-num}-rtl,
+	%pd-r-#{$current-num},
+	%pd-lr-#{$current-num},
+	.pd-r-#{$current-num},
+	.pd-lr-#{$current-num} {
+		padding-right: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .mr-l-#{$current-num}-rtl,
+	body.rtl .mr-lr-#{$current-num}-rtl,
+	%mr-l-#{$current-num},
+	%mr-lr-#{$current-num},
+	.mr-l-#{$current-num},
+	.mr-lr-#{$current-num} {
+		margin-left: #{$current-num/16}rem !important;
+	}
+
+	body.rtl .mr-r-#{$current-num}-rtl,
+	body.rtl .mr-lr-#{$current-num}-rtl,
+	%mr-r-#{$current-num},
+	%mr-lr-#{$current-num},
+	.mr-r-#{$current-num},
+	.mr-lr-#{$current-num} {
+		margin-right: #{$current-num/16}rem !important;
+	}
+}
+
+/* RTL Margin Helpers 
+=========================*/
+body.rtl {
+  @each $i,$val in $spacers {
+    .ml-#{$i}-rtl { margin-left: $val !important }
+    .mr-#{$i}-rtl { margin-right: $val !important }
+    .mt-#{$i}-rtl { margin-top: $val !important }
+    .mb-#{$i}-rtl { margin-bottom: $val !important }
+    .mx-#{$i}-rtl { 
+      @extend .ml-#{$i}-rtl;
+      @extend .mr-#{$i}-rtl;
+    }
+    .my-#{$i}-rtl { 
+      @extend .mt-#{$i}-rtl;
+      @extend .mb-#{$i}-rtl;
+    }
+    .m-#{$i}-rtl { 
+      @extend .my-#{$i}-rtl;
+      @extend .mx-#{$i}-rtl;
+    }
+  }
+
+  .mr-auto-rtl { margin-right: auto !important }
+  .ml-auto-rtl { margin-left: auto !important }
+  .mt-auto-rtl { margin-top: auto !important }
+  .mb-auto-rtl { margin-bottom: auto !important }
+  .mx-auto-rtl {
+    @extend .ml-auto-rtl;
+    @extend .mr-auto-rtl;
+  }
+  .my-auto-rtl {
+    @extend .ml-auto-rtl;
+    @extend .mr-auto-rtl;
+  }
+  .m-auto-rtl {
+    @extend .my-auto-rtl;
+    @extend .mx-auto-rtl;
+  }
+}
+
+/* RTL Padding Helpers 
+=========================*/
+body.rtl {
+  @each $i,$val in $spacers {
+    .pl-#{$i}-rtl { padding-left: $val !important }
+    .pr-#{$i}-rtl { padding-right: $val !important }
+    .pt-#{$i}-rtl { padding-top: $val !important }
+    .pb-#{$i}-rtl { padding-bottom: $val !important }
+    .px-#{$i}-rtl { 
+      @extend .pl-#{$i}-rtl;
+      @extend .pr-#{$i}-rtl;
+    }
+    .py-#{$i}-rtl { 
+      @extend .pt-#{$i}-rtl;
+      @extend .pb-#{$i}-rtl;
+    }
+    .p-#{$i}-rtl { 
+      @extend .py-#{$i}-rtl;
+      @extend .px-#{$i}-rtl;
+    }
+  }
+}
+
+/* Float RTL Helpers 
+=========================*/
+body.rtl {
+  .float-right-rtl { float: right !important }
+  .float-left-rtl { float: left !important }
+  .float-none-rtl { float: none !important }
+  @each $i, $val in $grid-breakpoints {
+    .float-#{$i}-right-rtl { float: right !important }
+    .float-#{$i}-left-rtl { float: left !important }
+  }
+}
+
+
+/* Width Helpers 
+=========================*/
+@for $i from 1 through 10 {
+  .w-#{$i * 10} { width: #{ $i * 10 }% !important }
+}