/**
 * global.css — Vest Lê Hương | Design Consistency Layer
 * RULES: Gold accent only. Protect Material Symbols. Unified nav.
 *
 * Tokens:
 *   Gold:    #E6C364
 *   Burg:    #9D0208
 *   Dark:    #161310
 *   Heading: 'Noto Serif'
 *   Body/UI: 'Inter'
 */

/* ─────────────────────────────────────────────
   BASE RESET — Prevent layout shift between pages
   scrollbar-gutter: stable only applies on desktop.
   On mobile there is no physical scrollbar, so the
   "stable" slot renders as a visible vertical stripe.
───────────────────────────────────────────── */
/* Prevent FOUC: hide body content until loading screen is injected */
body:not(.lux-initialized) {
  opacity: 0 !important;
  background-color: #161310 !important;
  overflow: hidden !important;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: #161310;   /* dark bg ASAP — prevents white flash */
  color: #e9e1dc;
}

/* Desktop only: reserve scrollbar slot to prevent layout jump */
@media (min-width: 769px) {
  html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }
}

/* Mobile: NUCLEAR — hide ALL scrollbar tracks on every element */
@media (max-width: 768px) {
  * {
    scrollbar-width: none !important;       /* Firefox */
    -ms-overflow-style: none !important;    /* IE/Edge */
  }
  *::-webkit-scrollbar {
    display: none !important;               /* Chrome/Safari/WebKit */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
}

body {
  background-color: #161310;
  color: #e9e1dc;
  font-size: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─────────────────────────────────────────────
   NAV HEIGHT LOCK — all pages should offset
   main content by exactly 64px (nav height).
   Prevents "nhô lên" shift between pages.
───────────────────────────────────────────── */
:root {
  --nav-h: 64px;              /* Matches py-4 + icon height across all pages */
}

/* Force nav/header to exact height */
header.fixed,
nav.fixed,
header[class*="fixed"],
nav[class*="fixed"] {
  min-height: var(--nav-h) !important;
  box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────
   CRITICAL: Protect Material Symbols icons
   Must come FIRST before any other rules
───────────────────────────────────────────── */
.material-symbols-outlined,
.material-icons,
.material-icons-outlined,
.material-icons-round,
[class^="material"] {
  font-family: 'Material Symbols Outlined', 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: inherit;
  /* CRITICAL: icons break if these are overridden */
  letter-spacing: normal !important;
  text-transform: none !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ─────────────────────────────────────────────
   CSS VARIABLES
───────────────────────────────────────────── */
:root {
  --gold:      #E6C364;
  --gold-dim:  rgba(230, 195, 100, 0.65);
  --burg:      #9D0208;
  --dark:      #161310;
  --text:      #FFFFFF;
  --text-mute: rgba(255, 255, 255, 0.72);
  --font-head: 'Noto Serif', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* ─────────────────────────────────────────────
   1. HIDE OLD HEADERS — nav-component.js
      injects #lhv-header as replacement.
      Old fixed nav/header elements are hidden.
───────────────────────────────────────────── */
header.fixed:not(#lhv-header),
header[class*="fixed"]:not(#lhv-header),
nav.fixed:not(#lhv-drawer),
nav[class*="fixed"]:not(#lhv-drawer),
.lhv-old-header {
  display: none !important;
}

/* ─────────────────────────────────────────────
   2. NAV-COMPONENT.JS — isolation
      No rules needed here. nav-component.js
      injects its own <style> and manages all
      #lhv-header styles internally.
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   2b. NAV FONT LOCK — Absolute px to prevent cross-machine differences
       Works alongside nav-component.js which also uses 14px
       rem would vary if Chrome zoom or root font-size differs between machines
───────────────────────────────────────────── */
#lhv-header .lhv-link,
#lhv-header .lhv-dd-link,
#lhv-header .lhv-cta-btn {
  font-size: 14px !important;          /* ABSOLUTE px — immune to rem/zoom */
  font-family: 'Inter', system-ui, sans-serif !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* ─────────────────────────────────────────────
   2. LOGO — consistent style across all pages
      (image logo or text logo, both handled)
───────────────────────────────────────────── */
.lux-logo-img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  /* invert for dark bg since logo is black on white */
  filter: invert(1) brightness(2) !important;
}

/* ─────────────────────────────────────────────
   3. HEADINGS — Noto Serif, white
───────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-head) !important;
  color: var(--text) !important;
}

/* Italic inside headings → gold */
h1 em, h2 em, h3 em,
h1 i,  h2 i,  h3 i {
  color: var(--gold) !important;
  font-style: italic;
}

/* ─────────────────────────────────────────────
   4. HERO EYEBROW / LABEL TEXT → GOLD
   IMPORTANT: Only target actual label elements,
   NOT general paragraphs (avoid ALL CAPS body text bug)
───────────────────────────────────────────── */

/* Elements that are explicitly styled as labels/kickers */
[class*="label"]:not(input):not(textarea),
[class*="kicker"],
[class*="eyebrow"],
[class*="badge"],
[class*="overline"] {
  color: var(--gold) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* Text-color utility classes for gold */
[class*="text-[#e6c"],
[class*="text-[#E6C"],
[class*="text-yellow"],
[class*="text-gold"],
[class*="text-amber"] {
  color: var(--gold) !important;
}

/* ─────────────────────────────────────────────
   5. BREADCRUMBS → gold text, uppercase
───────────────────────────────────────────── */
[class*="breadcrumb"],
[class*="crumb"] {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}
[class*="breadcrumb"] *,
[class*="crumb"] * {
  color: var(--gold) !important;
  font-family: inherit !important;
}
[class*="breadcrumb"] a:hover,
[class*="crumb"] a:hover {
  color: var(--text) !important;
}

/* ─────────────────────────────────────────────
   6. SECTION BODY TEXT — Inter, muted white
       NOTE: No text-transform here (avoids ALL CAPS bug)
───────────────────────────────────────────── */
section > p,
section > div > p,
article > p {
  font-family: var(--font-body) !important;
  color: var(--text-mute) !important;
  line-height: 1.72 !important;
  /* NO text-transform - body text is never all caps */
}

/* ─────────────────────────────────────────────
   7. FOOTER
───────────────────────────────────────────── */
footer { font-family: var(--font-body) !important; }
footer h3, footer h4 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
}
footer p, footer li {
  color: rgba(255,255,255,0.58) !important;
  font-size: 0.875rem !important;
}
footer a { color: rgba(255,255,255,0.60) !important; }
footer a:hover { color: var(--gold) !important; }
footer [class*="text-[#e6c"], footer [class*="text-gold"] {
  color: var(--gold) !important;
}

/* ─────────────────────────────────────────────
   8. FORM ELEMENTS
───────────────────────────────────────────── */
input, textarea, select {
  font-family: var(--font-body) !important;
}
label:not(.material-symbols-outlined):not(.material-icons) {
  font-family: var(--font-body) !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.8125rem !important;
}
input:focus, textarea:focus, select:focus {
  outline-color: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* ─────────────────────────────────────────────
   9. FEATURE/ICON SECTIONS (architecture, verified...)
   These are Material Symbols — ensure they NEVER get
   letter-spacing or text-transform from other rules
───────────────────────────────────────────── */
.material-symbols-outlined {
  display: inline-block !important;
  line-height: 1 !important;
}

/* Color for feature icons in content areas → gold */
section .material-symbols-outlined,
section .material-icons,
div .material-symbols-outlined,
div .material-icons {
  color: var(--gold) !important;
}

/* ─────────────────────────────────────────────
   MOBILE RESPONSIVE — All pages
   Breakpoint: max-width 1023px (below lg)
───────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Header: reduce padding on mobile */
  header, nav.fixed {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide desktop nav links on mobile (drawer handles it) */
  header nav.hidden, header > nav {
    display: none !important;
  }

  /* Hero section: stack vertically */
  section[class*="flex-row"],
  section[class*="md:flex-row"] {
    flex-direction: column !important;
    min-height: unset !important;
  }

  /* Hero text: shrink massive headings */
  h1 {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    line-height: 1.1 !important;
  }
  h2 {
    font-size: clamp(1.5rem, 7vw, 2.8rem) !important;
    line-height: 1.15 !important;
  }
  h3 {
    font-size: clamp(1.1rem, 5vw, 1.8rem) !important;
  }

  /* Hero image: reasonable height on mobile */
  .hero-image-col,
  section > div[class*="flex-1"]:last-child {
    min-height: 260px !important;
    max-height: 380px !important;
  }

  /* Reduce section horizontal padding */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Make grids single-column */
  .grid[class*="md:grid-cols-2"],
  .grid[class*="md:grid-cols-3"],
  .grid[class*="md:grid-cols-4"],
  .grid[class*="lg:grid-cols-2"],
  .grid[class*="lg:grid-cols-3"],
  .grid[class*="lg:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-col grids that look ok on mobile — keep them (2 items per row for cards) */
  .grid[class*="sm:grid-cols-2"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Lookbook: force 1-col */
  .grid[class*="grid-cols-12"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .grid[class*="grid-cols-12"] > div {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    height: 300px !important;
  }

  /* CTA buttons: full width on mobile */
  [class*="flex-wrap"][class*="gap"] {
    flex-direction: column !important;
  }

  /* Showroom cards: stack & reduce padding */
  section[class*="bg-surface"] div.p-12,
  section div.p-12 {
    padding: 28px !important;
  }

  /* Timeline: simplify layout */
  #lhv-mobile-btn {
    display: flex !important;
  }

  /* Footer grid */
  footer .grid[class*="md:grid-cols-4"],
  footer .grid[class*="grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  /* Nav "Đặt Lịch Ngay" button: hide on mobile (drawer has it) */
  header > div:last-child > a[href*="tu-van"],
  header button.bg-primary-container {
    display: none !important;
  }
}

@media (max-width: 640px) {
  /* Very small phones */
  h1 { font-size: clamp(1.7rem, 8vw, 2.5rem) !important; }

  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Timeline year badge position */
  #lhv-mobile-drawer { width: 85vw !important; }
/* ═══════════════════════════════════════════════════════════════
   GLOBAL SLIDER / CAROUSEL — MOBILE OPTIMISATION
   Applies to ALL pages. Uses explicit selectors to target every
   known slider arrow variant across the site.
═══════════════════════════════════════════════════════════════ */

/* ── 1. HIDE ALL NAV ARROWS ON MOBILE ── */
@media (max-width: 768px) {
  /* blazer-nam: .gallery-btn.g-prev / .g-next (opacity toggled by hover) */
  .gallery-btn,
  .gallery-btn.g-prev,
  .gallery-btn.g-next {
    display: none !important;
  }

  /* index.html hero: .hero-arrow-btn injected by JS */
  .hero-arrow-btn,
  .md-only {
    display: none !important;
  }

  /* product-detail-vn.html: #img-prev / #img-next */
  #img-prev,
  #img-next {
    display: none !important;
  }

  /* vest-nam-tre.html: inline prev/next buttons inside .swipe-area
     (they already use `hidden lg:flex` so this is a safety net) */
  .swipe-area > button {
    display: none !important;
  }

  /* Any generic slider prev/next created by JS */
  [class*="slide-prev"],
  [class*="slide-next"],
  [class*="slick-prev"],
  [class*="slick-next"],
  [class*="swiper-button"],
  [class*="carousel-control"] {
    display: none !important;
  }
}

/* ── 2. DESKTOP: KEEP ARROWS VISIBLE ── */
@media (min-width: 769px) {
  /* Ensure gallery-btn opacity is driven by hover, not hidden */
  .gallery-btn {
    display: flex !important; /* override any accidental hide */
  }
}

/* ── 3. CSS SCROLL-SNAP + SMOOTH MOMENTUM — horizontal scroll-based sliders ──
   Works for any flex/scroll container that acts as a horizontal gallery.
   Pairs with JS swipe on .swipe-area and .card-gallery.
──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Horizontal gallery strip — full smooth scroll with momentum */
  .lux-hero-strip,
  [class*="hero-slides"],
  [class*="slides-track"],
  [class*="carousel-track"],
  [class*="slick-track"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-snap-stop: always !important;         /* one slide per swipe */
    scroll-behavior: smooth !important;          /* smooth deceleration */
    -webkit-overflow-scrolling: touch !important;/* iOS momentum */
    scrollbar-width: none !important;
    /* Axis-lock: let browser handle horizontal vs vertical decision */
    touch-action: pan-x !important;
  }
  .lux-hero-strip::-webkit-scrollbar,
  [class*="hero-slides"]::-webkit-scrollbar,
  [class*="slides-track"]::-webkit-scrollbar,
  [class*="carousel-track"]::-webkit-scrollbar,
  [class*="slick-track"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Each slide (child) snaps to center, no shrink */
  .lux-hero-strip > *,
  [class*="hero-slides"] > *,
  [class*="slides-track"] > *,
  [class*="carousel-track"] > * {
    scroll-snap-align: start !important;         /* start = predictable on phones */
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  /* Product card image area (.swipe-area)
     - touch-action: pan-y allows page scroll, JS intercepts horizontal */
  .swipe-area {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;              /* page scrolls; JS swipe goes horizontal */
    position: relative !important;
    overflow: hidden !important;
    cursor: grab !important;
  }

  /* Card gallery image cross-fade smooth transition */
  .card-gallery img,
  .swipe-area img {
    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  /* Product detail main image viewer */
  #main-img-viewer img,
  #main-img-wrap img {
    transition: opacity 0.40s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.40s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}
/* ===== MOBILE HERO CLEANUP ===== */
@media (max-width: 768px) {
  section.hero-sec h1, section.hero-sec #hero-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }
  section.hero-sec p, section.hero-sec #hero-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ===== HOMEPAGE: XEM CHI TIET BUTTON — WHITE TEXT + ALIGNED ===== */

/* White text on all Xem Chi Tiet buttons */
button.border-primary-container,
button[class*="border-primary-container"] {
  color: #ffffff !important;
}

/* Cards become flex-column so each card same height per row */
.bg-surface-container-low.overflow-hidden.group {
  display: flex !important;
  flex-direction: column !important;
}

/* Content area inside card takes remaining space */
.bg-surface-container-low.overflow-hidden.group .p-6 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Button sticks to bottom */
.bg-surface-container-low.overflow-hidden.group .p-6 button {
  margin-top: auto;
}

/* ===== HERO: REMOVE BORDER BOX FROM DAT LICH TU VAN BUTTON ===== */

/* Remove the bordered box from the outlined Tu Van button inside hero */
section.hero-sec a[class*="border-outline"] {
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Also reduce large gap between desc and buttons on mobile */
@media (max-width: 767px) {
  section.hero-sec #hero-desc {
    margin-bottom: 14px !important;
  }
}

/* ══════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVE OVERRIDES (LUXURY UI)
   Applies to all pages to enforce minimal luxury 
   standards on screens <= 768px.
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. TYPOGRAPHY (Strict sizing) */
  h1, .text-5xl, .text-4xl { font-size: clamp(20px, 6vw, 24px) !important; line-height: 1.4 !important; }
  h2, .text-3xl { font-size: clamp(18px, 5vw, 22px) !important; line-height: 1.4 !important; }
  h3, h4, .text-2xl, .text-xl { font-size: 16px !important; line-height: 1.5 !important; }
  
  /* Body text & labels */
  p, span:not(.material-symbols-outlined), li, .text-lg, .text-base {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  [class*="text-sm"], small { font-size: 13px !important; }
  
  /* Subheadings & Overlines keeping uppercase */
  [class*="tracking-widest"], [class*="uppercase"] {
    letter-spacing: 0.5px !important;
  }

  /* 2. SPACING & LAYOUT (Collapse to 1 column) */
  /* Normalize section padding */
  section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Force 1 column on all grids & cards */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important; /* Unified gap */
  }

  /* Force stack on flex rows */
  .flex.md\\:flex-row, .flex.lg\\:flex-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Prevent side-scrolling */
  html, body {
    overflow-x: hidden !important;
    width: 100%;
  }

  /* 3. BUTTONS & CTA (Touch friendly) */
  button, .btn, a[class*="bg-"], a[class*="border"] {
    min-height: 44px !important; /* Standard touch target height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
  }
  
  /* Make primary action buttons full width for ease of access */
  [class*="flex-wrap"] > a, 
  [class*="flex-wrap"] > button,
  section > div > a.bg-primary-container,
  div.mt-8 > a[href*="tu-van.html"] {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* 4. IMAGES & MEDIA */
  img, video {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* 5. SPECIFIC FIXES */
  /* Remove excessive margins in content areas */
  .mb-12, .mb-16, .my-24 { margin-top: 24px !important; margin-bottom: 24px !important; }
  .p-12, .px-12, .py-24, .md\\:p-24 { padding: 20px 16px !important; }
}

/* ===== FLOATING CTA BUTTON (PROMPT REQUEST) ===== */
.floating-cta {
  position: fixed !important;
  right: 16px !important;
  bottom: 80px !important;
  top: auto !important;
  z-index: 999 !important;
  pointer-events: auto !important;
}
/* Ensure Zalo is above CTA */
.lux-zalo-btn {
  bottom: 140px !important;
}

@media (max-width: 768px) {
  .floating-cta {
    right: 12px !important;
    bottom: 70px !important;
  }
  .lux-zalo-btn {
    bottom: 130px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — MOBILE OPTIMISATION
   Applies to: product-detail.html AND product-detail-vn.html
   Both pages link global.css so one block covers both.
   Desktop (≥769px): completely UNTOUCHED.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. LAYOUT: Product detail page mobile 1-column stack ───── */
  .product-detail-grid,
  section.grid[class*="lg:grid-cols"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Left col (gallery) takes full width */
  .product-grid > div:first-child,
  section.grid[class*="lg:grid-cols"] > .lg\\:col-span-6,
  section.grid[class*="lg:grid-cols"] > [class*="col-span-6"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Right col (info) also full width */
  .product-grid > div:last-child,
  section.grid[class*="lg:grid-cols"] > .lg\\:col-span-4,
  section.grid[class*="lg:grid-cols"] > [class*="col-span-4"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* ── 2. GALLERY: Full-width, correct ratio, smooth swipe ─────── */
  /* Main image container */
  .main-img-wrap,
  section.grid > div > .relative.aspect-\\[4\\/5\\],
  section.grid > div > div[class*="aspect-"] {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    position: relative !important;
    touch-action: pan-y !important;         /* JS intercepts horizontal */
    -webkit-overflow-scrolling: touch !important;
  }

  /* Main image itself */
  #main-img,
  .main-img-wrap img,
  section.grid > div > .relative.aspect-\\[4\\/5\\] img,
  .sg-related-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }

  /* Thumbnail strip: horizontal scroll, 5 items visible */
  .thumb-row,
  #thumb-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .thumb-row::-webkit-scrollbar,
  #thumb-row::-webkit-scrollbar { display: none !important; }

  .thumb-row > *,
  #thumb-row > * {
    flex-shrink: 0 !important;
    width: calc(20% - 5px) !important;      /* 5 thumbs visible */
    scroll-snap-align: start !important;
  }

  /* Static thumbnail grid (product-detail.html) */
  section.grid > div > .grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  /* ── 3. HIDE PREV/NEXT ARROWS on mobile (global.css already does
     #img-prev/#img-next but repeat here for specificity) ─────── */
  #img-prev,
  #img-next {
    display: none !important;
  }

  /* ── 4. TOUCH TARGETS: Size & Colour buttons ─────────────────── */
  /* Size buttons (product-detail-vn.html: .sz-btn) */
  .sz-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Size buttons (product-detail.html: w-12 h-12 squares) */
  #size-btns button,
  div[class*="flex-wrap"][class*="gap-2"] > button,
  section.grid button[class*="w-12"],
  section.grid button[class*="h-12"] {
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 12px !important;
  }

  /* Gap between size/colour buttons */
  #size-btns,
  div[class*="flex-wrap"][class*="gap-2"],
  .flex.flex-wrap.gap-2 {
    gap: 10px !important;
  }

  /* Colour swatches */
  section.grid button[class*="rounded-full"],
  div[class*="space-x-4"] > button[class*="rounded-full"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* ── 5. CTA BUTTONS: Full-width, large touch target ─────────── */
  /* product-detail.html */
  section.grid div[class*="space-y-4"] > button,
  div[class*="space-y"] > button[class*="w-full"] {
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 20px !important;
    font-size: 12px !important;
    letter-spacing: 0.15em !important;
  }

  /* product-detail-vn.html */
  #order-btn,
  div.flex.flex-col.gap-3 > a {
    display: block !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 20px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* ── 6. TYPOGRAPHY & SPACING: description + specs ───────────── */
  /* Main content area horizontal padding */
  main.pt-24 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Product name */
  #prod-name,
  section.grid h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  /* Price */
  section.grid .text-3xl.text-secondary,
  section.grid .flex.items-baseline {
    font-size: 22px !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  /* Description paragraph */
  section.grid p[class*="text-tertiary"],
  section.grid p[class*="text-sm"],
  #prod-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }

  /* Specs table (product-detail-vn) — use attribute selector, Tailwind slash classes
     can't be targeted with CSS dot-notation selectors */
  [class*="border-white"][class*="p-4"] {
    padding: 14px !important;
  }
  /* Stack label + value vertically so long text doesn't get crushed */
  [class*="border-white"] ul li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
  }
  [class*="border-white"] ul li span:first-child {
    font-size: 10px !important;
    opacity: 0.6 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }
  [class*="border-white"] ul li span:last-child {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #e9e1dc !important;
    word-break: break-word !important;
  }

  /* Feature chips row: wrap nicely */
  div[class*="flex-wrap"][class*="gap-3"] {
    gap: 8px !important;
  }
  div[class*="flex-wrap"][class*="gap-3"] > span {
    font-size: 10px !important;
    padding: 8px 12px !important;
  }

  /* Breadcrumb: reduce spacing on mobile */
  nav[class*="mb-12"] {
    margin-bottom: 16px !important;
  }

  /* Quantity counter: full-width on mobile */
  div[class*="flex items-center border border-outline-variant w-fit"] {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── CHI TIẾT SẢN PHẨM BOX (p-10 → p-4 on mobile) ────────────
     The specs box has 40px padding on all sides which is way too
     much on a 375px screen. Also fixes the flex justify-between
     list items that cause long values to get crushed.
  ── */

  /* 1. Reduce padding of the specs container */
  div[class*="bg-surface-container-low"][class*="p-10"],
  div[class*="bg-surface-container-low"][class*="p-8"] {
    padding: 16px !important;
  }

  /* 2. Stack label+value vertically on mobile (not side-by-side) */
  div[class*="bg-surface-container-low"] li[class*="flex"][class*="justify-between"],
  div[class*="bg-surface-container-low"] li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 10px 0 !important;
  }
  div[class*="bg-surface-container-low"] li span:first-child {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
  }
  div[class*="bg-surface-container-low"] li span:last-child {
    font-size: 13px !important;
    font-weight: 500 !important;
    word-break: break-word !important;
  }

  /* ── TABS SECTION ──────────────────────────────────────────────
     Tab buttons have px-10 py-6 which is massive on mobile.
     Compact them to fit all 4 tabs on screen without horizontal scroll.
  ── */

  /* 3. Compact tab buttons */
  div[class*="flex"][class*="border-b"][class*="overflow-x-auto"] button,
  div[class*="flex border-b"] button[class*="px-10"] {
    padding: 12px 14px !important;
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    white-space: nowrap !important;
  }

  /* 4. Tab content grid: single column, no huge gap */
  div[class*="grid-cols-1"][class*="md:grid-cols-12"],
  div[class*="grid"][class*="gap-16"] {
    gap: 20px !important;
  }

  /* 5. Description text */
  div[class*="md:col-span-7"] h3 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
  div[class*="md:col-span-7"] p {
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  /* 6. Specs box heading */
  div[class*="bg-surface-container-low"] h4[class*="tracking"] {
    font-size: 10px !important;
    margin-bottom: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT GALLERY — MOBILE SLIDER (< 768px)
   Pure CSS scroll-snap. ZERO JS. No library conflicts.
   Used by product-detail.html and product-detail-vn.html.
═══════════════════════════════════════════════════════════════ */

/* Visibility helpers (global — applies at all breakpoints) */
.lhm-mobile-only  { display: none;  } /* hidden on desktop */
.lhm-desktop-only { display: block; } /* visible on desktop */

@media (max-width: 768px) {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     STEP 1 — DESTROY DESKTOP GRID / 2-COLUMN LAYOUT
     Force the section wrapper that holds both gallery and
     product-info columns to stack vertically as a plain block.
     This eliminates any grid-column sizing that may leak to mobile.
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .product-detail-section,
  section.grid,
  section[class*="grid"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Every direct child column → full width block */
  .product-detail-section > *,
  section.grid > *,
  section[class*="grid"] > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;           /* kill any flex-basis from desktop */
    grid-column: auto !important;    /* kill any col-span from desktop */
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    position: static !important;
    box-sizing: border-box !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     STEP 2 — MAIN CONTAINER PADDING
     Remove horizontal padding from main so gallery spans edge to edge.
     Pad the product-info column (lg:col-span-4) separately.
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  main.pt-24 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Restore padding for text content (info column + breadcrumbs) */
  .lg\:col-span-4,
  [class*="col-span-4"],
  nav[aria-label*="breadcrumb"],
  .breadcrumb {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     STEP 3 — GALLERY COLUMN WRAPPER
     Make the col-span-6 wrapper (gallery column) clean.
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .lg\:col-span-6,
  [class*="col-span-6"],
  .space-y-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Show mobile slider, hide desktop layout */
  .lhm-mobile-only  { display: flex !important; }
  .lhm-desktop-only { display: none  !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     STEP 4 — GALLERY CONTAINER (simple, no tricks)
     width: 100% = full width of the gallery column
     which is now 100% viewport width (after steps 1-3).
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .lehuong-mobile-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-snap-stop: always !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* NO transforms, NO negative margins, NO 100vw tricks */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    background: #1e1b18;
    touch-action: pan-x !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  .lehuong-mobile-gallery::-webkit-scrollbar { display: none !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     STEP 5 — EACH SLIDE
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .lehuong-mobile-gallery .gallery-item {
    flex: 0 0 100% !important;           /* 1 slide = 1 full container width */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;             /* prevent flexbox auto-min blowout */
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;  /* center image horizontally */
    align-items: center !important;      /* center image vertically */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     STEP 6 — IMAGE (show full, no cropping)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .lehuong-mobile-gallery .gallery-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70vh !important;
    object-fit: contain !important;      /* full image, no crop */
    object-position: center !important;
    aspect-ratio: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* ── Hide desktop-only elements ── */
  #thumb-row, .thumb-row { display: none !important; }
  .main-img-wrap #img-prev,
  .main-img-wrap #img-next,
  #img-prev, #img-next   { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL MOBILE OVERFLOW PROTECTION
   Applied site-wide. Placed LAST in file = highest cascade order.
   Prevents any element from causing horizontal scroll on mobile.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. ROOT LOCK ─────────────────────────────────────────────── */
  html {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── 2. SEMANTIC CONTAINERS ──────────────────────────────────── */
  main, section, article, aside, header, footer,
  .container, .wrapper, .content, .inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ── 3. TABLES ───────────────────────────────────────────────── */
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }
  th, td {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ── 4. MEDIA ────────────────────────────────────────────────── */
  img:not(.lehuong-mobile-gallery img),
  video, iframe, embed, object, svg {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* ── 5. TEXT ─────────────────────────────────────────────────── */
  p, span, h1, h2, h3, h4, h5, h6,
  li, dt, dd, blockquote, figcaption, label, a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* ── 6. INTERACTIVE ELEMENTS ─────────────────────────────────── */
  button, input, select, textarea, .btn {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 7. FLEX/GRID CHILDREN: prevent blowout ──────────────────── */
  [class*="flex"] > *,
  [class*="grid"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   SUBPAGE PRODUCT GRIDS — MOBILE 2-COLUMN GRID (2 Ô SẢN PHẨM / HÀNG)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #product-grid,
  #sg-product-grid,
  #blazer-grid,
  #products-grid,
  .prod-grid,
  .vn-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}