/* 93300f5878 — utility stylesheet */
:root{--c5e0aacb871:546}
/*
  styles.css — utility CSS tĩnh, tự viết tay, thay thế cho <script src="cdn.tailwindcss.com">.

  Lý do đổi: Tailwind qua CDN chạy JIT compile ngay trong trình duyệt của khách
  truy cập (render-blocking, nặng, không cache tốt) — phản tác dụng với mục tiêu
  SEO/tốc độ tải trang. File này là 1 bộ utility class tối giản, đủ dùng cho các
  theme, build 1 lần, nhẹ (~vài chục KB không nén), không cần build step ở phía
  khách hàng khi họ tải mã nguồn về.

  Muốn nâng cấp lên bộ Tailwind đầy đủ (nhiều utility hơn): dùng package.json +
  tailwind.config.js đã kèm theo, chạy `npm install && npm run build` trên máy có
  mạng để sinh ra file CSS purge đầy đủ, thay thế file này.
*/

:root {
  --color-primary: #2563EB;
  --color-accent: #F59E0B;
  --color-bg: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-text: #111827;

  /* Design tokens — LỚP FALLBACK dùng chung cho MỌI theme.
     6/21 base.html tự khai lại các token này trong <style> nội tuyến (nạp SAU
     link này) nên chúng GHI ĐÈ giá trị dưới đây; 15 theme còn lại kế thừa nền
     mặc định ở đây để có nhịp/độ bo/độ nổi/tương phản nhất quán thay vì px lẻ.
     KHÔNG ép 1 giá trị cứng cho radius/shadow/muted vì mỗi theme cần khác nhau —
     đây chỉ là mặc định an toàn. */
  /* Spacing scale 4px (đồng nhất mọi theme) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem;
  /* Bo góc */
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px;
  /* Độ nổi (elevation) */
  --shadow: 0 4px 14px rgba(0,0,0,.10);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.18);
  /* Chữ phụ. TẤT CẢ 21 theme gamesite đều NỀN TỐI, và 15/21 theme KHÔNG tự khai
     --muted → phải fallback bằng xám SÁNG để đọc được trên nền tối (xám tối cũ
     #5b6473 chìm trên nền tối). 6 theme có khai --muted riêng vẫn ghi đè dòng này. */
  --muted: #9aa1ad;
  /* Vòng focus dễ thấy (a11y) */
  --ring: 0 0 0 3px rgba(37,99,235,.45);
  /* Type scale — dùng clamp() để co giãn theo màn hình, 1 thang duy nhất */
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --fs-body: 1rem;
  --fs-sm: .9rem;
}

/* Vòng focus hiển thị cho mọi phần tử tương tác (a11y — bàn phím) */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  /* Font hệ thống, KHÔNG tải webfont ngoài: mỗi theme tự khai stack riêng trong
     <style> nội tuyến (Segoe UI/Roboto/system-ui hoặc var(--sans)) và ghi đè dòng
     này. Đây chỉ là fallback khớp thực tế — trước đây khai "Inter" nhưng KHÔNG
     theme nào <link> nên font đó không bao giờ tải (gây hiểu nhầm). Giữ font hệ
     thống là chủ đích tốc độ/SEO của file này (xem chú thích đầu file). */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
/* height:auto BẮT BUỘC: ảnh thân bài persisted (gallery 18+/blog) mang width/height
   attr THẬT (chống CLS) nhưng inline style="height:auto" bị sanitize_persist gỡ
   (postprocess.py _ALLOWED_ATTRS["img"] KHÔNG có "style"). Thiếu height:auto →
   max-width bóp WIDTH nhưng height="H" cứng giữ nguyên → méo dọc (bug live 18+
   2026-08-31, BLOG-5 #960 sửa bằng inline style nhưng bị sanitizer vô hiệu). Trình
   duyệt suy aspect-ratio từ width/height attr khi height:auto → hết méo. Rule cụ thể
   hơn (.gs-card img{height:158px}, .gs-skyscraper img{height:600px}) vẫn override. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Layout */
.container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.flex { display: flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sticky { position: sticky; top: 0; z-index: 40; }
.relative { position: relative; }
.absolute { position: absolute; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; } .h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.flex-1 { flex: 1 1 0%; }

/* Spacing */
.p-1{padding:.25rem} .p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .p-6{padding:1.5rem} .p-8{padding:2rem}
.px-2{padding-left:.5rem;padding-right:.5rem} .px-4{padding-left:1rem;padding-right:1rem} .px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem} .py-2{padding-top:.5rem;padding-bottom:.5rem} .py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem} .py-8{padding-top:2rem;padding-bottom:2rem} .py-12{padding-top:3rem;padding-bottom:3rem}
.m-0{margin:0} .mb-1{margin-bottom:var(--s1)} .mb-2{margin-bottom:var(--s2)} .mb-3{margin-bottom:var(--s3)} .mb-4{margin-bottom:var(--s4)} .mb-6{margin-bottom:var(--s5)}
.mt-1{margin-top:var(--s1)} .mt-2{margin-top:var(--s2)} .mt-4{margin-top:var(--s4)} .mt-6{margin-top:var(--s5)} .mt-8{margin-top:var(--s6)}
/* .my-8 — khối bọc SECTION mà toàn bộ render_* trong generator2.py dùng làm
   khoảng cách dọc chuẩn. Trước đây KHÔNG được định nghĩa → no-op → nhịp dọc vỡ. */
.my-8{margin-top:var(--s7);margin-bottom:var(--s7)}
.pt-4{padding-top:var(--s4)} .py-3{padding-top:var(--s3);padding-bottom:var(--s3)}
.mx-auto{margin-left:auto;margin-right:auto}

/* Typography */
.text-xs{font-size:.75rem} .text-sm{font-size:.875rem} .text-base{font-size:1rem}
.text-lg{font-size:1.125rem} .text-xl{font-size:1.25rem} .text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem} .text-4xl{font-size:2.25rem}
.font-medium{font-weight:500} .font-semibold{font-weight:600} .font-bold{font-weight:700} .font-extrabold{font-weight:800}
.text-center{text-align:center}
.leading-relaxed{line-height:1.7}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.02em}
.font-serif{font-family: Georgia, "Times New Roman", serif;}

/* Colors (theme-aware qua CSS variables) */
.bg-primary{background-color:var(--color-primary)} .text-primary{color:var(--color-primary)}
.bg-accent{background-color:var(--color-accent)} .text-accent{color:var(--color-accent)}
.bg-surface{background-color:var(--color-surface)}
.bg-page{background-color:var(--color-bg)}
.text-body{color:var(--color-text)}
.text-white{color:#fff} .bg-white{background-color:#fff}
.text-gray-400{color:#9CA3AF} .text-gray-500{color:#6B7280} .text-gray-600{color:#4B5563} .text-gray-300{color:#D1D5DB}
.bg-gray-900{background-color:#111827} .bg-gray-100{background-color:#F3F4F6}
.border{border:1px solid #E5E7EB} .border-b{border-bottom:1px solid #E5E7EB} .border-t{border-top:1px solid #E5E7EB}

/* Effects */
.rounded{border-radius:.375rem} .rounded-lg{border-radius:.5rem} .rounded-xl{border-radius:.75rem} .rounded-full{border-radius:9999px}
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.15)}
.shadow-glow{box-shadow:0 0 24px rgba(139,92,246,.35)}
.transition{transition:all .2s ease}
.hover-shadow:hover{box-shadow:0 10px 25px rgba(0,0,0,.2)}
.hover-underline:hover{text-decoration:underline}
.object-cover{object-fit:cover}

/* Buttons / badges */
.btn{display:inline-block;padding:.6rem 1.25rem;border-radius:.5rem;font-weight:600;background:var(--color-primary);color:#fff}
.badge{display:inline-block;padding:.15rem .6rem;border-radius:9999px;font-size:.75rem;font-weight:600;background:var(--color-accent);color:#111}

/* Ticker (theme_08 breaking news) */
.ticker{overflow:hidden;white-space:nowrap;background:var(--color-primary);color:#fff}
.ticker-track{display:inline-block;padding-left:100%;animation:ticker 22s linear infinite}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Responsive (md breakpoint 768px) */
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:flex-row{flex-direction:row}
  .md\:col-span-3{grid-column:span 3 / span 3}
  .md\:col-span-1{grid-column:span 1 / span 1}
}