/* ─────────────────────────────────────────────────────────────────────────
   Assessment suggestions — one widget, six pages.
   Loaded globally (it is small) so a page does not need to know it exists
   beyond including the partial. Scoped entirely under .asg, and it inherits
   colour from whatever page it lands on rather than importing a palette,
   because those six pages do not share one.
   ───────────────────────────────────────────────────────────────────────── */
.asg{--asg-ink:#0a0a0a;--asg-dim:#666c78;--asg-lab:#666c78;--asg-hair:#e6e6e6;
  --asg-sunk:#f6f6f4;--asg-accent:#1a3aff;font-variant-numeric:tabular-nums}
.asg *{box-sizing:border-box}

/* ── compact: a sidebar box ──────────────────────────────────────────── */
.asg-compact{border:2px solid var(--asg-ink);background:#fff;margin-bottom:18px}
.asg-compact .asg-h{padding:11px 13px;border-bottom:2px solid var(--asg-ink);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  color:var(--asg-ink)}
.asg-list{list-style:none;margin:0;padding:0}
.asg-list li{border-bottom:1px solid var(--asg-hair)}
.asg-list li:last-child{border-bottom:0}
.asg-list a{display:block;padding:11px 13px;text-decoration:none;color:var(--asg-ink)}
.asg-list a:hover{background:var(--asg-sunk)}
.asg-t{display:block;font-size:13px;font-weight:700;line-height:1.35}
.asg-m{display:block;margin-top:4px;font-size:11px;color:var(--asg-dim)}
.asg-m em{font-style:normal;font-weight:800;color:var(--asg-accent);margin-right:7px}
.asg-goal{display:block;padding:10px 13px;border-top:1px solid var(--asg-hair);
  font-size:12px;font-weight:800;color:var(--asg-ink);text-decoration:none;
  background:var(--asg-sunk)}
.asg-goal:hover{background:#eee}

/* ── full: cards in a page body ──────────────────────────────────────── */
.asg-full{margin:22px 0}
.asg-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:11px;border-bottom:2px solid var(--asg-ink)}
.asg-head h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--asg-ink)}
.asg-head span{font-size:12px;color:var(--asg-dim)}
.asg-cards{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-left:2px solid var(--asg-ink)}
.asg-card{padding:15px 16px;border-right:2px solid var(--asg-ink);
  border-bottom:2px solid var(--asg-ink);display:flex;flex-direction:column;gap:8px;
  background:#fff}
.asg-card.is-first{background:var(--asg-sunk)}
.asg-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.asg-n{width:22px;height:22px;background:var(--asg-ink);color:#fff;font-size:11px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.asg-card.is-first .asg-n{background:var(--asg-accent)}
.asg-type{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:800;
  border:1px solid currentColor;padding:2px 6px;color:var(--asg-dim)}
.asg-type.diag{color:var(--asg-accent)}
.asg-card h3{margin:0;font-size:13.5px;font-weight:800;line-height:1.35;
  letter-spacing:-.01em;color:var(--asg-ink)}
.asg-card p{margin:0;font-size:12px;color:var(--asg-dim);line-height:1.5;flex:1 1 auto}
.asg-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:10.5px;color:var(--asg-lab);
  font-weight:700}
.asg-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;
  padding:0 13px;font-size:12px;font-weight:800;border:2px solid var(--asg-ink);
  background:#fff;color:var(--asg-ink);text-decoration:none;align-self:flex-start}
.asg-card.is-first .asg-btn{background:var(--asg-ink);color:#fff}
.asg-goalcard{border-color:var(--asg-accent)}

@media (max-width:640px){
  .asg-cards{grid-template-columns:minmax(0,1fr)}
}

/* ─────────────────────────────────────────────────────────────────────────
   Community activity — "học nhiều nhất" + the snapshot. Shares this sheet
   because it sits directly under the suggestion widget in the same 300px rail
   and loads on the same pages; a second file would be a second cache entry for
   1KB. Inherits page colour rather than importing a palette.
   ───────────────────────────────────────────────────────────────────────── */
.ca-panel{--ca-ink:#0a0a0a;--ca-dim:#666c78;--ca-lab:#666c78;--ca-hair:#e6e6e6;
  --ca-sunk:#f6f6f4;--ca-blue:#1a3aff;--ca-good:#0f7a4a;
  border:2px solid var(--ca-ink);background:#fff;margin-bottom:20px;
  font-variant-numeric:tabular-nums}
.ca-panel *{box-sizing:border-box}
.ca-h{padding:11px 13px;border-bottom:2px solid var(--ca-ink);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ca-ink)}
.ca-row{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;
  padding:9px 13px;border-bottom:1px solid var(--ca-hair)}
.ca-row.is-me{background:var(--ca-sunk)}
.ca-rank{font-size:11.5px;font-weight:800;color:var(--ca-lab);text-align:right}
.ca-who{min-width:0}
.ca-name{display:block;font-size:13px;font-weight:800;line-height:1.3;color:var(--ca-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-name em{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ca-blue);margin-left:6px}
/* display:block — an inline span collapses to zero width however much height
   and background it is given, and the bar silently disappears. */
.ca-bar{display:block;position:relative;height:5px;margin-top:5px;
  background:var(--ca-sunk);border:1px solid var(--ca-hair)}
.ca-bar i{position:absolute;inset:0 auto 0 0;background:var(--ca-ink)}
.ca-n{font-size:13px;font-weight:800;white-space:nowrap;color:var(--ca-ink)}
.ca-n span{font-size:11px;color:var(--ca-dim);font-weight:600}
.ca-foot{margin:0;padding:9px 13px;border-top:1px solid var(--ca-hair);
  font-size:11.5px;line-height:1.45;color:var(--ca-dim)}
.ca-more{display:block;padding:10px 13px;border-top:1px solid var(--ca-hair);
  font-size:12px;font-weight:800;color:var(--ca-ink);text-decoration:none;
  background:var(--ca-sunk)}
.ca-more:hover{background:#eee}
.ca-grid{display:grid;grid-template-columns:1fr 1fr}
.ca-grid > div{padding:12px 13px;border-right:1px solid var(--ca-hair);
  border-bottom:1px solid var(--ca-hair)}
.ca-grid > div:nth-child(2n){border-right:0}
.ca-grid > div:nth-last-child(-n+2){border-bottom:0}
.ca-grid b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--ca-ink)}
.ca-grid span{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--ca-lab)}
.ca-live{display:flex;align-items:center;gap:8px;margin:0;padding:11px 13px;
  border-top:1px solid var(--ca-hair);font-size:12px;color:var(--ca-dim);
  background:var(--ca-sunk)}
.ca-live i{width:7px;height:7px;background:var(--ca-good);border-radius:50%;flex:none}
.ca-live b{color:var(--ca-ink);font-weight:800}

/* A suggestion CTA that cannot be opened says so, rather than silently
   returning you to the list. */
.sk-notice{margin:0 0 18px;padding:11px 14px;border:2px solid #b4470f;color:#b4470f;
  font-size:13.5px;font-weight:700;background:#fff}

/* ─────────────────────────────────────────────────────────────────────────
   Skill page: where you stand on this one skill. Lives in this sheet because
   it ships alongside the suggestion widget and is loaded from shared chrome —
   a page-scoped link would be dropped by $pageCssOverride on the flat arm.
   ───────────────────────────────────────────────────────────────────────── */
.ss-panel{--ss-ink:#0a0a0a;--ss-dim:#666c78;--ss-lab:#666c78;--ss-hair:#e6e6e6;
  --ss-sunk:#f6f6f4;--ss-good:#0f7a4a;--ss-warn:#b4470f;--ss-blue:#1a3aff;
  border:2px solid var(--ss-ink);background:#fff;padding:18px 20px;margin:0 0 22px;
  font-variant-numeric:tabular-nums}
.ss-panel *{box-sizing:border-box}
.ss-ask h2{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ss-ink)}
.ss-ask p{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--ss-dim);max-width:70ch}
.ss-ask p b,.ss-say b{color:var(--ss-ink);font-weight:800}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;
  font-size:13px;font-weight:800;border:2px solid var(--ss-ink);background:var(--ss-ink);
  color:#fff;text-decoration:none}
.ss-btn:hover{background:#333;color:#fff}
.ss-teaser{display:inline-block;margin-left:14px;font-size:12.5px;color:var(--ss-dim)}
.ss-teaser b{color:var(--ss-ink);font-weight:800}

.ss-have{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
.ss-score{text-align:center}
.ss-score b{font-size:46px;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--ss-ink)}
.ss-score span{font-size:13px;font-weight:700;color:var(--ss-lab)}
.ss-score em{display:block;margin-top:6px;font-style:normal;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--ss-lab)}
/* display:block — an inline span collapses to zero width whatever height it has. */
.ss-track{display:block;position:relative;height:32px;margin-bottom:10px}
.ss-track i{position:absolute}
.ss-rail{left:0;right:0;top:14px;height:5px;background:var(--ss-sunk);border:1px solid var(--ss-hair)}
.ss-avg{top:7px;width:2px;height:19px;background:var(--ss-lab)}
.ss-avg::after{content:attr(data-v);position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:800;color:var(--ss-dim)}
.ss-me{top:4px;width:30px;height:25px;transform:translateX(-50%);background:var(--ss-ink);color:#fff;
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ss-say{margin:0;font-size:13.5px;line-height:1.55;color:var(--ss-dim)}
.ss-acts{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.ss-link{font-size:12.5px;font-weight:800;color:var(--ss-ink);text-decoration:none;
  border-bottom:2px solid var(--ss-hair);padding-bottom:2px}
.ss-link:hover{border-bottom-color:var(--ss-ink)}
@media (max-width:640px){
  .ss-have{grid-template-columns:minmax(0,1fr);gap:14px}
  .ss-score{text-align:left}
  .ss-teaser{display:block;margin:10px 0 0}
}

/* Technical Basics index: the diagnostic CTA and per-card score. */
.tb-diag{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;
  padding:13px 16px;border:2px solid #0a0a0a;background:#fff}
.tb-diag-n{font-size:22px;font-weight:800;letter-spacing:-.04em;color:#0a0a0a;
  font-variant-numeric:tabular-nums}
.tb-diag-t{font-size:13.5px;line-height:1.5;color:#666c78;flex:1 1 240px}
.tb-diag-t b{color:#0a0a0a;font-weight:800}
.tb-diag-b{display:inline-flex;align-items:center;height:36px;padding:0 15px;font-size:12.5px;
  font-weight:800;border:2px solid #0a0a0a;background:#0a0a0a;color:#fff;text-decoration:none}
.tb-diag-b:hover{background:#333;color:#fff}
.tb-card-score{margin-left:auto;min-width:34px;height:26px;padding:0 8px;display:inline-flex;
  align-items:center;justify-content:center;background:#0a0a0a;color:#fff;font-size:12.5px;
  font-weight:800;font-variant-numeric:tabular-nums}

/* …and the same capability in the flat arm's primitives. The ink hero is dark,
   so this block inverts rather than reusing .tb-diag's white ground. */
.fp-diag{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;
  padding:13px 16px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.fp-diag-t{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78);flex:1 1 240px}
.fp-diag-t b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.fp-diag-b{display:inline-flex;align-items:center;height:36px;padding:0 16px;font-size:12.5px;
  font-weight:700;background:#fff;color:#0a0a0a;text-decoration:none;white-space:nowrap}
.fp-diag-b:hover{background:rgba(255,255,255,.85);color:#0a0a0a}
.fp-cell-sc{margin-left:8px;padding:1px 7px;background:#0a0a0a;color:#fff;font-size:11.5px;
  font-weight:700;font-variant-numeric:tabular-nums}
/* The skills index repeats the block once per category, so it sits tighter. */
.tb-diag-sm{margin:0 0 16px;padding:9px 13px;gap:10px}
.tb-diag-sm .tb-diag-n{font-size:17px}
.tb-diag-sm .tb-diag-t{font-size:13px}
.tb-diag-sm .tb-diag-b{height:31px;padding:0 12px;font-size:12px}

/* Skills index, flat arm. The group header is a flex row; the CTA takes the
   trailing edge so the category name and count keep their positions. */
.sk2-diag{margin-left:auto;display:inline-flex;align-items:center;height:29px;padding:0 12px;
  font-size:12px;font-weight:700;border:1.5px solid #0a0a0a;color:#0a0a0a;text-decoration:none;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sk2-diag:hover{background:#0a0a0a;color:#fff}
.sk2-card-sc{display:inline-block;margin-top:6px;padding:2px 8px;background:#0a0a0a;color:#fff;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* ── "Học tiếp" — the resume nudge, shared by /courses, /my-assessments,
   /progress and the landing widget. Loaded from head.php because the two A/B
   arms never share a stylesheet. */
.rc{--rc-ink:#0a0a0a;--rc-dim:#666c78;--rc-hair:#e6e6e6;--rc-accent:#e8501e;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:2px solid var(--rc-ink);background:#fff;padding:15px 18px;
  font-family:var(--d3-font,'Be Vietnam Pro',system-ui,sans-serif)}
.rc *{box-sizing:border-box}
.rc-b{flex:1 1 260px;min-width:0}
.rc-k{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rc-accent);margin-bottom:6px}
.rc-t{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--rc-ink)}
.rc-s{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--rc-dim)}
.rc-bar{display:block;height:7px;background:var(--rc-hair);margin:11px 0 0;overflow:hidden}
.rc-bar i{display:block;height:100%;background:var(--rc-ink);min-width:3px}
.rc-n{margin:5px 0 0;font-size:11px;color:var(--rc-dim);font-variant-numeric:tabular-nums}
.rc-go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 20px;background:var(--rc-ink);color:#fff;border:2px solid var(--rc-ink);
  font-size:13px;font-weight:800;text-decoration:none;transition:background .14s}
.rc-go:hover{background:#333;border-color:#333;color:#fff}
.rc.is-start{border-color:var(--rc-accent)}
.rc.is-start .rc-go{background:var(--rc-accent);border-color:var(--rc-accent)}
.rc.is-start .rc-go:hover{background:#c9410f;border-color:#c9410f}
/* Sidebar shape: stacked, full-width action. */
.rc-card{flex-direction:column;align-items:stretch;gap:13px}
.rc-card .rc-go{width:100%}
@media (max-width:560px){ .rc{flex-direction:column;align-items:stretch}.rc-go{width:100%} }

/* Rich tooltip on the "Khóa học" hero stat. Hover AND focus, so it is reachable
   by keyboard; pinned inside the viewport on narrow screens rather than clipped. */
.hero-stat.has-tip{position:relative;cursor:default}
.hero-stat.has-tip::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:14px}
.hero-tip{position:absolute;z-index:40;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:max(260px,100%);max-width:320px;background:#0a0a0a;color:#fff;border:2px solid #0a0a0a;
  padding:13px 15px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;
  text-align:left;font-family:var(--d3-font,'Be Vietnam Pro',system-ui,sans-serif)}
.hero-stat.has-tip:hover .hero-tip,
.hero-stat.has-tip:focus-within .hero-tip,
.lf-fig.has-tip:hover .hero-tip,
.lf-fig.has-tip:focus-within .hero-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hero-tip::before{content:'';position:absolute;top:-7px;left:50%;margin-left:-6px;
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #0a0a0a}
.hero-tip-k{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#e8501e;margin-bottom:6px}
.hero-tip b{display:block;font-size:14px;font-weight:800;line-height:1.35;color:#fff}
.hero-tip-s{display:block;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.75);margin-top:4px}
.hero-tip-bar{display:block;height:5px;background:rgba(255,255,255,.22);margin:10px 0 0}
.hero-tip-bar i{display:block;height:100%;background:#e8501e}
.hero-tip-go{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:#fff;
  text-decoration:none;border-bottom:2px solid #e8501e;padding-bottom:1px}
.hero-tip-go:hover{color:#fff;border-bottom-color:#fff}
@media (max-width:640px){ .hero-tip{left:0;transform:translateY(-6px);width:min(300px,86vw)}
  .hero-stat.has-tip:hover .hero-tip,.hero-stat.has-tip:focus-within .hero-tip,
  .lf-fig.has-tip:hover .hero-tip,.lf-fig.has-tip:focus-within .hero-tip{transform:translateY(0)}
  .hero-tip::before{left:26px} }
/* Same tooltip on the flat arm's figure. .lf-fig is the new arm's stat. */
.lf-fig.has-tip{position:relative;cursor:default}
.lf-fig.has-tip::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:14px}

/* Onboarding invitation strip — for users with no goal and no enrolment. */
.si-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 20px;
  padding:15px 18px;border:2px solid #e8501e;background:#fffdf9;
  font-family:var(--d3-font,'Be Vietnam Pro',system-ui,sans-serif)}
.si-b{flex:1 1 280px;min-width:0}
.si-t{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;color:#0a0a0a}
.si-s{margin:5px 0 0;font-size:13px;line-height:1.55;color:#666c78;max-width:62ch}
.si-go{flex:0 0 auto;display:inline-flex;align-items:center;height:40px;padding:0 20px;
  background:#e8501e;color:#fff;border:2px solid #e8501e;font-size:13px;font-weight:800;
  text-decoration:none}
.si-go:hover{background:#c9410f;border-color:#c9410f;color:#fff}