.contact-type-tabs {
   display: flex;
   gap: 16px;
   border: 1px solid rgba(0, 0, 0, .08);
   border-radius: 40px;
   padding: 6px;
 }

 /* Ensure the hero takes up space so next section starts below it */
 .container-about {
   min-height: 100vh;
   /* push content below banner */
   position: relative;
   z-index: 1;
   /* keep hero text above background */
 }

 .contact-type-tabs .tab-toggle {
   flex: 1;
   white-space: nowrap;
   border: 0;
   background: transparent;
   padding: 10px 18px;
   border-radius: 28px;
   cursor: pointer;
   font-weight: 600
 }

 .contact-type-tabs .tab-toggle.active {
   background: rgba(0, 0, 0, .06)
 }

 #brand-fields.form-group {
   margin: 0 !important;
   padding: 0 !important;
   height: 0 !important;
 }

 .contact-emails {
   font-size: 14px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   line-height: 1.6
 }

 .contact-email-line {
   display: flex;
   align-items: center;
   gap: 6px
 }

 .contact-email-line i {
   width: 18px;
   flex: 0 0 18px;
   text-align: center;
   color: var(--theme-color, #111)
 }

 .contact-email-line a {
   color: inherit;
   text-decoration: none
 }

 .contact-email-line a:hover {
   text-decoration: underline
 }

 /* keep right side placement, but left-align text for vertical straightness */
 /* Contact page submit hover: red -> yellow, text -> black */
 #contactForm .th-btn {
   transition: background-color .2s ease, color .2s ease, border-color .2s ease
 }

 #contactForm .th-btn:hover {
   background-color: #FFD400;
   border-color: #FFD400;
   color: #000 !important
 }

 /* Override theme hover overlays so the visible fill is yellow */
 #contactForm .th-btn:hover:before,
 #contactForm .th-btn:hover:after,
 #contactForm .th-btn.active:before,
 #contactForm .th-btn.active:after {
   background-color: #FFD400
 }

 @media (max-width: 480px) {
   .contact-type-tabs {
     gap: 8px;
     padding: 4px
   }

   .contact-type-tabs .tab-toggle {
     padding: 8px 12px
   }
 }



 /* Contact left text banner replacing contact_1.png */
 .contact-text-banner {
   display: flex;
   margin-top: 120px;
   justify-content: flex-start;
   /* align content to the left */
   align-items: flex-start;
   min-height: 100%;
   text-align: left;
   /* override any .text-center utility */
 }

 .contact-slogan {
   font-family: var(--title-font, 'Roboto Condensed', sans-serif);
   font-weight: 800;
   text-transform: uppercase;
   line-height: 1.15;
   margin: 0;
   color: #fff;
   font-size: 70px;
   text-align: left;
   /* ensure inner lines are left-aligned */
 }

 .contact-slogan .highlight {
   color: #E5331D;
   /* đỏ accent theo template */
 }

 /* Force each word block on its own line */
 .contact-slogan .slogan-top,
 .contact-slogan .slogan-create,
 .contact-slogan .slogan-bottom {
   display: block
 }

 /* Colors: READY TO / BY PASSION in yellow; CREATE in theme red */
 .contact-slogan .slogan-top,
 .contact-slogan .slogan-bottom {
   color: #FFEB3E
 }

 .contact-slogan .slogan-create {
   color: var(--theme-color, #E5331D)
 }

 .join-squad-container {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }

 .join-squad-container::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   /* chỉnh độ tối ở đây */
 }


 @media (max-width:1199px) {
   .contact-slogan {
     font-size: 48px
   }
 }

 @media (max-width: 991px) {
   .contact-slogan {
     font-size: 40px
   }
 }



 @media (max-width: 575px) {
   .contact-slogan {
     font-size: 32px
   }
 }

 @media (max-width: 450px) {

   .container-about .hero-style3,
   .hero-3.about-hero .hero-style3 {
     padding: 230px 0 100px 0 !important;
   }

   .contact-text-banner {
     margin-top: 0px;
   }

 }

 @media (min-width: 1280px) and (max-width: 1920px) {

   .container-about .hero-style3,
   .hero-3.about-hero .hero-style3 {
     padding: 400px 0 258px 0 !important;
   }

   .container {
     margin-top: 30px;
   }

   .space,
   .space-bottom {
     padding-bottom: 50px !important;
   }
 }

 /* Gap between banner and the contact section (mobile) */
 @media (max-width: 575px) {
   #contact-sec {
     margin-top: 60px !important;
   }

   .header-layout3 .header-logo {
     width: 40%;
   }
 }

 .hero-title {
   margin-bottom: 20px;
 }