/* Stock Analysis — giao diện (tách từ index.html) */
[x-cloak] { display: none !important; }
/* ═══════════════════════════════════════════════════════
Design tokens — flip toàn bộ màu chỉ bằng .dark class
═══════════════════════════════════════════════════════ */
:root {
--bg-page: #f1f5f9;
--bg-card: #ffffff;
--bg-raised: #f8fafc;
--bg-muted: #f1f5f9;
--bg-input: #ffffff;
--bg-hover: #f1f5f9;
--border: #e2e8f0;
--border-sub: #f1f5f9;
--text-1: #0f172a;
--text-2: #475569;
--text-3: #94a3b8;
--text-4: #cbd5e1;
--accent: #0f766e;
--accent-2: #16a34a;
--accent-dim: rgba(15,118,110,0.11);
--accent-text: #0f766e;
--shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
}
.dark {
--bg-page: #0d1422;
--bg-card: #131d2e;
--bg-raised: #18253a;
--bg-muted: #1d2b43;
--bg-input: #0f1a2b;
--bg-hover: #1c2b43;
--border: #2a3c5a;
--border-sub: #22334d;
--text-1: #e7eefb;
--text-2: #c1cde0;
--text-3: #95a6bf;
--text-4: #6f8099;
--accent: #22d3ee;
--accent-2: #34d399;
--accent-dim: rgba(34,211,238,0.13);
--accent-text: #67e8f9;
--shadow-card: 0 14px 34px rgba(2,8,23,0.34), 0 1px 0 rgba(255,255,255,0.03) inset;
}
/* ── Base ─────────────────────────────────────────────── */
html {
background: var(--bg-page);
color-scheme: light;
transition: background-color 0.25s ease;
}
html.dark {
color-scheme: dark;
}
body {
background: var(--bg-page);
color: var(--text-1);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
transition: background-color 0.25s ease, color 0.2s ease;
}
.dark body {
background:
radial-gradient(1200px 360px at 50% -120px, rgba(56,189,248,0.12), transparent 60%),
linear-gradient(180deg, rgba(14,23,39,0.98) 0%, rgba(13,20,34,1) 24rem),
var(--bg-page);
}
/* ── Components ───────────────────────────────────────── */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: var(--shadow-card);
transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.55rem 1rem; border-radius: 0.625rem;
font-weight: 650; font-size: 0.875rem;
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
cursor: pointer; border: 1px solid transparent;
letter-spacing: 0;
}
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn:disabled,
button:disabled {
cursor: not-allowed;
filter: saturate(0.75);
}
.btn-primary {
background: linear-gradient(135deg, #0f766e 0%, #059669 58%, #16a34a 100%);
color: #fff;
border-color: rgba(255,255,255,0.18);
box-shadow: 0 1px 3px rgba(15,118,110,0.28), 0 0 0 1px rgba(15,118,110,0.14);
}
.btn-primary:hover {
background: linear-gradient(135deg, #0d9488 0%, #10b981 58%, #22c55e 100%);
box-shadow: 0 10px 24px rgba(15,118,110,0.28), 0 0 0 1px rgba(20,184,166,0.22);
transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.98) translateY(0); box-shadow: 0 1px 4px rgba(15,118,110,0.26); }
.dark .btn-primary {
background: linear-gradient(135deg, #22d3ee 0%, #14b8a6 58%, #10b981 100%);
color: #07202a;
border-color: rgba(103,232,249,0.3);
box-shadow: 0 10px 22px rgba(14,165,233,0.24), 0 0 0 1px rgba(34,211,238,0.2);
}
.dark .btn-primary:hover {
background: linear-gradient(135deg, #67e8f9 0%, #2dd4bf 58%, #34d399 100%);
box-shadow: 0 14px 28px rgba(34,211,238,0.28), 0 0 0 1px rgba(103,232,249,0.28);
}
.btn-secondary {
background: linear-gradient(180deg, var(--bg-card), var(--bg-raised));
color: var(--text-1);
border: 1px solid var(--border);
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.5) inset;
}
.btn-secondary:hover {
background: var(--bg-hover);
color: var(--text-1);
border-color: var(--accent);
box-shadow: 0 8px 18px rgba(15,118,110,0.1);
transform: translateY(-1px);
}
.btn-secondary:active { transform: scale(0.98) translateY(0); }
.dark .btn-secondary {
background: linear-gradient(180deg, #1a273c, #141f32);
color: var(--text-2);
border-color: rgba(148,163,184,0.24);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 20px rgba(2,8,23,0.22);
}
.dark .btn-secondary:hover {
color: var(--text-1);
background: #1c2b43;
border-color: rgba(103,232,249,0.36);
box-shadow: 0 12px 24px rgba(2,8,23,0.28), 0 0 0 1px rgba(103,232,249,0.16);
}
.btn-danger {
background: rgba(239,68,68,0.08); color: #ef4444;
border: 1px solid rgba(239,68,68,0.2);
box-shadow: 0 1px 2px rgba(239,68,68,0.08);
}
.btn-danger:hover {
background: rgba(239,68,68,0.15);
border-color: rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.dark .btn-danger { background: rgba(239,68,68,0.12); color: #fca5a5; border-color: rgba(239,68,68,0.2); }
.dark .btn-danger:hover { background: rgba(239,68,68,0.22); }
.badge {
display: inline-flex; align-items: center;
padding: 0.125rem 0.5rem; border-radius: 9999px;
font-size: 0.75rem; font-weight: 500;
}
.badge-green { background: #dcfce7; color: #15803d; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-yellow { background: #fef9c3; color: #a16207; }
.badge-gray { background: var(--bg-muted); color: var(--text-2); border: 1px solid var(--border); }
.dark .badge-green { background: rgba(21,128,61,0.2); color: #86efac; }
.dark .badge-red { background: rgba(185,28,28,0.2); color: #fca5a5; }
.dark .badge-blue { background: rgba(29,78,216,0.2); color: #93c5fd; }
.dark .badge-yellow { background: rgba(161,98,7,0.2); color: #fde68a; }
.pnl-positive { color: #16a34a; font-weight: 600; }
.pnl-negative { color: #dc2626; font-weight: 600; }
.dark .pnl-positive { color: #4ade80; }
.dark .pnl-negative { color: #f87171; }
.skeleton { animation: pulse 1.5s ease-in-out infinite; background: var(--bg-muted); border-radius: 0.375rem; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ticker-dropdown { max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.ticker-dropdown::-webkit-scrollbar { width: 4px; }
.ticker-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* ── Action tile (scanner grid buttons) ───────────────── */
.action-tile {
display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
padding: 0.75rem 0.5rem; border-radius: 0.875rem;
border: 1.5px solid var(--border);
background: var(--bg-card);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: all 0.18s ease; cursor: pointer; text-align: center;
}
.action-tile:hover:not(:disabled) {
border-color: var(--accent);
background: var(--accent-dim);
box-shadow: 0 4px 12px rgba(99,102,241,0.12);
transform: translateY(-2px);
}
.action-tile:active:not(:disabled) { transform: scale(0.96); }
.action-tile:disabled { opacity: 0.45; cursor: not-allowed; }
.action-tile .tile-icon { width: 1.35rem; height: 1.35rem; }
.action-tile .tile-label {
font-size: 0.72rem; font-weight: 500; line-height: 1.3;
color: var(--text-2);
}
.action-tile:hover:not(:disabled) .tile-label { color: var(--accent-text); }
/* ── Tab active ───────────────────────────────────────── */
.tab-active { border-bottom: 2px solid var(--accent); color: var(--accent-text); font-weight: 600; }
/* ── Header ───────────────────────────────────────────── */
header {
background: var(--bg-card);
border-bottom: 1px solid var(--border);
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.app-header {
box-shadow: 0 1px 0 rgba(15,23,42,0.03);
}
.dark .app-header {
box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 14px 30px rgba(0,0,0,0.18);
}
.app-brand-icon {
border-radius: 0.7rem;
}
.app-main-nav {
align-items: center;
}
.app-nav-button {
border: 1px solid transparent;
color: var(--text-2);
min-height: 2.35rem;
transition:
background-color 0.16s ease,
border-color 0.16s ease,
color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease;
}
.app-nav-button:hover {
background: var(--bg-hover);
color: var(--text-1);
border-color: var(--border);
}
.app-nav-button.is-active {
color: #064e3b;
background: linear-gradient(180deg, #ccfbf1, #ecfdf5);
border-color: rgba(15,118,110,0.18);
box-shadow: 0 8px 18px rgba(15,118,110,0.12), 0 1px 0 rgba(255,255,255,0.7) inset;
}
.dark .app-nav-button.is-active {
color: #ccfbf1;
background: linear-gradient(180deg, rgba(20,184,166,0.24), rgba(16,185,129,0.12));
border-color: rgba(45,212,191,0.28);
box-shadow: 0 10px 24px rgba(0,0,0,0.16), 0 1px 0 rgba(255,255,255,0.05) inset;
}
.app-nav-icon,
.app-nav-icon svg {
display: block;
width: 1rem;
height: 1rem;
}
.app-icon-button {
min-width: 2.35rem;
min-height: 2.35rem;
justify-content: center;
}
.app-header-actions {
padding: 0.2rem;
border-radius: 0.92rem;
background: rgba(255,255,255,0.66);
border: 1px solid rgba(148,163,184,0.24);
box-shadow: 0 8px 22px rgba(15,23,42,0.08);
}
.dark .app-header-actions {
background: rgba(15,24,39,0.78);
border-color: rgba(103,232,249,0.2);
box-shadow: 0 10px 24px rgba(2,8,23,0.28);
}
.app-menu-trigger,
.app-auth-trigger {
border-radius: 0.78rem;
border-width: 1px;
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
border-color 0.16s ease,
background-color 0.16s ease,
color 0.16s ease;
}
.app-menu-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
min-height: 2.5rem;
padding: 0;
border-radius: 0.95rem;
border-color: rgba(100, 116, 139, 0.28);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.9));
color: #334155;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 8px 16px rgba(148, 163, 184, 0.18);
}
.app-menu-trigger:hover {
border-color: rgba(15, 118, 110, 0.36);
background: linear-gradient(180deg, #f0fdfa, #dcfce7);
color: #0f766e;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
}
.app-menu-trigger[aria-expanded='true'] {
border-color: rgba(20, 184, 166, 0.52);
background: linear-gradient(180deg, #ecfeff, #ccfbf1);
color: #0f766e;
box-shadow: 0 10px 20px rgba(15, 118, 110, 0.2);
}
.app-menu-trigger svg {
width: 1.25rem;
height: 1.25rem;
stroke-width: 2.25;
}
.app-auth-logout {
border-color: rgba(100,116,139,0.25);
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.95));
color: #475569;
box-shadow: 0 1px 0 rgba(255,255,255,0.88) inset, 0 8px 14px rgba(148,163,184,0.2);
}
.app-auth-logout:hover {
border-color: rgba(239,68,68,0.34);
background: linear-gradient(180deg, #fff1f2, #ffe4e6);
color: #b91c1c;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(239,68,68,0.16);
}
.app-auth-login {
border-color: rgba(16,185,129,0.28);
box-shadow: 0 8px 18px rgba(15,118,110,0.2);
}
.app-auth-login:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15,118,110,0.26);
}
.dark .app-menu-trigger {
border-color: rgba(148, 163, 184, 0.34);
background: linear-gradient(180deg, rgba(30, 41, 59, 0.78), rgba(15, 24, 39, 0.92));
color: #dbe7f8;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 10px 20px rgba(2, 8, 23, 0.28);
}
.dark .app-menu-trigger:hover {
border-color: rgba(103, 232, 249, 0.46);
background: linear-gradient(180deg, rgba(14, 165, 233, 0.36), rgba(8, 145, 178, 0.42));
color: #eff8ff;
}
.dark .app-menu-trigger[aria-expanded='true'] {
border-color: rgba(103, 232, 249, 0.56);
background: linear-gradient(180deg, rgba(6, 182, 212, 0.42), rgba(20, 184, 166, 0.36));
color: #ecfeff;
box-shadow: 0 12px 24px rgba(2, 8, 23, 0.34);
}
.dark .app-auth-logout {
border-color: rgba(148,163,184,0.26);
background: linear-gradient(180deg, rgba(39,39,42,0.8), rgba(24,24,27,0.9));
color: #d4d4d8;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 18px rgba(0,0,0,0.22);
}
.dark .app-auth-logout:hover {
border-color: rgba(248,113,113,0.4);
background: linear-gradient(180deg, rgba(153,27,27,0.45), rgba(127,29,29,0.5));
color: #fecaca;
}
.dark .app-auth-login {
border-color: rgba(110,231,183,0.38);
}
.app-menu-trigger:active,
.app-auth-trigger:active {
transform: scale(0.985);
}
/* ── Derivatives Tab ─────────────────────────────────── */
.deriv-layout {
gap: 1.15rem;
}
.deriv-workspace {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
'main'
'sidebar';
gap: 1rem;
align-items: start;
}
.deriv-history-sidebar {
align-self: start;
grid-area: sidebar;
}
.deriv-main-panel {
box-shadow: 0 8px 22px rgba(15,23,42,0.05);
grid-area: main;
}
.deriv-toolbar {
padding: 0.2rem;
border-radius: 0.9rem;
border: 1px solid var(--border-sub);
background: color-mix(in srgb, var(--bg-card) 78%, transparent);
}
.deriv-chip-btn {
min-width: 2.65rem;
font-weight: 600;
}
.deriv-action-btn {
border-radius: 0.72rem;
}
.deriv-decision-card {
box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}
.deriv-help-details summary {
list-style: none;
}
.deriv-quick-history {
border: 1px dashed var(--border);
border-radius: 0.75rem;
padding: 0.55rem;
background: color-mix(in srgb, var(--bg-raised) 80%, transparent);
}
.deriv-quick-item {
display: flex;
align-items: center;
gap: 0.35rem;
border: 1px solid var(--border-sub);
border-radius: 0.62rem;
padding: 0.32rem 0.45rem;
background: var(--bg-card);
}
.deriv-help-details summary::-webkit-details-marker {
display: none;
}
.deriv-help-details summary::after {
content: ' +';
color: var(--text-3);
font-weight: 500;
}
.deriv-help-details[open] summary::after {
content: ' -';
}
.deriv-history-card {
box-shadow: 0 8px 20px rgba(15,23,42,0.04);
}
.deriv-history-item {
transition: border-color 0.16s ease, transform 0.16s ease;
}
.deriv-history-item:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.deriv-history-list {
max-height: min(56vh, 36rem);
overflow-y: auto;
}
.dark .deriv-main-panel,
.dark .deriv-history-card,
.dark .deriv-decision-card {
box-shadow: 0 16px 34px rgba(0,0,0,0.22);
}
.dark .deriv-toolbar {
border-color: rgba(94,234,212,0.16);
background: rgba(15,23,42,0.26);
}
.dark .deriv-quick-history {
border-color: rgba(94,234,212,0.24);
background: rgba(15,23,42,0.2);
}
.dark .deriv-quick-item {
border-color: rgba(148,163,184,0.2);
}
.dark .deriv-history-item:hover {
border-color: rgba(94,234,212,0.36);
}
.dark .deriv-decision-card {
background: #12243a !important;
border-color: rgba(34,211,238,0.28) !important;
}
.dark .deriv-decision-card .text-emerald-800 {
color: #6ee7b7 !important;
}
.dark .deriv-decision-card .text-rose-800 {
color: #fda4af !important;
}
.dark .deriv-decision-card .bg-white\/60 {
background: rgba(15,23,42,0.62) !important;
border: 1px solid rgba(148,163,184,0.3);
}
.dark .deriv-decision-card .bg-white\/60 b {
color: #f8fafc !important;
}
.dark .deriv-decision-card .text-gray-400 {
color: #a5b4c9 !important;
}
@media (min-width: 1140px) {
.deriv-workspace {
grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
grid-template-areas: 'main sidebar';
gap: 1.15rem;
}
.deriv-history-sidebar {
position: sticky;
top: calc(3.5rem + 0.75rem);
max-height: calc(100vh - 5.25rem);
overflow-y: auto;
scrollbar-width: thin;
overscroll-behavior: contain;
}
.deriv-history-list {
max-height: min(46vh, 30rem);
}
}
/* ── Tailwind utility overrides for dark mode ─────────── */
/* text */
.dark .text-gray-900 { color: var(--text-1); }
.dark .text-gray-800 { color: var(--text-1); }
.dark .text-gray-700 { color: var(--text-2); }
.dark .text-gray-600 { color: var(--text-2); }
.dark .text-gray-500 { color: var(--text-3); }
.dark .text-gray-400 { color: var(--text-3); }
.dark .text-gray-300 { color: var(--text-3); }
.dark .text-indigo-700 { color: var(--accent-text); }
.dark .text-indigo-600 { color: var(--accent-text); }
/* colored text — dùng màu sáng hơn trong dark */
.dark .text-emerald-700 { color: #4ade80; }
.dark .text-emerald-600 { color: #34d399; }
.dark .text-emerald-500 { color: #6ee7b7; }
.dark .text-red-700 { color: #f87171; }
.dark .text-red-600 { color: #f87171; }
.dark .text-red-500 { color: #fca5a5; }
/* backgrounds */
.dark .bg-white { background-color: var(--bg-card); }
.dark .bg-gray-50 { background-color: var(--bg-page); }
.dark .bg-gray-100 { background-color: var(--bg-raised); }
.dark .bg-gray-200 { background-color: var(--border); }
.dark .bg-indigo-50 { background-color: var(--accent-dim); }
.dark .bg-zinc-900 { background-color: var(--bg-card); }
.dark .bg-zinc-800 { background-color: var(--bg-raised); }
/* colored card backgrounds */
.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.08); }
.dark .bg-red-50 { background-color: rgba(239,68,68,0.08); }
/* borders */
.dark .border-gray-100 { border-color: var(--border); }
.dark .border-gray-200 { border-color: var(--border); }
.dark .border-gray-300 { border-color: var(--border); }
.dark .border-emerald-200 { border-color: rgba(16,185,129,0.3); }
.dark .border-red-200 { border-color: rgba(239,68,68,0.3); }
/* dividers */
.dark .divide-y > * + * { border-color: var(--border); }
.dark .divide-gray-100 > * + * { border-color: var(--border-sub); }
.dark .divide-gray-50 > * + * { border-color: var(--border-sub); }
/* inputs */
.dark input, .dark select, .dark textarea {
background-color: var(--bg-input);
border-color: var(--border);
color: var(--text-1);
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
border-color: rgba(103,232,249,0.52);
box-shadow: 0 0 0 1px rgba(103,232,249,0.26);
}
.dark input::placeholder, .dark textarea::placeholder { color: var(--text-4); }
/* hover */
.dark .hover\:bg-gray-50:hover { background-color: var(--bg-hover); }
.dark .hover\:bg-gray-100:hover { background-color: var(--bg-raised); }
.dark .hover\:bg-indigo-50:hover { background-color: var(--accent-dim); }
.dark .hover\:border-emerald-400:hover { border-color: #34d399; }
.dark .hover\:border-red-400:hover { border-color: #f87171; }
.dark .hover\:border-indigo-300:hover { border-color: var(--accent); }
.dark .hover\:text-gray-600:hover { color: var(--text-2); }
.dark .hover\:text-gray-900:hover { color: var(--text-1); }
/* nav buttons */
.dark nav button { color: var(--text-2); }
.dark nav button:hover { background-color: var(--bg-hover); color: var(--text-1); }
.dark nav button.bg-indigo-50 { background-color: var(--accent-dim); }
.dark nav button.text-indigo-700 { color: var(--accent-text); }
/* tables */
.dark table thead { background-color: var(--bg-page); }
.dark table thead th { color: var(--text-3); }
.dark table tbody tr { border-color: var(--border-sub); }
.dark table tbody tr:hover { background-color: var(--bg-hover); }
.dark table tbody td { color: var(--text-2); }
/* ticker dropdown */
.dark .ticker-dropdown { background-color: var(--bg-card); border-color: var(--border); }
.dark .ticker-dropdown > div { color: var(--text-1); }
.dark .ticker-dropdown > div:hover,
.dark .ticker-dropdown > div.bg-indigo-50 { background-color: var(--accent-dim); color: var(--text-1); }
/* log panel */
.dark .bg-gray-900 { background-color: #09090b; }
/* modal */
.dark .bg-black\/40 { background-color: rgba(0,0,0,0.65); }
/* scanner stock cards */
.dark .border-green-400 { border-color: #16a34a; }
.dark .border-red-400 { border-color: #dc2626; }
/* action icon buttons */
.dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.12); }
.dark .hover\:border-blue-300:hover { border-color: rgba(59,130,246,0.4); }
.dark .hover\:bg-purple-50:hover { background-color: rgba(168,85,247,0.12); }
.dark .hover\:border-purple-300:hover { border-color: rgba(168,85,247,0.4); }
.dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,0.1); }
.dark .hover\:border-emerald-300:hover { border-color: rgba(16,185,129,0.3); }
.dark .text-blue-500 { color: #60a5fa; }
.dark .text-purple-500 { color: #f59e0b; }
.dark .text-emerald-500 { color: #34d399; }
/* ── PWA / mobile ───────────────────────────────────────── */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
.touch-manipulation { touch-action: manipulation; }
.safe-pb {
padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}
.safe-pt {
padding-top: env(safe-area-inset-top, 0px);
}
/* PWA bắt buộc: chặn bấm/scroll xuyên ra app phía sau; chỉ tương tác trong .pwa-install-overlay */
html.pwa-gate-open body > *:not(.pwa-install-overlay) {
pointer-events: none !important;
user-select: none;
}
.pwa-install-overlay {
pointer-events: auto;
-webkit-overflow-scrolling: touch;
background:
linear-gradient(180deg, rgba(12,28,24,0.98) 0%, rgba(5,12,11,0.98) 100%),
#07100f;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.pwa-install-overlay::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(135deg, rgba(45,212,191,0.16), transparent 34%),
linear-gradient(315deg, rgba(132,204,22,0.12), transparent 38%);
opacity: 0.9;
}
.pwa-install-overlay > * {
position: relative;
z-index: 1;
}
.pwa-app-icon {
border-radius: 1.1rem;
background: #091311;
box-shadow:
0 18px 42px rgba(0,0,0,0.34),
0 0 0 1px rgba(94,234,212,0.28),
0 0 0 6px rgba(45,212,191,0.08);
}
.pwa-title {
letter-spacing: 0;
text-wrap: balance;
}
.pwa-copy {
color: #adc1bb;
text-wrap: pretty;
}
.pwa-copy strong,
.pwa-help strong {
color: #f0fdfa;
font-weight: 700;
}
.pwa-primary-action {
border-radius: 1rem;
background: linear-gradient(135deg, #22d3ee 0%, #10b981 52%, #a3e635 100%);
color: #03110f;
border: 1px solid rgba(209,250,229,0.36);
box-shadow: 0 18px 32px rgba(16,185,129,0.2), 0 1px 0 rgba(255,255,255,0.42) inset;
transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.pwa-primary-action:hover {
filter: brightness(1.05);
box-shadow: 0 22px 42px rgba(16,185,129,0.24), 0 1px 0 rgba(255,255,255,0.5) inset;
transform: translateY(-1px);
}
.pwa-primary-action:active,
.pwa-secondary-action:active,
.pwa-ghost-action:active,
.pwa-banner-primary:active,
.pwa-banner-secondary:active {
transform: scale(0.985);
}
.pwa-help {
color: #9fd8cd;
}
.pwa-warning {
color: #fde68a;
background: rgba(120,78,18,0.24);
border: 1px solid rgba(245,158,11,0.28);
}
.pwa-instruction-card {
border-radius: 1rem;
color: #d6e6e1;
background: rgba(10,22,20,0.78);
border: 1px solid rgba(148,163,184,0.16);
box-shadow: 0 20px 54px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.04) inset;
backdrop-filter: blur(14px);
}
.pwa-instruction-title {
color: #f0fdfa;
border-bottom: 1px solid rgba(148,163,184,0.16);
}
.pwa-secondary-action,
.pwa-ghost-action {
border-radius: 0.875rem;
color: #e8f5f1;
background: rgba(18,31,28,0.84);
border: 1px solid rgba(148,163,184,0.22);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.pwa-secondary-action:hover,
.pwa-ghost-action:hover {
background: rgba(28,45,40,0.92);
border-color: rgba(94,234,212,0.32);
}
.pwa-install-banner {
color: #ecfdf5;
background: rgba(11,31,28,0.94);
border-top: 1px solid rgba(94,234,212,0.22);
box-shadow: 0 -18px 34px rgba(0,0,0,0.22);
backdrop-filter: blur(14px);
}
.pwa-banner-primary,
.pwa-banner-secondary {
border-radius: 0.75rem;
transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.pwa-banner-primary {
background: #ccfbf1;
color: #0f3b35;
border: 1px solid rgba(204,251,241,0.7);
}
.pwa-banner-primary:hover { background: #99f6e4; }
.pwa-banner-secondary {
color: #d6e6e1;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
}
.pwa-banner-secondary:hover {
background: rgba(255,255,255,0.13);
}
@media (max-width: 640px) {
.card { padding: 1rem; }
.app-header {
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
backdrop-filter: blur(14px);
}
.dark .app-header {
background:
linear-gradient(180deg, rgba(18,27,25,0.96), rgba(11,18,17,0.96));
}
.app-header-inner {
gap: 0.55rem;
padding-top: 0.45rem;
padding-bottom: 0.55rem;
}
.app-brand {
min-width: 0;
flex: 1 1 100%;
width: 100%;
}
.app-brand-icon {
width: 2rem;
height: 2rem;
border-radius: 0.65rem;
box-shadow: 0 6px 16px rgba(15,118,110,0.12);
}
.app-brand-title {
font-size: 0.95rem !important;
font-weight: 650 !important;
max-width: 11.5rem;
}
.app-main-nav {
flex: 1 1 auto;
min-width: 0;
max-width: calc(100% - 5.6rem);
order: 2;
margin: 0;
padding: 0.28rem;
gap: 0.18rem;
border: 1px solid rgba(15,118,110,0.11);
border-radius: 1rem;
background: rgba(241,245,249,0.78);
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.dark .app-main-nav {
background: rgba(18,31,28,0.72);
border-color: rgba(45,212,191,0.14);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.app-main-nav .app-nav-button {
flex: 1 0 2.2rem;
min-width: 2.2rem;
min-height: 2.35rem;
padding: 0;
border-radius: 0.78rem;
justify-content: center;
background: transparent;
box-shadow: none;
}
.app-main-nav .app-nav-button:hover {
background: rgba(255,255,255,0.7);
}
.dark .app-main-nav .app-nav-button:hover {
background: rgba(255,255,255,0.06);
}
.app-main-nav .app-nav-button.is-active {
transform: translateY(-1px);
}
.app-nav-icon,
.app-nav-icon svg {
width: 1.05rem;
height: 1.05rem;
}
.app-header-actions {
order: 2;
margin-left: 0;
flex: 0 0 auto;
gap: 0.38rem;
padding: 0.16rem;
border-radius: 0.92rem;
}
.app-icon-button {
width: 2.45rem;
height: 2.45rem;
min-width: 2.45rem;
min-height: 2.45rem;
padding: 0 !important;
border-radius: 0.8rem;
}
.app-menu-trigger,
.app-auth-trigger {
box-shadow: 0 6px 14px rgba(15,23,42,0.1);
}
.dark .app-menu-trigger,
.dark .app-auth-trigger {
box-shadow: 0 8px 16px rgba(0,0,0,0.28);
}
.app-icon-button svg {
width: 1.05rem;
height: 1.05rem;
}
.open-positions-scroll {
margin-left: -0.35rem;
margin-right: -0.35rem;
padding-left: 0.35rem;
padding-right: 0.35rem;
}
.open-positions-table {
min-width: 47rem;
border-collapse: separate;
border-spacing: 0;
}
.open-positions-table thead th {
font-size: 0.76rem;
line-height: 1.25;
color: #64748b;
}
.open-positions-table tbody td {
line-height: 1.45;
}
.open-positions-table .badge {
padding: 0.22rem 0.54rem;
}
.deriv-toolbar {
width: 100%;
justify-content: flex-start;
gap: 0.35rem;
padding: 0.18rem;
}
.deriv-chip-btn {
min-width: 2.45rem;
padding: 0.42rem 0.55rem !important;
}
.deriv-action-btn {
padding-left: 0.65rem !important;
padding-right: 0.65rem !important;
}
.deriv-decision-card {
padding: 0.78rem !important;
}
.deriv-history-item {
padding: 0.58rem !important;
}
.deriv-quick-history {
padding: 0.46rem;
}
.deriv-quick-item {
padding: 0.28rem 0.4rem;
}
.mobile-tap-target { min-height: 2.75rem; min-width: 2.75rem; }
/* Bớt chữ đậm / gần đen trên mobile (đọc dễ hơn) */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4 {
font-weight: 500 !important;
color: #475569 !important;
}
html:not(.dark) .text-gray-900 {
color: #3f3f46 !important;
}
html:not(.dark) .text-gray-900.font-bold,
html:not(.dark) .text-gray-900.font-semibold,
html:not(.dark) .font-bold.text-gray-900,
html:not(.dark) .font-semibold.text-gray-900 {
font-weight: 500 !important;
}
/* Dark mode: logo / tiêu đề trắng tinh → dịu hơn */
html.dark header span.dark\:text-zinc-100 {
font-weight: 500 !important;
color: #d4d4d8 !important;
}
}