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

/*************** ADD Core COMPONENT CSS HERE.   ***************/

:root {
  /* ——— Core hues mapped to brand ——— */
  --bs-primary: #2e263d; /* G-Empire */
  --bs-secondary: #fff; /* Dark Gray / White Foil */
  --bs-info: #0033a0; /* Cobalt */
  --bs-warning: #e0a822; /* Royal Yellow */
  --bs-success: #2e7d32; /* Calm green for success (AA) */
  --bs-danger: #d5393a; /* Accessible red for errors */
  --bs-dark: #000000; /* Black Foil */
  --bs-light: #f5f6f8;
  --bs-white: #ffffff;
  --bs-black: #2e263d;

  /* ——— Bootstrap aliases (đừng đổi tên) ——— */
  --bs-blue: #0033a0; /* map blue -> cobalt */
  --bs-indigo: #2e263d; /* align to primary */
  --bs-navy: #2e263d;
  --bs-pink: #e83e8c;
  --bs-red: #d5393a;
  --bs-orange: #e0a822;
  --bs-yellow: #e0a822;
  --bs-green: #2e7d32;
  --bs-teal: #2b8f8d;
  --bs-cyan: #2a6bdc;

  /* ——— Grays tuned around brand ——— */
  --bs-gray-25: #fafafa;
  --bs-gray-50: #f3f3f5;
  --bs-gray-75: #eeeff2;
  --bs-gray-100: #e8e7eb;
  --bs-gray-200: #d7d6dc;
  --bs-gray-300: #c6c4cd;
  --bs-gray-400: #b4b1bd;
  --bs-gray-500: #a3a0ad;
  --bs-gray-600: #fff; /* brand gray */
  --bs-gray-700: #6f697a;
  --bs-gray-800: #554e63;
  --bs-gray-900: #3d354d;
  --bs-gray: var(--bs-gray-200);
  --bs-gray-dark: #585164;

  /* ——— RGB (nhiều component cần) ——— */
  --bs-primary-rgb: 46, 38, 61;
  --bs-secondary-rgb: 152, 152, 154;
  --bs-success-rgb: 0, 206, 182;
  --bs-info-rgb: 0, 161, 255;
  --bs-warning-rgb: 255, 174, 31;
  --bs-danger-rgb: 255, 102, 146;
  --bs-light-rgb: 239, 244, 250;
  --bs-dark-rgb: 0, 0, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 46, 38, 61;

  /* ——— Typography / links ——— */
  --bs-body-color: #6d6777;
  --bs-body-color-rgb: 89, 83, 102;
  --bs-body-bg: #f8f9fb;
  --bs-emphasis-color: #2e263d;
  --bs-emphasis-color-rgb: 46, 38, 61;
  --bs-heading-color: color-mix(in oklab, #2e263d 90%, #0033a0);
  --bs-heading-page-color: color-mix(in oklab, #2e263d 55%, #0033a0);
  --bs-link-color: #0033a0;
  --bs-link-hover-color: color-mix(in oklab, #0033a0 70%, #2e263d);
  --bs-secondary-color: #fff;

  /* ——— Subtle surfaces ——— */
  --bs-primary-bg-subtle: color-mix(in oklab, #2e263d 12%, #fff);
  --bs-secondary-bg-subtle: color-mix(in oklab, #fff 14%, #fff);
  --bs-success-bg-subtle: color-mix(in oklab, #2e7d32 12%, #fff);
  --bs-info-bg-subtle: color-mix(in oklab, #0033a0 12%, #fff);
  --bs-warning-bg-subtle: color-mix(in oklab, #e0a822 16%, #fff);
  --bs-danger-bg-subtle: color-mix(in oklab, #d5393a 14%, #fff);
  --bs-light-bg-subtle: #f5f6f8;
  --bs-dark-bg-subtle: #dedde2;

  --bs-primary-border-subtle: color-mix(in oklab, #2e263d 26%, #fff);
  --bs-secondary-border-subtle: color-mix(in oklab, #fff 28%, #fff);
  --bs-success-border-subtle: color-mix(in oklab, #2e7d32 28%, #fff);
  --bs-info-border-subtle: color-mix(in oklab, #0033a0 26%, #fff);
  --bs-warning-border-subtle: color-mix(in oklab, #e0a822 30%, #fff);
  --bs-danger-border-subtle: color-mix(in oklab, #d5393a 28%, #fff);

  /* ——— Borders / Shadows / Focus ——— */
  --bs-border-color: color-mix(in oklab, #2e263d 14%, #fff);
  --bs-border-color-translucent: rgba(46, 38, 61, 0.08);
  --bs-box-shadow: 0 0.25rem 0.75rem rgba(46, 38, 61, 0.18);
  --bs-box-shadow-sm: 0 0.1875rem 0.5rem rgba(46, 38, 61, 0.16);
  --bs-box-shadow-lg: 0 0.375rem 1.25rem rgba(46, 38, 61, 0.22);
  --bs-focus-ring-color: color-mix(in oklab, #0033a0 40%, #2e263d);
  --bs-focus-ring-opacity: 0.75;

  --bs-font-sans-serif:
    "Geist", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bs-font-monospace:
    "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New",
    monospace;
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );

  /* Loading state */

  --ge-primary: #c04cfd;
  --ge-primary-weak: #e2b4ff;
  --ge-ring: #ffffff;
  --ge-size: 250px;
  --ge-center: 150px;

  /* Body */
  --bs-root-font-size: 1rem;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.375;
  --bs-body-color: #6d6777;
  --bs-body-color-rgb: 109, 103, 119;
  --bs-body-bg: #f4f5fa;
  --bs-body-bg: #f8f9fb;
  --bs-body-bg-rgb: 244, 245, 250;
  --bs-emphasis-color: #2e263d;
  --bs-emphasis-color-rgb: 46, 38, 61;
  --bs-secondary-color: #aba8b1;
  --bs-secondary-color-rgb: 171, 168, 177;
  --bs-secondary-bg: #d5d4d8;
  --bs-secondary-bg-rgb: 213, 212, 216;
  --bs-tertiary-color: rgba(109, 103, 119, 0.5);
  --bs-tertiary-color-rgb: 109, 103, 119;
  --bs-tertiary-bg: #dfdfe3;
  --bs-tertiary-bg-rgb: 223, 223, 227;
  --bs-heading-color: color-mix(in sRGB, #1b1d1f 90%, #11329a);
  --bs-heading-page-color: color-mix(in sRGB, #1b1d1f 50%, #11329a);
  --bs-link-color: #232847;
  --bs-link-color-rgb: 140, 87, 255;
  --bs-link-decoration: none;
  --bs-link-hover-color: #7e4ee6;
  --bs-link-hover-color-rgb: 126, 78, 230;
  --bs-code-color: #e83e8c;
  --bs-highlight-color: #6d6777;
  --bs-highlight-bg: #fff0cc;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: color-mix(in sRGB, #2e263d 12%, #fff);
  --bs-border-color-translucent: rgba(46, 38, 61, 0.075);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.625rem;
  --bs-border-radius-xxl: 1rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.25rem 0.625rem 0 rgba(46, 38, 61, 0.2);
  --bs-box-shadow-sm: 0 0.1875rem 0.375rem 0 rgba(46, 38, 61, 0.18);
  --bs-box-shadow-lg: 0 0.375rem 1rem 0 rgba(46, 38, 61, 0.22);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(46, 38, 61, 0.075);
  --bs-focus-ring-width: 0.15rem;
  --bs-focus-ring-opacity: 0.75;
  --bs-focus-ring-color: rgba(109, 103, 119, 0.75);
  --bs-form-valid-color: #56ca00;
  --bs-form-valid-border-color: #56ca00;
  --bs-form-invalid-color: #ff4c51;
  --bs-form-invalid-border-color: #ff4c51;
}

/* Layout reset */

/* .row-large>.col, .row-large>.flickity-viewport>.flickity-slider>.col {
    padding: 0;
} */

.col {
  padding: 0;
}

.section_banner p {
  text-align: unset;
}
p {
  text-align: justify;
}

.container .row:not(.row-collapse),
.lightbox-content .row:not(.row-collapse),
.row .gallery,
.row .row:not(.row-collapse) {
  margin: 0;
}

/* background */

.section_mission {
  position: relative;
}

.section_mission::after {
  content: "";
  position: absolute;
  background-image: url("./assets/images/background/background-vector.png");
  background-size: cover;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  background-position: bottom;
}

/* Button */
.button-secondary:hover {
  background: var(--bs-info);
}

.btn_custom {
  position: relative;
  padding-right: 2.5rem;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease;
  border: none;
}

.btn_custom::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #e0a822;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn_custom::after {
  content: "";
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("./assets/images/icons/arrow-custom.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

/* Hover */
.btn_custom:hover {
  color: #fff;
}

.btn_custom:hover::before {
  transform: scaleX(1);
}

.btn_custom:hover::after {
  transform: translate(5px, -50%);
}

.scroll-for-more {
  color: white;
}

/* Typography  */

.m-0 {
  margin: 0;
}

.m-0 h1,
.m-0 h2,
.m-0 h3,
.m-0 h4,
.m-0 h5,
.m-0 h6 {
  margin: 0;
}
.font-secondary h3,
.font-secondary h1 {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: 0.3rem;
}

.wpcf7-spinner {
  display: none;
}

.text-justify {
  text-align: justify;
}

.section_title_line h2 {
  position: relative;
  padding-top: 1rem;
}

.section_title_line h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 5px;
  background: var(--bs-info);
}

/* 404 Page */

.error-404 {
  padding: 0;
  margin: 0;
}
.error-404 .medium-3 {
  max-width: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  text-align: center;
  font-size: 45px !important;
  padding: 0;
  margin: 0;
}
.error-404 .header-font:after {
  content: "404";
  color: var(--bs-info);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(calc(-50% + 22px), 14px);
  -ms-transform: translate(calc(-50% + 22px), 14px);
  transform: translate(calc(-50% + 22px), 14px);
  z-index: 0;
}
.error-404 .medium-9 {
  max-width: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  text-align: center;
}
.error-404 .page-content {
  width: 766px;
  text-align: center;
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 64em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/

  /* Header menu mobile */
  .sidebar-menu {
    background: white;
  }

  .nav > li > a,
  .mobile-sidebar-levels-2 .nav > li > ul > li > a {
    padding-left: 20px;
    color: black;
    text-transform: uppercase;
    font-size: 1rem;
  }
}

@media only screen and (max-width: 36em) {
  .title-mb h2 {
    font-size: 1rem;
  }
}