.elementor .e-58b861e-aebae7b{font-family:"Be Vietnam Pro";font-weight:700;font-size:56px;}.elementor .e-018971b-0d4491d{font-family:"Be Vietnam Pro";font-weight:700;font-size:56px;}.elementor .e-1823dbc-a3114a8{font-family:"Be Vietnam Pro";font-size:18px;}.elementor .e-6c891c6-58244ff{gap:20px;}.elementor .e-0895140-287c3d3{gap:20px;}.elementor .e-c1f07b4-94cf678{width:53%;flex-direction:column;justify-content:center;}.elementor .e-7c012a0-483ee8a{width:47%;}.elementor .e-f2edfa1-ac50a43{justify-content:space-between;}.elementor .e-2a1ef60-ef81e32{width:1280px;justify-content:center;/* =========================================================
 NGUYÊN BẢN HERO
 FULL CLEAN RESPONSIVE CSS
 DESKTOP / TABLET / MOBILE
 FIX EMPTY VERTICAL SPACE
 ========================================================= */


/* =========================================================
 VARIABLES
 ========================================================= */

.nb-hero-main {
  --nb-blue: #2F6DF6;
  --nb-blue-hover: #235FE7;
  --nb-navy: #0A225F;
  --nb-text: #53617C;
  --nb-muted: #8996AC;
  --nb-soft: #EEF5FF;
  --nb-border: #9DBEFF;
}


/* =========================================================
 OUTER HERO WRAPPER
 ========================================================= */

.elementor-element-2a1ef60 {
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  padding: 46px 28px 36px !important;

  margin: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
 MAIN HERO
 ========================================================= */

.nb-hero-main {
  width: 100% !important;
  max-width: 1440px !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 42px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: transparent !important;
}


/* =========================================================
 LEFT COLUMN
 ========================================================= */

.nb-hero-copy {
  width: 47% !important;

  flex: 0 1 47% !important;

  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: transparent !important;
}


/* =========================================================
 RIGHT COLUMN
 ========================================================= */

.nb-hero-media {
  width: 53% !important;

  flex: 0 1 53% !important;

  min-width: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: transparent !important;
}


/* =========================================================
 BADGE
 ========================================================= */

.nb-hero-badge {
  width: auto !important;

  margin: 0 0 18px 0 !important;

  padding: 0 !important;
}


.nb-hero-badge .elementor-button {
  width: auto !important;

  min-height: auto !important;

  padding: 8px 16px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: #EAF3FF !important;

  color: #2869F5 !important;

  box-shadow: none !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  text-transform: uppercase !important;

  letter-spacing: 0 !important;
}


.nb-hero-badge .elementor-button-text {
  color: #2869F5 !important;

  font-size: 12px !important;
  line-height: 1 !important;

  font-weight: 800 !important;
}


/* =========================================================
 TITLE MAIN
 ========================================================= */

.nb-hero-title-main {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--nb-navy) !important;

  font-size: clamp(54px, 4vw, 66px) !important;

  line-height: .99 !important;

  font-weight: 800 !important;

  letter-spacing: -.045em !important;

  box-sizing: border-box !important;
}


.nb-hero-title-main strong,
.nb-hero-title-main span {
  color: inherit !important;

  font-weight: inherit !important;
}


/* =========================================================
 TITLE BLUE
 ========================================================= */

.nb-hero-title-blue {
  width: 100% !important;

  margin: 0 0 22px 0 !important;

  padding: 0 !important;

  color: var(--nb-blue) !important;

  font-size: clamp(54px, 4vw, 66px) !important;

  line-height: .99 !important;

  font-weight: 800 !important;

  letter-spacing: -.045em !important;

  box-sizing: border-box !important;
}


.nb-hero-title-blue strong,
.nb-hero-title-blue span {
  color: inherit !important;

  font-weight: inherit !important;
}


/* =========================================================
 DESCRIPTION
 ========================================================= */

.nb-hero-desc {
  width: 100% !important;

  margin: 0 0 27px 0 !important;

  padding: 0 !important;

  color: var(--nb-text) !important;

  font-size: 16px !important;
  line-height: 1.68 !important;

  font-weight: 400 !important;

  letter-spacing: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
 ACTIONS
 ========================================================= */

.nb-hero-actions {
  width: 100% !important;

  display: flex !important;

  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 14px !important;

  margin: 0 0 29px 0 !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  background: transparent !important;
}


/* =========================================================
 BUTTON BASE
 ========================================================= */

.nb-hero-primary,
.nb-hero-secondary {
  width: auto !important;

  flex: 0 0 auto !important;
}


.nb-hero-primary .elementor-button,
.nb-hero-secondary .elementor-button {
  min-height: 52px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 25px !important;

  border-radius: 10px !important;

  font-size: 14px !important;
  line-height: 1 !important;

  font-weight: 700 !important;

  white-space: nowrap !important;

  text-decoration: none !important;

  transition:
      background .2s ease,
      border-color .2s ease,
      box-shadow .2s ease,
      transform .2s ease !important;
}


 /* =========================================================
 PRIMARY BUTTON
 ========================================================= */

.nb-hero-primary .elementor-button {
min-width: 220px !important;

background: var(--nb-blue) !important;

border: 1px solid var(--nb-blue) !important;

color: #FFFFFF !important;

box-shadow:
    0 10px 25px rgba(47, 109, 246, .16) !important;

transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


.nb-hero-primary .elementor-button:hover {
background: var(--nb-blue-hover) !important;

border-color: var(--nb-blue-hover) !important;

box-shadow:
    0 13px 28px rgba(47, 109, 246, .22) !important;

transform: translateY(-1px);
}


/* =========================================================
 PRIMARY TEXT
 DÙNG CHỮ MẶC ĐỊNH NHẬP TRONG ELEMENTOR
 ========================================================= */

.nb-hero-primary .elementor-button-text {
font-size: 14px !important;
line-height: 1.2 !important;

font-weight: 700 !important;

color: #FFFFFF !important;
}


/* =========================================================
 SECONDARY BUTTON
 ========================================================= */

.nb-hero-secondary .elementor-button {
min-width: 190px !important;

background: #FFFFFF !important;

border: 1px solid var(--nb-border) !important;

color: var(--nb-blue) !important;

box-shadow: none !important;

transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.nb-hero-secondary .elementor-button:hover {
background: #F7FAFF !important;

border-color: var(--nb-blue) !important;

transform: translateY(-1px);
}


/* =========================================================
 SECONDARY TEXT
 DÙNG CHỮ MẶC ĐỊNH NHẬP TRONG ELEMENTOR
 ========================================================= */

.nb-hero-secondary .elementor-button-text {
font-size: 14px !important;
line-height: 1.2 !important;

font-weight: 700 !important;

color: var(--nb-blue) !important;
}


/* =========================================================
 USP ROW
 ========================================================= */

.nb-hero-usps {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

  align-items: center !important;

  gap: 16px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: transparent !important;
}


/* =========================================================
 USP ITEM
 ========================================================= */

.nb-hero-usp {
  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* =========================================================
 USP WRAPPER
 ========================================================= */

.nb-hero-usp .elementor-icon-box-wrapper {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
      38px
      minmax(0, 1fr) !important;

  align-items: center !important;

  gap: 10px !important;

  text-align: left !important;
}


/* =========================================================
 USP ICON
 ========================================================= */

.nb-hero-usp .elementor-icon-box-icon {
  width: 38px !important;
  height: 38px !important;

  margin: 0 !important;
}


.nb-hero-usp .elementor-icon {
  width: 38px !important;
  height: 38px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: var(--nb-soft) !important;

  color: var(--nb-blue) !important;
}


.nb-hero-usp .elementor-icon svg {
  width: 16px !important;
  height: 16px !important;

  fill: var(--nb-blue) !important;
}


.nb-hero-usp .elementor-icon svg path {
  fill: var(--nb-blue) !important;
}


/* =========================================================
 USP TEXT
 ========================================================= */

.nb-hero-usp .elementor-icon-box-content {
  min-width: 0 !important;
}


.nb-hero-usp .elementor-icon-box-title {
  margin: 0 0 2px 0 !important;

  padding: 0 !important;

  color: var(--nb-navy) !important;

  font-size: 12px !important;
  line-height: 1.3 !important;

  font-weight: 800 !important;

  white-space: nowrap !important;
}


.nb-hero-usp .elementor-icon-box-title span {
  color: var(--nb-navy) !important;
}


.nb-hero-usp .elementor-icon-box-description {
  margin: 0 !important;

  padding: 0 !important;

  color: var(--nb-muted) !important;

  font-size: 10px !important;
  line-height: 1.35 !important;

  font-weight: 400 !important;

  white-space: nowrap !important;
}


/* =========================================================
 IMAGE
 ========================================================= */

.nb-hero-media .elementor-widget-image {
  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;
}


.nb-hero-media .elementor-widget-image img {
  display: block !important;

  width: 100% !important;
  max-width: 720px !important;

  height: auto !important;

  margin: 0 auto !important;

  object-fit: contain !important;
}


/* =========================================================
 DESKTOP SMALL
 <= 1280px
 ========================================================= */

@media (max-width: 1280px) {

  .elementor-element-2a1ef60 {
      padding-left: 24px !important;
      padding-right: 24px !important;
  }


  .nb-hero-main {
      gap: 28px !important;
  }


  .nb-hero-copy {
      width: 48% !important;

      flex: 0 1 48% !important;
  }


  .nb-hero-media {
      width: 52% !important;

      flex: 0 1 52% !important;
  }


  .nb-hero-title-main,
  .nb-hero-title-blue {
      font-size: 52px !important;
  }


  .nb-hero-desc {
      font-size: 14px !important;
  }


  .nb-hero-primary .elementor-button,
  .nb-hero-secondary .elementor-button {
      padding: 0 19px !important;
  }


  .nb-hero-primary .elementor-button {
      min-width: 195px !important;
  }


  .nb-hero-secondary .elementor-button {
      min-width: 170px !important;
  }


  .nb-hero-primary .elementor-button-text::before,
  .nb-hero-secondary .elementor-button-text::before {
      font-size: 12px !important;
  }


  .nb-hero-primary .elementor-button-text::after,
  .nb-hero-secondary .elementor-button-text::after {
      margin-left: 10px;

      font-size: 15px !important;
  }


  .nb-hero-usps {
      gap: 10px !important;
  }


  .nb-hero-usp .elementor-icon-box-wrapper {
      grid-template-columns:
          34px
          minmax(0,1fr) !important;

      gap: 8px !important;
  }


  .nb-hero-usp .elementor-icon-box-icon,
  .nb-hero-usp .elementor-icon {
      width: 34px !important;
      height: 34px !important;
  }


  .nb-hero-usp .elementor-icon svg {
      width: 14px !important;
      height: 14px !important;
  }


  .nb-hero-usp .elementor-icon-box-title {
      font-size: 10px !important;
  }


  .nb-hero-usp .elementor-icon-box-description {
      font-size: 9px !important;
  }
}


/* =========================================================
 TABLET
 <= 1024px
 ========================================================= */

@media (max-width: 1024px) {

  /* =====================================================
     OUTER HERO
     IMPORTANT:
     REMOVE ELEMENTOR MIN HEIGHT / EMPTY SPACE
     ===================================================== */

  .elementor-element-2a1ef60 {
      width: 100% !important;

      min-height: 0 !important;
      height: auto !important;

      align-items: stretch !important;
      justify-content: flex-start !important;

      padding-top: 0 !important;
      padding-right: 22px !important;
      padding-bottom: 0 !important;
      padding-left: 22px !important;

      margin-top: 0 !important;
      margin-bottom: 0 !important;
  }


  /* =====================================================
     MAIN HERO
     ===================================================== */

  .nb-hero-main {
      width: 100% !important;
      max-width: 100% !important;

      min-height: 0 !important;
      height: auto !important;

      flex-direction: column !important;
      flex-wrap: nowrap !important;

      align-items: stretch !important;
      justify-content: flex-start !important;

      gap: 28px !important;

      margin-top: 0 !important;
      margin-right: auto !important;
      margin-bottom: 0 !important;
      margin-left: auto !important;

      padding: 0 !important;
  }


  /* =====================================================
     COLUMN
     ===================================================== */

  .nb-hero-copy,
  .nb-hero-media {
      width: 100% !important;

      flex: 0 0 auto !important;

      min-width: 0 !important;
  }


  .nb-hero-copy {
      max-width: 720px !important;

      margin-left: auto !important;
      margin-right: auto !important;
  }


  .nb-hero-media {
      max-width: 760px !important;

      margin-left: auto !important;
      margin-right: auto !important;
  }


  /* =====================================================
     TITLE
     ===================================================== */

  .nb-hero-title-main,
  .nb-hero-title-blue {
      width: 100% !important;

      font-size: 50px !important;
  }


  /* =====================================================
     DESCRIPTION
     ===================================================== */

  .nb-hero-desc {
      font-size: 16px !important;
  }


  /* =====================================================
     BUTTONS
     ===================================================== */

  .nb-hero-primary .elementor-button {
      min-width: 220px !important;
  }


  .nb-hero-secondary .elementor-button {
      min-width: 190px !important;
  }


  .nb-hero-primary .elementor-button-text::before,
  .nb-hero-secondary .elementor-button-text::before {
      font-size: 14px !important;
  }


  /* =====================================================
     USP
     ===================================================== */

  .nb-hero-usps {
      gap: 16px !important;
  }


  .nb-hero-usp .elementor-icon-box-wrapper {
      grid-template-columns:
          38px
          minmax(0,1fr) !important;

      gap: 10px !important;
  }


  .nb-hero-usp .elementor-icon-box-icon,
  .nb-hero-usp .elementor-icon {
      width: 38px !important;
      height: 38px !important;
  }


  .nb-hero-usp .elementor-icon svg {
      width: 16px !important;
      height: 16px !important;
  }


  .nb-hero-usp .elementor-icon-box-title {
      font-size: 12px !important;
  }


  .nb-hero-usp .elementor-icon-box-description {
      font-size: 10px !important;
  }


  /* =====================================================
     IMAGE
     ===================================================== */

  .nb-hero-media .elementor-widget-image img {
      width: 100% !important;

      max-width: 720px !important;

      height: auto !important;

      margin: 0 auto !important;
  }
}


/* =========================================================
 MOBILE
 <= 767px
 ========================================================= */

@media (max-width: 767px) {

  /* =====================================================
     OUTER HERO
     ===================================================== */

  .elementor-element-2a1ef60 {
      width: 100% !important;

      min-height: 0 !important;
      height: auto !important;

      align-items: stretch !important;
      justify-content: flex-start !important;

      padding-top: 0 !important;
      padding-right: 16px !important;
      padding-bottom: 0 !important;
      padding-left: 16px !important;

      margin-top: 0 !important;
      margin-bottom: 0 !important;
  }


  /* =====================================================
     MAIN HERO
     ===================================================== */

  .nb-hero-main {
      width: 100% !important;
      max-width: 100% !important;

      min-height: 0 !important;
      height: auto !important;

      flex-direction: column !important;
      flex-wrap: nowrap !important;

      align-items: stretch !important;
      justify-content: flex-start !important;

      gap: 20px !important;

      margin-top: 0 !important;
      margin-right: auto !important;
      margin-bottom: 0 !important;
      margin-left: auto !important;

      padding: 0 !important;
  }


  /* =====================================================
     COLUMN
     ===================================================== */

  .nb-hero-copy,
  .nb-hero-media {
      width: 100% !important;

      max-width: 100% !important;

      flex: 0 0 auto !important;

      min-width: 0 !important;
  }


  .nb-hero-copy {
      margin-left: 0 !important;
      margin-right: 0 !important;
  }


  .nb-hero-media {
      margin-left: 0 !important;
      margin-right: 0 !important;
  }


  /* =====================================================
     BADGE
     ===================================================== */

  .nb-hero-badge {
      margin-top: 0 !important;
      margin-right: 0 !important;
      margin-bottom: 14px !important;
      margin-left: 0 !important;
  }


  .nb-hero-badge .elementor-button {
      padding: 7px 13px !important;

      font-size: 11px !important;
  }


  .nb-hero-badge .elementor-button-text {
      font-size: 11px !important;
  }


  /* =====================================================
     TITLE
     ===================================================== */

  .nb-hero-title-main,
  .nb-hero-title-blue {
      width: 100% !important;

      font-size: clamp(
          38px,
          10vw,
          46px
      ) !important;

      line-height: 1.02 !important;
  }


  .nb-hero-title-main {
      margin: 0 !important;
  }


  .nb-hero-title-blue {
      margin:
          0
          0
          18px
          0 !important;
  }


  /* =====================================================
     DESCRIPTION
     ===================================================== */

  .nb-hero-desc {
      width: 100% !important;

      margin:
          0
          0
          22px
          0 !important;

      font-size: 15px !important;
      line-height: 1.62 !important;
  }


  /* =====================================================
     ACTIONS
     ===================================================== */

  .nb-hero-actions {
      width: 100% !important;

      flex-direction: column !important;
      flex-wrap: nowrap !important;

      align-items: stretch !important;
      justify-content: flex-start !important;

      gap: 10px !important;

      margin:
          0
          0
          24px
          0 !important;
  }


  .nb-hero-primary,
  .nb-hero-secondary {
      width: 100% !important;
  }


  .nb-hero-primary .elementor-button,
  .nb-hero-secondary .elementor-button {
      width: 100% !important;

      min-width: 0 !important;
      min-height: 50px !important;
  }


  /* =====================================================
     USP
     ===================================================== */

  .nb-hero-usps {
      width: 100% !important;

      grid-template-columns: 1fr !important;

      gap: 13px !important;

      margin: 0 !important;
  }


  .nb-hero-usp .elementor-icon-box-title,
  .nb-hero-usp .elementor-icon-box-description {
      white-space: normal !important;
  }


  /* =====================================================
     IMAGE
     ===================================================== */

  .nb-hero-media .elementor-widget-image {
      width: 100% !important;

      margin: 0 !important;

      padding: 0 !important;
  }


  .nb-hero-media .elementor-widget-image img {
      display: block !important;

      width: 100% !important;
      max-width: 100% !important;

      height: auto !important;

      margin: 0 auto !important;

      object-fit: contain !important;
  }
}


/* =========================================================
 SMALL MOBILE
 <= 480px
 ========================================================= */

@media (max-width: 480px) {

  .elementor-element-2a1ef60 {
      min-height: 0 !important;
      height: auto !important;

      padding-top: 0 !important;
      padding-right: 14px !important;
      padding-bottom: 0 !important;
      padding-left: 14px !important;
  }


  .nb-hero-main {
      min-height: 0 !important;
      height: auto !important;

      gap: 18px !important;
  }


  .nb-hero-title-main,
  .nb-hero-title-blue {
      width: 100% !important;

      font-size: 38px !important;

      line-height: 1.02 !important;
  }


  .nb-hero-desc {
      font-size: 14px !important;
  }


  .nb-hero-primary .elementor-button,
  .nb-hero-secondary .elementor-button {
      min-height: 50px !important;
  }
}\n}.elementor .e-fb517a2-5c918ad{display:none;}.elementor .e-e70bc7e-1dc002a{justify-content:center;}