/* ============================================
   MOBILE SAFARI FIX - iPhone 13 Pro Max (428px)
   Áp dụng cho: index.html, contact.html, tracking.html
   ============================================ */

/* Fix cho Safari iOS - Viewport */
@supports (-webkit-touch-callout: none) {
  body {
    /* Fix cho 100vh issue trên Safari iOS */
    min-height: -webkit-fill-available;
  }
  
  .page, .page-wrapper {
    min-height: -webkit-fill-available;
  }
}

/* ============================================
   RESPONSIVE CHO iPHONE 13 PRO MAX (428px)
============================================ */
@media screen and (max-width: 430px) {
  /* Container */
  .container {
    padding: 0 16px !important;
  }

  /* ============ HEADER ============ */
  .navbar {
    height: 64px !important;
    gap: 12px !important;
  }

  .logo-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .logo-icon::after {
    font-size: 16px !important;
  }

  .logo-text-main {
    font-size: 16px !important;
  }

  .logo-text-sub {
    display: none !important;
  }

  .header-actions .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .header-actions .btn-icon {
    display: none !important;
  }

  .location-badge {
    display: none !important;
  }

  .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
  }

  .nav-wrapper,
  .nav-links {
    display: none !important;
  }

  /* ============ HERO SECTION (index.html) ============ */
  .hero {
    padding: calc(64px + 40px) 0 60px !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .hero-content {
    text-align: center !important;
  }

  .hero-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .hero-title .highlight::after {
    height: 3px !important;
    bottom: 2px !important;
  }

  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
  }

  /* Status Badge */
  .status-badge {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    text-align: center !important;
  }

  .status-badge .divider {
    display: none !important;
  }

  .status-badge .tech {
    font-size: 11px !important;
  }

  /* Tech Tags */
  .tech-tags {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .tech-tag {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 16px !important;
  }

  /* Hero Actions */
  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    padding: 16px 20px !important;
  }

  /* Trust Bar */
  .trust-bar {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }

  .trust-item {
    width: 100% !important;
    justify-content: center !important;
    background: rgba(0, 212, 255, 0.05) !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
  }

  /* Dashboard Panel - ẨN trên mobile để tránh phức tạp */
  .hero-visual {
    order: 2 !important;
  }

  .dashboard-panel {
    display: none !important;
  }

  /* Hoặc nếu muốn hiện dashboard panel, dùng code bên dưới thay thế */
  /*
  .dashboard-panel {
    border-radius: 16px !important;
  }

  .panel-topbar {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .panel-title {
    font-size: 12px !important;
  }

  .panel-content {
    padding: 16px !important;
  }

  .panel-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .gpu-card,
  .scope-card {
    padding: 16px !important;
  }

  .gpu-model {
    font-size: 16px !important;
  }

  .gpu-specs {
    gap: 6px !important;
  }

  .spec-tag {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  .panel-footer {
    padding: 12px 16px !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  */

  /* ============ BACKGROUND EFFECTS - Giảm/Tắt ============ */
  .particles,
  .particle {
    display: none !important;
  }

  .corner-decor {
    display: none !important;
  }

  .bg-glow {
    opacity: 0.3 !important;
    filter: blur(80px) !important;
  }

  .bg-glow-1 {
    width: 300px !important;
    height: 300px !important;
  }

  .bg-glow-2 {
    width: 250px !important;
    height: 250px !important;
  }

  .bg-glow-3 {
    width: 200px !important;
    height: 200px !important;
  }

  /* ============ SECTIONS ============ */
  section {
    padding: 60px 0 !important;
  }

  .section-header {
    margin-bottom: 40px !important;
  }

  .section-tag {
    padding: 6px 14px !important;
    font-size: 11px !important;
  }

  .section-title {
    font-size: 24px !important;
  }

  .section-desc {
    font-size: 14px !important;
  }

  /* ============ FEATURES GRID ============ */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .feature-card {
    padding: 24px 20px !important;
  }

  .feature-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }

  .feature-number {
    font-size: 36px !important;
  }

  .feature-title {
    font-size: 16px !important;
  }

  .feature-desc {
    font-size: 13px !important;
  }

  /* ============ PROCESS SECTION ============ */
  .process-wrapper {
    padding: 32px 20px !important;
  }

  .process-steps {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .process-steps::before {
    display: none !important;
  }

  .step-number {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 20px !important;
  }

  .step-number span {
    font-size: 24px !important;
  }

  .step-title {
    font-size: 15px !important;
  }

  .step-desc {
    font-size: 13px !important;
  }

  /* ============ VIDEO GRID ============ */
  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .video-content {
    padding: 20px !important;
  }

  .video-title {
    font-size: 14px !important;
  }

  /* ============ PRICING GRID ============ */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .pricing-card {
    padding: 28px 24px !important;
  }

  .pricing-title {
    font-size: 20px !important;
  }

  .pricing-desc {
    font-size: 13px !important;
  }

  /* ============ CTA SECTION ============ */
  .cta-section {
    padding: 80px 0 !important;
  }

  .cta-wrapper {
    padding: 48px 24px !important;
    border-radius: 20px !important;
  }

  .cta-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 28px !important;
    margin-bottom: 24px !important;
  }

  .cta-title {
    font-size: 24px !important;
  }

  .cta-desc {
    font-size: 14px !important;
    margin-bottom: 28px !important;
  }

  .cta-actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .cta-actions .btn {
    width: 100% !important;
  }

  .cta-note {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  /* ============ CONTACT PAGE ============ */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }

  .card-title {
    font-size: 16px !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .field-input input,
  .field-input textarea,
  .field-input select {
    padding: 14px 16px !important;
    font-size: 16px !important; /* Ngăn Safari zoom khi focus */
  }

  .form-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .form-actions .btn {
    width: 100% !important;
  }

  .contact-item {
    padding: 14px !important;
  }

  .contact-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .contact-value {
    font-size: 14px !important;
  }

  .contact-socials {
    gap: 6px !important;
  }

  .social-pill {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* QR Card */
  .qr-card {
    text-align: center !important;
  }

  .qr-wrapper {
    padding: 12px !important;
  }

  .qr-wrapper img {
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto !important;
  }

  /* Map */
  .map-wrapper {
    height: 240px !important;
  }

  .map-card .card-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* CTA Card */
  .cta-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 32px 24px !important;
    gap: 24px !important;
  }

  .cta-card .cta-icon {
    width: 64px !important;
    height: 64px !important;
    font-size: 28px !important;
  }

  .cta-card .cta-title {
    font-size: 20px !important;
  }

  .cta-card .cta-desc {
    max-width: 100% !important;
  }

  .cta-card .cta-actions {
    width: 100% !important;
    flex-direction: column !important;
  }

  .cta-card .cta-actions .btn {
    width: 100% !important;
  }

  /* ============ TRACKING PAGE ============ */
  .search-card {
    grid-template-columns: 1fr !important;
    padding: 24px 20px !important;
    gap: 24px !important;
  }

  .search-sidebar {
    padding-left: 0 !important;
    padding-top: 24px !important;
    border-left: none !important;
    border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
  }

  .form-title {
    font-size: 16px !important;
  }

  .field-input input {
    font-size: 16px !important; /* Ngăn Safari zoom */
  }

  .status-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .card-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .meta-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .timeline {
    padding-left: 20px !important;
  }

  .timeline-dot {
    left: -20px !important;
    width: 14px !important;
    height: 14px !important;
  }

  .timeline-title {
    font-size: 13px !important;
  }

  .timeline-desc {
    font-size: 11px !important;
  }

  .summary-row {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .summary-value {
    text-align: left !important;
    font-size: 13px !important;
  }

  .detail-row {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .detail-value {
    text-align: left !important;
  }

  .status-pills {
    flex-direction: column !important;
  }

  .status-pill {
    font-size: 10px !important;
  }

  /* ============ FOOTER ============ */
  .footer-main {
    padding: 48px 0 24px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .footer-brand {
    text-align: center !important;
  }

  .footer-brand .logo {
    justify-content: center !important;
  }

  .footer-brand p {
    max-width: 100% !important;
  }

  .footer-social {
    justify-content: center !important;
  }

  .footer-column {
    text-align: center !important;
  }

  .footer-links a,
  .footer-links span {
    justify-content: center !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    padding: 20px 0 !important;
  }

  .footer-socials {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .social-link,
  .footer-social a {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  /* ============ MOBILE NAV ============ */
  .mobile-nav {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 80px !important;
  }

  .mobile-nav-links a {
    padding: 16px 20px !important;
    font-size: 15px !important;
  }

  .mobile-nav-cta {
    padding: 20px !important;
  }

  .mobile-nav-cta .btn {
    padding: 16px 24px !important;
  }
}

/* ============================================
   FIX SAFARI iOS SPECIFIC ISSUES
============================================ */
@supports (-webkit-touch-callout: none) {
  /* Fix backdrop-filter */
  .header,
  header {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  /* Fix position sticky */
  .header,
  header {
    position: -webkit-sticky;
    position: sticky;
  }

  /* Fix gradient text */
  .hero-title .highlight,
  .page-title span,
  .section-title .accent,
  .logo-text-main span {
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* Fix transform trên Safari */
  .btn:hover,
  .card:hover,
  .feature-card:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  /* Fix animation */
  @keyframes pulse-dot {
    0%, 100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.6);
      box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.6);
    }
    50% {
      -webkit-box-shadow: 0 0 0 6px rgba(0, 255, 136, 0);
      box-shadow: 0 0 0 6px rgba(0, 255, 136, 0);
    }
  }

  /* Disable heavy animations on mobile */
  @media (max-width: 768px) {
    .bg-glow,
    .particle {
      -webkit-animation: none !important;
      animation: none !important;
    }

    .scope-wave-line {
      -webkit-animation: none !important;
      animation: none !important;
    }
  }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  .btn,
  .nav-links a,
  .mobile-nav-links a,
  .social-link,
  .social-pill {
    min-height: 44px;
    min-width: 44px;
  }

  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}