:root{--g1:#FBF5E9;--g2:#FDE8C8;--g3:#F1E4FA}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--g1:#1d1611;--g2:#2b1f36;--g3:#16282c}}
:root[data-theme="dark"]{--g1:#1d1611;--g2:#2b1f36;--g3:#16282c}
:root[data-pal="navy"]:not([data-theme="dark"]){--g1:#EEF1F6;--g2:#DCE7F7;--g3:#E8E2F7}
body{background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3));background-size:300% 300%;animation:vbg 20s ease infinite;background-attachment:fixed}
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}
body::before{width:46vmax;height:46vmax;left:-12vmax;top:-10vmax;background:#ffcf7a;animation:vf1 16s ease-in-out infinite alternate}
body::after{width:40vmax;height:40vmax;right:-10vmax;bottom:-12vmax;background:#c9a5ff;animation:vf2 19s ease-in-out infinite alternate}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{background:#7a4a10;opacity:.35}:root:not([data-theme="light"]) body::after{background:#3b2a78;opacity:.35}}
:root[data-theme="dark"] body::before{background:#7a4a10;opacity:.35}:root[data-theme="dark"] body::after{background:#3b2a78;opacity:.35}
header{background:color-mix(in srgb,var(--bg) 82%,transparent)!important;backdrop-filter:blur(10px)}
.card,details{box-shadow:0 6px 22px rgba(90,60,10,.10);transition:transform .2s,box-shadow .2s}
.card:hover,details:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(90,60,10,.16)}
button,.btn{transition:transform .15s,box-shadow .15s,background .2s}
button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.14)}button:active{transform:scale(.97)}
button.p,.p,button.on{background:linear-gradient(135deg,#9A6A12,#e0a02f);color:#fff;border-color:transparent}
h1{background:linear-gradient(90deg,#9A6A12,#d9622b,#7a4fd6);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb{height:6px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden;margin-top:12px}.pb i{display:block;height:100%;background:linear-gradient(90deg,#e0a02f,#d9622b);border-radius:99px;transition:width .4s}
@keyframes vbg{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes vf1{to{transform:translate(8vmax,6vmax) scale(1.15)}}@keyframes vf2{to{transform:translate(-8vmax,-5vmax) scale(1.2)}}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* fix: nut dang chon (.b.on) bi chu vang tren nen vang */
button.b.on{color:#fff;border-color:transparent;text-shadow:0 1px 1px rgba(0,0,0,.25)}