/*
Theme Name: Hello Elementor Child
Theme URI: https://example.com/
Description: Child theme cho Hello Elementor
Author: John Doe
Template: hello-elementor
Version: 1.0.0
*/

body {
  font-size: 16px;
  line-height: 1.7;
  background-color: #fff;
}

body.home {
  background-image: url('./assets/images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body.menu-open {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

/* HEADER WRAPPER */
.sp-header {
  width: 100%;
  padding: 20px 0;
  position: relative;
  z-index: 1000;
}

.sp-header.floating {
  position: fixed;
  top: -80px;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
  transition: top 0.35s ease;
}

.sp-header.floating.show {
  top: 0;
}


/* CONTAINER */
.sp-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}


/* LOGO */
.sp-logo img {
  height: 40px;
  width: auto;
  display: block;
}


/* MENU */
.sp-menu-list {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.sp-menu-list li a {
  text-decoration: none;
  color: #6e6c6c;
}

.sp-menu-list li.current-menu-item:hover a,
.sp-menu-list li.current-menu-item a {
  color: #229bff;
  font-weight: 700;
}

.sp-menu-list li a:hover {
  color: #424242;
}


/* ACTION BUTTONS */
.sp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sp-login,
.sp-signup {
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
}

.sp-login {
  color: #212529;
}

.sp-signup {
  background: #229bff;
  color: #fff;
}

.sp-signup:hover {
  background: #1d86dd;
  color: #fff;
}

.sp-signup i.bi,
.sp-login i.bi {
  margin-right: 4px;
}


/* LAYOUT */
#content {
  padding: 50px 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header .entry-title,
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*=elementor-page-]) .site-main {
  max-width: 1320px;
}

body:not([class*=elementor-page-]) .site-main {
  padding: 0 16px;
}

.page-header .entry-title {
  font-size: 40px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
}


/* HOME PAGE */
body.home .page-header {
  display: none;
}

body.home #content {
  padding-bottom: 0;
}

.heading-badge {
  background-color: #72c040;
  padding: 4px 8px;
  margin-bottom: 5px;
  border-radius: 4px;
  display: inline;
  color: #fff;
}

.circle-badge {
  position: absolute;
  top: 28px;
  left: 50%;
  margin-left: -96px;
  background: #229bff;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  z-index: 10;
}


/* FOOTER WRAPPER */
.sp-footer {
  padding: 60px 0 24px;
  background: #fff;
  color: #333;
}

/* TOP AREA */
.sp-footer-top {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* LEFT SIDE */
.footer-left {
  width: 40%;
}

.footer-text {
  color: #333;
  line-height: 1.6;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.footer-email {
  color: #229bff;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
}

/* RIGHT SIDE – 3 Columns */
.footer-right {
  width: 60%;
  display: flex;
  gap: 70px;
}

.footer-col {
  width: 33%;
}

.footer-col h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  text-decoration: none;
  color: #555;
}

.footer-col ul li a:hover {
  color: #229bff;
}

/* DIVIDER */
.footer-divider {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 50px auto 24px;
  max-width: 1320px;
  width: 100%;
}

/* BOTTOM TEXT */
.footer-bottom {
  text-align: center;
  color: #999;
  font-size: 16px;
  line-height: 1.5;
}

.footer-bottom p {
  margin-bottom: 0;
  color: #212529bf;
}


/* Desktop */
.sp-header .sp-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-toggle {
  padding: 10px!important;
  background-color: transparent!important;
  color: #229bff!important;
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 0;
}

.sp-overlay {
  display: none;
}

/* CONTACT */
.sp-contact-form {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.sp-contact-form label {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

.sp-contact-form input,
.sp-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd!important;
  border-radius: 6px!important;
  font-size: 15px;
  font-family: inherit;
}

.sp-contact-form input:focus,
.sp-contact-form textarea:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 1px #3b82f6;
}

.sp-contact-form button {
  padding: 14px 22px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

.sp-contact-form button:hover {
  background: #2563eb;
}


/* Mobile */
@media (max-width: 1352px) {
  .footer-divider,
  .sp-footer-top,
  .sp-container {
    max-width: calc(100% - 32px);
  }
}

@media (max-width: 1024px) {
  .sp-toggle {
    display: block;
    z-index: 99999;
  }

  /* MENU FULLSCREEN – fixed */
  .sp-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    padding: 30px 20px;
    transition: right 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 9999;
  }

  /* OPEN */
  .sp-header.active .sp-menu {
    right: 0;
  }

  /* MENU LIST DẠNG CỘT */
  .sp-menu .sp-menu-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 40px;
  }

  /* ACTION BUTTONS */
  .sp-actions {
    position: fixed;
    bottom: 20px;
    right: -100%;
    width: 75%;
    max-width: 320px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: right 0.35s ease;
    z-index: 9999;
  }

  .sp-header.active .sp-actions {
    right: 0;
  }

  /* OVERLAY */
  .sp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
  }

  .sp-header.active + .sp-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Container */
  .sp-container {
    justify-content: space-between;
  }

  .sp-footer-top {
    gap: 30px;
  }

  .footer-right {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .sp-footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-right {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .footer-right {
    flex-direction: column;
    gap: 25px;
  }

  .footer-col {
    text-align: left;
  }

  .footer-left,
  .footer-right {
    width: 100%;
  }

  .footer-bottom {
    font-size: 16px;
  }
}