/*
 * dien-thoai.css - Lớp tối ưu riêng cho điện thoại và máy tính bảng.
 *
 * Tệp này gom những thứ mà thu nhỏ giao diện máy tính KHÔNG giải quyết được:
 * cỡ chạm ngón tay, lỗi tự phóng to của iOS, chiều cao màn hình thật của trình
 * duyệt di động, phần khuyết của máy có tai thỏ, và tràn ngang.
 *
 * Nạp sau cùng nên các quy tắc ở đây luôn thắng.
 */

/* ==========================================================================
   1. Chống tràn ngang - lỗi khó chịu nhất trên điện thoại
   ========================================================================== */

/*
 * Dùng clip chứ KHÔNG dùng hidden. Lý do quan trọng: overflow-x: hidden đặt trên
 * html hoặc body sẽ vô hiệu hoá position: sticky ở mọi phần tử con, làm hỏng cả
 * đầu trang ghim lẫn cột bên dính. Giá trị clip chặn tràn ngang mà không tạo
 * vùng cuộn mới nên sticky vẫn chạy đúng.
 */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

/* Trình duyệt cũ chưa hiểu clip thì đành quay về hidden, chấp nhận mất hiệu ứng ghim. */
@supports not (overflow-x: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* Bảng do khách dán từ Word rất hay làm vỡ bố cục, ép cuộn trong khung riêng.
   Tệp JS chinh.js sẽ tự bọc mọi bảng trong nội dung bằng lớp này. */
.bang-cuon {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--kc-5);
}

.bang-cuon table {
	margin-bottom: 0;
	min-width: 520px;
}

/* Video và bản đồ nhúng luôn co theo khung chứa. */
.noi-dung-soan-thao iframe,
.noi-dung-soan-thao embed,
.noi-dung-soan-thao object {
	max-width: 100%;
}

/* Chuỗi dài không có dấu cách (đường dẫn, mã đơn) tự xuống dòng thay vì đẩy trang. */
.noi-dung-soan-thao,
.the-bai__tieu-de,
.bai-ngang__tieu-de,
.bai-don__tieu-de,
.comment-content {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ==========================================================================
   2. Chiều cao màn hình thật trên trình duyệt di động
   ========================================================================== */

/*
 * Trên iOS Safari và Chrome Android, 100vh tính cả phần thanh địa chỉ
 * nên trang bị hụt một đoạn khi thanh đó ẩn đi. Đơn vị dvh giải quyết đúng việc này.
 */
@supports (height: 100dvh) {
	.trang-boc {
		min-height: 100dvh;
	}

	.menu-dien-thoai {
		height: 100dvh;
	}
}

/* ==========================================================================
   3. Phần khuyết màn hình của máy có tai thỏ
   ========================================================================== */

@supports (padding: max(0px)) {
	.khung {
		padding-left: max(var(--kc-4), env(safe-area-inset-left));
		padding-right: max(var(--kc-4), env(safe-area-inset-right));
	}

	.nut-len-dau {
		bottom: max(var(--kc-4), env(safe-area-inset-bottom));
	}

	.cum-nut-noi {
		bottom: max(var(--kc-4), env(safe-area-inset-bottom));
		left: max(var(--kc-3), env(safe-area-inset-left));
	}

	.menu-dien-thoai__chan {
		padding-bottom: max(var(--kc-4), env(safe-area-inset-bottom));
	}
}

/* ==========================================================================
   4. Chạm ngón tay
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

	/*
	 * Mọi thứ bấm được phải đạt tối thiểu 44x44 điểm ảnh - đây là ngưỡng
	 * Apple và Google cùng khuyến nghị để ngón tay bấm không trượt.
	 */
	.nut,
	button,
	.nut-bieu-tuong,
	.page-link,
	.nut-chia-se,
	.mang-xa-hoi a,
	.nut-mo-menu-con {
		min-height: 44px;
		min-width: 44px;
	}

	.menu--dien-thoai > li > a,
	.menu--dien-thoai .menu-con a {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* Bỏ ô sáng xanh khi chạm của trình duyệt di động, thay bằng phản hồi riêng. */
	a,
	button,
	input,
	select,
	textarea,
	label {
		-webkit-tap-highlight-color: rgba(var(--mau-chinh-rgb), 0.12);
	}

	/*
	 * Trên thiết bị cảm ứng, hiệu ứng rê chuột gây khó chịu: bấm một lần chỉ để
	 * kích hoạt hover, phải bấm lần hai mới mở được liên kết. Tắt hết.
	 */
	.the-bai:hover {
		transform: none;
		box-shadow: none;
		border-color: var(--mau-vien);
	}

	.the-bai:hover .the-bai__anh img,
	.bai-ngang:hover .bai-ngang__anh img {
		transform: none;
	}

	.nut:hover,
	.nut:focus {
		transform: none;
	}

	/* Menu con chỉ mở khi bấm nút mũi tên, không mở khi ngón tay lướt qua. */
	.menu li:hover > .menu-con {
		opacity: 0;
		visibility: hidden;
	}

	.menu li.dang-mo > .menu-con {
		opacity: 1;
		visibility: visible;
	}
}

/* ==========================================================================
   5. Sửa lỗi tự phóng to khi bấm vào ô nhập trên iOS
   ========================================================================== */

/*
 * iOS Safari tự phóng to trang khi ô nhập có cỡ chữ dưới 16px, sau đó không
 * thu lại được - lỗi này làm hỏng trải nghiệm ở mọi biểu mẫu.
 * Cách chữa duy nhất hiệu quả là ép cỡ chữ đúng 16px trên màn hình nhỏ.
 */
@media (max-width: 900px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
	}
}

/* ==========================================================================
   6. Khoá cuộn nền khi mở ngăn kéo menu
   ========================================================================== */

/*
 * Chỉ đặt overflow hidden là không đủ trên iOS, trang nền vẫn trôi.
 * JavaScript sẽ ghi lại vị trí cuộn rồi gắn lớp này, khi đóng menu thì trả về chỗ cũ.
 */
body.khoa-cuon {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   7. Tinh chỉnh bố cục theo từng cỡ màn hình
   ========================================================================== */

/* Máy tính bảng dựng đứng. */
@media (max-width: 900px) {
	:root {
		/* Thu khoảng cách dọc lại cho trang bớt dài lê thê khi cuộn bằng ngón tay. */
		--kc-7: 36px;
		--kc-8: 48px;
	}

	.khung {
		padding-left: var(--kc-3);
		padding-right: var(--kc-3);
	}

	.widget {
		padding: var(--kc-4);
	}

	.comment-respond,
	.hop-tac-gia,
	.khong-co-bai,
	.khong-co-ket-qua {
		padding: var(--kc-4);
	}
}

/* Điện thoại. */
@media (max-width: 600px) {
	:root {
		--kc-hai-cot: 24px;
	}

	body {
		font-size: 0.975rem;
	}

	/* Tiêu đề bài viết trên điện thoại cần nhỏ lại nhưng vẫn phải nổi bật. */
	.bai-don__tieu-de,
	.trang-tinh__tieu-de {
		font-size: 1.5rem;
	}

	.bai-don__noi-dung,
	.trang-tinh__noi-dung {
		font-size: 1rem;
	}

	/* Dòng thông tin phụ nhiều mục dễ tràn, cho xuống dòng gọn gàng. */
	.meta-bai {
		gap: 6px var(--kc-3);
		font-size: 12px;
	}

	/* Ảnh trong bài tràn sát mép để tận dụng bề ngang màn hình hẹp. */
	.bai-don__anh,
	.trang-tinh__anh {
		margin-left: calc(var(--kc-3) * -1);
		margin-right: calc(var(--kc-3) * -1);
		border-radius: 0;
	}

	/* Phân trang trên điện thoại: chỉ giữ mũi tên, trang hiện tại và hai trang kề. */
	.pagination {
		gap: 5px;
	}

	.page-link {
		min-width: 44px;
		min-height: 44px;
		padding: 0 8px;
		font-size: var(--co-chu-nho);
	}

	/* Nút trong trang chi tiết trải rộng cho dễ bấm bằng ngón cái. */
	.khoi-mo-dau__nut .nut,
	.trang-404__nut .nut {
		flex: 1 1 100%;
	}

	/* Bảng tìm kiếm trượt và ngăn kéo cần chiếm trọn bề ngang. */
	.bang-tim-kiem .khung {
		gap: var(--kc-2);
	}

	/* Nút liên hệ nổi xếp ngang dưới đáy cho khỏi che nội dung bên trái. */
	.cum-nut-noi {
		flex-direction: row;
	}

	/* Nút lên đầu trang nhường chỗ cho cụm liên hệ. */
	.nut-len-dau {
		width: 42px;
		height: 42px;
	}
}

/* Điện thoại nhỏ, bề ngang dưới 380 điểm ảnh. */
@media (max-width: 380px) {
	.nhan-dien img,
	.custom-logo {
		max-width: 150px;
	}

	.nhan-dien__ten {
		font-size: 1.1rem;
	}

	/* Bớt một nút biểu tượng ở đầu trang cho khỏi chật. */
	.nut-gio-hang {
		display: none;
	}

	.the-bai__than {
		padding: var(--kc-3);
	}
}

/* ==========================================================================
   8. Điện thoại xoay ngang
   ========================================================================== */

@media (max-height: 480px) and (orientation: landscape) {
	/* Đầu trang ghim chiếm gần hết màn hình khi xoay ngang, bỏ ghim đi. */
	body.header-dinh .dau-trang__chinh {
		position: static;
	}

	.khoi-mo-dau {
		padding: var(--kc-6) 0;
	}

	.khoi-mo-dau--co-anh {
		padding: var(--kc-7) 0;
	}
}