/* * Theme mặc định: SÁNG (light). Bộ biến giao diện TỐI (dark) vẫn được * giữ nguyên bên dưới trong `:root[data-theme="dark"]` — muốn đổi lại * giao diện tối, chỉ cần thêm data-theme="dark" vào thẻ của view. */ :root { color-scheme: light; --bg-top: #f0fdf4; --bg-bottom: #ffffff; --bg: #ffffff; --bg-elevated: #ffffff; --border: #e5e7eb; --input-bg: #ffffff; --input-border: #d1d5db; --label-color: #374151; --text: #111827; --text-muted: #6b7280; --accent: #16a34a; --accent-hover: #15803d; --header-bg: rgba(255, 255, 255, 0.8); --toggle-hover-bg: #f3f4f6; --error-bg: #fef2f2; --error-text: #b91c1c; --highlight-bg: #f0fdf4; --card-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } :root[data-theme="dark"] { color-scheme: dark; --bg-top: #111827; --bg-bottom: #030712; --bg: #030712; --bg-elevated: #111827; --border: #1f2937; --input-bg: #1f2937; --input-border: #374151; --label-color: #d1d5db; --text: #f3f4f6; --text-muted: #9ca3af; --accent: #16a34a; --accent-hover: #15803d; --header-bg: rgba(3, 7, 18, 0.8); --toggle-hover-bg: #111827; --error-bg: #450a0a; --error-text: #fca5a5; --highlight-bg: #0f2419; --card-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; flex-direction: column; font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom)); color: var(--text); } .page-content { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 1.5rem; } @media (max-width: 640px) { .page-content { padding: 1.5rem 0.75rem; } } .page-inner { width: 100%; max-width: 420px; } .page-inner-wide { max-width: 720px; } .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--card-shadow); } @media (min-width: 1024px) { .card { padding: 2rem; } } @media (max-width: 640px) { .card { padding: 1.25rem; border-radius: 0.75rem; } } h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 0.5rem; text-align: center; } .subtitle { font-size: 0.9rem; color: var(--text-muted); text-align: center; margin-bottom: 1.5rem; } form { display: flex; flex-direction: column; gap: 1rem; } .field-group { display: flex; gap: 0.75rem; } .field { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; } label { font-size: 0.8rem; color: var(--label-color); font-weight: 600; } .radio-group { display: flex; gap: 1.5rem; } .radio-option { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; font-weight: 400; color: var(--text); cursor: pointer; } .radio-option input[type="radio"] { accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; } input[type="text"], input[type="password"], select, textarea { padding: 0.6rem 0.5rem; border: 1px solid var(--input-border); border-radius: 0.5rem; font-size: 1rem; width: 100%; background: var(--input-bg); color: var(--text); font-family: inherit; resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 0.9rem; } :root[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); } button[type="submit"] { width: 100%; padding: 0.75rem; border: none; border-radius: 0.5rem; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; margin-top: 0.5rem; } button[type="submit"]:hover { background: var(--accent-hover); } .info-row { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; border-radius: 0.65rem; background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: 0.75rem; } .info-row.highlight { background: var(--highlight-bg); border: 1px solid var(--accent); } .info-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .info-value { font-size: 1.05rem; font-weight: 600; color: var(--text); } .error-box { margin-top: 0.5rem; margin-bottom: 1.25rem; padding: 1rem; border-radius: 0.75rem; background: var(--error-bg); color: var(--error-text); text-align: center; } .back-link { display: inline-block; margin-top: 0.75rem; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 0.9rem; } .back-link:hover { text-decoration: underline; color: var(--accent-hover); } .laso-table { width: 100%; border-collapse: collapse; } .laso-table th, .laso-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9rem; } .laso-table th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .laso-table tr:last-child td { border-bottom: none; } .laso-table a { color: var(--text); text-decoration: none; font-weight: 500; } .laso-table a:hover { color: var(--accent); } .laso-save-box { margin-top: 1.5rem; } .laso-save-form { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .laso-save-form label { white-space: nowrap; margin: 0; font-size: 1.05rem; } .laso-save-form input[type="text"] { width: auto; flex: 1; min-width: 160px; } .laso-save-form button[type="submit"] { width: auto; margin-top: 0; padding: 0.6rem 1.25rem; } .laso-save-form button[type="submit"]:disabled { background: var(--border); color: var(--text-muted); cursor: default; } .laso-saved-row { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .laso-saved-row span { color: var(--text); } button.laso-delete-link { display: inline; width: auto; background: none; border: none; padding: 0; margin: 0; border-radius: 0; color: var(--error-text); font-family: inherit; font-size: inherit; font-weight: 600; line-height: inherit; vertical-align: baseline; text-decoration: none; cursor: pointer; } button.laso-delete-link:hover { background: none; text-decoration: underline; } button.laso-delete-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; } .site-header { background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .site-header-inner { max-width: 1120px; margin: 0 auto; height: 4rem; padding: 0 1.5rem; display: flex; align-items: center; } @media (min-width: 1024px) { .site-header-inner { height: 4.5rem; } } .site-logo { display: flex; align-items: center; line-height: 0; flex-shrink: 0; } .site-primary-nav { display: flex; align-items: center; gap: 1.25rem; min-width: 0; } .site-nav { display: none; align-items: center; gap: 1.25rem; margin-left: auto; } .site-nav-link { display: inline-block; color: var(--text-muted); font-weight: 500; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: color 0.15s ease; } .site-nav-link:hover { color: var(--text); } .site-nav-username { color: var(--text-muted); font-weight: 500; font-size: 0.9rem; } .site-mobile-toggle { display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 0.5rem; padding: 0.5rem; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease; margin-left: auto; } @media (hover: hover) { .site-mobile-toggle:hover { background: var(--toggle-hover-bg); color: var(--text); } } .site-mobile-toggle-icon { width: 1.5rem; height: 1.5rem; } .site-mobile-nav { display: none; flex-direction: column; padding: 1rem; background: var(--bg); border-top: 1px solid var(--border); } .site-mobile-nav.open { display: flex; } .site-mobile-nav > * + * { border-top: 1px solid var(--border); } .site-mobile-nav .site-nav-link { display: block; width: 100%; padding: 0.75rem 0; text-align: left; color: var(--text); font-size: 1rem; font-weight: 500; } .site-mobile-nav .site-nav-link:hover { color: var(--text); } .site-mobile-nav .site-nav-username { display: block; padding: 0.75rem 0 0; font-size: 0.9rem; } @media (min-width: 1024px) { .site-nav { display: flex; } .site-mobile-toggle { display: none; } .site-mobile-nav { display: none !important; } } .laso-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 3 / 4; gap: 0; background: #000; border: 1px solid #000; font-family: 'Roboto Condensed', sans-serif; font-size: 0.85rem; color: #000; } @media (max-width: 640px) { .laso-grid { margin-left: -0.375rem; margin-right: -0.375rem; } } .laso-cell { background: #f1ece3; border: 1px solid #000; padding: 0.6rem 0.15rem; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; transition: background 0.15s ease, box-shadow 0.15s ease; } .laso-cell[data-chi-index], .laso-cell[data-tamhop-reset] { cursor: pointer; } .laso-cell.is-tamhop { position: relative; z-index: 3; background: #fffedc; box-shadow: 0 0 10px 3px rgba(218, 193, 86, 0.55); } .laso-tamhop-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; } .laso-tamhop-line { stroke: #16a34a; stroke-width: 1; opacity: 0.6; vector-effect: non-scaling-stroke; } .laso-row-top, .laso-row-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; } .laso-row-top > :first-child, .laso-row-bottom > :first-child { justify-self: start; } .laso-row-top > :nth-child(2), .laso-row-bottom > :nth-child(2) { justify-self: center; text-align: center; } .laso-row-top > :last-child, .laso-row-bottom > :last-child { justify-self: end; text-align: right; } .laso-can-cung { font-weight: 700; } .laso-ten-cung { font-weight: 700; text-transform: uppercase; } .laso-daihan { font-weight: 700; } .laso-chinhtinh { text-align: center; font-weight: 700; margin: 0.15rem 0; } .laso-row-mid { display: grid; grid-template-columns: 1fr 1fr; flex: 1; overflow: hidden; } .laso-col-tot { text-align: left; } .laso-col-xau { text-align: left; } .laso-trangsinh { font-weight: 700; } .laso-sao { line-height: 1.3; } .laso-sao-chinh { font-size: 1rem; } .laso-boundary-bar { position: absolute; width: 32px; height: 1rem; transform: translate(-50%, -50%); background: #000; color: #fff; line-height: 1.3; display: flex; align-items: center; justify-content: center; z-index: 4; } .laso-boundary-bar.is-merged { width: 70px; } .laso-center { grid-row: 2 / 4; grid-column: 2 / 4; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.3rem; font-size: 1rem; color: #1f2937; } .laso-title { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.03em; } .laso-info-table { border-collapse: collapse; } .laso-info-table td { padding: 0.05rem 0.25rem; white-space: nowrap; } .laso-info-label { font-weight: 600; text-align: right; } @media (max-width: 480px) { .laso-title { font-size: 0.9rem; } .laso-center { font-size: 0.65rem; } .laso-grid { font-size: 0.52rem; } .laso-grid, .laso-cell { border-width: 0.7px; } .laso-sao-chinh { font-size: 0.65rem; } .laso-boundary-bar { width: 20px; height: 10px; } .laso-boundary-bar.is-merged { width: 45px; } .laso-cell { padding: 0.3rem 0.1rem; } }