/* Header 2026 cho Header Builder của Flatsome. Chỉ chạy khi body có class xch-hd (Tùy biến > Trang chủ XCH 2026).
   Bố cục (phần tử nào ở đâu, chiều cao, sticky) chỉnh trong Tùy biến > Header; file này lo màu, font và kiểu ô. */
body.xch-hd{
	--xh-bg:#F2F6FB;--xh-surface:#FFFFFF;--xh-ink:#0B2247;--xh-muted:#4E5E78;--xh-line:#D3DDEB;
	--xh-brand:#10509F;--xh-brand-ink:#FFFFFF;--xh-accent:#F36F25;--xh-accent-text:#BF4A08;--xh-accent-ink:#0B2247;
	--xh-band:#0A3573;--xh-band-ink:#FFFFFF;--xh-band-muted:#B6C6DF;
	--xh-display:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
	--xh-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
	--xh-data:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* Thanh trên cùng */
body.xch-hd #top-bar,body.xch-hd .header-top{background:var(--xh-band);color:var(--xh-band-muted);font-family:var(--xh-body);font-size:16px;letter-spacing:0;text-transform:none}
body.xch-hd .header-top .nav>li>a,body.xch-hd .header-top .html{color:var(--xh-band-muted);font-size:16px;text-transform:none;letter-spacing:0}
body.xch-hd .header-top a.xch-hd-tel{color:var(--xh-band-ink);font-weight:600}
body.xch-hd .header-top a:hover{color:var(--xh-band-ink)}

/* Hàng chính: logo, tên, tìm kiếm, hotline */
body.xch-hd .header-main{background:var(--xh-surface);border-bottom:1px solid var(--xh-line);font-family:var(--xh-body)}
body.xch-hd .header-main #logo img,body.xch-hd .header-main .logo img{background:#FFFFFF;border:1px solid var(--xh-line);border-radius:8px;padding:5px 7px}
body.xch-hd .header-main .header-nav>li{margin:0 0 0 12px}
body.xch-hd .header-main .header-nav-main.nav-left>li:first-child{margin-left:0}
body.xch-hd .header-main .flex-left.flex-grow,body.xch-hd .header-main .flex-right{align-items:center}

.xch-hd .xh-brand-text{display:block;text-decoration:none;line-height:1}
.xch-hd .xh-brand__name{display:block;font:700 22px/1.15 var(--xh-display);text-transform:uppercase;letter-spacing:.04em;color:var(--xh-brand)}
.xch-hd .xh-brand__name i{font-style:normal;color:var(--xh-accent)}
.xch-hd .xh-brand__sub{display:block;font:500 11px/1.2 var(--xh-data);letter-spacing:.1em;color:var(--xh-muted);text-transform:uppercase;margin-top:4px}

/* Ô tìm kiếm (phần tử "Search Form" của Flatsome) */
body.xch-hd .header-main .header-search-form{flex:1 1 auto;min-width:260px}
body.xch-hd .header-main .header-search-form-wrapper,body.xch-hd .header-main .searchform-wrapper{width:100%;max-width:480px}
body.xch-hd .header-main .searchform{display:block;background:var(--xh-bg);border:2px solid var(--xh-brand);border-radius:6px;overflow:hidden}
body.xch-hd .header-main .searchform:focus-within{border-color:var(--xh-accent);box-shadow:0 0 0 3px rgba(243,111,37,.3)}
body.xch-hd .header-main .searchform .flex-row{flex-wrap:nowrap;align-items:stretch}
body.xch-hd .header-main .searchform input.search-field,body.xch-hd .header-main .searchform input[type=search]{height:46px;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--xh-ink);font:400 15px var(--xh-body);padding:0 14px}
body.xch-hd .header-main .searchform input::placeholder{color:var(--xh-muted)}
body.xch-hd .header-main .searchform .ux-search-submit,body.xch-hd .header-main .searchform button[type=submit]{width:54px;height:46px;min-height:46px;margin:0;padding:0;border:0;border-radius:0;background:var(--xh-brand);color:var(--xh-brand-ink);font-size:18px}
body.xch-hd .header-main .searchform .ux-search-submit:hover{filter:brightness(1.15)}

/* Ô hotline ([xch_hotline]) */
.xch-hd .xh-hotline{height:50px;display:flex;align-items:stretch;background:var(--xh-bg);border:2px solid var(--xh-brand);border-radius:6px;overflow:hidden;text-decoration:none;color:var(--xh-ink);line-height:1.1}
.xch-hd .xh-hotline__ic{flex:none;width:54px;background:var(--xh-brand);color:var(--xh-brand-ink);display:grid;place-items:center}
.xch-hd .xh-hotline__ic svg{width:22px;height:22px}
.xch-hd .xh-hotline:hover{border-color:var(--xh-accent)}
.xch-hd .xh-hotline:hover .xh-hotline__ic{background:var(--xh-accent);color:var(--xh-accent-ink)}
.xch-hd .xh-hotline__txt{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 18px 0 14px}
.xch-hd .xh-hotline small{display:block;font:500 11px/1 var(--xh-data);letter-spacing:.1em;text-transform:uppercase;color:var(--xh-accent-text)}
.xch-hd .xh-hotline strong{display:block;font:700 20px/1 var(--xh-display);letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--xh-brand)}

/* Hàng menu (Header Bottom) */
body.xch-hd .header-bottom,body.xch-hd #wide-nav{background:var(--xh-surface);border-bottom:1px solid var(--xh-line);font-family:var(--xh-body)}
body.xch-hd .header-bottom .nav>li{margin:0 2px}
body.xch-hd .header-bottom .nav>li>a{color:var(--xh-ink);font:500 15px var(--xh-body);text-transform:none;letter-spacing:0;padding:12px 14px;border-bottom:3px solid transparent}
body.xch-hd .header-bottom .nav>li>a:hover,body.xch-hd .header-bottom .nav>li.active>a,body.xch-hd .header-bottom .nav>li.current-menu-item>a{color:var(--xh-brand);border-bottom-color:var(--xh-accent)}
body.xch-hd .header-bottom .nav-line-bottom>li>a:before,body.xch-hd .header-bottom .nav-line>li>a:before{display:none}

/* Khi cuộn (sticky) */
body.xch-hd .stuck .header-main{box-shadow:0 1px 0 var(--xh-line)}

/* Điện thoại, máy tính bảng */
@media (max-width:849px){
	.xch-hd .xh-brand__name{font-size:21px}
	.xch-hd .xh-brand__sub{display:none}
	.xch-hd .xh-hotline{height:44px}
	.xch-hd .xh-hotline__ic{width:44px}
	.xch-hd .xh-hotline__txt{padding:0 10px}
	.xch-hd .xh-hotline small{display:none}
	.xch-hd .xh-hotline strong{font-size:20px}
}
@media (max-width:420px){
	.xch-hd .xh-hotline__txt{display:none}
}

/* Chi tiết căn chỉnh */
body.xch-hd .header-top .html{white-space:nowrap}
body.xch-hd .header-main .html .xh-brand-text{margin-right:8px}
body.xch-hd .header-main .header-nav>li.html{display:flex;align-items:center}
body.xch-hd a.xch-hd-tel{text-decoration:none}

/* v2.3: Top Bar căn giữa theo khung như các hàng khác */
body.xch-hd #top-bar>.flex-row,body.xch-hd .header-top>.flex-row{width:100%;max-width:var(--xh-container,1110px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:15px!important;padding-right:15px!important;box-sizing:border-box}

/* v2.3: chữ thương hiệu (HTML 3) nằm sát logo, ô tìm kiếm cùng hàng */
body.xch-hd .header-main #logo{width:auto!important;max-width:none;margin-right:12px}
body.xch-hd .header-main #logo a{display:block}
body.xch-hd .header-main .flex-left.flex-grow .header-nav-main{flex-wrap:nowrap;width:100%}
body.xch-hd .header-main .header-nav-main>li.html{flex:0 0 auto;margin-left:0}
body.xch-hd .header-main .header-nav-main>li.header-search-form{flex:1 1 auto;min-width:0;max-width:480px;margin-left:24px}
body.xch-hd .header-main .header-search-form-wrapper,body.xch-hd .header-main .header-search-form .searchform-wrapper{width:100%;max-width:none}

/* v2.4: logo có khoảng thở trên dưới, cao theo Tùy biến > Trang chủ XCH 2026 > Chiều cao logo */
body.xch-hd .header-main #logo img,body.xch-hd .header-main .logo img{box-sizing:border-box;height:var(--xh-logo-h,56px)!important;max-height:var(--xh-logo-h,56px)!important;width:auto!important;object-fit:contain}
body.xch-hd .header-main #logo,body.xch-hd .header-main #logo a{display:flex;align-items:center}

/* v2.4: ô tìm kiếm giống mẫu, thắng cả CSS cũ / màu Flatsome */
body.xch-hd .header-main .searchform{background:var(--xh-bg)!important;border:2px solid var(--xh-brand)!important;border-radius:6px!important;overflow:hidden!important;box-shadow:none}
body.xch-hd .header-main .searchform:focus-within{border-color:var(--xh-accent)!important;box-shadow:0 0 0 3px rgba(243,111,37,.3)}
body.xch-hd .header-main .searchform .flex-row{flex-wrap:nowrap!important;align-items:stretch!important}
body.xch-hd .header-main .searchform .flex-col{margin:0!important;padding:0!important}
body.xch-hd .header-main .searchform input.search-field,body.xch-hd .header-main .searchform input[type=search]{height:46px!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:var(--xh-ink)!important;font:400 15px var(--xh-body)!important;padding:0 14px!important}
body.xch-hd .header-main .searchform .ux-search-submit,body.xch-hd .header-main .searchform button[type=submit]{width:54px!important;height:46px!important;min-height:46px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:var(--xh-brand)!important;color:var(--xh-brand-ink)!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center}
body.xch-hd .header-main .searchform .ux-search-submit i,body.xch-hd .header-main .searchform .ux-search-submit svg{color:var(--xh-brand-ink)!important;font-size:18px}

/* v2.5.2: hàng logo/hotline thẳng lề với Top Bar (cùng khung, không thụt thêm ở hai đầu) */
body.xch-hd .header-main .header-inner{width:100%;max-width:var(--xh-container,1110px)!important;margin-left:auto!important;margin-right:auto!important;padding-left:15px!important;padding-right:15px!important;box-sizing:border-box}
body.xch-hd .header-main .header-inner>.flex-col.logo,body.xch-hd .header-main #logo{margin-left:0!important;padding-left:0!important}
body.xch-hd .header-main .header-inner>.flex-col.flex-right{margin-right:0!important;padding-right:0!important}
body.xch-hd .header-main .flex-right .header-nav>li:last-child{margin-right:0!important;padding-right:0!important}
body.xch-hd .header-main .flex-left .header-nav>li:first-child{padding-left:0!important}

/* v2.5.3: ô tìm kiếm nằm giữa khoảng trống giữa chữ thương hiệu và hotline */
body.xch-hd .header-main .header-nav-main>li.html{margin-right:24px!important}
body.xch-hd .header-main .header-nav-main>li.header-search-form{margin-left:auto!important;margin-right:auto!important}
body.xch-hd .header-main .flex-right{margin-left:24px}

/* v2.5.3: hover ô tìm kiếm giống ô hotline (viền cam, nút cam) */
body.xch-hd .header-main .searchform{transition:border-color .15s}
body.xch-hd .header-main .searchform .ux-search-submit,body.xch-hd .header-main .searchform button[type=submit]{transition:background-color .15s,color .15s}
body.xch-hd .header-main .searchform:hover{border-color:var(--xh-accent)!important}
body.xch-hd .header-main .searchform:hover .ux-search-submit,body.xch-hd .header-main .searchform:hover button[type=submit],body.xch-hd .header-main .searchform:focus-within .ux-search-submit,body.xch-hd .header-main .searchform:focus-within button[type=submit]{background:var(--xh-accent)!important;color:var(--xh-accent-ink)!important}
body.xch-hd .header-main .searchform:hover .ux-search-submit i,body.xch-hd .header-main .searchform:hover .ux-search-submit svg,body.xch-hd .header-main .searchform:focus-within .ux-search-submit i,body.xch-hd .header-main .searchform:focus-within .ux-search-submit svg{color:var(--xh-accent-ink)!important}

/* v2.5.4: chữ menu (Header Bottom) luôn hiện màu đậm, thắng màu sáng / "nav dark" đặt trong Tùy biến */
body.xch-hd .header-bottom .nav>li>a,body.xch-hd #wide-nav .nav>li>a,body.xch-hd .header-bottom .nav-dark .nav>li>a,body.xch-hd .header-bottom.nav-dark .nav>li>a{color:var(--xh-ink)!important;opacity:1!important}
body.xch-hd .header-bottom .nav>li>a:hover,body.xch-hd #wide-nav .nav>li>a:hover,body.xch-hd .header-bottom .nav>li.active>a,body.xch-hd .header-bottom .nav>li.current-menu-item>a,body.xch-hd .header-bottom .nav>li.current-menu-ancestor>a{color:var(--xh-brand)!important}
body.xch-hd .header-bottom .nav>li>a .icon-angle-down{color:inherit!important}

/* v2.5.5: điện thoại/máy tính bảng: nút menu 3 gạch và các icon ở hàng chính hiện màu đậm trên nền trắng */
body.xch-hd .header-main .mobile-nav>li>a,body.xch-hd .header-main .mobile-nav>li>a i,body.xch-hd .header-main .nav-icon>a,body.xch-hd .header-main .nav-icon>a i,body.xch-hd .header-main .icon-menu,body.xch-hd .header-main .header-nav-main>li>a.is-small>i{color:var(--xh-brand)!important;opacity:1!important}
body.xch-hd .header-main .nav-icon>a:hover,body.xch-hd .header-main .nav-icon>a:hover i,body.xch-hd .header-main .mobile-nav>li>a:hover,body.xch-hd .header-main .mobile-nav>li>a:hover i{color:var(--xh-accent)!important}

/* v2.5.6: nút menu 3 gạch (điện thoại) cùng kiểu với ô icon của nút hotline */
body.xch-hd .header-main .nav-icon>a{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0!important;margin:0!important;background:var(--xh-brand)!important;border:2px solid var(--xh-brand)!important;border-radius:6px;box-sizing:border-box;color:var(--xh-brand-ink)!important;line-height:1;transition:background-color .15s,border-color .15s,color .15s}
body.xch-hd .header-main .nav-icon>a i,body.xch-hd .header-main .nav-icon>a .icon-menu{color:var(--xh-brand-ink)!important;font-size:20px;margin:0!important;top:0}
body.xch-hd .header-main .nav-icon>a:hover,body.xch-hd .header-main .nav-icon>a:focus{background:var(--xh-accent)!important;border-color:var(--xh-accent)!important}
body.xch-hd .header-main .nav-icon>a:hover i,body.xch-hd .header-main .nav-icon>a:focus i{color:var(--xh-accent-ink)!important}
body.xch-hd .header-main .nav-icon>a .menu-title{display:none}

/* v2.5.7: bắt cả khi nút menu nằm trong .header-button hoặc .mobile-nav (khác cấu trúc HTML), độ ưu tiên cao hơn CSS cũ */
html body.xch-hd .header-main .nav-icon a,html body.xch-hd .header-main a[data-open="#main-menu"],html body.xch-hd .header-wrapper a[data-open="#main-menu"]{display:flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;background:var(--xh-brand)!important;background-color:var(--xh-brand)!important;border:2px solid var(--xh-brand)!important;border-radius:6px!important;box-sizing:border-box!important;box-shadow:none!important;color:var(--xh-brand-ink)!important;line-height:1!important;opacity:1!important}
html body.xch-hd .header-main .nav-icon a i,html body.xch-hd .header-wrapper a[data-open="#main-menu"] i,html body.xch-hd .header-wrapper a[data-open="#main-menu"] svg{color:var(--xh-brand-ink)!important;fill:currentColor;font-size:20px!important;margin:0!important;top:0!important}
html body.xch-hd .header-main .nav-icon a:hover,html body.xch-hd .header-wrapper a[data-open="#main-menu"]:hover{background:var(--xh-accent)!important;background-color:var(--xh-accent)!important;border-color:var(--xh-accent)!important}
html body.xch-hd .header-main .nav-icon a:hover i,html body.xch-hd .header-wrapper a[data-open="#main-menu"]:hover i{color:var(--xh-accent-ink)!important}
html body.xch-hd .header-main .nav-icon .header-button{margin:0!important;padding:0!important}