/* ── LOGO ────────────────────────────────────────── */
.site-logo a { display: block; line-height: 0; }
.site-logo__img {
  height: 54px;         /* ← chỉnh số này để to/nhỏ logo */
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 640px) {
  .site-logo__img { height: 44px; }
}


.site-header.logo-dark .site-logo__img--dark  { display: block; }

/* ══════════════════════════════════════════════════════════════
   FACCO — header.css  v6.0
   Header · Nav · Hotline · Zalo
══════════════════════════════════════════════════════════════ */

/* ── HEADER ──────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--hh);
  display: flex; align-items: center; padding: 0 var(--g);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background var(--tn), border-color var(--tn), box-shadow var(--tn);
}
.site-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(26, 22, 18, .08);
  border-bottom-color: var(--gold-m);
}

/* ── LOGO ────────────────────────────────────────── */
.site-logo { flex-shrink: 0; }

/* ── LOGO IMAGE — ảnh thật từ PDF ────────────────── */
.site-logo a     { display: block; line-height: 0; }
.site-logo__img  {
  height: 52px;        /* Chiều cao logo trong header */
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 860px) { .site-logo__img { height: 44px; } }
@media (max-width: 480px) { .site-logo__img { height: 38px; } }


.site-logo__main {
  font-family: var(--fd); font-size: 21px; font-weight: 600;
  letter-spacing: .28em; padding-right: .28em;
  color: var(--tx-0); line-height: 1;
}
/* Dark mode: chữ logo sáng */
@media (prefers-color-scheme: dark) {
  .site-logo__main { color: var(--dk-t); }
}

.site-logo__flag {
  display: inline-flex; align-items: center;
  background: var(--red); padding: 2px 7px; border-radius: var(--r-full);
}
.site-logo__flag span {
  font-family: var(--fb); font-size: 7px; font-weight: 500;
  letter-spacing: .16em; color: rgba(255,255,255,.84); text-transform: uppercase;
}

/* ── NAV ─────────────────────────────────────────── */
.site-nav { display: flex; gap: 0; align-items: center; margin: 0 auto 0 24px; }

.site-nav__link {
  font-family: var(--fb); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 10px;
  color: var(--tx-3);
  transition: color var(--tf); position: relative;
}
.site-nav__link::after {
  content: ''; position: absolute; bottom: 4px; left: 10px; right: 10px;
  height: .5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--tn);
}
.site-nav__link:hover,
.site-nav__link.is-active { color: var(--tx-0); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }

@media (prefers-color-scheme: dark) {
  .site-nav__link         { color: var(--dk-m); }
  .site-nav__link:hover,
  .site-nav__link.is-active { color: var(--dk-t); }
  .site-nav__link::after  { background: var(--gold-w); }
}

/* ── HEADER RIGHT ────────────────────────────────── */
.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Language switcher */
.lang-switcher { display: flex; align-items: center; gap: 4px; }
.lang-switcher__btn {
  font-family: var(--fb); font-size: 9px; font-weight: 500; letter-spacing: .20em;
  color: var(--tx-2); cursor: pointer;
  padding: 4px 2px; background: none; border: none;
  border-bottom: 1px solid transparent;
  transition: color var(--tf), border-color var(--tf);
}
.lang-switcher__btn.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.lang-switcher__btn.is-disabled { opacity: .45; cursor: help; }
.lang-switcher__sep { font-size: 9px; color: var(--br-g); user-select: none; }

@media (prefers-color-scheme: dark) {
  .lang-switcher__btn { color: var(--dk-m); }
  .lang-switcher__btn.is-active { color: var(--gold-w); border-bottom-color: var(--gold-w); }
}

/* Header CTA */
.header-cta { min-height: 38px; padding: 9px 18px; }

/* Mobile toggle */
.mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.mobile-toggle span {
  width: 21px; height: 1.5px;
  background: var(--tx-2); display: block; transition: var(--tn);
}
@media (prefers-color-scheme: dark) {
  .mobile-toggle span { background: var(--dk-d); }
}
.mobile-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

/* ── HOTLINE FLOAT ───────────────────────────────── */
.hotline-float {
  position: fixed; bottom: 24px; left: 20px; z-index: 200;
  display: flex; align-items: center; gap: 9px;
  background: var(--red); padding: 8px 17px 8px 13px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-red);
  transition: transform var(--tf), box-shadow var(--tf);
}
.hotline-float:hover { transform: scale(1.04); box-shadow: 0 8px 26px rgba(184,50,40,.36); }
.hotline-float svg { width: 15px; height: 15px; fill: white; flex-shrink: 0; }
.hotline-float__number {
  font-family: var(--fd); font-size: 17px; font-weight: 400;
  letter-spacing: .07em; color: white;
}

/* ── ZALO FLOAT ──────────────────────────────────── */
/* #0068FF = xanh chính thức của Zalo */
.zalo-float {
  position: fixed; bottom: 82px; left: 20px; z-index: 200;
  width: 46px; height: 46px; border-radius: 50%;
  background: #0068ff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 104, 255, .30);
  transition: transform var(--tf), box-shadow var(--tf);
}
.zalo-float:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,104,255,.42); }
.zalo-float svg { width: 26px; height: 26px; }

@media (max-width: 640px) {
  .hotline-float {
    left: 16px;
    right: 16px;
    bottom: 18px;
    justify-content: center;
  }
  .zalo-float {
    display: flex;
    left: auto;
    right: 16px;
    bottom: 82px;
  }
}