/* Contact information and request form. */

/* 
   7. Contact page
    */
.bk-contact-info-section,
.bk-contact-request-section{
  --bk-contact-navy:#001b3a;
  --bk-contact-navy-2:#062b52;
  --bk-contact-white:rgba(255,255,255,.9);
}

.bk-contact-info-section{
  background:var(--bk-white)!important;
  padding:56px 0!important;
}

.bk-contact-info-wrap{
  width:100%!important;
  max-width:var(--bk-contact-container)!important;
  margin:auto!important;
}

.bk-contact-info-wrap > .col{
  padding:0!important;
}

.bk-contact-info-inner{
  width:100%!important;
  background:var(--bk-white)!important;
  border-radius:var(--bk-radius-md)!important;
  overflow:hidden!important;
  box-shadow:var(--bk-shadow-md)!important;
}

.bk-contact-info-title,
.bk-contact-info-title *{
  margin:0!important;
}

.bk-contact-info-title :is(h1,h2,h3,p){
  padding:28px 20px!important;
  background:var(--bk-contact-navy)!important;
  color:var(--bk-white)!important;
  font-size:clamp(30px,3.2vw,44px)!important;
  line-height:1.1!important;
  font-weight:800!important;
  text-align:center!important;
  text-transform:uppercase!important;
  letter-spacing:-.02em!important;
}

.bk-contact-map{
  width:100%!important;
  height:460px!important;
  margin:0!important;
  padding:0!important;
  background:#eee!important;
  overflow:hidden!important;
  line-height:0!important;
  font-size:0!important;
}

.bk-contact-map iframe{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

.bk-contact-card-row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  width:100%!important;
  margin:0!important;
  padding:18px!important;
  background:var(--bk-light)!important;
}

.bk-contact-card-row > .col{
  flex:0 0 33.333%!important;
  width:33.333%!important;
  max-width:33.333%!important;
  margin:0!important;
  padding:0 8px!important;
  float:none!important;
  clear:none!important;
}

.bk-contact-card-row > .col > .col-inner{
  height:100%!important;
}

.bk-contact-card{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:260px!important;
  padding:22px!important;
  background:var(--bk-white)!important;
  color:var(--bk-text)!important;
  border:1px solid var(--bk-contact-navy)!important;
  border-radius:var(--bk-radius-sm)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transition:.25s!important;
}

.bk-contact-card.is-active,
.bk-contact-card:hover{
  background:var(--bk-contact-navy)!important;
  color:var(--bk-white)!important;
  border-color:var(--bk-contact-navy)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 10px 24px rgba(0,27,58,.2)!important;
}

.bk-contact-card h3{
  margin:0 0 16px!important;
  color:inherit!important;
  font-size:19px!important;
  line-height:1.3!important;
  font-weight:800!important;
}

.bk-contact-item{
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr)!important;
  column-gap:10px!important;
  width:100%!important;
  margin:0 0 14px!important;
  color:inherit!important;
}

.bk-contact-item:last-child{
  margin-bottom:0!important;
}

.bk-contact-icon{
  display:block!important;
  width:22px!important;
  min-width:22px!important;
  color:inherit!important;
  font-size:14px!important;
  line-height:1.4!important;
  text-align:center!important;
}

.bk-contact-item :is(strong,p){
  color:inherit!important;
  font-size:13.5px!important;
  line-height:1.5!important;
}

.bk-contact-item strong{
  display:inline-block!important;
  margin-bottom:2px!important;
  font-weight:800!important;
  line-height:1.45!important;
}

.bk-contact-item p{
  margin:0 0 6px!important;
  padding:0!important;
  font-weight:400!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

.bk-contact-card .bk-contact-item p.bk-phone-list{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  width:100%!important;
  margin:4px 0 0!important;
  padding:0!important;
  font-size:13px!important;
  line-height:1.45!important;
  white-space:nowrap!important;
}

.bk-contact-card .bk-contact-item p.bk-phone-list br{
  display:none!important;
}

.bk-contact-card .bk-contact-item p.bk-phone-list a{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  color:inherit!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

.bk-contact-card .bk-contact-item p.bk-phone-list a:not(:last-child)::after{
  content:"hoặc"!important;
  display:inline-block!important;
  margin:0 8px!important;
  color:inherit!important;
  font-weight:400!important;
  opacity:.9!important;
}

.bk-contact-card .bk-contact-item p.bk-phone-list a:hover{
  text-decoration:underline!important;
}

/* Contact form */
.bk-contact-request-section{
  position:relative!important;
  isolation:isolate!important;
  min-height:auto!important;
  padding:88px 0!important;
  background:var(--bk-white)!important;
  overflow:hidden!important;
}

.bk-contact-request-section::before,
.bk-contact-request-section::after{
  display:none!important;
  content:none!important;
}

.bk-contact-request-row{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
}

.bk-contact-request-row > .col,
.bk-contact-request-col,
.bk-contact-request-content{
  width:100%!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.bk-contact-request-row > .col{
  flex-basis:760px!important;
  padding-left:0!important;
  padding-right:0!important;
}

.bk-contact-request-content{
  text-align:center!important;
}

.bk-contact-request-content,
.bk-contact-request-kicker,
.bk-contact-request-content h2,
.bk-contact-request-content p,
.bk-cf7-consent{
  color:var(--bk-navy)!important;
}

.bk-contact-request-kicker{
  display:inline-block!important;
  margin-bottom:8px!important;
  font-size:15px!important;
  line-height:1.3!important;
  font-weight:700!important;
}

.bk-contact-request-content h2{
  margin:0 0 14px!important;
  padding:0!important;
  font-size:clamp(34px,4vw,56px)!important;
  line-height:1.08!important;
  font-weight:800!important;
  text-align:center!important;
  text-transform:uppercase!important;
  letter-spacing:-.03em!important;
}

.bk-contact-request-content p{
  max-width:620px!important;
  margin:0 auto 30px!important;
  padding:0!important;
  color:rgba(0,31,58,.78)!important;
  font-size:16px!important;
  line-height:1.65!important;
  font-weight:400!important;
  text-align:center!important;
}

.bk-contact-request-form{
  width:100%!important;
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:left!important;
}

.bk-contact-request-form :is(.wpcf7,.wpcf7 form,.wpcf7-form,p){
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
}

.bk-contact-request-form br{
  display:none!important;
}

.bk-contact-request-form .bk-cf7-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
  max-width:100%!important;
}

.bk-contact-request-form :is(.bk-cf7-field,.bk-cf7-full,.wpcf7-form-control-wrap){
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

.bk-contact-request-form .bk-cf7-full{
  grid-column:1/-1!important;
}

.bk-contact-request-form :is(input[type="text"],input[type="email"],input[type="tel"],textarea){
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  height:50px!important;
  margin:0!important;
  padding:0 20px!important;
  background:var(--bk-white)!important;
  color:var(--bk-navy)!important;
  border:1px solid rgba(0,31,58,.55)!important;
  border-radius:999px!important;
  box-shadow:none!important;
  outline:none!important;
  font-size:15px!important;
  line-height:1.4!important;
  font-weight:500!important;
  transition:.25s!important;
}

.bk-contact-request-form textarea{
  min-width:100%!important;
  height:96px!important;
  min-height:96px!important;
  padding:0 20px!important;
  border-radius:48px!important;
  line-height:96px!important;
  resize:none!important;
  overflow:hidden!important;
}

.bk-contact-request-form textarea::placeholder{
  line-height:96px!important;
}

.bk-contact-request-form :is(input,textarea)::placeholder{
  color:rgba(0,31,58,.65)!important;
  opacity:1!important;
}

.bk-contact-request-form :is(input[type="text"],input[type="email"],input[type="tel"],textarea):focus{
  background:var(--bk-white)!important;
  border-color:var(--bk-navy)!important;
  box-shadow:0 0 0 3px rgba(0,31,58,.08)!important;
}

.bk-cf7-consent{
  max-width:680px!important;
  margin:22px 0 24px!important;
  font-size:13.5px!important;
  line-height:1.55!important;
  text-align:left!important;
}

.bk-cf7-consent .wpcf7-list-item{
  margin:0!important;
}

.bk-cf7-consent label{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin:0!important;
  color:inherit!important;
}

.bk-cf7-consent input[type="checkbox"]{
  flex:0 0 auto!important;
  margin-top:4px!important;
}

.bk-cf7-submit{
  width:100%!important;
  text-align:center!important;
}

.bk-contact-request-form input[type="submit"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:360px!important;
  height:54px!important;
  margin:0 auto!important;
  padding:0 28px!important;
  background:var(--bk-red)!important;
  color:var(--bk-white)!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
  cursor:pointer!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-align:center!important;
  text-transform:uppercase!important;
  letter-spacing:0!important;
  transition:.25s!important;
}

.bk-contact-request-form input[type="submit"]:hover{
  background:var(--bk-navy)!important;
  color:var(--bk-white)!important;
  transform:translateY(-2px)!important;
}

.bk-contact-request-form .wpcf7-not-valid-tip{
  margin-top:6px!important;
  background:transparent!important;
  color:var(--bk-red)!important;
  font-size:13px!important;
  line-height:1.35!important;
}

.bk-contact-request-form .wpcf7-response-output{
  margin:18px 0 0!important;
  padding:12px 14px!important;
  border-radius:var(--bk-radius-sm)!important;
  color:var(--bk-navy)!important;
  font-size:14px!important;
}

@media (max-width:849px){
.bk-contact-info-section{
    padding:42px 0!important;
  }

  .bk-contact-info-wrap{
    max-width:100%!important;
  }

  .bk-contact-info-title :is(h1,h2,h3,p){
    padding:24px 16px!important;
    font-size:30px!important;
  }

  .bk-contact-map{
    height:340px!important;
  }

  .bk-contact-card-row{
    padding:16px!important;
  }

  .bk-contact-card-row > .col{
    flex-basis:100%!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 0 14px!important;
  }

  .bk-contact-card-row > .col:last-child{
    padding-bottom:0!important;
  }

  .bk-contact-card{
    min-height:auto!important;
    padding:20px!important;
  }

  .bk-contact-request-section{
    padding:64px 0!important;
  }

  .bk-contact-request-row > .col,
  .bk-contact-request-col,
  .bk-contact-request-content,
  .bk-contact-request-form{
    max-width:100%!important;
    flex-basis:100%!important;
  }

  .bk-contact-request-content h2{
    font-size:38px!important;
  }

  .bk-contact-request-content p{
    font-size:15px!important;
  }
}

@media (max-width:549px){
.bk-contact-info-section{
    padding:34px 0!important;
  }

  .bk-contact-info-inner{
    border-radius:10px!important;
  }

  .bk-contact-info-title :is(h1,h2,h3,p){
    padding:20px 14px!important;
    font-size:24px!important;
    line-height:1.15!important;
  }

  .bk-contact-map{
    height:280px!important;
  }

  .bk-contact-card-row{
    padding:12px!important;
  }

  .bk-contact-card{
    padding:18px!important;
  }

  .bk-contact-card h3{
    margin-bottom:12px!important;
    font-size:18px!important;
  }

  .bk-contact-item{
    grid-template-columns:20px minmax(0,1fr)!important;
    column-gap:8px!important;
    margin-bottom:12px!important;
  }

  .bk-contact-icon{
    width:20px!important;
    min-width:20px!important;
  }

  .bk-contact-item :is(strong,p){
    font-size:13.5px!important;
  }

  .bk-contact-card .bk-contact-item p.bk-phone-list{
    flex-wrap:wrap!important;
    white-space:normal!important;
  }

  .bk-contact-request-section{
    padding:52px 0!important;
  }

  .bk-contact-request-content h2{
    font-size:30px!important;
    line-height:1.12!important;
  }

  .bk-contact-request-content p{
    margin-bottom:22px!important;
    font-size:14px!important;
  }

  .bk-contact-request-form .bk-cf7-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .bk-contact-request-form :is(input[type="text"],input[type="email"],input[type="tel"],textarea){
    height:46px!important;
    padding-left:16px!important;
    padding-right:16px!important;
    font-size:14px!important;
  }

  .bk-contact-request-form textarea{
    height:86px!important;
    min-height:86px!important;
    padding:0 16px!important;
    border-radius:36px!important;
    line-height:86px!important;
  }

  .bk-contact-request-form textarea::placeholder{
    line-height:86px!important;
  }

  .bk-cf7-consent{
    font-size:13px!important;
  }

  .bk-contact-request-form input[type="submit"]{
    max-width:100%!important;
    height:50px!important;
  }
}

