.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#000000;--e-global-color-accent:#61CE70;--e-global-color-5361dd6:#1F7DBC;--e-global-color-65b1931:#6DB12D;--e-global-color-5469acc:#E3051F;--e-global-color-bc98d63:#FFFFFF;--e-global-typography-primary-font-family:"Mulish";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Mulish";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Mulish";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Mulish";--e-global-typography-accent-font-weight:500;--e-global-typography-050b135-font-family:"Mulish";--e-global-typography-050b135-font-size:16px;--e-global-typography-050b135-font-weight:400;--e-global-typography-d47d44f-font-family:"Mulish";--e-global-typography-d47d44f-font-weight:700;--e-global-typography-d47d44f-font-style:normal;--e-global-typography-49e4a63-font-family:"Mulish";--e-global-typography-49e4a63-font-size:48px;--e-global-typography-49e4a63-font-weight:700;--e-global-typography-49e4a63-text-transform:uppercase;--e-global-typography-49e4a63-line-height:59px;--e-global-typography-c73ade8-font-family:"Mulish";--e-global-typography-c73ade8-font-size:16px;--e-global-typography-c73ade8-font-weight:700;--e-global-typography-c73ade8-text-transform:uppercase;--e-global-typography-c73ade8-line-height:24px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1250px;}.e-con{--container-max-width:1250px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-49e4a63-font-size:32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================
   CSS VARIABLES - Dễ thay đổi màu
   ============================================ */
:root {
  --blueBorder: #1F7DBC;
  --greenBorder: #6DB12D;
  --redBorder: #E3051F;
}

/* ============================================
   BASE BUTTON STYLES
   ============================================ */
.animated-button {
  position: relative;
  border: 2px solid;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  background: white;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

/* ============================================
   PSEUDO ELEMENTS - Corner animation
   ============================================ */
.animated-button::before,
.animated-button::after {
  z-index: 9;
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, border-radius 0.6s;
  pointer-events: none;
  border-color: inherit;
}

/* Góc trên phải */
.animated-button::before {
  border-right: 5px solid;
  border-top: 5px solid;
  right: -3px;
  top: -3px;
  border-radius: 0 10px 0 0;
}

/* Góc dưới trái */
.animated-button::after {
  border-bottom: 5px solid;
  border-left: 5px solid;
  bottom: -3px;
  left: -3px;
  border-radius: 0 0 0 10px;
}

/* ============================================
   HOVER EFFECT
   ============================================ */
.animated-button:hover::before,
.animated-button:hover::after,
.animated-button:focus::before,
.animated-button:focus::after {
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  border-radius: 10px;
}

.animated-button:hover {
  background: none transparent;
}

/* ============================================
   ACTIVE STATE
   ============================================ */
.animated-button:active {
  transform: translateY(1px);
}

/* ============================================
   COLOR VARIANTS - Dùng CSS variables
   ============================================ */

/* Blue Button */
.animated-button.blue,
.animated-button.blue::before,
.animated-button.blue::after {
  border-color: var(--blueBorder);
}

/* Green Button */
.animated-button.green,
.animated-button.green::before,
.animated-button.green::after {
  border-color: var(--greenBorder);
}

/* Red Button */
.animated-button.red,
.animated-button.red::before,
.animated-button.red::after {
  border-color: var(--redBorder);
}

/* ============================================
   LIGHT TEXT VARIANT
   ============================================ */
.animated-button.light {
  color: #FFF;
}

/* ============================================
   CHEVRON ICON
   ============================================ */
.animated-button .chevron {
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-left: 3px;
  transform: rotate(0.125turn) translateY(-2px);
}/* End custom CSS */