/* ---- system-flow-a ---- */
/* system-flow-a: the hero "production line". A cobalt rail of six numbered stations; each = time chip, name, one line
of explanation and a mini mockup. The markup IS the finished frame (every mockup filled in, rail full, clock 07:00).
script.js only adds .is-live: rail fill + travelling lead ticket, active-station outline, clock, small pulses.
Layout by the root's content width: <620 vertical rail · 620+ 2 columns · 880+ 3 columns · 1120+ one row of six
(root ≈ 650 / 915 / 1155px wide). */
.m-system-flow-a{--sf-cg:20px;--sf-mint:#0A7558;position:relative;box-sizing:border-box;width:100%;container-type:inline-size;overflow:hidden;padding:18px 16px 20px;border:1px solid var(--x-line);border-radius:var(--x-radius);background:var(--x-paper);color:var(--x-text);font:14px/1.4 var(--x-font-body);text-align:left}
.m-system-flow-a *,.m-system-flow-a ::before,.m-system-flow-a ::after{box-sizing:border-box}
.m-system-flow-a i,.m-system-flow-a em{font-style:normal}
.m-system-flow-a b{font-weight:700}
/* header */
.m-system-flow-a__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:22px}
.m-system-flow-a__brand{display:flex;align-items:center;gap:10px;min-width:0}
.m-system-flow-a__emblem{flex:none;padding:4px 8px;border-radius:7px;background:var(--x-primary);color:#fff;font:700 11px/1.2 var(--x-font-ui)}
.m-system-flow-a__title{font:700 clamp(16px,1cqi + 11px,19px)/1.3 var(--x-font-body);color:var(--x-ink)} /* serif only for headings >= 28px */
.m-system-flow-a__clock{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--x-line);border-radius:999px;background:#fff;font:700 13px var(--x-font-ui);color:var(--x-ink);white-space:nowrap}
.m-system-flow-a__clock svg{color:var(--x-primary)}
.m-system-flow-a__clock b{display:inline-block;font-variant-numeric:tabular-nums}
.m-system-flow-a__clock span,.m-system-flow-a__clock em{font-weight:400;color:var(--x-muted)}
.m-system-flow-a__clock em{padding-left:7px;border-left:1px solid var(--x-line)}
/* rail + stations: vertical by default */
.m-system-flow-a__line{position:relative;display:grid;gap:22px}
.m-system-flow-a__st{position:relative;display:flex;flex-direction:column;min-width:0;padding-left:40px}
.m-system-flow-a__st::before,.m-system-flow-a__st::after{content:"";position:absolute;z-index:0;left:12px;top:14px;bottom:-22px;width:4px;border-radius:2px;background:var(--x-cobalt);transform-origin:0 0;transition:transform .62s var(--x-ease)}
.m-system-flow-a__st::before{background:var(--x-cobalt-soft);transition:none}
.m-system-flow-a__st:nth-child(6)::before,.m-system-flow-a__st:nth-child(6)::after{display:none}
.m-system-flow-a__node{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:8px}
.m-system-flow-a__dot{position:absolute;z-index:2;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--x-primary);color:#fff;font:700 13px/28px var(--x-font-ui);text-align:center;box-shadow:0 0 0 3px var(--x-paper)}
.m-system-flow-a__dot::after{content:"";position:absolute;inset:-5px;border:2px solid var(--x-cobalt);border-radius:50%;opacity:0}
.m-system-flow-a__time{position:relative;z-index:1;padding:2px 8px;border:1px solid var(--x-line);border-radius:999px;background:#fff;font:700 11px/16px var(--x-font-ui);color:var(--x-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-system-flow-a__name{margin-bottom:3px;font-size:15px;line-height:1.3;color:var(--x-ink)}
.m-system-flow-a__desc{margin:0 0 10px;font-size:13px;line-height:1.4;color:var(--x-muted)}
.m-system-flow-a__foot{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--x-line);font-size:15px;line-height:1.5}
/* the lead ticket (only exists while .is-live) */
.m-system-flow-a__packet{position:absolute;z-index:3;left:0;top:0;display:none;align-items:center;gap:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px var(--x-cobalt),var(--x-shadow);font:700 12px/24px var(--x-font-ui);color:var(--x-ink);white-space:nowrap;opacity:0;transition:transform .62s var(--x-ease),opacity .25s}
.m-system-flow-a__packet i{width:24px;height:24px;border-radius:50%;background:var(--x-primary);color:#fff;font-size:11px;text-align:center}
.m-system-flow-a__packet span{display:none}
.m-system-flow-a.is-live .m-system-flow-a__packet{display:flex}
.m-system-flow-a__packet.is-on{opacity:1}
.m-system-flow-a__packet.is-jump{transition:opacity .25s}
/* mockup shell (UI font, 11px minimum) */
.m-system-flow-a__mock{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-width:0;padding:9px;border:1px solid var(--x-line);border-radius:12px;background:#fff;box-shadow:var(--x-shadow-sm);font:11px/1.35 var(--x-font-ui);transition:transform .4s var(--x-ease)}
.m-system-flow-a__mock::after{content:"";position:absolute;inset:-4px;border:2px solid var(--x-cobalt);border-radius:15px;opacity:0;transition:opacity .3s;pointer-events:none}
.m-system-flow-a__mh{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding-bottom:7px;border-bottom:1px solid var(--x-line);color:var(--x-muted)}
.m-system-flow-a__mock b,.m-system-flow-a__mh b{color:var(--x-ink)}
.m-system-flow-a__mr{display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.m-system-flow-a__chip{display:inline-block;margin-left:auto;padding:1px 7px;border-radius:999px;background:#F9EBEB;color:var(--x-primary);font-weight:700}
.m-system-flow-a__chip--warm{background:#FDECE8;color:#A8321F}
.m-system-flow-a__av{flex:none;width:26px;height:26px;border-radius:50%;background:#7B5A80;color:#fff;font:700 11px/26px var(--x-font-ui);text-align:center}
.m-system-flow-a__av--b{background:#4C687C}
.m-system-flow-a__zl{flex:none;width:16px;height:16px;border-radius:5px;background:var(--x-zalo);color:#fff;font:700 11px/16px var(--x-font-ui);text-align:center}
.m-system-flow-a__zl--b{background:#4C687C}
.m-system-flow-a__cap{color:var(--x-muted);text-align:center}
.m-system-flow-a__mock small{font-size:11px;color:var(--x-muted)}
/* 1 · ads */
.m-system-flow-a__ad{--sf-c:#B86E12;display:flex;flex-direction:column;gap:1px;padding:6px 8px;border:1px solid var(--x-line);border-radius:8px}
.m-system-flow-a__ad--f{--sf-c:#4C687C}
.m-system-flow-a__ad--z{--sf-c:var(--x-zalo)}
.m-system-flow-a__ad--on{border-color:var(--x-cobalt);background:var(--x-cobalt-soft)}
.m-system-flow-a__src{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;color:var(--x-muted);font-weight:700}
.m-system-flow-a__src em::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--sf-c)}
.m-system-flow-a__click{display:inline-flex;align-items:center;gap:3px;margin-left:auto;padding:1px 6px;border-radius:999px;background:var(--x-cobalt);color:#fff}
/* 2 · landing form */
.m-system-flow-a__win{display:flex;align-items:center;gap:4px;margin:-9px -9px 2px;padding:6px 8px;border-bottom:1px solid var(--x-line);border-radius:11px 11px 0 0;background:var(--x-paper)}
.m-system-flow-a__win i{flex:none;width:7px;height:7px;border-radius:50%;background:#D8D0C6}
.m-system-flow-a__win span{flex:1;min-width:0;margin-left:2px;padding:1px 5px;border:1px solid var(--x-line);border-radius:5px;background:#fff;color:var(--x-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-system-flow-a__ft{font-size:12px}
.m-system-flow-a__fl{margin:2px 0 -4px;color:var(--x-muted)}
.m-system-flow-a__in{padding:4px 8px;border:1px solid var(--x-line);border-radius:7px;color:var(--x-ink)}
.m-system-flow-a__btn{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:3px;padding:6px;border-radius:8px;background:var(--sf-mint);color:#fff;font-weight:700}
/* 3 · CRM card */
.m-system-flow-a__who{display:flex;align-items:center;gap:7px;min-width:0}
.m-system-flow-a__who>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.m-system-flow-a__kv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;padding-top:5px;border-top:1px solid var(--x-paper-deep)}
.m-system-flow-a__kv span{color:var(--x-muted)}
.m-system-flow-a__kv b{margin-left:auto;text-align:right}
.m-system-flow-a .m-system-flow-a__amt{color:var(--x-primary)}
.m-system-flow-a__as{padding:5px 7px;border:1px solid var(--x-line);border-radius:8px;background:var(--x-paper)}
.m-system-flow-a__as small::before{content:"";display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--x-mint)}
/* 4 · n8n */
.m-system-flow-a__tog{position:relative;width:24px;height:14px;border-radius:7px;background:var(--x-mint)}
.m-system-flow-a__tog::after{content:"";position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#fff}
.m-system-flow-a__nb{display:flex;flex-direction:column;gap:6px;padding-left:18px}
.m-system-flow-a__nn{position:relative;display:flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid var(--x-line);border-radius:8px;background:#fff}
.m-system-flow-a__nn>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.m-system-flow-a__nd{flex:none;width:8px;height:8px;border-radius:50%;background:var(--x-mint);box-shadow:0 0 0 2px #CFEDE4}
.m-system-flow-a__nb .m-system-flow-a__nn::before,.m-system-flow-a__nb .m-system-flow-a__nn::after{content:"";position:absolute;left:-12px;background:var(--x-cobalt)}
.m-system-flow-a__nb .m-system-flow-a__nn::before{top:-8px;bottom:-1px;width:2px}
.m-system-flow-a__nb .m-system-flow-a__nn:last-child::before{bottom:50%}
.m-system-flow-a__nb .m-system-flow-a__nn::after{top:50%;width:12px;height:2px;margin-top:-1px}
/* 5 · sales rep's phone + AI chat */
.m-system-flow-a__duo{flex-direction:row;align-items:flex-start;gap:10px}
.m-system-flow-a__ph{flex:none;display:flex;flex-direction:column;gap:6px;width:116px}
.m-system-flow-a__phone{position:relative;aspect-ratio:9/19.5;padding:4px;border-radius:19px;background:#1C1A21}
.m-system-flow-a__island{position:absolute;top:8px;left:50%;width:28px;height:7px;margin-left:-14px;border-radius:4px;background:#1C1A21}
.m-system-flow-a__scr{display:flex;flex-direction:column;gap:5px;height:100%;padding:20px 5px 0;border-radius:15px;background:#EEE7DD;overflow:hidden}
.m-system-flow-a__lock{margin:2px 0 4px;font-size:22px;font-weight:700;line-height:1;text-align:center;color:var(--x-ink)}
.m-system-flow-a__notif{display:flex;flex-direction:column;padding:5px 6px;border-radius:9px;background:#fff;line-height:1.25;text-wrap:pretty}
.m-system-flow-a__nh{display:flex;align-items:center;gap:4px;margin-bottom:2px;color:var(--x-muted)}
.m-system-flow-a__nh b{flex:1}
.m-system-flow-a__nh .m-system-flow-a__zl{width:14px;height:14px;border-radius:4px;line-height:14px}
.m-system-flow-a__chat{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.m-system-flow-a__bub{align-self:flex-start;max-width:94%;padding:6px 9px;border-radius:4px 11px 11px;background:var(--x-paper-deep);color:var(--x-ink);text-wrap:pretty}
.m-system-flow-a__bub time{display:block;margin-top:2px;color:var(--x-muted);text-align:right}
.m-system-flow-a__bub--ai{align-self:flex-end;border-radius:11px 4px 11px 11px;background:var(--x-zalo);color:#fff}
.m-system-flow-a .m-system-flow-a__bub--ai time{color:#fff}
.m-system-flow-a__ai{display:block;width:fit-content;margin-bottom:3px;padding:0 6px;border:1px solid #fff;border-radius:999px;font-weight:700}
/* 6 · morning report */
.m-system-flow-a__rp{display:flex;flex-direction:column;gap:4px;padding:8px 9px;border-radius:4px 11px 11px;background:var(--x-paper-deep)}
.m-system-flow-a__rt{font-size:12px}
.m-system-flow-a__rp .m-system-flow-a__kv{padding-top:0;border:0}
.m-system-flow-a__next{display:flex;align-items:center;gap:5px;margin-top:2px;padding:5px 7px;border-radius:7px;background:#fff;color:var(--x-primary);font-weight:700}
.m-system-flow-a__next svg{flex:none}
/* live states (script.js). Stations get is-todo / is-active / is-done; nothing is ever hidden. */
.m-system-flow-a.is-live .m-system-flow-a__st:not(.is-done)::after{transform:scale(1,0)}
.m-system-flow-a.is-reset .m-system-flow-a__st::after{transition:none}
.m-system-flow-a .is-todo .m-system-flow-a__dot{background:#fff;color:var(--x-primary);box-shadow:inset 0 0 0 2px var(--x-primary),0 0 0 3px var(--x-paper)}
.m-system-flow-a .is-active .m-system-flow-a__dot{background:var(--x-cobalt)}
.m-system-flow-a .is-active .m-system-flow-a__dot::after{animation:m-system-flow-a-pulse 1.4s ease-out infinite}
.m-system-flow-a .is-active .m-system-flow-a__time{border-color:var(--x-cobalt);color:var(--x-cobalt)}
.m-system-flow-a .is-active .m-system-flow-a__mock{transform:translateY(-3px)}
.m-system-flow-a .is-active .m-system-flow-a__mock::after{opacity:1}
.m-system-flow-a__hl{position:relative}
.m-system-flow-a__hl::after{content:"";position:absolute;inset:-3px;border:2px solid var(--x-cobalt);border-radius:inherit;opacity:0;pointer-events:none}
.m-system-flow-a .is-active .m-system-flow-a__hl{animation:m-system-flow-a-pop .5s var(--x-ease) .35s}
.m-system-flow-a .is-active .m-system-flow-a__hl::after{animation:m-system-flow-a-ring 1.1s ease-out .35s 2}
.m-system-flow-a .is-active .m-system-flow-a__nd{animation:m-system-flow-a-blip .6s ease-out .2s}
.m-system-flow-a .is-active .m-system-flow-a__nb .m-system-flow-a__nn:nth-child(1) .m-system-flow-a__nd{animation-delay:.5s}
.m-system-flow-a .is-active .m-system-flow-a__nb .m-system-flow-a__nn:nth-child(2) .m-system-flow-a__nd{animation-delay:.65s}
.m-system-flow-a .is-active .m-system-flow-a__nb .m-system-flow-a__nn:nth-child(3) .m-system-flow-a__nd{animation-delay:.8s}
.m-system-flow-a__clock .is-tick{animation:m-system-flow-a-tick .45s var(--x-ease)}
@keyframes m-system-flow-a-pulse{0%{opacity:.9;transform:scale(.75)}100%{opacity:0;transform:scale(1.4)}}
@keyframes m-system-flow-a-ring{0%{opacity:0;transform:scale(.97)}30%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes m-system-flow-a-pop{40%{transform:scale(1.04)}}
@keyframes m-system-flow-a-blip{40%{transform:scale(1.9)}}
@keyframes m-system-flow-a-tick{from{opacity:.2;transform:translateY(5px)}}
@container (max-width:319.9px){
.m-system-flow-a__st{padding-left:36px}
.m-system-flow-a__duo{flex-direction:column;align-items:center}
.m-system-flow-a__chat{align-self:stretch}
}
/* 620+: stations in a grid. Subgrid lines up time / name / text / mockup across each row; the rail runs along the
row of dots and stops at the end of each row. */
@container (min-width:620px){
.m-system-flow-a__line{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sf-cg)}
.m-system-flow-a__st{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;margin-bottom:26px;padding:0}
.m-system-flow-a__st::before,.m-system-flow-a__st::after{left:28px;right:calc(0px - var(--sf-cg));top:12px;bottom:auto;width:auto;height:4px}
.m-system-flow-a.is-live .m-system-flow-a__st:not(.is-done)::after{transform:scale(0,1)}
.m-system-flow-a__node{justify-content:space-between}
.m-system-flow-a__dot{position:relative}
.m-system-flow-a__packet{padding-right:9px}
.m-system-flow-a__packet span{display:inline}
.m-system-flow-a__foot{margin-top:0}
.m-system-flow-a__top,.m-system-flow-a__line,.m-system-flow-a__foot{margin-inline:8px}
}
@container (min-width:620px) and (max-width:879.9px){
.m-system-flow-a__st:nth-child(2n)::before,.m-system-flow-a__st:nth-child(2n)::after{display:none}
}
@container (min-width:880px) and (max-width:1119.9px){
.m-system-flow-a__line{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-system-flow-a__st:nth-child(3n)::before,.m-system-flow-a__st:nth-child(3n)::after{display:none}
}
@container (min-width:1120px){
.m-system-flow-a{--sf-cg:14px}
.m-system-flow-a__line{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.75fr) minmax(0,1fr)}
.m-system-flow-a__st{margin-bottom:0}
.m-system-flow-a__opt,.m-system-flow-a__packet span{display:none}
.m-system-flow-a__packet{padding-right:0}
.m-system-flow-a__foot{margin-top:22px}
.m-system-flow-a__win span{padding-inline:3px}
}
@media (prefers-reduced-motion:reduce){
.m-system-flow-a *,.m-system-flow-a ::before,.m-system-flow-a ::after{animation:none!important;transition:none!important}
}
/* ---------- compact variant .m-system-flow-strip (strip.html): pain line + 5 numbered steps on the same cobalt rail.
5 in a row ≥820px · 3 + 2 rows 480–819px · vertical list <480px. Static, no script. */
.m-system-flow-strip{box-sizing:border-box;width:100%;container-type:inline-size;padding:18px 20px 22px;border:1px solid var(--x-line);border-radius:var(--x-radius-sm);background:#fff;color:var(--x-text);font:15px/1.45 var(--x-font-body);text-align:left}
.m-system-flow-strip *,.m-system-flow-strip ::before,.m-system-flow-strip ::after{box-sizing:border-box}
.m-system-flow-strip__pain{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:10px 14px;border-left:3px solid var(--x-primary);border-radius:0 10px 10px 0;background:var(--x-paper);color:var(--x-ink)}
.m-system-flow-strip__pain svg{flex:none;margin-top:3px;color:var(--x-primary)}
.m-system-flow-strip__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 0;margin:0;padding:0;list-style:none}
.m-system-flow-strip__step{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0 18px 0 0}
.m-system-flow-strip__step::before,.m-system-flow-strip__step::after{content:"";position:absolute;color:var(--x-cobalt)}
.m-system-flow-strip__step::before{left:34px;right:8px;top:13px;height:2px;background:currentColor}
.m-system-flow-strip__step::after{right:8px;top:10px;width:8px;height:8px;border:solid;border-width:2px 2px 0 0;transform:rotate(45deg)}
.m-system-flow-strip__step:last-child::before,.m-system-flow-strip__step:last-child::after{display:none}
.m-system-flow-strip__num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--x-primary);color:#fff;font:700 13px/28px var(--x-font-ui);text-align:center}
.m-system-flow-strip__label{font-weight:600;line-height:1.35;color:var(--x-ink)}
@container (min-width:480px) and (max-width:819.9px){
.m-system-flow-strip__steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-system-flow-strip__step:nth-child(3)::before,.m-system-flow-strip__step:nth-child(3)::after{display:none}
}
@container (max-width:479.9px){
.m-system-flow-strip__steps{grid-template-columns:minmax(0,1fr);gap:24px}
.m-system-flow-strip__step{flex-direction:row;gap:12px;padding:0}
.m-system-flow-strip__label{padding-top:3px}
.m-system-flow-strip__step::before{left:13px;right:auto;top:32px;bottom:-17px;width:2px;height:auto}
.m-system-flow-strip__step::after{left:10px;right:auto;top:auto;bottom:-16px;transform:rotate(135deg)}
}
/* ---- crm-board ---- */
/* crm-board — Bitrix24-style CRM kanban inside a browser-window frame.
Uses tokens from ../_tokens.css. Every selector starts with .m-crm-board. */
.m-crm-board {
--cb-gap: 10px;
--cb-card-h: 110px; /* fixed card height keeps the board stable while cards move */
--cb-peek: 30px; /* how much of a 4th card shows at the bottom of a column */
--cb-stub: 28px; /* visible edge of the next, hidden column (a scroll hint without cut text) */
--cb-av1-bg: #EBD9C9; --cb-av1-fg: #7C4A24;
--cb-av2-bg: #D5E3DA; --cb-av2-fg: #2C5C46;
--cb-av3-bg: #DED8EC; --cb-av3-fg: #4B3F7A;
position: relative;
container-type: inline-size;
width: 100%;
box-sizing: border-box;
margin: 0;
font-family: var(--x-font-ui);
font-size: 12px;
line-height: 1.3;
color: var(--x-text);
text-align: left;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 14px;
box-shadow: var(--x-shadow);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.m-crm-board *,
.m-crm-board *::before,
.m-crm-board *::after { box-sizing: border-box; }
.m-crm-board svg { display: block; flex: 0 0 auto; }
/* ---------- browser chrome ---------- */
.m-crm-board__chrome {
display: flex; align-items: center; gap: 12px;
height: 38px; padding: 0 14px;
background: var(--x-paper-deep);
border-bottom: 1px solid var(--x-line);
}
.m-crm-board__chrome::after { content: ""; flex: 0 0 42px; }
.m-crm-board__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.m-crm-board__dots i { width: 10px; height: 10px; border-radius: 50%; background: #DCD4CA; }
.m-crm-board__dots i:nth-child(1) { background: #E7A79C; }
.m-crm-board__dots i:nth-child(2) { background: #E9C98A; }
.m-crm-board__dots i:nth-child(3) { background: #A9D1B3; }
.m-crm-board__url {
display: flex; align-items: center; gap: 6px;
flex: 1 1 auto; min-width: 0; max-width: 460px; height: 24px;
margin: 0 auto; padding: 0 10px;
background: #fff; border: 1px solid var(--x-line); border-radius: 7px;
color: var(--x-muted); font-size: 11.5px;
}
.m-crm-board__url > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- app header ---------- */
.m-crm-board__head {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid var(--x-line);
}
.m-crm-board__title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.m-crm-board__title {
font-size: 14px; font-weight: 600; color: var(--x-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__tag {
flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
background: var(--x-paper-deep); color: var(--x-muted);
font-size: 11px; white-space: nowrap;
}
.m-crm-board__total {
flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
line-height: 1.2; white-space: nowrap;
}
.m-crm-board__total-label { font-size: 11px; color: var(--x-muted); }
.m-crm-board__total-value {
display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--x-ink);
transform-origin: right center; transition: scale 0.2s ease;
}
.m-crm-board__user {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--x-primary); color: #fff;
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
/* ---------- toolbar ---------- */
.m-crm-board__bar {
display: flex; align-items: center; gap: 10px;
height: 46px; padding: 0 16px;
border-bottom: 1px solid var(--x-line);
}
.m-crm-board__tabs { display: flex; align-self: stretch; gap: 2px; flex: 0 0 auto; }
.m-crm-board__tab {
position: relative; display: flex; align-items: center;
padding: 0 10px; font-size: 12px; color: var(--x-muted); white-space: nowrap;
}
.m-crm-board__tab.is-active { color: var(--x-ink); font-weight: 600; }
.m-crm-board__tab.is-active::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
height: 2px; border-radius: 2px; background: var(--x-primary);
}
.m-crm-board__search {
flex: 1 1 140px; min-width: 0; max-width: 320px; height: 30px;
display: flex; align-items: center; gap: 6px; padding: 0 10px;
border: 1px solid var(--x-line); border-radius: 8px;
color: var(--x-muted); font-size: 12px;
}
.m-crm-board__search span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-crm-board__btn {
flex: 0 0 auto; margin-left: auto; height: 30px;
display: flex; align-items: center; gap: 5px; padding: 0 12px 0 10px;
background: var(--x-primary); color: #fff; border-radius: 8px;
font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* ---------- board ----------
Only whole columns are shown: --cb-cols of them fill the width (4 on wide boards, fewer in narrow containers,
see the container queries below). The next column then shows a --cb-stub wide edge with its text hidden and
faded out, like a kanban that scrolls sideways, so no card text is ever cut. */
.m-crm-board__board {
--cb-pad: 14px;
--cb-cols: 4;
--cb-tail: 0px; /* room kept at the right for the next column's edge */
position: relative; display: flex; gap: var(--cb-gap);
padding: var(--cb-pad); overflow: hidden;
background: var(--x-paper);
}
.m-crm-board__col {
--cb-accent: #8A8495;
flex: 0 0 auto;
width: calc((100% - (var(--cb-cols) - 1) * var(--cb-gap) - var(--cb-tail)) / var(--cb-cols));
padding: 8px; border-radius: 10px;
background: var(--x-paper-deep);
}
.m-crm-board__col[data-stage="talk"] { --cb-accent: var(--x-coral); }
.m-crm-board__col[data-stage="quote"] { --cb-accent: var(--x-primary); }
.m-crm-board__col[data-stage="won"] { --cb-accent: var(--x-mint); }
.m-crm-board__colhead {
display: grid; grid-template-columns: 1fr auto auto; column-gap: 6px; align-items: center;
grid-template-areas: "bar bar bar" "name count add" "sum sum sum";
padding: 2px 4px 8px;
}
.m-crm-board__colhead::before {
content: ""; grid-area: bar; height: 3px; margin-bottom: 8px;
border-radius: 2px; background: var(--cb-accent);
}
.m-crm-board__colname {
grid-area: name; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--x-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__count {
grid-area: count; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--x-line);
font-size: 11px; font-weight: 600; color: var(--x-text);
transition: scale 0.2s ease;
}
.m-crm-board__count.is-pop,
.m-crm-board__total-value.is-pop { scale: 1.18; }
.m-crm-board__coladd {
grid-area: add; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
color: var(--x-muted);
}
.m-crm-board__colsum {
grid-area: sum; margin-top: 3px; font-size: 11px; color: var(--x-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__cards {
display: flex; flex-direction: column; gap: var(--cb-gap);
height: calc(3 * var(--cb-card-h) + 3 * var(--cb-gap) + var(--cb-peek));
overflow: hidden;
}
/* ---------- card ---------- */
.m-crm-board__card {
position: relative; z-index: 0; flex: 0 0 auto;
height: var(--cb-card-h); padding: 10px 12px;
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--x-line); border-radius: 8px;
box-shadow: var(--x-shadow-sm); overflow: hidden;
transition: translate 0.5s var(--x-ease), opacity 0.4s ease;
}
.m-crm-board__card.is-enter { translate: 0 -14px; opacity: 0; }
.m-crm-board__card.is-ghosted { visibility: hidden; }
.m-crm-board__card.is-new::after {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: rgba(128, 0, 0, 0.07);
box-shadow: inset 0 0 0 1.5px rgba(128, 0, 0, 0.4);
animation: m-crm-board-glow 2.6s var(--x-ease) forwards;
}
@keyframes m-crm-board-glow { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
.m-crm-board__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.m-crm-board__foot { margin-top: auto; }
.m-crm-board__name {
flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--x-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__co {
margin-top: 1px; font-size: 11.5px; color: var(--x-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__amt { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--x-ink); white-space: nowrap; }
.m-crm-board__chip {
flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; line-height: 1;
background: var(--x-paper-deep); color: var(--x-text);
font-size: 11px; white-space: nowrap;
}
.m-crm-board__chip--zalo { background: #E6F0FF; color: var(--x-zalo); }
.m-crm-board__age {
min-width: 0; font-size: 11px; color: var(--x-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-crm-board__av {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
background: var(--cb-av1-bg); color: var(--cb-av1-fg);
}
.m-crm-board__av--2 { background: var(--cb-av2-bg); color: var(--cb-av2-fg); }
.m-crm-board__av--3 { background: var(--cb-av3-bg); color: var(--cb-av3-fg); }
/* ---------- moving ghost (script.js) ---------- */
.m-crm-board__ghost {
position: absolute; z-index: 10; margin: 0; pointer-events: none; overflow: visible;
transition: translate 0.75s var(--x-ease), scale 0.25s ease, rotate 0.25s ease;
}
.m-crm-board__ghost::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
box-shadow: var(--x-shadow-lift); opacity: 0; transition: opacity 0.25s ease;
}
.m-crm-board__ghost.is-lift { scale: 1.04; rotate: -1.5deg; }
.m-crm-board__ghost.is-lift::before { opacity: 1; }
.m-crm-board__pool { display: none !important; }
/* ---------- responsive (container queries on the root) ----------
A column needs ~200px for the longest card row ("Google Ads" + "2 ngày trước"), so 4 / 3 / 2 / 1 whole columns
fit from root widths of ~858 / ~672 / ~462 px. */
@container (max-width: 857.98px) {
.m-crm-board__board {
--cb-cols: 3;
--cb-tail: calc(var(--cb-gap) + var(--cb-stub) - var(--cb-pad));
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--cb-stub)), rgba(0, 0, 0, 0.25));
mask-image: linear-gradient(90deg, #000 calc(100% - var(--cb-stub)), rgba(0, 0, 0, 0.25));
}
.m-crm-board__col:nth-child(4) * { color: transparent; }
}
@container (max-width: 671.98px) {
.m-crm-board__board { --cb-cols: 2; }
.m-crm-board__col:nth-child(3) * { color: transparent; }
}
@container (max-width: 560px) {
.m-crm-board__search, .m-crm-board__tag { display: none; }
}
@container (max-width: 480px) {
.m-crm-board__board { --cb-pad: 10px; }
.m-crm-board__path { display: none; }
.m-crm-board__chrome { padding: 0 12px; }
.m-crm-board__head, .m-crm-board__bar { padding-left: 12px; padding-right: 12px; }
.m-crm-board__tab { padding: 0 8px; }
.m-crm-board__tab.is-active::after { left: 8px; right: 8px; }
}
@container (max-width: 461.98px) {
.m-crm-board__board { --cb-cols: 1; }
.m-crm-board__col:nth-child(2) * { color: transparent; }
}
@container (max-width: 352px) {
.m-crm-board__chrome::after { flex-basis: 0; }
.m-crm-board__title { white-space: normal; overflow: visible; line-height: 1.2; } /* wraps, never "…" */
.m-crm-board__head { gap: 8px; } /* room for a total that has grown past 1 billion */
.m-crm-board__btn { padding: 0 9px; }
.m-crm-board__btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.m-crm-board__card, .m-crm-board__ghost, .m-crm-board__count, .m-crm-board__total-value { transition: none; }
.m-crm-board__card.is-new::after { animation: none; opacity: 0; }
}
/* ---- automation-canvas ---- */
/* automation-canvas — n8n-style workflow canvas mockup. All selectors start with .m-automation-canvas
Horizontal scene = 1280 × 300 scene units (positions below). script.js scales it to fit, or switches the
root to .is-vertical (vertical chain, positions set inline) when the fit would make text smaller than 10 px. */
.m-automation-canvas {
--ac-wire: #CBC4BA;
--ac-port: #B6AEA4;
--ac-sticky: #FFF6D2;
--ac-sticky-line: #EBDA92;
--ac-sep: #CFC8BF;
position: relative;
container-type: inline-size;
width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.3;
color: var(--x-text);
background: var(--x-paper);
border: 1px solid var(--x-line);
border-radius: var(--x-radius-sm);
box-shadow: var(--x-shadow);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.m-automation-canvas *,
.m-automation-canvas *::before,
.m-automation-canvas *::after { box-sizing: border-box; }
.m-automation-canvas svg { display: block; flex: none; }
/* ---------- toolbar ---------- */
.m-automation-canvas__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 46px;
padding: 0 12px 0 8px;
background: #fff;
border-bottom: 1px solid var(--x-line);
}
.m-automation-canvas__bar-left {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex: 1 1 auto;
}
.m-automation-canvas__back {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--x-muted);
flex: none;
}
.m-automation-canvas__crumb { color: var(--x-muted); flex: none; white-space: nowrap; }
.m-automation-canvas__crumb::after { content: "/"; margin-left: 7px; color: var(--ac-sep); }
.m-automation-canvas__title {
font-weight: 600;
line-height: 1.2;
color: var(--x-ink);
overflow-wrap: break-word; /* keep TB_TITLE short; if it ever outgrows the bar it wraps, it is never cut */
min-width: 0;
}
.m-automation-canvas__bar-right { display: flex; align-items: center; gap: 10px; flex: none; }
.m-automation-canvas__tabs {
display: inline-flex;
padding: 2px;
background: var(--x-paper-deep);
border-radius: 8px;
}
.m-automation-canvas__tab {
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
line-height: 16px;
color: var(--x-muted);
white-space: nowrap;
}
.m-automation-canvas__tab.is-active {
background: #fff;
color: var(--x-ink);
font-weight: 600;
box-shadow: var(--x-shadow-sm);
}
.m-automation-canvas__switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--x-text); white-space: nowrap; }
.m-automation-canvas__switch-track { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--x-mint); flex: none; }
.m-automation-canvas__switch-knob {
position: absolute;
top: 2px;
left: 14px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(21, 18, 27, 0.25);
}
.m-automation-canvas__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px 6px 9px;
border-radius: 8px;
background: var(--x-primary);
color: #fff;
font-size: 12px;
line-height: 16px;
font-weight: 600;
white-space: nowrap;
}
/* ---------- viewport / scene ---------- */
.m-automation-canvas__viewport {
position: relative;
width: 100%;
height: var(--ach, var(--ac-h-canvas));
overflow: hidden;
background: var(--x-paper);
}
/* Pre-JS height = what script.js will measure (canvas at the 1240px wide column; vertical chain below 1082px of
content width, note beside it from 680px, below it under that; node text wraps at the 288px container of a 320px
phone), so nothing shifts on load. Measured vi / en. */
.m-automation-canvas { --ac-h-canvas: 329px; --ac-h-chain: 606px; --ac-h-chain-note: 706px; --ac-h-chain-xs: 774px; }
.m-automation-canvas:lang(en) { --ac-h-canvas: 347px; --ac-h-chain-note: 724px; --ac-h-chain-xs: 794px; }
@container (max-width: 1081px) { .m-automation-canvas__viewport { height: var(--ach, var(--ac-h-chain)); } }
@container (max-width: 679px) { .m-automation-canvas__viewport { height: var(--ach, var(--ac-h-chain-note)); } }
@container (max-width: 317px) { .m-automation-canvas__viewport { height: var(--ach, var(--ac-h-chain-xs)); } }
.m-automation-canvas__scene {
position: absolute;
left: 0;
top: 0;
width: 1280px;
height: 300px;
transform-origin: 0 0;
will-change: transform;
}
.m-automation-canvas__wires {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
/* wires */
.m-automation-canvas__wire-base { fill: none; stroke: var(--ac-wire); stroke-width: 2; stroke-linecap: round; }
.m-automation-canvas__wire-hot {
fill: none;
stroke: var(--x-cobalt);
stroke-width: 2.5;
stroke-linecap: round;
opacity: 0;
transition: opacity 0.22s var(--x-ease);
}
.m-automation-canvas__wire-arrow { fill: var(--ac-wire); }
.m-automation-canvas__wire.is-hot .m-automation-canvas__wire-hot { opacity: 1; }
.m-automation-canvas__wire.is-hot .m-automation-canvas__wire-arrow { fill: var(--x-cobalt); }
/* packet */
.m-automation-canvas__packet { opacity: 0; transition: opacity 0.15s linear; }
.m-automation-canvas__packet.is-on { opacity: 1; }
.m-automation-canvas__packet-ring { fill: #fff; stroke: var(--x-cobalt); stroke-width: 2; }
.m-automation-canvas__packet-dot { fill: var(--x-cobalt); }
/* ---------- nodes (scene text ≥ 12 px so a fit zoom of 0.834 still renders ≥ 10 px) ---------- */
.m-automation-canvas__node {
position: absolute;
width: 272px;
height: 70px;
padding: 10px 10px 0;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 10px;
box-shadow: var(--x-shadow-sm);
}
.m-automation-canvas__node::after {
content: "";
position: absolute;
inset: -4px;
border: 2px solid var(--x-cobalt);
border-radius: 13px;
opacity: 0;
transition: opacity 0.2s var(--x-ease);
pointer-events: none;
}
.m-automation-canvas__node.is-running::after { opacity: 1; }
/* 4 columns × 2 rows: trigger → IF → CRM → Zalo; Sheets fans out from CRM, the "no" branch drops to row 2 */
.m-automation-canvas__node[data-node="1"] { left: 24px; top: 40px; }
.m-automation-canvas__node[data-node="2"] { left: 344px; top: 40px; }
.m-automation-canvas__node[data-node="3"] { left: 664px; top: 40px; }
.m-automation-canvas__node[data-node="4"] { left: 984px; top: 40px; }
.m-automation-canvas__node[data-node="5"] { left: 984px; top: 174px; }
.m-automation-canvas__node[data-node="6"] { left: 664px; top: 174px; }
.m-automation-canvas__head { display: flex; align-items: flex-start; gap: 8px; }
.m-automation-canvas__icon {
flex: none;
width: 26px;
height: 26px;
margin-top: 4px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--x-paper-deep);
color: var(--x-muted);
}
.m-automation-canvas__node--trigger .m-automation-canvas__icon { background: var(--x-cobalt-soft); color: var(--x-cobalt); }
.m-automation-canvas__node--if .m-automation-canvas__icon { background: #FFEBE6; color: #E0553F; }
.m-automation-canvas__node--crm .m-automation-canvas__icon { background: #F6E6E6; color: var(--x-primary); }
.m-automation-canvas__node--zalo .m-automation-canvas__icon { background: #E6F0FF; color: var(--x-zalo); }
.m-automation-canvas__node--sheet .m-automation-canvas__icon { background: #E2F4EC; color: var(--x-mint); }
.m-automation-canvas__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.m-automation-canvas__name {
font-size: 14px;
line-height: 18px;
font-weight: 600;
color: var(--x-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-automation-canvas__sub {
font-size: 12px;
line-height: 16px;
color: var(--x-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-automation-canvas__state {
position: absolute;
top: -8px;
right: -8px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 2px var(--x-paper);
opacity: 0;
transition: opacity 0.2s var(--x-ease);
z-index: 1;
}
.m-automation-canvas__node.is-running .m-automation-canvas__state,
.m-automation-canvas__node.is-done .m-automation-canvas__state { opacity: 1; }
.m-automation-canvas__spin {
position: absolute;
inset: 1px;
border-radius: 50%;
border: 2px solid var(--x-cobalt-soft);
border-top-color: var(--x-cobalt);
opacity: 0;
}
.m-automation-canvas__node.is-running .m-automation-canvas__spin {
opacity: 1;
animation: m-automation-canvas-spin 0.8s linear infinite;
}
@keyframes m-automation-canvas-spin { to { transform: rotate(360deg); } }
.m-automation-canvas__check {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--x-mint);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.5);
transition: opacity 0.2s var(--x-ease), transform 0.28s var(--x-ease);
}
.m-automation-canvas__node.is-done .m-automation-canvas__check { opacity: 1; transform: scale(1); }
/* ports + branch labels */
.m-automation-canvas__port {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--ac-port);
}
.m-automation-canvas__port--in { left: -6px; top: calc(50% - 5px); }
.m-automation-canvas__port--out { right: -6px; top: calc(50% - 5px); }
.m-automation-canvas__port--yes { right: -6px; top: calc(50% - 18px); }
.m-automation-canvas__port--no { right: -6px; top: calc(50% + 8px); }
/* on the canvas Sheets fans out from node 3, so node 4's output is only used by the vertical chain */
.m-automation-canvas:not(.is-vertical) [data-node="4"] .m-automation-canvas__port--out { display: none; }
.m-automation-canvas__node.is-running .m-automation-canvas__port,
.m-automation-canvas__node.is-done .m-automation-canvas__port { background: var(--x-cobalt); border-color: var(--x-cobalt); }
.m-automation-canvas__plabel {
position: absolute;
padding: 0 4px;
border-radius: 4px;
background: var(--x-paper);
font-size: 12px;
line-height: 15px;
color: var(--x-muted);
white-space: nowrap;
transform: translateX(-50%);
}
.m-automation-canvas__plabel--yes { left: calc(100% + 20px); top: 2px; }
.m-automation-canvas__plabel--no { left: calc(100% + 24px); top: 101px; }
.m-automation-canvas__node.is-yes .m-automation-canvas__plabel--yes,
.m-automation-canvas__node.is-no .m-automation-canvas__plabel--no { color: var(--x-cobalt); font-weight: 600; }
/* sticky note */
.m-automation-canvas__note {
position: absolute;
left: 344px;
top: 174px;
width: 240px;
padding: 8px 12px 10px;
background: var(--ac-sticky);
border: 1px solid var(--ac-sticky-line);
border-radius: 8px;
font-size: 12.5px;
line-height: 1.45;
color: var(--x-text);
}
.m-automation-canvas__note-title { display: block; font-size: 12px; font-weight: 600; color: var(--x-ink); margin-bottom: 2px; }
.m-automation-canvas__note-body { display: block; }
/* lead chip that follows the packet (vertical chain: parked above the first node) */
.m-automation-canvas__lead {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 3px;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 999px;
font-size: 12px;
line-height: 18px;
font-weight: 500;
color: var(--x-ink);
white-space: nowrap;
box-shadow: var(--x-shadow-sm);
opacity: 0;
transform: translate(160px, 32px) translate(-50%, -100%);
transition: opacity 0.2s var(--x-ease);
pointer-events: none;
will-change: transform;
}
.m-automation-canvas__lead.is-on { opacity: 1; }
.m-automation-canvas__avatar {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #fff;
background: #4F7F8C;
flex: none;
}
.m-automation-canvas__lead--b .m-automation-canvas__avatar { background: #7D8A4A; }
/* ---------- vertical chain (narrow containers; node/note boxes are placed inline by script.js) ---------- */
.m-automation-canvas.is-vertical .m-automation-canvas__port--in { left: 18px; top: -6px; }
.m-automation-canvas.is-vertical .m-automation-canvas__port--out,
.m-automation-canvas.is-vertical .m-automation-canvas__port--yes { left: 18px; right: auto; top: auto; bottom: -6px; }
.m-automation-canvas.is-vertical .m-automation-canvas__port--no { left: 52px; right: auto; top: auto; bottom: -6px; }
.m-automation-canvas.is-vertical .m-automation-canvas__plabel { top: calc(100% + 9px); }
.m-automation-canvas.is-vertical .m-automation-canvas__plabel--yes { left: 40px; }
.m-automation-canvas.is-vertical .m-automation-canvas__plabel--no { left: 62px; transform: none; }
/* Chain widths (same 1081 px switch as the script): a node grows with its text instead of cutting it; script.js
stacks nodes by their measured height. One-line nodes are 56 px (10 + 34 + 10 padding + 2 border). */
@container (max-width: 1081px) {
.m-automation-canvas__node { height: auto; padding-bottom: 10px; }
.m-automation-canvas__name,
.m-automation-canvas__sub { white-space: normal; overflow: visible; }
}
/* ---------- canvas chrome ---------- */
.m-automation-canvas__add {
position: absolute;
right: 10px;
top: 10px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #fff;
border: 1px solid var(--x-line);
box-shadow: var(--x-shadow-sm);
color: var(--x-ink);
}
.m-automation-canvas__zoom {
position: absolute;
left: 10px;
bottom: 10px;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
background: #fff;
border: 1px solid var(--x-line);
border-radius: 8px;
box-shadow: var(--x-shadow-sm);
}
.m-automation-canvas__zbtn {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--x-muted);
}
.m-automation-canvas__zval {
min-width: 40px;
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--x-ink);
font-variant-numeric: tabular-nums;
}
.m-automation-canvas__zsep { width: 1px; height: 14px; margin: 0 2px; background: var(--x-line); }
.m-automation-canvas__saved {
position: absolute;
right: 12px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--x-muted);
white-space: nowrap;
}
.m-automation-canvas__saved svg { color: var(--x-mint); }
/* ---------- responsive chrome (the scene itself is fitted / re-laid out by script.js) ---------- */
@container (max-width: 700px) {
.m-automation-canvas__tabs,
.m-automation-canvas__crumb { display: none; }
}
@container (max-width: 440px) {
.m-automation-canvas__switch-label,
.m-automation-canvas__btn span,
.m-automation-canvas__saved,
.m-automation-canvas__add,
.m-automation-canvas__zbtn,
.m-automation-canvas__zsep { display: none; }
.m-automation-canvas__bar { gap: 8px; }
.m-automation-canvas__btn { padding: 6px 8px; } /* play icon only, the title keeps the room */
.m-automation-canvas__zoom { padding: 3px 2px; }
.m-automation-canvas__zval { min-width: 36px; }
}
/* ---------- reduced motion: static final state ---------- */
@media (prefers-reduced-motion: reduce) {
.m-automation-canvas__node.is-running .m-automation-canvas__spin { animation: none; }
.m-automation-canvas__wire-hot,
.m-automation-canvas__packet,
.m-automation-canvas__node::after,
.m-automation-canvas__check,
.m-automation-canvas__lead { transition: none; }
}
/* ---- ai-chat ---- */
/* ai-chat — Zalo OA conversation with the CROSS AI assistant, inside a CSS phone frame.
Every selector starts with .m-ai-chat. Tokens come from ../_tokens.css (theme base.css). */
.m-ai-chat {
--m-ai-chat-w: 350px; /* phone width; override on the root to resize */
--m-ai-chat-bezel: #1c1a20;
--m-ai-chat-canvas: #edf0f4; /* Zalo chat canvas */
--m-ai-chat-me: color-mix(in srgb, var(--x-zalo) 13%, #fff);
--m-ai-chat-me-line: color-mix(in srgb, var(--x-zalo) 22%, #fff);
container-type: inline-size;
container-name: m-ai-chat;
display: grid;
grid-template-columns: minmax(0, var(--m-ai-chat-w)); /* phone track: up to --m-ai-chat-w, shrinks with the container */
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.35;
color: var(--x-ink);
-webkit-font-smoothing: antialiased;
}
.m-ai-chat *,
.m-ai-chat *::before,
.m-ai-chat *::after { box-sizing: border-box; }
.m-ai-chat svg { display: block; flex: none; }
/* ---------- Device frame ---------- */
.m-ai-chat__phone {
container: m-ai-chat-phone / inline-size; /* in-screen UI tightens by phone width (see the end of the file) */
position: relative;
width: 100%;
aspect-ratio: 9 / 19.5;
padding: 10px;
border-radius: 44px;
background: var(--m-ai-chat-bezel);
box-shadow: var(--x-shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.m-ai-chat__screen {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 35px;
background: var(--m-ai-chat-canvas);
}
.m-ai-chat__island {
position: absolute;
top: 10px;
left: 50%;
z-index: 3;
width: 86px;
height: 25px;
margin-left: -43px;
border-radius: 13px;
background: var(--m-ai-chat-bezel);
}
/* ---------- Status bar + Zalo header ---------- */
.m-ai-chat__status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 46px;
padding: 10px 24px 0 30px;
background: var(--x-zalo);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
.m-ai-chat__status-icons { display: flex; align-items: center; gap: 5px; }
.m-ai-chat__header {
flex: none;
display: flex;
align-items: center;
gap: 6px;
padding: 3px 10px 9px 4px;
background: var(--x-zalo);
color: #fff;
}
.m-ai-chat__icon-btn {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 28px;
color: #fff;
}
.m-ai-chat__avatar {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f3dee4;
color: #7a2e4a;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
.m-ai-chat__who {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 2px;
}
.m-ai-chat__name {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.m-ai-chat__name-text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: clip; /* keep OA_NAME short enough to fit; never show "…" */
}
.m-ai-chat__badge {
flex: none;
padding: 3px 5px 2px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1;
}
.m-ai-chat__sub {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
font-size: 11px;
line-height: 1.2;
}
.m-ai-chat__notice {
flex: none;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 12px;
border-bottom: 1px solid var(--x-line);
background: #fff;
color: var(--x-muted);
font-size: 11px;
line-height: 1.2;
}
.m-ai-chat__notice > svg { color: var(--x-primary); }
.m-ai-chat__notice-text {
flex: 1 1 auto;
min-width: 0;
line-height: 1.25; /* wraps to a second line rather than truncating */
}
.m-ai-chat__handoff {
flex: none;
padding: 4px 9px;
border: 1px solid color-mix(in srgb, var(--x-zalo) 45%, #fff);
border-radius: 999px;
background: color-mix(in srgb, var(--x-zalo) 6%, #fff);
color: color-mix(in srgb, var(--x-zalo) 88%, #000);
font-size: 11px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
/* ---------- Thread ---------- */
.m-ai-chat__list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end; /* bottom-anchored like a real chat; older lines clip at the top */
overflow: hidden;
padding: 0 10px;
}
.m-ai-chat__thread {
flex: none;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 0 6px;
transition: transform 0.45s var(--x-ease), opacity 0.35s ease;
will-change: transform;
}
.m-ai-chat__thread > .is-cut { visibility: hidden; } /* script.js: would be cut at the top edge, so hidden whole */
.m-ai-chat__divider {
align-self: center;
padding: 3px 9px;
border-radius: 999px;
background: rgba(21, 18, 27, 0.07);
color: color-mix(in srgb, var(--x-muted) 75%, var(--x-ink));
font-size: 10.5px;
line-height: 1.2;
}
.m-ai-chat__msg {
display: flex;
align-items: flex-end;
gap: 6px;
max-width: 86%;
}
.m-ai-chat__msg--bot { max-width: 92%; transform-origin: 0 100%; } /* bubbles grow from their tail */
.m-ai-chat__msg--me { align-self: flex-end; transform-origin: 100% 100%; }
.m-ai-chat__msg--sys { align-self: center; max-width: 96%; }
.m-ai-chat__msg--bot .m-ai-chat__avatar {
width: 24px;
height: 24px;
font-size: 10px;
}
.m-ai-chat__bubble {
min-width: 0;
padding: 8px 10px 6px;
border: 1px solid var(--x-line);
border-radius: 12px;
background: #fff;
color: var(--x-ink);
font-size: 13px;
line-height: 1.42;
overflow-wrap: anywhere;
}
.m-ai-chat__msg--bot .m-ai-chat__bubble { border-bottom-left-radius: 4px; }
.m-ai-chat__msg--me .m-ai-chat__bubble {
border-color: var(--m-ai-chat-me-line);
border-bottom-right-radius: 4px;
background: var(--m-ai-chat-me);
}
.m-ai-chat__time {
display: block;
margin-top: 3px;
color: var(--x-muted);
font-size: 10px;
line-height: 1.2;
}
.m-ai-chat__source {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 3px 7px 3px 5px;
border-radius: 6px;
background: var(--x-paper-deep);
color: var(--x-muted);
font-size: 10.5px;
line-height: 1.2;
}
.m-ai-chat__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 7px;
}
.m-ai-chat__chip {
position: relative;
padding: 5px 14px;
border: 1px solid var(--x-zalo);
border-radius: 999px;
background: #fff;
color: var(--x-zalo);
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
transition: background 0.25s ease, color 0.25s ease, opacity 0.3s ease;
}
.m-ai-chat__chip::after {
content: "";
position: absolute;
inset: -5px;
border: 2px solid var(--x-zalo);
border-radius: 999px;
opacity: 0;
transform: scale(0.75);
pointer-events: none;
}
/* Final / static state: 20:30 was picked */
.m-ai-chat:not(.is-live) .m-ai-chat__chip--pick,
.m-ai-chat__chips.is-done .m-ai-chat__chip--pick {
background: var(--x-zalo);
color: #fff;
}
.m-ai-chat:not(.is-live) .m-ai-chat__chip:not(.m-ai-chat__chip--pick),
.m-ai-chat__chips.is-done .m-ai-chat__chip:not(.m-ai-chat__chip--pick) {
border-color: color-mix(in srgb, var(--x-zalo) 30%, #fff);
color: #5a6475;
}
.m-ai-chat__chip.is-tap {
background: var(--x-zalo);
color: #fff;
animation: m-ai-chat-tap 0.5s var(--x-ease) both;
}
.m-ai-chat__chip.is-tap::after { animation: m-ai-chat-ring 0.6s ease-out both; }
.m-ai-chat__sys {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 7px;
border: 1px solid color-mix(in srgb, var(--x-mint) 30%, #fff);
border-radius: 999px;
background: color-mix(in srgb, var(--x-mint) 10%, #fff);
color: color-mix(in srgb, var(--x-mint) 72%, var(--x-ink));
font-size: 10.5px;
line-height: 1.3;
}
.m-ai-chat__sys > svg { color: var(--x-mint); }
.m-ai-chat__sys > span { min-width: 0; text-wrap: balance; }
.m-ai-chat__typing {
display: flex;
align-items: center;
gap: 4px;
padding: 11px 12px;
border: 1px solid var(--x-line);
border-radius: 12px;
border-bottom-left-radius: 4px;
background: #fff;
}
.m-ai-chat__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--x-muted);
opacity: 0.5;
animation: m-ai-chat-dot 1.1s ease-in-out infinite;
}
.m-ai-chat__dot:nth-child(2) { animation-delay: 0.15s; }
.m-ai-chat__dot:nth-child(3) { animation-delay: 0.3s; }
/* ---------- Composer + home indicator ---------- */
.m-ai-chat__composer {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px 6px;
border-top: 1px solid var(--x-line);
background: #fff;
color: var(--x-muted);
}
.m-ai-chat__input {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
color: var(--x-muted);
font-size: 13px;
}
.m-ai-chat__home {
flex: none;
display: grid;
place-items: center;
height: 22px;
background: #fff;
}
.m-ai-chat__home::before {
content: "";
width: 110px;
height: 5px;
border-radius: 3px;
background: var(--x-ink);
opacity: 0.85;
}
/* ---------- Live (JS-driven) states. Without JS / under reduced motion the full conversation shows. ---------- */
/* With JS and motion, the thread waits for script.js to arm it (first message only), so a first paint never shows the
full thread that is then taken away. Fail-safe: if the script never runs, the full thread appears after 2.5s. */
@media (prefers-reduced-motion: no-preference) {
.js .m-ai-chat:not(.is-live) .m-ai-chat__thread {
visibility: hidden;
animation: m-ai-chat-failsafe 0s linear 2.5s forwards;
}
}
@keyframes m-ai-chat-failsafe { to { visibility: visible; } }
.m-ai-chat__msg--typing { display: none; }
.m-ai-chat.is-live .m-ai-chat__divider:not(.is-in),
.m-ai-chat.is-live .m-ai-chat__msg:not(.is-in) { display: none; }
.m-ai-chat.is-live .m-ai-chat__msg--typing.is-in { display: flex; }
.m-ai-chat.is-live .m-ai-chat__divider.is-in,
.m-ai-chat.is-live .m-ai-chat__msg.is-in { animation: m-ai-chat-pop 0.4s var(--x-ease) both; }
@keyframes m-ai-chat-pop {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes m-ai-chat-dot {
0%, 60%, 100% { opacity: 0.45; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-4px); }
}
@keyframes m-ai-chat-tap {
0% { transform: scale(1); }
35% { transform: scale(0.95); }
100% { transform: scale(1); }
}
@keyframes m-ai-chat-ring {
0% { opacity: 0.7; transform: scale(0.75); }
100% { opacity: 0; transform: scale(1.25); }
}
/* ---------- Narrow phones (< 330px wide, from a narrow container or a smaller --m-ai-chat-w): tighten the UI ---------- */
@container m-ai-chat (max-width: 329px) {
.m-ai-chat__phone { padding: 8px; border-radius: 38px; }
.m-ai-chat__screen { border-radius: 31px; }
}
@container m-ai-chat-phone (max-width: 329px) {
.m-ai-chat__island { width: 76px; height: 22px; margin-left: -38px; top: 9px; }
.m-ai-chat__status { height: 42px; padding: 8px 20px 0 26px; font-size: 12px; }
.m-ai-chat__header { padding-bottom: 7px; }
.m-ai-chat__avatar { width: 30px; height: 30px; }
.m-ai-chat__name { font-size: 13px; }
.m-ai-chat__sub { font-size: 10.5px; }
.m-ai-chat__notice { padding: 5px 8px 5px 10px; }
.m-ai-chat__handoff { padding: 3px 7px; font-size: 10.5px; }
.m-ai-chat__list { padding: 0 8px; }
.m-ai-chat__thread { gap: 5px; padding: 6px 0 5px; }
.m-ai-chat__msg { max-width: 90%; }
.m-ai-chat__msg--bot { max-width: 95%; }
.m-ai-chat__msg--bot .m-ai-chat__avatar { width: 22px; height: 22px; }
.m-ai-chat__bubble { padding: 6px 8px 5px; font-size: 11.5px; line-height: 1.38; }
.m-ai-chat__time { margin-top: 2px; }
.m-ai-chat__source { font-size: 10px; margin-top: 5px; }
.m-ai-chat__chips { margin-top: 6px; }
.m-ai-chat__chip { padding: 4px 12px; font-size: 11.5px; }
.m-ai-chat__sys { font-size: 10px; }
.m-ai-chat__composer { gap: 10px; padding: 7px 12px 5px; }
.m-ai-chat__home { height: 18px; }
}
/* Smallest phones (inner width; the hero's 300px phone and a 288px container): drop the date chip, and at 288px the
price-list source chip, so the customer's opening question still fits on screen. */
@container m-ai-chat-phone (max-width: 291px) {
.m-ai-chat .m-ai-chat__divider { display: none; }
}
@container m-ai-chat-phone (max-width: 281px) {
.m-ai-chat__source { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.m-ai-chat__thread { transition: none; }
.m-ai-chat .m-ai-chat__dot,
.m-ai-chat .m-ai-chat__chip,
.m-ai-chat .m-ai-chat__chip::after,
.m-ai-chat .m-ai-chat__msg,
.m-ai-chat .m-ai-chat__divider { animation: none; transition: none; }
}
/* ---- ads-report ---- */
/* ads-report — Google Ads performance dashboard mockup (browser window + KPI tiles + two single-series charts).
All selectors start with .m-ads-report. Breakpoints are container queries on the root, so the
component adapts to the column it is placed in, not to the viewport. */
.m-ads-report {
container-type: inline-size;
width: 100%;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.3;
color: var(--x-text);
-webkit-font-smoothing: antialiased;
/* Component-scoped derived tones (hex fallback first, token-derived override second). */
--ar-surface: #ffffff;
--ar-good: #0A7356;
--ar-good: color-mix(in srgb, var(--x-mint) 72%, var(--x-ink));
--ar-good-bg: #E7F5F0;
--ar-good-bg: color-mix(in srgb, var(--x-mint) 12%, #ffffff);
--ar-dot: #D9D1C7;
--ar-dot: color-mix(in srgb, var(--x-line) 80%, var(--x-muted));
}
.m-ads-report *,
.m-ads-report *::before,
.m-ads-report *::after { box-sizing: border-box; }
/* ---------- browser window ---------- */
.m-ads-report__win {
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 14px;
box-shadow: var(--x-shadow);
overflow: hidden;
}
.m-ads-report__bar {
display: flex;
align-items: center;
gap: 12px;
height: 38px;
padding: 0 14px;
background: var(--x-paper-deep);
border-bottom: 1px solid var(--x-line);
}
.m-ads-report__dots { display: flex; gap: 6px; flex: none; }
.m-ads-report__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ar-dot); }
.m-ads-report__url {
flex: 1 1 auto;
min-width: 0;
max-width: 420px;
display: flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 7px;
font-size: 12px;
color: var(--x-muted);
}
.m-ads-report__url-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* ---------- icons ---------- */
.m-ads-report__ico {
width: 14px;
height: 14px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.m-ads-report__ico--chev { width: 12px; height: 12px; margin-left: 2px; }
.m-ads-report__arrow {
width: 10px;
height: 10px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.m-ads-report__delta--down .m-ads-report__arrow { transform: rotate(180deg); }
/* ---------- body ---------- */
.m-ads-report__body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
background: var(--x-paper);
}
/* header */
.m-ads-report__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 16px;
}
.m-ads-report__heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-ads-report__eyebrow { font-size: 12px; color: var(--x-muted); }
.m-ads-report__title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--x-ink);
overflow-wrap: anywhere;
}
.m-ads-report__updated { font-size: 12px; color: var(--x-muted); }
.m-ads-report__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.m-ads-report__range {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 11px 0 12px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 9px;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
white-space: nowrap;
}
.m-ads-report__btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 14px;
background: var(--x-primary);
border-radius: 9px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
box-shadow: var(--x-shadow-sm);
}
/* ---------- KPI tiles ---------- */
.m-ads-report__kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.m-ads-report__kpi {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 14px 16px 13px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 12px;
}
.m-ads-report__kpi-label { font-size: 12px; color: var(--x-muted); text-wrap: balance; }
.m-ads-report__kpi-value {
margin-top: auto; /* values and deltas line up across a row even when a label wraps */
font-size: clamp(17px, calc(2.75cqi - 6px), 26px); /* sized so "VND 24,800,000" fits a quarter-width tile */
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
white-space: nowrap;
}
.m-ads-report__kpi-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 2px;
font-size: 12px;
}
.m-ads-report__delta {
display: inline-flex;
align-items: center;
gap: 3px;
height: 20px;
padding: 0 7px 0 6px;
border-radius: 6px;
background: var(--x-paper-deep);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--x-text);
}
.m-ads-report__delta--good { background: var(--ar-good-bg); color: var(--ar-good); }
.m-ads-report__vs { color: var(--x-muted); }
/* ---------- chart cards ---------- */
.m-ads-report__charts {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 12px;
}
.m-ads-report__card {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 16px 18px 14px;
background: var(--ar-surface);
border: 1px solid var(--x-line);
border-radius: 12px;
}
.m-ads-report__card-head { display: flex; flex-direction: column; gap: 2px; }
.m-ads-report__card-title { font-size: 14px; font-weight: 600; color: var(--x-ink); }
.m-ads-report__card-sub { font-size: 12px; color: var(--x-muted); }
/* column chart: vertical geometry in px (fixed height), horizontal in % (fluid width) */
.m-ads-report__col { display: block; }
.m-ads-report__col-svg {
display: block;
width: 100%;
height: 158px;
overflow: visible;
font-family: inherit;
}
.m-ads-report__grid,
.m-ads-report__axis { stroke: var(--x-line); stroke-width: 1; }
.m-ads-report__tick {
font-size: 11px;
font-variant-numeric: tabular-nums;
fill: var(--x-muted);
}
.m-ads-report__col-bar { fill: var(--x-primary); }
.m-ads-report__band:hover .m-ads-report__col-bar { fill: var(--x-deep); }
.m-ads-report__val {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
fill: var(--x-ink);
paint-order: stroke;
stroke: var(--ar-surface);
stroke-width: 4px;
stroke-linejoin: round;
}
.m-ads-report__xlabels { display: flex; padding-left: 8%; margin-top: 6px; }
.m-ads-report__xlabels span {
flex: 1 1 0;
min-width: 0;
text-align: center;
font-size: 11px;
color: var(--x-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* horizontal bar list */
.m-ads-report__rows {
list-style: none;
margin: 0;
padding: 2px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.m-ads-report__row {
display: grid;
grid-template-columns: minmax(84px, 124px) minmax(0, 1fr) 40px;
align-items: center;
gap: 12px;
font-size: 13px;
}
.m-ads-report__row-label {
min-width: 0;
color: var(--x-text);
line-height: 1.25;
overflow-wrap: break-word; /* a label that ever outgrows its column wraps, it is never cut */
}
.m-ads-report__hbar { display: block; width: 100%; height: 10px; overflow: hidden; }
.m-ads-report__hbar-fill { fill: var(--x-primary); }
.m-ads-report__row:hover .m-ads-report__hbar-fill { fill: var(--x-deep); }
.m-ads-report__row-value {
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
}
.m-ads-report__total {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--x-line);
font-size: 12px;
color: var(--x-muted);
}
.m-ads-report__total-value {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--x-ink);
}
/* ---------- motion (script adds --armed before the element is visible, --in when it enters) ---------- */
.m-ads-report--armed .m-ads-report__col-bar {
transform: scaleY(0);
transform-box: fill-box;
transform-origin: center bottom;
transition: transform 0.75s var(--x-ease);
}
.m-ads-report--armed .m-ads-report__band:nth-of-type(2) .m-ads-report__col-bar { transition-delay: 0.07s; }
.m-ads-report--armed .m-ads-report__band:nth-of-type(3) .m-ads-report__col-bar { transition-delay: 0.14s; }
.m-ads-report--armed .m-ads-report__band:nth-of-type(4) .m-ads-report__col-bar { transition-delay: 0.21s; }
.m-ads-report--armed .m-ads-report__hbar-fill {
transform: scaleX(0);
transform-box: fill-box;
transform-origin: left center;
transition: transform 0.75s var(--x-ease);
}
.m-ads-report--armed .m-ads-report__row:nth-child(2) .m-ads-report__hbar-fill { transition-delay: 0.07s; }
.m-ads-report--armed .m-ads-report__row:nth-child(3) .m-ads-report__hbar-fill { transition-delay: 0.14s; }
.m-ads-report--armed .m-ads-report__row:nth-child(4) .m-ads-report__hbar-fill { transition-delay: 0.21s; }
.m-ads-report--armed .m-ads-report__val,
.m-ads-report--armed .m-ads-report__delta {
opacity: 0;
transition: opacity 0.3s ease 0.7s;
}
.m-ads-report--in .m-ads-report__col-bar { transform: scaleY(1); }
.m-ads-report--in .m-ads-report__hbar-fill { transform: scaleX(1); }
.m-ads-report--in .m-ads-report__val,
.m-ads-report--in .m-ads-report__delta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.m-ads-report .m-ads-report__col-bar,
.m-ads-report .m-ads-report__hbar-fill,
.m-ads-report .m-ads-report__val,
.m-ads-report .m-ads-report__delta {
transition: none;
transform: none;
opacity: 1;
}
}
/* ---------- responsive (container queries on the root) ---------- */
@container (max-width: 899px) {
.m-ads-report__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-ads-report__kpi-value { font-size: clamp(18px, calc(5.5cqi - 7px), 26px); }
.m-ads-report__charts { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 639px) {
.m-ads-report__charts { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 479px) {
.m-ads-report__bar { height: 34px; padding: 0 12px; }
.m-ads-report__body { gap: 12px; padding: 14px; }
.m-ads-report__kpis { gap: 10px; }
.m-ads-report__kpi { padding: 12px 13px 11px; }
/* money tiles take a full row (value and delta side by side) so long amounts such as "VND 24,800,000" fit;
the two count tiles share the row between them (dense flow: cost / leads + orders / cost per lead) */
.m-ads-report__kpis { grid-auto-flow: row dense; }
.m-ads-report__kpi--money { grid-column: 1 / -1; flex-flow: row wrap; align-items: center; column-gap: 10px; }
.m-ads-report__kpi--money .m-ads-report__kpi-label { flex: 0 0 100%; }
.m-ads-report__kpi--money .m-ads-report__kpi-value { margin-top: 0; }
.m-ads-report__kpi--money .m-ads-report__kpi-foot { margin-top: 0; }
.m-ads-report__kpi-value { font-size: clamp(18px, 6cqi, 22px); }
.m-ads-report__card { padding: 14px 14px 12px; }
.m-ads-report__row { grid-template-columns: minmax(84px, 124px) minmax(0, 1fr) 36px; gap: 10px; }
}
@container (max-width: 359px) {
.m-ads-report__btn { padding: 0 12px; }
.m-ads-report__range { padding: 0 9px 0 10px; }
}
/* ---- web-preview ---- */
/* m-web-preview — browser + phone mock-up of a landing page, PageSpeed ring, animated quote form.
>= 560px container: browser fills the width, phone on its bottom-right corner, ring on its bottom-left.
Sizes are em of the stage; 1em = 1/55.6 of the width, capped at 15px (the mini page widens past ~834px).
< 560px: only the phone (max 320px) and the ring. Only transform/opacity are animated. */
.m-web-preview { --wp-score: 96; --wp-x1: 18%; --wp-y1: 34%; --wp-x2: 20%; --wp-y2: 52%; --wp-x3: 22%; --wp-y3: 70%; --wp-xb: 50%; --wp-yb: 86%; position: relative; width: 100%; container: wp / inline-size; font-family: var(--x-font-body); color: var(--x-text); line-height: 1.3; }
.m-web-preview *,
.m-web-preview *::before,
.m-web-preview *::after { box-sizing: border-box; }
.m-web-preview :where(p) { margin: 0; } /* low specificity: class margins win */
.m-web-preview svg { display: block; flex: none; }
/* ---- composition (wide) ---- */
.m-web-preview__stage {
--wp-ring: 6em;
position: relative;
font-size: clamp(8px, 1.1vw, 15px); /* fallback without container units */
font-size: min(1.798cqw, 15px); /* 55.6em = 3em ring overhang + 44em browser + 8.6em phone overhang */
padding-bottom: 4.8em;
}
.m-web-preview__desk { margin: 0 8.6em 0 3em; }
.m-web-preview__hand { position: absolute; right: 0; bottom: 0; z-index: 2; }
/* ---- browser window ---- */
.m-web-preview__browser { font-family: var(--x-font-ui); color: var(--x-ink); background: #fff; border: 1px solid var(--x-line); border-radius: 0.9em; box-shadow: var(--x-shadow); overflow: hidden; }
.m-web-preview__bar { display: flex; align-items: center; gap: 1em; height: 2.4em; padding: 0 1em; background: var(--x-paper-deep); border-bottom: 1px solid var(--x-line); }
.m-web-preview__dots { display: flex; gap: 0.45em; }
.m-web-preview__dots i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #E9A59C; }
.m-web-preview__dots i:nth-child(2) { background: #EFCB8A; }
.m-web-preview__dots i:nth-child(3) { background: #A9D6A4; }
.m-web-preview__url {
flex: 0 1 26em;
display: flex;
align-items: center;
gap: 0.45em;
min-width: 0;
height: 1.65em;
margin: 0 auto;
padding: 0 0.8em;
border: 1px solid var(--x-line);
border-radius: 0.8em;
background: #fff;
font-size: 0.8em;
color: var(--x-muted);
white-space: nowrap;
overflow: hidden;
}
.m-web-preview__url svg { width: 0.95em; height: 0.95em; color: var(--x-mint); }
.m-web-preview__page { position: relative; overflow: hidden; }
.m-web-preview__nav { display: flex; align-items: center; gap: 1.6em; height: 3.2em; padding: 0 2.8em; border-bottom: 1px solid var(--x-paper-deep); }
.m-web-preview__brand { display: flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: 0.95em; white-space: nowrap; }
.m-web-preview__mark { position: relative; width: 1.3em; height: 1.3em; border-radius: 0.35em; background: var(--x-primary); }
.m-web-preview__mark::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 0.15em; background: #fff; }
/* links that do not fit wrap onto a hidden second line, so narrow pages just show fewer of them */
.m-web-preview__links { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; column-gap: 1.5em; min-width: 0; height: 1.3em; overflow: hidden; font-size: 0.82em; color: var(--x-text); white-space: nowrap; }
.m-web-preview__navcta { font-size: 0.78em; font-weight: 600; padding: 0.5em 1em; border: 1px solid var(--x-line); border-radius: 2em; white-space: nowrap; }
.m-web-preview__hero { display: flex; justify-content: space-between; gap: 2.2em; padding: 2.1em 2.8em 2em; background: var(--x-paper); }
.m-web-preview__copy { flex: 1 1 auto; min-width: 0; max-width: 32em; padding-top: 0.3em; }
.m-web-preview__pill { display: inline-block; font-size: 0.76em; padding: 0.3em 0.85em; border: 1px solid var(--x-line); border-radius: 2em; background: #fff; color: var(--x-muted); white-space: nowrap; }
.m-web-preview__h1 { margin: 0.6em 0 0.42em; font-size: 1.95em; line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; color: var(--x-ink); text-wrap: balance; }
.m-web-preview__sub { font-size: 0.9em; line-height: 1.45; color: var(--x-muted); max-width: 30em; }
.m-web-preview__ctas { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 1.15em; }
.m-web-preview__btn { font-size: 0.84em; font-weight: 600; padding: 0.68em 1.2em; border-radius: 0.6em; white-space: nowrap; }
.m-web-preview__btn--primary { background: var(--x-primary); color: #fff; }
.m-web-preview__btn--ghost { background: #fff; color: var(--x-ink); border: 1px solid var(--x-line); }
.m-web-preview__trust { display: flex; align-items: center; gap: 0.45em; margin-top: 1.4em; font-size: 0.8em; color: var(--x-muted); }
.m-web-preview__trust svg { width: 1.1em; height: 1.1em; color: var(--x-mint); }
/* form card */
.m-web-preview__card { position: relative; flex: 0 0 18em; padding: 1.1em 1.2em 1.05em; background: #fff; border: 1px solid var(--x-line); border-radius: 0.85em; box-shadow: var(--x-shadow-sm); }
.m-web-preview__card-title { font-size: 1.1em; font-weight: 700; }
.m-web-preview__card-sub { margin: 0.15em 0 0.85em; font-size: 0.78em; color: var(--x-muted); }
.m-web-preview__field { margin-bottom: 0.6em; }
.m-web-preview__label { display: block; margin-bottom: 0.3em; font-size: 0.9em; font-weight: 500; color: var(--x-text); }
.m-web-preview__input { position: relative; display: flex; align-items: center; height: 2.35em; padding: 0 0.75em; border: 1px solid var(--x-line); border-radius: 0.5em; background: #fff; font-size: 0.88em; white-space: nowrap; overflow: hidden; }
.m-web-preview__input::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--x-primary); box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.12); opacity: 0; pointer-events: none; }
.m-web-preview__ph { position: absolute; left: 0.75em; top: 50%; z-index: 2; transform: translateY(-50%); color: #A9A3B0; opacity: 0; }
.m-web-preview__type { position: relative; display: inline-block; }
.m-web-preview__val { color: var(--x-ink); }
.m-web-preview__mask { position: absolute; inset: -2px 0; background: #fff; opacity: 0; transform: translateX(100%); }
.m-web-preview__mask::before { content: ""; position: absolute; left: 0; top: 18%; width: 1.5px; height: 64%; background: var(--x-ink); opacity: 0; }
.m-web-preview__chev { width: 1.1em; height: 1.1em; margin-left: auto; color: var(--x-muted); }
.m-web-preview__val--pick { overflow: hidden; text-overflow: ellipsis; }
.m-web-preview__submit { position: relative; display: flex; align-items: center; justify-content: center; height: 2.45em; margin-top: 0.25em; border-radius: 0.55em; background: var(--x-primary); color: #fff; font-size: 0.9em; font-weight: 700; overflow: hidden; }
.m-web-preview__sent { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.45em; background: var(--x-mint); color: #fff; }
.m-web-preview__sent svg { width: 1.2em; height: 1.2em; }
.m-web-preview__note { display: flex; align-items: center; gap: 0.4em; margin-top: 0.7em; font-size: 0.72em; color: var(--x-muted); }
.m-web-preview__note svg { width: 1.1em; height: 1.1em; }
.m-web-preview__cursor { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.m-web-preview__cursor svg { position: absolute; left: 0; top: 0; width: 1.35em; height: 1.62em; filter: drop-shadow(0 1px 2px rgba(21, 18, 27, 0.35)); }
/* benefit tiles: the browser window ends (the fold) just under their titles */
.m-web-preview__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; height: 6.75em; padding: 1.5em 2.8em 0; overflow: hidden; }
.m-web-preview__tile { display: flex; flex-direction: column; gap: 0.3em; padding: 1em 1.1em; border: 1px solid var(--x-line); border-radius: 0.8em; }
.m-web-preview__ico { display: grid; place-items: center; width: 2.1em; height: 2.1em; margin-bottom: 0.4em; border-radius: 0.6em; background: var(--x-paper-deep); color: var(--x-primary); }
.m-web-preview__ico svg { width: 1.2em; height: 1.2em; }
.m-web-preview__tile b { font-size: 0.9em; font-weight: 700; }
.m-web-preview__tile > span:last-child { font-size: 0.78em; line-height: 1.4; color: var(--x-muted); }
/* Zalo chat bubble (phone screen) */
.m-web-preview__zalo { position: absolute; right: 0.9em; bottom: 0.9em; display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: 50%; background: var(--x-zalo); color: #fff; font-size: 0.72em; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 0.4em 1em rgba(0, 104, 255, 0.3); }
/* ---- score ring (the number is real text and never changes; only the arc is animated) ---- */
.m-web-preview__score { position: absolute; left: 0; bottom: 1.8em; z-index: 3; width: var(--wp-ring); height: var(--wp-ring); }
.m-web-preview__score > svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: var(--x-shadow-lift); }
.m-web-preview__track { fill: none; stroke: var(--x-paper-deep); stroke-width: 9; }
.m-web-preview__win--r { clip-path: inset(0 0 0 50%); }
.m-web-preview__win--l { clip-path: inset(0 50% 0 0); }
.m-web-preview__arc { transform-box: view-box; transform-origin: 50% 50%; }
.m-web-preview__arc circle { fill: none; stroke: var(--x-mint); stroke-width: 9; stroke-dasharray: 163.4 163.4; }
.m-web-preview__arc--r { transform: rotate(180deg); }
.m-web-preview__arc--l { transform: rotate(calc((var(--wp-score) * 3.6 - 180) * 1deg)); }
.m-web-preview__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--x-font-ui); font-size: calc(var(--wp-ring) * 0.3); font-weight: 800; letter-spacing: -0.03em; color: var(--x-mint); }
.m-web-preview__score-label { position: absolute; top: calc(100% + 0.4em); left: 0; font-family: var(--x-font-body); font-size: clamp(12px, 0.95em, 14px); line-height: 1.3; color: var(--x-muted); white-space: nowrap; }
/* ---- phone (screen designed at 20em wide) ---- */
.m-web-preview__phone {
font-size: 0.54em; /* 20em phone = 10.8em of the stage */
position: relative;
width: 20em;
aspect-ratio: 9 / 19.5;
padding: 0.55em;
border-radius: min(44px, 2.9em);
background: var(--x-ink);
box-shadow: var(--x-shadow-lift);
}
.m-web-preview__screen { position: relative; height: 100%; overflow: hidden; border-radius: min(38px, 2.4em); background: #fff; font-family: var(--x-font-ui); color: var(--x-ink); }
.m-web-preview__island { position: absolute; top: 0.6em; left: 50%; z-index: 2; width: 5em; height: 1.45em; border-radius: 1em; background: var(--x-ink); transform: translateX(-50%); }
.m-web-preview__status { display: flex; align-items: center; justify-content: space-between; height: 4.2em; padding: 0.4em 2.2em 0; font-size: 0.68em; font-weight: 600; }
.m-web-preview__sig { display: flex; align-items: flex-end; gap: 0.2em; }
.m-web-preview__sig i { width: 0.3em; height: 0.5em; border-radius: 0.1em; background: var(--x-ink); }
.m-web-preview__sig i:nth-child(2) { height: 0.7em; }
.m-web-preview__sig i:nth-child(3) { height: 0.9em; }
.m-web-preview__sig i:nth-child(4) { height: 1.1em; }
.m-web-preview__bat { position: relative; width: 1.9em; height: 1em; margin-left: 0.45em; border: 1.5px solid var(--x-ink); border-radius: 0.3em; }
.m-web-preview__bat::after { content: ""; position: absolute; inset: 0.15em; width: 70%; border-radius: 0.12em; background: var(--x-ink); }
.m-web-preview__mnav { display: flex; align-items: center; justify-content: space-between; padding: 0.5em 1.1em 0.6em; border-bottom: 1px solid var(--x-paper-deep); }
.m-web-preview__mnav .m-web-preview__brand { font-size: 0.85em; }
.m-web-preview__mnav > svg { width: 1.3em; height: 1.3em; }
.m-web-preview__mhero { padding: 1.1em 1.1em 1.2em; background: var(--x-paper); }
.m-web-preview__mhero .m-web-preview__pill { font-size: 0.63em; } /* >= 10px on the phone-only layout */
.m-web-preview__mh1 { margin: 0.55em 0 0.45em; font-size: 1.45em; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
.m-web-preview__msub { margin-bottom: 0.9em; font-size: 0.74em; line-height: 1.4; color: var(--x-muted); }
.m-web-preview__mbtn { display: block; padding: 0.75em; border-radius: 0.6em; background: var(--x-primary); color: #fff; font-size: 0.8em; font-weight: 700; text-align: center; }
.m-web-preview__mcard { margin: 1em 1.1em 0; padding: 0.9em; border: 1px solid var(--x-line); border-radius: 0.8em; }
.m-web-preview__mcard > b { display: block; font-size: 0.9em; }
.m-web-preview__minput { display: flex; align-items: center; height: 2.1em; margin: 0.55em 0; padding: 0 0.6em; border: 1px solid var(--x-line); border-radius: 0.45em; font-size: 0.72em; color: #A9A3B0; white-space: nowrap; overflow: hidden; }
.m-web-preview__mtiles { display: grid; gap: 0.55em; padding: 1em 1.1em; }
.m-web-preview__mtile { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.7em; border: 1px solid var(--x-line); border-radius: 0.6em; font-size: 0.78em; font-weight: 600; }
.m-web-preview__mtile .m-web-preview__ico { width: 2em; height: 2em; margin: 0; flex: none; }
/* ---- narrow containers: no shrunken browser, just the phone (max 320px) with the ring on its corner ---- */
@container wp (max-width: 559.98px) {
.m-web-preview__stage { --wp-ring: clamp(76px, 24cqw, 96px); font-size: 14px; padding-bottom: calc(var(--wp-ring) * 0.5 + 2em); }
.m-web-preview__desk { display: none; }
.m-web-preview__hand { position: relative; right: auto; bottom: auto; width: min(100%, 320px); margin: 0 auto; }
.m-web-preview__phone { font-size: min(5cqw, 16px); }
.m-web-preview__score { left: max(0px, calc(50% - min(50%, 160px) - var(--wp-ring) * 0.3)); bottom: 2em; }
}
/* ---- motion (12 s loop; percentages are seconds / 12). Base rules above are the static final state. ---- */
@keyframes m-web-preview-cursor {
0%, 5.83% { opacity: 0; transform: translate(-34%, 46%) scale(1); }
8.33% { opacity: 1; transform: translate(-34%, 46%) scale(1); }
15.83%, 17.08% { transform: translate(var(--wp-x1), var(--wp-y1)) scale(1); }
17.5% { transform: translate(var(--wp-x1), var(--wp-y1)) scale(0.82); }
18.33%, 25.83% { transform: translate(var(--wp-x1), var(--wp-y1)) scale(1); }
30%, 31.25% { transform: translate(var(--wp-x2), var(--wp-y2)) scale(1); }
31.67% { transform: translate(var(--wp-x2), var(--wp-y2)) scale(0.82); }
32.5%, 42.5% { transform: translate(var(--wp-x2), var(--wp-y2)) scale(1); }
46.67%, 47.92% { transform: translate(var(--wp-x3), var(--wp-y3)) scale(1); }
48.33% { transform: translate(var(--wp-x3), var(--wp-y3)) scale(0.82); }
49.17%, 53.33% { transform: translate(var(--wp-x3), var(--wp-y3)) scale(1); }
58.33%, 59.58% { transform: translate(var(--wp-xb), var(--wp-yb)) scale(1); }
60.17% { transform: translate(var(--wp-xb), var(--wp-yb)) scale(0.82); }
60.83%, 65.83% { opacity: 1; transform: translate(var(--wp-xb), var(--wp-yb)) scale(1); }
70.83% { opacity: 1; transform: translate(74%, 104%) scale(1); }
74.17% { opacity: 0; transform: translate(74%, 104%) scale(1); }
75%, 100% { opacity: 0; transform: translate(-34%, 46%) scale(1); }
}
@keyframes m-web-preview-focus-1 { 0%, 17.08% { opacity: 0; } 18.33%, 27.5% { opacity: 1; } 29.17%, 100% { opacity: 0; } }
@keyframes m-web-preview-focus-2 { 0%, 31.25% { opacity: 0; } 32.5%, 42.5% { opacity: 1; } 44.17%, 100% { opacity: 0; } }
@keyframes m-web-preview-focus-3 { 0%, 47.92% { opacity: 0; } 49.17%, 55% { opacity: 1; } 56.67%, 100% { opacity: 0; } }
@keyframes m-web-preview-ph-1 { 0%, 17.5% { opacity: 1; } 19.17%, 88.33% { opacity: 0; } 94.17%, 100% { opacity: 1; } }
@keyframes m-web-preview-ph-2 { 0%, 31.67% { opacity: 1; } 33.33%, 88.33% { opacity: 0; } 94.17%, 100% { opacity: 1; } }
@keyframes m-web-preview-ph-3 { 0%, 48.33% { opacity: 1; } 50%, 88.33% { opacity: 0; } 94.17%, 100% { opacity: 1; } }
@keyframes m-web-preview-mask-1 {
0%, 20% { opacity: 1; transform: translateX(0); animation-timing-function: steps(13, end); }
29.17%, 88.33% { opacity: 1; transform: translateX(100%); }
88.4% { opacity: 0; transform: translateX(0); }
94.17%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes m-web-preview-mask-2 {
0%, 34.17% { opacity: 1; transform: translateX(0); animation-timing-function: steps(12, end); }
43.33%, 88.33% { opacity: 1; transform: translateX(100%); }
88.4% { opacity: 0; transform: translateX(0); }
94.17%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes m-web-preview-caret-1 { 0%, 17.5% { opacity: 0; } 17.92%, 31.25% { opacity: 1; } 31.67%, 100% { opacity: 0; } }
@keyframes m-web-preview-caret-2 { 0%, 31.67% { opacity: 0; } 32.08%, 47.92% { opacity: 1; } 48.33%, 100% { opacity: 0; } }
@keyframes m-web-preview-pick { 0%, 49.58% { opacity: 0; } 51.25%, 88.33% { opacity: 1; } 94.17%, 100% { opacity: 0; } }
@keyframes m-web-preview-press { 0%, 59.58% { transform: scale(1); } 60.17% { transform: scale(0.96); } 61.67%, 100% { transform: scale(1); } }
@keyframes m-web-preview-sent { 0%, 61.25% { opacity: 0; } 63.33%, 88.33% { opacity: 1; } 92.5%, 100% { opacity: 0; } }
@keyframes m-web-preview-check { 0%, 61.25% { transform: scale(0.4); } 64.5%, 100% { transform: scale(1); } }
@keyframes m-web-preview-arc-r { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes m-web-preview-arc-l { from { transform: rotate(0deg); opacity: 0; } 2% { opacity: 1; } to { transform: rotate(calc((var(--wp-score) * 3.6 - 180) * 1deg)); } }
/* script.js adds .is-ready (motion allowed) and toggles .is-playing while on screen */
.m-web-preview.is-ready [data-a],
.m-web-preview.is-ready [data-a]::before,
.m-web-preview.is-ready [data-a]::after { animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; }
.m-web-preview.is-ready .m-web-preview__cursor { animation-name: m-web-preview-cursor; animation-timing-function: cubic-bezier(0.45, 0.05, 0.2, 1); }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__input::after { animation-name: m-web-preview-focus-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__input::after { animation-name: m-web-preview-focus-2; }
.m-web-preview.is-ready [data-f="3"] .m-web-preview__input::after { animation-name: m-web-preview-focus-3; }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__ph { animation-name: m-web-preview-ph-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__ph { animation-name: m-web-preview-ph-2; }
.m-web-preview.is-ready [data-f="3"] .m-web-preview__ph { animation-name: m-web-preview-ph-3; }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__mask { animation-name: m-web-preview-mask-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__mask { animation-name: m-web-preview-mask-2; }
.m-web-preview.is-ready [data-f="1"] .m-web-preview__mask::before { animation-name: m-web-preview-caret-1; }
.m-web-preview.is-ready [data-f="2"] .m-web-preview__mask::before { animation-name: m-web-preview-caret-2; }
.m-web-preview.is-ready .m-web-preview__val--pick { animation-name: m-web-preview-pick; }
.m-web-preview.is-ready .m-web-preview__submit { animation-name: m-web-preview-press; }
.m-web-preview.is-ready .m-web-preview__sent { animation-name: m-web-preview-sent; }
.m-web-preview.is-ready .m-web-preview__sent svg { animation-name: m-web-preview-check; animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1); }
.m-web-preview.is-playing [data-a],
.m-web-preview.is-playing [data-a]::before,
.m-web-preview.is-playing [data-a]::after { animation-play-state: running; }
/* ring: full by default; script adds .is-armed only while the ring is still below the fold (arc empties),
then .is-drawing once the ring itself is on screen (arc draws to the score, once) */
.m-web-preview.is-armed .m-web-preview__arc--r { animation: m-web-preview-arc-r 0.8s cubic-bezier(0.5, 0, 1, 1) 0.15s 1 both paused; }
.m-web-preview.is-armed .m-web-preview__arc--l { animation: m-web-preview-arc-l 0.75s cubic-bezier(0, 0, 0.3, 1) 0.95s 1 both paused; }
.m-web-preview.is-armed.is-drawing .m-web-preview__arc { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
.m-web-preview [data-a],
.m-web-preview [data-a]::before,
.m-web-preview [data-a]::after,
.m-web-preview .m-web-preview__arc { animation: none !important; }
}
/* ---- morning-report ---- */
/* morning-report — Zalo group chat on a CSS phone: the 07:00 automated report from CROSS Bot.
Every selector starts with .m-morning-report. Tokens come from ../_tokens.css (theme base.css).
Frame, header, bubbles and composer share dimensions with the ai-chat component so both phones match. */
.m-morning-report {
--m-morning-report-w: 350px; /* phone width; override on the root to resize (300–390px recommended) */
--m-morning-report-bezel: #1c1a20;
--m-morning-report-canvas: #edf0f4; /* Zalo chat canvas */
--m-morning-report-me: #e3edff;
--m-morning-report-me: color-mix(in srgb, var(--x-zalo) 13%, #fff);
--m-morning-report-me-line: #c9dbfa;
--m-morning-report-me-line: color-mix(in srgb, var(--x-zalo) 22%, #fff);
--m-morning-report-rule: #f1ede8; /* hairline between report rows */
container-type: inline-size;
container-name: m-morning-report;
display: grid;
grid-template-columns: min(100%, var(--m-morning-report-w)); /* explicit track: never sized by the chat's max-content */
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.35;
color: var(--x-ink);
-webkit-font-smoothing: antialiased;
}
.m-morning-report *,
.m-morning-report *::before,
.m-morning-report *::after { box-sizing: border-box; }
.m-morning-report svg { display: block; flex: none; }
/* ---------- Device frame ---------- */
.m-morning-report__phone {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 9 / 19.5;
padding: 10px;
border-radius: 44px;
background: var(--m-morning-report-bezel);
box-shadow: var(--x-shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.m-morning-report__screen {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 35px;
background: var(--m-morning-report-canvas);
}
.m-morning-report__island {
position: absolute;
top: 10px;
left: 50%;
z-index: 3;
width: 86px;
height: 25px;
margin-left: -43px;
border-radius: 13px;
background: var(--m-morning-report-bezel);
}
/* ---------- Status bar + Zalo group header ---------- */
.m-morning-report__status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 10px 24px 0 30px;
background: var(--x-zalo);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
.m-morning-report__status-icons { display: flex; align-items: center; gap: 5px; }
.m-morning-report__header {
flex: none;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 4px 10px 4px;
background: var(--x-zalo);
color: #fff;
}
.m-morning-report__icon-btn {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 30px;
color: #fff;
}
.m-morning-report__group-avatar {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.m-morning-report__who {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 4px;
}
.m-morning-report__name {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: clip; /* keep GROUP_NAME short enough to fit; never show "…" */
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
.m-morning-report__sub {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
font-size: 11px;
line-height: 1.2;
}
/* ---------- Thread ---------- */
.m-morning-report__list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end; /* bottom-anchored like a real chat; older lines clip at the top */
overflow: hidden;
padding: 0 10px;
}
.m-morning-report__thread {
flex: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
padding: 8px 0 12px;
transition: transform 0.3s var(--x-ease), opacity 0.35s ease;
will-change: transform;
}
.m-morning-report__thread.is-fading { opacity: 0; }
.m-morning-report__thread > .is-cut { visibility: hidden; } /* script.js: would be cut at the top edge, so hidden whole */
.m-morning-report__divider {
align-self: center;
padding: 3px 9px;
border-radius: 999px;
background: rgba(21, 18, 27, 0.07);
color: color-mix(in srgb, var(--x-muted) 75%, var(--x-ink));
font-size: 10.5px;
line-height: 1.2;
}
.m-morning-report__msg {
display: flex;
align-items: flex-end;
gap: 6px;
max-width: 86%;
}
.m-morning-report__msg--me { align-self: flex-end; }
.m-morning-report__msg--bot { width: 92%; max-width: 92%; }
.m-morning-report__avatar {
flex: none;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.m-morning-report__avatar--sales { background: #dbe6f1; color: #2b5675; }
.m-morning-report__avatar--bot { background: var(--x-primary); color: #fff; }
.m-morning-report__col {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.m-morning-report__msg--bot .m-morning-report__col { align-items: stretch; }
.m-morning-report__sender {
display: flex;
align-items: center;
gap: 5px;
padding-left: 2px;
color: var(--x-muted);
font-size: 11px;
line-height: 1.2;
}
.m-morning-report__badge {
padding: 2px 5px 1px;
border-radius: 4px;
background: #E8F1FF; /* Zalo UI: the bot badge in Zalo's own blue, darkened for text (6.2:1) */
color: #0050C8;
font-size: 10px;
font-weight: 700;
line-height: 1.1;
}
.m-morning-report__bubble {
position: relative;
min-width: 0;
max-width: 100%;
padding: 8px 10px 6px;
border: 1px solid var(--x-line);
border-radius: 12px;
background: #fff;
color: var(--x-ink);
font-size: 13px;
line-height: 1.42;
overflow-wrap: anywhere;
}
.m-morning-report__msg--in .m-morning-report__bubble { border-bottom-left-radius: 4px; }
.m-morning-report__msg--me .m-morning-report__bubble {
border-color: var(--m-morning-report-me-line);
border-bottom-right-radius: 4px;
background: var(--m-morning-report-me);
}
.m-morning-report__bubble--report { width: 100%; padding: 8px 11px 5px; }
.m-morning-report__text { margin: 0; }
.m-morning-report__time {
display: block;
margin-top: 4px;
color: var(--x-muted);
font-size: 10px;
line-height: 1.2;
}
/* ---------- The report itself ---------- */
.m-morning-report__title {
color: var(--x-primary);
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
}
.m-morning-report__subtitle {
margin: 2px 0 5px;
color: var(--x-muted);
font-size: 11px;
line-height: 1.3;
}
.m-morning-report__stat {
display: flex;
align-items: baseline;
gap: 8px;
padding: 4px 0;
box-shadow: 0 -1px 0 var(--m-morning-report-rule);
font-size: 12.5px;
line-height: 1.3;
}
.m-morning-report__stat-label { flex: 1 1 auto; min-width: 0; color: var(--x-text); }
.m-morning-report__stat-n {
flex: none;
min-width: 20px;
color: var(--x-ink);
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
}
.m-morning-report__stat-note {
flex: none;
min-width: 104px; /* one column for every note up to "VND 48,500,000", so the numbers line up row by row;
a longer note widens its own row instead of being cut */
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
color: var(--x-muted);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
text-align: right;
}
.m-morning-report__stat-note--up { color: var(--x-mint); font-weight: 600; }
.m-morning-report__stat-note--money { color: var(--x-primary); font-size: 11.5px; font-weight: 700; }
.m-morning-report__section {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--x-line);
color: var(--x-ink);
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
}
.m-morning-report__flag {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--x-coral);
}
.m-morning-report__lead {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0 3px 13px;
font-size: 12px;
line-height: 1.3;
}
.m-morning-report__lead-name {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word; /* wraps on the narrowest phones instead of being cut */
color: var(--x-text);
}
.m-morning-report__assignee {
flex: none;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px 2px 5px;
border-radius: 5px;
background: var(--x-paper-deep);
color: var(--x-text);
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.m-morning-report__assignee svg { color: var(--x-muted); }
.m-morning-report__channel {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 3px;
padding-top: 6px;
border-top: 1px solid var(--x-line);
font-size: 11.5px;
line-height: 1.3;
}
.m-morning-report__channel-label { flex: none; color: var(--x-muted); }
.m-morning-report__channel-value {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word;
color: var(--x-ink);
font-weight: 700;
}
.m-morning-report__spark {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid var(--x-line);
}
.m-morning-report__spark-label { flex: 1 1 auto; min-width: 0; color: var(--x-muted); font-size: 11px; line-height: 1.3; }
.m-morning-report__spark-svg { width: 100px; height: 30px; overflow: visible; }
.m-morning-report__spark-area { fill: var(--x-primary); opacity: 0.1; }
.m-morning-report__spark-line { fill: none; stroke: var(--x-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-morning-report__spark-dot { fill: var(--x-primary); transform-box: fill-box; transform-origin: center; }
.m-morning-report__wipe {
fill: #fff;
transform-box: fill-box;
transform-origin: 100% 50%;
transform: scaleX(0); /* static state: chart fully visible */
}
.m-morning-report__spark-delta {
flex: none;
color: var(--x-mint);
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ---------- Reaction on the owner's reply ---------- */
.m-morning-report__react {
position: absolute;
right: 8px;
bottom: -9px;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px 2px 5px;
border: 1px solid var(--x-line);
border-radius: 999px;
background: #fff;
box-shadow: var(--x-shadow-sm);
color: var(--x-coral);
line-height: 1;
transform-origin: 80% 100%;
}
.m-morning-report__react-n { color: var(--x-text); font-size: 10px; font-weight: 600; }
/* ---------- Composer + home indicator ---------- */
.m-morning-report__composer {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px 7px;
border-top: 1px solid var(--x-line);
background: #fff;
color: var(--x-muted);
}
.m-morning-report__input {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
color: var(--x-muted);
font-size: 13px;
line-height: 22px;
}
.m-morning-report__typed { display: none; color: var(--x-ink); }
.m-morning-report__tools { display: flex; align-items: center; gap: 12px; }
.m-morning-report__send { display: none; color: var(--x-zalo); }
.m-morning-report__composer.is-typing .m-morning-report__input { white-space: normal; overflow-wrap: anywhere; } /* grows to a 2nd line like Zalo, never cuts the reply */
.m-morning-report__composer.is-typing .m-morning-report__placeholder { display: none; }
.m-morning-report__composer.is-typing .m-morning-report__typed { display: inline; }
.m-morning-report__composer.is-typing .m-morning-report__typed::after {
content: "";
display: inline-block;
width: 1.5px;
height: 14px;
margin-left: 1px;
vertical-align: -2px;
background: var(--x-zalo);
animation: m-morning-report-blink 1s steps(2, start) infinite;
}
.m-morning-report__composer.is-typing .m-morning-report__tools { display: none; }
.m-morning-report__composer.is-typing .m-morning-report__send { display: block; }
.m-morning-report__home {
flex: none;
display: grid;
place-items: center;
height: 22px;
background: #fff;
}
.m-morning-report__home::before {
content: "";
width: 110px;
height: 5px;
border-radius: 3px;
background: var(--x-ink);
opacity: 0.85;
}
/* ---------- Live (JS-driven) states. Without JS / under reduced motion the finished chat shows. ---------- */
.m-morning-report.is-live .m-morning-report__msg--bot:not(.is-in),
.m-morning-report.is-live .m-morning-report__msg--reply:not(.is-in),
.m-morning-report.is-live .m-morning-report__line:not(.is-in) { display: none; }
.m-morning-report.is-live .m-morning-report__msg.is-in { animation: m-morning-report-pop 0.4s var(--x-ease) both; }
.m-morning-report.is-live .m-morning-report__line.is-in { animation: m-morning-report-rise 0.32s var(--x-ease) both; }
.m-morning-report.is-live .m-morning-report__react:not(.is-in) { opacity: 0; transform: scale(0.4); }
.m-morning-report.is-live .m-morning-report__react.is-in { animation: m-morning-report-react 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.m-morning-report.is-live .m-morning-report__wipe { transform: scaleX(1); }
.m-morning-report.is-live .m-morning-report__line.is-in .m-morning-report__wipe { animation: m-morning-report-wipe 1.1s 0.2s var(--x-ease) both; }
.m-morning-report.is-live .m-morning-report__line.is-in .m-morning-report__spark-dot { animation: m-morning-report-react 0.4s 1.15s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes m-morning-report-pop {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes m-morning-report-rise {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: none; }
}
@keyframes m-morning-report-react {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: scale(1); }
}
@keyframes m-morning-report-wipe {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@keyframes m-morning-report-blink {
50% { opacity: 0; }
}
/* ---------- Narrow containers (< 330px): the phone shrinks, so tighten the UI ---------- */
@container m-morning-report (max-width: 329px) {
.m-morning-report__phone { padding: 8px; border-radius: 38px; }
.m-morning-report__screen { border-radius: 31px; }
.m-morning-report__island { width: 76px; height: 22px; margin-left: -38px; top: 9px; }
.m-morning-report__status { height: 44px; padding: 8px 20px 0 26px; font-size: 12px; }
.m-morning-report__header { padding: 2px 4px 8px 2px; }
.m-morning-report__name { font-size: 12px; }
.m-morning-report__sub { font-size: 10.5px; }
.m-morning-report__list { padding: 0 8px; }
.m-morning-report__thread { gap: 6px; padding: 8px 0 12px; }
.m-morning-report__msg { max-width: 90%; }
.m-morning-report__msg--bot { width: 94%; max-width: 94%; }
.m-morning-report__bubble { padding: 7px 9px 5px; font-size: 12px; }
.m-morning-report__bubble--report { padding: 8px 9px 5px; }
.m-morning-report__title { font-size: 12.5px; }
.m-morning-report__stat { gap: 6px; padding: 4px 0; font-size: 11.5px; }
.m-morning-report__stat-n { font-size: 13px; }
.m-morning-report__stat-note { min-width: 80px; font-size: 10px; }
.m-morning-report:lang(en) .m-morning-report__stat-note { min-width: 94px; } /* "VND 48,500,000" */
.m-morning-report__stat-note--money { font-size: 10.5px; }
.m-morning-report__lead { padding: 2px 0 2px 11px; font-size: 11px; }
.m-morning-report__section,
.m-morning-report__channel { font-size: 11px; }
.m-morning-report__spark-svg { width: 84px; height: 25px; }
.m-morning-report__spark-label { font-size: 10.5px; }
.m-morning-report__composer { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.m-morning-report__thread { transition: none; }
.m-morning-report .m-morning-report__msg,
.m-morning-report .m-morning-report__line,
.m-morning-report .m-morning-report__react,
.m-morning-report .m-morning-report__wipe,
.m-morning-report .m-morning-report__spark-dot,
.m-morning-report .m-morning-report__typed::after { animation: none; transition: none; }
}
/* ---- night-inbox ---- */
/* night-inbox — a phone lock screen at 22:47 with unread notifications piling up,
and three "where the customer went" cards beside it.
Every selector starts with .m-night-inbox. Tokens come from ../_tokens.css (theme base.css). */
.m-night-inbox {
--m-ni-phone: 300px; /* phone width; override on the root to resize */
--m-ni-bezel: #1c1a20;
--m-ni-wall-top: #262930; /* plain dark wallpaper, no photo */
--m-ni-wall-bottom: #101216;
--m-ni-card: rgba(255, 255, 255, 0.12); /* notification card on the dark screen */
--m-ni-card-line: rgba(255, 255, 255, 0.07);
--m-ni-dim: rgba(255, 255, 255, 0.56);
--m-ni-page: #4f6ba3; /* generic "fanpage" app tile (no logo) */
--m-ni-form: #6b5aa8; /* generic "forms" app tile (no logo) */
--m-ni-warm: #c9503f;
--m-ni-warm: color-mix(in srgb, var(--x-coral) 72%, var(--x-ink));
--m-ni-warm-soft: #ffe6e1;
--m-ni-warm-soft: color-mix(in srgb, var(--x-coral) 14%, #fff);
container-type: inline-size;
container-name: m-night-inbox;
width: 100%;
margin: 0;
padding: 0;
font-family: var(--x-font-body);
font-size: 15px;
line-height: 1.4;
color: var(--x-text);
-webkit-font-smoothing: antialiased;
}
.m-night-inbox *,
.m-night-inbox *::before,
.m-night-inbox *::after { box-sizing: border-box; }
.m-night-inbox svg { display: block; flex: none; }
.m-night-inbox__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: stretch;
gap: 22px;
}
/* ---------- Device frame ---------- */
.m-night-inbox__phone {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--m-ni-phone);
margin: 0 auto;
aspect-ratio: 9 / 19.5;
padding: 9px;
border-radius: 42px;
background: var(--m-ni-bezel);
box-shadow: var(--x-shadow-lift), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09);
}
.m-night-inbox__screen {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 34px;
background: linear-gradient(180deg, var(--m-ni-wall-top) 0%, var(--m-ni-wall-bottom) 58%);
color: #fff;
font-family: var(--x-font-ui);
font-size: 12.5px;
line-height: 1.3;
}
.m-night-inbox__island {
position: absolute;
top: 10px;
left: 50%;
z-index: 3;
width: 84px;
height: 24px;
margin-left: -42px;
border-radius: 12px;
background: var(--m-ni-bezel);
}
/* ---------- Status bar, lock, clock ---------- */
.m-night-inbox__status {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
gap: 6px;
height: 44px;
padding: 10px 22px 0 26px;
opacity: 0.92;
}
.m-night-inbox__status-group { display: flex; align-items: center; gap: 5px; }
.m-night-inbox__lock {
flex: none;
display: flex;
justify-content: center;
margin-top: 4px;
opacity: 0.85;
}
.m-night-inbox__date {
flex: none;
margin-top: 6px;
text-align: center;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
opacity: 0.92;
}
.m-night-inbox__clock {
flex: none;
margin: 0 0 14px;
text-align: center;
font-size: 54px;
font-weight: 200;
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
/* ---------- Notification stack ---------- */
.m-night-inbox__stack {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 10px 80px;
overflow: hidden;
transition: opacity 0.45s ease;
}
.m-night-inbox__notif {
flex: none;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px 9px 9px;
border: 1px solid var(--m-ni-card-line);
border-radius: 12px;
background: var(--m-ni-card);
transform-origin: 50% 0; /* drops in from its top edge */
transition: transform 0.5s var(--x-ease);
}
.m-night-inbox__app {
flex: none;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 8px;
color: #fff;
}
.m-night-inbox__app--page { background: var(--m-ni-page); }
.m-night-inbox__app--zalo { background: var(--x-zalo); }
.m-night-inbox__app--call { background: var(--x-mint); }
.m-night-inbox__app--form { background: var(--m-ni-form); }
.m-night-inbox__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.m-night-inbox__row {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.m-night-inbox__from {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 600;
}
.m-night-inbox__src {
flex: none;
font-size: 11px;
color: var(--m-ni-dim);
}
.m-night-inbox__time {
flex: none;
margin-left: auto;
font-size: 11px;
color: var(--m-ni-dim);
font-variant-numeric: tabular-nums;
}
.m-night-inbox__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color: rgba(255, 255, 255, 0.82);
overflow-wrap: anywhere;
}
/* "12 more notifications" — the collapsed stack at the bottom */
.m-night-inbox__more {
position: relative;
z-index: 0; /* own stacking context so the ::before/::after layers sit behind the card only */
flex: none;
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 8px;
padding: 8px 11px 8px 10px;
border: 1px solid var(--m-ni-card-line);
border-radius: 12px;
background: var(--m-ni-card);
font-size: 12px;
color: rgba(255, 255, 255, 0.82);
transition: transform 0.5s var(--x-ease);
}
.m-night-inbox__more::before,
.m-night-inbox__more::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: -4px;
z-index: -1;
height: 10px;
border-radius: 0 0 10px 10px;
background: rgba(255, 255, 255, 0.075);
}
.m-night-inbox__more::after {
left: 16px;
right: 16px;
bottom: -8px;
background: rgba(255, 255, 255, 0.045);
}
.m-night-inbox__more-apps { display: flex; align-items: center; }
.m-night-inbox__mini {
width: 16px;
height: 16px;
border: 1.5px solid #1b1d22;
border-radius: 5px;
margin-right: -4px;
}
.m-night-inbox__mini:last-child { margin-right: 4px; }
.m-night-inbox__badge {
display: inline-grid;
place-items: center;
min-width: 19px;
height: 19px;
padding: 0 6px;
border-radius: 10px;
background: var(--x-crimson);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.m-night-inbox__badge.is-bump { animation: m-night-inbox-bump 0.45s var(--x-ease); }
.m-night-inbox__more-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- Lock-screen chrome: flashlight / camera, home bar ---------- */
.m-night-inbox__quick {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
display: flex;
justify-content: space-between;
}
.m-night-inbox__quick-btn {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.13);
color: #fff;
}
.m-night-inbox__home {
position: absolute;
bottom: 9px;
left: 50%;
width: 108px;
height: 4px;
margin-left: -54px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.85);
}
/* ---------- "The next morning" cards ---------- */
.m-night-inbox__after {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
transition: opacity 0.45s ease;
}
.m-night-inbox__after-label {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--x-font-body); /* serif only for headings >= 28px */
font-size: 15px;
font-weight: 600;
color: var(--x-muted);
transition: opacity 0.5s ease;
}
.m-night-inbox__after-label::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--x-line);
}
.m-night-inbox__card {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--x-line);
border-radius: 14px;
background: #fff;
box-shadow: var(--x-shadow);
transition: opacity 0.6s ease, transform 0.6s var(--x-ease);
}
.m-night-inbox__card-icon {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--m-ni-warm-soft);
color: var(--m-ni-warm);
}
.m-night-inbox__card-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.m-night-inbox__card-title {
font-size: clamp(14px, 2.6cqi + 9px, 15.5px);
font-weight: 600;
line-height: 1.3;
color: var(--x-ink);
overflow-wrap: anywhere;
}
.m-night-inbox__card-sub {
font-size: 12.5px;
line-height: 1.35;
color: var(--x-muted);
overflow-wrap: anywhere;
}
/* ---------- Layouts (container queries on the root) ---------- */
/* Below 300px the phone itself shrinks (it is capped at --m-ni-phone), so the screen gets shorter while the
notifications wrap more. A smaller clock and status bar keep the "more" row clear of the flashlight/camera
buttons, so no notification text slides underneath them (288px container, EN, is the tightest case). */
@container m-night-inbox (max-width: 299.98px) {
.m-night-inbox__status { height: 40px; }
.m-night-inbox__date { margin-top: 4px; }
.m-night-inbox__clock { margin-bottom: 10px; font-size: 48px; }
/* The app icon already names the source; dropping the small app label keeps "Cuộc gọi nhỡ" whole (no "…"). */
.m-night-inbox__src { display: none; }
}
@container m-night-inbox (min-width: 560px) {
.m-night-inbox__after { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m-night-inbox__after-label { grid-column: 1 / -1; }
.m-night-inbox__card { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 14px 13px; }
}
@container m-night-inbox (min-width: 820px) {
.m-night-inbox__layout {
grid-template-columns: var(--m-ni-phone) minmax(260px, 330px);
align-items: center;
justify-content: center;
gap: 0;
}
.m-night-inbox__after {
position: relative;
z-index: 2;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-left: -26px;
}
.m-night-inbox__after-label { grid-column: auto; margin-left: 38px; }
.m-night-inbox__card { align-items: center; flex-direction: row; gap: 12px; padding: 12px 14px; }
}
/* ---------- Motion states (script adds .is-live; CSS default = final static state) ---------- */
.m-night-inbox.is-live .m-night-inbox__stack > [data-k]:not(.is-in) { display: none; }
.m-night-inbox.is-live .m-night-inbox__stack > [data-k].is-in { animation: m-night-inbox-drop 0.55s var(--x-ease); }
.m-night-inbox.is-live .m-night-inbox__after [data-k]:not(.is-in) { opacity: 0; transform: translateY(10px); }
@keyframes m-night-inbox-drop {
from { opacity: 0; transform: translateY(-18px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes m-night-inbox-bump {
0% { transform: scale(1); }
40% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.m-night-inbox * { animation: none !important; transition: none !important; }
}
/* ---------- On the ink ground (home pain section, .is-dark) ----------
The default bezel is 1.07:1 against ink, so the phone lifts to a lighter bezel with a hairline ring; the
"next morning" label turns light. */
.is-dark .m-night-inbox { --m-ni-bezel: #2E2A33; }
.is-dark .m-night-inbox__phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1.5px rgba(255, 255, 255, 0.09); }
.is-dark .m-night-inbox__after-label { color: rgba(255, 255, 255, 0.78); }
.is-dark .m-night-inbox__after-label::after { background: rgba(255, 255, 255, 0.16); }
.is-dark .m-night-inbox__card { box-shadow: none; border-color: transparent; }
/* Phones: the phone keeps its 300px cap (centred). Narrower than the root, its notifications would truncate the
sender names ("…"), because the component's tightening is keyed to the root's width, not the phone's. */
/* ---- before-after ---- */
/* before-after: SVG illustrations, or the HTML layout < 600 px and 900-1059 px. Motion needs .is-on. */
.m-before-after { container-type: inline-size; width: 100%; min-width: 0; box-sizing: border-box; font-family: var(--x-font-body); color: var(--x-text); line-height: 1.4; }
.m-before-after *,
.m-before-after *::before,
.m-before-after *::after { box-sizing: border-box; }
.m-before-after__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 28px;
}
.m-before-after__panel { display: flex; flex-direction: column; gap: 12px; gap: clamp(10px, 1.6cqi, 16px); min-width: 0; padding: 16px; padding: clamp(12px, 1.8cqi, 20px); background: var(--x-paper); border: 1px solid var(--x-line); border-radius: 16px; box-shadow: var(--x-shadow-sm); }
.m-before-after__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.m-before-after__tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; font: 600 13px/1.1 var(--x-font-body); white-space: nowrap; }
.m-before-after__tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.m-before-after__tag--before { background: var(--x-paper-deep); color: var(--x-ink); }
.m-before-after__tag--before::before { background: var(--x-coral); }
.m-before-after__tag--after { background: var(--x-paper-deep); background: color-mix(in srgb, var(--x-mint) 12%, transparent); color: color-mix(in srgb, var(--x-mint) 80%, #000); }
.m-before-after__tag--after::before { background: var(--x-mint); }
.m-before-after__title {
margin: 0;
font: 700 17px/1.3 var(--x-font-body);
font: 700 clamp(16px, 1.2cqi + 10px, 19px)/1.3 var(--x-font-body); /* no serif < 28px */
color: var(--x-ink);
text-wrap: balance;
overflow-wrap: anywhere;
}
.m-before-after__art { width: 100%; aspect-ratio: 520 / 342; margin-top: auto; }
.m-before-after__svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.m-before-after svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-before-after__svg { stroke-width: 1.5; }
.m-before-after__arrow { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--x-primary); color: var(--x-paper); border: 3px solid var(--x-paper-deep); box-shadow: var(--x-shadow); transform: translate(-50%, -50%); }
.m-before-after__arrow svg { display: block; }
.m-before-after .ba-s { fill: var(--x-paper); stroke: var(--x-ink); }
.m-before-after .ba-o { stroke: var(--x-ink); }
.m-before-after .ba-f { fill: var(--x-paper); }
.m-before-after .ba-f2 { fill: var(--x-paper-deep); }
.m-before-after .ba-f2s { fill: var(--x-paper-deep); stroke: var(--x-ink); }
.m-before-after .ba-inkf { fill: var(--x-ink); }
.m-before-after .ba-ln { stroke: var(--x-muted); stroke-width: 1; opacity: .55; }
.m-before-after .ba-line { stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-cell rect { fill: var(--x-ink); opacity: .35; }
.m-before-after .ba-ring circle { fill: var(--x-paper); stroke: var(--x-ink); }
.m-before-after .ba-coral { fill: var(--x-coral); fill-opacity: .16; stroke: var(--x-coral); }
.m-before-after .ba-coral-ln { stroke: var(--x-coral); stroke-width: 1; opacity: .6; }
.m-before-after .ba-zalo { fill: var(--x-zalo); }
.m-before-after .ba-notif rect { fill: var(--x-paper); stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-notif .ba-nl { fill: var(--x-muted); stroke: none; opacity: .5; }
.m-before-after .ba-notif circle { fill: var(--x-crimson); }
.m-before-after .ba-face { stroke: var(--x-ink); }
.m-before-after .ba-clock { stroke: var(--x-ink); stroke-width: 1.2; }
.m-before-after .ba-pill { fill: var(--x-paper); stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-badge { fill: var(--x-crimson); stroke: var(--x-paper); stroke-width: 2; }
.m-before-after .ba-badge-t { font: 700 12px var(--x-font-ui); fill: var(--x-paper); }
.m-before-after .ba-badge-t--xs { font-size: 11px; }
.m-before-after .ba-ok { fill: var(--x-mint); stroke: var(--x-paper); stroke-width: 2; }
.m-before-after .ba-ck-w { stroke: var(--x-paper); stroke-width: 1.8; }
.m-before-after .ba-lost path { stroke: var(--x-muted); stroke-dasharray: 5 5; opacity: .8; }
.m-before-after .ba-x path { stroke: var(--x-muted); }
.m-before-after .ba-end circle { fill: var(--x-paper); stroke: var(--x-muted); }
.m-before-after .ba-q { font: 700 20px var(--x-font-display); fill: var(--x-muted); text-anchor: middle; }
.m-before-after .ba-q--sm { font-size: 15px; }
.m-before-after .ba-t { font: 600 13px var(--x-font-body); fill: var(--x-ink); }
.m-before-after .ba-t--12 { font-size: 12px; }
.m-before-after .ba-t--sm { font-size: 12px; font-weight: 500; }
.m-before-after .ba-t--xs { font-size: 11px; font-weight: 500; }
.m-before-after .ba-t--muted { fill: var(--x-muted); }
.m-before-after .ba-t--w { fill: var(--x-paper); font-weight: 700; }
.m-before-after .ba-t--ui { font-family: var(--x-font-ui); }
.m-before-after .ba-t--b { font-weight: 700; font-size: 11.5px; }
.m-before-after .ba-t--p { fill: var(--x-deep); }
.m-before-after .ba-t--st { font-size: 11.5px; font-weight: 700; }
.m-before-after .ba-t--who { font: italic 500 12.5px var(--x-font-body); fill: var(--x-muted); }
.m-before-after .ba-wire path { stroke: var(--x-cobalt); stroke-dasharray: 4 3; opacity: .8; }
.m-before-after .ba-tip,
.m-before-after .ba-tip path { stroke: var(--x-cobalt); }
.m-before-after .ba-tip--muted { stroke: var(--x-muted); }
.m-before-after .ba-ic { stroke: var(--x-ink); }
.m-before-after .ba-ic--w { stroke: var(--x-paper); stroke-width: 1.4; }
.m-before-after .ba-ic--thick { stroke-width: 2.6; }
.m-before-after .ba-retired rect,
.m-before-after .ba-retired circle:not(.ba-ok) { fill: var(--x-paper); stroke: var(--x-muted); opacity: .55; }
.m-before-after .ba-retired path:not(.ba-ck-w) { stroke: var(--x-muted); stroke-width: 1; opacity: .55; }
.m-before-after .ba-bar--p { fill: var(--x-primary); }
.m-before-after .ba-bar--c { fill: var(--x-cobalt); }
.m-before-after .ba-bar--m { fill: var(--x-mint); }
.m-before-after .ba-bar--o { fill: var(--x-coral); }
.m-before-after .ba-card > rect:first-child { fill: var(--x-paper); stroke: var(--x-line); stroke-width: 1; }
.m-before-after .ba-l1 { fill: var(--x-ink); opacity: .6; }
.m-before-after .ba-l2 { fill: var(--x-muted); opacity: .5; }
.m-before-after .ba-av { fill: var(--x-paper-deep); stroke: var(--x-muted); stroke-width: .8; }
.m-before-after .ba-ck { stroke: var(--x-mint); }
.m-before-after .ba-hl { fill: var(--x-primary); fill-opacity: .07; stroke: var(--x-primary); }
.m-before-after .ba-node { fill: var(--x-cobalt-soft); stroke: var(--x-cobalt); }
.m-before-after .ba-gear,
.m-before-after .ba-pop { transform-box: fill-box; transform-origin: center; }
.m-before-after .ba-gear-c,
.m-before-after .ba-gear-t { stroke: var(--x-cobalt); stroke-width: 3; }
.m-before-after .ba-av-sale { fill: var(--x-paper-deep); stroke: var(--x-ink); }
.m-before-after .ba-av-owner { fill: var(--x-primary); fill-opacity: .12; stroke: var(--x-primary); }
.m-before-after .ba-chart rect { fill: var(--x-primary); }
.m-before-after .ba-dot { fill: var(--x-cobalt); opacity: 0; offset-rotate: 0deg; }
.m-before-after__m { display: none; flex-direction: column; font: 600 13px/1.25 var(--x-font-body); color: var(--x-ink); }
.m-before-after__m b { display: block; font-weight: 600; }
.m-before-after__m small { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--x-muted); }
.m-before-after__lb { min-width: 0; }
.m-before-after__m svg { display: block; stroke: currentColor; stroke-width: 1.8; }
.m-before-after__src,
.m-before-after__chip,
.m-before-after__crm,
.m-before-after__out { position: relative; background: var(--x-paper); border: 1.5px solid var(--x-ink); border-radius: 12px; }
.m-before-after__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--x-paper-deep); }
.m-before-after__ic svg { width: 18px; height: 18px; }
.m-before-after__ic--zalo { background: var(--x-zalo); color: var(--x-paper); }
.m-before-after__ic--owner { color: var(--x-primary); }
.m-before-after__ic--owner svg { stroke-width: 3; }
.m-before-after__n,
.m-before-after__ok { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid var(--x-paper); border-radius: 11px; background: var(--x-crimson); color: var(--x-paper); font: 700 12px/18px var(--x-font-ui); text-align: center; }
.m-before-after__ok { display: grid; place-items: center; padding: 0; background: var(--x-mint); }
.m-before-after__ok svg { width: 12px; height: 12px; stroke-width: 3; }
.m-before-after__m--before { gap: 16px; }
.m-before-after__mess { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px; padding: 10px 4px 0; }
.m-before-after__src { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px 5px 5px; transform: rotate(-2.5deg); }
.m-before-after__src:nth-child(2n) { transform: rotate(2deg) translateY(4px); }
.m-before-after__src:nth-child(3n) { transform: rotate(-1deg); }
.m-before-after__src--zalo { background: color-mix(in srgb, var(--x-zalo) 88%, #000); border-color: color-mix(in srgb, var(--x-zalo) 88%, #000); color: #fff; }
.m-before-after__src--zalo .m-before-after__ic { background: var(--x-paper); color: var(--x-zalo); }
.m-before-after__src--note { background: color-mix(in srgb, var(--x-coral) 14%, var(--x-paper)); border-color: var(--x-coral); }
.m-before-after__src--note .m-before-after__ic { background: var(--x-paper); color: var(--x-coral); }
.m-before-after .m-before-after__file { font-family: var(--x-font-ui); overflow-wrap: anywhere; }
.m-before-after__who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px dashed var(--x-muted); border-radius: 14px; }
.m-before-after__face svg { width: 46px; height: 46px; }
.m-before-after__face *,
.m-before-after__retired svg * { vector-effect: non-scaling-stroke; }
.m-before-after__who small { font-style: italic; }
.m-before-after__time { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border: 1px solid var(--x-line); border-radius: 999px; font: 600 12px/1.2 var(--x-font-ui); color: var(--x-muted); }
.m-before-after__time svg { width: 12px; height: 12px; stroke-width: 2.4; }
.m-before-after__chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.m-before-after__chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px 4px 4px; overflow-wrap: anywhere; }
.m-before-after__flow { position: relative; width: 0; height: 26px; margin-left: 19px; border-left: 1.5px dashed var(--x-cobalt); }
.m-before-after__flow::before,
.m-before-after__flow::after { content: ""; position: absolute; left: -4.75px; width: 7px; height: 7px; }
.m-before-after__flow::before { bottom: 1px; border: solid var(--x-cobalt); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.m-before-after__flow::after { top: -3px; border-radius: 50%; background: var(--x-cobalt); opacity: 0; }
.m-before-after__crm { padding: 8px 12px 6px; font: 500 12px/1.3 var(--x-font-ui); color: var(--x-muted); }
.m-before-after__crm-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px solid var(--x-line); }
.m-before-after .m-before-after__crm-h b { font: 700 13px/1.2 var(--x-font-ui); color: var(--x-ink); }
.m-before-after__stage { --c: var(--x-primary); display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--x-ink); }
.m-before-after__stage--c { --c: var(--x-cobalt); }
.m-before-after__stage--o { --c: var(--x-coral); }
.m-before-after__stage--m { --c: var(--x-mint); }
.m-before-after__sn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.m-before-after__sn::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.m-before-after__cards { flex: none; display: flex; gap: 4px; width: 90px; }
.m-before-after__cards i { position: relative; width: 14px; height: 18px; background: var(--x-paper-deep); border: 1px solid var(--x-line); border-radius: 3px; box-shadow: inset 0 2px var(--c); }
.m-before-after__cards .is-new::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--x-primary); border-radius: 5px; }
.m-before-after .m-before-after__stage b { flex: none; width: 18px; font-weight: 700; text-align: right; }
.m-before-after__auto { display: flex; align-items: center; gap: 10px; }
.m-before-after__gear { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--x-cobalt-soft); border: 1.5px solid var(--x-cobalt); border-radius: 50%; color: var(--x-cobalt); }
.m-before-after__gear svg { width: 20px; height: 20px; stroke-width: 2.4; }
.m-before-after__outs { position: relative; display: grid; gap: 12px; padding: 12px 0 0 40px; }
.m-before-after__outs::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 27px; border-left: 1.5px dashed var(--x-cobalt); }
.m-before-after__out { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.m-before-after__out::before { content: ""; position: absolute; left: -22.5px; top: 50%; width: 20px; border-top: 1.5px dashed var(--x-cobalt); }
.m-before-after__out .m-before-after__lb { flex: 1; font-family: var(--x-font-ui); }
.m-before-after .m-before-after__out b { font-weight: 700; }
.m-before-after__to { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 12px/1.2 var(--x-font-body); color: var(--x-muted); }
.m-before-after__av { display: grid; place-items: center; width: 26px; height: 26px; background: var(--x-paper-deep); border: 1.5px solid var(--x-ink); border-radius: 50%; font: 700 12px/1 var(--x-font-ui); color: var(--x-ink); }
.m-before-after__av--owner { background: var(--x-paper); border-color: var(--x-primary); color: var(--x-deep); }
.m-before-after__retired { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 500 12px/1.3 var(--x-font-body); color: var(--x-muted); }
.m-before-after__retired svg { flex: none; width: 66px; height: 18px; }
@supports (offset-path: path("M0 0h1")) {
.m-before-after .ba-dot--s1 { offset-path: path("M108 66H134"); }
.m-before-after .ba-dot--s2 { offset-path: path("M108 130H134"); }
.m-before-after .ba-dot--mid { offset-path: path("M256 162H273"); }
.m-before-after .ba-dot--sale { offset-path: path("M296 140V90a8 8 0 0 1 8-8h29"); }
.m-before-after .ba-dot--owner { offset-path: path("M296 184V234a8 8 0 0 0 8 8h29"); }
.m-before-after.is-on .ba-dot { animation: 12s linear infinite; }
.m-before-after.is-on .ba-dot--s1 { animation-name: ba-dot-s1; }
.m-before-after.is-on .ba-dot--s2 { animation-name: ba-dot-s2; }
.m-before-after.is-on .ba-dot--mid { animation-name: ba-dot-mid; }
.m-before-after.is-on .ba-dot--sale { animation-name: ba-dot-sale; }
.m-before-after.is-on .ba-dot--owner { animation-name: ba-dot-owner; }
}
.m-before-after.is-on .ba-gear,
.m-before-after.is-on .m-before-after__gear svg { animation: ba-spin 12s linear infinite; }
.m-before-after.is-on .ba-hl,
.m-before-after.is-on .is-new::after { animation: ba-hl 12s linear infinite; }
.m-before-after.is-on .ba-pop--sale,
.m-before-after.is-on .m-before-after__out--sale { animation: ba-pop-sale 12s linear infinite; }
.m-before-after.is-on .ba-pop--owner,
.m-before-after.is-on .m-before-after__out--owner { animation: ba-pop-owner 12s linear infinite; }
.m-before-after.is-on .ba-badge-g--sale,
.m-before-after.is-on .m-before-after__out--sale .m-before-after__n { animation: ba-badge-sale 12s linear infinite; }
.m-before-after.is-on .ba-badge-g--owner,
.m-before-after.is-on .m-before-after__out--owner .m-before-after__ok { animation: ba-badge-owner 12s linear infinite; }
.m-before-after.is-on .m-before-after__flow--a::after { animation: ba-mv-a 12s linear infinite; }
.m-before-after.is-on .m-before-after__flow--b::after { animation: ba-mv-a 12s 1.08s linear infinite; }
@keyframes ba-spin { to { transform: rotate(360deg); } }
@keyframes ba-dot-s1 { 0% { offset-distance: 0%; opacity: 0; } 1%, 7% { opacity: 1; } 8%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ba-dot-s2 { 0%, 50% { offset-distance: 0%; opacity: 0; } 51%, 57% { opacity: 1; } 58%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ba-dot-mid {
0%, 9% { offset-distance: 0%; opacity: 0; } 10%, 15% { opacity: 1; } 16% { offset-distance: 100%; opacity: 0; }
59% { offset-distance: 0%; opacity: 0; } 60%, 65% { opacity: 1; } 66%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ba-dot-sale {
0%, 17% { offset-distance: 0%; opacity: 0; } 18%, 26% { opacity: 1; } 27% { offset-distance: 100%; opacity: 0; }
67% { offset-distance: 0%; opacity: 0; } 68%, 76% { opacity: 1; } 77%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ba-dot-owner { 0%, 34% { offset-distance: 0%; opacity: 0; } 35%, 43% { opacity: 1; } 44%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ba-mv-a { 0% { transform: none; opacity: 0; } 1%, 7% { opacity: 1; } 8%, 50% { transform: translateY(22px); opacity: 0; } 50.01% { transform: none; } 51%, 57% { opacity: 1; } 58%, 100% { transform: translateY(22px); opacity: 0; } }
@keyframes ba-hl { 0%, 7% { opacity: 0; } 9%, 20% { opacity: 1; } 26%, 57% { opacity: 0; } 59%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes ba-pop-sale { 0%, 26%, 31%, 76%, 81%, 100% { transform: none; } 28%, 78% { transform: scale(1.04); } }
@keyframes ba-pop-owner { 0%, 43%, 48%, 100% { transform: none; } 45% { transform: scale(1.04); } }
@keyframes ba-badge-sale { 0%, 26% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes ba-badge-owner { 0%, 43% { opacity: 0; } 45%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.m-before-after.is-on *,
.m-before-after.is-on *::after { animation: none !important; }
}
@container (max-width: 899px) {
.m-before-after__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.m-before-after__arrow { position: relative; left: auto; top: auto; justify-self: center; margin: -2px 0; transform: rotate(90deg); }
}
@container (max-width: 599px) {
.m-before-after__art { display: none; }
.m-before-after__m { display: flex; }
}
/* 900-1059: HTML layout (SVG text < 10 px); the stretched "Hôm nay" panel spreads its sources around the rep */
@container (min-width: 900px) and (max-width: 1059px) {
.m-before-after__art { display: none; }
.m-before-after__m { display: flex; }
.m-before-after__m--before { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: space-evenly; gap: 30px 0; }
.m-before-after__mess { display: contents; }
.m-before-after__who { order: 1; grid-column: 1 / -1; }
.m-before-after__src { justify-self: end; margin-right: 22px; }
.m-before-after__src:nth-child(n+3) { order: 2; }
.m-before-after__src:nth-child(even) { justify-self: start; margin: 0 0 0 22px; }
.m-before-after__src:nth-child(3) { margin-right: 56px; }
.m-before-after__src:nth-child(6) { margin-left: 60px; }
.m-before-after__src::after { content: ""; position: absolute; left: 50%; top: 100%; height: 22px; border-left: 1.5px dashed var(--x-muted); transform: rotate(24deg); transform-origin: top; }
.m-before-after__src:nth-child(even)::after { transform: rotate(-30deg); }
.m-before-after__src:nth-child(n+3)::after { top: auto; bottom: 100%; transform-origin: bottom; }
.m-before-after__src:nth-child(n+5)::after { content: none; }
}
}
}
@container (max-width: 400px) {
.m-before-after__panel { padding: 10px 8px 8px; border-radius: 12px; }
.m-before-after__tag { font-size: 12px; }
.m-before-after__arrow { width: 38px; height: 38px; margin: -1px 0; }
}
/* no container queries */
@supports not (container-type: inline-size) {
@media (max-width: 899px) {
.m-before-after__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.m-before-after__arrow { position: relative; left: auto; top: auto; justify-self: center; margin: -2px 0; transform: rotate(90deg); }
}
@media (max-width: 599px) {
.m-before-after__art { display: none; }
.m-before-after__m { display: flex; }
}
}
/* ---- system-map ---- */
/* system-map: "One system, one customer list". Sources (left) → one Bitrix24 customer list (centre) → automatic
results (right), n8n band underneath. Stacked below a 598px root content width, three columns with rails above.
See NOTES.md for layout and motion details. */
.m-system-map { --sm-rail: #8A8490; --sm-g: 12px; --sm-loop: 10s; --sm-d0: 1.4s; container: msm / inline-size; position: relative; box-sizing: border-box; width: 100%; overflow: hidden; border: 1px solid var(--x-line); border-radius: var(--x-radius); background: #fff; color: var(--x-text); font: 15px/1.4 var(--x-font-body); text-align: left; }
.m-system-map *,
.m-system-map *::before,
.m-system-map *::after { box-sizing: border-box; }
.m-system-map .x-icon { display: block; width: 24px; height: 24px; flex: none; color: inherit; }
.m-system-map__in { --sm-w: clamp(26px, 5.6cqi, 76px); padding: clamp(16px, 3.2cqi, 40px); }
/* ---------- Heading ---------- */
/* Bare variant (extra MOD=" m-system-map--bare"): the page section already has its own heading. */
.m-system-map--bare .m-system-map__head { display: none; }
.m-system-map__head { margin-bottom: clamp(20px, 3cqi, 34px); }
.m-system-map__title { margin: 0; font: 600 clamp(28px, 3.3cqi, 40px)/1.12 var(--x-font-display); letter-spacing: -0.012em; color: var(--x-ink); text-wrap: balance; }
.m-system-map__sub { margin: 8px 0 0; font: 400 clamp(15px, 1.5cqi, 18px)/1.45 var(--x-font-body); color: var(--x-muted); text-wrap: balance; }
/* ---------- Column labels ---------- */
.m-system-map__label { margin: 0 0 8px; font: 700 14px/1.3 var(--x-font-body); color: var(--x-muted); }
.m-system-map__label--hub { display: none; }
/* ---------- Nodes (narrow: one grouped card per side) ---------- */
.m-system-map__grid { display: flex; flex-direction: column; }
.m-system-map__col { display: grid; border: 1px solid var(--x-line); border-radius: 14px; background: var(--x-paper); }
.m-system-map__node { container: msmn / inline-size; position: relative; display: flex; align-items: center; padding: 12px 14px; }
.m-system-map__node + .m-system-map__node { border-top: 1px solid var(--x-line); }
.m-system-map__nb { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; }
.m-system-map__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--x-primary); background: rgba(128, 0, 0, 0.08); }
.m-system-map__ic .x-icon { width: 24px; height: 24px; }
.m-system-map__ic--zalo { color: var(--x-zalo); background: rgba(0, 104, 255, 0.09); }
.m-system-map__tx { display: block; min-width: 0; }
.m-system-map__nt { display: block; font: 700 15.5px/1.25 var(--x-font-body); color: var(--x-ink); overflow-wrap: break-word; }
.m-system-map__nd { display: block; margin-top: 2px; font: 400 14px/1.35 var(--x-font-body); color: var(--x-muted); overflow-wrap: break-word; text-wrap: pretty; }
.m-system-map__col--out .m-system-map__nb { padding-right: 28px; }
/* Done badge on each output */
.m-system-map__ok { position: absolute; top: 50%; right: 12px; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--x-mint); }
.m-system-map__ok svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@container msmn (max-width: 235.9px) {
.m-system-map__nb { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.m-system-map__col--out .m-system-map__nb { padding-right: 0; }
.m-system-map__nt { font-size: 15px; }
.m-system-map__nd { font-size: 13.5px; }
}
@container msmn (min-width: 300px) {
.m-system-map__nb { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.m-system-map__ic { width: 44px; height: 44px; border-radius: 12px; }
.m-system-map__ic .x-icon { width: 26px; height: 26px; }
.m-system-map__nt { font-size: 16.5px; }
.m-system-map__nd { font-size: 14.5px; }
}
/* ---------- Hub: the company's customer list ---------- */
.m-system-map__hub { container: msmh / inline-size; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; border-radius: var(--x-radius); background: var(--x-primary); color: #fff; box-shadow: 0 9px 0 -2px var(--x-deep), var(--x-shadow-lift); }
.m-system-map__hin { padding: 16px; }
.m-system-map__prod { display: flex; align-items: center; gap: 7px; margin: 0; font: 400 12.5px/1.3 var(--x-font-ui); color: rgba(255, 255, 255, 0.82); }
.m-system-map__prod .x-icon { width: 20px; height: 20px; }
.m-system-map__ht { margin: 4px 0 12px; font: 700 20px/1.2 var(--x-font-body); color: #fff; }
.m-system-map__sheet { position: relative; border-radius: 12px; background: #fff; color: var(--x-ink); font-family: var(--x-font-ui); }
.m-system-map__sheet::before { content: ""; position: absolute; z-index: -1; left: 9px; right: 9px; bottom: -6px; height: 24px; border-radius: 0 0 12px 12px; background: rgba(255, 255, 255, 0.26); }
.m-system-map__sh { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px 6px; font-size: 12px; line-height: 1.3; color: var(--x-muted); }
.m-system-map__shs { display: none; }
.m-system-map__row { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "av name" "av src"; align-items: center; column-gap: 8px; row-gap: 3px; padding: 7px 10px; border-top: 1px solid var(--x-line); }
.m-system-map__row::before { content: ""; position: absolute; inset: 0; background: rgba(128, 0, 0, 0.07); opacity: 0; pointer-events: none; }
.m-system-map__row:last-child { border-radius: 0 0 12px 12px; }
.m-system-map__av { grid-area: av; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.m-system-map__av--1 { background: #F4E1DE; color: #800000; }
.m-system-map__av--2 { background: #DCEBE4; color: #22574A; }
.m-system-map__av--3 { background: #ECE3D2; color: #6A4915; }
.m-system-map__rn { grid-area: name; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.m-system-map__src { grid-area: src; justify-self: start; padding: 2px 7px; border-radius: 6px; font-size: 12px; line-height: 1.35; white-space: nowrap; }
.m-system-map__src--web { color: var(--x-primary); background: rgba(128, 0, 0, 0.08); }
.m-system-map__src--ads { color: var(--x-text); background: var(--x-paper-deep); }
.m-system-map__src--zalo { color: #0050C8; background: #E8F1FF; } /* Zalo UI blue, darkened for text: 6.2:1 */
.m-system-map__hn { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; font: 400 13.5px/1.35 var(--x-font-body); color: rgba(255, 255, 255, 0.9); text-wrap: balance; }
.m-system-map__hn .x-icon { width: 18px; height: 18px; margin-top: 0; }
@container msmh (min-width: 250px) {
.m-system-map__row { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "av name src"; }
.m-system-map__src { justify-self: end; }
.m-system-map__shs { display: inline; }
.m-system-map__ht { font-size: 22px; }
}
@container msmh (min-width: 300px) {
.m-system-map__hin { padding: 20px 20px 22px; }
.m-system-map__ht { margin: 2px 0 14px; font: 600 30px/1.1 var(--x-font-display); letter-spacing: -0.01em; }
.m-system-map__row { padding: 8px 12px; }
.m-system-map__sh { padding: 8px 12px 6px; }
.m-system-map__rn { font-size: 13.5px; }
}
/* ---------- Connectors (narrow: one short down arrow per side) ---------- */
.m-system-map__wire { position: relative; height: 40px; }
.m-system-map__s,
.m-system-map__bus { display: none; position: absolute; background: var(--sm-rail); }
.m-system-map__f { position: absolute; left: calc(50% - 1px); top: 5px; bottom: 11px; width: 2px; background: var(--sm-rail); transform-origin: 50% 0; }
.m-system-map__ah { position: absolute; display: none; background: var(--sm-rail); }
.m-system-map__ah--f { display: block; left: calc(50% - 5px); bottom: 3px; width: 10px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.m-system-map__run { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.m-system-map__run::after { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--x-primary); box-shadow: 0 0 0 2px #fff; }
/* ---------- n8n band ---------- */
.m-system-map__tick { display: none; }
.m-system-map__band { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 11px 14px; border: 0; border-radius: 14px; background: var(--x-paper-deep); color: var(--x-ink); }
.m-system-map__bic { color: var(--x-ink); }
.m-system-map__bic .x-icon { width: 24px; height: 24px; }
.m-system-map__bx { min-width: 0; font: 400 14.5px/1.35 var(--x-font-body); text-wrap: pretty; }
.m-system-map__bt { font-weight: 700; }
.m-system-map__bd { color: var(--x-text); }
/* ---------- Wide: three columns joined by rails (root ≥ 600px) ---------- */
@container msm (min-width: 598px) {
.m-system-map__head { text-align: center; }
.m-system-map__sub { max-width: 62ch; margin-inline: auto; }
.m-system-map__grid,
.m-system-map__base { display: grid; grid-template-columns: minmax(0, 1fr) var(--sm-w) minmax(0, 1.18fr) var(--sm-w) minmax(0, 1fr); }
.m-system-map__label { margin-bottom: 12px; }
.m-system-map__label--in { grid-area: 1 / 1; }
.m-system-map__label--hub { display: block; grid-area: 1 / 3; text-align: center; }
.m-system-map__label--out { grid-area: 1 / 5; }
.m-system-map__col--in { grid-area: 2 / 1; }
.m-system-map__wire--in { grid-area: 2 / 2; }
.m-system-map__hub { grid-area: 2 / 3; align-self: center; }
.m-system-map__wire--out { grid-area: 2 / 4; }
.m-system-map__col--out { grid-area: 2 / 5; }
.m-system-map__col { grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--sm-g); border: 0; border-radius: 0; background: none; }
.m-system-map__node,
.m-system-map__node + .m-system-map__node { padding: 14px; border: 1px solid var(--x-line); border-radius: 14px; background: var(--x-paper); }
.m-system-map__ok { top: 12px; right: 12px; margin-top: 0; }
/* Sources are short names only: compact chips centred on their rail, so the left side reads lighter than the results. */
.m-system-map__col--in .m-system-map__node { align-self: center; }
/* Rail geometry: node centres sit at 1/6, 1/2 and 5/6 of the column (minus the two gaps). */
.m-system-map__wire { --c0: calc((100% - 2 * var(--sm-g)) / 6); height: auto; }
.m-system-map__s { display: block; height: 2px; margin-top: -1px; transform-origin: 0 50%; }
.m-system-map__s--1 { top: var(--c0); }
.m-system-map__s--2 { top: 50%; }
.m-system-map__s--3 { top: calc(100% - var(--c0)); }
.m-system-map__bus { display: block; left: calc(50% - 1px); top: calc(var(--c0) - 1px); bottom: calc(var(--c0) - 1px); width: 2px; border-radius: 2px; }
.m-system-map__f { top: 50%; bottom: auto; width: auto; height: 2px; margin-top: -1px; transform-origin: 0 50%; }
.m-system-map__wire--in .m-system-map__s { left: 0; width: 50%; }
.m-system-map__wire--in .m-system-map__f { left: 50%; right: 8px; }
.m-system-map__wire--out .m-system-map__f { left: 0; width: 50%; }
.m-system-map__wire--out .m-system-map__s { left: 50%; right: 8px; }
/* Ports where a rail leaves a card */
.m-system-map__wire--in .m-system-map__s::before,
.m-system-map__wire--out .m-system-map__f::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border: 2px solid var(--sm-rail); border-radius: 50%; background: #fff; }
.m-system-map__ah { display: block; right: 0; left: auto; bottom: auto; width: 9px; height: 10px; margin-top: -5px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.m-system-map__wire--in .m-system-map__ah--f { top: 50%; }
.m-system-map__wire--out .m-system-map__ah--f { display: none; }
.m-system-map__ah--1 { top: var(--c0); }
.m-system-map__ah--2 { top: 50%; }
.m-system-map__ah--3 { top: calc(100% - var(--c0)); }
.m-system-map__run::after { left: -4px; top: -3px; }
/* Band: dashed ties up to the three columns, then one line across the full width */
.m-system-map__tick { display: block; justify-self: center; width: 2px; height: 22px; background: repeating-linear-gradient(to bottom, var(--sm-rail) 0 4px, transparent 4px 8px); transform-origin: 50% 100%; }
.m-system-map__tick--1 { grid-area: 1 / 1; }
.m-system-map__tick--2 { grid-area: 1 / 3; }
.m-system-map__tick--3 { grid-area: 1 / 5; }
.m-system-map__band { grid-area: 2 / 1 / 3 / -1; justify-content: center; margin-top: 0; padding: 12px 20px; border-radius: 999px; text-align: center; }
.m-system-map__bx { font-size: clamp(14.5px, 1.4cqi, 16px); }
}
/* Done tick sits on the node's centre line whenever icon and text are side by side (stacked list, wide nodes). */
@container msmn (min-width: 236px) {
.m-system-map__node > .m-system-map__ok { top: 50%; right: 14px; margin-top: -10px; }
}
/* ---------- Motion: reveal once ----------
.is-armed hides the parts (no transition, so arming is instant); .is-in transitions them in,
each part delayed by its own --sm-t. Order: inputs, rails in, list rows, rails out, outputs, band. */
.m-system-map.is-in .m-system-map__node,
.m-system-map.is-in .m-system-map__hub,
.m-system-map.is-in .m-system-map__row,
.m-system-map.is-in .m-system-map__base { transition: opacity 0.4s var(--x-ease-out, var(--x-ease)) var(--sm-t, 0s), transform 0.4s var(--x-ease-out, var(--x-ease)) var(--sm-t, 0s); }
.m-system-map.is-in .m-system-map__s,
.m-system-map.is-in .m-system-map__bus,
.m-system-map.is-in .m-system-map__f,
.m-system-map.is-in .m-system-map__tick { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) var(--sm-t, 0s); }
.m-system-map.is-in .m-system-map__ah { transition: opacity 0.2s linear var(--sm-t, 0s); }
.m-system-map.is-in .m-system-map__ok { transition: opacity 0.2s var(--x-ease-out, var(--x-ease)) var(--sm-t, 0s), transform 0.3s var(--x-ease-spring, var(--x-ease)) var(--sm-t, 0s); }
.m-system-map.is-armed:not(.is-in) .m-system-map__node { opacity: 0; transform: translateY(10px); }
.m-system-map.is-armed:not(.is-in) .m-system-map__hub { opacity: 0; transform: scale(0.97); }
.m-system-map.is-armed:not(.is-in) .m-system-map__row { opacity: 0; transform: translateX(-10px); }
.m-system-map.is-armed:not(.is-in) .m-system-map__s,
.m-system-map.is-armed:not(.is-in) .m-system-map__f,
.m-system-map.is-armed:not(.is-in) .m-system-map__bus,
.m-system-map.is-armed:not(.is-in) .m-system-map__tick { transform: scaleY(0); }
.m-system-map.is-armed:not(.is-in) .m-system-map__ah { opacity: 0; }
.m-system-map.is-armed:not(.is-in) .m-system-map__ok { opacity: 0; transform: scale(0.6); }
.m-system-map.is-armed:not(.is-in) .m-system-map__base { opacity: 0; transform: translateY(8px); }
@container msm (min-width: 598px) {
.m-system-map.is-armed:not(.is-in) .m-system-map__s,
.m-system-map.is-armed:not(.is-in) .m-system-map__f { transform: scaleX(0); }
}
/* --sm-t: reveal delay (the whole reveal ends within about 1.25s). --sm-p: offset of the packet pass (three sources →
one list → three results). */
.m-system-map__col--in .m-system-map__node:nth-child(2) { --sm-t: 0.04s; }
.m-system-map__col--in .m-system-map__node:nth-child(3) { --sm-t: 0.07s; }
.m-system-map__hub { --sm-t: 0.05s; }
.m-system-map__wire--in { --sm-t: 0.18s; }
.m-system-map__wire--in .m-system-map__s--2 { --sm-p: 0.15s; }
.m-system-map__wire--in .m-system-map__s--3 { --sm-p: 0.3s; }
.m-system-map__wire--in .m-system-map__bus { --sm-t: 0.29s; }
.m-system-map__wire--in .m-system-map__f { --sm-t: 0.36s; --sm-p: 0.95s; }
.m-system-map__wire--in .m-system-map__ah { --sm-t: 0.47s; }
.m-system-map__row:nth-child(2) { --sm-t: 0.5s; --sm-p: 1.55s; }
.m-system-map__row:nth-child(3) { --sm-t: 0.56s; --sm-p: 1.7s; }
.m-system-map__row:nth-child(4) { --sm-t: 0.63s; --sm-p: 1.85s; }
.m-system-map__wire--out { --sm-t: 0.9s; }
.m-system-map__wire--out .m-system-map__f { --sm-t: 0.72s; --sm-p: 2.3s; }
.m-system-map__wire--out .m-system-map__bus { --sm-t: 0.83s; }
.m-system-map__wire--out .m-system-map__s--1 { --sm-p: 2.95s; }
.m-system-map__wire--out .m-system-map__s--2 { --sm-p: 3.1s; }
.m-system-map__wire--out .m-system-map__s--3 { --sm-p: 3.25s; }
.m-system-map__wire--out .m-system-map__ah { --sm-t: 1s; }
.m-system-map__col--out .m-system-map__node { --sm-t: 0.97s; --sm-p: 3.6s; }
.m-system-map__col--out .m-system-map__node:nth-child(2) { --sm-t: 1.01s; --sm-p: 3.75s; }
.m-system-map__col--out .m-system-map__node:nth-child(3) { --sm-t: 1.06s; --sm-p: 3.9s; }
.m-system-map__ok { --sm-t: 1.12s; }
.m-system-map__node:nth-child(2) .m-system-map__ok { --sm-t: 1.17s; }
.m-system-map__node:nth-child(3) .m-system-map__ok { --sm-t: 1.2s; }
.m-system-map__base { --sm-t: 1.17s; }
/* ---------- Motion: one packet pass (about 6s after the reveal starts), then the map rests ----------
Paused off screen by removing .is-live; it never repeats, so no pause control is needed (under 5s of movement). */
@keyframes m-system-map-x { 0% { opacity: 0; transform: translateX(0); } 1.5% { opacity: 1; } 7% { opacity: 1; transform: translateX(100%); } 8.5%, 100% { opacity: 0; transform: translateX(100%); } }
@keyframes m-system-map-y { 0% { opacity: 0; transform: translateY(0); } 1.5% { opacity: 1; } 6% { opacity: 1; transform: translateY(100%); } 7.5%, 100% { opacity: 0; transform: translateY(100%); } }
@keyframes m-system-map-flash { 0%, 100% { opacity: 0; } 3% { opacity: 1; } 14% { opacity: 0; } }
@keyframes m-system-map-bump { 0%, 100% { transform: scale(1); } 3% { transform: scale(1.15); } 8% { transform: scale(1); } }
.m-system-map.is-in .m-system-map__run { animation: m-system-map-y var(--sm-loop) var(--x-ease-in-out, linear) calc(var(--sm-d0) + var(--sm-p, 0s)) 1 paused; }
.m-system-map.is-in .m-system-map__row::before { animation: m-system-map-flash var(--sm-loop) ease-out calc(var(--sm-d0) + var(--sm-p, 0s)) 1 paused; }
.m-system-map.is-in .m-system-map__ok svg { animation: m-system-map-bump var(--sm-loop) ease-out calc(var(--sm-d0) + var(--sm-p, 0s)) 1 paused; }
.m-system-map.is-live .m-system-map__run,
.m-system-map.is-live .m-system-map__row::before,
.m-system-map.is-live .m-system-map__ok svg { animation-play-state: running; }
@container msm (min-width: 598px) {
.m-system-map.is-in .m-system-map__run { animation-name: m-system-map-x; }
}
@media (prefers-reduced-motion: reduce) {
.m-system-map *,
.m-system-map *::before,
.m-system-map *::after { transition: none !important; animation: none !important; }
.m-system-map__run { display: none; }
.m-system-map.is-armed .m-system-map__in * { opacity: 1 !important; transform: none !important; }
}
@media print {
.m-system-map.is-armed .m-system-map__node,
.m-system-map.is-armed .m-system-map__hub,
.m-system-map.is-armed .m-system-map__row { opacity: 1 !important; transform: none !important; }
}
/* ---- rollout-timeline ---- */
/* rollout-timeline — 4-step rollout infographic. Vertical track below 720 px of container, horizontal from 720 px.
Default = static finished state. script.js adds .is-anim while on screen and walks .is-done through the steps. */
.m-rollout-timeline {
--rt-m: 48px; /* marker diameter */
--rt-gap: 26px; /* space between steps on the vertical track */
--rt-line: 4px; /* track thickness */
--rt-edge: var(--x-deep);
container-type: inline-size;
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: var(--x-font-body);
color: var(--x-text);
line-height: 1.4;
}
.m-rollout-timeline *,
.m-rollout-timeline *::before,
.m-rollout-timeline *::after { box-sizing: border-box; }
.m-rollout-timeline .x-icon {
display: block;
flex: none;
width: var(--rt-ic, 22px);
height: var(--rt-ic, 22px);
color: inherit;
vertical-align: middle;
}
.m-rollout-timeline__steps {
display: grid;
row-gap: var(--rt-gap);
margin: 0;
padding: 0;
list-style: none;
}
/* ---------- one step (vertical layout) ---------- */
.m-rollout-timeline__step {
position: relative;
display: grid;
grid-template-columns: var(--rt-m) minmax(0, 1fr);
grid-template-areas:
"mk when"
"mk title"
". out"
". flag";
grid-template-rows: auto 1fr auto auto;
column-gap: 16px;
min-width: 0;
margin: 0;
padding: 0;
}
/* track segment: from this marker's centre to the next marker's centre */
.m-rollout-timeline__line {
position: absolute;
z-index: 0;
left: calc(var(--rt-m) / 2 - var(--rt-line) / 2);
top: calc(var(--rt-m) / 2);
width: var(--rt-line);
height: calc(100% + var(--rt-gap));
border-radius: var(--rt-line);
background: var(--x-line);
overflow: hidden;
}
.m-rollout-timeline__fill {
position: absolute;
inset: 0;
background: var(--x-primary);
transform-origin: 50% 0;
}
/* the open-ended "after handover" tail: dashed mint with an arrow head */
.m-rollout-timeline__step--after .m-rollout-timeline__line {
height: max(calc(100% - var(--rt-m) / 2 + 6px), 36px);
overflow: visible;
background: repeating-linear-gradient(180deg, var(--x-mint) 0 7px, transparent 7px 13px);
}
.m-rollout-timeline__step--after .m-rollout-timeline__line::after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 11px;
height: 11px;
border-right: 3px solid var(--x-mint);
border-bottom: 3px solid var(--x-mint);
border-radius: 0 0 2px 0;
transform: translateX(-50%) rotate(45deg);
}
.m-rollout-timeline__step--after .m-rollout-timeline__fill { display: none; }
/* ---------- marker: pending disc + "done" coin on top ---------- */
.m-rollout-timeline__marker {
--rt-ic: calc(var(--rt-m) * 0.46);
grid-area: mk;
position: relative;
z-index: 1;
display: grid;
place-items: center;
align-self: start;
width: var(--rt-m);
height: var(--rt-m);
border-radius: 50%;
background: var(--x-paper);
box-shadow: inset 0 0 0 2px var(--x-line);
color: var(--x-muted);
}
.m-rollout-timeline__done {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--x-primary);
color: var(--x-paper);
box-shadow: 0 3px 0 var(--rt-edge), var(--x-shadow-sm);
transition: opacity 0.3s var(--x-ease), transform 0.45s var(--x-ease);
}
.m-rollout-timeline__step--after .m-rollout-timeline__done {
--rt-edge: #07563F; /* mint, one step darker: the coin's edge (fallback) */
background: var(--x-mint);
}
@supports (color: color-mix(in srgb, red, blue)) {
.m-rollout-timeline__step--after .m-rollout-timeline__done { --rt-edge: color-mix(in srgb, var(--x-mint) 68%, var(--x-ink)); }
}
/* ---------- text ---------- */
.m-rollout-timeline__when {
grid-area: when;
align-self: end;
margin-top: 2px;
font: 700 14px/1.25 var(--x-font-body);
color: var(--x-primary);
white-space: nowrap;
}
.m-rollout-timeline__step--after .m-rollout-timeline__when { color: color-mix(in srgb, var(--x-mint) 85%, #000); }
.m-rollout-timeline__title {
grid-area: title;
margin: 3px 0 0;
font: 700 18px/1.25 var(--x-font-body); /* serif is reserved for text >= 28 px */
color: var(--x-ink);
text-wrap: balance;
overflow-wrap: break-word;
}
/* deliverable chip */
.m-rollout-timeline__out {
--rt-ic: 18px;
grid-area: out;
justify-self: start;
display: inline-flex;
align-items: flex-start;
gap: 6px;
max-width: 100%;
margin: 10px 0 0;
padding: 6px 12px 6px 8px;
border: 1px solid var(--x-line);
border-radius: 10px;
background: var(--x-paper);
box-shadow: var(--x-shadow-sm);
font: 600 14px/1.3 var(--x-font-body);
color: var(--x-ink);
overflow-wrap: break-word;
}
.m-rollout-timeline__out .x-icon {
margin-top: 0;
color: var(--x-mint);
transition: opacity 0.3s var(--x-ease);
}
.m-rollout-timeline__out span { min-width: 0; text-wrap: pretty; }
/* ---------- guarantee on week 1: a maroon pennant whose tab points up at the "process map" chip it is about ---------- */
.m-rollout-timeline__flag {
--rt-tab: 9px; /* height of the tab */
grid-area: flag;
position: relative;
justify-self: start;
width: max-content;
max-width: 100%;
margin-top: 6px;
transition: opacity 0.35s var(--x-ease), transform 0.45s var(--x-ease);
}
.m-rollout-timeline__cloth {
--rt-ic: 20px;
display: flex;
align-items: flex-start;
gap: 9px;
margin: 0;
padding: calc(var(--rt-tab) + 9px) 30px 10px 12px;
background: var(--x-primary);
color: var(--x-paper);
font: 400 14px/1.35 var(--x-font-body);
/* body with a swallowtail on the right, plus a tab on top centred over the chip's check (x = 17 px) */
clip-path: polygon(0 var(--rt-tab), 8px var(--rt-tab), 17px 0, 26px var(--rt-tab), 100% var(--rt-tab), calc(100% - 15px) calc(50% + var(--rt-tab) / 2), 100% 100%, 0 100%);
overflow-wrap: break-word;
}
.m-rollout-timeline__cloth .x-icon { margin-top: 1px; color: var(--x-paper); }
.m-rollout-timeline__cloth > span { min-width: 0; text-wrap: pretty; }
.m-rollout-timeline__cloth b { display: block; font-weight: 700; text-wrap: balance; }
/* ---------- motion states (only while script.js has set .is-anim) ---------- */
.m-rollout-timeline.is-anim .m-rollout-timeline__fill { transition: transform 0.3s ease; }
.m-rollout-timeline.is-anim .is-done .m-rollout-timeline__fill { transition: transform 1.1s var(--x-ease-out, var(--x-ease)) 0.25s; }
.m-rollout-timeline.is-anim .m-rollout-timeline__step:not(.is-done) .m-rollout-timeline__fill { transform: scaleY(0); }
.m-rollout-timeline.is-anim .m-rollout-timeline__step:not(.is-done) .m-rollout-timeline__done { opacity: 0; transform: scale(0.8); }
.m-rollout-timeline.is-anim .m-rollout-timeline__step:not(.is-done) .m-rollout-timeline__out .x-icon { opacity: 0.25; }
.m-rollout-timeline.is-anim .m-rollout-timeline__step:not(.is-done) .m-rollout-timeline__flag { opacity: 0; transform: translateY(-6px); }
/* ---------- horizontal track (container >= 720 px) ---------- */
@container (min-width: 720px) {
.m-rollout-timeline__steps {
--rt-m: clamp(48px, 4.4cqi + 8px, 64px);
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: auto auto auto auto;
row-gap: 0;
column-gap: 0; /* segments run li-edge to li-edge, so spacing lives in padding-right */
}
.m-rollout-timeline__step {
grid-row: span 4;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-template-areas: none;
row-gap: 0;
padding-right: clamp(14px, 2cqi, 28px);
}
.m-rollout-timeline__marker { grid-area: 1 / 1; }
.m-rollout-timeline__when {
grid-area: 1 / 1;
z-index: 1;
align-self: end;
margin: 0 0 calc(var(--rt-m) / 2 + 7px) calc(var(--rt-m) + 10px);
font-size: 15px;
white-space: normal;
}
.m-rollout-timeline__title {
grid-area: 2 / 1;
margin-top: 16px;
font-size: clamp(17px, 0.5cqi + 12px, 20px);
}
.m-rollout-timeline__out { grid-area: 3 / 1; align-self: start; margin-top: 12px; }
.m-rollout-timeline__flag {
grid-area: 4 / 1;
max-width: min(400px, calc(200% - 12px)); /* may run under step 2: the tab keeps it on step 1 */
margin-top: 8px;
}
.m-rollout-timeline__line {
left: calc(var(--rt-m) / 2);
top: calc(var(--rt-m) / 2 - var(--rt-line) / 2);
width: 100%;
height: var(--rt-line);
}
.m-rollout-timeline__fill { transform-origin: 0 50%; }
.m-rollout-timeline__step--after .m-rollout-timeline__line {
width: calc(100% - var(--rt-m) / 2 - 2px);
height: var(--rt-line);
background: repeating-linear-gradient(90deg, var(--x-mint) 0 8px, transparent 8px 14px);
}
.m-rollout-timeline__step--after .m-rollout-timeline__line::after {
left: auto;
right: -1px;
bottom: auto;
top: 50%;
border-bottom: 0;
border-top: 3px solid var(--x-mint);
transform: translateY(-50%) rotate(45deg);
}
.m-rollout-timeline.is-anim .m-rollout-timeline__step:not(.is-done) .m-rollout-timeline__fill { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.m-rollout-timeline *,
.m-rollout-timeline *::before,
.m-rollout-timeline *::after { transition: none !important; }
}
/* ---- leak-funnel ---- */
/* leak-funnel — "where do customers slip away": one example month as a line-art funnel with 4 holes.
Upright funnel with callouts on the right below 900 px of container; centred funnel with callouts zigzagging
left / right from 900 px. The cone is ONE svg (straight walls, no seams) that spans the five equal rows
mouth + 4 leaks; the tube is the last row. Default = static state (drops frozen mid-air, no patches).
script.js adds .is-on while on screen: drops fall from the holes, then maroon patches cover them; 10 s loop. */
.m-leak-funnel {
--lf-f: clamp(90px, 28cqi, 240px); /* funnel width; resolved on the stages, so cqi = this root's width */
--lf-cg: clamp(30px, 6cqi, 60px); /* drip zone between funnel and callouts */
--lf-w: 2.5px; /* funnel wall */
--lf-rim: 18px;
container-type: inline-size;
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: var(--x-font-body);
color: var(--x-text);
line-height: 1.4;
}
.m-leak-funnel *,
.m-leak-funnel *::before,
.m-leak-funnel *::after { box-sizing: border-box; }
.m-leak-funnel .x-icon {
display: block;
flex: none;
width: 16px;
height: 16px;
color: inherit;
vertical-align: middle;
}
/* ---------- head ---------- */
.m-leak-funnel__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 10px 24px;
margin-bottom: clamp(20px, 3cqi, 32px);
}
.m-leak-funnel__title {
margin: 0;
font: 600 clamp(28px, 1.4cqi + 22px, 38px)/1.15 var(--x-font-display);
color: var(--x-ink);
text-wrap: balance;
overflow-wrap: break-word;
}
.m-leak-funnel__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin: 0;
}
.m-leak-funnel__tag {
padding: 4px 11px;
border: 1px solid var(--x-line);
border-radius: 999px;
background: var(--x-paper);
font: 700 13px/1.2 var(--x-font-body);
color: var(--x-ink);
white-space: nowrap;
}
.m-leak-funnel__legend {
display: inline-flex;
align-items: center;
gap: 7px;
font: 600 13px/1.2 var(--x-font-body);
color: var(--x-text);
}
.m-leak-funnel__legend-key {
flex: none;
width: 22px;
height: 12px;
background: var(--x-primary);
clip-path: polygon(5px 0, 100% 0, 100% 100%, 5px 100%, 0 50%);
}
/* ---------- stages: upright funnel ---------- */
.m-leak-funnel__stages {
display: grid;
grid-template-rows: repeat(5, 1fr) auto; /* mouth + 4 leaks are equal rows, so one straight cone spans them */
margin: 0;
padding: 36px 0 0; /* room for the channel icons above the mouth */
list-style: none;
}
.m-leak-funnel__stage {
--a: 100; /* cone width at the top of this row, % of the funnel box */
--b: 84; /* … and at the bottom: 100 → 20 in five equal steps. Used to put each hole on the wall. */
position: relative;
display: grid;
grid-template-columns: var(--lf-f) minmax(0, 1fr);
column-gap: var(--lf-cg);
min-height: 64px;
margin: 0;
padding: 0;
}
.m-leak-funnel__stage--l1 { --a: 84; --b: 68; --lf-d: 0s; }
.m-leak-funnel__stage--l2 { --a: 68; --b: 52; --lf-d: 0.15s; }
.m-leak-funnel__stage--l3 { --a: 52; --b: 36; --lf-d: 0.3s; }
.m-leak-funnel__stage--l4 { --a: 36; --b: 20; --lf-d: 0.45s; }
.m-leak-funnel__stage--out { --a: 20; --b: 20; }
.m-leak-funnel__art {
position: relative;
display: block;
align-self: stretch;
min-height: 100%;
}
/* the cone: one svg stretched over the five equal rows; strokes stay 2.5 px whatever the stretch */
.m-leak-funnel__cone {
position: absolute;
left: calc(var(--lf-w) / 2); /* stroke straddles the edge: keep its outer half inside the box */
top: calc(var(--lf-rim) / 2);
display: block;
width: calc(100% - var(--lf-w));
height: calc(500% - var(--lf-rim) / 2);
overflow: visible;
}
.m-leak-funnel__fill { fill: var(--x-paper); }
.m-leak-funnel__shade { fill: var(--x-paper-deep); } /* the shaded right third: flat-shaded 3D */
.m-leak-funnel__line {
fill: none;
stroke: var(--x-ink);
stroke-width: var(--lf-w);
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* mouth: an ellipse you look into */
.m-leak-funnel__rim {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--lf-rim);
border: var(--lf-w) solid var(--x-ink);
border-radius: 50%;
background: var(--x-paper-deep);
box-shadow: inset 0 -4px 0 var(--x-line);
}
/* enquiries from three channels dropping into the mouth */
.m-leak-funnel__chan {
--cx: 22%;
--cy: -30px;
--cr: -8deg;
position: absolute;
left: var(--cx);
top: var(--cy);
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-left: -15px;
border: 1px solid var(--x-line);
border-radius: 50%;
background: var(--x-paper);
box-shadow: var(--x-shadow-sm);
color: var(--x-ink);
transform: rotate(var(--cr));
}
.m-leak-funnel__chan .x-icon { width: 17px; height: 17px; }
.m-leak-funnel__chan--zalo { --cx: 50%; --cy: -38px; --cr: 6deg; --lf-cd: 1.1s; color: var(--x-zalo); }
.m-leak-funnel__chan + .m-leak-funnel__chan + .m-leak-funnel__chan { --cx: 78%; --cy: -27px; --cr: -4deg; --lf-cd: 2.2s; }
/* spout: a straight tube (walls centred on the cone's end points) and its opening */
.m-leak-funnel__tube {
position: absolute;
top: -1px;
bottom: 5px;
left: calc(40% - var(--lf-w) / 2);
right: calc(40% - var(--lf-w) / 2);
border: solid var(--x-ink);
border-width: 0 var(--lf-w);
background: linear-gradient(90deg, var(--x-paper) 70%, var(--x-paper-deep) 70%);
}
.m-leak-funnel__stage--out .m-leak-funnel__art::after {
content: "";
position: absolute;
left: calc(40% - var(--lf-w) / 2);
right: calc(40% - var(--lf-w) / 2);
bottom: 0;
height: 10px;
border: var(--lf-w) solid var(--x-ink);
border-radius: 50%;
background: var(--x-paper-deep);
}
/* hole on the right wall + three drops arcing out of it */
.m-leak-funnel__hole,
.m-leak-funnel__drop,
.m-leak-funnel__patch {
--hx: calc(50% + (var(--a) + var(--b)) * 0.25%);
--hy: 50%;
position: absolute;
left: calc(var(--hx) + var(--dx, 0px));
top: calc(var(--hy) + var(--dy, 0px));
border-radius: 50%;
}
.m-leak-funnel__hole {
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
background: var(--x-coral);
box-shadow: 0 0 0 2px var(--x-ink);
}
.m-leak-funnel__drop {
--ds: 10px;
width: var(--ds);
height: var(--ds);
margin: calc(var(--ds) / -2) 0 0 calc(var(--ds) / -2);
border-radius: 0;
}
/* a falling drop: the same teardrop as the one beside each number */
.m-leak-funnel__drop::before {
content: "";
position: absolute;
inset: 0;
border-radius: 0 50% 50% 50%;
background: var(--x-coral);
transform: rotate(45deg);
}
.m-leak-funnel__hole + .m-leak-funnel__drop { --dx: 16px; --dy: 4px; --ds: 10px; --fx: 6px; --fy: 10px; --lf-dd: 0s; }
.m-leak-funnel__hole + .m-leak-funnel__drop + .m-leak-funnel__drop { --dx: 26px; --dy: 18px; --ds: 8px; --fx: 4px; --fy: 12px; --lf-dd: 0.22s; }
.m-leak-funnel__hole + .m-leak-funnel__drop + .m-leak-funnel__drop + .m-leak-funnel__drop { --dx: 31px; --dy: 33px; --ds: 6px; --fx: 2px; --fy: 14px; --lf-dd: 0.44s; }
.m-leak-funnel__patch {
--lf-rot: -20deg;
width: 22px;
height: 14px;
margin: -7px 0 0 -11px;
border-radius: 3px;
background: var(--x-primary);
box-shadow: 0 0 0 2px var(--x-paper);
opacity: 0;
transform: rotate(var(--lf-rot));
}
/* ---------- callouts ---------- */
.m-leak-funnel__call {
align-self: center;
min-width: 0;
padding: 8px 0;
}
.m-leak-funnel__num {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font: 600 28px/1.15 var(--x-font-display);
color: var(--x-ink);
font-variant-numeric: lining-nums tabular-nums;
white-space: nowrap;
}
.m-leak-funnel__stage--leak .m-leak-funnel__num::before {
content: "";
flex: none;
width: 11px;
height: 11px;
margin-top: 3px;
border-radius: 0 50% 50% 50%;
background: var(--x-coral);
transform: rotate(45deg);
}
.m-leak-funnel__stage--in .m-leak-funnel__num,
.m-leak-funnel__stage--out .m-leak-funnel__num { font-size: clamp(36px, 2cqi + 28px, 50px); line-height: 1.1; }
.m-leak-funnel__label {
margin: 4px 0 0;
font: 400 15px/1.3 var(--x-font-body);
color: var(--x-text);
overflow-wrap: break-word;
}
.m-leak-funnel__stage--in .m-leak-funnel__label,
.m-leak-funnel__stage--out .m-leak-funnel__label { font-weight: 600; color: var(--x-ink); }
/* the CROSS fix: a small maroon price-tag */
.m-leak-funnel__fix {
position: relative;
display: inline-flex;
align-items: flex-start;
gap: 6px;
max-width: 100%;
margin: 9px 0 0;
padding: 5px 11px 5px 18px;
background: var(--x-primary);
color: var(--x-paper);
font: 600 13px/1.3 var(--x-font-body);
text-align: left;
clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
overflow-wrap: break-word;
}
.m-leak-funnel__fix::before {
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 50%;
background: var(--x-paper);
}
.m-leak-funnel__fix .x-icon { margin-top: 0.5px; color: var(--x-paper); }
.m-leak-funnel__fix span { min-width: 0; }
.m-leak-funnel__note {
margin: 16px 0 0;
font: 400 13px/1.4 var(--x-font-body);
color: var(--x-muted);
}
/* medium widths, upright funnel: number in its own column so each row is shorter and the funnel less tall */
@container (min-width: 520px) {
.m-leak-funnel__stages { --lf-f: clamp(100px, 32cqi, 240px); }
.m-leak-funnel__call { padding: 12px 0; }
.m-leak-funnel__call {
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
column-gap: 6px;
align-items: baseline;
}
.m-leak-funnel__num { grid-row: 1 / span 2; }
.m-leak-funnel__label { margin: 0; }
.m-leak-funnel__fix { grid-column: 2; justify-self: start; }
.m-leak-funnel__stage--in .m-leak-funnel__call,
.m-leak-funnel__stage--out .m-leak-funnel__call { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
}
/* ---------- wide (container >= 900 px): funnel centred, callouts zigzag left / right ---------- */
@container (min-width: 900px) {
/* set on a descendant: a container query cannot style its own container */
.m-leak-funnel__stages { --lf-f: clamp(220px, 24cqi, 320px); --lf-cg: clamp(48px, 5cqi, 72px); }
.m-leak-funnel__stage { grid-template-columns: minmax(0, 1fr) var(--lf-f) minmax(0, 1fr); min-height: 72px; }
.m-leak-funnel__art { grid-column: 2; grid-row: 1; }
.m-leak-funnel__call { grid-column: 3; grid-row: 1; }
/* left-hand callouts (mouth, leaks 2 and 4): mirrored, number next to the funnel */
.m-leak-funnel__stage--in .m-leak-funnel__call,
.m-leak-funnel__stage--l2 .m-leak-funnel__call,
.m-leak-funnel__stage--l4 .m-leak-funnel__call {
grid-column: 1;
grid-template-columns: minmax(0, 1fr) 74px;
text-align: right;
}
.m-leak-funnel__stage--in .m-leak-funnel__call,
.m-leak-funnel__stage--out .m-leak-funnel__call { display: block; }
.m-leak-funnel__stage--in .m-leak-funnel__call,
.m-leak-funnel__stage--out .m-leak-funnel__call { padding: 0; } /* the big numbers set the row height: keep rows tight */
.m-leak-funnel__stage--out .m-leak-funnel__label { margin-top: 6px; }
.m-leak-funnel__stage--in .m-leak-funnel__num { justify-content: flex-end; }
.m-leak-funnel__stage--in .m-leak-funnel__label { margin-top: 6px; }
.m-leak-funnel__stage--l2 .m-leak-funnel__num,
.m-leak-funnel__stage--l4 .m-leak-funnel__num { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
.m-leak-funnel__stage--l2 .m-leak-funnel__label,
.m-leak-funnel__stage--l4 .m-leak-funnel__label { grid-column: 1; grid-row: 1; }
.m-leak-funnel__stage--l2 .m-leak-funnel__fix,
.m-leak-funnel__stage--l4 .m-leak-funnel__fix {
grid-column: 1;
grid-row: 2;
justify-self: end;
padding: 5px 18px 5px 11px;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); /* point toward the funnel */
}
.m-leak-funnel__stage--l2 .m-leak-funnel__fix::before,
.m-leak-funnel__stage--l4 .m-leak-funnel__fix::before { left: auto; right: 7px; }
/* holes on the left wall for leaks 2 and 4; drops arc out to the left */
.m-leak-funnel__stage--l2,
.m-leak-funnel__stage--l4 { --lf-side: -1; }
.m-leak-funnel__hole,
.m-leak-funnel__drop,
.m-leak-funnel__patch { --hx: calc(50% + var(--lf-side, 1) * (var(--a) + var(--b)) * 0.25%); }
.m-leak-funnel__stage--l2 .m-leak-funnel__hole + .m-leak-funnel__drop,
.m-leak-funnel__stage--l4 .m-leak-funnel__hole + .m-leak-funnel__drop { --dx: -15px; --fx: -6px; }
.m-leak-funnel__stage--l2 .m-leak-funnel__hole + .m-leak-funnel__drop + .m-leak-funnel__drop,
.m-leak-funnel__stage--l4 .m-leak-funnel__hole + .m-leak-funnel__drop + .m-leak-funnel__drop { --dx: -25px; --fx: -4px; }
.m-leak-funnel__stage--l2 .m-leak-funnel__hole + .m-leak-funnel__drop + .m-leak-funnel__drop + .m-leak-funnel__drop,
.m-leak-funnel__stage--l4 .m-leak-funnel__hole + .m-leak-funnel__drop + .m-leak-funnel__drop + .m-leak-funnel__drop { --dx: -30px; --fx: -2px; }
.m-leak-funnel__stage--l2 .m-leak-funnel__patch,
.m-leak-funnel__stage--l4 .m-leak-funnel__patch { --lf-rot: 20deg; }
.m-leak-funnel__note { text-align: center; }
}
/* ---------- motion (only while .is-on) ---------- */
@keyframes m-leak-funnel-drip {
0% { opacity: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(0.4); }
6% { opacity: 1; transform: none; }
14% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.8); }
15% { opacity: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(0.4); }
21% { opacity: 1; transform: none; }
29% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.8); }
30% { opacity: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(0.4); }
36% { opacity: 1; transform: none; }
44%, 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.8); }
}
@keyframes m-leak-funnel-patch {
0%, 54% { opacity: 0; transform: rotate(var(--lf-rot)) scale(0.3); }
58% { opacity: 1; transform: rotate(var(--lf-rot)) scale(1.18); }
61%, 86% { opacity: 1; transform: rotate(var(--lf-rot)) scale(1); }
90%, 100% { opacity: 0; transform: rotate(var(--lf-rot)) scale(1); }
}
@keyframes m-leak-funnel-hole {
0%, 56% { opacity: 1; }
60%, 86% { opacity: 0; }
90%, 100% { opacity: 1; }
}
@keyframes m-leak-funnel-tag {
0%, 55% { transform: none; }
58% { transform: scale(1.07); }
62%, 100% { transform: none; }
}
@keyframes m-leak-funnel-pour {
0% { opacity: 0; transform: translateY(-14px) rotate(var(--cr)); }
12%, 62% { opacity: 1; transform: rotate(var(--cr)); }
90%, 100% { opacity: 0; transform: translateY(26px) rotate(var(--cr)) scale(0.7); }
}
.m-leak-funnel.is-on .m-leak-funnel__chan { animation: m-leak-funnel-pour 3.3s var(--x-ease) var(--lf-cd, 0s) infinite both; }
.m-leak-funnel.is-on .m-leak-funnel__drop { animation: m-leak-funnel-drip 10s linear calc(var(--lf-d, 0s) + var(--lf-dd, 0s)) infinite both; }
.m-leak-funnel.is-on .m-leak-funnel__patch { animation: m-leak-funnel-patch 10s var(--x-ease) calc(var(--lf-d, 0s) * 2) infinite both; }
.m-leak-funnel.is-on .m-leak-funnel__hole { animation: m-leak-funnel-hole 10s linear calc(var(--lf-d, 0s) * 2) infinite both; }
.m-leak-funnel.is-on .m-leak-funnel__fix { animation: m-leak-funnel-tag 10s var(--x-ease) calc(var(--lf-d, 0s) * 2) infinite both; }
@media (prefers-reduced-motion: reduce) {
.m-leak-funnel.is-on .m-leak-funnel__chan,
.m-leak-funnel.is-on .m-leak-funnel__drop,
.m-leak-funnel.is-on .m-leak-funnel__patch,
.m-leak-funnel.is-on .m-leak-funnel__hole,
.m-leak-funnel.is-on .m-leak-funnel__fix { animation: none; }
}
/* ---- illus-3d ---- */
/* illus-3d: one brand 3D illustration. The WebP is square, transparent, and carries its own soft floor shadow,
so do not add box-shadow, drop-shadow or a background behind it. */
.m-illus-3d {
flex: none;
width: 240px;
max-width: 100%;
aspect-ratio: 1;
margin: 0 auto;
padding: 0;
}
.m-illus-3d.is-sm {
width: 120px;
}
.m-illus-3d.is-lg {
width: 400px;
}
/* Scale with the nearest size container (or the viewport when there is none). */
@supports (width: 1cqi) {
.m-illus-3d.is-sm {
width: clamp(88px, 28cqi, 120px);
}
.m-illus-3d.is-md {
width: clamp(150px, 42cqi, 240px);
}
.m-illus-3d.is-lg {
width: clamp(200px, 60cqi, 400px);
}
}
.m-illus-3d img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
-webkit-user-drag: none;
user-select: none;
}
/* ---- prompt-library ---- */
/* m-prompt-library — a team's prompt library as a simple app window (static, no motion).
One column at every width; the window is capped at 560px by its wrapper (sections.css .x-mock--doc). UI text uses
var(--x-font-ui) at 12–14px, as every software mockup. */
.m-prompt-library {
width: 100%;
font-family: var(--x-font-ui);
font-size: 13px;
line-height: 1.45;
color: var(--x-ink);
background: #fff;
border: 1px solid var(--x-line);
border-radius: 12px;
box-shadow: var(--x-shadow);
overflow: hidden;
}
.m-prompt-library *,
.m-prompt-library *::before,
.m-prompt-library *::after {
box-sizing: border-box;
}
.m-prompt-library :where(p, ol) {
margin: 0;
}
.m-prompt-library__bar {
display: flex;
align-items: center;
gap: 12px;
min-height: 34px;
padding: 0 14px;
background: var(--x-paper-deep);
border-bottom: 1px solid var(--x-line);
}
.m-prompt-library__dots {
display: flex;
flex: none;
gap: 6px;
}
.m-prompt-library__dots i {
width: 9px;
height: 9px;
border-radius: 50%;
background: #E9A59C;
}
.m-prompt-library__dots i:nth-child(2) {
background: #EFCB8A;
}
.m-prompt-library__dots i:nth-child(3) {
background: #A9D6A4;
}
.m-prompt-library__app {
min-width: 0;
font-size: 12px;
font-weight: 600;
color: var(--x-muted);
overflow-wrap: anywhere;
}
.m-prompt-library__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 2px 12px;
padding: 14px 16px 10px;
}
.m-prompt-library__team {
font-size: 15px;
font-weight: 700;
}
.m-prompt-library__meta {
font-size: 12px;
color: var(--x-muted);
}
.m-prompt-library__list {
display: grid;
gap: 10px;
padding: 0 16px 14px;
list-style: none;
}
.m-prompt-library__item {
display: grid;
gap: 6px;
padding: 12px;
border: 1px solid var(--x-line);
border-radius: 10px;
}
.m-prompt-library__name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
font-size: 14px;
}
.m-prompt-library__tag {
padding: 2px 8px;
font-size: 12px;
font-weight: 600;
color: var(--x-primary);
background: #F7E9E7;
border-radius: 999px;
}
.m-prompt-library__prompt {
padding: 9px 11px;
color: var(--x-text);
background: var(--x-paper);
border-left: 3px solid var(--x-primary);
border-radius: 0 8px 8px 0;
overflow-wrap: break-word;
}
.m-prompt-library__prompt mark {
padding: 0 2px;
font-weight: 600;
color: var(--x-primary);
background: #F7E9E7;
border-radius: 3px;
}
.m-prompt-library__use {
font-size: 12px;
color: var(--x-muted);
}
.m-prompt-library__rule {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 11px 16px 13px;
font-size: 12.5px;
font-weight: 600;
color: var(--x-ink);
background: var(--x-paper-deep);
border-top: 1px solid var(--x-line);
}
.m-prompt-library__rule .x-icon {
flex: none;
width: 16px;
height: 16px;
margin-top: 1px;
color: var(--x-mint);
}
/* Narrow containers: tighter padding so the prompts keep a readable measure. */
@container (max-width: 360px) {
.m-prompt-library__list {
padding-inline: 12px;
}
.m-prompt-library__head,
.m-prompt-library__rule {
padding-inline: 12px;
}
}
/* ---- icons ---- */
/* CROSS duotone icon set — sizing helper.
Pair with sprite.svg:
Icons inherit `color`; one colour renders both layers (stroke + 18 % fill). */
.x-icon {
display: inline-block;
width: var(--x-icon-size, 24px);
height: var(--x-icon-size, 24px);
flex: 0 0 auto;
vertical-align: middle;
color: inherit;
pointer-events: none;
}
/* Sizes */
.x-icon--sm { --x-icon-size: 20px; }
.x-icon--md { --x-icon-size: 32px; }
.x-icon--lg { --x-icon-size: 48px; }
.x-icon--xl { --x-icon-size: 64px; }
/* Inline with running text or a button label: scales with the font, sits on the baseline. */
.x-icon--text {
--x-icon-size: 1.25em;
vertical-align: -0.3em;
}
/* 48px tinted tile for feature lists. Maroon by default; put a tint modifier ON THE TILE to recolour
both the icon and the 9 % background: */
.x-icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: var(--x-radius-sm, 12px);
color: var(--x-primary);
background: rgba(128, 0, 0, 0.08);
background: color-mix(in srgb, currentColor 9%, transparent);
}
/* Tints (default is the surrounding text colour). Declared after .x-icon-tile so they also recolour a tile. */
.x-icon--primary { color: var(--x-primary); }
.x-icon--ink { color: var(--x-ink); }
.x-icon--muted { color: var(--x-muted); }
.x-icon--cobalt { color: var(--x-cobalt); }
.x-icon--zalo { color: var(--x-zalo); }
.x-icon--mint { color: var(--x-mint); }
.x-icon--coral { color: var(--x-coral); }
/* Sprite layers. The sprite also carries these as presentation attributes, so the icons render
without this file; the classes exist so a theme can retune the duotone balance in one place. */
.ic-a {
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.ic-b {
fill: currentColor;
stroke: none;
opacity: 0.18;
}