/* ===== Chrome chung: header nav + footer cho homepage & các trang con ===== */
:root {
  --sx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sx-cream: #f1ead8;
  --sx-ink: #2d3a45;
  --sx-teal: #5b8a87;
  --sx-orange: #d8964e;
  --sx-foot: #2d3741;
}

/* ---- Menu hamburger (mobile) dùng chung ---- */
.sx-burger {
  display: none; width: 42px; height: 42px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; padding: 9px; flex-shrink: 0;
}
.sx-burger span { display: block; height: 2px; margin: 5px 0; background: currentColor; border-radius: 2px; transition: .2s; }
.sx-nav-open .sx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sx-nav-open .sx-burger span:nth-child(2) { opacity: 0; }
.sx-nav-open .sx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Footer chung ---- */
.sx-footer {
  background: var(--sx-foot); color: #e9e4d8;
  font-family: var(--sx-font); font-size: 14px;
}
.sx-footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 18px 40px; flex-wrap: wrap;
}
.sx-footer a { color: inherit; text-decoration: none; }
.sx-footer a:hover { color: #fff; }
.sx-social { display: flex; gap: 14px; align-items: center; margin-left: auto; }
.sx-social a { display: inline-flex; width: 22px; height: 22px; opacity: .92; }
.sx-social a:hover { opacity: 1; transform: translateY(-1px); }
.sx-social svg { width: 100%; height: 100%; fill: currentColor; }
.sx-copy { font-size: 12px; opacity: .85; }
@media (max-width: 720px) {
  .sx-footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 20px 22px; }
  .sx-social { margin-left: 0; }
}

/* ---- Modal chung (homepage) ---- */
.sx-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.sx-modal.show { display: flex; }
.sx-modal-bg { position: absolute; inset: 0; background: rgba(20,24,28,.55); }
.sx-modal-box {
  position: relative; background: #fffdf7; color: var(--sx-ink); border-radius: 18px;
  max-width: 520px; width: 100%; padding: 26px 24px 22px; font-family: var(--sx-font); line-height: 1.6;
  box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 85vh; overflow: auto;
}
.sx-modal-box h3 { margin: 0 0 8px; font-size: 22px; }
.sx-modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 20px; cursor: pointer; color: inherit; }

/* Ẩn badge "Powered by Netlify" (Netlify tự chèn) */
#nl-badge-frame { display: none !important; }

/* Giờ mở cửa trong footer */
.sx-hours { flex-basis: 100%; font-size: 12.5px; opacity: .85; }

/* Nút lên đầu trang */
.sx-top { position: fixed; right: 16px; bottom: 24px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #2d3a45; color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.sx-top.show { opacity: .92; transform: none; pointer-events: auto; }
body:has(.cart-bar.show) .sx-top { bottom: 96px; }
body:has(.promo-nudge.show) .sx-top { bottom: 150px; }
body:has(.cart-bar.show):has(.promo-nudge.show) .sx-top { bottom: 176px; }
@media (min-width: 900px) { body:has(.promo-nudge.show) .sx-top, body:has(.cart-bar.show) .sx-top { bottom: 110px; } }

/* Popup quán đang nghỉ */
.sx-closed { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--sx-font); }
.sx-closed-bg { position: absolute; inset: 0; background: rgba(20,24,28,.55); }
.sx-closed-box { position: relative; width: min(100%, 380px); background: #fdf9ee; color: #2d3a45; border-radius: 20px; padding: 24px 20px 20px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.sx-closed-emoji { font-size: 38px; }
.sx-closed h3 { margin: 6px 0 12px; font-size: 20px; }
.sx-closed ul { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; }
.sx-closed li { background: rgba(45,58,69,.06); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
.sx-closed li span { font-size: 12.5px; opacity: .75; }
.sx-closed p { font-size: 13.5px; margin: 0 0 14px; }
.sx-closed button { border: 0; background: #d9934a; color: #2d3a45; font-weight: 800; font-size: 15px; padding: 11px 28px; border-radius: 999px; cursor: pointer; }