/* luu-tru.html: so do kho tai lieu chung o dau trang + tinh chinh bang gia, bang so sanh */

/* Khung so do */
.hub{position:relative;height:30rem;max-width:62rem;margin:var(--s5) auto 0;overflow:hidden;border:1px solid var(--c-line2);border-radius:var(--R);background:linear-gradient(165deg,#12171380,#070908) ,#0a0d0b;box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 120px rgba(150,240,90,.07);isolation:isolate}
.hub::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 34% 52% at 50% 44%,rgba(180,249,111,.16),transparent 70%),
  repeating-radial-gradient(circle at 50% 44%,rgba(255,255,255,.045) 0 1px,transparent 1px 4.5rem),
  linear-gradient(165deg,#131815,#080a09)}
.hub::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 70% at 50% 44%,transparent 55%,rgba(5,7,6,.9))}

/* Duong noi + goi tep chay */
.hub__ln{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hub__ln line{stroke:rgba(255,255,255,.17);stroke-width:1}
.hub__pk{fill:var(--c-ac);opacity:0;animation:hubpk 5.8s var(--d,0s) cubic-bezier(.45,0,.25,1) infinite}
.hub__pk--t{animation-name:hubpkt;animation-delay:calc(var(--d,0s) + .11s)}
.hub__pk--in{animation-direction:reverse}
@keyframes hubpk{0%{opacity:0;transform:translate(0,0)}6%{opacity:1}44%{opacity:1;transform:translate(var(--dx),var(--dy))}50%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes hubpkt{0%{opacity:0;transform:translate(0,0)}6%{opacity:.4}44%{opacity:.4;transform:translate(var(--dx),var(--dy))}50%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}

/* Nut giua: kho tai lieu */
.hub__c{position:absolute;left:50%;top:44%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:10rem;height:10rem;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 35%,#1a2419,#0c100d 70%);box-shadow:0 0 0 1px rgba(180,249,111,.28),0 0 60px rgba(180,249,111,.18),inset 0 0 40px rgba(0,0,0,.6);text-align:center}
.hub__c::before{content:"";position:absolute;inset:-2.5rem;border:1px solid rgba(180,249,111,.14);border-radius:50%}
.hub__ring{position:absolute;inset:-.75rem;width:calc(100% + 1.5rem);height:calc(100% + 1.5rem);animation:hubring 48s linear infinite}
.hub__ring circle{fill:none;stroke:var(--c-ac);stroke-width:1.2;stroke-dasharray:5 11;opacity:.55}
@keyframes hubring{to{transform:rotate(360deg)}}
.hub__c svg.ic{width:1.75rem;height:1.75rem;margin-bottom:.375rem;stroke:var(--c-ac);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hub__c b{display:block;font:600 1.0625rem/1.2 var(--font-d);letter-spacing:-.01em;color:var(--c-ink)}
.hub__c span{display:block;margin-top:.125rem;font-size:.75rem;color:var(--c-ink2)}

/* Nut phong ban */
.hub__n:nth-of-type(2){--x:50%;--y:11%}
.hub__n:nth-of-type(3){--x:21%;--y:25%}
.hub__n:nth-of-type(4){--x:79%;--y:25%}
.hub__n:nth-of-type(5){--x:16%;--y:65%}
.hub__n:nth-of-type(6){--x:84%;--y:65%}
.hub__n{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:.625rem;padding:.5rem .875rem .5rem .625rem;background:rgba(12,15,13,.82);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.4);white-space:nowrap;backdrop-filter:blur(6px)}
.hub__n i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;background:var(--c-acsoft);flex:none}
.hub__n i svg{width:1rem;height:1rem;stroke:var(--c-ac);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hub__n b{display:block;font-size:.875rem;font-weight:600;line-height:1.2;color:var(--c-ink)}
.hub__n span{display:block;margin-top:.125rem;font-size:.6875rem;line-height:1.2;color:var(--c-ink2)}
.hub__n span.ok{color:var(--c-ac)}

/* Hang thiet bi */
.hub__d{position:absolute;left:0;right:0;bottom:1.5rem;display:flex;justify-content:center;gap:.75rem;margin:0;padding:0 1rem;list-style:none}
.hub__d li{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem .5rem .625rem;background:rgba(12,15,13,.82);border:1px solid rgba(255,255,255,.1);border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.4);white-space:nowrap}
.hub__d svg{width:1.125rem;height:1.125rem;stroke:var(--c-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hub__d b{font-size:.8125rem;font-weight:600;color:var(--c-ink)}
.hub__d span{display:inline-flex;align-items:center;gap:.375rem;font-size:.6875rem;color:var(--c-ink2)}
.hub__d span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-ac);animation:hubdot 2.4s var(--d,0s) ease-in-out infinite}
@keyframes hubdot{50%{opacity:.3}}

.hub__m{position:absolute;right:1rem;top:.875rem;margin:0;font-size:.6875rem;color:var(--c-ink2);opacity:.8}

/* Dung chay khi khuat man hinh hoac nguoi dung tat chuyen dong */
.js .hub:not(.hub--run) *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hub *,.hub *::before{animation:none!important}.hub__pk{opacity:0}}

/* Dien thoai: so do dung, nut bam sat mep, hang thiet bi gon */
@media (max-width:60rem){
  .hub{height:28rem;margin-top:var(--s4);border-radius:14px}
  .hub::before{background:radial-gradient(ellipse 48% 30% at 50% 40%,rgba(180,249,111,.16),transparent 70%),repeating-radial-gradient(circle at 50% 40%,rgba(255,255,255,.045) 0 1px,transparent 1px 3.75rem),linear-gradient(165deg,#131815,#080a09)}
  .hub::after{background:radial-gradient(ellipse 90% 60% at 50% 40%,transparent 55%,rgba(5,7,6,.9))}
  .hub__c{top:40%;width:7.5rem;height:7.5rem}
  .hub__c::before{inset:-1.5rem}
  .hub__n:nth-of-type(2){--x:50%;--y:10%}
  .hub__n:nth-of-type(3){--x:24%;--y:22%}
  .hub__n:nth-of-type(4){--x:76%;--y:22%}
  .hub__n:nth-of-type(5){--x:24%;--y:61%}
  .hub__n:nth-of-type(6){--x:76%;--y:61%}
  .hub__c b{font-size:.9375rem}
  .hub__n{gap:.5rem;padding:.375rem .625rem .375rem .5rem;border-radius:10px}
  .hub__n i{width:1.75rem;height:1.75rem}
  .hub__n b{font-size:.8125rem}
  .hub__d{bottom:1rem;gap:.375rem;padding:0 .75rem}
  .hub__d li{padding:.375rem .625rem .375rem .5rem;gap:.375rem}
  .hub__d span{display:none}
  .hub__m{right:.75rem;top:.625rem}
}

/* Bang gia: the de xuat noi hon, hover nhe */
.stc{transition:border-color .2s var(--ease),transform .2s var(--ease)}
.stc:hover{border-color:var(--c-line2);transform:translateY(-3px)}
.stc.hot{box-shadow:0 0 0 1px var(--c-ac),0 24px 60px rgba(0,0,0,.45),0 0 70px rgba(180,249,111,.1)}
.stc.hot:hover{border-color:var(--c-ac)}
.stc__g{font-family:var(--font-d)}

/* Bang so sanh: dong khung, cot cua minh noi bat */
.cmpw{border:1px solid var(--c-line);border-radius:var(--R);background:var(--c-1)}
.cmp{min-width:44rem}
.cmp th,.cmp td{padding:1rem 1.25rem}
.cmp thead th{color:var(--c-ink);background:var(--c-2)}
.cmp thead th:nth-child(2){color:var(--c-acink);background:var(--c-ac)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.y{background:rgba(180,249,111,.07)}
.cmp__n{margin:0;padding:var(--s2) 1.25rem var(--s3)}
@media (max-width:60rem){.cmp th,.cmp td{padding:.875rem 1rem}.cmpw{border-radius:14px}.stc:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.stc{transition:none}.stc:hover{transform:none}}