/* =========================================================
   ObeGames V29 - Header chi tiết ổn định trên Mobile
   ========================================================= */

/*
 * Không thay đổi display của #mainmenu hoặc các thẻ <a>.
 * Theme Designesia sẽ tự ẩn/hiện menu bằng JavaScript.
 * Việc ép display:flex ở V28 khiến mục "Trang Chủ" rò ra ngoài Header.
 */

.public-detail-page header.transparent #logo a {
    display: inline-block;
}

.public-detail-page header.transparent .logo-main {
    width: auto !important;
    height: 100px !important;
    max-width: 100%;
}

.public-detail-page header.transparent .logo-mobile {
    width: auto !important;
    height: 70px !important;
    max-width: 100%;
}

.public-detail-page header.transparent .menu_side_area {
    display: flex;
    align-items: center;
}

/*
 * Desktop giữ nguyên cơ chế Header gốc của giao diện.
 */
@media (min-width: 992px) {
    .public-detail-page header.transparent .logo-main {
        display: block !important;
    }
}

/*
 * Tablet và Mobile:
 * - Không ép chiều cao .de-flex.
 * - Không ép display cho menu.
 * - Chỉ đồng bộ logo và cụm nút bên phải.
 */
@media (max-width: 991.98px) {
    .public-detail-page header.transparent {
        background: #030617;
    }

    .public-detail-page header.transparent .logo-main {
        display: none !important;
    }

    .public-detail-page header.transparent .logo-mobile {
        display: block !important;
        height: 70px !important;
    }

    .public-detail-page header.transparent .menu_side_area {
        gap: 12px;
    }

    .public-detail-page header.transparent #menu-btn {
        margin: 0 !important;
    }
}

/*
 * Trang chi tiết bài viết:
 * Header trên mobile nằm trong luồng trang, vì vậy chỉ cần khoảng cách vừa phải.
 * Không dùng 178px/182px như bản trước.
 */
@media (max-width: 991.98px) {
    .public-detail-page .article-hero {
        padding-top: 70px !important;
    }

    .public-detail-page #og-promotion-detail {
        padding-top: 70px !important;
    }

    .public-detail-page #og-promo-not-found {
        padding-top: 70px !important;
    }
}

@media (max-width: 767.98px) {
    .public-detail-page .article-hero {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .public-detail-page #og-promotion-detail {
        padding-top: 52px !important;
        padding-bottom: 65px !important;
    }

    .public-detail-page #og-promo-not-found {
        min-height: 520px !important;
        padding-top: 55px !important;
        padding-bottom: 65px !important;
    }

    .public-detail-page #og-promotion-detail .pd-breadcrumbs {
        margin-bottom: 16px;
    }
}

@media (max-width: 420px) {
    .public-detail-page header.transparent .container {
        padding-right: 18px;
        padding-left: 18px;
    }

    .public-detail-page #og-promotion-detail {
        padding-top: 44px !important;
    }

    .public-detail-page .article-hero {
        padding-top: 48px !important;
    }
}


/* =========================================================
   ObeGames V30 - Fix Header che nội dung trang chi tiết Mobile
   ========================================================= */

/*
 * V29 đã sửa menu mobile, nhưng khoảng cách đầu nội dung còn quá nhỏ.
 * V30 tăng lại padding-top theo đúng chiều cao thực tế:
 * - Thanh mã giảm giá: khoảng 48px
 * - Header mobile: khoảng 112px
 * - Thêm khoảng đệm an toàn nhỏ để nội dung không bị che.
 */

@media (max-width: 991.98px) {
    body.public-detail-page.has-active-header-promotion #og-promotion-detail {
        padding-top: 128px !important;
    }

    body.public-detail-page.no-active-header-promotion #og-promotion-detail {
        padding-top: 98px !important;
    }

    body.public-detail-page.has-active-header-promotion .article-hero {
        padding-top: 132px !important;
    }

    body.public-detail-page.no-active-header-promotion .article-hero {
        padding-top: 102px !important;
    }

    body.public-detail-page.has-active-header-promotion #og-promo-not-found {
        padding-top: 128px !important;
    }

    body.public-detail-page.no-active-header-promotion #og-promo-not-found {
        padding-top: 98px !important;
    }
}

/*
 * Điện thoại phổ biến 360-430px:
 * tăng thêm chút ít để mép trên Hero/Card không bị Header chồng lên.
 */
@media (max-width: 767.98px) {
    body.public-detail-page.has-active-header-promotion #og-promotion-detail {
        padding-top: 136px !important;
        padding-bottom: 65px !important;
    }

    body.public-detail-page.no-active-header-promotion #og-promotion-detail {
        padding-top: 108px !important;
        padding-bottom: 65px !important;
    }

    body.public-detail-page.has-active-header-promotion .article-hero {
        padding-top: 138px !important;
        padding-bottom: 56px !important;
    }

    body.public-detail-page.no-active-header-promotion .article-hero {
        padding-top: 110px !important;
        padding-bottom: 56px !important;
    }

    body.public-detail-page.has-active-header-promotion #og-promo-not-found {
        padding-top: 136px !important;
        padding-bottom: 65px !important;
    }

    body.public-detail-page.no-active-header-promotion #og-promo-not-found {
        padding-top: 108px !important;
        padding-bottom: 65px !important;
    }

    body.public-detail-page #og-promotion-detail .pd-breadcrumbs {
        margin-bottom: 16px !important;
    }
}

/*
 * Màn hình rất nhỏ: giữ khoảng cách đủ thoáng nhưng không tạo khoảng trống quá lớn.
 */
@media (max-width: 420px) {
    body.public-detail-page.has-active-header-promotion #og-promotion-detail {
        padding-top: 132px !important;
    }

    body.public-detail-page.no-active-header-promotion #og-promotion-detail {
        padding-top: 104px !important;
    }

    body.public-detail-page.has-active-header-promotion .article-hero {
        padding-top: 134px !important;
    }

    body.public-detail-page.no-active-header-promotion .article-hero {
        padding-top: 106px !important;
    }
}


/* =========================================================
   ObeGames V31 - Fix khung khuyến mãi che Breadcrumb mobile
   ========================================================= */

/*
 * V30 đã sửa Header che nội dung, nhưng trên mobile:
 * - Breadcrumb vẫn quá sát với khung chi tiết
 * - Khung khuyến mãi nhìn như đang đè lên đường dẫn
 * V31 tách rõ 2 phần này bằng khoảng cách và lớp hiển thị riêng.
 */

@media (max-width: 991.98px) {
    body.public-detail-page #og-promotion-detail .pd-container {
        position: relative;
        z-index: 1;
    }

    body.public-detail-page #og-promotion-detail .pd-breadcrumbs {
        position: relative;
        z-index: 3;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 0 4px;
        margin-bottom: 18px !important;
        line-height: 1.6;
    }

    body.public-detail-page #og-promotion-detail .pd-hero-card {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 767.98px) {
    body.public-detail-page.has-active-header-promotion #og-promotion-detail {
        padding-top: 146px !important;
    }

    body.public-detail-page.no-active-header-promotion #og-promotion-detail {
        padding-top: 116px !important;
    }

    body.public-detail-page #og-promotion-detail .pd-breadcrumbs {
        padding: 0 6px;
        margin-bottom: 22px !important;
        font-size: 13px;
    }

    body.public-detail-page #og-promotion-detail .pd-hero-card {
        margin-top: 0 !important;
    }
}

@media (max-width: 420px) {
    body.public-detail-page.has-active-header-promotion #og-promotion-detail {
        padding-top: 142px !important;
    }

    body.public-detail-page.no-active-header-promotion #og-promotion-detail {
        padding-top: 112px !important;
    }

    body.public-detail-page #og-promotion-detail .pd-breadcrumbs {
        gap: 6px;
        margin-bottom: 20px !important;
        font-size: 12.5px;
    }
}