/* Website & Landing Page services (scripts/web-atlas): look-alikes of the sample landing page, WordPress admin,
   Google Analytics, Tag Manager, Clarity, a CRM, a monitor... drawn in CSS/SVG. Loaded after seo-atlas-lp.css and
   uses its base (.sa, .sa-gc, .sa-chip, .sa-dot, sheets, browser and phone frames). Sample data only. */

/* ================= application window: top bar, left menu, title, body ================= */
.sa{
.wa-ap{display:grid;grid-template-rows:auto 1fr;min-height:100%;background:#f8f9fa;
--ap-top:#fff;--ap-ink:#3c4043;--ap-acc:#1a73e8;--ap-on:#e8f0fe;--ap-onink:#1967d2;--ap-nav:#fff;--ap-main:#f8f9fa;
}
.wa-ap-top{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid #dadce0;background:var(--ap-top);color:var(--ap-ink)}
.wa-ap-brand{display:flex;align-items:center;gap:8px;font-size:15px;color:#5f6368;white-space:nowrap;
& i:not(.sa-dot){display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--ap-acc);font-size:11px;font-weight:700;color:#fff}
& b{font-weight:400}
}
.wa-ap-prop{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #dadce0;border-radius:8px;background:#fff;font-size:12px;color:#3c4043;white-space:nowrap;min-width:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;
.ico{width:11px;height:11px;rotate:90deg;flex:none}
}
.wa-ap-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:8px;background:#f1f3f4;color:#5f6368;font-size:12px;
& em{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
.wa-ap-sp{flex:1}
.wa-ap-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#34a853;font-size:12px;font-weight:700;color:#fff}
.wa-ap-body{display:grid;grid-template-columns:var(--ap-navw,172px) minmax(0,1fr);min-height:330px}
.wa-ap-nav{display:grid;align-content:start;gap:1px;padding:8px 8px 8px 0;background:var(--ap-nav);border-right:1px solid #ebedf0}
.wa-an{display:flex;align-items:center;gap:11px;min-width:0;padding:8px 14px;border-radius:0 18px 18px 0;font-size:12.5px;color:var(--ap-ink);
& em{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
&.is-sub{padding-left:46px}
&.is-on{background:var(--ap-on);color:var(--ap-onink);font-weight:600}
.ico{color:#5f6368}
&.is-on .ico{color:var(--ap-onink)}
}
.wa-ap-main{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;min-width:0;padding:14px 16px 18px;background:var(--ap-main)}
.wa-ap-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
& h3{font-size:19px;font-weight:400}
& span{font-size:12px;color:var(--ap-acc);text-align:right}
}

/* products: colours only */
.wa-ap.is-ga .wa-ap-brand i{background:linear-gradient(90deg,#f9ab00 0 33%,#e37400 33% 66%,#e8710a 66%);box-shadow:inset 0 -9px #fff4;color:transparent}
.wa-ap.is-gtm{--ap-acc:#4285f4}
.wa-ap.is-clr{--ap-acc:#0078d4;--ap-on:#e5f1fb;--ap-onink:#0063b1;--ap-ink:#323130}
.wa-ap.is-crm{--ap-acc:#8a4b12;--ap-on:#f6e9d6;--ap-onink:#6b3a0d;--ap-ink:#3d2a17;--ap-main:#faf6ef;--ap-top:#fffdf9}
.wa-ap.is-crm .wa-ap-top{border-color:#eee4d6}
.wa-ap.is-crm .wa-ap-av{background:#b0722a}
.wa-ap.is-up{--ap-acc:#3bd671;--ap-on:#e8f9ee;--ap-onink:#12823a}
.wa-ap.is-up .wa-ap-brand i{color:#0a3d1c}
.wa-ap.is-wp{--ap-top:#1d2327;--ap-ink:#f0f0f1;--ap-acc:#2271b1;--ap-on:#2271b1;--ap-onink:#fff;--ap-nav:#1d2327;--ap-main:#f0f0f1}
.wa-ap.is-wp .wa-ap-top{border-color:#1d2327}
.wa-ap.is-wp .wa-ap-brand{color:#f0f0f1}
.wa-ap.is-wp .wa-ap-brand i{border-radius:50%;background:#f0f0f1;color:#1d2327}
.wa-ap.is-wp .wa-ap-prop{border-color:#3a4159;background:#2b3146;color:#f0f0f1}
.wa-ap.is-wp .wa-ap-av{background:#2271b1}
.wa-ap.is-wp .wa-ap-nav{border-color:#1d2327;padding-right:0}
.wa-ap.is-wp .wa-an{border-radius:0;color:#c3c4c7}
.wa-ap.is-wp .wa-an .ico{color:#a7aaad}
.wa-ap.is-wp .wa-an.is-on{color:#fff}
.wa-ap.is-wp .wa-an.is-on .ico{color:#fff}
.wa-ap.is-wp .wa-ap-head h3{font-size:22px;color:#1d2327}
.wa-ap.is-wp .wa-ap-head span{color:#50575e}
.wa-ap.is-ga{--ap-navw:150px}
.wa-ap.is-crm{--ap-navw:136px}
.wa-ap.is-dev{--ap-top:#f1f3f4;--ap-acc:#1a73e8}
}

/* ================= tables, KPI tiles, bars ================= */
.sa{
.wa-tbw{max-width:100%;overflow-x:auto}
.wa-tb{width:100%;border-collapse:collapse;font-size:12.5px;
& th{padding:9px 8px 9px 10px;border-bottom:1px solid #ebedf0;font-size:11.5px;font-weight:600;line-height:1.25;color:#5f6368;text-align:left;vertical-align:bottom}
& td{padding:9px 8px 9px 10px;border-bottom:1px solid #f1f3f4;text-align:left;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
& :is(th,td).r{text-align:right}
& tr:last-child td{border-bottom:0}
}
.wa-mono{padding:1px 6px;border-radius:4px;background:#f1f3f4;font:12px/1.5 Consolas,"Courier New",monospace;color:#3c4043}
.wa-ok{display:inline-flex;align-items:center;gap:5px;color:#137333;
.ico{width:13px;height:13px}
}
.wa-no{display:inline-flex;align-items:center;gap:5px;color:#b3261e;
.ico{width:13px;height:13px}
}
.wa-pc > .wa-kp{border-top:0}
.wa-kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:#ebedf0}
.wa-k{display:grid;gap:2px;align-content:start;padding:10px 12px 9px;background:#fff;
& em{font-size:11.5px;line-height:1.3;color:#5f6368}
& b{font-size:22px;font-weight:400;line-height:1.2;color:#202124}
& i:not(.sa-dot){font-size:11px;color:#5f6368}
&.is-g b{color:#188038}
&.is-r b{color:#d93025}
&.is-y b{color:#b06000}
}
.wa-bars{display:grid;gap:9px;padding:10px 14px 12px;
& li{display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12px}
& li > span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#3c4043}
& li > b{font-weight:600;min-width:34px;text-align:right}
}
.wa-bar{display:block;height:8px;border-radius:4px;background:#e8eaed;overflow:hidden;
& u{display:block;height:100%;border-radius:4px;background:#4285f4;text-decoration:none}
&.is-g u{background:#34a853}
&.is-y u{background:#f9ab00}
&.is-r u{background:#ea4335}
}
.wa-note{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 12px;border:1px solid #fde293;border-radius:8px;background:#fef7e0;font-size:11.5px;line-height:1.5;color:#7a5200;
.ico{flex:none;width:14px;height:14px;margin-top:1px}
}
}

/* ================= Tag Assistant (Google Tag Manager preview) ================= */
.sa{
.wa-tg{background:#f8f9fa}
.wa-tg-top{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #dadce0;background:#fff;
& b{font-size:14px;font-weight:600;color:#3c4043}
& span{font-size:11.5px;color:#5f6368}
}
.wa-tg-st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;background:#e6f4ea;font-size:11.5px;color:#137333;
.ico{width:12px;height:12px}
}
.wa-tg-body{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:290px}
.wa-tg-sum{display:grid;align-content:start;gap:2px;padding:10px 8px;border-right:1px solid #ebedf0;background:#fff;
& p{padding:2px 8px 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#5f6368}
& span{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;font-size:12px;color:#3c4043;white-space:nowrap;
& i:not(.sa-dot){display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#f1f3f4;font-size:11px;color:#5f6368}
&.is-on{background:#e8f0fe;color:#1967d2;font-weight:600}
&.is-on i:not(.sa-dot){background:#1a73e8;color:#fff}}
}
.wa-tg-main{display:grid;gap:12px;align-content:start;min-width:0;padding:14px 16px}
.wa-tg-h{font-size:16px;color:#202124}
.wa-tg-s{border:1px solid #dadce0;border-radius:8px;background:#fff;overflow:hidden;
& ul{display:grid}
& li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:10px 14px;border-top:1px solid #f1f3f4;font-size:12.5px}
& li > b{font-weight:600}
& li > em{flex:1;min-width:150px;font-size:11.5px;color:#5f6368}
}
.wa-tg-k{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:12.5px;font-weight:600;color:#5f6368;
.ico{width:14px;height:14px}
&.is-g{color:#137333}
}
}

/* ================= lead e-mail ================= */
.sa{
.wa-mail{background:#fff}
.wa-mail-top{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #ebedf0;
& b{font-size:14px;font-weight:600;color:#3c4043}
& span{font-size:11.5px;color:#5f6368}
}
.wa-mail-sub{display:grid;gap:3px;padding:14px 16px 8px;
& h4{font-size:16px;font-weight:400;color:#202124}
& p{font-size:11.5px;color:#5f6368}
}
.wa-mail-t{width:calc(100% - 32px);margin:4px 16px 6px;border-collapse:collapse;font-size:12.5px;
& th{width:96px;padding:7px 8px 7px 0;border-bottom:1px solid #f1f3f4;font-weight:400;text-align:left;color:#5f6368;vertical-align:top}
& td{padding:7px 0;border-bottom:1px solid #f1f3f4;color:#202124}
}
.wa-mail-b{padding:6px 16px 16px;
& span{display:inline-flex;align-items:center;padding:8px 18px;border-radius:18px;background:#1a73e8;font-size:12.5px;font-weight:600;color:#fff}
}
}

/* ================= A/B test result ================= */
.sa{
.wa-ab{display:grid;gap:12px;padding:14px 16px 16px;background:#f8f9fa}
.wa-ab-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
& b{font-size:14px;font-weight:600}
& span{font-size:12px;color:#5f6368}
}
.wa-ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wa-ab-v{display:grid;gap:8px;align-content:start;padding:12px 14px;border:1px solid #dadce0;border-radius:10px;background:#fff;
& h4{font-size:13px;font-weight:400;line-height:1.4;color:#3c4043}
&.is-lead{border-color:#b7e1c6;box-shadow:0 0 0 1px #b7e1c6}
& dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
& dt{font-size:11px;color:#5f6368}
& dd{font-size:16px}
& dd b{font-weight:600}
& dd b.is-up{color:#188038}
}
.wa-ab-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#5f6368}
.wa-ab-n{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid #fde293;border-radius:8px;background:#fef7e0;font-size:12px;line-height:1.5;color:#7a5200;
.ico{flex:none;width:16px;height:16px;margin-top:1px}
& span{display:grid;gap:2px}
& b{font-size:12.5px}
}
.wa-ab-s{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:11.5px;line-height:1.5;color:#5f6368;
.ico{flex:none;width:14px;height:14px;margin-top:1px;color:#188038}
}
}

/* ================= Clarity: scroll map ================= */
.sa{
.wa-sc{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}
.wa-sc-pg{position:relative;display:grid;grid-template-rows:repeat(5,minmax(28px,auto));border-radius:6px;overflow:hidden;border:1px solid #dadce0;
& i:not(.sa-dot){display:flex;align-items:flex-end;padding:5px 7px;font-size:10.5px;line-height:1.2;color:#fff;text-shadow:0 1px 2px #0006}
& i.is-0{background:#d13438;min-height:44px}
& i.is-1{background:#e8710a;min-height:44px}
& i.is-2{background:#f2c811;min-height:44px;color:#3b3a39;text-shadow:none}
& i.is-3{background:#4ba3d9;min-height:44px}
& i.is-4{background:#2a5db0;min-height:44px}
}
.wa-sc-fold{position:absolute;z-index:1;top:88px;left:0;right:0;display:flex;align-items:flex-start;padding-top:3px !important;gap:4px;padding:0 6px;border-top:2px dashed #fff;font-size:10.5px;font-weight:700;color:#fff;text-shadow:0 1px 2px #0008;white-space:nowrap}
.wa-sc-st li{grid-template-columns:118px minmax(0,1fr) auto !important}
.wa-sc-st{min-width:0;border:1px solid #e1dfdd;border-radius:6px;background:#fff;
.wa-bars{padding:6px 12px 12px}
}
.wa-sc-t{padding:10px 12px 0;font-size:12.5px;font-weight:600;color:#323130;
& small{font-size:11px;font-weight:400;color:#605e5c}
}
}

/* ================= the sample landing page: "Nến thơm quà tân gia" ================= */
.sa{
.wa-brand{font:700 17px/1 Cambria,"Times New Roman",serif;color:#5b3a1e;letter-spacing:.2px;
& small{font:400 11px/1 Arial,sans-serif;color:#8a7761}
}
.wa-star{color:#f9ab00;font-size:12px;letter-spacing:1px}
.wa-rate{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
& b{font-size:15px}
& em{font-size:11.5px;color:#8a7761}
}
.wa-photo{display:inline-flex;align-items:flex-end;justify-content:center;gap:4px;width:76px;height:76px;padding:0 6px 6px;border-radius:8px;background:linear-gradient(160deg,#f7ead6,#e8cfa3);
& svg{height:auto}
}
.wa-av{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#f1dfc6;font-size:12px;font-weight:700;color:#7a4b24}

.wa-lp{display:grid;gap:14px;padding:14px 18px 18px;background:#fffdf9;color:#2b2622;font-size:12.5px;line-height:1.45}
.wa-lp-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eee4d6}
.wa-lp-call{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#8a4b12;white-space:nowrap;
.ico{width:14px;height:14px}
}
.wa-lp-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:center}
.wa-lp-txt{display:grid;gap:9px;align-content:center;min-width:0;
& > p{font-size:13px;line-height:1.55;color:#4a3d30}
& h3{font:700 25px/1.2 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
}
.wa-lp-k{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a4b12}
.wa-lp-chips{display:flex;flex-wrap:wrap;gap:6px 8px;
& li{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid #eadcc4;border-radius:14px;background:#fff;font-size:11.5px;color:#5b3a1e}
.ico{width:13px;height:13px;color:#b0722a}
}
.wa-lp-fine{font-size:11px;line-height:1.5;color:#7a6b58}
.wa-lp-btns{display:flex;flex-wrap:wrap;gap:8px;
& span{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:1px solid #d9a35b;border-radius:22px;font-size:12.5px;font-weight:600;color:#8a4b12}
& .is-p{background:#8a4b12;border-color:#8a4b12;color:#fff}
.ico{width:14px;height:14px}
}
.wa-lp-img{display:grid;place-items:center;min-height:150px;margin:0;padding:14px;border-radius:14px;background:linear-gradient(160deg,#f7ead6,#ecd2a8);
& svg{max-width:100%;height:auto}
}
.wa-lp-ben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
& li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eee4d6;border-radius:10px;background:#fff}
& .ico{flex:none;width:18px;height:18px;margin-top:1px;color:#b0722a}
& span{display:grid;gap:1px;min-width:0;font-size:11.5px;line-height:1.45;color:#6b5d4d}
& b{font-size:12.5px;color:#3d2a17}
}
.wa-lp-proof{display:grid;gap:7px;padding:12px 14px;border:1px solid #eee4d6;border-radius:12px;background:#fff}
.wa-lp-q{margin:0;font:italic 13px/1.5 Cambria,"Times New Roman",serif;color:#3d2a17;
& em{display:block;margin-top:3px;font:400 11px/1.4 Arial,sans-serif;color:#8a7761}
}
.wa-lp-form{display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:#f6e9d6}
.wa-lp-ft{font-size:12.5px;font-weight:700;color:#5b3a1e}
.wa-lp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;
& span{display:flex;align-items:center;padding:8px 12px;border:1px solid #dccdb7;border-radius:8px;background:#fffdf9;font-size:12px;color:#8a7761;white-space:nowrap;overflow:hidden}
& .is-p{justify-content:center;border-color:#8a4b12;background:#8a4b12;font-weight:600;color:#fff}
}
.wa-lp.is-split{align-content:start}

/* the ad the visitor clicked */
.wa-from{display:grid;justify-items:start;gap:7px;
& > span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#8a4b12}
& > span .ico{width:13px;height:13px;rotate:90deg}
}
.wa-adc{display:grid;gap:3px;width:100%;max-width:520px;padding:11px 14px;border:1px solid #dadce0;border-radius:10px;background:#fff;font-family:Arial,sans-serif;box-shadow:0 1px 3px #0001}
.wa-adc-lab{font-size:12px;color:#202124;
& b{font-weight:700}
& span{color:#5f6368}
}
.wa-adc-t{font-size:16px;line-height:1.3;color:#1a0dab}
.wa-adc-d{font-size:12.5px;line-height:1.5;color:#4d5156}

/* home page vs. campaign page */
.wa-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px 16px 16px;background:#f8f9fa}
.wa-vs-c{display:grid;gap:9px;align-content:start;padding:12px;border:1px solid #dadce0;border-radius:10px;background:#fff;min-width:0;
&.is-bad{border-color:#f5b8b3}
&.is-good{border-color:#b7e1c6}
}
.wa-vs-t{display:flex}
.wa-vs-n{font-size:11.5px;line-height:1.5;color:#5f6368}
.wa-mini{display:grid;gap:8px;padding:9px;border:1px solid #eee4d6;border-radius:8px;background:#fffdf9}
.wa-mini-nav{display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;padding-bottom:6px;border-bottom:1px solid #eee4d6;font-size:10.5px;color:#6b5d4d;
&.is-one{justify-content:space-between;
& b{font:700 13px/1 Cambria,serif;color:#5b3a1e}
& span{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:#8a4b12}
.ico{width:11px;height:11px}}
}
.wa-mini-slide{display:grid;gap:3px;place-content:center;min-height:54px;padding:8px;border-radius:6px;background:linear-gradient(135deg,#c9d6e6,#a9bdd6);text-align:center;
& b{font-size:12px;color:#2a3567}
& span{font-size:10.5px;color:#3d587a}
}
.wa-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
& i:not(.sa-dot){display:grid;place-items:center;min-height:30px;border-radius:5px;background:#efe6d6;font-size:10.5px;color:#6b5d4d}
}
.wa-mini-hero{display:grid;gap:5px;justify-items:start;padding:4px 2px;
& h4{font:700 15px/1.25 Cambria,serif;color:#3d2a17}
& p{font-size:11px;line-height:1.45;color:#4a3d30}
}
.wa-mini-cta{display:inline-flex;align-items:center;padding:6px 12px;border-radius:14px;background:#8a4b12;font-size:11px;font-weight:600;color:#fff}
.wa-mini-img{display:grid;place-items:center;min-height:80px;border-radius:8px;background:linear-gradient(160deg,#f7ead6,#ecd2a8);
& svg{max-width:100%;height:auto}
}

/* wireframe of the five parts */
.wa-wf{display:grid;gap:9px;padding:14px 18px 18px;background:#f8f9fa}
.wa-wf-hd{display:flex;justify-content:space-between;padding:7px 12px;border:1px dashed #bdc1c6;border-radius:6px;font-size:11px;color:#5f6368}
.wa-wf-b{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 14px;border:1px dashed #bdc1c6;border-radius:8px;background:#fff;
& > i:not(.sa-dot){display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#e8eaed;font-size:12px;font-weight:700;color:#5f6368}
& > span{display:grid;gap:1px;min-width:0;flex:1;font-size:11.5px;line-height:1.45;color:#5f6368}
& b{font-size:12.5px;color:#202124}
&.is-hero{min-height:78px;border-color:#e8710a;background:#fff8f1}
&.is-form{border-color:#188038;background:#f1faf3}
}

/* proof: rating, reviews, photos */
.wa-pf{display:grid;gap:12px;padding:14px 18px 16px;background:#fffdf9;color:#2b2622}
.wa-pf-sum{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.wa-pf-big{display:grid;gap:1px;justify-items:start;
& b{font:700 32px/1.1 Cambria,serif;color:#3d2a17}
& em{font-size:11.5px;color:#8a7761}
}
.wa-pf-bars{display:grid;gap:3px;flex:1;min-width:140px;
& li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center;font-size:11px;color:#6b5d4d}
.wa-bar u{background:#f2b53c}
}
.wa-pf-rv{display:grid;gap:9px;
& li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eee4d6;border-radius:10px;background:#fff}
& li > span{display:grid;gap:2px;min-width:0;font-size:12.5px;line-height:1.5;color:#3d2a17}
& li b{font-size:12.5px}
& li em{font-size:11px;color:#8a7761}
}
.wa-pf-src{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;color:#6b5d4d;
.ico{flex:none;width:14px;height:14px;margin-top:1px;color:#188038}
}
.wa-pf-photos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
& > span{display:inline-flex}
& em{font-size:11.5px;color:#6b5d4d}
}

/* terms */
.wa-tm{display:grid;gap:10px;padding:14px 18px 16px;background:#fffdf9;color:#2b2622}
.wa-tm-h{font:700 15px/1.3 Cambria,serif;color:#3d2a17}
.wa-tm-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
& li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #eee4d6;border-radius:10px;background:#fff}
& .ico{flex:none;width:18px;height:18px;margin-top:1px;color:#b0722a}
& span{display:grid;gap:2px;min-width:0}
& em{font-size:11px;color:#8a7761}
& b{font-size:12.5px;font-weight:400;line-height:1.45;color:#3d2a17}
}
.wa-tm-n{font-size:11.5px;line-height:1.5;color:#6b5d4d}

/* the form in four states */
.wa-fms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 16px 16px;background:#fffdf9;color:#2b2622}
.wa-fm{display:grid;gap:8px;align-content:start;padding:10px;border:1px solid #eee4d6;border-radius:10px;background:#fff;min-width:0}
.wa-fm-t{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#5b3a1e;
& i:not(.sa-dot){display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f1dfc6;font-size:11px}
}
.wa-fm-f{display:grid;gap:3px;min-width:0;
& em{font-size:11px;font-weight:600;color:#5b3a1e}
& > span{display:flex;align-items:center;min-height:30px;padding:5px 10px;border:1px solid #dccdb7;border-radius:7px;background:#fffdf9;font-size:12px;color:#2b2622;overflow:hidden;white-space:nowrap}
& > span s{color:#a89884}
& small{display:flex;align-items:flex-start;gap:5px;font-size:11px;line-height:1.4;color:#b3261e}
& small .ico{flex:none;width:12px;height:12px;margin-top:1px}
&.is-err > span{border-color:#d93025;background:#fff6f5;box-shadow:0 0 0 1px #d93025}
&.is-ok > span{border-color:#9ccfaa}
&.is-focus > span{border-color:#8a4b12;box-shadow:0 0 0 2px #e8cfa3}
& > span u{display:inline-block;width:1px;height:15px;margin-left:1px;background:#2b2622}
}
.wa-fm-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:6px 14px;border-radius:18px;background:#8a4b12;font-size:12px;font-weight:600;color:#fff;
&.is-busy{background:#b9a284}
.ico{width:13px;height:13px}
}
.wa-fm-done{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid #cfe5d2;border-radius:8px;background:#f1faf2;font-size:11.5px;line-height:1.5;color:#2f5a35;
.ico{flex:none;width:16px;height:16px;margin-top:1px;color:#188038}
& span{display:grid;gap:2px}
& b{font-size:12.5px}
}

/* thank-you page */
.wa-ty{display:grid;gap:12px;padding:6px 2px 4px;
& > p{font-size:13px;line-height:1.55;color:#4a3d30}
}
.wa-ty-ok{display:flex;align-items:center;gap:10px;
& > .ico{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:8px;border-radius:50%;background:#e6f4ea;color:#188038}
& h3{font:700 21px/1.25 Cambria,serif;color:#3d2a17}
}
.wa-ty-steps{display:grid;gap:8px;counter-reset:s;
& li{position:relative;display:grid;gap:1px;padding:9px 12px 9px 44px;border:1px solid #eee4d6;border-radius:10px;background:#fff;font-size:12px;line-height:1.5;color:#6b5d4d;counter-increment:s}
& li::before{content:counter(s);position:absolute;left:12px;top:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f1dfc6;font-size:12px;font-weight:700;color:#7a4b24}
& b{font-size:12.5px;color:#3d2a17}
}

/* the landing page on a phone */
.wa-pl,.wa-pf2,.wa-pp{display:flex;flex-direction:column;gap:9px;min-height:100%;padding:10px 12px 0;background:#fffdf9;color:#2b2622}
.wa-pl-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid #eee4d6;
& b{font:700 15px/1 Cambria,serif;color:#5b3a1e}
& small{font:400 10px/1 Arial,sans-serif;color:#8a7761}
& span .ico{width:16px;height:16px;color:#8a4b12}
}
.wa-pl-img{display:grid;place-items:center;margin:0;padding:10px;border-radius:12px;background:linear-gradient(160deg,#f7ead6,#ecd2a8);
& svg{max-width:100%;height:auto}
}
.wa-pl-h{font:700 18px/1.25 Cambria,serif;letter-spacing:0;color:#3d2a17}
.wa-pl-p{font-size:12px;line-height:1.55;color:#4a3d30}
.wa-pl-chips{display:flex;flex-wrap:wrap;gap:6px;
& li{padding:3px 10px;border:1px solid #eadcc4;border-radius:12px;background:#fff;font-size:11px;color:#5b3a1e}
}
.wa-pl-k{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a4b12}
.wa-pl-ben{display:grid;gap:7px;
& li{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid #eee4d6;border-radius:9px;background:#fff}
& .ico{flex:none;width:16px;height:16px;margin-top:1px;color:#b0722a}
& span{display:grid;font-size:11px;line-height:1.4;color:#6b5d4d}
& b{font-size:12px;color:#3d2a17}
}
.wa-pl-bar{position:sticky;bottom:0;margin:auto -12px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:9px 12px;border-top:1px solid #eee4d6;background:#fffdf9;box-shadow:0 -2px 8px #0000000f;
& span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid #d9a35b;border-radius:22px;font-size:12px;font-weight:600;color:#8a4b12}
& .is-p{background:#8a4b12;border-color:#8a4b12;color:#fff}
.ico{width:14px;height:14px}
}

/* the form on a phone */
.wa-pf2-h{font:700 16px/1.3 Cambria,serif;color:#3d2a17}
.wa-pf2 .wa-fm-b{min-height:42px}
.wa-keys{position:relative;margin:auto -12px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:8px;background:#d1d3d9;
& span{display:grid;place-items:center;min-height:30px;border-radius:6px;background:#fff;font-size:15px;color:#202124;box-shadow:0 1px 0 #0003}
}
.wa-keys-d{position:absolute;z-index:1;top:-9px;right:8px}

/* the proof on a phone */
.wa-pp-h{font:700 16px/1.3 Cambria,serif;color:#3d2a17}
.wa-pp-big{display:grid;gap:1px;justify-items:start;
& b{font:700 30px/1.1 Cambria,serif;color:#3d2a17}
& em{font-size:11px;color:#8a7761}
}
.wa-pp-rv{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:8px;overflow:hidden;
& li{display:grid;gap:3px;align-content:start;padding:9px 11px;border:1px solid #eee4d6;border-radius:10px;background:#fff;font-size:11.5px;line-height:1.45}
& b{font-size:12px;color:#3d2a17}
& li span{color:#4a3d30}
& em{font-size:10.5px;color:#8a7761}
}
.wa-pp-d{align-self:flex-end;margin-top:-4px}
.wa-pp-pol{position:relative;display:grid;gap:6px;margin-top:2px;
& li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:#f6e9d6;font-size:11.5px;color:#5b3a1e}
& .ico{flex:none;width:15px;height:15px;color:#8a4b12}
}
.wa-pp-d3{position:absolute;top:2px;right:2px}
}

@container (max-width:620px){
.sa .wa-lp-hero{grid-template-columns:minmax(0,1fr)}
.sa .wa-lp-img{min-height:120px}
.sa .wa-lp-ben{grid-template-columns:minmax(0,1fr)}
.sa .wa-vs{grid-template-columns:minmax(0,1fr)}
.sa .wa-fms{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-tm-g{grid-template-columns:minmax(0,1fr)}
.sa .wa-lp-row{grid-template-columns:minmax(0,1fr)}
.sa .wa-ab-grid{grid-template-columns:minmax(0,1fr)}
.sa .wa-sc{grid-template-columns:minmax(0,1fr)}
.sa .wa-sc-pg{max-width:210px}
}
@container (max-width:560px){
.sa .wa-ap-body{grid-template-columns:44px minmax(0,1fr)}
.sa .wa-an{justify-content:center;padding:9px 0;border-radius:0}
.sa .wa-an em{display:none}
.sa .wa-an.is-sub{display:none}
.sa .wa-ap-prop,.sa .wa-ap-search{display:none}
.sa .wa-ap-sp{display:block}
.sa .wa-tg-body{grid-template-columns:minmax(0,1fr)}
.sa .wa-tg-sum{display:none}
.sa .wa-ap-main{padding:12px 10px 14px}
.sa .wa-kp{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:420px){
.sa .wa-fms{grid-template-columns:minmax(0,1fr)}
.sa .wa-bars li{grid-template-columns:minmax(70px,40%) minmax(0,1fr) auto}
}

/* ================= sample company site Nha Thom: header, footer, sections, pages ================= */
.sa{
.wa-site{display:grid;align-content:start;background:#fffdf9;color:#2b2622;font-size:12.5px;line-height:1.45}
.wa-sh{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #eee4d6;background:#fffdf9}
.wa-sh-nav{display:flex;flex-wrap:wrap;gap:2px;margin:0 auto 0 6px;
& li{padding:5px 10px;border-radius:14px;font-size:12px;color:#5b3a1e;white-space:nowrap}
& .is-on{background:#f6e9d6;font-weight:700;color:#8a4b12}
}
.wa-sh-nav:has(+ .sa-dot){margin-right:0}
.wa-sh-nav + .sa-dot{margin-right:auto}
.wa-sh-sp{flex:1}
.wa-sh-call{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#8a4b12;white-space:nowrap;
.ico{width:13px;height:13px}
}
.wa-sh-cta{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 14px;border-radius:18px;background:#8a4b12;font-size:12px;font-weight:600;color:#fff}
.wa-ft{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:12px;padding:14px 18px;background:#3d2a17;color:#e9dcc8;font-size:11px;line-height:1.55;
& span{display:grid;gap:2px;align-content:start;min-width:0}
& b{font-size:12px;color:#fff}
}
.wa-cr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:11px;color:#8a7761;
& i:not(.sa-dot){font-style:normal}
& b{font-weight:600;color:#5b3a1e}
}
.wa-sx{display:grid;gap:3px;min-width:0;
& h4{font:700 17px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
}
.wa-sx-k{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#8a4b12}
.wa-sx-p{font-size:12px;line-height:1.5;color:#6b5d4d}
.wa-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
& li{display:grid;gap:3px;align-content:start;padding:12px;border:1px solid #eee4d6;border-radius:12px;background:#fff}
& .ico{width:20px;height:20px;margin-bottom:3px;color:#b0722a}
& b{font-size:12.5px;color:#3d2a17}
& span{font-size:11.5px;line-height:1.45;color:#6b5d4d}
}
.wa-steps{display:grid;gap:8px;
& li{display:flex;gap:9px;align-items:flex-start;min-width:0}
& i:not(.sa-dot){flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#8a4b12;font:700 11px/1 Arial,sans-serif;font-style:normal;color:#fff}
& span{display:grid;gap:1px;min-width:0;font-size:11.5px;line-height:1.45;color:#6b5d4d}
& b{font-size:12px;color:#3d2a17}
}
.wa-sec{display:grid;gap:10px;padding:14px 18px 6px}
.wa-sp{display:grid;gap:14px;padding:12px 18px 18px}
.wa-hh{padding:18px 18px 8px}
.wa-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:8px;padding:12px 18px;background:#f6e9d6;
& b{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#8a4b12}
& span{font:700 13px/1 Cambria,"Times New Roman",serif;color:#5b3a1e}
}

/* a service page, a project */
.wa-sv-h{display:grid;gap:6px;min-width:0;
& h3{font:700 24px/1.2 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& > p{max-width:58ch;font-size:13px;line-height:1.55;color:#4a3d30}
}
.wa-sv-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wa-sv-c{display:grid;gap:7px;align-content:start;min-width:0;padding:12px 14px;border:1px solid #eee4d6;border-radius:12px;background:#fff}
.wa-sv-l{display:grid;gap:6px;
& li{display:flex;gap:7px;align-items:flex-start;font-size:12px;line-height:1.45;color:#4a3d30}
& .ico{flex:none;width:14px;height:14px;margin-top:1px;color:#2e8b49}
}
.wa-sv-p{display:grid;gap:8px;
& .wa-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
.wa-sv-q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:12px;background:#f6e9d6;
& > span:not(.wa-sv-b){display:grid;gap:2px;min-width:0;font-size:12px;line-height:1.45;color:#5b3a1e}
& b{font-size:13.5px;color:#3d2a17}
}
.wa-sv-b{flex:none;display:inline-flex;align-items:center;padding:9px 18px;border-radius:22px;background:#8a4b12;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap}
.wa-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;
& div{display:grid;gap:1px;min-width:0;padding:8px 10px;border:1px solid #eee4d6;border-radius:9px;background:#fff}
& dt{margin:0;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#8a7761}
& dd{margin:0;font-size:12px;font-weight:600;color:#3d2a17}
}
.wa-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
& > span{display:grid;place-items:center;min-height:92px;border-radius:10px;background:linear-gradient(160deg,#f7ead6,#e8cfa3)}
}
.wa-q{margin:0;padding:12px 14px;border-left:3px solid #d9a35b;border-radius:0 10px 10px 0;background:#fff;font:italic 13px/1.5 Cambria,"Times New Roman",serif;color:#3d2a17;
& em{display:block;margin-top:4px;font:400 11px/1.4 Arial,sans-serif;color:#8a7761}
}

/* about, privacy policy */
.wa-ab-h{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center;
& h3{font:700 22px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& p{margin-top:6px;font-size:12.5px;line-height:1.55;color:#4a3d30}
}
.wa-ab-img{display:flex;align-items:flex-end;justify-content:center;gap:8px;min-height:130px;margin:0;padding:14px;border-radius:14px;background:linear-gradient(160deg,#f7ead6,#ecd2a8);
& svg{height:auto}
}
.wa-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
& li{display:grid;gap:2px;padding:10px 12px;border:1px solid #eee4d6;border-radius:10px;background:#fff}
& b{font:700 22px/1.1 Cambria,"Times New Roman",serif;color:#8a4b12}
& span{font-size:11px;line-height:1.4;color:#6b5d4d}
}
.wa-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px;
& li{display:flex;gap:9px;align-items:center;min-width:0;padding:9px 11px;border:1px solid #eee4d6;border-radius:10px;background:#fff}
& li > span:last-child{display:grid;min-width:0;font-size:11.5px}
& b{font-size:12px;color:#3d2a17}
& em{font-style:normal;font-size:11px;color:#8a7761}
}
.wa-legal{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border:1px dashed #d9c3a0;border-radius:10px;background:#fffaf0;
& .ico{flex:none;width:16px;height:16px;margin-top:1px;color:#2e8b49}
& span{display:grid;gap:1px;font-size:11.5px;line-height:1.5;color:#6b5d4d}
& b{font-size:12px;color:#3d2a17}
}
.wa-upd{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#8a7761;
.ico{width:13px;height:13px}
}
.wa-pol{display:grid;gap:10px}
.wa-pol-s{display:grid;gap:5px;padding:12px 14px;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& h5{margin:0;font:700 13.5px/1.3 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& p{margin:0;font-size:12px;line-height:1.55;color:#4a3d30}
}

/* contact */
.wa-ct{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;
& h3{font:700 18px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
}
.wa-ct-f{display:grid;gap:9px;align-content:start;min-width:0;padding:14px 16px;border-radius:12px;background:#f6e9d6;
& .wa-fm-b{justify-self:start}
}
.wa-ct-i{display:grid;gap:9px;align-content:start;min-width:0;
& ul{display:grid;gap:8px}
& li{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:#6b5d4d}
& li > .ico{flex:none;width:15px;height:15px;margin-top:1px;color:#b0722a}
& li > span{display:grid;min-width:0}
& b{font-size:12.5px;color:#3d2a17}
}
.wa-ct-m{height:110px;overflow:hidden;border:1px solid #eee4d6;border-radius:10px;
& .sa-map{width:100%;height:100%;min-height:0;border-radius:0}
}
.wa-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
& span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid #d9a35b;border-radius:22px;font-size:12px;font-weight:600;color:#8a4b12}
& .is-p{background:#8a4b12;border-color:#8a4b12;color:#fff}
.ico{width:14px;height:14px}
}
.wa-pl-bar.is-1{grid-template-columns:minmax(0,1fr)}
.wa-pl-bar.is-2{grid-template-columns:auto minmax(0,1fr)}
.wa-pl-bar.is-3{grid-template-columns:auto auto minmax(0,1fr)}
.wa-pl-bar.is-2 span,.wa-pl-bar.is-3 span{padding:8px 10px;white-space:nowrap}
.wa-sh > .wa-brand{flex:none;white-space:nowrap}

/* the page tree and the menu */
.wa-tree{display:grid;gap:12px;padding:16px 18px;background:#fffdf9}
.wa-tr-root{display:flex;align-items:center;justify-content:center;gap:8px;justify-self:center;padding:9px 22px;border-radius:12px;background:#8a4b12;color:#fff;
& b{font:700 14px/1 Cambria,"Times New Roman",serif}
& em{font-style:normal;font-size:11px;opacity:.85}
}
.wa-tr-cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:16px;
&::before{content:"";position:absolute;top:0;left:12%;right:12%;height:16px;border:1px solid #d9c3a0;border-bottom:0;border-radius:8px 8px 0 0}
}
.wa-tr-col{display:grid;gap:3px;align-content:start;min-width:0;padding:10px 11px;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& b{font-size:12.5px;color:#3d2a17}
& em{font:11px/1.3 Consolas,monospace;font-style:normal;color:#8a7761}
& ul{display:grid;gap:3px;margin-top:5px}
& li{padding:4px 7px;border-radius:6px;background:#f6e9d6;font-size:11px;line-height:1.35;color:#5b3a1e}
}
.wa-tr-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px;border:1px dashed #d9c3a0;border-radius:10px;
& span{font-size:11px;color:#8a7761}
& b{padding:3px 9px;border:1px solid #eadcc4;border-radius:12px;background:#fff;font-size:11.5px;color:#5b3a1e}
}
.wa-nm{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px;background:#f4efe7}
.wa-nm-d{min-width:0;overflow:hidden;border:1px solid #e7dcc9;border-radius:10px;background:#fffdf9}
.wa-nm-drop{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 18px 0;padding:10px;border:1px solid #eadcc4;border-radius:10px;background:#fff;box-shadow:0 8px 18px #3d2a171f;
& > span{display:grid;gap:2px;align-content:start;font-size:11px;line-height:1.35}
& .ico{width:16px;height:16px;margin-bottom:2px;color:#b0722a}
& b{font-size:12px;color:#3d2a17}
& em{font-style:normal;color:#8a7761}
& > .sa-dot{position:absolute;top:-9px;right:10px;margin:0}
}
.wa-nm-ghost{display:grid;gap:8px;padding:16px 18px 18px;
& i:not(.sa-dot){display:block;height:10px;border-radius:5px;background:#efe6d7}
& i:nth-child(2){width:70%}
& i:nth-child(3){width:45%}
}
.wa-nm-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 18px;align-content:start;min-width:0;padding:12px 14px;border:1px solid #e7dcc9;border-radius:16px;background:#fffdf9;
& .wa-nm-pt,& .is-p{grid-column:1/-1}
& ul{display:grid;grid-template-columns:subgrid;grid-column:1/-1}
& li{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid #eee4d6;font-size:12.5px;color:#3d2a17}
& li .ico{width:12px;height:12px;color:#b0722a}
& .is-p{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:36px;margin-top:4px;border-radius:20px;background:#8a4b12;font-size:12px;font-weight:600;color:#fff}
& .is-p .ico{width:13px;height:13px}
}
.wa-nm-pt{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a4b12}

/* page editor (admin panel) */
.wa-ed{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.55fr);gap:12px}
.wa-ed-cv{display:grid;gap:8px;align-content:start;min-width:0;padding:12px;border:1px solid #dcdcde;border-radius:6px;background:#fff}
.wa-ed-b{display:grid;gap:2px;padding:8px 10px;border:1px dashed #c3c4c7;border-radius:4px;
& em{font-style:normal;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#787c82}
& span{font-size:12px;line-height:1.4;color:#1d2327}
&.is-sel{border:2px solid #2271b1;background:#f0f6fc}
}
.wa-ed-n{font-size:11px;color:#2271b1}
.wa-ed-s{display:grid;gap:9px;align-content:start;min-width:0;
& dl{display:grid;gap:6px;margin:0}
& dt{margin:0;font-size:10.5px;color:#787c82}
& dd{margin:0;font-size:11.5px;color:#1d2327;overflow-wrap:anywhere}
}
.wa-ed-h{font-size:12px;font-weight:700;color:#1d2327}
.wa-ed-lock{display:flex;gap:7px;align-items:flex-start;padding:8px 10px;border:1px solid #f0e2a8;border-radius:4px;background:#fcf9e8;font-size:11px;line-height:1.45;color:#6b5a14;
.ico{flex:none;width:13px;height:13px;margin-top:1px}
}
.wa-ed-rev{display:flex;gap:7px;align-items:center;font-size:11px;color:#2271b1;
.ico{flex:none;width:13px;height:13px}
}
.wa-ed-up{justify-self:start;padding:6px 14px;border-radius:3px;background:#2271b1;font-size:12px;font-weight:600;color:#fff}

/* Analytics: funnel and path */
.wa-fn{display:grid;gap:9px;padding:10px 14px 12px;
& li{display:grid;grid-template-columns:22px minmax(100px,1.2fr) minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:12px;color:#3c4043}
& i:not(.sa-dot){display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e8f0fe;font:700 11px/1 Arial,sans-serif;font-style:normal;color:#1967d2}
& b{min-width:42px;font-weight:600;text-align:right}
& em{min-width:70px;font-style:normal;font-size:11px;color:#5f6368}
}
.wa-fn-b{display:block;height:14px;border-radius:3px;background:#f1f3f4;overflow:hidden;
& u{display:block;height:100%;background:#4285f4;text-decoration:none}
}
.wa-pth{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 14px}
.wa-pth-c{display:grid;gap:6px;align-content:start;min-width:0;
& > p{font-size:11px;color:#5f6368}
& ul{display:grid;gap:6px}
}
.wa-pn{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;padding:7px 9px;border:1px solid #dadce0;border-radius:6px;background:#fff;font-size:11px;
& b{min-width:0;font-weight:500;color:#202124;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& span{display:grid;text-align:right;color:#3c4043}
& em{font-style:normal;font-size:10px;color:#80868b}
&.is-start{border-color:#4285f4;background:#e8f0fe}
&.is-ok{border-color:#a8dab5;background:#e6f4ea}
&.is-out{border-color:#f1c6c2;background:#fce8e6}
& .sa-dot{margin:0}
}

/* Clarity: click map of the home page */
.wa-hm{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start}
.wa-hm-pg{position:relative;overflow:hidden;border:1px solid #dadce0;border-radius:6px;background:#fffdf9}
.wa-hm-nav{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid #eee4d6;
& b{margin-right:auto;white-space:nowrap;font:700 11px/1 Cambria,"Times New Roman",serif;color:#5b3a1e}
& span{font-size:10px;color:#5b3a1e;white-space:nowrap}
}
.wa-hm-tel{display:inline-flex;align-items:center;gap:3px;font-weight:700;
.ico{width:10px;height:10px}
}
.wa-hm-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px;padding:12px 10px;
& > div:first-child{display:grid;gap:6px;align-content:center;min-width:0}
}
.wa-hm-l{display:block;height:7px;border-radius:4px;background:#d9c3a0;
&.w1{width:92%;height:9px;background:#5b3a1e}
&.w2{width:64%}
}
.wa-hm-btn{justify-self:start;padding:5px 9px;border-radius:12px;background:#8a4b12;font-size:10px;font-weight:600;color:#fff}
.wa-hm-img{display:grid;place-items:center;min-height:72px;border-radius:8px;background:linear-gradient(160deg,#f7ead6,#ecd2a8);font-size:10px;color:#8a7761}
.wa-hm-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 10px 14px;
& span{padding:10px 4px;border:1px solid #eee4d6;border-radius:6px;background:#fff;font-size:10px;text-align:center;color:#5b3a1e}
}
.wa-hm-b{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:radial-gradient(circle,#ea4335b3 0,#f9ab0066 45%,#f9ab0000 72%);pointer-events:none;
&.is-b{width:46px;height:46px;margin:-23px 0 0 -23px;opacity:.85}
&.is-c{width:52px;height:52px;margin:-26px 0 0 -26px}
&.is-d{width:30px;height:30px;margin:-15px 0 0 -15px;opacity:.7}
}
.wa-hm-st{display:grid;gap:8px;align-content:start;min-width:0}
.wa-hm-l2{display:grid;gap:9px;
& li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center;font-size:11px;line-height:1.35;color:#3c4043}
& li > span{grid-column:1/-1}
& b{font-size:11px;font-weight:600}
}
}

@container (max-width:620px){
.sa .wa-sv-g,.sa .wa-ab-h,.sa .wa-ct,.sa .wa-ed,.sa .wa-hm,.sa .wa-nm,.sa .wa-pth{grid-template-columns:minmax(0,1fr)}
.sa .wa-cards,.sa .wa-facts,.sa .wa-team,.sa .wa-gal{grid-template-columns:minmax(0,1fr)}
.sa .wa-meta,.sa .wa-tr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-tr-cols::before{display:none}
.sa .wa-sv-p .wa-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-ft{grid-template-columns:minmax(0,1fr)}
.sa .wa-sv-q{flex-direction:column;align-items:flex-start}
.sa .wa-fn li{grid-template-columns:22px minmax(0,1fr) auto}
.sa .wa-fn-b{display:none}
.sa .wa-ab-img{min-height:100px}
.sa .wa-nm-drop{grid-template-columns:minmax(0,1fr);margin:6px 10px 0}
}
@container (max-width:560px){
.sa .wa-sh-nav,.sa .wa-sh-call{display:none}
.sa .wa-nm .wa-sh{flex-wrap:wrap}
.sa .wa-nm .wa-sh-nav{display:flex}
.sa .wa-sh{padding:10px 12px}
.sa .wa-sh-cta{margin-left:auto}
.sa .wa-sec,.sa .wa-sp{padding-left:12px;padding-right:12px}
.sa .wa-hm-nav span:not(.wa-hm-tel){display:none}
}
@container (max-width:420px){
.sa .wa-meta,.sa .wa-tr-cols,.sa .wa-sv-p .wa-steps{grid-template-columns:minmax(0,1fr)}
}

/* ================= the sample online shop ================= */
.sa{
/* category */
.wa-cat-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
& h3{margin:0;font:700 22px/1.2 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& span{font-size:11.5px;color:#8a7761}
}
.wa-cat-top .wa-cat-sort{margin-left:auto;padding:4px 11px;border:1px solid #dccdb7;border-radius:14px;background:#fff;color:#5b3a1e}
.wa-cat-g{display:grid;grid-template-columns:148px minmax(0,1fr);gap:16px;align-items:start}
.wa-cat-f{display:grid;gap:12px;align-content:start;min-width:0;padding:12px;border:1px solid #eee4d6;border-radius:12px;background:#fff}
.wa-cat-fg{display:grid;gap:6px;min-width:0;
& > b{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a4b12}
& ul{display:grid;gap:5px}
& li{display:flex;align-items:center;gap:7px;font-size:12px;color:#4a3d30}
& li i:not(.sa-dot){flex:none;width:13px;height:13px;border:1.5px solid #c9b79d;border-radius:3px;background:#fff}
& li.is-on i:not(.sa-dot){border-color:#8a4b12;background:#8a4b12 radial-gradient(circle at 50% 50%,#fff 0 28%,transparent 30%)}
& li.is-on span{font-weight:600;color:#3d2a17}
& li span{flex:1;min-width:0}
& li em{font-style:normal;font-size:11px;color:#8a7761}
&.is-row{display:flex;align-items:center;justify-content:space-between}
}
.wa-cat-sw{display:inline-flex;align-items:center;justify-self:start;width:34px;height:20px;padding:2px;border-radius:10px;background:#c9b79d;
& i:not(.sa-dot){width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0004}
}
.wa-cat-m{display:grid;gap:10px;align-content:start;min-width:0}
.wa-cat-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;
& span{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid #d9a35b;border-radius:14px;background:#fbf1e0;font-size:11.5px;font-weight:600;color:#7a4b24}
& u{font-size:11.5px;color:#8a4b12}
}
.wa-cat-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
&.is-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
.wa-cat-c{display:grid;gap:3px;align-content:start;min-width:0;padding:8px;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& > b{font-size:12px;line-height:1.3;color:#3d2a17}
& > em{font-style:normal;font-size:12.5px;font-weight:700;color:#8a4b12}
& > u{font-size:11px;color:#8a4b12}
&.is-out .wa-cat-img{opacity:.6}
&.is-out > b,&.is-out > em{color:#8a7761}
}
.wa-cat-img{position:relative;display:grid;place-items:center;padding:10px 8px;border-radius:8px;background:linear-gradient(160deg,#f7ead6,#ecd2a8);
& svg{max-width:100%;height:auto}
}
.wa-cat-tag{position:absolute;left:6px;top:6px;padding:2px 8px;border-radius:10px;background:#3d2a17;font-size:10.5px;font-weight:600;color:#fff}

/* product page */
.wa-pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
.wa-pd-gal{display:grid;gap:8px;min-width:0}
.wa-pd-big{display:grid;place-items:center;padding:22px 16px;border-radius:14px;background:linear-gradient(160deg,#f7ead6,#ecd2a8);
& svg{max-width:100%;height:auto}
}
.wa-pd-th{display:flex;gap:8px;
& i:not(.sa-dot){display:grid;place-items:center;width:46px;height:46px;border:1.5px solid #eee4d6;border-radius:9px;background:linear-gradient(160deg,#f7ead6,#ecd2a8)}
& i:not(.sa-dot):first-child{border-color:#8a4b12}
}
.wa-pd-i{display:grid;gap:9px;align-content:start;min-width:0;
& h3{margin:0;font:700 19px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
}
.wa-pd-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin:0;
& b{font:700 22px/1.1 Cambria,"Times New Roman",serif;color:#8a4b12}
& s{font-size:13px;color:#8a7761}
}
.wa-pd-em{font-style:normal;font-size:11.5px;color:#6b5d4d}
.wa-pd-k{margin:0;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#8a4b12}
.wa-pd-vs{display:flex;flex-wrap:wrap;gap:6px}
.wa-pd-v{padding:6px 12px;border:1px solid #dccdb7;border-radius:9px;background:#fff;font-size:12px;color:#4a3d30;
&.is-on{border-color:#8a4b12;background:#fbf1e0;font-weight:700;color:#5b3a1e;box-shadow:0 0 0 1px #8a4b12}
&.is-out{border-style:dashed;background:#f7f2ea;color:#a89884;text-decoration:line-through}
}
.wa-pd-st{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:600;color:#1e7a3b;
& .ico{flex:none;width:14px;height:14px}
}
.wa-pd-buy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
& .wa-fm-b{min-height:38px;padding:8px 22px;font-size:13px}
}
.wa-pd-q{display:inline-flex;align-items:center;border:1px solid #dccdb7;border-radius:19px;background:#fff;
& i:not(.sa-dot){display:grid;place-items:center;width:30px;height:34px;font-style:normal;font-size:16px;color:#5b3a1e}
& b{min-width:22px;text-align:center;font-size:13px;color:#3d2a17}
}
.wa-pd-sh{display:grid;gap:6px;padding-top:9px;border-top:1px solid #eee4d6;
& li{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;color:#4a3d30}
& .ico{flex:none;width:14px;height:14px;margin-top:1px;color:#b0722a}
}

/* cart */
.wa-cart{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.wa-cart-m{display:grid;gap:10px;min-width:0;
& h3{margin:0;font:700 19px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
& ul{display:grid;gap:8px}
}
.wa-cart-l{display:grid;grid-template-columns:50px minmax(0,1fr) 100px 76px;gap:10px;align-items:center;padding:9px 11px;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& .wa-cat-img{padding:5px}
& .wa-pd-q{position:relative;justify-self:center}
& .wa-pd-q .sa-dot{position:absolute;right:-8px;top:-8px;margin:0}
}
.wa-cart-n{display:grid;gap:1px;min-width:0;
& b{font-size:12.5px;color:#3d2a17}
& em{font-style:normal;font-size:11px;color:#8a7761}
& u{font-size:11px;color:#8a4b12}
}
.wa-cart-p{text-align:right;font-size:12.5px;color:#3d2a17}
.wa-cart-s,.wa-ck-s{display:grid;gap:9px;align-content:start;min-width:0;padding:14px;border-radius:12px;background:#f6e9d6;
& dl{display:grid;gap:7px;margin:0}
& dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:#4a3d30}
& dt,& dd{margin:0}
& dl > div.is-t{padding-top:8px;border-top:1px solid #dcc6a0;font-size:14px;font-weight:700;color:#3d2a17}
& .wa-fm-b{min-height:38px;font-size:13px}
}
.wa-cart-v{display:flex;gap:6px;
& em{flex:1;min-width:0;padding:7px 10px;border:1px solid #dccdb7;border-radius:7px;background:#fffdf9;font-style:normal;font-size:12px;color:#a89884}
& b{display:inline-flex;align-items:center;padding:0 12px;border:1px solid #8a4b12;border-radius:7px;font-size:12px;color:#8a4b12}
}
.wa-cart-g{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;font-size:11.5px;color:#6b5d4d;
& .ico{flex:none;width:13px;height:13px;color:#2e8b49}
}

/* checkout */
.wa-ck{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
.wa-ck-m{display:grid;gap:10px;align-content:start;min-width:0;
& h3{margin:0;font:700 19px/1.25 Cambria,"Times New Roman",serif;letter-spacing:0;color:#3d2a17}
}
.wa-ck-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.wa-ck-o{display:grid;gap:8px;
& li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #dccdb7;border-radius:10px;background:#fff}
& li > i:not(.sa-dot){flex:none;width:16px;height:16px;border:2px solid #c9b79d;border-radius:50%;background:#fff}
& li > span{display:grid;gap:1px;min-width:0;font-size:11.5px;color:#6b5d4d}
& li b{font-size:12.5px;color:#3d2a17}
& li.is-on{border-color:#8a4b12;background:#fbf1e0;box-shadow:0 0 0 1px #8a4b12}
& li.is-on > i:not(.sa-dot){border-color:#8a4b12;background:radial-gradient(circle,#8a4b12 0 45%,#fff 50%)}
}

/* payment failed, order done, tracking */
.wa-od-box{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid #cfe5d2;border-radius:12px;background:#f1faf2;
& > .ico{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:#fff;color:#188038}
& > div{display:grid;gap:4px;min-width:0}
& h3{margin:0;font:700 18px/1.3 Cambria,"Times New Roman",serif;letter-spacing:0;color:#2f5a35}
& p{margin:0;font-size:12.5px;line-height:1.55;color:#3c4a3e}
&.is-warn{border-color:#fde293;background:#fef7e0}
&.is-warn > .ico{color:#b06000}
&.is-warn h3{color:#7a4a00}
&.is-warn p{color:#5b4a1d}
}
.wa-od-btns{display:flex;flex-wrap:wrap;gap:8px;
& .wa-fm-b{min-height:38px;font-size:13px}
}
.wa-od-b2{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 16px;border:1px solid #d9a35b;border-radius:19px;background:#fff;font-size:12.5px;font-weight:600;color:#8a4b12;
& .ico{width:13px;height:13px}
}
.wa-od-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.wa-od-c{display:grid;gap:8px;align-content:start;min-width:0;margin:0;padding:12px 14px;border:1px solid #eee4d6;border-radius:12px;background:#fff}
.wa-od-it{display:grid;gap:6px;
& li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:#4a3d30}
& li b{white-space:nowrap;color:#3d2a17}
& li.is-t{padding-top:7px;border-top:1px solid #eee4d6;font-weight:700;color:#3d2a17}
}
.wa-od-n{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0;padding:9px 12px;border-radius:10px;background:#f6e9d6;font-size:12px;color:#5b3a1e;
& .ico{flex:none;width:14px;height:14px;color:#8a4b12}
}
.wa-od-tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px 0 2px;
& li{position:relative;display:grid;justify-items:center;gap:3px;text-align:center;min-width:0}
& li::before{content:"";position:absolute;top:10px;right:50%;width:100%;height:2px;background:#dccdb7}
& li:first-child::before{display:none}
& li > i:not(.sa-dot){position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;border:2px solid #dccdb7;border-radius:50%;background:#fff;color:#fff}
& li > i:not(.sa-dot) .ico{width:12px;height:12px}
& li b{font-size:12px;line-height:1.3;color:#3d2a17}
& li em{font-style:normal;font-size:11px;color:#8a7761}
& li.is-done::before,& li.is-now::before{background:#2e8b49}
& li.is-done > i:not(.sa-dot){border-color:#2e8b49;background:#2e8b49}
& li.is-now > i:not(.sa-dot){border-color:#8a4b12;background:#fbf1e0;box-shadow:0 0 0 3px #f1dfc6}
}

/* shop footer with the legal details */
.wa-lg-top{margin:0}
.wa-lg{display:grid;gap:12px}
.wa-lg-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 18px;border-radius:12px;background:#3d2a17;color:#e9dcc8}
.wa-lg-c{display:grid;gap:7px;align-content:start;min-width:0;
& > b{font-size:12.5px;color:#fff}
& ul{display:grid;gap:5px}
& li{font-size:11.5px;line-height:1.5}
}
.wa-lg-bct{display:flex;align-items:center;gap:11px;margin:0;padding:10px 14px;border:1px solid #eee4d6;border-radius:10px;background:#fff;
& > .ico{flex:none;width:30px;height:30px;color:#1a73e8}
& > span{display:grid;gap:1px;min-width:0;font-size:11.5px;color:#6b5d4d}
& b{font-size:12.5px;color:#3d2a17}
}

/* confirmation email */
.wa-mail-t td.r{text-align:right;white-space:nowrap}
.wa-mail-b.is-s{padding:6px 16px 8px;font-size:12.5px;line-height:1.55;color:#3c4043}

/* the shop admin */
.wa-adm{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;align-items:start}
.wa-ap.is-wp{--ap-navw:132px}
.wa-ap.is-wp .sa-gtabs{flex-wrap:wrap;gap:2px 14px;padding:0 2px 6px;font-size:12px;white-space:normal;overflow:visible}
.wa-ap.is-wp .wa-tb :is(th,td){padding-left:6px;padding-right:4px}
.wa-ap.is-wp .wa-tb{font-size:12px}
.wa-ap.is-wp .wa-tb td:first-child{padding-left:10px}
.wa-ap.is-wp .wa-tb :is(th,td):last-child{padding-right:12px}
.wa-ap.is-wp .wa-k{padding:10px 10px 9px}
.wa-ap.is-wp .wa-k b{font-size:18px}
.wa-adm-m,.wa-adm-s{display:grid;gap:12px;align-content:start;min-width:0}
.wa-adm-d{display:grid;gap:7px;margin:0;padding:6px 14px 12px;
& > div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;font-size:12.5px}
& dt{margin:0;color:#646970}
& dd{margin:0;color:#1d2327}
}
.wa-adm-sel{display:flex;align-items:center;min-height:30px;margin:6px 14px 0;padding:4px 10px;border:1px solid #8c8f94;border-radius:4px;background:#fff;font-size:12.5px;color:#2b3146;
&::after{content:"";margin-left:auto;width:6px;height:6px;border-right:1.5px solid #50575e;border-bottom:1.5px solid #50575e;transform:rotate(45deg) translate(-2px,-2px)}
}
.wa-adm-b{display:flex;align-items:center;justify-content:center;min-height:30px;margin:8px 14px 12px;padding:4px 12px;border-radius:3px;background:#2271b1;font-size:12.5px;font-weight:600;color:#fff;text-align:center}
.wa-adm-lg{display:grid;gap:8px;padding:6px 14px 12px;
& li{display:grid;gap:1px;font-size:12px;line-height:1.4;color:#2b3146}
& em{font-style:normal;font-size:11px;color:#646970}
}
}

@container (max-width:620px){
.sa .wa-pd,.sa .wa-cart,.sa .wa-ck,.sa .wa-od-g,.sa .wa-adm{grid-template-columns:minmax(0,1fr)}
.sa .wa-cat-g{grid-template-columns:minmax(0,1fr)}
.sa .wa-cat-f{grid-template-columns:repeat(3,minmax(0,1fr))}
.sa .wa-lg-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@container (max-width:560px){
.sa .wa-cat-l:not(.is-2){grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-cat-f{grid-template-columns:minmax(0,1fr)}
.sa .wa-ck-r{grid-template-columns:minmax(0,1fr)}
.sa .wa-lg-g{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:420px){
.sa .wa-od-tl{grid-template-columns:minmax(0,1fr);justify-items:start;gap:10px}
.sa .wa-od-tl li{grid-template-columns:22px minmax(0,1fr) auto;justify-items:start;align-items:center;text-align:left;gap:8px}
.sa .wa-od-tl li::before{display:none}
.sa .wa-cart-l{grid-template-columns:44px minmax(0,1fr) auto}
.sa .wa-cart-l .wa-pd-q{grid-column:2}
.sa .wa-cart-l .wa-cart-p{grid-column:3;grid-row:1}
}

/* rich-results check of the sample product: long property names wrap instead of widening the screen */
.sa .wa-rt-p .sa-rt-in{grid-template-columns:minmax(0,1fr)}
.sa .wa-rt-p .sa-ir{flex-wrap:wrap;gap:2px 14px}
.sa .wa-rt-p .sa-ir span{overflow-wrap:anywhere}
.sa .wa-rt-p .sa-ir b{text-align:left}

/* ================= WordPress admin screens (service WordPress) ================= */
.sa{
.wa-wp-b{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:3px 12px;border:1px solid #2271b1;border-radius:3px;background:#f6f7f7;font-size:12px;font-weight:600;line-height:1.3;color:#2271b1;white-space:nowrap;
&.is-p{background:#2271b1;color:#fff}
&.is-g{border-color:#8c8f94;color:#2b3146}
&.is-dis{border-color:#dcdcde;background:#f6f7f7;color:#a7aaad}
}
.wa-wp-l{font-size:12px;color:#2271b1;text-decoration:underline;
&.is-r{color:#b32d2e}
}
.wa-wp-h{display:flex;align-items:center;margin:0;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#646970}
.wa-wp-tm{margin:0;font-size:11.5px;line-height:1.5;color:#646970}
.wa-wp-nt{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 12px;border:1px solid #dcdcde;border-left:4px solid #72aee6;border-radius:2px;background:#fff;font-size:12px;line-height:1.5;color:#2b3146;
.ico{flex:none;width:14px;height:14px;margin-top:2px;color:#2271b1}
& > span{min-width:0}
&.is-ok{border-left-color:#00a32a}
&.is-ok .ico{color:#00a32a}
}
.wa-wp-ok{display:inline-flex;align-items:center;padding:1px 8px;border-radius:10px;background:#edfaef;font-size:11px;font-style:normal;font-weight:600;line-height:1.5;color:#007017;white-space:nowrap}
.wa-wp-no{display:inline-flex;align-items:center;padding:1px 8px;border-radius:10px;background:#fcf0f1;font-size:11px;font-style:normal;font-weight:600;line-height:1.5;color:#b32d2e;white-space:nowrap}
.wa-wp-lk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#646970;
.ico{width:12px;height:12px}
}
.wa-wp-fl2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.wa-wp-bt2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:10px 0 0;font-size:11.5px;color:#646970}

/* inputs, toggles, forms */
.wa-wp-in{display:inline-flex;align-items:center;min-height:28px;min-width:0;padding:3px 9px;border:1px solid #8c8f94;border-radius:3px;background:#fff;font-size:12.5px;line-height:1.4;color:#2b3146;overflow-wrap:anywhere;
&.is-pw{letter-spacing:1px}
&.is-s{min-width:46px;justify-content:center}
&.is-e{min-height:28px;min-width:120px}
&.is-sel::after{content:"";margin-left:auto;margin-right:2px;width:6px;height:6px;border-right:1.5px solid #50575e;border-bottom:1.5px solid #50575e;transform:rotate(45deg) translate(-2px,-2px);box-sizing:content-box}
.ico{width:13px;height:13px;margin-right:6px;color:#646970}
}
.wa-wp-fm{display:grid;gap:10px;padding:14px;border:1px solid #dcdcde;border-radius:2px;background:#fff;justify-items:start}
.wa-wp-fr{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr) auto;gap:6px 12px;align-items:center;width:100%;min-width:0;
& label{font-size:12.5px;font-weight:600;color:#1d2327}
& label i{font-style:normal;font-weight:400;color:#646970}
& .wa-wp-ckr.is-i{grid-column:2 / -1}
}
.wa-wp-str{padding:2px 9px;border-radius:10px;background:#edfaef;font-size:11.5px;font-weight:600;color:#007017}
.wa-wp-ckr{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;line-height:1.4;color:#2b3146;
& > i:not(.sa-dot){flex:none;width:16px;height:16px;border:1px solid #8c8f94;border-radius:3px;background:#fff}
& > i.is-on{border-color:#2271b1;background:#2271b1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.500 8.500l3 3 6-6.500' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat}
&.is-i{font-size:11.5px;color:#646970}
}
.wa-wp-sw{display:inline-block;position:relative;flex:none;width:34px;height:18px;border-radius:9px;background:#8c8f94;
& i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff}
&.is-on{background:#2271b1}
&.is-on i{left:18px}
}
.wa-wp-sz{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:#646970;
& i{font-style:normal}
& b{min-width:52px;padding:3px 8px;border:1px solid #8c8f94;border-radius:3px;background:#fff;font-weight:400;color:#2b3146;text-align:right}
}

/* Appearance: themes */
.wa-wp-tg{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:12px}
.wa-wp-tc{display:grid;gap:6px;align-content:start;min-width:0;padding:0 0 9px;border:1px solid #dcdcde;border-radius:3px;background:#fff;overflow:hidden;
&.is-on{border-color:#2271b1;box-shadow:0 0 0 1px #2271b1}
&.is-add{place-items:center;align-content:center;min-height:150px;border-style:dashed;font-size:12px;color:#646970}
&.is-add span{font-size:26px;line-height:1;color:#2271b1}
& > .wa-wp-tm,& > .wa-wp-up{padding:0 10px}
}
.wa-wp-tp{display:grid;grid-template-rows:14% 44% 1fr;gap:4px;height:104px;padding:8px;background:var(--b);
& i{display:block;border-radius:2px}
& i.h{background:#fff;border-bottom:3px solid var(--a)}
& i.r{background:var(--a);opacity:.85}
& i.g{background:linear-gradient(90deg,#fff 31%,transparent 31% 34.500%,#fff 34.500% 65.500%,transparent 65.500% 69%,#fff 69%)}
}
.wa-wp-tn{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0 10px;
& b{font-size:12.5px;color:#1d2327}
}
.wa-wp-up{display:flex;align-items:flex-start;gap:6px;margin:0;padding:6px 10px;background:#f0f6fc;font-size:11.5px;line-height:1.45;color:#1d2327;
.ico{flex:none;width:13px;height:13px;margin-top:2px;color:#2271b1}
& > span{min-width:0}
}

/* Site editor and global styles */
.wa-wp-se{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;align-items:start}
.wa-wp-sl{grid-row:span 2;display:grid;gap:6px;align-content:start;min-width:0;padding:10px 6px;border:1px solid #dcdcde;background:#fff;
& .wa-wp-h{padding:0 6px}
& ul{display:grid;gap:2px}
& li{display:flex;align-items:center;justify-content:space-between;gap:2px 4px;padding:6px;border-radius:3px;font-size:12px;line-height:1.3;color:#2b3146}
& li.is-on{background:#1d2327;color:#fff}
}
.wa-wp-cv{display:grid;gap:12px;min-width:0;padding:12px;border:1px solid #dcdcde;background:#fffdf9}
.wa-wp-sbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:4px 2px 10px;border-bottom:2px solid #8a4b12}
.wa-wp-lg{font:700 16px/1 Cambria,"Times New Roman",serif;color:#3d2a17}
.wa-wp-mn{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:5px 8px;font-size:12px;color:#3d2a17;
&.is-sel{outline:2px solid #2271b1;outline-offset:1px}
& em{padding:1px 6px;border-radius:2px;background:#2271b1;font-size:10px;font-style:normal;color:#fff}
& i:not(.sa-dot){font-style:normal}
}
.wa-wp-cb{margin-left:auto;padding:6px 12px;border-radius:3px;background:#8a4b12;font-size:12px;font-weight:600;color:#fff}
.wa-wp-hero{display:grid;gap:7px;padding:14px;border-radius:4px;background:#f6e9d6;
& i{display:block;height:9px;border-radius:5px;background:#b0722a;opacity:.55}
& i:first-child{width:62%;height:13px;opacity:.85}
& i:nth-child(2){width:80%}
& span{display:block;width:90px;height:22px;margin-top:3px;border-radius:3px;background:#8a4b12}
}
.wa-wp-sr{grid-column:2;display:grid;gap:8px;align-content:start;min-width:0;padding:10px 12px;border:1px solid #dcdcde;background:#fff;justify-items:start}
.wa-wp-sv{display:grid;gap:5px;width:100%;
& li{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:#1d2327}
& em{font-style:normal;color:#646970}
}
.wa-wp-gs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.wa-wp-gl,.wa-wp-gr{display:grid;gap:9px;align-content:start;min-width:0;padding:12px;border:1px solid #dcdcde;background:#fff}
.wa-wp-pal{display:grid;gap:7px;
& li{display:flex;align-items:center;gap:9px}
& i{flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002}
& span{display:grid;min-width:0;line-height:1.3}
& b{font-size:12px;color:#1d2327}
& em{font-style:normal;font-size:11px;color:#646970}
}
.wa-wp-ty{display:grid;gap:6px;
& span{display:flex;align-items:baseline;gap:9px;font-size:11.5px;color:#646970}
& b{min-width:34px;font:700 22px/1 Arial,sans-serif;color:#3d2a17}
& .is-s b{font-family:Cambria,"Times New Roman",serif}
}
.wa-wp-pv{padding:12px;border:1px solid #eee4d6;border-radius:4px;background:#fffdf9;
& h4{margin:0 0 4px;font:700 17px/1.25 Cambria,"Times New Roman",serif;color:#3d2a17}
& p{margin:0 0 9px;font:12.5px/1.5 Arial,sans-serif;color:#3d2a17}
}
.wa-wp-pb{display:inline-block;padding:6px 14px;border-radius:3px;background:#8a4b12;font-size:12px;font-weight:600;color:#fff}
.wa-wp-ct{display:grid;gap:6px;
& li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 8px;align-items:center;font-size:11.5px;color:#2b3146}
& b{font-weight:700}
}

/* Block editor */
.wa-wp-be{display:grid;gap:0;border:1px solid #dcdcde;background:#fff;min-width:0}
.wa-wp-bt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:7px 10px;border-bottom:1px solid #dcdcde;font-size:12px;color:#1d2327;
& .is-pl{display:grid;place-items:center;width:28px;height:28px;border-radius:3px;background:#1d2327;color:#fff}
& .is-pl .ico{width:14px;height:14px}
}
.wa-wp-li{display:inline-flex;align-items:center;gap:5px;
.ico{width:14px;height:14px}
}
.wa-wp-sp{flex:1}
.wa-wp-bd{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.42fr);min-width:0}
.wa-wp-bc{display:grid;gap:8px;align-content:start;min-width:0;padding:14px;background:#fff}
.wa-wp-bk{position:relative;display:grid;gap:3px;min-width:0;padding:8px 10px;border:1px dashed #c3c4c7;border-radius:3px;font-size:12px;line-height:1.5;color:#1d2327;
& > em{font-style:normal;font-size:10px;letter-spacing:.3px;text-transform:uppercase;color:#787c82}
&.is-h{font:700 16px/1.3 Cambria,"Times New Roman",serif;color:#3d2a17}
&.is-sel{border:2px solid #2271b1;background:#f0f6fc}
&.is-btn{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:600;color:#8a4b12}
&.is-btn .ico{width:13px;height:13px;color:#646970}
}
.wa-wp-fl{display:inline-flex;gap:2px;justify-self:start;margin:-2px 0 3px;padding:2px 4px;border-radius:3px;background:#1d2327;
& i{display:grid;place-items:center;min-width:20px;height:20px;font:700 11px/1 Arial,sans-serif;font-style:normal;color:#fff}
& .ico{width:12px;height:12px}
}
.wa-wp-cl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;
& i{display:grid;place-items:center;min-height:42px;padding:4px;border-radius:3px;background:#f6e9d6;font-size:11px;font-style:normal;color:#6b3a0d;text-align:center}
}
.wa-wp-bs{display:grid;gap:8px;align-content:start;min-width:0;padding:10px;border-left:1px solid #dcdcde;background:#fff;
& dl{display:grid;gap:7px;margin:0}
& dt{margin:0;font-size:10.5px;color:#787c82}
& dd{margin:0;font-size:11.5px;color:#1d2327;overflow-wrap:anywhere}
}
.wa-wp-tb{display:flex;gap:14px;margin:0 -10px;padding:0 10px 8px;border-bottom:1px solid #dcdcde;font-size:12px;color:#50575e;
& b{padding-bottom:7px;margin-bottom:-9px;border-bottom:2px solid #2271b1;color:#1d2327}
}

/* Patterns */
.wa-wp-pt{display:grid;grid-template-columns:136px minmax(0,1fr);gap:12px;align-items:start}
.wa-wp-pn{display:grid;gap:2px;align-content:start;min-width:0;padding:8px 6px;border:1px solid #dcdcde;background:#fff;
& li{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;padding:6px;border-radius:3px;font-size:12px;line-height:1.3;color:#2b3146}
& li span{flex:1;min-width:0}
& li em{font-style:normal;font-size:11px;color:#646970}
& li.is-on{background:#1d2327;color:#fff}
& li.is-on em{color:#c3c4c7}
}
.wa-wp-pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:10px;min-width:0}
.wa-wp-pc{display:grid;gap:6px;align-content:start;min-width:0;padding:8px;border:1px solid #dcdcde;border-radius:3px;background:#fff;
& p{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin:0;font-size:12px;line-height:1.35;color:#1d2327}
& p b{flex:0 0 100%}
& em{justify-self:start;padding:0 7px;border-radius:9px;background:#f0f0f1;font-size:10.5px;font-style:normal;color:#50575e}
& em.is-sync{background:#e5f0fa;color:#135e96}
}
.wa-wp-pp{display:grid;gap:5px;align-content:center;height:78px;padding:9px;border-radius:3px;background:#fffdf9;box-shadow:inset 0 0 0 1px #eee4d6;
& i{display:block;height:8px;border-radius:4px;background:#b0722a;opacity:.5}
& i:first-child{width:70%;height:11px;opacity:.85}
&.is-cta{background:#8a4b12}
&.is-cta i{background:#fff;opacity:.8}
&.is-cta i:nth-child(3){width:34%;height:14px;opacity:1;background:#f6e9d6}
&.is-ben{grid-template-columns:repeat(3,minmax(0,1fr));align-content:stretch}
&.is-ben i{height:100%!important;width:auto!important;opacity:.35}
&.is-faq i:nth-child(odd){width:90%}
&.is-hero{background:#f6e9d6}
}

/* Revisions */
.wa-wp-rs{display:grid;gap:12px;min-width:0}
.wa-wp-rl{display:grid;gap:8px;padding:12px;border:1px solid #dcdcde;background:#fff;
& ol{display:flex;align-items:center;justify-content:space-between;position:relative;margin:4px 6px;
&::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#dcdcde}}
& ol li{position:relative;display:grid;justify-items:center;gap:3px}
& ol li i{display:block;width:14px;height:14px;border:2px solid #8c8f94;border-radius:50%;background:#fff}
& ol li em{font-style:normal;font-size:10.5px;color:#646970}
& ol li.is-from i,& ol li.is-to i{border-color:#2271b1;background:#2271b1}
& p{margin:0;font-size:12px;line-height:1.5;color:#2b3146}
}
.wa-wp-df{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;min-width:0;
& > div{display:grid;gap:7px;align-content:start;min-width:0;padding:12px;border:1px solid #dcdcde;background:#fff}
& p{margin:0;font-size:12.5px;line-height:1.5;color:#2b3146}
& del{background:#fcc;text-decoration:line-through;color:#8a1f1f}
& ins{background:#cfe9d2;text-decoration:none;color:#0a4a1a}
}
.wa-wp-rb{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;color:#646970}

/* Page list and pending review */
.wa-wp-pd{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start}
.wa-wp-pm,.wa-wp-pr{display:grid;gap:8px;align-content:start;min-width:0;padding:12px;border:1px solid #dcdcde;background:#fff;justify-items:start}
.wa-wp-pt2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;font-size:13.5px;color:#1d2327}
.wa-wp-st{padding:1px 9px;border-radius:10px;background:#fcf9e8;font-size:11px;font-weight:600;color:#6b5a14}
.wa-wp-pa{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;color:#50575e;
.ico{width:13px;height:13px}
}
.wa-wp-px{margin:0;font-size:12.5px;line-height:1.55;color:#2b3146}

/* Plugins */
.wa-wp-pls{display:grid;gap:0;margin-top:8px;border:1px solid #dcdcde;background:#fff}
.wa-wp-pr2{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:10px 12px;border-bottom:1px solid #f0f0f1;border-left:4px solid #2271b1;
&:last-child{border-bottom:0}
&.is-off{border-left-color:transparent;background:#f6f7f7}
&.is-up{padding-bottom:0}
}
.wa-wp-ck{display:block;width:16px;height:16px;margin-top:2px;border:1px solid #8c8f94;border-radius:3px;background:#fff}
.wa-wp-pi{display:grid;gap:3px;min-width:0}
.wa-wp-pi p{margin:0}
.wa-wp-pn2{display:flex;align-items:center;flex-wrap:wrap;gap:3px 10px;font-size:12.5px;color:#1d2327}
.wa-wp-pds{font-size:12px;line-height:1.45;color:#2b3146}
.wa-wp-pv2{font-size:11.5px;color:#646970;
& b{color:#1d2327}
}
.wa-wp-un{display:flex;align-items:flex-start;gap:7px;margin:6px -12px 0!important;padding:7px 12px;border-top:1px solid #dcdcde;background:#fcf9e8;font-size:11.5px;line-height:1.45;color:#6b5a14;
.ico{flex:none;width:13px;height:13px;margin-top:2px}
& > span{min-width:0}
}
.wa-wp-cu{display:flex;align-items:flex-start;gap:8px;margin:0;padding:12px 14px;font-size:12.5px;line-height:1.5;color:#2b3146;
.ico{flex:none;width:16px;height:16px;margin-top:2px;color:#00a32a}
& > span{min-width:0}
}
.wa-wp-sr2{display:flex;margin-bottom:6px}
.wa-wp-sr2 .wa-wp-in{min-width:200px}
.wa-wp-ag{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-top:8px}
.wa-wp-ac{display:grid;gap:5px;align-content:start;min-width:0;padding:11px 12px;border:1px solid #dcdcde;border-radius:3px;background:#fff;
& p{margin:0}
}
.wa-wp-an{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:#1d2327}
.wa-wp-rt{font-size:12px;letter-spacing:1px;color:#dba617}
.wa-wp-am{display:grid;gap:3px;font-size:11.5px;color:#646970;
& span{display:flex;align-items:center;flex-wrap:wrap}
& b{margin:0 3px;color:#1d2327}
}
.wa-wp-cm{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.4;color:#007017;
.ico{flex:none;width:13px;height:13px}
&.is-no{color:#b32d2e}
}

/* Site health */
.wa-wp-sh{display:grid;gap:10px;justify-items:start;min-width:0}
.wa-wp-gg{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid #dcdcde;background:#fff;
& p{margin:0;font-size:12.5px;line-height:1.5;color:#2b3146}
}
.wa-wp-hl{display:grid;width:100%;border:1px solid #dcdcde;background:#fff;
& li{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #f0f0f1;font-size:12.5px;color:#1d2327}
& li:last-child{border-bottom:0}
& li b{flex:1;min-width:0;font-weight:400}
& li em{font-style:normal;font-size:11px;color:#646970}
}
.wa-wp-dt{flex:none;width:10px;height:10px;border-radius:50%;background:#dba617;
&.is-r{background:#d63638}
}

/* Media */
.wa-wp-fi{display:inline-flex;align-items:center;gap:8px}
.wa-wp-mt{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:3px;background:#f6e9d6;
& svg{width:16px;height:auto}
}
.wa-wp-fn{font-weight:600;color:#2271b1}
.wa-tb td.is-big{font-weight:700;color:#b32d2e}
.wa-wp-ma{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:14px;align-items:start;padding:14px;border:1px solid #dcdcde;background:#fff}
.wa-wp-mp{display:grid;gap:8px;justify-items:center;min-width:0}
.wa-wp-pic{display:grid;place-items:center;width:100%;min-height:140px;border-radius:3px;background:linear-gradient(160deg,#f7ead6,#e8cfa3)}
.wa-wp-mf{display:grid;gap:8px;margin:0;min-width:0}
.wa-wp-md{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:center;font-size:12px;
& dt{margin:0;color:#646970;text-align:right}
& dd{display:flex;align-items:center;gap:6px;margin:0;min-width:0;color:#1d2327}
& dd > :first-child{min-width:0;flex:0 1 auto}
& dd .sa-dot{flex:none}
}
.wa-wp-mx{font-size:12px;color:#2b3146}

/* Backups, staging, security, uptime */
.wa-wp-bk2{display:grid;gap:6px;padding:11px 14px;border:1px solid #dcdcde;background:#fff;
& p{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;margin:0;font-size:12px;line-height:1.5;color:#2b3146}
& b{min-width:58px;color:#1d2327}
}
.wa-wp-env{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.wa-wp-ev{display:grid;gap:5px;justify-items:start;min-width:0;padding:11px 14px;border:1px solid #dcdcde;background:#fff;
& b{font-size:13px;overflow-wrap:anywhere;color:#1d2327}
&.is-st{border-style:dashed;border-color:#2271b1;background:#f6faff}
}
.wa-wp-ar{display:grid;place-items:center;
.ico{width:20px;height:20px;color:#646970}
}
.wa-wp-cl2{display:grid;gap:6px;margin:0;padding:0 14px;
& li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#2b3146}
& li i{flex:none;width:16px;height:16px;border:1px solid #8c8f94;border-radius:3px;background:#fff}
& li.is-on i{border-color:#2271b1;background:#2271b1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.500 8.500l3 3 6-6.500' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat}
}
.wa-pc .wa-wp-bt2{margin:10px 14px 12px}
.wa-pc > .wa-wp-tm{padding:2px 14px 4px}
.wa-wp-tgl{display:grid;
& li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid #f0f0f1;font-size:12.5px;line-height:1.4;color:#1d2327}
& li:last-child{border-bottom:0}
& li > span:first-child{flex:1;min-width:0}
}
.wa-wp-u30{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;padding:12px 14px 4px;
& i{display:block;height:34px;border-radius:2px;background:#3bd671}
& i.is-y{background:#f9ab00}
& i.is-r{background:#ea4335}
}
.wa-wp-ax{display:flex;justify-content:space-between;margin:0;padding:0 14px 12px;font-size:11px;color:#646970}
}

@container (max-width:620px){
.sa .wa-wp-pd,.sa .wa-wp-ma,.sa .wa-wp-bd{grid-template-columns:minmax(0,1fr)}
.sa .wa-wp-bs{border-left:0;border-top:1px solid #dcdcde}
.sa .wa-wp-fr{grid-template-columns:minmax(0,1fr)}
.sa .wa-wp-env{grid-template-columns:minmax(0,1fr)}
.sa .wa-wp-ar{transform:rotate(90deg)}
.sa .wa-wp-pt{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:560px){
.sa .wa-wp-se{grid-template-columns:minmax(0,1fr)}
.sa .wa-wp-sl{grid-row:auto}
.sa .wa-wp-sr{grid-column:auto}
.sa .wa-wp-md{grid-template-columns:minmax(0,1fr)}
.sa .wa-wp-md dt{text-align:left}
.sa .wa-wp-u30{gap:2px;padding-left:10px;padding-right:10px}
}

/* Search Console table reused from the SEO group: let the text wrap in a narrow stage instead of clipping */
@container (max-width:460px){
.sa .sa-gt :is(th,td){white-space:normal;text-align:left;padding-inline:8px;vertical-align:top}
.sa .sa-gt :is(th,td):first-child{width:auto;max-width:none;white-space:nowrap}
.sa :is(.sa-gsearch,.sa-gav){display:none}
}

/* ================= Custom website screens, part 1: requirements, roles, flows (service Website theo yêu cầu) ================= */
.sa{
.wa-ap.is-trk{--ap-acc:#5e4db2;--ap-on:#eae6ff;--ap-onink:#403294;--ap-ink:#1d2657;--ap-navw:128px}
.wa-ap.is-trk .wa-ap-av{background:#5e4db2}
.wa-ap.is-trk .wa-ap-brand i{background:#5e4db2;color:#fff}
.wa-ap.is-dgm{--ap-acc:#0b7285;--ap-on:#e3f6f8;--ap-onink:#3f4c80;--ap-ink:#28325b;--ap-main:#f7fbfc}
.wa-ap.is-dgm .wa-ap-av{background:#0b7285}
.wa-ap.is-dgm .wa-ap-brand i{background:#0b7285;color:#fff}
.wa-ap.is-dgm .wa-ap-body{grid-template-columns:minmax(0,1fr);min-height:0}
.wa-ap.is-dgm .wa-ap-nav{display:none}

.wa-ap.is-cu{--ap-navw:128px}
/* story detail */
.wa-cu-sp{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:14px;align-items:start}
.wa-cu-mn{display:grid;gap:9px;min-width:0}
.wa-cu-q{margin:0;padding:11px 13px;border:1px solid #d9d3f5;border-radius:8px;background:#f6f4ff;font-size:13px;line-height:1.55;color:#1d2657}
.wa-cu-q b{color:#403294}
.wa-cu-h{display:flex;align-items:center;gap:2px;margin:4px 0 0;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f6368}
.wa-cu-cl{display:grid;gap:6px;margin:0;padding:0;list-style:none;
& li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:#3c4043}
& li .ico{flex:none;width:14px;height:14px;margin-top:3px;color:#137333}
&.is-no li .ico{color:#b3261e}
}
.wa-cu-fd{display:grid;gap:0;margin:0;padding:4px 12px;border:1px solid #ebedf0;border-radius:8px;background:#fff;
& div{display:grid;gap:1px;padding:8px 0;border-bottom:1px solid #f1f3f4}
& div:last-child{border-bottom:0}
& dt{font-size:11px;color:#5f6368}
& dd{margin:0;font-size:12.5px;font-weight:600;color:#202124}
}

/* scope document (word processor look) */
.wa-cu-dw{background:#f1f3f4}
.wa-cu-dt{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#fff;border-bottom:1px solid #dadce0;
& b{font-size:14px;font-weight:500;color:#202124;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& em{margin-left:auto;font-size:11.5px;font-style:normal;color:#5f6368;white-space:nowrap}
}
.wa-cu-di{flex:none;display:grid;place-items:center;width:24px;height:30px;border-radius:3px;background:#4285f4;color:#fff;
.ico{width:14px;height:14px}
}
.wa-cu-dp{display:grid;gap:8px;max-width:520px;margin:14px auto;padding:20px 24px 22px;background:#fff;box-shadow:0 1px 3px rgba(60,64,67,.25);color:#202124;
& h4{margin:0;font-size:20px;font-weight:500}
& h5{display:flex;align-items:center;gap:2px;margin:6px 0 0;font-size:13px;font-weight:700}
& ul{display:grid;gap:3px;margin:0;padding-left:18px;list-style:disc;font-size:12.5px;line-height:1.55}
}
.wa-cu-dm{margin:0;font-size:11.5px;color:#5f6368}

/* roles */
.wa-cu-rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.wa-cu-rc{display:grid;gap:7px;align-content:start;min-width:0;padding:11px 12px;border:1px solid #eee4d6;border-radius:10px;background:#fff}
.wa-cu-rt{display:flex;align-items:center;gap:8px;margin:0;min-width:0;
& b{font-size:13px;font-weight:700;color:#3d2a17;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& em{margin-left:auto;font-size:11px;font-style:normal;color:#8a7a68;white-space:nowrap}
}
.wa-cu-ri{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#f6e9d6;color:#8a4b12;
.ico{width:14px;height:14px}
}
.wa-cu-rj{margin:0;font-size:12px;line-height:1.5;color:#5f4b36}
.wa-cu-rs{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;color:#8a7a68}

/* permission matrix */
.wa-tb.is-mx :is(th,td){padding-inline:6px}
.wa-tb.is-mx :is(th,td):not(:first-child){text-align:center}
.wa-tb.is-mx td:first-child{font-weight:600;color:#3d2a17}

/* 403 page and developer tools */
.wa-cu-403{display:flex;align-items:center;gap:14px;padding:16px 16px;border:1px solid #eee4d6;border-radius:10px;background:#fff}
.wa-cu-lk{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fdecea;color:#b3261e;
.ico{width:20px;height:20px}
}
.wa-cu-t4{margin:0;font-size:14px;color:#3d2a17}
.wa-cu-m4{margin:3px 0 10px;font-size:12px;line-height:1.5;color:#5f4b36}
.wa-cu-btn{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border-radius:6px;background:#8a4b12;font-size:12px;font-weight:600;color:#fff}
.wa-cu-dev{display:grid;gap:0;border:1px solid #dadce0;border-radius:8px;background:#fff;overflow:hidden;font-size:12px;
& ul{display:grid;margin:0;padding:0;list-style:none}
& li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-top:1px solid #f1f3f4;min-width:0}
& li code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1.5 Consolas,"Courier New",monospace;color:#3c4043}
& li b{flex:none;display:inline-flex;align-items:center;gap:2px;font-weight:600;color:#137333}
& li.is-err{background:#fef4f3}
& li.is-err b{color:#b3261e}
}
.wa-cu-dh{display:flex;align-items:center;gap:10px;margin:0;padding:7px 12px;background:#f1f3f4;font-size:11.5px;color:#5f6368;
& b{margin-right:auto;font-weight:600;color:#202124}
}
.wa-cu-js{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0;padding:9px 12px;border-top:1px solid #f1f3f4;background:#202124;font:12px/1.6 Consolas,"Courier New",monospace;color:#e8eaed;white-space:pre-wrap;overflow-wrap:anywhere}

/* swimlane diagram */
.wa-cu-sl{display:grid;gap:0;border:1px solid #cfe5e9;border-radius:10px;background:#fff;overflow:hidden}
.wa-cu-lane{display:grid;grid-template-columns:76px repeat(5,minmax(0,1fr));align-items:stretch;border-top:1px solid #e3f0f2;
&:first-child{border-top:0}
}
.wa-cu-ln{display:flex;align-items:center;padding:6px 8px;background:#eaf6f8;font-size:11.5px;font-weight:700;line-height:1.3;color:#3f4c80}
.wa-cu-c{position:relative;display:grid;gap:3px;place-items:center;align-content:center;min-width:0;min-height:60px;padding:8px 10px;text-align:center;
&.is-r::after{content:"";position:absolute;z-index:1;right:-1px;top:50%;width:9px;height:9px;margin-top:-5px;border-top:2px solid #0b7285;border-right:2px solid #0b7285;transform:rotate(45deg)}
&.is-d::after{content:"";position:absolute;z-index:1;left:50%;bottom:-1px;width:9px;height:9px;margin-left:-5px;border-right:2px solid #0b7285;border-bottom:2px solid #0b7285;transform:rotate(45deg)}
& small{font-size:10.5px;line-height:1.35;color:#5f6368}
}
.wa-cu-sb{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:6px 9px;border:1.5px solid #0b7285;border-radius:7px;background:#e3f6f8;font-size:11.5px;font-weight:600;line-height:1.3;color:#3f4c80;
&.is-end{border-color:#137333;background:#e6f4ea;color:#0d652d}
}
.wa-cu-dc{display:inline-flex;align-items:center;gap:2px;padding:5px 9px;border:1.5px solid #b06000;border-radius:7px;background:#fef7e0;
& b{font-size:11.5px;font-weight:700;color:#7a5200}
}

/* order states */
.wa-cu-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
.wa-cu-sn{display:inline-flex;align-items:center;gap:2px;padding:6px 10px;border:1.5px solid #9aa0a6;border-radius:999px;background:#fff;font-size:12px;font-weight:600;color:#3c4043;white-space:nowrap;
&.is-hl{border-color:#b06000;background:#fef7e0;color:#7a5200}
&.is-done{border-color:#137333;background:#e6f4ea;color:#0d652d}
&.is-x{border-color:#b3261e;background:#fdecea;color:#b3261e}
}
.wa-cu-sa{font-style:normal;font-size:14px;color:#0b7285}
.wa-cu-sx{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 12px;border:1px dashed #e8b4ae;border-radius:8px;background:#fffafa;
& em{font-size:11.5px;font-style:normal;color:#5f6368}
}

/* clickable prototype */
.wa-cu-pr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.wa-cu-ps{display:grid;gap:6px;min-width:0;padding:9px;border:1.5px solid #cfe5e9;border-radius:12px;background:#fff;
&.is-ok{border-color:#b7dfc4;background:#f7fcf8}
}
.wa-cu-pt{display:flex;align-items:center;gap:2px;margin:0;font-size:11px;font-weight:700;letter-spacing:.2px;color:#3f4c80}
.wa-cu-pb{display:grid;gap:6px;min-width:0}
.wa-cu-pl{display:flex;justify-content:space-between;gap:8px;margin:0;font-size:11.5px;line-height:1.4;color:#3c4043;
& span{min-width:0}
& em{flex:none;font-style:normal;font-weight:600;color:#202124}
}
.wa-cu-hs{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-height:28px;margin-top:2px;padding:3px 10px;border-radius:7px;background:#0b7285;font-size:12px;font-weight:600;color:#fff;
&.is-g{background:#137333}
}
.wa-cu-pa{display:grid;justify-items:center;gap:2px;
& i{font-style:normal;font-size:16px;line-height:1;color:#0b7285}
& em{max-width:60px;font-size:10px;font-style:normal;line-height:1.3;text-align:center;color:#5f6368}
}
.wa-cu-okm{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:#0d652d;
.ico{flex:none;width:16px;height:16px}
}
.wa-cu-pe{grid-column:1/-1;display:grid;gap:3px;padding:9px 12px;border:1.5px dashed #e8b4ae;border-radius:10px;background:#fffafa;
& .wa-cu-pt{color:#b3261e}
}
.wa-cu-pm{margin:0;font-size:12px;line-height:1.5;color:#5f4b36}
}

@container (max-width:460px){
.sa .wa-cu-sp{grid-template-columns:minmax(0,1fr)}
.sa .wa-cu-dt em{display:none}
.sa .wa-cu-dp{margin:10px;padding:14px 14px 16px}
.sa .wa-cu-dp h4{font-size:17px}
.sa .wa-cu-sl{border:0;background:none;gap:8px;overflow:visible}
.sa .wa-cu-lane{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;border:1px solid #cfe5e9;border-radius:10px;background:#fff}
.sa .wa-cu-ln{flex:0 0 100%;padding:0;background:none}
.sa .wa-cu-c{min-height:0;padding:0}
.sa .wa-cu-c.is-e{display:none}
.sa .wa-cu-c::after{display:none}
.sa .wa-cu-c small{display:none}
.sa .wa-cu-pr{grid-template-columns:minmax(0,1fr)}
.sa .wa-cu-pa i{transform:rotate(90deg)}
.sa .wa-cu-pa em{max-width:none}
.sa .wa-cu-pa{grid-auto-flow:column;justify-content:center;gap:8px}
.sa .wa-cu-dh span{display:none}
.sa .wa-cu-403{align-items:flex-start}
}

/* ================= Custom website screens, part 2: data, integration API, testing (service Website theo yêu cầu) ================= */
.sa{
.wa-ap.is-nn .wa-ap-body{grid-template-columns:minmax(0,1fr);min-height:0}
.wa-ap.is-nn .wa-ap-nav{display:none}
.wa-ap.is-db{--ap-acc:#3d5a80;--ap-on:#e3ebf5;--ap-onink:#303c6e;--ap-ink:#1f2959;--ap-navw:128px}
.wa-ap.is-db .wa-ap-av,.wa-ap.is-db .wa-ap-brand i{background:#3d5a80;color:#fff}
.wa-ap.is-api{--ap-acc:#0b6b4f;--ap-on:#e1f4ec;--ap-onink:#0a5640;--ap-ink:#16332a;--ap-navw:140px;--ap-main:#fbfdfc}
.wa-ap.is-api .wa-ap-av,.wa-ap.is-api .wa-ap-brand i{background:#0b6b4f;color:#fff}
.wa-ap.is-ci{--ap-acc:#2da44e;--ap-on:#dafbe1;--ap-onink:#1a7f37;--ap-ink:#22273c;--ap-top:#f6f8fa}
.wa-ap.is-ci .wa-ap-av,.wa-ap.is-ci .wa-ap-brand i{background:#22273c;color:#fff}
.wa-cu-btn.is-s{background:var(--ap-acc,#3d5a80)}

/* relation diagram */
.wa-cu-er{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr);grid-template-areas:"a r1 b r2 c" "v1 . . . v2" "d . . . e";align-items:start;
.is-a{grid-area:a}
.is-b{grid-area:b}
.is-c{grid-area:c}
.is-d{grid-area:d}
.is-e{grid-area:e}
.is-r1{grid-area:r1}
.is-r2{grid-area:r2}
.is-v1{grid-area:v1}
.is-v2{grid-area:v2}
}
.wa-cu-tb{min-width:0;border:1px solid #cfdbea;border-radius:8px;background:#fff;overflow:hidden}
.wa-cu-th{display:flex;align-items:center;gap:6px;margin:0;padding:6px 9px;background:#e3ebf5;color:#303c6e;
.ico{flex:none;width:13px;height:13px}
& b{font:700 12px Consolas,"Courier New",monospace}
}
.wa-cu-fl{display:flex;align-items:center;gap:6px;margin:0;padding:4px 9px;border-top:1px solid #eef2f7;min-width:0;
& b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11.5px Consolas,"Courier New",monospace;color:#1f2959}
& em{flex:none;font-size:10.5px;font-style:normal;color:#7b8794}
}
.wa-cu-k{flex:none;padding:0 5px;border-radius:4px;font-size:9.5px;font-weight:700;line-height:1.7;
&.is-pk{background:#fff3c4;color:#8a6100}
&.is-fk{background:#dbe6f5;color:#303c6e}
}
.wa-cu-rl{display:flex;align-items:center;justify-content:center;gap:2px;align-self:center;min-width:0;
& em{font-size:10.5px;font-style:normal;font-weight:700;color:#3d5a80}
& u{flex:1;min-width:6px;height:2px;background:#3d5a80}
&.is-v1,&.is-v2{flex-direction:column;min-height:34px}
&.is-v1 u,&.is-v2 u{flex:none;width:2px;min-width:0;height:14px}
}

/* import wizard */
.wa-cu-sw{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.wa-cu-sj{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#7b8794;
& b{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid #c4cdd9;border-radius:50%;font-size:11px;color:#7b8794}
& b .ico{width:12px;height:12px}
&.is-done{color:#3c4043}
&.is-done b{border-color:#1e8e3e;background:#1e8e3e;color:#fff}
&.is-on{font-weight:700;color:#1f2959}
&.is-on b{border-color:#3d5a80;background:#3d5a80;color:#fff}
}
.wa-cu-fi{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border:1px dashed #b7c6d9;border-radius:8px;background:#f7faff;font-size:12.5px;color:#1f2959;
.ico{flex:none;width:16px;height:16px;color:#3d5a80}
& b{font-weight:600}
& em{margin-left:auto;font-size:11.5px;font-style:normal;color:#5f6368}
}
.wa-cu-ac{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
& em{font-size:11.5px;font-style:normal;color:#5f6368}
}

/* API documentation and client */
.wa-cu-ep{display:flex;align-items:center;gap:10px;min-width:0;
& code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14px Consolas,"Courier New",monospace;color:#16332a}
}
.wa-cu-mt{flex:none;padding:3px 9px;border-radius:5px;background:#1e8e3e;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:#fff;
&.is-post{background:#1a73e8}
}
.wa-cu-ed{margin:0;font-size:12.5px;line-height:1.55;color:#3c4043}
.wa-cu-cp{display:flex;align-items:center;gap:10px;margin:2px 0 -6px;font-size:11.5px;color:#5f6368;
& b{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#202124}
}
.wa-cu-rq{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border:1px solid #dadce0;border-radius:8px;background:#fff;
& code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12.5px Consolas,"Courier New",monospace;color:#202124}
}
.wa-cu-st2{display:inline-flex;padding:2px 8px;border-radius:5px;font-size:12px;font-weight:700;
&.is-ok{background:#e6f4ea;color:#137333}
}
.wa-ap-main > .wa-cu-js{border:0;border-radius:8px}
.wa-cu-cp .wa-cu-st2{font-size:12px;letter-spacing:0;text-transform:none}

/* automatic test run */
.wa-cu-sgs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
.wa-cu-sg{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1.5px solid #dadce0;border-radius:8px;background:#fff;
&.is-ok{border-color:#b7dfc4;background:#f4fbf6}
&.is-bad{border-color:#f0b4ae;background:#fef4f3}
&.is-skip{border-style:dashed;background:#f8f9fa}
}
.wa-cu-sgi{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#1e8e3e;color:#fff;
.ico{width:12px;height:12px}
}
.wa-cu-sg.is-bad .wa-cu-sgi{background:#d93025}
.wa-cu-sg.is-skip .wa-cu-sgi{background:#9aa0a6}
.wa-cu-sgt{display:grid;gap:1px;line-height:1.25;
& b{font-size:12px;font-weight:600;color:#202124}
& em{font-size:11px;font-style:normal;color:#5f6368}
}

/* acceptance comment */
.wa-cu-cm{display:grid;gap:5px;padding:10px 12px;border:1px solid #d9d3f5;border-left:4px solid #5e4db2;border-radius:8px;background:#fff}
.wa-cu-cmh{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0;
& b{font-size:12.5px;color:#1d2657}
& span{font-size:11.5px;color:#5f6368}
}
.wa-cu-cmt{margin:0;font-size:12.5px;line-height:1.55;color:#3c4043}

/* bug board */
.wa-cu-bd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.wa-cu-bc{display:grid;gap:7px;min-width:0;padding:8px;border-radius:10px;background:#f1eefc}
.wa-cu-bh{display:flex;align-items:center;gap:6px;margin:0 0 1px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#403294;
& em{font-style:normal;color:#6b5fb5}
}
.wa-cu-bg{display:grid;gap:7px;padding:9px 10px;border:1px solid #e0dbf3;border-radius:8px;background:#fff;box-shadow:0 1px 1px #1d26571f;
& p{margin:0;font-size:12px;line-height:1.45;color:#1d2657}
& > span{display:flex;align-items:center;justify-content:space-between;gap:6px}
& code{font-size:11px;color:#5f6368}
}
}

@container (max-width:460px){
.sa .wa-cu-bd{grid-template-columns:minmax(0,1fr)}
.sa .wa-cu-ep code{font-size:12.5px}
.sa .wa-cu-sgs .wa-cu-sa{display:none}
}

@container (max-width:620px){
.sa .wa-cu-er{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
.sa .wa-cu-er > :is(.is-a,.is-b,.is-c,.is-d,.is-e,.is-r1,.is-r2,.is-v1,.is-v2){grid-area:auto}
.sa .wa-cu-er .wa-cu-rl{flex-direction:column;min-height:34px;justify-self:center}
.sa .wa-cu-er .wa-cu-rl u{flex:none;width:2px;min-width:0;height:14px}
}

/* ================= UI/UX screens (service Thiết kế UI/UX): research, flows, wireframes, states, prototype, accessibility ================= */
.sa{
.wa-ap.is-ux{--ap-acc:#7048e8;--ap-on:#efe9ff;--ap-onink:#4527a0;--ap-ink:#2a2540;--ap-main:#fbfaff;--ap-navw:128px}
.wa-ap.is-ux .wa-ap-av,.wa-ap.is-ux .wa-ap-brand i{background:#7048e8;color:#fff}
.wa-ap.is-ux.is-nonav .wa-ap-body{grid-template-columns:minmax(0,1fr);min-height:0}
.wa-ap.is-ux.is-nonav .wa-ap-nav{display:none}

/* placeholders shared by the wireframes */
.wa-ux-l{display:block;height:7px;border-radius:4px;background:#ddd8cf}
.wa-ux-x{display:block;width:100%;border:1px solid #d3cdc2;border-radius:6px;background:linear-gradient(to top right,transparent calc(50% - .5px),#cfc8bb 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),#cfc8bb 50%,transparent calc(50% + .5px)),#f1eee8;
&.is-s{flex:none;width:44px}
}
.wa-ux-ph{width:100%;max-width:196px;margin:0 auto;border:2px solid #b9b2a5;border-radius:20px;background:#fff}
.wa-ux-sc{display:grid;gap:8px;align-content:start;min-width:0;min-height:250px;padding:12px 10px 12px;font-size:11px;line-height:1.35;color:#2b2823}
.wa-ux-ph-h{margin:0;font-size:12.5px;font-weight:700;color:#2b2823}
.wa-ux-bd{display:grid;place-items:center;min-width:0;padding:14px 10px;border-radius:10px;background-color:#f1eff9;background-image:radial-gradient(#d3cbee 1px,transparent 1px);background-size:12px 12px}
.wa-ux-bn{display:flex;align-items:center;justify-content:center;gap:2px;min-height:34px;padding:4px 10px;border-radius:8px;background:#3b3733;font-size:11.5px;font-weight:600;color:#fff;
&.is-o{border:1.5px solid #3b3733;background:#fff;color:#3b3733}
}
.wa-ux-rw{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0;font-size:11px;color:#5f574b;
& b{font-weight:600;color:#2b2823}
&.is-t{padding-top:5px;border-top:1px solid #e3dfd8;font-weight:700;color:#2b2823}
}
.wa-ux-it{display:flex;align-items:center;gap:7px;padding:6px;border:1px solid #e3dfd8;border-radius:8px;
& > div{display:grid;flex:1;gap:1px;min-width:0}
& b{font-size:11px}
& span{font-size:11px}
& i{font-size:10px;font-style:normal;color:#6b5d4a}
&.is-sk{border-color:transparent;padding:4px 0}
&.is-sk .wa-ux-l{height:8px}
}
.wa-ux-mt{margin:0;font-size:10.5px;color:#6b5d4a}

/* research: affinity board */
.wa-ux-aff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.wa-ux-cl{display:grid;gap:7px;min-width:0;padding:8px;border-radius:10px;background:#f4f1fb;
&.is-y{background:#fbf6dc}
&.is-p{background:#fbeaf0}
&.is-b{background:#e8f1fb}
}
.wa-ux-ch{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0 0 1px;
& b{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.3;color:#2a2540}
& em{flex:none;font-size:10.5px;font-style:normal;color:#5f5a73}
}
.wa-ux-sn{display:block;margin:0;padding:8px 9px;border-radius:3px;box-shadow:0 1px 2px rgba(42,37,64,.2);font-size:11.5px;line-height:1.4;color:#2a2540;
&.is-y{background:#ffef9a}
&.is-p{background:#ffd3e1}
&.is-b{background:#c9e2fb}
& em{margin-left:4px;font-size:10.5px;font-style:normal;font-weight:700;color:#5f5a73}
}
.wa-ux-mo{font-size:10.5px;color:#5f5a73}

/* research: persona, survey */
.wa-ux-pe{display:grid;gap:12px}
.wa-ux-pt{display:flex;align-items:center;gap:12px;
& b{display:block;font-size:15px;color:#2a2540}
& span{display:block;font-size:11.5px;color:#5f5a73}
}
.wa-ux-pa{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#7048e8;font-size:18px;font-style:normal;font-weight:700;color:#fff}
.wa-ux-pq{margin:0;padding:11px 14px;border-left:3px solid #7048e8;border-radius:0 8px 8px 0;background:#f3effd;font-size:13px;line-height:1.5;font-style:italic;color:#2a2540}
.wa-ux-p2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wa-ux-ph2{display:flex;align-items:center;margin:0 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f5a73}
.wa-ux-pl{display:grid;gap:5px;margin:0;padding:0;list-style:none;
& li{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.4;color:#2a2540}
& .ico{flex:none;width:13px;height:13px;margin-top:2px;color:#137333}
&.is-bad .ico{color:#b3261e}
}
.wa-ux-pb{margin:0;padding-top:8px;border-top:1px solid #ebe8f5;font-size:11px;color:#5f5a73}
.wa-ux-sv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}
.wa-ux-sk{display:grid;align-content:center;gap:2px;padding:12px;border:1px solid #ebe8f5;border-radius:10px;background:#fff;
& em{font-size:11px;font-style:normal;color:#5f5a73}
& b{font-size:22px;font-weight:600;color:#2a2540}
& i{font-size:11px;font-style:normal;color:#5f5a73}
}
.wa-ux-sq{display:grid;gap:5px;padding:10px 12px;border:1px solid #ebe8f5;border-radius:10px;background:#fff;
& p{margin:0;font-size:12px;font-style:italic;color:#2a2540}
& .wa-ux-sqh{font-size:11px;font-style:normal;font-weight:700;color:#5f5a73}
}

/* flows: user flow, menu tree */
.wa-ux-fl{display:grid;gap:6px}
.wa-ux-fr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.wa-ux-nd{display:inline-flex;align-items:center;padding:7px 11px;border:1.5px solid #cfc6e8;border-radius:8px;background:#fff;font-size:12px;font-weight:600;line-height:1.3;color:#2a2540;
&.is-st{border-color:#7048e8;border-radius:999px;background:#7048e8;color:#fff}
}
.wa-ux-ar{font-style:normal;font-size:14px;color:#7048e8}
.wa-ux-dn{margin:0;font-size:12px;font-weight:600;color:#7048e8;text-align:center}
.wa-ux-dc{display:inline-flex;align-items:center;padding:7px 11px;border:1.5px solid #e0a82e;border-radius:8px;background:#fff8e1;font-size:12px;line-height:1.3;color:#5c4000;
&::before{content:'';flex:none;width:8px;height:8px;margin-right:8px;border:1.5px solid #b06000;rotate:45deg}
}
.wa-ux-br{display:grid;gap:4px;min-width:0;
& span{display:block;padding:5px 9px;border-radius:6px;background:#f3effd;font-size:11.5px;line-height:1.35;color:#2a2540}
& span.is-bad{background:#fdecea;color:#8c1d18}
}
.wa-ux-tr{display:grid;gap:10px}
.wa-ux-t0{margin:0;text-align:center;
& span{display:inline-block;padding:6px 18px;border-radius:999px;background:#7048e8;font-size:12px;font-weight:700;color:#fff}
}
.wa-ux-t1{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:12px 0 0;border-top:1.5px solid #cfc6e8;list-style:none;align-items:start;
& > li{display:grid;gap:6px;min-width:0}
& ul{display:grid;gap:5px;margin:0;padding:0 0 0 10px;border-left:1.5px solid #e3ddf5;list-style:none}
& ul li{font-size:11.5px;line-height:1.4;color:#2a2540}
}
.wa-ux-th{display:block;padding:7px 10px;border:1.5px solid #cfc6e8;border-radius:8px;background:#fff;font-size:12px;font-weight:700;color:#2a2540}

/* wireframes */
.wa-ux-cv{display:grid;grid-template-columns:112px minmax(0,1fr) 110px;gap:12px;align-items:start}
.wa-ux-ly{padding:9px 10px;border:1px solid #ebe8f5;border-radius:8px;background:#fff;
& p{margin:0 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f5a73}
& ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
& li{font-size:11px;line-height:1.35;color:#2a2540}
& li.is-k{padding-left:10px;color:#5f5a73}
}
.wa-ux-sp{display:grid;gap:8px;margin:0;
& div{display:grid;gap:1px;padding:7px 9px;border:1px solid #ebe8f5;border-radius:8px;background:#fff}
& dt{font-size:10.5px;color:#5f5a73}
& dd{margin:0;font-size:12px;font-weight:600;color:#2a2540}
}
.wa-ux-tb{display:flex;align-items:center;justify-content:space-between;gap:8px;
& .wa-ux-l{flex:none}
}
.wa-ux-bt{display:grid;place-items:center;width:20px;height:20px;border:1px solid #d3cdc2;border-radius:5px;font-size:11px;color:#5f574b}
.wa-ux-im{display:flex;align-items:flex-start;gap:4px}
.wa-ux-tp{display:flex;justify-content:space-between;gap:6px;
& b{font-size:12px}
& span{font-size:12px;font-weight:700}
}
.wa-ux-op{display:flex;gap:6px;
& span{padding:5px 10px;border:1.5px solid #c9c3b8;border-radius:8px;font-size:11px}
& span.is-on{border-color:#3b3733;font-weight:700}
}
.wa-ux-fd{display:grid;gap:4px;
& em{font-size:10.5px;font-style:normal;font-weight:600;color:#5f574b}
}
.wa-ux-ta{display:grid;gap:5px;align-content:start;min-height:44px;padding:8px;border:1.5px solid #c9c3b8;border-radius:8px}
.wa-ux-cta{display:flex;align-items:center;
& span{flex:1;min-width:0;padding:10px 8px;border-radius:8px;background:#3b3733;font-size:12px;font-weight:600;text-align:center;color:#fff}
}
.wa-ux-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;
& figure{display:grid;gap:6px;justify-items:center;min-width:0;margin:0}
& figcaption{font-size:11px;font-weight:700;color:#5f5a73}
}
.wa-ux-in{display:grid;gap:3px;
& em{font-size:10px;font-style:normal;color:#5f574b}
}
.wa-ux-rd{display:flex;align-items:center;gap:7px;margin:0;padding:7px 8px;border:1.5px solid #d3cdc2;border-radius:8px;font-size:11px;
& i{flex:none;width:12px;height:12px;border:1.5px solid #8a7f6e;border-radius:50%}
&.is-on{border-color:#3b3733;font-weight:700}
&.is-on i{border-color:#3b3733;background:radial-gradient(#3b3733 45%,transparent 50%)}
}
.wa-ux-gd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.wa-ux-gw{display:flex;align-items:flex-start;gap:4px}
.wa-ux-gc{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;height:64px;padding:0 6px;
& i{border-left:1px solid rgba(214,58,110,.45);border-right:1px solid rgba(214,58,110,.45);background:rgba(214,58,110,.14)}
}
.wa-ux-gx{display:grid;gap:7px}
.wa-ux-gt{margin:0;font-size:12px;font-weight:700}
.wa-ux-gs{display:grid;gap:5px;align-content:start;padding:11px 12px;border:1px solid #ebe8f5;border-radius:10px;background:#fff}
.wa-ux-gh{display:flex;align-items:center;margin:4px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f5a73}
.wa-ux-gv{margin:0;font-size:12px;color:#2a2540}
.wa-ux-sc2{display:flex;align-items:flex-end;gap:9px;margin:2px 0 4px;
& i{display:grid;justify-items:center;gap:3px;font-size:10px;font-style:normal;color:#4527a0}
& i::before{content:'';display:block;width:14px;height:calc(var(--s)*1px);border-radius:2px;background:#b6a4ee}
}

/* states and design system */
.wa-ux-bv{display:grid;gap:8px;margin-bottom:12px}
.wa-ux-bl{margin:0;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f5a73}
.wa-ux-bg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 10px;
& figure{display:grid;gap:6px;justify-items:stretch;min-width:0;margin:0}
& figcaption{display:flex;align-items:center;justify-content:center;font-size:11px;color:#5f5a73}
}
.wa-ux-bt2{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:48px;padding:0 8px;border:1.5px solid transparent;border-radius:8px;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;
&.is-p{background:#7a4a21;color:#fff}
&.is-p.is-hv{background:#5e3818}
&.is-p.is-pr{background:#432611;box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
&.is-p.is-ds{background:#e6e0d8;color:#6e6455}
&.is-p.is-ld{background:#7a4a21;opacity:.9}
&.is-s{border-color:#7a4a21;background:#fff;color:#7a4a21}
&.is-s.is-hv{background:#f6ede3}
&.is-s.is-pr{background:#ecdcc9}
&.is-s.is-ds{border-color:#cfc6b8;color:#6e6455}
&.is-fc{outline:3px solid #1a56db;outline-offset:2px}
}
.wa-ux-sp2{flex:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
.wa-ux-bt2.is-s &{border-color:rgba(122,74,33,.3);border-top-color:#7a4a21}
}
.wa-ux-bn2{margin:0;padding:8px 12px;border-radius:8px;background:#f3effd;font-size:11.5px;color:#4527a0}
.wa-ux-ff{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.wa-ux-fi2{display:grid;gap:5px;align-content:start;min-width:0;
& > em{font-size:12px;font-style:normal;font-weight:600;color:#2b2823}
}
.wa-ux-bx{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid #8a7f6e;border-radius:8px;background:#fff;font-size:14px;color:#2b2823;
& i{font-style:normal;font-size:13px;color:#6b5d4a}
& b{font-weight:400}
& .ico{flex:none;width:16px;height:16px;color:#1e6b3f}
&.is-fc{border-color:#1a56db;box-shadow:0 0 0 3px rgba(26,86,219,.25)}
&.is-fc u{width:1.5px;height:18px;margin-right:auto;background:#1a56db}
&.is-er{border-color:#c0392b}
&.is-ok{border-color:#2f7d4f}
&.is-ds{border-color:#d6d0c6;background:#f1eee9;color:#6e6455}
}
.wa-ux-hp{font-size:11.5px;line-height:1.4;color:#6b5d4a;
&.is-ok{color:#1e6b3f}
}
.wa-ux-er{display:flex;align-items:flex-start;gap:6px;font-size:12px;line-height:1.4;color:#a8301f;
& .ico{flex:none;width:14px;height:14px;margin-top:1px}
& span{min-width:0}
}
.wa-ux-st4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start;
& figure{display:grid;gap:6px;justify-items:center;min-width:0;margin:0}
& figcaption{display:flex;align-items:center;font-size:11.5px;font-weight:700;color:#5f5a73}
& .wa-ux-sc{min-height:210px;padding:10px 8px}
}
.wa-ux-em{display:grid;justify-items:center;gap:5px;padding:12px 2px 4px;text-align:center;
& b{font-size:11.5px}
& > span:not(.wa-ux-bn){font-size:10px;line-height:1.35;color:#6b5d4a}
& > .wa-ux-bn{margin-top:4px;padding:4px 14px}
&.is-er .wa-ux-ei{background:#fdecea;color:#c0392b}
}
.wa-ux-ei{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f1eee9;color:#5f574b;
& .ico{width:18px;height:18px}
}

/* prototype and hand-off */
.wa-ux-pv{display:grid;gap:8px;padding-top:20px}
.wa-ux-pr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center}
.wa-ux-fm{position:relative;display:grid;gap:4px;justify-items:center;min-width:0;margin:0;
& figcaption{display:grid;justify-items:center;text-align:center}
& figcaption b{font-size:10.5px;color:#4527a0}
& figcaption span{font-size:10.5px;line-height:1.3;color:#5f5a73}
}
.wa-ux-fi{display:grid;gap:4px;align-content:start;width:100%;max-width:78px;height:76px;padding:7px 6px;border:1.5px solid #c9c3b8;border-radius:8px;background:#fff;
& s{display:block;height:5px;border-radius:3px;background:#e3dfd8;text-decoration:none}
& s.is-b{align-self:end;height:9px;margin-top:auto;border-radius:3px;background:#3b3733}
}
.wa-ux-fg{position:absolute;top:-21px;left:50%;transform:translateX(-50%);z-index:1;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;padding:1px 7px;border:1px solid #f0d58a;border-radius:999px;background:#fef7e0;font-size:10px;font-weight:700;color:#7a5200;
& .ico{width:10px;height:10px}
}
.wa-ux-cn{display:grid;justify-items:center;gap:0;
& em{max-width:58px;font-size:9.5px;font-style:normal;line-height:1.25;text-align:center;color:#5f5a73}
& > i{font-size:16px;font-style:normal;line-height:1;color:#7048e8}
}
.wa-ux-pe2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;padding:8px 12px;border:1.5px dashed #e8b4ae;border-radius:8px;background:#fffafa;font-size:12px;color:#5f5a73;
& .ico{flex:none;width:14px;height:14px;color:#c0392b}
& b{color:#8c1d18}
}
.wa-ux-pp{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start}
.wa-ux-hs{outline:2px dashed #1a56db;outline-offset:2px;box-shadow:0 0 0 5px rgba(26,86,219,.18)}
.wa-ux-ip{padding:12px 14px;border:1px solid #ebe8f5;border-radius:10px;background:#fff;
& dl{margin:0}
}
.wa-ux-ir{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid #f1eee9;
& dt{font-size:11.5px;color:#5f5a73}
& dd{margin:0;font-size:12.5px;font-weight:600;line-height:1.4;color:#2a2540}
}
.wa-ux-ic{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;font-weight:700;color:#137333;
& .ico{flex:none;width:14px;height:14px}
}
.wa-ux-ho{display:grid;gap:10px}
.wa-ux-hv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:12px 14px;border-radius:10px;background:#f3effd;
& .wa-ux-hm{grid-column:1;grid-row:1}
& .wa-ux-bt2{grid-column:1;grid-row:2}
& .wa-ux-hh{grid-column:2;grid-row:2}
}
.wa-ux-hm{display:grid;justify-items:center;gap:2px;margin:0;font-size:10.5px;font-weight:700;color:#d63a6e;
&::after{content:'';display:block;width:100%;height:7px;border:1.5px solid #d63a6e;border-bottom:0}
}
.wa-ux-hh{display:flex;align-items:center;gap:4px;margin:0;font-size:10.5px;font-weight:700;color:#d63a6e;
& i:not(.sa-dot){align-self:stretch;width:7px;border:1.5px solid #d63a6e;border-left:0}
& .sa-dot{flex:none}
}
.wa-ux-hl{display:grid;margin:0;border:1px solid #ebe8f5;border-radius:10px;background:#fff}
.wa-ux-hr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #f1eee9;
&:last-child{border-bottom:0}
& dt{font-size:12px;color:#5f5a73}
& dd{margin:0;font-size:12.5px;font-weight:600;color:#2a2540}
& dd em{margin-left:6px;padding:1px 8px;border-radius:999px;background:#ece6fb;font-size:10.5px;font-style:normal;color:#4527a0}
}
.wa-ux-tk{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:8px;background:#f3effd;font-size:12px;color:#4527a0;
& .ico{flex:none;width:14px;height:14px}
}
.wa-ux-cd{margin:0;padding:12px 14px;border-radius:8px;background:#1f1b2e;font:12px/1.6 ui-monospace,Consolas,'Courier New',monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#e6e1f5;
& code{font:inherit}
}
.wa-ux-mx{display:grid}
.wa-ux-mh,.wa-ux-mr{display:grid;grid-template-columns:minmax(0,1fr) repeat(6,24px) 56px;align-items:center;gap:4px;margin:0;padding:7px 4px;border-bottom:1px solid #f1eee9;font-size:12px;
& > span{min-width:0;color:#2a2540}
& > em{font-style:normal;font-weight:700;text-align:right;color:#2a2540}
& > i{display:grid;place-items:center;font-style:normal}
& > i .ico{width:14px;height:14px}
& > i.is-ok .ico{color:#137333}
& > i.is-no .ico{color:#b3261e}
}
.wa-ux-mh{padding-top:2px;font-size:10.5px;color:#5f5a73;
& > span{color:#5f5a73}
& > b{text-align:center;font-weight:700}
& > em{color:#5f5a73}
}
.wa-ux-mr.is-w{background:#fffaf0}

/* accessibility */
.wa-ux-cg{display:grid;gap:6px}
.wa-ux-c2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wa-ux-cp{display:grid;gap:4px;min-width:0;padding:10px;border:1.5px solid #ebe8f5;border-radius:10px;background:#fff;
&.is-ok{border-color:#b7dfc4}
&.is-no{border-color:#f0b9b3}
}
.wa-ux-cl2{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f5a73}
.wa-ux-sw{display:block;padding:14px 12px;border:1px solid #ebedf0;border-radius:8px;font-size:14px;font-weight:600}
.wa-ux-rt{display:flex;align-items:center;gap:8px;margin:6px 0 0;
& b{font-size:18px;font-weight:600;color:#2a2540}
& span{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700}
& .ico{width:13px;height:13px}
}
.wa-ux-cp.is-ok .wa-ux-rt span{color:#137333}
.wa-ux-cp.is-no .wa-ux-rt span{color:#b3261e}
.wa-ux-hx{margin:0;font-size:11px;color:#5f5a73;
& code{font:inherit;font-weight:700;color:#2a2540}
}
.wa-ux-rl{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border-radius:8px;background:#f3effd;font-size:12px;line-height:1.4;color:#4527a0;
& .ico{flex:none;width:14px;height:14px}
}
.wa-ux-tf{display:grid;gap:9px;max-width:420px;margin:0 auto}
.wa-ux-fo{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;
& > div{display:grid;gap:4px;min-width:0}
& em{display:flex;align-items:center;font-size:12px;font-style:normal;font-weight:600;color:#2b2823}
& .wa-ux-bn{min-height:44px;background:#7a4a21;font-size:13px}
&.is-cur .wa-ux-no{background:#1a56db}
}
.wa-ux-no{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#4527a0;font-size:11px;font-style:normal;font-weight:700;color:#fff}
.wa-ux-ft{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:8px;background:#1f1b2e;font-size:12px;color:#bdb6d6;
& b{flex:1;min-width:0;color:#fff}
}
.wa-ux-fh{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:8px;background:#f3effd;font-size:12px;color:#4527a0;
& .ico{flex:none;width:14px;height:14px}
}
.wa-ux-fx{display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border:1px solid #d9d3f5;border-radius:8px;background:#f6f4ff;font-size:12.5px;line-height:1.4;color:#2a2540;
& .ico{flex:none;width:14px;height:14px;color:#7048e8}
}
}

@container (max-width:760px){
.sa .wa-ux-bg{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@container (max-width:620px){
.sa .wa-ux-st4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-ux-cv{grid-template-columns:minmax(0,1fr)}
.sa .wa-ux-ly{display:none}
.sa .wa-ux-aff{grid-template-columns:minmax(0,1fr)}
.sa .wa-ux-t1{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-ux-gd,.sa .wa-ux-pp{grid-template-columns:minmax(0,1fr)}
}

@container (max-width:460px){
.sa .wa-ux-bg{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-ux-p2,.sa .wa-ux-sv,.sa .wa-ux-c2,.sa .wa-ux-tri{grid-template-columns:minmax(0,1fr)}
.sa .wa-ux-ph{max-width:230px}
.sa .wa-ux-st4 .wa-ux-ph{max-width:100%}
.sa .wa-ux-mh,.sa .wa-ux-mr{grid-template-columns:minmax(0,1fr) repeat(6,20px) 48px;gap:2px;font-size:11px}
.sa .wa-ux-cn em{max-width:48px;font-size:9px}
.sa .wa-ux-fi{height:64px;padding:6px 5px}
}

/* ================= CRO – tối ưu chuyển đổi: sổ tối ưu, bản đồ nhiệt, thử nghiệm, form, giỏ hàng ================= */
.sa{
.wa-ap.is-cro{--ap-acc:#0b8043;--ap-on:#e3f4ea;--ap-onink:#0b6b38;--ap-ink:#1f2d27;--ap-main:#f7fbf8;--ap-navw:142px}
.wa-ap.is-cro .wa-ap-av{background:#0b8043}

/* shared bits */
.wa-tb.wa-cr-wt{font-size:12px}
.wa-tb.wa-cr-wt :is(th,td){padding:8px 5px 8px 8px;white-space:normal;max-width:none;overflow:visible}
.wa-tb.wa-cr-wt.is-lead :is(th,td):is(:nth-child(1),:nth-child(2),:nth-child(5)){white-space:nowrap}
.wa-tb.wa-cr-wt.is-rep :is(th,td):first-child{white-space:nowrap}
.wa-tb.wa-cr-wt td{vertical-align:top}
.wa-tb.wa-cr-wt td .sa-dot{vertical-align:2px}
.wa-cr-nt{display:block;margin:0;font-size:11.5px;line-height:1.5;color:#5f6368}
.wa-pc .wa-cr-nt{padding:8px 14px 10px}
.wa-cr-nt > .sa-dot:first-child{margin-left:0;margin-right:6px}
.wa-cr-hh{margin:0 0 7px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f6368}
.wa-cr-mt{display:flex;align-items:center;margin:0;font-size:11.5px;font-weight:700;letter-spacing:.2px;color:#5f6368}

/* funnel (Google Analytics exploration) */
.wa-cr-fn{display:grid;margin:0;padding:4px 14px 6px;list-style:none}
.wa-cr-fn li{display:grid;grid-template-columns:22px minmax(104px,1.1fr) minmax(0,1.6fr) 62px 60px 80px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #f1f3f4;font-size:12.5px}
.wa-cr-fn li:first-child{border-top:0}
.wa-cr-fn li.wa-cr-fh{padding:4px 0 6px;font-size:11px;font-weight:600;color:#5f6368}
.wa-cr-fn li.wa-cr-fh > span:nth-child(n+4){text-align:right}
.wa-cr-fn li > i:not(.sa-dot){display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e8f0fe;font-size:11px;font-style:normal;font-weight:700;color:#1967d2}
.wa-cr-fs{display:grid;gap:2px;min-width:0}
.wa-cr-fs b{font-weight:600}
.wa-cr-fs code{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wa-cr-fb{display:block;height:20px;border-radius:4px;background:#f1f3f4;overflow:hidden}
.wa-cr-fb u{display:block;min-width:3px;height:100%;border-radius:4px;background:#4285f4;text-decoration:none}
.wa-cr-fv{font-weight:600;text-align:right}
.wa-cr-fn li > em{font-style:normal;text-align:right;color:#5f6368}
.wa-cr-fn li > em.wa-cr-fd{color:#c5221f;white-space:nowrap}
.wa-cr-ft{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0;padding:10px 14px;border-top:1px solid #ebedf0;font-size:12.5px;color:#5f6368}
.wa-cr-ft b{font-size:20px;font-weight:400;color:#202124}
.wa-cr-ft em{font-style:normal}

/* DebugView */
.wa-cr-dbg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wa-cr-ds,.wa-cr-dd{min-width:0;border:1px solid #dadce0;border-radius:8px;background:#fff;overflow:hidden}
.wa-cr-ds ol{margin:0;padding:0;list-style:none}
.wa-cr-dh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:9px 12px;border-bottom:1px solid #ebedf0;font-size:11.5px;color:#5f6368}
.wa-cr-dh b{font-size:12.5px;font-weight:600;color:#202124}
.wa-cr-ds li{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid #f4f5f6;font-size:12px}
.wa-cr-ds li em{flex:none;width:32px;font-style:normal;font-variant-numeric:tabular-nums;color:#5f6368}
.wa-cr-ds li.is-on{background:#e8f0fe}
.wa-cr-ds li.is-key{background:#e6f4ea}
.wa-cr-ds li.is-key .ico{width:14px;height:14px;color:#188038}
.wa-cr-dd dl{display:grid;margin:0}
.wa-cr-dd dl > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:8px 12px;border-bottom:1px solid #f4f5f6;font-size:12px}
.wa-cr-dd dt{color:#5f6368}
.wa-cr-dd dd{margin:0;min-width:0;overflow-wrap:anywhere}
.wa-cr-dd .wa-cr-nt{padding:9px 12px 11px}

/* heat map: phone page with hot spots, list of most clicked elements */
.wa-cr-hm{display:grid;grid-template-columns:minmax(0,224px) minmax(0,1fr);gap:16px;align-items:start}
.wa-cr-hp{position:relative;height:340px;overflow:hidden;border:2px solid #202124;border-radius:16px;background:#fff}
.wa-cr-hd{position:relative;display:flex;align-items:center;height:36px;padding:0 10px;border-bottom:1px solid #eee4d6}
.wa-cr-hd b{font-size:12px;color:#5b3a1e}
.wa-cr-hd span{position:absolute;top:50%;display:grid;place-items:center;width:22px;height:22px;transform:translate(-50%,-50%);color:#5b3a1e}
.wa-cr-hd span .ico{width:14px;height:14px}
.wa-cr-hd span:nth-of-type(1){left:62%}
.wa-cr-hd span:nth-of-type(2){left:88%}
.wa-cr-hi{display:grid;place-items:center;height:80px;margin:10px 10px 0;border-radius:8px;background:linear-gradient(135deg,#ead8bd,#d8b68a);font-size:11px;font-style:normal;color:#5b3a1e}
.wa-cr-hl{display:block;height:8px;margin:10px 10px 0;border-radius:4px;background:#dcdfe3}
.wa-cr-hl.is-2{width:68%;margin-top:6px}
.wa-cr-hc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 10px 0}
.wa-cr-hc span{display:grid;place-items:center;height:48px;padding:4px;border:1px solid #e3d9c8;border-radius:8px;background:#fffaf2;font-size:10px;line-height:1.2;text-align:center;color:#5b3a1e}
.wa-cr-hbtn{display:grid;place-items:center;width:72%;height:32px;margin:12px 0 0 10px;border-radius:16px;background:#8a4b12;font-size:11.5px;font-weight:700;color:#fff}
.wa-cr-hk{margin:14px 10px 0;font-size:10.5px;font-weight:700;line-height:1.3;color:#5b3a1e}
.wa-cr-hg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 10px 0}
.wa-cr-hg span{display:grid;place-items:center;height:26px;border:1px dashed #c9c2b8;border-radius:6px;font-size:10px;color:#8a8175}
.wa-cr-bl{position:absolute;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,#ea4335a8 0,#f9ab0066 45%,#f9ab0000 72%);transform:translate(-50%,-50%);pointer-events:none}
.wa-cr-bl.is-s{width:32px;height:32px}
.wa-cr-bl.is-m{width:42px;height:42px}
.wa-cr-hs{min-width:0}
.wa-cr-hs ol{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.wa-cr-hs li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e1dfdd;border-radius:6px;background:#fff;font-size:12px}
.wa-cr-hs li b{flex:none;font-weight:600}
.wa-cr-hs li.is-bad{border-color:#f4b9b4;background:#fdeceb}
.wa-cr-hs li.is-bad b{color:#c5221f}
.wa-cr-hs .wa-cr-nt{margin-top:8px}

/* scroll map */
.wa-cr-sm{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:16px;align-items:start}
.wa-cr-sp{position:relative;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));height:340px;overflow:hidden;border:2px solid #202124;border-radius:16px;background:#fff}
.wa-cr-sp > i{display:flex;align-items:flex-start;padding:7px 0 0 10px}
.wa-cr-sp > i::after{padding:1px 8px;border-radius:10px;background:#ffffffd9;font-size:11px;font-style:normal;font-weight:700;color:#202124}
.wa-cr-sp > i.is-0{background:#ef7b72}
.wa-cr-sp > i.is-0::after{content:"100%"}
.wa-cr-sp > i.is-1{background:#f4a26b}
.wa-cr-sp > i.is-1::after{content:"68%"}
.wa-cr-sp > i.is-2{background:#f2d36b}
.wa-cr-sp > i.is-2::after{content:"41%"}
.wa-cr-sp > i.is-3{background:#8cc9e8}
.wa-cr-sp > i.is-3::after{content:"20%"}
.wa-cr-sp > i.is-4{background:#6a9be0}
.wa-cr-sp > i.is-4::after{content:"12%"}
.wa-cr-fold{position:absolute;left:0;right:0;top:31%;padding:3px 8px 0 10px;border-top:2px dashed #202124;font-size:10.5px;font-weight:700;line-height:1.3;text-align:left;color:#202124}
.wa-cr-mk{position:absolute;right:8px;display:inline-flex;align-items:center;padding:3px 9px;border-radius:12px;background:#fff;box-shadow:0 1px 4px #0003;font-size:11px;font-weight:700;white-space:nowrap;color:#202124}
.wa-cr-mk.is-btn{top:37%}
.wa-cr-mk.is-form{top:62.5%}
.wa-cr-ss{min-width:0}
.wa-cr-ss .wa-bars{padding:4px 0 8px}
.wa-cr-ss .wa-bars li{grid-template-columns:minmax(96px,40%) minmax(0,1fr) auto}
.wa-cr-ss .wa-bars li > span{white-space:normal}

/* recordings */
.wa-cr-rc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;align-items:start}
.wa-cr-rl{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.wa-cr-rl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:9px 11px;border:1px solid #dadce0;border-radius:8px;background:#fff;font-size:12px}
.wa-cr-rl li b{font-weight:600;font-variant-numeric:tabular-nums}
.wa-cr-rl li > span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#5f6368}
.wa-cr-rl li.is-on{border-color:#0078d4;background:#f3f9fe;box-shadow:0 0 0 1px #0078d4}
.wa-cr-pv{display:grid;gap:10px;min-width:0;padding:12px;border:1px solid #dadce0;border-radius:10px;background:#fff}
.wa-cr-ps{display:grid;gap:8px;width:100%;max-width:270px;margin:0 auto;padding:12px;border:1px solid #e3d9c8;border-radius:10px;background:#fffdf9}
.wa-cr-ps .wa-fm-b{justify-self:start}
.wa-cr-pt{margin:0;font-size:13px;font-weight:700;color:#5b3a1e}
.wa-cr-tl{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#5f6368}
.wa-cr-tl em{font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.wa-cr-pb{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#0078d4;color:#fff}
.wa-cr-pb .ico{width:12px;height:12px}
.wa-cr-tr{position:relative;display:block;flex:1;min-width:0;height:6px;border-radius:3px;background:#e1dfdd}
.wa-cr-tr u{position:absolute;inset:0 auto 0 0;border-radius:3px;background:#0078d4;text-decoration:none}
.wa-cr-tr s{position:absolute;top:-3px;width:3px;height:12px;border-radius:2px;background:#d93025;text-decoration:none}

/* Clarity dashboard signals */
.wa-cr-sg{display:grid;margin:0;padding:2px 14px 0;list-style:none}
.wa-cr-sg li{display:grid;grid-template-columns:minmax(0,1fr) 54px 84px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #f1f3f4;font-size:12.5px}
.wa-cr-sg li:first-child{border-top:0}
.wa-cr-sg li b{font-weight:600;text-align:right}
.wa-cr-sg li b.is-r{color:#c5221f}
.wa-cr-sg li b.is-y{color:#b06000}
.wa-cr-sg li b.is-g{color:#188038}
.wa-cr-sg li em{font-style:normal;font-size:12px;text-align:right;color:#5f6368}

/* hypothesis card and ranking */
.wa-cr-hy{display:grid;gap:10px}
.wa-cr-hy dl{display:grid;margin:0;border:1px solid #dadce0;border-radius:10px;background:#fff;overflow:hidden}
.wa-cr-hr{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:10px 14px;border-top:1px solid #f1f3f4;font-size:12.5px;line-height:1.5}
.wa-cr-hr:first-child{border-top:0}
.wa-cr-hr dt{font-size:11.5px;font-weight:700;color:#5f6368}
.wa-cr-hr dd{margin:0;min-width:0}
.wa-cr-hr.is-main{background:#eaf6ee}
.wa-cr-hr.is-main dt{color:#0b6b38}
.wa-cr-hr.is-guard{background:#fffaf0}
.wa-cr-hr.is-guard dt{color:#8a5a00}
.wa-cr-ic{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
.wa-cr-cv{position:relative;height:290px;border:1px solid #dadce0;border-radius:10px;background:linear-gradient(#0000 calc(50% - .5px),#e8eaed 0 calc(50% + .5px),#0000 0),linear-gradient(90deg,#0000 calc(50% - .5px),#e8eaed 0 calc(50% + .5px),#0000 0),#fff}
.wa-cr-ax{position:absolute;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5f6368}
.wa-cr-ax.is-y{left:10px;top:8px}
.wa-cr-ax.is-y::before{content:"↑ "}
.wa-cr-ax.is-x{right:10px;bottom:8px}
.wa-cr-ax.is-x::after{content:" →"}
.wa-cr-bb{position:absolute;display:grid;place-items:center;width:var(--s);height:var(--s);transform:translate(-50%,50%);border:2px solid #0b8043;border-radius:50%;background:#cfe8da;font-size:11px;font-weight:700;color:#0b6b38}
.wa-cr-bb.is-top{background:#0b8043;color:#fff}
.wa-cr-bb .sa-dot{position:absolute;top:-11px;right:-12px;margin:0}
.wa-cr-rk{min-width:0}
.wa-cr-rk ol{display:grid;margin:0;padding:0;list-style:none}
.wa-cr-rk li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #eef0f2;font-size:12px}
.wa-cr-rk li b{flex:none;width:26px;font-weight:700;color:#0b6b38}
.wa-cr-rk li > span{flex:1;min-width:0}
.wa-cr-rk li > em{flex:none;font-style:normal;font-weight:700}
.wa-cr-rk li.is-top > span{font-weight:600}
.wa-cr-rk .wa-cr-nt{margin-top:8px}

/* before and after wireframes */
.wa-cr-ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;padding:14px 16px 16px;background:#f7f7f4}
.wa-cr-mp{display:grid;gap:6px;align-content:start;min-width:0}
.wa-cr-vs{font-size:20px;color:#5f6368}
.wa-cr-ms{position:relative;display:grid;gap:7px;align-content:start;width:100%;max-width:200px;height:300px;margin:0 auto;padding:8px 10px;overflow:hidden;border:2px solid #202124;border-radius:18px;background:#fff}
.wa-cr-mb{display:block;height:14px;border-radius:4px;background:#e8eaed}
.wa-cr-mi{display:block;height:64px;border-radius:6px;background:linear-gradient(135deg,#ead8bd,#d8b68a)}
.wa-cr-ml{display:block;height:7px;border-radius:4px;background:#dadce0}
.wa-cr-ml.is-1{width:86%}
.wa-cr-ml.is-2{width:94%}
.wa-cr-ml.is-3{width:60%}
.wa-cr-mc{display:grid;place-items:center;min-height:28px;padding:5px 8px;border-radius:16px;background:#8a4b12;font-size:11px;font-weight:700;color:#fff}
.wa-cr-mc.is-new{box-shadow:0 0 0 3px #fde293}
.wa-cr-mg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.wa-cr-mg span{display:block;height:34px;border-radius:5px;background:#f1f3f4}
.wa-cr-mf{position:absolute;left:0;right:0;top:57%;display:block;border-top:2px dashed #1a73e8}
.wa-cr-mfd{position:absolute;right:6px;top:57%;display:block;padding:0 5px;transform:translateY(-100%);background:#fff;font-size:10px;font-style:normal;font-weight:700;color:#1a73e8}

/* sample size calculator */
.wa-cr-ca{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
.wa-cr-cf,.wa-cr-cr{min-width:0;padding:12px 14px;border:1px solid #dadce0;border-radius:10px;background:#fff}
.wa-cr-cf{display:grid;gap:8px;align-content:start}
.wa-cr-in{display:grid;gap:3px}
.wa-cr-in em{font-size:11px;font-style:normal;color:#5f6368}
.wa-cr-in > span{display:flex;align-items:center;min-height:32px;padding:5px 10px;border:1px solid #dadce0;border-radius:7px;background:#fafbfc;font-size:13px}
.wa-cr-cr{display:grid;gap:4px;align-content:start;background:linear-gradient(#f3faf6,#fff)}
.wa-cr-cr > span{font-size:12px;color:#5f6368}
.wa-cr-big{font-size:38px;font-weight:400;line-height:1.1;color:#0b6b38}
.wa-cr-cr ul{display:grid;margin:6px 0 0;padding:0;list-style:none}
.wa-cr-cr li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #eef0f2;font-size:12px}
.wa-cr-cr li em{font-style:normal;color:#5f6368}
.wa-cr-cr li b{font-weight:600}
.wa-cr-cr li.is-key{margin:0 -8px;padding:7px 8px;border-radius:6px;background:#e3f4ea}
.wa-cr-cr li.is-key em{color:#0b6b38}

/* A/B test: set-up, progress, result */
.wa-cr-su{display:grid;overflow:hidden;border:1px solid #dadce0;border-radius:10px;background:#fff}
.wa-cr-sr{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid #f1f3f4;font-size:12.5px}
.wa-cr-sr em{font-size:12px;font-style:normal;color:#5f6368}
.wa-cr-sr > span{min-width:0}
.wa-cr-sp2{display:inline-flex;vertical-align:middle;width:min(240px,100%);height:22px;overflow:hidden;border-radius:11px}
.wa-cr-sp2 i{display:grid;place-items:center;flex:1;font-size:11px;font-style:normal;font-weight:700;color:#fff}
.wa-cr-sp2 i.is-a{background:#80868b}
.wa-cr-sp2 i.is-b{background:#0b8043}
.wa-cr-vr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px 14px}
.wa-cr-vr span{display:grid;gap:3px;padding:9px 11px;border:1px solid #dadce0;border-radius:8px;font-size:12px;line-height:1.4}
.wa-cr-vr span b{font-size:11px;color:#5f6368}
.wa-cr-vr span:last-child{border-color:#9ccfaa;background:#f1faf4}
.wa-cr-go{display:inline-flex;align-items:center;justify-self:start;min-height:34px;margin:4px 14px 12px;padding:6px 18px;border-radius:18px;background:#0b8043;font-size:12.5px;font-weight:600;color:#fff}
.wa-cr-pg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wa-cr-pg p{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 8px;align-items:center;margin:0;padding:9px 12px;border:1px solid #dadce0;border-radius:10px;background:#fff;font-size:12px}
.wa-cr-pg p em{font-style:normal;color:#5f6368}
.wa-cr-pg p b{font-weight:600;text-align:right}
.wa-cr-pg .sa-dot{position:absolute;top:-8px;right:-6px;margin:0}
.wa-cr-pbar{grid-column:1 / -1;display:block;height:8px;overflow:hidden;border-radius:4px;background:#e8eaed}
.wa-cr-pbar u{display:block;height:100%;background:#0b8043;text-decoration:none}
.wa-cr-df{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:9px 14px;border-radius:10px;background:#e3f4ea;font-size:12.5px;color:#0b6b38}
.wa-cr-df b{font-size:18px;font-weight:600}
.wa-cr-ci{position:relative;height:40px;margin:16px 22px 0}
.wa-cr-ca2{position:absolute;top:15px;height:10px;border-radius:5px;background:#a8dab5}
.wa-cr-cz{position:absolute;top:3px;bottom:3px;display:block;border-left:2px dashed #5f6368}
.wa-cr-cm{position:absolute;top:12px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#188038;box-shadow:0 0 0 3px #fff}
.wa-cr-cm .sa-dot{position:absolute;top:-22px;left:50%;margin:0;transform:translateX(-50%)}
.wa-cr-cs{position:relative;height:18px;margin:2px 22px 0;font-size:11px;color:#5f6368}
.wa-cr-cs span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.wa-cr-ck{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.wa-cr-ck li{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45}
.wa-cr-ck li .ico{flex:none;width:14px;height:14px;margin-top:2px;color:#188038}
.wa-cr-srm{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:6px 14px 12px;font-size:12.5px}

/* forms and cart */
.wa-cr-fx,.wa-cr-ck2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:14px 16px 16px;background:#faf6ef}
.wa-cr-mf2,.wa-cr-ct{display:grid;gap:6px;align-content:start;min-width:0}
.wa-cr-fs2{display:grid;gap:9px;padding:12px;border:1px solid #e3d9c8;border-radius:10px;background:#fffdf9}
.wa-cr-fs2 .wa-fm-b{justify-self:start}
.wa-cr-fs2 .wa-fm-f small.is-hint{color:#5f6368}
.wa-cr-fe{display:flex;align-items:center;gap:6px;margin:0;padding:7px 9px;border:1px solid #f4b9b4;border-radius:7px;background:#fdeceb;font-size:11.5px;color:#b3261e}
.wa-cr-fe .ico{flex:none;width:13px;height:13px}
.wa-cr-fl{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.wa-cr-fl li{padding:9px 11px;border:1px solid #e3d9c8;border-radius:8px;background:#fff;font-size:12px;line-height:1.45;color:#4a4036}
.wa-cr-fl li b{display:block;margin-bottom:2px;font-size:11px;font-weight:700;color:#5b3a1e}
.wa-cr-ck2 > .wa-cr-nt{grid-column:1 / -1}
.wa-cr-cc{display:grid;gap:7px;padding:12px;border:1px solid #e3d9c8;border-radius:10px;background:#fffdf9;font-size:12px}
.wa-cr-cc .wa-fm-b{justify-self:start;margin-top:4px}
.wa-cr-ci2{display:flex;justify-content:space-between;gap:8px;margin:0;padding-bottom:8px;border-bottom:1px solid #eee4d6}
.wa-cr-ci2 b{font-weight:600}
.wa-cr-cl{display:flex;justify-content:space-between;gap:8px;margin:0}
.wa-cr-cl em{font-style:normal;color:#6b5a48}
.wa-cr-cl b{font-weight:600}
.wa-cr-cl.is-new{margin:0 -6px;padding:4px 6px;border-radius:6px;background:#e3f4ea;color:#0b6b38}
.wa-cr-cl.is-new em{color:#0b6b38}
.wa-cr-cl.is-t{padding-top:8px;border-top:1px solid #eee4d6;font-size:13.5px}
.wa-cr-cl.is-t b{font-size:15px}

/* decision record */
.wa-cr-dc{display:grid;gap:10px}
.wa-cr-dt{display:flex;align-items:center;gap:6px;margin:0;font-size:12px}
.wa-cr-dt .sa-chip{white-space:normal;text-align:left}
.wa-cr-dc dl{display:grid;gap:8px;margin:0}
.wa-cr-dr{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:10px 12px;border:1px solid #dadce0;border-left:4px solid #9aa0a6;border-radius:8px;background:#fff;font-size:12.5px;line-height:1.5}
.wa-cr-dr dt{font-size:11.5px;font-weight:700;color:#5f6368}
.wa-cr-dr dd{margin:0;min-width:0}
.wa-cr-dr.is-g{border-left-color:#188038}
.wa-cr-dr.is-y{border-left-color:#f9ab00;background:#fffaf0}
.wa-cr-dr.is-n{background:#f8f9fa}
.wa-cr-dr.is-b{border-left-color:#4285f4}

/* weekly trend */
.wa-cr-tw{display:grid;gap:8px;padding:14px 14px 12px;border:1px solid #dadce0;border-radius:10px;background:#fff}
.wa-cr-sc{display:grid;gap:8px;min-width:0}
.wa-cr-tw ol{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.wa-cr-tw li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:196px;min-width:0}
.wa-cr-tw li b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.wa-cr-tw li > i{display:block;width:66%;height:calc(var(--h) * 1.4px);border-radius:4px 4px 0 0;background:#c7d0dc}
.wa-cr-tw li.is-up > i{background:#4285f4}
.wa-cr-tw li.is-test > i{background:repeating-linear-gradient(45deg,#4285f4 0 5px,#8ab4f8 5px 10px)}
.wa-cr-tw li em{font-size:10.5px;font-style:normal;line-height:1.25;text-align:center;overflow-wrap:anywhere;color:#5f6368}
.wa-cr-mk2{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.wa-cr-mk2 span{padding:4px 6px;border-top:2px solid #4285f4;border-radius:0 0 6px 6px;background:#eef3fd;font-size:11px;line-height:1.35;text-align:center;color:#1967d2;overflow-wrap:anywhere}
.wa-cr-tw .wa-cr-nt{padding-top:2px}
}

@container (max-width:760px){
.sa .wa-cr-dbg,.sa .wa-cr-ic,.sa .wa-cr-ca{grid-template-columns:minmax(0,1fr)}
.sa .wa-cr-rc{grid-template-columns:minmax(0,1fr)}
.sa .wa-cr-fn li{grid-template-columns:22px minmax(88px,1fr) minmax(0,1fr) 58px 54px 74px;gap:8px}
}

@container (max-width:620px){
.sa .wa-cr-hm,.sa .wa-cr-sm{grid-template-columns:minmax(0,1fr)}
.sa .wa-cr-hp,.sa .wa-cr-sp{width:min(224px,100%);margin:0 auto}
.sa .wa-cr-fn li{grid-template-columns:22px minmax(0,1fr) 58px 54px 74px}
.sa .wa-cr-fb,.sa .wa-cr-fn li.wa-cr-fh > span:nth-child(3){display:none}
.sa .wa-cr-ba{grid-template-columns:minmax(0,1fr)}
.sa .wa-cr-vs{justify-self:center;rotate:90deg}
.sa .wa-cr-fx,.sa .wa-cr-ck2{grid-template-columns:minmax(0,1fr)}
}

@container (max-width:460px){
.sa .wa-cr-pg,.sa .wa-cr-vr,.sa .wa-cr-fl{grid-template-columns:minmax(0,1fr)}
.sa .wa-cr-sr{grid-template-columns:minmax(0,1fr);gap:3px}
.sa .wa-cr-hr,.sa .wa-cr-dr{grid-template-columns:minmax(0,1fr);gap:3px}
.sa .wa-cr-dd dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
.sa .wa-cr-sg li{grid-template-columns:minmax(0,1fr) 46px 74px;gap:6px}
.sa .wa-cr-sc{overflow-x:auto;padding-bottom:4px}
.sa .wa-cr-sc > *{min-width:400px}
.sa .wa-tb.wa-cr-wt.is-lead :is(th,td):is(:nth-child(1),:nth-child(4)){display:none}
.sa .wa-tb.wa-cr-wt.is-lead :is(th,td):nth-child(2){white-space:normal}
.sa .wa-tb.wa-cr-wt{font-size:11.5px}
.sa .wa-tb.wa-cr-wt :is(th,td){padding:6px 4px 6px 6px}
.sa .wa-cr-rl li > span{white-space:normal}
.sa .wa-cr-df b{white-space:nowrap}
.sa .wa-cr-fn{padding:2px 12px 4px}
.sa .wa-tb.wa-cr-wt :is(.sa-chip,.wa-ok,.wa-no){white-space:normal;text-align:left;line-height:1.25}
.sa .wa-tb.wa-cr-wt:is(.is-form,.is-guard) :is(th,td):first-child{min-width:84px}
.sa .wa-tb.wa-cr-wt.is-form :is(th,td):first-child{white-space:nowrap}
.sa .wa-tb.wa-cr-wt.is-form :is(th,td):last-child{display:none}
.sa .wa-cr-fn li{grid-template-columns:22px auto 1fr auto;gap:4px 6px;padding:10px 0}
.sa .wa-cr-fn li.wa-cr-fh{display:none}
.sa .wa-cr-fn li > i:not(.sa-dot){grid-row:1;grid-column:1}
.sa .wa-cr-fs{grid-row:1;grid-column:2 / -1}
.sa .wa-cr-fb{display:block;grid-row:2;grid-column:2 / -1}
.sa .wa-cr-fv{grid-row:3;grid-column:2;text-align:left;font-size:12px}
.sa .wa-cr-fv::after{content:" người";font-weight:400;color:#5f6368}
.sa .wa-cr-fn li > em{grid-row:3;grid-column:3;font-size:12px;text-align:center;white-space:nowrap}
.sa .wa-cr-fn li > em:not(.wa-cr-fd)::after{content:" qua";color:#80868b}
.sa .wa-cr-fn li > em.wa-cr-fd{grid-column:4;text-align:right}
.sa .wa-cr-fn li:nth-child(2) > em{display:none}
}

/* ================= Bảo trì website: sổ bảo trì, Drive, hosting, giám sát, sự cố, báo cáo ================= */
.sa{
.wa-ap.is-bt{--ap-acc:#2f6f8f;--ap-on:#e4f0f6;--ap-onink:#3f4c80;--ap-ink:#21294e;--ap-main:#f6fafc;--ap-navw:142px}
.wa-ap.is-bt .wa-ap-av{background:#2f6f8f}
.wa-ap.is-dr{--ap-acc:#1a73e8;--ap-on:#e8f0fe;--ap-onink:#1967d2;--ap-ink:#3c4043;--ap-main:#fff;--ap-navw:150px}
.wa-ap.is-dr .wa-ap-brand i:not(.sa-dot){background:linear-gradient(135deg,#0f9d58 0 34%,#fbbc04 34% 67%,#4285f4 67%);color:transparent}
.wa-ap.is-dr .wa-ap-av{background:#1a73e8}
.wa-ap.is-hp{--ap-acc:#0f766e;--ap-on:#dff3f0;--ap-onink:#0b5c55;--ap-ink:#1c2e2c;--ap-main:#f5faf9;--ap-navw:140px}
.wa-ap.is-hp .wa-ap-av{background:#0f766e}

/* shared bits */
.wa-tb.wa-bt-wt{font-size:12px}
.wa-tb.wa-bt-wt :is(th,td){padding:8px 5px 8px 8px;white-space:normal;max-width:none;overflow:visible}
.wa-tb.wa-bt-wt td{vertical-align:top}
.wa-tb.wa-bt-wt td .sa-dot{vertical-align:2px}
.wa-bt-nt{display:block;margin:0;font-size:11.5px;line-height:1.5;color:#5f6368}
.wa-pc .wa-bt-nt{padding:8px 14px 10px}
.wa-bt-nt > .sa-dot:first-child{margin-left:0;margin-right:6px}
.wa-bt-nt .ico{width:13px;height:13px;margin-right:4px;vertical-align:-2px}

/* Drive folder */
.wa-bt-bc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin:0;font-size:14px;color:#5f6368}
.wa-bt-bc i{font-style:normal;color:#80868b}
.wa-bt-bc b{font-weight:500;color:#202124}
.wa-bt-sh{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:#5f6368}
.wa-bt-sh em{font-style:normal;min-width:0}
.wa-bt-av{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-right:-4px;border:2px solid #fff;border-radius:50%;background:#1a73e8;font-size:11px;font-weight:700;color:#fff}
.wa-bt-av.is-2{background:#e8710a}
.wa-bt-fh,.wa-bt-fl li{display:grid;grid-template-columns:30px minmax(0,1fr) 78px 112px 62px;gap:8px;align-items:center}
.wa-bt-fh{padding:7px 10px;border-bottom:1px solid #dadce0;font-size:12px;font-weight:600;color:#5f6368}
.wa-bt-fh span:first-child{grid-column:1 / 3}
.wa-bt-fh .r,.wa-bt-fl .r{text-align:right}
.wa-bt-fl{display:grid;margin:-12px 0 0;padding:0;list-style:none}
.wa-bt-fl li{padding:8px 10px;border-bottom:1px solid #f1f3f4;font-size:13px}
.wa-bt-fl b{min-width:0;overflow-wrap:anywhere;font-weight:400;color:#202124}
.wa-bt-fl em{font-style:normal;font-size:12px;color:#5f6368}
.wa-bt-fi{display:grid;place-items:center;width:30px;height:24px}
.wa-bt-fi .ico{width:19px;height:19px}
.wa-bt-fi.is-sql{color:#1a73e8}
.wa-bt-fi.is-zip{color:#f9ab00}
.wa-bt-fi.is-doc{color:#4285f4}

/* restore wizard (inside the WordPress admin) */
.wa-bt-rs{display:grid;gap:6px;margin:0;padding:10px 14px 12px;list-style:none}
.wa-bt-rs li{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1px solid #dcdcde;border-radius:6px;background:#fff}
.wa-bt-rs li.is-on{border-color:#2271b1;background:#f3f8fc}
.wa-bt-rd{flex:none;width:15px;height:15px;margin-top:2px;border:2px solid #8c8f94;border-radius:50%;background:#fff}
.wa-bt-rs li.is-on .wa-bt-rd{border-color:#2271b1;background:#2271b1;box-shadow:inset 0 0 0 2px #fff}
.wa-bt-rs span,.wa-bt-pg span{display:grid;gap:1px;min-width:0}
.wa-bt-rs b,.wa-bt-pg b{font-size:13px;font-weight:600}
.wa-bt-rs em,.wa-bt-pg em{font-style:normal;font-size:12px;color:#646970}
.wa-bt-pg{display:grid;margin:0;padding:6px 14px 4px;list-style:none}
.wa-bt-pg li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #f0f0f1}
.wa-bt-pg li:first-child{border-top:0}
.wa-bt-pg li > .ico{width:16px;height:16px;color:#1e8e3e}
.wa-bt-pg li > i{font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#50575e}

/* plugin changelog */
.wa-bt-cl{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;align-items:start}
.wa-bt-ch{min-width:0;padding:12px 16px 14px;border:1px solid #dcdcde;border-radius:6px;background:#fff}
.wa-bt-ch h5{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15px;font-weight:600}
.wa-bt-ch h5 em{font-style:normal;font-size:12px;font-weight:400;color:#646970}
.wa-bt-ch ul{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.65}
.wa-bt-ch ul:last-child{margin-bottom:0}
.wa-bt-pf{display:grid;gap:0;margin:0;padding:10px 14px 12px;border:1px solid #dcdcde;border-radius:6px;background:#fff}
.wa-bt-pf > div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #f0f0f1;font-size:12px}
.wa-bt-pf dt{color:#646970}
.wa-bt-pf dd{margin:0;font-weight:600;text-align:right}
.wa-bt-pf .wa-bt-bt{display:grid;gap:6px;justify-items:start;padding-top:10px;border-bottom:0}
.wa-bt-bt span{font-size:11.5px;color:#646970}

/* hosting error log */
.wa-bt-lg{display:grid;margin:0;padding:0;list-style:none;border:1px solid #dbe5e3;border-radius:8px;background:#fff;overflow:hidden}
.wa-bt-lg li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:start;padding:7px 12px 7px 10px;border-top:1px solid #eef3f2;border-left:3px solid #dadce0;font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11.5px;line-height:1.5}
.wa-bt-lg li:first-child{border-top:0}
.wa-bt-lg li.is-w{border-left-color:#f9ab00;background:#fffbea}
.wa-bt-lg li.is-f{border-left-color:#d93025;background:#fdf1f0}
.wa-bt-lg time{color:#5f6368}
.wa-bt-lg li > span{min-width:0;overflow-wrap:anywhere}

/* monitoring: alert rules, three periods */
.wa-bt-ru{display:grid;margin:0;padding:4px 14px 6px;list-style:none}
.wa-bt-ru li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #f1f3f4;font-size:12.5px}
.wa-bt-ru li:first-child{border-top:0}
.wa-bt-ru li > span{min-width:0}
.wa-bt-sw{position:relative;flex:none;width:34px;height:18px;border-radius:9px;background:#bdc1c6}
.wa-bt-sw u{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003}
.wa-bt-sw.is-on{background:#1e8e3e}
.wa-bt-sw.is-on u{left:18px}
.wa-bt-mb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 14px 14px}
.wa-bt-mb section{display:grid;gap:3px;align-content:start;min-width:0;padding:10px 12px 11px;border:1px solid #e0e3e7;border-radius:8px;background:#fff}
.wa-bt-mb section.is-now{border-color:#1e8e3e;background:#f2faf4}
.wa-bt-mb p{margin:0;font-size:11.5px;color:#5f6368}
.wa-bt-mb b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.wa-bt-mb section > span{font-size:11.5px;color:#5f6368}
.wa-bt-ms{display:block;height:6px;margin-top:4px;border-radius:3px;background:#e8eaed;overflow:hidden}
.wa-bt-ms u{display:block;height:100%;border-radius:3px;background:#1e8e3e}
.wa-bt-mb em{font-style:normal;font-size:11.5px;color:#5f6368}

/* incident timeline and response stages */
.wa-bt-ih{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.wa-bt-ih b{font-size:15px;font-weight:600}
.wa-bt-ih em{font-style:normal;font-size:12px;color:#5f6368}
.wa-bt-tl{display:grid;margin:0;padding:6px 4px 0;list-style:none}
.wa-bt-tl li{position:relative;display:grid;grid-template-columns:44px 10px minmax(0,1fr);gap:12px;align-items:start;padding-bottom:14px}
.wa-bt-tl li::after{content:"";position:absolute;left:61px;top:15px;bottom:-1px;width:2px;background:#dadce0}
.wa-bt-tl li:last-child{padding-bottom:4px}
.wa-bt-tl li:last-child::after{display:none}
.wa-bt-tl time{font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:12px;line-height:18px;text-align:right;color:#5f6368}
.wa-bt-tl li > i{width:10px;height:10px;margin-top:4px;border-radius:50%;background:#9aa0a6}
.wa-bt-tl li.is-bad > i{background:#d93025}
.wa-bt-tl li.is-ok > i{background:#1e8e3e}
.wa-bt-tl li > span{display:block;min-width:0;font-size:12.5px;line-height:1.5}
.wa-bt-tl li > span b{display:block;font-size:13px;font-weight:600}
.wa-bt-tl li > span em{font-style:normal;color:#5f6368}
.wa-bt-sg{display:flex;gap:4px;padding:12px 14px 14px}
.wa-bt-sg span{display:grid;gap:2px;align-content:start;min-width:0;padding:9px 9px 10px;border-radius:6px}
.wa-bt-sg b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.wa-bt-sg em{font-style:normal;font-size:11.5px;line-height:1.3;overflow-wrap:anywhere}
.wa-bt-sg .is-a{background:#e8f0fe;color:#1967d2}
.wa-bt-sg .is-b{background:#fef7e0;color:#a35c00}
.wa-bt-sg .is-c{background:#fce8e6;color:#c5221f}
.wa-bt-sg .is-d{background:#e6f4ea;color:#137333}

/* monthly report document */
.wa-bt-pg2{padding:16px;background:#e8eaed}
.wa-bt-doc{max-width:660px;margin:0 auto;padding:18px 24px 20px;border:1px solid #dadce0;border-radius:4px;background:#fff;font-size:13px;line-height:1.55;color:#202124}
.wa-bt-dk{margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.6px;color:#2f6f8f}
.wa-bt-doc h4{margin:0 0 2px;font-size:22px;font-weight:600}
.wa-bt-ds{margin:0 0 6px;font-size:12px;color:#5f6368}
.wa-bt-doc h5{margin:14px 0 6px;font-size:14px;font-weight:700}
.wa-bt-doc ul{margin:0;padding-left:18px}
.wa-bt-doc li{margin:0 0 3px}
.wa-bt-dg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wa-bt-dg span{display:grid;gap:1px;align-content:start;min-width:0;padding:8px 10px 9px;border:1px solid #e0e3e7;border-radius:8px;background:#f8fafb}
.wa-bt-dg em{font-style:normal;font-size:11px;color:#5f6368}
.wa-bt-dg b{font-size:22px;font-weight:600;line-height:1.2}
.wa-bt-dg i{font-style:normal;font-size:10.5px;line-height:1.35;color:#5f6368}

/* task board and trend */
.wa-bt-kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.wa-bt-kb section{min-width:0;border:1px solid #e0e3e7;border-top:3px solid #9aa0a6;border-radius:8px;background:#fff}
.wa-bt-kb section.is-done{border-top-color:#1e8e3e}
.wa-bt-kb section.is-doing{border-top-color:#1a73e8}
.wa-bt-kb section.is-wait{border-top-color:#e37400}
.wa-bt-kb p{display:flex;align-items:center;gap:6px;margin:0;padding:9px 12px;font-size:12.5px;font-weight:600}
.wa-bt-kb p i:not(.sa-dot){padding:1px 7px;border-radius:9px;background:#eef1f4;font-size:11px;font-style:normal;font-weight:600;color:#5f6368}
.wa-bt-kb ul{display:grid;gap:6px;margin:0;padding:0 8px 10px;list-style:none}
.wa-bt-kb li{display:grid;gap:1px;padding:7px 9px;border:1px solid #eceff1;border-radius:6px;background:#fafbfc}
.wa-bt-kb li b{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.wa-bt-kb li em{font-style:normal;font-size:11px;color:#5f6368}
.wa-bt-tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;padding:12px 14px 12px}
.wa-bt-tr span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:128px;min-width:0}
.wa-bt-tr b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.wa-bt-tr i{display:block;width:58%;height:calc(var(--h) * .8px);border-radius:4px 4px 0 0;background:#b9d3e1}
.wa-bt-tr span.is-hi i{background:#2f6f8f}
.wa-bt-tr em{font-style:normal;font-size:10.5px;color:#5f6368}
}

@container (max-width:760px){
.sa .wa-bt-dg{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa .wa-bt-doc{padding:16px 18px 18px}
}

@container (max-width:620px){
.sa .wa-bt-cl{grid-template-columns:minmax(0,1fr)}
.sa .wa-bt-kb{grid-template-columns:minmax(0,1fr)}
.sa .wa-bt-fh,.sa .wa-bt-fl li{grid-template-columns:30px minmax(0,1fr) 96px 56px}
.sa .wa-bt-fh span:nth-child(2),.sa .wa-bt-fl li > em:nth-of-type(1){display:none}
.sa .wa-bt-mb{gap:8px;padding:10px 10px 12px}
.sa .wa-bt-mb b{font-size:19px}
.sa .wa-bt-pg2{padding:12px 10px}
}

@container (max-width:460px){
.sa .wa-bt-fh,.sa .wa-bt-fl li{grid-template-columns:24px minmax(0,1fr) 58px;gap:6px}
.sa .wa-bt-fh span:nth-child(3),.sa .wa-bt-fl li > em:nth-of-type(2){display:none}
.sa .wa-bt-fi{width:24px}
.sa .wa-bt-mb{grid-template-columns:minmax(0,1fr)}
.sa .wa-bt-lg li{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px}
.sa .wa-bt-lg time{grid-column:1 / -1}
.sa .wa-bt-tr{gap:4px;padding:10px 8px}
.sa .wa-bt-tr b{font-size:11px}
.sa .wa-bt-sg{flex-wrap:wrap}
.sa .wa-bt-sg span{flex:1 1 40%}
.sa .wa-bt-tl li{grid-template-columns:38px 10px minmax(0,1fr);gap:8px}
.sa .wa-bt-tl li::after{left:51px}
.sa .wa-bt-dg{gap:6px}
.sa .wa-bt-doc{padding:14px 14px 16px}
.sa .wa-tb.wa-bt-wt{font-size:11.5px}
.sa .wa-tb.wa-bt-wt :is(th,td){padding:6px 4px 6px 6px}
.sa .wa-tb.wa-bt-wt :is(.sa-chip,.wa-ok,.wa-no){white-space:normal;text-align:left;line-height:1.25}
.sa .wa-bt-rs li{padding:8px 10px}
.sa .wa-bt-pg li{gap:8px}
.sa .wa-bt-ch{padding:10px 12px 12px}
}

/* ================= Tối ưu tốc độ: DevTools, CrUX, PageSpeed, Squoosh, tiêu đề phản hồi, bộ nhớ đệm, mã bên thứ ba, xu hướng ================= */
.sa{
.wa-ap.is-sp{--ap-acc:#1b6ca8;--ap-on:#e3f0fa;--ap-onink:#394679;--ap-ink:#1e2649;--ap-main:#f5f9fc;--ap-navw:140px}
.wa-ap.is-sp .wa-ap-av{background:#1b6ca8}

/* DevTools frame */
.wa-sp-dt{display:grid;min-width:0;background:#fff;font-size:12px;color:#202124}
.wa-sp-dtt{display:flex;gap:2px;padding:0 6px;border-bottom:1px solid #cacdd1;background:#f1f3f4;overflow:hidden}
.wa-sp-dtt :is(span,b){flex:none;padding:7px 10px 6px;font-weight:400;white-space:nowrap;color:#5f6368}
.wa-sp-dtt b{border-bottom:2px solid #1a73e8;font-weight:500;color:#1a73e8}
.wa-sp-dtb{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;padding:5px 8px;border-bottom:1px solid #e0e3e7;background:#f8f9fa;font-size:11.5px}
.wa-sp-rec{flex:none;width:11px;height:11px;border-radius:50%;background:#d93025}
.wa-sp-rec.is-r{border:2px solid #d93025;background:none}
.wa-sp-in{display:inline-flex;align-items:center;gap:4px;min-width:0;padding:2px 10px 2px 6px;border:1px solid #cacdd1;border-radius:3px;background:#fff;color:#80868b}
.wa-sp-in .ico{width:12px;height:12px}
.wa-sp-ch{padding:2px 8px;border-radius:10px;background:#eceff1;color:#3c4043}
.wa-sp-ch.is-on{background:#d3e3fd;color:#0b57d0}
.wa-sp-th{padding:2px 8px;border:1px solid #cacdd1;border-radius:3px;background:#fff;white-space:nowrap;color:#3c4043}
.wa-sp-ic{display:inline-grid;place-items:center;width:20px;height:20px;color:#5f6368}
.wa-sp-ic .ico{width:14px;height:14px}
.wa-sp-tt{margin-left:auto;color:#5f6368}
.wa-sp-dtf{margin:0;padding:6px 10px;border-top:1px solid #e0e3e7;background:#f8f9fa;font-size:11.5px;line-height:1.5;color:#3c4043}
.wa-sp-dtf b{font-weight:600}
.wa-sp-dtf b.b{color:#1a73e8}
.wa-sp-dtf b.r{color:#d93025}

/* network waterfall */
.wa-sp-nt{display:grid;min-width:0}
.wa-sp-nh,.wa-sp-nr{display:grid;grid-template-columns:minmax(0,1.5fr) 38px 64px 60px 52px minmax(0,1.5fr);gap:8px;align-items:center}
.wa-sp-nh{padding:5px 10px;border-bottom:1px solid #dadce0;background:#f8f9fa;font-size:11.5px;font-weight:600;color:#5f6368}
.wa-sp-nt :is(.wa-sp-nh,.wa-sp-nr) em{font-style:normal}
.wa-sp-nt ul{display:grid;margin:0;padding:0;list-style:none}
.wa-sp-nr{min-height:25px;padding:4px 10px;border-bottom:1px solid #f1f3f4;font-size:11.5px}
.wa-sp-nr:nth-child(even){background:#fafbfc}
.wa-sp-nr.is-sel{background:#e8f0fe}
.wa-sp-nt .r{text-align:right;font-variant-numeric:tabular-nums}
.wa-sp-nr .n{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.wa-sp-nr .k{flex:none;width:9px;height:9px;border-radius:2px;background:#9aa0a6}
.wa-sp-nr .k.is-doc{background:#4285f4}
.wa-sp-nr .k.is-css{background:#a142f4}
.wa-sp-nr .k.is-js{background:#f9ab00}
.wa-sp-nr .k.is-font{background:#5f6368}
.wa-sp-nr .k.is-img{background:#34a853}
.wa-sp-nt .wf{position:relative;height:14px;min-width:0}
.wa-sp-nh .wf{display:flex;justify-content:space-between;height:auto;font-weight:400;font-size:10px;color:#80868b}
.wa-sp-nh .wf i{font-style:normal}
.wa-sp-nr .wf .w{position:absolute;top:3px;height:8px;border-radius:1px;background:#cfd8dc}
.wa-sp-nr .wf .g{position:absolute;top:3px;height:8px;border-radius:1px;background:#9aa0a6}
.wa-sp-nr .wf .g.is-doc{background:#4285f4}
.wa-sp-nr .wf .g.is-css{background:#a142f4}
.wa-sp-nr .wf .g.is-js{background:#f9ab00}
.wa-sp-nr .wf .g.is-font{background:#5f6368}
.wa-sp-nr .wf .g.is-img{background:#34a853}
.wa-sp-nr .wf u{position:absolute;top:-6px;bottom:-6px;width:1px;background:#1a73e8;text-decoration:none}
.wa-sp-nr .wf u.r{background:#d93025}

/* coverage */
.wa-sp-cvt{display:grid;min-width:0}
.wa-sp-cvh,.wa-sp-cv{display:grid;grid-template-columns:minmax(0,1.7fr) 38px 74px 104px minmax(0,1fr);gap:8px;align-items:center}
.wa-sp-cvh{padding:5px 10px;border-bottom:1px solid #dadce0;background:#f8f9fa;font-size:11.5px;font-weight:600;color:#5f6368}
.wa-sp-cvt ul{display:grid;margin:0;padding:0;list-style:none}
.wa-sp-cv{padding:6px 10px;border-bottom:1px solid #f1f3f4;font-size:11.5px}
.wa-sp-cv:nth-child(even){background:#fafbfc}
.wa-sp-cv .u{min-width:0;overflow-wrap:anywhere;font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11px}
.wa-sp-cvt em{font-style:normal}
.wa-sp-cvt .r{text-align:right;font-variant-numeric:tabular-nums}
.wa-sp-cv em.r i{display:block;font-style:normal;font-size:10.5px;color:#c5221f}
.wa-sp-cv .v{min-width:0}
.wa-sp-cv .t{display:flex;height:9px;border-radius:2px;background:#9ec1f5;overflow:hidden}
.wa-sp-cv .t u{display:block;height:100%;background:#e8736b;text-decoration:none}

/* Chrome UX Report */
.wa-sp-cx{display:grid;gap:10px;padding:14px 16px 12px;background:#fff}
.wa-sp-cxt{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.wa-sp-cxt .ico{flex:none;width:16px;height:16px;color:#5f6368}
.wa-sp-cxt b{min-width:0;font-weight:500;overflow-wrap:anywhere}
.wa-sp-cxt i{flex:none;margin-left:auto;padding:2px 10px;border:1px solid #dadce0;border-radius:12px;font-style:normal;font-size:11.5px;color:#5f6368}
.wa-sp-cxn{margin:0;font-size:12px;line-height:1.5;color:#5f6368}
.wa-sp-cxg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wa-sp-cxs{min-width:0;padding:10px 12px 6px;border:1px solid #e0e3e7;border-radius:8px}
.wa-sp-cxs h4{display:flex;align-items:center;margin:0 0 4px;font-size:13px;font-weight:600}
.wa-sp-cxs ul{display:grid;margin:0;padding:0;list-style:none}
.wa-sp-cxs li{display:grid;grid-template-columns:36px 56px minmax(0,1fr) 56px 20px;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #f1f3f4;font-size:12px}
.wa-sp-cxs li:first-child{border-top:0}
.wa-sp-cxs li b{font-weight:600}
.wa-sp-cxs li strong{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.wa-sp-cxs li strong.is-g{color:#0d652d}
.wa-sp-cxs li strong.is-y{color:#b06000}
.wa-sp-cxs li strong.is-r{color:#c5221f}
.wa-sp-cxs li em{font-style:normal;font-size:11px;text-align:right;white-space:nowrap;color:#5f6368}
.wa-sp-cxs li .sa-dot{margin:0}
.wa-sp-cxk{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;font-size:11.5px;color:#5f6368}
.wa-sp-cxk i{width:9px;height:9px;margin-left:8px;border-radius:50%}
.wa-sp-cxk i:first-child{margin-left:0}
.wa-sp-cxk i.g{background:#0cce6b}
.wa-sp-cxk i.y{background:#ffa400}
.wa-sp-cxk i.r{background:#ff4e42}

/* PageSpeed audits: images and third-party code */
.wa-sp-au{display:grid;min-width:0;background:#fff}
.wa-sp-aut{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid #e0e3e7;font-size:12.5px}
.wa-sp-aut span{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.wa-sp-aut .ico{flex:none;width:14px;height:14px;color:#5f6368}
.wa-sp-aut i{flex:none;padding:2px 10px;border-radius:12px;background:#f1f3f4;font-style:normal;font-size:11.5px}
.wa-sp-au h4{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:12px 14px;border-bottom:1px solid #e0e3e7;font-size:14px;font-weight:500;line-height:1.35}
.wa-sp-au h4 .tri{flex:none;width:0;height:0;border-right:6px solid transparent;border-bottom:11px solid #ff4e42;border-left:6px solid transparent}
.wa-sp-au h4 em{font-style:normal;font-size:12.5px;font-weight:400;color:#c5221f}
.wa-sp-au h4 .sa-dot{margin:0}
.wa-sp-aur{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) 70px 78px;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid #f1f3f4;font-size:12px}
.wa-sp-aur.is-h{background:#f8f9fa;font-size:11.5px;font-weight:600;color:#5f6368}
.wa-sp-aur .n{display:flex;align-items:center;gap:8px;min-width:0}
.wa-sp-aur .n b{min-width:0;font-weight:400;overflow-wrap:anywhere}
.wa-sp-aur .th{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid #e0e3e7;border-radius:3px;background:#f6efe6;overflow:hidden}
.wa-sp-aur .th svg{display:block;max-width:100%;max-height:100%}
.wa-sp-aur .r{text-align:right;font-variant-numeric:tabular-nums}
.wa-sp-aur .is-r{color:#c5221f}
.wa-sp-aum{margin:0;padding:9px 14px;font-size:11.5px;line-height:1.5;color:#5f6368}
.wa-sp-tpr{display:grid;grid-template-columns:minmax(0,1.1fr) 92px minmax(0,1.7fr);gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid #f1f3f4;font-size:12.5px}
.wa-sp-tpr.is-h{background:#f8f9fa;font-size:11.5px;font-weight:600;color:#5f6368}
.wa-sp-tpr .n{display:flex;align-items:center;min-width:0}
.wa-sp-tpr .n b{min-width:0;font-weight:500;overflow-wrap:anywhere}
.wa-sp-tpr .r{text-align:right;font-variant-numeric:tabular-nums}
.wa-sp-tpr .m{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;gap:8px;min-width:0}
.wa-sp-tpr .m i{display:block;height:8px;border-radius:2px;background:#e8710a}
.wa-sp-tpr .m em{font-style:normal;font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:#3c4043}

/* Squoosh */
.wa-sp-sq{display:grid;min-width:0;background:#1d1e20;font-size:12px;color:#e8eaed}
.wa-sp-sqv{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:176px}
.wa-sp-sqi{position:relative;display:grid;place-items:center;min-width:0;padding:14px 8px 30px;background:#2b2c30;overflow:hidden}
.wa-sp-sqi.is-r{border-left:2px solid #fff;background:#34363b}
.wa-sp-sqi em{position:absolute;left:10px;bottom:8px;padding:2px 9px;border-radius:10px;background:#000a;font-style:normal;font-size:11px;color:#fff}
.wa-sp-sqi.is-r em{right:10px;left:auto}
.wa-sp-sqh{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;color:#202124;box-shadow:0 1px 4px #0006}
.wa-sp-sqh .ico{width:16px;height:16px}
.wa-sp-sqp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#3c4043}
.wa-sp-sqo{display:grid;gap:8px;align-content:start;min-width:0;padding:0 0 12px;background:#26272b}
.wa-sp-sqo h5{margin:0;padding:7px 12px;background:#3a3b40;font-size:12px;font-weight:600;overflow-wrap:anywhere}
.wa-sp-sqo.is-r h5{background:#f0a400;color:#202124}
.wa-sp-sqo > p{margin:0 12px}
.wa-sp-sqm{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;color:#bdc1c6}
.wa-sp-sqm b{font-weight:600;color:#fff}
.wa-sp-sqf{display:flex;align-items:center;gap:8px;min-width:0}
.wa-sp-sqf label{flex:none;font-size:11.5px;color:#9aa0a6}
.wa-sp-sqf > span{flex:none;min-width:38px;padding:2px 8px;border:1px solid #5f6368;border-radius:3px;background:#17181a;text-align:center;color:#fff}
.wa-sp-sqs{flex:1 1 40px;display:block;height:4px;border-radius:2px;background:#5f6368}
.wa-sp-sqs u{display:block;height:100%;border-radius:2px;background:#f0a400;text-decoration:none}
.wa-sp-sqr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.wa-sp-sqr b{font-size:20px;font-weight:600;color:#fff}
.wa-sp-sqr em{padding:1px 9px;border-radius:10px;background:#1e8e3e;font-style:normal;font-size:11.5px;color:#fff}

/* response headers */
.wa-sp-hd{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);min-height:230px}
.wa-sp-hl{display:grid;align-content:start;margin:0;padding:0;border-right:1px solid #e0e3e7;list-style:none;font-size:11.5px}
.wa-sp-hl li{padding:5px 10px;border-bottom:1px solid #f1f3f4;overflow-wrap:anywhere}
.wa-sp-hl li.is-sel{background:#e8f0fe;color:#174ea6}
.wa-sp-hp{min-width:0;font-size:11.5px}
.wa-sp-hp h5{margin:0;padding:5px 10px;border-top:1px solid #e0e3e7;border-bottom:1px solid #e0e3e7;background:#f1f3f4;font-size:11.5px;font-weight:600}
.wa-sp-hk{display:grid;gap:3px;margin:0;padding:6px 10px 8px;list-style:none}
.wa-sp-hk li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;line-height:1.6}
.wa-sp-hk b{flex:none;font-weight:600;color:#5f6368}
.wa-sp-hk span{min-width:0;overflow-wrap:anywhere;font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11px;color:#202124}
.wa-sp-hk .ok{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#1e8e3e}

/* request timing, before and after */
.wa-sp-tmg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px;background:#f8f9fa}
.wa-sp-tm{min-width:0;border:1px solid #e0e3e7;border-radius:8px;background:#fff;overflow:hidden}
.wa-sp-tm h4{margin:0;padding:8px 10px;border-bottom:1px solid #e0e3e7;background:#f1f3f4;font-size:12px;font-weight:600;line-height:1.35}
.wa-sp-tm ul{display:grid;margin:0;padding:4px 0;list-style:none}
.wa-sp-tm li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) 66px;gap:8px;align-items:center;padding:4px 10px;font-size:11px;line-height:1.35}
.wa-sp-tm li.is-hot{background:#fff4e5}
.wa-sp-tm .bar{position:relative;display:block;height:9px;border-radius:2px;background:#f1f3f4}
.wa-sp-tm .bar u{position:absolute;top:0;bottom:0;border-radius:2px;background:#9ec1f5;text-decoration:none}
.wa-sp-tm li.is-hot .bar u{background:#e8710a}
.wa-sp-tm li b{font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.wa-sp-tm p{margin:0;padding:7px 10px;border-top:1px solid #e0e3e7;font-size:12px;color:#5f6368}
.wa-sp-tm p b{color:#202124}

/* page cache plugin */
.wa-sp-lst{display:flex;flex-wrap:wrap;gap:5px 6px;min-width:0}
.wa-sp-lst span{padding:2px 8px;border:1px solid #c3c4c7;border-radius:3px;background:#f6f7f7;font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:12px}
.wa-sp-fn{font-style:normal;font-size:11.5px;color:#646970}

/* video placeholder */
.wa-sp-fc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;background:#f8f9fa}
.wa-sp-fc section{min-width:0;border:1px solid #e0e3e7;border-radius:8px;background:#fff;overflow:hidden}
.wa-sp-fc section.is-a{border-color:#9ad1a9}
.wa-sp-fc h4{margin:0;padding:9px 12px;border-bottom:1px solid #e0e3e7;font-size:12.5px;font-weight:600;line-height:1.4}
.wa-sp-fc section.is-a h4{background:#f2faf4}
.wa-sp-fc section.is-b h4{background:#fff7f0}
.wa-sp-fv{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(160deg,#f6ecdf,#e6cfae);overflow:hidden}
.wa-sp-fv .pl{position:absolute;inset:0;display:grid;place-items:center}
.wa-sp-fv .pl .sa-dot{position:absolute;top:calc(50% - 34px);left:calc(50% + 26px);margin:0}
.wa-sp-fv em{position:absolute;right:10px;bottom:7px;left:10px;font-style:normal;font-size:11.5px;font-weight:500;color:#fff;text-shadow:0 1px 3px #000a}
.wa-sp-fv.is-yt em{top:0;right:0;bottom:auto;left:0;padding:8px 10px 14px;background:linear-gradient(#000b,#0000)}
.wa-sp-fc p{margin:0;padding:9px 12px;font-size:12px;line-height:1.5;color:#5f6368}
.wa-sp-fc p b{color:#202124}

/* LCP trend */
.wa-sp-ct{display:grid;gap:10px;padding:14px 16px 12px;background:#fff}
.wa-sp-cth{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 12px}
.wa-sp-cth .t{display:grid;gap:2px;min-width:0}
.wa-sp-cth b{font-size:15px;font-weight:600}
.wa-sp-cth i{font-style:normal;font-size:12px;color:#5f6368}
.wa-sp-ctv{display:flex;align-items:baseline;gap:8px}
.wa-sp-ctv strong{font-size:24px;font-weight:500;color:#0d652d}
.wa-sp-ctv em{padding:1px 9px;border-radius:10px;background:#e6f4ea;font-style:normal;font-size:12px;color:#137333}
.wa-sp-ctc{position:relative}
.wa-sp-pn{position:absolute;top:0;width:0;height:160px;border-left:1.5px dashed #5f6368}
.wa-sp-pn em{position:absolute;top:4px;right:6px;padding:2px 7px;border-radius:3px;background:#3c4043;font-style:normal;font-size:10.5px;white-space:nowrap;color:#fff}
.wa-sp-pn.is-2 em{right:auto;left:6px}
.wa-sp-cd{position:absolute;transform:translate(-50%,-50%)}
.wa-sp-cd .sa-dot{margin:0}
.wa-sp-ctk{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;font-size:11.5px;color:#5f6368}
.wa-sp-ctk i{display:inline-block;width:16px;height:0;margin-right:6px;border-top:2px dashed;vertical-align:middle}
.wa-sp-ctk i.g{border-color:#0cce6b}
.wa-sp-ctk i.r{border-color:#ff4e42}
.wa-sp-ctk i.b{border-top-style:solid;border-color:#1a73e8}

/* weekly check */
.wa-sp-bn{margin:0;padding:9px 14px 10px;border-top:1px solid #e8eaed;font-size:11.5px;line-height:1.5;color:#5f6368}
}

@container (max-width:760px){
.sa .wa-sp-hd{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr)}
.sa .wa-sp-cxs li{grid-template-columns:34px 54px minmax(0,1fr) 52px 20px}
}

@container (max-width:620px){
.sa .wa-sp-nh,.sa .wa-sp-nr{grid-template-columns:minmax(0,1.2fr) 56px 46px minmax(0,1fr);gap:6px}
.sa :is(.wa-sp-nh,.wa-sp-nr) > em:nth-of-type(-n+2){display:none}
.sa .wa-sp-nh .wf i:nth-child(even){display:none}
.sa .wa-sp-cvh,.sa .wa-sp-cv{grid-template-columns:minmax(0,1fr) 68px 92px}
.sa .wa-sp-cv > .v,.sa .wa-sp-cvh > span:last-child,.sa :is(.wa-sp-cvh,.wa-sp-cv) > em:first-of-type{display:none}
.sa .wa-sp-cxg{grid-template-columns:minmax(0,1fr)}
.sa .wa-sp-aur{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) 62px 66px;gap:8px}
.sa .wa-sp-tpr{grid-template-columns:minmax(0,1fr) 78px minmax(0,1.3fr);gap:8px}
.sa .wa-sp-hd{grid-template-columns:minmax(0,1fr)}
.sa .wa-sp-hl{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-bottom:1px solid #e0e3e7}
.sa .wa-sp-tmg{grid-template-columns:minmax(0,1fr)}
.sa .wa-sp-fc{grid-template-columns:minmax(0,1fr)}
.sa .wa-sp-ct{padding:12px 12px 10px}
}

@container (max-width:460px){
.sa .wa-sp-nh,.sa .wa-sp-nr{grid-template-columns:minmax(0,1fr) 44px minmax(0,.8fr)}
.sa :is(.wa-sp-nh,.wa-sp-nr) > em:nth-of-type(-n+3){display:none}
.sa .wa-sp-nh .wf i:nth-child(n+4){display:none}
.sa .wa-sp-cvh,.sa .wa-sp-cv{grid-template-columns:minmax(0,1fr) 88px}
.sa :is(.wa-sp-cvh,.wa-sp-cv) > em:nth-of-type(-n+2){display:none}
.sa .wa-sp-cx{padding:12px 12px 10px}
.sa .wa-sp-cxs li{grid-template-columns:32px 52px minmax(0,1fr) 50px 18px;gap:6px}
.sa .wa-sp-aur{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 62px}
.sa .wa-sp-aur > span:nth-child(3){display:none}
.sa .wa-sp-tpr{grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr)}
.sa .wa-sp-tpr .m{grid-template-columns:minmax(0,1fr) 44px;gap:6px}
.sa .wa-sp-sqp{grid-template-columns:minmax(0,1fr)}
.sa .wa-sp-sqv{min-height:150px}
.sa .wa-sp-hl{grid-template-columns:minmax(0,1fr)}
.sa .wa-sp-tm li{grid-template-columns:minmax(0,1fr) minmax(0,.7fr) 62px;gap:6px}
.sa .wa-sp-pn em{font-size:10px;padding:2px 5px}
}



@container (max-width:620px){
.sa .sa-code pre{display:grid;grid-template-columns:minmax(100%,max-content);overflow-x:auto;scrollbar-width:thin}
.sa .sa-code .sa-ln-r code{overflow:visible;text-overflow:clip}
}

@container (max-width:460px){
.sa .wa-sp-dtt :is(span,b){padding:7px 8px}
.sa .wa-sp-dtt span:nth-of-type(-n+2){display:none}
.sa .wa-sp-dtt b ~ span:nth-of-type(n+6){display:none}
.sa .wa-sp-pn.is-2 em{top:28px;right:6px;left:auto}
}


@container (max-width:300px){
.sa .wa-sp-sqi svg{max-width:100%;height:auto}
.sa .sa-gbrand b{display:none}
.sa .sa-gtabs{gap:11px;padding:0 10px}
}

/* ================= Tích hợp hệ thống: biểu mẫu, CRM, Tag Manager, GA4, cổng thanh toán, đồng bộ, giám sát ================= */
.sa{
.wa-ap.is-pay{--ap-acc:#4f46e5;--ap-on:#e8e7fd;--ap-onink:#3730a3;--ap-ink:#161d4d;--ap-main:#f8f8ff;--ap-navw:140px}
.wa-ap.is-pay .wa-ap-av{background:#4f46e5}
.wa-ap.is-lg{--ap-top:#1e2643;--ap-ink:#e4e7eb;--ap-acc:#0d9488;--ap-on:#0d9488;--ap-onink:#fff;--ap-nav:#1e2643;--ap-main:#f3f5f7;--ap-navw:132px}
.wa-ap.is-lg .wa-ap-top{border-color:#1e2643}
.wa-ap.is-lg .wa-ap-brand{color:#f5f7fa}
.wa-ap.is-lg .wa-ap-prop{border-color:#3e486d;background:#323b5e;color:#f5f7fa}
.wa-ap.is-lg .wa-ap-av{background:#0d9488}
.wa-ap.is-lg .wa-ap-nav{border-color:#1e2643;padding-right:0}
.wa-ap.is-lg .wa-an{border-radius:0;color:#cbd2d9}
.wa-ap.is-lg .wa-an .ico{color:#9aa5b1}
.wa-ap.is-lg .wa-an.is-on{color:#fff}
.wa-ap.is-lg .wa-an.is-on .ico{color:#fff}
.wa-ap.is-lg .wa-ap-head h3{color:#1e2643}
.wa-ap.is-lg .wa-ap-head span{color:#52606d}

/* tabs of the WordPress plugin pages */
.wa-in-wt{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;border-bottom:1px solid #c3c4c7;
& :is(span,b){padding:6px 13px;border:1px solid #c3c4c7;border-bottom:0;background:#e8e8e8;font-size:12.5px;line-height:1.4;color:#50575e}
& b{margin-bottom:-1px;padding-bottom:7px;background:#f0f0f1;font-weight:600;color:#1d2327}
}

/* JSON and request viewer */
.wa-in-js{display:grid;margin:0;padding:8px 0;background:#1b223f;font:12px/1.65 Consolas,"Courier New",monospace;color:#d8dee9;overflow:hidden;
& > span{display:grid;grid-template-columns:30px minmax(0,1fr);min-width:0}
& u{padding-right:9px;text-align:right;text-decoration:none;color:#667085;user-select:none}
& code{min-width:0;overflow:hidden;white-space:pre;text-overflow:ellipsis;font:inherit}
& i{font-style:normal}
& i.a{color:#7ec7ff}
& i.s{color:#a5d6a7}
& i.n{color:#ffcc80}
& .is-mark{background:#303c6e}
&.is-s{padding:6px 0}
}
.wa-pc .wa-in-js{margin:0;border-radius:0 0 8px 8px}

/* form on the site */
.wa-in-st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.wa-in-sc{display:grid;gap:10px;align-content:start;min-width:0;padding:13px;border:1px solid #e7dccb;border-radius:10px;background:#fffdf9}
.wa-in-sh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;
& b{font-size:12.5px;color:#3d2a17}
}
.wa-in-cs{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:11.5px;line-height:1.5;color:#5b3a1e}
.wa-in-ck{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border:1px solid #b9a284;border-radius:3px;background:#fff;
&.is-on{border-color:#8a4b12;background:#8a4b12;color:#fff}
.ico{width:11px;height:11px}
}
.wa-in-sm{display:grid;gap:5px;margin:0;padding:0;list-style:none;font-size:12px;color:#2b2622;
& li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px}
& em{font-style:normal;color:#8a7a68}
}
.wa-in-lk{justify-self:start;font-size:12px;font-weight:600;color:#8a4b12;text-decoration:underline}

/* DevTools: network list and request details */
.wa-in-nt{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);min-height:250px;background:#fff}
.wa-in-nl{display:grid;align-content:start;margin:0;padding:0;border-right:1px solid #cacdd1;list-style:none;font-size:11.5px;
& li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:6px 9px;border-bottom:1px solid #eef0f2;color:#202124}
& li.is-h{background:#f8f9fa;color:#5f6368}
& li.is-on{background:#d3e3fd}
& b{overflow:hidden;font-weight:400;white-space:nowrap;text-overflow:ellipsis}
& em{font-style:normal;text-align:right;color:#188038}
& li.is-h em{color:#5f6368}
}
.wa-in-nd{display:grid;align-content:start;gap:9px;min-width:0;padding-bottom:10px}
.wa-in-nk{display:flex;border-bottom:1px solid #e0e3e7;font-size:11.5px;
& :is(span,b){padding:6px 10px;font-weight:400;white-space:nowrap;color:#5f6368}
& b{border-bottom:2px solid #1a73e8;color:#1a73e8}
}
.wa-in-nr{display:grid;gap:3px;margin:0 10px;font-size:11.5px;
& > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}
& dt{overflow-wrap:anywhere;color:#5f6368}
& dd{margin:0;overflow-wrap:anywhere;color:#202124}
}
.wa-in-st2{display:inline-flex;align-items:center;gap:6px;
& i{width:8px;height:8px;border-radius:50%;background:#188038}
}
.wa-in-nh{margin:0 10px;font-size:11.5px;font-weight:600;color:#202124}
.wa-in-nd > .wa-in-js{margin:0 10px;border-radius:5px}
.wa-in-kn{display:flex;align-items:flex-start;gap:8px;margin:0 10px;padding:8px 10px;border:1px solid #cfe5d2;border-radius:6px;background:#f1faf2;font-size:11.5px;line-height:1.5;color:#2f5a35;
.ico{flex:none;width:14px;height:14px;margin-top:1px}
}
.wa-pc .wa-in-kn{margin:10px 12px 12px}

/* CRM */
.wa-in-ms{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-size:12px;color:#6b5a47}
.wa-in-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;background:#e6f4ea;font-weight:600;color:#137333;
& i{width:7px;height:7px;border-radius:50%;background:#34a853}
}
.wa-in-tb{margin-left:auto;padding:5px 13px;border:1px solid #c9b79d;border-radius:16px;background:#fffdf9;font-size:11.5px;font-weight:600;color:#6b3a0d}
.wa-in-rl{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:9px 10px;align-items:center;padding:12px;border:1px solid #e7dccb;border-radius:10px;background:#fffdf9}
.wa-in-rn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:#f6e9d6;font-size:12px;font-weight:600;color:#6b3a0d;white-space:nowrap;
.ico{width:14px;height:14px}
}
.wa-in-ra{font-size:16px;color:#b9a284}
.wa-in-rq{padding:7px 12px;border:1.5px solid #8a4b12;border-radius:8px;background:#fff;font-size:12px;line-height:1.4;color:#3d2a17}
.wa-in-rb{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
& p{margin:0;padding:9px 11px;border:1px solid;border-radius:8px;font-size:11.5px;line-height:1.5}
& b{display:block;font-size:12px}
& .is-y{border-color:#f0d9aa;background:#fdf3e1;color:#6b4a0d}
& .is-n{border-color:#cfe5d2;background:#f1faf2;color:#2f5a35}
}
.wa-in-ru{display:grid;gap:9px;margin:0;padding:11px 14px 12px;list-style:none;font-size:12px;line-height:1.5;color:#5f5340;
& li{display:flex;align-items:flex-start;gap:10px}
& .ico{flex:none;width:16px;height:16px;margin-top:1px;color:#8a4b12}
& span{display:grid;gap:1px;min-width:0}
& b{font-weight:600;color:#3d2a17}
}
.wa-in-bn{margin:0;padding:0 14px 12px;font-size:11.5px;line-height:1.5;color:#5f6368}

/* Tag Manager and payment: label and value rows */
.wa-in-gc .wa-in-gr{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:start;margin:0;padding:9px 14px;border-top:1px solid #f1f3f4;font-size:12.5px;line-height:1.75;color:#202124;
& em{font-style:normal;color:#5f6368}
& span{min-width:0;overflow-wrap:anywhere}
}
.wa-in-ev{display:inline-flex;flex-wrap:wrap;gap:5px}
.wa-in-bt{display:inline-block;margin-left:8px;padding:2px 11px;border:1px solid #c7c4f5;border-radius:6px;background:#fff;font-size:11.5px;color:#3730a3}
.wa-in-dl{border:1px solid #dadce0;border-radius:8px;background:#fff;overflow:hidden;
& p{margin:0;padding:9px 14px;font-size:12px;color:#3c4043}
& .wa-in-js{border-radius:0}
}

/* GA4: DebugView and key events */
.wa-in-dbg{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:12px;align-items:start}
.wa-in-ds{margin:0;padding:0;border:1px solid #dadce0;border-radius:8px;background:#fff;overflow:hidden;list-style:none;
& li{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:6px;align-items:center;padding:8px 8px;border-bottom:1px solid #f1f3f4;font-size:12.5px}
& li:last-child{border-bottom:0}
& em{font-style:normal;font-size:11.5px;color:#5f6368}
& b{overflow:hidden;font-weight:400;white-space:nowrap;text-overflow:ellipsis;color:#202124}
& li.is-on{background:#e8f0fe}
& li.is-on b{font-weight:600;color:#1967d2}
}
.wa-in-dp{min-width:0;border:1px solid #dadce0;border-radius:8px;background:#fff;overflow:hidden;
& dl{margin:0}
& dl > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;padding:7px 12px;border-bottom:1px solid #f1f3f4;font-size:12px}
& dl > div:last-child{border-bottom:0}
& dt{color:#5f6368}
& dd{margin:0;overflow-wrap:anywhere;color:#202124}
}
.wa-in-dh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:9px 12px;border-bottom:1px solid #e8eaed;
& b{font-size:13px;color:#202124}
& span{font-size:11.5px;color:#5f6368}
}
.wa-in-dy{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:end;padding:12px 14px 8px;
& span{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:4px;min-width:0;height:128px}
& b{font-size:11px;font-weight:500;color:#3c4043}
& u{display:block;align-self:end;width:min(100%,30px);border-radius:3px 3px 0 0;background:#4285f4}
& em{font-style:normal;font-size:10.5px;color:#5f6368}
& .is-hi u{background:#f9ab00}
}

/* payment: order page in WordPress */
.wa-in-od{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:start}
.wa-in-oi{display:grid;gap:12px;min-width:0}
.wa-in-ol{margin:0;padding:0;list-style:none;
& li{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid #f1f3f4;font-size:12.5px}
& b{font-weight:600;white-space:nowrap}
& .is-t{background:#f6f7f7;font-weight:600}
}
.wa-in-pm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:10px 14px;font-size:12px;color:#3c4043}
.wa-in-tl{margin:0;padding:0;list-style:none;
& li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;padding:9px 14px;border-top:1px solid #f1f3f4;font-size:12px;line-height:1.5}
& em{font-style:normal;color:#646970}
& .is-d{background:#f6f7ff}
}

/* sync: flow diagram, attempts of one order */
.wa-in-fl{display:grid;gap:12px;padding:6px 2px}
.wa-in-fr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.wa-in-fn{display:grid;gap:3px;min-width:0;padding:12px 10px;border:1.5px solid;border-radius:10px;background:#fff;text-align:center;
& b{font-size:13px;color:#28325b}
& span{font-size:11.5px;line-height:1.4;color:#5b7a81}
&.is-web{border-color:#0b7285;background:#e3f6f8}
&.is-q{border-color:#e0a21a;background:#fff8e6}
&.is-erp{border-color:#b5412b;background:#fbe9e4}
}
.wa-in-fa{display:grid;justify-items:center;gap:1px;padding:0 4px;
& em{font-style:normal;font-size:10.5px;white-space:nowrap;color:#5b7a81}
&::after{content:"→";font-size:18px;line-height:1;color:#0b7285}
}
.wa-in-fs{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border:1px solid;border-radius:8px;font-size:12px;line-height:1.5;
& .ico{flex:none;width:15px;height:15px;margin-top:2px}
& b{margin-right:4px;font-weight:600}
& span{min-width:0}
&.is-stock{border-color:#bddcf3;background:#e8f4fd;color:#394679}
&.is-stock .ico{rotate:180deg}
&.is-retry{border-color:#f5d79a;background:#fff7e6;color:#7a5200}
}
.wa-in-ar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;align-items:start}
.wa-in-at{margin:0;padding:0;list-style:none;
& li{display:grid;grid-template-columns:9px 56px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid #f1f3f4;font-size:12px}
& i{width:9px;height:9px;border-radius:50%}
& em{font-style:normal;font:11.5px Consolas,"Courier New",monospace;color:#646970}
& span{display:grid;min-width:0;line-height:1.4;color:#646970}
& b{font-weight:600;color:#2b3146}
& code{padding:1px 7px;border-radius:4px;font:600 11.5px Consolas,"Courier New",monospace}
& .is-r i{background:#d63638}
& .is-r code{background:#fcf0f1;color:#b32d2e}
& .is-g i{background:#00a32a}
& .is-g code{background:#edfaef;color:#007017}
}

/* monitoring: overview, key expiry */
.wa-in-cl{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.wa-in-cn{display:grid;grid-template-columns:32px minmax(0,1.5fr) minmax(0,1fr) 84px auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid #e1e5ea;border-radius:10px;background:#fff}
.wa-in-ci{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e6f6f4;color:#0d9488;
.ico{width:16px;height:16px}
}
.wa-in-cm{display:grid;gap:1px;min-width:0;
& b{overflow:hidden;font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;color:#1e2643}
& em{overflow:hidden;font-style:normal;font-size:11.5px;white-space:nowrap;text-overflow:ellipsis;color:#627d98}
}
.wa-in-cv{display:grid;gap:1px;min-width:0;
& b{font-size:18px;font-weight:500;line-height:1.2;color:#1e2643}
& em{font-style:normal;font-size:11px;color:#627d98}
}
.wa-in-c7{display:flex;align-items:flex-end;gap:3px;height:30px;
& u{display:block;flex:1;border-radius:2px;background:#99d5cf}
& u.is-hi{background:#f5b942}
}
.wa-in-wn{display:flex;align-items:flex-start;gap:9px;margin:0;padding:10px 12px;border:1px solid #f0d28a;border-left:4px solid #dba617;border-radius:2px;background:#fff8e5;font-size:12px;line-height:1.5;color:#3c3418;
.ico{flex:none;width:15px;height:15px;margin-top:1px;color:#996800}
}
.wa-in-ks{display:grid;gap:0;margin:0;padding:0;list-style:none;
& li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;padding:8px 14px;border-top:1px solid #f1f3f4;font-size:12.5px}
& i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e6eef5;font-size:11px;font-style:normal;font-weight:700;color:#2271b1}
}
}

@container (max-width:760px){
.sa .wa-in-ar,.sa .wa-in-od{grid-template-columns:minmax(0,1fr)}
.sa .wa-in-cn{grid-template-columns:32px minmax(0,1.4fr) minmax(0,.9fr) 52px auto;gap:10px}
.sa .wa-in-cm b{white-space:normal}
}

@container (max-width:620px){
.sa .wa-in-st,.sa .wa-in-dbg{grid-template-columns:minmax(0,1fr)}
.sa .wa-in-nt{grid-template-columns:minmax(0,1fr)}
.sa .wa-in-nl{border-right:0;border-bottom:1px solid #cacdd1}
.sa .wa-in-rl{grid-template-columns:minmax(0,1fr)}
.sa .wa-in-ra{display:none}
.sa .wa-in-rb{grid-template-columns:minmax(0,1fr)}
.sa .wa-in-fr{grid-template-columns:minmax(0,1fr)}
.sa .wa-in-fa::after{content:"↓"}
.sa .wa-in-gc .wa-in-gr{grid-template-columns:minmax(0,1fr);gap:1px}
.sa .wa-in-js{grid-template-columns:minmax(100%,max-content);overflow-x:auto;scrollbar-width:thin}
.sa .wa-in-js > span{grid-template-columns:30px max-content}
.sa .wa-in-js code{overflow:visible;text-overflow:clip}
.sa .wa-in-tb{margin-left:0}
.sa .wa-in-cn{grid-template-columns:32px minmax(0,1fr) auto}
.sa .wa-in-c7{display:none}
.sa .wa-in-cn > .sa-chip{grid-column:2/-1;justify-self:start}
.sa .wa-in-at li{grid-template-columns:9px minmax(0,1fr) auto}
.sa .wa-in-at em{display:none}
}

@container (max-width:460px){
.sa .wa-in-nr > div{grid-template-columns:minmax(0,1fr);gap:0}
.sa .wa-in-nk span:last-child{display:none}
.sa .wa-in-dy{gap:6px;padding:12px 8px 8px}
.sa .wa-in-ds li{grid-template-columns:54px minmax(0,1fr) auto;gap:6px}
.sa .wa-in-sm li{grid-template-columns:minmax(0,1fr);gap:0}
.sa .wa-in-tl li{grid-template-columns:36px minmax(0,1fr);gap:6px}
}

.sa .wa-tb.wa-in-mp{font-size:12px}
.sa .wa-tb.wa-in-mp :is(th,td){padding:8px 6px 8px 8px}
.sa .wa-tb.wa-in-mp td{white-space:normal;max-width:none;overflow:visible;vertical-align:top}
.sa .wa-tb.wa-in-mp :is(th,td):nth-child(2){width:18px;padding-inline:0;text-align:center}
.sa .wa-tb.wa-in-mp td:first-child{overflow-wrap:anywhere}
/* sheets wrap */
.sa .sa-sh-grid table{width:100%}
.sa .sa-sh-grid :is(th,td){white-space:normal;max-width:none;overflow:visible;text-overflow:clip;vertical-align:top}
.sa .sa-sh-grid tbody th{vertical-align:middle}
.sa .sa-gtabs{overflow-x:auto;scrollbar-width:none}
.sa .sa-gtabs > *{flex:none;white-space:nowrap}
/* ---------- group hub (scripts/web-atlas/hub.mjs) ---------- */
.wa-hub-def{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 48px;align-items:center;padding:30px 34px;border:1px solid var(--edge);border-radius:20px;background:linear-gradient(160deg,#ffffff0e,#ffffff05)}
.wa-hub-def h2{margin:8px 0 12px;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.4px}
.wa-hub-def p{margin:0;font-size:16px;line-height:1.65;color:var(--text-2)}
.wa-hub-def dl{display:grid;gap:10px;margin:0}
.wa-hub-def dl>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 14px;border-radius:12px;background:#ffffff0a;box-shadow:inset 0 0 0 1px var(--edge)}
.wa-hub-def dt{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.wa-hub-def dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--text)}
.wa-hub-route{padding:16px 22px 22px;border-radius:18px;background:linear-gradient(180deg,#f7f9fc,#e9eff6);box-shadow:0 26px 60px #0008;color:#192045}
.wa-hub-bar{display:flex;gap:6px;margin-bottom:12px}
.wa-hub-bar i{width:10px;height:10px;border-radius:50%;background:#c4cfdc}
.wa-hub-rt{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:15px}
.wa-hub-rt .ico{width:18px;height:18px;padding:3px;border-radius:6px;background:#0d7d61;color:#fff}
.wa-hub-route ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0;padding:0;list-style:none}
.wa-hub-route li{display:grid;grid-template-columns:minmax(0,1fr) minmax(12px,32px) auto;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1920451a}
.wa-hub-pb{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35}
.wa-hub-pb i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:#eef3f8;color:#0d7d61}
.wa-hub-pb .ico{width:16px;height:16px}
.wa-hub-ln{height:2px;background:repeating-linear-gradient(90deg,#b9c6d4 0 4px,#0000 4px 8px)}
.wa-hub-route 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}
.wa-hub-route a .ico{width:14px;height:14px}
.wa-hub-route a:hover{transform:translateX(3px)}
.wa-hub-group{margin-top:40px}
.wa-hub-group:first-child{margin-top:6px}
.wa-hub .wa-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)}
.wa-hub-gh .ico{width:18px;height:18px}
.wa-hub-gh em{flex:none;margin-left:auto;white-space:nowrap;font-size:12px;font-style:normal;letter-spacing:.4px;text-transform:none;color:var(--text-3)}
.wa-hub-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.wa-hub-card{grid-column:span 2;position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;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}
.wa-hub-card:nth-child(3n+1):nth-last-child(2),.wa-hub-card:nth-child(3n+2):last-child{grid-column:span 3}
.wa-hub-card: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)}
.wa-hub-art{position:relative;display:block;height:232px;overflow:hidden;padding:18px 18px 0;border-bottom:1px solid var(--edge);background:radial-gradient(120% 110% at 0 0,color-mix(in srgb,var(--c) 34%,#0e1340),#0b1038 72%)}
.wa-hub-art::after{content:"";position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(#0b103800,#0b1038cc);pointer-events:none}
.wa-hub-art .sa-th{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.wa-hub-card:hover .wa-hub-art .sa-th{transform:translateY(-10px)}
.wa-hub-body{display:grid;align-content:start;gap:9px;padding:16px 22px 22px}
.wa-hub-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:1px;color:var(--c)}
.wa-hub-meta em{font-style:normal;letter-spacing:.3px;color:var(--text-3)}
.wa-hub .wa-hub-body h3{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.2px}
.wa-hub-body h3 a{color:var(--text);text-decoration:none}
.wa-hub-body h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.wa-hub-body h3 a:focus-visible{outline:none}
.wa-hub-body h3 a:focus-visible::after{border-radius:18px;box-shadow:inset 0 0 0 2px var(--c)}
.wa-hub-body p{margin:0;font-size:14px;line-height:1.55;color:var(--text-3)}
.wa-hub-tags{display:flex;flex-wrap:wrap;gap:6px}
.wa-hub-tags 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)}
.wa-hub-tags i.is-more{color:var(--c)}
.wa-hub-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--c)}
.wa-hub-go .ico{width:16px;height:16px;transition:transform .25s ease}
.wa-hub-card:hover .wa-hub-go .ico{transform:translateX(4px)}
@media(max-width:1000px){
.wa-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wa-hub-card,.wa-hub-card:nth-child(3n+1):nth-last-child(2),.wa-hub-card:nth-child(3n+2):last-child{grid-column:auto}
.wa-hub-card:last-child:nth-child(odd){grid-column:1/-1}
.wa-hub-route ul{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){.wa-hub-def{grid-template-columns:minmax(0,1fr);padding:22px 20px}}
@media(max-width:620px){
.wa-hub-grid{grid-template-columns:minmax(0,1fr)}
.wa-hub-card:last-child:nth-child(odd){grid-column:auto}
.wa-hub-art{height:208px;padding:14px 14px 0}
.wa-hub-body{padding:14px 18px 20px}
.wa-hub-route{padding:14px 14px 16px}
.wa-hub-route li{grid-template-columns:minmax(0,1fr)}
.wa-hub-ln{display:none}
.wa-hub-route a{justify-self:start}
.wa-hub-def dl>div{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ================= "Cần chuẩn bị": four compact rule tiles over a two-column resource kit ================= */
.files .files-row{grid-template-columns:minmax(0,1fr);gap:16px}
.files .sp-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sp-tiles .sp-tile{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:12px;row-gap:1px;padding:14px 16px;border-radius:14px}
.sp-tiles .sp-pic{grid-row:1 / span 2;height:auto;margin:0;padding:0;background:none}
.sp-tiles .sp-ico{width:46px;height:46px;border-radius:14px}
.sp-tiles .sp-ico .ico{width:22px;height:22px}
.sp-tiles .sp-tile h4{grid-column:2;padding:0;font-size:15px;line-height:1.3;align-self:end}
.sp-tiles .sp-tile > b{grid-column:2;padding:0;font-size:13px;line-height:1.4;align-self:start}
.files .af ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
.files .af li{padding:14px 18px}
.files .af li + li{border-top:0}
.files .af li:nth-child(n+3){border-top:1px solid var(--card-line)}
.files .af li:nth-child(odd){border-right:1px solid var(--card-line)}
@media(max-width:1100px){.files .sp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
.files .sp-tiles{grid-template-columns:minmax(0,1fr)}
.files .af ul{grid-template-columns:minmax(0,1fr)}
.files .af li:nth-child(odd){border-right:0}
.files .af li + li{border-top:1px solid var(--card-line)}
}

/*@@next*/