:root {
  --mega-menu-height: 80dvh;
  --navbar-radius: 50px;
  /* unknown */
  --color-dropdown-hover: #fceaeb;

  --color-light-grey: #f8f8f8;
  --color-light-grey-de: #dedede;
  --color-danger: #aa0f1f;
  --color-light-grey-ed: #ededed;
  --color-light-grey-f2: #f2f2f2;

  --color-text-light-grey-de: var(--color-light-grey-de);

  --color-bg-dropdown-hover: var(--color-dropdown-hover);
  --color-bg-light-grey: var(--color-light-grey);
  --color-bg-light-gray-50: var(--color-light-gray-50);
  --color-bg-light-grey-ed: var(--color-light-grey-ed);
  --color-bg-light-grey-f2: var(--color-light-grey-f2);

  /* default themes */
  --color-text-white: var(--bs-white);
  --color-text-black: var(--bs-black);
  --color-text-red: var(--bs-red);
  --color-text-red-50: var(--bs-red-50);
  --color-text-gray: var(--bs-gray);
  --color-text-gray-50: var(--bs-gray-50);
  --color-text-light-gray-50: var(--bs-light-gray-50);

  --color-bg-white: var(--bs-white);
  --color-bg-black: var(--bs-black);
  --color-bg-red: var(--bs-red);
  --color-bg-red-50: var(--bs-red-50);
  --color-bg-disabled: var(--bs-disabled);
  --color-bg-gray: var(--bs-gray);
  --color-bg-light-grey-50: var(--bs-light-gray-50);
}
.document {
  min-height: 100dvh;
  main[role="main"] {
    flex: 1;
  }
}
.cursor-pointer {
  cursor: pointer !important;
}
main[role="main"] {
  overflow: hidden !important;
  .zone-breadcrumb {
    position: relative;
    .breadcrumb {
      flex-wrap: nowrap;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .breadcrumb-item {
        width: fit-content;
        display: flex;
        white-space: nowrap;
      }
    }
  }
}
.userway_buttons_wrapper {
  display: none !important;
}
.nbtc__header {
  z-index: 5;
  background-color: var(--color-bg-white);
  .header-left {
    transition: all 300ms;
    img {
      min-width: 54px;
      max-width: 54px;
      width: 100%;
    }
    &:has(+ .navbar-center .navbar-collapse.scroll) {
      img {
        scale: 0.95;
      }
    }
  }
  .header-right {
    img {
      height: 30px;
      cursor: pointer;
      transition: transform 0.3s;
      &:hover {
        transform: scale(1.1);
      }
    }
    button {
      padding: unset;
      transition: scale 500ms;
      &:hover .nav-link-icon {
        scale: 0.95;
      }
      &:active .nav-link-icon {
        scale: 1;
      }
    }
  }
  .header-container {
    position: relative;
  }
  .navbar.navbar-center {
    position: relative;
    border-radius: var(--navbar-radius);
    background-color: var(--color-bg-red-50);
    .navbar-collapse.collapse,
    .navbar-collapse.collapsing {
      transition: all 200ms;
      padding-block: 0.5rem;
      &.scroll {
        padding-block: 0.4rem;
      }
      .navbar-nav {
        .nav-item {
          display: grid;
          grid-template-columns: auto auto;
          align-items: center;
          /* gap: 0.25rem; */
          /* border-bottom: 2px solid transparent; */
          .nav-link-underline {
            transition: transform 0.2s ease-in-out;
            border-bottom-width: 2px !important;
            transform: scaleX(0);
            transform-origin: left center;
          }
          &:hover,
          &:has(.nav-link[aria-expanded="true"]),
          &:has(.nav-link:focus-visible) {
            .nav-link-underline {
              transform: scaleX(1);
            }
            /*border-bottom-color: var(--color-text-white);*/
          }
          .nav-link {
            color: var(--color-text-white);
            outline: unset;
            width: fit-content;
            &:hover,
            &:focus {
              background-color: unset;
            }
          }
        }
        .dropdown-mega-menu {
          display: block;
          z-index: -99;
          transition: max-height 0.5s ease-in-out !important;
          &.animate {
            display: block;
            max-height: 0;
            overflow: hidden;
            /* move from .show */
            position: absolute;
            top: 100%;
            inset-inline: 0;
            margin-top: 0;
            margin-inline: auto;
            border: unset;
            border-radius: unset;
            width: calc(100% - var(--navbar-radius));
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
          }
          &.show {
            z-index: 3;
            max-height: var(--mega-menu-height);
          }
          .mega-menu-wrapper {
            display: grid;
            grid-template-columns: 25% 75%;
            & > div {
              max-height: var(--mega-menu-height);
            }
            .mega-menu-container {
              display: grid;
              grid-template-columns: 50% 50%;
              &:not(:has(.dropdown-menu-lv2 .dropdown-item-lv2 .dropdown-item-icon)) {
                grid-template-columns: 100%;
              }
              .sub-menu-content {
                overflow-y: auto;
                min-height: 100%;
                height: calc(var(--nav-lv3-height) + 48px);
                transition: all 0.3s ease-in-out;

                .dropdown-menu-lv3 {
                  position: static;
                  display: block !important;
                }
              }
            }
          }
        }
        .dropdown-menu-lv2 {
          overflow-y: auto;
          .dropdown-item-lv2 {
            & > .dropdown-link {
              /* cursor: pointer; */
              min-height: 38px;
              border-bottom: 2px solid transparent;
              display: grid !important;
              grid-template-columns: auto auto;
              :is(&:hover), :is(&[aria-expanded="true"]) {
                color: var(--color-text-red-50);
                a {
                  color: var(--color-text-red-50);
                }
                .dropdown-item-icon {
                  path {
                    stroke: var(--bs-red-50) !important;
                  }
                }
              }
              :is(&[aria-expanded="true"]) {
                .nav-link-underline {
                  transform: scaleX(1);
                }
              }
              &:not(:has(.dropdown-menu-lv3)) {
                border-bottom-color: transparent !important;
              }
              a {
                outline: unset;
                text-decoration: none;
                color: var(--color-text-black);
              }
              a:focus {
                color: var(--color-text-red-50);
              }
              .nav-link-underline {
                transition: transform 0.3s ease-in-out;
                transform: scaleX(0);
                transform-origin: left center;
                width: 88%;
                left: 8%;
              }
            }
          }
        }
        .dropdown-menu-lv3 {
          margin-top: 0;
          padding: 0;
          border: unset;
          border-radius: unset;
          background-color: unset;
          .dropdown-item-lv3 {
            & > .dropdown-link {
              text-decoration: none;
              color: var(--color-text-black);
              line-height: 1;
              &:hover {
                color: var(--color-text-red);
              }
            }
          }
          @media (min-width: 992px) {
            min-height: calc(var(--nav-lv3-min-height));
            max-height: calc(var(--nav-lv3-min-height));
            overflow: hidden;
            z-index: -99;
            display: block !important;
            left: 0;
            transition: all 0.3s ease-in-out;
            &.show {
              left: 50%;
              z-index: 3;
              max-height: unset;
              overflow: auto;
            }
          }
        }
      }
    }
  }

  @media (max-width: 992px) {
    .dropdown-menu:not(.show) {
      display: unset;
      max-height: 0;
    }
    .dropdown-menu.show {
      max-height: 100dvh;
    }
    .header-container {
      background-color: var(--color-bg-white) !important;
      /* box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); */
    }
    .header-left {
      img {
        max-width: 34px;
        min-width: 34px;
      }
    }
    .navbar.navbar-center {
      border-radius: unset;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      background-color: var(--color-bg-white);
      position: absolute;
      top: 100%;
      inset-inline: 0;
      .navbar-collapse.collapsing,
      .navbar-collapse.collapse {
        padding-block: unset;
        z-index: 8;
        .navbar-nav {
          height: 100%;
          max-height: calc(var(--window-height) - 73.6px);
          overflow-y: auto;
          .nav-item {
            grid-template-columns: auto 16px;
            justify-content: space-between;
            &:not(:last-child) {
              border-bottom: 1px solid var(--color-text-light-grey-de);
            }
            .nav-link {
              color: var(--color-text-red-50);
              & + .nav-link-icon {
                justify-self: flex-end;
                margin-inline-end: 0.5rem;
                transition: rotate 200ms;
                rotate: 90deg;
                &:has(+ .dropdown-mega-menu.show) {
                  rotate: -90deg;
                }
              }
            }
          }
          .dropdown-mega-menu {
            &.animate {
              width: unset;
            }
            &.show {
              position: static;
              grid-column: span 2;
              width: 100%;
              box-shadow: unset;
              max-height: unset;

              .dropdown-menu-lv2 {
                transform: scaleY(1);
                transform-origin: top;
              }
            }
            .mega-menu-wrapper {
              grid-template-columns: 100%;
              & > div {
                max-height: unset;
              }
              .mega-menu-container {
                grid-template-columns: 100%;
              }
            }
            .dropdown-menu-lv2 {
              transform: scaleY(0);
              transform-origin: top;
              transition: transform 0.3s ease-in-out;
            }
          }
          .dropdown-menu-lv2 {
            background-color: var(--color-bg-light-grey-50);
            /* max-height: 40dvh; */
            .dropdown-item-lv2 {
              color: var(--color-text-black);
              border-bottom: 1px solid var(--color-text-white);

              & > .dropdown-link {
                :is(&:hover, &:has(+ .dropdown-menu-lv3.show)) {
                  color: var(--color-text-black);
                  border-bottom-color: var(--color-text-white);
                  a {
                    color: var(--color-text-black);
                  }
                  .dropdown-item-icon {
                    path {
                      stroke: var(--bs-black) !important;
                    }
                  }
                }
                .dropdown-item-icon {
                  justify-self: flex-end;
                  margin-inline-end: 0.5rem;
                  transition: rotate 200ms;
                  rotate: 90deg;
                  path {
                    stroke: var(--bs-gray-50) !important;
                  }
                }
                &.show {
                  .dropdown-item-icon {
                    rotate: -90deg;
                  }
                }
              }
            }
          }
          .dropdown-menu-lv3 {
            &.show {
              position: static;
              grid-column: span 2;
              width: 100%;
              transform: scaleY(1);
              transform-origin: top;
            }

            transform: scaleY(0);
            transform-origin: top;
            transition: all 0.3s ease-in-out;
            background-color: var(--color-bg-gray);

            .dropdown-item-lv3 {
              &:not(:last-child) {
                border-bottom: 1px solid var(--color-text-white);
              }
              &:first-child {
                border-top: 1px solid var(--color-text-white);
              }
              .dropdown-link {
                color: var(--color-text-black) !important;
              }
            }
          }
        }
      }
      .navbar-collapse.show,
      .navbar-search.show {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        & ~ .navbar__backdrop {
          height: 100dvh;
          opacity: 1;
        }
      }
      .navbar__backdrop {
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        inset: 0;
        height: 0;
        opacity: 0;
        transition: opacity 200ms ease-in-out;
        z-index: -1;
      }
    }
    .mega-navbar-toggler {
      .nav-link-icon.menu {
        transition: transform 0.3s ease-in-out;
        transform: translateX(0);
      }
      .nav-link-icon.close {
        transition: all 0.3s ease-in-out;
        transform: translateX(100px);
      }
      &[aria-expanded="true"] {
        .nav-link-icon.menu {
          transform: translateX(100px);
        }
        .nav-link-icon.close {
          transform: translateX(0);
        }
      }
    }
  }
}

.nbtc__region__header {
  background-color: var(--color-bg-red-50);

  &.header__main {
    position: relative;
    .header__left {
      .logo {
        background-color: var(--color-bg-white);
        width: 36px;
        height: 36px;
        object-position: center;
        object-fit: contain;
      }
      .header__info {
        .item-link {
          position: relative;
          color: var(--color-text-white);
          text-decoration: unset;
          &:not(:last-child)::after {
            content: "";
            padding-inline-start: 1rem;
            border-right: 1px solid var(--color-text-white);
          }
        }
      }
    }
    .header__right {
      .btn__back__official {
        &:hover {
          color: var(--color-text-red-50);
          svg {
            .stroke-white {
              stroke: var(--bs-red-50) !important;
            }
          }
        }
      }
      .navbar-lang,
      .navbar-search {
        .nav-link-icon {
          path {
            fill: var(--bs-white) !important;
          }
        }
        &:hover .nav-link-icon {
          scale: 0.95;
        }
        &:active .nav-link-icon {
          scale: 1;
        }
      }
      .navbar-accessibility {
        &:hover .nav-link-icon {
          scale: 0.95;
        }
        &:active .nav-link-icon {
          scale: 1;
        }
        .nav-link-icon {
          .fill-white {
            fill: transparent !important;
          }
          .fill-gray-50 {
            fill: var(--bs-white) !important;
          }
        }
      }
    }
  }
  &.header__secondary {
    position: relative;
    #navbarNavDropdown {
      z-index: 10;
      .navbar-nav {
        .nav-item {
          display: grid;
          grid-template-columns: auto auto;
          align-items: center;
          &.dropdown {
            outline: unset;
          }
          .nav-link {
            padding-block: 0.25rem;
            border-bottom: 2px solid transparent;
            outline: unset;
            color: var(--color-text-black);
            &.active,
            &:hover,
            &[aria-expanded="true"] {
              color: var(--color-text-red-50) !important;
              border-bottom-color: var(--color-text-red-50);
            }
            &.dropdown-toggle {
              &::after {
                all: unset !important;
              }
            }
          }
          .dropdown-menu {
            border: unset;
            padding: 0.5rem;
            margin-top: 0;
            background-color: var(--color-bg-white);
            border: 1px solid var(--color-text-white);
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
            &.dropdown-menu-center {
              max-width: 58px;
              right: auto !important;
              left: 50% !important;
              -webkit-transform: translate(-50%, 0) !important;
              -o-transform: translate(-50%, 0) !important;
              transform: translate(-50%, 0) !important;
            }
            .dropdown-item {
              color: var(--color-text-black);
              padding-inline: 0.5rem;
              white-space: normal;
              &:hover {
                border-radius: 6px;
                background-color: var(--color-bg-dropdown-hover) !important;
              }
            }
          }
        }
      }
    }
    .dropdown-change-lang {
      & .lang-container {
        & .lang-item {
          &.active .lang-label {
            color: var(--color-text-white) !important;
          }
        }
      }
    }
  }
  & ~ .navbar-search {
    &.show,
    &.collapsing {
      background-color: var(--color-bg-white);
      position: absolute;
      top: 0;
      z-index: 12;
      width: calc(100% - 20%);
      inset-inline: 0;
      margin-inline: auto;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    }
  }
  @media (max-width: 992px) {
    background-color: var(--color-bg-red-50);
    &.header__main {
      .header__left {
        .logo {
          width: 50px;
          height: 50px;
        }
        .header__info {
          .item-link {
            &:not(:last-child)::after {
              all: unset;
            }
          }
        }
      }
      .header__right {
        .btn__back__official {
        }
        .navbar-search {
        }
        .btn-navbar-toggler {
          padding-inline: unset;
          .nav-link-icon.menu {
            display: block;
          }
          .nav-link-icon.close {
            display: none;
          }
          &[aria-expanded="true"] {
            .nav-link-icon.menu {
              display: none;
            }
            .nav-link-icon.close {
              display: block;
            }
          }
        }
      }
    }
    &.header__secondary {
      position: relative;
      padding: unset;
      #navbarNavDropdown {
        z-index: 10;
        &.show,
        &.collapsing {
          padding-inline: 0.75rem;
        }
        .navbar-nav {
          .nav-item {
            grid-template-columns: auto 16px;
            justify-content: space-between;
            .nav-link {
              color: var(--color-text-white);
              border-bottom: unset;
              &.active,
              &:hover,
              &[aria-expanded="true"] {
                color: var(--color-text-white) !important;
              }
              & + .nav-link-icon {
                transition: rotate 200ms;
                rotate: 90deg;
                &:has(+ .dropdown-menu-center.show) {
                  rotate: -90deg;
                }
              }
            }
            .dropdown-menu {
              background-color: unset !important;
              box-shadow: unset;
              padding: unset;
              &.dropdown-menu-center {
                border-color: transparent;
                max-width: unset;
                grid-column: span 2;
                right: unset !important;
                left: unset !important;
                -webkit-transform: unset !important;
                -o-transform: unset !important;
                transform: unset !important;
              }
              .dropdown-item {
                color: var(--color-text-white);
                &:hover {
                  color: var(--color-text-black);
                }
              }
            }
          }
        }
      }
    }
    & ~ .navbar-search {
      &.show,
      &.collapsing {
        width: 100%;
        height: fit-content;
      }
    }
  }
}

.nbtc__region__header.override__nbtc__area__header {
  background-color: var(--color-bg-white);
  &.header__main {
    .header__left {
      .logo {
        width: 50px;
        height: 50px;
      }
      .header__info {
        .item-link {
          color: var(--color-text-black);
          &:not(:last-child)::after {
            border-right-color: var(--color-bg-gray-50);
          }
        }
      }
    }
    .header__right {
      .btn__back__official {
        color: var(--color-text-black);
        border-color: var(--color-text-disabled);
        svg {
          .stroke-white {
            stroke: var(--color-text-black) !important;
          }
        }
        &:hover {
          color: var(--color-text-white);
          background-color: var(--color-bg-red-50);
          svg {
            .stroke-white {
              stroke: var(--bs-white) !important;
            }
          }
        }
      }
      .navbar-lang,
      .navbar-search {
        .nav-link-icon {
          path {
            fill: var(--bs-disabled) !important;
          }
        }
      }
      .navbar-accessibility {
        .nav-link-icon {
          .fill-gray-50 {
            fill: var(--bs-disabled) !important;
          }
        }
      }
    }
  }
  & .navbar-search#navbarSearch {
    width: 80%;
  }
  @media (max-width: 992px) {
    background-color: var(--color-bg-white);
    & .navbar-search#navbarSearch {
      width: 100%;
    }
    &.header__secondary {
      #navbarNavDropdown {
        .navbar-nav {
          .nav-item {
            .nav-link {
              color: var(--color-text-black) !important;
            }
            .dropdown-menu {
              .dropdown-item {
                color: var(--color-text-black);
              }
            }
          }
        }
      }
    }
  }
}

.nbtc__region__header ~ .main__content__wrapper {
  --radius-top-content: 86px;
  --radius-top-content-mobile: 25px;
  position: relative;
  overflow: visible !important;
  flex: 1;
  &::before {
    content: "";
    inset: 0;
    position: absolute;
    background-color: var(--color-bg-red-50) !important;
    z-index: 1;
  }
  &::after {
    content: "";
    inset: 0;
    position: absolute;
    background-color: var(--color-bg-white) !important;
    z-index: 2;
    border-top-right-radius: var(--radius-top-content);
    border-top-left-radius: var(--radius-top-content);
  }
  .zone-breadcrumb {
    position: relative;
    z-index: 5;
  }
  .main__content__container {
    position: relative;
    z-index: 5;
    min-height: 100px;
    .main__content__box {
      position: relative;
      z-index: 5;
    }
  }
  @media (max-width: 992px) {
    position: relative;
    &::before {
      all: unset;
    }
    &::after {
      all: unset;
    }
    .main__content__container {
      &::before {
        content: "";
        inset: 0;
        position: absolute;
        background-color: var(--color-bg-red-50) !important;
        z-index: 1;
      }
      &::after {
        content: "";
        inset: 0;
        position: absolute;
        background-color: var(--color-bg-white) !important;
        z-index: 2;
        border-top-right-radius: var(--radius-top-content-mobile);
        border-top-left-radius: var(--radius-top-content-mobile);
      }
      .main__content__box {
        padding-top: 6px;
      }
    }
  }
}
.nbtc__region__header.override__nbtc__area__header ~ .main__content__wrapper {
  overflow: hidden !important;
  &::before {
    all: unset;
  }
  &::after {
    inset-block: 0;
    inset-inline: -10px;
    border-top: 8px solid var(--color-text-red-50) !important;
    border-left: 8px solid var(--color-text-red-50);
    border-right: 8px solid var(--color-text-red-50);
  }
  @media (max-width: 992px) {
    .main__content__container {
      &::before {
        all: unset;
      }
      &::after {
        inset-block: 0;
        inset-inline: -6px;
        border-top: 6px solid var(--color-text-red-50);
        border-left: 6px solid var(--color-text-red-50);
        border-right: 6px solid var(--color-text-red-50);
      }
      .main__content__box {
      }
    }
  }
}

.nbtc__intro__header {
  position: relative;
  .header__right {
    .navbar-search {
      display: none;
    }
    .dropdown-group-search {
      border-radius: 18px;
      width: 324px;
      position: relative;
      box-shadow: 0px 0px 0px 1px var(--color-text-gray) inset;
      &:has(.group-search-group .input__search:focus) {
        border-bottom: unset;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        .group-search-group {
          .icon-search {
            display: block;
          }
          .input__search {
          }
          .btn-search {
            .btn-icon-search {
              display: none;
            }
          }
        }
        .popular-lists {
          display: block;
          border-top: unset;
        }
      }
      .group-search-group {
        .icon-search {
          flex: none;
          display: none;
        }
        .input__search {
          all: unset;
          width: 100%;
        }
        .btn-search {
          all: unset;
          .btn-icon-search {
            flex: none;
            display: block;
          }
        }
      }
      .popular-lists {
        position: absolute;
        text-align: start;
        width: 100%;
        max-height: 50dvh;
        overflow: auto;
        display: none;
        padding: 0.25rem 0.5rem 0.75rem;
        top: calc(100% - 2px);
        border: 1px solid var(--color-text-gray);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: var(--color-bg-white);
        z-index: 5;
      }
    }
  }
  @media (max-width: 992px) {
    .header__right {
      .navbar-search {
        display: block;
      }
      .dropdown-group-search {
        display: none !important;
      }
      .navbar-lang {
        display: block !important;
      }
    }
  }
}

.navbar-search.show,
.navbar-search.collapsing {
  z-index: 15;
  position: absolute !important;
  top: 100%;
  margin-top: unset;
  inset-inline: 0;
  margin-inline: auto;
  width: calc(100% - var(--navbar-radius));
  max-height: 400px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  .search-container {
    max-width: 50%;
    margin-inline: auto;
    max-height: 350px;
    .search-group {
      input {
        border: unset;
        box-shadow: unset;
      }
      .btn-search {
        min-width: 112px;
        height: 36px;
      }
    }
    .popular-search {
      overflow: auto;
      .popular-lists {
        overflow: auto;
        li {
          .list-link {
            /* opacity: 0.8; */
          }
        }
      }
    }
  }
  @media (max-width: 992px) {
    position: static;
    box-shadow: unset;
    width: 100%;
    height: 100dvh;
    max-height: 350px;
    .search-container {
      max-width: 100%;
      height: 100%;
      .popular-search {
        overflow: auto;
        .popular-lists {
          overflow: auto;
        }
      }
    }
  }
}
.dropdown-change-lang {
  min-width: fit-content;
  border: unset;
  padding: 0;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  .lang-container {
    display: flex;
    .lang-item {
      min-width: 56px;
      .lang-label {
        color: var(--color-text-black) !important;
        transition: all 300ms;
        cursor: pointer;
        background: var(--color-bg-light-grey-f2) !important;
        filter: grayscale(100%);
        opacity: 0.5;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        .flag {
          max-width: 34px;
          aspect-ratio: 1 / 1;
        }
      }
      &:hover .lang-label {
        filter: grayscale(10%);
        opacity: 0.8;
      }
      &.active .lang-label {
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        background-color: var(--color-bg-white) !important;
        filter: none;
        opacity: 1;
      }
    }
  }
  @media (max-width: 992px) {
    border: unset;
    padding: 0;
    box-shadow: none;
    .lang-container {
      padding-block: 0.65rem;
      .lang-item {
        min-width: 56px;
        &:not(:last-child) {
          border-right: 1px solid var(--color-text-light-grey-de);
        }
        .lang-label {
          cursor: pointer;
          background-color: unset !important;
          filter: grayscale(50%);
          opacity: 0.5;
          color: #8d8d8d !important;
        }
        &.active .lang-label {
          box-shadow: none;
          color: var(--color-text-black) !important;
          background-color: unset !important;
        }
      }
    }
  }
}
.float-group-button {
  position: fixed;
  right: 0.5rem;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
}
#float-accessibility-section {
  position: relative;
  /* position: fixed;
  right: 0.5rem;
  bottom: 30%;
  z-index: 50; */

  .close-icon {
    position: absolute;
    right: -8px;
    top: -8px;
    cursor: pointer;
  }
  @media (max-width: 992px) {
    .close-icon {
      right: -4px;
      top: -4px;
    }
  }
}
#float-home-section {
  position: relative;
  transform: translateY(62px);
  .close-icon {
    position: absolute;
    right: -8px;
    top: -8px;
    cursor: pointer;
  }
  .btn-icon-home {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--color-text-light-gray-50);
    background-color: var(--color-bg-light-gray-50);
    border-radius: 50%;
  }}
#float-calendar-section {
  position: relative;
  /* position: fixed;
  right: 0.5rem;
  bottom: calc(30% + 60px);
  z-index: 50; */
  .close-icon {
    position: absolute;
    right: -8px;
    top: -8px;
    cursor: pointer;
  }
  .btn-icon-calendar {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--color-text-light-gray-50);
    background-color: var(--color-bg-light-gray-50);
    border-radius: 50%;
  }
  
/* Theme Yellow-Black */
.theme-yellow-black #float-calendar-section .btn-icon-calendar,
.theme-yellow-black #float-home-section .btn-icon-home {
    border-color: yellow;
}

/* Theme White-Black */
.theme-white-black #float-calendar-section .btn-icon-calendar,
.theme-white-black #float-home-section .btn-icon-home {
    border-color: white;
}

/* Theme ปกติ (Base) */
.theme-base #float-calendar-section .btn-icon-calendar,
.theme-base #float-home-section .btn-icon-home {
    border-color: var(--color-text-light-gray-50);
}
  @media (max-width: 992px) {
    bottom: calc(30% + 48px);
    .close-icon {
      right: -4px;
      top: -4px;
    }
  }
}

.modal__accessibility {
  .modal-dialog {
    width: fit-content;
    .modal-content {
      border: unset;
    }
    .modal-body {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      .btn__close {
        position: absolute;
        right: 0.5rem;
        top: 0;
      }
      .color__contrast__wrapper,
      .font__size__wrapper {
        .choice__lists {
          .form-check {
            min-width: 88px;
            width: 100%;
            padding-inline-start: 0;
            .form-check-input {
              display: none;
            }
            .form-check-label {
              cursor: pointer;
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 0.25rem;
              background-color: var(--color-bg-light-grey-ed);
              border-radius: 8px;
              padding: 1rem;
              white-space: nowrap;
              border: 1px solid transparent;

              .btn_change_font_size {
                all: unset;
                height: 36px;
                display: flex;
                align-items: end;
              }
            }
            .form-check-input.active + .form-check-label {
              border-color: var(--color-text-gray-50);
            }
          }
        }
      }
    }
  }
}
.dropdown-accessibility {
  --bg-dropdown-accessibility: var(--color-bg-light-grey-f2)!important;
  --bg-accessibility-idle: #cecece;
  --bg-accessibility-active: #252628;
  /* background-color: var(--color-bg-light-grey-f2); */
  border: unset;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  .color__contrast__wrapper,
  .font__size__wrapper {
    /* background-color: var(--color-bg-white); */
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    .icon__contrast {
      cursor: pointer;
      &.mix {
        display: none;
        &:not(:has(~ .color__contrast .form-check-input.active)),
        &:has(~ .color__contrast .form-check-input[value="mix"].active) {
          display: block;
        }
      }
      &.black__white {
        display: none;
        &:has(~ .color__contrast .form-check-input[value="blackWhite"].active) {
          display: block;
        }
      }
      &.black__yellow {
        display: none;
        &:has(
            ~ .color__contrast .form-check-input[value="blackYellow"].active
          ) {
          display: block;
        }
      }
    }

    .form-check {
      min-height: auto;
      padding: unset;
      .form-check-input {
        display: none;
        &.active + .form-check-label {
          color: var(--color-text-red-50);
          &::after {
            background-color: var(--bg-accessibility-active);
          }
        }
      }
      .form-check-label {
        width: 23px;
        height: 2px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          background-color: var(--bg-accessibility-idle);
          bottom: 0;
          border-radius: 2px;
        }
      }
    }
  }
  .font__size__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: self-end;
    column-gap: 0.25rem;
    .btn_change_font_size {
      all: unset;
      cursor: pointer;
    }
    .current__font__size {
      grid-column: span 3;
    }
  }
  @media (max-width: 992px) {
    display: none !important;
  }
}

.breadcrumb-item + .breadcrumb-item::before {
    content: " > ";     
}

.btn__back__official {
    height: 30px;
    line-height: 30px;
    gap: 4px;
}