/* ============================================================
   Luxshine — Shipping & Delivery (shipping-delivery.html), third build (comment cmvowmpowc1vk): the
   user's pick "Kể chuyện kiểu About", the story from the warehouse to the salon told with the About page's
   approved pieces (css/about-page.css, js/about.js): banner, Come Meet Us cluster, Journey line, Luxshine
   Today map and figures band across the seam, Our Story row, the site's question list. Words from the
   client's "Shipping" document. This file holds only what is this page's own: the opening without the
   About overlap, the four-stop line, the region list beside the map, the section that clears the figures
   band, and the grounds of the rows. (css/shipping.css stays as it was: the policy pages still use it.)
   Tokens only; spacing on the 12-step scale; transform and opacity only.
   ============================================================ */

/* ---------- 1 · Banner: the warehouse, its big title on the bright ceiling top left (comment cmvoxivoq54ee); a white wash
   over the top half keeps the lamps and rails from crossing the letters ---------- */
.ship-banner .ab-banner__media img { object-position: 50% 55%; }
.ship-banner::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-white) 72%, transparent), transparent 60%); pointer-events: none; }
.ship-banner__head { position: relative; z-index: 1; padding-top: var(--space-12); }
.ship-banner__title { font-size: var(--display-2-size); line-height: var(--display-2-lh); }

/* ---------- 2 · Opening: Come Meet Us without its form, turned round (comment cmvoxgg3nzx3c): the words with their title
   on the left, the three photos on the right; the button under the copy ---------- */
.ship-open { padding-top: var(--space-16); }
.ship-open .ab-meet__grid { grid-template-columns: minmax(0, 403fr) minmax(0, 413fr); align-items: center; }
.ship-open .ab-meet__text .ab-title { margin-bottom: var(--space-8); }
.ship-open__cta { margin-top: var(--space-8); }

/* ---------- 3 · Time of Fulfillment: the Journey line with four stops, on beige; white cards so they stand off the
   ground; the order-step photos keep the role they have on How to Order (--ty-le-buoc_dat_hang). ---------- */
.ship-journey { --ab-curtain: var(--surface-beige); background: var(--surface-beige); padding-top: calc(var(--space-16) * 2); }
.ship-years .ab-year__shot { aspect-ratio: var(--ty-le-buoc_dat_hang); }
.ship-years .ab-year__body { background: var(--color-white); padding: var(--space-4) var(--space-4) var(--space-6); }
/* Stop names in SVN-Gilroy (comment cmvoxgx5v5izj). */
.ship-years .ab-year__title { font-family: var(--font-body); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-lh); }
.ship-years .ab-year__text strong { font-weight: 700; }
@media (min-width: 1025px) {
  .ship-years { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The line runs from the first dot's centre to the last one's (four columns). */
  .ship-years::before { left: calc((100% - 3 * var(--ab-gap)) / 8); right: calc((100% - 3 * var(--ab-gap)) / 8); }
}

/* ---------- 4 · Delivery Time: About's map; beside it Vietnam, the headline time and the regions one under another,
   each with its time at the right; the figures band runs across into the next section ---------- */
.ship-reach__list { grid-template-rows: none; grid-auto-flow: row; }
.ship-reach__list li span { margin-left: auto; padding-left: var(--space-6); font-weight: 700; }

/* The map's names stand on their pins (comment cmvoxxxzkpruq): the foot of each name at --b, so a name that grows against the
   shrinking map on a phone rises away from its pin instead of covering it. The image carries no names of its own. */
.ship-map .ab-map__labels li { top: auto; bottom: calc(100% - var(--b)); }

/* The figures band in SVN-Gilroy (comment cmvoxhetxn5v0): bold numbers, medium capitals under them. */
.ship-stats .ab-stat__num { font-family: var(--font-body); font-weight: 700; }
.ship-stats .ab-stat__label { font-family: var(--font-body); font-weight: 500; }

/* ---------- 5 · Shipping Agents: Our Story's row on white; its top clears the lower half of the figures band (as About's
   Vision & Mission does) ---------- */
.ship-agents { padding: calc(var(--ab-stats-h, var(--space-24)) / 2 + var(--space-16)) 0 calc(var(--space-16) * 2); }
/* The couriers' logos alone, drifting left to right (comments cmvoxhwiidlye, cmvoxyforggvl): the site's marquee turned round,
   one colour on beige tiles. Each tile is a fifth of the frame (container units), so one set of five fills it and the clone
   follows on without a gap; on a narrow screen a tile never drops under 160px. The ends fade out. Before the script runs, and
   with reduced motion (no clone, no drift), the five tiles wrap and sit centred instead of scrolling sideways. */
.ship-roll { container-type: inline-size; --marquee-dur: 30s; --ship-fade: var(--space-16);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-black) var(--ship-fade), var(--color-black) calc(100% - var(--ship-fade)), transparent);
          mask-image: linear-gradient(to right, transparent, var(--color-black) var(--ship-fade), var(--color-black) calc(100% - var(--ship-fade)), transparent); }
.ship-roll.is-marquee .marquee__track { animation-direction: reverse; }
.ship-roll:not(.is-marquee) { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.ship-logos { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.ship-roll:not(.is-marquee) .ship-logos { flex-wrap: wrap; justify-content: center; row-gap: var(--space-4); width: auto; }
.ship-roll:not(.is-marquee) .ship-logo { width: max(calc(var(--space-24) + var(--space-16)), calc(20cqi - var(--space-6))); margin-inline: var(--space-2); }
.ship-logo { flex: none; width: max(calc(var(--space-24) + var(--space-16)), calc(20cqi - var(--space-4))); margin-right: var(--space-4); display: grid; place-items: center; min-height: calc(var(--space-24) + var(--space-12)); padding: var(--space-6); background: var(--surface-beige); color: var(--color-black); }
.ship-logo__svg { display: block; width: min(100%, calc(var(--space-24) + var(--space-12))); height: auto; aspect-ratio: var(--ty-le-khoi_vuong); }
.ship-logo--word { font-family: var(--font-body); font-weight: 700; font-size: var(--h3-size); line-height: var(--h3-lh); text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .js .ship-roll[data-reveal] .ship-logo { opacity: 0; transform: translateY(var(--space-6)); transition: opacity .8s var(--ab-ease) calc(var(--i, 0) * .08s), transform .9s var(--ab-ease) calc(var(--i, 0) * .08s); }
  .js .ship-roll[data-reveal].is-in .ship-logo { opacity: 1; transform: none; }
}

/* ---------- 6 · Good to Know: the site's question list under About's gold-bar title, on beige ---------- */
.ship-faq.faq { background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
.ship-faq .faq__list { max-width: 880px; }

@media (max-width: 1279px) {
  .ship-agents { padding-top: calc(var(--ab-stats-h, var(--space-24)) - var(--space-12) + var(--space-16)); }
}
@media (max-width: 1024px) {
  .ship-journey { padding-top: var(--space-24); }
  .ship-faq.faq { padding-block: var(--space-24); }
}
@media (max-width: 767px) {
  .ship-banner__head { padding-top: var(--space-6); }
  .ship-logo { min-height: var(--space-24); padding: var(--space-4); }
  .ship-roll { --ship-fade: var(--space-6); }
  .ship-logo--word { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .ship-open { padding-top: var(--space-12); }
  .ship-journey { padding-top: var(--space-16); }
  .ship-agents { padding-bottom: var(--space-16); }
  .ship-faq.faq { padding-block: var(--space-16); }
  .ship-reach__list li { white-space: normal; }
}