/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme/variables.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/** Ionic CSS Variables **/
@font-face {
  font-family: "sfprotext";
  font-weight: 400;
  src: url("/assets/fonts/SF-Pro-Text-Regular.woff");
}
:root {
  /*--ion-background-color: blue;
  --ion-background-color-rgb: 0,0,0;*/
  --ion-font-family: "sfprotext";
  /** primary **/
  --ion-color-primary: #0353B4;
  --ion-color-primary-rgb: 31, 45, 199;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #03478e;
  --ion-color-primary-tint: #3542cd;
  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;
  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;
  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;
  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;
  /** danger **/
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;
  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;
  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
  --ion-color-border-light: #eee;
  /** table header **/
  --ion-color-table-header: #F3F6FF;
  --ion-color-table-header-rgb: 244, 245, 248;
  --ion-color-table-header-contrast: #000000;
  --ion-color-table-header-contrast-rgb: 0, 0, 0;
  --ion-color-table-header-shade: #d7d8da;
  --ion-color-table-header-tint: #f5f6f9;
  --ion-color-green: #219653;
  --ion-color-red: #EB5757;
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  /** warning **/
}
.m-avatar.color-1 {
  background: linear-gradient(180deg, var(--blue) 0.45%, #263dfc 99.87%);
}
.m-avatar.color-2 {
  background: linear-gradient(180deg, var(--indigo) 0.45%, #6610F2 99.87%);
}
.m-avatar.color-3 {
  background: linear-gradient(180deg, var(--purple) 0.45%, #8252C1 99.87%);
}
.m-avatar.color-4 {
  background: linear-gradient(180deg, var(--pink) 0.45%, #E81970 99.87%);
}
.m-avatar.color-5 {
  background: linear-gradient(180deg, var(--red) 0.45%, #DC1219 99.87%);
}
.m-avatar.color-6 {
  background: var(--orange);
}
.m-avatar.color-7 {
  background: linear-gradient(180deg, var(--green) 0.45%, #058213 99.87%);
}
.m-avatar.color-0 {
  background: linear-gradient(180deg, var(--teal) 0.45%, #0AAB66 99.87%);
}
ion-content.home-content {
  --background: #fff url("/assets/images/home_bg.png") no-repeat center center / cover;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */
/* Core CSS required for Ionic components to work properly */
html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
html.md {
  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}
html {
  --ion-font-family: var(--ion-default-font);
}
body {
  background: var(--ion-background-color);
}
body.backdrop-no-scroll {
  overflow: hidden;
}
/**
 * Card style modal needs additional padding on the
 * top of the header. We accomplish this by targeting
 * the first toolbar in the header.
 * Footer also needs this. We do not adjust the bottom
 * padding though because of the safe area.
 */
html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
html.ios ion-modal ion-footer ion-toolbar:first-of-type {
  padding-top: 6px;
}
/**
* Card style modal needs additional padding on the
* bottom of the header. We accomplish this by targeting
* the last toolbar in the header.
*/
html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
  padding-bottom: 6px;
}
/**
* Add padding on the left and right
* of toolbars while accounting for
* safe area values when in landscape.
*/
html.ios ion-modal ion-toolbar {
  padding-right: calc(var(--ion-safe-area-right) + 8px);
  padding-left: calc(var(--ion-safe-area-left) + 8px);
}
/**
 * Card style modal on iPadOS
 * should only have backdrop on first instance.
 */
@media screen and (min-width: 768px) {
  html.ios ion-modal.modal-card:first-of-type {
    --backdrop-opacity: 0.18;
  }
}
/**
 * Subsequent modals should not have a backdrop/box shadow
 * as it will cause the screen to appear to get progressively
 * darker. With Ionic 6, declarative modals made it
 * possible to have multiple non-presented modals in the DOM,
 * so we could no longer rely on ion-modal:first-of-type.
 * Here we disable the opacity/box-shadow for every modal
 * that comes after the first presented modal.
 *
 * Note: ion-modal:not(.overlay-hidden):first-of-type
 * does not match the first modal to not have
 * the .overlay-hidden class, it will match the
 * first modal in general only if it does not
 * have the .overlay-hidden class.
 * The :nth-child() pseudo-class has support
 * for selectors which would help us here. At the
 * time of writing it does not have great cross browser
 * support.
 *
 * Note 2: This should only apply to non-card and
 * non-sheet modals. Card and sheet modals have their
 * own criteria for displaying backdrops/box shadows.
 *
 * Do not use :not(.overlay-hidden) in place of
 * .show-modal because that triggers a memory
 * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768
 */
ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
  --backdrop-opacity: 0;
  --box-shadow: none;
}
/**
 * This works around a bug in WebKit where the
 * content will overflow outside of the bottom border
 * radius when re-painting. As long as a single
 * border radius value is set on .ion-page, this
 * issue does not happen. We set the top left radius
 * here because the top left corner will always have a
 * radius no matter the platform.
 * This behavior only applies to card modals.
 */
html.ios ion-modal.modal-card .ion-page {
  border-top-left-radius: var(--border-radius);
}
.ion-color-primary {
  --ion-color-base: var(--ion-color-primary, #3880ff) !important;
  --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
  --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
  --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
}
.ion-color-secondary {
  --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
  --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
  --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
  --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
}
.ion-color-tertiary {
  --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
  --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
  --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
  --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
}
.ion-color-success {
  --ion-color-base: var(--ion-color-success, #2dd36f) !important;
  --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
  --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
  --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
}
.ion-color-warning {
  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
  --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
  --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
}
.ion-color-danger {
  --ion-color-base: var(--ion-color-danger, #eb445a) !important;
  --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
  --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
  --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
}
.ion-color-light {
  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
  --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
  --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
}
.ion-color-medium {
  --ion-color-base: var(--ion-color-medium, #92949c) !important;
  --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
  --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
  --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
}
.ion-color-dark {
  --ion-color-base: var(--ion-color-dark, #222428) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
  --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
}
.ion-page {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  overflow: hidden;
  z-index: 0;
}
/**
 * When making custom dialogs, using
 * ion-content is not required. As a result,
 * some developers may wish to have dialogs
 * that are automatically sized by the browser.
 * These changes allow certain dimension values
 * such as fit-content to work correctly.
 */
ion-modal > .ion-page {
  position: relative;
  contain: layout style;
  height: 100%;
}
.split-pane-visible > .ion-page.split-pane-main {
  position: relative;
}
ion-route,
ion-route-redirect,
ion-router,
ion-select-option,
ion-nav-controller,
ion-menu-controller,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-modal-controller,
ion-picker-controller,
ion-popover-controller,
ion-toast-controller,
.ion-page-hidden,
[hidden] {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}
.ion-page-invisible {
  opacity: 0;
}
.can-go-back > ion-header ion-back-button {
  display: block;
}
html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
  --ion-statusbar-padding: 20px;
}
@supports (padding-top: 20px) {
  html {
    --ion-safe-area-top: var(--ion-statusbar-padding);
  }
}
@supports (padding-top: constant(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: constant(safe-area-inset-top);
    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
    --ion-safe-area-left: constant(safe-area-inset-left);
    --ion-safe-area-right: constant(safe-area-inset-right);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);
  }
}
ion-card.ion-color .ion-inherit-color,
ion-card-header.ion-color .ion-inherit-color {
  color: inherit;
}
.menu-content {
  transform: translate3d(0,  0,  0);
}
.menu-content-open {
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: none;
}
.ios .menu-content-reveal {
  box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
}
[dir=rtl].ios .menu-content-reveal {
  box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
}
.md .menu-content-reveal {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}
.md .menu-content-push {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
  --border-width: 0px;
}
ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
  ion-accordion .ion-accordion-toggle-icon {
    /* stylelint-disable declaration-no-important */
    transition: none !important;
  }
}
/**
 * The > [slot="header"] selector ensures that we do
 * not modify toggle icons for any nested accordions. The state
 * of one accordion should not affect any accordions inside
 * of a nested accordion group.
 */
ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
  transform: rotate(180deg);
}
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
  --border-width: 0px;
  --inner-border-width: 0px;
}
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
  margin-top: 0;
}
ion-input input::-webkit-date-and-time-value {
  text-align: start;
}
/**
 * The .ion-datetime-button-overlay class contains
 * styles that allow any modal/popover to be
 * sized according to the dimensions of the datetime
 * when used with ion-datetime-button.
 */
.ion-datetime-button-overlay {
  --width: fit-content;
  --height: fit-content;
}
/**
 * The grid variant can scale down when inline.
 * When used in a `fit-content` overlay, this causes
 * the overlay to shrink when the month/year picker is open.
 * Explicitly setting the dimensions lets us have a consistently
 * sized grid interface.
 */
.ion-datetime-button-overlay ion-datetime.datetime-grid {
  width: 320px;
  min-height: 320px;
}
/* Basic CSS for apps built with Ionic */
audio,
canvas,
progress,
video {
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
b,
strong {
  font-weight: bold;
}
img {
  max-width: 100%;
}
hr {
  height: 1px;
  border-width: 0;
  box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
label,
input,
select,
textarea {
  font-family: inherit;
  line-height: normal;
}
textarea {
  overflow: auto;
  height: auto;
  font: inherit;
  color: inherit;
}
textarea::placeholder {
  padding-left: 2px;
}
form,
input,
optgroup,
select {
  margin: 0;
  font: inherit;
  color: inherit;
}
html input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}
a,
a div,
a span,
a ion-icon,
a ion-label,
button,
button div,
button span,
button ion-icon,
button ion-label,
.ion-tappable,
[tappable],
[tappable] div,
[tappable] span,
[tappable] ion-icon,
[tappable] ion-label,
input,
textarea {
  touch-action: manipulation;
}
a ion-label,
button ion-label {
  pointer-events: none;
}
button {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  font-feature-settings: inherit;
  font-variant: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: button;
}
[tappable] {
  cursor: pointer;
}
a[disabled],
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
html:not(.hydrated) body {
  display: none;
}
html.ion-ce body {
  display: block;
}
html.plt-pwa {
  height: 100vh;
}
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  /**
   * Because body has position: fixed,
   * it should be promoted to its own
   * layer.
   *
   * WebKit does not always promote
   * the body to its own layer on page
   * load in Ionic apps. Once scrolling on
   * ion-content starts, WebKit will promote
   * body. Unfortunately, this causes a re-paint
   * which results in scrolling being halted
   * until the next user gesture.
   *
   * This impacts the Custom Elements build.
   * The lazy loaded build causes the browser to
   * re-paint during hydration which causes WebKit
   * to promote body to its own layer.
   * In the CE Build, this hydration does not
   * happen, so the additional re-paint does not occur.
   */
  transform: translateZ(0);
  text-rendering: optimizeLegibility;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-drag: none;
  -ms-content-zooming: none;
  word-wrap: break-word;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
}
html {
  font-family: var(--ion-font-family);
}
a {
  background-color: transparent;
  color: var(--ion-color-primary, #3880ff);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.2;
}
h1 {
  margin-top: 20px;
  font-size: 26px;
}
h2 {
  margin-top: 18px;
  font-size: 24px;
}
h3 {
  font-size: 22px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 16px;
}
small {
  font-size: 75%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
.ion-hide {
  display: none !important;
}
.ion-hide-up {
  display: none !important;
}
.ion-hide-down {
  display: none !important;
}
@media (min-width: 576px) {
  .ion-hide-sm-up {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  .ion-hide-sm-down {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .ion-hide-md-up {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .ion-hide-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .ion-hide-lg-up {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .ion-hide-lg-down {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .ion-hide-xl-up {
    display: none !important;
  }
}
@media (max-width: 1199.98px) {
  .ion-hide-xl-down {
    display: none !important;
  }
}
/* Optional CSS utils that can be commented out */
.ion-no-padding {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.ion-padding {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding {
    padding-left: unset;
    padding-right: unset;
    padding-inline-start: var(--ion-padding, 16px);
    padding-inline-end: var(--ion-padding, 16px);
  }
}
.ion-padding-top {
  --padding-top: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
}
.ion-padding-start {
  --padding-start: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-start {
    padding-left: unset;
    padding-inline-start: var(--ion-padding, 16px);
  }
}
.ion-padding-end {
  --padding-end: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-end {
    padding-right: unset;
    padding-inline-end: var(--ion-padding, 16px);
  }
}
.ion-padding-bottom {
  --padding-bottom: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-vertical {
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-horizontal {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-horizontal {
    padding-left: unset;
    padding-right: unset;
    padding-inline-start: var(--ion-padding, 16px);
    padding-inline-end: var(--ion-padding, 16px);
  }
}
.ion-no-margin {
  --margin-start: 0;
  --margin-end: 0;
  --margin-top: 0;
  --margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.ion-margin {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin {
    margin-left: unset;
    margin-right: unset;
    margin-inline-start: var(--ion-margin, 16px);
    margin-inline-end: var(--ion-margin, 16px);
  }
}
.ion-margin-top {
  --margin-top: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
}
.ion-margin-start {
  --margin-start: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-start {
    margin-left: unset;
    margin-inline-start: var(--ion-margin, 16px);
  }
}
.ion-margin-end {
  --margin-end: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-end {
    margin-right: unset;
    margin-inline-end: var(--ion-margin, 16px);
  }
}
.ion-margin-bottom {
  --margin-bottom: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-vertical {
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-horizontal {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-horizontal {
    margin-left: unset;
    margin-right: unset;
    margin-inline-start: var(--ion-margin, 16px);
    margin-inline-end: var(--ion-margin, 16px);
  }
}
.ion-float-left {
  float: left !important;
}
.ion-float-right {
  float: right !important;
}
.ion-float-start {
  float: left !important;
}
[dir=rtl] .ion-float-start, :host-context([dir=rtl]) .ion-float-start {
  float: right !important;
}
.ion-float-end {
  float: right !important;
}
[dir=rtl] .ion-float-end, :host-context([dir=rtl]) .ion-float-end {
  float: left !important;
}
@media (min-width: 576px) {
  .ion-float-sm-left {
    float: left !important;
  }

  .ion-float-sm-right {
    float: right !important;
  }

  .ion-float-sm-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-sm-start, :host-context([dir=rtl]) .ion-float-sm-start {
    float: right !important;
  }

  .ion-float-sm-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-sm-end, :host-context([dir=rtl]) .ion-float-sm-end {
    float: left !important;
  }
}
@media (min-width: 768px) {
  .ion-float-md-left {
    float: left !important;
  }

  .ion-float-md-right {
    float: right !important;
  }

  .ion-float-md-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-md-start, :host-context([dir=rtl]) .ion-float-md-start {
    float: right !important;
  }

  .ion-float-md-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-md-end, :host-context([dir=rtl]) .ion-float-md-end {
    float: left !important;
  }
}
@media (min-width: 992px) {
  .ion-float-lg-left {
    float: left !important;
  }

  .ion-float-lg-right {
    float: right !important;
  }

  .ion-float-lg-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-lg-start, :host-context([dir=rtl]) .ion-float-lg-start {
    float: right !important;
  }

  .ion-float-lg-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-lg-end, :host-context([dir=rtl]) .ion-float-lg-end {
    float: left !important;
  }
}
@media (min-width: 1200px) {
  .ion-float-xl-left {
    float: left !important;
  }

  .ion-float-xl-right {
    float: right !important;
  }

  .ion-float-xl-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-xl-start, :host-context([dir=rtl]) .ion-float-xl-start {
    float: right !important;
  }

  .ion-float-xl-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-xl-end, :host-context([dir=rtl]) .ion-float-xl-end {
    float: left !important;
  }
}
.ion-text-center {
  text-align: center !important;
}
.ion-text-justify {
  text-align: justify !important;
}
.ion-text-start {
  text-align: start !important;
}
.ion-text-end {
  text-align: end !important;
}
.ion-text-left {
  text-align: left !important;
}
.ion-text-right {
  text-align: right !important;
}
.ion-text-nowrap {
  white-space: nowrap !important;
}
.ion-text-wrap {
  white-space: normal !important;
}
@media (min-width: 576px) {
  .ion-text-sm-center {
    text-align: center !important;
  }

  .ion-text-sm-justify {
    text-align: justify !important;
  }

  .ion-text-sm-start {
    text-align: start !important;
  }

  .ion-text-sm-end {
    text-align: end !important;
  }

  .ion-text-sm-left {
    text-align: left !important;
  }

  .ion-text-sm-right {
    text-align: right !important;
  }

  .ion-text-sm-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-sm-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-center {
    text-align: center !important;
  }

  .ion-text-md-justify {
    text-align: justify !important;
  }

  .ion-text-md-start {
    text-align: start !important;
  }

  .ion-text-md-end {
    text-align: end !important;
  }

  .ion-text-md-left {
    text-align: left !important;
  }

  .ion-text-md-right {
    text-align: right !important;
  }

  .ion-text-md-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-md-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-center {
    text-align: center !important;
  }

  .ion-text-lg-justify {
    text-align: justify !important;
  }

  .ion-text-lg-start {
    text-align: start !important;
  }

  .ion-text-lg-end {
    text-align: end !important;
  }

  .ion-text-lg-left {
    text-align: left !important;
  }

  .ion-text-lg-right {
    text-align: right !important;
  }

  .ion-text-lg-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-lg-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-center {
    text-align: center !important;
  }

  .ion-text-xl-justify {
    text-align: justify !important;
  }

  .ion-text-xl-start {
    text-align: start !important;
  }

  .ion-text-xl-end {
    text-align: end !important;
  }

  .ion-text-xl-left {
    text-align: left !important;
  }

  .ion-text-xl-right {
    text-align: right !important;
  }

  .ion-text-xl-nowrap {
    white-space: nowrap !important;
  }

  .ion-text-xl-wrap {
    white-space: normal !important;
  }
}
.ion-text-uppercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: uppercase !important;
}
.ion-text-lowercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: lowercase !important;
}
.ion-text-capitalize {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: capitalize !important;
}
@media (min-width: 576px) {
  .ion-text-sm-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-sm-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-sm-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-md-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-md-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-lg-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-lg-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-xl-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-xl-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
.ion-align-self-start {
  align-self: flex-start !important;
}
.ion-align-self-end {
  align-self: flex-end !important;
}
.ion-align-self-center {
  align-self: center !important;
}
.ion-align-self-stretch {
  align-self: stretch !important;
}
.ion-align-self-baseline {
  align-self: baseline !important;
}
.ion-align-self-auto {
  align-self: auto !important;
}
.ion-wrap {
  flex-wrap: wrap !important;
}
.ion-nowrap {
  flex-wrap: nowrap !important;
}
.ion-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.ion-justify-content-start {
  justify-content: flex-start !important;
}
.ion-justify-content-center {
  justify-content: center !important;
}
.ion-justify-content-end {
  justify-content: flex-end !important;
}
.ion-justify-content-around {
  justify-content: space-around !important;
}
.ion-justify-content-between {
  justify-content: space-between !important;
}
.ion-justify-content-evenly {
  justify-content: space-evenly !important;
}
.ion-align-items-start {
  align-items: flex-start !important;
}
.ion-align-items-center {
  align-items: center !important;
}
.ion-align-items-end {
  align-items: flex-end !important;
}
.ion-align-items-stretch {
  align-items: stretch !important;
}
.ion-align-items-baseline {
  align-items: baseline !important;
}
/**
 * Swiper 8.4.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 30, 2023
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-android .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-pointer-events {
  touch-action: pan-y;
}
.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size:44px;
}
.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-feature-settings: ;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "prev";
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "next";
}
.swiper-button-lock {
  display: none;
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color:#fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color:#000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  backface-visibility: hidden;
  overflow: hidden;
}
/* Bộ style dùng chung của mSchool — xem theme/ms-ui.scss */
/* ============================================================================
   mSchool UI Kit
   ----------------------------------------------------------------------------
   Bộ token và class dùng chung cho mọi trang. Đặt ở global nên không cần
   import lại trong từng component.

   Mọi thứ đều có tiền tố `ms-` để không đụng vào class sẵn có của app hay
   của Ionic.

   Cách dùng:
     <ion-content class="ms-page">
       <div class="ms-card"> ... </div>
     </ion-content>
   ========================================================================== */
:root {
  /* --- Nền và bề mặt --- */
  --ms-bg: #f4f7fc;
  --ms-surface: #ffffff;
  --ms-surface-2: #f8fafd;
  /* --- Chữ --- */
  --ms-ink: #16243c; /* tiêu đề */
  --ms-ink-2: #5a6982; /* nội dung phụ */
  --ms-ink-3: #98a3b8; /* chú thích, placeholder */
  /* --- Đường kẻ --- */
  --ms-line: #e7edf6;
  --ms-line-strong: #d6e0ee;
  /* --- Thương hiệu --- */
  --ms-brand: #0353b4;
  --ms-brand-2: #1d7bec;
  --ms-brand-soft: #eaf2ff;
  --ms-brand-grad: linear-gradient(135deg, #0b56bd 0%, #1d7bec 100%);
  /* Header dùng gradient ngang: xếp 2 toolbar chồng nhau cũng không lộ đường nối */
  --ms-header-grad: linear-gradient(90deg, #0b56bd 0%, #1e7ce8 100%);
  /* --- Trạng thái --- */
  --ms-ok: #10945f;
  --ms-ok-soft: #e4f7ee;
  --ms-warn: #b8770a;
  --ms-warn-soft: #fff4e0;
  --ms-danger: #cf3b40;
  --ms-danger-soft: #ffecec;
  /* --- Bo góc --- */
  --ms-r-sm: 10px;
  --ms-r-md: 14px;
  --ms-r-lg: 18px;
  --ms-r-xl: 24px;
  --ms-r-pill: 999px;
  /* --- Đổ bóng --- */
  --ms-sh-1: 0 2px 10px rgba(16, 48, 96, .06);
  --ms-sh-2: 0 8px 24px rgba(16, 48, 96, .09);
  --ms-sh-brand: 0 10px 22px rgba(11, 86, 189, .26);
  /* --- Khoảng cách --- */
  --ms-gap: 14px;
}
/* ============================================================================
   Header
   ----------------------------------------------------------------------------
   Áp cho MỌI toolbar đang dùng color="primary" — tức gần như toàn bộ app.
   Chỉ đổi phần nhìn (nền, chữ, bóng), không đổi cấu trúc, nên không phải
   sửa template của từng trang.

   Trang nào muốn giữ nền phẳng như cũ thì thêm class `ms-header--flat`
   vào chính thẻ ion-toolbar đó.
   ========================================================================== */
ion-header ion-toolbar.ion-color-primary {
  /* Khi toolbar có color="...", Ionic KHÔNG đọc --background nữa mà vẽ nền bằng
     `background: var(--ion-color-base)` ở lớp .toolbar-background trong shadow DOM.
     Muốn đổi nền thì phải ghi đè chính --ion-color-base, và phải kèm !important
     vì rule .ion-color-primary của Ionic cũng dùng !important.
     Giá trị là một gradient — hợp lệ vì đây là thuộc tính `background`. */
  --ion-color-base: var(--ms-header-grad) !important;
  --background: var(--ms-header-grad);
  --color: #fff;
  --border-width: 0;
  --min-height: 52px;
}
ion-header ion-toolbar.ion-color-primary ion-title {
  padding-inline: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
ion-header ion-toolbar.ion-color-primary ion-back-button,
ion-header ion-toolbar.ion-color-primary ion-button {
  --color: #fff;
  --color-activated: rgba(255, 255, 255, .7);
  --ripple-color: #fff;
}
ion-header ion-toolbar.ion-color-primary ion-icon {
  font-size: 22px;
}
ion-header ion-toolbar.ion-color-primary.ms-header--flat {
  --ion-color-base: var(--ms-brand) !important;
  --background: var(--ms-brand);
}
/* --ion-color-base là biến kế thừa. Trả nó về màu đặc cho các phần tử con
   chưa tự khai màu, để gradient không rơi vào nút bấm nằm trong toolbar. */
ion-header ion-toolbar.ion-color-primary > *:not([class*=ion-color]) {
  --ion-color-base: var(--ion-color-primary) !important;
}
/* Bỏ đường kẻ mặc định của Ionic, thay bằng bóng mềm cho đỡ gắt */
ion-header.header-md::after,
ion-header.header-ios::after {
  display: none;
}
ion-header {
  box-shadow: 0 2px 12px rgba(6, 42, 96, 0.14);
}
/* Toolbar thứ hai nằm dưới header chính (segment, bộ lọc) — thấp hơn một chút */
ion-header ion-toolbar.ion-color-primary + ion-toolbar.ion-color-primary {
  --min-height: 44px;
}
/* ============================================================================
   Trang
   ========================================================================== */
ion-content.ms-page {
  --background: var(--ms-bg);
  --padding-start: 0;
  --padding-end: 0;
  color: var(--ms-ink);
}
/* Vùng nội dung có lề hai bên, cách mép màn hình */
.ms-container {
  padding: var(--ms-gap);
  padding-bottom: calc(var(--ms-gap) + env(safe-area-inset-bottom));
}
/* Thanh công cụ phụ nằm dưới header chính (bộ lọc, ngày tháng...) */
.ms-subbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px var(--ms-gap);
  background: var(--ms-surface);
  border-bottom: 1px solid var(--ms-line);
}
/* ============================================================================
   Refresher — chấm tròn nổi, không dùng chữ
   Áp cho mọi trang dùng .ms-page
   ========================================================================== */
ion-content.ms-page ion-refresher {
  background: transparent;
}
ion-content.ms-page ion-refresher-content {
  background: transparent;
}
ion-content.ms-page ion-refresher-content .refresher-pulling-text,
ion-content.ms-page ion-refresher-content .refresher-refreshing-text {
  display: none;
}
ion-content.ms-page ion-refresher-content .refresher-pulling-icon,
ion-content.ms-page ion-refresher-content .refresher-refreshing-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: var(--ms-surface);
  border-radius: 50%;
  box-shadow: var(--ms-sh-2);
}
ion-content.ms-page ion-refresher-content .refresher-pulling-icon ion-icon {
  font-size: 19px;
  color: var(--ms-brand);
}
ion-content.ms-page ion-refresher-content ion-spinner {
  width: 20px;
  height: 20px;
  color: var(--ms-brand);
}
/* ============================================================================
   Thẻ
   ========================================================================== */
.ms-card {
  padding: 16px;
  background: var(--ms-surface);
  border-radius: var(--ms-r-lg);
  box-shadow: var(--ms-sh-1);
}
.ms-card + .ms-card {
  margin-top: var(--ms-gap);
}
/* Thẻ và dòng danh sách hay đứng cạnh nhau trong cùng một trang
   (ví dụ thẻ tổng hợp rồi tới danh sách). Không có quy tắc này thì
   phần tử đầu tiên của loại sau sẽ dính sát vào phần tử trước. */
.ms-card + .ms-row,
.ms-row + .ms-card,
.ms-card + .ms-empty {
  margin-top: var(--ms-gap);
}
.ms-card--flat {
  box-shadow: none;
  border: 1px solid var(--ms-line);
}
.ms-card--brand {
  color: #fff;
  background: var(--ms-brand-grad);
  box-shadow: var(--ms-sh-brand);
}
.ms-card--brand .ms-card__title,
.ms-card--brand .ms-card__meta,
.ms-card--brand .ms-meta-row {
  color: #fff;
}
.ms-card--brand .ms-card__meta,
.ms-card--brand .ms-meta-row {
  color: rgba(255, 255, 255, 0.82);
}
.ms-card__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.ms-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--ms-brand-soft);
  border-radius: var(--ms-r-md);
}
.ms-card__icon ion-icon {
  font-size: 22px;
  color: var(--ms-brand);
}
.ms-card__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ms-ink);
}
.ms-card__meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--ms-ink-3);
}
/* ============================================================================
   Tiêu đề khối
   ========================================================================== */
.ms-section {
  margin: 22px 0 10px;
}
.ms-section:first-child {
  margin-top: 0;
}
.ms-section__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--ms-ink-3);
  text-transform: uppercase;
}
.ms-section__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ms-ink);
}
/* ============================================================================
   Dòng thông tin có icon
   ========================================================================== */
.ms-meta-row {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ms-ink-2);
}
.ms-meta-row + .ms-meta-row {
  margin-top: 6px;
}
.ms-meta-row ion-icon {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--ms-ink-3);
}
/* ============================================================================
   Chip
   ========================================================================== */
.ms-chip {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ms-ink-2);
  white-space: nowrap;
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-pill);
}
.ms-chip ion-icon {
  font-size: 14px;
}
.ms-chip--brand {
  color: var(--ms-brand);
  background: var(--ms-brand-soft);
  border-color: transparent;
}
.ms-chip--ok {
  color: var(--ms-ok);
  background: var(--ms-ok-soft);
  border-color: transparent;
}
.ms-chip--warn {
  color: var(--ms-warn);
  background: var(--ms-warn-soft);
  border-color: transparent;
}
.ms-chip--danger {
  color: var(--ms-danger);
  background: var(--ms-danger-soft);
  border-color: transparent;
}
/* Chip bấm được, ví dụ nút chọn ngày */
.ms-chip--tap {
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.ms-chip--tap:active {
  transform: scale(0.97);
}
/* ============================================================================
   Số liệu
   ========================================================================== */
.ms-stats {
  display: flex;
  gap: 10px;
}
.ms-stat {
  flex: 1;
  padding: 11px 12px;
  text-align: center;
  background: var(--ms-surface-2);
  border-radius: var(--ms-r-md);
}
.ms-stat__value {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ms-brand);
}
.ms-stat__label {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ms-ink-3);
}
/* ============================================================================
   Thanh tỉ lệ
   Cách dùng: <div class="ms-bar"><i style="width: 62%"></i></div>
   ========================================================================== */
.ms-bar {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  background: var(--ms-line);
  border-radius: var(--ms-r-pill);
}
.ms-bar i {
  display: block;
  height: 100%;
  background: var(--ms-brand-grad);
  border-radius: inherit;
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ms-bar--ok i {
  background: var(--ms-ok);
}
.ms-bar--muted i {
  background: var(--ms-line-strong);
}
/* ============================================================================
   Băng thông báo
   ========================================================================== */
.ms-banner {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: var(--ms-r-md);
}
.ms-banner ion-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 17px;
}
.ms-banner--info {
  color: var(--ms-brand);
  background: var(--ms-brand-soft);
}
.ms-banner--ok {
  color: var(--ms-ok);
  background: var(--ms-ok-soft);
}
.ms-banner--warn {
  color: var(--ms-warn);
  background: var(--ms-warn-soft);
}
.ms-banner--danger {
  color: var(--ms-danger);
  background: var(--ms-danger-soft);
}
/* ============================================================================
   Trạng thái rỗng
   ========================================================================== */
.ms-empty {
  padding: 46px 28px;
  /* Chừa thêm vùng home indicator — trạng thái rỗng hay có nút hành động ở dưới */
  padding-bottom: calc(46px + env(safe-area-inset-bottom));
  text-align: center;
}
.ms-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background: var(--ms-brand-soft);
  border-radius: 50%;
}
.ms-empty__icon ion-icon {
  font-size: 32px;
  color: var(--ms-brand-2);
  opacity: 0.85;
}
.ms-empty__title {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ms-ink);
}
.ms-empty__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ms-ink-3);
}
/* ============================================================================
   Khung chờ
   ========================================================================== */
.ms-skel {
  background: linear-gradient(90deg, rgba(16, 48, 96, 0.06) 25%, rgba(16, 48, 96, 0.11) 37%, rgba(16, 48, 96, 0.06) 63%);
  background-size: 400% 100%;
  border-radius: var(--ms-r-sm);
  animation: ms-skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes ms-skel-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
/* ============================================================================
   Dòng danh sách bấm được
   Dùng cho danh sách thông báo, tin nhắn, phiếu bình chọn...
   ========================================================================== */
.ms-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 14px;
  margin: 0;
  font: inherit;
  text-align: left;
  background: var(--ms-surface);
  border: none;
  border-radius: var(--ms-r-lg);
  box-shadow: var(--ms-sh-1);
  transition: transform 0.1s ease, box-shadow 0.18s ease;
}
.ms-row + .ms-row {
  margin-top: 10px;
}
.ms-row:active {
  transform: scale(0.988);
  box-shadow: var(--ms-sh-2);
}
.ms-row__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--ms-brand-soft);
  border-radius: var(--ms-r-md);
}
.ms-row__icon ion-icon {
  font-size: 21px;
  color: var(--ms-brand);
}
.ms-row__body {
  flex: 1;
  min-width: 0;
}
.ms-row__top {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ms-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ms-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-row__time {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--ms-ink-3);
  white-space: nowrap;
}
/* Cắt gọn còn N dòng: <p class="ms-row__text ms-clamp-2"> */
.ms-row__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ms-ink-2);
}
.ms-clamp-2,
.ms-clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.ms-clamp-2 {
  -webkit-line-clamp: 2;
}
.ms-clamp-3 {
  -webkit-line-clamp: 3;
}
/* Trạng thái chưa đọc: chữ đậm hơn và có chấm màu bên phải */
.ms-row--unread .ms-row__title,
.ms-row--unread .ms-row__text {
  font-weight: 700;
  color: var(--ms-ink);
}
.ms-row--unread .ms-row__icon {
  background: var(--ms-brand);
}
.ms-row--unread .ms-row__icon ion-icon {
  color: #fff;
}
.ms-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--ms-brand-2);
  border-radius: 50%;
}
/* ============================================================================
   Ảnh đại diện chữ cái
   Dùng kèm class `m-avatar color-N` sẵn có để lấy nền gradient
   ========================================================================== */
.ms-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--ms-brand);
  border-radius: 14px;
}
/* ============================================================================
   Ô ngày tháng ở đầu dòng
   ========================================================================== */
.ms-datebox {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--ms-brand-soft);
  border-radius: var(--ms-r-md);
}
.ms-datebox__day {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ms-brand);
}
.ms-datebox__sub {
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ms-brand-2);
  text-transform: uppercase;
}
.ms-datebox--danger {
  background: var(--ms-danger-soft);
}
.ms-datebox--danger .ms-datebox__day {
  color: var(--ms-danger);
}
.ms-datebox--danger .ms-datebox__sub {
  color: var(--ms-danger);
  opacity: 0.8;
}
/* ============================================================================
   Ô thông tin nhỏ, xếp hàng ngang
   ========================================================================== */
.ms-cells {
  display: flex;
  gap: 7px;
}
.ms-cell {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  text-align: center;
  background: var(--ms-surface-2);
  border-radius: var(--ms-r-sm);
}
.ms-cell__label {
  font-size: 10.5px;
  color: var(--ms-ink-3);
}
.ms-cell__value {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--ms-ink);
  word-break: break-word;
}
/* ============================================================================
   Ô tìm kiếm
   ========================================================================== */
ion-searchbar.ms-search {
  --background: var(--ms-surface-2);
  --border-radius: var(--ms-r-md);
  --box-shadow: none;
  --color: var(--ms-ink);
  --placeholder-color: var(--ms-ink-3);
  --icon-color: var(--ms-ink-3);
  padding: 0;
  font-size: 14px;
}
/* ============================================================================
   Ô tích chọn
   Tự vẽ bằng CSS thay cho ion-checkbox — canh hàng chuẩn hơn trong .ms-row
   và đổi màu theo trạng thái mà không cần biến của Ionic.
   ========================================================================== */
.ms-tick {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--ms-surface);
  border: 1.5px solid var(--ms-line-strong);
  border-radius: 8px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ms-tick ion-icon {
  font-size: 16px;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.is-picked > .ms-tick,
.ms-tick.is-on {
  background: var(--ms-brand-2);
  border-color: var(--ms-brand-2);
}
.is-picked > .ms-tick ion-icon,
.ms-tick.is-on ion-icon {
  opacity: 1;
  transform: none;
}
/* Dòng đang được chọn */
.ms-row.is-picked {
  background: var(--ms-brand-soft);
  box-shadow: inset 0 0 0 1.5px var(--ms-brand-2);
}
/* ============================================================================
   Thanh hành động dưới đáy, hiện khi đã chọn
   ========================================================================== */
.ms-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px var(--ms-gap);
  padding-bottom: calc(11px + env(safe-area-inset-bottom));
  background: var(--ms-surface);
  border-top: 1px solid var(--ms-line);
  box-shadow: 0 -4px 18px rgba(16, 48, 96, 0.08);
}
.ms-actionbar__count {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--ms-ink-2);
}
.ms-actionbar__count strong {
  color: var(--ms-brand);
}
/* ============================================================================
   Segment
   Dùng class này thay vì để rule `ion-segment` trần trong global.scss
   ========================================================================== */
ion-segment.ms-segment {
  width: 100%;
  padding: 4px;
  margin: 0;
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-md);
}
ion-segment.ms-segment ion-segment-button {
  --background-checked: var(--ms-surface);
  --color: var(--ms-ink-3);
  --color-checked: var(--ms-brand);
  --indicator-color: transparent;
  --border-radius: 10px;
  --padding-top: 0;
  --padding-bottom: 0;
  min-height: 34px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
ion-segment.ms-segment ion-segment-button.segment-button-checked {
  box-shadow: 0 2px 8px rgba(16, 48, 96, 0.1);
}
/* ============================================================================
   Ô chọn dạng gọn, dùng cho ion-select trên thanh lọc
   ========================================================================== */
ion-item.ms-select {
  --background: transparent;
  --padding-start: 0;
  --inner-padding-end: 0;
  --min-height: 34px;
  --border-width: 0;
  font-size: 13px;
}
ion-item.ms-select ion-select {
  --padding-start: 11px;
  --padding-end: 9px;
  --padding-top: 6px;
  --padding-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ms-ink-2);
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-pill);
}
/* ============================================================================
   Hộp thoại có nút xếp dọc
   Dùng khi nhãn nút dài (ví dụ "Lấy lại mật khẩu"). Mặc định Ionic xếp nút
   nằm ngang, nhãn dài sẽ bị tràn ra khỏi khung trên máy màn nhỏ.
   Cách dùng: alertController.create({ cssClass: 'ms-alert-stacked', ... })
   ========================================================================== */
ion-alert.ms-alert-stacked {
  /* Nút đầu là hành động chính — tô nền cho nổi */
}
ion-alert.ms-alert-stacked .alert-button-group {
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 6px;
}
ion-alert.ms-alert-stacked .alert-button {
  width: 100%;
  max-width: none;
  margin: 2px 0;
  border: 0;
  border-radius: var(--ms-r-sm);
  text-align: center;
}
ion-alert.ms-alert-stacked .alert-button-inner {
  justify-content: center;
}
ion-alert.ms-alert-stacked .alert-button:last-child {
  color: #fff;
  background: var(--ms-brand);
}
/* ============================================================================
   Đăng nhập thất bại — alert riêng của trang Login
   Giữ alert gọn, mềm và đồng bộ với card/gradient xanh của màn đăng nhập.
   ========================================================================== */
ion-alert.ms-alert-login-failed {
  --width: min(88vw, 350px);
  --max-width: 350px;
  --backdrop-opacity: .34;
}
ion-alert.ms-alert-login-failed .alert-wrapper {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(16, 48, 96, 0.22), 0 5px 18px rgba(16, 48, 96, 0.08);
}
ion-alert.ms-alert-login-failed .alert-head {
  position: relative;
  padding: 26px 24px 8px;
  text-align: left;
}
ion-alert.ms-alert-login-failed .alert-head::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 14px;
  color: var(--ms-brand);
  background: linear-gradient(145deg, #edf6ff, #dcecff);
  box-shadow: inset 0 0 0 1px rgba(7, 87, 189, 0.08);
  font-size: 21px;
  font-weight: 800;
}
ion-alert.ms-alert-login-failed .alert-title {
  color: #17233c;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
ion-alert.ms-alert-login-failed .alert-message {
  padding: 0 24px 20px;
  /* iOS mode căn giữa mặc định, trong khi tiêu đề đã căn trái — ép về trái
     cho khớp, nếu không trên iPhone sẽ lệch một bên. */
  text-align: left;
  color: #6f7f93;
  font-size: 14px;
  line-height: 1.5;
}
ion-alert.ms-alert-login-failed .alert-button-group {
  gap: 8px;
  padding: 0 16px 16px;
}
ion-alert.ms-alert-login-failed .alert-button {
  min-height: 46px;
  margin: 0;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
ion-alert.ms-alert-login-failed .alert-button:active {
  transform: scale(0.985);
}
ion-alert.ms-alert-login-failed .alert-button.ms-alert-action-secondary {
  order: 2;
  color: #66778d;
  background: #f3f7fc;
}
ion-alert.ms-alert-login-failed .alert-button.ms-alert-action-primary {
  order: 1;
  color: #fff;
  background: linear-gradient(135deg, #0757bd 0%, #0c6ddd 100%);
  box-shadow: 0 9px 20px rgba(7, 87, 189, 0.22);
}
/* ============================================================================
   Trường nhập trong biểu mẫu
   ----------------------------------------------------------------------------
   ĐÂY LÀ STYLE DÙNG CHUNG. Trước đây các trang gọi .ms-field__box nhưng không
   trang nào định nghĩa nó, nên ô nhập hiện ra trần trụi: không viền, không nền,
   icon lịch rơi xuống dòng riêng.
   ========================================================================== */
.ms-field {
  margin-bottom: 15px;
}
.ms-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ms-ink-2);
}
.ms-field__box {
  display: flex;
  align-items: center;
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-md);
  /* Mọi loại ô nhập đều giãn hết phần còn lại, icon/nút bám bên phải */
  /* Ô có icon hoặc nút bên phải thì bớt đệm phải cho khỏi thừa */
}
.ms-field__box ion-input,
.ms-field__box ion-textarea,
.ms-field__box ion-select,
.ms-field__box ion-datetime-button {
  --padding-start: 13px;
  --padding-end: 13px;
  --padding-top: 12px;
  --padding-bottom: 12px;
  --placeholder-color: var(--ms-ink-3);
  --placeholder-opacity: 1;
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
}
.ms-field__box ion-textarea {
  line-height: 1.55;
}
.ms-field__box ion-input + *,
.ms-field__box ion-select + * {
  flex: 0 0 auto;
}
.ms-field__box.is-error {
  background: var(--ms-danger-soft);
  border-color: var(--ms-danger);
}
.ms-field__static {
  padding: 12px 13px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ms-brand);
  word-break: break-word;
  background: var(--ms-brand-soft);
  border-radius: var(--ms-r-md);
}
.ms-field__hint {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ms-ink-3);
}
.ms-field__error {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--ms-danger);
}
/* Hai trường xếp cạnh nhau */
.ms-field-row {
  display: flex;
  gap: 10px;
}
.ms-field-row .ms-field {
  flex: 1;
  min-width: 0;
}
/* ============================================================================
   Nút
   ========================================================================== */
ion-button.ms-btn {
  --background: var(--ms-brand-grad);
  --background-activated: var(--ms-brand);
  --border-radius: var(--ms-r-md);
  --box-shadow: var(--ms-sh-brand);
  --padding-top: 21px;
  --padding-bottom: 21px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
ion-button.ms-btn--ghost {
  --background: transparent;
  --background-activated: var(--ms-brand-soft);
  --box-shadow: none;
  --color: var(--ms-brand);
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--ms-line-strong);
}
/* Thanh nút dính đáy màn hình */
.ms-footbar {
  position: sticky;
  bottom: 0;
  padding: 12px var(--ms-gap);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--ms-surface);
  border-top: 1px solid var(--ms-line);
  box-shadow: 0 -4px 18px rgba(16, 48, 96, 0.06);
}
/* ============================================================================
   Hiệu ứng xuất hiện
   Dùng cho danh sách: <div class="ms-in" [style.animation-delay]="i*40 + 'ms'">
   ========================================================================== */
.ms-in {
  opacity: 0;
  animation: ms-in 0.32s ease forwards;
}
@keyframes ms-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms-in,
.ms-skel,
.ms-bar i {
    animation: none;
    opacity: 1;
    transition: none;
  }
}
.ion-no-box-shadow {
  box-shadow: none !important;
}
ion-content {
  background: #FFF;
}
.ion-content-detail ion-card {
  box-shadow: none;
}
.ion-content-detail ion-card-header {
  padding-bottom: var(--ion-padding, 8px);
}
.ion-content-detail .ion-imgs ion-img {
  margin-bottom: 10px;
  margin-top: 5px;
  border-radius: 4px !important;
}
.ion-content-detail .ion-imgs ion-img img {
  border-radius: 6px !important;
  overflow: hidden;
}
.ion-content-detail ion-card-subtitle {
  display: flex;
  align-items: center;
}
.ion-content-detail ion-card-subtitle ion-icon {
  margin-right: 5px;
}
.ion-content-detail ion-card-title {
  font-size: 18px;
  line-height: 1.5;
}
iframe {
  border: none !important;
}
.ion-content-contact ion-list-header {
  font-size: 16px;
}
.ion-content-contact .m-avatar {
  line-height: 35px;
  text-align: center;
  margin-right: 15px;
  margin-left: 15px;
  color: #FFF;
}
.ion-content-contact ion-label h2 {
  font-size: 15px;
}
.ion-content-contact ion-label h3 {
  font-size: 14px;
}
.ion-content-contact ion-list-header {
  line-height: 40px;
}
.ion-list-filter {
  display: flex;
  align-items: center;
  border-bottom: solid 5px #F3F6FF;
  padding-bottom: 6px;
}
.ion-list-filter ion-select {
  width: 40%;
  padding: 0;
  height: 28px;
  border: solid 1px #e7f0fd;
  border-radius: 5px;
  padding: 2px 10px;
  margin-left: 10px;
  margin-bottom: 0px;
  background: #f3f6ff;
  font-size: 14px;
}
.ion-list-filter ion-label {
  font-size: 14px;
  width: 60%;
  border: solid 1px #e7f0fd;
  background: #f3f6ff;
  text-align: center;
  border-radius: 6px;
  margin: 0 10px;
  padding: 3px 10px;
  cursor: pointer;
  height: 28px;
}
.list-has-checkbox ion-checkbox {
  margin-right: 10px;
  width: 25px;
  height: 25px;
}
.m-fab-button ion-fab-button {
  font-size: 16px;
  height: 50px;
  width: 50px;
}
.m-fab-button ion-fab-button ion-icon {
  font-size: 20px;
}
ion-item {
  /*--border-color: #e6e7e9;*/
}
ion-label.ion-label-flex {
  align-items: center;
}
ion-label.ion-label-flex ion-icon {
  margin-right: 5px;
}
ion-modal.ion-date-picker {
  --background: rgba(44, 39, 45, 0.2);
}
ion-modal.ion-date-picker::part(content) {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
ion-modal.ion-date-picker ion-content {
  background: transparent;
  --padding-top: 25vh;
  --padding-start: 20px;
  --padding-end: 20px;
  --background: transparent;
}
ion-modal.ion-date-picker ion-content ion-datetime {
  border-radius: 8px;
}
ion-modal.ion-date-picker .calendar-day {
  font-size: 16px;
}
.ion-content-detail ion-chip {
  font-size: 16px;
  height: auto;
}
/* Rule cũ áp lên MỌI ion-segment trong app. Giờ các trang đều dùng .ms-segment
   trong theme/ms-ui.scss, nên rule này chỉ còn gây đụng độ.
   Đổi thành class để trang nào thật sự cần thì tự gắn vào.
   Nếu sau khi áp bản này có trang nào segment nhìn lạ, thêm class .m-segment-legacy
   vào ion-segment của trang đó. */
ion-segment.m-segment-legacy {
  margin: 5px auto;
  width: 90%;
  background: #F3F6FF;
  border: solid 1px #EEE;
}
ion-avatar {
  margin-right: 5px;
  margin-left: 10px;
}
ion-refresher {
  background: #FFF;
  z-index: 2;
  margin-top: 22px;
}
.justify-content-between {
  justify-content: space-between !important;
}
.align-items-center {
  align-items: center;
}
.flex {
  display: flex;
}
/*.android ion-content {
  --padding-top: env(safe-area-inset-top);
  --padding-bottom: env(safe-area-inset-bottom);
  --padding-left: env(safe-area-inset-left);
  --padding-right: env(safe-area-inset-right);
}*/
/*ion-content {
  --padding-bottom: var(--safe-bottom-offset, env(safe-area-inset-bottom)) !important;
}

ion-footer,
ion-tab-bar {
  padding-bottom: var(--safe-bottom-offset, env(safe-area-inset-bottom));
}*/
/*.platform-android .ion-page, .platform-desktop .ion-content-contact{
  margin-bottom: var(--safe-bottom-offset, env(safe-area-inset-bottom));
}*/
/*
.footer-safe-area {
  height: env(safe-area-inset-bottom);
  background: var(--ion-background-color, #fff); !* hoặc màu nền app *!
  border: none;
  box-shadow: none;
}
*/
.platform-android .ion-content-contact, .platform-desktop .ion-content-contact, .ion-page {
  /*--offset-bottom: -40px !important;*/
}
.platform-android .ion-content-contact.offset-bottom-0, .platform-desktop .ion-content-contact.offset-bottom-0 {
  /*--offset-bottom: 0 !important;*/
}
.platform-desktop ion-app.ion-page, .platform-android ion-app.ion-page {
  bottom: var(--safe-bottom-offset, safe-area-inset-bottom) !important;
}
/* ============================================================
   Modal thong bao cap nhat app (AppUpdateModalComponent)
   Nen trong suot de the card bo goc noi len tren backdrop
   ============================================================ */
.app-update-modal {
  --background: transparent;
  --box-shadow: none;
  --backdrop-opacity: 0.45;
  --width: 100%;
  --height: 100%;
}
.app-update-modal::part(content) {
  background: transparent;
  box-shadow: none;
}

/*# sourceMappingURL=styles.css.map*/