/**
 * Banner Top
 */
.banner-container video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

/* Private100: video (1920x720) có sẵn dải trắng 56px (~7.78%) ở đáy. Dải này co theo tỉ lệ
   khi video thu nhỏ nên trên mobile khoảng cách tới text bị hẹp lại. Xử lý:
   - Khóa container theo tỉ lệ phần NỘI DUNG (1920/664, tức đã trừ 56px trắng).
   - Cho <video> cao 720/664 lần container và tràn xuống dưới, .banner-container overflow:hidden
     (đã có) cắt đúng dải trắng ở mọi kích thước.
   - Đặt khoảng cách video→text cố định 40px bằng margin (không co theo video).
   Selector .banner-private-100 .banner-container đặc hiệu hơn '.banner-container' nên thắng
   cả rule aspect-ratio trong media query mobile. */
.banner-private-100 .banner-container,
.banner-vntax-200 .banner-container{
    aspect-ratio: 1920 / 664;
}
.banner-private-100 .banner-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% * 720 / 664);
    object-fit: fill;
}
.banner-private-100, .banner-vntax-200 {
    margin-bottom: 40px;
}

.banner-cafeflist {
    width: 100%;
}

/* Container: full width, cao co giãn theo tỉ lệ 16:9 nhưng KHÔNG vượt quá 941px. */
.banner-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4096 / 1536;
    max-height: 720px;
    overflow: hidden;
}

/* Ảnh nền để thẳng làm background của container (cover) — không cần thẻ <img>.
   Scoped trong .banner-cafeflist để không đụng các banner khác (vd banner video). */
.banner-cafeflist .banner-container {
    /*background: url("https://cafef-data.mediacdn.vn/private100/background.png") center / cover no-repeat;*/
}

/* Ảnh nội dung: overlay giữ nguyên tỉ lệ, cao tối đa 941px, căn giữa (không kéo giãn). */
.banner-container .banner-content {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: 720px;
    z-index: 2;
    pointer-events: none;
    margin: 0 auto;
    object-fit: contain;
}

.banner-text-overlay {
    position: absolute;
    top: 140px;

    z-index: 2;
    padding-left: 255px;
}
.banner-bottom-overlay {
    height: 193px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(180deg, rgba(9, 6, 21, 0.00) 0%, #090615 100%);
    display: block;
    width: 100%;
}
.banner-description {
    position: absolute;
    bottom: 58px;
    left: 255px;
    z-index: 2;
    color: #FFFAF4;
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    opacity: 0.8;
}

/* Dòng chú thích ngay dưới banner (do BannerTop.razor render).
   Bản Banner.razor cũ tự mang <style> cho .note-header nên mọi trang dùng CafefListLayout
   đều có style; BannerTop.razor (V2) không có <style> mà dựa vào CSS ngoài, nên những trang
   không nạp cl_margin.css / private100.css / vntax200.css (vd. top/ceo.chn — chỉ có topceo.css)
   bị mất hoàn toàn định dạng. Đặt style mặc định tại đây — file luôn đi kèm BannerTop trong
   CafefListLayout — dùng đúng giá trị của v2/private100.css để đồng bộ giữa các trang.
   banner.css nạp ở layout (TRƯỚC @Body) nên CSS riêng của từng trang vẫn ghi đè được:
   các trang đã có style .note-header giữ nguyên giao diện hiện tại. */
.note-header {
    padding: 0px 0px 40px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* PC hiện bản có <br/>, mobile hiện bản không <br/> (xuống dòng tự nhiên).
   Ghép 2 class để thắng '.note-header{display:flex}' trong cl_margin/home-live (nạp SAU). */
.note-header.note-header-mobile {
    display: none;
}

.note-header div {
    width: 100%;
    max-width: 1170px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px;
    letter-spacing: 0.86px;
    text-transform: uppercase;
    color: #5E566A;
    opacity: 0.6;
}

@media (max-width: 1200px) {
    .banner-text-overlay, .banner-description {
        left: 20px;
    }
}

/* Mobile: ảnh nguồn banner là 16:9 (background.png 8000x4500, content.png 1672x941)
   nhưng .banner-container khóa 8/3 — ảnh cao hơn khung 1.5 lần nên bị overflow:hidden
   cắt mất ~33% (ở 375px: khung 141px, ảnh 211px). Khớp tỉ lệ khung với ảnh để hiện đủ.
   Desktop giữ nguyên 8/3 (đã QA duyệt) — rule này không áp dụng trên >767px. */
@media (max-width: 767px) {
    .note-header.note-header-pc {
        display: none;
    }

    .note-header.note-header-mobile {
        display: flex;
        padding: 0px 0px 20px 0px;
        font-size: 12px;
    }

    .banner-cafeflist {
        margin-bottom: 20px;
    }
    
    /* .note-header div bị khóa width:1170px trong cl_margin.css (bản trên CDN, nạp SAU
       file này) nên trên mobile nó tràn ngang ~795px, kéo cả trang rộng ra và phải kéo
       ngang mới đọc hết chữ. Lỗi có sẵn từ trước, không phải do bản redesign.
       Dùng selector đặc hiệu hơn (.banner-private-100 + .note-header) để thắng cl_margin
       bất kể thứ tự nạp, và chỉ giới hạn ở note-header đi kèm banner V2. */
    .banner-private-100 + .note-header div {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .banner-private-100, .banner-vntax-200 {
        margin-bottom: 20px;
    }
}