* { box-sizing: border-box; margin: 0; padding: 0; font-family: Roboto, Arial, sans-serif; }
body { background-color: #f0f0f0; overflow: hidden; -webkit-tap-highlight-color: transparent; }

/* HEADER */
.header { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; height: 56px; background: #fff; position: fixed; width: 100%; top: 0; z-index: 100; }
.header-left, .header-center, .header-right { display: flex; align-items: center; }
.menu-icon { margin-right: 16px; cursor: pointer; color: #030303; }
.logo { display: flex; align-items: center; cursor: pointer; }
.logo-text { font-family: "YouTube Sans", Roboto, sans-serif; font-size: 20px; font-weight: 500; margin-left: 4px; letter-spacing: -1px; }

.header-center { flex: 1; justify-content: center; max-width: 600px; margin: 0 40px; }
.search-bar { display: flex; width: 100%; border: 1px solid #ccc; border-radius: 40px; overflow: hidden; background: #fff; margin-right: 10px; }
.search-bar input { flex: 1; border: none; padding: 2px 16px; font-size: 16px; outline: none; }
.search-bar button { width: 64px; background: #f8f8f8; border: none; border-left: 1px solid #ccc; cursor: pointer; }
.mic-icon { background: #f9f9f9; border-radius: 50%; padding: 8px; cursor: pointer; }

.header-right .material-icons { margin-right: 20px; cursor: pointer; color: #030303; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }

/* MAIN LAYOUT */
.main-layout { display: flex; margin-top: 56px; height: calc(100vh - 56px); }

/* SIDEBAR (Dành cho iPad) */
.sidebar { width: 240px; background: #fff; height: 100%; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar-item { display: flex; align-items: center; padding: 10px 24px; cursor: pointer; }
.sidebar-item:hover { background: #f2f2f2; }
.sidebar-item.active { background: #e5e5e5; font-weight: 500; }
.sidebar-item .material-icons { margin-right: 24px; color: #030303; }
.sidebar-item span { font-size: 14px; color: #030303; }
.sidebar hr { border: 0; border-top: 1px solid #e5e5e5; margin: 12px 0; }

/* CONTENT & CATEGORIES */
.content { flex: 1; background: #f9f9f9; overflow-y: auto; display: flex; flex-direction: column; }
.categories { display: flex; padding: 12px 24px; background: #fff; border-bottom: 1px solid #e5e5e5; overflow-x: auto; white-space: nowrap; border-top: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 90;}
.categories::-webkit-scrollbar { display: none; }
.category { padding: 6px 12px; background: #f2f2f2; border: 1px solid #ccc; border-radius: 16px; margin-right: 12px; font-size: 14px; cursor: pointer; }
.category.active { background: #0f0f0f; color: #fff; border-color: #0f0f0f; }

/* VIDEO GRID */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 24px; }
.video-card { cursor: pointer; }
.thumbnail { width: 100%; aspect-ratio: 16/9; border-radius: 12px; object-fit: cover; background: #ddd; }
.video-info { display: flex; margin-top: 12px; }
.channel-avatar { width: 36px; height: 36px; border-radius: 50%; margin-right: 12px; }
.video-text { display: flex; flex-direction: column; }
.video-title { font-size: 16px; font-weight: 500; color: #0f0f0f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.channel-name, .video-meta { font-size: 14px; color: #606060; }

/* PLAYER MODAL */
#player-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; }
#player-modal.hidden { display: none; }
.player-header { padding: 10px 20px; text-align: left; background: #000; }
#close-btn { background: transparent; color: #fff; border: none; font-size: 16px; font-weight: 500; cursor: pointer; display: flex; align-items: center; }
#close-btn .material-icons { margin-right: 8px; }
.iframe-container { flex: 1; width: 100%; height: 100%; }
.iframe-container iframe { width: 100%; height: 100%; border: none; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* RESPONSIVE CHO IPAD DỌC / ĐIỆN THOẠI */
@media (max-width: 768px) {
    .sidebar { width: 72px; }
    .sidebar-item span { display: none; }
    .sidebar-item { justify-content: center; padding: 16px 0; }
    .sidebar-item .material-icons { margin-right: 0; }
    .header-center { display: none; } /* Ẩn thanh tìm kiếm trên màn nhỏ */
}