/* ==========================================
   PORTFOLIO OVERRIDE CSS
   Mang phong cách tối giản, điện ảnh và cá nhân
========================================== */

/* 1. HERO BANNER & PROFILE CĂN GIỮA */
.cover-image {
    height: 240px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
.channel-info-container {
    margin-top: -80px !important;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.channel-avatar-wrapper {
    margin-right: 0 !important;
    margin-bottom: 16px !important;
    position: relative;
    z-index: 10;
}
.channel-avatar {
    width: 150px !important;
    height: 150px !important;
    border: 6px solid var(--color-bg-main) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
.channel-details {
    margin-top: 0 !important;
}
.channel-title-row {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
}
.channel-name {
    font-size: 2.2rem !important;
    font-family: 'Playfair Display', serif !important;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.yt-channel-name {
    font-size: 1.8rem !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.2) !important;
    font-weight: 900 !important;
}
.btn-edit-channel {
    margin-top: 16px !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,0.05) !important;
}
.channel-bio {
    max-width: 700px !important;
    margin: 12px auto 0 !important;
    font-size: 1rem !important;
}
.channel-stats {
    justify-content: center !important;
    margin-top: 16px !important;
    width: 100%;
}

/* 2. HEADER GỌN GÀNG (LOẠI BỎ SEARCH) */
.search-container {
    display: none !important;
}
.topbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.topbar-left {
    display: none !important; /* Mở rộng ko gian cho icon tải video */
}

/* 3. BORDERLESS VIDEO GRID */
.video-card {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.video-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: none !important;
}
.video-thumbnail {
    border-radius: 16px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important;
}
.video-card:hover .video-thumbnail img {
    transform: scale(1.03) !important;
}
.video-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-top: -4px !important;
}

/* 4. TỐI ƯU SIDEBAR FLOATING */
.sidebar {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 220px !important;
}
.nav-item {
    border-radius: 12px;
    margin-bottom: 6px;
}
.nav-item.active {
    background-color: rgba(255,255,255,0.05) !important;
    border-left: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.sidebar-branding {
    padding-left: 12px;
}
.logo-text {
    border-bottom: none !important;
    font-size: 1.3rem !important;
    opacity: 0.9;
    white-space: nowrap !important;
}