/* Realistic product screens for the SEO, Social Media, AI & Tự động hóa, Dữ liệu & Phân tích and Tư vấn chiến lược
   pages (scripts/service-lp/real.mjs). Each screen is a small web app: left rail, top bar, cards on a pale canvas, tables
   with filters, charts with axes and a tooltip. Loaded after service-lp.css; every rule is scoped to .sv-lp. Mock rules:
   text 11px or larger, pictures cover their frame, no tilt, no platform logos or brand colours. */
.sv-lp{
.rl{font-family:Inter,system-ui,"Segoe UI",Roboto,sans-serif;font-size:12px;line-height:1.4;color:#192045;text-align:left;--sv2:#18a999}
.rl.a-seo{--sv:#0d7d61;--sv2:#2a9d8f}.rl.a-social{--sv:#c42f69;--sv2:#e8793b}.rl.a-ai{--sv:#5b45d6;--sv2:#2a8fe0}.rl.a-data{--sv:#2a6fdb;--sv2:#18a999}.rl.a-web{--sv:#2563c9;--sv2:#0e9aa7}.rl.a-strategy{--sv:#a8560a;--sv2:#2a6fdb}
.rl :is(i,em,address){font-style:normal}
.rl b,.rl strong{font-weight:650}
.wsm.rl .mk-page{gap:0;padding:0}

/* app shell */
.rl-app{display:grid;grid-template-columns:46px minmax(0,1fr);min-height:300px;background:#f3f5f9;container:rl/inline-size}
.rl-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;border-right:1px solid #e3e8ef;background:#fff}
.rl-mark{display:grid;place-items:center;width:26px;height:26px;margin-bottom:8px;border-radius:8px;background:linear-gradient(135deg,var(--sv),var(--sv2));color:#fff;font-size:13px;font-weight:700}
.rl-rail>i:not(.rl-mark){display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#5f6c84;& .ico{width:17px;height:17px}&.on{background:color-mix(in srgb,var(--sv) 12%,#fff);color:color-mix(in srgb,var(--sv) 84%,#000)}}
.rl-main{display:flex;flex-direction:column;min-width:0}
.rl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 14px;border-bottom:1px solid #e3e8ef;background:#fff}
.rl-ttl{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;& .ico{flex:none;width:16px;height:16px;color:color-mix(in srgb,var(--sv) 84%,#000)}}
.rl-tools{display:flex;align-items:center;gap:8px;flex:none}
.rl-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid #dde3ec;border-radius:8px;background:#fff;font-size:11.5px;color:#384370;white-space:nowrap;& .ico{width:13px;height:13px;color:#7b8798}}
.rl-av{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#5b8def;color:#fff;font-size:11px;font-weight:600;
&.c1{background:#e8793b}&.c2{background:#1f9d63}&.c3{background:#a05cd6}&.c4{background:#d9577b}&.c5{background:#2a9d8f}}
.rl-body{display:grid;flex:1;align-content:start;gap:10px;padding:12px 14px;min-width:0}
.rl-note{padding:0 14px 10px}
.rl-sp{display:grid;grid-template-columns:var(--r);gap:10px;min-width:0}
.rl-card{min-width:0;padding:10px 12px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;box-shadow:0 1px 2px #1920450a}
.rl-ch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;& b{font-size:12.5px}& small{color:#5d6a80}}

/* tables and lists */
.rl-tbl{padding:0;overflow:hidden}
.rl-tbar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #e3e8ef;& em{margin-left:auto;font-size:11px;color:#5d6a80;white-space:nowrap}}
.rl-search{display:flex;align-items:center;gap:6px;flex:1;min-width:0;max-width:240px;padding:5px 9px;border-radius:8px;background:#f3f5f9;font-size:11.5px;color:#5f6c84;white-space:nowrap;overflow:hidden;& .ico{flex:none;width:13px;height:13px}}
.rl-tb{display:grid}
.rl-tr{display:grid;grid-template-columns:var(--c);gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid #eef1f5;
&:last-child{border-bottom:0}& >i{min-width:0;font-size:12px;line-height:1.35;overflow-wrap:anywhere}& >i.is-n{text-align:right;font-variant-numeric:tabular-nums}& >i.is-first{font-weight:600}
&.is-head{padding:7px 12px;background:#f8f9fc}&.is-head>i{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:#5d6a80}&.is-head>i.is-n{justify-content:flex-end}&.is-head .ico{width:11px;height:11px}
&.is-hi{background:color-mix(in srgb,var(--sv) 7%,#fff);box-shadow:inset 3px 0 0 var(--sv)}& code{font:11.5px ui-monospace,Consolas,monospace;color:#3b4672;overflow-wrap:anywhere}& .wsm-chip{white-space:normal}}
.rl-tb.is-mx .rl-tr>i:not(:first-child){display:grid;place-items:center;text-align:center}
.rl-cb{display:block;width:14px;height:14px;border-radius:4px;border:1.5px solid #c4ccd9;background:#fff;&.on{border-color:var(--sv);background:var(--sv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}}
.rl-tr>i.rl-mo{display:grid;place-items:center;color:#5f6c84;& .ico{width:14px;height:14px}}
.rx-sp{display:block;width:72px;max-width:100%;& svg{display:block;width:100%;height:22px}}
.rx-bar{display:block;height:7px;border-radius:4px;background:#edf0f5;overflow:hidden;& u{display:block;height:100%;border-radius:4px;background:var(--sv);text-decoration:none}}
.rx-pos{display:inline-flex;align-items:baseline;gap:6px;& b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}& em{display:inline-flex;align-items:center;gap:1px;font-size:11px;font-style:normal;font-weight:600;&.is-ok{color:#16794f}&.is-bad{color:#c6392e}& .ico{width:10px;height:10px}}}
.rx-who{display:inline-flex;align-items:center;gap:7px;min-width:0;& .rl-av{flex:none;width:22px;height:22px;font-size:11px}}
.rx-dt{display:inline-flex;align-items:center;gap:6px;& u{flex:none;width:8px;height:8px;border-radius:50%;background:#9aa5b8}&.is-ok u{background:#35b27a}&.is-warn u{background:#f0b429}&.is-bad u{background:#e5594b}&.is-on u{background:var(--sv)}}
.rl-yes{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e3f5ec;color:#16794f;& .ico{width:12px;height:12px}}
.rl-half{width:20px;height:20px;border-radius:50%;background:linear-gradient(90deg,#f2b84b 50%,#fff2d6 50%)}
.rl-no{width:12px;height:2px;border-radius:2px;background:#cbd3df}
.rl-pg{display:flex;align-items:center;gap:4px;padding:8px 12px;border-top:1px solid #e3e8ef;font-size:11px;color:#5d6a80;& span{margin-right:auto}& i{display:grid;place-items:center;min-width:22px;height:22px;border-radius:6px}& i.on{background:var(--sv);color:#fff}& .ico{width:12px;height:12px}}
.rl-ls{padding:4px 6px}
.rl-li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:8px;
&+&{border-top:1px solid #eef1f5}&.is-hi{background:color-mix(in srgb,var(--sv) 7%,#fff)}}
.rl-st{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eef1f5;color:#7b8798;& .ico{width:13px;height:13px}}
.is-ok>.rl-st{background:#e3f5ec;color:#16794f}.is-warn>.rl-st{background:#fff2d6;color:#a15c00}.is-bad>.rl-st{background:#fde8e6;color:#b42318}
.rl-lt{display:grid;gap:1px;min-width:0;& b{font-size:12.5px}& em{font-size:11.5px;color:#5d6a80}}
.rl-fm{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 12px}
.rl-fr{display:grid;gap:3px;& small{font-size:11px;font-weight:600;color:#5d6a80}& b{padding:7px 10px;border:1px solid #d9dfe8;border-radius:8px;background:#fff;font-size:12px;font-weight:500;line-height:1.35}
&.is-on b{border-color:var(--sv);box-shadow:0 0 0 3px color-mix(in srgb,var(--sv) 18%,#0000)}}

/* charts */
.rl-cc{display:grid}
.rl-chart{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:var(--h) auto;column-gap:8px;padding-top:8px}
.rl-ya{display:flex;flex-direction:column;justify-content:space-between;align-self:start;height:calc(100% + 12px);margin-top:-6px;text-align:right;& i{font-size:11px;line-height:12px;color:#5d6a80}}
.rl-plot{position:relative;& svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}& .g{stroke:#e6eaf0;stroke-width:1;vector-effect:non-scaling-stroke}
& .l{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}& .a{stroke:none;fill-opacity:.12}
& .l0{stroke:var(--sv)}& .a.l0{fill:var(--sv)}& .l1{stroke:#e48a3b}& .l2{stroke:#7a5af8}}
.rl-vl{position:absolute;top:0;bottom:0;border-left:1px dashed #b8c2d1}
.rl-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:2px solid var(--sv);border-radius:50%;background:#fff;&.l1{border-color:#e48a3b}&.l2{border-color:#7a5af8}}
.rl-tip{position:absolute;z-index:2;display:grid;gap:2px;min-width:104px;padding:6px 9px;border-radius:8px;background:#151c3c;color:#fff;font-size:11px;line-height:1.35;box-shadow:0 8px 20px #0003;transform:translate(10px,-50%);pointer-events:none;
&.is-l{transform:translate(calc(-100% - 10px),-50%)}& >b{font-size:11px;font-weight:500;color:#a9b7cb}& span{display:flex;align-items:center;gap:5px;white-space:nowrap}& span b{margin-left:auto;padding-left:10px}
& i{width:8px;height:8px;border-radius:50%;background:var(--sv)}& i.l1{background:#e48a3b}& i.l2{background:#7a5af8}}
.rl-xl{grid-column:2;display:flex;justify-content:space-between;margin-top:6px;& span{font-size:11px;color:#5d6a80}
&.is-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);text-align:center}}
.rl-gl{position:absolute;left:0;right:0;border-top:1px solid #e6eaf0}
.rl-cols{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;
& >span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
& em{margin-bottom:3px;font-size:11px;font-weight:600;color:#5d6a80;white-space:nowrap}& i{display:block;flex:none;width:min(74%,38px);border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--sv) 30%,#fff)}
& .is-on i{background:var(--sv)}& .is-on em{padding:0 6px;border-radius:6px;background:#151c3c;color:#fff}}
.rl-hb{display:grid;gap:9px}
.rl-hr{display:grid;grid-template-columns:minmax(76px,28%) minmax(0,1fr) auto;gap:10px;align-items:center;& >i{font-size:12px;line-height:1.3;color:#384370}& >b{min-width:44px;font-size:12px;text-align:right}
& .rl-trk{height:9px;border-radius:5px;background:#edf0f5;overflow:hidden}& u{display:block;height:100%;border-radius:5px;background:color-mix(in srgb,var(--sv) 55%,#fff);text-decoration:none}&.is-on u{background:var(--sv)}}
.rl-lg{display:flex;flex-wrap:wrap;gap:4px 12px;& span{display:flex;align-items:center;gap:5px;font-size:11px;color:#5d6a80}& i{width:9px;height:9px;border-radius:3px}& b{color:#192045;font-weight:600}}
.rl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.rl-kpi{display:grid;gap:2px;min-width:0;padding:10px 12px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;box-shadow:0 1px 2px #1920450a;overflow:hidden;
& small{font-size:11px;color:#5d6a80}& b{font-size:20px;font-weight:700;line-height:1.15;letter-spacing:-.3px}&.is-text b{font-size:13px;line-height:1.3;letter-spacing:0}
& em{display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;line-height:1.3;color:#16794f}& em .ico{width:11px;height:11px}&.is-bad em{color:#b42318}&.is-warn em{color:#a15c00}&.is-n em{color:#5d6a80}}
.rl-spark{width:100%;height:26px;margin-top:4px;color:#16794f;&.is-bad{color:#b42318}&.is-warn{color:#a15c00}&.is-n{color:color-mix(in srgb,var(--sv) 84%,#000)}& .l{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke}& .a{fill:currentColor;fill-opacity:.1;stroke:none}}
.rl-donut{position:relative;display:inline-grid;flex:none;place-items:center;width:var(--sz);height:var(--sz);& svg{position:absolute;inset:0;width:100%;height:100%}
& .rl-arc{fill:none;stroke-width:4.4}& circle.rl-trk{fill:none;stroke:#edf0f5;stroke-width:4.4}& >span{position:relative;display:grid;text-align:center;line-height:1.1}& b{font-size:22px;font-weight:700}& small{font-size:11px;color:#5d6a80}}
.rl-sc{display:flex;align-items:center;gap:18px}
.rl-scl{display:grid;flex:1;gap:7px;min-width:0;& >strong{font-size:14px}}
.rl-pt{display:grid;grid-template-columns:minmax(80px,32%) minmax(0,1fr) auto;gap:8px;align-items:center;& i{font-size:11.5px}& b{font-size:11.5px}
& .rl-trk{height:7px;border-radius:4px;background:#edf0f5;overflow:hidden}& u{display:block;height:100%;border-radius:4px;background:#9bb4d8}&.is-ok u{background:#35b27a}&.is-warn u{background:#f0b429}&.is-bad u{background:#e5594b}
&.is-ok b{color:#16794f}&.is-warn b{color:#a15c00}&.is-bad b{color:#b42318}}

/* boards, flows, structures */
.rl-bd{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;align-items:start}
.rl-bc{display:grid;align-content:start;gap:6px;padding:8px;border-radius:10px;background:#e9edf3;&.is-on{box-shadow:0 0 0 2px var(--sv)}
& >b{display:flex;align-items:center;gap:6px;font-size:12px}& >b i{width:8px;height:8px;border-radius:50%}& >b em{margin-left:auto;padding:0 7px;border-radius:9px;background:#fff;font-size:11px;font-weight:600;color:#5d6a80}}
.rl-bk{display:grid;gap:4px;padding:8px 9px;border-radius:8px;background:#fff;box-shadow:0 1px 2px #19204514,0 0 0 1px #e3e8ef;font-size:12px;line-height:1.35;& >span:first-child{font-weight:600}& >small{font-size:11px;line-height:1.35;color:#5d6a80}}
.rl-bf{display:flex;align-items:center;justify-content:space-between;margin-top:2px;& .rl-av{width:20px;height:20px;font-size:11px}}
.rl-tag{width:30px;height:5px;border-radius:3px;background:#d7dde7;&.is-ok{background:#35b27a}&.is-warn{background:#f0b429}&.is-bad{background:#e5594b}}
.rl-fv{display:grid;gap:12px;padding:14px;border:1px solid #e3e8ef;border-radius:10px;background:radial-gradient(#d5dbe5 1px,#0000 1px) 0 0/14px 14px,#fbfcfe}
.rl-fl{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px 0}
.rl-fn{display:grid;flex:1 1 0;justify-items:center;align-content:start;gap:4px;min-width:88px;padding:10px 6px;border:1px solid #dfe5ee;border-radius:10px;background:#fff;box-shadow:0 1px 3px #19204514;text-align:center;
& >i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;& .ico{width:17px;height:17px}}& >b{font-size:12px;line-height:1.3}& >small{font-size:11px;color:#5d6a80}
&.is-on{box-shadow:0 0 0 2px var(--sv)}&.is-q{border-style:dashed;border-color:var(--sv)}}
.rl-ar{display:grid;place-items:center;flex:none;width:22px;color:#9aa6b8;& .ico{width:14px;height:14px}}
.rl-fk{display:flex;flex-wrap:wrap;gap:6px}
.rl-fb{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid #e3e8ef;border-radius:8px;background:#fff;font-size:11.5px;& .ico{width:12px;height:12px}
&.is-ok{border-color:#0000;background:#e3f5ec;color:#16794f}&.is-warn{border-color:#0000;background:#fff2d6;color:#a15c00}&.is-bad{border-color:#0000;background:#fde8e6;color:#b42318}}
.rl-tr2{display:grid;gap:12px;justify-items:center}
.rl-rt{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;background:linear-gradient(135deg,var(--sv),var(--sv2));color:#fff;font-size:12.5px;font-weight:600;& .ico{width:14px;height:14px}
&::after{content:"";position:absolute;left:50%;top:100%;height:12px;border-left:1px solid #c3ccda}}
.rl-brs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;width:100%;margin-top:0;
&::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:0;border-top:1px solid #c3ccda}}
.rl-bn{position:relative;display:grid;align-content:start;gap:5px;padding-top:12px;&::before{content:"";position:absolute;top:0;left:50%;height:12px;border-left:1px solid #c3ccda}}
.rl-nd{padding:7px 8px;border:1px solid #cfd7e3;border-radius:8px;background:#fff;font-size:12px;font-weight:600;line-height:1.3;text-align:center}
.rl-bn.is-on .rl-nd{border-color:var(--sv);box-shadow:0 0 0 3px color-mix(in srgb,var(--sv) 18%,#0000)}
.rl-lf{padding:5px 8px;border:1px solid #e6eaf0;border-radius:7px;background:#f6f8fb;font-size:11.5px;line-height:1.3;text-align:center}
.rl-gt{display:grid}
.rl-gr{display:grid;grid-template-columns:minmax(90px,24%) repeat(var(--w),minmax(0,1fr));align-items:center;padding:6px 10px;border-bottom:1px solid #eef1f5;
&:last-child{border-bottom:0}& >i{padding-right:6px;font-size:11.5px;line-height:1.3}& em{font-size:11px;text-align:center;color:#5d6a80}&.is-head{background:#f8f9fc}&.is-hi{background:color-mix(in srgb,var(--sv) 7%,#fff)}
& u{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--sv),var(--sv2));text-decoration:none}& u.is-ok{background:#35b27a}& u.is-warn{background:#f0b429}& u.is-bad{background:#e5594b}}
.rl-od{display:grid;gap:5px;padding:12px}
.rl-ob{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px;border:1px solid #edf0f5;border-radius:7px;background:#fff;
& code{padding:1px 6px;border-radius:5px;background:#192151;color:#fff;font:600 11px ui-monospace,Consolas,monospace;text-align:center}& >i{font-size:12px;line-height:1.35}
&.is-h1>i{font-size:15px;font-weight:700}&.is-h2>i{font-size:13px;font-weight:650}&.is-h3>i{font-weight:600}&.is-schema code,&.is-meta code{background:#7a4ab5}&.is-faq{background:#fff8ea}&.is-hi{box-shadow:0 0 0 2px var(--sv)}
& >.rl-cta{justify-self:start;padding:4px 14px;border-radius:7px;background:var(--sv);color:#fff;font-weight:600}
& >.rl-ip{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 8px;border-radius:6px;background:repeating-linear-gradient(135deg,#eef1f6 0 8px,#f6f8fb 8px 16px);color:#5d6a80;& .ico{width:14px;height:14px}}}
.rl-cds{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.rl-cd{display:grid;align-content:start;gap:4px;padding:12px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;box-shadow:0 1px 2px #1920450a;
& b{font-size:12.5px}& small{font-size:11.5px;line-height:1.4;color:#5d6a80}& .wsm-chip{justify-self:start;margin-top:3px}&.is-hi{box-shadow:0 0 0 2px var(--sv)}}
.rl-ci{display:grid;place-items:center;width:30px;height:30px;margin-bottom:2px;border-radius:9px;color:#fff;& .ico{width:16px;height:16px}}
.rl-vv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rl-vs{display:grid;align-content:start;gap:6px;padding:12px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;
& >small{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}& >small .ico{width:13px;height:13px}& >b{font-size:12.5px;line-height:1.35}
& ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}& li{display:flex;gap:6px;font-size:11.5px;line-height:1.4}& li .ico{flex:none;width:14px;height:14px;margin-top:1px}
&.is-bad{border-color:#f3c9c4;background:#fffafa}&.is-bad>small,&.is-bad li .ico{color:#b42318}&.is-ok{border-color:#bfe5d1;background:#f8fdfa}&.is-ok>small,&.is-ok li .ico{color:#16794f}}

/* code editor and inbox */
.rl-code{overflow:hidden;border-radius:10px;background:#0e132c;color:#d6e2f2;box-shadow:0 1px 3px #19204526}
.rl-ct{display:flex;gap:2px;padding:6px 8px 0;background:#090e23;& i{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:7px 7px 0 0;font-size:11.5px;color:#8fa1b8}& i.on{background:#0e132c;color:#fff}& .ico{width:12px;height:12px}}
.rl-code pre{margin:0;padding:10px 0;font:12px/1.65 ui-monospace,Consolas,"Cascadia Mono",monospace}
.rl-cl{display:grid;grid-template-columns:44px minmax(0,1fr);padding-right:12px;& u{padding-right:12px;text-align:right;text-decoration:none;color:#4e5d72;user-select:none}}
.rl-cx{white-space:pre-wrap;overflow-wrap:anywhere;& .k{color:#7fb8ff}& .s{color:#9bdc9b}& .n{color:#f3b36d}& .b{color:#c792ea}& .t{color:#ff8a8a}& .c{color:#6c7a90}}
.rl-cs{display:flex;justify-content:flex-end;gap:14px;padding:5px 12px;background:#1f5fd0;font-size:11px;color:#fff;& span{font-size:11px}}
.rl-ib{padding:0}
.rl-itabs{display:flex;gap:16px;padding:0 12px;border-bottom:1px solid #e3e8ef;& i{padding:9px 0;font-size:12px;color:#5d6a80}& i.on{font-weight:600;color:color-mix(in srgb,var(--sv) 84%,#000);box-shadow:inset 0 -2px var(--sv)}& em{margin-left:3px;padding:0 6px;border-radius:8px;background:color-mix(in srgb,var(--sv) 12%,#fff);font-size:11px}}
.rl-msg{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid #eef1f5;&:last-child{border-bottom:0}&.is-hi{background:color-mix(in srgb,var(--sv) 7%,#fff);box-shadow:inset 3px 0 0 var(--sv)}}
.rl-mt{display:grid;min-width:0;& b{display:flex;gap:8px;font-size:12.5px}& b small{margin-left:auto;font-size:11px;font-weight:400;color:#5d6a80}& em{overflow:hidden;font-size:12px;color:#5d6a80;text-overflow:ellipsis;white-space:nowrap}}

/* search, map, AI answer */
.rl-serp{display:grid;gap:10px;padding:14px 16px;background:#fff;color:#202124}
.rl-sq{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:24px;box-shadow:0 1px 6px #20212430,0 0 0 1px #dfe1e5;font-size:13px;& .ico{flex:none;width:15px;height:15px;color:#70757a}& b{flex:1;min-width:0;font-size:13px;font-weight:400}}
.rl-stabs{display:flex;align-items:center;gap:16px;border-bottom:1px solid #dfe1e5;& i{padding:5px 0;font-size:12px;color:#5f6368}& i.is-on{font-weight:600;color:color-mix(in srgb,var(--sv) 84%,#000);box-shadow:inset 0 -2px var(--sv)}& em{margin-left:auto;font-size:11px;color:#70757a}}
.rl-sb{display:grid;gap:14px;&.has-aside{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.rl-sl2{display:grid;gap:6px;align-content:start}
.rl-res{display:grid;gap:3px;padding:8px 10px;border-radius:10px;&.is-hi{background:#f3f8ff;box-shadow:inset 0 0 0 1px #cfe0f7}
& p{margin:0;font-size:12.5px;line-height:1.5;color:#4d5156}& p b{font-weight:700;color:#202124}& p em{color:#70757a}}
.rl-host{display:flex;align-items:center;gap:8px;& >span{display:grid;min-width:0;line-height:1.25}& b{font-size:12px;font-weight:500;color:#202124}& em{overflow:hidden;font-size:11px;color:#5f6368;text-overflow:ellipsis;white-space:nowrap}& .mk-fav{flex:none;width:24px;height:24px;font-size:11px}}
.rl-gdot{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#5b8def;color:#fff;font-size:11px;font-weight:700;&.c1{background:#e8793b}&.c2{background:#1f9d63}&.c3{background:#a05cd6}&.c4{background:#d9577b}&.c5{background:#2a9d8f}}
.rl-rt2{font-size:15px;font-weight:500;line-height:1.3;color:#1a4fb5}
.rl-rate{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#5f6368}
.rl-stars{display:inline-flex;gap:1px;& i{display:grid;color:#d7dbe2}& i.on{color:#f0a500}& .ico{width:12px;height:12px;fill:currentColor}}
.rl-price{font-size:11.5px;color:#5f6368}
.rl-sl{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;& i{padding:4px 0;border-bottom:1px solid #eef1f5;font-size:12px;color:#1a4fb5}}
.rl-faq{display:grid;& i{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid #e6e8ec;font-size:12px}& .ico{width:13px;height:13px;color:#5f6368}}
.rl-kp{display:grid;align-content:start;gap:6px;padding:10px;border:1px solid #dfe1e5;border-radius:12px;font-size:12px;& b{font-size:14px}& p{margin:0;line-height:1.5;color:#4d5156}& .mk-img{border-radius:8px}}
.rl-pq{padding:8px 10px 0}
.rl-stabs.is-p{padding:0 12px}.rl-serp.is-p{padding:8px 6px}
.rl-mw{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px}
.rl-map{position:relative;min-height:240px;overflow:hidden;border-radius:12px;& svg{position:absolute;inset:0;width:100%;height:100%}}
.rl-pin{position:absolute;display:flex;align-items:center;gap:4px;transform:translate(-11px,-11px);& i{display:grid;place-items:center;width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:#6b7587;box-shadow:0 2px 6px #0004;color:#fff;font-size:11px;font-weight:700}
& b{max-width:120px;padding:2px 6px;overflow:hidden;border-radius:6px;background:#fff;box-shadow:0 1px 4px #0003;font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}&.is-on i{background:#e0523f}}
.rl-pl{display:grid;align-content:start;gap:6px}
.rl-pi{display:grid;grid-template-columns:54px minmax(0,1fr);gap:9px;padding:8px;border:1px solid #e3e8ef;border-radius:10px;&.is-hi{border-color:#cfe0f7;background:#f3f8ff}& b{font-size:12.5px}& em{font-size:11.5px;color:#5f6368}}
.rl-pph{display:block;width:54px;height:54px;overflow:hidden;border-radius:8px;& .mk-img{width:100%;height:100%;aspect-ratio:auto}}
.rl-pi>span{display:grid;gap:2px;min-width:0}
.rl-pa{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;& i{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px solid #cfd7e3;border-radius:12px;font-size:11px;color:#1a4fb5}& .ico{width:11px;height:11px}}
.rl-ans{padding:12px 14px;border:1px solid #dfe4f7;border-radius:14px;background:linear-gradient(135deg,#eef3ff,#f7eefc);& p{margin:0;font-size:13px;line-height:1.6}}
.rl-ah{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:11.5px;font-weight:600;color:#5b45d6;& .ico{width:14px;height:14px}}
.rl-sub{font-size:11px;font-weight:600;color:#5d6a80}
.rl-srcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.rl-src{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border:1px solid #e3e8ef;border-radius:10px;& >i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#192151;color:#fff;font-size:11px}
& >span{display:grid;min-width:0}& em{font-size:11px;color:#5d6a80}& b{font-size:12px;line-height:1.3}&.is-hi{box-shadow:0 0 0 2px var(--sv)}}

/* phone screens */
.rl-ph{gap:0;background:#fff}
.rl-ph-h{display:flex;align-items:center;gap:8px;padding:6px 12px 8px;border-bottom:1px solid #eef1f5;background:#fff;& .ico{flex:none;width:18px;height:18px}& >span{display:grid;flex:1;min-width:0;line-height:1.25}& b{font-size:13px}& em{display:flex;align-items:center;gap:4px;font-size:11px;color:#5d6a80}
& em u{width:7px;height:7px;border-radius:50%;background:#1f9d63}&.is-feed{justify-content:space-between}& .rl-av{width:28px;height:28px}}
.rl-chat{display:flex;flex:1;flex-direction:column;gap:6px;min-height:0;padding:10px;overflow:hidden;background:#f3f5f9}
.rl-day{align-self:center;font-size:11px;color:#5f6c84}
.rl-bub{max-width:86%;padding:7px 10px;border-radius:14px;font-size:12px;line-height:1.4;&.is-u{align-self:flex-end;border-bottom-right-radius:4px;background:var(--sv);color:#fff}
&.is-a{align-self:flex-start;border-bottom-left-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px #e3e8ef}& em{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11px;color:#16794f}& em .ico{width:11px;height:11px}&.is-u em{color:#fff}}
.rl-qr{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px;background:#f3f5f9;& .wsm-chip{padding:4px 10px;background:#fff;box-shadow:inset 0 0 0 1px var(--sv);color:color-mix(in srgb,var(--sv) 84%,#000);font-size:11.5px}}
.rl-inp{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 10px 10px;padding:6px 6px 6px 14px;border-radius:20px;box-shadow:inset 0 0 0 1px #dfe4ec;font-size:12px;color:#5f6c84;
& i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sv);color:#fff}& .ico{width:14px;height:14px}}
.rl-pn{padding:0 12px 10px}
.rl-pc{display:grid;gap:7px;padding:8px 0;& .mk-img{border-radius:0}}
.rl-pt-h{display:flex;align-items:center;gap:8px;padding:0 12px;& >span{display:grid;flex:1;min-width:0;line-height:1.25}& b{font-size:12.5px}& em{display:flex;align-items:center;gap:3px;font-size:11px;color:#5d6a80}& em .ico{width:11px;height:11px}& >.ico{width:16px;height:16px}& .mk-fav{width:28px;height:28px}}
.rl-cap{margin:0;padding:0 12px;font-size:12px;line-height:1.45;& em{color:color-mix(in srgb,var(--sv) 84%,#000)}}
.rl-act{display:flex;gap:14px;padding:0 12px;& i{display:grid}& .r{margin-left:auto}& .ico{width:20px;height:20px}}
.rl-st2{padding:0 12px;font-size:11px;color:#5d6a80}
.rl-cm{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:11.5px;& .rl-av{width:22px;height:22px;font-size:11px}& b{font-weight:600}}
.rl-reel{position:relative;flex:1;min-height:360px;background:#000;& >.mk-img{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}}
.rl-rail2{position:absolute;right:8px;bottom:84px;display:grid;gap:12px;color:#fff;& i{display:grid;justify-items:center;gap:1px}& .ico{width:24px;height:24px}& em{font-size:11px}}
.rl-rcap{position:absolute;left:12px;right:56px;bottom:44px;display:grid;gap:2px;color:#fff;text-shadow:0 1px 3px #000a;& b{font-size:12.5px}& em{font-size:12px}& small{font-size:11px}}
.rl-beats{position:absolute;left:10px;right:10px;top:34px;display:flex;gap:4px;& i{flex:1;padding:3px 6px;border-radius:6px;background:#0007;color:#fff;font-size:11px;text-align:center}& .is-on{background:var(--sv)}}
.rl-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff4;& i{display:block;width:38%;height:100%;background:#fff}}
.rl-ph.is-dark{background:#000}
.rl-prof{display:grid;gap:4px;padding:10px 12px;& >b{font-size:12.5px}& >em{font-size:11.5px;color:#5d6a80}}
.rl-pr-h{display:flex;align-items:center;gap:12px;& .mk-fav{flex:none;width:46px;height:46px;font-size:18px}}
.rl-pr-s{display:flex;flex:1;justify-content:space-around;text-align:center;& span{display:grid}& b{font-size:13px}& em{font-size:11px;color:#5d6a80}}
.rl-fb2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;& i{padding:5px;border-radius:7px;background:#eef1f5;font-size:11.5px;font-weight:600;text-align:center}& i.on{background:var(--sv);color:#fff}}
.rl-pg2{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:6px;& i{display:block}& .mk-img{border-radius:0}& .is-hi{box-shadow:0 0 0 2px var(--sv)}}

.rl-cnt{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:8px 10px;background:#f3f5f9;
& span{display:grid;justify-items:center;padding:6px 2px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px #e3e8ef}& b{font-size:16px;line-height:1.2}& em{font-size:11px;color:#5d6a80;white-space:nowrap}
& .is-ok b{color:#16794f}& .is-warn b{color:#a15c00}& .is-bad b{color:#b42318}}
.rl-lp{display:grid;flex:1;align-content:start;background:#fff}
.rl-lr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid #eef1f5;&.is-hi{background:color-mix(in srgb,var(--sv) 7%,#fff)}& .wsm-chip{align-self:start;margin-top:2px}}
.rl-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:6px 8px 10px;border-top:1px solid #e3e8ef;background:#fff;
& i{display:grid;place-items:center;height:28px;border-radius:8px;color:#5f6c84}& i.on{color:color-mix(in srgb,var(--sv) 84%,#000)}& .ico{width:19px;height:19px}}

/* narrow stages (the app is an inline-size container) */
@container rl (max-width:520px){
.rl-app .rl-body{padding:10px}
.rl-bd{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.rl-cds{grid-template-columns:repeat(2,minmax(0,1fr))}
.rl-vv,.rl-sb.has-aside,.rl-mw,.rl-sp{grid-template-columns:minmax(0,1fr)}
.rl-xl:not(.is-cols) span:nth-child(2n){visibility:hidden}
.rl-tbar .rl-pill{display:none}
.rl-sc{flex-direction:column;align-items:stretch}
.rl-gr{grid-template-columns:78px repeat(var(--w),minmax(0,1fr))}}
@container rl (max-width:430px){
.rl-tb:not(.is-mx) .rl-tr:not(.is-head){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:4px}
.rl-tb:not(.is-mx) .rl-tr.is-head{display:none}
.rl-tb.has-sel .rl-tr{grid-template-columns:repeat(2,minmax(0,1fr))}
.rl-tr>i.rl-cb,.rl-tr>i.rl-mo{display:none}
.rl-tb:not(.is-mx) .rl-tr>i[data-h]::before{content:attr(data-h);display:block;font-size:11px;color:#5d6a80}
.rl-tb:not(.is-mx) .rl-tr>i.is-n{text-align:left}
.rl-tb:not(.is-mx) .rl-tr>i.is-first{grid-column:1/-1}
.rl-bd,.rl-cds{grid-template-columns:minmax(0,1fr)}
.rl-brs{grid-auto-flow:row;&::before,.rl-bn::before,&~*{display:none}}
.rl-rt::after{display:none}}

/* wider workbench: tabs on top, the screen gets the full right side */
.workbench:has(.rl){grid-template-columns:minmax(0,1fr);
& .wb-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;padding:12px 14px;border-right:0;border-bottom:1px solid var(--edge);
& button{align-items:center;gap:9px;padding:9px 11px;font-size:13px;line-height:1.35}
& button::before{display:none}& .wb-ico{flex:none;width:28px;height:28px}}
& .wb-pane{grid-template-columns:minmax(0,288px) minmax(0,1fr)}
& .wb-body{padding:28px 24px 28px 28px;& h4{font-size:22px}}
& .stage{padding:30px 24px 22px 14px}}
@media(max-width:1080px){.workbench:has(.rl) .wb-pane{grid-template-columns:minmax(0,240px) minmax(0,1fr)}}
@media(max-width:900px){.workbench:has(.rl){& .wb-pane{grid-template-columns:minmax(0,1fr)}& .wb-body{padding:22px 20px 6px}& .stage{padding:34px 14px 18px}}}

/* showpieces (scripts/service-lp/real2.mjs) */
.rz-stack{display:grid;gap:10px;min-width:0}
.rz-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rz-pn{align-content:start}
.rz-dn{display:flex;align-items:center;gap:14px}
.rz-dn .rl-donut{flex:none}
.rz-dl{display:grid;flex:1;gap:6px;min-width:0;& span{display:flex;align-items:center;gap:7px;font-size:12px}& i{flex:none;width:9px;height:9px;border-radius:3px}& b{margin-left:auto;font-variant-numeric:tabular-nums}}
.rz-fnl{display:grid;gap:6px}
.rz-fs{display:grid;grid-template-columns:96px minmax(0,1fr) 58px;align-items:center;gap:8px;
& >i{font-size:11.5px;color:#384370}
& .rz-fb{display:flex;justify-content:center;height:26px}
& .rz-fb u{display:grid;place-items:center;min-width:0;height:100%;border-radius:6px;background:color-mix(in srgb,var(--sv) calc(100% - var(--k) * 10%),#fff);color:#fff;text-decoration:none;overflow:hidden}
& .rz-fb b{font-size:12px;font-variant-numeric:tabular-nums}
& >em{font-size:11px;color:#b42318;text-align:right}
&.is-on .rz-fb u{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sv)}}
.rz-ht{display:grid;gap:3px}
.rz-hr{display:grid;grid-template-columns:72px repeat(var(--n),minmax(0,1fr));gap:3px;align-items:center;
& >i{overflow:hidden;font-size:11px;color:#5d6a80;text-overflow:ellipsis;white-space:nowrap}
& >em{font-size:11px;color:#5d6a80;text-align:center}
& u{display:grid;place-items:center;height:24px;border-radius:5px;background:color-mix(in srgb,var(--sv) calc(var(--v) * 100%),#eef1f5);color:#fff;font-size:11px;font-weight:600;text-decoration:none;&.is-on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sv)}}}
.rz-fd{display:grid}
.rz-fi,.rz-pe{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid #eef1f5;
&:last-child{border-bottom:0}& >span{display:grid;min-width:0}& b{font-size:12px}& em{overflow:hidden;font-size:11.5px;color:#5d6a80;text-overflow:ellipsis;white-space:nowrap}& small{font-size:11px;color:#5f6c84}}
.rz-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid #e3e8ef;overflow:hidden;
& i{position:relative;display:flex;align-items:center;gap:5px;padding:9px 8px;font-size:12px;color:#5d6a80;white-space:nowrap}
& i.on{color:color-mix(in srgb,var(--sv) 84%,#000);font-weight:600;&::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;border-radius:2px;background:var(--sv)}}
& em{padding:0 6px;border-radius:9px;background:#eef1f5;font-size:11px;color:#5d6a80}& i.on em{background:color-mix(in srgb,var(--sv) 14%,#fff);color:color-mix(in srgb,var(--sv) 84%,#000)}}

.rz-calc{padding:0;overflow:hidden}
.rz-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid #e3e8ef}
.rz-nav{display:flex;align-items:center;gap:6px;& b{font-size:14px}& i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 1px #dde3ec;& .ico{width:13px;height:13px}}}
.rz-vw{display:flex;padding:2px;border-radius:8px;background:#eef1f5;& i{padding:3px 10px;border-radius:6px;font-size:11.5px;color:#5d6a80}& i.on{background:#fff;color:#192045;font-weight:600;box-shadow:0 1px 2px #1920451a}}
.rz-chs{display:flex;gap:6px;margin-left:auto}
.rz-lg2{display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 12px;border-top:1px solid #e3e8ef;background:#f8f9fc;font-size:11px;color:#5d6a80;& span{display:flex;align-items:center;gap:5px}& i{width:8px;height:8px;border-radius:50%;background:var(--e)}}
.c0{--e:var(--sv)}.c1{--e:#e48a3b}.c2{--e:#7a5af8}.c3{--e:#1f9d63}.c4{--e:#2a6fdb}.c5{--e:#d64545}
.rz-mh{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid #e3e8ef;background:#f8f9fc;& i{padding:6px 8px;font-size:11px;font-weight:600;color:#5d6a80}}
.rz-mg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.rz-md{display:grid;align-content:start;gap:3px;min-width:0;min-height:70px;padding:5px;border-right:1px solid #eef1f5;border-bottom:1px solid #eef1f5;
& >b{font-size:11px;font-weight:600;color:#5d6a80}&.is-off{background:#fafbfd}&.is-today>b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sv);color:#fff}}
.rz-ev{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding:2px 5px 2px 6px;border-radius:4px;border-left:3px solid var(--e);background:color-mix(in srgb,var(--e) 12%,#fff);overflow:hidden;font-size:11px;line-height:1.3;color:#192045;
& u{display:none}&.is-hot{box-shadow:0 0 0 2px var(--e)}&.is-draft{background:#fff;border-left-style:dashed;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--e) 55%,#fff)}}

.rz-tc{padding:0;overflow:hidden}
.rz-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #e3e8ef;
& span{display:grid;padding:9px 12px;border-right:1px solid #eef1f5}& span:last-child{border-right:0}& small{font-size:11px;color:#5d6a80}& b{font-size:15px}& .is-ok b{color:#16794f}& .is-warn b{color:#a15c00}& .is-bad b{color:#b42318}}
.rz-wr{display:grid;grid-template-columns:minmax(150px,38%) minmax(0,1fr);gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid #eef1f5;
&:last-child{border-bottom:0}&.is-head{padding:6px 12px;background:#f8f9fc;font-size:11px;color:#5d6a80}
&.is-hi{background:color-mix(in srgb,var(--sv) 7%,#fff);box-shadow:inset 3px 0 0 var(--sv)}
& >i{display:flex;align-items:center;gap:8px;min-width:0}& >i>span:last-child{display:grid;min-width:0}& >i b{font-size:12px}& >i small{overflow:hidden;font-size:11px;color:#5d6a80;text-overflow:ellipsis;white-space:nowrap}
& >em{position:relative;display:block;height:22px;border-radius:5px;background:repeating-linear-gradient(90deg,#eef1f5 0 1px,transparent 1px 25%)}
&.is-head>em{display:flex;justify-content:space-between;height:auto;background:none;& u{text-decoration:none}}
& >em u{position:absolute;top:3px;bottom:3px;min-width:5px;border-radius:4px;background:color-mix(in srgb,var(--sv) 78%,#fff);text-decoration:none}
& >em u.is-warn{background:#f0b429}& >em u.is-bad{background:#e5594b}& >em u.is-n{background:#b9c3d3}
& >em u b{position:absolute;top:50%;left:calc(100% + 6px);font-size:11px;font-weight:550;color:#5d6a80;white-space:nowrap;transform:translateY(-50%)}& >em u.is-late b{right:calc(100% + 6px);left:auto}}
.rz-wi{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--sv) 12%,#fff);color:color-mix(in srgb,var(--sv) 84%,#000);& .ico{width:14px;height:14px}&.is-warn{background:#fff3d6;color:#a15c00}&.is-bad{background:#fde4e1;color:#b42318}}
.rz-kv{display:grid;gap:8px;& span{display:grid;gap:1px;padding-bottom:7px;border-bottom:1px solid #eef1f5}& span:last-child{border-bottom:0}& small{font-size:11px;color:#5d6a80}& b{font-size:12.5px;overflow-wrap:anywhere}}

.rz-ib{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.7fr);min-height:310px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;overflow:hidden;&.has-side{grid-template-columns:minmax(140px,.85fr) minmax(0,1.6fr) minmax(130px,.8fr)}}
.rz-il{display:grid;align-content:start;border-right:1px solid #e3e8ef}
.rz-im{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;padding:9px 10px;border-bottom:1px solid #eef1f5;
&.is-on{background:color-mix(in srgb,var(--sv) 8%,#fff);box-shadow:inset 3px 0 0 var(--sv)}& >span{display:grid;gap:2px;min-width:0}& b{display:flex;justify-content:space-between;gap:6px;font-size:12px}& small{font-size:11px;font-weight:400;color:#5f6c84}& em{overflow:hidden;font-size:11.5px;color:#5d6a80;text-overflow:ellipsis;white-space:nowrap}& .wsm-chip{justify-self:start;margin-top:2px}}
.rz-it{display:flex;flex-direction:column;min-width:0;background:#f7f8fb}
.rz-ith{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid #e3e8ef;background:#fff;& >span:nth-child(2){display:grid;flex:1;min-width:0}& b{font-size:12.5px}& em{font-size:11px;color:#5d6a80}}
.rz-tm{display:flex;flex:1;flex-direction:column;gap:7px;padding:10px 12px}
.rz-mb{max-width:84%;padding:7px 10px;border-radius:12px;font-size:12px;line-height:1.4;
&.is-u{align-self:flex-start;border-bottom-left-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px #e3e8ef}
&.is-a{align-self:flex-end;border-bottom-right-radius:4px;background:var(--sv);color:#fff}
&.is-h{align-self:flex-end;border-bottom-right-radius:4px;background:#192151;color:#fff}
& em{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11px;color:#16794f}&.is-a em,&.is-h em{color:#fff}& em .ico{width:11px;height:11px}}
.rz-sy{align-self:center;padding:2px 10px;border-radius:10px;background:#eef1f5;font-size:11px;color:#5d6a80}
.rz-rp{display:flex;align-items:center;justify-content:space-between;margin:0 12px 10px;padding:6px 6px 6px 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #dfe4ec;font-size:12px;color:#5f6c84;
& i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--sv);color:#fff}& .ico{width:14px;height:14px}}
.rz-id{display:grid;align-content:start;gap:8px;padding:10px 12px;border-left:1px solid #e3e8ef;background:#fff;& >b{font-size:12.5px}& span{display:grid;gap:1px;padding-bottom:6px;border-bottom:1px solid #eef1f5}& small{font-size:11px;color:#5d6a80}& em{font-size:12px}}

.rz-cf{display:grid;gap:7px}
.rz-ff{display:grid;gap:2px;padding:6px 9px;border-radius:8px;box-shadow:inset 0 0 0 1px #dfe4ec;& small{font-size:11px;color:#5d6a80}& b{font-size:12px;font-weight:550}&.is-on{box-shadow:inset 0 0 0 2px var(--sv)}&.is-area b{min-height:58px;font-weight:400;line-height:1.45}}
.rz-ck{display:grid;gap:4px;margin-top:8px;& span{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;line-height:1.35}& .ico{flex:none;width:13px;height:13px;margin-top:1px}& span.is-ok{color:#16794f}& span.is-warn{color:#a15c00}& span.is-bad{color:#b42318}&.is-v{margin:0 0 8px}}
.rz-ca{display:flex;justify-content:space-between;gap:8px;margin-top:9px;& i{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px #dfe4ec;font-size:11.5px;color:#384370}& i.on{background:var(--sv);color:#fff;font-weight:600;box-shadow:none}& .ico{width:13px;height:13px}}
.rz-pv{display:grid;gap:8px;& .rz-pvl{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#5f6c84}& p{margin:0;font-size:12px;line-height:1.45}& p em{color:color-mix(in srgb,var(--sv) 84%,#000)}& .mk-img{border-radius:8px}& >small{font-size:11px;color:#5d6a80}}
.rz-pvh{display:flex;align-items:center;gap:8px;& .mk-fav{width:30px;height:30px}& >span{display:grid;line-height:1.25}& b{font-size:12.5px}& em{display:flex;align-items:center;gap:3px;font-size:11px;color:#5d6a80}& em .ico{width:11px;height:11px}}
.rz-pva{display:grid;grid-template-columns:repeat(3,1fr);padding-top:6px;border-top:1px solid #eef1f5;& i{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:#5d6a80}& .ico{width:14px;height:14px}}

.rz-dc{display:grid;align-content:start;min-width:0;border:1px solid #e3e8ef;border-radius:10px;background:#e9edf3;overflow:hidden}
.rz-dt{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid #e3e8ef;background:#fff;font-size:11.5px;
& >i{display:flex;align-items:center;gap:6px;font-weight:600}& >i .ico{width:14px;height:14px;color:color-mix(in srgb,var(--sv) 84%,#000)}& em{display:flex;align-items:center;gap:5px;color:#5d6a80}& em u{width:6px;height:6px;border-radius:50%;background:#1f9d63}
& >span{display:flex;gap:4px;margin-left:auto}& >span i{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#f3f5f9;font-weight:700}& >span .ico{width:13px;height:13px}}
.rz-pp{display:grid;gap:7px;width:min(94%,520px);margin:12px auto;padding:18px 22px;background:#fff;box-shadow:0 2px 10px #1920451a;
& h5{margin:0;font-size:20px;font-weight:700;line-height:1.2}& h6{margin:4px 0 0;font-size:14px;font-weight:650;color:color-mix(in srgb,var(--sv) 84%,#000)}
& p{margin:0;font-size:12px;line-height:1.55;color:#384370}& p.is-hl{border-radius:3px;background:color-mix(in srgb,#f0b429 22%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,#f0b429 22%,#fff)}
& p em{display:inline-grid;place-items:center;margin-left:6px;vertical-align:middle;color:#a15c00}& p em .ico{width:13px;height:13px}
& ul{display:grid;gap:3px;margin:0;padding-left:18px;font-size:12px}& blockquote{margin:0;padding:6px 10px;border-left:3px solid var(--sv);background:#f3f5f9;font-size:12px;font-style:italic}}
.rz-pi .mk-img{border-radius:6px}
.rz-ds{display:flex;align-items:center;gap:10px;margin-bottom:8px;& >span{display:grid}& b{font-size:12.5px}& em{font-size:11px;color:#5d6a80}}
.rz-cm2{display:flex;gap:8px;padding-top:8px;border-top:1px solid #eef1f5;& >span{display:grid;min-width:0}& b{font-size:12px}& em{font-size:11.5px;color:#5d6a80}& .rl-av{flex:none;width:22px;height:22px}}

.rz-dk{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px}
.rz-sd{display:grid;align-content:start;gap:8px}
.rz-st{display:grid;grid-template-columns:14px minmax(0,1fr);gap:5px;align-items:start;
& >em{font-size:11px;color:#5f6c84}
& >i{display:grid;align-content:start;gap:3px;aspect-ratio:16/10;padding:6px;border:1px solid #dde3ec;border-radius:6px;background:#fff;overflow:hidden}
& >i b{display:-webkit-box;overflow:hidden;font-size:11px;line-height:1.2;-webkit-line-clamp:2;-webkit-box-orient:vertical}
& >i u{display:block;height:3px;border-radius:2px;background:#e3e8ef}
&.is-on>i{border-color:transparent;box-shadow:0 0 0 2px var(--sv)}}
.rz-sl{display:grid;align-content:start;gap:10px;min-height:270px;padding:18px 22px;border-radius:10px;background:#fff;box-shadow:0 2px 10px #1920451a,inset 0 0 0 1px #e3e8ef;
& .rz-slk{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--sv) 84%,#000)}& h5{margin:0;font-size:20px;line-height:1.2}& >small{margin-top:auto;font-size:11px;color:#5f6c84}}
.rz-sn{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;& span{display:grid;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--sv) 8%,#fff)}& b{font-size:22px;line-height:1.1;color:color-mix(in srgb,var(--sv) 84%,#000)}& em{font-size:11.5px;color:#5d6a80}}
.rz-sb2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;align-items:center;& ul{display:grid;gap:5px;margin:0;padding-left:16px;font-size:12px;line-height:1.4}}

.rz-jm{display:grid;overflow:hidden}
.rz-jr{display:grid;grid-template-columns:96px repeat(var(--n),minmax(0,1fr));border-bottom:1px solid #eef1f5;
&:last-child{border-bottom:0}
& >i{display:flex;align-items:flex-start;gap:6px;padding:9px 10px;background:#f8f9fc;font-size:11.5px;font-weight:600;color:#384370}& >i .ico{flex:none;width:14px;height:14px;color:color-mix(in srgb,var(--sv) 84%,#000)}
& >em{padding:9px 8px;border-left:1px solid #eef1f5;font-size:11.5px;line-height:1.4;color:#384370}
&.is-head>em{display:flex;align-items:center;gap:6px;background:#f8f9fc;font-weight:700;color:#192045}
&.is-head>em u{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--sv);color:#fff;font-size:11px;text-decoration:none}&.is-head>em.is-pain u{background:#d64545}
&.is-mood{min-height:68px}}
.rz-jc{position:relative;grid-column:2/-1;& svg{position:absolute;inset:0;width:100%;height:100%}& path{fill:none;stroke:var(--sv);stroke-width:2;vector-effect:non-scaling-stroke}
& u{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border:2.5px solid var(--sv);border-radius:50%;background:#fff}& u.is-pain{border-color:#d64545}}

.rz-cv{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--m),auto);gap:6px}
.rz-cc{display:grid;grid-area:var(--a);align-content:start;gap:4px;min-width:0;padding:8px 9px;border:1px solid #e3e8ef;border-radius:9px;background:#fff;
& >b{display:flex;align-items:center;gap:5px;font-size:11.5px;color:color-mix(in srgb,var(--sv) 84%,#000)}& >b .ico{width:13px;height:13px}
& >i{padding:3px 6px;border-radius:5px;background:color-mix(in srgb,var(--sv) 8%,#fff);font-size:11.5px;line-height:1.3;overflow-wrap:anywhere}
&.is-hi{box-shadow:0 0 0 2px var(--sv)}}

.rz-oc{display:grid;gap:6px;&.is-hi{box-shadow:0 0 0 2px var(--sv)}}
.rz-ob{display:grid;grid-template-columns:minmax(0,1.5fr) 96px minmax(40px,1fr) 38px;gap:10px;align-items:center;& strong{font-size:13px;text-align:right}& .wsm-chip{justify-self:start}}
.rz-ot{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:center;& >i{display:grid;grid-row:span 2;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--sv) 12%,#fff);color:color-mix(in srgb,var(--sv) 84%,#000)}& >i .ico{width:14px;height:14px}& b{font-size:12.5px}& em{font-size:11px;color:#5d6a80}}
.rz-op{display:block;height:7px;border-radius:4px;background:#edf0f5;overflow:hidden;& u{display:block;height:100%;border-radius:4px;background:var(--sv);text-decoration:none}&.is-ok u{background:#35b27a}&.is-warn u{background:#f0b429}&.is-bad u{background:#e5594b}}
.rz-kr{display:grid;grid-template-columns:minmax(0,1.5fr) 96px minmax(40px,1fr) 38px;gap:10px;align-items:center;padding:6px 0 0 32px;border-top:1px dashed #e3e8ef;& i{font-size:12px}& small{font-size:11px;color:#5d6a80;white-space:nowrap}& b{font-size:11.5px;text-align:right}}

.rz-pl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.rz-pc{display:grid;align-content:start;gap:6px;min-width:0;padding:8px;border-radius:10px;background:#e9edf3;
&.is-on{box-shadow:inset 0 0 0 2px var(--sv)}& >b{display:flex;align-items:center;gap:6px;font-size:12px}& >b i{width:8px;height:8px;border-radius:50%}& >b em{margin-left:auto;padding:0 6px;border-radius:9px;background:#fff;font-size:11px;color:#5d6a80}& >small{margin-top:-3px;font-size:11px;color:#5d6a80}}
.rz-pk{display:grid;gap:3px;padding:8px 9px;border-radius:8px;background:#fff;box-shadow:0 1px 2px #1920451a;
& >span:first-child{font-size:12px;font-weight:600;line-height:1.3}& small{font-size:11px;color:#5d6a80}&.is-warn{box-shadow:0 1px 2px #1920451a,inset 3px 0 0 #f0b429}&.is-bad{box-shadow:0 1px 2px #1920451a,inset 3px 0 0 #e5594b}&.is-ok{box-shadow:0 1px 2px #1920451a,inset 3px 0 0 #35b27a}}
.rz-pf{display:grid;grid-template-columns:auto minmax(18px,1fr) 20px;gap:7px;align-items:center;margin-top:3px;& b{font-size:11.5px}& .rl-av{width:20px;height:20px}}

.rz-rpw{position:relative;display:grid;justify-items:center;padding:6px 0 4px}
.rz-rp2{position:absolute;top:-2px;bottom:6px;left:50%;width:min(90%,440px);margin-left:calc(min(90%,440px) / -2 + 18px);border-radius:3px;background:#fff;box-shadow:0 2px 10px #1920451a;opacity:.65}
.rz-rpp{position:relative;display:grid;gap:9px;width:min(90%,440px);padding:20px 24px;border-radius:3px;background:#fff;box-shadow:0 2px 12px #19204524;
& .rz-rk{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--sv) 84%,#000)}& h5{margin:0;font-size:19px;line-height:1.2}& ul{display:grid;gap:4px;margin:0;padding-left:16px;font-size:12px}
& >small{padding-top:7px;border-top:1px solid #eef1f5;font-size:11px;color:#5f6c84}}
.rz-rn{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;& span{display:grid;padding:7px 9px;border-left:3px solid var(--sv);background:#f6f8fb}& b{font-size:18px;line-height:1.1}& em{font-size:11px;color:#5d6a80}& small{font-size:11px;color:#16794f}}

.rx-th{display:inline-flex;align-items:center;gap:8px;min-width:0;
& >i{flex:none;display:block;width:34px;height:34px;border-radius:6px;overflow:hidden;background:#e9edf3}& >i img{display:block;width:100%;height:100%;object-fit:cover}
& >span{display:grid;min-width:0}& b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}& em{font-size:11px;font-style:normal;color:#5d6a80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.rl-bk>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;background:#e9edf3}

.rz-ve{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:10px;align-items:start}
.rz-vp{display:grid;gap:7px;justify-items:center}
.rz-vs{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#192045;box-shadow:0 4px 14px #19204533;
& img{display:block;width:100%;height:100%;object-fit:cover}& b{position:absolute;left:8px;right:8px;bottom:14px;padding:5px 8px;border-radius:6px;background:#0009;color:#fff;font-size:12px;font-weight:700;line-height:1.3;text-align:center}}
.rz-vc{display:flex;align-items:center;gap:6px;color:#4d5a70;
& i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#edf0f5}& i.on{background:var(--sv);color:#fff}& .ico{width:13px;height:13px}& em{font-size:11px;font-style:normal;font-variant-numeric:tabular-nums}}
.rz-tt{display:flex;align-items:center;justify-content:space-between;gap:8px;& b{font-size:13px}
& >span{display:flex;gap:6px}& >span i{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:7px;background:#edf0f5;font-size:11px;font-style:normal;font-weight:600;color:#394578}& >span i.on{background:var(--sv);color:#fff}& .ico{width:12px;height:12px}}
.rz-tl{position:relative;display:grid;gap:5px;margin-top:8px;padding:2px 0}
.rz-tr0{display:grid;grid-template-columns:78px minmax(0,1fr);& >i{display:block}& >span{display:flex;justify-content:space-between;font-size:11px;color:#5f6c84;font-variant-numeric:tabular-nums;border-bottom:1px solid #e3e8ef;padding-bottom:3px}& em{font-style:normal}}
.rz-tr1{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;min-height:28px;
& >i{display:flex;align-items:center;gap:5px;font-size:11px;font-style:normal;font-weight:600;color:#4d5a70}& >i .ico{width:12px;height:12px}
& >span{position:relative;display:block;height:26px;border-radius:5px;background:#f1f3f8}
& u{position:absolute;top:2px;bottom:2px;display:flex;align-items:center;padding:0 6px;border-radius:4px;background:color-mix(in srgb,var(--sv) 22%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sv) 45%,#fff);color:#192045;font-size:11px;font-weight:600;text-decoration:none;overflow:hidden;white-space:nowrap}
& u.k1{background:#fde9d6;box-shadow:inset 0 0 0 1px #f0b979}& u.k2{background:#e3f5ec;box-shadow:inset 0 0 0 1px #8fd4b2}& u.k3{background:#ece6fd;box-shadow:inset 0 0 0 1px #b9a8f3}}
.rz-ph{position:absolute;top:0;bottom:0;width:2px;margin-left:78px;background:#e5594b;pointer-events:none;
&::before{content:"";position:absolute;top:-1px;left:-4px;width:10px;height:8px;border-radius:2px;background:#e5594b}}
.rz-tl .rz-ph{left:calc(78px + (100% - 78px) * var(--p,0))}

.rz-ar{position:relative;display:grid;place-items:center;padding:14px;border-radius:10px;background:radial-gradient(#cfd6e2 1px,#0000 1px) 0 0/12px 12px,#eef1f6;min-height:230px}
.rz-az{position:absolute;right:8px;top:6px;padding:1px 7px;border-radius:8px;background:#fff;font-size:11px;font-weight:600;color:#5d6a80;box-shadow:0 1px 2px #19204522}
.rz-ab{position:relative;width:min(100%,250px);aspect-ratio:1/1;overflow:hidden;border-radius:2px;background:#fff;box-shadow:0 6px 18px #19204540;
& >img{display:block;width:100%;height:100%;object-fit:cover}}
.rz-at{position:absolute;left:0;right:0;bottom:0;display:grid;gap:3px;padding:30px 14px 14px;background:linear-gradient(0deg,#192045e6,#19204500);color:#fff;
& small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}& b{font-size:19px;line-height:1.15}& em{font-size:12px;font-style:normal;opacity:.9}}
.rz-sel{position:absolute;left:12px;right:12px;bottom:12px;height:78px;border:1.5px solid var(--sv);pointer-events:none;
& i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--sv)}& i:nth-child(1){left:-4px;top:-4px}& i:nth-child(2){right:-4px;top:-4px}& i:nth-child(3){left:-4px;bottom:-4px}& i:nth-child(4){right:-4px;bottom:-4px}}
.rz-pr{display:grid;gap:7px;align-content:start;
& >b{margin-top:2px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5f6c84}}
.rz-ps{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;background:#f3f5f9;font-size:12px;font-weight:600;& .ico{width:13px;height:13px;color:#5d6a80}}
.rz-sw{display:flex;gap:6px;& i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001f}& i.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sv)}}
.rz-ly{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:7px;font-size:12px;& .ico{width:13px;height:13px;color:#5d6a80}&.on{background:color-mix(in srgb,var(--sv) 12%,#fff);font-weight:600}}

@container rl (max-width:520px){
.rz-ve{grid-template-columns:minmax(0,1fr)}.rz-vs{max-width:150px}}

.rz-ml{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px}
.rz-mt{display:grid;gap:2px;min-width:0;padding:5px;border-radius:9px;box-shadow:inset 0 0 0 1px #e3e8ef;background:#fff;
&.is-on{box-shadow:inset 0 0 0 2px var(--sv)}& >b{padding:3px 3px 0;font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}& >em{padding:0 3px 2px;font-size:11px;font-style:normal;color:#5d6a80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.rz-mp{position:relative;display:block;border-radius:6px;overflow:hidden;& u{position:absolute;right:5px;bottom:5px;padding:1px 6px;border-radius:5px;background:#000a;color:#fff;font-size:11px;font-weight:600;text-decoration:none}}

.rz-sz{display:grid;justify-items:center;padding:10px;border-radius:10px;background:#eef1f6}
.rz-sf{position:relative;display:block;width:min(100%,170px);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px #19204540;
& i{position:absolute;display:grid;place-items:center;padding:4px;border:1.5px dashed #fff;background:#e5594bb3;color:#fff;font-size:11px;font-style:normal;font-weight:600;line-height:1.25;text-align:center}
& i.is-t{left:0;right:0;top:0;height:13%}& i.is-b{left:0;right:22%;bottom:0;height:19%}& i.is-r{right:0;top:44%;bottom:0;width:22%;font-size:11px}
& >b{position:absolute;left:12%;right:26%;top:48%;padding:6px 8px;border-radius:7px;background:#fff;color:#192045;font-size:12px;line-height:1.3;text-align:center;box-shadow:0 2px 8px #0003}}

.rz-fr{display:flex;align-items:flex-end;justify-content:space-around;gap:10px;padding:6px 0 2px}
.rz-fm{display:grid;justify-items:center;gap:3px;min-width:0;flex:1 1 0;text-align:center;& >b{font-size:12px}& >em{font-size:11px;font-style:normal;color:#5d6a80}
&.is-on>b{color:color-mix(in srgb,var(--sv) 84%,#000)}}
.rz-fp{position:relative;display:block;width:100%;max-width:150px;max-height:170px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1px #d5dbe5,0 3px 10px #19204526;
& .mk-img,& img{display:block;width:100%;height:100%;object-fit:cover}& .mk-img{aspect-ratio:auto!important;height:100%}
& i{position:absolute;inset:8%;border:1.5px dashed #fff;border-radius:4px;box-shadow:0 0 0 1px #0003}}

.rz-bk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rz-bl{display:grid;place-items:center;align-content:center;gap:4px;min-height:132px;border-radius:12px;background:linear-gradient(135deg,#fff7ef,#f6e4d6);box-shadow:inset 0 0 0 1px #ecd9c8;
& i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--sv),var(--sv2));color:#fff;font-size:22px;font-style:normal;font-weight:800}& b{font-size:15px;color:#2a2018}& em{font-size:11px;font-style:normal;color:#8a7766}}
.rz-bs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;& span{display:grid;gap:1px;justify-items:start;min-width:0}& i{display:block;width:100%;height:30px;border-radius:7px;box-shadow:inset 0 0 0 1px #0000001a}& b{font-size:11px}& em{font-size:11px;font-style:normal;color:#5f6c84}}
.rz-fo{display:flex;align-items:center;gap:10px;padding:2px 0;& >i{font-size:26px;font-style:normal;line-height:1;color:#192045}& >span{display:grid}& b{font-size:12px}& em{font-size:11px;font-style:normal;color:#5d6a80}}
.rz-pr2{margin:0;padding:10px 12px;border-radius:9px;background:#f4f6fa;font-size:12.5px;line-height:1.5;color:#27315d}
.rz-vo{display:flex;gap:8px;align-items:flex-start;padding:5px 7px;border-radius:8px;font-size:12px;& .ico{flex:none;width:14px;height:14px;margin-top:2px}& >span{display:grid}& b{font-size:11px;letter-spacing:.04em;text-transform:uppercase}& em{font-style:normal;line-height:1.35}
&.is-ok{background:#eaf7f0;color:#16794f}&.is-bad{background:#fdecea;color:#b4372c}}

.rz-pc2{padding:0;overflow:hidden}
.rz-ph2{display:grid}
.rz-cv2{display:block;max-height:112px;overflow:hidden;& .mk-img,& img{display:block;width:100%;aspect-ratio:auto!important;height:112px;object-fit:cover}}
.rz-pi2{position:relative;display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;padding:0 14px 12px;margin-top:-26px;
& .mk-fav{flex:none;width:62px;height:62px;border:3px solid #fff;box-shadow:0 2px 8px #1920452e}& >span:nth-child(2){display:grid;flex:1 1 140px;min-width:0;padding-bottom:2px}& b{font-size:16px}& em{font-size:12px;font-style:normal;color:#5d6a80}& small{font-size:11px;color:#5f6c84}}
.rz-pb{display:flex;gap:6px;margin-left:auto;& i{padding:5px 12px;border-radius:7px;background:#edf0f5;font-size:12px;font-style:normal;font-weight:600;color:#394578}& i.on{background:var(--sv);color:#fff}}

.rz-xp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.rz-xc{display:grid;justify-items:start;align-content:end;gap:3px;min-width:0;padding:8px;border-radius:10px;box-shadow:inset 0 0 0 1px #e3e8ef;background:#fff;
&.is-on{box-shadow:inset 0 0 0 2px var(--sv)}& >b{font-size:12.5px}& >em{font-size:11px;font-style:normal;color:#5d6a80}
& small{display:flex;align-items:center;gap:4px;font-size:11px;color:#16794f;&.is-warn{color:#9a6700}& .ico{width:11px;height:11px}}}
.rz-xf{display:block;width:100%;max-height:150px;margin:0 auto 4px;border-radius:6px;overflow:hidden;background:#192045;& .mk-img,& img{display:block;width:100%;height:100%;aspect-ratio:auto!important;object-fit:cover}}

@container rl (max-width:520px){
.rz-ml{--n:2!important}.rz-bk{grid-template-columns:minmax(0,1fr)}.rz-xp{grid-template-columns:minmax(0,1fr)}.rz-fr{flex-wrap:wrap}.rz-bs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rz-wc{padding:0;overflow:hidden}
.rz-wt{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 12px;border-bottom:1px solid #e8ecf2;
& >b{font-size:13px}& >small{font-size:11px;color:#5d6a80}
& >span{display:flex;gap:6px;margin-left:auto;& i{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:7px;background:#edf0f5;font-size:11.5px;font-style:normal;font-weight:600;color:#394578;& .ico{width:12px;height:12px}&.on{background:var(--sv);color:#fff}}}}
.rz-wb{position:relative;background-color:#f6f8fb;background-image:radial-gradient(#cfd6e2 1px,transparent 1px);background-size:16px 16px;overflow:hidden;
& >svg{position:absolute;inset:0;width:100%;height:100%}
& path{fill:none;stroke:#9aa7bc;stroke-width:1.6;vector-effect:non-scaling-stroke;&.is-ok{stroke:#1f9d63}&.is-warn{stroke:#e2a02e;stroke-dasharray:5 4}&.is-bad{stroke:#d64545;stroke-dasharray:5 4}}
& >u{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#9aa7bc;box-shadow:0 0 0 2px #f6f8fb;&.is-ok{background:#1f9d63}&.is-warn{background:#e2a02e}&.is-bad{background:#d64545}}
& >em{position:absolute;z-index:3;transform:translate(-50%,-50%);padding:1px 7px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #d9dfe9;font-size:11px;font-style:normal;font-weight:600;color:#394578;white-space:nowrap;&.is-ok{color:#16794f}&.is-warn{color:#9a6700}&.is-bad{color:#b4372c}}}
.rz-wn{position:absolute;display:flex;align-items:center;gap:7px;padding:0 8px 0 7px;border-radius:11px;background:#fff;box-shadow:0 0 0 1px #d9dfe9,0 3px 10px #1920451a;min-width:0;
&.is-on{box-shadow:0 0 0 2px var(--sv),0 5px 16px #19204530}
& >i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#fff;background:linear-gradient(135deg,#4c8cf0,#2a63cf);& .ico{width:15px;height:15px}}
&.k-trigger>i{background:linear-gradient(135deg,#f0a04b,#e4702f)}&.k-cond>i{background:linear-gradient(135deg,#9a7bff,#6a49e8)}&.k-end>i{background:linear-gradient(135deg,#34bd7f,#1b8f58)}&.k-stop>i{background:linear-gradient(135deg,#ea6a6a,#c53b3b)}
& >span{display:grid;min-width:0;line-height:1.2}& b{font-size:12px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}& small{font-size:11px;color:#5d6a80;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
& >u{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#1f9d63;color:#fff;box-shadow:0 0 0 2px #fff;text-decoration:none;&.is-warn{background:#e2a02e}&.is-bad{background:#d64545}& .ico{width:10px;height:10px}}}

.rz-ac{padding:0;overflow:hidden;display:grid;align-content:start}
.rz-ab2{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid #e8ecf2;
& >b{flex:none;padding:3px 9px;border-radius:6px;font-size:11.5px;letter-spacing:.04em;color:#fff;background:#1f9d63;&.m-post{background:#e48a3b}&.m-put{background:#2a6fdb}&.m-delete{background:#d64545}&.m-patch{background:#7a5af8}}
& >span{flex:1;min-width:0;padding:5px 9px;border-radius:7px;background:#f1f4f8;font:11.5px/1.3 ui-monospace,Consolas,monospace;color:#27315d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& >i{flex:none;display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:7px;background:var(--sv);color:#fff;font-size:11.5px;font-style:normal;font-weight:700;& .ico{width:12px;height:12px}}}
.rz-hd{display:grid;gap:2px;padding:8px 12px;border-bottom:1px solid #eef1f5;& span{display:flex;gap:8px;font-size:11.5px}& small{flex:none;width:92px;color:#5d6a80}& b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.rz-rs{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid #e8ecf2;& small{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:#5d6a80;& .ico{width:12px;height:12px}}}
.rz-cd{border-radius:0;box-shadow:none}
@container rl (max-width:640px){
.rz-ib.has-side{grid-template-columns:minmax(120px,.8fr) minmax(0,1.6fr)}.rz-id{display:none}
.rz-trio{grid-template-columns:minmax(0,1fr)}.rz-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.rz-dk{grid-template-columns:70px minmax(0,1fr)}}
@container rl (max-width:520px){
.rz-ib,.rz-ib.has-side{grid-template-columns:minmax(0,1fr)}.rz-il{display:none}
.rz-sd{display:none}.rz-dk{grid-template-columns:minmax(0,1fr)}
.rz-pl{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.rz-lg2{display:none}.rz-md{min-height:54px;padding:3px}
.rz-jm{overflow-x:auto}.rz-jr{min-width:500px}
.rz-wr{grid-template-columns:minmax(120px,44%) minmax(0,1fr)}
.rz-fs{grid-template-columns:70px minmax(0,1fr) 44px}
.rz-ob,.rz-kr{grid-template-columns:minmax(0,1.5fr) minmax(40px,1fr) 36px}.rz-ob>.wsm-chip,.rz-kr>small{display:none}
.rz-cv{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}.rz-cc{grid-area:auto}
.rz-dn{flex-direction:column;align-items:flex-start}}























































/* rq1:begin */
/* rq: SEO screens (scripts/service-lp/real3.mjs) */
.rq-pc{padding:0;overflow:hidden}
.rq-mt{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));border-bottom:1px solid #e8ecf2;
& >span{display:grid;gap:1px;padding:9px 12px 8px;border-right:1px solid #eef1f5;border-top:3px solid transparent;background:#fafbfd;min-width:0}
& >span:last-child{border-right:0}
& small{font-size:11px;color:#5d6a80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& b{font-size:18px;line-height:1.2;font-weight:650;color:#192045}
& >span.is-on{background:#fff;border-top-color:var(--c);box-shadow:0 1px 0 #fff;& small{color:var(--c);font-weight:600}}}
.rq-pb{padding:10px 12px 8px}
.rq-g{display:grid;justify-items:center;gap:4px;min-width:0;
& .rl-donut b{font-size:19px;color:color-mix(in srgb,var(--g) 78%,#000)}
& .rl-arc:first-of-type{stroke-linecap:round}
& >b{font-size:11.5px;font-weight:600;color:#394578;text-align:center}}
.rq-gr{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;padding:2px 0 10px}
.rq-lm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;border-top:1px solid #eef1f5;padding-top:6px;
& >span{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 0;border-bottom:1px solid #f1f3f7;font-size:12px}
& >span>i{flex:none;width:9px;height:9px;border-radius:50%;background:#1f9d63}
& >span.is-warn>i{background:#e2a02e;border-radius:2px}& >span.is-bad>i{background:#d64545;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
& em{flex:1;min-width:0;font-size:12px;color:#4a566b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& b{font-size:12.5px;font-weight:650}& .is-warn b{color:#9a6700}& .is-bad b{color:#b4372c}}
.rq-op{display:grid;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid #eef1f5;
& >small{font-size:11px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:#5d6a80}
& >span{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(40px,1fr) 62px;align-items:center;gap:10px;font-size:12px}
& em{overflow:hidden;color:#27315d;text-overflow:ellipsis;white-space:nowrap}
& u{display:block;height:6px;border-radius:99px;background:#edf0f5;overflow:hidden}& u i{display:block;height:100%;border-radius:99px;background:#e48a3b}
& b{text-align:right;font-weight:650;color:#9a6700}}
.rq-vt{display:grid;margin-top:4px}
.rq-vr{display:grid;grid-template-columns:minmax(0,1.1fr) 64px minmax(60px,1.2fr) 62px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f1f3f7;
&:last-child{border-bottom:0}
& .rq-vn{display:grid;min-width:0;line-height:1.25;& b{font-size:12.5px}& em{overflow:hidden;font-size:11px;color:#5d6a80;text-overflow:ellipsis;white-space:nowrap}}
& strong{font-size:14px;font-weight:700;&.is-ok{color:#16794f}&.is-warn{color:#9a6700}&.is-bad{color:#b4372c}}
& small{font-size:11px;color:#5d6a80;text-align:right}}
.rq-sg{display:flex;height:8px;border-radius:99px;overflow:hidden;gap:2px;& u{display:block;height:100%;&.g{background:#1f9d63}&.m{background:#e2a02e}&.p{background:#d64545}}}
.rq-sgb{display:flex;height:14px;gap:2px;margin:4px 0 8px;& u{display:block;border-radius:4px;min-width:3px}}
.rq-sgl{display:grid;
& >span{display:grid;grid-template-columns:12px minmax(0,1fr) auto 38px;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f1f3f7;font-size:12px}
& >span:last-child{border-bottom:0}
& i{width:10px;height:10px;border-radius:3px}& em{overflow:hidden;color:#27315d;text-overflow:ellipsis;white-space:nowrap}
& b{font-weight:650}& small{font-size:11px;text-align:right;color:#5d6a80}}

/* address inspection */
.rq-ub{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#f1f4f8;min-width:0;
& .ico{flex:none;width:14px;height:14px;color:#5d6a80}
& b{flex:1;min-width:0;font:600 12px/1.3 ui-monospace,Consolas,monospace;color:#27315d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& i{flex:none;padding:4px 11px;border-radius:7px;background:var(--sv);font-size:11.5px;font-weight:700;color:#fff}
&.is-in{background:#fff;box-shadow:inset 0 0 0 1px #cfd6e2}}
.rq-uv{display:flex;align-items:center;gap:11px;margin:10px 0 6px;padding:11px 12px;border-radius:10px;background:#e9f6ef;
& >i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1f9d63;color:#fff;& .ico{width:16px;height:16px}}
& >span{display:grid;min-width:0;line-height:1.3}& b{font-size:14px;color:#16794f}& em{font-size:12px;color:#3d5a4c}
&.is-warn{background:#fff6e3;& >i{background:#e2a02e}& b{color:#8a5a00}& em{color:#6b5a30}}
&.is-bad{background:#fdecec;& >i{background:#d64545}& b{color:#a52f2f}& em{color:#6b3a3a}}}
.rq-us{border-top:1px solid #eef1f5;&:first-of-type{border-top:0}}
.rq-uh{display:flex;align-items:center;gap:9px;padding:9px 2px;font-size:12.5px;min-width:0;
& >i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e9f6ef;color:#1f9d63;& .ico{width:12px;height:12px}&.is-warn{background:#fff3d6;color:#b07800}&.is-bad{background:#fdecec;color:#d64545}}
& b{flex:none;font-weight:650}& em{flex:1;min-width:0;overflow:hidden;font-size:12px;color:#5d6a80;text-overflow:ellipsis;white-space:nowrap}
& >.ico{flex:none;width:14px;height:14px;color:#5f6c84}}
.rq-us.is-open>.rq-uh>.ico:last-child{transform:rotate(180deg)}
.rq-ur{display:grid;gap:0;margin:0 0 8px 29px;padding:2px 12px;border-radius:9px;background:#f7f9fc;
& >span{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:10px;padding:6px 0;border-bottom:1px solid #eaeef4;font-size:12px}
& >span:last-child{border-bottom:0}& small{font-size:11.5px;color:#5d6a80}& b{font-weight:600;word-break:break-word}}

/* title and description editor */
.rq-ff{display:grid;gap:12px;margin-top:2px}
.rq-fl{display:grid;gap:5px;
& >small{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:650;color:#4a566b;
& em{font-weight:600;&.is-ok{color:#16794f}&.is-warn{color:#9a6700}&.is-bad{color:#b4372c}}}
& >b{padding:8px 11px;border-radius:9px;box-shadow:inset 0 0 0 1px #cfd6e2;background:#fff;font-size:13px;font-weight:500;line-height:1.4;color:#192045}
&.is-tall>b{min-height:62px;line-height:1.5}
& >u{display:block;height:4px;border-radius:99px;background:#edf0f5;overflow:hidden;& i{display:block;height:100%;border-radius:99px;background:#1f9d63}&.is-warn i{background:#e2a02e}&.is-bad i{background:#d64545}}
& .rq-hn{display:flex;align-items:center;gap:6px;font-weight:500;color:#5d6a80;& .ico{width:13px;height:13px;flex:none}&.is-ok .ico{color:#1f9d63}&.is-warn .ico{color:#d18a00}&.is-bad .ico{color:#d64545}}}
.rq-sp{padding:0;overflow:hidden;& .rz-tabs{padding:0 12px}}
.rq-sb{display:grid;gap:8px;padding:12px;background:#fff}
.rq-lb{font-size:11px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:#5d6a80}
.rq-sb .rl-res{padding:6px 2px;&.is-hi{padding:8px 10px}}

/* a real page of the sample shop, with numbered notes */
.rq-pgw{min-width:0;padding:0;border-radius:10px;background:#eef1f6;box-shadow:inset 0 0 0 1px #dfe5ee;overflow:hidden}
.rq-pg{margin:10px;border-radius:9px;background:#fff;box-shadow:0 2px 10px #19204522;overflow:hidden;font-size:12px;--b:#9a6a3a}
.rq-sn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #eee7df;background:#fffaf4;min-width:0;
& >b{font-size:13px;color:#5b3d1f}
& >span{display:flex;gap:11px;margin-left:10px;min-width:0;overflow:hidden;& i{font-size:12px;white-space:nowrap;color:#6b5a48;&.on{font-weight:650;color:#5b3d1f}}}
& >em{flex:none;margin-left:auto;display:grid;place-items:center;width:24px;height:24px;color:#6b5a48;& .ico{width:15px;height:15px}}
& >em+em{margin-left:0}}
.rq-pb2{display:grid;gap:10px;padding:12px 14px 14px}
.rq-hl{position:relative;display:block;outline:1.5px dashed #b6c0d0;outline-offset:3px;border-radius:3px;
&:has(>.rq-mk.is-ok){outline-color:#7cc9a3}&:has(>.rq-mk.is-warn){outline-color:#e7b657}&:has(>.rq-mk.is-bad){outline-color:#e48a8a}}
span.rq-hl{display:flex}
.rq-mk{position:absolute;left:-9px;top:-10px;z-index:3;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#1f9d63;font-size:11px;font-weight:700;font-style:normal;text-decoration:none;color:#fff;box-shadow:0 0 0 2px #fff;
&.is-warn{background:#d18a00}&.is-bad{background:#d64545}&.is-n{background:#5d6a80}}
.rq-bc{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#7a6a58;white-space:nowrap;overflow:hidden;& em{font-style:normal;color:#b3a594}& i:last-child{color:#4a3a28;font-weight:600}}
.rq-h1{margin:0;font-size:19px;line-height:1.25;font-weight:700;color:#2a1d10}
.rq-h2{margin:2px 0 0;font-size:14.5px;font-weight:700;color:#2a1d10}
.rq-in{margin:0;font-size:12.5px;line-height:1.5;color:#4a3d30;& a{color:#8a5a2b;text-decoration:underline}}
.rq-ls{display:grid;gap:5px;& i{display:block;height:7px;border-radius:99px;background:#eee7df;&:nth-child(2){width:92%}&:nth-child(3){width:64%}}}
.rq-pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
.rq-pi{display:grid;gap:7px;min-width:0;& .mk-img{border-radius:9px}}
.rq-pi>.rq-hl{display:block}
.rq-th{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;& i{display:block;overflow:hidden;border-radius:7px;box-shadow:0 0 0 1px #e6ddd2;&:first-child{box-shadow:0 0 0 2px var(--b)}}}
.rq-pt{display:grid;gap:8px;min-width:0;align-content:start;
& h6{margin:0;font-size:18px;line-height:1.25;font-weight:700;color:#2a1d10}
& p{margin:0;font-size:12.5px;line-height:1.5;color:#4a3d30}}
.rq-rg{position:relative;display:flex;align-items:center;gap:8px;min-width:0;& em{font-size:12px;color:#6b5a48;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.rq-st{display:inline-flex;gap:1px;& i{display:inline-grid;& .ico{width:14px;height:14px;fill:#d8cdbf;stroke:none}&.on .ico{fill:#e0a020}}}
.rq-pr{display:flex;align-items:center;gap:10px;& b{font-size:21px;font-weight:700;color:#8a3a1a}}
.rq-vs{display:flex;gap:6px;& i{padding:5px 12px;border-radius:7px;box-shadow:inset 0 0 0 1px #d9cdbf;font-size:12px;&.on{box-shadow:inset 0 0 0 2px var(--b);font-weight:650;color:#5b3d1f}}}
.rq-bt{display:flex;gap:8px;& i{padding:8px 16px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--b);font-size:12.5px;font-weight:700;color:#7a4e22;&.on{background:var(--b);color:#fff}}}
.rq-rel{display:grid;gap:7px;& >small{font-size:12px;font-weight:700;color:#2a1d10}& >span{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.rq-pk{display:grid;gap:3px;min-width:0;& i{display:block;overflow:hidden;border-radius:8px}& b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2a1d10}& em{font-size:12px;font-style:normal;font-weight:650;color:#8a3a1a}}
.rq-fc{align-items:center;gap:7px;& i{padding:5px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px #d9cdbf;font-size:12px;color:#4a3d30}& em{margin-left:auto;font-size:11.5px;color:#7a6a58}}
.rq-gd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.rq-by{align-items:center;gap:7px;font-size:11.5px;color:#6b5a48;& .rl-av{width:22px;height:22px;font-size:11px}}
.rq-ans{margin:0;padding:10px 12px;border-radius:9px;background:#fbf3e6;font-size:12.5px;line-height:1.5;color:#3a2c1c}
.rq-tc{display:flex;flex-wrap:wrap;gap:4px 14px;& i{font-size:12px;color:#8a5a2b;text-decoration:underline}}
.rq-ip{overflow:hidden;border-radius:9px}
.rq-ip .mk-img{width:100%}
.rq-fq{display:grid;gap:6px;& i{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-radius:8px;box-shadow:inset 0 0 0 1px #e1d7ca;font-size:12.5px;font-weight:600;color:#2a1d10;& .ico{width:14px;height:14px;color:#8a7a68}}}
.rq-sh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:center;
& .rq-hs{display:grid;gap:9px;min-width:0;& p{margin:0;font-size:12.5px;line-height:1.5;color:#4a3d30}}
& >i{display:block;overflow:hidden;border-radius:10px}}
.rq-sv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;& span{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:9px;background:#fbf3e6;font-size:12px;color:#5b3d1f;& .ico{width:16px;height:16px;flex:none;color:var(--b)}}}
.rq-sx{align-items:center;flex-wrap:wrap;gap:6px 10px;& small{font-size:12px;font-weight:700;color:#2a1d10;margin-right:2px}& i{padding:4px 10px;border-radius:7px;background:#f4ede3;font-size:12px;color:#5b3d1f}}
.rq-nl{display:grid}
.rq-nt{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #f1f3f7;
&:last-child{border-bottom:0}
& .rq-mk{position:static;flex:none;margin-top:1px;box-shadow:none}
& >span{display:grid;gap:1px;min-width:0;line-height:1.35}& b{font-size:12.5px}& em{font-size:12px;color:#556176}}

/* timeline */
.rq-rp{padding:10px 0 4px}
.rq-rp>.rl-ch{padding:0 12px}
.rq-rm{position:relative;display:grid;--lc:150px;
& .rq-rr{display:grid;grid-template-columns:var(--lc) minmax(0,1fr);align-items:stretch;min-height:30px;border-top:1px solid #eef1f5;&.is-head{border-top:0;min-height:24px}}
& .rq-rl{display:flex;align-items:center;gap:7px;min-width:0;padding:0 8px 0 12px;font-size:12px;color:#27315d;
& span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}& .rl-av{width:20px;height:20px;font-size:11px}}
& .is-group{background:#f6f8fb;min-height:28px;& .rq-rl{font-weight:650;color:#192045}& u{flex:none;width:8px;height:8px;border-radius:50%;background:#9aa7bc;&.is-ok{background:#1f9d63}&.is-warn{background:#e2a02e}&.is-bad{background:#d64545}}}
& .rq-rt{position:relative;display:grid;grid-template-columns:repeat(var(--w),minmax(0,1fr));border-left:1px solid #eef1f5;
& em{align-self:center;font-size:11px;font-style:normal;text-align:center;color:#5f6c84}}
& .rq-rr:not(.is-head):not(.is-group) .rq-rt{background-image:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--w) - 1px),#f1f3f7 0 calc(100% / var(--w)))}
& .rq-rt>u{position:absolute;top:50%;height:16px;margin-top:-8px;border-radius:5px;background:#9aa7bc;&.is-ok{background:#1f9d63}&.is-warn{background:#e2a02e}&.is-bad{background:#d64545}&.is-n{background:linear-gradient(90deg,var(--sv),var(--sv2))}}
& .rq-td{position:absolute;top:0;bottom:0;width:0;border-left:2px solid #d64545;pointer-events:none;
& b{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:99px;background:#c63838;font-size:11px;font-weight:650;color:#fff;white-space:nowrap}}}

/* code with a tester */
.rq-cf{border-radius:10px}
.rq-tr{display:grid;margin-top:8px;
& >span{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-top:1px solid #eef1f5;min-width:0
;& >i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e9f6ef;color:#1f9d63;& .ico{width:12px;height:12px}}
&.is-warn>i{background:#fff3d6;color:#b07800}&.is-bad>i{background:#fdecec;color:#d64545}
& >span{display:grid;gap:1px;min-width:0}& code{font:600 12px/1.35 ui-monospace,Consolas,monospace;color:#27315d;word-break:break-all}& em{font-size:12px;color:#556176}}}

/* knowledge card */
.rq-kn{padding:0;overflow:hidden}
.rq-kh{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2px;height:96px;& .mk-img{height:100%;border-radius:0}& .mk-img:first-child{grid-row:1}}
.rq-kb{display:grid;gap:8px;padding:12px}
.rq-kt{display:flex;align-items:center;gap:9px;& .mk-fav{width:34px;height:34px;font-size:15px}& >span{display:grid;line-height:1.25;& b{font-size:16px}& em{font-size:12px;color:#5d6a80}}}
.rq-kb>p{margin:0;font-size:12.5px;line-height:1.5;color:#394578}
.rq-kr{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;font-size:12px;& small{font-size:12px;color:#5d6a80}& b{font-weight:600}}
.rq-ks{display:flex;flex-wrap:wrap;gap:6px;& i{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px #d6dde8;font-size:11.5px;color:#27315d;& .ico{width:12px;height:12px;color:#5d6a80}}}

@container rl (max-width:520px){
.rq-pd,.rq-sh{grid-template-columns:minmax(0,1fr)}
.rq-lm{grid-template-columns:minmax(0,1fr)}
.rq-vr{grid-template-columns:minmax(0,1fr) 54px;row-gap:4px;& .rq-sg{grid-column:1/-1;grid-row:2}& small{display:none}}
.rq-op>span{grid-template-columns:minmax(0,1fr) 60px;& u{display:none}}
.rq-sn>span{display:none}
.rq-gd{grid-template-columns:repeat(2,minmax(0,1fr))}
.rq-rm{--lc:104px}}
.rq-nb{margin:8px 0 0;font-size:11.5px;color:#5d6a80}
.rq-shw{display:grid;place-items:center;padding:8px 0 12px;border-radius:9px;background:#eef1f6;margin-bottom:10px}
.rq-shot{display:grid;gap:6px;width:112px;padding:8px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #cfd6e2,0 4px 12px #19204522;
& i{display:block;border-radius:99px;background:#e8e0d4}
& .rq-sb1{height:8px;width:60%;background:#cdbba3}& .rq-sl1{height:6px;width:90%}& .rq-sl2{height:6px;width:60%}& .rq-sb2{height:14px;border-radius:6px;background:#9a6a3a}
& .mk-img{border-radius:7px}}
.rq-cf .rl-cl.is-hl{background:#2a3567;box-shadow:inset 3px 0 0 #f0b44a}
.rl-sp>.rq-cf{align-self:start}
.rq-cl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px;margin-top:2px}
.rq-cc{display:grid;gap:7px;align-content:start;padding:10px 11px;border-radius:10px;box-shadow:inset 0 0 0 1px #e3e8ef;background:#fff;min-width:0;
&.is-on{box-shadow:inset 0 0 0 2px var(--sv);background:#f4faf8}
& >b{font-size:13px;line-height:1.25}& >small{font-size:11.5px;color:#5d6a80;margin-top:-5px}
& .rq-tg{display:flex;flex-wrap:wrap;gap:4px;& i{padding:2px 8px;border-radius:99px;background:#edf0f5;font-size:11px;color:#394578}}
& .rq-cp{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;& code{font:600 11px/1.3 ui-monospace,Consolas,monospace;color:#4a566b;min-width:0;overflow:hidden;text-overflow:ellipsis}}}
.rq-sq{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:8px 14px;border-radius:99px;box-shadow:0 1px 6px #19204522,inset 0 0 0 1px #dfe3ea;background:#fff;& .ico{flex:none;width:15px;height:15px;color:#5d6a80}& b{font-size:13px;font-weight:500}}
/* rq1:end */

/* rw1:begin */
/* rw: Website & Landing Page screens (scripts/website-lp/show*.mjs) */
.rw-dt{padding:0;overflow:hidden;display:grid;align-content:start}
.rw-cv{padding:12px 12px 14px;background:linear-gradient(#eef1f6,#e7ebf2);display:grid;justify-items:center;position:relative}
.rw-fr{position:relative;width:100%;display:grid;gap:9px;padding:0 0 11px 26px;background:linear-gradient(90deg,#eceff5 26px,#fff 26px);border-radius:9px;box-shadow:0 0 0 1px #d9dfe9,0 8px 22px #19204524;overflow:hidden;color:#192045;
& .rw-nv{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid #eef1f5;font-size:12px;
& >b{font-size:12.5px}& >span{display:flex;gap:9px;margin-left:auto;color:#4a566b}& >em{font-style:normal;padding:3px 8px;border-radius:99px;background:#f1f4f8;font-size:11px}}
& .rw-hr{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;padding:4px 11px;align-items:center;
& small{display:block;font-size:11px;color:#a8560a;font-weight:650;margin-bottom:3px}
& h6{margin:0 0 4px;font-size:16px;line-height:1.2;color:#192045}
& p{margin:0 0 8px;font-size:11.5px;color:#556178;line-height:1.35}
& .rw-im{display:block;border-radius:8px;overflow:hidden}}
& .rw-bt{display:flex;gap:6px;flex-wrap:wrap;& i{font-style:normal;padding:5px 11px;border-radius:7px;font-size:11.5px;font-weight:650;background:#f1f4f8;color:#27315d}& i.on{background:#1f3a2e;color:#fff}}
& .rw-cd{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 11px;
& >span{display:grid;gap:3px;min-width:0}& b{font-size:11.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}& em{font-style:normal;font-size:11px;color:#5d6a80}}
&.is-wire{background:linear-gradient(90deg,#e8ecf2 26px,#fafbfc 26px);
& .rw-nv{color:transparent}
& .rw-bar{display:block;height:9px;border-radius:5px;background:#d6dce6;margin:0 0 7px;&.s{height:7px;background:#e3e7ee}}
& .rw-ph{display:grid;place-items:center;align-content:center;gap:2px;aspect-ratio:16/10;border-radius:8px;background:#e3e7ee;color:#7b879c;font-size:11px;box-shadow:inset 0 0 0 1px #cfd6e2;& .ico{width:18px;height:18px}}
& .rw-bt i{background:#fff;box-shadow:inset 0 0 0 1.5px #aab4c4;color:#556178}}
& .rw-pin{position:absolute;left:5px;z-index:2;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#e4432f;color:#fff;font-size:11px;font-weight:700;font-style:normal;box-shadow:0 0 0 2px #fff,0 2px 6px #0004;text-decoration:none}}
.rw-nts{display:grid;gap:7px;padding:2px 12px 12px;
& >span{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;font-size:12px;line-height:1.3}
& .rw-pn{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e4432f;color:#fff;font-size:11px;font-weight:700}
& b{display:block;font-size:12px}& em{display:block;font-style:normal;color:#5d6a80;font-size:11.5px;margin-top:1px}}

/* design system */
.rw-ds{display:grid;gap:10px;padding:2px 12px 12px;
& >small{font-size:11px;font-weight:650;color:#5d6a80;letter-spacing:.05em;text-transform:uppercase}}
.rw-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
& >span{display:grid;gap:1px;min-width:0;border-radius:9px;box-shadow:0 0 0 1px #e1e6ee;overflow:hidden;background:#fff}
& i{display:block;height:34px}
& b{font-size:12px;padding:5px 8px 0}& em{font-size:11px;font-style:normal;color:#5d6a80;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,Consolas,monospace}& em:last-child{padding-bottom:6px;color:#27315d;font-weight:650}}
.rw-ty{display:grid;gap:3px;padding:8px 10px;border-radius:9px;background:#faf6ef;box-shadow:0 0 0 1px #eadfce;
& >span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#192045;white-space:nowrap}
& em{font-style:normal;font-size:11px;color:#7b5d38;font-family:ui-monospace,Consolas,monospace}
& .t1{font-size:21px;font-weight:700;line-height:1.2}& .t2{font-size:16px;font-weight:650}& .t3{font-size:13px}& .t4{font-size:11.5px;color:#556178}}
.rw-bx{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
& i{font-style:normal;padding:6px 13px;border-radius:8px;font-size:12px;font-weight:650;background:#1f3a2e;color:#fff;&.is-2{background:#fff;color:#1f3a2e;box-shadow:inset 0 0 0 1.5px #1f3a2e}&.is-off{background:#e6e9ee;color:#5f6c84}&.is-bad{background:#b42318}}}
.rw-fld{display:grid;gap:3px;& small{font-size:11px;color:#556178}
& span{padding:6px 9px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #c9d0dc;font-size:12px}
&.is-f span{box-shadow:inset 0 0 0 2px #2563c9,0 0 0 3px #2563c933}
&.is-e span{box-shadow:inset 0 0 0 2px #b42318;background:#fff7f6}& em{font-style:normal;font-size:11.5px;color:#b42318}}
.rw-3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}

/* scroll depth */
.rw-sc{display:grid;gap:0;padding:2px 12px 12px;position:relative;
& >span{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 10px;min-height:44px;
background:hsl(calc(215 - var(--v) * 2.15) 82% 56% / .32);box-shadow:inset 0 -1px 0 #ffffff99}
& >span:first-child{border-radius:9px 9px 0 0}& >span:last-child{border-radius:0 0 9px 9px}
& .rw-k{display:grid;gap:3px;min-width:0;& b{font-size:12.5px}& i{display:block;height:6px;border-radius:4px;background:#0000001f;&.s{width:60%}}}
& em{font-style:normal;display:grid;justify-items:end;font-size:11px;color:#2f3961;& b{font-size:15px;line-height:1.1;color:#192045}}
& .is-hi{outline:2px solid #192045;outline-offset:-2px;z-index:1}}

/* uptime days */
.rw-up{display:grid;gap:7px;padding:2px 12px 12px;
& .rw-days{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;height:38px;& i{border-radius:3px;background:#1f9d63;&.is-warn{background:#e2a02e}&.is-bad{background:#d64545}}}
& .rw-dl{display:flex;justify-content:space-between;font-size:11px;color:#5d6a80}}

/* page editor */
.rw-ed{display:grid;gap:0;padding:0;overflow:hidden}
.rw-ed-top{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid #e8ecf2;font-size:12px;
& >b{font-size:12.5px}& >span{margin-left:auto;display:flex;gap:6px}& i{font-style:normal;padding:4px 10px;border-radius:7px;background:#f1f4f8;font-weight:650;font-size:11.5px;&.pri{background:var(--sv);color:#fff}}}
.rw-pgx{display:grid;gap:7px;padding:11px;background:#eef1f6}
.rw-bk{position:relative;display:grid;gap:5px;padding:9px 11px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #dfe4ec;
&.is-on{box-shadow:0 0 0 2px var(--sv),0 6px 16px #2563c933;margin-top:12px}
& h6{margin:0;font-size:14.5px;line-height:1.2}& p{margin:0;font-size:11.5px;color:#556178;line-height:1.35}
& .rw-tbx{position:absolute;left:8px;top:-13px;display:flex;align-items:center;gap:7px;padding:3px 9px;border-radius:7px;background:var(--sv);color:#fff;font-size:11px;font-weight:650;& .ico{width:12px;height:12px}}
& .rw-3x{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;& span{display:grid;gap:2px;padding:7px 8px;border-radius:8px;background:#f5f7fa;font-size:11.5px;line-height:1.3;& .ico{width:16px;height:16px;color:color-mix(in srgb,var(--sv) 84%,#000)}& b{font-size:12px}}}
& .rw-2x{display:grid;grid-template-columns:1.1fr 1fr;gap:9px;align-items:center}}
.rw-set{display:grid;gap:8px;padding:11px;border-left:1px solid #e8ecf2;align-content:start;
& >small{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:#5d6a80}}
.rw-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;border-radius:8px;background:#f5f7fa;font-size:12px;& b{font-size:12px;font-weight:650}& em{font-style:normal;color:#556178;font-size:11.5px}
& .rw-sg{display:flex;gap:3px;& i{font-style:normal;padding:2px 8px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px #d3dae5;font-size:11.5px;&.on{background:var(--sv);color:#fff;box-shadow:none}}}}
.rw-lock{display:flex;gap:7px;align-items:flex-start;padding:7px 9px;border-radius:8px;background:#fff7e8;box-shadow:inset 0 0 0 1px #f0d9a8;font-size:11.5px;line-height:1.35;color:#6d4f12;& .ico{flex:none;width:14px;height:14px;margin-top:1px}}

/* A/B variants */
.rw-vr{display:grid;gap:7px;padding:10px 11px 11px;
& .rw-vh{display:flex;align-items:center;justify-content:space-between;gap:8px;& b{font-size:12.5px}}
& .rw-vp{display:grid;gap:6px;padding:8px 9px 9px;border-radius:8px;background:#faf6ef;box-shadow:inset 0 0 0 1px #eadfce;& h6{margin:0;font-size:12.5px;line-height:1.2}& .rw-im{display:block;border-radius:6px;overflow:hidden}
& .rw-bt{display:flex;gap:6px;& i{font-style:normal;padding:5px 12px;border-radius:7px;font-size:11.5px;font-weight:650;background:#1f3a2e;color:#fff}}
& .rw-pr{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid #eadfce;font-size:11.5px;& b{font-weight:600}& em{font-style:normal;color:#556178}}
& .rw-fd{display:flex;align-items:center;gap:6px;margin:1px -9px;color:#c23a28;font-size:11px;font-weight:650;&::before,&::after{content:"";border-top:1.5px dashed #e4432f}&::before{flex:0 0 8px}&::after{flex:1}& em{font-style:normal}}}
& .rw-vm{display:flex;align-items:baseline;gap:8px;& b{font-size:23px;line-height:1;font-weight:700}& em{font-style:normal;font-size:11.5px;color:#5d6a80}}
&.is-win{box-shadow:inset 0 0 0 2px #1f9d63;border-radius:10px}}

/* extras: states board, picture helpers, editor toolbar actions */
.rw-sts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;padding:2px 12px 12px}
.rw-stb{display:grid;justify-items:center;align-content:start;gap:4px;text-align:center;padding:11px 7px 10px;border-radius:10px;background:#f5f7fa;box-shadow:inset 0 0 0 1px #e1e6ee;min-width:0;
& >i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e6ebf2;color:#5d6a80;& .ico{width:16px;height:16px}}
& b{font-size:12.5px;line-height:1.2}& em{font-style:normal;font-size:11.5px;line-height:1.3;color:#556178}
&.is-empty >i{background:#e4edff;color:#2563c9}&.is-err >i{background:#fdeceb;color:#b42318}&.is-ok >i{background:#e3f5ec;color:#1f7a55}&.is-deny >i{background:#fff1d6;color:#8a5a00}}
.rw-pic{display:block;border-radius:8px;overflow:hidden}
.rw-md{padding:2px 12px 8px;& >*{display:block;border-radius:9px;overflow:hidden}}
.rw-bk .rw-3x span.rw-pic{padding:0;background:none}
.rw-bk .rw-3x span.rw-fi{background:#fff;box-shadow:inset 0 0 0 1.5px #c9d0dc;color:#5d6a80;padding:8px 9px}
.rw-bk .rw-tbx u{text-decoration:none;font-style:normal;padding-left:7px;border-left:1px solid #ffffff66;font-weight:600}

.rz-ac{min-width:0;grid-template-columns:minmax(0,1fr)}

/* layout shift: the same phone page before and after */
.rw-cl{display:grid;gap:6px;padding:9px;border-radius:10px;background:#f5f7fa;box-shadow:inset 0 0 0 1px #e1e6ee;
& .rw-cb{display:flex;align-items:center;gap:6px;padding:0 9px;border-radius:7px;background:#e3e8f0;color:#556178;font-size:11.5px;font-weight:600;min-height:22px}
& .rw-hd{min-height:26px;background:#1f3a2e;color:#fff}
& .rw-late{min-height:46px;background:#fdeceb;color:#b42318;box-shadow:inset 0 0 0 1.5px #e4432f;border-style:dashed}
& .rw-rsv{min-height:46px;background:#e8f0ff;color:#2563c9;box-shadow:inset 0 0 0 1.5px #2563c9}
& .rw-pic{border-radius:7px}
& .rw-sh{display:flex;align-items:center;gap:6px;color:#b42318;font-size:11.5px;font-weight:650;&::before{content:"";flex:none;width:2px;height:16px;background:#e4432f;border-radius:2px}}
& .rw-txt{display:grid;gap:5px;& i{display:block;height:7px;border-radius:4px;background:#d6dce6}}}
/* rw1:end */

/* sx1:begin */
/* sx: realistic site pages for the Website & Landing Page group (scripts/website-lp/site.mjs) */
.sx{display:block;min-width:0}
.sx .mk-page{padding:0;background:#fff}
.sx-pg{position:relative;display:grid;align-content:start;gap:0;color:#192045;font-size:12px;line-height:1.35;text-align:left;
& *{box-sizing:border-box}
& h2,& h3,& h4,& p{margin:0}
& .sx-top{display:flex;justify-content:space-between;gap:8px;padding:5px 14px;background:#1f3a2e;color:#e8efe9;font-size:11px;& span{display:inline-flex;align-items:center;gap:5px;& .ico{width:11px;height:11px}}}
& .sx-nav{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #eef0f4;font-size:12px;
& >b{flex:none;font-size:13px}& .sx-mn{display:flex;gap:11px;margin-left:auto;color:#4a566b;min-width:0;& i{font-style:normal;white-space:nowrap;&.on{color:#1f3a2e;font-weight:700;box-shadow:0 2px 0 #a8560a}}}
& .sx-ct{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:650;padding:3px 8px;border-radius:99px;background:#f6efe6;& .ico{width:13px;height:13px}}}
& .sx-bt{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-style:normal;padding:6px 13px;border-radius:8px;background:#1f3a2e;color:#fff;font-size:12px;font-weight:650;white-space:nowrap;
&.is-line{background:#fff;color:#1f3a2e;box-shadow:inset 0 0 0 1.5px #1f3a2e}&.is-acc{background:#a8560a}&.is-wide{display:flex;padding:9px 14px;font-size:12.5px}&.is-off{background:#e6e9ee;color:#5f6c84}}
& .sx-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;align-items:center;padding:16px 14px 14px;background:linear-gradient(#fbf7f0,#fff);
& small{display:block;color:#a8560a;font-weight:700;font-size:11px;margin-bottom:4px}
& h2{font-size:21px;line-height:1.15;margin-bottom:7px;color:#16241c}
& p{color:#556178;font-size:12px;line-height:1.4;margin-bottom:10px}
& .sx-btns{display:flex;gap:7px;flex-wrap:wrap}
& .sx-hi{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px #19204522}
& .sx-bd{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:11px;font-weight:650;padding:4px 8px;border-radius:7px;background:#fff;color:#192045;box-shadow:0 2px 8px #0003}}
& .sx-st{display:flex;gap:10px;padding:10px 14px;background:#f6efe6;align-items:center;
& >span{display:grid;gap:0;font-size:11px;color:#6a5a45;line-height:1.25;& b{font-size:17px;color:#192045;line-height:1.15}}& em{margin-left:auto;font-style:normal;font-size:11px;color:#7b5d38}}
& .sx-sec{display:grid;gap:8px;padding:14px;& h3{font-size:15px;line-height:1.2}& >small{color:#5d6a80;font-size:11.5px}}
& .sx-cds{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
& >span{display:grid;gap:3px;align-content:start;min-width:0;& .mk-img{border-radius:9px;overflow:hidden}& b{font-size:12.5px;line-height:1.2}& em{font-style:normal;color:#5d6a80;font-size:11.5px}& u{text-decoration:none;color:#a8560a;font-weight:650;font-size:11.5px}}}
& .sx-qt{display:flex;gap:11px;align-items:center;margin:0 14px 12px;padding:11px 13px;border-radius:12px;background:#faf6ef;box-shadow:inset 0 0 0 1px #eadfce;
& >i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1f3a2e;color:#fff;font-style:normal;font-weight:700}
& p{font-size:12.5px;color:#192045;margin:0 0 2px}& small{color:#5d6a80;font-size:11.5px}}
& .sx-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 14px 12px;padding:12px 14px;border-radius:12px;background:#1f3a2e;color:#fff;& b{font-size:14px;line-height:1.25}& .sx-bt{background:#fff;color:#1f3a2e}}
& .sx-crumb{padding:7px 14px;color:#5d6a80;font-size:11.5px;& b{color:#192045;font-weight:600}}
& .sx-two{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;padding:4px 14px 14px;align-items:start}
& .sx-h1{font-size:19px;line-height:1.18;margin-bottom:6px;color:#16241c}
& .sx-ul{display:grid;gap:5px;margin:8px 0;padding:0;list-style:none;& li{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;& .ico{flex:none;width:14px;height:14px;margin-top:2px;color:#1f9d63}}}
& .sx-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0;& .mk-img{border-radius:9px;overflow:hidden}}
& .sx-stp{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;& >span{display:grid;gap:2px;padding:7px 8px;border-radius:9px;background:#f5f7fa;font-size:11.5px;line-height:1.25;& u{text-decoration:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1f3a2e;color:#fff;font-size:11px;font-weight:700}& b{font-size:12px}}}
& .sx-fm{display:grid;gap:7px;padding:12px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px #e1e6ee,0 10px 24px #1920451f;
& >b{font-size:14px}& >small{color:#5d6a80;font-size:11.5px;line-height:1.3}
& .sx-fd{display:grid;gap:2px;& small{font-size:11px;color:#556178}& span{padding:6px 9px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #c9d0dc;font-size:12px;color:#5f6c84}&.is-f span{box-shadow:inset 0 0 0 2px #2a6fdb;color:#192045}&.is-e span{box-shadow:inset 0 0 0 2px #d64545;background:#fff5f4;color:#192045}& em{font-style:normal;color:#b42318;font-size:11.5px}&.is-v span{color:#192045}}
& .sx-ck{display:flex;gap:6px;align-items:flex-start;font-size:11.5px;color:#556178;& i{flex:none;width:14px;height:14px;border-radius:4px;background:#1f3a2e;color:#fff;display:grid;place-items:center;& .ico{width:10px;height:10px}}}}
& .sx-fl{display:flex;gap:6px;flex-wrap:wrap;padding:2px 14px 8px;& i{font-style:normal;padding:4px 11px;border-radius:99px;background:#f1f4f8;color:#27315d;font-size:11.5px;font-weight:600;&.on{background:#1f3a2e;color:#fff}}}
& .sx-gr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:2px 14px 12px;
& >span{display:grid;gap:3px;align-content:start;min-width:0;& .sx-pic{position:relative;display:block;border-radius:10px;overflow:hidden;& .mk-img{display:block}& u{position:absolute;left:6px;top:6px;text-decoration:none;padding:2px 7px;border-radius:99px;background:#fff;color:#192045;font-size:11px;font-weight:650;box-shadow:0 1px 5px #0003}}& b{font-size:12.5px;line-height:1.2}& em{font-style:normal;color:#5d6a80;font-size:11.5px}}}
& .sx-shop{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:2px 14px 12px;align-items:start}
& .sx-sd{display:grid;gap:9px;align-content:start;
& >div{display:grid;gap:4px;& >b{font-size:12px}& span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#303b6e;& i{flex:none;width:13px;height:13px;border-radius:4px;box-shadow:inset 0 0 0 1.5px #aab4c4;&.on{background:#1f3a2e;box-shadow:none;position:relative}}& em{margin-left:auto;font-style:normal;color:#5f6c84}}}
& .sx-rg{height:5px;border-radius:3px;background:#e1e6ee;position:relative;margin:6px 0 2px;&::after{content:"";position:absolute;left:12%;right:30%;top:0;bottom:0;border-radius:3px;background:#1f3a2e}}& .sx-rv{display:flex;justify-content:space-between;font-size:11.5px;color:#556178}}
& .sx-sb{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 14px 8px;font-size:12px;color:#556178;& b{color:#192045}& span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;box-shadow:inset 0 0 0 1.5px #c9d0dc;color:#192045;font-weight:600}}
& .sx-pd{display:grid;grid-template-columns:1fr 1.05fr;gap:16px;padding:6px 14px 12px;align-items:start}
& .sx-pdg{display:grid;gap:7px;& .mk-img{border-radius:11px;overflow:hidden}& .sx-th{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;& .mk-img{border-radius:8px;&.on{box-shadow:0 0 0 2px #1f3a2e}}}}
& .sx-pi{display:grid;gap:7px;align-content:start;
& .sx-rt{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#5d6a80;& .ico{width:13px;height:13px;color:#e2a02e}}
& .sx-pr{display:flex;align-items:baseline;gap:8px;& b{font-size:21px;color:#a8560a}& s{font-size:12px;color:#5f6c84}& i{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:#fdeceb;color:#b42318}}
& .sx-op{display:grid;gap:4px;& >small{font-size:11.5px;color:#556178;font-weight:600}& span{display:flex;gap:6px;flex-wrap:wrap;& i{font-style:normal;padding:5px 11px;border-radius:8px;box-shadow:inset 0 0 0 1.5px #c9d0dc;font-size:12px;&.on{box-shadow:inset 0 0 0 2px #1f3a2e;background:#f1f6f2;font-weight:650}&.is-x{color:#aab4c4;text-decoration:line-through}}}}
& .sx-qy{display:flex;gap:8px;align-items:center;& >span{display:inline-flex;align-items:center;border-radius:8px;box-shadow:inset 0 0 0 1.5px #c9d0dc;overflow:hidden;& i{font-style:normal;padding:6px 11px;font-size:13px}& b{padding:6px 11px;font-size:12.5px;box-shadow:inset 1.5px 0 #c9d0dc,inset -1.5px 0 #c9d0dc}}& small{color:#1f7a55;font-size:11.5px;font-weight:600}}
& .sx-dl{display:grid;gap:3px;padding:8px 10px;border-radius:10px;background:#f5f7fa;font-size:11.5px;color:#303b6e;& span{display:flex;gap:6px;align-items:center;& .ico{flex:none;width:13px;height:13px;color:#5d6a80}}}}
& .sx-tbs{display:flex;gap:14px;padding:0 14px;border-bottom:1px solid #eef0f4;font-size:12px;color:#5d6a80;& i{font-style:normal;padding:7px 0;&.on{color:#192045;font-weight:700;box-shadow:0 2px 0 #1f3a2e}}}
& .sx-co{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;padding:10px 14px 14px;align-items:start}
& .sx-stps{display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid #eef0f4;font-size:12px;color:#5f6c84;& u{text-decoration:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e6e9ee;color:#556178;font-size:11px;font-weight:700;margin-right:5px}& span{display:inline-flex;align-items:center;&.on{color:#192045;font-weight:700;& u{background:#1f3a2e;color:#fff}}&.done u{background:#1f9d63;color:#fff}}& em{flex:1;height:1.5px;background:#e1e6ee;min-width:12px}}
& .sx-fs{display:grid;gap:8px;& h4{font-size:13.5px}& .sx-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}}
& .sx-rd{display:grid;gap:5px;& span{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:9px;box-shadow:inset 0 0 0 1.5px #dde2ea;font-size:12px;& i{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #aab4c4}&.on{box-shadow:inset 0 0 0 2px #1f3a2e;background:#f1f6f2;& i{box-shadow:inset 0 0 0 4px #1f3a2e}}& em{margin-left:auto;font-style:normal;color:#5d6a80;font-size:11.5px}}}
& .sx-sm{display:grid;gap:8px;padding:12px;border-radius:13px;background:#faf6ef;box-shadow:inset 0 0 0 1px #eadfce;
& .sx-li{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;font-size:12px;& .mk-img{border-radius:7px;overflow:hidden}& em{font-style:normal;color:#5d6a80;font-size:11.5px;display:block}& b{font-weight:650}}
& .sx-ln{display:flex;justify-content:space-between;font-size:12px;color:#556178;&.t{color:#192045;font-size:14px;font-weight:700;padding-top:7px;border-top:1px solid #eadfce}}
& .sx-cp{display:flex;gap:6px;& span{flex:1;padding:6px 9px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #c9d0dc;font-size:12px;color:#5f6c84}& i{font-style:normal;padding:6px 11px;border-radius:8px;background:#e6e9ee;font-weight:650;font-size:12px}}}
& .sx-ad{display:grid;gap:2px;margin:12px 14px 6px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e1e6ee,0 6px 16px #19204518;
& small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#556178;& b{padding:1px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px #8c96a6;font-size:11px;color:#192045}}
& h4{font-size:14px;color:#1a4fbf;line-height:1.25;font-weight:600}& p{font-size:12px;color:#4a566b}}
& .sx-ar{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 14px;color:#2563c9;font-size:11.5px;font-weight:650;& .ico{width:14px;height:14px}&::before,&::after{content:"";flex:1;border-top:1.5px dashed #c5d3ee}}
& .sx-tr{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:#303b6e;& span{display:inline-flex;align-items:center;gap:4px;& .ico{width:13px;height:13px;color:#1f9d63}}}
& .sx-bn{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
& >span{display:grid;gap:4px;align-content:start;padding:11px;border-radius:12px;background:#faf6ef;box-shadow:inset 0 0 0 1px #eadfce;& >i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#1f3a2e;color:#fff;& .ico{width:16px;height:16px}}& b{font-size:12.5px;line-height:1.2}& em{font-style:normal;color:#556178;font-size:11.5px;line-height:1.3}}}
& .sx-rv2{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
& >span{display:grid;gap:5px;align-content:start;padding:10px;border-radius:12px;box-shadow:0 0 0 1px #e1e6ee;background:#fff;& .sx-rt{display:flex;gap:2px;color:#e2a02e;& .ico{width:12px;height:12px}}& p{font-size:12px;color:#192045}& small{display:flex;align-items:center;gap:6px;color:#5d6a80;font-size:11.5px;& i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e8efe9;color:#1f3a2e;font-style:normal;font-weight:700;font-size:11px}}}}
& .sx-sum{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#faf6ef;box-shadow:inset 0 0 0 1px #eadfce;& b{font-size:25px;line-height:1}& span{display:grid;gap:1px;font-size:11.5px;color:#556178}& .sx-rt{display:flex;gap:2px;color:#e2a02e;& .ico{width:13px;height:13px}}& .sx-tg{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;& i{font-style:normal;padding:3px 9px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px #dcc9ad;font-size:11.5px;color:#4a3a22}}}
& .sx-lpf{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px;align-items:center;background:linear-gradient(#fbf7f0,#fff)}
& .sx-hot{position:relative;border-radius:12px;box-shadow:0 0 0 2px #2a6fdb;&::before{content:attr(data-t);position:absolute;left:10px;top:-9px;z-index:2;padding:1px 8px;border-radius:99px;background:#2a6fdb;color:#fff;font-size:11px;font-weight:650}}}
.sx-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;min-width:0;& >div{display:grid;gap:7px;min-width:0}}
.sx-pair .sx-pg{font-size:11.5px;& .sx-hero{grid-template-columns:1fr;padding:12px 11px 11px;& h2{font-size:16px}}& .sx-nav{padding:7px 10px}}
@media(max-width:760px){.sx-pg .sx-hero,.sx-pg .sx-two,.sx-pg .sx-pd,.sx-pg .sx-co,.sx-pg .sx-lpf{grid-template-columns:1fr}.sx-pg .sx-shop{grid-template-columns:1fr}.sx-pg .sx-cds,.sx-pg .sx-gr,.sx-pg .sx-bn,.sx-pg .sx-rv2{grid-template-columns:1fr 1fr}.sx-pg .sx-mn{display:none}.sx-pair{grid-template-columns:1fr}}
/* sx1:end */

/* sx2:begin */
/* sx2: form states, alerts, confirmation pages (scripts/website-lp/site.mjs) */
.sx-pg{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
& h2,& h3,& h4{letter-spacing:0;font-family:inherit}
& .sx-rt .ico{fill:currentColor}
& .sx-fd{display:grid;gap:2px;& small{font-size:11px;color:#556178}& span{padding:6px 9px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #c9d0dc;font-size:12px;color:#5f6c84}&.is-f span{box-shadow:inset 0 0 0 2px #2a6fdb;color:#192045}&.is-e span{box-shadow:inset 0 0 0 2px #d64545;background:#fff5f4;color:#192045}&.is-v span{color:#192045}&.is-d span{background:#f1f3f7;color:#6a7588}& em{font-style:normal;color:#b42318;font-size:11.5px}}
& .sx-al{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:#fff1ef;box-shadow:inset 0 0 0 1.5px #e4432f;color:#7a1a0f;font-size:12px;line-height:1.35;
& .ico{flex:none;width:15px;height:15px;color:#d64545;margin-top:1px}& b{display:block;font-size:12.5px}& ul{margin:2px 0 0;padding-left:15px}
&.is-warn{background:#fff8e8;box-shadow:inset 0 0 0 1.5px #e2a02e;color:#6b4708;& .ico{color:#c98a14}}
&.is-ok{background:#ecf8f1;box-shadow:inset 0 0 0 1.5px #1f9d63;color:#145a3a;& .ico{color:#1f9d63}}}
& .sx-bt.is-busy{background:#3d5a4c;&::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:2px solid #ffffff55;border-top-color:#fff}}
& .sx-ok{display:grid;gap:7px;justify-items:start;align-content:start;
& >i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e3f4ea;color:#1f9d63;& .ico{width:20px;height:20px}}
& p{color:#556178;font-size:12.5px;line-height:1.4}& p b{color:#192045}}
& .sx-kv{display:grid;width:100%;border-radius:10px;box-shadow:inset 0 0 0 1px #e1e6ee;background:#fff;
& span{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border-bottom:1px solid #eef0f4;font-size:12px;&:last-child{border:0}& em{font-style:normal;color:#5d6a80}& b{font-weight:650;text-align:right}}}
& .sx-tl{display:grid;gap:0;
& >span{position:relative;display:grid;grid-template-columns:20px 1fr;gap:9px;padding-bottom:11px;&:last-child{padding-bottom:0}
&:not(:last-child)::before{content:"";position:absolute;left:9px;top:21px;bottom:1px;width:1.5px;background:#d6dce6}
& u{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e6e9ee;color:#556178;font-size:11px;font-weight:700;text-decoration:none;& .ico{width:12px;height:12px}}
& >span{display:grid;gap:0;& b{font-size:12.5px}& em{font-style:normal;color:#5d6a80;font-size:11.5px}}
&.done u{background:#1f9d63;color:#fff}&.on u{background:#1f3a2e;color:#fff}}}
& .sx-pan{display:grid;gap:8px;padding:12px;border-radius:13px;background:#faf6ef;box-shadow:inset 0 0 0 1px #eadfce;& >b{font-size:13.5px}}
& .sx-3{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;padding:12px 14px 14px;align-items:start}
}
@media(max-width:760px){.sx-pg .sx-3{grid-template-columns:1fr}}
.sx-lk{display:grid;gap:7px;padding:26px 11px 14px;min-height:430px;align-content:start;background:linear-gradient(#232d5e,#10163a);color:#fff;text-align:center;
& >small{font-size:12px;color:#c9d2e3}& >b{font-size:46px;line-height:1;font-weight:300;margin-bottom:12px}
& .sx-nt{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:9px 10px;border-radius:14px;background:#ffffff26;text-align:left;
& >i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:#1f3a2e;& .ico{width:16px;height:16px}}
& >span{display:grid;min-width:0;& small{font-size:11px;color:#d3dbea}& b{font-size:12.5px;line-height:1.25}& em{font-style:normal;font-size:11.5px;color:#e4e9f3}}
& >u{align-self:start;text-decoration:none;font-size:11px;color:#c9d2e3}
&.is-hot{background:#ffffff40;box-shadow:inset 0 0 0 1.5px #ffffff88}&.is-bad >i{background:#ffd9d3;color:#b42318}}
& .sx-ac{display:flex;gap:7px;margin-top:4px;& i{flex:1;font-style:normal;padding:9px;border-radius:12px;background:#fff;color:#16241c;font-size:12.5px;font-weight:650}}}
.sx{container-type:inline-size}
@container (max-width:640px){
.sx .sx-pg .sx-hero,.sx .sx-pg .sx-two,.sx .sx-pg .sx-co,.sx .sx-pg .sx-lpf,.sx .sx-pg .sx-3{grid-template-columns:1fr}
.sx .sx-pg .sx-shop{grid-template-columns:96px 1fr}
.sx .sx-pg .sx-shop .sx-gr{grid-template-columns:1fr 1fr!important}
.sx .sx-pg .sx-mn,.sx .sx-pg .sx-top span:last-child{display:none}
.sx .sx-pg .sx-cds,.sx .sx-pg .sx-gr,.sx .sx-pg .sx-stp{grid-template-columns:1fr 1fr}
.sx .sx-pg .sx-bn,.sx .sx-pg .sx-rv2{grid-template-columns:1fr}
.sx .sx-pg .sx-sum{flex-wrap:wrap}.sx .sx-pg .sx-sum .sx-tg{margin-left:0;justify-content:flex-start}
.sx .sx-pg .sx-hero h2{font-size:19px}
.sx .sx-pair{grid-template-columns:1fr}
.sx .sx-pg .sx-gr.is-3{grid-template-columns:repeat(3,1fr)}
.sx .sx-pg .sx-nav .sx-bt{margin-left:auto}
.sx .sx-pair .sx-hi{max-height:100px}
.sx .sx-pair .sx-bd{top:8px;bottom:auto}
.sx .sx-pair .sx-st{display:none}
.sx .sx-pg .sx-pd{grid-template-columns:.85fr 1fr;gap:10px;padding:6px 12px 10px}
.sx .sx-pg .sx-pi .sx-h1{font-size:15px}
}
/* sx2:end */

/* sx3:begin */
/* sx3: phone view of the sample site (scripts/website-lp/site2.mjs mobileSite) */
.sx .mk-phone.sx-phone{width:280px}
.sx .sx-phone .mk-scr{height:560px;display:flex;flex-direction:column;overflow:hidden}
.sx-mb{display:flex;flex:1;flex-direction:column;min-height:0;background:#fff;color:#192045;font-size:12px;
& .sx-mh{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #e8ebf0;& b{font-size:13.5px;letter-spacing:0}& >i:last-child{margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#f3f4f7;& .ico{width:17px;height:17px}}}
& .sx-mhero{position:relative;& .mk-img{border-radius:0}& em{position:absolute;left:10px;bottom:8px;padding:3px 8px;border-radius:7px;background:#fff;color:#1f3a2e;font-style:normal;font-size:11px;font-weight:650}}
& .sx-mt{display:grid;gap:4px;padding:10px 14px 4px;& small{font-size:11px;font-weight:650;color:#9a5b1e}& h2{margin:0;font-size:18px;line-height:1.2;letter-spacing:0}& p{margin:0;color:#556178;font-size:12px;line-height:1.4}}
& .sx-mst{display:flex;gap:6px;margin:8px 14px 0;padding:8px 6px;border-radius:10px;background:#f6efe6;& span{flex:1;display:grid;gap:0;text-align:center;font-size:11px;color:#5d6a80}& b{font-size:13.5px;color:#1f3a2e}}
& .sx-ms{display:grid;gap:7px;padding:10px 14px;& >span{display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:center;padding:6px;border-radius:10px;box-shadow:inset 0 0 0 1px #e1e6ee;& >span{display:grid;gap:0;& b{font-size:12.5px}& em{font-style:normal;font-size:11px;color:#5d6a80}}& .ico{width:14px;height:14px;color:#5f6c84;margin-right:4px}& .mk-img{border-radius:7px}}}
& .sx-mbar{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:6px;margin-top:auto;padding:8px 10px 14px;border-top:1px solid #e8ebf0;background:#fff;& span{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 4px;border-radius:10px;background:#f1f3f7;font-size:12.5px;font-weight:650;& .ico{width:15px;height:15px}}& .pri{background:#1f3a2e;color:#fff}}
& .sx-mm{display:grid;padding:4px 14px;& >span{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eef0f4;& b{display:grid;gap:1px;font-size:14px;font-weight:650;& em{font-style:normal;font-size:11.5px;font-weight:400;color:#5d6a80}}& .ico{width:15px;height:15px;color:#5f6c84}&.on b{color:#9a5b1e}}}
& .sx-mc{display:grid;gap:6px;margin:auto 14px 16px;padding:12px;border-radius:12px;background:#faf6ef;box-shadow:inset 0 0 0 1px #eadfce;& >span{display:flex;align-items:center;gap:7px;font-size:13.5px;& .ico{width:16px;height:16px;color:#1f3a2e}}& small{font-size:11.5px;color:#5d6a80}& .sx-bt{padding:9px 13px}}
}
@container (max-width:240px){
.sx .sx-mb .sx-mh{padding:6px 8px;gap:6px;& b{font-size:12.5px;white-space:nowrap}& .mk-fav{width:24px;height:24px}& >i:last-child{width:26px;height:26px}}
.sx .sx-mb .sx-mhero em,.sx .sx-mb .sx-mt p,.sx .sx-mb .sx-mt small,.sx .sx-mb .sx-ms,.sx .sx-mb .sx-mst span:nth-child(3),.sx .sx-mb .sx-mbar .ico,.sx .sx-mb .sx-ms .ico{display:none}
.sx .sx-mb .sx-mt{padding:8px 10px 2px;& h2{font-size:15px}}
.sx .sx-mb .sx-mst{margin:8px 10px 0;gap:4px;padding:7px 4px;& span{font-size:11px;white-space:nowrap}& b{font-size:12.5px}}
.sx .sx-mb .sx-mbar{grid-template-columns:auto auto 1fr;gap:4px;padding:7px 6px 12px;& span{padding:8px 4px;font-size:11.5px;white-space:nowrap}}
.sx .sx-mb .sx-mm >span{padding:9px 0;& b{font-size:12.5px}& em{display:none}}
.sx .sx-mb .sx-mc{margin:auto 10px 12px;padding:9px;& >span{font-size:11.5px}& small{display:none}}
}
.tp-side .sx .mk-phone.sx-phone{width:158px}
.tp-side .sx .sx-phone .mk-scr{height:300px}
.sx-pg .sx-btns{display:flex;gap:7px;flex-wrap:wrap}
.sx-mp{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:0;background:transparent;
& .sx-ad{margin:0;height:100%}
& .sx-mq{display:grid;place-items:center;color:#7d8aa0;& .ico{width:18px;height:18px}}
& .sx-ad.is-page{background:#fff;box-shadow:inset 0 0 0 1.5px #1f9d63}}
/* sx3:end */

/* cm1:begin */
/* cm1: shopping-app phones (scripts/commerce-lp/app.mjs) */
.rl.a-shop{--sv:#c4381f;--sv2:#e6933a}
.cmx{container-type:inline-size}
.cmx .mk-phone.cmx-phone{width:280px}
.cmx .cmx-phone .mk-scr{height:560px;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.cmx-pg{display:flex;flex:1;flex-direction:column;min-height:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:12px;line-height:1.35;color:#192040;background:#f3f4f6;
& *{box-sizing:border-box}
& .ico{width:16px;height:16px;flex:none}
& i,& em,& u{font-style:normal;text-decoration:none}
& b,& h3{font-family:inherit;letter-spacing:0}
& .cmx-top{display:flex;align-items:center;gap:7px;padding:5px 10px 8px;background:#fff}
& .cmx-q{display:flex;flex:1;align-items:center;gap:6px;min-width:0;padding:6px 9px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #cf4128;
& .ico{width:14px;height:14px;color:#6b7587}
& b{flex:1;min-width:0;overflow:hidden;font-size:12px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
& i{display:grid;place-items:center;color:#6b7587;& .ico{width:15px;height:15px}}}
& .cmx-ic{position:relative;display:grid;place-items:center;width:24px;height:30px;color:#45507a;
& u{position:absolute;top:0;right:-3px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#cf4128;color:#fff;font-size:11px;line-height:15px;text-align:center}}
& .cmx-sort{display:flex;align-items:stretch;padding:0 2px;background:#fff;border-bottom:1px solid #eceef2;
& >*{display:flex;flex:1;align-items:center;justify-content:center;gap:2px;padding:7px 2px;color:#556070;font-size:12px;white-space:nowrap}
& b{color:#cf4128;font-weight:650;box-shadow:inset 0 -2px #cf4128}
& .ico{width:12px;height:12px}
& .f{flex:none;padding:7px 9px;border-left:1px solid #eceef2}}
& .cmx-cn{margin:0;padding:5px 10px;color:#5f6c84;font-size:11px}
& .cmx-gr{display:grid;flex:1;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:6px;align-content:start;min-height:0;padding:0 6px;overflow:hidden}
& .cmx-cd{position:relative;display:flex;flex-direction:column;gap:3px;padding-bottom:7px;border-radius:7px;background:#fff;overflow:hidden;
& >*{flex:none}
&.is-hi{box-shadow:0 0 0 2px #cf4128}
& .cmx-ph{position:relative;display:block;& .mk-img{border-radius:0}
& u{position:absolute;top:0;right:0;padding:1px 5px 3px;border-radius:0 0 0 7px;background:#ffd84d;color:#8a2a12;font-size:11px;font-weight:700}
& .cmx-ad{position:absolute;left:5px;bottom:5px;padding:0 6px;border-radius:4px;background:#192040cc;color:#fff;font-size:11px;line-height:17px}}
& .cmx-nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:0 7px;font-size:12px;line-height:1.3;
& i{display:inline-block;margin-right:4px;padding:0 4px;border-radius:3px;background:#cf4128;color:#fff;font-size:11px;line-height:15px;vertical-align:1px}}
& .cmx-pr{display:flex;align-items:baseline;gap:5px;padding:0 7px;& b{color:#c4381f;font-size:13.5px;font-weight:650}& s{display:none}}
& .cmx-mt{display:flex;align-items:center;gap:3px;padding:0 7px;color:#6b7587;font-size:11px;& .ico{width:11px;height:11px;fill:#f5a623;stroke:#f5a623}& i{margin:0 1px}}
& .cmx-tg{display:flex;gap:4px;padding:0 7px;& i{display:inline-flex;align-items:center;gap:3px;padding:0 5px;border-radius:3px;box-shadow:inset 0 0 0 1px #cf412866;color:#c4381f;font-size:11px;line-height:16px;& .ico{width:11px;height:11px}}}}
& .cmx-nav{display:flex;justify-content:space-around;padding:5px 2px 7px;border-top:1px solid #eceef2;background:#fff;
& span{display:grid;justify-items:center;gap:1px;color:#5f6c84}& em{font-size:11px}& .ico{width:19px;height:19px}& .on{color:#cf4128;font-weight:600}}
& .cmx-gal{position:relative;flex:none;height:150px;background:#efe6da;& >.mk-img{height:100%;aspect-ratio:auto;border-radius:0}
& .cmx-gt{position:absolute;inset:5px 8px auto;display:flex;justify-content:space-between;& >i,& >span>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#192040b3;color:#fff}& >span{display:flex;gap:6px}}
& .cmx-cnt{position:absolute;right:8px;bottom:8px;padding:1px 8px;border-radius:10px;background:#192040b3;color:#fff;font-size:11px}}
& .cmx-pb{display:flex;flex:1;flex-direction:column;gap:6px;min-height:0;overflow:hidden}
& .cmx-pp{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:7px 10px;background:linear-gradient(90deg,#cf4128,#f08a3a);color:#fff;
& b{font-size:18px;font-weight:700}& s{color:#ffe1d6;font-size:11.5px}& u{padding:0 5px;border-radius:3px;background:#fff;color:#c4381f;font-size:11px;font-weight:700;line-height:16px}& em{flex-basis:100%;margin-top:-1px;font-size:11px;line-height:1.2;opacity:.92}}
& .cmx-ti{margin:0;padding:6px 10px 0;background:#fff;font-size:13px;font-weight:600;line-height:1.35;
& i{margin-right:4px;padding:0 4px;border-radius:3px;background:#cf4128;color:#fff;font-size:11px;line-height:15px;vertical-align:1px}}
& .cmx-rt{display:flex;align-items:center;gap:5px;margin-top:-6px;padding:2px 10px 6px;background:#fff;color:#6b7587;font-size:11.5px;& .ico{width:12px;height:12px;fill:#f5a623;stroke:#f5a623}& b{color:#192040}& i{color:#d3d7de}}
& .cmx-vc{display:flex;gap:6px;margin-top:-6px;padding:0 10px 7px;background:#fff;& span{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:4px;background:#fff1ed;color:#c4381f;font-size:11px;line-height:18px;& .ico{width:12px;height:12px}}}
& .cmx-ds{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#fff;
& >.ico:first-child{color:#2a9d6f}& >.ico:last-child{width:12px;height:12px;color:#6b7587}
& span{display:grid;flex:1;min-width:0;& b{font-size:12px;font-weight:600}& em{color:#5f6c84;font-size:11px}}}
& .cmx-vs{display:grid;gap:5px;padding:7px 10px 8px;background:#fff;& small{color:#5f6c84;font-size:11.5px}}
& .cmx-vl{display:flex;gap:6px;overflow:hidden}
& .cmx-vr{display:flex;align-items:center;gap:5px;padding:2px 8px 2px 2px;border-radius:5px;background:#f3f4f6;box-shadow:inset 0 0 0 1px #e1e4ea;white-space:nowrap;
& .mk-img{width:30px;border-radius:4px}& em{font-size:11.5px}
&.is-on{background:#fff4f0;box-shadow:inset 0 0 0 1.5px #cf4128;color:#b5321a}
&.is-off{color:#6b7587;& .mk-img{opacity:.5}&.is-on{background:#f3f4f6;box-shadow:inset 0 0 0 1.5px #6b7587}}}
& .cmx-sh{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;
& .mk-fav{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#efe6da;color:#1f3a2e;font-weight:700}
& span{display:grid;flex:1;min-width:0;& b{font-size:12px}& em{color:#5f6c84;font-size:11px}}
& >i{padding:2px 9px;border-radius:5px;box-shadow:inset 0 0 0 1px #cf4128;color:#c4381f;font-size:11.5px}}
& .cmx-bar{display:flex;align-items:stretch;border-top:1px solid #eceef2;background:#fff;
& span{display:grid;place-items:center;gap:0;width:62px;color:#45507a;& em{font-size:11px;white-space:nowrap}& .ico{width:16px;height:16px}}
& span+span{width:84px;border-left:1px solid #eceef2}
& b{display:grid;flex:1;place-items:center;padding:11px 4px;background:#cf4128;color:#fff;font-size:13px;font-weight:650;&.is-off{background:#c9ced8;color:#404c80}}}
&.is-seller{background:#fff}
&:has(.cmx-vd){background:#000;color:#fff}
.cmx-vd{position:relative;flex:1;min-height:0;overflow:hidden;
& >.mk-img{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
&::before{content:"";position:absolute;inset:0 0 auto;height:34%;background:linear-gradient(#000c,#0000)}
&::after{content:"";position:absolute;inset:auto 0 0;height:58%;background:linear-gradient(#0000,#000c)}
&::before,&::after{z-index:1}
& >*{z-index:2}
& >.mk-img{z-index:0}
& .cmx-vt{position:absolute;inset:24px 12px auto;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12.5px;text-shadow:0 1px 3px #0009;
& em{opacity:.75}& b{padding-bottom:2px;border-bottom:2px solid #fff;font-weight:650}& i{position:absolute;right:0}& .ico{width:17px;height:17px}}
& .cmx-vr2{position:absolute;right:7px;bottom:92px;display:grid;justify-items:center;gap:11px;
& >span{display:grid;justify-items:center;gap:1px;& .ico{width:24px;height:24px;filter:drop-shadow(0 1px 2px #0008)}& em{font-size:11px;text-shadow:0 1px 2px #000a}}
& .cmx-av{position:relative;margin-bottom:5px;& .mk-fav{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#efe6da;color:#1f3a2e;font-weight:700;box-shadow:0 0 0 2px #fff}
& u{position:absolute;left:50%;bottom:-8px;display:grid;place-items:center;width:17px;height:17px;margin-left:-8.5px;border-radius:50%;background:#cf4128;color:#fff;font-size:13px;line-height:1}}}
& .cmx-vb{position:absolute;left:10px;right:56px;bottom:62px;display:grid;gap:3px;text-shadow:0 1px 3px #000a;
& b{font-size:13px}& em{font-size:12px;line-height:1.3;& u{font-weight:650}}
& .cmx-mu{display:flex;align-items:center;gap:5px;font-size:11px;& .ico{width:12px;height:12px}}}
& .cmx-vp{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;padding:6px;border-radius:10px;background:#fff;color:#192040;
& .mk-img{width:38px;flex:none;border-radius:6px}
& span{display:grid;flex:1;min-width:0;& b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}& em{color:#c4381f;font-size:12.5px;font-weight:650;& s{margin-left:5px;color:#6b7587;font-size:11px;font-weight:400}}}
& >i{padding:6px 13px;border-radius:7px;background:#cf4128;color:#fff;font-size:12px;font-weight:650}}}
.cmx-vn{display:flex;align-items:center;justify-content:space-around;padding:6px 4px 8px;background:#000;color:#ffffffb3;font-size:11.5px;
& .on{color:#fff;font-weight:650}
& >i{display:grid;place-items:center;width:38px;height:26px;border-radius:7px;background:#fff;color:#000;& .ico{width:16px;height:16px}}}
.cmx-ch{display:flex;align-items:center;justify-content:space-between;padding:5px 12px 8px;background:#fff;& b{font-size:15px}& .ico{width:17px;height:17px;color:#45507a}}
.cmx-tb{display:flex;overflow:hidden;border-bottom:1px solid #eceef2;background:#fff;
& >*{padding:7px 8px;color:#667084;font-size:11.5px;white-space:nowrap}
& em{margin-left:3px;padding:0 5px;border-radius:8px;background:#eef0f4;font-size:11px}
& b{color:#cf4128;font-weight:650;box-shadow:inset 0 -2px #cf4128;& em{background:#fde6e1;color:#b5321a}}}
.cmx-ls{flex:1;min-height:0;overflow:hidden;background:#fff}
.cmx-th{display:grid;grid-template-columns:34px 1fr auto;gap:9px;padding:9px 12px;border-bottom:1px solid #f0f1f4;
& .rl-av{width:34px;height:34px;font-size:13px}
& >span{display:grid;gap:1px;min-width:0;& b{display:flex;justify-content:space-between;gap:6px;font-size:12.5px;font-weight:650}& b small{color:#6b7587;font-size:11px;font-weight:400}
& em{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#556070;font-size:12px;line-height:1.3}}
& .cmx-ow{display:flex;align-items:center;gap:3px;margin-top:2px;color:#5d6b82;font-size:11px;& .ico{width:11px;height:11px}}
& >u{align-self:center;min-width:17px;height:17px;border-radius:9px;background:#cf4128;color:#fff;font-size:11px;line-height:17px;text-align:center}
&.is-warn{background:#fff7f0;& .cmx-ow{color:#b4531a;font-weight:600}}
&.is-hi{box-shadow:inset 3px 0 #cf4128}}
&.is-seller .cmx-nav .on{color:#cf4128}
}
@container (max-width:240px){
.cmx .cmx-phone .mk-scr{height:300px}
.cmx-pg{font-size:11px;
& .cmx-top{gap:4px;padding:2px 6px 5px}.cmx-top .cmx-q i,.cmx-top .cmx-ic+.cmx-ic{display:none}
& .cmx-sort span:nth-child(n+3),& .cmx-cn,& .cmx-mt,& .cmx-tg,& .cmx-nav em,& .cmx-cd .cmx-nm i,& .cmx-vc,& .cmx-ds,& .cmx-rt,& .cmx-vs,& .cmx-sh,& .cmx-ti i,& .cmx-pp em,& .cmx-bar span em{display:none}
& .cmx-sort >*{padding:4px 2px;font-size:11px}
& .cmx-gr{gap:4px;padding:4px 4px 0}
& .cmx-nm{padding:0 4px;-webkit-line-clamp:1}
& .cmx-pr{padding:0 4px;& b{font-size:12px}& s{display:none}}
& .cmx-nav{padding:3px 2px 4px}
& .cmx-gal{flex:1 1 0;height:auto;min-height:104px}& .cmx-pb{flex:none}
& .cmx-pp{padding:4px 7px;& b{font-size:14px}& s{display:none}}
& .cmx-ti{padding:4px 7px;font-size:11px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
& .cmx-bar span,& .cmx-bar span+span{width:30px}& .cmx-bar b{padding:6px 2px;font-size:11px}
& .cmx-vt{inset:20px 8px auto;& em{display:none}}
& .cmx-vr2{bottom:60px;gap:7px;& span:nth-child(n+4){display:none}}
& .cmx-vd .cmx-vb{bottom:46px;right:36px;& .cmx-mu{display:none}& em{display:none}}
& .cmx-vd .cmx-vp{left:5px;right:5px;bottom:5px;gap:5px;padding:4px;& .mk-img{width:26px}& span em s{display:none}& >i{padding:3px 7px;font-size:11px}}
& .cmx-vn{padding:3px 2px 4px;font-size:11px;& span:nth-child(2),& span:nth-child(4){display:none}}
& .cmx-th{padding:6px 7px;gap:6px;grid-template-columns:24px 1fr;& .rl-av{width:24px;height:24px;font-size:11px}& .cmx-ow,& >u{display:none}& em{-webkit-line-clamp:1}}
& .cmx-tb >*:nth-child(n+2){display:none}
}
}
.tp-side .cmx .mk-phone.cmx-phone{width:158px}
.tp-side .cmx .cmx-phone .mk-scr{height:300px}
.rl.a-shop{
& .cmx-pg2{display:flex;align-items:center;justify-content:space-between;gap:12px;
& >span{display:grid;gap:2px}& b{font-size:14px}& em{font-style:normal;font-size:12px;color:#5a6779}}
& .cmx-btn{padding:6px 14px;border-radius:7px;background:var(--sv);color:#fff;font-style:normal;font-weight:700;font-size:12px;white-space:nowrap;&.is-off{background:#e3e8ef;color:#7d8998}}
& .cmx-pgr{display:block;height:7px;margin-top:10px;border-radius:99px;background:#e9edf3;overflow:hidden;
& u{display:block;height:100%;border-radius:inherit;background:var(--sv)}&.is-bad u{background:#d64545}&.is-ok u{background:#1f9d63}}
& .cmx-sc{display:block;margin:6px 0 8px;font-size:11px;color:#5a6779}
& .cmx-lq{display:grid;grid-template-columns:52px 1fr;gap:9px;align-items:center;margin:2px 0 8px;
& .mk-img{border-radius:6px;overflow:hidden}& b{font-size:12px;line-height:1.35;color:#192045}}
& .cmx-wf{position:relative;display:flex;align-items:flex-end;gap:8px;box-sizing:border-box;height:176px;padding:20px 2px 42px;border-bottom:1px solid #e3e8ef}
& .cmx-wc{position:relative;flex:1;min-width:0;height:100%;
& u{position:absolute;left:14%;right:14%;display:block;border-radius:4px 4px 0 0;background:#d64545}
& u em{position:absolute;left:-8px;right:-8px;bottom:100%;margin-bottom:3px;text-align:center;font-style:normal;font-size:11px;font-weight:700;color:#192045}
&.is-tot u{background:#424e83}&.is-tot:last-child u{background:#1f9d6b}
& >i{position:absolute;top:100%;left:-4px;right:-4px;margin-top:6px;text-align:center;font-style:normal;font-size:11px;line-height:1.25;color:#5a6779}}
}
/* cm1:end */

/* ad1:begin */
/* ad1: ads-manager screens and ad previews (scripts/one-page-lp/ads.mjs) */
.rl.a-ads{--sv:#3a4fd8;--sv2:#e48a3b}
.adx-gauge{display:grid;gap:7px;margin-top:8px;
& >span{position:relative;display:flex;gap:2px;height:10px;
& i{flex:18;border-radius:99px;background:#f0cf86}& i+i{flex:52;background:#6cc79b}& i+i+i{flex:30;background:#f0cf86}
& u{position:absolute;top:50%;left:var(--p);width:16px;height:16px;margin:-8px 0 0 -8px;border:3px solid var(--sv);border-radius:50%;background:#fff;box-shadow:0 1px 3px #19204540;z-index:2}}
& >em{display:flex;align-items:center;justify-content:space-between;gap:8px;font-style:normal;font-size:11.5px;color:#6b778a;& b{color:#192045;font-size:12px}}}
.adx-act{display:flex;justify-content:flex-end;gap:8px;
& i{padding:6px 14px;border-radius:7px;box-shadow:inset 0 0 0 1px #cfd7e3;color:#47527e;font-style:normal;font-size:12px}
& b{padding:6px 16px;border-radius:7px;background:var(--sv);color:#fff;font-size:12px}}
.adx-ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;align-items:start;
& >span{display:grid;gap:4px;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 1px #e3e8ef;background:#fbfcfe;min-width:0;
& small{color:#6b778a;font-size:11.5px;font-weight:600}
& b{font-size:12.5px;color:#192045}
& em{font-style:normal;font-size:11.5px;color:#5a6779}
& strong{margin-top:4px;font-size:22px;line-height:1.1;color:#192045}
&.is-win{background:#f1f4ff;box-shadow:inset 0 0 0 2px var(--sv);& strong{color:color-mix(in srgb,var(--sv) 84%,#000)}& >small:first-child{color:color-mix(in srgb,var(--sv) 84%,#000)}}}}
.adx-bar{display:block;height:7px;border-radius:99px;background:#e6ebf3;overflow:hidden;& u{display:block;height:100%;border-radius:inherit;background:#98a4ba}}
.is-win .adx-bar u{background:var(--sv)}
.adx-th{display:block;overflow:hidden;border-radius:7px;& .mk-img{border-radius:0;aspect-ratio:16/7;& img{object-fit:cover}}}
.adx-fl{display:grid;gap:4px;align-content:start;min-height:88px;padding:6px 0;
& i{display:block;height:9px;border-radius:3px;background:#fff;box-shadow:inset 0 0 0 1px #d6dde8}
& i.b{width:46%;height:11px;margin-top:2px;background:var(--sv);box-shadow:none}}
.adx-ad{display:grid;gap:5px;
& .mk-img{aspect-ratio:1.91/1;border-radius:7px;overflow:hidden}
& b{font-size:12.5px;color:#192045}& em{font-style:normal;font-size:11.5px;color:#6b778a}
& i{justify-self:start;padding:3px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--sv);color:color-mix(in srgb,var(--sv) 84%,#000);font-style:normal;font-size:11.5px;font-weight:650}}
.adx-lp{display:grid;gap:5px;
& .adx-nv{display:flex;gap:5px;align-items:center;padding:2px 0 4px;& i{width:34px;height:6px;border-radius:3px;background:#d6dde8}& i:first-child{width:46px;background:#98a4ba}}
& .adx-ph{display:block;& .mk-img{aspect-ratio:1.91/1;border-radius:7px;overflow:hidden}}
& b{font-size:12.5px;color:#192045}& em{font-style:normal;font-size:11.5px;color:#6b778a}
& i.b{justify-self:start;padding:4px 11px;border-radius:6px;background:var(--sv);color:#fff;font-style:normal;font-size:11.5px;font-weight:650}
&.is-home i.b{background:#c9d1de;color:#47527e}}

/* phone family */
.adp{container-type:inline-size}
.adp .mk-phone.adp-phone{width:280px}
.adp .adp-phone .mk-scr{height:560px;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.adp.is-video .adp-phone .mk-scr{background:#000}
.adp-pg{display:flex;flex:1;flex-direction:column;min-height:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:12px;line-height:1.35;color:#192040;background:#fff;
& *{box-sizing:border-box}
& .ico{width:16px;height:16px;flex:none}
& i,& em,& u{font-style:normal;text-decoration:none}
& b,& h3{font-family:inherit;letter-spacing:0}
& .mk-img{max-height:none;margin:0}
& >*{flex:none}
& .adp-top{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 7px;& b{font-size:15px}& span{display:flex;gap:11px;color:#192040}& .ico{width:19px;height:19px}
&.is-app{padding:6px 12px 8px;background:#fff;box-shadow:0 1px #eceef2;& b{font-size:14px}& .rl-av{width:26px;height:26px;font-size:12px}}}
& .adp-ph{display:flex;align-items:center;gap:8px;padding:5px 10px;
& .mk-fav{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#efe6da;color:#1f3a2e;font-weight:700;font-size:12px}
& >span{display:grid;flex:1;min-width:0;& b{font-size:12.5px}& em{color:#6b7587;font-size:11px}}}
& .adp-im{flex:1 1 0;min-height:0;overflow:hidden;& .mk-img{width:100%;height:100%;aspect-ratio:auto;border-radius:0}}
& .adp-cta{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:#eef1f8;color:#192040;font-size:12.5px;font-weight:650;& .ico{width:14px;height:14px;color:#5a6779}}
& .adp-act{display:flex;align-items:center;gap:12px;padding:7px 12px 3px;& i{flex:1}& .ico{width:21px;height:21px}}
& .adp-cap{margin:0;padding:0 12px 6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.35;& b{margin-right:4px}
&.is-top{display:block;padding:2px 12px 8px;-webkit-line-clamp:unset}}
& .adp-nav{display:flex;justify-content:space-around;padding:6px 2px 9px;border-top:1px solid #eceef2;background:#fff;
& span{display:grid;place-items:center;color:#6b7587}& .on{color:#192040}& .ico{width:21px;height:21px}}
& .adp-vd{position:relative;flex:1;min-height:0;overflow:hidden;color:#fff;
& >.mk-img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
&::before{content:"";position:absolute;inset:0 0 auto;height:30%;background:linear-gradient(#000b,#0000)}
&::after{content:"";position:absolute;inset:auto 0 0;height:56%;background:linear-gradient(#0000,#000d)}
&::before,&::after{z-index:1}
& >*{z-index:2}
& >.mk-img{z-index:0}
& .adp-vt{position:absolute;inset:26px 12px auto;display:flex;align-items:center;justify-content:space-between;text-shadow:0 1px 3px #0009;& b{font-size:16px}& .ico{width:20px;height:20px}}
& .adp-rr{position:absolute;right:8px;bottom:104px;display:grid;justify-items:center;gap:12px;& >span{display:grid;justify-items:center;gap:1px;& .ico{width:24px;height:24px;filter:drop-shadow(0 1px 2px #0008)}& em{font-size:11px;text-shadow:0 1px 2px #000a}}}
& .adp-vb{position:absolute;left:10px;right:54px;bottom:58px;display:grid;gap:4px;text-shadow:0 1px 3px #000a;& em{font-size:12px;line-height:1.3}
& .adp-who{display:flex;align-items:center;gap:7px;& .mk-fav{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#efe6da;color:#1f3a2e;font-weight:700;font-size:11px;box-shadow:0 0 0 2px #fff}& b{font-size:12.5px}& i{padding:0 6px;border-radius:4px;background:#ffffff33;font-size:11px;line-height:17px;white-space:nowrap}}
& .adp-mu{display:flex;align-items:center;gap:5px;font-size:11px;& .ico{width:12px;height:12px}}}
& .adp-vc{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:9px;background:#ffffffee;color:#192040;font-size:13px;text-shadow:none;& .ico{width:15px;height:15px}}}
& .adp-pl{position:relative;display:block;flex:none;background:#000;
& .mk-img{width:100%;aspect-ratio:16/9;height:auto;border-radius:0}
& .adp-ad{position:absolute;left:8px;bottom:12px;padding:0 6px;border-radius:4px;background:#f2c94c;color:#3d3000;font-size:11px;font-weight:650;line-height:18px}
& .adp-sk{position:absolute;right:8px;bottom:12px;display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:5px;background:#000a;color:#fff;font-size:12px;& .ico{width:12px;height:12px}}
& .adp-bar{position:absolute;inset:auto 0 0;height:3px;background:#ffffff55;& u{display:block;width:38%;height:100%;background:#f2c94c}}}
& .adp-ai{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#f4f6fb;
& >span{display:flex;align-items:center;gap:8px;min-width:0}
& .mk-fav{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#efe6da;color:#1f3a2e;font-weight:700}
& span span{display:grid;min-width:0;& b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}& em{color:#6b7587;font-size:11px;white-space:nowrap}}
& >i{flex:none;padding:5px 11px;border-radius:6px;background:#2f6fe0;color:#fff;font-size:12px;font-weight:650}}
& .adp-vh{margin:0;padding:8px 10px 0;font-size:14px;font-weight:650;line-height:1.3}
& .adp-vm{padding:1px 10px 6px;color:#6b7587;font-size:11.5px}
& .adp-nl{display:grid;gap:8px;padding:4px 10px;overflow:hidden;flex:1;min-height:0;align-content:start}
& .adp-nx{display:grid;grid-template-columns:104px 1fr;gap:8px;align-items:start;& .mk-img{aspect-ratio:16/9;height:auto;border-radius:6px}& span{display:grid;gap:1px;& b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.3}& em{color:#6b7587;font-size:11px}}}
& .adp-pr{display:flex;flex:1;gap:8px;min-height:0;padding:0 10px 6px;overflow:hidden;align-items:flex-start}
& .adp-pc{display:grid;flex:none;gap:3px;width:122px;padding:0 0 7px;border-radius:8px;box-shadow:inset 0 0 0 1px #e3e7ee;overflow:hidden;& .mk-img{aspect-ratio:1/1;height:auto;width:100%;border-radius:0}
& b{padding:0 8px;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}& em{padding:0 8px;color:#192040;font-size:12.5px;font-weight:650}
& i{margin:2px 8px 0;padding:4px 0;border-radius:6px;background:#eef1f8;font-size:12px;font-weight:650;text-align:center}}
& .adp-tb{display:flex;border-bottom:1px solid #eceef2;& >*{padding:7px 11px;color:#667084;font-size:11.5px;white-space:nowrap}& em{margin-left:4px;padding:0 5px;border-radius:8px;background:#eef0f4;font-size:11px}
& b{color:color-mix(in srgb,var(--sv) 84%,#000);font-weight:650;box-shadow:inset 0 -2px var(--sv);& em{background:#e7ebff;color:color-mix(in srgb,var(--sv) 84%,#000)}}}
& .adp-ls{flex:1;min-height:0;overflow:hidden}
& .adp-ld{display:grid;grid-template-columns:32px 1fr auto;gap:9px;align-items:center;padding:8px 12px;border-bottom:1px solid #f0f1f4;& .rl-av{width:32px;height:32px;font-size:13px}& >span{display:grid;min-width:0;& b{font-size:12.5px}& em{overflow:hidden;color:#667084;font-size:11px;text-overflow:ellipsis;white-space:nowrap}}}
& .adp-tag{padding:1px 8px;border-radius:99px;background:#eef0f4;color:#5a6779;font-size:11px;line-height:17px;&.is-ok{background:#e1f5ea;color:#157a4a}&.is-warn{background:#fff1dc;color:#9a5a0a}}
& .adp-url{display:flex;align-items:center;gap:6px;margin:2px 10px 6px;padding:5px 10px;border-radius:99px;background:#eef0f4;color:#5a6779;font-size:11.5px;& .ico{width:12px;height:12px}& span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
& .adp-br{display:flex;align-items:center;gap:8px;padding:5px 12px 7px;border-bottom:1px solid #eceef2;& .mk-fav{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#efe6da;color:#1f3a2e;font-weight:700;font-size:11px}& b{flex:1;font-size:14px}& .ico{width:18px;height:18px;color:#45507a}}
& .adp-fm{display:grid;flex:1;gap:7px;align-content:start;min-height:0;padding:12px;overflow:hidden;& h3{margin:0;font-size:17px;line-height:1.2}& p{margin:0 0 3px;color:#556070;font-size:12px}& >small{color:#5f6c84;font-size:11px;line-height:1.3}}
& .adp-fd{display:grid;gap:1px;padding:5px 10px 6px;border-radius:8px;box-shadow:inset 0 0 0 1px #cfd7e3;& small{color:#5f6c84;font-size:11px}& b{font-size:12.5px;font-weight:600}& em{color:#c23a3a;font-size:11px}
&.is-bad{background:#fff6f6;box-shadow:inset 0 0 0 1.5px #d64545}&.is-ok{box-shadow:inset 0 0 0 1px #8fd0ae}}
& .adp-bt{padding:10px;border-radius:9px;background:var(--sv);color:#fff;font-size:13px;font-weight:650;text-align:center;&.is-off{background:#dfe5ee;color:#5d6a80}}
& .adp-sp{display:flex;justify-content:space-between;gap:4px;margin:0;padding:4px 12px 8px;list-style:none;border-bottom:1px solid #eceef2;
& li{display:flex;align-items:center;gap:5px;color:#6b7587;font-size:11.5px;& i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e3e7ee;color:#5a6779;font-size:11px;font-weight:700}
&.is-now{color:#192040;font-weight:650;& i{background:var(--sv);color:#fff}}&.is-done i{background:#1f9d63;color:#fff}}}
& .adp-co{display:grid;flex:1;gap:8px;align-content:start;min-height:0;padding:10px 12px;overflow:hidden;background:#f6f7f9}
& .adp-ln{display:grid;grid-template-columns:46px 1fr;gap:9px;align-items:center;padding:7px;border-radius:9px;background:#fff;& .mk-img{aspect-ratio:1/1;height:auto;border-radius:6px}& span{display:grid;& b{font-size:12.5px}& em{color:#667084;font-size:11.5px}}}
& .adp-vc2{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:9px;background:#fff;font-size:12px;& span{display:flex;align-items:center;gap:6px}& .ico{width:14px;height:14px}& i{color:color-mix(in srgb,var(--sv) 84%,#000);font-weight:650}}
& .adp-sm{display:flex;justify-content:space-between;padding:2px 4px;color:#556070;font-size:12px;& b{color:#192040}}
& .adp-py{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px #e3e7ee;font-size:12.5px;& i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #b3bccb}
&.is-on{box-shadow:inset 0 0 0 1.5px var(--sv);& i{background:radial-gradient(var(--sv) 4px,#fff 5px);box-shadow:inset 0 0 0 1.5px var(--sv)}}}
& .adp-ft{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 10px;border-top:1px solid #eceef2;background:#fff;& span{display:grid;color:#667084;font-size:11px;& b{color:#192040;font-size:15px}}& i{padding:9px 20px;border-radius:9px;background:var(--sv);color:#fff;font-size:13px;font-weight:650}}
& .adp-tk{display:grid;flex:1;gap:6px;align-content:center;justify-items:center;min-height:0;padding:14px 16px;text-align:center;& h3{margin:4px 0 0;font-size:17px}& p{margin:0;color:#556070;font-size:12px}}
& .adp-ok{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#e1f5ea;color:#157a4a;& .ico{width:28px;height:28px}}
& .adp-sum{display:grid;gap:1px;width:100%;margin-top:8px;padding:9px 12px;border-radius:9px;background:#f4f6fb;text-align:left;& small{color:#5f6c84;font-size:11px}& b{font-size:12.5px}& em{color:#556070;font-size:11.5px}}
& .adp-ev{display:flex;align-items:center;gap:6px;margin-top:4px;padding:4px 10px;border-radius:99px;background:#e7ebff;color:color-mix(in srgb,var(--sv) 84%,#000);font-size:11.5px;font-weight:650;& .ico{width:13px;height:13px}}
}
@container (max-width:240px){
.adp .adp-phone .mk-scr{height:300px}
.adp-pg{font-size:11px;
& .adp-top{padding:2px 8px 4px;& b{font-size:13px}& .ico{width:16px;height:16px}}
& .adp-act,& .adp-cap,& .adp-cta{display:none}
& .adp-nav{padding:3px 2px 4px}
& .adp-ph{padding:3px 8px}
& .adp-vd .adp-vt{inset:22px 8px auto;& b{font-size:14px}}
& .adp-vd .adp-rr{bottom:46px;gap:7px;& >span:nth-child(n+3){display:none}}
& .adp-vd .adp-vb{bottom:38px;right:32px;& em,& .adp-mu{display:none}& .adp-who{flex-wrap:wrap;gap:1px 6px;& .mk-fav{display:none}}}
& .adp-vd .adp-vc{left:6px;right:6px;bottom:5px;padding:5px 9px;font-size:12px}
& .adp-pl .adp-ad{top:6px;bottom:auto}
& .adp-vh{padding:5px 8px 0;font-size:12px}
& .adp-vm{padding:0 8px 4px;font-size:11px}
& .adp-nl{padding:2px 8px}
& .adp-nx{grid-template-columns:1fr;gap:4px}
& .adp-ai{padding:5px 7px;gap:5px;& .mk-fav{display:none}& >span{flex:1}& span span{flex:1;& em{display:none}& b{font-size:11px}}& >i{padding:4px 8px;font-size:11px}}
& .adp-pr{padding:0 6px 4px}
& .adp-pc{width:84px}
& .adp-pc i{display:none}
& .adp-ld{padding:5px 8px;grid-template-columns:24px 1fr;& .rl-av{width:24px;height:24px;font-size:11px}& .adp-tag{display:none}}
& .adp-tb >*:nth-child(n+2){display:none}
& .adp-fm{gap:4px;padding:6px 8px;& p,& >small{display:none}& h3{font-size:14px}}
& .adp-fd{padding:3px 7px 4px;& em{display:none}}
& .adp-sp li{font-size:11px}
& .adp-co{gap:5px;padding:6px 8px}
& .adp-ft{padding:5px 8px 6px}
& .adp-tk{gap:3px;padding:6px 10px;& p{display:none}}
& .adp-ok{width:40px;height:40px;& .ico{width:20px;height:20px}}
& .adp-sum{margin-top:3px;padding:5px 9px}
}
}
.tp-side .adp .mk-phone.adp-phone{width:158px}
.tp-side .adp .adp-phone .mk-scr{height:300px}
.rl.a-crm{--sv:#0f7b6c;--sv2:#e48a3b}
/* ad1:end */

/* tr1:begin */
/* tr1: learning-management screens of the Đào tạo pages (scripts/training-lp/lms.mjs) */
.rl.a-learn{--sv:#2a6fdb;--sv2:#e48a3b}
.lms-bar{display:block;height:6px;border-radius:99px;background:#e6ebf3;overflow:hidden;& u{display:block;height:100%;border-radius:inherit;background:var(--sv)}}

/* outline */
.lms-top{display:grid;gap:9px}
.lms-ch{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:12px;align-items:center;
& .lms-cv{display:block;overflow:hidden;border-radius:8px;& .mk-img{aspect-ratio:16/10;border-radius:0;& img{object-fit:cover}}}
& .lms-ct{display:grid;gap:1px;min-width:0;& small{font-size:11px;font-weight:650;letter-spacing:.04em;color:color-mix(in srgb,var(--sv) 84%,#000)}& b{font-size:14.5px;color:#192045}& em{font-style:normal;font-size:11.5px;color:#5d6a80}}
& .lms-pr{display:grid;justify-items:end;& b{font-size:20px;line-height:1;color:color-mix(in srgb,var(--sv) 84%,#000)}& em{font-style:normal;font-size:11px;color:#5d6a80}}}
.lms-list{padding:4px 6px}
.lms-mods{display:grid;gap:2px}
.lms-mod{display:grid;grid-template-columns:28px minmax(0,1fr) 96px auto;gap:10px;align-items:center;padding:8px 8px;border-radius:9px;
& .lms-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef1f6;color:#5d6a80;font-style:normal;font-size:11px;font-weight:650;& .ico{width:14px;height:14px}}
&.is-0 .lms-n{background:#dff3e8;color:#16794f}
&.is-1 .lms-n{background:var(--sv);color:#fff}
& .lms-mt{display:grid;min-width:0;& b{font-size:12.5px;color:#192045}& em{font-style:normal;font-size:11.5px;color:#5d6a80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
& .lms-mm{display:grid;gap:3px;& em{font-style:normal;font-size:11px;color:#5d6a80}}
&.is-on{background:color-mix(in srgb,var(--sv) 7%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sv) 45%,#fff)}}
.lms-sub{display:grid;margin:0 0 4px 22px;border-left:2px solid #d6e2f7;
& >span{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:5px 10px;font-size:12px;
& i{display:grid;place-items:center;color:#5d6a80;& .ico{width:15px;height:15px}}
& b{font-weight:550;color:#192045;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& em{font-style:normal;font-size:11px;color:#5d6a80}
& u{text-decoration:none;font-size:11px;padding:2px 8px;border-radius:99px;background:#eef1f6;color:#47527e}
&.is-done u{background:#dff3e8;color:#16794f}&.is-on u{background:color-mix(in srgb,var(--sv) 14%,#fff);color:color-mix(in srgb,var(--sv) 84%,#000)}}}

/* lesson */
.lms-play{display:grid;padding:0;overflow:hidden}
.lms-pl{display:grid;background:#0e1331}
.lms-vid{position:relative;display:block;
& .mk-img{aspect-ratio:16/9;border-radius:0;& img{object-fit:cover;filter:brightness(.7)}}
& .lms-vt{position:absolute;left:12px;bottom:10px;right:64px;z-index:2;display:grid;gap:2px;color:#fff;& small{font-size:11px;letter-spacing:.06em;opacity:.85}& b{font-size:15px;line-height:1.25;text-shadow:0 1px 6px #0008}}
& .lms-pb{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#ffffffe6;color:#192045;& .ico{width:20px;height:20px}}}
.lms-ctl{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#0e1331;color:#e6ebf3;font-size:11.5px;
& i{display:grid;place-items:center;font-style:normal;& .ico{width:16px;height:16px}}
& .lms-sp{padding:1px 7px;border-radius:5px;background:#ffffff1f;font-size:11px}
& .lms-seek{position:relative;flex:1;height:5px;border-radius:99px;background:#ffffff33;& u{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:#e48a3b}& s{position:absolute;top:-2px;width:2px;height:9px;background:#fff;opacity:.8}}}
.lms-lt{display:grid;gap:1px;padding:10px 12px 12px;& b{font-size:13.5px;color:#192045}& em{font-style:normal;font-size:11.5px;color:#5d6a80}}
.lms-side{align-content:start}
.lms-steps{display:grid;gap:2px;margin-bottom:10px;
& >span{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 6px;border-radius:8px;font-size:12px;
& i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eef1f6;color:#5d6a80;font-style:normal;font-size:11px;font-weight:650;& .ico{width:12px;height:12px}}
& b{font-weight:550;color:#192045;line-height:1.3}& em{font-style:normal;font-size:11px;color:#5d6a80}
&.is-done i{background:#dff3e8;color:#16794f}&.is-done b{color:#5d6a80}
&.is-on{background:color-mix(in srgb,var(--sv) 8%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sv) 45%,#fff);& i{background:var(--sv);color:#fff}}}}

/* assignment */
.lms-brief{padding:12px 14px}
.lms-ex{display:grid;gap:6px;align-content:start;
& small{margin-top:4px;font-size:11px;font-weight:650;letter-spacing:.05em;color:#5d6a80}
& small:first-child{margin-top:0;color:color-mix(in srgb,var(--sv) 84%,#000)}
& .lms-et{font-size:15px;line-height:1.3;color:#192045}
& p{margin:0;font-size:12.5px;line-height:1.5;color:#3a446f}
& .lms-chips{display:flex;flex-wrap:wrap;gap:6px}}
.lms-file{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:8px 10px;border-radius:9px;box-shadow:inset 0 0 0 1px #dfe5ee;background:#f8fafc;
& i{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#e7effd;color:color-mix(in srgb,var(--sv) 84%,#000);& .ico{width:16px;height:16px}}
& b{font-size:12.5px;color:#192045;overflow-wrap:anywhere}& em{font-style:normal;font-size:11px;color:#5d6a80}& u{color:#5d6a80;& .ico{width:16px;height:16px}}}
.lms-crit{display:grid;gap:5px;margin:0;padding:0;list-style:none;
& li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;font-size:12.5px;line-height:1.4;color:#252d51}
& li i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--sv);color:#fff;& .ico{width:12px;height:12px}}}
.lms-hand{display:grid;gap:8px;align-content:start}
.lms-up{display:grid;justify-items:center;gap:3px;padding:16px 10px;border:1.5px dashed #b9c6dc;border-radius:10px;background:#f7f9fd;text-align:center;
& i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e7effd;color:color-mix(in srgb,var(--sv) 84%,#000);& .ico{width:18px;height:18px}}
& b{font-size:12.5px;color:#192045}& em{font-style:normal;font-size:11.5px;color:#5d6a80}}
.lms-sm{font-size:11px;font-weight:650;letter-spacing:.05em;color:#5d6a80}
.lms-ta{display:grid;gap:6px;padding:9px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px #dfe5ee;& i{display:block;height:7px;border-radius:99px;background:#e6ebf3}& i.s{width:55%}}
.lms-act{display:flex;justify-content:flex-end;gap:8px;
& i{padding:6px 14px;border-radius:7px;box-shadow:inset 0 0 0 1px #cfd7e3;color:#47527e;font-style:normal;font-size:12px}
& b{padding:6px 16px;border-radius:7px;background:var(--sv);color:#fff;font-size:12px}}

/* marking grid */
.lms-rub{padding:12px}
.lms-rb{display:grid;border-radius:9px;box-shadow:inset 0 0 0 1px #e3e8ef;overflow:hidden}
.lms-rr{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;align-items:stretch;border-bottom:1px solid #eef1f5;
& >b{display:grid;gap:1px;align-content:center;padding:9px 10px;font-size:12.5px;color:#192045;& em{font-style:normal;font-size:11px;font-weight:400;color:#5d6a80}}
& >i{position:relative;display:grid;align-content:center;gap:2px;padding:9px 24px 9px 10px;border-left:1px solid #eef1f5;font-style:normal;font-size:11.5px;color:#5d6a80;& em{font-style:normal}& .ico{position:absolute;right:7px;top:7px;width:15px;height:15px}}
&.is-head{background:#f5f7fb;& >i{font-size:12px;font-weight:650;color:#252d51;& em{font-size:11px;font-weight:400;color:#5d6a80}}}
& >i.is-pick{color:#192045;font-weight:550}
& >i.is-0{background:#fdecea;box-shadow:inset 0 0 0 1.5px #e8a39d;& .ico{color:#b42318}}
& >i.is-1{background:#eaf1fd;box-shadow:inset 0 0 0 1.5px #9bb9ee;& .ico{color:color-mix(in srgb,var(--sv) 84%,#000)}}
& >i.is-2{background:#e4f5ec;box-shadow:inset 0 0 0 1.5px #8ccfae;& .ico{color:#16794f}}
&.is-hi >b{box-shadow:inset 3px 0 0 var(--sv)}}
.lms-rt{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f5f7fb;& b{flex:1;font-size:12.5px}& strong{font-size:18px;color:#192045;& em{font-style:normal;font-size:12px;font-weight:400;color:#5d6a80}}}

/* submission and notes */
.lms-paper{padding:10px 14px}
.lms-doc{display:block;padding:12px 14px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px #e3e8ef,0 1px 4px #1920450d;font-size:13px;line-height:1.85;color:#252d51;
& mark{padding:1px 3px;border-radius:4px;color:inherit;background:#e4f5ec;box-shadow:inset 0 -2px 0 #6cc79b;
& i{display:inline-grid;place-items:center;position:relative;top:-5px;width:17px;height:17px;margin-left:3px;border-radius:50%;background:#16794f;color:#fff;font-style:normal;font-size:11px;font-weight:700;line-height:1}
&.is-warn{background:#fdf1d9;box-shadow:inset 0 -2px 0 #e8b04a;& i{background:#a15c00}}
&.is-bad{background:#fdecea;box-shadow:inset 0 -2px 0 #e8847c;& i{background:#b42318}}
&.is-on{outline:2px solid var(--sv);outline-offset:1px}}}
.lms-notes{align-content:start}
.lms-th{display:grid;gap:8px;
& >span{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;padding:8px;border-radius:9px;box-shadow:inset 0 0 0 1px #eef1f5;background:#fbfcfe;
& b{display:flex;align-items:center;gap:6px;font-size:12px;color:#192045;& em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:#5d6a80}}
& p{margin:2px 0 0;font-size:12px;line-height:1.45;color:#3a446f}
&.is-on{background:color-mix(in srgb,var(--sv) 6%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sv) 45%,#fff)}}}
.lms-pin{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#16794f;color:#fff;font-style:normal;font-size:11px;font-weight:700;&.is-warn{background:#a15c00}&.is-bad{background:#b42318}}

/* lesson on a phone */
.lms-ph{display:flex;flex:1;flex-direction:column;min-height:0;background:#fff;font-size:12px;line-height:1.35;color:#192040}
.lms-phh{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid #eef1f5;& i{display:grid;place-items:center;& .ico{width:17px;height:17px}}& b{font-size:12.5px;line-height:1.25}}
.lms-pv{position:relative;display:block;& .mk-img{aspect-ratio:16/9;border-radius:0}
& i{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#ffffffe6;color:#192045;& .ico{width:15px;height:15px}}
& u{position:absolute;right:8px;bottom:6px;padding:1px 6px;border-radius:4px;background:#000a;color:#fff;font-size:11px;text-decoration:none}}
.lms-phs{display:grid;gap:5px;padding:9px 12px 4px;& small{font-size:11px;font-weight:650;letter-spacing:.04em;color:color-mix(in srgb,var(--sv) 84%,#000)}}
.lms-phl{display:grid;flex:1;align-content:start;padding:2px 6px;
& >span{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:center;padding:6px;border-radius:8px;
& i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eef1f6;color:#5d6a80;font-style:normal;font-size:11px;font-weight:650;& .ico{width:11px;height:11px}}
& b{font-size:12px;font-weight:550;color:#192045;line-height:1.3}
&.is-done i{background:#dff3e8;color:#16794f}&.is-done b{color:#5d6a80}
&.is-on{background:color-mix(in srgb,var(--sv) 8%,#fff);& i{background:var(--sv);color:#fff}}}}
.lms-pbtn{margin:6px 12px 8px;padding:9px;border-radius:9px;background:var(--sv);color:#fff;text-align:center;font-size:12px;font-weight:650}

/* narrow stages */
@container rl (max-width:520px){
.lms-ch{grid-template-columns:minmax(0,1fr) auto;& .lms-cv{display:none}}
.lms-mod{grid-template-columns:28px minmax(0,1fr) auto;& .lms-mm{display:none}}
.lms-sub{margin-left:8px;& >span{grid-template-columns:20px minmax(0,1fr) auto;& em{display:none}}}
.lms-rr{grid-template-columns:1fr 1fr 1fr 1fr;& >i{padding:8px 20px 8px 8px;& em{display:none}}&.is-head >i em{display:block}}
}
/* tr1:end */

/* tr2:begin */
/* tr2: subject screens of the Đào tạo pages (scripts/training-lp/topics.mjs): debug stream, prompt, page review */

/* event stream of a test device */
.trd-dev{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:2px 2px 9px;border-bottom:1px solid #e6ebf3;
& >i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--sv) 12%,#fff);color:color-mix(in srgb,var(--sv) 84%,#000);font-style:normal;& .ico{width:16px;height:16px}}
& span{display:grid;min-width:0;& b{font-size:12.5px;color:#192045}& em{font-style:normal;font-size:11.5px;color:#5d6a80}}
& u{text-decoration:none;font-size:11px;font-weight:650;padding:2px 8px;border-radius:99px;background:#dff3e8;color:#16794f}}
.trd-st{display:grid;gap:2px;padding-top:6px;
& >span{display:grid;grid-template-columns:42px 24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 6px;border-radius:8px;
& time{font-size:11px;font-variant-numeric:tabular-nums;color:#5d6a80}
& i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eef1f6;color:#47527e;font-style:normal;& .ico{width:13px;height:13px}}
& code{font-size:12px;font-weight:650;color:#192045;background:none;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& em{font-style:normal;font-size:11px;color:#5d6a80}
&.is-hi{background:color-mix(in srgb,var(--sv) 8%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sv) 45%,#fff);
& i{background:var(--sv);color:#fff}}}}

/* prompt and draft */
.trp-q{margin:0;padding:9px 11px;border:1px solid #d9dfe8;border-radius:9px;background:#fbfcfe;font-size:12.5px;line-height:1.5;color:#192045}
.trp-ar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.trb-top{align-self:start}
.trp-at{display:flex;flex-wrap:wrap;gap:6px;
& i{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;background:#eef1f6;font-style:normal;font-size:11.5px;color:#47527e;& .ico{width:13px;height:13px}}}
.trp-go{display:flex;justify-content:flex-end;
& i{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:8px;background:var(--sv);color:#fff;font-style:normal;font-size:12px;font-weight:650;& .ico{width:14px;height:14px}}}
.trp-d{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;margin:0 0 7px;font-size:12.5px;line-height:1.5;color:#192045;
& b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eef1f6;font-size:11px;color:#47527e}
& span{min-width:0}
& mark{padding:0 2px;border-radius:3px;color:inherit;&.is-ok{background:#dff3e8}&.is-bad{background:#fde4e1;box-shadow:0 1.5px 0 #d6453a}}}

/* text ad being written */
.trs-pv{display:grid;gap:9px;& >small{font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:#5d6a80}}
.trs-ad{display:grid;gap:5px;padding:11px 12px;border:1px solid #e3e8ef;border-radius:10px;background:#fff}
.trs-sp{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#47527e;& b{padding:0 5px;border:1px solid #47527e;border-radius:4px;font-size:11px;font-weight:650;color:#192045}}
.trs-h{font-size:14px;font-weight:650;line-height:1.3;color:#1a55c4}
.trs-ad >p{margin:0;font-size:12px;line-height:1.45;color:#394578}
.trs-sl{display:flex;flex-wrap:wrap;gap:3px 14px;& i{font-style:normal;font-size:12px;color:#1a55c4}}

/* page review: a small landing page with numbered pins on the parts the reviewer comments on */
.trv-pg{position:relative;display:grid;gap:14px;padding:12px 12px 12px 16px;border:1px solid #e3e8ef;border-radius:10px;background:#fff}
.trv-nav{display:flex;align-items:center;gap:10px;& b{margin-right:auto;font-size:12px;color:#192045}& i{width:34px;height:6px;border-radius:3px;background:#e1e6ee}}
.trv-hero{display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:12px;align-items:center;
& >span{display:grid;gap:12px;justify-items:start;& h6{margin:0 0 5px;font-size:14px;line-height:1.25;color:#192045}& p{margin:0;font-size:11.5px;color:#5d6a80}}
& .mk-img{display:block;border-radius:8px;overflow:hidden;& img{object-fit:cover}}}
.trv-a{position:relative;padding:8px 10px;border-radius:6px;outline:1.5px dashed #b9c3d2;outline-offset:1px;&.is-hi{outline:2px solid var(--sv)}}
.trv-btn{padding:5px 11px;border-radius:7px;background:var(--sv);color:#fff;font-style:normal;font-size:11.5px;font-weight:650}
.trv-fm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
& i{padding:7px 9px;border:1px solid #d9dfe8;border-radius:7px;font-style:normal;font-size:11.5px;color:#5d6a80;&.is-bad{border-color:#d6453a;background:#fff6f5;color:#b3261e}}}
.trv-ok{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#f4f6fa;font-size:11.5px;color:#47527e;& b{color:#192045}}
.trv-pin{position:absolute;z-index:2;left:-11px;top:-11px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#47527e;color:#fff;text-decoration:none;font-size:11px;font-weight:700;box-shadow:0 0 0 2px #fff;
&.is-hi{background:var(--sv);box-shadow:0 0 0 2px #fff,0 0 0 4px color-mix(in srgb,var(--sv) 40%,#fff)}}
.trv-btn .trv-pin{left:auto;right:-10px}

/* page check in a narrower window: four gauges in one row, field data as name + value over the bar */
@container rl (max-width:720px){
&.tr-lp .rq-gr{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
&.tr-lp .rq-vr{grid-template-columns:minmax(0,1fr) 58px;row-gap:4px;& .rq-sg{grid-column:1/-1;grid-row:2}& small{display:none}}
}

@container rl (max-width:520px){
.trd-st >span{grid-template-columns:38px 22px minmax(0,1fr)}.trd-st >span em{display:none}
.trv-hero{grid-template-columns:minmax(0,1fr)}.trv-hero .mk-img{display:none}
}
/* tr2:end */

/* tr3:begin */
/* tr3: text on filled cells stays readable — funnel bars and heat-map cells go dark once the fill is pale */
& .rz-fb u:is([style*="--k:2"],[style*="--k:3"],[style*="--k:4"],[style*="--k:5"],[style*="--k:6"]){color:#131a4a}
& .rz-hr u{color:color-mix(in srgb,#fff calc((var(--v) - .8) * 5000%),#161d4d)}
/* tr3:end */


/* seo1:begin */
/* seo1: tidy-ups found while auditing the SEO pages (shared one-page frame) */
/* tabs on top: the group captions became stray grid cells — each tab already carries its group colour on the icon */
& .workbench:has(.rl) .wb-list .wb-group{display:none}
& .workbench:has(.rl) .wb-list button{min-height:52px}
/* chapter index: nine chapters stay on one row instead of orphaning the last one */
& .lp-chapters .panel-toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
& a{flex:1 0 auto;padding:9px 8px;text-align:center;white-space:nowrap}}
/* demo label sits fully inside the stage */
& .workbench:has(.rl) .stage > .demo-tag{top:9px;right:24px}
/* next-step card follows the chapters closely — two 112px paddings stacked left an empty band */
& .lp-chapters + .lp-recap{padding-top:24px}
/* hero: callouts and phone no longer float off the container or over the table */
@media(min-width:1101px){
& .hero-inner:has(.rl) .tp-scene{
& .tp-call{transform:translateZ(36px)}
& .tp-side:not(.tp-call){right:6px;bottom:-40px;transform:translateZ(28px)}
& .tp-call.tp-c0{right:28px;top:4px}
& .tp-call:is(.tp-c1,.tp-c2){bottom:30px}}}
/* seo1:end */



/* seo2:begin */
/* seo2: picture mode (scripts/seo-lp/thumbs.mjs) — key-point cards open on a slice of the sample workspace, deliverables on a shelf, a self-check panel */
& .tp-keys.has-th{gap:18px}
& .tp-key.has-th{padding:0;gap:0;overflow:hidden;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
&:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 22px 44px #0008}
& h3{font-size:17px}& p{font-size:14px;line-height:1.55;color:var(--text-3)}}
& .tp-th{position:relative;display:flex;flex-direction:column;justify-content:safe center;height:204px;margin:0;padding:16px;overflow:hidden;border-bottom:1px solid var(--edge);
background:radial-gradient(120% 90% at 0 0,#fff,#e8eff7 58%,#dbe5f0);
&::after{content:"";position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(#dbe5f000,#dbe5f0);pointer-events:none}
& .th-in{flex:none;zoom:.84;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
& .rl-card{box-shadow:0 10px 26px #1920451f,0 1px 2px #1920450f}}
& .tp-key.has-th:hover .th-in{transform:translateY(-8px)}
& .tp-kb{position:relative;display:grid;align-content:start;gap:8px;padding:18px 22px 22px;& .tp-key-n{top:20px}& h3{padding-right:28px}}

/* blocks used by the pictures */
& .th-in{
& .th-q{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:7px 12px;border:1px solid #dfe5ee;border-radius:999px;background:#fff;font-size:12px;color:#192045;box-shadow:0 1px 3px #1920450f;& .ico{width:14px;height:14px;color:#5d6a80}}
& .th-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;& small{display:flex;align-items:center;gap:4px;width:100%;font-size:11px;color:#5d6a80}& .ico{width:12px;height:12px}}
& .th-cap{display:block;margin-top:6px;font-size:11px;text-align:center;color:#5d6a80}
& .th-tree{display:grid;gap:8px;
& >b{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:5px 10px;border-radius:8px;background:var(--sv);color:#fff;font-size:12px;& .ico{width:13px;height:13px}}
& >div{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px;padding-top:10px;border-top:2px solid #cfdae6}
& span{display:grid;align-content:start;gap:4px}
& i{padding:5px 8px;border-radius:7px;background:#eef4fb;box-shadow:inset 0 0 0 1px #cfdcea;font-size:11.5px;font-weight:650;color:#192045;overflow-wrap:anywhere}
& span.is-ok i{background:#e7f6ee;box-shadow:inset 0 0 0 1px #a8dcc0;color:#11613d}
& em{margin-left:8px;padding:2px 8px;border-left:2px solid #cfdae6;font-size:11px;color:#5d6a80}}
& .th-gr{position:relative;height:140px;
& svg{position:absolute;inset:0;width:100%;height:100%}
& line{stroke:#9fb3c8;stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}& line.is-bad{stroke:#d64545}
& .th-gc{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;background:#fff;box-shadow:0 6px 18px #19204526,inset 0 0 0 2px var(--sv);font-size:12px;white-space:nowrap;transform:translate(-50%,-50%);& .mk-fav{width:20px;height:20px;font-size:10px}}
& .th-gn{position:absolute;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #cfdcea;font-size:11px;white-space:nowrap;transform:translate(-50%,-50%);& .ico{width:12px;height:12px;color:var(--sv)}}
& .n0{left:22%;top:20%}& .n1{left:78%;top:20%}& .n2{left:22%;top:80%}& .n3{left:78%;top:80%}
& .th-gn.is-bad{background:#fff4f4;box-shadow:inset 0 0 0 1px #f0b8b8;color:#a33434;& .ico{color:#d64545}}
& .th-gn.is-warn{background:#fff8ec;box-shadow:inset 0 0 0 1px #f1d29a;& .ico{color:#c98a16}}}
& .th-talk{display:grid;gap:7px;
& span{display:flex;align-items:flex-end;gap:6px}& .rl-av{width:22px;height:22px;font-size:10px}
& em{max-width:84%;padding:7px 10px;border-radius:12px 12px 12px 3px;background:#eef2f7;font-size:11.5px;line-height:1.4}
& span.is-me{justify-content:flex-end;& em{border-radius:12px 12px 3px 12px;background:var(--sv);color:#fff}}}
& .th-vs{display:grid;gap:8px;
& span{display:grid;gap:4px;padding:9px 11px;border-radius:9px}
& small{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}& .ico{width:12px;height:12px}
& b{font-size:12.5px;line-height:1.4}
& .is-bad{background:#fff3f3;box-shadow:inset 0 0 0 1px #f3c4c4;& small{color:#c13d3d}& b{color:#7a2b2b;text-decoration:line-through;text-decoration-color:#d645457a}}
& .is-ok{background:#ecf8f1;box-shadow:inset 0 0 0 1px #aedcc2;& small{color:#16804f}& b{color:#12452d}}}
& .th-ai{display:grid;gap:6px;padding:10px 12px;border-radius:10px;background:linear-gradient(135deg,#f1f5ff,#f6f0ff);box-shadow:inset 0 0 0 1px #d9def5;
& small{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:650;color:#5b45d6}& .ico{width:12px;height:12px}
& p{margin:0;font-size:11.5px;line-height:1.5;color:#273158}
& >span{display:flex;flex-wrap:wrap;gap:5px}
& i{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #d9def5;font-size:10.5px;& .mk-fav{width:14px;height:14px;font-size:8px}}
& i.is-own{box-shadow:inset 0 0 0 1.5px var(--sv);font-weight:650}}
& .th-rv{display:grid;gap:7px;
& .th-rh,& .th-rp{display:flex;align-items:center;gap:8px;& >span{display:grid;flex:1;min-width:0;line-height:1.3}& b{font-size:12px}& em{font-size:11px;color:#5d6a80}}
& .th-rh i{color:#e2a02e;font-size:12px;letter-spacing:1px}
& p{margin:0;font-size:12px;line-height:1.45}
& .th-rp{padding:7px 9px;border-radius:8px;background:#f3f6fa;& .mk-fav{width:22px;height:22px;font-size:10px}}}
& .th-pd{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;
& >i .mk-img{border-radius:8px}& >span{display:grid;align-content:start;gap:5px}& b{font-size:12.5px}& >span>span{display:flex;flex-wrap:wrap;gap:4px}
& em{display:flex;align-items:center;gap:5px;font-size:11px;color:#192045;& .ico{width:12px;height:12px;color:#1f9d63}& u{margin-left:auto;text-decoration:none;color:#5d6a80}}}
& .th-img{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:start;
& >i .mk-img{border-radius:8px}& >span{display:grid;gap:5px}& small{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:#5d6a80}& b{font-size:12.5px;line-height:1.35}& >span>span{display:flex;flex-wrap:wrap;gap:4px}}
& .th-pills{display:grid;gap:6px;& span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;background:#f5f8fb;box-shadow:inset 0 0 0 1px #e3e9f0}& b{font-size:12px;font-weight:600}
& span.is-ok{background:#effaf4;box-shadow:inset 0 0 0 1px #bfe4cf}}
& .th-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;& span{display:flex;align-items:center;gap:4px;font-size:11px;color:#5d6a80}& .ico{width:12px;height:12px;color:#1f9d63}}
& .th-lines{display:grid;gap:6px;margin-top:10px;& i{height:7px;border-radius:4px;background:#e6ebf2}& i.s{width:60%}}
& .th-faq{display:grid;gap:5px;& span{display:grid;gap:4px;padding:7px 10px;border-radius:8px;background:#f5f8fb}& span.on{background:#eef7f3;box-shadow:inset 0 0 0 1px #bfe4cf}
& b{display:flex;align-items:center;gap:6px;font-size:12px}& .ico{width:12px;height:12px;color:#5d6a80}& em{padding-left:18px;font-size:11.5px;line-height:1.45;color:#38426d}}
& .th-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:8px;border-radius:8px;background:var(--sv);color:#fff;font-size:12px;font-weight:650;& .ico{width:13px;height:13px}}
& .rl-ob.is-hi{background:#fff8e6}}

/* deliverables shelf: each item a document, the exclusions as struck-out tags */
& .op-ship{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;margin-top:22px;
& small{display:flex;align-items:center;gap:7px;margin-bottom:14px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase}& small .ico{width:14px;height:14px}}
& .op-ship-in{padding:22px;border:1px solid var(--edge);border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,transparent),#0000 55%),var(--surface);& small{color:var(--accent)}}
& .op-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:16px 12px;margin:0;padding:0;list-style:none;
& li{display:grid;justify-items:center;gap:10px;font-size:13px;line-height:1.4;text-align:center;color:var(--text)}}
& .op-doc{position:relative;display:grid;align-content:start;gap:6px;width:78px;height:96px;padding:14px 12px;border-radius:6px 16px 6px 6px;background:linear-gradient(180deg,#fff,#e9eff6);box-shadow:0 12px 26px #0007,inset 0 0 0 1px #ffffff80;transition:transform .35s ease;
& i{height:5px;border-radius:3px;background:#cdd7e3}& i.s{width:60%}
& b{position:absolute;right:-8px;bottom:-8px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:#06092d;box-shadow:0 6px 14px #0006;& .ico{width:15px;height:15px}}
&::before{content:"";position:absolute;top:0;right:0;width:16px;height:16px;border-radius:0 16px 0 6px;background:#c9d4e2}}
& .op-docs li:hover .op-doc{transform:translateY(-5px) rotate(-2deg)}
& .op-ship-out{padding:22px;border:1px dashed var(--edge);border-radius:18px;background:var(--surface);& small{color:#f2b36b}
& ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
& li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#ffffff08;font-size:14px;line-height:1.45;color:var(--text-2);& .ico{flex:none;width:16px;height:16px;color:#f2b36b}}}

/* "hợp / chưa hợp" as a self-check panel */
& .op-ck{position:relative;margin-top:22px;padding:16px 22px 22px;border-radius:18px;background:linear-gradient(180deg,#f7f9fc,#e9eff6);box-shadow:0 26px 60px #0008;color:#192045}
& .op-ck-bar{display:flex;gap:6px;margin-bottom:12px;& i{width:10px;height:10px;border-radius:50%;background:#d5dde8}}
& .op-ck-t{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:15px;& .ico{width:18px;height:18px;padding:3px;border-radius:6px;background:#0d7d61;color:#fff}}
& .op-ck-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;
& >div{display:grid;align-content:start;gap:8px;padding:14px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1920451a}
& small{margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
& span{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:#f4f7fa;font-size:14px;line-height:1.4}
& .is-yes small{color:#16804f}& .is-no small{color:#c0582b}}
& .op-tg{position:relative;flex:none;width:30px;height:17px;border-radius:999px;background:#cfd8e3;
&::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003}}
& .op-ck .is-yes .op-tg{background:#1f9d63;&::after{left:15px}}
@media(max-width:900px){& .op-ship,& .op-ck-cols{grid-template-columns:minmax(0,1fr)}& .tp-th{height:188px}}

/* SEO group page (scripts/seo-lp/hub.mjs): problem → service router, a picture card per service */
& .hub-route{padding:16px 22px 22px;border-radius:18px;background:linear-gradient(180deg,#f7f9fc,#e9eff6);box-shadow:0 26px 60px #0008;color:#192045;
& ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:0;padding:0;list-style:none}
& li{display:grid;grid-template-columns:minmax(0,1fr) minmax(16px,40px) auto;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1920451a}
& .hub-pb{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35;& i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:#eef3f8;color:#0d7d61}& .ico{width:16px;height:16px}}
& .hub-ln{height:2px;background:repeating-linear-gradient(90deg,#b9c6d4 0 4px,#0000 4px 8px)}
& a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 34%,#fff);color:#131a4a;font-size:13px;font-weight:650;text-decoration:none;white-space:nowrap;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 80%,#131a4a);transition:transform .2s ease;& .ico{width:14px;height:14px}&:hover{transform:translateX(3px)}}}
& .hub-group{margin-top:38px;&:first-child{margin-top:6px}}
& .hub-gh{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);
& .ico{width:18px;height:18px}& em{margin-left:auto;font-size:12px;font-style:normal;letter-spacing:.4px;text-transform:none;color:var(--text-3)}}
& .hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
& .hub-card{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid var(--edge);border-radius:18px;background:var(--surface);
transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
&:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 24px 50px #0009,0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}}
& .hub-art{position:relative;height:228px;overflow:hidden;border-bottom:1px solid var(--edge);
background:radial-gradient(120% 110% at 0 0,color-mix(in srgb,var(--c) 34%,#0e1340),#0b1038 72%);
&::after{content:"";position:absolute;inset:auto 0 0;height:56px;background:linear-gradient(#0b103800,#0b1038d9);pointer-events:none}}
& .hub-shot{display:block;width:780px;margin:18px 0 0 18px;zoom:.42;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
& .hub-pip{position:absolute;right:14px;bottom:12px;z-index:1;width:340px;zoom:.5;border-radius:12px;box-shadow:0 22px 44px #000b;transform:translateY(10px) rotate(-1.5deg);transition:transform .5s ease}
& .hub-card:hover .hub-shot{transform:translateY(-14px)}
& .hub-card:hover .hub-pip{transform:translateY(0) rotate(0)}
& .hub-body{position:relative;display:grid;align-content:start;gap:9px;padding:18px 22px 22px;
& h3{margin:0;padding-right:30px;font-size:19px;line-height:1.3;letter-spacing:-.2px}
& h3 a{color:var(--text);text-decoration:none;&::after{content:"";position:absolute;inset:0;z-index:2}}
& h3 a:focus-visible{outline:none;&::after{border-radius:18px;box-shadow:inset 0 0 0 2px var(--c)}}
& p{margin:0;font-size:14px;line-height:1.55;color:var(--text-3)}}
& .hub-card .hub-body{position:static}
& .hub-num{position:absolute;top:246px;right:20px;font-size:12px;letter-spacing:1px;color:var(--c)}
& .hub-tags{display:flex;flex-wrap:wrap;gap:6px;& i{padding:3px 9px;border-radius:999px;background:#ffffff0d;box-shadow:inset 0 0 0 1px var(--edge);font-size:12px;font-style:normal;color:var(--text-2)}}
& .hub-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--c);& .ico{width:16px;height:16px;transition:transform .25s ease}}
& .hub-card:hover .hub-go .ico{transform:translateX(4px)}
@media(max-width:1000px){& .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}& .hub-route ul{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){& .hub-grid{grid-template-columns:minmax(0,1fr)}& .hub-route li{grid-template-columns:minmax(0,1fr);& .hub-ln{display:none}& a{justify-self:start}}}
/* seo2:end */

/* hero: a bigger screen, callouts around it instead of over the copy */
@media(min-width:1101px){
.hero-inner:has(.rl){grid-template-columns:minmax(0,39%) minmax(0,1fr);gap:24px}
.hero-inner:has(.rl) .tp-scene{justify-self:start;width:calc(100% + max(0px,min(150px,50vw - 561px)));max-width:780px;padding:48px 0 100px;
& .tp-main{width:100%}
& .tp-side{right:22px;bottom:-62px;width:176px;& .mk-phone{width:176px}}
& .tp-c0{right:0;top:-4px;left:auto}
& .tp-c1{left:14px;bottom:6px;top:auto}
& .tp-c2{left:min(264px,38%);bottom:6px;top:auto}}}
}