/* CSS Background toàn trang */
body {
    margin: 0;
    padding: 0;
}

/* Overlay mờ phủ toàn trang để tăng độ tương phản */
body::before {
    content: "";
    position: fixed; /* Ghim chặt lớp phủ này vào màn hình */
    top: 0;
    left: 0;
    width: 100vw;

    /* Dùng đơn vị lvh (Large Viewport Height) của CSS mới.
       Nó sẽ lấy chiều cao LỚN NHẤT (khi thanh URL đã ẩn),
       giúp ảnh không bao giờ bị thay đổi kích thước khi cuộn. */
    height: 100vh; /* Fallback cho các trình duyệt đời cũ */
    height: 100lvh; /* Trình duyệt đời mới sẽ chạy dòng này */

    background-image: url('https://i.pinimg.com/736x/c9/9f/4c/c99f4ce3e16e25acabc2f6a42cfff790.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: -1; /* Đẩy lớp nền này xuống dưới cùng để không che mất nội dung (nút bấm, text) */

    /* THỦ THUẬT QUAN TRỌNG:
       Ép trình duyệt sử dụng Card đồ họa (GPU) để xử lý tấm ảnh này thay vì CPU.
       Giúp chống hoàn toàn hiện tượng nháy ảnh (flickering). */
    transform: translateZ(0);
    will-change: transform;
}

/* CSS cho hiệu ứng kính mờ (Glassmorphism) */
.glass-card {
    background: rgb(255, 255, 255);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
}

.glass-button {
    transition: all 0.3s ease;
}
.glass-button:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.15);
}

/* Ẩn thanh cuộn nhưng vẫn cho phép cuộn */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* CSS dành riêng cho Màn hình khóa TikTok */
#tiktok-block-screen {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
#tiktok-block-screen .page-container {
    width: 100%; max-width: 400px; padding: 20px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
#tiktok-block-screen .shield-icon { width: 70px; height: 70px; fill: #a0a0a0; margin-bottom: 20px; }
#tiktok-block-screen .title { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: #000; line-height: 1.3; }
#tiktok-block-screen .description { font-size: 15px; color: #757575; margin-bottom: 25px; line-height: 1.5; padding: 0 10px; }
#tiktok-block-screen .link-container { margin-bottom: 30px; word-wrap: break-word; width: 100%; }
#tiktok-block-screen .link-text { font-size: 14px; color: #757575; display: block; padding: 10px; }
#tiktok-block-screen .copy-button {
    background-color: #f1f1f1; color: #333; border: none; padding: 12px 24px;
    font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: 0.2s;
}
#tiktok-block-screen .copy-button:hover { background-color: #e0e0e0; }
#tiktok-block-screen #copy-feedback { font-size: 14px; color: #4caf50; display: none; margin-top: 15px; font-weight: bold; }

/* CSS cho Toast Message */
#custom-toast {
    visibility: hidden;
    min-width: 200px;
    background-color: #323232;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px 16px;
    position: fixed;
    z-index: 9999999;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Class kích hoạt Toast hiển thị */
#custom-toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* Trượt nhẹ lên trên */
}