/* The header and menu on every page (2026-11-06), in the look of the redesigned product page (product_v2.css):
   the owner's lighter orange, a pill search box and a pill menu. Every rule starts at body.nl (the layouts set
   nl nl-d on a computer, nl nl-m on a phone). Be Vietnam Pro: SIL OFL, fonts/be-vietnam-pro-OFL.txt */
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-400.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-600.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-700.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-weight:800;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-800.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:800;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body.nl{
  --cam:#ff6a00; --cam-dam:#be4a00; --cam-nhat:#fff3ea; --vien-cam:#ffe0c9; --chu:#1d1d1f; --vien:#e8e8ec;
  --dai:linear-gradient(90deg,#ff5200 0%,#ff7a1a 35%,#ffa552 70%,#ffd3a6 100%);
  --dai-bang:linear-gradient(90deg,#ff4d00 0%,#ff7a1a 100%);
  --dai-cheo:linear-gradient(120deg,#ff4d00 0%,#ff7314 40%,#ff9437 75%,#ffb066 100%);
  --dai-nhat:linear-gradient(180deg,#fff6ef 0%,#fff 100%);
  --chu-bong:0 1px 2px rgba(122,40,0,.45);
  /* bars with small white text or icons on them stay deep enough to read (white 4.3:1 and up on the computer bar,
     3:1 and up for the phone header's icons); the light gradients are for big blocks */
  --dai-thanh:linear-gradient(90deg,#c84300 0%,#d94700 100%);
  --dai-thanh-m:linear-gradient(90deg,#ff5200 0%,#e65300 100%);
}
body.nl :is(.header-top,.header,.box-header-menu,.header-main) :not(.fa):not(.sprite){font-family:"Be Vietnam Pro",Roboto,system-ui,sans-serif}
/* ---- header and menu */
body.nl-d .header-top{background:var(--dai-thanh)}
body.nl-d .header-top .title-group.title-group-hover:hover{background:rgba(255,255,255,.18)}
body.nl .header-top .title-group{color:#fff}
body.nl .header-top .title-group.bg-linear{background:rgba(255,255,255,.95);border-radius:999px;color:var(--cam-dam)!important}
body.nl-d .header{background:#fff;box-shadow:0 1px 0 var(--vien)}
body.nl-d .box-header-top{padding:8px 0}
body.nl-d .header-left-logo img{max-height:56px;width:auto}
body.nl-d .search-bar-input{border:2px solid var(--cam);border-radius:999px;height:44px}
body.nl-d .search-bar-btn{background:var(--dai-cheo);border-radius:0 999px 999px 0;height:44px}
body.nl-d .box-header-menu{background:var(--dai-nhat);border-top:1px solid var(--vien-cam);border-bottom:1px solid var(--vien-cam)}
body.nl-d .box-header-menu,body.nl-d .header-menu{height:auto;min-height:0;filter:none;opacity:1}
body.nl-d .box-header-menu{padding:0}
body.nl-d .header-menu{gap:4px;padding:6px 0;flex-wrap:nowrap}
body.nl-d .header-item{flex:0 1 auto;height:auto;min-height:0;width:auto;padding:0;filter:none;opacity:1}
body.nl-d .header-link{display:block;padding:7px 11px;border-radius:999px;color:var(--chu)!important;white-space:nowrap;height:auto;background:transparent;filter:none;opacity:1}
body.nl-d .header-link img{display:none}
body.nl-d .header-link p{filter:none;opacity:1;color:inherit!important;font-size:13px;font-weight:600;margin:0;line-height:1.3;white-space:nowrap}
/* the dropdown starts right under the row: with the shorter row, the old fixed 74 / 61 px left a gap the pointer fell into */
body.nl-d .header-menu .sub-menu2{top:calc(100% - 6px)}   /* 6 px: .header-menu padding, so it touches the item */
body.nl-d .header-item:hover .header-link{background:var(--dai-cheo);color:#fff!important;text-shadow:var(--chu-bong)}
/* the gradient sits on the whole header: the fixed header's search box is a separate box over it */
body.nl-m .header-main{background:var(--dai-thanh-m)}
body.nl-m .header-main .header-top,body.nl-m .header-main .header-search{background:transparent}
body.nl-m .search-form-group{border-radius:999px;overflow:hidden}