/* ============================================================
   Luxshine Hair — Section styles (appended per section)
   ============================================================ */

/* ========================= HEADER ========================= */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); box-shadow: var(--shadow-md); }
/* The header slides away on the way down the page and returns on the way up (js/main.js: headerHide).
   The slide lives in --header-slide: a rule that adds its own transitions lists this variable first,
   because a second `transition` declaration replaces the whole list and the header would snap. */
.site-header { --header-slide: transform .32s cubic-bezier(.32, .72, 0, 1); transition: var(--header-slide); }
.site-header.is-away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { --header-slide: transform 0s; } }

/* Tier 1 — announcement bar */
.topbar { background: var(--color-black-deep); color: var(--color-white); }
.topbar__inner {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-8);
  font-size: 14px; line-height: 24px;
}
.topbar__left { flex: 1; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.topbar__muted { opacity: .5; }
.topbar__strong { font-weight: 600; }
.topbar__center { flex: 1; text-align: center; }
.topbar__right { flex: 1; text-align: right; font-weight: 600; }

/* Tier 2 — navbar */
.navbar { background: var(--color-white); }
.navbar__inner {
  display: flex; align-items: center; gap: var(--space-10);
  padding: var(--space-2) var(--space-8);
}
.navbar__lang { flex: 1; }
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: var(--space-1); }
.lang__current { font-size: var(--nav-size); line-height: var(--nav-lh); font-weight: 600; color: var(--color-black); } /* 18px like the menu (comment cmvat1tzwzfgi) */
/* js/main.js stacks every language name, hidden, under the label: the slot is as wide as the longest one, so the
   button never changes size when the language changes (comment cmvathtfph5vm) */
.lang__slot { display: inline-grid; justify-items: start; align-items: center; }
.lang__slot > *, .lang__sizer > * { grid-area: 1 / 1; }
.lang__sizer { display: grid; visibility: hidden; }
.lang__sizer > *::after { content: ""; display: inline-block; width: 14px; margin-left: var(--space-1); } /* room for the arrow */
.lang__shown { display: inline-flex; align-items: center; gap: var(--space-1); }
.lang__chev { width: 14px; height: 14px; transition: transform .2s ease; }
.lang:hover .lang__chev, .lang:focus-within .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 110;
  min-width: 180px; background: var(--color-white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.lang:hover .lang__menu, .lang:focus-within .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 24px; color: var(--color-black);
  text-align: left; background: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.lang__item:hover, .lang__item:focus-visible { background: var(--color-black); color: var(--color-white); }
.lang__item[aria-current="true"] { font-weight: 700; }
.navbar__logo { display: block; flex-shrink: 0; }
.navbar__logo img { height: 48px; width: auto; object-fit: contain; }
.navbar__actions { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; }
.icon-btn img { width: 16px; height: 16px; }
.navbar__divider { width: 1px; height: 16px; background: var(--grey-500); }
.badge {
  position: absolute; top: -2px; right: -5px;
  min-width: 12px; height: 12px; padding: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0; background: var(--color-black);
  color: var(--color-white); font-size: 8px; font-weight: 600; line-height: 1;
}
.navbar__login { font-size: 16px; font-weight: 600; color: var(--color-black); }

/* ---- Account: avatar + hover dropdown (post-login) ---- */
.navbar__account { position: relative; display: flex; align-items: center; }
.navbar__avatar { display: grid; place-items: center; width: 28px; height: 28px; color: var(--color-black); }
.navbar__avatar-ico {
  width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url("../assets/icons/circle-user-round.svg") no-repeat center / contain;
          mask: url("../assets/icons/circle-user-round.svg") no-repeat center / contain;
}
.navbar__avatar:hover { color: var(--color-primary); }
.account-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 110;
  min-width: 208px; background: var(--color-white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.navbar__user:hover .account-menu,
.navbar__user:focus-within .account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.account-menu__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 24px; color: var(--color-black);
  text-align: left; background: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
/* default = transparent + dark text (like "Orders"); hover = dark panel + gold icon */
.account-menu__item:hover,
.account-menu__item:focus-visible { background: var(--color-black); color: var(--color-white); }
.account-menu__item:hover .account-menu__ico,
.account-menu__item:focus-visible .account-menu__ico { background: var(--color-primary); }
.account-menu__item--danger { color: var(--color-orange); background: var(--orange-50); }
.account-menu__item--danger:hover,
.account-menu__item--danger:focus-visible { background: var(--color-orange); color: var(--color-white); }
.account-menu__item--danger:hover .account-menu__ico,
.account-menu__item--danger:focus-visible .account-menu__ico { background: var(--color-white); }
.account-menu__ico {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
.account-menu__ico--user { -webkit-mask-image: url("../assets/icons/user.svg"); mask-image: url("../assets/icons/user.svg"); }
.account-menu__ico--lock { -webkit-mask-image: url("../assets/icons/lock.svg"); mask-image: url("../assets/icons/lock.svg"); }
.account-menu__ico--pin  { -webkit-mask-image: url("../assets/icons/map-pin.svg"); mask-image: url("../assets/icons/map-pin.svg"); }
.account-menu__ico--box  { -webkit-mask-image: url("../assets/icons/package.svg"); mask-image: url("../assets/icons/package.svg"); }
.account-menu__ico--out  { -webkit-mask-image: url("../assets/icons/log-out.svg"); mask-image: url("../assets/icons/log-out.svg"); }

/* Tier 3 — category menu */
.menubar { position: relative; background: var(--color-white); }
.menubar__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.has-mega { position: static; }
.menutab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: 14px; line-height: 24px; color: var(--color-font);
}
.menutab:hover { color: var(--color-primary); font-weight: 700; }
.menutab__chev { width: 16px; height: 16px; transition: transform .2s ease; }

/* ---- Mega dropdown (tabs with a chevron) ---- */
.has-mega:hover > .menutab,
.has-mega:focus-within > .menutab { color: var(--color-primary); }
.has-mega:hover .menutab__chev,
.has-mega:focus-within .menutab__chev { transform: rotate(180deg); }
.mega {
  position: absolute; top: 100%; left: 50%; right: auto; z-index: 105;
  width: 1200px; max-width: calc(100vw - 48px);
  background: var(--color-white);
  border: 1px solid var(--grey-300); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.has-mega.is-open > .menutab { color: var(--color-primary); }
.has-mega.is-open .menutab__chev { transform: rotate(180deg); }
/* Hover bridge: lấp khe giữa menutab và mega để di chuột xuống tab không bị đóng */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--space-4)); height: var(--space-4); }
/* dim backdrop behind an open mega */
.menu-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 17, 17, 0.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}
body:has(.menubar .has-mega:hover) .menu-backdrop,
body:has(.menubar .has-mega:focus-within) .menu-backdrop,
body:has(.menubar .has-mega.is-open) .menu-backdrop,
body:has([data-search-panel].is-open) .menu-backdrop { opacity: 1; visibility: visible; }
body:has([data-search-panel].is-open) .menu-backdrop { pointer-events: auto; }

/* ---- Search panel (the search icon in the header). Redesigned 2026-10-14 (user: "redesign lại page popup
   search này … dễ dùng, dễ nhìn, motion mạnh, micro interactive"): a sheet across the whole width under the
   header. One large field with only an underline, a gold line running across it while it holds the focus;
   on the left the recent searches and the product groups to jump to, on the right the results as square
   product cards that come up one after another (best sellers before anything is typed). Full screen on a
   phone. Behaviour: js/main.js (search). ---- */
.search-panel {
  --sp-line: color-mix(in srgb, var(--color-black) 16%, transparent);
  --sp-ease: cubic-bezier(.16, 1, .3, 1);
  position: absolute; top: 100%; left: 0; right: 0; z-index: 106;
  max-height: calc(100svh - 100%); overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-white); border-top: 1px solid var(--sp-line);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(calc(var(--space-4) * -1));
  transition: opacity .35s var(--sp-ease), transform .6s var(--sp-ease), visibility .35s;
}
.search-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.search-panel__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-12); max-width: var(--container-max); margin-inline: auto; padding: var(--space-12) var(--space-6) var(--space-16); }
.search-box { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-black); }
.search-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--sp-ease); }
.search-box:focus-within::after { transform: none; }
.search-box__ico { width: 32px; height: 32px; flex: none; background: var(--color-black); -webkit-mask: url("../assets/icons/search.svg") no-repeat center / contain; mask: url("../assets/icons/search.svg") no-repeat center / contain; }
.search-box__input { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; font-family: var(--font-body); font-size: var(--h3-size); line-height: var(--h3-lh); color: var(--color-black); }
.search-box__input::placeholder { color: var(--color-font); }
.search-box__input:focus { outline: none; }
.search-box__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-box__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; transition: transform .5s var(--sp-ease); }
.search-box__close:is(:hover, :focus-visible) { transform: rotate(90deg); }
.search-box__close:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
.search-box__close-ico { width: 24px; height: 24px; background: var(--color-black); -webkit-mask: url("../assets/icons/x.svg") no-repeat center / contain; mask: url("../assets/icons/x.svg") no-repeat center / contain; }
.search-panel__side { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.search-panel__main { grid-column: 6 / -1; min-width: 0; }
.search-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.search-sec__title { font-size: var(--body-size); line-height: var(--body-lh); font-weight: 600; color: var(--color-black); }
.search-sec__title strong { font-weight: 600; }
.search-sec__title em { font-style: normal; font-weight: 400; color: var(--color-font); }
.search-clear-all { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }
.search-clear-all:hover { color: var(--color-black); }
.search-clear-all__ico { width: 16px; height: 16px; background: currentColor; -webkit-mask: url("../assets/icons/trash-2.svg") no-repeat center / contain; mask: url("../assets/icons/trash-2.svg") no-repeat center / contain; }
/* Recent searches and product groups are chips: 44px tall, a hairline, gold under the pointer. */
.search-recent__list, .search-popular__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.search-recent__item { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--sp-line); transition: background-color .3s ease, border-color .3s ease, transform .3s var(--sp-ease); }
.search-recent__ico { width: 16px; height: 16px; flex: none; margin-left: var(--space-3); background: var(--color-font); -webkit-mask: url("../assets/icons/clock.svg") no-repeat center / contain; mask: url("../assets/icons/clock.svg") no-repeat center / contain; }
.search-recent__text { align-self: stretch; padding: 0 var(--space-2); background: none; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); text-align: left; cursor: pointer; }
.search-recent__remove { width: 40px; align-self: stretch; flex: none; display: grid; place-items: center; }
.search-recent__remove-ico { width: 14px; height: 14px; background: var(--color-font); -webkit-mask: url("../assets/icons/x.svg") no-repeat center / contain; mask: url("../assets/icons/x.svg") no-repeat center / contain; }
.search-recent__remove:is(:hover, :focus-visible) .search-recent__remove-ico { background: var(--color-black); }
.search-recent__item:has(.search-recent__text:is(:hover, :focus-visible)) { background: var(--color-primary); border-color: var(--color-primary); }
.search-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--sp-line); font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); transition: background-color .3s ease, border-color .3s ease, transform .3s var(--sp-ease); }
.search-chip:is(:hover, :focus-visible) { background: var(--color-primary); border-color: var(--color-primary); }
.search-chip:active, .search-recent__item:active { transform: scale(.97); }
:is(.search-chip, .search-recent__text, .search-recent__remove):focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
/* Results: square product cards, four to a row. */
.search-found__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.search-card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; color: var(--color-black); }
.search-card__media { position: relative; overflow: hidden; margin-bottom: var(--space-3); aspect-ratio: var(--ty-le-san_pham); background: var(--surface-beige); }
.search-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sp-ease); }
.search-card:is(:hover, :focus-visible) .search-card__media img { transform: scale(1.06); }
.search-card:focus-visible { outline: 2px solid var(--color-black); outline-offset: var(--space-1); }
.search-card__soldout { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--color-black) 45%, transparent); font-size: var(--body-size); font-weight: 600; color: var(--color-white); }
.search-card__badge { font-size: var(--caption-size); line-height: var(--caption-lh); font-weight: 600; color: var(--color-black); }
.search-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); background: linear-gradient(var(--color-primary), var(--color-primary)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--sp-ease); }
.search-card:is(:hover, :focus-visible) .search-card__title { background-size: 100% 2px; }
.search-card__stock { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--color-font); }
.search-card__stock--out { color: var(--color-error); }
.search-card__price { font-size: var(--body-size); line-height: var(--body-lh); }
.search-card__price strong { font-weight: 600; color: var(--color-black); }
.search-card__price s { margin-left: var(--space-2); color: var(--color-font); }
.search-empty { font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  /* Opening: the field, then the side column, then the results rise in turn. Each new set of results
     comes up card after card. */
  .search-panel.is-open :is(.search-box, .search-panel__side, .search-panel__main) { animation: sp-rise .7s var(--sp-ease) both; }
  .search-panel.is-open .search-panel__side { animation-delay: .08s; }
  .search-panel.is-open .search-panel__main { animation-delay: .16s; }
  .search-card { animation: sp-rise .6s var(--sp-ease) calc(var(--i, 0) * .06s) both; }
}
@media (prefers-reduced-motion: reduce) {
  .search-panel, .search-box::after, .search-box__close, .search-card__media img, .search-card__title { transition: none; }
}
@keyframes sp-rise { from { opacity: 0; transform: translateY(var(--space-6)); } }
@media (max-width: 1024px) {
  .search-panel__inner { row-gap: var(--space-8); padding-block: var(--space-8) var(--space-12); }
  .search-panel__side, .search-panel__main { grid-column: 1 / -1; }
  .search-panel__side { gap: var(--space-8); }
  /* Once something is typed the results come first, the side column under them. */
  .search-panel.has-query .search-panel__side { order: 2; }
}
/* Phone: the panel takes the whole screen, the field stays at its top. */
@media (max-width: 767px) {
  .search-panel { position: fixed; inset: 0; z-index: 120; max-height: none; border-top: 0; }
  html:has(.search-panel.is-open) { overflow: hidden; }
  .search-panel__inner { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-6) var(--space-12); }
  .search-box { position: sticky; top: 0; z-index: 1; padding-top: var(--space-3); background: var(--color-white); }
  .search-box__ico { width: 24px; height: 24px; }
  .search-box__input { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .search-found__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}
.mega__inner { display: flex; gap: var(--space-16); padding-block: var(--space-10); align-items: flex-start; }
.mega__links-wrap { flex: 1 1 auto; }
.mega__links { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: var(--space-3) var(--space-16); max-width: 540px; }
.mega__links a { font-size: 16px; line-height: 24px; color: var(--color-font); }
.mega__links a:hover { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mega__promos { flex: 0 0 auto; display: flex; gap: var(--space-6); }
.mega__promo { width: 184px; display: flex; flex-direction: column; gap: var(--space-2); }
.mega__promo-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--grey-100); }
.mega__promo-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mega__promo:hover .mega__promo-media img { transform: scale(1.04); }
.mega__promo-label { font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--color-orange); }
.mega__promo-title { font-family: var(--font-heading); font-size: 20px; line-height: 28px; text-transform: uppercase; color: var(--color-black); }

/* ===== Products mega: category sidebar (left) + switching panels (middle) + promos (right) ===== */
.mega:has(.pmega) { width: 1200px; }   /* wide enough for 3 columns — no text wrapping (user: 1200px); capped by .mega max-width: 100vw-48px */
.pmega { flex: 1 1 auto; display: flex; gap: var(--space-16); }
.pmega__cats { flex: 0 0 210px; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); border-right: 1px solid var(--grey-300); padding-right: var(--space-6); }
.pmega__cat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-black); transition: background-color .2s ease, color .2s ease; }
.pmega__cat.is-active { background: var(--color-primary); color: var(--color-black); }
.pmega__cat-arrow { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain; mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain; opacity: 0; transition: opacity .2s ease; }
.pmega__cat.is-active .pmega__cat-arrow { opacity: 1; }
button.pmega__cat { width: 100%; background: transparent; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
button.pmega__cat:not(.is-active):hover { color: var(--color-primary); }
.pmega__panels { flex: 1 1 auto; }
.pmega__list { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: var(--space-3); }
.pmega__list.is-active { display: flex; }
.pmega__list a { font-size: 16px; line-height: 24px; color: var(--color-font); }
.pmega__list a:hover, .pmega__list a:focus-visible { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ========================= HERO ========================= */
.hero {
  position: relative;
  min-height: 592px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--primary-100);
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__track {
  display: flex; height: 100%; width: 100%;
  touch-action: pan-y; cursor: grab;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.hero__track.is-dragging { transition: none; cursor: grabbing; }
.hero__slide { position: relative; flex: 0 0 100%; height: 100%; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__content { max-width: 568px; display: flex; flex-direction: column; align-items: flex-start; }
.hero__title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--h2-size); line-height: var(--h2-lh);
  color: var(--color-black);
  margin-bottom: var(--space-4);
}
.hero__text { margin-bottom: var(--space-8); color: var(--color-black); }
.hero__text p { font-size: 16px; line-height: 24px; }
.hero__text p + p { margin-top: var(--space-6); }
.hero__cta { border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; }

.hero__dots {
  position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-2); z-index: 1;
}
.hero__dots .dot {
  width: 12px; height: 12px; border-radius: 0; background: rgba(255,255,255,.6);
  padding: 0; border: 0; cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.hero__dots .dot:hover { background: rgba(255,255,255,.85); }
.hero__dots .dot--active { width: 64px; background: var(--color-primary); }
.hero__dots .dot--active:hover { background: var(--color-primary); }

/* ========================= STATS STRIP ========================= */
.stats { position: relative; background: var(--color-white); overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/images/stats-bg.png") center / cover no-repeat;
  opacity: .5;
}
.stats__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
  padding-top: var(--space-20); padding-bottom: var(--space-20);
}
/* New layout: left-aligned stats, each framed by a gold top rule (no vertical dividers) */
.stat {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-3);
  border-top: 3px solid var(--color-primary); padding-top: var(--space-6);
}
.stat__icon { width: 48px; height: 48px; margin-bottom: 0; }
.stat__num {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 40px; line-height: 48px; text-transform: uppercase;
  color: var(--color-black); white-space: nowrap;
}
.stat__label { margin-top: 0; font-size: 16px; line-height: 24px; color: var(--color-black); }

/* ===== Manufacturing Expertise (rebuilt stats section) ===== */
.stats.mfg::before { display: none; }
.mfg { background: var(--surface-beige); }
.mfg__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.mfg__metrics { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.mfg__stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) var(--space-6); }
.mfg__stat + .mfg__stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 80px; background: var(--border-subtle); }
/* Minimalist stats — editorial figures, no icons (redesign 2026-10-09) */
.mfg__stat-icon { display: none; }
.mfg__stat-num { font-family: var(--font-heading); font-weight: 400; font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: none; color: var(--color-black); white-space: nowrap; }
.mfg__stat-label { font-size: var(--caption-size); line-height: var(--caption-lh); text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-top: var(--space-1); }
.mfg__factory { max-width: 70ch; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.mfg__sub { font-family: var(--font-body); font-weight: 700; font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--color-black); }
.mfg__factory p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.mfg__video { width: 100%; max-width: 800px; aspect-ratio: var(--ty-le-video); overflow: hidden; background: var(--grey-500); }
.mfg__iframe { width: 100%; height: 100%; border: 0; display: block; }
.mfg__copy { max-width: 70ch; text-align: center; display: flex; flex-direction: column; gap: var(--space-4); }
.mfg__copy p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.mfg__arrow { width: 24px; height: 24px; background: var(--color-primary);
  -webkit-mask: url("../assets/icons/chevron-down.svg") no-repeat center / contain;
          mask: url("../assets/icons/chevron-down.svg") no-repeat center / contain;
  animation: mfg-bounce 1.4s ease-in-out infinite; }
@keyframes mfg-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .mfg__arrow { animation: none; } }
.mfg__steps-title { font-family: var(--font-heading); font-weight: 400; font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; color: var(--color-black); text-align: center; }
.mfg__steps { width: 100%; max-width: 800px; }
.mfg__tour { width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.mfg__tour-lead { max-width: 70ch; text-align: center; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.mfg__tour-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.mfg__tour-card { background: var(--color-white); padding: var(--space-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.mfg__tour-title { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; color: var(--color-black); }
.mfg__tour-card p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.mfg__tour-cta { border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; margin-top: auto; }

/* ===== Reusable centered section header (eyebrow + title) ===== */
.section { padding-block: var(--space-24); }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; }
.sec-head__eyebrow {
  font-family: var(--font-body); font-size: 16px; line-height: 24px;
  text-transform: uppercase; letter-spacing: 1.28px; color: var(--color-black);
}
.sec-head__title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 48px; line-height: 56px; text-transform: uppercase; color: var(--color-black);
}
/* gold highlight marker behind lower part of text */
.hl { background: linear-gradient(to top, var(--color-primary) 21px, transparent 21px); }

/* ========================= WHERE QUALITY TAKES SHAPE ========================= */
.quality__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.quality__grid {
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center;
}

/* Timeline steps */
.qsteps { display: flex; flex-direction: column; gap: var(--space-6); }
.qstep {
  --rail: var(--grey-400);
  position: relative;
  display: grid; grid-template-columns: 12px 1fr; gap: var(--space-6); align-items: start;
}
.qstep--active { --rail: var(--color-primary); }
.qstep:not(:last-child)::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: calc(-1 * var(--space-6));
  width: 2px; background: var(--rail);
}
.qstep__dot {
  position: relative; z-index: 1;
  width: 12px; height: 12px; margin-top: 10px; border-radius: 0;
  background: var(--color-white); border: 2px solid var(--rail);
}
.qstep--active .qstep__dot { background: var(--rail); }
/* Connector = arrow pointing to the title (reuses arrow-right.svg, recoloured
   via mask so it follows the rail colour: gold on active, grey otherwise). */
.qstep__dot::after {
  content: ""; position: absolute; left: 14px; top: -1px; width: 20px; height: 14px;
  background: var(--rail);
  -webkit-mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
  mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
}
.qstep__body { display: flex; flex-direction: column; gap: var(--space-2); }
.qstep__title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 24px; line-height: 32px; text-transform: uppercase; color: var(--color-black);
}
.qstep__text { font-size: 16px; line-height: 24px; color: var(--color-black-deep); }

/* Prose variant of the quality left column (replaces the step timeline) */
.quality__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.quality__copy p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black-deep); }
.quality__copy-lead {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black);
}
.quality__copy-sub {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--h5-size); line-height: var(--h5-lh);
  text-transform: uppercase; color: var(--color-black);
  margin-top: var(--space-2);
}

/* ---- Scroll-triggered reveal: dots, arrows and rail run down in order ---- */
.qsteps.anim-ready .qstep__dot { opacity: 0; transform: scale(0); transition: opacity .4s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), background-color .35s ease, border-color .35s ease; }
.qsteps.anim-ready .qstep__body { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.qsteps.anim-ready .qstep:not(:last-child)::before {
  transform: scaleY(0); transform-origin: top center; transition: transform .5s ease;
}
.qsteps.anim-ready.is-run .qstep__dot { opacity: 1; transform: scale(1); background: var(--color-primary); border-color: var(--color-primary); }
.qsteps.anim-ready.is-run .qstep__body { opacity: 1; transform: none; }
.qsteps.anim-ready.is-run .qstep:not(:last-child)::before { transform: scaleY(1); }
.qsteps.is-run .qstep:nth-child(1) { --qs-delay: 0s; }
.qsteps.is-run .qstep:nth-child(2) { --qs-delay: .30s; }
.qsteps.is-run .qstep:nth-child(3) { --qs-delay: .60s; }
.qsteps.is-run .qstep:nth-child(4) { --qs-delay: .90s; }
.qsteps.is-run .qstep:nth-child(5) { --qs-delay: 1.20s; }
.qsteps.anim-ready.is-run .qstep__dot,
.qsteps.anim-ready.is-run .qstep__body { transition-delay: var(--qs-delay); }
.qsteps.anim-ready.is-run .qstep:not(:last-child)::before { transition-delay: calc(var(--qs-delay) + .12s); }

/* 5-step production — zig-zag timeline with media (user 2026-10-12, khuôn mfg-timeline) */
.mfg__steps.mtl { position: relative; max-width: 100%; margin-inline: auto; gap: var(--space-16); }
.mtl::before { content: ""; position: absolute; left: 50%; top: var(--space-2); bottom: var(--space-2); width: 2px; transform: translateX(-50%); background: var(--primary-200); z-index: 0; }
/* Task 24 — thanh progress "vàng đậm" vẽ từ trên xuống (đè lên line nhạt) */
/* Thanh fill + runner KÉO THEO SCROLL: cao/vị trí = --mtl-progress (0..1) do main.js set theo scroll (user 2026-10-12) */
.mtl::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: var(--space-2); width: 2px; height: calc((100% - 2 * var(--space-2)) * var(--mtl-progress, 0)); background: var(--color-primary); z-index: 0; transition: height .12s linear; }
/* Shape chữ nhật (bỏ stroke) bám đáy thanh fill, chạy xuống theo scroll */
.mtl__runner { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--space-2) + (100% - 2 * var(--space-2)) * var(--mtl-progress, 0)); width: 12px; height: 16px; background: var(--color-primary); z-index: 3; list-style: none; margin-top: -8px; transition: top .12s linear; }
@media (prefers-reduced-motion: reduce) { .mtl::after, .mtl__runner { transition: none; } }
.mtl .mtl__step { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--space-10); }
.mtl__media { grid-column: 1; aspect-ratio: var(--ty-le-blog); overflow: hidden; background: var(--primary-100); border: 1px solid var(--border-subtle); }
.mtl__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtl__dot { display: none; } /* bỏ dot từng step (user 2026-10-12) — giữ trục + runner */
.mtl__content { grid-column: 3; display: flex; flex-direction: column; gap: var(--space-2); }
.mtl__num { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--color-primary); }
.mtl__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; color: var(--color-black); }
.mtl__text { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black-deep); }
/* zig-zag: dòng chẵn đổi bên media/content */
.mtl__step:nth-child(even) .mtl__media { grid-column: 3; }
.mtl__step:nth-child(even) .mtl__content { grid-column: 1; grid-row: 1; text-align: right; align-items: flex-end; }
/* reveal — tái dùng hook JS .qsteps anim-ready/is-run; JS tự bỏ qua khi prefers-reduced-motion */
/* Reveal PER-STEP: mỗi step hiện khi scroll tới nó (JS gắn .is-in), không hiện cả cụm (user 2026-10-12) */
.qsteps.anim-ready .mtl__step .mtl__media { opacity: 0; transform: translateX(-24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }
.qsteps.anim-ready .mtl__step .mtl__content { opacity: 0; transform: translateX(24px); transition: opacity .6s ease .08s, transform .6s cubic-bezier(.2,.6,.2,1) .08s; }
.qsteps.anim-ready .mtl__step:nth-child(even) .mtl__media { transform: translateX(24px); }
.qsteps.anim-ready .mtl__step:nth-child(even) .mtl__content { transform: translateX(-24px); }
.qsteps.anim-ready .mtl__step.is-in .mtl__media,
.qsteps.anim-ready .mtl__step.is-in .mtl__content { opacity: 1; transform: none; }
@media (max-width: 768px) {
  .mfg__steps.mtl { max-width: 100%; gap: var(--space-10); }
  .mtl::before, .mtl::after, .mtl__runner { left: 6px; }
  .mtl .mtl__step { grid-template-columns: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-3); align-items: start; }
  .mtl__dot { grid-column: 1; grid-row: 1 / span 2; margin-top: var(--space-1); }
  .mtl__media, .mtl__step:nth-child(even) .mtl__media { grid-column: 2; grid-row: 1; }
  .mtl__content, .mtl__step:nth-child(even) .mtl__content { grid-column: 2; grid-row: 2; text-align: left; align-items: flex-start; }
  .qsteps.anim-ready .mtl__media, .qsteps.anim-ready .mtl__content,
  .qsteps.anim-ready .mtl__step:nth-child(even) .mtl__media, .qsteps.anim-ready .mtl__step:nth-child(even) .mtl__content { transform: translateY(20px); }
}

/* Video */
.quality__video {
  position: relative; aspect-ratio: 16 / 9; overflow: visible;
  background: var(--grey-500);
}
.quality__video > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.quality__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.play-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 0; background: var(--color-black);
  display: grid; place-items: center;
  transition: transform .2s ease;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.06); }
.play-btn img { width: 20px; height: 20px; }
.round-badge {
  position: absolute; top: -50px; right: -50px; z-index: 3;
  width: 100px; height: 100px;
  transform-origin: 50% 50%;
  animation: round-badge-spin 16s linear infinite;
}
@keyframes round-badge-spin { to { transform: rotate(360deg); } }
.round-badge__text {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase; fill: var(--color-primary);
}

/* ===== Left-aligned section header variant ===== */
.sec-head--left { align-items: flex-start; text-align: left; }

/* ========================= BEAUTY OF AUTHENTIC REMY HAIR ========================= */
.beauty {
  position: relative; background: var(--surface-beige);
  display: grid; grid-template-columns: 5fr 6fr; align-items: stretch;
}
/* Left column: product photo filling the column height */
.beauty__media { position: relative; overflow: hidden; min-height: 600px; }
.beauty__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Right column: text content */
.beauty__inner {
  max-width: none; margin: 0;
  padding: var(--space-24) var(--space-20);
  display: block;
}
.beauty__content {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
}
.beauty__subhead {
  max-width: 60ch;
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black);
}
.beauty__list { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }
.beauty__list li { display: flex; flex-direction: column; gap: var(--space-2); }
.beauty__list h3 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 24px; line-height: 32px; text-transform: uppercase; color: var(--color-black);
}
.beauty__list p { font-size: 16px; line-height: 24px; color: var(--color-black); }

/* Beauty — multi-group editorial content (quality tiers + full-end standard) */
.beauty__body { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; }
.beauty__intro { max-width: 65ch; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.beauty__group { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.beauty__group-title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--color-black);
}
.beauty__group-lead { max-width: 65ch; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
/* Quality tiers — 3 square cards (MS / L / PL), PL featured in gold */
.btiers {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
.btier {
  display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box;
  background: var(--surface-beige); border: 1px solid var(--border-subtle);
  padding: var(--space-4);
}
.btier:first-child { background: var(--color-primary); }
.btier--featured { border-top-color: var(--color-primary); background: var(--color-primary); }
.btier--featured .btier__name, .btier--featured .btier__desc { color: var(--color-black); }
/* Quality-standards page: tier cards stay beige (user chốt 2026-10-09) */
.info-tiers .btier:first-child { background: var(--surface-beige); }
.info-tiers .btier--featured { background: var(--surface-beige); }
/* Home btiers: ô giữa (tier 2 — LUXURY) fill vàng đặc như tier nổi bật (user 2026-10-12) */
.btiers:not(.info-tiers) .btier:nth-child(2) { background: var(--color-primary); }
.btiers:not(.info-tiers) .btier:nth-child(2) .btier__name,
.btiers:not(.info-tiers) .btier:nth-child(2) .btier__desc { color: var(--color-black); }
.btier__badge {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 28px; padding: 0 var(--space-2);
  background: var(--color-black); color: var(--color-white);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: 1px;
}
.btier--featured .btier__badge { background: var(--color-black); color: var(--color-white); }
.btier__name {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--body-size); line-height: var(--body-lh);
  text-transform: uppercase; color: var(--color-black);
}
.btier__desc { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }

/* Full-end standard — 4-step thickness scale (natural-thin -> ultra-thick) */
.bstd { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.bstd__scale {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); align-items: end;
}
.bstd__step { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.bstd__bar { width: 100%; background: var(--primary-300); border-bottom: 3px solid var(--color-primary); }
.bstd__step--max .bstd__bar { background: var(--color-primary); }
.bstd__label {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black);
}
.bstd__ends { display: flex; justify-content: space-between; width: 100%; }
.bstd__end {
  font-size: var(--caption-size); line-height: var(--caption-lh);
  text-transform: uppercase; letter-spacing: 1px; color: var(--color-font);
}

/* ========================= SHOP BY CATEGORY ========================= */
.category { background: var(--color-white); }
.category__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.category__grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.cat-card { display: flex; flex-direction: column; color: inherit; }
.cat-card__media {
  position: relative; display: block; aspect-ratio: 1 / 1;
  background: var(--grey-100); overflow: hidden;
}
.cat-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.cat-card__media img.is-flip-x { transform: scaleX(-1); }
.cat-card:hover .cat-card__media img { transform: scale(1.04); }
.cat-card:hover .cat-card__media img.is-flip-x { transform: scaleX(-1) scale(1.04); }
.cat-card__label {
  height: 40px; display: flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--color-black); color: var(--color-white);
  font-size: 16px; font-weight: 600; line-height: 24px; white-space: nowrap; text-align: center;
  transition: background-color .25s ease, color .25s ease;
}
/* Default = black box. Hover/focus anywhere on the card = gold box + arrow. */
.cat-card:hover .cat-card__label,
.cat-card:focus-visible .cat-card__label { background: var(--color-primary); color: var(--color-black); }
.cat-card__label::after {
  content: ""; flex: none; width: 0; height: 16px; margin-left: 0;
  background: currentColor;
  -webkit-mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
          mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
  opacity: 0; transition: width .25s ease, margin-left .25s ease, opacity .25s ease;
}
.cat-card:hover .cat-card__label::after,
.cat-card:focus-visible .cat-card__label::after { width: 16px; margin-left: var(--space-2); opacity: 1; }
.category__all { border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; }
.blog__all { align-self: center; border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; }

/* ========================= OEM & ODM SERVICES ========================= */
.oem { background: var(--surface-beige); }
.oem__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.oem__intro { position: sticky; top: var(--space-24); align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.oem__lead { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black-deep); }
.oem__start-head {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--h6-size); line-height: var(--h6-lh); text-transform: uppercase; color: var(--color-black);
}
.oem__start { width: 100%; display: flex; flex-direction: column; gap: var(--space-6); }
.oem-start { display: flex; flex-direction: column; gap: var(--space-2); }
.oem-start__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--body-size); line-height: var(--body-lh); text-transform: uppercase; color: var(--color-black);
}
.oem-start p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black-deep); }
.oem__cta { align-self: flex-start; border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; margin-top: var(--space-2); }

/* Right column: cards stack on scroll (earlier card stays on top) */
.oem__stack { display: flex; flex-direction: column; gap: var(--space-8); }
.oem__stack .oem-card { position: sticky; }
.oem__stack .oem-card:nth-child(1) { top: calc(var(--space-30) + var(--space-6) + var(--space-4)); z-index: 1; }
.oem__stack .oem-card:nth-child(2) { top: calc(var(--space-30) + var(--space-6) + var(--space-10)); z-index: 2; }
.oem__stack .oem-card:nth-child(3) { top: calc(var(--space-30) + var(--space-6) + var(--space-16)); z-index: 3; }
.oem__stack .oem-card:nth-child(4) { top: calc(var(--space-30) + var(--space-6) + var(--space-20)); z-index: 4; }
.oem-card {
  position: relative; aspect-ratio: 400 / 300; overflow: hidden; background: var(--color-white);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.oem-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Dark backing now lives on the content so it is ALWAYS as tall as the text
   (fades out over the top --space-12). Fixed-height scrim no longer needed. */
.oem-card__scrim { display: none; }
.oem-card__content {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-2);
  color: var(--color-white);
  padding: var(--space-12) var(--space-6) var(--space-6);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-black-deep) 62%, transparent),
    color-mix(in srgb, var(--color-black-deep) 62%, transparent) calc(100% - var(--space-12)),
    transparent);
}
.oem-card__content h3 { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 32px; text-transform: uppercase; color: var(--color-white); }
.oem-card__content p { font-size: 16px; line-height: 24px; }

/* ========================= BUYING PROCESS ========================= */
.buying { background: var(--surface-beige); }
.buying__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.buying__lead { max-width: 56ch; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
/* Snake timeline: 3 columns, row 1 L->R, row 2 R->L; square dots fill + steps reveal in sequence */
.buying__steps { position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) var(--space-10); }
.buying__track, .buying__progress { display: none; }
.buying-step { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.buying-step__icon { display: block; position: relative; z-index: 1; width: 48px; height: 48px; margin: 0; }
.buying-step__node { display: none; }
/* Square dot on top (no circular motifs per DS) */
.buying-step__node {
  position: static; order: -1; left: auto; top: auto;
  width: 16px; height: 16px; border-radius: 0;
  border: 2px solid var(--grey-500); background: var(--color-white);
  display: none; place-items: center;
  transition: background-color .3s ease, border-color .3s ease;
}
.buying-step__node::after {
  content: ""; width: 10px; height: 10px; background: var(--color-white);
  -webkit-mask: url("../assets/icons/check.svg") no-repeat center / contain;
          mask: url("../assets/icons/check.svg") no-repeat center / contain;
  opacity: 0; transition: opacity .3s ease;
}
/* Normal left-to-right order (1-6), revealed in sequence */
.buying-step:nth-of-type(1) { --node-delay: 0s; }
.buying-step:nth-of-type(2) { --node-delay: .25s; }
.buying-step:nth-of-type(3) { --node-delay: .5s; }
.buying-step:nth-of-type(4) { --node-delay: .75s; }
.buying-step:nth-of-type(5) { --node-delay: 1s; }
.buying-step:nth-of-type(6) { --node-delay: 1.25s; }
.buying-step { opacity: 0; transform: translateY(16px); }
.buying__steps.is-run .buying-step { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; transition-delay: var(--node-delay); }
.buying__steps.is-run .buying-step__node { background: var(--color-primary); border-color: var(--color-primary); transition-delay: var(--node-delay); }
.buying__steps.is-run .buying-step__node::after { opacity: 1; transition-delay: var(--node-delay); }
@media (prefers-reduced-motion: reduce) { .buying-step { opacity: 1; transform: none; } }
.buying-step__body { display: flex; flex-direction: column; gap: var(--space-2); }
.buying-step__body h3 { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 32px; text-transform: uppercase; color: var(--color-black); }
.buying-step__body p { font-size: 16px; line-height: 24px; color: var(--color-black); }
.buying__cta { border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; }
/* hover -> gold (black text keeps AA contrast on gold) */
.buying__cta:hover { background: var(--color-primary); color: var(--color-black); }
.buying__scroll-hint {
  display: block; align-self: center; width: 24px; height: 24px; background: var(--color-black);
  -webkit-mask: url("../assets/icons/chevron-down.svg") no-repeat center / contain;
          mask: url("../assets/icons/chevron-down.svg") no-repeat center / contain;
  animation: buying-bounce 1.4s ease-in-out infinite;
}
@keyframes buying-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .buying__scroll-hint { animation: none; } }

/* Customer Tier comparison table */
.tier { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.tier__table-wrap { width: 100%; overflow-x: auto; }
/* The look is the shared table (.dtable, at the end of this file): no frame, and Tier 5 is its gold
   column (.dtable__best). Here the tier columns are centred under their heads, and the ticks in the
   gold column turn black. */
.tier__table { min-width: 720px; }
.tier__table th, .tier__table td { text-align: center; vertical-align: middle; }
.tier__table tr > :first-child { text-align: left; }
.tier__table .dtable__best .tier__yes { background: var(--color-black); }
.tier__yes {
  display: inline-block; width: 20px; height: 20px; background: var(--color-success);
  -webkit-mask: url("../assets/icons/check.svg") no-repeat center / contain;
          mask: url("../assets/icons/check.svg") no-repeat center / contain;
}
.tier__x {
  display: inline-block; width: 20px; height: 20px; background: var(--color-error);
  -webkit-mask: url("../assets/icons/x.svg") no-repeat center / contain;
          mask: url("../assets/icons/x.svg") no-repeat center / contain;
}

/* ========================= SALES CONSULTANTS ========================= */
.consult { background: var(--color-white); }
.consult__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); padding-inline: 0; }
.consult__lead { max-width: 70ch; text-align: center; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.consult__carousel { position: relative; width: 100%; display: flex; align-items: center; gap: var(--space-4); }
.consult__grid { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; list-style: none; }
.consult__grid::-webkit-scrollbar { display: none; }
.consult__nav { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--color-black); border: 0; cursor: pointer; }
.consult__nav:hover { background: var(--color-primary); }
.consult__nav-ico { width: 16px; height: 16px; background: var(--color-white);
  -webkit-mask: url("../assets/icons/chevron-left.svg") no-repeat center / contain;
          mask: url("../assets/icons/chevron-left.svg") no-repeat center / contain; }
.consult__nav--next .consult__nav-ico { -webkit-mask-image: url("../assets/icons/chevron-right.svg"); mask-image: url("../assets/icons/chevron-right.svg"); }
.consult__nav:hover .consult__nav-ico { background: var(--color-black); }
.consult-card { flex: 0 0 calc((100% - var(--space-6) * 3) / 4); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-cream); }
@media (max-width: 1024px) { .consult-card { flex: 0 0 calc((100% - var(--space-6)) / 2); } }
.consult-card__photo { display: block; width: 100%; aspect-ratio: var(--ty-le-avatar); background: var(--primary-200); overflow: hidden; }
.consult-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.consult-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }
.consult-card__name { font-family: var(--font-heading); font-weight: 400; font-size: var(--h6-size); line-height: var(--h6-lh); text-transform: uppercase; color: var(--color-black); }
.consult-card__role { font-size: var(--body-size); line-height: var(--body-lh); color: var(--text-secondary); }
.consult-card__meta { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.consult-card__cta { align-self: flex-start; margin-top: var(--space-2); border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; }

/* ========================= REVIEWS ========================= */
.review { background: var(--surface-beige); }
/* Feedback screenshots — auto-sliding 9:16 marquee */
.review__scroller { width: 100%; margin-top: var(--space-10); --marquee-dur: 40s; }
.review__row { display: flex; width: max-content; list-style: none; }
.review__row .feedback-shot { margin-right: var(--space-6); flex: none; }
.feedback-shot__media { display: block; height: 480px; aspect-ratio: var(--ty-le-feedback); background: var(--primary-200); overflow: hidden; }
.feedback-shot__media img { width: 100%; height: 100%; object-fit: cover; }
.review__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.review__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.review-card { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-cream); padding: var(--space-8); }
.review-card__stars { display: inline-flex; gap: var(--space-1); }
.review-card__star {
  display: inline-block; width: 20px; height: 20px; background: var(--color-primary);
  -webkit-mask: url("../assets/icons/stat-star.svg") no-repeat center / contain;
          mask: url("../assets/icons/stat-star.svg") no-repeat center / contain;
}
.review-card__quote { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.review-card__author {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--h6-size); line-height: var(--h6-lh); text-transform: uppercase; color: var(--color-black);
}

/* ========================= THE LUXSHINE DIFFERENCE ========================= */
.diff { background: var(--color-white); }
/* row height fits the image's natural height (image not stretched/cropped) */
.diff__row { display: flex; align-items: center; gap: var(--space-16); }
.diff__media { flex: 0 0 42%; overflow: hidden; }
.diff__media img { width: 100%; height: auto; display: block; }
.diff__content {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-24) var(--page-margin) var(--space-24) 0;
}
.diff__accordion { display: flex; flex-direction: column; gap: var(--space-4); }
.diff-item { background: var(--surface-beige); }
.diff-item[open] { background: var(--color-primary); }
.diff-item__summary {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--space-4); align-items: center;
  padding: var(--space-4); cursor: pointer; list-style: none;
}
.diff-item__summary::-webkit-details-marker { display: none; }
.diff-item--static .diff-item__summary { cursor: default; }
.diff-item__num, .diff-item__title {
  font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 32px;
  text-transform: uppercase; color: var(--color-black);
}
.diff-item__chev { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.diff-item__chev img { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .25s ease; }
.diff-item[open] .diff-item__chev img { transform: rotate(-90deg); }
.diff-item__body { padding: 0 64px var(--space-4) 62px; }
.diff-item__body p { font-size: 16px; line-height: 24px; color: var(--color-black); }

/* Diff — prose variant (Why salons work with Luxshine) */
.diff__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.diff__copy > p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.diff__points { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; counter-reset: diffp; }
.diff__points li { counter-increment: diffp; }
.diff__point-title {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--h6-size); line-height: var(--h6-lh);
  text-transform: uppercase; color: var(--color-black);
}
.diff__points .diff__point-title::before { content: counter(diffp) ". "; color: var(--color-primary); }
.diff__points li p, .diff__ship p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); margin-top: var(--space-1); }
.diff__ship { display: flex; flex-direction: column; }
.diff__cta { align-self: flex-start; border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; }

/* ========================= FAQ ========================= */
.faq { background: var(--color-white); }
.faq__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.faq__list { width: 100%; max-width: 800px; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
}
.faq-item__summary::-webkit-details-marker { display: none; }
/* The question's type is the blog card title's (one rule, further down: .blog-card__text h3, .faq-item__q). */
.faq-item__q { color: var(--color-black); }
.faq-item__chev { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.faq-item__chev img { width: 16px; height: 16px; transition: transform .25s ease; }
.faq-item[open] .faq-item__chev img { transform: rotate(180deg); }
.faq-item[open] .faq-item__q { color: var(--color-primary); }
/* An open question sits 8px above its answer (user 2026-10-14, every page). */
.faq-item[open] > .faq-item__summary { padding-bottom: var(--space-2); }
.faq-item__body { padding: 0 0 var(--space-5); }
.faq-item__body p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black-deep); max-width: 70ch; }

/* ========================= BEAUTIFUL HAIR, THOUGHTFULLY SOURCED ========================= */
.sourced { background: var(--color-white); }
.sourced__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.sourced__lead { max-width: 60ch; margin: var(--space-4) auto 0; text-align: center; font-size: var(--body-size); line-height: var(--body-lh); color: var(--text-secondary); }
.sourced__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.sourced-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.sourced-card__media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: #fbfbfb; overflow: hidden; }
.sourced-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sourced-card__text { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.sourced-card__text h3 { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 32px; text-transform: uppercase; color: var(--color-black); }
.sourced-card__text p { font-size: 16px; line-height: 24px; color: var(--color-black-deep); max-width: 359px; }

/* ========================= STANDARDS YOU CAN TRUST ========================= */
.standards { background: var(--color-white); display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-24); }
.standards .standards__inner { padding-block: 0; }
.sec-head__title-alt { color: var(--color-font); }
/* ---- Shared auto-scroll marquee (no visible scrollbar, seamless loop) ---- */
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.marquee::-webkit-scrollbar { width: 0; height: 0; display: none; }
.marquee.is-marquee { overflow: hidden; }
.marquee.is-marquee .marquee__track { animation: marquee-x var(--marquee-dur, 50s) linear infinite; }
.marquee.is-marquee:hover .marquee__track,
.marquee.is-marquee:focus-within .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee.is-marquee { overflow-x: auto; }
  .marquee.is-marquee .marquee__track { animation: none; }
}

.standards__scroller { width: 100%; padding-bottom: var(--space-2); --marquee-dur: 55s; }
.standards__row { display: flex; width: max-content; }
.standards__row .cert-card { margin-right: var(--space-6); }
.cert-card { flex: 0 0 332px; display: flex; flex-direction: column; gap: var(--space-4); }
.cert-card__media { position: relative; width: 332px; height: 478px; overflow: hidden; padding: 7px 5px; }
.cert-card__media--dark { background: var(--color-black); }
.cert-card__media--grey { background: var(--grey-500); }
.cert-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-card__text { display: flex; flex-direction: column; gap: var(--space-1); }
.cert-card__text h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 28px;
  text-transform: uppercase; color: var(--color-black);
}
.cert-card__text p { font-size: 16px; line-height: 24px; color: var(--color-black); opacity: .5; }

/* ========================= CONTACT US / WHOLESALE INQUIRY ========================= */
.contact { position: relative; background: var(--color-white); overflow: hidden; }
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/images/stats-bg.png") center / cover no-repeat; opacity: .5;
}
/* 24px side margins on every page that has the block (comment cmvori2a39d4w: on a phone Category's form ran edge to edge;
   the Remy-family pages had added this margin themselves). */
.contact__inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: start; gap: var(--space-16); max-width: 1400px; margin-inline: auto; padding-inline: var(--space-6); }
.contact__info { flex: 0 1 auto; max-width: 480px; display: flex; flex-direction: column; gap: var(--space-10); }
.contact__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.contact__subhead { font-family: var(--font-body); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--color-black); }
.contact__benefits { display: flex; flex-direction: column; gap: var(--space-4); }
.contact__benefits li { display: flex; gap: var(--space-2); align-items: flex-start; }
.contact__benefits li img { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.contact__benefits h3 { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 32px; text-transform: uppercase; color: var(--color-black); }
.contact__benefits p { font-size: 16px; line-height: 24px; color: var(--color-black); }

.contact__form { flex: 0 0 569px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 900px) { .contact__inner { flex-direction: column; } .contact__info, .contact__form { flex: 1 1 auto; max-width: none; width: 100%; } }
.contact__title { font-family: var(--font-body); font-weight: 700; font-size: 40px; line-height: 48px; text-transform: uppercase; color: var(--color-black); text-align: center; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
.field { display: flex; flex-direction: column; gap: var(--space-1); position: relative; }
.field label { font-size: 14px; line-height: 24px; color: var(--color-font); }
.field .req { color: var(--color-error); }
.field input, .field select, .field textarea {
  width: 100%; border: none; border-bottom: 1px solid var(--color-black);
  background: rgba(255,255,255,0.04); padding: 0 0 var(--space-2);
  font-size: 16px; line-height: 26px; color: var(--color-black); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 44px; }
.field input::placeholder, .field textarea::placeholder { color: var(--grey-600); }
.field--active input { border-bottom-color: var(--color-primary); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--color-primary); }
.field--select select { appearance: none; -webkit-appearance: none; padding-right: 24px; cursor: pointer; }
.field__chev { position: absolute; right: 0; bottom: 10px; width: 16px; height: 16px; pointer-events: none; transition: transform .2s ease; }

/* Custom styled select — dropdown matches the account menu, native select kept for the form */
.field .cselect__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; pointer-events: none; }
.cselect__trigger {
  width: 100%; text-align: left; background: rgba(255, 255, 255, 0.04);
  border: none; border-bottom: 1px solid var(--color-black); border-radius: 0;
  padding: 0 24px var(--space-2) 0; font-size: 16px; line-height: 26px; color: var(--color-black); cursor: pointer;
}
.cselect__trigger:focus { outline: none; border-bottom-color: var(--color-primary); }
/* Keeps the trigger as tall as a text input when nothing is chosen and the placeholder is blank */
.cselect__value { display: block; min-height: 26px; }
[data-cselect].is-open .cselect__trigger { border-bottom-color: var(--color-primary); }
[data-cselect].is-open .field__chev { transform: rotate(180deg); }
.cselect__value--placeholder { color: var(--grey-600); }
.cselect__menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: var(--color-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
  max-height: 240px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
[data-cselect].is-open .cselect__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cselect__option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 24px; color: var(--color-black);
  text-align: left; background: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.cselect__option:hover, .cselect__option:focus-visible { background: var(--color-black); color: var(--color-white); }
.cselect__option.is-selected { font-weight: 700; }
.contact__submit { border-radius: 0; width: 100%; padding: var(--space-3) var(--space-6); height: 40px; margin-top: var(--space-2); }

/* ========================= PARTNERSHIPS BUILT ON TRUST (PRESS) ========================= */
.press { background: var(--primary-100); }
.press__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.press__scroller { width: 100%; margin-top: var(--space-10); --marquee-dur: 40s; }
.press__logos { display: flex; align-items: center; width: max-content; }
.press__logos img { height: 52px; width: auto; max-width: 210px; object-fit: contain; display: block; margin-right: var(--space-16); }

/* ===== Small uppercase label link (Read more / See all) ===== */
.label-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 24px;
  text-transform: uppercase; color: var(--color-black);
  transition: color .25s ease, gap .25s ease;
}
/* arrow recolours with the text (masked icon follows currentColor) */
.label-link__arrow {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
          mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
}
.label-link img { width: 16px; height: 16px; }
.label-link:hover, .label-link:focus-visible { gap: var(--space-3); color: var(--color-primary); }
/* "Read more" turns gold (text + icon) when hovering anywhere on the blog card */
.blog-card:hover .blog-card__more,
.blog-card:focus-within .blog-card__more { color: var(--color-primary); gap: var(--space-3); }

/* ========================= INSIGHTS, STORIES & WHAT'S NEW (BLOG) ========================= */
.blog { background: var(--color-white); border-top: 1px solid var(--color-primary); }
.blog__inner { display: flex; flex-direction: column; gap: var(--space-10); }
.blog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.blog__carousel { position: relative; }
.blog__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); align-items: stretch; }
.blog-card { display: flex; flex-direction: column; gap: var(--space-4); }
.blog-card__media { position: relative; display: block; width: 100%; aspect-ratio: 400 / 300; background: var(--grey-500); overflow: hidden; }
.blog-card__media--shadow { box-shadow: var(--shadow-lg); }
.blog-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card__media:hover img { transform: scale(1.04); }
.blog-card__text { display: flex; flex-direction: column; gap: var(--space-2); }
/* "H3 18": sans bold 18/26, upper case. Blog card titles and FAQ questions share it (user 2026-10-14). */
.blog-card__text h3, .faq-item__q { font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 26px; text-transform: uppercase; color: var(--color-black); }
.blog-card__text time { font-size: 12px; line-height: 16px; color: var(--color-font); }
.blog-card__text p { font-size: 16px; line-height: 24px; color: var(--color-black); opacity: .7; }
.blog-card__more { margin-top: auto; }

.carousel-btn {
  position: absolute; top: 124px; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center;
  box-shadow: 0 0 12px rgba(17,17,17,.12);
}
.carousel-btn img { width: 16px; height: 16px; }
.carousel-btn--prev { left: -20px; background: var(--color-white); }
.carousel-btn--prev img { transform: rotate(180deg); }
.carousel-btn--next { right: -20px; background: var(--color-black); }
.carousel-btn--next img { filter: invert(1); }

/* ========================= LUXSHINE HAIR'S SOCIAL ========================= */
.social { background: var(--color-white); display: flex; flex-direction: column; gap: var(--space-10); padding-top: 0; }
.social .social__head-wrap { padding-block: 0; }
.social__scroller { width: 100%; padding-bottom: var(--space-2); --marquee-dur: 48s; }
.social__row { display: flex; width: max-content; }
.social__row .social-card { margin-right: var(--space-6); }
.social-card { position: relative; flex: none; height: 452px; overflow: hidden; background: #ccc; }
.social-card--narrow { width: 254px; }
.social-card--wide { width: 339px; }
.social-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.social-card__btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 56px; height: 56px; border-radius: 0; display: grid; place-items: center;
}
.social-card__btn img { width: 20px; height: 20px; }
.social-card__btn--play { background: var(--color-black); }
.social-card__btn--link { background: var(--color-primary); }
.social__cta { display: flex; gap: var(--space-2); align-items: center; justify-content: center; }
.social__fb, .social__ig { border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; }
.social__fb { border-color: var(--grey-400); }

/* ========================= FOOTER ========================= */
.footer {
  position: relative; overflow: hidden; background: var(--color-black);
  color: var(--color-white);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  padding: var(--space-24) var(--space-24) var(--space-8);
}
.footer__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: color-dodge; opacity: .6; }
.footer__top { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); }
.footer__logo img { height: 64px; width: auto; }
.footer__cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.footer__cta h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 48px; text-transform: uppercase; color: var(--color-white); }
.footer__cta p { font-size: 16px; line-height: 24px; color: #f8f8f8; }
.footer__cta-btn { background: var(--color-white); color: var(--color-black); border-radius: 0; padding: var(--space-3) var(--space-6); height: 40px; margin-top: var(--space-2); }
.footer__cta-btn:hover { background: var(--color-primary); color: var(--color-black); }
.footer__links { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; justify-content: center; }
.footer__links a { font-size: 16px; line-height: 26px; color: var(--color-white); transition: color .2s ease; }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--color-primary); font-weight: 700; text-decoration: underline; }
.footer__sep { width: 1px; height: 12px; background: rgba(255,255,255,.4); }
.footer__bottom {
  position: relative; z-index: 1; width: 100%;
  border-top: 1px solid rgba(255,255,255,.25); padding-top: var(--space-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.footer__copy { font-size: 16px; line-height: 26px; color: var(--color-white); }
.footer__copy strong { font-weight: 600; }
.footer__social { display: flex; gap: var(--space-2); align-items: center; }
.soc { width: 32px; height: 32px; display: grid; place-items: center; }
.soc img { display: block; }
.soc--ring { border: 1px solid rgba(255,255,255,.25); border-radius: 0; }

/* ========================= ENTRY POPUP ========================= */
.promo-modal {
  width: min(880px, calc(100vw - 32px)); max-width: 880px;
  max-height: calc(100vh - 40px); padding: 0; margin: auto;
  border: none; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--color-white); color: var(--color-black);
}
.promo-modal::backdrop { background: rgba(20, 20, 20, .55); }
.promo-modal__grid { display: grid; grid-template-columns: 1fr 1fr; max-height: calc(100vh - 40px); }
.promo-modal__form-col { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; }
.promo-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 3;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .85);
}
.promo-modal__close:hover { background: var(--color-white); }
.promo-modal__close-ico {
  width: 18px; height: 18px; background: var(--color-black);
  -webkit-mask: url("../assets/icons/x.svg") no-repeat center / contain;
          mask: url("../assets/icons/x.svg") no-repeat center / contain;
}
.promo-modal__title { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 40px; text-transform: uppercase; color: var(--color-black); }
.promo-modal__sub { font-size: 16px; line-height: 24px; color: var(--color-font); margin-bottom: var(--space-2); max-width: 38ch; }
.promo-form { display: flex; flex-direction: column; gap: var(--space-3); }
.promo-form__submit { border-radius: 0; width: 100%; margin-top: var(--space-2); }
.promo-form__arrow {
  width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
          mask: url("../assets/icons/arrow-right.svg") no-repeat center / contain;
}
.promo-modal__img-col { position: relative; background: var(--grey-100); }
.promo-modal__img-col img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- Simple nav dropdown (About & Contact) ---------- */
.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 95;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 24px;
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: var(--primary-100);
  color: var(--primary-600);
}
@media (max-width: 1024px) {
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 var(--space-4);
    min-width: 0;
  }
}

/* ========================= DATA TABLE (shared) =========================
   One table format for the whole site (user, 2026-10-14, of the Remy comparison table:
   "áp dụng format bảng này vào các bảng khác ở các page khác"). No frame and no header bar;
   the type carries the structure.
   - column heads: sans semibold 24/32, with no padding above them;
   - row heads: sans semibold 20/28, flush with the table's left edge;
   - body 16/24; one hairline above each row, none under the last;
   - .dtable__best  the column a table recommends: gold from its head down;
   - .dtable__tick  a bare check icon before a cell's text;
   - .dtable--dense 16px cells, for tables with many rows or columns;
   - .dtable--small heads at body size (16/24), for a table inside a narrow column;
   - .dtable--stack on a phone each row becomes a block and each cell a "label / value" line
     (cells carry data-label; explicit ARIA roles in the markup keep it a table for assistive tech).
   A section can tint it: --dtable-ink (heads), --dtable-muted (body), --dtable-rule (hairline).
   Left alone, the hairline is the ink at 16%, so it shows on white, on beige and on a dark field alike. */
.dtable { --dtable-pad: var(--space-6); --dtable-line: var(--dtable-rule, color-mix(in srgb, var(--dtable-ink, var(--color-black)) 16%, transparent)); width: 100%; border-collapse: collapse; background: none; }
.dtable--dense { --dtable-pad: var(--space-4); }
.dtable th, .dtable td { padding: var(--dtable-pad); text-align: left; vertical-align: top; }
.dtable thead th { position: relative; padding-top: 0; padding-bottom: var(--space-4); font-family: var(--font-body); font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: none; color: var(--dtable-ink, var(--color-black)); }
.dtable tbody th, .dtable tbody td { border-top: 1px solid var(--dtable-line); }
.dtable tbody th { font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-lh); text-transform: none; color: var(--dtable-ink, var(--color-black)); transition: color .2s ease; }
.dtable tr > :first-child { padding-left: 0; }
.dtable td { font-size: var(--body-size); line-height: var(--body-lh); color: var(--dtable-muted, var(--color-font)); text-wrap: pretty; }
/* The recommended column. Its head has no padding above either, so a block of its own carries the gold 16px above the head row.
   Inside the gold the rule between rows stays visible: black at 24% (user 2026-10-14, every table on every page). */
.dtable .dtable__best { border-top-color: color-mix(in srgb, var(--color-black) 24%, transparent); background: var(--color-primary); color: var(--color-black); }
.dtable td.dtable__best { font-weight: 600; }
.dtable tr > .dtable__best:first-child { padding-left: var(--dtable-pad); }
/* It overlaps the cell by 1px: at a fractional zoom a hairline of the page would show between the two. */
.dtable thead .dtable__best::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: calc(var(--space-4) + 1px); background: var(--color-primary); }
/* The rule under the gold head: the browser paints that first rule over the table's white, not over the
   gold, so it is drawn here, 1px below the head, in the same 24% black over gold as the rules below it. */
.dtable thead .dtable__best::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: color-mix(in srgb, var(--color-black) 24%, var(--color-primary)); }
.dtable__tick { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-2); }
.dtable__tick::before { content: ""; width: 20px; height: 20px; margin-top: 2px; background: url("../assets/icons/check.svg") center / 16px no-repeat; }
.dtable--small thead th, .dtable--small tbody th { font-size: var(--body-size); line-height: var(--body-lh); }
@media (hover: hover) { .dtable tbody tr:hover th { color: var(--color-primary); } }
@media (prefers-reduced-motion: reduce) { .dtable tbody th { transition: none; } }
@media (max-width: 899px) {
  .dtable { --dtable-pad: var(--space-4); }
  .dtable--dense { --dtable-pad: var(--space-3); }
  .dtable thead th { padding-bottom: var(--space-3); font-size: var(--h6-size); line-height: var(--h6-lh); }
  .dtable thead .dtable__best::before { height: calc(var(--space-3) + 1px); }
}
@media (max-width: 767px) {
  .dtable--stack, .dtable--stack tbody, .dtable--stack tr, .dtable--stack th, .dtable--stack td { display: block; }
  .dtable--stack thead { display: none; }
  .dtable--stack tbody th, .dtable--stack tbody td { border-top: 0; }
  .dtable--stack tbody tr { padding-block: var(--space-6); border-top: 1px solid var(--dtable-line); }
  .dtable--stack tbody th { padding: 0 0 var(--space-3); }
  .dtable--stack td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) var(--space-3); }
  .dtable--stack td::before { content: attr(data-label); font-weight: 600; color: var(--dtable-ink, var(--color-black)); }
  .dtable--stack .dtable__tick { display: block; }
  .dtable--stack .dtable__tick::before { content: none; }
  /* .dtable--fold (2026-10-14): on a phone the columns stay side by side, so a row still reads across;
     each row head folds up onto a line of its own above its cells. Set --dtable-cols (data columns,
     default 3). The gold of the recommended columns runs on through that line: --dtable-gold-from and
     --dtable-gold-to say where it starts and ends, as a share of the width. Explicit ARIA roles in the
     markup keep it a table for assistive tech, as with --stack. */
  .dtable--fold, .dtable--fold thead, .dtable--fold tbody { display: block; }
  .dtable--fold tr { display: grid; grid-template-columns: repeat(var(--dtable-cols, 3), minmax(0, 1fr)); }
  .dtable--fold thead th:first-child { display: none; }
  .dtable--fold thead th { padding-inline: var(--space-3); }
  .dtable--fold tbody th { grid-column: 1 / -1; padding: var(--space-4) var(--space-3) var(--space-2) 0; background: linear-gradient(90deg, transparent var(--dtable-gold-from, 100%), var(--color-primary) var(--dtable-gold-from, 100%) var(--dtable-gold-to, 100%), transparent var(--dtable-gold-to, 100%)); }
  .dtable--fold tbody td { padding: 0 var(--space-3) var(--space-4); border-top: 0; }
  .dtable--fold thead th:nth-child(2):not(.dtable__best), .dtable--fold tbody th + td:not(.dtable__best) { padding-left: 0; }
}

/* ============================================================
   Header: one 72px row on every page (built for "What Is Vietnamese Remy Hair?", then made the site's
   header, user 2026-10-14: "đồng bộ header này với các trang khác luôn"). The gold logo, the menu, then
   language and search; no black announcement bar, no phone line. Its motion:
   - on load the logo and each item drop in, one after the other;
   - a gold bar slides to the menu item under the pointer (or holding the focus) and rests on the current
     page's item (js/main.js places it; without the script each item has its own bar);
   - on a page whose banner runs under it ([data-header-over]) it is see-through until the page is scrolled;
     elsewhere it is white, flat at the top, with a light shadow once the page is scrolled (.is-solid);
   - a gold hairline under it runs with the page's scroll progress (CSS only).
   Phones and tablets keep two rows (logo row, scrolling menu row), without the bar.
   ============================================================ */
.site-header--min { --hdr-ease: cubic-bezier(.16, 1, .3, 1); --header-slide: transform .5s var(--hdr-ease); box-shadow: none; }
.site-header--min .topbar { display: none; }
/* The gold logo (user 2026-10-14), one step larger than the site's: 48px on phones and tablets, 56px in the 72px row. */
.site-header--min .navbar__logo img { height: 48px; }
.site-header--min.is-solid { box-shadow: var(--shadow-sm); }
@media (min-width: 1025px) {
  .site-header--min { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--space-8); height: 72px; padding-inline: max(var(--space-6), calc((100% - var(--container-max)) / 2 + var(--space-6))); background: var(--color-white); transition: var(--header-slide), background-color .35s ease, box-shadow .35s ease; }
  /* See-through over a banner ([data-header-over]) only when the script is there to turn it white again (js/main.js
     adds .is-solid once the page is scrolled). White also under the pointer or holding the focus, so the menus open on white. */
  .js:has([data-header-over]) .site-header--min { background: transparent; }
  .js:has([data-header-over]) .site-header--min:is(.is-solid, :hover, :focus-within) { background: var(--color-white); }
  .site-header--min :is(.navbar, .navbar__inner) { display: contents; }
  .site-header--min .navbar__logo { grid-area: 1 / 1; }
  .site-header--min .navbar__logo img { height: 56px; }
  /* The menu is not a positioning context here, so a mega panel still hangs from the whole header. */
  .site-header--min .menubar { grid-area: 1 / 2; position: static; background: none; }
  .site-header--min .menubar__inner { flex-wrap: nowrap; gap: 0; }
  .site-header--min .navbar__lang { grid-area: 1 / 3; flex: none; }
  .site-header--min .navbar__actions { grid-area: 1 / 4; flex: none; gap: var(--space-6); }
  .site-header--min .menutab { padding: var(--space-2); color: var(--color-black); white-space: nowrap; } /* 8px sides: at 1025 the 12px squeezed four items */
  /* Hover no longer swaps the weight (the items used to push each other); the gold bar answers instead. */
  .site-header--min .menutab:hover, .site-header--min .has-mega:is(:hover, :focus-within, .is-open) > .menutab { color: var(--color-black); font-weight: 400; }
  .site-header--min .icon-btn { width: 40px; height: 40px; }
  .site-header--min .icon-btn img { transition: transform .5s var(--hdr-ease); }
  .site-header--min .mega { border: 0; }
}
/* Header type 18px (--nav-size) on every page, menu and language alike (comment cmvat1tzwzfgi, user 2026-10-16;
   before: 14 / 16 / 20px). The language button now always has the width of its longest name (cmvathtfph5vm), so on
   narrow laptops the menu steps down. Measured on the homepage's fixed 1216px frame, the tightest, keeping ≥16px
   between items and ≥24px before the language: 1025–1099 14px, 1100–1149 16px, 18px from 1150; under 1240 the header
   columns stand 16px apart and the items keep 8px sides, from 1240 32px and 12px.
   Tablets (768–1024, the menu on its own row under the logo): 18px with 8px sides spans 727px. */
@media (max-width: 1024px) {
  .site-header--min .menutab { padding-inline: var(--space-2); font-size: var(--nav-size); line-height: var(--nav-lh); }
}
@media (min-width: 1025px) and (max-width: 1239px) {
  .site-header--min { column-gap: var(--space-4); }
}
@media (min-width: 1100px) {
  .site-header--min .menutab { font-size: var(--body-size); line-height: var(--body-lh); }
}
@media (min-width: 1150px) {
  .site-header--min .menutab { font-size: var(--nav-size); line-height: var(--nav-lh); }
}
@media (min-width: 1240px) {
  .site-header--min .menutab { padding-inline: var(--space-3); }
}

/* Phone menu (≤767px, user 2026-10-14): the menu row folds into one menu button; it opens a full-screen
   <dialog> that js/main.js builds from the same links. White, the titles' type (Bergola, uppercase), a
   hairline between items, the gold bar under the current page, submenus as native <details>. */
.mnav-open { display: none; }
.mnav-ico { display: block; width: 24px; height: 24px; flex: none; }
@media (max-width: 767px) {
  .site-header--min .menubar { display: none; }
  .site-header--min .mnav-open { display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-black); }
  /* The logo flush left; language, search and menu side by side on the right as one cluster, each a 44px
     target (user 2026-10-14: "Logo qua sát trái", "gom cụm chọn ngôn ngữ | search | menu lại làm 1"). */
  .site-header--min .navbar__inner { gap: 0; }
  .site-header--min .navbar__logo { order: -1; margin-right: auto; }
  .site-header--min .navbar__lang { flex: none; }
  .site-header--min .lang__btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .site-header--min .lang__menu { left: auto; right: 0; }
  .site-header--min .navbar__actions { flex: none; gap: 0; }
  .site-header--min .navbar__actions .icon-btn { width: 44px; height: 44px; }
}
/* Below 360px the 48px logo would touch the cluster: a 40px logo and 40px buttons. */
@media (max-width: 359px) {
  .site-header--min .navbar__logo img { height: 40px; }
  .site-header--min .lang__btn { min-width: 40px; }
  .site-header--min :is(.navbar__actions .icon-btn, .mnav-open) { width: 40px; height: 40px; }
}
.mnav { --mnav-line: color-mix(in srgb, var(--color-black) 16%, transparent); position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 var(--space-6) var(--space-12); border: 0; background: var(--color-white); color: var(--color-black); overflow-y: auto; overscroll-behavior: contain; }
.mnav::backdrop { background: transparent; }
html:has(.mnav[open]) { overflow: hidden; }
.mnav__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); background: var(--color-white); }
.mnav__top .navbar__logo img { display: block; height: 48px; width: auto; }
.mnav__close { display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-black); }
/* The list starts 16px under the logo row, with no rule above its first item (user 2026-10-14: no rule;
   later the same day, comment cmv7v4k108a8y: "Gap giữa cụm này và cụm menu ở dưới tăng lên 16px"). */
.mnav__list { margin: var(--space-4) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--mnav-line); }
.mnav__item { border-top: 1px solid var(--mnav-line); }
.mnav__item:first-child { border-top: 0; }
.mnav__item:first-child > .mnav__link, .mnav__item:first-child > .mnav__group > .mnav__link { padding-top: 0; }
.mnav__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; color: var(--color-black); cursor: pointer; list-style: none; }
.mnav__link::-webkit-details-marker { display: none; }
.mnav__link .mnav-ico { transition: transform .3s ease; }
.mnav__group[open] > .mnav__link .mnav-ico { transform: rotate(180deg); }
/* The current page carries no gold bar here (user 2026-10-14: "Mobile trong menu này bỏ shape vàng đi"). */
.mnav__link:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
/* Submenus in three steps (comments cmvknuu96wa6v, cmvknvettbxri, cmvknvxnb6f32, 2026-10-23: "Font size menu … nhỏ
   lại", "khó bấm", "phân cấp lại"), told apart by type and the hairline already in use rather than by colour: level 1
   Bergola 24 uppercase; level 2 a full-width 48px row at the header menu's 18 semibold with its arrow on the right, the
   same row as Shop by Length; level 3 Body 16, set 16px in behind a vertical hairline. The dialog only opens below
   768px (.mnav-open), so none of this reaches a wider screen. */
.mnav__sub { padding-bottom: var(--space-6); }
.mnav__subhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 48px; margin-top: var(--space-4); font-weight: 600; font-size: var(--nav-size); line-height: var(--nav-lh); color: var(--color-black); }
.mnav__sub > .mnav__subhead:first-child { margin-top: 0; }
.mnav__links, .mnav__gos { margin: 0; padding: 0; list-style: none; }
.mnav__links { padding-left: var(--space-4); border-left: 1px solid var(--mnav-line); }
.mnav__links a, .mnav__go { display: flex; align-items: center; min-height: 48px; color: var(--color-black); }
.mnav__links a { font-size: var(--body-size); line-height: var(--body-lh); }
.mnav__gos { margin-top: var(--space-6); border-top: 1px solid var(--mnav-line); }
.mnav__go { justify-content: space-between; gap: var(--space-4); min-height: 56px; border-bottom: 1px solid var(--mnav-line); font-weight: 600; font-size: var(--nav-size); line-height: var(--nav-lh); }
.mnav__gos > li:last-child .mnav__go { border-bottom: 0; }
:is(.mnav__go, .mnav__subhead) .mnav-ico { width: 20px; height: 20px; transition: transform .3s ease; }
.mnav__links a:is(:hover, :focus-visible), a.mnav__subhead:is(:hover, :focus-visible), .mnav__go:is(:hover, :focus-visible) { color: var(--primary-700); }
:is(.mnav__go, a.mnav__subhead):is(:hover, :focus-visible) .mnav-ico { transform: translateX(var(--space-1)); }
/* The menu slides in from the edge its button sits on and slides back out on close (js/main.js waits for
   .is-closing to end); an opened group's links rise in while the rows below glide to their new place
   (comments cmvadcpdvyrsi, cmvadd6h9gjjx). Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .mnav[open] { animation: mnav-in .5s cubic-bezier(.16, 1, .3, 1) both; }
  .mnav[open].is-closing { animation: mnav-out .32s cubic-bezier(.4, 0, 1, 1) both; }
  .mnav[open] .mnav__item { animation: mnav-rise .7s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i, 0) * .06s) both; }
  .mnav__group[open] > .mnav__sub { animation: mnav-drop .45s cubic-bezier(.16, 1, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.mnav__link, .mnav__go, .mnav__subhead) .mnav-ico { transition: none; }
}
@keyframes mnav-in { from { opacity: 0; transform: translateX(100%); } }
@keyframes mnav-out { to { opacity: 0; transform: translateX(100%); } }
@keyframes mnav-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes mnav-drop { from { opacity: 0; transform: translateY(calc(var(--space-3) * -1)); } }

@media (prefers-reduced-motion: no-preference) {
  /* "backwards", not "both": an animation that keeps filling a transform makes its item the containing
     block of the mega panel inside it, and the panel would hang from the item instead of the header. */
  .site-header--min :is(.navbar__logo, .navbar__lang, .navbar__actions), .site-header--min .menubar__inner > li { animation: hdr-drop .9s var(--hdr-ease) calc(.5s + var(--i, 0) * .06s) backwards; }
  .site-header--min .menubar__inner > li:nth-child(1) { --i: 1; }
  .site-header--min .menubar__inner > li:nth-child(2) { --i: 2; }
  .site-header--min .menubar__inner > li:nth-child(3) { --i: 3; }
  .site-header--min .menubar__inner > li:nth-child(4) { --i: 4; }
  .site-header--min .menubar__inner > li:nth-child(5) { --i: 5; }
  .site-header--min .menubar__inner > li:nth-child(6) { --i: 6; }
  .site-header--min .navbar__lang { --i: 7; }
  .site-header--min .navbar__actions { --i: 8; }
}

/* The header's gold hairline: the page's scroll progress, left to right. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header--min::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform-origin: 0 50%; animation: hdr-progress linear both; animation-timeline: scroll(root block); pointer-events: none; }
  }
}
/* The header's gold bar (desktop). js/main.js writes where it goes (--nav-x, --nav-y) and how wide (--nav-s);
   it lies under the letters, like the bar under the titles. Without the script every item has its own. */
@media (min-width: 1025px) {
  .site-header--min.has-bar::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100px; height: 8px; background: var(--color-primary); transform: translate(var(--nav-x, 0px), calc(var(--nav-y, 0px) - 9px)) scaleX(var(--nav-s, 0)); transform-origin: 0 50%; transition: transform .55s var(--hdr-ease); pointer-events: none; }
  .site-header--min:not(.has-bar) .menutab { position: relative; z-index: 0; }
  .site-header--min:not(.has-bar) .menutab::after { content: ""; position: absolute; z-index: -1; left: var(--space-3); right: var(--space-3); bottom: var(--space-2); height: 8px; background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--hdr-ease); }
  .site-header--min:not(.has-bar) :is(.menutab:hover, .menutab:focus-visible, .is-current > .menutab)::after { transform: none; }
  @media (hover: hover) { .site-header--min .icon-btn:hover img { transform: scale(1.2) rotate(-12deg); } }
  /* A mega panel comes down a little further and its columns follow one another. */
  .site-header--min .mega { transition: opacity .3s ease, transform .5s var(--hdr-ease), visibility .3s; }
  .site-header--min .mega__inner > * { opacity: 0; transform: translateY(var(--space-4)); transition: opacity .4s ease, transform .6s var(--hdr-ease); }
  .site-header--min .has-mega:is(:hover, :focus-within, .is-open) .mega__inner > * { opacity: 1; transform: none; }
  .site-header--min .has-mega:is(:hover, :focus-within, .is-open) .mega__inner > :nth-child(2) { transition-delay: .08s; }
  .site-header--min .has-mega:is(:hover, :focus-within, .is-open) .mega__inner > :nth-child(3) { transition-delay: .16s; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header--min.has-bar::before, .site-header--min .menutab::after, .site-header--min .icon-btn img, .site-header--min .mega__inner > * { transition: none; }
}
/* js/main.js watches this mark to know the page is still at its top. */
body > .header-over-mark { position: absolute; top: 0; left: 0; width: 1px; height: var(--space-12); pointer-events: none; }
@keyframes hdr-drop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes hdr-progress { from { transform: scaleX(0); } }

/* ===================================================================
   MESSAGE WALL — partners' own WhatsApp screenshots (khuôn wh-chat, comment cmvjacpxtoh63). Used on Wholesale
   (.wh-trust) and OEM / ODM (.oemp-trust, comment cmvorni4n82c5); moved here from css/wholesale.css so both pages
   read one source. Four columns, the even ones set lower so the wall reads like a running conversation; each
   message is a button that opens it larger in the native .wh-zoom dialog (js/main.js).
   =================================================================== */
.wh-chats { --chat-ease: cubic-bezier(.16, 1, .3, 1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0 0 var(--space-24); list-style: none; }
.wh-chat:nth-child(4n + 2), .wh-chat:nth-child(4n + 4) { translate: 0 var(--space-24); }
.wh-chat__open { display: block; width: 100%; padding: 0; border: 2px solid var(--primary-300); background: var(--surface-beige); cursor: zoom-in; }
.wh-chat__open img { display: block; width: 100%; aspect-ratio: var(--ty-le-feedback); object-fit: cover; object-position: 50% 0; }
.wh-chat__open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
/* The larger view: the screenshot at up to its own size, on a dark veil, closed with Esc, the x or a click outside. */
.wh-zoom { position: fixed; inset: 0; width: fit-content; height: fit-content; max-width: calc(100vw - var(--space-8)); max-height: calc(100vh - var(--space-8)); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.wh-zoom::backdrop { background: color-mix(in srgb, var(--surface-dark-deep) 82%, transparent); }
.wh-zoom__img { display: block; width: auto; height: auto; max-width: min(506px, calc(100vw - var(--space-8))); max-height: calc(100vh - var(--space-8)); }
.wh-zoom__close { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: var(--space-10); height: var(--space-10); padding: 0; border: 0; background: var(--color-white); color: var(--color-black); cursor: pointer; }
.wh-zoom__close svg { width: var(--space-6); height: var(--space-6); }
.wh-zoom__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  /* The messages come up one after another, like messages arriving. */
  .js .wh-chats[data-reveal] .wh-chat__open { opacity: 0; transform: translateY(var(--space-16)); transition: opacity .8s var(--chat-ease) calc(var(--i, 0) * .1s), transform 1.1s var(--chat-ease) calc(var(--i, 0) * .1s); }
  .js .wh-chats[data-reveal].is-in .wh-chat__open { opacity: 1; transform: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wh-chat__open { overflow: hidden; }
  .wh-chat__open img { transition: scale 1.8s var(--chat-ease), transform 1s var(--chat-ease); will-change: transform; }
  .wh-chat__open:hover img { transform: scale(1.04); }
}
/* Desktop scroll scene: the odd columns drift against the even ones while the wall crosses the screen. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wh-chat:nth-child(odd) { animation: wh-float linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@media (max-width: 1024px) {
  .wh-chats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-12); }
  .wh-chat:nth-child(4n + 2), .wh-chat:nth-child(4n + 4) { translate: none; }
  .wh-chat:nth-child(even) { translate: 0 var(--space-12); }
}
@keyframes wh-float { from { translate: 0 var(--space-8); } to { translate: 0 calc(var(--space-8) * -1); } }