/* Đào tạo Digital Marketing courses (scripts/edu-atlas): the class portal "Lớp học" (lesson, assignment, rubric, feedback, tracking sheet, 30-day plan) and the pieces of the group hub, drawn in CSS/SVG.
   The tools the learners practise in (Google Ads, Ads Manager, GA4, Tag Manager, Search Console…) are the look-alikes of the other groups' sheets.
   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 and crm-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 and boards). Own prefix: ed-. The .sa box is a size container, so narrow layouts use @container.
   Sample data only ("Nhà Thơm (mẫu)"); no platform logo is used and every brand belongs to its owner. */

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

/* ================= class portal (.wa-ap.is-lms) ================= */
.wa-ap.is-lms{--ap-acc:#2f6fe0;--ap-on:#e8effd;--ap-onink:#1f55b3;--ap-navw:150px}
.wa-ap.is-lms .wa-ap-brand i:not(.sa-dot){border-radius:7px;background:linear-gradient(135deg,#2f6fe0,#58b5f0);color:#fff;font-style:normal;font-weight:700}

/* ================= shared pieces ================= */
.ed-tk{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.500px #c3ccd5;font-size:10.500px;font-weight:600;color:#7c8794;
& .ico{width:12px;height:12px}
&.is-on{background:#2f9e55;box-shadow:none;color:#fff}
}
.ed-cd{padding:10px 12px;border:1px solid #dfe5ea;border-left:3px solid #9bb3d6;border-radius:6px;background:#fff;
& h5{margin:0 0 6px;font-size:12px;font-weight:700;color:#292f46}
&.is-g{border-left-color:#3fae6a}
&.is-o{border-left-color:#f08a3c}
&.is-b{border-left-color:#2f6fe0}
}
.ed-tgs{display:flex;flex-wrap:wrap;gap:5px}
.ed-tg{display:inline-block;padding:2px 8px;border-radius:10px;background:#eaf0f6;font-size:10.500px;font-weight:600;color:#4d5f73;white-space:nowrap;
&.is-g{background:#dff3e4;color:#2a7a3c}
&.is-o{background:#ffe9d9;color:#b2551a}
&.is-b{background:#dbe7fb;color:#1f55b3}
}
.ed-st{display:grid;gap:6px;margin:0;padding:0;list-style:none;counter-reset:ed;
& li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;align-items:baseline;font-size:11.500px;line-height:1.4;color:#292f46;counter-increment:ed}
& li::before{content:counter(ed);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e1ebfa;font-size:10.500px;font-weight:700;color:#1f55b3}
& li > span{grid-column:2;color:#6b7785;font-size:11px}
}
.ed-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;
& > div{display:grid;gap:10px;min-width:0}
}
@container (max-width:470px){
.ed-two{grid-template-columns:minmax(0,1fr)}
}
.ed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.ed-tx{margin:0;font-size:11.500px;line-height:1.45;color:#292f46}
.ed-nt{margin:8px 0 0;font-size:11px;line-height:1.45;color:#4d5a67}
.ed-fb{display:grid;gap:8px}
/* hierarchy tree (account → campaign → ad group) */
.ed-tree{margin:0 0 4px;padding:0;list-style:none;
& ul{margin:6px 0 0 14px;padding:0 0 0 12px;list-style:none;border-left:1.500px solid #cfd8e3;display:grid;gap:6px}
}
.ed-tn{position:relative;
& > ul > .ed-tn::before{content:"";position:absolute;left:-12px;top:16px;width:10px;border-top:1.500px solid #cfd8e3}
&.is-leaf > .ed-tl{background:#f6f8fb}
}
.ed-tl{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 10px;border:1px solid #dfe5ea;border-radius:6px;background:#fff;font-size:11.500px;
& i{font-style:normal;font-size:10px;font-weight:700;color:#1f55b3;background:#e1ebfa;border-radius:4px;padding:1px 6px;white-space:nowrap}
& b{font-weight:700;color:#292f46}
& em{font-style:normal;color:#6b7785;font-size:11px}
}
/* link bar of a Facebook ad (address, headline, button) */
.ed-lk{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f0f2f5;
& > span:first-child{display:grid;gap:1px;min-width:0;flex:1}
& small{font-size:10px;letter-spacing:.02em;color:#65676b}
& b{font-size:12px;line-height:1.25;color:#050505}
}
.aa-pw > .sm-fb{width:100%;min-width:0;min-height:0;background:transparent;
& .sm-fbm{padding:0}
& .sm-pot{font-size:11px}
& .ed-lk{flex-direction:column;align-items:stretch;gap:6px;padding:6px 8px}
& .ed-lk > span:first-child{flex:none}
& .ed-lk b{font-size:11px}
}
/* TikTok Ads Manager (.wa-ap.is-tta): white bar, dark text, pink accent; the mark is text, not a logo */
.wa-ap.is-tta{--ap-top:#fff;--ap-ink:#101631;--ap-acc:#fe2c55;--ap-on:#fff1f4;--ap-onink:#d6204a;--ap-nav:#fff;--ap-main:#f5f6f8;--ap-navw:164px}
.wa-ap.is-tta .wa-ap-top{padding:7px 14px;border-color:#ececec}
.wa-ap.is-tta .wa-ap-brand{font-size:14px;color:#101631}
.wa-ap.is-tta .wa-ap-brand b{font-weight:600}
.wa-ap.is-tta .wa-ap-brand i:not(.sa-dot){border-radius:6px;background:#000;font-size:12px;text-shadow:-1px -1px 0 #25f4ee,1px 1px 0 #fe2c55}
.wa-ap.is-tta .wa-ap-av{background:#101631}
.wa-ap.is-tta .wa-ap-nav{padding:6px 8px;border-color:#efefef}
.wa-ap.is-tta .wa-an{gap:9px;padding:8px 10px;border-radius:6px;font-size:12px}
.wa-ap.is-tta .wa-an.is-on{font-weight:600}
.wa-ap.is-tta .wa-ap-head h3{font-size:18px;font-weight:600;color:#101631}
/* a video ad beside the landing page it leads to (two phone frames) */
.ed-pair{display:grid;grid-template-columns:repeat(2,minmax(0,196px));justify-content:center;gap:34px;align-items:stretch;padding:12px 6px;position:relative;
& > figure{position:relative;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:5px;min-width:0}
& figcaption{font-size:10.500px;font-weight:700;color:#4d5a67;text-align:center}
& > i{position:absolute;left:50%;top:44%;display:grid;place-items:center;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);color:#2f6fe0;z-index:2}
& > i .ico{width:14px;height:14px}
}
.ed-pph{position:relative;display:grid;border:5px solid #1b2036;border-radius:16px;background:#fff;overflow:hidden;min-width:0;
& .sm-pic{border-radius:0}
}
.ed-adt{display:block;padding:4px 8px;background:#14171c;font-size:9.500px;font-weight:600;color:#d5dae0}
.ed-adb{position:absolute;z-index:3;left:8px;right:8px;bottom:8px;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:5px;background:#fe2c55;font-size:11px;font-weight:700;color:#fff;
& .ico{width:12px;height:12px}
}
.ed-lp{display:grid;align-content:start;gap:6px;padding:0 0 8px;font-size:10px;color:#292f46;
& h5{position:relative;margin:2px 9px 0;font-size:12.500px;line-height:1.25;font-weight:700;color:#101631}
& p{margin:0 9px;font-size:10.500px;line-height:1.35;color:#555f6b}
}
.ed-lph{display:flex;align-items:center;justify-content:space-between;padding:6px 9px;border-bottom:1px solid #eceff2;font-size:10px;color:#101631;
& .ico{width:13px;height:13px}
}
.ed-lpf{margin:0 9px;padding:6px 8px;border:1px solid #d5dbe1;border-radius:5px;font-size:10px;color:#8793a0}
.ed-lpb{margin:2px 9px 0;padding:7px 8px;border-radius:5px;background:#101631;font-size:11px;font-weight:700;color:#fff;text-align:center;position:relative}
@container (max-width:470px){
.ed-pair{gap:20px;grid-template-columns:repeat(2,minmax(0,150px))}
.ed-cl{display:none}
}
/* ================= chat with an AI assistant (.ed-ai) ================= */
.ed-ai{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:250px;font-size:11px;color:#292f46;background:#fff;
& .ed-ai-l{display:grid;align-content:start;gap:3px;padding:10px 8px;background:#f4f6f8;border-right:1px solid #e3e8ed}
& .ed-ai-l b{margin-bottom:3px;font-size:9.500px;letter-spacing:.04em;text-transform:uppercase;color:#6a7683}
& .ed-ai-l span{padding:5px 7px;border-radius:5px;font-size:10.500px;line-height:1.3;color:#3a4364}
& .ed-ai-l span.is-on{background:#e1ebfb;color:#1f55b3;font-weight:600}
& .ed-ai-m{display:grid;grid-template-rows:auto 1fr auto;min-width:0}
& .ed-ai-h{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid #e3e8ed;font-size:11.500px;color:#101631}
& .ed-ai-h .ico{width:14px;height:14px;color:#2f6fe0}
& .ed-ai-h em{margin-left:auto;font-style:normal;font-size:10px;color:#6a7683}
& .ed-ai-t{display:grid;align-content:start;gap:9px;padding:12px}
& .ed-ai-b{margin:0;max-width:92%;font-size:11.500px;line-height:1.45}
& .ed-ai-b.is-u{justify-self:end;padding:7px 10px;border-radius:10px 10px 2px 10px;background:#e8effd;color:#222b5d}
& .ed-ai-b.is-a{display:flex;align-items:flex-start;gap:7px}
& .ed-ai-b.is-a > i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#2f6fe0,#58b5f0);color:#fff}
& .ed-ai-b.is-a > i .ico{width:11px;height:11px}
& .ed-ai-b.is-a > div{flex:1;min-width:0;padding:7px 10px;border:1px solid #e3e8ed;border-radius:2px 10px 10px 10px;background:#f7f9fb}
& .ed-ai-ls{display:grid;gap:5px;margin:4px 0 0;padding:0;list-style:none}
& .ed-ai-ls li{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;padding:4px 7px;border:1px solid #e3e8ed;border-radius:5px;background:#fff;font-size:11px;line-height:1.4}
& .ed-ai-ls em{font-style:normal;font-size:9.500px;font-weight:700;padding:1px 6px;border-radius:8px;background:#fdecc8;color:#7a4b00}
& .ed-ai-ls em.is-ok{background:#d9f0e0;color:#17653b}
& .ed-ai-c{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:7px 10px;border:1px solid #d5dbe1;border-radius:8px;font-size:10.500px;color:#6a7683}
& .ed-ai-c span{flex:1;min-width:0}
& .ed-ai-c .ico{width:14px;height:14px;color:#2f6fe0}
}
@container (max-width:470px){
.ed-ai{grid-template-columns:minmax(0,1fr)}
.ed-ai-l{display:none}
}
/* ================= flow builder (.ed-fl) ================= */
.ed-fl{display:grid;grid-template-rows:auto 1fr;min-height:250px;font-size:11px;color:#292f46;background:#f4f6f8;
& .ed-fl-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;padding:8px 12px;background:#fff;border-bottom:1px solid #e3e8ed;font-size:11.500px;color:#101631}
& .ed-fl-h .ico{width:14px;height:14px;color:#4f8a1c}
& .ed-fl-h em{font-style:normal;font-size:10px;color:#6a7683}
& .ed-fl-st{margin-left:auto;padding:2px 8px;border-radius:9px;background:#fdecc8;font-size:10px;font-weight:700;color:#7a4b00}
& .ed-fl-c{display:flex;flex-direction:column;align-items:center;padding:12px 10px 14px;background-image:radial-gradient(#d3d9df 1px,transparent 1px);background-size:14px 14px}
& .ed-fn{display:flex;align-items:center;gap:8px;width:100%;max-width:260px;box-sizing:border-box;padding:7px 9px;border:1px solid #d5dbe1;border-left:4px solid #8793a0;border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
& .ed-fn > i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#eef1f4;color:#495272}
& .ed-fn > i .ico{width:12px;height:12px}
& .ed-fn > div{flex:1;min-width:0;display:grid;gap:1px}
& .ed-fn b{font-size:11px;line-height:1.3;color:#101631}
& .ed-fn span{font-size:10px;line-height:1.3;color:#5d6873}
& .ed-fn.is-t{border-left-color:#3a9a4d} & .ed-fn.is-t > i{background:#dcf1e1;color:#2a7a3b}
& .ed-fn.is-c{border-left-color:#d98a00} & .ed-fn.is-c > i{background:#fdecc8;color:#8a5600}
& .ed-fn.is-a{border-left-color:#2f6fe0} & .ed-fn.is-a > i{background:#e1ebfb;color:#1f55b3}
& .ed-fn.is-e{border-left-color:#d6453d;background:#fff6f5} & .ed-fn.is-e > i{background:#fbdcd9;color:#a8302a}
& .ed-fn.is-s{border-left-color:#8793a0;background:#f7f9fb}
& .ed-fa{position:relative;width:2px;height:16px;background:#9aa6b2}
& .ed-fa::after{content:"";position:absolute;left:-3px;bottom:-1px;border:4px solid transparent;border-top:5px solid #9aa6b2;border-bottom:0}
& .ed-fa.is-st::after{display:none}
& .ed-fa em{position:absolute;left:9px;top:1px;font-style:normal;font-size:10px;white-space:nowrap;color:#5d6873}
& .ed-ff{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:0}
& .ed-ff::before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;background:#9aa6b2}
& .ed-fb{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding-top:18px}
& .ed-fb::before{content:"";position:absolute;top:0;left:50%;width:2px;height:18px;margin-left:-1px;background:#9aa6b2}
& .ed-fb > em{position:absolute;top:2px;left:50%;margin-left:6px;padding:0 6px;border-radius:8px;font-style:normal;font-size:10px;font-weight:700;line-height:14px}
& .ed-fb > em.is-y{background:#d9f0e0;color:#17653b}
& .ed-fb > em.is-n{background:#eceff2;color:#495272}
& .ed-fb .ed-fn{max-width:none}
}
@container (max-width:470px){
.ed-fl .ed-ff{grid-template-columns:minmax(0,1fr)}
.ed-fl .ed-ff::before{display:none}
}
& .ed-pn{padding:8px 12px 10px}
& .ed-pn .ta-dp{margin:0}
/*@@next*/
}
/* ================= outside the .sa scope (hero, hub) ================= */
/*@@out*/

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