/* ============================================================
   TRUYENHINH.VN — MAIN STYLESHEET
   ============================================================ */
:root {
  --primary: #e53935;
  --primary-dark: #b71c1c;
  --bg: #0d0d0d;
  --bg2: #171717;
  --bg3: #222;
  --bg4: #2c2c2c;
  --text: #f0f0f0;
  --text2: #aaa;
  --text3: #555;
  --border: #2a2a2a;
  --radius: 10px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.container { max-width:960px; margin:0 auto; padding:0 16px; }
.section { margin-bottom:32px; }
.section-title { font-size:18px; font-weight:700; display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.section-title .line { flex:1; height:1px; background:var(--border); }
.section-title .more { font-size:13px; font-weight:400; color:var(--primary); }

/* ── HEADER ── */
.site-header { background:#111; border-bottom:2px solid #1e1e1e; position:sticky; top:0; z-index:100; }
.header-inner { display:flex; align-items:center; gap:16px; height:58px; }
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo img { height:38px; }
.logo-text { font-size:20px; font-weight:800; color:var(--primary); letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; }
.main-nav { display:flex; align-items:center; gap:2px; flex:1; }
.nav-link { padding:7px 13px; border-radius:7px; font-size:14px; font-weight:500; color:var(--text2); transition:all 0.18s; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.nav-link i { font-size:13px; }
.nav-link:hover, .nav-link.active { background:var(--bg3); color:var(--text); }
.header-actions { display:flex; gap:6px; flex-shrink:0; margin-left:auto; }
.icon-btn { background:var(--bg3); border:none; color:var(--text2); width:36px; height:36px; border-radius:7px; cursor:pointer; font-size:14px; transition:all 0.18s; display:flex; align-items:center; justify-content:center; }
.icon-btn:hover { background:var(--primary); color:#fff; }
.nav-toggle { display:none; }
.search-bar { overflow:hidden; max-height:0; transition:max-height 0.28s ease; }
.search-bar.open { max-height:60px; }
.search-bar form { display:flex; padding:10px 0; gap:8px; }
.search-bar input { flex:1; background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:9px 14px; border-radius:7px; font-size:14px; outline:none; font-family:inherit; }
.search-bar input:focus { border-color:var(--primary); }
.search-bar button { background:var(--primary); border:none; color:#fff; padding:9px 18px; border-radius:7px; cursor:pointer; font-size:14px; }

/* ── DATE BAR ── */
.date-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0 10px; }
.date-tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1; }
.date-tabs::-webkit-scrollbar { display:none; }
.date-tab { display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 16px; border-radius:10px; border:1px solid var(--border); color:var(--text2); white-space:nowrap; transition:all 0.18s; flex-shrink:0; background:var(--bg2); }
.date-tab:hover { border-color:#444; color:var(--text); background:var(--bg3); }
.date-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 4px 16px rgba(229,57,53,0.3); }
.dt-dow { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; opacity:0.65; }
.date-tab.active .dt-dow { opacity:0.85; }
.dt-label { font-size:13px; font-weight:700; }
.live-clock-wrap { display:flex; align-items:center; gap:7px; flex-shrink:0; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:7px 12px; }
.live-clock-val { font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }

/* ── LEAGUE BLOCKS ── */
.leagues-wrap { display:flex; flex-direction:column; gap:20px; padding-bottom:40px; }

.league-block { background:var(--bg2); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:box-shadow 0.2s; }
.league-block.has-live { border-color:rgba(229,57,53,0.4); box-shadow:0 0 0 1px rgba(229,57,53,0.15), 0 8px 32px rgba(229,57,53,0.08); }

/* League header */
.league-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--bg3); border-bottom:1px solid var(--border); border-left:4px solid var(--lc, #e53935); }
.league-head-left { display:flex; align-items:center; gap:14px; }
.league-logo-wrap { width:48px; height:48px; background:rgba(255,255,255,0.06); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; border:1px solid rgba(255,255,255,0.08); padding:4px; }
.league-logo-wrap img { width:100%; height:100%; object-fit:contain; }
.league-logo-wrap.no-logo i { font-size:22px; color:var(--lc,#e53935); }
.league-name { font-size:17px; font-weight:800; color:var(--text); letter-spacing:-0.3px; }
.league-match-count { font-size:12px; color:var(--text3); margin-top:2px; }
.league-live-badge { display:flex; align-items:center; gap:7px; background:rgba(229,57,53,0.15); border:1px solid rgba(229,57,53,0.3); color:var(--primary); font-size:11px; font-weight:800; padding:5px 12px; border-radius:20px; letter-spacing:0.5px; white-space:nowrap; }

/* Match rows */
.match-list { display:flex; flex-direction:column; }

.match-row { display:grid; grid-template-columns:70px 1fr 110px 120px; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); transition:background 0.15s; position:relative; }
.match-row:last-child { border-bottom:none; }
.match-row:hover { background:var(--bg3); }
.match-row.match-live { background:rgba(229,57,53,0.06); }
.match-row.match-live:hover { background:rgba(229,57,53,0.1); }
.match-row.match-past { opacity:0.5; }
.match-row.match-past:hover { opacity:0.75; }
/* Left accent on hover */
.match-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--lc,#e53935); opacity:0; transition:opacity 0.15s; }
.match-row:hover::before { opacity:1; }
.match-row.match-live::before { opacity:1; }

/* Time column */
.match-time { display:flex; flex-direction:column; align-items:center; gap:2px; }
.match-time-start { font-size:20px; font-weight:800; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; }
.match-time-end { font-size:11px; color:var(--text3); }
.match-time-live { display:flex; align-items:center; gap:6px; background:var(--primary); color:#fff; font-size:11px; font-weight:800; padding:4px 10px; border-radius:6px; letter-spacing:0.5px; white-space:nowrap; }

/* Match info */
.match-info { min-width:0; }
.match-name { font-size:15px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.match-row.match-past .match-name { color:var(--text2); font-weight:500; }
.match-desc { font-size:12px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Channel */
.match-channel { display:flex; align-items:center; gap:10px; }
.match-ch-logo { width:44px; height:32px; background:var(--bg4); border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.match-ch-logo img { width:100%; height:100%; object-fit:contain; padding:3px; }
.match-ch-logo i { font-size:16px; color:var(--text3); }
.match-ch-name { font-size:13px; font-weight:600; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-row:hover .match-ch-name { color:var(--text); }

/* CTA button */
.match-cta { display:flex; justify-content:flex-end; }
.match-btn { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:8px 16px; border-radius:8px; white-space:nowrap; transition:all 0.18s; }
.match-btn.live { background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(229,57,53,0.35); }
.match-btn.live:hover { background:var(--primary-dark); }
.match-btn.replay { background:var(--bg4); color:var(--text2); }
.match-btn.upcoming { background:var(--bg3); color:var(--text2); border:1px solid var(--border); }
.match-row:hover .match-btn.upcoming { border-color:#444; color:var(--text); }

/* Pulse dot */
.pulse-dot { width:8px; height:8px; background:var(--primary); border-radius:50%; animation:livepulse 1.2s ease-in-out infinite; flex-shrink:0; }
.pulse-dot.sm { width:6px; height:6px; background:#fff; }
@keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.8)} }

/* ── CHANNEL CARDS (tất cả kênh page) ── */
.channels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.channel-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all 0.22s; cursor:pointer; }
.channel-card:hover { transform:translateY(-3px); border-color:#444; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.channel-card .thumb { position:relative; aspect-ratio:16/9; background:var(--bg3); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.channel-card .thumb img { width:100%; height:100%; object-fit:contain; padding:10px; }
.channel-card .thumb .no-logo { font-size:36px; color:var(--text3); }
.channel-card .thumb .live-dot { position:absolute; top:8px; right:8px; background:var(--primary); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; }
.channel-card .thumb .play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); opacity:0; transition:opacity 0.2s; font-size:34px; color:#fff; }
.channel-card:hover .play-btn { opacity:1; }
.channel-card .info { padding:10px; }
.channel-card .info h3 { font-size:14px; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel-card .info .cat { font-size:12px; color:var(--text3); }

/* Filter tabs */
.filter-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.filter-tabs::-webkit-scrollbar { display:none; }
.ftab { background:var(--bg2); border:1px solid var(--border); color:var(--text2); padding:7px 14px; border-radius:20px; cursor:pointer; font-size:13px; white-space:nowrap; transition:all 0.18s; font-family:inherit; }
.ftab:hover { border-color:#444; color:var(--text); }
.ftab.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ── PLAYER PAGE ── */
.player-page { padding:20px 0; }
.player-layout { display:grid; grid-template-columns:1fr 300px; gap:20px; }
.player-box { background:#000; border-radius:var(--radius); overflow:hidden; }
.player-box video { width:100%; display:block; }
.player-info { margin-top:14px; }
.player-info h1 { font-size:20px; font-weight:700; margin-bottom:6px; }
.player-info .meta { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text2); margin-bottom:12px; flex-wrap:wrap; }
.now-playing { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:var(--radius); padding:12px 16px; margin-bottom:14px; }
.now-playing .label { font-size:11px; color:var(--primary); font-weight:700; text-transform:uppercase; margin-bottom:4px; }
.now-playing .program { font-size:16px; font-weight:600; }
.now-playing .time { font-size:13px; color:var(--text2); margin-top:2px; }
.sidebar-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sidebar-box .box-title { background:var(--bg3); padding:12px 16px; font-size:14px; font-weight:600; border-bottom:1px solid var(--border); }
.sidebar-box .box-body { padding:12px; }
.channel-mini { display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:10px; transition:all 0.18s; margin-bottom:8px; }
.channel-mini:hover { border-color:#444; background:var(--bg3); }
.channel-mini .mini-logo { width:44px; height:32px; background:var(--bg3); border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.channel-mini .mini-logo img { width:100%; height:100%; object-fit:contain; }
.channel-mini .mini-info h4 { font-size:13px; font-weight:600; }
.channel-mini .mini-info p { font-size:11px; color:var(--text3); }

/* ── SCHEDULE ── (trang lịch chi tiết) */
.schedule-list { display:flex; flex-direction:column; gap:2px; }
.schedule-item { display:flex; gap:12px; padding:10px 12px; border-radius:6px; transition:background 0.18s; }
.schedule-item:hover { background:var(--bg3); }
.schedule-item.current { background:rgba(229,57,53,0.08); border-left:3px solid var(--primary); }
.schedule-item .time { font-size:13px; font-weight:700; color:var(--primary); white-space:nowrap; min-width:48px; }
.schedule-item .prog { font-size:14px; }
.sched-channel-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sched-channel-head { display:flex; align-items:center; gap:12px; padding:14px 12px; background:var(--bg3); border-bottom:1px solid var(--border); text-decoration:none; color:inherit; }
.sched-channel-head img { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sched-channel-head h3 { font-size:15px; font-weight:600; }
.ch-ball-logo { width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #4caf50, #1b5e20); border:3px solid rgba(255,255,255,0.15); box-shadow:0 2px 8px rgba(0,0,0,0.4); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; }
.sched-channel-body { padding:8px; }
.schedule-channels { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.schedule-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:20px; scrollbar-width:none; }
.schedule-tabs::-webkit-scrollbar { display:none; }
.schedule-tabs button { background:var(--bg2); border:1px solid var(--border); color:var(--text2); padding:8px 16px; border-radius:20px; cursor:pointer; font-size:13px; white-space:nowrap; transition:all 0.18s; font-family:inherit; }
.schedule-tabs button.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text3); margin-bottom:16px; }
.breadcrumb a { color:var(--text2); }
.breadcrumb a:hover { color:var(--primary); }

/* ── PAGE HERO ── */
.page-hero { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); border-radius:var(--radius); padding:28px; margin-bottom:24px; }
.page-hero h1 { font-size:26px; font-weight:800; margin-bottom:6px; }
.page-hero p { color:rgba(255,255,255,0.8); }
.category-page, .schedule-page, .search-results { padding:20px 0; }
.no-results { text-align:center; padding:60px 20px; }
.no-results i { font-size:56px; color:var(--text3); margin-bottom:16px; display:block; }

/* ── EMPTY ── */
.empty-schedule { text-align:center; padding:60px 20px; background:var(--bg2); border:1px dashed var(--border); border-radius:14px; }
.empty-schedule i { font-size:52px; color:var(--text3); display:block; margin-bottom:14px; }
.empty-schedule p { color:var(--text2); margin-bottom:8px; }
.empty-schedule a { color:var(--primary); font-size:14px; }

/* ── LIVE INDICATOR ── */
.live-indicator { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--primary); }
.live-indicator::before { content:''; width:8px; height:8px; background:var(--primary); border-radius:50%; animation:livepulse 1.2s infinite; }

/* ── BADGE ── */
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 7px; border-radius:4px; }
.badge-live { background:var(--primary); color:#fff; }
.badge-cat { background:var(--bg4); color:var(--text2); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#444; }

/* ── FOOTER ── */
.site-footer { background:#111; border-top:1px solid var(--border); padding:36px 0 20px; margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-bottom:28px; }
.footer-col h4 { font-size:14px; font-weight:700; margin-bottom:12px; }
.footer-col p { font-size:13px; color:var(--text3); }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:6px; }
.footer-col ul li a { font-size:13px; color:var(--text3); transition:color 0.18s; display:flex; align-items:center; gap:6px; }
.footer-col ul li a:hover { color:var(--primary); }
.footer-bottom { border-top:1px solid var(--border); padding-top:18px; text-align:center; font-size:12px; color:var(--text3); }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .nav-toggle { display:flex; }
  .main-nav { display:none; position:fixed; top:58px; left:0; right:0; background:#111; border-bottom:1px solid var(--border); padding:12px; flex-direction:column; z-index:99; gap:4px; }
  .main-nav.open { display:flex; }
  .nav-link { padding:11px 14px; font-size:15px; }
  .player-layout { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:20px; }
  .channels-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .schedule-channels { grid-template-columns:1fr; }
  /* Match rows mobile */
  .match-row { grid-template-columns:60px 1fr 90px; padding:12px 16px; gap:10px; }
  .match-cta { display:none; }
  .match-time-start { font-size:16px; }
  .match-name { font-size:14px; }
  .league-head { padding:12px 16px; }
  .league-name { font-size:15px; }
  .date-bar { flex-wrap:wrap; gap:8px; }
  .live-clock-wrap { margin-left:auto; }
}
@media (max-width:480px) {
  .channels-grid { grid-template-columns:repeat(2,1fr); }
  .match-row { grid-template-columns:54px 1fr 80px; padding:10px 14px; gap:8px; }
  .match-ch-name { display:none; }
  .match-ch-logo { width:38px; height:28px; }
  .league-logo-wrap { width:38px; height:38px; }
  .match-time-start { font-size:15px; }
  .date-tab { padding:7px 12px; }
  .dt-label { font-size:12px; }
  .player-info h1 { font-size:17px; }
}