/* Stylesheet dùng chung cho toàn bộ trang nội dung /huong-dan/. * * Dual theme: light mặc định, dark qua [data-theme="dark"] trên . * Theme toggle lưu preference vào localStorage('inkiri-theme'). * * Palette: light lấy từ coming-soon, dark đồng bộ app tool tính giá. * Typography: Inter (headings, bold) + Jost (body) — clean, rõ ràng. * * LAYOUT: Everything is LEFT-ALIGNED. No margin:0 auto. * All sections share --side-pad with the header. */ /* --- Tokens --------------------------------------------------------------- */ :root { --bg: #F3EEE3; --surface: #FBF8F2; --surface-2: #F7F2EA; --text: #2E2B26; --text-secondary: #5F6875; --text-muted: #6B6055; --line: #CFC4AC; --line-soft: #E3DACA; --olive: #878A3E; --teal: #2E7C83; --gold: #C7942E; --taupe: #6B6055; --accent: var(--teal); --radius: 3px; --measure: 34rem; --header-offset: 5rem; --transition: 200ms ease; --side-pad: 1rem; } :root[data-theme="dark"] { --bg: #0d0f12; --surface: #16191f; --surface-2: #1e222b; --text: #e8eaed; --text-secondary: #9aa3b0; --text-muted: #6b7483; --line: #2a2f3a; --line-soft: #1e222b; --olive: #a3a84a; --teal: #4dd0e1; --gold: #fbbf24; --taupe: #9aa3b0; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-offset); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { background: var(--bg); color: var(--text); font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.0625rem; line-height: 1.75; -webkit-text-size-adjust: 100%; min-height: 100vh; } /* --- Reading Progress Bar ------------------------------------------------- */ .reading-progress { position: fixed; top: 0; left: 0; z-index: 100; width: 0%; height: 3px; background: var(--teal); transition: width 100ms linear; pointer-events: none; } /* --- Site Header ---------------------------------------------------------- */ .site-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--side-pad); background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line-soft); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); } .site-head-left { display: flex; align-items: center; gap: .75rem; } .site-head-right { display: flex; align-items: center; gap: .5rem; } .site-head a { text-decoration: none; } .header-logo-link { display: inline-flex; align-items: center; min-height: 2.75rem; line-height: 0; } .header-logo { height: 42px; width: auto; color: var(--text); } .head-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid var(--gold); border-radius: var(--radius); color: var(--text); font-size: .8125rem; font-family: 'Jost', sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background var(--transition), color var(--transition); } .head-cta:hover { background: var(--gold); color: var(--bg); } /* --- Theme Toggle --------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .theme-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--gold); } .theme-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .theme-toggle svg { width: 1rem; height: 1rem; } .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } /* --- Layout --------------------------------------------------------------- */ .wrap { max-width: var(--measure); padding: 2rem var(--side-pad) 4rem; } .wrap-wide { max-width: 56rem; } .layout-with-toc { display: block; padding: 2rem var(--side-pad) 4rem; } @media (min-width: 64rem) and (max-width: 81.99rem) { .layout-with-toc { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; max-width: fit-content; padding: 2rem var(--side-pad) 4rem; } .layout-with-toc .toc-sidebar { position: sticky; top: var(--header-offset); align-self: start; max-height: calc(100vh - var(--header-offset) - 2rem); overflow-y: auto; padding-block: .5rem; } .layout-with-toc > .content-col { min-width: 0; } .layout-with-toc .related-sidebar { display: none; } } @media (min-width: 82rem) { .layout-with-toc { display: grid; grid-template-columns: 13rem minmax(36rem, 46rem) 14rem; gap: 2rem; max-width: fit-content; padding: 2rem var(--side-pad) 4rem; } .layout-with-toc .toc-sidebar { position: sticky; top: var(--header-offset); align-self: start; max-height: calc(100vh - var(--header-offset) - 2rem); overflow-y: auto; padding-block: .5rem; } .layout-with-toc > .content-col { min-width: 0; } .layout-with-toc .related-sidebar { position: sticky; top: var(--header-offset); align-self: start; max-height: calc(100vh - var(--header-offset) - 2rem); overflow-y: auto; padding-block: .5rem; } } /* --- Breadcrumb ----------------------------------------------------------- */ .crumb { margin-bottom: 1.5rem; font-size: .8125rem; color: var(--text-muted); } .crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; } .crumb li + li::before { content: "›"; margin-right: .35rem; color: var(--line); } .crumb a { color: var(--text-muted); text-decoration: none; } .crumb a:hover { color: var(--accent); } .crumb [aria-current="page"] { color: var(--text); } /* --- Typography ----------------------------------------------------------- */ h1, h2, h3 { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; } h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: .75rem; } h2 { font-size: clamp(1.5rem, 4vw, 1.875rem); margin: 2.75rem 0 .75rem; } h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; color: var(--taupe); } h2[id], h3[id] { scroll-margin-top: var(--header-offset); } .lede { margin: 1rem 0 1.5rem; font-size: 1.1875rem; font-weight: 300; line-height: 1.65; color: var(--text-muted); } .meta { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-soft); font-size: .8125rem; color: var(--text-muted); } p { margin: 0 0 1.1rem; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--gold); } strong { font-weight: 500; color: var(--text); } code { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace; font-size: .9em; padding: .1em .3em; background: var(--surface-2); border-radius: 3px; } ul, ol { margin: 0 0 1.1rem 1.25rem; } li { margin-bottom: .45rem; } li > ul, li > ol { margin-top: .45rem; margin-bottom: .45rem; } hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line-soft); } /* --- Table of Contents — Desktop Sidebar ---------------------------------- */ .toc-sidebar { display: none; } @media (min-width: 64rem) { .toc-sidebar { display: block; } .toc-mobile { display: none; } } .toc-sidebar .toc-label { margin: 0 0 .75rem; font-family: 'Jost', sans-serif; font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); } .toc-sidebar ol { list-style: none; margin: 0; border-left: 2px solid var(--line-soft); padding-left: .85rem; } .toc-sidebar li { margin-bottom: .35rem; } .toc-sidebar a { display: block; font-size: .8125rem; line-height: 1.5; color: var(--text-muted); text-decoration: none; padding: .15rem 0; transition: color var(--transition); } .toc-sidebar a:hover { color: var(--accent); } .toc-sidebar a.active { color: var(--accent); font-weight: 500; } /* --- Table of Contents — Mobile (inline
) ------------------------ */ .toc-mobile { margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); } .toc-mobile summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; cursor: pointer; font-family: 'Jost', sans-serif; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); list-style: none; } .toc-mobile summary::-webkit-details-marker { display: none; } .toc-mobile summary::after { content: "+"; flex: none; margin-left: 1rem; color: var(--taupe); font-size: 1.15rem; line-height: 1; } .toc-mobile[open] summary::after { content: "–"; } .toc-mobile ol, .toc-mobile ul { margin: .75rem 0 0 1.15rem; font-size: .9375rem; } .toc-mobile li { margin-bottom: .3rem; } /* --- Công thức ------------------------------------------------------------ */ .formula { margin: 1.25rem 0; padding: 1rem 1.15rem; background: var(--surface); border-left: 3px solid var(--olive); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1rem; line-height: 1.7; } .formula p { margin-bottom: .5rem; } .formula p:last-child { margin-bottom: 0; } .formula ul { margin: .5rem 0 0 1.15rem; } /* --- Ví dụ ---------------------------------------------------------------- */ .example { margin: 1.25rem 0; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); } .example > :first-child { margin-top: 0; } .example > :last-child { margin-bottom: 0; } .example .example-label { display: block; margin-bottom: .5rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); } /* --- Callout -------------------------------------------------------------- */ .callout { margin: 1.5rem 0; padding: 1rem 1.15rem; background: color-mix(in srgb, var(--gold) 8%, var(--bg)); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; font-size: .9375rem; } .callout > :last-child { margin-bottom: 0; } /* --- Answer-first blocks for AEO ----------------------------------------- */ .quick-answer { margin: 1.5rem 0 2rem; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; } .quick-answer strong { display: block; margin-bottom: .4rem; color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: .95rem; } .quick-answer p { margin-bottom: .65rem; } .quick-answer ul { margin-bottom: 0; } /* --- Bảng ----------------------------------------------------------------- */ .table-wrap { margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: .9375rem; } caption { padding: .75rem 1rem; border-bottom: 1px solid var(--line-soft); color: var(--text-muted); font-size: .8125rem; text-align: left; } th, td { padding: .6rem .85rem; text-align: left; vertical-align: top; } th { font-weight: 500; background: var(--surface); white-space: nowrap; } tbody tr + tr td { border-top: 1px solid var(--line-soft); } td.num, th.num { text-align: right; white-space: nowrap; } /* --- CTA về công cụ ------------------------------------------------------- */ .tool-cta { display: block; margin: 2rem 0; padding: 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color var(--transition), transform var(--transition); } .tool-cta:hover { border-color: var(--gold); transform: translateY(-1px); color: inherit; } .tool-cta strong { display: block; margin-bottom: .25rem; font-family: 'Inter', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; } .tool-cta span { font-size: .9375rem; color: var(--text-muted); } /* --- FAQ ------------------------------------------------------------------ */ .faq { margin: 1.25rem 0; } .faq details { border-bottom: 1px solid var(--line-soft); } .faq details:first-of-type { border-top: 1px solid var(--line-soft); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; cursor: pointer; font-weight: 500; list-style: none; transition: color var(--transition); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; color: var(--taupe); font-size: 1.15rem; line-height: 1; transition: transform var(--transition); } .faq details[open] summary::after { content: "–"; } .faq summary:hover { color: var(--accent); } .faq details > div { padding: 0 0 1rem; color: var(--text-secondary); } .faq details > div > :last-child { margin-bottom: 0; } /* --- Danh sách bài (hub + "đọc tiếp") ------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; list-style: none; } .card-grid li { margin: 0; } .card { display: block; height: 100%; padding: 1.15rem 1.25rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); color: inherit; } :root[data-theme="dark"] .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); } .card h3 { margin: 0 0 .35rem; font-size: 1.15rem; } .card p { margin: 0; font-size: .9375rem; color: var(--text-muted); line-height: 1.6; } .card-badge { display: inline-flex; align-items: center; min-height: 1.5rem; margin-bottom: .75rem; padding: .15rem .5rem; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); border-radius: 999px; color: var(--taupe); font-family: 'Jost', sans-serif; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; line-height: 1; text-transform: uppercase; } /* --- Hub-specific: hero CTA ------------------------------------------------ */ .hub-hero { margin: 1.5rem 0 2rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; } .hub-hero strong { display: block; margin-bottom: .5rem; font-family: 'Inter', system-ui, sans-serif; font-size: 1.35rem; font-weight: 700; } .hub-hero span { display: block; font-size: .9375rem; color: var(--text-muted); margin-bottom: 1rem; } .hub-hero-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.5rem; background: var(--gold); color: var(--bg); border-radius: var(--radius); font-family: 'Jost', sans-serif; font-size: .875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background var(--transition); } .hub-hero-cta:hover { background: var(--accent); color: var(--bg); } /* --- Screenshots trong bài hướng dẫn -------------------------------------- */ .guide-shot { margin: 1.5rem 0 2rem; } .guide-shot img { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); } .guide-shot figcaption { margin-top: .65rem; color: var(--text-muted); font-size: .875rem; line-height: 1.55; } /* --- Footer --------------------------------------------------------------- */ .site-foot { margin-top: 3rem; padding: 2rem var(--side-pad) 3rem; border-top: 1px solid var(--line-soft); font-size: .875rem; color: var(--text-muted); } .site-foot .wrap { padding: 0; } .site-foot nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1rem; list-style: none; } .site-foot a { color: var(--text-muted); text-decoration: none; } .site-foot a:hover { color: var(--accent); } .site-foot p { margin: 0; } /* --- Scroll to Top -------------------------------------------------------- */ .scroll-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background var(--transition), color var(--transition); } .scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); } .scroll-top:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* --- Section divider ------------------------------------------------------ */ .section-divider { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line-soft); } /* --- Back link ------------------------------------------------------------ */ .back-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color var(--transition); } .back-link:hover { color: var(--accent); } .back-link svg { width: .85rem; height: .85rem; } /* --- Related articles section --------------------------------------------- */ .related { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-soft); } /* --- Right Sidebar — Other Articles --------------------------------------- */ .related-sidebar { display: none; } @media (min-width: 82rem) { .related-sidebar { display: block; } } .related-sidebar .sidebar-label { margin: 0 0 .75rem; font-family: 'Inter', system-ui, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); } .related-sidebar ul { list-style: none; margin: 0; padding: 0; } .related-sidebar li { margin: 0; } .related-sidebar li + li { border-top: 1px solid var(--line-soft); } .related-sidebar a { display: block; padding: .6rem 0; font-size: .8125rem; line-height: 1.45; color: var(--text-secondary); text-decoration: none; transition: color var(--transition); } .related-sidebar a:hover { color: var(--accent); } .related-sidebar a.active { color: var(--accent); font-weight: 600; } /* --- Mobile --------------------------------------------------------------- */ @media (max-width: 30rem) { body { font-size: 1rem; } .wrap { padding: 1.5rem var(--side-pad) 3rem; } .layout-with-toc { padding: 1.5rem var(--side-pad) 3rem; } .site-head { padding-block: .6rem; } .head-cta { padding: .4rem .75rem; font-size: .75rem; } .formula, .example, .callout, .toc-mobile { padding: .85rem 1rem; } .hub-hero { padding: 1.25rem; } .card-grid { grid-template-columns: 1fr; } .scroll-top { bottom: 1rem; right: 1rem; } } @media (max-width: 48rem) { .layout-with-toc { display: block; } .layout-with-toc .toc-sidebar { display: none; } .layout-with-toc .related-sidebar { display: none; } } /* --- Print ---------------------------------------------------------------- */ @media print { .site-head, .tool-cta, .site-foot nav, .theme-toggle, .scroll-top, .reading-progress, .toc-sidebar, .related-sidebar { display: none; } body { background: #fff; font-size: 11pt; color: #000; } .wrap, .layout-with-toc { max-width: none; padding: 0; display: block; } .faq details { display: block; } a { color: #000; } .formula, .example, .callout { border-color: #999; } }