/* GENUP Premium Surface Layer
   Workspace-only visual layer. Does not redefine backend/data contracts. */
:root{--premium-radius:var(--gu-radius-lg);}

html{background:var(--gu-surface-0)}
body{
  background:
    radial-gradient(1200px 700px at 70% -20%,rgba(69,112,255,.11),transparent 58%),
    radial-gradient(900px 560px at 20% 10%,rgba(238,43,51,.10),transparent 60%),
    var(--gu-surface-0);
}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(96,165,250,.72);
  outline-offset:3px;
}

aside{
  background:var(--gu-surface-1);
  box-shadow:24px 0 70px rgba(0,0,0,.14);
}

header{
  background:var(--gu-surface-1)!important;
  border-bottom:1px solid rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
}

.hero{
  padding-top:44px!important;
  padding-bottom:40px!important;
}
.hero:before{
  width:min(1100px,95vw)!important;
  height:720px!important;
  opacity:.96;
}
.hero .badge{
  background:rgba(255,255,255,.055)!important;
  border-color:transparent;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
}
.hero h1.to{
  max-width:1000px;
  font-size:clamp(38px,5vw,72px)!important;
  letter-spacing:-.025em!important;
  text-shadow:0 10px 60px rgba(0,0,0,.45);
}
.hero .duoi{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.wrap{width:100%;min-width:0;max-width:1540px;margin-inline:auto}

.apps2{
  gap:22px!important;
  align-items:stretch;
}
.c2{
  min-height:330px!important;
  border-radius:var(--premium-radius)!important;
  border-color:var(--gu-border)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,filter .24s ease!important;
}
.c2:before{
  background:
    linear-gradient(180deg,rgba(3,5,8,.12) 0%,rgba(3,5,8,.72) 54%,rgba(3,5,8,.96) 100%),
    var(--bg)!important;
  background-size:cover!important;
  background-position:center!important;
}
.c2:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(130deg,rgba(255,255,255,.07),transparent 28%),
    radial-gradient(520px 240px at 12% 5%,rgba(96,165,250,.10),transparent 62%);
}
.c2:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}
.c2 .c2t{
  max-width:15ch;
  font-size:clamp(26px,2.6vw,42px)!important;
  line-height:.98!important;
  letter-spacing:-.025em!important;
  text-wrap:balance;
}
.c2 .c2p{
  max-width:48ch;
  color:var(--gu-text-tren-toi-2)!important;
  font-size:var(--gu-fs-mo-ta)!important;
  line-height:1.55!important;
}
.c2 .gach{
  width:48px!important;
  height:3px!important;
  border-radius:999px;
  box-shadow:0 0 28px rgba(238,43,51,.5);
}
.c2 .ynho{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  align-items:flex-end;
}
.c2 .ynho>i{
  min-height:34px;
  padding:7px 9px!important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(3,5,8,.42);
  backdrop-filter:blur(8px);
}
.c2 .sapra{
  background:var(--status-warning-nen)!important;
  border:1px solid var(--status-warning-vien);
  color:var(--gu-chu-do)!important;
  border-radius:999px!important;
  padding:6px 10px!important;
}

.bang{
  border-radius:24px!important;
  border-color:var(--gu-border)!important;
  box-shadow:var(--gu-shadow-2);
}
.bang.zanh,.bang.xanh{
  min-height:250px;
  border:1px solid rgba(96,165,250,.20)!important;
  background-color:var(--gu-surface-1)!important;
}
.bang.xanh .bt{
  font-size:clamp(30px,4vw,58px)!important;
  line-height:.98!important;
  letter-spacing:-.02em!important;
}
.bang.xanh .bnut{
  border-radius:14px!important;
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}

.muoi-he{
  box-shadow:var(--gu-shadow-2);
}
.muoi-he .ds-he a,.muoi-he .ds-he span.he{
  border-color:rgba(255,255,255,.10)!important;
  /* Luồng B 28/09: khối 10 hệ LUÔN TỐI ở cả hai nền, chữ trắng — --gu-surface-1 đổi sang #F7F9FC ở nền sáng ⇒ chữ trắng
     trên nền trắng (đo tương phản 1,05, 10 ô không đọc được). Dùng bề mặt luôn tối. */
  background:var(--gu-be-mat-toi)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.muoi-he .ds-he a:hover{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.42)!important;
}

.thanh-tron button{
  border-radius:14px!important;
  min-height:46px;
  box-shadow:0 14px 36px rgba(219,25,32,.18);
}

@media(max-width:1180px){
  .c2{min-height:310px!important}
}
@media(max-width:720px){
  .apps2{grid-template-columns:1fr!important}
  .c2{min-height:300px!important;padding:22px!important}
  .c2 .c2t{font-size:clamp(28px,9vw,42px)!important}
  .bang.xanh{min-height:320px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}