/* ============================================================================
   Header — gradient masthead + dark nav bar + vertical category menu + hero
   Measured: #header 144px = masthead 100px (gradient) + nav 44px (#3b1f11)
   ========================================================================= */

.site-header { position: relative; z-index: 100; }

/* The source header sits in a slightly wider container than the body content
   (measured: header 1170px, body row 1140px). */
.masthead .container,
.navbar .container { max-width: 1170px; }

/* --------------------------------------------------------------- masthead - */

.masthead {
  height: var(--masthead-h);
  background: var(--header-grad);
  position: relative;
  z-index: 2;
}

.masthead-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Logo lockup: round badge at the left edge, brand block centred in the bar,
   delivery + hotline blocks on the right (reference: Trà Cổ Việt design). */
.brand { flex-shrink: 0; display: block; margin-left: 0; }

.brand-badge {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.brand-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  text-align: center;
}
.brand-eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--primary);
}
.brand-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 34px;      /* serif wordmark, per the reference design */
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: .5px;
}
.brand-tagline { font-size: 15px; line-height: 24px; color: var(--primary); }

/* Right-hand info blocks */
.masthead-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.info-block { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.info-ico { color: var(--primary); display: grid; place-items: center; }
.info-ico svg { display: block; }
.info-text { display: flex; flex-direction: column; }
.info-divider { width: 1px; height: 34px; background: rgba(59, 31, 17, .35); }
.info-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: .3px;
}
.info-value { font-size: 13px; color: var(--primary); }
.info-phone {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

/* ------------------------------------------------------------- nav bar --- */

.navbar {
  height: var(--nav-h);
  background: var(--primary);
  position: relative;
  z-index: 3;
}

.navbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

/* "Danh mục sản phẩm" trigger — the left 264px block */
.cat-trigger {
  width: 265px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 15px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--cat-trigger-bg);
  transition: filter var(--t-fast);
}
.cat-trigger:hover { filter: brightness(1.04); }
.cat-trigger .bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.cat-trigger .bars i {
  display: block;
  width: 16px;
  height: 2px;
  background: #fff;
}

/* Search */
.header-search {
  position: relative;
  flex: 0 0 500px;
  width: 500px;
  display: block;
  margin-left: 59px;   /* measured: search starts at x=478, trigger ends at 415 */
  background: rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  height: 35px;
}
/* The source input itself is the full 500px; the lens button overlays it. */
.header-search input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 34px 0 10px;
  font-size: var(--fs-small);
  color: var(--ink);
}
.header-search input::placeholder { color: rgba(10, 10, 10, .55); }
.header-search input:focus { outline: 0; }
.header-search button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34px;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: color var(--t-fast);
}
.header-search button:hover { color: #fff; }

/* Primary nav links */
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 10px;
  flex-shrink: 0;   /* the cart button must stay inside the container */
}
.nav-links a {
  flex-shrink: 0;
  font-size: var(--fs-nav);
  font-weight: 700;
  line-height: 16px;
  height: 36px;
  letter-spacing: .256px;
  text-transform: uppercase;
  color: #fff;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--t-fast);
}
.nav-links a:hover { color: var(--header-from); }
/* The source keeps the current item white like the rest. */
.nav-links a.is-active { color: #fff; }

/* Cart button */
.cart-btn {
  position: relative;
  flex-shrink: 0;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  padding: 8px 0;
  transition: color var(--t-fast);
}
.cart-btn:hover { color: var(--header-from); }
.cart-count {
  position: absolute;
  top: -2px;
  right: -10px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--header-from);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
.cart-count[hidden] { display: none; }

/* Mobile header — hidden at desktop; the media query below reveals it.
   Source measures 100px total: a 30px #f4f4f4 strip above a 70px gradient bar
   holding a centred logo with the menu trigger and cart at the edges. */
.mobile-topbar {
  display: none;
  height: 30px;
  background: #f4f4f4;
}
.mobile-bar {
  height: 70px;
  background: var(--header-grad);
  display: none;
  align-items: center;
  padding: 0 15px;
}
.mobile-bar .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}
.mobile-bar .brand-badge {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
}
.mobile-bar .icon-btn {
  width: 24px; height: 49px;
  display: grid; place-items: center;
  color: var(--primary);
  flex-shrink: 0;
}
.mobile-bar .icon-btn.cart { margin-left: auto; }
.mobile-bar .bars { display: flex; flex-direction: column; gap: 4px; }
.mobile-bar .bars i { display: block; width: 20px; height: 2px; background: var(--primary); }

/* ------------------------------------------------- vertical category menu - */

/* The hero's left rail. On desktop it overlays the hero section. */
.cat-menu {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
/* On desktop the navbar's gold trigger doubles as the menu header, so the
   menu body must not repeat it (the source shows the list starting flush). */
@media (min-width: 850px) {
  .cat-menu-head { display: none; }
}
.cat-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--header-grad);
  letter-spacing: .3px;
}
.cat-menu-head .bars { display: flex; flex-direction: column; gap: 3px; }
.cat-menu-head .bars i { display: block; width: 16px; height: 2px; background: var(--primary); }

.cat-menu ul { position: relative; }
.cat-menu > ul > li { border-bottom: 1px solid var(--line); }
.cat-menu > ul > li:last-child { border-bottom: 0; }

.cat-menu a.cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  font-size: 14px;
  line-height: 1.45;
  min-height: 33.5px;   /* 11 rows + borders = the source's 380px menu body */
  color: #2f2f2f;
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}
.cat-menu a.cat-link:hover {
  background: #faf7f4;
  color: var(--primary);
  padding-left: 22px;
}
/* The source draws a small filled triangle before the label. */
.cat-menu .caret {
  order: -1;
  width: 0;
  height: 0;
  border-left: 6px solid #3a3a3a;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  flex-shrink: 0;
  transition: border-left-color var(--t-fast);
}
.cat-menu .caret svg { display: none; }
.cat-menu li:hover > a .caret { border-left-color: var(--primary); }
.cat-menu li:hover > a .caret { transform: translateX(2px); opacity: 1; }

/* Flyout submenu */
.cat-menu .submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 20;
  max-height: 70vh;
  overflow-y: auto;
}
.cat-menu li.has-sub:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.cat-menu .submenu a {
  display: block;
  padding: 7px 18px;
  font-size: 13px;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.cat-menu .submenu a:hover { background: #faf7f4; color: var(--primary); }

/* ------------------------------------------------------------- hero ----- */

.hero {
  display: flex;
  gap: 20px;
}
/* The 6px offset only exists in the desktop layout. */
@media (min-width: 850px) {
  .hero { padding-top: 6px; }
}

/* The hero row is collapsed on the source site — no container gutters. */
.hero-section > .container { padding-left: 0; padding-right: 0; }

/* On desktop the category menu sits beside the slider, per the source layout
   (menu x=151 w=264, slider x=435 w=853, section 433 tall). The banner itself
   is a 2:1 box (the source uses padding-top: 50%). */
.hero-slider {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #f7f7f7;
  height: 427px;
}

.hero-track {
  display: flex;
  height: 100%;
  transition: transform var(--t-slow);
}
.hero-slide { flex: 0 0 100%; position: relative; }
/* The source focuses the banner at 58% 63% rather than the centre. */
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-img-mobile { display: none; }
.hero-slide .banner-link { position: absolute; inset: 0; }

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: var(--primary);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
  z-index: 4;
}
.hero-slider:hover .hero-nav { opacity: 1; }
.hero-nav:hover { background: #fff; }
.hero-nav.prev { left: 12px; }
.hero-nav.next { right: 12px; }

.hero-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}
.hero-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .15);
  transition: background var(--t-fast), transform var(--t-fast);
}
.hero-dots button.is-active { background: #fff; transform: scale(1.15); }

/* --------------------------------------------------------- mobile drawer - */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
  z-index: 998;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 86vw;
  background: #fff;
  transform: translateX(-100%);
  transition: transform var(--t);
  z-index: 999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--header-grad);
}
.drawer-head .brand-name { font-size: 20px; }
.drawer-close { color: var(--primary); display: grid; place-items: center; }
.drawer nav { padding: 8px 0; }
.drawer nav a {
  display: block;
  padding: 12px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.drawer nav a:hover { background: #faf7f4; color: var(--primary); }
.drawer .drawer-section-title {
  padding: 14px 18px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--primary);
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 849px) {
  .site-header .masthead,
  .site-header .navbar { display: none; }
  .site-header .mobile-bar { display: flex; position: relative; }
  .site-header .mobile-topbar { display: block; }

  .hero { flex-direction: column; }
  .cat-menu { display: none; }

  /* The source swaps in a different, 800x480 hero on mobile and sizes the
     banner as a 2:1 box (padding-top: 50%). */
  .hero-slider { height: auto; }
  .hero-slide { aspect-ratio: 2 / 1; }
  .hero-img-desktop { display: none; }
  .hero-img-mobile { display: block; }
}

/* ============================================================================
   Overrides measured against the source at 1440px.
   The source's white category menu has NO inner header band (the gold navbar
   trigger is the header) and puts the disclosure caret BEFORE the label.
   ========================================================================= */
@media (min-width: 850px) {
  .cat-menu-head { display: none !important; }
  /* 11 rows fill the source's 426px menu body */
  .cat-menu a.cat-link { min-height: 0; padding: 9px 18px; }
}
.cat-menu a.cat-link .caret { order: -1; }

/* ---- source-parity overrides (appended last so they win) ---- */
@media (min-width: 850px) {
  .cat-menu-head { display: none !important; }
  .cat-menu > ul > li > a.cat-link { min-height: 0; padding: 9px 18px; }
}
/* The source puts the disclosure caret BEFORE the label. */
.cat-menu a.cat-link .caret { order: -1; }

/* 11 menu rows + borders must total the source's 426px body. */
@media (min-width: 850px) {
  .cat-menu > ul > li > a.cat-link { padding: 8.4px 18px; }
}

/* ---------------------------------------------------------------------------
   Narrow desktop / small laptop (850–1150px). The navbar is a fixed 265px
   trigger + 500px search + nav links; below ~1150px those fixed widths push
   the nav links past the viewport edge. Shrink the search and the trigger gap
   so the whole bar fits without a horizontal scrollbar.
   ------------------------------------------------------------------------- */
@media (min-width: 850px) and (max-width: 1150px) {
  .cat-trigger { width: 210px; font-size: 13px; }
  .header-search { flex: 1 1 auto; width: auto; min-width: 160px; margin-left: 16px; }
  .nav-links { gap: 6px; }
  .nav-links a { font-size: 11.5px; letter-spacing: 0; }
  .cart-btn { margin-left: 6px; }
  .masthead .brand-text .brand-name { font-size: 28px; }
  .masthead .brand-text .brand-eyebrow { font-size: 13px; }
  .masthead .brand-text .brand-tagline { font-size: 13px; }
  .masthead-info { gap: 14px; }
  .masthead-info .info-phone { font-size: 17px; }
}