/* Fonts được nạp trong bằng preconnect + để không chặn render (xem index.html) */ :root { --bg: #020c1a; --panel: #071828; --panel-2: #051220; --line: rgba(0, 180, 255, 0.1); --text: #eef4fb; --muted: #8cb0cc; --soft: #4e6a82; --white: #ffffff; --red: #00d4ff; /* electric cyan accent */ --red-2: #0066ff; /* deep blue */ --green: #00c87a; /* emerald accent */ --cta: #0db870; /* CTA button base */ --cta-dark: #076b3f; /* CTA button deep */ --purple: #2f6fe8; /* royal blue (was purple) */ --magenta: #1746c4; /* deep blue (was magenta) */ --cyan: #00e5ff; /* bright cyan */ --neon-glow: rgba(0, 200, 255, 0.15); --purple-glow: rgba(47, 111, 232, 0.12); --radius: 6px; font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } :root[data-theme="light"] { --bg: #edf2f8; --panel: #ffffff; --panel-2: #e2eaf4; --line: rgba(0, 119, 255, 0.16); --text: #0d1520; --muted: #3d5068; --soft: #6b7a8d; --white: #ffffff; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 40, 120, 0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 0% 50%, rgba(0, 30, 100, 0.12), transparent 50%), radial-gradient(ellipse 60% 40% at 100% 60%, rgba(0, 50, 140, 0.1), transparent 50%), radial-gradient(ellipse 70% 30% at 50% 100%, rgba(0, 60, 160, 0.15), transparent 50%), linear-gradient(180deg, #010810 0%, #020c1a 15%, #03112a 40%, #020e22 65%, #010a16 85%, #000610 100%); background-attachment: fixed; color: var(--text); font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; } body::selection { background: var(--red); color: #fff; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } img { display: block; width: 100%; } .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .app-header { position: sticky; top: 0; z-index: 50; display: grid; min-height: 68px; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 24px; border-bottom: 1px solid rgba(0, 180, 255, 0.08); padding: 0 28px; background: rgba(2, 8, 20, 0.96); backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(0, 180, 255, 0.06), 0 4px 28px rgba(0, 0, 0, 0.5); text-transform: uppercase; } :root[data-theme="light"] .app-header { background: rgba(255, 255, 255, 0.92); } .logo { display: flex; align-items: center; text-decoration: none; color: var(--white); } .logo__img { width: 50px; height: 50px; object-fit: contain; border-radius: 8px; filter: invert(1) brightness(1.1); transition: all 0.3s ease; } @keyframes logoNeonBreathe { 0%, 100% { filter: invert(1) brightness(1.1) drop-shadow(0 0 8px rgba(0, 229, 255, 0.2)) drop-shadow(0 0 20px rgba(47, 111, 232, 0.1)); } 50% { filter: invert(1) brightness(1.2) drop-shadow(0 0 16px rgba(0, 229, 255, 0.45)) drop-shadow(0 0 40px rgba(47, 111, 232, 0.25)) drop-shadow(0 0 60px rgba(0, 229, 255, 0.1)); } } .logo:hover .logo__img { filter: invert(1) brightness(1.3) drop-shadow(0 0 20px rgba(0, 229, 255, 0.6)) drop-shadow(0 0 50px rgba(47, 111, 232, 0.3)); animation: none; transform: scale(1.05); } /* Light mode: no invert, subtle blue glow */ :root[data-theme="light"] .logo__img { filter: none !important; } @keyframes logoLightBreathe { 0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 80, 180, 0.1)); } 50% { filter: drop-shadow(0 0 12px rgba(0, 80, 180, 0.25)); } } :root[data-theme="light"] .logo:hover .logo__img { filter: drop-shadow(0 0 14px rgba(0, 80, 180, 0.3)) !important; animation: none; } .desktop-nav { display: flex; justify-content: center; gap: 8px; } .desktop-nav a { border-radius: var(--radius); padding: 10px 14px; color: var(--muted); font-size: 15px; font-weight: 800; letter-spacing: 0.12em; } .desktop-nav a:hover { background: var(--panel-2); color: var(--white); } .icon-button, .cart-link { display: grid; width: 36px; height: 36px; place-items: center; border: 0; background: transparent; color: var(--white); } .icon-button { gap: 4px; padding: 9px; } .icon-button span { display: block; width: 18px; height: 2px; background: var(--white); } .cart-link { position: relative; cursor: pointer; } .cart-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .cart-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; display: none; } .cart-badge.is-visible { display: block; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-height: unset; border: 1px solid var(--line); border-radius: 50%; padding: 0; background: var(--panel); color: var(--text); cursor: pointer; font-size: 0; transition: border-color 0.3s, box-shadow 0.3s; } .theme-toggle::before { content: '☾'; font-size: 16px; line-height: 1; } :root[data-theme="light"] .theme-toggle::before { content: '☀'; } .theme-toggle:hover { border-color: rgba(0, 229, 255, 0.4); box-shadow: 0 0 12px rgba(0, 229, 255, 0.15); } .hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); } .hero__image { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 50% at 22% 60%, rgba(0, 70, 200, 0.35), transparent 70%), radial-gradient(ellipse 30% 40% at 75% 25%, rgba(0, 60, 180, 0.35), transparent 60%), radial-gradient(ellipse 25% 18% at 55% 88%, rgba(0, 120, 255, 0.15), transparent 50%), radial-gradient(ellipse 20% 25% at 8% 12%, rgba(0, 100, 255, 0.12), transparent 45%), linear-gradient(170deg, #020a18 0%, #061a30 40%, #020c1a 100%); } :root[data-theme="light"] .hero__image { opacity: 0.8; } /* ── Hero body (copy wrapper) ── */ .hero__body { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-end; padding: 120px 0 52px; } .hero__copy { position: relative; max-width: 540px; color: #ffffff; } .hero__copy h1 { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: #ffffff; background-clip: unset; color: #ffffff; font-size: clamp(44px, 5.2vw, 78px); line-height: 1.05; margin-bottom: 20px; } .hero__h1-accent { display: inline; color: var(--red); -webkit-text-fill-color: var(--red); text-shadow: 0 0 40px rgba(0, 207, 255, 0.4); } .hero__sub { max-width: 480px; color: rgba(200, 215, 230, 0.85) !important; font-size: 15px !important; line-height: 1.75 !important; margin-bottom: 4px; } .kicker, .section-label { margin: 0 0 12px; color: var(--red); font-family: "Inter", sans-serif; font-size: 17px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; text-shadow: 0 0 14px rgba(0, 207, 255, 0.25); } .section-label { color: var(--red); } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 820px; margin-bottom: 18px; font-family: "Inter", sans-serif; font-size: clamp(38px, 5.6vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; } h2 { margin-bottom: 16px; font-family: "Inter", "Segoe UI", sans-serif; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } h3 { font-family: "Inter", sans-serif; letter-spacing: 0; } .hero p:not(.kicker):not(.section-label), .intro p:not(.section-label), .contact li span { color: #c8ccd3; font-size: 15px; line-height: 1.7; } /* ── Hero visual: absolute top-right ── */ .hero__visual { position: absolute; top: 0; right: 0; width: 62%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; filter: drop-shadow(0 0 60px rgba(0, 229, 255, 0.15)) drop-shadow(0 0 120px rgba(47, 111, 232, 0.08)); } .hero__speaker { width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 82%, transparent 100%); -webkit-mask-composite: destination-in; mask-image: linear-gradient(to right, transparent 0%, black 22%, black 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 10%, black 82%, transparent 100%); mask-composite: intersect; } /* Hero CTA: neon gradient button */ .hero .button--light { background: linear-gradient(135deg, #00e5ff 0%, #0088ff 40%, #2f6fe8 100%); color: #ffffff; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 0 25px rgba(0, 229, 255, 0.4), 0 0 60px rgba(47, 111, 232, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18); border: 1px solid rgba(0, 229, 255, 0.3); transition: all 0.3s ease; } .hero .button--light:hover, .hero .button--light:focus-visible { box-shadow: 0 0 40px rgba(0, 229, 255, 0.6), 0 0 80px rgba(47, 111, 232, 0.3), 0 8px 32px rgba(0, 60, 180, 0.3); border-color: rgba(0, 229, 255, 0.6); transform: translateY(-2px); } .hero .button--dark { border: 1px solid rgba(47, 111, 232, 0.35); box-shadow: 0 0 20px rgba(47, 111, 232, 0.1); transition: all 0.3s ease; } .hero .button--dark:hover { border-color: rgba(47, 111, 232, 0.6); box-shadow: 0 0 35px rgba(47, 111, 232, 0.2); transform: translateY(-2px); } /* German trust badge — neon */ .hero__trust { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: rgba(0, 229, 255, 0.5); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 0 12px rgba(0, 229, 255, 0.15); } /* ── Hero feature strip ── */ .hero__features { position: relative; z-index: 2; border-top: 1px solid rgba(0, 180, 255, 0.12); background: rgba(2, 12, 26, 0.78); backdrop-filter: blur(10px); } .hero-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .hero-feature { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid rgba(0, 180, 255, 0.1); } .hero-feature:last-child { border-right: none; } .hero-feature__icon { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid rgba(0, 160, 255, 0.3); border-radius: 14px; color: #4db8ff; background: linear-gradient(145deg, rgba(0, 100, 220, 0.15), rgba(0, 60, 160, 0.06)); box-shadow: 0 0 18px rgba(0, 120, 255, 0.1); } .hero-feature strong { display: block; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; } .hero-feature span { color: var(--muted); font-size: 12px; line-height: 1.4; } /* Accent line under Vietnam — neon glow */ .hero__accent-line { width: 64px; height: 3px; margin-top: -10px; margin-bottom: 18px; background: linear-gradient(90deg, #00e5ff, #2f6fe8, #1746c4); border-radius: 2px; box-shadow: 0 0 12px rgba(0, 229, 255, 0.4), 0 0 30px rgba(47, 111, 232, 0.2); animation: accentLinePulse 3s ease-in-out infinite; } @keyframes accentLinePulse { 0%, 100% { opacity: 0.8; box-shadow: 0 0 12px rgba(0, 229, 255, 0.4), 0 0 30px rgba(47, 111, 232, 0.2); } 50% { opacity: 1; box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 0 50px rgba(47, 111, 232, 0.35); } } .project-section { display: none; } .button, .load-more, .contact-form button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .button--light { width: fit-content; margin-top: 18px; padding: 0 34px; background: linear-gradient(135deg, #0ecc7e 0%, #0a9c5e 50%, #076b3f 100%); color: #e8fff5; box-shadow: 0 0 22px rgba(0, 190, 110, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .button--dark { padding: 0 26px; border-color: rgba(0, 210, 255, 0.22); background: rgba(0, 30, 60, 0.35); color: var(--text); backdrop-filter: blur(4px); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .hero-actions .button { margin-top: 0; } .button, .load-more, .contact-form button, .checkout-form button { font-family: inherit; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease; } .button:hover, .button:focus-visible, .load-more:hover, .contact-form button:hover, .checkout-form button:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0, 207, 255, 0.2); } .button--light:hover, .button--light:focus-visible { box-shadow: 0 0 40px rgba(0, 200, 110, 0.5), 0 8px 24px rgba(0, 100, 60, 0.25); } /* ── Projects section ── */ .projects-section { padding: 80px 0; background: radial-gradient(ellipse 40% 45% at 92% 25%, rgba(0, 100, 255, 0.22), transparent), radial-gradient(ellipse 35% 40% at 3% 65%, rgba(0, 70, 200, 0.18), transparent), radial-gradient(ellipse 50% 25% at 50% 100%, rgba(0, 80, 220, 0.12), transparent), var(--bg); } .projects-featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; } .project-featured-card { position: relative; border-radius: 10px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: transform 220ms ease, box-shadow 220ms ease; } .project-featured-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 180, 255, 0.2); } .project-featured-card__media { position: relative; height: 280px; overflow: hidden; } .project-featured-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .project-featured-card:hover .project-featured-card__media img { transform: scale(1.05); } .project-featured-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(2, 12, 26, 0.9) 100%); } .project-featured-card__body { padding: 20px 22px 22px; } .project-featured-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .project-tag { display: inline-block; padding: 3px 10px; border: 1px solid rgba(0, 207, 255, 0.28); border-radius: 20px; color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(0, 180, 255, 0.06); } .project-featured-card h3 { margin: 0 0 8px; color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.3; } .project-featured-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .projects-pills-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 24, 40, 0.5); } .projects-pill-group { display: flex; flex-direction: column; gap: 10px; } .projects-pill-label { color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .project-pills { display: flex; flex-wrap: wrap; gap: 6px; } .project-pill { display: inline-block; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.04); transition: border-color 180ms, color 180ms; } .project-pill:hover { border-color: rgba(0, 207, 255, 0.4); color: var(--red); } .intro { position: relative; background: radial-gradient(ellipse 45% 45% at 88% 35%, rgba(0, 100, 255, 0.28), transparent), radial-gradient(ellipse 35% 40% at 3% 65%, rgba(0, 80, 220, 0.22), transparent), radial-gradient(ellipse 50% 25% at 45% 0%, rgba(0, 120, 255, 0.14), transparent), radial-gradient(ellipse 80% 15% at 50% 0%, rgba(0, 60, 180, 0.2), transparent), radial-gradient(ellipse 80% 15% at 50% 100%, rgba(0, 20, 60, 0.4), transparent), var(--panel); padding: 72px 0; } .solutions { position: relative; background: radial-gradient(ellipse 40% 50% at 8% 35%, rgba(0, 80, 220, 0.28), transparent), radial-gradient(ellipse 35% 35% at 88% 20%, rgba(0, 120, 255, 0.22), transparent), radial-gradient(ellipse 45% 40% at 55% 85%, rgba(0, 100, 255, 0.14), transparent), radial-gradient(ellipse 80% 12% at 50% 0%, rgba(0, 40, 120, 0.25), transparent), radial-gradient(ellipse 80% 12% at 50% 100%, rgba(0, 15, 50, 0.35), transparent), linear-gradient(180deg, #071828, #030e20, var(--bg)); padding: 88px 0; } :root[data-theme="light"] .solutions { background: #edf3fa; } .section-head--compact { align-items: end; margin-bottom: 24px; } .solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* Solution card with background photo */ .solution-card { position: relative; min-height: 320px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 220ms ease, box-shadow 220ms ease; } .solution-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 180, 255, 0.3); } .solution-card__bg { position: absolute; inset: 0; } .solution-card__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.5) brightness(0.45); transition: transform 500ms ease, filter 300ms ease; } .solution-card:hover .solution-card__bg img { transform: scale(1.07); filter: saturate(0.65) brightness(0.55); } .solution-card__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 320px; padding: 22px; background: linear-gradient(180deg, transparent 30%, rgba(2, 8, 22, 0.9) 100%); } .solution-card__num { position: absolute; top: 18px; left: 18px; color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-shadow: 0 0 12px rgba(0, 207, 255, 0.5); } .solution-card h3 { margin: 0 0 8px; color: #ffffff; font-size: 18px; line-height: 1.25; } .solution-card p { margin: 0 0 14px; color: rgba(200, 220, 235, 0.85); font-size: 13px; line-height: 1.6; } .solution-card__link { color: var(--red); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: opacity 180ms; } .solution-card__link:hover { opacity: 0.75; } .intro__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); gap: 48px; align-items: center; } .metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .metric-card { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(0, 207, 255, 0.18); border-radius: 10px; padding: 24px 22px 22px; background: radial-gradient(ellipse 110% 60% at 50% 0%, rgba(0, 180, 255, 0.08), transparent 55%), #071628; transition: border-color 200ms, box-shadow 200ms; } .metric-card:hover { border-color: rgba(0, 207, 255, 0.38); box-shadow: 0 0 28px rgba(0, 180, 255, 0.1); } .metric-card__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(0, 207, 255, 0.25); border-radius: 50%; color: var(--red); background: rgba(0, 180, 255, 0.06); margin-bottom: 14px; box-shadow: 0 0 0 3px rgba(221, 0, 0, 0.06), 0 0 12px rgba(255, 206, 0, 0.05); } .metric-grid strong, .metric-grid span { display: block; } .metric-grid strong { font-family: "Inter", sans-serif; font-size: clamp(16px, 1.5vw, 24px); line-height: 1.2; background: linear-gradient(135deg, #00cffd 0%, #7de8fc 50%, #e8f8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; } .metric-grid span { color: #c4c8d0; font-size: 11px; font-weight: 800; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; } .metric-card__divider { width: 32px; height: 2px; margin: 12px 0; border-radius: 2px; background: linear-gradient(90deg, #1a1a1a 0%, #DD0000 45%, #FFCE00 100%); opacity: 0.75; } .metric-card__desc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .section, .catalog, .detail { position: relative; padding: 96px 0; } .section:not(.section--raised):not(.projects-section) { background: radial-gradient(ellipse 40% 40% at 85% 25%, rgba(0, 100, 255, 0.18), transparent), radial-gradient(ellipse 35% 35% at 10% 70%, rgba(0, 80, 220, 0.14), transparent), var(--bg); } .catalog__subtitle { margin-top: 10px; max-width: 780px; color: var(--muted); font-size: 15px; line-height: 1.6; } .products-trust-strip { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; padding: 14px 20px; border: 1px solid rgba(0, 180, 255, 0.12); border-radius: 6px; background: rgba(0, 30, 70, 0.25); color: var(--muted); font-size: 13px; font-weight: 500; } .products-trust-strip span { display: flex; align-items: center; gap: 8px; } .products-trust-strip__divider { opacity: 0.3; } .section-head { display: flex; align-items: end; justify-content: space-between; } .catalog__title { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin-bottom: 30px; } .text-link { border-bottom: 1px solid currentColor; color: var(--muted); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .featured-projects { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; } .project-card { position: relative; min-height: 360px; overflow: hidden; background: #05080d; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; } .project-card--large { min-height: 520px; } .project-card img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0.72; filter: saturate(0.5); transition: transform 280ms ease, opacity 280ms ease, filter 280ms ease; } .project-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 207, 255, 0.06); } .project-card:hover img { transform: scale(1.045); opacity: 0.86; } .project-card::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.88)); content: ""; } .project-card div { position: absolute; right: 18px; bottom: 18px; left: 18px; z-index: 1; } .project-card span, .project-card strong { display: block; } .project-card span { margin-bottom: 4px; color: var(--white); font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .project-card strong { color: #c9ced6; font-size: 15px; } .project-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; } .project-pill { border: 1px solid var(--line); padding: 14px; background: var(--panel); color: #cfd3dc; font-size: 13px; font-weight: 800; line-height: 1.35; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .project-pill:hover { background: rgba(0, 207, 255, 0.07); border-color: rgba(0, 207, 255, 0.28); color: #ffffff; } :root[data-theme="light"] .project-pill { background: rgba(255, 255, 255, 0.82); color: #202938; } .section--raised { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 170, 255, 0.05), transparent), var(--panel); } .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-top: 22px; } .category-grid a { display: grid; min-height: 150px; place-items: center; gap: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(0, 170, 255, 0.07), transparent 55%), #091a2e; text-align: center; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .category-grid a:hover { background: #102035; border-color: rgba(0, 207, 255, 0.35); box-shadow: 0 0 22px rgba(0, 207, 255, 0.07); transform: translateY(-3px); } .category-grid a:last-child { border-right: 0; } .category-grid svg { width: 32px; height: 32px; fill: none; stroke: var(--white); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } .category-grid span { max-width: 120px; font-size: 13px; font-weight: 900; line-height: 1.35; text-transform: uppercase; } .catalog { background: radial-gradient(ellipse 40% 40% at 82% 12%, rgba(0, 120, 255, 0.24), transparent), radial-gradient(ellipse 40% 45% at 8% 78%, rgba(0, 80, 220, 0.22), transparent), radial-gradient(ellipse 30% 25% at 50% 45%, rgba(0, 100, 255, 0.1), transparent), linear-gradient(180deg, rgba(0, 160, 255, 0.04), transparent 30%), #071828; } :root[data-theme="light"] .catalog, :root[data-theme="light"] .intro, :root[data-theme="light"] .section--raised { background: #e8f0f9; } :root[data-theme="light"] .product-card, :root[data-theme="light"] .metric-grid div, :root[data-theme="light"] .category-grid a { background: #ffffff; color: #151922; } :root[data-theme="light"] .product-card__media { background: radial-gradient(circle at center, #cfdff5, transparent 52%), linear-gradient(135deg, #ffffff, #e2eaf4); } .search-box { display: flex; width: min(540px, 100%); gap: 10px; align-items: stretch; } .search-box__input-wrap { position: relative; flex: 1; } .search-box__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .search-box input { width: 100%; min-height: 48px; padding: 0 16px 0 42px; border: 1px solid rgba(0, 229, 255, 0.18); background: rgba(0, 229, 255, 0.04); color: var(--text); border-radius: 10px; font-size: 14px; transition: border-color 0.3s, box-shadow 0.3s; } .search-box input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 16px rgba(0, 229, 255, 0.15); } .search-box__filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 10px; background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(47, 111, 232, 0.08)); color: var(--cyan); cursor: pointer; font-size: 13px; font-weight: 800; white-space: nowrap; transition: all 0.25s; } .search-box__filter-btn:hover { border-color: var(--cyan); box-shadow: 0 0 16px rgba(0, 229, 255, 0.2); } .tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; } .tab { flex: 0 0 auto; min-height: 34px; border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 20px; padding: 0 16px; background: rgba(0, 229, 255, 0.04); color: rgba(200, 210, 225, 0.7); cursor: pointer; font-size: 12px; font-weight: 900; text-transform: uppercase; transition: all 0.25s; } .tab:hover { border-color: rgba(0, 229, 255, 0.4); color: var(--cyan); background: rgba(0, 229, 255, 0.08); } .tab.is-active { background: linear-gradient(135deg, var(--cyan), var(--purple)); border-color: transparent; color: #ffffff; box-shadow: 0 0 16px rgba(0, 229, 255, 0.25); } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; } .product-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0, 180, 255, 0.2); background: var(--panel); border-radius: 8px; cursor: pointer; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; box-shadow: 0 0 0 0 rgba(0, 180, 255, 0); } .product-card:hover { transform: translateY(-5px); border-color: rgba(0, 180, 255, 0.5); box-shadow: 0 0 24px rgba(0, 140, 255, 0.18), 0 8px 32px rgba(0, 0, 0, 0.28); } .product-card:active, .project-card:active, .category-grid a:active { transform: translateY(-1px) scale(0.99); } /* Tag badge */ .product-card__tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; } .product-card__tag--new { background: var(--red); color: #020c1a; box-shadow: 0 0 10px rgba(0, 207, 255, 0.35); } .product-card__tag--stock { background: rgba(0, 60, 140, 0.7); border: 1px solid rgba(0, 150, 255, 0.4); color: var(--text); } .product-card__tag--premium { background: linear-gradient(110deg, #b8860b, #ffd700); color: #1a0e00; } /* Image area */ .product-card__media { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: radial-gradient(ellipse 70% 65% at 50% 48%, rgba(0, 100, 220, 0.2), transparent 68%), linear-gradient(160deg, #0b1e38 0%, #060e1c 100%); overflow: hidden; } .product-card__img-wrap { display: grid; place-items: center; flex: 1; width: 100%; } /* "Engineered in Germany" strip */ .product-card__germany { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgba(2, 8, 20, 0.75); backdrop-filter: blur(4px); border-top: 1px solid rgba(255, 255, 255, 0.07); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } /* Card body */ .product-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; border-top: 1px solid rgba(0, 180, 255, 0.08); } .product-card__series { display: block; margin-bottom: 6px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; } .product-card h3 { margin: 0 0 8px; font-family: "Inter", "Segoe UI", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; } :root[data-theme="light"] .product-card p, :root[data-theme="light"] .hero p, :root[data-theme="light"] .intro p { color: #394353; } .product-card p { flex: 1; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.6; min-height: 46px; } .product-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .product-card__price { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--cyan) 20%, var(--magenta) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.2)); } .stock { color: var(--green); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .stock::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: middle; animation: stockBlink 1.5s ease-in-out infinite; box-shadow: 0 0 6px rgba(0, 200, 122, 0.5); } @keyframes stockBlink { 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(0, 200, 122, 0.5); } 50% { opacity: 0.3; box-shadow: 0 0 2px rgba(0, 200, 122, 0.2); } } .product-card__buy { width: 100%; min-height: 42px; border: 1px solid rgba(0, 229, 255, 0.25); border-radius: 8px; background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), rgba(47, 111, 232, 0.04)); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .product-card__buy:hover { border-color: var(--cyan); background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(47, 111, 232, 0.08)); color: var(--white); box-shadow: 0 0 16px rgba(0, 229, 255, 0.2), 0 0 40px rgba(47, 111, 232, 0.1); } .load-more { width: 100%; margin-top: 28px; border-color: rgba(0, 180, 255, 0.16); background: rgba(0, 30, 60, 0.3); color: var(--muted); letter-spacing: 0.12em; } .speaker-art { position: relative; width: min(68%, 250px); aspect-ratio: 1 / 1; border: 1px solid #363b44; background: radial-gradient(circle at 50% 55%, #232831 0 23%, #07080a 24% 34%, transparent 35%), radial-gradient(circle at 50% 25%, #343b46 0 9%, transparent 10%), linear-gradient(145deg, #2e333c, #0b0d10); box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.28), 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 207, 255, 0.12); transition: transform 220ms ease; } .product-card:hover .speaker-art, .detail__visual:hover .speaker-art { transform: scale(1.05); } .product-image { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.35)); transition: transform 220ms ease; } .product-card:hover .product-image, .detail__visual:hover .product-image { transform: scale(1.045); } /* ── Lightbox phóng to ảnh sản phẩm khi click ── */ .img-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(2, 8, 20, 0.92); backdrop-filter: blur(6px); cursor: zoom-out; } .img-lightbox.is-open { display: flex; animation: lbFade 0.25s ease; } .img-lightbox__img { max-width: 100%; max-height: 92vh; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6); animation: lbZoom 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .img-lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .img-lightbox__close:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.08); } @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } } @keyframes lbZoom { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .speaker-art--polar { width: 42%; height: 78%; aspect-ratio: auto; border-radius: 2px; background: radial-gradient(circle at 50% 18%, #343b46 0 8%, transparent 9%), radial-gradient(circle at 50% 34%, #343b46 0 8%, transparent 9%), radial-gradient(circle at 50% 50%, #343b46 0 8%, transparent 9%), linear-gradient(180deg, #303640, #0d0f13); } .speaker-art--sub { border-radius: 2px; background: radial-gradient(circle at 50% 52%, #252a31 0 35%, #08090b 36% 49%, transparent 50%), linear-gradient(145deg, #2b3038, #0c0d10); } .speaker-art i { position: absolute; display: block; border-radius: 50%; } .speaker-art i:nth-child(1) { inset: 18%; border: 1px solid rgba(255, 255, 255, 0.12); } .speaker-art i:nth-child(2) { inset: 34%; background: radial-gradient(circle at 40% 36%, #5a606b, #111318 62%); } .speaker-art i:nth-child(3) { right: 9%; bottom: 9%; width: 8px; height: 8px; background: #454a52; } .detail { background: var(--bg); } .detail__grid { display: grid; grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1fr); gap: 52px; align-items: center; } .detail__visual { position: relative; display: grid; min-height: 520px; place-items: center; background: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(0, 90, 210, 0.18), transparent 65%), radial-gradient(ellipse 40% 40% at 50% 92%, rgba(0, 180, 255, 0.08), transparent), linear-gradient(145deg, #0d2040, #071020); border: 1px solid rgba(0, 180, 255, 0.18); border-radius: 4px; color: var(--text); transition: transform 180ms ease, box-shadow 180ms ease; } .detail__visual:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 207, 255, 0.1); } .detail__visual span { position: absolute; top: 0; right: 0; padding: 12px 22px; background: var(--white); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .detail__visual .speaker-art { width: 72%; } .detail-price { display: block; margin: 20px 0 8px; font-size: clamp(42px, 6vw, 72px); line-height: 1; } .vat { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .spec-table { margin: 34px 0 0; border-top: 1px solid var(--line); } .spec-table div { display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--line); padding: 18px 0; } .spec-table dt { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .spec-table dd { margin: 0; text-align: right; font-size: 19px; } .detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .detail-actions .button { margin-top: 0; } #news { position: relative; background: radial-gradient(ellipse 40% 45% at 12% 25%, rgba(0, 80, 220, 0.2), transparent), radial-gradient(ellipse 35% 40% at 88% 65%, rgba(0, 120, 255, 0.16), transparent), var(--bg); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .news-grid article { border-bottom: 1px solid var(--line); padding-bottom: 18px; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease; } .news-grid article:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.22); } .news-img { overflow: hidden; } .news-grid img { aspect-ratio: 1.5 / 1; object-fit: cover; filter: saturate(0.72); transition: transform 280ms ease, filter 280ms ease; } .news-grid article:hover .news-img img { transform: scale(1.035); filter: saturate(0.9); } .news-grid time { display: block; margin-top: 14px; color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .news-grid h3 { margin: 8px 0 0; font-size: 18px; line-height: 1.35; } .contact { position: relative; background: radial-gradient(ellipse 50% 45% at 50% 105%, rgba(0, 70, 200, 0.35), transparent), radial-gradient(ellipse 35% 35% at 92% 8%, rgba(0, 140, 255, 0.22), transparent), radial-gradient(ellipse 30% 30% at 12% 20%, rgba(0, 120, 255, 0.2), transparent), radial-gradient(ellipse 40% 30% at 5% 70%, rgba(0, 60, 180, 0.18), transparent), linear-gradient(170deg, #030f24 0%, #071c38 50%, #040e1e 80%, #020c1a 100%); border-top: 1px solid rgba(0, 180, 255, 0.14); padding: 88px 0 100px; } .contact::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(3, 7, 16, 0.85)); pointer-events: none; } .contact .section-label { color: var(--red); } .contact h2 { text-shadow: 0 0 40px rgba(0, 207, 255, 0.18); } /* ── Contact feature cards strip ── */ .contact-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; } .contact-feature { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 18px 20px 20px; border: 1px solid rgba(0, 180, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.03); } .contact-feature__left { display: flex; gap: 14px; align-items: flex-start; flex: 1; } .contact-feature__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(0, 207, 255, 0.2); border-radius: 8px; color: var(--red); background: rgba(0, 180, 255, 0.06); box-shadow: 0 2px 0 rgba(221, 0, 0, 0.18), 0 0 10px rgba(255, 206, 0, 0.04); } .contact-feature strong { display: block; color: var(--text); font-size: 13px; font-weight: 700; margin-bottom: 5px; } .contact-feature span { color: var(--muted); font-size: 12px; line-height: 1.6; } .contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr); gap: 54px; align-items: start; } .contact__sub { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 480px; } .contact ul { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; } .contact li { display: flex; gap: 16px; align-items: flex-start; transition: transform 0.22s; } .contact li:hover { transform: translateX(4px); } .contact-li__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(0, 207, 255, 0.2); border-radius: 8px; background: rgba(0, 180, 255, 0.07); color: var(--red); } .contact li strong { display: block; color: var(--red); font-size: 15px; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.01em; } .contact li span { color: var(--muted); font-size: 14px; line-height: 1.6; } .contact-form { position: relative; display: grid; gap: 20px; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 207, 255, 0.06), transparent), linear-gradient(160deg, rgba(7, 18, 38, 0.9) 0%, rgba(4, 10, 24, 0.95) 100%); border: 1px solid rgba(0, 207, 255, 0.14); border-top-color: rgba(0, 207, 255, 0.32); padding: 36px 32px 32px; border-radius: 3px; box-shadow: 0 8px 60px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 207, 255, 0.1) inset, 0 0 80px rgba(0, 119, 255, 0.06); backdrop-filter: blur(12px); overflow: hidden; } .contact-form::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient( 90deg, transparent, rgba(0, 207, 255, 0.7) 30%, rgba(0, 136, 255, 0.8) 50%, rgba(0, 207, 255, 0.7) 70%, transparent ); border-radius: 0 0 2px 2px; } .contact-form label { display: grid; gap: 8px; } /* Form header */ .contact-form__header { margin-bottom: 4px; } .contact-form label span { color: rgba(170, 182, 197, 0.85); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* Field wrapper with icon */ .contact-form__field-wrap { position: relative; } .contact-form__field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(90, 120, 160, 0.7); pointer-events: none; } .contact-form__field-icon--top { top: 18px; transform: none; } .contact-form__field-wrap--textarea .contact-form__field-icon { top: 16px; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid rgba(0, 207, 255, 0.16); background: rgba(2, 8, 20, 0.75); color: var(--white); padding: 0 18px 0 44px; border-radius: 6px; font-size: 15px; transition: border-color 0.22s, box-shadow 0.22s; } .contact-form input { min-height: 50px; } .contact-form textarea { min-height: 130px; padding-top: 15px; resize: vertical; line-height: 1.6; } .contact-form ::placeholder { color: rgba(90, 106, 130, 0.75); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: rgba(0, 180, 255, 0.5); box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.08); } .contact-form button { width: 100%; min-height: 52px; background: linear-gradient(135deg, #1a7fff 0%, #0055cc 55%, #003fa3 100%); color: #ffffff; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 6px; box-shadow: 0 0 24px rgba(0, 120, 255, 0.28), 0 4px 16px rgba(0, 40, 120, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: box-shadow 0.25s, transform 0.18s, background 0.25s; margin-top: 4px; } .contact-form button:hover { background: linear-gradient(135deg, #2e8fff 0%, #0066ee 55%, #004fc8 100%); box-shadow: 0 0 40px rgba(0, 140, 255, 0.45), 0 8px 24px rgba(0, 40, 120, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .contact-form button:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .contact-form__btn--success { background: linear-gradient(135deg, #00c853 0%, #009624 100%) !important; box-shadow: 0 0 24px rgba(0, 200, 83, 0.35), 0 4px 16px rgba(0, 100, 40, 0.2) !important; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } .checkout { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 4, 14, 0.86); backdrop-filter: blur(14px); } .checkout.is-open { display: flex; } .checkout__panel { position: relative; font-family: "Inter", "Segoe UI", sans-serif; width: min(560px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; border: 1px solid rgba(0, 180, 255, 0.16); border-radius: 6px; background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(0, 170, 255, 0.07), transparent), #071424; padding: 28px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75), 0 0 60px rgba(0, 160, 255, 0.07); } .checkout__panel h2 { max-width: 100%; margin-bottom: 22px; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: 0; } .checkout__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--white); cursor: pointer; font-size: 24px; line-height: 1; } .checkout-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; } .checkout-steps li { display: grid; gap: 8px; border: 1px solid var(--line); padding: 12px; color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.4; } .checkout-steps li.is-active { border-color: var(--red-2); color: var(--white); } .checkout-steps span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--red-2); color: var(--white); } .checkout-product { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); margin-bottom: 16px; padding: 14px; background: var(--panel); } .checkout-product span { color: var(--green); font-weight: 900; } .checkout-form { display: grid; gap: 12px; } .checkout-form input, .checkout-form select, .checkout-form textarea { min-height: 46px; border: 1px solid rgba(0, 207, 255, 0.18); background: #06101e; color: var(--white); padding: 0 13px; } .checkout-form textarea { min-height: 96px; padding-top: 12px; resize: vertical; } .checkout-form button { min-height: 48px; border: 0; border-radius: 8px; background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--magenta) 100%); color: #ffffff; cursor: pointer; font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 24px rgba(0, 229, 255, 0.25), 0 0 60px rgba(47, 111, 232, 0.15); transition: box-shadow 0.3s, transform 0.2s; } .checkout-form button:hover { box-shadow: 0 0 36px rgba(0, 229, 255, 0.4), 0 0 80px rgba(47, 111, 232, 0.25); transform: translateY(-2px); } .checkout-note { margin: 16px 0 0; border: 1px solid rgba(255, 255, 255, 0.08); padding: 12px 14px; background: rgba(255, 255, 255, 0.04); color: #cfd4dc; font-size: 13px; line-height: 1.6; } /* ═══════════════════════════════════════════ PRODUCT DETAIL MODAL — Neon Dark Theme ═══════════════════════════════════════════ */ .product-detail { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(2, 4, 12, 0.88); backdrop-filter: blur(24px) saturate(1.4); } .product-detail.is-open { display: flex; } .product-detail__panel { position: relative; display: grid; width: min(1320px, 100%); max-height: min(820px, calc(100vh - 48px)); grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.15fr) minmax(310px, 0.9fr); overflow: auto; border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 16px; background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(47, 111, 232, 0.08), transparent), radial-gradient(ellipse 50% 40% at 80% 70%, rgba(0, 229, 255, 0.06), transparent), linear-gradient(160deg, #0a0e1a 0%, #080c18 50%, #060a14 100%); color: #e2e8f0; box-shadow: 0 44px 100px rgba(0, 0, 0, 0.7), 0 0 80px rgba(0, 229, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .product-detail__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #a0aec0; cursor: pointer; font-size: 22px; line-height: 1; transition: all 0.25s; backdrop-filter: blur(8px); } .product-detail__close:hover { border-color: var(--cyan); background: rgba(0, 229, 255, 0.12); color: var(--cyan); box-shadow: 0 0 16px rgba(0, 229, 255, 0.2); } .product-detail__gallery { display: grid; gap: 18px; align-content: center; padding: 34px; border-radius: 16px 0 0 16px; background: radial-gradient(circle at 50% 50%, rgba(47, 111, 232, 0.06), transparent 70%), linear-gradient(160deg, #0c1020 0%, #080d1a 100%); } .product-detail__media { display: grid; min-height: 440px; place-items: center; border: 1px solid rgba(0, 229, 255, 0.1); border-radius: 12px; background: radial-gradient(circle at center, rgba(0, 229, 255, 0.04), transparent 54%), radial-gradient(ellipse 80% 60% at 50% 80%, rgba(47, 111, 232, 0.04), transparent), linear-gradient(145deg, #0d1222 0%, #0a0f1c 100%); } .product-detail__media .speaker-art { width: min(68%, 260px); filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.15)); } .product-detail__media .product-image { width: 100%; height: 100%; max-height: 560px; object-fit: contain; cursor: zoom-in; filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.4)); transition: transform 0.4s ease; } .product-detail__media .product-image:hover { transform: scale(1.03); } .product-detail__thumbs { display: flex; gap: 10px; justify-content: center; } .product-detail__thumbs span { display: block; width: 72px; height: 58px; border: 1px solid rgba(0, 229, 255, 0.12); border-radius: 8px; background: radial-gradient(circle at center, rgba(0, 229, 255, 0.06) 0 18%, transparent 19%), linear-gradient(145deg, #0d1222, #0a0f1c); transition: border-color 0.25s; } .product-detail__thumbs span:hover { border-color: var(--cyan); } .product-detail__content, .product-detail__buybox { font-family: "Inter", "Segoe UI", sans-serif; } .product-detail__content { padding: 34px 32px; border-left: 1px solid rgba(255, 255, 255, 0.04); border-right: 1px solid rgba(255, 255, 255, 0.04); background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0, 229, 255, 0.03), transparent), linear-gradient(180deg, #0b1020, #090d1a); } .product-detail__crumb { margin-bottom: 18px; color: rgba(160, 174, 192, 0.7); font-size: 14px; } .product-detail__content h2 { margin-bottom: 10px; font-family: "Inter", "Segoe UI", sans-serif; font-weight: 700; letter-spacing: 0.01em; background: linear-gradient(135deg, #ffffff 30%, var(--cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; } .product-detail__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; color: rgba(160, 174, 192, 0.8); font-size: 14px; } .product-detail__meta span { padding: 3px 10px; border: 1px solid rgba(0, 229, 255, 0.12); border-radius: 20px; background: rgba(0, 229, 255, 0.04); } .product-detail__meta span.product-detail__stars, :root[data-theme="light"] .product-detail__meta span.product-detail__stars { color: #ffc400 !important; letter-spacing: 2px; } .product-detail__content h3, .product-detail__buybox h3 { margin: 0 0 16px; font-family: "Inter", "Segoe UI", sans-serif; font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid rgba(0, 229, 255, 0.1); border-radius: 8px 8px 0 0; padding: 14px 16px; background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(47, 111, 232, 0.06)); color: #e2e8f0; font-size: 23px; line-height: 1.25; } .product-detail__price { display: block; margin: 0 0 26px; background: linear-gradient(135deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: clamp(30px, 3vw, 42px); line-height: 1; filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.3)); } .product-detail__content > p:not(.section-label) { color: rgba(200, 210, 225, 0.85); font-size: 18px; line-height: 1.85; } .product-detail__specs { margin: 28px 0 0; border-top: 1px solid rgba(0, 229, 255, 0.1); } .product-detail__specs div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 15px 0; transition: background 0.2s; } .product-detail__specs div:hover { background: rgba(0, 229, 255, 0.03); } .product-detail__specs dt { font-family: "Inter", sans-serif; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .product-detail__specs dd { margin: 0; color: var(--cyan); text-align: right; font-weight: 800; } .product-detail__buybox { padding: 34px 28px; border-radius: 0 16px 16px 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(47, 111, 232, 0.06), transparent), linear-gradient(180deg, #0c1122, #090d1a); border-left: 1px solid rgba(255, 255, 255, 0.04); } .product-detail__buybox strong { display: block; } .product-detail__buybox label { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: #c8d2e1; font-size: 17px; } .product-detail__buybox input { width: 72px; min-height: 40px; border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 6px; padding: 0 10px; background: rgba(0, 229, 255, 0.04); color: #e2e8f0; transition: border-color 0.25s, box-shadow 0.25s; } .product-detail__buybox input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 229, 255, 0.2); } .product-detail__buybox p { margin: 0 0 20px; color: #c8d2e1; font-size: 18px; } .product-detail__buybox p b, .product-detail__buybox a { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.3); } .product-detail__buy { display: grid; width: 100%; min-height: 64px; place-items: center; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--magenta) 100%); color: #ffffff; cursor: pointer; font-size: 18px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.15; text-transform: uppercase; box-shadow: 0 0 24px rgba(0, 229, 255, 0.25), 0 0 60px rgba(47, 111, 232, 0.15); transition: box-shadow 0.3s, transform 0.2s; } .product-detail__buy:hover { box-shadow: 0 0 36px rgba(0, 229, 255, 0.4), 0 0 80px rgba(47, 111, 232, 0.25); transform: translateY(-2px); } .product-detail__buy small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; text-transform: none; opacity: 0.85; } .product-detail__buybox ul { display: grid; gap: 10px; margin: 20px 0; padding: 0; color: rgba(200, 210, 225, 0.7); font-size: 16px; line-height: 1.55; list-style: none; } .product-detail__buybox ul li::before { content: '›'; margin-right: 8px; color: var(--cyan); opacity: 0.6; } .callback-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .callback-row input { width: 100%; border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 6px; padding: 8px 12px; background: rgba(0, 229, 255, 0.04); color: #e2e8f0; } .callback-row input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 229, 255, 0.2); } .callback-row button { border: 0; border-radius: 6px; padding: 0 14px; background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(47, 111, 232, 0.2)); border: 1px solid rgba(0, 229, 255, 0.2); color: var(--cyan); cursor: pointer; font-weight: 800; text-transform: uppercase; transition: all 0.25s; } .callback-row button:hover { background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(47, 111, 232, 0.3)); box-shadow: 0 0 16px rgba(0, 229, 255, 0.2); } .footer { position: relative; padding: 78px 0 64px; background: radial-gradient(ellipse 50% 40% at 50% 95%, rgba(0, 70, 200, 0.25), transparent), radial-gradient(ellipse 40% 30% at 8% 15%, rgba(0, 120, 255, 0.18), transparent), radial-gradient(ellipse 30% 25% at 88% 40%, rgba(0, 140, 255, 0.14), transparent), linear-gradient(180deg, #030e20 0%, #020a16 50%, #010508 100%); color: var(--muted); overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(0, 180, 255, 0.12) 15%, rgba(0, 212, 255, 0.68) 38%, rgba(0, 150, 255, 0.8) 50%, rgba(0, 212, 255, 0.68) 62%, rgba(0, 180, 255, 0.12) 85%, transparent 100% ); box-shadow: 0 0 24px rgba(0, 200, 255, 0.28), 0 2px 40px rgba(0, 100, 255, 0.16); } .footer__grid { display: grid; grid-template-columns: 1fr auto auto; gap: 48px; align-items: start; } .footer__brand { padding-bottom: 0; } .footer__logo { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; filter: invert(1) drop-shadow(0 0 10px rgba(0, 229, 255, 0.15)); margin-bottom: 12px; } :root[data-theme="light"] .footer__logo { filter: none; } .footer__nav-col { display: flex; flex-direction: column; gap: 0; } .footer__nav-label { margin: 0 0 12px; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; } /* Social icons */ .footer__social { display: flex; gap: 8px; margin-top: 18px; } .footer__social-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--muted); background: rgba(255, 255, 255, 0.04); transition: border-color 180ms, color 180ms, background 180ms; } .footer__social-icon:hover { border-color: rgba(0, 207, 255, 0.4); color: var(--red); background: rgba(0, 180, 255, 0.08); } .footer__brand strong { display: block; color: var(--white); font-size: 22px; font-weight: 900; letter-spacing: 0.05em; margin-bottom: 12px; text-shadow: 0 0 30px rgba(0, 207, 255, 0.2); } .footer__brand p { color: var(--soft); font-size: 14px; line-height: 1.7; max-width: 290px; } .footer strong { color: var(--white); } .footer nav { display: grid; gap: 13px; padding-top: 2px; } .footer nav[aria-label]::before { content: none; } .footer nav a { color: rgba(170, 182, 197, 0.75); font-size: 14px; line-height: 1.5; transition: color 0.2s, transform 0.2s, opacity 0.2s; display: inline-block; } .footer nav a:hover { color: var(--white); transform: translateX(5px); opacity: 1; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(0, 207, 255, 0.1); font-size: 13px; color: rgba(107, 122, 141, 0.7); letter-spacing: 0.01em; } .footer__tagline { font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(0, 207, 255, 0.78); text-shadow: 0 0 14px rgba(0, 207, 255, 0.3); } .bottom-nav { display: none; } @media (max-width: 1024px) { .app-header { grid-template-columns: auto auto 1fr auto auto; } .desktop-nav { display: none; } .intro__grid, .detail__grid, .contact__grid { grid-template-columns: 1fr; } .contact-features { grid-template-columns: 1fr; gap: 18px; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__brand { grid-column: 1 / -1; } /* Hero: shrink speaker on tablet */ .hero__visual { width: 50%; height: 65%; } .hero__body { padding: 100px 0 44px; } .hero-feature-grid { grid-template-columns: repeat(2, 1fr); } .featured-projects, .projects-featured-grid, .showcase-grid, .solution-grid, .product-grid, .news-grid { grid-template-columns: repeat(2, 1fr); } .showcase-card--featured { grid-template-columns: 1fr; } .showcase-card--featured .showcase-card__info { padding: 20px 22px 24px; border-left: 0; } .projects-pills-row { grid-template-columns: 1fr; gap: 20px; } .project-strip { grid-template-columns: repeat(3, 1fr); } .category-grid { grid-template-columns: repeat(2, 1fr); } .catalog__title { align-items: stretch; flex-direction: column; } } @media (max-width: 640px) { body { padding-bottom: 64px; } .container { width: min(100% - 24px, 520px); } .app-header { min-height: 52px; padding: 0 12px; } .theme-toggle { display: none; } .logo { font-size: 15px; } .hero { min-height: auto; } .hero__image { background-position: 58% center; } /* Mobile: speaker smaller, copy takes priority */ .hero__visual { width: 60%; height: 45%; right: -5%; opacity: 0.7; } .hero__body { padding: 80px 0 36px; align-items: flex-end; } .hero__copy { max-width: 100%; } .hero-feature-grid { grid-template-columns: repeat(2, 1fr); } .hero-feature { padding: 16px 14px; border-right: none; border-bottom: 1px solid rgba(0, 180, 255, 0.1); gap: 10px; } .hero-feature:nth-child(odd) { border-right: 1px solid rgba(0, 180, 255, 0.1); } .hero-feature:nth-last-child(-n+2) { border-bottom: none; } .hero-feature__icon { width: 42px; height: 42px; } h1 { font-size: 36px; line-height: 1; } h2 { font-size: 32px; line-height: 1.05; } .hero p, .intro p, .contact li span { font-size: 15px; } .intro, .solutions, .section, .catalog, .detail, .contact { padding: 52px 0; } .metric-grid, .featured-projects, .projects-featured-grid, .showcase-grid, .solution-grid, .product-grid, .news-grid, .project-strip, .footer__grid { grid-template-columns: 1fr; } .showcase { padding: 48px 0; } .showcase-card--featured { grid-template-columns: 1fr; } .showcase-card--featured .showcase-card__info { padding: 18px 18px 22px; } .showcase-stats { flex-direction: column; gap: 18px; padding: 22px 20px; } .showcase-stat__divider { width: 60px; height: 1px; } .project-featured-card__media { height: 200px; } .section-head { align-items: center; } .project-card, .project-card--large { min-height: 290px; } .project-card--hero { min-height: 220px; } .solutions { padding: 48px 0; } .solution-grid article { min-height: 150px; padding: 18px; } .solution-grid h3 { margin-top: 24px; font-size: 20px; } .project-strip--hero { grid-template-columns: 1fr; } #heroStateProjects .project-pill:nth-child(n + 5), #heroClubProjects .project-pill:nth-child(n + 4) { display: none; } .hero-project-groups { gap: 10px; } .category-grid a { min-height: 118px; } .search-box { grid-template-columns: 1fr 92px; } .product-card h3 { font-size: 22px; } .product-detail { padding: 12px; } .product-detail__panel { grid-template-columns: 1fr; } .product-detail__media { min-height: 300px; } .product-detail__gallery, .product-detail__content { padding: 24px 18px; } .product-detail__buybox { border-left: 0; border-top: 1px solid rgba(0, 229, 255, 0.08); border-radius: 0 0 16px 16px; padding: 24px 18px; } .product-detail__gallery { border-radius: 16px 16px 0 0; } .product-detail__content h2 { font-size: 30px; } .product-detail__specs div { grid-template-columns: 1fr; gap: 6px; } .product-detail__specs dd { text-align: left; } .callback-row { grid-template-columns: 1fr; } .detail__visual { min-height: 330px; } .detail-price { font-size: 42px; } .spec-table div { grid-template-columns: 1fr; gap: 8px; } .spec-table dd { text-align: left; } .footer { padding: 48px 0 90px; } .footer__bottom { flex-direction: column; gap: 8px; text-align: center; margin-top: 36px; } .bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(0, 207, 255, 0.12); background: #020c1a; padding-bottom: env(safe-area-inset-bottom); } .bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 62px; padding: 8px 4px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: color 0.18s; } .bottom-nav__icon { width: 22px; height: 22px; flex-shrink: 0; } .bottom-nav__item.is-active { color: var(--red); } .bottom-nav__item:hover, .bottom-nav__item:focus { color: var(--white); } } /* ══════════════════════════════════════ SHOWCASE — Công trình đã thi công ══════════════════════════════════════ */ .showcase { position: relative; padding: 88px 0; background: radial-gradient(ellipse 45% 50% at 15% 30%, rgba(0, 80, 220, 0.28), transparent), radial-gradient(ellipse 40% 45% at 85% 70%, rgba(0, 120, 255, 0.22), transparent), radial-gradient(ellipse 50% 30% at 50% 100%, rgba(0, 100, 255, 0.12), transparent), radial-gradient(ellipse 80% 10% at 50% 0%, rgba(0, 50, 160, 0.2), transparent), radial-gradient(ellipse 80% 10% at 50% 100%, rgba(0, 20, 60, 0.3), transparent), linear-gradient(180deg, #010a18 0%, #061a30 30%, #071e38 50%, #061a30 70%, #010a18 100%); } .showcase__sub { max-width: 780px; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; } .showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } .showcase-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; } .showcase-card--featured .showcase-card__video-wrap { aspect-ratio: 16 / 9; } .showcase-card--featured .showcase-card__info { display: flex; flex-direction: column; justify-content: center; padding: 32px 34px; border-left: 0; border-top: 0; } .showcase-card--featured .showcase-card__info h3 { font-size: 20px; } .showcase-card--featured .showcase-card__info p { font-size: 15px; } .showcase-card { position: relative; overflow: hidden; border: 1px solid rgba(0, 180, 255, 0.18); border-radius: 10px; background: var(--panel); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .showcase-card:hover { transform: translateY(-5px); border-color: rgba(0, 180, 255, 0.45); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 180, 255, 0.1); } .showcase-card__video-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #040a14; cursor: pointer; } .showcase-card__video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.65) saturate(0.7); transition: filter 400ms ease, transform 500ms ease; } .showcase-card:hover .showcase-card__video { filter: brightness(0.8) saturate(0.85); transform: scale(1.04); } .showcase-card__video.is-playing { filter: brightness(1) saturate(1); } .showcase-card:hover .showcase-card__video.is-playing { filter: brightness(1) saturate(1); transform: scale(1); } .showcase-card__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, transparent 30%, rgba(2, 8, 22, 0.7) 100%); transition: opacity 300ms ease; } .showcase-card__overlay.is-hidden { opacity: 0; pointer-events: none; } /* Thanh điều khiển video: Mute + Fullscreen */ .showcase-card__controls { position: absolute; bottom: 12px; right: 12px; z-index: 4; display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .showcase-card__controls.is-visible { opacity: 1; pointer-events: auto; } .showcase-ctrl { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); color: #ffffff; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .showcase-ctrl:hover { background: rgba(0, 0, 0, 0.75); border-color: rgba(255, 255, 255, 0.5); } .showcase-ctrl svg { width: 18px; height: 18px; } .showcase-card__play { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border: 0; border-radius: 50%; background: rgba(0, 120, 255, 0.25); backdrop-filter: blur(8px); cursor: pointer; transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease; } .showcase-card__play:hover { transform: scale(1.12); background: rgba(0, 120, 255, 0.45); box-shadow: 0 0 40px rgba(0, 140, 255, 0.4); } .showcase-card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 12px; border: 1px solid rgba(0, 207, 255, 0.3); border-radius: 20px; background: rgba(0, 20, 50, 0.7); backdrop-filter: blur(6px); color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .showcase-card__info { padding: 18px 20px 22px; border-top: 1px solid rgba(0, 180, 255, 0.08); } .showcase-card__info h3 { margin: 0 0 6px; color: var(--text); font-size: 17px; font-weight: 700; line-height: 1.3; } .showcase-card__info p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; } .showcase-stats { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 36px; padding: 22px 28px; border: 1px solid rgba(0, 180, 255, 0.15); border-radius: 10px; background: rgba(0, 30, 70, 0.25); } .showcase-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .showcase-stat strong { font-family: "Inter", sans-serif; font-size: 28px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #00cffd 0%, #7de8fc 50%, #e8f8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .showcase-stat span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .showcase-stat__divider { width: 1px; height: 40px; background: rgba(0, 180, 255, 0.2); } /* ── Showcase: Light mode ── */ :root[data-theme="light"] .showcase { background: radial-gradient(ellipse 50% 50% at 20% 30%, rgba(0, 60, 160, 0.06), transparent), radial-gradient(ellipse 45% 45% at 80% 70%, rgba(0, 100, 200, 0.05), transparent), linear-gradient(180deg, #edf2f8 0%, #e2eaf4 50%, #edf2f8 100%); } :root[data-theme="light"] .showcase-card { background: #ffffff; border-color: rgba(0, 80, 160, 0.12); } :root[data-theme="light"] .showcase-card:hover { border-color: rgba(0, 80, 180, 0.3); box-shadow: 0 20px 50px rgba(0, 40, 100, 0.12); } :root[data-theme="light"] .showcase-card__info h3 { color: #1a2a40; } :root[data-theme="light"] .showcase-card__info p { color: #4a6080; } :root[data-theme="light"] .showcase-stats { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 80, 160, 0.1); } :root[data-theme="light"] .showcase-stat strong { background: linear-gradient(135deg, #0066ff 0%, #0055cc 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] .showcase-stat span { color: #4a6080; } :root[data-theme="light"] .showcase-stat__divider { background: rgba(0, 60, 140, 0.12); } :root[data-theme="light"] .showcase-card__badge { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 80, 180, 0.2); color: #0055cc; } /* HK AUDIO RESPONSIVE STABILITY PATCH */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } * { min-width: 0; } img, svg, video { max-width: 100%; } button, input, textarea, select { max-width: 100%; } .contact-form input:focus, .contact-form textarea:focus, .checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus, .search-box input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(0, 207, 255, 0.1); } .icon-button { cursor: pointer; } @media (min-width: 1025px) { .icon-button { display: none; } .app-header { grid-template-columns: auto 1fr auto auto; } } :root[data-theme="light"] .icon-button, :root[data-theme="light"] .cart-link { color: var(--text); } :root[data-theme="light"] .icon-button span { background: var(--text); } :root[data-theme="light"] .product-card__buy { color: var(--text); border-color: rgba(0, 120, 200, 0.2); } :root[data-theme="light"] .button--dark { color: var(--text); background: rgba(0, 60, 120, 0.06); } :root[data-theme="light"] .button--dark { border-color: #c9d1dd; } @media (max-width: 1024px) { .app-header { position: sticky; overflow: visible; } .app-header.is-menu-open .desktop-nav { position: absolute; top: calc(100% + 8px); right: 12px; left: 12px; z-index: 90; display: grid; gap: 6px; border: 1px solid rgba(0, 207, 255, 0.18); border-radius: 12px; padding: 10px; background: rgba(4, 10, 22, 0.98); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 207, 255, 0.06); backdrop-filter: blur(16px); } .app-header.is-menu-open .desktop-nav a { display: block; border-radius: 8px; padding: 14px 12px; color: var(--white); background: rgba(0, 207, 255, 0.05); } :root[data-theme="light"] .app-header.is-menu-open .desktop-nav { background: rgba(255, 255, 255, 0.98); } :root[data-theme="light"] .app-header.is-menu-open .desktop-nav a { color: var(--text); background: #eef1f5; } .product-detail__panel { grid-template-columns: 1fr; } .product-detail__buybox { border-left: 0; border-top: 1px solid rgba(0, 229, 255, 0.08); } /* Showcase cascade fix for tablet */ .showcase-grid { grid-template-columns: repeat(2, 1fr); } .showcase-card--featured { grid-column: 1 / -1; grid-template-columns: 1fr; } .showcase-card--featured .showcase-card__info { padding: 20px 22px 24px; border-left: 0; } } @media (max-width: 640px) { body { padding-bottom: 64px; } .app-header { grid-template-columns: auto 1fr auto; gap: 10px; min-height: 56px; padding: 0 14px; overflow: visible; } .logo { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; } .cart-link { justify-self: end; } .hero { width: 100%; min-height: auto; overflow: hidden; } .hero__image { background-position: 58% center; } .hero__body { padding: 72px 0 32px; } .hero__copy h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.08; } .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; } .hero-actions .button, .detail-actions .button { width: 100%; justify-content: center; padding: 0 14px; text-align: center; white-space: normal; } .section-head, .catalog__title, .section-head--compact { align-items: stretch; flex-direction: column; } .search-box { grid-template-columns: 1fr; } .product-card__bottom { align-items: start; flex-direction: column; } .product-card__price { font-size: 23px; overflow-wrap: anywhere; } .checkout { align-items: stretch; padding: 12px; } .checkout__panel, .product-detail__panel { width: 100%; max-width: 100%; max-height: calc(100vh - 24px); } .checkout-steps { grid-template-columns: 1fr; } .product-detail { align-items: stretch; padding: 12px; } .product-detail__media { min-height: 260px; } .product-detail__media .product-image { max-height: 260px; } /* Showcase cascade fix — base styles defined after first media query block */ .showcase { padding: 48px 0; } .showcase-grid { grid-template-columns: 1fr; } .showcase-card--featured { grid-template-columns: 1fr; } .showcase-card--featured .showcase-card__info { padding: 18px 18px 22px; border-left: 0; } .showcase-stats { flex-direction: column; gap: 18px; padding: 22px 20px; } .showcase-stat__divider { width: 60px; height: 1px; } .showcase-card__play { width: 52px; height: 52px; } } /* === Scroll Reveal === */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .reveal { opacity: 0; transform: translateY(28px); } .reveal.is-visible { animation: fadeInUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .reveal--left { transform: translateX(-32px); } .reveal--left.is-visible { animation-name: fadeInLeft; } .reveal--right { transform: translateX(32px); } .reveal--right.is-visible { animation-name: fadeInRight; } .reveal--scale { transform: scale(0.92); } .reveal--scale.is-visible { animation-name: fadeInScale; } .reveal.is-visible:nth-child(2) { animation-delay: 0.1s; } .reveal.is-visible:nth-child(3) { animation-delay: 0.2s; } .reveal.is-visible:nth-child(4) { animation-delay: 0.3s; } .reveal.is-visible:nth-child(5) { animation-delay: 0.4s; } .reveal.is-visible:nth-child(6) { animation-delay: 0.5s; } /* === Hero entrance animation === */ @keyframes heroSlideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes heroPulseGlow { 0%, 100% { box-shadow: 0 0 25px rgba(0, 229, 255, 0.4), 0 0 60px rgba(47, 111, 232, 0.15), inset 0 1px 0 rgba(255,255,255,0.18); } 50% { box-shadow: 0 0 50px rgba(0, 229, 255, 0.65), 0 0 100px rgba(47, 111, 232, 0.3), 0 0 140px rgba(0, 229, 255, 0.1), inset 0 1px 0 rgba(255,255,255,0.18); } } .hero__copy .kicker { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; } .hero__copy h1 { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } .hero__accent-line { animation: heroSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; } .hero__sub { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; } .hero-actions { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; } .hero__trust { animation: heroFadeIn 0.8s ease 0.8s both; } .hero__visual { animation: heroFadeIn 1.2s ease 0.3s both; } /* === CTA pulse glow === */ .hero .button--light { animation: heroPulseGlow 3s ease-in-out 1.5s infinite; } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 22px rgba(0, 190, 110, 0.3), inset 0 1px 0 rgba(255,255,255,0.14); } 50% { box-shadow: 0 0 44px rgba(0, 200, 110, 0.5), 0 0 70px rgba(0, 160, 90, 0.2), inset 0 1px 0 rgba(255,255,255,0.14); } } .button--light:not(.hero .button--light) { animation: ctaPulse 3s ease-in-out infinite; } /* === 3D tilt card hover === */ .tilt-card { transform-style: preserve-3d; perspective: 800px; } .tilt-card > * { transform: translateZ(0); } /* === Animated counter shimmer === */ @keyframes counterShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .counter-animated { background: linear-gradient(90deg, #00cffd 0%, #7de8fc 25%, #ffffff 50%, #7de8fc 75%, #00cffd 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: counterShimmer 3s linear infinite; } /* === Section heading reveal === */ @keyframes headingReveal { from { opacity: 0; transform: translateY(20px); clip-path: inset(100% 0 0 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } } .section-head.is-visible h2, .catalog__title.is-visible h2 { animation: headingReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .section-head.is-visible .section-label, .catalog__title.is-visible .section-label { animation: heroSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* === Floating glow orb behind hero === */ @keyframes floatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 15px) scale(0.95); } } .hero__image::after { content: ''; position: absolute; top: 20%; left: 15%; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 120, 255, 0.15), transparent 70%); animation: floatOrb 8s ease-in-out infinite; pointer-events: none; } /* === Hero feature strip entrance === */ .hero-feature { opacity: 0; animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-feature:nth-child(1) { animation-delay: 0.9s; } .hero-feature:nth-child(2) { animation-delay: 1.05s; } .hero-feature:nth-child(3) { animation-delay: 1.2s; } .hero-feature:nth-child(4) { animation-delay: 1.35s; } /* === Smooth gradient line between sections === */ .showcase::before, .solutions::before, .catalog::before { content: ''; display: block; width: 60%; height: 1px; margin: 0 auto 0; background: linear-gradient(90deg, transparent, rgba(0, 180, 255, 0.4), transparent); position: relative; top: -1px; } /* === Light mode: branded text trên nền sáng === */ :root[data-theme="light"] .kicker, :root[data-theme="light"] .section-label { color: var(--red-2); text-shadow: none; } :root[data-theme="light"] .contact .section-label { color: var(--red); text-shadow: 0 0 14px rgba(0, 207, 255, 0.3); } :root[data-theme="light"] .metric-grid strong { background: linear-gradient(135deg, var(--red-2) 0%, #0055cc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="light"] .logo { text-shadow: none; } :root[data-theme="light"] .hero__copy h1 { -webkit-text-fill-color: #0a0f1a; color: #0a0f1a; } :root[data-theme="light"] .hero__h1-accent { -webkit-text-fill-color: var(--red-2); color: var(--red-2); } /* ══════════════════════════════════════ LIGHT MODE — full overrides ══════════════════════════════════════ */ /* ── Hero section ── */ :root[data-theme="light"] .hero__image { background: radial-gradient(ellipse 55% 70% at 28% 55%, rgba(0, 50, 160, 0.08), transparent 70%), radial-gradient(ellipse 40% 50% at 75% 35%, rgba(0, 30, 120, 0.06), transparent 60%), linear-gradient(170deg, #dce6f2 0%, #e8f0fa 40%, #edf2f8 100%); opacity: 1; } :root[data-theme="light"] .hero__sub { color: rgba(30, 50, 80, 0.75) !important; } :root[data-theme="light"] .hero__trust { color: rgba(40, 60, 90, 0.7); text-shadow: none; } :root[data-theme="light"] .hero__copy::before { display: none; } :root[data-theme="light"] .hero .button--light { background: linear-gradient(135deg, #0077ee 0%, #0055cc 100%); border-color: rgba(0, 80, 180, 0.2); box-shadow: 0 2px 12px rgba(0, 80, 180, 0.2); } :root[data-theme="light"] .hero .button--dark { border-color: rgba(0, 80, 180, 0.2); box-shadow: none; } :root[data-theme="light"] .hero__visual { filter: none; } /* ── Hero feature strip ── */ :root[data-theme="light"] .hero__features { background: rgba(255, 255, 255, 0.85); border-top: 1px solid rgba(0, 60, 140, 0.1); backdrop-filter: blur(10px); } :root[data-theme="light"] .hero-feature { border-right-color: rgba(0, 60, 140, 0.1); } :root[data-theme="light"] .hero-feature__icon { border-color: rgba(0, 80, 180, 0.18); background: linear-gradient(145deg, rgba(0, 80, 180, 0.08), rgba(0, 50, 140, 0.04)); box-shadow: 0 2px 8px rgba(0, 60, 140, 0.08); } :root[data-theme="light"] .hero-feature strong { color: #1a2a40; } :root[data-theme="light"] .hero-feature span { color: #4a6080; } /* ── Contact section ── */ :root[data-theme="light"] .contact { background: radial-gradient(ellipse 75% 60% at 50% 120%, rgba(0, 70, 200, 0.06), transparent), radial-gradient(ellipse 45% 45% at 95% 4%, rgba(0, 100, 200, 0.04), transparent), linear-gradient(170deg, #e4ecf6 0%, #edf2f9 50%, #e8f0f8 100%); border-top-color: rgba(0, 80, 160, 0.1); } :root[data-theme="light"] .contact::after { background: linear-gradient(to bottom, transparent, rgba(230, 238, 248, 0.6)); } :root[data-theme="light"] .contact .section-label { color: #0055cc; text-shadow: none; } :root[data-theme="light"] .contact h2 { color: #0d1a2e; text-shadow: none; } :root[data-theme="light"] .contact__sub { color: #4a5e78; } /* Contact feature cards */ :root[data-theme="light"] .contact-feature { border-color: rgba(0, 80, 160, 0.12); background: rgba(255, 255, 255, 0.7); } :root[data-theme="light"] .contact-feature__icon { border-color: rgba(0, 80, 180, 0.15); color: #0055cc; background: rgba(0, 80, 180, 0.07); box-shadow: 0 2px 6px rgba(0, 60, 140, 0.08); } :root[data-theme="light"] .contact-feature strong { color: #1a2a40; } :root[data-theme="light"] .contact-feature span { color: #4a6080; } /* Contact list items */ :root[data-theme="light"] .contact-li__icon { border-color: rgba(0, 80, 180, 0.15); background: rgba(0, 80, 180, 0.06); color: #0055cc; } :root[data-theme="light"] .contact li strong { color: #0055cc; } :root[data-theme="light"] .contact li span { color: #4a6080; } /* Contact form */ :root[data-theme="light"] .contact-form { background: #ffffff; border-color: rgba(0, 80, 160, 0.14); border-top-color: rgba(0, 80, 180, 0.25); box-shadow: 0 8px 40px rgba(0, 40, 100, 0.1), 0 1px 0 rgba(0, 80, 180, 0.08) inset; } :root[data-theme="light"] .contact-form::before { background: linear-gradient(90deg, transparent, rgba(0, 100, 220, 0.4) 30%, rgba(0, 80, 200, 0.5) 50%, rgba(0, 100, 220, 0.4) 70%, transparent); } :root[data-theme="light"] .contact-form label span { color: #3d5068; } :root[data-theme="light"] .contact-form__field-icon { color: rgba(60, 90, 130, 0.6); } :root[data-theme="light"] .contact-form input, :root[data-theme="light"] .contact-form textarea { border-color: rgba(0, 80, 160, 0.16); background: #f5f8fc; color: #1a2a40; } :root[data-theme="light"] .contact-form ::placeholder { color: rgba(80, 100, 130, 0.55); } :root[data-theme="light"] .contact-form input:focus, :root[data-theme="light"] .contact-form textarea:focus { border-color: rgba(0, 100, 220, 0.45); box-shadow: 0 0 0 3px rgba(0, 100, 220, 0.08); } :root[data-theme="light"] .contact-form button { background: linear-gradient(135deg, #0077ee 0%, #0055cc 55%, #003fa3 100%); box-shadow: 0 4px 16px rgba(0, 80, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* ── Footer ── */ :root[data-theme="light"] .footer { background: radial-gradient(ellipse 80% 50% at 50% 110%, rgba(0, 60, 160, 0.04), transparent), linear-gradient(180deg, #e2ebf5 0%, #dae4f0 50%, #d4dfe9 100%); color: #4a6080; } :root[data-theme="light"] .footer::before { background: linear-gradient(90deg, transparent 0%, rgba(0, 80, 160, 0.08) 15%, rgba(0, 100, 200, 0.2) 50%, rgba(0, 80, 160, 0.08) 85%, transparent 100%); box-shadow: none; } :root[data-theme="light"] .footer__brand strong { color: #1a2a40; text-shadow: none; } :root[data-theme="light"] .footer__brand p { color: #4a6080; } :root[data-theme="light"] .footer__nav-label { color: #0055cc; } :root[data-theme="light"] .footer nav a { color: #3d5068; } :root[data-theme="light"] .footer nav a:hover { color: #0055cc; } :root[data-theme="light"] .footer__social-icon { color: #4a6080; border-color: rgba(0, 60, 140, 0.12); background: rgba(0, 60, 140, 0.04); } :root[data-theme="light"] .footer__social-icon:hover { color: #0055cc; border-color: rgba(0, 80, 180, 0.25); background: rgba(0, 80, 180, 0.08); } :root[data-theme="light"] .footer__bottom { border-top-color: rgba(0, 60, 140, 0.1); color: #6b7a8d; } :root[data-theme="light"] .footer__tagline { color: #4a6080; } /* ── Misc light overrides ── */ :root[data-theme="light"] .hero p:not(.kicker):not(.section-label), :root[data-theme="light"] .intro p:not(.section-label) { color: #394353; } :root[data-theme="light"] .products-trust-strip { color: #4a6080; border-color: rgba(0, 60, 140, 0.1); } :root[data-theme="light"] .product-card__germany { color: #4a6080; } :root[data-theme="light"] .tab { color: #4a6080; border-color: rgba(0, 60, 140, 0.12); } :root[data-theme="light"] .tab.is-active { color: #0055cc; border-color: #0055cc; background: rgba(0, 80, 180, 0.06); } :root[data-theme="light"] .search-box input { background: #ffffff; border-color: rgba(0, 60, 140, 0.14); color: #1a2a40; } :root[data-theme="light"] .search-box__filter-btn { background: #ffffff; border-color: rgba(0, 60, 140, 0.14); color: #3d5068; } /* ═══════════════════════════════════════════ RESPONSIVE — Tablet portrait (768–1024px) ═══════════════════════════════════════════ */ @media (min-width: 641px) and (max-width: 1024px) { .container { width: min(92%, 960px); } .bottom-nav { display: none; } body { padding-bottom: 0; } .hero { min-height: 85vh; } .hero__visual { width: 55%; height: 70%; top: 5%; } .hero__copy h1 { font-size: clamp(48px, 6vw, 64px); } .hero__sub { max-width: 400px; } .hero-feature-grid { grid-template-columns: repeat(2, 1fr); } .hero-feature { padding: 18px 16px; border-bottom: 1px solid rgba(0, 180, 255, 0.1); border-right: none; } .hero-feature:nth-child(odd) { border-right: 1px solid rgba(0, 180, 255, 0.1); } .hero-feature:nth-last-child(-n+2) { border-bottom: none; } .contact-features { grid-template-columns: repeat(3, 1fr); } .intro__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .contact__grid { grid-template-columns: 1fr 1fr; gap: 40px; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .showcase-grid { grid-template-columns: repeat(2, 1fr); } .showcase-card--featured { grid-column: 1 / -1; grid-template-columns: 1.4fr 1fr; } .showcase-card--featured .showcase-card__info { border-left: 1px solid rgba(0, 180, 255, 0.1); padding: 24px; } .solution-grid { grid-template-columns: repeat(2, 1fr); } .product-grid { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: auto; } .showcase-stats { flex-direction: row; } .showcase-stat__divider { width: 1px; height: 48px; } } /* ═══════════════════════════════════════════ RESPONSIVE — Small phones (≤375px) ═══════════════════════════════════════════ */ @media (max-width: 375px) { .container { width: calc(100% - 20px); } h1 { font-size: 30px; } h2 { font-size: 26px; } .hero__copy h1 { font-size: 32px !important; } .hero-feature { padding: 12px 10px; gap: 8px; } .hero-feature__icon { width: 36px; height: 36px; } .hero-feature strong { font-size: 12px; } .hero-feature span { font-size: 10px; } .hero-actions { flex-direction: column; } .hero-actions .button { width: 100%; justify-content: center; } .kicker, .section-label { font-size: 11px; } .app-header { padding: 0 10px; gap: 12px; } .logo { font-size: 14px; } .showcase-card__info h3 { font-size: 16px; } .product-card h3 { font-size: 18px; } .contact-form button { font-size: 11px; min-height: 48px; } } /* ═══════════════════════════════════════════ RESPONSIVE — Large desktop (≥1440px) ═══════════════════════════════════════════ */ @media (min-width: 1440px) { .container { width: min(1320px, calc(100% - 60px)); } .hero__copy { max-width: 620px; } .hero__copy h1 { font-size: 78px !important; } .hero__sub { font-size: 16px !important; max-width: 540px; } .showcase-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } .showcase-card--featured { grid-template-columns: 1.6fr 1fr; } .product-grid { grid-template-columns: repeat(3, 1fr); } .intro__grid { gap: 80px; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .solution-grid { grid-template-columns: repeat(4, 1fr); } .contact__grid { gap: 80px; } .footer__grid { grid-template-columns: 2fr 1fr 1fr; } } /* ═══════════════════════════════════════════ RESPONSIVE — Ultra-wide (≥1920px) ═══════════════════════════════════════════ */ @media (min-width: 1920px) { .container { width: min(1520px, calc(100% - 80px)); } .hero__copy h1 { font-size: 88px !important; } .hero-feature-grid { gap: 0; } .hero-feature { padding: 28px 32px; } } /* ═══════════════════════════════════════════ PREMIUM VISUAL UPGRADE ═══════════════════════════════════════════ */ /* ── Particle canvas ── */ .hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; } /* ── Scroll indicator ── */ .hero__scroll-hint { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: heroFadeIn 1s ease 2s both; } .hero__scroll-mouse { width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 12px; position: relative; } .hero__scroll-wheel { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: rgba(0, 200, 255, 0.8); border-radius: 3px; animation: scrollWheel 1.8s ease-in-out infinite; } @keyframes scrollWheel { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(14px); } } .hero__scroll-hint span { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); font-weight: 600; } /* ── Enhanced header glassmorphism ── */ .app-header { background: rgba(2, 8, 20, 0.75); backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid rgba(0, 180, 255, 0.12); box-shadow: 0 1px 0 rgba(0, 180, 255, 0.08), 0 4px 28px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 140, 255, 0.06); } /* ── Hero heading gradient text — IMPRESSIVE UPGRADE ── */ .hero__copy h1 { font-family: "Sora", "Inter", sans-serif; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; -webkit-text-fill-color: transparent !important; background: linear-gradient( 135deg, #ffffff 0%, #e0f0ff 25%, #00e5ff 50%, #2f6fe8 75%, #ffffff 100% ) !important; background-size: 300% auto; -webkit-background-clip: text !important; background-clip: text !important; animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both, heroTitleShimmer 6s ease-in-out 2s infinite; filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.25)) drop-shadow(0 0 80px rgba(47, 111, 232, 0.12)); } @keyframes heroTitleShimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 300% center; } } .hero__h1-accent { background: linear-gradient( 135deg, #5aa9ff 0%, #2f6fe8 45%, #1746c4 75%, #0b2f9c 100% ) !important; background-size: 300% auto; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both, shimmerAccent 4s linear 2s infinite; filter: drop-shadow(0 0 50px rgba(47, 111, 232, 0.5)) drop-shadow(0 0 100px rgba(23, 70, 196, 0.3)); } @keyframes shimmerAccent { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } /* ── Hero neon breathing glow behind title ── */ .hero__copy::before { content: ''; position: absolute; top: -60px; left: -80px; width: 500px; height: 300px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 229, 255, 0.12) 0%, rgba(47, 111, 232, 0.06) 50%, transparent 70%); filter: blur(60px); animation: breatheNeonHero 4s ease-in-out infinite; pointer-events: none; z-index: -1; } @keyframes breatheNeonHero { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } /* ── Enhanced floating glow orbs ── */ .hero__image::after { width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 229, 255, 0.18) 0%, rgba(47, 111, 232, 0.08) 40%, transparent 70%); filter: blur(50px); } .hero__image::before { content: ''; position: absolute; bottom: 10%; right: 20%; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 111, 232, 0.15) 0%, rgba(0, 229, 255, 0.06) 40%, transparent 70%); animation: floatOrb 10s ease-in-out 2s infinite reverse; filter: blur(40px); pointer-events: none; z-index: 0; } /* ── Hero title soft glow (modern, no 3D extrude) ── */ .hero__copy h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35), 0 0 60px rgba(0, 229, 255, 0.12), 0 0 120px rgba(47, 111, 232, 0.06) !important; } /* ── Typewriter ── */ .hero__typewriter { min-height: 1.7em; border-right: none; } /* Red dot at the end */ .hero__typewriter-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #DD0000; margin-left: 4px; vertical-align: middle; animation: dotBlink 1.2s ease-in-out infinite; box-shadow: 0 0 8px rgba(221, 0, 0, 0.5); } @keyframes dotBlink { 0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(221, 0, 0, 0.5); } 50% { opacity: 0.2; box-shadow: 0 0 2px rgba(221, 0, 0, 0.2); } } /* ── Theater perspective overlay on hero background ── */ .hero__image { background: /* Spotlight from above — theater feel */ radial-gradient(ellipse 50% 60% at 50% 0%, rgba(0, 229, 255, 0.08), transparent 60%), radial-gradient(ellipse 30% 40% at 30% 30%, rgba(47, 111, 232, 0.12), transparent 50%), radial-gradient(ellipse 35% 45% at 75% 25%, rgba(0, 100, 255, 0.15), transparent 50%), /* Depth gradient — dark bottom, lighter top */ radial-gradient(ellipse 60% 30% at 50% 100%, rgba(0, 0, 0, 0.6), transparent 60%), /* Base gradient */ linear-gradient(170deg, #010818 0%, #041830 30%, #020e24 60%, #010a16 100%); } /* ── Glassmorphism cards ── */ .metric-card, .showcase-card, .solution-card, .contact-feature, .news-grid article { background: rgba(5, 18, 35, 0.6) !important; backdrop-filter: blur(12px); border: 1px solid rgba(0, 229, 255, 0.1); border-radius: 12px; overflow: hidden; transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; } .metric-card:hover, .showcase-card:hover, .solution-card:hover, .contact-feature:hover, .news-grid article:hover { border-color: rgba(0, 229, 255, 0.35); box-shadow: 0 0 24px rgba(0, 229, 255, 0.15), 0 0 48px rgba(47, 111, 232, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(0, 229, 255, 0.1); transform: translateY(-4px); } /* ── Card glow border on hover (animated) ── */ .product-card { position: relative; transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; } .product-card:hover { border-color: rgba(0, 180, 255, 0.25); box-shadow: 0 0 24px rgba(0, 140, 255, 0.1), 0 12px 40px rgba(0, 0, 0, 0.3); } /* ── Showcase featured card glow ── */ .showcase-card--featured { border-color: rgba(0, 180, 255, 0.15); box-shadow: 0 0 40px rgba(0, 120, 255, 0.08); } .showcase-card--featured:hover { border-color: rgba(0, 200, 255, 0.35); box-shadow: 0 0 60px rgba(0, 140, 255, 0.18), 0 12px 48px rgba(0, 0, 0, 0.3); } /* ── Enhanced stats strip glow ── */ .showcase-stats { background: rgba(5, 18, 35, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(0, 160, 255, 0.12); } .showcase-stat strong { text-shadow: 0 0 30px rgba(0, 200, 255, 0.4); } /* ── Button ripple effect ── */ .button, .contact-form button { position: relative; overflow: hidden; } .button .ripple, .contact-form button .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: rippleEffect 0.6s ease-out; pointer-events: none; } @keyframes rippleEffect { to { transform: scale(4); opacity: 0; } } /* ── Cursor glow (desktop only) ── */ .cursor-glow { position: fixed; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 140, 255, 0.06) 0%, transparent 70%); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: opacity 0.3s ease; mix-blend-mode: screen; } /* ── Enhanced section transitions ── */ .showcase::before, .intro::before, .solutions::before, .catalog::before, .contact::before { content: ''; display: block; width: 80%; max-width: 700px; height: 1px; margin: 0 auto; background: linear-gradient( 90deg, transparent 0%, rgba(47, 111, 232, 0.3) 15%, rgba(0, 229, 255, 0.7) 40%, rgba(23, 70, 196, 0.5) 60%, rgba(0, 229, 255, 0.7) 75%, rgba(47, 111, 232, 0.3) 90%, transparent 100% ); box-shadow: 0 0 16px rgba(0, 229, 255, 0.2), 0 0 40px rgba(47, 111, 232, 0.08); position: relative; top: -1px; } /* ── Hero feature strip enhanced (merged up) ── */ .hero-feature__icon { background: linear-gradient(145deg, rgba(0, 100, 220, 0.2), rgba(0, 60, 160, 0.08)); border: 1px solid rgba(0, 160, 255, 0.25); box-shadow: 0 0 20px rgba(0, 120, 255, 0.15); transition: box-shadow 0.3s ease, border-color 0.3s ease; } .hero-feature:hover .hero-feature__icon { border-color: rgba(0, 200, 255, 0.5); box-shadow: 0 0 30px rgba(0, 160, 255, 0.3); } /* ── Contact form enhanced glow ── */ .contact-form { border: 1px solid rgba(0, 160, 255, 0.12); background: rgba(5, 18, 35, 0.7) !important; backdrop-filter: blur(12px); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .contact-form:focus-within { border-color: rgba(0, 180, 255, 0.3); box-shadow: 0 0 40px rgba(0, 140, 255, 0.1); } /* ── Input field focus glow ── */ .contact-form__field-wrap { transition: border-color 0.3s ease, box-shadow 0.3s ease; } .contact-form__field-wrap:focus-within { border-color: rgba(0, 180, 255, 0.4) !important; box-shadow: 0 0 16px rgba(0, 140, 255, 0.12); } /* ── Depth vignette (merged into grain overlay) ── */ /* ── Depth overlays: vignette + ambient glow (non-fixed for perf) ── */ .page-depth, .page-grain { display: none; } /* ── Scroll-hint hide on scroll ── */ .hero__scroll-hint.is-hidden { opacity: 0; transition: opacity 0.4s ease; } @media (max-width: 1024px) { .hero__scroll-hint { display: none; } } @media (max-width: 640px) { .cursor-glow { display: none; } } /* ── Light mode overrides for premium effects ── */ :root[data-theme="light"] .hero__particles { opacity: 0.3; } :root[data-theme="light"] .cursor-glow { display: none; } :root[data-theme="light"] .hero__copy h1 { background: linear-gradient(180deg, #0a0f1a 20%, #1a2a40 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none; } :root[data-theme="light"] .hero__h1-accent { background: linear-gradient(135deg, #0066ff 0%, #0044cc 50%, #0066ff 100%) !important; background-size: 200% auto; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none; } :root[data-theme="light"] .metric-card, :root[data-theme="light"] .showcase-card, :root[data-theme="light"] .solution-card, :root[data-theme="light"] .contact-feature, :root[data-theme="light"] .news-grid article { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(12px); border-color: rgba(0, 80, 180, 0.1); } :root[data-theme="light"] .hero__scroll-mouse { border-color: rgba(0, 40, 80, 0.25); } :root[data-theme="light"] .hero__scroll-wheel { background: rgba(0, 100, 200, 0.6); } :root[data-theme="light"] .hero__scroll-hint span { color: rgba(0, 40, 80, 0.35); } /* ═══════════════════════════════════════════ WOW REDESIGN — Karaoke Room Vibe Cyan + Purple Neon, Depth, Animations ═══════════════════════════════════════════ */ /* ── Animated ambient background ── */ @keyframes ambientShift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; } 25% { background-position: 100% 0%, 0% 50%, 30% 70%; } 50% { background-position: 100% 100%, 50% 0%, 80% 20%; } 75% { background-position: 0% 100%, 100% 50%, 20% 80%; } 100% { background-position: 0% 0%, 100% 100%, 50% 50%; } } body { background: radial-gradient(ellipse 50% 40% at 20% 30%, rgba(47, 111, 232, 0.08), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 70%, rgba(0, 200, 255, 0.08), transparent 60%), radial-gradient(ellipse 40% 30% at 50% 50%, rgba(23, 70, 196, 0.05), transparent 50%), radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 40, 120, 0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 0% 50%, rgba(80, 0, 160, 0.08), transparent 50%), radial-gradient(ellipse 60% 40% at 100% 60%, rgba(0, 50, 140, 0.1), transparent 50%), linear-gradient(180deg, #010810 0%, #020c1a 15%, #03112a 40%, #020e22 65%, #010a16 85%, #000610 100%); background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; animation: ambientShift 20s ease-in-out infinite; background-attachment: fixed; } /* ── Hero background depth with purple accents ── */ /* ── Hero accent "Vietnam" with cyan-purple gradient ── */ .hero__h1-accent { background: linear-gradient(135deg, #5aa9ff 0%, #2f6fe8 45%, #1746c4 75%, #0b2f9c 100%) !important; background-size: 300% auto; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both, shimmerAccent 5s linear 2s infinite; filter: drop-shadow(0 0 50px rgba(47, 111, 232, 0.5)) drop-shadow(0 0 80px rgba(23, 70, 196, 0.35)); } /* ── Title letter reveal animation ── */ @keyframes letterReveal { 0% { opacity: 0; transform: translateY(0.55em); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes glowPulseIn { 0% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 60px rgba(0, 200, 255, 0.6), 0 0 120px rgba(47, 111, 232, 0.3); } 100% { text-shadow: 0 0 30px rgba(0, 200, 255, 0.2), 0 0 60px rgba(47, 111, 232, 0.1); } } .hero__copy h1 .letter { display: inline-block; opacity: 0; animation: letterReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: transform, filter, opacity; -webkit-text-fill-color: #ffffff; background: none !important; } .hero__copy h1 .hero__h1-accent .letter { -webkit-text-fill-color: transparent; background: linear-gradient(135deg, #5aa9ff 0%, #2f6fe8 45%, #1746c4 75%, #0b2f9c 100%) !important; background-size: 300% auto !important; -webkit-background-clip: text !important; background-clip: text !important; } .hero__copy h1 .letter-space { display: inline-block; width: 0.25em; } .hero__copy h1 { animation: none !important; perspective: 800px; } .hero__copy h1.letters-done { animation: glowPulseIn 1.5s ease 0.3s both !important; } /* ── Breathing neon glow on borders ── */ @keyframes breatheNeon { 0%, 100% { border-color: rgba(0, 200, 255, 0.12); box-shadow: 0 0 0 rgba(0, 200, 255, 0); } 50% { border-color: rgba(0, 200, 255, 0.3); box-shadow: 0 0 20px rgba(0, 200, 255, 0.08), 0 0 40px rgba(47, 111, 232, 0.04); } } @keyframes breathePurple { 0%, 100% { border-color: rgba(47, 111, 232, 0.1); box-shadow: 0 0 0 rgba(47, 111, 232, 0); } 50% { border-color: rgba(47, 111, 232, 0.3); box-shadow: 0 0 20px rgba(47, 111, 232, 0.1); } } .showcase-card, .product-card, .solution-card { animation: breatheNeon 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.5s); } .metric-card { animation: breathePurple 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.7s); } /* ── Sound wave rings from hero speaker ── */ @keyframes soundWave { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } .hero__sound-wave { position: absolute; top: 45%; left: 40%; width: 300px; height: 300px; border-radius: 50%; border: 2px solid rgba(0, 229, 255, 0.35); box-shadow: 0 0 30px rgba(0, 229, 255, 0.1), inset 0 0 30px rgba(0, 229, 255, 0.05); pointer-events: none; z-index: 0; animation: soundWave 3.5s ease-out infinite; } .hero__sound-wave:nth-child(2) { animation-delay: 0.7s; border-color: rgba(47, 111, 232, 0.3); box-shadow: 0 0 30px rgba(47, 111, 232, 0.1), inset 0 0 30px rgba(47, 111, 232, 0.05); } .hero__sound-wave:nth-child(3) { animation-delay: 1.4s; border-color: rgba(23, 70, 196, 0.25); box-shadow: 0 0 25px rgba(23, 70, 196, 0.08), inset 0 0 25px rgba(23, 70, 196, 0.04); } .hero__sound-wave:nth-child(4) { animation-delay: 2.1s; border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 0 20px rgba(0, 229, 255, 0.06), inset 0 0 20px rgba(0, 229, 255, 0.03); } .hero__sound-wave--extra:nth-child(5) { animation-delay: 2.8s; border-color: rgba(47, 111, 232, 0.18); box-shadow: 0 0 15px rgba(47, 111, 232, 0.06); } .hero__sound-wave--extra:nth-child(6) { animation-delay: 3.5s; border-color: rgba(23, 70, 196, 0.12); box-shadow: 0 0 12px rgba(23, 70, 196, 0.04); } /* ── Enhanced floating orbs with purple ── */ .hero__image::after { background: radial-gradient(circle, rgba(47, 111, 232, 0.2) 0%, rgba(0, 80, 200, 0.08) 40%, transparent 70%) !important; filter: blur(50px); } .hero__image::before { background: radial-gradient(circle, rgba(0, 220, 255, 0.15) 0%, rgba(47, 111, 232, 0.08) 40%, transparent 70%) !important; filter: blur(40px); } /* ── Section gradient dividers with purple ── */ .showcase::before, .intro::before, .solutions::before, .catalog::before, .contact::before { background: linear-gradient( 90deg, transparent, rgba(47, 111, 232, 0.3) 20%, rgba(0, 200, 255, 0.6) 50%, rgba(47, 111, 232, 0.3) 80%, transparent ) !important; box-shadow: 0 0 30px rgba(0, 200, 255, 0.2), 0 0 60px rgba(47, 111, 232, 0.1) !important; height: 2px !important; } /* ── Showcase section background with purple depth ── */ .showcase { background: radial-gradient(ellipse 45% 50% at 15% 30%, rgba(47, 111, 232, 0.18), transparent), radial-gradient(ellipse 40% 45% at 85% 70%, rgba(0, 120, 255, 0.22), transparent), radial-gradient(ellipse 30% 25% at 60% 90%, rgba(23, 70, 196, 0.1), transparent), radial-gradient(ellipse 80% 10% at 50% 0%, rgba(80, 0, 160, 0.15), transparent), linear-gradient(180deg, #010a18 0%, #0a0520 30%, #071e38 50%, #0a0520 70%, #010a18 100%) !important; } /* ── Intro section with purple accent ── */ .intro { background: radial-gradient(ellipse 45% 45% at 88% 35%, rgba(47, 111, 232, 0.2), transparent), radial-gradient(ellipse 35% 40% at 3% 65%, rgba(0, 80, 220, 0.22), transparent), radial-gradient(ellipse 50% 25% at 45% 0%, rgba(23, 70, 196, 0.08), transparent), radial-gradient(ellipse 80% 15% at 50% 100%, rgba(80, 0, 160, 0.1), transparent), var(--panel) !important; } /* ── Solutions section with purple ── */ .solutions { background: radial-gradient(ellipse 40% 50% at 8% 35%, rgba(0, 80, 220, 0.28), transparent), radial-gradient(ellipse 35% 35% at 88% 20%, rgba(47, 111, 232, 0.2), transparent), radial-gradient(ellipse 45% 40% at 55% 85%, rgba(0, 100, 255, 0.14), transparent), radial-gradient(ellipse 30% 20% at 70% 10%, rgba(23, 70, 196, 0.1), transparent), linear-gradient(180deg, #071828, #0a0520, var(--bg)) !important; } /* ── Contact section with purple ── */ .contact { background: radial-gradient(ellipse 50% 45% at 50% 105%, rgba(47, 111, 232, 0.2), transparent), radial-gradient(ellipse 35% 35% at 92% 8%, rgba(0, 140, 255, 0.22), transparent), radial-gradient(ellipse 30% 30% at 12% 20%, rgba(23, 70, 196, 0.12), transparent), radial-gradient(ellipse 40% 30% at 5% 70%, rgba(80, 0, 160, 0.1), transparent), linear-gradient(170deg, #030f24 0%, #0a0520 50%, #040e1e 80%, #020c1a 100%) !important; } /* ── Footer with purple accent ── */ .footer { background: radial-gradient(ellipse 50% 40% at 50% 95%, rgba(47, 111, 232, 0.15), transparent), radial-gradient(ellipse 40% 30% at 8% 15%, rgba(0, 120, 255, 0.18), transparent), radial-gradient(ellipse 30% 25% at 88% 40%, rgba(23, 70, 196, 0.1), transparent), linear-gradient(180deg, #030e20 0%, #0a0520 50%, #010508 100%) !important; } .footer::before { background: linear-gradient( 90deg, transparent 0%, rgba(47, 111, 232, 0.15) 15%, rgba(0, 212, 255, 0.68) 38%, rgba(47, 111, 232, 0.5) 50%, rgba(0, 212, 255, 0.68) 62%, rgba(47, 111, 232, 0.15) 85%, transparent 100% ) !important; box-shadow: 0 0 24px rgba(47, 111, 232, 0.2), 0 2px 40px rgba(0, 100, 255, 0.16) !important; } /* ── CTA button with cyan-purple glow ── */ .hero .button--light { background: linear-gradient(135deg, #00b8ff 0%, #7c3aed 50%, #2f6fe8 100%) !important; box-shadow: 0 0 30px rgba(47, 111, 232, 0.4), 0 0 60px rgba(0, 200, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; animation: ctaPulseDual 3s ease-in-out 1.5s infinite !important; } @keyframes ctaPulseDual { 0%, 100% { box-shadow: 0 0 30px rgba(47, 111, 232, 0.3), 0 0 60px rgba(0, 200, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.2); } 50% { box-shadow: 0 0 50px rgba(47, 111, 232, 0.5), 0 0 100px rgba(0, 200, 255, 0.3), 0 0 150px rgba(23, 70, 196, 0.15), inset 0 1px 0 rgba(255,255,255,0.2); } } /* ── Hero feature icon enhanced glow ── */ .hero-feature__icon { background: linear-gradient(145deg, rgba(47, 111, 232, 0.15), rgba(0, 100, 220, 0.15)) !important; border: 1px solid rgba(47, 111, 232, 0.25) !important; box-shadow: 0 0 20px rgba(47, 111, 232, 0.12) !important; } .hero-feature:hover .hero-feature__icon { border-color: rgba(0, 200, 255, 0.5) !important; box-shadow: 0 0 30px rgba(0, 200, 255, 0.2), 0 0 50px rgba(47, 111, 232, 0.15) !important; } /* ── Stats gradient text with purple ── */ .metric-grid strong, .showcase-stat strong { background: linear-gradient(135deg, #00e5ff 0%, #2f6fe8 50%, #e8f8ff 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.35)); } /* ── Enhanced counter shimmer with purple ── */ .counter-animated { background: linear-gradient(90deg, #00e5ff 0%, #2f6fe8 25%, #ffffff 50%, #2f6fe8 75%, #00e5ff 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── Product card hover glow with purple ── */ .product-card:hover { border-color: rgba(47, 111, 232, 0.35) !important; box-shadow: 0 0 30px rgba(47, 111, 232, 0.12), 0 0 60px rgba(0, 200, 255, 0.08), 0 12px 40px rgba(0, 0, 0, 0.3) !important; } /* ── Showcase card hover with purple ── */ .showcase-card:hover { border-color: rgba(47, 111, 232, 0.35) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(47, 111, 232, 0.12), 0 0 60px rgba(0, 200, 255, 0.06) !important; } /* ── Play button glow ── */ .showcase-card__play { background: rgba(47, 111, 232, 0.3) !important; } .showcase-card__play:hover { background: rgba(47, 111, 232, 0.5) !important; box-shadow: 0 0 50px rgba(47, 111, 232, 0.4), 0 0 80px rgba(0, 200, 255, 0.2) !important; } /* ── Contact form glow line with purple ── */ .contact-form::before { background: linear-gradient( 90deg, transparent, rgba(47, 111, 232, 0.5) 20%, rgba(0, 207, 255, 0.7) 40%, rgba(23, 70, 196, 0.6) 60%, rgba(0, 207, 255, 0.7) 80%, transparent ) !important; height: 2px !important; } /* ── Enhanced cursor glow with purple ── */ .cursor-glow { background: radial-gradient(circle, rgba(47, 111, 232, 0.05) 0%, rgba(0, 140, 255, 0.04) 30%, transparent 70%) !important; width: 400px !important; height: 400px !important; } /* ── Accent line with neon colors ── */ .hero__accent-line { background: linear-gradient(90deg, #00e5ff 0%, #2f6fe8 50%, #1746c4 100%) !important; box-shadow: 0 0 12px rgba(47, 111, 232, 0.4); height: 3px; } /* ── Kicker / section label with purple accent ── */ .kicker, .section-label { text-shadow: 0 0 20px rgba(47, 111, 232, 0.3) !important; } /* ── Scroll reveal: blur → sharp ── */ .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); } .reveal.is-visible { animation: fadeInUpBlur 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes fadeInUpBlur { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeInLeftBlur { from { opacity: 0; transform: translateX(-32px); filter: blur(6px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } } @keyframes fadeInRightBlur { from { opacity: 0; transform: translateX(32px); filter: blur(6px); } to { opacity: 1; transform: translateX(0); filter: blur(0); } } @keyframes fadeInScaleBlur { from { opacity: 0; transform: scale(0.92); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } .reveal--left.is-visible { animation-name: fadeInLeftBlur; } .reveal--right.is-visible { animation-name: fadeInRightBlur; } .reveal--scale.is-visible { animation-name: fadeInScaleBlur; } /* ── Showcase badges with purple ── */ .showcase-card__badge { border-color: rgba(47, 111, 232, 0.35) !important; background: rgba(20, 0, 50, 0.7) !important; text-shadow: 0 0 8px rgba(47, 111, 232, 0.4); } /* ── Product tag badges neon ── */ .product-card__tag--new { background: linear-gradient(135deg, var(--cyan), var(--purple)) !important; color: #fff !important; box-shadow: 0 0 14px rgba(47, 111, 232, 0.4) !important; } .product-card__tag--premium { background: linear-gradient(110deg, #2f6fe8, #1746c4) !important; color: #fff !important; box-shadow: 0 0 14px rgba(23, 70, 196, 0.4) !important; } /* ── Tab active state with neon ── */ .tab.is-active { background: linear-gradient(135deg, var(--cyan), var(--purple)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 0 16px rgba(47, 111, 232, 0.3); } /* ── Header glow line ── */ .app-header { border-bottom: 1px solid rgba(47, 111, 232, 0.1) !important; box-shadow: 0 1px 0 rgba(0, 200, 255, 0.06), 0 1px 0 rgba(47, 111, 232, 0.06), 0 4px 28px rgba(0, 0, 0, 0.5) !important; } /* ── Logo neon glow (handled by logoNeonBreathe keyframes above) ── */ /* ── Contact form button — cyan neon ── */ .contact-form button { background: linear-gradient(135deg, #00c8ff 0%, #0088ff 55%, #0060dd 100%) !important; box-shadow: 0 0 20px rgba(0, 180, 255, 0.25), 0 4px 16px rgba(0, 100, 220, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } .contact-form button:hover { background: linear-gradient(135deg, #00d4ff 0%, #9333ea 55%, #c026d3 100%) !important; box-shadow: 0 0 40px rgba(47, 111, 232, 0.45), 0 8px 24px rgba(0, 140, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* ═══════════════════════════════════════════ LIGHT MODE — Full Neon Override Fix visibility, contrast, branding colors ═══════════════════════════════════════════ */ /* ── Body: kill dark ambient gradients ── */ :root[data-theme="light"] body { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 100, 220, 0.06), transparent 60%), radial-gradient(ellipse 60% 40% at 0% 50%, rgba(0, 60, 160, 0.04), transparent 50%), linear-gradient(180deg, #edf2f8 0%, #e4ecf6 50%, #dde6f2 100%) !important; animation: none !important; color: #1a2a40 !important; } /* ── Section backgrounds ── */ :root[data-theme="light"] .showcase, :root[data-theme="light"] .solutions { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 80, 180, 0.04), transparent), linear-gradient(180deg, #e8f0f9 0%, #edf2f8 100%) !important; } :root[data-theme="light"] .catalog, :root[data-theme="light"] .intro { background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 80, 180, 0.04), transparent), linear-gradient(180deg, #edf2f8 0%, #e8f0f9 100%) !important; } /* ── Section dividers: subtle blue ── */ :root[data-theme="light"] .showcase::before, :root[data-theme="light"] .intro::before, :root[data-theme="light"] .solutions::before, :root[data-theme="light"] .catalog::before, :root[data-theme="light"] .contact::before { background: linear-gradient( 90deg, transparent 0%, rgba(0, 100, 200, 0.15) 20%, rgba(0, 80, 180, 0.35) 50%, rgba(0, 100, 200, 0.15) 80%, transparent 100% ) !important; box-shadow: none !important; } /* ── Headings: dark, high contrast ── */ :root[data-theme="light"] h2, :root[data-theme="light"] h3 { color: #0d1a2e !important; -webkit-text-fill-color: #0d1a2e !important; background: none !important; filter: none !important; } /* ── Section labels/kickers ── */ :root[data-theme="light"] .kicker, :root[data-theme="light"] .section-label { color: #0055cc !important; text-shadow: none !important; } /* ── Body text readable ── */ /* Đoạn văn trên nền sáng → xám đậm dễ đọc */ :root[data-theme="light"] p, :root[data-theme="light"] .product-card p, :root[data-theme="light"] .showcase-card__info p { color: #3d5068 !important; } /* Thẻ Solutions dùng ảnh nền tối ở cả 2 chế độ → chữ phải sáng */ :root[data-theme="light"] .solution-card h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } :root[data-theme="light"] .solution-card p { color: rgba(236, 244, 251, 0.92) !important; } /* ── Product card price: blue gradient for readability ── */ :root[data-theme="light"] .product-card__price { background: linear-gradient(135deg, #0055cc 20%, #0077ee 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } /* ── Product card button ── */ :root[data-theme="light"] .product-card__buy { border-color: rgba(0, 80, 180, 0.2) !important; background: rgba(0, 80, 180, 0.04) !important; color: #0d1a2e !important; } :root[data-theme="light"] .product-card__buy:hover { border-color: #0055cc !important; background: rgba(0, 80, 180, 0.08) !important; color: #0055cc !important; box-shadow: 0 4px 16px rgba(0, 80, 180, 0.12) !important; } /* ── Product card hover ── */ :root[data-theme="light"] .product-card:hover { border-color: rgba(0, 80, 180, 0.2) !important; box-shadow: 0 8px 32px rgba(0, 60, 140, 0.12), 0 2px 8px rgba(0, 40, 100, 0.06) !important; } /* ── Tabs ── */ :root[data-theme="light"] .tab { border-color: rgba(0, 60, 140, 0.15) !important; background: rgba(0, 60, 140, 0.03) !important; color: #3d5068 !important; } :root[data-theme="light"] .tab:hover { border-color: rgba(0, 80, 180, 0.3) !important; color: #0055cc !important; background: rgba(0, 80, 180, 0.06) !important; } :root[data-theme="light"] .tab.is-active { background: linear-gradient(135deg, #0066ff, #0044cc) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 80, 180, 0.2) !important; } /* ── Search box ── */ :root[data-theme="light"] .search-box input { border-color: rgba(0, 60, 140, 0.15) !important; background: #ffffff !important; color: #1a2a40 !important; } :root[data-theme="light"] .search-box input:focus { border-color: #0066ff !important; box-shadow: 0 0 0 3px rgba(0, 100, 220, 0.1) !important; } :root[data-theme="light"] .search-box__filter-btn { border-color: rgba(0, 60, 140, 0.15) !important; background: #ffffff !important; color: #3d5068 !important; } :root[data-theme="light"] .search-box__filter-btn:hover { border-color: #0066ff !important; color: #0055cc !important; box-shadow: 0 2px 8px rgba(0, 80, 180, 0.1) !important; } /* ── Stats bar ── */ :root[data-theme="light"] .showcase-stats { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(0, 80, 180, 0.12) !important; backdrop-filter: blur(12px) !important; } :root[data-theme="light"] .showcase-stat strong, :root[data-theme="light"] .metric-grid strong { background: linear-gradient(135deg, #0055cc 0%, #0077ee 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } :root[data-theme="light"] .showcase-stat span { color: #3d5068 !important; } :root[data-theme="light"] .showcase-stat__divider { background: rgba(0, 60, 140, 0.12) !important; } /* ── Showcase cards ── */ :root[data-theme="light"] .showcase-card { border-color: rgba(0, 80, 180, 0.1) !important; } :root[data-theme="light"] .showcase-card:hover { border-color: rgba(0, 80, 180, 0.25) !important; box-shadow: 0 12px 40px rgba(0, 60, 140, 0.12) !important; } :root[data-theme="light"] .showcase-card__badge { background: rgba(0, 80, 180, 0.85) !important; border-color: rgba(0, 80, 180, 0.3) !important; color: #ffffff !important; text-shadow: none !important; } /* ── Play button ── */ :root[data-theme="light"] .showcase-card__play { background: rgba(0, 80, 180, 0.6) !important; } :root[data-theme="light"] .showcase-card__play:hover { background: rgba(0, 80, 180, 0.8) !important; box-shadow: 0 4px 20px rgba(0, 80, 180, 0.3) !important; } /* ── News cards ── */ :root[data-theme="light"] .news-grid article { border-color: rgba(0, 80, 180, 0.1) !important; } :root[data-theme="light"] .news-grid article:hover { border-color: rgba(0, 80, 180, 0.2) !important; box-shadow: 0 8px 28px rgba(0, 60, 140, 0.1) !important; transform: translateY(-4px); } :root[data-theme="light"] .news-grid time { color: #0055cc !important; } :root[data-theme="light"] .news-grid h3 { color: #0d1a2e !important; -webkit-text-fill-color: #0d1a2e !important; } /* ── Cards general hover ── */ :root[data-theme="light"] .metric-card:hover, :root[data-theme="light"] .solution-card:hover, :root[data-theme="light"] .contact-feature:hover { border-color: rgba(0, 80, 180, 0.2) !important; box-shadow: 0 8px 28px rgba(0, 60, 140, 0.1) !important; transform: translateY(-4px); } /* ── Header ── */ :root[data-theme="light"] .app-header { border-bottom: 1px solid rgba(0, 60, 140, 0.1) !important; box-shadow: 0 2px 12px rgba(0, 40, 100, 0.06) !important; } :root[data-theme="light"] .logo { color: #0d1a2e !important; } /* light logo__svg removed — now using .logo__img */ /* ── Hero features ── */ :root[data-theme="light"] .hero__features { border-top-color: rgba(0, 60, 140, 0.1) !important; } /* ── Product detail modal light ── */ :root[data-theme="light"] .product-detail__panel { background: #ffffff !important; border-color: rgba(0, 60, 140, 0.12) !important; color: #1a2a40 !important; } :root[data-theme="light"] .product-detail__gallery { background: #f5f8fc !important; } :root[data-theme="light"] .product-detail__media { border-color: rgba(0, 60, 140, 0.1) !important; background: linear-gradient(145deg, #ffffff, #f0f4fa) !important; } :root[data-theme="light"] .product-detail__content { background: #ffffff !important; border-color: rgba(0, 60, 140, 0.08) !important; } :root[data-theme="light"] .product-detail__content h2 { background: none !important; -webkit-text-fill-color: #0d1a2e !important; color: #0d1a2e !important; } :root[data-theme="light"] .product-detail__crumb { color: #6b7a8d !important; } :root[data-theme="light"] .product-detail__meta span { border-color: rgba(0, 60, 140, 0.12) !important; background: rgba(0, 60, 140, 0.04) !important; color: #3d5068 !important; } :root[data-theme="light"] .product-detail__content h3, :root[data-theme="light"] .product-detail__buybox h3 { border-bottom-color: rgba(0, 60, 140, 0.1) !important; background: linear-gradient(135deg, rgba(0, 80, 180, 0.06), rgba(0, 60, 140, 0.03)) !important; color: #0d1a2e !important; } :root[data-theme="light"] .product-detail__price { background: linear-gradient(135deg, #0055cc, #0077ee) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } :root[data-theme="light"] .product-detail__content > p:not(.section-label) { color: #3d5068 !important; } :root[data-theme="light"] .product-detail__specs { border-top-color: rgba(0, 60, 140, 0.1) !important; } :root[data-theme="light"] .product-detail__specs div { border-bottom-color: rgba(0, 60, 140, 0.08) !important; } :root[data-theme="light"] .product-detail__specs div:hover { background: rgba(0, 80, 180, 0.03) !important; } :root[data-theme="light"] .product-detail__specs dt { color: #0f1b2d !important; } :root[data-theme="light"] .product-detail__specs dd { color: #0055cc !important; } :root[data-theme="light"] .product-detail__buybox { background: #f8fafc !important; border-left-color: rgba(0, 60, 140, 0.08) !important; } :root[data-theme="light"] .product-detail__buybox label, :root[data-theme="light"] .product-detail__buybox p { color: #1a2a40 !important; } :root[data-theme="light"] .product-detail__buybox input { border-color: rgba(0, 60, 140, 0.15) !important; background: #ffffff !important; color: #1a2a40 !important; } :root[data-theme="light"] .product-detail__buybox input:focus { border-color: #0066ff !important; box-shadow: 0 0 0 3px rgba(0, 100, 220, 0.1) !important; } :root[data-theme="light"] .product-detail__buybox p b, :root[data-theme="light"] .product-detail__buybox a { color: #0055cc !important; text-shadow: none !important; } :root[data-theme="light"] .product-detail__buy { background: linear-gradient(135deg, #0066ff, #0044cc) !important; box-shadow: 0 4px 16px rgba(0, 80, 180, 0.2) !important; } :root[data-theme="light"] .product-detail__buy:hover { box-shadow: 0 8px 24px rgba(0, 80, 180, 0.3) !important; } :root[data-theme="light"] .product-detail__buybox ul { color: #3d5068 !important; } :root[data-theme="light"] .product-detail__buybox ul li::before { color: #0055cc !important; } :root[data-theme="light"] .product-detail__close { border-color: rgba(0, 60, 140, 0.12) !important; background: rgba(0, 60, 140, 0.04) !important; color: #6b7a8d !important; } :root[data-theme="light"] .product-detail__close:hover { border-color: #0066ff !important; background: rgba(0, 100, 220, 0.08) !important; color: #0055cc !important; box-shadow: 0 2px 8px rgba(0, 80, 180, 0.1) !important; } :root[data-theme="light"] .product-detail__thumbs span { border-color: rgba(0, 60, 140, 0.1) !important; background: linear-gradient(145deg, #f8fafc, #f0f4fa) !important; } :root[data-theme="light"] .callback-row input { border-color: rgba(0, 60, 140, 0.15) !important; background: #ffffff !important; color: #1a2a40 !important; } :root[data-theme="light"] .callback-row button { background: #0055cc !important; border-color: #0055cc !important; color: #ffffff !important; } /* ── Checkout modal light ── */ :root[data-theme="light"] .checkout__panel { background: #ffffff !important; border-color: rgba(0, 60, 140, 0.12) !important; color: #1a2a40 !important; } :root[data-theme="light"] .checkout__panel h2 { color: #0d1a2e !important; -webkit-text-fill-color: #0d1a2e !important; } :root[data-theme="light"] .checkout-steps li { border-color: rgba(0, 60, 140, 0.12) !important; color: #6b7a8d !important; } :root[data-theme="light"] .checkout-steps li.is-active { border-color: #0055cc !important; color: #0d1a2e !important; } :root[data-theme="light"] .checkout-product { border-color: rgba(0, 60, 140, 0.1) !important; background: #f5f8fc !important; } :root[data-theme="light"] .checkout-product span { color: #0055cc !important; } :root[data-theme="light"] .checkout-form input, :root[data-theme="light"] .checkout-form select, :root[data-theme="light"] .checkout-form textarea { border-color: rgba(0, 60, 140, 0.15) !important; background: #f8fafc !important; color: #1a2a40 !important; } :root[data-theme="light"] .checkout-form button { background: linear-gradient(135deg, #0066ff, #0044cc) !important; box-shadow: 0 4px 12px rgba(0, 80, 180, 0.2) !important; } :root[data-theme="light"] .checkout-note { border-color: rgba(0, 60, 140, 0.1) !important; background: #f5f8fc !important; color: #4a6080 !important; } /* ── Counter animated shimmer: blue for light ── */ :root[data-theme="light"] .counter-animated { background: linear-gradient(90deg, #0055cc 0%, #0077ee 25%, #0055cc 50%, #0077ee 75%, #0055cc 100%) !important; -webkit-text-fill-color: transparent !important; } /* ── Product trust strip ── */ :root[data-theme="light"] .products-trust-strip { border-color: rgba(0, 60, 140, 0.1) !important; background: rgba(255, 255, 255, 0.6) !important; color: #3d5068 !important; } /* ── Accent line ── */ :root[data-theme="light"] .hero__accent-line { background: linear-gradient(90deg, #0066ff, #0044cc) !important; box-shadow: none !important; } /* ── Product card tag badges ── */ :root[data-theme="light"] .product-card__tag--new { background: linear-gradient(135deg, #0066ff, #0044cc) !important; box-shadow: 0 2px 8px rgba(0, 80, 180, 0.2) !important; } :root[data-theme="light"] .product-card__tag--stock { background: #0055cc !important; color: #fff !important; } :root[data-theme="light"] .product-card__tag--premium { background: linear-gradient(110deg, #0055cc, #0077ee) !important; box-shadow: 0 2px 8px rgba(0, 80, 180, 0.2) !important; } /* ── Solution card links ── */ :root[data-theme="light"] .solution-card__link { color: #4db4ff !important; } /* ── Contact form button ── */ :root[data-theme="light"] .contact-form button { background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%) !important; box-shadow: 0 4px 16px rgba(0, 80, 180, 0.2) !important; } :root[data-theme="light"] .contact-form button:hover { background: linear-gradient(135deg, #0077ee 0%, #0055cc 100%) !important; box-shadow: 0 8px 24px rgba(0, 80, 180, 0.3) !important; } /* ── Contact & Footer: must override WOW REDESIGN !important ── */ :root[data-theme="light"] .contact { background: radial-gradient(ellipse 75% 60% at 50% 120%, rgba(0, 70, 200, 0.06), transparent), radial-gradient(ellipse 45% 45% at 95% 4%, rgba(0, 100, 200, 0.04), transparent), linear-gradient(170deg, #e4ecf6 0%, #edf2f9 50%, #e8f0f8 100%) !important; color: #1a2a40 !important; } :root[data-theme="light"] .footer { background: radial-gradient(ellipse 80% 50% at 50% 110%, rgba(0, 60, 160, 0.04), transparent), linear-gradient(180deg, #e2ebf5 0%, #dae4f0 50%, #d4dfe9 100%) !important; color: #4a6080 !important; } :root[data-theme="light"] .showcase { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 80, 180, 0.04), transparent), linear-gradient(180deg, #e8f0f9 0%, #edf2f8 100%) !important; } :root[data-theme="light"] .intro { background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 80, 180, 0.04), transparent), linear-gradient(180deg, #edf2f8 0%, #e8f0f9 100%) !important; } :root[data-theme="light"] .solutions { background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0, 80, 180, 0.04), transparent), linear-gradient(180deg, #e8f0f9 0%, #edf2f8 100%) !important; } :root[data-theme="light"] .catalog { background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 80, 180, 0.04), transparent), linear-gradient(180deg, #edf2f8 0%, #e8f0f9 100%) !important; } /* ── All section text overrides for light ── */ :root[data-theme="light"] .contact h2, :root[data-theme="light"] .contact h3, :root[data-theme="light"] .footer__brand strong { color: #0d1a2e !important; -webkit-text-fill-color: #0d1a2e !important; background: none !important; filter: none !important; } :root[data-theme="light"] .contact p, :root[data-theme="light"] .contact span, :root[data-theme="light"] .contact-feature span { color: #4a6080 !important; } :root[data-theme="light"] .contact-feature strong, :root[data-theme="light"] .contact li strong { color: #0055cc !important; } :root[data-theme="light"] .footer__brand p, :root[data-theme="light"] .footer nav a, :root[data-theme="light"] .footer__bottom { color: #4a6080 !important; } :root[data-theme="light"] .footer__nav-label { color: #0055cc !important; } /* ── Bản đồ Google Maps nhúng trong phần Liên hệ ── */ .contact-map { margin-top: 36px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); } .contact-map__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); } .contact-map__bar svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; } .contact-map__bar span { flex: 1; font-weight: 600; } .contact-map__bar a { color: var(--red); font-weight: 700; white-space: nowrap; text-decoration: none; } .contact-map__bar a:hover { text-decoration: underline; } .contact-map__frame { display: block; width: 100%; height: 380px; border: 0; } /* Tông tối cho bản đồ khi ở chế độ dark, hợp với giao diện */ :root[data-theme="dark"] .contact-map__frame { filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.92); } @media (max-width: 640px) { .contact-map__bar { flex-wrap: wrap; gap: 8px; } .contact-map__bar span { flex: 1 1 100%; order: 3; font-size: 13px; } .contact-map__frame { height: 300px; } } /* ── Cụm nút liên hệ nổi: Hotline · Zalo · Fanpage ── */ .float-contact { position: fixed; right: 18px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .float-contact__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.25s ease; } .float-contact__btn:hover, .float-contact__btn:focus-visible { transform: translateY(-3px) scale(1.06); } .float-contact__btn svg { width: 28px; height: 28px; } .float-contact__btn--hotline { background: linear-gradient(135deg, var(--cta), var(--cta-dark)); animation: floatPulseGreen 2.2s ease-out infinite; } .float-contact__btn--zalo { background: #0068ff; animation: floatPulseBlue 2.2s ease-out infinite; animation-delay: 0.6s; } .float-contact__btn--messenger { background: linear-gradient(135deg, #00b2ff, #006aff); } .float-contact__btn--fanpage { background: #1877f2; } .float-contact__btn--maps { background: #ea4335; } /* Nhãn hiện khi rê chuột (desktop) */ .float-contact__label { position: absolute; right: 64px; white-space: nowrap; background: rgba(2, 12, 26, 0.94); color: #eef4fb; border: 1px solid rgba(0, 180, 255, 0.18); padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transform: translateX(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .float-contact__btn:hover .float-contact__label, .float-contact__btn:focus-visible .float-contact__label { opacity: 1; transform: translateX(0); } @keyframes floatPulseGreen { 0% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(13, 184, 112, 0.5); } 70% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 14px rgba(13, 184, 112, 0); } 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(13, 184, 112, 0); } } @keyframes floatPulseBlue { 0% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(0, 104, 255, 0.5); } 70% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 14px rgba(0, 104, 255, 0); } 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(0, 104, 255, 0); } } /* Trên tablet/mobile: nâng lên cho khỏi đè thanh điều hướng dưới đáy */ @media (max-width: 1024px) { .float-contact { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); gap: 10px; } .float-contact__btn { width: 48px; height: 48px; } .float-contact__btn svg { width: 25px; height: 25px; } } @media (prefers-reduced-motion: reduce) { .float-contact__btn--hotline, .float-contact__btn--zalo { animation: none; } } /* ═══════════════════════════════════════════ LIGHT MODE — Tăng chiều sâu & đổ bóng Thẻ nổi khối, bớt phẳng, sang hơn ═══════════════════════════════════════════ */ /* Thẻ nền sáng: trắng đặc, viền rõ, bóng mềm nhiều lớp */ :root[data-theme="light"] .product-card, :root[data-theme="light"] .metric-card, :root[data-theme="light"] .metric-grid div, :root[data-theme="light"] .contact-feature, :root[data-theme="light"] .news-grid article, :root[data-theme="light"] .category-grid a { background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important; border: 1px solid rgba(0, 80, 180, 0.14) !important; box-shadow: 0 1px 2px rgba(13, 38, 76, 0.04), 0 10px 28px rgba(13, 50, 110, 0.09), 0 3px 8px rgba(13, 50, 110, 0.05) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } :root[data-theme="light"] .product-card:hover, :root[data-theme="light"] .metric-grid div:hover, :root[data-theme="light"] .contact-feature:hover, :root[data-theme="light"] .news-grid article:hover, :root[data-theme="light"] .category-grid a:hover { border-color: rgba(0, 110, 230, 0.42) !important; box-shadow: 0 20px 52px rgba(13, 60, 140, 0.17), 0 6px 16px rgba(13, 60, 140, 0.1) !important; } /* Thẻ ảnh (showcase, solution): giữ ảnh nền tối, thêm viền + bóng cho nổi khối */ :root[data-theme="light"] .showcase-card, :root[data-theme="light"] .solution-card { border: 1px solid rgba(0, 80, 180, 0.18) !important; box-shadow: 0 10px 30px rgba(13, 50, 110, 0.13), 0 3px 8px rgba(13, 50, 110, 0.08) !important; } :root[data-theme="light"] .showcase-card:hover, :root[data-theme="light"] .solution-card:hover { border-color: rgba(0, 110, 230, 0.4) !important; box-shadow: 0 22px 58px rgba(13, 60, 140, 0.22), 0 8px 18px rgba(13, 60, 140, 0.12) !important; } /* Nền section: thêm gradient chiều sâu nhẹ thay vì phẳng */ :root[data-theme="light"] .catalog, :root[data-theme="light"] .intro, :root[data-theme="light"] .contact { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0, 95, 205, 0.06), transparent 62%), linear-gradient(180deg, #eef4fb 0%, #e5edf8 100%) !important; } /* Accent xanh đậm & nét hơn cho nhãn mục + nút CTA phụ */ :root[data-theme="light"] .section-label { color: #006ae6 !important; } /* Khối bản đồ: bóng đậm hơn cho hợp tổng thể */ :root[data-theme="light"] .contact-map { box-shadow: 0 14px 40px rgba(13, 50, 110, 0.12) !important; border-color: rgba(0, 80, 180, 0.14) !important; } /* ── FIX #1: Metric label "NĂM KINH NGHIỆM" v.v. — quá nhạt trên nền trắng ── */ :root[data-theme="light"] .metric-grid span { color: #3d5068 !important; } /* ── FIX #2: Thanh "Engineered in Germany" — nền tối lạc lõng trên thẻ sáng ── */ :root[data-theme="light"] .product-card__germany { background: linear-gradient(180deg, #edf2f8 0%, #e0e9f4 100%) !important; border-top: 1px solid rgba(0, 80, 180, 0.1) !important; color: #3d5068 !important; backdrop-filter: none !important; } /* ── FIX #3: Contact form — nền tối, nhãn mờ → chuyển sang nền sáng, nhãn đậm ── */ :root[data-theme="light"] .contact-form { background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important; border: 1px solid rgba(0, 80, 180, 0.16) !important; border-top: 3px solid rgba(0, 100, 220, 0.35) !important; box-shadow: 0 14px 40px rgba(13, 50, 110, 0.12) !important; backdrop-filter: none !important; } :root[data-theme="light"] .contact-form::before { background: linear-gradient(90deg, transparent, rgba(0, 100, 220, 0.15) 30%, rgba(0, 80, 200, 0.2) 50%, rgba(0, 100, 220, 0.15) 70%, transparent) !important; } :root[data-theme="light"] .contact-form label span { color: #1a3050 !important; font-weight: 700 !important; } :root[data-theme="light"] .contact-form .section-label, :root[data-theme="light"] .contact-form__header .section-label { color: #006ae6 !important; } :root[data-theme="light"] .contact-form input, :root[data-theme="light"] .contact-form textarea { background: #f5f8fc !important; border-color: rgba(0, 80, 160, 0.16) !important; color: #1a2a40 !important; } :root[data-theme="light"] .contact-form ::placeholder { color: rgba(60, 80, 110, 0.5) !important; } :root[data-theme="light"] .contact-form__field-icon { color: rgba(0, 80, 180, 0.4) !important; } /* ═══════════════════════════════════════════ DEPTH UPGRADE — Gradient mềm nhiều lớp Tạo cảm giác "sâu" như nhìn vào không gian ═══════════════════════════════════════════ */ /* ── DARK MODE: Nền sâu hơn với gradient phân lớp giữa các section ── */ /* Kích hoạt lại page-depth overlay — vignette tối viền */ .page-depth { display: block !important; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 120% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.4) 100%); } /* Grain texture nhẹ cho chiều sâu */ .page-grain { display: block !important; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* Section glow: ánh sáng mềm phía trên mỗi section tạo chiều sâu */ .showcase::after, .intro::after, .solutions::after, .catalog::after, #news::after, .contact::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 220px; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0, 140, 255, 0.07), transparent 70%); pointer-events: none; z-index: 0; } /* Gradient sâu dọc body — thêm lớp tím/xanh xen kẽ */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 30% at 15% 20%, rgba(120, 40, 220, 0.07), transparent 60%), radial-gradient(ellipse 50% 25% at 85% 35%, rgba(0, 180, 255, 0.06), transparent 55%), radial-gradient(ellipse 55% 35% at 30% 65%, rgba(0, 100, 200, 0.05), transparent 60%), radial-gradient(ellipse 45% 30% at 75% 80%, rgba(140, 50, 230, 0.06), transparent 55%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0, 60, 140, 0.1), transparent 50%); } /* ── LIGHT MODE: Gradient mềm nhiều lớp — bớt phẳng ── */ :root[data-theme="light"] .page-depth { background: radial-gradient(ellipse 120% 80% at 50% 50%, transparent 50%, rgba(180, 200, 230, 0.25) 100%) !important; } :root[data-theme="light"] .page-grain { opacity: 0.018 !important; } :root[data-theme="light"] body::before { background: radial-gradient(ellipse 70% 40% at 10% 15%, rgba(0, 100, 220, 0.06), transparent 55%), radial-gradient(ellipse 50% 30% at 90% 25%, rgba(80, 60, 200, 0.04), transparent 50%), radial-gradient(ellipse 60% 35% at 25% 60%, rgba(0, 140, 255, 0.05), transparent 55%), radial-gradient(ellipse 50% 30% at 80% 75%, rgba(60, 40, 180, 0.04), transparent 50%), radial-gradient(ellipse 100% 50% at 50% 100%, rgba(0, 80, 180, 0.06), transparent 50%) !important; } :root[data-theme="light"] .showcase::after, :root[data-theme="light"] .intro::after, :root[data-theme="light"] .solutions::after, :root[data-theme="light"] .catalog::after, :root[data-theme="light"] #news::after, :root[data-theme="light"] .contact::after { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0, 100, 220, 0.05), transparent 70%) !important; } /* ═══════════════════════════════════════════ SVG Icon Animations — sống động ═══════════════════════════════════════════ */ /* Container glow on hover */ .svg-icon-animated { transition: box-shadow 0.3s ease, border-color 0.3s ease; } .svg-icon-animated:hover { border-color: rgba(0, 229, 255, 0.5) !important; box-shadow: 0 0 18px rgba(0, 229, 255, 0.2), 0 0 6px rgba(47, 111, 232, 0.15); } /* Pulse — nhịp đập nhẹ (dùng cho shield, bubble) */ .svg-pulse { animation: svgPulse 2.5s ease-in-out infinite; } @keyframes svgPulse { 0%, 100% { fill-opacity: 0.08; } 50% { fill-opacity: 0.18; } } /* Bounce — nảy nhẹ (dùng cho grid squares, chat dots, music notes) */ .svg-bounce { animation: svgBounce 2s ease-in-out infinite; } @keyframes svgBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } /* Wave — sóng lan (dùng cho broadcast icon) */ .svg-wave { animation: svgWave 2s ease-in-out infinite; } @keyframes svgWave { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.7; } } /* Draw — vẽ đường (dùng cho heartbeat/pulse line) */ .svg-draw { stroke-dasharray: 80; stroke-dashoffset: 80; animation: svgDraw 2.5s ease-in-out infinite; } @keyframes svgDraw { 0% { stroke-dashoffset: 80; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -80; } } /* Hand — xoay kim đồng hồ (dùng cho clock icon) */ .svg-hand { transform-origin: 12px 12px; animation: svgHand 6s linear infinite; } @keyframes svgHand { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Equalizer bars — thanh nhạc nhảy lên xuống (dùng cho headphone icon) */ .svg-eq { transform-origin: center bottom; animation: svgEq 1.2s ease-in-out infinite; } @keyframes svgEq { 0%, 100% { transform: scaleY(1); opacity: 0.4; } 50% { transform: scaleY(0.5); opacity: 0.8; } } /* Spin slow — xoay chậm (dùng cho gear icon) */ .svg-spin-slow { transform-origin: 20px 20px; animation: svgSpinSlow 12s linear infinite; } @keyframes svgSpinSlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ── Cart Drawer ── */ .cart-drawer { position: fixed; inset: 0; z-index: 110; display: none; background: rgba(0, 4, 14, 0.7); backdrop-filter: blur(8px); } .cart-drawer.is-open { display: block; } .cart-drawer__panel { position: absolute; top: 0; right: 0; width: min(420px, 100%); height: 100%; display: flex; flex-direction: column; background: #0a1628; border-left: 1px solid rgba(0, 180, 255, 0.12); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); animation: slideInRight 0.3s ease; } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cart-drawer__header h2 { font-family: "Inter", sans-serif; font-size: 18px; font-weight: 700; color: var(--white); margin: 0; } .cart-drawer__close { width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--white); cursor: pointer; font-size: 22px; line-height: 1; border-radius: 4px; transition: background 0.2s; } .cart-drawer__close:hover { background: rgba(255, 255, 255, 0.06); } .cart-drawer__items { flex: 1; overflow-y: auto; padding: 16px 24px; } .cart-drawer__empty { display: none; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 20px; color: var(--muted); font-size: 15px; padding: 40px 24px; } .cart-drawer__empty p { margin: 0; } .cart-drawer.is-empty .cart-drawer__items, .cart-drawer.is-empty .cart-drawer__footer { display: none; } .cart-drawer.is-empty .cart-drawer__empty { display: flex; } .cart-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .cart-item__name { font-weight: 700; font-size: 14px; color: var(--white); } .cart-item__price { text-align: right; font-weight: 800; font-size: 14px; color: var(--cyan); } .cart-item__controls { display: flex; align-items: center; gap: 8px; } .cart-item__qty-btn { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; background: transparent; color: var(--white); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; transition: background 0.2s; } .cart-item__qty-btn:hover { background: rgba(255, 255, 255, 0.08); } .cart-item__qty { min-width: 24px; text-align: center; font-weight: 700; font-size: 14px; color: var(--white); } .cart-item__remove { margin-left: auto; border: 0; background: transparent; color: #ef4444; cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; } .cart-item__remove:hover { background: rgba(239, 68, 68, 0.1); } .cart-drawer__footer { padding: 20px 24px; border-top: 1px solid rgba(0, 180, 255, 0.12); background: rgba(0, 0, 0, 0.2); } .cart-drawer__total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 16px; color: var(--white); } .cart-drawer__total strong { font-size: 20px; font-weight: 800; color: var(--green); } .cart-drawer__checkout { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--magenta) 100%); color: #ffffff; cursor: pointer; font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 24px rgba(0, 229, 255, 0.2); transition: box-shadow 0.3s, transform 0.2s; margin-bottom: 10px; } .cart-drawer__checkout:hover { transform: translateY(-1px); box-shadow: 0 0 32px rgba(0, 229, 255, 0.35); } .cart-drawer__continue { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; transition: color 0.2s; } .cart-drawer__continue:hover { color: var(--white); } /* ── Checkout products list ── */ .checkout-products { margin-bottom: 16px; } .checkout-products .checkout-product-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); margin-bottom: 6px; padding: 10px 14px; background: var(--panel); font-size: 14px; } .checkout-products .checkout-product-row strong { font-weight: 700; color: var(--white); } .checkout-products .checkout-product-row .qty { color: var(--muted); font-size: 13px; } .checkout-products .checkout-product-row .subtotal { color: var(--green); font-weight: 800; white-space: nowrap; } .checkout-products .checkout-total-row { display: flex; justify-content: space-between; padding: 12px 14px; border: 1px solid rgba(0, 180, 255, 0.2); background: rgba(0, 180, 255, 0.04); font-weight: 800; color: var(--white); } .checkout-products .checkout-total-row span:last-child { color: var(--green); font-size: 17px; } /* ── Cart toast notification ── */ .cart-toast { position: fixed; top: 80px; right: 24px; z-index: 120; padding: 14px 22px; border-radius: 8px; background: linear-gradient(135deg, #00c853 0%, #009624 100%); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 8px 30px rgba(0, 200, 83, 0.3); transform: translateX(120%); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .cart-toast.is-visible { transform: translateX(0); } /* ── Checkout success state ── */ .checkout-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 40px 20px; } .checkout-success.is-visible { display: flex; } .checkout-success__icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #00c853, #009624); display: grid; place-items: center; font-size: 32px; color: #fff; } .checkout-success h3 { font-size: 22px; font-weight: 800; color: var(--white); margin: 0; } .checkout-success p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; } /* ── Product card add-to-cart button ── */ .product-card__add-cart { width: 100%; min-height: 38px; margin-top: 6px; border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 6px; background: transparent; color: var(--cyan); cursor: pointer; font-weight: 700; font-size: 13px; transition: background 0.2s, color 0.2s; } .product-card__add-cart:hover { background: rgba(0, 229, 255, 0.08); } .product-card__add-cart.added { background: rgba(0, 200, 83, 0.12); color: #00c853; border-color: rgba(0, 200, 83, 0.3); } /* ── Light theme overrides ── */ :root[data-theme="light"] .cart-drawer__panel { background: #fff; border-left-color: #e0e8f0; } :root[data-theme="light"] .cart-drawer__header { border-bottom-color: #e0e8f0; } :root[data-theme="light"] .cart-drawer__header h2 { color: #1a1a2e; } :root[data-theme="light"] .cart-item__name { color: #1a1a2e; } :root[data-theme="light"] .cart-item__price { color: #0055cc; } :root[data-theme="light"] .cart-item { border-bottom-color: #e0e8f0; } :root[data-theme="light"] .cart-drawer__footer { background: #f7f9fc; border-top-color: #e0e8f0; } :root[data-theme="light"] .cart-drawer__total { color: #1a1a2e; } :root[data-theme="light"] .cart-drawer__total strong { color: #0055cc; } :root[data-theme="light"] .product-card__add-cart { border-color: rgba(0, 85, 204, 0.2); color: #0055cc; } :root[data-theme="light"] .product-card__add-cart:hover { background: rgba(0, 85, 204, 0.06); } @media (prefers-reduced-motion: reduce) { .svg-pulse, .svg-bounce, .svg-wave, .svg-draw, .svg-hand, .svg-eq, .svg-spin-slow { animation: none; } } /* ── Accessibility: tôn trọng "giảm chuyển động" của hệ điều hành ── Tắt mọi animation lặp & rút transition về gần như tức thì, nhưng vẫn để các phần tử hiện ra ở trạng thái cuối (không bị ẩn). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Ẩn hẳn các hiệu ứng nền thuần trang trí */ .hero__particles, .hero__sound-wave, .hero__scroll-hint { display: none !important; } }