/* Illustrated screens of the homepage (scripts/pages/home-mocks.mjs). Prefix mk-.
   Pure CSS skeletons: no brand, no figures. They are drawings of a product, so they keep their own colours in every site theme
   (listed in THEME_FREE of scripts/build-themes.mjs). Everything is sized in em: the stage that holds them sets the font-size. */
.mk{--k:#88e4ff;--ln:rgba(255,255,255,.15);position:absolute;box-sizing:border-box;margin:0;overflow:hidden;color:#e7f1fb;font:500 1em/1.3 'Be Vietnam Pro',Arial,sans-serif;text-align:left;
  background:#0b1626;border:1px solid rgba(255,255,255,.13);border-radius:1.1em;
  box-shadow:0 2.4em 5em -1.2em rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.09)}
.mk *{box-sizing:border-box}
.mk .ico{display:block}
.mk-web,.mk-webm{--k:#c0a2ff}
.mk-ad,.mk-adtext,.mk-report{--k:#88e4ff}
.mk-serp,.mk-trend,.mk-checks{--k:#9db8ff}

/* skeleton parts */
.mk-ln{display:block;height:.55em;width:var(--w);border-radius:.3em;background:var(--ln)}
.mk-h{display:block;width:96%;height:1.35em;border-radius:.4em;background:rgba(255,255,255,.9)}
.mk-h.is-s{width:68%}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;width:max-content;margin-top:.5em;padding:.6em 1.2em;border-radius:.7em;background:var(--k);color:#06121f;font-size:.86em;font-weight:700;white-space:nowrap}
.mk-btn.is-ok{margin:0}
.mk-btn.is-block{width:100%;margin-top:.2em;padding:.75em}
.mk-field{display:flex;align-items:center;height:2.5em;padding:0 .9em;border-radius:.7em;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#8ea6bd;font-size:.82em;white-space:nowrap}
.mk-art{position:relative;aspect-ratio:1.18;overflow:hidden;border-radius:1em;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--k) 55%,transparent),transparent 62%),linear-gradient(145deg,#1b2f4d,#0e1b30)}
.mk-art i{position:absolute;border-radius:.8em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.mk-art i:nth-child(1){left:12%;top:16%;width:46%;height:34%}
.mk-art i:nth-child(2){right:10%;top:34%;width:36%;height:30%;background:color-mix(in srgb,var(--k) 38%,transparent)}
.mk-art i:nth-child(3){left:22%;bottom:12%;width:40%;height:20%}
.mk-art.is-m{aspect-ratio:1.55}
.mk-logo{display:block;width:3.6em;height:1.3em;border-radius:.4em;background:linear-gradient(90deg,var(--k),color-mix(in srgb,var(--k) 40%,#fff))}
.mk-nav{display:flex;align-items:center;gap:1.1em}
.mk-nl{display:block;width:2.6em;height:.5em;border-radius:.3em;background:var(--ln)}
.mk-logo+.mk-nl{margin-left:auto}
.mk-pill{padding:.4em .9em;border-radius:1em;border:1px solid color-mix(in srgb,var(--k) 55%,transparent);color:var(--k);font-size:.78em;font-weight:600;white-space:nowrap}
.mk-burger{margin-left:auto;display:grid;gap:.3em}
.mk-burger i{display:block;width:1.4em;height:.16em;border-radius:1px;background:#9fb4c8}

/* browser window (Website) */
.mk-win{width:44em}
.mk-bar{display:flex;align-items:center;gap:1em;height:2.7em;padding:0 1em;background:#0e1c30;border-bottom:1px solid rgba(255,255,255,.08)}
.mk-dots{display:flex;gap:.45em}
.mk-dots i{display:block;width:.72em;height:.72em;border-radius:50%;background:#ff7a7a}
.mk-dots i:nth-child(2){background:#ffcd5c}
.mk-dots i:nth-child(3){background:#58d68d}
.mk-url{flex:1;display:flex;align-items:center;gap:.55em;height:1.9em;padding:0 .9em;border-radius:1em;background:rgba(255,255,255,.07);font-size:.82em;color:#a9bed3}
.mk-url .ico{width:1.2em;height:1.2em;color:#58d68d}
.mk-url b{font-weight:500;white-space:nowrap}
.mk-page{display:grid;gap:1.2em;padding:1.3em 1.6em 1.5em;background:linear-gradient(#0f1d33,#0b1626)}
.mk-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:1.6em;align-items:center}
.mk-copy{display:grid;gap:.55em;align-content:center}
.mk-eb{display:block;width:34%;height:.5em;border-radius:.3em;background:var(--k)}
.mk-formrow{display:grid;grid-template-columns:1fr 1fr auto;gap:.8em;align-items:center;padding:.9em;border-radius:1em;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}

/* phone */
.mk-phone{width:14em;height:29em;padding:.55em;border-radius:2.6em;background:#070e19;border:1px solid rgba(255,255,255,.18)}
.mk-notch{position:absolute;left:50%;top:1em;z-index:2;width:4.2em;height:1.1em;margin-left:-2.1em;border-radius:1em;background:#02060c}
.mk-screen{display:flex;flex-direction:column;gap:.8em;height:100%;padding:2.8em 1.1em 1.1em;border-radius:2.1em;overflow:hidden;background:linear-gradient(#10203a,#0b1626)}

/* ad on a phone (Quảng cáo) */
.mk-adh{display:flex;align-items:center;gap:.7em}
.mk-av{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:linear-gradient(135deg,var(--k),#7a8cff)}
.mk-who{display:grid;gap:.35em;flex:1}
.mk-adh em{font-style:normal;font-size:.7em;color:#9fb4c8;border:1px solid rgba(255,255,255,.22);border-radius:.5em;padding:.15em .5em;white-space:nowrap}
.mk-creative{position:relative;aspect-ratio:1;overflow:hidden;border-radius:1em;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--k) 70%,transparent),transparent 55%),linear-gradient(160deg,#2a4a78,#101d33)}
.mk-creative i{position:absolute;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.mk-creative i:nth-child(1){right:-8%;top:8%;width:48%;aspect-ratio:1}
.mk-creative i:nth-child(2){left:10%;top:32%;width:24%;aspect-ratio:1;background:color-mix(in srgb,var(--k) 45%,transparent)}
.mk-creative i:nth-child(3){right:20%;top:52%;width:16%;aspect-ratio:1}
.mk-creative b{position:absolute;left:.9em;right:.9em;bottom:.9em;font-size:1.05em;font-weight:800;color:#fff;text-shadow:0 .1em .5em rgba(0,0,0,.5)}
.mk-adf{display:flex;align-items:center;gap:.7em;padding:.7em;border-radius:.8em;background:rgba(255,255,255,.06)}
.mk-adf .mk-btn{margin:0;padding:.5em .9em}
.mk-react{display:flex;gap:1.2em;color:#9fb4c8}
.mk-react .ico{width:1.5em;height:1.5em}

/* cards */
.mk-card{width:25em;padding:1.2em}
.mk-rh{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.9em;font-size:.95em}
.mk-rh b{font-weight:700}
.mk-chipd{padding:.2em .7em;border-radius:1em;border:1px solid rgba(255,255,255,.2);font-size:.75em;color:#a9bed3;white-space:nowrap}
.mk-sbar{display:flex;align-items:center;gap:.7em;height:2.5em;padding:0 1em;border-radius:1.3em;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:.82em;color:#cfe0f0;white-space:nowrap;overflow:hidden}
.mk-sbar .ico{flex:none;width:1.2em;height:1.2em;color:#8ea6bd}
.mk-res{display:grid;gap:.45em;padding:.9em 0;border-top:1px solid rgba(255,255,255,.08)}
.mk-res:first-of-type{border-top:0}
.mk-t{display:block;width:70%;height:.95em;border-radius:.3em;background:#8fb4ff}
.mk-t.is-dim{width:60%;background:#5f7390}
.mk-tagad{font-size:.7em;font-weight:700;color:#e7f1fb}
.mk-res.is-ad .mk-t{background:var(--k)}
.mk-url2{display:block;width:42%;height:.5em;border-radius:.3em;background:#2e425c}
.mk-you{width:max-content;padding:.15em .7em;border-radius:1em;background:var(--k);color:#06121f;font-size:.7em;font-style:normal;font-weight:700;white-space:nowrap}
.mk-serp .mk-sbar{margin-bottom:.2em}
.mk-serp .mk-res{padding:.8em 0}
.mk-serp .mk-res.is-on{padding:.9em;border:1px solid color-mix(in srgb,var(--k) 60%,transparent);border-radius:.9em;background:color-mix(in srgb,var(--k) 12%,transparent);box-shadow:0 0 2.4em color-mix(in srgb,var(--k) 25%,transparent)}

/* report, trend, checklist */
.mk-bars{display:flex;align-items:flex-end;gap:.7em;height:7em}
.mk-bars s{flex:1;height:var(--h);border-radius:.4em .4em .1em .1em;background:linear-gradient(var(--k),color-mix(in srgb,var(--k) 30%,transparent));text-decoration:none}
.mk-bars s:nth-child(even){opacity:.55}
.mk-leg{display:flex;gap:1.4em;margin-top:.9em}
.mk-leg span{display:flex;align-items:center;flex:1;gap:.5em}
.mk-leg i{flex:none;width:.8em;height:.8em;border-radius:50%;background:var(--k)}
.mk-leg i.b{background:#9d8cff}
.mk-leg .mk-ln{flex:1}
.mk-trend{width:27em}
.mk-trend svg{display:block;width:100%;height:7em;color:var(--k);overflow:visible}
.mk-grid{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1}
.mk-area{fill:url(#mk-tg)}
.mk-curve{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mk-pt{fill:currentColor}
.mk-checks{width:24em}
.mk-checks ul{display:grid;gap:.8em;margin:0;padding:0;list-style:none}
.mk-checks li{display:grid;grid-template-columns:auto 5.2em 1fr;align-items:center;gap:.8em}
.mk-checks li b{font-size:.9em;font-weight:600}
.mk-ck{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:transparent}
.mk-ck .ico{width:1em;height:1em;stroke-width:2.4}
.is-on>.mk-ck{background:var(--k);border-color:var(--k);color:#06121f}

/* floating label that sits on a screen */
.mk-tag{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em .5em .8em;border-radius:2em;background:rgba(7,14,26,.94);border:1px solid color-mix(in srgb,var(--k,#88e4ff) 55%,transparent);
  color:#eaf6ff;font:600 max(.95em,11.5px)/1.2 'Be Vietnam Pro',Arial,sans-serif;white-space:nowrap;box-shadow:0 .8em 2em -.4em rgba(0,0,0,.6),0 0 1.6em color-mix(in srgb,var(--k,#88e4ff) 22%,transparent)}
.mk-tag .ico{width:1.1em;height:1.1em;color:var(--k,#88e4ff);stroke-width:2.4}