/* =========================================================================
   KaraokeHanoi.net — Brand tokens + header/footer/button overrides
   Nạp SAU vs-base/vs-header/vs-footer nên :root ở đây thắng.
   Nhận diện: nền tối sang trọng + đỏ (đạt AA) lấy từ logo + vàng gold trang trí.
   ========================================================================= */
:root {
  --vs-primary:      #1c1622;   /* ink plum-charcoal — tiêu đề */
  --vs-primary-dark: #120d17;
  --vs-secondary:    #3a2f45;
  --vs-accent:       #c4171b;   /* đỏ — CTA chính (6:1 với chữ trắng) */
  --vs-accent-hover: #a3131a;
  --vs-gold-text:    #9a6a12;   /* gold cho CHỮ trên nền sáng (AA) */
  --vs-text:         #211c26;
  --vs-muted:        #6c6570;
  --vs-bg-light:     #f8f5f2;
  --vs-bg-soft:      #f1ece6;
  --vs-border:       #e7ded3;
  --krk-ink:         #17131c;   /* nền section tối */
  --krk-ink-2:       #241c2e;
  --krk-gold:        #e0b34c;   /* vàng gold trang trí (trên nền tối) */
  --krk-gold-soft:   #f6e6c4;
  --krk-zalo:        #0060df;
}

/* ---- Buttons ---- */
.vs-scope .vs-btn { --_bg: var(--vs-accent); --_fg: #fff; font-weight: 700; }
.vs-scope .vs-btn:hover { background: var(--vs-accent-hover); color: #fff; }
.vs-scope .vs-btn--primary { --_bg: var(--vs-accent); --_fg: #fff; }
.vs-scope .vs-btn--primary:hover { background: var(--vs-accent-hover); color: #fff; }
.vs-scope .vs-btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .92rem; }
.vs-scope .vs-btn--block { width: 100%; }

.vs-scope .krk-btn-zalo { --_bg: var(--krk-zalo); --_fg: #fff; }
.vs-scope .krk-btn-zalo:hover { background: #0050bd; color: #fff; }
.vs-scope .krk-btn-ghost { --_bg: #fff; --_fg: var(--vs-primary); border-color: var(--vs-border); }
.vs-scope .krk-btn-ghost:hover { background: var(--vs-bg-soft); color: var(--vs-primary); }
.vs-scope .krk-btn-outline { --_bg: transparent; --_fg: var(--vs-accent); border-color: currentColor; }
.vs-scope .krk-btn-outline:hover { background: var(--vs-accent); color: #fff; }
.vs-scope .krk-btn-outline-light { --_bg: transparent; --_fg: #fff; border-color: rgba(255,255,255,.55); }
.vs-scope .krk-btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.krk-anchor { position: absolute; width: 1px; height: 1px; margin-top: -90px; }

/* ---- Header ---- */
.krk-topbar { background: var(--krk-ink); color: #d9d2df; font-size: .85rem; }
.krk-topbar .vs-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.krk-topbar__msg { display: inline-flex; align-items: center; gap: .4rem; opacity: .9; }
.krk-topbar__phone { color: #fff; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 600; }
.krk-topbar__phone strong { color: var(--krk-gold); }
.krk-topbar__phone:hover { color: var(--krk-gold); }
.krk-topbar .vs-ico { width: 16px; height: 16px; }

.krk-header .vs-bar, .krk-bar { background: #fff; border-bottom: 1px solid var(--vs-border); }
.krk-bar .vs-bar__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }

/* Wordmark logo */
.krk-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.krk-logo__mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(150deg, var(--vs-accent), #7a0e12); color: #fff; box-shadow: 0 2px 8px rgba(196,23,27,.28); }
.krk-logo__text { font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.01em; color: var(--vs-primary); }
.krk-logo__hn { color: var(--vs-accent); }
.krk-logo__net { color: var(--vs-gold-text); font-weight: 700; }
.krk-logo--sm .krk-logo__text { font-size: 1.2rem; }

/* Nav */
.krk-nav { margin-left: auto; }
.krk-nav .vs-menu { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.krk-nav .vs-menu > li > a { display: block; padding: .6rem .8rem; border-radius: 8px; text-decoration: none;
  color: var(--vs-text); font-weight: 600; font-size: .98rem; transition: color .15s, background .15s; }
.krk-nav .vs-menu > li > a:hover, .krk-nav .vs-menu > .current-menu-item > a { color: var(--vs-accent); background: var(--vs-bg-soft); }

/* Actions */
.krk-actions { display: flex; align-items: center; gap: .5rem; }
.krk-actions .vs-btn { min-height: 44px; padding: .55rem 1rem; }
.krk-actions .vs-ico { width: 18px; height: 18px; }

.vs-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 1px solid var(--vs-border); background: #fff; border-radius: 10px; cursor: pointer; color: var(--vs-primary); }

/* Sticky (parent JS toggles .is-stuck on #vs-bar) */
.krk-bar.is-stuck, .vs-bar.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 900; box-shadow: var(--vs-shadow-md); }

/* ---- Footer polish ---- */
.vs-footer { background: var(--krk-ink); color: #cdc6d4; }
.vs-footer a { color: #e8e3ee; }
.vs-footer a:hover { color: var(--krk-gold); }
.vs-footer h3 { color: #fff; }
.vs-footer .vs-footer__bottom { background: #100c15; }
.vs-footer .vs-ico { color: var(--krk-gold); }
.vs-footer__socials a { border-color: rgba(255,255,255,.2); }

.krk-footer .krk-logo__text { color: #fff; }
.krk-footer .krk-logo__hn { color: #ff6a6d; }
.krk-footer .krk-logo__net { color: var(--krk-gold); }
.krk-footer__desc { color: #b6aec2; font-size: .92rem; margin: .7rem 0 .5rem; }
.krk-footer__tag { color: var(--krk-gold); font-style: italic; font-size: .92rem; margin: 0; }

/* ---- Floating + mobile bar (parent) ---- */
.vs-mobilebar { z-index: 950; }
.vs-mobilebar .is-primary { background: var(--vs-accent); color: #fff; }
.vs-floats .vs-float--phone { background: var(--vs-accent); }
.vs-floats .vs-float--zalo { background: var(--krk-zalo); }

/* Responsive header */
@media (max-width: 1024px) {
  .krk-nav { display: none; }
  .vs-burger { display: inline-flex; }
  .krk-actions__label { display: none; }
  .krk-actions .vs-btn { padding: .5rem .7rem; }
}
@media (max-width: 560px) {
  .krk-topbar__msg { display: none; }
  .krk-topbar .vs-topbar__inner { justify-content: center; }
  .krk-actions__zalo { display: none; } /* Zalo đã có ở thanh mobile dưới */
  .krk-logo__text { font-size: 1.25rem; }
  .krk-logo__mark { width: 36px; height: 36px; }
}