/* ============================================================
   LSR GX. Ninh Loan — NỀN TẢNG — biến màu, reset, chữ, nút, tiện ích (mọi trang dùng)
   ============================================================ */

/* ============================================================
   LSR GX. Ninh Loan — Giao diện chung (công khai + quản lý)
   ============================================================ */
:root {
  --do: #c8102e;
  --do-dam: #8b0000;
  --do-tuoi: #e01e37;
  --vang: #f5c518;
  --vang-dam: #e0a800;
  --vang-nhat: #fff3cf;
  --kem: #fffaf0;
  --den: #241a17;
  --xam: #6b5d57;
  --xanh-ok: #178a4c;
  --xanh-bg: #e7f6ee;
  --cam: #e07b0e;
  --tim: #6d4aa7;
  --line: rgba(200, 16, 46, 0.14);
  --shadow: 0 10px 30px rgba(139, 0, 0, 0.14);
  --shadow-lg: 0 20px 50px rgba(139, 0, 0, 0.22);
  /* Chiều cao header: .nav 72px + dải sọc header::after 6px */
  --head-h: 78px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    'Be Vietnam Pro',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  color: var(--den);
  background: var(--kem);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
.serif {
  font-family: 'Playfair Display', Georgia, serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

section {
  padding: 64px 0;
}

/* Nhảy tới #anchor không bị header sticky che */
section[id] {
  scroll-margin-top: var(--head-h);
}

.wrap {
  width: min(1180px, 92%);
  margin: 0 auto;
}

.center {
  text-align: center;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--xam);
  font-size: 0.86rem;
}

.eyebrow {
  display: inline-block;
  color: var(--do);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.76rem;
  margin-bottom: 10px;
}

.divider {
  width: 70px;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--do), var(--vang));
  margin: 16px auto 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--do);
  color: #fff;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  box-shadow: 0 8px 20px rgba(200, 16, 46, 0.32);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s;
  text-align: center;
}

.btn:hover {
  transform: translateY(-3px);
  background: var(--do-tuoi);
  box-shadow: 0 14px 28px rgba(200, 16, 46, 0.42);
}

.btn.gold {
  background: var(--vang);
  color: var(--do-dam);
  box-shadow: 0 8px 20px rgba(245, 197, 24, 0.4);
}

.btn.gold:hover {
  background: var(--vang-dam);
}

.btn.ghost {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  box-shadow: none;
}

.btn.ghost:hover {
  background: #fff;
  color: var(--do-dam);
}

.btn.sm {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.btn.outline {
  background: transparent;
  border: 2px solid var(--do);
  color: var(--do);
  box-shadow: none;
}

.btn.outline:hover {
  background: var(--do);
  color: #fff;
}

.btn.gray {
  background: #eee;
  color: #555;
  box-shadow: none;
}

.btn.gray:hover {
  background: #e0e0e0;
}

/* Ẩn khỏi màn hình nhưng vẫn nằm trong trang.
   Dùng cho nội dung của nút copy: display:none là JS đọc không ra chữ. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: pre;
  border: 0;
}

/* ============ ADMIN — SHELL SIDEBAR TRÁI ============ */
:root {
  --side-w: 256px;
}

@media (max-width: 720px) {
  section {
    padding: 48px 0;
  }
}