@import url('fonts.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

/* ════════════════════════════════════════════════
   MINIMALIST MODERN DESIGN SYSTEM — TOKENS & GLOBALS
   ════════════════════════════════════════════════ */

:root {
  --background: #FAFAFA;
  --foreground: #0F172A;
  --muted: #F1F5F9;
  --muted-foreground: #64748B;
  --accent: #0052FF;
  --accent-secondary: #4D7CFF;
  --accent-foreground: #FFFFFF;
  --border: #E2E8F0;
  --card: #FFFFFF;
  --ring: #0052FF;
  
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --loader-glow: rgba(0, 82, 255, 0.45);
}

/* Dark theme tokens */
.dark {
  --background: #090E1A;
  --foreground: #F8FAFC;
  --muted: #1E293B;
  --muted-foreground: #94A3B8;
  --accent: #0052FF;
  --accent-secondary: #4D7CFF;
  --accent-foreground: #FFFFFF;
  --border: #273549;
  --card: #0F172A;
  --ring: #0052FF;
  --loader-glow: #ffffff;
}

/* ════════════════════════════════════════════════
   APPLE-INSPIRED TYPOGRAPHY SYSTEM
   ════════════════════════════════════════════════ */

/* Base font-family and rendering defaults */
body {
  font-family: var(--font-sans), sans-serif !important;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings & Title hierarchy */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .section-ttl, .modal-name, .sb-title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
}

h1, .hero-title {
  font-weight: 800; /* Apple uses bold or heavy for large hero headers */
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h2, .section-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h3, .section-ttl, .modal-name {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* Brand Name / Logo Text */
.logo-text, .nav-sb-logo {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Subheadings & Captions */
.hero-sub, .section-sub, .trust-card-ttl, .svc-name, .logo-tagline, .row-sub {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  letter-spacing: -0.011em;
  line-height: 1.47;
}

/* Buttons (Apple style buttons: Medium or Semibold weight, never 800/900) */
.btn-primary, .btn-full, .btn-buy, .ap-login-btn, .btn-full-premium, .hbtn, .tab-btn span {
  font-weight: 600 !important;
  letter-spacing: -0.011em !important;
}

/* Prices & Badges */
.deal-price, .prod-price, .price-main, #cartTotal, #balDisp {
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

/* ════════════════════════════════════════════════
   UTILITY CLASSES (UTILITIES)
   ════════════════════════════════════════════════ */

/* Ensure font family defaults are correctly initialized */
.font-display {
  font-family: var(--font-display) !important;
}

/* Responsive Zoom Reset to avoid mobile layout bugs and unreadable tiny text */
@media (max-width: 768px) {
  body {
    zoom: 100% !important;
  }
}

.font-sans-modern {
  font-family: var(--font-sans) !important;
}

.font-mono-modern {
  font-family: var(--font-mono) !important;
}

/* Color Overrides */
.text-accent-modern {
  color: var(--accent) !important;
}

.bg-accent-modern {
  background-color: var(--accent) !important;
}

/* The Signature Gradient */
.bg-signature-gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
}

.text-signature-gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Texture patterns */
.dot-pattern-texture {
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.04) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.dark .dot-pattern-texture {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.02) 1.5px, transparent 1.5px);
}

.radial-glow-accent {
  position: absolute;
  filter: blur(140px);
  background: radial-gradient(circle, rgba(0, 82, 255, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.dark .radial-glow-accent {
  background: radial-gradient(circle, rgba(0, 82, 255, 0.12) 0%, transparent 70%);
}

/* Shadows */
.shadow-accent-modern {
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.18) !important;
}

.shadow-accent-modern-lg {
  box-shadow: 0 8px 24px rgba(0, 82, 255, 0.28) !important;
}

/* Premium Card Style */
.premium-card-modern {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 82, 255, 0.05), 0 10px 10px -5px rgba(0, 82, 255, 0.02);
  border-color: rgba(0, 82, 255, 0.15);
}

/* Section label badge system */
.section-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 82, 255, 0.18);
  background-color: rgba(0, 82, 255, 0.03);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 600;
}

/* ════════════════════════════════════════════════
   MICRO-ANIMATIONS (MOTION SYSTEM)
   ════════════════════════════════════════════════ */

/* Floating animation */
@keyframes float-y {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float-y {
  animation: float-y 5s ease-in-out infinite;
}

/* Slow rotation animation */
@keyframes slow-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-slow-rotate {
  animation: slow-rotate 80s linear infinite;
}

/* Pulsing dot animation */
@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

.animate-pulse-dot {
  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ════════════════════════════════════════════════
   UNIFIED GLOBAL OVERRIDES & MOBILE ZOOM FIX
   ════════════════════════════════════════════════ */

.trust-tile, .tbadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(0, 82, 255, 0.08) !important;
  color: var(--accent) !important;
  border: none !important;
}

/* Make sure all inputs have rounded-xl and clean ring focus */
input:focus, select:focus, textarea:focus, .inp:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12) !important;
}

/* Premium gradient elements and text overrides */
.btn-primary, .btn-full, .btn-buy, .ap-login-btn, .btn-full-premium {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.2) !important;
  transition: all 0.2s ease-out !important;
}

.btn-primary:hover, .btn-full:hover, .btn-buy:hover, .ap-login-btn:hover, .btn-full-premium:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 20px rgba(0, 82, 255, 0.3) !important;
}

/* Ensure font family defaults are correctly initialized */
.font-display {
  font-family: var(--font-display) !important;
}

/* Force body zoom to 70% and enable natural scrolling on mobile viewports to prevent margin/cut-off bugs */
@media (max-width: 768px) {
  body {
    zoom: 70% !important;
    height: auto !important;
    min-height: 143vh !important;
    overflow: auto !important;
  }
}

/* ==========================================
   PORTAL DROPDOWN MENU
   ========================================== */
.portal-menu {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans), sans-serif;
  z-index: 800;
  user-select: none;
}

/* Hide checkbox */
.portal-menu-checkbox {
  display: none !important;
}

/* Trigger button */
.portal-menu-trigger {
  font-weight: 700;
  color: #1e40af;               /* Blue text */
  background-color: #d0e1fd;    /* Pastel blue bg */
  padding: 0 16px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  height: 37px;                 /* Same height as buttons */
  width: 120px;
  cursor: pointer;
  justify-content: space-between;
  box-shadow: 0 4px 12px -2px rgba(208, 225, 253, 0.4);
  transition: all 0.3s ease;
  font-size: 13px;
  border: 1px solid rgba(30, 64, 175, 0.1);
}

.portal-menu-trigger:hover {
  background-color: #c2d7fc;
}

/* Dark mode trigger button */
.dark .portal-menu-trigger {
  color: #60a5fa;
  background-color: #1e293b;
  border-color: rgba(96, 165, 250, 0.2);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
}
.dark .portal-menu-trigger:hover {
  background-color: #334155;
}

/* Hamburger icon */
.portal-menu-hamburger {
  display: flex;
  height: 14px;
  width: 18px;
  flex-direction: column;
  justify-content: space-between;
}

.portal-menu-bar {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 4px;
  background-color: #1e40af;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .portal-menu-bar {
  background-color: #60a5fa;
}

/* Checkbox toggle state rules (checked = closed, unchecked = open) */
/* When checkbox is unchecked (menu OPEN) -> morph hamburger into X */
.portal-menu-checkbox:not(:checked) ~ .portal-menu-trigger .portal-menu-hamburger .top {
  transform: translateY(5.5px) rotate(-45deg);
}

.portal-menu-checkbox:not(:checked) ~ .portal-menu-trigger .portal-menu-hamburger .middle {
  opacity: 0;
  transform: scale(0);
}

.portal-menu-checkbox:not(:checked) ~ .portal-menu-trigger .portal-menu-hamburger .bottom {
  transform: translateY(-6px) rotate(45deg);
}

/* Dropdown menu container */
.portal-menu-container {
  background-color: white;
  border: 1px solid rgba(30, 64, 175, 0.08);
  border-radius: 12px;
  position: absolute;
  width: 220px;
  right: 0;
  top: 120%;
  overflow: hidden;
  clip-path: inset(0% 0% 100% 100% round 12px); /* Clip from top-right */
  transition: clip-path 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.05);
}

.dark .portal-menu-container {
  background-color: #0f172a;
  border-color: #273549;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

/* When checkbox is checked (menu CLOSED) */
.portal-menu-checkbox:checked ~ .portal-menu-container {
  clip-path: inset(0% 0% 100% 100% round 12px);
}

/* When checkbox is NOT checked (menu OPEN) */
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container {
  clip-path: inset(0% 0% 0% 0% round 12px);
}

/* Dropdown item styling */
.portal-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #1e40af;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 13.5px;
  transform: translateY(15px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, background-color 0.2s, color 0.2s;
  position: relative;
}

.dark .portal-menu-item {
  color: #cbd5e1;
}

/* Separator line between items */
.portal-menu-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: rgba(30, 64, 175, 0.06);
}

.dark .portal-menu-item:not(:last-child)::after {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Hover effects */
.portal-menu-item:hover {
  background-color: #f0f6ff;
  color: #2563eb;
}

.dark .portal-menu-item:hover {
  background-color: #1e293b;
  color: #3b82f6;
}

.portal-menu-item i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  color: #3b82f6;
}

.dark .portal-menu-item i {
  color: #60a5fa;
}

/* Stagger transition delay when open */
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item {
  transform: translateY(0);
  opacity: 1;
}

.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item:nth-child(1) { transition-delay: 0.05s; }
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item:nth-child(2) { transition-delay: 0.1s; }
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item:nth-child(3) { transition-delay: 0.15s; }
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item:nth-child(4) { transition-delay: 0.2s; }
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item:nth-child(5) { transition-delay: 0.25s; }
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item:nth-child(6) { transition-delay: 0.30s; }
.portal-menu-checkbox:not(:checked) ~ .portal-menu-container .portal-menu-item:nth-child(7) { transition-delay: 0.35s; }

/* ==========================================
   CRT SCANLINE & WAVE TEXT LOADER CORE STYLES
   ========================================== */
.loader-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: auto;
  margin: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  user-select: none;
  color: var(--foreground);
  scale: 1.5;
}

.crt-loader-sweep {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-color: transparent;
  mask: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 6px,
    black 7px,
    black 8px
  );
  -webkit-mask: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 6px,
    black 7px,
    black 8px
  );
}

.crt-loader-sweep::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%),
    radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%),
    radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
    radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
    radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
  mask: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 10%,
    black 25%
  );
  -webkit-mask: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 10%,
    black 25%
  );
  animation:
    transform-animation 2s infinite alternate,
    opacity-animation 4s infinite;
  animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
}

@keyframes transform-animation {
  0% {
    transform: translate(-55%);
  }
  100% {
    transform: translate(55%);
  }
}

@keyframes opacity-animation {
  0%, 100% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
}

.loader-letter {
  display: inline-block;
  opacity: 0;
  animation: loader-letter-anim 4s infinite linear;
  z-index: 2;
}

/* Delay so le cho 7 ky tu */
.loader-letter:nth-child(1) { animation-delay: 0.1s; }
.loader-letter:nth-child(2) { animation-delay: 0.205s; }
.loader-letter:nth-child(3) { animation-delay: 0.31s; }
.loader-letter:nth-child(4) { animation-delay: 0.415s; }
.loader-letter:nth-child(5) { animation-delay: 0.521s; }
.loader-letter:nth-child(6) { animation-delay: 0.626s; }
.loader-letter:nth-child(7) { animation-delay: 0.731s; }

@keyframes loader-letter-anim {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    text-shadow: 0 0 6px var(--loader-glow);
    transform: scale(1.1) translateY(-2px);
  }
  20% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

/* ==========================================
   HEADER LOGO CRT STYLES
   ========================================== */
.header-logo-crt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: auto;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 800;
  user-select: none;
  color: var(--foreground);
  cursor: pointer;
}

.header-logo-crt .crt-loader-sweep {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-color: transparent;
  mask: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 4px,
    black 5px,
    black 6px
  );
  -webkit-mask: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 4px,
    black 5px,
    black 6px
  );
}

.header-logo-crt .crt-loader-sweep::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%),
    radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%),
    radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
    radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
    radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
  mask: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 10%,
    black 25%
  );
  -webkit-mask: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 10%,
    black 25%
  );
  animation:
    transform-animation 2s infinite alternate,
    opacity-animation 4s infinite;
  animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
}

.header-logo-crt .loader-letter {
  display: inline-block;
  opacity: 0;
  animation: loader-letter-anim 4s infinite linear;
  z-index: 2;
}

/* Stagger delay for up to 11 characters (IPAVIET VIP) */
.header-logo-crt .loader-letter:nth-child(1) { animation-delay: 0.1s; }
.header-logo-crt .loader-letter:nth-child(2) { animation-delay: 0.205s; }
.header-logo-crt .loader-letter:nth-child(3) { animation-delay: 0.31s; }
.header-logo-crt .loader-letter:nth-child(4) { animation-delay: 0.415s; }
.header-logo-crt .loader-letter:nth-child(5) { animation-delay: 0.521s; }
.header-logo-crt .loader-letter:nth-child(6) { animation-delay: 0.626s; }
.header-logo-crt .loader-letter:nth-child(7) { animation-delay: 0.731s; }
.header-logo-crt .loader-letter:nth-child(8) { animation-delay: 0.836s; }
.header-logo-crt .loader-letter:nth-child(9) { animation-delay: 0.941s; }
.header-logo-crt .loader-letter:nth-child(10) { animation-delay: 1.046s; }
.header-logo-crt .loader-letter:nth-child(11) { animation-delay: 1.151s; }