/* === 1. CONTAINER TỔNG THỂ === */
    .game-container-archive {
        padding: 30px;
        margin-top: 20px;
        margin-bottom: 40px;
        
        /* Nền chấm bi Comic */
        background-color: #fff;
        background-image: radial-gradient(#000 15%, transparent 16%);
        background-size: 16px 16px;
        
        /* Viền khung */
        border: 4px solid #000;
        border-radius: 20px;
        box-shadow: 12px 12px 0px #000; /* Bóng lớn */
    }

    /* === 2. TIÊU ĐỀ "SEARCH RESULTS" === */
    h3.item-title {
        font-family: 'Arial Black', sans-serif;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 24px;
        color: #000;
        
        /* Biến thành dải băng màu vàng */
        background: #fff200;
        display: inline-block;
        padding: 10px 30px;
        border: 3px solid #000;
        box-shadow: 5px 5px 0px #000;
        transform: skewX(-10deg); /* Nghiêng tạo tốc độ */
        margin-bottom: 30px;
        margin-left: 10px;
    }

    /* Chữ bên trong nghiêng ngược lại cho thẳng */
    h3.item-title::first-letter {
        font-size: 1.2em;
        color: #ff4757; /* Chữ cái đầu màu đỏ */
    }

    /* === 3. LƯỚI GAME (GRID ITEMS) === */
    .item-grid {
        margin-bottom: 25px; /* Khoảng cách hàng dọc */
        padding: 0 10px; /* Khoảng cách hàng ngang */
    }

    /* Thẻ bao ngoài (Link) */
    .pg-game a {
        display: block;
        text-decoration: none;
        position: relative;
        height: 100%;
    }

    /* Khung chứa ảnh (Card) */
    .list-game {
        border: 3px solid #000;
        border-radius: 14px;
        background: #fff;
        box-shadow: 6px 6px 0px #000; /* Bóng cứng */
        overflow: hidden;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        aspect-ratio: 1/1; /* Ép vuông hoàn hảo */
    }

    /* Hình ảnh Thumbnail */
    .list-thumbnail, 
    .list-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* === 4. HIỆU ỨNG HOVER & OVERLAY === */
    
    /* Khi di chuột vào ô game */
    .pg-game a:hover .list-game {
        transform: translate(-3px, -3px) scale(1.03); /* Nảy lên */
        box-shadow: 10px 10px 0px #000; /* Bóng dài ra */
        border-color: #ff4757; /* Viền chuyển đỏ */
        z-index: 10;
    }

    /* NÚT PLAY (Hiện giữa ảnh) */
    .pg-game a::after {
        content: "PLAY";
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) rotate(-10deg) scale(0);
        
        background: #ff4757;
        color: #fff;
        font-family: 'Arial Black', sans-serif;
        font-weight: 900;
        font-size: 14px;
        padding: 8px 20px;
        border: 3px solid #000;
        box-shadow: 4px 4px 0px #000;
        border-radius: 50px;
        
        opacity: 0;
        transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        pointer-events: none;
        z-index: 20;
    }

    /* TÊN GAME (Hiện dưới đáy ảnh) */
    .pg-game a::before {
        content: attr(data-title); /* Lấy tên từ HTML */
        position: absolute;
        bottom: 10px; left: 50%;
        transform: translate(-50%, 10px);
        
        background: #000;
        color: #fff200; /* Chữ vàng */
        font-family: sans-serif;
        font-weight: 800;
        font-size: 11px;
        text-transform: uppercase;
        padding: 5px 10px;
        border: 2px solid #fff;
        border-radius: 8px;
        width: 85%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden; 
        text-overflow: ellipsis;
        box-shadow: 0 4px 0 rgba(0,0,0,0.3);
        
        opacity: 0;
        transition: 0.2s;
        pointer-events: none;
        z-index: 19;
    }

    /* Kích hoạt Overlay khi Hover */
    .pg-game a:hover::after {
        transform: translate(-50%, -50%) rotate(-5deg) scale(1);
        opacity: 1;
    }
    
    .pg-game a:hover::before {
        transform: translate(-50%, 0); /* Trượt lên vị trí chuẩn */
        opacity: 1;
    }

    /* === 5. RESPONSIVE MOBILE === */
    @media (max-width: 768px) {
        .game-container-archive {
            padding: 15px;
            border-width: 3px;
            box-shadow: 6px 6px 0px #000;
        }
        
        h3.item-title {
            font-size: 18px;
            padding: 8px 20px;
        }
        
        /* Trên mobile, khoảng cách các ô game nhỏ lại */
        .item-grid {
            padding: 0 5px;
            margin-bottom: 15px;
        }
    }
    .search-comic-box {
        background-color: #fff;
        /* Họa tiết chấm bi nền */
        background-image: radial-gradient(#000 15%, transparent 16%);
        background-size: 12px 12px;
        
        border: 4px solid #000;
        border-radius: 18px;
        padding: 15px;
        box-shadow: 8px 8px 0px #000; /* Bóng đổ khối */
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* === 2. FORM TÌM KIẾM === */
    .search-comic-form {
        width: 100%;
        max-width: 600px; /* Giới hạn chiều rộng cho đẹp */
        display: flex;
        gap: 10px; /* Khoảng cách giữa ô nhập và nút */
    }

    /* === 3. Ô NHẬP LIỆU (INPUT) === */
    .comic-input {
        color: #000;
        flex: 1; /* Tự động giãn đầy chiều rộng */
        border: 3px solid #000;
        border-radius: 12px;
        padding: 12px 20px;
        font-family: 'Arial', sans-serif;
        font-size: 16px;
        font-weight: bold;
        outline: none;
        box-shadow: 4px 4px 0px #ccc; /* Bóng nhẹ */
        transition: all 0.2s;
    }

    .comic-input:focus {
        background-color: #fff200; /* Focus chuyển màu vàng */
        box-shadow: 4px 4px 0px #000; /* Bóng đậm lên */
        transform: translateY(-2px);
    }
    
    .comic-input::placeholder {
        color: #888;
        text-transform: uppercase;
        font-size: 14px;
    }

    /* === 4. NÚT SEARCH (BUTTON) === */
    .comic-btn-search {
        background-color: #ff4757 !important; /* Màu đỏ nổi bật */
        color: #fff;
        border: 3px solid #000;
        border-radius: 12px;
        padding: 0 25px;
        cursor: pointer;
        box-shadow: 4px 4px 0px #000; /* Bóng cứng */
        transition: all 0.1s;
        
        /* Căn chỉnh icon bên trong */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Icon kính lúp */
    .comic-btn-search svg {
        width: 24px;
        height: 24px;
        fill: #fff;
        stroke: #000;
        stroke-width: 1px;
        filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.5));
    }

    /* Hiệu ứng Hover */
    .comic-btn-search:hover {
        background-color: #fff200; /* Chuyển vàng */
        transform: translateY(-2px);
        box-shadow: 6px 6px 0px #000;
    }
    
    .comic-btn-search:hover svg {
        fill: #000; /* Icon chuyển đen */
        stroke: none;
    }

    /* Hiệu ứng Click (Active) */
    .comic-btn-search:active {
        transform: translateY(3px); /* Lún xuống */
        box-shadow: 0px 0px 0px #000; /* Mất bóng */
    }

    /* Mobile */
    @media (max-width: 576px) {
        .search-comic-box { padding: 10px; }
        .comic-input { font-size: 14px; padding: 10px; }
        .comic-btn-search { padding: 0 15px; }
    }