/*

CD = 03062024

LU = 

==================================

Editor:

1.recca

2.

3.

==================================

Index:

1.html

2.

3.

4.

5.

6.

7.

8.

9.

10.

=================================*/

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&family=Noto+Sans+SC:wght@100..900&display=swap");

:root {

  --btn-search: rgba(90,172,133,1);

  --btn-search-h: rgba(26,144,88,1);

  --nav-grad-blue: linear-gradient(90deg, rgba(10,96,175,1) 0%, rgba(127,212,223,1) 100%);

  --nav-grad-green: linear-gradient(90deg, rgba(193,216,86,1) 0%, rgba(140,164,0,1) 100%);

  --nav-grad-green075: linear-gradient(90deg, rgba(193,216,86,0.75) 0%, rgba(140,164,0,0.75) 100%);

  --c-white: rgba(255,255,255,1);

  --c-black: rgba(0,0,0,1);

  --c-black25: rgba(0,0,0,0.25);

  --c-black75: rgba(0,0,0,0.75);

  --c-777: rgba(119,119,119,1);

  --c-333: rgba(51,51,51,1);

  --c-ccc: rgba(204,204,204,1);

  --c-eee: rgba(238,238,238,1);

  --c-subgreen: rgba(199,220,171,1);

  --c-footergreen: rgba(53,115,105,1);

  --c-footergreen-h: rgba(13,83,72,1);

  --c-212529: rgba(33,37,41,1);

  --c-danger: rgba(209,76,76,1);

  --c-paging-a: rgba(0,110,51,1);

  --c-paging-a-h: rgba(0,110,51,1);

  --box-inside-banner: rgba(235,242,233,1);

  --box-bg-lightyalo: rgba(251,249,236,1);

  --box-shadow: rgba(0,23,49,0.15);

  --f-12-8px: 0.8rem;

  --f-12px: 0.75rem;

  --f-14px: 0.875rem;

  --f-16px: 1rem;

  --f-17px: 1.0625rem;

  --f-18px: 1.125rem;

  --f-19px: 1.1875rem;

  --f-20px: 1.25rem;

  --f-22px: 1.375rem;

  --f-24px: 1.5rem;

  --f-26px: 1.625rem;

  --f-36px: 2.25rem;

  --f-50px: 3.125rem;

  --f-80px: 5rem;

  --fw-100: 100;

  --fw-200: 200;

  --fw-300: 300;

  --fw-400: 400;

  --fw-500: 500;

  --fw-600: 800;

  --fw-700: 700;

  --fw-800: 800;

  --fw-900: 900; }



/* html =========================*/

html[lang="zh-hk"] body {

  font-family: "Noto Sans HK", sans-serif; }



html[lang="en-us"] body {

  font-family: "Noto Sans HK", sans-serif; }



html[lang="zh-cn"] body {

  font-family: "Noto Sans SC", sans-serif; }



body {

  font-optical-sizing: auto;

  font-weight: 500;

  font-style: normal;

  font-size: var(--f-16px);

  min-width: 320px; }

  body.opNav {

    overflow: hidden; }



a {

  outline: none;

  text-decoration: none; }



section {

  outline: none; }



h1, .h1, h2, .h2, h3, .h3, h4, .h4 {

  font-weight: bold; }



h1, .h1 {

  font-size: var(--f-48px); }



h2, .h2 {

  font-size: var(--f-36px); }

  @media (max-width: 767.98px) {

    h2, .h2 {

      font-size: var(--f-28px); } }



h3, .h3 {

  font-size: var(--f-24px); }

  @media (max-width: 767.98px) {

    h3, .h3 {

      font-size: var(--f-17px); } }



h4, .h4 {

  font-size: var(--f-16px);

  font-weight: bold; }

  @media (max-width: 767.98px) {

    h4, .h4 {

      font-size: var(--f-14px); } }



/* header ======================*/

.skipToContent {

  position: absolute;

  top: -100000px; }



.headsearch {

  display: block;

  height: 0%;

  position: absolute;

  top: 0%;

  opacity: 0;

  width: 100%;

  z-index: -1;

  transition: .2s all linear; }

  .headsearch .search-container {

    position: relative;

    top: 50%;

    transform: translateY(-50%); }

    .headsearch .search-container .container {

      position: relative;

      padding-top: 40px; }

      .headsearch .search-container .container > button {

        color: var(--c-white);

        position: absolute;

        right: 20px;

        top: 0px; }

  .headsearch.show {

    background: var(--c-black75);

    height: 100%;

    opacity: 1;

    z-index: 1021; }



header {

  background-color: var(--c-white);

  padding-left: 30px;

  padding-right: 30px;

  z-index: 20; }

  header .nav-item {

    margin-left: 10px;

    margin-right: 10px;

    position: relative;

    transition: .2s margin linear; }

  header .nav-link {

    color: var(--c-333);

    padding-left: 5px !important;

    padding-right: 5px !important; }

    header .nav-link::after {

      background: linear-gradient(90deg, #c1d856 0%, #8ca400 100%);

      bottom: 0px;

      content: "";

      height: 2px;

      position: absolute;

      right: 0px;

      width: 0px;

      transition: .3s all linear; }

    header .nav-link:hover::after {

      left: 0px;

      width: 100%; }

  header .box-NAVtools {

    position: relative; }

    header .box-NAVtools::before {

      background-color: var(--c-333);

      display: block;

      content: "";

      height: 30px;

      left: 0px;

      position: absolute;

      top: 50%;

      transform: translateY(-50%);

      width: 1px;

      transition: .2s all linear; }

    header .box-NAVtools .dropdown {

      display: inline-block; }

      @media (max-width: 991.98px) {

        header .box-NAVtools .dropdown {

          max-width: 34px; } }

    header .box-NAVtools .dropdown-menu {

      min-width: inherit !important;

      text-align: center; }



.btn-icon {

  margin: 0px 2.5px;

  padding: var(--bs-btn-padding-y) 5px !important; }

  .btn-icon:first-child {

    margin-left: 15px; }

  .btn-icon:last-child {

    margin-right: 0px; }

    @media (max-width: 991.98px) {

      .btn-icon:last-child {

        margin-right: 2.5px; } }

  .btn-icon:active {

    border: none; }



.btn-icon-goble, .btn-icon-phone, .btn-icon-search {

  background-color: #333;

  display: block;

  mask: url("../images/globe.svg");

  mask-size: cover;

  height: 24px;

  width: 24px; }

  .btn-icon-goble:hover, .btn-icon-phone:hover, .btn-icon-search:hover {

    background: var(--nav-grad-green); }



.btn-icon-phone {

  mask: url("../images/phone.svg"); }



.btn-icon-search {

  mask: url("../images/search.svg"); }



@media (max-width: 1200.98px) {

  header .nav-item {

    margin-left: 5px;

    margin-right: 5px; } }

@media (max-width: 991.98px) {

  .nav-Mbg {

    background-color: var(--c-white);

    content: "";

    display: block;

    height: 0vh;

    left: 0px;

    position: fixed;

    top: 0px;

    width: 100vw;

    z-index: 100;

    transition: .2s all linear; }

    .nav-Mbg.opNav {

      height: 100vh; }



  header .box-NAVtools {

    margin-right: 2.5px; }

    header .box-NAVtools::before {

      display: none; }



  .btn-icon {

    margin: 0px 2.5px;

    padding: var(--bs-btn-padding-y) 5px !important; }

    .btn-icon:first-child {

      margin-left: 0px; }



  #navbarNavDropdown {

    left: 0px;

    position: absolute;

    top: 80px;

    width: 100%;

    z-index: 2; }

    #navbarNavDropdown .navbar-nav {

      position: relative;

      z-index: 4; }

      #navbarNavDropdown .navbar-nav .nav-item, #navbarNavDropdown .navbar-nav a {

        text-align: center; }

        #navbarNavDropdown .navbar-nav .nav-item .nav-link::after, #navbarNavDropdown .navbar-nav a .nav-link::after {

          display: none !important; }

        #navbarNavDropdown .navbar-nav .nav-item .nav-link.show, #navbarNavDropdown .navbar-nav a .nav-link.show {

          color: var(--btn-search); } }

@media (max-width: 767.98px) {

  header {

    padding-left: 15px;

    padding-right: 15px; } }

/* footer ======================*/

footer {

  border-top: 3px var(--c-subgreen) solid;

  color: var(--c-333);

  font-weight: 400; }

  footer .copyright {

    padding: 5px 20px; }

    footer .copyright .col-auto {

      align-content: center; }

  footer .navbar-nav {

    flex-direction: row; }

    footer .navbar-nav .nav-item {

      margin: 0px 15px;

      padding: 10px 0px; }

      footer .navbar-nav .nav-item:first-child {

        margin-left: 0px; }

      footer .navbar-nav .nav-item:last-child {

        margin-right: 0px; }

      footer .navbar-nav .nav-item a {

        color: var(--c-footergreen);

        transition: .2s all linear; }

        footer .navbar-nav .nav-item a:hover {

          color: var(--c-footergreen-h); }

  footer .sitemap .accordion-item {

    background-color: transparent;

    border: none;

    border-radius: 0px; }

    footer .sitemap .accordion-item .accordion-button {

      background-color: transparent;

      color: var(--c-footergreen);

      /*cursor: inherit;*/

      font-size: var(--f-18px);

      padding: 0px;

      position: relative; }

      footer .sitemap .accordion-item .accordion-button:focus {

        box-shadow: none; }

      footer .sitemap .accordion-item .accordion-button:not(.collapsed) {

        box-shadow: inset 0 calc(0 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); }

        footer .sitemap .accordion-item .accordion-button:not(.collapsed)::after {

          background-image: none;

          transform: var(--bs-accordion-btn-icon-transform);

          display: none; }

        footer .sitemap .accordion-item .accordion-button:not(.collapsed) i {

          transform: rotate(135deg); }

      footer .sitemap .accordion-item .accordion-button::after {

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' path d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'");

        transition: .2s all linear;

        display: none; }

      footer .sitemap .accordion-item .accordion-button i {

        display: none;

        position: absolute;

        right: 0px;

        transition: .2s all linear; }

    footer .sitemap .accordion-item .accordion-body {

      padding: 0px; }

      footer .sitemap .accordion-item .accordion-body ul {

        margin-left: 0px;

        padding-left: 0px; }

        footer .sitemap .accordion-item .accordion-body ul li {

          padding: 5px 0px; }

          footer .sitemap .accordion-item .accordion-body ul li a {

            color: var(--c-333);

            display: block; }



@media (max-width: 991.98px) {

  footer .col-auto {

    text-align: center;

    width: 100%; }

  footer .navbar-nav {

    display: block;

    flex-direction: inherit;

    justify-content: center;

    width: 100%; }

    footer .navbar-nav .nav-item {

      display: inline-block;

      margin: 0px 15px;

      padding: 0px 0px; } }

@media (max-width: 767.98px) {

  footer .sitemap .accordion-item {

    border-bottom: 1px var(--btn-search) solid; }

    footer .sitemap .accordion-item .accordion-button {

      cursor: pointer;

      font-weight: 700;

      padding-top: 10px;

      padding-bottom: 10px; }

      footer .sitemap .accordion-item .accordion-button i {

        display: block;

        position: absolute;

        right: 0px;

        transition: .2s all linear; }

    footer .sitemap .accordion-item .accordion-body ul li {

      padding: 0px 0px; }

      footer .sitemap .accordion-item .accordion-body ul li a {

        padding: 5px 0px; } }

/* main ========================*/

.text-tc {

  font-family: "Noto Sans HK", sans-serif; }



.text-en {

  font-family: "Noto Sans HK", sans-serif; }



.text-sc {

  font-family: "Noto Sans SC", sans-serif; }



.bannerSearch-wrap {

  margin: auto;

  max-width: 1300px;

  position: relative; }

  .bannerSearch-wrap .bannerSearch {

    background: #fff;

    border-radius: 30px;

    display: flex;

    flex-wrap: nowrap;

    margin-top: 28px;

    position: relative;

    width: 100%; }

    .bannerSearch-wrap .bannerSearch .bannerSearch-item {

      flex-basis: 0;

      flex-grow: 1;

      max-width: calc(( 100% - 8em ) / 2); }

      .bannerSearch-wrap .bannerSearch .bannerSearch-item:first-child {

        padding-left: 24px; }

      .bannerSearch-wrap .bannerSearch .bannerSearch-item .mainSearch-field {

        align-content: center;

        height: 100%;

        width: 100%; }

        .bannerSearch-wrap .bannerSearch .bannerSearch-item .mainSearch-field .mainSearch-fakeBtn {

          border: 0;

          background-color: transparent;

          height: 4rem;

          overflow: hidden;

          padding-left: 20px;

          padding-right: 15px;

          position: relative;

          text-align: left;

          width: 100%;

          white-space: nowrap; }

        .bannerSearch-wrap .bannerSearch .bannerSearch-item .mainSearch-field .mainSearch-selected {

          display: block;

          margin-right: 5px;

          overflow: hidden;

          text-overflow: ellipsis;

          width: 100%; }

          .bannerSearch-wrap .bannerSearch .bannerSearch-item .mainSearch-field .mainSearch-selected .selectedItem::after {

            content: ", "; }

          .bannerSearch-wrap .bannerSearch .bannerSearch-item .mainSearch-field .mainSearch-selected .selectedItem:last-child::after {

            content: ""; }

      .bannerSearch-wrap .bannerSearch .bannerSearch-item + .bannerSearch-item {

        border-left: 1px solid #ddd; }

    .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl {

      border: none;

      flex: 0 0 auto;

      max-width: 100%;

      overflow: hidden;

      width: auto; }

      .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl .btn {

        align-items: center;

        display: flex;

        height: 100%;

        justify-content: center;

        width: calc(8em + 1px); }

        .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl .btn:last-child {

          border-radius: 0px;

          border-top-right-radius: 30px;

          border-bottom-right-radius: 30px;

          display: block; }



#mainBanner {

  height: 100vh;

  height: calc(var(--vh, 1vh) * 100 - 56px);

  min-height: 600px;

  position: relative;

  width: 100%;

  background-color: #ccc; }

  #mainBanner .mainBanner-wrapper {

    height: 100%;

    position: absolute;

    width: 100%; }

    #mainBanner .mainBanner-wrapper .mainBanner-item {

      background-color: #fff;

      background-image: url("../images/temp/banner.jpg");

      background-size: cover;

      background-position: center;

      height: 100vh;

      height: calc(var(--vh, 1vh) * 100);

      min-height: 600px;

      position: absolute;

      width: 100%; }

      #mainBanner .mainBanner-wrapper .mainBanner-item .banner-info > div {

        width: 100%; }

      #mainBanner .mainBanner-wrapper .mainBanner-item .text {

        display: block;

        margin: auto;

        max-width: 90%;

        margin-bottom: 10vh;

        text-align: left;

        width: 550px; }

  #mainBanner .homebanner-content {

    left: 0px;

    position: absolute;

    top: 50%;

    width: 100%;

    z-index: 10;

    transform: translateY(-50%); }

    #mainBanner .homebanner-content .container {

      position: relative; }

    #mainBanner .homebanner-content .title .titleFirst h1 {

      font-size: var(--f-20px);

      /*margin-bottom: 20px;*/ }

      #mainBanner .homebanner-content .title .titleFirst h1 br {

        height: 0px;

        margin-bottom: 7px; }

    #mainBanner .homebanner-content .title .titleSecond {

      font-size: var(--f-80px); }

      #mainBanner .homebanner-content .title .titleSecond .animate-typing2 {

        background-image: url("../images/text-underline.svg");

        background-position: left bottom;

        background-repeat: no-repeat;

        background-size: 90%;

        color: var(--btn-search); }

    #mainBanner .homebanner-content .homebanner-nav {

      margin-top: 50px; }

      #mainBanner .homebanner-content .homebanner-nav .btn-check + .btn {

        transition: .2s all linear; }

      #mainBanner .homebanner-content .homebanner-nav .btn-check:checked + .btn, #mainBanner .homebanner-content .homebanner-nav .btn-check .btn.active, #mainBanner .homebanner-content .homebanner-nav .btn-check .btn.show, #mainBanner .homebanner-content .homebanner-nav .btn-check .btn:first-child:active, #mainBanner .homebanner-content .homebanner-nav .btn-check:not(.btn-check) + .btn:active {

        color: var(--c-white);

        background: var(--nav-grad-blue) !important;

        border-color: none !important; }

      #mainBanner .homebanner-content .homebanner-nav label {

        background: var(--c-white);

        border: none;

        border-radius: 90px;

        color: var(--c-333);

        padding: 10px 25px;

        margin-right: 15px; }

        #mainBanner .homebanner-content .homebanner-nav label:last-child {

          margin-right: 0px; }



#insidebanner {

  background-color: var(--box-inside-banner);

  background-repeat: no-repeat;

  height: 200px;

  padding-top: 22px;

  position: relative; }

  #insidebanner.wm, #insidebanner.tcm, #insidebanner.dentisit, #insidebanner.chiropractor {

    background-image: url(../images/inside-banner/bg-wm.png);

    background-blend-mode: darken;

    background-position: 85.9490% top; }

  #insidebanner.tcm {

    background-image: url(../images/inside-banner/bg-tcm.png); }

  #insidebanner.dentisit {

    background-image: url(../images/inside-banner/bg-dentisit.png); }

  #insidebanner.chiropractor {

    background-image: url(../images/inside-banner/bg-chiropractor.png); }

  @media (max-width: 767.98px) {

    #insidebanner {

      height: 150px;

      padding-top: 15px; } }



.breadcrumb {

  color: var(--c-555);

  font-size: var(--f-12-8px); }

  .breadcrumb a {

    color: var(--c-555); }



#search {

  margin-bottom: 80px;

  margin-top: -27px;

  position: relative; }

  #search .mainBanner-overlay {

    /*left: 0px;

    position: absolute;

    top: 100%;

    transform: translateY(-50%);*/

    width: 100%; }

    #search .mainBanner-overlay .bannerSearch-wrap .bannerSearch {

      box-shadow: 0 0 21px 0px var(--c-black25);

      margin-top: 0px; }



.dr-bg {

  background-attachment: fixed;

  background-image: url("../images/blurred-common-room 1.jpg");

  background-size: cover;

  background-position: top center;

  background-repeat: no-repeat; }



.color-bg {

  background-color: var(--box-inside-banner); }



#info {

  margin-top: 80px; }

  #info a {

    color: var(--c-555); }



.box-info {

  background-color: var(--c-white);

  border-radius: 20px;

  padding: 27px 20px 40px 20px; }

  .box-info .doc-cover {

    border-radius: 100px;

    height: 0px;

    margin-top: -90px;

    overflow: hidden;

    padding-top: 100%;

    position: relative;

    width: 180px; }

    .box-info .doc-cover img {

      left: 50%;

      position: absolute;

      top: 0px;

      width: 100%;

      transform: translateX(-50%); }

  .box-info .box-doc-info-name {

    font-size: var(--f-26px); }

  .box-info .name-en {

    font-size: var(--f-22px); }

  .box-info .box-doc-info-type span {

    display: inline-block;

    margin-right: 20px; }

    .box-info .box-doc-info-type span:last-child {

      margin-right: 0px; }

.box-info .box-doc-info-type a {

  display: inline-block;

  margin-right: 20px; }

.box-info .box-doc-info-type a:last-child {

  margin-right: 0px; }

  .box-info .box-doc-info-date {

    color: var(--c-777); }

  .box-info .icon-group span {

    background-position: left center;

    background-repeat: no-repeat;

    margin-right: 20px;

    padding-left: 28px; }

    .box-info .icon-group span.nightwork {

      background-image: url("../images/icon_nw.png"); }

    .box-info .icon-group span.voucher {

      background-image: url("../images/icon_doc.png"); }

    .box-info .icon-group span.ehealth {

      background-image: url("../images/icon_eh.png"); }

    .box-info .icon-group span:last-child {

      margin-right: 0px; }

  .box-info .box-doc-hour p {

    background-image: url("../images/clock.svg");

    background-repeat: no-repeat;

    background-size: 20px 20px;

    background-position: 0px 3px;

    padding-left: 25px; }

  .box-info .btn-map {

    align-items: center;

    background-image: url("../images/bg_map.jpg");

    background-repeat: no-repeat;

    display: flex;

    height: 66px;

    justify-content: center;

    width: 66px; }

  .box-info h2 {

    color: var(--btn-search); }

    .box-info h2.h4 {

      position: relative; }

      .box-info h2.h4::before {

        background-repeat: no-repeat;

        content: "";

        display: block;

        height: 24px;

        left: -25px;

        position: absolute;

        width: 20px; }

    .box-info h2.icon-address::before {

      background-image: url("../images/map-pin-green.svg"); }

    .box-info h2.icon-contact::before {

      background-image: url("../images/phone-green.svg"); }

    .box-info h2.icon-hours::before {

      background-image: url("../images/clock-green.svg"); }

    .box-info h2.icon-cart::before {

      background-image: url("../images/cart-green.svg"); }

    .box-info h2.icon-info::before {

      background-image: url("../images/info-green.svg"); }

    .box-info h2.icon-place::before {

      background-image: url("../images/place-green.svg"); }



#toolsbox .btn-round {

  --bs-btn-padding-x: 0.75rem;

  --bs-btn-padding-y: 0.375rem;

  display: inline-flex;

  padding: 10px 5px; }

  #toolsbox .btn-round i {

    background-color: var(--btn-search);

    border-radius: 90px;

    display: inline-block;

    height: 24px;

    margin-right: 5px;

    position: relative;

    width: 24px; }

    #toolsbox .btn-round i::before {

      color: var(--c-white);

      display: block;

      left: 50%;

      position: absolute;

      top: 50%;

      transform: translateX(-50%) translateY(-50%); }

#toolsbox .btn-report {

  background-color: var(--btn-search);

  border-radius: 90px;

  color: var(--c-white);

  display: flex;

  justify-content: space-between;

  min-width: 170px;

  padding: 10px 20px; }



.result {

  font-size: var(--f-17px);

  margin-bottom: 15px; }

  .result .icon-group span {

    background-position: left center;

    background-repeat: no-repeat;

    margin-right: 20px;

    padding-left: 28px; }

    .result .icon-group span.nightwork {

      background-image: url("../images/icon_nw.png"); }

    .result .icon-group span.voucher {

      background-image: url("../images/icon_doc.png"); }

    .result .icon-group span.ehealth {

      background-image: url("../images/icon_eh.png"); }

    .result .icon-group span:last-child {

      margin-right: 0px; }

  @media (max-width: 767.98px) {

    .result {

      font-size: var(--f-14px); }

      .result .icon-group span {

        margin-right: 10px;

        padding-left: 25px; } }



.drlist ul {

  list-style-type: none;

  padding: 0px; }

  .drlist ul li {

    border-bottom: 1px var(--c-ccc) solid;

    padding: 20px 10px; }

    .drlist ul li a {

      color: var(--c-555); }

    .drlist ul li p {

      min-height: 25px;

      margin-bottom: 0.125rem; }

      @media (max-width: 991.98px) {

        .drlist ul li p {

          margin-bottom: 0.3rem; }

          .drlist ul li p br {

            position: absolute;

            display: none; } }

    .drlist ul li .doc-cover {

      border-radius: 90px;

      display: block;

      height: 0px;

      overflow: hidden;

      padding-top: 90px;

      position: relative;

      width: 90px;

      transition: .2s all linear; }

      .drlist ul li .doc-cover img {

        position: absolute;

        top: 0px;

        left: 0px;

        width: 100%; }

      @media (max-width: 767.98px) {

        .drlist ul li .doc-cover {

          padding-top: 60px;

          width: 60px; } }

    .drlist ul li .box-doc .box-doc-info {

      margin-bottom: 0.5rem; }

      .drlist ul li .box-doc .box-doc-info .box-doc-info-name {

        font-size: var(--f-19px); }

      .drlist ul li .box-doc .box-doc-info .box-doc-info-type span, .drlist ul li .box-doc .box-doc-info .box-doc-info-icon span {

        margin-right: 20px;

      }

.drlist ul li .box-doc .box-doc-info .box-doc-info-type span img, .drlist ul li .box-doc .box-doc-info .box-doc-info-icon span img {

  max-width: 20px;

  max-height: 20px;

}

        .drlist ul li .box-doc .box-doc-info .box-doc-info-type span:last-child, .drlist ul li .box-doc .box-doc-info .box-doc-info-icon span:last-child {

          margin-right: 0px; }

    .drlist ul li .box-doc .box-doc-address .icon-map, .drlist ul li .box-doc .box-doc-address .icon-phone {

      background-image: url("../images/map-pin-black.svg");

      background-repeat: no-repeat;

      background-size: 20px 20px;

      background-position: 0px 3px;

      padding-left: 25px; }

    .drlist ul li .box-doc .box-doc-address .icon-phone {

      background-image: url("../images/phone.svg"); }

    .drlist ul li .box-doc .box-doc-hour p {

      background-image: url("../images/clock.svg");

      background-repeat: no-repeat;

      background-size: 20px 20px;

      background-position: 0px 3px;

      padding-left: 25px; }

    @media (max-width: 767.98px) {

      .drlist ul li .box-doc {

        font-size: var(--f-14px); }

        .drlist ul li .box-doc .box-doc-address .icon-map, .drlist ul li .box-doc .box-doc-address .icon-phone {

          background-position: 0px 0px; }

        .drlist ul li .box-doc .box-doc-hour {

          font-size: var(--f-12px); }

          .drlist ul li .box-doc .box-doc-hour p {

            background-position: 0px 0px; } }

    .drlist ul li:first-child {

      border-top: 1px var(--c-ccc) solid; }



.btn-search {

  background-color: var(--btn-search);

  color: var(--c-white); }

  .btn-search img {

    margin-left: 1rem; }

  .btn-search:hover {

    background-color: var(--btn-search-h);

    color: var(--c-white); }



.btn-bluewhite {

  background: var(--c-white);

  border: 0px;

  border-radius: 90px;

  color: var(--c-333);

  transition: .2s all linear; }

  .btn-bluewhite.active {

    background: var(--nav-grad-blue);

    color: var(--c-white); }



.btn-more {

  background-color: var(--btn-search);

  border-radius: 90px;

  color: var(--c-white);

  display: inline-block;

  min-width: 170px;

  padding: 10px 20px;

  text-align: center;

  transition: .2s all linear; }

  .btn-more:hover {

    background-color: var(--btn-search-h); }



.box-group-filter .button-left, .box-group-filter .button-right {

  display: none; }



.group-filter {

  border: 0px;

  border-radius: 90px;

  box-shadow: 0px 0px 20px var(--box-shadow);

  max-width: 910px;

  margin: auto;

  padding: 10px 22px; }



.no-focus:focus {

  color: var(--bs-body-color);

  background-color: var(--bs-body-bg);

  border-color: #86b7fe;

  outline: 0;

  box-shadow: none !important; }



.nolst li {

  list-style-type: none; }



.show-991 {

  display: none; }



.fw-100 {

  font-weight: var(--fw-100); }



.fw-200 {

  font-weight: var(--fw-200); }



.fw-300 {

  font-weight: var(--fw-300); }



.fw-400 {

  font-weight: var(--fw-400); }



.fw-500 {

  font-weight: var(--fw-500); }



.fw-600 {

  font-weight: var(--fw-600); }



.fw-700 {

  font-weight: var(--fw-700); }



.fw-800 {

  font-weight: var(--fw-800); }



.fw-900 {

  font-weight: var(--fw-900); }



.fs-36px {

  font-size: var(--f-36px); }



.c-maingreen {

  color: var(--btn-search); }



.c-dayoff {

  color: var(--c-danger); }



.c-ccc {

  color: var(--c-ccc); }



.bg-lightyalo {

  background-color: var(--box-bg-lightyalo); }



.mt-40px {

  margin-top: 40px; }



.pt-70px {

  padding-top: 70px; }



.py-60px {

  padding-bottom: 60px;

  padding-top: 60px; }



.py-70px {

  padding-bottom: 70px;

  padding-top: 70px; }



.lable-today {

  background-color: var(--c-danger);

  border-radius: 4px;

  color: var(--c-white);

  padding: 2px 8px;

  font-size: 0.8em;

  text-wrap: nowrap;

}



.searchCheckList {

  max-height: 50vh;

  overflow: hidden;

  overflow-y: auto; }

  .searchCheckList .checkItem {

    cursor: pointer;

    margin-bottom: 1rem;

    padding-left: 20px;

    position: relative;

    width: 100%; }

    .searchCheckList .checkItem input {

      cursor: pointer;

      height: 0;

      opacity: 0;

      position: absolute;

      width: 0; }

      .searchCheckList .checkItem input:checked ~ .tick::after {

        border-color: #81D3AA;

        border-style: solid;

        border-width: 0 0.26em 0.26em 0;

        content: "";

        display: block;

        height: 1em;

        width: 0.5em;

        transform: rotate(45deg); }

    .searchCheckList .checkItem .tick {

      display: inline-block;

      left: 4px;

      position: absolute;

      top: 3px; }



.card-cover {

  border-radius: 15px;

  height: 0px;

  overflow: hidden;

  padding-top: 66.442953%;

  position: relative;

  width: 100%; }

  .card-cover img {

    min-height: 100%;

    left: 50%;

    position: absolute;

    top: 0%;

    width: 100%;

    transform: translateX(-50%); }



.card-ad .card-cover {

  border-radius: 0px;

  padding-top: 100%; }



#paging {

  padding: 20px; }

  #paging .pagination {

    justify-content: center; }

    #paging .pagination .page-link {

      border: none;

      color: var(--c-paging-a); }

      #paging .pagination .page-link:hover {

        color: var(--btn-search);

        background-color: transparent;

        border-color: transparent; }

      #paging .pagination .page-link:focus, #paging .pagination .page-link.active {

        color: var(--btn-search);

        background-color: transparent;

        box-shadow: none; }



@media screen and (max-width: 991.98px) {

  .bannerSearch-wrap .bannerSearch {

    background: transparent;

    display: block; }

    .bannerSearch-wrap .bannerSearch .bannerSearch-item {

      background-color: var(--c-white);

      border-radius: 90px;

      max-width: 100% !important;

      margin-bottom: 7px;

      padding: 0px; }

      .bannerSearch-wrap .bannerSearch .bannerSearch-item:first-child {

        padding: 12px 20px; }

      .bannerSearch-wrap .bannerSearch .bannerSearch-item .mainSearch-field .mainSearch-fakeBtn {

        border: 0;

        background-color: transparent;

        height: 4rem;

        overflow: hidden;

        padding-left: 20px;

        padding-right: 15px;

        position: relative;

        text-align: left;

        width: 100%;

        white-space: nowrap; }

      .bannerSearch-wrap .bannerSearch .bannerSearch-item + .bannerSearch-item {

        border: none; }

    .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl .btn {

      padding: 16px 0px;

      width: 100%; }

      .bannerSearch-wrap .bannerSearch .bannerSearch-buttonControl .btn:last-child {

        border-radius: 30px; }



  #search .mainBanner-overlay {

    background-color: var(--c-white);

    border-radius: 25px;

    box-shadow: 0 0 21px 0px var(--c-black25); }

    #search .mainBanner-overlay > .mainSearch-fakeBtn {

      background-color: transparent;

      border: 0;

      border-radius: 25px 25px 0px 0px;

      height: 3.4375rem;

      overflow: hidden;

      padding-left: 20px;

      padding-right: 15px;

      position: relative;

      text-align: center;

      width: 100%;

      white-space: nowrap;

      transition: .2s all linear; }

      #search .mainBanner-overlay > .mainSearch-fakeBtn:not(.collapsed) {

        background-color: var(--c-eee); }

      #search .mainBanner-overlay > .mainSearch-fakeBtn img {

        margin-top: -3px;

        width: 20px; }

    #search .mainBanner-overlay .bannerSearch-wrap {

      padding-bottom: 20px; }

      #search .mainBanner-overlay .bannerSearch-wrap .bannerSearch {

        box-shadow: 0 0 0px 0px var(--c-black25) !important;

        margin-top: 0px; }

        #search .mainBanner-overlay .bannerSearch-wrap .bannerSearch .bannerSearch-item {

          background-color: transparent;

          border-radius: 0px;

          margin-bottom: 0px; }

      #search .mainBanner-overlay .bannerSearch-wrap .bannerSearch-buttonControl {

        margin: 0 20px; }

        #search .mainBanner-overlay .bannerSearch-wrap .bannerSearch-buttonControl .btn:last-child {

          border-radius: 0px; }



  .show-991 {

    display: inherit; }



  .hidden-991 {

    display: none; }



  .medidata .container, #sickdata .container, #volunteer .container {

    max-width: 900px; } }

@media screen and (max-width: 767.98px) {

  #mainBanner .homebanner-content .title .titleFirst h1 {

    font-size: var(--f-16px); }

  #mainBanner .homebanner-content .title .titleSecond {

    font-size: var(--f-50px); }



  .swiper-root {

    margin-left: 20px; }



  .medidata .container, #sickdata .container, #volunteer .container {

    max-width: 100% !important;

    padding-left: 0px;

    padding-right: 0px;

  }

    .medidata .container .swiper-button-prev, .medidata .container .swiper-button-next, #sickdata .container .swiper-button-prev, #sickdata .container .swiper-button-next, #volunteer .container .swiper-button-prev, #volunteer .container .swiper-button-next {

      display: none; }



  .box-group-filter {

    box-shadow: 0px 0px 20px var(--box-shadow);

    border-radius: 90px;

    padding: 10px 20px;

    position: relative;

    width: 100%; }



    .box-group-filter .button-left, .box-group-filter .button-right {

      background: var(--c-777);

      border: 0px;

      border-radius: 18px;

      color: var(--c-white);

      display: block;

      height: 36px;

      position: absolute;

      width: 36px; }

    .box-group-filter .button-left {

      left: 10px; }

    .box-group-filter .button-right {

      right: 10px; }

    .box-group-filter .row {

      margin: 0px; }



  .group-filter {

    border-radius: 0px;

    box-shadow: 0px 0px 0px var(--box-shadow);

    overflow-x: auto;

    margin-top: 0px !important;

    padding: 0px;

    width: calc(100% - 80px);

    -ms-overflow-style: none;

    /* IE and Edge */

    scrollbar-width: none;

    /* Firefox */ }

    .group-filter::-webkit-scrollbar {

      display: none;

      /* Hide scrollbar for Chrome, Safari and Opera */ }

    .group-filter .row {

      width: 700px; }



  #info {

    margin-top: 40px; }



  .box-info .box-doc-info-name {

    font-size: var(--f-20px); }

  .box-info .name-en {

    font-size: var(--f-18px); }

  .box-info .box-doc-info-type {

    font-size: var(--f-14px); }

  .box-info .doc-cover {

    margin-top: -45px;

    width: 120px; } }

@media screen and (max-width: 480.98px) {

  .group-filter .row {

    width: 500px; } }

@media screen and (max-width: 420.98px) {

  #mainBanner .homebanner-content .homebanner-nav label {

    padding: 10px 20px;

    margin-right: 10px; } }

/* overwrite ===================*/

.swiper-root {

  position: relative; }

  .swiper-root .swiper-button-prev::after, .swiper-root .swiper-rtl .swiper-button-next::after, .swiper-root .swiper-button-next::after, .swiper-root .swiper-rtl .swiper-button-prev::after {

    content: '';

    background-image: url("../images/index-swiper/btn-left.svg");

    background-position: center center;

    background-repeat: no-repeat;

    height: 50px;

    width: 50px; }

  .swiper-root .swiper-button-next::after, .swiper-root .swiper-rtl .swiper-button-prev::after {

    background-image: url("../images/index-swiper/btn-right.svg"); }

  .swiper-root .swiper-button-prev, .swiper-root .swiper-rtl .swiper-button-next {

    left: var(--swiper-navigation-sides-offset, -40px);

    right: auto; }

  .swiper-root .swiper-button-next, .swiper-root .swiper-rtl .swiper-button-prev {

    right: var(--swiper-navigation-sides-offset, -40px); }



.swiper .card, .list-data-card .card {

  background-color: transparent !important;

  border: none; }

  .swiper .card .card-title a, .list-data-card .card .card-title a {

    color: var(--btn-search) !important;

    font-size: var(--f-14px) !important;

    font-weight: 400; }

  .swiper .card .card-text a, .list-data-card .card .card-text a {

    color: var(--c-333) !important;

    font-size: var(--f-18px);

    font-weight: 700 !important; }

  .swiper .card .card-date, .swiper .card .card-point, .list-data-card .card .card-date, .list-data-card .card .card-point {

    color: var(--c-777);

    font-size: var(--f-14px) !important;

    font-weight: 400;

    padding-left: 30px;

    position: relative; }

    .swiper .card .card-date::after, .swiper .card .card-point::after, .list-data-card .card .card-date::after, .list-data-card .card .card-point::after {

      content: url("../images/calendar.svg");

      height: 20px;

      left: 0px;

      position: absolute;

      width: 20px; }

  .swiper .card .card-point::after, .list-data-card .card .card-point::after {

    content: url("../images/map-pin.svg"); }



.btn {

  border: none; }

  .btn.show {

    border: none; }



header .navbar .navbar-toggler {

  border: none;

  height: 36px;

  padding: 0px;

  position: relative;

  width: 34px; }

  header .navbar .navbar-toggler:focus {

    box-shadow: 0 0 0 0; }

  header .navbar .navbar-toggler .icon-bar {

    background-color: var(--c-333);

    border-radius: 10px;

    content: '';

    height: 2px;

    left: 8px;

    position: absolute;

    transition: .2s all linear; }

    header .navbar .navbar-toggler .icon-bar.bar1 {

      top: 10px;

      width: 18px; }

    header .navbar .navbar-toggler .icon-bar.bar2 {

      top: 16px;

      width: 8px; }

    header .navbar .navbar-toggler .icon-bar.bar3 {

      top: 22px;

      width: 14px; }

  header .navbar .navbar-toggler:not(.collapsed) .icon-bar {

    left: 6px; }

    header .navbar .navbar-toggler:not(.collapsed) .icon-bar.bar1 {

      height: 2px;

      top: 16px;

      width: 22px;

      transform: rotate(-45deg); }

    header .navbar .navbar-toggler:not(.collapsed) .icon-bar.bar2 {

      opacity: 0;

      width: 0px; }

    header .navbar .navbar-toggler:not(.collapsed) .icon-bar.bar3 {

      height: 2px;

      top: 16px;

      width: 22px;

      transform: rotate(45deg); }



.form-control:focus {

  box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0); }



.sharethis-inline-share-buttons {

  position: absolute;

  right: 10px;

  top: -40px;

  z-index: 1 !important; }



.op-hr {

  display: inline-block;

}



.op-hr span {

  display: inline-block;

  margin-right: 0.5em;

}



.op-hr span::after {

  content: ", ";

}



.op-hr span:last-child::after {

  content: "";

}/*# sourceMappingURL=interface.css.map */