/* ---- p_25_sv-operations.css ---- */
/* =====================================================================
   OPERATION MANAGEMENT (.sk-op) - trung tâm chỉ huy: bảng khu vực (zone board), nhật ký sự cố, kênh bộ đàm, radar quét.
   Ngôn ngữ: ô lưới đều 24px, khối vuông 2px, nhãn viết hoa cách chữ, số tabular. Không đồng hồ 7 đoạn.
   Màu: cam #ff6a13 / đen / trắng (+ xám, cam nhạt #ffc59a). Một font Be Vietnam Pro; Anton chỉ cho "PLAN B" và dấu xếp hạng.
   Trạng thái khu: ổn định = ô tối + chấm đặc · cần chú ý = viền cam + chấm nửa · sự cố = ô cam đặc + vòng rỗng + sọc.
   Mobile trước; mở rộng ở 700px và 1025px.
   ===================================================================== */
.sk-op{--bg:#09090b;--bg2:#0e0e11;--card:#131317;--ln:rgba(255,255,255,.14);--r:2px;--hfw:800;--hls:-.035em;--aci:#0a0a0c;--gd:rgba(255,255,255,.05);--soft:#ffc59a;--pnl:#0e0e11;font-variant-numeric:tabular-nums}
.sk-op h2,.sk-op h3,.sk-op h4{margin:0;text-wrap:balance}
:where(.sk-op) :is(ul,ol){list-style:none;margin:0;padding:0}
.sk-op button{font-family:var(--fb)}
.sk-op .s-sec{padding-block:clamp(28px,6.4vw,104px)}
.sk-op .s-sec.tight{padding-block:clamp(30px,5vw,64px)}
.sk-op .s-h{font-size:clamp(25px,6.4vw,52px);line-height:1.14}
.sk-op .s-head{margin-bottom:clamp(14px,3.2vw,40px)}
.sk-op .s-head .s-lead{margin-top:10px}
.sk-op .s-lead{font-size:clamp(15.5px,1.4vw,18px)}
.sk-op .btn{border-radius:2px;letter-spacing:.1em}
.sk-op .s-seg{border-radius:2px;padding:3px;gap:3px;background:rgba(255,255,255,.05)}
.sk-op .s-seg button{border-radius:2px;color:var(--ink)}
.sk-op .s-seg button.on{background:var(--ac);color:#0a0a0c}
.op-sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--gd) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--gd) 1px,transparent 1px) 0 0/24px 24px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 50%);mask-image:linear-gradient(180deg,#000,transparent 50%)}
.op-sec>.wrap{position:relative}
.op-eye{display:flex;align-items:center;gap:10px;margin:0 0 9px;font:700 12px/1.2 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.op-eye b{display:grid;place-items:center;min-width:30px;height:22px;padding:0 6px;background:var(--ac);color:#0a0a0c;border-radius:2px;letter-spacing:.04em}
.op-eye::after{content:"";flex:0 0 44px;height:1px;background:linear-gradient(90deg,var(--ac),transparent)}
.sk-op button:focus-visible,.sk-op a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ---------- glyph trạng thái: hình + độ sáng ---------- */
.op-g{display:inline-block;flex:none;box-sizing:border-box;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;background:transparent}
.op-con [data-s=ok] .op-g{background:currentColor}
.op-con [data-s=warn] .op-g{border-color:var(--ac);background:linear-gradient(90deg,var(--ac) 50%,transparent 50%)}
.op-con [data-s=bad] .op-g{border-width:3px}

/* =====================  HERO  ===================== */
.op-hero{background:#09090b;padding-top:clamp(100px,12vw,150px);padding-bottom:clamp(26px,4vw,56px)}
.op-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--gd) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--gd) 1px,transparent 1px) 0 0/24px 24px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.op-title{margin:0;font-size:clamp(42px,13vw,128px);line-height:1;letter-spacing:-.045em}
.op-title .op-t2{color:var(--ac)}
.op-sub{max-width:54ch}
.op-btns{flex-wrap:wrap;gap:8px}
.op-btns .btn{min-height:48px;padding-inline:14px;white-space:nowrap;letter-spacing:.06em;flex:1 1 150px}
.op-btns .btn-f{flex-grow:1.3}
@media(max-width:380px){.op-btns .btn{flex-basis:100%}}
.op-rdr{position:absolute;z-index:-1;right:-30%;top:48px;width:min(96vw,620px);aspect-ratio:1;border-radius:50%;opacity:.5;pointer-events:none;-webkit-mask-image:radial-gradient(circle,#000 35%,transparent 70%);mask-image:radial-gradient(circle,#000 35%,transparent 70%)}
.op-rdr::before,.op-rdr::after{content:"";position:absolute;background:rgba(255,106,19,.3)}
.op-rdr::before{left:50%;top:0;bottom:0;width:1px}.op-rdr::after{top:50%;left:0;right:0;height:1px}
.op-rr{position:absolute;border-radius:50%;border:1px solid rgba(255,106,19,.4)}
.op-rr.a{inset:0}.op-rr.b{inset:17%}.op-rr.c{inset:34%}
.op-rs{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,106,19,.55),rgba(255,106,19,0) 70deg,transparent 70deg)}
.op-bp1,.op-bp2,.op-bp3{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.6);opacity:.7}
.op-bp1{left:64%;top:27%}.op-bp2{left:30%;top:62%}.op-bp3{left:72%;top:66%}
@media(min-width:1025px){.op-rdr{right:-4%;top:70px;width:min(52vw,720px)}}

/* ---------- bảng điều khiển ---------- */
.op-con{position:relative;margin-top:clamp(24px,4vw,40px);display:grid;gap:10px}
.op-cn{position:absolute;width:16px;height:16px;border:2px solid var(--ac);pointer-events:none}
.op-cn.a{left:-5px;top:-5px;border-right:0;border-bottom:0}.op-cn.b{right:-5px;bottom:-5px;border-left:0;border-top:0}
.op-zw,.op-fw{position:relative;overflow:hidden;background:rgba(14,14,17,.9);border:1px solid var(--ln);border-radius:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.op-fw{display:flex;flex-direction:column}
.op-zw::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 46%,rgba(255,106,19,.14) 50%,transparent 54%) 0 -100%/100% 200% no-repeat}
.op-bh{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;padding:6px 12px 8px;min-height:44px;border-bottom:1px solid var(--ln);font:700 12px/1.2 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.op-live{display:inline-flex;align-items:center;gap:8px;color:#fff;white-space:nowrap}
.op-live i{width:8px;height:8px;border-radius:50%;background:var(--ac)}
.op-vn{order:3;flex:1 0 100%;min-width:0;line-height:1.35;letter-spacing:.06em}
.op-clk{margin-left:auto;font:800 18px/1 var(--ff);letter-spacing:.04em;color:var(--ac)}
@media(min-width:700px){.op-bh{flex-wrap:nowrap;gap:10px;padding:0 12px}.op-vn{order:0;flex:1 1 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.op-zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px 8px 8px}
.op-z{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"t s" "n n" "k k";align-content:start;gap:3px 8px;min-height:88px;padding:10px 12px 11px;background:var(--pnl);border:1px solid var(--ln);border-radius:2px;transition:background .45s,border-color .45s,color .45s}
.op-z:nth-child(1){--k:0}.op-z:nth-child(2){--k:1}.op-z:nth-child(3){--k:2}.op-z:nth-child(4){--k:3}.op-z:nth-child(5){--k:4}.op-z:nth-child(6){--k:5}
.op-zt{grid-area:t;align-self:center;font:700 12px/1 var(--fb);letter-spacing:.14em;color:var(--mut)}
.op-zs{grid-area:s;justify-self:end;display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--fb);letter-spacing:.03em;color:var(--mut)}
.op-zs em{font-style:normal}
.op-z b{grid-area:n;margin-top:8px;font:800 17px/1.2 var(--ff);letter-spacing:-.02em}
.op-z small{grid-area:k;font:500 13px/1.3 var(--fb);color:var(--mut)}
.op-z[data-s=ok] .op-zs{color:#fff}
.op-z[data-s=warn]{border-color:var(--ac);background:rgba(255,106,19,.11)}
.op-z[data-s=warn] .op-zs{color:var(--soft)}
.op-z[data-s=warn] small{color:#e6e6ea}
.op-z[data-s=bad]{background:var(--ac) repeating-linear-gradient(135deg,rgba(0,0,0,.13) 0 6px,transparent 6px 12px);border-color:var(--ac);color:#0a0a0c}
.op-z[data-s=bad] .op-zt,.op-z[data-s=bad] .op-zs,.op-z[data-s=bad] small{color:#1a0a02}
.op-lg{display:none;flex-wrap:wrap;gap:6px 16px;margin:0;padding:2px 12px 12px;font:500 12px/1.2 var(--fb);color:var(--mut)}
.op-lg span{display:inline-flex;align-items:center;gap:6px}
.op-ch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ln);border-bottom:1px solid var(--ln)}
.op-ch li{position:relative;display:grid;align-content:center;justify-items:center;gap:3px;min-height:60px;padding:10px 3px 8px;background:var(--pnl);text-align:center;transition:background .2s,color .2s}
.op-ch li::before{content:"";position:absolute;left:6px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ac);opacity:.45}
.op-ch b{font:800 15px/1 var(--ff);letter-spacing:.08em}
.op-ch span{font:500 12px/1.2 var(--fb);color:var(--mut)}
.op-wv{position:absolute;right:5px;top:5px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:.45}
.op-wv circle{fill:currentColor;stroke:none}
.op-ch li.is-tx{background:var(--ac);color:#0a0a0c}.op-ch li.is-tx span{color:#1a0a02}.op-ch li.is-tx .op-wv{opacity:1}.op-ch li.is-tx::before{background:#0a0a0c;opacity:1}
.op-fh{display:flex;gap:8px;padding:8px;border-bottom:1px solid var(--ln)}
.op-bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;min-height:44px;padding:0 14px;border:1px solid var(--ln);border-radius:2px;background:#1a1a1f;color:#fff;font:700 13px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.op-bt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.op-bt:active{transform:scale(.97)}
.op-ic{flex:0 0 48px;padding:0}
.op-sp{flex:0 0 auto}.op-sp button{min-width:44px;padding:0 8px}
.op-log{display:flex;flex-direction:column;justify-content:flex-end;height:184px;overflow:hidden;padding:4px 12px 8px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
.op-l{flex:none;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;row-gap:1px;padding:7px 0;border-top:1px dashed var(--ln)}
.op-l time{grid-row:1/3;font:700 13px/1.5 var(--ff);color:var(--ac)}
.op-lm{font:500 15px/1.35 var(--fb)}
.op-lt{font:600 12px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.op-l.is-sep{display:block;padding:9px 0;text-align:center;font:600 12px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border-top:1px solid var(--ac)}
@media(min-width:700px){.op-lg{display:flex}.op-zones{grid-template-columns:repeat(3,minmax(0,1fr))}.op-z{min-height:112px}.op-log{height:300px}}
@media(min-width:1025px){.op-con{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px;align-items:stretch}.op-log{flex:1 1 auto;height:auto;min-height:250px}.op-z b{font-size:19px}}

/* ---------- dải mục lục số ---------- */
.op-nav{background:var(--bg2);border-block:1px solid var(--ln)}
.op-navg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:0!important;background:var(--ln)}
.op-navg a{position:relative;display:grid;align-content:center;gap:3px;min-height:76px;padding:10px 10px 10px 12px;background:var(--bg2);text-decoration:none;transition:background .3s}
.op-navg b{font:800 clamp(30px,8vw,56px)/1 var(--ff);letter-spacing:-.04em;color:#fff}
.op-navg span{font:600 12px/1.25 var(--fb);color:var(--mut)}
.op-navg a::after{content:"↓";position:absolute;right:8px;top:10px;font:700 16px var(--fb);color:var(--ac)}
.op-navg a::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ac);transition:width .6s cubic-bezier(.16,1,.3,1)}
@media(min-width:700px){.op-navg a{padding:16px var(--gut);min-height:96px}.op-navg span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}.op-navg a::after{right:var(--gut);top:14px}}
@media(hover:hover){.op-navg a:hover{background:#15151a}.op-navg a:hover::before{width:100%}}

/* =====================  02 · GIẢ LẬP SỰ CỐ  ===================== */
.op-sim{display:grid;gap:14px}
.op-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.op-tabs button{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:2px;width:100%;min-height:54px;padding:4px 0;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);color:var(--ink);cursor:pointer;transition:border-color .25s,background .25s}
.op-tabs .op-tx{font:800 18px/1 var(--ff);font-style:normal}
.op-tabs .op-tl1{display:none;font:600 14.5px/1.3 var(--fb);text-align:left}
.op-tabs .op-tp{font:700 12px/1 var(--fb);font-style:normal;color:var(--mut)}
.op-tabs button.on{border-color:var(--ac);background:rgba(255,106,19,.14)}
.op-tabs button.is-done .op-tp{color:var(--ac)}
.op-tabs button.is-done::after{content:"";position:absolute;right:4px;top:4px;width:6px;height:6px;background:var(--ac)}
.op-prog{margin:10px 0 0;font:600 14px/1.4 var(--fb);color:var(--mut)}
.op-prog b{color:var(--ac)}
.op-case{position:relative;overflow:hidden;padding:clamp(16px,2.4vw,26px);background:rgba(14,14,17,.92);border:1px solid var(--ln);border-radius:2px}
.op-case::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 40%,rgba(255,106,19,.35) 50%,transparent 60%) -150% 0/150% 100% no-repeat;opacity:0}
.op-kick{display:flex;justify-content:space-between;gap:10px;margin:0 0 10px;font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.op-kick b{color:var(--ac)}
.op-ct{margin:0 0 8px;font:800 clamp(21px,5.4vw,30px)/1.2 var(--ff);letter-spacing:-.025em}
.op-cs{margin:0;font-size:15.5px;line-height:1.6;color:rgba(245,245,246,.84)}
.op-opts{display:grid;gap:8px;margin-top:16px}
.op-o{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;width:100%;min-height:58px;padding:12px 14px;text-align:left;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);color:var(--ink);font:500 15px/1.45 var(--fb);cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.op-o:active{transform:scale(.99)}
.op-o i{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ln);border-radius:2px;font:800 14px/1 var(--ff);font-style:normal}
.op-o em{display:block;margin-top:4px;font:700 12px/1.3 var(--fb);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.op-o.on{border-color:var(--ac);background:rgba(255,106,19,.13)}
.op-o.on i{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.op-res{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.op-res.is-open{grid-template-rows:1fr}
.op-res>div{min-height:0;overflow:hidden}
.op-resi{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:16px}
.op-resi>.op-rkc,.op-resi>.op-nar,.op-resi>.op-ptw,.op-resi>.op-fl,.op-resi>.op-act{grid-column:1/-1}
.op-stat u{text-decoration:none}
.op-sim,.op-fin{scroll-margin-top:100px}
.op-stat{padding:12px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl)}
.op-stat small{display:block;font:600 12px/1.3 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.op-stat b{display:block;margin-top:4px;font:800 22px/1.15 var(--ff);letter-spacing:-.02em}
.op-stat b span{font:600 14px var(--fb);letter-spacing:0;color:var(--mut)}
.op-rk{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:2px;margin-top:10px}
.op-rk i{height:14px;background:rgba(255,255,255,.1);transition:background .15s calc(var(--k,0)*28ms)}
.op-rk i.is-on{background:var(--ac)}
.op-gm{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:10px}
.op-gm i{height:14px;background:rgba(255,255,255,.1);transition:background .2s calc(var(--k,0)*90ms)}
.op-gm i.is-on{background:#fff}
.op-gl{margin-top:6px;font:500 13px/1.35 var(--fb);color:var(--mut)}
.op-nar{margin:2px 0 0;font-size:15.5px;line-height:1.55}
.op-pt{display:inline-block;margin-top:2px;padding:4px 10px;border:1px solid var(--ac);border-radius:2px;font:700 13px/1.3 var(--fb);color:var(--ac)}
.op-fl{margin-top:14px;perspective:1200px}
.op-fl-in{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.op-fl.is-b .op-fl-in{transform:rotateY(180deg)}
.op-fl-f,.op-fl-b{grid-area:1/1;min-width:0;padding:16px;border:1px solid var(--ln);border-radius:2px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.op-fl-f{display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:var(--pnl)}
.op-fl-b{background:var(--ac);border-color:var(--ac);color:#0a0a0c;transform:rotateY(180deg)}
.op-pbt{font-size:clamp(44px,12vw,64px);color:var(--ac)}
.op-pbk{margin:0;font:700 12px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.op-pbp{margin:0;font-size:15.5px;line-height:1.55}
.op-chn{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.op-chn li{padding-top:6px;border-top:2px solid var(--ac);font:700 12px/1.25 var(--fb);color:var(--soft)}
.op-fl-b h4{margin:0 0 8px;font:800 13px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase}
.op-stp{display:grid;gap:7px}
.op-stp li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;padding-top:7px;border-top:1px solid rgba(10,10,12,.35);font:500 15px/1.4 var(--fb)}
.op-stp b{font:800 13px/1.4 var(--fb);letter-spacing:.08em;text-transform:uppercase}
.op-fl-b[aria-hidden=true],.op-fl-f[aria-hidden=true]{visibility:hidden}
.op-act{display:grid;gap:8px;margin-top:8px}
.op-act .op-bt{min-height:48px}
.op-nxb{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.op-fin{margin-top:12px;display:grid;gap:12px;padding:16px;border:1px solid var(--ac);border-radius:2px;background:rgba(255,106,19,.08)}
.op-fh2{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.op-rank{font-size:clamp(34px,9vw,48px);color:var(--ac);transform-origin:0 50%}
.op-rsub{margin:2px 0 0;font:500 14px/1.4 var(--fb);color:rgba(245,245,246,.84)}
.op-fb{display:grid;gap:6px}
.op-fb li{display:grid;grid-template-columns:20px minmax(0,1fr) 34px;gap:8px;align-items:center;font:700 13px/1 var(--fb)}
.op-fb i{position:relative;height:8px;background:rgba(255,255,255,.12);font-style:normal;overflow:hidden}
.op-fb i::after{content:"";position:absolute;inset:0;background:var(--ac);transform:scaleX(var(--v,0));transform-origin:0 50%;transition:transform .8s cubic-bezier(.16,1,.3,1) calc(var(--k,0)*90ms)}
.op-fb em{font-style:normal;text-align:right}
.op-fin[hidden]{display:none}
.op-fin .op-bt{min-height:48px}
@media(min-width:700px){.op-act{grid-template-columns:1fr 1fr}.op-stp li{grid-template-columns:96px minmax(0,1fr)}}
@media(min-width:1025px){
  .op-sim{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:22px;align-items:start}
  .op-side{position:sticky;top:96px}
  .op-tabs{grid-template-columns:1fr;gap:6px}
  .op-tabs button{grid-template-columns:30px minmax(0,1fr) auto;justify-items:start;align-items:center;gap:10px;min-height:52px;padding:6px 12px}
  .op-tabs .op-tl1{display:block}
  .op-tabs button.is-done::after{display:none}
  .op-resi{grid-template-columns:repeat(3,minmax(0,1fr))}.op-resi>.op-rkc{grid-column:auto}
}

/* =====================  03 · SƠ ĐỒ ĐIỀU HÀNH  ===================== */
.op-chain{display:grid;gap:12px}
.op-qs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.op-q{min-height:56px;padding:6px 7px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);color:var(--ink);font:700 14px/1.25 var(--fb);text-align:left;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.op-q.on{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.op-ans{min-height:124px;padding:12px 14px;border:1px solid var(--ln);border-left:3px solid var(--ac);border-radius:2px;background:var(--pnl)}
.op-ans h3{margin:0 0 6px;font:800 18px/1.25 var(--ff)}
.op-ans p{margin:0;font-size:15.5px;line-height:1.55;color:rgba(245,245,246,.86)}
.op-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.op-meta span{padding:4px 8px;border:1px solid var(--ln);font:700 12px/1.3 var(--fb);letter-spacing:.06em;color:var(--soft)}
.op-tree{position:relative;display:grid;gap:6px;padding-left:26px}
.op-tree::before{content:"";position:absolute;left:10px;top:64px;bottom:34px;width:2px;background:var(--ln)}
.op-nd{position:relative}
.op-nd:first-child{margin-left:-26px}
.op-nd:first-child::after{content:"";position:absolute;left:36px;top:100%;width:2px;height:10px;background:var(--ln)}
.op-nd:not(:first-child)::before{content:"";position:absolute;left:-16px;top:50%;width:16px;height:2px;background:var(--ln);transition:background .3s}
.op-nd>button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"r m" "t m";gap:1px 10px;width:100%;min-height:54px;padding:8px 12px;text-align:left;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);color:var(--ink);cursor:pointer;transition:background .3s,border-color .3s,opacity .3s}
.op-nr{grid-area:r;font:800 16px/1.2 var(--ff)}
.op-nt{grid-area:t;font:500 13.5px/1.35 var(--fb);color:var(--mut)}
.op-nm{grid-area:m;align-self:center;display:flex;align-items:center;gap:6px}
.op-nm .op-g{width:18px;height:18px;border-color:var(--mut);opacity:.6}
.op-nd.is-p>button{border-color:var(--ac);background:rgba(255,106,19,.15)}
.op-nd.is-s>button{border-color:rgba(255,106,19,.55)}
.op-nd.is-x>button{opacity:.5}
.op-nd.is-p .op-g{border-color:var(--ac);background:var(--ac);opacity:1}
.op-nd.is-s .op-g{border-color:var(--ac);background:linear-gradient(90deg,var(--ac) 50%,transparent 50%);opacity:1}
.op-nd.is-p::before,.op-nd.is-s::before{background:var(--ac)}
.op-nd.is-sel>button{outline:2px solid #fff;outline-offset:2px}
.op-vd>button{border-style:dashed}
.op-chs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.op-chs button{display:grid;justify-items:center;align-content:center;gap:2px;width:100%;min-height:58px;padding:8px 3px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.op-chs b{font:800 15px/1 var(--ff);letter-spacing:.08em}
.op-chs span{font:500 12px/1.2 var(--fb);color:var(--mut);text-align:center}
.op-chs button[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.op-chs button[aria-pressed=true] span{color:#1a0a02}
@media(min-width:700px){
  .op-q{padding:6px 12px;font-size:14.5px}
  .op-ans p{max-width:70ch}
  .op-tree{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 12px;padding-left:0}
  .op-tree::before{display:none}
  .op-nd:first-child{grid-column:1/-1;margin:0 auto;width:min(100%,380px)}
  .op-nd:first-child::after{left:50%;top:100%;height:18px}
  .op-nd:nth-child(n+2):nth-child(-n+5)::before{left:50%;top:-18px;width:2px;height:18px}
  .op-nd:nth-child(n+2):nth-child(-n+5)::after{content:"";position:absolute;top:-18px;left:-6px;right:-6px;height:2px;background:var(--ln)}
  .op-nd:nth-child(2)::after{left:50%}.op-nd:nth-child(5)::after{right:50%}
  .op-nd.is-p:nth-child(n+2)::after,.op-nd.is-s:nth-child(n+2)::after{background:var(--ac)}
  .op-vd{grid-column:1/-1}
  .op-nd.op-vd::before{left:50%;top:-18px;width:0;height:18px;background:none;border-left:2px dashed var(--ln)}
  .op-nd.op-vd.is-p::before,.op-nd.op-vd.is-s::before{border-left-color:var(--ac);background:none}
  .op-nd>button{align-content:start;grid-template-areas:"r m" "t t"}
}
@media(min-width:1025px){
  .op-chain{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"qs qs" "tree ans" "tree chs";gap:14px 28px;align-items:start}
  .op-qs{grid-area:qs}.op-ans{grid-area:ans}.op-tree{grid-area:tree}.op-chs{grid-area:chs}
}

/* =====================  04 · ĐỊNH MỨC NHÂN SỰ  ===================== */
.op-staff{display:grid;gap:14px}
.op-sl{margin:0 0 8px;font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.op-ssc button{font-size:14px}
.op-skp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.op-skp>div{padding:10px 10px 12px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl)}
.op-skp small{display:block;font:600 12px/1.3 var(--fb);color:var(--mut)}
.op-skp b{display:block;margin-top:4px;font:800 clamp(22px,6vw,32px)/1.05 var(--ff);letter-spacing:-.03em}
.op-srows{display:grid;gap:8px}
.op-srows>li{padding:10px 12px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl)}
.op-sh{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b o" "s o";gap:2px 10px;align-items:center}
.op-sh b{grid-area:b;font:800 16px/1.2 var(--ff)}
.op-sh span{grid-area:s;font:500 13px/1.35 var(--fb);color:var(--mut)}
.op-sh output{grid-area:o;font:800 32px/1 var(--ff);letter-spacing:-.03em;color:var(--ac)}
.op-sq{display:flex;flex-wrap:wrap;gap:3px;margin-top:10px;min-height:9px}
.op-sq i{width:9px;height:9px;border-radius:1px;background:var(--ac)}
.op-sn{margin:0;max-width:72ch;font:500 13.5px/1.55 var(--fb);color:var(--mut)}
@media(min-width:1025px){.op-staff{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:14px 32px;align-items:start}.op-sctl{position:sticky;top:96px}.op-skp{grid-template-columns:1fr}.op-sn{grid-column:2}.op-sq i{width:10px;height:10px}}

/* =====================  05 · BRIEFING 3 LỚP  ===================== */
.op-brief{display:grid;gap:14px}
.op-bl1{display:grid;gap:12px;justify-items:center}
.op-rg{position:relative;width:min(26vw,100px);aspect-ratio:1}
.op-rg i{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid var(--ln);transition:border-color .4s,background .4s}
.op-rg1{width:100%;height:100%}.op-rg2{width:66%;height:66%}.op-rg3{width:33%;height:33%}
.op-rg::before,.op-rg::after{content:"";position:absolute;background:var(--ln)}
.op-rg::before{left:50%;top:0;bottom:0;width:1px}.op-rg::after{top:50%;left:0;right:0;height:1px}
.op-rg[data-l="0"] .op-rg3{border-color:var(--ac);background:rgba(255,106,19,.55)}
.op-rg[data-l="1"] .op-rg2{border-color:var(--ac);background:rgba(255,106,19,.16)}.op-rg[data-l="1"] .op-rg3{border-color:var(--ac);background:rgba(255,106,19,.55)}
.op-rg[data-l="2"] .op-rg1{border-color:var(--ac);background:rgba(255,106,19,.08)}.op-rg[data-l="2"] .op-rg2{border-color:var(--ac);background:rgba(255,106,19,.16)}.op-rg[data-l="2"] .op-rg3{border-color:var(--ac);background:rgba(255,106,19,.55)}
.op-rgc{position:absolute;left:50%;top:50%;width:100%;height:100%;translate:-50% -50%;border:2px solid var(--ac);border-radius:50%;scale:0;opacity:0}
.op-lyr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.op-lyr button{display:grid;justify-items:center;align-content:center;gap:2px;min-height:60px;padding:8px 3px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.op-lyr b{font:800 16px/1.1 var(--ff)}
.op-lyr span{font:500 12px/1.2 var(--fb);color:var(--mut);text-align:center}
.op-lyr button.on{background:var(--ac);border-color:var(--ac);color:#0a0a0c}.op-lyr button.on span{color:#1a0a02}
.op-bph h3{font:800 clamp(19px,4.8vw,26px)/1.2 var(--ff);letter-spacing:-.02em}
.op-bph p{margin:6px 0 12px;font-size:15.5px;line-height:1.55;color:rgba(245,245,246,.84)}
.op-ck{display:grid;gap:6px}
.op-ck button{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;width:100%;min-height:54px;padding:11px 12px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);color:var(--ink);text-align:left;font:500 15px/1.45 var(--fb);cursor:pointer;transition:border-color .25s,color .25s}
.op-ck i{position:relative;width:24px;height:24px;border:2px solid var(--mut);border-radius:2px;transition:background .2s,border-color .2s}
.op-ck i::after{content:"";position:absolute;left:6px;top:2px;width:7px;height:12px;border:solid #0a0a0c;border-width:0 3px 3px 0;rotate:40deg;opacity:0}
.op-ck button[aria-checked=true]{border-color:rgba(255,106,19,.65);color:rgba(245,245,246,.74)}
.op-ck button[aria-checked=true] i{background:var(--ac);border-color:var(--ac)}.op-ck button[aria-checked=true] i::after{opacity:1}
.op-bpg,.op-gtop{display:flex;align-items:center;gap:12px;margin-top:12px}
.op-gtop{margin:0}
.op-bpg p,.op-gtop p{margin:0;flex:none;font:700 13px/1.3 var(--fb);letter-spacing:.04em;color:var(--soft)}
.op-bar{flex:1;height:8px;background:rgba(255,255,255,.12);overflow:hidden}
.op-bar i{display:block;height:100%;background:var(--ac);transform:scaleX(var(--v,0));transform-origin:0 50%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media(min-width:1025px){.op-brief{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}.op-rg{width:min(100%,280px)}}

/* =====================  06 · THIẾT BỊ & PLAN B  ===================== */
.op-gw{display:grid;gap:12px}
.op-gear{display:grid;gap:6px;align-items:start}
.op-gi{border:1px solid var(--ln);border-radius:2px;background:var(--pnl);transition:border-color .3s}
.op-gi.is-open{border-color:rgba(255,106,19,.65)}
.op-gh{display:grid;grid-template-columns:minmax(0,1fr) 56px}
.op-gx{display:grid;grid-template-columns:28px minmax(0,1fr) 22px;gap:10px;align-items:center;min-height:58px;padding:8px 6px 8px 12px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.op-gn{font:800 14px/1 var(--ff);color:var(--ac)}
.op-gt b{display:block;font:700 16px/1.25 var(--ff)}
.op-gt small{display:block;margin-top:2px;font:500 13px/1.3 var(--fb);color:var(--mut)}
.op-gc{position:relative;width:18px;height:18px}
.op-gc::before,.op-gc::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--ac);transition:rotate .35s cubic-bezier(.16,1,.3,1)}
.op-gc::after{rotate:90deg}
.op-gi.is-open .op-gc::after{rotate:0deg}
.op-gk{display:grid;place-items:center;min-height:58px;border:0;border-left:1px solid var(--ln);background:none;cursor:pointer}
.op-gk i{position:relative;width:24px;height:24px;border:2px solid var(--mut);border-radius:2px;transition:background .2s,border-color .2s}
.op-gk i::after{content:"";position:absolute;left:6px;top:2px;width:7px;height:12px;border:solid #0a0a0c;border-width:0 3px 3px 0;rotate:40deg;opacity:0}
.op-gk[aria-checked=true] i{background:var(--ac);border-color:var(--ac)}.op-gk[aria-checked=true] i::after{opacity:1}
.op-gp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.op-gpi{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
.op-gi.is-open .op-gp{grid-template-rows:1fr}
.op-gi.is-open .op-gpi{visibility:visible;transition-delay:0s}
.op-gcol{padding:12px 14px 14px;border-top:1px solid var(--ln)}
.op-gcol h4{margin:0 0 6px;font:700 12px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.op-gcol p{margin:0;font-size:15.5px;line-height:1.55}
.op-pb{background:rgba(255,106,19,.1);border-top-color:rgba(255,106,19,.5)}
.op-pb h4{color:var(--soft)}
@media(min-width:700px){.op-gpi{display:grid;grid-template-columns:1fr 1fr}.op-gcol+.op-gcol{border-left:1px solid var(--ln)}}
@media(min-width:1025px){.op-gear{grid-template-columns:1fr 1fr;gap:8px}}

/* =====================  07 · HẬU SỰ KIỆN  ===================== */
.op-after{position:relative;padding-left:34px}
.op-tln{position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--ln)}
.op-tln::after{content:"";position:absolute;inset:0;background:var(--ac);transform:scaleY(var(--p,0));transform-origin:50% 0}
.op-tl{display:grid;gap:22px}
.op-tn{position:relative}
.op-tn::before{content:"";position:absolute;left:-31px;top:2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--ln);background:var(--bg2);transition:background .4s,border-color .4s,box-shadow .4s}
.op-tn.is-on::before{border-color:var(--ac);background:var(--ac);box-shadow:0 0 0 5px rgba(255,106,19,.22)}
.op-tk{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.op-tk b{font:800 22px/1 var(--ff);letter-spacing:-.02em;color:var(--ac)}
.op-tk em{font:700 12px/1 var(--fb);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.op-tn h3{margin-bottom:8px;font:800 clamp(19px,4.6vw,26px)/1.2 var(--ff);letter-spacing:-.02em}
.op-tn>p{margin:0 0 12px;max-width:66ch;font-size:15.5px;line-height:1.6;color:rgba(245,245,246,.84)}
.op-qa{display:grid;gap:6px}
.op-qa li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);font:500 15.5px/1.4 var(--fb)}
.op-qa b{display:grid;place-items:center;height:26px;border-radius:2px;background:var(--ac);color:#0a0a0c;font:800 14px/1 var(--ff)}
.op-inc{display:grid;gap:6px}
.op-inc li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"id tm du" "sc sc sc" "fx fx fx";gap:3px 10px;padding:10px 12px;border:1px solid var(--ln);border-radius:2px;background:var(--pnl);font-size:14.5px;line-height:1.4}
.op-inc li>b{grid-area:id;font:800 13px/1.4 var(--ff);color:var(--ac)}
.op-inc li>span:nth-of-type(1){grid-area:tm;color:var(--mut);font-size:13px}
.op-inc li>span:nth-of-type(2){grid-area:sc;font-weight:700;font-size:15px}
.op-inc li>span:nth-of-type(3){grid-area:fx;color:rgba(245,245,246,.78)}
.op-inc li>em{grid-area:du;font:700 13px/1.4 var(--fb);font-style:normal;color:var(--soft)}
.op-inc .op-inh{display:none}
@media(min-width:700px){
  .op-inc li{grid-template-columns:78px 150px minmax(0,1fr) minmax(0,1.5fr) 64px;grid-template-areas:"id tm sc fx du";align-items:start;gap:10px}
  .op-inc .op-inh{display:grid}
  .op-inh span{font:700 12px/1.3 var(--fb)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)!important}
}
@media(min-width:1025px){
  .op-after{padding-left:40px}
  .op-tn{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:40px}
  .op-tn>.op-tk{grid-column:1;grid-row:1/span 4;display:block}
  .op-tn>.op-tk b{display:block;font-size:34px;margin-bottom:6px}
  .op-tn>:not(.op-tk){grid-column:2}
}

/* =====================  ĐỌC THÊM · FAQ  ===================== */
.op-cards .card-img{aspect-ratio:16/9}
.op-cards .card-body{padding:14px 54px 16px 16px}
.op-cards .card-body em{font-size:12px}
.op-cards .card{border-radius:2px}
@media(max-width:1024px){
  .sk-op .op-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:6px var(--gut) 14px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .sk-op .op-cards::-webkit-scrollbar{display:none}
  .sk-op .op-cards>.card{flex:0 0 min(80%,360px);scroll-snap-align:start;min-width:0}
}
.op-faq .fq-q{font-size:clamp(16px,1.6vw,19px)}
.op-faq .fq-q::after{border-radius:2px}
.sk-op .s-rel a,.sk-op .s-pager a{border-radius:2px}
.sk-op .s-rel a{min-height:96px;gap:12px;padding:16px 18px}
.sk-op .s-pager{padding-block:12px;gap:8px}
.sk-op .s-pager a{padding:14px 18px}
.sk-op .s-relw .s-head{margin-bottom:14px}

/* =====================  CHUYỂN ĐỘNG (chỉ khi không giảm chuyển động)  ===================== */
@media(prefers-reduced-motion:no-preference){
  .op-rs{animation:opSweep 7s linear infinite}
  .op-bp1{animation:opBlip 7s linear infinite -1s}.op-bp2{animation:opBlip 7s linear infinite -3.4s}.op-bp3{animation:opBlip 7s linear infinite -5.2s}
  .op-zw::after{animation:opScan 5.5s linear infinite}
  .op-live i{animation:opBlink 1.4s ease-in-out infinite}
  .op-ch li::before{animation:opLed 2.6s ease-in-out infinite}
  .op-ch li:nth-child(2)::before{animation-delay:-.7s;animation-duration:3.1s}.op-ch li:nth-child(3)::before{animation-delay:-1.5s;animation-duration:2.2s}.op-ch li:nth-child(4)::before{animation-delay:-2s;animation-duration:3.6s}
  .op-ch li.is-tx .op-wv path{animation:opWave .9s ease-in-out infinite}
  .op-ch li.is-tx .op-wv path:nth-of-type(2){animation-delay:.12s}.op-ch li.is-tx .op-wv path:nth-of-type(3){animation-delay:.24s}
  .kx-js .op-con.kx-in .op-z{animation:opBoot .55s steps(6) backwards;animation-delay:calc(var(--k,0)*110ms + .15s)}
  .op-z.is-ping{animation:opPing 1s ease-out}
  .op-z[data-s=bad]{animation:opAlarm 1.6s ease-in-out infinite}
  .op-l.is-new{animation:opFlash 1.6s ease-out}
  .op-case.is-cut::after{animation:opCut .7s ease-out}
  .op-case.is-cut>*{animation:opIn .5s cubic-bezier(.16,1,.3,1) backwards}
  .op-rgc.is-ping{animation:opRip 1s ease-out}
  .op-sq i{animation:opSq .4s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--k,0)*14ms)}
  .op-rank.is-stamp{animation:opStamp .7s cubic-bezier(.34,1.56,.64,1) backwards}
  .op-nd.is-p::before,.op-nd.is-s::before{animation:opPulse 1.3s linear infinite}
  .op-tn.is-on::before{animation:opNode .8s ease-out}
  .op-ans.is-chg{animation:opIn .5s cubic-bezier(.16,1,.3,1)}
}
@keyframes opSweep{to{transform:rotate(360deg)}}
@keyframes opBlip{0%,6%{opacity:.95;transform:scale(1.4)}30%,100%{opacity:0;transform:scale(.6)}}
@keyframes opScan{to{background-position:0 100%}}
@keyframes opBlink{50%{opacity:.25}}
@keyframes opLed{50%{opacity:1}}
@keyframes opWave{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes opBoot{0%{opacity:0}30%{opacity:1;background:rgba(255,106,19,.35)}60%{opacity:.3}100%{opacity:1}}
@keyframes opPing{0%{box-shadow:0 0 0 0 rgba(255,106,19,.7)}100%{box-shadow:0 0 0 14px rgba(255,106,19,0)}}
@keyframes opAlarm{50%{filter:brightness(1.18)}}
@keyframes opFlash{0%{background:rgba(255,106,19,.3)}100%{background:transparent}}
@keyframes opCut{0%{opacity:1;background-position:-150% 0}100%{opacity:1;background-position:250% 0}}
@keyframes opIn{from{opacity:0;transform:translateY(10px)}}
@keyframes opRip{from{scale:.12;opacity:.95}to{scale:var(--to,1);opacity:0}}
@keyframes opSq{from{opacity:0;transform:scale(0)}}
@keyframes opStamp{from{opacity:0;transform:scale(2.4) rotate(-8deg)}}
@keyframes opPulse{0%{box-shadow:0 0 0 0 rgba(255,106,19,.9)}100%{box-shadow:0 0 0 8px rgba(255,106,19,0)}}
@keyframes opNode{from{box-shadow:0 0 0 0 rgba(255,106,19,.8)}to{box-shadow:0 0 0 12px rgba(255,106,19,0)}}
@media(hover:hover){
  .op-bt:hover,.op-q:hover,.op-o:hover,.op-chs button:hover,.op-lyr button:hover,.op-tabs button:hover,.op-ck button:hover,.op-nd>button:hover{border-color:var(--ac)}
  .op-gx:hover .op-gt b{color:var(--ac)}
}