/* Đào tạo Digital Marketing course pages (TRAINING_LP_PLAN.md). Loaded after
   google-ads-lp.css, one-page-lp.css and website-lp.css (whose .wsm mocks and
   helpers the courses reuse); every rule is scoped to .tr-lp.
   Mock rules: text 11px or larger, pictures cover their frame, no tilt. */
body.tr-lp{--tv:#2f6fd6;--tg:#1f7a55;--ta:#9a5b00;--tr:#b42318}
.tr-lp{
.trm-t{display:block;font-size:14px;line-height:1.3}
:is(.trm-syl li,.trm-steps span,.trm-data,.trm-ex li,.trm-notes li,.trm-pstep,.trm-draft em,.trm-obj span){display:flex;align-items:center;gap:8px}

/* syllabus */
.trm-syl{display:grid;gap:4px;margin:0;padding:0;list-style:none;& li{padding:7px 8px;border-radius:8px}& li>i{font-size:11px;font-style:normal;font-weight:600;color:var(--ws)}
& span{display:grid;line-height:1.3}& b{font-size:12.5px}& em{font-size:11px;font-style:normal;color:var(--ws)}& .is-on{background:#eef4ff;box-shadow:inset 0 0 0 1px #b8cdf5}& .is-on>.ico{color:var(--tv)}}

/* lesson */
.trm-lesson{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
.trm-video{position:relative;display:grid;gap:4px;padding:8px;border-radius:10px;background:#eef2ef;& b{font-size:12px}& em{font-size:11px;font-style:normal;color:var(--ws)}}
.trm-play{position:absolute;top:calc(8px + 22%);left:50%;display:grid;place-items:center;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:#192151cc;color:#fff;.ico{width:18px;height:18px}}
.trm-steps{display:grid;align-content:start;gap:5px;& small{font-size:11px;letter-spacing:.4px;color:var(--ws)}& span{padding:6px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--wl);font-size:12px}
& span>i{display:grid;flex:none;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--wl);font-size:11px;font-style:normal}
& .is-done>i{background:var(--tg);color:#fff}& .is-on{box-shadow:inset 0 0 0 1px var(--tv);background:#eef4ff}& .is-on>i{background:var(--tv);color:#fff}& .ico{width:12px;height:12px}}
.trm-pstep{padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--wl);font-size:12.5px;&>i{display:grid;flex:none;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--wl);font-size:11px;font-style:normal}
&.is-done>i{background:var(--tg);color:#fff}&.is-on{box-shadow:inset 0 0 0 1px var(--tv)}&.is-on>i{background:var(--tv);color:#fff}}

/* schedule */
.trm-sched{display:grid;gap:4px}
.trm-sess{display:grid;grid-template-columns:52px 1fr auto;gap:2px 8px;align-items:center;padding:7px 8px;border-radius:8px;& i{font-size:11px;font-style:normal;color:var(--ws)}& b{font-size:12px}
& em{grid-column:2/-1;font-size:11px;font-style:normal;color:var(--ws)}&.is-on{background:#eef4ff;box-shadow:inset 0 0 0 1px #b8cdf5}}

/* exercise, rubric, feedback */
.trm-ex{display:grid;gap:6px;& p{margin:0;font-size:12px;line-height:1.5}& small{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--ws)}
& ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}& li{align-items:flex-start;font-size:12px}& li .ico{margin-top:2px;color:var(--tg)}}
.trm-data{padding:6px 8px;border-radius:8px;background:var(--wf)}
.trm-rub{display:grid;gap:2px}
.trm-rr{display:grid;grid-template-columns:1.6fr repeat(3,.7fr);gap:4px;align-items:center;padding:5px 6px;border-radius:6px;& b{font-size:12px;line-height:1.3}
& i{display:grid;place-items:center;height:24px;border-radius:6px;background:var(--wf);font-size:11px;font-style:normal;color:var(--ws);text-align:center}
&.is-head i{height:auto;background:none}&.is-hi{background:#eef4ff}& .is-pick{color:#fff}& .is-0{background:#d64545}& .is-1{background:#e0a100}& .is-2{background:#1f9d63}}
.trm-fb{display:grid;grid-template-columns:1.1fr 1fr;gap:10px}
.trm-work{display:grid;align-content:start;gap:5px;padding:10px;border-radius:10px;background:#fbfaf6;box-shadow:inset 0 0 0 1px var(--wl);& span{position:relative;padding-right:22px;font-size:12px;line-height:1.45}
& i{position:absolute;top:0;right:0;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e0a100;color:#fff;font-size:11px;font-style:normal}}
.trm-notes{display:grid;align-content:start;gap:6px;margin:0;padding:0;list-style:none;& li{align-items:flex-start;padding:7px 8px;border-radius:8px;background:var(--wf);font-size:12px;line-height:1.4}
& li>i{display:grid;flex:none;place-items:center;width:18px;height:18px;border-radius:50%;background:#e0a100;color:#fff;font-size:11px;font-style:normal}
& .is-ok{background:#f1faf6}& .is-ok>i{background:#1f9d63}& .is-bad{background:#fff1f0}& .is-bad>i{background:#d64545}& .is-on{box-shadow:inset 0 0 0 1px #8aa0b5}}

/* skills */
.trm-mx{display:grid;gap:2px}
.trm-mr{display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:4px;align-items:center;padding:6px;border-radius:6px;& b{font-size:12px}
&.is-head i{font-size:11px;font-style:normal;color:var(--ws);text-align:center;line-height:1.2}&.is-hi{background:#eef4ff}}
.trm-lv{display:flex;justify-content:center;gap:3px;& u{width:9px;height:9px;border-radius:50%;background:#dfe4ea}
&[data-lv="1"] u:first-child,&[data-lv="2"] u:not(:last-child),&[data-lv="3"] u{background:var(--tv)}&[data-lv="0"] u{background:#f3c4c0}}

/* topics */
.trm-canvas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;& span{display:grid;align-content:start;gap:3px;padding:10px;border-radius:10px;background:var(--wf)}
& b{font-size:12px}& em{font-size:11px;font-style:normal;color:var(--ws);line-height:1.35}& .ico{color:#6b7482}& .is-on{background:#eef4ff;box-shadow:0 0 0 2px var(--accent,#9fd8ff)}& .is-on .ico{color:var(--tv)}}
.trm-kw{display:grid;gap:6px}
.trm-kg{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:7px 8px;border-radius:8px;>b{width:100%;font-size:12px}& .wsm-chip{white-space:normal}&.is-on{background:#eef4ff;box-shadow:inset 0 0 0 1px #b8cdf5}}
.trm-stream{display:grid;gap:3px;& span{display:grid;grid-template-columns:44px auto 1fr;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;background:var(--wf)}
& i{font-size:11px;font-style:normal;color:var(--ws)}& em{min-width:0;font-size:11px;font-style:normal;color:var(--ws);overflow-wrap:anywhere}& .is-on{background:#f1faf6;box-shadow:inset 0 0 0 1px #8fd3b6}}
.trm-ai{display:grid;gap:8px}
.trm-prompt,.trm-draft{display:grid;gap:5px;padding:10px;border-radius:10px;& small{font-size:11px;letter-spacing:.4px;color:var(--ws)}& p{margin:0;font-size:12px;line-height:1.5}}
.trm-prompt{background:#f6f3ff;>span{display:flex;flex-wrap:wrap;gap:4px}}
.trm-draft{box-shadow:inset 0 0 0 1px var(--wl);& mark{padding:0 2px;border-radius:3px}& .is-ok{background:#dff3e8}& .is-bad{background:#fde1de}& em{align-items:flex-start;font-size:11px;font-style:normal;color:var(--tr)}}
.trm-brief{display:grid;gap:4px;& span{display:grid;grid-template-columns:78px 1fr;gap:8px;align-items:baseline;padding:6px 8px;border-radius:6px;background:var(--wf)}& small{font-size:11px;color:var(--ws)}& b{font-size:12px;font-weight:500}}
.trm-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;& span{display:grid;align-content:start;gap:3px;min-width:0;padding:6px;border-radius:8px;background:var(--wf)}
& i{font-size:11px;font-style:normal;font-weight:600;color:var(--ws)}& b{font-size:11.5px;line-height:1.25}& em{font-size:11px;font-style:normal;color:var(--ws)}& .wsm-chip{white-space:normal;padding:1px 4px}
& .is-empty{background:none;box-shadow:inset 0 0 0 1px var(--wl)}& .is-on{box-shadow:0 0 0 2px var(--accent,#d4b3ff)}}
.trm-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;& span{position:relative;display:grid;gap:2px;min-width:0}& b{font-size:12px}& em{font-size:11px;font-style:normal;color:var(--ws);line-height:1.3}
& span>i{position:absolute;top:6px;left:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#192151cc;color:#fff;font-size:11px;font-style:normal}& .is-on .mk-img{box-shadow:0 0 0 3px var(--accent,#f5a3c0)}}
.trm-obj{display:grid;gap:5px;& span{flex-wrap:wrap;padding:8px 10px;border-radius:8px;background:var(--wf);gap:4px 8px}& b{font-size:12px}& i{display:grid;color:#8aa0b5}& strong{font-size:12px;color:var(--tv)}
& em{width:100%;font-size:11px;font-style:normal;color:var(--ws)}& .is-on{background:#eef4ff;box-shadow:inset 0 0 0 1px #b8cdf5}}
.trm-review{display:grid;gap:4px;& span{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;padding:7px 8px;border-radius:8px;background:var(--wf)}& b{font-size:12px}& em{font-size:11.5px;font-style:normal}& .is-on{background:#eef4ff;box-shadow:inset 0 0 0 1px #b8cdf5}}

/* narrow stages */
@container (max-width:520px){
.trm-lesson,.trm-fb{grid-template-columns:1fr}
.trm-canvas{grid-template-columns:repeat(2,1fr)}
.trm-cal{grid-template-columns:repeat(4,1fr)}
.trm-mr{grid-template-columns:1fr repeat(5,.8fr);gap:2px;padding:6px 2px;& b{font-size:11px}}
.trm-rr{grid-template-columns:1.3fr repeat(3,.8fr)}}
@container (max-width:380px){.trm-board{grid-template-columns:repeat(2,1fr)}}
}

@media(max-width:760px){.tr-lp{
.trm-cal{grid-template-columns:repeat(4,1fr)}
.trm-stream span{grid-template-columns:40px 1fr;>em{grid-column:1/-1}}}}