/* =====================================================================
   ORANGE SMP VN — giao diện Galaxy (mặc định) + Halloween 2026
   Phong cách glass blur, tông đen – cam, gradient động.
   ===================================================================== */
:root{
  --bg:#04030a; --bg2:#0a0618;
  --text:#fff4e6; --dim:#b9aed6;
  --accent:#ff8a1f; --accent2:#ff4d6d; --accent3:#8b5cff; --accent4:#38d6ff;
  --lime:#3dffb3; --sun:#ffd23f;
  --glass:rgba(255,255,255,.055); --glass-hi:rgba(255,255,255,.10);
  --glass-line:rgba(255,255,255,.13); --glass-strong:rgba(14,9,32,.72);
  --blur:18px;
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  --grad-wide:linear-gradient(90deg,var(--sun),var(--accent),var(--accent2),var(--accent3),var(--accent4),var(--accent));
  --glow:0 0 38px rgba(255,138,31,.28);
  --radius:22px;
  --font-body:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
  --font-display:'Baloo 2','Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
  --font-pixel:'Press Start 2P',monospace;
  --header-h:68px;
}
html[data-theme="halloween"]{
  --bg:#07030b; --bg2:#12061a;
  --text:#fff0dd; --dim:#c8b0dc;
  --accent:#ff7a00; --accent2:#a24bff; --accent3:#7a2dd6; --accent4:#8cff3d;
  --sun:#ffb347;
  --glow:0 0 38px rgba(255,122,0,.34);
  --grad:linear-gradient(135deg,#ff7a00,#c23bff);
  --grad-wide:linear-gradient(90deg,#ffb347,#ff7a00,#c23bff,#8cff3d,#ff7a00);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
  min-height:100vh; min-height:100dvh; line-height:1.6; overflow-x:hidden; font-size:16px;
}
body.modal-open{ overflow:hidden; }
a{ color:inherit; }
h1,h2,h3{ margin:0; }
img{ max-width:100%; }
button{ font-family:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* ---------- Lớp nền ---------- */
#fx{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.bg-layers{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 50% 0%,var(--bg2),var(--bg) 70%); }
.bg-layers i{ position:absolute; display:block; }
.galaxy-img{
  inset:-8%; background:url(/images/galaxy.jpg) center/cover; opacity:.42; mix-blend-mode:screen;
  animation:galaxyspin 160s linear infinite; mask-image:radial-gradient(ellipse at 50% 35%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 35%,#000 25%,transparent 75%);
}
@keyframes galaxyspin{ from{ transform:rotate(0) scale(1.15);} to{ transform:rotate(360deg) scale(1.15);} }
.neb{ width:52vmax; height:52vmax; border-radius:50%; filter:blur(90px); opacity:.34; animation:drift 26s ease-in-out infinite alternate; }
.n1{ background:var(--accent); left:-16vmax; top:-14vmax; }
.n2{ background:var(--accent3); right:-18vmax; top:14vmax; animation-delay:-9s; }
.n3{ background:var(--accent4); left:18vmax; bottom:-30vmax; opacity:.2; animation-delay:-15s; }
.n4{ background:var(--accent2); right:8vmax; bottom:-22vmax; opacity:.22; animation-delay:-5s; width:36vmax; height:36vmax; }
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(6vmax,4vmax,0) scale(1.18);} }
.moon, .fog, .webs{ display:none; }
html[data-theme="halloween"] .galaxy-img{ opacity:.14; filter:hue-rotate(150deg) saturate(1.4); }
html[data-theme="halloween"] .moon{
  display:block; width:min(22vmin,190px); height:min(22vmin,190px); right:8vw; top:9vh; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff4d6,#ffd98a 55%,#e8a64a 100%);
  box-shadow:0 0 70px 28px rgba(255,190,90,.35),0 0 180px 90px rgba(255,122,0,.18); opacity:.9;
  animation:moonpulse 7s ease-in-out infinite alternate;
}
html[data-theme="halloween"] .moon::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 62% 30%,rgba(160,100,40,.25) 0 9%,transparent 10%),radial-gradient(circle at 30% 62%,rgba(160,100,40,.22) 0 12%,transparent 13%),radial-gradient(circle at 70% 70%,rgba(160,100,40,.2) 0 7%,transparent 8%);
}
@keyframes moonpulse{ from{ filter:brightness(.92);} to{ filter:brightness(1.08);} }
html[data-theme="halloween"] .fog{
  display:block; left:-30%; width:160%; height:34vh; bottom:-6vh; filter:blur(30px); opacity:.5;
  background:radial-gradient(ellipse at 20% 60%,rgba(170,110,255,.28),transparent 55%),radial-gradient(ellipse at 70% 40%,rgba(255,140,40,.2),transparent 55%);
  animation:fogmove 34s ease-in-out infinite alternate;
}
html[data-theme="halloween"] .fog.f2{ bottom:auto; top:30vh; opacity:.28; animation-duration:46s; animation-direction:alternate-reverse; }
@keyframes fogmove{ from{ transform:translateX(-8%);} to{ transform:translateX(8%);} }
html[data-theme="halloween"] .webs{ display:block; position:fixed; inset:0; z-index:3; pointer-events:none; color:rgba(255,255,255,.22); }
.web{ position:absolute; top:var(--header-h); width:clamp(90px,16vw,190px); height:auto; }
.web-l{ left:0; } .web-r{ right:0; }

#site-main,.site-footer,.site-header,.profile-banner{ position:relative; z-index:4; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px clamp(14px,3vw,32px); padding-top:max(10px,env(safe-area-inset-top));
  background:rgba(6,4,16,.55); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--glass-line);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),var(--accent3),transparent); opacity:.65;
  background-size:200% 100%; animation:shine 9s linear infinite;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark{
  flex:none; width:42px; height:42px; border-radius:12px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; color:#1a0f36; font-size:21px;
  box-shadow:0 6px 24px rgba(255,138,31,.5),inset 0 -4px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.35);
  transform:rotate(-6deg);
}
.brand-text{ line-height:1.1; min-width:0; }
.brand-text .name{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.4px; white-space:nowrap; }
.brand-text .owner{ font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.site-nav{ display:flex; gap:2px; flex-wrap:wrap; justify-content:center; }
.site-nav button, .site-nav a{
  background:none; border:none; color:var(--dim); font-weight:600; font-size:14px; text-decoration:none;
  padding:9px 14px; border-radius:999px; cursor:pointer; transition:color .15s,background .15s,transform .15s; white-space:nowrap;
}
.site-nav button:hover, .site-nav a:hover{ color:var(--text); background:var(--glass-hi); }
.site-nav button.active{ color:#1a0f36; background:var(--grad); box-shadow:0 4px 18px rgba(255,138,31,.45); }
.site-nav .nav-discord{ display:none; }

.header-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.header-cta{
  text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:14px;
  padding:9px 16px; border-radius:999px; color:#fff; background:linear-gradient(135deg,#5865f2,#8b5cff);
  box-shadow:0 4px 18px rgba(88,101,242,.45); transition:transform .15s; white-space:nowrap;
}
.header-cta:hover{ transform:translateY(-2px); }
.icon-btn{
  width:42px; height:42px; flex:none; border-radius:50%; border:1px solid var(--glass-line); background:var(--glass);
  backdrop-filter:blur(10px); display:inline-flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s;
}
.icon-btn:hover{ transform:translateY(-2px) rotate(-6deg); border-color:var(--accent); background:var(--glass-hi); }
.nav-toggle{ display:none; }
.burger{ width:18px; height:14px; position:relative; display:block; }
.burger i{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--text); transition:transform .25s,opacity .2s,top .25s; }
.burger i:nth-child(1){ top:0; } .burger i:nth-child(2){ top:6px; } .burger i:nth-child(3){ top:12px; }
.nav-open .burger i:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-open .burger i:nth-child(2){ opacity:0; }
.nav-open .burger i:nth-child(3){ top:6px; transform:rotate(-45deg); }

.auth-wrap{ position:relative; }
.auth-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:6px 16px; border-radius:999px; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:.4px; color:#1a0f36; border:none; background:var(--grad);
  box-shadow:0 4px 20px rgba(255,138,31,.45); transition:transform .15s,box-shadow .15s; white-space:nowrap;
}
.auth-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,138,31,.6); }
.auth-btn.in{ background:var(--glass); border:1px solid var(--glass-line); color:var(--text); box-shadow:none; padding:4px 14px 4px 5px; }
.auth-btn img{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:#222; }
.auth-btn .auth-label{ max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.user-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:230px; padding:8px; border-radius:18px; z-index:80;
  background:var(--glass-strong); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-line); box-shadow:0 24px 60px rgba(0,0,0,.55); animation:pop .18s ease;
}
.user-menu .um-head{ padding:10px 12px 12px; border-bottom:1px solid var(--glass-line); margin-bottom:6px; }
.user-menu .um-head b{ display:block; font-size:15px; }
.user-menu .um-head small{ color:var(--dim); font-size:12px; word-break:break-all; }
.user-menu button{
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; border:none; background:none;
  border-radius:12px; cursor:pointer; font-size:14px; font-weight:600; text-align:left;
}
.user-menu button:hover{ background:var(--glass-hi); }
@keyframes pop{ from{ opacity:0; transform:translateY(-6px) scale(.97);} to{ opacity:1; transform:none; } }

.profile-banner{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center;
  padding:10px 16px; font-size:14px; font-weight:600; background:linear-gradient(90deg,rgba(255,138,31,.25),rgba(139,92,255,.25));
  border-bottom:1px solid var(--glass-line); backdrop-filter:blur(12px);
}
.profile-banner button{ min-height:36px; padding:6px 16px; border-radius:999px; border:none; background:var(--grad); color:#1a0f36; font-weight:800; cursor:pointer; }

/* ---------- Trang ---------- */
#site-main{ min-height:60vh; }
.pv{ display:none; max-width:1180px; margin:0 auto; padding:clamp(22px,4vw,44px) clamp(14px,5vw,48px) 90px; }
.pv.active{ display:block; animation:fadein .45s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.pv > *{ margin-bottom:clamp(22px,3.5vw,40px); }
.pv > *:last-child{ margin-bottom:0; }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

.box{
  position:relative; border-radius:var(--radius); background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:blur(var(--blur)) saturate(1.3); -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px rgba(0,0,0,.35);
}

/* Hero */
.box-hero{
  overflow:hidden; text-align:center; padding:clamp(34px,7vw,92px) clamp(18px,5vw,64px);
  background:linear-gradient(180deg,rgba(4,3,10,.35),rgba(4,3,10,.78)),url(/images/galaxy.jpg) center/cover;
  border-color:transparent;
}
.box-hero::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),var(--accent),var(--accent3),var(--accent4),var(--accent2),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinang 8s linear infinite;
}
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes spinang{ to{ --ang:360deg; } }
html[data-theme="halloween"] .box-hero{
  background:linear-gradient(180deg,rgba(18,5,26,.4),rgba(7,3,11,.85)),radial-gradient(circle at 50% 0%,rgba(255,122,0,.4),transparent 60%),url(/images/galaxy.jpg) center/cover;
}
.event-badge{
  display:none; align-items:center; gap:8px; margin-bottom:14px; padding:7px 16px; border-radius:999px;
  font-family:var(--font-pixel); font-size:10px; letter-spacing:1px; color:#ffd9a8;
  background:rgba(255,122,0,.16); border:1px solid rgba(255,122,0,.55); animation:badgeglow 2.4s ease-in-out infinite alternate;
}
html[data-theme="halloween"] .event-badge{ display:inline-flex; }
@keyframes badgeglow{ from{ box-shadow:0 0 6px rgba(255,122,0,.3);} to{ box-shadow:0 0 22px rgba(255,122,0,.75);} }
.cubes i{ position:absolute; display:block; border-radius:6px; border:1px solid var(--glass-line); background:linear-gradient(135deg,rgba(255,138,31,.25),rgba(139,92,255,.2)); backdrop-filter:blur(4px); animation:floaty 9s ease-in-out infinite; }
.cubes i:nth-child(1){ width:46px; height:46px; left:6%; top:14%; }
.cubes i:nth-child(2){ width:28px; height:28px; right:8%; top:20%; animation-delay:-3s; }
.cubes i:nth-child(3){ width:62px; height:62px; right:14%; bottom:12%; animation-delay:-5s; }
.cubes i:nth-child(4){ width:20px; height:20px; left:14%; bottom:18%; animation-delay:-7s; }
.cubes i:nth-child(5){ width:34px; height:34px; left:46%; top:6%; animation-delay:-1s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-18px) rotate(18deg);} }
html[data-theme="halloween"] .cubes{ display:none; }
.eyebrow{ display:inline-block; font-weight:700; font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--sun); margin-bottom:12px; }
.box-hero .title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(34px,7.4vw,84px); line-height:1.08; padding-bottom:.08em;
  background:var(--grad-wide); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 9s linear infinite; text-shadow:0 0 60px rgba(255,138,31,.25);
}
@keyframes shine{ to{ background-position:300% center; } }
.subtitle{ max-width:760px; margin:14px auto 0; color:#e7dcf5; font-size:clamp(15px,2.1vw,19px); }
.hero-meta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-top:26px; }
.hero-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 26px; border-radius:999px; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:16px; text-decoration:none; color:#1a0f36; border:none; background:var(--grad);
  box-shadow:0 8px 30px rgba(255,138,31,.45); transition:transform .15s,box-shadow .15s;
}
.hero-btn:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(255,138,31,.65); }
.hero-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.hero-btn.outline{ background:var(--glass); color:var(--text); border:1px solid var(--glass-line); box-shadow:none; }
.hero-btn.outline:hover{ border-color:var(--accent); }
.ip-chip{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:8px 18px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35); backdrop-filter:blur(10px);
  font-weight:700; transition:border-color .15s,transform .15s; max-width:100%;
}
.ip-chip:hover{ border-color:var(--accent); transform:translateY(-2px); }
.ip-chip small{ color:var(--sun); font-weight:800; letter-spacing:1px; }
.ip-chip span:nth-child(2){ overflow-wrap:anywhere; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-top:34px; }
.stat{ padding:16px 10px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid var(--glass-line); backdrop-filter:blur(10px); }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(24px,4vw,34px); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ font-size:13px; color:var(--dim); }

/* Cards / text / buttons / images */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:clamp(12px,2vw,20px); }
.box-card{ padding:24px 22px; transition:transform .25s,box-shadow .25s; overflow:hidden; }
.box-card::before, .plugin-item::before, .rank-board::before, .post-card::before, .survey-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(135deg,var(--accent),transparent 45%,var(--accent3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.box-card:hover, .plugin-item:hover, .post-card:hover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(0,0,0,.5),var(--glow); }
.box-card:hover::before, .plugin-item:hover::before, .rank-board:hover::before, .post-card:hover::before, .survey-card:hover::before{ opacity:1; }
.box-card .icon{
  width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:14px;
  background:linear-gradient(135deg,rgba(255,138,31,.28),rgba(139,92,255,.25)); border:1px solid var(--glass-line);
}
.box-card .title{ font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:6px; }
.box-card .text{ color:var(--dim); font-size:15px; }

.box-text{ padding:clamp(20px,3.5vw,34px); }
.box-text.align-center{ text-align:center; } .box-text.align-right{ text-align:right; }
.box-text .heading{ font-family:var(--font-display); font-weight:800; font-size:clamp(22px,3.4vw,30px); margin-bottom:12px; background:var(--grad-wide); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 14s linear infinite; }
.box-text .body{ color:#e3d9f2; white-space:pre-line; overflow-wrap:anywhere; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.box-button{ background:none; border:none; box-shadow:none; backdrop-filter:none; }
.box-button a{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 26px; border-radius:999px; text-decoration:none;
  font-family:var(--font-display); font-weight:800; transition:transform .15s,box-shadow .15s;
}
.box-button.solid a{ background:var(--grad); color:#1a0f36; box-shadow:0 8px 28px rgba(255,138,31,.4); }
.box-button.outline a{ background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(10px); }
.box-button a:hover{ transform:translateY(-3px); }
.box-image{ padding:10px; overflow:hidden; }
.box-image img{ display:block; width:100%; border-radius:calc(var(--radius) - 8px); }
.box-image .caption{ padding:10px 6px 4px; color:var(--dim); font-size:14px; text-align:center; }

.box-plugin-grid{ background:none; border:none; box-shadow:none; backdrop-filter:none; }
.box-plugin-grid .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:14px; }
.plugin-item{ position:relative; padding:16px 18px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); transition:transform .25s,box-shadow .25s; }
.plugin-item .row{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:6px; }
.plugin-item .left{ display:flex; align-items:center; gap:10px; min-width:0; }
.plugin-item .icon{ font-size:22px; }
.plugin-item .name{ font-weight:700; overflow-wrap:anywhere; }
.plugin-item .version{ font-size:11px; padding:2px 9px; border-radius:99px; background:rgba(255,138,31,.18); color:var(--sun); white-space:nowrap; }
.plugin-item .desc{ color:var(--dim); font-size:14px; }

/* Live boxes */
.live-box{ padding:clamp(16px,3vw,28px); }
.muted-note{ text-align:center; color:var(--dim); padding:18px; }
.player-grid-count{ text-align:center; color:var(--dim); font-weight:600; margin-bottom:16px; }
.player-grid-count b{ color:var(--sun); }
.box-player-grid .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(46%,150px),1fr)); gap:14px; }
.player-item{ text-align:center; padding:16px 10px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid var(--glass-line); transition:transform .2s; }
.player-item:hover{ transform:translateY(-4px); }
.player-item img{ width:72px; height:72px; border-radius:14px; image-rendering:pixelated; background:#1b1344; box-shadow:0 8px 22px rgba(0,0,0,.45); }
.player-item .name{ font-weight:700; margin-top:8px; overflow-wrap:anywhere; }
.player-item .role{ display:inline-block; margin-top:4px; padding:1px 10px; font-size:11px; font-weight:800; border-radius:99px; background:rgba(255,255,255,.1); }
.role-owner{ background:linear-gradient(135deg,#ffd23f,#ff8a1f) !important; color:#2a1700; }
.role-admin{ background:linear-gradient(135deg,#ff4d6d,#ff8a1f) !important; color:#fff; }
.role-mod{ background:linear-gradient(135deg,#38d6ff,#8b5cff) !important; color:#fff; }
.role-vip{ background:linear-gradient(135deg,#3dffb3,#38d6ff) !important; color:#06241c; }
.player-item .bio{ margin-top:6px; font-size:12px; color:var(--dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Khoá cho khách */
.locked-panel{ position:relative; overflow:hidden; border-radius:18px; min-height:240px; }
.locked-panel .decoys{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; filter:blur(9px); opacity:.55; user-select:none; pointer-events:none; padding:6px; }
.locked-panel .decoys span{ height:110px; border-radius:16px; background:linear-gradient(135deg,rgba(255,138,31,.25),rgba(139,92,255,.25)); border:1px solid var(--glass-line); }
.locked-cta{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:20px;
  background:radial-gradient(ellipse at center,rgba(4,3,10,.72),rgba(4,3,10,.35));
}
.locked-cta .lk{ font-size:38px; filter:drop-shadow(0 0 14px rgba(255,138,31,.6)); }
.locked-cta h3{ font-family:var(--font-display); font-size:clamp(20px,3vw,26px); }
.locked-cta p{ margin:0; max-width:460px; color:#e3d9f2; font-size:15px; }
.locked-panel.solo{ min-height:0; }
.locked-panel.solo .locked-cta{ position:static; background:none; padding:34px 20px; }

/* Bảng xếp hạng */
.rank-period{ text-align:center; color:var(--dim); font-weight:600; margin-bottom:16px; }
.rank-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:16px; }
.rank-board{ position:relative; padding:18px; border-radius:20px; background:rgba(255,255,255,.045); border:1px solid var(--glass-line); }
.rank-board h3{ font-family:var(--font-display); font-size:20px; margin-bottom:12px; }
.rank-board ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.rank-board li{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.05); min-height:44px; }
.rank-board li .pos{ flex:none; width:30px; text-align:center; font-weight:800; color:var(--dim); font-size:15px; }
.rank-board li .nm{ flex:1; min-width:0; font-weight:600; overflow-wrap:anywhere; }
.rank-board li .val{ flex:none; font-weight:800; color:var(--sun); font-size:14px; }
.rank-board li.top1{ background:linear-gradient(90deg,rgba(255,210,63,.28),rgba(255,138,31,.1)); box-shadow:0 0 22px rgba(255,210,63,.22); }
.rank-board li.top2{ background:linear-gradient(90deg,rgba(220,230,255,.2),rgba(255,255,255,.05)); }
.rank-board li.top3{ background:linear-gradient(90deg,rgba(255,150,80,.22),rgba(255,255,255,.05)); }
.rank-board li.top .pos{ font-size:22px; }
.rank-board li.locked .nm, .rank-board li.locked .val{ filter:blur(7px); user-select:none; opacity:.65; }
.rank-board li.mine{ outline:2px solid var(--accent); }
.rank-board li.more{ display:none; }
.rank-board.expanded li.more{ display:flex; }
.rank-more{ margin-top:10px; width:100%; min-height:40px; border-radius:12px; border:1px solid var(--glass-line); background:var(--glass); cursor:pointer; font-weight:700; }
.rank-more:hover{ border-color:var(--accent); }
.rank-guest-cta{ margin-top:18px; padding:18px; border-radius:18px; text-align:center; background:linear-gradient(135deg,rgba(255,138,31,.16),rgba(139,92,255,.16)); border:1px solid var(--glass-line); }
.rank-guest-cta p{ margin:0 0 12px; color:#e9dff7; }
.my-rank{ margin-bottom:18px; padding:16px 18px; border-radius:18px; background:linear-gradient(135deg,rgba(255,138,31,.2),rgba(139,92,255,.18)); border:1px solid var(--glass-line); }
.my-rank h3{ font-family:var(--font-display); font-size:18px; margin-bottom:10px; }
.my-rank .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.my-rank .chip{ padding:6px 14px; border-radius:99px; background:rgba(0,0,0,.35); border:1px solid var(--glass-line); font-weight:700; font-size:14px; }
.my-rank .chip b{ color:var(--sun); }
.my-rank p{ margin:0; color:var(--dim); font-size:14px; }

/* Bài viết */
.post-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:18px; }
.post-card{ position:relative; display:flex; flex-direction:column; text-decoration:none; overflow:hidden; border-radius:20px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); transition:transform .25s,box-shadow .25s; }
.post-card img, .post-ph{ width:100%; height:170px; object-fit:cover; }
.post-ph{ display:flex; align-items:center; justify-content:center; font-size:46px; background:linear-gradient(135deg,rgba(255,138,31,.25),rgba(139,92,255,.25)); }
.post-body{ padding:16px 18px 20px; }
.article-meta{ font-size:12px; color:var(--sun); font-weight:700; letter-spacing:.4px; }
.post-title{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:4px 0 6px; }
.post-ex{ color:var(--dim); font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.box-article{ padding:clamp(20px,4vw,40px); max-width:820px; margin:0 auto; }
.back-link{ display:inline-block; margin-bottom:14px; color:var(--accent); text-decoration:none; font-weight:700; }
.article-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,5vw,38px); margin:6px 0 16px; line-height:1.2; }
.article-cover{ display:block; width:100%; border-radius:16px; margin:14px 0; }
.a-heading{ font-family:var(--font-display); font-size:22px; margin:26px 0 8px; color:var(--sun); }
.a-paragraph{ margin:0 0 14px; color:#e8def6; overflow-wrap:anywhere; }
.a-quote{ margin:14px 0; padding:12px 16px; border-left:3px solid var(--accent); background:rgba(255,255,255,.05); border-radius:0 12px 12px 0; color:var(--dim); }
.a-list{ margin:0 0 14px; padding-left:22px; color:#e8def6; }
.box-article a{ color:var(--accent); }
.reactions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; padding-top:18px; border-top:1px solid var(--glass-line); align-items:center; }
.reactions .rx-title{ width:100%; font-size:13px; color:var(--dim); font-weight:600; }
.react-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:6px 14px; border-radius:99px; cursor:pointer; font-size:18px;
  background:var(--glass); border:1px solid var(--glass-line); transition:transform .15s,border-color .15s,background .15s;
}
.react-btn b{ font-size:14px; font-family:var(--font-body); color:var(--dim); min-width:1ch; }
.react-btn:hover{ transform:translateY(-3px) scale(1.06); border-color:var(--accent); }
.react-btn.on{ background:linear-gradient(135deg,rgba(255,138,31,.35),rgba(139,92,255,.3)); border-color:var(--accent); }
.react-btn.on b{ color:var(--text); }
.react-btn.pop{ animation:rxpop .35s ease; }
@keyframes rxpop{ 50%{ transform:scale(1.3);} }

/* Khảo sát */
.survey-list{ display:grid; gap:18px; }
.survey-card{ position:relative; padding:clamp(18px,3vw,28px); }
.survey-card .s-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.survey-card h3{ font-family:var(--font-display); font-size:clamp(19px,3vw,24px); }
.survey-card .s-q{ color:#e3d9f2; margin:6px 0 16px; }
.badge{ display:inline-block; padding:2px 12px; border-radius:99px; font-size:12px; font-weight:800; background:rgba(61,255,179,.18); color:var(--lime); }
.badge.closed{ background:rgba(255,255,255,.1); color:var(--dim); }
.opts{ display:grid; gap:10px; }
.opt{
  position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; min-height:50px;
  padding:10px 16px; text-align:left; border-radius:14px; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid var(--glass-line);
  font-size:15px; font-weight:600; transition:border-color .15s,transform .15s;
}
.opt::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:var(--pct,0%); background:linear-gradient(90deg,rgba(255,138,31,.35),rgba(139,92,255,.3)); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.opt > *{ position:relative; }
.opt:hover:not(:disabled){ border-color:var(--accent); transform:translateX(3px); }
.opt.mine{ border-color:var(--lime); }
.opt.mine .lbl::after{ content:" ✓"; color:var(--lime); }
.opt .pc{ font-weight:800; color:var(--sun); white-space:nowrap; }
.opt:disabled{ cursor:default; }
.s-foot{ margin-top:12px; font-size:13px; color:var(--dim); }

/* Đăng ký */
.apply-wrap{ max-width:760px; margin:0 auto; display:grid; gap:22px; }
.apply-form{ padding:clamp(18px,4vw,34px); border-radius:var(--radius); background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px rgba(0,0,0,.35); }
.apply-form h3{ font-family:var(--font-display); font-size:clamp(20px,3vw,26px); margin-bottom:14px; }
.steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.steps span{ flex:1 1 130px; padding:8px 12px; border-radius:12px; font-size:13px; font-weight:700; text-align:center; background:rgba(255,255,255,.06); color:var(--dim); border:1px solid var(--glass-line); }
.steps span.done{ color:var(--lime); border-color:rgba(61,255,179,.4); }
.steps span.now{ color:#1a0f36; background:var(--grad); border-color:transparent; }
.field{ margin-bottom:18px; }
.field > label, .field > .lbl{ display:block; font-weight:700; font-size:14px; margin-bottom:7px; }
.field small{ display:block; margin-top:6px; color:var(--dim); font-size:12.5px; }
input[type=text], input[type=date], input:not([type]), select, textarea{
  width:100%; min-height:46px; padding:10px 14px; border-radius:14px; font-size:16px; font-family:inherit; color:var(--text);
  background:rgba(0,0,0,.35); border:1px solid var(--glass-line); transition:border-color .15s,box-shadow .15s; color-scheme:dark;
}
textarea{ resize:vertical; min-height:96px; line-height:1.5; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,138,31,.25); }
input:disabled{ opacity:.6; cursor:not-allowed; }
select option{ background:#140c2c; }
.seg{ display:flex; flex-wrap:wrap; gap:10px; }
.seg label{ flex:1 1 150px; position:relative; display:flex; align-items:center; justify-content:center; min-height:46px; padding:8px 14px; text-align:center; border-radius:14px; cursor:pointer; background:rgba(0,0,0,.3); border:1px solid var(--glass-line); font-weight:600; font-size:14px; transition:border-color .15s,background .15s; }
.seg label:hover{ border-color:var(--accent); }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label:has(input:checked){ background:linear-gradient(135deg,rgba(255,138,31,.35),rgba(139,92,255,.3)); border-color:var(--accent); }
.seg label:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(255,138,31,.35); }
.check{ display:flex; gap:12px; align-items:flex-start; margin:14px 0; font-size:14px; cursor:pointer; }
.check input{ flex:none; width:22px; height:22px; margin-top:1px; accent-color:var(--accent); }
.age-rules{ margin-top:10px; padding:12px 14px; border-radius:14px; font-size:13px; color:#e3d9f2; background:rgba(255,138,31,.1); border:1px solid rgba(255,138,31,.3); }
.age-rules ul{ margin:6px 0 8px; padding-left:20px; }
.age-note{ margin-top:10px; padding:10px 14px; border-radius:12px; background:rgba(56,214,255,.12); border:1px solid rgba(56,214,255,.35); font-size:14px; }
.form-error{ margin:10px 0; padding:10px 14px; border-radius:12px; background:rgba(255,77,109,.16); border:1px solid rgba(255,77,109,.5); color:#ffc2cc; font-size:14px; }
.apply-form .hero-btn{ width:100%; margin-top:6px; }
.dc-status{ margin-bottom:8px; color:var(--dim); font-size:14px; }
.profile-line{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(0,0,0,.28); border:1px solid var(--glass-line); font-size:14px; }
.profile-line img{ width:40px; height:40px; border-radius:50%; }
.status-card{ padding:clamp(18px,3vw,28px); border-radius:var(--radius); background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); }
.status-badge{ display:inline-block; padding:3px 14px; border-radius:99px; font-weight:800; font-size:12px; letter-spacing:1px; margin-bottom:8px; }
.st-pending .status-badge{ background:rgba(255,210,63,.2); color:var(--sun); }
.st-ok .status-badge{ background:rgba(61,255,179,.2); color:var(--lime); }
.st-no .status-badge{ background:rgba(255,77,109,.22); color:#ff97a8; }
.st-pending{ border-color:rgba(255,210,63,.4); } .st-ok{ border-color:rgba(61,255,179,.45); } .st-no{ border-color:rgba(255,77,109,.45); }
.status-code{ font-weight:700; margin-bottom:6px; overflow-wrap:anywhere; }
.status-card p{ margin:6px 0; color:#e3d9f2; }
.status-extra{ font-size:14px; color:var(--dim) !important; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto;
  background:rgba(2,1,8,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:fadein .2s ease;
}
.modal{
  position:relative; width:100%; max-width:440px; margin:auto; padding:34px clamp(20px,5vw,34px) 28px; border-radius:30px;
  background:linear-gradient(180deg,rgba(40,30,70,.82),rgba(16,10,36,.9)); backdrop-filter:blur(30px) saturate(1.4); -webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid var(--glass-line); box-shadow:0 40px 100px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.18); animation:pop .22s ease;
}
.modal.wide{ max-width:560px; }
.modal-close{ position:absolute; right:14px; top:14px; width:42px; height:42px; border-radius:50%; border:none; background:none; font-size:22px; cursor:pointer; color:var(--dim); }
.modal-close:hover{ background:var(--glass-hi); color:var(--text); }
.modal h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,5vw,30px); text-align:center; margin:4px 30px 10px; line-height:1.2; }
.modal .sub{ text-align:center; color:#d9cfee; margin:0 0 22px; font-size:15px; }
.sso-btn{
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:56px; padding:10px 20px; border-radius:999px; cursor:pointer; text-decoration:none;
  font-size:17px; font-weight:700; color:var(--text); background:rgba(0,0,0,.45); border:1px solid var(--glass-line); transition:transform .15s,border-color .15s,background .15s;
}
.sso-btn:hover{ transform:translateY(-2px); border-color:var(--accent); background:rgba(0,0,0,.6); }
.sso-btn svg{ width:22px; height:22px; flex:none; }
.sso-btn.off{ opacity:.55; pointer-events:none; }
.modal .fine{ margin:16px 0 0; text-align:center; font-size:12.5px; color:var(--dim); }
.modal .perks{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px; font-size:14px; color:#e3d9f2; }
.modal .perks li{ display:flex; gap:10px; align-items:center; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.05); }
.modal .hero-btn{ width:100%; }

/* Toast */
#toast-root{ position:fixed; left:0; right:0; bottom:max(18px,env(safe-area-inset-bottom)); z-index:300; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 14px; }
.toast{ pointer-events:auto; max-width:min(92vw,460px); padding:12px 20px; border-radius:16px; font-size:14px; font-weight:600; background:var(--glass-strong); border:1px solid var(--glass-line); backdrop-filter:blur(18px); box-shadow:0 14px 40px rgba(0,0,0,.5); animation:pop .2s ease; }
.toast.err{ border-color:rgba(255,77,109,.6); }
.toast.ok{ border-color:rgba(61,255,179,.55); }

/* Footer */
.site-footer{ max-width:1180px; margin:0 auto 20px; padding:22px clamp(14px,5vw,48px) calc(26px + env(safe-area-inset-bottom)); text-align:center; color:var(--dim); font-size:14px; }
.site-footer a{ color:var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .site-nav button{ padding:8px 10px; font-size:13px; }
  .header-cta{ display:none; }
}
@media (max-width:960px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    position:fixed; left:0; right:0; top:var(--header-h); z-index:70; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:6px;
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto; padding:14px clamp(14px,4vw,24px) calc(22px + env(safe-area-inset-bottom));
    background:rgba(6,4,16,.92); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); border-bottom:1px solid var(--glass-line);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:transform .25s,opacity .2s,visibility .25s;
  }
  .nav-open .site-nav{ transform:none; opacity:1; visibility:visible; }
  .site-nav button, .site-nav a{ min-height:50px; padding:12px 18px; font-size:16px; text-align:left; border-radius:14px; background:rgba(255,255,255,.04); }
  .site-nav .nav-discord{ display:flex; align-items:center; color:#fff; background:linear-gradient(135deg,#5865f2,#8b5cff); }
  .brand-text .owner{ display:none; }
}
@media (max-width:640px){
  :root{ --header-h:62px; }
  .site-header{ gap:8px; }
  .brand-mark{ width:38px; height:38px; font-size:18px; }
  .brand-text .name{ font-size:16px; }
  .icon-btn{ width:40px; height:40px; }
  .auth-btn{ padding:6px 14px; font-size:13px; }
  .auth-btn.in{ padding:3px 10px 3px 4px; }
  .auth-btn.in .auth-label{ max-width:74px; }
  .user-menu{ position:fixed; left:12px; right:12px; top:calc(var(--header-h) + 8px); min-width:0; }
  .box-hero .title{ letter-spacing:-.5px; }
  .hero-btn{ width:100%; }
  .hero-meta{ flex-direction:column; align-items:stretch; }
  .ip-chip{ justify-content:center; }
  .modal{ border-radius:26px; padding-top:30px; }
  .web{ width:80px; }
}
@media (max-width:400px){
  .brand-text{ display:none; }
  .auth-btn:not(.in) .auth-ico{ display:none; }
  .auth-btn:not(.in){ padding:6px 12px; }
}
@media (hover:none) and (pointer:coarse){
  .box-card:hover, .plugin-item:hover, .post-card:hover, .player-item:hover{ transform:none; }
  .react-btn, .opt, .seg label, .check{ min-height:48px; }
}
@media (min-width:1500px){
  .pv, .site-footer{ max-width:1320px; }
  body{ font-size:17px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important; }
}

/* ---------- Mobile beauty-lite: giữ tông màu / layout, bỏ blur nặng + animation nền ---------- */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  :root{ --blur:0px; --glass:rgba(18,12,36,.72); --glass-strong:rgba(14,9,32,.88); }
  .galaxy-img{ animation:none !important; transform:scale(1.12); opacity:.32; will-change:auto; }
  .neb{
    filter:none; opacity:.22; animation:none !important; width:70vmax; height:70vmax;
    background:radial-gradient(circle, var(--accent) 0%, transparent 68%) !important;
  }
  .n3, .n4{ display:none; }
  .site-header{ background:rgba(6,4,16,.88); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .site-header::after{ animation:none; }
  .box, .plugin-item, .post-card, .apply-form, .status-card, .stat, .ip-note, .toast,
  .box-button.outline a, .auth-wrap .user-menu, .modal-overlay, .modal{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .site-nav{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(6,4,16,.96); }
  .box-text .heading, .box-hero .title{ animation:none; }
  html[data-theme="halloween"] .fog{ filter:none; opacity:.28; animation:none !important; }
  html[data-theme="halloween"] .moon{ animation:none !important; }
  #fx{ opacity:.85; }
}
html.mobile-lite{
  --blur:0px;
  --glass:rgba(18,12,36,.72);
  --glass-strong:rgba(14,9,32,.88);
}
html.mobile-lite .galaxy-img{
  animation:none !important;
  transform:scale(1.12);
  opacity:.32;
  will-change:auto;
}
html.mobile-lite .neb{
  filter:none;
  opacity:.22;
  animation:none !important;
  width:70vmax; height:70vmax;
  /* soft blob không blur GPU */
  background:radial-gradient(circle, var(--accent) 0%, transparent 68%) !important;
}
html.mobile-lite .n3,
html.mobile-lite .n4{ display:none; }
html.mobile-lite .site-header{
  background:rgba(6,4,16,.88);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html.mobile-lite .site-header::after{ animation:none; }
html.mobile-lite .box,
html.mobile-lite .plugin-item,
html.mobile-lite .post-card,
html.mobile-lite .apply-form,
html.mobile-lite .status-card,
html.mobile-lite .stat,
html.mobile-lite .ip-note,
html.mobile-lite .toast,
html.mobile-lite .box-button.outline a,
html.mobile-lite .auth-wrap .user-menu,
html.mobile-lite .modal-overlay,
html.mobile-lite .modal{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.mobile-lite .nav-open .site-nav,
html.mobile-lite .site-nav{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:rgba(6,4,16,.96);
}
html.mobile-lite .box-text .heading,
html.mobile-lite .box-hero .title{ animation:none; }
html.mobile-lite[data-theme="halloween"] .fog{
  filter:none;
  opacity:.28;
  animation:none !important;
}
html.mobile-lite[data-theme="halloween"] .moon{ animation:none !important; }
html.mobile-lite[data-theme="halloween"] .webs{ opacity:.7; }
html.mobile-lite #fx{ opacity:.85; }

/* Ghi chú IP (bong bóng kính mờ, góc trái) */
.ip-note{ display:flex; align-items:flex-start; gap:10px; max-width:520px; margin:18px auto 0 0; padding:10px 16px; text-align:left; font-size:14px; font-weight:600; color:#ffe2bd; border-radius:18px 18px 18px 4px; background:rgba(255,138,31,.12); border:1px solid rgba(255,138,31,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 8px 28px rgba(0,0,0,.35); }
@media (max-width:640px){ .ip-note{ max-width:none; margin-right:0; } }