/* ============================================================ DevVN Popup — Frontend Tất cả màu sắc đều dùng CSS variables (xem :root inline trong ). ============================================================ */ /* ---------- Root container ---------- */ .devvn-popup-root { position: fixed; inset: 0; z-index: 999999999; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: var(--dvp-font, inherit); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } .devvn-popup-root.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s linear 0s; } /* ---------- Overlay ---------- */ .devvn-popup__overlay { position: absolute; inset: 0; background: var(--dvp-overlay, rgba(0,0,0,0.5)); opacity: 0; transition: opacity 0.35s ease; } .devvn-popup-root.is-open .devvn-popup__overlay { opacity: 1; } /* ---------- Box: open = trượt từ dưới lên + fade in. close = trượt xuống + fade out ---------- */ .devvn-popup__box { position: relative; width: 100%; max-width: var(--dvp-width, 480px); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--dvp-bg, #ffffff); border-radius: var(--dvp-radius, 8px); box-shadow: var(--dvp-shadow, 0 24px 60px rgba(0, 0, 0, 0.18)); transform: translateY(40px); opacity: 0; transition: transform 0.45s cubic-bezier(0.22, 0.94, 0.43, 1), opacity 0.35s ease; } .devvn-popup-root.is-open .devvn-popup__box { transform: translateY(0); opacity: 1; } /* ---------- Close button ---------- */ .devvn-popup__close { position: absolute !important; top: 14px; right: 14px; width: 32px; height: 32px; background: transparent; border: 0; color: #1a1a2e; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; opacity: 0.6; transition: opacity 0.2s, background 0.2s; pointer-events: none; /* enabled by JS after delay */ z-index: 2; } .devvn-popup__box.dvp-close-ready .devvn-popup__close { pointer-events: auto; opacity: 1; padding: 0; margin: 0; min-height: auto; } .devvn-popup__close:hover { background: rgba(0, 0, 0, 0.06); } /* ---------- Inner ---------- */ .devvn-popup__inner { padding: 50px 40px 36px; text-align: center; } .devvn-popup__headline { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--dvp-headline, #1a1a2e); margin-bottom: 10px; text-transform: uppercase; } .devvn-popup__title { font-size: 44px; font-weight: 800; letter-spacing: -0.5px; color: var(--dvp-title, #1a1a2e); margin: 0 0 12px; line-height: 1.1; } .devvn-popup__subtitle { font-size: 18px; color: var(--dvp-subtitle, #1a1a2e); margin-bottom: 10px; font-weight: 500; } /* ---------- Countdown ---------- */ .devvn-popup__countdown { display: inline-flex; align-items: baseline; gap: 4px; color: var(--dvp-cd-color, #1a1a2e); font-size: 28px; font-weight: 700; margin: 14px 0 22px; letter-spacing: 0.5px; } .devvn-popup__cd-group { display: inline-flex; align-items: baseline; } .devvn-popup__cd-group sub { font-size: 12px; font-weight: 600; margin-left: 2px; bottom: 0; opacity: 0.7; } .devvn-popup__cd-sep { margin: 0 4px; opacity: 0.4; font-weight: 400; } .devvn-popup__cd-expired { display: none; font-size: 18px; } .devvn-popup__countdown.is-expired .devvn-popup__cd-group, .devvn-popup__countdown.is-expired .devvn-popup__cd-sep { display: none; } .devvn-popup__countdown.is-expired .devvn-popup__cd-expired { display: inline; } /* By default, hide days when 0 (JS toggles class) */ .devvn-popup__cd-group[data-unit="d"] { display: none; } .devvn-popup__countdown.has-days .devvn-popup__cd-group[data-unit="d"] { display: inline-flex; } /* hours hidden when 0 in fixed mode? Show always — keeps layout stable */ .devvn-popup__cd-group[data-unit="h"] { display: none; } .devvn-popup__countdown.has-hours .devvn-popup__cd-group[data-unit="h"] { display: inline-flex; } /* ---------- Form / "No thanks" ---------- */ .devvn-popup__form { margin: 15px 0 5px; } .devvn-popup__nothanks { display: inline-block; margin-top: 6px; color: var(--dvp-subtitle, #1a1a2e); font-size: 14px; font-weight: 600; text-decoration: none; opacity: 0.85; } .devvn-popup__nothanks:hover { text-decoration: underline; opacity: 1; } /* ============================================================ CF7 auto-style inside popup ============================================================ */ .devvn-popup__form .wpcf7 { margin: 0; padding: 0; } .devvn-popup__form .wpcf7-form { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .devvn-popup__form .wpcf7-form-control-wrap { display: block; width: 100%; } .devvn-popup__form input[type="text"], .devvn-popup__form input[type="email"], .devvn-popup__form input[type="tel"], .devvn-popup__form input[type="url"], .devvn-popup__form input[type="number"], .devvn-popup__form input[type="password"], .devvn-popup__form select, .devvn-popup__form textarea { width: 100%; padding: 10px 15px; border: 1.5px solid #d1d5db; border-radius: calc(var(--dvp-radius, 8px) * 0.6); background: #ffffff; font-size: 15px; color: #1a1a2e; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; height: 50px; margin: 0; } .devvn-popup__form input:focus, .devvn-popup__form select:focus, .devvn-popup__form textarea:focus { border-color: var(--dvp-btn-bg, #1a1a4e); outline: none; box-shadow: 0 0 0 3px rgba(26, 26, 78, 0.12); } .devvn-popup__form input[type="submit"], .devvn-popup__form button[type="submit"] { width: 100%; padding: 10px 18px; background: var(--dvp-btn-bg, #1a1a4e); color: var(--dvp-btn-color, #ffffff); border: 0; border-radius: calc(var(--dvp-radius, 8px) * 0.6); font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: filter 0.15s, transform 0.05s; font-family: inherit; margin: 0; } .devvn-popup__form input[type="submit"]:hover, .devvn-popup__form button[type="submit"]:hover { background: var(--dvp-btn-bg-hover, var(--dvp-btn-bg, #1a1a4e)); color: var(--dvp-btn-color-hover, var(--dvp-btn-color, #ffffff)); } .devvn-popup__form input[type="submit"]:active, .devvn-popup__form button[type="submit"]:active { transform: translateY(1px); } .devvn-popup__form input[type="submit"]:disabled, .devvn-popup__form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; } /* CF7 spinner & validation */ .devvn-popup__form .wpcf7-spinner { background-color: var(--dvp-btn-bg, #1a1a4e); } .devvn-popup__form .wpcf7 form .wpcf7-response-output { margin: 8px 0 0; padding: 10px 14px; border-radius: 6px; font-size: 13px; border-width: 1.5px; } .devvn-popup__form .wpcf7-not-valid-tip { color: #b32424; font-size: 12px; margin-top: 4px; text-align: left; } .devvn-popup__form .wpcf7-not-valid { border-color: #b32424 !important; } .devvn-popup__form .wpcf7 form.invalid .wpcf7-response-output, .devvn-popup__form .wpcf7 form.unaccepted .wpcf7-response-output { background: #fde8e8; color: #b32424; border-color: #f5b7b7; } .devvn-popup__form .wpcf7 form.sent .wpcf7-response-output { background: #e6f7ec; color: #1a8245; border-color: #b3e0c2; } /* ============================================================ Mode: Editor (text editor) ============================================================ */ .devvn-popup__inner--editor { text-align: left; padding: 50px 36px 30px; } .devvn-popup__inner--editor .devvn-popup__countdown { display: inline-flex; margin: 18px 0 4px; } .devvn-popup__inner--editor .devvn-popup__editor-content { line-height: 1.6; } .devvn-popup__inner--editor .devvn-popup__editor-content > *:first-child { margin-top: 0; } .devvn-popup__inner--editor .devvn-popup__editor-content > *:last-child { margin-bottom: 0; } .devvn-popup__inner--editor .devvn-popup__editor-content h1, .devvn-popup__inner--editor .devvn-popup__editor-content h2, .devvn-popup__inner--editor .devvn-popup__editor-content h3, .devvn-popup__inner--editor .devvn-popup__editor-content h4 { color: var(--dvp-title, #1a1a2e); margin: 0 0 12px; line-height: 1.25; } .devvn-popup__inner--editor .devvn-popup__editor-content p { color: var(--dvp-subtitle, #1a1a2e); margin: 0 0 12px; } .devvn-popup__inner--editor .devvn-popup__editor-content img { max-width: 100%; height: auto; border-radius: calc(var(--dvp-radius, 8px) * 0.6); } .devvn-popup__inner--editor .devvn-popup__editor-content a { color: var(--dvp-btn-bg, #1a1a4e); text-decoration: underline; } .devvn-popup__inner--editor .devvn-popup__editor-content ul, .devvn-popup__inner--editor .devvn-popup__editor-content ol { color: var(--dvp-subtitle, #1a1a2e); padding-left: 22px; margin: 0 0 12px; } .devvn-popup__inner--editor .devvn-popup__editor-content blockquote { border-left: 3px solid var(--dvp-btn-bg, #1a1a4e); padding: 6px 14px; margin: 0 0 12px; color: var(--dvp-subtitle, #1a1a2e); opacity: 0.85; } .devvn-popup__inner--editor .devvn-popup__nothanks { display: block; margin-top: 14px; text-align: center; } /* ============================================================ Mode: Image only ============================================================ */ .devvn-popup__box--image { overflow: hidden; background: transparent; } .devvn-popup__inner--image { padding: 0; line-height: 0; } .devvn-popup__image, .devvn-popup__image-link img { display: block; width: 100%; height: auto; } .devvn-popup__image-link { display: block; } .devvn-popup__below-image { background: var(--dvp-bg, #ffffff); padding: 14px 20px 18px; text-align: center; line-height: 1.4; } .devvn-popup__below-image .devvn-popup__nothanks { margin-top: 0; } .devvn-popup__image-placeholder { background: var(--dvp-bg, #ffffff); padding: 60px 30px; text-align: center; color: #6b7280; font-size: 14px; line-height: 1.5; } /* Close button: nổi bật trên ảnh */ .devvn-popup__box--image .devvn-popup__close { background: rgba(255, 255, 255, 0.94); color: #1a1a2e; border-radius: 50%; width: 32px; height: 32px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .devvn-popup__box--image .devvn-popup__close:hover { background: #ffffff; } /* ============================================================ Gift Icon ============================================================ */ .devvn-popup-gift { position: fixed; z-index: 999998; width: var(--dvp-gift-size, 70px); height: var(--dvp-gift-size, 70px); background: var(--dvp-gift-bg, #ffffff); border: 1px solid var(--dvp-gift-border, #e6ecf2); border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #1a1a2e; transition: transform 0.2s ease, box-shadow 0.2s ease; padding: 0; font-size: calc(var(--dvp-gift-size, 70px) * 0.42); margin: 0; min-height: auto; } .devvn-popup-gift[hidden] { display: none !important; } .devvn-popup-gift:hover { transform: scale(1.06); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); } .devvn-popup-gift.pos-top-left { top: var(--dvp-gift-offset-v); left: var(--dvp-gift-offset-h); } .devvn-popup-gift.pos-top-right { top: var(--dvp-gift-offset-v); right: var(--dvp-gift-offset-h); } .devvn-popup-gift.pos-bottom-left { bottom: var(--dvp-gift-offset-v); left: var(--dvp-gift-offset-h); } .devvn-popup-gift.pos-bottom-right { bottom: var(--dvp-gift-offset-v); right: var(--dvp-gift-offset-h); } .devvn-popup-gift__svg { width: 50%; height: 50%; } .devvn-popup-gift__img { width: 60%; height: 60%; object-fit: contain; } .devvn-popup-gift__emoji { line-height: 1; } .devvn-popup-gift__badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; background: var(--dvp-badge-bg, #ff3b30); color: var(--dvp-badge-color, #ffffff); border-radius: 999px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--dvp-gift-bg, #ffffff); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Animation — gentle sway */ @keyframes dvp-gift-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } .devvn-popup-gift.is-animated { animation: dvp-gift-sway 2s ease-in-out infinite; transform-origin: 50% 50%; } .devvn-popup-gift.is-animated:hover { animation-play-state: paused; } /* ============================================================ Style: Flash Sale (gradient header + countdown boxes + CTA) ============================================================ */ .devvn-popup__box--flash { overflow: hidden; background: var(--dvp-bg, #ffffff); } .devvn-popup__flash-header { background: var(--dvp-flash-grad, linear-gradient(135deg, #ff7a3d, #ff2d55)); color: var(--dvp-flash-text, #ffffff); padding: 36px 30px 30px; text-align: center; position: relative; } .devvn-popup__flash-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--dvp-flash-badge-bg, rgba(0,0,0,0.22)); color: var(--dvp-flash-badge-color, #ffffff); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; backdrop-filter: blur(2px); } .devvn-popup__flash-badge-icon { font-size: 13px; line-height: 1; } .devvn-popup__flash-title { font-size: 30px; font-weight: 800; margin: 0 0 10px; color: inherit; letter-spacing: -0.3px; line-height: 1.15; } .devvn-popup__flash-subtitle { font-size: 15px; margin: 0; opacity: 0.92; color: inherit; line-height: 1.5; } .devvn-popup__flash-body { padding: 24px 24px 22px; text-align: center; } .devvn-popup__flash-pre { font-size: 13px; color: var(--dvp-flash-pre, #6b7280); margin-bottom: 12px; font-weight: 500; letter-spacing: 0.3px; } /* Countdown boxes */ .devvn-popup__countdown--boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 20px; } .devvn-popup__countdown--boxes.has-hours { grid-template-columns: repeat(3, 1fr); } .devvn-popup__countdown--boxes.has-days { grid-template-columns: repeat(4, 1fr); } .devvn-popup__cd-box { background: var(--dvp-flash-box-bg, #ffffff); border: 1.5px solid var(--dvp-flash-box-border, #e6ecf2); border-radius: 10px; padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .devvn-popup__cd-box .devvn-popup__cd-value { font-size: 26px; font-weight: 800; color: var(--dvp-flash-num, #1a1a2e); line-height: 1; font-variant-numeric: tabular-nums; } .devvn-popup__cd-box .devvn-popup__cd-unit { font-size: 10px; font-weight: 700; color: var(--dvp-flash-unit, #6b7280); letter-spacing: 1px; text-transform: uppercase; } /* CTA button + nothanks */ .devvn-popup__flash-cta { display: block; width: 100%; padding: 16px 20px; background: var(--dvp-btn-bg, #1a1a4e); color: var(--dvp-btn-color, #ffffff); border-radius: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; text-align: center; transition: filter 0.15s, transform 0.05s; } .devvn-popup__flash-cta:hover { background: var(--dvp-btn-bg-hover, var(--dvp-btn-bg, #1a1a4e)); color: var(--dvp-btn-color-hover, var(--dvp-btn-color, #ffffff)); } .devvn-popup__flash-cta:active { transform: translateY(1px); } .devvn-popup__box--flash .devvn-popup__nothanks { display: inline-block; margin-top: 14px; } /* Close button on gradient */ .devvn-popup__box--flash .devvn-popup__close { background: rgba(255, 255, 255, 0.22); color: #ffffff; border-radius: 50%; width: 32px; height: 32px; opacity: 0; margin: 0; min-height: auto; } .devvn-popup__box--flash .devvn-popup__close:hover { background: rgba(255, 255, 255, 0.34); } /* Expired state for box-style countdown */ .devvn-popup__countdown--boxes.is-expired .devvn-popup__cd-box { display: none; } .devvn-popup__countdown--boxes.is-expired .devvn-popup__cd-expired { display: block; padding: 14px; color: var(--dvp-flash-num, #1a1a2e); font-weight: 700; font-size: 16px; } .devvn-popup__countdown--boxes .devvn-popup__cd-expired { display: none; } /* Override hide rules for flash boxes (use flex instead of inline-flex) */ .devvn-popup__countdown--boxes.has-days .devvn-popup__cd-group[data-unit="d"] { display: flex; } .devvn-popup__countdown--boxes.has-hours .devvn-popup__cd-group[data-unit="h"] { display: flex; } /* ============================================================ Style: Glass (glassmorphism) ============================================================ */ .devvn-popup__box--glass { background: var(--dvp-glass-bg, rgba(255,255,255,0.7)); backdrop-filter: blur(var(--dvp-glass-blur, 18px)) saturate(140%); -webkit-backdrop-filter: blur(var(--dvp-glass-blur, 18px)) saturate(140%); border: 1px solid var(--dvp-glass-border, rgba(255,255,255,0.4)); } .devvn-popup__box--glass .devvn-popup__close { background: rgba(0, 0, 0, 0.06); border-radius: 50%; } .devvn-popup__box--glass .devvn-popup__close:hover { background: rgba(0, 0, 0, 0.12); } .devvn-popup__box--glass .devvn-popup__form input[type="text"], .devvn-popup__box--glass .devvn-popup__form input[type="email"], .devvn-popup__box--glass .devvn-popup__form input[type="tel"], .devvn-popup__box--glass .devvn-popup__form input[type="url"], .devvn-popup__box--glass .devvn-popup__form select, .devvn-popup__box--glass .devvn-popup__form textarea { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.6); } /* ============================================================ Style: Spotlight (dark premium with radial accent) ============================================================ */ .devvn-popup__box--spotlight { /* Remap shared CSS variables to spotlight palette */ --dvp-bg: var(--dvp-spot-bg, #0a0a14); --dvp-headline: var(--dvp-spot-accent, #8b5cf6); --dvp-title: var(--dvp-spot-text, #ffffff); --dvp-subtitle: var(--dvp-spot-subtle, #a3a3b8); --dvp-btn-bg: var(--dvp-spot-accent, #8b5cf6); background: var(--dvp-spot-bg, #0a0a14); color: var(--dvp-spot-text, #ffffff); border: 1px solid rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; box-shadow: var(--dvp-shadow, 0 24px 60px rgba(0,0,0,0.4)); } .devvn-popup__box--spotlight::before { content: ''; position: absolute; top: -30%; right: -25%; width: 75%; height: 75%; background: radial-gradient(circle, var(--dvp-spot-accent-soft, rgba(139,92,246,0.35)) 0%, transparent 65%); pointer-events: none; z-index: 0; } .devvn-popup__box--spotlight.has-grid::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 70%); mask-image: linear-gradient(to bottom, black 0%, transparent 70%); } .devvn-popup__box--spotlight > * { position: relative; z-index: 1; } .devvn-popup__box--spotlight .devvn-popup__close { background: rgba(255, 255, 255, 0.08); color: var(--dvp-spot-text, #ffffff); border-radius: 50%; opacity: 1; } .devvn-popup__box--spotlight .devvn-popup__close:hover { background: rgba(255, 255, 255, 0.16); } .devvn-popup__box--spotlight .devvn-popup__headline { display: inline-block; padding: 6px 14px; background: var(--dvp-spot-accent-faint, rgba(139,92,246,0.12)); border: 1px solid var(--dvp-spot-accent-soft, rgba(139,92,246,0.35)); border-radius: 999px; font-size: 12px; letter-spacing: 1.5px; } .devvn-popup__box--spotlight .devvn-popup__form input[type="text"], .devvn-popup__box--spotlight .devvn-popup__form input[type="email"], .devvn-popup__box--spotlight .devvn-popup__form input[type="tel"], .devvn-popup__box--spotlight .devvn-popup__form input[type="url"], .devvn-popup__box--spotlight .devvn-popup__form select, .devvn-popup__box--spotlight .devvn-popup__form textarea { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: var(--dvp-spot-text, #ffffff); } .devvn-popup__box--spotlight .devvn-popup__form input::placeholder, .devvn-popup__box--spotlight .devvn-popup__form textarea::placeholder { color: rgba(255, 255, 255, 0.45); } .devvn-popup__box--spotlight .devvn-popup__form input:focus, .devvn-popup__box--spotlight .devvn-popup__form textarea:focus, .devvn-popup__box--spotlight .devvn-popup__form select:focus { border-color: var(--dvp-spot-accent, #8b5cf6); box-shadow: 0 0 0 3px var(--dvp-spot-accent-faint, rgba(139,92,246,0.18)); } .devvn-popup__box--spotlight .devvn-popup__nothanks { color: var(--dvp-spot-subtle, #a3a3b8); } /* CTA pill on spotlight */ .devvn-popup__box--spotlight .devvn-popup__form input[type="submit"], .devvn-popup__box--spotlight .devvn-popup__form button[type="submit"] { border-radius: 999px; } /* ============================================================ Expired state (countdown đã hết): ẩn form & CTA, giữ message + close button ============================================================ */ .devvn-popup-root.is-expired .devvn-popup__form, .devvn-popup-root.is-expired .devvn-popup__flash-cta { display: none !important; } /* ============================================================ Body lock when popup open ============================================================ */ body.dvp-locked { overflow: hidden; } /* ============================================================ Mobile — tablet & phone (≤ 768px) ============================================================ */ @media (max-width: 768px) { .devvn-popup-root { padding: 14px; } .devvn-popup__box { max-height: calc(100vh - 28px); } .devvn-popup__inner { padding: 44px 26px 30px; } .devvn-popup__headline { font-size: 18px; letter-spacing: 1.5px; margin-bottom: 8px; } .devvn-popup__title { font-size: 34px; } .devvn-popup__subtitle { font-size: 16px; } .devvn-popup__countdown { font-size: 24px; margin: 10px 0 16px; } .devvn-popup__inner--editor { padding: 44px 24px 26px; } .devvn-popup__inner--editor .devvn-popup__editor-content { font-size: 15px; } .devvn-popup-gift { --dvp-gift-size-mobile: clamp(48px, 14vw, var(--dvp-gift-size, 70px)); width: var(--dvp-gift-size-mobile); height: var(--dvp-gift-size-mobile); font-size: calc(var(--dvp-gift-size-mobile) * 0.42); } .devvn-popup-gift.pos-top-left, .devvn-popup-gift.pos-bottom-left { left: min(var(--dvp-gift-offset-h), 16px); } .devvn-popup-gift.pos-top-right, .devvn-popup-gift.pos-bottom-right { right: min(var(--dvp-gift-offset-h), 16px); } .devvn-popup-gift.pos-top-left, .devvn-popup-gift.pos-top-right { top: min(var(--dvp-gift-offset-v), 16px); } .devvn-popup-gift.pos-bottom-left, .devvn-popup-gift.pos-bottom-right { bottom: min(var(--dvp-gift-offset-v), 16px); } } /* Flash mobile */ @media (max-width: 540px) { .devvn-popup__flash-header { padding: 28px 22px 22px; } .devvn-popup__flash-title { font-size: 24px; } .devvn-popup__flash-subtitle { font-size: 13px; } .devvn-popup__flash-body { padding: 20px 18px 18px; } .devvn-popup__cd-box { padding: 10px 2px 8px; } .devvn-popup__cd-box .devvn-popup__cd-value { font-size: 22px; } .devvn-popup__cd-box .devvn-popup__cd-unit { font-size: 9px; letter-spacing: 0.5px; } .devvn-popup__flash-cta { padding: 14px 18px; font-size: 14px; } .devvn-popup__flash-badge { font-size: 11px; padding: 5px 12px; } } /* ============================================================ Mobile — phone nhỏ (≤ 480px) ============================================================ */ @media (max-width: 480px) { .devvn-popup-root { padding: 10px; } .devvn-popup__box { max-height: calc(100vh - 20px); border-radius: calc(var(--dvp-radius, 8px) * 0.85); } .devvn-popup__close { top: 10px; right: 10px; width: 36px; height: 36px; background: rgba(0, 0, 0, 0.04); opacity: 1; } .devvn-popup__close:hover { background: rgba(0, 0, 0, 0.1); } .devvn-popup__inner { padding: 50px 20px 24px; } .devvn-popup__headline { font-size: 15px; letter-spacing: 1px; margin-bottom: 6px; } .devvn-popup__title { font-size: 28px; line-height: 1.15; margin-bottom: 8px; } .devvn-popup__subtitle { font-size: 14px; margin-bottom: 6px; } .devvn-popup__countdown { font-size: 20px; margin: 8px 0 12px; gap: 2px; } .devvn-popup__cd-group sub { font-size: 11px; } .devvn-popup__cd-sep { margin: 0 2px; } .devvn-popup__form { margin: 12px 0 4px; } .devvn-popup__form input[type="text"], .devvn-popup__form input[type="email"], .devvn-popup__form input[type="tel"], .devvn-popup__form input[type="url"], .devvn-popup__form input[type="number"], .devvn-popup__form input[type="password"], .devvn-popup__form select, .devvn-popup__form textarea { font-size: 16px; /* tránh iOS auto-zoom khi focus */ height: 46px; padding: 8px 14px; } .devvn-popup__form input[type="submit"], .devvn-popup__form button[type="submit"] { padding: 12px 16px; font-size: 14px; letter-spacing: 1px; } .devvn-popup__nothanks { font-size: 13px; } .devvn-popup__inner--editor { padding: 44px 20px 22px; } .devvn-popup__inner--editor .devvn-popup__editor-content { font-size: 14px; line-height: 1.55; } .devvn-popup__inner--editor .devvn-popup__editor-content h1 { font-size: 22px; } .devvn-popup__inner--editor .devvn-popup__editor-content h2 { font-size: 19px; } .devvn-popup__inner--editor .devvn-popup__editor-content h3 { font-size: 17px; } .devvn-popup__below-image { padding: 12px 16px 14px; } .devvn-popup__image-placeholder { padding: 40px 20px; font-size: 13px; } .devvn-popup-gift { --dvp-gift-size-mobile: clamp(44px, 13vw, 60px); width: var(--dvp-gift-size-mobile); height: var(--dvp-gift-size-mobile); font-size: calc(var(--dvp-gift-size-mobile) * 0.42); } .devvn-popup-gift__badge { min-width: 18px; height: 18px; font-size: 10px; border-width: 1.5px; } } /* ============================================================ Mobile — phone rất nhỏ (≤ 360px) ============================================================ */ @media (max-width: 360px) { .devvn-popup__inner { padding: 46px 16px 20px; } .devvn-popup__title { font-size: 24px; } .devvn-popup__countdown { font-size: 18px; } } /* ============================================================ Landscape phone — popup quá thấp, scroll trong popup ============================================================ */ @media (max-width: 920px) and (max-height: 480px) and (orientation: landscape) { .devvn-popup-root { padding: 8px; } .devvn-popup__box { max-height: calc(100vh - 16px); } .devvn-popup__inner { padding: 36px 24px 22px; } .devvn-popup__title { font-size: 26px; } .devvn-popup__countdown { font-size: 20px; margin: 6px 0 12px; } }