@charset "UTF-8";
/*===================================*
  START GENERAL STYLE
*===================================*/
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/noto_sans/NotoSansThai-Light.woff2") format("woff2"), url("../fonts/noto_sans/NotoSansThai-Light.woff") format("woff"); }

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/noto_sans/NotoSansThai-Regular.woff2") format("woff2"), url("../fonts/noto_sans/NotoSansThai-Regular.woff") format("woff"); }

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/noto_sans/NotoSansThai-SemiBold.woff2") format("woff2"), url("../fonts/noto_sans/NotoSansThai-SemiBold.woff") format("woff"); }

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/noto_sans/NotoSansThai-Bold.woff2") format("woff2"), url("../fonts/noto_sans/NotoSansThai-Bold.woff") format("woff"); }

@font-face {
  font-family: "kanit";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/kanit/Kanit-Light.ttf") format("truetype"); }

@font-face {
  font-family: "kanit";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/kanit/Kanit-Regular.ttf") format("truetype"); }

@font-face {
  font-family: "kanit";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/kanit/Kanit-Medium.ttf") format("truetype"); }

@font-face {
  font-family: "kanit";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/kanit/Kanit-SemiBold.ttf") format("truetype"); }

@font-face {
  font-family: "kanit";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/kanit/Kanit-Bold.ttf") format("truetype"); }

@font-face {
  font-family: "alarm";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/alarm/alarm_clock.ttf") format("truetype"); }

@font-face {
  font-family: 'fontello';
  src: url("../fonts/icon/fontello.eot?42499609");
  src: url("../fonts/icon/fontello.eot?42499609#iefix") format("embedded-opentype"), url("../fonts/icon/fontello.woff2?42499609") format("woff2"), url("../fonts/icon/fontello.woff?42499609") format("woff"), url("../fonts/icon/fontello.ttf?42499609") format("truetype"), url("../fonts/icon/fontello.svg?42499609#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.svg?42991267#fontello') format('svg');
    }
  }
  */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-home:before {
  content: '\e800'; }

/* '' */
.icon-simulator:before {
  content: '\e801'; }

/* '' */
.icon-game:before {
  content: '\e802'; }

/* '' */
.icon-pulse_survey:before {
  content: '\e803'; }

/* '' */
.icon-calendar-1:before {
  content: '\e804'; }

/* '' */
.icon-ok-circled:before {
  content: '\e807'; }

/* '' */
.icon-cancel-circled:before {
  content: '\e808'; }

/* '' */
.icon-double-right:before {
  content: '\e809'; }

/* '' */
.icon-double-left:before {
  content: '\e815'; }

/* '' */
.icon-right-bold:before {
  content: '\e816'; }

/* '' */
.icon-left-bold:before {
  content: '\e817'; }

/* '' */
.icon-arrow-up:before {
  content: '\e818'; }

/* '' */
.icon-app:before {
  content: '\e821'; }

/* '' */
.icon-board:before {
  content: '\e822'; }

/* '' */
.icon-home-outline:before {
  content: '\e823'; }

/* '' */
.icon-mail:before {
  content: '\e824'; }

/* '' */
.icon-bell:before {
  content: '\e825'; }

/* '' */
.icon-user:before {
  content: '\e826'; }

/* '' */
.icon-view:before {
  content: '\e827'; }

/* '' */
.icon-filter:before {
  content: '\e828'; }

/* '' */
.icon-eye-1:before {
  content: '\e829'; }

/* '' */
.icon-create:before {
  content: '\e82a'; }

/* '' */
.icon-plus-image:before {
  content: '\e82b'; }

/* '' */
.icon-paper-plane:before {
  content: '\e82c'; }

/* '' */
.icon-people:before {
  content: '\e82d'; }

/* '' */
.icon-survey:before {
  content: '\e82e'; }

/* '' */
.icon-x-1:before {
  content: '\e82f'; }

/* '' */
.icon-arrow-rigth:before {
  content: '\e830'; }

/* '' */
.icon-image:before {
  content: '\e831'; }

/* '' */
.icon-trash:before {
  content: '\e832'; }

/* '' */
.icon-announce:before {
  content: '\e900'; }

/* '' */
.icon-fax:before {
  content: '\e902'; }

/* '' */
.icon-fb:before {
  content: '\e903'; }

/* '' */
.icon-google-plus:before {
  content: '\e904'; }

/* '' */
.icon-instagram:before {
  content: '\e905'; }

/* '' */
.icon-phone:before {
  content: '\e906'; }

/* '' */
.icon-x:before {
  content: '\e907'; }

/* '' */
.icon-youtube:before {
  content: '\e908'; }

/* '' */
.icon-bus:before {
  content: '\e909'; }

/* '' */
.icon-calendar:before {
  content: '\e90a'; }

/* '' */
.icon-clock:before {
  content: '\e90b'; }

/* '' */
.icon-comment:before {
  content: '\e90c'; }

/* '' */
.icon-eye:before {
  content: '\e90d'; }

/* '' */
.icon-layout:before {
  content: '\e90e'; }

/* '' */
.icon-map:before {
  content: '\e90f'; }

/* '' */
.icon-news:before {
  content: '\e910'; }

/* '' */
.icon-play:before {
  content: '\e911'; }

/* '' */
.icon-search:before {
  content: '\e912'; }

/* '' */
.icon-menu:before {
  content: '\e913'; }

/* '' */
.icon-arrowdown:before {
  content: '\f004'; }

/* '' */
.icon-arrowup:before {
  content: '\f005'; }

/* '' */
.icon-right:before {
  content: '\f006'; }

/* '' */
.icon-left:before {
  content: '\f007'; }

/* '' */
@font-face {
  font-family: "bootstrap-icons";
  src: url("../fonts/icon/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("../fonts/icon/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff");
  font-display: swap; }

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.bi-123::before {
  content: "\f67f"; }

.bi-alarm-fill::before {
  content: "\f101"; }

.bi-alarm::before {
  content: "\f102"; }

.bi-align-bottom::before {
  content: "\f103"; }

.bi-align-center::before {
  content: "\f104"; }

.bi-align-end::before {
  content: "\f105"; }

.bi-align-middle::before {
  content: "\f106"; }

.bi-align-start::before {
  content: "\f107"; }

.bi-align-top::before {
  content: "\f108"; }

.bi-alt::before {
  content: "\f109"; }

.bi-app-indicator::before {
  content: "\f10a"; }

.bi-app::before {
  content: "\f10b"; }

.bi-archive-fill::before {
  content: "\f10c"; }

.bi-archive::before {
  content: "\f10d"; }

.bi-arrow-90deg-down::before {
  content: "\f10e"; }

.bi-arrow-90deg-left::before {
  content: "\f10f"; }

.bi-arrow-90deg-right::before {
  content: "\f110"; }

.bi-arrow-90deg-up::before {
  content: "\f111"; }

.bi-arrow-bar-down::before {
  content: "\f112"; }

.bi-arrow-bar-left::before {
  content: "\f113"; }

.bi-arrow-bar-right::before {
  content: "\f114"; }

.bi-arrow-bar-up::before {
  content: "\f115"; }

.bi-arrow-clockwise::before {
  content: "\f116"; }

.bi-arrow-counterclockwise::before {
  content: "\f117"; }

.bi-arrow-down-circle-fill::before {
  content: "\f118"; }

.bi-arrow-down-circle::before {
  content: "\f119"; }

.bi-arrow-down-left-circle-fill::before {
  content: "\f11a"; }

.bi-arrow-down-left-circle::before {
  content: "\f11b"; }

.bi-arrow-down-left-square-fill::before {
  content: "\f11c"; }

.bi-arrow-down-left-square::before {
  content: "\f11d"; }

.bi-arrow-down-left::before {
  content: "\f11e"; }

.bi-arrow-down-right-circle-fill::before {
  content: "\f11f"; }

.bi-arrow-down-right-circle::before {
  content: "\f120"; }

.bi-arrow-down-right-square-fill::before {
  content: "\f121"; }

.bi-arrow-down-right-square::before {
  content: "\f122"; }

.bi-arrow-down-right::before {
  content: "\f123"; }

.bi-arrow-down-short::before {
  content: "\f124"; }

.bi-arrow-down-square-fill::before {
  content: "\f125"; }

.bi-arrow-down-square::before {
  content: "\f126"; }

.bi-arrow-down-up::before {
  content: "\f127"; }

.bi-arrow-down::before {
  content: "\f128"; }

.bi-arrow-left-circle-fill::before {
  content: "\f129"; }

.bi-arrow-left-circle::before {
  content: "\f12a"; }

.bi-arrow-left-right::before {
  content: "\f12b"; }

.bi-arrow-left-short::before {
  content: "\f12c"; }

.bi-arrow-left-square-fill::before {
  content: "\f12d"; }

.bi-arrow-left-square::before {
  content: "\f12e"; }

.bi-arrow-left::before {
  content: "\f12f"; }

.bi-arrow-repeat::before {
  content: "\f130"; }

.bi-arrow-return-left::before {
  content: "\f131"; }

.bi-arrow-return-right::before {
  content: "\f132"; }

.bi-arrow-right-circle-fill::before {
  content: "\f133"; }

.bi-arrow-right-circle::before {
  content: "\f134"; }

.bi-arrow-right-short::before {
  content: "\f135"; }

.bi-arrow-right-square-fill::before {
  content: "\f136"; }

.bi-arrow-right-square::before {
  content: "\f137"; }

.bi-arrow-right::before {
  content: "\f138"; }

.bi-arrow-up-circle-fill::before {
  content: "\f139"; }

.bi-arrow-up-circle::before {
  content: "\f13a"; }

.bi-arrow-up-left-circle-fill::before {
  content: "\f13b"; }

.bi-arrow-up-left-circle::before {
  content: "\f13c"; }

.bi-arrow-up-left-square-fill::before {
  content: "\f13d"; }

.bi-arrow-up-left-square::before {
  content: "\f13e"; }

.bi-arrow-up-left::before {
  content: "\f13f"; }

.bi-arrow-up-right-circle-fill::before {
  content: "\f140"; }

.bi-arrow-up-right-circle::before {
  content: "\f141"; }

.bi-arrow-up-right-square-fill::before {
  content: "\f142"; }

.bi-arrow-up-right-square::before {
  content: "\f143"; }

.bi-arrow-up-right::before {
  content: "\f144"; }

.bi-arrow-up-short::before {
  content: "\f145"; }

.bi-arrow-up-square-fill::before {
  content: "\f146"; }

.bi-arrow-up-square::before {
  content: "\f147"; }

.bi-arrow-up::before {
  content: "\f148"; }

.bi-arrows-angle-contract::before {
  content: "\f149"; }

.bi-arrows-angle-expand::before {
  content: "\f14a"; }

.bi-arrows-collapse::before {
  content: "\f14b"; }

.bi-arrows-expand::before {
  content: "\f14c"; }

.bi-arrows-fullscreen::before {
  content: "\f14d"; }

.bi-arrows-move::before {
  content: "\f14e"; }

.bi-aspect-ratio-fill::before {
  content: "\f14f"; }

.bi-aspect-ratio::before {
  content: "\f150"; }

.bi-asterisk::before {
  content: "\f151"; }

.bi-at::before {
  content: "\f152"; }

.bi-award-fill::before {
  content: "\f153"; }

.bi-award::before {
  content: "\f154"; }

.bi-back::before {
  content: "\f155"; }

.bi-backspace-fill::before {
  content: "\f156"; }

.bi-backspace-reverse-fill::before {
  content: "\f157"; }

.bi-backspace-reverse::before {
  content: "\f158"; }

.bi-backspace::before {
  content: "\f159"; }

.bi-badge-3d-fill::before {
  content: "\f15a"; }

.bi-badge-3d::before {
  content: "\f15b"; }

.bi-badge-4k-fill::before {
  content: "\f15c"; }

.bi-badge-4k::before {
  content: "\f15d"; }

.bi-badge-8k-fill::before {
  content: "\f15e"; }

.bi-badge-8k::before {
  content: "\f15f"; }

.bi-badge-ad-fill::before {
  content: "\f160"; }

.bi-badge-ad::before {
  content: "\f161"; }

.bi-badge-ar-fill::before {
  content: "\f162"; }

.bi-badge-ar::before {
  content: "\f163"; }

.bi-badge-cc-fill::before {
  content: "\f164"; }

.bi-badge-cc::before {
  content: "\f165"; }

.bi-badge-hd-fill::before {
  content: "\f166"; }

.bi-badge-hd::before {
  content: "\f167"; }

.bi-badge-tm-fill::before {
  content: "\f168"; }

.bi-badge-tm::before {
  content: "\f169"; }

.bi-badge-vo-fill::before {
  content: "\f16a"; }

.bi-badge-vo::before {
  content: "\f16b"; }

.bi-badge-vr-fill::before {
  content: "\f16c"; }

.bi-badge-vr::before {
  content: "\f16d"; }

.bi-badge-wc-fill::before {
  content: "\f16e"; }

.bi-badge-wc::before {
  content: "\f16f"; }

.bi-bag-check-fill::before {
  content: "\f170"; }

.bi-bag-check::before {
  content: "\f171"; }

.bi-bag-dash-fill::before {
  content: "\f172"; }

.bi-bag-dash::before {
  content: "\f173"; }

.bi-bag-fill::before {
  content: "\f174"; }

.bi-bag-plus-fill::before {
  content: "\f175"; }

.bi-bag-plus::before {
  content: "\f176"; }

.bi-bag-x-fill::before {
  content: "\f177"; }

.bi-bag-x::before {
  content: "\f178"; }

.bi-bag::before {
  content: "\f179"; }

.bi-bar-chart-fill::before {
  content: "\f17a"; }

.bi-bar-chart-line-fill::before {
  content: "\f17b"; }

.bi-bar-chart-line::before {
  content: "\f17c"; }

.bi-bar-chart-steps::before {
  content: "\f17d"; }

.bi-bar-chart::before {
  content: "\f17e"; }

.bi-basket-fill::before {
  content: "\f17f"; }

.bi-basket::before {
  content: "\f180"; }

.bi-basket2-fill::before {
  content: "\f181"; }

.bi-basket2::before {
  content: "\f182"; }

.bi-basket3-fill::before {
  content: "\f183"; }

.bi-basket3::before {
  content: "\f184"; }

.bi-battery-charging::before {
  content: "\f185"; }

.bi-battery-full::before {
  content: "\f186"; }

.bi-battery-half::before {
  content: "\f187"; }

.bi-battery::before {
  content: "\f188"; }

.bi-bell-fill::before {
  content: "\f189"; }

.bi-bell::before {
  content: "\f18a"; }

.bi-bezier::before {
  content: "\f18b"; }

.bi-bezier2::before {
  content: "\f18c"; }

.bi-bicycle::before {
  content: "\f18d"; }

.bi-binoculars-fill::before {
  content: "\f18e"; }

.bi-binoculars::before {
  content: "\f18f"; }

.bi-blockquote-left::before {
  content: "\f190"; }

.bi-blockquote-right::before {
  content: "\f191"; }

.bi-book-fill::before {
  content: "\f192"; }

.bi-book-half::before {
  content: "\f193"; }

.bi-book::before {
  content: "\f194"; }

.bi-bookmark-check-fill::before {
  content: "\f195"; }

.bi-bookmark-check::before {
  content: "\f196"; }

.bi-bookmark-dash-fill::before {
  content: "\f197"; }

.bi-bookmark-dash::before {
  content: "\f198"; }

.bi-bookmark-fill::before {
  content: "\f199"; }

.bi-bookmark-heart-fill::before {
  content: "\f19a"; }

.bi-bookmark-heart::before {
  content: "\f19b"; }

.bi-bookmark-plus-fill::before {
  content: "\f19c"; }

.bi-bookmark-plus::before {
  content: "\f19d"; }

.bi-bookmark-star-fill::before {
  content: "\f19e"; }

.bi-bookmark-star::before {
  content: "\f19f"; }

.bi-bookmark-x-fill::before {
  content: "\f1a0"; }

.bi-bookmark-x::before {
  content: "\f1a1"; }

.bi-bookmark::before {
  content: "\f1a2"; }

.bi-bookmarks-fill::before {
  content: "\f1a3"; }

.bi-bookmarks::before {
  content: "\f1a4"; }

.bi-bookshelf::before {
  content: "\f1a5"; }

.bi-bootstrap-fill::before {
  content: "\f1a6"; }

.bi-bootstrap-reboot::before {
  content: "\f1a7"; }

.bi-bootstrap::before {
  content: "\f1a8"; }

.bi-border-all::before {
  content: "\f1a9"; }

.bi-border-bottom::before {
  content: "\f1aa"; }

.bi-border-center::before {
  content: "\f1ab"; }

.bi-border-inner::before {
  content: "\f1ac"; }

.bi-border-left::before {
  content: "\f1ad"; }

.bi-border-middle::before {
  content: "\f1ae"; }

.bi-border-outer::before {
  content: "\f1af"; }

.bi-border-right::before {
  content: "\f1b0"; }

.bi-border-style::before {
  content: "\f1b1"; }

.bi-border-top::before {
  content: "\f1b2"; }

.bi-border-width::before {
  content: "\f1b3"; }

.bi-border::before {
  content: "\f1b4"; }

.bi-bounding-box-circles::before {
  content: "\f1b5"; }

.bi-bounding-box::before {
  content: "\f1b6"; }

.bi-box-arrow-down-left::before {
  content: "\f1b7"; }

.bi-box-arrow-down-right::before {
  content: "\f1b8"; }

.bi-box-arrow-down::before {
  content: "\f1b9"; }

.bi-box-arrow-in-down-left::before {
  content: "\f1ba"; }

.bi-box-arrow-in-down-right::before {
  content: "\f1bb"; }

.bi-box-arrow-in-down::before {
  content: "\f1bc"; }

.bi-box-arrow-in-left::before {
  content: "\f1bd"; }

.bi-box-arrow-in-right::before {
  content: "\f1be"; }

.bi-box-arrow-in-up-left::before {
  content: "\f1bf"; }

.bi-box-arrow-in-up-right::before {
  content: "\f1c0"; }

.bi-box-arrow-in-up::before {
  content: "\f1c1"; }

.bi-box-arrow-left::before {
  content: "\f1c2"; }

.bi-box-arrow-right::before {
  content: "\f1c3"; }

.bi-box-arrow-up-left::before {
  content: "\f1c4"; }

.bi-box-arrow-up-right::before {
  content: "\f1c5"; }

.bi-box-arrow-up::before {
  content: "\f1c6"; }

.bi-box-seam::before {
  content: "\f1c7"; }

.bi-box::before {
  content: "\f1c8"; }

.bi-braces::before {
  content: "\f1c9"; }

.bi-bricks::before {
  content: "\f1ca"; }

.bi-briefcase-fill::before {
  content: "\f1cb"; }

.bi-briefcase::before {
  content: "\f1cc"; }

.bi-brightness-alt-high-fill::before {
  content: "\f1cd"; }

.bi-brightness-alt-high::before {
  content: "\f1ce"; }

.bi-brightness-alt-low-fill::before {
  content: "\f1cf"; }

.bi-brightness-alt-low::before {
  content: "\f1d0"; }

.bi-brightness-high-fill::before {
  content: "\f1d1"; }

.bi-brightness-high::before {
  content: "\f1d2"; }

.bi-brightness-low-fill::before {
  content: "\f1d3"; }

.bi-brightness-low::before {
  content: "\f1d4"; }

.bi-broadcast-pin::before {
  content: "\f1d5"; }

.bi-broadcast::before {
  content: "\f1d6"; }

.bi-brush-fill::before {
  content: "\f1d7"; }

.bi-brush::before {
  content: "\f1d8"; }

.bi-bucket-fill::before {
  content: "\f1d9"; }

.bi-bucket::before {
  content: "\f1da"; }

.bi-bug-fill::before {
  content: "\f1db"; }

.bi-bug::before {
  content: "\f1dc"; }

.bi-building::before {
  content: "\f1dd"; }

.bi-bullseye::before {
  content: "\f1de"; }

.bi-calculator-fill::before {
  content: "\f1df"; }

.bi-calculator::before {
  content: "\f1e0"; }

.bi-calendar-check-fill::before {
  content: "\f1e1"; }

.bi-calendar-check::before {
  content: "\f1e2"; }

.bi-calendar-date-fill::before {
  content: "\f1e3"; }

.bi-calendar-date::before {
  content: "\f1e4"; }

.bi-calendar-day-fill::before {
  content: "\f1e5"; }

.bi-calendar-day::before {
  content: "\f1e6"; }

.bi-calendar-event-fill::before {
  content: "\f1e7"; }

.bi-calendar-event::before {
  content: "\f1e8"; }

.bi-calendar-fill::before {
  content: "\f1e9"; }

.bi-calendar-minus-fill::before {
  content: "\f1ea"; }

.bi-calendar-minus::before {
  content: "\f1eb"; }

.bi-calendar-month-fill::before {
  content: "\f1ec"; }

.bi-calendar-month::before {
  content: "\f1ed"; }

.bi-calendar-plus-fill::before {
  content: "\f1ee"; }

.bi-calendar-plus::before {
  content: "\f1ef"; }

.bi-calendar-range-fill::before {
  content: "\f1f0"; }

.bi-calendar-range::before {
  content: "\f1f1"; }

.bi-calendar-week-fill::before {
  content: "\f1f2"; }

.bi-calendar-week::before {
  content: "\f1f3"; }

.bi-calendar-x-fill::before {
  content: "\f1f4"; }

.bi-calendar-x::before {
  content: "\f1f5"; }

.bi-calendar::before {
  content: "\f1f6"; }

.bi-calendar2-check-fill::before {
  content: "\f1f7"; }

.bi-calendar2-check::before {
  content: "\f1f8"; }

.bi-calendar2-date-fill::before {
  content: "\f1f9"; }

.bi-calendar2-date::before {
  content: "\f1fa"; }

.bi-calendar2-day-fill::before {
  content: "\f1fb"; }

.bi-calendar2-day::before {
  content: "\f1fc"; }

.bi-calendar2-event-fill::before {
  content: "\f1fd"; }

.bi-calendar2-event::before {
  content: "\f1fe"; }

.bi-calendar2-fill::before {
  content: "\f1ff"; }

.bi-calendar2-minus-fill::before {
  content: "\f200"; }

.bi-calendar2-minus::before {
  content: "\f201"; }

.bi-calendar2-month-fill::before {
  content: "\f202"; }

.bi-calendar2-month::before {
  content: "\f203"; }

.bi-calendar2-plus-fill::before {
  content: "\f204"; }

.bi-calendar2-plus::before {
  content: "\f205"; }

.bi-calendar2-range-fill::before {
  content: "\f206"; }

.bi-calendar2-range::before {
  content: "\f207"; }

.bi-calendar2-week-fill::before {
  content: "\f208"; }

.bi-calendar2-week::before {
  content: "\f209"; }

.bi-calendar2-x-fill::before {
  content: "\f20a"; }

.bi-calendar2-x::before {
  content: "\f20b"; }

.bi-calendar2::before {
  content: "\f20c"; }

.bi-calendar3-event-fill::before {
  content: "\f20d"; }

.bi-calendar3-event::before {
  content: "\f20e"; }

.bi-calendar3-fill::before {
  content: "\f20f"; }

.bi-calendar3-range-fill::before {
  content: "\f210"; }

.bi-calendar3-range::before {
  content: "\f211"; }

.bi-calendar3-week-fill::before {
  content: "\f212"; }

.bi-calendar3-week::before {
  content: "\f213"; }

.bi-calendar3::before {
  content: "\f214"; }

.bi-calendar4-event::before {
  content: "\f215"; }

.bi-calendar4-range::before {
  content: "\f216"; }

.bi-calendar4-week::before {
  content: "\f217"; }

.bi-calendar4::before {
  content: "\f218"; }

.bi-camera-fill::before {
  content: "\f219"; }

.bi-camera-reels-fill::before {
  content: "\f21a"; }

.bi-camera-reels::before {
  content: "\f21b"; }

.bi-camera-video-fill::before {
  content: "\f21c"; }

.bi-camera-video-off-fill::before {
  content: "\f21d"; }

.bi-camera-video-off::before {
  content: "\f21e"; }

.bi-camera-video::before {
  content: "\f21f"; }

.bi-camera::before {
  content: "\f220"; }

.bi-camera2::before {
  content: "\f221"; }

.bi-capslock-fill::before {
  content: "\f222"; }

.bi-capslock::before {
  content: "\f223"; }

.bi-card-checklist::before {
  content: "\f224"; }

.bi-card-heading::before {
  content: "\f225"; }

.bi-card-image::before {
  content: "\f226"; }

.bi-card-list::before {
  content: "\f227"; }

.bi-card-text::before {
  content: "\f228"; }

.bi-caret-down-fill::before {
  content: "\f229"; }

.bi-caret-down-square-fill::before {
  content: "\f22a"; }

.bi-caret-down-square::before {
  content: "\f22b"; }

.bi-caret-down::before {
  content: "\f22c"; }

.bi-caret-left-fill::before {
  content: "\f22d"; }

.bi-caret-left-square-fill::before {
  content: "\f22e"; }

.bi-caret-left-square::before {
  content: "\f22f"; }

.bi-caret-left::before {
  content: "\f230"; }

.bi-caret-right-fill::before {
  content: "\f231"; }

.bi-caret-right-square-fill::before {
  content: "\f232"; }

.bi-caret-right-square::before {
  content: "\f233"; }

.bi-caret-right::before {
  content: "\f234"; }

.bi-caret-up-fill::before {
  content: "\f235"; }

.bi-caret-up-square-fill::before {
  content: "\f236"; }

.bi-caret-up-square::before {
  content: "\f237"; }

.bi-caret-up::before {
  content: "\f238"; }

.bi-cart-check-fill::before {
  content: "\f239"; }

.bi-cart-check::before {
  content: "\f23a"; }

.bi-cart-dash-fill::before {
  content: "\f23b"; }

.bi-cart-dash::before {
  content: "\f23c"; }

.bi-cart-fill::before {
  content: "\f23d"; }

.bi-cart-plus-fill::before {
  content: "\f23e"; }

.bi-cart-plus::before {
  content: "\f23f"; }

.bi-cart-x-fill::before {
  content: "\f240"; }

.bi-cart-x::before {
  content: "\f241"; }

.bi-cart::before {
  content: "\f242"; }

.bi-cart2::before {
  content: "\f243"; }

.bi-cart3::before {
  content: "\f244"; }

.bi-cart4::before {
  content: "\f245"; }

.bi-cash-stack::before {
  content: "\f246"; }

.bi-cash::before {
  content: "\f247"; }

.bi-cast::before {
  content: "\f248"; }

.bi-chat-dots-fill::before {
  content: "\f249"; }

.bi-chat-dots::before {
  content: "\f24a"; }

.bi-chat-fill::before {
  content: "\f24b"; }

.bi-chat-left-dots-fill::before {
  content: "\f24c"; }

.bi-chat-left-dots::before {
  content: "\f24d"; }

.bi-chat-left-fill::before {
  content: "\f24e"; }

.bi-chat-left-quote-fill::before {
  content: "\f24f"; }

.bi-chat-left-quote::before {
  content: "\f250"; }

.bi-chat-left-text-fill::before {
  content: "\f251"; }

.bi-chat-left-text::before {
  content: "\f252"; }

.bi-chat-left::before {
  content: "\f253"; }

.bi-chat-quote-fill::before {
  content: "\f254"; }

.bi-chat-quote::before {
  content: "\f255"; }

.bi-chat-right-dots-fill::before {
  content: "\f256"; }

.bi-chat-right-dots::before {
  content: "\f257"; }

.bi-chat-right-fill::before {
  content: "\f258"; }

.bi-chat-right-quote-fill::before {
  content: "\f259"; }

.bi-chat-right-quote::before {
  content: "\f25a"; }

.bi-chat-right-text-fill::before {
  content: "\f25b"; }

.bi-chat-right-text::before {
  content: "\f25c"; }

.bi-chat-right::before {
  content: "\f25d"; }

.bi-chat-square-dots-fill::before {
  content: "\f25e"; }

.bi-chat-square-dots::before {
  content: "\f25f"; }

.bi-chat-square-fill::before {
  content: "\f260"; }

.bi-chat-square-quote-fill::before {
  content: "\f261"; }

.bi-chat-square-quote::before {
  content: "\f262"; }

.bi-chat-square-text-fill::before {
  content: "\f263"; }

.bi-chat-square-text::before {
  content: "\f264"; }

.bi-chat-square::before {
  content: "\f265"; }

.bi-chat-text-fill::before {
  content: "\f266"; }

.bi-chat-text::before {
  content: "\f267"; }

.bi-chat::before {
  content: "\f268"; }

.bi-check-all::before {
  content: "\f269"; }

.bi-check-circle-fill::before {
  content: "\f26a"; }

.bi-check-circle::before {
  content: "\f26b"; }

.bi-check-square-fill::before {
  content: "\f26c"; }

.bi-check-square::before {
  content: "\f26d"; }

.bi-check::before {
  content: "\f26e"; }

.bi-check2-all::before {
  content: "\f26f"; }

.bi-check2-circle::before {
  content: "\f270"; }

.bi-check2-square::before {
  content: "\f271"; }

.bi-check2::before {
  content: "\f272"; }

.bi-chevron-bar-contract::before {
  content: "\f273"; }

.bi-chevron-bar-down::before {
  content: "\f274"; }

.bi-chevron-bar-expand::before {
  content: "\f275"; }

.bi-chevron-bar-left::before {
  content: "\f276"; }

.bi-chevron-bar-right::before {
  content: "\f277"; }

.bi-chevron-bar-up::before {
  content: "\f278"; }

.bi-chevron-compact-down::before {
  content: "\f279"; }

.bi-chevron-compact-left::before {
  content: "\f27a"; }

.bi-chevron-compact-right::before {
  content: "\f27b"; }

.bi-chevron-compact-up::before {
  content: "\f27c"; }

.bi-chevron-contract::before {
  content: "\f27d"; }

.bi-chevron-double-down::before {
  content: "\f27e"; }

.bi-chevron-double-left::before {
  content: "\f27f"; }

.bi-chevron-double-right::before {
  content: "\f280"; }

.bi-chevron-double-up::before {
  content: "\f281"; }

.bi-chevron-down::before {
  content: "\f282"; }

.bi-chevron-expand::before {
  content: "\f283"; }

.bi-chevron-left::before {
  content: "\f284"; }

.bi-chevron-right::before {
  content: "\f285"; }

.bi-chevron-up::before {
  content: "\f286"; }

.bi-circle-fill::before {
  content: "\f287"; }

.bi-circle-half::before {
  content: "\f288"; }

.bi-circle-square::before {
  content: "\f289"; }

.bi-circle::before {
  content: "\f28a"; }

.bi-clipboard-check::before {
  content: "\f28b"; }

.bi-clipboard-data::before {
  content: "\f28c"; }

.bi-clipboard-minus::before {
  content: "\f28d"; }

.bi-clipboard-plus::before {
  content: "\f28e"; }

.bi-clipboard-x::before {
  content: "\f28f"; }

.bi-clipboard::before {
  content: "\f290"; }

.bi-clock-fill::before {
  content: "\f291"; }

.bi-clock-history::before {
  content: "\f292"; }

.bi-clock::before {
  content: "\f293"; }

.bi-cloud-arrow-down-fill::before {
  content: "\f294"; }

.bi-cloud-arrow-down::before {
  content: "\f295"; }

.bi-cloud-arrow-up-fill::before {
  content: "\f296"; }

.bi-cloud-arrow-up::before {
  content: "\f297"; }

.bi-cloud-check-fill::before {
  content: "\f298"; }

.bi-cloud-check::before {
  content: "\f299"; }

.bi-cloud-download-fill::before {
  content: "\f29a"; }

.bi-cloud-download::before {
  content: "\f29b"; }

.bi-cloud-drizzle-fill::before {
  content: "\f29c"; }

.bi-cloud-drizzle::before {
  content: "\f29d"; }

.bi-cloud-fill::before {
  content: "\f29e"; }

.bi-cloud-fog-fill::before {
  content: "\f29f"; }

.bi-cloud-fog::before {
  content: "\f2a0"; }

.bi-cloud-fog2-fill::before {
  content: "\f2a1"; }

.bi-cloud-fog2::before {
  content: "\f2a2"; }

.bi-cloud-hail-fill::before {
  content: "\f2a3"; }

.bi-cloud-hail::before {
  content: "\f2a4"; }

.bi-cloud-haze-fill::before {
  content: "\f2a6"; }

.bi-cloud-haze::before {
  content: "\f2a7"; }

.bi-cloud-haze2-fill::before {
  content: "\f2a8"; }

.bi-cloud-lightning-fill::before {
  content: "\f2a9"; }

.bi-cloud-lightning-rain-fill::before {
  content: "\f2aa"; }

.bi-cloud-lightning-rain::before {
  content: "\f2ab"; }

.bi-cloud-lightning::before {
  content: "\f2ac"; }

.bi-cloud-minus-fill::before {
  content: "\f2ad"; }

.bi-cloud-minus::before {
  content: "\f2ae"; }

.bi-cloud-moon-fill::before {
  content: "\f2af"; }

.bi-cloud-moon::before {
  content: "\f2b0"; }

.bi-cloud-plus-fill::before {
  content: "\f2b1"; }

.bi-cloud-plus::before {
  content: "\f2b2"; }

.bi-cloud-rain-fill::before {
  content: "\f2b3"; }

.bi-cloud-rain-heavy-fill::before {
  content: "\f2b4"; }

.bi-cloud-rain-heavy::before {
  content: "\f2b5"; }

.bi-cloud-rain::before {
  content: "\f2b6"; }

.bi-cloud-slash-fill::before {
  content: "\f2b7"; }

.bi-cloud-slash::before {
  content: "\f2b8"; }

.bi-cloud-sleet-fill::before {
  content: "\f2b9"; }

.bi-cloud-sleet::before {
  content: "\f2ba"; }

.bi-cloud-snow-fill::before {
  content: "\f2bb"; }

.bi-cloud-snow::before {
  content: "\f2bc"; }

.bi-cloud-sun-fill::before {
  content: "\f2bd"; }

.bi-cloud-sun::before {
  content: "\f2be"; }

.bi-cloud-upload-fill::before {
  content: "\f2bf"; }

.bi-cloud-upload::before {
  content: "\f2c0"; }

.bi-cloud::before {
  content: "\f2c1"; }

.bi-clouds-fill::before {
  content: "\f2c2"; }

.bi-clouds::before {
  content: "\f2c3"; }

.bi-cloudy-fill::before {
  content: "\f2c4"; }

.bi-cloudy::before {
  content: "\f2c5"; }

.bi-code-slash::before {
  content: "\f2c6"; }

.bi-code-square::before {
  content: "\f2c7"; }

.bi-code::before {
  content: "\f2c8"; }

.bi-collection-fill::before {
  content: "\f2c9"; }

.bi-collection-play-fill::before {
  content: "\f2ca"; }

.bi-collection-play::before {
  content: "\f2cb"; }

.bi-collection::before {
  content: "\f2cc"; }

.bi-columns-gap::before {
  content: "\f2cd"; }

.bi-columns::before {
  content: "\f2ce"; }

.bi-command::before {
  content: "\f2cf"; }

.bi-compass-fill::before {
  content: "\f2d0"; }

.bi-compass::before {
  content: "\f2d1"; }

.bi-cone-striped::before {
  content: "\f2d2"; }

.bi-cone::before {
  content: "\f2d3"; }

.bi-controller::before {
  content: "\f2d4"; }

.bi-cpu-fill::before {
  content: "\f2d5"; }

.bi-cpu::before {
  content: "\f2d6"; }

.bi-credit-card-2-back-fill::before {
  content: "\f2d7"; }

.bi-credit-card-2-back::before {
  content: "\f2d8"; }

.bi-credit-card-2-front-fill::before {
  content: "\f2d9"; }

.bi-credit-card-2-front::before {
  content: "\f2da"; }

.bi-credit-card-fill::before {
  content: "\f2db"; }

.bi-credit-card::before {
  content: "\f2dc"; }

.bi-crop::before {
  content: "\f2dd"; }

.bi-cup-fill::before {
  content: "\f2de"; }

.bi-cup-straw::before {
  content: "\f2df"; }

.bi-cup::before {
  content: "\f2e0"; }

.bi-cursor-fill::before {
  content: "\f2e1"; }

.bi-cursor-text::before {
  content: "\f2e2"; }

.bi-cursor::before {
  content: "\f2e3"; }

.bi-dash-circle-dotted::before {
  content: "\f2e4"; }

.bi-dash-circle-fill::before {
  content: "\f2e5"; }

.bi-dash-circle::before {
  content: "\f2e6"; }

.bi-dash-square-dotted::before {
  content: "\f2e7"; }

.bi-dash-square-fill::before {
  content: "\f2e8"; }

.bi-dash-square::before {
  content: "\f2e9"; }

.bi-dash::before {
  content: "\f2ea"; }

.bi-diagram-2-fill::before {
  content: "\f2eb"; }

.bi-diagram-2::before {
  content: "\f2ec"; }

.bi-diagram-3-fill::before {
  content: "\f2ed"; }

.bi-diagram-3::before {
  content: "\f2ee"; }

.bi-diamond-fill::before {
  content: "\f2ef"; }

.bi-diamond-half::before {
  content: "\f2f0"; }

.bi-diamond::before {
  content: "\f2f1"; }

.bi-dice-1-fill::before {
  content: "\f2f2"; }

.bi-dice-1::before {
  content: "\f2f3"; }

.bi-dice-2-fill::before {
  content: "\f2f4"; }

.bi-dice-2::before {
  content: "\f2f5"; }

.bi-dice-3-fill::before {
  content: "\f2f6"; }

.bi-dice-3::before {
  content: "\f2f7"; }

.bi-dice-4-fill::before {
  content: "\f2f8"; }

.bi-dice-4::before {
  content: "\f2f9"; }

.bi-dice-5-fill::before {
  content: "\f2fa"; }

.bi-dice-5::before {
  content: "\f2fb"; }

.bi-dice-6-fill::before {
  content: "\f2fc"; }

.bi-dice-6::before {
  content: "\f2fd"; }

.bi-disc-fill::before {
  content: "\f2fe"; }

.bi-disc::before {
  content: "\f2ff"; }

.bi-discord::before {
  content: "\f300"; }

.bi-display-fill::before {
  content: "\f301"; }

.bi-display::before {
  content: "\f302"; }

.bi-distribute-horizontal::before {
  content: "\f303"; }

.bi-distribute-vertical::before {
  content: "\f304"; }

.bi-door-closed-fill::before {
  content: "\f305"; }

.bi-door-closed::before {
  content: "\f306"; }

.bi-door-open-fill::before {
  content: "\f307"; }

.bi-door-open::before {
  content: "\f308"; }

.bi-dot::before {
  content: "\f309"; }

.bi-download::before {
  content: "\f30a"; }

.bi-droplet-fill::before {
  content: "\f30b"; }

.bi-droplet-half::before {
  content: "\f30c"; }

.bi-droplet::before {
  content: "\f30d"; }

.bi-earbuds::before {
  content: "\f30e"; }

.bi-easel-fill::before {
  content: "\f30f"; }

.bi-easel::before {
  content: "\f310"; }

.bi-egg-fill::before {
  content: "\f311"; }

.bi-egg-fried::before {
  content: "\f312"; }

.bi-egg::before {
  content: "\f313"; }

.bi-eject-fill::before {
  content: "\f314"; }

.bi-eject::before {
  content: "\f315"; }

.bi-emoji-angry-fill::before {
  content: "\f316"; }

.bi-emoji-angry::before {
  content: "\f317"; }

.bi-emoji-dizzy-fill::before {
  content: "\f318"; }

.bi-emoji-dizzy::before {
  content: "\f319"; }

.bi-emoji-expressionless-fill::before {
  content: "\f31a"; }

.bi-emoji-expressionless::before {
  content: "\f31b"; }

.bi-emoji-frown-fill::before {
  content: "\f31c"; }

.bi-emoji-frown::before {
  content: "\f31d"; }

.bi-emoji-heart-eyes-fill::before {
  content: "\f31e"; }

.bi-emoji-heart-eyes::before {
  content: "\f31f"; }

.bi-emoji-laughing-fill::before {
  content: "\f320"; }

.bi-emoji-laughing::before {
  content: "\f321"; }

.bi-emoji-neutral-fill::before {
  content: "\f322"; }

.bi-emoji-neutral::before {
  content: "\f323"; }

.bi-emoji-smile-fill::before {
  content: "\f324"; }

.bi-emoji-smile-upside-down-fill::before {
  content: "\f325"; }

.bi-emoji-smile-upside-down::before {
  content: "\f326"; }

.bi-emoji-smile::before {
  content: "\f327"; }

.bi-emoji-sunglasses-fill::before {
  content: "\f328"; }

.bi-emoji-sunglasses::before {
  content: "\f329"; }

.bi-emoji-wink-fill::before {
  content: "\f32a"; }

.bi-emoji-wink::before {
  content: "\f32b"; }

.bi-envelope-fill::before {
  content: "\f32c"; }

.bi-envelope-open-fill::before {
  content: "\f32d"; }

.bi-envelope-open::before {
  content: "\f32e"; }

.bi-envelope::before {
  content: "\f32f"; }

.bi-eraser-fill::before {
  content: "\f330"; }

.bi-eraser::before {
  content: "\f331"; }

.bi-exclamation-circle-fill::before {
  content: "\f332"; }

.bi-exclamation-circle::before {
  content: "\f333"; }

.bi-exclamation-diamond-fill::before {
  content: "\f334"; }

.bi-exclamation-diamond::before {
  content: "\f335"; }

.bi-exclamation-octagon-fill::before {
  content: "\f336"; }

.bi-exclamation-octagon::before {
  content: "\f337"; }

.bi-exclamation-square-fill::before {
  content: "\f338"; }

.bi-exclamation-square::before {
  content: "\f339"; }

.bi-exclamation-triangle-fill::before {
  content: "\f33a"; }

.bi-exclamation-triangle::before {
  content: "\f33b"; }

.bi-exclamation::before {
  content: "\f33c"; }

.bi-exclude::before {
  content: "\f33d"; }

.bi-eye-fill::before {
  content: "\f33e"; }

.bi-eye-slash-fill::before {
  content: "\f33f"; }

.bi-eye-slash::before {
  content: "\f340"; }

.bi-eye::before {
  content: "\f341"; }

.bi-eyedropper::before {
  content: "\f342"; }

.bi-eyeglasses::before {
  content: "\f343"; }

.bi-facebook::before {
  content: "\f344"; }

.bi-file-arrow-down-fill::before {
  content: "\f345"; }

.bi-file-arrow-down::before {
  content: "\f346"; }

.bi-file-arrow-up-fill::before {
  content: "\f347"; }

.bi-file-arrow-up::before {
  content: "\f348"; }

.bi-file-bar-graph-fill::before {
  content: "\f349"; }

.bi-file-bar-graph::before {
  content: "\f34a"; }

.bi-file-binary-fill::before {
  content: "\f34b"; }

.bi-file-binary::before {
  content: "\f34c"; }

.bi-file-break-fill::before {
  content: "\f34d"; }

.bi-file-break::before {
  content: "\f34e"; }

.bi-file-check-fill::before {
  content: "\f34f"; }

.bi-file-check::before {
  content: "\f350"; }

.bi-file-code-fill::before {
  content: "\f351"; }

.bi-file-code::before {
  content: "\f352"; }

.bi-file-diff-fill::before {
  content: "\f353"; }

.bi-file-diff::before {
  content: "\f354"; }

.bi-file-earmark-arrow-down-fill::before {
  content: "\f355"; }

.bi-file-earmark-arrow-down::before {
  content: "\f356"; }

.bi-file-earmark-arrow-up-fill::before {
  content: "\f357"; }

.bi-file-earmark-arrow-up::before {
  content: "\f358"; }

.bi-file-earmark-bar-graph-fill::before {
  content: "\f359"; }

.bi-file-earmark-bar-graph::before {
  content: "\f35a"; }

.bi-file-earmark-binary-fill::before {
  content: "\f35b"; }

.bi-file-earmark-binary::before {
  content: "\f35c"; }

.bi-file-earmark-break-fill::before {
  content: "\f35d"; }

.bi-file-earmark-break::before {
  content: "\f35e"; }

.bi-file-earmark-check-fill::before {
  content: "\f35f"; }

.bi-file-earmark-check::before {
  content: "\f360"; }

.bi-file-earmark-code-fill::before {
  content: "\f361"; }

.bi-file-earmark-code::before {
  content: "\f362"; }

.bi-file-earmark-diff-fill::before {
  content: "\f363"; }

.bi-file-earmark-diff::before {
  content: "\f364"; }

.bi-file-earmark-easel-fill::before {
  content: "\f365"; }

.bi-file-earmark-easel::before {
  content: "\f366"; }

.bi-file-earmark-excel-fill::before {
  content: "\f367"; }

.bi-file-earmark-excel::before {
  content: "\f368"; }

.bi-file-earmark-fill::before {
  content: "\f369"; }

.bi-file-earmark-font-fill::before {
  content: "\f36a"; }

.bi-file-earmark-font::before {
  content: "\f36b"; }

.bi-file-earmark-image-fill::before {
  content: "\f36c"; }

.bi-file-earmark-image::before {
  content: "\f36d"; }

.bi-file-earmark-lock-fill::before {
  content: "\f36e"; }

.bi-file-earmark-lock::before {
  content: "\f36f"; }

.bi-file-earmark-lock2-fill::before {
  content: "\f370"; }

.bi-file-earmark-lock2::before {
  content: "\f371"; }

.bi-file-earmark-medical-fill::before {
  content: "\f372"; }

.bi-file-earmark-medical::before {
  content: "\f373"; }

.bi-file-earmark-minus-fill::before {
  content: "\f374"; }

.bi-file-earmark-minus::before {
  content: "\f375"; }

.bi-file-earmark-music-fill::before {
  content: "\f376"; }

.bi-file-earmark-music::before {
  content: "\f377"; }

.bi-file-earmark-person-fill::before {
  content: "\f378"; }

.bi-file-earmark-person::before {
  content: "\f379"; }

.bi-file-earmark-play-fill::before {
  content: "\f37a"; }

.bi-file-earmark-play::before {
  content: "\f37b"; }

.bi-file-earmark-plus-fill::before {
  content: "\f37c"; }

.bi-file-earmark-plus::before {
  content: "\f37d"; }

.bi-file-earmark-post-fill::before {
  content: "\f37e"; }

.bi-file-earmark-post::before {
  content: "\f37f"; }

.bi-file-earmark-ppt-fill::before {
  content: "\f380"; }

.bi-file-earmark-ppt::before {
  content: "\f381"; }

.bi-file-earmark-richtext-fill::before {
  content: "\f382"; }

.bi-file-earmark-richtext::before {
  content: "\f383"; }

.bi-file-earmark-ruled-fill::before {
  content: "\f384"; }

.bi-file-earmark-ruled::before {
  content: "\f385"; }

.bi-file-earmark-slides-fill::before {
  content: "\f386"; }

.bi-file-earmark-slides::before {
  content: "\f387"; }

.bi-file-earmark-spreadsheet-fill::before {
  content: "\f388"; }

.bi-file-earmark-spreadsheet::before {
  content: "\f389"; }

.bi-file-earmark-text-fill::before {
  content: "\f38a"; }

.bi-file-earmark-text::before {
  content: "\f38b"; }

.bi-file-earmark-word-fill::before {
  content: "\f38c"; }

.bi-file-earmark-word::before {
  content: "\f38d"; }

.bi-file-earmark-x-fill::before {
  content: "\f38e"; }

.bi-file-earmark-x::before {
  content: "\f38f"; }

.bi-file-earmark-zip-fill::before {
  content: "\f390"; }

.bi-file-earmark-zip::before {
  content: "\f391"; }

.bi-file-earmark::before {
  content: "\f392"; }

.bi-file-easel-fill::before {
  content: "\f393"; }

.bi-file-easel::before {
  content: "\f394"; }

.bi-file-excel-fill::before {
  content: "\f395"; }

.bi-file-excel::before {
  content: "\f396"; }

.bi-file-fill::before {
  content: "\f397"; }

.bi-file-font-fill::before {
  content: "\f398"; }

.bi-file-font::before {
  content: "\f399"; }

.bi-file-image-fill::before {
  content: "\f39a"; }

.bi-file-image::before {
  content: "\f39b"; }

.bi-file-lock-fill::before {
  content: "\f39c"; }

.bi-file-lock::before {
  content: "\f39d"; }

.bi-file-lock2-fill::before {
  content: "\f39e"; }

.bi-file-lock2::before {
  content: "\f39f"; }

.bi-file-medical-fill::before {
  content: "\f3a0"; }

.bi-file-medical::before {
  content: "\f3a1"; }

.bi-file-minus-fill::before {
  content: "\f3a2"; }

.bi-file-minus::before {
  content: "\f3a3"; }

.bi-file-music-fill::before {
  content: "\f3a4"; }

.bi-file-music::before {
  content: "\f3a5"; }

.bi-file-person-fill::before {
  content: "\f3a6"; }

.bi-file-person::before {
  content: "\f3a7"; }

.bi-file-play-fill::before {
  content: "\f3a8"; }

.bi-file-play::before {
  content: "\f3a9"; }

.bi-file-plus-fill::before {
  content: "\f3aa"; }

.bi-file-plus::before {
  content: "\f3ab"; }

.bi-file-post-fill::before {
  content: "\f3ac"; }

.bi-file-post::before {
  content: "\f3ad"; }

.bi-file-ppt-fill::before {
  content: "\f3ae"; }

.bi-file-ppt::before {
  content: "\f3af"; }

.bi-file-richtext-fill::before {
  content: "\f3b0"; }

.bi-file-richtext::before {
  content: "\f3b1"; }

.bi-file-ruled-fill::before {
  content: "\f3b2"; }

.bi-file-ruled::before {
  content: "\f3b3"; }

.bi-file-slides-fill::before {
  content: "\f3b4"; }

.bi-file-slides::before {
  content: "\f3b5"; }

.bi-file-spreadsheet-fill::before {
  content: "\f3b6"; }

.bi-file-spreadsheet::before {
  content: "\f3b7"; }

.bi-file-text-fill::before {
  content: "\f3b8"; }

.bi-file-text::before {
  content: "\f3b9"; }

.bi-file-word-fill::before {
  content: "\f3ba"; }

.bi-file-word::before {
  content: "\f3bb"; }

.bi-file-x-fill::before {
  content: "\f3bc"; }

.bi-file-x::before {
  content: "\f3bd"; }

.bi-file-zip-fill::before {
  content: "\f3be"; }

.bi-file-zip::before {
  content: "\f3bf"; }

.bi-file::before {
  content: "\f3c0"; }

.bi-files-alt::before {
  content: "\f3c1"; }

.bi-files::before {
  content: "\f3c2"; }

.bi-film::before {
  content: "\f3c3"; }

.bi-filter-circle-fill::before {
  content: "\f3c4"; }

.bi-filter-circle::before {
  content: "\f3c5"; }

.bi-filter-left::before {
  content: "\f3c6"; }

.bi-filter-right::before {
  content: "\f3c7"; }

.bi-filter-square-fill::before {
  content: "\f3c8"; }

.bi-filter-square::before {
  content: "\f3c9"; }

.bi-filter::before {
  content: "\f3ca"; }

.bi-flag-fill::before {
  content: "\f3cb"; }

.bi-flag::before {
  content: "\f3cc"; }

.bi-flower1::before {
  content: "\f3cd"; }

.bi-flower2::before {
  content: "\f3ce"; }

.bi-flower3::before {
  content: "\f3cf"; }

.bi-folder-check::before {
  content: "\f3d0"; }

.bi-folder-fill::before {
  content: "\f3d1"; }

.bi-folder-minus::before {
  content: "\f3d2"; }

.bi-folder-plus::before {
  content: "\f3d3"; }

.bi-folder-symlink-fill::before {
  content: "\f3d4"; }

.bi-folder-symlink::before {
  content: "\f3d5"; }

.bi-folder-x::before {
  content: "\f3d6"; }

.bi-folder::before {
  content: "\f3d7"; }

.bi-folder2-open::before {
  content: "\f3d8"; }

.bi-folder2::before {
  content: "\f3d9"; }

.bi-fonts::before {
  content: "\f3da"; }

.bi-forward-fill::before {
  content: "\f3db"; }

.bi-forward::before {
  content: "\f3dc"; }

.bi-front::before {
  content: "\f3dd"; }

.bi-fullscreen-exit::before {
  content: "\f3de"; }

.bi-fullscreen::before {
  content: "\f3df"; }

.bi-funnel-fill::before {
  content: "\f3e0"; }

.bi-funnel::before {
  content: "\f3e1"; }

.bi-gear-fill::before {
  content: "\f3e2"; }

.bi-gear-wide-connected::before {
  content: "\f3e3"; }

.bi-gear-wide::before {
  content: "\f3e4"; }

.bi-gear::before {
  content: "\f3e5"; }

.bi-gem::before {
  content: "\f3e6"; }

.bi-geo-alt-fill::before {
  content: "\f3e7"; }

.bi-geo-alt::before {
  content: "\f3e8"; }

.bi-geo-fill::before {
  content: "\f3e9"; }

.bi-geo::before {
  content: "\f3ea"; }

.bi-gift-fill::before {
  content: "\f3eb"; }

.bi-gift::before {
  content: "\f3ec"; }

.bi-github::before {
  content: "\f3ed"; }

.bi-globe::before {
  content: "\f3ee"; }

.bi-globe2::before {
  content: "\f3ef"; }

.bi-google::before {
  content: "\f3f0"; }

.bi-graph-down::before {
  content: "\f3f1"; }

.bi-graph-up::before {
  content: "\f3f2"; }

.bi-grid-1x2-fill::before {
  content: "\f3f3"; }

.bi-grid-1x2::before {
  content: "\f3f4"; }

.bi-grid-3x2-gap-fill::before {
  content: "\f3f5"; }

.bi-grid-3x2-gap::before {
  content: "\f3f6"; }

.bi-grid-3x2::before {
  content: "\f3f7"; }

.bi-grid-3x3-gap-fill::before {
  content: "\f3f8"; }

.bi-grid-3x3-gap::before {
  content: "\f3f9"; }

.bi-grid-3x3::before {
  content: "\f3fa"; }

.bi-grid-fill::before {
  content: "\f3fb"; }

.bi-grid::before {
  content: "\f3fc"; }

.bi-grip-horizontal::before {
  content: "\f3fd"; }

.bi-grip-vertical::before {
  content: "\f3fe"; }

.bi-hammer::before {
  content: "\f3ff"; }

.bi-hand-index-fill::before {
  content: "\f400"; }

.bi-hand-index-thumb-fill::before {
  content: "\f401"; }

.bi-hand-index-thumb::before {
  content: "\f402"; }

.bi-hand-index::before {
  content: "\f403"; }

.bi-hand-thumbs-down-fill::before {
  content: "\f404"; }

.bi-hand-thumbs-down::before {
  content: "\f405"; }

.bi-hand-thumbs-up-fill::before {
  content: "\f406"; }

.bi-hand-thumbs-up::before {
  content: "\f407"; }

.bi-handbag-fill::before {
  content: "\f408"; }

.bi-handbag::before {
  content: "\f409"; }

.bi-hash::before {
  content: "\f40a"; }

.bi-hdd-fill::before {
  content: "\f40b"; }

.bi-hdd-network-fill::before {
  content: "\f40c"; }

.bi-hdd-network::before {
  content: "\f40d"; }

.bi-hdd-rack-fill::before {
  content: "\f40e"; }

.bi-hdd-rack::before {
  content: "\f40f"; }

.bi-hdd-stack-fill::before {
  content: "\f410"; }

.bi-hdd-stack::before {
  content: "\f411"; }

.bi-hdd::before {
  content: "\f412"; }

.bi-headphones::before {
  content: "\f413"; }

.bi-headset::before {
  content: "\f414"; }

.bi-heart-fill::before {
  content: "\f415"; }

.bi-heart-half::before {
  content: "\f416"; }

.bi-heart::before {
  content: "\f417"; }

.bi-heptagon-fill::before {
  content: "\f418"; }

.bi-heptagon-half::before {
  content: "\f419"; }

.bi-heptagon::before {
  content: "\f41a"; }

.bi-hexagon-fill::before {
  content: "\f41b"; }

.bi-hexagon-half::before {
  content: "\f41c"; }

.bi-hexagon::before {
  content: "\f41d"; }

.bi-hourglass-bottom::before {
  content: "\f41e"; }

.bi-hourglass-split::before {
  content: "\f41f"; }

.bi-hourglass-top::before {
  content: "\f420"; }

.bi-hourglass::before {
  content: "\f421"; }

.bi-house-door-fill::before {
  content: "\f422"; }

.bi-house-door::before {
  content: "\f423"; }

.bi-house-fill::before {
  content: "\f424"; }

.bi-house::before {
  content: "\f425"; }

.bi-hr::before {
  content: "\f426"; }

.bi-hurricane::before {
  content: "\f427"; }

.bi-image-alt::before {
  content: "\f428"; }

.bi-image-fill::before {
  content: "\f429"; }

.bi-image::before {
  content: "\f42a"; }

.bi-images::before {
  content: "\f42b"; }

.bi-inbox-fill::before {
  content: "\f42c"; }

.bi-inbox::before {
  content: "\f42d"; }

.bi-inboxes-fill::before {
  content: "\f42e"; }

.bi-inboxes::before {
  content: "\f42f"; }

.bi-info-circle-fill::before {
  content: "\f430"; }

.bi-info-circle::before {
  content: "\f431"; }

.bi-info-square-fill::before {
  content: "\f432"; }

.bi-info-square::before {
  content: "\f433"; }

.bi-info::before {
  content: "\f434"; }

.bi-input-cursor-text::before {
  content: "\f435"; }

.bi-input-cursor::before {
  content: "\f436"; }

.bi-instagram::before {
  content: "\f437"; }

.bi-intersect::before {
  content: "\f438"; }

.bi-journal-album::before {
  content: "\f439"; }

.bi-journal-arrow-down::before {
  content: "\f43a"; }

.bi-journal-arrow-up::before {
  content: "\f43b"; }

.bi-journal-bookmark-fill::before {
  content: "\f43c"; }

.bi-journal-bookmark::before {
  content: "\f43d"; }

.bi-journal-check::before {
  content: "\f43e"; }

.bi-journal-code::before {
  content: "\f43f"; }

.bi-journal-medical::before {
  content: "\f440"; }

.bi-journal-minus::before {
  content: "\f441"; }

.bi-journal-plus::before {
  content: "\f442"; }

.bi-journal-richtext::before {
  content: "\f443"; }

.bi-journal-text::before {
  content: "\f444"; }

.bi-journal-x::before {
  content: "\f445"; }

.bi-journal::before {
  content: "\f446"; }

.bi-journals::before {
  content: "\f447"; }

.bi-joystick::before {
  content: "\f448"; }

.bi-justify-left::before {
  content: "\f449"; }

.bi-justify-right::before {
  content: "\f44a"; }

.bi-justify::before {
  content: "\f44b"; }

.bi-kanban-fill::before {
  content: "\f44c"; }

.bi-kanban::before {
  content: "\f44d"; }

.bi-key-fill::before {
  content: "\f44e"; }

.bi-key::before {
  content: "\f44f"; }

.bi-keyboard-fill::before {
  content: "\f450"; }

.bi-keyboard::before {
  content: "\f451"; }

.bi-ladder::before {
  content: "\f452"; }

.bi-lamp-fill::before {
  content: "\f453"; }

.bi-lamp::before {
  content: "\f454"; }

.bi-laptop-fill::before {
  content: "\f455"; }

.bi-laptop::before {
  content: "\f456"; }

.bi-layer-backward::before {
  content: "\f457"; }

.bi-layer-forward::before {
  content: "\f458"; }

.bi-layers-fill::before {
  content: "\f459"; }

.bi-layers-half::before {
  content: "\f45a"; }

.bi-layers::before {
  content: "\f45b"; }

.bi-layout-sidebar-inset-reverse::before {
  content: "\f45c"; }

.bi-layout-sidebar-inset::before {
  content: "\f45d"; }

.bi-layout-sidebar-reverse::before {
  content: "\f45e"; }

.bi-layout-sidebar::before {
  content: "\f45f"; }

.bi-layout-split::before {
  content: "\f460"; }

.bi-layout-text-sidebar-reverse::before {
  content: "\f461"; }

.bi-layout-text-sidebar::before {
  content: "\f462"; }

.bi-layout-text-window-reverse::before {
  content: "\f463"; }

.bi-layout-text-window::before {
  content: "\f464"; }

.bi-layout-three-columns::before {
  content: "\f465"; }

.bi-layout-wtf::before {
  content: "\f466"; }

.bi-life-preserver::before {
  content: "\f467"; }

.bi-lightbulb-fill::before {
  content: "\f468"; }

.bi-lightbulb-off-fill::before {
  content: "\f469"; }

.bi-lightbulb-off::before {
  content: "\f46a"; }

.bi-lightbulb::before {
  content: "\f46b"; }

.bi-lightning-charge-fill::before {
  content: "\f46c"; }

.bi-lightning-charge::before {
  content: "\f46d"; }

.bi-lightning-fill::before {
  content: "\f46e"; }

.bi-lightning::before {
  content: "\f46f"; }

.bi-link-45deg::before {
  content: "\f470"; }

.bi-link::before {
  content: "\f471"; }

.bi-linkedin::before {
  content: "\f472"; }

.bi-list-check::before {
  content: "\f473"; }

.bi-list-nested::before {
  content: "\f474"; }

.bi-list-ol::before {
  content: "\f475"; }

.bi-list-stars::before {
  content: "\f476"; }

.bi-list-task::before {
  content: "\f477"; }

.bi-list-ul::before {
  content: "\f478"; }

.bi-list::before {
  content: "\f479"; }

.bi-lock-fill::before {
  content: "\f47a"; }

.bi-lock::before {
  content: "\f47b"; }

.bi-mailbox::before {
  content: "\f47c"; }

.bi-mailbox2::before {
  content: "\f47d"; }

.bi-map-fill::before {
  content: "\f47e"; }

.bi-map::before {
  content: "\f47f"; }

.bi-markdown-fill::before {
  content: "\f480"; }

.bi-markdown::before {
  content: "\f481"; }

.bi-mask::before {
  content: "\f482"; }

.bi-megaphone-fill::before {
  content: "\f483"; }

.bi-megaphone::before {
  content: "\f484"; }

.bi-menu-app-fill::before {
  content: "\f485"; }

.bi-menu-app::before {
  content: "\f486"; }

.bi-menu-button-fill::before {
  content: "\f487"; }

.bi-menu-button-wide-fill::before {
  content: "\f488"; }

.bi-menu-button-wide::before {
  content: "\f489"; }

.bi-menu-button::before {
  content: "\f48a"; }

.bi-menu-down::before {
  content: "\f48b"; }

.bi-menu-up::before {
  content: "\f48c"; }

.bi-mic-fill::before {
  content: "\f48d"; }

.bi-mic-mute-fill::before {
  content: "\f48e"; }

.bi-mic-mute::before {
  content: "\f48f"; }

.bi-mic::before {
  content: "\f490"; }

.bi-minecart-loaded::before {
  content: "\f491"; }

.bi-minecart::before {
  content: "\f492"; }

.bi-moisture::before {
  content: "\f493"; }

.bi-moon-fill::before {
  content: "\f494"; }

.bi-moon-stars-fill::before {
  content: "\f495"; }

.bi-moon-stars::before {
  content: "\f496"; }

.bi-moon::before {
  content: "\f497"; }

.bi-mouse-fill::before {
  content: "\f498"; }

.bi-mouse::before {
  content: "\f499"; }

.bi-mouse2-fill::before {
  content: "\f49a"; }

.bi-mouse2::before {
  content: "\f49b"; }

.bi-mouse3-fill::before {
  content: "\f49c"; }

.bi-mouse3::before {
  content: "\f49d"; }

.bi-music-note-beamed::before {
  content: "\f49e"; }

.bi-music-note-list::before {
  content: "\f49f"; }

.bi-music-note::before {
  content: "\f4a0"; }

.bi-music-player-fill::before {
  content: "\f4a1"; }

.bi-music-player::before {
  content: "\f4a2"; }

.bi-newspaper::before {
  content: "\f4a3"; }

.bi-node-minus-fill::before {
  content: "\f4a4"; }

.bi-node-minus::before {
  content: "\f4a5"; }

.bi-node-plus-fill::before {
  content: "\f4a6"; }

.bi-node-plus::before {
  content: "\f4a7"; }

.bi-nut-fill::before {
  content: "\f4a8"; }

.bi-nut::before {
  content: "\f4a9"; }

.bi-octagon-fill::before {
  content: "\f4aa"; }

.bi-octagon-half::before {
  content: "\f4ab"; }

.bi-octagon::before {
  content: "\f4ac"; }

.bi-option::before {
  content: "\f4ad"; }

.bi-outlet::before {
  content: "\f4ae"; }

.bi-paint-bucket::before {
  content: "\f4af"; }

.bi-palette-fill::before {
  content: "\f4b0"; }

.bi-palette::before {
  content: "\f4b1"; }

.bi-palette2::before {
  content: "\f4b2"; }

.bi-paperclip::before {
  content: "\f4b3"; }

.bi-paragraph::before {
  content: "\f4b4"; }

.bi-patch-check-fill::before {
  content: "\f4b5"; }

.bi-patch-check::before {
  content: "\f4b6"; }

.bi-patch-exclamation-fill::before {
  content: "\f4b7"; }

.bi-patch-exclamation::before {
  content: "\f4b8"; }

.bi-patch-minus-fill::before {
  content: "\f4b9"; }

.bi-patch-minus::before {
  content: "\f4ba"; }

.bi-patch-plus-fill::before {
  content: "\f4bb"; }

.bi-patch-plus::before {
  content: "\f4bc"; }

.bi-patch-question-fill::before {
  content: "\f4bd"; }

.bi-patch-question::before {
  content: "\f4be"; }

.bi-pause-btn-fill::before {
  content: "\f4bf"; }

.bi-pause-btn::before {
  content: "\f4c0"; }

.bi-pause-circle-fill::before {
  content: "\f4c1"; }

.bi-pause-circle::before {
  content: "\f4c2"; }

.bi-pause-fill::before {
  content: "\f4c3"; }

.bi-pause::before {
  content: "\f4c4"; }

.bi-peace-fill::before {
  content: "\f4c5"; }

.bi-peace::before {
  content: "\f4c6"; }

.bi-pen-fill::before {
  content: "\f4c7"; }

.bi-pen::before {
  content: "\f4c8"; }

.bi-pencil-fill::before {
  content: "\f4c9"; }

.bi-pencil-square::before {
  content: "\f4ca"; }

.bi-pencil::before {
  content: "\f4cb"; }

.bi-pentagon-fill::before {
  content: "\f4cc"; }

.bi-pentagon-half::before {
  content: "\f4cd"; }

.bi-pentagon::before {
  content: "\f4ce"; }

.bi-people-fill::before {
  content: "\f4cf"; }

.bi-people::before {
  content: "\f4d0"; }

.bi-percent::before {
  content: "\f4d1"; }

.bi-person-badge-fill::before {
  content: "\f4d2"; }

.bi-person-badge::before {
  content: "\f4d3"; }

.bi-person-bounding-box::before {
  content: "\f4d4"; }

.bi-person-check-fill::before {
  content: "\f4d5"; }

.bi-person-check::before {
  content: "\f4d6"; }

.bi-person-circle::before {
  content: "\f4d7"; }

.bi-person-dash-fill::before {
  content: "\f4d8"; }

.bi-person-dash::before {
  content: "\f4d9"; }

.bi-person-fill::before {
  content: "\f4da"; }

.bi-person-lines-fill::before {
  content: "\f4db"; }

.bi-person-plus-fill::before {
  content: "\f4dc"; }

.bi-person-plus::before {
  content: "\f4dd"; }

.bi-person-square::before {
  content: "\f4de"; }

.bi-person-x-fill::before {
  content: "\f4df"; }

.bi-person-x::before {
  content: "\f4e0"; }

.bi-person::before {
  content: "\f4e1"; }

.bi-phone-fill::before {
  content: "\f4e2"; }

.bi-phone-landscape-fill::before {
  content: "\f4e3"; }

.bi-phone-landscape::before {
  content: "\f4e4"; }

.bi-phone-vibrate-fill::before {
  content: "\f4e5"; }

.bi-phone-vibrate::before {
  content: "\f4e6"; }

.bi-phone::before {
  content: "\f4e7"; }

.bi-pie-chart-fill::before {
  content: "\f4e8"; }

.bi-pie-chart::before {
  content: "\f4e9"; }

.bi-pin-angle-fill::before {
  content: "\f4ea"; }

.bi-pin-angle::before {
  content: "\f4eb"; }

.bi-pin-fill::before {
  content: "\f4ec"; }

.bi-pin::before {
  content: "\f4ed"; }

.bi-pip-fill::before {
  content: "\f4ee"; }

.bi-pip::before {
  content: "\f4ef"; }

.bi-play-btn-fill::before {
  content: "\f4f0"; }

.bi-play-btn::before {
  content: "\f4f1"; }

.bi-play-circle-fill::before {
  content: "\f4f2"; }

.bi-play-circle::before {
  content: "\f4f3"; }

.bi-play-fill::before {
  content: "\f4f4"; }

.bi-play::before {
  content: "\f4f5"; }

.bi-plug-fill::before {
  content: "\f4f6"; }

.bi-plug::before {
  content: "\f4f7"; }

.bi-plus-circle-dotted::before {
  content: "\f4f8"; }

.bi-plus-circle-fill::before {
  content: "\f4f9"; }

.bi-plus-circle::before {
  content: "\f4fa"; }

.bi-plus-square-dotted::before {
  content: "\f4fb"; }

.bi-plus-square-fill::before {
  content: "\f4fc"; }

.bi-plus-square::before {
  content: "\f4fd"; }

.bi-plus::before {
  content: "\f4fe"; }

.bi-power::before {
  content: "\f4ff"; }

.bi-printer-fill::before {
  content: "\f500"; }

.bi-printer::before {
  content: "\f501"; }

.bi-puzzle-fill::before {
  content: "\f502"; }

.bi-puzzle::before {
  content: "\f503"; }

.bi-question-circle-fill::before {
  content: "\f504"; }

.bi-question-circle::before {
  content: "\f505"; }

.bi-question-diamond-fill::before {
  content: "\f506"; }

.bi-question-diamond::before {
  content: "\f507"; }

.bi-question-octagon-fill::before {
  content: "\f508"; }

.bi-question-octagon::before {
  content: "\f509"; }

.bi-question-square-fill::before {
  content: "\f50a"; }

.bi-question-square::before {
  content: "\f50b"; }

.bi-question::before {
  content: "\f50c"; }

.bi-rainbow::before {
  content: "\f50d"; }

.bi-receipt-cutoff::before {
  content: "\f50e"; }

.bi-receipt::before {
  content: "\f50f"; }

.bi-reception-0::before {
  content: "\f510"; }

.bi-reception-1::before {
  content: "\f511"; }

.bi-reception-2::before {
  content: "\f512"; }

.bi-reception-3::before {
  content: "\f513"; }

.bi-reception-4::before {
  content: "\f514"; }

.bi-record-btn-fill::before {
  content: "\f515"; }

.bi-record-btn::before {
  content: "\f516"; }

.bi-record-circle-fill::before {
  content: "\f517"; }

.bi-record-circle::before {
  content: "\f518"; }

.bi-record-fill::before {
  content: "\f519"; }

.bi-record::before {
  content: "\f51a"; }

.bi-record2-fill::before {
  content: "\f51b"; }

.bi-record2::before {
  content: "\f51c"; }

.bi-reply-all-fill::before {
  content: "\f51d"; }

.bi-reply-all::before {
  content: "\f51e"; }

.bi-reply-fill::before {
  content: "\f51f"; }

.bi-reply::before {
  content: "\f520"; }

.bi-rss-fill::before {
  content: "\f521"; }

.bi-rss::before {
  content: "\f522"; }

.bi-rulers::before {
  content: "\f523"; }

.bi-save-fill::before {
  content: "\f524"; }

.bi-save::before {
  content: "\f525"; }

.bi-save2-fill::before {
  content: "\f526"; }

.bi-save2::before {
  content: "\f527"; }

.bi-scissors::before {
  content: "\f528"; }

.bi-screwdriver::before {
  content: "\f529"; }

.bi-search::before {
  content: "\f52a"; }

.bi-segmented-nav::before {
  content: "\f52b"; }

.bi-server::before {
  content: "\f52c"; }

.bi-share-fill::before {
  content: "\f52d"; }

.bi-share::before {
  content: "\f52e"; }

.bi-shield-check::before {
  content: "\f52f"; }

.bi-shield-exclamation::before {
  content: "\f530"; }

.bi-shield-fill-check::before {
  content: "\f531"; }

.bi-shield-fill-exclamation::before {
  content: "\f532"; }

.bi-shield-fill-minus::before {
  content: "\f533"; }

.bi-shield-fill-plus::before {
  content: "\f534"; }

.bi-shield-fill-x::before {
  content: "\f535"; }

.bi-shield-fill::before {
  content: "\f536"; }

.bi-shield-lock-fill::before {
  content: "\f537"; }

.bi-shield-lock::before {
  content: "\f538"; }

.bi-shield-minus::before {
  content: "\f539"; }

.bi-shield-plus::before {
  content: "\f53a"; }

.bi-shield-shaded::before {
  content: "\f53b"; }

.bi-shield-slash-fill::before {
  content: "\f53c"; }

.bi-shield-slash::before {
  content: "\f53d"; }

.bi-shield-x::before {
  content: "\f53e"; }

.bi-shield::before {
  content: "\f53f"; }

.bi-shift-fill::before {
  content: "\f540"; }

.bi-shift::before {
  content: "\f541"; }

.bi-shop-window::before {
  content: "\f542"; }

.bi-shop::before {
  content: "\f543"; }

.bi-shuffle::before {
  content: "\f544"; }

.bi-signpost-2-fill::before {
  content: "\f545"; }

.bi-signpost-2::before {
  content: "\f546"; }

.bi-signpost-fill::before {
  content: "\f547"; }

.bi-signpost-split-fill::before {
  content: "\f548"; }

.bi-signpost-split::before {
  content: "\f549"; }

.bi-signpost::before {
  content: "\f54a"; }

.bi-sim-fill::before {
  content: "\f54b"; }

.bi-sim::before {
  content: "\f54c"; }

.bi-skip-backward-btn-fill::before {
  content: "\f54d"; }

.bi-skip-backward-btn::before {
  content: "\f54e"; }

.bi-skip-backward-circle-fill::before {
  content: "\f54f"; }

.bi-skip-backward-circle::before {
  content: "\f550"; }

.bi-skip-backward-fill::before {
  content: "\f551"; }

.bi-skip-backward::before {
  content: "\f552"; }

.bi-skip-end-btn-fill::before {
  content: "\f553"; }

.bi-skip-end-btn::before {
  content: "\f554"; }

.bi-skip-end-circle-fill::before {
  content: "\f555"; }

.bi-skip-end-circle::before {
  content: "\f556"; }

.bi-skip-end-fill::before {
  content: "\f557"; }

.bi-skip-end::before {
  content: "\f558"; }

.bi-skip-forward-btn-fill::before {
  content: "\f559"; }

.bi-skip-forward-btn::before {
  content: "\f55a"; }

.bi-skip-forward-circle-fill::before {
  content: "\f55b"; }

.bi-skip-forward-circle::before {
  content: "\f55c"; }

.bi-skip-forward-fill::before {
  content: "\f55d"; }

.bi-skip-forward::before {
  content: "\f55e"; }

.bi-skip-start-btn-fill::before {
  content: "\f55f"; }

.bi-skip-start-btn::before {
  content: "\f560"; }

.bi-skip-start-circle-fill::before {
  content: "\f561"; }

.bi-skip-start-circle::before {
  content: "\f562"; }

.bi-skip-start-fill::before {
  content: "\f563"; }

.bi-skip-start::before {
  content: "\f564"; }

.bi-slack::before {
  content: "\f565"; }

.bi-slash-circle-fill::before {
  content: "\f566"; }

.bi-slash-circle::before {
  content: "\f567"; }

.bi-slash-square-fill::before {
  content: "\f568"; }

.bi-slash-square::before {
  content: "\f569"; }

.bi-slash::before {
  content: "\f56a"; }

.bi-sliders::before {
  content: "\f56b"; }

.bi-smartwatch::before {
  content: "\f56c"; }

.bi-snow::before {
  content: "\f56d"; }

.bi-snow2::before {
  content: "\f56e"; }

.bi-snow3::before {
  content: "\f56f"; }

.bi-sort-alpha-down-alt::before {
  content: "\f570"; }

.bi-sort-alpha-down::before {
  content: "\f571"; }

.bi-sort-alpha-up-alt::before {
  content: "\f572"; }

.bi-sort-alpha-up::before {
  content: "\f573"; }

.bi-sort-down-alt::before {
  content: "\f574"; }

.bi-sort-down::before {
  content: "\f575"; }

.bi-sort-numeric-down-alt::before {
  content: "\f576"; }

.bi-sort-numeric-down::before {
  content: "\f577"; }

.bi-sort-numeric-up-alt::before {
  content: "\f578"; }

.bi-sort-numeric-up::before {
  content: "\f579"; }

.bi-sort-up-alt::before {
  content: "\f57a"; }

.bi-sort-up::before {
  content: "\f57b"; }

.bi-soundwave::before {
  content: "\f57c"; }

.bi-speaker-fill::before {
  content: "\f57d"; }

.bi-speaker::before {
  content: "\f57e"; }

.bi-speedometer::before {
  content: "\f57f"; }

.bi-speedometer2::before {
  content: "\f580"; }

.bi-spellcheck::before {
  content: "\f581"; }

.bi-square-fill::before {
  content: "\f582"; }

.bi-square-half::before {
  content: "\f583"; }

.bi-square::before {
  content: "\f584"; }

.bi-stack::before {
  content: "\f585"; }

.bi-star-fill::before {
  content: "\f586"; }

.bi-star-half::before {
  content: "\f587"; }

.bi-star::before {
  content: "\f588"; }

.bi-stars::before {
  content: "\f589"; }

.bi-stickies-fill::before {
  content: "\f58a"; }

.bi-stickies::before {
  content: "\f58b"; }

.bi-sticky-fill::before {
  content: "\f58c"; }

.bi-sticky::before {
  content: "\f58d"; }

.bi-stop-btn-fill::before {
  content: "\f58e"; }

.bi-stop-btn::before {
  content: "\f58f"; }

.bi-stop-circle-fill::before {
  content: "\f590"; }

.bi-stop-circle::before {
  content: "\f591"; }

.bi-stop-fill::before {
  content: "\f592"; }

.bi-stop::before {
  content: "\f593"; }

.bi-stoplights-fill::before {
  content: "\f594"; }

.bi-stoplights::before {
  content: "\f595"; }

.bi-stopwatch-fill::before {
  content: "\f596"; }

.bi-stopwatch::before {
  content: "\f597"; }

.bi-subtract::before {
  content: "\f598"; }

.bi-suit-club-fill::before {
  content: "\f599"; }

.bi-suit-club::before {
  content: "\f59a"; }

.bi-suit-diamond-fill::before {
  content: "\f59b"; }

.bi-suit-diamond::before {
  content: "\f59c"; }

.bi-suit-heart-fill::before {
  content: "\f59d"; }

.bi-suit-heart::before {
  content: "\f59e"; }

.bi-suit-spade-fill::before {
  content: "\f59f"; }

.bi-suit-spade::before {
  content: "\f5a0"; }

.bi-sun-fill::before {
  content: "\f5a1"; }

.bi-sun::before {
  content: "\f5a2"; }

.bi-sunglasses::before {
  content: "\f5a3"; }

.bi-sunrise-fill::before {
  content: "\f5a4"; }

.bi-sunrise::before {
  content: "\f5a5"; }

.bi-sunset-fill::before {
  content: "\f5a6"; }

.bi-sunset::before {
  content: "\f5a7"; }

.bi-symmetry-horizontal::before {
  content: "\f5a8"; }

.bi-symmetry-vertical::before {
  content: "\f5a9"; }

.bi-table::before {
  content: "\f5aa"; }

.bi-tablet-fill::before {
  content: "\f5ab"; }

.bi-tablet-landscape-fill::before {
  content: "\f5ac"; }

.bi-tablet-landscape::before {
  content: "\f5ad"; }

.bi-tablet::before {
  content: "\f5ae"; }

.bi-tag-fill::before {
  content: "\f5af"; }

.bi-tag::before {
  content: "\f5b0"; }

.bi-tags-fill::before {
  content: "\f5b1"; }

.bi-tags::before {
  content: "\f5b2"; }

.bi-telegram::before {
  content: "\f5b3"; }

.bi-telephone-fill::before {
  content: "\f5b4"; }

.bi-telephone-forward-fill::before {
  content: "\f5b5"; }

.bi-telephone-forward::before {
  content: "\f5b6"; }

.bi-telephone-inbound-fill::before {
  content: "\f5b7"; }

.bi-telephone-inbound::before {
  content: "\f5b8"; }

.bi-telephone-minus-fill::before {
  content: "\f5b9"; }

.bi-telephone-minus::before {
  content: "\f5ba"; }

.bi-telephone-outbound-fill::before {
  content: "\f5bb"; }

.bi-telephone-outbound::before {
  content: "\f5bc"; }

.bi-telephone-plus-fill::before {
  content: "\f5bd"; }

.bi-telephone-plus::before {
  content: "\f5be"; }

.bi-telephone-x-fill::before {
  content: "\f5bf"; }

.bi-telephone-x::before {
  content: "\f5c0"; }

.bi-telephone::before {
  content: "\f5c1"; }

.bi-terminal-fill::before {
  content: "\f5c2"; }

.bi-terminal::before {
  content: "\f5c3"; }

.bi-text-center::before {
  content: "\f5c4"; }

.bi-text-indent-left::before {
  content: "\f5c5"; }

.bi-text-indent-right::before {
  content: "\f5c6"; }

.bi-text-left::before {
  content: "\f5c7"; }

.bi-text-paragraph::before {
  content: "\f5c8"; }

.bi-text-right::before {
  content: "\f5c9"; }

.bi-textarea-resize::before {
  content: "\f5ca"; }

.bi-textarea-t::before {
  content: "\f5cb"; }

.bi-textarea::before {
  content: "\f5cc"; }

.bi-thermometer-half::before {
  content: "\f5cd"; }

.bi-thermometer-high::before {
  content: "\f5ce"; }

.bi-thermometer-low::before {
  content: "\f5cf"; }

.bi-thermometer-snow::before {
  content: "\f5d0"; }

.bi-thermometer-sun::before {
  content: "\f5d1"; }

.bi-thermometer::before {
  content: "\f5d2"; }

.bi-three-dots-vertical::before {
  content: "\f5d3"; }

.bi-three-dots::before {
  content: "\f5d4"; }

.bi-toggle-off::before {
  content: "\f5d5"; }

.bi-toggle-on::before {
  content: "\f5d6"; }

.bi-toggle2-off::before {
  content: "\f5d7"; }

.bi-toggle2-on::before {
  content: "\f5d8"; }

.bi-toggles::before {
  content: "\f5d9"; }

.bi-toggles2::before {
  content: "\f5da"; }

.bi-tools::before {
  content: "\f5db"; }

.bi-tornado::before {
  content: "\f5dc"; }

.bi-trash-fill::before {
  content: "\f5dd"; }

.bi-trash::before {
  content: "\f5de"; }

.bi-trash2-fill::before {
  content: "\f5df"; }

.bi-trash2::before {
  content: "\f5e0"; }

.bi-tree-fill::before {
  content: "\f5e1"; }

.bi-tree::before {
  content: "\f5e2"; }

.bi-triangle-fill::before {
  content: "\f5e3"; }

.bi-triangle-half::before {
  content: "\f5e4"; }

.bi-triangle::before {
  content: "\f5e5"; }

.bi-trophy-fill::before {
  content: "\f5e6"; }

.bi-trophy::before {
  content: "\f5e7"; }

.bi-tropical-storm::before {
  content: "\f5e8"; }

.bi-truck-flatbed::before {
  content: "\f5e9"; }

.bi-truck::before {
  content: "\f5ea"; }

.bi-tsunami::before {
  content: "\f5eb"; }

.bi-tv-fill::before {
  content: "\f5ec"; }

.bi-tv::before {
  content: "\f5ed"; }

.bi-twitch::before {
  content: "\f5ee"; }

.bi-twitter::before {
  content: "\f5ef"; }

.bi-type-bold::before {
  content: "\f5f0"; }

.bi-type-h1::before {
  content: "\f5f1"; }

.bi-type-h2::before {
  content: "\f5f2"; }

.bi-type-h3::before {
  content: "\f5f3"; }

.bi-type-italic::before {
  content: "\f5f4"; }

.bi-type-strikethrough::before {
  content: "\f5f5"; }

.bi-type-underline::before {
  content: "\f5f6"; }

.bi-type::before {
  content: "\f5f7"; }

.bi-ui-checks-grid::before {
  content: "\f5f8"; }

.bi-ui-checks::before {
  content: "\f5f9"; }

.bi-ui-radios-grid::before {
  content: "\f5fa"; }

.bi-ui-radios::before {
  content: "\f5fb"; }

.bi-umbrella-fill::before {
  content: "\f5fc"; }

.bi-umbrella::before {
  content: "\f5fd"; }

.bi-union::before {
  content: "\f5fe"; }

.bi-unlock-fill::before {
  content: "\f5ff"; }

.bi-unlock::before {
  content: "\f600"; }

.bi-upc-scan::before {
  content: "\f601"; }

.bi-upc::before {
  content: "\f602"; }

.bi-upload::before {
  content: "\f603"; }

.bi-vector-pen::before {
  content: "\f604"; }

.bi-view-list::before {
  content: "\f605"; }

.bi-view-stacked::before {
  content: "\f606"; }

.bi-vinyl-fill::before {
  content: "\f607"; }

.bi-vinyl::before {
  content: "\f608"; }

.bi-voicemail::before {
  content: "\f609"; }

.bi-volume-down-fill::before {
  content: "\f60a"; }

.bi-volume-down::before {
  content: "\f60b"; }

.bi-volume-mute-fill::before {
  content: "\f60c"; }

.bi-volume-mute::before {
  content: "\f60d"; }

.bi-volume-off-fill::before {
  content: "\f60e"; }

.bi-volume-off::before {
  content: "\f60f"; }

.bi-volume-up-fill::before {
  content: "\f610"; }

.bi-volume-up::before {
  content: "\f611"; }

.bi-vr::before {
  content: "\f612"; }

.bi-wallet-fill::before {
  content: "\f613"; }

.bi-wallet::before {
  content: "\f614"; }

.bi-wallet2::before {
  content: "\f615"; }

.bi-watch::before {
  content: "\f616"; }

.bi-water::before {
  content: "\f617"; }

.bi-whatsapp::before {
  content: "\f618"; }

.bi-wifi-1::before {
  content: "\f619"; }

.bi-wifi-2::before {
  content: "\f61a"; }

.bi-wifi-off::before {
  content: "\f61b"; }

.bi-wifi::before {
  content: "\f61c"; }

.bi-wind::before {
  content: "\f61d"; }

.bi-window-dock::before {
  content: "\f61e"; }

.bi-window-sidebar::before {
  content: "\f61f"; }

.bi-window::before {
  content: "\f620"; }

.bi-wrench::before {
  content: "\f621"; }

.bi-x-circle-fill::before {
  content: "\f622"; }

.bi-x-circle::before {
  content: "\f623"; }

.bi-x-diamond-fill::before {
  content: "\f624"; }

.bi-x-diamond::before {
  content: "\f625"; }

.bi-x-octagon-fill::before {
  content: "\f626"; }

.bi-x-octagon::before {
  content: "\f627"; }

.bi-x-square-fill::before {
  content: "\f628"; }

.bi-x-square::before {
  content: "\f629"; }

.bi-x::before {
  content: "\f62a"; }

.bi-youtube::before {
  content: "\f62b"; }

.bi-zoom-in::before {
  content: "\f62c"; }

.bi-zoom-out::before {
  content: "\f62d"; }

.bi-bank::before {
  content: "\f62e"; }

.bi-bank2::before {
  content: "\f62f"; }

.bi-bell-slash-fill::before {
  content: "\f630"; }

.bi-bell-slash::before {
  content: "\f631"; }

.bi-cash-coin::before {
  content: "\f632"; }

.bi-check-lg::before {
  content: "\f633"; }

.bi-coin::before {
  content: "\f634"; }

.bi-currency-bitcoin::before {
  content: "\f635"; }

.bi-currency-dollar::before {
  content: "\f636"; }

.bi-currency-euro::before {
  content: "\f637"; }

.bi-currency-exchange::before {
  content: "\f638"; }

.bi-currency-pound::before {
  content: "\f639"; }

.bi-currency-yen::before {
  content: "\f63a"; }

.bi-dash-lg::before {
  content: "\f63b"; }

.bi-exclamation-lg::before {
  content: "\f63c"; }

.bi-file-earmark-pdf-fill::before {
  content: "\f63d"; }

.bi-file-earmark-pdf::before {
  content: "\f63e"; }

.bi-file-pdf-fill::before {
  content: "\f63f"; }

.bi-file-pdf::before {
  content: "\f640"; }

.bi-gender-ambiguous::before {
  content: "\f641"; }

.bi-gender-female::before {
  content: "\f642"; }

.bi-gender-male::before {
  content: "\f643"; }

.bi-gender-trans::before {
  content: "\f644"; }

.bi-headset-vr::before {
  content: "\f645"; }

.bi-info-lg::before {
  content: "\f646"; }

.bi-mastodon::before {
  content: "\f647"; }

.bi-messenger::before {
  content: "\f648"; }

.bi-piggy-bank-fill::before {
  content: "\f649"; }

.bi-piggy-bank::before {
  content: "\f64a"; }

.bi-pin-map-fill::before {
  content: "\f64b"; }

.bi-pin-map::before {
  content: "\f64c"; }

.bi-plus-lg::before {
  content: "\f64d"; }

.bi-question-lg::before {
  content: "\f64e"; }

.bi-recycle::before {
  content: "\f64f"; }

.bi-reddit::before {
  content: "\f650"; }

.bi-safe-fill::before {
  content: "\f651"; }

.bi-safe2-fill::before {
  content: "\f652"; }

.bi-safe2::before {
  content: "\f653"; }

.bi-sd-card-fill::before {
  content: "\f654"; }

.bi-sd-card::before {
  content: "\f655"; }

.bi-skype::before {
  content: "\f656"; }

.bi-slash-lg::before {
  content: "\f657"; }

.bi-translate::before {
  content: "\f658"; }

.bi-x-lg::before {
  content: "\f659"; }

.bi-safe::before {
  content: "\f65a"; }

.bi-apple::before {
  content: "\f65b"; }

.bi-microsoft::before {
  content: "\f65d"; }

.bi-windows::before {
  content: "\f65e"; }

.bi-behance::before {
  content: "\f65c"; }

.bi-dribbble::before {
  content: "\f65f"; }

.bi-line::before {
  content: "\f660"; }

.bi-medium::before {
  content: "\f661"; }

.bi-paypal::before {
  content: "\f662"; }

.bi-pinterest::before {
  content: "\f663"; }

.bi-signal::before {
  content: "\f664"; }

.bi-snapchat::before {
  content: "\f665"; }

.bi-spotify::before {
  content: "\f666"; }

.bi-stack-overflow::before {
  content: "\f667"; }

.bi-strava::before {
  content: "\f668"; }

.bi-wordpress::before {
  content: "\f669"; }

.bi-vimeo::before {
  content: "\f66a"; }

.bi-activity::before {
  content: "\f66b"; }

.bi-easel2-fill::before {
  content: "\f66c"; }

.bi-easel2::before {
  content: "\f66d"; }

.bi-easel3-fill::before {
  content: "\f66e"; }

.bi-easel3::before {
  content: "\f66f"; }

.bi-fan::before {
  content: "\f670"; }

.bi-fingerprint::before {
  content: "\f671"; }

.bi-graph-down-arrow::before {
  content: "\f672"; }

.bi-graph-up-arrow::before {
  content: "\f673"; }

.bi-hypnotize::before {
  content: "\f674"; }

.bi-magic::before {
  content: "\f675"; }

.bi-person-rolodex::before {
  content: "\f676"; }

.bi-person-video::before {
  content: "\f677"; }

.bi-person-video2::before {
  content: "\f678"; }

.bi-person-video3::before {
  content: "\f679"; }

.bi-person-workspace::before {
  content: "\f67a"; }

.bi-radioactive::before {
  content: "\f67b"; }

.bi-webcam-fill::before {
  content: "\f67c"; }

.bi-webcam::before {
  content: "\f67d"; }

.bi-yin-yang::before {
  content: "\f67e"; }

.bi-bandaid-fill::before {
  content: "\f680"; }

.bi-bandaid::before {
  content: "\f681"; }

.bi-bluetooth::before {
  content: "\f682"; }

.bi-body-text::before {
  content: "\f683"; }

.bi-boombox::before {
  content: "\f684"; }

.bi-boxes::before {
  content: "\f685"; }

.bi-dpad-fill::before {
  content: "\f686"; }

.bi-dpad::before {
  content: "\f687"; }

.bi-ear-fill::before {
  content: "\f688"; }

.bi-ear::before {
  content: "\f689"; }

.bi-envelope-check-fill::before {
  content: "\f68b"; }

.bi-envelope-check::before {
  content: "\f68c"; }

.bi-envelope-dash-fill::before {
  content: "\f68e"; }

.bi-envelope-dash::before {
  content: "\f68f"; }

.bi-envelope-exclamation-fill::before {
  content: "\f691"; }

.bi-envelope-exclamation::before {
  content: "\f692"; }

.bi-envelope-plus-fill::before {
  content: "\f693"; }

.bi-envelope-plus::before {
  content: "\f694"; }

.bi-envelope-slash-fill::before {
  content: "\f696"; }

.bi-envelope-slash::before {
  content: "\f697"; }

.bi-envelope-x-fill::before {
  content: "\f699"; }

.bi-envelope-x::before {
  content: "\f69a"; }

.bi-explicit-fill::before {
  content: "\f69b"; }

.bi-explicit::before {
  content: "\f69c"; }

.bi-git::before {
  content: "\f69d"; }

.bi-infinity::before {
  content: "\f69e"; }

.bi-list-columns-reverse::before {
  content: "\f69f"; }

.bi-list-columns::before {
  content: "\f6a0"; }

.bi-meta::before {
  content: "\f6a1"; }

.bi-mortorboard-fill::before {
  content: "\f6a2"; }

.bi-mortorboard::before {
  content: "\f6a3"; }

.bi-nintendo-switch::before {
  content: "\f6a4"; }

.bi-pc-display-horizontal::before {
  content: "\f6a5"; }

.bi-pc-display::before {
  content: "\f6a6"; }

.bi-pc-horizontal::before {
  content: "\f6a7"; }

.bi-pc::before {
  content: "\f6a8"; }

.bi-playstation::before {
  content: "\f6a9"; }

.bi-plus-slash-minus::before {
  content: "\f6aa"; }

.bi-projector-fill::before {
  content: "\f6ab"; }

.bi-projector::before {
  content: "\f6ac"; }

.bi-qr-code-scan::before {
  content: "\f6ad"; }

.bi-qr-code::before {
  content: "\f6ae"; }

.bi-quora::before {
  content: "\f6af"; }

.bi-quote::before {
  content: "\f6b0"; }

.bi-robot::before {
  content: "\f6b1"; }

.bi-send-check-fill::before {
  content: "\f6b2"; }

.bi-send-check::before {
  content: "\f6b3"; }

.bi-send-dash-fill::before {
  content: "\f6b4"; }

.bi-send-dash::before {
  content: "\f6b5"; }

.bi-send-exclamation-fill::before {
  content: "\f6b7"; }

.bi-send-exclamation::before {
  content: "\f6b8"; }

.bi-send-fill::before {
  content: "\f6b9"; }

.bi-send-plus-fill::before {
  content: "\f6ba"; }

.bi-send-plus::before {
  content: "\f6bb"; }

.bi-send-slash-fill::before {
  content: "\f6bc"; }

.bi-send-slash::before {
  content: "\f6bd"; }

.bi-send-x-fill::before {
  content: "\f6be"; }

.bi-send-x::before {
  content: "\f6bf"; }

.bi-send::before {
  content: "\f6c0"; }

.bi-steam::before {
  content: "\f6c1"; }

.bi-terminal-dash::before {
  content: "\f6c3"; }

.bi-terminal-plus::before {
  content: "\f6c4"; }

.bi-terminal-split::before {
  content: "\f6c5"; }

.bi-ticket-detailed-fill::before {
  content: "\f6c6"; }

.bi-ticket-detailed::before {
  content: "\f6c7"; }

.bi-ticket-fill::before {
  content: "\f6c8"; }

.bi-ticket-perforated-fill::before {
  content: "\f6c9"; }

.bi-ticket-perforated::before {
  content: "\f6ca"; }

.bi-ticket::before {
  content: "\f6cb"; }

.bi-tiktok::before {
  content: "\f6cc"; }

.bi-window-dash::before {
  content: "\f6cd"; }

.bi-window-desktop::before {
  content: "\f6ce"; }

.bi-window-fullscreen::before {
  content: "\f6cf"; }

.bi-window-plus::before {
  content: "\f6d0"; }

.bi-window-split::before {
  content: "\f6d1"; }

.bi-window-stack::before {
  content: "\f6d2"; }

.bi-window-x::before {
  content: "\f6d3"; }

.bi-xbox::before {
  content: "\f6d4"; }

.bi-ethernet::before {
  content: "\f6d5"; }

.bi-hdmi-fill::before {
  content: "\f6d6"; }

.bi-hdmi::before {
  content: "\f6d7"; }

.bi-usb-c-fill::before {
  content: "\f6d8"; }

.bi-usb-c::before {
  content: "\f6d9"; }

.bi-usb-fill::before {
  content: "\f6da"; }

.bi-usb-plug-fill::before {
  content: "\f6db"; }

.bi-usb-plug::before {
  content: "\f6dc"; }

.bi-usb-symbol::before {
  content: "\f6dd"; }

.bi-usb::before {
  content: "\f6de"; }

.bi-boombox-fill::before {
  content: "\f6df"; }

.bi-displayport::before {
  content: "\f6e1"; }

.bi-gpu-card::before {
  content: "\f6e2"; }

.bi-memory::before {
  content: "\f6e3"; }

.bi-modem-fill::before {
  content: "\f6e4"; }

.bi-modem::before {
  content: "\f6e5"; }

.bi-motherboard-fill::before {
  content: "\f6e6"; }

.bi-motherboard::before {
  content: "\f6e7"; }

.bi-optical-audio-fill::before {
  content: "\f6e8"; }

.bi-optical-audio::before {
  content: "\f6e9"; }

.bi-pci-card::before {
  content: "\f6ea"; }

.bi-router-fill::before {
  content: "\f6eb"; }

.bi-router::before {
  content: "\f6ec"; }

.bi-ssd-fill::before {
  content: "\f6ed"; }

.bi-ssd::before {
  content: "\f6ee"; }

.bi-thunderbolt-fill::before {
  content: "\f6ef"; }

.bi-thunderbolt::before {
  content: "\f6f0"; }

.bi-usb-drive-fill::before {
  content: "\f6f1"; }

.bi-usb-drive::before {
  content: "\f6f2"; }

.bi-usb-micro-fill::before {
  content: "\f6f3"; }

.bi-usb-micro::before {
  content: "\f6f4"; }

.bi-usb-mini-fill::before {
  content: "\f6f5"; }

.bi-usb-mini::before {
  content: "\f6f6"; }

.bi-cloud-haze2::before {
  content: "\f6f7"; }

.bi-device-hdd-fill::before {
  content: "\f6f8"; }

.bi-device-hdd::before {
  content: "\f6f9"; }

.bi-device-ssd-fill::before {
  content: "\f6fa"; }

.bi-device-ssd::before {
  content: "\f6fb"; }

.bi-displayport-fill::before {
  content: "\f6fc"; }

.bi-mortarboard-fill::before {
  content: "\f6fd"; }

.bi-mortarboard::before {
  content: "\f6fe"; }

.bi-terminal-x::before {
  content: "\f6ff"; }

.bi-arrow-through-heart-fill::before {
  content: "\f700"; }

.bi-arrow-through-heart::before {
  content: "\f701"; }

.bi-badge-sd-fill::before {
  content: "\f702"; }

.bi-badge-sd::before {
  content: "\f703"; }

.bi-bag-heart-fill::before {
  content: "\f704"; }

.bi-bag-heart::before {
  content: "\f705"; }

.bi-balloon-fill::before {
  content: "\f706"; }

.bi-balloon-heart-fill::before {
  content: "\f707"; }

.bi-balloon-heart::before {
  content: "\f708"; }

.bi-balloon::before {
  content: "\f709"; }

.bi-box2-fill::before {
  content: "\f70a"; }

.bi-box2-heart-fill::before {
  content: "\f70b"; }

.bi-box2-heart::before {
  content: "\f70c"; }

.bi-box2::before {
  content: "\f70d"; }

.bi-braces-asterisk::before {
  content: "\f70e"; }

.bi-calendar-heart-fill::before {
  content: "\f70f"; }

.bi-calendar-heart::before {
  content: "\f710"; }

.bi-calendar2-heart-fill::before {
  content: "\f711"; }

.bi-calendar2-heart::before {
  content: "\f712"; }

.bi-chat-heart-fill::before {
  content: "\f713"; }

.bi-chat-heart::before {
  content: "\f714"; }

.bi-chat-left-heart-fill::before {
  content: "\f715"; }

.bi-chat-left-heart::before {
  content: "\f716"; }

.bi-chat-right-heart-fill::before {
  content: "\f717"; }

.bi-chat-right-heart::before {
  content: "\f718"; }

.bi-chat-square-heart-fill::before {
  content: "\f719"; }

.bi-chat-square-heart::before {
  content: "\f71a"; }

.bi-clipboard-check-fill::before {
  content: "\f71b"; }

.bi-clipboard-data-fill::before {
  content: "\f71c"; }

.bi-clipboard-fill::before {
  content: "\f71d"; }

.bi-clipboard-heart-fill::before {
  content: "\f71e"; }

.bi-clipboard-heart::before {
  content: "\f71f"; }

.bi-clipboard-minus-fill::before {
  content: "\f720"; }

.bi-clipboard-plus-fill::before {
  content: "\f721"; }

.bi-clipboard-pulse::before {
  content: "\f722"; }

.bi-clipboard-x-fill::before {
  content: "\f723"; }

.bi-clipboard2-check-fill::before {
  content: "\f724"; }

.bi-clipboard2-check::before {
  content: "\f725"; }

.bi-clipboard2-data-fill::before {
  content: "\f726"; }

.bi-clipboard2-data::before {
  content: "\f727"; }

.bi-clipboard2-fill::before {
  content: "\f728"; }

.bi-clipboard2-heart-fill::before {
  content: "\f729"; }

.bi-clipboard2-heart::before {
  content: "\f72a"; }

.bi-clipboard2-minus-fill::before {
  content: "\f72b"; }

.bi-clipboard2-minus::before {
  content: "\f72c"; }

.bi-clipboard2-plus-fill::before {
  content: "\f72d"; }

.bi-clipboard2-plus::before {
  content: "\f72e"; }

.bi-clipboard2-pulse-fill::before {
  content: "\f72f"; }

.bi-clipboard2-pulse::before {
  content: "\f730"; }

.bi-clipboard2-x-fill::before {
  content: "\f731"; }

.bi-clipboard2-x::before {
  content: "\f732"; }

.bi-clipboard2::before {
  content: "\f733"; }

.bi-emoji-kiss-fill::before {
  content: "\f734"; }

.bi-emoji-kiss::before {
  content: "\f735"; }

.bi-envelope-heart-fill::before {
  content: "\f736"; }

.bi-envelope-heart::before {
  content: "\f737"; }

.bi-envelope-open-heart-fill::before {
  content: "\f738"; }

.bi-envelope-open-heart::before {
  content: "\f739"; }

.bi-envelope-paper-fill::before {
  content: "\f73a"; }

.bi-envelope-paper-heart-fill::before {
  content: "\f73b"; }

.bi-envelope-paper-heart::before {
  content: "\f73c"; }

.bi-envelope-paper::before {
  content: "\f73d"; }

.bi-filetype-aac::before {
  content: "\f73e"; }

.bi-filetype-ai::before {
  content: "\f73f"; }

.bi-filetype-bmp::before {
  content: "\f740"; }

.bi-filetype-cs::before {
  content: "\f741"; }

.bi-filetype-css::before {
  content: "\f742"; }

.bi-filetype-csv::before {
  content: "\f743"; }

.bi-filetype-doc::before {
  content: "\f744"; }

.bi-filetype-docx::before {
  content: "\f745"; }

.bi-filetype-exe::before {
  content: "\f746"; }

.bi-filetype-gif::before {
  content: "\f747"; }

.bi-filetype-heic::before {
  content: "\f748"; }

.bi-filetype-html::before {
  content: "\f749"; }

.bi-filetype-java::before {
  content: "\f74a"; }

.bi-filetype-jpg::before {
  content: "\f74b"; }

.bi-filetype-js::before {
  content: "\f74c"; }

.bi-filetype-jsx::before {
  content: "\f74d"; }

.bi-filetype-key::before {
  content: "\f74e"; }

.bi-filetype-m4p::before {
  content: "\f74f"; }

.bi-filetype-md::before {
  content: "\f750"; }

.bi-filetype-mdx::before {
  content: "\f751"; }

.bi-filetype-mov::before {
  content: "\f752"; }

.bi-filetype-mp3::before {
  content: "\f753"; }

.bi-filetype-mp4::before {
  content: "\f754"; }

.bi-filetype-otf::before {
  content: "\f755"; }

.bi-filetype-pdf::before {
  content: "\f756"; }

.bi-filetype-php::before {
  content: "\f757"; }

.bi-filetype-png::before {
  content: "\f758"; }

.bi-filetype-ppt::before {
  content: "\f75a"; }

.bi-filetype-psd::before {
  content: "\f75b"; }

.bi-filetype-py::before {
  content: "\f75c"; }

.bi-filetype-raw::before {
  content: "\f75d"; }

.bi-filetype-rb::before {
  content: "\f75e"; }

.bi-filetype-sass::before {
  content: "\f75f"; }

.bi-filetype-scss::before {
  content: "\f760"; }

.bi-filetype-sh::before {
  content: "\f761"; }

.bi-filetype-svg::before {
  content: "\f762"; }

.bi-filetype-tiff::before {
  content: "\f763"; }

.bi-filetype-tsx::before {
  content: "\f764"; }

.bi-filetype-ttf::before {
  content: "\f765"; }

.bi-filetype-txt::before {
  content: "\f766"; }

.bi-filetype-wav::before {
  content: "\f767"; }

.bi-filetype-woff::before {
  content: "\f768"; }

.bi-filetype-xls::before {
  content: "\f76a"; }

.bi-filetype-xml::before {
  content: "\f76b"; }

.bi-filetype-yml::before {
  content: "\f76c"; }

.bi-heart-arrow::before {
  content: "\f76d"; }

.bi-heart-pulse-fill::before {
  content: "\f76e"; }

.bi-heart-pulse::before {
  content: "\f76f"; }

.bi-heartbreak-fill::before {
  content: "\f770"; }

.bi-heartbreak::before {
  content: "\f771"; }

.bi-hearts::before {
  content: "\f772"; }

.bi-hospital-fill::before {
  content: "\f773"; }

.bi-hospital::before {
  content: "\f774"; }

.bi-house-heart-fill::before {
  content: "\f775"; }

.bi-house-heart::before {
  content: "\f776"; }

.bi-incognito::before {
  content: "\f777"; }

.bi-magnet-fill::before {
  content: "\f778"; }

.bi-magnet::before {
  content: "\f779"; }

.bi-person-heart::before {
  content: "\f77a"; }

.bi-person-hearts::before {
  content: "\f77b"; }

.bi-phone-flip::before {
  content: "\f77c"; }

.bi-plugin::before {
  content: "\f77d"; }

.bi-postage-fill::before {
  content: "\f77e"; }

.bi-postage-heart-fill::before {
  content: "\f77f"; }

.bi-postage-heart::before {
  content: "\f780"; }

.bi-postage::before {
  content: "\f781"; }

.bi-postcard-fill::before {
  content: "\f782"; }

.bi-postcard-heart-fill::before {
  content: "\f783"; }

.bi-postcard-heart::before {
  content: "\f784"; }

.bi-postcard::before {
  content: "\f785"; }

.bi-search-heart-fill::before {
  content: "\f786"; }

.bi-search-heart::before {
  content: "\f787"; }

.bi-sliders2-vertical::before {
  content: "\f788"; }

.bi-sliders2::before {
  content: "\f789"; }

.bi-trash3-fill::before {
  content: "\f78a"; }

.bi-trash3::before {
  content: "\f78b"; }

.bi-valentine::before {
  content: "\f78c"; }

.bi-valentine2::before {
  content: "\f78d"; }

.bi-wrench-adjustable-circle-fill::before {
  content: "\f78e"; }

.bi-wrench-adjustable-circle::before {
  content: "\f78f"; }

.bi-wrench-adjustable::before {
  content: "\f790"; }

.bi-filetype-json::before {
  content: "\f791"; }

.bi-filetype-pptx::before {
  content: "\f792"; }

.bi-filetype-xlsx::before {
  content: "\f793"; }

.bi-1-circle-fill::before {
  content: "\f796"; }

.bi-1-circle::before {
  content: "\f797"; }

.bi-1-square-fill::before {
  content: "\f798"; }

.bi-1-square::before {
  content: "\f799"; }

.bi-2-circle-fill::before {
  content: "\f79c"; }

.bi-2-circle::before {
  content: "\f79d"; }

.bi-2-square-fill::before {
  content: "\f79e"; }

.bi-2-square::before {
  content: "\f79f"; }

.bi-3-circle-fill::before {
  content: "\f7a2"; }

.bi-3-circle::before {
  content: "\f7a3"; }

.bi-3-square-fill::before {
  content: "\f7a4"; }

.bi-3-square::before {
  content: "\f7a5"; }

.bi-4-circle-fill::before {
  content: "\f7a8"; }

.bi-4-circle::before {
  content: "\f7a9"; }

.bi-4-square-fill::before {
  content: "\f7aa"; }

.bi-4-square::before {
  content: "\f7ab"; }

.bi-5-circle-fill::before {
  content: "\f7ae"; }

.bi-5-circle::before {
  content: "\f7af"; }

.bi-5-square-fill::before {
  content: "\f7b0"; }

.bi-5-square::before {
  content: "\f7b1"; }

.bi-6-circle-fill::before {
  content: "\f7b4"; }

.bi-6-circle::before {
  content: "\f7b5"; }

.bi-6-square-fill::before {
  content: "\f7b6"; }

.bi-6-square::before {
  content: "\f7b7"; }

.bi-7-circle-fill::before {
  content: "\f7ba"; }

.bi-7-circle::before {
  content: "\f7bb"; }

.bi-7-square-fill::before {
  content: "\f7bc"; }

.bi-7-square::before {
  content: "\f7bd"; }

.bi-8-circle-fill::before {
  content: "\f7c0"; }

.bi-8-circle::before {
  content: "\f7c1"; }

.bi-8-square-fill::before {
  content: "\f7c2"; }

.bi-8-square::before {
  content: "\f7c3"; }

.bi-9-circle-fill::before {
  content: "\f7c6"; }

.bi-9-circle::before {
  content: "\f7c7"; }

.bi-9-square-fill::before {
  content: "\f7c8"; }

.bi-9-square::before {
  content: "\f7c9"; }

.bi-airplane-engines-fill::before {
  content: "\f7ca"; }

.bi-airplane-engines::before {
  content: "\f7cb"; }

.bi-airplane-fill::before {
  content: "\f7cc"; }

.bi-airplane::before {
  content: "\f7cd"; }

.bi-alexa::before {
  content: "\f7ce"; }

.bi-alipay::before {
  content: "\f7cf"; }

.bi-android::before {
  content: "\f7d0"; }

.bi-android2::before {
  content: "\f7d1"; }

.bi-box-fill::before {
  content: "\f7d2"; }

.bi-box-seam-fill::before {
  content: "\f7d3"; }

.bi-browser-chrome::before {
  content: "\f7d4"; }

.bi-browser-edge::before {
  content: "\f7d5"; }

.bi-browser-firefox::before {
  content: "\f7d6"; }

.bi-browser-safari::before {
  content: "\f7d7"; }

.bi-c-circle-fill::before {
  content: "\f7da"; }

.bi-c-circle::before {
  content: "\f7db"; }

.bi-c-square-fill::before {
  content: "\f7dc"; }

.bi-c-square::before {
  content: "\f7dd"; }

.bi-capsule-pill::before {
  content: "\f7de"; }

.bi-capsule::before {
  content: "\f7df"; }

.bi-car-front-fill::before {
  content: "\f7e0"; }

.bi-car-front::before {
  content: "\f7e1"; }

.bi-cassette-fill::before {
  content: "\f7e2"; }

.bi-cassette::before {
  content: "\f7e3"; }

.bi-cc-circle-fill::before {
  content: "\f7e6"; }

.bi-cc-circle::before {
  content: "\f7e7"; }

.bi-cc-square-fill::before {
  content: "\f7e8"; }

.bi-cc-square::before {
  content: "\f7e9"; }

.bi-cup-hot-fill::before {
  content: "\f7ea"; }

.bi-cup-hot::before {
  content: "\f7eb"; }

.bi-currency-rupee::before {
  content: "\f7ec"; }

.bi-dropbox::before {
  content: "\f7ed"; }

.bi-escape::before {
  content: "\f7ee"; }

.bi-fast-forward-btn-fill::before {
  content: "\f7ef"; }

.bi-fast-forward-btn::before {
  content: "\f7f0"; }

.bi-fast-forward-circle-fill::before {
  content: "\f7f1"; }

.bi-fast-forward-circle::before {
  content: "\f7f2"; }

.bi-fast-forward-fill::before {
  content: "\f7f3"; }

.bi-fast-forward::before {
  content: "\f7f4"; }

.bi-filetype-sql::before {
  content: "\f7f5"; }

.bi-fire::before {
  content: "\f7f6"; }

.bi-google-play::before {
  content: "\f7f7"; }

.bi-h-circle-fill::before {
  content: "\f7fa"; }

.bi-h-circle::before {
  content: "\f7fb"; }

.bi-h-square-fill::before {
  content: "\f7fc"; }

.bi-h-square::before {
  content: "\f7fd"; }

.bi-indent::before {
  content: "\f7fe"; }

.bi-lungs-fill::before {
  content: "\f7ff"; }

.bi-lungs::before {
  content: "\f800"; }

.bi-microsoft-teams::before {
  content: "\f801"; }

.bi-p-circle-fill::before {
  content: "\f804"; }

.bi-p-circle::before {
  content: "\f805"; }

.bi-p-square-fill::before {
  content: "\f806"; }

.bi-p-square::before {
  content: "\f807"; }

.bi-pass-fill::before {
  content: "\f808"; }

.bi-pass::before {
  content: "\f809"; }

.bi-prescription::before {
  content: "\f80a"; }

.bi-prescription2::before {
  content: "\f80b"; }

.bi-r-circle-fill::before {
  content: "\f80e"; }

.bi-r-circle::before {
  content: "\f80f"; }

.bi-r-square-fill::before {
  content: "\f810"; }

.bi-r-square::before {
  content: "\f811"; }

.bi-repeat::before {
  content: "\f813"; }

.bi-rewind-btn-fill::before {
  content: "\f814"; }

.bi-rewind-btn::before {
  content: "\f815"; }

.bi-rewind-circle-fill::before {
  content: "\f816"; }

.bi-rewind-circle::before {
  content: "\f817"; }

.bi-rewind-fill::before {
  content: "\f818"; }

.bi-rewind::before {
  content: "\f819"; }

.bi-train-freight-front-fill::before {
  content: "\f81a"; }

.bi-train-freight-front::before {
  content: "\f81b"; }

.bi-train-front-fill::before {
  content: "\f81c"; }

.bi-train-front::before {
  content: "\f81d"; }

.bi-train-lightrail-front-fill::before {
  content: "\f81e"; }

.bi-train-lightrail-front::before {
  content: "\f81f"; }

.bi-truck-front-fill::before {
  content: "\f820"; }

.bi-truck-front::before {
  content: "\f821"; }

.bi-ubuntu::before {
  content: "\f822"; }

.bi-unindent::before {
  content: "\f823"; }

.bi-unity::before {
  content: "\f824"; }

.bi-universal-access-circle::before {
  content: "\f825"; }

.bi-universal-access::before {
  content: "\f826"; }

.bi-virus::before {
  content: "\f827"; }

.bi-virus2::before {
  content: "\f828"; }

.bi-wechat::before {
  content: "\f829"; }

.bi-yelp::before {
  content: "\f82a"; }

.bi-sign-stop-fill::before {
  content: "\f82b"; }

.bi-sign-stop-lights-fill::before {
  content: "\f82c"; }

.bi-sign-stop-lights::before {
  content: "\f82d"; }

.bi-sign-stop::before {
  content: "\f82e"; }

.bi-sign-turn-left-fill::before {
  content: "\f82f"; }

.bi-sign-turn-left::before {
  content: "\f830"; }

.bi-sign-turn-right-fill::before {
  content: "\f831"; }

.bi-sign-turn-right::before {
  content: "\f832"; }

.bi-sign-turn-slight-left-fill::before {
  content: "\f833"; }

.bi-sign-turn-slight-left::before {
  content: "\f834"; }

.bi-sign-turn-slight-right-fill::before {
  content: "\f835"; }

.bi-sign-turn-slight-right::before {
  content: "\f836"; }

.bi-sign-yield-fill::before {
  content: "\f837"; }

.bi-sign-yield::before {
  content: "\f838"; }

.bi-ev-station-fill::before {
  content: "\f839"; }

.bi-ev-station::before {
  content: "\f83a"; }

.bi-fuel-pump-diesel-fill::before {
  content: "\f83b"; }

.bi-fuel-pump-diesel::before {
  content: "\f83c"; }

.bi-fuel-pump-fill::before {
  content: "\f83d"; }

.bi-fuel-pump::before {
  content: "\f83e"; }

.bi-0-circle-fill::before {
  content: "\f83f"; }

.bi-0-circle::before {
  content: "\f840"; }

.bi-0-square-fill::before {
  content: "\f841"; }

.bi-0-square::before {
  content: "\f842"; }

.bi-rocket-fill::before {
  content: "\f843"; }

.bi-rocket-takeoff-fill::before {
  content: "\f844"; }

.bi-rocket-takeoff::before {
  content: "\f845"; }

.bi-rocket::before {
  content: "\f846"; }

.bi-stripe::before {
  content: "\f847"; }

.bi-subscript::before {
  content: "\f848"; }

.bi-superscript::before {
  content: "\f849"; }

.bi-trello::before {
  content: "\f84a"; }

.bi-envelope-at-fill::before {
  content: "\f84b"; }

.bi-envelope-at::before {
  content: "\f84c"; }

.bi-regex::before {
  content: "\f84d"; }

.bi-text-wrap::before {
  content: "\f84e"; }

.bi-sign-dead-end-fill::before {
  content: "\f84f"; }

.bi-sign-dead-end::before {
  content: "\f850"; }

.bi-sign-do-not-enter-fill::before {
  content: "\f851"; }

.bi-sign-do-not-enter::before {
  content: "\f852"; }

.bi-sign-intersection-fill::before {
  content: "\f853"; }

.bi-sign-intersection-side-fill::before {
  content: "\f854"; }

.bi-sign-intersection-side::before {
  content: "\f855"; }

.bi-sign-intersection-t-fill::before {
  content: "\f856"; }

.bi-sign-intersection-t::before {
  content: "\f857"; }

.bi-sign-intersection-y-fill::before {
  content: "\f858"; }

.bi-sign-intersection-y::before {
  content: "\f859"; }

.bi-sign-intersection::before {
  content: "\f85a"; }

.bi-sign-merge-left-fill::before {
  content: "\f85b"; }

.bi-sign-merge-left::before {
  content: "\f85c"; }

.bi-sign-merge-right-fill::before {
  content: "\f85d"; }

.bi-sign-merge-right::before {
  content: "\f85e"; }

.bi-sign-no-left-turn-fill::before {
  content: "\f85f"; }

.bi-sign-no-left-turn::before {
  content: "\f860"; }

.bi-sign-no-parking-fill::before {
  content: "\f861"; }

.bi-sign-no-parking::before {
  content: "\f862"; }

.bi-sign-no-right-turn-fill::before {
  content: "\f863"; }

.bi-sign-no-right-turn::before {
  content: "\f864"; }

.bi-sign-railroad-fill::before {
  content: "\f865"; }

.bi-sign-railroad::before {
  content: "\f866"; }

.bi-building-add::before {
  content: "\f867"; }

.bi-building-check::before {
  content: "\f868"; }

.bi-building-dash::before {
  content: "\f869"; }

.bi-building-down::before {
  content: "\f86a"; }

.bi-building-exclamation::before {
  content: "\f86b"; }

.bi-building-fill-add::before {
  content: "\f86c"; }

.bi-building-fill-check::before {
  content: "\f86d"; }

.bi-building-fill-dash::before {
  content: "\f86e"; }

.bi-building-fill-down::before {
  content: "\f86f"; }

.bi-building-fill-exclamation::before {
  content: "\f870"; }

.bi-building-fill-gear::before {
  content: "\f871"; }

.bi-building-fill-lock::before {
  content: "\f872"; }

.bi-building-fill-slash::before {
  content: "\f873"; }

.bi-building-fill-up::before {
  content: "\f874"; }

.bi-building-fill-x::before {
  content: "\f875"; }

.bi-building-fill::before {
  content: "\f876"; }

.bi-building-gear::before {
  content: "\f877"; }

.bi-building-lock::before {
  content: "\f878"; }

.bi-building-slash::before {
  content: "\f879"; }

.bi-building-up::before {
  content: "\f87a"; }

.bi-building-x::before {
  content: "\f87b"; }

.bi-buildings-fill::before {
  content: "\f87c"; }

.bi-buildings::before {
  content: "\f87d"; }

.bi-bus-front-fill::before {
  content: "\f87e"; }

.bi-bus-front::before {
  content: "\f87f"; }

.bi-ev-front-fill::before {
  content: "\f880"; }

.bi-ev-front::before {
  content: "\f881"; }

.bi-globe-americas::before {
  content: "\f882"; }

.bi-globe-asia-australia::before {
  content: "\f883"; }

.bi-globe-central-south-asia::before {
  content: "\f884"; }

.bi-globe-europe-africa::before {
  content: "\f885"; }

.bi-house-add-fill::before {
  content: "\f886"; }

.bi-house-add::before {
  content: "\f887"; }

.bi-house-check-fill::before {
  content: "\f888"; }

.bi-house-check::before {
  content: "\f889"; }

.bi-house-dash-fill::before {
  content: "\f88a"; }

.bi-house-dash::before {
  content: "\f88b"; }

.bi-house-down-fill::before {
  content: "\f88c"; }

.bi-house-down::before {
  content: "\f88d"; }

.bi-house-exclamation-fill::before {
  content: "\f88e"; }

.bi-house-exclamation::before {
  content: "\f88f"; }

.bi-house-gear-fill::before {
  content: "\f890"; }

.bi-house-gear::before {
  content: "\f891"; }

.bi-house-lock-fill::before {
  content: "\f892"; }

.bi-house-lock::before {
  content: "\f893"; }

.bi-house-slash-fill::before {
  content: "\f894"; }

.bi-house-slash::before {
  content: "\f895"; }

.bi-house-up-fill::before {
  content: "\f896"; }

.bi-house-up::before {
  content: "\f897"; }

.bi-house-x-fill::before {
  content: "\f898"; }

.bi-house-x::before {
  content: "\f899"; }

.bi-person-add::before {
  content: "\f89a"; }

.bi-person-down::before {
  content: "\f89b"; }

.bi-person-exclamation::before {
  content: "\f89c"; }

.bi-person-fill-add::before {
  content: "\f89d"; }

.bi-person-fill-check::before {
  content: "\f89e"; }

.bi-person-fill-dash::before {
  content: "\f89f"; }

.bi-person-fill-down::before {
  content: "\f8a0"; }

.bi-person-fill-exclamation::before {
  content: "\f8a1"; }

.bi-person-fill-gear::before {
  content: "\f8a2"; }

.bi-person-fill-lock::before {
  content: "\f8a3"; }

.bi-person-fill-slash::before {
  content: "\f8a4"; }

.bi-person-fill-up::before {
  content: "\f8a5"; }

.bi-person-fill-x::before {
  content: "\f8a6"; }

.bi-person-gear::before {
  content: "\f8a7"; }

.bi-person-lock::before {
  content: "\f8a8"; }

.bi-person-slash::before {
  content: "\f8a9"; }

.bi-person-up::before {
  content: "\f8aa"; }

.bi-scooter::before {
  content: "\f8ab"; }

.bi-taxi-front-fill::before {
  content: "\f8ac"; }

.bi-taxi-front::before {
  content: "\f8ad"; }

.bi-amd::before {
  content: "\f8ae"; }

.bi-database-add::before {
  content: "\f8af"; }

.bi-database-check::before {
  content: "\f8b0"; }

.bi-database-dash::before {
  content: "\f8b1"; }

.bi-database-down::before {
  content: "\f8b2"; }

.bi-database-exclamation::before {
  content: "\f8b3"; }

.bi-database-fill-add::before {
  content: "\f8b4"; }

.bi-database-fill-check::before {
  content: "\f8b5"; }

.bi-database-fill-dash::before {
  content: "\f8b6"; }

.bi-database-fill-down::before {
  content: "\f8b7"; }

.bi-database-fill-exclamation::before {
  content: "\f8b8"; }

.bi-database-fill-gear::before {
  content: "\f8b9"; }

.bi-database-fill-lock::before {
  content: "\f8ba"; }

.bi-database-fill-slash::before {
  content: "\f8bb"; }

.bi-database-fill-up::before {
  content: "\f8bc"; }

.bi-database-fill-x::before {
  content: "\f8bd"; }

.bi-database-fill::before {
  content: "\f8be"; }

.bi-database-gear::before {
  content: "\f8bf"; }

.bi-database-lock::before {
  content: "\f8c0"; }

.bi-database-slash::before {
  content: "\f8c1"; }

.bi-database-up::before {
  content: "\f8c2"; }

.bi-database-x::before {
  content: "\f8c3"; }

.bi-database::before {
  content: "\f8c4"; }

.bi-houses-fill::before {
  content: "\f8c5"; }

.bi-houses::before {
  content: "\f8c6"; }

.bi-nvidia::before {
  content: "\f8c7"; }

.bi-person-vcard-fill::before {
  content: "\f8c8"; }

.bi-person-vcard::before {
  content: "\f8c9"; }

.bi-sina-weibo::before {
  content: "\f8ca"; }

.bi-tencent-qq::before {
  content: "\f8cb"; }

.bi-wikipedia::before {
  content: "\f8cc"; }

.bounce-3 {
  animation-name: bounce-3;
  animation-timing-function: ease; }

@keyframes bounce-3 {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(-100px); }
  50% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); } }

.jump {
  animation-name: jump;
  animation-timing-function: ease; }

@keyframes jump {
  0% {
    bottom: 0; }
  30% {
    bottom: 5rem; }
  50% {
    bottom: 0; }
  100% {
    bottom: 0; } }

@keyframes road {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -100vw 0; } }

@keyframes tree {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -100vw 0; } }

@keyframes smoke {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes car {
  0% {
    transform: translateY(0.125rem); }
  50% {
    transform: translateY(-0.125rem); }
  100% {
    transform: translateY(0.125rem); } }

@keyframes timerShake {
  0% {
    transform: rotate(0); }
  30% {
    transform: rotate(0); }
  50% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0); } }

.text-primary {
  color: #C3273F; }

.text-secondary {
  color: #3184ff; }

.text-link {
  color: #3184ff; }

.btn-unstyled {
  border: 0;
  box-shadow: 0;
  padding: 0; }

.btn-webboard-create {
  border-radius: 1.125rem;
  background-color: #12b061;
  color: #ffffff; }
  .btn-webboard-create i {
    margin-right: 0.5rem; }
  .btn-webboard-create:hover, .btn-webboard-create:focus, .btn-webboard-create:active {
    border-color: #12b061 !important;
    color: #12b061 !important; }

.btn-primary {
  background-color: #C3273F;
  border-color: #C3273F; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    border-color: #C3273F !important;
    color: #C3273F !important;
    background-color: #ffffff !important; }

.btn-blue {
  background-color: #3184ff;
  border-color: #3184ff;
  color: #ffffff; }
  .btn-blue:hover, .btn-blue:active {
    background-color: #005ce4 !important; }

.btn-default {
  border-radius: 1.5rem; }

.btn-black {
  background-color: #000;
  color: #ffffff !important; }
  .btn-black:hover {
    background-color: rgba(0, 0, 0, 0.8); }

.btn-arrow {
  display: flex;
  align-items: center;
  padding: .5rem 1rem; }
  .btn-arrow .text {
    margin-right: .25rem; }
  .btn-arrow .icon {
    line-height: .5;
    transition: all .3s; }
  .btn-arrow:hover .icon {
    transform: translate(2px, -2px);
    transition: all .3s; }

/*===================================*
  START BANER STYLE
*===================================*/
.main-banner.banner-home {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 0;
  margin-top: 1.5rem; }
  @media only screen and (min-width: 992px) {
    .main-banner.banner-home {
      padding: 0 3rem; } }
  .main-banner.banner-home .img-bg,
  .main-banner.banner-home .video-banner {
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9; }
  .main-banner.banner-home .banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-direction: column;
    height: 35rem;
    padding: 0 1.5rem;
    text-align: center;
    color: initial;
    overflow: hidden;
    position: relative; }
    @media only screen and (min-width: 992px) {
      .main-banner.banner-home .banner-content {
        border-radius: 2.5rem; } }
  .main-banner.banner-home .inner-wrapper {
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center; }
  .main-banner.banner-home .title {
    font-weight: 700;
    margin-bottom: 0;
    color: #ffffff; }
    .main-banner.banner-home .title.text-sm {
      font-size: 1rem; }
    .main-banner.banner-home .title.text-medium {
      font-size: 1.875rem; }
    .main-banner.banner-home .title.text-large {
      font-size: 2rem; }
    @media only screen and (min-width: 768px) {
      .main-banner.banner-home .title.text-sm {
        font-size: 1.5rem; }
      .main-banner.banner-home .title.text-medium {
        font-size: 2rem; }
      .main-banner.banner-home .title.text-large {
        font-size: 2.25rem; } }

/*===================================*
  END BANER STYLE
*===================================*/
.breadcrumb-topic {
  border: 1px solid #eceae9;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem; }

.breadcrumb-item {
  font-size: .875rem; }
  .breadcrumb-item a {
    text-decoration: none;
    color: #C3273F !important; }

.breadcrumb__ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: wrap; }

.breadcrumb__link {
  display: flex;
  text-overflow: ellipsis;
  font-size: .875rem; }
  .breadcrumb__link:after {
    content: " > ";
    display: block;
    margin: 0 0.25rem;
    color: #A9A9A9; }
  .breadcrumb__link:last-child::after {
    display: none; }
  .breadcrumb__link.active {
    color: #C3273F;
    font-weight: 500; }
  .breadcrumb__link a {
    text-decoration: none;
    color: #A9A9A9; }
    .breadcrumb__link a:hover {
      color: #C3273F; }
  .breadcrumb__link .icon-home {
    color: #2b2b2b; }

@media only screen and (min-width: 1200px) {
  .breadcrumb__link:last-child span {
    width: 500px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; } }

.dropdown .dropdown-item {
  font-weight: 600;
  font-size: .875rem; }

.dropdown .dropdown-menu {
  border: 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }

/*===================================*
PAGINATION STYLE
*===================================*/
.pagination {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-flow: column; }
  .pagination .page-numbers {
    color: #2b2b2b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid #2b2b2b;
    padding: 0.45rem 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 1rem;
    width: 2rem;
    height: 2rem; }
    .pagination .page-numbers i {
      font-size: 1.25rem;
      font-weight: 600;
      width: 1.5rem;
      height: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: center; }
    .pagination .page-numbers:hover, .pagination .page-numbers.active {
      background-color: #C3273F;
      border: 1px solid #C3273F;
      color: #ffffff; }
      .pagination .page-numbers:hover .icon-page::before, .pagination .page-numbers.active .icon-page::before {
        font-size: 1rem; }
  .pagination .next,
  .pagination .prev,
  .pagination .first,
  .pagination .last {
    font-size: 1rem;
    color: #C3273F;
    width: 2.5rem;
    height: 2.5rem;
    border: 0; }
    .pagination .next:hover,
    .pagination .prev:hover,
    .pagination .first:hover,
    .pagination .last:hover {
      color: #C3273F;
      background-color: transparent;
      border: none; }
      .pagination .next:hover svg path,
      .pagination .prev:hover svg path,
      .pagination .first:hover svg path,
      .pagination .last:hover svg path {
        stroke: #C3273F; }
    .pagination .next.disabled,
    .pagination .prev.disabled,
    .pagination .first.disabled,
    .pagination .last.disabled {
      color: #727171; }
  .pagination .entry {
    width: 100%;
    margin-bottom: 1rem; }
  .pagination .page-ppp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.875rem;
    margin: 2rem auto 0; }
    .pagination .page-ppp .bootstrap-select {
      width: auto !important;
      margin: 0 0.5rem; }
      .pagination .page-ppp .bootstrap-select .dropdown-toggle {
        background-color: #ffffff;
        color: #2b2b2b;
        font-size: 0.875rem;
        border-radius: 0.5rem;
        padding: 0.375rem 0.5rem;
        border: 0;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
        .pagination .page-ppp .bootstrap-select .dropdown-toggle:after {
          content: "\F004";
          font-family: "fontello";
          border: 0;
          color: #2b2b2b;
          font-size: 0.45rem;
          margin-left: 4px;
          margin-top: 2px; }
        .pagination .page-ppp .bootstrap-select .dropdown-toggle:focus {
          outline: none !important; }
        .pagination .page-ppp .bootstrap-select .dropdown-toggle.show::after {
          content: "\F005"; }
      .pagination .page-ppp .bootstrap-select .dropdown-item.active, .pagination .page-ppp .bootstrap-select .dropdown-item:hover {
        color: #ffffff;
        background-color: #C3273F; }

.accordion + .pagination {
  margin-top: 2.75rem; }
  .accordion + .pagination .pagination-wrapper {
    width: 100%;
    justify-content: center; }
  .accordion + .pagination .page-ppp {
    margin: 1.5rem auto 0; }

@media only screen and (min-width: 992px) {
  .pagination {
    flex-flow: row; }
    .pagination .page-ppp {
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 0;
      margin-top: 0 !important;
      z-index: 1; }
    .pagination .entry {
      width: auto;
      margin-bottom: 0; }
    .pagination.side-bar .pagination-wrapper {
      padding: 0;
      justify-content: start; } }

@media only screen and (min-width: 1200px) {
  .pagination.side-bar .pagination-wrapper {
    justify-content: center; } }

/*===================================*
PAGINATION STYLE
*===================================*/
/*===================================*
 START CARD COMPONENT
*===================================*/
.article-box .image {
  position: relative;
  overflow: hidden; }
  .article-box .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all .3s;
    transform: scale(1.05); }
  .article-box .image:after {
    content: "";
    display: block;
    padding-top: 60%; }
  .article-box .image .category {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 10.625rem;
    padding: .75rem;
    font-size: 1.125rem;
    text-align: center;
    background-color: var(--bgLightPurple);
    z-index: 2;
    border-top-right-radius: .15rem; }

.article-box .content {
  padding: 0  1.125rem 1.25rem;
  background-color: var(--bs-white); }
  .article-box .content .category {
    position: relative;
    padding: .35rem .75rem;
    font-size: 1.125rem;
    text-align: center;
    background-color: var(--bgLightPurple);
    z-index: 2;
    border-radius: .15rem;
    border-top-left-radius: 0;
    margin-left: -1.125rem;
    margin-bottom: .875rem;
    min-height: 2.7rem;
    display: inline-block;
    color: var(--textBlack);
    min-width: 7rem; }
  .article-box .content h4 {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--textBlack);
    display: -webkit-box;
    height: 3.15rem;
    font-size: 1.125rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }
  .article-box .content p {
    color: var(--textBlack);
    display: -webkit-box;
    height: 2.1rem;
    font-size: 0.75rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }
  .article-box .content .detail {
    font-size: .875rem;
    color: var(--textPurple); }
    .article-box .content .detail .logo {
      background-color: var(--bgLightBlue2);
      width: 1.375rem;
      height: 1.375rem;
      border-radius: 50%;
      padding: 3px;
      display: flex;
      align-items: center;
      justify-content: center; }
    .article-box .content .detail .text {
      width: calc(100% - 1.375rem); }
    .article-box .content .detail svg path {
      fill: var(--textPurple) !important; }
    .article-box .content .detail-text-grey {
      color: var(--textGrayLight2); }

.article-box-poster .image {
  position: relative; }
  .article-box-poster .image:after {
    content: "";
    display: block;
    padding-top: 110%; }
  .article-box-poster .image .category {
    position: absolute;
    bottom: 0;
    left: 0;
    color: var(--textBlack); }

.article-box-poster .content {
  padding-top: 1.125rem; }

.article-box-button {
  background-color: var(--bs-white);
  box-shadow: 0px 0px 10px 0px #9DB0CB26;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  color: var(--textBlack);
  margin: 0 auto;
  border-radius: 5px;
  height: 100%; }
  .article-box-button .image {
    width: 2rem;
    height: 2rem; }
    .article-box-button .image img {
      transform: scale(1) !important;
      border-radius: 50%; }
    .article-box-button .image::after {
      display: none; }
  .article-box-button .content {
    padding: 0;
    padding-left: 1rem;
    text-align: left;
    width: calc(100% - 2rem); }
    .article-box-button .content h4 {
      font-weight: 400;
      display: -webkit-box;
      height: 2.8rem;
      font-size: 1rem;
      line-height: 1.4;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0; }
  .article-box-button:hover {
    box-shadow: 0px 0px 10px 2px #90a2bc48; }

.article-box-event .image:after {
  padding-top: 45%; }

.article-box-event .content {
  border-radius: .5rem 0 .5rem 0;
  position: relative;
  top: -1rem;
  z-index: 1;
  padding-top: 0.5rem; }
  .article-box-event .content .date {
    color: var(--textWhite);
    display: inline-flex;
    align-items: center;
    border-radius: .35rem;
    background-color: var(--bgLightBlue);
    padding: 0.25rem;
    margin-bottom: 1rem;
    font-size: .75rem; }
    .article-box-event .content .date i {
      font-size: 1rem; }
  .article-box-event .content .detail p {
    color: var(--textGrayLight2);
    height: auto;
    font-size: .875rem; }
    .article-box-event .content .detail p span {
      color: var(--bgLightBlue); }

.article-box-search {
  display: flex; }
  .article-box-search .image {
    width: 8rem;
    border-radius: .65rem; }
  .article-box-search .content {
    width: calc(100% - 8rem);
    padding: 0;
    padding-left: .75rem;
    display: flex;
    flex-flow: column; }
    .article-box-search .content-body {
      flex: 1; }
      .article-box-search .content-body h4 {
        display: -webkit-box;
        height: 2.8rem;
        font-size: 1rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; }
      .article-box-search .content-body p {
        margin-bottom: 0.75rem; }
      .article-box-search .content-body .category-list {
        position: relative;
        display: flex;
        list-style-type: none;
        padding-left: 0; }
        .article-box-search .content-body .category-list li {
          background-color: var(--bgLightPurple);
          font-size: .75rem;
          padding: .25rem .75rem;
          border-radius: .25rem; }
    .article-box-search .content-footer {
      font-size: .75rem;
      color: var(--textBlack); }
  .article-box-search:hover .content p {
    color: var(--textPurple); }
  .article-box-search:hover .content-footer {
    color: var(--textPurple); }

.article-box-title h4 {
  color: var(--textPurple2); }
  @media only screen and (min-width: 768px) {
    .article-box-title h4 {
      font-size: 1.25rem; } }
  @media only screen and (min-width: 992px) {
    .article-box-title h4 {
      font-size: 1.3755rem; } }

.article-box-title .file-item {
  box-shadow: 0px 2px 12px 0px #0054A440; }
  .article-box-title .file-item .title {
    color: var(--textPurple); }
    @media only screen and (min-width: 1200px) {
      .article-box-title .file-item .title {
        font-size: 1.25rem; } }
  .article-box-title .file-item a {
    color: inherit;
    text-decoration: underline;
    font-size: .875rem;
    color: var(--textPurple); }
    .article-box-title .file-item a:hover {
      color: var(--textLightBlue); }

.article-box:hover .image img {
  transform: scale(1.1);
  transition: all .3s; }

.article-box:hover .content h4 {
  color: var(--textPurple); }

.article-box-webboard {
  background-color: var(--bs-white);
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0px 2px 12px 0px #0054A440; }
  @media only screen and (min-width: 992px) {
    .article-box-webboard {
      padding: 1.25rem 2.5rem; } }
  .article-box-webboard h4 {
    color: var(--textPurple2); }
  .article-box-webboard p {
    font-size: .925rem;
    color: var(--textBlack); }
  .article-box-webboard .detail {
    color: var(--textGrayLight2);
    font-size: .875rem; }
    .article-box-webboard .detail-item {
      line-height: 1; }
  .article-box-webboard:hover {
    box-shadow: 0px 2px 14px 2px #01458540; }
    .article-box-webboard:hover h4 {
      color: var(--textPurple2Hover); }

/*===================================*
  END  CARD COMPONENT
*===================================*/
.table thead {
  background-color: #C3273F;
  color: #ffffff; }
  .table thead th {
    font-weight: 400; }

.table tr {
  border-color: transparent; }

/*===================================*
  03.START CARD COMPONENT
*===================================*/
.card {
  border: 0; }
  .card-template {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid #eceae9;
    background-color: #ffffff;
    margin: 1rem 0; }
    .card-template .card-image {
      position: relative;
      overflow: hidden; }
      .card-template .card-image img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
        transition: all 0.3s ease; }
      .card-template .card-image::after {
        content: "";
        display: block; }
      .card-template .card-image::before {
        content: "";
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45.61%, #000000 100%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; }
    .card-template .card-body {
      padding: 1rem;
      width: 100%; }
      .card-template .card-body .title {
        display: -webkit-box;
        height: 2.8rem;
        font-size: 1rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        margin-bottom: 1.25rem; }
        @media only screen and (min-width: 768px) {
          .card-template .card-body .title {
            display: -webkit-box;
            height: 3.5rem;
            font-size: 1.25rem;
            line-height: 1.4;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; } }
      .card-template .card-body .des {
        display: -webkit-box;
        height: 2.8rem;
        font-size: 1rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 1.25rem; }
        @media only screen and (min-width: 768px) {
          .card-template .card-body .des {
            margin-bottom: 0; } }
      .card-template .card-body .btn-primary {
        padding: 0.25rem 0.875rem; }
    .card-template .readmore-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #C3273F;
      color: #ffffff;
      flex: 0 0 36px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
      .card-template .readmore-icon i::before {
        font-size: 0.875rem; }
      @media only screen and (min-width: 768px) {
        .card-template .readmore-icon {
          width: 46px;
          height: 46px;
          flex: 0 0 46px; }
          .card-template .readmore-icon i::before {
            font-size: 1rem; } }
    .card-template .date,
    .card-template .viewer-post {
      font-size: 0.75rem;
      font-weight: 600;
      color: #b7b7b7; }
    .card-template .card-badge {
      position: absolute;
      top: 1rem;
      left: 0;
      padding-right: 1rem;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 2; }
      .card-template .card-badge .date {
        font-size: 0.75rem;
        font-weight: 600;
        color: #2b2b2b;
        background: linear-gradient(92.89deg, #e6f0fe 26.84%, #e8f1ff 41.31%, #ffeded 91.47%);
        padding: 0.5rem 1rem;
        border-top-right-radius: 4rem;
        border-bottom-right-radius: 4rem; }
      .card-template .card-badge .status {
        position: unset; }
    .card-template .status {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 0.875rem;
      color: #ffffff;
      z-index: 1;
      background: #12b061;
      padding: 0.25rem 0.75rem 0.125rem;
      border-radius: 4rem; }
    .card-template:hover .card-body .title {
      color: #C3273F; }
    .card-template:hover .card-image img {
      transform: scale(1.1);
      transition: all 0.3s ease; }
    .card-template-icon:hover .readmore-icon {
      transform: translate(15%, -15%);
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
    .card-template-highlight1 .card-image:after {
      padding-top: 64%; }
    .card-template-highlight1 .card-body .title {
      margin-bottom: 0.75rem; }
    .card-template-highlight1 .card-body .des {
      display: -webkit-box;
      height: 1.4rem;
      font-size: 1rem;
      line-height: 1.4;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
    .card-template-highlight1-side {
      margin: 1rem 0 3.5rem;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); }
      .card-template-highlight1-side .card-image {
        overflow: hidden; }
        .card-template-highlight1-side .card-image:after {
          padding-top: 62%; }
      .card-template-highlight1-side .card-body .title {
        display: -webkit-box;
        height: 1.4rem;
        font-size: 1rem;
        line-height: 1.4;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.75rem; }
        @media only screen and (min-width: 768px) {
          .card-template-highlight1-side .card-body .title {
            display: -webkit-box;
            height: 1.575rem;
            font-size: 1.125rem;
            line-height: 1.4;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; } }
      @media only screen and (min-width: 768px) {
        .card-template-highlight1-side {
          margin: 1rem 0; }
          .card-template-highlight1-side a {
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 0.75rem;
            padding: 1rem;
            border-radius: 1rem; }
          .card-template-highlight1-side .card-image {
            flex: 0 0 140px;
            border-radius: 1rem; }
            .card-template-highlight1-side .card-image:after {
              padding-top: 120px; }
          .card-template-highlight1-side .card-body {
            padding: 0; } }
      .card-template-highlight1-side .status {
        font-size: 0.625rem; }
    .card-template-highlight-content .card-body .title {
      margin-bottom: 0.75rem; }
    .card-template-highlight-content .card-body .des {
      display: -webkit-box;
      height: 1.4rem;
      font-size: 1rem;
      line-height: 1.4;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
      @media only screen and (min-width: 768px) {
        .card-template-highlight-content .card-body .des {
          margin-bottom: 1.25rem; } }
    .card-template-highlight2 {
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); }
      @media only screen and (min-width: 768px) {
        .card-template-highlight2 {
          margin: 1rem 0; }
          .card-template-highlight2 a {
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 0.75rem;
            padding: 1rem;
            border-radius: 1rem; }
          .card-template-highlight2 .card-image {
            flex: 0 0 50%;
            border-radius: 1rem;
            overflow: hidden; }
            .card-template-highlight2 .card-image:after {
              padding-top: 66%; }
          .card-template-highlight2 .card-body {
            padding: 0; } }
    @media only screen and (min-width: 768px) and (min-width: 768px) {
      .card-template-highlight2 .card-body .des {
        margin-bottom: 1.25rem; } }
    .card-template-content1 .card-image:after {
      padding-top: 62%; }
    .card-template-content1 .viewer {
      display: flex;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #b7b7b7;
      font-size: 0.875rem; }
      @media only screen and (min-width: 768px) {
        .card-template-content1 .viewer {
          font-size: 1rem; } }
    .card-template-content2 .card-image:after {
      padding-top: 70%; }
    .card-template-content2 .card-body .content {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1.5rem; }
    .card-template-content2 .card-body .title {
      display: -webkit-box;
      height: 1.4rem;
      font-size: 1rem;
      line-height: 1.4;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0.75rem; }
      @media only screen and (min-width: 768px) {
        .card-template-content2 .card-body .title {
          display: -webkit-box;
          height: 1.75rem;
          font-size: 1.25rem;
          line-height: 1.4;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; } }
    .card-template-content3 .card-image:after {
      padding-top: 110%; }
    .card-template-content3:hover {
      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.14); }
    .card-template-content4 .card-image:after {
      padding-top: 110%; }
    .card-template-content4 .card-body .content {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1.5rem; }
    .card-template-button .card-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem; }
      .card-template-button .card-body .title {
        display: -webkit-box;
        height: 1.4rem;
        font-size: 1rem;
        line-height: 1.4;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0; }
        @media only screen and (min-width: 768px) {
          .card-template-button .card-body .title {
            display: -webkit-box;
            height: 1.75rem;
            font-size: 1.25rem;
            line-height: 1.4;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; } }
    .card-template-button:hover .readmore-icon {
      transform: translate(15%, -15%);
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
    .card-template-card {
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); }
      .card-template-card .card-body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 1rem; }
        .card-template-card .card-body .title {
          display: -webkit-box;
          height: 1.4rem;
          font-size: 1rem;
          line-height: 1.4;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 0; }
          @media only screen and (min-width: 768px) {
            .card-template-card .card-body .title {
              display: -webkit-box;
              height: 1.75rem;
              font-size: 1.25rem;
              line-height: 1.4;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis; } }
        .card-template-card .card-body .image img {
          width: 96px;
          height: 96px;
          border-radius: 100%;
          object-fit: cover;
          aspect-ratio: 1; }
      .card-template-card:hover .readmore-icon {
        transform: translate(15%, -15%);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s; }
    .card-template-title {
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); }
      .card-template-title .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem; }
        .card-template-title .card-body .title {
          display: -webkit-box;
          height: 1.4rem;
          font-size: 1rem;
          line-height: 1.4;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 0.75rem; }
          @media only screen and (min-width: 768px) {
            .card-template-title .card-body .title {
              display: -webkit-box;
              height: 1.75rem;
              font-size: 1.25rem;
              line-height: 1.4;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis; } }
        .card-template-title .card-body .icon {
          width: 3rem;
          height: 3rem;
          background: #dc0032;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
          font-size: 1.25rem;
          color: #C3273F; }
      .card-template-title .status {
        position: unset;
        font-size: .625rem; }
      .card-template-title:hover {
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.14); }
        .card-template-title:hover .readmore {
          color: #C3273F; }
    .card-template-video .card-image .icon {
      position: absolute;
      width: 3.5rem;
      height: 3.5rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      color: #2b2b2b;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
      .card-template-video .card-image .icon .icon-media {
        margin-left: 0.25rem; }
    .card-template-video .card-image::after {
      padding-top: 70%; }
    .card-template-video .card-body .title {
      display: -webkit-box;
      height: 1.4rem;
      font-size: 1rem;
      line-height: 1.4;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0; }
      @media only screen and (min-width: 768px) {
        .card-template-video .card-body .title {
          display: -webkit-box;
          height: 1.75rem;
          font-size: 1.25rem;
          line-height: 1.4;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; } }
    .card-template-video:hover {
      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.14); }
      .card-template-video:hover .card-image .icon {
        background: #C3273F;
        color: #ffffff; }
    .card-template-accordion {
      border-radius: 1rem !important;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); }
      .card-template-accordion .accordion-item {
        border: 1px solid transparent; }
      .card-template-accordion .accordion-button {
        gap: 0.75rem; }
        .card-template-accordion .accordion-button:not(.collapsed) {
          background-color: #ffffff;
          color: #C3273F;
          box-shadow: none; }
          .card-template-accordion .accordion-button:not(.collapsed)::after {
            filter: invert(10%) sepia(100%) saturate(6880%) hue-rotate(347deg) brightness(90%) contrast(97%); }
        .card-template-accordion .accordion-button:focus {
          box-shadow: none; }
        .card-template-accordion .accordion-button .title {
          display: -webkit-box;
          height: 1.4rem;
          font-size: 1rem;
          line-height: 1.4;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 0.75rem; }
          @media only screen and (min-width: 768px) {
            .card-template-accordion .accordion-button .title {
              display: -webkit-box;
              height: 1.75rem;
              font-size: 1.25rem;
              line-height: 1.4;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis; } }
        .card-template-accordion .accordion-button .readmore {
          flex: 0 0 45px;
          width: 45px; }
    .card-template-media .card-image:after {
      padding-top: 72%; }
    .card-template-media .card-body {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      color: #ffffff; }
      .card-template-media .card-body .title {
        margin-bottom: 0; }
  .card-webboard-recommend {
    display: grid;
    grid-template-columns: 6.75rem auto;
    gap: 0.75rem; }
    .card-webboard-recommend .card-img {
      width: 100%;
      overflow: hidden;
      aspect-ratio: 4/3;
      border-radius: 0.375rem;
      position: relative; }
      .card-webboard-recommend .card-img img {
        width: 100%;
        aspect-ratio: 4 / 3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .card-webboard-recommend .card-body--avatar {
      display: inline-flex;
      align-items: center;
      font-size: 0.875rem;
      border-radius: 2.25rem;
      background-color: #ffffff;
      padding-right: 0.5rem; }
      .card-webboard-recommend .card-body--avatar img {
        width: 1.75rem;
        height: 1.75rem;
        border: 3px solid #ffffff;
        border-radius: 50%;
        margin-right: 0.5rem; }
    .card-webboard-recommend .card-body--title {
      display: flex;
      font-weight: 500;
      font-size: 1rem;
      margin-bottom: 0.5rem; }
      .card-webboard-recommend .card-body--title .icon-cate {
        margin-right: 0.5rem;
        width: 1.125rem;
        height: 1.125rem;
        min-width: 1.125rem;
        min-height: 1.125rem; }
    .card-webboard-recommend .card-body--tool {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 50% 50%;
      color: #A9A9A9;
      font-size: 0.875rem; }
      .card-webboard-recommend .card-body--tool i {
        margin-right: 0.5rem;
        font-size: 1rem; }
  .card-webboard-trending .card-img {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16/9;
    border-radius: 0.375rem;
    max-height: 8.625rem;
    position: relative; }
    .card-webboard-trending .card-img img {
      width: 100%;
      aspect-ratio: 16 / 9;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
  .card-webboard-trending .card-body {
    position: relative;
    padding-top: 1.5rem; }
    .card-webboard-trending .card-body--avatar {
      display: inline-flex;
      align-items: center;
      font-size: 0.875rem;
      border-radius: 2.25rem;
      background-color: #ffffff;
      padding-right: 0.5rem;
      position: absolute;
      top: -1rem;
      left: 0.75rem;
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); }
      .card-webboard-trending .card-body--avatar img {
        width: 2rem;
        height: 2rem;
        border: 3px solid #ffffff;
        border-radius: 50%;
        margin-right: 0.5rem; }
    .card-webboard-trending .card-body--title {
      display: flex;
      font-weight: 500;
      margin-bottom: 0.5rem;
      display: -webkit-box;
      height: 38.4px;
      font-size: 16px;
      line-height: 1.2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
    .card-webboard-trending .card-body--tool {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 50% 50%;
      color: #A9A9A9;
      font-size: 0.875rem; }
      .card-webboard-trending .card-body--tool i {
        margin-right: 0.5rem;
        font-size: 1rem; }
  .card-webboard-topic {
    display: grid;
    grid-template-columns: 8.625rem auto;
    gap: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem; }
    .card-webboard-topic .card-img {
      width: 100%;
      overflow: hidden;
      aspect-ratio: 16/9;
      border-radius: 0.375rem;
      max-height: 4.625rem;
      position: relative; }
      .card-webboard-topic .card-img img {
        width: 100%;
        aspect-ratio: 4 / 3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .card-webboard-topic .card-body {
      position: relative; }
      .card-webboard-topic .card-body--status {
        position: absolute;
        right: 0; }
      .card-webboard-topic .card-body--title {
        display: flex;
        font-weight: 500;
        font-size: 1rem;
        margin-bottom: 0.5rem; }
        .card-webboard-topic .card-body--title .icon-cate {
          margin-right: 0.5rem;
          width: 1.375rem;
          height: 1.375rem;
          min-width: 1.375rem;
          min-height: 1.375rem; }
      .card-webboard-topic .card-body--tool {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 50% 50%;
        color: #A9A9A9;
        font-size: 0.875rem; }
        .card-webboard-topic .card-body--tool i {
          margin-right: 0.5rem;
          font-size: 1rem; }
  .card-webboard-calendar {
    display: grid;
    grid-template-columns: 4.375rem auto;
    gap: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem; }
    .card-webboard-calendar .card-img {
      width: 100%;
      overflow: hidden;
      aspect-ratio: 1/1;
      border-radius: 0.375rem;
      max-height: 4.375rem;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover; }
      .card-webboard-calendar .card-img img {
        width: 100%; }
    .card-webboard-calendar .card-body {
      position: relative;
      padding: 0; }
      .card-webboard-calendar .card-body--title {
        display: flex;
        font-weight: 500;
        font-size: 1rem;
        margin-bottom: 0.5rem; }
        .card-webboard-calendar .card-body--title .icon-cate {
          margin-right: 0.5rem;
          width: 1.375rem;
          height: 1.375rem;
          min-width: 1.375rem;
          min-height: 1.375rem; }
      .card-webboard-calendar .card-body--tool {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 50% 50%;
        color: #A9A9A9;
        font-size: 0.875rem; }
        .card-webboard-calendar .card-body--tool i {
          margin-right: 0.25rem;
          font-size: 1rem; }

/*===================================*
  END 03.START CARD COMPONENT
*===================================*/
.nav-pr .nav-tabs {
  border-color: transparent; }
  .nav-pr .nav-tabs .nav-link {
    font-size: 0.875rem;
    color: var(--textGrayLight2);
    position: relative;
    padding: 0.5rem 0.875rem; }
    @media only screen and (min-width: 768px) {
      .nav-pr .nav-tabs .nav-link {
        font-size: 1.125rem;
        padding: 0.375rem 0.75rem; } }
    .nav-pr .nav-tabs .nav-link.active, .nav-pr .nav-tabs .nav-link:hover {
      color: var(--primary);
      background-color: transparent;
      border-color: transparent; }
      .nav-pr .nav-tabs .nav-link.active::after, .nav-pr .nav-tabs .nav-link:hover::after {
        opacity: 1; }
    .nav-pr .nav-tabs .nav-link:focus, .nav-pr .nav-tabs .nav-link:focus-visible {
      border-color: transparent; }
    .nav-pr .nav-tabs .nav-link::after {
      content: "•";
      display: block;
      width: 30%;
      height: 4px;
      position: absolute;
      top: 24%;
      left: -0.5rem;
      transform: translate(0, -50%);
      opacity: 0;
      transition: opacity 0.2s ease-in-out; }
    .nav-pr .nav-tabs .nav-link:nth-child(2)::after {
      left: -1rem; }

.nav-purple .nav-tabs {
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
  overflow: hidden;
  width: fit-content;
  display: flex;
  width: 100%;
  font-size: 1rem;
  border: none; }
  @media only screen and (min-width: 768px) {
    .nav-purple .nav-tabs {
      font-size: 1.125rem; } }
  @media only screen and (min-width: 1400px) {
    .nav-purple .nav-tabs {
      font-size: 1.25rem; } }
  .nav-purple .nav-tabs .nav-link {
    color: var(--primary);
    border-radius: 0 !important;
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem; }
    .nav-purple .nav-tabs .nav-link.active {
      color: var(--white);
      background-color: var(--primary);
      border-color: transparent; }
    .nav-purple .nav-tabs .nav-link:hover {
      border-color: transparent; }

.nav-badge {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: 0; }
  .nav-badge .list-badge .badge-tag {
    border-radius: 4px;
    color: var(--white);
    background-color: var(--bgBlueLight);
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.375rem 0.625rem; }
  .nav-badge .list-badge .badge-pr {
    color: var(--white);
    background-color: #44b22c; }
  .nav-badge .list-badge .badge-new {
    color: var(--white);
    background-color: #e76e2f; }
  .nav-badge .list-badge .badge-annouce {
    color: var(--white);
    background-color: #e517a8; }
  .nav-badge .list-badge .badge-news {
    color: var(--white);
    background-color: #20cbf1; }
  .nav-badge .list-badge .badge-activity {
    color: var(--white);
    background-color: #9720fd; }

.splide .splide__arrows .splide__arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  padding: 0.625rem;
  background-color: #2b2b2b;
  opacity: 1; }
  .splide .splide__arrows .splide__arrow svg path {
    fill: #ffffff; }
  .splide .splide__arrows .splide__arrow--prev {
    left: 1rem; }
  .splide .splide__arrows .splide__arrow--next {
    right: 1rem; }
  .splide .splide__arrows .splide__arrow:disabled {
    opacity: 0.5; }

.splide .splide__pagination {
  bottom: 0.625rem; }
  .splide .splide__pagination__page {
    width: 10px;
    height: 10px;
    background-color: #838383; }
    .splide .splide__pagination__page.is-active {
      background-color: #C3273F;
      transform: scale(1); }

.splide:not(.is-overflow) .splide__pagination {
  display: flex; }

.splide-main .splide__pagination {
  bottom: 1rem; }

.splide-default .splide__pagination {
  bottom: auto; }

.splide-default .splide__arrows .splide__arrow--prev {
  left: -2.5rem; }

.splide-default .splide__arrows .splide__arrow--next {
  right: -2.5rem; }

.splide-default .splide__track {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; }

.calendar-picker .datepicker-inline {
  height: 100%;
  width: 100%;
  background-color: var(--primary);
  padding: 0; }

.calendar-picker .datepicker .table-condensed {
  width: 100%; }
  .calendar-picker .datepicker .table-condensed thead tr:nth-child(2) {
    background-color: var(--primary);
    color: var(--white); }
    .calendar-picker .datepicker .table-condensed thead tr:nth-child(2) .prev,
    .calendar-picker .datepicker .table-condensed thead tr:nth-child(2) .next {
      font-family: "fontello";
      font-size: 0.75rem; }
    .calendar-picker .datepicker .table-condensed thead tr:nth-child(2) .datepicker-switch {
      font-weight: 400;
      font-size: 1.125rem; }
    .calendar-picker .datepicker .table-condensed thead tr:nth-child(2) .prev {
      border-top-left-radius: 0.5rem; }
    .calendar-picker .datepicker .table-condensed thead tr:nth-child(2) .next {
      border-top-right-radius: 0.5rem; }
    .calendar-picker .datepicker .table-condensed thead tr:nth-child(2) th {
      padding: 1rem 0; }
  .calendar-picker .datepicker .table-condensed thead tr:nth-child(3) {
    background-color: var(--primary);
    color: var(--white); }
    .calendar-picker .datepicker .table-condensed thead tr:nth-child(3) th {
      padding-top: 0.5rem;
      padding-bottom: 1rem;
      font-weight: 400; }
      .calendar-picker .datepicker .table-condensed thead tr:nth-child(3) th:first-child {
        padding-left: 1.5rem; }
      .calendar-picker .datepicker .table-condensed thead tr:nth-child(3) th:last-child {
        padding-right: 1.5rem; }
  .calendar-picker .datepicker .table-condensed tbody {
    background-color: var(--primary);
    color: var(--white); }
    .calendar-picker .datepicker .table-condensed tbody tr td:first-child {
      padding-left: 1.5rem; }
    .calendar-picker .datepicker .table-condensed tbody tr td:last-child {
      padding-right: 1.5rem; }
    .calendar-picker .datepicker .table-condensed tbody tr:last-child td {
      padding-bottom: 1.5rem; }
  .calendar-picker .datepicker .table-condensed td,
  .calendar-picker .datepicker .table-condensed th {
    border-radius: 0;
    background-image: none;
    width: 2.5rem;
    height: 2.5rem; }
    .calendar-picker .datepicker .table-condensed td div,
    .calendar-picker .datepicker .table-condensed th div {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 50%; }
      .calendar-picker .datepicker .table-condensed td div:hover,
      .calendar-picker .datepicker .table-condensed th div:hover {
        color: var(--bgSkyblue); }
    .calendar-picker .datepicker .table-condensed td:hover,
    .calendar-picker .datepicker .table-condensed th:hover {
      background: transparent;
      background-color: transparent; }
    .calendar-picker .datepicker .table-condensed td.today,
    .calendar-picker .datepicker .table-condensed th.today {
      background-color: transparent !important;
      color: var(--white) !important;
      display: flex;
      justify-content: center;
      width: 100%; }
      .calendar-picker .datepicker .table-condensed td.today div,
      .calendar-picker .datepicker .table-condensed th.today div {
        color: var(--white) !important;
        background-color: var(--bgSkyblue); }
    .calendar-picker .datepicker .table-condensed td.active,
    .calendar-picker .datepicker .table-condensed th.active {
      background-color: transparent !important;
      text-shadow: none;
      border-radius: 50%; }
      .calendar-picker .datepicker .table-condensed td.active div,
      .calendar-picker .datepicker .table-condensed th.active div {
        text-shadow: none !important;
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 50%;
        background-color: var(--textGrayDeep2);
        color: var(--black) !important; }
    .calendar-picker .datepicker .table-condensed td.highlight,
    .calendar-picker .datepicker .table-condensed th.highlight {
      background-color: transparent !important; }
      .calendar-picker .datepicker .table-condensed td.highlight div,
      .calendar-picker .datepicker .table-condensed th.highlight div {
        color: var(--black) !important; }
        .calendar-picker .datepicker .table-condensed td.highlight div:after,
        .calendar-picker .datepicker .table-condensed th.highlight div:after {
          content: "";
          display: block;
          width: 5px;
          height: 5px;
          background-color: var(--primary);
          border-radius: 50%;
          text-align: center;
          margin: 0 auto; }
    .calendar-picker .datepicker .table-condensed td span.focused, .calendar-picker .datepicker .table-condensed td span:hover,
    .calendar-picker .datepicker .table-condensed th span.focused,
    .calendar-picker .datepicker .table-condensed th span:hover {
      background: var(--bgSkyblue) !important; }

.main-content-popup {
  background: rgba(0, 0, 0, 0.4);
  overflow: auto; }
  .main-content-popup div#main-content-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .main-content-popup div#main-content-popup .close-popup.btn-black {
      font-weight: 300; }
    .main-content-popup div#main-content-popup .popup-content {
      border-radius: 10px;
      position: relative; }
      @media screen and (max-width: 767px) {
        .main-content-popup div#main-content-popup .popup-content {
          max-width: 90% !important; } }
      .main-content-popup div#main-content-popup .popup-content div#content {
        outline: none;
        padding: 0px;
        overflow-y: auto; }
        @media screen and (max-width: 767px) {
          .main-content-popup div#main-content-popup .popup-content div#content {
            max-height: 60vh !important; } }
        .main-content-popup div#main-content-popup .popup-content div#content::-webkit-scrollbar {
          width: 14px; }
        .main-content-popup div#main-content-popup .popup-content div#content::-webkit-scrollbar-thumb {
          border: 4px solid rgba(0, 0, 0, 0);
          background-clip: padding-box;
          border-radius: 9999px;
          background-color: #aaaaaa; }
      .main-content-popup div#main-content-popup .popup-content .ql-editor {
        white-space: unset !important; }
        .main-content-popup div#main-content-popup .popup-content .ql-editor img {
          width: 100%;
          height: auto; }

.form-control:active, .form-control:focus, .form-select:active, .form-select:focus {
  box-shadow: none !important;
  border-color: #ced4da; }

.form-control::placeholder, .form-select::placeholder {
  color: #a59cb1; }

.form-check-input:checked {
  background-color: #e0062a !important;
  border-color: #e0062a !important; }

.form-check-input:focus {
  border-color: #e0062a;
  box-shadow: none !important; }

.form-control,
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-control.is-valid,
.was-validated .form-control:valid {
  background-image: none !important;
  padding-right: 0.5rem; }

.input-password {
  position: relative; }
  .input-password .form-control {
    padding-right: 2rem; }
  .input-password .input-button {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2rem; }

#a5H2ldeyKnolV7ju {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem; }
  #a5H2ldeyKnolV7ju input {
    opacity: 0;
    width: 0;
    height: 0; }
    #a5H2ldeyKnolV7ju input:checked + .slider {
      background-color: #4B12D0; }
      #a5H2ldeyKnolV7ju input:checked + .slider:before {
        -webkit-transform: translateX(22px);
        -ms-transform: translateX(22px);
        transform: translateX(22px); }
  #a5H2ldeyKnolV7ju label {
    color: transparent; }
  #a5H2ldeyKnolV7ju .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333137;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 5rem; }
    #a5H2ldeyKnolV7ju .slider:before {
      position: absolute;
      content: "";
      height: 1.25rem;
      width: 1.25rem;
      left: 3px;
      bottom: 2px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 50%; }

.modal-exam .modal-dialog {
  max-width: 21rem; }
  .modal-exam .modal-dialog .modal-content {
    border: 0;
    position: relative; }
    .modal-exam .modal-dialog .modal-content .cartoon-image {
      position: absolute;
      width: 8rem;
      top: -5.2rem;
      right: 0; }
    .modal-exam .modal-dialog .modal-content .modal-body {
      padding: 1.5rem; }
  .modal-exam .modal-dialog .modal-footer {
    border: 0; }
    .modal-exam .modal-dialog .modal-footer .btn {
      width: 100%; }

.modal-announcement .modal-header,
.modal-announcement .modal-footer {
  border: 0 !important; }

.modal-announcement .inner-container {
  border: 1px solid #eceae9;
  border-radius: .75rem;
  padding: 0.75rem; }

.modal-announcement .heading-title {
  color: #C3273F;
  font-weight: 700; }

.modal-announcement .popup-object {
  position: absolute;
  top: 0;
  height: 185px;
  left: 4rem; }

.modal-announcement .documents {
  padding: 0.5rem 0.75rem;
  border: 1px solid #eceae9;
  border-radius: 0.5rem; }
  .modal-announcement .documents .list-item .inner-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem; }
    .modal-announcement .documents .list-item .inner-wrapper .content {
      flex: 1; }
    .modal-announcement .documents .list-item .inner-wrapper .icon {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      background-color: #DFF1FE; }
    .modal-announcement .documents .list-item .inner-wrapper .file-name {
      font-size: .875rem;
      font-weight: 600; }
    .modal-announcement .documents .list-item .inner-wrapper .file-size {
      font-size: .625rem;
      color: #3184FF; }
    .modal-announcement .documents .list-item .inner-wrapper .btn-download {
      display: flex;
      flex-direction: column;
      color: #0A328B;
      font-size: .75rem; }
      .modal-announcement .documents .list-item .inner-wrapper .btn-download .icon-wrapper {
        border: 1px solid #0A328B;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 28px;
        height: 28px; }

.modal-announcement .modal-content {
  background-color: transparent !important;
  border: 0 !important; }

.modal-announcement .modal-body {
  width: 100%;
  max-width: 450px;
  border-radius: .75rem;
  background-color: #ffffff;
  margin-top: 7.5rem;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto; }
  .modal-announcement .modal-body img {
    max-width: 100%; }
  .modal-announcement .modal-body .document-list {
    padding: .5rem; }
    .modal-announcement .modal-body .document-list .icon {
      padding: .25rem;
      border-radius: .25rem;
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center; }
      .modal-announcement .modal-body .document-list .icon img {
        height: 1.25rem; }
      .modal-announcement .modal-body .document-list .icon.image, .modal-announcement .modal-body .document-list .icon.doc {
        background-color: #DFF1FE; }
    .modal-announcement .modal-body .document-list .name {
      font-size: .875rem;
      font-weight: 600; }
    .modal-announcement .modal-body .document-list .download {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center; }
      .modal-announcement .modal-body .document-list .download svg {
        width: 1.5rem;
        display: block; }
      .modal-announcement .modal-body .document-list .download small {
        font-size: .625rem;
        color: #2B30B0;
        line-height: 1.5;
        display: block;
        margin-top: -.25rem; }
  .modal-announcement .modal-body .practice-item {
    max-width: 55rem;
    max-width: 55rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: column; }
    .modal-announcement .modal-body .practice-item .question {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem; }
      .modal-announcement .modal-body .practice-item .question .no {
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 50%;
        background-color: #3184ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF; }
    .modal-announcement .modal-body .practice-item .question-image {
      text-align: center; }
      .modal-announcement .modal-body .practice-item .question-image img {
        max-width: 100%; }
    .modal-announcement .modal-body .practice-item-choice .bg-answer {
      border-radius: 1rem;
      background: rgba(63, 162, 255, 0.6);
      padding: 2rem 1rem;
      margin: 1rem 0; }
      @media only screen and (min-width: 768px) {
        .modal-announcement .modal-body .practice-item-choice .bg-answer {
          padding: 4rem 2.5rem 2.5rem;
          background: rgba(63, 162, 255, 0.4); } }
    .modal-announcement .modal-body .practice-item-choice .answer-item {
      margin-bottom: 1rem; }
      .modal-announcement .modal-body .practice-item-choice .answer-item .answer-text {
        border: 1px solid #DBDBDB;
        position: relative;
        padding: .5rem;
        border-radius: 5rem;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center; }
        .modal-announcement .modal-body .practice-item-choice .answer-item .answer-text::before {
          content: "";
          display: block;
          width: 2rem;
          height: 2rem;
          background-color: #FFF;
          border-radius: 50%;
          border: 1px solid #C0C0C0; }
        .modal-announcement .modal-body .practice-item-choice .answer-item .answer-text .icon-choice {
          position: absolute;
          top: -1.25rem;
          left: 1rem;
          width: 45px; }
        .modal-announcement .modal-body .practice-item-choice .answer-item .answer-text .text {
          width: calc(100% - 2rem);
          padding-left: .75rem; }
      @media only screen and (min-width: 1600px) {
        .modal-announcement .modal-body .practice-item-choice .answer-item .answer-text .icon-choice {
          top: -2.25rem;
          width: 55px; }
        .modal-announcement .modal-body .practice-item-choice .answer-item .pole-image {
          max-width: 95%;
          margin-left: auto;
          margin-right: auto;
          display: block; } }
      .modal-announcement .modal-body .practice-item-choice .answer-item:hover .answer-text::before, .modal-announcement .modal-body .practice-item-choice .answer-item.active .answer-text::before {
        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMTAuMjU5OEw2IDE0LjI1OThMMTcuNSAyLjc1OTc3IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K");
        background-color: #1A3591;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        color: #FFF;
        border: 1px solid #FFFFFF; }
  .modal-announcement .modal-body .answer-container h3 {
    font-size: 1.5rem; }
  .modal-announcement .modal-body .answer-container .answer-item {
    margin-bottom: 1rem; }
    .modal-announcement .modal-body .answer-container .answer-item.correct {
      color: #12B061; }
    .modal-announcement .modal-body .answer-container .answer-item.wrong {
      color: #C3273F; }

.modal-announcement .btn-accept {
  border-radius: 5rem;
  margin-top: 1rem;
  width: 100%; }

.modal-complaint .modal-dialog {
  max-width: 40.5rem; }
  .modal-complaint .modal-dialog .modal-content {
    border-radius: .75rem;
    border: 0;
    min-height: 31.25rem; }
    .modal-complaint .modal-dialog .modal-content .modal-body {
      padding: 0;
      border-radius: .75rem; }
      @media only screen and (min-width: 768px) {
        .modal-complaint .modal-dialog .modal-content .modal-body {
          display: flex; } }
      .modal-complaint .modal-dialog .modal-content .modal-body .col-left {
        width: 100%;
        background: linear-gradient(180deg, #D02C5B 0%, #990D35 100%);
        background-size: cover;
        background-position: center;
        padding: 1.5rem 1.5rem 0;
        color: #FFF;
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem;
        background-repeat: no-repeat; }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-left .cartoon {
          position: absolute;
          bottom: 0;
          display: none; }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-left ul {
          counter-reset: li;
          list-style-type: none;
          padding-left: 0;
          margin-left: 0; }
          .modal-complaint .modal-dialog .modal-content .modal-body .col-left ul li {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            color: #FFF; }
            .modal-complaint .modal-dialog .modal-content .modal-body .col-left ul li:before {
              counter-increment: li;
              content: counter(li);
              width: 1.875rem;
              height: 1.875rem;
              border-radius: .25rem;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #FFF;
              margin-right: .75rem;
              background-color: #960A32;
              font-size: 1rem;
              transform: scale(0.9); }
            .modal-complaint .modal-dialog .modal-content .modal-body .col-left ul li.active:before {
              background-color: #FFF;
              font-weight: 600;
              transform: scale(1);
              color: #000; }
        @media only screen and (min-width: 768px) {
          .modal-complaint .modal-dialog .modal-content .modal-body .col-left {
            width: 50%;
            border-top-right-radius: 0;
            border-bottom-left-radius: .75rem; }
            .modal-complaint .modal-dialog .modal-content .modal-body .col-left .cartoon {
              display: block; } }
      .modal-complaint .modal-dialog .modal-content .modal-body .col-right {
        width: 100%;
        padding: 1rem; }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .pb-element > label {
          font-weight: 500;
          font-size: .875rem; }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .form-control {
          border-radius: .625rem;
          border: 1px solid #DBDBDB; }
          .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .form-control::placeholder {
            font-size: .75rem;
            color: #949494; }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .pb-element-file_upload .input-upload-wrapper {
          border: 1.06px solid #DFDFDF;
          border-radius: 5px;
          padding: .25rem .5rem;
          gap: 0 !important;
          justify-content: space-between;
          width: 100%;
          flex-flow: row-reverse; }
          .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .pb-element-file_upload .input-upload-wrapper .file-name {
            color: #949494;
            font-size: .875rem;
            width: calc(100% - 5rem); }
            .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .pb-element-file_upload .input-upload-wrapper .file-name:empty:before {
              content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMzIiBoZWlnaHQ9IjIxIiB2aWV3Qm94PSIwIDAgMTMzIDIxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy4zMzc0OCAxOS4xNjY3SDE1LjAwNDJDMTUuNDQ2MiAxOS4xNjY3IDE1Ljg3MDEgMTguOTkxMSAxNi4xODI3IDE4LjY3ODVDMTYuNDk1MiAxOC4zNjU5IDE2LjY3MDggMTcuOTQyIDE2LjY3MDggMTcuNVY3LjA4MzMzTDEyLjA4NzUgMi41SDUuMDA0MTVDNC41NjIxMiAyLjUgNC4xMzgyIDIuNjc1NTkgMy44MjU2NCAyLjk4ODE2QzMuNTEzMDggMy4zMDA3MiAzLjMzNzQ4IDMuNzI0NjQgMy4zMzc0OCA0LjE2NjY3VjcuNU0xMS42NzA4IDIuNVY3LjVIMTYuNjcwOE0yLjUwNDE1IDEzLjMzMzNINy41MDQxNU01LjAwNDE1IDEwLjgzMzNWMTUuODMzMyIgc3Ryb2tlPSIjQjdCN0I3IiBzdHJva2Utd2lkdGg9IjEuMDYyMTEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjQuNzYwMiAxMC43MzE5QzI0Ljc2MDIgOS45MzE5NCAyNS4wMDAyIDkuMzE1OTQgMjUuNDgwMiA4Ljg4Mzk0QzI1Ljk2ODIgOC40NTE5NCAyNi43MDgyIDguMjM1OTQgMjcuNzAwMiA4LjIzNTk0QzI4LjY5MjIgOC4yMzU5NCAyOS40MjQyIDguNDUxOTQgMjkuODk2MiA4Ljg4Mzk0QzMwLjM3NjIgOS4zMTU5NCAzMC42MTYyIDkuOTMxOTQgMzAuNjE2MiAxMC43MzE5VjE0LjgzNTlIMjkuMzA4MlYxMC42MTE5QzI5LjMwODIgOS43MzE5NCAyOC43NzIyIDkuMjkxOTQgMjcuNzAwMiA5LjI5MTk0QzI3LjE1NjIgOS4yOTE5NCAyNi43NDgyIDkuMzk5OTQgMjYuNDc2MiA5LjYxNTk0QzI2LjIwNDIgOS44MzE5NCAyNi4wNjgyIDEwLjE2MzkgMjYuMDY4MiAxMC42MTE5VjExLjk0MzlDMjYuNDIwMiAxMS42NTU5IDI2Ljg0MDIgMTEuNTExOSAyNy4zMjgyIDExLjUxMTlIMjguMTA4MkwyOC4xNTYyIDEyLjU1NTlIMjcuMjkyMkMyNi44MDQyIDEyLjU1NTkgMjYuMzk2MiAxMi42OTE5IDI2LjA2ODIgMTIuOTYzOVYxNC44MzU5SDI0Ljc2MDJWMTAuNzMxOVpNMzQuMTQ3IDE0Ljk1NTlDMzMuNDgzIDE0Ljk1NTkgMzIuOTQ3IDE0Ljc5NTkgMzIuNTM5IDE0LjQ3NTlDMzIuMTM5IDE0LjE0NzkgMzEuOTM5IDEzLjY0NzkgMzEuOTM5IDEyLjk3NTlDMzEuOTM5IDEyLjMzNTkgMzIuMTU1IDExLjg0MzkgMzIuNTg3IDExLjQ5OTlDMzMuMDE5IDExLjE0NzkgMzMuNjQzIDEwLjk3MTkgMzQuNDU5IDEwLjk3MTlIMzYuNDM5VjEwLjU2MzlDMzYuNDM5IDEwLjI0MzkgMzYuMzg3IDkuOTkxOTQgMzYuMjgzIDkuODA3OTRDMzYuMTc5IDkuNjIzOTQgMzYuMDA3IDkuNDkxOTQgMzUuNzY3IDkuNDExOTRDMzUuNTI3IDkuMzMxOTQgMzUuMTk1IDkuMjkxOTQgMzQuNzcxIDkuMjkxOTRDMzQuMDExIDkuMjkxOTQgMzMuMzA3IDkuMzk1OTQgMzIuNjU5IDkuNjAzOTRWOC41OTU5NEMzMi45ODcgOC40OTE5NCAzMy4zNTUgOC40MDc5NCAzMy43NjMgOC4zNDM5NEMzNC4xNzkgOC4yNzE5NCAzNC41ODcgOC4yMzU5NCAzNC45ODcgOC4yMzU5NEMzNS45MzEgOC4yMzU5NCAzNi42MjcgOC40MzU5NCAzNy4wNzUgOC44MzU5NEMzNy41MjMgOS4yMjc5NCAzNy43NDcgOS44NDM5NCAzNy43NDcgMTAuNjgzOVYxNC44MzU5SDM2LjQzOVYxMS45Nzk5SDM0LjU0M0MzNC4wNzkgMTEuOTc5OSAzMy43MzUgMTIuMDU1OSAzMy41MTEgMTIuMjA3OUMzMy4yOTUgMTIuMzU5OSAzMy4xODcgMTIuNjE1OSAzMy4xODcgMTIuOTc1OUMzMy4xODcgMTMuMzE5OSAzMy4yODcgMTMuNTYzOSAzMy40ODcgMTMuNzA3OUMzMy42ODcgMTMuODQzOSAzNC4wMjMgMTMuOTExOSAzNC40OTUgMTMuOTExOUMzNC44MTUgMTMuOTExOSAzNS4wOTEgMTMuODc5OSAzNS4zMjMgMTMuODE1OVYxNC44MTE5QzM0Ljk3OSAxNC45MDc5IDM0LjU4NyAxNC45NTU5IDM0LjE0NyAxNC45NTU5Wk0zMi44IDYuNDU5OTRIMzcuNzQ0VjcuMzcxOTRIMzIuNzRMMzIuOCA2LjQ1OTk0Wk0zOS4zNzYgMTIuNDk1OUMzOS4zNzYgMTEuNjk1OSAzOS42OTIgMTEuMTk5OSA0MC4zMjQgMTEuMDA3OUwzOS4wMjggMTAuNjgzOVY5LjMzOTk0QzM5LjM4OCA5LjAxOTk0IDM5LjgzMiA4Ljc1NTk0IDQwLjM2IDguNTQ3OTRDNDAuODk2IDguMzM5OTQgNDEuNDg4IDguMjM1OTQgNDIuMTM2IDguMjM1OTRDNDMuMTIgOC4yMzU5NCA0My44NiA4LjQzOTk0IDQ0LjM1NiA4Ljg0Nzk0QzQ0Ljg1MiA5LjI1NTk0IDQ1LjEgOS45MTE5NCA0NS4xIDEwLjgxNTlWMTQuODM1OUg0My43OTJWMTAuNzc5OUM0My43OTIgMTAuMjI3OSA0My42NjQgOS44NDM5NCA0My40MDggOS42Mjc5NEM0My4xNTIgOS40MDM5NCA0Mi43MTIgOS4yOTE5NCA0Mi4wODggOS4yOTE5NEM0MS42OTYgOS4yOTE5NCA0MS4zMjQgOS4zNDc5NCA0MC45NzIgOS40NTk5NEM0MC42MjggOS41NzE5NCA0MC4zNTYgOS43MTk5NCA0MC4xNTYgOS45MDM5NFYxMC4xMTk5TDQxLjUyNCAxMC40Njc5VjExLjMzMTlDNDEuMjEyIDExLjQxMTkgNDAuOTkyIDExLjUzOTkgNDAuODY0IDExLjcxNTlDNDAuNzM2IDExLjg5MTkgNDAuNjcyIDEyLjE1NTkgNDAuNjcyIDEyLjUwNzlWMTQuODM1OUgzOS4zNzZWMTIuNDk1OVpNNDYuNjI3MyA4LjM1NTk0SDQ3LjkzNTNWMTAuMzk1OUg0OS44MDczQzUwLjI2MzMgMTAuMzk1OSA1MC41ODMzIDEwLjI5OTkgNTAuNzY3MyAxMC4xMDc5QzUwLjk1OTMgOS45MTU5NCA1MS4wNTUzIDkuNjExOTQgNTEuMDU1MyA5LjE5NTk0VjguMzU1OTRINTIuMzUxM1Y5LjE1OTk0QzUyLjM1MTMgMTAuMDcxOSA1Mi4wMjczIDEwLjY0MzkgNTEuMzc5MyAxMC44NzU5QzUxLjcyMzMgMTAuOTk1OSA1MS45NTkzIDExLjE4NzkgNTIuMDg3MyAxMS40NTE5QzUyLjIyMzMgMTEuNzE1OSA1Mi4yOTEzIDEyLjA0NzkgNTIuMjkxMyAxMi40NDc5VjE0LjgzNTlINTAuOTk1M1YxMi42MDM5QzUwLjk5NTMgMTIuMTM5OSA1MC45MDczIDExLjgyMzkgNTAuNzMxMyAxMS42NTU5QzUwLjU1NTMgMTEuNDc5OSA1MC4yMzEzIDExLjM5MTkgNDkuNzU5MyAxMS4zOTE5SDQ3LjkzNTNWMTQuODM1OUg0Ni42MjczVjguMzU1OTRaTTU1Ljk5MzUgMTQuOTU1OUM1NS41NjE1IDE0Ljk1NTkgNTUuMTQ1NSAxNC45Mjc5IDU0Ljc0NTUgMTQuODcxOUM1NC4zNTM1IDE0LjgxNTkgNTQuMDMzNSAxNC43MzU5IDUzLjc4NTUgMTQuNjMxOVYxMy41Mzk5QzU0LjA4MTUgMTMuNjU5OSA1NC40MDU1IDEzLjc1MTkgNTQuNzU3NSAxMy44MTU5QzU1LjEwOTUgMTMuODc5OSA1NS40NDE1IDEzLjkxMTkgNTUuNzUzNSAxMy45MTE5QzU2LjMzNzUgMTMuOTExOSA1Ni43NTM1IDEzLjg1OTkgNTcuMDAxNSAxMy43NTU5QzU3LjI0OTUgMTMuNjUxOSA1Ny4zNzM1IDEzLjQ0MzkgNTcuMzczNSAxMy4xMzE5QzU3LjM3MzUgMTIuOTM5OSA1Ny4zMjU1IDEyLjc4NzkgNTcuMjI5NSAxMi42NzU5QzU3LjEzMzUgMTIuNTU1OSA1Ny4wMDE1IDEyLjQ1OTkgNTYuODMzNSAxMi4zODc5QzU2LjY2NTUgMTIuMzE1OSA1Ni40MDU1IDEyLjIyMzkgNTYuMDUzNSAxMi4xMTE5TDU1LjU4NTUgMTEuOTU1OUM1NC45Mjk1IDExLjczMTkgNTQuNDM3NSAxMS40ODc5IDU0LjEwOTUgMTEuMjIzOUM1My43ODk1IDEwLjk1MTkgNTMuNjI5NSAxMC41NzE5IDUzLjYyOTUgMTAuMDgzOUM1My42Mjk1IDkuNDk5OTQgNTMuODQ5NSA5LjA0Nzk0IDU0LjI4OTUgOC43Mjc5NEM1NC43Mjk1IDguMzk5OTQgNTUuMzc3NSA4LjIzNTk0IDU2LjIzMzUgOC4yMzU5NEM1Ni41ODU1IDguMjM1OTQgNTYuOTQxNSA4LjI2Mzk0IDU3LjMwMTUgOC4zMTk5NEM1Ny42NjE1IDguMzc1OTQgNTcuOTY1NSA4LjQ0Mzk0IDU4LjIxMzUgOC41MjM5NFY5LjYwMzk0QzU3Ljk1NzUgOS41MDc5NCA1Ny42NjU1IDkuNDMxOTQgNTcuMzM3NSA5LjM3NTk0QzU3LjAxNzUgOS4zMTk5NCA1Ni43MTM1IDkuMjkxOTQgNTYuNDI1NSA5LjI5MTk0QzU1LjkyMTUgOS4yOTE5NCA1NS41Mzc1IDkuMzQ3OTQgNTUuMjczNSA5LjQ1OTk0QzU1LjAxNzUgOS41NjM5NCA1NC44ODk1IDkuNzU5OTQgNTQuODg5NSAxMC4wNDc5QzU0Ljg4OTUgMTAuMjE1OSA1NC45NDE1IDEwLjM1NTkgNTUuMDQ1NSAxMC40Njc5QzU1LjE1NzUgMTAuNTc5OSA1NS4zMDU1IDEwLjY3NTkgNTUuNDg5NSAxMC43NTU5QzU1LjY3MzUgMTAuODI3OSA1NS45NTc1IDEwLjkyNzkgNTYuMzQxNSAxMS4wNTU5TDU2LjY4OTUgMTEuMTYzOUM1Ny4zNzc1IDExLjM5NTkgNTcuODczNSAxMS42NTE5IDU4LjE3NzUgMTEuOTMxOUM1OC40ODE1IDEyLjIwMzkgNTguNjMzNSAxMi42MDM5IDU4LjYzMzUgMTMuMTMxOUM1OC42MzM1IDEzLjc0NzkgNTguNDAxNSAxNC4yMDc5IDU3LjkzNzUgMTQuNTExOUM1Ny40NzM1IDE0LjgwNzkgNTYuODI1NSAxNC45NTU5IDU1Ljk5MzUgMTQuOTU1OVpNNTMuNDQ4NCA2LjQ1OTk0SDU1Ljc3NjRWNS40NjM5NEg1Ni43MjQ0VjYuNDU5OTRINTcuNDQ0NFY1LjQ2Mzk0SDU4LjM5MjRWNy4zNzE5NEg1My4zODg0TDUzLjQ0ODQgNi40NTk5NFpNNjIuMzQwNCAxNC45NTU5QzYxLjg1MjQgMTQuOTU1OSA2MS4zODA0IDE0LjkxMTkgNjAuOTI0NCAxNC44MjM5QzYwLjQ3NjQgMTQuNzM1OSA2MC4wODg0IDE0LjYxOTkgNTkuNzYwNCAxNC40NzU5VjExLjEzOTlINjIuMzI4NEw2Mi4zODg0IDEyLjEzNTlINjEuMDIwNFYxMy43MDc5QzYxLjM4ODQgMTMuODQzOSA2MS44Mjg0IDEzLjkxMTkgNjIuMzQwNCAxMy45MTE5QzYyLjgyMDQgMTMuOTExOSA2My4yMDA0IDEzLjgzOTkgNjMuNDgwNCAxMy42OTU5QzYzLjc2MDQgMTMuNTQzOSA2My45NjQ0IDEzLjMwMzkgNjQuMDkyNCAxMi45NzU5QzY0LjIyMDQgMTIuNjM5OSA2NC4yODQ0IDEyLjE4NzkgNjQuMjg0NCAxMS42MTk5QzY0LjI4NDQgMTEuMDE5OSA2NC4yMTI0IDEwLjU1NTkgNjQuMDY4NCAxMC4yMjc5QzYzLjkyNDQgOS44OTE5NCA2My42ODg0IDkuNjUxOTQgNjMuMzYwNCA5LjUwNzk0QzYzLjA0MDQgOS4zNjM5NCA2Mi41ODg0IDkuMjkxOTQgNjIuMDA0NCA5LjI5MTk0QzYxLjIyMDQgOS4yOTE5NCA2MC41MDQ0IDkuMzk1OTQgNTkuODU2NCA5LjYwMzk0VjguNTk1OTRDNjAuMTkyNCA4LjQ4Mzk0IDYwLjU3NjQgOC4zOTU5NCA2MS4wMDg0IDguMzMxOTRDNjEuNDQ4NCA4LjI2Nzk0IDYxLjg4ODQgOC4yMzU5NCA2Mi4zMjg0IDguMjM1OTRDNjMuNDQwNCA4LjIzNTk0IDY0LjI1MjQgOC41MTk5NCA2NC43NjQ0IDkuMDg3OTRDNjUuMjg0NCA5LjY0Nzk0IDY1LjU0NDQgMTAuNDkxOSA2NS41NDQ0IDExLjYxOTlDNjUuNTQ0NCAxMi43MzE5IDY1LjI4NDQgMTMuNTY3OSA2NC43NjQ0IDE0LjEyNzlDNjQuMjUyNCAxNC42Nzk5IDYzLjQ0NDQgMTQuOTU1OSA2Mi4zNDA0IDE0Ljk1NTlaTTY4LjgyMjcgMTQuOTU1OUM2OC4xNTg3IDE0Ljk1NTkgNjcuNjIyNyAxNC43OTU5IDY3LjIxNDcgMTQuNDc1OUM2Ni44MTQ3IDE0LjE0NzkgNjYuNjE0NyAxMy42NDc5IDY2LjYxNDcgMTIuOTc1OUM2Ni42MTQ3IDEyLjMzNTkgNjYuODMwNyAxMS44NDM5IDY3LjI2MjcgMTEuNDk5OUM2Ny42OTQ3IDExLjE0NzkgNjguMzE4NyAxMC45NzE5IDY5LjEzNDcgMTAuOTcxOUg3MS4xMTQ3VjEwLjU2MzlDNzEuMTE0NyAxMC4yNDM5IDcxLjA2MjcgOS45OTE5NCA3MC45NTg3IDkuODA3OTRDNzAuODU0NyA5LjYyMzk0IDcwLjY4MjcgOS40OTE5NCA3MC40NDI3IDkuNDExOTRDNzAuMjAyNyA5LjMzMTk0IDY5Ljg3MDcgOS4yOTE5NCA2OS40NDY3IDkuMjkxOTRDNjguNjg2NyA5LjI5MTk0IDY3Ljk4MjcgOS4zOTU5NCA2Ny4zMzQ3IDkuNjAzOTRWOC41OTU5NEM2Ny42NjI3IDguNDkxOTQgNjguMDMwNyA4LjQwNzk0IDY4LjQzODcgOC4zNDM5NEM2OC44NTQ3IDguMjcxOTQgNjkuMjYyNyA4LjIzNTk0IDY5LjY2MjcgOC4yMzU5NEM3MC42MDY3IDguMjM1OTQgNzEuMzAyNyA4LjQzNTk0IDcxLjc1MDcgOC44MzU5NEM3Mi4xOTg3IDkuMjI3OTQgNzIuNDIyNyA5Ljg0Mzk0IDcyLjQyMjcgMTAuNjgzOVYxNC44MzU5SDcxLjExNDdWMTEuOTc5OUg2OS4yMTg3QzY4Ljc1NDcgMTEuOTc5OSA2OC40MTA3IDEyLjA1NTkgNjguMTg2NyAxMi4yMDc5QzY3Ljk3MDcgMTIuMzU5OSA2Ny44NjI3IDEyLjYxNTkgNjcuODYyNyAxMi45NzU5QzY3Ljg2MjcgMTMuMzE5OSA2Ny45NjI3IDEzLjU2MzkgNjguMTYyNyAxMy43MDc5QzY4LjM2MjcgMTMuODQzOSA2OC42OTg3IDEzLjkxMTkgNjkuMTcwNyAxMy45MTE5QzY5LjQ5MDcgMTMuOTExOSA2OS43NjY3IDEzLjg3OTkgNjkuOTk4NyAxMy44MTU5VjE0LjgxMTlDNjkuNjU0NyAxNC45MDc5IDY5LjI2MjcgMTQuOTU1OSA2OC44MjI3IDE0Ljk1NTlaTTc2LjM5MTcgMTAuNzU1OUM3Ni4zOTE3IDEwLjQwMzkgNzYuMzU1NyAxMC4xMjc5IDc2LjI4MzcgOS45Mjc5NEM3Ni4yMTE3IDkuNzE5OTQgNzYuMDcxNyA5LjU2Mzk0IDc1Ljg2MzcgOS40NTk5NEM3NS42NjM3IDkuMzQ3OTQgNzUuMzcxNyA5LjI5MTk0IDc0Ljk4NzcgOS4yOTE5NEM3NC43MzE3IDkuMjkxOTQgNzQuNDUxNyA5LjMxOTk0IDc0LjE0NzcgOS4zNzU5NEM3My44NTE3IDkuNDMxOTQgNzMuNTgzNyA5LjUwNzk0IDczLjM0MzcgOS42MDM5NFY4LjU5NTk0QzczLjU5MTcgOC40OTE5NCA3My44ODc3IDguNDA3OTQgNzQuMjMxNyA4LjM0Mzk0Qzc0LjU3NTcgOC4yNzE5NCA3NC45MTE3IDguMjM1OTQgNzUuMjM5NyA4LjIzNTk0Qzc2LjEwMzcgOC4yMzU5NCA3Ni43Mjc3IDguNDIzOTQgNzcuMTExNyA4Ljc5OTk0Qzc3LjUwMzcgOS4xNzU5NCA3Ny42OTk3IDkuNzcxOTQgNzcuNjk5NyAxMC41ODc5VjE0LjgzNTlINzYuMzkxN1YxMC43NTU5Wk03OS4zMzY5IDEyLjQ5NTlDNzkuMzM2OSAxMS42OTU5IDc5LjY1MjkgMTEuMTk5OSA4MC4yODQ5IDExLjAwNzlMNzguOTg4OSAxMC42ODM5VjkuMzM5OTRDNzkuMzQ4OSA5LjAxOTk0IDc5Ljc5MjkgOC43NTU5NCA4MC4zMjA5IDguNTQ3OTRDODAuODU2OSA4LjMzOTk0IDgxLjQ0ODkgOC4yMzU5NCA4Mi4wOTY5IDguMjM1OTRDODMuMDgwOSA4LjIzNTk0IDgzLjgyMDkgOC40Mzk5NCA4NC4zMTY5IDguODQ3OTRDODQuODEyOSA5LjI1NTk0IDg1LjA2MDkgOS45MTE5NCA4NS4wNjA5IDEwLjgxNTlWMTQuODM1OUg4My43NTI5VjEwLjc3OTlDODMuNzUyOSAxMC4yMjc5IDgzLjYyNDkgOS44NDM5NCA4My4zNjg5IDkuNjI3OTRDODMuMTEyOSA5LjQwMzk0IDgyLjY3MjkgOS4yOTE5NCA4Mi4wNDg5IDkuMjkxOTRDODEuNjU2OSA5LjI5MTk0IDgxLjI4NDkgOS4zNDc5NCA4MC45MzI5IDkuNDU5OTRDODAuNTg4OSA5LjU3MTk0IDgwLjMxNjkgOS43MTk5NCA4MC4xMTY5IDkuOTAzOTRWMTAuMTE5OUw4MS40ODQ5IDEwLjQ2NzlWMTEuMzMxOUM4MS4xNzI5IDExLjQxMTkgODAuOTUyOSAxMS41Mzk5IDgwLjgyNDkgMTEuNzE1OUM4MC42OTY5IDExLjg5MTkgODAuNjMyOSAxMi4xNTU5IDgwLjYzMjkgMTIuNTA3OVYxNC44MzU5SDc5LjMzNjlWMTIuNDk1OVpNODguMDQwMyAxNC44MzU5Qzg3LjIwMDMgMTQuODM1OSA4Ni43ODAzIDE0LjQxOTkgODYuNzgwMyAxMy41ODc5VjkuNDQ3OTRDODYuNzgwMyA4LjU4Mzk0IDg3LjA4NDMgNy45NDc5NCA4Ny42OTIzIDcuNTM5OTRIODUuODA4M1Y2LjUwNzk0SDg5LjI3NjNWNy40OTE5NEM4OC44NDQzIDcuNjU5OTQgODguNTM2MyA3LjkxNTk0IDg4LjM1MjMgOC4yNTk5NEM4OC4xNjgzIDguNTk1OTQgODguMDc2MyA5LjA1NTk0IDg4LjA3NjMgOS42Mzk5NFYxMy4yNjM5Qzg4LjA3NjMgMTMuNDc5OSA4OC4xMDgzIDEzLjYyMzkgODguMTcyMyAxMy42OTU5Qzg4LjI0NDMgMTMuNzY3OSA4OC4zODgzIDEzLjgwMzkgODguNjA0MyAxMy44MDM5SDg5LjE1NjNWMTQuODM1OUg4OC4wNDAzWk04OS44NjE3IDguMzU1OTRIOTEuMTQ1N0w5Mi4xMDU3IDEyLjk4NzlMOTMuMjgxNyA5LjI3OTk0VjguMzU1OTRIOTQuMjE3N0w5NS41MjU3IDEyLjk4NzlMOTYuODMzNyA2LjQzNTk0SDk4LjEwNTdMOTYuMjQ1NyAxNC44MzU5SDk1LjA0NTdMOTMuODQ1NyAxMC43MDc5TDkyLjU0OTcgMTQuODM1OUg5MS4zNjE3TDg5Ljg2MTcgOC4zNTU5NFpNMTAwLjkwOSAxNC45NTU5QzEwMC4yNDUgMTQuOTU1OSA5OS43MDg3IDE0Ljc5NTkgOTkuMzAwNyAxNC40NzU5Qzk4LjkwMDcgMTQuMTQ3OSA5OC43MDA3IDEzLjY0NzkgOTguNzAwNyAxMi45NzU5Qzk4LjcwMDcgMTIuMzM1OSA5OC45MTY3IDExLjg0MzkgOTkuMzQ4NyAxMS40OTk5Qzk5Ljc4MDcgMTEuMTQ3OSAxMDAuNDA1IDEwLjk3MTkgMTAxLjIyMSAxMC45NzE5SDEwMy4yMDFWMTAuNTYzOUMxMDMuMjAxIDEwLjI0MzkgMTAzLjE0OSA5Ljk5MTk0IDEwMy4wNDUgOS44MDc5NEMxMDIuOTQxIDkuNjIzOTQgMTAyLjc2OSA5LjQ5MTk0IDEwMi41MjkgOS40MTE5NEMxMDIuMjg5IDkuMzMxOTQgMTAxLjk1NyA5LjI5MTk0IDEwMS41MzMgOS4yOTE5NEMxMDAuNzczIDkuMjkxOTQgMTAwLjA2OSA5LjM5NTk0IDk5LjQyMDcgOS42MDM5NFY4LjU5NTk0Qzk5Ljc0ODcgOC40OTE5NCAxMDAuMTE3IDguNDA3OTQgMTAwLjUyNSA4LjM0Mzk0QzEwMC45NDEgOC4yNzE5NCAxMDEuMzQ5IDguMjM1OTQgMTAxLjc0OSA4LjIzNTk0QzEwMi42OTMgOC4yMzU5NCAxMDMuMzg5IDguNDM1OTQgMTAzLjgzNyA4LjgzNTk0QzEwNC4yODUgOS4yMjc5NCAxMDQuNTA5IDkuODQzOTQgMTA0LjUwOSAxMC42ODM5VjE0LjgzNTlIMTAzLjIwMVYxMS45Nzk5SDEwMS4zMDVDMTAwLjg0MSAxMS45Nzk5IDEwMC40OTcgMTIuMDU1OSAxMDAuMjczIDEyLjIwNzlDMTAwLjA1NyAxMi4zNTk5IDk5Ljk0ODcgMTIuNjE1OSA5OS45NDg3IDEyLjk3NTlDOTkuOTQ4NyAxMy4zMTk5IDEwMC4wNDkgMTMuNTYzOSAxMDAuMjQ5IDEzLjcwNzlDMTAwLjQ0OSAxMy44NDM5IDEwMC43ODUgMTMuOTExOSAxMDEuMjU3IDEzLjkxMTlDMTAxLjU3NyAxMy45MTE5IDEwMS44NTMgMTMuODc5OSAxMDIuMDg1IDEzLjgxNTlWMTQuODExOUMxMDEuNzQxIDE0LjkwNzkgMTAxLjM0OSAxNC45NTU5IDEwMC45MDkgMTQuOTU1OVpNMTAxLjY2MiA1LjYxOTk0SDEwNS4xOUwxMDUuMTQyIDYuNTMxOTRIMTAyLjc0MlY3LjM3MTk0SDEwMS42NjJWNS42MTk5NFpNMTA5LjU1OCAxNC45NTU5QzEwOS4wODYgMTQuOTU1OSAxMDguNjY2IDE0Ljg4NzkgMTA4LjI5OCAxNC43NTE5QzEwNy45MzggMTQuNjA3OSAxMDcuNjAyIDE0LjM5OTkgMTA3LjI5IDE0LjEyNzlMMTA3LjIxOCAxNC44MzU5SDEwNi4wM1Y4LjM1NTk0SDEwNy4zMzhWMTMuMTMxOUMxMDcuNTYyIDEzLjM2MzkgMTA3LjgzIDEzLjU1MTkgMTA4LjE0MiAxMy42OTU5QzEwOC40NTQgMTMuODM5OSAxMDguNzgyIDEzLjkxMTkgMTA5LjEyNiAxMy45MTE5QzEwOS41ODIgMTMuOTExOSAxMDkuOTE4IDEzLjgwMzkgMTEwLjEzNCAxMy41ODc5QzExMC4zNTggMTMuMzcxOSAxMTAuNDcgMTMuMDIzOSAxMTAuNDcgMTIuNTQzOVY4LjM1NTk0SDExMS43NjZWMTIuNjAzOUMxMTEuNzY2IDEzLjM0NzkgMTExLjU3IDEzLjkyNzkgMTExLjE3OCAxNC4zNDM5QzExMC43OTQgMTQuNzUxOSAxMTAuMjU0IDE0Ljk1NTkgMTA5LjU1OCAxNC45NTU5Wk0xMTUuNzQzIDEwLjc1NTlDMTE1Ljc0MyAxMC40MDM5IDExNS43MDcgMTAuMTI3OSAxMTUuNjM1IDkuOTI3OTRDMTE1LjU2MyA5LjcxOTk0IDExNS40MjMgOS41NjM5NCAxMTUuMjE1IDkuNDU5OTRDMTE1LjAxNSA5LjM0Nzk0IDExNC43MjMgOS4yOTE5NCAxMTQuMzM5IDkuMjkxOTRDMTE0LjA4MyA5LjI5MTk0IDExMy44MDMgOS4zMTk5NCAxMTMuNDk5IDkuMzc1OTRDMTEzLjIwMyA5LjQzMTk0IDExMi45MzUgOS41MDc5NCAxMTIuNjk1IDkuNjAzOTRWOC41OTU5NEMxMTIuOTQzIDguNDkxOTQgMTEzLjIzOSA4LjQwNzk0IDExMy41ODMgOC4zNDM5NEMxMTMuOTI3IDguMjcxOTQgMTE0LjI2MyA4LjIzNTk0IDExNC41OTEgOC4yMzU5NEMxMTUuNDU1IDguMjM1OTQgMTE2LjA3OSA4LjQyMzk0IDExNi40NjMgOC43OTk5NEMxMTYuODU1IDkuMTc1OTQgMTE3LjA1MSA5Ljc3MTk0IDExNy4wNTEgMTAuNTg3OVYxNC44MzU5SDExNS43NDNWMTAuNzU1OVpNMTE4LjU4IDguMzU1OTRIMTE5Ljc2OEwxMTkuODQgOS4wNjM5NEMxMjAuNDg4IDguNTExOTQgMTIxLjI1NiA4LjIzNTk0IDEyMi4xNDQgOC4yMzU5NEMxMjIuODI0IDguMjM1OTQgMTIzLjM1NiA4LjQzOTk0IDEyMy43NCA4Ljg0Nzk0QzEyNC4xMjQgOS4yNTU5NCAxMjQuMzE2IDkuODI3OTQgMTI0LjMxNiAxMC41NjM5VjE0LjgzNTlIMTIzLjAyVjEwLjYyMzlDMTIzLjAyIDEwLjE1OTkgMTIyLjkwOCA5LjgyMzk0IDEyMi42ODQgOS42MTU5NEMxMjIuNDY4IDkuMzk5OTQgMTIyLjEzMiA5LjI5MTk0IDEyMS42NzYgOS4yOTE5NEMxMjEuMzMyIDkuMjkxOTQgMTIxLjAwNCA5LjM2Mzk0IDEyMC42OTIgOS41MDc5NEMxMjAuMzggOS42NTE5NCAxMjAuMTEyIDkuODM5OTQgMTE5Ljg4OCAxMC4wNzE5VjE0LjgzNTlIMTE4LjU4VjguMzU1OTRaTTExOS4zNzggNi40NTk5NEgxMjMuMjQyVjUuNDYzOTRIMTI0LjMyMlY3LjM3MTk0SDExOS4zMThMMTE5LjM3OCA2LjQ1OTk0Wk0xMjMuMjQyIDMuMjQzOTRIMTI0LjMyMlY0LjkxMTk0SDEyMy4yNDJWMy4yNDM5NFpNMTI4LjA1NCAxNC45NTU5QzEyNy4zNTggMTQuOTU1OSAxMjYuODE0IDE0Ljc1MTkgMTI2LjQyMiAxNC4zNDM5QzEyNi4wMzggMTMuOTI3OSAxMjUuODQ2IDEzLjM0NzkgMTI1Ljg0NiAxMi42MDM5VjguMzU1OTRIMTI3LjE1NFYxMi41NDM5QzEyNy4xNTQgMTMuMDIzOSAxMjcuMjU4IDEzLjM3MTkgMTI3LjQ2NiAxMy41ODc5QzEyNy42ODIgMTMuODAzOSAxMjguMDIyIDEzLjkxMTkgMTI4LjQ4NiAxMy45MTE5QzEyOC44MyAxMy45MTE5IDEyOS4xNjIgMTMuODM5OSAxMjkuNDgyIDEzLjY5NTlDMTI5LjgwMiAxMy41NTE5IDEzMC4wNyAxMy4zNjM5IDEzMC4yODYgMTMuMTMxOVY4LjM1NTk0SDEzMS41ODJWMTQuODM1OUgxMzAuMzk0TDEzMC4zMzQgMTQuMTI3OUMxMjkuNjk0IDE0LjY3OTkgMTI4LjkzNCAxNC45NTU5IDEyOC4wNTQgMTQuOTU1OVpNMTI2LjY0NCA2LjQ1OTk0SDEzMC41MDhWNS40NjM5NEgxMzEuNTg4VjcuMzcxOTRIMTI2LjU4NEwxMjYuNjQ0IDYuNDU5OTRaTTEzMC41MDggMy4yNDM5NEgxMzEuNTg4VjQuOTExOTRIMTMwLjUwOFYzLjI0Mzk0WiIgZmlsbD0iIzk0OTQ5NCIvPgo8L3N2Zz4K");
              display: block;
              font-size: .75rem;
              color: #949494; }
          .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .pb-element-file_upload .input-upload-wrapper .input-upload {
            margin-left: auto;
            background-color: #3184FF;
            font-size: .875rem;
            border: 0;
            width: 5rem;
            min-width: auto; }
            .modal-complaint .modal-dialog .modal-content .modal-body .col-right .form-single .pb-element-file_upload .input-upload-wrapper .input-upload .bi-upload {
              display: none; }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-right .text {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-flow: column;
          margin-bottom: 4rem; }
        @media only screen and (min-width: 768px) {
          .modal-complaint .modal-dialog .modal-content .modal-body .col-right {
            width: 50%; } }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-right button[type="submit"] {
          border-radius: 5rem;
          font-size: .875rem; }
          .modal-complaint .modal-dialog .modal-content .modal-body .col-right button[type="submit"] .submit-arrow-icon {
            display: block !important; }
        .modal-complaint .modal-dialog .modal-content .modal-body .col-right input[type="reset"] {
          display: none; }
      .modal-complaint .modal-dialog .modal-content .modal-body .step {
        display: none;
        height: 100%; }
        .modal-complaint .modal-dialog .modal-content .modal-body .step.active {
          display: block; }

#helpdesk_livechat_container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: end;
  z-index: 10; }
  #helpdesk_livechat_container.active #hp_lc_chat_btn img {
    display: none; }
  #helpdesk_livechat_container.active #hp_lc_chat_btn::after {
    display: inline-block; }
  #helpdesk_livechat_container.active #hp_lc_chat_tools {
    display: flex; }
  #helpdesk_livechat_container #li_new_ticket {
    display: none; }
    #helpdesk_livechat_container #li_new_ticket a {
      color: #C3273F;
      background-color: rgba(195, 39, 63, 0.1); }
      #helpdesk_livechat_container #li_new_ticket a::before {
        content: "\f414";
        font-family: bootstrap-icons !important;
        display: inline-block;
        margin-right: 4px;
        vertical-align: middle; }
  #helpdesk_livechat_container.is_bot_mode #hp_lc_chat_tools_body {
    height: calc(100% - 90px - 195px); }
  #helpdesk_livechat_container.is_bot_mode #hp_lc_bot_question {
    display: block; }
  #helpdesk_livechat_container.is_bot_mode #hp_lc_chat_tools_foot {
    padding: 8px 13px 20px; }
  #helpdesk_livechat_container.is_bot_mode #hp_lc_operator_type::after {
    content: 'Instant reply'; }
  #helpdesk_livechat_container.is_bot_mode #li_new_ticket {
    display: block; }
  #helpdesk_livechat_container.is_bot_mode #hp_lc_get_chat_btn {
    bottom: 190px; }
  #helpdesk_livechat_container.is_bot_mode #hp_lc_close_ticket_btn {
    display: none;
    pointer-events: none; }

#hp_lc_chat_btn {
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  position: relative;
  background-color: #214EC1;
  border-radius: 14px; }
  #hp_lc_chat_btn img {
    position: absolute;
    width: 100%; }
  #hp_lc_chat_btn::after {
    content: '';
    width: 3.5rem;
    height: 3.5rem;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/icon/helpdesk_livechat_close.svg);
    background-position: center;
    background-repeat: no-repeat;
    display: none; }

#hp_lc_chat_tools {
  width: 400px;
  height: 680px;
  box-shadow: 0px 0px 10px 0px #787E9B40;
  margin-bottom: 15px;
  border-radius: 16px;
  display: none;
  background-color: #fff;
  flex-direction: column;
  position: relative; }

#hp_lc_chat_tools_heading {
  width: 100%;
  height: 88px;
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
  background-color: #C3273F;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center; }

#hp_lc_operator_type {
  display: inline-block;
  background-color: #891F2F;
  color: #fff;
  font-size: 14px;
  padding: 3.5px 10px;
  margin: 12px auto 8px;
  border-radius: 12px;
  line-height: 14px; }
  #hp_lc_operator_type::before {
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/icon/helpdesk_livechat_balloon.svg);
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 8px; }
  #hp_lc_operator_type::after {
    content: 'Chat with staff'; }

#hp_lc_operator_name {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center; }
  #hp_lc_operator_name .avatar {
    display: inline-block;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.75);
    margin-right: 8px; }
    #hp_lc_operator_name .avatar span {
      display: inline-block;
      width: 29px;
      height: 29px;
      border-radius: 50%;
      text-align: center;
      text-overflow: clip;
      overflow: hidden;
      font-size: 16px;
      font-weight: bold;
      line-height: 29px;
      color: #DA2132; }
    #hp_lc_operator_name .avatar i {
      width: 8px;
      height: 8px;
      border: solid 1px #fff;
      border-radius: 50%;
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: #ee434c; }
      #hp_lc_operator_name .avatar i.online {
        background-color: #2CCF4F; }

#hp_lc_chat_tools_body {
  width: calc(100% - 5px);
  margin: 5px;
  margin-left: 0;
  height: calc(100% - 90px - 85px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 13px 0; }
  #hp_lc_chat_tools_body .avatar {
    padding: 0;
    width: 36px;
    height: 36px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #C3273F;
    color: #fff;
    text-align: center;
    line-height: 36px; }
  #hp_lc_chat_tools_body .message {
    background-color: rgba(236, 234, 233, 0.5);
    border-radius: 12px;
    padding: 6px 12px;
    position: relative;
    max-width: calc(100% - 120px); }
    #hp_lc_chat_tools_body .message::after {
      content: "";
      position: absolute;
      top: 9px;
      left: 0;
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-top-color: rgba(236, 234, 233, 0.5);
      border-bottom: 0;
      border-right: 0;
      margin-left: -8px; }
  #hp_lc_chat_tools_body .chat_status {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: end; }
  #hp_lc_chat_tools_body .chat_read {
    display: none; }
  #hp_lc_chat_tools_body > li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 1rem; }
    #hp_lc_chat_tools_body > li.mine {
      flex-direction: row-reverse; }
      #hp_lc_chat_tools_body > li.mine .avatar {
        display: none; }
      #hp_lc_chat_tools_body > li.mine .message {
        background-color: rgba(195, 39, 63, 0.1);
        color: #000; }
        #hp_lc_chat_tools_body > li.mine .message::after {
          content: "";
          position: absolute;
          top: 9px;
          right: 0;
          left: unset;
          width: 0;
          height: 0;
          border: 8px solid transparent;
          border-top-color: rgba(195, 39, 63, 0.1);
          border-bottom: 0;
          border-left: 0;
          margin-right: -8px; }
      #hp_lc_chat_tools_body > li.mine .chat_read {
        display: inline-block; }
    #hp_lc_chat_tools_body > li.delete {
      display: none !important; }
    #hp_lc_chat_tools_body > li.unsend {
      justify-content: center; }
      #hp_lc_chat_tools_body > li.unsend .avatar {
        display: none; }
      #hp_lc_chat_tools_body > li.unsend .chat_status {
        display: none; }
      #hp_lc_chat_tools_body > li.unsend .message {
        text-align: center;
        font-size: 12px; }
        #hp_lc_chat_tools_body > li.unsend .message::after {
          display: none; }

#hp_lc_get_chat_btn {
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  bottom: 80px;
  text-align: center; }
  #hp_lc_get_chat_btn::before {
    content: "Loading";
    font-size: 11px;
    position: relative;
    display: inline-block;
    display: none; }
  #hp_lc_get_chat_btn.active::before {
    display: block; }
  #hp_lc_get_chat_btn.active i {
    display: none; }
  #hp_lc_get_chat_btn:hover + #hp_lc_chat_tools_foot {
    box-shadow: 0px -15px 10px 0px rgba(0, 0, 0, 0.05); }

#hp_lc_chat_tools_foot {
  padding: 20px 13px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.05);
  margin-top: auto;
  transition: box-shadow 0.3s ease; }

#hp_lc_chat_tools_frm {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center; }
  #hp_lc_chat_tools_frm input[type=submit] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; }
  #hp_lc_chat_tools_frm #hp_lc_chat_tools_message {
    padding: 8px 12px;
    border-radius: 18px;
    border: solid 1px #DEDEDE;
    margin-right: 8px;
    font-size: 14px;
    width: calc(100% - 16px - 8px); }

#hp_lc_bot_question {
  display: none; }
  #hp_lc_bot_question > div {
    font-weight: 400;
    color: #181F2D;
    padding-bottom: 3px;
    border-bottom: solid 1px #DEDEDE;
    text-align: center;
    font-size: 14px; }
  #hp_lc_bot_question ul {
    list-style-type: none;
    padding: 0;
    justify-content: center;
    align-items: baseline;
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    height: 70px;
    overflow-x: hidden;
    overflow-y: auto; }
  #hp_lc_bot_question li {
    margin: 4px 0; }
  #hp_lc_bot_question a {
    padding: 5px 12px;
    color: #004CDA;
    background-color: #E4ECFF;
    font-size: 12px;
    text-decoration: none;
    border-radius: 14px; }

#hp_lc_close_ticket_btn {
  position: absolute;
  top: 18px;
  right: 15px;
  color: #fff;
  font-size: 11px; }
  #hp_lc_close_ticket_btn i {
    margin-right: 2px; }
  #hp_lc_close_ticket_btn:hover {
    text-decoration: underline; }

#socket_status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: solid 1px #fff;
  background-color: #ee434c; }
  #socket_status.online {
    background-color: #12b061; }

.navbar-denso {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
  background-color: #FFF;
  padding: .875rem 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15); }
  .navbar-denso nav .denso-logo img {
    width: 110px; }
  .navbar-denso nav .action-tools-mobile .btn-search-mobile {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #E7EBF5;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center; }
  .navbar-denso nav .action-tools-mobile .btn-toggle-menu {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #000;
    border-radius: 0.375rem;
    padding: 6px; }
    .navbar-denso nav .action-tools-mobile .btn-toggle-menu .hamburger {
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      height: 100%;
      width: 100%; }
      .navbar-denso nav .action-tools-mobile .btn-toggle-menu .hamburger span {
        background-color: #FFF;
        height: 3px;
        border-radius: 3px; }

/*===================================*
  START FOOTER STYLE
*===================================*/
.footer {
  background-color: #1e1f21;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 1.125rem 0 1.875rem;
  color: #ffffff;
  font-size: 0.875rem;
  position: relative; }
  .footer-logo > a {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    text-decoration: none !important;
    gap: 1rem; }
  .footer-logo .logo {
    display: flex;
    align-items: center; }
    .footer-logo .logo-name {
      font-size: 1rem; }
      .footer-logo .logo-name hr {
        opacity: 1;
        margin: 0; }
      .footer-logo .logo-name-text {
        color: #C3273F;
        font-size: 1.125rem;
        font-weight: 700;
        margin-bottom: 0.5rem; }
  .footer-followus {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.875rem;
    font-weight: 600; }
    .footer-followus .followus-list {
      list-style-type: none;
      display: flex;
      padding: 0;
      margin: 0; }
      .footer-followus .followus-list li {
        margin-left: 0.5rem; }
        .footer-followus .followus-list li a {
          display: block;
          -webkit-transition: 0.3s all;
          -moz-transition: 0.3s all;
          -ms-transition: 0.3s all;
          -o-transition: 0.3s all;
          transition: 0.3s all; }
          .footer-followus .followus-list li a img {
            width: 32px;
            aspect-ratio: 1; }
          .footer-followus .followus-list li a:hover {
            transform: translateY(-5px);
            -webkit-transition: 0.3s all;
            -moz-transition: 0.3s all;
            -ms-transition: 0.3s all;
            -o-transition: 0.3s all;
            transition: 0.3s all; }
    @media only screen and (min-width: 768px) {
      .footer-followus {
        justify-content: flex-end; } }
  .footer-visitor {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.875rem;
    font-weight: 400; }
    .footer-visitor .visitor-total {
      display: flex;
      align-items: center; }
      .footer-visitor .visitor-total .number {
        width: 1.125rem;
        height: 1.5rem;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        color: #C3273F;
        background-color: #ffffff;
        margin-left: 0.25rem;
        font-weight: 600;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center; }
    @media only screen and (min-width: 768px) {
      .footer-visitor {
        justify-content: flex-end; } }
  .footer-survey {
    font-size: 0.625rem; }
    .footer-survey .nav-menu {
      margin-bottom: 0; }
  .footer-sitemap {
    height: 100%;
    margin-left: 0; }
    @media only screen and (min-width: 992px) {
      .footer-sitemap {
        margin-left: 3rem; } }
    .footer-sitemap .nav-link:hover, .footer-sitemap .nav-link.active {
      text-decoration: none;
      color: #C3273F; }
  .footer-cert img {
    transform: scale(0.9);
    transform-origin: center; }
  .footer-link {
    font-size: 0.75rem;
    font-weight: 400; }
    .footer-link ul {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      margin-left: 0;
      padding-left: 0;
      align-items: center; }
      .footer-link ul li {
        display: flex;
        align-items: center; }
        .footer-link ul li a {
          font-size: 0.75rem;
          font-weight: 400;
          color: #ffffff;
          text-decoration: none; }
        .footer-link ul li:after {
          content: "|";
          display: block;
          color: #ffffff;
          padding: 0 0.5rem;
          cursor: pointer; }
        .footer-link ul li:last-child::after {
          display: none; }
  .footer a {
    color: #ffffff;
    text-decoration: none;
    display: inline;
    margin: 0 0.25rem; }
    .footer a:first-child {
      margin-left: 0; }
    .footer a:last-child {
      margin-right: 0; }
    .footer a:hover, .footer a.active {
      text-decoration: underline; }
  .footer p {
    margin-bottom: 0.5rem; }
  .footer-address {
    font-size: 0.75rem;
    font-weight: 400; }
  .footer-copyright {
    background-color: #ffffff;
    color: #C3273F;
    font-size: 0.875rem;
    text-align: center; }

@media only screen and (min-width: 768px) {
  .footer-logo .logo-name-text {
    white-space: nowrap; } }

@media only screen and (min-width: 992px) {
  .footer {
    font-size: 0.875rem; }
    .footer-logo .logo-name {
      font-size: 0.875rem; }
      .footer-logo .logo-name--text2 {
        font-size: 0.8rem; }
    .footer-address {
      width: 80%; }
    .footer-survey {
      font-size: 0.75rem; } }

@media only screen and (min-width: 1200px) {
  .footer {
    font-size: 1rem; }
    .footer-logo .logo-name {
      font-size: 1rem; }
      .footer-logo .logo-name.website-461103077454389248 {
        font-size: 1.5rem !important;
        margin-top: -0.25rem; }
        .footer-logo .logo-name.website-461103077454389248 .logo-name--text2 {
          font-size: 0.925rem !important; }
      .footer-logo .logo-name.website-438710641696579584 {
        font-size: 1.215rem !important;
        margin-top: -0.375rem; }
        .footer-logo .logo-name.website-438710641696579584 .logo-name--text2 {
          font-size: 1.125rem !important; }
      .footer-logo .logo-name.website-461117580158050304 {
        font-size: 1.5rem !important;
        margin-top: -0.375rem; }
        .footer-logo .logo-name.website-461117580158050304 .logo-name--text2 {
          font-size: 0.875rem !important; }
    .footer-address {
      width: 75%; }
    .footer-followus .followus_label {
      font-size: 1.125rem; }
    .footer-visitor .visitor-total .number {
      width: 1.5rem;
      height: 1.875rem;
      margin-left: 0.45rem; }
    .footer-survey {
      font-size: 1rem; }
    .footer-cert img {
      transform: scale(1); }
  .copyright {
    font-size: 1rem; } }

/*===================================*
  END FOOTER STYLE
*===================================*/
.cn-no-scroll {
  position: relative;
  overflow: hidden !important; }

.cn-transition, .cn-navbar .cn-dropdown-styled .dropdown-menu, .cn-navbar .cn-services .dropdown-menu, .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu, .cn-navbar .cn-search-bar.open-mobile {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp; }

.cn-header-fixed {
  height: 80px;
  background: #ffffff;
  width: 100%;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.0784314); }

.cn-divider {
  border-color: #eee;
  opacity: 1; }

.cn-navbar {
  padding: 0.75rem 0;
  background: #ffffff;
  width: 100%;
  transition: all 0.4s ease-in-out;
  height: 80px;
  position: fixed;
  z-index: 99; }
  .cn-navbar-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem; }
  .cn-navbar-collapse {
    justify-content: end; }
  .cn-navbar .cn-hamburger-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3e6e9;
    border-radius: 100%;
    border: 0;
    outline: 0;
    box-shadow: none;
    opacity: 1;
    font-size: 1.5rem;
    width: 2.375rem;
    height: 2.375rem;
    margin-right: 0.5rem;
    margin-top: auto;
    margin-bottom: auto; }
    .cn-navbar .cn-hamburger-menu svg {
      color: #585858; }
    .cn-navbar .cn-hamburger-menu:hover, .cn-navbar .cn-hamburger-menu.active {
      background-color: var(--bgPurpleLight4); }
      .cn-navbar .cn-hamburger-menu:hover svg, .cn-navbar .cn-hamburger-menu.active svg {
        color: #C3273F; }
  .cn-navbar .cn-logo {
    padding: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 1rem; }
    .cn-navbar .cn-logo img {
      max-height: 56px;
      width: auto; }
    @media (min-width: 1200px) {
      .cn-navbar .cn-logo {
        margin-right: 5rem; } }
    .cn-navbar .cn-logo .cn-logo-image {
      width: auto;
      height: 38px;
      object-fit: contain; }
    .cn-navbar .cn-logo .cn-name {
      color: #C3273F; }
      .cn-navbar .cn-logo .cn-name h4 {
        font-size: 1.125rem;
        margin-bottom: 0; }
      .cn-navbar .cn-logo .cn-name p {
        font-size: 0.75rem;
        margin-bottom: 0; }
  .cn-navbar .navbar-nav {
    gap: 0.5rem; }
    @media (min-width: 1200px) {
      .cn-navbar .navbar-nav .main-menu {
        display: none; } }
    .cn-navbar .navbar-nav h4 {
      font-size: 1.5rem;
      font-weight: 700; }
    .cn-navbar .navbar-nav .nav-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start; }
      @media (min-width: 1200px) {
        .cn-navbar .navbar-nav .nav-item {
          flex-direction: row;
          align-items: center;
          justify-content: center;
          flex: 0 0 auto; } }
      .cn-navbar .navbar-nav .nav-item .item-link {
        display: flex;
        align-items: center;
        color: #2b2b2b; }
      .cn-navbar .navbar-nav .nav-item .btn-dropdown {
        display: flex;
        align-items: center;
        padding: 0;
        border: 0 !important;
        position: absolute;
        right: 0;
        top: 0.5rem;
        width: 40px; }
        @media (min-width: 1200px) {
          .cn-navbar .navbar-nav .nav-item .btn-dropdown {
            position: relative;
            inset: unset;
            width: auto; } }
        .cn-navbar .navbar-nav .nav-item .btn-dropdown:hover .dropdown-toggle {
          color: #C3273F; }
      .cn-navbar .navbar-nav .nav-item.active .nav-link, .cn-navbar .navbar-nav .nav-item:hover .nav-link {
        color: #C3273F;
        text-shadow: 0 0 1px #C3273F; }
      .cn-navbar .navbar-nav .nav-item .nav-link {
        color: #2b2b2b;
        font-size: 1rem;
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
        border-radius: 0.375rem;
        position: relative;
        transition: all 0.3s ease-in-out;
        width: 100%;
        gap: 0.5rem; }
        @media (min-width: 1200px) {
          .cn-navbar .navbar-nav .nav-item .nav-link {
            font-size: 0.875rem;
            padding: 0.5rem 0;
            width: auto;
            background-color: transparent; } }
        .cn-navbar .navbar-nav .nav-item .nav-link .item-link {
          position: absolute;
          inset: 0 0 0 1rem;
          transition: font-weight 0.1s ease-in-out; }
          @media (min-width: 1200px) {
            .cn-navbar .navbar-nav .nav-item .nav-link .item-link {
              inset: 0; } }
        .cn-navbar .navbar-nav .nav-item .nav-link .item-link-hover {
          font-weight: 600;
          opacity: 0;
          visibility: hidden; }
        .cn-navbar .navbar-nav .nav-item .nav-link:hover .item-link, .cn-navbar .navbar-nav .nav-item .nav-link.active .item-link {
          color: #447fec;
          font-weight: 400; }
          @media (min-width: 1200px) {
            .cn-navbar .navbar-nav .nav-item .nav-link:hover .item-link, .cn-navbar .navbar-nav .nav-item .nav-link.active .item-link {
              color: #C3273F !important;
              font-weight: 600; } }
        .cn-navbar .navbar-nav .nav-item .nav-link:hover .btn-dropdown svg, .cn-navbar .navbar-nav .nav-item .nav-link.active .btn-dropdown svg {
          fill: #447fec; }
        @media (min-width: 1200px) {
          .cn-navbar .navbar-nav .nav-item .nav-link:hover, .cn-navbar .navbar-nav .nav-item .nav-link.active {
            background: none; }
            .cn-navbar .navbar-nav .nav-item .nav-link:hover::after, .cn-navbar .navbar-nav .nav-item .nav-link.active::after {
              opacity: 1; } }
        .cn-navbar .navbar-nav .nav-item .nav-link.active {
          background-color: #dc0032; }
          @media (min-width: 1200px) {
            .cn-navbar .navbar-nav .nav-item .nav-link.active {
              background-color: transparent; } }
        .cn-navbar .navbar-nav .nav-item .nav-link .icon {
          width: 54px;
          text-align: center; }
        @media (min-width: 1200px) {
          .cn-navbar .navbar-nav .nav-item .nav-link-mb {
            padding: 0.625rem; } }
      .cn-navbar .navbar-nav .nav-item .dropdown-toggle svg {
        width: 0.75rem;
        margin-left: 0.5rem; }
      .cn-navbar .navbar-nav .nav-item .dropdown-toggle::after {
        display: none; }
      .cn-navbar .navbar-nav .nav-item .dropdown-menu {
        background-color: transparent;
        width: 100%; }
        .cn-navbar .navbar-nav .nav-item .dropdown-menu li {
          width: 100%; }
        .cn-navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item {
          display: flex;
          font-size: 0.875rem;
          border-radius: 0.375rem;
          padding: 0.375rem 0.625rem;
          padding-left: 1rem;
          margin: 0.375rem 0;
          white-space: normal !important; }
          .cn-navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item::before {
            content: "•";
            margin-right: 0.5rem; }
            @media (min-width: 1200px) {
              .cn-navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item::before {
                display: none; } }
          @media (min-width: 1200px) {
            .cn-navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item-mb {
              padding: 0.375rem 0.625rem; } }
        .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu {
          list-style: none;
          margin-bottom: 0.5rem; }
          @media (min-width: 1200px) {
            .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu {
              padding-left: 1.25rem; } }
          .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu > li {
            border: 0;
            margin-bottom: 0.5rem; }
          .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu-link {
            font-size: 0.8rem;
            color: #2b2b2b;
            text-decoration: none; }
            .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu-link:hover {
              color: #447fec; }
            .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu-link::before {
              content: "-";
              margin-right: 0.5rem; }
        .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu-toggle {
          margin-left: auto;
          margin-right: 4px;
          width: 22px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: #2b2b2b; }
          @media (min-width: 1200px) {
            .cn-navbar .navbar-nav .nav-item .dropdown-menu .submenu-toggle {
              margin-right: 0; } }
      .cn-navbar .navbar-nav .nav-item li:not(:last-child) {
        border-bottom: none; }
        @media (min-width: 1200px) {
          .cn-navbar .navbar-nav .nav-item li:not(:last-child) {
            border-bottom: 1px solid #eee; } }
    @media (min-width: 1200px) {
      .cn-navbar .navbar-nav {
        padding-left: 1.5rem;
        padding-right: 2rem;
        gap: 0.5rem;
        margin-top: 0;
        margin-left: auto; }
        .cn-navbar .navbar-nav .dropdown-menu {
          background-color: #ffffff !important;
          width: auto !important;
          max-width: 316px;
          max-height: 500px;
          overflow-y: auto; } }
    @media (min-width: 1400px) {
      .cn-navbar .navbar-nav {
        gap: 1.5rem; } }
    @media (min-width: 1600px) {
      .cn-navbar .navbar-nav {
        padding-right: 1rem;
        gap: 2rem; } }
  .cn-navbar .nav-tools {
    flex: 0 0 auto; }
  .cn-navbar .cn-nav-menu {
    flex: 0 0 auto;
    margin: auto; }
    @media (max-width: 1200px) {
      .cn-navbar .cn-nav-menu .dropdown-menu {
        box-shadow: none !important; } }
  .cn-navbar .btn-login {
    display: flex;
    align-items: center;
    border: 1px solid #C3273F;
    color: #C3273F;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 10rem;
    margin-top: auto;
    margin-bottom: auto; }
    .cn-navbar .btn-login:hover {
      background-color: #C3273F;
      color: #ffffff; }
  .cn-navbar .cn-dropdown-styled .dropdown-menu {
    border: 0;
    background-color: #ffffff;
    font-size: 1rem;
    margin-top: 0;
    padding: 0 0.375rem;
    line-height: initial;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.14); }
    .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item {
      font-size: 0.875rem;
      padding: 0.375rem 0.625rem;
      padding-left: 1rem;
      margin: 0.375rem 0; }
      .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item:hover, .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item.active {
        background-color: transparent;
        color: #C3273F; }
        @media (min-width: 1200px) {
          .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item:hover, .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item.active {
            border-radius: 0.5rem;
            background-color: #dc0032; } }
        .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item:hover .dropdown-link, .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item.active .dropdown-link {
          color: #C3273F; }
          .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item:hover .dropdown-link svg,
          .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item:hover .dropdown-link svg path, .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item.active .dropdown-link svg,
          .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item.active .dropdown-link svg path {
            fill: #C3273F; }
          .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item:hover .dropdown-link .svg-password path, .cn-navbar .cn-dropdown-styled .dropdown-menu .dropdown-item.active .dropdown-link .svg-password path {
            fill: none !important;
            stroke: #C3273F; }
    @media (min-width: 1200px) {
      .cn-navbar .cn-dropdown-styled .dropdown-menu {
        margin-top: 0.5rem; } }
  .cn-navbar .cn-dropdown-styled .dropdown-divider {
    border-color: #eceae9; }
  .cn-navbar .dropdown-profile .dropdown-menu,
  .cn-navbar .cn-user-tools .dropdown-menu {
    word-break: break-word;
    min-width: 16rem; }
  .cn-navbar .dropdown-profile .dropdown-link,
  .cn-navbar .cn-user-tools .dropdown-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #1e2022;
    gap: 0.5rem;
    text-decoration: none; }
  .cn-navbar .dropdown-profile .btn-profile,
  .cn-navbar .cn-user-tools .btn-profile {
    border: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 0.5rem; }
    .cn-navbar .dropdown-profile .btn-profile img,
    .cn-navbar .dropdown-profile .btn-profile .cn-user-name,
    .cn-navbar .cn-user-tools .btn-profile img,
    .cn-navbar .cn-user-tools .btn-profile .cn-user-name {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #C3273F;
      color: #C3273F;
      font-weight: 700;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      border: 1px solid #C3273F;
      box-shadow: 0px 0px 4px 2px rgba(68, 127, 236, 0.1); }
  .cn-navbar .dropdown-profile .icon-logout,
  .cn-navbar .cn-user-tools .icon-logout {
    font-weight: 700; }
  .cn-navbar .cn-nav-tools,
  .cn-navbar .cn-activities {
    align-items: center;
    gap: 0.5rem;
    display: flex; }
    @media (min-width: 1200px) {
      .cn-navbar .cn-nav-tools,
      .cn-navbar .cn-activities {
        gap: 0.875rem; } }
  .cn-navbar .cn-user-tools {
    display: none; }
    @media (min-width: 1200px) {
      .cn-navbar .cn-user-tools {
        display: flex; } }
  .cn-navbar .cn-lang-tools {
    display: none; }
    @media (min-width: 1200px) {
      .cn-navbar .cn-lang-tools {
        display: flex; } }
  .cn-navbar .cn-services .btn-service {
    border: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    height: 100%; }
    .cn-navbar .cn-services .btn-service p {
      margin-bottom: 0;
      text-align: left;
      line-height: 1;
      font-size: 1.125rem; }
      .cn-navbar .cn-services .btn-service p small {
        display: block;
        line-height: 1;
        color: #d9d9d9;
        font-size: 0.875rem;
        font-weight: 400; }
    .cn-navbar .cn-services .btn-service .icon {
      color: #C3273F;
      font-size: 1.125rem; }
  .cn-navbar .cn-services .dropdown-menu {
    padding: 0.75rem;
    width: 384px;
    max-width: 100%; }
    .cn-navbar .cn-services .dropdown-menu .dropdown-body {
      height: 100%;
      max-height: 560px;
      overflow-y: auto; }
    .cn-navbar .cn-services .dropdown-menu.show {
      position: fixed;
      top: 76px;
      right: 1.5rem; }
      @media (min-width: 1200px) {
        .cn-navbar .cn-services .dropdown-menu.show {
          top: 53px;
          left: auto;
          right: 4rem; } }
      @media (max-width: 434px) {
        .cn-navbar .cn-services .dropdown-menu.show {
          top: 80px;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 0;
          box-shadow: none;
          width: 100%;
          max-height: unset; }
          .cn-navbar .cn-services .dropdown-menu.show .dropdown-body {
            max-height: 100%; } }
  .cn-navbar .cn-services .cn-service-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 0; }
    .cn-navbar .cn-services .cn-service-list .service-image {
      width: 34px;
      height: 34px; }
    .cn-navbar .cn-services .cn-service-list .service-name {
      display: block;
      display: -webkit-box;
      font-size: 0.75rem;
      line-height: 1.5;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 36px;
      word-break: break-word; }
    .cn-navbar .cn-services .cn-service-list .item-link {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      border-radius: 0.5rem;
      background: transparent;
      flex-direction: column;
      gap: 0.5rem;
      font-size: 0.75rem;
      color: #1e2022;
      text-decoration: none !important;
      text-align: center;
      padding: 0.5rem 0.25rem;
      transition: all 0.3s ease-in-out; }
      .cn-navbar .cn-services .cn-service-list .item-link:hover, .cn-navbar .cn-services .cn-service-list .item-link.active {
        background: #edf2fe; }
  .cn-navbar .cn-user-menu-mobile .nav-link {
    color: #1e2022; }
    .cn-navbar .cn-user-menu-mobile .nav-link:hover, .cn-navbar .cn-user-menu-mobile .nav-link:focus, .cn-navbar .cn-user-menu-mobile .nav-link.active {
      color: #447fec !important; }
  .cn-navbar .cn-noti .btn-notification,
  .cn-navbar .cn-email .btn-notification {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: transparent;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    position: relative; }
    .cn-navbar .cn-noti .btn-notification span::before,
    .cn-navbar .cn-email .btn-notification span::before {
      font-size: 1.25rem;
      filter: invert(28%) sepia(6%) saturate(224%) hue-rotate(289deg) brightness(93%) contrast(86%); }
    .cn-navbar .cn-noti .btn-notification .notification-numbers,
    .cn-navbar .cn-email .btn-notification .notification-numbers {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 20px;
      min-width: 1rem;
      height: 1rem;
      border-radius: 100%;
      background-color: #ee434c;
      border-radius: 0.5rem;
      font-size: 0.625rem;
      padding: 0 2px;
      color: #ffffff; }
  .cn-navbar .cn-noti .dropdown-menu,
  .cn-navbar .cn-email .dropdown-menu {
    min-width: 390px;
    padding-left: 0.75rem;
    padding-right: 0.75rem; }
  .cn-navbar .notification-title {
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #202738; }
    .cn-navbar .notification-title .noti-settings {
      border: 0;
      background: transparent;
      padding: 0 0.375rem;
      margin-left: auto; }
  .cn-navbar .notification-setting {
    margin-left: auto;
    cursor: pointer; }
  .cn-navbar .notification-list {
    margin-bottom: 0;
    max-height: 320px;
    position: relative;
    overflow-y: auto;
    list-style: unset;
    padding: 0.5rem 0; }
    .cn-navbar .notification-list .list-item {
      background-color: transparent !important;
      padding: 0.5rem 0.75rem;
      border-radius: 0.5rem;
      position: relative;
      border-color: #eee !important;
      cursor: pointer; }
      .cn-navbar .notification-list .list-item:hover, .cn-navbar .notification-list .list-item:focus {
        background-color: #dc0032 !important; }
      .cn-navbar .notification-list .list-item .app-logo img,
      .cn-navbar .notification-list .list-item .icon img {
        width: 32px;
        height: 32px;
        border-radius: 100%;
        object-fit: cover; }
      .cn-navbar .notification-list .list-item .app-name {
        color: #4d4d4d;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 0; }
      .cn-navbar .notification-list .list-item .app-title {
        display: block;
        display: -webkit-box;
        font-size: 0.875rem;
        line-height: 1.5;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #202738;
        font-weight: 700;
        margin-bottom: 0; }
      .cn-navbar .notification-list .list-item .app-detail {
        display: block;
        display: -webkit-box;
        font-size: 0.75rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #6f7173; }
      .cn-navbar .notification-list .list-item .app-info {
        display: flex;
        margin-top: 2px;
        color: #2b2b2b; }
        .cn-navbar .notification-list .list-item .app-info > div {
          flex: 0 0 50%;
          width: 50%; }
        .cn-navbar .notification-list .list-item .app-info .info-label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
        .cn-navbar .notification-list .list-item .app-info .time,
        .cn-navbar .notification-list .list-item .app-info .date-time {
          text-align: right;
          color: #2b2b2b; }
      .cn-navbar .notification-list .list-item .item-wrapper {
        display: flex;
        gap: 0.5rem;
        text-decoration: none; }
      .cn-navbar .notification-list .list-item .item-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 2px;
        font-size: 0.75rem;
        color: #2b2b2b; }
        .cn-navbar .notification-list .list-item .item-content .new {
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 100%;
          background-color: #447fec;
          position: absolute;
          top: 12px;
          right: 6px; }
        .cn-navbar .notification-list .list-item .item-content .noti-text {
          display: flex;
          justify-content: space-between;
          flex-direction: column; }
          .cn-navbar .notification-list .list-item .item-content .noti-text label {
            font-size: 0.75rem;
            margin-bottom: auto; }
            .cn-navbar .notification-list .list-item .item-content .noti-text label span {
              display: block;
              font-size: 1rem;
              font-weight: bold; }
          .cn-navbar .notification-list .list-item .item-content .noti-text .noti-time {
            font-size: 0.75rem;
            color: #4d4d4d; }
  .cn-navbar .notification-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    font-size: 0.875rem;
    color: #6f7173; }
  .cn-navbar .notification-footer {
    border-top: 1px solid #eee; }
    .cn-navbar .notification-footer .view-all {
      display: flex;
      justify-content: center;
      font-size: 0.875rem;
      color: #202738;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      text-decoration: none; }
      .cn-navbar .notification-footer .view-all:hover, .cn-navbar .notification-footer .view-all:focus {
        color: #C3273F; }
  .cn-navbar .cn-user-wrapper {
    display: flex; }
    .cn-navbar .cn-user-wrapper .cn-dropdown-styled {
      margin-top: auto;
      margin-bottom: auto; }
  .cn-navbar .cn-user-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem;
    margin-right: auto; }
    .cn-navbar .cn-user-profile .name {
      font-size: 1rem;
      color: #2b2b2b;
      font-weight: 600;
      margin-bottom: 0;
      text-align: left;
      line-height: 1; }
    .cn-navbar .cn-user-profile .email {
      color: #2b2b2b;
      font-size: 0.75rem; }
    .cn-navbar .cn-user-profile .cn-user-image {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #C3273F;
      color: #C3273F;
      font-weight: 700;
      width: 45px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      margin-right: 0.25rem;
      margin-bottom: auto;
      box-shadow: 0px 0px 4px 2px rgba(68, 127, 236, 0.1); }
  .cn-navbar .cn-search-bar {
    width: 100%;
    flex: 1; }
    @media (min-width: 1200px) {
      .cn-navbar .cn-search-bar {
        max-width: 487px; } }
    .cn-navbar .cn-search-bar .cn-search-input {
      position: relative;
      display: flex; }
      .cn-navbar .cn-search-bar .cn-search-input .icon {
        display: flex;
        align-items: center;
        font-size: 1.25rem;
        position: absolute;
        left: 26px;
        top: 0;
        bottom: 0;
        z-index: 9;
        width: auto;
        height: auto; }
      .cn-navbar .cn-search-bar .cn-search-input .form-control {
        background-color: var(--bgPurpleLight2);
        box-shadow: 0 !important;
        outline: none !important;
        padding-left: 3.65rem;
        padding-right: 3rem;
        border: 0;
        border-radius: 0.625rem;
        height: 45px; }
        .cn-navbar .cn-search-bar .cn-search-input .form-control::placeholder {
          color: #6f7173;
          font-size: 0.875rem; }
    .cn-navbar .cn-search-bar .cn-search-filter {
      position: absolute;
      right: 5px;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center; }
      .cn-navbar .cn-search-bar .cn-search-filter .btn-filter {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff !important;
        height: 38px;
        width: 38px;
        border: 0;
        border-radius: 10rem; }
      .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu {
        display: none;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        width: 14rem;
        padding: 0.75rem;
        background-color: #fff;
        border: 0;
        border-radius: 0.5rem;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.14);
        margin-bottom: auto;
        opacity: 0; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .filter-wrapper {
          padding-left: 1rem; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .text-title {
          font-size: 14px;
          color: #2b2b2b;
          margin-bottom: 0.75rem; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .form-check {
          font-size: 0.875rem;
          margin-bottom: 0.5rem;
          padding: 0;
          color: #2b2b2b; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .form-check-input {
          font-size: 1rem;
          margin-top: 2px;
          margin-left: 0;
          margin-right: 10px; }
          .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .form-check-input:checked {
            background-color: #447fec;
            border-color: #447fec; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .buttons-wrapper {
          display: flex;
          justify-content: flex-end; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .btn {
          font-size: 0.875rem;
          border: 0;
          font-weight: 500;
          height: 32px; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .btn-reset {
          color: #6f7173; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu .btn-search {
          border-radius: 0.5rem;
          background-color: var(--bgPurpleLight2);
          color: #fff;
          padding: 2px 16px;
          min-width: 77px; }
        .cn-navbar .cn-search-bar .cn-search-filter .cn-filter-menu.show {
          display: block !important; }
    .cn-navbar .cn-search-bar .btn-close-search {
      display: none;
      position: absolute;
      top: 11px;
      right: 49px;
      z-index: 2048; }
      .cn-navbar .cn-search-bar .btn-close-search.show {
        display: block !important; }
    .cn-navbar .cn-search-bar.open-mobile {
      display: block;
      position: fixed;
      padding: 1rem;
      inset: 80px 0 0 0;
      background-color: #fff;
      z-index: 100; }
      @media only screen and (min-width: 1200px) {
        .cn-navbar .cn-search-bar.open-mobile {
          display: none; } }
  .cn-navbar .cn-search-mobile {
    border: 0 !important;
    display: flex;
    align-items: center; }
  @media (min-width: 1200px) {
    .cn-navbar .cn-mobile {
      display: none; } }
  @media (max-width: 1200px) {
    .cn-navbar .cn-hide-mobile {
      display: none; }
    .cn-navbar .navbar-collapse {
      position: fixed;
      z-index: 99;
      top: 80px;
      left: -100%;
      min-width: 100%;
      bottom: 0;
      overflow-y: auto;
      padding: 1rem;
      background: #ffffff;
      transition: left 0.3s ease-in-out; }
      .cn-navbar .navbar-collapse.show {
        left: 0;
        box-shadow: inset 0px 11px 5px -10px rgba(0, 0, 0, 0.13); }
        .cn-navbar .navbar-collapse.show .cn-search-bar {
          display: none; } }

.modal-noti-settings .modal-header {
  background: #f7f8f9;
  flex-direction: column;
  padding: 1rem;
  align-items: flex-start; }

.modal-noti-settings .modal-footer {
  background: #f7f8f9;
  gap: 0.5rem; }
  .modal-noti-settings .modal-footer .btn {
    margin: 0; }

@media (min-width: 768px) {
  .modal-noti-settings .modal-dialog {
    max-width: 644px; } }

.modal-noti-settings .modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem; }
  .modal-noti-settings .modal-title svg {
    width: 22px; }
  .modal-noti-settings .modal-title .title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0; }

.modal-noti-settings .noti-settings-wrapper {
  display: flex;
  align-content: stretch;
  gap: 1rem; }
  .modal-noti-settings .noti-settings-wrapper .form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0; }
    .modal-noti-settings .noti-settings-wrapper .form-switch .form-check-input {
      margin: 0;
      width: 32px;
      height: 18px; }
      .modal-noti-settings .noti-settings-wrapper .form-switch .form-check-input:checked {
        background-color: #45b934;
        border-color: #45b934; }
    .modal-noti-settings .noti-settings-wrapper .form-switch .form-check-label {
      font-size: 0.875rem;
      color: #363853; }
  .modal-noti-settings .noti-settings-wrapper .form-switch-group {
    display: flex;
    align-items: center;
    gap: 1rem; }

.modal-noti-settings .nav-noti-settings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  flex: 0 0 auto; }

.modal-noti-settings .heading-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem; }

.modal-noti-settings .content-wrapper {
  padding-left: 1rem;
  border-left: 1px solid #e1e7ed;
  width: 100%; }

.modal-noti-settings .list-noti {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }
  .modal-noti-settings .list-noti .list-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #2b2b2b; }
  .modal-noti-settings .list-noti .list-item {
    border: 1px solid #e1e7ed;
    border-radius: 0.5rem;
    padding: 0.5rem; }

.modal-noti-settings .tab-content {
  flex: 1; }

.modal-noti-settings .nav-link {
  color: #8e8b8b;
  font-weight: 500;
  border-radius: 50%;
  border-radius: 10rem;
  padding: 0.5rem 1rem;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 0.875rem; }
  .modal-noti-settings .nav-link .icon {
    width: 36px;
    display: inline-flex; }
  .modal-noti-settings .nav-link:hover, .modal-noti-settings .nav-link.active {
    color: #202738;
    background-color: #d4e3fc; }

.modal-noti-settings .app-title {
  font-size: 14px;
  font-weight: 700;
  color: #4d4d4d; }

.modal-noti-settings .btn-cancel {
  border: 1px solid #ff6d6d;
  color: #ff6d6d; }

.template-side hr {
  border-color: var(--bgLightBlue);
  border-width: 3px;
  opacity: 1;
  border-radius: 1rem; }

.template-side a {
  color: var(--textBlue); }
  .template-side a:hover {
    color: var(--textLightBlue); }

.template-side .dropdown-category {
  position: relative; }
  @media only screen and (max-width: 767px) {
    .template-side .dropdown-category #ddCategory {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 2; }
      .template-side .dropdown-category #ddCategory:checked ~ .dropdown-selected:after {
        content: '\f005'; }
      .template-side .dropdown-category #ddCategory:checked ~ .side-menu {
        opacity: 1; }
    .template-side .dropdown-category .dropdown-selected {
      padding: .5rem 2rem .5rem 1rem;
      border: 1px solid var(--bgLightBlue);
      border-radius: .5rem;
      background-color: var(--bgWhite);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .template-side .dropdown-category .dropdown-selected:after {
        content: '\f004';
        font-family: "fontello";
        display: block;
        font-size: .875rem;
        position: absolute;
        right: 1.35rem;
        top: 0.6rem; }
    .template-side .dropdown-category ul {
      list-style-type: none;
      padding-left: 0; }
      .template-side .dropdown-category ul li {
        position: relative; }
        .template-side .dropdown-category ul li .menu-item {
          border-bottom: 1px solid var(--borderGrey2);
          display: flex;
          padding: 0.65rem 1rem; }
          .template-side .dropdown-category ul li .menu-item a {
            width: calc(100% - 3rem);
            color: inherit;
            padding-left: .5rem; }
            .template-side .dropdown-category ul li .menu-item a:before {
              content: "";
              border-radius: 50%;
              width: 4px;
              height: 4px;
              background-color: var(--bs-dark);
              display: block;
              top: 0.75rem;
              left: -0.65rem;
              position: relative; }
          .template-side .dropdown-category ul li .menu-item .arrow {
            width: 3rem;
            text-align: right;
            padding-top: 0.25rem; }
            .template-side .dropdown-category ul li .menu-item .arrow i {
              display: inline-block;
              transition: all .3s; }
          .template-side .dropdown-category ul li .menu-item.open .arrow {
            padding-top: 0rem; }
            .template-side .dropdown-category ul li .menu-item.open .arrow i {
              transform: rotate(-180deg);
              transition: all .3s; }
          .template-side .dropdown-category ul li .menu-item.active {
            background-color: var(--bgLightBlue);
            color: var(--textWhite);
            font-weight: 600; }
            .template-side .dropdown-category ul li .menu-item.active a:before {
              background-color: var(--bgWhite); }
      .template-side .dropdown-category ul .side-submenu {
        display: none; }
    .template-side .dropdown-category ul ul li .menu-item a {
      padding-left: 1rem; }
    .template-side .dropdown-category ul ul ul li .menu-item a {
      padding-left: 1.5rem; }
    .template-side .dropdown-category ul ul ul ul li .menu-item a {
      padding-left: 2rem; }
    .template-side .dropdown-category ul ul ul ul ul li .menu-item a {
      padding-left: 2.5rem; }
    .template-side .dropdown-category .side-menu {
      position: absolute;
      opacity: 0;
      width: 100%;
      border-radius: 0.35rem;
      top: 2.75rem;
      border: 1px solid var(--bgLightBlue);
      padding: 0rem;
      background-color: var(--bgWhite);
      overflow-y: auto;
      max-height: 25rem;
      z-index: 2; } }
  @media only screen and (min-width: 768px) {
    .template-side .dropdown-category ul {
      list-style-type: none;
      padding-left: 0;
      position: relative;
      opacity: 1;
      background-color: transparent;
      padding: 0;
      border: 0;
      top: 0; }
      .template-side .dropdown-category ul li .menu-item {
        border-radius: .25rem;
        margin-top: 0.53rem; }
        .template-side .dropdown-category ul li .menu-item a {
          padding: .5rem .5rem .5rem 1.25rem;
          display: flex;
          flex: 1;
          color: inherit;
          border-radius: .25rem; }
          .template-side .dropdown-category ul li .menu-item a:before {
            content: "";
            border-radius: 50%;
            width: 4px;
            height: 4px;
            background-color: var(--bs-dark);
            display: block;
            top: 0.5rem;
            left: -0.5rem;
            position: relative; }
          .template-side .dropdown-category ul li .menu-item a span {
            width: calc(100% - 4px); }
        .template-side .dropdown-category ul li .menu-item:after {
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          position: relative;
          background-color: var(--borderGrey2);
          bottom: -0.3rem; }
        .template-side .dropdown-category ul li .menu-item:hover, .template-side .dropdown-category ul li .menu-item.active {
          background-color: var(--bgLightBlue);
          color: var(--textWhite); }
          .template-side .dropdown-category ul li .menu-item:hover a::before, .template-side .dropdown-category ul li .menu-item.active a::before {
            background-color: var(--bgWhite); }
        .template-side .dropdown-category ul li .menu-item .arrow {
          display: none; }
      .template-side .dropdown-category ul .side-submenu {
        display: block !important; }
    .template-side .dropdown-category ul ul li .menu-item a {
      padding-left: 2rem; }
    .template-side .dropdown-category ul ul ul li .menu-item a {
      padding-left: 3rem; }
    .template-side .dropdown-category ul ul ul ul li .menu-item a {
      padding-left: 4rem; }
    .template-side .dropdown-category ul ul ul ul ul li .menu-item a {
      padding-left: 5rem; } }

@media only screen and (min-width: 1200px) {
  .template-side {
    padding-right: 1.5rem; } }

@media only screen and (min-width: 1400px) {
  .template-side {
    padding-right: 2.5rem; } }

.template-title {
  margin-bottom: 0; }
  .template-title a {
    color: #000; }

.template-content {
  margin-top: 1.5rem; }
  @media only screen and (min-width: 768px) {
    .template-content {
      margin-top: 0; } }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px; }
  html ::-webkit-scrollbar-thumb {
    height: 3px;
    min-height: 10px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-color: #aaaaaa;
    -webkit-border-radius: 7px; }
  html ::-webkit-scrollbar {
    width: 6px;
    height: 4px; }
  html ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0; }
  html ::-webkit-scrollbar-corner {
    background-color: transparent; }

body {
  position: relative;
  font-family: "kanit", "Noto Sans Thai", sans-serif;
  overflow-x: hidden;
  font-weight: 400;
  box-sizing: border-box;
  line-height: 1.4;
  color: #2b2b2b;
  padding: 0;
  background-color: #ffffff; }
  @media only screen and (min-width: 1200px) {
    body.page-course .navbar-denso, body.page-course .portal-sidebar {
      display: none; } }

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 600; }

a {
  text-decoration: none;
  color: #2b2b2b; }
  a:hover {
    text-decoration: none;
    color: #2b2b2b; }

hr {
  opacity: 1;
  border-color: #eceae9 !important; }

.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #fff;
  border: 1px solid #d2d6db;
  border-radius: 100%;
  position: fixed;
  bottom: 5rem;
  right: 0.75rem;
  z-index: 805;
  cursor: pointer; }

.fw-medium {
  font-weight: 500 !important; }

.custom-tooltip {
  --bs-tooltip-bg: #FFF;
  --bs-tooltip-color: #000;
  --bs-tooltip-border-radius: 2rem; }

.breadcrumb {
  background-color: #FFF;
  border-radius: .5rem;
  padding: .75rem 1.125rem; }
  .breadcrumb-item {
    color: #C0C0C0; }
    .breadcrumb-item a {
      color: #C0C0C0 !important; }
    .breadcrumb-item.active {
      color: #C3273F; }
      .breadcrumb-item.active a {
        color: #C3273F; }

.wrapper-intro {
  background-image: url("../images/loading/l-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media only screen and (max-width: 443px) {
    .wrapper-intro > img {
      max-width: 80vw; } }
  .wrapper-intro .loading {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%; }
    .wrapper-intro .loading > div:first-child {
      background-image: url("../images/loading/l-01.png");
      background-position: center;
      background-size: cover;
      background-repeat: repeat-x;
      width: 100vw;
      height: 4rem;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      animation: road 12s infinite linear; }
    .wrapper-intro .loading > div:last-child {
      background-image: url("../images/loading/l-02.png");
      background-position: top;
      background-size: cover;
      background-repeat: repeat-x;
      width: 100vw;
      height: 8.5rem;
      position: absolute;
      bottom: 3.5rem;
      left: 0;
      animation: tree 10s infinite linear; }
    .wrapper-intro .loading > div.car {
      position: absolute;
      left: 47vw;
      bottom: 2.25rem;
      z-index: 1; }
      .wrapper-intro .loading > div.car > div:first-child {
        background-image: url("../images/loading/l-03.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 11.5rem;
        height: 6.25rem;
        animation: car 2s infinite linear; }
      .wrapper-intro .loading > div.car > div:nth-last-child(2), .wrapper-intro .loading > div.car > div:last-child {
        background-image: url("../images/loading/l-04.png");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 1rem;
        height: 0.75rem;
        position: absolute;
        animation: smoke 2s infinite linear; }
      .wrapper-intro .loading > div.car > div:nth-last-child(2) {
        bottom: 1.5rem;
        left: -1.5rem; }
      .wrapper-intro .loading > div.car > div:last-child {
        bottom: 2.5rem;
        left: -2.75rem;
        animation-delay: 1s; }
      @media only screen and (max-width: 443px) {
        .wrapper-intro .loading > div.car {
          left: 28vw; } }
  .wrapper-intro.animate__fadeOut {
    z-index: 0; }

.swal2-container .swal2-popup {
  max-width: 22rem; }

.swal2-container .swal2-title {
  color: #000;
  font-size: 1.25rem; }

.swal2-container .swal2-actions {
  width: 100%;
  flex-flow: column;
  padding: 0 1rem; }
  .swal2-container .swal2-actions button {
    width: 100%; }
    .swal2-container .swal2-actions button.btn-confirm {
      background-color: #0075FF !important;
      border-color: #0075FF !important; }
    .swal2-container .swal2-actions button.btn-cancel {
      background-color: transparent !important;
      border-color: #D6D6D6 !important;
      color: #2b2b2b !important; }

.swal2-container .swal2-html-container {
  padding: 0 !important;
  margin: .5rem;
  font-size: .875rem; }

.active-alert-container .swal2-popup {
  padding: 1rem !important;
  border-radius: .75rem; }

.active-alert-container .swal2-image {
  position: absolute;
  width: 10rem;
  top: -8.5rem;
  right: 0; }

.active-alert-container .swal2-title {
  margin-bottom: 1.375rem;
  text-align: left;
  padding: 0;
  margin-top: .5rem;
  font-size: 1.375rem; }

.active-alert-container .swal2-html-container {
  text-align: left;
  font-size: 1rem;
  margin: 0; }

.active-alert-container .swal2-actions {
  display: block !important;
  padding: 0;
  margin-top: 2.5rem; }
  .active-alert-container .swal2-actions .btn {
    width: 100%;
    max-width: 100%;
    border-radius: 5rem;
    padding: .5rem;
    box-shadow: none !important;
    font-weight: 400; }
    .active-alert-container .swal2-actions .btn.swal2-cancel {
      border: 1px solid #CCC; }

.circular-loader {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 1rem auto; }

.circular {
  position: absolute;
  background-color: #4E5A61;
  width: 11px;
  height: 11px;
  border-radius: 8px;
  animation: bounce_circularG  0.8s infinite linear; }

.circular-loader div:nth-child(1) {
  left: 0;
  top: 20px;
  animation-delay: 0.3s;
  opacity: .7; }

.circular-loader div:nth-child(2) {
  left: 5px;
  top: 5px;
  animation-delay: 0.4s; }

.circular-loader div:nth-child(3) {
  top: 0;
  left: 20px;
  animation-delay: 0.5s; }

.circular-loader div:nth-child(4) {
  right: 5px;
  top: 5px;
  animation-delay: 0.6s;
  opacity: .1; }

.circular-loader div:nth-child(5) {
  right: 0;
  top: 20px;
  animation-delay: 0.7s;
  opacity: .2; }

.circular-loader div:nth-child(6) {
  right: 5px;
  bottom: 5px;
  animation-delay: 0.8s;
  opacity: .3; }

.circular-loader div:nth-child(7) {
  left: 20px;
  bottom: 0;
  animation-delay: 0.85s;
  opacity: .4; }

.circular-loader div:nth-child(8) {
  left: 5px;
  bottom: 5px;
  animation-delay: 1s;
  opacity: .5; }

@keyframes bounce_circularG {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0.3); } }

.single-body {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 0.75rem; }
  .single-body .btn-primary {
    padding: 0.25rem 2rem; }

.single .box-title {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #b7b7b7; }

.single .title {
  font-size: 1.125rem;
  margin-bottom: 0; }
  @media only screen and (min-width: 768px) {
    .single .title {
      font-size: 1.25rem; } }

.single-content img {
  max-width: 100%;
  height: auto; }

.single-category {
  background-color: #C3273F;
  min-width: 6.25rem;
  padding: 0.45rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  border-radius: 0.15rem; }
  .single-category a {
    color: initial; }

.single-title {
  color: #2b2b2b; }

.single-author {
  display: flex;
  align-items: center;
  gap: 0.75rem; }
  .single-author .profile {
    max-width: 3rem;
    border-radius: 50%;
    background-color: #ffffff; }
    .single-author .profile img {
      border-radius: 100%;
      aspect-ratio: 1; }

.single-tags {
  position: relative; }
  .single-tags .tags {
    padding: 1.5rem 0; }
    .single-tags .tags .tag-item {
      border: 1px solid #C3273F; }
      .single-tags .tags .tag-item a {
        font-size: 1rem;
        text-decoration: none;
        color: #2b2b2b; }
      .single-tags .tags .tag-item:hover {
        background-color: #C3273F; }
        .single-tags .tags .tag-item:hover a {
          color: #ffffff; }
    .single-tags .tags:after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      height: 1px;
      width: 100%;
      max-width: 23.625rem;
      background-color: #b7b7b7; }

.single-line {
  display: flex;
  align-items: center;
  justify-content: center; }
  .single-line hr {
    width: 50%;
    color: #e4e4e4;
    opacity: 1 !important; }

.single-date, .single-view {
  color: #b7b7b7;
  font-size: 0.875rem; }
  .single-date i:not(.icon-eye), .single-view i:not(.icon-eye) {
    font-size: 1rem; }
  .single-date i.icon-eye, .single-view i.icon-eye {
    margin-right: 0.25rem; }

.single-share {
  display: flex;
  align-items: center;
  gap: 1rem; }
  .single-share .item-followus {
    cursor: pointer;
    transition: 0.3s all; }
    .single-share .item-followus:hover {
      transform: translateY(-5px);
      transition: 0.3s all; }
  .single-share .clipboard {
    background: #dc0032;
    font-size: 0.875rem;
    color: #2b2b2b;
    padding: 0.5rem;
    border-radius: 0.25rem;
    position: absolute;
    right: 7rem;
    bottom: -3rem;
    z-index: 10;
    display: none; }
    .single-share .clipboard.active {
      display: block; }

.single .gallery-item {
  padding-bottom: 58%; }
  .single .gallery-item img {
    max-height: 190px; }

.box-comment {
  padding: 0 1rem; }
  .box-comment .t-comment {
    padding: 1rem 0;
    margin-bottom: 1.25rem;
    font-size: 1.125rem; }
  @media only screen and (min-width: 992px) {
    .box-comment {
      padding: 0 5rem; } }
  .box-comment .profile {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; }
    .box-comment .profile-cm {
      width: 100%;
      padding-bottom: 0.5rem;
      margin-bottom: 0.5rem;
      border-bottom: 1px solid #b7b7b7; }
    .box-comment .profile img {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      margin-right: 0.25rem;
      object-fit: cover;
      flex: 0 0 2rem; }
      @media only screen and (min-width: 992px) {
        .box-comment .profile img {
          width: 2.625rem;
          height: 2.625rem;
          flex: 0 0 2.625rem; } }
    .box-comment .profile .text p {
      font-size: 1rem;
      margin-bottom: 0; }
    .box-comment .profile .text span {
      font-size: 0.875rem;
      color: #b7b7b7; }
  .box-comment .like-comment {
    color: #b7b7b7; }
    .box-comment .like-comment.like .icon-heart:before {
      content: "\e927";
      color: #ee434c; }
    .box-comment .like-comment:hover .icon-heart:before {
      content: "\e927";
      color: #ee434c; }
  .box-comment .delete-comment {
    padding: 0 0.25rem;
    color: #ee434c;
    cursor: pointer; }
    .box-comment .delete-comment:hover {
      opacity: 0.6; }
  .box-comment .other-comment {
    background: #dc0032;
    padding: 1rem 1.125rem;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    position: relative;
    word-break: break-word; }
    .box-comment .other-comment:last-of-type {
      margin-bottom: 1.5rem; }
      @media only screen and (min-width: 992px) {
        .box-comment .other-comment:last-of-type {
          margin-bottom: 2.5rem; } }
    .box-comment .other-comment .text-comment {
      font-size: 1rem;
      color: #2b2b2b; }

.pb-100 {
  padding-bottom: 100%; }

.pb-70 {
  padding-bottom: 70%; }

.pb-80 {
  padding-bottom: 80%; }

.object-fit-cover {
  object-fit: cover; }

.form-control-word {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  background-color: #ffffff; }
  .form-control-word .form-control {
    max-width: 15rem; }
  .form-control-word--btn {
    margin: 0 0.5rem; }
    .form-control-word--btn .btn {
      padding: 0.25rem;
      border: 0; }
      .form-control-word--btn .btn:disabled {
        opacity: 0.4; }

.main-content-search .box-search {
  background-color: var(--bgWhite);
  border-radius: 0.75rem;
  padding: 1.25rem 2rem;
  min-height: calc(100vh - 11.85rem); }
  @media only screen and (min-width: 1200px) {
    .main-content-search .box-search {
      padding: 1.25rem 3rem; } }

.main-content-search .form-search {
  display: flex;
  gap: 1rem;
  position: relative; }
  .main-content-search .form-search .form-control {
    border-radius: 3rem;
    padding-left: 3rem; }
    .main-content-search .form-search .form-control::placeholder {
      color: var(--textGrey2); }
  .main-content-search .form-search .icon-filter {
    position: absolute;
    left: 0.5rem;
    font-size: 1.25rem;
    top: 0.35rem;
    color: var(--textGrey2); }
  .main-content-search .form-search .icon-search {
    position: absolute;
    left: 0.5rem;
    font-size: 1.5rem;
    top: 0.25rem;
    color: var(--textGrey2); }
  .main-content-search .form-search .btn-primary {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .main-content-search .form-search .btn-primary .icon-search {
      position: relative;
      color: var(--textWhite);
      left: 0;
      top: 0;
      font-size: 1.125rem; }
    @media only screen and (min-width: 992px) {
      .main-content-search .form-search .btn-primary {
        position: relative;
        width: 6.5rem;
        font-size: 1.125rem; } }

.main-content-search .search-tags {
  display: flex;
  flex-wrap: wrap; }
  .main-content-search .search-tags .tag-lists li {
    cursor: pointer; }
    .main-content-search .search-tags .tag-lists li .tag_btn {
      cursor: pointer;
      display: inline-block;
      padding: 0 .45rem; }
      .main-content-search .search-tags .tag-lists li .tag_btn:before {
        display: block;
        content: attr(title);
        font-weight: bold;
        height: 0;
        overflow: hidden;
        visibility: hidden; }
    .main-content-search .search-tags .tag-lists li:after {
      content: "";
      display: block;
      width: 0;
      height: 3px;
      background-color: var(--bgBlue);
      transition: all .3s; }
    .main-content-search .search-tags .tag-lists li:hover {
      font-weight: 600;
      color: var(--textBlue); }
    .main-content-search .search-tags .tag-lists li.active {
      font-weight: 600;
      color: var(--textBlue); }
      .main-content-search .search-tags .tag-lists li.active:after {
        width: 100%;
        transition: all .3s; }

.main-content-search .form-check {
  line-height: 1.7; }
  .main-content-search .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: .15rem; }
    .main-content-search .form-check-input:checked {
      background-color: var(--bgLightBlue);
      border-color: var(--bgLightBlue); }
  .main-content-search .form-check-label {
    padding-left: .5rem; }

.main-content-search .offcanvas {
  max-width: 80%; }
  @media only screen and (min-width: 992px) {
    .main-content-search .offcanvas {
      max-width: 100%;
      width: 100%;
      position: relative;
      transform: translateX(0);
      visibility: visible !important;
      border: 0;
      transition: none; } }

.main-content-search .search-aside .search-tags .tag-lists li {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  border: 1px solid var(--bgLightPurple); }
  .main-content-search .search-aside .search-tags .tag-lists li .tag_btn {
    cursor: pointer; }
  .main-content-search .search-aside .search-tags .tag-lists li.active {
    background-color: var(--bgLightPurple); }
  .main-content-search .search-aside .search-tags .tag-lists li:after {
    display: none; }

@media only screen and (min-width: 992px) {
  .main-content-search .search-aside {
    max-height: 50rem;
    overflow-y: auto;
    z-index: 0; }
    .main-content-search .search-aside::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 10px;
      margin-right: 1rem; }
    .main-content-search .search-aside::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background-color: #f5f5f5; }
    .main-content-search .search-aside::-webkit-scrollbar-thumb {
      background-color: #dddddd;
      border-radius: 10px; } }

.search-group {
  display: flex;
  width: 100%;
  gap: 1rem; }
  .search-group .search-bar-small {
    flex: 1; }
  .search-group .btn {
    padding-left: 2rem;
    padding-right: 2rem; }

.right-pane {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  height: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  transition: all 0.3s ease-in-out; }
  .right-pane.full-width {
    margin-left: 0;
    width: 100%;
    max-width: 100%; }
  @media only screen and (min-width: 1200px) {
    .right-pane {
      max-width: calc(100% - 16rem); } }

.page-not-found {
  min-height: calc(100vh - 120px); }
  .page-not-found > img {
    width: 300px; }
    @media only screen and (min-width: 576px) {
      .page-not-found > img {
        width: 400px; } }
    @media only screen and (min-width: 768px) {
      .page-not-found > img {
        width: 500px; } }
  .page-not-found .btn-primary {
    padding: 0.5rem 1.5rem; }

.home {
  padding-bottom: 5.375rem; }
  .home .title-home {
    font-size: 1.375rem;
    margin-bottom: 0; }
    @media only screen and (min-width: 768px) {
      .home .title-home {
        font-size: 1.5rem; } }
    @media only screen and (min-width: 992px) {
      .home .title-home {
        font-size: 1.875rem; } }
  @media only screen and (min-width: 768px) {
    .home .box-main {
      margin-right: 2rem;
      margin-left: 2rem; } }
  .home .box-tag {
    overflow-x: auto;
    overflow-y: hidden; }
    .home .box-tag .tag {
      font-size: 0.875rem;
      color: var(--textGrayDeep2);
      padding: 0.375rem 0.75rem;
      border-radius: 4rem;
      white-space: nowrap;
      position: relative; }
      @media only screen and (min-width: 768px) {
        .home .box-tag .tag {
          font-size: 1.125rem; } }
      .home .box-tag .tag.active, .home .box-tag .tag:hover {
        font-weight: 500;
        color: var(--primary); }
        .home .box-tag .tag.active::after, .home .box-tag .tag:hover::after {
          opacity: 1; }
      .home .box-tag .tag::after {
        content: "•";
        display: block;
        width: 30%;
        height: 4px;
        position: absolute;
        top: 24%;
        left: 0;
        transform: translate(0, -50%);
        opacity: 0;
        transition: opacity 0.2s ease-in-out; }
  .home .bg-slide {
    position: relative;
    padding-left: 1.25rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem; }
    .home .bg-slide::after {
      content: "";
      background-color: var(--bgPurpleLight5);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 65%;
      border-radius: 0.5rem; }
  .home .box-link {
    background: #ffffffcc;
    border-radius: 4rem;
    padding: 0.5rem 2rem;
    box-shadow: 0px 4px 4px 0px #00000024;
    position: relative;
    margin-top: -4rem;
    margin-bottom: 3.5rem;
    z-index: 2; }
    @media only screen and (min-width: 768px) {
      .home .box-link {
        padding: 1rem 2.5rem; } }
    @media only screen and (min-width: 992px) {
      .home .box-link {
        padding: 1rem 3.375rem; } }
    .home .box-link .content-link {
      display: flex;
      justify-content: space-between;
      gap: 1.25rem;
      overflow-x: auto;
      overflow-y: hidden; }
    .home .box-link .text-icon {
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.25rem;
      color: var(--primary);
      padding: 0.5rem;
      border-radius: 0.5rem;
      white-space: nowrap; }
      .home .box-link .text-icon .text {
        font-size: 0.75rem;
        font-weight: 500;
        margin-bottom: 0; }
      .home .box-link .text-icon:hover {
        background: var(--bgPurpleLight5); }
      @media only screen and (min-width: 992px) {
        .home .box-link .text-icon {
          padding: 0.5rem; }
          .home .box-link .text-icon .text {
            font-size: 1rem; } }
  .home .box-news {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 4.125rem 0 6.25rem;
    position: relative; }
  .home .box-media {
    position: relative;
    z-index: 2; }
  .home .box-poster {
    background-image: url("../images/mock/banner-moc.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 146px;
    max-width: 1080px;
    margin: auto; }
    @media only screen and (min-width: 768px) {
      .home .box-poster {
        padding: 1.5rem 3rem;
        height: 220px; } }
    @media only screen and (min-width: 1200px) {
      .home .box-poster {
        padding: 2.5rem 3rem;
        height: 300px; } }
    .home .box-poster .text {
      color: var(--white); }
      .home .box-poster .text h4 {
        font-size: 1.375rem;
        font-weight: 500;
        width: 200px; }
        @media only screen and (min-width: 768px) {
          .home .box-poster .text h4 {
            font-size: 1.875rem;
            width: 268px; } }
        @media only screen and (min-width: 992px) {
          .home .box-poster .text h4 {
            font-size: 2.375rem;
            width: 340px; } }
        @media only screen and (min-width: 1400px) {
          .home .box-poster .text h4 {
            font-size: 2.325rem; } }
  .home .body-left {
    width: 100%;
    flex: 0 0 100%;
    height: 100%;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2; }
    @media only screen and (min-width: 1200px) {
      .home .body-left {
        width: 36%;
        flex: 0 0 36%;
        margin-bottom: 0; } }
    .home .body-left .tab-pane {
      box-shadow: 0px 4px 4px 0px #00000024;
      border-radius: 0rem 0rem 0.5rem 0.5rem;
      padding: 1rem;
      height: 100%;
      min-height: 770px; }
      .home .body-left .tab-pane.nav-calendar {
        border-radius: 0rem 0.5rem 0.5rem 0.5rem;
        background-color: var(--primary); }
    .home .body-left .box-tag .tag {
      font-size: 0.875rem; }
  .home .body-right {
    width: 100%;
    flex: 0 0 100%;
    height: 100%; }
    @media only screen and (min-width: 1200px) {
      .home .body-right {
        width: 62%;
        flex: 0 0 62%; } }
  .home .box-book {
    background: var(--bgPurpleLight5);
    padding: 2.875rem 0;
    margin-bottom: 3.75rem;
    margin-top: 2.313rem; }
    .home .box-book .book-wrapper {
      position: relative;
      margin-bottom: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      @media only screen and (min-width: 768px) {
        .home .box-book .book-wrapper {
          flex-direction: column;
          align-items: flex-start; } }
      .home .box-book .book-wrapper h4 {
        text-align: center; }
      @media only screen and (min-width: 992px) {
        .home .box-book .book-wrapper {
          position: absolute; }
          .home .box-book .book-wrapper h4 {
            text-align: left; } }
    .home .box-book .splide-book {
      margin-left: auto; }
    .home .box-book .b-right {
      margin-left: auto; }
  .home .box-activity .activity-content {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--primary);
    padding: 0.625rem;
    display: flex;
    align-items: center;
    gap: 1rem; }
    .home .box-activity .activity-content .t-activity {
      display: -webkit-box;
      height: 2.8rem;
      font-size: 1rem;
      line-height: 1.4;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--white);
      font-weight: 500;
      margin-bottom: 0; }
    .home .box-activity .activity-content .time {
      font-size: 0.75rem;
      color: var(--textSkyblue); }
    .home .box-activity .activity-content .box-event {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      width: 90%;
      flex: 0 0 90%; }
    .home .box-activity .activity-content .icon {
      color: var(--white);
      width: 10%;
      flex: 0 0 10%; }
    .home .box-activity .activity-content .date {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border: 1px solid var(--white);
      font-size: 1.25rem;
      padding: 0.625rem 0.5rem;
      border-radius: 1rem;
      width: 70px;
      flex: 0 0 70px;
      color: var(--white); }
      .home .box-activity .activity-content .date small {
        font-size: 0.875rem; }
    .home .box-activity .activity-content .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 76%;
      flex: 0 0 76%; }
      @media only screen and (min-width: 1400px) {
        .home .box-activity .activity-content .content {
          width: 78%;
          flex: 0 0 78%; } }

.portal-banner {
  margin-left: -1rem;
  margin-right: -1rem; }
  .portal-banner .splide-portal-banner .splide__slide {
    height: 30rem;
    position: relative; }
    .portal-banner .splide-portal-banner .splide__slide .bg img {
      width: 100%;
      position: absolute;
      height: 100%;
      left: 0;
      top: 0; }
    .portal-banner .splide-portal-banner .splide__slide .content-text {
      position: absolute;
      left: 1rem;
      top: 2rem; }
      .portal-banner .splide-portal-banner .splide__slide .content-text .label-status {
        background-color: #109944;
        color: #FFF;
        font-weight: 300;
        padding: .22rem 1rem;
        margin-bottom: .625rem;
        font-size: .75rem; }
      .portal-banner .splide-portal-banner .splide__slide .content-text .text {
        font-size: .875rem;
        max-width: 85%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5; }
        .portal-banner .splide-portal-banner .splide__slide .content-text .text h1 {
          font-size: calc(1.375rem + 1.5vw); }
        .portal-banner .splide-portal-banner .splide__slide .content-text .text h2 {
          font-size: calc(1.25rem + .9vw); }
        .portal-banner .splide-portal-banner .splide__slide .content-text .text h3 {
          font-size: calc(1.125rem + .6vw); }
        .portal-banner .splide-portal-banner .splide__slide .content-text .text h4, .portal-banner .splide-portal-banner .splide__slide .content-text .text h5, .portal-banner .splide-portal-banner .splide__slide .content-text .text h6 {
          font-size: 1rem; }
        .portal-banner .splide-portal-banner .splide__slide .content-text .text p {
          margin-bottom: 0; }
      .portal-banner .splide-portal-banner .splide__slide .content-text .btn-link {
        background-color: #045EE5;
        padding: .35rem 1rem;
        margin-top: 1rem; }
    .portal-banner .splide-portal-banner .splide__slide .content-image {
      position: absolute;
      z-index: 2;
      bottom: 0;
      right: 0;
      max-width: 18rem; }
      .portal-banner .splide-portal-banner .splide__slide .content-image img {
        width: 100%; }
    @media screen and (min-width: 768px) {
      .portal-banner .splide-portal-banner .splide__slide {
        height: 16.25rem;
        overflow: hidden; }
        .portal-banner .splide-portal-banner .splide__slide .content-text {
          left: 2rem; }
          .portal-banner .splide-portal-banner .splide__slide .content-text .text {
            -webkit-line-clamp: 4;
            max-width: 50%; } }
    @media screen and (min-width: 1200px) {
      .portal-banner .splide-portal-banner .splide__slide {
        border-radius: .75rem; }
        .portal-banner .splide-portal-banner .splide__slide .content-text {
          left: 5rem;
          top: 50%;
          transform: translateY(-50%); }
          .portal-banner .splide-portal-banner .splide__slide .content-text .label-status {
            font-size: .875rem; }
          .portal-banner .splide-portal-banner .splide__slide .content-text .text {
            max-width: 40%; }
            .portal-banner .splide-portal-banner .splide__slide .content-text .text h1 {
              font-size: 1.875rem; }
            .portal-banner .splide-portal-banner .splide__slide .content-text .text h2 {
              font-size: 1.625rem; }
            .portal-banner .splide-portal-banner .splide__slide .content-text .text h3 {
              font-size: 1.375rem; }
            .portal-banner .splide-portal-banner .splide__slide .content-text .text h4 {
              font-size: 1.125rem; }
            .portal-banner .splide-portal-banner .splide__slide .content-text .text h5, .portal-banner .splide-portal-banner .splide__slide .content-text .text h6 {
              font-size: 1rem; }
        .portal-banner .splide-portal-banner .splide__slide .content-image {
          max-width: 26.25rem; } }
    @media screen and (min-width: 1600px) {
      .portal-banner .splide-portal-banner .splide__slide .content-text {
        left: 7rem; }
        .portal-banner .splide-portal-banner .splide__slide .content-text .text {
          max-width: 70%; }
      .portal-banner .splide-portal-banner .splide__slide .content-image {
        right: 7rem;
        max-width: 100%; }
        .portal-banner .splide-portal-banner .splide__slide .content-image img {
          width: 27rem; } }
  @media screen and (max-width: 1199px) {
    .portal-banner .splide__arrows {
      display: none; } }

.profile {
  display: flex;
  align-items: center; }
  .profile > img {
    border: 2px solid #B71616;
    border-radius: 50%;
    width: 40px;
    margin-right: 0.5rem; }
  .profile-name {
    font-size: 14px;
    font-weight: 500; }
    .profile-name small {
      font-size: 12px;
      color: #A5A5A5;
      display: block; }

.intro {
  background-color: #f7f3ed; }
  .intro .main-content {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: auto; }
    @media only screen and (min-width: 768px) {
      .intro .main-content {
        padding: 1rem; } }
  .intro .media {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center; }
    @media only screen and (min-width: 992px) {
      .intro .media {
        max-width: 1200px; }
        .intro .media .img {
          max-height: 600px;
          object-fit: contain; } }
  .intro .actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem; }
    .intro .actions .btn {
      min-width: 200px;
      width: 100%;
      max-width: 100%; }
      .intro .actions .btn-outline-lightgrey {
        height: 2.375rem; }
        .intro .actions .btn-outline-lightgrey:hover {
          color: var(--textGrey3); }
      .intro .actions .btn-black {
        height: 2.375rem;
        display: flex;
        align-items: center;
        width: fit-content; }

.main-login {
  background-color: #f7f7fd; }
  .main-login .text-primary {
    color: #C3273F !important; }
  .main-login .box-columns {
    position: fixed;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    background-image: url("../../assets/images/course/course-bg.webp");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #f7f7fd; }
    @media only screen and (min-width: 768px) {
      .main-login .box-columns {
        background-image: none;
        flex-direction: row; } }
  .main-login .column-banner {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    display: none;
    padding: 0; }
    @media only screen and (min-width: 768px) {
      .main-login .column-banner {
        padding: 1rem;
        flex: 0 0 60%;
        width: 60%;
        display: flex; } }
    .main-login .column-banner .banner-container {
      flex: 1;
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      display: none; }
      @media only screen and (min-width: 768px) {
        .main-login .column-banner .banner-container {
          display: flex; } }
      .main-login .column-banner .banner-container .img-banner {
        position: absolute;
        inset: 0;
        object-fit: cover;
        width: 100%;
        height: 100%; }
  .main-login .column-form {
    flex: 0 0 100%;
    width: 100%;
    position: relative; }
    @media only screen and (min-width: 768px) {
      .main-login .column-form {
        flex: 0 0 40%;
        width: 40%; } }
    .main-login .column-form .column-container {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 3.5rem;
      padding-bottom: 1.5rem; }
      @media only screen and (min-width: 768px) {
        .main-login .column-form .column-container {
          padding-top: 1rem;
          padding-bottom: 1rem; } }
    .main-login .column-form .card {
      width: 440px;
      max-width: 100%;
      max-height: 100%;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
      position: relative;
      overflow-y: auto;
      border-radius: .75rem; }
    .main-login .column-form .card-body {
      padding: 3rem 1.5rem; }
  .main-login .logo-element {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    display: table;
    margin: 0 auto; }
    @media only screen and (min-width: 768px) {
      .main-login .logo-element {
        right: auto; } }
    .main-login .logo-element .img-logo {
      height: 70px;
      max-width: 100%;
      position: relative;
      z-index: 10; }
      @media only screen and (min-width: 768px) {
        .main-login .logo-element .img-logo {
          height: 95px; } }

.toggle-password {
  cursor: pointer;
  position: absolute;
  top: 0.5rem; }

.form-login-otp .otp-remark {
  font-weight: bold;
  color: #2b2b2b;
  text-align: center;
  margin-bottom: 0.75rem; }
  .form-login-otp .otp-remark-span {
    color: #344054;
    max-width: 29rem;
    text-align: center;
    margin: auto;
    margin-bottom: 1.5rem; }
    .form-login-otp .otp-remark-span span {
      color: #F04438; }

.form-login-otp .otp-ref {
  color: #727171;
  text-align: center;
  margin-bottom: 0.75rem; }

.form-login-otp .opt-input {
  max-width: 320px;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
  gap: 1rem;
  grid-template-columns: repeat(6, auto); }
  .form-login-otp .opt-input input[type="text"] {
    border-radius: 0.5rem;
    min-height: 2.65rem; }
    .form-login-otp .opt-input input[type="text"]:active, .form-login-otp .opt-input input[type="text"]:focus, .form-login-otp .opt-input input[type="text"].active {
      border-color: #2b2b2b; }

.form-login-otp .t-ps {
  color: #727171;
  text-align: center;
  margin: auto;
  margin-bottom: 0;
  margin-top: 0.75rem;
  max-width: 35rem; }
  .form-login-otp .t-ps a {
    color: inherit; }

.form-login-otp .resend-otp {
  color: #2b2b2b;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem; }
  .form-login-otp .resend-otp .resend-otp-btn {
    color: #025CA2;
    font-weight: bold;
    cursor: pointer; }

.form-login-otp .btn-submit-otp {
  min-width: 120px; }
  .form-login-otp .btn-submit-otp.disable {
    pointer-events: none;
    background-color: #EAECF0;
    border-color: #EAECF0;
    color: #98A2B3; }

.portal {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column; }
  .portal .portal-main {
    flex: 1;
    width: 100%;
    background: #f7f7fd;
    display: flex;
    flex-direction: column; }
    @media only screen and (min-width: 992px) {
      .portal .portal-main {
        flex-direction: row;
        flex: unset;
        height: 100vh; } }
  .portal .portal-sticky-navbar {
    height: 54px;
    position: sticky;
    top: 0;
    z-index: 9;
    background-color: #f7f7fd;
    padding: 0.875rem 1rem; }
    @media only screen and (min-width: 992px) {
      .portal .portal-sticky-navbar {
        height: 104px;
        padding: 1rem 0; } }
  .portal .portal-footer {
    flex: 0 0 auto;
    margin-top: auto;
    background: #20232c;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 0.375rem 1rem; }
  .portal .sidebar-toggle {
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1; }
  .portal .portal-sidebar {
    width: 100%;
    position: fixed;
    top: 70px;
    bottom: 0;
    right: 0;
    z-index: 12;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    display: flex; }
    .portal .portal-sidebar .inner-sidebar {
      background-color: #C3273F;
      flex: 1;
      display: flex;
      flex-direction: column; }
      @media only screen and (min-width: 1200px) {
        .portal .portal-sidebar .inner-sidebar {
          border-radius: 1rem; } }
    @media only screen and (min-width: 1200px) {
      .portal .portal-sidebar {
        width: calc(223px + 1rem);
        position: relative;
        top: 0;
        padding: 1rem 0 1rem 1rem;
        transform: unset !important; } }
    .portal .portal-sidebar.show {
      transform: translateX(0); }
    @media only screen and (min-width: 1200px) {
      .portal .portal-sidebar.hide-desktop {
        position: fixed !important;
        transform: translateX(-100%) !important;
        height: calc(100% - 1.75rem);
        transition: transform 0.3s ease-in-out; } }
    .portal .portal-sidebar .sidebar-header {
      padding: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      display: none; }
      @media only screen and (min-width: 1200px) {
        .portal .portal-sidebar .sidebar-header {
          display: flex; } }
    .portal .portal-sidebar .sidebar-heading {
      padding-left: 0.5rem;
      color: #ffffff; }
    .portal .portal-sidebar .sidebar-main {
      flex: 1;
      position: relative;
      overflow-y: auto; }
      .portal .portal-sidebar .sidebar-main .sidebar-menu {
        position: absolute;
        inset: 0; }
    .portal .portal-sidebar .sidebar-logo {
      width: 100%; }
      .portal .portal-sidebar .sidebar-logo .img {
        object-fit: contain;
        max-width: 100%;
        height: 50px; }
    .portal .portal-sidebar .sidebar-menu {
      display: flex;
      flex-direction: column;
      padding: 0 1rem;
      margin-top: 1rem;
      gap: 0.5rem; }
      .portal .portal-sidebar .sidebar-menu .menu-item {
        width: 100%; }
      .portal .portal-sidebar .sidebar-menu .menu-link {
        color: #ffffff;
        border-radius: 0.5rem;
        padding: 0.375rem 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }
        .portal .portal-sidebar .sidebar-menu .menu-link .icon {
          font-size: 1.25rem; }
        .portal .portal-sidebar .sidebar-menu .menu-link .icon-svg {
          height: 24px; }
        .portal .portal-sidebar .sidebar-menu .menu-link:hover, .portal .portal-sidebar .sidebar-menu .menu-link:focus, .portal .portal-sidebar .sidebar-menu .menu-link.active, .portal .portal-sidebar .sidebar-menu .menu-link.is-active {
          background-color: #ffffff;
          color: #20232c; }
          .portal .portal-sidebar .sidebar-menu .menu-link:hover svg path, .portal .portal-sidebar .sidebar-menu .menu-link:focus svg path, .portal .portal-sidebar .sidebar-menu .menu-link.active svg path, .portal .portal-sidebar .sidebar-menu .menu-link.is-active svg path {
            fill: #20232c; }
      .portal .portal-sidebar .sidebar-menu .menu-home {
        background: #A61A2F; }
    .portal .portal-sidebar .sidebar-footer {
      padding: 1rem 0; }
  .portal .portal-navbar .navbar-content {
    display: flex;
    gap: 1rem;
    width: 100%; }
  .portal .portal-navbar .navbar-inner-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%; }
  @media only screen and (min-width: 992px) {
    .portal .portal-navbar .box-wrapper {
      background: #ffffff;
      border-radius: 0.75rem;
      padding: 1rem; } }
  .portal .portal-navbar .box-main {
    flex: 1;
    display: flex; }
  .portal .portal-navbar .search-bar {
    position: relative;
    flex: 1; }
    .portal .portal-navbar .search-bar .form-control {
      background-color: #e7ebf5;
      padding-left: 2.5rem;
      height: 100%;
      border: 0; }
    .portal .portal-navbar .search-bar .icon {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center; }
      .portal .portal-navbar .search-bar .icon svg {
        width: 1.125rem; }
  .portal .portal-navbar .action-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem; }
    @media only screen and (min-width: 992px) {
      .portal .portal-navbar .action-tools {
        width: 345px; } }
    .portal .portal-navbar .action-tools .divider {
      width: 1px;
      background: #b7b7b7;
      display: flex;
      height: 100%; }
    .portal .portal-navbar .action-tools .change-language .img {
      width: 26px;
      height: 26px;
      border-radius: 100%;
      border: 2px solid transparent;
      transition: border-color 0.3s ease; }
    .portal .portal-navbar .action-tools .change-language .btn-language {
      padding: 0;
      border-radius: 100%;
      border: 0 !important;
      box-shadow: none !important; }
      .portal .portal-navbar .action-tools .change-language .btn-language:hover .img, .portal .portal-navbar .action-tools .change-language .btn-language:focus .img {
        border-color: #C3273F; }
    .portal .portal-navbar .action-tools .notification {
      position: relative; }
      .portal .portal-navbar .action-tools .notification .inner-wrapper {
        display: flex;
        align-items: center; }
      .portal .portal-navbar .action-tools .notification .badge {
        position: absolute;
        top: -0.25rem;
        right: -0.375rem;
        background: #ee434c;
        color: #ffffff;
        font-size: 0.5625rem;
        font-weight: 600;
        border-radius: 3rem;
        padding: 0.25rem; }
      .portal .portal-navbar .action-tools .notification .btn-notification {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e7ebf5;
        border-radius: 100%;
        padding: 0;
        aspect-ratio: 1;
        height: 36px; }
        .portal .portal-navbar .action-tools .notification .btn-notification .img {
          width: 16px;
          height: 16px; }
      .portal .portal-navbar .action-tools .notification .list-notification {
        padding: 0 .75rem; }
        .portal .portal-navbar .action-tools .notification .list-notification a {
          display: flex;
          align-items: flex-start;
          gap: 0.5rem;
          padding: 0.5rem 0;
          position: relative;
          border-bottom: 1px solid #ECEAE9; }
        .portal .portal-navbar .action-tools .notification .list-notification:last-child a {
          border-bottom: 0; }
      .portal .portal-navbar .action-tools .notification .dropdown-menu {
        min-width: 300px;
        max-width: 100%; }
        .portal .portal-navbar .action-tools .notification .dropdown-menu .heading-title {
          font-size: 1rem;
          font-weight: 600;
          border-bottom: 1px solid #eceae9;
          padding-bottom: 0.5rem;
          padding-left: 0.5rem;
          padding-right: 0.5rem; }
        .portal .portal-navbar .action-tools .notification .dropdown-menu .title {
          font-size: .875rem;
          line-height: 1.4;
          margin-bottom: 0.25rem;
          max-width: calc(100% - 1.25rem); }
        .portal .portal-navbar .action-tools .notification .dropdown-menu .time {
          font-size: .75rem;
          color: #A9A9A9; }
        .portal .portal-navbar .action-tools .notification .dropdown-menu .badge {
          width: 8px;
          height: 8px;
          background: #4E6AFF;
          border-radius: 100%;
          position: absolute;
          right: 0.5rem;
          top: 0.75rem;
          display: flex; }
  .portal .portal-navbar .action-tools-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem; }
  .portal .portal-navbar .action-tools-mobile {
    display: flex;
    gap: 1rem; }
    .portal .portal-navbar .action-tools-mobile .btn {
      border-radius: 0.375rem;
      padding: 0.25rem;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .portal .portal-navbar .action-tools-mobile .btn svg {
        height: 22px; }
    .portal .portal-navbar .action-tools-mobile .btn-search-mobile {
      background: #e7ebf5; }
    .portal .portal-navbar .action-tools-mobile .btn-toggle-menu {
      background: #1D191A; }
  .portal .portal-navbar .action-tools-user {
    display: flex;
    align-items: center;
    gap: 0.5rem; }
    .portal .portal-navbar .action-tools-user .user-avatar {
      padding: 0;
      border: 0; }
      .portal .portal-navbar .action-tools-user .user-avatar .img {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        object-fit: cover;
        border: 2px solid #C3273F; }
    .portal .portal-navbar .action-tools-user .user-info .user-name {
      display: flex;
      flex-direction: column;
      align-items: flex-start; }
      .portal .portal-navbar .action-tools-user .user-info .user-name .role {
        font-size: 0.75rem;
        color: #b7b7b7; }
      .portal .portal-navbar .action-tools-user .user-info .user-name .name {
        font-size: 1rem;
        font-weight: 700; }
    .portal .portal-navbar .action-tools-user:hover .user-avatar .img {
      border-color: #C3273F; }
    .portal .portal-navbar .action-tools-user:hover .user-info .user-name .name {
      color: #C3273F; }
  .portal .portal-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0; }
    @media only screen and (min-width: 1200px) {
      .portal .portal-container {
        padding: 0 1rem;
        min-height: calc(100% - 1rem); } }
  .portal .portal-content-wrapper {
    padding-top: 1rem;
    position: relative;
    flex: 1; }
    @media only screen and (min-width: 1200px) {
      .portal .portal-content-wrapper {
        flex: unset;
        height: 100%; } }
  .portal .portal-content-inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inset: 0; }
    @media only screen and (min-width: 1200px) {
      .portal .portal-content-inner {
        flex-direction: row;
        position: relative;
        min-height: 100%;
        padding-bottom: 1rem; } }
  .portal .content-container {
    flex: 1; }
    .portal .content-container .inner-container {
      padding: 1rem; }
      @media only screen and (min-width: 1200px) {
        .portal .content-container .inner-container {
          padding: 0rem 1.5rem; } }
    .portal .content-container .heading .img {
      margin-top: 0.25rem; }
    @media only screen and (min-width: 1200px) {
      .portal .content-container .heading {
        display: flex;
        align-items: center;
        gap: 0.5rem; } }
    .portal .content-container > .card {
      border-radius: 0.75rem; }
      .portal .content-container > .card > .card-body {
        padding: 1.75rem; }
  @media screen and (max-width: 576px) {
    .portal .course-list {
      margin-left: -1rem;
      margin-right: -1rem;
      padding-left: 1rem; } }
  @media only screen and (min-width: 1200px) {
    .portal .course-list {
      padding-left: calc(32px + 0.5rem); } }
  .portal .course-list .course-list-item .card {
    padding: 0.75rem;
    border-radius: 0.75rem; }
  .portal .course-list .course-list-item .course-cover {
    position: relative;
    aspect-ratio: 215 / 131;
    overflow: hidden;
    border-radius: 0.5rem; }
    .portal .course-list .course-list-item .course-cover .user-points {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: #09AD4B;
      color: #ffffff;
      border-radius: 100%;
      border: 1px solid #ffffff;
      font-size: 0.75rem;
      line-height: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1;
      width: 36px; }
      .portal .course-list .course-list-item .course-cover .user-points .points-text {
        font-size: 0.5625rem; }
    .portal .course-list .course-list-item .course-cover .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; }
  .portal .course-list .course-list-item .course-description {
    color: #bababa;
    font-weight: 500;
    font-size: 0.875rem; }
  .portal .course-list .course-list-item .course-detail {
    padding-top: 1rem; }
    .portal .course-list .course-list-item .course-detail .img-badge {
      max-width: 10rem; }
    .portal .course-list .course-list-item .course-detail .list {
      display: flex;
      gap: 1rem;
      margin-top: auto; }
      .portal .course-list .course-list-item .course-detail .list .list-item {
        color: #b7b7b7;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.875rem; }
        .portal .course-list .course-list-item .course-detail .list .list-item .icon-svg {
          margin-top: -3px; }
    .portal .course-list .course-list-item .course-detail .intructor-info {
      display: flex;
      align-items: center; }
      .portal .course-list .course-list-item .course-detail .intructor-info .image .img {
        width: 1.5rem;
        height: 1.5rem;
        overflow: hidden;
        border-radius: 50%; }
        .portal .course-list .course-list-item .course-detail .intructor-info .image .img img {
          object-fit: cover; }
      .portal .course-list .course-list-item .course-detail .intructor-info p {
        font-size: .875rem;
        color: #161616; }
  .portal .course-list .course-list-item .course-title {
    font-size: 1.125rem;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
    flex-grow: 1; }
  .portal .course-list .course-list-item .course-progress {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem; }
    .portal .course-list .course-list-item .course-progress .progress-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1rem; }
      .portal .course-list .course-list-item .course-progress .progress-info .finished-lesson {
        color: #12b061;
        font-weight: 700; }
      .portal .course-list .course-list-item .course-progress .progress-info .total-lesson {
        color: #2b2b2b;
        font-weight: 700; }
    .portal .course-list .course-list-item .course-progress .img-progress {
      width: 72px;
      height: auto;
      max-width: 100%; }
    .portal .course-list .course-list-item .course-progress .btn-start-lesson {
      width: 100%;
      justify-content: center; }
    .portal .course-list .course-list-item .course-progress-bar .progress-text {
      font-size: 1.5rem;
      font-weight: 600; }
    .portal .course-list .course-list-item .course-progress-bar .progress-info {
      font-size: .875rem;
      font-weight: 300; }
  .portal .course-list .course-list-item .course-option {
    display: flex;
    align-items: center; }
    .portal .course-list .course-list-item .course-option .options {
      display: flex;
      flex-flow: column;
      justify-content: center;
      height: 100%;
      margin-right: 2rem; }
      .portal .course-list .course-list-item .course-option .options .btn-option {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.15rem; }
    .portal .course-list .course-list-item .course-option .icon {
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #000; }
  .portal .course-list .course-list-item:hover .card, .portal .course-list .course-list-item:focus .card {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); }
  .portal .course-list .course-list-item:hover .course-title, .portal .course-list .course-list-item:focus .course-title {
    color: #C3273F; }
  @media only screen and (min-width: 768px) {
    .portal .course-list .course-list-item-2 {
      display: flex;
      flex-direction: row;
      width: 50%; } }
  @media only screen and (min-width: 1200px) {
    .portal .course-list .course-list-item {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      width: 100%; }
      .portal .course-list .course-list-item .card {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: 100%; }
        .portal .course-list .course-list-item .card .course-cover {
          max-width: 8rem;
          aspect-ratio: 4 / 2; }
        .portal .course-list .course-list-item .card .course-detail {
          padding-top: 0;
          flex-grow: 1; }
      .portal .course-list .course-list-item-2 {
        width: 33.33%; } }
  @media only screen and (min-width: 1600px) {
    .portal .course-list .course-list-item .card .course-cover {
      max-width: 11rem;
      aspect-ratio: 4 / 1.5; } }
  .portal .course-list-my-certificate .course-list-item .course-cover img {
    height: 4.5rem; }
  .portal .course-list-my-certificate .course-list-item .course-title {
    font-size: 1rem; }
  .portal .course-list .course-empty .bg {
    border-radius: 50%;
    background-color: #FFF;
    width: 16rem;
    aspect-ratio: 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    margin: 1rem auto; }
    .portal .course-list .course-empty .bg .text {
      color: #BABABA;
      font-size: .875rem;
      text-align: center;
      margin-top: .5rem; }
  @media only screen and (min-width: 1200px) {
    .portal .course-list-my-course {
      max-width: 80%; }
      .portal .course-list-my-course .course-list-item .card .course-cover {
        max-width: 12rem; } }
  .portal .course-session {
    background: #ffffff;
    background-image: url(../images/course/bg-elearning.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.75rem;
    aspect-ratio: 1;
    max-height: 200px;
    margin: auto; }
    .portal .course-session .inner-wrapper {
      display: flex;
      justify-content: space-around;
      gap: 1rem;
      padding: 1rem 0.5rem; }
    .portal .course-session .session-value {
      font-size: 2rem;
      font-weight: 600;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-top: 0.5rem;
      line-height: 1.2; }
      .portal .course-session .session-value .text {
        font-size: 1rem;
        font-weight: 500;
        position: relative;
        right: -1rem;
        top: -0.5rem; }
    .portal .course-session .session-title {
      color: #2B30B0;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.2; }
  .portal .info-sidebar {
    flex: 1;
    padding: 1rem;
    width: 100%; }
    @media only screen and (min-width: 1200px) {
      .portal .info-sidebar {
        width: 345px;
        max-width: 345px;
        padding: 0; } }
    .portal .info-sidebar .card {
      padding: 1rem;
      border-radius: 1rem;
      height: 100%; }
    .portal .info-sidebar .view-more {
      font-size: 0.875rem;
      color: #C3273F; }
    .portal .info-sidebar .ranking .seemore {
      font-size: .75rem;
      color: #B03955;
      display: flex;
      align-items: center; }
      .portal .info-sidebar .ranking .seemore svg {
        margin-left: .2rem; }
        .portal .info-sidebar .ranking .seemore svg path {
          stroke: #B03955; }
      .portal .info-sidebar .ranking .seemore:hover {
        text-decoration: underline; }
    .portal .info-sidebar .ranking-top-three .item {
      position: relative;
      text-align: center; }
      .portal .info-sidebar .ranking-top-three .item .image {
        width: 80%;
        aspect-ratio: 1;
        border-radius: 50%;
        padding: .25rem;
        background-color: #FFF;
        position: absolute;
        top: -3rem;
        left: 50%;
        transform: translateX(-50%); }
        .portal .info-sidebar .ranking-top-three .item .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%; }
        .portal .info-sidebar .ranking-top-three .item .image .medal {
          position: absolute;
          bottom: 0;
          right: 0; }
      .portal .info-sidebar .ranking-top-three .item .detail {
        position: absolute;
        top: 28%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        font-size: .875rem; }
        .portal .info-sidebar .ranking-top-three .item .detail .point {
          font-weight: 500;
          display: inline-block;
          padding: 0 .65rem;
          margin-top: .35rem; }
      .portal .info-sidebar .ranking-top-three .item .bg {
        width: 100%; }
      .portal .info-sidebar .ranking-top-three .item.silver {
        order: 1; }
        .portal .info-sidebar .ranking-top-three .item.silver .point {
          background-color: #E1E1E1; }
      .portal .info-sidebar .ranking-top-three .item.gold {
        order: 2; }
        .portal .info-sidebar .ranking-top-three .item.gold .point {
          background-color: #F9DFB6;
          color: #DC9905; }
      .portal .info-sidebar .ranking-top-three .item.bronze {
        order: 3; }
        .portal .info-sidebar .ranking-top-three .item.bronze .point {
          background-color: #FFC5B6;
          color: #AD4733; }
    .portal .info-sidebar .ranking-list {
      padding-top: 1rem;
      padding-bottom: 1rem; }
      .portal .info-sidebar .ranking-list .item {
        display: flex;
        align-items: center;
        gap: .35rem;
        margin-bottom: .5rem; }
        .portal .info-sidebar .ranking-list .item .number {
          width: 2rem;
          height: 2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: .625rem;
          background-color: #C3273F;
          color: #FFF;
          line-height: 1;
          text-align: center;
          border-radius: 50%; }
        .portal .info-sidebar .ranking-list .item .detail {
          flex-grow: 1;
          display: flex;
          align-items: center; }
          .portal .info-sidebar .ranking-list .item .detail .image {
            width: 3.25rem;
            height: 3.25rem;
            border-radius: 50%;
            overflow: hidden; }
            .portal .info-sidebar .ranking-list .item .detail .image img {
              width: 100%;
              height: 100%;
              object-fit: cover; }
          .portal .info-sidebar .ranking-list .item .detail .name {
            font-size: .875rem;
            font-weight: 500; }
        .portal .info-sidebar .ranking-list .item .point {
          display: inline-block;
          font-weight: 500;
          padding: 0 .65rem;
          margin-top: .35rem;
          background-color: #F9DFB6;
          color: #DC9905;
          font-size: .875rem; }
          @media only screen and (min-width: 1600px) {
            .portal .info-sidebar .ranking-list .item .point {
              font-size: 1rem; } }
    @media only screen and (min-width: 1200px) {
      .portal .info-sidebar .ranking {
        flex: 1; } }
  .portal .user-level {
    background: #C3273F;
    height: 36px;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    line-height: 14px; }
    .portal .user-level .text {
      font-size: 0.5625rem;
      color: #ffffff; }
    .portal .user-level .level {
      font-size: 0.875rem;
      font-weight: 700;
      color: #ffffff; }
  .portal .show-mobile {
    width: 100%; }
    @media only screen and (min-width: 992px) {
      .portal .show-mobile {
        display: none; } }
  .portal .hide-mobile {
    width: 100%;
    display: none; }
    @media only screen and (min-width: 992px) {
      .portal .hide-mobile {
        display: flex; } }

.portal-sidebar-show {
  overflow: hidden; }
  .portal-sidebar-show .portal-container {
    overflow: hidden; }

@media only screen and (min-width: 1200px) {
  .page-search {
    padding: 1.5rem 2.5rem !important; } }

.page-search .search-input .form-group {
  position: relative; }
  .page-search .search-input .form-group .icon {
    position: absolute;
    left: 1rem;
    top: .45rem; }
    .page-search .search-input .form-group .icon svg {
      width: 18px; }
      .page-search .search-input .form-group .icon svg path {
        stroke: #C0C0C0; }
  .page-search .search-input .form-group input {
    padding: .5rem 1rem .5rem 3rem; }
    @media only screen and (min-width: 1200px) {
      .page-search .search-input .form-group input {
        width: 22rem; } }

.page-search .search-filter {
  display: grid;
  grid-gap: 1rem; }
  @media only screen and (min-width: 768px) {
    .page-search .search-filter {
      grid-template-columns: 200px 200px 200px;
      grid-gap: 1rem; } }

.page-search .search-result {
  max-width: 80rem; }
  .page-search .search-result .title {
    font-size: 1.25rem; }
    .page-search .search-result .title span.text-success {
      color: #12B061 !important; }
  .page-search .search-result .course-list-item .card {
    box-shadow: 0px 2px 10px 0px #0000001A; }

.countdown {
  padding: 1rem 0; }
  .countdown .days {
    gap: .15rem; }
    .countdown .days .number {
      font-family: "alarm";
      background-color: #1ABF5F;
      border: 2px solid #9FF9C5;
      font-size: 2rem;
      border-radius: .625rem;
      padding: .25rem .5rem;
      color: #FFF;
      text-shadow: 2px 2px 0px  #000000;
      -webkit-text-stroke: 1px #000000; }
  .countdown .text {
    font-size: 1.875rem;
    font-weight: 600; }
  .countdown .seemore {
    font-size: .75rem;
    color: #B03955;
    display: flex;
    align-items: center; }
    .countdown .seemore svg {
      margin-left: .2rem; }
      .countdown .seemore svg path {
        stroke: #B03955; }
    .countdown .seemore:hover {
      text-decoration: underline; }
  .countdown .text-remark {
    color: #C3273F;
    font-size: .875rem; }

.course .denso-menu-sticky {
  position: fixed;
  top: 0;
  width: 300px;
  height: 104px;
  display: flex;
  align-items: center;
  padding-left: 1rem; }
  .course .denso-menu-sticky .menu-inner {
    display: flex;
    align-items: center;
    gap: 1rem; }
  .course .denso-menu-sticky .img-logo {
    height: 60px;
    width: auto;
    max-width: 100%; }
  .course .denso-menu-sticky .toggle-menu {
    background-color: #FFF;
    color: #C3273F;
    padding: 0.25rem;
    padding: 0.125rem 0.375em; }
    .course .denso-menu-sticky .toggle-menu .icon {
      color: #C3273F;
      font-size: 1rem; }
  .course .denso-menu-sticky .menu-bg {
    background: #C3273F;
    position: absolute;
    aspect-ratio: 1;
    width: 422px;
    top: -18rem;
    border-radius: 100%;
    z-index: -1;
    left: -7rem; }

.course .action-tools {
  position: fixed;
  top: 1rem;
  right: 1rem; }
  .course .action-tools .img {
    width: 350px;
    max-width: 100%;
    height: auto; }

.course .progress-box {
  position: fixed;
  bottom: 1rem;
  right: 1rem; }
  .course .progress-box .img {
    width: 275px;
    height: auto;
    max-width: 100%; }

.course .course-main {
  flex: 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex; }
  .course .course-main .map-main {
    position: relative;
    flex: 1; }
  .course .course-main .layer {
    position: absolute;
    inset: 0; }
    .course .course-main .layer .layer-elm {
      width: 100%;
      min-height: 100%;
      height: auto;
      object-fit: cover; }

.course .course-learning {
  position: fixed;
  inset: 0;
  background: url("../../assets/images/course/course-bg.webp");
  background-size: cover;
  background-position: bottom center;
  background-color: #fffbfb;
  overflow: hidden;
  display: flex;
  flex-direction: column; }
  .course .course-learning .course-heading-mobile {
    display: flex;
    padding: 1rem 1rem 0;
    flex-wrap: wrap; }
    .course .course-learning .course-heading-mobile .btn-back svg {
      width: 2rem; }
    .course .course-learning .course-heading-mobile .name {
      text-align: center;
      flex: 1;
      font-weight: 600;
      font-size: 1.25rem;
      padding: 0 .25rem; }
  .course .course-learning .course-wrapper {
    padding: 1rem;
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column; }
  @media only screen and (min-width: 1200px) {
    .course .course-learning .course-btn {
      width: calc(100% - 1rem); } }
  .course .course-learning .course-container {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    border-radius: .75rem; }
    @media only screen and (min-width: 1200px) {
      .course .course-learning .course-container {
        flex-direction: row; } }
    @media only screen and (min-width: 1200px) {
      .course .course-learning .course-container {
        background-color: transparent;
        border-radius: 0rem;
        gap: 1rem; } }
    @media only screen and (min-width: 1400px) {
      .course .course-learning .course-container {
        max-width: 1400px;
        margin: auto;
        padding-top: .5rem;
        padding-bottom: .5rem; } }
    .course .course-learning .course-container .card {
      border-radius: 0.75rem;
      padding: 1.75rem; }
      @media only screen and (min-width: 1200px) {
        .course .course-learning .course-container .card {
          box-shadow: 0px 0px 10px 0px #D1D1D140; } }
    .course .course-learning .course-container .card-lesson {
      flex: 1;
      padding: .5rem 1rem !important;
      display: flex;
      border-radius: 6px; }
      @media only screen and (min-width: 1200px) {
        .course .course-learning .course-container .card-lesson {
          border-radius: 1rem; } }
    .course .course-learning .course-container .lesson-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative; }
      .course .course-learning .course-container .lesson-content .video-js {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9; }
    .course .course-learning .course-container .lesson-cover {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      border-radius: 6px;
      aspect-ratio: 16/9; }
      @media only screen and (min-width: 1200px) {
        .course .course-learning .course-container .lesson-cover {
          border-radius: 1rem;
          aspect-ratio: unset; } }
    .course .course-learning .course-container .lesson-document {
      height: 28rem;
      border-radius: 1rem;
      overflow: hidden;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center; }
      .course .course-learning .course-container .lesson-document .remark {
        color: #C0C0C0;
        font-size: .875rem;
        font-weight: 300; }
      .course .course-learning .course-container .lesson-document ul {
        padding: 0; }
        .course .course-learning .course-container .lesson-document ul a {
          text-decoration: underline; }
      @media only screen and (min-width: 1200px) {
        .course .course-learning .course-container .lesson-document {
          height: 100%; } }
    .course .course-learning .course-container .card-sidebar {
      display: flex;
      flex-flow: column; }
      @media only screen and (min-width: 1200px) {
        .course .course-learning .course-container .card-sidebar {
          min-width: calc(422px - 1rem);
          width: calc(422px - 1rem);
          flex: 0 0 calc(422px - 1rem); } }
      .course .course-learning .course-container .card-sidebar .card-header {
        background: #20232c;
        color: #FFF;
        font-weight: 600;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
        font-size: 1.125rem;
        padding: 1rem 1.25rem; }
      .course .course-learning .course-container .card-sidebar .card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #FFF;
        padding: 1rem 1.25rem; }
        .course .course-learning .course-container .card-sidebar .card-content .nav-wrapper {
          padding-bottom: 1rem;
          border-bottom: 1px solid #eceae9; }
        .course .course-learning .course-container .card-sidebar .card-content .nav .nav-item {
          width: calc(100% / 3 - .35rem); }
          .course .course-learning .course-container .card-sidebar .card-content .nav .nav-item:not(:last-child) {
            margin-right: .35rem; }
        .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link {
          border: 1px solid #eceae9;
          background-color: transparent;
          border-radius: 20rem;
          color: #727171;
          padding: 0.35rem 0.75rem 0.35rem 0.25rem;
          display: flex;
          align-items: center;
          gap: 0.25rem;
          width: 100%;
          font-size: .875rem; }
          @media only screen and (min-width: 1200px) {
            .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link {
              font-size: 1rem; } }
          .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link .icon {
            width: 24px;
            height: 24px;
            border-radius: 100%;
            background: #f7f7fd;
            display: flex;
            align-items: center;
            justify-content: center; }
          .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link:hover, .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link:focus, .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link.active {
            background: #d9eaff;
            border-color: #d9eaff;
            color: #3184ff; }
            .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link:hover .icon, .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link:focus .icon, .course .course-learning .course-container .card-sidebar .card-content .nav .nav-link.active .icon {
              background: #a4c4ec; }
        .course .course-learning .course-container .card-sidebar .card-content .tab-content {
          position: relative;
          overflow-y: auto;
          flex: 1; }
          .course .course-learning .course-container .card-sidebar .card-content .tab-content .tab-pane {
            inset: 0;
            padding: 1rem 0; }
            @media only screen and (min-width: 1200px) {
              .course .course-learning .course-container .card-sidebar .card-content .tab-content .tab-pane {
                padding: 1rem; } }
            .course .course-learning .course-container .card-sidebar .card-content .tab-content .tab-pane-document.active {
              display: flex;
              flex-flow: column; }
            @media only screen and (min-width: 1200px) {
              .course .course-learning .course-container .card-sidebar .card-content .tab-content .tab-pane {
                position: absolute; } }
        .course .course-learning .course-container .card-sidebar .card-content:has(.tab-pane-handout.active, .tab-pane-document.active) {
          border-bottom-left-radius: 1.5rem;
          border-bottom-right-radius: 1.5rem; }
          .course .course-learning .course-container .card-sidebar .card-content:has(.tab-pane-handout.active, .tab-pane-document.active) + .card-footer {
            display: none; }
        .course .course-learning .course-container .card-sidebar .card-content.no-footer {
          border-bottom-left-radius: 1.5rem;
          border-bottom-right-radius: 1.5rem; }
      .course .course-learning .course-container .card-sidebar .card-footer {
        background-color: #f7f7fd;
        border-top: 0;
        padding: .5rem 1rem;
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem; }
        .course .course-learning .course-container .card-sidebar .card-footer .intructor-info {
          display: flex;
          align-items: center;
          gap: 0.5rem; }
          .course .course-learning .course-container .card-sidebar .card-footer .intructor-info .image {
            position: relative;
            display: flex; }
            .course .course-learning .course-container .card-sidebar .card-footer .intructor-info .image .img {
              border-radius: 100%;
              width: 60px;
              height: 60px;
              box-shadow: 3px 4px 4px 1px #0000000D;
              border: 3px solid #FFFFFF;
              overflow: hidden; }
              .course .course-learning .course-container .card-sidebar .card-footer .intructor-info .image .img img {
                width: 100%;
                height: 100%;
                object-fit: cover; }
            .course .course-learning .course-container .card-sidebar .card-footer .intructor-info .image a:not(:first-child) {
              position: relative;
              left: -1rem;
              z-index: 1; }
          .course .course-learning .course-container .card-sidebar .card-footer .intructor-info h6 {
            line-height: .7; }
  .course .course-learning .video-js {
    flex: 1; }
  .course .course-learning .video-lesson {
    flex: 1;
    border-radius: .75rem;
    overflow: hidden; }
    @media only screen and (min-width: 1200px) {
      .course .course-learning .video-lesson {
        border-radius: 0; } }
    .course .course-learning .video-lesson video {
      width: 100%;
      height: 100%;
      object-fit: contain; }
  .course .course-learning .lesson-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; }
    .course .course-learning .lesson-list .list-item {
      display: flex;
      padding: 0.25rem;
      border-radius: 20rem;
      border: 1px solid #eceae9;
      gap: 0.5rem;
      cursor: pointer; }
      .course .course-learning .lesson-list .list-item:hover, .course .course-learning .lesson-list .list-item:focus, .course .course-learning .lesson-list .list-item.active {
        background-color: #d9eaff;
        border-color: #d9eaff; }
        .course .course-learning .lesson-list .list-item:hover .lesson-title,
        .course .course-learning .lesson-list .list-item:hover .lesson-number, .course .course-learning .lesson-list .list-item:focus .lesson-title,
        .course .course-learning .lesson-list .list-item:focus .lesson-number, .course .course-learning .lesson-list .list-item.active .lesson-title,
        .course .course-learning .lesson-list .list-item.active .lesson-number {
          color: #3184ff; }
      .course .course-learning .lesson-list .list-item.disabled {
        pointer-events: none; }
        .course .course-learning .lesson-list .list-item.disabled .lesson-number {
          background-color: #e4e4e4;
          color: #727171; }
      .course .course-learning .lesson-list .list-item .lesson-number {
        background: #f7f7fd;
        aspect-ratio: 1;
        border-radius: 100%;
        color: #727171;
        font-weight: 700;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center; }
      .course .course-learning .lesson-list .list-item .lesson-title {
        font-weight: 700;
        display: flex;
        align-items: center; }

.course.course-map {
  position: relative;
  overflow-y: auto; }
  .course.course-map .portal {
    position: absolute;
    z-index: 4;
    inset: unset !important; }
    .course.course-map .portal .portal-navbar .action-tools {
      border-radius: 10rem; }
  .course.course-map .roadmap {
    position: relative;
    width: 100%;
    overflow: hidden; }
    .course.course-map .roadmap .bg-table {
      position: absolute;
      z-index: 1;
      mix-blend-mode: plus-lighter; }
      @media only screen and (min-width: 1200px) {
        .course.course-map .roadmap .bg-table {
          width: 80%; } }
    .course.course-map .roadmap-747705178181996544 {
      background: linear-gradient(180deg, #E9FFE4 17.61%, #69CE90 100%);
      background-size: cover;
      background-position: center; }
      .course.course-map .roadmap-747705178181996544 .bg-left {
        background-image: url("../images/map/map-associate-mobile-left.webp");
        background-position: right top;
        background-size: cover;
        background-repeat: repeat-y; }
      .course.course-map .roadmap-747705178181996544 .bg-right {
        background-image: url("../images/map/map-associate-mobile-right.webp");
        background-position: right top;
        background-size: cover;
        background-repeat: repeat-y; }
      @media only screen and (min-width: 1200px) {
        .course.course-map .roadmap-747705178181996544 {
          background: linear-gradient(180deg, #E9FFE4 40.65%, #69CE90 100%); }
          .course.course-map .roadmap-747705178181996544 .bg-left {
            background-image: url("../images/map/map-associate-left.webp");
            background-position: left center;
            background-size: cover; }
          .course.course-map .roadmap-747705178181996544 .bg-right {
            background-image: url("../images/map/map-associate-right.webp");
            background-position: right center;
            background-size: cover; } }
    .course.course-map .roadmap-747705377172361216 {
      background: linear-gradient(180deg, #F9E7EB 40.65%, #FF88A2 100%);
      background-size: cover;
      background-position: center; }
      .course.course-map .roadmap-747705377172361216 .bg-left {
        background-image: url("../images/map/map-topmanagement-mobile-left.webp");
        background-position: left top;
        background-size: cover;
        background-repeat: repeat-y; }
      .course.course-map .roadmap-747705377172361216 .bg-right {
        background-image: url("../images/map/map-topmanagement-mobile-right.webp");
        background-position: right top;
        background-size: cover;
        background-repeat: repeat-y; }
      @media only screen and (min-width: 1200px) {
        .course.course-map .roadmap-747705377172361216 {
          background: linear-gradient(180deg, #F9E7EB 40.65%, #FF88A2 100%); }
          .course.course-map .roadmap-747705377172361216 .bg-left {
            background-image: url("../images/map/map-topmanagement-left.webp");
            background-position: left center;
            background-size: cover; }
          .course.course-map .roadmap-747705377172361216 .bg-right {
            background-image: url("../images/map/map-topmanagement-right.webp");
            background-position: right center;
            background-size: cover; } }
    .course.course-map .roadmap-747705241721507840 {
      background: linear-gradient(180deg, #FFFBD5 40.65%, #EDC350 100%);
      background-size: cover;
      background-position: center; }
      .course.course-map .roadmap-747705241721507840 .bg-left {
        background-image: url("../images/map/map-committee-mobile-left.webp");
        background-position: left top;
        background-size: cover;
        background-repeat: repeat-y; }
      .course.course-map .roadmap-747705241721507840 .bg-right {
        background-image: url("../images/map/map-committee-mobile-right.webp");
        background-position: right top;
        background-size: cover;
        background-repeat: repeat-y; }
      @media only screen and (min-width: 1200px) {
        .course.course-map .roadmap-747705241721507840 {
          background: linear-gradient(180deg, #FFFBD5 40.65%, #EDC350 100%); }
          .course.course-map .roadmap-747705241721507840 .bg-left {
            background-image: url("../images/map/map-committee-left.webp");
            background-position: left center;
            background-size: cover; }
          .course.course-map .roadmap-747705241721507840 .bg-right {
            background-image: url("../images/map/map-committee-right.webp");
            background-position: right center;
            background-size: cover; } }
    @media only screen and (min-width: 1200px) {
      .course.course-map .roadmap {
        min-height: unset;
        height: 100vh;
        overflow: hidden; } }
  .course.course-map .bg-left {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(50% - 80px);
    height: 100%;
    z-index: 2; }
    @media only screen and (min-width: 1200px) {
      .course.course-map .bg-left {
        width: 50%;
        height: 100vh; } }
  .course.course-map .bg-right {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(50% - 80px);
    height: 100%;
    z-index: 2; }
    @media only screen and (min-width: 1200px) {
      .course.course-map .bg-right {
        width: 50%;
        height: 100vh; } }
  .course.course-map svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; }
  .course.course-map .dot-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 4; }
  .course.course-map .dot {
    position: absolute;
    width: 5rem;
    height: 4rem;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: pop 0.5s ease-out forwards;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
    .course.course-map .dot.dot-start {
      background-image: none !important;
      background-color: transparent !important;
      pointer-events: none; }
      .course.course-map .dot.dot-start .point {
        position: absolute;
        width: 140%;
        top: -110%; }
      .course.course-map .dot.dot-start .cartoon {
        position: absolute;
        width: 180%;
        top: -100%;
        left: -55%; }
      .course.course-map .dot.dot-start + .tooltip {
        display: none; }
      .course.course-map .dot.dot-start.hide-cartoon .cartoon {
        opacity: 0; }
    .course.course-map .dot.dot-end {
      pointer-events: none;
      background-image: none !important;
      background-color: transparent !important; }
      .course.course-map .dot.dot-end .trophy {
        position: absolute;
        width: 150%;
        top: 0%;
        left: -20%; }
        @media only screen and (min-width: 1200px) {
          .course.course-map .dot.dot-end .trophy {
            left: 20%; } }
      .course.course-map .dot.dot-end + .tooltip {
        display: none; }
    .course.course-map .dot.pretest, .course.course-map .dot.posttest {
      background-image: url("../images/exam/icon-exam.svg"); }
    .course.course-map .dot.section {
      background-image: url("../images/exam/icon-lesson.svg"); }
    .course.course-map .dot.lock {
      background-image: url("../images/exam/icon-dot.svg");
      pointer-events: none; }
    .course.course-map .dot .dot-cartoon {
      position: absolute;
      width: 150%;
      top: -80%;
      left: -20%;
      opacity: 0; }
    .course.course-map .dot.current .dot-cartoon {
      opacity: 1; }
    .course.course-map .dot.current + .tooltip {
      top: -8rem !important;
      bottom: unset; }
    @media only screen and (min-width: 1200px) {
      .course.course-map .dot {
        width: 6rem;
        height: 5rem; } }
  .course.course-map .tooltip {
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: #333;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10; }
  .course.course-map .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white; }
  .course.course-map .dot-wrapper:hover .tooltip {
    opacity: 1; }

@keyframes pop {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0; }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; } }
  .course.course-map .course-progress {
    position: absolute;
    background-color: #FFF;
    border-radius: 1rem;
    padding: .75rem;
    z-index: 3;
    width: 100%;
    right: 0;
    bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
    .course.course-map .course-progress .progress-text {
      font-size: .75rem; }
    .course.course-map .course-progress .col-right {
      width: 100%; }
    @media only screen and (min-width: 1200px) {
      .course.course-map .course-progress {
        width: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem; } }
  .course.course-map .course-detail {
    position: absolute;
    right: 1rem;
    background-color: #FFF;
    border-radius: .75rem;
    padding: 1rem;
    top: 8rem;
    width: 22rem;
    box-shadow: 0px 0px 10px 0px #8484841A;
    z-index: 3; }
    .course.course-map .course-detail .body .nav-pills {
      justify-content: center;
      gap: .5rem; }
      .course.course-map .course-detail .body .nav-pills .nav-item .nav-link {
        text-align: center;
        width: 100%;
        padding: .35rem .75rem;
        color: #A4A4A4;
        border: 1px solid #DBDBDB;
        font-size: .875rem;
        border-radius: .75rem; }
        .course.course-map .course-detail .body .nav-pills .nav-item .nav-link.active {
          color: #FFF;
          background-color: #20232C; }
    .course.course-map .course-detail .body .nav-tabs {
      border: 0;
      align-items: center;
      justify-content: space-between; }
      .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link {
        color: #A4A4A4;
        padding: 0;
        font-size: .875rem;
        width: 100%;
        transition: unset !important; }
        .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link::after {
          content: "";
          display: block;
          width: 100%;
          height: 3px;
          background-color: #C3273F;
          border-top-left-radius: 1rem;
          border-top-right-radius: 1rem;
          opacity: 0; }
        .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link.active, .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link:hover, .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link:focus, .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link:focus-visible {
          border: 0 !important;
          color: #000; }
          .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link.active::after, .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link:hover::after, .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link:focus::after, .course.course-map .course-detail .body .nav-tabs .nav-item .nav-link:focus-visible::after {
            opacity: 1; }
      .course.course-map .course-detail .body .nav-tabs + .tab-content .tab-pane {
        padding-top: 1rem;
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden; }
    .course.course-map .course-detail .body .tab-content .content {
      font-size: .875rem; }
      .course.course-map .course-detail .body .tab-content .content .heading {
        font-size: 1rem; }
    .course.course-map .course-detail .body .tab-content .objective-list {
      font-size: .875rem;
      list-style-type: none;
      padding-left: 0; }
      .course.course-map .course-detail .body .tab-content .objective-list li {
        display: grid;
        align-items: flex-start;
        grid-template-columns: 1.5rem 1fr; }
        .course.course-map .course-detail .body .tab-content .objective-list li::before {
          content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNi4yMjIxNyIgY3k9IjYuOTk5NTEiIHI9IjUuNzIyMTciIHN0cm9rZT0iIzE4NzdGMiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjg3NDkgMi4zNDM4OEMxNC4xMjUgMi41OTQwNiAxNC4xMjUgMi45OTk2OSAxMy44NzQ5IDMuMjQ5ODdMNi44Mjc5OSAxMC4yOTY3QzYuNTc3ODEgMTAuNTQ2OSA2LjE3MjE5IDEwLjU0NjkgNS45MjIwMSAxMC4yOTY3TDIuNzE4ODggNy4wOTM2MkMyLjQ2ODcxIDYuODQzNDQgMi40Njg3MSA2LjQzNzgxIDIuNzE4ODggNi4xODc2M0MyLjk2OTA2IDUuOTM3NDYgMy4zNzQ2OSA1LjkzNzQ2IDMuNjI0ODcgNi4xODc2M0w2LjM3NSA4LjkzNzc3TDEyLjk2ODkgMi4zNDM4OEMxMy4yMTkxIDIuMDkzNzEgMTMuNjI0NyAyLjA5MzcxIDEzLjg3NDkgMi4zNDM4OFoiIGZpbGw9IiMxODc3RjIiLz4KPC9zdmc+Cg==");
          align-items: center;
          justify-content: center;
          display: flex;
          width: 1rem;
          margin-top: .25rem; }
    .course.course-map .course-detail .body .tab-content .intructor-info .item {
      display: grid;
      grid-template-columns: 4.375rem 1fr; }
      .course.course-map .course-detail .body .tab-content .intructor-info .item .image {
        overflow: hidden;
        aspect-ratio: 1;
        box-shadow: 3px 4px 4px 1px #0000000D; }
        .course.course-map .course-detail .body .tab-content .intructor-info .item .image img {
          object-fit: cover;
          height: 100%; }
      .course.course-map .course-detail .body .tab-content .intructor-info .item .detail small {
        color: #6E6B6B;
        margin-bottom: .25rem;
        display: block;
        font-size: .75rem; }
      .course.course-map .course-detail .body .tab-content .intructor-info .item .detail p {
        font-size: .875rem;
        margin-bottom: 0; }
    .course.course-map .course-detail .body .tab-content .lesson .course-section-name {
      background-color: #EFF5FF;
      color: #3184FF;
      border: 0;
      display: grid;
      grid-template-columns: 5% 65% 30%;
      align-items: flex-start;
      position: relative; }
      .course.course-map .course-detail .body .tab-content .lesson .course-section-name:before {
        content: "";
        display: block; }
      .course.course-map .course-detail .body .tab-content .lesson .course-section-name::after {
        display: none; }
      .course.course-map .course-detail .body .tab-content .lesson .course-section-name .detail {
        display: flex;
        justify-content: flex-end;
        white-space: nowrap; }
        .course.course-map .course-detail .body .tab-content .lesson .course-section-name .detail .icon {
          margin-left: .5rem; }
          .course.course-map .course-detail .body .tab-content .lesson .course-section-name .detail .icon svg {
            width: 10px;
            height: auto;
            position: relative; }
            .course.course-map .course-detail .body .tab-content .lesson .course-section-name .detail .icon svg path {
              stroke: #3184FF; }
    .course.course-map .course-detail .body .tab-content .lesson .course-section .child li .course-lesson-name:before {
      opacity: .2; }
    .course.course-map .course-detail .body .tab-content .lesson .course-section:hover .course-section-name, .course.course-map .course-detail .body .tab-content .lesson .course-section.active .course-section-name {
      background-color: #2B2B2B !important;
      color: #FFF; }
      .course.course-map .course-detail .body .tab-content .lesson .course-section:hover .course-section-name .detail .icon svg path, .course.course-map .course-detail .body .tab-content .lesson .course-section.active .course-section-name .detail .icon svg path {
        stroke: #FFF; }
    .course.course-map .course-detail .body .tab-content .lesson .course-section.lesson-type-pretest .course-section-name:before, .course.course-map .course-detail .body .tab-content .lesson .course-section.lesson-type-posttest .course-section-name:before {
      content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMDEzMjUgMC40MTc5NjlDMy41OTQ3NyAwLjQxNzk2OSAwIDQuMDEyNjggMCA4LjQzMTIxQzAgMTAuMzUzOSAwLjY4ODM4MSAxMi4xOTU1IDEuOTQ1MTUgMTMuNjUyOUwwLjIzODUzMiAxNi42Mzk1Qy0wLjAyMjYxMTkgMTcuMDk2NCAwLjQwNzg4OSAxNy42MzgxIDAuOTExOTk1IDE3LjQ4NjhMNS42MTkyNCAxNi4wNzQ2QzYuNDAxNSAxNi4zMjAxIDcuMjA2MTUgMTYuNDQ0NSA4LjAxMzI1IDE2LjQ0NDVDMTIuNDMxNyAxNi40NDQ1IDE2LjAyNjUgMTIuODQ5NyAxNi4wMjY1IDguNDMxMjFDMTYuMDI2NSA0LjAxMjY4IDEyLjQzMTcgMC40MTc5NjkgOC4wMTMyNSAwLjQxNzk2OVpNOC4wMTMyNSAxMy45Njc2QzcuNTMwNDcgMTMuOTY3NiA3LjEzOTA3IDEzLjU3NjIgNy4xMzkwNyAxMy4wOTM1QzcuMTM5MDcgMTIuNjEwNyA3LjUzMDQ3IDEyLjIxOTMgOC4wMTMyNSAxMi4yMTkzQzguNDk2MDIgMTIuMjE5MyA4Ljg4NzQyIDEyLjYxMDcgOC44ODc0MiAxMy4wOTM1QzguODg3NDIgMTMuNTc2MiA4LjQ5NjAyIDEzLjk2NzYgOC4wMTMyNSAxMy45Njc2Wk05LjMzNzU2IDguMzY0MDJDOS4yMDIyNCA4LjQ0MzI4IDguODg3NDIgOC42Njc4MiA4Ljg4NzQyIDkuMDM5ODFWOS41OTY3OEM4Ljg4NzQyIDEwLjA3OTYgOC40OTYwMiAxMC40NzA5IDguMDEzMjUgMTAuNDcwOUM3LjUzMDQ3IDEwLjQ3MDkgNy4xMzkwNyAxMC4wNzk2IDcuMTM5MDcgOS41OTY3OFY5LjAzOTgxQzcuMTM5MDcgOC4xNTQyOCA3LjYzMDU5IDcuMzM3NjggOC40NTM4MyA2Ljg1NTQ5QzguNzIxMzIgNi42OTg4NCA4Ljg4NzQyIDYuNDA5MzcgOC44ODc0MiA2LjEwMDE1QzguODg3NDIgNS42MTgxMyA4LjQ5NTI2IDUuMjI1OTcgOC4wMTMyNSA1LjIyNTk3QzcuNTMxMjMgNS4yMjU5NyA3LjEzOTA3IDUuNjE4MTMgNy4xMzkwNyA2LjEwMDE1QzcuMTM5MDcgNi41ODI5MiA2Ljc0NzY4IDYuOTc0MzIgNi4yNjQ5IDYuOTc0MzJDNS43ODIxMiA2Ljk3NDMyIDUuMzkwNzMgNi41ODI5MiA1LjM5MDczIDYuMTAwMTVDNS4zOTA3MyA0LjY1NDA5IDYuNTY3MTkgMy40Nzc2MyA4LjAxMzI1IDMuNDc3NjNDOS40NTkzIDMuNDc3NjMgMTAuNjM1OCA0LjY1NDA5IDEwLjYzNTggNi4xMDAxNUMxMC42MzU4IDcuMDI3NDEgMTAuMTM4MyA3Ljg5NDg4IDkuMzM3NTYgOC4zNjQwMloiIGZpbGw9IiMzMTg0RkYiLz4KPC9zdmc+Cg=="); }
    .course.course-map .course-detail .body .summary-box {
      display: grid;
      grid-template-columns: 1fr 2px 1fr;
      align-items: center;
      border: 1px solid #ECECEE;
      padding: 1rem; }
      .course.course-map .course-detail .body .summary-box .item {
        display: grid;
        align-items: center;
        grid-template-columns: 30% 70%; }
        .course.course-map .course-detail .body .summary-box .item .icon img {
          width: 1.875rem; }
        .course.course-map .course-detail .body .summary-box .item span {
          color: #C0C0C0;
          font-size: .875rem;
          white-space: nowrap; }
        .course.course-map .course-detail .body .summary-box .item .detail {
          padding-left: .5rem; }
        .course.course-map .course-detail .body .summary-box .item:nth-child(3n) {
          padding-left: 1rem; }
      .course.course-map .course-detail .body .summary-box .line {
        height: 100%;
        background-color: #ECECEE;
        width: 1px; }
    .course.course-map .course-detail .body .summary-list {
      padding-left: 0; }
      .course.course-map .course-detail .body .summary-list .item {
        background-color: #EFF6FF;
        display: grid;
        align-items: center;
        grid-template-columns: 2rem calc(100% - 2rem);
        padding: .625rem;
        margin-bottom: .5rem;
        font-size: .875rem; }
        .course.course-map .course-detail .body .summary-list .item .detail {
          padding-left: 1rem; }

.course .logo-map {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2rem 8rem 5rem 2rem;
  z-index: 4;
  border-bottom-right-radius: 100%; }
  .course .logo-map .btn-toggle-menu {
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid #FFF;
    border-radius: 0.375rem;
    padding: 5px; }
    .course .logo-map .btn-toggle-menu .hamburger {
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      height: 100%; }
      .course .logo-map .btn-toggle-menu .hamburger span {
        background-color: #C3273F;
        height: 3px;
        border-radius: 3px; }
  .course .logo-map::after {
    content: "";
    display: block;
    background-color: #C3273F;
    position: absolute;
    width: 120%;
    border-radius: 50%;
    aspect-ratio: 1;
    top: -160%;
    left: -30%;
    z-index: -1; }

.course.course-type {
  position: relative;
  overflow-y: auto; }
  .course.course-type .logo-map {
    position: fixed;
    z-index: 99; }
  .course.course-type .wrapper {
    position: relative;
    left: 0;
    background-image: url("../images/select/s-bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    z-index: 8;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; }
    .course.course-type .wrapper.animate__fadeIn {
      opacity: 1; }
    .course.course-type .wrapper.animate__fadeOut {
      z-index: 0; }
    .course.course-type .wrapper > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 5; }
      .course.course-type .wrapper > div > span {
        font-style: italic;
        color: #FFF; }
        .course.course-type .wrapper > div > span:first-child {
          font-size: 5rem;
          font-weight: 700;
          line-height: 1;
          margin: 2rem 1rem 0;
          text-align: center;
          text-shadow: 4px 4px 13px #00000040; }
          @media only screen and (max-height: 890px) {
            .course.course-type .wrapper > div > span:first-child {
              font-size: 4rem; } }
          @media only screen and (max-width: 443px) {
            .course.course-type .wrapper > div > span:first-child {
              font-size: 3rem; } }
          @media only screen and (min-width: 768px) {
            .course.course-type .wrapper > div > span:first-child {
              margin-bottom: 3rem; } }
        .course.course-type .wrapper > div > span:nth-child(2) {
          color: #000;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 51.5%, rgba(255, 255, 255, 0) 100%);
          font-size: 2rem;
          padding: 0.5rem 3rem; }
      .course.course-type .wrapper > div .course-type-list {
        list-style: none;
        padding-left: 0;
        display: flex;
        position: relative;
        gap: 2rem; }
        @media screen and (max-width: 768px) {
          .course.course-type .wrapper > div .course-type-list .splide__track {
            padding-left: 1.25rem !important; } }
        @media only screen and (min-width: 768px) {
          .course.course-type .wrapper > div .course-type-list .splide__track {
            padding: 2rem !important; } }
        .course.course-type .wrapper > div .course-type-list .splide__slide .card {
          aspect-ratio: 269 / 384;
          overflow: hidden;
          border: 6.47px solid #FFFFFF;
          border-radius: 1rem;
          max-height: 26rem;
          background: #1142BE;
          position: relative; }
          .course.course-type .wrapper > div .course-type-list .splide__slide .card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); }
          .course.course-type .wrapper > div .course-type-list .splide__slide .card .detail {
            position: absolute;
            width: 100%;
            bottom: 0;
            padding: 5rem .75rem 1rem; }
            .course.course-type .wrapper > div .course-type-list .splide__slide .card .detail .name {
              font-size: 1.5rem;
              font-weight: 500;
              color: #FFF;
              text-align: center; }
            .course.course-type .wrapper > div .course-type-list .splide__slide .card .detail .progress-text {
              font-size: .75rem; }
              .course.course-type .wrapper > div .course-type-list .splide__slide .card .detail .progress-text span {
                font-size: .875rem; }
                .course.course-type .wrapper > div .course-type-list .splide__slide .card .detail .progress-text span:first-child {
                  color: #12B061; }
            .course.course-type .wrapper > div .course-type-list .splide__slide .card .detail .progress {
              border-radius: 1.5rem; }
              .course.course-type .wrapper > div .course-type-list .splide__slide .card .detail .progress .progress-bar {
                background: #12B061;
                box-shadow: 0px 2px 2px 0px #00000040 inset; }
        .course.course-type .wrapper > div .course-type-list .splide__slide.card-type-747705377172361216 .card .detail {
          background: linear-gradient(to top, #1142BE 40%, transparent); }
        .course.course-type .wrapper > div .course-type-list .splide__slide.card-type-747705178181996544 .card .detail {
          background: linear-gradient(to top, #0B4E2C 40%, transparent); }
        .course.course-type .wrapper > div .course-type-list .splide__slide.card-type-747705241721507840 .card .detail {
          background: linear-gradient(to top, #F1A517 40%, transparent); }
        .course.course-type .wrapper > div .course-type-list .splide__slide:hover img {
          transform: scale(1.1);
          transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1); }
        @media only screen and (max-height: 890px) {
          .course.course-type .wrapper > div .course-type-list {
            margin-bottom: 0; } }
      .course.course-type .wrapper > div .btn {
        margin-top: 3.25rem;
        font-size: 1.875rem;
        border-radius: 3.75rem;
        font-weight: 600;
        background-color: #000;
        color: #fff;
        min-width: 14.75rem;
        opacity: 0;
        pointer-events: none; }
        .course.course-type .wrapper > div .btn.animate__fadeIn {
          opacity: 1;
          pointer-events: auto; }
        @media only screen and (max-width: 443px) {
          .course.course-type .wrapper > div .btn {
            position: absolute;
            bottom: 2rem;
            font-size: 1.5rem; } }
    .course.course-type .wrapper #imgBefore {
      content: '';
      background-image: url("../images/select/s-bg-02.png");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1; }
  .course.course-type .cartoon {
    position: absolute;
    z-index: 2; }
    .course.course-type .cartoon-left {
      left: 0;
      bottom: 0;
      z-index: 10;
      width: 30%;
      max-width: 30rem; }
    .course.course-type .cartoon-right {
      right: 0;
      bottom: 0;
      z-index: 10;
      width: 30%;
      max-width: 30rem; }

.course .document-download,
.course .other-link {
  flex: 0 0 50%; }
  .course .document-download h5,
  .course .other-link h5 {
    font-size: 1.125rem; }

.document-list {
  border: 1px solid #E8E8E8;
  border-radius: .75rem;
  padding: .75rem; }
  .document-list .icon {
    width: 1.25rem; }
  .document-list .name {
    flex: 1;
    padding: 0 .5rem; }
  .document-list .download-btn {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    border: 1px solid #DFDFDF;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF; }
    .document-list .download-btn img {
      width: 1.125rem; }
  .document-list:hover {
    background-color: #ECF4FF;
    border-color: #ECF4FF; }
    .document-list:hover .name {
      color: #3184FF; }
    .document-list:hover .download-btn {
      border: 1px solid #FFF; }
  .document-list-2 .download-btn {
    background-color: #000; }
    .document-list-2 .download-btn img {
      width: .875rem; }

.lesson-list-control {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-flow: column;
  gap: .75rem; }
  .lesson-list-control .circular-loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .lesson-list-control .course-section .course-section-name {
    display: flex;
    align-items: center;
    padding: .75rem .65rem .75rem .65rem;
    border-radius: .5rem;
    border: 1px solid #eceae9;
    gap: 0.5rem;
    background-color: #F8F8F8;
    cursor: pointer; }
    .lesson-list-control .course-section .course-section-name .icon {
      width: 2.25rem; }
    .lesson-list-control .course-section .course-section-name .name {
      font-size: .875rem; }
  .lesson-list-control .course-section .child {
    list-style-type: none;
    display: none; }
    .lesson-list-control .course-section .child li {
      padding: .65rem 1rem;
      position: relative; }
      .lesson-list-control .course-section .child li.lesson-type-content > div::before {
        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyMSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjg3OSAwLjgzMDA3OEgyLjI5NzY3QzEuMDMzOTUgMC44MzAwNzggMCAxLjg2NDAzIDAgMy4xMjc3NVYxMC44NzA5QzAgMTIuMTM0NiAxLjAzMzk1IDEzLjE2ODYgMi4yOTc2NyAxMy4xNjg2SDExLjg3OUMxMy4xNDI3IDEzLjE2ODYgMTQuMTc2NiAxMi4xMzQ2IDE0LjE3NjYgMTAuODcwOVYzLjEyNzc1QzE0LjE3NjYgMS44NDEwNSAxMy4xNDI3IDAuODMwMDc4IDExLjg3OSAwLjgzMDA3OFoiIGZpbGw9IiMxNjE2MTYiLz4KPHBhdGggZD0iTTE5LjI5ODkgMi4wODc3OUMxOS4xNjExIDIuMTEwNzcgMTkuMDIzMiAyLjE3OTcgMTguOTA4MyAyLjI0ODYzTDE1LjMyNCA0LjMxNjUzVjkuNjQ3MTNMMTguOTMxMyAxMS43MTVDMTkuNTk3NiAxMi4xMDU2IDIwLjQyNDggMTEuODc1OSAyMC44MTU0IDExLjIwOTVDMjAuOTMwMyAxMS4wMDI4IDIwLjk5OTIgMTAuNzczIDIwLjk5OTIgMTAuNTIwMlYzLjQyMDQ0QzIwLjk5OTIgMi41NzAzIDIwLjE5NSAxLjg4MSAxOS4yOTg5IDIuMDg3NzlaIiBmaWxsPSIjMTYxNjE2Ii8+Cjwvc3ZnPgo="); }
      .lesson-list-control .course-section .child li.lesson-type-document > div::before {
        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjYwMTYgNS4yNzM0NEMxMC45MjMxIDUuMjczNDQgMTAuMzcxMSA0LjcyMTQ1IDEwLjM3MTEgNC4wNDI5N1YwSDQuMDc4MTJDMy4wMTE5NCAwIDIuMTQ0NTMgMC44Njc0MSAyLjE0NDUzIDEuOTMzNTlWMTYuMDY2NEMyLjE0NDUzIDE3LjEzMjYgMy4wMTE5NCAxOCA0LjA3ODEyIDE4SDEzLjkyMTlDMTQuOTg4MSAxOCAxNS44NTU1IDE3LjEzMjYgMTUuODU1NSAxNi4wNjY0VjUuMjczNDRIMTEuNjAxNlpNNS4wMjczNCAxMi42NTYySDcuNTgzOTFDNy44NzUxNCAxMi42NTYyIDguMTExMjUgMTIuODkyNCA4LjExMTI1IDEzLjE4MzZDOC4xMTEyNSAxMy40NzQ4IDcuODc1MTQgMTMuNzEwOSA3LjU4MzkxIDEzLjcxMDlINS4wMjczNEM0LjczNjExIDEzLjcxMDkgNC41IDEzLjQ3NDggNC41IDEzLjE4MzZDNC41IDEyLjg5MjQgNC43MzYxMSAxMi42NTYyIDUuMDI3MzQgMTIuNjU2MlpNNC41IDEwLjM3MTFDNC41IDEwLjA3OTkgNC43MzYxMSA5Ljg0Mzc1IDUuMDI3MzQgOS44NDM3NUgxMi43NjE3QzEzLjA1MyA5Ljg0Mzc1IDEzLjI4OTEgMTAuMDc5OSAxMy4yODkxIDEwLjM3MTFDMTMuMjg5MSAxMC42NjIzIDEzLjA1MyAxMC44OTg0IDEyLjc2MTcgMTAuODk4NEg1LjAyNzM0QzQuNzM2MTEgMTAuODk4NCA0LjUgMTAuNjYyMyA0LjUgMTAuMzcxMVpNMTIuNzYxNyA3LjAzMTI1QzEzLjA1MyA3LjAzMTI1IDEzLjI4OTEgNy4yNjczNiAxMy4yODkxIDcuNTU4NTlDMTMuMjg5MSA3Ljg0OTgzIDEzLjA1MyA4LjA4NTk0IDEyLjc2MTcgOC4wODU5NEg1LjAyNzM0QzQuNzM2MTEgOC4wODU5NCA0LjUgNy44NDk4MyA0LjUgNy41NTg1OUM0LjUgNy4yNjczNiA0LjczNjExIDcuMDMxMjUgNS4wMjczNCA3LjAzMTI1SDEyLjc2MTdaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMTEuNDI1OCA0LjA0MzAxQzExLjQyNTggNC4xMzk5NCAxMS41MDQ2IDQuMjE4NzkgMTEuNjAxNiA0LjIxODc5SDE1LjYyMDRDMTUuNTIzOSA0LjA0MDY5IDE1LjM5OTggMy44NzcxMSAxNS4yNTA3IDMuNzM2MDNMMTEuODYwOSAwLjUyOTAwNEMxMS43MjkzIDAuNDA0NTUxIDExLjU4MjggMC4zMDA3MzQgMTEuNDI1OCAwLjIxODc1VjQuMDQzMDFIMTEuNDI1OFoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo="); }
      .lesson-list-control .course-section .child li .course-lesson-name {
        font-size: .875rem;
        display: flex;
        align-items: baseline; }
        .lesson-list-control .course-section .child li .course-lesson-name::before {
          position: absolute;
          left: -1rem;
          top: .8rem; }
        .lesson-list-control .course-section .child li .course-lesson-name .name {
          flex: 1; }
        .lesson-list-control .course-section .child li .course-lesson-name .status {
          background-color: #12B061;
          border-radius: 4rem;
          color: #FFF;
          font-size: .75rem;
          white-space: nowrap;
          padding: .15rem .5rem; }
      .lesson-list-control .course-section .child li.is_finish .course-lesson-name .name a {
        color: #078B49 !important;
        font-weight: 500; }
      .lesson-list-control .course-section .child li.is_finish .course-lesson-name:before {
        content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyMSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjg3OSAwLjgzMDA3OEgyLjI5NzY3QzEuMDMzOTUgMC44MzAwNzggMCAxLjg2NDAzIDAgMy4xMjc3NVYxMC44NzA5QzAgMTIuMTM0NiAxLjAzMzk1IDEzLjE2ODYgMi4yOTc2NyAxMy4xNjg2SDExLjg3OUMxMy4xNDI3IDEzLjE2ODYgMTQuMTc2NiAxMi4xMzQ2IDE0LjE3NjYgMTAuODcwOVYzLjEyNzc1QzE0LjE3NjYgMS44NDEwNSAxMy4xNDI3IDAuODMwMDc4IDExLjg3OSAwLjgzMDA3OFoiIGZpbGw9IiMwNzhCNDkiLz4KPHBhdGggZD0iTTE5LjI5ODggMi4wODc3OUMxOS4xNjEgMi4xMTA3NyAxOS4wMjMxIDIuMTc5NyAxOC45MDgyIDIuMjQ4NjNMMTUuMzIzOSA0LjMxNjUzVjkuNjQ3MTNMMTguOTMxMiAxMS43MTVDMTkuNTk3NSAxMi4xMDU2IDIwLjQyNDcgMTEuODc1OSAyMC44MTUzIDExLjIwOTVDMjAuOTMwMiAxMS4wMDI4IDIwLjk5OTEgMTAuNzczIDIwLjk5OTEgMTAuNTIwMlYzLjQyMDQ0QzIwLjk5OTEgMi41NzAzIDIwLjE5NDkgMS44ODEgMTkuMjk4OCAyLjA4Nzc5WiIgZmlsbD0iIzA3OEI0OSIvPgo8L3N2Zz4K"); }
      .lesson-list-control .course-section .child li.no-event {
        pointer-events: none;
        opacity: 50%; }
  .lesson-list-control .course-section:has(.child) .course-section-name:after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMyAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMS45ODI0Mkw2LjUwNzUzIDguNTU5MDFMMTEuOTY5NSAxLjk4MjQyIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
    display: block; }
  .lesson-list-control .course-section.active .course-section-name {
    background-color: #ECF4FF !important;
    border-color: #ECF4FF !important; }
    .lesson-list-control .course-section.active .course-section-name .name {
      color: #3184FF; }
    .lesson-list-control .course-section.active .course-section-name:after {
      transform: rotate(180deg); }
  .lesson-list-control .course-section.active .child {
    display: block; }
  .lesson-list-control .course-section.is_finish .course-section-name {
    background-color: #DAF5E8 !important; }
    .lesson-list-control .course-section.is_finish .course-section-name .name {
      color: #078B49 !important; }
      .lesson-list-control .course-section.is_finish .course-section-name .name a {
        color: #078B49 !important;
        font-weight: 500; }
    .lesson-list-control .course-section.is_finish .course-section-name .icon {
      display: none; }
    .lesson-list-control .course-section.is_finish .course-section-name::before {
      content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMTAiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8zNzkzXzk4NDYyKSIvPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMzc5M185ODQ2MikiPgo8cGF0aCBkPSJNNy44NzMxMyAxNUM3LjUzMjUgMTUuMDAwMiA3LjIwNTgyIDE0Ljg0MzkgNi45NjUxNiAxNC41NjU2TDQuMjIwMDcgMTEuMzk3OUMzLjkyNDY5IDExLjA1NjggMy45MjQ2OSAxMC41MDM5IDQuMjIwMDcgMTAuMTYyOEM0LjUxNTUzIDkuODIxODMgNC45OTQ0OSA5LjgyMTgzIDUuMjg5OTYgMTAuMTYyOEw3Ljg3MzEzIDEzLjE0NDhMMTQuNzA3MSA1LjI1NTczQzE1LjAwMjYgNC45MTQ3NiAxNS40ODE1IDQuOTE0NzYgMTUuNzc3IDUuMjU1NzNDMTYuMDcyNCA1LjU5NjgyIDE2LjA3MjQgNi4xNDk3MSAxNS43NzcgNi40OTA4TDguNzgxMSAxNC41NjU2QzguNTQwNDQgMTQuODQzOSA4LjIxMzc2IDE1LjAwMDIgNy44NzMxMyAxNVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8zNzkzXzk4NDYyIiB4MT0iMTcuODEyNSIgeTE9IjEuMjUiIHgyPSIyLjE4NzUiIHkyPSIyMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEM5RDVCIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdCRDM1MiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM3OTNfOTg0NjIiPgo8cmVjdCB3aWR0aD0iMTMuNzUiIGhlaWdodD0iMTMuNzUiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjEyNSAzLjEyNSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
      align-items: center;
      justify-content: center;
      display: flex;
      width: 2.25rem;
      margin-top: .25rem; }
  .lesson-list-control.loading {
    pointer-events: none; }
    .lesson-list-control.loading .circular-loader {
      display: block; }
    .lesson-list-control.loading:after {
      content: "";
      display: block !important;
      width: calc(100% - 1rem);
      height: 100%;
      position: absolute;
      top: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
      background-color: rgba(255, 255, 255, 0.5); }

.course-map {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex; }

.course-status-tab {
  display: flex;
  gap: 0.5rem;
  align-items: center; }
  .course-status-tab .tab-item {
    font-size: 1rem;
    color: #6E6B6B;
    border-radius: 2rem;
    padding: 0.375rem 0.75rem; }
    .course-status-tab .tab-item:hover, .course-status-tab .tab-item.active {
      background-color: #2b2b2b;
      color: #FFF; }

.course-status-update {
  display: flex;
  align-items: center;
  gap: 0.5rem; }
  .course-status-update .number {
    color: #12b061; }
  .course-status-update .detail {
    font-size: 1.125rem;
    font-weight: 600; }

.search-bar-small {
  position: relative; }
  .search-bar-small .icon-svg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .search-bar-small .form-control {
    padding-left: 40px; }

.page-heading-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: column; }
  @media only screen and (min-width: 992px) {
    .page-heading-actions {
      flex-direction: row; } }

.course-list-empty {
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .course-list-empty .icon-svg {
    margin-bottom: 1rem; }
  .course-list-empty .text {
    color: #727171; }

#exercise_console {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 auto;
  padding: 0; }
  #exercise_console #exercise_question {
    width: calc(100vw - 500px);
    min-width: 500px;
    padding: 1.5rem 30px; }
  #exercise_console #exercise_control {
    width: 500px;
    border-left: solid 1px #DFDFDF;
    padding: 1.5rem 30px; }
    #exercise_console #exercise_control h3 {
      font-size: 1.5rem; }
  #exercise_console #answer_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 1.5rem; }
    #exercise_console #answer_list li {
      cursor: pointer;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-weight: bold;
      border-radius: 8px;
      color: #000;
      background-color: #DDD;
      font-size: 1.3rem; }
      #exercise_console #answer_list li.is_answer {
        background-color: #3972FD;
        color: #fff; }
      #exercise_console #answer_list li.current {
        background-color: #E66F2A;
        color: #fff; }
  #exercise_console #choice_list {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    gap: 30px;
    padding: 0; }
    #exercise_console #choice_list li {
      cursor: pointer;
      width: 50%;
      margin-bottom: 1rem;
      border: solid 1px #CCC;
      border-radius: 7px;
      font-size: 1.2rem;
      padding: 1rem 1.3rem; }
      #exercise_console #choice_list li img {
        margin-bottom: 0.5rem; }
      #exercise_console #choice_list li.active {
        background-color: #E66F2A;
        color: #fff; }

#fake_answer_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px; }

.data-answer {
  padding: 6px 12px;
  border-radius: 4px;
  min-width: 75px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer; }
  .data-answer.gu-mirror {
    background: #76adf5;
    border: 1.52px solid white;
    color: #FFF;
    transform: skew(-20deg); }
    .data-answer.gu-mirror > div {
      transform: skew(0deg); }

.page-course .data-answer.gu-mirror {
  background: #212322 !important;
  border: 1.52px solid white;
  color: #FFF;
  transform: skew(0) !important; }
  .page-course .data-answer.gu-mirror > div {
    transform: skew(0deg); }

#fill_list {
  display: flex;
  flex-direction: column; }

#fill_list > div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 0.5rem; }

#fill_list .prefix,
#fill_list .suffix {
  padding: 6px 12px;
  min-height: 36px; }

#fill_list .fill-answer {
  border-radius: 4px;
  min-width: 75px;
  min-height: 36px;
  background-color: #ccc; }
  #fill_list .fill-answer .data-answer {
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-width: 75px;
    min-height: 36px; }

@media screen and (max-width: 1199px) {
  .course-learning-lesson {
    padding-top: 5rem;
    position: relative !important;
    overflow: unset !important;
    min-height: 100vh; }
    .course-learning-lesson .course-wrapper {
      overflow: unset !important;
      min-height: 100vh; } }

.lesson-content-exercise {
  opacity: 0;
  pointer-events: none;
  display: none; }
  .lesson-content-exercise.show {
    position: absolute;
    top: 0;
    z-index: 2;
    left: 0;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.761);
    backdrop-filter: blur(20px);
    transition: all .3s;
    text-align: left;
    display: flex;
    justify-content: center;
    flex-flow: column;
    width: 100%;
    padding: 1rem;
    opacity: 1;
    pointer-events: all;
    height: 100%;
    min-height: 28.125rem; }
    @media screen and (min-width: 1200px) {
      .lesson-content-exercise.show {
        padding: 1rem 5rem; } }
  .lesson-content-exercise .question-number {
    font-size: .75rem;
    color: #FFF; }
  .lesson-content-exercise .question-text {
    color: #FFF; }
  .lesson-content-exercise #choice_list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    gap: 0.75rem;
    padding: 0; }
    .lesson-content-exercise #choice_list li {
      cursor: pointer;
      width: 100%;
      margin-bottom: 0;
      border: solid 1px #dbdbdb;
      border-radius: 2rem;
      padding: 0.75rem 0.75rem;
      background: #ffffff;
      color: #474242;
      display: flex;
      align-items: center;
      gap: 0.5rem; }
      .lesson-content-exercise #choice_list li .image {
        position: relative;
        background-color: #FFF;
        padding: .25rem;
        border-radius: .25rem;
        border: 1px solid #CCC; }
        .lesson-content-exercise #choice_list li .image .bi-zoom-in {
          position: absolute;
          right: 0rem;
          bottom: 0rem;
          font-size: 1rem;
          width: 1.25rem;
          height: 1.25rem;
          background: #FFF;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top-left-radius: .5rem; }
      .lesson-content-exercise #choice_list li img {
        margin-bottom: 0.5rem; }
      .lesson-content-exercise #choice_list li.active, .lesson-content-exercise #choice_list li:hover {
        background: #D4FAD4;
        border: 1px solid #AAD7AA;
        color: #12A95D; }
        .lesson-content-exercise #choice_list li.active .circle, .lesson-content-exercise #choice_list li:hover .circle {
          border: solid 1px #12A95D; }
          .lesson-content-exercise #choice_list li.active .circle::after, .lesson-content-exercise #choice_list li:hover .circle::after {
            opacity: 1; }
      .lesson-content-exercise #choice_list li .circle {
        position: relative;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        border: 1px solid #474242;
        display: flex;
        justify-content: center;
        align-items: center; }
        .lesson-content-exercise #choice_list li .circle::after {
          content: "";
          background: #12A95D;
          width: 0.875rem;
          height: 0.875rem;
          border-radius: 50%;
          opacity: 0;
          transition: 0.3s all; }
  .lesson-content-exercise #choice_list {
    list-style-type: none; }
    .lesson-content-exercise #choice_list li {
      border: 1px solid transparent;
      background: #FFFFFF4D;
      color: #FFF;
      font-size: .875rem;
      padding: 0.65rem 0.75rem; }
      .lesson-content-exercise #choice_list li .circle {
        border: 1.5px solid #FFFFFF; }
      .lesson-content-exercise #choice_list li .image {
        position: relative;
        background-color: #FFF;
        padding: .25rem;
        border-radius: .25rem; }
        .lesson-content-exercise #choice_list li .image .bi-zoom-in {
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: .75rem; }
      .lesson-content-exercise #choice_list li:hover, .lesson-content-exercise #choice_list li.active {
        background: #FFFFFFE5;
        border: 1px solid #FFFFFF;
        color: #2B2B2B; }
        .lesson-content-exercise #choice_list li:hover .circle, .lesson-content-exercise #choice_list li.active .circle {
          border: 1.5px solid #2B2B2B !important; }
          .lesson-content-exercise #choice_list li:hover .circle:after, .lesson-content-exercise #choice_list li.active .circle:after {
            background-color: #2B2B2B !important; }
  .lesson-content-exercise #fake_answer_list .data-answer {
    background: #FFFFFF4D;
    color: #FFF; }
  .lesson-content-exercise #fill_list {
    display: flex;
    flex-direction: column;
    background: #FFFFFF4D;
    padding: 1rem;
    border-radius: .75rem;
    margin-bottom: 2rem; }
    .lesson-content-exercise #fill_list .fill-item .fill-item-no {
      color: #FFF; }
    .lesson-content-exercise #fill_list .fill-answer {
      margin-bottom: 1rem; }
    .lesson-content-exercise #fill_list .fill-item-quesiton {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      margin-bottom: 0.5rem;
      border: 1px solid #DBDBDB;
      border-radius: .625rem;
      font-size: .875rem;
      padding: 5px;
      margin-left: 1rem;
      width: calc(100% - 6rem);
      color: #FFF; }
      .lesson-content-exercise #fill_list .fill-item-quesiton .prefix,
      .lesson-content-exercise #fill_list .fill-item-quesiton .suffix {
        padding: 0.375rem 0.75rem;
        min-height: 2.25rem; }
      .lesson-content-exercise #fill_list .fill-item-quesiton .fill-answer {
        border-radius: 0.75rem;
        min-width: 6rem;
        min-height: 2.25rem;
        background-color: #fff;
        border: 1px solid #dbdbdb; }
        .lesson-content-exercise #fill_list .fill-item-quesiton .fill-answer .data-answer {
          padding: 0.375rem 0.75rem;
          border-radius: 0.75rem;
          text-align: center;
          white-space: nowrap;
          cursor: pointer;
          min-width: 7rem;
          min-height: 2.25rem;
          width: 100%;
          color: #ffffff;
          background-color: #212322; }
        .lesson-content-exercise #fill_list .fill-item-quesiton .fill-answer:has(.data-answer) {
          border: 1px solid transparent; }
  .lesson-content-exercise .btn-submit-question {
    background: #24A672;
    color: #FFF;
    padding: .5rem 1.5rem;
    border: 0 !important; }

.course-exam .card-scroll {
  position: relative;
  overflow-y: auto; }

.course-exam .lesson-container {
  position: absolute;
  inset: 0; }
  .course-exam .lesson-container .step {
    padding: 1rem; }
    @media only screen and (min-width: 992px) {
      .course-exam .lesson-container .step {
        padding: 1.5rem; } }

.course-exam .timer-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #83E7A9;
  border-radius: 3rem;
  border: 0.3125rem solid #ffffff;
  margin-left: auto;
  margin-right: auto;
  margin-top: -1.5rem;
  padding: 0.5rem; }
  .course-exam .timer-wrapper .icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center; }
    .course-exam .timer-wrapper .icon-wrapper .img {
      width: 14px;
      height: auto; }
  .course-exam .timer-wrapper .timer {
    color: #01712C;
    font-size: 1rem;
    font-weight: 700;
    padding-right: 0.5rem; }

.course-exam .question {
  display: none; }
  .course-exam .question.active {
    display: block; }
  .course-exam .question .question-title {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    flex-direction: column; }
  .course-exam .question .question-number {
    background-color: #C3273F;
    border-radius: 100%;
    width: 68px;
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem; }
    .course-exam .question .question-number .text {
      font-size: 1rem;
      font-weight: 600;
      color: #ffffff; }
    .course-exam .question .question-number .number {
      font-size: 1.125rem;
      font-weight: 700;
      color: #ffffff; }
      @media only screen and (min-width: 992px) {
        .course-exam .question .question-number .number {
          font-size: 1.25rem; } }
  .course-exam .question-image {
    text-align: center; }
    .course-exam .question-image img {
      width: 100%;
      max-width: 100%; }
  .course-exam .question-choice .choice-item {
    border: 0.3px solid #000000;
    border-radius: 1.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem; }
    .course-exam .question-choice .choice-item-input {
      display: none; }
      .course-exam .question-choice .choice-item-input:checked + .choice-item-label::after {
        background-color: #474646; }
    .course-exam .question-choice .choice-item-label {
      display: flex;
      flex-flow: column;
      position: relative;
      cursor: pointer; }
      .course-exam .question-choice .choice-item-label:before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        border: 1px solid #474646;
        border-radius: 100%;
        background: #fff; }
      .course-exam .question-choice .choice-item-label::after {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 100%;
        background-color: transparent;
        left: 3px;
        top: 3px;
        position: absolute; }
      .course-exam .question-choice .choice-item-label.--incorrect {
        border-color: #fd7070; }
        .course-exam .question-choice .choice-item-label.--incorrect:after {
          background-color: #fd7070; }
      .course-exam .question-choice .choice-item-label.--correct {
        border-color: #35d475; }
        .course-exam .question-choice .choice-item-label.--correct:after {
          background-color: #35d475; }
      .course-exam .question-choice .choice-item-label .text {
        padding-left: 28px; }
      .course-exam .question-choice .choice-item-label .image {
        padding-left: 28px;
        max-width: 300px;
        max-height: 300px;
        margin: 0.5rem 0;
        position: relative; }
        .course-exam .question-choice .choice-item-label .image .preview {
          position: absolute;
          top: 2px;
          right: 3px;
          background-color: #3184ff;
          border-radius: 0.25rem;
          line-height: 1; }
          .course-exam .question-choice .choice-item-label .image .preview i {
            font-size: 1rem;
            color: #fff; }
        .course-exam .question-choice .choice-item-label .image img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          max-width: 100%;
          border: 1px solid #474646;
          border-radius: 0.25rem; }
  .course-exam .question-match__answer .answer-bg {
    background-color: #f5f6fa;
    border-radius: 30px;
    text-align: center;
    min-height: 2.5rem;
    position: relative;
    height: 100%; }
  .course-exam .question-match__answer .answer-item {
    width: 100%;
    height: 100%;
    padding: 0.35rem;
    border-radius: 30px;
    background-color: #f5f6fa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    line-height: 1; }
    .course-exam .question-match__answer .answer-item.ui-draggable-dragging {
      z-index: 2;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.161); }
  .course-exam .question-match__question .question-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
    user-select: none; }
    .course-exam .question-match__question .question-item .answer-match {
      border-radius: 30px;
      min-height: 2.5rem;
      border: 0.3px solid rgba(0, 0, 0, 0.49);
      margin: 0 0.5rem;
      position: relative; }
      .course-exam .question-match__question .question-item .answer-match.ui-state-highlight {
        background-color: #f5f6fe; }
      .course-exam .question-match__question .question-item .answer-match.--correct {
        border-color: #35d475;
        color: #35d475; }
      .course-exam .question-match__question .question-item .answer-match.--incorrect {
        border-color: #fd7070;
        color: #fd7070; }
      .course-exam .question-match__question .question-item .answer-match .answer-item {
        width: 100% !important;
        height: 100% !important;
        min-height: calc(2.5rem - 2px);
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1; }
        .course-exam .question-match__question .question-item .answer-match .answer-item .icon-cancel {
          position: absolute;
          width: 21px;
          height: 21px;
          border-radius: 50%;
          background-color: #3184ff;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1rem;
          top: -5px;
          right: 0px;
          z-index: 3;
          padding-bottom: 2px;
          cursor: pointer; }
  .course-exam .question-match-line .matching-wrapper {
    position: relative; }
    .course-exam .question-match-line .matching-wrapper .point {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      vertical-align: middle;
      border: solid 2px #707070;
      pointer-events: none;
      position: relative;
      box-shadow: none; }
      .course-exam .question-match-line .matching-wrapper .point.set::after {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: #474646; }
      .course-exam .question-match-line .matching-wrapper .point.--correct::after {
        background-color: #35d475 !important; }
      .course-exam .question-match-line .matching-wrapper .point.--incorrect::after {
        background-color: #fd7070 !important; }
      .course-exam .question-match-line .matching-wrapper .point.active {
        box-shadow: 0 0 0 0.25rem rgba(0, 9, 51, 0.25); }
        .course-exam .question-match-line .matching-wrapper .point.active::after {
          content: "";
          display: block;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background-color: #474646; }
    .course-exam .question-match-line .matching-wrapper .line {
      pointer-events: none;
      background-color: transparent;
      min-height: 6px;
      min-width: 6px;
      border-radius: 3px;
      display: inline-block;
      position: absolute;
      transform-origin: 3px center; }
      .course-exam .question-match-line .matching-wrapper .line.set {
        background-color: #474646; }
      .course-exam .question-match-line .matching-wrapper .line.--correct {
        background-color: #35d475 !important; }
      .course-exam .question-match-line .matching-wrapper .line.--incorrect {
        background-color: #fd7070 !important; }
  .course-exam .question-match-line .matching-list {
    padding: 0;
    margin: 0; }
    .course-exam .question-match-line .matching-list.state-a .matching-b .point:not(.set) {
      box-shadow: 0 0 0 0.25rem rgba(0, 9, 51, 0.25); }
  .course-exam .question-match-line .matching-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 1rem; }
    .course-exam .question-match-line .matching-item .matching-a,
    .course-exam .question-match-line .matching-item .matching-b {
      width: calc(50% - 20px);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; }
    .course-exam .question-match-line .matching-item .matching-b .matching-content .text,
    .course-exam .question-match-line .matching-item .matching-b .matching-content .image {
      margin-left: auto; }
    .course-exam .question-match-line .matching-item .matching-b .point.set::after {
      content: "";
      display: block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #474646; }
    .course-exam .question-match-line .matching-item .matching-b .point.--correct::after {
      background-color: #35d475 !important; }
    .course-exam .question-match-line .matching-item .matching-b .point.--incorrect::after {
      background-color: #fd7070 !important; }
    .course-exam .question-match-line .matching-item .matching-content {
      width: calc(100% - 27px);
      display: flex;
      align-items: center;
      flex-flow: wrap; }
      .course-exam .question-match-line .matching-item .matching-content .text {
        width: 100%;
        max-width: 100%;
        background: #f5f6fa;
        border-radius: 100px;
        text-align: center;
        padding: 1rem;
        cursor: pointer; }
      .course-exam .question-match-line .matching-item .matching-content .image {
        width: 197px;
        height: 50px;
        max-width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 0.25rem;
        border: 1px solid #474646;
        position: relative; }
        .course-exam .question-match-line .matching-item .matching-content .image .preview {
          position: absolute;
          top: 2px;
          right: 3px;
          background-color: #3184ff;
          border-radius: 0.25rem;
          line-height: 1; }
          .course-exam .question-match-line .matching-item .matching-content .image .preview i {
            font-size: 0.75rem;
            color: #fff; }
        .course-exam .question-match-line .matching-item .matching-content .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0.25rem; }
    .course-exam .question-match-line .matching-item .point {
      cursor: pointer;
      pointer-events: initial;
      border-color: #707070; }
      .course-exam .question-match-line .matching-item .point.--correct::after {
        border-color: #35d475 !important; }
      .course-exam .question-match-line .matching-item .point.--incorrect::after {
        border-color: #fd7070 !important; }
  .course-exam .question-progress {
    margin-top: 2rem; }
    .course-exam .question-progress .progress-text {
      text-align: center;
      font-size: 1.125rem; }
    .course-exam .question-progress .progress {
      background-color: #dbdbdb;
      height: 5px;
      border-radius: 1rem; }
      .course-exam .question-progress .progress-bar {
        background-color: #3184ff;
        border-radius: 1rem; }
  .course-exam .question-button {
    display: flex;
    justify-content: center;
    margin-top: 3rem; }
    .course-exam .question-button .question-btn {
      width: calc(50% - 0.5rem);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.125rem;
      padding: 0.5rem;
      border-radius: 0.75rem;
      box-shadow: none;
      font-weight: 300;
      line-height: 1; }
      .course-exam .question-button .question-btn i {
        font-weight: 400; }
  .course-exam .question-title {
    display: flex; }
    .course-exam .question-title p {
      margin-bottom: 0; }
  .course-exam .question.answer .question-choice {
    pointer-events: none; }
    .course-exam .question.answer .question-choice .choice-item-input:checked + .choice-item-label::after {
      background-color: #35d475; }

.course-exam .question-item .heading .question-number {
  background-color: #C3273F;
  border-radius: 100%;
  width: 68px;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem; }
  .course-exam .question-item .heading .question-number .text {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff; }
  .course-exam .question-item .heading .question-number .number {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff; }
    @media only screen and (min-width: 992px) {
      .course-exam .question-item .heading .question-number .number {
        font-size: 1.25rem; } }

.course-exam .question-item .heading .title {
  font-size: 1.125rem;
  font-weight: 700; }
  @media only screen and (min-width: 992px) {
    .course-exam .question-item .heading .title {
      font-size: 1.25rem; } }

.course-exam .question-item .actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem; }
  .course-exam .question-item .actions .btn {
    border-radius: 4rem;
    font-size: 1.125rem;
    font-weight: 600; }
  .course-exam .question-item .actions .btn-back {
    background-color: #447fec;
    color: #ffffff; }
  .course-exam .question-item .actions .btn-next {
    background-color: #0047d0;
    color: #ffffff; }

.question-wrapper .question {
  display: none; }
  .question-wrapper .question.active {
    display: block !important; }

.exam-training .page-heading {
  padding: 0.5rem;
  background: white;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 24%, white 76%, rgba(255, 255, 255, 0) 100%);
  text-align: center;
  margin: auto; }
  .exam-training .page-heading .title {
    font-size: 1.5rem;
    font-weight: 600; }
    @media only screen and (min-width: 768px) {
      .exam-training .page-heading .title {
        padding: 0.25rem 2rem;
        font-size: 1.75rem; } }
  @media only screen and (min-width: 992px) {
    .exam-training .page-heading {
      max-width: 845px;
      margin-bottom: 3rem; } }

.exam-training .step {
  width: 100%; }

.exam-training .card {
  padding: 1rem;
  max-width: 394px;
  margin: auto;
  position: relative;
  border-radius: 1.5rem;
  width: 100%; }
  .exam-training .card::before {
    content: "";
    background: url("../images/exam/card-bg.webp");
    background-size: 100% 93%;
    position: absolute;
    inset: -4.5rem;
    z-index: -1;
    background-position: 0 2rem;
    background-repeat: no-repeat;
    transform: rotate(4deg); }
  .exam-training .card .img-heading {
    display: flex;
    margin: 0 auto 2rem auto;
    width: 124px;
    height: 124px; }
  @media only screen and (min-width: 768px) {
    .exam-training .card .list {
      margin-bottom: 4rem; } }
  @media only screen and (min-width: 768px) and (min-height: 900px) {
    .exam-training .card .list {
      margin-bottom: 7rem; } }
  .exam-training .card .list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0; }
    .exam-training .card .list-item:not(:last-of-type) {
      border-bottom: 1px solid #e4e4e4; }
    .exam-training .card .list-item .list-title,
    .exam-training .card .list-item .list-detail {
      display: flex;
      align-items: center;
      gap: 0.5rem; }
    .exam-training .card .list-item .list-title {
      margin-right: auto; }
      .exam-training .card .list-item .list-title .title {
        font-size: 0.875rem; }
    .exam-training .card .list-item .list-detail .number {
      font-size: 1.25rem;
      font-weight: 600; }
      .exam-training .card .list-item .list-detail .number.text-red {
        color: #C3273F; }
    .exam-training .card .list-item .list-detail .text {
      font-size: 0.875rem;
      width: 4rem;
      text-align: right; }
  .exam-training .card .result {
    text-align: center; }
    .exam-training .card .result .text-result {
      font-size: 1.75rem;
      font-weight: 600; }

.practice-summary {
  inset: 0;
  background: url("../../assets/images/exam/bg-summary.webp");
  background-size: cover;
  background-position: bottom center;
  padding: 6.5rem 0 2rem; }
  .practice-summary .card::before {
    display: none; }
  @media only screen and (min-width: 1200px) {
    .practice-summary {
      padding-top: 2rem !important; } }
  @media only screen and (min-width: 1600px) {
    .practice-summary {
      padding-top: 6rem !important; } }
  @media only screen and (min-width: 992px) {
    .practice-summary .page-heading {
      margin-bottom: 2rem !important; } }
  .practice-summary .overview-wrapper .content-left .card-share {
    text-align: center; }
    .practice-summary .overview-wrapper .content-left .card-share ul {
      text-align: center;
      list-style-type: none;
      margin-left: 0;
      padding-left: 0;
      background-color: #FFF;
      border-radius: .5rem;
      padding: .75rem;
      display: inline-flex;
      gap: .5em; }
      .practice-summary .overview-wrapper .content-left .card-share ul li {
        margin-bottom: .5rem; }
      @media only screen and (min-width: 768px) {
        .practice-summary .overview-wrapper .content-left .card-share ul {
          display: block;
          margin-right: 1rem;
          margin-left: -4rem; } }
  @media only screen and (min-width: 1200px) {
    .practice-summary .overview-wrapper .content-left {
      display: flex;
      align-items: baseline;
      flex: 0 0 30rem; } }
  .practice-summary .overview-wrapper .content-right {
    display: none; }
    .practice-summary .overview-wrapper .content-right .card-answer {
      width: 100%;
      max-width: 30rem;
      padding: 1.5rem; }
      .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr  1fr 1fr;
        gap: 0.5rem; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number {
          display: flex;
          align-items: center;
          background-color: #ECF4FF;
          cursor: pointer;
          padding: 0.2rem .5rem;
          border-radius: 4rem; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number .label-number {
            font-weight: 500;
            margin-right: auto; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number .circle {
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #C2D8F9;
            position: relative; }
            @media only screen and (min-width: 1600px) {
              .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number .circle {
                width: 20px;
                height: 20px; } }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number.correct {
            background-color: #01A453;
            color: #FFFF; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number.correct .circle {
              background-color: rgba(255, 255, 255, 0.2); }
              .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number.correct .circle::before {
                content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEzIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuMzA1OCAwLjQ1MTE2NEMxMi42MzY1IDAuNzgxODkxIDEyLjYzNjUgMS4zMTgwOSAxMi4zMDU4IDEuNjQ4ODJMNS41MzA5MSA4LjQyMzc0QzUuMjAwMTkgOC43NTQ0NCA0LjY2Mzk5IDguNzU0NDQgNC4zMzMyNiA4LjQyMzc0TDAuOTQ1NzkzIDUuMDM2MjhDMC42MTUwNzQgNC43MDU1OCAwLjYxNTA3NCA0LjE2OTM2IDAuOTQ1NzkzIDMuODM4NjNDMS4yNzY1MiAzLjUwNzkxIDEuODEyNzIgMy41MDc5MSAyLjE0MzQ1IDMuODM4NjNMNC45MzIwOSA2LjYyNzI5TDExLjEwODIgMC40NTExNjRDMTEuNDM4OSAwLjEyMDQ0NSAxMS45NzUxIDAuMTIwNDQ1IDEyLjMwNTggMC40NTExNjRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number.wrong {
            background-color: #C3273F;
            color: #FFFF; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number.wrong .circle {
              background-color: rgba(255, 255, 255, 0.2); }
              .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper .number.wrong .circle::before {
                content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTE2MTUgNS42NzU4Nkw5LjgwOTk1IDEuNzgxODZDMTAuMDYzNCAxLjUyODU3IDEwLjA2MzQgMS4xMTkwNCA5LjgwOTk1IDAuODY1NzQ4QzkuNTU2NjcgMC42MTI0NTkgOS4xNDcxNCAwLjYxMjQ1OSA4Ljg5Mzg2IDAuODY1NzQ4TDQuOTk5OTQgNC43NTk3NUwxLjEwNjE0IDAuODY1NzQ4QzAuODUyNzQgMC42MTI0NTkgMC40NDMzMzUgMC42MTI0NTkgMC4xOTAwNTEgMC44NjU3NDhDLTAuMDYzMzUwNSAxLjExOTA0IC0wLjA2MzM1MDUgMS41Mjg1NyAwLjE5MDA1MSAxLjc4MTg2TDQuMDgzODUgNS42NzU4NkwwLjE5MDA1MSA5LjU2OTg1Qy0wLjA2MzM1MDUgOS44MjMxNCAtMC4wNjMzNTA1IDEwLjIzMjcgMC4xOTAwNTEgMTAuNDg2QzAuMzE2Mjc4IDEwLjYxMjMgMC40ODIyNDYgMTAuNjc1OCAwLjY0ODA5NyAxMC42NzU4QzAuODEzOTQ3IDEwLjY3NTggMC45Nzk3OTcgMTAuNjEyMyAxLjEwNjE0IDEwLjQ4Nkw0Ljk5OTk0IDYuNTkxOTZMOC44OTM4NiAxMC40ODZDOS4wMjAyIDEwLjYxMjMgOS4xODYwNSAxMC42NzU4IDkuMzUxOSAxMC42NzU4QzkuNTE3NzUgMTAuNjc1OCA5LjY4MzYgMTAuNjEyMyA5LjgwOTk1IDEwLjQ4NkMxMC4wNjM0IDEwLjIzMjcgMTAuMDYzNCA5LjgyMzE0IDkuODA5OTUgOS41Njk4NUw1LjkxNjE1IDUuNjc1ODZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); }
      .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text {
        flex: 1;
        overflow-y: auto;
        height: 31rem; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item:not(:first-child) {
          margin-top: 1rem; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item:not(:last-child) {
          border-bottom: 1px solid #E3E3E3; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .number {
          padding-left: 2rem;
          color: #A9A9A9;
          margin-bottom: .25rem; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .question {
          padding-left: 2rem;
          display: flex;
          align-items: baseline;
          position: relative; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .question::before {
            position: absolute;
            left: 0; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer {
          padding: 1rem .5rem;
          border-radius: .375rem;
          margin: 1rem 0; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match {
            background-color: transparent !important;
            color: inherit !important; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-fill-item .text, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-item .text {
              line-height: 1.2; }
              .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-fill-item .text .fill-answer, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-item .text .fill-answer {
                display: inline-block;
                padding: .15rem .5rem;
                color: #FFF;
                min-width: 3rem;
                text-align: center;
                border-radius: 2rem; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-fill-item.correct .text, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-item.correct .text {
              color: #12B061; }
              .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-fill-item.correct .text .fill-answer, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-item.correct .text .fill-answer {
                background-color: #12B061; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-fill-item.wrong .text, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-item.wrong .text {
              color: #C3273F; }
              .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-fill-item.wrong .text .fill-answer, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-item.wrong .text .fill-answer {
                background-color: #C3273F; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-fill-correct, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-fill .answer-match-correct, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-correct, .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-match-correct {
              padding: 1rem .5rem;
              border-radius: .375rem;
              margin: 1rem 0;
              background-color: #E7F9F0; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match {
            padding-top: 0; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item .answer.answer-match .answer-fill-item .text .fill-prefix {
              border: 1px solid #DBDBDB;
              color: #727171;
              min-width: 3rem;
              border-radius: 2rem;
              text-align: center;
              padding: .15rem .5rem; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item.correct .question {
          color: #01A453; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item.correct .question::before {
            content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMi42MjExIiByPSIxMiIgZmlsbD0iIzEyQTk1RCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3LjcyOCA4LjE3NTdDMTguMDkwNyA4LjU2NjIzIDE4LjA5MDcgOS4xOTk0IDE3LjcyOCA5LjU4OTkzTDEwLjI5OTUgMTcuNTg5OUM5LjkzNjgzIDE3Ljk4MDQgOS4zNDg5IDE3Ljk4MDQgOC45ODYyNiAxNy41ODk5TDUuMjcxOTcgMTMuNTg5OUM0LjkwOTM0IDEzLjE5OTQgNC45MDkzNCAxMi41NjYyIDUuMjcxOTcgMTIuMTc1N0M1LjYzNDYxIDExLjc4NTIgNi4yMjI1NCAxMS43ODUyIDYuNTg1MTggMTIuMTc1N0w5LjY0Mjg3IDE1LjQ2ODZMMTYuNDE0OSA4LjE3NTdDMTYuNzc3NSA3Ljc4NTE4IDE3LjM2NTQgNy43ODUxOCAxNy43MjggOC4xNzU3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
            display: block; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item.correct .answer {
          background-color: #E7F9F0;
          color: #01A453; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item.wrong .question {
          color: #C3273F; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item.wrong .question::before {
            content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMi42MTcyIiByPSIxMiIgZmlsbD0iI0MzMjczRiIvPgo8cGF0aCBkPSJNMTIuOTE2MSAxMi42NzU5TDE2LjgwOTkgOC43ODE4NkMxNy4wNjM0IDguNTI4NTcgMTcuMDYzNCA4LjExOTA0IDE2LjgwOTkgNy44NjU3NUMxNi41NTY3IDcuNjEyNDYgMTYuMTQ3MSA3LjYxMjQ2IDE1Ljg5MzkgNy44NjU3NUwxMS45OTk5IDExLjc1OTdMOC4xMDYxNCA3Ljg2NTc1QzcuODUyNzQgNy42MTI0NiA3LjQ0MzMzIDcuNjEyNDYgNy4xOTAwNSA3Ljg2NTc1QzYuOTM2NjUgOC4xMTkwNCA2LjkzNjY1IDguNTI4NTcgNy4xOTAwNSA4Ljc4MTg2TDExLjA4MzkgMTIuNjc1OUw3LjE5MDA1IDE2LjU2OTlDNi45MzY2NSAxNi44MjMxIDYuOTM2NjUgMTcuMjMyNyA3LjE5MDA1IDE3LjQ4NkM3LjMxNjI4IDE3LjYxMjMgNy40ODIyNSAxNy42NzU4IDcuNjQ4MSAxNy42NzU4QzcuODEzOTUgMTcuNjc1OCA3Ljk3OTggMTcuNjEyMyA4LjEwNjE0IDE3LjQ4NkwxMS45OTk5IDEzLjU5MkwxNS44OTM5IDE3LjQ4NkMxNi4wMjAyIDE3LjYxMjMgMTYuMTg2MSAxNy42NzU4IDE2LjM1MTkgMTcuNjc1OEMxNi41MTc4IDE3LjY3NTggMTYuNjgzNiAxNy42MTIzIDE2LjgwOTkgMTcuNDg2QzE3LjA2MzQgMTcuMjMyNyAxNy4wNjM0IDE2LjgyMzEgMTYuODA5OSAxNi41Njk5TDEyLjkxNjEgMTIuNjc1OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
            display: block; }
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .answer-text .answer-item.wrong .answer {
          background-color: #FFEFF1;
          color: #C3273F; }
      @media only screen and (min-width: 1200px) {
        .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper {
          display: flex;
          gap: 1rem;
          height: 100%; }
          .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number {
            width: 10rem;
            background-color: #F5F6F6;
            padding: .5rem;
            border-radius: 1rem; }
            .practice-summary .overview-wrapper .content-right .card-answer .answer-wrapper .bg-number .number-wrapper {
              grid-template-columns: 1fr 1fr; } }
      @media only screen and (min-width: 1200px) {
        .practice-summary .overview-wrapper .content-right .card-answer {
          max-width: 100%; } }
    @media only screen and (min-width: 1200px) {
      .practice-summary .overview-wrapper .content-right {
        width: calc(100% - 28rem - 1.5rem);
        flex-grow: 1; } }
  .practice-summary .overview-wrapper.show .content-left {
    margin-left: 0; }
  .practice-summary .overview-wrapper.show .content-right {
    display: block; }
  @media only screen and (min-width: 1200px) {
    .practice-summary .overview-wrapper {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto; } }
  @media only screen and (min-width: 1600px) {
    .practice-summary .overview-wrapper {
      max-width: 100%; } }

.practice-content {
  display: none;
  width: 100%;
  height: 100vh; }
  .practice-content-1 {
    position: fixed;
    inset: 0;
    background: url("../../assets/images/exam/bg-step1.webp");
    background-size: cover;
    background-position: bottom center;
    background-color: #fffbfb;
    overflow: hidden;
    flex-direction: column; }
    .practice-content-1 .overview-wrapper {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 6.5rem 2rem 0; }
      @media only screen and (min-width: 1200px) {
        .practice-content-1 .overview-wrapper {
          padding: 3rem; } }
      @media only screen and (min-width: 1600px) {
        .practice-content-1 .overview-wrapper {
          padding: 5rem; } }
      .practice-content-1 .overview-wrapper .card {
        margin: 2rem auto 0; }
        @media only screen and (min-width: 768px) {
          .practice-content-1 .overview-wrapper .card {
            margin: 4rem auto 0; } }
        @media only screen and (min-width: 1200px) {
          .practice-content-1 .overview-wrapper .card {
            margin: 2rem auto 0; } }
        @media only screen and (min-width: 1600px) {
          .practice-content-1 .overview-wrapper .card {
            margin: 4rem auto 0; } }
        @media only screen and (min-width: 768px) {
          .practice-content-1 .overview-wrapper .card .btn-start {
            font-size: 1.25rem; } }
    .practice-content-1 .cartoon1 {
      position: absolute;
      width: 30%;
      bottom: 0;
      left: 5%; }
      @media only screen and (min-width: 1200px) {
        .practice-content-1 .cartoon1 {
          width: 19%; } }
    .practice-content-1 .cartoon2 {
      position: absolute;
      width: 25%;
      right: 5%;
      bottom: 0;
      animation-delay: .35s; }
      @media only screen and (min-width: 1200px) {
        .practice-content-1 .cartoon2 {
          width: 16%; } }
  .practice-content-2 {
    position: fixed;
    inset: 0;
    background: url("../../assets/images/exam/bg-step2.webp");
    background-size: cover;
    background-position: bottom center;
    overflow: hidden; }
  .practice-content.active {
    display: flex; }
  .practice-content-container {
    display: flex;
    justify-content: space-between;
    height: 100vh;
    width: 100%; }
    @media only screen and (min-width: 1200px) {
      .practice-content-container {
        padding-left: 3rem;
        padding-right: 1.5rem; } }
    @media only screen and (min-width: 1600px) {
      .practice-content-container {
        padding-left: 4rem;
        padding-right: 3rem; } }
    .practice-content-container .content-left {
      position: relative;
      height: calc(100% - 4rem);
      padding: 8rem 1rem 0rem;
      overflow-y: auto;
      width: 100%; }
      @media only screen and (min-width: 768px) {
        .practice-content-container .content-left {
          height: calc(100% - 5rem);
          width: 90%;
          margin-left: auto;
          margin-right: auto; } }
      @media only screen and (min-width: 1200px) {
        .practice-content-container .content-left {
          width: calc(100% - 23rem - 3rem);
          height: 100%;
          padding: 5rem 1rem 0rem; } }
      @media only screen and (min-width: 1400px) {
        .practice-content-container .content-left {
          width: calc(100% - 20rem); } }
      @media only screen and (min-width: 1600px) {
        .practice-content-container .content-left {
          max-width: 1350px; } }
      .practice-content-container .content-left .bg-timer {
        position: absolute;
        top: 6.5rem;
        left: 50%;
        z-index: 5;
        transform: translateX(-50%); }
        .practice-content-container .content-left .bg-timer .bg {
          background-color: #1ABF5F;
          border: 1px solid #FFFFFF;
          box-shadow: 0px 0px 8px 0px #00000040 inset;
          border-radius: 2.5rem;
          padding: .35rem 1.25rem .35rem 2rem;
          width: 100%; }
        .practice-content-container .content-left .bg-timer .image {
          position: absolute;
          left: -10%;
          top: -24%;
          width: 3rem;
          animation-name: timerShake;
          animation-duration: 1s;
          animation-iteration-count: infinite;
          animation-delay: .5; }
        .practice-content-container .content-left .bg-timer .timer {
          font-family: "alarm";
          font-size: 1.75rem;
          color: #FFF;
          text-shadow: 2px 2px 0px  #000000;
          -webkit-text-stroke: 1px #000000; }
        .practice-content-container .content-left .bg-timer:after {
          content: "";
          display: block;
          background-color: #097235;
          border-radius: 2.5rem;
          height: 100%;
          position: absolute;
          width: 100%;
          left: 0;
          top: 10%;
          z-index: -1; }
        @media only screen and (min-width: 768px) {
          .practice-content-container .content-left .bg-timer .bg {
            padding: .35rem 1.5rem .35rem 2.5rem; }
          .practice-content-container .content-left .bg-timer .image {
            width: auto; }
          .practice-content-container .content-left .bg-timer .timer {
            font-size: 2.25rem;
            text-shadow: 3px 2px 0px  #000000; } }
        @media only screen and (min-width: 1200px) {
          .practice-content-container .content-left .bg-timer {
            top: 2.5rem; } }
      .practice-content-container .content-left .bg-question {
        background: #FFBE0A;
        border-radius: 2.5rem;
        border: 6px solid #FFF;
        box-shadow: 0px 0px 10px 0px #AE7700B2 inset;
        position: relative;
        padding: 2.5rem 1.5rem 1.5rem;
        width: 100%;
        margin-left: auto;
        margin-right: auto; }
        @media only screen and (min-width: 1200px) {
          .practice-content-container .content-left .bg-question {
            padding: 2rem 1.5rem 2rem 4.5rem;
            width: 80%;
            margin-bottom: 2rem; } }
        @media only screen and (min-width: 1600px) {
          .practice-content-container .content-left .bg-question {
            width: 95%;
            margin-bottom: 3rem; } }
        .practice-content-container .content-left .bg-question-number {
          position: absolute;
          top: -2.5rem;
          left: -1rem; }
          .practice-content-container .content-left .bg-question-number .image {
            width: 5.5rem; }
            @media only screen and (min-width: 1600px) {
              .practice-content-container .content-left .bg-question-number .image {
                width: 7rem; } }
          .practice-content-container .content-left .bg-question-number .number-text {
            background: #2545C3;
            background: linear-gradient(to bottom, #2545C3 0%, #2DA9F5 50%, #2DF5EB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px #FFF;
            font-weight: 700;
            font-size: 1.25rem;
            position: absolute;
            top: 40%;
            left: 60%;
            white-space: nowrap;
            transform: translateX(-50%); }
            @media only screen and (min-width: 1200px) {
              .practice-content-container .content-left .bg-question-number .number-text {
                font-size: 1.75rem;
                top: 25%;
                left: 50%; } }
            @media only screen and (min-width: 1600px) {
              .practice-content-container .content-left .bg-question-number .number-text {
                font-size: 2.25rem; } }
          @media only screen and (min-width: 1200px) {
            .practice-content-container .content-left .bg-question-number {
              top: -3rem;
              left: -1.5rem; } }
        .practice-content-container .content-left .bg-question .text {
          font-weight: 500;
          text-shadow: 0px 0px 8.56px #FFFFFF; }
          @media only screen and (min-width: 768px) {
            .practice-content-container .content-left .bg-question .text {
              font-size: 1.375rem; } }
      .practice-content-container .content-left .practice-item {
        max-width: 55rem;
        max-width: 55rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-flow: column; }
        .practice-content-container .content-left .practice-item-choice .bg-answer {
          border-radius: 1rem;
          background: rgba(63, 162, 255, 0.6);
          padding: 2rem 1rem;
          margin: 1rem 0; }
          @media only screen and (min-width: 768px) {
            .practice-content-container .content-left .practice-item-choice .bg-answer {
              padding: 4rem 2.5rem 2.5rem;
              background: rgba(63, 162, 255, 0.4); } }
        .practice-content-container .content-left .practice-item-choice .answer-item {
          margin-bottom: 1.5rem; }
          .practice-content-container .content-left .practice-item-choice .answer-item:last-child {
            margin-bottom: 0; }
          @media only screen and (min-width: 768px) {
            .practice-content-container .content-left .practice-item-choice .answer-item {
              margin-bottom: 0; }
              .practice-content-container .content-left .practice-item-choice .answer-item:first-child, .practice-content-container .content-left .practice-item-choice .answer-item:nth-child(2) {
                margin-bottom: 3rem; } }
          .practice-content-container .content-left .practice-item-choice .answer-item .answer-text {
            background: #E5F3FF;
            border: 1px solid #39A8F8;
            box-shadow: 0px 0px 9.97px 0px #FFFFFF99;
            position: relative;
            padding: 1.875rem 1.25rem 1rem;
            border-radius: .75rem;
            width: 95%;
            margin-left: auto;
            margin-right: auto;
            cursor: pointer;
            height: 100%;
            display: flex;
            align-content: center; }
            .practice-content-container .content-left .practice-item-choice .answer-item .answer-text::before {
              content: "";
              display: block;
              width: 2rem;
              height: 2rem;
              background-color: #FFF;
              border-radius: 50%;
              border: 1px solid #C0C0C0; }
            .practice-content-container .content-left .practice-item-choice .answer-item .answer-text .icon-choice {
              position: absolute;
              top: -1.25rem;
              left: 1rem;
              width: 45px; }
            .practice-content-container .content-left .practice-item-choice .answer-item .answer-text .text {
              width: calc(100% - 2rem);
              padding-left: .75rem; }
          @media only screen and (min-width: 768px) {
            .practice-content-container .content-left .practice-item-choice .answer-item .answer-text {
              color: #0068DF; }
              .practice-content-container .content-left .practice-item-choice .answer-item .answer-text::before {
                position: absolute;
                left: -1.25rem;
                top: 1rem;
                width: 2.25rem;
                height: 2.25rem; } }
          @media only screen and (min-width: 1200px) {
            .practice-content-container .content-left .practice-item-choice .answer-item .answer-text {
              min-height: 7rem; } }
          @media only screen and (min-width: 1600px) {
            .practice-content-container .content-left .practice-item-choice .answer-item .answer-text .icon-choice {
              top: -2.25rem;
              width: 55px; }
            .practice-content-container .content-left .practice-item-choice .answer-item .pole-image {
              max-width: 95%;
              margin-left: auto;
              margin-right: auto;
              display: block; } }
          .practice-content-container .content-left .practice-item-choice .answer-item:hover .answer-text, .practice-content-container .content-left .practice-item-choice .answer-item.active .answer-text {
            background-color: #4266DD;
            color: #FFF; }
            .practice-content-container .content-left .practice-item-choice .answer-item:hover .answer-text img, .practice-content-container .content-left .practice-item-choice .answer-item.active .answer-text img {
              filter: invert(1) hue-rotate(49deg) brightness(1.2);
              -webkit-filter: invert(1) hue-rotate(49deg) brightness(1.2); }
            .practice-content-container .content-left .practice-item-choice .answer-item:hover .answer-text::before, .practice-content-container .content-left .practice-item-choice .answer-item.active .answer-text::before {
              content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMTAuMjU5OEw2IDE0LjI1OThMMTcuNSAyLjc1OTc3IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K");
              background-color: #1A3591;
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 1;
              color: #FFF;
              border: 1px solid #FFFFFF; }
        .practice-content-container .content-left .practice-item-right-wrong .bg-answer {
          flex: 1; }
          .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer {
            margin: 1rem 0;
            --bs-gutter-x: 0.5rem; }
            .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg {
              border: 5px solid #FFFFFF;
              box-shadow: 0px 0px 0px 6px #8181814F inset;
              border-radius: 1.5rem;
              text-align: center;
              transition: all .3s;
              padding: 2rem .5rem;
              cursor: pointer; }
              .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg .icon-choice {
                width: 6rem;
                height: 6rem;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                margin: 0 auto .5rem; }
                .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg .icon-choice img {
                  filter: brightness(0) invert(1);
                  height: 3rem; }
              .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg .text {
                color: #FFF;
                min-width: 3rem;
                line-height: 1.4;
                padding-bottom: .25rem; }
              .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg:hover, .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg.active {
                transform: scale(1.05);
                transform-origin: top;
                transition: all .3s;
                box-shadow: 0px 8px 0px 0px #00000026;
                box-shadow: 0px 0px 0px 6px #FFC400 inset; }
                .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg:hover .icon-choice, .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg.active .icon-choice {
                  background-color: #FFF !important;
                  box-shadow: unset !important;
                  border: unset !important; }
                  .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg:hover .icon-choice img, .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg.active .icon-choice img {
                    filter: unset; }
              @media only screen and (min-width: 768px) {
                .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg {
                  max-width: 17.5rem;
                  padding: 4.5rem .5rem;
                  box-shadow: 0px 0px 0px 10px #8181814F inset; }
                  .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg .icon-choice {
                    width: 8rem;
                    height: 8rem; }
                    .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg .icon-choice img {
                      height: 4rem; }
                  .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg .text {
                    font-size: 1.25rem;
                    min-width: 7rem; }
                  .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg:hover, .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg.active {
                    box-shadow: 0px 0px 0px 10px #FFC400 inset; } }
              @media only screen and (min-width: 1600px) {
                .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item .bg {
                  padding: 5.5rem .5rem; } }
            .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:first-child .bg {
              background: linear-gradient(0deg, rgba(29, 121, 67, 0.4), rgba(29, 121, 67, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); }
              .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:first-child .bg .icon-choice {
                background: #19C05F;
                border: 1.2px solid #5AFB9D;
                box-shadow: 0px 4.81px 24.05px 0px #92FFA9; }
              .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:first-child .bg .text {
                background: #1D6936;
                border: 1.2px solid #60B47B; }
              @media only screen and (min-width: 768px) {
                .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:first-child .bg {
                  margin-left: auto;
                  margin-right: 1rem; } }
            .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:first-child:hover .bg, .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:first-child.active .bg {
              background: #19C05F; }
            .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:nth-child(2) .bg {
              background: linear-gradient(0deg, rgba(192, 46, 49, 0.4), rgba(192, 46, 49, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); }
              .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:nth-child(2) .bg .icon-choice {
                background: #DF3C3C;
                border: 1px solid #F88484;
                box-shadow: 0px 0px 20px 0px #FF6767; }
              .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:nth-child(2) .bg .text {
                background: #861616;
                border: 1.2px solid #CA4F4F; }
            .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:nth-child(2):hover .bg, .practice-content-container .content-left .practice-item-right-wrong .bg-answer .answer-item:nth-child(2).active .bg {
              background: #DF3C3C; }
        .practice-content-container .content-left .practice-item-fill .bg-answer {
          background-color: transparent; }
          .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list {
            background-color: #80C1FF;
            border-radius: 1rem;
            padding: 1rem; }
            .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer, .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer.gu-transit {
              width: calc(50% - .5rem);
              border-radius: 0;
              transform: skew(-20deg);
              background-color: #1B6EEA;
              color: #FFF;
              font-weight: 500;
              font-size: 1.125rem;
              min-height: 2.8rem;
              display: flex;
              align-items: center;
              justify-content: center; }
              .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer > div, .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer.gu-transit > div {
                transform: skew(20deg); }
            @media only screen and (min-width: 768px) {
              .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list {
                padding: 1rem 2rem;
                gap: 1rem !important; }
                .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer, .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer.gu-transit {
                  width: calc((100% - 2 * 1rem) / 3); } }
            @media only screen and (min-width: 992px) {
              .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list {
                padding: 1.5rem 3rem;
                align-items: center;
                justify-content: center; }
                .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer, .practice-content-container .content-left .practice-item-fill .bg-answer .fake_answer_list .data-answer.gu-transit {
                  width: calc((100% - 3 * 1.5rem) / 4); } }
          .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item {
            background: #D2E9FF;
            border: 1px solid;
            border-image-source: linear-gradient(90deg, #E3FDFF 0%, #FFCDFC 44.5%, #CBFDFF 100%);
            border-radius: 1rem;
            padding: .75rem;
            margin-bottom: 2rem !important;
            position: relative; }
            .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg {
              background: #FDFDFF;
              border: 1px solid #DDDDDD;
              border-radius: 1rem;
              width: 100%;
              padding: 1.5rem .75rem 1.25rem;
              display: flex;
              align-items: center;
              flex-wrap: wrap; }
              .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg .fill-answer {
                background-color: #FFF !important;
                border: 1px solid #128CE3;
                transform: skew(-20deg);
                border-radius: 0 !important;
                width: 6.5rem; }
                .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg .fill-answer .data-answer {
                  background-color: #F2940F;
                  color: #FFF;
                  border-radius: 0; }
                  .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg .fill-answer .data-answer > div {
                    transform: skew(20deg); }
                .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg .fill-answer:has(.data-answer) {
                  border: 1px solid #F2940F; }
              .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg .prefix, .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg .fill-answer, .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg .suffix {
                display: inline-block; }
              @media only screen and (min-width: 992px) {
                .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .bg {
                  font-size: 1.125rem; } }
            .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .number {
              position: absolute;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 3rem;
              height: 3rem;
              top: -1rem;
              left: 1.5rem; }
              .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .number .icon-choice {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover; }
              .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .number .text {
                position: relative;
                z-index: 2;
                color: #FFF;
                text-shadow: 2px 2px 0px  #000000;
                -webkit-text-stroke: 2px #000000;
                font-size: 1.25rem;
                font-weight: 700; }
              @media only screen and (min-width: 1200px) {
                .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .number {
                  top: .5rem;
                  left: -3rem; }
                  .practice-content-container .content-left .practice-item-fill .bg-answer .answer-item .number .text {
                    font-size: 1.75rem; } }
          @media only screen and (min-width: 1200px) {
            .practice-content-container .content-left .practice-item-fill .bg-answer {
              width: 80%;
              margin-left: auto;
              margin-right: auto; } }
        .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left select {
          opacity: 0 !important; }
        .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul {
          display: flex;
          flex-flow: column;
          counter-reset: listStyle; }
          .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li {
            counter-increment: listStyle;
            box-shadow: 0px 6.75px 0px 0px #00000026;
            border-radius: 3.125rem;
            padding: 1rem 1.5rem; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li > div {
              font-weight: 400; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li::after {
              content: counter(listStyle, upper-alpha);
              display: block;
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 50%;
              position: absolute;
              right: .5rem;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 1;
              font-size: 1.5rem; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-7) {
              background: #E0F1FF;
              border: 3.38px solid #71BFFE; }
              .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-7):after {
                background: #0584EA;
                color: #FFFFFF;
                border: 4px solid #005192;
                text-shadow: 3px 2px 1px #00000066; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-6) {
              background: #FFF7D9;
              border: 3.38px solid #FFEA96; }
              .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-6):after {
                background: #BD7D07;
                color: #FFFFFF;
                border: 4px solid #FFEA96;
                text-shadow: 3px 2px 1px #6D4905; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-5) {
              background: #E3FFE7;
              border: 3.38px solid #88E5A4; }
              .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-5):after {
                background: #309A50;
                color: #FFFFFF;
                border: 4px solid #88E5A4;
                text-shadow: 3px 2px 1px #0C782D; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-4) {
              background: #FFE3ED;
              border: 3.38px solid #FDA3C3; }
              .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-left ul li:nth-child(4n-4):after {
                background: #B23662;
                color: #FFFFFF;
                border: 4px solid #FDA3C3;
                text-shadow: 3px 2px 1px #890B38; }
        .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-right select {
          opacity: 0 !important; }
        .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-right ul {
          display: flex;
          flex-flow: column;
          counter-reset: section; }
          .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-right ul li {
            counter-increment: section;
            background: linear-gradient(0deg, rgba(58, 126, 202, 0.4), rgba(58, 126, 202, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
            border: 4.22px solid #FFFFFF;
            box-shadow: 0px 0px 0px 3.44px #8181814F inset;
            position: relative;
            border-radius: 3.125rem;
            padding: 1rem 1.5rem;
            margin-bottom: 6px; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-right ul li > div {
              font-weight: 400;
              margin-left: 3rem; }
            .practice-content-container .content-left .practice-item-match #match_container .fieldsLinker .FL-right ul li::before {
              content: counter(section);
              display: block;
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 50%;
              position: absolute;
              left: .5rem;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 1;
              font-size: 1.5rem;
              background-color: #6490BF;
              color: #FFF;
              border: 2.53px solid #192128;
              text-shadow: 2.53px 2.53px 0px #00000066; }
      .practice-content-container .content-left .practice-item-wrapper {
        height: 100%; }
        .practice-content-container .content-left .practice-item-wrapper:has(.practice-item .bg-answer > .answer > .answer-item.right:hover) + .content-cartoon-3 .cartoon-image {
          transform: translateX(-50%) scaleX(-1); }
        .practice-content-container .content-left .practice-item-wrapper:has(.practice-item .bg-answer > .answer > .answer-item.right.active) + .content-cartoon-3 .cartoon-image {
          transform: translateX(-50%) scaleX(-1); }
      .practice-content-container .content-left .content-cartoon-3 {
        position: fixed;
        bottom: 0;
        z-index: 3;
        left: 50%;
        transform: translateX(-50%) scale(0.65);
        pointer-events: none; }
        .practice-content-container .content-left .content-cartoon-3 .console-image {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%); }
        .practice-content-container .content-left .content-cartoon-3 .cartoon-image {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          z-index: 4; }
          .practice-content-container .content-left .content-cartoon-3 .cartoon-image.jump {
            animation-duration: .5s; }
        @media only screen and (min-width: 1600px) {
          .practice-content-container .content-left .content-cartoon-3 {
            left: 40%;
            transform: translateX(-50%) scale(0.8); } }
    .practice-content-container .content-right {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 10; }
      .practice-content-container .content-right .panel-control {
        background-color: #FFF;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        height: 4rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15); }
        .practice-content-container .content-right .panel-control .btn {
          display: flex;
          align-items: center;
          border-radius: 1.25rem;
          padding: 0.15rem .75rem .2rem; }
          .practice-content-container .content-right .panel-control .btn-prev {
            background-color: #C6DDFF;
            color: #407CD4; }
          .practice-content-container .content-right .panel-control .btn-section {
            background-color: #12B061;
            color: #FFF; }
          .practice-content-container .content-right .panel-control .btn-next {
            background-color: #0047D0;
            color: #FFF; }
        @media only screen and (min-width: 768px) {
          .practice-content-container .content-right .panel-control {
            height: 5rem; }
            .practice-content-container .content-right .panel-control .btn {
              font-size: 1.375rem;
              padding: 0.15rem 1.25rem .2rem; } }
      @media only screen and (min-width: 1200px) {
        .practice-content-container .content-right {
          position: relative;
          width: 23rem;
          padding-top: 6rem; } }
      .practice-content-container .content-right .question-numbers {
        background-color: #FFF;
        padding: 1.875rem;
        box-shadow: 0px 0px 11.5px 0px #5F51514D;
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem;
        position: fixed;
        bottom: -100%;
        width: 100%;
        transition: all .3s; }
        .practice-content-container .content-right .question-numbers .close-btn {
          position: absolute;
          top: -1.25rem;
          left: 50%;
          transform: translateX(-50%); }
        .practice-content-container .content-right .question-numbers .heading {
          display: none;
          align-items: baseline;
          border-bottom: 1px solid #e4e4e4;
          margin-bottom: 1.5rem;
          gap: 0.5rem;
          margin-top: 1rem; }
          .practice-content-container .content-right .question-numbers .heading .title {
            font-size: 1.25rem;
            font-weight: 500;
            margin-right: auto; }
            @media only screen and (min-width: 1600px) {
              .practice-content-container .content-right .question-numbers .heading .title {
                font-size: 1.5rem; } }
          .practice-content-container .content-right .question-numbers .heading .text {
            color: #b7b7b7;
            font-size: .875rem; }
        .practice-content-container .content-right .question-numbers-body {
          height: 18.75rem;
          overflow-y: auto; }
        .practice-content-container .content-right .question-numbers-footer .btn {
          font-size: 1.125rem; }
        .practice-content-container .content-right .question-numbers-footer .btn-reset {
          border-color: #D6D6D6 !important; }
        .practice-content-container .content-right .question-numbers-footer .btn-next {
          background-color: #0047D0;
          border-color: #0047D0;
          color: #ffffff; }
          .practice-content-container .content-right .question-numbers-footer .btn-next:hover, .practice-content-container .content-right .question-numbers-footer .btn-next:active {
            background-color: #0044c6 !important; }
        .practice-content-container .content-right .question-numbers.active {
          bottom: 0; }
        @media only screen and (min-width: 1200px) {
          .practice-content-container .content-right .question-numbers {
            border-radius: 1.25rem;
            position: relative;
            bottom: unset; }
            .practice-content-container .content-right .question-numbers .heading {
              display: flex;
              margin-top: 0rem; } }
      .practice-content-container .content-right .exam-number {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 0.5rem; }
        .practice-content-container .content-right .exam-number .number {
          display: flex;
          align-items: center;
          background-color: #ECF4FF;
          cursor: pointer;
          padding: 0.2rem .5rem;
          aspect-ratio: 1;
          border-radius: .75rem; }
          .practice-content-container .content-right .exam-number .number .label-number {
            font-size: 1.125rem;
            font-weight: 500;
            color: #3184ff;
            width: 100%;
            text-align: center; }
          .practice-content-container .content-right .exam-number .number .circle {
            display: none;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            background-color: #C2D8F9;
            position: relative; }
            @media only screen and (min-width: 1200px) {
              .practice-content-container .content-right .exam-number .number .circle {
                display: block; } }
            @media only screen and (min-width: 1600px) {
              .practice-content-container .content-right .exam-number .number .circle {
                width: 20px;
                height: 20px; } }
          .practice-content-container .content-right .exam-number .number:hover, .practice-content-container .content-right .exam-number .number:focus, .practice-content-container .content-right .exam-number .number.current {
            background-color: #C2D8F9;
            border: 1px solid #8EC2FF; }
            .practice-content-container .content-right .exam-number .number:hover .circle, .practice-content-container .content-right .exam-number .number:focus .circle, .practice-content-container .content-right .exam-number .number.current .circle {
              background-color: #ffffff; }
          .practice-content-container .content-right .exam-number .number.is_answer {
            background-color: #0047D0;
            border: 1px solid #0047D0; }
            .practice-content-container .content-right .exam-number .number.is_answer .label-number {
              color: #FFF; }
            .practice-content-container .content-right .exam-number .number.is_answer .circle {
              display: none; }
          .practice-content-container .content-right .exam-number .number.pass .circle {
            background-color: #3184ff !important; }
        @media only screen and (min-width: 768px) {
          .practice-content-container .content-right .exam-number {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } }
        @media only screen and (min-width: 1200px) {
          .practice-content-container .content-right .exam-number {
            grid-template-columns: 1fr 1fr 1fr; }
            .practice-content-container .content-right .exam-number .number {
              border-radius: 4rem;
              height: 2.5rem;
              width: 100%; }
              .practice-content-container .content-right .exam-number .number .label-number {
                margin-right: auto;
                text-align: left;
                width: auto; } }

@media screen and (max-width: 1199px) {
  .course-summary {
    position: relative !important;
    overflow: unset !important;
    min-height: 100vh; } }

@media only screen and (min-width: 1200px) {
  .course-summary .btn-back {
    position: absolute;
    left: 2rem;
    top: 1rem; } }

.survey-list {
  display: grid;
  gap: 1rem; }
  .survey-list .list-item {
    display: flex;
    gap: 0.5rem;
    cursor: pointer; }
    .survey-list .list-item .list-thumbnail .icon-wrapper {
      background-color: #fbe3e3;
      border-radius: 0.5rem;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .survey-list .list-item .list-thumbnail .icon-wrapper > i {
        font-size: 27px;
        color: #C3273F; }
    .survey-list .list-item .list-body {
      display: flex;
      flex: 1; }
    .survey-list .list-item .list-body-inner {
      flex: 1; }
      .survey-list .list-item .list-body-inner .title {
        font-weight: 600;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; }
      .survey-list .list-item .list-body-inner .info {
        display: flex;
        gap: 1rem; }
        .survey-list .list-item .list-body-inner .info .text {
          font-size: 0.875rem;
          color: #b7b7b7; }
      .survey-list .list-item .list-body-inner .info-item {
        display: flex;
        gap: 0.375rem; }
        .survey-list .list-item .list-body-inner .info-item .icon-wrapper {
          display: flex;
          align-items: center;
          justify-content: center; }
          .survey-list .list-item .list-body-inner .info-item .icon-wrapper > i {
            color: #A9A9A9;
            font-size: 12px; }
    .survey-list .list-item .list-body-actions {
      flex: 0 0 auto; }
      .survey-list .list-item .list-body-actions .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        padding: 0.25rem;
        width: 30px;
        height: 30px; }
        .survey-list .list-item .list-body-actions .btn > i {
          font-size: 13px; }

.modal-pulse-survey .modal-body {
  padding: 0;
  border-radius: 0.75rem; }

.modal-pulse-survey .modal-content {
  border: 0;
  border-radius: 0.75rem;
  overflow-x: hidden; }

.modal-pulse-survey .btn-close-modal {
  background: #C3273F;
  color: #ffffff;
  border-radius: 100%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1rem;
  right: 1rem; }

.survey-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; }
  .survey-wrapper .survey-info {
    background-color: #7AC7E8;
    background-image: url("../../assets/images/portal/bg-modal-pluse-survey.webp");
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #ffffff;
    position: relative;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 300px; }
    .survey-wrapper .survey-info .title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 1rem; }
    .survey-wrapper .survey-info .list-step {
      display: grid;
      gap: 1rem; }
      .survey-wrapper .survey-info .list-step .item {
        display: flex;
        align-items: center;
        gap: 1rem; }
        .survey-wrapper .survey-info .list-step .item .item-number {
          width: 28px;
          height: 28px;
          background: #58B3DB;
          border-radius: 0.375rem;
          color: #2D7FA3;
          font-weight: 900;
          display: flex;
          justify-content: center;
          align-items: center; }
        .survey-wrapper .survey-info .list-step .item .text {
          color: #2D7FA3;
          font-weight: 600; }
        .survey-wrapper .survey-info .list-step .item:hover .item-number, .survey-wrapper .survey-info .list-step .item.is-active .item-number {
          background-color: #ffffff;
          color: #2b2b2b; }
        .survey-wrapper .survey-info .list-step .item:hover .text, .survey-wrapper .survey-info .list-step .item.is-active .text {
          color: #ffffff; }
  .survey-wrapper .survey-questions {
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column; }
    .survey-wrapper .survey-questions .question-title {
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: 1.25rem;
      width: calc(100% - 3rem); }
    .survey-wrapper .survey-questions .type-single-choice {
      display: none; }
      .survey-wrapper .survey-questions .type-single-choice .list-answer {
        display: grid;
        gap: 1rem;
        list-style: none;
        padding-left: 0; }
        .survey-wrapper .survey-questions .type-single-choice .list-answer li {
          position: relative; }
          .survey-wrapper .survey-questions .type-single-choice .list-answer li input[type=radio] {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
            top: 0;
            left: 0; }
            .survey-wrapper .survey-questions .type-single-choice .list-answer li input[type=radio]:checked + .btn-answer {
              background-color: #12b061;
              border-color: #12b061;
              color: #ffffff;
              font-weight: 600; }
          .survey-wrapper .survey-questions .type-single-choice .list-answer li .btn-answer {
            border: 1px solid #eceae9;
            color: #20232c;
            padding: 0.75rem;
            text-align: center;
            border-radius: 0.625rem;
            position: relative;
            width: 100%;
            cursor: pointer; }
            .survey-wrapper .survey-questions .type-single-choice .list-answer li .btn-answer:hover, .survey-wrapper .survey-questions .type-single-choice .list-answer li .btn-answer.is-active {
              background-color: #12b061;
              border-color: #12b061;
              color: #ffffff;
              font-weight: 600; }
      .survey-wrapper .survey-questions .type-single-choice.is-active {
        display: block; }
  .survey-wrapper .survey-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding: 1rem 0; }
    .survey-wrapper .survey-actions .btn-next-question {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0;
      border: 0 !important; }
      .survey-wrapper .survey-actions .btn-next-question .icon-wrapper {
        width: 30px;
        height: 30px;
        background-color: #3184ff;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%; }
    .survey-wrapper .survey-actions .btn-submit {
      background-color: #1778EA;
      color: #ffffff;
      border-radius: 2.25rem;
      max-width: 14.5rem;
      width: 100%;
      margin: auto; }
  .survey-wrapper .survey-success {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .survey-wrapper .survey-success b {
      font-weight: 500;
      font-size: 1.5rem; }
      .survey-wrapper .survey-success b small {
        font-size: 1rem;
        font-weight: normal; }
    .survey-wrapper .survey-success > img {
      width: 11.5rem;
      margin: 0 auto 1rem; }
  .survey-wrapper-2 {
    grid-template-columns: 1fr; }

.survey-calendar-list {
  display: grid;
  gap: 1rem; }
  .survey-calendar-list .list-item {
    display: flex;
    gap: 0.75rem;
    border: 1px solid #eceae9;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer; }
    .survey-calendar-list .list-item .day {
      background: #C3273F;
      color: #ffffff;
      border-radius: 0.375rem;
      line-height: 1.2;
      flex: 0 0 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .survey-calendar-list .list-item .day .month {
        font-size: .75rem;
        font-weight: 500; }
    .survey-calendar-list .list-item .title {
      font-weight: 600;
      display: -webkit-box;
      font-size: 1rem;
      line-height: 1.2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
    .survey-calendar-list .list-item .list-info {
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #6E6B6B;
      margin-top: 0.375rem; }
      .survey-calendar-list .list-item .list-info .duration {
        color: #2b2b2b;
        display: flex;
        align-items: center;
        gap: 0.25rem; }

.survey-result-content {
  padding: 22px 80px;
  max-width: none; }
  .survey-result-content .survey-result-answer {
    height: 14px;
    width: 100%;
    background-color: #e3e8ef;
    border: solid 1px #e3e8ef;
    border-radius: 4px;
    margin-bottom: 20px;
    border-radius: 4rem;
    position: relative; }
  .survey-result-content .survey-result-pct {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 4rem;
    transition: width 0.3s ease; }
  .survey-result-content .survey-result-answer-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 8px; }
    .survey-result-content .survey-result-answer-text span {
      font-weight: bold; }

.webboard-content {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.875rem 1.75rem; }
  .webboard-content .filter-webboard {
    display: grid;
    grid-template-columns: auto 5.75rem;
    gap: 0.625rem;
    margin-bottom: 2.5rem; }
    .webboard-content .filter-webboard .input {
      position: relative; }
      .webboard-content .filter-webboard .input i {
        position: absolute;
        top: 0.425rem;
        left: 0.75rem;
        font-size: 1.125rem; }
      .webboard-content .filter-webboard .input .form-control {
        padding-left: 2.5rem;
        border-radius: 0.625rem; }
    .webboard-content .filter-webboard .button .btn {
      border-radius: 0.5rem;
      background-color: #C3273F;
      color: #ffffff;
      font-weight: 600;
      font-size: 1rem;
      width: 100%;
      padding: 6px 1rem; }
      .webboard-content .filter-webboard .button .btn:focus {
        border: 1px solid #C3273F; }

.webboard-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1.25rem; }
  .webboard-title i {
    width: 2rem;
    height: 2rem;
    font-size: 1.125rem;
    border-radius: 50%;
    background-color: #F49506;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem; }

.webboard-section {
  margin-bottom: 3.75rem; }
  .webboard-section > h5 {
    color: #A9A9A9;
    font-size: 1.25rem;
    font-weight: normal;
    margin-bottom: 1.5rem; }
  .webboard-section--recommend {
    display: flex;
    flex-direction: column;
    gap: 1rem; }
    @media only screen and (min-width: 1400px) {
      .webboard-section--recommend {
        display: grid;
        grid-template-columns: 50% calc(50% - 1.25rem);
        grid-template-rows: auto;
        grid-template-areas: "title title" "primary secondary"; } }
    .webboard-section--recommend > h5 {
      grid-area: title;
      width: 100%;
      margin-bottom: 0.25rem; }
  .webboard-section .trending-primary {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, 1fr); }
  .webboard-section .topci-primary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.75rem; }
    .webboard-section .topci-primary--empty {
      grid-template-columns: repeat(1, 1fr); }
  .webboard-section .btn-more {
    border-radius: 1.5rem;
    background-color: #20232c;
    font-size: 1.25rem;
    color: #ffffff;
    width: 9.375rem; }

.webboard-owner {
  display: flex;
  gap: 0.5rem; }
  .webboard-owner .avatar .img {
    border-radius: 100%; }
  .webboard-owner .detail .title {
    font-size: 1rem;
    color: #2b2b2b;
    margin-bottom: 0.5rem; }
  .webboard-owner .detail .info {
    display: flex;
    align-items: center;
    gap: 0.5rem; }
  .webboard-owner .detail .info-list {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #A9A9A9;
    font-size: 0.875rem; }
    .webboard-owner .detail .info-list .icon-wrapper {
      display: flex;
      align-items: center; }

.webboard-comment .b-author {
  display: flex;
  gap: .75rem; }

.webboard-comment .avatar .img {
  border-radius: 100%; }

.webboard-comment .author {
  font-weight: 600;
  margin-bottom: 0.5rem; }

.webboard-comment .date {
  font-size: 0.75rem;
  font-weight: 500; }

.calendar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem; }
  .calendar-title h5 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0; }

.calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem; }
  .calendar-head .calendar-month {
    color: #3184ff;
    font-size: 1rem;
    font-weight: 500; }
  .calendar-head .calendar-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem; }
    .calendar-head .calendar-btn .btn {
      border-radius: 50%;
      background-color: #2b2b2b;
      color: #ffffff;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.625rem; }
      .calendar-head .calendar-btn .btn .icon-left-bold {
        position: relative;
        left: -1px; }
      .calendar-head .calendar-btn .btn .icon-right-bold {
        position: relative;
        right: -1px; }
      .calendar-head .calendar-btn .btn.disabled {
        background-color: #676768 !important;
        border-color: #676768 !important;
        color: #e8e8e8; }

.calendar-body {
  margin-bottom: 2.5rem; }
  .calendar-body ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.75rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr); }
    .calendar-body ul > li {
      position: relative;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #B1B8C2;
      font-weight: 500; }
      .calendar-body ul > li span {
        position: relative;
        z-index: 1; }
      .calendar-body ul > li::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 1.75rem;
        border-radius: 0.625rem;
        background-color: #3184ff;
        opacity: 0; }
    .calendar-body ul:last-child > li {
      cursor: pointer;
      color: #20232c;
      font-weight: normal; }
      .calendar-body ul:last-child > li.is-active {
        color: #ffffff;
        font-weight: 600; }
        .calendar-body ul:last-child > li.is-active::after {
          opacity: 1; }

.calendar .icon-wrapper {
  background: #ECF4FF;
  border-radius: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px; }

.recommend-primary {
  grid-area: primary; }
  .recommend-primary .card-webboard-recommend {
    position: relative;
    grid-template-columns: auto; }
    .recommend-primary .card-webboard-recommend .card-img {
      aspect-ratio: 16 / 9;
      max-height: 11.875rem;
      position: relative;
      overflow: hidden; }
      .recommend-primary .card-webboard-recommend .card-img::after {
        content: "";
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 47.06%, rgba(0, 0, 0, 0.6) 92.88%);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0; }
    .recommend-primary .card-webboard-recommend .card-body {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.875rem;
      color: #ffffff; }
      .recommend-primary .card-webboard-recommend .card-body--avatar {
        color: #2b2b2b; }
      .recommend-primary .card-webboard-recommend .card-body--tool {
        color: #ffffff; }

.recommend-secondary {
  grid-area: secondary; }
  .recommend-secondary .card-webboard-recommend {
    margin-bottom: 1.5rem; }

.icon-cate {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  .icon-cate--review {
    background-image: url("../images/icon/review_post.png"); }
  .icon-cate--annouce {
    background-image: url("../images/icon/annouce_post.png"); }
  .icon-cate--discussion {
    background-image: url("../images/icon/discussion_post.png"); }
  .icon-cate--question {
    background-image: url("../images/icon/question_post.png"); }

.form-webboard {
  background-color: #ffffff;
  border-radius: 0.625rem; }
  .form-webboard .btn-submit {
    background: #12b061;
    border-color: #12b061;
    color: #ffffff;
    text-align: center;
    border-radius: 3rem; }
    .form-webboard .btn-submit:disabled {
      background-color: #727171 !important;
      border-color: #727171 !important; }
  .form-webboard-title {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.25rem; }
    .form-webboard-title > h5 {
      display: flex;
      align-items: center; }
      .form-webboard-title > h5 i {
        width: 2rem;
        height: 2rem;
        font-size: 1.125rem;
        border-radius: 50%;
        background-color: #F49506;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem; }
    .form-webboard-title .btn-submit {
      background-color: #3184ff;
      color: #ffffff;
      font-size: 1rem;
      font-weight: 500;
      border-radius: 1.25rem;
      padding: 0.5rem 2.5rem;
      margin-left: 0.75rem; }
    .form-webboard-title .btn-reset {
      background-color: #2b2b2b;
      color: #ffffff;
      font-size: 1rem;
      font-weight: 500;
      border-radius: 1.25rem;
      padding: 0.5rem 1.5rem; }

.empty-post {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 10rem;
  font-size: 1.25rem; }

.profile-content {
  width: 100%;
  padding-top: 2.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2rem; }
  .profile-content > h1 {
    line-height: 1.5;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    margin-bottom: 2.25rem; }
    .profile-content > h1 img {
      margin-right: 0.75rem; }
  @media only screen and (min-width: 1200px) {
    .profile-content {
      padding-left: 0;
      padding-right: 0; } }

.profile-body {
  max-width: 63.25rem;
  margin: auto;
  display: grid; }
  @media only screen and (min-width: 992px) {
    .profile-body {
      grid-template-columns: 23rem auto;
      gap: 80px;
      padding-bottom: 5rem; } }
  .profile-body .info-sidebar > div {
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem; }
  .profile-body .info-sidebar b {
    font-size: 1.25rem;
    display: block;
    text-align: center;
    margin-bottom: 1rem; }
  .profile-body .info-sidebar .img {
    border-radius: 50%;
    aspect-ratio: 1/1;
    max-width: 180px;
    max-height: 180px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    width: 100%; }
    .profile-body .info-sidebar .img > img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 100%;
      object-fit: cover; }
  .profile-body .info-sidebar p {
    font-size: 0.75rem;
    color: #A9A9A9;
    text-align: center; }
  .profile-body .info-sidebar .btn {
    margin-bottom: 0.5rem; }
    .profile-body .info-sidebar .btn-delete {
      margin-bottom: 0.75rem; }
  @media only screen and (min-width: 992px) {
    .profile-body .info-sidebar {
      width: 23rem;
      max-width: 23rem;
      flex: 23rem; } }
  .profile-body .content-container {
    width: 100%;
    margin-left: auto;
    position: relative;
    margin-top: 2rem; }
    .profile-body .content-container::before {
      content: '';
      width: 1px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -2.5rem;
      background-color: #ECEAE9; }
    .profile-body .content-container .card > b {
      font-size: 1.25rem;
      display: block;
      margin-bottom: 2rem; }
    .profile-body .content-container .card .form-box {
      margin-bottom: 0.5rem; }
      .profile-body .content-container .card .form-box:last-child {
        margin-bottom: 0; }
      .profile-body .content-container .card .form-box label {
        margin-bottom: 0.5rem; }
      .profile-body .content-container .card .form-box .form-control[readonly] {
        background-color: #DBDBDB;
        color: #A9A9A9; }
      .profile-body .content-container .card .form-box--2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem; }
      .profile-body .content-container .card .form-box .list-password {
        list-style: none;
        padding-left: 1rem;
        margin-bottom: 0;
        margin-top: 0.5rem;
        font-size: 1rem; }
        .profile-body .content-container .card .form-box .list-password > li {
          margin-bottom: 0.5rem;
          display: flex;
          align-items: center;
          color: #b7b7b7; }
          .profile-body .content-container .card .form-box .list-password > li::before {
            content: '\e805';
            font-family: "fontello";
            margin-right: 0.5rem; }
          .profile-body .content-container .card .form-box .list-password > li.is-invalid {
            color: #ee434c; }
            .profile-body .content-container .card .form-box .list-password > li.is-invalid::before {
              content: '\e806'; }
          .profile-body .content-container .card .form-box .list-password > li.is-valid {
            color: #01712C; }
    .profile-body .content-container .btn {
      margin-bottom: 0.5rem; }
      .profile-body .content-container .btn-delete {
        margin-right: 0.75rem; }
    @media only screen and (min-width: 992px) {
      .profile-body .content-container {
        max-width: 35.25rem;
        margin-top: 0; }
        .profile-body .content-container::before {
          display: block; } }
  .profile-body .btn {
    max-width: 192px;
    width: 100%;
    border-radius: 1.25rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center; }
    .profile-body .btn i {
      margin-right: 0.5rem; }
    .profile-body .btn-submit {
      background-color: #3184ff !important;
      color: #ffffff !important; }
    .profile-body .btn-delete {
      background-color: #ffffff !important;
      border-color: #DBDBDB !important;
      color: #727171 !important; }

.swal2-actions {
  flex-direction: row-reverse !important; }
  .swal2-actions .swal2-styled {
    max-width: 192px;
    width: 100%;
    border-radius: 1.25rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center; }
    .swal2-actions .swal2-styled i {
      margin-right: 0.5rem; }
    .swal2-actions .swal2-styled.btn-submit {
      background-color: #3184ff !important;
      color: #ffffff !important; }
    .swal2-actions .swal2-styled.btn-delete {
      background-color: #ffffff !important;
      color: #727171 !important;
      border: 1px solid #DBDBDB !important; }

.list-password {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem; }
  .list-password > li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    color: #b7b7b7; }
    .list-password > li::before {
      content: '\e807';
      font-family: "fontello";
      margin-right: 0.5rem; }
    .list-password > li.is-invalid {
      color: #ee434c; }
      .list-password > li.is-invalid::before {
        content: '\e808'; }
    .list-password > li.is-valid {
      color: #01712C; }

.validate-message {
  color: #ee434c; }

.incident-report {
  padding: 0 1rem; }
  .incident-report-filter .filter-select {
    display: flex;
    flex-wrap: wrap;
    padding-left: 3rem; }
    .incident-report-filter .filter-select select {
      width: auto; }
  .incident-report-filter .filter-menu {
    display: flex;
    gap: .5rem; }
    .incident-report-filter .filter-menu .menu-item {
      width: 2rem;
      height: 2rem;
      border-radius: .25rem;
      border: 1px solid #DBDBDB;
      padding: .25rem;
      display: flex;
      align-items: center;
      justify-content: center; }
      .incident-report-filter .filter-menu .menu-item svg path {
        fill: #DBDBDB; }
      .incident-report-filter .filter-menu .menu-item.active, .incident-report-filter .filter-menu .menu-item:hover {
        background-color: #C3273F;
        border-color: #C3273F; }
        .incident-report-filter .filter-menu .menu-item.active svg path, .incident-report-filter .filter-menu .menu-item:hover svg path {
          fill: #FFF; }
  .incident-report .card {
    padding: 1.5rem; }
    .incident-report .card .filter select {
      max-width: 12rem; }
    .incident-report .card .table-responsive thead th,
    .incident-report .card .table-responsive tfoot th {
      text-align: center;
      width: 50%; }
    .incident-report .card .table-responsive thead th:first-child,
    .incident-report .card .table-responsive tfoot th:first-child {
      color: #FFF;
      border-top-left-radius: 1rem;
      background-color: #B8293E; }
    .incident-report .card .table-responsive thead th:nth-child(2),
    .incident-report .card .table-responsive tfoot th:nth-child(2) {
      background-color: #000;
      color: #FFF;
      border-top-right-radius: 1rem; }
    .incident-report .card .table-responsive tbody td:nth-child(2) {
      text-align: center; }
    .incident-report .card .table-responsive tbody tr:nth-child(odd) td:first-child {
      background-color: #FFD7DC; }
    .incident-report .card .table-responsive tbody tr:nth-child(odd) td:nth-child(2) {
      background-color: #F6F6F6; }
    .incident-report .card .table-responsive tbody tr:nth-child(even) td:first-child {
      background-color: #FFC9D1; }
    .incident-report .card .table-responsive tbody tr:nth-child(even) td:nth-child(2) {
      background-color: #E9E9E9; }
    .incident-report .card .table-responsive tfoot th {
      font-weight: 400; }
    .incident-report .card .table-responsive tfoot th:first-child {
      border-top-left-radius: 0rem;
      border-bottom-left-radius: 1rem; }
    .incident-report .card .table-responsive tfoot th:nth-child(2) {
      border-top-right-radius: 0rem;
      border-bottom-right-radius: 1rem; }
    .incident-report .card .summary-year .text {
      color: #12B061; }
    .incident-report .card .summary-year .item {
      position: relative; }
      .incident-report .card .summary-year .item .name {
        position: absolute;
        color: #FFF;
        text-align: center;
        font-size: .75rem;
        top: 5px;
        width: 100%; }
      .incident-report .card .summary-year .item .total {
        position: absolute;
        width: 100%;
        font-size: 1.375rem;
        font-weight: 700;
        text-align: center;
        top: 1.75rem; }
    .incident-report .card .download-file h6 {
      font-weight: 400;
      color: #A9A9A9; }
    .incident-report .card .download-file .file-item {
      display: flex;
      align-items: center;
      border: 1px solid #E2E2E2;
      border-radius: .5rem;
      padding: .5rem; }
      .incident-report .card .download-file .file-item .icon {
        background-color: #FBE3E3;
        border-radius: .75rem;
        padding: .75rem .9rem; }
        .incident-report .card .download-file .file-item .icon img {
          width: 1.5rem; }
      .incident-report .card .download-file .file-item .detail {
        font-size: .875rem;
        padding: 0 .5rem;
        font-weight: 500;
        display: flex;
        flex-flow: column;
        flex: 1; }
        .incident-report .card .download-file .file-item .detail small {
          font-size: .75rem;
          color: #3184FF;
          font-weight: 400; }
      .incident-report .card .download-file .file-item .download {
        font-size: .75rem;
        text-align: center;
        color: #0A328B; }
    @media only screen and (min-width: 768px) {
      .incident-report .card {
        padding: 1.875rem 3rem; } }
    @media only screen and (min-width: 1200px) {
      .incident-report .card {
        padding: 1.5rem; } }
    @media screen and (min-width: 1200px) {
      .incident-report .card {
        padding: 1.875rem 3rem; } }
  .incident-report .kpi-list {
    list-style-type: none;
    border-radius: 1rem;
    overflow: hidden;
    padding-left: 0rem; }
    @media screen and (min-width: 1600px) {
      .incident-report .kpi-list {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto; } }
    .incident-report .kpi-list ul {
      list-style-type: none;
      padding-left: 0; }
    .incident-report .kpi-list .kpi-item {
      display: grid;
      grid-template-columns: 1fr 1fr; }
      .incident-report .kpi-list .kpi-item-head {
        padding: 0;
        color: #FFF;
        font-weight: 600;
        font-size: 1.125rem;
        text-align: center; }
        .incident-report .kpi-list .kpi-item-head div {
          padding: .5rem; }
          .incident-report .kpi-list .kpi-item-head div:first-child {
            background-color: #B8293E !important; }
          .incident-report .kpi-list .kpi-item-head div:last-child {
            background-color: #000 !important; }
  .incident-report .kpi-list li:nth-child(even) > .kpi-item div {
    padding: .5rem .75rem; }
    .incident-report .kpi-list li:nth-child(even) > .kpi-item div:first-child {
      background: #FFD7DC; }
    .incident-report .kpi-list li:nth-child(even) > .kpi-item div:last-child {
      background: #F6F6F6;
      text-align: center; }
  .incident-report .kpi-list li:nth-child(odd) > .kpi-item div {
    padding: .5rem .75rem; }
    .incident-report .kpi-list li:nth-child(odd) > .kpi-item div:first-child {
      background: #FFC9D1; }
    .incident-report .kpi-list li:nth-child(odd) > .kpi-item div:last-child {
      background: #E9E9E9;
      text-align: center; }
  .incident-report .kpi-list ul > li:nth-child(even) > .kpi-item.bg-1 div:first-child {
    background: #E98190; }
  .incident-report .kpi-list ul > li:nth-child(odd) > .kpi-item.bg-1 div:first-child {
    background: #DA6475; }
  @media only screen and (min-width: 768px) {
    .incident-report {
      padding: 0; } }

.ranking-page .card {
  padding: 1.25rem;
  padding-top: 3rem; }
  @media only screen and (min-width: 768px) {
    .ranking-page .card {
      display: grid;
      grid-template-columns: 14.5rem auto;
      gap: 1rem; } }
  @media only screen and (min-width: 1200px) {
    .ranking-page .card {
      padding-right: 3rem; } }
  @media screen and (min-width: 1600px) {
    .ranking-page .card {
      padding-right: 7rem;
      grid-template-columns: 18.5rem auto; } }

.ranking-page .ranking-head {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: .5 rem; }
  @media screen and (max-width: 1440px) {
    .ranking-page .ranking-head {
      max-width: 9.375rem; } }

.ranking-page .ranking-menu {
  list-style-type: none;
  padding-left: 0; }
  .ranking-page .ranking-menu li {
    width: 100%;
    border: 1px solid #DBDBDB;
    margin-bottom: .5rem;
    padding: .5rem;
    border-radius: .75rem; }
    .ranking-page .ranking-menu li a {
      color: #727171;
      display: flex;
      align-items: center;
      justify-content: center; }
    .ranking-page .ranking-menu li svg {
      width: 2rem; }
      .ranking-page .ranking-menu li svg path {
        fill: #727171; }
    .ranking-page .ranking-menu li.active, .ranking-page .ranking-menu li:hover {
      background-color: #000; }
      .ranking-page .ranking-menu li.active a, .ranking-page .ranking-menu li:hover a {
        color: #FFF; }
      .ranking-page .ranking-menu li.active svg path, .ranking-page .ranking-menu li:hover svg path {
        fill: #FFF; }

.ranking-page .ranking-banner {
  width: 100%;
  background-image: url("../images/ranking/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1rem;
  position: relative; }
  .ranking-page .ranking-banner .bg-item {
    position: absolute; }
    .ranking-page .ranking-banner .bg-item.bg-1 {
      top: 20%;
      left: 7%;
      width: 5%; }
    .ranking-page .ranking-banner .bg-item.bg-2 {
      top: 62%;
      left: 13%;
      width: 4%; }
    .ranking-page .ranking-banner .bg-item.bg-3 {
      top: 18%;
      right: 15%;
      width: 6%; }
    .ranking-page .ranking-banner .bg-item.bg-4 {
      bottom: 12%;
      right: 11%;
      width: 14%; }

.ranking-page .ranking-top-three {
  display: flex;
  align-items: flex-end;
  justify-content: center; }
  .ranking-page .ranking-top-three .item {
    position: relative;
    text-align: center;
    width: 30%;
    max-width: 10rem; }
    .ranking-page .ranking-top-three .item .image {
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      bottom: -1rem; }
      .ranking-page .ranking-top-three .item .image .profile {
        width: 65%;
        position: relative; }
        .ranking-page .ranking-top-three .item .image .profile-user {
          aspect-ratio: 1;
          background-color: #FFF;
          border-radius: 50%;
          padding: .35rem; }
          .ranking-page .ranking-top-three .item .image .profile-user img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%; }
        .ranking-page .ranking-top-three .item .image .profile .medal-label {
          position: absolute;
          right: 0;
          border-radius: 0;
          width: auto;
          border: 0;
          margin-right: 0;
          bottom: 0;
          z-index: 2; }
        .ranking-page .ranking-top-three .item .image .profile .gold-image {
          position: absolute;
          width: 150%;
          border: 0;
          bottom: -.5rem;
          left: 50%;
          transform: translateX(-50%); }
      .ranking-page .ranking-top-three .item .image .detail .point {
        font-weight: 500;
        font-size: .875rem;
        display: inline-block;
        padding: 0 .65rem; }
      .ranking-page .ranking-top-three .item .image .medal {
        position: absolute;
        bottom: 0;
        right: 0; }
    .ranking-page .ranking-top-three .item .cartoon {
      width: 40%;
      position: relative;
      bottom: -1.5rem;
      z-index: 1; }
    .ranking-page .ranking-top-three .item .bg {
      width: 100%;
      position: relative; }
      .ranking-page .ranking-top-three .item .bg .number {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 35%;
        z-index: 1; }
    .ranking-page .ranking-top-three .item.silver {
      order: 1;
      margin-right: -.1rem; }
      .ranking-page .ranking-top-three .item.silver .image .profile-user {
        background-color: #C3C3C3; }
      .ranking-page .ranking-top-three .item.silver .point {
        background-color: #3184FF;
        color: #FFF; }
      .ranking-page .ranking-top-three .item.silver .cartoon {
        width: 50%; }
      .ranking-page .ranking-top-three .item.silver .bg .number {
        width: 30%; }
    .ranking-page .ranking-top-three .item.gold {
      order: 2; }
      .ranking-page .ranking-top-three .item.gold .image .profile-user {
        background-color: #D58B00;
        margin-bottom: .7rem; }
      .ranking-page .ranking-top-three .item.gold .point {
        background-color: #EBC173;
        color: #000; }
      .ranking-page .ranking-top-three .item.gold .cartoon {
        width: 60%; }
    .ranking-page .ranking-top-three .item.bronze {
      order: 3;
      margin-left: -.1rem; }
      .ranking-page .ranking-top-three .item.bronze .image .profile-user {
        background-color: #C85233; }
      .ranking-page .ranking-top-three .item.bronze .point {
        background-color: #00CA66;
        color: #000; }
      .ranking-page .ranking-top-three .item.bronze .bg .number {
        width: 28%; }

.ranking-page .ranking-item {
  display: grid;
  grid-template-columns: 4.7rem auto; }
  .ranking-page .ranking-item .image {
    position: relative; }
    .ranking-page .ranking-item .image > img {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 50%; }
    .ranking-page .ranking-item .image .label {
      width: 1.875rem;
      height: 1.875rem;
      font-size: .625rem;
      position: absolute;
      bottom: 0;
      right: 0;
      color: #FFF;
      background-color: #C3273F;
      display: flex;
      align-items: center;
      justify-items: center;
      text-align: center;
      border-radius: 50%;
      line-height: 1;
      padding-left: .15rem; }
  .ranking-page .ranking-item .detail {
    padding-left: 1rem;
    display: flex;
    flex-flow: column; }
    .ranking-page .ranking-item .detail .name {
      flex: 1;
      font-weight: 500; }
    .ranking-page .ranking-item .detail .point {
      background-color: #FFD9DB;
      display: inline-block;
      color: #D33759;
      font-size: .875rem; }

.ranking-page .result-wrapper {
  padding-top: 1rem; }
  @media screen and (min-width: 1600px) {
    .ranking-page .result-wrapper {
      padding-left: 3rem; } }

.portal-2 .btn-to-top {
  position: absolute;
  bottom: 50vh;
  right: 1rem;
  z-index: 6;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center; }
  .portal-2 .btn-to-top img {
    width: 3.8rem; }
  .portal-2 .btn-to-top div {
    background-color: #000;
    font-size: .875rem;
    color: #FFF;
    text-align: center;
    padding: .25rem .5rem; }

.portal-2 .portal-main2 {
  overflow-x: hidden; }
  @media only screen and (min-width: 1200px) {
    .portal-2 .portal-main2 .container {
      max-width: 1100px;
      position: relative; } }

.portal-2 .header {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8; }
  .portal-2 .header .logo img {
    width: 150px;
    max-width: 100%; }
    @media only screen and (min-width: 768px) {
      .portal-2 .header .logo img {
        width: 130px; } }
  .portal-2 .header .hambuger {
    background-color: #000 !important;
    border-radius: 7px;
    padding: .5rem;
    width: 2.875rem;
    height: 2.875rem;
    position: absolute;
    right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: .3rem; }
    .portal-2 .header .hambuger span {
      width: 100%;
      height: 3px;
      background-color: #FFF;
      display: block;
      border-radius: .5rem; }
  .portal-2 .header .container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }
  .portal-2 .header .menu {
    background: #302F2F;
    background-repeat: repeat-x;
    color: #FFF;
    position: relative; }
    .portal-2 .header .menu ul {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 4;
      padding: .75rem 0; }
      .portal-2 .header .menu ul li.active a, .portal-2 .header .menu ul li:hover a {
        background-color: #FFF;
        color: #000; }
      .portal-2 .header .menu ul a {
        display: block;
        padding: .25rem .75rem;
        border-radius: 10rem;
        background-color: transparent;
        color: #FFF; }
      @media only screen and (min-width: 1200px) {
        .portal-2 .header .menu ul {
          padding: 1rem 0; } }
    .portal-2 .header .menu:before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      background-image: url("../images/portal-main/bg-menu.png");
      background-size: cover;
      background-repeat: repeat-x;
      filter: invert(0);
      height: 100%;
      z-index: 3;
      backdrop-filter: brightness(0.5);
      opacity: .5; }
    .portal-2 .header .menu .link-yellow {
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      background: #FFEA00;
      z-index: 4;
      padding: .5rem;
      border-radius: 5rem; }

.portal-2 .section-banner {
  position: relative;
  min-height: 100vh;
  padding-bottom: 10rem;
  /* ลอยขึ้นลง */ }
  .portal-2 .section-banner .container {
    position: unset !important; }
  .portal-2 .section-banner .banner {
    min-height: 100vh; }
    .portal-2 .section-banner .banner-item .bg {
      background-size: cover;
      background-position: center;
      position: absolute;
      z-index: 2;
      left: 0;
      mix-blend-mode: hard-light;
      opacity: .15;
      width: 100%;
      height: 100%; }
    .portal-2 .section-banner .banner-item .container {
      position: absolute !important;
      top: 18%;
      z-index: 6;
      width: 100%; }
      .portal-2 .section-banner .banner-item .container .banner-text {
        color: #FFF; }
        .portal-2 .section-banner .banner-item .container .banner-text .label {
          border: 1px solid white;
          border-radius: 1.875rem;
          padding: .25rem 1rem;
          display: inline-block;
          font-size: .875rem;
          margin-bottom: .5rem; }
        .portal-2 .section-banner .banner-item .container .banner-text h1,
        .portal-2 .section-banner .banner-item .container .banner-text h2,
        .portal-2 .section-banner .banner-item .container .banner-text h3,
        .portal-2 .section-banner .banner-item .container .banner-text h4,
        .portal-2 .section-banner .banner-item .container .banner-text h5 {
          font-weight: 600;
          font-size: 3rem;
          line-height: 1;
          margin-bottom: 1.5rem;
          transition: all .3s; }
          @media only screen and (min-width: 768px) {
            .portal-2 .section-banner .banner-item .container .banner-text h1,
            .portal-2 .section-banner .banner-item .container .banner-text h2,
            .portal-2 .section-banner .banner-item .container .banner-text h3,
            .portal-2 .section-banner .banner-item .container .banner-text h4,
            .portal-2 .section-banner .banner-item .container .banner-text h5 {
              font-size: 3.5rem; } }
          @media only screen and (min-width: 1200px) {
            .portal-2 .section-banner .banner-item .container .banner-text h1,
            .portal-2 .section-banner .banner-item .container .banner-text h2,
            .portal-2 .section-banner .banner-item .container .banner-text h3,
            .portal-2 .section-banner .banner-item .container .banner-text h4,
            .portal-2 .section-banner .banner-item .container .banner-text h5 {
              font-size: 4rem; } }
        .portal-2 .section-banner .banner-item .container .banner-text p {
          margin-bottom: 0; }
          @media only screen and (min-width: 1200px) {
            .portal-2 .section-banner .banner-item .container .banner-text p {
              max-width: 85%; } }
  .portal-2 .section-banner .pencil {
    position: absolute;
    left: 0;
    top: 55%;
    z-index: 4;
    width: 30%; }
  .portal-2 .section-banner .hammer {
    position: absolute;
    left: 5%;
    top: 70%;
    z-index: 3;
    width: 22%; }
  .portal-2 .section-banner .cartoon {
    position: absolute;
    z-index: 3;
    bottom: 10rem;
    width: 70%;
    right: 0;
    max-width: 25rem; }
    .portal-2 .section-banner .cartoon img {
      width: 100%; }
    @media screen and (min-width: 400px) and (min-height: 700px) {
      .portal-2 .section-banner .cartoon {
        width: 85%; } }
    .portal-2 .section-banner .cartoon .main-cartoon {
      animation: float_sway 3s ease-in-out infinite; }
  .portal-2 .section-banner .pencil, .portal-2 .section-banner .pencil2, .portal-2 .section-banner .hat {
    animation: float 3.5s ease-in-out infinite; }
  .portal-2 .section-banner .hammer {
    animation: float 4s ease-in-out infinite; }

@keyframes float {
  0% {
    transform: translateY(0px); }
  50% {
    transform: translateY(-15px); }
  100% {
    transform: translateY(0px); } }

@keyframes float_sway {
  0% {
    transform: translateY(0px) rotate(0deg); }
  50% {
    transform: translateY(-15px) rotate(3deg); }
  100% {
    transform: translateY(0px) rotate(0deg); } }
  .portal-2 .section-banner::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    right: 0;
    background: rgba(255, 186, 207, 0.3);
    clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%); }
  .portal-2 .section-banner:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #E60049 21.93%, #830D2A 100%);
    position: absolute;
    top: 0;
    left: 0; }
  @media only screen and (min-width: 768px) {
    .portal-2 .section-banner {
      min-height: auto;
      height: 40rem; }
      .portal-2 .section-banner .banner {
        min-height: 100%; }
        .portal-2 .section-banner .banner .container {
          top: 28%;
          max-width: 21.875rem; }
        .portal-2 .section-banner .banner .banner-text .label {
          margin-bottom: 1rem; }
      .portal-2 .section-banner .cartoon {
        z-index: 8;
        bottom: 7rem;
        width: 45%;
        right: 0; }
        .portal-2 .section-banner .cartoon .pencil {
          position: absolute;
          width: 20%;
          left: -3rem;
          top: 12rem; }
        .portal-2 .section-banner .cartoon .hammer {
          position: absolute;
          width: 18%;
          top: 0;
          left: -1rem; }
        .portal-2 .section-banner .cartoon .hat {
          position: absolute;
          width: 30%;
          top: 5rem;
          right: 0;
          z-index: -1; }
      .portal-2 .section-banner::before {
        left: 40%;
        right: unset;
        clip-path: polygon(25% 0%, 49% 0%, 26% 100%, 0% 109%); } }
  @media only screen and (min-width: 1200px) {
    .portal-2 .section-banner {
      height: 45rem; }
      .portal-2 .section-banner::before {
        clip-path: polygon(20% 0%, 43% 0%, 23% 100%, 0% 100%); }
      .portal-2 .section-banner .banner .container {
        max-width: 30rem; }
      .portal-2 .section-banner .cartoon {
        right: 10%;
        transform: scale(1.2);
        width: 60%; }
        .portal-2 .section-banner .cartoon .hammer {
          left: -7rem;
          width: 20%; }
        .portal-2 .section-banner .cartoon .pencil {
          left: -9rem;
          width: 23%; }
        .portal-2 .section-banner .cartoon .hat {
          width: 35%;
          right: -1rem; } }
  @media screen and (min-width: 1600px) {
    .portal-2 .section-banner:before {
      clip-path: polygon(24% 0%, 41% 0%, 22% 100%, 0% 118%); }
    .portal-2 .section-banner .cartoon {
      right: 17%; } }

.portal-2 .section-pr {
  background: linear-gradient(360deg, #438CF0 48.4%, #764ACF 73.45%, #B309BB 99.98%);
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  position: relative;
  margin-top: -15rem;
  padding-top: 13rem;
  padding-bottom: 12rem;
  z-index: 5;
  clip-path: polygon(0% 165px, 100% 0%, 100% 100%, 0% 100%); }
  @media only screen and (min-width: 768px) {
    .portal-2 .section-pr {
      background: linear-gradient(167.97deg, #3085fa 48.4%, #764ACF 73.45%, #B309BB 99.98%); } }
  .portal-2 .section-pr .bg-checkers {
    position: absolute;
    clip-path: polygon(0% 127px, 100% 0, 100% 23%, 10px 100%);
    top: 0rem;
    right: 0;
    height: 10rem;
    width: 80%;
    background-image: url("../images/portal-main/bg-checker.svg");
    background-size: 250%; }
    @media only screen and (min-width: 768px) {
      .portal-2 .section-pr .bg-checkers {
        background-size: 150%;
        width: 60%;
        clip-path: polygon(0% 99px, 100% 0, 100% 24%, 11px 134px); } }
  .portal-2 .section-pr .bg img {
    opacity: .43;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    left: 0;
    top: 0;
    mix-blend-mode: overlay; }
  .portal-2 .section-pr .line-dot {
    width: 90%;
    position: absolute;
    right: 0;
    transform: rotate(7deg);
    top: -2rem;
    display: none; }
  .portal-2 .section-pr .container {
    position: relative;
    z-index: 3;
    color: #FFF; }
    .portal-2 .section-pr .container .h2 {
      font-size: 2.5rem; }
      @media only screen and (min-width: 1200px) {
        .portal-2 .section-pr .container .h2 {
          font-size: 4rem; } }
  .portal-2 .section-pr .splide-pr .splide__arrows .splide__arrow--prev {
    top: unset;
    bottom: -1rem;
    transform: unset;
    left: calc(50% - 2.5rem); }
  .portal-2 .section-pr .splide-pr .splide__arrows .splide__arrow--next {
    top: unset;
    bottom: -1rem;
    transform: unset;
    right: calc(50% - 2.5rem); }
  .portal-2 .section-pr .splide-pr .splide__slide .image {
    aspect-ratio: 4/3; }
    .portal-2 .section-pr .splide-pr .splide__slide .image img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  @media only screen and (min-width: 768px) {
    .portal-2 .section-pr .splide-pr .splide__slide {
      display: flex;
      align-items: center; }
      .portal-2 .section-pr .splide-pr .splide__slide .image {
        position: relative;
        aspect-ratio: 4 / 2;
        border-radius: .875rem;
        border: 1px solid #FFF;
        box-shadow: 0px 0px 10px 0px #0A131F33; }
        .portal-2 .section-pr .splide-pr .splide__slide .image img {
          border-radius: .875rem; }
        .portal-2 .section-pr .splide-pr .splide__slide .image:after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: #00000099;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: .875rem; }
      .portal-2 .section-pr .splide-pr .splide__slide.is-active.is-visible .image {
        aspect-ratio: 4 / 2.5 !important; }
        .portal-2 .section-pr .splide-pr .splide__slide.is-active.is-visible .image:after {
          display: none; } }
  @media only screen and (min-width: 1200px) {
    .portal-2 .section-pr .splide-pr .splide__slide .image {
      aspect-ratio: 4 / 1.5; }
    .portal-2 .section-pr .splide-pr .splide__slide.is-active.is-visible .image {
      aspect-ratio: 4 / 2 !important; } }
  .portal-2 .section-pr .splide-pr-detail .splide__slide .detail .link {
    background: rgba(48, 42, 53, 0.6);
    display: flex;
    justify-content: center;
    border-radius: 1.875rem;
    color: #FFF; }
    .portal-2 .section-pr .splide-pr-detail .splide__slide .detail .link:hover {
      background: #302a35; }
  @media only screen and (min-width: 768px) {
    .portal-2 .section-pr .splide-pr-detail .splide__slide {
      opacity: 0; }
      .portal-2 .section-pr .splide-pr-detail .splide__slide.is-active.is-visible {
        opacity: 1; }
      .portal-2 .section-pr .splide-pr-detail .splide__slide .detail .link {
        max-width: 10rem;
        margin: 0 auto; } }

.portal-2 .section-highlight {
  padding: 7rem 0 0;
  background-color: #FFF;
  clip-path: polygon(0% 50px, 100% 0%, 100% 100%, 0% 100%);
  margin-top: -10rem;
  position: relative;
  z-index: 5; }
  .portal-2 .section-highlight .pencil-blue {
    position: absolute;
    width: 40%;
    right: -2rem;
    z-index: 3;
    transform: rotate(25deg);
    top: 5rem; }
    @media only screen and (min-width: 768px) {
      .portal-2 .section-highlight .pencil-blue {
        width: 25%;
        transform: rotate(0);
        top: 2rem; } }
    @media only screen and (min-width: 1200px) {
      .portal-2 .section-highlight .pencil-blue {
        right: 0rem; } }
  .portal-2 .section-highlight .gameboy {
    position: absolute;
    bottom: 3rem;
    left: 1rem;
    z-index: 6;
    width: 40%;
    max-width: 10rem; }
    @media only screen and (min-width: 768px) {
      .portal-2 .section-highlight .gameboy {
        max-width: 12rem; } }
    @media only screen and (min-width: 1200px) {
      .portal-2 .section-highlight .gameboy {
        max-width: 14rem;
        left: calc((100% - 1100px) / 2); } }
  .portal-2 .section-highlight .content {
    background: url("../images/portal-main/bg-dot-left.webp"), url("../images/portal-main/bg-dot-right.webp"), linear-gradient(189.13deg, #F7D65C 22.68%, #F7C54A 80.43%);
    background-position: left top, right bottom;
    clip-path: polygon(0 0, 100% 30px, 100% 100%, 0% 100%);
    padding: 7rem 0 8rem;
    background-size: 40%, 60%, cover;
    background-repeat: no-repeat;
    position: relative; }
    .portal-2 .section-highlight .content:before {
      content: "";
      display: block;
      height: 10rem;
      position: absolute;
      top: 0;
      width: 100%;
      clip-path: polygon(0 0, 100% 0, 100% 52px, 0% 0);
      background-color: #DEA812;
      right: 0; }
    .portal-2 .section-highlight .content:after {
      content: "";
      display: block;
      height: 8rem;
      position: absolute;
      bottom: -1rem;
      width: 100%;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0%);
      background-color: #DEA812;
      right: 0;
      transform: rotate(-180deg); }
    .portal-2 .section-highlight .content .item:first-child {
      margin-bottom: 7rem; }
      .portal-2 .section-highlight .content .item:first-child .image {
        max-width: 20rem !important; }
    .portal-2 .section-highlight .content .item .image {
      max-width: 18rem;
      position: relative;
      z-index: 1;
      margin-left: auto;
      margin-right: auto; }
      .portal-2 .section-highlight .content .item .image .cartoon {
        width: 100%; }
      .portal-2 .section-highlight .content .item .image .book {
        position: absolute;
        right: -2rem;
        top: -3rem;
        width: 36%; }
    .portal-2 .section-highlight .content .item .detail {
      background: #FFF;
      border-radius: .5rem;
      padding: .5rem;
      box-shadow: 0px 0px 10px 0px rgba(10, 19, 31, 0.2);
      margin-top: -2rem; }
      .portal-2 .section-highlight .content .item .detail .bg {
        border-radius: .5rem;
        background: #f94e6a;
        padding: 2rem 1.5rem;
        position: relative; }
        .portal-2 .section-highlight .content .item .detail .bg .dot {
          position: absolute;
          width: .5rem;
          height: .5rem;
          background-color: #FFF;
          border-radius: 50%; }
          .portal-2 .section-highlight .content .item .detail .bg .dot:first-child {
            top: .5rem;
            left: .5rem; }
          .portal-2 .section-highlight .content .item .detail .bg .dot:nth-child(2) {
            top: .5rem;
            right: .5rem; }
          .portal-2 .section-highlight .content .item .detail .bg .dot:nth-child(3) {
            bottom: .5rem;
            left: .5rem; }
          .portal-2 .section-highlight .content .item .detail .bg .dot:nth-child(4) {
            bottom: .5rem;
            right: .5rem; }
        .portal-2 .section-highlight .content .item .detail .bg .h3 {
          color: #FFF;
          font-size: 2.5rem; }
        .portal-2 .section-highlight .content .item .detail .bg .h5 {
          font-size: 1.375rem; }
        .portal-2 .section-highlight .content .item .detail .bg p {
          color: #FFF; }
    @media only screen and (min-width: 768px) {
      .portal-2 .section-highlight .content .item {
        display: flex;
        align-items: center;
        position: relative; }
        .portal-2 .section-highlight .content .item .image {
          position: absolute; }
        .portal-2 .section-highlight .content .item .detail {
          width: 55%; }
        .portal-2 .section-highlight .content .item:first-child .image {
          left: -1rem;
          top: -4rem; }
        .portal-2 .section-highlight .content .item:first-child .detail {
          margin-left: 33%;
          transform: rotate(6deg); }
        .portal-2 .section-highlight .content .item:nth-child(2) .image {
          right: 5rem;
          margin-top: 5rem; }
        .portal-2 .section-highlight .content .item:nth-child(2) .detail {
          transform: rotate(-5deg); } }
    @media only screen and (min-width: 1200px) {
      .portal-2 .section-highlight .content .item:first-child .image {
        max-width: 25rem !important;
        left: 2rem;
        top: -7rem; }
      .portal-2 .section-highlight .content .item:nth-child(2) {
        margin-top: 10rem; }
        .portal-2 .section-highlight .content .item:nth-child(2) .image {
          max-width: 22rem !important; }
        .portal-2 .section-highlight .content .item:nth-child(2) .detail {
          margin-left: 5rem; }
      .portal-2 .section-highlight .content .item .detail .bg {
        padding: 2.5rem; }
        .portal-2 .section-highlight .content .item .detail .bg .h3 {
          font-size: 3.5rem; }
        .portal-2 .section-highlight .content .item .detail .bg .h5 {
          font-size: 1.875rem; } }
    @media only screen and (min-width: 768px) {
      .portal-2 .section-highlight .content {
        padding: 10rem 0;
        background-size: 250px, 300px, cover; }
        .portal-2 .section-highlight .content:before {
          width: 90%;
          clip-path: polygon(0 0, 100% 0, 100% 80px, 0% 0); }
        .portal-2 .section-highlight .content:after {
          width: 60%;
          transform: rotate(0deg);
          bottom: -5rem; } }
    @media only screen and (min-width: 1200px) {
      .portal-2 .section-highlight .content {
        background: url("../images/portal-main/bg-dot-left-desktop.webp"), url("../images/portal-main/bg-dot-right.webp"), linear-gradient(189.13deg, #F7D65C 22.68%, #F7C54A 80.43%);
        background-repeat: no-repeat;
        background-position: left bottom, right top;
        background-size: 300px, 300px, cover; } }
  .portal-2 .section-highlight:after {
    content: "";
    display: block;
    padding: 5rem;
    background-color: #FFF;
    clip-path: polygon(0% 0, 100% 76px, 100% 100%, 0% 100%);
    position: relative;
    z-index: 5;
    margin-top: -5rem; }
  @media only screen and (min-width: 1200px) {
    .portal-2 .section-highlight {
      padding: 9rem 0 0;
      clip-path: polygon(0% 88px, 100% 0%, 100% 100%, 0% 100%); } }

.portal-2 .section-news {
  background: url("../images/portal-main/bg-denso.webp"), #e70112;
  background-size: 180%;
  background-position: top -2rem center;
  background-repeat: no-repeat;
  padding: 4rem 0 0; }
  .portal-2 .section-news .h2 {
    font-size: 2.5rem; }
    @media only screen and (min-width: 1200px) {
      .portal-2 .section-news .h2 {
        font-size: 4rem; } }
  .portal-2 .section-news .readmore {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    padding: .75rem; }
    .portal-2 .section-news .readmore svg path {
      stroke: #000; }
    @media only screen and (min-width: 768px) {
      .portal-2 .section-news .readmore {
        max-width: 10rem;
        margin: 0 auto; } }
    .portal-2 .section-news .readmore:hover {
      background-color: #000;
      color: #FFF; }
      .portal-2 .section-news .readmore:hover svg path {
        stroke: #FFF; }
  .portal-2 .section-news .cartoon {
    margin-top: 1.5rem;
    margin-left: auto;
    display: block; }
    @media only screen and (min-width: 768px) {
      .portal-2 .section-news .cartoon {
        position: relative;
        z-index: 3;
        margin-top: -8rem; } }
    @media only screen and (min-width: 1200px) {
      .portal-2 .section-news .cartoon {
        width: 18%;
        margin-top: -12rem; } }
  .portal-2 .section-news .news-footer {
    background-image: url("../images/portal-main/bg-footer.webp");
    padding: 4rem 0 1.5rem;
    margin-top: -3rem; }
  @media only screen and (min-width: 1200px) {
    .portal-2 .section-news {
      background-size: 100%; } }

.portal-2 .card {
  background: transparent; }
  .portal-2 .card .card-image {
    border-top-left-radius: 4rem;
    border-top-right-radius: .75rem;
    aspect-ratio: 408/236;
    overflow: hidden; }
    .portal-2 .card .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: all .3s; }
  .portal-2 .card .card-body {
    background: #2a2929;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    position: relative;
    color: #FFF;
    padding: 1.5rem 1.5rem 3.5rem; }
    .portal-2 .card .card-body .dot {
      position: absolute;
      width: .5rem;
      height: .5rem;
      background-color: #FFF;
      border-radius: 50%; }
      .portal-2 .card .card-body .dot:first-child {
        top: .5rem;
        left: .5rem; }
      .portal-2 .card .card-body .dot:nth-child(2) {
        top: .5rem;
        right: .5rem; }
      .portal-2 .card .card-body .dot:nth-child(3) {
        bottom: .5rem;
        left: .5rem; }
      .portal-2 .card .card-body .dot:nth-child(4) {
        bottom: .5rem;
        right: .5rem; }
    .portal-2 .card .card-body .detail div {
      font-size: .875rem;
      display: flex;
      align-items: center; }
      .portal-2 .card .card-body .detail div svg {
        margin-right: .5rem;
        width: 1.25rem; }
    .portal-2 .card .card-body .detail .view svg {
      width: 1.375rem; }
    .portal-2 .card .card-body p {
      font-size: .875rem;
      margin-bottom: 0; }
  .portal-2 .card:hover .card-image img {
    transition: all .3s;
    transform: scale(1.2); }
  .portal-2 .card:hover .card-body .detail svg path {
    fill: #C3273F; }
  .portal-2 .card:hover .card-body .title,
  .portal-2 .card:hover .card-body p,
  .portal-2 .card:hover .card-body .detail {
    color: #C3273F; }
  .portal-2 .card-style2 .card-body {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    color: #413D3D; }
    .portal-2 .card-style2 .card-body .detail {
      color: #A9A9A9; }
      .portal-2 .card-style2 .card-body .detail svg path {
        fill: #A9A9A9; }
    @media only screen and (min-width: 768px) {
      .portal-2 .card-style2 .card-body .title {
        font-size: 1.375rem; } }

.offcanvas-menu {
  backdrop-filter: blur(4px);
  background: #0B0F1999;
  color: #FFF;
  width: 100% !important; }
  .offcanvas-menu .offcanvas-body {
    display: flex;
    align-items: center;
    justify-content: center; }
    .offcanvas-menu .offcanvas-body .btn-close {
      opacity: 1;
      filter: brightness(0) invert(1);
      background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'><rect x='14.7754' y='11.1846' width='34.4426' height='4.85321' rx='2.4266' transform='rotate(45 14.7754 11.1846)' fill='white'/><rect x='39.2852' y='14.6162' width='34.4426' height='4.85321' rx='2.4266' transform='rotate(135 39.2852 14.6162)' fill='white'/></svg>") center/1em auto no-repeat;
      transform: scale(2);
      transform-origin: right bottom;
      box-shadow: none !important; }
    .offcanvas-menu .offcanvas-body ul {
      list-style-type: none;
      padding-left: 0; }
      .offcanvas-menu .offcanvas-body ul li {
        width: 100%; }
        .offcanvas-menu .offcanvas-body ul li.active a {
          color: #2B2B2B;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 49.04%, rgba(255, 255, 255, 0) 100%); }
        .offcanvas-menu .offcanvas-body ul li a {
          display: block;
          padding: .75rem;
          text-align: center;
          color: #FFF; }
          .offcanvas-menu .offcanvas-body ul li a.link-yellow {
            background: #FFEA00 !important;
            color: #2B2B2B !important; }

@media screen and (min-width: 768px) {
  .offcanvas-backdrop {
    display: none !important; } }

.archive-news {
  background: linear-gradient(180deg, #E60049 7.56%, #B91046 37.77%, #8F1039 67.97%);
  position: relative; }
  .archive-news .banner {
    height: 90vh;
    background: url("../images/news/bg-banner.png");
    background-size: cover;
    background-blend-mode: hard-light;
    display: flex;
    align-items: center;
    position: relative; }
    .archive-news .banner .container .image {
      max-width: 85%;
      margin-left: auto;
      margin-right: -.75rem; }
    .archive-news .banner .container .sign-banner {
      background: #1A1A1A66;
      box-shadow: 0px 0px 7.1px 0px #0A131F33;
      border-radius: .75rem;
      border: 5.68px solid #FFFFFF;
      padding: 1.5rem;
      position: absolute;
      left: 1rem;
      bottom: 2rem;
      color: #FFF;
      min-width: 17rem; }
      .archive-news .banner .container .sign-banner .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #FFF;
        position: absolute; }
        .archive-news .banner .container .sign-banner .dot:first-child {
          left: 5px;
          top: 5px; }
        .archive-news .banner .container .sign-banner .dot:nth-child(2) {
          right: 5px;
          top: 5px; }
        .archive-news .banner .container .sign-banner .dot:nth-child(3) {
          left: 5px;
          bottom: 5px; }
        .archive-news .banner .container .sign-banner .dot:nth-child(4) {
          right: 5px;
          bottom: 5px; }
      .archive-news .banner .container .sign-banner .label {
        display: inline-block;
        border: 1px solid #FFF;
        font-size: .875rem;
        padding: 3px 9px; }
      .archive-news .banner .container .sign-banner h3 {
        font-size: 2.5rem; }
    @media only screen and (min-width: 768px) {
      .archive-news .banner {
        height: 35rem;
        padding-bottom: 0;
        display: block;
        padding-top: calc(70px + 55px); }
        .archive-news .banner .container .image {
          margin-right: 0;
          max-width: 70%; }
        .archive-news .banner .container .sign-banner {
          top: 50%;
          transform: translateY(-50%) rotate(5deg);
          bottom: unset;
          left: auto; }
          .archive-news .banner .container .sign-banner h3 {
            font-size: 3.5rem; } }
    @media only screen and (min-width: 1200px) {
      .archive-news .banner {
        height: 55rem;
        padding-bottom: 5rem; }
        .archive-news .banner .container .image {
          max-width: 80%; }
        .archive-news .banner .container .sign-banner {
          min-width: 18rem; }
          .archive-news .banner .container .sign-banner h3 {
            font-size: 4rem; } }
  .archive-news .lists {
    position: relative;
    overflow: hidden; }
    .archive-news .lists .bg {
      background: linear-gradient(167.97deg, #438CF0 0, #764ACF 73.45%, #B309BB 99.98%);
      background-size: cover;
      background-position: center;
      border-top-left-radius: 2rem;
      border-top-right-radius: 2rem;
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden; }
      .archive-news .lists .bg img {
        opacity: .43;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        position: absolute;
        left: 0;
        top: 0;
        mix-blend-mode: overlay; }
    @media only screen and (min-width: 768px) {
      .archive-news .lists {
        margin-top: -10rem;
        padding-top: 10rem; }
        .archive-news .lists .bg {
          width: 200%;
          --mask:
                    radial-gradient(67.27px at 50% 95px,#000 99%,#0000 101%) calc(50% - 100px) 0/200px 100%,
                    radial-gradient(67.27px at 50% -45px,#0000 99%,#000 101%) 50% 50px/200px 100% repeat-x;
          -webkit-mask: var(--mask);
          mask: var(--mask);
          background: linear-gradient(167.97deg, #438CF0 48.4%, #764ACF 73.45%, #B309BB 99.98%);
          background-position: center,bottom;
          position: absolute;
          top: 0;
          height: 100%;
          transform: rotate(6deg);
          transform-origin: left top; }
          .archive-news .lists .bg img {
            width: 150%;
            left: -40%; } }
    @media only screen and (min-width: 1200px) {
      .archive-news .lists {
        margin-top: -20rem; } }
    @media only screen and (min-width: 992px) {
      .archive-news .lists #result_wrapper [class*="col-"]:nth-child(2), .archive-news .lists #result_wrapper [class*="col-"]:nth-child(5), .archive-news .lists #result_wrapper [class*="col-"]:nth-child(8) {
        margin-top: 3rem; } }
  .archive-news .dropdown-news .btn {
    width: 17rem;
    background-color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding: .5rem 1rem; }
    .archive-news .dropdown-news .btn:after {
      display: none; }
    .archive-news .dropdown-news .btn img {
      width: 15px; }
  .archive-news .dropdown-news .dropdown-menu {
    width: 17rem;
    border-radius: .75rem; }
    .archive-news .dropdown-news .dropdown-menu .dropdown-item {
      font-weight: 400;
      font-size: 1rem; }
  @media only screen and (min-width: 768px) {
    .archive-news .dropdown-news {
      width: 100%; }
      .archive-news .dropdown-news .btn {
        display: none; }
      .archive-news .dropdown-news .dropdown-menu {
        display: inline-flex !important;
        position: relative;
        border-radius: 1.875rem;
        padding: .5rem;
        width: auto;
        gap: .5rem; }
        .archive-news .dropdown-news .dropdown-menu .dropdown-item {
          border-radius: 1.875rem; }
          .archive-news .dropdown-news .dropdown-menu .dropdown-item.active, .archive-news .dropdown-news .dropdown-menu .dropdown-item:hover {
            color: #FFF;
            background-color: #000; } }
  .archive-news .pagination {
    background-color: #FFF;
    border-radius: 2rem;
    padding: .35rem .75rem; }
    .archive-news .pagination .page-numbers {
      border-radius: 2rem;
      padding: .15rem;
      width: 2rem;
      height: 2rem;
      border: 0;
      font-weight: 400; }
      @media only screen and (min-width: 768px) {
        .archive-news .pagination .page-numbers {
          width: auto;
          height: auto;
          padding: .15rem 1.25rem; } }
      .archive-news .pagination .page-numbers.active, .archive-news .pagination .page-numbers:hover {
        background-color: #000;
        color: #FFF; }
      .archive-news .pagination .page-numbers.prev, .archive-news .pagination .page-numbers.next {
        background-color: #C3273F;
        width: auto;
        height: auto;
        padding: .15rem 1rem; }
        .archive-news .pagination .page-numbers.prev svg, .archive-news .pagination .page-numbers.next svg {
          width: 1rem; }
        @media only screen and (min-width: 768px) {
          .archive-news .pagination .page-numbers.prev, .archive-news .pagination .page-numbers.next {
            padding: .25rem 1.125rem; }
            .archive-news .pagination .page-numbers.prev svg, .archive-news .pagination .page-numbers.next svg {
              width: 1.375rem; } }
      .archive-news .pagination .page-numbers.prev {
        margin-right: .5rem; }
      .archive-news .pagination .page-numbers.next {
        margin-left: .5rem; }
      .archive-news .pagination .page-numbers:hover.prev svg path, .archive-news .pagination .page-numbers:hover.next svg path {
        stroke: #FFF !important; }
  .archive-news .cartoon4 {
    position: absolute;
    right: 0;
    bottom: -1rem;
    z-index: 2; }

.single-news {
  position: relative; }
  .single-news:before {
    content: "";
    display: block;
    width: 100%;
    height: 35rem;
    --mask:
    radial-gradient(84px at 50% calc(100% - 117.5px),#000 99%,#0000 101%) calc(50% - 100px) 0/200px 100%,
    radial-gradient(84px at 50% calc(100% + 67.5px),#0000 99%,#000 101%) 50% calc(100% - 50px)/200px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: url("../images/news/bg-denso.png"), #DB1052;
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute; }
  .single-news .single-body {
    position: relative;
    z-index: 2;
    background-color: transparent;
    padding-top: 13rem;
    max-width: 56.25rem;
    margin-left: auto;
    margin-right: auto; }
    .single-news .single-body .single-head h2 {
      color: #FFF;
      font-weight: 600; }
    @media only screen and (min-width: 1200px) {
      .single-news .single-body .single-head h2 {
        font-size: 3rem; } }
    .single-news .single-body .single-date {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      width: 100%; }
      .single-news .single-body .single-date svg {
        margin-right: .25rem; }
      .single-news .single-body .single-date .view svg {
        width: 22px;
        margin-right: .25rem; }
    .single-news .single-body .feature-image img {
      border-top-left-radius: 3rem;
      border-top-right-radius: .75rem; }