/* AI & Tự động hóa services (scripts/ai-atlas): the control panel of an assistant (sources, tools and permissions, steps of a run, test set, log) and the pieces of the group hub, drawn in CSS/SVG.
   The platforms around it (Zalo OA, HubSpot, Bitrix24, Google Sheets, a flow builder, chat window) are the look-alikes of the other groups' kits.
   Loaded after seo-atlas-lp.css, web-atlas-lp.css, data-atlas-lp.css, ads-atlas-lp.css, strategy-atlas-lp.css, social-atlas-lp.css, crm-atlas-lp.css and edu-atlas-lp.css and uses their base (.sa, .sa-gc, .sa-chip,
   .sa-dot, sheets, browser frames, .wa-tb tables, .wa-kp tiles, .ta- documents, .ed-ai chat, .ed-fl flow). Own prefix: ax-. The .sa box is a size container, so narrow layouts use @container.
   Sample data only ("Nhà Thơm (mẫu)"); no model or platform logo is used and every brand belongs to its owner. Nothing here measures how right an AI answer is. */

.sa{ /* every rule down to the closing brace before "outside the .sa scope" is scoped to .sa (CSS nesting) */

/* ================= control panel of an assistant (.wa-ap.is-aia) ================= */
.wa-ap.is-aia{--ap-top:#fff;--ap-ink:#1a2140;--ap-acc:#6b4fd8;--ap-on:#efeafd;--ap-onink:#4b32b0;--ap-nav:#fbfbfd;--ap-main:#f5f6fa;--ap-navw:150px}
.wa-ap.is-aia .wa-ap-top{border-color:#e6e8ef}
.wa-ap.is-aia .wa-ap-brand{font-size:14px;color:#1a2140}
.wa-ap.is-aia .wa-ap-brand b{font-weight:600}
.wa-ap.is-aia .wa-ap-brand i:not(.sa-dot){border-radius:7px;background:linear-gradient(135deg,#6b4fd8,#a58bf5);color:#fff;font-style:normal;font-weight:700}
.wa-ap.is-aia .wa-ap-av{background:#6b4fd8}
.wa-ap.is-aia .wa-ap-nav{padding:6px 8px;border-color:#eceef4}
.wa-ap.is-aia .wa-an{gap:9px;padding:8px 10px;border-radius:7px;font-size:12px}
.wa-ap.is-aia .wa-an.is-on{font-weight:600}

/* ================= parts of the panel (ax-) ================= */
.ax-bx{padding:9px 11px;border:1px solid #e3e6ee;border-radius:9px;background:#fff;font-size:11px;line-height:1.4;color:#292f46;
& h5{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:11.500px;line-height:1.3;color:#1a2140}
& h5 > :first-child{margin-left:auto}
}
.ax-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;
& > div{display:grid;gap:8px;min-width:0}
}
@container (max-width:470px){
.ax-two{grid-template-columns:minmax(0,1fr)}
}
.ax-ct{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 8px;border:1px solid #dcd5f6;border-radius:6px;background:#f4f1fd;font-size:10.500px;line-height:1.3;color:#3b2a8a;
& .ico{flex:none;width:11px;height:11px}
& b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
& em{flex:none;font-style:normal;font-size:10px;color:#6a6f86}
&.is-g{border-color:#cfe6d7;background:#eef8f1;color:#1d6a3d}
&.is-y{border-color:#f0dfb4;background:#fdf6e3;color:#7a4b00}
&.is-r{border-color:#f1cbc7;background:#fdf0ef;color:#9b2e27}
}
.ax-tg{display:inline-block;padding:1px 7px;border-radius:9px;background:#eceff2;font-size:10px;font-weight:700;line-height:1.5;color:#495272;white-space:nowrap;
&.is-g{background:#d9f0e0;color:#17653b}
&.is-y{background:#fdecc8;color:#7a4b00}
&.is-r{background:#fbdcd9;color:#9b2e27}
&.is-b{background:#e1ebfb;color:#1f55b3}
&.is-p{background:#e9e2fb;color:#4b32b0}
}
.ax-swl{display:inline-flex;align-items:center;gap:5px;font-size:10.500px;color:#495272}
.ax-sw{position:relative;flex:none;width:24px;height:13px;border-radius:7px;background:#c7ccd6;
&::after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff;transition:none}
&.is-on{background:#6b4fd8}
&.is-on::after{left:13px}
}
/* steps of one run */
.ax-st{display:grid;gap:0;margin:0;padding:0;list-style:none;
& li{position:relative;display:flex;align-items:flex-start;gap:9px;padding:0 0 10px}
& li:last-child{padding-bottom:0}
& li::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:#d9dde6}
& li:last-child::before{display:none}
& li > i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ece8fb;color:#4b32b0}
& li > i .ico{width:12px;height:12px}
& li > div{display:grid;gap:1px;min-width:0;padding-top:1px}
& li b{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;font-size:11px;line-height:1.35;color:#1a2140}
& li span{font-size:10.500px;line-height:1.35;color:#5d6873}
& li.is-ok > i{background:#d9f0e0;color:#17653b}
& li.is-ask > i{background:#fdecc8;color:#8a5600}
& li.is-stop > i{background:#fbdcd9;color:#a8302a}
}
/* log */
.ax-lg{display:grid;gap:0;margin:0;padding:0;list-style:none;border:1px solid #e3e6ee;border-radius:8px;overflow:hidden;background:#fff;
& li{display:grid;grid-template-columns:42px 70px minmax(0,1fr);gap:7px;align-items:baseline;padding:6px 9px;border-bottom:1px solid #eef0f4;font-size:10.500px;line-height:1.4;color:#292f46}
& li:last-child{border-bottom:0}
& time{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:#6a7683}
& b{font-size:10.500px;font-weight:600;color:#1a2140}
& li.is-g{background:#f3faf5}
& li.is-y{background:#fffaed}
& li.is-r{background:#fff4f3}
}
/* permissions */
.ax-pm{display:grid;gap:0;margin:0;padding:0;list-style:none;
& li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #eef0f4}
& li:last-child{border-bottom:0}
& li > span{display:grid;gap:1px;min-width:0}
& b{font-size:11px;color:#1a2140}
& em{font-style:normal;font-size:10.500px;line-height:1.35;color:#5d6873}
}
/* count of items of the process */
.ax-mt{display:grid;gap:5px;
& p{display:flex;justify-content:space-between;gap:8px;margin:0;font-size:10.500px;line-height:1.35;color:#3a4364}
& p b{flex:none;font-size:10.500px;color:#1a2140}
& > i{display:block;height:7px;border-radius:4px;background:#e6e9f0;overflow:hidden}
& > i > u{display:block;height:100%;border-radius:4px;background:#6b4fd8;text-decoration:none}
&.is-g u{background:#3a9a4d}
&.is-y u{background:#d98a00}
}
/* bubbles of a conversation inside a panel */
.ax-bb{max-width:88%;margin:0;padding:6px 9px;border-radius:9px;font-size:11px;line-height:1.4;
&.is-u{justify-self:start;background:#eef0f4;color:#1a2140;border-radius:9px 9px 9px 2px}
&.is-a{justify-self:end;background:#e9e2fb;color:#2b1d6b;border-radius:9px 9px 2px 9px}
&.is-s{justify-self:end;background:#d9f0e0;color:#17503a;border-radius:9px 9px 2px 9px}
}
.ax-rw{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;margin:0;padding:4px 0;font-size:11px;line-height:1.4;border-bottom:1px solid #eef0f4;
&:last-child{border-bottom:0}
& em{font-style:normal;color:#6a7683}
& span{min-width:0;color:#1a2140}
}
.ax-ln{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:5px 0;border-bottom:1px solid #eef0f4;font-size:11px;line-height:1.4;color:#1a2140;
&:last-child{border-bottom:0}
& > span{min-width:0}
& > .ax-tg,& > .ax-ct{flex:none}
}
.ax-stack{display:grid;gap:8px;min-width:0}
.ax-ctr{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px}
.ax-nt{margin:6px 0 0;font-size:10.500px;line-height:1.4;color:#5d6873}
/*@@next*/
}
/* ================= outside the .sa scope (hero, hub) ================= */
/*@@out*/

/* ---------- group hub (scripts/ai-atlas/hub.mjs) ---------- */
.ax-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)}
.ax-hub-def h2{margin:8px 0 12px;font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.4px}
.ax-hub-def p{margin:0;font-size:16px;line-height:1.65;color:var(--text-2)}
.ax-hub-def dl{display:grid;gap:10px;margin:0}
.ax-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)}
.ax-hub-def dt{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.ax-hub-def dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--text)}
.ax-hub-route{padding:16px 22px 22px;border-radius:18px;background:linear-gradient(180deg,#f7f9fc,#e9eff6);box-shadow:0 26px 60px #0008;color:#192045}
.ax-hub-bar{display:flex;gap:6px;margin-bottom:12px}
.ax-hub-bar i{width:10px;height:10px;border-radius:50%;background:#c4cfdc}
.ax-hub-rt{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:15px}
.ax-hub-rt .ico{width:18px;height:18px;padding:3px;border-radius:6px;background:#2f6fe0;color:#fff}
.ax-hub-route ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0;padding:0;list-style:none}
.ax-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}
.ax-hub-pb{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35}
.ax-hub-pb i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:#eef3f8;color:#2f6fe0}
.ax-hub-pb .ico{width:16px;height:16px}
.ax-hub-ln{height:2px;background:repeating-linear-gradient(90deg,#b9c6d4 0 4px,#0000 4px 8px)}
.ax-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}
.ax-hub-route a .ico{width:14px;height:14px}
.ax-hub-route a:hover{transform:translateX(3px)}
.ax-hub-group{margin-top:40px}
.ax-hub-group:first-child{margin-top:6px}
.ax-hub .ax-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)}
.ax-hub-gh .ico{width:18px;height:18px}
.ax-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)}
.ax-hub-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.ax-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}
.ax-hub-card:nth-child(3n+1):nth-last-child(2),.ax-hub-card:nth-child(3n+2):last-child{grid-column:span 3}
.ax-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)}
.ax-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%)}
.ax-hub-art::after{content:"";position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(#0b103800,#0b1038cc);pointer-events:none}
.ax-hub-art .sa-th{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ax-hub-card:hover .ax-hub-art .sa-th{transform:translateY(-10px)}
.ax-hub-body{display:grid;align-content:start;gap:9px;padding:16px 22px 22px}
.ax-hub-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:1px;color:var(--c)}
.ax-hub-meta em{font-style:normal;letter-spacing:.3px;color:var(--text-3)}
.ax-hub .ax-hub-body h3{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.2px}
.ax-hub-body h3 a{color:var(--text);text-decoration:none}
.ax-hub-body h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.ax-hub-body h3 a:focus-visible{outline:none}
.ax-hub-body h3 a:focus-visible::after{border-radius:18px;box-shadow:inset 0 0 0 2px var(--c)}
.ax-hub-body p{margin:0;font-size:14px;line-height:1.55;color:var(--text-3)}
.ax-hub-tags{display:flex;flex-wrap:wrap;gap:6px}
.ax-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)}
.ax-hub-tags i.is-more{color:var(--c)}
.ax-hub-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--c)}
.ax-hub-go .ico{width:16px;height:16px;transition:transform .25s ease}
.ax-hub-card:hover .ax-hub-go .ico{transform:translateX(4px)}
@media(max-width:1000px){
.ax-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ax-hub-card,.ax-hub-card:nth-child(3n+1):nth-last-child(2),.ax-hub-card:nth-child(3n+2):last-child{grid-column:auto}
.ax-hub-card:last-child:nth-child(odd){grid-column:1/-1}
.ax-hub-route ul{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){.ax-hub-def{grid-template-columns:minmax(0,1fr);padding:22px 20px}}
@media(max-width:620px){
.ax-hub-grid{grid-template-columns:minmax(0,1fr)}
.ax-hub-card:last-child:nth-child(odd){grid-column:auto}
.ax-hub-art{height:208px;padding:14px 14px 0}
.ax-hub-body{padding:14px 18px 20px}
.ax-hub-route{padding:14px 14px 16px}
.ax-hub-route li{grid-template-columns:minmax(0,1fr)}
.ax-hub-ln{display:none}
.ax-hub-route a{justify-self:start}
.ax-hub-def dl>div{grid-template-columns:minmax(0,1fr);gap:4px}
}