/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #111827; /* gray-900 */
  background: #f9fafb; /* gray-50 */
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px #2563eb, 0 0 0 4px white; } /* blue-600 ring */

/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.site-header { background: #fff; border-bottom: 1px solid #e5e7eb; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { font-weight: 700; font-size: 30px; letter-spacing: -0.01em; font-family: 'Pacifico', cursive; color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-image: linear-gradient(to right, #ef4444, #3b82f6);}
.nav-link { padding: 8px 12px; border-radius: 8px; color: #374151; } /* gray-700 */
.nav-link:hover, .nav-link:focus-visible { background: #f3f4f6; } /* gray-100 */
.search { display:flex; gap:8px; align-items:center; }
.search-input { padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; min-width: 220px; }
.btn { padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; cursor:pointer; }
.btn:hover, .btn:focus-visible { background:#f3f4f6; }

.site-main { padding: 24px 0; }
.site-footer { background: #fff; border-top: 1px solid #e5e7eb; padding: 24px 0; color: #4b5563; font-size: 14px; } /* gray-600 */

/* Sections */
.section-head { margin-bottom: 16px; }
.section-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.section-desc { margin: 0; color: #6b7280; font-size: 14px; } /* gray-500 */

/* Playlist detail (YouTube-like) */
.pl-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1024px) {
  .pl-layout { grid-template-columns: 360px 1fr; }
}
.pl-aside { display: grid; gap: 10px; }
.pl-cover-wrap { border-radius: 12px; overflow: hidden; background:#000; }
.pl-cover { display:block; width:100%; height:auto; }
.pl-meta { display:flex; flex-direction:column; gap:6px; }
.pl-title { margin:0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.pl-desc { margin:0; color:#6b7280; font-size:14px; }
.pl-count { margin:0; color:#4b5563; font-size:13px; }
.pl-episodes { display:flex; flex-direction:column; gap:8px; }
.ep-row {
  display:flex; gap:10px; align-items: center;
  padding:8px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
.ep-row:hover, .ep-row:focus-visible { background:#f9fafb; }
.ep-thumb { position: relative; width: 168px; flex: 0 0 168px; border-radius: 8px; overflow: hidden; background:#000; }
.ep-thumb img { display:block; width:100%; height:94px; object-fit: cover; }
.ep-duration {
  position:absolute; right:6px; bottom:6px; padding:2px 6px; border-radius:6px;
  background: rgba(0,0,0,0.75); color:#fff; font-size:12px;
}
.ep-body { flex:1 1 auto; min-width:0; }
.ep-title { margin:0; font-size:15px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width: 640px) {
  .ep-thumb { width: 140px; flex-basis: 140px; }
  .ep-thumb img { height: 80px; }
}

/* Upload controls */
.row input[type="file"] { flex: 1 1 220px; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.card {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.card:hover, .card:focus-visible { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  overflow: hidden;
}
.thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}
.card:hover .thumb img { transform: scale(1.04); }
.duration {
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,0.75);
  border-radius: 6px;
}
.card-body { padding: 12px; }
.card-title {
  font-size: 14px; font-weight: 700; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Watch */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px; border: 2px solid #e5e7eb;
  font-size: 16px; font-weight: 700;
}
.back-link:hover, .back-link:focus-visible { background: #f9fafb; }
.watch-article { margin-top: 16px; }
.watch-head { margin-bottom: 12px; }
.watch-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.watch-desc { margin: 0; color: #6b7280; font-size: 14px; }
.player-wrap { width: 100%; }
.player-16x9 { position: relative; width: 100%; background: #000; border-radius: 12px; overflow: hidden; }
.player-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* TikTok */
.tiktok-wrap { width: 100%; }
.tiktok-wrap .tiktok-embed { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .tiktok-wrap .tiktok-embed { min-width: 0 !important; width: 100% !important; }
}

/* Player overlays (che phần info của YouTube) */
.player-overlays { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.player-ov-top-left {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 64px;
  background: rgba(0,0,0,0.35);
  border-bottom-right-radius: 8px;
  pointer-events: auto; cursor: default;
}
/* Responsive for small devices */
@media (max-width: 640px) {
  .container { padding: 0 12px; }
  .header-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .brand { font-size: 24px; }
  .search { width: 100%; }
  .search-input { min-width: 0; width: 100%; }
  .btn, .nav-link { min-height: 40px; }
  .grid { gap: 12px; }
  .section-title { font-size: 20px; }
  .site-footer { text-align: center; }
}