/* ============================================================
   Paths widget — "Bắt đầu từ đâu"

   Tier 1 of the two bands under the hero. The client's round-2 note was that the
   two rows read as one flat block, so this one sits on --hs-surface with a
   heading and large cards, and the trust strip below drops to near-black and
   shrinks. The hierarchy has to be unmistakable.
   ============================================================ */

.hs-paths{
  background:var(--hs-surface);
  border-top:1px solid var(--hs-line);
  border-bottom:1px solid var(--hs-line);
  padding:62px 0 66px;
}
.hs-paths .hs-sec-head{max-width:680px;margin-bottom:28px}

.hs-paths__grid{
  display:grid;
  grid-template-columns:repeat(var(--hs-paths-cols,3),minmax(0,1fr));
  gap:18px;
}

.hs-path{
  position:relative;
  overflow:hidden;
  display:block;
  padding:30px 26px;
  background:var(--hs-w-surface,var(--hs-card));
  border:1px solid var(--hs-w-border,var(--hs-line));
  border-radius:16px;
  transition:border-color var(--hs-t),transform var(--hs-t);
}
.hs-path:hover{border-color:var(--hs-w-accent,var(--hs-accent));transform:translateY(-4px)}
/* Accent rail on hover — a 3px bar rather than a border-width change, which
   would shift the card's contents by a pixel and look like a jitter. */
.hs-path::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--hs-w-accent,var(--hs-accent));
  opacity:0;
  transition:opacity var(--hs-t);
}
.hs-path:hover::after{opacity:1}
.hs-path:focus-visible{outline:2px solid var(--hs-accent-2);outline-offset:3px}

.hs-path__n{
  display:block;
  margin-bottom:12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
}

/* Icon tile — OPT-IN. The home page cards dropped theirs in review round 3:
   three decorative glyphs said nothing the three headings did not already say,
   and the page already carries icons in the trust strip and the contact dock.
   Kept for the shop's policy cards, where the icon is the only thing
   distinguishing three near-identical rows of legal copy. */
.hs-path__ic{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  margin-bottom:14px;
  border-radius:12px;
  background:var(--hs-elev);
  font-size:20px;
  color:var(--hs-w-accent,var(--hs-accent));
}

.hs-path__title{font-size:23px;font-weight:800;line-height:1.2;margin:0 0 8px}
/* Without an icon the card needs the rule to carry the eye down instead. */
.hs-path--no-icon .hs-path__title{padding-top:14px;border-top:1px solid var(--hs-w-border,var(--hs-line))}

.hs-path__text{font-size:14.5px;margin:0 0 16px}
.hs-path__go{font-weight:700;font-size:14px}

@media(max-width:900px){
  .hs-paths__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .hs-paths__grid{grid-template-columns:minmax(0,1fr)}
  .hs-paths{padding:44px 0 48px}
}
@media(prefers-reduced-motion:reduce){
  .hs-path{transition:none}
  .hs-path:hover{transform:none}
}