/* ICS steps (/ho-tro/ only; loaded by mu-plugins/ics-steps.php).
   The four step cards (#sup-cards > .ics-step-card) open ONE detail panel (#steps-panel),
   which ics-steps.js places after the last card of the tapped card's row. */

/* Cards as triggers */
#sup-cards { flex-wrap: wrap; }
.ics-step-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ics-step-card .ics-step-body::after {
  content: "";
  display: block;
  flex: none;
  align-self: center;
  width: 0.6875rem;
  height: 0.6875rem;
  margin-top: calc(var(--sp-xs) * -1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  transition: transform 300ms ease, opacity 200ms ease;
}
.ics-step-card:hover .ics-step-body::after,
.ics-step-card[aria-expanded="true"] .ics-step-body::after { opacity: 0.8; }
.ics-step-card[aria-expanded="true"] .ics-step-body::after { transform: rotate(-135deg); }
.ics-step-card[aria-expanded="true"] { outline: 2px solid currentColor; outline-offset: 10px; border-radius: 4px; }
.ics-step-card:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; border-radius: 4px; }

/* Panel region: height animates 0fr -> 1fr; full row width (flex line of its own) */
#steps-panel.ics-steps-wrap {
  display: grid;
  grid-template-rows: 0fr;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  transition: grid-template-rows 300ms ease;
  scroll-margin-top: 96px;
}
#steps-panel.ics-steps-wrap.is-open { grid-template-rows: 1fr; }
#steps-panel.ics-steps-wrap.is-idle { display: none; }
#steps-panel .ics-steps-clip {
  min-height: 0;
  overflow: hidden;
}

/* Detail panel: white torn card */
#steps-panel .ics-sp {
  position: relative;
  isolation: isolate;
  padding: var(--sp-l);
  margin: var(--sp-xs) 0 var(--sp-l);
}
#steps-panel .ics-sp[hidden] { display: none !important; }
#steps-panel .ics-sp p { margin: 0; }
#steps-panel .ics-sp h3 { margin: 0; font-weight: 400; text-wrap: balance; }
#steps-panel .ics-sp h4 { margin: 0; font-weight: 400; }
#steps-panel .ics-sp-sub { display: block; font-size: var(--fs-h2); line-height: var(--lh-sub); }

/* Two columns on desktop: text left, illustration right */
#steps-panel .ics-sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: var(--sp-3xl);
  align-items: center;
}
#steps-panel .ics-sp-main { display: flex; flex-direction: column; gap: var(--sp-m); min-width: 0; }
#steps-panel .ics-sp-when { display: flex; flex-direction: column; gap: var(--sp-xs); }
#steps-panel .ics-sp-when h4,
#steps-panel .ics-sp-body h4 { font-size: var(--fs-h3, 1.25rem); }
#steps-panel .ics-sp-intro,
#steps-panel .ics-sp-outro { margin: 0; }

/* Steps: number pill + text */
#steps-panel .ics-sp-steps { display: flex; flex-direction: column; gap: var(--sp-m); }
#steps-panel .ics-sp-step { display: flex; align-items: flex-start; gap: var(--sp-m); }
#steps-panel .ics-sp-body { display: flex; flex-direction: column; gap: var(--sp-2xs); min-width: 0; }
#steps-panel .ics-sp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--yellow-500);
}

/* Illustration */
#steps-panel .ics-sp-art { display: flex; align-items: center; justify-content: center; }
#steps-panel .ics-sp-art img { display: block; width: min(85%, 420px); height: auto; margin: 0 auto; }

#steps-panel .ics-sp-close { align-self: flex-start; cursor: pointer; }

@media (max-width: 899px) {
  #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 1fr); }
  #steps-panel .ics-sp-art { order: 2; }
}
@media (max-width: 599px) {
  #steps-panel .ics-sp { padding: var(--sp-m); }
}

/* Anchor used by /huong-dan-tu-ho-tro/ redirect: #tu-ho-tro */
#tu-ho-tro { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  #steps-panel.ics-steps-wrap,
  #steps-panel .ics-steps-clip,
  .ics-step-card .ics-step-body::after { transition: none !important; }
}

/* Heading receives focus programmatically after a mouse click: no box; keyboard focus keeps a ring */
#steps-panel .ics-sp h3:focus:not(:focus-visible) { outline: none; }

/* Panel title (H3, tabindex=-1, focused by ics-steps.js): no ring from programmatic focus. Keyboard rings stay on cards and close (:focus-visible). */
.ics-steps-clip [tabindex="-1"]:focus{outline:none}
/* Panel title below section H2 (56px desktop / 28.8px mobile) and above panel H4 (~36px / ~22px). */
#steps-panel .ics-sp h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); line-height: 1.2; }

/* Open card back layer (rotated, offset) must not add page scroll at narrow widths: clip at the section (viewport) edge. */
#sup-options { overflow-x: clip; }


/* ---- Panel: relaxed spacing, Prev/Next/Close row, small 0.2 chevrons (2026-11-04) ---- */
/* Black outline on the open card and on keyboard focus replaced by pink focus ring; mouse/programmatic focus draws nothing */
#sup-cards .ics-step-card[aria-expanded="true"] { outline: none; }
.ics-step-card:focus:not(:focus-visible), #steps-panel *:focus:not(:focus-visible) { outline: none; }
.ics-step-card:focus-visible { outline: 2px solid #ed1d85; outline-offset: 3px; }
#steps-panel .ics-sp { padding: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); margin: var(--sp-xs) 0 var(--sp-xl, 2.5rem); outline: none; }
#steps-panel .ics-sp-grid { gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
#steps-panel .ics-sp-main { gap: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
#steps-panel .ics-sp-steps { gap: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); }
#steps-panel .ics-sp-step { align-items: flex-start; }
#steps-panel .ics-sp-body { line-height: 1.7; padding-top: 0.4rem; }
#steps-panel .ics-sp-intro,
#steps-panel .ics-sp-outro,
#steps-panel .ics-sp-when p,
#steps-panel .ics-sp-body p { line-height: 1.7; }
#steps-panel .ics-sp-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-m, 1rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
#steps-panel .ics-sp-prev,
#steps-panel .ics-sp-next { min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
#steps-panel .ics-sp-prev { justify-self: start; }
#steps-panel .ics-sp-next { justify-self: end; }
#steps-panel .ics-sp-close { justify-self: center; align-self: center; min-height: 44px; }
#steps-panel .ics-sp-prev[hidden], #steps-panel .ics-sp-next[hidden] { display: none !important; }
/* Chevron = span.ics-sp-chev inside the button text (the torn silhouette uses the button's own ::before/::after) */
#steps-panel .ics-sp-chev {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.2;
  transition: opacity 200ms ease;
}
#steps-panel .ics-sp-next .ics-sp-chev { border-left: 0; border-bottom: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
#steps-panel .ics-sp-prev:hover .ics-sp-chev, #steps-panel .ics-sp-prev:focus-visible .ics-sp-chev,
#steps-panel .ics-sp-next:hover .ics-sp-chev, #steps-panel .ics-sp-next:focus-visible .ics-sp-chev { opacity: 0.35; }
@media (max-width: 599px) {
  #steps-panel .ics-sp { padding: var(--sp-l, 1.5rem); }
  #steps-panel .ics-sp-nav { grid-template-columns: 1fr 1fr; }
  #steps-panel .ics-sp-prev { grid-column: 1; grid-row: 1; justify-self: stretch; justify-content: center; }
  #steps-panel .ics-sp-next { grid-column: 2; grid-row: 1; justify-self: stretch; justify-content: center; }
  #steps-panel .ics-sp-close { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}
#sup-cards .ics-step-card.ics-torn-card:focus-visible { outline: 2px solid #ed1d85; outline-offset: 3px; border-radius: 4px; }


/* ---- Step rows: one type scale in all 4 panels (2026-11-04) ---- */
/* Step text 18-20px IBM Plex Sans (h4 titles no longer 36px serif); emphasis = 600; sub-note 15px muted */
html body #steps-panel .ics-sp-step > :not(.ics-sp-num),
html body #steps-panel .ics-sp-body > h4 {
  font-family: inherit;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
html body #steps-panel .ics-sp-body { padding-top: 0.5rem; }
html body #steps-panel .ics-sp-step > :not(.ics-sp-num) { padding-top: 0.5rem; }
html body #steps-panel .ics-sp-body strong { font-weight: 600; }
html body #steps-panel .ics-sp-body > p {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  margin: 0;
}
/* 5 giác quan: the paragraph under each title is a short sub-note (15px, muted) */
html body #step-5-giac-quan .ics-sp-body > p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(48, 47, 41, 0.72);
  margin: 0.25rem 0 0;
}
html body #steps-panel .ics-sp-steps { gap: 1.25rem; }
html body #steps-panel .ics-sp-num { margin-top: 0; }


/* ---- Panel controls: nav row right-aligned (Trước, Sau); Đóng = square X at top-right (2026-11-04) ---- */
html body #steps-panel .ics-sp-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-s, 0.75rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
html body #steps-panel .ics-sp-prev,
html body #steps-panel .ics-sp-next { min-height: 44px; justify-self: auto; }
html body #steps-panel .ics-sp-prev[hidden],
html body #steps-panel .ics-sp-next[hidden] { display: none !important; }
html body #steps-panel .ics-sp-close {
  position: absolute;
  top: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  right: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: auto;
  justify-self: auto;
  transform: none;
}
html body #steps-panel .ics-sp-close::before,
html body #steps-panel .ics-sp-close::after { content: none; display: none; }
html body #steps-panel .ics-sp-close:hover { background: #ed1d85; color: #fff; }
html body #steps-panel .ics-sp-close:focus-visible { outline: 2px solid #ed1d85; outline-offset: 3px; }
html body #steps-panel .ics-sp-close:focus:not(:focus-visible) { outline: none; }
html body #steps-panel .ics-sp-x { position: relative; display: block; width: 18px; height: 18px; }
html body #steps-panel .ics-sp-x::before,
html body #steps-panel .ics-sp-x::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
html body #steps-panel .ics-sp-x::before { transform: translateY(-50%) rotate(45deg); }
html body #steps-panel .ics-sp-x::after { transform: translateY(-50%) rotate(-45deg); }
/* heading and eyebrow clear the X on every width */
html body #steps-panel .ics-sp-main > h3 { padding-right: 3.5rem; }

/* Read-aloud helper makes panel text focusable (tabindex 0): keyboard ring pink, not black */
html body #steps-panel [data-ics-read]:focus-visible { outline: 2px solid #ed1d85; outline-offset: 3px; }


/* ---- Panel r4 (2026-11-04): compact. Illustration small in the heading row (left of X); body = full-width column; Dung khi nao? = accordion (collapsed, grey halftone) ---- */
:root { interpolate-size: allow-keywords; }
html body #steps-panel .ics-sp { padding: clamp(1.25rem, 1rem + 0.6vw, 1.75rem) clamp(1.25rem, 1rem + 1.6vw, 2.75rem); margin: var(--sp-xs) 0 var(--sp-m, 1rem); }
html body #steps-panel .ics-sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-m, 1rem); row-gap: 0.75rem; align-items: start; }
html body #steps-panel .ics-sp-main { display: contents; }
html body #steps-panel .ics-sp-main > h3 { grid-column: 1; grid-row: 1; padding-right: 0; }
html body #steps-panel .ics-sp-art { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin-right: 3.5rem; pointer-events: none; }
html body #steps-panel .ics-sp-art img { width: clamp(96px, 9vw, 140px); max-width: none; height: auto; margin: 0; }
html body #steps-panel .ics-sp-main > :not(h3) { grid-column: 1 / -1; }
html body #steps-panel .ics-sp-main > h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); line-height: 1.15; }
html body #steps-panel .ics-sp-sub { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.4rem); margin-top: 0.25rem; }
html body #steps-panel .ics-sp-intro,
html body #steps-panel .ics-sp-outro,
html body #steps-panel .ics-sp-body > p { font-size: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem); line-height: 1.6; }
html body #steps-panel .ics-sp-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
html body #steps-panel .ics-sp-step > :not(.ics-sp-num), html body #steps-panel .ics-sp-body > h4 { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); }


/* Dung khi nao? accordion: native details (collapsed by default), grey dot halftone, simple chevron */
html body #steps-panel details.ics-sp-when { display: block; margin: 0; border-radius: 8px; background-color: rgba(0, 0, 0, 0.03); background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1.4px); background-size: 6px 6px; transition: background-image 200ms ease; }
html body #steps-panel details.ics-sp-when:hover { background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1.4px); }
html body #steps-panel details.ics-sp-when > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-s, 0.75rem); min-height: 44px; padding: 0.75rem 1rem; cursor: pointer; border-radius: 8px; }
html body #steps-panel details.ics-sp-when > summary::-webkit-details-marker { display: none; }
html body #steps-panel details.ics-sp-when > summary h4 { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 400; line-height: 1.2; }
html body #steps-panel details.ics-sp-when > summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.2; transition: transform 300ms ease, opacity 200ms ease; }
html body #steps-panel details.ics-sp-when > summary:hover::after,
html body #steps-panel details.ics-sp-when[open] > summary::after { opacity: 0.35; }
html body #steps-panel details.ics-sp-when[open] > summary::after { transform: rotate(-135deg); }
html body #steps-panel details.ics-sp-when > summary:focus-visible { outline: 2px solid #ed1d85; outline-offset: 3px; }
html body #steps-panel details.ics-sp-when > summary:focus:not(:focus-visible) { outline: none; }
html body #steps-panel details.ics-sp-when::details-content { block-size: 0; overflow: hidden; transition: block-size 300ms ease, content-visibility 300ms allow-discrete; }
html body #steps-panel details.ics-sp-when[open]::details-content { block-size: auto; }
html body #steps-panel .ics-sp-when-body { padding: 0 1rem 1rem; }
@media (prefers-reduced-motion: reduce) { html body #steps-panel details.ics-sp-when::details-content, html body #steps-panel details.ics-sp-when > summary::after { transition: none !important; } }

@media (max-width: 899px) { html body #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 599px) {
  html body #steps-panel .ics-sp { padding: 1.25rem; }
  html body #steps-panel .ics-sp-art { margin-right: 3.75rem; }
  html body #steps-panel .ics-sp-art img { width: clamp(72px, 20vw, 88px); }
}


/* r4b: eyebrow on its own top row; nav sits in the grid, right of the outro line; mobile stacks */
html body #steps-panel .ics-sp::before { grid-column: 1 / -1; grid-row: 1; }
html body #steps-panel .ics-sp-main > h3 { grid-row: 2; }
html body #steps-panel .ics-sp-art { grid-row: 2; }
html body #steps-panel .ics-sp-main > .ics-sp-outro { grid-column: 1; }
html body #steps-panel .ics-sp-grid > .ics-sp-nav { grid-column: 2; margin-top: 0; justify-self: end; align-self: end; }
@media (max-width: 599px) {
  html body #steps-panel .ics-sp-main > .ics-sp-outro { grid-column: 1 / -1; }
  html body #steps-panel .ics-sp-grid > .ics-sp-nav { grid-column: 1 / -1; justify-self: stretch; margin-top: 0.75rem; }
  html body #steps-panel .ics-sp-nav { justify-content: flex-end; }
}


/* r5 (2026-11-04): steps as tiles: 3 cols desktop (>=1200), 2 tablet (600-1199), 1 mobile (<600); gap --sp-m; closing line full width */
html body #steps-panel .ics-sp-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-m, 1rem); align-items: stretch; }


html body #steps-panel .ics-sp-step { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; min-width: 0; height: 100%; padding: 1rem 1.125rem; border-radius: 8px; background-color: rgba(48, 47, 41, 0.03); }
html body #steps-panel .ics-sp-step > :not(.ics-sp-num) { padding-top: 0; min-width: 0; }
html body #steps-panel .ics-sp-num { margin-top: 0; }
html body #steps-panel .ics-sp-body { padding-top: 0; }
@media (max-width: 599px) {
  html body #steps-panel .ics-sp-step { flex-direction: row; gap: var(--sp-s, 0.75rem); padding: 0.875rem 0; background-color: transparent; border-radius: 0; }
  html body #steps-panel .ics-sp-step > :not(.ics-sp-num) { padding-top: 0.375rem; }
}
html body #steps-panel .ics-sp-main > .ics-sp-outro { grid-column: 1 / -1; }
html body #steps-panel .ics-sp-grid > .ics-sp-nav { grid-column: 1 / -1; }


/* r6: count sequences never break; tiles compact (padding .75rem 1rem, badge 36px, step text 17px/1.5, gap --sp-s); closing line + nav margin --sp-s */
html body .ics-seq { white-space: nowrap; }
html body #steps-panel .ics-sp-steps { gap: var(--sp-s, 0.75rem); }
html body #steps-panel .ics-sp-step { padding: 0.75rem 1rem; }
html body #steps-panel .ics-sp-step .ics-sp-num { min-width: 36px; width: 36px; height: 36px; padding: 0; }
html body #steps-panel .ics-sp-step > :not(.ics-sp-num), html body #steps-panel .ics-sp-body > h4 { font-size: 17px; line-height: 1.5; }
html body #steps-panel .ics-sp-main > .ics-sp-outro { margin-top: var(--sp-s, 0.75rem); }
html body #steps-panel .ics-sp-grid > .ics-sp-nav { margin-top: var(--sp-s, 0.75rem); }
@media (max-width: 599px) { html body #steps-panel .ics-sp-step { padding: 0.625rem 0; } }


/* r7 (2026-11-04): desktop = 2 columns: illustration 1/4 left (top-aligned), content 3/4 right. <992 = one column, small illustration beside the title. Steps tiles follow the PANEL width (container query): 3 cols >=940px, 2 cols >=590px, else 1. */
html body #steps-panel .ics-sp { container: ics-sp / inline-size; }
html body #steps-panel .ics-sp-grid { row-gap: var(--sp-xs, 0.5rem); }
@media (min-width: 992px) {
  html body #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--sp-xl, 2rem); }
  html body #steps-panel .ics-sp::before { grid-column: 2; grid-row: 1; }
  html body #steps-panel .ics-sp-main > h3 { grid-column: 2; grid-row: 2; }
  html body #steps-panel .ics-sp-art { grid-column: 1; grid-row: 1 / span 2; justify-self: start; align-self: start; width: 100%; margin-right: 0; }
  html body #steps-panel .ics-sp-art img { width: 100%; max-width: 300px; }
  html body #steps-panel .ics-sp-main > :not(h3) { grid-column: 2; }
  html body #steps-panel .ics-sp-grid > .ics-sp-nav { grid-column: 2; }
}
@media (max-width: 991px) {
  html body #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-m, 1rem); }
  html body #steps-panel .ics-sp::before { grid-column: 1 / -1; grid-row: 1; }
  html body #steps-panel .ics-sp-main > h3 { grid-column: 1; grid-row: 2; }
  html body #steps-panel .ics-sp-art { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; width: auto; margin-right: 3.5rem; }
  html body #steps-panel .ics-sp-art img { width: clamp(88px, 12vw, 120px); max-width: none; }
  html body #steps-panel .ics-sp-main > :not(h3) { grid-column: 1 / -1; }
  html body #steps-panel .ics-sp-grid > .ics-sp-nav { grid-column: 1 / -1; }
}
@container ics-sp (min-width: 590px) { html body #steps-panel .ics-sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ics-sp (min-width: 940px) { html body #steps-panel .ics-sp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* r7b: desktop illustration cell takes no row height (image overflows into the empty left column) */
@media (min-width: 992px) { html body #steps-panel .ics-sp-art { height: 0; } }

/* r7c: desktop illustration starts at the top of its cell (no vertical centring) */
@media (min-width: 992px) { html body #steps-panel .ics-sp-art { align-items: flex-start; justify-content: flex-start; } }

/* r7d: closing line sits in the right column on desktop */
@media (min-width: 992px) { html body #steps-panel .ics-sp-main > .ics-sp-outro { grid-column: 2; } }

/* r8 (2026-11-04): number badge LEFT of the step text in every tile (flex row, badge 36px, gap --sp-s) */
html body #steps-panel .ics-sp-step { flex-direction: row; align-items: flex-start; gap: var(--sp-s, 0.75rem); }
html body #steps-panel .ics-sp-step > :not(.ics-sp-num) { flex: 1 1 auto; min-width: 0; }
html body #steps-panel .ics-sp-step .ics-sp-num { flex: none; }


/* r9 (2026-11-04): relaxed rhythm. Panel padding clamp(2rem,4vw,3.5rem); row-gap 0, vertical gaps set per block; tiles 1.25rem 1.5rem, gap sp-m, badge 40px; body line-height 1.7 */
html body #steps-panel .ics-sp { padding: clamp(2rem, 4vw, 3.5rem); }
html body #steps-panel .ics-sp-grid { row-gap: 0; }
html body #steps-panel .ics-sp::before { margin-bottom: var(--sp-xs, 0.5rem); }
html body #steps-panel .ics-sp-main > h3 { margin-bottom: var(--sp-m, 1rem); }
html body #steps-panel .ics-sp-sub { margin-top: var(--sp-xs, 0.5rem); }
html body #steps-panel .ics-sp-main > .ics-body { font-size: 1.125rem; line-height: 1.7; margin: 0 0 var(--sp-s, 0.75rem); }
html body #steps-panel details.ics-sp-when { margin: var(--sp-s, 0.75rem) 0 var(--sp-m, 1rem); }
html body #steps-panel details.ics-sp-when > summary { padding: var(--sp-s, 0.75rem) var(--sp-m, 1rem); }
html body #steps-panel .ics-sp-intro { margin: 0 0 var(--sp-m, 1rem); }
html body #steps-panel .ics-sp-steps { gap: var(--sp-m, 1rem); margin-bottom: var(--sp-l, 1.5rem); }
html body #steps-panel .ics-sp-main > .ics-sp-outro { margin: 0 0 var(--sp-l, 1.5rem); font-size: 1rem; line-height: 1.7; }
html body #steps-panel .ics-sp-grid > .ics-sp-nav { margin-top: 0; }
html body #steps-panel .ics-sp-step { padding: 1.25rem 1.5rem; gap: var(--sp-s, 0.75rem); }
html body #steps-panel .ics-sp-step .ics-sp-num { width: 40px; height: 40px; min-width: 40px; }
html body #steps-panel .ics-sp-step > :not(.ics-sp-num), html body #steps-panel .ics-sp-body > h4 { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.7; }
html body #steps-panel .ics-sp-body > p { line-height: 1.7; }
@media (max-width: 991px) { html body #steps-panel .ics-sp { padding: 1.5rem; } }
@media (max-width: 599px) { html body #steps-panel .ics-sp { padding: 1.25rem; } html body #steps-panel .ics-sp-step { padding: 0.875rem 0; } }

/* r10 (2026-11-04, owner): breakpoint 768. >=768: 2 columns, illustration LEFT (~1/4, top-aligned, centred), content RIGHT (~3/4). <768: illustration FIRST, centred, height clamp(120px,38vw,150px), then eyebrow, title, intro, accordion, steps, buttons. Close X stays top-right, clear of the illustration. */
@media (min-width: 768px) {
  html body #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  html body #steps-panel .ics-sp::before { grid-column: 2; grid-row: 1; }
  html body #steps-panel .ics-sp-main > h3 { grid-column: 2; grid-row: 2; }
  html body #steps-panel .ics-sp-art { order: 0; grid-column: 1; grid-row: 1 / span 2; justify-self: stretch; align-self: start; display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 0; margin: 0; padding: 0; }
  html body #steps-panel .ics-sp-art img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; object-fit: contain; }
  html body #steps-panel .ics-sp-main > :not(h3) { grid-column: 2; }
  html body #steps-panel .ics-sp-grid > .ics-sp-nav { grid-column: 2; }
}
@media (max-width: 767px) {
  html body #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  html body #steps-panel .ics-sp-art { order: -1; grid-column: 1 / -1; grid-row: auto; justify-self: center; align-self: auto; display: flex; justify-content: center; align-items: center; width: auto; height: auto; margin: 0 auto var(--sp-m, 1rem); padding: 0; }
  html body #steps-panel .ics-sp-art img { width: auto; height: clamp(120px, 38vw, 150px); max-width: 100%; margin: 0 auto; object-fit: contain; }
  html body #steps-panel .ics-sp-main > h3 { grid-column: 1 / -1; grid-row: auto; }
  html body #steps-panel .ics-sp-main > :not(h3) { grid-column: 1 / -1; }
  html body #steps-panel .ics-sp-grid > .ics-sp-nav { grid-column: 1 / -1; grid-row: auto; }
}
/* hover effects only where a fine pointer can hover: touch/coarse devices get the resting state */
@media not all and (hover: hover) and (pointer: fine) {
  .ics-step-card:hover .ics-step-body::after { opacity: 0.5; }
  #steps-panel .ics-sp-prev:hover .ics-sp-chev, #steps-panel .ics-sp-next:hover .ics-sp-chev { opacity: 0.2; }
  html body #steps-panel .ics-sp-close:hover { background: #000; color: #fff; }
  html body #steps-panel details.ics-sp-when:hover { background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1.4px); }
  html body #steps-panel details.ics-sp-when > summary:hover::after { opacity: 0.2; }
}

/* ---- Steps = ONE accordion per panel (owner 2026-11-04): Bricks accordion-nested (global ics-acc 1d5141) replaces the 3-col tile grid; single full-width column at every width. Scope: #steps-panel .ics-sp-acc ---- */
html body #steps-panel .ics-sp-acc { display: flex; flex-direction: column; width: 100%; max-width: none; margin: 0 0 var(--sp-l, 1.5rem); }
html body #steps-panel .ics-sp-acc .accordion-title-wrapper { min-height: 44px; padding: var(--sp-m, 1rem) 0; gap: var(--sp-m, 1rem); align-items: center; }
html body #steps-panel .ics-sp-acc .accordion-title-wrapper > .ics-sp-num { margin: 0; }
html body #steps-panel .ics-sp-acc .ics-sp-acc-t { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
html body #steps-panel .ics-sp-acc .accordion-content-wrapper { max-width: none; padding: var(--sp-m, 1rem) 0 var(--sp-l, 1.5rem) calc(2.75rem + var(--sp-m, 1rem)); }
html body #steps-panel .ics-sp-acc .accordion-content-wrapper:empty { display: none; }
html body #steps-panel .ics-sp-acc .ics-sp-acc-body > p { margin: 0; }
html body #steps-panel .ics-sp-acc .ics-sp-acc-empty > .accordion-title-wrapper { cursor: default; }
html body #steps-panel .ics-sp-acc .ics-sp-acc-empty > .accordion-title-wrapper::after { display: none; }
@media (max-width: 478px) { html body #steps-panel .ics-sp-acc .accordion-content-wrapper { padding-left: calc(2.75rem + var(--sp-s, 0.75rem)); } }

/* r-acc2: disc never wraps; empty-body steps take no gap (owner 2026-11-04). */
html body #steps-panel .ics-sp-acc .ics-sp-num { white-space: nowrap; flex: 0 0 auto; width: auto; min-width: 2.75rem; padding: 0 0.75rem; }
html body #steps-panel .ics-sp-acc .ics-sp-acc-empty > .accordion-content-wrapper { display: none; }

/* r-acc3: disc is a fixed 2.75rem circle (same size for 01-05). */
html body #steps-panel .ics-sp-acc .ics-sp-num { width: 2.75rem; min-width: 2.75rem; padding: 0; flex: 0 0 2.75rem; }

/* r-acc4: disc keeps its size against the accordion title row (flex-basis 0 from the accordion rule). */
html body #steps-panel .ics-sp-acc .accordion-title-wrapper > .ics-sp-num { flex: 0 0 2.75rem !important; width: 2.75rem !important; min-width: 2.75rem !important; max-width: 2.75rem !important; }

/* ===== P44 (2026-11-05): steps as always-visible cards (Option A). Scope #steps-panel. Overrides the older blocks above. ===== */
html body #steps-panel .ics-sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  column-gap: var(--sp-l, 1.5rem);
  row-gap: var(--sp-m, 1rem);
  align-items: start;
}
@media (min-width: 600px) {
  html body #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
}
html body #steps-panel .ics-sp-main { display: contents; }
html body #steps-panel .ics-sp-main > * { grid-column: 2; min-width: 0; margin: 0; }
html body #steps-panel .ics-sp-main > .ics-sp-when,
html body #steps-panel .ics-sp-main > .ics-sp-intro,
html body #steps-panel .ics-sp-main > .ics-sp-acc,
html body #steps-panel .ics-sp-main > .ics-sp-outro { grid-column: 1 / -1; }
html body #steps-panel .ics-sp-art { grid-column: 1; grid-row: 1 / span 3; margin: 0; min-width: 0; }
html body #steps-panel .ics-sp-art img { width: 100%; max-width: 10rem; height: auto; }
html body #steps-panel .ics-sp-nav { display: none !important; }
@media (max-width: 599px) {
  html body #steps-panel .ics-sp-grid { grid-template-columns: minmax(0, 1fr); }
  html body #steps-panel .ics-sp-art { grid-column: 1; grid-row: auto; order: -1; }
  html body #steps-panel .ics-sp-art img { max-width: 7rem; }
  html body #steps-panel .ics-sp-main > * { grid-column: 1 / -1; }
}

/* Intro line above the grid, closing line below it with a pink rule. */
html body #steps-panel .ics-sp-intro { margin: 0; }
html body #steps-panel .ics-sp-outro {
  margin: 0;
  padding-left: var(--sp-m, 1rem);
  border-left: 4px solid var(--pink-brand, #ed1d85);
}

/* "Dùng khi nào?" always-open note card. */
html body #steps-panel .ics-sp-when {
  display: block;
  padding: var(--sp-m, 1rem) var(--sp-l, 1.5rem);
  background: var(--yellow-100, #fffbe6);
  border-left: 4px solid var(--pink-brand, #ed1d85);
  border-radius: var(--radius-s, 4px);
}
html body #steps-panel .ics-sp-when > h4 { margin: 0 0 var(--sp-2xs, .25rem); }
html body #steps-panel .ics-sp-when > p { margin: 0; }

/* Grid of step cards: 4 columns (3 for a 3-step exercise) from 1200; 2 columns 600-1199; 1 column <=599.
 * The 5-step exercise uses auto-fit (3 + 2 at desktop widths). */
html body #steps-panel .ics-sp-acc {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-m, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1200px) {
  html body #steps-panel .ics-sp-acc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body #step-nhin-nghe-ket-noi .ics-sp-acc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) {
  html body #step-5-giac-quan .ics-sp-acc { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (min-width: 1200px) {
  html body #step-5-giac-quan .ics-sp-acc { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 599px) {
  html body #steps-panel .ics-sp-acc { grid-template-columns: minmax(0, 1fr); }
}
html body #steps-panel .ics-sp-acc > .ics-sp-acc-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-s, .75rem);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--sp-l, 1.5rem);
  background: var(--surface, #fff);
  border: 1px solid var(--border-ui, rgba(0, 0, 0, .3));
  overflow-wrap: anywhere;
}
html body #steps-panel .ics-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s, .75rem);
}
html body #steps-panel .ics-sp-acc-head { display: contents; }
html body #steps-panel .ics-sp-acc-head > h4 { margin: 0; }
html body #steps-panel .ics-sp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border-radius: 50%;
  background: var(--yellow-300, #ffef6b);
}
html body #steps-panel .ics-sp-acc-body { display: block; height: auto; max-height: none; overflow: visible; margin: 0; padding: 0; }
html body #steps-panel .ics-sp-acc-body > p { margin: 0; }
html body #steps-panel .ics-step-viz { flex: none; width: 3.5rem; height: 3.5rem; overflow: visible; }
html body #steps-panel .ics-viz-box { fill: none; stroke: var(--text, #222); stroke-width: 2.5; }
html body #steps-panel .ics-viz-on { fill: none; stroke: var(--pink-brand, #ed1d85); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
html body #steps-panel .ics-step-dots { display: inline-flex; align-items: center; gap: .5rem; }
html body #steps-panel .ics-step-dots i { display: block; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--border-ui, rgba(0, 0, 0, .3)); }
html body #steps-panel .ics-step-dots i.is-on { background: var(--pink-brand, #ed1d85); border-color: var(--pink-brand, #ed1d85); }
/* P44 fix: step cards white (not the cream page tone). */
html body #steps-panel .ics-sp-acc > .ics-sp-acc-item { background: var(--white, #fff); }
/* P44 fix: 5-step exercise 600-1199 = two columns (auto-fit only from 1200). */
@media (min-width: 600px) and (max-width: 1199px) { html body #step-5-giac-quan .ics-sp-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== P44 r2 (2026-11-05): step cards, always visible. Supersedes the v2/v3 blocks. Open/close rules above are not changed. ===== */
#steps-panel .ics-sp { container-type: inline-size; }
html body #steps-panel .ics-sp-acc.ics-steps-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-m, 1rem);
  list-style: none;
  margin: 0 0 var(--sp-l, 1.5rem);
  padding: 0;
  width: 100%;
  max-width: none;
}
@media (min-width: 600px) and (max-width: 991px) {
  html body #steps-panel .ics-sp-acc.ics-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @container (max-width: 25rem) {
    html body #steps-panel .ics-sp-acc.ics-steps-list { grid-template-columns: minmax(0, 1fr); }
  }
}
@media (min-width: 992px) {
  html body #steps-panel .ics-sp-acc.ics-steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body #step-nhin-nghe-ket-noi .ics-sp-acc.ics-steps-list,
  html body #step-5-giac-quan .ics-sp-acc.ics-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @container (max-width: 51rem) {
    html body #steps-panel .ics-sp-acc.ics-steps-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  }
}
html body #steps-panel .ics-step-item.ics-torn-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-s, 0.75rem);
  min-width: 0;
  margin: 0;
  padding: var(--sp-m, 1rem) var(--sp-m, 1rem) var(--sp-l, 1.5rem);
  border: 0;
  background: transparent;
  list-style: none;
}
html body #steps-panel .ics-step-item.ics-torn-card::before { background: #fff; }
html body #steps-panel .ics-step-item.ics-torn-card:hover { transform: none; }
html body #steps-panel .ics-step-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s, 0.75rem);
}
html body #steps-panel .ics-step-top .ics-sp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  margin: 0;
  background: #ffec6e;
  color: #1a1a1a;
  font-size: 1rem;
  line-height: 1;
}
html body #steps-panel .ics-step-viz { width: 3.5rem; height: 3.5rem; flex: 0 1 3.5rem; min-width: 0; max-width: 100%; overflow: visible; }
html body #steps-panel .ics-viz-box { fill: none; stroke: #2b2b2b; stroke-width: 2.5; }
html body #steps-panel .ics-viz-on { fill: none; stroke: #ed1d85; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
html body #steps-panel .ics-step-dots { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; }
html body #steps-panel .ics-step-dots i { display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #cfc8b8; }
html body #steps-panel .ics-step-dots i.is-on { background: #ed1d85; }
html body #steps-panel .ics-step-head { margin: 0; }
html body #steps-panel .ics-step-head .ics-sp-acc-t { margin: 0; }
html body #steps-panel .ics-step-body { flex: 1 1 auto; min-width: 0; }
html body #steps-panel .ics-step-body > * { margin: 0; }
html body #steps-panel .ics-step-body > p + p { margin-top: var(--sp-2xs, 0.5rem); }
html body #steps-panel .ics-sp-nav { display: none !important; }

/* P60 r1 (2026-11-05): step cards align title and body across each row. Each card spans three tracks (top | title | body) of the list grid. Title->body gap = --sp-xs. */
html body #steps-panel .ics-sp-acc.ics-steps-list { row-gap: 0; }
html body #steps-panel .ics-sp-acc.ics-steps-list > .ics-step-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  align-content: start;
  margin: 0 0 var(--sp-m, 1rem);
}
html body #steps-panel .ics-step-item > .ics-step-top { margin: 0 0 var(--sp-s, 0.75rem); }
html body #steps-panel .ics-step-item > .ics-step-head { margin: 0; }
html body #steps-panel .ics-step-item > .ics-step-body { margin: var(--sp-xs, 0.5rem) 0 0; padding: 0; }


/* H32 self-help panel (owner 2026-11-05): the panel title is an h3 now (Bricks tag fixed; it was a p, so the ics-h1 token made it 56px).
   Size = --fs-h3 = card title token (ics-h3), so panel <= card title and stays below the parent H2 (--fs-h1).
   Eyebrow / title / subtitle stack in one flex column with token gaps (no grid auto-placement overlap). Subtitle smaller than the title. */
html body #steps-panel .ics-sp-main { display: flex; flex-direction: column; gap: var(--sp-s, 0.75rem); min-width: 0; grid-column: 2; grid-row: 2; }
@media (max-width: 767px) { html body #steps-panel .ics-sp-main { grid-column: 1 / -1; grid-row: auto; } }
html body #steps-panel .ics-sp-main > * { margin: 0; min-width: 0; }
html body #steps-panel .ics-sp-main > .ics-eyebrow { line-height: var(--lh-body, 1.5); }
html body #steps-panel .ics-sp-main > h3.ics-h1 { display: block; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--ls-h4, normal); text-indent: 0; margin: 0; padding-left: 0; overflow: visible; }
html body #steps-panel .ics-sp-main > h3.ics-h1 .ics-sp-sub { display: block; margin: var(--sp-2xs, 0.25rem) 0 0; padding: 0; text-indent: 0; font-size: var(--fs-sub2); line-height: 1.3; letter-spacing: normal; }

/* H43 self-help cards centre */
html body #sup-cards > .ics-step-card > .ics-art {
  width: min(70%, 240px);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
html body #sup-cards > .ics-step-card > .ics-art > img {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
html body #sup-cards > .ics-step-card > .ics-step-body {
  align-items: center;
  text-align: center;
}