@font-face {
  font-family: "Geist Sans";
  src: url("../fonts/geist-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root { --bg: #f8fafc; --panel: #ffffff; --line: #e2e8f0; --text: #0f172a; --muted: #55627a; --brand: #667eea; --brand-2: #764ba2; --ok: #0f766e; --danger: #b91c1c; --grad-brand: linear-gradient(135deg, #667eea 0%, #764ba2 97%); --grad-brand-alt: linear-gradient(135deg, #667eea 0%, #764ba2 97%); --grad-brand-soft: linear-gradient(135deg, rgba(102,126,234,0.14) 0%, rgba(118,75,162,0.14) 97%); --shadow-button: 0 12px 28px rgba(102,126,234,0.22), 0 4px 10px rgba(15,23,42,0.10), 0 1px 0 rgba(255,255,255,0.72) inset; --shadow-button-hover: 0 16px 34px rgba(102,126,234,0.28), 0 6px 14px rgba(15,23,42,0.12), 0 1px 0 rgba(255,255,255,0.78) inset; --shadow-3d: 0 14px 34px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.07), 0 1px 0 rgba(255,255,255,0.72) inset; --shadow-3d-hover: 0 18px 42px rgba(15,23,42,0.14), 0 6px 16px rgba(15,23,42,0.09), 0 1px 0 rgba(255,255,255,0.78) inset; --shadow-3d-strong: 0 24px 58px rgba(15,23,42,0.16), 0 8px 22px rgba(15,23,42,0.10), 0 1px 0 rgba(255,255,255,0.82) inset; --shadow: var(--shadow-3d); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { font-size: min(3.72vw, 16px); scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-family: "Geist Sans", sans-serif; color: var(--text); background: #f8fafc; line-height: 1.5; padding-top: 68px; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px), linear-gradient(to bottom, #e2e8f0 1px, transparent 1px); background-size: 20px 30px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%); pointer-events: none; }
h1, h2, h3, .price, .badge, .cta { font-family: "Geist Sans", sans-serif; }
.container { width: min(1120px, 86vw); margin: 0 auto; }
.topbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0,0,0,0.08); will-change: transform; transform: translateZ(0); }
.topbar-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-social { display: flex; align-items: center; gap: 8px; }
.header-social-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.72); border: 1px solid rgba(15,23,42,0.1); color: #334155; text-decoration: none; box-shadow: 0 2px 8px rgba(15,23,42,0.07); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; }
.header-social-link:hover { background: #fff; transform: translateY(-1px); color: #312e81; box-shadow: 0 6px 14px rgba(15,23,42,0.1); }
.header-social-link svg { width: 16px; height: 16px; display: block; }
@media (max-width: 480px) {
  .header-social { gap: 5px; }
  .header-social-link { width: 30px; height: 30px; }
  .header-social-link svg { width: 14px; height: 14px; }
}
.logo { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.01em; }
.logo span { background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.logo-sub { background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; }
@keyframes floatUp {
0% { transform: translateY(0) scale(1); opacity: 0.8; }
100% { transform: translateY(-32px) scale(0.2); opacity: 0; }
}
.logo-wrap { position: relative; display: inline-block; }
.logo-particle { position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; animation: floatUp 2s ease-out infinite; }
.lp1 { background: #f5e642; left: 8%; animation-delay: 0s; animation-duration: 2.1s; }
.lp2 { background: #d4a017; left: 24%; animation-delay: 0.45s; animation-duration: 1.8s; }
.lp3 { background: #f5e642; left: 44%; animation-delay: 0.9s; animation-duration: 2.3s; }
.lp4 { background: #d4a017; left: 64%; animation-delay: 0.2s; animation-duration: 1.9s; }
.lp5 { background: #f5e642; left: 82%; animation-delay: 1.2s; animation-duration: 2.0s; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: #fff; color: #334155; border-radius: 999px; font-size: 0.875em; padding: 0.625em 1em; text-decoration: none; font-weight: 600; }
.chip.primary { display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--grad-brand); background-clip: padding-box; color: #fff; padding: 0.625em 1.25em; font-size: 0.94em; line-height: 1.2; appearance: none; -webkit-appearance: none; overflow: hidden; box-shadow: var(--shadow-3d); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; }
.chip.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12); filter: brightness(1.07); }
.chip.primary:active { transform: translateY(0); }
.hero { padding: 0 0 24px; }
.hero-box { position: relative; overflow: visible; width: 100vw; margin-left: calc(50% - 50vw); background: transparent; padding: clamp(32px, 5vw, 64px) clamp(18px, 5vw, 34px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-box::before,
.hero-box::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
.hero-box::before { width: 280px; height: 280px; right: -90px; bottom: -130px; background: radial-gradient(circle, rgba(210, 153, 194, 0.17) 0%, rgba(210, 153, 194, 0) 72%); }
.hero-box::after { width: 220px; height: 220px; right: 18%; top: -120px; background: radial-gradient(circle, rgba(254, 249, 215, 0.35) 0%, rgba(254, 249, 215, 0) 72%); }
.hero-box > div { position: relative; z-index: 1; max-width: min(680px, 92vw); margin: 0 auto; width: 100%; }
.kicker { display: inline-flex; align-items: center; gap: 6px; background: rgba(210,153,194,0.12); border: 1px solid #e8bfd7; color: #8b4d74; border-radius: 999px; padding: 4px 10px; font-size: 0.625em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; box-shadow: 0 0.18em 0.45em rgba(255,255,255,0.92) inset, 0 0.7em 1.8em rgba(15,23,42,0.08), 0 0.14em 0.32em rgba(15,23,42,0.06); }
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.title { margin: 0 0 16px; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; display: grid; gap: 0.12em; text-align: center; }
.title-main { display: block; color: #0f172a; font-weight: 800; }
.title-sub { display: block; font-weight: 800; color: #0f172a; }
.title-and { color: #475569; font-weight: 700; }
.title .accent { display: inline-block; font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero p { margin: 0 0 20px; color: #475569; max-width: 56ch; font-size: 0.94em; line-height: 1.65; margin-left: auto; margin-right: auto; }
.hero-pill { margin-bottom: 16px; width: fit-content; border-radius: 999px; border: 0.09em solid rgba(102,126,234,0.24); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); color: #5b6ee1; padding: 0.4em 0.9em; font-weight: 700; font-size: 0.72em; display: inline-flex; align-items: center; gap: 0.5em; box-shadow: 0 0.2em 0.46em rgba(255,255,255,0.9) inset, 0 0.82em 2em rgba(15,23,42,0.10), 0 0.15em 0.36em rgba(15,23,42,0.07); }
.hero-card { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.hero-cta-row { margin-bottom: 2.6em; display: flex; gap: 0.8em; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-social-icons { position: absolute; top: clamp(10px,2vw,18px); right: clamp(14px,4vw,28px); display: flex; gap: 10px; z-index: 2; }
.hero-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.82); border: 1px solid rgba(15,23,42,0.1); color: #334155; text-decoration: none; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 8px rgba(15,23,42,0.08); }
.hero-social-icon:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(15,23,42,0.13); }
.social-strip { padding: 0 0 10px; }
.social-strip-inner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.social-chip { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 16px; border-radius: 999px; text-decoration: none; color: #243043; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(243,247,255,0.94) 100%); border: 1px solid rgba(203,213,225,0.9); box-shadow: var(--shadow-3d); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
.social-chip:hover { transform: translateY(-2px); color: #7b4d6a; border-color: #e8bfd7; box-shadow: var(--shadow-3d-hover); }
.social-chip svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.social-chip span { font-size: 0.8em; font-weight: 700; letter-spacing: -0.01em; }
.hero-cta-row .chip.primary,
.hero-outline-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; min-height: 3.08em; padding: 0.72em 1.26em; font-size: 0.92em; line-height: 1.15; font-weight: 760; border-radius: 999px; text-decoration: none; letter-spacing: -0.018em; }
.hero-cta-row .chip.primary { position: relative; background: var(--grad-brand); box-shadow: var(--shadow-3d); }
.hero-cta-row .chip.primary::before { content: ""; position: absolute; inset: 1px 1px auto; height: 48%; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)); pointer-events: none; }
.hero-cta-row .chip.primary:hover { transform: translateY(-1px); box-shadow: 0 0.12em 0.28em rgba(255,255,255,0.22) inset, 0 0.85em 1.7em rgba(210,153,194,0.30), 0 0.2em 0.5em rgba(15,23,42,0.1); filter: brightness(1.03); }
.hero-cta-row .chip.primary:active { transform: translateY(0); box-shadow: 0 0.12em 0.24em rgba(255,255,255,0.2) inset, 0 0.5em 1.1em rgba(210,153,194,0.24), 0 0.12em 0.34em rgba(15,23,42,0.08); }
.hero-outline-btn { border: 1.5px solid rgba(210,153,194,0.45); background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #7b4d6a; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.07); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.hero-outline-btn:hover { background: rgba(255,255,255,0.94); border-color: var(--brand); transform: translateY(-0.05em); box-shadow: 0 4px 16px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08); }
.hero-stats { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; }
.hero-stat-card { background: transparent; border: none; border-radius: 0; padding: 8px 20px; box-shadow: none; text-align: center; position: relative; }
.hero-stat-card + .hero-stat-card::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 28px; background: #e2e8f0; }
.hero-stat-value { font-size: 1.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #0f172a; background: none; -webkit-text-fill-color: #0f172a; }
.hero-stat-label { font-size: 0.68em; color: #64748b; font-weight: 600; margin-top: 4px; white-space: nowrap; }
.hero-stat-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.hero-stat-avatars { display: flex; align-items: center; flex-shrink: 0; }
.hero-stat-top .hero-stat-value { white-space: nowrap; }
.hero-stat-avatars img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; margin-left: -6px; box-shadow: 0 1px 4px rgba(15,23,42,0.12); background: #e2e8f0; }
.hero-stat-avatars img:first-child { margin-left: 0; }
.community-split-top { display: block; margin-bottom: 18px; }
.community-split-text { min-width: 0; }
.community-mockup { width: 152px; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(210,153,194,0.18); padding: 12px 12px 0; }
.cm-bar { height: 0.44em; background: var(--grad-brand); border-radius: 999px; margin-bottom: 0.56em; }
.cm-code { border-radius: 10px; background: #0f172a; padding: 0.5em; margin-bottom: 0.5em; }
.cm-dots { display: flex; gap: 4px; margin-bottom: 0.375em; }
.cm-dots span { width: 0.3125em; height: 0.3125em; border-radius: 50%; display: inline-block; }
.cm-code-line { height: 0.25em; border-radius: 999px; margin-bottom: 0.3125em; background: rgba(255,255,255,0.18); }
.cm-code-line.purple { background: #8b5cf6; }
.cm-code-line.blue { background: #38bdf8; }
.cm-code-line.green { background: #34d399; }
.cm-social { display: flex; gap: 0.375em; padding-bottom: 0.75em; }
.cm-pill { flex: 1; border-radius: 999px; height: 1.125em; display: grid; place-items: center; color: #fff; font-size: 0.52em; font-weight: 800; }
.community-wrap { background: linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(255,248,252,0.97) 100%); color: #0f172a; border: 1px solid rgba(102,126,234,0.28); border-radius: 32px; box-shadow: var(--shadow-3d-strong); padding: clamp(20px, 4vw, 26px); position: relative; overflow: hidden; isolation: isolate; }
.community-wrap::before { content: ""; position: absolute; inset: -24px auto auto -24px; width: 180px; height: 180px; border-radius: 999px; background: radial-gradient(circle, rgba(210,153,194,0.18) 0%, rgba(210,153,194,0) 72%); z-index: -1; }
.community-wrap::after { content: ""; position: absolute; inset: 12px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.82); box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); pointer-events: none; z-index: -1; }
.community-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.14); color: #fff; font-size: 0.69em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4em 0.75em; }
.community-title { margin: 0.6em 0 0.4em; font-size: clamp(1.25rem, 4.5vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; overflow-wrap: break-word; word-break: break-word; }
.community-sub { margin: 0; color: rgba(255,255,255,0.82); font-size: clamp(0.75rem, 2.4vw, 1rem); line-height: 1.5; overflow-wrap: break-word; word-break: break-word; }
.community-sub strong { color: #fff; font-weight: 800; }
.gift-box { margin-top: 0; display: flex; align-items: center; gap: 0.75em; padding: 0.18em 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.gift-box .ico { width: 1.95em; height: 1.95em; border-radius: 0.72em; display: grid; place-items: center; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.14); flex-shrink: 0; }
.gift-title { font-size: 0.84em; font-weight: 700; color: #fff; line-height: 1.25; }
.gift-sub { font-size: 0.68em; color: rgba(255,255,255,0.72); line-height: 1.25; }
.fb-mockup { width: 100%; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid rgba(191,219,254,0.82); box-shadow: var(--shadow-3d-strong); }
.fb-cover { height: 5em; background: var(--grad-brand); position: relative; display: flex; align-items: flex-end; padding: 0.5em 0.75em; }
.fb-cover-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.35)); }
.fb-cover-text { position: relative; color: #fff; font-size: 0.75em; font-weight: 800; letter-spacing: 0.01em; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.fb-info { display: flex; align-items: center; gap: 0.5em; padding: 0.625em 0.75em; border-bottom: 1px solid #f1f5f9; }
.fb-avatar { width: 2em; height: 2em; border-radius: 50%; background: #eef2ff; border: 2px solid #cfd7f8; display: grid; place-items: center; flex-shrink: 0; }
.fb-name { font-size: 0.72em; font-weight: 800; color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10em; }
.fb-meta { font-size: 0.62em; color: #64748b; margin-top: 1px; }
.fb-join-btn { margin-left: auto; position: relative; background: var(--grad-brand); color: #fff; font-size: 0.62em; font-weight: 700; border-radius: 999px; padding: 0.3em 0.6em; white-space: nowrap; flex-shrink: 0; text-decoration: none; overflow: hidden; box-shadow: var(--shadow-3d); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.fb-join-btn::before { content: ""; position: absolute; inset: 1px 1px auto; height: 48%; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)); pointer-events: none; }
.fb-join-btn:hover { transform: translateY(-1px); box-shadow: 0 0.12em 0.28em rgba(255,255,255,0.22) inset, 0 0.85em 1.7em rgba(79,70,229,0.26), 0 0.2em 0.5em rgba(15,23,42,0.1); filter: brightness(1.03); }
.fb-join-btn:active { transform: translateY(0); box-shadow: 0 0.12em 0.24em rgba(255,255,255,0.2) inset, 0 0.5em 1.1em rgba(79,70,229,0.2), 0 0.12em 0.34em rgba(15,23,42,0.08); }
.community-card-link { display: block; text-decoration: none; color: inherit; }
.community-card-link:focus-visible { outline: 0.16em solid rgba(59,130,246,0.4); outline-offset: 0.25em; border-radius: 1.5em; }
.fb-join-btn { min-height: 3em; padding: 0.62em 1em; font-size: 0.76em; border-radius: 999px; }
.community-note-bar { margin-top: 0.75em; background: linear-gradient(180deg, #fffbeb 0%, #fff7d6 100%); border: 1px solid #fde68a; border-radius: 1em; padding: 0.82em 1em; display: flex; align-items: flex-start; gap: 0.62em; }
.community-note-ico { width: 1.8em; height: 1.8em; border-radius: 0.68em; background: rgba(245,158,11,0.12); color: #b45309; display: grid; place-items: center; flex-shrink: 0; }
.community-note-title { font-size: 0.82em; font-weight: 800; color: #92400e; line-height: 1.35; }
.community-note-sub { margin-top: 0.12em; font-size: 0.72em; color: #78350f; line-height: 1.5; }

.fb-post { display: flex; align-items: center; gap: 0.5em; padding: 0.625em 0.75em; }
.fb-post-avatar { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--grad-brand); flex-shrink: 0; }
.fb-post-body { flex: 1; }
.fb-post-line { height: 0.375em; border-radius: 999px; background: #e2e8f0; margin-bottom: 0.375em; }
.fb-post-line:last-child { margin-bottom: 0; }
.community-btn { margin-top: 1.25em; width: 100%; display: flex; justify-content: center; box-shadow: 0 12px 24px rgba(15,23,42,0.18); }
.cta.buy.community-btn { background: #fff; color: #312e81; }
.community-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625em; margin-bottom: 1.125em; }
@media (max-width: 680px) {
.community-metrics { grid-template-columns: 1fr; }
}
.community-metric { border-radius: 18px; padding: 0.875em; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16); }
.community-metric strong { display: block; margin-bottom: 0.25em; font-size: 1.05em; color: #fff; }
.community-metric span { color: rgba(255,255,255,0.74); font-size: 0.84em; }
.community-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; margin: 24px 0; }
.comm-stat-value { font-size: 2rem; font-weight: 800; color: #8b4d74; letter-spacing: -0.03em; line-height: 1; }
.comm-stat-label { font-size: 0.69em; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #64748b; margin-top: 5px; }
.personal-card { margin-top: 18px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid var(--brand-2); border-radius: 30px; box-shadow: 0 2px 12px rgba(99,102,241,0.08); padding: 18px 18px 18px 16px; }
.personal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.personal-head .ico { width: 40px; height: 40px; border-radius: 11px; border: 1px solid #e8bfd7; display: grid; place-items: center; color: #8b4d74; background: #fbf1f8; flex-shrink: 0; }
.personal-title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #0f172a; }
.personal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.81em; color: #334155; font-weight: 600; }
.personal-list li { display: flex; align-items: center; gap: 10px; word-break: break-word; }
.personal-check { width: 20px; height: 20px; border-radius: 50%; background: #f0fdf4; border: 1px solid #bbf7d0; display: grid; place-items: center; flex-shrink: 0; }
.section { padding: 2.25em 0; }
#source-code.section { padding-top: 56px; }
#products .container { width: min(1020px, calc(100vw - 88px)); }
.section h2 { margin: 0 0 24px; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -0.02em; background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.35em; row-gap: 2em; }
.card { grid-column: span 6; background: #ffffff; border: 1px solid #e8edf5; border-radius: 1.5em; box-shadow: var(--shadow-3d); padding: 1.1em; display: flex; flex-direction: column; gap: 0.75em; min-width: 0; scroll-margin-top: 92px; transition: box-shadow 0.18s, transform 0.18s; }
.card:hover { box-shadow: var(--shadow-3d-hover); transform: translateY(-2px); }
.head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.head-ico { width: 3em; height: 3em; border-radius: 0.875em; background: #eef2ff; flex-shrink: 0; display: block; }
.head-text { min-width: 0; }
.name { font-size: clamp(0.88rem, 3.5vw, 1.15rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 3px; word-break: break-word; overflow-wrap: break-word; }
.tag { color: #94a3b8; font-size: 0.60em; margin: 0; line-height: 1.4; }
.badge { border-radius: 999px; padding: 5px 10px; font-size: 0.65em; white-space: nowrap; font-weight: 800; flex-shrink: 0; letter-spacing: 0.04em; }
.badge.green { border: 2px solid #22c55e; background: #dcfce7; color: #15803d; box-shadow: 0 2px 8px rgba(22,163,74,0.18); }
.badge.red { border: 2px solid #f87171; background: #fee2e2; color: #b91c1c; box-shadow: 0 2px 8px rgba(185,28,28,0.18); }
.price-row { display: block; }
.price-main { display: flex; align-items: baseline; gap: 4px; flex-wrap: nowrap; }
.price { font-size: 2.3em; line-height: 0.9; letter-spacing: -0.055em; font-weight: 950; color: #0f172a; }
.price-month { font-size: 0.6em; color: #7c8aa5; font-weight: 700; margin-bottom: 0.24em; letter-spacing: -0.01em; }
.price-subrow { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.old { font-size: 0.72em; color: #a8b3c7; margin-top: 0; line-height: 1.35; }
.old s { color: #b2bdd0 !important; text-decoration: line-through #f87171 !important; text-decoration-thickness: 1.15px !important; }
.day { font-size: 0.66em; color: #5b6ee1; background: linear-gradient(180deg, #fffdf8 0%, #fff 100%); border: 1px solid #fdba74; border-radius: 999px; padding: 0.34em 0.82em; width: fit-content; font-weight: 800; white-space: nowrap; box-shadow: 0 0.35em 0.9em rgba(15,23,42,0.05), 0 0.08em 0.2em rgba(15,23,42,0.04); }
.cta-row { margin-top: auto; display: grid; gap: 8px; }
.cta { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0.8em 1.1em; font-size: 0.94rem; font-weight: 700; line-height: 1.2; appearance: none; -webkit-appearance: none; cursor: pointer; text-decoration: none; text-align: center; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.cta:hover { transform: translateY(-0.06em); box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.10); filter: brightness(1.02); }
.cta:active { transform: translateY(0); }
.cta.buy { color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-3d); }
.cta.light { color: #1e293b; background: #f8fafc; border: 1px solid var(--line); }
.wide { grid-column: span 6; border-radius: 1.5em; padding: 1.25em; position: relative; overflow: hidden; }
#source-code .wide { grid-column: span 12; }
.wide.wide-code { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-3d-strong); }
.wide h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; color: #fff; }
.wide ul { margin: 0 0 16px; padding-left: 18px; color: rgba(255,255,255,0.85); display: grid; gap: 7px; font-size: 0.84em; }
.wide-deco { position: absolute; right: -10px; bottom: -10px; opacity: 0.18; pointer-events: none; user-select: none; }
.contact-list { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.contact-item { min-width: 128px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; text-decoration: none; color: #1f2937; background: rgba(255,255,255,0.94); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-3d); overflow: hidden; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
.contact-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-3d-hover); border-color: #e8bfd7; color: #7b4d6a; }
.contact-item svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.contact-item span { font-size: 0.82em; font-weight: 700; letter-spacing: -0.01em; }
.footer { text-align: center; color: #64748b; padding: 26px 12px 40px; font-size: 0.81em; }
.wlc-services { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wlc-service-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255,255,255,0.82); border: 1px solid #ead0df; border-radius: 22px; padding: 9px 6px; text-align: center; box-shadow: var(--shadow-3d); }
.wlc-svc-svg { width: 60px; height: 60px; flex-shrink: 0; }
.wlc-svc-name { font-size: 0.75em; font-weight: 800; color: #0f172a; }
.wlc-svc-note { font-size: 0.625em; color: #64748b; line-height: 1.4; }
.wlc-cta-text { font-size: 0.81em; color: #334155; text-align: center; line-height: 1.5; margin: 0; }
.wlc-cta-text strong { color: #8b4d74; }
@keyframes shimmertext {
0% { background-position: 100% center; }
100% { background-position: -100% center; }
}
.confirm-toast { position: fixed; bottom: -180px; left: 50%; transform: translateX(-50%); background:
linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%),
rgba(15, 23, 42, 0.46); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); border: 1px solid rgba(255,255,255,0.2); border-radius: 32px; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 36px rgba(15,23,42,0.24), 0 0 0 1px rgba(255,255,255,0.06) inset; z-index: 200; transition: bottom 0.35s cubic-bezier(0.34,1.56,0.64,1); width: min(300px, 88vw); pointer-events: none; }
.confirm-toast.show { bottom: 28px; pointer-events: auto; }
.confirm-toast-top { display: flex; align-items: center; gap: 10px; }
.confirm-toast-top img { width: 40px; height: 40px; border-radius: 14px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.15); }
.confirm-toast-label { font-size: 0.94em; font-weight: 700; color: rgba(255,255,255,0.95); flex: 1; }
.confirm-toast-sub { font-size: 0.69em; color: rgba(255,255,255,0.74); margin-top: 1px; }
.confirm-btn-yes { background: var(--grad-brand); color: #fff; border: 0; border-radius: 999px; padding: 0.65em 0.75em; font-size: 0.82em; font-weight: 700; cursor: pointer; font-family: "Geist Sans", sans-serif; text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; width: 100%; box-shadow: var(--shadow-button); transition: filter 0.15s, box-shadow 0.15s; }
.confirm-btn-yes:hover { filter: brightness(1.08); box-shadow: 0 10px 24px rgba(210,153,194,0.38); }
.confirm-btn-no { display: block; width: 100%; border: 0; background: none; color: rgba(255,255,255,0.72); font-size: 0.69em; font-weight: 600; cursor: pointer; font-family: "Geist Sans", sans-serif; padding: 2px 0 4px; text-align: center; transition: color 0.15s; }
.confirm-btn-no:hover { color: rgba(255,255,255,0.92); }
.modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); display: none; place-items: center; z-index: 50; padding: 16px; overflow-y: auto; }
.modal.open { display: grid; }
@supports (height: 100dvh) {
.modal { height: 100dvh; }
}
.modal-box { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; background: #ffffff; border: 1.5px solid #ead0df; border-radius: 1.5em; box-shadow: 0 40px 100px rgba(15,23,42,0.30), var(--shadow-3d-strong); }
.modal-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--grad-brand-soft); }
.modal-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.modal-head-ico { width: 40px; height: 40px; border-radius: 14px; object-fit: cover; border: 1px solid #f3d7e6; background: #fff; flex-shrink: 0; display: block; }
.modal-title { font-size: 1em; font-weight: 800; margin: 0; }
.close-btn { border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; padding: 0.5em 1em; cursor: pointer; font-weight: 700; font-family: "Geist Sans", sans-serif; font-size: 0.82em; }
.modal-body { padding: 0.75em 0.875em; display: grid; gap: 0.5em; }
.modal-desc-wrap { background: rgba(255,248,252,0.84); border: 1px solid rgba(234,208,223,0.75); border-radius: 1em; padding: 0.875em 1em; }
.modal-list { margin: 0; padding: 0; list-style: none; color: #334155; font-size: 0.85em; display: grid; gap: 6px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-contact-note { font-size: 0.75em; font-weight: 600; color: #334155; background: rgba(255,248,252,0.84); border: 1px solid rgba(234,208,223,0.75); border-radius: 20px; padding: 12px 16px; }
.contact-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 0.82em 0.75em; font-size: 0.82em; font-weight: 700; font-family: "Geist Sans", sans-serif; text-decoration: none; text-align: center; white-space: nowrap; overflow: hidden; min-width: 0; width: 100%; color: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.contact-cta:hover { transform: translateY(-1px); }
.contact-cta:active { transform: translateY(0); }
#devModal .modal-head { position: sticky; top: 0; z-index: 2; }
#trustProofModal .modal-head { position: sticky; top: 0; z-index: 3; }
#devModal .modal-body { gap: 6px; }
#devModal .contact-box { margin-top: 4px !important; }
#devModal .wlc-services { margin-bottom: 10px !important; }
#devModal .wlc-svc-note { font-size: 0.594em; line-height: 1.35; word-break: normal; }
#devModal .wlc-svc-note br { display: none; }
.contact-cta.tele { background: linear-gradient(135deg, #2AABEE, #1a8fc7); box-shadow: 0 6px 16px rgba(42,171,238,0.35); }
.contact-cta.tele:hover { box-shadow: 0 8px 20px rgba(42,171,238,0.45); }
.contact-cta.zalo { background: var(--grad-brand); box-shadow: var(--shadow-3d); }
.contact-cta.zalo:hover { box-shadow: 0 8px 20px rgba(210,153,194,0.45); }
.contact-cta svg { flex-shrink: 0; }
.inline-zalo-card { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,248,252,0.98) 100%); border: 0.07em solid rgba(234, 208, 223, 0.78); border-radius: 1.35em; padding: 0.82em; display: grid; gap: 0.62em; box-shadow: 0 1em 2em rgba(210,153,194,0.16), 0 0.2em 0.45em rgba(15,23,42,0.06); }
.inline-zalo-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; }
.inline-zalo-title { margin: 0; color: #0f172a; font-size: 0.96em; font-weight: 800; letter-spacing: -0.01em; }
.inline-zalo-sub { margin: 0.12em 0 0; color: #55627a; font-size: 0.68em; line-height: 1.4; }
.inline-zalo-main { display: grid; grid-template-columns: auto 1fr; gap: 0.68em; align-items: center; padding: 0.72em 0.78em; border-radius: 1em; background: linear-gradient(180deg, #fff9fc 0%, #ffffff 100%); border: 0.07em solid rgba(243, 215, 230, 0.95); }
.inline-zalo-icon { width: 2.55em; height: 2.55em; border-radius: 0.86em; overflow: hidden; box-shadow: 0 0.55em 1.1em rgba(210,153,194,0.14); }
.inline-zalo-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inline-zalo-label { color: #64748b; font-size: 0.67em; font-weight: 700; }
.inline-zalo-value { margin-top: 0.06em; color: #7b4d6a; font-size: 0.96em; font-weight: 800; letter-spacing: -0.01em; }
.inline-zalo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em; }
.inline-zalo-btn { min-height: 2.6em; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; border-radius: 0.9em; padding: 0.58em 0.85em; font-family: "Geist Sans", sans-serif; font-size: 0.78em; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; }
.inline-zalo-btn:hover { transform: translateY(-0.05em); filter: brightness(1.05); }
.inline-zalo-btn:active { transform: translateY(0); }
.inline-zalo-btn.open { border: 0; color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-button); }
.inline-zalo-btn.copy { border: 0.07em solid #f0d9e6; color: #7b4d6a; background: #ffffff; box-shadow: 0 0.3em 0.8em rgba(15,23,42,0.06); }
.inline-zalo-btn::before { width: 1.1em; height: 1.1em; display: inline-grid; place-items: center; border-radius: 0.3em; background: rgba(255,255,255,0.18); line-height: 1; flex-shrink: 0; }
.inline-zalo-btn.open::before { content: "↗"; font-size: 0.86em; }
.inline-zalo-btn.copy::before { content: "⧉"; font-size: 0.83em; background: #fbf1f8; }
.inline-zalo-btn.copy.is-copied { background: #f0fdf4; color: #bbf7d0; border-color: #bbf7d0; color: #166534; box-shadow: 0 0.55em 1.1em rgba(22, 163, 74, 0.14); }
.inline-zalo-btn.copy.is-copied::before { content: "✓"; font-size: 0.88em; background: #16a34a; color: #fff; }
.inline-zalo-note { color: #7c4a03; background: #fff7ed; border: 0.07em solid #fed7aa; border-radius: 0.78em; font-size: 0.68em; line-height: 1.45; padding: 0.62em 0.78em; display: flex; gap: 0.5em; align-items: flex-start; }
.inline-zalo-note strong { color: #c2410c; }
@media (max-width: 430px) {
.inline-zalo-actions { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
.card { grid-column: span 6; }
.wide { grid-column: span 6; }
}
@media (max-width: 680px) {
body { padding-top: 0; }
.topbar-inner { height: 56px; padding: 0; align-items: center; flex-direction: row; justify-content: space-between; }
.logo { font-size: 1.5rem !important; }
#products .container { width: min(100%, calc(100vw - 72px)); }
.grid { row-gap: 2.35em; }
.card { grid-column: span 12; }
.wide { grid-column: span 12; }
.contact-list { gap: 10px; }
.personal-list li { width: 100%; }
.confirm-toast { -webkit-backdrop-filter: blur(10px) saturate(1.15) !important; backdrop-filter: blur(10px) saturate(1.15) !important; will-change: transform, opacity; }
.confirm-toast { bottom: 20px; transform: translate(-50%, 22px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; background:
linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%),
rgba(15, 23, 42, 0.56); border-color: rgba(255,255,255,0.18); box-shadow: 0 10px 28px rgba(15,23,42,0.2); }
.confirm-toast.show { bottom: 20px; transform: translate(-50%, 0); opacity: 1; }
}
@media (max-width: 430px) {
.hero-box { width: auto; margin-left: 0; }
.title { font-size: clamp(1.62rem, 8.2vw, 2.2rem); margin-bottom: 12px; gap: 0.1em; }
.title-main,
.title-sub { gap: 0.22em; }
.hero p { font-size: 0.875em; line-height: 1.58; margin-bottom: 16px; }
.hero-cta-row { gap: 0.55em; flex-wrap: wrap; }
.hero-cta-row .chip.primary,
.hero-outline-btn { flex: 1 1 0; min-width: 0; min-height: 3.1em; padding: 0.72em 1em; font-size: 0.88em; line-height: 1.15; }
.hero-stat-top { gap: 6px; }
.hero-stat-avatars img { width: 16px; height: 16px; }
}
@media (max-width: 400px) {
.modal-actions { grid-template-columns: 1fr; }
}
.gmail-chip { display: inline-flex; align-items: center; gap: 4px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: 3px 9px 3px 5px; color: #15803d; font-size: 0.69em; font-weight: 600; white-space: nowrap; }
.gmail-upgrade-chip { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(180deg,#fef2f2 0%,#fff1f2 100%); border: 1px solid #fca5a5; border-radius: 999px; padding: 4px 10px 4px 7px; color: #b91c1c; font-size: 0.68em; font-weight: 700; white-space: nowrap; width: fit-content; }
.gmail-upgrade-chip svg { flex-shrink: 0; }
.product-section-label { display: flex; align-items: center; gap: 7px; font-size: 0.84em; font-weight: 800; color: #334155; letter-spacing: -0.01em; padding: 10px 2px 6px; flex-wrap: wrap; }
.product-section-label svg { flex-shrink: 0; color: #5b6ee1; }
.product-section-label.product-label-red svg { color: #b91c1c; }
.product-section-label.product-label-red { color: #7f1d1d; }
.product-section-sub { font-size: 0.82em; font-weight: 500; color: #64748b; letter-spacing: 0; }
.product-group-glass { border-radius: 1.75em; padding: 1em 1em 1em; background: rgba(248,250,255,0.9); border: 1px solid rgba(199,210,254,0.5); box-shadow: 0 2px 16px rgba(99,102,241,0.06); }
.product-group-glass.group-red { background: rgba(255,250,250,0.9); border-color: rgba(254,202,202,0.5); box-shadow: 0 2px 16px rgba(185,28,28,0.05); }
.product-group-glass .product-section-label { padding: 2px 2px 8px; }
.product-group-glass .grid { gap: 1em; }
.contact-box { background: linear-gradient(180deg, rgba(244,247,255,0.96) 0%, rgba(235,241,255,0.92) 100%); border: 1px solid rgba(199,210,254,0.65); border-radius: 1.125em; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-3d); }
.contact-box-label { font-size: 0.75em; font-weight: 700; color: #475569; text-align: left; }
.contact-box-main { display: flex; align-items: center; gap: 0.45em; flex-wrap: wrap; }
.contact-box-main .contact-box-label { margin: 0; }
.contact-box-number { color: #312e81; font-size: 0.88em; font-weight: 800; letter-spacing: -0.01em; }
.contact-box-actions { display: flex; align-items: center; gap: 0.55em; flex-wrap: wrap; width: 100%; }
.contact-box-actions .contact-cta { width: auto; min-width: 0; flex: 1 1 0; padding-left: 0.9em; padding-right: 0.9em; }
.contact-copy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-height: 2.95em; border-radius: 999px; border: 1px solid #dbe3f4; background: #fff; color: #3730a3; box-shadow: 0 0.3em 0.8em rgba(15,23,42,0.06); padding: 0.82em 0.95em; font-family: "Geist Sans", sans-serif; font-size: 0.82em; font-weight: 700; cursor: pointer; flex: 1 1 0; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.contact-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 0.45em 1em rgba(15,23,42,0.1); filter: brightness(1.02); }
.contact-copy-btn:active { transform: translateY(0); }
.contact-copy-btn.is-copied { background: #f0fdf4; border-color: #bbf7d0; color: #166534; box-shadow: 0 0.45em 1em rgba(22,163,74,0.12); }
.zalo-fallback { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5em 0.75em; background: linear-gradient(180deg, #eef2ff 0%, #e4def0 100%); border: 0.09em solid #8fa0ee; border-radius: 1em; padding: 0.56em 0.62em; box-shadow: 0 0.65em 1.5em rgba(102,126,234,0.16), 0 0.12em 0.3em rgba(15,23,42,0.08); }
.zalo-fallback-note { margin: 0; font-size: 0.69em; color: #334155; line-height: 1.45; text-align: left; flex: 1 1 11em; }
.zalo-fallback-note strong { color: #312e81; font-weight: 800; }
.zalo-copy-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999em; border: 0.07em solid #dbe3f4; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); color: #3730a3; font-size: 0.75em; font-weight: 700; font-family: "Geist Sans", sans-serif; padding: 0.56em 0.75em; cursor: pointer; width: fit-content; white-space: nowrap; flex: 0 0 auto; box-shadow: 0 0.45em 1.1em rgba(15,23,42,0.10), 0 0.1em 0.24em rgba(15,23,42,0.07); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.zalo-copy-btn:hover { filter: brightness(0.99); transform: translateY(-0.06em); box-shadow: 0 0.65em 1.35em rgba(15,23,42,0.14), 0 0.12em 0.3em rgba(15,23,42,0.08); }
.contact-zalo-box { margin-top: 0.75em; }
.contact-zalo-actions { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.zalo-open-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999em; border: 0; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; text-decoration: none; font-size: 0.75em; font-weight: 700; font-family: "Geist Sans", sans-serif; padding: 0.56em 0.9em; white-space: nowrap; box-shadow: 0 6px 16px rgba(102,126,234,0.30); }
.link-popup { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 1em; background: rgba(15, 23, 42, 0.62); backdrop-filter: blur(0.875em); -webkit-backdrop-filter: blur(0.875em); z-index: 160; }
.link-popup.open { display: flex; }
.link-popup-box { width: min(27em, calc(100vw - 2em)); background: #fff; border: 0.09em solid #cfd7f8; border-radius: 1.5em; box-shadow: 0 2em 5em rgba(15,23,42,0.22), var(--shadow-3d-strong); padding: 1em; display: grid; gap: 0.875em; }
.link-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; }
.link-popup-title { margin: 0; font-size: 1em; font-weight: 800; color: #0f172a; }
.link-popup-sub { margin: 0.25em 0 0; font-size: 0.75em; color: #64748b; line-height: 1.5; }
.link-popup-close { border: 0; background: #eef2ff; color: #5b6ee1; width: 2em; height: 2em; border-radius: 999em; cursor: pointer; font-size: 1em; font-weight: 800; flex-shrink: 0; }
.link-popup-list { display: grid; gap: 0.75em; }
.link-popup-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75em; align-items: center; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); border: 0.09em solid #dbeafe; border-radius: 1em; padding: 0.75em; }
.link-popup-icon { width: 2.5em; height: 2.5em; border-radius: 0.875em; display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 800; flex-shrink: 0; }
.link-popup-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-popup-info { min-width: 0; }
.link-popup-name { font-size: 0.81em; font-weight: 700; color: #0f172a; }
.link-popup-url { font-size: 0.69em; color: #64748b; margin-top: 0.2em; word-break: break-word; }
#zaloPopup .link-popup-url { font-weight: 800; color: #312e81; font-size: 0.8em; }
#zaloPopup { align-items: center; justify-content: center; padding: 1em; }
#zaloPopup .link-popup-box { width: min(29em, calc(100vw - 1.15em)); background: linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(246,248,255,0.985) 100%); color: #0f172a; border: 0.07em solid rgba(199, 210, 254, 0.82); border-radius: 1.6em; box-shadow: var(--shadow-3d-strong); padding: 0.9em 0.9em 1em; gap: 0.72em; transform: translateY(0.6em) scale(0.98); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; }
#zaloPopup.open .link-popup-box { transform: translateY(0) scale(1); opacity: 1; }
#zaloPopup .link-popup-box::before { content: none; }
#zaloPopup .link-popup-head { display: none; }
#zaloPopup .link-popup-list { gap: 0; }
#zaloPopup .link-popup-item { grid-template-columns: 1fr; gap: 0.72em; padding: 0.95em 0.98em; border-radius: 1.15em; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); border: 0.07em solid rgba(219, 234, 254, 0.95); box-shadow: inset 0 0 0 0.01em rgba(255,255,255,0.03); }
#zaloPopup .link-popup-row { display: flex; align-items: center; gap: 0.55em; flex-wrap: wrap; }
#zaloPopup .link-popup-name { font-size: 0.95em; color: #475569; font-weight: 800; }
#zaloPopup .link-popup-url { font-weight: 800; color: #5b6ee1; font-size: 1em; letter-spacing: -0.01em; margin-top: 0; }
#zaloPopup .link-popup-actions { display: flex; gap: 0.72em; flex-wrap: nowrap; align-items: center; }
#zaloPopup .link-popup-btn { min-height: 3.05em; padding: 0.58em 0.9em; font-size: 0.92em; font-weight: 800; border-radius: 999em; letter-spacing: -0.01em; box-shadow: 0 0.65em 1.35em rgba(37, 99, 235, 0.2); transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; flex: 1 1 0; }
#zaloPopup .link-popup-btn.open { min-width: 0; background: var(--grad-brand); box-shadow: var(--shadow-button); }
#zaloPopup .link-popup-btn.copy { border: 0.07em solid #dbe3f4; color: #3730a3; background: #ffffff; box-shadow: 0 0.3em 0.8em rgba(15,23,42,0.06); gap: 0.5em; }
#zaloPopup .link-popup-btn:hover { transform: translateY(-0.05em); filter: brightness(1.05); box-shadow: 0 0.7em 1.35em rgba(37, 99, 235, 0.3); }
#zaloPopup .link-popup-btn:active { transform: translateY(0); }
#zaloPopup .link-popup-btn.copy.is-copied { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
#zaloPopup .link-popup-note { color: #7c4a03; background: #fff7ed; border: 0.07em solid #fed7aa; border-radius: 1.05em; font-size: 0.75em; line-height: 1.5; padding: 0.78em 0.9em; }
#zaloPopup .link-popup-note strong { color: #c2410c; }
@media (max-width: 430px) {
#zaloPopup { padding: 0.72em; }
#zaloPopup .link-popup-box { width: calc(100vw - 1em); }
#zaloPopup .link-popup-btn { min-width: 0; font-size: 0.86em; }
}
.link-popup-actions { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; justify-content: flex-end; }
.link-popup-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999em; text-decoration: none; font-family: "Geist Sans", sans-serif; font-size: 0.72em; font-weight: 700; padding: 0.56em 0.8em; cursor: pointer; white-space: nowrap; }
.link-popup-btn.open { border: 0; color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-button); min-width: 4.1em; padding: 0.62em 0.95em; }
.link-popup-btn.copy { border: 0.07em solid #dbe3f4; color: #3730a3; background: #fff; box-shadow: 0 0.3em 0.8em rgba(15,23,42,0.08); }
.link-popup-note { display: flex; gap: 0.625em; align-items: flex-start; font-size: 0.72em; color: #475569; background: #fff7ed; border: 0.07em solid #fed7aa; border-radius: 1em; padding: 0.75em; line-height: 1.5; }
@media (max-width: 430px) {
}
@media (max-width: 430px) {
.link-popup-actions { flex-wrap: nowrap; }
.link-popup-btn { min-width: 0; }
}
.topbar-spacer { flex: 1; }
.glass-nav-pill { display: flex; align-items: center; gap: 4px; background: linear-gradient(160deg, rgba(255,255,255,0.72) 0%, rgba(230,235,255,0.52) 100%); backdrop-filter: blur(24px) saturate(2) brightness(1.04); -webkit-backdrop-filter: blur(24px) saturate(2) brightness(1.04); border: 1px solid rgba(255,255,255,0.82); border-radius: 999px; padding: 5px 6px; box-shadow:
0 2px 0 rgba(255,255,255,0.9) inset,
0 -0.5px 0 rgba(0,0,0,0.04) inset,
0 8px 28px rgba(79,70,229,0.13),
0 2px 8px rgba(15,23,42,0.09); }
.gnp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; font-family: "Geist Sans", sans-serif; font-size: 0.82em; font-weight: 600; color: var(--muted); background: transparent; border: none; cursor: pointer; transition: background 0.16s, color 0.16s; white-space: nowrap; touch-action: manipulation; }
.gnp-btn:hover { background: rgba(99,102,241,0.09); color: #5b6ee1; }
.gnp-btn svg { flex-shrink: 0; }
.gnp-btn.gnp-cta { background: var(--grad-brand); color: #fff; font-weight: 700; box-shadow: 0 3px 12px rgba(0,0,0,0.18); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; }
.gnp-btn.gnp-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.22); filter: brightness(1.07); }
.gnp-btn.gnp-cta:active { transform: translateY(0); }
@media (max-width: 400px) {
.gnp-btn:not(.gnp-cta) span.gnp-text { display: none; }
}
.mob-contact-icons { display: none; }
@media (max-width: 680px) {
.top-actions { display: none; }
.mob-contact-icons { display: flex; align-items: center; gap: 7px; }
.mob-icon { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(15,23,42,0.08); flex-shrink: 0; display: inline-flex; }
.mob-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
.modal-notice-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; width: 100%; background: linear-gradient(180deg, #fffbf0 0%, #fff8e8 100%); border: 1px solid #fde68a; border-radius: 1em; padding: 0.72em 1em; font-size: 0.81em; font-weight: 700; color: #92400e; font-family: "Geist Sans", sans-serif; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.modal-notice-btn:hover { transform: translateY(-1px); filter: brightness(0.98); }
.modal-notice-btn:active { transform: translateY(0); }
.modal-notice-inline { width: 100%; background: linear-gradient(180deg, #fffbf0 0%, #fff8e8 100%); border: 1px solid #fde68a; border-radius: 1em; padding: 0.8em 1em; margin-bottom: 10px; }
.modal-notice-inline-title { display: flex; align-items: center; gap: 0.45em; font-size: 0.78em; font-weight: 800; color: #92400e; margin-bottom: 6px; }
.modal-notice-inline ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.modal-notice-inline li { display: flex; align-items: flex-start; gap: 7px; font-size: 0.78em; color: #78350f; line-height: 1.45; }
.modal-notice-inline li .wn-dot { width: 0.4em; height: 0.4em; border-radius: 50%; background: #f59e0b; flex-shrink: 0; margin-top: 0.45em; }
.notice-item { display: flex; align-items: flex-start; gap: 7px; }
.notice-item-red .wn-dot { background: #dc2626 !important; }
.notice-item-body { min-width: 0; flex: 1; }
.notice-item-title { display: flex; align-items: center; gap: 0.34em; flex-wrap: wrap; font-weight: 700; color: #78350f; line-height: 1.45; }
.notice-item-title .badge-inline { margin: 0; }
.notice-item-sub { margin-top: 0.22em; padding-left: 0.02em; color: #92400e; font-size: 0.96em; line-height: 1.52; }
.contact-box-note { display: flex; align-items: flex-start; gap: 0.42em; font-size: 0.76em; color: #92400e; background: linear-gradient(180deg, #fffbf0 0%, #fff8e8 100%); border: 1px solid #fde68a; border-radius: 1em; padding: 0.78em 0.92em; margin-top: 0.62em; line-height: 1.45; font-weight: 700; }
.contact-box-note strong { color: #b45309; }
#productModal .contact-box-note { gap: 0.42em; font-size: 0.68em; padding: 0.72em 0.82em; margin-top: 0.42em; font-weight: 700; }
#productModal .contact-box-note strong { color: #b45309; }
.fb-mockup { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.fb-mockup:hover { transform: translateY(-0.06em); box-shadow: 0 10px 34px rgba(15,23,42,0.24); }
.cta-row--mt { margin-top: 14px; }
.hl { font-weight: 800; color: #5b6ee1; }
.topbar-spacer { flex: 1; }
.welcome-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 300; display: none; align-items: center; justify-content: center; padding: 1em; }
.welcome-overlay.open { display: flex; }
.welcome-box { width: min(26em, calc(100vw - 1.5em)); background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%); border: 1px solid rgba(199,210,254,0.7); border-radius: 1.6em; box-shadow: 0 2em 5em rgba(79,70,229,0.14), var(--shadow-3d-strong); transform: translateY(0.8em) scale(0.97); transition: transform 0.22s ease; max-height: calc(100dvh - 2em); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.welcome-overlay.open .welcome-box { transform: translateY(0) scale(1); }
.welcome-header { padding: 1em 1em 0.6em; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75em; }
.welcome-header-icon { width: 2.5em; height: 2.5em; border-radius: 0.75em; background: var(--grad-brand); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.welcome-header-text { flex: 1; min-width: 0; }
.welcome-title { margin: 0; font-size: 0.9em; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; line-height: 1.2; }
.welcome-sub { margin: 0.2em 0 0; font-size: 0.69em; color: #64748b; line-height: 1.4; }
.welcome-close { width: 1.875em; height: 1.875em; border-radius: 50%; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; font-size: 1em; font-weight: 700; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; line-height: 1; font-family: "Geist Sans", sans-serif; }
.welcome-close:hover { background: #f1f5f9; }
.welcome-body { padding: 0 1em 1em; display: grid; gap: 0.75em; }
.welcome-products { display: grid; gap: 0.75em; }
.welcome-product-marquee { position: relative; overflow: hidden; border-radius: 1.05em; border: 1px solid rgba(234,208,223,0.75); background: linear-gradient(180deg, #fff9fc 0%, #ffffff 100%); padding: 0.72em 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); }
.welcome-product-marquee::before,
.welcome-product-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.6em; z-index: 1; pointer-events: none; }
.welcome-product-marquee::before { left: 0; background: linear-gradient(90deg, rgba(255,249,252,1) 0%, rgba(255,249,252,0) 100%); }
.welcome-product-marquee::after { right: 0; background: linear-gradient(270deg, rgba(255,249,252,1) 0%, rgba(255,249,252,0) 100%); }
.welcome-product-track { display: flex; align-items: center; gap: 0.62em; width: max-content; padding: 0 0.72em; animation: welcomeMarquee 22s linear infinite; will-change: transform; }
.welcome-product-marquee:hover .welcome-product-track { animation-play-state: paused; }
@keyframes welcomeMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-50% - 0.31em)); }
}
.welcome-product-item { display: inline-flex; align-items: center; gap: 0.52em; min-width: max-content; background: linear-gradient(180deg, #ffffff 0%, #fff9fc 100%); border: 1px solid rgba(234,208,223,0.82); border-radius: 999px; padding: 0.42em 0.72em 0.42em 0.42em; box-shadow: 0 0.5em 1em rgba(210,153,194,0.10); }
.welcome-product-thumb { width: 1.85em; height: 1.85em; border-radius: 999px; object-fit: cover; display: block; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.88); box-shadow: 0 0.25em 0.7em rgba(15,23,42,0.12); background: #e2e8f0; }
.welcome-product-name { font-size: 0.72em; font-weight: 800; color: #1e293b; line-height: 1.2; white-space: nowrap; }
.welcome-attn-box { display: grid; gap: 0.62em; background: linear-gradient(180deg, #fffaf1 0%, #fff7e8 100%); border: 1px solid #fde68a; border-radius: 1.15em; padding: 0.82em 0.9em; box-shadow: 0 0.85em 1.8em rgba(245,158,11,0.10); }
.welcome-attn-head { display: flex; align-items: center; gap: 0.48em; font-size: 0.7em; font-weight: 800; color: #92400e; text-transform: uppercase; letter-spacing: 0.06em; }
.welcome-attn-grid { display: grid; gap: 0.58em; }
.welcome-attn-item { display: grid; grid-template-columns: auto 1fr; gap: 0.7em; align-items: start; background: rgba(255,255,255,0.66); border: 1px solid rgba(253,230,138,0.95); border-radius: 1em; padding: 0.8em 0.82em; }
.welcome-attn-icon { width: 2.1em; height: 2.1em; border-radius: 0.72em; display: grid; place-items: center; flex-shrink: 0; }
.welcome-attn-icon.red { background: rgba(254,226,226,0.95); color: #b91c1c; border: 1px solid rgba(252,165,165,0.7); }
.welcome-attn-icon.blue { background: rgba(251,241,248,0.95); color: #8b4d74; border: 1px solid rgba(232,191,215,0.75); }
.welcome-attn-title { font-size: 0.83em; font-weight: 800; line-height: 1.25; color: #0f172a; }
.welcome-attn-sub { margin-top: 0.16em; font-size: 0.73em; font-weight: 600; line-height: 1.45; color: #64748b; }
.welcome-notice { background: linear-gradient(180deg, #fffbf0 0%, #fffef8 100%); border: 1px solid #fde68a; border-radius: 1em; padding: 0.75em 0.875em; display: grid; gap: 0.5em; }
.welcome-notice-title { font-size: 0.66em; font-weight: 800; color: #92400e; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.4em; }
.welcome-notice-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45em; }
.welcome-notice-list li { display: flex; align-items: flex-start; gap: 0.45em; font-size: 0.72em; color: #78350f; line-height: 1.5; }
.welcome-notice-list li .wn-dot { width: 0.4em; height: 0.4em; border-radius: 50%; background: #f59e0b; flex-shrink: 0; margin-top: 0.45em; }
.badge-inline { display: inline-flex; align-items: center; justify-content: center; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 0.16em 0.6em; margin: 0 0.24em; font-size: 0.875em; font-weight: 800; line-height: 1.2; color: #065f46; white-space: nowrap; vertical-align: baseline; }
.badge-inline.red { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.welcome-contact-box { background: linear-gradient(180deg, #fbf1f8 0%, #fff8ec 100%); border: 1px solid #e8bfd7; border-radius: 1em; padding: 0.72em 0.875em; display: flex; align-items: center; justify-content: space-between; gap: 0.75em; flex-wrap: wrap; }
.welcome-contact-label { font-size: 0.63em; font-weight: 700; color: #475569; }
.welcome-contact-number { font-size: 0.9em; font-weight: 800; color: #7b4d6a; letter-spacing: -0.01em; }
.welcome-copy-btn { display: inline-flex; align-items: center; gap: 0.4em; border: 0; border-radius: 999px; padding: 0.5em 0.875em; background: var(--grad-brand); color: #fff; font-size: 0.72em; font-weight: 700; font-family: "Geist Sans", sans-serif; cursor: pointer; box-shadow: var(--shadow-3d); transition: transform 0.15s, filter 0.15s; white-space: nowrap; flex-shrink: 0; }
.welcome-copy-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.welcome-copy-btn:active { transform: translateY(0); }
.welcome-copy-btn.is-copied { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 4px 12px rgba(22,163,74,0.3); }
.welcome-proof-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  border: 1px solid rgba(74,222,128,0.22);
  border-radius: 999px;
  background: #181b22;
  color: var(--text);
  font-size: 0.8em;
  font-weight: 700;
  font-family: "Geist Sans", sans-serif;
  padding: 0.68em 0.9em;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.welcome-proof-btn:hover { transform: translateY(-1px); border-color: rgba(74,222,128,0.34); background: #1d212b; }
.welcome-proof-btn:active { transform: translateY(0); }
.welcome-proof-btn-dot {
  width: 0.58em;
  height: 0.58em;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0.2em rgba(74,222,128,0.14);
  flex-shrink: 0;
}
.welcome-proof-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #f0fdf4;
  font-size: 0.66em;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.18);
  animation: notifBadgePop 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(34,197,94,0.32);
}
.welcome-dismiss { width: 100%; border: 1px solid #f0d9e6; border-radius: 999px; background: #fff; color: #7b4d6a; font-size: 0.84em; font-weight: 700; font-family: "Geist Sans", sans-serif; padding: 0.72em; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.welcome-dismiss:hover { background: #fff8fc; border-color: #e8bfd7; }
.notif-bar { position: fixed; top: 68px; left: 0; right: 0; z-index: 99; display: flex; justify-content: center; padding: 6px 12px; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease; will-change: opacity, transform; }
.notif-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 680px) {
/* notif-bar top offset handled by fixed position rule above */
}
.notif-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.58em 1.15em; border-radius: 999px; font-family: "Geist Sans", sans-serif; font-size: 0.78em; font-weight: 700; color: #1e1b4b; cursor: pointer; background: linear-gradient(
180deg,
rgba(255,255,255,0.9) 0%,
rgba(246,248,255,0.84) 100%
); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: 1px solid rgba(255,255,255,0.88); box-shadow:
0 0.16em 0.42em rgba(255,255,255,0.92) inset,
0 1em 2.4em rgba(15,23,42,0.11),
0 0.24em 0.62em rgba(15,23,42,0.07); white-space: nowrap; min-height: 40px; position: relative; overflow: visible; animation: notifShake 1.8s ease-in-out infinite; }
@keyframes notifShake {
0%, 60%, 100% { transform: rotate(0deg); }
65% { transform: rotate(-3.5deg); }
70% { transform: rotate(3.5deg); }
75% { transform: rotate(-2.5deg); }
80% { transform: rotate(2.5deg); }
85% { transform: rotate(-1deg); }
90% { transform: rotate(1deg); }
95% { transform: rotate(0deg); }
}
.notif-btn:hover { transform: translateY(-0.06em); box-shadow:
0 0.16em 0.42em rgba(255,255,255,0.94) inset,
0 1.15em 2.7em rgba(15,23,42,0.13),
0 0.3em 0.74em rgba(15,23,42,0.08); filter: brightness(1.015); }
.notif-btn:active { transform: translateY(0); }
.notif-btn-badge { position: absolute; top: -0.55em; right: -0.1em; background: linear-gradient(135deg, #f43f5e, #ef4444); color: #fff; font-size: 0.52em; font-weight: 800; letter-spacing: 0.06em; padding: 0.18em 0.52em; border-radius: 999px; border: 1.5px solid #fff; white-space: nowrap; animation: notifBadgePop 2s ease-in-out infinite; box-shadow: 0 2px 8px rgba(244,63,94,0.45); pointer-events: none; line-height: 1.4; }
@keyframes notifBadgePop {
0%,100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
.notif-btn-dot { width: 0.45em; height: 0.45em; border-radius: 50%; background: #ef4444; flex-shrink: 0; box-shadow: 0 0 0 0.18em rgba(239,68,68,0.22); }

/* ── Product Card (horizontal) ── */
.pcard-list { display: flex; flex-direction: column; gap: 9px; }
.pcard {
  background: #ffffff; border: 1px solid #e8edf5; border-radius: 14px;
  padding: 13px 14px; cursor: pointer; overflow: hidden; position: relative;
  display: flex; flex-direction: column; gap: 0; min-width: 0;
  box-shadow: var(--shadow-3d);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.pcard:hover { border-color: #c7d2fe; transform: translateY(-1px); box-shadow: var(--shadow-3d-hover); }
.pcard-badge {
  position: absolute; top: 10px; right: 11px;
  font-size: 0.58em; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; line-height: 1.6; z-index: 2;
}
.pcard-top {
  display: flex; align-items: center; gap: 10px;
  padding-right: 72px; margin-bottom: 11px;
}
.pcard-ico {
  width: 42px; height: 42px; border-radius: 10px; object-fit: cover;
  border: 1px solid #e8edf5; background: #f8fafc; flex-shrink: 0; display: block;
}
.pcard-name { font-size: 0.88em; font-weight: 800; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.pcard-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-left: 52px; /* align under name: 42px ico + 10px gap */
}
.pcard-price-block { display: flex; flex-direction: column; gap: 2px; }
.pcard-price-val {
  font-size: 1.38rem; font-weight: 950; line-height: 1; letter-spacing: -0.04em;
  background: var(--grad-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pcard-price-mo {
  font-size: 0.46em; font-weight: 600; letter-spacing: 0;
  background: none; -webkit-text-fill-color: #94a3b8; color: #94a3b8;
}
.pcard-price-old { font-size: 0.68em; color: #a8b3c7; }
.pcard-price-old s { text-decoration: line-through #f87171; text-decoration-thickness: 1px; }
.pcard-cta {
  flex-shrink: 0; padding: 9px 20px;
  background: var(--grad-brand); color: #fff;
  font-size: 0.78em; font-weight: 700; font-family: "Geist Sans", sans-serif;
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.pcard-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-button-hover); filter: brightness(1.05); }
.pcard-cta:active { transform: none; filter: brightness(.96); }
/* keep grid layout for non-product cards in other sections */
#products .grid { display: none; }

/* ═══════════════════════════════════════════
   DARK YELLOW THEME OVERRIDE
   Appended — overrides light theme variables
   ═══════════════════════════════════════════ */

:root {
  --bg: #09090c;
  --panel: #111318;
  --surface2: #181b22;
  --line: rgba(255,255,255,0.08);
  --text: #f0f2f7;
  --muted: #6b7383;
  --brand: #d4a017;
  --brand-2: #f5e642;
  --y1: #f5e642;
  --y2: #d4a017;
  --ok: #4ade80;
  --danger: #f87171;
  --grad-brand: linear-gradient(135deg, #f5e642 0%, #d4a017 97%);
  --grad-brand-alt: linear-gradient(135deg, #f5e642 0%, #d4a017 97%);
  --grad-brand-soft: linear-gradient(135deg, rgba(245,230,66,0.12) 0%, rgba(212,160,23,0.12) 97%);
  --shadow-button: 0 0 20px rgba(232,217,78,0.30), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-button-hover: 0 0 32px rgba(232,217,78,0.50), 0 6px 16px rgba(0,0,0,0.4);
  --shadow-3d: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-3d-hover: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-3d-strong: 0 12px 32px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.3);
  --shadow: var(--shadow-3d);
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
}
body::before {
  background-image: none;
  background: radial-gradient(ellipse 90% 45% at 50% -5%, rgba(232,217,78,0.10) 0%, transparent 70%);
  -webkit-mask-image: none;
  mask-image: none;
}

/* ── Topbar ── */
.topbar {
  background: rgba(9,9,12,0.88);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.header-social-link {
  background: #181b22;
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
}
.header-social-link:hover {
  background: rgba(232,217,78,0.10);
  border-color: rgba(232,217,78,0.25);
  color: var(--y1);
  box-shadow: none;
}
.logo span {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* nav pill */
.glass-nav-pill {
  background: rgba(24,27,34,0.85);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.gnp-btn { color: var(--muted); }
.gnp-btn:hover { background: rgba(232,217,78,0.09); color: var(--y1); }
.gnp-btn.gnp-cta {
  background: var(--grad-brand);
  color: #0c0c0e;
  box-shadow: var(--shadow-button);
}
.gnp-btn.gnp-cta:hover { box-shadow: var(--shadow-button-hover); }

/* ── Hero ── */
.hero-box {
  background: transparent;
}
.hero-box::before, .hero-box::after { display: none; }
.kicker {
  background: rgba(232,217,78,0.10);
  border-color: rgba(232,217,78,0.28);
  color: var(--y1);
  box-shadow: none;
}
.kicker-dot { background: var(--y1); }
.title-main, .title-sub { color: var(--text); }
.title .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p { color: var(--muted); }
.hero-pill {
  background: rgba(232,217,78,0.10);
  border-color: rgba(232,217,78,0.25);
  color: var(--y1);
  box-shadow: none;
}
.hero-cta-row .chip.primary {
  background: var(--grad-brand);
  color: #0c0c0e;
  box-shadow: var(--shadow-button);
}
.hero-cta-row .chip.primary::before { display: none; }
.hero-cta-row .chip.primary:hover { box-shadow: var(--shadow-button-hover); }
.hero-outline-btn {
  background: rgba(24,27,34,0.8);
  border-color: rgba(232,217,78,0.28);
  color: var(--y1);
}
.hero-outline-btn:hover {
  background: rgba(232,217,78,0.08);
  border-color: rgba(232,217,78,0.45);
}

/* stats */
.hero-stat-card + .hero-stat-card::before { background: var(--line); }
.hero-stat-value {
  color: var(--y1);
  background: none;
  -webkit-text-fill-color: var(--y1);
}
.hero-stat-label { color: var(--muted); }

/* social chips */
.social-chip {
  background: #111318;
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
}
.social-chip:hover {
  background: rgba(232,217,78,0.08);
  border-color: rgba(232,217,78,0.28);
  color: var(--y1);
  box-shadow: none;
}

/* ── Section headings ── */
.section h2 {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Community ── */
.community-wrap {
  background: linear-gradient(135deg, #1a1e2a 0%, #131720 100%);
  border-color: rgba(232,217,78,0.15);
  color: var(--text);
  box-shadow: var(--shadow-3d-strong);
}
.community-wrap::before, .community-wrap::after { display: none; }
.community-note-bar {
  background: rgba(232,217,78,0.08);
  border-color: rgba(232,217,78,0.20);
}
.community-note-title { color: var(--y1); }
.community-note-sub { color: var(--muted); }
.fb-mockup { border-color: var(--line); box-shadow: var(--shadow-3d); background: #111318; }
.fb-cover { background: var(--grad-brand); }
.fb-info { border-color: var(--line); background: #111318; }
.fb-name { color: var(--text); }
.fb-meta { color: var(--muted); }
.fb-join-btn { color: #0c0c0e; box-shadow: var(--shadow-button); }
.fb-join-btn::before { display: none; }
.fb-post-line { background: var(--line); }
.community-card-link:hover .community-wrap { border-color: rgba(232,217,78,0.35); }

/* ── Product cards ── */
.pcard {
  background: #111318;
  border-color: var(--line);
  box-shadow: var(--shadow-3d);
}
.pcard:hover { border-color: rgba(232,217,78,0.28); box-shadow: var(--shadow-3d-hover); }
.pcard-ico { border-color: var(--line); background: #181b22; }
.pcard-name { color: var(--text); }
.pcard-price-val {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pcard-price-mo { -webkit-text-fill-color: var(--muted); color: var(--muted); background: none; }
.pcard-price-old { color: var(--muted); }
.pcard-cta { color: #0c0c0e; }

/* badges dark-adjusted */
.badge.green { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(34,197,94,0.25); box-shadow: none; }
.badge.red   { background: rgba(239,68,68,0.12);  color: #f87171; border-color: rgba(239,68,68,0.25); box-shadow: none; }

/* ── Dev / wide cards ── */
.wide.wide-code {
  background: linear-gradient(135deg, #1a1e2a 0%, #131720 60%, #1e2235 100%);
  border: 1px solid rgba(232,217,78,0.15);
}

/* ── Contact ── */
.contact-item {
  background: #111318;
  border-color: var(--line);
  color: var(--muted);
  box-shadow: var(--shadow-3d);
}
.contact-item:hover {
  background: rgba(232,217,78,0.08);
  border-color: rgba(232,217,78,0.28);
  color: var(--y1);
  box-shadow: var(--shadow-3d-hover);
}

/* ── Footer ── */
.footer { color: var(--muted); border-top: 1px solid var(--line); }

/* ── Modals ── */
.modal { background: rgba(0,0,0,0.75); }
.modal-box {
  background: #111318;
  border-color: var(--line);
  box-shadow: var(--shadow-3d-strong);
}
.modal-head {
  background: rgba(24,27,34,0.9);
  border-color: var(--line);
}
.modal-title { color: var(--text); }
.close-btn {
  background: #181b22;
  border-color: var(--line);
  color: var(--muted);
  font-family: "Geist Sans", sans-serif;
}
.close-btn:hover { color: var(--text); background: #1e2130; }
.modal-desc-wrap {
  background: rgba(232,217,78,0.05);
  border-color: rgba(232,217,78,0.15);
}
.modal-list { color: var(--muted); }
.modal-notice-inline {
  background: rgba(232,217,78,0.07);
  border-color: rgba(232,217,78,0.18);
}
.modal-notice-inline-title { color: var(--y1); }
.modal-notice-inline li { color: var(--muted); }
.notice-item-title { color: var(--y1); }
.notice-item-sub { color: var(--muted); }
.contact-box {
  background: #181b22;
  border-color: var(--line);
  box-shadow: none;
}
.contact-box-label { color: var(--muted); }
.contact-box-number { color: var(--y1); }
.contact-copy-btn {
  background: #111318;
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}
.contact-copy-btn:hover { color: var(--y1); border-color: rgba(232,217,78,0.28); }
.contact-copy-btn.is-copied { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.contact-cta.zalo { background: var(--grad-brand); color: #0c0c0e; box-shadow: var(--shadow-button); }
.contact-box-note {
  background: rgba(232,217,78,0.07);
  border-color: rgba(232,217,78,0.18);
  color: var(--muted);
}
.contact-box-note strong { color: var(--y1); }

/* inline zalo card */
.inline-zalo-card {
  background: #181b22;
  border-color: var(--line);
  box-shadow: var(--shadow-3d);
}
.inline-zalo-title { color: var(--text); }
.inline-zalo-sub { color: var(--muted); }
.inline-zalo-main { background: #111318; border-color: var(--line); }
.inline-zalo-label { color: var(--muted); }
.inline-zalo-value { color: var(--y1); }
.inline-zalo-btn.open { background: var(--grad-brand); color: #0c0c0e; box-shadow: var(--shadow-button); }
.inline-zalo-btn.copy { background: #111318; border-color: var(--line); color: var(--text); box-shadow: none; }
.inline-zalo-btn.copy.is-copied { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.inline-zalo-note { background: rgba(232,217,78,0.07); border-color: rgba(232,217,78,0.18); color: var(--muted); }
.inline-zalo-note strong { color: var(--y1); }

/* ── Welcome overlay ── */
.welcome-overlay { background: rgba(0,0,0,0.80); }
.welcome-box {
  background: linear-gradient(180deg, #111318 0%, #0d0f14 100%);
  border-color: rgba(232,217,78,0.15);
  box-shadow: var(--shadow-3d-strong);
}
.welcome-title { color: var(--text); }
.welcome-sub { color: var(--muted); }
.welcome-close { background: #181b22; border-color: var(--line); color: var(--muted); }
.welcome-close:hover { background: #1e2130; }
.welcome-header-icon { background: var(--grad-brand); }
.welcome-product-marquee {
  background: #181b22;
  border-color: var(--line);
}
.welcome-product-marquee::before { background: linear-gradient(90deg, #181b22 0%, transparent 100%); }
.welcome-product-marquee::after  { background: linear-gradient(270deg, #181b22 0%, transparent 100%); }
.welcome-product-item { background: #111318; border-color: var(--line); box-shadow: none; }
.welcome-product-name { color: var(--text); }
.welcome-attn-box {
  background: rgba(232,217,78,0.06);
  border-color: rgba(232,217,78,0.18);
  box-shadow: none;
}
.welcome-attn-head { color: var(--y1); }
.welcome-attn-item { background: rgba(255,255,255,0.03); border-color: rgba(232,217,78,0.12); }
.welcome-attn-icon.red { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.22); }
.welcome-attn-icon.blue { background: rgba(232,217,78,0.10); color: var(--y1); border-color: rgba(232,217,78,0.22); }
.welcome-attn-title { color: var(--text); }
.welcome-attn-sub { color: var(--muted); }
.welcome-notice { background: rgba(232,217,78,0.06); border-color: rgba(232,217,78,0.18); }
.welcome-notice-title { color: var(--y1); }
.welcome-notice-list li { color: var(--muted); }
.welcome-contact-box { background: #181b22; border-color: var(--line); }
.welcome-contact-label { color: var(--muted); }
.welcome-contact-number { color: var(--y1); }
.welcome-copy-btn { color: #0c0c0e; }
.welcome-proof-btn { background: #181b22; border-color: rgba(74,222,128,0.22); color: var(--text); }
.welcome-proof-btn:hover { background: #1e2130; }
.welcome-dismiss { background: #181b22; border-color: var(--line); color: var(--muted); }
.welcome-dismiss:hover { background: #1e2130; }
.badge-inline { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: #4ade80; }
.badge-inline.red { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.22); color: #f87171; }

/* ── Toasts ── */
.confirm-toast { background: rgba(17,19,24,0.92); border-color: rgba(255,255,255,0.12); }
.confirm-toast-label { color: var(--text); }
.confirm-toast-sub { color: var(--muted); }
.confirm-btn-yes { background: var(--grad-brand); color: #0c0c0e; box-shadow: var(--shadow-button); }
.confirm-btn-no { color: var(--muted); }

/* ── Zalo / comm popups ── */
.link-popup { background: rgba(0,0,0,0.78); }
#zaloPopup .link-popup-box,
.link-popup-title { color: var(--text); }
.link-popup-sub { color: var(--muted); }
.link-popup-close { background: #181b22; color: var(--y1); }
.link-popup-item { background: #181b22; border-color: var(--line); }
.link-popup-name { color: var(--text); }
.link-popup-url { color: var(--muted); }
#zaloPopup .link-popup-url { color: var(--y1); }
.link-popup-btn.open { background: var(--grad-brand); color: #0c0c0e; box-shadow: var(--shadow-button); }
.link-popup-btn.copy { background: #111318; border-color: var(--line); color: var(--text); box-shadow: none; }
.link-popup-btn.copy.is-copied { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.link-popup-note { background: rgba(232,217,78,0.07); border-color: rgba(232,217,78,0.18); color: var(--muted); }
.link-popup-note strong { color: var(--y1); }

/* notif bar */
.notif-btn {
  background: rgba(17,19,24,0.90);
  border-color: rgba(232,217,78,0.20);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.notif-btn:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.55); }
.notif-btn-badge { background: linear-gradient(135deg, #f43f5e, #ef4444); }

/* dev modal */
#devModal .modal-box { background: #111318; border-color: var(--line); }
.wlc-services .wlc-service-item {
  background: #181b22;
  border-color: var(--line);
  box-shadow: none;
}
.wlc-svc-name { color: var(--text); }
.wlc-svc-note { color: var(--muted); }
.personal-card {
  background: #181b22;
  border-color: var(--line);
  border-left-color: var(--y1);
}
.personal-title { color: var(--text); }
.personal-list { color: var(--muted); }
.personal-check { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.25); }
.product-group-glass {
  background: rgba(17,19,24,0.85);
  border-color: var(--line);
  box-shadow: none;
}
.product-group-glass.group-red { background: rgba(17,19,24,0.85); border-color: rgba(239,68,68,0.15); }
.product-section-label { color: var(--muted); }
.product-section-label svg { color: var(--y1); }
.product-section-label.product-label-red svg { color: #f87171; }

/* ═══════════════════════════════
   PATCH v2 — sync & fix remaining
   ═══════════════════════════════ */

/* social chips — tăng contrast */
.social-chip {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #c8cdd8 !important;
}
.social-chip span { color: #c8cdd8; }
.social-chip svg { color: #c8cdd8; }
.social-chip:hover {
  background: rgba(232,217,78,0.10) !important;
  border-color: rgba(232,217,78,0.30) !important;
  color: var(--y1) !important;
}
.social-chip:hover span,
.social-chip:hover svg { color: var(--y1); }

/* topbar social icons — tăng contrast */
.header-social-link {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #c8cdd8 !important;
}
.header-social-link:hover {
  color: var(--y1) !important;
  background: rgba(232,217,78,0.10) !important;
  border-color: rgba(232,217,78,0.25) !important;
}

/* section bar underline — đổi sang vàng */
.section-bar,
[class*="section-bar"] {
  background: var(--grad-brand) !important;
}
/* target the specific element used in repo */
.section-head > *:last-child {
  background: var(--grad-brand);
}

/* contact items — tăng contrast */
.contact-item {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #c8cdd8 !important;
}
.contact-item span { color: #c8cdd8; }
.contact-item svg { color: #c8cdd8; }
.contact-item:hover {
  background: rgba(232,217,78,0.08) !important;
  border-color: rgba(232,217,78,0.28) !important;
  color: var(--y1) !important;
}
.contact-item:hover span,
.contact-item:hover svg { color: var(--y1); }

/* comm popup items — đủ dark */

/* zalo popup items */
#zaloPopup .link-popup-item {
  background: #181b22 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
#zaloPopup .link-popup-box { background: #111318 !important; border-color: rgba(232,217,78,0.15) !important; }
#zaloPopup .link-popup-btn.open { background: var(--grad-brand) !important; color: #0c0c0e !important; }
#zaloPopup .link-popup-btn.copy {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #c8cdd8 !important;
}
#zaloPopup .link-popup-note {
  background: rgba(232,217,78,0.07) !important;
  border-color: rgba(232,217,78,0.18) !important;
  color: var(--muted) !important;
}
#zaloPopup .link-popup-note strong { color: var(--y1) !important; }

/* dev modal — wlc-services nền dark */
#devModal .modal-box { background: #111318 !important; border-color: var(--line) !important; }
#devModal .wlc-service-item {
  background: #181b22 !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
#devModal .wlc-svc-name { color: var(--text) !important; }
#devModal .wlc-svc-note { color: var(--muted) !important; }
/* "Xem chi tiết" accordion — đổi sang vàng */
#devModal [onclick="toggleDevDetail()"],
#devModal .modal-notice-btn,
.modal-notice-btn {
  background: rgba(232,217,78,0.07) !important;
  border-color: rgba(232,217,78,0.20) !important;
  color: var(--y1) !important;
}
/* accordion arrow */
#devDetailArrow { color: var(--y1) !important; }

/* contact-cta.tele — giữ xanh telegram, ok */
/* contact-cta.zalo — yellow */
.contact-cta.zalo { background: var(--grad-brand) !important; color: #0c0c0e !important; }

/* modal notice inline — bớt chói */
.modal-notice-inline {
  background: rgba(24,27,34,0.9) !important;
  border-color: rgba(232,217,78,0.18) !important;
}
.modal-notice-inline-title { color: var(--y1) !important; }
.modal-notice-inline li { color: var(--muted) !important; }
.modal-notice-inline li strong { color: var(--text) !important; }

/* notice items in product modal */
.notice-item-title { color: var(--text) !important; font-weight: 700; }
.notice-item-title .wn-dot { background: var(--y1) !important; }
.notice-item-sub { color: var(--muted) !important; }
.notice-item-red .notice-item-title { color: #f87171 !important; }

/* modal-desc-wrap — softer */
.modal-desc-wrap {
  background: rgba(24,27,34,0.85) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.modal-list { color: #b0b8c8 !important; }
.modal-list strong { color: var(--text) !important; }
.modal-list .badge-inline { vertical-align: middle; }

/* contact-box-note softer */
.contact-box-note {
  background: rgba(24,27,34,0.85) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--muted) !important;
}
.contact-box-note strong { color: var(--y1) !important; }

/* copy btn — tăng contrast */
.contact-copy-btn {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #c8cdd8 !important;
}
.contact-copy-btn:hover { color: var(--y1) !important; border-color: rgba(232,217,78,0.28) !important; }

/* close-btn tăng contrast */
.close-btn {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #c8cdd8 !important;
}
.close-btn:hover { color: var(--text) !important; background: #252933 !important; }

/* product group glass softer border */
.product-group-glass { border-color: rgba(255,255,255,0.07) !important; }
.product-group-glass.group-red { border-color: rgba(239,68,68,0.12) !important; }

/* ═══════════════════════════════════════════
   PATCH v3 — final color sync dark theme
   ═══════════════════════════════════════════ */

/* community note bar — already overridden but base had wrong warm amber */
.community-note-title { color: var(--y1) !important; }
.community-note-sub { color: var(--muted) !important; }
.community-note-ico { background: rgba(232,217,78,0.10) !important; color: var(--y1) !important; border: 1px solid rgba(232,217,78,0.18) !important; }

/* fb-post-avatar — was purple gradient, now subtle */
.fb-post-avatar { background: rgba(232,217,78,0.22) !important; }

/* pcard hover border — was old blue */
.pcard:hover { border-color: rgba(232,217,78,0.28) !important; }

/* kicker dot — sync to yellow */
.kicker-dot { background: var(--y1) !important; }

/* logo particles — synced to yellow brand at definition */

/* notice-item-title / sub in modals + welcome — was amber/brown from light */
.notice-item-title { color: var(--y1) !important; }
.notice-item-sub { color: var(--muted) !important; }
.notice-item-red .notice-item-title { color: #f87171 !important; }
.notice-item-red .wn-dot { background: #f87171 !important; }

/* modal-notice-inline base light colors → dark */
.modal-notice-inline-title { color: var(--y1) !important; }
.modal-notice-inline li { color: var(--muted) !important; }
.modal-notice-inline { background: rgba(232,217,78,0.06) !important; border-color: rgba(232,217,78,0.18) !important; }

/* modal-notice-btn (Xem chi tiết) */
.modal-notice-btn {
  background: rgba(232,217,78,0.08) !important;
  border-color: rgba(232,217,78,0.20) !important;
  color: var(--y1) !important;
}

/* welcome-notice base colors */
.welcome-notice-title { color: var(--y1) !important; }
.welcome-notice-list li { color: var(--muted) !important; }
.welcome-notice { background: rgba(232,217,78,0.06) !important; border-color: rgba(232,217,78,0.18) !important; }
.welcome-notice-list li .wn-dot { background: var(--y1) !important; }

/* welcome-attn-head */
.welcome-attn-head { color: var(--y1) !important; }

/* contact-box-note */
.contact-box-note {
  background: rgba(232,217,78,0.06) !important;
  border-color: rgba(232,217,78,0.18) !important;
  color: var(--muted) !important;
}
.contact-box-note strong { color: var(--y1) !important; }
#productModal .contact-box-note strong { color: var(--y1) !important; }

/* product-section-label */
.product-section-label { color: var(--muted) !important; }
.product-section-label svg { color: var(--y1) !important; }

/* modal-list */
.modal-list { color: var(--muted) !important; }
.modal-list strong { color: var(--text) !important; }

/* modal-contact-note */
.modal-contact-note {
  background: rgba(232,217,78,0.06) !important;
  border-color: rgba(232,217,78,0.14) !important;
  color: var(--muted) !important;
}

/* zalo-fallback-note */
.zalo-fallback-note { color: var(--muted) !important; }

/* wlc-cta-text */
.wlc-cta-text { color: var(--muted) !important; }

/* hl (highlight text) */
.hl { color: var(--y1) !important; }

/* personal-list dark */
.personal-list { color: var(--muted) !important; }

/* wn-dot in modals/welcome default */
.welcome-notice-list li .wn-dot,
.modal-notice-inline li .wn-dot { background: var(--y1) !important; }

/* fb-cover — already correct via .fb-cover override in dark, but ensure cm-bar too */
.cm-bar { background: var(--grad-brand) !important; }

/* ═══════════════════════════════════════════
   PATCH v4 — repo cleanup + requested UI adjustments
   ═══════════════════════════════════════════ */

html {
  background-color: #0a0a0a;
}

body {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle at 25% 25%, #222222 0.5px, transparent 1px),
    radial-gradient(circle at 75% 75%, #111111 0.5px, transparent 1px);
  background-size: 10px 10px;
  background-attachment: fixed;
  image-rendering: pixelated;
}

body::before {
  background-image: radial-gradient(ellipse 90% 45% at 50% -5%, rgba(232,217,78,0.1) 0%, transparent 70%);
  background-size: auto;
}

#products .container {
  width: min(1120px, calc(100vw - 72px));
}

.pcard-list {
  gap: 18px;
}

.pcard {
  padding: 18px 24px;
  border-radius: 20px;
}

.pcard-badge {
  top: 16px;
  right: 18px;
}

.pcard-top {
  gap: 14px;
  padding-right: 112px;
  margin-bottom: 16px;
}

.pcard-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.pcard-name {
  font-size: 0.98em;
}

.pcard-bottom {
  gap: 16px;
  padding-left: 62px;
}

.pcard-cta {
  padding: 12px 28px;
}

.modal-title-badge {
  margin-left: 0.48em;
  vertical-align: middle;
}

.notice-item-green .wn-dot {
  background: #4ade80 !important;
}

.notice-item-green .notice-item-title,
.notice-item-green .notice-item-sub,
.notice-item-green .badge-inline {
  color: #4ade80 !important;
}

.notice-item-green .badge-inline {
  border-color: rgba(34, 197, 94, 0.25) !important;
  background: rgba(34, 197, 94, 0.12) !important;
}

.notice-item-red .badge-inline.red {
  color: #f87171 !important;
}

#productNoticeBox {
  padding-top: 1em;
}

#productNoticeList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9em;
}

#productNoticeList .notice-item {
  margin: 0;
}

#communityPopup .link-popup-item {
  background: #181b22 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
#communityPopup .link-popup-box {
  width: min(24em, calc(100vw - 1.4em)) !important;
  padding: 0.82em !important;
  gap: 0.7em !important;
}
#communityPopup .link-popup-head {
  align-items: flex-start;
  gap: 0.65em;
}
#communityPopup .link-popup-title {
  font-size: 0.92em !important;
  line-height: 1.2;
}
#communityPopup .link-popup-sub {
  margin-top: 0.18em;
  font-size: 0.68em !important;
  line-height: 1.4;
}
#communityPopup .link-popup-name { color: var(--text) !important; font-weight: 800; }
#communityPopup .link-popup-url { color: var(--muted) !important; }
#communityPopup .link-popup-box { background: #111318 !important; border-color: rgba(232,217,78,0.15) !important; }
#communityPopup .link-popup-note {
  background: rgba(232,217,78,0.07) !important;
  border-color: rgba(232,217,78,0.18) !important;
  color: var(--muted) !important;
}
#communityPopup .link-popup-note strong { color: var(--y1) !important; }
#communityPopup .link-popup-btn.open { background: var(--grad-brand) !important; color: #0c0c0e !important; }
#communityPopup .link-popup-btn.copy {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #c8cdd8 !important;
}
#communityPopup .link-popup-dismiss {
  background: #1c1f28 !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--muted) !important;
}

@media (max-width: 680px) {
  #products .container {
    width: min(100%, calc(100vw - 32px));
  }

  .pcard-list {
    gap: 16px;
  }

  .pcard {
    padding: 16px 18px;
  }

  .pcard-top {
    padding-right: 0;
    gap: 12px;
    margin-bottom: 14px;
  }

  .pcard-badge {
    position: static;
    align-self: flex-start;
    margin-bottom: 12px;
  }

  .pcard-bottom {
    padding-left: 0;
    align-items: flex-end;
  }
}

/* ═══════════════════════════════
   PATCH v5 — final corrections
   ═══════════════════════════════ */

#contact .contact-list {
  background: transparent !important;
}

.badge.red,
.badge-inline.red,
.notice-item-red .badge-inline.red,
.welcome-notice .badge-inline.red {
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.42) !important;
  background: rgba(239,68,68,0.14) !important;
}

.notice-item-red .notice-item-title {
  color: #ef4444 !important;
}

.notice-item-red .wn-dot {
  background: #ef4444 !important;
}

.pcard {
  padding: 13px 14px !important;
  border-radius: 14px !important;
}

.pcard-badge {
  top: 10px !important;
  right: 11px !important;
}

.pcard-top {
  gap: 10px !important;
  padding-right: 72px !important;
  margin-bottom: 11px !important;
}

.pcard-ico {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
}

.pcard-name {
  font-size: 0.88em !important;
}

.pcard-bottom {
  gap: 10px !important;
  padding-left: 52px !important;
}

.pcard-cta {
  padding: 9px 20px !important;
}

@media (max-width: 680px) {
  #products .container {
    width: min(100%, calc(100vw - 40px)) !important;
  }

  .pcard-list {
    gap: 22px !important;
  }

  .pcard {
    padding: 13px 14px !important;
  }

  .pcard-top {
    padding-right: 72px !important;
    gap: 10px !important;
    margin-bottom: 11px !important;
  }

  .pcard-badge {
    position: absolute !important;
    align-self: auto !important;
    top: 10px !important;
    right: 11px !important;
    margin-bottom: 0 !important;
  }

  .pcard-bottom {
    padding-left: 52px !important;
    align-items: center !important;
  }
}

.hero-cta-row { margin-bottom: 0.9em !important; }
.hero-proof-row { margin-bottom: 2.25em; display: flex; justify-content: center; }
.hero-proof-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.68em;
  min-height: 2.7em;
  width: auto;
  max-width: min(100%, 24em);
  padding: 0.62em 1em;
  border-radius: 999px;
  border: 1px solid rgba(74,222,128,0.26);
  background: rgba(10,34,18,0.92);
  color: #dcfce7;
  font-size: 0.8em;
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 0 0 1px rgba(74,222,128,0.04) inset;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hero-proof-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(74,222,128,0.4);
  background: rgba(12,44,22,0.96);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), 0 0 0 1px rgba(74,222,128,0.06) inset;
}
.hero-proof-btn:active { transform: translateY(0); }
.hero-proof-btn-dot {
  width: 0.58em;
  height: 0.58em;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0.22em rgba(74,222,128,0.16);
  flex-shrink: 0;
}
.hero-proof-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.3em 0.74em;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #f0fdf4;
  font-size: 0.64em;
  font-family: inherit;
  font-weight: 720;
  line-height: 1.1;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  border: 1px solid rgba(255,255,255,0.18);
  animation: notifBadgePop 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(34,197,94,0.35);
}

#trustProofModal .modal-box { width: min(980px, calc(100vw - 32px)); }
#trustProofModal .modal-head {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.trust-proof-shell { display: grid; gap: 0.8em; }
.trust-proof-intro {
  margin: 0;
  color: var(--muted);
  font-size: 0.82em;
  line-height: 1.55;
}
.trust-proof-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.62em;
  max-height: 28em;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0.5em;
}
.trust-proof-thumb,
.trust-proof-more {
  position: relative;
  overflow: hidden;
  min-height: 8.2em;
  border-radius: 0.96em;
  border: 1px solid rgba(232,217,78,0.12);
  background: #181b22;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.trust-proof-thumb {
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.trust-proof-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(232,217,78,0.3);
  box-shadow: 0 14px 30px rgba(0,0,0,0.24);
}
.trust-proof-thumb.is-active {
  border-color: rgba(232,217,78,0.52);
  box-shadow: 0 0 0 1px rgba(232,217,78,0.18), 0 16px 34px rgba(0,0,0,0.26);
}
.trust-proof-thumb img,
.trust-proof-more img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.trust-proof-thumb-label,
.trust-proof-more-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.74em 0.78em;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,10,14,0.88) 100%);
  color: #fff;
}
.trust-proof-thumb-label { font-size: 0.7em; font-weight: 700; }
.trust-proof-more img {
  filter: blur(0.34em) saturate(0.84);
  transform: scale(1.08);
}
.trust-proof-more-overlay {
  top: 0;
  display: grid;
  align-content: end;
  gap: 0.26em;
}
.trust-proof-more-title {
  font-size: 0.9em;
  font-weight: 800;
  color: #fff;
}
.trust-proof-more-note {
  font-size: 0.74em;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
}
.trust-proof-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.72em;
  line-height: 1.5;
}

.trust-proof-viewer {
  position: fixed;
  inset: 0;
  z-index: 2001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2em;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.trust-proof-viewer.open { display: flex; }
.trust-proof-viewer-shell {
  position: relative;
  max-width: min(96vw, 980px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-proof-viewer img {
  max-width: 100%;
  max-height: 92vh;
  display: block;
  object-fit: contain;
  border-radius: 0.9em;
  box-shadow: 0 18px 48px rgba(0,0,0,0.42);
  background: #0f1115;
}
.trust-proof-viewer-close {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 2002;
  width: 2.25em;
  height: 2.25em;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.trust-proof-viewer-close:hover { background: rgba(255,255,255,0.18); }

@media (max-width: 680px) {
  .hero-proof-row { margin-bottom: 2em; }
  .hero-proof-btn {
    width: auto;
    max-width: min(100%, 20.5em);
    padding: 0.58em 0.88em;
    font-size: 0.78em;
  }
  .trust-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-proof-thumb,
  .trust-proof-more { min-height: 9.6em; }
}

@media (max-width: 480px) {
  .trust-proof-viewer { padding: 0.8em; }
  .trust-proof-viewer-close {
    top: 0.6em;
    right: 0.6em;
  }
}

/* ═══════════════════════════════════════
   PATCH v6 — UI fixes
   ═══════════════════════════════════════ */

/* notice-item-red sub text — same hue as badge */
.notice-item-red .notice-item-sub {
  color: rgba(248, 113, 113, 0.80) !important;
}

/* Warranty line — white text, BINGENZ.COM brand color */
.welcome-notice-list > li:first-child > span,
.welcome-notice-list > li:first-child {
  color: #f0f2f7 !important;
}
.welcome-notice-list > li:first-child strong {
  color: var(--y1) !important;
  -webkit-text-fill-color: var(--y1) !important;
}

/* pcard desktop — 2 col @≥768px, 3 col @≥1100px */
@media (min-width: 768px) {
  #productGrid .pcard-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
  #productGrid .pcard {
    height: 100% !important;
  }
}
@media (min-width: 1100px) {
  #productGrid .pcard-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* community popup — Zalo QR card */
.comm-zalo-card {
  margin-top: 0.2em;
  border-radius: 0.95em;
  background: #181b22;
  border: 1px solid rgba(232,217,78,0.18);
  overflow: hidden;
}
.comm-zalo-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.58em 0.78em 0.42em;
  font-size: 0.76em;
  font-weight: 700;
  color: var(--y1);
}
.comm-zalo-qr {
  display: block;
  width: 100%;
  max-width: 20em;
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}
.comm-zalo-hint {
  padding: 0.48em 0.78em 0.58em;
  font-size: 0.66em;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 430px) {
  #communityPopup .link-popup-box {
    width: calc(100vw - 0.9em) !important;
    padding: 0.72em !important;
  }
  #communityPopup .link-popup-item {
    padding: 0.68em !important;
  }
  #communityPopup .link-popup-actions {
    gap: 0.35em;
  }
  .comm-zalo-qr {
    max-width: 16.5em;
  }
}

/* scroll lock — prevents background scroll when popup is open */
body.scroll-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

#productGrid .pcard {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
            }

/* ── PERFORMANCE: reduce backdrop-filter on low-end / in-app browsers ── */
/* perf-lite: tắt blur trên persistent elements (topbar, notif) để tránh repaint liên tục */
/* KHÔNG tắt blur của modal/popup/overlay vì chúng chỉ render khi open */
.perf-lite .topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(9,9,12,0.97) !important;
}
.perf-lite .notif-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(17,19,24,0.97) !important;
}
.perf-lite .hero-outline-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Reduce heavy animation on low-end */
.perf-lite .logo-particle { animation: none !important; display: none !important; }
.perf-lite .welcome-product-track { animation-duration: 36s !important; }

/* ── FB IN-APP BROWSER: backdrop-filter hoạt động nhưng cần giảm tải ── */
.fb-inapp .topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(9,9,12,0.97) !important;
}
.fb-inapp .notif-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(17,19,24,0.97) !important;
}
.fb-inapp .hero-outline-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.88) !important;
}
/* Giảm blur strength cho modal/popup để nhẹ hơn nhưng vẫn có hiệu ứng */
.fb-inapp .modal {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.fb-inapp .link-popup {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.fb-inapp .welcome-overlay {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.fb-inapp .logo-particle { animation-duration: 3s !important; }

/* ── SCROLL-LOCK: khi topbar fixed, giữ đúng padding-top ── */
body.scroll-locked {
  padding-top: 68px; /* bù header fixed */
}

/* ── MOBILE: notif-bar top phải bám đúng topbar height ── */
@media (max-width: 680px) {
  .topbar-inner { height: 56px; }
  body { padding-top: 56px; }
  body.scroll-locked { padding-top: 56px; }
  .notif-bar { top: 56px; }
}

/* ── TIKTOK IN-APP BROWSER: position:fixed bị broken ── */
/* Fallback: dùng sticky cho topbar, notif-bar bám sau topbar tự nhiên */
.tiktok-browser .topbar {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
  will-change: auto !important;
  /* Tăng opacity để không cần blur */
  background: rgba(9,9,12,0.97) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.tiktok-browser body {
  padding-top: 0 !important;
}
.tiktok-browser body.scroll-locked {
  padding-top: 0 !important;
}
/* notif-bar: dùng sticky bám ngay dưới topbar (không dùng fixed nữa) */
.tiktok-browser .notif-bar {
  position: sticky !important;
  /* top được set bằng JS theo offsetHeight thực của topbar */
  top: 0 !important;
  transform: translateY(-8px);
  will-change: opacity, transform !important;
}
.tiktok-browser .notif-bar.visible {
  transform: translateY(0) !important;
}


/* ═══════════════════════════════════════════
   PATCH v7 — new social icon btn + contact pill + webview bg fix
   ═══════════════════════════════════════════ */

/* ── Ensure dark background always shows (FB/TikTok webview safety) ── */
html, body {
  background-color: #09090c !important;
}

/* ── Social strip — icon-only circles ── */
.social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1c1f28;
  border: 1px solid rgba(255,255,255,0.10);
  color: #8b939e;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
  flex-shrink: 0;
}
.social-icon-btn svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: currentColor;
}
.social-icon-btn:hover {
  color: var(--y1);
  background: rgba(232,217,78,0.10);
  border-color: rgba(232,217,78,0.28);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* ── Contact footer pill ── */
.contact-footer-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 16px;
  background: #111318;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  margin-top: 16px;
}
.cfp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 100px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #6b7383;
  font-size: 0.78em;
  font-weight: 600;
  font-family: "Geist Sans", sans-serif;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}
.cfp-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
.cfp-btn:hover {
  color: var(--y1);
  background: rgba(232,217,78,0.08);
}
.cfp-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .contact-footer-pill {
    border-radius: 20px;
    padding: 10px 12px;
    gap: 2px;
  }
  .cfp-btn {
    padding: 7px 10px;
    font-size: 0.74em;
    gap: 6px;
  }
  .cfp-dot { display: none; }
}


/* --- custom update: header social / social strip / professional card / modal layering --- */
.header-social {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #d4d9e3 !important;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.header-social-link svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: currentColor;
}
.header-social-link:hover {
  color: var(--y1) !important;
  transform: translateY(-1px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
@media (max-width: 680px) {
  .header-social {
    gap: 14px;
  }
  .header-social-link svg {
    width: 22px;
    height: 22px;
  }
}

.social-strip {
  padding-top: 10px;
  padding-bottom: 10px;
}
.social-strip-pill {
  margin-top: 0;
}

.modal {
  z-index: 1000 !important;
}
.topbar,
.notif-bar {
  z-index: 100 !important;
}

.fullhouse-card {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(180deg, rgba(17,19,24,0.96) 0%, rgba(24,27,34,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  box-shadow: var(--shadow-3d-soft);
}
.fullhouse-card-image {
  width: 100%;
  height: 100%;
  min-height: 180px;
  max-height: 220px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  border: 1px solid rgba(255,255,255,0.08);
}
.fullhouse-card-content {
  display: grid;
  gap: 12px;
}
.fullhouse-card-content h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.08em;
}
.fullhouse-card-content p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
  font-size: 0.92em;
}
.fullhouse-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 190px;
  padding: 0.9em 1.25em;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #0c0c0e;
  text-decoration: none;
  font-weight: 800;
  box-shadow: var(--shadow-button);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.fullhouse-card-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-button-hover);
  filter: brightness(1.03);
}
@media (max-width: 760px) {
  .fullhouse-card {
    grid-template-columns: 1fr;
  }
  .fullhouse-card-image {
    min-height: 170px;
    max-height: none;
  }
  .fullhouse-card-btn {
    width: 100%;
  }
}


/* --- fallback blur for TikTok in-app browser (perf-lite) --- */
/* Modal/popup blur được giữ nguyên để UX đúng */
/* Chỉ tăng opacity background một chút để rõ hơn nếu blur chậm */
.perf-lite .modal { background: rgba(10, 14, 28, 0.85) !important; }
.perf-lite .link-popup { background: rgba(10, 14, 28, 0.83) !important; }
.perf-lite .welcome-overlay { background: rgba(10, 14, 28, 0.82) !important; }

html.perf-lite.ui-obscured .topbar,
html.perf-lite.ui-obscured .notif-bar,
html.perf-lite.ui-obscured main,
html.perf-lite.ui-obscured .footer {
  filter: blur(7px) brightness(0.62);
  -webkit-filter: blur(7px) brightness(0.62);
  transform: translateZ(0);
  transition: filter 0.2s ease, -webkit-filter 0.2s ease;
  pointer-events: none;
  user-select: none;
}

html.perf-lite.ui-obscured .modal,
html.perf-lite.ui-obscured .link-popup,
html.perf-lite.ui-obscured .welcome-overlay {
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: auto;
}

html.tiktok-browser.ui-obscured .topbar,
html.tiktok-browser.ui-obscured .notif-bar,
html.tiktok-browser.ui-obscured main,
html.tiktok-browser.ui-obscured .footer {
  filter: blur(7px) brightness(0.62);
  -webkit-filter: blur(7px) brightness(0.62);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .modal,
  .link-popup,
  .welcome-overlay {
    background: rgba(2, 6, 16, 0.82) !important;
  }
      }



/* ═══════════════════════════════════════
   PATCH v7 — modal / popup lock + viewer layering
   ═══════════════════════════════════════ */
html.ui-obscured,
body.ui-obscured {
  overflow: hidden;
  overscroll-behavior: none;
}

body.scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.modal,
.link-popup,
.welcome-overlay,
.trust-proof-viewer {
  overscroll-behavior: contain;
  touch-action: none;
}

.modal.open,
.link-popup.open,
.welcome-overlay.open,
.trust-proof-viewer.open {
  pointer-events: auto;
}

.modal-box,
.link-popup-box,
.welcome-box,
.trust-proof-viewer-shell {
  touch-action: auto;
}

.modal,
.link-popup,
.welcome-overlay {
  z-index: 1000;
}

.welcome-overlay {
  z-index: 1200;
}

.link-popup {
  z-index: 1300;
}

#trustProofModal {
  z-index: 1400;
}

#trustProofViewer {
  z-index: 2001;
}