.site-header { background-color: #5c94fc; border-bottom: 4px solid #000; box-shadow: 0 4px 0 rgba(0,0,0,0.2); position: sticky; top: 0; z-index: 1000; padding: 10px 0; image-rendering: pixelated; font-family: 'Press Start 2P', cursive; } .site-header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 100% 4px; pointer-events: none; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; } .menu-logo { display: block; width: 130px; transition: transform 0.2s; flex-shrink: 0; } .menu-logo img { filter: drop-shadow(4px 4px 0px #000); width: 100%; height: auto; } .menu-logo:hover { transform: scale(1.05); } .search-form-8bit { display: flex; border: 4px solid #000; background: #fff; box-shadow: 4px 4px 0 rgba(0,0,0,0.2); } .search-input { background: transparent; border: none; padding: 8px 15px; font-family: 'Press Start 2P', cursive; font-size: 10px; color: #000; width: 250px; /* Độ d� i vừa phải trên PC */ outline: none; } .search-submit-btn { background-color: #f1c40f; /* M� u v� ng đồng xu */ border-left: 4px solid #000; padding: 0 15px; font-family: 'Press Start 2P', cursive; font-size: 10px; color: #000; cursor: pointer; border-top: none; border-right: none; border-bottom: none; } .search-submit-btn:hover { background-color: #ffcd88; } .search-mobile-icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: #f1c40f !important; border: 4px solid #000 !important; border-radius: 0 !important; box-shadow: inset 3px 3px 0 rgba(255,255,255,0.5); text-decoration: none; } .pixel-glass { width: 12px; height: 12px; border: 2px solid #000; border-radius: 50%; position: relative; display: inline-block; } .pixel-glass::after { content: ""; position: absolute; width: 6px; height: 2px; background: #000; bottom: -4px; right: -4px; transform: rotate(45deg); } .search-mobile-icon-btn:active { transform: translateY(2px); box-shadow: none; } .menu-btn { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background-color: #d35400 !important; border: 4px solid #000 !important; border-radius: 0 !important; box-shadow: inset 4px 4px 0 rgba(255,255,255,0.3), inset -4px -4px 0 rgba(0,0,0,0.3); transition: transform 0.1s; } .menu-btn .line { background-color: #000 !important; height: 4px !important; width: 22px !important; display: block; } .menu-btn:active { transform: translateY(3px); box-shadow: inset 4px 4px 0 rgba(0,0,0,0.3); } @media (max-width: 1023px) { .search-pc-wrapper { display: none !important; } .search-mobile-icon-btn { display: flex; } } @media (min-width: 1024px) { .menu-logo { width: 180px; } .search-pc-wrapper { display: block !important; } .search-mobile-icon-btn { display: none !important; } .search-input { width: 350px; } } .search-results-8bit { position: absolute; top: 110%; left: 0; right: 0; background: #000; border: 4px solid #fff; outline: 4px solid #000; z-index: 1000; image-rendering: pixelated; box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.4); } .search-item-8bit { display: flex; align-items: center; gap: 12px; padding: 10px; text-decoration: none !important; border-bottom: 2px dashed #333; transition: all 0.1s steps(2); } .search-item-8bit:last-child { border-bottom: none; } .search-item-8bit img { width: 40px; height: 40px; border: 2px solid #fff; object-fit: cover; } .search-item-8bit .game-name { font-family: 'Press Start 2P', cursive; font-size: 10px; color: #030303; text-transform: uppercase; } .search-item-8bit:hover { background: #f1c40f; } .search-item-8bit:hover .game-name { color: #000; } .search-no-result { padding: 15px; color: #ff4757; font-family: 'Press Start 2P', cursive; font-size: 8px; text-align: center; } .hidden { display: none; } .search-results-creative { position: absolute; top: 110%; left: 0; right: 0; background: #fdf6e3 !important; border: 4px solid #000; z-index: 1000; image-rendering: pixelated; box-shadow: inset 5px 5px 0 #fff, inset -5px -5px 0 #d5c4a1, 10px 10px 0 rgba(0,0,0,0.2); } .search-item-pixel { display: flex; align-items: center; gap: 15px; padding: 12px; text-decoration: none !important; border-bottom: 2px solid #000; transition: all 0.1s steps(2); } .search-item-pixel:last-child { border-bottom: none; } .search-item-pixel img { width: 48px; height: 48px; border: 3px solid #000; background: #000; object-fit: cover; } .search-item-pixel .game-name { font-family: 'Press Start 2P', cursive; font-size: 10px; color: #2c3e50 !important; text-transform: uppercase; line-height: 1.4; text-shadow: none; } .search-item-pixel:hover { background: #2ecc71 !important; transform: translateX(8px); } .search-item-pixel:hover .game-name { color: #fff !important; } .search-no-result { padding: 20px; c#EA0404e74c3c; font-family: 'Press Start 2P', cursive; font-size: 9px; text-align: center; background: #fdf6e3; }