/* ============================================================
   Luxshine Hair — Responsive (desktop-first; design base = 1728)
   Breakpoints: 1024 (tablet), 640 (mobile)
   Goal: no horizontal overflow, readable, sensible stacking.
   ============================================================ */

/* ---------- <= 1200px : tighten gutters ---------- */
@media (max-width: 1200px) {
  .diff__content { padding-right: var(--space-12); }
  .diff__row { gap: var(--space-10); }
  .footer { padding-inline: var(--space-12); }
}

/* ---------- <= 1024px : tablet ---------- */
@media (max-width: 1024px) {
  /* Header */
  .topbar__inner, .navbar__inner { padding-inline: var(--space-6); gap: var(--space-4); }
  .topbar__center { display: none; }
  .menubar__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-inline: var(--space-4); }
  .menutab { white-space: nowrap; }
  /* hover mega menu does not fit a scrolling touch menubar — tabs stay plain links */
  .mega { display: none; }
  .has-mega:hover .menutab__chev, .has-mega:focus-within .menutab__chev { transform: none; }

  /* Hero */
  .hero { min-height: 520px; }
  .hero__content { max-width: 60%; }

  /* Stats */
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-10) 0; }
  .stat:nth-child(odd)::before { display: none; }
  .stat:nth-child(3)::before, .stat:nth-child(4)::before { content: none; }
  /* back to centered when the row is no longer a single 4-across line */
  .stats__inner .stat:first-child, .stats__inner .stat:last-child { align-items: center; text-align: center; padding-inline: var(--space-6); }

  /* Quality */
  .quality__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .quality__video { max-width: 640px; }

  /* Beauty — stack the 2-column split: photo band on top, text below */
  .beauty { display: block; min-height: 0; }
  .beauty__media { position: relative; height: 360px; min-height: 0; padding: 0; }
  .beauty__media::after { display: none; }
  .buying__steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
  .buying-step:nth-of-type(4), .buying-step:nth-of-type(5), .buying-step:nth-of-type(6) { grid-column: auto; grid-row: auto; }
  .buying-step::before { display: none; }
  .mfg__metrics { grid-template-columns: repeat(3, 1fr); }
  .mfg__stat + .mfg__stat::before { display: none; }
  .mfg__stat-num { white-space: normal; }
  .beauty__inner { display: block; padding-block: var(--space-12); padding-inline: var(--space-6); }
  .beauty__content { grid-column: auto; width: 100%; max-width: 640px; margin-inline: auto; }

  /* Category */
  .category__grid { grid-template-columns: repeat(3, 1fr); }

  /* OEM */
  .oem__inner { grid-template-columns: 1fr; gap: var(--space-12); }
  .oem__intro { position: static; }
  .oem__stack .oem-card { position: static; }

  /* Buying */
  .buying__steps { flex-wrap: wrap; gap: var(--space-10) var(--space-8); }
  .buying-step { flex: 1 1 40%; }
  .buying__track, .buying__progress { display: none; }

  /* Difference */
  .diff__row { flex-direction: column; }
  .diff__media { flex: 1 1 auto; width: 100%; height: auto; }
  .diff__content { padding: var(--space-12) var(--space-6); }

  /* Sourced */
  .sourced__grid { grid-template-columns: 1fr; gap: var(--space-12); max-width: 520px; margin-inline: auto; }

  /* Contact */
  .contact__inner { flex-direction: column; gap: var(--space-12); }
  .contact__info, .contact__form { flex: 1 1 auto; width: 100%; }

  /* Blog */
  .blog__row { grid-template-columns: repeat(2, 1fr); }
  .carousel-btn { display: none; }

  /* Footer */
  .footer__links { gap: var(--space-2) var(--space-3); }
}

/* ---------- <= 640px : mobile ---------- */
@media (max-width: 640px) {
  .btiers { grid-template-columns: 1fr; }
  .consult-card { flex-basis: 100%; }
  .oem__start { grid-template-columns: 1fr; }
  .oem__grid { grid-template-columns: 1fr; }
  .review__grid { grid-template-columns: 1fr; }
  .buying__steps { grid-template-columns: 1fr; }
  .feedback-shot__media { height: 360px; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .stat__num { white-space: normal; }
  .mfg__metrics { grid-template-columns: repeat(2, 1fr); }
  .mfg__stat + .mfg__stat::before { display: none; }
  .mfg__stat-num { white-space: normal; }
  .mfg__tour-grid { grid-template-columns: 1fr; }
  :root {
    --h1-size: 34px; --h1-lh: 42px;
    --h2-size: 30px; --h2-lh: 38px;
    --h3-size: 28px; --h3-lh: 36px;
  }
  h1 { font-size: 32px; line-height: 40px; }

  .section { padding-block: var(--space-16); }
  .sec-head__title { font-size: 30px; line-height: 38px; }
  .hl { background: linear-gradient(to top, var(--color-primary) 14px, transparent 14px); }

  /* Header */
  .topbar__inner { font-size: 12px; justify-content: space-between; }
  .topbar__left { flex: 0 1 auto; }
  .topbar__right { flex: 0 1 auto; text-align: right; }
  .navbar__inner { gap: var(--space-3); }
  .lang span { display: none; }
  .navbar__logo img { height: 40px; }
  .navbar__actions { gap: var(--space-3); }

  /* Hero */
  .hero { min-height: 460px; }
  .hero__content { max-width: 100%; background: rgba(255,255,255,.55); padding: var(--space-4); }
  .hero__title { font-size: 32px; line-height: 40px; }

  /* Stats */
  .stat { padding-inline: var(--space-2); }
  .stat__num { font-size: 26px; line-height: 34px; }
  .stat__icon { margin-bottom: var(--space-2); }
  .stat__label { font-size: 14px; }

  /* Category */
  .category__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .cat-card__label { font-size: 13px; padding-inline: var(--space-3); }

  /* OEM / grids */
  .oem__grid { grid-template-columns: 1fr; }
  .buying-step { flex: 1 1 100%; }

  /* Blog */
  .blog__row { grid-template-columns: 1fr; }
  .blog__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  /* Search results */
  .search-found__grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact form */
  .form__grid { grid-template-columns: 1fr; }
  .contact__title { font-size: 30px; line-height: 38px; }

  /* Entry popup — stack, hide image */
  .promo-modal { width: calc(100vw - 24px); }
  .promo-modal__grid { grid-template-columns: 1fr; }
  .promo-modal__img-col { display: none; }
  .promo-modal__form-col { padding: var(--space-6); }

  /* Press */
  .press__logos { gap: var(--space-6) var(--space-10); }
  .press__logos img { height: 40px; }

  /* Footer */
  .footer { padding: var(--space-16) var(--space-6) var(--space-8); }
  .footer__cta h2 { font-size: 28px; line-height: 36px; }
  .footer__bottom { flex-direction: column; gap: var(--space-6); align-items: flex-start; }
  .footer__links { justify-content: flex-start; }
}

/* ---------- <= 767px : phone. No breadcrumb on any page (user 2026-10-14, "bỏ breadcumb ở mobile"):
   the way back is the header menu and the browser. nav.breadcrumb outranks the .breadcrumb rules of the
   page stylesheets that load after this file. ---------- */
@media (max-width: 767px) {
  nav.breadcrumb { display: none; }
}