/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/**
 * Bảng tra cứu kèo Tài Xỉu trong hub Thể Thao EE88.
 *
 * Bảng có 4 cột nên ở màn hình hẹp sẽ bị ép cột, chữ khó đọc. Bọc trong
 * khối có overflow-x để người đọc cuộn ngang được thay vì co nhỏ chữ.
 * Khối cuộn chỉ bắt đầu từ 48em, ở màn hình rộng bảng hiển thị đầy đủ.
 */
.ee88sd-thethao-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 12px 0 18px 0;
}

.ee88sd-thethao-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	min-width: 560px;
}

.ee88sd-thethao-table-wrap th,
.ee88sd-thethao-table-wrap td {
	border: 1px solid #d7dde6;
	padding: 8px 10px;
	text-align: left;
}

.ee88sd-thethao-table-wrap th {
	background: #f4f6f9;
}

@media only screen and (max-width: 48em) {
	.ee88sd-thethao-table-wrap {
		margin-left: -15px;
		margin-right: -15px;
		padding: 0 15px;
	}
}

/*************** ADD MOBILE ONLY CSS HERE  ***************/

/**
 * Bảng tra cứu trong các bài tin tức EE88.
 *
 * Bảng có 3 cột nên ở màn hình hẹp sẽ bị ép cột, chữ khó đọc. Bọc trong
 * khối có overflow-x để người đọc cuộn ngang được thay vì co nhỏ chữ.
 * Khối cuộn chỉ bắt đầu từ 48em, ở màn hình rộng bảng hiển thị đầy đủ.
 */
.ee88sd-tintuc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 12px 0 18px 0;
}

.ee88sd-tintuc-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	min-width: 520px;
}

.ee88sd-tintuc-table-wrap th,
.ee88sd-tintuc-table-wrap td {
	border: 1px solid #d7dde6;
	padding: 8px 10px;
	text-align: left;
}

.ee88sd-tintuc-table-wrap th {
	background: #f4f6f9;
}

@media only screen and (max-width: 48em) {
	.ee88sd-tintuc-table-wrap {
		margin-left: -15px;
		margin-right: -15px;
		padding: 0 15px;
	}
}

/**
 * Tương phản màu cho phần nội dung do child theme thêm.
 *
 * Flatsome để màu chữ mặc định #777 trên nền trắng, tỷ lệ tương phản chỉ
 * 4.47:1, dưới ngưỡng 4.5:1 mà WCAG AA yêu cầu cho chữ cỡ thường. Các
 * khối dưới đây được đặt lại về #5c6270 (7:1) để đạt chuẩn.
 *
 * Link trong đoạn văn bản cũng cần gạch chân để không phụ thuộc màu sắc
 * để phân biệt, đúng theo WCAG 1.4.1.
 */
.ee88sd-archive-intro,
.ee88sd-archive-intro p,
.ee88sd-archive-intro strong {
	color: #5c6270;
}

.ee88sd-archive-intro a,
.ee88sd-thethao-intro a,
.ee88sd-tin-tuc-intro a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ee88sd-thethao-faq .accordion-title span,
.ee88sd-thethao-faq .accordion-title {
	color: #5c6270;
}

/**
 * Tương phản màu chung cho nội dung chuyên mục và phần tóm tắt bài viết.
 *
 * Flatsome đặt màu chữ nội dung là #777 trên nền trắng (4.47:1), thấp hơn
 * ngưỡng 4.5:1 của WCAG AA. Nhãn chuyên mục nằm trong nội dung bài cũng dùng
 * màu này. Các lớp dưới đây nâng màu chữ lên #5c6270 (7:1) mà không đổi
 * bố cục.
 */
.taxonomy-description,
.taxonomy-description p,
.entry-summary p,
.entry-meta,
.entry-meta a,
.cat-links,
.cat-links a {
	color: #5c6270;
}

/**
 * Link trong khối chữ phải phân biệt được bằng gạch chân, không chỉ bằng màu.
 * Đây là yêu cầu WCAG 1.4.1 (Use of Color).
 *
 * Flatsome tô màu link bằng #334862, gần với màu chữ thân bài #1e2430, nên
 * link gần như chỉ nhận ra bằng màu. Gạch chân giữ màu sắc thiết kế và đáp
 * ứng yêu cầu phân biệt nội dung.
 */
.taxonomy-description a,
.entry-summary p a,
.entry-summary a,
.cat-links a,
.ee88sd-thethao-intro a,
.ee88sd-thethao-table-wrap a,
.accordion-inner a,
.ee88sd-archive-intro a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/**
 * Toàn bộ nội dung hub Thể Thao EE88 nằm trong các khối [ux_text] của
 * Flatsome, không mang class riêng nên cần đánh dấu bằng class trên thẻ
 * bao ngoài để áp gạch chân cho mọi link trong nội dung.
 */
.ee88sd-thethao-hub a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/**
 * Toàn bộ nội dung hub Tin Tức EE88 nằm trong các khối [ux_text] của
 * Flatsome, không mang class riêng nên cần đánh dấu bằng class trên thẻ
 * bao ngoài để áp gạch chân cho mọi link trong nội dung.
 */
.ee88sd-tin-tuc-hub a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/**
 * Link trong khối chữ cần gạch chân để phân biệt được bằng hình thức, không
 * chỉ bằng màu (WCAG 1.4.1). Link cùng nội dung chuyên mục dùng màu gần với
 * màu chữ thân bài nên không có gạch chân thì gần như không nhận ra.
 */
.ee88sd-cluster a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/**
 * Nút header: hai biến thể nền khác nhau nên cần màu chữ khác nhau.
 *
 * - Nền đỏ #d51f2a: chữ trắng đạt 5.17:1, giữ nguyên.
 * - Nền vàng #f5c451: chữ trắng chỉ đạt 1.63:1, không đọc được. Dùng nâu
 *   rất đậm #3d2e00 để đạt 8.12:1.
 */
.header-button a.button.primary span,
.header-button a.button:not(.alert) span {
	color: #3d2e00;
}

.header-button a.button.alert span {
	color: #ffffff;
}

/**
 * Nút "Đọc tiếp" của Flatsome dùng màu chữ #f5c451 trên nền trắng, tương phản
 * chỉ 1.62:1 nên gần như không đọc được. Chuyển sang nâu rất đậm, tương phản
 * trên nền vàng đạt 8.12:1.
 */
a.more-link,
.entry-summary .more-link {
	color: #3d2e00;
}

/**
 * Breadcrumb của Rank Math dùng màu #777 (4.47:1, dưới ngưỡng AA).
 */
.rank-math-breadcrumb p,
.rank-math-breadcrumb p span.last,
.rank-math-breadcrumb p a {
	color: #5c6270;
}

.rank-math-breadcrumb p a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/**
 * Khối bình luận rỗng dùng màu #777 cho dòng thông báo.
 */
.no-comments {
	color: #5c6270;
}

/**
 * Bảng tra cứu nguyên nhân lỗi đăng nhập trong trang Không đăng nhập
 * được EE88.
 *
 * Bảng có 3 cột, trên màn hình hẹp sẽ bị ép cột và chữ khó đọc. Bọc trong
 * khối có overflow-x để người đọc cuộn ngang được thay vì co nhỏ chữ.
 * Khối cuộn chỉ bắt đầu từ 48em, ở màn hình rộng bảng hiển thị đầy đủ.
 */
.ee88sd-khong-dang-nhap-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 12px 0 18px 0;
}

.ee88sd-khong-dang-nhap-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	min-width: 640px;
}

.ee88sd-khong-dang-nhap-table-wrap th,
.ee88sd-khong-dang-nhap-table-wrap td {
	border: 1px solid #d7dde6;
	padding: 8px 10px;
	text-align: left;
}

.ee88sd-khong-dang-nhap-table-wrap th {
	background: #f4f6f9;
}

@media only screen and (max-width: 48em) {
	.ee88sd-khong-dang-nhap-table-wrap {
		margin-left: -15px;
		margin-right: -15px;
		padding: 0 15px;
	}
}

/**
 * Nội dung trang Không đăng nhập được EE88 nằm trong các khối [ux_text]
 * của Flatsome, không mang class riêng nên cần đánh dấu bằng class trên
 * thẻ bao ngoài để áp gạch chân cho mọi link trong nội dung.
 */
.ee88sd-khong-dang-nhap-hub a {
	text-decoration: underline;
	text-underline-offset: 2px;
}