:root {
  font-size: var(--theme-default-font-size);
  --theme-default-font-size: 16px;
  --theme-font-serif: "Noto Serif", "Noto Serif SC", Georgia, serif;
  --theme-font-sans: "Noto Sans", "Noto Sans SC", Helvetica, sans-serif;
  --theme-animation-timing: cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

/* =====================================================
   Bootstrap 5 — Complete Color Override
   Primary:   #075f73
   Info:      #afccd0
   Link:      #075f73  /  hover: #526e7c
   ===================================================== */

/* ─── CSS custom properties ──────────────────────────── */
:root {
  --bs-body-font-family: var(--theme-font-serif);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  
  --bs-primary: #075f73;
  --bs-primary-rgb: 7, 95, 115;

  --bs-info: #afccd0;
  --bs-info-rgb: 175, 204, 208;

  --bs-link-color: #075f73;
  --bs-link-color-rgb: 7, 95, 115;
  --bs-link-hover-color: #054e5f;
  --bs-link-hover-color-rgb: 5, 78, 95;

  /* Derived shades */
  --bs-primary-dark: #054e5f;
  --bs-primary-darker: #044550;
  --bs-primary-light: #d0e8ed;
  --bs-primary-border: #a8d0d8;
  --bs-primary-focus-shadow: rgba(7, 95, 115, 0.25);

  --bs-info-dark: #94b5ba;
  --bs-info-darker: #7d9ea3;
  --bs-info-light: #eaf4f5;
  --bs-info-border: #c5e2e5;
  --bs-info-text: #4a7880;
  --bs-info-focus-shadow: rgba(175, 204, 208, 0.25);
}

/* ─── Links ──────────────────────────────────────────── */
a {
  color: var(--bs-link-color);
  text-decoration-color: var(--bs-link-color);
}

a:hover {
  color: var(--bs-link-hover-color);
  text-decoration-color: var(--bs-link-hover-color);
}

a:focus-visible {
  outline-color: var(--bs-link-color);
}

/* ─── Solid buttons ──────────────────────────────────── */
.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-dark);
  --bs-btn-hover-border-color: var(--bs-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-darker);
  --bs-btn-active-border-color: var(--bs-primary-darker);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.btn.btn-primary:hover {
  background-color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}

.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: var(--bs-primary-darker);
  border-color: var(--bs-primary-darker);
}

.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  opacity: 0.65;
}

.btn.btn-primary:focus,
.btn.btn-primary:focus-visible {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

.btn.btn-info {
  --bs-btn-color: #212529;
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: var(--bs-info-dark);
  --bs-btn-hover-border-color: var(--bs-info-dark);
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: var(--bs-info-darker);
  --bs-btn-active-border-color: var(--bs-info-darker);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  color: #212529;
}

.btn.btn-info:hover {
  background-color: var(--bs-info-dark);
  border-color: var(--bs-info-dark);
}

.btn.btn-info:active,
.btn.btn-info.active {
  background-color: var(--bs-info-darker);
  border-color: var(--bs-info-darker);
}

.btn.btn-info:disabled,
.btn.btn-info.disabled {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  opacity: 0.65;
}

.btn.btn-info:focus,
.btn.btn-info:focus-visible {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  box-shadow: 0 0 0 0.25rem var(--bs-info-focus-shadow);
}

/* ─── Outline buttons ────────────────────────────────── */
.btn.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-darker);
  --bs-btn-active-border-color: var(--bs-primary-darker);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  background-color: transparent;
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.btn.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active {
  background-color: var(--bs-primary-darker);
  border-color: var(--bs-primary-darker);
  color: #fff;
}

.btn.btn-outline-primary:disabled,
.btn.btn-outline-primary.disabled {
  background-color: transparent;
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  opacity: 0.65;
}

.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

.btn.btn-outline-info {
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: var(--bs-info-darker);
  --bs-btn-active-border-color: var(--bs-info-darker);
  --bs-btn-disabled-color: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  background-color: transparent;
  border-color: var(--bs-info);
  color: var(--bs-info);
}

.btn.btn-outline-info:hover {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  color: #212529;
}

.btn.btn-outline-info:active,
.btn.btn-outline-info.active {
  background-color: var(--bs-info-darker);
  border-color: var(--bs-info-darker);
  color: #212529;
}

.btn.btn-outline-info:disabled,
.btn.btn-outline-info.disabled {
  background-color: transparent;
  border-color: var(--bs-info);
  color: var(--bs-info);
  opacity: 0.65;
}

.btn.btn-outline-info:focus,
.btn.btn-outline-info:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--bs-info-focus-shadow);
}

/* ─── Badges ─────────────────────────────────────────── */
.badge.bg-primary {
  background-color: var(--bs-primary);
  color: #fff;
}

.badge.bg-info {
  background-color: var(--bs-info);
  color: #212529;
}

/* ─── Alerts ─────────────────────────────────────────── */
.alert.alert-primary {
  --bs-alert-color: var(--bs-primary-darker);
  --bs-alert-bg: var(--bs-primary-light);
  --bs-alert-border-color: var(--bs-primary-border);
  background-color: var(--bs-primary-light);
  border-color: var(--bs-primary-border);
  color: var(--bs-primary-darker);
}

.alert.alert-primary .alert-link {
  color: var(--bs-primary-darker);
}

.alert.alert-info {
  --bs-alert-color: var(--bs-info-text);
  --bs-alert-bg: var(--bs-info-light);
  --bs-alert-border-color: var(--bs-info-border);
  background-color: var(--bs-info-light);
  border-color: var(--bs-info-border);
  color: var(--bs-info-text);
}

.alert.alert-info .alert-link {
  color: var(--bs-info-text);
}

/* ─── Form controls ──────────────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:checked:focus {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

/* ─── Input groups ───────────────────────────────────── */
.input-group-text {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ─── Nav links ──────────────────────────────────────── */
.nav-link {
  color: var(--bs-primary);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--bs-link-hover-color);
}

.nav-link.active {
  color: var(--bs-primary-darker);
}

/* ─── Nav pills ──────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ─── Nav tabs ───────────────────────────────────────── */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-primary);
  border-color: #dee2e6 #dee2e6 #fff;
}

/* ─── Navbar ─────────────────────────────────────────── */
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: var(--bs-primary);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--bs-primary);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--bs-link-hover-color);
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--bs-primary-darker);
}

/* ─── Pagination ─────────────────────────────────────── */
.page-link {
  color: var(--bs-primary);
}

.page-link:hover {
  color: var(--bs-link-hover-color);
}

.page-link:focus {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* ─── Breadcrumb ─────────────────────────────────────── */
.breadcrumb-item a {
  color: var(--bs-primary);
}

.breadcrumb-item a:hover {
  color: var(--bs-link-hover-color);
}

.breadcrumb-item.active {
  color: var(--bs-link-hover-color);
}

/* ─── Dropdowns ──────────────────────────────────────── */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-primary-light);
  color: var(--bs-primary-darker);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ─── List group ─────────────────────────────────────── */
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--bs-primary-darker);
  background-color: var(--bs-primary-light);
}

.list-group-item-action:active {
  background-color: var(--bs-primary-border);
  color: var(--bs-primary-darker);
}

.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.list-group-item-primary {
  background-color: var(--bs-primary-light);
  color: var(--bs-primary-darker);
}

.list-group-item-info {
  background-color: var(--bs-info-light);
  color: var(--bs-info-text);
}

/* ─── Progress bar ───────────────────────────────────── */
.progress-bar {
  background-color: var(--bs-primary);
}

.progress-bar.bg-info {
  background-color: var(--bs-info);
}

/* ─── Spinners ───────────────────────────────────────── */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--bs-primary);
}

.spinner-border.text-info,
.spinner-grow.text-info {
  color: var(--bs-info);
}

/* ─── Tooltips ───────────────────────────────────────── */
.tooltip.bs-tooltip-primary .tooltip-inner {
  background-color: var(--bs-primary);
}

/* ─── Popovers ───────────────────────────────────────── */
.popover-header {
  background-color: var(--bs-primary);
  color: #fff;
  border-bottom-color: var(--bs-primary-dark);
}

/* ─── Accordion ──────────────────────────────────────── */
.accordion-button:not(.collapsed) {
  color: var(--bs-primary);
  background-color: var(--bs-primary-light);
  box-shadow: inset 0 -1px 0 var(--bs-primary-focus-shadow);
}

.accordion-button:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

/* ─── Tables ─────────────────────────────────────────── */
.table-primary {
  --bs-table-color: var(--bs-primary-darker);
  --bs-table-bg: var(--bs-primary-light);
  --bs-table-border-color: var(--bs-primary-border);
  --bs-table-striped-color: var(--bs-primary-darker);
  --bs-table-active-color: var(--bs-primary-darker);
  --bs-table-hover-color: var(--bs-primary-darker);
}

.table-info {
  --bs-table-color: var(--bs-info-text);
  --bs-table-bg: var(--bs-info-light);
  --bs-table-border-color: var(--bs-info-border);
  --bs-table-striped-color: var(--bs-info-text);
  --bs-table-active-color: var(--bs-info-text);
  --bs-table-hover-color: var(--bs-info-text);
}

/* ─── Offcanvas & modals ─────────────────────────────── */
.modal .btn-close:focus,
.offcanvas .btn-close:focus {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

/* ─── Close button ───────────────────────────────────── */
.btn-close:focus {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus-shadow);
}

/* ─── Text & background utilities ───────────────────── */
.text-primary { color: var(--bs-primary); }
.text-info    { color: var(--bs-info)   ; }

.bg-primary { background-color: var(--bs-primary) !important; }
.bg-info    { background-color: var(--bs-info) !important; }

.border-primary { border-color: var(--bs-primary) !important; }
.border-info    { border-color: var(--bs-info) !important; }

.link-primary { color: var(--bs-primary); }
.link-primary:hover,
.link-primary:focus { color: var(--bs-link-hover-color); }

.link-info { color: var(--bs-info); }
.link-info:hover,
.link-info:focus { color: var(--bs-info-dark); }

body > footer > .container,
body > nav > .container,
body > main > article > .container,
body > main > .container,
body > .offcanvas-bottom > .container,
.layout-blog.layout-post .blog-post-feature-image-banner > .container {
  max-width: 960px;
}

.layout-blog > nav,
.layout-blog > main,
.layout-blog > footer {
  transition: opacity 0.5s var(--theme-animation-timing);
}

.layout-loading > nav,
.layout-loading > main,
.layout-loading > footer,
.layout-loading > .offcanva{
  opacity: 0;
}

body > #loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
}

.text-shadow {
  text-shadow: 0 0 15px rgba(0,0,0,.25), 0 0 10px rgba(0,0,0,.5);
}

.navbar {
  --bs-navbar-toggler-focus-width: 0;
}

.navbar .navbar-toggler .nav-toggle-icon:before{
  content: '\f057';
}

.navbar .navbar-toggler.collapsed .nav-toggle-icon:before{
  content: '\f0c9';
}


.layout-blog .glightbox-clean .gslide-desc {
  font-family: var(--theme-font-serif);
}

article .blog-post-feature-image-banner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  --bs-aspect-ratio: 75%;
}

.layout-blog.layout-post .blog-post-feature-image-banner::before {
  background: linear-gradient(0deg,rgb(var(--bs-primary-rgb)) 0%, rgba(var(--bs-primary-rgb), 0.5) 38.3%, rgba(237, 221, 83, 0) 100%);
}

.layout-blog.layout-post .blog-post-feature-image-banner.ratio .container {
  position: absolute;
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  transform: translateX(-50%);
  height: auto;
}

.author-list .author-list-item .author-avatar {
  max-width: 2rem;
}

.nav-underline.nav-hover-underline .nav-link {
  position: relative;
}

.nav-underline.nav-hover-underline .nav-link:after,
.nav-underline.nav-hover-underline .nav-link.active:after, 
.nav-underline.nav-hover-underline .show > .nav-link:after,
.hover-underline span.underline {
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--bs-link-color), var(--bs-success));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size 600ms var(--theme-animation-timing);
}

.nav-underline.nav-hover-underline .nav-link:focus,
.nav-underline.nav-hover-underline .nav-link:hover,
.nav-underline.nav-hover-underline .nav-link.active, 
.nav-underline.nav-hover-underline .show > .nav-link {
  border-bottom-color: transparent;
}

.nav-underline.nav-hover-underline .nav-link:after,
.nav-underline.nav-hover-underline .nav-link.active:after, 
.nav-underline.nav-hover-underline .show > .nav-link:after {
  content: "";
  width: 100%;
  height: 2px;
  text-decoration: none;
  background-position: 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
}

.nav-underline.nav-hover-underline .nav-link.active:after, 
.nav-underline.nav-hover-underline .show > .nav-link:after,
.nav-underline.nav-hover-underline .nav-link:focus:after,
.nav-underline.nav-hover-underline .nav-link:hover:after,
.hover-underline:hover span.underline {
  background-size: 100% 2px;
}

.layout-home .page-body {
  overflow-x: hidden;
}

.offcanvas-bottom .qrURL img {
  max-width: 100%;
}

.larger-inputs .tk-preview-container,
.larger-inputs .tk-meta-input .el-input-group__prepend {
  border-radius: var(--bs-border-radius);
}

.larger-inputs .el-button,
.larger-inputs .tk-meta-input .el-input__inner {
  font-size: var(--bs-body-font-size);
  height: calc(var(--bs-body-font-size)*2.5);
  border-radius: var(--bs-border-radius);
}

.larger-inputs .tk-input .el-textarea__inner {
  font-size: var(--bs-body-font-size);
  border-radius: var(--bs-border-radius);
  min-height: calc(var(--bs-body-font-size)*6) !important;;
}

.larger-inputs .tk-avatar {
  border-radius: 50%;
}

.larger-inputs .tk-comment {
  word-break: break-word;
}

.btn-group button[data-cf-likes] .cf-like-counts {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0.5) translate(-80%,-80%);
  background-color: var(--bs-danger);
  padding: .25rem .75rem;
  border-radius: .5rem;
  box-shadow: var(--bs-box-shadow);
}

.map-container {
  width: 100%;
  height: 400px;
  color: var(--bs-dark);
  }
.map-container .amap-info {
  width: 16rem;
  line-height: 120%;
  }
.map-container .amap-info h3 {
  font-size: 16px;
  margin: 4px 2px;
  }
.map-container .amap-info p {
  font-size: 14px;
  margin: 4px 2px;
}

figure .figure-echarts {
  width: 100%;
  aspect-ratio: 16 / 9;
}

@media screen and (min-width: 552px) {
  article .blog-post-feature-image-banner {
    --bs-aspect-ratio: 62.5%;
  }
}

@media screen and (min-width: 768px) {
  article .blog-post-feature-image-banner {
    --bs-aspect-ratio: 48%;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --theme-default-font-size: 18px;
  }
  
  .layout-home .page-body {
    overflow-x: initial;
  }

  article .blog-post-feature-image-banner {
    --bs-aspect-ratio: 36%;
  }
}

@media screen and (min-width: 1200px) {

}

@media screen and (min-width: 1400px) {

}