/* ======================================================================= WP COLORING - POPUP FRAME STYLES (V2 - Tinh chỉnh Giao diện) ======================================================================= */ /* Class được thêm vào để khóa scroll nền */ body.coloring-popup-visible { overflow: hidden; } /* Khung bọc toàn bộ popup */ #wp-coloring-popup-wrapper { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; /* Dùng transition để popup hiện ra mượt hơn */ transition: opacity 0.3s ease-in-out; } /* Lớp phủ nền */ .popup-overlay { position: absolute; inset: 0; background-color: rgba(15, 23, 42, 0.9); /* Màu tối hơn */ -webkit-backdrop-filter: blur(6px); /* Blur mạnh hơn */ backdrop-filter: blur(6px); cursor: pointer; } /* Khung chứa nội dung chính (giảm kích thước tối đa) */ .popup-container { position: relative; width: 100%; height: 100%; max-width: 900px; /* GIẢM MAX-WIDTH: Giảm kích thước khung popup */ max-height: 90vh; /* Giảm MAX-HEIGHT: Cho phép hiển thị ở giữa màn hình tốt hơn */ display: flex; /* Nội dung chính sẽ nằm trong .wp-coloring-shell */ background-color: transparent !important; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); } /* NÚT ĐÓNG (Close Button) - Đã làm đặc biệt hơn */ .popup-close-btn { position: absolute; top: -40px; /* Đặt xa hơn khung popup */ right: -40px; width: 38px; /* Giảm nhẹ kích thước */ height: 38px; /* Thiết kế hiện đại: nền màu accent, icon trắng */ background-color: var(--accent, #3b82f6) !important; color: #ffffff !important; border-radius: 50%; border: 2px solid #ffffff !important; /* Thêm viền trắng nổi bật */ font-size: 20px; /* Kích thước chữ/icon */ line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); display: grid; place-items: center; z-index: 10; transition: all 0.2s; } .popup-close-btn:hover { transform: rotate(90deg); /* Thêm hiệu ứng xoay khi hover */ background-color: #f87171 !important; /* Màu đóng */ border-color: #ffffff !important; } /* Tinh chỉnh vị trí nút đóng trên Mobile (nếu màn hình quá hẹp) */ @media (max-width: 900px) { .popup-container { max-width: 95vw; max-height: 98vh; } .popup-close-btn { top: -30px; right: 0px; /* Căn sát cạnh trên mobile */ transform: scale(0.9); } } /* Nội dung bên trong popup */ .popup-content { width: 100%; height: 100%; overflow-y: auto; padding: 0 !important; } /* ======================================================================= POPUP CONTENT OVERRIDES - SỬA LỖI DARK MODE ======================================================================= */ .popup-content .wp-coloring-shell .wp-coloring-sidebar, .popup-content .wp-coloring-shell .wp-coloring-main { background-color: #ffffff !important; border-color: #e0e7ff !important; box-shadow: 0 4px 12px rgba(0,0,0,.10) !important; } .popup-content .wp-coloring-shell .action-btn { background-color: #ffffff !important; color: #1e293b !important; border-color: #e6ebf2 !important; } .popup-content .wp-coloring-shell .action-btn.active { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #ffffff !important; } .popup-content .wp-coloring-shell .action-btn:hover { color: #3b82f6 !important; } .popup-content .wp-coloring-shell .wp-coloring-canvas-outer { background-color: #ffffff !important; } button { margin-right: 0px !important; padding: 0px !important; }