/*
Theme Name: TSRH 2023
Theme URI: https://talkingsportswithrandyharris.com/
Author: Talking Sports Network
Description: Phục hồi giao diện Talking Sports Network (talkingsportswithrandyharris.com) theo bản lưu Wayback 2023-08-24: bố cục bảng 975px, nền xanh #3C5998 / #E5ECF9, chữ Tahoma 10pt. Dựng lại bằng CSS grid/flex, giữ nguyên class gốc (tsrh.css).
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: tsrh2023
*/

/* ===== tsrh.css gốc (giữ nguyên quy tắc, đường dẫn ảnh về theme) ===== */
/* Trang gốc có <body style="background-color:#DDDDDD"> lồng trong cột trái → trình duyệt tô nền xám #DDDDDD cho cả trang */
html { background: #DDDDDD; }
body {
	margin: 0;
	background-color: #DDDDDD;
	font-family: Tahoma, Verdana, Geneva, sans-serif;
	font-size: 10pt;
	color: #000;
	line-height: 1.25;
}
td { font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 10pt; }
hr { background-color: #3C5998; height: 1px; border: 0; }
a:link, a:visited { color: #3C5998; text-decoration: none; }
a:hover, a:active { color: #333366; }
input, select, textarea { font-family: Tahoma, Verdana, sans-serif; font-size: 8pt; }
img { border: 0; max-width: 100%; height: auto; }
.tdis p { text-indent: -41px; margin-left: 41px; margin-top: 0; margin-bottom: 0; }
.pageHeader {
	text-align: left; background-color: #3C5998; padding: 2px 0 2px 5px;
	color: #FFFFFF; font-family: Tahoma, Verdana, sans-serif; font-size: 11pt; font-weight: bold;
	margin: 0;
}
.navMenu { text-align: center; color: #FFFFFF; font-family: Tahoma, Verdana, sans-serif; font-size: 8pt !important; }
.navMenu a:link, .navMenu a:visited { color: #FFFFFF !important; text-decoration: none; font-weight: bold; }
.navMenu a:hover, .navMenu a:active { color: #CCCCFF !important; text-decoration: none; font-weight: bold; }
.newsCell { padding: 5px; }
.newsTitle { font-family: Tahoma, Verdana, sans-serif; font-size: 10pt; font-weight: bold; text-align: left; }
.QnA { background-color: #E5ECF9; }
.qnaTitle { font-family: Tahoma, Verdana, sans-serif; font-size: 11pt; font-weight: bold; }
.photoCaption { font-family: Tahoma, Verdana, sans-serif; font-size: 8pt; }
.photographerCredit { font-family: Tahoma, Verdana, sans-serif; font-size: 7pt; }
.storyLink a { font-family: Tahoma, Verdana, sans-serif; font-size: 7pt; }
.headlines { padding: 10px; text-align: left; }
.headlines ul { margin: 6px 0 10px; padding-left: 40px; }
.schedule, .schedule td { font-size: 8pt; border-collapse: collapse; }
.TSNCalendar { font-weight: bold; width: 100%; background-color: #3C5998; color: #FFFFFF; box-sizing: border-box; padding: 1px 0 1px 4px; }
.copyright, .copyright td, .copyright a { width: 100%; text-align: center; background-color: #3C5998; font-size: 8pt; font-weight: bold; color: #FFFFFF; }

/* ===== Khung trang (thay cho table.tableBorder / firstTable / secondTable) ===== */
.site-center { display: flex; justify-content: center; }
.tableBorder {
	border: 1px #FFFFFF solid; margin: 5pt; padding: 2pt;
	width: 975px; max-width: calc(100vw - 10pt - 4pt - 2px); box-sizing: content-box;
	background: #E5ECF9;
}
.firstTable {
	background-color: #E5ECF9; background-image: url('images/background.jpg');
	background-position: 0 0; background-repeat: repeat-x; width: 100%;
	padding-bottom: 5px;
}
.headerTable {
	display: grid;
	grid-template-columns: 350px 370px 255px;
	grid-template-rows: 100px 25px 25px;
	width: 975px; max-width: 100%; text-align: left;
}
.hdr-logo { grid-column: 1; grid-row: 1 / span 2; height: 125px; display: flex; align-items: center; }
.hdr-logo img.logo { margin: 0 0 0 10px; display: block; }
.hdr-icons { grid-column: 2; grid-row: 1; display: flex; align-items: center; }
.hdr-knockout { grid-column: 3; grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; height: 150px; }
.hdr-ticker { grid-column: 2; grid-row: 2; height: 25px; overflow: hidden; }
.hdr-nav { grid-column: 1 / span 2; grid-row: 3; height: 25px; }
.hdr-nav ul, .foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.hdr-nav li, .foot-nav li { margin: 0; padding: 0; }
.hdr-nav li + li::before, .foot-nav li + li::before { content: " | "; color: #fff; font-weight: normal; white-space: pre; }

/* Ticker (thay applet Java aTicker) */
.ticker { width: 360px; height: 15px; overflow: hidden; background: #3C5998; color: #fff; font: bold 12px Tahoma, Verdana, sans-serif; line-height: 15px; position: relative; white-space: nowrap; }
.ticker span { display: inline-block; padding-left: 100%; animation: tsrh-ticker 28s linear infinite; }
@keyframes tsrh-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker span { animation: none; padding-left: 4px; } }

/* Thân trang */
.secondTable { display: grid; grid-template-columns: 175px 310px 490px; width: 100%; background: #E5ECF9; }
.secondTable.two-col { grid-template-columns: 175px 555px 245px; }
.secondTable.wide { grid-template-columns: 175px 800px; }
.column1 { width: 175px; text-align: center; }
.column1 .sponsors { background-color: #DDDDDD; padding: 5px 0 1px; min-height: 400px; }
.column1 .sponsors p { text-align: center; margin: 0 0 14px; }
.column2, .column2b, .column2c { background-color: #FFFFFF; text-align: left; min-width: 0; }
.column3 { width: 490px; max-width: 100%; }
.column3b { width: 245px; }
.column3 .side-grid { display: grid; grid-template-columns: 245px 245px; }
.column4 { width: 245px; text-align: center; vertical-align: top; }
.widget-box { width: 234px; margin: 6px auto; border: 1px solid #3c5998; background: #fff; text-align: left; font-size: 8pt; }
.widget-box h4 { margin: 0; background: #3c5998; color: #fff; font-size: 9pt; padding: 4px 6px; }
.widget-box .wb-body { padding: 6px; min-height: 60px; }
.widget-box .wb-body p { margin: 0 0 6px; }
.fanbox { height: 250px; width: 478px; max-width: 100%; overflow: auto; margin: 0 auto; background: #fff; border: 1px solid #ccc; box-sizing: border-box; font-size: 8pt; text-align: left; padding: 8px; }
.blue-panel { width: 100%; background: #3C5998; margin-bottom: 10px; }
.blue-panel .panel-body { text-align: center; padding: 2px 0; background: #E5ECF9; }
.blue-panel .panel-foot { text-align: right; }
.blue-panel .panel-foot a { color: #FFFFFF; }
.video-frame { display: inline-block; border: 5px solid #3C5998; padding: 1px; background: #fff; line-height: 0; }
.video-frame iframe, .video-frame .no-video { width: 455px; height: 366px; max-width: 100%; border: 0; display: block; }
.video-frame .no-video { background: #000 url('images/microphone.gif') center no-repeat; color: #fff; line-height: 1.4; font-size: 9pt; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; box-sizing: border-box; }
.calendar-box { background: #fff; width: 455px; max-width: 100%; height: auto; min-height: 120px; margin: 0 auto; text-align: left; padding: 8px 10px; box-sizing: border-box; font-size: 9pt; }
.calendar-box ul { margin: 4px 0 0; padding-left: 18px; }

/* Danh sách tin (news.asp / trang chủ) */
.news-list .news-item { overflow: hidden; }
.news-list .news-thumb { float: right; width: 100px; text-align: center; margin: 1px; }
.news-list .news-thumb img { margin: 0 5px; width: 90px; height: auto; }
.news-list p { margin: 1em 0; }
.news-list .news-date { font-size: 8pt; }
.news-list .news-lead { font-family: Tahoma, Verdana, sans-serif; font-weight: bold; font-style: italic; font-size: 9pt; color: #333366; margin-bottom: -12px; }
.news-list .news-excerpt { font-family: Tahoma, Verdana, sans-serif; font-size: 9pt; text-align: justify; }
.news-list .storyLink { display: block; }
.news-list hr { margin: 0.5em 0; }

/* Bài viết / trang */
.entry { padding: 5px; font-size: 10pt; }
.entry .entry-title { font-family: Tahoma, Verdana, sans-serif; font-size: 10pt; font-weight: bold; margin: 0.6em 0 0; }
.entry .news-date { font-size: 8pt; display: block; margin-bottom: 1em; }
.entry .news-lead { font-weight: bold; font-style: italic; font-size: 9pt; color: #333366; }
.entry .entry-content { font-size: 9pt; text-align: justify; }
.entry .entry-content p { margin: 0 0 1em; }
.entry .entry-content img { max-width: 100%; height: auto; }
.entry .entry-content iframe { max-width: 100%; }
.entry .entry-content table { max-width: 100%; }
.entry .entry-content .alignright, .entry .entry-content .alignleft { float: right; margin: 0 0 8px 8px; }
.entry .entry-content .alignleft { float: left; margin: 0 8px 8px 0; }
.entry .entry-content .aligncenter { display: block; margin: 8px auto; }
.entry .entry-content .wp-caption { max-width: 100%; }
.entry-meta { font-size: 8pt; color: #333366; margin: 1em 0; }
.entry-meta a { margin-right: 4px; }
.page-content { font-size: 10pt; }
.page-content p { margin: 0 0 1em; }
.pagination { font-size: 8pt; font-weight: bold; padding: 8px 5px; }
.pagination .page-numbers { padding: 0 4px; }
.notfound { padding: 20px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.entry .entry-photo { float: right; width: 100px; margin: 0 0 6px 8px; text-align: center; }
.entry .entry-photo img { width: 100px; height: auto; }
.archive-note { font-size: 8pt; color: #666; clear: both; }
.show-archive { columns: 2; font-size: 9pt; }
.tdis p { font-size: 9pt; }
.page-content table.schedule td { padding: 3px; border-bottom: 1px solid #E5ECF9; }

.poll { background: #E5ECF9; border: 1px solid #ccc; padding: 6px 10px; margin: 0 0 12px; }
.poll .poll-q { margin: 0 0 4px; }
.poll-results { width: 100%; border-collapse: collapse; font-size: 9pt; }
.poll-results td { padding: 1px 4px; }
.poll-results .poll-opt { width: 45%; }
.poll-results .poll-bar { background: #fff; border: 1px solid #999; height: 12px; }
.poll-results .poll-bar span { display: block; height: 12px; background: #3C5998; }
.poll-results .poll-pc { width: 40px; text-align: right; }
.poll-total { font-size: 8pt; margin: 4px 0 0; color: #333; }

/* Footer */
.copyright { display: block; }
.copyright .foot-nav, .copyright .foot-copy { padding: 2px 0; }
.copyright .foot-space { height: 20px; }

/* ===== Mobile ===== */
@media (max-width: 999px) {
	.site-center { display: block; }
	.tableBorder { width: auto; max-width: 100%; box-sizing: border-box; margin: 4px 0; padding: 2px; overflow: hidden; }
	.headerTable { width: 100%; grid-template-columns: 1fr; grid-template-rows: auto; }
	.secondTable > * { min-width: 0; max-width: 100%; }
	.hdr-logo, .hdr-icons, .hdr-knockout, .hdr-ticker, .hdr-nav { grid-column: 1; grid-row: auto; height: auto; justify-content: center; }
	.hdr-logo img.logo { margin: 6px auto; }
	.hdr-icons { justify-content: center; padding: 4px 0; }
	.hdr-ticker { margin: 4px auto; }
	.ticker { max-width: 100%; }
	.hdr-knockout { padding: 6px 0; }
	.hdr-nav { height: auto; padding: 4px 6px; line-height: 1.8; background: #3C5998; }
	.secondTable, .secondTable.two-col, .secondTable.wide { grid-template-columns: 1fr; }
	.column1 { width: auto; order: 3; }
	.column1 .sponsors { min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; }
	.column3, .column3b, .column4 { width: auto; }
	.column3 .side-grid { grid-template-columns: 1fr; justify-items: center; }
	.fanbox, .calendar-box, .video-frame iframe, .video-frame .no-video { width: 100%; }
	.video-frame { width: calc(100% - 20px); }
	.video-frame iframe, .video-frame .no-video { height: 56vw; }
	.news-list .news-thumb { width: 80px; }
	.news-list .news-thumb img { width: 70px; }
}