/* SaLy Build — base.css: font, bố cục, thành phần dùng chung cho mọi thương hiệu (theo lypham.vn). Chỉ dùng biến; màu nằm ở /_brand/brand.css. Lớp .saly-* là "API giao diện" cho app — app không sửa file này. Tông nhạt sinh bằng color-mix() từ biến thương hiệu (24% primary = #FCE6D3, 10% secondary = #E6F1EC của lypham.vn). */ /* Font tự lưu trữ (SIL OFL 1.1, Google Fonts) — chỉ tập Latin + Vietnamese, trục wght 400–700 */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/_shared/fonts/inter-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/_shared/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/_shared/fonts/oswald-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/_shared/fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/_shared/fonts/dancing-script-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/_shared/fonts/dancing-script-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Biến chung (font, bo góc, khoảng cách) — giống nhau ở mọi thương hiệu */ :root { --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-heading: "Oswald", "Arial Narrow", Arial, sans-serif; --font-accent: "Dancing Script", "Segoe Script", cursive; --radius: 16px; --radius-pill: 999px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; } /* Nền tảng phần tử */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--brand-text); background: var(--brand-surface); -webkit-font-smoothing: antialiased; } saly-header, saly-footer { display: block; flex: none; } saly-header { min-height: 4.25rem; } /* giữ chỗ tới khi vỏ dựng xong, tránh nhảy bố cục */ h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; color: var(--brand-text); text-wrap: balance; } h1 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); text-transform: uppercase; color: var(--brand-secondary); } h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.0625rem; } p, ul, ol { margin: 0 0 var(--space-4); } a { color: var(--brand-secondary); text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; } img, svg { max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand-secondary); } hr { margin: var(--space-5) 0; border: 0; border-top: 1px solid var(--brand-border); } :focus-visible { outline: 3px solid var(--brand-secondary); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-surface-alt)); color: var(--brand-text); } /* Bố cục — ưu tiên điện thoại (375px), mở rộng ở 768px/1024px */ .saly-main { flex: 1 0 auto; width: 100%; max-width: 72rem; margin: 0 auto; padding: var(--space-5) var(--space-4) 3rem; } .saly-stack { display: grid; gap: var(--space-4); } .saly-stack > * { margin: 0; } .saly-stack > *, .saly-grid > * { min-width: 0; } /* chặn bảng/tab rộng làm phình cột grid trên điện thoại */ .saly-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .saly-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } /* Chữ */ .saly-lead { font-size: 1.125rem; color: var(--brand-muted); } .saly-muted { color: var(--brand-muted); } .saly-accent { font-family: var(--font-accent); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--brand-secondary); } .saly-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .saly-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Thẻ */ .saly-card { padding: var(--space-5) var(--space-4); background: var(--brand-surface-alt); border: 1px solid var(--brand-border); border-radius: var(--radius); box-shadow: var(--brand-shadow); } .saly-card > :last-child { margin-bottom: 0; } /* Nút — bo tròn hết cỡ; rê chuột: lớp màu dâng từ dưới lên như lypham.vn */ .saly-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 3rem; min-height: 3rem; padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-pill); font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; color: var(--brand-on-primary); background: var(--brand-primary); box-shadow: var(--brand-shadow); transition: color 0.25s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .saly-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-secondary); transform: scaleY(0); transform-origin: bottom; transition: transform 0.35s ease; } .saly-btn:active { transform: translateY(1px); } .saly-btn--secondary { color: var(--brand-secondary); background: var(--brand-surface-alt); box-shadow: inset 0 0 0 2px var(--brand-secondary), var(--brand-shadow); } .saly-btn--secondary::after { background: var(--brand-primary); } .saly-btn--block { display: flex; width: 100%; } @media (hover: hover) { .saly-btn:hover { color: var(--brand-on-secondary); } .saly-btn--secondary:hover { color: var(--brand-on-primary); } .saly-btn:hover::after { transform: scaleY(1); } } .saly-btn:disabled, .saly-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; box-shadow: none; transform: none; } .saly-btn:disabled::after, .saly-btn[aria-disabled="true"]::after { transform: scaleY(0); } /* Ô nhập — viền đạt tương phản ≥3:1 (pha 50% màu chữ), rê chuột viền cam, focus viền xanh */ .saly-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } :where(.saly-field, .saly-note) { margin: 0 0 var(--space-4); } /* :where = độ ưu tiên 0 → .saly-stack điều khiển khoảng cách */ .saly-field > label, .saly-field__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; } .saly-field__hint { font-size: 0.875rem; color: var(--brand-muted); } .saly-field__error { padding-left: var(--space-2); border-left: 3px solid var(--brand-danger); font-size: 0.875rem; font-weight: 600; } .saly-check { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; cursor: pointer; } .saly-input, .saly-select { display: block; width: 100%; min-height: 3rem; padding: var(--space-3) var(--space-4); font-size: 1rem; line-height: 1.4; color: var(--brand-text); background-color: var(--brand-surface-alt); appearance: none; border: 1px solid color-mix(in srgb, var(--brand-text) 50%, var(--brand-surface-alt)); border-radius: calc(var(--radius) * 0.625); transition: border-color 0.2s ease; } textarea.saly-input { min-height: 6rem; resize: vertical; } .saly-input::placeholder { color: var(--brand-muted); opacity: 1; } .saly-input:hover, .saly-select:hover { border-color: var(--brand-primary-strong); } .saly-input:focus-visible, .saly-select:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 0; border-color: var(--brand-secondary); } .saly-input[aria-invalid="true"], .saly-select[aria-invalid="true"] { border-color: var(--brand-danger); } .saly-input:disabled, .saly-select:disabled { background-color: var(--brand-surface); cursor: not-allowed; } .saly-select { padding-right: 2.75rem; cursor: pointer; background-repeat: no-repeat; background-size: 0.375rem 0.375rem; background-image: linear-gradient(45deg, transparent 50%, var(--brand-text) 50%), linear-gradient(135deg, var(--brand-text) 50%, transparent 50%); background-position: calc(100% - 1.375rem) 52%, calc(100% - 1rem) 52%; } /* Bảng — bọc trong
để cuộn ngang trên điện thoại */ .saly-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .saly-table table, table.saly-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .saly-table th, .saly-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--brand-border); } .saly-table thead th { font-weight: 600; white-space: nowrap; color: var(--brand-on-secondary); background: var(--brand-secondary); } .saly-table tbody tr:hover { background: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-surface-alt)); } .saly-table tfoot td, .saly-table tfoot th { font-weight: 700; border-bottom: 0; } .saly-table .saly-num { text-align: right; } /* Khối kết quả và chỉ số */ .saly-result { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: color-mix(in srgb, var(--brand-secondary) 10%, var(--brand-surface-alt)); border-left: 4px solid var(--brand-secondary); } .saly-result__label { font-size: 0.9375rem; font-weight: 600; } .saly-result__value { font-family: var(--font-heading); font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-weight: 600; line-height: 1.2; color: var(--brand-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .saly-result__note { font-size: 0.875rem; color: var(--brand-muted); } .saly-result--highlight { color: var(--brand-on-secondary); background: var(--brand-secondary); border-left-color: var(--brand-primary); } .saly-result--highlight .saly-result__value, .saly-result--highlight .saly-result__note { color: var(--brand-on-secondary); } .saly-stat { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--brand-surface-alt); border: 1px solid var(--brand-border); border-top: 4px solid var(--brand-primary); border-radius: var(--radius); } .saly-stat__label { font-size: 0.875rem; font-weight: 500; color: var(--brand-muted); } .saly-stat__value { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .saly-stat__note { font-size: 0.8125rem; color: var(--brand-muted); } /* Thẻ chuyển (tabs):