/* ==========================================================================
   MEDIA QUERIES - ĐIỀU CHỈNH RESPONSIVE TRÊN ĐIỆN THOẠI VÀ MÁY TÍNH
   ========================================================================== */

/* --- 1. ĐIỆN THOẠI DI ĐỘNG (SMARTPHONE - Màn hình <= 768px) --- */
@media screen and (max-width: 768px) {
	html, body, #container {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Giới hạn kích thước popup/video nhúng cân đối 80% trên điện thoại */
	.ggskin, .ggskin-popup, iframe, video {
		max-width: 80vw !important;
		max-height: 80vh !important;
	}

	/* Tối ưu chữ cảnh báo noscript trên điện thoại */
	noscript {
		width: 90%;
		max-width: 320px;
		font-size: 13px;
		text-align: center;
		bottom: 12px;
	}
}

/* --- 2. ĐIỆN THOẠI XOAY NGANG (MOBILE LANDSCAPE) --- */
@media screen and (max-height: 500px) and (orientation: landscape) {
	html, body, #container {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	noscript {
		bottom: 5px;
		padding: 6px 14px;
		font-size: 12px;
	}
}

/* --- 3. MÁY TÍNH BẢNG (TABLET / IPAD - 769px đến 1024px) --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	html, body, #container {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ggskin-popup, iframe, video {
		max-width: 90vw !important;
	}
}

/* --- 4. MÀN HÌNH MÁY TÍNH / LAPTOP (DESKTOP - >= 1025px) --- */
@media screen and (min-width: 1025px) {
	html, body {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#container {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ggskin-popup, iframe, video {
		max-width: 90vw !important;
		max-height: 90vh !important;
	}
}

/* --- 5. MÀN HÌNH ĐỘ PHÂN GIẢI CAO (>= 1920px) --- */
@media screen and (min-width: 1920px) {
	html, body, #container {
		width: 100% !important;
		height: 100% !important;
	}
}

/* --- 6. THIẾT BỊ CẢM ỨNG (TOUCH DEVICES) --- */
@media (hover: none) and (pointer: coarse) {
	* {
		-webkit-touch-callout: none;
	}
}