/* ==========================================================
   GameIOS Unified UI System 2026
   - Responsive mobile/desktop
   - System font stack: no external font dependency, Vietnamese-safe
   ========================================================== */
:root{
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --font-heading: var(--font-body);
  --ui-radius: 18px;
  --ui-radius-sm: 12px;
  --ui-line: rgba(148,163,184,.16);
  --ui-card: rgba(15,23,42,.78);
  --ui-card-strong: rgba(13,17,23,.92);
  --ui-shadow: 0 18px 60px rgba(0,0,0,.35);
  --ui-cyan: var(--neon-cyan,#00f0ff);
  --ui-purple: var(--neon-purple,#a855f7);
  --ui-pink: var(--neon-pink,#ec4899);
  --ui-gradient: linear-gradient(135deg,var(--ui-cyan),var(--ui-purple) 52%,var(--ui-pink));
}
html{font-family:var(--font-body);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--font-body)!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font:inherit;}
img,svg,video,canvas{max-width:100%;height:auto;}
a{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:2px solid color-mix(in srgb,var(--ui-cyan) 80%,white);outline-offset:3px;border-radius:10px;}
::selection{background:rgba(0,240,255,.25);color:#fff;}

.ui-card,.admin-content .ui-card{position:relative;border:1px solid var(--ui-line);background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,6,23,.72));border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);}
.ui-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(0,240,255,.42),rgba(168,85,247,.22),rgba(236,72,153,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8;}
.ui-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8;}
.ui-eyebrow span{width:34px;height:2px;border-radius:99px;background:var(--ui-gradient);display:inline-block;}
.ui-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .68rem;border-radius:999px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.045);color:#cbd5e1;font-size:.78rem;font-weight:700;}
.ui-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem;}
.ui-section{padding-block:clamp(2rem,5vw,4.5rem);}
.ui-container{width:min(100% - 1.5rem,1180px);margin-inline:auto;}
.btn-primary,.btn-secondary,.ui-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:14px;font-weight:800;text-decoration:none!important;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease;}
.btn-primary,.ui-btn-primary{padding:.78rem 1.1rem;color:#001018!important;background:var(--ui-gradient);box-shadow:0 12px 32px rgba(0,240,255,.18);}
.btn-secondary,.ui-btn-secondary{padding:.78rem 1.1rem;color:#e2e8f0!important;background:rgba(255,255,255,.055);border:1px solid rgba(148,163,184,.18);}
.btn-primary:hover,.btn-secondary:hover,.ui-btn:hover{transform:translateY(-2px);filter:brightness(1.06);}

/* Public layout balancing */
.navbar{backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);}
.nav-link,.mobile-nav-item{touch-action:manipulation;}
.mobile-menu{max-height:min(78vh,680px);overflow:auto;-webkit-overflow-scrolling:touch;}
.mobile-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.search-results,.nav-dropdown{max-width:calc(100vw - 1rem);}
.footer{overflow:hidden;}

/* Cards across pages */
.game-card,.category-card,.product-card,.package-card,.blog-card,.ticket-card,.link-unlock-card{border-radius:var(--ui-radius);border:1px solid rgba(148,163,184,.14);background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(2,6,23,.72));box-shadow:0 16px 42px rgba(0,0,0,.28);}
.game-card:hover,.category-card:hover,.product-card:hover,.package-card:hover,.blog-card:hover{border-color:rgba(0,240,255,.36);box-shadow:0 18px 55px rgba(0,240,255,.08),0 18px 55px rgba(0,0,0,.36);}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{max-width:100%;}
input::placeholder,textarea::placeholder{color:#64748b;}
@media (max-width:640px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{font-size:16px!important;}
  .btn-primary,.btn-secondary,.ui-btn{width:100%;min-height:46px;}
  .shophack-toast{min-width:0!important;max-width:calc(100vw - 1.5rem)!important;width:calc(100vw - 1.5rem)!important;}
  #toast-container{top:.75rem!important;right:.75rem!important;left:.75rem!important;}
}

/* Admin responsiveness */
.admin-content{width:100%;max-width:100vw;}
.admin-content table{width:100%;border-collapse:separate;border-spacing:0;}
.admin-content th,.admin-content td{vertical-align:middle;}
.admin-content :where(.overflow-x-auto){-webkit-overflow-scrolling:touch;}
@media (max-width:768px){
  .admin-content{padding:14px!important;}
  .admin-topbar h1{font-size:1rem!important;max-width:58vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .admin-content table{display:block;overflow-x:auto;white-space:nowrap;border-radius:14px;}
  .admin-content .grid{gap:.85rem!important;}
  .admin-content .rounded-2xl{border-radius:16px!important;}
  .admin-content .p-5{padding:1rem!important;}
  .admin-content .text-3xl{font-size:1.55rem!important;}
}
@media (max-width:380px){
  .admin-sidebar{width:88vw!important;}
  .mobile-nav-grid{grid-template-columns:1fr;}
}

/* Content from editor/blog */
.prose,.blog-content,.post-content,.content-body{overflow-wrap:anywhere;}
.prose iframe,.blog-content iframe,.post-content iframe{max-width:100%;border-radius:16px;}
.prose table,.blog-content table,.post-content table{display:block;overflow-x:auto;white-space:nowrap;}

/* Reduce motion for accessibility/performance */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}}

/* ==========================================================
   10 theme presets selected from Admin > Cài đặt > Giao diện
   Font stack is intentionally system-only to keep Vietnamese stable.
   ========================================================== */
html[data-theme]{
  font-family:var(--font-body)!important;
  --theme-grid-opacity:.045;
  --theme-glow-opacity:.18;
  --theme-card-alpha:.80;
  --theme-blur:18px;
}
html[data-theme] body{
  color:#dbeafe;
  background-color:var(--dark-bg)!important;
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--neon-cyan) 26%, transparent), transparent 34%),
    radial-gradient(circle at 86% 16%, color-mix(in srgb,var(--neon-purple) 22%, transparent), transparent 38%),
    radial-gradient(circle at 50% 92%, color-mix(in srgb,var(--neon-pink) 14%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb,var(--dark-bg) 94%, black), var(--dark-bg));
  background-attachment:fixed;
}
html[data-theme] .navbar,
html[data-theme] .mobile-bottom-nav,
html[data-theme] .admin-topbar{
  background:color-mix(in srgb,var(--dark-surface) 88%, transparent)!important;
  border-color:color-mix(in srgb,var(--dark-border) 76%, transparent)!important;
}
html[data-theme] .admin-sidebar,
html[data-theme] .sidebar-logo{
  background:linear-gradient(180deg,var(--dark-card) 0%,var(--dark-surface) 100%)!important;
  border-color:color-mix(in srgb,var(--dark-border) 78%, transparent)!important;
}
html[data-theme] .sidebar-link.active{
  color:var(--neon-cyan)!important;
  background:color-mix(in srgb,var(--neon-cyan) 12%, transparent)!important;
  box-shadow:inset 3px 0 0 var(--neon-cyan)!important;
}
html[data-theme] .sidebar-collapse-btn:hover,
html[data-theme] .admin-pagination a:hover,
html[data-theme] .admin-pagination .active{
  border-color:var(--neon-cyan)!important;
  color:var(--neon-cyan)!important;
}
html[data-theme] .stat-card,
html[data-theme] .bg-dark-card,
html[data-theme] .game-card,
html[data-theme] .category-card,
html[data-theme] .product-card,
html[data-theme] .package-card,
html[data-theme] .blog-card,
html[data-theme] .ticket-card,
html[data-theme] .link-unlock-card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--dark-card) 92%, transparent),color-mix(in srgb,var(--dark-surface) 86%, transparent))!important;
  border-color:color-mix(in srgb,var(--dark-border) 74%, transparent)!important;
}
html[data-theme] .text-gradient,
html[data-theme] .gradient-text{
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple),var(--neon-pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
html[data-theme] .bg-gradient-to-r.from-neon-cyan,
html[data-theme] .btn-primary,
html[data-theme] .ui-btn-primary{
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple),var(--neon-pink))!important;
}
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea{
  font-family:var(--font-body)!important;
}

html[data-theme="neon-cyber"]{--ui-radius:18px;--theme-glow-opacity:.20;--theme-grid-opacity:.050;}
html[data-theme="midnight-esport"]{--ui-radius:16px;--theme-glow-opacity:.18;--ui-shadow:0 18px 58px rgba(15,23,42,.46);}
html[data-theme="emerald-arcade"]{--ui-radius:20px;--theme-glow-opacity:.11;--ui-shadow:0 18px 52px rgba(16,185,129,.10),0 18px 60px rgba(0,0,0,.34);}
html[data-theme="royal-violet"]{--ui-radius:24px;--theme-glow-opacity:.22;--ui-shadow:0 20px 70px rgba(139,92,246,.14),0 18px 60px rgba(0,0,0,.34);}
html[data-theme="sunset-rush"]{--ui-radius:18px;--theme-glow-opacity:.20;--ui-shadow:0 18px 62px rgba(249,115,22,.12),0 18px 60px rgba(0,0,0,.36);}
html[data-theme="ocean-glass"]{--ui-radius:22px;--theme-glow-opacity:.19;--theme-blur:22px;--ui-shadow:0 18px 62px rgba(34,211,238,.12),0 18px 60px rgba(0,0,0,.36);}
html[data-theme="matrix-green"]{--ui-radius:14px;--theme-glow-opacity:.15;--ui-shadow:0 18px 58px rgba(34,197,94,.12),0 18px 60px rgba(0,0,0,.36);}
html[data-theme="ruby-black"]{--ui-radius:17px;--theme-glow-opacity:.18;--ui-shadow:0 18px 62px rgba(244,63,94,.14),0 18px 60px rgba(0,0,0,.38);}
html[data-theme="gold-premium"]{--ui-radius:15px;--theme-glow-opacity:.11;--ui-shadow:0 18px 62px rgba(250,204,21,.12),0 18px 60px rgba(0,0,0,.38);}
html[data-theme="ice-carbon"]{--ui-radius:16px;--theme-glow-opacity:.14;--ui-shadow:0 18px 58px rgba(147,197,253,.10),0 18px 60px rgba(0,0,0,.36);}

html[data-theme="matrix-green"] body{
  background-image:
    radial-gradient(circle at 18% 8%, color-mix(in srgb,var(--neon-cyan) 22%, transparent), transparent 36%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb,var(--neon-purple) 16%, transparent), transparent 38%),
    radial-gradient(circle at 50% 78%, rgba(34,197,94,.09), transparent 34%),
    linear-gradient(135deg,var(--dark-bg),#020617);
}
html[data-theme="gold-premium"] .btn-primary,
html[data-theme="gold-premium"] .ui-btn-primary,
html[data-theme="gold-premium"] .mobile-bottom-center div{color:#1f1600!important;}
html[data-theme="ice-carbon"] .btn-primary,
html[data-theme="ice-carbon"] .ui-btn-primary{color:#06111f!important;}
html[data-theme="sunset-rush"] .btn-primary,
html[data-theme="sunset-rush"] .ui-btn-primary{color:#1f0707!important;}
html[data-theme="emerald-arcade"] .btn-primary,
html[data-theme="emerald-arcade"] .ui-btn-primary,
html[data-theme="matrix-green"] .btn-primary,
html[data-theme="matrix-green"] .ui-btn-primary{color:#00180f!important;}


/* Ambient animated background: replaces harsh striped patterns with soft motion */
html[data-theme] body{
  position:relative;
  overflow-x:hidden;
}
.theme-ambient-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.theme-ambient-bg span{
  position:absolute;
  border-radius:999px;
  filter:blur(44px);
  opacity:.12;
  will-change:transform,opacity;
  mix-blend-mode:normal;
  animation:uiFloatBlob 18s ease-in-out infinite;
}
.theme-ambient-bg span:nth-child(1){
  width:34vw;
  height:34vw;
  min-width:260px;
  min-height:260px;
  left:-6vw;
  top:10vh;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--neon-cyan) 70%, white 8%), transparent 68%);
  animation-duration:20s;
}
.theme-ambient-bg span:nth-child(2){
  width:30vw;
  height:30vw;
  min-width:220px;
  min-height:220px;
  right:-8vw;
  top:6vh;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--neon-purple) 72%, white 6%), transparent 70%);
  animation-duration:24s;
  animation-delay:-7s;
}
.theme-ambient-bg span:nth-child(3){
  width:38vw;
  height:38vw;
  min-width:300px;
  min-height:300px;
  left:28vw;
  bottom:-14vh;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--neon-pink) 58%, white 4%), transparent 72%);
  animation-duration:28s;
  animation-delay:-11s;
}
@keyframes uiFloatBlob{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.12;}
  25%{transform:translate3d(4vw,-2vh,0) scale(1.08);opacity:.18;}
  50%{transform:translate3d(-3vw,3vh,0) scale(.96);opacity:.14;}
  75%{transform:translate3d(3vw,1vh,0) scale(1.04);opacity:.19;}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.12;}
}
body > *{
  position:relative;
  z-index:1;
}
@media (max-width: 640px){
  .theme-ambient-bg span{
    filter:blur(28px);
    opacity:.11;
  }
  .theme-ambient-bg span:nth-child(1){width:58vw;height:58vw;left:-18vw;top:12vh;}
  .theme-ambient-bg span:nth-child(2){width:52vw;height:52vw;right:-22vw;top:8vh;}
  .theme-ambient-bg span:nth-child(3){width:70vw;height:70vw;left:12vw;bottom:-10vh;}
}
@media (prefers-reduced-motion: reduce){
  .theme-ambient-bg span{animation:none;opacity:.12;}
}


/* Final comfort override: remove any remaining square/diagonal grid layers */
html[data-theme] body.bg-grid{
  background-image:
    radial-gradient(circle at 18% 12%, color-mix(in srgb,var(--neon-cyan) 12%, transparent), transparent 36%),
    radial-gradient(circle at 86% 18%, color-mix(in srgb,var(--neon-purple) 10%, transparent), transparent 40%),
    radial-gradient(circle at 50% 88%, color-mix(in srgb,var(--neon-pink) 7%, transparent), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb,var(--dark-bg) 96%, black), var(--dark-bg))!important;
  background-size:auto!important;
}
html[data-theme] body::before{
  background:
    radial-gradient(circle at 18% 28%, color-mix(in srgb,var(--neon-cyan) 12%, transparent), transparent 35%),
    radial-gradient(circle at 82% 22%, color-mix(in srgb,var(--neon-purple) 10%, transparent), transparent 38%),
    radial-gradient(circle at 48% 78%, color-mix(in srgb,var(--neon-pink) 7%, transparent), transparent 44%)!important;
  background-size:auto!important;
  transform:none!important;
  filter:blur(30px);
  opacity:.62;
}


/* Admin Landing Page: chống bị che/lấp bởi sidebar, topbar hoặc khối sticky */
.admin-main{
  min-width:0;
  max-width:100vw;
}
.admin-content{
  position:relative;
  z-index:1;
  min-width:0;
  max-width:100%;
}
.admin-topbar{
  z-index:50!important;
}
.admin-sidebar{
  z-index:70!important;
}
.sidebar-overlay{
  z-index:60!important;
}
.landing-admin-page,
.landing-admin-page *,
.landing-admin-form,
.landing-admin-main,
.landing-admin-aside{
  box-sizing:border-box;
}
.landing-admin-page{
  position:relative;
  z-index:1;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
}
.landing-admin-form{
  width:100%;
  max-width:100%;
  min-width:0;
  align-items:start;
}
.landing-admin-main,
.landing-admin-aside{
  width:100%;
  max-width:100%;
  min-width:0;
  position:relative;
  z-index:1;
}
.landing-admin-page section,
.landing-admin-card,
.landing-button-row,
.landing-guide-row{
  position:relative;
  z-index:1;
  max-width:100%;
  min-width:0;
  overflow:visible;
}
.landing-admin-page input,
.landing-admin-page select,
.landing-admin-page textarea{
  width:100%;
  min-width:0;
  max-width:100%;
}
.landing-admin-page textarea{
  overflow:auto;
}
.landing-admin-page .grid,
.landing-admin-page .flex{
  min-width:0;
}
.landing-admin-page .sticky,
.landing-admin-aside .sticky{
  position:static!important;
  top:auto!important;
}
@media (min-width:1024px){
  .admin-main{
    width:calc(100vw - 260px);
  }
  body.sidebar-collapsed .admin-main{
    width:calc(100vw - 72px);
  }
}
@media (max-width:1023px){
  .admin-main{
    width:100%!important;
    margin-left:0!important;
  }
  .admin-content{
    padding:1rem!important;
  }
  .landing-admin-page .rounded-2xl{
    border-radius:16px!important;
  }
  .landing-admin-page .p-5{
    padding:1rem!important;
  }
}
@media (max-width:640px){
  .landing-admin-page .inline-flex,
  .landing-admin-page button,
  .landing-admin-page a[class*="px-"]{
    max-width:100%;
  }
  .landing-admin-page .text-2xl,
  .landing-admin-page .text-3xl{
    line-height:1.2;
  }
}