:root{
  --ws-nav-bg:#0f0b08;
  --ws-nav-bg-2:#17100c;
  --ws-nav-bg-3:#1c130e;
  --ws-nav-line:rgba(255,239,221,.10);
  --ws-nav-line-strong:rgba(237,169,86,.24);
  --ws-nav-text:#e2d1c0;
  --ws-nav-muted:#9e8976;
  --ws-nav-accent:#eda956;
  --ws-nav-accent-2:#f4c47e;
}

/* ==========================================================
   WebStore V24 — TWO-ROW PUBLIC TOOLBAR
   Row 1: logo + search + utilities
   Row 2: primary navigation
   ========================================================== */

.ws-header{
  position:relative;
  z-index:50;
  width:100%;
  border-bottom:1px solid var(--ws-nav-line);
  background:var(--ws-nav-bg);
  color:var(--ws-nav-text);
}

.ws-header-container{
  width:min(1640px,calc(100% - 56px));
  margin:0 auto;
}

/* ---------- ROW 1 ---------- */
.ws-header-main{
  background:
    radial-gradient(circle at 20% 0%,rgba(237,169,86,.045),transparent 24rem),
    var(--ws-nav-bg);
  border-bottom:1px solid rgba(255,239,221,.055);
}

.ws-header-main-inner{
  min-height:76px;
  display:grid;
  grid-template-columns:205px minmax(300px,1fr) auto;
  align-items:center;
  gap:24px;
}

.ws-brand{
  width:188px;
  height:54px;
  display:flex;
  align-items:center;
  line-height:0;
  text-decoration:none;
}

.ws-brand img{
  display:block;
  width:188px;
  height:auto;
  max-height:54px;
  aspect-ratio:816 / 225;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 8px 18px rgba(208,138,70,.11));
}

/* Search inspired by large e-commerce toolbars, restyled for WebStore. */
.ws-header-search{
  width:100%;
  min-width:0;
  height:46px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 62px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(255,239,221,.14);
  border-radius:14px;
  background:#f8f1e8;
  box-shadow:
    0 8px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
}

.ws-search-symbol{
  display:grid;
  place-items:center;
  color:#8b694a;
  font-size:18px;
}

.ws-header-search input{
  width:100%;
  height:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#342317;
  font:inherit;
  font-size:12px;
}

.ws-header-search input::placeholder{
  color:#9b8774;
}

.ws-header-search button{
  height:36px;
  margin-right:5px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  background:linear-gradient(135deg,#f3bc73,#dc8e3d);
  color:#2b190c;
  font-size:11px;
  font-weight:900;
  transition:filter .15s ease,transform .15s ease;
}

.ws-header-search button:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

.ws-header-utilities{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}

.ws-utility{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 9px;
  border-radius:11px;
  color:var(--ws-nav-text);
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}

.ws-utility:hover{
  background:rgba(237,169,86,.07);
  color:var(--ws-nav-accent-2);
}

.ws-utility-icon{
  width:29px;
  height:29px;
  flex:0 0 29px;
  display:grid;
  place-items:center;
  border:1px solid rgba(237,169,86,.18);
  border-radius:9px;
  background:rgba(237,169,86,.055);
  color:var(--ws-nav-accent);
  font-size:14px;
}

.ws-utility-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.1;
}

.ws-utility-copy small{
  color:var(--ws-nav-muted);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.ws-utility-copy b{
  margin-top:4px;
  color:inherit;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}

.ws-cart-count{
  min-width:17px;
  height:17px;
  margin-left:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border-radius:999px;
  background:var(--ws-nav-accent);
  color:#241409;
  font-size:10px;
  font-style:normal;
  font-weight:950;
  vertical-align:middle;
}

.ws-admin-button,
.ws-header-cta{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 12px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
  font-size:11px;
  font-weight:850;
}

.ws-admin-button{
  border:1px solid rgba(237,169,86,.19);
  background:rgba(237,169,86,.035);
  color:#dfc09b;
}

.ws-header-cta{
  border:1px solid rgba(237,169,86,.34);
  background:linear-gradient(135deg,#f3bd75,#df913f);
  color:#241409;
  box-shadow:0 7px 20px rgba(208,138,70,.10);
}

/* ---------- ROW 2 ---------- */
.ws-header-nav-row{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),
    var(--ws-nav-bg-2);
  border-bottom:1px solid rgba(237,169,86,.11);
}

.ws-header-nav-inner{
  min-height:54px;
  display:flex;
  align-items:stretch;
}

.ws-nav{
  width:100%;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:stretch;
}

.ws-nav-link{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-left:1px solid rgba(255,239,221,.045);
  color:#dac7b5;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}

.ws-nav-link:last-child{
  border-right:1px solid rgba(255,239,221,.045);
}

.ws-nav-link::after{
  content:"";
  position:absolute;
  left:28%;
  right:28%;
  bottom:0;
  height:2px;
  border-radius:999px 999px 0 0;
  background:var(--ws-nav-accent);
  transform:scaleX(0);
  transition:transform .16s ease;
}

.ws-nav-link:hover{
  background:rgba(237,169,86,.055);
  color:var(--ws-nav-accent-2);
}

.ws-nav-link:hover::after,
.ws-nav-link.active::after{
  transform:scaleX(1);
}

.ws-nav-link.active{
  background:
    radial-gradient(circle at 50% 100%,rgba(237,169,86,.11),transparent 70%),
    rgba(237,169,86,.045);
  color:var(--ws-nav-accent-2);
}

.ws-nav-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  color:var(--ws-nav-accent);
  font-size:15px;
  font-weight:500;
}

/* ---------- Responsive desktop ---------- */
@media(max-width:1370px){
  .ws-header-container{
    width:calc(100% - 36px);
  }
  .ws-header-main-inner{
    grid-template-columns:178px minmax(250px,1fr) auto;
    gap:13px;
  }
  .ws-brand,.ws-brand img{
    width:166px;
  }
  .ws-utility{
    padding-left:6px;
    padding-right:6px;
  }
  .ws-utility-support .ws-utility-copy small,
  .ws-utility-orders .ws-utility-copy small{
    display:none;
  }
  .ws-admin-button{
    padding:0 9px;
  }
}

@media(max-width:1120px){
  .ws-header-main-inner{
    grid-template-columns:165px minmax(230px,1fr) auto;
  }
  .ws-utility-support{
    display:none;
  }
  .ws-utility-copy b{
    font-size:10.5px;
  }
  .ws-header-cta{
    padding:0 10px;
    font-size:10.5px;
  }
  .ws-nav-link{
    font-size:11px;
  }
}

/* ---------- Tablet/mobile: still exactly 2 visual rows ---------- */
@media(max-width:820px){
  .ws-header-container{
    width:100%;
  }

  .ws-header-main-inner{
    min-height:64px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:7px 12px;
  }

  .ws-brand{
    width:154px;
    height:48px;
  }

  .ws-brand img{
    width:154px;
    height:48px;
  }

  .ws-header-search,
  .ws-utility-support,
  .ws-utility-orders,
  .ws-admin-button{
    display:none;
  }

  .ws-header-utilities{
    gap:5px;
  }

  .ws-utility-cart{
    min-height:38px;
    padding:0 7px;
    border:1px solid var(--ws-nav-line);
    background:#17110d;
  }

  .ws-utility-cart .ws-utility-copy small{
    display:none;
  }

  .ws-utility-cart .ws-utility-copy b{
    font-size:10.5px;
  }

  .ws-utility-icon{
    width:25px;
    height:25px;
    flex-basis:25px;
    font-size:12px;
  }

  .ws-header-cta{
    min-height:38px;
    padding:0 9px;
    font-size:10.5px;
  }

  .ws-header-nav-inner{
    min-height:49px;
    overflow:hidden;
  }

  .ws-nav{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .ws-nav::-webkit-scrollbar{
    display:none;
  }

  .ws-nav-link{
    flex:0 0 auto;
    min-width:126px;
    min-height:49px;
    padding:0 12px;
    font-size:11px;
    scroll-snap-align:start;
  }

  .ws-nav-icon{
    width:20px;
    height:20px;
    font-size:12px;
  }
}

@media(max-width:430px){
  .ws-header-main-inner{
    padding-left:10px;
    padding-right:10px;
  }

  .ws-brand,.ws-brand img{
    width:140px;
  }

  .ws-utility-cart .ws-utility-copy{
    display:none;
  }

  .ws-utility-cart{
    width:37px;
    padding:0;
    justify-content:center;
  }

  .ws-header-cta{
    padding:0 8px;
    font-size:10px;
  }

  .ws-nav-link{
    min-width:116px;
  }
}


/* ==========================================================
   WebStore V25 — Sticky two-row toolbar
   Cả 2 hàng luôn đứng yên ở đầu màn hình khi cuộn.
   ========================================================== */
.ws-header{
  position:sticky;
  top:0;
  z-index:1000;
  isolation:isolate;
  box-shadow:
    0 1px 0 rgba(255,239,221,.055),
    0 12px 30px rgba(0,0,0,.18);
}

/* Tăng độ đặc của nền để nội dung phía sau không xuyên qua khi cuộn. */
.ws-header-main{
  background:
    radial-gradient(circle at 20% 0%,rgba(237,169,86,.05),transparent 24rem),
    rgba(15,11,8,.985);
}

.ws-header-nav-row{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),
    rgba(23,16,12,.99);
}

/* Khi trình duyệt hỗ trợ backdrop-filter, thanh menu trông sạch hơn lúc cuộn. */
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .ws-header{
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
}

/* Anchor links không bị header che mất sau khi nhảy tới section. */
html{
  scroll-padding-top:145px;
}

@media(max-width:820px){
  html{
    scroll-padding-top:122px;
  }

  .ws-header{
    box-shadow:
      0 1px 0 rgba(255,239,221,.05),
      0 8px 22px rgba(0,0,0,.20);
  }
}


/* ==========================================================
   WebStore V26 — Header utility text readability
   Tăng chữ ở Hỗ trợ / Đơn hàng / Giỏ hàng / Quản trị / CTA.
   ========================================================== */
@media(min-width:1121px){
  .ws-header-utilities{
    gap:9px;
  }

  .ws-utility{
    min-height:52px;
    gap:9px;
    padding-left:10px;
    padding-right:10px;
  }

  .ws-utility-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
    border-radius:10px;
    font-size:15px;
  }

  .ws-utility-copy{
    line-height:1.12;
  }

  .ws-utility-copy small{
    font-size:11px;
    font-weight:750;
    letter-spacing:.015em;
    color:#b8a18b;
  }

  .ws-utility-copy b{
    margin-top:4px;
    font-size:11px;
    font-weight:900;
    letter-spacing:-.01em;
    color:#f2e5d7;
  }

  .ws-cart-count{
    min-width:19px;
    height:19px;
    padding:0 5px;
    font-size:10.5px;
  }

  .ws-admin-button,
  .ws-header-cta{
    min-height:43px;
    padding-left:14px;
    padding-right:14px;
    font-size:10.5px;
    font-weight:900;
  }

  .ws-admin-button span{
    font-size:12px;
  }
}

/* Màn hình desktop vừa: vẫn tăng chữ nhưng tiết kiệm chiều ngang. */
@media(min-width:821px) and (max-width:1370px){
  .ws-utility-copy small{
    font-size:10.5px;
  }

  .ws-utility-copy b{
    font-size:11px;
  }

  .ws-admin-button,
  .ws-header-cta{
    font-size:11px;
  }
}

/* Mobile: tăng nhẹ chữ giỏ hàng và CTA, không làm vỡ hàng trên. */
@media(max-width:820px){
  .ws-utility-cart .ws-utility-copy b{
    font-size:11px;
  }

  .ws-header-cta{
    font-size:10.5px;
    font-weight:900;
  }
}

/* WebStore V57 customer account shortcut */
.ws-account-button{display:flex;align-items:center;gap:7px;min-height:43px;padding:0 10px;border:1px solid rgba(227,170,104,.15);border-radius:10px;background:rgba(255,255,255,.025);color:#e0c3a3;text-decoration:none;white-space:nowrap}.ws-account-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#1b130e;color:#e8a85e}.ws-account-copy small,.ws-account-copy b{display:block}.ws-account-copy small{font-size:10px;color:#826c58}.ws-account-copy b{font-size:10.5px}.ws-account-button.logged-in{border-color:rgba(107,181,117,.17)}@media(max-width:1180px){.ws-account-copy{display:none}.ws-account-button{padding:0 7px}}


/* ==========================================================
   WebStore V58 — Prominent customer account button
   ========================================================== */
.ws-header-utilities .ws-account-button{
  position:relative;
  min-width:108px;
  min-height:46px;
  padding:0 13px 0 10px;
  gap:9px;
  border:1px solid rgba(231,162,82,.34);
  border-radius:11px;
  background:
    linear-gradient(145deg,rgba(91,52,27,.52),rgba(31,20,14,.95));
  color:#fff0dc;
  box-shadow:
    inset 0 1px 0 rgba(255,211,158,.08),
    0 7px 18px rgba(0,0,0,.14);
  overflow:hidden;
}

.ws-header-utilities .ws-account-button::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#e9a24d,transparent);
  opacity:.72;
}

.ws-header-utilities .ws-account-button:hover{
  border-color:rgba(241,178,102,.58);
  background:
    linear-gradient(145deg,rgba(116,64,29,.62),rgba(39,24,15,.98));
  color:#fff8ee;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,216,166,.11),
    0 9px 22px rgba(0,0,0,.19),
    0 0 0 3px rgba(224,143,58,.045);
}

.ws-header-utilities .ws-account-icon{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border:1px solid rgba(237,173,96,.25);
  border-radius:9px;
  background:
    linear-gradient(145deg,rgba(232,151,66,.16),rgba(73,39,20,.2));
  color:#f0ae62;
}

.ws-header-utilities .ws-account-icon svg{
  width:16px;
  height:16px;
  display:block;
  fill:currentColor;
}

.ws-header-utilities .ws-account-copy{
  display:block;
  min-width:0;
  line-height:1.05;
}

.ws-header-utilities .ws-account-copy small{
  display:block;
  margin:0 0 3px;
  color:#b79675;
  font-size:10px;
  font-weight:750;
  letter-spacing:.035em;
}

.ws-header-utilities .ws-account-copy b{
  display:block;
  color:#fff3e4;
  font-size:10.5px;
  font-weight:950;
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* Signed-in state: noticeable without changing the site's copper identity. */
.ws-header-utilities .ws-account-button.logged-in{
  border-color:rgba(111,183,119,.28);
  background:
    linear-gradient(145deg,rgba(47,82,45,.25),rgba(31,22,15,.96));
}

.ws-header-utilities .ws-account-button.logged-in::after{
  background:linear-gradient(90deg,transparent,#79bf81,transparent);
}

.ws-header-utilities .ws-account-button.logged-in .ws-account-icon{
  color:#8fd197;
  border-color:rgba(111,183,119,.24);
  background:rgba(69,133,75,.10);
}

.ws-header-utilities .ws-account-button.logged-in .ws-account-copy b{
  color:#f3ffef;
}

/* Keep it readable on medium desktop widths instead of hiding all text too early. */
@media (max-width:1380px){
  .ws-header-utilities .ws-account-button{
    min-width:94px;
    padding-right:10px;
  }
  .ws-header-utilities .ws-account-copy small{
    display:none;
  }
  .ws-header-utilities .ws-account-copy b{
    font-size:11px;
  }
}

@media (max-width:1180px){
  .ws-header-utilities .ws-account-button{
    min-width:44px;
    width:44px;
    padding:0;
    justify-content:center;
  }
  .ws-header-utilities .ws-account-copy{
    display:none;
  }
  .ws-header-utilities .ws-account-button::after{
    left:8px;
    right:8px;
  }
}


/* WebStore V68 · Customer readability: tăng cỡ chữ phụ nhỏ, giữ nguyên các tiêu đề lớn. */
/* V83 · Admin entry is private by default on customer-facing headers. */
.ws-admin-button:not(.ws-admin-visible){display:none!important}