/* Nền body hơi tối hơn section để đường chéo giữa các khối vẫn lộ. */
body {
  background-color: #232633;
  background-image: linear-gradient(165deg, #1f2230, #2a2e3f);
}

#banner,
#wrapper > header,
#footer {
  background-image: linear-gradient(165deg, rgba(46, 49, 65, 0.82), rgba(31, 34, 48, 0.9)), linear-gradient(165deg, #2e3141, #4c5c96);
}

@media screen and (max-width: 1280px) {
  #banner,
  #wrapper > header,
  #footer {
    background-image: linear-gradient(165deg, rgba(46, 49, 65, 0.82), rgba(31, 34, 48, 0.9)), linear-gradient(165deg, #2e3141, #4c5c96);
  }
}

/*
 * Solid State mặc định để margin + wedge 6.5em giữa section — nhìn thành khoảng chết lớn.
 * Siết lại khoảng nối section (giữ đường chéo, ngắn hơn).
 */
.wrapper {
  margin: 2.75em 0;
}

.wrapper:before,
.wrapper:after {
  height: 2.75em;
}

.wrapper:before {
  top: -2.75em;
}

.wrapper:after {
  bottom: -2.75em;
}

@media screen and (max-width: 1280px) {
  #banner {
    margin-bottom: -2.75em;
  }

  #wrapper > header {
    margin-bottom: -2.75em;
  }

  #footer {
    margin-top: -2.75em;
    padding-top: 2.75em;
  }
}

@media screen and (max-width: 980px) {
  .wrapper {
    margin: 2em 0;
  }

  .wrapper:before,
  .wrapper:after {
    height: 2em;
  }

  .wrapper:before {
    top: -2em;
  }

  .wrapper:after {
    bottom: -2em;
  }

  #banner {
    margin-bottom: -2em;
  }

  #wrapper > header {
    margin-bottom: -2em;
  }

  #footer {
    margin-top: -2em;
    padding-top: 2em;
  }
}

@media screen and (max-width: 736px) {
  .wrapper {
    margin: 1.5em 0;
  }

  .wrapper:before,
  .wrapper:after {
    height: 1.5em;
  }

  .wrapper:before {
    top: -1.5em;
  }

  .wrapper:after {
    bottom: -1.5em;
  }

  #banner {
    margin-bottom: -1.5em;
  }

  #wrapper > header {
    margin-bottom: -1.5em;
  }

  #footer {
    margin-top: -1.5em;
    padding-top: 1.5em;
  }
}

.prewrap {
  white-space: pre-wrap;
}

body.is-menu-visible #page-wrapper {
  filter: none;
}

#menu {
  z-index: 10001;
  height: 100vh;
  height: 100dvh;
}

#header nav a.nav-page {
  display: none;
}

@media screen and (min-width: 1280px) {
  #header nav a.nav-page {
    display: inline-block;
  }
}

/* Nút menu = icon 3 gạch (không phụ thuộc Font Awesome / text-indent). */
#header nav a.menu-toggle {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: inherit;
  min-height: 2.75em;
  padding: 0 !important;
  text-indent: 0 !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
  border-radius: 5px;
  overflow: visible;
  vertical-align: middle;
}

#header nav a.menu-toggle:before {
  display: none !important;
  content: none !important;
}

#header nav a.menu-toggle .menu-toggle-bars,
#header nav a.menu-toggle .menu-toggle-bars::before,
#header nav a.menu-toggle .menu-toggle-bars::after {
  display: block;
  width: 1.15em;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

#header nav a.menu-toggle .menu-toggle-bars {
  position: relative;
}

#header nav a.menu-toggle .menu-toggle-bars::before,
#header nav a.menu-toggle .menu-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}

#header nav a.menu-toggle .menu-toggle-bars::before {
  top: -0.35em;
}

#header nav a.menu-toggle .menu-toggle-bars::after {
  top: 0.35em;
}

@media screen and (max-width: 736px) {
  #header nav a.menu-toggle {
    box-shadow: none;
    border-radius: 0;
    width: 3.5em;
  }
}

#banner .logo img {
  width: 4.5em;
  height: 4.5em;
  object-fit: cover;
  border-radius: 100%;
  border: solid 2px rgba(255, 255, 255, 0.35);
}

.feature-photo {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  margin-bottom: 1.5em;
}

/*
 * Theme gốc chia footer 50/50 form + contact. App không có form trong footer
 * nên contact bị hẹp → địa chỉ dài (vd. "TP. Hồ Chí Minh") xuống hàng sớm.
 */
#footer .inner .contact {
  width: 100%;
  max-width: 42em;
}

/* LCP: bỏ delay/blur animation trên banner (theme gốc delay 0.65–0.8s). */
#banner .logo,
#banner h2,
#banner p {
  transition: none !important;
  transition-delay: 0s !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Hero ảnh thật (img) thay CSS background — preload + fetchpriority được. */
#banner.has-photo {
  position: relative;
  overflow: hidden;
  background-image: none !important;
}

#banner.has-photo > picture,
#banner.has-photo > .banner-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#banner.has-photo .banner-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#banner.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(165deg, rgba(46, 49, 65, 0.55), rgba(31, 34, 48, 0.72));
}

#banner.has-photo > .inner {
  position: relative;
  z-index: 2;
}

/*
 * Icon SVG thay Font Awesome (~56KB CSS + ~78KB font).
 * Chỉ các glyph dùng trên site công khai.
 */
.icon:before,
a.special:not(.button):before,
ul.contact li:before,
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  font-family: inherit !important;
  font-weight: normal !important;
}

.icon-mask:before,
a.special:not(.button):before,
ul.contact li.fa-home:before,
ul.contact li.fa-phone:before,
ul.contact li.fa-envelope:before,
.icon.fa-gem:before,
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  content: '' !important;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.85em 0.85em;
  mask-size: 0.85em 0.85em;
}

a.special:not(.button):before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='black' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='black' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/></svg>");
  -webkit-mask-size: 0.55em 0.9em;
  mask-size: 0.55em 0.9em;
}

ul.contact li.fa-home:before {
  font-weight: 900 !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M280.4 1.3c-15.2-7.2-33.1-4.4-45.2 6.9L16 220.7C6 229.8 0 242.3 0 255.6V488c0 13.3 10.7 24 24 24h144c13.3 0 24-10.7 24-24V360c0-22.1 17.9-40 40-40h112c22.1 0 40 17.9 40 40v128c0 13.3 10.7 24 24 24h144c13.3 0 24-10.7 24-24V255.6c0-13.3-6-25.8-16-34.9L340.8 8.2c-12.1-11.3-30-14.1-45.2-6.9z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M280.4 1.3c-15.2-7.2-33.1-4.4-45.2 6.9L16 220.7C6 229.8 0 242.3 0 255.6V488c0 13.3 10.7 24 24 24h144c13.3 0 24-10.7 24-24V360c0-22.1 17.9-40 40-40h112c22.1 0 40 17.9 40 40v128c0 13.3 10.7 24 24 24h144c13.3 0 24-10.7 24-24V255.6c0-13.3-6-25.8-16-34.9L340.8 8.2c-12.1-11.3-30-14.1-45.2-6.9z'/></svg>");
}

ul.contact li.fa-phone:before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C9.9 366.5 4 378.1 6.6 389.4l24 104C34.7 504.1 44.9 512 56.5 512 281.9 512 464 329.9 464 104.5c0-11.6-7.9-21.8-19.6-24.9z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C9.9 366.5 4 378.1 6.6 389.4l24 104C34.7 504.1 44.9 512 56.5 512 281.9 512 464 329.9 464 104.5c0-11.6-7.9-21.8-19.6-24.9z'/></svg>");
}

ul.contact li.fa-envelope:before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/></svg>");
}

.icon.fa-gem:before {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M485.5 83.1l-32-51.2C444.1 17.6 429.5 8 413.1 8H162.9c-16.4 0-31 9.6-40.4 23.9l-32 51.2c-5.7 9.1-5.7 20.8 0 29.9l32 51.2c9.4 14.3 24 23.9 40.4 23.9h250.2c16.4 0 31-9.6 40.4-23.9l32-51.2c5.7-9.1 5.7-20.8 0-29.9zM128 288l64 192h192l64-192H128z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='black' d='M485.5 83.1l-32-51.2C444.1 17.6 429.5 8 413.1 8H162.9c-16.4 0-31 9.6-40.4 23.9l-32 51.2c-5.7 9.1-5.7 20.8 0 29.9l32 51.2c9.4 14.3 24 23.9 40.4 23.9h250.2c16.4 0 31-9.6 40.4-23.9l32-51.2c5.7-9.1 5.7-20.8 0-29.9zM128 288l64 192h192l64-192H128z'/></svg>");
  -webkit-mask-size: 1.1em 1.1em;
  mask-size: 1.1em 1.1em;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  background-color: #2e3141 !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M173.9 439.4L7 272.5c-9.4-9.4-9.4-24.6 0-33.9l34-33.9c9.4-9.4 24.6-9.4 33.9 0L192 289.1 437.1 44c9.4-9.4 24.6-9.4 33.9 0l34 33.9c9.4 9.4 9.4 24.6 0 33.9L206.9 439.4c-9.4 9.4-24.6 9.4-34 0z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='black' d='M173.9 439.4L7 272.5c-9.4-9.4-9.4-24.6 0-33.9l34-33.9c9.4-9.4 24.6-9.4 33.9 0L192 289.1 437.1 44c9.4-9.4 24.6-9.4 33.9 0l34 33.9c9.4 9.4 9.4 24.6 0 33.9L206.9 439.4c-9.4 9.4-24.6 9.4-34 0z'/></svg>");
  -webkit-mask-size: 0.7em 0.7em;
  mask-size: 0.7em 0.7em;
}