/* ═══════════════════════════════════════════════════
   YOKO – Shared CSS (reset · vars · base · header · footer)
   Included by every page via <link rel="stylesheet" href="../shared/common.css">
═══════════════════════════════════════════════════ */

/* ─── RESET ───────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ─── VARIABLES ───────────────────────────────── */
:root {
  --gold:    #c9a844;
  --gold-h:  #e0be6a;
  --bg:      #050505;
  --bg2:     #0c0c0c;
  --bg3:     #111;
  --panel:   #181818;
  --text:    #e8e0d0;
  --muted:   #8a8a8a;
  --divider: rgba(201,168,68,.16);
  --divider2:rgba(255,255,255,.05);
}

/* ─── BASE ────────────────────────────────────── */
html { scroll-behavior:smooth; scroll-padding-top:68px; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; line-height:1; }
a { text-decoration:none; color:inherit; }
img { display:block; }
button { font-family:'Inter',sans-serif; cursor:pointer; }

/* ─── HEADER ──────────────────────────────────── */
.hd {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(5,5,5,.93); border-bottom:1px solid var(--divider);
  backdrop-filter:blur(14px);
}
.hd-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:68px; gap:24px;
  max-width:1440px; margin:0 auto;
}
.hd-logo { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.hd-logo img { width:56px; height:56px; object-fit:contain; }
.hd-logo-name { display:block; font-size:27px; font-weight:700; letter-spacing:5px; color:var(--gold); }
.hd-logo-sub  { display:block; font-size:9px; letter-spacing:2.5px; color:var(--gold); }
.hd-nav { display:flex; gap:28px; align-items:center; flex:1; justify-content:center; }
.hd-nav a { font-size:11.5px; letter-spacing:1.8px; color:#bbb; font-weight:500; transition:color .2s; white-space:nowrap; }
.hd-nav a:hover { color:var(--gold); }
.hd-nav a.active { color:var(--gold); border-bottom:1.5px solid var(--gold); padding-bottom:3px; }
.hd-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.btn-hd-book {
  background:transparent; border:1.5px solid var(--gold);
  color:var(--gold); padding:8px 20px; font-size:11px;
  letter-spacing:2px; font-weight:600; transition:all .2s;
}
.btn-hd-book:hover { background:var(--gold); color:#000; }
.hd-lang { display:flex; align-items:center; gap:5px; font-size:12px; color:#bbb; cursor:pointer; }
.hd-lang img { width:18px; height:12px; object-fit:cover; border-radius:1px; }
.hd-menu-btn { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:4px; flex-shrink:0; }

/* ─── FOOTER ──────────────────────────────────── */
.footer { background:#030303; border-top:1px solid var(--divider); padding:30px 48px 0; }
.footer-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr 1.4fr;
  gap:36px; max-width:1360px; margin:0 auto; padding-bottom:10px;
}
.f-brand-logo { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.f-brand-logo img { width:120px; height:120px; object-fit:contain; }
.f-brand-name { font-size:26px; letter-spacing:5px; color:var(--gold); font-weight:700; }
.f-brand-sub { font-size:9px; letter-spacing:2.5px; color:#666; margin-top:2px; }
.f-desc { color:#585858; font-size:12.5px; line-height:1.85; margin-bottom:22px; }
.f-socials { display:flex; gap:8px; }
.f-social { width:34px; height:34px; border:1px solid #252525; color:#666; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.f-social svg { width:16px; height:16px; }
.f-social:hover { border-color:var(--gold); color:var(--gold); }
.f-col h4 { font-size:10.5px; letter-spacing:2.5px; color:var(--gold); font-weight:600; margin-bottom:18px; text-transform:uppercase; }
.f-col p, .f-col a { display:block; color:#666; font-size:12.5px; line-height:1.7; margin-bottom:7px; transition:color .2s; }
.f-col a:hover { color:var(--gold); }
.btn-f-book { width:100%; background:var(--gold); border:none; color:#000; padding:13px 16px; font-size:11px; letter-spacing:2px; font-weight:700; transition:all .2s; margin-bottom:10px; }
.btn-f-book:hover { background:var(--gold-h); }
.btn-f-call { width:100%; background:transparent; border:1.5px solid #2a2a2a; color:#999; padding:12px 16px; font-size:11px; letter-spacing:1.5px; transition:all .2s; }
.btn-f-call:hover { border-color:var(--gold); color:var(--gold); }
.footer-bottom {
  max-width:1360px; margin:0 auto; border-top:1px solid rgba(255,255,255,.04);
  padding:18px 0; display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; color:#3a3a3a;
}
.f-policy { display:flex; gap:14px; }
.f-policy a { color:#3a3a3a; transition:color .2s; }
.f-policy a:hover { color:var(--gold); }
.f-policy-sep { color:#222; }
.fi { display:inline-flex; align-items:center; gap:8px; }
.fi svg { width:13px; height:13px; flex-shrink:0; opacity:.7; }

/* ─── RESPONSIVE – header & footer only ──────── */
@media(max-width:900px) {
  .hd-inner { padding:0 20px; }
  .hd-menu-btn { display:flex; align-items:center; }
  .hd-nav {
    position:fixed; top:68px; left:0; right:0;
    background:#050505; border-top:1px solid var(--divider);
    flex-direction:column; align-items:stretch; gap:0;
    z-index:300; display:none;
    max-height:calc(100vh - 68px); overflow-y:auto;
  }
  .hd-nav.open { display:flex; }
  .hd-nav a { font-size:13px; letter-spacing:2px; padding:18px 28px; border-bottom:1px solid rgba(255,255,255,.06); width:100%; }
  .btn-hd-book { font-size:10px; padding:7px 14px; }
  .footer { padding:48px 20px 0; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
}

@media(max-width:640px) {
  .hd-logo-name { font-size:20px; letter-spacing:3px; }
  .hd-logo img { width:42px; height:42px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
}

@media(max-width:420px) {
  .hd-logo-sub { display:none; }
}

/* ─── FLOATING CONTACT WIDGET ─────────────── */
.yoko-float {
  position:fixed; right:18px; bottom:72px; z-index:900;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.yf-btn {
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.5); transition:transform .2s;
  text-decoration:none; position:relative; cursor:pointer;
}
.yf-btn:hover { transform:scale(1.12); }
.yf-tip {
  position:absolute; right:calc(100% + 10px);
  white-space:nowrap; background:#1a1a1a; color:#ddd;
  font-size:11px; letter-spacing:.5px; padding:6px 12px;
  border-radius:4px; border:1px solid rgba(255,255,255,.07);
  opacity:0; pointer-events:none; transition:opacity .2s;
  font-family:'Inter',sans-serif;
}
.yf-btn:hover .yf-tip { opacity:1; }
.yf-phone { background:#25d366; }
.yf-phone svg { width:22px; height:22px; color:#fff; fill:#fff; }
.yf-zalo { background:transparent; box-shadow:none; }
.yf-zalo-icon { width:50px; height:50px; object-fit:contain; }
/* pulse */
.yf-btn::after {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  animation:yf-pulse 2.8s ease-out infinite; pointer-events:none;
}
.yf-phone::after { box-shadow:0 0 0 0 rgba(37,211,102,.6); }
.yf-zalo::after  { box-shadow:0 0 0 0 rgba(0,104,255,.6); animation-delay:.6s; }
@keyframes yf-pulse {
  0%   { box-shadow:0 0 0 0 currentColor; opacity:.8; }
  70%  { box-shadow:0 0 0 12px transparent; opacity:0; }
  100% { box-shadow:0 0 0 0 transparent; opacity:0; }
}