/* ============================================================================ NUMERA — AI Intelligence Design System ---------------------------------------------------------------------------- Nguyên tắc: 1. Nền tối sâu, ba tầng bề mặt. Ánh sáng là thứ hiếm — chỉ xuất hiện ở nơi có dữ liệu quan trọng. 2. Vàng champagne KHÔNG phải màu trang trí. Nó chỉ đánh dấu: logo, hành động chính, và các chỉ số AI. Dùng quá tay là hỏng. 3. Chuyển động chậm và liên tục thay vì nhanh và giật. Cảm giác "đang xử lý" đến từ nhịp đều, không phải từ tốc độ. 4. Mọi con số hiển thị đều là số thật do engine tính ra. ============================================================================ */ /* ============================================================================ 1. TOKENS ============================================================================ */ :root { /* --- 1.1 Surfaces: bốn tầng độ sâu --- */ --bg-0: #0B0D10; /* nền trang, tầng sâu nhất */ --bg-1: #11151B; /* surface: panel, header */ --bg-2: #171C24; /* card */ --bg-3: #1D2430; /* elevated: hover, input, popover */ --bg-4: #242C3A; /* highest: active state */ /* --- 1.2 Borders --- */ --line: #2C323B; --line-2: #39414D; /* nhấn hơn, dùng khi hover */ --line-glow: rgba(214,178,94,.28); /* --- 1.3 Champagne Gold: màu thương hiệu, dùng rất tiết chế --- */ --gold: #D6B25E; --gold-2: #C8A54B; --gold-3: #EBD08A; /* sáng hơn, dùng cho hover */ --gold-4: #F5E4B8; /* sáng nhất, dùng cho chữ trên nền vàng đậm */ --gold-a08: rgba(214,178,94,.08); --gold-a14: rgba(214,178,94,.14); --gold-a24: rgba(214,178,94,.24); /* --- 1.4 Typography colors --- */ --white: #FFFFFF; --text: #ECF1F7; --text-2: #B7BEC8; --text-3: #7C8794; --text-4: #5A6472; /* caption mờ nhất */ /* --- 1.5 Semantic --- */ --ok: #2ECC71; --ok-a: rgba(46,204,113,.12); --info: #3BA7FF; --info-a: rgba(59,167,255,.12); --danger: #FF5B5B; --danger-a: rgba(255,91,91,.12); --warn: #F2B84B; --warn-a: rgba(242,184,75,.12); /* --- 1.6 Spacing: thang 4px --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* --- 1.7 Radius --- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px; /* --- 1.8 Shadow: mềm, khuếch tán, không có viền cứng --- */ --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 16px rgba(0,0,0,.34); --sh-3: 0 12px 40px rgba(0,0,0,.46); --sh-4: 0 24px 72px rgba(0,0,0,.56); --sh-gold: 0 0 0 1px var(--gold-a24), 0 8px 30px rgba(214,178,94,.14); --sh-inset: inset 0 1px 0 rgba(255,255,255,.04); /* --- 1.9 Motion --- */ --t-fast: .16s; --t-base: .25s; --t-slow: .45s; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* --- 1.10 Type --- */ --font: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Inter", "Helvetica Neue", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Lao UI", "Leelawadee UI", "Noto Sans Lao", "Phetsarath OT", Arial, sans-serif; --mono: "Cascadia Mono", "JetBrains Mono", "Consolas", ui-monospace, monospace; --wrap: 1240px; /* --- 1.11 Tương thích ngược: các bí danh mà mã cũ vẫn tham chiếu --- */ --bg: var(--bg-0); --surface: var(--bg-2); --surface-2: var(--bg-3); --line-soft: var(--line); --ink: var(--text); --gold-soft: var(--gold-a08); --jade: var(--ok); --amber: var(--warn); --red: var(--danger); --red-2: var(--danger); --red-soft: var(--danger-a); --radius: var(--r-md); --radius-sm: var(--r-sm); --shadow: var(--sh-1); --shadow-lift: var(--sh-3); } /* ============================================================================ 2. RESET & BASE ============================================================================ */ * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 15px; color: var(--text); background: var(--bg-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Lớp nền động — canvas neural network do ambient.js vẽ */ #ambient-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .85; } /* Lưới kỹ thuật số phía sau lớp node — gợi hệ toạ độ của một bảng điều khiển */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(44,50,59,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(44,50,59,.42) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(1200px 780px at 50% 22%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(1200px 780px at 50% 22%, #000 0%, transparent 78%); opacity: .5; } /* Lớp phủ làm dịu nền, giữ chữ luôn đọc được */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(1100px 620px at 50% -10%, rgba(214,178,94,.075), transparent 62%), radial-gradient(820px 520px at 92% 12%, rgba(59,167,255,.055), transparent 60%), linear-gradient(180deg, transparent 52%, rgba(11,13,16,.82) 100%); } body > * { position: relative; z-index: 2; } ::selection { background: var(--gold-a24); color: var(--white); } /* Thanh cuộn */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); border: 2px solid var(--bg-0); } ::-webkit-scrollbar-thumb:hover { background: var(--line-2); } a { color: var(--text); text-decoration: none; transition: color var(--t-base) var(--ease); } a:hover { color: var(--gold-3); } /* ============================================================================ 3. TYPOGRAPHY ============================================================================ */ h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--white); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } h1 { font-size: clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); } h3 { font-size: 1.06rem; letter-spacing: -.01em; } h4 { font-size: .94rem; } p { margin: 0 0 1em; color: var(--text-2); } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .small { font-size: .86rem; } .tiny { font-size: .76rem; line-height: 1.5; } .center { text-align: center; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .hidden { display: none !important; } .num, .stat .v, .panel-stat b { font-variant-numeric: tabular-nums; } /* Nhãn hệ thống: chữ hoa nhỏ, giãn cách rộng — ngôn ngữ của dashboard */ .eyebrow, .panel-title, .compose-label, .stat .k, thead th, .footer-grid h4, .panel-stat-label, label.field > span { font-size: .68rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } /* --- Điều chỉnh theo hệ chữ viết --------------------------------------- Nhãn hệ thống của bản Việt/Anh dùng chữ hoa và giãn cách rộng. Chữ Hán không có chữ hoa; chữ Lào có dấu chồng tầng nên giãn cách rộng sẽ tách rời dấu khỏi phụ âm. Hai hệ chữ này dùng quy tắc riêng. */ html[lang="zh"] .eyebrow, html[lang="lo"] .eyebrow, html[lang="zh"] .panel-title, html[lang="lo"] .panel-title, html[lang="zh"] .compose-label,html[lang="lo"] .compose-label, html[lang="zh"] .stat .k, html[lang="lo"] .stat .k, html[lang="zh"] thead th, html[lang="lo"] thead th, html[lang="zh"] .footer-grid h4, html[lang="lo"] .footer-grid h4, html[lang="zh"] .panel-stat-label, html[lang="lo"] .panel-stat-label, html[lang="zh"] label.field > span, html[lang="lo"] label.field > span, html[lang="zh"] .insight .k, html[lang="lo"] .insight .k, html[lang="zh"] .numset .set-name, html[lang="lo"] .numset .set-name, html[lang="zh"] .plan .tag-best, html[lang="lo"] .plan .tag-best, html[lang="zh"] .brand-sub, html[lang="lo"] .brand-sub { text-transform: none; letter-spacing: .02em; font-size: .72rem; } /* Chữ Lào cần nhiều khoảng thở theo chiều dọc cho dấu chồng tầng */ html[lang="lo"] body { line-height: 1.78; } html[lang="lo"] .chat-empty-title { line-height: 1.4; } html[lang="lo"] .insight .k, html[lang="lo"] .panel-stat span { line-height: 1.7; } html[lang="lo"] .panel-stat span { font-size: .62rem; } /* Chữ Hán không cần letter-spacing âm ở tiêu đề */ html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] .chat-empty-title { letter-spacing: 0; } .gold { color: var(--gold); } .grad-gold { background: linear-gradient(96deg, var(--gold-4), var(--gold) 42%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================================ 4. LAYOUT ============================================================================ */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-5); } .grid { display: grid; gap: var(--s-4); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); } .row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .row-between { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: var(--s-3); } .spacer { flex: 1; } section.block { padding: var(--s-12) 0; } section.block.tight { padding: var(--s-8) 0; } /* ============================================================================ 5. HEADER ============================================================================ */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(11,13,16,.72); backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; gap: var(--s-3); height: 64px; } .brand { display: flex; align-items: center; gap: var(--s-3); margin-right: var(--s-4); } .brand:hover { color: inherit; } .brand-logo-slot { display: flex; flex: none; } .brand-mark { width: 38px; height: 38px; flex: none; display: block; } /* Logo ảnh: bo tròn, viền vàng mảnh, quầng sáng rất nhẹ */ .brand-logo { width: 40px; height: 40px; flex: none; display: block; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--gold-a24), 0 0 18px rgba(214,178,94,.16); transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease-out); } .brand:hover .brand-logo { box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(214,178,94,.3); transform: scale(1.04); } .brand-name { font-weight: 680; font-size: 1.02rem; letter-spacing: .04em; line-height: 1.15; display: block; background: linear-gradient(100deg, var(--gold-4), var(--gold) 46%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-sub { display: block; font-size: .6rem; color: var(--text-3); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-top: 2px; } .nav-links { display: flex; gap: 2px; margin-left: auto; align-items: center; } .nav-links a { color: var(--text-2); padding: 7px 14px; border-radius: var(--r-full); font-size: .89rem; font-weight: 500; transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .nav-links a:hover { color: var(--white); background: var(--bg-3); } .nav-links a.active { color: var(--gold-3); background: var(--gold-a08); box-shadow: inset 0 0 0 1px var(--gold-a24); } /* Bộ chọn ngôn ngữ — bốn lựa chọn nên dùng danh sách thả xuống. Địa cầu là dấu hiệu quốc tế, không cần chữ "Ngôn ngữ" chiếm chỗ. */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--s-2) 0 var(--s-3); padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--bg-1); flex: none; cursor: pointer; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .lang-switch:hover { border-color: var(--gold-a24); background: var(--bg-2); } .lang-switch:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--gold-a08); } .lang-switch svg { width: 14px; height: 14px; flex: none; color: var(--text-4); } .lang-switch:hover svg { color: var(--gold-2); } .lang-switch select { width: auto; border: 0; background: none; padding: 5px 22px 5px 0; font: inherit; font-size: .78rem; font-weight: 550; color: var(--text-2); cursor: pointer; border-radius: 0; background-image: linear-gradient(45deg, transparent 50%, var(--text-4) 50%), linear-gradient(135deg, var(--text-4) 50%, transparent 50%); background-position: right 8px center, right 4px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .lang-switch select:hover, .lang-switch select:focus { border: 0; box-shadow: none; background-color: transparent; color: var(--white); } /* Danh sách bung ra do hệ điều hành vẽ — ép nền tối để không loá mắt */ .lang-switch option { background: var(--bg-2); color: var(--text); } @media (max-width: 960px) { .lang-switch { margin: var(--s-2) 0; align-self: flex-start; } } .nav-toggle { display: none; margin-left: auto; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-sm); padding: 7px 11px; cursor: pointer; font-size: 1.05rem; line-height: 1; } @media (max-width: 960px) { .nav-toggle { display: block; } .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg-1); border-bottom: 1px solid var(--line); padding: var(--s-3) var(--s-4) var(--s-4); box-shadow: var(--sh-3); } .nav-links.open { display: flex; } .nav-links .btn { width: 100%; justify-content: center; } } /* ============================================================================ 6. BUTTONS ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 9px 18px; border-radius: var(--r-full); border: 1px solid transparent; font: inherit; font-weight: 560; font-size: .89rem; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease); } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .38; cursor: not-allowed; transform: none; } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Primary — champagne gold, chữ đen */ .btn-primary { background: linear-gradient(135deg, var(--gold-3), var(--gold) 55%, var(--gold-2)); color: #14100A; font-weight: 620; box-shadow: 0 2px 12px rgba(214,178,94,.2); } .btn-primary:hover { background: linear-gradient(135deg, var(--gold-4), var(--gold-3) 55%, var(--gold)); box-shadow: 0 6px 22px rgba(214,178,94,.3); color: #14100A; } /* Secondary — nền tối, viền vàng */ .btn-gold { background: var(--gold-a08); border-color: var(--gold-a24); color: var(--gold-3); } .btn-gold:hover { background: var(--gold-a14); border-color: var(--gold); color: var(--gold-4); box-shadow: 0 4px 18px rgba(214,178,94,.12); } .btn-ghost { background: var(--bg-2); border-color: var(--line); color: var(--text-2); } .btn-ghost:hover { background: var(--bg-3); border-color: var(--line-2); color: var(--white); } .btn-danger { background: var(--danger-a); border-color: rgba(255,91,91,.3); color: var(--danger); } .btn-danger:hover { background: rgba(255,91,91,.2); border-color: var(--danger); } .btn-sm { padding: 5px 13px; font-size: .81rem; } .btn-lg { padding: 13px 28px; font-size: .98rem; } .btn-block { display: flex; width: 100%; } /* ============================================================================ 7. SURFACES — glass nhẹ, bo góc lớn, nổi lên khi hover ============================================================================ */ .card { background: linear-gradient(180deg, rgba(29,36,48,.72), rgba(23,28,36,.72)); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-2), var(--sh-inset); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .card:hover { border-color: var(--line-2); box-shadow: var(--sh-3), var(--sh-inset); } .card.lift:hover { transform: translateY(-3px); } .card-pad-sm { padding: var(--s-4); } .card h3 { margin-top: 0; } /* ============================================================================ 8. FORMS ============================================================================ */ label.field { display: block; margin-bottom: var(--s-4); } label.field > span { display: block; margin-bottom: var(--s-2); } input[type=text], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=email], select, textarea { width: 100%; padding: 10px 13px; font: inherit; font-size: .91rem; color: var(--text); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); outline: none; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease); } input::placeholder, textarea::placeholder { color: var(--text-4); } input:hover, select:hover, textarea:hover { border-color: var(--line-2); } input:focus, select:focus, textarea:focus { border-color: var(--gold-2); background: var(--bg-3); box-shadow: 0 0 0 3px var(--gold-a08); } textarea { resize: vertical; min-height: 88px; font-family: var(--mono); font-size: .84rem; } select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } input[type=checkbox], input[type=radio] { accent-color: var(--gold); width: 16px; height: 16px; } .checkline { display: flex; align-items: flex-start; gap: var(--s-2); font-size: .87rem; color: var(--text-2); margin-bottom: var(--s-3); } .checkline input { margin-top: 3px; flex: none; } /* ============================================================================ 9. BADGES & PILLS ============================================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: var(--r-full); font-size: .72rem; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--line); background: var(--bg-3); color: var(--text-2); } .badge-gold { background: var(--gold-a08); border-color: var(--gold-a24); color: var(--gold-3); } .badge-red { background: var(--danger-a); border-color: rgba(255,91,91,.3); color: var(--danger); } .badge-jade { background: var(--ok-a); border-color: rgba(46,204,113,.3); color: var(--ok); } .badge-amber { background: var(--warn-a); border-color: rgba(242,184,75,.3); color: var(--warn); } .badge-info { background: var(--info-a); border-color: rgba(59,167,255,.3); color: var(--info); } /* Chấm trạng thái đang hoạt động */ .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(46,204,113,.5); animation: pulse-dot 2.4s var(--ease) infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); } 70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } } /* ============================================================================ 10. DATA TOKENS — các con số được engine phân tích ------------------------------------------------------------------------ Không phải "quả bóng xổ số". Đây là các node dữ liệu trong đồ thị: viền mảnh, nền tối, chữ tabular. Node được engine đánh dấu thì sáng lên. ============================================================================ */ .balls { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } .ball { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; /* Tròn hẳn như quả cầu số thật (trước là bo góc vuông) — chủ web gửi ảnh chụp trang công bố chính thức của Vietlott (2026-09-05), muốn giao diện gần gũi, giống mắt khách đã quen nhìn thấy hơn. */ border-radius: 50%; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; background: var(--bg-1); color: var(--text); border: 2px solid var(--line-2); box-shadow: var(--sh-inset); transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease); } .ball:hover { border-color: var(--gold-a24); transform: translateY(-2px); } /* Node đặc biệt — đổi sang tông cam ấm (2026-09-05), giống đúng màu Vietlott dùng để làm nổi bật số đặc biệt trên trang công bố kết quả thật, thay vì xanh dương trung tính như trước — nhìn thân thiện, dễ nhận ra hơn. */ .ball.red { background: rgba(255,140,66,.16); border-color: rgba(255,140,66,.55); color: #FF9C55; } /* Node khớp với kết quả thực tế */ .ball.hit { background: linear-gradient(160deg, var(--gold-3), var(--gold) 60%, var(--gold-2)); color: #14100A; border-color: var(--gold-3); font-weight: 680; box-shadow: 0 0 18px rgba(214,178,94,.32); } .ball.red.hit { background: linear-gradient(160deg, #FFB877, #FF8C42 60%, #E5701F); color: #2A1204; border-color: #FFB877; box-shadow: 0 0 18px rgba(255,140,66,.35); } .ball.sm { width: 31px; height: 31px; font-size: .77rem; } .ball.lg { width: 48px; height: 48px; font-size: 1.08rem; } /* ---------------------------------------------------------------------------- Sản phẩm dạng chữ số (Max 3D, Max 3D Pro) — vòng tròn đỏ/chữ số xanh, đúng cách Vietlott công bố kết quả chính thức. Cố ý KHÔNG dùng tông NUMERA tối của .ball: mục tiêu là khách nhận ra ngay "giống hệt kết quả thật", nền trắng nhỏ đặt trong khung tối đọc như một mẩu vé thật, không phải lỗi theme. ---------------------------------------------------------------------------- */ .d3-groups { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Mỗi bộ số đóng thành một "viên nang" riêng — chỉ cách nhau bằng khoảng trắng thì 2 bộ liền kề dễ đọc nhầm thành một dãy 6 số. Viền + nền nhạt cho mắt bắt được ranh giới ngay, không cần đọc kỹ mới nhận ra có 2 cụm. */ .d3-group { display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: var(--r-full); background: var(--bg-2); border: 1px solid var(--line); } .d3-ball { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #FBFBF8; border: 2px solid #D2322A; color: #1650C8; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; } .d3-ball.sm { width: 27px; height: 27px; font-size: .8rem; border-width: 1.5px; } .d3-ball.lg { width: 42px; height: 42px; font-size: 1.1rem; border-width: 2.5px; } /* ============================================================================ 11. METER / PROGRESS ============================================================================ */ .meter { height: 5px; border-radius: var(--r-full); background: var(--bg-3); overflow: hidden; } .meter > i { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); transition: width var(--t-slow) var(--ease-out); } .meter.jade > i { background: linear-gradient(90deg, #1E9E58, var(--ok)); } /* ============================================================================ 12. TABLES ============================================================================ */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); } table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 560px; } thead th { text-align: left; padding: 11px 15px; background: var(--bg-1); white-space: nowrap; border-bottom: 1px solid var(--line); } tbody td { padding: 11px 15px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text-2); } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background var(--t-base) var(--ease); } tbody tr:hover { background: var(--gold-a08); } tbody tr:hover td { color: var(--text); } td.num { font-variant-numeric: tabular-nums; text-align: right; } /* ============================================================================ 13. STAT TILES ============================================================================ */ .stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); position: relative; overflow: hidden; transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out); } .stat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: var(--r-full); background: linear-gradient(180deg, var(--gold), transparent); opacity: .7; transition: opacity var(--t-base) var(--ease); } .stat:hover { border-color: var(--line-2); transform: translateY(-2px); } .stat:hover::before { opacity: 1; } .stat .v { font-size: 1.68rem; font-weight: 620; margin-top: 3px; color: var(--gold); line-height: 1.15; letter-spacing: -.02em; } .stat .d { font-size: .78rem; color: var(--text-3); } /* ============================================================================ 14. ALERTS ============================================================================ */ .alert { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: .87rem; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); margin-bottom: var(--s-4); border-left-width: 2px; } .alert b { color: var(--text); } .alert-warn { border-color: var(--line); border-left-color: var(--warn); background: var(--warn-a); color: #E8CE95; } .alert-warn b { color: var(--warn); } .alert-err { border-color: var(--line); border-left-color: var(--danger); background: var(--danger-a); color: #FFB3B3; } .alert-err b { color: var(--danger); } .alert-ok { border-color: var(--line); border-left-color: var(--ok); background: var(--ok-a); color: #A6E9C6; } .alert-ok b { color: var(--ok); } .alert-info { border-color: var(--line); border-left-color: var(--gold); background: var(--gold-a08); color: #E4D3AA; } .alert-info b { color: var(--gold-3); } /* ============================================================================ 15. TABS ============================================================================ */ .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow-x: auto; } .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-3); padding: 11px 15px; font: inherit; font-weight: 540; font-size: .89rem; cursor: pointer; white-space: nowrap; transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .tabs button:hover { color: var(--text); } .tabs button.active { color: var(--gold-3); border-bottom-color: var(--gold); font-weight: 620; } /* ============================================================================ 16. MODAL ============================================================================ */ .modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(5,7,10,.76); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: var(--s-5); animation: fade-in var(--t-base) var(--ease); } @keyframes fade-in { from { opacity: 0; } } .modal { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--sh-4), var(--sh-inset); animation: modal-in var(--t-slow) var(--ease-out); position: relative; } .modal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-a24) 30%, var(--gold-a24) 70%, transparent); } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } } .modal.wide { max-width: 760px; } .modal h3 { margin-top: 0; } /* ============================================================================ 17. TOAST ============================================================================ */ #toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 300; display: flex; flex-direction: column; gap: var(--s-2); } .toast { background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); border-left: 2px solid var(--gold); padding: 11px 17px; border-radius: var(--r-sm); font-size: .87rem; box-shadow: var(--sh-3); max-width: 340px; animation: toast-in var(--t-base) var(--ease-out); } .toast.err { border-left-color: var(--danger); } .toast.ok { border-left-color: var(--ok); } @keyframes toast-in { from { opacity: 0; transform: translateX(24px); } } /* ============================================================================ 18. FOOTER ============================================================================ */ .site-footer { border-top: 1px solid var(--line); margin-top: var(--s-16); padding: var(--s-10) 0; color: var(--text-3); font-size: .84rem; background: rgba(17,21,27,.6); backdrop-filter: blur(10px); } .site-footer a { color: var(--text-2); } .footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .footer-grid h4 { color: var(--text-3); margin-bottom: var(--s-3); } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); } /* ============================================================================ 19. PRICING ============================================================================ */ .plan { display: flex; flex-direction: column; position: relative; background: linear-gradient(180deg, rgba(29,36,48,.7), rgba(23,28,36,.7)); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .plan:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--sh-3); } .plan.featured { border-color: var(--gold-a24); box-shadow: var(--sh-gold); } .plan.featured:hover { border-color: var(--gold); } .plan .tag-best { position: absolute; top: -11px; right: 20px; background: linear-gradient(135deg, var(--gold-3), var(--gold-2)); color: #14100A; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--r-full); } .plan h3 { font-size: 1.05rem; margin-bottom: var(--s-1); } .plan .price { font-size: 2rem; font-weight: 620; color: var(--white); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .plan .per { font-size: .82rem; color: var(--text-3); font-weight: 500; } .plan ul { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-5); display: grid; gap: var(--s-2); font-size: .87rem; color: var(--text-2); } .plan ul li::before { content: "→"; color: var(--gold-2); margin-right: var(--s-2); font-size: .82em; } .plan .btn { margin-top: auto; } /* ============================================================================ 20. CONSOLE LAYOUT — ba cột: Signal · Console · Stream ============================================================================ */ /* Trung tâm là khu vực AI. Hai cột bên cố tình mỏng và mờ hơn để mắt người dùng rơi vào giữa trước tiên. */ .chat-layout { display: grid; grid-template-areas: "winners chat comments"; grid-template-columns: 236px minmax(0, 1fr) 260px; gap: var(--s-3); padding: var(--s-4) var(--s-5); max-width: 1780px; margin: 0 auto; height: calc(100vh - 64px); } .chat-layout > * { min-width: 0; } @media (max-width: 1280px) { .chat-layout { grid-template-areas: "winners chat" "comments comments"; grid-template-columns: 226px minmax(0, 1fr); grid-template-rows: minmax(460px, 1fr) auto; height: auto; min-height: calc(100vh - 64px); } .chat-main { min-height: 70vh; } #panel-comments .panel-body { max-height: 280px; } } @media (max-width: 920px) { .chat-layout { grid-template-areas: "chat" "winners" "comments"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: var(--s-3); } .chat-main { min-height: 76vh; } #panel-winners .panel-body { max-height: 320px; } } /* --- Panel chung --- */ .side-panel, .chat-main { display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-lg); overflow: hidden; } /* Khu vực AI: bề mặt sáng hơn, viền rõ hơn, có quầng sáng — đây là tâm điểm */ .chat-main { background: linear-gradient(180deg, rgba(29,36,48,.82), rgba(17,21,27,.88)); backdrop-filter: blur(20px); border: 1px solid var(--line-2); box-shadow: var(--sh-3), var(--sh-inset), 0 0 0 1px rgba(214,178,94,.06); } /* Hai cột bên: lùi hẳn về sau — nền mờ, viền nhạt, chữ nhỏ hơn */ .side-panel { background: rgba(17,21,27,.5); backdrop-filter: blur(12px); border: 1px solid rgba(44,50,59,.7); box-shadow: none; font-size: .93em; opacity: .88; transition: opacity var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .side-panel:hover { opacity: 1; border-color: var(--line); } #panel-winners { grid-area: winners; } #panel-comments { grid-area: comments; } .chat-main { grid-area: chat; } .panel-head, .chat-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); position: relative; } .chat-head { background: rgba(11,13,16,.45); } .panel-head { background: transparent; border-bottom-color: rgba(44,50,59,.7); } /* Vạch sáng chạy chậm — chỉ ở khu vực AI, để nó là chỗ duy nhất "đang sống" */ .chat-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-a24), transparent); background-size: 220% 100%; animation: scan-line 7s linear infinite; } @keyframes scan-line { from { background-position: 200% 0; } to { background-position: -100% 0; } } .panel-title { display: flex; align-items: center; gap: var(--s-2); color: var(--text-3); } .panel-title svg { width: 14px; height: 14px; flex: none; stroke: var(--gold-2); } .side-panel .panel-title { font-size: .64rem; color: var(--text-4); } .side-panel .panel-title svg { width: 12px; height: 12px; stroke: var(--text-4); } .chat-head .panel-title { font-size: .72rem; color: var(--gold-2); } .chat-head .panel-title svg { stroke: var(--gold); } .panel-toggle { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-4); font-size: 1rem; line-height: 1; padding: 2px 5px; border-radius: var(--r-xs); transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .panel-toggle:hover { color: var(--white); background: var(--bg-3); } .panel-body { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-4); min-height: 0; } .panel-foot { border-top: 1px solid var(--line); padding: var(--s-3) var(--s-4); background: rgba(11,13,16,.4); } .side-panel.collapsed .panel-body, .side-panel.collapsed .panel-foot { display: none; } .side-panel.collapsed { flex: 0 0 auto; align-self: start; } /* Trạng thái rỗng của cột bên: một dòng, không giải thích dài dòng */ .panel-empty { color: var(--text-4); font-size: .79rem; padding: var(--s-3) 0; line-height: 1.55; } .panel-empty p { margin: 0 0 var(--s-1); color: inherit; } .panel-empty b { color: var(--text-3); font-weight: 600; } /* Ghi chú rút ra từ dữ liệu — lấp chỗ trống bằng nội dung thật */ .insight { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid rgba(44,50,59,.6); } .insight:last-of-type { border-bottom: 0; } .insight .ico { flex: none; margin-top: 1px; color: var(--gold-2); opacity: .8; } .insight .ico svg { width: 14px; height: 14px; display: block; } .insight .body { min-width: 0; display: block; } .insight .k { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); font-weight: 650; line-height: 1.4; } .insight .v { display: block; font-size: .8rem; color: var(--text-2); margin-top: 3px; line-height: 1.5; } .insight .v b { color: var(--gold-3); font-weight: 600; font-variant-numeric: tabular-nums; } /* --- Bảng chỉ số trong panel --- */ .panel-stat-label { margin-bottom: var(--s-2); } .panel-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); margin-bottom: var(--s-3); } .panel-stat > div { min-width: 0; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-2) 2px; text-align: center; transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); } .panel-stat > div:hover { border-color: var(--gold-a24); background: var(--gold-a08); } .panel-stat b { display: block; font-size: 1.05rem; color: var(--gold); line-height: 1.2; } .panel-stat span { font-size: .64rem; color: var(--text-3); line-height: 1.2; display: block; white-space: nowrap; } /* ============================================================================ Danh sách người trúng — MỘT NGƯỜI MỘT DÒNG ---------------------------------------------------------------------------- Bản trước mỗi người là một thẻ cao khoảng 120px, nên cột chỉ chứa được 4–5 người. Nay mỗi dòng 34px: cùng chiều cao đó xem được gấp ba lần. Bộ số, kỳ quay và số khớp chuyển vào phần mở rộng — chúng chỉ cần khi người dùng thật sự muốn xem một người cụ thể. ============================================================================ */ /* --- Thanh tab lọc theo sản phẩm --- */ .win-tabs { display: flex; gap: 4px; margin-bottom: var(--s-2); /* Cột chỉ rộng ~240px. Nhiều sản phẩm thì cuộn ngang, KHÔNG xuống dòng: xuống dòng làm thanh tab cao dần và ăn mất chỗ của chính danh sách mà nó phục vụ. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .win-tabs::-webkit-scrollbar { height: 0; } .win-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-full); color: var(--text-3); font-family: inherit; font-size: .7rem; font-weight: 550; padding: 3px 9px; cursor: pointer; white-space: nowrap; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .win-tab:hover { border-color: var(--gold-a24); color: var(--text-2); } .win-tab.on { background: var(--gold-a16, rgba(214,178,94,.16)); border-color: var(--gold); color: var(--gold-3); } .win-tab i { font-style: normal; font-size: .62rem; opacity: .7; font-variant-numeric: tabular-nums; } /* --- Một dòng --- */ .win-list { display: flex; flex-direction: column; } /* Đo thực tế: cột trái rộng 236px, trừ viền và đệm của .panel-body còn 190px cho cả dòng. Mỗi pixel khe và đệm ở đây là một pixel bị lấy khỏi tên người — thứ quan trọng nhất trên dòng. Xem tests/win-measure.html để đo lại. */ .win-row { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 34px; padding: 5px 3px; background: none; border: 0; border-bottom: 1px solid rgba(44,50,59,.5); border-radius: var(--r-sm); font-family: inherit; font-size: .78rem; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease); } .win-row:hover { background: var(--gold-a08, rgba(214,178,94,.07)); } .win-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .win-row.open { background: var(--gold-a08, rgba(214,178,94,.07)); border-bottom-color: transparent; } .win-ico { flex: none; display: grid; place-items: center; color: var(--gold); opacity: .75; } .win-row.open .win-ico { opacity: 1; } /* Tên chiếm phần co giãn; min-width:0 cho phép nó cắt bớt bằng dấu … thay vì đẩy cột tiền ra khỏi khung. */ .win-name { /* flex-shrink 0: tên KHÔNG co. Tên người là thứ quan trọng nhất trên dòng — "Đ. T. Hi…" thì không biết là ai, còn "Mega 6/…" vẫn đoán ra được. Thiếu chỗ thì tên sản phẩm nhường, không phải tên người. max-width là chốt chặn cho những cái tên dài bất thường: hết 62% bề ngang thì tên mới bắt đầu cắt, thay vì đẩy cột tiền ra khỏi khung. */ flex: 1 0 auto; min-width: 0; max-width: 62%; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win-prod { flex: 0 1 auto; min-width: 0; color: var(--text-4); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win-money { flex: none; color: var(--gold); font-weight: 650; font-size: .715rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* --- Phần mở rộng khi bấm vào một dòng --- */ .win-detail { padding: 8px 8px 12px; margin-bottom: 4px; background: var(--bg-1); border: 1px solid var(--gold-a24); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); } .win-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-bottom: 8px; } .win-d-item { min-width: 0; } /* Tên sản phẩm đầy đủ chiếm cả hai cột: "Thừa Thiên Huế" hay "Max 3D Pro" không vừa nửa bề ngang, mà đây chính là chỗ duy nhất tên đầy đủ xuất hiện. */ .win-d-full { grid-column: 1 / -1; } .win-d-item span { display: block; font-size: .62rem; color: var(--text-4); line-height: 1.3; } .win-d-item b { font-size: .76rem; color: var(--text-2); font-weight: 600; } .win-d-balls { margin: 2px 0 8px; } .win-d-value { font-size: .72rem; color: var(--text-4); } .win-d-value b { color: var(--gold); font-size: .82rem; } /* --- Bình luận --- */ .cmt-item { border-bottom: 1px solid var(--line); padding: var(--s-3) 0; } .cmt-item:last-child { border-bottom: 0; } .cmt-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 3px; } .cmt-head b { font-size: .83rem; color: var(--text); } .cmt-del { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--text-4); font-size: .95rem; line-height: 1; padding: 0 3px; transition: color var(--t-base) var(--ease); } .cmt-del:hover { color: var(--danger); } .cmt-body { font-size: .85rem; color: var(--text-2); white-space: pre-wrap; word-break: break-word; } .panel-foot textarea { min-height: 52px; font-family: var(--font); font-size: .85rem; padding: 9px 11px; } /* ============================================================================ 21. CONSOLE — vùng hội thoại ============================================================================ */ .chat-scroll { flex: 1; overflow-y: auto; padding: var(--s-6) var(--s-5); min-height: 280px; background: radial-gradient(700px 260px at 50% 0%, rgba(214,178,94,.045), transparent 70%), linear-gradient(180deg, rgba(11,13,16,.28), transparent 120px); } .chat-inner { width: 100%; max-width: 800px; margin: 0 auto; } .msg { display: flex; gap: var(--s-3); margin-bottom: var(--s-6); animation: msg-in var(--t-slow) var(--ease-out); } @keyframes msg-in { from { opacity: 0; transform: translateY(8px); } } .msg .av { width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; margin-top: 1px; font-size: .74rem; font-weight: 700; } .msg.bot .av { background: var(--gold-a08); border: 1px solid var(--gold-a24); box-shadow: 0 0 16px rgba(214,178,94,.14); border-radius: 50%; overflow: hidden; } .msg.bot .av svg { width: 17px; height: 17px; stroke: var(--gold); } .msg.bot .av img { width: 100%; height: 100%; object-fit: cover; display: block; } .msg.me .av { display: none; } .msg .bubble { font-size: .93rem; max-width: 100%; color: var(--text-2); line-height: 1.5; } .msg .bubble b, .msg .bubble strong { color: var(--text); } .msg.bot .bubble { background: none; border: 0; padding: 0; } .msg.me { flex-direction: row-reverse; } .msg.me .bubble { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-xs) var(--r-lg) var(--r-lg); padding: 10px 16px; max-width: 76%; color: var(--text); } /* Ghi đè "p { margin: 0 0 1em }" chung của trang — trong khung chat, đoạn văn cách nhau 1em (~15px) làm vài dòng trả lời đã chiếm hết khung nhìn, khách phải cuộn liên tục để đối chiếu lại nội dung trước. */ .msg .bubble p { margin: 0 0 .5em; } .msg .bubble p:last-child { margin-bottom: 0; } .msg .bubble ul, .msg .bubble ol { margin: .4em 0; padding-left: 1.3em; } .msg .time { font-size: .68rem; color: var(--text-4); margin-top: var(--s-2); letter-spacing: .04em; } .msg.me .time { text-align: right; } .msg-feedback { display: flex; align-items: center; gap: 6px; margin-top: var(--s-2); flex-wrap: wrap; } .fb-btn { background: none; border: 1px solid transparent; cursor: pointer; font-size: .86rem; line-height: 1; padding: 3px 6px; border-radius: var(--r-sm); opacity: .55; transition: opacity var(--t-base) var(--ease), background var(--t-base) var(--ease); } .fb-btn:hover { opacity: 1; background: var(--bg-3); border-color: var(--line); } .msg-feedback-detail { margin-top: var(--s-2); } .msg-feedback-detail input[type="text"] { font-size: .82rem; padding: 5px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-2); color: var(--text-1); } /* --- Khối kết quả phân tích --- */ .numset { border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, var(--bg-2), rgba(17,21,27,.9)); padding: var(--s-3); margin: var(--s-2) 0; position: relative; overflow: hidden; transition: border-color var(--t-base) var(--ease); } .numset::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-a24) 50%, transparent); } .numset:hover { border-color: var(--line-2); } .numset .set-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); flex-wrap: wrap; } .numset .set-name { font-size: .66rem; font-weight: 650; color: var(--gold-2); letter-spacing: .16em; text-transform: uppercase; } .numset .why { font-size: .82rem; color: var(--text-3); margin-top: var(--s-3); line-height: 1.62; } /* --- Trạng thái rỗng: bảng điều khiển chờ lệnh --- */ .chat-empty { height: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-1); padding: var(--s-5); color: var(--text-3); } .chat-empty .mark { width: 84px; height: 84px; margin-bottom: var(--s-4); opacity: .95; } /* Ấn hiệu thương hiệu — lớn hơn ~35% so với bản trước, có quầng vàng phía sau. Nền đen của ảnh gốc đã được khoét trong suốt ngay trong tệp PNG. */ .chat-empty .mark.emblem { position: relative; width: 258px; height: auto; margin-bottom: var(--s-6); filter: drop-shadow(0 14px 46px rgba(214,178,94,.3)); } /* Quầng sáng phía sau, thở rất chậm */ .chat-empty .mark.emblem::before { content: ""; position: absolute; inset: -22%; background: radial-gradient(circle, rgba(214,178,94,.19) 0%, rgba(214,178,94,.07) 42%, transparent 68%); z-index: -1; border-radius: 50%; animation: emblem-glow 7s var(--ease) infinite; } @keyframes emblem-glow { 0%, 100% { opacity: .7; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } } .chat-empty .mark.emblem img { width: 100%; height: auto; display: block; } .chat-empty b { color: var(--text); font-size: .98rem; font-weight: 600; letter-spacing: -.01em; } .chat-empty p { margin: 0; font-size: .84rem; max-width: 46ch; color: var(--text-3); } /* Lời chào trong vùng hội thoại khi chưa có tin nhắn */ .chat-empty-title { margin: 0 0 var(--s-3); font-size: clamp(1.5rem, 1.1rem + 1.35vw, 2.25rem); font-weight: 700; line-height: 1.24; letter-spacing: -.025em; color: var(--white); text-wrap: balance; } .chat-empty-title .grad-gold { font-weight: 700; } .chat-empty-sub { margin: 0; font-size: clamp(.9rem, .84rem + .2vw, 1rem); color: var(--text-2); max-width: 34ch; line-height: 1.6; text-wrap: balance; } /* --- AI đang xử lý --- */ .thinking { display: flex; align-items: center; gap: var(--s-3); } .thinking .orbit { width: 20px; height: 20px; flex: none; } .thinking .orbit circle { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .35; } .thinking .orbit .sat { fill: var(--gold); stroke: none; opacity: 1; } .thinking .orbit g { transform-origin: 12px 12px; animation: spin 2.4s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .thinking-text { font-size: .85rem; color: var(--text-3); font-variant-numeric: tabular-nums; } .thinking-text .step { color: var(--gold-2); } .typing { display: inline-flex; gap: 4px; align-items: center; } .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: blink 1.4s var(--ease) infinite; } .typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; } @keyframes blink { 0%,60%,100% { opacity: .2; } 30% { opacity: 1; } } /* ============================================================================ 22. COMPOSER ============================================================================ */ .chat-compose { border-top: 1px solid var(--line); padding: var(--s-4) var(--s-6) var(--s-5); background: rgba(11,13,16,.5); } .compose-label { margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); } /* Ô nhập là điểm bắt đầu của mọi tương tác — nên nó phải là thành phần rõ ràng nhất ở nửa dưới màn hình: cao hơn, viền vàng thật, quầng sáng. */ .compose-row { display: flex; gap: var(--s-3); align-items: flex-end; border: 1.5px solid var(--gold-a24); border-radius: var(--r-xl); padding: 10px 10px 10px 22px; background: linear-gradient(180deg, rgba(29,36,48,.9), rgba(17,21,27,.95)); box-shadow: 0 0 0 1px rgba(214,178,94,.05), 0 6px 26px rgba(0,0,0,.34); transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease-out); } .compose-row:hover { border-color: rgba(214,178,94,.42); } .compose-row:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(214,178,94,.12), 0 0 34px rgba(214,178,94,.18), 0 10px 34px rgba(0,0,0,.4); transform: translateY(-1px); } .compose-row textarea { flex: 1; min-height: 40px; max-height: 200px; resize: none; font-family: var(--font); font-size: 1.02rem; line-height: 1.55; border: 0; padding: 8px 0; background: none; border-radius: 0; color: var(--text); } .compose-row textarea::placeholder { color: var(--text-3); } .compose-row textarea:hover, .compose-row textarea:focus { border: 0; box-shadow: none; background: none; } .compose-row .btn { border-radius: var(--r-full); width: 44px; height: 44px; padding: 0; flex: none; } .compose-row .btn svg { width: 18px; height: 18px; } #btn-attach { font-size: 1.1rem; position: relative; } /* Có ảnh đang chờ gửi — viền vàng + chấm nhỏ, bấm lại nút này để bỏ ảnh. */ #btn-attach.has-image { border-color: var(--gold); color: var(--gold); } #btn-attach.has-image::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: var(--r-full); background: var(--gold); border: 1.5px solid var(--bg-0); } .quick-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); } .chip { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-3); border-radius: var(--r-full); padding: 5px 13px; font-size: .79rem; cursor: pointer; font-family: inherit; transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-fast) var(--ease); } .chip:hover { background: var(--bg-3); border-color: var(--gold-a24); color: var(--gold-3); transform: translateY(-1px); } /* ---------------------------------------------------------------------------- Prompt mẫu (Quick Prompt) ---------------------------------------------------------------------------- Bấm là điền câu lệnh vào ô nhập, không gửi. Vì vậy chúng phải trông như "gợi ý để sửa tiếp", không như nút hành động — nền chìm, viền mảnh, chỉ sáng lên khi rê chuột. -------------------------------------------------------------------------- */ .qp { display: inline-flex; align-items: center; gap: 4px; /* Đệm ngang hẹp (7px) vì mỗi nút chỉ được 1/8 của 814px. Mỗi 1px đệm cắt đi 16px chỗ dành cho chữ — đủ để đẩy nhãn từ 2 dòng thành 3 dòng. */ padding: 7px; cursor: pointer; font-family: inherit; font-size: .73rem; font-weight: 500; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-full); transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-fast) var(--ease); } .qp:hover { background: var(--bg-3); border-color: var(--gold-a24); color: var(--gold-3); transform: translateY(-1px); } .qp:active { transform: translateY(0); } .qp:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .qp-ico { font-size: .8rem; line-height: 1; flex: none; } /* Nhãn để nguyên văn đầy đủ, dài thì gãy xuống dòng thứ hai NGAY TRONG nút. text-wrap:balance chia hai dòng cho đều nhau thay vì để dòng dưới trơ một chữ (trình duyệt cũ không hiểu thì vẫn gãy bình thường, chỉ kém cân đối). break-word là chốt chặn: gặp từ dài không có chỗ ngắt thì bẻ giữa từ, còn hơn để chữ tràn ra ngoài viền nút. */ .qp-txt { white-space: normal; text-wrap: balance; overflow-wrap: break-word; line-height: 1.2; text-align: left; min-width: 0; } /* Chưa phân tích được thể thức này — vẫn điền câu lệnh, nhưng nói trước */ .qp.soon { border-style: dashed; color: var(--text-4); } .qp.soon:hover { color: var(--text-3); border-color: var(--line-2); } /* Cả 8 nút trên MỘT hàng, không xuống dòng. overflow-x là van an toàn: khi khu vực hẹp tới mức nút chạm bề ngang tối thiểu (96px, xem bên dưới) thì hàng cuộn ngang, chứ không vỡ xuống dòng. Đệm dọc 2px chừa chỗ cho translateY(-1px) lúc rê chuột: overflow-x:auto kéo theo overflow-y:auto, thiếu chỗ là sinh thanh cuộn dọc thừa. */ .qp-row { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge cũ */ } .qp-row::-webkit-scrollbar { height: 0; } /* Tám nút CHIA ĐỀU bề ngang khu vực — mỗi nút 1/8, không nút nào tự nới theo độ dài chữ. Nhờ vậy hàng luôn vừa khít ở mọi bề ngang và mọi ngôn ngữ, thay vì phải đo lại chữ mỗi lần đổi nhãn. min-width:0 là bắt buộc: mặc định phần tử flex không co nhỏ hơn nội dung của nó, thiếu dòng này thì nhãn dài vẫn đẩy hàng tràn ra ngoài. 96px là SÀN: hẹp hơn nữa, nhãn đầy đủ gãy thành 3–4 dòng, nút cao lêu nghêu và còn khó đọc hơn cả chữ viết tắt. Chạm sàn rồi thì để hàng cuộn ngang — thà kéo sang phải còn hơn dồn chữ. */ .qp-row > .qp { flex: 1 1 0; min-width: 96px; } /* --- Bộ chọn tập dữ liệu --- */ .opt-bar { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); align-items: center; } .opt-pill { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-3); border-radius: var(--r-full); padding: 6px 18px; font: inherit; font-size: .84rem; font-weight: 540; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all var(--t-base) var(--ease); } .opt-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-4); transition: all var(--t-base) var(--ease); } .opt-pill:hover { border-color: var(--line-2); color: var(--text); } .opt-pill.on { background: var(--gold-a08); border-color: var(--gold-a24); color: var(--gold-3); } .opt-pill.on::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); } /* ---------------------------------------------------------------------------- Khối chọn loại xổ số ---------------------------------------------------------------------------- Chỉ là khu vực chọn sản phẩm nằm trên ô nhập. Nó phải gọn: mỗi pixel chiều cao ở đây là một pixel bị lấy mất của vùng hội thoại — thứ mà cả trang tồn tại vì nó. Viền vàng để rất nhạt, chỉ đủ tách khối khỏi nền. -------------------------------------------------------------------------- */ .opt-bar { display: block; margin-bottom: var(--s-3); } /* Dòng miễn trừ dưới ô nhập: nhỏ hơn .tiny chung. Nhắm riêng vào đây thay vì sửa .tiny — lớp đó dùng ở hàng chục chỗ khác, đổi nó là đổi cỡ chữ khắp website. */ /* Không đặt max-width ở đây: giới hạn bề rộng làm câu tràn xuống ba dòng, cao hơn cả lúc chữ còn to. Để nó dùng hết bề ngang thì vừa hai dòng. */ .chat-compose > .tiny { font-size: .68rem; line-height: 1.5; } /* Hai khung nằm cạnh nhau trên MỘT dãy ngang. Khung Vietlott rộng hơn vì có 5 nút; khung kiến thiết chỉ có 3. auto-fit + minmax để tự xuống dòng khi hẹp. */ /* Tỉ lệ 1.85 / 1.15 chứ không phải 1.55 / 1: khung Vietlott có 5 nút với ba nhãn "sắp có" nên cần khoảng 510px để nằm gọn một hàng, còn ba nút miền chỉ cần khoảng 275px. Chia đều hơn thì Vietlott rớt dòng trong khi khung bên cạnh vẫn thừa chỗ. */ .picker-card { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.15fr); gap: 8px; } .picker-box { min-width: 0; padding: 7px 10px 8px; border: 1px solid var(--gold-a14); border-radius: var(--r-md); background: radial-gradient(220px 90px at 10% 0%, rgba(214,178,94,.045), transparent 72%), rgba(17,21,27,.5); } .picker-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .56rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; color: var(--gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .picker-tag { flex: 0 0 auto; font-size: .5rem; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--text-4); border: 1px solid var(--line); border-radius: var(--r-full); padding: 0 5px; } .picker-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } /* Nút nhỏ lại để cả hai khung nằm gọn trên một dãy */ .picker-pills .opt-pill { min-height: 27px; padding: 0 9px; font-size: .71rem; gap: 4px; } .picker-pills .opt-pill::before { width: 4px; height: 4px; } /* Sản phẩm cho khách chọn 1 hay 2 bộ mỗi lượt (Max 3D / Max 3D+) — rê chuột hoặc chạm vào thẻ hiện menu nhỏ liệt kê rõ từng cách chơi, để khách biết trước khi phải tự gõ. :focus-within giữ menu mở được cả bằng bàn phím (Tab), không chỉ chuột. */ .opt-pill-wrap { position: relative; display: inline-block; } /* top:100% với KHÔNG margin — hộp chạm thẳng vào cạnh dưới nút, không để khoảng hở nào giữa nút và menu. Có khoảng hở thì chuột đi ngang qua đó bị tính là "ra khỏi vùng hover", menu tự đóng trước khi chạm tới (đúng lỗi CSS hover-gap kinh điển). Khoảng cách thị giác trước nút bên trong lấy từ padding-top, vẫn nằm TRONG vùng hover — không tạo khoảng hở thật nào. */ .opt-pill-flyout { position: absolute; top: 100%; left: 0; padding-top: 8px; z-index: 30; display: none; flex-direction: column; gap: 3px; min-width: 170px; background: var(--bg-2); background-clip: padding-box; border: 1px solid var(--line); border-radius: var(--r-md); padding-left: 6px; padding-right: 6px; padding-bottom: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.4); } .opt-pill-wrap:hover .opt-pill-flyout, .opt-pill-wrap:focus-within .opt-pill-flyout { display: flex; } .opt-pill-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; font-size: .74rem; white-space: nowrap; text-align: left; } .opt-pill-sub:hover, .opt-pill-sub:focus-visible { background: var(--gold-a08); border-color: var(--gold-a24); color: var(--gold-3); } .opt-pill-sub i { font-style: normal; color: var(--text-4); font-size: .68rem; } /* Chưa hỗ trợ: vẫn thấy được, nhưng rõ ràng là chưa dùng được */ .opt-pill.soon { color: var(--text-4); border-style: dashed; cursor: help; } .opt-pill.soon::before { background: var(--line-2); box-shadow: none; } .opt-pill.soon:hover { border-color: var(--line-2); color: var(--text-3); } /* "Sắp ra mắt" — quyết định CHỦ ĐỘNG của quản trị viên, khác .soon (chỉ vì chưa đủ dữ liệu). Tông vàng champagne để đọc là "sắp có, đang làm" chứ không phải "lỗi/chưa xong" — vẫn nhìn rõ (không mờ hẳn), chỉ khoá thao tác. */ .opt-pill.coming-soon { color: var(--gold-2); border-color: var(--gold-a24); border-style: dashed; background: var(--gold-a08); opacity: .9; cursor: not-allowed; } .opt-pill.coming-soon::before { background: var(--gold-2); box-shadow: none; } .opt-pill.coming-soon:hover { border-color: var(--gold); color: var(--gold-3); } .picker-tag-cs { color: var(--gold-2); border-color: var(--gold-a24); } /* Checklist trong hộp thoại "Sắp ra mắt" (picker.js comingSoonModal) */ .cs-checklist { margin: 10px 0 0; padding-left: 20px; color: var(--text-2); font-size: .86rem; line-height: 1.75; } /* Ô chọn tỉnh — chỉ hiện sau khi chọn miền, nằm ngay trong khung thứ hai */ .picker-prov[hidden] { display: none; } .picker-prov { margin-top: 5px; } .picker-select { display: block; } .picker-select select { width: 100%; min-height: 27px; padding: 0 8px; font: inherit; font-size: .72rem; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-full); cursor: pointer; } .picker-select select:hover { border-color: var(--line-2); } .picker-select select:focus { outline: none; border-color: var(--gold-2); } /* Hẹp dần: hai khung xếp chồng, nút co giãn đều, không tràn */ @media (max-width: 900px) { .picker-card { grid-template-columns: 1fr; } } @media (max-width: 560px) { .picker-pills .opt-pill { flex: 1 1 calc(50% - 3px); justify-content: center; padding: 0 6px; } } /* Chữ Hán và Lào không dùng chữ in hoa dàn cách */ html[lang="zh"] .picker-label, html[lang="lo"] .picker-label { text-transform: none; letter-spacing: .02em; font-size: .68rem; } /* ============================================================================ 23. ADMIN ============================================================================ */ .admin-shell { display: grid; grid-template-columns: 224px 1fr; gap: var(--s-6); padding: var(--s-6) var(--s-5); max-width: 1480px; margin: 0 auto; } @media (max-width: 960px) { .admin-shell { grid-template-columns: 1fr; } } .admin-side { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: 84px; } .admin-side a { padding: 8px 13px; border-radius: var(--r-sm); color: var(--text-3); font-size: .87rem; font-weight: 500; display: flex; gap: var(--s-3); align-items: center; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); } .admin-side a:hover { background: var(--bg-2); color: var(--text); } .admin-side a.active { background: var(--gold-a08); color: var(--gold-3); box-shadow: inset 0 0 0 1px var(--gold-a24); } @media (max-width: 960px) { .admin-side { flex-direction: row; overflow-x: auto; position: static; } } .log-line { font-family: var(--mono); font-size: .77rem; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--text-3); } .log-line b { color: var(--gold-2); font-weight: 500; } /* --- Heatmap --- */ .heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; } .heat > div { aspect-ratio: 1; border-radius: var(--r-xs); display: grid; place-items: center; font-size: .79rem; font-weight: 560; font-variant-numeric: tabular-nums; border: 1px solid rgba(255,255,255,.05); position: relative; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease); } .heat > div:hover { transform: scale(1.12); z-index: 2; box-shadow: 0 0 0 1px var(--gold-a24), var(--sh-2); } .heat > div small { position: absolute; bottom: 2px; font-size: .55rem; font-weight: 400; opacity: .7; } /* ============================================================================ 24. GỬI LỘC TUỲ TÂM — khối cuối cột trái ---------------------------------------------------------------------------- Nguyên tắc thị giác: sang nhưng KHÔNG được to tiếng hơn khu vực AI ở giữa. Vì vậy dùng vàng ở mức thấp nhất còn nhận ra được — một sợi viền, một tiêu đề, một nút. Không nền vàng đặc, không quầng sáng mạnh, không chuyển động thu hút mắt. Người dùng phải chủ động đọc mới thấy, chứ không bị nó chặn đường nhìn. ============================================================================ */ /* Vị trí: DÍNH ĐÁY cột, và THU GỌN ĐƯỢC ---------------------------------------------------------------------------- Đã thử hai cách trước khi chọn cách này. Cách 1 — dính đáy, luôn mở hết: khối cao khoảng 500px nên khi có nhiều người trúng, nó bóp danh sách xuống còn một hai dòng. Phần phụ lấn phần chính. Cách 2 — cho cả cột cuộn chung, khối nằm sau danh sách: với 26 người trúng thì khối trôi xuống quá 3.500px, coi như không ai thấy. Cách đang dùng: dính đáy nhưng gấp lại được. Gấp lại chỉ còn một dòng ~40px. Mở sẵn khi cột chưa có dữ liệu (đúng chỗ trống mà nó sinh ra để lấp), tự gấp khi cột đã đầy. Ai đã mở thì lần sau vẫn mở — lựa chọn được ghi nhớ. */ .panel-foot-tip { padding: 0; background: none; border-top: 0; flex: 0 0 auto; } .panel-foot-tip:empty { display: none; } /* Dòng tiêu đề bấm được để gấp / mở */ .tip-head { display: flex; align-items: center; gap: var(--s-3); width: 100%; margin: 0; padding: 0; cursor: pointer; background: none; border: 0; font-family: inherit; text-align: left; color: inherit; } .tip-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-xs); } .tip-chev { margin-left: auto; flex: 0 0 auto; color: var(--text-4); font-size: .8rem; line-height: 1; transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease); } .tip-head:hover .tip-chev { color: var(--gold-3); } .tip-card.open .tip-chev { transform: rotate(180deg); } .tip-body { display: none; margin-top: var(--s-3); } .tip-card.open .tip-body { display: block; } /* Khi gấp lại, khối chỉ còn đúng một dòng nên bỏ khoảng đệm dưới */ .tip-card:not(.open) { padding-bottom: var(--s-4); } /* Nền phải ĐỤC, không trong suốt: cột này cuộn, nên nền trong sẽ để nội dung phía trên chạy lộ qua sau lưng khối. */ .tip-card { position: relative; padding: var(--s-4) var(--s-4) var(--s-3); border-top: 1px solid var(--gold-a14); background: radial-gradient(220px 120px at 18% 0%, rgba(214,178,94,.07), transparent 72%), #12161C; } /* Sợi vàng mảnh chạy dọc mép trên — dấu hiệu "khác loại" với bảng kết quả phía trên, mà không cần thêm khung viền nào. */ .tip-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-a24) 22%, var(--gold-a24) 78%, transparent); } /* --- Đầu khối: emblem Thần Tài nhỏ + tiêu đề --- */ .tip-emblem { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-full); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 38%, rgba(214,178,94,.16), rgba(214,178,94,.04) 70%); box-shadow: inset 0 0 0 1px var(--gold-a24); } .tip-emblem img { width: 26px; height: 26px; object-fit: contain; display: block; } .tip-title { font-size: .78rem; font-weight: 650; letter-spacing: .01em; color: var(--gold-3); line-height: 1.3; } /* --- Lời mời --- */ .tip-lead { margin: 0 0 var(--s-2); font-size: .765rem; line-height: 1.62; color: var(--text-3); } .tip-lead-2 { color: var(--text-4); margin-bottom: var(--s-3); } /* --- Thông tin tài khoản --- */ .tip-info { border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(23,28,36,.6); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); } /* Nhãn trên, giá trị dưới. Trước đây hai cột cạnh nhau, nhưng cột bên chỉ rộng 226px: một cái tên như "TRAN DINH KHANH" bị ngắt thành hai dòng lệch phải, trông như lỗi. Xếp dọc thì đúng với cả bốn ngôn ngữ — tiếng Lào dài, tiếng Trung ngắn — mà không phải chỉnh riêng cho từng thứ tiếng. */ .tip-row { padding: 5px 0; } .tip-row + .tip-row { border-top: 1px solid rgba(44,50,59,.55); } .tip-k { display: block; font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-4); margin-bottom: 1px; } .tip-v { display: block; font-size: .8rem; font-weight: 560; line-height: 1.4; color: var(--text); word-break: break-word; } .tip-v.mono { font-family: var(--mono); letter-spacing: .05em; font-size: .86rem; color: var(--gold-3); font-variant-numeric: tabular-nums; } /* Dòng phụ, ví dụ tên chi nhánh dưới tên ngân hàng */ .tip-sub { display: block; font-size: .68rem; line-height: 1.45; color: var(--text-4); } /* Chữ Hán và Lào không dùng chữ in hoa dàn cách — xem mục i18n ở DESIGN-SYSTEM */ html[lang="zh"] .tip-k, html[lang="lo"] .tip-k { text-transform: none; letter-spacing: .02em; font-size: .7rem; } /* --- Nút sao chép --- */ .tip-copy { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--s-2); cursor: pointer; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--gold-a24); background: var(--gold-a08); color: var(--gold-3); font-family: inherit; font-size: .755rem; font-weight: 560; transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } .tip-copy:hover { background: var(--gold-a14); border-color: var(--gold-2); color: var(--gold-4); } .tip-copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .tip-copy svg { flex: 0 0 auto; } .tip-copy.done { background: rgba(126,217,166,.12); border-color: rgba(126,217,166,.4); color: #7ED9A6; } /* --- Mã QR --- Mã QR bắt buộc phải nằm trên nền sáng: máy quét đọc theo tương phản, đặt mã tối trên nền tối là quét không ra. Đây là chỗ duy nhất trong toàn bộ giao diện tối được dùng nền trắng, và đó là lý do kỹ thuật chứ không phải thẩm mỹ. */ .tip-qr { margin-top: var(--s-3); display: flex; flex-direction: column; align-items: center; gap: 6px; } .tip-qr-frame { padding: 6px; border-radius: var(--r-sm); background: #fff; box-shadow: 0 0 0 1px var(--gold-a24), 0 4px 18px rgba(0,0,0,.35); line-height: 0; } /* 132px: ảnh gốc 486px nên còn dư độ nét, và ở kích thước này mỗi module rộng khoảng 2,3px — đủ để điện thoại quét từ màn hình. Nhỏ hơn nữa thì bắt đầu khó bắt nét. */ .tip-qr-frame img { display: block; width: 132px; height: 132px; } .tip-qr-cap { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--text-4); } .tip-qr-cap svg { stroke: var(--gold-2); } .tip-qr-off { margin: 0; font-size: .72rem; line-height: 1.55; color: var(--text-4); text-align: center; } /* --- Dòng miễn trừ --- */ .tip-note { margin: var(--s-3) 0 0; padding-top: var(--s-2); border-top: 1px solid rgba(44,50,59,.5); font-size: .67rem; line-height: 1.55; color: var(--text-4); } /* Hai nút sao chép: số tài khoản và nội dung chuyển khoản. Tách riêng vì người ta cần dán chúng vào hai ô khác nhau trong ứng dụng ngân hàng — gộp một nút thì lần nào cũng phải sửa tay một nửa. XẾP DỌC, không nằm cạnh nhau. Đo thực tế trong cột 236px: đặt cạnh nhau thì mỗi nút chỉ được 63px trong khi nhãn "Sao chép số tài khoản" cần 139px — chữ bị cắt còn non một nửa, không đọc ra nút nào làm gì. */ .tip-copies { display: flex; flex-direction: column; gap: 6px; } .tip-copies .tip-copy { width: 100%; } .tip-copy-2 { border-color: var(--line); background: var(--bg-1); color: var(--text-3); } .tip-copy-2:hover { border-color: var(--gold-a24); background: var(--gold-a08); color: var(--gold-3); } .tip-copies .tip-copy span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Lời cảm ơn — tách khỏi dòng miễn trừ bên dưới, không có đường kẻ */ .tip-thanks { margin: var(--s-3) 0 0; font-size: .72rem; line-height: 1.5; color: var(--gold-3); text-align: center; } /* Chưa cấu hình tài khoản nhận tiền. KHÔNG tô vàng cảnh báo: đây không phải lỗi của người đang xem, và người dùng thường chẳng làm gì được với nó. Chỉ là một câu chữ mờ như mọi câu khác; riêng quản trị viên có thêm nút đi thẳng tới trang cấu hình. */ .tip-unset .tip-lead { margin-bottom: var(--s-3); } .tip-setup { text-decoration: none; /* Thẻ nên phải tự dựng lại phần canh giữa mà .tip-copy vốn có ở