:root { --rd-canvas: #f6faf8; --rd-surface: #ffffff; --rd-ink: #17212b; --rd-slate: #425466; --rd-mist: #dde7e3; --rd-tide: #eaf3f0; --rd-brand: #0f766e; --rd-brand-hover: #0b5c55; --rd-cta: #f59e0b; --rd-cta-hover: #d97f06; --rd-zalo: #0068ff; --rd-amber-soft: #fff7ed; --rd-font-display: "Newsreader", "Be Vietnam Pro", Georgia, serif; --rd-font-body: "Be Vietnam Pro", system-ui, sans-serif; --rd-shadow-soft: 0 4px 24px -8px rgb(15 118 110 / 0.08); --rd-shadow-card: 0 8px 32px -12px rgb(23 33 43 / 0.1); --rd-shadow-strong: 0 24px 70px -28px rgb(23 33 43 / 0.32); --rd-radius-sm: 10px; --rd-radius-md: 12px; --rd-radius-lg: 18px; --rd-radius-xl: 24px; --rd-radius-2xl: 32px; } .rd-page { margin: 0; background: var(--rd-canvas); color: var(--rd-ink); font-family: var(--rd-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .rd-page * { box-sizing: border-box; } .rd-section { position: relative; } .rd-container { width: min(100% - 32px, 1280px); margin-inline: auto; } .rd-container-narrow { width: min(100% - 32px, 1120px); margin-inline: auto; } .rd-display { margin: 0; font-family: var(--rd-font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.018em; text-wrap: balance; } .rd-heading { margin: 0; font-family: var(--rd-font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.014em; text-wrap: balance; } .rd-copy { margin: 0; color: var(--rd-slate); line-height: 1.68; } .rd-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--rd-brand); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .rd-eyebrow::before { width: 28px; height: 2px; border-radius: 999px; background: var(--rd-cta); content: ""; } .rd-pill { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; background: var(--rd-tide); color: var(--rd-brand); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; padding: 9px 12px; text-transform: uppercase; } .rd-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid transparent; border-radius: var(--rd-radius-md); cursor: pointer; font-family: var(--rd-font-body); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease; white-space: nowrap; } .rd-button:where(:active) { transform: translateY(1px) scale(0.99); } .rd-button-primary { background: var(--rd-cta); color: var(--rd-ink); box-shadow: 0 12px 22px -18px rgb(245 158 11 / 0.75); } .rd-button-primary:where(:hover) { background: var(--rd-cta-hover); } .rd-button-brand { background: var(--rd-brand); color: var(--rd-surface); } .rd-button-brand:where(:hover) { background: var(--rd-brand-hover); } .rd-button-secondary { border-color: var(--rd-mist); background: var(--rd-surface); color: var(--rd-ink); } .rd-button-secondary:where(:hover) { border-color: var(--rd-brand); background: var(--rd-tide); color: var(--rd-brand); } .rd-button-zalo { background: var(--rd-zalo); color: var(--rd-surface); } .rd-button-zalo:where(:hover) { opacity: 0.9; } .rd-icon { width: 20px; height: 20px; flex: 0 0 auto; } .rd-icon-small { width: 16px; height: 16px; flex: 0 0 auto; } .rd-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--rd-radius-md); background: var(--rd-brand); color: var(--rd-surface); box-shadow: var(--rd-shadow-soft); } .rd-logo-mark svg { width: 24px; height: 24px; } .rd-field { display: grid; gap: 8px; } .rd-field label { color: var(--rd-slate); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .rd-input { width: 100%; height: 48px; border: 1px solid var(--rd-mist); border-radius: var(--rd-radius-md); background: var(--rd-surface); color: var(--rd-ink); font-family: var(--rd-font-body); font-size: 16px; outline: none; padding: 0 16px; transition: border-color 180ms ease, box-shadow 180ms ease; } .rd-input:where(:focus) { border-color: var(--rd-brand); box-shadow: 0 0 0 3px rgb(15 118 110 / 0.16); } .rd-select { width: 100%; height: 48px; appearance: none; border: 1px solid var(--rd-mist); border-radius: var(--rd-radius-md); background-color: var(--rd-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23425466'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 20px; color: var(--rd-ink); cursor: pointer; font-family: var(--rd-font-body); font-size: 15px; outline: none; padding: 0 44px 0 16px; transition: border-color 180ms ease, box-shadow 180ms ease; } .rd-select:where(:focus) { border-color: var(--rd-brand); box-shadow: 0 0 0 3px rgb(15 118 110 / 0.16); } .rd-image-cover { display: block; width: 100%; height: 100%; object-fit: cover; } .rd-link { color: inherit; text-decoration: none; transition: color 180ms ease; } .rd-link:where(:hover) { color: var(--rd-brand); } .rd-scroll-rail { scrollbar-width: none; } .rd-scroll-rail::-webkit-scrollbar { display: none; }