/* ============================================================
   PART 8 · Work Operation Services · W01 đến W08
   Tiền tố .p8w- · chỉ bổ sung, không sửa deck.css / mockfull.css / part*.css
   Luật chung: một slide = một mock, không tab. Mock là nội dung chính,
   chữ tối thiểu ở cột trái 400px; mỗi phím → hiện thêm một ý và đẩy mock
   sang đúng trạng thái (mockfull.js, data-steps + data-step-offset).
   ============================================================ */
/* màu nhấn của bộ Work: #66B4F0, dải #3B82F6 → #8B5CF6 */
.p8w{--w1:#3B82F6;--w2:#8B5CF6}
.p8w .eyebrow{color:#66B4F0}
.p8w .eyebrow::before{background:linear-gradient(90deg,var(--w1),var(--w2))}

/* ---------- W01 · mở phần: chữ trái, orbit trên phải, năm thẻ dưới (một phím, hiện so le) ---------- */
.p8w-sec .txt{top:170px;width:980px}
.p8w-sec h1{font-size:92px;line-height:1.02;margin:0 0 16px;letter-spacing:-.02em}
.p8w-sec .tag{font-size:31px;margin:0 0 26px}
.p8w-sec .lead{font-size:24px;max-width:860px}
.p8w-sec .orbit.v6{left:auto;right:150px;top:92px;width:600px;height:600px}
.p8w-sec .orbit.v6 .halo{inset:-140px}
.p8w-sec .cards{grid-template-columns:repeat(5,1fr);gap:18px;bottom:64px}
.p8w-sec .cards .card{padding:22px 22px 20px;border-top:0;position:relative;overflow:hidden;display:flex;flex-direction:column}
.p8w-sec .cards .card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--w1),var(--w2))}
.p8w-sec .cards .icons{gap:8px;margin-bottom:14px}
.p8w-sec .cards .icons img{width:34px;height:34px}
.p8w-sec .cards .num{font-size:13px;letter-spacing:.2em;color:#9FD0F6;margin-bottom:10px;display:block;font-weight:700}
.p8w-sec .cards h3{font-size:20px;line-height:1.25;margin-bottom:8px;min-height:50px}
.p8w-sec .cards p{font-size:15.5px;line-height:1.45}
/* năm thẻ cùng data-build="1", so le bằng --d (deck.css: .slide.active [data-build].on{transition-delay:var(--d)}) */

/* ---------- W02 đến W08 · .s-mockfull.side: cột chữ trái 400px, mock lớn bên phải ---------- */
.s-mockfull.side.p8w-app .mf-head{width:400px;top:96px;bottom:60px;gap:22px}
.s-mockfull.side.p8w-app .mf-head .hl,.s-mockfull.side.p8w-app .mf-head .aside{max-width:400px}
.s-mockfull.side.p8w-app .mf-head .eyebrow{font-size:13px;letter-spacing:.12em;margin-bottom:14px}
.s-mockfull.side.p8w-app .mf-head h1{font-size:36px;line-height:1.15;max-height:calc(4 * 1.15em)}
.s-mockfull.side.p8w-app .mf-head .hl .lead{font-size:17px;line-height:1.5;color:var(--t3);max-width:400px;margin-top:14px}
.s-mockfull.side.p8w-app .mf-head .aside .bullets{gap:12px}
.s-mockfull.side.p8w-app .mf-head .aside .bullets li{font-size:17px;line-height:1.42;grid-template-columns:30px 1fr;gap:12px}
.s-mockfull.side.p8w-app .mf-head .aside .bullets li i{width:30px;height:30px;font-size:12.5px;border-radius:8px}
/* ý mới nhất sáng và số xanh; các ý trước mờ đi để mắt theo đúng bước của mock */
.s-mockfull.side.p8w-app .bullets li.on i{background:var(--glass2);border-color:var(--line2);color:var(--blue2)}
.s-mockfull.side.p8w-app .bullets li.on:has(~ li.on){color:var(--t3)}
.s-mockfull.side.p8w-app .bullets li.on:has(~ li.on) b{color:var(--t2)}
.s-mockfull.side.p8w-app .bullets li.on:not(:has(~ li.on)) i{background:var(--blue);border-color:var(--blue);color:#fff}
/* vùng mock: từ dưới logo tới gần đáy, rộng 1260px (mock 3:2 được co theo chiều rộng) */
.s-mockfull.side.p8w-app .mf-mock{left:calc(var(--pad) + 400px + 40px);right:100px;top:124px;bottom:44px}