/* Phần HEADER – khớp số đo bản demo (header() trong gen.py, đo 26/10 ở 1440 và 390). Nạp khi hk_v2("header"). */
:root{--hk-i-tim:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22M20 20l-3.5-3.5%22/%3E%3C/svg%3E");--hk-i-gio:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22%3E%3Cpath d=%22M5 7h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8z%22/%3E%3Cpath d=%22M9 7V6a3 3 0 0 1 6 0v1%22/%3E%3C/svg%3E");--hk-i-menu:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3C/svg%3E")}
.header-main .icon-search:before,.header-main .icon-shopping-cart:before,.header-main .icon-menu:before,
#wide-nav .header-vertical-menu__icon .icon-menu:before{content:"";display:block;width:18px;height:18px;color:inherit;background:currentColor;-webkit-mask:var(--hk-i) center/contain no-repeat;mask:var(--hk-i) center/contain no-repeat}
.header-main .icon-search{--hk-i:var(--hk-i-tim)}.header-main .icon-shopping-cart{--hk-i:var(--hk-i-gio)}.header-main .icon-menu,#wide-nav .icon-menu{--hk-i:var(--hk-i-menu)}
.header-main i.icon-search,.header-main i.icon-shopping-cart,.header-main i.icon-menu,#wide-nav i.icon-menu{top:0;margin:0;font-size:0;line-height:0;display:block}
.header-main .icon-shopping-cart:after{display:none!important}
#masthead .header-cart-link i,#masthead .nav-icon i,#masthead .header-search i{top:0!important;position:static;width:auto!important;height:auto;min-width:0!important}
.header-wrapper:after{display:none}

@media (min-width:850px){
  /* hàng trên: khung 1240, cao 72 (14 + 44 + 14) */
  .header-main{height:72px!important}
  .header-main .header-inner{max-width:1240px;padding:0;gap:0 28px}
  .header-main .header-inner>.flex-col{margin:0!important}
  #masthead .header-inner:before,#masthead .header-inner:after{display:none}
  #logo{width:auto!important;margin:0}
  #logo img{width:184.4px!important;height:34px!important;max-height:none;display:block;scale:none}
  .header-main .nav-left,.header-main .nav-right{gap:0 22px}
  #masthead .nav>li{margin:0!important;padding:0!important}
  .header-main .flex-left.flex-grow>.nav-left{width:100%}
  .header-main li.header-search-form.search-form.html.relative.has-icon{margin-left:0!important;border:0!important;border-radius:0;padding:0;flex:1 1 auto;max-width:none;width:100%}
  .header-main .header-search-form-wrapper,.header-main .header-search-form .searchform-wrapper{width:100%;max-width:none}
  .header-main .header-search-form .searchform{height:44px;border:1px solid #C9D0DB;border-radius:6px;overflow:hidden;background:#FFFFFF}
  .header-main .header-search-form .searchform .flex-row{align-items:stretch;height:42px}
  .header-main .header-search-form input.search-field[type="search"]{height:42px;margin:0;border:0!important;border-radius:0;box-shadow:none!important;padding:10px 14px;font-size:14px;line-height:21.7px;color:var(--hk-chu);background:#FFFFFF}
  .header-main .header-search-form input.search-field::placeholder{color:#757575;opacity:1}
  .header-main .searchform .button.submit-button.ux-search-submit{width:48px;height:42px;min-height:42px;margin:0;padding:0;border:0;border-radius:0!important;background:var(--hk-navy)!important;color:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:none}
  .header-main .html_topbar_left,.header-main .html_nav_position_text_top{text-align:left}
  .header-main .html_topbar_left:before,.header-main .html_nav_position_text_top:before{display:none}
  #masthead .nav>li>a.hk-lh,.hk-lh{display:block;padding:0;min-height:0;text-align:left;font-size:13.5px;font-weight:400;line-height:17.55px;color:var(--hk-chu)!important;text-decoration:none;letter-spacing:0}
  .hk-lh b{display:block;color:var(--hk-navy);font-weight:600;font-size:15px;line-height:19.5px}
  .header-main .cart-item .header-button{margin:0}
  .header-main .nav>li.cart-item .header-cart-link{display:flex;align-items:center;gap:8px;height:38px;min-height:38px;padding:10px 14px;margin:0;border:0;border-radius:6px!important;background:var(--hk-navy)!important;color:#FFFFFF!important;font-size:13.5px;font-weight:500;line-height:17.55px;box-shadow:none;text-transform:none;letter-spacing:0}
  #masthead .cart-item .header-cart-link i,#masthead .cart-item .header-cart-title{margin:0}
  .header-main .cart-item .header-cart-title{font-size:13.5px;font-weight:500;line-height:17.55px;color:#FFFFFF;text-transform:none;letter-spacing:0;padding:0;margin:0}
  /* thanh menu: cao 46.5, khung 1240 lề 24 -> chữ bắt đầu ở x+24 */
  #wide-nav{min-height:0;border-bottom:1px solid var(--hk-vien);background:var(--hk-navy)!important}
  #wide-nav>.flex-row{max-width:1240px;padding:0 24px;min-height:0}
  #wide-nav .flex-col{margin:0}
  #wide-nav .header-bottom-nav{gap:0 26px;flex-wrap:nowrap}
  #wide-nav .header-bottom-nav>li{margin:0!important;padding:0!important}
  #wide-nav .header-bottom-nav>li>a,#wide-nav .header-vertical-menu__opener{color:#FFFFFF!important;font-size:14.5px;font-weight:500;line-height:22.475px;text-transform:none;letter-spacing:0;padding:12px 0;display:flex;align-items:center;gap:6px;white-space:nowrap;min-height:0;height:auto}
  #wide-nav .header-bottom-nav>li>a>.icon-angle-down,#wide-nav .header-vertical-menu__opener>.icon-angle-down{display:none}
  #wide-nav .header-vertical-menu__opener{background:transparent!important;width:auto;cursor:pointer}
  #wide-nav .header-vertical-menu__icon{margin:0;display:flex;width:18px;height:18px}
  #wide-nav .header-vertical-menu__title{font-size:14.5px;font-weight:500;line-height:22.475px;text-transform:none;padding:0;margin:0}
  #wide-nav .header-bottom-nav>li.current-menu-item>a,#wide-nav .header-bottom-nav>li.current-menu-ancestor>a,#wide-nav .header-bottom-nav>li.current-product_cat-ancestor>a{box-shadow:inset 0 -3px 0 var(--hk-vang)}
  #menu-item-35553>a:after{content:"MỚI";background:var(--hk-vang);color:var(--hk-navy);font-size:10px;font-weight:700;padding:0 5px;border-radius:3px;line-height:15px}
}

@media (max-width:849px){
  /* điện thoại: cao 56 + viền 1, nút 40x40 bo 10, logo 119.3 x 22 ở giữa */
  #masthead.header-main{height:57px!important;border-bottom:1px solid var(--hk-vien)}
  #masthead .header-inner{padding:8px 14px;height:56px}
  .header-main .mobile-nav>li{margin:0}
  .header-main .mobile-nav.nav-right{gap:6px}
  .header-main .mobile-nav .nav-icon>a,.header-main .mobile-nav .header-search>a,.header-main .mobile-nav .cart-item .header-cart-link{width:40px;height:40px;min-height:40px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px!important;color:var(--hk-navy)!important;background:transparent!important;box-shadow:none}
  .header-main .mobile-nav .cart-item .header-cart-link{background:var(--hk-xam)!important}
  .header-main .mobile-nav .icon-shopping-cart:before{width:20px;height:20px}
  .header-main #logo,.header-main #logo img{scale:none}
  .header-main #logo{width:auto!important;margin:0 auto}
  .header-main #logo img{width:119.3px!important;height:22px!important;max-height:none}
}

/* 850–1287px (laptop nhỏ): bản demo chỉ vẽ ở 1440, giữ lề 24 hai bên và thu menu để không rớt dòng */
@media (min-width:850px) and (max-width:1287px){
  .header-main .header-inner{padding:0 24px}
}
@media (min-width:850px) and (max-width:1239px){
  .header-main .header-inner{gap:0 20px}
  .header-main .nav-right{gap:0 16px}
  #wide-nav .header-bottom-nav{gap:0 18px}
  #wide-nav .header-bottom-nav>li>a,#wide-nav .header-vertical-menu__opener,#wide-nav .header-vertical-menu__title{font-size:13.5px}
}
@media (min-width:850px) and (max-width:1023px){
  .header-main .html_topbar_left{display:none}
  #menu-item-35553>a:after{display:none}
  #wide-nav .header-bottom-nav>li{flex-shrink:0}
  #wide-nav .header-bottom-nav{gap:0 14px}
  #wide-nav .header-bottom-nav>li>a,#wide-nav .header-vertical-menu__opener,#wide-nav .header-vertical-menu__title{font-size:13px}
}
@media (max-width:849px){#masthead .mobile-nav i{color:inherit!important}#masthead .mobile-nav .nav-icon i,#masthead .mobile-nav .header-search i{width:18px!important;height:18px!important}#masthead .mobile-nav .cart-item i{width:20px!important;height:20px!important}}

/* header dính bằng CSS thuần: luôn giữ chỗ, không đổi chiều cao, không nháy (thay JS dính của Flatsome) */
#header.header{position:sticky;top:0;z-index:1001}