:root {
  --bg: #0b0f14;
  --panel: #10161d;
  --panel-2: #121a22;
  --line: #24313d;
  --line-2: #314353;
  --text: #f4f7fb;
  --muted: #9bb0c3;
  --blue: #4f86ff;
  --green: #2ecc71;
  --danger: #ef4444;
  --shadow: 0 12px 30px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #13253a 0%, #0a1017 38%, #080c12 100%); color: var(--text); font-family: Inter, system-ui, sans-serif; overflow-x:hidden; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 24px)); margin: 0 auto; position:relative; z-index:2; }
.tech-grid { position:fixed; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(79,134,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(79,134,255,.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at center, black 35%, transparent 90%); opacity:.22; }
.bg-orb { position:fixed; border-radius:50%; filter:blur(70px); opacity:.20; pointer-events:none; z-index:0; animation: floatOrb 10s ease-in-out infinite; }
.orb-1 { width:280px; height:280px; background:#3b82f6; top:60px; left:-60px; }
.orb-2 { width:220px; height:220px; background:#8b5cf6; top:240px; right:-50px; animation-delay: -3s; }
.orb-3 { width:180px; height:180px; background:#14b8a6; bottom:90px; left:20%; animation-delay: -6s; }
@keyframes floatOrb { 0%,100% { transform:translateY(0) translateX(0) scale(1); } 50% { transform:translateY(-18px) translateX(10px) scale(1.05); } }
.particles, .fireworks { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.particle { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35); box-shadow:0 0 12px rgba(255,255,255,.25); animation: rise linear infinite; }
@keyframes rise { from { transform:translateY(20px); opacity:0; } 10% { opacity:1; } to { transform:translateY(-110vh); opacity:0; } }
.mouse-spotlight { display:none; }
.header { position: sticky; top: 0; z-index: 20; background: rgba(9,13,18,.72); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(96,165,250,.10); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.header-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.header-logo { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #53a7ff, #7c3aed); color: white; font-weight: 800; box-shadow: 0 8px 20px rgba(79,134,255,.24); }
.shine { color: #eef6ff; }
.shop { color: #74b3ff; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.btn-text { color: #d4deea; font-size: 14px; }
.search-wrapper { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.search-wrapper input { width: 220px; border: 0; outline: 0; padding: 11px 12px; background: transparent; color: white; }
.icon-btn { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: white; min-width: 42px; height: 42px; border-radius: 12px; cursor: pointer; }
.search-wrapper .icon-btn { border: 0; border-left: 1px solid var(--line); border-radius: 0; }
#logo-hero { width: min(520px, calc(100% - 40px)); margin: 26px auto 18px; padding: 28px 22px; text-align: center; font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing:.3px; border-radius: 24px; border: 1px solid rgba(96,165,250,.18); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 22px 44px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05); text-shadow: 0 0 24px rgba(96,165,250,.10); overflow:hidden; }
.hero-media.fx-banner { position:relative; border-radius:18px; overflow:hidden; display:block; box-shadow: 0 20px 40px rgba(0,0,0,.28), 0 0 36px rgba(96,165,250,.12); }
.hero-media.fx-banner img { width:100%; max-height:220px; object-fit:cover; display:block; animation: heroFloat 6s ease-in-out infinite; }
.fx-shine { position:absolute; top:-20%; left:-30%; width:38%; height:140%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.26), rgba(255,255,255,0)); transform:rotate(18deg); animation: shineMove 3.8s linear infinite; }
.fx-glow { position:absolute; inset:auto 10% -24px 10%; height:54px; background:radial-gradient(circle, rgba(168,85,247,.30), rgba(59,130,246,.18), rgba(0,0,0,0) 70%); filter:blur(14px); }
.fx-spark { position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.8); animation: twinkle 2.4s infinite ease-in-out; }
.fx-spark.s1 { top:18%; left:12%; }
.fx-spark.s2 { top:26%; right:14%; animation-delay:.8s; }
.fx-spark.s3 { bottom:18%; left:22%; animation-delay:1.4s; }
@keyframes heroFloat { 0%,100% { transform:scale(1) translateY(0); } 50% { transform:scale(1.02) translateY(-3px); } }
@keyframes shineMove { 0% { left:-40%; } 100% { left:120%; } }
@keyframes twinkle { 0%,100% { opacity:.2; transform:scale(.8); } 50% { opacity:1; transform:scale(1.25); } }
.marquee-container { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.03); }
.marquee-content { display: inline-block; padding: 11px 0; color: #bfd4e8; animation: marquee 24s linear infinite; }
@keyframes marquee { from { transform: translateX(100%);} to { transform: translateX(-100%);} }
.main-content { padding: 20px 0 48px; }
.alert-bar { margin-bottom: 16px; padding: 13px 15px; border-radius: 16px; background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(124,58,237,.10)); border: 1px solid rgba(96,165,250,.22); color: #d8ebff; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.support-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.support-strip > div { padding:14px 16px; border:1px solid rgba(96,165,250,.14); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-radius:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.support-strip strong { display:block; margin-bottom:6px; }
.support-strip span { color:#9bb0c3; font-size:13px; }
.toolbar-row { display:flex; justify-content:flex-end; margin: 0 0 18px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.product-card { background: linear-gradient(180deg, rgba(18,25,35,.98), rgba(10,15,22,.98)); border: 1px solid rgba(123,162,255,.18); border-radius: 20px; overflow: hidden; cursor: pointer; box-shadow: 0 18px 35px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px rgba(0,0,0,.34), 0 0 0 1px rgba(118,156,255,.14); border-color: rgba(118,156,255,.28); }
.product-card::after { content:''; position:absolute; inset:-1px; border-radius:20px; padding:1px; background:linear-gradient(90deg, rgba(255,0,0,.65), rgba(255,165,0,.65), rgba(255,255,0,.65), rgba(0,255,0,.65), rgba(0,255,255,.65), rgba(0,0,255,.65), rgba(238,130,238,.65)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.product-thumb-wrap { position: relative; overflow:hidden; }
.product-thumb { height: 186px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; padding: 0; font-size: 21px; color: white; background: radial-gradient(circle at top, rgba(255,255,255,.14), rgba(255,255,255,0) 34%), linear-gradient(135deg, #121b25, #1c2b3a); position: relative; }
.product-thumb::before { content:''; position:absolute; left:14px; right:14px; top:12px; height:34%; border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); filter: blur(0.5px); pointer-events:none; }
.product-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%, rgba(255,255,255,0)); pointer-events:none; }
.product-thumb::before { opacity:.6; }
.product-thumb svg, .modal-image-container svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 26px rgba(0,0,0,.34)); }
.product-thumb img, .modal-image-container img { width: 100%; height: 100%; object-fit: cover; display:block; }
.product-info { padding: 12px 14px 15px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.product-title { min-height: 42px; font-size: 14px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; color: #eef5ff; }
.price-row { display: flex; justify-content: flex-end; gap: 6px; align-items: center; font-size: 12px; }
.price-prefix { color: #7f93a7; }
.product-price { color: #5df28f; font-weight: 900; text-shadow: 0 0 16px rgba(93,242,143,.18); }
.card-glow { position:absolute; left:50%; bottom:-28px; transform:translateX(-50%); width:72%; height:54px; border-radius:999px; background: radial-gradient(circle, rgba(79,134,255,.18), rgba(79,134,255,0) 70%); filter: blur(10px); pointer-events:none; }
.pause-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.pause-badge { background: rgba(24,24,24,.95); border: 1px solid rgba(255,255,255,.08); padding: 6px 10px; font-size: 11px; font-weight: 800; border-radius: 4px; }
.section-divider { text-align: center; margin: 28px 0 18px; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: #d6e1ed; font-size: 13px; }
.footer { border-top: 1px solid rgba(96,165,250,.10); padding: 22px 12px 34px; text-align: center; color: #95a8ba; font-size: 14px; background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.00)); }
.chat-widget-container { position: fixed; right: 18px; bottom: 18px; z-index: 40; }
.social-bubbles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; align-items: flex-end; }
.hidden { display: none; }
.bubble, .chat-widget { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px rgba(0,0,0,.28); font-weight: 800; }
.bubble.zalo { background: #0ea5e9; }
.bubble.telegram { background: #229ED9; }
.bubble.fb { background: #2563eb; }
.chat-widget { background: linear-gradient(135deg, #2f80ff, #60a5fa); font-size: 24px; cursor: pointer; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.68); display: none; align-items: center; justify-content: center; z-index: 50; padding: 18px; }
.modal-overlay.show { display: flex; }
.modal-content { width: min(980px, 100%); max-height: calc(100vh - 36px); overflow: hidden; background: linear-gradient(180deg, rgba(17,24,33,.98), rgba(11,17,24,.98)); border: 1px solid rgba(123,162,255,.20); border-radius: 22px; box-shadow: 0 26px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04); position: relative; display:flex; flex-direction:column; }
.contact-modal { width: min(420px, 100%); }
.contact-actions { padding: 0 22px 22px; display: grid; gap: 12px; }
.telegram-box { display:grid; grid-template-columns: 96px 1fr; gap:12px; align-items:center; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:14px; padding:12px; }
.telegram-box img { width:96px; height:96px; object-fit:cover; border-radius:12px; display:block; }
.telegram-meta { display:grid; gap:6px; }
.telegram-meta a { color:#93c5fd; word-break:break-all; }
.close-modal { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: white; cursor: pointer; }
.modal-header { padding: 20px 22px 0; }
.modal-header h2 { margin: 0; font-size: 28px; }
.modal-body { display: grid; grid-template-columns: 340px 1fr; gap: 24px; padding: 20px 22px 22px; overflow:auto; }
.modal-image-container { height: 300px; border-radius: 20px; background: radial-gradient(circle at top, rgba(255,255,255,.12), rgba(255,255,255,0) 36%), linear-gradient(135deg, #253445, #3e5873); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 30px; font-weight: 800; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.22); }
.modal-note-small { color: #93a8bb; font-size: 13px; line-height: 1.6; }
.info-box, .quantity-selector, .pricing-options, .total-price-area, .modal-footer-actions { margin-top: 16px; position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(17,24,33,0), rgba(17,24,33,.96) 26%); padding-top: 12px; }
.info-item { padding: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; }
.product-desc-list { color: #dce8f4; margin-top: 8px; line-height: 1.6; white-space: pre-line; }
.quantity-selector { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.qty-controls { display: flex; align-items: center; gap: 10px; }
.qty-controls button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: white; cursor: pointer; }
.discount-hint { color: #93c5fd; }
.pricing-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.price-option { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); cursor: pointer; transition: .2s ease; }
.price-option:hover { transform: translateY(-2px); border-color: rgba(123,162,255,.28); }
.price-option.selected { border-color: #4f86ff; background: linear-gradient(180deg, rgba(79,134,255,.22), rgba(79,134,255,.10)); box-shadow: 0 12px 24px rgba(79,134,255,.12); }
.badg-time { display: inline-block; margin-bottom: 8px; color: #cfe1ff; font-weight: 700; }
.price-val { font-size: 18px; font-weight: 800; }
.total-price-area { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.final-price { color: #4ade80; font-size: 24px; font-weight: 800; }
.support_note { color: #facc15; margin-bottom: 12px; font-size: 14px; }
.btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-outline, .btn-primary { border-radius: 12px; padding: 13px 14px; font-weight: 700; border: 1px solid var(--line); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.btn-outline { background: rgba(255,255,255,.04); color: #8ea4b8; }
.btn-primary { background: linear-gradient(135deg, #2563eb, #60a5fa); color: white; border: 0; }
.full { width: 100%; }
.small { padding: 8px 10px; }
.terms-shell { min-height: 100vh; padding: 28px 16px; background: var(--bg); }
.terms-card { width: min(980px, 100%); margin: 0 auto; background: #151d26; border: 1px solid var(--line-2); border-radius: 16px; padding: 34px; line-height: 1.75; }
.terms-card h1 { margin: 0 0 24px; font-size: 32px; }
.terms-card h2 { color: #60a5fa; margin-top: 26px; }
.terms-card p, .terms-card li { color: #d7e2ee; }
.tool-card { width: min(700px, 100%); }
.field-block { margin-top: 18px; }
.field-block label { display: block; margin-bottom: 10px; font-weight: 600; }
.field-block input, .admin-select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: white; }
.fake-code { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); font-size: 28px; text-align: center; letter-spacing: 6px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.admin-list-wrap { margin-top: 24px; }
.admin-list { display: grid; gap: 10px; }
.admin-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.admin-edit-block { display:grid; gap:8px; flex:1; }
.admin-image-row { display:grid; grid-template-columns: 92px 1fr; gap:10px; align-items:start; }
.admin-image-preview { width:92px; height:92px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.site-logo-preview-wrap { position:relative; }
.admin-image-controls { display:grid; gap:8px; }
.admin-edit-name, .admin-edit-price, .admin-edit-image, .admin-upload-image, .admin-edit-description { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:#fff; }
.admin-edit-description { min-height:88px; resize:vertical; }
.admin-actions-inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.admin-meta-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:#9fb3c8; font-size:13px; }
.status-badge-admin { padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.status-badge-admin.active { background:rgba(34,197,94,.14); color:#86efac; border:1px solid rgba(34,197,94,.25); }
.status-badge-admin.inactive { background:rgba(239,68,68,.14); color:#fca5a5; border:1px solid rgba(239,68,68,.25); }
.admin-edit-status { padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:#fff; }
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .nav-right { flex-wrap: wrap; justify-content: flex-end; } .search-wrapper input { width: 150px; } .product-grid { grid-template-columns: repeat(2, 1fr); } .modal-body { grid-template-columns: 1fr; } .admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .header-container { flex-direction: column; align-items: stretch; padding: 10px 0; } .logo { justify-content: center; } .nav-right { justify-content: center; } .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .product-thumb { height: 118px; font-size: 17px; } .modal-header h2, .terms-card h1 { font-size: 24px; } .terms-card { padding: 20px; } .modal-overlay { padding: 8px; } .modal-content { max-height: calc(100vh - 16px); border-radius: 16px; } .modal-body { gap: 16px; padding: 14px; } .modal-image-container { height: 200px; } .btn-group { grid-template-columns: 1fr; } .contact-actions { padding: 0 14px 14px; } }