/* ==========================================================================
   SOC Hub — LOP "LAB"
   Khung canh mot phong lab ATTT: luoi nen, vet quet, ray do hai ben, vien xanh
   nhap nhay quanh tung khoi, va dau ngam o bon goc khoi.

   Ba nguyen tac, de hoa tiet khong bao gio lam kho doc chu:
   1. Moi hoat anh chi dong vao `opacity` va `transform` (hoac bien da khai bao
      bang @property). Khong hoat anh `box-shadow`, `filter`, `width`, `top` —
      nhung thu bat trinh duyet ve lai layout tung frame.
   2. Hoa tiet nam o lop rieng (`.labfx`, pseudo-element) va luon
      `pointer-events:none`, nen khong bao gio an mat cu bam.
   3. Tat het bang `body.nofx` (nut "Hieu ung neon" trong Cai dat) va tu ha
      xuong muc tinh khi he thong yeu cau giam chuyen dong.

   File nay nap SAU app.css nen moi khai bao o day deu de ghi de co y.
   ========================================================================== */

:root{
  --lab-edge:rgba(78,201,192,.55);      /* vien xanh luc sang nhat */
  --lab-edge-dim:rgba(78,201,192,.16);  /* vien xanh luc luc chim */
  --lab-tick:rgba(78,201,192,.30);      /* vach chia tren ray do */
  --lab-grid:rgba(78,201,192,.05);
  --lab-sheen:rgba(78,201,192,.07);     /* quang sang chay theo con tro */
  --lab-rail:30px;                      /* be ngang ray do hai ben */
  --lab-pulse:3.6s;                     /* nhip tho cua vien */
}

/* ==========================================================================
   1. LOP NEN
   Gop het vao mot phan tu that (`.labfx` trong index.html) thay vi dung
   body::before/::after: mot phan tu rieng cho phep xep nhieu lop doc lap, va
   `contain:strict` cat han no khoi vong tinh layout cua trang.
   ========================================================================== */
.labfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:strict}
.labfx>span{position:absolute;display:block;pointer-events:none}

/* luoi toa do, mo dan xuong duoi */
.lab-grid{inset:0;
  background-image:linear-gradient(var(--lab-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--lab-grid) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 120% 88% at 50% 0%,#000 22%,transparent 80%);
  mask-image:radial-gradient(ellipse 120% 88% at 50% 0%,#000 22%,transparent 80%)}

/* hai quang sang lech mau troi rat cham: trang bot phang ma khong hut mat */
.lab-glow{left:-12vw;right:-12vw;top:-20vh;height:78vh;
  background:radial-gradient(42% 54% at 24% 0%,rgba(78,201,192,.13),transparent 68%),
             radial-gradient(38% 48% at 76% 6%,rgba(147,164,232,.10),transparent 70%);
  animation:labDrift 30s ease-in-out infinite}

/* raster manh nhu man CRT */
.lab-raster{inset:-4px 0;opacity:.45;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.013) 0 1px,transparent 1px 3px);
  animation:labRaster 9s linear infinite}

/* mot dai sang quet tu tren xuong, 18 giay mot luot — cham den muc chi thay
   duoc khi khong doc chu, dung y nghia "he thong dang chay" */
.lab-band{left:0;right:0;height:38vh;top:0;
  background:linear-gradient(180deg,transparent,rgba(78,201,192,.055) 46%,
             rgba(125,249,255,.07) 52%,transparent);
  animation:labBand 18s linear infinite}

/* bon goc toi lai nhu ong kinh may do */
.lab-vig{inset:0;
  background:radial-gradient(128% 112% at 50% 42%,transparent 56%,rgba(0,0,0,.42) 100%)}

/* ---- ray do hai ben ----
   Doc nhu thuoc chia tren canh man hinh may do: vach ngan moi 10px, vach dai
   moi 50px, ca hai neo vao canh TRONG (phia noi dung) chu khong keo het be
   ngang ray — keo het thi no thanh ma vach chu khong con la thuoc.
   Chi hien khi gutter con du rong; duoi 1240px thi noi dung da sat le. */
.lab-ruler{display:none;top:0;bottom:0;width:var(--lab-rail)}
.lab-ruler.l{left:0;border-right:1px solid rgba(78,201,192,.09)}
.lab-ruler.r{right:0;border-left:1px solid rgba(78,201,192,.09)}
.lab-ruler::before{content:"";position:absolute;inset:0;opacity:.34;
  background-image:
    repeating-linear-gradient(to bottom,var(--lab-tick) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(to bottom,var(--lab-edge) 0 1px,transparent 1px 70px);
  background-size:6px 100%,14px 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.lab-ruler.l::before{background-position:right 0 top 0,right 0 top 0}
.lab-ruler.r::before{background-position:left 0 top 0,left 0 top 0}
/* xung chay doc ray: mot vet mo dai, khong phai mot khoi sang */
.lab-ruler::after{content:"";position:absolute;left:0;right:0;height:150px;top:-150px;
  background:linear-gradient(180deg,transparent,rgba(125,249,255,.14) 55%,transparent);
  animation:labRun 9s linear infinite}
.lab-ruler.r::after{animation-delay:-4.5s}

@media (min-width:1240px){.lab-ruler{display:block}}

@keyframes labDrift{0%,100%{transform:translate3d(-4%,0,0) scale(1)}
  50%{transform:translate3d(4%,3%,0) scale(1.1)}}
@keyframes labRaster{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,3px,0)}}
@keyframes labBand{from{transform:translate3d(0,-40vh,0)}to{transform:translate3d(0,100vh,0)}}
@keyframes labRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,100vh,0)}}

/* `main` da duoc nang len z-index 1 trong app.css nen noi dung luon nam tren
   lop nen. Khong dat position cho .top / nav.tabs — chung dang sticky. */
body.nofx .labfx{display:none}

/* ==========================================================================
   2. VACH TIEN DO CUA TRANG
   Dung scroll-driven animation cua CSS, khong dung JS: khong co frame nao bi
   bo va khong co listener scroll nao. Trinh duyet khong ho tro thi lab.js tu
   cap nhat bang bien --labscroll.
   ========================================================================== */
#labtrace{position:fixed;left:0;top:0;height:2px;z-index:60;width:100%;
  transform-origin:0 50%;transform:scaleX(var(--labscroll,0));
  background:linear-gradient(90deg,var(--neon),var(--neon-2) 60%,var(--neon-3));
  box-shadow:0 0 12px -2px var(--neon);pointer-events:none}
@supports (animation-timeline:scroll()){
  #labtrace{animation:labTrace linear;animation-timeline:scroll(root block)}
  @keyframes labTrace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
body.nofx #labtrace{display:none}

/* ==========================================================================
   3. VIEN XANH NHAP NHAY QUANH TUNG KHOI
   Mot vong vien rieng o pseudo-element, chi tho bang `opacity`. Lam truc tiep
   tren `border-color` cua khoi thi moi nhip la mot lan ve lai vien that, va
   mat luon duong ke mau goc khi hieu ung bi tat.
   ========================================================================== */
@keyframes labBreathe{0%,100%{opacity:.14}50%{opacity:.58}}

.card,.wk,.arti,.hand,.out,.gatecard,.scene,.result,.stats-hero{position:relative}

.card::before,.wk::before,.arti::before,.hand::before,.out::after,
.result::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid var(--ring,var(--neon));opacity:.14;pointer-events:none;z-index:1;
  animation:labBreathe var(--lab-pulse) ease-in-out infinite}
.out::after{inset:-1px;border-radius:5px}

/* Le pha cho tung khoi. Khong le pha thi ca trang tho cung mot nhip va thanh
   mot bong den nhay; le pha thi no giong mot gia may do, moi may mot nhip.
   Dung nth-child o CA HAI cap: khoi tren cung cua view, va tung dong trong
   danh sach dai (tuan, artifact, o lam that). */
section.view>*:nth-child(2n)::before{animation-delay:-.9s}
section.view>*:nth-child(3n)::before{animation-delay:-1.8s}
section.view>*:nth-child(5n)::before{animation-delay:-2.7s}
.wk:nth-child(3n+1)::before,.arti:nth-child(3n+1)::before,
.hand:nth-child(3n+1)::before,.card:nth-child(3n+1)::before{animation-delay:-1.2s}
.wk:nth-child(3n+2)::before,.arti:nth-child(3n+2)::before,
.hand:nth-child(3n+2)::before,.card:nth-child(3n+2)::before{animation-delay:-2.4s}
/* Buoc 3 khong chia het cho so cot (3, 4 hay 5 cot) nen song chay cheo qua
   luoi thay vi chay theo tung hang — de nhin hon han. */

/* Danh sach dai 20 tuan: tung dong chi tho rat nhe, de con lai sang han la
   TUAN DANG HOC. Nhip manh nhat phai nam o cho mat can den. */
.wk::before,.grid .card::before{opacity:.09;animation-name:labBreatheSoft}
@keyframes labBreatheSoft{0%,100%{opacity:.08}50%{opacity:.3}}
.wk.cur::before{animation-name:labBreathe;animation-duration:2.8s;animation-delay:0s}
.wk.cur::after{opacity:.5}

/* re chuot vao thi vien sang han va ngung tho: khoi dang duoc chu y thi dung
   yen, de mat bam vao noi dung */
.card:hover::before,.wk:hover::before,.arti:hover::before,.hand:hover::before,
.out:hover::after{animation:none;opacity:.72}

/* khoi da xong thi chuyen sang xanh la, khoi can lam lai thi chuyen sang do —
   mau noi trang thai, khong chi de trang trí */
.hand.ok::before,.gatecard.ok::before{border-color:var(--ok);opacity:.3;animation:none}
.result.pass::before{border-color:var(--ok)}
.result.fail::before{border-color:var(--crit)}

/* ==========================================================================
   TRANG THAI BAI KIEM TRA  (tab Kiem tra va tab Lo trinh)
   Ba trang thai, mot bo mau dung chung:
     .st-todo  chua lam              vang
     .st-pass  lam roi va dat        xanh la
     .st-fail  lam roi, chua dat     do
   `--ring` keo theo ca ba thu mot luc: duong vien that cua khoi, vong tho, va
   dau ngam bon goc — doi mot bien la ca khoi doi mau. Vien that dat o CHINH
   KHOI chu khong o pseudo-element, de khi tat hieu ung (body.nofx) van con
   nhin ra trang thai.
   Khong chi dua vao mau: moi khoi deu co mot the chu kem ky hieu (.stchip),
   cho nguoi phan biet mau kem va cho luc in den trang.
   ========================================================================== */
.st-todo{--ring:var(--warn)}
.st-pass{--ring:var(--ok)}
.st-fail{--ring:var(--crit)}
/* Viet kem `.wk` / `.card` de do DAC HIEU bang `.wk.cur` va `.wk.done` trong
   app.css — hai lop do cung dat border-color, va neu de thua thi tuan dang hoc
   se hien mau teal thay vi mau trang thai cua no. Mau trang thai phai thang:
   do la thu nguoi dung nhin de biet con phai lam gi. */
.wk.st-pass,.wk.st-fail,.card.st-pass,.card.st-fail{border-color:var(--ring)}
/* Tuan chua lam la so dong, neu to bang hai kieu kia thi ca trang vang khe.
   Lam nhat han: mat phai di toi cho DA LAM MA CHUA DAT truoc. */
.wk.st-todo,.card.st-todo{border-color:rgba(217,155,43,.42)}
.st-fail::before{opacity:.32}
/* Tuan dang hoc van co vien trong rieng de nhan ra ngay, nhung lay MAU TRANG
   THAI chu khong lay teal — khong thi no doi mat hai nghia o cung mot cho.
   Dau hieu "dang o day" con nam o the so tuan (.wk.cur .wkn) van mau teal. */
.wk.cur{box-shadow:0 0 0 1px var(--ring,var(--accent)) inset}

/* `width:fit-content` chu khong phai `align-self`: the nay nam trong hai kieu
   khung khac nhau — mot cot flex (the o tab Kiem tra) va mot hang flex (.wkr o
   tab Lo trinh). `flex:0 0 auto` chi chan truc CHINH, nen trong cot flex the
   van bi keo dai het be ngang. `fit-content` dung trong ca hai. */
.stchip{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  width:fit-content;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid currentColor;color:var(--ring,var(--ink-3))}
.stchip::before{content:"\25CB";font-size:11px;line-height:1}   /* ○ chua lam */
.st-pass .stchip::before{content:"\2713"}                        /* ✓ dat */
.st-fail .stchip::before{content:"\2715"}                        /* ✕ chua dat */

/* ---- dau ngam bon goc ----
   Tam vach ngan ve bang 8 gradient tren CUNG MOT pseudo-element: it phan tu,
   khong them DOM, va bien mat sach khi tat hieu ung. */
/* Mau dau ngam di qua bien `--brk` chu khong viet thang mau vao gradient: bien
   thi ke thua xuong pseudo-element, nen doi trang thai cua khoi chi can mot
   dong thay vi viet lai ca tam gradient. */
.card::after,.wk::after,.result::after{
  content:"";position:absolute;inset:4px;pointer-events:none;opacity:.34;z-index:1;
  background:
    linear-gradient(var(--brk),var(--brk)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--brk),var(--brk)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--brk),var(--brk)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--brk),var(--brk)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--brk),var(--brk)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--brk),var(--brk)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--brk),var(--brk)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--brk),var(--brk)) 100% 100%/1px 10px no-repeat;
  transition:opacity .22s,inset .22s}
/* Bien khai o CHINH KHOI chu khong o pseudo-element: khai o pseudo thi no de
   len gia tri ke thua, va the trang thai (.st-pass...) se khong doi mau duoc. */
.card,.wk,.result{--brk:var(--ring,var(--neon))}
.result.pass{--ring:var(--ok)}
.result.fail{--ring:var(--crit)}
/* Luc nghi de rat mo: vien khoi, vong tho va dau ngam cong lai la ba net gan
   nhau, de thanh ron. Re chuot vao thi dau ngam moi an ra va khep lai. */
.card::after,.wk::after,.result::after{opacity:.26}
.card:hover::after,.wk:hover::after{opacity:.8;inset:2px}

/* ---- quang sang chay theo con tro ----
   `--mx/--my` do lab.js dat (gom lai trong mot rAF). Mac dinh day ra ngoai man
   nen khi chua co chuot thi khong co gi hien ra. */
.card,.wk,.hero,.gatecard,.result{
  background-color:var(--surface);
  background-image:radial-gradient(420px circle at var(--mx,-40vw) var(--my,-40vh),
    var(--lab-sheen),transparent 60%)}
.arti,.hand,.scene{background-color:var(--surface-2)}

body.nofx .card::before,body.nofx .wk::before,body.nofx .arti::before,
body.nofx .hand::before,body.nofx .out::after,body.nofx .result::before,
body.nofx .card::after,body.nofx .wk::after,body.nofx .result::after{display:none}
body.nofx .card,body.nofx .wk,body.nofx .hero,body.nofx .gatecard,
body.nofx .result{background-image:none}

/* ==========================================================================
   4. CHI TIET MAY DO
   ========================================================================== */
/* den bao tren thanh tren cung: xanh khi server tra loi, do khi mat ket noi */
.lab-led{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.lab-led::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 8px 1px rgba(79,190,133,.8);
  animation:labBlink 2.2s ease-in-out infinite}
.lab-led.off{color:var(--crit)}
.lab-led.off::before{background:var(--crit);box-shadow:0 0 8px 1px rgba(232,112,95,.8);
  animation-duration:.8s}
@keyframes labBlink{0%,100%{opacity:1}50%{opacity:.25}}
body.nofx .lab-led::before{animation:none;box-shadow:none}

/* Mot xung chay doc duong ke duoi thanh tab, doc nhu duong uplink dang song.
   Lam bang nav.tabs::after chu khong bang mot the rieng: nav dang sticky nen
   xung dinh theo luon, khong can tinh lai `top`. */
nav.tabs{overflow:hidden}
nav.tabs::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:18%;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  pointer-events:none;animation:labWire 5.6s linear infinite}
@keyframes labWire{from{transform:translateX(-110%)}to{transform:translateX(660%)}}
body.nofx nav.tabs::after{display:none}

/* ---- Khoang cach ben trong khung ----
   `.card` truoc day xep con theo block, tuc la khong co khoang cach nao giua
   hai con lien tiep tru khi chinh con do tu dat margin. Do do o nhieu cho mot
   dong giai thich dinh sat vao hang nut ben tren (do duoc: khe ho 0px). Doi
   sang mot cot flex co `gap` that, va bo margin rieng cua tung con de khoang
   cach o moi khung deu bang nhau. */
.card{display:flex;flex-direction:column;gap:11px;align-items:stretch}
.card>*{margin-block:0}
/* Nut va o chon la phan tu dieu khien: de nguyen thi flex keo chung dai het
   be ngang khung. Chi chung co rut ve dung be rong cua minh. */
.card>.btn,.card>button,.card>select{align-self:flex-start}

/* tieu de card: them vach mau ben trai dau "//" cho ra dang muc trong console */
.card>h3{display:flex;align-items:center;gap:9px}
.card>h3::after{content:"";flex:1;height:1px;min-width:18px;
  background:linear-gradient(90deg,var(--lab-edge-dim),transparent)}

/* o so lieu: them vach day mong sang len khi re chuot, nhu kim cua may do */
.stat{position:relative}
.stat::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--neon),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .26s
    cubic-bezier(.22,.9,.3,1);z-index:1}
.stat:hover::before{transform:scaleX(1)}
body.nofx .stat::before{display:none}

/* O so lieu: so to va nhan cua chinh no phai dinh nhau (gan = cung mot nhom),
   nhung 1px thi dinh qua. 3px van doc ra la mot cum ma khong cham chu. */
.kpis .stat{gap:3px}

/* ---- Thanh nut luc dang lam bai ----
   `.qbar` truoc day khong dat display nen hai nut "Tra loi" va "Bo qua" la hai
   phan tu inline-block ke nhau, giua chung khong co text node nao -> dinh sat
   nhau 0px. Cho no thanh mot hang flex co gap that; nut thoat bi day han sang
   le phai de khong bam nham khi dang tra loi nhanh. */
.qbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qbar .quit{margin-left:auto}
@media (max-width:520px){
  .qbar .quit{margin-left:0;order:9}
}

/* khung "san pham phai co": doc ro hon la mot cua so terminal that */
.out{border-left:2px solid var(--lab-edge-dim)}
.out:hover{border-left-color:var(--neon)}

/* O da duoc trinh duyet tu dien: Chrome dan mot nen trang xanh nhat khong the
   doi bang `background`. Cach duy nhat con lai la phu mot `box-shadow` inset
   day va dat lai mau chu. `transition` dai la meo quen de Chrome khong ve lai
   nen cua no sau mot nhip. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;
  box-shadow:0 0 0 1000px var(--surface-2) inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s}
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset,0 0 0 1px var(--accent);
  box-shadow:0 0 0 1000px var(--surface-2) inset,0 0 0 1px var(--accent)}

/* ==========================================================================
   5. BO CUC
   Noi dung rong hon o man lon, nhip doc deu hon, va thanh dinh xep tang dung.
   ========================================================================== */
/* Dung them be ngang o man lon, nhung tang dan: mot cot doc qua rong thi mat
   phai quet ngang de doc, con qua hep thi phi mat nua man hinh. */
@media (min-width:1366px){.wrap{max-width:1160px}}
@media (min-width:1600px){
  .wrap{max-width:1240px}
  .labfx .lab-grid{background-size:48px 48px}
}
/* Khi co ray do hai ben thi day noi dung vao trong dung bang be ngang ray,
   de khong co gi nam duoi ray. */
@media (min-width:1240px){
  .wrap{padding-inline:calc(18px + var(--lab-rail))}
}

/* ---- Ghim thanh tren cung va thanh tab ----
   app.css dat `nav.tabs{top:51px}` — mot con so CUNG, doan rang thanh tren cung
   luon cao 51px. No khong luon dung: o nhieu be ngang thanh tren cung xuong hai
   dong va cao 69px, luc do thanh tab dinh o 51px tuc la nam LOT SAU header va
   bien mat han khi cuon. Doi sang `--tophh` do that bang ResizeObserver trong
   lab.js; 51px chi con la gia tri du phong truoc khi JS chay.

   Khong dung cho man hep (<=620px): o do app.css co y de .top static va cho
   mot minh thanh tab dinh. */
.top{z-index:32}
nav.tabs{z-index:31}
@media (min-width:621px){
  .top{position:sticky;top:0}
  nav.tabs{position:sticky;top:var(--tophh,51px)}
}

/* Thanh tren cung: ten tool khong duoc ngat dong, va khoi tai khoan luon nam
   o le phai du no o dong tren hay dong duoi. Van cho phep xuong dong — ep mot
   dong o man hep se be gay chinh chu "SOC Hub". */
.brand{flex:0 0 auto;white-space:nowrap}
.lab-led{flex:0 0 auto}
#who{margin-left:auto}

/* Mot cot doc, khoang cach deu: khoi lien nhau cung mot nhip 13px da co trong
   app.css; o day chi chac chan khong khoi nao bi cat vien vi overflow. */
section.view>.card,section.view>.wk{overflow:visible}

/* Bang bieu trong card khong bi vien nhap nhay cat mat goc */
.tblwrap{position:relative;z-index:2}

/* ==========================================================================
   6. GIAM CHUYEN DONG
   He thong yeu cau giam chuyen dong thi giu lai HINH (vien, dau ngam, luoi)
   nhung bo het cai dong.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .lab-glow,.lab-raster,.lab-band,.lab-ruler::after,
  #labwire::after,.lab-led::before{animation:none}
  .lab-band,.lab-ruler::after{display:none}
  .card::before,.wk::before,.arti::before,.hand::before,.out::after,
  .result::before{animation:none;opacity:.3}
  #labtrace{animation:none}
}