/* ==========================================================================
   site.css – quy tắc dùng chung mọi trang render phía server (sau components.css).
   ========================================================================== */
/* Nền tối: thanh cuộn / control hệ thống theo dark mode. */
:root { color-scheme: dark; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: var(--color-accent-glow); }

/* Tai thỏ khi xoay ngang: lề trong không nhỏ hơn safe-area. */
.l-container { padding-left: max(var(--space-8), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-8), env(safe-area-inset-right, 0px)); }
@media (max-width: 1023.98px) {
  .l-container { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .c-nav { overscroll-behavior: contain; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
}

/* Không có JS thì không mở được menu → ẩn nút; footer vẫn có đủ liên kết. */
html:not(.js) .c-header__menu { display: none; }
.c-brand__mark { color: var(--color-accent); }
.c-brand { min-height: var(--size-touch); }

/* ---------- Footer: vùng chạm ≥ 44px (FR-13) ---------- */
.c-footer__inner { align-items: center; }
.c-footer__links { column-gap: var(--space-5); row-gap: 0; }
.c-footer__links a { display: inline-flex; align-items: center; min-height: var(--size-touch); }


/* Header: nhãn không xuống dòng; màn 1024–1279px hẹp → ẩn link Zalo dạng chữ (còn ở menu, footer, CTA trong trang) */
.c-brand__name, .c-nav__link, .c-header__actions .c-btn { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .c-header__actions [data-zalo] { display: none; }
  .c-nav__list { gap: var(--space-5); }
  .c-header__inner { gap: var(--space-4); }
}