/*
 * EUROLUX — MOBILE RESPONSIVE CSS
 * Breakpoints: 768px tablet, 480px phone
 */

/* ══════════════════════════════════
   MOBILE NAV BAR
══════════════════════════════════ */
@media (max-width: 768px) {

  /* Ẩn desktop nav links */
  #main-nav .nav-links,
  #main-nav .nav-cta,
  #main-nav .sw-btn { display: none !important; }

  #main-nav {
    height: 58px !important;
    padding: 0 18px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #main-nav .el-logo-word { font-size: 17px !important; letter-spacing: .18em !important; }
  #main-nav .el-logo-rule, #main-nav .el-logo-orn { width: 110px !important; }

  /* Hamburger button */
  #mob-ham {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: none;
    border: 1px solid rgba(196,145,90,.25);
    padding: 0;
    flex-shrink: 0;
  }
  #mob-ham span {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--gold);
    transition: all .25s;
  }
  #mob-ham.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #mob-ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  #mob-ham.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Mobile slide menu */
  #mob-menu {
    display: block !important;
    position: fixed;
    top: 58px;
    left: 0; right: 0;
    background: #0C0A07;
    border-top: 1px solid rgba(196,145,90,.18);
    border-bottom: 2px solid rgba(196,145,90,.3);
    z-index: 2000;
    transform: translateY(-110%);
    transition: transform .32s cubic-bezier(.23,1,.32,1);
    max-height: calc(100vh - 58px);
    overflow-y: auto;
  }
  #mob-menu.open { transform: translateY(0); }

  .mob-menu-section {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .mob-menu-section:last-child { border-bottom: none; }

  .mob-sec-title {
    font-size: 8px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(196,145,90,.55);
    padding: 10px 20px 6px;
  }

  .mob-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    font-size: 13px;
    color: rgba(210,195,170,.85);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all .18s;
  }
  .mob-menu-item:hover, .mob-menu-item:active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(196,145,90,.05);
  }
  .mob-menu-item .mob-arrow { font-size: 10px; color: rgba(196,145,90,.4); }

  .mob-sub-item {
    display: block;
    padding: 10px 20px 10px 32px;
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(175,160,135,.65);
    cursor: pointer;
    transition: color .18s;
    border-left: 2px solid transparent;
  }
  .mob-sub-item:hover { color: var(--gold); }

  .mob-menu-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 20px;
  }
  .mob-cta-btn {
    width: 100%;
    padding: 13px;
    text-align: center;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .mob-cta-btn.primary {
    background: linear-gradient(135deg, #C4915A, #A07030);
    color: #0A0806;
    font-weight: 600;
    border: none;
  }
  .mob-cta-btn.secondary {
    background: transparent;
    border: 1px solid rgba(196,145,90,.35);
    color: var(--gold);
  }

  /* Bottom navigation bar */
  #mob-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: #0A0806;
    border-top: 1px solid rgba(196,145,90,.18);
    z-index: 1500;
    align-items: stretch;
  }
  .mob-bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: background .18s;
    border-right: 1px solid rgba(255,255,255,.04);
  }
  .mob-bnav-item:last-child { border-right: none; }
  .mob-bnav-item:active { background: rgba(196,145,90,.08); }
  .mob-bnav-item .mob-bnav-icon { font-size: 16px; line-height: 1; }
  .mob-bnav-item .mob-bnav-lbl {
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(155,140,115,.6);
  }
  .mob-bnav-item.active .mob-bnav-lbl { color: var(--gold); }
  .mob-bnav-item.mob-bnav-cta {
    background: linear-gradient(135deg, rgba(196,145,90,.15), rgba(160,112,48,.1));
    border-top: 1px solid rgba(196,145,90,.3);
    margin-top: -1px;
  }
  .mob-bnav-item.mob-bnav-cta .mob-bnav-lbl { color: var(--gold); }

  /* Padding bottom cho content */
  body { padding-bottom: 60px; }

  /* ══ PAGES RESPONSIVE ══ */
  .pg-hero { margin-top: 58px !important; }
  [style*="margin-top:68px"], [style*="margin-top:76px"] { margin-top: 58px !important; }

  /* Hero section */
  .hero-cnt {
    padding: 32px 20px 28px !important;
    grid-template-columns: 1fr !important;
  }
  .hero-h { font-size: clamp(28px,7vw,44px) !important; }
  .hero-pre { font-size: 9px !important; }
  .hero-cta { flex-direction: column; gap: 10px !important; }
  .hero-cta button { width: 100% !important; }

  /* Product grid */
  .pcat-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }

  /* Category pages padding */
  [style*="padding:32px 52px"],
  [style*="padding:36px 52px"],
  [style*="padding:40px 52px"],
  [style*="padding:0 52px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Category hero grid */
  [style*="grid-template-columns:1fr 400px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="height:200px;overflow:hidden;border-left"] {
    display: none !important;
  }

  /* Filter bar */
  .filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .f-pill { flex-shrink: 0 !important; }

  /* Product detail */
  #pd-sticky { position: static !important; height: auto !important; }
  [style*="grid-template-columns:55% 45%"] { grid-template-columns: 1fr !important; }
  [style*="padding:40px;border-left"] { padding: 20px !important; border-left: none !important; }
  .cta-bar { flex-direction: column !important; gap: 14px !important; padding: 20px !important; }
  .cta-bar .cta-actions { width: 100% !important; }
  .cta-bar .cta-actions button { flex: 1 !important; }

  /* Sections */
  .sect { padding: 40px 18px !important; }
  .hdr-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  /* Stats */
  .stat-row { flex-wrap: wrap !important; }
  .stat-it { min-width: 50% !important; }
  .stat-n { font-size: 28px !important; }

  /* Project grid */
  .pj1,.pj2,.pj3,.pj4,.pj5,.pj6 {
    grid-column: 1/-1 !important;
    height: 200px !important;
  }
  .proj-grid { grid-template-columns: 1fr !important; }

  /* Footer */
  footer { padding: 40px 18px 80px !important; }
  .ft-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ft-contact-bar {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    align-items: center !important;
  }
  .ft-contact-bar .hotline { font-size: 22px !important; }
  .ft-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
  .ft-bottom-right { flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; }

  /* Series grid */
  .sg3,.sg4 { grid-template-columns: 1fr !important; }
  .sg2 { grid-template-columns: repeat(2,1fr) !important; }

  /* Demo events */
  .demo-ev { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Lifestyle */
  #page-lifestyle .hero-grid { grid-template-columns: 1fr !important; }

  /* Brand story */
  [style*="grid-template-columns:1fr 440px"],
  [style*="grid-template-columns:440px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .bstory-vis { display: none !important; }

  /* Booking form */
  .form-2 { grid-template-columns: 1fr !important; }

  /* Breadcrumb */
  nav[style*="font-size:9px"] { display: none !important; }

  /* Brand page */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(3,1fr) !important;
  }

  /* V and T grids */
  .v3,.v4 { grid-template-columns: 1fr !important; }
  .t3,.t4 { grid-template-columns: 1fr 1fr !important; }

  /* Hide some desktop-only elements */
  .noise-bg, body::before { display: none !important; }
}

/* ══ SMALL PHONE 480px ══ */
@media (max-width: 480px) {
  .pcat-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .stat-it { min-width: 100% !important; }
  .sg2 { grid-template-columns: 1fr !important; }
  .ft-socials { justify-content: center !important; }
}