/* Public pages stylesheet (landing, privacy, terms, about, data-deletion, support).
   Served by BE at /static/public.css. Single source — no inline styles in templates. */

/* ===== Self-hosted webfonts (CSP font-src 'self'). Mỗi weight 3 subset:
   latin / latin-ext / vietnamese — unicode-range chuẩn Google Fonts, phủ Latin + dấu tiếng Việt. ===== */

/* Manrope 400 */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/manrope-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/manrope-latin-ext-400.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('/static/fonts/manrope-vietnamese-400.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* Manrope 600 */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/manrope-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/manrope-latin-ext-600.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/manrope-vietnamese-600.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* Manrope 700 */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/manrope-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/manrope-latin-ext-700.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/manrope-vietnamese-700.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* Space Grotesk 600 */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/space-grotesk-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/space-grotesk-latin-ext-600.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/static/fonts/space-grotesk-vietnamese-600.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* Space Grotesk 700 */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/space-grotesk-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/space-grotesk-latin-ext-700.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/static/fonts/space-grotesk-vietnamese-700.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* IBM Plex Mono 500 */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/static/fonts/ibm-plex-mono-vietnamese-500.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* ===== Theme: tucana-light (class gốc trên <body>). Thêm theme mới = thêm 1 block
   .theme-<name> cùng bộ token; component style bên dưới dùng var(--token) dùng chung. ===== */
.theme-tucana-light {
  /* --- tucana.club tokens (light) --- */
  --surface-2: #f1f5f9;
  --line: #e2e8f0;
  --ink: #0f172a;
  --muted: #64748b;
  --slate: #94a3b8;
  --blue: #2563eb;
  --cyan: #06b6d4;
  --energy: #38bdfb;
  --live: #22c55e;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', 'Manrope', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --measure: 62ch;

  /* --- Brand accent (per-club). DEFAULT (club chưa set màu) = xanh Tucana blue->cyan.
     Club set màu riêng: public-layout.hbs inject --brand VÀ --brand-2 (biến thể sáng của
     brand qua color-mix) -> mọi accent + gradient theo brand (1 nguồn). Club cam ->
     hero/CTA/gradient/stat/step đều cam. --- */
  --brand: var(--blue);
  --brand-2: var(--cyan);
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --text: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--slate);
  --text-faint: #cbd5e1;
  --on-brand: #ffffff;
  --bg: #f8fafc;
  --surface: #ffffff;
  --soft: var(--surface-2);
  --border: var(--line);
}

* { box-sizing: border-box; }

body {
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  background: var(--bg);
  overflow-x: hidden; /* kẻ section full-width dùng 100vw -> chặn scroll ngang do scrollbar */
  /* Sticky footer: body cao tối thiểu hết màn hình, .wrap giãn đẩy footer xuống đáy khi
     nội dung ngắn/rỗng (trang shop/post empty không để footer lửng giữa trang). */
  min-height: 100vh; display: flex; flex-direction: column;
}

/* Top nav (sticky, blur — port tucana.club light). Nội dung trong .topnav__inner canh
   giữa 1140 (khớp .wrap). */
.topnav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.topnav__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1140px; margin: 0 auto; padding: 0 22px; height: 66px;
}
/* Brand: logo nhỏ + tên CLB (wordmark) — thay logo-box cũ, giống tucana.club */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo-mark { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: 8px; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-links { display: flex; align-items: center; gap: 24px; font-weight: 550; }
.nav-links a:not(.nav-cta) { text-decoration: none; font-weight: 600; color: var(--muted); font-size: 14.5px; transition: color .15s; }
.nav-links a:not(.nav-cta):hover { color: var(--brand); }
/* Nút CTA nav = gradient pill (theo brand), giống tucana.club nav-cta */
/* Nút Đăng nhập nav: nhẹ nhàng — text như link khác nhưng màu brand (cam), không pill. */
.nav-cta {
  font-weight: 650; color: var(--brand); text-decoration: none; white-space: nowrap;
  font-size: 14.5px; transition: opacity .15s;
}
.nav-cta:hover { opacity: .7; }

.wrap { max-width: 960px; margin: 0 auto; padding: 8px 20px 32px; width: 100%; flex: 1 0 auto; }
/* Landing tràn rộng (không card bọc) — giống tucana.club: wrap 1140, section cách nhau
   bằng khoảng lớn thay vì card. */
.wrap--wide { max-width: 1140px; padding: 0 22px; display: flex; flex-direction: column; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
/* Prose (about/privacy/terms/support): không card, tràn nhưng cột chữ HẸP (dễ đọc),
   canh giữa — giống prose tucana.club. */
.prose-wrap { max-width: 72ch; margin: 0 auto; padding: clamp(40px, 7vw, 80px) 0; }
.prose-wrap h1 { font-size: clamp(30px, 5vw, 48px); margin: 0 0 20px; }
.prose-wrap h2 { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.02em; margin: 36px 0 14px; color: var(--ink); }
.prose-wrap h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 24px 0 10px; color: var(--ink); }
.prose-wrap p, .prose-wrap li { color: var(--text-secondary); line-height: 1.75; }
.prose-wrap p { margin: 0 0 16px; }
.prose-wrap ul, .prose-wrap ol { margin: 0 0 16px; padding-left: 1.3em; }
.prose-wrap li { margin-bottom: 8px; }
.prose-wrap strong { color: var(--ink); }
.prose-wrap a { color: var(--brand); }

a { color: var(--brand); }
h1 { color: var(--ink); font-family: var(--display); letter-spacing: -.025em; }

.btn {
  display: inline-block;
  background: var(--grad); color: var(--on-brand);
  padding: 13px 26px; border-radius: 12px; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  box-shadow: 0 8px 24px -12px var(--brand);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px var(--brand-2); }
.btn--outline {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.btn--outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.btn--sm { padding: 9px 18px; font-size: 14px; box-shadow: 0 6px 18px -10px var(--brand); }

.muted { color: var(--text-muted); font-size: 14px; }
/* Empty state (shop/post rỗng) — icon + tiêu đề + mô tả + nút, canh giữa, dùng chung (DRY). */
.empty-state { text-align: center; padding: clamp(40px, 8vw, 80px) 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-state__icon { font-size: 48px; line-height: 1; margin-bottom: 8px; opacity: .9; }
.empty-state__title { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0; }
.empty-state__text { color: var(--muted); font-size: 15px; margin: 0 0 12px; max-width: 380px; }
/* Footer cuối tài liệu (privacy/terms) — border + chữ mờ, dùng token */
.doc-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 14px; }
.hr { border: none; border-top: 1px solid var(--line); margin: clamp(40px, 6vw, 64px) 0; }
/* Landing tràn: kẻ ngăn section chạy FULL-WIDTH hết viewport (tràn ngoài cả wrap 1140,
   giống band border-block tucana.club chạy hết màn hình) + khoảng cách section lớn.
   width:100vw + margin-left calc kéo kẻ ra 2 mép màn hình từ container canh giữa. */
.wrap--wide .hr {
  border-top: 1px solid var(--line);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: clamp(56px, 9vw, 104px);
  margin-bottom: 0;
}
.wrap--wide .hero { padding-top: clamp(48px, 8vw, 96px); }
/* Khoảng cách TRÊN mỗi tiêu đề section (Chúng tôi là ai / Chúng tôi tự hào / ...) — thở hơn,
   cách nội dung phía trước. (Sau .hr đã có khoảng lớn; đây là đệm thêm cho section-title.) */
.wrap--wide .section-title { margin-top: clamp(24px, 4vw, 44px); }

/* Hero (giữ nội dung: siteName + tagline + 1 CTA) */
.hero { text-align: center; padding: clamp(40px, 7vw, 88px) 0 clamp(20px, 3vw, 36px); position: relative; }
.hero__logo { height: 88px; width: auto; max-width: 240px; object-fit: contain; margin-bottom: 16px; }
.hero__title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 6.5vw, 76px); line-height: 1.02; letter-spacing: -.035em;
  margin: 0 0 18px; text-wrap: balance;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__tagline {
  font-size: clamp(16px, 2.2vw, 20px); color: var(--muted);
  max-width: 620px; margin: 0 auto 28px;
}
.hero__cta { margin-left: 10px; }

/* Stats */
.stats { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; text-align: center; margin: 8px 0; }
.stat { flex: 1; min-width: 140px; }
.stat__num {
  font-family: var(--display); font-size: clamp(30px, 5vw, 46px); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { color: var(--muted); font-size: 14px; font-family: var(--mono); letter-spacing: .04em; }

/* Intro (giới thiệu CLB) */
.intro { max-width: 680px; margin: 0 auto; text-align: center; }
.intro p { color: var(--muted); margin: 0 0 14px; }
.intro__links { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
/* Nút tròn social (intro) — icon, viền, hover đổi brand. */
.social-btn {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  text-decoration: none; transition: color .15s, border-color .15s, transform .15s;
}
.social-btn:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.social-btn svg { display: block; }

/* Footer chung mọi trang public */
/* Footer bố trí kiểu tucana.club: top (brand trái + links phải), bottom (© trái + tagline phải) */
.site-footer { margin-top: 48px; border-top: 1px solid var(--line); padding: 44px 0; color: var(--muted); font-size: 13.5px; position: relative; }
/* Kẻ trên footer chạy FULL-WIDTH hết viewport (giống kẻ section) — pseudo tràn 100vw. */
/* margin-top:auto -> footer bị đẩy xuống đáy khi nội dung ngắn (wrap--wide là flex-column). */
.wrap--wide .site-footer { border-top: none; margin-top: auto; }
.wrap--wide .site-footer::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; border-top: 1px solid var(--line);
}
.site-footer__top { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.site-footer__links a { color: var(--muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--brand); }
/* Social = icon SVG (currentColor) — hover đổi sang brand. */
.site-footer__social { display: inline-flex; align-items: center; }
.site-footer__social svg { display: block; }
.site-footer__social:hover { color: var(--brand); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.site-footer__tagline { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--slate); }
/* "POWERED BY [logo] TUCANA" — link về tucana.club, có logo Tucana. */
.site-footer__powered { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: opacity .15s; }
.site-footer__powered:hover { opacity: .7; }
.site-footer__powered-logo { width: 18px; height: 18px; object-fit: contain; display: block; }
.site-footer__powered-name { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--slate); font-weight: 600; }

/* Section heading */
.section-title {
  text-align: center; margin: 0 0 28px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.08; letter-spacing: -.025em;
  color: var(--ink); text-wrap: balance;
}

/* Google Map embed */
.map { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(15,23,42,.4); margin-bottom: 16px; }
.map iframe { width: 100%; height: 360px; border: 0; display: block; }

/* Features grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 22px; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.feature:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 18px 40px -24px var(--brand); }
.feature__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--brand);
  font-size: 21px; margin-bottom: 14px;
}
.feature h3 { font-family: var(--display); font-weight: 600; margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.step { min-width: 0; }
.step__num {
  width: 46px; height: 46px; line-height: 46px; border-radius: 50%;
  background: var(--grad); color: var(--on-brand); font-family: var(--display); font-weight: 700;
  margin: 0 auto 12px; box-shadow: 0 8px 20px -10px var(--brand);
}
.step h3 { font-family: var(--display); font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

.center { text-align: center; }
.mt-lg { margin-top: 36px; }

/* 404 */
.notfound { text-align: center; padding: 40px 0; }
.notfound__code { font-size: 5rem; font-weight: 800; color: var(--brand); line-height: 1; }
.notfound__title { margin: 8px 0; }
.notfound__text { color: var(--text-secondary); margin: 0 0 24px; }
.notfound__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Hero slider (JS auto-play; ảnh/clip đặt trong .slide) */
.slider {
  position: relative;
  width: 100%;
  /* 16/7 rất dẹt so với ảnh 4:3 người dùng hay tải lên -> cắt quá nhiều.
     16/9 vẫn giữ dáng hero rộng nhưng bớt cắt đáng kể (cắt ~25% thay vì ~42%). */
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--surface-2);
}
/* Landing tràn: slider + map FULL-WIDTH hết viewport (tràn ngoài wrap 1140, chạm 2 mép màn
   hình, bo góc phẳng). 1 rule dùng chung (DRY). */
.wrap--wide .slider,
.wrap--wide .map {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border-left: none; border-right: none; border-radius: 0;
}
/* Slider full-width dính sát header (không padding trên) — tràn liền mạch. */
.wrap--wide .slider { margin-top: 0; }
.slider__track { display: flex; height: 100%; transition: transform .6s ease; }
.slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-brand); font-size: 1.4rem; font-weight: 700;
  background-size: cover; background-position: center;
}
/* Ảnh slider: `cover` lấp kín khung (không viền đen), neo GIỮA.

   Từng thử `center top` với lý do "chủ thể luôn nằm nửa trên" — SAI. Đúng với
   ảnh chụp nhóm người (chân trời ở trên), nhưng hỏng nặng với ảnh logo: club
   Skyjoy tải lên logo VUÔNG 1920x1920, chủ thể nằm CHÍNH GIỮA. Khung 16/9 cắt
   ~44% chiều cao, `top` dồn hết phần cắt xuống đáy -> mất nguyên dòng chữ
   "CLUB" và chừa khoảng trắng lớn phía trên.

   `center` chia đều phần cắt trên/dưới: không tối ưu cho riêng loại ảnh nào,
   nhưng KHÔNG BAO GIỜ mất trọn một cạnh. Với ảnh mà chủ thể ở giữa (logo,
   chân dung, poster) thì đây là lựa chọn duy nhất đúng, và đó là mặc định
   an toàn khi không biết trước người dùng tải ảnh gì lên.

   Muốn tối ưu thật thì phải cho club tự chọn điểm neo (focal point) — việc đó
   cần thêm cấu hình + UI, không nhét vào CSS được. */
.slide video, .slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.slider__dots { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; }
.slider__dots span {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.5); margin: 0 4px; cursor: pointer;
}
.slider__dots span.active { background: var(--on-brand); }

/* Public posts */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.post-card { display: block; background: var(--soft); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.post-card__img { width: 100%; height: 160px; object-fit: cover; display: block; }
.post-card__body { padding: 16px; }
.post-card__title { margin: 0 0 8px; font-size: 1.1rem; }
.post-card__excerpt { color: var(--text-secondary); font-size: 14px; margin: 0; }
.post-detail__img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: 16px 0; }
/* content là HTML đã render từ Markdown -> KHÔNG dùng pre-wrap (gây khoảng trắng thừa từ \n
   giữa các thẻ). Spacing do margin của từng thẻ quản lý. */
.post-detail__content { color: var(--text); line-height: 1.7; }
.post-detail__content p { margin: 0 0 12px; }
.post-detail__content ul, .post-detail__content ol { margin: 0 0 12px; padding-left: 22px; }
.post-detail__content li { margin: 2px 0; }
.post-detail__content h1, .post-detail__content h2, .post-detail__content h3 { margin: 18px 0 8px; }
.post-detail__content img { max-width: 100%; height: auto; border-radius: 8px; }
.post-detail__content a { color: var(--brand); }
.post-detail__content > *:last-child { margin-bottom: 0; }

/* ===== Shop ===== */
.shop-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.shop-header .section-title { margin-bottom: 0; }

/* Shop grid (product list) */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.shop-card {
  display: block; background: var(--soft); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .15s;
}
.shop-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.shop-card__img { width: 100%; height: 180px; object-fit: cover; display: block; }
.shop-card__img--placeholder { display: flex; align-items: center; justify-content: center; background: var(--soft); color: var(--text-muted); font-size: 13px; }
.shop-card__body { padding: 14px; }
.shop-card__name { margin: 0 0 6px; font-size: 1rem; color: var(--text); }
.shop-card__price { margin: 0; font-size: 14px; color: var(--brand); font-weight: 600; }

/* Shop detail */
/* ─── Product detail (2 cột: gallery + info) ─── */
.pd { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pd__gallery { position: sticky; top: 20px; }
.pd__main-img { width: 100%; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: var(--soft); }
.pd__main-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.pd__main-img--empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pd__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pd__thumb { width: 64px; height: 64px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; background: none; }
.pd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd__thumb--active { border-color: var(--brand); }

.pd__name { margin: 0 0 12px; font-size: 1.8rem; }
.pd__price { font-size: 1.8rem; font-weight: 800; color: var(--brand); min-height: 1.6em; margin-bottom: 16px; }
.pd__desc { color: var(--text-secondary); margin: 0 0 24px; line-height: 1.6; }
.pd__opt { margin-bottom: 18px; }
.pd__opt-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pd__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pd__swatch {
  border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 8px 16px; font-size: 15px; color: var(--text); cursor: pointer; transition: all .15s;
}
.pd__swatch:hover { border-color: var(--brand); }
.pd__swatch--active { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
/* Landing chỉ xem: nút "Đặt hàng" chuyển sang club-app (mua/số lượng/thanh toán). */
.pd__buy { margin: 24px 0 8px; }
.pd__order-app { min-width: 180px; height: 48px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.pd__buy-note { font-size: 13px; margin: 0 0 4px; }
.pd__back { margin-top: 20px; }

/* Lightbox xem ảnh sản phẩm lớn (ảnh full contain, mobile pinch-zoom) */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 16px; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 96vw; max-height: 92vh; object-fit: contain; touch-action: pinch-zoom; user-select: none; background: #fff; }
.lightbox__close { position: fixed; top: 12px; right: 16px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: var(--on-brand); font-size: 28px; line-height: 1; cursor: pointer; z-index: 1201; }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: var(--on-brand); font-size: 32px; line-height: 1; cursor: pointer; z-index: 1201; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__nav[hidden] { display: none; }

/* ===== Responsive / Mobile ===== */
@media (max-width: 640px) {
  .wrap { padding: 0 0 24px; }
  /* Landing tràn (mobile): padding ngang 16px cho nội dung; slider bù -16px để full-width. */
  .wrap--wide { padding: 0 16px 24px; }
  .card {
    border-radius: 0;
    padding: 16px;
    box-shadow: none;
  }
  /* Top nav gọn (giống tucana ≤760): ẩn link phụ, giữ brand + nút CTA gradient. */
  .topnav__inner { padding: 0 16px; height: 58px; }
  .wordmark { font-size: 17px; }
  .logo-mark { width: 30px; height: 30px; }
  .nav-links { gap: 10px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-cta { font-size: 14px; }

  /* Slider mobile: cao hơn (16/10). Full-width kế thừa từ .wrap--wide .slider (100vw). */
  .slider { aspect-ratio: 16 / 10; margin-bottom: 20px; }
  /* `padding` dành cho slide CHỮ (fallback khi không có ảnh). Nhưng nó bóp luôn
     cả ảnh: đo trên máy thật (viewport 390px) ảnh chỉ rộng 358px -> HỞ VIỀN 16px
     mỗi bên, lộ nền xám hai bên slider.
     Ảnh/video vượt ra ngoài padding của cha bằng margin âm — cách này chạy trên
     MỌI trình duyệt, không cần `:has()` (Safari < 15.4 và Firefox cũ chưa có). */
  .slide { font-size: 1.15rem; padding: 0 16px; text-align: center; }
  .slide > img, .slide > video { margin: 0 -16px; width: calc(100% + 32px); }

  .hero { padding: 8px 0 4px; }
  .hero__title { font-size: clamp(30px, 9vw, 44px); }
  .hero__tagline { font-size: 1rem; }

  .hr { margin: 24px 0; }
  .wrap--wide .hr { width: 100vw; margin-left: calc(-50vw + 50%); margin-top: 40px; margin-bottom: 0; }

  /* Footer stack dọc trên mobile */
  .site-footer { padding: 32px 0; margin-top: 32px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer__links { gap: 14px; }

  /* Stats: 3 cột đều 1 hàng (dùng grid thay flex-wrap để không lệch) */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { min-width: 0; }
  .stat__num { font-size: 1.5rem; }
  .stat__label { font-size: 12px; }

  /* Features + steps: xếp dọc 1 cột */
  .grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .feature, .step { min-width: 0; }

  .section-title { font-size: 1.4rem; }
  .btn { width: 100%; text-align: center; padding: 14px; }
  .btn--sm { width: auto; padding: 9px 18px; }

  /* Shop mobile overrides */
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .shop-card__img { height: 130px; }
  .pd { grid-template-columns: 1fr; gap: 24px; }
  .pd__gallery { position: static; }
}