/* ==========================================================================
   Navbar panel — full-screen "menu open" overlay
   Source: Figma node 18005:14801 (desktop, >=64rem) and 18747:11348 (mobile)
   Replaces the internals of .navbar__panel; outer classes/attrs
   (.navbar__backdrop, .navbar__panel[data-open], .navbar__close,
   .navbar__toggle) are unchanged so the existing JS toggle keeps working.
   ========================================================================== */

.navbar__panel {
  padding: 0;
  gap: 0;
  background: linear-gradient(180deg, var(--c-teal-800) 8.225%, var(--c-teal-900) 100%);
  color: var(--c-white);
  width: 100%;
  transform: translateY(-24px);
  opacity: 0;
  transition:
    opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.45s;
}

.navbar__panel[data-open='true'] {
  transform: translateY(0);
  opacity: 1;
}

.navbar__backdrop {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s;
}

.navbar__panel-bar,
.navbar__panel-nav .navbar__panel-link,
.navbar__panel-info,
.navbar__panel-cta,
.navbar__panel-strip {
  transform: translateY(10px);
  opacity: 0;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    /* listed here so the hover colour eases too — a lower-specificity
       transition on .navbar__panel-link would be replaced by this one */
    color 0.22s ease;
}

.navbar__panel[data-open='true'] .navbar__panel-bar,
.navbar__panel[data-open='true'] .navbar__panel-nav .navbar__panel-link,
.navbar__panel[data-open='true'] .navbar__panel-info,
.navbar__panel[data-open='true'] .navbar__panel-cta,
.navbar__panel[data-open='true'] .navbar__panel-strip {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.08s;
}

.navbar__panel[data-open='true'] .navbar__panel-nav li:nth-child(1) .navbar__panel-link { transition-delay: 0.1s; }
.navbar__panel[data-open='true'] .navbar__panel-nav li:nth-child(2) .navbar__panel-link { transition-delay: 0.15s; }
.navbar__panel[data-open='true'] .navbar__panel-nav li:nth-child(3) .navbar__panel-link { transition-delay: 0.2s; }
.navbar__panel[data-open='true'] .navbar__panel-nav li:nth-child(4) .navbar__panel-link { transition-delay: 0.25s; }
.navbar__panel[data-open='true'] .navbar__panel-info { transition-delay: 0.3s; }
.navbar__panel[data-open='true'] .navbar__panel-cta { transition-delay: 0.34s; }
.navbar__panel[data-open='true'] .navbar__panel-strip { transition-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .navbar__panel,
  .navbar__backdrop,
  .navbar__panel-bar,
  .navbar__panel-nav .navbar__panel-link,
  .navbar__panel-info,
  .navbar__panel-cta,
  .navbar__panel-strip {
    transition: opacity 0.15s linear, visibility 0.15s !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}

.navbar__panel-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding-inline: var(--space-4);
  background: #073f55;
  flex-shrink: 0;
}

.navbar__panel-logo {
  display: block;
  width: 186px;
  height: 45px;
  transition: opacity 0.2s ease;
}

.navbar__panel-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.navbar__panel-topcta {
  display: none;
}

.navbar__close {
  width: 30px;
  height: 30px;
  border-radius: 0;
  color: inherit;
}

.navbar__close::before {
  content: none;
}

.navbar__close img {
  display: block;
  width: 100%;
  height: 100%;
}

.navbar__close:hover,
.navbar__close:focus-visible {
  background: transparent;
  transform: none;
}

.navbar__close:hover img,
.navbar__close:focus-visible img {
  transform: scale(1.08);
}

.navbar__panel-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-4) var(--space-10);
}

.navbar__panel-nav {
  order: 1;
}

.navbar__panel-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.navbar__panel-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  margin-bottom: 0;
  border-bottom: 0;
  color: var(--c-white);
  font-family: var(--ff-jp);
  font-weight: 500;
  font-size: var(--fs-20);
  letter-spacing: 2px;
}

/* The entrance animation sets opacity/transform on
   `.navbar__panel[data-open=true] .navbar__panel-nav .navbar__panel-link`, which
   outranks a plain `.navbar__panel-link:hover` — the old opacity hover here
   never actually applied. Hover now moves `color` (untouched by that rule) and
   nudges the icon, which the entrance rule does not target either. */
.navbar__panel-link:hover,
.navbar__panel-link:focus-visible {
  background: transparent;
  color: var(--color-brand);
}
.navbar__panel-link-ico {
  transition: transform 0.22s ease;
}
.navbar__panel-link:hover .navbar__panel-link-ico,
.navbar__panel-link:focus-visible .navbar__panel-link-ico {
  transform: translateX(4px);
}

.navbar__panel-logo:hover,
.navbar__panel-logo:focus-visible {
  opacity: 0.8;
}

.navbar__panel-link-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

.navbar__panel-info {
  order: 2;
  display: flex;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-white-a30);
  border-bottom: 1px solid var(--c-white-a30);
  padding-bottom: var(--space-6);
}

.navbar__panel-info-col {
  flex: 1 0 0;
  min-width: 0;
}

.navbar__panel-info-col + .navbar__panel-info-col {
  border-left: 1px solid var(--c-white-a30);
  padding-left: var(--space-4);
  margin-left: var(--space-4);
}

.navbar__panel-info-title {
  display: block;
  font-family: var(--ff-jp);
  font-weight: 700;
  font-size: var(--fs-16);
  letter-spacing: 1.6px;
  margin-bottom: var(--space-3);
}

.navbar__panel-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0.7;
  font-family: var(--ff-jp);
  font-size: var(--fs-14);
  letter-spacing: 1.4px;
}

.navbar__panel-info-list a {
  color: inherit;
}

.navbar__panel-cta {
  order: 3;
  width: 100%;
  justify-content: center;
  margin-top: var(--space-8);
}

.navbar__panel-strip {
  display: none;
}

.navbar__panel-call {
  order: 4;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-16) var(--space-4) var(--space-20);
  margin-top: var(--space-6);
}

.navbar__panel-call p {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: var(--fs-18);
}

.navbar__panel-call a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-white);
  font-family: var(--ff-jp);
  font-weight: 700;
  font-size: var(--fs-28);
  letter-spacing: 2.8px;
}

.navbar__panel-call img {
  width: 30px;
  height: 30px;
}

.navbar__panel-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.navbar__panel-decor-circle {
  position: absolute;
  left: 50%;
  bottom: -270px;
  transform: translateX(-50%);
  width: 540px;
  height: 540px;
  max-width: none;
}

.navbar__panel-decor-wave1,
.navbar__panel-decor-wave2 {
  display: none;
}

/* ---------- Desktop layout (>=64rem) ---------- */
@media (min-width: 64rem) {
  .navbar__panel {
    position: fixed;
    inset: var(--wp-admin-bar-offset, 0) 0 0;
    width: 100%;
    box-shadow: none;
  }

  .navbar__panel-bar {
    height: 90px;
    padding-inline: var(--page-gutter);
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }

  .navbar__panel-topcta {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-left: auto;
    margin-right: var(--space-6);
  }

  .navbar__panel-tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .navbar__panel-tel-label {
    font-family: var(--ff-jp);
    font-size: var(--fs-16);
    letter-spacing: 1.6px;
    margin-bottom: -6px;
  }

  .navbar__panel-tel-number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-white);
    font-family: var(--ff-jp);
    font-weight: 700;
    font-size: var(--fs-20);
    letter-spacing: 2px;
  }

  .navbar__panel-tel-number img {
    width: 22px;
    height: 22px;
  }

  .navbar__panel-topbtn {
    width: 135px;
    height: 52px;
    justify-content: center;
  }

  .navbar__close {
    width: 40px;
    height: 40px;
  }

  .navbar__panel-body {
    padding: 182px var(--page-gutter) 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--space-25);
    max-width: var(--page-w);
    margin-inline: auto;
  }

  .navbar__panel-nav {
    order: 1;
    flex: 0 0 auto;
  }

  .navbar__panel-menu {
    gap: var(--space-10);
  }

  .navbar__panel-link {
    gap: var(--space-5);
    font-family: var(--ff-jp), 'Kosugi Maru', sans-serif;
    font-size: var(--fs-40);
    line-height: 1.6;
  }

  .navbar__panel-link-ico {
    width: 40px;
    height: 40px;
  }

  .navbar__panel-info {
    order: 2;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    border-bottom: none;
    gap: var(--space-14);
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .navbar__panel-info-col {
    flex: 0 0 auto;
  }

  .navbar__panel-info-col + .navbar__panel-info-col {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }

  .navbar__panel-info-title {
    font-size: var(--fs-20);
    letter-spacing: 2px;
    margin-bottom: var(--space-6);
  }

  .navbar__panel-info-list {
    font-size: var(--fs-18);
    letter-spacing: 0.18px;
    gap: var(--space-3);
  }

  .navbar__panel-cta {
    display: none;
  }

  .navbar__panel-strip {
    display: flex;
    position: absolute;
    left: var(--page-gutter);
    bottom: 45px;      /* Figma: dòng TEL/FAX cách đáy 78px */
    z-index: 1;
    order: 3;
    flex-basis: 100%;
    gap: var(--space-10);
    margin-top: 0;
    font-family: var(--ff-jp);
    font-size: var(--fs-18);
    letter-spacing: 0.018px;
  }

  .navbar__panel-strip a,
  .navbar__panel-strip span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--c-white);
  }

  .navbar__panel-strip img {
    width: 22px;
    height: 22px;
  }

  .navbar__panel-call {
    position: absolute;
    right: 0;
    bottom: 16px;   /* Figma: số ĐT cách đáy 68px */
    gap: 19px;      /* Figma: khoảng cách nhãn → số = 52px */
    padding: 0;
    margin-top: 0;
    width: 436px;      /* canh giữa theo vòng tròn */
    text-align: center;
    align-items: center;
  }

  .navbar__panel-call img {
    width: 40px;
    height: 40px;
  }

  .navbar__panel-decor-circle {
    left: auto;
    right: 0;
    bottom: -70px;
    width: 436px;   /* Figma: đường kính 436, tâm (1221, 702) */
    height: 436px;
    transform: none;
  }

  /* Figma 18005-14801 > 18846-10965: the panel carries two overlay wave bands
     across its lower half. The design frame is 1440x850 with the wave wrapper
     at y=629, so they are anchored from the bottom here — the real panel is
     viewport-height, not 850px. Each SVG already ships at opacity 0.1 with the
     overlay blend baked in. */
  .navbar__panel-decor-wave1,
  .navbar__panel-decor-wave2 {
    display: block;
    position: absolute;
    left: 50%;
    width: 1440px;
    height: 557px;
    max-width: none;
    mix-blend-mode: overlay;
  }
  .navbar__panel-decor-wave2 {
    bottom: -336px;
    transform: translateX(-50%) scaleY(-1);
  }
  .navbar__panel-decor-wave1 {
    bottom: -365px;
    transform: translateX(-50%) rotate(180deg);
  }
}

/* ==========================================================================
   In-page section navigation (landing pages only)

   A second drawer sitting to the LEFT of the main hamburger. It slides in from
   the left so it never reads as the same panel as the site menu, which comes
   from the right. Markup is only rendered when a template passes `inpage_nav`,
   and `body.has-sectionnav` reserves the extra room in the navbar.
   ========================================================================== */

.sectionnav__toggle {
  position: absolute;
  top: 0;
  right: 84px;
  display: flex;
  /* Label sits under the icon, matching the navbar's own icon+label links. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 84px;
  height: 84px;
  background: var(--color-surface);
  border: none;
  border-left: 1px solid var(--color-border-light);
  color: var(--color-heading);
  cursor: pointer;
  font-family: var(--ff-jp);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sectionnav__toggle:hover,
.sectionnav__toggle:focus-visible {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.sectionnav__toggle[aria-expanded=true] {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.sectionnav__toggle-ico {
  display: block;
  flex-shrink: 0;
}
.sectionnav__toggle-lbl {
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Reserve the extra 84px (64px on phones) next to the hamburger. */
body.has-sectionnav .navbar__inner {
  padding-right: 194px;
}
@media (max-width: 80rem) {
  body.has-sectionnav .navbar__inner {
    padding-right: 176px;
  }
}
@media (max-width: 64rem) {
  body.has-sectionnav .navbar__inner {
    padding-right: 148px;
  }
  .sectionnav__toggle {
    right: 64px;
    width: 64px;
    height: 64px;
    gap: 2px;
  }
  .sectionnav__toggle-ico {
    width: 20px;
    height: 20px;
  }
  .sectionnav__toggle-lbl {
    font-size: 10px;
  }
}

.sectionnav__backdrop {
  position: fixed;
  inset: var(--wp-admin-bar-offset, 0) 0 0;
  z-index: 100;
  background: var(--c-black-a50, rgba(0, 0, 0, 0.5));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sectionnav__backdrop[data-open=true] {
  opacity: 1;
  visibility: visible;
}

.sectionnav {
  position: fixed;
  top: var(--wp-admin-bar-offset, 0);
  left: 0;
  bottom: 0;
  z-index: 110;
  width: min(330px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: 12px 0 40px rgba(7, 78, 106, 0.18);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.42s;
}
.sectionnav[data-open=true] {
  transform: none;
  visibility: visible;
}

.sectionnav__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px 20px 24px;
  border-bottom: 1px solid var(--color-border-light);
}
.sectionnav__title {
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: 0.04em;
}
.sectionnav__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sectionnav__close:hover,
.sectionnav__close:focus-visible {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.sectionnav__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sectionnav__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.sectionnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 24px;
  border-left: 3px solid transparent;
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sectionnav__link:hover,
.sectionnav__link:focus-visible {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
/* Set by the scroll spy on whichever section is currently in view. */
.sectionnav__link.is-current {
  background: var(--color-brand-soft);
  border-left-color: var(--color-brand);
  color: var(--color-brand);
  font-weight: 700;
}
.sectionnav__link-ico {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sectionnav__link:hover .sectionnav__link-ico,
.sectionnav__link:focus-visible .sectionnav__link-ico,
.sectionnav__link.is-current .sectionnav__link-ico {
  opacity: 1;
  transform: none;
}

.sectionnav__foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border-light);
}
.sectionnav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-inverse);
  font-family: var(--ff-jp);
  font-size: var(--fs-16);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.sectionnav__cta:hover,
.sectionnav__cta:focus-visible {
  opacity: 0.85;
}
.sectionnav__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-jp);
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--color-brand);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .sectionnav,
  .sectionnav__backdrop,
  .sectionnav__link,
  .sectionnav__link-ico,
  .sectionnav__toggle {
    transition: none;
  }
}

/* ==========================================================================
   Hover feedback for controls that had none
   ========================================================================== */

/* Phone number inside the open menu drawer. */
.navbar__panel-tel-number {
  transition: opacity 0.2s ease;
}
.navbar__panel-tel-number:hover,
.navbar__panel-tel-number:focus-visible {
  opacity: 0.78;
}

/* Section-nav drawer: the current item already carries the active tint, so it
   needs a deeper one on hover or it reads as un-clickable. */
.sectionnav__link.is-current:hover,
.sectionnav__link.is-current:focus-visible {
  background: #d4f0fa;
  color: var(--color-heading-alt, #074e6a);
}
.sectionnav__tel {
  transition: opacity 0.2s ease;
}
.sectionnav__tel:hover,
.sectionnav__tel:focus-visible {
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}