/* ========================================================================== TextSandbox — Website giới thiệu sản phẩm Hai chủ đề: dark (mặc định) và light, đổi qua [data-theme] trên ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --surface-grad: linear-gradient(180deg, #131b24, rgba(19, 27, 36, .55)); --alt-bg: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0)); --footer-bg: rgba(255, 255, 255, .012); --bg: #0b0f14; --bg-soft: #0f151c; --bg-elev: #131b24; --bg-elev-2: #18222d; --line: #223040; --line-soft: #1a2532; --text: #e6edf3; --text-dim: #9fb0c0; --text-mute: #6d7f90; --accent: #5eead4; --accent-2: #38bdf8; --amber: #fbbf24; --violet: #a78bfa; --danger: #f87171; --accent-soft: rgba(94, 234, 212, .1); --accent-border: rgba(94, 234, 212, .26); --btn-primary-fg: #052e2b; --btn-primary-bg: linear-gradient(140deg, #5eead4, #34d399); --header-bg: rgba(11, 15, 20, .82); --grid-line: rgba(255, 255, 255, .028); --glow-1: rgba(56, 189, 248, .14); --glow-2: rgba(94, 234, 212, .10); --code-fg: #cbd8e4; --code-h: #5eead4; --code-c: #5b6e82; --code-k: #a78bfa; --code-s: #fbbf24; --gutter-fg: #3c4d60; --ok: #34d399; --radius: 14px; --radius-sm: 9px; --maxw: 1160px; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --shadow: 0 24px 60px -22px rgba(0, 0, 0, .75); } /* ------------------------------ Light theme ----------------------------- */ :root[data-theme="light"] { color-scheme: light; --surface-grad: linear-gradient(180deg, #ffffff, #f7fafd); --alt-bg: linear-gradient(180deg, rgba(13, 26, 38, .028), rgba(13, 26, 38, 0)); --footer-bg: rgba(13, 26, 38, .022); --bg: #f5f8fc; --bg-soft: #ffffff; --bg-elev: #ffffff; --bg-elev-2: #eef3f9; --line: #d8e2ee; --line-soft: #e6edf5; --text: #0d1a26; --text-dim: #46596b; --text-mute: #6f8496; --accent: #0d9488; --accent-2: #0284c7; --amber: #b45309; --violet: #7c3aed; --danger: #dc2626; --accent-soft: rgba(13, 148, 136, .09); --accent-border: rgba(13, 148, 136, .28); --btn-primary-fg: #ffffff; --btn-primary-bg: linear-gradient(140deg, #0d9488, #0f766e); --header-bg: rgba(255, 255, 255, .88); --grid-line: rgba(13, 26, 38, .045); --glow-1: rgba(2, 132, 199, .12); --glow-2: rgba(13, 148, 136, .10); --code-fg: #1f2f3d; --code-h: #0f766e; --code-c: #7c8fa1; --code-k: #6d28d9; --code-s: #b45309; --gutter-fg: #a9b8c7; --ok: #059669; --shadow: 0 20px 44px -24px rgba(15, 40, 66, .3); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--bg); transition: background-color .25s ease, color .25s ease; color: var(--text); font-family: var(--font-sans); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Nền có hiệu ứng lưới + hào quang mờ */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(680px 420px at 82% -8%, var(--glow-1), transparent 70%), radial-gradient(620px 420px at 8% 4%, var(--glow-2), transparent 70%), var(--bg); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%); } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -.02em; margin: 0 0 .55em; font-weight: 680; } h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 3.3vw, 2.35rem); } h3 { font-size: 1.16rem; } p { margin: 0 0 1rem; color: var(--text-dim); } code, kbd, .mono { font-family: var(--font-mono); } code { background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 6px; padding: .1em .4em; font-size: .86em; color: var(--accent); } kbd { background: var(--bg-elev-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: .12em .45em; font-size: .82em; color: var(--text); } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .section { padding: 92px 0; position: relative; } .section--tight { padding: 62px 0; } .section--alt { background: var(--alt-bg, transparent); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--btn-primary-fg); padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 200; } .skip-link:focus { left: 0; } /* ------------------------------ Header / Nav ----------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); background: var(--header-bg); border-bottom: 1px solid var(--line-soft); } .nav { display: flex; align-items: center; gap: 18px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); letter-spacing: -.03em; font-size: 1.08rem; } .brand:hover { text-decoration: none; } .brand-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(150deg, var(--accent), var(--accent-2)); color: #f7fffd; font-family: var(--font-mono); font-weight: 700; font-size: .95rem; box-shadow: 0 6px 18px -6px rgba(13, 148, 136, .55); } :root[data-theme="dark"] .brand-mark { color: #04231f; } .brand-version { font-family: var(--font-mono); font-size: .68rem; color: var(--text-mute); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 2px; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-links a { color: var(--text-dim); font-size: .94rem; padding: 8px 12px; border-radius: 8px; font-weight: 500; } .nav-links a:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; } .nav-links a.is-active { color: var(--accent); } .nav-cta { margin-left: 8px; } .nav-toggle { display: none; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text); width: 42px; height: 38px; border-radius: 9px; cursor: pointer; font-size: 1rem; } /* ------------------- Tiện ích: đổi chủ đề & ngôn ngữ -------------------- */ .nav-utils { display: flex; align-items: center; gap: 8px; margin-left: 6px; } .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-dim); border-radius: 9px; cursor: pointer; font-size: .95rem; transition: color .18s ease, border-color .18s ease, background .18s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-border); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } .lang-switch { display: inline-flex; align-items: center; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; height: 38px; } .lang-switch a { font-family: var(--font-mono); font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--text-mute); padding: 0 10px; height: 100%; display: inline-flex; align-items: center; } .lang-switch a:hover { color: var(--text); text-decoration: none; background: var(--bg-elev-2); } .lang-switch a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); } /* ------------------------------- Buttons -------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 600; font-size: .95rem; padding: 11px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: 0 12px 28px -14px rgba(13, 148, 136, .8); } .btn-primary:hover { box-shadow: 0 16px 34px -14px rgba(13, 148, 136, .95); } .btn-ghost { background: var(--bg-elev); border-color: var(--line); color: var(--text); } .btn-ghost:hover { border-color: var(--accent-border); background: var(--bg-elev-2); } .btn-lg { padding: 14px 26px; font-size 1rem; font-size: 1rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* --------------------------------- Hero --------------------------------- */ .hero { padding: 76px 0 40px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 54px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; padding: 5px 13px; margin-bottom: 20px; } .hero h1 span.grad { background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 60%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { font-size: 1.1rem; color: var(--text-dim); max-width: 62ch; } .hero-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-size: .88rem; color: var(--text-mute); font-family: var(--font-mono); } .hero-meta span { display: inline-flex; align-items: center; gap: 7px; } .hero-meta i { color: var(--accent); } /* ---------------------------- App mockup (editor) ------------------------ */ .mockup { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; } .mockup-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-elev-2); border-bottom: 1px solid var(--line); } .dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #33465c; display: block; } .dots i:nth-child(1) { background: #f87171; } .dots i:nth-child(2) { background: #fbbf24; } .dots i:nth-child(3) { background: #34d399; } .mockup-title { font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); } .mockup-lock { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; } .mockup-tabs { display: flex; overflow: hidden; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .mockup-tabs button { font: inherit; font-family: var(--font-mono); font-size: .78rem; background: transparent; border: 0; border-right: 1px solid var(--line-soft); color: var(--text-mute); padding: 9px 14px; cursor: pointer; white-space: nowrap; } .mockup-tabs button.is-active { background: var(--bg-elev); color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } .mockup-body { display: flex; min-height: 286px; } .mockup-gutter { font-family: var(--font-mono); font-size: .78rem; color: var(--gutter-fg); padding: 14px 10px 14px 14px; text-align: right; user-select: none; background: var(--bg-soft); border-right: 1px solid var(--line-soft); } .mockup-code { margin: 0; padding: 14px 16px; font-family: var(--font-mono); font-size: .81rem; line-height: 1.85; color: var(--code-fg); white-space: pre-wrap; overflow: hidden; flex: 1; } .mockup-code .h { color: var(--code-h); font-weight: 600; } .mockup-code .c { color: var(--code-c); } .mockup-code .k { color: var(--code-k); } .mockup-code .s { color: var(--code-s); } .mockup-status { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; background: var(--bg-elev-2); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .72rem; color: var(--text-mute); } .mockup-status .ok { color: var(--ok); } /* -------------------------------- Cards --------------------------------- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { background: var(--surface-grad, var(--bg-elev)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: var(--shadow); } .card h3 { margin-bottom: .4em; } .card p:last-child { margin-bottom: 0; } .card-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); font-size: 1rem; margin-bottom: 16px; } .card-ico.v { background: color-mix(in srgb, var(--violet) 11%, transparent); border-color: color-mix(in srgb, var(--violet) 26%, transparent); color: var(--violet); } .card-ico.b { background: color-mix(in srgb, var(--accent-2) 11%, transparent); border-color: color-mix(in srgb, var(--accent-2) 26%, transparent); color: var(--accent-2); } .card-ico.a { background: color-mix(in srgb, var(--amber) 11%, transparent); border-color: color-mix(in srgb, var(--amber) 26%, transparent); color: var(--amber); } .section-head { max-width: 720px; margin-bottom: 44px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { font-size: 1.03rem; margin-bottom: 0; } /* --------------------------------- Lists -------------------------------- */ .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .check-list li { position: relative; padding-left: 30px; color: var(--text-dim); } .check-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .05em; color: var(--accent); font-size: .82rem; } .check-list.warn li::before { content: "\f071"; color: var(--amber); } .check-list.no li::before { content: "\f057"; color: var(--danger); } .check-list li strong { color: var(--text); font-weight: 600; } /* --------------------------- Split feature block ------------------------ */ .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; } .split + .split { margin-top: 78px; } .split.reverse > *:first-child { order: 2; } .panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .panel-title { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* file tree */ .tree { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: .82rem; } .tree li { padding: 6px 10px; border-radius: 7px; color: var(--text-dim); display: flex; align-items: center; gap: 10px; } .tree li i { color: var(--text-mute); width: 14px; text-align: center; } .tree li.pin i { color: var(--amber); } .tree li.active { background: var(--bg-elev-2); color: var(--text); } .tree li .tag { margin-left: auto; font-size: .68rem; color: var(--text-mute); } /* flow diagram (cloud sync) */ .flow { display: grid; gap: 14px; } .flow-step { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; } .flow-step .n { flex: 0 0 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); color: var(--accent-2); } .flow-step p { margin: 0; font-size: .94rem; } .flow-step h4 { margin: 0 0 3px; font-size: .98rem; } /* --------------------------------- Steps -------------------------------- */ .steps { counter-reset: s; display: grid; gap: 18px; } .step { position: relative; padding-left: 60px; counter-increment: s; } .step::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: .95rem; font-weight: 600; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-elev); border: 1px solid var(--line); color: var(--accent); } .step h3 { font-size: 1.03rem; margin-bottom: .25em; } .step p { margin: 0; font-size: .95rem; } /* -------------------------------- Pricing ------------------------------- */ .price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .price { display: flex; flex-direction: column; background: var(--surface-grad, var(--bg-elev)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .price.featured { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-soft), 0 26px 60px -34px rgba(13,148,136,.45); position: relative; } .price.featured .price-badge { position: absolute; top: 16px; right: 16px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); padding: 3px 9px; border-radius: 999px; } .price h3 { font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; font-family: var(--font-mono); color: var(--text-dim); font-weight: 600; } .price .quota { font-size: 2.15rem; font-weight: 700; letter-spacing: -.03em; color: var(--text); line-height: 1.1; } .price .quota small { font-size: .95rem; font-weight: 500; color: var(--text-mute); margin-left: 4px; } .price .for { font-size: .93rem; min-height: 3em; } .price ul { margin: 18px 0 22px; } .price .btn { margin-top: auto; width: 100%; } /* --------------------------------- Table -------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); } table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; } th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); } th { background: var(--bg-elev-2); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; } td { color: var(--text-dim); } tbody tr:last-child td { border-bottom: 0; } td.num { text-align: right; font-family: var(--font-mono); color: var(--text); } /* --------------------------------- FAQ ---------------------------------- */ .faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; } .faq-item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .faq-q { width: 100%; text-align: left; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 0; cursor: pointer; padding: 17px 52px 17px 20px; position: relative; } .faq-q::after { content: "\2b"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: .8rem; transition: transform .2s ease; } .faq-item.open .faq-q::after { content: "\f068"; } .faq-a { display: none; padding: 0 20px 18px; } .faq-item.open .faq-a { display: block; } .faq-a p:last-child { margin-bottom: 0; } /* ---------------------------------- CTA --------------------------------- */ .cta { text-align: center; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 7%, transparent) 45%, color-mix(in srgb, var(--violet) 8%, transparent)); border: 1px solid var(--line); border-radius: 20px; padding: 56px 28px; } .cta h2 { margin-bottom: .4em; } .cta p { max-width: 58ch; margin-left: auto; margin-right: auto; } .cta .btn-row { justify-content: center; margin-top: 24px; } /* ============================ Crypto / mã hóa =========================== */ /* Chip tên thuật toán */ .crypto-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; } .crypto-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .78rem; font-weight: 500; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; } .crypto-chip i { color: var(--accent); font-size: .78rem; } .crypto-chip.is-key i { color: var(--violet); } .crypto-chip.is-aead i { color: var(--accent-2); } /* Thẻ thuật toán lớn */ .algo-card { background: var(--surface-grad, var(--bg-elev)); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 22px 24px; } .algo-card.is-kdf { border-left-color: var(--violet); } .algo-card .algo-name { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 600; color: var(--text); margin: 0 0 4px; letter-spacing: -.01em; overflow-wrap: anywhere; } .algo-card .algo-role { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } .algo-card.is-kdf .algo-role { color: var(--violet); } .algo-card p:last-child { margin-bottom: 0; font-size: .95rem; } /* Đường ống mã hóa: các bước nối bằng mũi tên */ .pipeline { display: grid; gap: 0; } .pipe-step { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 17px; } .pipe-step .pipe-ico { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .88rem; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); } .pipe-step h4 { margin: 0 0 3px; font-size: .99rem; } .pipe-step p { margin: 0; font-size: .92rem; } .pipe-step code { font-size: .8em; } .pipe-arrow { justify-self: start; margin-left: 33px; color: var(--text-mute); font-size: .8rem; line-height: 1; padding: 7px 0; } /* Bảng thông số mật mã */ .spec-list { list-style: none; margin: 0; padding: 0; } .spec-list li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--line); } .spec-list li:last-child { border-bottom: 0; } .spec-list .spec-k { flex: 0 0 clamp(140px, 34%, 210px); font-size: .88rem; color: var(--text-mute); } .spec-list .spec-v { font-family: var(--font-mono); font-size: .86rem; color: var(--text); overflow-wrap: anywhere; } .spec-list .spec-v.accent { color: var(--accent); } /* Nhấn mạnh cụm mã hóa trong đoạn văn */ .enc-term { font-family: var(--font-mono); font-size: .92em; font-weight: 500; color: var(--accent); white-space: nowrap; } /* Hàng dữ liệu: đọc được vs đã mã hóa */ .state-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .state-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--bg-elev-2); min-width: 0; } .state-box .state-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 6px; color: var(--text-mute); } .state-box .state-text { font-family: var(--font-mono); font-size: .82rem; margin: 0; overflow-wrap: anywhere; color: var(--text-dim); } .state-box.is-plain { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); } .state-box.is-plain .state-label { color: var(--amber); } .state-box.is-cipher { border-color: var(--accent-border); } .state-box.is-cipher .state-label { color: var(--accent); } .state-box.is-cipher .state-text { color: var(--accent); opacity: .85; } .state-arrow { color: var(--accent); font-size: 1rem; } .state-arrow small { display: block; font-family: var(--font-mono); font-size: .6rem; color: var(--text-mute); text-align: center; margin-top: 4px; letter-spacing: .04em; } @media (max-width: 560px) { .state-row { grid-template-columns: 1fr; } .state-arrow { transform: rotate(90deg); justify-self: center; } .state-arrow small { display: none; } } /* Biến thể markup:
và
    */ dl.spec-list { display: grid; } dl.spec-list > div { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--line); } dl.spec-list > div:last-child { border-bottom: 0; } dl.spec-list dt.spec-k { flex: 0 0 clamp(140px, 34%, 210px); font-size: .88rem; color: var(--text-mute); margin: 0; } dl.spec-list dd.spec-v { margin: 0; flex: 1 1 45%; font-family: var(--font-mono); font-size: .86rem; color: var(--text); overflow-wrap: anywhere; } dl.spec-list dd.spec-v.accent { color: var(--accent); } .algo-card .spec-list { margin-top: 16px; } ol.pipeline { list-style: none; margin: 0; padding: 0; } ol.pipeline > li { margin: 0; } li.pipe-arrow { display: block; } .state-box .panel-title { margin: 0 0 10px; } .state-box pre { margin: 0; background: transparent; border: 0; padding: 0; font-family: var(--font-mono); font-size: .82rem; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; } .state-box.is-cipher pre { color: var(--accent); opacity: .85; } .state-arrow span { display: block; font-family: var(--font-mono); font-size: .6rem; color: var(--text-mute); text-align: center; margin-top: 4px; letter-spacing: .04em; } @media (max-width: 560px) { .state-arrow span { display: none; } } /* -------------------------------- Callout ------------------------------- */ .callout { display: flex; gap: 16px; background: color-mix(in srgb, var(--amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); border-left-width: 3px; border-radius: var(--radius-sm); padding: 18px 20px; } .callout i { color: var(--amber); font-size: 1.05rem; margin-top: .25em; } .callout p { margin: 0; font-size: .95rem; } .callout strong { color: var(--text); } .callout.info { background: color-mix(in srgb, var(--accent-2) 8%, transparent); border-color: color-mix(in srgb, var(--accent-2) 30%, transparent); } .callout.info i { color: var(--accent-2); } /* -------------------------------- Footer -------------------------------- */ .site-footer { border-top: 1px solid var(--line-soft); padding: 54px 0 30px; margin-top: 30px; background: var(--footer-bg, transparent); } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; } .footer-grid h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); font-family: var(--font-mono); margin-bottom: 14px; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .footer-grid a { color: var(--text-dim); font-size: .93rem; } .footer-grid a:hover { color: var(--accent); } .footer-about p { font-size: .93rem; max-width: 42ch; } .footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: .86rem; color: var(--text-mute); } .footer-bottom .mono { font-family: var(--font-mono); font-size: .82rem; } /* ------------------------------- Page hero ------------------------------ */ .page-hero { padding: 66px 0 10px; } .page-hero .lead { font-size: 1.08rem; } .breadcrumb { font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); margin-bottom: 18px; } .breadcrumb a { color: var(--text-mute); } .breadcrumb a:hover { color: var(--accent); } /* -------------------------- Animation (reveal) -------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ------------------------------ Responsive ------------------------------ */ @media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { .nav-links { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 12px 18px 20px; gap: 4px; display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 12px 10px; } .nav-links { margin-left: 0; } .nav-cta { margin: 8px 0 0; text-align: center; } .nav-toggle { display: block; } .nav-utils { margin-left: auto; } .hero-grid, .split { grid-template-columns: 1fr; gap: 34px; } .split.reverse > *:first-child { order: 0; } .price-grid { grid-template-columns: 1fr; } .section { padding: 68px 0; } } @media (max-width: 620px) { body { font-size: 16px; } .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero { padding-top: 48px; } .cta { padding: 40px 20px; } .mockup-gutter { display: none; } }