/* ============================================================
   Homepage — dựng theo ảnh thiết kế "Artboard 1@3x-100.jpg" (2026-10-15).
   Mọi số đo quy từ ảnh rồi làm tròn về token / thang 12 nấc gần nhất.
   Bề rộng (2026-10-16, user: "container phải giữ nguyên trên mọi màn hình ở bản desktop. Hiển
   thị tốt ở màn hình 1280px mới đúng. ko scale"): container CỐ ĐỊNH đúng như ở màn 1280 — nội
   dung 1216px cho MỌI khối và mọi màn desktop, không nới, không co theo màn. 1216 = 1265 (màn
   1280 trừ thanh cuộn) − 2 × 24, nên cả màn 1280 có thanh cuộn cũng ra đúng bề rộng này (trước
   đó 1340px, ảnh vẽ 1504px). --hm-content là bề rộng nội dung thật, cho vài khối tự tính.
   ============================================================ */

.page-home {
  --hm-max: 1216px;
  --hm-gutter: var(--space-6);
  --hm-content: min(var(--hm-max), 100vw - 2 * var(--hm-gutter));
  --container-max: calc(var(--hm-max) + 2 * var(--hm-gutter));
}
.page-home .container { padding-inline: var(--hm-gutter); }

.hm { color: var(--text-primary); }
/* No one-word last lines (comment cmvaqbfw6rbap, "lỗi rớt chữ"): text wraps "pretty" and the short titles inside
   cards balance their lines, at every width, instead of hand-placed breaks that fail at the next screen size. */
.hm :is(p, li, td, th, figcaption, .hm-post__title) { text-wrap: pretty; }
.hm :is(h3, h4, .hm-post__title, .hm-tier__head) { text-wrap: balance; }

/* ---------- Dùng chung ---------- */
/* Lụa đen của footer, phủ thêm 60% nền tối để độ sáng khớp ảnh thiết kế (đo vùng trống: ảnh 12–20, lụa trần 22–86) */
/* The designer's own black silk, embedded in wireframe.ai (2026-10-16), laid as it is in the design */
.hm-dark {
  background: var(--surface-dark) url("../assets/images/home/silk-dark.jpg") center / cover no-repeat;
  color: var(--text-on-dark);
}

.hm-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--sec-title-size); /* one size for section titles on every page (tokens.css, user 2026-10-23) */
  line-height: var(--sec-title-lh);
  text-transform: uppercase;
  text-align: center;
  color: inherit;
}
/* Tiêu đề canh trái: chữ lùi vào 12px, mảng vàng chạy ra sát mép khung như ảnh thiết kế */
.hm-title--start { text-align: start; padding-inline-start: var(--space-3); }
.hm-title--start .hm-hl { margin-inline-start: calc(var(--space-3) * -1); }
.hm-hl {
  background: linear-gradient(to top, var(--color-primary) 21px, transparent 21px);
  padding-inline: var(--space-3);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.hm-lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
}

/* Sub-headings: SVN-Gilroy Bold at the DS's 28 (24 on phones) (user 2026-10-23, comments cmvkrjt0b5jyk, cmvkrl3b50qqs,
   cmvkrlmos7p69, cmvkrm4bvelu1: "svn-gilroy, bold, font size 28px"; before, Bergola thickened by the browser at 40). */
.hm-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--subhead-size);
  line-height: var(--subhead-lh);
  text-wrap: balance;
  text-transform: uppercase;
  color: inherit;
  border-inline-start: 4px solid var(--color-primary);
  padding-inline-start: var(--space-3);
}

/* A compound that must not break at its hyphen ("In-House"); Bergola has no non-breaking hyphen glyph. */
.hm-nowrap { white-space: nowrap; }

.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-black);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.hm-btn:hover { background: var(--color-primary); color: var(--color-black); }
.hm-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--h4-size); line-height: var(--h4-lh); }
.hm-btn--plain { padding: var(--space-2) var(--space-6); color: var(--color-white); font-size: var(--h5-size); line-height: var(--h5-lh); }

/* ============================ HERO ============================ */
.hm-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--color-white); }
.hm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.hm-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: calc(var(--space-16) * 2) var(--space-24);
}
.hm-hero__welcome {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  text-transform: uppercase;
}
.hm-hero__title {
  margin-block: var(--space-8) var(--space-16);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--display-2-size);
  line-height: 1.2;
  color: var(--text-primary);
}
.hm-hero__line { display: block; }
/* Short laptop screens (1366×768, 1280×700, 1280×685): the hero fits under the 72px header with its button
   in view (comment cmvaloqlrh9ru: at 1280×685 the 707px hero cut the button off). Only the vertical rhythm
   tightens; the type keeps its size. */
@media (min-width: 1025px) and (max-height: 800px) {
  .hm-hero__inner { padding-block: var(--space-16) var(--space-12); }
  .hm-hero__title { margin-block: var(--space-4) var(--space-8); }
}

/* ===================== WHY VIETNAMESE REMY HAIR ===================== */
.hm-why { padding-block: var(--space-24); }
.hm-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 550fr) minmax(0, 636fr) minmax(0, 318fr);
  align-items: center;
}
.hm-why__copy { padding-inline-end: var(--space-8); }
.hm-why__copy .hm-lead { margin-top: var(--space-4); }
.hm-why__body { margin-top: var(--space-4); font-size: var(--h6-size); line-height: var(--h6-lh); text-align: justify; }
.hm-why__body p + p { margin-top: var(--space-6); }
.hm-why__media img { display: block; width: 100%; aspect-ratio: var(--ty-le-khoi_ngang); object-fit: cover; }

.hm-remy {
  position: relative;
  z-index: 1;
  margin-inline-start: calc(var(--space-8) * -1);
  padding: var(--space-8);
  background: var(--surface-beige);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  text-align: center;
}
.hm-remy__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  text-transform: uppercase;
}
.hm-remy__compare { display: flex; justify-content: center; gap: var(--space-6); margin-block: var(--space-6) var(--space-4); }
.hm-remy__shot { margin: 0; }
.hm-remy__shot img {
  display: block;
  width: 108px;
  aspect-ratio: var(--ty-le-avatar);
  object-fit: cover;
  border-radius: var(--radius-round);
}
.hm-remy__shot figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  text-transform: uppercase;
}

/* ===================== MADE FOR PROFESSIONAL SALONS ===================== */
.hm-salons { padding-block: var(--space-24); }
.hm-salons__intro {
  display: grid;
  grid-template-columns: minmax(0, 616fr) minmax(0, 840fr);
  column-gap: var(--space-12);
  align-items: center;
}
.hm-salons__media img { display: block; width: 100%; aspect-ratio: var(--ty-le-tin); object-fit: cover; }
.hm-salons__copy { padding-block-end: var(--space-12); }
.hm-salons__copy .hm-lead { margin-top: var(--space-6); }
.hm-salons__text { max-width: 770px; margin-top: var(--space-4); font-size: var(--h6-size); line-height: var(--h6-lh); }

.hm-group { margin-top: var(--space-8); }
.hm-group > .hm-lead { margin-top: var(--space-3); }

.hm-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-8);
}
.hm-tier {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface-beige);
  color: var(--text-primary);
}
.hm-tier__copy { display: flex; flex-direction: column; padding: var(--space-8) var(--space-2) var(--space-6) var(--space-8); }
.hm-tier__tag {
  font-family: var(--font-body); /* comment cmvkrky2me8il: "svn-gilroy"; SemiBold so the small capitals read */
  font-weight: 600;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  text-transform: uppercase;
  color: var(--color-primary);
}
.hm-tier__head { margin-top: var(--space-6); font-family: var(--font-heading); font-weight: 400; }
.hm-tier__code { display: block; font-size: var(--display-2-size); line-height: 1; }
/* The full tier name, bold (user 2026-10-21 "Chỉ bold"); Bergola has only a Regular file, so the browser
   emboldens it, as for .hm-sub. */
.hm-tier__name {
  display: block;
  margin-top: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-primary);
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  font-weight: 700;
}
.hm-tier__desc { margin-top: var(--space-3); font-size: var(--caption-size); line-height: var(--caption-lh); }
.hm-tier__media { position: relative; align-self: stretch; width: 100%; aspect-ratio: var(--ty-le-editorial); overflow: hidden; } /* the hover zoom stays inside (comment cmvara7ugyt8g) */
.hm-tier__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hm-ends {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-8);
}
.hm-end { position: relative; overflow: hidden; background: var(--color-white); color: var(--text-primary); } /* hover zoom clipped */
.hm-end img { display: block; width: 100%; aspect-ratio: var(--ty-le-khung_doc); object-fit: cover; }
.hm-end__label { position: absolute; inset-inline: var(--space-6); bottom: var(--space-6); font-family: var(--font-heading); }
.hm-end__code { display: block; font-size: var(--h1-size); line-height: 1; }
.hm-end__name { display: block; font-size: var(--h6-size); line-height: var(--h6-lh); }

/* ============================ PRODUCT COLLECTION ============================ */
.hm-products { padding-block: var(--space-12) var(--space-8); }
/* The product cards are the site's .cat-card again (css/sections.css), as on the earlier homepage the user pointed to
   (comment cmvp1dr5xbqhl "màu sắc, font size khoảng cách,.. y hệt"): square photo, a black 40px label in white 16px
   semibold capitals under it, gold with an arrow on hover; four to a row, 24px apart. The names are written in sentence
   case in the markup, so the capitals come from here. */
.hm-products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.hm-products .cat-card__label { text-transform: uppercase; }
.hm-products__all { display: flex; width: fit-content; margin: var(--space-12) auto 0; }

/* ============================ MANUFACTURING EXPERTISE ============================ */
.hm-mfg__top { padding-top: var(--space-16); }
.hm-mfg__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-12);
  margin-top: var(--space-12);
}
/* The factory film in a 16:9 frame (comment cmvancnu75xt0; it was 7:5 around a YouTube poster) */
.hm-video { position: relative; overflow: hidden; aspect-ratio: var(--ty-le-video); background: var(--surface-dark); }
.hm-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The film on top across the frame and the words under it (comment cmvksenyjms0o, 2026-10-23: "Video to vừa ở trên.
   Cụm content cho xuống"): the sub-heading on the left, the copy on the right, so a line stays near 65 characters. */
.hm-mfg__copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-12); align-items: start; font-size: var(--h6-size); line-height: var(--h6-lh); }
.hm-mfg__copy .hm-sub { grid-column: 1; grid-row: 1 / span 3; }
.hm-mfg__copy p { grid-column: 2; margin-top: var(--space-6); text-align: justify; }
.hm-mfg__copy .hm-sub + p { margin-top: 0; }

/* Dải số liệu nằm vắt qua ranh giới nền tối / nền trắng: nửa dưới của khung bọc tô trắng */
.hm-stats-wrap {
  margin-top: var(--space-24);
  padding-inline: var(--space-16);
  background: linear-gradient(to bottom, transparent 50%, var(--color-white) 50%);
}
/* Three figures to a row, two rows, at every desktop width (comment cmvonhiuaxnau: "Đổi lại layout 3x2");
   it was six in one row from 1600px up. */
.hm-stats {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-8);
  background: var(--primary-300);
  color: var(--text-primary);
}
.hm-stat {
  flex: 1 1 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.hm-stat + .hm-stat { border-inline-start: 1px solid var(--color-white); }
.hm-stat:nth-child(4) { border-inline-start: 0; }
.hm-stat:nth-child(n + 4) { border-top: 1px solid var(--color-white); }
/* SVN-Gilroy Bold (comment cmvkrls53irs4) at the DS's 28 (24 on phones) with 16px cell padding: six across, every
   figure and label holds one line (comment cmvksf5oy8b4v: "tránh tình trạng chỗ 1 dòng, chỗ 2 dòng"; 32 broke some). */
/* Larger once the figures sat three to a row with twice the room (comment cmvoq6lp4suw4: "Tăng font size to hơn"):
   48 where a cell is 576px wide, stepping down with the cell so every figure still holds one line (below). */
.hm-stat__num { font-family: var(--font-body); font-weight: 700; font-size: var(--h2-size); line-height: var(--h2-lh); text-transform: uppercase; }
.hm-stat__label { font-weight: 500; font-size: var(--body-size); line-height: var(--body-lh); text-transform: uppercase; }
/* Count-up (js/home.js): the counting figure lies over a hidden copy of the final one, so each cell has its final
   size from the first frame ("0 sq ft" on one line grew to two and shook the page, comment cmvart5t0hbzp) */
.hm-stat__num { position: relative; }
.hm-stat__ghost { visibility: hidden; }
.hm-stat__live { position: absolute; inset: 0; }

.hm-steps { padding-block: var(--space-8) var(--space-24); background: var(--color-white); }
.hm-steps__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.hm-step { text-align: center; }
/* The photo box clips its drifting photo; the number sits after it and straddles the bottom edge,
   taking no height of its own (half above, half below). */
.hm-step__media { position: relative; overflow: hidden; }
.hm-step__media img { display: block; width: 100%; aspect-ratio: var(--ty-le-khung_doc); object-fit: cover; }
.hm-step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: calc(var(--space-4) * -1) auto;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--h6-size);
  line-height: 1;
}
/* Every step name takes two balanced lines (comment cmvksfne9d49d, 2026-10-23: "Tránh bị chỗ 1 dòng, chỗ 2 dòng"), so the
   descriptions start on one line across the row; it no longer borrows the column gap, which ran "Ethical Hair Sourcing"
   8px out of its column. SVN-Gilroy Bold 24 (comment cmvkrmh50walt). */
.hm-step__title { min-height: calc(var(--h5-lh) * 2); margin: var(--space-6) 0 0; font-family: var(--font-body); font-weight: 700; font-size: var(--h5-size); line-height: var(--h5-lh); text-wrap: balance; } /* "Crafts­manship" in the markup: the word outgrew the 320px card */
/* Descriptions 12 → 16px at every width (comment cmvasthh9tbd7 asked 14, which the DS does not have; the user picked
   the existing 16 for the same request on phones) */
.hm-step__text { margin-top: var(--space-1); font-size: var(--body-size); line-height: var(--body-lh); } /* the full column width: 6–8 lines became 5–6 */

/* ============================ FACTORY TOUR ============================ */
.hm-tour {
  padding-block: var(--space-24);
  background: var(--color-white) url("../assets/images/stats-bg.png") center / cover no-repeat;
}
.hm-tour__head { text-align: center; }
.hm-tour__title {
  display: inline-block;
  padding: 0 var(--space-6) var(--space-4);
  border-bottom: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--sec-title-size);
  line-height: var(--sec-title-lh);
  text-transform: uppercase;
}
.hm-tour__lead {
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: var(--h6-size);
  line-height: 1.5;
}
.hm-tour__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: var(--space-12) auto 0;
}
.hm-tourcard { display: flex; flex-direction: column; }
.hm-tourcard__media { position: relative; aspect-ratio: var(--ty-le-tour); }
.hm-tourcard__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hm-tourcard__track::-webkit-scrollbar { display: none; }
.hm-tourcard__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.hm-tourcard__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-white);
}
.hm-tourcard__nav--prev { left: 0; transform: translate(-50%, -50%); }
.hm-tourcard__nav--next { right: 0; transform: translate(50%, -50%); }
.hm-tourcard__dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  transition: background-color .2s ease;
}
.hm-tourcard__dot .icon { width: 16px; height: 16px; }
.hm-tourcard__nav:hover .hm-tourcard__dot { background: var(--color-black); }
.hm-tourcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6) var(--space-8) var(--space-8);
  background: var(--primary-300);
}
.hm-tourcard__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; }
.hm-tourcard__body p { margin: var(--space-3) 0 var(--space-8); }
.hm-tourcard__body .hm-btn { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .hm-btn, .hm-product__name, .hm-video__play, .hm-tourcard__dot { transition: none; }
  .hm-tourcard__track { scroll-behavior: auto; }
}

/* ============================ ≤ 1599px ============================ */
/* Sáu số liệu cần ~1210px nội dung + đệm 48px mỗi bên: dưới 1600px thì xuống lưới 3 × 2 thay vì nén chữ */
@media (max-width: 1599px) {
  .hm-stats { padding: var(--space-6); }
  .hm-stat__num { font-size: var(--h3-size); line-height: var(--h3-lh); }
}
@media (max-width: 1279px) {
  .hm-stat__num { font-size: var(--h4-size); line-height: var(--h4-lh); }
}

/* ============================ ≤ 1365px ============================ */
/* Thẻ Remy cao hơn ảnh nón lá khi khung hẹp hơn ~1366px: chữ lên trên, ảnh + thẻ thành hàng dưới */
@media (max-width: 1365px) {
  .hm-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--space-12); }
  .hm-why__copy { grid-column: 1 / -1; padding-inline-end: 0; }
  .hm-remy { align-self: center; }
}

/* ============================ ≤ 1279px ============================ */
@media (max-width: 1279px) {
  .hm-tiers { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .hm-tier { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }

  .hm-steps__list { gap: var(--space-6); }
}

/* ============================ ≤ 1024px ============================ */
@media (max-width: 1024px) {
  .hm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--color-white) 25%, transparent 80%);
  }
  .hm-hero__bg { object-position: 70% center; }

  .hm-salons__intro { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .hm-salons__copy { padding-block-end: 0; }

  .hm-ends { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hm-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  /* Narrower cards: a long name ("Double tap hair extensions") may take two lines instead of running out of the label
     (.cat-card keeps one line); one line still makes the 40px label, and the labels of a row stay level. */
  .hm-products .cat-card { height: 100%; }
  .hm-products .cat-card__label { flex: 1; height: auto; min-height: 40px; padding-block: var(--space-2); white-space: normal; }

  .hm-mfg__grid { row-gap: var(--space-8); }
  .hm-mfg__copy { display: block; }
  .hm-mfg__copy .hm-sub + p { margin-top: var(--space-8); }
  /* Two columns of figures, so each stays on one line (comment cmvksf5oy8b4v) */
  .hm-stat { flex-basis: 50%; }
  .hm-stat:nth-child(n) { border-inline-start: 0; border-top: 0; }
  .hm-stat:nth-child(even) { border-inline-start: 1px solid var(--color-white); }
  .hm-stat:nth-child(n + 3) { border-top: 1px solid var(--color-white); }
  .hm-stats-wrap { padding-inline: var(--space-6); margin-top: var(--space-16); }

  .hm-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-12); }

  .hm-tour__grid { gap: var(--space-8); }
}

/* ============================ ≤ 767px ============================ */
@media (max-width: 767px) {
  .hm-hl { background: linear-gradient(to top, var(--color-primary) 14px, transparent 14px); }
  .hm-lead { font-size: var(--body-size); line-height: var(--body-lh); }
  .hm-btn--lg { font-size: var(--h6-size); line-height: var(--h6-lh); }

  .hm-hero::before { display: none; }
  .hm-hero__bg { position: static; order: 2; height: 64vw; object-position: 78% center; }
  .hm-hero { display: flex; flex-direction: column; }
  .hm-hero__inner { padding-block: var(--space-12) var(--space-8); }
  .hm-hero__welcome { font-size: var(--h6-size); line-height: var(--h6-lh); }
  .hm-hero__title { margin-block: var(--space-3) var(--space-6); font-size: var(--h4-size); } /* 32px on phones, not the shrinking display-2 (comment cmvas8gvngj5p) */

  .hm-why { padding-block: var(--space-16); }
  .hm-why__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .hm-why__body, .hm-salons__text, .hm-mfg__copy { font-size: var(--body-size); line-height: var(--body-lh); text-align: start; }
  .hm-mfg__copy p { text-align: start; }
  .hm-remy { margin-inline-start: 0; padding: var(--space-6); }

  .hm-salons { padding-block: var(--space-16); }
  .hm-tier { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .hm-tier__copy { padding: var(--space-6) var(--space-3) var(--space-6) var(--space-4); }
  .hm-tier__desc { font-size: var(--body-size); line-height: var(--body-lh); } /* 12 → 16 on phones (comment cmvarecf5f0b5: the DS has no 14) */
  .hm-end__label { inset-inline: var(--space-3); bottom: var(--space-3); }
  .hm-end__code { font-size: var(--h4-size); }
  .hm-end__name { font-size: var(--body-size); line-height: var(--body-lh); }

  .hm-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }

  .hm-stats-wrap { padding-inline: var(--space-4); margin-top: var(--space-12); }
  .hm-stats { padding: var(--space-4); }
  /* One figure to a row, each on one line (comment cmvksf5oy8b4v; two columns broke the long ones) */
  .hm-stat { flex-basis: 100%; padding: var(--space-4) var(--space-2); }
  .hm-stat:nth-child(n) { border-inline-start: 0; border-top: 0; }
  .hm-stat:nth-child(n + 2) { border-top: 1px solid var(--color-white); }
  /* The figure leads its label (comment cmvko584ddhws, 2026-10-23: "font content đang to hơn các số liệu"): the figure at
     the desktop's 24; the label keeps 16, no smaller on phones (comment cmvareqsob8lr), but at regular weight. */
  .hm-stat__label { font-weight: 400; font-size: var(--body-size); line-height: var(--body-lh); }

  .hm-steps { padding-block-end: var(--space-16); }
  /* One step per row (comment cmvarf8xem7bi); with no column beside it the title stops borrowing the gap */
  .hm-steps__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .hm-step__title { min-height: 0; font-size: var(--h5-size); line-height: var(--h5-lh); } /* one column: no row to line up (comment cmvarf509idw3) */

  .hm-tour { padding-block: var(--space-16); }
  .hm-tour__title { font-size: var(--h5-size); padding-inline: var(--space-2); }
  .hm-tour__lead { font-size: var(--body-size); }
  .hm-tour__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
  .hm-tourcard__body { padding: var(--space-6); }
  .hm-btn { white-space: normal; text-align: center; }
  /* the card's action spans the card and stands 48px tall (comment cmvaslyhhy4au: "nút nhỏ quá"); the type stays
     16px so "Discover the factory tour" keeps one line */
  .hm-tourcard .hm-btn { align-self: stretch; padding: var(--space-3) var(--space-4); font-size: var(--body-size); line-height: var(--body-lh); text-wrap: balance; }
}
/* Under 360px half the box is narrower than "MANUFACTURING" at 16px (130px), so the stats stack in one column */
@media (max-width: 359px) {
  .hm-stat__num { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .hm-stat { flex-basis: 100%; }
  .hm-stat:nth-child(n) { border-inline-start: 0; }
  .hm-stat:nth-child(n + 2) { border-top: 1px solid var(--color-white); }
}

/* ======================================================================
   2026-10-16 — the rest of the page from "anh web/wireframe/homepage.jpg"
   (artboard 1080 → 1920: × 16/9, every gap rounded to the 12-step scale).
   ====================================================================== */
.page-home { --hm-ease: cubic-bezier(.16, 1, .3, 1); }
/* .hm-narrow marked the design's narrower 1422px column; since 2026-10-16 these sections share the page's
   1340px (comment cmvamtsm3deg0), so the class no longer sets a width. */
/* The designer's white silk from wireframe.ai */
.hm-silk { background: var(--color-white) url("../assets/images/home/silk-white.jpg") center / cover no-repeat; }
.hm-lead--center { margin-top: var(--space-4); text-align: center; }
.hm-center { display: flex; width: fit-content; margin-inline: auto; }
.hm-btn--md { padding: var(--space-2) var(--space-4); font-size: var(--h5-size); line-height: var(--h5-lh); }
.hm-btn--line { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--border-strong); }
.hm-btn--line:hover { box-shadow: none; }

/* ---------- Why Salons Work With Luxshine ---------- */
.hm-salonswhy { padding-top: var(--space-16); }
/* The three reasons sit on the page's 1340px grid (they ran 1572px wide, past the frame as drawn, until the
   homepage width changed on 2026-10-16) */
.hm-reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
.hm-reason { display: flex; flex-direction: column; align-items: center; padding-inline: var(--space-4); text-align: center; }
.hm-reason__icon {
  display: grid;
  place-items: center;
  width: 172px;
  height: 172px;
  border: 4px solid var(--primary-400);
  border-radius: var(--radius-round);
  background: var(--primary-300);
  color: var(--color-primary);
}
/* Designer's icons from wireframe.ai, each on the same 48pt frame so their sizes relate as in the design */
.hm-reason__icon .icon { width: 85px; height: 85px; }
.hm-reason__title { margin-top: var(--space-12); font-family: var(--font-body); font-weight: 700; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; color: inherit; } /* comment cmvkrmzekrofg: larger, SVN-Gilroy bold */
.hm-reason p { margin-top: var(--space-2); font-size: var(--h6-size); line-height: var(--h6-lh); }

/* The map straddles the dark section and the white below: dark down to the middle of the map */
.hm-ship {
  margin-top: var(--space-12);
  padding-bottom: var(--space-24);
  background: linear-gradient(to bottom, transparent calc((100% - var(--space-24)) / 2), var(--color-white) 0);
  color: var(--text-primary);
}
.hm-ship__inner {
  display: grid;
  grid-template-columns: minmax(0, 917fr) minmax(0, 55fr) minmax(0, 484fr);
  max-width: 1456px;
  margin-inline: auto;
}
.hm-ship__map { position: relative; grid-column: 1 / 3; grid-row: 1; margin: 0; background: var(--color-white); }
.hm-ship__map img { display: block; width: 100%; aspect-ratio: var(--ty-le-ban_do); object-fit: cover; }
.hm-ship__badges { position: absolute; left: var(--space-12); bottom: var(--space-16); display: flex; flex-direction: column; gap: var(--space-3); }
.hm-ship__badge { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--primary-300); }
.hm-ship__badge .icon { flex: none; width: 40px; height: 40px; color: var(--color-primary); }
.hm-ship__badge small { display: block; font-family: var(--font-heading); font-size: var(--caption-size); line-height: var(--caption-lh); text-transform: uppercase; }
.hm-ship__badge strong { display: block; font-weight: 500; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; }
.hm-ship__card {
  position: relative;
  z-index: 1;
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-12);
  background: var(--primary-300);
}
.hm-ship__card p { margin-top: var(--space-6); font-size: var(--h6-size); line-height: var(--h6-lh); }
.hm-ship__card .hm-btn { margin-top: var(--space-8); }

/* ---------- Easy to Start ---------- */
.hm-easy { padding-block: var(--space-16); }
.hm-easy__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
  margin: var(--space-12) auto 0;
  padding: 0;
  list-style: none;
}
.hm-easy__card { display: flex; flex-direction: column; background: var(--primary-300); color: var(--text-primary); }
.hm-easy__media { margin: 0; overflow: hidden; }
.hm-easy__media img { display: block; width: 100%; aspect-ratio: var(--ty-le-buoc_dat_hang); object-fit: cover; }
.hm-easy__body { flex: 1; padding: var(--space-4) var(--space-6) var(--space-6); }
.hm-easy__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); }
.hm-easy__text { margin-top: var(--space-2); font-size: var(--body-size); line-height: var(--body-lh); } /* 12 → 16 everywhere (comments cmvastswei6b9, cmvastwepihpf, cmvasu7ip4nt9: 14 asked, not in the DS) */
.hm-easy__text > * + * { margin-top: var(--space-1); }
.hm-channels, .hm-pay { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; list-style: none; }
/* Brand marks in their own colours, as drawn in wireframe.ai (multicolour logos stay images, not mono icons) */
.hm-channels :is(a, span) { display: block; width: 24px; height: 24px; border-radius: var(--radius-round); transition: translate .2s ease; }
.hm-channels img, .hm-pay img { display: block; width: auto; height: 24px; }
.hm-pay li { display: block; }
.hm-easy .hm-btn { margin-top: var(--space-12); }

/* ---------- Customer tiers ---------- */
.hm-ctiers { padding-block: var(--space-16); background: var(--color-white); }
.hm-ctiers .hm-lead { margin-top: var(--space-4); }
.hm-ctiers__wrap { margin-top: var(--space-6); }
.hm-ctiers__table { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--text-primary); }
/* Compact since comment cmvaqh99o4mdh ("to quá … gọn gàng lại"): rows hug their text (no 66 / 100px fixed heights),
   8px cell padding, the badge 4px under the tier name; type sizes unchanged. */
.hm-ctiers__table :is(th, td) { padding: var(--space-2) var(--space-4); border: 1px solid var(--grey-600); }
.hm-ctiers__table th:first-child { width: 27.5%; }
.hm-ctiers__table thead th {
  background: var(--primary-300);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--display-3-size);
  line-height: var(--display-3-lh);
  text-transform: uppercase;
  text-align: center;
  vertical-align: top; /* the tier names stay on one line across the row while Business carries its note */
}
.hm-ctiers__table tbody :is(th, td) { font-size: var(--body-size); line-height: var(--body-lh); }
.hm-ctiers__table tbody th { background: var(--surface-beige); text-align: left; font-weight: 600; }
.hm-ctiers__table td { background: var(--color-white); text-align: center; }
/* The sheet's figures (2026-10-16). The purchase volume decides the tier, so its row (the design's tall one) reads
   larger. Business is the popular choice (user): gold from head to foot with black type, as the recommended column
   of every table on the site (.dtable__best). */
.hm-ctiers__table tbody tr:first-child td { font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 600; }
.hm-ctiers__table .hm-ctiers__pop { background: var(--color-primary); color: var(--color-black); }
.hm-ctiers__table td.hm-ctiers__pop { font-weight: 600; }
/* The badge stands out (comment cmvamnr2yo0pl): black with gold type on the gold head, square like the page's buttons */
.hm-ctiers__note { display: block; width: fit-content; margin: var(--space-1) auto 0; padding: var(--space-1) var(--space-3); background: var(--color-black); color: var(--color-primary); font-family: var(--font-body); font-weight: 600; font-size: var(--body-size); line-height: var(--body-lh); text-transform: none; }
.hm-ctiers__yes { display: inline-block; width: 20px; height: 20px; vertical-align: middle; } /* base.css makes every svg a block, which would pin it left */
/* Phones: the table turns into three tier cards, one under another (comment cmvargiodmoy3). js/home.js builds them
   from the table itself, so the figures live in one place; without the script the folded table below still reads.
   Each card: tier name (Business with its badge), the purchase volume that sets the tier, then every benefit with
   its value, tick or minus. Business is gold from top to bottom, as its column in the table. */
.hm-ctiers__cards { display: none; margin: 0; padding: 0; list-style: none; }
.hm-ctiers__card { border: 1px solid var(--grey-600); background: var(--color-white); color: var(--text-primary); }
.hm-ctiers__card--pop { background: var(--color-primary); color: var(--color-black); }
.hm-ctiers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--grey-600);
  background: var(--primary-300);
}
.hm-ctiers__card--pop .hm-ctiers__head { background: none; }
.hm-ctiers__name { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; }
.hm-ctiers__badge { padding: var(--space-1) var(--space-3); background: var(--color-black); color: var(--color-primary); font-weight: 600; font-size: var(--body-size); line-height: var(--body-lh); }
.hm-ctiers__vol { display: flex; flex-direction: column; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--grey-600); }
.hm-ctiers__volnum { font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-lh); }
.hm-ctiers__perks { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4) var(--space-6) var(--space-6); }
.hm-ctiers__perk { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
/* the value keeps its own width (up to half the row), the benefit name takes the rest; tick and minus never shrink */
.hm-ctiers__perk dt { flex: 1 1 0; min-width: 0; }
.hm-ctiers__perk dd { display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; max-width: 50%; min-height: var(--body-lh); margin: 0; font-weight: 600; text-align: end; }
.hm-ctiers__perk :is(.hm-ctiers__yes, .hm-ctiers__no) { flex: none; }
.hm-ctiers__no { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("../assets/icons/minus.svg") no-repeat center / contain; mask: url("../assets/icons/minus.svg") no-repeat center / contain; }

/* ---------- Sales consultants (and the other rows that run past the edges) ---------- */
.hm-consult { padding-block: var(--space-16) var(--space-24); background: var(--surface-beige); }
.hm-roll { margin-top: var(--space-12); --marquee-dur: 60s; }
.hm-roll__track { display: flex; align-items: flex-start; width: max-content; margin: 0; padding: 0; list-style: none; }
.marquee.is-marquee.hm-roll--back .marquee__track { animation-direction: reverse; }
.hm-person { flex: none; display: flex; flex-direction: column; gap: var(--space-4); width: 392px; margin-right: var(--space-8); padding: var(--space-4); background: var(--color-white); color: var(--text-primary); }
.hm-person__top { display: grid; grid-template-columns: 198px minmax(0, 1fr); align-items: start; }
.hm-person__photo { display: block; width: 100%; aspect-ratio: var(--ty-le-tu_van_vien); object-fit: cover; }
/* The details read at Body 16 (comment cmvko840u3027, 2026-10-23: "Font size content ở đây đang hơi nhỏ", was 12); the
   name bar sits 32px down instead of 64 so the longer column still ends beside the photo. */
.hm-person__info { padding: var(--space-8) 0 0 var(--space-2); font-size: var(--body-size); line-height: var(--body-lh); }
.hm-person__name {
  margin-inline-start: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  text-transform: uppercase;
}
.hm-person__role { margin-top: var(--space-1); font-family: var(--font-heading); text-transform: uppercase; }
.hm-person__role + p { margin-top: var(--space-6); }
.hm-person__info p + p:not(.hm-person__role) { margin-top: var(--space-3); }
.hm-person__info strong { font-weight: 600; }
.hm-person__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--primary-300);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--display-3-size);
  line-height: var(--display-3-lh);
  text-transform: uppercase;
  transition: background-color .2s ease;
}
.hm-person__wa .icon { width: 32px; height: 32px; }
.hm-person__wa:hover { background: var(--color-primary); }
/* Dragging the consultants row (comment cmvalz6lzfypv, js/home.js): a grab cursor; during a drag the row holds
   still and nothing in it gets selected or picked up as an image. */
.hm-roll[data-hm-drag=""].is-marquee { cursor: grab; touch-action: pan-y; }
.is-marquee.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.is-marquee.is-dragging .marquee__track { animation-play-state: paused; }
[data-hm-drag] img { -webkit-user-drag: none; }
/* Reviews, Certificate and Social rows (data-hm-drag="phone"): on phones a finger holds the row still and drags it
   (comments cmvasni6bjipu, cmvasnrugpwb5, cmvasnvas05ic). On a touch screen :hover sticks after a tap, which would
   leave the row paused, so there the row runs again as soon as the finger lifts. */
@media (max-width: 767px) {
  [data-hm-drag="phone"].is-marquee { touch-action: pan-y; }
}
@media (hover: none) {
  [data-hm-drag].is-marquee:not(.is-dragging):hover .marquee__track { animation-play-state: running; }
}

/* ---------- OEM / ODM ---------- */
.hm-oem { padding-top: var(--space-16); }
.hm-oem__starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-12); }
.hm-start { position: relative; }
.hm-start__media { margin: 0; overflow: hidden; }
.hm-start__media img { display: block; width: 100%; aspect-ratio: var(--ty-le-oem_khoi_dau); object-fit: cover; }
.hm-start__tag {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  padding: var(--space-1) var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  text-transform: uppercase;
}
.hm-start__body { position: relative; margin: calc(var(--space-16) * -1) var(--space-12) 0; padding: var(--space-4) var(--space-4) var(--space-6); background: var(--surface-beige); color: var(--text-primary); }
.hm-start__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--display-3-size); line-height: var(--display-3-lh); }
.hm-start__body p { margin-top: var(--space-1); font-size: var(--caption-size); line-height: var(--caption-lh); }
/* The four steps straddle the dark section and the white below: dark down to 74% of the photos */
.hm-oem__lower {
  --oem-img: calc((var(--hm-content) - 3 * var(--space-16) * 2) / 4);
  padding-block: var(--space-16);
  background: linear-gradient(to bottom, transparent calc(var(--space-16) + var(--oem-img) * .74), var(--color-white) 0);
  color: var(--text-primary);
}
.hm-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(var(--space-16) * 2); margin: 0; padding: 0; list-style: none; }
.hm-flow__step { position: relative; text-align: center; }
/* Long thin arrow (lucide move-right) centred in the gap between two photos */
.hm-flow__step + .hm-flow__step::before {
  content: "";
  position: absolute;
  top: calc(var(--oem-img) / 2);
  left: calc(var(--space-16) * -1);
  width: 36px;
  height: 36px;
  translate: -50% -50%;
  background: var(--color-primary);
  -webkit-mask: url("../assets/icons/move-right.svg") no-repeat center / contain;
          mask: url("../assets/icons/move-right.svg") no-repeat center / contain;
}
.hm-flow__media { position: relative; overflow: hidden; }
.hm-flow__media img { display: block; width: 100%; aspect-ratio: var(--ty-le-khoi_vuong); object-fit: cover; }
.hm-flow__title { margin-top: var(--space-6); font-family: var(--font-heading); font-weight: 400; font-size: var(--h6-size); line-height: 1; }
.hm-flow__text { margin-top: var(--space-2); font-size: var(--body-size); line-height: var(--body-lh); } /* 12 → 16 everywhere (comment cmvasucde5053: 14 asked, not in the DS) */
.hm-oem__lower .hm-btn { margin-top: var(--space-16); }

/* ---------- Professional support ---------- */
.hm-support { padding-block: var(--space-16) var(--space-12); }
.hm-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); margin-top: var(--space-12); }
.hm-topic {
  display: inline-grid;
  place-items: center;
  min-width: 130px;
  min-height: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-primary);
  background: var(--color-white);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  text-transform: uppercase;
  transition: background-color .2s ease;
}
/* Bergola's line box sits high on capitals: the label is trimmed to cap height so centring centres the ink */
.hm-topic > span { display: block; text-box: trim-both cap alphabetic; }
.hm-topic:hover { background: var(--primary-100); }
.hm-topic[aria-current="page"], .hm-topic[aria-pressed="true"] { background: var(--color-primary); }
/* Topic buttons filter the cards in place (comment cmvamofd2g84o, js/home.js); the group shows only once the script runs */
button.hm-topic { cursor: pointer; appearance: none; }
.hm-topics[hidden], .hm-post[hidden], .hm-posts[hidden], .hm-posts-empty[hidden] { display: none; }
/* A blog category with no post yet (Factory Stories, Hair Trends): one line in place of the cards, with the way back. */
.hm-posts-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-12) 0 0; font-size: var(--body-size); line-height: var(--body-lh); text-align: center; }
.hm-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); margin: var(--space-12) 0 0; padding: 0; list-style: none; }
.hm-post__link { display: flex; flex-direction: column; height: 100%; background: var(--color-white); color: var(--text-primary); }
.hm-post__media { display: block; aspect-ratio: var(--ty-le-tin); background: var(--primary-300); }
/* Measured from the design card: ~16px side padding, title on one line (design ~18px; DS has 16 or 20,
   and 20 breaks this title onto two lines), short gaps; the 6px design captions are raised to the DS 12px floor. */
.hm-post__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-3) var(--space-4); }
.hm-post__tag { font-family: var(--font-heading); font-size: var(--caption-size); line-height: var(--caption-lh); text-transform: uppercase; color: var(--primary-600); }
.hm-post__title { margin-top: var(--space-2); font-family: var(--font-heading); font-size: var(--body-size); line-height: var(--body-lh); }
.hm-post__desc { margin-top: var(--space-1); font-size: var(--caption-size); line-height: var(--caption-lh); }
.hm-post__meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-4); font-size: var(--caption-size); line-height: var(--caption-lh); }
.hm-post__more { display: inline-flex; align-items: center; gap: var(--space-1); text-transform: uppercase; }
.hm-post__more .icon { width: 12px; height: 12px; }
.hm-support .hm-btn { margin-top: var(--space-12); }

/* ---------- Reviews, certificate, social: the design's empty frames ---------- */
.hm-reviews, .hm-social { padding-block: var(--space-16) var(--space-24); background: var(--color-white); }
.hm-frame { flex: none; width: 384px; margin-right: var(--space-12); background: var(--surface-beige); }
.hm-frame--review { aspect-ratio: var(--ty-le-danh_gia); }
.hm-frame--social { aspect-ratio: var(--ty-le-bai_social); overflow: hidden; }
.hm-frame--social img { display: block; width: 100%; height: 100%; object-fit: cover; } /* demo posts, comment cmvamo2ildqnr */
.hm-cert { padding-block: var(--space-16) calc(var(--space-16) * 2); }
.hm-cert__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
  width: min(1664px, 100% - 2 * var(--space-6));
  margin: var(--space-12) auto 0;
  padding: 0;
  list-style: none;
}
.hm-frame--cert { width: auto; margin: 0; aspect-ratio: var(--ty-le-chung_chi); background: var(--color-white); }
/* The certificate grid sits in a marquee (it drifts on phones only): from 768px up it stays the grid, the loop's
   copies hidden and the track still */
.hm-cert__roll { --marquee-dur: 40s; }
@media (min-width: 768px) {
  .hm-cert__roll.marquee { overflow: visible; }
  .marquee.is-marquee.hm-cert__roll .hm-cert__grid { animation: none; }
  .hm-cert__grid > [aria-hidden="true"] { display: none; }
}
.hm-social__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-16); padding-inline: var(--space-6); }

/* ---------- Contact (the site's .contact block, at the design's sizes) ---------- */
.hm-contact { padding-block: var(--space-24) calc(var(--space-16) * 2); }
.hm-contact .contact__inner { max-width: var(--container-max); padding-inline: var(--hm-gutter); } /* the page's grid, gutters included */
/* The heading column never shrinks below its longest line; the form gives way instead (1025–1439px) */
.hm-contact .contact__info { flex-shrink: 0; max-width: 600px; gap: var(--space-8); }
.hm-contact .contact__benefits { gap: var(--space-8); }
.hm-contact .contact__benefits p { font-size: var(--h6-size); line-height: var(--h6-lh); }
.hm-contact .contact__form { flex: 0 1 690px; min-width: 0; gap: var(--space-8); } /* shrinks on laptops: it ran 10px past the frame at 1280 */
.hm-contact .contact__title { font-weight: 600; text-transform: none; } /* .ai: SVN-Gilroy SemiBold */
.hm-contact .form__grid { gap: var(--space-8) var(--space-12); }
.hm-contact .field label { font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--text-primary); }
.hm-contact .contact__submit { height: auto; padding: var(--space-2) var(--space-4); font-size: var(--h5-size); line-height: var(--h5-lh); }
/* Wide screens, measured on the design: the text column starts on the page grid (its gold bar out in the
   gutter), the heading is larger than the other section titles and the items sit further apart. */
@media (min-width: 1440px) {
  .hm-contact .contact__info { max-width: 640px; }
  /* .ai: heading text, subhead and item icons share one left edge; the gold bar sticks out 12px past it */
  .hm-contact .hm-title { margin-left: calc(var(--space-3) * -1); font-size: var(--h1-size); line-height: 1.1; }
  .hm-contact .contact__subhead { font-size: var(--display-3-size); line-height: var(--display-3-lh); font-weight: 600; }
  .hm-contact .contact__benefits { gap: var(--space-12); }
}

/* ---------- FAQ (the site's .faq block, at the design's sizes) ---------- */
.hm-faq { padding-block: var(--space-24); }
.hm-faq .faq__inner { gap: var(--space-12); }
.hm-faq .faq__list { max-width: 875px; }
.hm-faq .faq-item { border-bottom-color: var(--grey-600); }
.hm-faq .faq-item:last-child { border-bottom: 0; }
/* The design's questions are sentence case and regular weight (the site's .faq uses bold capitals) */
.hm-faq .faq-item__q { font-size: var(--display-3-size); line-height: var(--display-3-lh); font-weight: 400; text-transform: none; }
.hm-faq .faq-item__summary { padding-block: var(--space-6); }

/* ======================================================================
   Motion (user 2026-10-16: "thêm motion mạnh … hiện tại đang bị đứng im").
   Transform and opacity only; all of it off under reduced motion.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Contact marks lift a little under the pointer (they keep their brand colours) */
  @media (hover: hover) { .hm-channels a:hover { translate: 0 calc(var(--space-1) * -1); } }
  /* Banner: the words rise in turn, the factory settles from a slow zoom and drifts as the page leaves it */
  .hm-hero__welcome, .hm-hero__line, .hm-hero .hm-btn { animation: hm-rise 1.1s var(--hm-ease) both; }
  .hm-hero__line:nth-child(1) { animation-delay: .15s; }
  .hm-hero__line:nth-child(2) { animation-delay: .3s; }
  .hm-hero__line:nth-child(3) { animation-delay: .45s; }
  .hm-hero .hm-btn { animation-delay: .65s; }
  .hm-hero__bg { animation: hm-settle 2.4s var(--hm-ease) both; }

  /* Everything else rises in as it enters the screen, in turn where it repeats (js/main.js adds .is-in) */
  .js .hm [data-reveal] {
    opacity: 0;
    transform: translateY(var(--space-16));
    transition: opacity .9s var(--hm-ease), transform 1.2s var(--hm-ease);
    transition-delay: calc(var(--d, 0) * 120ms);
  }
  .js .hm [data-reveal].is-in { opacity: 1; transform: none; }
  /* Titles come up from further down; the reasons' badges turn in */
  .js .hm .hm-title[data-reveal] { transform: translateY(var(--space-24)); }
  .js .hm .hm-reason .hm-reason__icon { transform: scale(.5) rotate(-120deg); transition: transform 1.2s var(--hm-ease); transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
  .js .hm .hm-reason.is-in .hm-reason__icon { transform: none; }
  /* Photos are uncovered by a white sheet that slides away, and settle from a light zoom */
  .js .hm :is(.hm-why__media, .hm-salons__media, .hm-video, .hm-ship__map)[data-reveal] { opacity: 1; transform: none; }
  .js .hm :is(.hm-why__media, .hm-salons__media, .hm-ship__map) { position: relative; overflow: hidden; }
  .js .hm :is(.hm-why__media, .hm-salons__media, .hm-video, .hm-ship__map)[data-reveal]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--color-white);
    transform-origin: 100% 50%;
    transition: transform 1.3s var(--hm-ease) .1s;
  }
  .js .hm .hm-dark :is(.hm-salons__media, .hm-video)[data-reveal]::after { background: var(--surface-dark); }
  .js .hm :is(.hm-why__media, .hm-salons__media, .hm-video, .hm-ship__map)[data-reveal].is-in::after { transform: scaleX(0); }
  .js .hm :is(.hm-why__media, .hm-salons__media, .hm-ship__map)[data-reveal] img { scale: 1.15; transition: scale 1.8s var(--hm-ease); }
  .js .hm :is(.hm-why__media, .hm-salons__media, .hm-ship__map)[data-reveal].is-in img { scale: 1; }
  /* The step numbers pop once their card is in */
  .js .hm [data-reveal] .hm-step__num { scale: 0; transition: scale .6s var(--hm-ease) calc(var(--d, 0) * 120ms + .5s); }
  .js .hm [data-reveal].is-in .hm-step__num { scale: 1; }

  /* Pointer: cards lift, photos lean in */
  .hm-easy__card, .hm-post__link, .hm-person, .hm-product, .hm-tourcard, .hm-start { transition: translate .5s var(--hm-ease), box-shadow .5s var(--hm-ease); }
  .hm-easy__media img, .hm-start__media img, .hm-flow__media img, .hm-step__media img, .hm-product img, .hm-end img, .hm-tier__media img { transition: scale 1s var(--hm-ease); }
  @media (hover: hover) {
    :is(.hm-easy__card, .hm-post__link, .hm-person, .hm-product, .hm-tourcard, .hm-start):hover { translate: 0 calc(var(--space-2) * -1); box-shadow: var(--shadow-lg); }
    .hm-easy__card:hover img, .hm-start:hover img, .hm-flow__step:hover img, .hm-step:hover img, .hm-product:hover img, .hm-end:hover img, .hm-tier:hover .hm-tier__media img { scale: 1.06; }
    .hm-reason:hover .hm-reason__icon { rotate: 12deg; }
  }
  .hm-reason__icon { transition: rotate .6s var(--hm-ease); }

  /* While a photo crosses the screen it drifts inside its frame (scroll timeline, no listeners) */
  @supports (animation-timeline: view()) {
    .hm-hero__bg { animation: hm-settle 2.4s var(--hm-ease) both, hm-leave linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
    .hm-easy__media img, .hm-start__media img, .hm-flow__media img, .hm-step__media img, .hm-video img { animation: hm-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
/* Headings rise line by line from behind a mask (comment cmvamgvbovcfo: "slide up cho các heading, motion mạnh").
   js/home.js wraps each designed line (split at <br>) in .hm-line > .hm-line__in and adds .is-up when the heading
   reaches the screen; without the script, or with reduced motion, nothing is wrapped and the headings stand. The
   mask clips only below the line (room for descenders), never sideways, so gold bars reaching past the text stay
   whole. The heading itself no longer fades in: its lines carry the entrance. */
.hm-line { display: block; clip-path: inset(-0.5em -100vw -0.15em -100vw); }
.hm-line__in { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hm .hm-heads, .js .hm .hm-heads[data-reveal] { opacity: 1; transform: none; transition: none; }
  .hm-heads .hm-line__in { transform: translateY(115%); transition: transform 1.1s var(--hm-ease); transition-delay: calc(var(--line, 0) * 110ms); }
  .hm-heads.is-up .hm-line__in { transform: none; }
  .hm-hero__line.hm-line { animation: none; }
  .hm-hero__line .hm-line__in { animation: hm-up 1.2s var(--hm-ease) both; animation-delay: calc(.15s + var(--line, 0) * .15s); }
}
@keyframes hm-up { from { transform: translateY(115%); } }
/* Reduced motion: the drifting rows hold still and wrap, centred, instead of becoming a sideways strip
   (no section scrolls sideways, user 2026-10-15). */
@media (prefers-reduced-motion: reduce) {
  .hm-roll.marquee { overflow: visible; }
  .hm-roll__track { flex-wrap: wrap; justify-content: center; gap: var(--space-6); width: auto; padding-inline: var(--space-6); }
  .hm-roll__track > * { margin-right: 0; }
}
@keyframes hm-rise { from { opacity: 0; transform: translateY(var(--space-16)); } }
@keyframes hm-settle { from { scale: 1.12; } }
@keyframes hm-leave { to { translate: 0 18%; } }
@keyframes hm-drift { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } }

/* ======================================================================
   The new sections on smaller screens
   ====================================================================== */
@media (max-width: 1279px) {
  .hm-reason__icon { width: 140px; height: 140px; }
  .hm-reason__icon .icon { width: 69px; height: 69px; }
  .hm-ship__card { padding: var(--space-8); }
  .hm-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .hm-ship { background: linear-gradient(to bottom, transparent calc(var(--space-16) * 2), var(--color-white) 0); }
  .hm-ship__inner { grid-template-columns: minmax(0, 1fr); }
  .hm-ship__map, .hm-ship__card { grid-column: 1; }
  .hm-ship__card { grid-row: 2; margin: calc(var(--space-12) * -1) var(--space-8) 0; }
  .hm-easy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hm-oem__starts { gap: var(--space-6); }
  .hm-start__body { margin-inline: var(--space-6); }
  .hm-oem__lower { background: var(--color-white); }
  .hm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
  .hm-flow__step::before { display: none; }
  .hm-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hm-cert__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hm-contact .contact__inner { flex-direction: column; }
  .hm-contact .contact__form { flex-basis: auto; width: 100%; }
}
@media (max-width: 767px) {
  .hm-btn--md { font-size: var(--h6-size); line-height: var(--h6-lh); }
  .hm-salonswhy, .hm-easy, .hm-ctiers, .hm-oem, .hm-support { padding-top: var(--space-12); }
  .hm-consult, .hm-reviews, .hm-social { padding-block: var(--space-12) var(--space-16); }
  .hm-cert { padding-block: var(--space-12) var(--space-16); }
  .hm-contact, .hm-faq { padding-block: var(--space-16); }
  .hm-reasons { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); margin-top: var(--space-12); }
  .hm-reason__icon { width: 112px; height: 112px; border-width: 3px; }
  .hm-reason__icon .icon { width: 56px; height: 56px; }
  .hm-reason__title { margin-top: var(--space-6); }
  .hm-reason p, .hm-ship__card p { font-size: var(--body-size); line-height: var(--body-lh); }
  .hm-reason p br, .hm-lead--center br { display: none; }
  .hm-ship { padding-bottom: var(--space-16); }
  .hm-ship__badges { left: var(--space-3); bottom: var(--space-3); gap: var(--space-2); }
  .hm-ship__badge { padding: var(--space-1) var(--space-2); gap: var(--space-2); }
  .hm-ship__badge .icon { width: 28px; height: 28px; }
  .hm-ship__badge strong { font-size: var(--body-size); line-height: var(--body-lh); }
  .hm-ship__card { margin: 0; padding: var(--space-6); } /* under the map, not over its two badges (comment cmvarfm4o4puc) */
  /* the button spans the card and splits its label into two even lines, no lone "RATES" (comment cmvasm9jni1uu) */
  .hm-ship__card .hm-btn { align-self: stretch; text-wrap: balance; }
  .hm-easy__grid, .hm-oem__starts { grid-template-columns: minmax(0, 1fr); }
  .hm-easy__grid { margin-top: var(--space-8); }
  /* Phones: each row head folds onto a band of its own above its three cells, so the tiers still read across
     (the site's .dtable--fold, in this table's ruled look; the ARIA roles in the markup keep it a table).
     Every cell draws its right and bottom rule, the row its left one, the head row the top one. */
  .hm-ctiers__table, .hm-ctiers__table :is(thead, tbody) { display: block; }
  .hm-ctiers__table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--grey-600); }
  .hm-ctiers__table thead tr { border-top: 1px solid var(--grey-600); }
  .hm-ctiers__table :is(th, td) { padding: var(--space-2); border: 0; border-right: 1px solid var(--grey-600); border-bottom: 1px solid var(--grey-600); }
  .hm-ctiers__table th:first-child { width: auto; }
  .hm-ctiers__table thead th { height: auto; font-size: var(--caption-size); line-height: var(--caption-lh); }
  .hm-ctiers__table thead th:first-child { display: none; }
  .hm-ctiers__table tbody th, .hm-ctiers__table tbody tr:first-child th { grid-column: 1 / -1; height: auto; }
  .hm-ctiers__table tbody tr:first-child td { font-size: var(--body-size); line-height: var(--body-lh); }
  .hm-ctiers__note { margin-top: var(--space-1); padding: var(--space-1); font-size: var(--caption-size); line-height: var(--caption-lh); }
  .hm-ctiers__cards { display: grid; gap: var(--space-4); }
  .hm-ctiers__wrap.has-cards .hm-ctiers__table { display: none; }
  /* Phones: the consultants become a row the finger drags sideways, about 1.3 cards in view so the next one shows
     (comment cmvko6rlrcsti, 2026-10-23; before, one under another, three then "See more"). Native scrolling with snap
     points and the page gutter at both ends; the copies made for the desktop loop are not shown. A 258px card has no
     room for the photo beside the details, so the photo stands on top with the name bar across its foot (user's
     choice, 2026-10-23). position: relative keeps any visually hidden text inside the scroller. */
  .hm-consult .hm-roll[data-hm-drag] { position: relative; container-type: inline-size; margin-top: var(--space-8); padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hm-gutter); scrollbar-width: none; cursor: auto; touch-action: pan-x pan-y; }
  .hm-consult .hm-roll::-webkit-scrollbar { display: none; }
  .hm-consult .hm-roll .marquee__track { display: flex; gap: var(--space-4); width: max-content; padding-inline: var(--hm-gutter); animation: none; }
  .hm-consult .hm-roll__track > [aria-hidden="true"] { display: none; }
  .hm-person { width: calc((100cqw - var(--hm-gutter) - var(--space-4)) / 1.3); margin-right: 0; padding: var(--space-4); gap: var(--space-4); scroll-snap-align: start; }
  .hm-person__top { grid-template-columns: minmax(0, 1fr); }
  .hm-person__info { padding: var(--space-4) 0 0; }
  .hm-person__name { width: fit-content; margin: calc(var(--space-8) * -1) 0 0; font-size: var(--h6-size); line-height: var(--h6-lh); }
  .hm-person__role + p { margin-top: var(--space-2); }
  .hm-person__wa { gap: var(--space-2); padding: var(--space-2); font-size: var(--caption-size); line-height: var(--caption-lh); }
  .hm-person__wa .icon { width: 20px; height: 20px; }
  .hm-start__tag { top: var(--space-3); right: var(--space-3); font-size: var(--body-size); line-height: var(--body-lh); }
  .hm-start__body { margin: calc(var(--space-8) * -1) var(--space-3) 0; }
  .hm-start__title { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .hm-flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } /* one step per row, same rhythm as the production steps (comment cmvarhigsx63a) */
  /* The seven topic buttons keep one row that scrolls sideways (comment cmvarhou5xqdx: a row of buttons, not a
     section). The row runs out to the screen edges so the button cut off there shows there is more; the 4px above
     and below keeps the focus ring inside the scroll box. */
  .hm-topics {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-2);
    margin: var(--space-8) calc(var(--hm-gutter) * -1) 0;
    padding: var(--space-1) var(--hm-gutter);
    overflow-x: auto;
    scroll-padding-inline: var(--hm-gutter);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* the buttons fade out across the gutters, so one passing the screen edge reads as "more this way" */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hm-gutter), #000 calc(100% - var(--hm-gutter)), transparent);
            mask-image: linear-gradient(to right, transparent, #000 var(--hm-gutter), #000 calc(100% - var(--hm-gutter)), transparent);
  }
  .hm-topics::-webkit-scrollbar { display: none; }
  .hm-topic { flex: none; min-width: 0; padding-inline: var(--space-3); scroll-snap-align: start; }
  /* The posts make one row that scrolls sideways (comment cmvas9pz21ovq, a list the user asked for, not a page
     section), out to the screen edges so the next card shows; in that row the cards do not rise in one by one,
     or a card swiped into view would still be blank. */
  .hm-posts {
    position: relative; /* holds the cards' .sr-only text inside the scroll box, or it widens the phone's page to 1150px */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: var(--space-4);
    margin: var(--space-8) calc(var(--hm-gutter) * -1) 0;
    padding-inline: var(--hm-gutter);
    overflow-x: auto;
    scroll-padding-inline: var(--hm-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .hm-posts::-webkit-scrollbar { display: none; }
  .hm-post { scroll-snap-align: start; }
  .js .hm .hm-posts > [data-reveal] { opacity: 1; transform: none; }
  .hm-frame { width: 240px; margin-right: var(--space-4); }
  /* Certificates drift sideways like the review row once js/main.js has made the loop (comment cmvasa0fma52f);
     without it (reduced motion, no script) they keep the 2-column grid (cmvari30a5b6j) */
  .hm-cert__roll:not(.is-marquee) .hm-frame--cert { width: auto; margin: 0; }
  .hm-cert__roll.is-marquee .hm-cert__grid { display: flex; width: max-content; gap: 0; margin: var(--space-8) 0 0; }
  .js .hm .hm-cert__roll.is-marquee [data-reveal] { opacity: 1; transform: none; }
  .hm-cert__grid { gap: var(--space-4); margin-top: var(--space-8); }
  .hm-social__links { margin-top: var(--space-8); }
  .hm-contact .contact__benefits p { font-size: var(--body-size); line-height: var(--body-lh); }
  .hm-contact .form__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .hm-faq .faq-item__q { font-size: var(--h6-size); line-height: var(--h6-lh); }
  .hm-faq .faq-item__summary { padding-block: var(--space-4); }
}