/* =========================================================
   DIETMOIDANANG.VN
   HEADER.CSS - FINAL
   ---------------------------------------------------------
   - Header full nền
   - Nội dung header rộng 1180px
   - Logo sát trái
   - Menu sát phải
   - Menu có nhiều không gian hơn
   - Responsive tablet/mobile
   ========================================================= */


/* =========================================================
   1. HEADER FULL WIDTH
   ========================================================= */

header {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   2. CONTAINER CHÍNH CỦA HEADER
   ---------------------------------------------------------
   Chiều rộng bằng .home-container = 1180px
   ========================================================= */

@media (min-width: 992px) {

    header .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {
        display: flex;

        align-items: center;
        justify-content: space-between;

        width: min(1180px, calc(100% - 40px));
        max-width: 1180px;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        gap: 25px;

        box-sizing: border-box;
    }


    /* =====================================================
       3. LOGO - SÁT BÊN TRÁI
       ===================================================== */

    header .wp-block-site-logo {
        flex: 0 0 auto;

        width: auto;
        max-width: 165px;

        margin: 0 !important;
        padding: 0 !important;
    }


    header .wp-block-site-logo a {
        display: block;

        margin: 0;
        padding: 0;
    }


    header .wp-block-site-logo img {
        display: block;

        width: auto;
        max-width: 165px;

        height: auto;

        margin: 0;
        padding: 0;

        object-fit: contain;
    }


    /* =====================================================
       4. NAVIGATION - CHIẾM PHẦN CÒN LẠI
       ===================================================== */

    header .wp-block-navigation {
        flex: 1 1 auto;

        width: auto;
        max-width: none;

        margin-left: auto !important;
        margin-right: 0 !important;

        padding: 0 !important;

        justify-content: flex-end;
    }


    header
    .wp-block-navigation__responsive-container-content {
        display: flex;

        justify-content: flex-end;

        width: 100%;
    }


    /* =====================================================
       5. MENU SÁT BÊN PHẢI
       ===================================================== */

    header .wp-block-navigation__container {
        display: flex;

        align-items: center;
        justify-content: flex-end;

        flex-wrap: nowrap;

        width: auto;

        margin-left: auto !important;
        margin-right: 0 !important;

        padding: 0;

        gap: 20px;
    }


    /* Menu item */

    header .wp-block-navigation-item {
        flex: 0 0 auto;

        margin: 0;

        white-space: nowrap;
    }


    header .wp-block-navigation-item__content {
        white-space: nowrap;
    }

}


/* =========================================================
   6. DESKTOP 992 - 1200PX
   ========================================================= */

@media (min-width: 992px) and (max-width: 1200px) {

    header .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {
        width: calc(100% - 36px);

        gap: 18px;
    }


    header .wp-block-site-logo,
    header .wp-block-site-logo img {
        max-width: 150px;
    }


    header .wp-block-navigation__container {
        gap: 14px;
    }


    header .wp-block-navigation-item__content {
        font-size: 14px;
    }

}


/* =========================================================
   7. MÀN HÌNH RỘNG
   ========================================================= */

@media (min-width: 1201px) {

    header .wp-block-site-logo,
    header .wp-block-site-logo img {
        max-width: 165px;
    }


    header .wp-block-navigation__container {
        gap: 21px;
    }

}


/* =========================================================
   8. TABLET / MOBILE
   ---------------------------------------------------------
   Không ép cấu trúc desktop.
   Giữ menu hamburger của WordPress.
   ========================================================= */

@media (max-width: 991px) {

    header .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {
        width: calc(100% - 30px);

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box;
    }


    header .wp-block-site-logo {
        max-width: 155px;

        margin-left: 0 !important;
    }


    header .wp-block-site-logo img {
        width: auto;
        max-width: 155px;

        height: auto;
    }


    header .wp-block-navigation {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

}


/* =========================================================
   9. MOBILE NHỎ
   ========================================================= */

@media (max-width: 480px) {

    header .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {
        width: calc(100% - 24px);
    }


    header .wp-block-site-logo,
    header .wp-block-site-logo img {
        max-width: 140px;
    }

}


/* =========================================================
   10. BỎ PADDING THỪA NẾU HOSTINGER THÊM GLOBAL PADDING
   ========================================================= */

@media (min-width: 992px) {

    header .has-global-padding:has(.wp-block-site-logo):has(.wp-block-navigation) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* =========================================================
   FIX HEADER ALIGNMENT + STICKY BACKGROUND
   DIETMOIDANANG.VN
   ---------------------------------------------------------
   - Header nền full màn hình
   - Toàn bộ header sticky khi cuộn
   - Không còn menu sticky riêng, nền bị trôi
   - Logo / menu thẳng hàng với container 1180px bên dưới
   ========================================================= */


/* =========================================================
   1. CHÍNH HEADER LÀ THÀNH PHẦN STICKY
   ========================================================= */

header.site-header.wp-block-template-part {
    position: sticky !important;

    top: 0;

    z-index: 9999;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

    box-sizing: border-box;
}


/* =========================================================
   2. KHÔNG CHO CÁC GROUP CON STICKY RIÊNG
   ---------------------------------------------------------
   Theme Hostinger có thể đặt sticky vào Group bên trong.
   Bây giờ sticky đã chuyển lên toàn bộ site-header.
   ========================================================= */

header.site-header
.is-position-sticky {
    position: static !important;

    top: auto !important;
}


/* Trường hợp theme ghi inline style position:sticky */

header.site-header
.wp-block-group[style*="position:sticky"],
header.site-header
.wp-block-group[style*="position: sticky"] {
    position: static !important;

    top: auto !important;
}


/* =========================================================
   3. WRAPPER NGOÀI HEADER FULL WIDTH
   ---------------------------------------------------------
   Xóa padding 10-20px đang làm Header lệch so với Hero.
   ========================================================= */

header.site-header
> .wp-block-group {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box;
}


/* Gutenberg global padding */

header.site-header
.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Wrapper constrained của Gutenberg */

header.site-header
.is-layout-constrained {
    max-width: none;
}


/* =========================================================
   4. HÀNG CHỨA LOGO + MENU
   ---------------------------------------------------------
   Chính xác cùng kích thước với .home-container
   ========================================================= */

@media (min-width: 992px) {

    header.site-header
    .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: min(1180px, calc(100% - 40px)) !important;
        max-width: 1180px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        gap: 24px;

        box-sizing: border-box;
    }


    /* =====================================================
       5. LOGO BÁM ĐÚNG MÉP TRÁI CONTAINER
       ===================================================== */

    header.site-header
    .wp-block-site-logo {
        flex: 0 0 auto;

        width: auto !important;
        max-width: 165px;

        margin: 0 !important;
        padding: 0 !important;
    }


    header.site-header
    .wp-block-site-logo a {
        display: block;

        margin: 0 !important;
        padding: 0 !important;
    }


    header.site-header
    .wp-block-site-logo img {
        display: block;

        width: auto;
        max-width: 165px;

        height: auto;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain;
    }


    /* =====================================================
       6. NAVIGATION CHIẾM TOÀN BỘ PHẦN CÒN LẠI
       ===================================================== */

    header.site-header
    .wp-block-navigation {
        flex: 1 1 auto;

        width: auto !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: 0 !important;

        padding: 0 !important;

        justify-content: flex-end !important;
    }


    header.site-header
    .wp-block-navigation__responsive-container-content {
        display: flex;

        align-items: center;
        justify-content: flex-end;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    /* =====================================================
       7. MENU BÁM SÁT MÉP PHẢI CONTAINER
       ===================================================== */

    header.site-header
    .wp-block-navigation__container {
        display: flex;

        align-items: center;
        justify-content: flex-end;

        flex-wrap: nowrap;

        width: auto;

        margin-left: auto !important;
        margin-right: 0 !important;

        padding: 0 !important;

        gap: 20px;
    }


    header.site-header
    .wp-block-navigation-item {
        flex: 0 0 auto;

        margin: 0;

        white-space: nowrap;
    }


    header.site-header
    .wp-block-navigation-item__content {
        white-space: nowrap;
    }

}


/* =========================================================
   8. DESKTOP NHỎ 992 - 1200
   ========================================================= */

@media (min-width: 992px) and (max-width: 1200px) {

    header.site-header
    .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {

        width: calc(100% - 36px) !important;

        gap: 18px;
    }


    header.site-header
    .wp-block-site-logo,
    header.site-header
    .wp-block-site-logo img {

        max-width: 150px;
    }


    header.site-header
    .wp-block-navigation__container {

        gap: 14px;
    }


    header.site-header
    .wp-block-navigation-item__content {

        font-size: 14px;
    }

}


/* =========================================================
   9. TABLET + MOBILE
   ========================================================= */

@media (max-width: 991px) {

    header.site-header
    .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {

        display: flex;

        align-items: center;
        justify-content: space-between;

        width: calc(100% - 30px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box;
    }


    header.site-header
    .wp-block-site-logo {

        max-width: 155px;

        margin: 0 !important;
    }


    header.site-header
    .wp-block-site-logo img {

        width: auto;

        max-width: 155px;

        height: auto;
    }


    header.site-header
    .wp-block-navigation {

        margin-left: auto !important;
        margin-right: 0 !important;
    }

}


/* =========================================================
   10. MOBILE NHỎ
   ========================================================= */

@media (max-width: 480px) {

    header.site-header
    .wp-block-group:has(.wp-block-site-logo):has(.wp-block-navigation) {

        width: calc(100% - 24px) !important;
    }


    header.site-header
    .wp-block-site-logo,
    header.site-header
    .wp-block-site-logo img {

        max-width: 140px;
    }

}


/* =========================================================
   11. WORDPRESS ADMIN BAR
   ---------------------------------------------------------
   Khi anh đang đăng nhập WordPress, admin bar nằm phía trên.
   Header sticky cần nằm dưới admin bar.
   ========================================================= */

body.admin-bar
header.site-header.wp-block-template-part {

    top: 32px;
}


@media screen and (max-width: 782px) {

    body.admin-bar
    header.site-header.wp-block-template-part {

        top: 46px;
    }

}