@layer components{.u021{--k:.34;background:0 0;border:0;border-radius:999px;flex-shrink:0;align-items:center;gap:12px;padding:0;display:inline-flex;position:relative}.u021:focus-visible{outline:2px solid var(--ux-accent);outline-offset:5px}.u021-gon:after{content:"";position:absolute;inset:-8px 0}.u021-phai{align-items:center;gap:12px;display:inline-flex}.u021-khung{width:calc(224px * var(--k));height:calc(94px * var(--k));flex-shrink:0;display:block;position:relative}.u021-khung>.u021-sw{transform:scale(var(--k));transform-origin:0 0;position:absolute;top:0;left:0}.u021-sw{isolation:isolate;width:224px;height:94px;transition:box-shadow .8s var(--ux-ease);background:linear-gradient(#0072ce,#0054a6);border:0;border-radius:999px;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 4px 10px #070e1e47,0 18px 34px -18px #0054a6b3}.u021-sw:before{content:"";z-index:0;opacity:0;transition:opacity .8s var(--ux-ease);background:linear-gradient(#070e1e,#0d1729);position:absolute;inset:0}.u021.is-night .u021-sw:before{opacity:1}.u021.is-night .u021-sw{box-shadow:inset 0 4px 10px #00000080,inset 0 0 0 3px #ffffff29,0 18px 34px -18px #070e1ee6}.u021-halo{z-index:1;width:0;height:0;transition:transform .9s var(--ux-spring);position:absolute;top:47px;left:47px}.u021-halo i{background:#ffffff1f;border-radius:50%;position:absolute}.u021-halo i:first-child{width:130px;height:130px;margin:-65px}.u021-halo i:nth-child(2){width:176px;height:176px;margin:-88px}.u021-halo i:nth-child(3){width:222px;height:222px;margin:-111px}.u021.is-night .u021-halo{transform:translate(130px)}.u021-knob{z-index:3;width:78px;height:78px;transition:transform .9s var(--ux-spring);background:radial-gradient(circle at 35% 30%,#fff8d6,#ffe27a 45%,#ffcb45);border-radius:50%;position:absolute;top:8px;left:8px;overflow:hidden;box-shadow:0 6px 14px -4px #8c500059,inset -4px -6px 10px #c86e0038,inset 4px 4px 8px #ffffff80}.u021-moon{opacity:0;transition:transform .8s var(--ux-ease),opacity .4s var(--ux-ease);background:#e2e8f0;border-radius:50%;position:absolute;inset:0;transform:translate(100%)}.u021-moon i{background:#cbd5e1;border-radius:50%;position:absolute}.u021-moon i:first-child{width:20px;height:20px;top:16px;left:20px}.u021-moon i:nth-child(2){width:14px;height:14px;top:40px;left:46px}.u021-moon i:nth-child(3){width:9px;height:9px;top:48px;left:24px}.u021.is-night .u021-knob{transform:translate(130px)rotate(200deg)}.u021.is-night .u021-moon{opacity:1;transform:none}.u021-clouds{z-index:2;transition:transform .8s var(--ux-ease),opacity .6s var(--ux-ease);position:absolute;inset:0}.u021-clouds i{background:#fff;border-radius:999px;position:absolute}.u021-clouds i:first-child{width:120px;height:56px;bottom:-18px;right:-10px;box-shadow:-46px 8px 0 -6px #fff,-80px 18px 0 -10px #fff}.u021-clouds i:nth-child(2){z-index:-1;background:#dbeafe;width:96px;height:52px;bottom:-30px;right:20px;box-shadow:-44px 6px 0 -8px #dbeafe}.u021.is-night .u021-clouds{opacity:0;transform:translateY(80px)}.u021-stars{z-index:1;opacity:0;transition:transform .8s var(--ux-ease),opacity .6s var(--ux-ease);position:absolute;inset:0;transform:translateY(-30px)}.u021-stars i{background:#fff;border-radius:50%;width:4px;height:4px;animation:2.4s ease-in-out infinite u021-tw;position:absolute;box-shadow:0 0 6px #fff}.u021.is-night .u021-stars{opacity:1;transform:none}.u021:not(.is-night) .u021-stars i,.u021:not(.is-thay) .u021-stars i{animation-play-state:paused}@keyframes u021-tw{50%{opacity:.3;transform:scale(.6)}}.u021-lab{text-align:center;letter-spacing:-.02em;width:200px;height:24px;margin:0;font-size:16px;font-weight:720;position:relative;overflow:hidden}.u021-lab span{transition:transform .55s var(--ux-spring),opacity .3s var(--ux-ease);line-height:24px;position:absolute;top:0;left:0;right:0}.u021-lab span+span{opacity:0;transform:translateY(100%)}.u021.is-night .u021-lab span:first-child{opacity:0;transform:translateY(-100%)}.u021.is-night .u021-lab span+span{opacity:1;transform:none}.u021-phai .u021-lab{text-align:right;width:96px;color:var(--ux-ink-2);font-size:14px;display:block}}
@layer components{::view-transition-old(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){mix-blend-mode:normal;animation:none}.dark::view-transition-old(root){z-index:1}.dark::view-transition-new(root){z-index:2;clip-path:circle(0px at var(--u219-cx,50%) var(--u219-cy,24px));animation:.65s cubic-bezier(.65,0,.35,1) forwards u219-loang}html:not(.dark)::view-transition-new(root){z-index:1}html:not(.dark)::view-transition-old(root){z-index:2;clip-path:circle(var(--u219-r,150vmax) at var(--u219-cx,50%) var(--u219-cy,24px));animation:.65s cubic-bezier(.65,0,.35,1) forwards u219-thu}::view-transition-group(u021-dang-doi){animation:none}::view-transition-new(u021-dang-doi){animation:none}::view-transition-old(u021-dang-doi){display:none}@keyframes u219-loang{to{clip-path:circle(var(--u219-r,150vmax) at var(--u219-cx,50%) var(--u219-cy,24px))}}@keyframes u219-thu{to{clip-path:circle(0px at var(--u219-cx,50%) var(--u219-cy,24px))}}@media (prefers-reduced-motion:reduce){::view-transition-old(root){clip-path:none;animation:none}::view-transition-new(root){clip-path:none;animation:none}}}