/* 
 * Logic: 
 * Khi header ở đầu thì màu trong suốt.
 * Khi scroled thì màu nền sẽ đổi sang màu base 2
 */

header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    background-color: transparent !important;
}

header.wp-block-template-part .wp-block-group {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

header.wp-block-template-part.is-scrolled {
    position: fixed;
    background-color: var(--wp--preset--color--base-2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

header.wp-block-template-part.is-scrolled .wp-block-group {
    background-color: var(--wp--preset--color--base-2) !important;
}