/* Palpung Việt Nam — header-wp.css (viết tay)
   Phần tích hợp WordPress/Elementor cho header mới. Thiết kế gốc nằm ở header.css (sinh từ src/header.css). */

/* Header dính ở đầu trang: .pv-header dùng position:sticky, nhưng các khung bọc của Elementor chỉ cao bằng header
   nên header không dính được. Ngoài trang thật (không phải trình soạn thảo), bỏ hộp của các khung đó để
   header tính sticky theo cả trang. Container chứa widget nên full width, padding 0 và chỉ chứa widget này. */
body:not(.elementor-editor-active) .pv-hdr,
body:not(.elementor-editor-active) .elementor-widget-pv-header:has(.pv-hdr),
body:not(.elementor-editor-active) .elementor-widget-pv-header > .elementor-widget-container:has(.pv-hdr),
body:not(.elementor-editor-active) .elementor-location-header:has(.pv-hdr),
body:not(.elementor-editor-active) .elementor-location-header :is(.e-con,.e-con-inner,.elementor-section-wrap,.elementor-section,.elementor-container,.elementor-column,.elementor-widget-wrap):has(.pv-hdr){display:contents}

/* Bản thiết kế dựa trên giá trị mặc định của trình duyệt (line-height: normal…). Theme thường đặt
   line-height cho body (Hello Elementor: 1.5) làm ô tìm kiếm, topbar, logo cao lệch 1–3px → đặt lại ở gốc header.
   Các rule của thiết kế đặt line-height riêng (logo, dropdown…) vẫn giữ nguyên vì cụ thể hơn. */
html body .pv-hdr :is(.pv-topbar,.pv-header,.pv-spop){line-height:normal;letter-spacing:normal;text-transform:none}
/* Theme bo góc 3px và thêm transition cho mọi <button>; thiết kế để nút tìm kiếm vuông góc và không có hiệu ứng chuyển */
html body .pv-hdr :is(.pv-search button,.pv-link,.pv-user-btn){border-radius:0}
html body .pv-hdr button{transition:none}

/* Thanh quản trị WordPress (khi đăng nhập) không che header dính và menu trượt */
html body.admin-bar .pv-hdr .pv-header{top:32px}
@media (max-width:782px){html body.admin-bar .pv-hdr .pv-header{top:46px}}
@media (max-width:600px){html body.admin-bar .pv-hdr .pv-header{top:0}}
@media (max-width:1023px){
  html body.admin-bar .pv-hdr .pv-nav{top:32px}
}
@media (max-width:782px){html body.admin-bar .pv-hdr .pv-nav{top:46px}}

/* Nút ngôn ngữ trên mobile là link thật (Polylang/WPML) thay cho <button> của bản demo */
html body .pv-hdr a.pv-lang-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* Logo dạng ảnh (widget Header → Logo). Kích thước mặc định bằng vòng tròn logo của thiết kế. */
html body .pv-hdr .pv-logo-img{display:flex;align-items:center;flex-shrink:0;line-height:0}
html body .pv-hdr .pv-logo-img img{display:block;width:52px;height:auto;max-width:none}
html body .pv-hdr .pv-navbar-logo .pv-logo-img img{width:auto;height:34px}
@media (max-width:1023px){html body .pv-hdr .pv-logo .pv-logo-img img{width:36px}}
html body .pv-hdr .pv-logo-round img{border-radius:50%;aspect-ratio:1;object-fit:cover}

/* Bỏ gạch chân 3px (.pv-link::after) dưới mục menu khi hover / đang ở trang con (yêu cầu 12/10/2026).
   Mục đang xem vẫn có chữ màu đỏ của thiết kế. */
html body .pv-hdr .pv-link::after{display:none!important}

/* Màu header — mặc định là màu website gốc (#895252 = --pv-red, đặt trong tools/palette.mjs).
   Widget Header → tab Kiểu ghi đè bằng biến CSS trên khung widget: --pv-red / --pv-red-d (màu chủ đạo),
   --pv-h-name, --pv-h-sub (chữ trên dải logo), --pv-h-menu (chữ menu), --pv-dark-text (chữ thanh trên cùng).
   Dải phía sau logo: .pv-header phủ màu chủ đạo, .pv-navbar (full width) phủ lại nền kem → chỉ phần logo + tìm kiếm có màu.
   Khi header thu gọn (cuộn trang) chỉ còn thanh menu. */
html body .pv-hdr .pv-header{background:var(--pv-red)}
html body .pv-hdr .pv-navbar{background:var(--pv-bg);border-top:0}
html body .pv-hdr .pv-mast .pv-logo,html body .pv-hdr .pv-mast .pv-logo:hover{color:var(--pv-h-name,#fbf6ee)}
html body .pv-hdr .pv-mast .pv-logo-sub{color:var(--pv-h-sub,#f3e6dd)}
html body .pv-hdr .pv-mast .pv-logo-mark{background:var(--pv-gold);color:var(--pv-red-d)}
html body .pv-hdr .pv-mast .pv-search{border-color:transparent}
html body .pv-hdr .pv-mast .pv-search button{background:var(--pv-red-d)}
html body .pv-hdr .pv-mast .pv-search button:hover{background:var(--pv-red-d);filter:brightness(.85)}
/* Màn hình hẹp (khi tắt "giao diện giống máy tính"): nút trên dải màu dùng màu chữ tên site */
@media (max-width:1023px){
  html body .pv-hdr .pv-mast .pv-burger,html body .pv-hdr .pv-mast .pv-icon-plain{color:var(--pv-h-name,#fbf6ee)}
  html body .pv-hdr .pv-mast .pv-icon-plain:hover{color:var(--pv-gold);border-color:transparent}
  html body .pv-hdr .pv-mast .pv-lang-btn{background:transparent;border-color:rgba(251,246,238,.55);color:var(--pv-h-name,#fbf6ee)}
  html body .pv-hdr .pv-mast .pv-lang-btn:hover{border-color:var(--pv-gold);color:var(--pv-gold)}
}

/* Chữ menu: màu thường theo --pv-h-menu; đang xem / rê chuột / đang mở theo màu chủ đạo (rule sau cụ thể hơn rule trước) */
html body .pv-hdr .pv-menu > .pv-item > .pv-link{color:var(--pv-h-menu,var(--pv-ink))}
html body .pv-hdr .pv-link .pv-chev{color:var(--pv-h-menu,var(--pv-mute))}
html body .pv-hdr .pv-menu > .pv-item > .pv-link:hover,html body .pv-hdr .pv-menu > .pv-item.open > .pv-link,html body .pv-hdr .pv-menu > .pv-item.pv-active > .pv-link{color:var(--pv-h-menu-active,var(--pv-red))}
html body .pv-hdr .pv-menu > .pv-item.open > .pv-link .pv-chev{color:var(--pv-h-menu-active,var(--pv-red))}
/* Logo nhỏ và icon tìm kiếm trên thanh menu (header thu gọn) cùng màu với chữ menu; không đổi màu khi rê chuột lên logo */
html body .pv-hdr .pv-header.is-compact .pv-navbar-logo,html body .pv-hdr .pv-header.is-compact .pv-navbar-logo:hover{color:var(--pv-h-menu,var(--pv-ink))}
html body .pv-hdr .pv-navbar .pv-navbar-search{color:var(--pv-h-menu,var(--pv-ink))}
html body .pv-hdr .pv-navbar .pv-navbar-search:hover{color:var(--pv-h-menu-active,var(--pv-red))}
/* Nút Cúng dường (thanh menu và menu trượt): màu riêng nếu đặt, không thì màu chủ đạo; rê chuột theo màu chủ đạo đậm (rule thiết kế) */
html body .pv-hdr .pv-donate,html body .pv-hdr .pv-donate-m{background:var(--pv-h-donate-bg,var(--pv-red));color:var(--pv-h-donate-color,var(--pv-paper))}

/* Ẩn tên site cạnh logo trên điện thoại / máy tính bảng (widget → Logo → "Ẩn tên site trên điện thoại").
   max-device-width = bề ngang thật của màn hình, không bị thẻ viewport 1280px ("giao diện giống máy tính") ảnh hưởng;
   max-width cho giao diện mobile thường và khung xem trước Mobile trong Elementor. Ẩn cả tên nhỏ khi header thu gọn. */
@media (max-device-width:1023px),(max-width:1023px){
  html body .pv-hdr.pv-hide-name-m .pv-mast .pv-logo-text,html body .pv-hdr.pv-hide-name-m .pv-navbar-name{display:none}
}

/* In bài: bỏ header */
@media print{html body .pv-hdr .pv-topbar,html body .pv-hdr .pv-header,html body .pv-hdr .pv-overlay,html body .pv-hdr .pv-spop{display:none!important}}