/* ==========================================================================
   G&B Hair — Responsive
   File: css/responsive.css   (nạp SAU style.css)
   --------------------------------------------------------------------------
   Chiến lược: desktop-first, thu nhỏ dần theo các breakpoint bên dưới.

   ≤ 1200px  Laptop
   ≤ 1024px  Tablet ngang
   ≤  900px  Tablet dọc — menu hamburger (nút 3 gạch)
   ≤  768px  Mobile lớn
   ≤  560px  Mobile
   ≤  380px  Mobile nhỏ
   ========================================================================== */


/* ==========================================================================
   ≤ 1200px — LAPTOP
   ========================================================================== */
@media (max-width: 1200px) {
  /* 9 mục menu cần chỗ — ẩn nút CTA, người dùng vẫn có nút nổi WhatsApp */
  .header__cta { display: none; }

  :root { --container: 1080px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }

}


/* ==========================================================================
   ≤ 1024px — TABLET NGANG
   ========================================================================== */
@media (max-width: 1024px) {
  .nav__list { gap: 0.5rem; }
  .nav__link { font-size: 0.8125rem; }


  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* Lưới 9:16 (Thư viện, Sản phẩm): 5 -> 4 cột */
  .ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Timeline: 4 cột -> 2 cột, bỏ đường nối ngang */
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-2xl); }
  .timeline::before { display: none; }

  .feature-item { text-align: left; }

  /* Footer: 4 cột -> 2 cột */
  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__col--brand { grid-column: 1 / -1; }
}


/* ==========================================================================
   ≤ 900px — TABLET DỌC + ĐIỆN THOẠI : menu hamburger
   Từ 900px trở xuống 8 mục menu không còn vừa một hàng -> nút 3 gạch, bấm mở
   ngăn menu trượt từ phải, nằm ngay dưới header. Chạy bằng CSS thuần
   (checkbox #navToggle); js/main.js chỉ thêm khoá cuộn, phím Esc, đóng khi bấm link.
   ========================================================================== */
@media (max-width: 900px) {
  :root { --header-h: 72px; --header-h-scrolled: 64px; }
  .logo__full { height: 40px; }
  .header.is-scrolled .logo__full { height: 36px; }
  .logo__full--footer { height: 54px; }

  /* backdrop-filter biến header thành khung chứa của phần tử fixed ->
     lớp phủ không phủ được cả màn hình. Trên màn nhỏ dùng nền trắng đặc. */
  .header.is-scrolled {
    background: var(--color-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hamburger { display: flex; }
  /* Ngăn menu lúc đóng nằm ngoài mép phải — cắt theo chiều ngang để nó không
     nới rộng trang (điện thoại sẽ thu nhỏ cả trang nếu có phần tràn ngang).
     clip (không phải hidden) nên chiều dọc vẫn tràn xuống dưới header bình thường. */
  .header { overflow-x: clip; }
  .logo,
  .header__actions { position: relative; z-index: var(--z-nav); }

  /* ---------- Ngăn menu ---------- */
  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: min(340px, 86vw);
    height: calc(100vh - var(--header-h-scrolled));
    height: calc(100dvh - var(--header-h-scrolled));
    padding: var(--space-md) var(--space-lg) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-white);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-base), visibility var(--t-base);
  }
  .nav-toggle:checked ~ .header__inner .nav {
    transform: none;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__item { border-bottom: 1px solid var(--color-border-soft); }
  .nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: var(--space-xs) var(--space-2xs);
    font-size: var(--fs-md);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
  }

  .nav__cta-mobile {
    display: inline-flex;
    justify-content: center;
    min-height: 48px;
  }

  .nav-toggle:checked ~ .nav-overlay { display: block; }

  /* ---------- products.html: bộ lọc thành ngăn kéo trượt từ trái ----------
     iPad dọc (~820px) mà giữ sidebar thì 2 cột sản phẩm chỉ còn ~240px/cột;
     cất sidebar vào nút "Lọc sản phẩm" để ảnh sản phẩm được to hơn. */
  .shop { grid-template-columns: 1fr; }

  .filter__toggle { display: inline-flex; }

  .filter {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    padding: var(--space-md);
    overflow-y: auto;
    background: var(--color-bg);
    box-shadow: var(--shadow-xl);
    transform: translateX(-100%);
    transition: transform var(--t-base);
    visibility: hidden;
  }
  .filter.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .filter__close { display: grid; }

  .filter__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(30, 13, 11, .5);
  }
  .filter__backdrop[hidden] { display: none; }

  /* Khoá cuộn nền khi ngăn kéo đang mở: xem html:has(> body.is-filter-open) trong style.css */

  /* ---------- Hero: xếp dọc, nội dung trước ---------- */
  .hero__inner { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .hero__content { text-align: center; }
  .hero__desc { margin-inline: auto; }
  .hero__usp,
  .hero__cta { justify-content: center; }

  /* Khung ảnh dọc 9:16 căn giữa dưới phần chữ */
  .hero__media { width: min(72vw, 320px); }

  /* Feature list: 2 cột -> 1 cột */
  .feature-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }

  .marquee__inner { justify-content: center; }

  /* Ẩn nút mũi tên carousel — trên cảm ứng vuốt tay tiện hơn */
  .carousel__btn { display: none; }
  /* …trừ mũi tên của slider video hero: slider này không vuốt được, cần nút */
  .carousel__btn.hero-nav { display: grid; }
  .carousel__hint { display: block; }
}


/* ==========================================================================
   ≤ 768px — MOBILE LỚN
   ========================================================================== */
@media (max-width: 768px) {


  :root {
    --fs-md: 1rem;
    --section-py: clamp(3rem, 9vw, 4rem);
  }

  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Timeline: 1 cột, căn trái cho dễ đọc */
  .timeline { grid-template-columns: 1fr; gap: var(--space-lg); }
  .timeline__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    text-align: left;
  }
  .timeline__dot {
    width: 50px; height: 50px;
    margin: 0;
    flex-shrink: 0;
  }
  .timeline__body p { margin-inline: 0; max-width: none; }

  /* Modal trên mobile */
  .modal { padding: var(--space-md); }
  .modal__figure img { max-height: 56vh; }
  .modal__nav { top: auto; bottom: -4px; }
  .modal__nav--prev { left: var(--space-md); }
  .modal__nav--next { right: var(--space-md); }
  .modal__close { top: -8px; right: 0; }

  /* Footer bottom xếp dọc */
  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal { justify-content: center; }

}


/* ==========================================================================
   < 768px — LƯỚI 9:16 (Thư viện, Sản phẩm) 3 CỘT
   Ngoại lệ duy nhất lệch mốc ≤768: theo yêu cầu chủ site, iPad dọc 768px phải
   ra 4 cột, nên mốc ở đây là "dưới 768" (767.98 để không trùng đúng 768).
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 3 cột, tràn sát mép màn hình như Instagram */
  .ig-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin-inline: calc(-1 * var(--gutter));
  }
  .ig-tile { border-radius: 0; }
}


/* ==========================================================================
   ≤ 560px — MOBILE
   ========================================================================== */
@media (max-width: 560px) {
  :root { --header-h: 64px; --header-h-scrolled: 58px; }
  .logo__full { height: 34px; }
  .header.is-scrolled .logo__full { height: 30px; }
  .logo__full--footer { height: 46px; }

  /* WhatsApp theo người phụ trách: 2 cột -> 1 cột */
  .wa-team { grid-template-columns: 1fr; gap: var(--space-sm); }


  :root {
    --gutter: 1.15rem;
    --radius-lg: 16px;
    --radius-xl: 20px;
  }


  /* Hero đầu trang (typography): bỏ chiều cao tối thiểu, chữ chìm co theo màn hình */
  .cover-slide__inner { min-height: 0; }
  .cover-word { font-size: 26vw; }

  /* Hero */
  .hero__usp { flex-direction: column; align-items: center; gap: var(--space-xs); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__stats { gap: var(--space-lg); }
  .hero__media { width: min(78vw, 300px); }

  /* Lưới về 1 cột, riêng thư viện giữ 2 cột cho đỡ dài */
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .grid--keep-2 { grid-template-columns: repeat(2, 1fr); }

  .marquee__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .faq-item summary { padding: var(--space-md); }
  .faq-item__content { padding: 0 var(--space-md) var(--space-md); }

  .testimonial-card { padding: var(--space-lg); }

  /* Footer: 1 cột */
  .footer__top { grid-template-columns: 1fr; }
  .footer__col--brand { grid-column: auto; }
  .footer__about { max-width: none; }

  /* Nút nổi nhỏ lại */
  .floating__btn { width: 50px; height: 50px; }
  .floating__btn .icon { width: 24px; height: 24px; }
  .floating__btn--top,
  .floating__btn--ig { width: 44px; height: 44px; }
  .floating__btn--ig .icon { width: 20px; height: 20px; }
  .floating__tip { display: none; }

  /* Bỏ ảnh nền CTA để tiết kiệm băng thông trên mobile */

}


/* ==========================================================================
   ≤ 380px — MOBILE NHỎ
   ========================================================================== */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }

  .hero__stats { gap: var(--space-md); }
  .hero__stat dd { font-size: var(--fs-lg); }
  .btn--lg { --btn-px: 1.5rem; }
}


/* ==========================================================================
   MÀN HÌNH RỘNG ≥ 1600px
   ========================================================================== */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}


/* ==========================================================================
   THIẾT BỊ CẢM ỨNG — bỏ hiệu ứng hover gây "dính"
   ========================================================================== */
@media (hover: none) {

  /* Nút zoom/play luôn hiện vì không có trạng thái hover */
  .gallery-card__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .btn:hover,
  .cat-card:hover,
  .testimonial-card:hover,
  .contact-card:hover,
  .gallery-card:hover,
  .floating__btn:hover { transform: none; }

  .cat-card:hover .cat-card__media img,
  .gallery-card:hover img { transform: none; }

  /* Feed video: màn hình cảm ứng vuốt tay, không cần nút lên/xuống */
  .reel-feed__nav { display: none; }
  .wa-team__item:hover { transform: none; }
}


/* ==========================================================================
   MÀN HÌNH CẢM ỨNG (ngón tay) — vùng bấm tối thiểu 44×44px
   Chỉ nới vùng bấm, không đổi bố cục; desktop dùng chuột giữ nguyên.
   ========================================================================== */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .arrow-link { min-height: 44px; }

  /* Menu ngang (iPad ngang > 900px) */
  .nav__link { padding-block: .75rem; min-width: 44px; text-align: center; }

  /* Breadcrumb: nới vùng bấm nhưng bù margin âm để thanh không cao thêm */
  .breadcrumb a { display: inline-block; padding-block: 10px; margin-block: -10px; }

  /* Footer: link xếp dọc cao đủ ngón tay, bù lại bằng cách bỏ khoảng cách */
  .footer__list { gap: 0; }
  .footer__list a,
  .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .footer__list--contact li { align-items: center; }
  .footer__list--contact .icon { margin-top: 0; }
  .footer__legal { column-gap: var(--space-lg); row-gap: 0; }
  .footer__social a { width: 44px; height: 44px; }

  /* Chấm chuyển slide nhìn nhỏ nhưng vùng bấm lớn (lớp vô hình bao quanh) */
  .cover-dots,
  .hero-dots { gap: 14px; }
  .cover-dots button,
  .hero-dots button { position: relative; }
  .cover-dots button::before,
  .hero-dots button::before {
    content: '';
    position: absolute;
    inset: -20px -7px;
  }
  .hero-dots button::before { inset: -18px -7px; }
}


/* ==========================================================================
   MÀN HÌNH NGANG THẤP (điện thoại xoay ngang)
   ========================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .modal__figure img { max-height: 48vh; }
}