/* =====================================================================
   HNI Neon Theme — lớp re-tint cho MXH hni (WoWonder)
   Gu khách: ĐEN + ĐỎ NEON + nền vũ trụ (robot/atom/quantum) — xem 2 mockup
   khách gửi + docs/GIAO_DIEN_HSPACE.md.
   Cách hoạt động: nạp SAU style.min.css (xem _head.tpl). Chỉ TÔ MÀU/HIỆU ỨNG
   lên nền dark-mode có sẵn (body.night-mode) — KHÔNG đổi cấu trúc .tpl.
   Gỡ nhanh: xoá dòng <link ... hspace-theme.css> trong _head.tpl là về cũ.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;800;900&display=swap');

:root {
  /* ── Bảng màu ĐỎ NEON trên đen ── */
  --hs-bg-0:        #050203;   /* đen sâu nhất */
  --hs-bg-1:        #140508;   /* nền phụ */
  --hs-glass:       rgba(28, 6, 10, .62);
  --hs-glass-2:     rgba(18, 4, 7, .84);
  --hs-line:        rgba(226, 42, 42, .42);
  --hs-line-strong: rgba(255, 45, 63, .95);
  --hs-accent:      #e22a2a;   /* đỏ thương hiệu */
  --hs-accent-2:    #ff2d3f;   /* đỏ neon sáng */
  --hs-glow:        rgba(239, 59, 59, .45);
  --hs-txt:         #f6eaea;
  --hs-muted:       #d2a8ad;

  /* Ghi đè biến sẵn có của theme để lan toả tự động */
  --body-bg-color-dark: #050203;
  --body-color-dark:    #f6eaea;
  --header-bg-color-dark: rgba(18, 4, 7, .84);
  --card-dark-color:    rgba(28, 6, 10, .62);
  --card-dark-divider:  rgba(226, 42, 42, .22);
  --card-dark-hover:    rgba(48, 10, 16, .72);
  --card-dark-input:    rgba(12, 3, 5, .82);
  --card-dark-input-color: #f6eaea;
  --link-color:         #ff8a99;
}

body.night-mode,
body.night-mode .central-meta,
body.night-mode .btn,
body.night-mode input,
body.night-mode textarea,
body.night-mode select {
  font-family: 'Outfit', var(--body-font-family, Poppins), "Segoe UI", sans-serif !important;
}

/* ══════════ Nền: ảnh vũ trụ thiên hà cố định + phủ tối cho dễ đọc ══════════ */
/* nền html để không lòi mảng trắng ở mép/khi cuộn quá đà */
html { background-color: #050203; }

body.night-mode {
  background:
    linear-gradient(180deg, rgba(5,2,3,.76) 0%, rgba(5,2,3,.86) 45%, rgba(5,2,3,.93) 100%),
    url("../images/hspace/cosmic/bg-space.jpg") center top / cover no-repeat fixed,
    #050203 !important;
  color: var(--hs-txt) !important;
}
/* Ánh sáng đỏ hắt từ trên xuống (giống hero mockup) */
body.night-mode::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 640px at 50% -12%, rgba(255,45,63,.20), transparent 62%),
    radial-gradient(760px 420px at 88% 8%, rgba(226,42,42,.12), transparent 60%);
}
body.night-mode > * { position: relative; z-index: 1; }

/* ══════════ Header: kính mờ + viền neon đỏ ══════════ */
body.night-mode .main-header,
body.night-mode .main-header .navbar {
  background: var(--hs-glass-2) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hs-line) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.55), 0 1px 0 rgba(255,45,63,.18) inset;
}
body.night-mode .main-header .search-wrapper .form-control {
  background: var(--hs-bg-1) !important;
  border: 1px solid var(--hs-line) !important;
  color: var(--hs-txt) !important;
}

/* ══════════ Thẻ / panel: glass viền neon đỏ ══════════ */
body.night-mode .central-meta,
body.night-mode .panel,
body.night-mode .card,
body.night-mode .sidebar .panel,
body.night-mode .main-side-nav-card,
body.night-mode .create-post,
body.night-mode .post-box,
body.night-mode ._feed,
body.night-mode .fh-card,
body.night-mode .central-meta.item {
  background: var(--hs-glass) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 14px rgba(0,0,0,.45), 0 0 0 1px rgba(255,45,63,.06) inset !important;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
body.night-mode .central-meta:hover,
body.night-mode .panel:hover,
body.night-mode .fh-card:hover {
  border-color: var(--hs-line-strong) !important;
  box-shadow: 0 8px 28px rgba(226,42,42,.22), 0 0 0 1px rgba(255,45,63,.14) inset !important;
}

body.night-mode hr,
body.night-mode .divider { border-color: var(--hs-line) !important; }

/* ══════════ Chữ & link ══════════ */
body.night-mode a { color: var(--link-color); }
body.night-mode a:hover { color: var(--hs-accent-2); }
body.night-mode .text-muted,
body.night-mode small { color: var(--hs-muted) !important; }
body.night-mode h1, body.night-mode h2, body.night-mode h3,
body.night-mode h4, body.night-mode h5, body.night-mode .title { color: var(--hs-txt); }

/* ══════════ Nút chính: gradient đỏ + glow ══════════ */
body.night-mode .btn-primary,
body.night-mode .btn-primary:focus {
  background: linear-gradient(92deg, #ff4d4d, #c11616) !important;
  border: 1px solid rgba(255,154,154,.55) !important;
  box-shadow: 0 6px 18px rgba(239,59,59,.45) !important;
  color: #fff !important;
}
body.night-mode .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 28px rgba(239,59,59,.65) !important;
}
body.night-mode .btn:not(.btn-primary) {
  background: var(--hs-bg-1) !important;
  border: 1px solid var(--hs-line) !important;
  color: var(--hs-txt) !important;
}
body.night-mode .btn:not(.btn-primary):hover { border-color: var(--hs-line-strong) !important; }

/* ══════════ Input ══════════ */
body.night-mode input,
body.night-mode textarea,
body.night-mode select,
body.night-mode .form-control {
  background: var(--hs-bg-1) !important;
  border: 1px solid var(--hs-line) !important;
  color: var(--hs-txt) !important;
}
body.night-mode input::placeholder,
body.night-mode textarea::placeholder { color: var(--hs-muted) !important; }
body.night-mode .form-control:focus {
  border-color: var(--hs-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(255,45,63,.18) !important;
}

/* ══════════ Drawer sidebar trái ══════════ */
body.night-mode .sg-offcanvas-sidebar {
  background: linear-gradient(180deg, #17060a, #080204) !important;
  box-shadow: 2px 0 26px rgba(0,0,0,.7), 1px 0 0 var(--hs-line) !important;
}
body.night-mode .side-nav > li.active > a,
body.night-mode .side-nav > li > a:hover { color: var(--hs-accent-2) !important; }

body.night-mode .header-menu-link { color: var(--hs-muted); }
body.night-mode .header-menu-link:hover { color: var(--hs-accent-2); }

/* ══════════ Chip / badge / cashtag ══════════ */
body.night-mode .badge,
body.night-mode .label,
body.night-mode .topic-chip,
body.night-mode .fh-cashtag,
body.night-mode .stock-chip {
  background: rgba(226,42,42,.18) !important;
  border: 1px solid var(--hs-line) !important;
  color: #ffc3c9 !important;
}
/* dải topic chips trang chủ */
body.night-mode .fh-ticker {
  background: var(--hs-glass) !important;
  border: 1px solid var(--hs-line) !important;
}

/* ══════════ Scrollbar ══════════ */
body.night-mode ::-webkit-scrollbar { width: 9px; height: 9px; }
body.night-mode ::-webkit-scrollbar-thumb { background: rgba(226,42,42,.38); border-radius: 99px; }
body.night-mode ::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   KHỬ TRẮNG / XANH — khách chỉ muốn ĐEN + ĐỎ.
   Các template F319 (index.forum / topics / _forum_row / _head) có
   hardcode xanh #2563eb + nền trắng #fff trong <style> inline. File này
   nạp SAU nên override được (cùng độ đặc hiệu, thắng nhờ thứ tự).
   ===================================================================== */

/* ── nền trắng của card diễn đàn ── */
body.night-mode .fh-card,
body.night-mode .topic-card {
  background: var(--hs-glass) !important;
  border: 1px solid var(--hs-line) !important;
  box-shadow: 0 0 14px rgba(0,0,0,.45) !important;
}
body.night-mode .topic-card:hover {
  background: rgba(48,10,16,.72) !important;
  border-color: var(--hs-line-strong) !important;
}
body.night-mode .fh-card .hd,
body.night-mode .fh-idx,
body.night-mode .fh-thread {
  border-color: var(--hs-line) !important;
}

/* ── chip/tag xanh → đỏ ── */
body.night-mode .fh-cashtag,
body.night-mode .topic-chip,
body.night-mode .topic-card .tag,
body.night-mode .topic-hero .tag {
  background: rgba(226,42,42,.18) !important;
  border: 1px solid var(--hs-line) !important;
  color: #ffc3c9 !important;
}

/* ── tab đang chọn xanh → đỏ ── */
body.night-mode .fh-tabs a.on {
  background: linear-gradient(92deg, #ff4d4d, #c11616) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(239,59,59,.5);
}
body.night-mode .fh-tabs a { color: var(--hs-muted); }

/* ── chữ xám xanh (slate) → hồng xám ── */
body.night-mode .fh-col-title .sub,
body.night-mode .fh-thread .mt,
body.night-mode .topic-card .meta,
body.night-mode .fh-idx .text-muted { color: var(--hs-muted) !important; }

/* ── quét sạch mọi link/chữ còn xanh mặc định của WoWonder ── */
body.night-mode a[style*="2563eb"],
body.night-mode [class*="text-primary"],
body.night-mode .text-blue { color: var(--hs-accent-2) !important; }

/* ── nút xanh mặc định bootstrap còn sót ── */
body.night-mode .btn-info,
body.night-mode .btn-secondary.active,
body.night-mode .bg-primary {
  background: linear-gradient(92deg, #ff4d4d, #c11616) !important;
  border-color: rgba(255,154,154,.5) !important;
  color: #fff !important;
}

/* ── mảng trắng còn sót: modal, dropdown, tooltip, popover ── */
body.night-mode .modal-content,
body.night-mode .dropdown-menu,
body.night-mode .popover,
body.night-mode .tooltip-inner,
body.night-mode .list-group-item {
  background: #140508 !important;
  border: 1px solid var(--hs-line) !important;
  color: var(--hs-txt) !important;
}
body.night-mode .dropdown-item { color: var(--hs-txt) !important; }
body.night-mode .dropdown-item:hover,
body.night-mode .dropdown-item:focus {
  background: rgba(226,42,42,.20) !important;
  color: #fff !important;
}
body.night-mode .modal-header,
body.night-mode .modal-footer { border-color: var(--hs-line) !important; }

/* ── ô nhập/nav còn nền sáng ── */
body.night-mode .nav-tabs .nav-link.active,
body.night-mode .nav-pills .nav-link.active {
  background: rgba(226,42,42,.22) !important;
  border-color: var(--hs-line) !important;
  color: #fff !important;
}

/* =====================================================================
   HERO HNI — nền là ảnh ROBOT + TRÁI ĐẤT (đã cắt bỏ chữ từ HMEN banner).
   Dùng selector `body.night-mode .hni-hero` (specificity 0,2,1) để thắng
   <style> inline trong body của _hni_hero.tpl (0,1,0) bất kể thứ tự nạp.
   Đường dẫn ảnh tương đối tính từ FILE CSS này.
   ===================================================================== */
/* Hero TRONG SUỐT hoàn toàn — để ảnh nền vũ trụ của body hiện xuyên qua.
   Robot là <img class="robot"> bên trong, đã feather 4 biên nên không lộ khung vuông. */
body.night-mode .hni-hero {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =====================================================================
   VIỀN NEON CHẠY VÒNG (port đúng kỹ thuật từ Hmen/style.css — khách thích)
   Cách hoạt động:
   1. @property khai báo --neon-a là <angle> → MỚI animate được (biến CSS
      thường không nội suy được, thiếu dòng này viền sẽ đứng im).
   2. ::after phủ kín thẻ, nền là conic-gradient xoay theo --neon-a.
   3. mask-composite:exclude khoét ruột → chỉ còn lại VIỀN dày 1.6px.
   Thêm class `hni-neon` vào thẻ bất kỳ là có hiệu ứng này.
   ===================================================================== */
@property --neon-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

body.night-mode .hni-wallet,
body.night-mode .hni-apps,
body.night-mode .hni-btc,
body.night-mode .hni-neon { position: relative; }

body.night-mode .hni-wallet::after,
body.night-mode .hni-apps::after,
body.night-mode .hni-btc::after,
body.night-mode .hni-neon::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--neon-a),
    transparent 0deg 55deg,
    rgba(255,90,106,.35) 80deg,
    #ff5a6a 104deg,
    #ffffff 118deg,
    #ff5a6a 132deg,
    rgba(255,150,90,.4) 156deg,
    transparent 185deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: hni-neon-run 2.8s linear infinite;
  pointer-events: none; z-index: 4;
  filter: drop-shadow(0 0 4px #ff5a6a);
}
/* lệch pha để các thẻ không chạy đồng loạt (giống Hmen) */
body.night-mode .hni-apps::after { animation-delay: -.6s; }
body.night-mode .hni-btc::after  { animation-delay: -1.2s; }

/* quầng sáng thở nhè nhẹ đi kèm */
body.night-mode .hni-wallet,
body.night-mode .hni-apps,
body.night-mode .hni-btc { animation: hni-neon-blink 2.8s ease-in-out infinite; }
body.night-mode .hni-apps { animation-delay: -.6s; }
body.night-mode .hni-btc  { animation-delay: -1.2s; }

@keyframes hni-neon-run { to { --neon-a: 360deg; } }
@keyframes hni-neon-blink {
  0%, 100% { box-shadow: 0 0 10px rgba(255,45,63,.30), inset 0 0 16px rgba(255,45,63,.08); }
  50%      { box-shadow: 0 0 18px rgba(255,45,63,.70), inset 0 0 20px rgba(255,45,63,.16); }
}

/* tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
  body.night-mode .hni-wallet, body.night-mode .hni-apps, body.night-mode .hni-btc,
  body.night-mode .hni-wallet::after, body.night-mode .hni-apps::after,
  body.night-mode .hni-btc::after, body.night-mode .hni-neon::after { animation: none; }
}

/* cashtag $SLUG còn xanh trong _js_files.tpl (style inline trong body, spec 0,1,1)
   → cần 0,2,1 mới thắng */
body.night-mode a.cashtag { color: #ff8a99 !important; }
body.night-mode a.cashtag:hover { color: var(--hs-accent-2) !important; }

/* Icon chính + công cụ ô soạn → đỏ #ff0606 (yêu cầu của khách).
   Cùng selector với phần admin sinh ra ở _head.css.tpl (css_main_icons), nhưng
   file này nạp SAU trong <head> nên hoà !important thì mình thắng. */
.main-icon, .main-icon *, .x-form-tools,
body.night-mode .main-icon, body.night-mode .main-icon *, body.night-mode .x-form-tools {
  fill: #ff0606 !important;
  color: #ff0606 !important;
}

/* Bỏ dải gradient xanh của .page-header (yêu cầu khách — site chỉ đen/đỏ).
   Rule gốc nằm ở style.css:7323 nhưng site nạp style.min.css nên PHẢI override ở đây,
   sửa style.css sẽ không có tác dụng. File này nạp sau nên thắng ở cùng specificity. */
.page-header {
  background: none !important;
}