@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap&subset=vietnamese");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #7a7a7a;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #4884ac;
  color: #fff;
}

::-moz-selection {
  background: #4884ac;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.section-heading {
  text-align: center;
  margin-top: 140px;
  margin-bottom: 80px;
}

.section-heading h2 {
  font-size: 28px;
  font-weight: 800;
  color: #232d39;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading h2 em {
  font-style: normal;
  color: #4884ac;
}

.section-heading img {
  margin: 20px auto;
}

.dark-bg h2 {
  color: #fff;
}

.dark-bg p {
  color: #fff;
}

.main-button a {
  display: inline-block;
  font-size: 15px;
  padding: 12px 20px;
  background-color: #4884ac;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #4884ac;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background: rgba(250,250,250,0.99) !important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #232d39!important;
}

.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
}

.background-header .main-nav .nav li:last-child a:hover {
  color: #fff!important;
}

.background-header .main-nav .nav li:hover a {
  color: #4884ac!important;
}

.background-header .nav li a.active {
  color: #ff0015!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px;
  background: rgba(250,250,250,0.8);
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo em {
  font-style: normal;
  color: #4884ac;
  font-weight: 900;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li:last-child a {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #4884ac;
  color: #fff;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: uppercase;
  transition: all .3s;
  height: auto;
  line-height: 20px;
}

.header-area .main-nav .nav li:last-child a:hover {
  background-color: #4884ac;
  opacity: 1;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #ec1414!important;
  opacity: 1;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #ec1414!important;
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #4884ac;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #4884ac!important;
    opacity: 1;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li:last-child {
    width: 100%;
    background-color: #4884ac;
    color: #fff;
  }
  .header-area .main-nav .nav li:last-child a {
    background-color: #4884ac!important;
  }
  .header-area .main-nav .nav li:last-child a:hover,
  .header-area .main-nav .nav li:last-child:hover a {
    background-color: #4884ac!important;
    color: #fff!important;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #232d39 !important;
  }
  .header-area .main-nav .nav li:last-child a {
    color: #fff!important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #4884ac!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(35,45,57,0.8);
    top: 0;
    left: 0;
    bottom: 7px;
    width: 100%;
}

.main-banner .caption {
  text-align: center;
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.main-banner .caption h2 {
  margin-top: 30px;
  margin-bottom: 25px;
  font-size: 84px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #4884ac;
  font-weight: 900;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

#features {
  margin-bottom: 80px;
}

.feature-item {
  display: inline-block;
  margin-bottom: 60px;
}

.feature-item .left-icon img {
  float: left;
  margin-right: 30px;
}

.feature-item .right-content {
  display: inline;
}

.feature-item .right-content h4 {
  margin-top: 0px;
  margin-bottom:  7px;
  letter-spacing: 0.25px;
  color: #232d39;
  font-size: 19px;
  font-weight: 600;
  text-transform: capitalize;
}

.feature-item .right-content a.text-button {
  margin-top: 7px;
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  color: #4884ac;
  font-weight: 500;
}

/*
---------------------------------------------
subscribe
---------------------------------------------
*/

#call-to-action {
  padding: 120px 0px;
  background-image: url(../images/cta-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.cta-content h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.cta-content h2 em {
  font-style: normal;
  color: #4884ac;
}

.cta-content p {
  font-size: 16px;
  color: #fff;
  margin: 15px 0px 25px 0px;
}



/*
--------------------------------------------
Our Classes
--------------------------------------------
*/

#our-classes {
  margin-bottom: 140px;
}

#tabs ul {
  margin: 0;
  padding: 0;
}
#tabs ul li {
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}
#tabs ul li:last-child {
  margin-bottom: 0px;
}
#tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  padding: 30px 30px;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 5px;
  font-size: 19px;
  color: #232d39;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: all 0.3s;
}
#tabs .main-rounded-button a {
  text-align: center;
  padding: 20px 30px;
  width: 100%;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #4884ac;
}
#tabs .main-rounded-button a:hover {
  background-color: #4884ac;
}
#tabs ul li a img {
  max-width: 100%;
  margin-right: 20px;
}
#tabs ul .ui-tabs-active span {
  background: #faf5b2;
  border: #faf5b2;
  line-height: 90px;
  border-bottom: none;
}
#tabs ul .ui-tabs-active a {
  color: #4884ac;
}
#tabs ul .ui-tabs-active span {
  color: #1e1e1e;
}
.tabs-content {
  margin-left: 30px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}
.tabs-content img {
  max-width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.tabs-content h4 {
  font-size: 23px;
  font-weight: 700;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  margin-top: 30px;
}
.tabs-content p {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 28px;
}


/* 
---------------------------------------------
schedule
--------------------------------------------- 
*/

#schedule {
  padding: 0px 0px 140px 0px;
  background-image: url(../images/schedule-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#schedule table {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

#schedule table tbody {
  border-top: 1px solid #fff; 
}

#schedule table tbody tr {
  border-bottom: 1px solid #fff;
}

#schedule table tbody tr td {
  border-right: 1px solid #fff;
  height: 100px;
}

#schedule table tr td {
  color: #fff;
  font-size: 13px;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.25px;
}

.schedule-table.filtering .ts-item {
    opacity: 0;
    transition: all 0.5s;
}

.schedule-table.filtering .ts-item.show {
    opacity: 1;
    transition: all 0.5s;
}

#schedule .filters {
  margin-bottom: 40px;
}
#schedule .filters ul {
  padding: 0;
  text-align: center;
}
#schedule .filters ul li {
  list-style: none;
  display: inline;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#schedule .filters ul li:after {
  content: "/";
  margin-left: 10px;
  color: #fff;
}
#schedule .filters ul li:last-child {
  margin-right: 0px;
}
#schedule .filters ul li:last-child::after {
  display: none;
}
#schedule .filters ul li.active,
#schedule .filters ul li:hover {
  color: #4884ac;
}
#schedule .filters-content {
  margin-top: 50px;
}
#schedule .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
#schedule .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}


/* 
---------------------------------------------
trainers
--------------------------------------------- 
*/

#trainers .trainer-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 40px;
}

#trainers .trainer-item img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #4884ac;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

#trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

#trainers .trainer-item p {
  margin-bottom: 20px;
}

#trainers .trainer-item ul.social-icons li {
  display: inline-block;
  margin-right: 12px;
}

#trainers .trainer-item ul.social-icons li:last-child {
  margin-right: 0px;
}

#trainers .trainer-item ul.social-icons li a {
  color: #232d39;
  transition: all .3s;
}

#trainers .trainer-item ul.social-icons li a:hover {
  color: #4884ac;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

#contact-us {
  margin-top: 140px;
}

#contact-us .container-fluid .col-lg-6 {
  padding: 0px;
}

#contact-us .contact-form {
  padding: 80px;
  background-image: url(../images/contact-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact-us .contact-form #contact {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
}

.contact-form input,
.contact-form textarea {
  color: #7a7a7a;
  font-size: 13px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 40px;
  outline: none;
  line-height: 40px;
  padding: 0px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.contact-form button {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #4884ac;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  margin-top: -8px;
}

.contact-form button:hover {
  background-color: #4884ac;
}




/* 
---------------------------------------------
footer
--------------------------------------------- 
*/
footer {
  text-align: center;
  padding: 30px 0px;
}

footer p {
  color: #232d39;
  font-size: 13px;
}

footer p a {
  cursor: pointer;
  color: #4884ac;
}

footer p a:hover {
  color: #4884ac;
}



/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #232d39;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #232d39;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fff;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fff;
    border-radius: 50%;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


@media (max-width: 992px) {

  .main-banner .caption h2 {
    font-size: 64px;
  }
  #features {
    margin-bottom: 110px;
  }
  #features .feature-item {
    margin-bottom: 30px;
  }
  #our-classes .tabs-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  .trainer-item {
    margin-bottom: 30px;
  }
  #contact-us #map {
    margin-bottom: -7px;
  }
  #contact-us .contact-form {
    padding: 30px;
  }
  #contact-us .contact-form #contact {
    padding: 30px;
  }

}

@media (max-width: 450px) {
  .feature-item .right-content a.text-button {
    margin-left: 130px;
  }
}

/* Hồ sơ năng lực */
#hoso-nangluc {
  margin-bottom: 80px;
}

.hoso-container {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  text-align: center;
}

.hoso-container h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.hoso-container p {
  font-size: 15px;
  color: #555;
  margin-bottom: 25px;
}

/* PDF iframe */
.hoso-container iframe {
  width: 100%;
  max-width: 900px; /* Giới hạn chiều rộng */
  height: 450px;    /* Chiều cao nhỏ gọn */
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

/* Buttons PDF */
.hoso-actions a {
  display: inline-block;
  margin: 8px 10px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.btn-view {
  background: #4884ac;
}

.btn-download {
  background: #232d39;
}

.btn-view:hover {
  background: #4884ac;
}

.btn-download:hover {
  background: #444;
}

/* Desktop: giới hạn chiều cao để video không quá to */
#bg-video {
    width: 100%;
    max-height: 600px;  /* chiều cao tối đa trên desktop */
    object-fit: cover;  /* video phủ khung, không méo */
}

/* Video overlay chữ */
.video-overlay.header-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

/* Mobile: vẫn tràn toàn màn hình */
@media (max-width: 768px) {
    #bg-video {
        width: 100%;
        height: 100vh;      /* tràn full chiều cao màn hình */
        object-fit: cover;
    }
}

/* font việt full trang */
/* Tiêu đề */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    color: #1355a0; /* màu xanh Facebook */
}

/* Body, đoạn văn, menu, nút */
body, p, a, button, input, textarea {
    font-family: 'Mulish', sans-serif;
    color: #333; /* chữ chính màu xám đậm */
}

/* Nút màu xanh */
.main-button a, .btn-view, .btn-download {
    background-color: #1355a0;
    color: #fff;
    border-radius: 6px;
    padding: 10px 20px;
    text-decoration: none;
}

.main-button a:hover, .btn-view:hover, .btn-download:hover {
    background-color: #0056b3;
}

/* ----- MÀU CHO CHỮ ----- */
h1, h2, h3, h4, h5, h6, .section-heading h2 em, .main-button a, .btn-view, .btn-download {
    color: #1355a0 !important; /* xanh Facebook */
}

/* Đổi màu body text nếu có đỏ */
body, p, a, li, td, th, .feature-item h4 {
    color: #333 !important; /* chữ thường tối, không đỏ */
}

/* ----- NÚT ----- */
.main-button a, .btn-view, .btn-download {
    background-color: #1355a0 !important; /* nền xanh */
    color: #fff !important; /* chữ trắng */
    border-radius: 6px;
    padding: 10px 20px;
    text-decoration: none;
    transition: 0.3s;
}

.main-button a:hover, .btn-view:hover, .btn-download:hover {
    background-color: #0056b3 !important; /* xanh đậm khi hover */
}

/* Tiêu đề banner và chữ nhấn mạnh */
.main-banner h2 em,
.main-banner h6,
.header-area .logo em,
.section-heading h2 em,
.main-banner h2,
.main-banner h6 {
    color: #1355a0 !important; /* xanh Facebook */
}

/* Câu slogan "Don’t think, begin today!" */
#call-to-action h2 em {
    color: #1355a0 !important; /* xanh Facebook */
}

.main-banner h6 {
    color: #ffffff !important;
}

.main-banner h2 span:first-child {
    color: #1355a0 !important;
}

.main-banner h2 span:last-child {
    color: #ffffff !important;
}

/* Banner tiêu đề */
.main-banner h2 {
    font-size: 2.2rem; /* Giảm kích thước tổng thể chữ h2 */
    line-height: 1.2;
    text-transform: uppercase; /* giữ chữ in hoa */
    font-weight: 700;
    text-align: center;
}

/* Màu chữ cho từng phần */
.main-banner h2 span:first-child {
    color: #1355a0; /* xanh Facebook */
    font-size: 2.2rem; /* kích thước riêng nếu muốn */
}

.main-banner h2 span:last-child {
    color: #ffffff; /* trắng */
    font-size: 2.0rem; /* nhỏ hơn một chút */
}

/* Banner tiêu đề */
.main-banner h6 {
    color: #ffffff; /* trắng */
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* H2 chữ lớn */
.main-banner h2 {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

/* Chữ xanh Facebook */
.main-banner h2 .blue-text {
    color: #1355a0;
}

/* Chữ trắng */
.main-banner h2 .white-text {
    color: #ffffff;
    font-size: 1.8rem; /* nhỏ hơn 1 chút */
}

/* Dòng địa chỉ nhỏ */
.main-banner .small-address {
    color: #ffffff !important; /* trắng để nổi bật trên video */
    font-size: 0.9rem;
    margin-top: 5px;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* thêm bóng mờ để nổi bật hơn */
}

/* Dòng nhỏ dưới tiêu đề */
.main-banner .sub-title {
    font-size: 1.4rem;       /* nhỏ hơn tiêu đề chính */
    display: block;
    margin-top: 5px;         /* khoảng cách vừa phải với dòng trên */
}

/* Dòng địa chỉ */
.main-banner .small-address {
    color: #ffffff;          /* trắng nổi bật */
    font-size: 1rem;         /* nhỏ hơn sub-title */
    margin-top: 8px;         /* kéo lên sát tiêu đề */
    margin-bottom: 20px;     /* cách nút "Dịch vụ" vừa phải */
}

/* Dòng GIA CÔNG CƠ KHÍ */
.main-banner .blue-text {
    color: #1355a0;          /* xanh Facebook */
    font-size: 3.2rem;       /* giữ lớn như tiêu đề chính */
}

/* Dòng phụ "SẮT THÉP HÌNH MỸ THUẬT" */
.main-banner .sub-title {
    font-size: 1.1rem !important;   /* nhỏ hơn chữ chính */
    display: block;
    margin-top: 2px;                /* khoảng cách với dòng trên */
    color: #1355a0 !important;      /* màu xanh Facebook */
    font-weight: 500;               /* vừa phải, dễ nhìn */
}

#product-slider .slider-wrapper {
  overflow: hidden;
  width: 100%;
  margin: 20px 0;
}

#product-slider .slider-track {
  display: flex;
  gap: 15px;
  animation: scroll 15s linear infinite;
}

#product-slider .slider-wrapper:hover .slider-track {
  animation-play-state: paused; /* hover tạm dừng */
}

#product-slider .slide img {
  height: 325px;        /* tăng 1.5 lần */
  object-fit: contain;
  border-radius: 8px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* chạy liên tục */
}

/* ===== Báo giá banner ===== */
#contact-banner .contact-banner-box {
  background: rgba(255,255,255,0.95);
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#contact-banner h4 {
  font-size: 24px;
  margin-bottom: 6px;
}

#contact-banner .banner-subtext {
  font-size: 14px;
  margin-bottom: 15px;
  color: #555;
}

#contact-banner .contact-form-banner input,
#contact-banner .contact-form-banner textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

#contact-banner .contact-form-banner .main-button {
  margin-top: 10px;
}

/* ===== Info công ty + Map ===== */
#info-map .contact-info {
  background: rgba(255,255,255,0.95);
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

#info-map h5 {
  font-size: 22px;
  margin-bottom: 10px;
}

#info-map p {
  font-size: 15px;
  margin-bottom: 6px;
  line-height: 1.5;
}

#info-map iframe {
  border-radius: 8px;
  height: 100%;
}

@media (max-width: 991px) {
  #info-map .contact-info {
    text-align: center; /* Mobile căn giữa */
    margin-bottom: 20px;
  }
}

/* Giảm khoảng trắng dư thừa trên, giữ khoảng dưới vừa đủ */
.section {
    padding-top: 10px;    /* giảm top để không trống quá */
    padding-bottom: 60px; /* giữ bottom để hơi “thoáng” */
    position: relative;
}

/* Phân cách mờ ở giữa section */
.section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: rgba(0,0,0,0.25); /* đường mờ xám nhạt */
}

#projects-tbody tr {
  display: none;
}

#projects-tbody tr:nth-child(-n+6) {
  display: table-row; /* hiển thị 6 dòng đầu */
}

#show-more-projects {
  background-color: #1355a0;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
}

#show-more-projects:hover {
  background-color: #0056b3;
}

.section {
    padding: 50px 0 !important; /* giảm từ ~120px xuống 50px */
}

/* 🔥 GIẢM KHOẢNG TRỐNG TO NHẤT */
.section-heading {
    margin-top: 40px !important;
    margin-bottom: 30px !important;
}

/* 🔥 XÓA margin dư của từng section */
#our-classes,
#features,
#projects,
#hoso-nangluc,
#contact-banner,
#info-map {
    margin-bottom: 0 !important;
}

/* 🔥 đảm bảo section không bị padding quá lớn */
.section {
    padding: 40px 0 !important;
}

.main-banner h2 .main-title-red {
    color: red !important;
}

/* coppyright... cuối cùng nghiêng */
footer p {
    font-style: italic;
}

/* Offcanvas menu */
.offcanvas{
    position:fixed;
    top:0;
    right:-320px; /* ẩn ngoài */
    width:320px;
    max-width:70%;
    height:100%;
    background:#fff;
    transition:right 0.3s ease-in-out;
    z-index:9999;
    border-left:1px solid #eee;
    display:flex;
    flex-direction:column;
}

.offcanvas.active{
    right:0;
}

/* Body menu flex */
.offcanvas-body{
    display:flex;
    flex-direction:column;
    height:100%;
}

/* Link menu inox với shine */
.btn-inox-menu{
    display:block;
    width:90%;
    margin:10px auto;
    padding:14px;
    font-weight:600;
    text-align:center;
    border-radius:12px;
    background:linear-gradient(145deg, #ffffff, #e6e6e6);
    color:#333;
    position:relative;
    overflow:hidden;
    box-shadow:4px 4px 10px rgba(0,0,0,0.15), -3px -3px 8px rgba(255,255,255,0.9);
    transition:all 0.25s ease;
}

/* hover nổi */
.btn-inox-menu:hover{
    transform:translateY(-2px);
    box-shadow:6px 6px 14px rgba(0,0,0,0.2), -4px -4px 10px rgba(255,255,255,1);
}

/* shine effect */
.btn-inox-menu::before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.9), transparent);
    transform:skewX(-25deg);
    z-index:3;
    pointer-events:none;
}

/* chạy shine khi hover */
.btn-inox-menu:hover::before{
    animation:shine 0.8s linear;
}

@keyframes shine{
    0%{ left:-75%; }
    100%{ left:125%; }
}

/* Active trạng thái click */
.btn-inox-menu:active{
    transform:translateY(1px);
    box-shadow:inset 2px 2px 5px rgba(0,0,0,0.15);
}
/* Nút Chat Zalo đỏ nhạt giống .btn-inox-cta nhưng màu khác */
.btn-inox-zalo-red {
    /* Kế thừa toàn bộ của btn-inox-cta */
    position: relative;
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;

    /* MÀU đỏ nhạt thay vì cam */
    background: linear-gradient(145deg, #ffd6d6, #ce3c3c);
    color: #222;

    /* hiệu ứng inox nổi */
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2),
                -3px -3px 8px rgba(255,255,255,0.9);

    transition: all 0.25s ease;
}

/* Hover nổi + sáng hơn */
.btn-inox-zalo-red:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #ffe0e0, #ffaaaa);
}

/* Vệt sáng lướt qua */
.btn-inox-zalo-red::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.9), transparent);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
}

/* chạy vệt sáng khi hover */
.btn-inox-zalo-red:hover::before {
    animation: shine 0.8s linear;
}

/* Click ấn xuống */
.btn-inox-zalo-red:active {
    transform: translateY(1px);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.15);
    background: linear-gradient(145deg, #e63939, #c62828); /* đỏ đậm khi bấm */
}

/* animation chung cho vệt sáng */
@keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
}

/* Nút Nhận báo giá kiểu giống Zalo */
.btn-inox-primary-redesign {
    /* kế thừa btn-inox-cta */
    position: relative;
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;

    /* MÀU xanh nhạt thay vì cam */
    background: linear-gradient(145deg, #66b2ec, #1b6bb1);
    color: #fff;

    /* hiệu ứng inox nổi */
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2),
                -3px -3px 8px rgba(255,255,255,0.9);

    transition: all 0.25s ease;
}

/* Hover nổi + sáng hơn */
.btn-inox-primary-redesign:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #90e0ef, #64b5f6);
}

/* Vệt sáng lướt qua */
.btn-inox-primary-redesign::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.9), transparent);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
}

/* chạy vệt sáng khi hover */
.btn-inox-primary-redesign:hover::before {
    animation: shine 0.8s linear;
}

/* Click ấn xuống */
.btn-inox-primary-redesign:active {
    transform: translateY(1px);
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.15);
    background: linear-gradient(145deg, #1c7ed6, #1971c2); /* xanh đậm khi bấm */
}

/* Ẩn menu gốc trên tất cả màn hình, chỉ giữ offcanvas */
header .main-nav ul.nav {
    display: none !important;
}
/* Ẩn menu offcanvas lúc load */
.offcanvas {
    visibility: hidden;   /* ẩn hoàn toàn */
    opacity: 0;           /* không nhìn thấy */
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Khi menu bật lên */
.offcanvas.show {
    visibility: visible;
    opacity: 1;
}
/* Ẩn menu offcanvas mặc định */
.offcanvas {
    position: fixed;
    top: 0;
    right: -100%; /* đẩy ra ngoài màn hình */
    width: 320px;
    max-width: 70%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    border-left: 1px solid #eee;

    /* Chỉ transition transform */
    transition: transform 0.35s ease-in-out;
    transform: translateX(100%); /* ẩn hoàn toàn */
}

/* Khi bật menu */
.offcanvas.show {
    transform: translateX(0); /* vào vị trí */
}

/* Offcanvas mượt */
.offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 70%;
    height: 100%;
    background: #fff;
    transform: translateX(100%);   /* ẩn ngoài màn hình */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* mượt hơn ease-in-out */
    z-index: 9999;
    border-left: 1px solid #eee;
    display: flex;
    flex-direction: column;
    opacity: 1;  /* giữ luôn */
}

/* Khi menu bật */
.offcanvas.active {
    transform: translateX(0);   /* trượt vào màn hình */
}

/* Nhóm 4 nút menu trên sát nhau hơn */
.offcanvas .d-grid.gap-3 {
    gap: 0px !important;  /* giảm khoảng cách giữa 4 nút trên */
    margin-bottom: px;  /* khoảng cách với 2 nút hành động dưới */
}

/* Nhóm 2 nút hành động (Nhận báo giá + Chat Zalo) */
.offcanvas .d-grid.gap-2 {
    gap: 8px !important;  /* khoảng cách 2 nút dưới giữ nguyên */
    margin-bottom: 6px;    /* khoảng cách với phần info dưới */
}

/* tất cả chữ nghiêng */
.menu-company-info {
    font-style: italic;
    margin-top: 0;  /* sát với 2 nút hành động */
    padding-top: 0;
}

/* ===== Thông tin công ty ===== */
.offcanvas .menu-company-info {
    font-style: italic;  /* tất cả chữ nghiêng */
    margin-top: 0;       /* sát nút dưới */
    padding-top: 0;
}

/* Tên công ty màu xanh dương */
.offcanvas .menu-company-info .company-name {
    color: #0d6efd !important;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Địa chỉ màu đỏ */
.offcanvas .menu-company-info .company-address {
    color: #000000 !important;
    margin-bottom: 4px;
}

/* Dòng tư vấn miễn phí màu xanh lá */
.offcanvas .menu-company-info .company-highlight {
    color: #28a745 !important;
    margin-top: 4px;
    font-size: 12px;
}

/* Các dòng khác giữ màu mặc định */
.offcanvas .menu-company-info p {
    color: #333;
    margin-bottom: 2px;
}

/* Pill chat Zalo cố định góc dưới phải */
.zalo-pill {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(145deg, #74c0fc, #3185ce); /* màu xanh */
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px; /* pill */
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.2), -3px -3px 8px rgba(255,255,255,0.9);
  z-index: 99999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover nổi + sáng hơn */
.zalo-pill:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 14px rgba(0,0,0,0.25), -4px -4px 10px rgba(255,255,255,1);
}

/* Animation rung nhẹ */
@keyframes zalo-rumble {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-2px, 0); }
  50% { transform: translate(2px, 0); }
  75% { transform: translate(-1px, 0); }
}

/* Chạy rung mỗi 3s */
.zalo-pill {
  animation: zalo-rumble 1s ease-in-out infinite;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

#bg-gif {
    width: 100%;
    height: 100vh;          /* full chiều cao màn hình */
    object-fit: cover;       /* cắt vừa đủ nhưng giữ tỉ lệ */
    display: block;
}