@charset "UTF-8";

:root {
  --mcolor: #0f3264;
  --scolor: #f2cd58;
  --tcolor: #a93445;
  --theme-ink: #071426;
  --theme-navy: #0b1f3f;
  --theme-blue: #174783;
  --theme-blue-soft: #eaf1f8;
  --theme-gold: #f2cd58;
  --theme-red: #a93445;
  --theme-line: rgba(15, 50, 100, 0.16);
}

body {
  color: #102033;
  background:
    linear-gradient(180deg, #f7f9fd 0%, #eef4fa 100%);
}

a {
  color: var(--theme-blue);
}

a:hover {
  color: var(--theme-red);
}

.h_top {
  color: #fff5c7;
  background:
    linear-gradient(90deg, #071426 0%, #0f3264 46%, #183f7b 100%);
  border-bottom: 1px solid rgba(242, 205, 88, 0.36);
}

.h_top a,
.h_social,
.h_social a,
.search {
  color: #fff5c7;
}

.h_top .h_search {
  border-bottom-color: rgba(255, 255, 255, 0.78);
}

.h_top .h_search .button,
.h_top .h_search input,
.h_top .h_search input::placeholder {
  color: #fff;
  opacity: 1;
}

.h_top .h_search .button:hover {
  color: var(--theme-gold);
}

.h_main,
#header.fixed {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(15, 50, 100, 0.12);
  box-shadow: 0 10px 28px rgba(7, 20, 38, 0.08);
}

.h_search {
  border-bottom-color: var(--theme-blue);
}

.h_search .button,
.h_search input,
.h_search input::placeholder,
.gnavi > li > a {
  color: var(--theme-blue);
}

.gnavi > li > a:before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 4px;
  height: 2px;
  background: var(--theme-gold);
  transition: all 0.3s;
}

.gnavi > li:hover > a,
.gnavi > li.active > a {
  color: var(--theme-red);
}

.gnavi > li:hover > a:before,
.gnavi > li.active > a:before {
  left: 0;
  right: 0;
}

.submenu a,
.subsubmenu a {
  color: #fff;
  background: rgba(8, 31, 63, 0.94);
  border-left: 3px solid rgba(242, 205, 88, 0.72);
}

.submenu a:hover,
.subsubmenu a:hover {
  color: var(--theme-gold);
  background: rgba(15, 50, 100, 0.98);
}

.btn_booking,
.btn-new,
#popup #btn-submit,
.box08 button,
.idx-btn a,
.service-itm-txt a,
.pro-btn a,
.product-main-cart a,
.filter-btn button {
  color: #fff !important;
  background: linear-gradient(135deg, #0f3264 0%, #174783 100%) !important;
  box-shadow: 0 10px 24px rgba(15, 50, 100, 0.2);
}

.btn_booking:hover,
.btn-new:hover,
#popup #btn-submit:hover,
.box08 button:hover,
.idx-btn a:hover,
.service-itm-txt a:hover,
.pro-btn a:hover,
.product-main-cart a:hover,
.filter-btn button:hover {
  color: #071426 !important;
  background: linear-gradient(135deg, #f2cd58 0%, #f7dd86 100%) !important;
}

.idx_h2 {
  color: var(--theme-blue);
}

.idx_h2:before {
  background: linear-gradient(90deg, transparent, var(--theme-blue), transparent);
}

.idx_h2:after,
.box01 .idx_h2:after,
.box04 .idx_h2:after,
.box08 .idx_h2:after,
.abh2 .idx_h2:after,
.abh .idx_h2:after {
  background-color: transparent !important;
  filter: none;
}

.abh,
.box01,
.box05,
.under #content {
  background:
    linear-gradient(180deg, #f8fbff 0%, #eaf1f8 100%);
}

.abh_txt,
.abh_txt p,
.abh_txt li,
.news_itm_txt,
.b05_itm_txt,
.pro-txt,
.pro-txt p,
.pro-box-main p,
.xvnet-content,
.xvnet-content p,
.xvnet-content li {
  color: #172437;
}

.abh_img img,
.service-itm-img img,
.b05_itm_img img,
.news_itm_img img,
.pro-img,
.pro-thumb.slick-initialized .slick-slide,
.product-main-img-lager,
.product-main-img-thumb li {
  background: #fff;
  border-color: rgba(15, 50, 100, 0.14);
  box-shadow: 0 18px 40px rgba(7, 20, 38, 0.08);
}

.DoiNgu,
.box04,
.box07.bg,
.box08 {
  color: #f8fbff;
  background:
    linear-gradient(135deg, #071426 0%, #0f3264 48%, #18215b 100%) !important;
}

.DoiNgu .idx_h2,
.box04 .idx_h2,
.box07.bg .idx_h2,
.box08 .idx_h2,
.box08 .b08_left_txt,
.box08 .b08_left_txt p,
.box08 .b08_left_itm,
.box08 .b08_left_itm p {
  color: #fff;
}

.DoiNgu .idx_h2:before,
.box04 .idx_h2:before,
.box08 .idx_h2:before {
  background: linear-gradient(90deg, transparent, rgba(242, 205, 88, 0.95), transparent);
}

.DoiNgu_main {
  color: #fff;
  background: linear-gradient(180deg, rgba(15, 50, 100, 0.96), rgba(7, 20, 38, 0.96));
  border: 1px solid rgba(242, 205, 88, 0.48);
}

.DoiNgu_main .DoiNgu_des {
  color: #f2cd58;
}

.service-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 240, 249, 0.93) 100%) !important;
  border: 1px solid rgba(15, 50, 100, 0.12);
  box-shadow: 0 18px 42px rgba(7, 20, 38, 0.12);
}

.service-image::before {
    background: linear-gradient(90deg, rgb(22 15 116) 0%, rgb(22 15 117 / 46%) 45%, rgba(232, 240, 249, 0) 100%) !important;
}

.service-itm-ttl,
.news_itm_ttl,
.b05_itm_ttl,
.pro-ttl,
.pro-info-ttl,
.product-cont-more-ttl {
  color: var(--theme-blue);
}
.service-title {
	color: #fff;
}
.view-more-btn {
  color: #071426 !important;
  background: linear-gradient(135deg, #f2cd58 0%, #f7dd86 100%) !important;
}

.view-more-btn:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #a93445 0%, #7d2030 100%) !important;
}

.box02 {
  background:
    linear-gradient(90deg, rgba(7, 20, 38, 0.82), rgba(15, 50, 100, 0.24)),
    #0f3264;
}

.box02 img {
  width: 100%;
  opacity: 0.92;
}

.b04_itm_name .lager,
.b08_left_itm svg,
.b08_social li svg,
.b05_itm_more,
.news_itm_date,
.pro-note a:hover,
.product-main-tit,
.xvnet-content h2,
.xvnet-content h3 {
  color: var(--theme-red);
}

.box04 .b04_itm_name .lager,
.box08 .b08_left_itm svg,
.box08 .b08_social li svg {
  color: var(--theme-gold);
}

.b04_itm_name .txt {
  border-bottom-color: rgba(242, 205, 88, 0.55);
}

.b04_list .slick-arrow {
  background-color: rgba(15, 50, 100, 0.92);
  border: 1px solid rgba(242, 205, 88, 0.5);
}

.b04_list .slick-dots button {
  background: rgba(242, 205, 88, 0.42);
}

.b04_list .slick-dots li.slick-active button,
.b04_list .slick-dots li:hover button {
  background: var(--theme-gold);
}

.b05_item a,
.news_item a,
.news_itm_main,
.b07_list p,
.sidebar-mod,
.pro-tab-main,
.pro-info-note,
.camket-content {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 50, 100, 0.14);
  box-shadow: 0 14px 32px rgba(7, 20, 38, 0.08);
}

.b05_itm_img .date,
.b03_itm_img .discount,
.sidebar-mod-ttl,
.filter-ttl,
.camket-ttl,
ul.pro-tabs li.current,
ul.pro-tabs li:hover,
.product-main-cart a:not(:hover) {
  background: var(--theme-blue) !important;
}

ul.pro-tabs li {
  background: var(--theme-red);
}

.service-itm:nth-child(2n) {
  background:
    linear-gradient(180deg, #eef4fa 0%, #f8fbff 100%);
}

.gioithieu .title,
.gioithieu .value-title {
  color: var(--theme-blue) !important;
}

.gioithieu .values-list .dotted-spine {
  border-left-color: rgba(242, 205, 88, 0.86) !important;
  background: repeating-linear-gradient(
    to bottom,
    rgba(242, 205, 88, 0.9) 0 4px,
    transparent 4px 9px
  ) !important;
}

.gioithieu .value-marker {
  color: #fff !important;
  background: linear-gradient(135deg, #071426 0%, #0f3264 58%, #174783 100%) !important;
  border: 1px solid rgba(242, 205, 88, 0.86);
  box-shadow: 0 12px 26px rgba(7, 20, 38, 0.22);
}

.gioithieu .value-item:nth-child(2n) .value-marker {
  background: linear-gradient(135deg, #0f3264 0%, #174783 55%, #a93445 100%) !important;
}

.gioithieu .value-item:nth-child(3n) .value-marker {
  background: linear-gradient(135deg, #071426 0%, #0b1f3f 48%, #a93445 100%) !important;
}

.gioithieu .value-marker span {
  color: #fff !important;
}

.gioithieu .value-description {
  color: #172437;
}

.under .mainvisual {
  background:
    linear-gradient(120deg, rgba(7, 20, 38, 0.96) 0%, rgba(15, 50, 100, 0.92) 54%, rgba(24, 33, 91, 0.88) 100%) !important;
  border-bottom: 3px solid var(--theme-gold);
}

.mainvisual_ttl,
.under-ttl,
.topic-path,
.topic-path li,
.topic-path a,
.topic-path li:last-child a {
  color: #fff;
}

.mainvisual_sub01,
.mainvisual_sub02,
.topic-path li a:hover {
  color: var(--theme-gold);
}

.pager a {
  color: var(--theme-blue);
  border-color: rgba(15, 50, 100, 0.18);
  background: #fff;
}

.pager strong,
.pager a:hover,
.pager a:first-child:hover,
.pager a:last-child:hover {
  color: #fff;
  background: var(--theme-blue);
  border-color: var(--theme-blue);
  box-shadow: 0 0 0 1px var(--theme-blue);
}

#contact_form,
#popup,
#booking {
  background-color: #f8fbff;
  border: 1px solid rgba(242, 205, 88, 0.55);
}

#contact_form.popup {
  width: min(500px, 92vw);
  min-height: 560px;
  max-height: calc(100vh - 32px);
  aspect-ratio: auto;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%) !important;
  border: 1px solid rgba(242, 205, 88, 0.62);
  box-shadow: 0 24px 70px rgba(7, 20, 38, 0.28);
}

#contact_form .popup-close {
  top: 14px;
  right: 16px;
  z-index: 3;
  color: #ffffff;
  line-height: 1;
  opacity: 0.9;
}

#contact_form .popup-head {
  position: relative;
  min-height: 185px;
  padding: 34px 42px 28px;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(135deg, #071426 0%, #0f3264 55%, #174783 100%);
  border-bottom: 3px solid var(--theme-gold);
}

#contact_form .popup-head:before,
#contact_form .popup-head:after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#contact_form .popup-head:before {
  width: 210px;
  height: 210px;
  right: -76px;
  top: -84px;
  border: 1px solid rgba(242, 205, 88, 0.28);
  border-radius: 50%;
  box-shadow:
    -38px 56px 0 -30px rgba(255, 255, 255, 0.18),
    -86px 118px 0 -64px rgba(242, 205, 88, 0.34);
}

#contact_form .popup-head:after {
  width: 120px;
  height: 58px;
  right: 32px;
  bottom: 18px;
  opacity: 0.28;
  background:
    linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 255, 255, 0.7) 52%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 255, 255, 0.7) 52%, transparent 54%);
  background-size: 24px 24px;
}

#contact_form .popup-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #071426;
  background: var(--theme-gold);
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

#contact_form .popup-badge svg {
  font-size: 22px;
}

#contact_form .popup-head h2,
#contact_form .popup-head p {
  position: relative;
  z-index: 1;
}

#contact_form .popup-head h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

#contact_form .popup-head p {
  max-width: 340px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  text-align: center;
}

#contact_form .group-ct {
  height: auto;
  min-height: 0;
  justify-content: flex-start;
  align-items: stretch;
  padding: 28px 40px 32px;
}

#contact_form .form-contact {
  width: 100%;
}

#contact_form .form-col-right {
  position: relative;
  width: 100%;
}

#contact_form .form-col-right:before {
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 2;
  width: 20px;
  height: 20px;
  color: var(--theme-gold);
  font-family: "Font Awesome 6 Free";
  font-size: 17px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}

#contact_form .form-contact > .form-group:nth-child(1) .form-col-right:before {
  content: "\f007";
}

#contact_form .form-contact > .form-group:nth-child(2) .form-col-right:before {
  content: "\f095";
}

#contact_form .form-contact > .form-group:nth-child(3) .form-col-right:before {
  content: "\f059";
}

#contact_form .form-contact > .form-group:nth-child(4) .form-col-right:before {
  content: "\f044";
  color: var(--theme-blue);
}

#contact_form .form-group {
  margin-bottom: 14px;
}

#contact_form .form-control {
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 46px;
  font-size: 16px;
  border-color: rgba(15, 50, 100, 0.28);
  box-shadow: 0 8px 20px rgba(7, 20, 38, 0.06);
}

#contact_form input[name="fullname"],
#contact_form input[name="phone"],
#contact_form select[name="interest"] {
  background-image: none !important;
}

#contact_form input[name="interest_other"] {
  background-image: none !important;
}

#contact_form .form-contact > .form-group:last-child {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 0;
}

#contact_form .form-contact > .form-group:last-child .btn-new {
  flex: 1;
  width: auto;
  padding: 10px 16px;
  border-radius: 7px;
}

.form-control,
#popup input {
  border-color: rgba(15, 50, 100, 0.38);
  color: var(--theme-blue);
  background-color: rgba(255, 255, 255, 0.94);
}

.form-control:focus,
#popup input:focus {
  border-color: var(--theme-gold);
  box-shadow: 0 0 0 3px rgba(242, 205, 88, 0.22);
}

.box08 .form-group input,
.box08 .form-group textarea {
  color: #102033;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(242, 205, 88, 0.65) !important;
}

#footer {
  color: rgba(255, 255, 255, 0.84);
  background:
    linear-gradient(135deg, #071426 0%, #0b1f3f 48%, #0f3264 100%) !important;
  border-top: 3px solid var(--theme-gold);
}

.f_col_ttl,
.f_info.f_com,
.f_ttl {
  color: var(--theme-gold);
}

.f_col_ttl:before,
.f_service li:before,
.f_menu li:before {
  background: var(--theme-gold);
}

.f_info a,
.f_service a,
.f_menu a {
  color: rgba(255, 255, 255, 0.82);
}

.f_info a:hover,
.f_service a:hover,
.f_menu a:hover {
  color: var(--theme-gold);
}

.f_form button,
.copyright {
  color: #071426;
  background: var(--theme-gold);
}

.f_form input {
  color: #fff;
  border-color: var(--theme-gold);
}

.f_form input::placeholder {
  color: rgba(255, 255, 255, 0.74);
}

.copyright a {
  color: #071426;
}

.bottom_mb {
  background: linear-gradient(90deg, #071426 0%, #0f3264 100%) !important;
  border-top: 1px solid rgba(242, 205, 88, 0.36);
}

#totop {
  width: 48px;
  height: 48px;
}

#totop a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: linear-gradient(135deg, #071426 0%, #0f3264 100%);
  border: 1px solid rgba(242, 205, 88, 0.85) !important;
  box-shadow: 0 12px 28px rgba(7, 20, 38, 0.22);
}

#totop a:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid var(--theme-gold);
}

#totop a:hover {
  opacity: 1;
  background: linear-gradient(135deg, #f2cd58 0%, #f7dd86 100%);
}

#totop a:hover:before {
  border-bottom-color: #071426;
}

#totop img {
  display: none;
}

@media screen and (max-width: 768px) {
  #header {
    background: rgba(255, 255, 255, 0.97);
  }

  .menu-icon,
  .gnv-ico {
    background: var(--theme-blue);
  }

  .h_right {
    background:
      linear-gradient(180deg, #071426 0%, #0f3264 100%);
  }

  .gnavi > li > a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.16);
  }

  .gnavi > li:hover > a,
  .gnavi > li.active > a {
    color: var(--theme-gold);
  }

  .submenu a,
  .subsubmenu a {
    background: rgba(255, 255, 255, 0.08);
    border-left: 0;
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  .h_search {
    border-color: rgba(242, 205, 88, 0.52);
  }

  .h_search .button,
  .h_search input,
  .h_search input::placeholder {
    color: #fff;
  }

  .DoiNgu,
  .box04,
  .box08 {
    background:
      linear-gradient(160deg, #071426 0%, #0f3264 100%) !important;
  }

  #contact_form.popup {
    min-height: auto;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  #contact_form .popup-head {
    min-height: 158px;
    padding: 28px 26px 22px;
  }

  #contact_form .popup-head h2 {
    font-size: 23px;
  }

  #contact_form .popup-head p {
    font-size: 14px;
  }

  #contact_form .group-ct {
    padding: 22px 20px 24px;
  }

  #contact_form .form-contact > .form-group:last-child {
    gap: 5px;
  }
}