@cyberskill/design 2.5.0 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN.md +3 -3
- package/README.md +6 -5
- package/SECURITY.md +4 -4
- package/VERSION +1 -1
- package/_ds_bundle.js +2 -2
- package/_ds_bundle.js.map +1 -1
- package/_ds_manifest.json +0 -96
- package/_esm/cs.mjs +2 -2
- package/base/a11y.css +6 -11
- package/components/ai/ai-conversation.card.html +1 -1
- package/components/ai/ai-lumi.card.html +1 -1
- package/components/ai/ai.card.html +1 -1
- package/components/api-discovery.json +6 -6
- package/components/api-index.json +57 -16
- package/components/brand/brand.card.html +1 -1
- package/components/button/buttons.card.html +1 -1
- package/components/contracts.json +5 -5
- package/components/data/collections.card.html +1 -1
- package/components/data/data.card.html +1 -1
- package/components/datatable/datatable.card.html +1 -1
- package/components/dialog/dialog.card.html +1 -1
- package/components/feedback/feedback-2.card.html +1 -1
- package/components/feedback/feedback.card.html +2 -2
- package/components/forms/Cascader.jsx +1 -1
- package/components/forms/ColorPicker.jsx +1 -1
- package/components/forms/InlineEdit.jsx +12 -2
- package/components/forms/SearchField.jsx +1 -1
- package/components/forms/TreeSelect.jsx +1 -1
- package/components/forms/forms-2.card.html +1 -1
- package/components/forms/forms.card.html +1 -1
- package/components/i18n/i18n.card.html +1 -1
- package/components/icon/icon.card.html +1 -1
- package/components/lifecycle.json +51 -10
- package/components/logo/logo.card.html +2 -2
- package/components/navigation/navigation.card.html +1 -1
- package/components/navigation/shell.card.html +1 -1
- package/components/overlays/alertdialog.card.html +1 -1
- package/components/overlays/overlays.card.html +1 -1
- package/components/prompt-api.json +3 -3
- package/components/release-compatibility.json +1 -1
- package/components/scenarios.json +15 -15
- package/components/specifications.json +453 -453
- package/components/static-html-reference.json +25 -25
- package/components/textfield/textfield.card.html +1 -1
- package/dist/esm/_esm/react.mjs +5 -5
- package/dist/esm/build.json +52 -52
- package/dist/esm/chunks/{chunk-GLPQBE2J.mjs → chunk-4D7SFITE.mjs} +17 -3
- package/dist/esm/chunks/chunk-4D7SFITE.mjs.map +7 -0
- package/dist/esm/chunks/{chunk-MRXEJSQQ.mjs → chunk-B5V7HN5G.mjs} +5 -2
- package/dist/esm/chunks/{chunk-MRXEJSQQ.mjs.map → chunk-B5V7HN5G.mjs.map} +2 -2
- package/dist/esm/chunks/{chunk-5FQGNCKS.mjs → chunk-LU45KTWU.mjs} +2 -1
- package/dist/esm/chunks/{chunk-5FQGNCKS.mjs.map → chunk-LU45KTWU.mjs.map} +2 -2
- package/dist/esm/chunks/{chunk-D7A4ZCMJ.mjs → chunk-RUB6XN27.mjs} +5 -2
- package/dist/esm/chunks/{chunk-D7A4ZCMJ.mjs.map → chunk-RUB6XN27.mjs.map} +2 -2
- package/dist/esm/chunks/{chunk-FF5D53IP.mjs → chunk-SA7L22XE.mjs} +5 -2
- package/dist/esm/chunks/{chunk-FF5D53IP.mjs.map → chunk-SA7L22XE.mjs.map} +2 -2
- package/dist/esm/components/forms/Cascader.mjs +1 -1
- package/dist/esm/components/forms/ColorPicker.mjs +1 -1
- package/dist/esm/components/forms/InlineEdit.mjs +1 -1
- package/dist/esm/components/forms/SearchField.mjs +1 -1
- package/dist/esm/components/forms/TreeSelect.mjs +1 -1
- package/dist/styles.css +3177 -0
- package/dist/styles.min.css +1 -1
- package/docs/UPSTREAM.md +39 -0
- package/docs/consuming.md +1 -1
- package/docs/contrast-report.md +1 -1
- package/docs/conventions.md +1 -1
- package/docs/guideline-language.md +2 -2
- package/docs/reference-catalog.json +36 -24
- package/docs/release-notes.md +25 -1
- package/docs/static-html-reference.md +23 -23
- package/docs/template-inventory.json +125 -125
- package/docs/vi/UPSTREAM.md +39 -0
- package/docs/vi/consuming.md +1 -1
- package/docs/vi/contrast-report.md +1 -1
- package/docs/vi/conventions.md +1 -1
- package/docs/vi/entrypoints/DESIGN.md +3 -3
- package/docs/vi/entrypoints/README.md +6 -5
- package/docs/vi/guideline-language.md +2 -2
- package/docs/vi/release-notes.md +25 -1
- package/docs/vi/static-html-reference.md +23 -23
- package/docs/viewer.html +2 -2
- package/guidelines/atomic-view.html +5 -5
- package/guidelines/brand-iconography.html +1 -1
- package/guidelines/brand-imagery.html +1 -1
- package/guidelines/brand-interaction.html +1 -1
- package/guidelines/brand-voice.html +1 -1
- package/guidelines/colors-anchors.html +1 -1
- package/guidelines/colors-semantic.html +1 -1
- package/guidelines/colors-surfaces.html +1 -1
- package/guidelines/colors-text.html +1 -1
- package/guidelines/documents.html +1 -1
- package/guidelines/elements-components.html +1 -1
- package/guidelines/elements-concept.html +1 -1
- package/guidelines/elements-geometry.html +1 -1
- package/guidelines/elements-variants.html +1 -1
- package/guidelines/guideline-language.js +6 -5
- package/guidelines/motion-interaction.html +1 -1
- package/guidelines/motion.html +1 -1
- package/guidelines/responsive-bilingual.html +1 -1
- package/guidelines/rtl-preview.html +1 -1
- package/guidelines/spacing-breakpoints.html +1 -1
- package/guidelines/spacing-radius.html +1 -1
- package/guidelines/spacing-scale.html +1 -1
- package/guidelines/surfaces-aurora.html +1 -1
- package/guidelines/surfaces-depth.html +1 -1
- package/guidelines/surfaces-glass.html +1 -1
- package/guidelines/surfaces-shadow.html +1 -1
- package/guidelines/type-families.html +1 -1
- package/guidelines/type-lineheight.html +1 -1
- package/guidelines/type-scale.html +1 -1
- package/guidelines/type-weights.html +1 -1
- package/package.json +12 -4
- package/styles/components/manifest.json +130 -130
- package/styles.layered.css +8 -10
- package/styles.layered.provenance.json +3 -3
- package/templates/_ds-base.canonical.js +6 -4
- package/templates/app-shell/ds-base.js +6 -4
- package/templates/article/ds-base.js +6 -4
- package/templates/auth/ds-base.js +6 -4
- package/templates/bod-deck/ds-base.js +6 -4
- package/templates/bod-investor-update/ds-base.js +6 -4
- package/templates/bod-memo/ds-base.js +6 -4
- package/templates/bod-minutes/ds-base.js +6 -4
- package/templates/bod-report/ds-base.js +6 -4
- package/templates/bod-resolution/ds-base.js +6 -4
- package/templates/culture-event-invite/ds-base.js +6 -4
- package/templates/dashboard/ds-base.js +6 -4
- package/templates/delivery-change-note/ds-base.js +6 -4
- package/templates/delivery-kickoff/ds-base.js +6 -4
- package/templates/delivery-qbr-deck/ds-base.js +6 -4
- package/templates/delivery-runbook/ds-base.js +6 -4
- package/templates/delivery-status-email/ds-base.js +6 -4
- package/templates/doc-style-guide/ds-base.js +6 -4
- package/templates/doc-suite-index/ds-base.js +6 -4
- package/templates/doc-templates/ds-base.js +6 -4
- package/templates/email/ds-base.js +6 -4
- package/templates/finance-dunning-email/ds-base.js +6 -4
- package/templates/finance-expense-report/ds-base.js +6 -4
- package/templates/finance-invoice/ds-base.js +6 -4
- package/templates/finance-quote/ds-base.js +6 -4
- package/templates/hr-announcement/ds-base.js +6 -4
- package/templates/hr-interview-kit/ds-base.js +6 -4
- package/templates/hr-offboarding/ds-base.js +6 -4
- package/templates/hr-performance-review/ds-base.js +6 -4
- package/templates/hr-pip/ds-base.js +6 -4
- package/templates/kitchen-sink.html +1 -1
- package/templates/legal-msa/ds-base.js +6 -4
- package/templates/legal-sow/ds-base.js +6 -4
- package/templates/marketing-campaign-brief/ds-base.js +6 -4
- package/templates/marketing-case-study/ds-base.js +6 -4
- package/templates/marketing-launch/ds-base.js +6 -4
- package/templates/marketing-newsletter/ds-base.js +6 -4
- package/templates/marketing-page/ds-base.js +6 -4
- package/templates/marketing-press-release/ds-base.js +6 -4
- package/templates/marketing-social-kit/ds-base.js +6 -4
- package/templates/sales-one-pager/ds-base.js +6 -4
- package/templates/sales-proposal-deck/ds-base.js +6 -4
- package/templates/settings/ds-base.js +6 -4
- package/templates/slide-deck/ds-base.js +6 -4
- package/templates/team-meeting-agenda/ds-base.js +6 -4
- package/templates/tech-incident-report/ds-base.js +6 -4
- package/templates/tech-release-notes/ds-base.js +6 -4
- package/templates/tech-retro/ds-base.js +6 -4
- package/templates/tech-rfc/ds-base.js +6 -4
- package/templates/vn-appointment-transfer/ds-base.js +6 -4
- package/templates/vn-certificate-of-employment/ds-base.js +6 -4
- package/templates/vn-code-of-conduct/ds-base.js +6 -4
- package/templates/vn-compensation-regulation/ds-base.js +6 -4
- package/templates/vn-contract-amendment/ds-base.js +6 -4
- package/templates/vn-contractor-agreement/ds-base.js +6 -4
- package/templates/vn-data-protection-policy/ds-base.js +6 -4
- package/templates/vn-disciplinary-case-file/ds-base.js +6 -4
- package/templates/vn-disciplinary-schedule/ds-base.js +6 -4
- package/templates/vn-employee-request/ds-base.js +6 -4
- package/templates/vn-exit-handover/ds-base.js +6 -4
- package/templates/vn-foreign-employee-pack/ds-base.js +6 -4
- package/templates/vn-framework-agreement/ds-base.js +6 -4
- package/templates/vn-grassroots-democracy/ds-base.js +6 -4
- package/templates/vn-infosec-policy/ds-base.js +6 -4
- package/templates/vn-internal-labor-regulations/ds-base.js +6 -4
- package/templates/vn-internship-agreement/ds-base.js +6 -4
- package/templates/vn-job-description/ds-base.js +6 -4
- package/templates/vn-labor-contract/ds-base.js +6 -4
- package/templates/vn-labour-management-book/ds-base.js +6 -4
- package/templates/vn-mutual-nda/ds-base.js +6 -4
- package/templates/vn-ndnca-ip/ds-base.js +6 -4
- package/templates/vn-offer-letter/ds-base.js +6 -4
- package/templates/vn-onboarding-checklist/ds-base.js +6 -4
- package/templates/vn-pdpl-consent/ds-base.js +6 -4
- package/templates/vn-performance-evaluation-regulation/ds-base.js +6 -4
- package/templates/vn-performance-review-form/ds-base.js +6 -4
- package/templates/vn-phantom-stock/ds-base.js +6 -4
- package/templates/vn-probation-contract/ds-base.js +6 -4
- package/templates/vn-receipt-acknowledgement/ds-base.js +6 -4
- package/templates/vn-remote-work-policy/ds-base.js +6 -4
- package/templates/vn-resignation-letter/ds-base.js +6 -4
- package/templates/vn-salary-scale/ds-base.js +6 -4
- package/templates/vn-sow-appendix/ds-base.js +6 -4
- package/templates/vn-termination-decision/ds-base.js +6 -4
- package/templates/vn-total-rewards-appendix/ds-base.js +6 -4
- package/templates/vn-training-commitment/ds-base.js +6 -4
- package/templates/vn-travel-expense-policy/ds-base.js +6 -4
- package/tokens/declarations.json +2 -128
- package/tokens/element-seeds.json +1 -1
- package/tokens/modes/dark__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/modes/index.json +260 -260
- package/tokens/modes/light__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/native/CSModes.kt +3 -3
- package/tokens/native/CSModes.swift +3 -3
- package/tokens/native/CSTokens.kt +1 -1
- package/tokens/native/CSTokens.swift +1 -1
- package/tokens/native/cs_modes.dart +3 -3
- package/tokens/native/cs_tokens.dart +1 -1
- package/tokens/native/mode-provenance.json +6 -6
- package/tokens/provenance.json +6 -6
- package/tokens/styles.css +1 -1
- package/tokens/tokens.dtcg.json +4 -4
- package/tokens/tokens.js +5 -5
- package/tokens/tokens.json +4 -4
- package/tokens/variables.css +0 -9
- package/ui_kits/deck/index.html +1 -1
- package/ui_kits/status-hub/index.html +1 -1
- package/ui_kits/status-hub/login.html +1 -1
- package/ui_kits/status-hub/project.html +1 -1
- package/ui_kits/status-hub/settings.html +1 -1
- package/ui_kits/status-hub/static-locale.js +2 -0
- package/ui_kits/website/careers.html +1 -1
- package/ui_kits/website/chat.html +1 -1
- package/ui_kits/website/index.html +1 -1
- package/ui_kits/website/work.html +1 -1
- package/dist/esm/chunks/chunk-GLPQBE2J.mjs.map +0 -7
|
@@ -34,7 +34,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
```html
|
|
37
|
-
<span class="cs-ai-disclosure"><button type="button" class="cs-ai-disclosure__badge" aria-expanded="false">AI assisted</button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; line-height: 21px; letter-spacing: normal; color: rgb(255, 255, 255); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
37
|
+
<span class="cs-ai-disclosure"><button type="button" class="cs-ai-disclosure__badge" aria-expanded="false">AI assisted</button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; line-height: 21px; letter-spacing: normal; color: rgb(255, 255, 255); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
38
38
|
```
|
|
39
39
|
|
|
40
40
|
## Accordion
|
|
@@ -522,7 +522,7 @@ rendered-dom-reference — Gắn mẫu với cấu hình đã ghi; chưa thực
|
|
|
522
522
|
|
|
523
523
|
Chỉ là ảnh chụp DOM. Sao chép HTML không cài đặt trạng thái React, xử lý sự kiện, quản lý tiêu điểm hay hành vi trợ năng.
|
|
524
524
|
|
|
525
|
-
Nguồn: `components/forms/Cascader.jsx`, SHA-256 `
|
|
525
|
+
Nguồn: `components/forms/Cascader.jsx`, SHA-256 `09380cc01ef61a3cc0fb0d4f065345f4e31a6cd197cd4a9d837ffdc144b22bde`.
|
|
526
526
|
|
|
527
527
|
Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao gồm ngữ cảnh bọc đã khai báo):
|
|
528
528
|
|
|
@@ -548,7 +548,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
548
548
|
```
|
|
549
549
|
|
|
550
550
|
```html
|
|
551
|
-
<div class="cs-cascader"><button id="reference-id-001" aria-label="Region" type="button" class="cs-treeselect__field" aria-haspopup="listbox" aria-expanded="false"><span>Alpha</span><span aria-hidden="true">▾</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
551
|
+
<div class="cs-cascader"><button id="reference-id-001" aria-label="Region" type="button" class="cs-treeselect__field" aria-haspopup="listbox" aria-expanded="false"><span>Alpha</span><span aria-hidden="true">▾</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
552
552
|
```
|
|
553
553
|
|
|
554
554
|
## Chart
|
|
@@ -704,7 +704,7 @@ rendered-dom-reference — Gắn mẫu với cấu hình đã ghi; chưa thực
|
|
|
704
704
|
|
|
705
705
|
Chỉ là ảnh chụp DOM. Sao chép HTML không cài đặt trạng thái React, xử lý sự kiện, quản lý tiêu điểm hay hành vi trợ năng.
|
|
706
706
|
|
|
707
|
-
Nguồn: `components/forms/ColorPicker.jsx`, SHA-256 `
|
|
707
|
+
Nguồn: `components/forms/ColorPicker.jsx`, SHA-256 `90d7990c0e97ca31592bb7a48153d85944016b4424c0ac58837c8295c33d8695`.
|
|
708
708
|
|
|
709
709
|
Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao gồm ngữ cảnh bọc đã khai báo):
|
|
710
710
|
|
|
@@ -718,7 +718,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
718
718
|
```
|
|
719
719
|
|
|
720
720
|
```html
|
|
721
|
-
<span class="cs-colorpicker"><button id="reference-id-001" aria-label="Accent: #F4BA17" type="button" class="cs-colorpicker__field" aria-expanded="false"><i style="background: rgb(244, 186, 23);"></i><code>#F4BA17</code></button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
721
|
+
<span class="cs-colorpicker"><button id="reference-id-001" aria-label="Accent: #F4BA17" type="button" class="cs-colorpicker__field" aria-expanded="false"><i style="background: rgb(244, 186, 23);"></i><code>#F4BA17</code></button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
722
722
|
```
|
|
723
723
|
|
|
724
724
|
## Combobox
|
|
@@ -751,7 +751,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
751
751
|
```
|
|
752
752
|
|
|
753
753
|
```html
|
|
754
|
-
<div class="cs-combobox"><input role="combobox" aria-expanded="false" aria-autocomplete="list" aria-label="Project" placeholder="Select or type…" id="reference-id-001" value="Alpha"><span class="cs-combobox__caret" aria-hidden="true">▾</span></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
754
|
+
<div class="cs-combobox"><input role="combobox" aria-expanded="false" aria-autocomplete="list" aria-label="Project" placeholder="Select or type…" id="reference-id-001" value="Alpha"><span class="cs-combobox__caret" aria-hidden="true">▾</span></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
755
755
|
```
|
|
756
756
|
|
|
757
757
|
## CommandPalette
|
|
@@ -861,7 +861,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
861
861
|
```
|
|
862
862
|
|
|
863
863
|
```html
|
|
864
|
-
<div class="cs-ctxmenu-zone" role="group" aria-label="Context menu" tabindex="0"><div>Reference <example> & "quoted" text</div></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
864
|
+
<div class="cs-ctxmenu-zone" role="group" aria-label="Context menu" tabindex="0"><div>Reference <example> & "quoted" text</div></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
865
865
|
```
|
|
866
866
|
|
|
867
867
|
## DataGrid
|
|
@@ -950,7 +950,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
950
950
|
```
|
|
951
951
|
|
|
952
952
|
```html
|
|
953
|
-
<div class="cs-datepicker"><button type="button" class="cs-datepicker__field" aria-haspopup="dialog" aria-expanded="false" aria-label="Date" id="reference-id-001"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M8 3v4M16 3v4M3 10h18"></path></svg><span>20 Oct 2026</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
953
|
+
<div class="cs-datepicker"><button type="button" class="cs-datepicker__field" aria-haspopup="dialog" aria-expanded="false" aria-label="Date" id="reference-id-001"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"></rect><path d="M8 3v4M16 3v4M3 10h18"></path></svg><span>20 Oct 2026</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
954
954
|
```
|
|
955
955
|
|
|
956
956
|
## DescriptionList
|
|
@@ -1162,7 +1162,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
1162
1162
|
```
|
|
1163
1163
|
|
|
1164
1164
|
```html
|
|
1165
|
-
<div class="cs-fab"><button type="button" class="cs-fab__main" aria-label="Create">+</button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
1165
|
+
<div class="cs-fab"><button type="button" class="cs-fab__main" aria-label="Create">+</button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
1166
1166
|
```
|
|
1167
1167
|
|
|
1168
1168
|
## Form
|
|
@@ -1373,7 +1373,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
1373
1373
|
```
|
|
1374
1374
|
|
|
1375
1375
|
```html
|
|
1376
|
-
<span class="cs-hovercard"><button type="button">Hover reference</button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
1376
|
+
<span class="cs-hovercard"><button type="button">Hover reference</button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
1377
1377
|
```
|
|
1378
1378
|
|
|
1379
1379
|
## HumanReviewGate
|
|
@@ -1450,7 +1450,7 @@ rendered-dom-reference — Gắn mẫu với cấu hình đã ghi; chưa thực
|
|
|
1450
1450
|
|
|
1451
1451
|
Chỉ là ảnh chụp DOM. Sao chép HTML không cài đặt trạng thái React, xử lý sự kiện, quản lý tiêu điểm hay hành vi trợ năng.
|
|
1452
1452
|
|
|
1453
|
-
Nguồn: `components/forms/InlineEdit.jsx`, SHA-256 `
|
|
1453
|
+
Nguồn: `components/forms/InlineEdit.jsx`, SHA-256 `9f242ef99af077e5c9b68d36cc9539fac0819e66f7995fa6a93ecb7793bf3484`.
|
|
1454
1454
|
|
|
1455
1455
|
Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao gồm ngữ cảnh bọc đã khai báo):
|
|
1456
1456
|
|
|
@@ -1976,7 +1976,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
1976
1976
|
```
|
|
1977
1977
|
|
|
1978
1978
|
```html
|
|
1979
|
-
<span class="cs-mentions"><textarea class="cs-field__control" rows="3" placeholder="Add a note — @ to mention" aria-label="Message" aria-autocomplete="list" aria-haspopup="listbox"></textarea></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
1979
|
+
<span class="cs-mentions"><textarea class="cs-field__control" rows="3" placeholder="Add a note — @ to mention" aria-label="Message" aria-autocomplete="list" aria-haspopup="listbox"></textarea></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
1980
1980
|
```
|
|
1981
1981
|
|
|
1982
1982
|
## Menu
|
|
@@ -2014,7 +2014,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
2014
2014
|
```
|
|
2015
2015
|
|
|
2016
2016
|
```html
|
|
2017
|
-
<div class="cs-menu"><button type="button" aria-haspopup="menu" aria-expanded="true">Reference menu</button></div><span data-cs-floating-root="" lang="en" data-open="true" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"><div class="cs-menu__list" role="menu" aria-label="Menu" style="transition-property: opacity, color, background-color, border-color, box-shadow; position: fixed; inset: 30px auto auto 8px; transform: none; margin: 0px; box-sizing: border-box; overflow-y: auto; z-index: 60; max-width: 1264px; min-width: 200px; max-height: 682px; min-height: 0px;" data-cs-placement="bottom-start"><button type="button" role="menuitem" tabindex="0" class="cs-menu__item">Reference item</button></div></span>
|
|
2017
|
+
<div class="cs-menu"><button type="button" aria-haspopup="menu" aria-expanded="true">Reference menu</button></div><span data-cs-floating-root="" lang="en" data-open="true" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"><div class="cs-menu__list" role="menu" aria-label="Menu" style="transition-property: opacity, color, background-color, border-color, box-shadow; position: fixed; inset: 30px auto auto 8px; transform: none; margin: 0px; box-sizing: border-box; overflow-y: auto; z-index: 60; max-width: 1264px; min-width: 200px; max-height: 682px; min-height: 0px;" data-cs-placement="bottom-start"><button type="button" role="menuitem" tabindex="0" class="cs-menu__item">Reference item</button></div></span>
|
|
2018
2018
|
```
|
|
2019
2019
|
|
|
2020
2020
|
## MenuItem
|
|
@@ -2051,7 +2051,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
2051
2051
|
```
|
|
2052
2052
|
|
|
2053
2053
|
```html
|
|
2054
|
-
<div class="cs-menu"><button type="button" aria-haspopup="menu" aria-expanded="true">Reference menu</button></div><span data-cs-floating-root="" lang="en" data-open="true" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"><div class="cs-menu__list" role="menu" aria-label="Menu" style="transition-property: opacity, color, background-color, border-color, box-shadow; position: fixed; inset: 30px auto auto 8px; transform: none; margin: 0px; box-sizing: border-box; overflow-y: auto; z-index: 60; max-width: 1264px; min-width: 200px; max-height: 682px; min-height: 0px;" data-cs-placement="bottom-start"><button type="button" role="menuitem" tabindex="0" class="cs-menu__item">Reference item</button></div></span>
|
|
2054
|
+
<div class="cs-menu"><button type="button" aria-haspopup="menu" aria-expanded="true">Reference menu</button></div><span data-cs-floating-root="" lang="en" data-open="true" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"><div class="cs-menu__list" role="menu" aria-label="Menu" style="transition-property: opacity, color, background-color, border-color, box-shadow; position: fixed; inset: 30px auto auto 8px; transform: none; margin: 0px; box-sizing: border-box; overflow-y: auto; z-index: 60; max-width: 1264px; min-width: 200px; max-height: 682px; min-height: 0px;" data-cs-placement="bottom-start"><button type="button" role="menuitem" tabindex="0" class="cs-menu__item">Reference item</button></div></span>
|
|
2055
2055
|
```
|
|
2056
2056
|
|
|
2057
2057
|
## Menubar
|
|
@@ -2082,7 +2082,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
2082
2082
|
```
|
|
2083
2083
|
|
|
2084
2084
|
```html
|
|
2085
|
-
<div class="cs-menubar" role="menubar" aria-label="Application menu"><span class="cs-menubar__wrap"><button id="reference-id-001" type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" tabindex="0" class="cs-menubar__top">File</button></span></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
2085
|
+
<div class="cs-menubar" role="menubar" aria-label="Application menu"><span class="cs-menubar__wrap"><button id="reference-id-001" type="button" role="menuitem" aria-haspopup="menu" aria-expanded="false" tabindex="0" class="cs-menubar__top">File</button></span></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
2086
2086
|
```
|
|
2087
2087
|
|
|
2088
2088
|
## NativeSelect
|
|
@@ -2165,7 +2165,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
2165
2165
|
```
|
|
2166
2166
|
|
|
2167
2167
|
```html
|
|
2168
|
-
<nav class="cs-navmenu"><a href="#reference" class="cs-navmenu__top">Reference</a></nav><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
2168
|
+
<nav class="cs-navmenu"><a href="#reference" class="cs-navmenu__top">Reference</a></nav><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
2169
2169
|
```
|
|
2170
2170
|
|
|
2171
2171
|
## NumberField
|
|
@@ -2270,7 +2270,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
2270
2270
|
```
|
|
2271
2271
|
|
|
2272
2272
|
```html
|
|
2273
|
-
<span class="cs-popconfirm"><button type="button" aria-haspopup="dialog" aria-expanded="false">Confirm reference</button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
2273
|
+
<span class="cs-popconfirm"><button type="button" aria-haspopup="dialog" aria-expanded="false">Confirm reference</button></span><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
2274
2274
|
```
|
|
2275
2275
|
|
|
2276
2276
|
## Popover
|
|
@@ -2303,7 +2303,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
2303
2303
|
```
|
|
2304
2304
|
|
|
2305
2305
|
```html
|
|
2306
|
-
<span class="cs-popover"><button type="button" aria-haspopup="dialog" aria-expanded="true">Reference details</button></span><span data-cs-floating-root="" lang="en" data-open="true" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"><div class="cs-popover__panel" role="dialog" aria-label="Reference details" style="transition-property: opacity, color, background-color, border-color, box-shadow; position: fixed; inset: 32px auto auto 8px; transform: none; margin: 0px; box-sizing: border-box; overflow-y: auto; z-index: 60; max-width: 1264px; min-width: 240px; max-height: 680px; min-height: 0px;" data-cs-placement="bottom-start">Reference <example> & "quoted" text</div></span>
|
|
2306
|
+
<span class="cs-popover"><button type="button" aria-haspopup="dialog" aria-expanded="true">Reference details</button></span><span data-cs-floating-root="" lang="en" data-open="true" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"><div class="cs-popover__panel" role="dialog" aria-label="Reference details" style="transition-property: opacity, color, background-color, border-color, box-shadow; position: fixed; inset: 32px auto auto 8px; transform: none; margin: 0px; box-sizing: border-box; overflow-y: auto; z-index: 60; max-width: 1264px; min-width: 240px; max-height: 680px; min-height: 0px;" data-cs-placement="bottom-start">Reference <example> & "quoted" text</div></span>
|
|
2307
2307
|
```
|
|
2308
2308
|
|
|
2309
2309
|
## ProgressBar
|
|
@@ -2534,7 +2534,7 @@ rendered-dom-reference — Gắn mẫu với cấu hình đã ghi; chưa thực
|
|
|
2534
2534
|
|
|
2535
2535
|
Chỉ là ảnh chụp DOM. Sao chép HTML không cài đặt trạng thái React, xử lý sự kiện, quản lý tiêu điểm hay hành vi trợ năng.
|
|
2536
2536
|
|
|
2537
|
-
Nguồn: `components/forms/SearchField.jsx`, SHA-256 `
|
|
2537
|
+
Nguồn: `components/forms/SearchField.jsx`, SHA-256 `e48eec5e6f3d65719ea4f72e833d67a6b05d2cc6fb49b53a621d0e832f33838e`.
|
|
2538
2538
|
|
|
2539
2539
|
Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao gồm ngữ cảnh bọc đã khai báo):
|
|
2540
2540
|
|
|
@@ -3185,7 +3185,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
3185
3185
|
```
|
|
3186
3186
|
|
|
3187
3187
|
```html
|
|
3188
|
-
<div class="cs-toolbar" role="toolbar" aria-orientation="horizontal"><button type="button" class="cs-toolbar__btn" tabindex="0"><span>Reference action</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
3188
|
+
<div class="cs-toolbar" role="toolbar" aria-orientation="horizontal"><button type="button" class="cs-toolbar__btn" tabindex="0"><span>Reference action</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: start; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
3189
3189
|
```
|
|
3190
3190
|
|
|
3191
3191
|
## Tooltip
|
|
@@ -3216,7 +3216,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
3216
3216
|
```
|
|
3217
3217
|
|
|
3218
3218
|
```html
|
|
3219
|
-
<span class="cs-tooltip" data-managed="" data-open="false"><button type="button" aria-describedby="reference-id-001">Reference action</button></span><span data-cs-floating-root="" lang="en" data-managed="" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"><span id="reference-id-001" class="cs-tooltip__bubble" role="tooltip" hidden="">Reference help</span></span>
|
|
3219
|
+
<span class="cs-tooltip" data-managed="" data-open="false"><button type="button" aria-describedby="reference-id-001">Reference action</button></span><span data-cs-floating-root="" lang="en" data-managed="" data-open="false" style="display: contents; font-family: Arial; font-size: 13.3333px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; color: rgb(0, 0, 0); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"><span id="reference-id-001" class="cs-tooltip__bubble" role="tooltip" hidden="">Reference help</span></span>
|
|
3220
3220
|
```
|
|
3221
3221
|
|
|
3222
3222
|
## Tour
|
|
@@ -3320,7 +3320,7 @@ rendered-dom-reference — Gắn mẫu với cấu hình đã ghi; chưa thực
|
|
|
3320
3320
|
|
|
3321
3321
|
Chỉ là ảnh chụp DOM. Sao chép HTML không cài đặt trạng thái React, xử lý sự kiện, quản lý tiêu điểm hay hành vi trợ năng.
|
|
3322
3322
|
|
|
3323
|
-
Nguồn: `components/forms/TreeSelect.jsx`, SHA-256 `
|
|
3323
|
+
Nguồn: `components/forms/TreeSelect.jsx`, SHA-256 `ab5bc70e1cb1ab10df72a39456e4f4ac88e7907c25cd1dde8ded1d9c5c8b31e3`.
|
|
3324
3324
|
|
|
3325
3325
|
Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao gồm ngữ cảnh bọc đã khai báo):
|
|
3326
3326
|
|
|
@@ -3344,7 +3344,7 @@ Cấu hình mẫu (mô tả thành phần nằm trong tệp danh mục; HTML bao
|
|
|
3344
3344
|
```
|
|
3345
3345
|
|
|
3346
3346
|
```html
|
|
3347
|
-
<div class="cs-treeselect"><button id="reference-id-001" aria-label="Region" type="button" class="cs-treeselect__field" aria-haspopup="tree" aria-expanded="false"><span>Alpha</span><span aria-hidden="true">▾</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --_cs-dark-doc-slate: #26323A; --cs-font-weight-extrabold: 800; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --_cs-light-accent-ink: #45210E; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-heading-weight: 700; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-space-1: 4px; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-component-textfield-paddingX: 12px; --cs-depth-bg: 0; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-depth-nav: 50; --cs-doc-ink: #1A1614; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-component-button-gap: 8px; --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-glass-standard-opacity: 80%; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --_cs-light-accent-strong: #916D11; --cs-density-space-5: 20px; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --cs-color-surface-page: #FFFDF8; --_cs-dark-doc-ink: #1A1614; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --_cs-dark-accent-on: #45210E; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-breakpoint-xs: 0px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-component-button-md-padding-x: 20px; --_cs-dark-accent-grad-a: #F4BA17; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --_cs-light-doc-slate: #26323A; --_cs-light-doc-fill: #FDE68A; --cs-color-accent-ochre: #F4BA17; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-16: 64px; --cs-font-weight-regular: 400; --cs-space-24: 96px; --_cs-dark-component-textfield-border-default: #5a4636; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-component-button-xs-paddingY: 4px; --cs-radius-sm: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-density-space-2: 8px; --cs-depth-modal: 100;"></span>
|
|
3347
|
+
<div class="cs-treeselect"><button id="reference-id-001" aria-label="Region" type="button" class="cs-treeselect__field" aria-haspopup="tree" aria-expanded="false"><span>Alpha</span><span aria-hidden="true">▾</span></button></div><span data-cs-floating-root="" lang="en" data-open="false" style="display: contents; font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: normal; color: rgb(69, 33, 14); direction: ltr; writing-mode: horizontal-tb; text-align: center; visibility: visible; pointer-events: auto; user-select: auto; --cs-component-button-md-min-height: 44px; --cs-color-semantic-danger-fg: #FFFFFF; --cs-glass-whisper-saturate: 110%; --_cs-dark-color-semantic-success-text: #68F798; --cs-glass-light-saturate: 130%; --cs-text-display: 3.75rem; --_cs-dark-color-semantic-danger: #FC9895; --cs-color-semantic-info-fg: #FFFFFF; --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42); --_cs-dark-color-border-default: #4a3a2c; --cs-glass-whisper-opacity: 60%; --cs-color-semantic-warning: #92400E; --cs-component-button-lg-padding-x: 28px; --cs-icon-lg: 24px; --cs-font-weight-semibold: 600; --cs-glass-heavy-blur: 24px; --cs-text-micro: 0.6875rem; --cs-accent-grad-b: #C4B78F; --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --_cs-dark-color-semantic-info-fg: #1a1108; --cs-depth-dropdown: 60; --_cs-dark-color-link: #FECD5D; --cs-font-size-2xs: 0.6875rem; --cs-font-size-xs: 0.75rem; --cs-space-10: 40px; --_cs-light-component-button-primary-fg: #FFFFFF; --cs-doc-fill-ink: #1A1614; --cs-font-line-height-tight: 1.15; --cs-focus-ring: 3px; --cs-font-weight-extrabold: 800; --_cs-dark-doc-slate: #26323A; --cs-breakpoint-sm: 640px; --cs-heading-weight-strong: 800; --cs-component-button-sm-min-height: 36px; --cs-glass-standard-saturate: 150%; --_cs-dark-color-semantic-info-text: #C7DFFF; --_cs-light-color-semantic-info-fg: #FFFFFF; --cs-text-h4: 1.25rem; --_cs-light-accent: #F4BA17; --cs-component-button-md-minHeight-coarse: 44px; --cs-accent-glow: rgba(244, 186, 23, 0.48); --cs-depth-toast: 200; --cs-glass-heavy-border: color-mix(in oklab, #E7D9C6 80%, transparent); --_cs-light-accent-ink: #45210E; --cs-accent-ink: #45210E; --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-glass-heavy-saturate: 180%; --cs-component-textfield-padding-x: 12px; --cs-depth-card: 10; --cs-depth-overlay: 80; --cs-glass-light-bg: color-mix(in oklab, #FFFFFF 70%, transparent); --cs-icon-sm: 16px; --_cs-dark-color-semantic-success-fg: #1a1108; --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62); --cs-accent-tint: #FBF4E9; --_cs-light-color-brand-ochre: #F4BA17; --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --_cs-dark-color-surface-raised: #2b1e14; --_cs-light-color-semantic-danger: #B42318; --_cs-dark-accent-grad-b: #C4B78F; --cs-color-semantic-danger: #B42318; --cs-glass-whisper-border: transparent; --_cs-light-color-semantic-danger-fg: #FFFFFF; --_cs-dark-color-text-primary: #f5ead9; --cs-space-1: 4px; --_cs-light-color-semantic-info: #1D4ED8; --cs-radius-full: 999px; --cs-component-button-md-padding-y: 12px; --cs-heading-weight: 700; --_cs-light-component-textfield-border-default: #BFA58F; --cs-letter-spacing-caps: 0.08em; --cs-breakpoint-2xl: 1536px; --_cs-dark-color-brand-ochre: #F4BA17; --cs-space-2: 8px; --cs-component-button-lg-padding-y: 16px; --cs-color-text-accent: #6E3B0E; --_cs-light-accent-on: #45210E; --cs-breakpoint-phone: 360px; --cs-color-surface-raised: #FBF4E9; --cs-glass-whisper-blur: 8px; --cs-density-space-4: 16px; --cs-text-h2: 1.875rem; --cs-radius-md: 8px; --_cs-dark-component-button-primary-fg: #1a1108; --cs-font-size-2xl: 1.875rem; --cs-heading-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-icon-md: 20px; --_cs-light-color-text-primary: #45210E; --_cs-light-color-semantic-info-text: #000A75; --cs-depth-bg: 0; --cs-component-textfield-paddingX: 12px; --_cs-dark-doc-fill: #FDE68A; --cs-glass-light-opacity: 70%; --cs-font-line-height-body: 1.5; --cs-doc-ink: #1A1614; --cs-depth-nav: 50; --_cs-light-color-semantic-warning: #92400E; --cs-style-pack: liquid-glass; --_cs-dark-color-link-hover: #f5ead9; --cs-glass-standard-blur: 16px; --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06); --cs-color-semantic-warning-text: #441801; --cs-component-button-xs-padding-x: 10px; --cs-font-size-xl: 1.5rem; --cs-doc-fill: #FDE68A; --cs-letter-spacing-normal: 0; --_cs-light-accent-grad-b: #C4B78F; --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); --_cs-border-subtle: color-mix(in oklab, #E7D9C6 76%, transparent); --cs-color-semantic-danger-text: #4B0502; --cs-glass-heavy-opacity: 90%; --cs-accent-bright: #F4BA17; --_cs-light-color-text-inverse: #FFFFFF; --_cs-dark-color-semantic-success: #4ADE80; --_cs-light-color-text-muted: #3F2D21; --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, #FFFDF8 25%, #050403) 68%, transparent); --cs-component-button-xs-minHeight-coarse: 44px; --cs-breakpoint-lg: 1024px; --_cs-dark-color-semantic-danger-fg: #1a1108; --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); --cs-space-0: 0px; --cs-component-button-md-paddingX: 20px; --_cs-light-color-surface-page: #FFFDF8; --cs-component-button-lg-paddingY: 16px; --cs-component-button-sm-min-height-coarse: 44px; --cs-glass-standard-opacity: 80%; --cs-component-button-gap: 8px; --cs-font-size-base: 1rem; --_cs-light-accent-glow: rgba(244, 186, 23, 0.48); --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-component-textfield-min-height: 44px; --cs-component-button-sm-paddingY: 8px; --cs-glass-heavy-bg: color-mix(in oklab, #FBF4E9 90%, transparent); --cs-component-button-xs-min-height: 28px; --_cs-light-color-border-default: #E7D9C6; --cs-accent-grad-a: #F4BA17; --cs-space-8: 32px; --cs-depth-section: 5; --_cs-light-accent-tint: #FBF4E9; --cs-duration-slow: 320ms; --cs-color-text-inverse: #FFFFFF; --_cs-light-color-semantic-success-text: #042D13; --_cs-light-accent-on-strong: #FFFFFF; --cs-color-brand-ochre: #F4BA17; --cs-component-button-lg-minHeight: 52px; --cs-color-link-hover: #45210E; --cs-space-3: 12px; --_cs-dark-color-text-accent: #FECD5D; --cs-component-button-primary-fg: #FFFFFF; --cs-color-text-primary: #45210E; --cs-component-button-xs-min-height-coarse: 44px; --cs-radius-lg: 14px; --_cs-light-color-accent-ochre: #F4BA17; --cs-accent: #F4BA17; --_cs-border-strong: color-mix(in oklab, #E7D9C6 65%, #45210E); --cs-component-button-md-minHeight: 44px; --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --_cs-dark-component-button-primary-bg: #f4ba17; --_cs-dark-accent: #F4BA17; --_cs-light-color-link-hover: #45210E; --cs-component-button-sm-minHeight: 36px; --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48); --_cs-dark-doc-fill-ink: #1A1614; --cs-density-space-5: 20px; --_cs-light-accent-strong: #916D11; --cs-color-border-default: #E7D9C6; --_cs-dark-color-semantic-warning-fg: #1a1108; --_cs-light-color-semantic-success: #166534; --cs-scroll-padding-block-start: 16px; --cs-letter-spacing-tight: -0.01em; --_cs-dark-accent-tint: #FBF4E9; --_cs-dark-color-accent-ochre: #F4BA17; --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --cs-space-6: 24px; --cs-glass-light-border: color-mix(in oklab, #E7D9C6 50%, transparent); --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --cs-component-button-xs-padding-y: 4px; --cs-component-button-xs-minWidth: 28px; --_cs-light-accent-grad-a: #F4BA17; --_cs-dark-color-surface-page: #1a1108; --_cs-dark-color-semantic-info: #B5D4FD; --cs-glass-whisper-bg: color-mix(in oklab, #FFFDF8 60%, transparent); --cs-density-space-6: 24px; --_cs-dark-doc-ink: #1A1614; --cs-color-surface-page: #FFFDF8; --_cs-dark-color-surface-panel: #221710; --cs-space-4: 16px; --cs-accent-strong: #916D11; --cs-text-body-lg: 1.125rem; --cs-component-button-primary-bg: #45210E; --cs-component-button-xs-paddingX: 10px; --cs-text-caption: 0.75rem; --cs-font-lineHeight-heading: 1.35; --cs-component-button-radius: 8px; --cs-duration-fast: 120ms; --_cs-dark-color-text-inverse: #1a1108; --cs-color-text-muted: #3F2D21; --cs-accent-on-strong: #FFFFFF; --cs-font-weight-medium: 500; --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50); --cs-font-size-sm: 0.875rem; --_cs-dark-color-brand-umber: #45210E; --_cs-light-color-link: #6E3B0E; --cs-doc-slate: #26323A; --cs-text-h3: 1.5rem; --_cs-light-color-semantic-success-fg: #FFFFFF; --cs-text-secondary: 0.875rem; --cs-density-space-3: 12px; --cs-component-button-md-min-height-coarse: 44px; --cs-accent-on: #45210E; --cs-glass-standard-border: color-mix(in oklab, #E7D9C6 60%, transparent); --cs-component-textfield-border-default: #BFA58F; --cs-color-semantic-info-text: #000A75; --_cs-dark-accent-ink: #45210E; --_cs-dark-color-text-muted: #E9D6C2; --_cs-light-color-semantic-warning-text: #441801; --_cs-light-doc-ink: #1A1614; --cs-component-button-sm-padding-x: 14px; --cs-text-h1: 2.25rem; --cs-component-textfield-minHeight: 44px; --cs-color-semantic-success-text: #042D13; --_cs-light-accent-bright: #F4BA17; --_cs-light-component-button-primary-bg: #45210E; --cs-space-5: 20px; --cs-font-line-height-heading: 1.35; --_cs-dark-accent-bright: #F4BA17; --cs-component-textfield-paddingY: 10px; --_cs-light-color-semantic-danger-text: #4B0502; --_cs-light-doc-fill-ink: #1A1614; --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --cs-font-size-lg: 1.25rem; --_cs-light-color-text-accent: #6E3B0E; --_cs-dark-accent-on-strong: #FFFFFF; --cs-color-surface-panel: #FFFFFF; --cs-component-button-sm-minHeight-coarse: 44px; --cs-color-semantic-info: #1D4ED8; --cs-breakpoint-md: 768px; --_cs-dark-accent-on: #45210E; --_cs-dark-color-semantic-warning: #FBBF24; --cs-space-20: 80px; --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif; --cs-color-link: #6E3B0E; --_cs-dark-color-semantic-danger-text: #FFD2CF; --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cs-font-size-md: 1.125rem; --_cs-dark-color-semantic-warning-text: #FFD887; --cs-glass-standard-bg: color-mix(in oklab, #FFFFFF 80%, transparent); --cs-space-12: 48px; --cs-component-button-md-paddingY: 12px; --cs-font-size-5xl: 3.75rem; --cs-breakpoint-xs: 0px; --cs-breakpoint-xl: 1280px; --cs-duration-instant: 80ms; --cs-font-size-4xl: 3rem; --cs-component-button-lg-min-height: 52px; --cs-density-space-1: 4px; --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); --_cs-dark-accent-grad-a: #F4BA17; --cs-component-button-md-padding-x: 20px; --cs-color-brand-umber: #45210E; --cs-color-semantic-success: #166534; --_cs-dark-accent-strong: #916D11; --cs-component-button-xs-minHeight: 28px; --cs-color-semantic-warning-fg: #FFFFFF; --cs-font-lineHeight-tight: 1.15; --cs-font-weight-bold: 700; --cs-container-max: 1320px; --cs-font-size-3xl: 2.25rem; --cs-color-accent-ochre: #F4BA17; --_cs-light-doc-fill: #FDE68A; --_cs-light-doc-slate: #26323A; --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); --_cs-light-color-brand-umber: #45210E; --cs-space-24: 96px; --cs-font-weight-regular: 400; --_cs-dark-component-textfield-border-default: #5a4636; --cs-space-16: 64px; --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --cs-prose-measure: 45rem; --cs-component-button-sm-paddingX: 14px; --cs-font-lineHeight-body: 1.5; --cs-component-button-xs-min-width: 28px; --cs-text-eyebrow: 0.75rem; --cs-text-body: 1rem; --_cs-light-color-surface-panel: #FFFFFF; --cs-radius-sm: 4px; --cs-component-button-xs-paddingY: 4px; --cs-heading-tracking: -0.01em; --cs-component-textfield-padding-y: 10px; --cs-glass-light-blur: 12px; --cs-density-control-gap: 8px; --cs-component-button-lg-paddingX: 28px; --cs-component-button-sm-padding-y: 8px; --_cs-light-color-surface-raised: #FBF4E9; --cs-color-semantic-success-fg: #FFFFFF; --_cs-light-color-semantic-warning-fg: #FFFFFF; --cs-duration-base: 200ms; --cs-scroll-padding-block-end: 16px; --cs-depth-modal: 100; --cs-density-space-2: 8px;"></span>
|
|
3348
3348
|
```
|
|
3349
3349
|
|
|
3350
3350
|
## TreeTable
|