/* ============================================================
   PART 8 · CRM Operation Services (C01 đến C08b) và HRM Operation Services (H01 đến H15)
   Tiền tố .p8c- · chỉ bổ sung, không sửa deck.css / mockfull.css / part*.css
   Luật chung: một slide = một mock hoặc một ảnh chụp thật, không tab.
   Mock là nội dung chính, chữ tối thiểu ở cột trái 400px (.side) hoặc dải chữ trên (.wide).
   Ảnh chụp thật nằm trong khung cửa sổ sáng, co theo chiều rộng vùng mock, không phóng to.
   ============================================================ */
/* màu nhấn: CRM #FFB067, dải #F59E0B → #EF4444 · HRM #7EE3A6, dải #7EE3A6 → #66B4F0 */
.p8c-crm{--k1:#F59E0B;--k2:#EF4444;--kc:#FFB067;--kc2:#FFD1A6;--kglow:rgba(245,158,11,.45);--kbg:rgba(245,158,11,.14)}
.p8c-hrm{--k1:#7EE3A6;--k2:#66B4F0;--kc:#7EE3A6;--kc2:#BFF3D5;--kglow:rgba(126,227,166,.42);--kbg:rgba(126,227,166,.14)}
.p8c-crm .eyebrow,.p8c-hrm .eyebrow{color:var(--kc)}
.p8c-crm .eyebrow::before,.p8c-hrm .eyebrow::before{background:linear-gradient(90deg,var(--k1),var(--k2))}
.p8c-crm h1 .ac{background:linear-gradient(90deg,#FFC46B,#FF8A8A);-webkit-background-clip:text;background-clip:text;color:transparent}
.p8c-hrm h1 .ac{background:linear-gradient(90deg,#9FF0C0,#66B4F0);-webkit-background-clip:text;background-clip:text;color:transparent}
.p8c-crm .pill-eyebrow,.p8c-hrm .pill-eyebrow{color:var(--kc);border-color:color-mix(in srgb,var(--kc) 40%,transparent);background:color-mix(in srgb,var(--kc) 12%,transparent)}
.p8c-crm .pill-eyebrow::before,.p8c-hrm .pill-eyebrow::before{background:var(--kc);box-shadow:0 0 12px var(--kc)}
.p8c-crm .bullets li i,.p8c-hrm .bullets li i{color:var(--kc)}
.p8c-crm .card .num,.p8c-hrm .card .num{color:var(--kc)}

/* ---------- C01 và H01 · mở phần: chữ trái, orbit trên phải, thẻ dưới (một phím, hiện so le bằng --d) ---------- */
.p8c-sec .txt{top:170px;width:980px}
.p8c-sec h1{font-size:92px;line-height:1.02;margin:0 0 16px;letter-spacing:-.02em}
.p8c-sec .tag{font-size:31px;margin:0 0 26px;color:var(--kc)}
.p8c-sec .lead{font-size:24px;max-width:860px}
.p8c-sec .orbit.v6{left:auto;right:150px;top:92px;width:600px;height:600px}
.p8c-sec .orbit.v6 .halo{inset:-140px;background:radial-gradient(circle,var(--kglow) 0%,color-mix(in srgb,var(--kglow) 30%,transparent) 42%,transparent 68%)}
.p8c-sec .orbit.v6 .core{box-shadow:0 0 0 12px rgba(255,255,255,.05),0 0 64px var(--kglow)}
.p8c-sec .cards{grid-template-columns:repeat(5,1fr);gap:18px;bottom:64px}
.p8c-sec.four .cards{grid-template-columns:repeat(4,1fr)}
.p8c-sec .cards .card{padding:22px 22px 20px;border-top:0;position:relative;overflow:hidden;display:flex;flex-direction:column}
.p8c-sec .cards .card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--k1),var(--k2))}
.p8c-sec .cards .icons{gap:8px;margin-bottom:14px;flex-wrap:wrap}
.p8c-sec .cards .icons img{width:34px;height:34px}
.p8c-sec .cards .num{font-size:13px;letter-spacing:.2em;color:var(--kc2);margin-bottom:10px;display:block;font-weight:700}
.p8c-sec .cards h3{font-size:20px;line-height:1.25;margin-bottom:8px;min-height:50px}
.p8c-sec .cards p{font-size:15.5px;line-height:1.45}

/* ---------- C02 · hành trình khách hàng: năm chặng nối nhau trái sang phải, một phím, hiện so le ---------- */
.p8c-journey .hd{margin-bottom:0}
.p8c-journey .hd h1{font-size:46px;margin-bottom:8px}
.p8c-journey .hd .lead{font-size:21px;max-width:1500px}
.p8c-journey .flow{position:absolute;left:var(--pad);right:var(--pad);top:372px;display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr;align-items:stretch}
.p8c-journey .flow::before{content:"";position:absolute;left:40px;right:calc((100% - 4*34px)/5 - 20px);top:31px;height:2px;background:linear-gradient(90deg,var(--k1),var(--k2));opacity:.55;z-index:0}
.p8c-journey .stg{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch}
.p8c-journey .stg .dot{width:62px;height:62px;border-radius:50%;margin:0 0 18px;display:grid;place-items:center;font-size:19px;font-weight:700;letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,var(--k1),var(--k2));box-shadow:0 0 0 8px rgba(11,27,51,.9),0 0 0 9px rgba(255,255,255,.12),0 16px 30px -12px rgba(0,0,0,.7)}
.p8c-journey .stg .card{flex:1;padding:22px 22px 20px;display:flex;flex-direction:column}
.p8c-journey .stg .en{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--kc2);margin-bottom:8px}
.p8c-journey .stg h3{font-size:22px;line-height:1.25;margin:0 0 16px;min-height:56px}
.p8c-journey .stg .card p{font-size:15.5px;line-height:1.45;margin:0 0 16px;color:var(--t2);font-weight:300}
.p8c-journey .stg .apps{display:grid;gap:8px}
.p8c-journey .stg .app{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:7px 12px;font-size:16px;font-weight:500;line-height:1.15}
.p8c-journey .stg .app img{width:28px;height:28px;flex:none}
.p8c-journey .stg .app em{display:block;font-style:normal;font-size:13px;font-weight:400;color:var(--t3);margin-top:2px}
.p8c-journey .arw{position:relative;z-index:1;align-self:start;height:62px;display:grid;place-items:center}
.p8c-journey .arw::before{content:"";width:14px;height:14px;border-top:3px solid var(--kc);border-right:3px solid var(--kc);transform:rotate(45deg);opacity:.9}
.p8c-journey .foot-tag{bottom:48px;font-size:19px}
.p8c-journey .foot-tag::before{background:linear-gradient(90deg,var(--k1),var(--k2))}

/* ---------- .s-mockfull.side.p8c-app · cột chữ trái 400px, ảnh chụp hoặc mock lớn bên phải (1260x912) ---------- */
.s-mockfull.side.p8c-app .mf-head{width:400px;top:96px;bottom:60px;gap:22px}
.s-mockfull.side.p8c-app .mf-head .hl,.s-mockfull.side.p8c-app .mf-head .aside{max-width:400px}
.s-mockfull.side.p8c-app .mf-head .eyebrow{font-size:13px;letter-spacing:.12em;margin-bottom:14px;white-space:normal;line-height:1.4}
.s-mockfull.side.p8c-app .mf-head h1{font-size:36px;line-height:1.15;max-height:calc(4 * 1.15em)}
.s-mockfull.side.p8c-app .mf-head .hl .lead{font-size:17px;line-height:1.5;color:var(--t3);max-width:400px;margin-top:14px}
.s-mockfull.side.p8c-app .mf-head .aside .bullets{gap:14px}
.s-mockfull.side.p8c-app .mf-head .aside .bullets li{font-size:17px;line-height:1.42;grid-template-columns:30px 1fr;gap:12px}
.s-mockfull.side.p8c-app .mf-head .aside .bullets li i{width:30px;height:30px;font-size:12.5px;border-radius:8px}
.s-mockfull.side.p8c-app .mf-mock{left:calc(var(--pad) + 400px + 40px);right:100px;top:124px;bottom:44px}
/* ý mới nhất sáng và số tô màu bộ; các ý trước mờ đi (cả cột trái .p8c-app lẫn dải phải .p8c-wide) */
.p8c-app .bullets li.on i,.p8c-wide .bullets li.on i{background:var(--glass2);border-color:var(--line2);color:var(--kc)}
.p8c-app .bullets li.on:has(~ li.on),.p8c-wide .bullets li.on:has(~ li.on){color:var(--t3)}
.p8c-app .bullets li.on:has(~ li.on) b,.p8c-wide .bullets li.on:has(~ li.on) b{color:var(--t2)}
.p8c-app .bullets li.on:not(:has(~ li.on)) i,.p8c-wide .bullets li.on:not(:has(~ li.on)) i{background:linear-gradient(135deg,var(--k1),var(--k2));border-color:transparent;color:#fff}

/* ---------- ảnh chụp thật trong khung cửa sổ sáng: co theo chiều rộng vùng mock, canh giữa, lề tối ---------- */
.p8c-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.p8c-shot .win{width:100%;padding:10px;border-radius:18px;background:linear-gradient(180deg,#f4f6fb,#e4e9f3);border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.25)}
.p8c-shot .win img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(20,35,70,.12)}
/* ảnh chụp nào không muốn phóng đến 1260px thì đặt --shotw (ví dụ ảnh 1323px hiển thị đúng cỡ gốc) */
.p8c-shot .win.fixw{width:var(--shotw,100%)}

/* ---------- .s-mockfull.p8c-wide · mock keynote khổ rộng (People OS, Base Home): chữ trên, mock trải rộng 1680x760 ---------- */
.s-mockfull.p8c-wide .mf-head{max-height:236px;gap:56px}
.s-mockfull.p8c-wide .mf-head .hl{max-width:960px}
.s-mockfull.p8c-wide .mf-head .eyebrow{font-size:13.5px;letter-spacing:.12em;margin-bottom:14px}
.s-mockfull.p8c-wide .mf-head h1{font-size:42px;max-height:calc(2 * 1.15em)}
.s-mockfull.p8c-wide .mf-head .aside{flex:0 0 660px;max-width:660px;padding-top:54px}
.s-mockfull.p8c-wide .mf-head .aside .lead{font-size:18.5px;line-height:1.5}
.s-mockfull.p8c-wide .mf-head .aside .bullets{gap:10px}
.s-mockfull.p8c-wide .mf-head .aside .bullets li{font-size:17px;line-height:1.4}
.s-mockfull.p8c-wide .mf-mock{top:270px;bottom:56px}
/* mock keynote nền trong suốt: khung tối nhẹ để thẻ trắng nổi và mép mock tách khỏi nền */
.s-mockfull.p8c-wide.framed .mf-mock{background:rgba(3,10,26,.35)}
.s-mockfull.p8c-wide.framed .mf-mock .mock.bare{inset:14px 20px}

/* ---------- H15 · kết phần 3: Base Home, eyebrow và ac màu chung của deck ---------- */
.p8c-home .eyebrow{color:#9FD0F6}
.p8c-home .eyebrow::before{background:linear-gradient(90deg,#66B4F0,#A78BFA)}