/* =========================================================
   DLG HOTEL DANANG CAREER HEADER
   File: /css/dlg-career-header.css
   Scoped to .dlg-career-*
========================================================= */

html,
body{
  margin:0;
}

.dlg-career-header,
.dlg-career-header *{
  box-sizing:border-box !important;
}

.dlg-career-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:96px !important;
  z-index:999999 !important;
  overflow:visible !important;
  background:linear-gradient(
    to bottom,
    rgba(0,95,95,.88),
    rgba(0,95,95,.42),
    rgba(0,95,95,0)
  ) !important;
  transition:background .42s cubic-bezier(.22,.72,.22,1), box-shadow .42s ease, height .42s ease !important;
}

.dlg-career-header.is-scrolled,
.dlg-career-header.is-open{
  background:rgba(0,95,95,.98) !important;
  box-shadow:0 14px 42px rgba(0,0,0,.12) !important;
}

body.admin-bar .dlg-career-header{
  top:32px !important;
}

@media(max-width:782px){
  body.admin-bar .dlg-career-header{
    top:46px !important;
  }
}

.dlg-career-header__inner{
  width:min(1240px, calc(100% - 48px)) !important;
  height:100% !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  position:relative !important;
}

.dlg-career-nav{
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
}

.dlg-career-nav--left{
  justify-content:flex-end !important;
  padding-right:38px !important;
}

.dlg-career-nav--right{
  justify-content:flex-start !important;
  padding-left:38px !important;
}

.dlg-career-nav__link{
  color:#fff !important;
  text-decoration:none !important;
  font-family:Montserrat, Arial, Helvetica, sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  transition:color .25s ease, opacity .25s ease !important;
}

.dlg-career-nav__link:hover,
.dlg-career-nav__link:focus{
  color:#e9d9a6 !important;
  text-decoration:none !important;
  outline:none !important;
  box-shadow:none !important;
}

.dlg-career-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:128px !important;
  text-decoration:none !important;
  position:relative !important;
  z-index:100003 !important;
  box-shadow:none !important;
}

.dlg-career-logo img{
  width:90px !important;
  max-width:90px !important;
  height:auto !important;
  display:block !important;
  border:0 !important;
}

.dlg-career-dropdown{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:14px 0 !important;
}

.dlg-career-dropdown__trigger{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
}

.dlg-career-dropdown__trigger::after{
  content:"" !important;
  width:6px !important;
  height:6px !important;
  border-right:1.5px solid currentColor !important;
  border-bottom:1.5px solid currentColor !important;
  transform:rotate(45deg) translateY(-2px) !important;
  transition:transform .25s ease !important;
}

.dlg-career-dropdown:hover .dlg-career-dropdown__trigger,
.dlg-career-dropdown:focus-within .dlg-career-dropdown__trigger{
  color:#e9d9a6 !important;
}

.dlg-career-dropdown:hover .dlg-career-dropdown__trigger::after,
.dlg-career-dropdown:focus-within .dlg-career-dropdown__trigger::after{
  transform:rotate(225deg) translateY(-1px) !important;
}

.dlg-career-dropdown__menu{
  position:absolute !important;
  top:calc(100% + 2px) !important;
  left:50% !important;
  min-width:168px !important;
  padding:8px 0 !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.16) !important;
  transform:translateX(-50%) translateY(8px) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease !important;
}

.dlg-career-dropdown:hover .dlg-career-dropdown__menu,
.dlg-career-dropdown:focus-within .dlg-career-dropdown__menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}

.dlg-career-dropdown__menu a{
  display:block !important;
  padding:11px 18px !important;
  color:#143540 !important;
  font-family:Montserrat, Arial, Helvetica, sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  line-height:1.2 !important;
  text-align:center !important;
  text-decoration:none !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transition:background .2s ease, color .2s ease !important;
}

.dlg-career-dropdown__menu a:hover,
.dlg-career-dropdown__menu a:focus{
  background:rgba(0,95,95,.08) !important;
  color:#005f5f !important;
  text-decoration:none !important;
  outline:none !important;
}

.dlg-career-book,
.dlg-career-mobile-book{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  font-family:Montserrat, Arial, Helvetica, sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.105em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  line-height:1 !important;
  box-shadow:none !important;
  transition:background .32s ease, border-color .32s ease, color .32s ease, transform .32s ease !important;
}

.dlg-career-book{
  min-width:118px !important;
  height:36px !important;
  padding:0 22px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}

.dlg-career-book:hover,
.dlg-career-book:focus{
  background:#fff !important;
  border-color:#fff !important;
  color:#247d80 !important;
  transform:translateY(-1px) !important;
  text-decoration:none !important;
  outline:none !important;
}

.dlg-career-mobile-toggle{
  display:none !important;
  width:34px !important;
  height:26px !important;
  border:0 !important;
  background:transparent !important;
  cursor:pointer !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:100004 !important;
  padding:0 !important;
  box-shadow:none !important;
}

.dlg-career-mobile-toggle span{
  display:block !important;
  width:100% !important;
  height:2px !important;
  margin:7px 0 !important;
  background:#fff !important;
  transform-origin:center !important;
  transition:transform .35s ease, opacity .25s ease, background .25s ease !important;
}

.dlg-career-header.is-open .dlg-career-mobile-toggle span:nth-child(1){
  transform:translateY(9px) rotate(45deg) !important;
}

.dlg-career-header.is-open .dlg-career-mobile-toggle span:nth-child(2){
  opacity:0 !important;
}

.dlg-career-header.is-open .dlg-career-mobile-toggle span:nth-child(3){
  transform:translateY(-9px) rotate(-45deg) !important;
}

.dlg-career-mobile-book{
  display:none !important;
  height:34px !important;
  min-width:92px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
}

.dlg-career-mobile-book:hover,
.dlg-career-mobile-book:focus{
  background:#fff !important;
  border-color:#fff !important;
  color:#247d80 !important;
  transform:translateY(-1px) !important;
  text-decoration:none !important;
  outline:none !important;
}

.dlg-career-menu-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  background:rgba(0,0,0,.22) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .38s ease, visibility .38s ease !important;
}

.dlg-career-mobile-panel{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  z-index:100002 !important;
  width:min(430px,86vw) !important;
  height:100vh !important;
  padding:112px 34px 34px !important;
  background:linear-gradient(145deg, #005f5f 0%, #064b4d 55%, #143540 100%) !important;
  box-shadow:28px 0 70px rgba(0,0,0,.28) !important;
  transform:translateX(-104%) !important;
  visibility:hidden !important;
  transition:transform .58s cubic-bezier(.22,1,.36,1), visibility .58s ease !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}

.dlg-career-header.is-open .dlg-career-menu-backdrop{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.dlg-career-header.is-open .dlg-career-mobile-panel{
  transform:translateX(0) !important;
  visibility:visible !important;
}

.dlg-career-mobile-links{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}

.dlg-career-mobile-links a{
  position:relative !important;
  display:block !important;
  padding:15px 0 !important;
  color:#fff !important;
  font-family:Montserrat, Arial, Helvetica, sans-serif !important;
  font-size:clamp(20px,5.2vw,30px) !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  text-decoration:none !important;
  letter-spacing:-.02em !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  transform:translateX(-12px) !important;
  opacity:0 !important;
  box-shadow:none !important;
  transition:color .25s ease, padding-left .25s ease, transform .48s ease, opacity .48s ease !important;
}

.dlg-career-header.is-open .dlg-career-mobile-links a{
  transform:translateX(0) !important;
  opacity:1 !important;
}

.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(1){transition-delay:.08s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(2){transition-delay:.11s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(3){transition-delay:.14s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(4){transition-delay:.17s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(5){transition-delay:.20s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(6){transition-delay:.23s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(7){transition-delay:.26s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(8){transition-delay:.29s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(9){transition-delay:.32s !important;}
.dlg-career-header.is-open .dlg-career-mobile-links a:nth-child(10){transition-delay:.35s !important;}

.dlg-career-mobile-links a:hover,
.dlg-career-mobile-links a:focus{
  color:#e9d9a6 !important;
  padding-left:10px !important;
  text-decoration:none !important;
  outline:none !important;
}

html.dlg-career-menu-lock,
body.dlg-career-menu-lock{
  overflow:hidden !important;
}

/* CAREER BANNER */

.dlg-career-banner{
  position:relative !important;
  width:100% !important;
  height:430px !important;
  min-height:430px !important;
  max-height:430px !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  background:#005f5f !important;
}

.dlg-career-banner img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border:0 !important;
  transform:scale(1) !important;
}

.dlg-career-banner__overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(
      to bottom,
      rgba(0,45,48,.28) 0%,
      rgba(0,45,48,.34) 45%,
      rgba(0,35,38,.50) 100%
    ) !important;
  pointer-events:none !important;
}

.dlg-career-banner__content{
  position:absolute !important;
  left:50% !important;
  top:55% !important;
  z-index:2 !important;
  width:min(860px, calc(100% - 48px)) !important;
  transform:translate(-50%, -50%) !important;
  text-align:center !important;
  color:#fff !important;
  pointer-events:none !important;
}

.dlg-career-banner__content span{
  display:block !important;
  margin:0 0 12px !important;
  color:#e9d9a6 !important;
  font-family:Montserrat, Arial, Helvetica, sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.24em !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
}

.dlg-career-banner__content h1{
  margin:0 !important;
  color:#fff !important;
  font-family:"Playfair Display", Georgia, "Times New Roman", serif !important;
  font-size:58px !important;
  font-weight:500 !important;
  line-height:1.04 !important;
  letter-spacing:.01em !important;
  text-shadow:0 14px 34px rgba(0,0,0,.22) !important;
}

@media(max-width:1180px){
  .dlg-career-nav{
    gap:17px !important;
  }

  .dlg-career-nav__link{
    font-size:13px !important;
  }

  .dlg-career-nav--left{
    padding-right:28px !important;
  }

  .dlg-career-nav--right{
    padding-left:28px !important;
  }
}

@media(max-width:980px){
  .dlg-career-header{
    height:82px !important;
    background:rgba(0,95,95,.96) !important;
  }

  .dlg-career-header__inner{
    width:calc(100% - 32px) !important;
    display:flex !important;
    justify-content:center !important;
  }

  .dlg-career-logo{
    width:auto !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  .dlg-career-logo img{
    width:86px !important;
    max-width:86px !important;
  }

  .dlg-career-mobile-toggle{
    display:block !important;
  }

  .dlg-career-mobile-book{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:100004 !important;
  }

  .dlg-career-mobile-book:hover,
  .dlg-career-mobile-book:focus{
    transform:translateY(calc(-50% - 1px)) !important;
  }

  .dlg-career-nav,
  .dlg-career-dropdown{
    display:none !important;
  }

  body{
    padding-top:82px !important;
  }

  .dlg-career-banner{
    height:340px !important;
    min-height:340px !important;
    max-height:340px !important;
  }

  .dlg-career-banner__content{
    top:55% !important;
    width:calc(100% - 36px) !important;
  }

  .dlg-career-banner__content span{
    margin-bottom:10px !important;
    font-size:11px !important;
    letter-spacing:.18em !important;
  }

  .dlg-career-banner__content h1{
    font-size:42px !important;
  }
}

@media(max-width:520px){
  .dlg-career-mobile-book{
    min-width:78px !important;
    height:31px !important;
    padding:0 11px !important;
    font-size:9px !important;
    letter-spacing:.06em !important;
  }

  .dlg-career-mobile-panel{
    width:88vw !important;
    padding:104px 26px 30px !important;
  }

  .dlg-career-mobile-links a{
    padding:14px 0 !important;
  }

  .dlg-career-banner{
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
  }

  .dlg-career-banner__content h1{
    font-size:36px !important;
  }
}

@media(min-width:981px){
  body{
    padding-top:0 !important;
  }
}