/** * Skin chung: popup lead (popup.php) + fixed contact (dcx-fc-* / thuvien/fixed-contact/). * * Bật bằng cách thêm vào : data-dc-ui-skin="luxury" * Khuyến nghị: đặt biến --font-body trên :root của landing để tiêu đề popup không kế thừa serif. * * Tuỳ chỉnh màu (tuỳ chọn): * body[data-dc-ui-skin="luxury"] { --dc-luxury-gold: #d4b483; --dc-luxury-gold-hover: #c9a876; } */ body[data-dc-ui-skin="luxury"] { --dc-luxury-gold: #d4b483; --dc-luxury-gold-hover: #c9a876; --dc-luxury-gold-muted: #b8955a; --dc-luxury-text: #111827; --dc-luxury-text-soft: #6b7280; } /* Popup nổi trên header cao z-index */ body[data-dc-ui-skin="luxury"] #popup-overlay.popup-overlay { z-index: 300; } body[data-dc-ui-skin="luxury"] #popup-overlay.flex { display: flex !important; } body[data-dc-ui-skin="luxury"] #popup-overlay.popup-overlay { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body[data-dc-ui-skin="luxury"] #popup-panel.popup-panel { max-width: 28rem; border-radius: 1.5rem; padding: 2.25rem 1.75rem 2rem; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); } @media (min-width: 480px) { body[data-dc-ui-skin="luxury"] #popup-panel.popup-panel { padding: 2.5rem 2rem 2rem; } } body[data-dc-ui-skin="luxury"] #popup-panel h1, body[data-dc-ui-skin="luxury"] #popup-panel h2, body[data-dc-ui-skin="luxury"] #popup-panel h3, body[data-dc-ui-skin="luxury"] #popup-panel h4 { font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif); } body[data-dc-ui-skin="luxury"] #popup-close { right: 1rem; top: 1rem; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: 0.375rem; background: #fff; color: #9ca3af; font-size: 1.125rem; line-height: 1; padding: 0; } body[data-dc-ui-skin="luxury"] #popup-close:hover { color: #4b5563; border-color: #d1d5db; } body[data-dc-ui-skin="luxury"] #popup-header-view h2 { font-size: clamp(1.375rem, 4.2vw, 1.75rem); font-weight: 700; line-height: 1.25; color: var(--dc-luxury-text); letter-spacing: -0.02em; } body[data-dc-ui-skin="luxury"] #popup-header-view p { font-size: 0.9375rem; line-height: 1.55; color: var(--dc-luxury-text-soft); font-weight: 400; margin-top: 0.35rem; } body[data-dc-ui-skin="luxury"] #lead-form-popup.space-y-3 > * + * { margin-top: 1rem; } body[data-dc-ui-skin="luxury"] #lead-form-popup label.block { font-size: 0.8125rem; font-weight: 600; color: #374151; margin-bottom: 0.375rem; } body[data-dc-ui-skin="luxury"] #lead-form-popup .space-y-2 > * + * { margin-top: 1rem; } body[data-dc-ui-skin="luxury"] #lead-form-popup input[type="text"], body[data-dc-ui-skin="luxury"] #lead-form-popup input[type="tel"], body[data-dc-ui-skin="luxury"] #lead-form-popup input[type="email"] { border-radius: 9999px; min-height: 3rem; padding: 0.65rem 1.25rem; font-size: 0.9375rem; color: var(--dc-luxury-text); border: 1px solid #e5e7eb; background: #fff; } body[data-dc-ui-skin="luxury"] #lead-form-popup input::placeholder { color: #9ca3af; } body[data-dc-ui-skin="luxury"] #lead-form-popup input:focus { outline: none; border-color: var(--dc-luxury-gold); box-shadow: 0 0 0 3px rgba(212, 180, 131, 0.22); } body[data-dc-ui-skin="luxury"] #lead-form-popup fieldset { border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem 0.875rem 1.125rem; margin: 0.25rem 0 0; } body[data-dc-ui-skin="luxury"] #lead-form-popup fieldset legend { float: unset; width: max-content; max-width: 100%; padding: 0 0.35rem; margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 600; color: #374151; } body[data-dc-ui-skin="luxury"] #lead-form-popup fieldset .grid { gap: 0.5rem; } body[data-dc-ui-skin="luxury"] #lead-form-popup fieldset .grid label span { border-radius: 9999px; min-height: 2.75rem; padding: 0.5rem 0.5rem; font-weight: 600; font-size: 0.8125rem; border-color: #e5e7eb; } body[data-dc-ui-skin="luxury"] #lead-form-popup fieldset input.peer:checked + span { border-color: var(--dc-luxury-gold); background: rgba(212, 180, 131, 0.14); color: var(--dc-luxury-text); } body[data-dc-ui-skin="luxury"] #lead-form-popup button[type="submit"] { margin-top: 0.75rem; width: 100%; border-radius: 9999px; min-height: 3.25rem; padding: 0.75rem 1.25rem !important; background: var(--dc-luxury-gold) !important; color: var(--dc-luxury-text) !important; border: none !important; font-weight: 700 !important; font-size: 0.9375rem !important; box-shadow: 0 6px 20px rgba(212, 180, 131, 0.35) !important; text-transform: none; letter-spacing: 0.01em; } body[data-dc-ui-skin="luxury"] #lead-form-popup button[type="submit"]:hover { background: var(--dc-luxury-gold-hover) !important; filter: none; } body[data-dc-ui-skin="luxury"] #popup-thanks-view h3 { font-weight: 700; color: var(--dc-luxury-text); } body[data-dc-ui-skin="luxury"] #popup-thanks-view p { color: var(--dc-luxury-text-soft); } /* Fixed contact — desktop */ body[data-dc-ui-skin="luxury"] .dcx-fc-float[data-dcx-fc="desktop"] { z-index: 130; gap: 0.65rem; } body[data-dc-ui-skin="luxury"] .dcx-fc-float__btn { border-radius: 9999px; padding: 0.6rem 1.15rem 0.6rem 0.55rem; font-weight: 700; font-size: 0.8125rem; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); } body[data-dc-ui-skin="luxury"] .dcx-fc-float__btn--outline { background: #fff !important; border-color: #e8e4dc !important; color: #1a1a1a !important; } body[data-dc-ui-skin="luxury"] .dcx-fc-float__btn--outline:hover { background: #faf9f7 !important; } body[data-dc-ui-skin="luxury"] .dcx-fc-float__btn--outline .dcx-fc-float__icon--muted { background: rgba(212, 180, 131, 0.2) !important; color: var(--dc-luxury-gold-muted) !important; } body[data-dc-ui-skin="luxury"] .dcx-fc-float__btn--primary, body[data-dc-ui-skin="luxury"] button.dcx-fc-float__btn--primary { background: var(--dc-luxury-gold) !important; border: none !important; color: var(--dc-luxury-text) !important; box-shadow: 0 8px 28px rgba(212, 180, 131, 0.45); animation: none; } body[data-dc-ui-skin="luxury"] .dcx-fc-float__btn--primary:hover, body[data-dc-ui-skin="luxury"] button.dcx-fc-float__btn--primary:hover { background: var(--dc-luxury-gold-hover) !important; } body[data-dc-ui-skin="luxury"] .dcx-fc-float__btn--primary .dcx-fc-float__icon--dark { background: rgba(0, 0, 0, 0.08) !important; color: var(--dc-luxury-text) !important; } /* * Fixed contact — mobile bar (pill chỉ trên desktop float; mobile giữ bo góc module) */ body[data-dc-ui-skin="luxury"] #dcx-fc-sticky[data-dcx-fc="mobile"] { z-index: 130; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); gap: 0.375rem; } body[data-dc-ui-skin="luxury"] #dcx-fc-sticky[data-dcx-fc="mobile"] > a, body[data-dc-ui-skin="luxury"] #dcx-fc-sticky[data-dcx-fc="mobile"] > button { min-width: 0; } body[data-dc-ui-skin="luxury"] #dcx-fc-sticky .dcx-fc-sticky__btn--outline { flex: 1 1 0%; border-color: rgba(212, 180, 131, 0.45) !important; color: #1a1a1a !important; } body[data-dc-ui-skin="luxury"] #dcx-fc-sticky .dcx-fc-sticky__btn--outline .dcx-fc-sticky__svg { color: var(--dc-luxury-gold-muted); } body[data-dc-ui-skin="luxury"] #dcx-fc-sticky .dcx-fc-sticky__icon--muted { background-color: rgba(212, 180, 131, 0.2) !important; } body[data-dc-ui-skin="luxury"] #dcx-fc-sticky .dcx-fc-sticky__btn--primary, body[data-dc-ui-skin="luxury"] #dcx-fc-sticky a.dcx-fc-sticky__btn--primary, body[data-dc-ui-skin="luxury"] #dcx-fc-sticky button.dcx-fc-sticky__btn--primary { background: var(--dc-luxury-gold) !important; color: var(--dc-luxury-text) !important; /* border: 2px solid #111827 !important; */ flex: 1.2 1 0%; font-weight: 700; animation: none; }