/* brand.css — nen tang dung chung cho mimir.vn, hugin.vn, munin.vn, didau.tech. Nguon goc: sites/mimir/styles.css. Sua o day de ca bon trang doi theo. scripts/build-sites.mjs sao chep file nay vao tung site khi build. */ :root { --ink: #071b26; --ink-2: #102e3b; --muted: #60727a; --paper: #f7f8f2; --paper-warm: #f1f3ec; --white: #fff; --cyan: #21c7df; --cyan-dark: #0b92aa; --mint: #28d29b; --green: #159d75; --lime: #b8e05b; --gold: #f2bf62; --violet: #aa91f6; --line: rgba(7, 27, 38, .12); --shadow-sm: 0 14px 36px rgba(7, 27, 38, .08); --shadow-lg: 0 32px 80px rgba(7, 27, 38, .16); --radius-sm: 12px; --radius-md: 22px; --radius-lg: 36px; --container: 1180px; --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* KHONG dat Georgia dau day. Georgia — ca nghieng lan dung — thieu glyph dung san cho cac to hop mu + thanh cua tieng Viet: o+huyen, e+sac, e+huyen, e+nga (ỒẾỀỄ...). Chrome dung phai ve chu goc roi dan dau roi ben canh, ra "rô `i" thay vi "rồi". Cac chu do — den, roi, ve, nhieu, tieng, biet — nam giua kho tu vung thuong dung nhat, nen day khong phai truong hop hiem. Cambria / Times New Roman / Liberation Serif deu ve dung ca bo. Doi thu tu o day la lam vo dau tren TAT CA cac trang; tests/landing-sites ghim lai. */ --font-editorial: Cambria, "Palatino Linotype", "Times New Roman", "Liberation Serif", serif; } /* Di dau (didau.tech) khong dung bang mau giao duc cyan/mint. No la san pham du lich va mang san bang mau rieng cua app Flutter (accent #2f5cf6, AI #7c3aed, nhan #FF612F). Ghi de o day thay vi trong sites/didau/styles.css de token thuong hieu van chi nam MOT cho — dat data-site="didau" tren the . Ba trang con lai khong doc nhanh nay nen khong bi anh huong. */ :root[data-site="didau"] { --ink: #17181c; --ink-2: #262932; --muted: #5f6470; --paper: #f2f4f9; --paper-warm: #eaeef7; --cyan: #4f7cff; --cyan-dark: #2f5cf6; --mint: #7c3aed; --green: #2f5cf6; --line: rgba(23, 27, 38, .11); --shadow-sm: 0 14px 36px rgba(23, 27, 38, .08); --shadow-lg: 0 32px 80px rgba(23, 27, 38, .16); --hot: #ff612f; --ok: #0e9f6e; --panel: #fafbfe; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } button { color: inherit; } p, h1, h2, h3, h4 { margin-top: 0; } :focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; border-radius: 8px; color: var(--white); background: var(--ink); transform: translateY(-150%); transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); } .container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; } .section-shell { position: relative; padding: 126px 0; } .site-header { position: fixed; z-index: 100; top: 0; right: 0; left: 0; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .site-header.is-scrolled { border-color: rgba(7, 27, 38, .08); background: rgba(247, 248, 242, .9); box-shadow: 0 8px 28px rgba(7, 27, 38, .05); backdrop-filter: blur(18px); } .nav-shell { display: flex; align-items: center; justify-content: space-between; min-height: 78px; } .brand { display: inline-flex; gap: 11px; align-items: center; } .brand-mark { width: 42px; height: 42px; border-radius: 13px; overflow: hidden; box-shadow: 0 8px 20px rgba(7, 27, 38, .14); } .brand-copy { display: flex; flex-direction: column; line-height: 1.05; } .brand-copy strong { font-size: 20px; letter-spacing: -.04em; } .brand-copy small { margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .primary-nav { display: flex; gap: 35px; align-items: center; font-size: 13px; font-weight: 650; } .primary-nav > a:not(.button) { position: relative; padding: 10px 0; } .primary-nav > a:not(.button)::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 1px; background: var(--ink); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; } .primary-nav > a:not(.button):hover::after { transform: scaleX(1); transform-origin: left; } .menu-toggle { display: none; } .button { display: inline-flex; gap: 18px; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: 6px; font-size: 13px; font-weight: 750; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .button:hover { transform: translateY(-2px); } .button-small { min-height: 42px; padding: 0 18px; } .button-dark { color: var(--white); background: var(--ink); box-shadow: 0 10px 25px rgba(7, 27, 38, .14); } .button-primary { color: #03222a; background: linear-gradient(110deg, var(--cyan), var(--mint)); box-shadow: 0 14px 34px rgba(26, 193, 182, .22); } .button-primary:hover { box-shadow: 0 17px 38px rgba(26, 193, 182, .3); } .text-link { display: inline-flex; gap: 15px; align-items: center; padding: 8px 0; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 750; } .text-link span { transition: transform .2s ease; } .text-link:hover span { transform: translateX(5px); } .text-link.teal { color: var(--cyan-dark); } .text-link.green { color: var(--green); } .eyebrow { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .eyebrow span { width: 24px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--mint)); } h1, h2, h3 { line-height: 1.08; letter-spacing: -.045em; } h1 { max-width: 700px; margin-bottom: 27px; font-size: clamp(48px, 5.2vw, 76px); font-weight: 590; } h1 em, h2 em, .story-copy h3 em, .pilot-copy h2 em, .responsible h2 em { font-family: var(--font-editorial); font-weight: 400; } h1 em { color: var(--green); } .section-heading h2, .responsible h2, .pilot-copy h2 { margin-bottom: 25px; font-size: clamp(42px, 5vw, 66px); font-weight: 590; } .section-heading h2 em, .responsible h2 em { color: var(--green); } .section-heading > p:last-child { max-width: 610px; color: var(--muted); font-size: 16px; } .section-heading.centered { max-width: 760px; margin: 0 auto 90px; text-align: center; } .section-heading.centered .eyebrow { justify-content: center; } .section-heading.centered > p:last-child { margin-inline: auto; } /* ---------- chan trang + hieu ung xuat hien ---------- */ .site-footer { padding: 72px 0 22px; color: rgba(255,255,255,.72); background: #051821; overflow-x: clip; } .footer-top { display: grid; grid-template-columns: 1fr 1.45fr; gap: 80px; padding-bottom: 58px; } .light-brand .brand-copy strong { color: var(--white); } .light-brand .brand-copy small { color: rgba(255,255,255,.35); } .footer-brand > p { margin: 22px 0 0; color: rgba(255,255,255,.38); font-size: 11px; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; } .footer-links > div { display: flex; flex-direction: column; gap: 10px; } .footer-links strong { margin-bottom: 9px; color: var(--white); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; } .footer-links a, .footer-links span { color: rgba(255,255,255,.45); font-size: 10px; } .footer-links a:hover { color: var(--mint); } .footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); } .footer-bottom p { margin: 0; color: rgba(255,255,255,.27); font-size: 8px; } .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------- responsive dung chung ---------- */ @media (max-width: 900px) { .section-shell { padding: 96px 0; } .primary-nav { gap: 22px; } .footer-top { grid-template-columns: 1fr; } .section-heading.split { grid-template-columns: 1fr; gap: 25px; } .section-heading.split > p { justify-self: start; } } @media (max-width: 720px) { html { scroll-padding-top: 70px; } body { overflow-x: hidden; } .container { width: min(calc(100% - 32px), var(--container)); } .section-shell { padding: 80px 0; } .nav-shell { min-height: 68px; } .brand-mark { width: 37px; height: 37px; border-radius: 11px; } .brand-copy strong { font-size: 18px; } .menu-toggle { display: grid; width: 42px; height: 42px; padding: 0; place-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.6); } .menu-toggle > span:not(.sr-only) { display: block; width: 19px; height: 1.5px; background: var(--ink); transition: transform .2s ease; } .menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(3.75px) rotate(45deg); } .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); } .primary-nav { position: fixed; top: 68px; right: 16px; left: 16px; display: none; flex-direction: column; gap: 2px; align-items: stretch; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(250,252,247,.98); box-shadow: var(--shadow-lg); } .primary-nav.is-open { display: flex; } .primary-nav > a:not(.button) { padding: 12px; } h1 { font-size: clamp(42px, 12.7vw, 58px); } .section-heading h2 { font-size: clamp(38px, 11vw, 52px); } .section-heading.centered { margin-bottom: 62px; text-align: left; } .section-heading.centered .eyebrow { justify-content: flex-start; } .footer-links { grid-template-columns: 1fr 1fr; row-gap: 35px; } .footer-bottom { flex-direction: column; gap: 8px; } } @media (max-width: 430px) { .footer-links { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .js .reveal { opacity: 1; transform: none; } }