:root {
  --color-primary-50: #eef6fe;
  --color-primary-100: #459aee;
  --color-primary-200: #337ec6;
  --color-primary-300: #005eb8;
  --color-primary-500: #004085;
  --color-primary-hover: #072369;
  --bs-link-color: #005Eb8;
  --color-grey-100: #ececec;
  --color-grey-200: #666666;
  --color-grey-300: #3d3d3d;
}
.breadcrumb {
  --bs-breadcrumb-item-active-color: #005eb8;
}
.pagination {
  --bs-pagination-active-bg: #005Eb8;
  --bs-pagination-active-border-color: #005Eb8;
}
body {
  font-family: 'Noto Sans Thai', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'wdth' 100;
}
.btn-primary-300 {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary-300);
  --bs-btn-border-color: var(--color-primary-300);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-500);
  --bs-btn-hover-border-color: var(--color-primary-500);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-500);
  --bs-btn-active-border-color: var(--color-primary-500);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-primary-300);
  --bs-btn-disabled-border-color: var(--color-grey-300);
}
.w-fit {
  width: fit-content;
}
.bg-primary-50 {
  background-color: var(--color-primary-50);
}
.bg-primary-300 {
  background-color: var(--color-primary-300);
}
.bg-primary-500 {
  background-color: var(--color-primary-500);
}
.text-underline {
  text-decoration: underline;
}
.text-primary-100 {
  color: var(--color-primary-100);
}
.text-primary-300 {
  color: var(--color-primary-300);
}
.text-primary-500 {
  color: var(--color-primary-500);
}
.text-grey-200 {
  color: var(--color-grey-200);
}
.text-grey-300 {
  color: var(--color-grey-300);
}
.text-8 {
  font-size: 8px;
}
.text-10 {
  font-size: 10px;
}
.text-12 {
  font-size: 12px;
}
.text-14 {
  font-size: 14px;
}
.text-16 {
  font-size: 16px;
}
.text-18 {
  font-size: 18px;
}
.text-20 {
  font-size: 20px;
}
.text-24 {
  font-size: 24px;
}
.text-28 {
  font-size: 28px;
}
.text-30 {
  font-size: 30px;
}
.text-34 {
  font-size: 34px;
}
.text-60 {
  font-size: 60px;
}
.text-70 {
  font-size: 70px;
}
.font-semibold {
  font-weight: 600;
}
.font-arial {
  font-family: Arial, sans-serif;
}
.max-w-xxl-screen {
  max-width: 1920px;
  margin: auto;
  overflow: hidden;
}
.max-w-lg-screen {
  max-width: 992px;
  margin: auto;
  padding: 34px 34px;
  overflow: hidden;
}
.max-w-sm-screen {
  max-width: 525px;
  margin: auto;
  padding: 34px 34px;
  overflow: hidden;
}
.max-w-md-screen {
  max-width: 667px;
  margin: auto;
  padding: 34px 34px;
  overflow: hidden;
}
/* .navbar:has(.navbar-collapse.collapse.show) {
  padding-bottom: 0px !important;
} */
.dropdown-item {
  color: #fff;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ffffff4f;
}
.navbar-nav .dropdown-menu {
  border-radius: 0;
  background-color: var(--color-primary-300);
  padding-top: 0;
  padding-bottom: 0;
}
.navbar .container-fluid .navbar-collapse.collapse {
  transition: all 100ms ease-in-out;
  z-index: 99;
}
.navbar .navbar-brand img {
  width: 180px;
}
.navbar-nav .nav-link,
.navbar-nav .nav-link.active {
  color: #fff;
  padding: 8px 12px 8px 0;
}
.navbar-nav .nav-link.active {
  /* border-bottom: 1px #fff solid; */
  text-decoration: underline;
}
.navbar-nav .nav-link:hover {
  background-color: var(--color-primary-300);
}
.navbar .navbar-collapse.collapse.show {
  top: 50px;
  left: 0;
  right: 0;
  opacity: 1 !important;
  transition: all 100ms ease-in-out;
}

.navbar .container-fluid:has(.navbar-collapse.collapse.show) .navbar-toggler #burger-menu {
  display: none;
}
.navbar .container-fluid:has(.navbar-collapse.collapse.show) .navbar-toggler #close {
  display: block !important;
}
.navbar .container-fluid:has(.navbar-collapse.collapse:not(.show)) .navbar-toggler #close {
  display: none;
}

.blog .blog-img,
.recommended-products .product-img {
  transition: all 0.3s ease-in-out;
}
.blog:hover .blog-img {
  scale: 1.1;
}
.recommended-products a:hover {
  z-index: 2;
}
.recommended-products a:hover .product-img {
  scale: 1.2;
}

.product-box {
  width: 256px;
  height: 256px;
  position: relative;
}
.blog .description {
  max-height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  color: #fff;
  opacity: 0.8;
}
footer .description :is(.contract, .rights, .policy) {
  width: fit-content;
  background-color: var(--color-primary-500);
  padding: 0 8px;
  border-radius: 4px;
  text-wrap: nowrap;
}

footer .shopping {
  border-right: 1px var(--color-grey-100) solid;
}
footer .content-left {
  border-right: 1px var(--color-primary-200) solid;
}
footer .content-right li {
  list-style-image: url(/static/images/right-arrow.svg);
  text-wrap: nowrap;
}
footer .copyrights {
  font-size: 10px;
  padding: 12px;
}

.form-register-insurance .group {
  display: flex;
  flex-direction: column;
}
.form-register-insurance .group .label {
  color: var(--color-primary-300);
  font-weight: 500;
}
.form-register-insurance .group .sub-label {
  color: var(--color-primary-300);
  font-size: 12px;
}

.health-advice-list li::marker {
  color: var(--color-primary-100);
}
.health-advice-list li {
  color: var(--color-grey-200);
}

.navbar-nav .nav-item .dropdown-menu.show {
  /* border: 0px; */
  margin-top: 0px;
  /* border-radius: 0px; */
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: var(--color-primary-300) !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 8px 16px;
  min-width: 90px;
}
.form-register-insurance :is(input, select) {
  border-color: var(--color-primary-100);
}
.form-register-insurance input:invalid,
.form-register-insurance select:invalid,
.form-register-insurance :is(input, select)::placeholder {
  color: var(--color-primary-300) !important;
}
@media (max-width: 425px) {
  footer .content-left,
  footer .content-left .desc,
  footer .import-distributors *,
  footer .description :is(.contract, .rights, .policy) {
    font-size: 12px !important;
  }
  .import-distributors img {
    width: 25px !important;
    height: 100%;
  }
}
@media (max-width: 991px) {
  .navbar-nav li.nav-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .navbar-nav li.nav-item.active {
    background-color: var(--color-primary-300);
  }
  .max-w-sm-screen {
    padding: 18px 18px;
  }
  .navbar .navbar-brand img {
    width: 100%;
    height: 28px;
  }
  .navbar-collapse.collapse {
    background-color: var(--color-primary-100);
  }
  .navbar-nav .nav-link,
  .navbar-nav .nav-link.active {
    color: #fff;
    padding: 8px 24px 8px 6px;
    border-bottom: 1px solid #ffffff4f;
  }
  .navbar-nav li.nav-item.active .nav-link {
    border-bottom: none;
  }
  .navbar-nav .nav-link.active {
    /* border-bottom: none; */
    text-decoration: none;
  }
  footer .shopping {
    border-right: none;
  }
  footer .content-left {
    border-right: none;
  }
  footer .content-left {
    border-right: none;
  }
}
@media (min-width: 992px) {
  .navbar .navbar-collapse.collapse {
    position: inherit !important;
    opacity: 1 !important;
  }
  .navbar .navbar-brand {
    margin-top: -15px;
  }
}
.invalid-feedback {
  margin-top: 0;
}
.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
  color: var(--bs-body-color);
}
.form-check-input.is-valid, .was-validated .form-check-input:valid {
  border-color: var(--color-primary-100);
}