/* ============================================================ HOME — Nebula 2.0 (full-bleed top-nav landing) Tái dựng từ design/nebula/refs/GamerLink Trang chu.dc.html. Mọi màu qua token; nhìn đẹp nhất khi data-theme="nebula". ============================================================ */ /* ============================================================ GATE THEME — MỌI thứ Nebula CHỈ áp khi . Neon & theme khác giữ NGUYÊN bản gốc (.home-legacy + sidebar). ============================================================ */ .home-neb { display: none; } /* mặc định ẩn bản Nebula */ :root[data-theme="nebula"] .home-neb { display: block; } /* nebula → hiện bản mới */ :root[data-theme="nebula"] .home-legacy { display: none; } /* nebula → ẩn bản gốc */ /* ---- Full-bleed (CHỈ nebula · CHỈ màn đã migrate .is-neb): ẩn sidebar/topbar cũ, dùng top-nav shared ---- */ :root[data-theme="nebula"] .app.is-neb { grid-template-columns: 1fr; } :root[data-theme="nebula"] .app.is-neb > .sidebar, :root[data-theme="nebula"] .app.is-neb .topbar { display: none; } :root[data-theme="nebula"] .app.is-neb .glnav { display: flex; } /* top-nav Nebula shared hiện ở màn migrate */ :root[data-theme="nebula"] .app.is-neb #content { padding: 0; max-width: none; } /* Bỏ cap .screen{max-width:1280px} → top-nav full-width + nội dung rộng như mẫu */ :root[data-theme="nebula"] .app.is-neb #content > .screen { max-width: none; margin: 0; animation: none; } /* ---- Tiêu đề màn Nebula (tái dùng mọi màn app): kicker .eyebrow + h1 .screen-title. Neon KHÔNG có h1 → ẩn mặc định; chỉ Nebula hiện. Đặt

ngay sau .eyebrow. ---- */ .screen-title { display: none; } :root[data-theme="nebula"] .app.is-neb .screen-title { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 22px; color: var(--ink); } /* Atmosphere Trang chủ = tier MARKETING (chỉ nebula) — home.css nạp sau nebula.css */ :root[data-theme="nebula"] .app.is-home .gl-atmos .o1 { top: -240px; left: -160px; width: 640px; height: 640px; filter: blur(48px); background: radial-gradient(circle, rgba(var(--violet-rgb), .30), transparent 62%); } :root[data-theme="nebula"] .app.is-home .gl-atmos .o2 { top: -180px; right: -180px; width: 580px; height: 580px; filter: blur(50px); background: radial-gradient(circle, rgba(var(--pink-rgb), .24), transparent 62%); } :root[data-theme="nebula"] .app.is-home .gl-atmos .o3 { bottom: -300px; left: 36%; width: 680px; height: 680px; filter: blur(58px); background: radial-gradient(circle, rgba(var(--cyan-rgb), .16), transparent 64%); } :root[data-theme="nebula"] .app.is-home .gl-atmos .grain { opacity: .045; } /* ============================================================ BẢN GỐC (LEGACY · Neon 1.0) — banner "hero" mở kênh donate. KHÔNG gate: giữ NGUYÊN như cũ cho Neon & mọi theme khác. (Nebula chỉ THÊM chiều sâu box-shadow ở css/themes/nebula.css.) ============================================================ */ .dbanner { position: relative; overflow: hidden; border-radius: 20px; padding: 30px; margin-top: 6px; background: radial-gradient(520px 200px at 6% -30%, rgba(var(--cyan-rgb), .36), transparent 60%), radial-gradient(520px 220px at 100% -20%, rgba(var(--pink-rgb), .34), transparent 60%), linear-gradient(135deg, var(--surface3), var(--surface2)); border: 1px solid var(--line-soft); } .dbanner__glow { position: absolute; inset: 0; opacity: .14; pointer-events: none; background-image: radial-gradient(rgba(var(--hl-rgb), .5) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, rgba(var(--shadow-rgb), 1), transparent); } .dbanner__body { position: relative; max-width: 640px; } .dbanner__eyebrow { display: inline-block; font-size: 12px; font-weight: 600; color: var(--cyan); background: rgba(var(--cyan-rgb), .12); border: 1px solid rgba(var(--cyan-rgb), .3); padding: 3px 11px; border-radius: 999px; margin-bottom: 13px; } .dbanner__title { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 8px; } .dbanner__sub { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 18px; max-width: 540px; } .dbanner__sub b { color: var(--ink); } .dbanner__cta { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 720px) { .dbanner { padding: 24px 20px; } .dbanner__title { font-size: 22px; } .dbanner__cta .btn { flex: 1 1 100%; } } /* ===================== TOP-NAV ===================== */ .glnav { position: sticky; top: 0; z-index: 40; height: 74px; display: none; /* chrome dùng chung: ẩn mặc định; .app.is-neb (nebula) mới hiện */ align-items: center; gap: 10px; padding: 0 30px; background: rgba(var(--bg-rgb), .6); border-bottom: 1px solid rgba(var(--hl-rgb), .07); backdrop-filter: blur(18px); } .glnav__burger { display: none; } /* chỉ hiện mobile */ .glnav__burger svg { width: 20px; height: 20px; } .glnav__brand { display: flex; align-items: center; padding-right: 14px; cursor: pointer; } .glnav__logo { height: 70px; width: auto; flex: none; display: block; /* logo to sát trần; nav vẫn 74px, căn giữa */ /* nhấc nhẹ khỏi nền tối + quầng brand rất tiết chế — không neon */ filter: drop-shadow(0 2px 6px rgba(var(--shadow-rgb), .5)) drop-shadow(0 5px 18px rgba(var(--violet-rgb), .28)); transition: filter var(--ease), transform var(--ease); } .glnav__brand:hover .glnav__logo, .glnav__brand:focus-visible .glnav__logo { filter: drop-shadow(0 2px 6px rgba(var(--shadow-rgb), .5)) drop-shadow(0 5px 20px rgba(var(--violet-rgb), .5)) brightness(1.06); transform: translateY(-1px); } .glnav__links { display: flex; align-items: center; gap: 2px; margin-left: 6px; } .glnav__link { font-size: 14.5px; font-weight: 500; color: var(--muted); padding: 9px 15px; border-radius: 10px; background: none; border: 0; cursor: pointer; font-family: inherit; transition: color var(--ease), background var(--ease); } .glnav__link:hover { color: var(--ink); } .glnav__link.is-active { color: var(--ink); font-weight: 600; background: rgba(var(--violet-rgb), .18); } .glnav__link--donate { color: var(--pink-tint); } .glnav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .glnav__wallet { display: flex; align-items: center; gap: 2px; height: 40px; background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .08); border-radius: 11px; padding: 0 6px 0 13px; cursor: pointer; } .glnav__coin { font-size: 13px; font-weight: 600; color: var(--gold); white-space: nowrap; } .glnav__coin--xeng { color: var(--cyan); } .glnav__wdiv { width: 1px; height: 18px; background: rgba(var(--hl-rgb), .12); margin: 0 9px; } .glnav__wadd { margin-left: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; flex: none; background: linear-gradient(135deg, var(--violet), var(--violet2)); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; } .glnav__wadd svg { width: 16px; height: 16px; } .glnav__ic { position: relative; width: 40px; height: 40px; flex: none; border: 1px solid rgba(var(--hl-rgb), .08); background: rgba(var(--hl-rgb), .04); border-radius: 11px; cursor: pointer; color: var(--n-icon, var(--ink-soft)); display: grid; place-items: center; transition: background var(--ease), border-color var(--ease); } .glnav__ic:hover { background: rgba(var(--hl-rgb), .09); border-color: rgba(var(--violet-rgb), .4); } .glnav__ic svg { width: 19px; height: 19px; } .glnav__dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; } .glnav__dot--gold { background: var(--gold); } .glnav__dot--pink { background: var(--pink); } .glnav__acctwrap { position: relative; } .glnav__acct { display: flex; align-items: center; gap: 9px; height: 40px; background: rgba(var(--violet-rgb), .14); border: 1px solid rgba(var(--violet-rgb), .3); border-radius: 11px; padding: 0 12px 0 6px; cursor: pointer; color: var(--ink); } .glnav__av { width: 30px; height: 30px; border-radius: 9px; flex: none; overflow: hidden; display: grid; place-items: center; font-size: 15px; background: linear-gradient(135deg, var(--pink), var(--orange-tint, var(--gold))); } .glnav__av img { width: 100%; height: 100%; object-fit: cover; } .glnav__acctmeta { font-size: 13px; font-weight: 700; line-height: 1.1; } .glnav__lv { font-size: 10px; font-weight: 700; color: var(--violet-tint); background: rgba(var(--violet-rgb), .28); padding: 1px 5px; border-radius: 5px; vertical-align: middle; } .glnav__chev { color: var(--violet-tint); font-size: 11px; } .glnav__menu { position: absolute; top: 48px; right: 0; width: 240px; z-index: 50; background: var(--surface); border: 1px solid rgba(var(--hl-rgb), .1); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 24px 60px -18px rgba(var(--shadow-rgb), .7); } .glnav__mi { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: 14px; color: var(--ink-soft); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; transition: background var(--ease), color var(--ease); } .glnav__mi svg { width: 17px; height: 17px; flex: none; } .glnav__mi:hover { background: rgba(var(--hl-rgb), .06); color: var(--ink); } .glnav__mi--danger { color: var(--red); } .glnav__mi--admin { color: var(--gold); } .glnav__mi-div { height: 1px; background: rgba(var(--hl-rgb), .08); margin: 5px 4px; } .glnav__login { height: 40px; padding: 0 18px; border: 0; border-radius: 11px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--on-accent); background: linear-gradient(135deg, var(--pink), var(--violet)); } /* logged-in ↔ guest: JS bật .is-authed trên .glnav */ .glnav .glnav__acctwrap { display: none; } .glnav.is-authed .glnav__acctwrap { display: block; } .glnav.is-authed .glnav__login { display: none; } .glnav.is-authed .glnav__wallet { display: flex; } .glnav:not(.is-authed) .glnav__wallet { display: none; } /* ===================== WRAP nội dung ===================== */ .glwrap { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 26px 30px 80px; } /* ===================== HERO ===================== */ .glhero { position: relative; overflow: hidden; border-radius: 24px; padding: 44px 50px; margin-bottom: 40px; background: linear-gradient(160deg, rgba(var(--hl-rgb), .07), rgba(var(--hl-rgb), .02)); border: 1px solid rgba(var(--hl-rgb), .1); box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .09), 0 30px 70px -34px rgba(var(--shadow-rgb), .7); } .glhero__orb { position: absolute; top: -150px; right: -40px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--pink-rgb), .34), transparent 66%); filter: blur(34px); pointer-events: none; } .glhero__row { display: flex; align-items: center; gap: 54px; position: relative; flex-wrap: wrap; } .glhero__left { flex: 1; min-width: 380px; } .gl-kick { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--n-kick, var(--muted)); margin-bottom: 16px; } .glhero__title { font-size: clamp(42px, 5.4vw, 70px); line-height: 1.0; letter-spacing: -.038em; font-weight: 800; margin: 0 0 20px; color: var(--ink); } .glhero__grad { background: linear-gradient(115deg, var(--cyan), var(--violet) 62%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .glhero__sub { font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); max-width: 500px; margin: 0 0 28px; } .glhero__sub b { color: var(--ink); } .glhero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; max-width: 520px; } .glpill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .1); padding: 8px 13px; border-radius: 100px; } .glpill i { width: 6px; height: 6px; border-radius: 50%; flex: none; } .glhero__cta { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; } .glbtn { border: 0; border-radius: 12px; padding: 14px 25px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14.5px; } .glbtn--cta { background: var(--pink); color: var(--on-accent); animation: gl-glow 3s ease-in-out infinite; } .glbtn--ghost { background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .18); color: var(--ink); font-weight: 600; padding: 14px 20px; } .glbtn--ghost:hover { background: rgba(var(--hl-rgb), .09); } /* ---- Hero overlay-donate mockup ---- */ .glhero__alert { width: 360px; flex: none; animation: glRise .7s cubic-bezier(.2,.7,.2,1) both; } .glalert { background: linear-gradient(180deg, rgba(var(--hl-rgb), .08), rgba(var(--hl-rgb), .03)); border: 1px solid rgba(var(--hl-rgb), .14); border-radius: 18px; padding: 20px; box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .16), 0 30px 60px -24px rgba(var(--shadow-rgb), .7); animation: glFloat 4.4s ease-in-out infinite; } .glalert__cap { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--n-label, var(--faint)); text-transform: uppercase; margin-bottom: 12px; } .glalert__row { display: flex; align-items: center; gap: 13px; padding: 15px; border-radius: 14px; background: linear-gradient(120deg, rgba(var(--pink-rgb), .18), rgba(var(--violet-rgb), .14)); border: 1px solid rgba(var(--pink-rgb), .3); } .glalert__gift { font-size: 34px; animation: glFloat 2.4s ease-in-out infinite; } .glalert__body { flex: 1; min-width: 0; } .glalert__who { font-size: 14px; color: var(--ink); } .glalert__amt { font-size: 22px; font-weight: 700; color: var(--gold); margin-top: 2px; } .glalert__msg { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; } .glalert__bar { height: 6px; border-radius: 100px; background: rgba(var(--hl-rgb), .08); overflow: hidden; margin-top: 12px; } .glalert__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); } .glalert__goal { display: flex; justify-content: space-between; font-size: 11px; color: var(--n-label, var(--faint)); margin-top: 7px; } .glalert__goal .mono { color: var(--violet-tint); } .glalert__bank { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(var(--hl-rgb), .08); } .glalert__bankic { width: 27px; height: 27px; border-radius: 8px; flex: none; display: grid; place-items: center; color: var(--cyan); background: rgba(var(--cyan-rgb), .16); } .glalert__bankic svg { width: 15px; height: 15px; } .glalert__bankinfo { flex: 1; font-size: 12px; color: var(--ink-soft); line-height: 1.3; } .glalert__bankinfo b { color: var(--ink); } .glalert__bankinfo small { color: var(--n-label, var(--faint)); font-size: 12px; } .glalert__speed { font-size: 10.5px; font-weight: 700; color: var(--cyan); background: rgba(var(--cyan-rgb), .14); padding: 4px 9px; border-radius: 100px; white-space: nowrap; } /* ===================== STAT STRIP ===================== */ .glstats { border-top: 1px solid rgba(var(--hl-rgb), .08); border-bottom: 1px solid rgba(var(--hl-rgb), .08); padding: 28px 4px; margin: 0 0 46px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px 16px; } .glstat__num { font-size: clamp(28px, 3.3vw, 42px); font-weight: 700; letter-spacing: -.02em; background: linear-gradient(120deg, var(--on-accent), var(--violet-tint)); -webkit-background-clip: text; background-clip: text; color: transparent; } .glstat__num--accent { background: linear-gradient(120deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; } .glstat__lb { font-size: 13px; color: var(--n-label, var(--faint)); margin-top: 5px; font-weight: 500; } /* ===================== SECTION HEAD (editorial) ===================== */ .glsec { margin: 0 0 16px; } .glsec .gl-kick { font-size: 11px; margin-bottom: 8px; } /* kicker section: nhỏ + sát tiêu đề (đúng mẫu) */ .glsec__row { display: flex; align-items: center; gap: 12px; } .glsec__title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; margin: 0; letter-spacing: -.03em; color: var(--ink); } .glsec__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pink-tint); background: rgba(var(--pink-rgb), .14); padding: 4px 11px; border-radius: 100px; } .glsec__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: glPulse 1.2s infinite; } .glsec__see { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--violet-tint); background: none; border: 0; cursor: pointer; font-family: inherit; } .glsec__see:hover { text-decoration: underline; } /* ===================== LƯỚI + CARD (render bởi home.js) ===================== */ .glgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; } .glgrid--vip { margin-bottom: 34px; } @media (max-width: 1120px) { .glgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .glgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .glgrid { grid-template-columns: 1fr; } } /* Slogan ngắn + dãy logo thể loại (kèm +N) trên thẻ player */ .glp__tag { font-size: 12.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cụm ★ đánh giá + logo thể loại (cùng hàng đáy, bên trái) */ .glp__sl { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .glp__gicos { display: inline-flex; align-items: center; gap: 4px; flex: none; } .glp__gico { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; font-size: 12px; overflow: hidden; background: rgba(var(--hl-rgb), .06); border: 1px solid rgba(var(--hl-rgb), .08); } .glp__gico img { width: 100%; height: 100%; object-fit: cover; } .glp__gmore { font-size: 11px; font-weight: 600; color: var(--muted); } .glcard { display: flex; flex-direction: column; /* để body kéo dài → ★/giá bám đáy card */ background: linear-gradient(180deg, rgba(var(--hl-rgb), .055), rgba(var(--hl-rgb), .02)); border: 1px solid rgba(var(--hl-rgb), .1); border-radius: 18px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .08), 0 18px 40px -22px rgba(var(--shadow-rgb), .6); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; cursor: pointer; text-align: left; } .glcard:hover { transform: translateY(-5px); border-color: rgba(var(--pink-rgb), .4); box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .12), 0 26px 50px -20px rgba(var(--pink-rgb), .35); } .glcard--vip:hover { border-color: rgba(var(--gold-rgb), .4); box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .12), 0 26px 50px -20px rgba(var(--gold-rgb), .25); } .glcard--off { opacity: .96; } .glcard--off:hover { border-color: rgba(var(--violet-rgb), .35); box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .1), 0 26px 50px -20px rgba(var(--violet-rgb), .3); } /* cover key-art */ .glcover { height: 158px; flex: none; position: relative; overflow: hidden; display: grid; place-items: center; font-size: 62px; } .glcover--p { height: 188px; } /* card player: cover cao hơn → khoe ảnh nhiều hơn */ .glcover--off { filter: saturate(.7); } .glcover__shine { position: absolute; top: -40%; left: 0; width: 52%; height: 180%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(var(--hl-rgb), .15), transparent); animation: gl-shine 6s ease-in-out infinite; } .glcover__foot { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 14px 12px; background: linear-gradient(transparent, rgba(8, 6, 20, .92)); display: flex; align-items: center; gap: 10px; } .glcover__av { width: 38px; height: 38px; border-radius: 11px; flex: none; overflow: hidden; display: grid; place-items: center; font-size: 19px; border: 2px solid rgba(var(--hl-rgb), .85); box-shadow: 0 3px 12px -3px rgba(var(--shadow-rgb), .8); } .glcover__av img { width: 100%; height: 100%; object-fit: cover; } .glcover__ftxt { min-width: 0; flex: 1; } .glcover__name { font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glcover__meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glbadge { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; } .glbadge--live { top: 12px; right: 12px; color: #fff; background: rgba(255, 60, 90, .92); } .glbadge--live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: glPulse 1.2s infinite; } .glbadge--views { top: 12px; right: 12px; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); } .glbadge--views svg { width: 13px; height: 13px; } .glbadge--off { top: 12px; left: 12px; color: var(--ink-soft); background: rgba(0, 0, 0, .4); } .glbadge--vip { top: 12px; left: 12px; color: #3a2400; background: var(--gold); } .glbadge--online { bottom: 12px; right: 12px; color: #06121a; background: var(--cyan); } .glbadge--online i { width: 5px; height: 5px; border-radius: 50%; background: #06121a; animation: glPulse 1.5s infinite; } /* nút Donate tonal trên card streamer */ .gldonate { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 10px; background: rgba(var(--pink-rgb), .12); border: 1px solid rgba(var(--pink-rgb), .42); color: var(--pink-tint); font-weight: 700; font-size: 14px; border-radius: 11px; transition: all .16s ease; } .gldonate svg { width: 15px; height: 15px; } .glcard:hover .gldonate { background: var(--pink); color: var(--on-accent); border-color: var(--pink); box-shadow: 0 12px 26px -10px rgba(var(--pink-rgb), .8); } .glcard--off .gldonate { background: rgba(var(--hl-rgb), .04); border-color: rgba(var(--hl-rgb), .12); color: var(--ink-soft); } .glcard--off:hover .gldonate { background: rgba(var(--pink-rgb), .12); border-color: rgba(var(--pink-rgb), .42); color: var(--pink-tint); box-shadow: none; } .glcard__pad { padding: 12px; margin-top: auto; } /* card player (VIP + thường) — body kéo dài, ★/giá bám đáy */ .glp__body { padding: 14px; flex: 1; display: flex; flex-direction: column; } .glp__head { display: flex; align-items: center; gap: 9px; } .glp__av { width: 32px; height: 32px; border-radius: 9px; flex: none; overflow: hidden; display: grid; place-items: center; } .glp__av img { width: 100%; height: 100%; object-fit: cover; } .glp__name { font-weight: 700; font-size: 15px; color: var(--ink); } .glp__game { font-size: 12px; color: var(--muted); } .glp__stat { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; } .glp__rating { font-size: 12.5px; font-weight: 600; color: var(--gold); flex: none; white-space: nowrap; } .glp__rating small { color: var(--faint); font-weight: 500; } .glp__price { font-size: 14.5px; font-weight: 700; color: var(--gold); } .glp__price small { color: var(--faint); font-weight: 500; } .glp__hire { display: block; text-align: center; margin-top: 12px; padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--hl-rgb), .14); background: rgba(var(--hl-rgb), .06); color: var(--ink); font-weight: 700; font-size: 13.5px; transition: background var(--ease); } .glcard:hover .glp__hire { background: rgba(var(--hl-rgb), .11); } /* Trạng thái rỗng khu Streamer nổi bật */ .home-str-empty { padding: 22px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; font-size: 13.5px; } .home-str-empty b { color: var(--cyan); cursor: pointer; } /* Neon gốc: cyan */ :root[data-theme="nebula"] .home-str-empty b { color: var(--pink-tint); } /* Nebula: hồng */ /* ---- Filter pills (Tìm player) — restyle .cat trong context Home ---- */ .glcats { gap: 9px; margin-bottom: 18px; } .glcats .cat { padding: 9px 16px; border-radius: 100px; font-size: 13.5px; font-weight: 500; background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .09); color: var(--ink-soft); } .glcats .cat:hover { transform: none; border-color: rgba(var(--violet-rgb), .4); color: var(--ink); } .gltoolbar { margin-bottom: 18px; gap: 10px; } /* Ô tìm / sắp xếp — CHẤT LIỆU KÍNH Nebula (ghi đè nền đặc var(--surface) của app) */ .gltoolbar .pl-search, .gltoolbar .pl-select { height: 44px; border-radius: 12px; background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .09); } .gltoolbar .pl-search { padding: 0 14px; gap: 10px; min-width: 200px; } .gltoolbar .pl-search span { display: flex; color: var(--n-label, var(--muted)); } .gltoolbar .pl-search input { color: var(--ink-soft); font-size: 14px; } .gltoolbar .pl-search input::placeholder { color: var(--n-label, var(--faint)); opacity: 1; } .gltoolbar .pl-select { color: var(--ink-soft); font-weight: 500; font-size: 14px; padding: 0 14px; } .gltoolbar .pl-select:hover, .gltoolbar .pl-search:focus-within { border-color: rgba(var(--violet-rgb), .5); } /* ---- Keyframes riêng cho Home (đồng bộ design) ---- */ @keyframes glPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.9); } } @keyframes glFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes glRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ===================== RESPONSIVE ===================== */ @media (max-width: 860px) { .glnav { padding: 0 16px; gap: 8px; } .glnav__brand { padding-right: 6px; } .glnav__logo { height: 52px; } .glnav__burger { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid rgba(var(--hl-rgb), .1); background: rgba(var(--hl-rgb), .05); border-radius: 11px; color: var(--ink); cursor: pointer; } .glnav__links { display: none; } .glnav__cb:checked ~ .glnav__links { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 12px 16px; z-index: 60; background: var(--bg2); border-bottom: 1px solid rgba(var(--hl-rgb), .1); box-shadow: 0 26px 44px -22px rgba(var(--shadow-rgb), .75); } .glnav__cb:checked ~ .glnav__links .glnav__link { width: 100%; text-align: left; } .gl-hide-sm { display: none !important; } .glwrap { padding: 22px 16px 64px; } .glhero { padding: 28px 22px; border-radius: 20px; } .glhero__row { gap: 30px; } .glhero__left { min-width: 0; } .glhero__alert { width: 100%; } .glhero__title { font-size: 34px; line-height: 1.04; } .glstats { padding: 22px 4px; } } /* ---- Stories (thẻ chữ nhật đứng, kiểu Playerduo) ---- */ .stories { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: none; scroll-behavior: smooth; } .stories::-webkit-scrollbar { display: none; } /* ---- Dải story có nút tiến/lùi ---- */ .story-strip { position: relative; } .sec-head--tight { margin-bottom: 2px; } .story-strip__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: rgba(var(--bg2-rgb), .85); color: var(--ink); font-size: 18px; line-height: 1; font-weight: 700; display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(var(--shadow-rgb), .6); transition: var(--ease); } .story-strip__nav:hover { background: var(--violet); border-color: var(--violet); color: var(--on-accent); transform: translateY(-50%) scale(1.08); } .story-strip__nav--prev { left: -6px; } .story-strip__nav--next { right: -6px; } @media (max-width: 720px) { .story-strip__nav { display: none; } } /* ---- Trang "Story": lưới tất cả story ---- */ .story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; } .story-tile { position: relative; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; cursor: pointer; border: 1px solid var(--line-soft); background: var(--surface); } .story-tile img, .story-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ease); } .story-tile:hover img, .story-tile:hover video { transform: scale(1.05); } .story-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--shadow-rgb), .4), transparent 22%, transparent 58%, rgba(var(--shadow-rgb), .72)); } /* Avatar + tên ở DƯỚI (avatar trước tên) */ .story-tile__foot { position: absolute; bottom: 9px; left: 9px; right: 9px; z-index: 2; display: flex; align-items: center; gap: 8px; } .story-tile__av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; font-size: 15px; border: 2px solid var(--on-accent); background: linear-gradient(135deg, var(--violet2), var(--cyan)); box-shadow: 0 2px 8px -2px rgba(var(--shadow-rgb), .6); } .story-tile__av img { width: 100%; height: 100%; object-fit: cover; } .story-tile__name { font-size: 12.5px; font-weight: 600; color: var(--on-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(var(--shadow-rgb), .9); } .story-tile__stats { position: absolute; top: 9px; left: 9px; right: 9px; z-index: 2; display: flex; gap: 9px; font-size: 11px; font-weight: 600; color: var(--on-accent); text-shadow: 0 1px 4px rgba(var(--shadow-rgb), .85); } .story { flex: none; width: 138px; cursor: pointer; } /* Viền gradient (story chưa xem) */ .story__frame { border-radius: 18px; padding: 0; background: none; transition: transform var(--ease), box-shadow var(--ease); } .story:hover .story__frame { transform: translateY(-4px); box-shadow: 0 14px 26px -18px rgba(var(--shadow-rgb), .5); } /* Thân thẻ chữ nhật (tỉ lệ chân dung, ảnh sắc nét) */ .story__card { position: relative; aspect-ratio: 9 / 14; border-radius: 16px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-soft); background: var(--story-bg, linear-gradient(135deg, #3A2160, #5B2350)); } /* Lớp tối đáy để tên dễ đọc (chỉ tối phần đáy, ảnh rõ hơn) */ .story__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(var(--shadow-rgb), .72)); pointer-events: none; } .story__emoji { font-size: 56px; filter: drop-shadow(0 4px 10px rgba(var(--shadow-rgb), .45)); } /* Ảnh/video bìa của thẻ story */ .story__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .story__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* Chân thẻ: avatar (tròn) đứng TRƯỚC tên, ở dưới đáy */ .story__foot { position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 7px; } .story__av { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: linear-gradient(135deg, var(--violet2), var(--cyan)); border: 2px solid var(--on-accent); box-shadow: 0 2px 8px -2px rgba(var(--shadow-rgb), .6); } .story__label { min-width: 0; color: var(--on-accent); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 5px rgba(var(--shadow-rgb), .8); } /* Thẻ "Tạo story" */ .story--add .story__frame { background: var(--line); } .story--add .story__card { background: var(--surface); border-color: var(--line-soft); grid-auto-flow: row; gap: 8px; } .story--add .story__card::after { display: none; } .story--add .story__emoji { font-size: 36px; color: var(--pink); } .story--add .story__av { display: none; } .story--add .story__label { position: static; text-align: center; color: var(--muted); text-shadow: none; } /* ---- Category row ---- */ .cat-row { display: flex; gap: 8px; flex-wrap: wrap; } .cat { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; cursor: pointer; background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink); font-weight: 600; font-size: 12.5px; transition: border-color var(--ease), transform var(--ease); } .cat:hover { border-color: var(--cyan); transform: translateY(-2px); } .cat__icon { font-size: 15px; } /* ---- Story modal ---- */ .story-modal { position: fixed; inset: 0; z-index: 80; background: rgba(var(--scrim-rgb), .86); backdrop-filter: blur(8px); display: grid; place-items: center; } .story-modal[hidden] { display: none; } .story-modal__close { position: fixed; top: 18px; right: 18px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(var(--hl-rgb), .12); color: var(--on-accent); font-size: 18px; display: grid; place-items: center; } /* ===== Story viewer — popup 2 cột (media trái · mạng xã hội phải) ===== */ .story-viewer { display: flex; width: min(1040px, 95vw); height: min(680px, 90vh); border-radius: 18px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 40px 100px -30px rgba(var(--shadow-rgb),1); } /* --- Cột trái: media --- */ .story-viewer__media { position: relative; flex: 1; min-width: 0; background: rgba(var(--shadow-rgb),1); } .story-media { position: absolute; inset: 0; display: grid; place-items: center; } .story-media img, .story-media video { width: 100%; height: 100%; object-fit: contain; } .story-media img { cursor: pointer; } /* Lớp báo tạm dừng */ .story-paused { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 56px; color: rgba(var(--hl-rgb), .9); text-shadow: 0 4px 18px rgba(var(--shadow-rgb), .7); pointer-events: none; } .story-paused[hidden] { display: none; } .story-progress { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 5px; z-index: 3; } .story-progress__seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(var(--hl-rgb), .3); overflow: hidden; } .story-progress__seg b { display: block; height: 100%; width: 0; background: var(--on-accent); } .story-progress__seg.is-done b { width: 100%; } .story-progress__seg.is-active b { animation: story-bar 5s linear forwards; } @keyframes story-bar { to { width: 100%; } } .story-nav { position: absolute; top: 40px; bottom: 40px; width: 80px; z-index: 4; cursor: pointer; display: grid; place-items: center; color: var(--on-accent); font-size: 26px; opacity: 0; transition: opacity var(--ease); } .story-nav::before { content: ""; } .story-nav--prev { left: 0; } .story-nav--prev::after { content: "‹"; } .story-nav--next { right: 0; } .story-nav--next::after { content: "›"; } .story-viewer__media:hover .story-nav { opacity: .9; } .story-nav::after { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--shadow-rgb), .5); display: grid; place-items: center; } /* --- Cột giữa: nút hành động --- */ .story-viewer__actions { width: 76px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; background: var(--bg2); border-left: 1px solid var(--line-soft); } .story-act { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; } .story-act span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--surface2); border: 1px solid var(--line); transition: transform var(--ease), border-color var(--ease); } .story-act:hover span { transform: scale(1.08); border-color: var(--pink); } .story-act.is-liked span { background: rgba(var(--pink-rgb), .18); border-color: var(--pink); } .story-act b { font-weight: 700; color: var(--ink); } /* --- Cột phải: panel mạng xã hội --- */ .story-viewer__panel { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line-soft); } .story-panel__head { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line-soft); } .story-header__av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; background: var(--surface2); border: 2px solid var(--line); } .story-header__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .story-panel__meta { flex: 1; min-width: 0; } .story-header__name { font-weight: 700; font-size: 14.5px; } .story-header__time { font-size: 11.5px; color: var(--faint); } .story-panel__stats { display: flex; gap: 22px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; } .story-panel__stats b { color: var(--ink); } .story-panel__caption { padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); } .story-panel__comments { flex: 1; overflow-y: auto; padding: 8px 16px; } .story-comment { display: flex; gap: 10px; padding: 10px 0; } .story-comment__av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 15px; background: var(--surface2); border: 1px solid var(--line); } .story-comment__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .story-comment__name { font-weight: 700; font-size: 12.5px; } .story-comment__time { color: var(--faint); font-size: 11px; margin-left: 6px; } .story-comment__text { font-size: 13px; color: #CFC9F0; margin-top: 2px; line-height: 1.5; } .story-panel__empty { color: var(--faint); font-size: 12.5px; text-align: center; padding: 16px 0; } .story-panel__input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); } .story-panel__input input { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 10px 14px; color: var(--ink); font-size: 13.5px; outline: none; } .story-panel__input button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--pink), var(--violet)); color: var(--on-accent); font-size: 15px; cursor: pointer; flex-shrink: 0; } /* Responsive: ẩn panel trên màn hẹp */ /* 📱 Story viewer mobile: THẺ GỌN giữa màn (không full-screen, không letterbox đen) — ảnh cover đầy thẻ bo góc · header overlay trong thẻ · hàng tương tác RIÊNG dưới thẻ (ô bình luận + ♥ + 🎁, lược số liệu 👁/tim) · chạm gõ → DỪNG story + sheet bình luận đáy màn. */ @media (max-width: 820px) { .story-modal { padding: 0 12px; } .story-viewer { position: relative; flex-direction: column; width: min(94vw, 430px); height: auto; background: transparent; border-radius: 0; overflow: visible; } /* Thẻ media: cover đầy khung — hết 2 dải đen trên dưới */ .story-viewer__media { flex: none; width: 100%; height: min(66dvh, 560px); border-radius: 18px; overflow: hidden; background: rgba(var(--shadow-rgb),1); box-shadow: 0 30px 80px -24px rgba(var(--shadow-rgb), .85); } .story-media img, .story-media video { object-fit: cover; } /* Panel tan thành overlay */ .story-viewer__panel { position: static; width: auto; height: 0; flex: none; border: 0; overflow: visible; } /* Header trong thẻ, dưới thanh tiến trình */ .story-panel__head { position: absolute; top: 24px; left: 10px; right: 10px; z-index: 6; padding: 0; border: 0; background: transparent; } .story-panel__head .story-header__name, .story-panel__head .story-header__time { text-shadow: 0 1px 8px rgba(var(--shadow-rgb), .9); } .story-panel__stats { display: none; } /* lược 👁 xem / số tim / số 💬 */ #storyShareBtn { display: none; } /* mobile: bỏ nút chia sẻ cho gọn */ .story-act b, .story-act small { display: none; } /* Caption đè đáy thẻ (bỏ đường gạch của bản desktop) */ .story-panel__caption { position: absolute; left: 12px; right: 74px; bottom: 16px; z-index: 5; padding: 0; border: 0; max-height: 24dvh; overflow-y: auto; color: var(--on-accent); text-shadow: 0 1px 8px rgba(var(--shadow-rgb), .9); font-size: 13.5px; } /* Hàng "Viết bình luận…" nằm RIÊNG dưới thẻ, full bề ngang */ .story-panel__input { position: static; padding: 10px 0 0; border: 0; } .story-panel__input input { height: 44px; border-radius: 22px; background: rgba(var(--hl-rgb), .09); border-color: rgba(var(--hl-rgb), .18); } .story-panel__input button { width: 44px; height: 44px; border-radius: 50%; } /* ♥ 🎁 nổi trong thẻ, góc dưới phải (kính mờ cho rõ trên mọi nền ảnh) */ .story-viewer__actions { position: absolute; right: 10px; bottom: 14px; z-index: 6; flex-direction: column; width: auto; height: auto; gap: 8px; padding: 0; border: 0; background: transparent; } .story-act span { width: 44px; height: 44px; font-size: 20px; background: rgba(10, 8, 24, .45); border: 1px solid rgba(var(--hl-rgb), .16); backdrop-filter: blur(6px); } /* Chế độ bình luận: sheet + ô nhập ghim ĐÁY MÀN (nổi trên bàn phím nhờ resizes-content) */ .story-panel__comments { display: none; } .story-modal.is-commenting .story-panel__comments { display: block; position: fixed; left: 0; right: 0; bottom: 62px; z-index: 90; max-height: 46dvh; overflow-y: auto; padding: 12px 16px; background: var(--bg2); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -16px 44px -12px rgba(var(--shadow-rgb), .65); animation: story-sheet-up .18s ease; } .story-modal.is-commenting .story-panel__input { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; padding: 9px 12px; background: var(--bg2); border-top: 1px solid var(--line-soft); } .story-modal.is-commenting .story-viewer__actions, .story-modal.is-commenting .story-panel__caption { display: none; } /* Nút đóng góc màn */ .story-modal__close { top: 10px; right: 10px; background: rgba(var(--scrim-rgb), .6); z-index: 92; } } @keyframes story-sheet-up { from { transform: translateY(24px); opacity: 0; } } /* ---- Tạo story modal ---- */ .story-create { position: fixed; inset: 0; z-index: 90; background: rgba(var(--scrim-rgb), .86); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; } .story-create[hidden] { display: none; } .story-create__box { width: 420px; max-width: 94vw; background: linear-gradient(180deg, var(--surface), var(--bg2)); border: 1px solid var(--line); border-radius: 20px; padding: 22px; position: relative; } .story-create__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface2); color: var(--ink); font-size: 15px; cursor: pointer; } .story-create__title { margin: 0 0 16px; font-size: 18px; font-weight: 700; } .story-create__drop { border: 2px dashed var(--line); border-radius: 14px; padding: 40px 16px; text-align: center; cursor: pointer; color: var(--muted); display: grid; gap: 8px; place-items: center; transition: border-color var(--ease); } .story-create__drop:hover { border-color: var(--pink); color: var(--ink); } .story-create__plus { font-size: 34px; color: var(--pink); } .story-create__preview { border-radius: 14px; overflow: hidden; background: rgba(var(--shadow-rgb),1); max-height: 380px; display: grid; place-items: center; } .story-create__preview img, .story-create__preview video { width: 100%; max-height: 380px; object-fit: contain; } .story-create .inp { margin-top: 14px; } /* ============================================================ NEBULA skin — MODAL CHUNG (.story-create): tạo story · đổi/rút Xèng · QR nạp Xu · admin sửa/xem. Box kính #141033, nút violet. Neon BYTE-NGUYÊN. Overlay chung (không scope screen) → gate :root[data-theme="nebula"]. ============================================================ */ :root[data-theme="nebula"] .story-create__box { background: #141033; border: 1px solid rgba(var(--hl-rgb), .12); box-shadow: 0 30px 80px -20px rgba(var(--shadow-rgb), .8); } :root[data-theme="nebula"] .story-create__close { width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .08); color: var(--ink-soft); transition: background var(--ease), color var(--ease); } :root[data-theme="nebula"] .story-create__close:hover { background: rgba(var(--hl-rgb), .12); color: var(--ink); } :root[data-theme="nebula"] .story-create__title { color: var(--ink); } :root[data-theme="nebula"] .story-create .inp { background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .1); color: var(--ink); } :root[data-theme="nebula"] .story-create .inp:focus { outline: none; border-color: rgba(var(--violet-rgb), .5); } :root[data-theme="nebula"] .story-create .field-label { color: var(--ink-soft); } :root[data-theme="nebula"] .story-create .sub { color: var(--muted); } /* Nút: chính = violet phẳng · ghost = kính (QR btn--gold / Rút btn--cyan giữ accent riêng) */ :root[data-theme="nebula"] .story-create .btn--block:not(.btn--gold):not(.btn--cyan) { background: var(--violet2); color: #fff; } :root[data-theme="nebula"] .story-create .btn--ghost { background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .12); color: var(--ink); } :root[data-theme="nebula"] .story-create .btn--ghost:hover { background: rgba(var(--hl-rgb), .1); } /* Vùng thả ảnh (tạo story) */ :root[data-theme="nebula"] .story-create__drop { border-color: rgba(var(--hl-rgb), .18); background: rgba(var(--hl-rgb), .03); } :root[data-theme="nebula"] .story-create__drop:hover { border-color: var(--violet); color: var(--ink); } :root[data-theme="nebula"] .story-create__plus { color: var(--violet-tint); } /* ============================================================ NEBULA skin — màn STORY (#storyAll grid) + story-viewer overlay. Neon BYTE-NGUYÊN (gate). Grid = tiêu đề + thẻ media; viewer skin kính (giữ bố cục 2-panel media+bình luận — khác mockup single-card CHỦ Ý). ============================================================ */ :root[data-theme="nebula"] .app.is-neb #content > #storyAll.screen { max-width: 1080px; margin: 0 auto; padding: 26px 30px 90px; } @media (max-width: 720px) { :root[data-theme="nebula"] .app.is-neb #content > #storyAll.screen { padding: 22px 16px 60px; } } :root[data-theme="nebula"] #storyAll .eyebrow { color: var(--n-label); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; } :root[data-theme="nebula"] #storyAll .h-title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; } :root[data-theme="nebula"] #storyAll .sub { font-size: 14px; color: var(--muted); margin-bottom: 4px; } :root[data-theme="nebula"] #storyAll .story-tile { border: 1px solid rgba(var(--hl-rgb), .1); } :root[data-theme="nebula"] #storyAll .feed-more .btn--ghost { background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .16); color: var(--ink); } /* ---- Story viewer NEBULA = 1:1 mockup: STORY CARD 380×660 (điều khiển overlay) + SIDE PANEL material (stats + bình luận). Chỉ desktop ≥821px — mobile giữ single-card @media(max-820) sẵn có (không nebula-gate). ---- */ @media (min-width: 821px) { :root[data-theme="nebula"] .story-viewer { position: relative; display: flex; align-items: stretch; gap: 16px; width: auto; height: auto; background: transparent; border: 0; box-shadow: none; overflow: visible; } /* Card media 380×660 */ :root[data-theme="nebula"] .story-viewer__media { flex: none; width: 380px; height: min(660px, 86vh); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); } :root[data-theme="nebula"] .story-media img, :root[data-theme="nebula"] .story-media video { object-fit: cover; } /* Vignette cho chữ dễ đọc */ :root[data-theme="nebula"] .story-viewer__media::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6, 4, 16, .42), transparent 22%, transparent 58%, rgba(6, 4, 16, .72)); } :root[data-theme="nebula"] .story-progress { z-index: 4; } /* Author header overlay (đè card top) */ :root[data-theme="nebula"] .story-panel__head { position: absolute; top: 22px; left: 12px; width: 356px; z-index: 6; padding: 0; border: 0; background: transparent; } :root[data-theme="nebula"] .story-panel__head .story-header__av { width: 38px; height: 38px; border: 2px solid #fff; background: linear-gradient(135deg, var(--violet2), var(--cyan)); } :root[data-theme="nebula"] .story-panel__head .story-header__name { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); } :root[data-theme="nebula"] .story-panel__head .story-header__time { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); } :root[data-theme="nebula"] #storyHireBtn { background: var(--pink); color: #fff; border: 0; border-radius: 100px; padding: 6px 14px; font-weight: 700; } /* Caption overlay (đáy card, trên reply bar) */ :root[data-theme="nebula"] .story-panel__caption { position: absolute; left: 16px; right: auto; width: 306px; bottom: 74px; z-index: 5; padding: 0; border: 0; color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); line-height: 1.5; max-height: 30%; overflow-y: auto; } /* Reply bar overlay: ô nhập kính mờ */ :root[data-theme="nebula"] .story-panel__input { position: absolute; left: 12px; bottom: 14px; width: 250px; z-index: 6; padding: 0; border: 0; gap: 8px; } :root[data-theme="nebula"] .story-panel__input input { height: 42px; border-radius: 100px; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); } :root[data-theme="nebula"] .story-panel__input input::placeholder { color: rgba(255, 255, 255, .7); } /* Mockup reply bar không có nút gửi — Enter để gửi (listener sẵn) */ :root[data-theme="nebula"] .story-panel__input button { display: none; } /* ♥ 🎁 cạnh reply bar (bỏ ↗ chia sẻ + nhãn) */ :root[data-theme="nebula"] .story-viewer__actions { position: absolute; left: 272px; bottom: 14px; z-index: 6; flex-direction: row; gap: 8px; width: auto; height: auto; background: transparent; border: 0; } :root[data-theme="nebula"] #storyShareBtn { display: none; } :root[data-theme="nebula"] .story-act b, :root[data-theme="nebula"] .story-act small { display: none; } :root[data-theme="nebula"] .story-act span { width: 42px; height: 42px; font-size: 17px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); } :root[data-theme="nebula"] #storyGiftBtn span { background: var(--pink); border-color: var(--pink); } :root[data-theme="nebula"] .story-act.is-liked span { background: rgba(var(--pink-rgb), .3); border-color: var(--pink); } /* Nav arrows nhỏ tròn (trong card) */ :root[data-theme="nebula"] .story-nav { width: 34px; height: 34px; top: 50%; bottom: auto; transform: translateY(-50%); opacity: .9; } :root[data-theme="nebula"] .story-nav--prev { left: 8px; } :root[data-theme="nebula"] .story-nav--next { left: 338px; right: auto; } :root[data-theme="nebula"] .story-nav::after { width: 34px; height: 34px; background: rgba(0, 0, 0, .35); font-size: 16px; } /* Side panel = material card (stats + bình luận) */ :root[data-theme="nebula"] .story-viewer__panel { width: 300px; flex: none; border-left: 0; align-self: stretch; background: linear-gradient(180deg, rgba(var(--hl-rgb), .06), rgba(var(--hl-rgb), .022)); border: 1px solid rgba(var(--hl-rgb), .1); border-radius: 18px; padding: 20px; max-height: min(660px, 86vh); overflow: hidden; box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .09), 0 22px 48px -24px rgba(0, 0, 0, .7); } :root[data-theme="nebula"] .story-panel__stats { padding: 0 0 14px; border-bottom: 1px solid rgba(var(--hl-rgb), .08); margin-bottom: 4px; gap: 16px; } :root[data-theme="nebula"] .story-panel__comments { flex: 1; padding: 4px 0; overflow-y: auto; } :root[data-theme="nebula"] .story-comment__av { background: rgba(var(--hl-rgb), .06); border: 1px solid rgba(var(--hl-rgb), .1); } /* Close = kính góc trên phải */ :root[data-theme="nebula"] .story-modal__close { background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .2); color: #fff; } }