/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
html,
body {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
}
.pd-30 {
  padding: 30px;
}
h1.entry-title {
  font-size: 40px;
  background-image: linear-gradient(180deg, #feffdb 0%, #fbb120 100%);
}
.gwd-breadcrumb {
  position: relative;
  z-index: 1;
}
.gwd-breadcrumb * {
  color: #fff;
}
.single-post #wrapper #main::before,
.archive #wrapper #main::before {
  content: "";
  background: url(/wp-content/uploads/2026/08/f1-3.webp);
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: -200px;
  background-size: cover;
}
.gwd-breadcrumb .last {
  color: #f1b90a;
}
.posted-on {
  color: #ac8c4f;
  font-size: 16px;
  text-transform: none;
}

.section-glow-blur {
  background: url(/wp-content/uploads/2026/08/bg-3-1.webp);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  background-position: center;
  position: absolute;
  top: 0;
  transform: translate(50%, 0);
  right: 50%;
  height: 50vh;
}
.has-transparent + .gwd-breadcrumb {
  padding-top: 150px;
}
.has-transparent + #main > .blog-wrapper {
  padding-top: 120px;
}

.has-transparent + .gwd-breadcrumb + #main > .blog-wrapper {
  padding-top: 0;
}

.entry-content.single-page {
  padding-top: 0;
}
.entry-divider {
  display: none !important;
}
.font-40 * {
  font-size: 40px !important;
}
.height-500 {
  max-height: 500px;
  overflow-y: auto;
}
body .transparent .header-main {
  height: 100px;
}
.ux-menu-link__link {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.title_main_footer {
  font-weight: bold;
}
.stack_view {
  display: flex;
  align-items: center;
}
.font-80 * {
  font-size: 80px !important;
  margin-bottom: 0;
}
.text-bold * {
  font-weight: 600;
}
.font-32 * {
  font-size: 32px !important;
  font-weight: bold;
  margin-bottom: 0px;
}
.img-9 .img {
  min-width: calc(100% / 10 - 5px) !important;
}
.header-nav-main.nav-left a {
  font-size: 20px;
  font-weight: 400;
}
.header-nav-main.nav-left .current-menu-item a {
  background: linear-gradient(180deg, #feffdb 0%, #fbb120 100%);
  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}
#masthead > .header-inner > .hide-for-medium.flex-left > .header-nav-main {
  width: max-content;
  padding-left: 15px;
  padding-right: 50px;
}
#masthead > .header-inner > .flex-col {
  height: 100%;
}
#masthead .header-nav {
  height: 100%;
}
#masthead > .header-inner > .hide-for-medium.flex-left > .header-nav-main li {
  z-index: 1;
  margin-right: 40px;
}

#masthead #logo {
  z-index: 2;
  margin-right: 0;
  padding-left: 15px;
}

#masthead > .header-inner > .hide-for-medium.flex-left > .header-nav-main {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

#masthead > .header-inner > .hide-for-medium.flex-left > .header-nav-main {
  position: relative;
  isolation: isolate;
}

#masthead
  > .header-inner
  > .hide-for-medium.flex-left
  > .header-nav-main::after {
  content: "";
  position: absolute;

  width: calc(100% + 200px);
  height: 100%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
}
#masthead
  > .header-inner
  > .hide-for-medium.flex-left
  > .header-nav-main::before {
  content: "";
  position: absolute;
  width: calc(100% + 200px - 1.5px);
  height: calc(100% - 1.5px);
  right: 0.75px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
}
#masthead .html_topbar_left > * {
  color: #fff;
  z-index: 1;
}
#masthead .html_topbar_left {
  width: 100px;
  height: 100px;

  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
#masthead .html_topbar_left {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100px;
  height: 100px;
  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 50% 120%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 18%,
      rgba(255, 255, 255, 0.03) 40%,
      transparent 65%
    ),
    linear-gradient(
      180deg,
      rgba(28, 28, 28, 0.82) 0%,
      rgba(15, 15, 15, 0.72) 100%
    );

  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);

  box-shadow:
    inset 0 -30px 40px rgba(255, 255, 255, 0.02),
    0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Border */
#masthead .html_topbar_left::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from 180deg,
    rgb(23 23 23) 0deg,
    rgb(22 22 22) 15deg,
    rgb(22 23 23) 30deg,
    rgb(23 24 24) 45deg,
    rgb(23 24 23) 60deg,
    rgb(23 24 24) 75deg,
    rgb(255 255 255 / 30%) 88deg,
    rgb(255 255 255 / 60%) 105deg,
    rgba(255, 255, 255, 0.8) 120deg,
    rgba(255, 255, 255, 0.8) 135deg,
    rgba(255, 255, 255, 0.8) 150deg,
    rgb(255 255 255 / 44%) 165deg,
    rgb(22 23 23) 180deg,
    rgb(23 24 24) 195deg,
    rgb(23 23 23) 210deg,
    rgb(22 23 23) 225deg,
    rgb(21 22 22) 240deg,
    rgb(21 22 22) 255deg,
    rgb(23 23 23) 270deg,
    rgb(255 255 255 / 40%) 285deg,
    rgba(255, 255, 255, 0.8) 300deg,
    rgba(255, 255, 255, 0.8) 315deg,
    rgba(255, 255, 255, 0.8) 330deg,
    rgb(255 255 255 / 35%) 345deg,
    rgb(22 23 23) 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 1px),
    #000 calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 1px),
    #000 calc(100% - 3px)
  );
  opacity: 0.9;
}

/* Vệt phản chiếu */
#masthead .html_topbar_left::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: radial-gradient(
    ellipse 65% 45% at 50% 105%,
    rgba(255, 255, 255, 0.18) 0%,
    rgb(255 255 255 / 10%) 40%,
    transparent 100%
  );

  mix-blend-mode: screen;
  opacity: 0.8;
}

#masthead .html_topbar_left > * {
  position: relative;
  z-index: 2;
  color: #fff;
}
.page-template-page-transparent-header #header {
  margin-top: 15px;
}
#masthead .header-button a {
  background: url(/wp-content/uploads/2026/07/vector.svg);
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: unset;
  width: 189px;
  height: 45px;
  min-height: unset;
  border-radius: unset !important;
  border: unset !important;
  color: #0a0a0d;
  text-transform: uppercase !important;
  font-weight: 600;
}

#masthead
  > .header-inner
  > .hide-for-medium.flex-left
  > .header-nav-main::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 80% 120% at 50% 120%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.08) 30%,
      rgba(255, 255, 255, 0.02) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle at 25% 65%,
      rgba(255, 255, 255, 0.06),
      transparent 18%
    ),
    radial-gradient(
      circle at 50% 55%,
      rgba(255, 255, 255, 0.05),
      transparent 15%
    ),
    radial-gradient(
      circle at 75% 65%,
      rgba(255, 255, 255, 0.06),
      transparent 18%
    ),
    linear-gradient(34deg, rgba(28, 28, 28, 0.82), rgba(15, 15, 15, 0.72));

  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);

  box-shadow:
    inset 0 -30px 40px rgba(255, 255, 255, 0.02),
    0 12px 30px rgba(0, 0, 0, 0.35);
}

#masthead
  > .header-inner
  > .hide-for-medium.flex-left
  > .header-nav-main::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  padding: 1px;
  z-index: -1;
  pointer-events: none;

  background: conic-gradient(
    from 180deg,

    /* 9h -> 12h */ rgb(21 23 25 / 0%) 0deg,
    rgb(255 255 255 / 0%) 18deg,
    rgb(255 255 255 / 0%) 36deg,
    rgb(255 255 255 / 0%) 54deg,
    rgb(255 255 255 / 0%) 72deg,
    rgb(255 255 255 / 0%) 80deg,
    rgb(255 255 255) 95deg,
    rgb(255 255 255 / 0%) 105deg,
    rgb(255 255 255 / 0%) 108deg,
    rgb(255 255 255 / 0%) 126deg,
    rgb(255 255 255 / 0%) 144deg,
    rgb(255 255 255 / 0%) 162deg,

    /* 3h -> 6h (mirror) */ rgb(21 23 25 / 0%) 180deg,
    rgb(255 255 255 / 0%) 198deg,
    rgb(255 255 255 / 0%) 216deg,
    rgb(255 255 255 / 0%) 234deg,
    rgb(255 255 255 / 0%) 252deg,
    rgb(255 255 255 / 0%) 260deg,
    rgb(255 255 255) 275deg,
    rgb(255 255 255 / 0%) 285deg,
    rgb(255 255 255 / 0%) 288deg,
    rgb(255 255 255 / 0%) 306deg,
    rgb(255 255 255 / 0%) 324deg,
    rgb(255 255 255 / 0%) 342deg,
    rgb(21 23 25 / 0%) 360deg
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;
}