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

/*************** ADD CUSTOM CSS HERE.   ***************/
/* Định nghĩa hiệu ứng hiện ra từ từ và hơi trượt lên một chút cho chuyên nghiệp */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Áp dụng cho toàn bộ section-1 */
.section-1 {
    opacity: 0; /* Ban đầu ẩn đi */
    animation: fadeInUp 1.2s ease-out forwards; /* Hiện ra trong 1.2 giây */
}

/* Nếu bạn muốn các phần tử con (tiêu đề, nút, ảnh) hiện ra lần lượt (Delay) */
.section-1 h2 {
    animation-delay: 0.3s;
}

.section-1 p {
    animation-delay: 0.6s;
}

.section-1 .btn {
    animation-delay: 0.9s;
}

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


}


@font-face {
    font-family: 'Hanken Grotesk';
    src: url('HankenGrotesk-SemiBold.woff2') format('woff2'),
        url('HankenGrotesk-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces 72pt';
    src: url('Fraunces72pt-Regular.woff2') format('woff2'),
        url('Fraunces72pt-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('HankenGrotesk-Medium.woff2') format('woff2'),
        url('HankenGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('HankenGrotesk-Regular.woff2') format('woff2'),
        url('HankenGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Arial, sans-serif;

    --font-heading: 'Fraunces 72pt', Georgia, 'Times New Roman', serif;
}

:root {
  --color-scheme-1--background: var(--_primitives---colors--neutral-lightest);
  --_typography---font-styles--body: 'Hanken Grotesk', Arial, sans-serif;
  --color-scheme-1--text: var(--_primitives---colors--neutral-darkest);
  --_typography---font-styles--heading: 'Fraunces 72pt', Georgia, serif;
  --_primitives---colors--white: #fff;
  --_primitives---colors--neutral-darkest: #030608;
  --_primitives---colors--mine-shaft-darkest: #0f0f0f;
  --text-color--text-alternate\<deleted\|relume-variable-text-color-3\>: var(
    --base-color-neutral--white\<deleted\|relume-variable-color-neutral-2\>
  );
  --_primitives---colors--astral-light: #99cae6;
  --_primitives---opacity--transparent: transparent;
  --_primitives---colors--mine-shaft: #343434;
  --_primitives---colors--astral-dark: #286284;
  --_primitives---colors--astral: #327ba5;
  --_primitives---opacity--neutral-darkest-60: #0009;
  --_primitives---opacity--white-60: #fff9;
  --_ui-styles---stroke--border-width: 1px;
  --color-scheme-1--border: var(--_primitives---colors--neutral-darkest);
  --_ui-styles---radius--medium: 0.5rem;
  --color-scheme-1--foreground: var(--_primitives---colors--neutral-lightest);
  --background-color--background-secondary\<deleted\|relume-variable-background-color-2\>: var(
    --base-color-neutral--neutral-lightest\<deleted\|relume-variable-color-neutral-3\>
  );
  --border-color--border-primary\<deleted\|relume-variable-border-color-1\>: var(
    --base-color-neutral--black\<deleted\|relume-variable-color-neutral-1\>
  );
  --_ui-styles---radius--small: 0.5rem;
  --_primitives---colors--neutral-lightest: #f2f2f2;
  --_ui-styles---radius--large: 0.5rem;
  --color-scheme-1--accent: var(--_primitives---colors--neutral-darkest);
  --_primitives---colors--astral-darkest: #0f2431;
  --_primitives---colors--astral-lightest: #eaf1f6;
  --_primitives---colors--astral-lighter: #d6e4ed;
  --_primitives---colors--neutral-lighter: #d9d9d9;
  --_primitives---colors--neutral-light: #b3b4b4;
  --_primitives---colors--neutral: #818283;
  --_primitives---colors--neutral-dark: #4e5052;
  --_primitives---colors--neutral-darker: #1c1e20;
  --_primitives---colors--mine-shaft-lightest: #eaeaea;
  --_primitives---colors--mine-shaft-lighter: #d6d6d6;
  --_primitives---colors--mine-shaft-light: #707070;
  --_primitives---colors--mine-shaft-dark: #292929;
  --_primitives---colors--mine-shaft-darker: #141414;
  --_primitives---colors--astral-darker: #143142;
  --_primitives---opacity--white-5: #ffffff0d;
  --_primitives---opacity--white-10: #ffffff1a;
  --_primitives---opacity--white-15: #ffffff26;
  --_primitives---opacity--white-20: #fff3;
  --_primitives---opacity--white-30: #ffffff4d;
  --_primitives---opacity--white-40: #fff6;
  --_primitives---opacity--white-50: #ffffff80;
  --_primitives---opacity--neutral-darkest-5: #0000000d;
  --_primitives---opacity--neutral-darkest-10: #0000001a;
  --_primitives---opacity--neutral-darkest-15: #00000026;
  --_primitives---opacity--neutral-darkest-20: #0003;
  --_primitives---opacity--neutral-darkest-30: #0000004d;
  --_primitives---opacity--neutral-darkest-40: #0006;
  --_primitives---opacity--neutral-darkest-50: #00000080;
  --_ui-styles---stroke--divider-width: 1px;
  --base-color-neutral--white\<deleted\|relume-variable-color-neutral-2\>: white;
  --base-color-neutral--neutral-lightest\<deleted\|relume-variable-color-neutral-3\>: #eee;
  --base-color-neutral--black\<deleted\|relume-variable-color-neutral-1\>: black;
}

/* =========================================================
   GLOBAL USAGE
   ========================================================= */

body {
  background-color: var(--color-scheme-1--background);
  font-family: var(--_typography---font-styles--body);
  color: var(--color-scheme-1--text);
  font-size: 1.125rem;
  line-height: 1.5;
}
.f-heading{
	font-family: var(--_typography---font-styles--heading);
}
/* ===== Margin Left ===== */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 1px; }
.ml-2 { margin-left: 2px; }
.ml-3 { margin-left: 3px; }
.ml-4 { margin-left: 4px; }
.ml-5 { margin-left: 5px; }
.ml-6 { margin-left: 6px; }
.ml-7 { margin-left: 7px; }
.ml-8 { margin-left: 8px; }
.ml-9 { margin-left: 9px; }
.ml-10 { margin-left: 10px; }
.ml-11 { margin-left: 11px; }
.ml-12 { margin-left: 12px; }
.ml-13 { margin-left: 13px; }
.ml-14 { margin-left: 14px; }
.ml-15 { margin-left: 15px; }
.ml-16 { margin-left: 16px; }
.ml-17 { margin-left: 17px; }
.ml-18 { margin-left: 18px; }
.ml-19 { margin-left: 19px; }
.ml-20 { margin-left: 20px; }
.ml-21 { margin-left: 21px; }
.ml-22 { margin-left: 22px; }
.ml-23 { margin-left: 23px; }
.ml-24 { margin-left: 24px; }
.ml-25 { margin-left: 25px; }
.ml-26 { margin-left: 26px; }
.ml-27 { margin-left: 27px; }
.ml-28 { margin-left: 28px; }
.ml-29 { margin-left: 29px; }
.ml-30 { margin-left: 30px; }
.ml-31 { margin-left: 31px; }
.ml-32 { margin-left: 32px; }
.ml-33 { margin-left: 33px; }
.ml-34 { margin-left: 34px; }
.ml-35 { margin-left: 35px; }
.ml-36 { margin-left: 36px; }
.ml-37 { margin-left: 37px; }
.ml-38 { margin-left: 38px; }
.ml-39 { margin-left: 39px; }
.ml-40 { margin-left: 40px; }
.ml-41 { margin-left: 41px; }
.ml-42 { margin-left: 42px; }
.ml-43 { margin-left: 43px; }
.ml-44 { margin-left: 44px; }
.ml-45 { margin-left: 45px; }
.ml-46 { margin-left: 46px; }
.ml-47 { margin-left: 47px; }
.ml-48 { margin-left: 48px; }
.ml-49 { margin-left: 49px; }
.ml-50 { margin-left: 50px; }
.ml-51 { margin-left: 51px; }
.ml-52 { margin-left: 52px; }
.ml-53 { margin-left: 53px; }
.ml-54 { margin-left: 54px; }
.ml-55 { margin-left: 55px; }
.ml-56 { margin-left: 56px; }
.ml-57 { margin-left: 57px; }
.ml-58 { margin-left: 58px; }
.ml-59 { margin-left: 59px; }
.ml-60 { margin-left: 60px; }
.ml-61 { margin-left: 61px; }
.ml-62 { margin-left: 62px; }
.ml-63 { margin-left: 63px; }
.ml-64 { margin-left: 64px; }
.ml-65 { margin-left: 65px; }
.ml-66 { margin-left: 66px; }
.ml-67 { margin-left: 67px; }
.ml-68 { margin-left: 68px; }
.ml-69 { margin-left: 69px; }
.ml-70 { margin-left: 70px; }
.ml-71 { margin-left: 71px; }
.ml-72 { margin-left: 72px; }
.ml-73 { margin-left: 73px; }
.ml-74 { margin-left: 74px; }
.ml-75 { margin-left: 75px; }
.ml-76 { margin-left: 76px; }
.ml-77 { margin-left: 77px; }
.ml-78 { margin-left: 78px; }
.ml-79 { margin-left: 79px; }
.ml-80 { margin-left: 80px; }
.ml-81 { margin-left: 81px; }
.ml-82 { margin-left: 82px; }
.ml-83 { margin-left: 83px; }
.ml-84 { margin-left: 84px; }
.ml-85 { margin-left: 85px; }
.ml-86 { margin-left: 86px; }
.ml-87 { margin-left: 87px; }
.ml-88 { margin-left: 88px; }
.ml-89 { margin-left: 89px; }
.ml-90 { margin-left: 90px; }
.ml-91 { margin-left: 91px; }
.ml-92 { margin-left: 92px; }
.ml-93 { margin-left: 93px; }
.ml-94 { margin-left: 94px; }
.ml-95 { margin-left: 95px; }
.ml-96 { margin-left: 96px; }
.ml-97 { margin-left: 97px; }
.ml-98 { margin-left: 98px; }
.ml-99 { margin-left: 99px; }
.ml-100 { margin-left: 100px; }

/* ===== Margin Right ===== */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 1px; }
.mr-2 { margin-right: 2px; }
.mr-3 { margin-right: 3px; }
.mr-4 { margin-right: 4px; }
.mr-5 { margin-right: 5px; }
.mr-6 { margin-right: 6px; }
.mr-7 { margin-right: 7px; }
.mr-8 { margin-right: 8px; }
.mr-9 { margin-right: 9px; }
.mr-10 { margin-right: 10px; }
.mr-11 { margin-right: 11px; }
.mr-12 { margin-right: 12px; }
.mr-13 { margin-right: 13px; }
.mr-14 { margin-right: 14px; }
.mr-15 { margin-right: 15px; }
.mr-16 { margin-right: 16px; }
.mr-17 { margin-right: 17px; }
.mr-18 { margin-right: 18px; }
.mr-19 { margin-right: 19px; }
.mr-20 { margin-right: 20px; }
.mr-21 { margin-right: 21px; }
.mr-22 { margin-right: 22px; }
.mr-23 { margin-right: 23px; }
.mr-24 { margin-right: 24px; }
.mr-25 { margin-right: 25px; }
.mr-26 { margin-right: 26px; }
.mr-27 { margin-right: 27px; }
.mr-28 { margin-right: 28px; }
.mr-29 { margin-right: 29px; }
.mr-30 { margin-right: 30px; }
.mr-31 { margin-right: 31px; }
.mr-32 { margin-right: 32px; }
.mr-33 { margin-right: 33px; }
.mr-34 { margin-right: 34px; }
.mr-35 { margin-right: 35px; }
.mr-36 { margin-right: 36px; }
.mr-37 { margin-right: 37px; }
.mr-38 { margin-right: 38px; }
.mr-39 { margin-right: 39px; }
.mr-40 { margin-right: 40px; }
.mr-41 { margin-right: 41px; }
.mr-42 { margin-right: 42px; }
.mr-43 { margin-right: 43px; }
.mr-44 { margin-right: 44px; }
.mr-45 { margin-right: 45px; }
.mr-46 { margin-right: 46px; }
.mr-47 { margin-right: 47px; }
.mr-48 { margin-right: 48px; }
.mr-49 { margin-right: 49px; }
.mr-50 { margin-right: 50px; }
.mr-51 { margin-right: 51px; }
.mr-52 { margin-right: 52px; }
.mr-53 { margin-right: 53px; }
.mr-54 { margin-right: 54px; }
.mr-55 { margin-right: 55px; }
.mr-56 { margin-right: 56px; }
.mr-57 { margin-right: 57px; }
.mr-58 { margin-right: 58px; }
.mr-59 { margin-right: 59px; }
.mr-60 { margin-right: 60px; }
.mr-61 { margin-right: 61px; }
.mr-62 { margin-right: 62px; }
.mr-63 { margin-right: 63px; }
.mr-64 { margin-right: 64px; }
.mr-65 { margin-right: 65px; }
.mr-66 { margin-right: 66px; }
.mr-67 { margin-right: 67px; }
.mr-68 { margin-right: 68px; }
.mr-69 { margin-right: 69px; }
.mr-70 { margin-right: 70px; }
.mr-71 { margin-right: 71px; }
.mr-72 { margin-right: 72px; }
.mr-73 { margin-right: 73px; }
.mr-74 { margin-right: 74px; }
.mr-75 { margin-right: 75px; }
.mr-76 { margin-right: 76px; }
.mr-77 { margin-right: 77px; }
.mr-78 { margin-right: 78px; }
.mr-79 { margin-right: 79px; }
.mr-80 { margin-right: 80px; }
.mr-81 { margin-right: 81px; }
.mr-82 { margin-right: 82px; }
.mr-83 { margin-right: 83px; }
.mr-84 { margin-right: 84px; }
.mr-85 { margin-right: 85px; }
.mr-86 { margin-right: 86px; }
.mr-87 { margin-right: 87px; }
.mr-88 { margin-right: 88px; }
.mr-89 { margin-right: 89px; }
.mr-90 { margin-right: 90px; }
.mr-91 { margin-right: 91px; }
.mr-92 { margin-right: 92px; }
.mr-93 { margin-right: 93px; }
.mr-94 { margin-right: 94px; }
.mr-95 { margin-right: 95px; }
.mr-96 { margin-right: 96px; }
.mr-97 { margin-right: 97px; }
.mr-98 { margin-right: 98px; }
.mr-99 { margin-right: 99px; }
.mr-100 { margin-right: 100px; }
/* ===== Margin Top ===== */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1px; }
.mt-2 { margin-top: 2px; }
.mt-3 { margin-top: 3px; }
.mt-4 { margin-top: 4px; }
.mt-5 { margin-top: 5px; }
.mt-6 { margin-top: 6px; }
.mt-7 { margin-top: 7px; }
.mt-8 { margin-top: 8px; }
.mt-9 { margin-top: 9px; }
.mt-10 { margin-top: 10px; }
.mt-11 { margin-top: 11px; }
.mt-12 { margin-top: 12px; }
.mt-13 { margin-top: 13px; }
.mt-14 { margin-top: 14px; }
.mt-15 { margin-top: 15px; }
.mt-16 { margin-top: 16px; }
.mt-17 { margin-top: 17px; }
.mt-18 { margin-top: 18px; }
.mt-19 { margin-top: 19px; }
.mt-20 { margin-top: 20px; }
.mt-21 { margin-top: 21px; }
.mt-22 { margin-top: 22px; }
.mt-23 { margin-top: 23px; }
.mt-24 { margin-top: 24px; }
.mt-25 { margin-top: 25px; }
.mt-26 { margin-top: 26px; }
.mt-27 { margin-top: 27px; }
.mt-28 { margin-top: 28px; }
.mt-29 { margin-top: 29px; }
.mt-30 { margin-top: 30px; }
.mt-31 { margin-top: 31px; }
.mt-32 { margin-top: 32px; }
.mt-33 { margin-top: 33px; }
.mt-34 { margin-top: 34px; }
.mt-35 { margin-top: 35px; }
.mt-36 { margin-top: 36px; }
.mt-37 { margin-top: 37px; }
.mt-38 { margin-top: 38px; }
.mt-39 { margin-top: 39px; }
.mt-40 { margin-top: 40px; }
.mt-41 { margin-top: 41px; }
.mt-42 { margin-top: 42px; }
.mt-43 { margin-top: 43px; }
.mt-44 { margin-top: 44px; }
.mt-45 { margin-top: 45px; }
.mt-46 { margin-top: 46px; }
.mt-47 { margin-top: 47px; }
.mt-48 { margin-top: 48px; }
.mt-49 { margin-top: 49px; }
.mt-50 { margin-top: 50px; }
.mt-51 { margin-top: 51px; }
.mt-52 { margin-top: 52px; }
.mt-53 { margin-top: 53px; }
.mt-54 { margin-top: 54px; }
.mt-55 { margin-top: 55px; }
.mt-56 { margin-top: 56px; }
.mt-57 { margin-top: 57px; }
.mt-58 { margin-top: 58px; }
.mt-59 { margin-top: 59px; }
.mt-60 { margin-top: 60px; }
.mt-61 { margin-top: 61px; }
.mt-62 { margin-top: 62px; }
.mt-63 { margin-top: 63px; }
.mt-64 { margin-top: 64px; }
.mt-65 { margin-top: 65px; }
.mt-66 { margin-top: 66px; }
.mt-67 { margin-top: 67px; }
.mt-68 { margin-top: 68px; }
.mt-69 { margin-top: 69px; }
.mt-70 { margin-top: 70px; }
.mt-71 { margin-top: 71px; }
.mt-72 { margin-top: 72px; }
.mt-73 { margin-top: 73px; }
.mt-74 { margin-top: 74px; }
.mt-75 { margin-top: 75px; }
.mt-76 { margin-top: 76px; }
.mt-77 { margin-top: 77px; }
.mt-78 { margin-top: 78px; }
.mt-79 { margin-top: 79px; }
.mt-80 { margin-top: 80px; }
.mt-81 { margin-top: 81px; }
.mt-82 { margin-top: 82px; }
.mt-83 { margin-top: 83px; }
.mt-84 { margin-top: 84px; }
.mt-85 { margin-top: 85px; }
.mt-86 { margin-top: 86px; }
.mt-87 { margin-top: 87px; }
.mt-88 { margin-top: 88px; }
.mt-89 { margin-top: 89px; }
.mt-90 { margin-top: 90px; }
.mt-91 { margin-top: 91px; }
.mt-92 { margin-top: 92px; }
.mt-93 { margin-top: 93px; }
.mt-94 { margin-top: 94px; }
.mt-95 { margin-top: 95px; }
.mt-96 { margin-top: 96px; }
.mt-97 { margin-top: 97px; }
.mt-98 { margin-top: 98px; }
.mt-99 { margin-top: 99px; }
.mt-100 { margin-top: 100px; }
/* ===== Margin Bottom ===== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1px; }
.mb-2 { margin-bottom: 2px; }
.mb-3 { margin-bottom: 3px; }
.mb-4 { margin-bottom: 4px; }
.mb-5 { margin-bottom: 5px; }
.mb-6 { margin-bottom: 6px; }
.mb-7 { margin-bottom: 7px; }
.mb-8 { margin-bottom: 8px; }
.mb-9 { margin-bottom: 9px; }
.mb-10 { margin-bottom: 10px; }
.mb-11 { margin-bottom: 11px; }
.mb-12 { margin-bottom: 12px; }
.mb-13 { margin-bottom: 13px; }
.mb-14 { margin-bottom: 14px; }
.mb-15 { margin-bottom: 15px; }
.mb-16 { margin-bottom: 16px; }
.mb-17 { margin-bottom: 17px; }
.mb-18 { margin-bottom: 18px; }
.mb-19 { margin-bottom: 19px; }
.mb-20 { margin-bottom: 20px; }
.mb-21 { margin-bottom: 21px; }
.mb-22 { margin-bottom: 22px; }
.mb-23 { margin-bottom: 23px; }
.mb-24 { margin-bottom: 24px; }
.mb-25 { margin-bottom: 25px; }
.mb-26 { margin-bottom: 26px; }
.mb-27 { margin-bottom: 27px; }
.mb-28 { margin-bottom: 28px; }
.mb-29 { margin-bottom: 29px; }
.mb-30 { margin-bottom: 30px; }
.mb-31 { margin-bottom: 31px; }
.mb-32 { margin-bottom: 32px; }
.mb-33 { margin-bottom: 33px; }
.mb-34 { margin-bottom: 34px; }
.mb-35 { margin-bottom: 35px; }
.mb-36 { margin-bottom: 36px; }
.mb-37 { margin-bottom: 37px; }
.mb-38 { margin-bottom: 38px; }
.mb-39 { margin-bottom: 39px; }
.mb-40 { margin-bottom: 40px; }
.mb-41 { margin-bottom: 41px; }
.mb-42 { margin-bottom: 42px; }
.mb-43 { margin-bottom: 43px; }
.mb-44 { margin-bottom: 44px; }
.mb-45 { margin-bottom: 45px; }
.mb-46 { margin-bottom: 46px; }
.mb-47 { margin-bottom: 47px; }
.mb-48 { margin-bottom: 48px; }
.mb-49 { margin-bottom: 49px; }
.mb-50 { margin-bottom: 50px; }
.mb-51 { margin-bottom: 51px; }
.mb-52 { margin-bottom: 52px; }
.mb-53 { margin-bottom: 53px; }
.mb-54 { margin-bottom: 54px; }
.mb-55 { margin-bottom: 55px; }
.mb-56 { margin-bottom: 56px; }
.mb-57 { margin-bottom: 57px; }
.mb-58 { margin-bottom: 58px; }
.mb-59 { margin-bottom: 59px; }
.mb-60 { margin-bottom: 60px; }
.mb-61 { margin-bottom: 61px; }
.mb-62 { margin-bottom: 62px; }
.mb-63 { margin-bottom: 63px; }
.mb-64 { margin-bottom: 64px; }
.mb-65 { margin-bottom: 65px; }
.mb-66 { margin-bottom: 66px; }
.mb-67 { margin-bottom: 67px; }
.mb-68 { margin-bottom: 68px; }
.mb-69 { margin-bottom: 69px; }
.mb-70 { margin-bottom: 70px; }
.mb-71 { margin-bottom: 71px; }
.mb-72 { margin-bottom: 72px; }
.mb-73 { margin-bottom: 73px; }
.mb-74 { margin-bottom: 74px; }
.mb-75 { margin-bottom: 75px; }
.mb-76 { margin-bottom: 76px; }
.mb-77 { margin-bottom: 77px; }
.mb-78 { margin-bottom: 78px; }
.mb-79 { margin-bottom: 79px; }
.mb-80 { margin-bottom: 80px; }
.mb-81 { margin-bottom: 81px; }
.mb-82 { margin-bottom: 82px; }
.mb-83 { margin-bottom: 83px; }
.mb-84 { margin-bottom: 84px; }
.mb-85 { margin-bottom: 85px; }
.mb-86 { margin-bottom: 86px; }
.mb-87 { margin-bottom: 87px; }
.mb-88 { margin-bottom: 88px; }
.mb-89 { margin-bottom: 89px; }
.mb-90 { margin-bottom: 90px; }
.mb-91 { margin-bottom: 91px; }
.mb-92 { margin-bottom: 92px; }
.mb-93 { margin-bottom: 93px; }
.mb-94 { margin-bottom: 94px; }
.mb-95 { margin-bottom: 95px; }
.mb-96 { margin-bottom: 96px; }
.mb-97 { margin-bottom: 97px; }
.mb-98 { margin-bottom: 98px; }
.mb-99 { margin-bottom: 99px; }
.mb-100 { margin-bottom: 100px; }

h1 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
}
h2 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
h3 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}
h4 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}
h5 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
h6 {
  font-family: var(--_typography---font-styles--heading);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
p {
  margin-bottom: 0;
}
a {
  color: var(--color-scheme-1--text);
  text-underline-offset: 0.25rem;
  
}
ul {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}
ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
}
img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  display: inline-block;
}
label {
  margin-bottom: 0.25rem;
  font-weight: 500;
}
blockquote {
  border-left: 0.1875rem solid var(--color-scheme-1--text);
  margin-bottom: 0;
  padding: 0.75rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
figure {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
figcaption {
  text-align: center;
  margin-top: 0.25rem;
}


#header li.html.header-button-1 a, .bt-1{
	box-shadow: none !important;
	box-sizing: none !important;
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    padding: .625rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .25s, border-color .25s, background-color .25s;
    display: flex;
    border: .125rem solid var(--_primitives---colors--astral-light);
    background-color: var(--_primitives---colors--astral-light);
    color: var(--_primitives---colors--neutral-darkest) !important;
}
.transparent .header-main {
    height: 88px !important;
}
#logo img {
    max-height: 88px !important;
}
a.button.primary.bt-1 {
    display: inline-flex;
    width: auto !important;
    justify-content: center;
}
.has-sticky.sticky-jump {
    transform: inherit !important;
}
.sub-menu.nav-dropdown {
    border-bottom: none;
    border-right: none;
    border-left: none;
}

.header-wrapper.stuck div#masthead {
    background-color: #0f2431 !important;
    background: #0f2431 !important;
}
li.html.header-button-1 a:hover, .bt-1:hover{
	border-color: var(--_primitives---colors--astral) !important;
    background-color: var(--_primitives---colors--astral) !important;
    color: var(--_primitives---colors--white) !important;
}
li.html.header-button-2 a:hover, .bt-2:hover{
	border-color: var(--_primitives---colors--astral-light) !important;
    background-color: var(--_primitives---colors--astral-light) !important;
    color: var(--color-scheme-1--text) !important;
}
li.html.custom.html_topbar_left a:hover, .bt-3:hover{
	border-color: var(--_primitives---colors--white);
    background-color: var(--_primitives---colors--white);
    color: var(--color-scheme-1--text);
}
li.html.custom.html_topbar_left a, .bt-3{
	box-shadow: none !important;
	box-sizing: none !important;
	border-color: var(--_primitives---colors--white);
    background-color: var(--_primitives---opacity--transparent);
    color: var(--_primitives---colors--white);
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    padding: .625rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .25s, border-color .25s, background-color .25s;
    display: flex;

}
li.html.header-button-2 a, .bt-2 {
	box-shadow: none !important;
	box-sizing: none !important;
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    padding: .625rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .25s, border-color .25s, background-color .25s;
    display: flex;
    border: .125rem solid var(--_primitives---colors--astral-light);
    
    color: var(--_primitives---colors--neutral-darkest);
    border-color: var(--_primitives---colors--white);
    background-color: var(--_primitives---colors--white);
}

.bt-4 {
    box-shadow: none !important;
    box-sizing: none !important;
    min-height: 2.5rem;
    
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
   
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .25s, border-color .25s, background-color .25s;
    
    border-color: var(--_primitives---colors--white);
    background-color: var(--_primitives---opacity--transparent);
    color: var(--_primitives---colors--white);
    
}

.bt-5 {
    box-shadow: none !important;
    box-sizing: none !important;
    min-height: 2.5rem;
    
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
   
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .25s, border-color .25s, background-color .25s;
    border: .125rem solid var(--_primitives---colors--astral-light);
    border-color: var(--_primitives---colors--white);
    border-bottom-color: rgb(3, 6, 8);
    border-left-color: rgb(3, 6, 8);
    border-right-color: rgb(3, 6, 8);
    color: rgb(5, 8, 10);
    border-top-color: rgb(3, 6, 8);
    background-color: rgba(52, 52, 52, 0);
    
}
.section-4 .box.has-hover.has-hover.box-text-bottom:hover .header_line:first-of-type {
        transform: translateY(-0.5rem) !important;
}
.section-4 .box.has-hover.has-hover.box-text-bottom:hover .header_line:last-of-type {
        transform: translateY(0.5rem) !important;
    }
.section-4 .box-image {
    margin-bottom: 20px;
}
.bt-5:hover{
    border-color: var(--_primitives---colors--mine-shaft);
    background-color: var(--_primitives---colors--mine-shaft);
}
.align-items-center .col-inner {
    
    max-width: 65% !important;
}
.align-items-center .header_line, .align-items-center-2 .header_line{
    position: relative;
}
.section-5 .header_line{
    position: relative;
}
.align-items-center{
    align-items: center;
}
div#masthead {
    z-index: 99;
    border-bottom: .0625rem solid var(--_primitives---colors--white);
    background-color: var(--_primitives---opacity--transparent);
}
#logo img {
  filter: brightness(0) invert(1);
}
.section_about .cangiua .col-inner {
    margin: 0 auto;
}

.section-5 .des {
    border-bottom: 1px solid var(--_primitives---colors--astral);
    flex-flow: column;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* line-height: 1.4; */
    /* display: flex; */
}


section.section_choose .header_line {
    margin-top: 10px;
}
.button-group a {
    border: .125rem solid var(--_primitives---colors--astral-light);
    background-color: var(--_primitives---colors--astral-light);
    color: var(--_primitives---colors--neutral-darkest);
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    /* padding: .625rem 1.5rem; */
    /* font-size: 1.125rem; */
    font-weight: 500;
    text-decoration: none;
    transition: color .25s, border-color .25s, background-color .25s;
    display: flex;
    border-color: var(--_primitives---colors--neutral-darkest);
    background-color: var(--_primitives---opacity--transparent);
}

.layout552_content .button-group a {
    border: .125rem solid #fff !important;
    background-color: var(--_primitives---colors--astral-light);
    color: #fff;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 3rem;
    /* padding: .625rem 1.5rem; */
    /* font-size: 1.125rem; */
    font-weight: 500;
    text-decoration: none;
    transition: color .25s, border-color .25s, background-color .25s;
    display: flex;
    border-color: var(--_primitives---colors--neutral-darkest);
    background-color: var(--_primitives---opacity--transparent);
}

.layout552_content .button-group a:hover {
   
    background-color: #fff !important;
    color: #000;
    
}


.button-group.button-group-2 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.button-group.button-group-2 a {
    margin-right: 0px;
    margin-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    text-transform: capitalize;
}
.dark .ux-menu-link__link {
    font-size: 14px;
}
.logo img, .logo-2 img{
    filter: brightness(0) invert(1);
}
.absolute-footer {
    display: none;
}


ul.sub-menu.nav-dropdown.nav-dropdown-default, ul.sub-menu.nav-dropdown.nav-dropdown-default {
    border: var(--_ui-styles---stroke--border-width) solid var(--_primitives---colors--white);
    background-color: var(--_primitives---colors--astral-darkest);
    padding: .5rem;
    /* position: absolute; */
}

ul.sub-menu.nav-dropdown.nav-dropdown-default a {
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 16px;
}
.mega-menu-1 a.ux-menu-link__link.flex {
    font-size: 16px;
}
ul.sub-menu.nav-dropdown.nav-dropdown-default a:hover {
    color: var(--_primitives---colors--astral-light);
}
.hide-pc{
    display: none !important;
}
@media (max-width: 849px){
    .nav-vertical>li>a, .nav-vertical>li>ul>li a {
    align-items: center;
    display: inline-flex;
    flex-grow: 0;
    width: auto;
}
button.toggle{
    color: #fff;
    opacity: 1 !important;
}
button.toggle:focus {
    color: #fff;
    opacity: 1 !important;
}
.bt-3-nut a.button.primary.bt-1 {
    color: #000 !important;
}
a.button.primary.bt-2 {
    color: #000 !important;
}
.bt-3-nut a.button.primary.bt-1 {
    display: inline-flex;
    width: 100%;
    justify-content: center;
}
a.button.primary.bt-2:hover, a.button.primary.bt-3:hover {
    background: transparent !important;
}
    .hide-mobile{
        display: none !important;
    }
    body .hide-pc{
        display: block !important;
    }
    .align-items-center .col-inner {
    max-width: 100% !important;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 10%;
    margin-top: 10%;
}
.section-5, .section-5 .padding-section-large {
    padding-top: 0px !important;
 
}
i.icon-menu {
    color: #fff !important;
}
.dao-1 {
    order: 2;
}
footer#footer .section {
    padding-bottom: 0px;
    /* padding-top: 0px; */
}
    .section-1 .text.f-heading.mb-20 p {
        font-size: 36px;
    }

    .section-1 [hero-title] span {
        font-size: 50px !important;
    }

    .stack .hero-button-group {
        /* width: 50% !important; */
    }

    .stack.hero-button-group {
        display: flex !important;
        flex-wrap: wrap !important;          /* cho phép xuống dòng */
        justify-content: center !important;  /* căn giữa ngang */
        gap: 1.5rem !important;
    }
    .mfp-content {
    background: #0f2431  !important;
}

.mfp-content a {
    color: #fff !important;
    text-transform: capitalize !important;
    font-size: 16px !important;
}

.mfp-content li {
    border: none !important;
}
.mfp-close-btn-in .mfp-close {
    opacity: 1 !important;
    color: #fff !important;
    top: 0 !important;
}
.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:after, .nav-dropdown-has-arrow li.current-dropdown.has-dropdown:before {
    display: none;
}

    .stack.hero-button-group .bt-1, .stack.hero-button-group .bt-2 {
        flex: 0 0 auto;
    }
}

/* Căn chỉnh để logo thực sự ở giữa */
@media screen and (min-width: 850px) { /* Chỉ áp dụng cho màn hình lớn */
    .header-inner.flex-row {
        justify-content: space-between; /* Đảm bảo các phần tử dàn đều */
    }
    .header-inner .flex-left,
    .header-inner .flex-right {
        flex: 1 1 0; /* Cho phép 2 cột co giãn và có base width bằng nhau */
    }
    .header-inner .flex-right {
        justify-content: flex-end; /* Giữ nội dung bên phải sát lề phải */
    }
}

@media (min-width: 850px) {
    /* Biến cột trái thành flex co giãn */
    .header-inner .flex-left {
        flex: 1 1 0; /* Cho phép co giãn và chiếm không gian còn lại */
        display: flex;
    }

    /* Menu bên trong cột trái cũng co giãn hết chiều ngang */
    .header-inner .flex-left .header-nav {
        width: 100%;
        display: flex;
        justify-content: space-between; /* Dàn đều các mục menu */
    }

    /* Đảm bảo logo không bị ảnh hưởng */
    .header-inner .logo {
        flex-shrink: 0; /* Không co logo */
        margin: 0 20px; /* Tạo khoảng cách hai bên logo */
    }

    /* Cột phải giữ nguyên, không co giãn quá mức */
    .header-inner .flex-right {
        flex: 0 0 auto;
    }
}
/* 1. Định nghĩa "kịch bản" chuyển động */
@keyframes phucBaoFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px); /* Trượt nhẹ từ dưới lên */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Áp dụng vào .section-1 */
.section-1 {
    animation: phucBaoFadeIn 1.5s ease-out forwards;
    will-change: opacity, transform; /* Tối ưu hóa hiệu năng trình duyệt */
}

/* 3. Tạo hiệu ứng xuất hiện lần lượt cho nội dung bên trong (Stagger effect) */
.section-1 .f-heading {
    animation: phucBaoFadeIn 1s ease-out both;
    animation-delay: 0.2s;
}

.section-1 p {
    animation: phucBaoFadeIn 1s ease-out both;
    animation-delay: 0.5s;
}

.section-1 .hero-button-group {
    animation: phucBaoFadeIn 1s ease-out both;
    animation-delay: 0.8s;
}