/* About · solution (patterns/gioi-thieu-sol.php): section head and four solution rows. On wide screens with a mouse a
   brand band slides into the row from the edge the pointer came through, runs the row's phrases and leaves through the
   edge the pointer exits by (Flowing Menu). The band is the parent theme's Group › Marquee (it doubles the phrases into a
   running track); assets/js/sections/ab-sol.js picks the edge and turns the band on. */
.ab-sol{
  --ab-sol-off:101%;
  --ab-sol-dot:var(--s-2);
  --ab-sol-dot-o:.6;
  --ab-sol-track:-0.02em;
  --ab-sol-line:32ch;
  --marquee-gap:var(--s-6);
  --marquee-item:calc(var(--dur-morph) * 5);
}
.ab-sol > .page{display:grid;gap:var(--gap-head)}
.ab-sol .page > *,.ab-sol__head > *,.ab-sol__flow > *,.ab-sol__row > *,.ab-sol__top > *{margin:0}

.ab-sol__head{display:grid;gap:var(--gap-text)}
.ab-sol h2{font-size:var(--t-2xl)}
.ab-sol h2 strong{font-weight:inherit;color:var(--accent)}
.ab-sol__head p{max-width:var(--measure);color:var(--ink-2)}

/* rows */
.ab-sol__flow{display:grid;border-top:1px solid var(--rule)}
.ab-sol__row{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.ab-sol__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-col);padding-block:var(--s-6)}
.ab-sol__top h3{font:700 var(--t-2xl)/1.05 var(--font-display);letter-spacing:var(--ab-sol-track)}
.ab-sol__top p{max-width:var(--ab-sol-line);color:var(--ink-2);text-align:right}

/* the band: waits below the row (or above it, .from-top) and covers the row while .is-on */
.ab-sol .ab-sol__marq{position:absolute;inset:0;display:flex;align-items:center;padding-left:var(--s-6);background:var(--accent-fill);color:var(--on-accent);pointer-events:none;
  transform:translateY(var(--ab-sol-off));transition:transform var(--dur-m) var(--ease-out)}
.ab-sol .ab-sol__row.from-top .ab-sol__marq{transform:translateY(calc(var(--ab-sol-off) * -1))}
.ab-sol .ab-sol__row.is-on .ab-sol__marq{transform:none}
.ab-sol .ab-sol__row.is-snap .ab-sol__marq{transition:none}
.ab-sol__marq p{display:flex;align-items:center;gap:var(--marquee-gap);white-space:nowrap;font:700 var(--t-xl)/1 var(--font-display)}
.ab-sol__marq p::after{content:"";flex:none;width:var(--ab-sol-dot);height:var(--ab-sol-dot);border-radius:50%;background:currentColor;opacity:var(--ab-sol-dot-o)}
/* the phrases run only while the band is shown */
.ab-sol .ab-sol__row:not(.is-on) .dn-marquee__track{animation-play-state:paused}

/* editor: the band sits under its row as a plain strip, so every phrase can be edited */
.editor-styles-wrapper .ab-sol .ab-sol__marq{position:static;display:flex;flex-wrap:wrap;gap:var(--s-3);padding:var(--s-3);transform:none;pointer-events:auto}

@media (max-width: 991px){
  .ab-sol__top{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
  .ab-sol__top p{text-align:left}
  .ab-sol .ab-sol__marq{display:none}
}
@media (prefers-reduced-motion: reduce){
  /* the kit turns a still marquee into a scrollable row; this band cannot be scrolled (pointer-events:none), so clip it */
  .ab-sol .ab-sol__marq.is-style-marquee{overflow:hidden;transition:none}
}