﻿@media (max-width: 1024px) {
	.menu-container {
		height: 400px;
		background-size: cover;
		background-repeat: repeat;
	}

	.custom-header {
		flex-direction: column;
		padding: 10px 20px;
		height: auto;
	}

	.logo {
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.menu .nav-link {
		font-size: 14px;
	}

	.icons {
		margin: 10px auto;
		gap: 20px;
	}

	.user-menu {
		gap: 8px;
	}

	.scratch-title h1 {
		font-size: 28px;
		margin-top: 60px;
	}

	.contact-content {
		flex-direction: column;
		gap: 20px;
		margin: 20px 40px;
	}

	.contact-description,
	.contact-form {
		max-width: 100%;
	}

		.contact-description h3 {
			font-size: 48px;
		}

		.contact-description p {
			font-size: 16px;
		}

	.contact-form {
		margin: 0 auto;
		margin-bottom: 20px;
	}

		.contact-form h3 {
			font-size: 24px;
		}

		.contact-form label {
			font-size: 16px;
		}

		.contact-form input,
		.contact-form textarea {
			font-size: 14px;
		}

		.contact-form .submit-btn {
			width: 100%;
		}

	.contact-description img {
		display: none;
	}

	.footer-contain {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-header img {
		max-width: 250px;
		height: auto;
		margin-left: 10px;
	}

	.footer-container {
		gap: 20px;
	}

	.footer-right {
		margin-top: 20px;
		text-align: center;
	}

	.footer-apps img {
		width: 100px;
		height: 35px;
	}

	.confirm-img {
		width: 200px;
		height: 80px;
	}

	.content-container {
		flex-direction: column;
		gap: 20px;
		touch-action:
	}

	.content-wrapper {
		flex-direction: column;
	}

	.sidebar {
		order: 1;
		margin: 0 auto;
		width: 100%;
	}

	.main-content {
		order: 2;
		width: 100%;
	}

	.ranking {
		order: 3;
		margin: 0 auto;
		width: 100%;
	}

	.partners-section {
		padding: 20px;
	}

	.partners-row-1, .partners-row-2 {
		flex-wrap: wrap;
		justify-content: center;
	}

	.partner-logo img {
		width: 180px;
		height: 180px;
	}

	.review-video {
		max-width: 100%;
		height: auto;
	}

	.review-slider {
		margin-left: 0;
	}

	.reviews-container {
		gap: 0;
	}

	.game-details-container {
		flex-direction: column;
		padding: 20px;
	}

	.game-details-main {
		flex-direction: column;
		gap: 20px;
		padding: 0;
	}

	.game-content, .game-side-panel {
		flex: unset;
		width: 100%;
	}

	.game-preview {
		border-radius: 12px;
	}

	.btn-play {
		font-size: 16px;
		padding: 12px 18px;
	}

	.game-description, .related-products {
		padding: 16px;
	}

	.comment-content {
		padding: 0;
	}

	.comment-input input {
		font-size: 16px;
		padding: 14px;
	}

	.comment-input .btn-comment {
		font-size: 16px;
		padding: 12px 18px;
	}

	.comment-details .comment-author {
		font-size: 14px;
	}

	.comment-details .comment-text {
		font-size: 12px;
	}
}

@media (max-width: 920px) {
	.review-video {
		max-width: 100%;
		width: 450px;
		margin: 0 auto;
		height: auto;
	}

	.reviews-container {
		flex-direction: column;
		gap: 40px;
	}

	.partners-row-1, .partners-row-2 {
		display: flex;
		align-items: center;
	}

	.partners-row-2 {
		margin-top: 0;
	}

	.partner-logo img {
		width: 140px;
		height: 140px;
	}
}

@media (max-width: 480px) {

	.custom-header {
		padding: 5px 10px;
	}

	.menu .nav-link {
		font-size: 12px;
		padding: 0;
	}

	.scratch-title h1 {
		font-size: 24px;
	}

	.contact-header h2 {
		font-size: 20px;
	}

	.contact-header p {
		font-size: 24px;
	}

	.contact-description h3 {
		font-size: 32px;
	}

	.contact-description p {
		font-size: 14px;
	}

	.contact-form h3 {
		font-size: 20px;
	}

	.contact-form label {
		font-size: 14px;
	}

	.contact-form input,
	.contact-form textarea {
		font-size: 12px;
		padding: 8px;
	}

	.contact-form .submit-btn {
		font-size: 16px;
		padding: 12px;
	}

	.footer-header img {
		max-width: 200px;
	}

	.footer-apps img {
		width: 80px;
		height: 30px;
	}

	.confirm-img {
		width: 150px;
		height: 60px;
	}

	.content-container {
		padding: 10px;
		gap: 10px;
	}

	.contact-content {
		margin: 20px 10px 0 10px;
	}

	.content-title, .section-title {
		font-size: 18px;
	}

	.sidebar {
		width: 100%;
		padding: 10px;
	}

	.cate-menu ul {
		gap: 12px;
	}

	.category-item span {
		font-size: 14px;
	}

	.btn-post {
		font-size: 16px;
		padding: 12px;
	}

	.main-content {
		padding: 10px;
		gap: 16px;
	}

	.post {
		padding: 10px;
		gap: 10px;
	}

	.post-avatar {
		width: 48px;
		height: 48px;
	}

	.post-title {
		font-size: 16px;
	}

	.post-author {
		font-size: 12px;
	}

	.post-body {
		flex-direction: column;
		gap: 10px;
	}

	.video-thumbnail {
		width: 300px;
		margin: 0 auto;
		display: block;
	}

	.post-image, .thumbnail-image, .post-iframe {
		width: 300px;
		height: auto;
		margin: 0 auto;
		display: block;
	}

	.ranking {
		padding: 10px;
	}

	.rank-user img {
		width: 40px;
		height: 40px;
	}

	.info .name {
		font-size: 14px;
	}

	.info .score {
		font-size: 12px;
	}

	.partners-row-1, .partners-row-2 {
		display: flex;
		align-items: center;
	}

	.partners-row-2 {
		margin-top: 0;
	}

	.partner-logo img {
		width: 150px;
		height: 150px;
	}

	.section-content {
		padding: 20px 0;
		font-size: 26px;
	}

	.reviews-container {
		gap: 20px;
	}

	.review-card {
		padding: 10px;
		font-size: 14px;
	}

	.review-author img {
		width: 40px;
		height: 40px;
	}

	.customer-info .name {
		font-size: 14px;
	}

	.customer-info .job {
		font-size: 12px;
	}

	.game-details-container {
		gap: 16px;
		padding: 16px;
	}

	.back-link img {
		width: 24px;
		height: 24px;
	}

	.back-link span {
		font-size: 16px;
	}

	.game-details-main {
		gap: 16px;
	}

	.game-info {
		gap: 12px;
		padding: 16px;
		box-shadow: none; /* Có thể bỏ shadow nếu cần tối giản */
	}

	.post-title {
		font-size: 18px;
	}

	.post-author {
		font-size: 14px;
	}

	.icon-post img {
		width: 18px;
		height: 18px;
	}

	.game-preview {
		border-radius: 10px;
	}

	.btn-play {
		font-size: 14px;
		padding: 10px 16px;
	}

	.game-description, .related-products, .comments-section {
		padding: 12px;
		box-shadow: none;
	}

	.title-details {
		font-size: 18px;
	}

	.gallery-container {
		gap: 10px;
	}

	.gallery-row {
		gap: 10px;
	}

	.comment-input input {
		font-size: 14px;
		padding: 12px;
	}

	.comment-input .btn-comment {
		font-size: 12px;
		padding: 8px 10px;
	}

	.comment-item img {
		width: 40px;
		height: 40px;
	}

	.comment-details .comment-author {
		font-size: 12px;
	}

	.comment-details .comment-text {
		font-size: 10px;
	}

	.product-same {
		align-items: center;
		gap: 10px;
	}

		.product-same img {
			width: 80px;
			height: 48px;
		}

	.product-name {
		font-size: 14px;
	}

	.popup-container {
		gap: 10px;
		padding: 10px;
		margin: 5px;
	}

	.tab-content {
		gap: 10px;
	}

	.popup-form {
		gap: 10px;
	}

	.popup-header h3 {
		font-size: 20px;
	}

	.form-group label {
		font-size: 14px;
	}

	.form-group input, .form-group textarea {
		font-size: 12px;
	}

	.tab {
		font-size: 12px;
		align-items: center;
		padding: 10px;
	}

		.tab.active {
			font-size: 12px;
			align-items: center;
		}

	.image-list {
		gap: 10px;
	}

	.image-item {
		width: 50px;
		height: 50px;
	}

	.upload-thumbnail h4 {
		font-size: 16px;
	}

	.upload-btn {
		font-size: 14px;
	}

	.submit-btn-overlay {
		padding: 12px;
		font-size: 14px;
	}
}
