.announcement-bar--inner{padding:0 15px;max-width:1440px;margin-left:auto;margin-right:auto}@media only screen and (min-width:768px){.announcement-bar--inner{padding:0 50px}}.announcement-bar-section{position:relative;z-index:52}.header-section+.announcement-bar-section{z-index:49}.announcement-bar{background:var(--color-announcement-bar-bg, var(--color-accent));color:var(--color-announcement-bar-text, #fff);line-height:1;padding:14px 0}.announcement-bar--inner{height:100%;display:flex;align-items:center;max-width:none;white-space:nowrap;font-size:calc(var(--font-announcement-scale, 1) * 13px);font-weight:400;overflow:hidden}.announcement-bar--marquee.direction-left>div{animation:marquee-left var(--marquee-speed) linear infinite}.announcement-bar--marquee.direction-right>div{animation:marquee-right var(--marquee-speed) linear infinite}.announcement-bar--marquee>div{display:flex;align-items:center;flex-shrink:0;will-change:transform}.announcement-bar--marquee:hover>div{animation-play-state:paused}.announcement-bar--marquee .announcement-bar--item:empty{display:none}.announcement-bar--carousel{text-align:center}.announcement-bar--carousel .carousel{width:100%;max-width:640px;margin:0 auto}.announcement-bar--carousel .carousel__slide{width:100%;display:none;white-space:normal;text-align:center}.announcement-bar--carousel .carousel__slide:first-child{display:block}.announcement-bar--carousel .carousel .flickity-viewport:before{content:"";display:block;position:absolute;top:0;left:0;width:50px;height:100%;z-index:30;pointer-events:none;background:linear-gradient(to left,rgba(0,0,0,0) 0,var(--color-announcement-bar-bg, var(--color-accent)) 50px,var(--color-announcement-bar-bg, var(--color-accent)) 100%)}.announcement-bar--carousel .carousel .flickity-viewport:after{content:"";display:block;position:absolute;top:0;right:0;width:50px;height:100%;z-index:30;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,0) 0,var(--color-announcement-bar-bg, var(--color-accent)) 50px,var(--color-announcement-bar-bg, var(--color-accent)) 100%)}.announcement-bar--carousel .carousel .flickity-viewport .carousel__slide{display:block;overflow:hidden}.announcement-bar--carousel .carousel .flickity-slider{display:flex;align-items:center}.announcement-bar--carousel .flickity-nav{display:flex;width:42px;height:42px;margin-top:-21px;opacity:1;background:var(--color-announcement-bar-bg, var(--color-accent));box-shadow:none}.announcement-bar--carousel .flickity-nav svg path{stroke:var(--color-announcement-bar-text, #fff)}.announcement-bar--item{display:inline-flex;align-items:center;padding:0 20px;letter-spacing:.03em}.announcement-bar--item svg{margin-right:12px;height:14px;fill:var(--color-announcement-bar-text, #fff)}.announcement-bar--item a{color:var(--color-announcement-bar-text, #fff)}@keyframes marquee-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes marquee-right{0%{transform:translate(-100%)}to{transform:translate(0)}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/announcement-bar.css.map?v=101285614786679419291762340992 */
.mobile-menu .sub-menu{transition:all .25s cubic-bezier(.104,.204,.492,1)}.mobile-menu-drawer{position:absolute;top:100%;left:0;width:100vw;background:var(--color-header-bg, var(--bg-body, #fff));height:calc(100vh - calc(100% + var(--header-offset, 0px)));display:block;border-top:1px solid var(--color-header-border, var(--color-border));overflow-x:hidden;overflow-y:scroll;text-align:left;opacity:0;visibility:hidden;will-change:opacity,transform;transform:translateY(50px);transition:opacity .25s cubic-bezier(.104,.204,.492,1),transform .25s cubic-bezier(.104,.204,.492,1);scrollbar-width:none;--color-price: var(--color-header-text);--color-accent: var(--color-header-links);--color-accent-rgb: var(--color-header-links-rgb)}.mobile-menu-drawer::-webkit-scrollbar{display:none}@supports (height: 100dvh){.mobile-menu-drawer{height:calc(100dvh - calc(100% + var(--header-offset, 0px)))}}.mobile-menu-drawer.active{transform:translateY(0);opacity:1;visibility:visible}.mobile-menu-drawer--inner{min-height:100%;position:relative;display:flex;flex-direction:column}.mobile-menu-drawer .thb-mobile-menu-footer{padding:15px;margin-top:auto;position:sticky;bottom:0;left:0;background:var(--color-header-bg, var(--bg-body, #fff))}@media only screen and (min-width:768px){.mobile-menu-drawer .thb-mobile-menu-footer{padding:30px 50px}}.mobile-menu-drawer .thb-mobile-menu-footer .thb-localization-forms{text-align:left}.mobile-menu-drawer .thb-mobile-menu-footer .shopify-localization-form>div{margin-left:0;margin-right:20px}.mobile-menu-drawer .thb-mobile-menu-footer .shopify-localization-form .select{margin-bottom:0;padding-right:14px}.mobile-menu-drawer .thb-mobile-menu-footer .shopify-localization-form .select-arrow{right:0}.mobile-menu-drawer .thb-mobile-menu-footer .shopify-localization-form .select-arrow svg path{stroke:var(--color-header-text, --color-body)}.mobile-menu-drawer .thb-mobile-menu-footer .shopify-localization-form select{font-size:.875rem;white-space:nowrap;text-overflow:ellipsis;color:var(--color-header-text, --color-body)}.mobile-menu-drawer .thb-mobile-menu-footer .thb-mobile-account-link{display:flex;align-items:center;font-size:.875rem;color:var(--color-header-links, --color-accent)}.mobile-menu-drawer .thb-mobile-menu-footer .thb-mobile-account-link svg{margin-right:12px;height:14px;width:auto}.mobile-menu-drawer .thb-mobile-menu-footer .thb-mobile-account-link svg path{fill:var(--color-header-links, --color-accent)}[dir=rtl] .mobile-menu-drawer .thb-mobile-menu-footer .thb-mobile-account-link svg{margin-right:0;margin-left:12px}.no-js .mobile-menu-drawer .thb-mobile-menu-footer .thb-mobile-account-link{margin-left:auto}.mobile-menu-drawer .mega-menu-promotion{display:block;width:calc(100% + 30px);margin:0 -15px}.mobile-menu-drawer .mega-menu-promotion--cover{padding:0 30px 30px}@media only screen and (min-width:768px){.mobile-menu-drawer .mega-menu-promotion--cover{padding:0 50px 50px}}.mobile-menu-drawer .mega-menu-promotion img{transform:scale(1)}.mobile-menu-drawer .mega-menu-promotion.mega-menu-promotion--small{width:100%;margin:0 0 10px;display:block}.mobile-menu-drawer .mega-menu-promotion.mega-menu-promotion--small .mega-menu-promotion--cover{padding:8px 15px}.mobile-menu{list-style:none;margin:0 0 20px;overflow:hidden;width:100%;padding:0 15px}@media only screen and (min-width:768px){.mobile-menu{padding:0 50px}}.mobile-menu li .link-container{display:flex;align-items:center;min-height:60px;padding:5px 0;font-size:1.5rem;letter-spacing:.05em;border-bottom:1px solid var(--color-header-border, var(--color-border));color:var(--color-header-links, --color-accent)}.mobile-menu li .link-container .link-forward{height:100%;display:flex;align-items:center;line-height:59px;margin-left:auto}[dir=rtl] .mobile-menu li .link-container .link-forward{transform:rotate(180deg)}.mobile-menu li .link-container .link-forward svg path{stroke:var(--color-header-links, --color-accent)}.mobile-menu li .link-container .parent-link{width:100%;display:flex;align-items:center;min-height:50px}.no-js .mobile-menu li .link-container[open]>.sub-menu{transform:translate(0);visibility:visible}.mobile-menu li .link-container[open].menu-opening>.sub-menu{transform:translate(0);visibility:visible}.mobile-menu .parent-link-back button{width:100%;font-size:.875rem;height:50px;display:flex;align-items:center;color:var(--color-header-links, --color-accent)}.mobile-menu .parent-link-back button svg{margin-right:10px}.mobile-menu .parent-link-back button svg path{stroke:var(--color-header-links, --color-accent)}[dir=rtl] .mobile-menu .parent-link-back button svg{margin:0 0 0 10px;transform:rotate(180deg)}.mobile-menu .sub-menu{width:100%;min-height:100%;position:absolute;top:0;left:0;z-index:10;background:var(--color-header-bg, var(--bg-body, #fff));transform:translate(100%);margin-left:0;list-style:none;padding:0 15px;visibility:hidden}@media only screen and (min-width:768px){.mobile-menu .sub-menu{padding:0 50px}}.mobile-menu .sub-menu .sub-menu{z-index:12}[dir=rtl] .mobile-menu .sub-menu{transform:translate(-100%)}.mobile-menu .mega-menu-sidebar--content{padding:0;border:0;list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 10px}.mobile-secondary-menu{list-style:none;margin:0 0 30px;font-size:.875rem;padding:0 15px}@media only screen and (min-width:768px){.mobile-secondary-menu{padding:0 50px}}.mobile-secondary-menu a{display:block;font-size:inherit;color:var(--color-header-links, --color-accent)}
/*# sourceMappingURL=/cdn/shop/t/7/assets/mobile-menu.css.map?v=114205156047321405611755289753 */

/* Ensure the desktop mega-menu dropdown is legible on every page — the original
   theme's tan background + readable text color for .sub-menu is scoped behind a
   body.template-collection class that only exists on real Shopify page templates,
   so it never applies here. Force it explicitly instead. */
.thb-full-menu .sub-menu {
  background: #f6eddb;
}
.thb-full-menu .sub-menu li a {
  color: #846e47 !important;
}
.thb-full-menu .sub-menu li a:before {
  background-color: #846e47 !important;
}

/* Live-site theme-header behavior: on pages with a full-bleed hero banner
   directly under the header (collection pages use .Inner_banner_Sec), the
   header is position:fixed + fully transparent so the banner shows through
   with white nav/logo, until scrolled past the announcement bar (.is-sticky),
   at which point it falls back to the normal solid/relative header. .header
   was previously hardcoded to a solid cream background in base-style.css,
   which always won and made this page always render with a solid header —
   overriding that back to the CSS-variable-driven background here so the
   transparent state (set below) can actually take effect. */
.header {
  background: var(--color-header-bg, var(--bg-body, #fff));
}
/* The live theme reserves flow space for the fixed header via
   body:not(.template-collection) .header-section{height:114/104/80px} — a real
   Shopify template class this app doesn't have, so that selector always
   matched here (body never has .template-collection) and reserved a solid
   114px band even on pages where the header should float transparently over
   the hero with zero reserved space. Force it back to 0 on those pages. */
body:has(.Inner_banner_Sec) .header-section {
  height: 0 !important;
}
.header-section {
  position: sticky;
  top: 0;
  z-index: 30;
}
body:has(.Inner_banner_Sec) .header:not(.is-sticky) {
  position: fixed;
  left: 0;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  --color-accent: #fff;
  --color-header-links: #fff;
  --color-body: #fff;
}
body:has(.Inner_banner_Sec) .header:not(.is-sticky) .thb-full-menu > li > a,
body:has(.Inner_banner_Sec) .header:not(.is-sticky) .logolink.text-logo {
  color: #fff;
}
body:has(.Inner_banner_Sec) .header:not(.is-sticky) .logolink .logoimg {
  opacity: 0;
}
body:has(.Inner_banner_Sec) .header:not(.is-sticky) .logolink .logoimg--light {
  opacity: 1;
}
.header .logolink .logoimg--light {
  position: absolute;
  top: 0;
  left: 0;
  /* Bug đã sửa: .logoimg (regular, position:static) và .logoimg--light (position:absolute)
     PHẢI dùng đúng 1 giá trị width giống hệt nhau — chỉ cần khác nhau (vd "auto" so với "100%")
     là có thể ra kích thước LỆCH nhau vài px, vì "auto" trên phần tử replaced percentage-width
     có thể resolve khác nhau tuỳ context (static trong flex cha auto-size thường fallback theo
     tỉ lệ khung hình ảnh gốc, absolute thì resolve % thẳng theo containing block) — đã tận mắt
     verify qua getBoundingClientRect() ở 2 vị trí .logolink khác nhau trong header (menu-logo-
     item giữa nav desktop vs logo riêng cho mobile ở đầu .columns): dùng "auto" cho 1 bên +
     "100%" cho bên kia ra ĐÚNG ở vị trí này nhưng LỆCH ở vị trí kia (64.72px so với 70px). Set
     CẢ HAI thành "100%" (khớp .logolink .logoimg{width:100%} ở dưới file) để browser resolve
     giống hệt nhau bất kể context, không phụ thuộc "auto" có tình cờ trùng khớp hay không. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* No separate white-logo asset exists — recolor the same dark logo file. */
  filter: brightness(0) invert(1);
}
.logolink .logoimg {
  transition: opacity 0.25s ease;
}

/* Cart drawer (mounted here in HeaderComponent, so its CSS needs to live
   somewhere loaded on every page too — header.css already is).

   .gift-checkbox is duplicated from product-detail.css (that file only loads
   on the product page — this is the same invented stand-in used there too;
   the real launcher button below replaces it in the drawer). */
.gift-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: var(--font-body-bold-weight, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-body);
  margin-top: 5px;
}
.gift-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--color-body);
  cursor: pointer;
}

/* base-app.css only ports `.cart-drawer .accordion{border-top:0;padding:0 30px}`
   (its padding is itself overridden to `0 20px` by base-style.css's higher-
   specificity `body .cart-drawer .accordion`) plus the summary font — the
   border-bottom/margin-bottom/+‑icon rules that make it read as a collapsible
   row live unscoped in every *other* page's own CSS file (contact.css,
   product-detail.css, home-service.css, wholesale-orders.css), none of which
   load here. Re-porting just those missing pieces, scoped to .cart-drawer, so
   the drawer's Discounts row collapses/expands correctly on any page —
   border-top stays 0 (already correct via base-app.css, verified against the
   live reference site) so it doesn't double up with the note toggle's own
   border-bottom above it. */
.cart-drawer .accordion {
  display: block;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 25px;
}
.cart-drawer .accordion summary {
  width: 100%;
  list-style: none;
  position: relative;
  font-weight: var(--font-body-bold-weight, 600);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 14px 40px 14px 0;
  cursor: pointer;
  text-transform: uppercase;
}
.cart-drawer .accordion summary span {
  position: absolute;
  top: calc(50% - 5.5px);
  right: 0;
  width: 12px;
  height: 12px;
  display: block;
}
.cart-drawer .accordion summary span:before,
.cart-drawer .accordion summary span:after {
  content: "";
  display: block;
  position: absolute;
  background: var(--color-body);
}
.cart-drawer .accordion summary span:before {
  width: 1px;
  height: 12px;
  top: 0;
  left: 5.5px;
  will-change: transform;
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1);
}
.cart-drawer .accordion summary span:after {
  width: 12px;
  height: 1px;
  top: 5.5px;
  left: 0;
}
.cart-drawer .accordion details[open] summary span:before {
  transform: rotate(90deg);
}

/* Bug đã sửa: CSS gốc (base-app.css, ported từ theme gốc) chỉ hiện .mobile-menu-drawer khi có
   thêm class ".js"/".no-js" trên <html>/<body> (".js .mobile-toggle-wrapper[open].active
   .mobile-menu-drawer{...}" / ".no-js .mobile-toggle-wrapper[open] .mobile-menu-drawer{...}") —
   theme gốc tự thêm class này bằng 1 inline script rất sớm trong <head> (progressive
   enhancement kiểu Modernizr), project Next.js này chưa từng port lại script đó nên <html>
   không bao giờ có ".js" lẫn ".no-js". Hệ quả: bấm nút hamburger (.mobile-toggle-wrapper) toggle
   đúng attribute "open" (xác nhận qua DOM), nhưng .mobile-menu-drawer vẫn mãi opacity:0;
   visibility:hidden vì không rule nào match — nhìn như "bấm không ăn". Thêm rule KHÔNG phụ
   thuộc .js/.no-js (React app này luôn tương đương ".js", không cần phân biệt) để hiện đúng
   khi <details> mở, không đụng tới toàn bộ phần animation/CSS khác đã ported sẵn. */
.mobile-toggle-wrapper[open] .mobile-menu-drawer {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-toggle-wrapper[open] .mobile-toggle span:nth-child(1) {
  transform: rotate(45deg) translateY(-3px);
}
.mobile-toggle-wrapper[open] .mobile-toggle span:nth-child(2) {
  opacity: 0;
}
.mobile-toggle-wrapper[open] .mobile-toggle span:nth-child(3) {
  transform: rotate(-45deg) translateY(1px);
}

/* Cùng bug .js/.no-js ở trên, nhưng cho panel submenu con (bấm "OILS"/"Perfumes"... trong mobile
   drawer trượt sang panel con) — CSS gốc chỉ hiện panel qua ".no-js .mobile-menu li
   .link-container[open]>.sub-menu{...}" (cần ".no-js" trên html, không bao giờ có) hoặc
   ".mobile-menu li .link-container[open].menu-opening>.sub-menu{...}" (cần thêm class
   ".menu-opening" mà code React ở đây không có gắn). Thêm rule chỉ cần đúng "[open]" (đã tự set
   qua native <details> khi bấm) để hiện, cùng cách tiếp cận với .mobile-menu-drawer ở trên. */
.mobile-menu li .link-container[open] > .sub-menu {
  transform: translate(0);
  visibility: visible;
}

/* Bấm nút "back" (.parent-link-back--button, xem closeMobileSubmenu() ở header.component.js) —
   trượt panel về bên phải TRƯỚC khi thật sự bỏ "open" (JS đợi transitionend rồi mới
   removeAttribute), vì bỏ "open" ngay lập tức sẽ bị native <details> ẩn nội dung qua
   display:none tức thì, cắt ngang animation. Cần specificity >= rule "[open] > .sub-menu" ở
   trên (thêm 1 class ".is-closing" là đủ thắng, 5 so với 4) để ghi đè lại translate(0) trong
   lúc "open" vẫn còn true suốt quá trình animation. */
.mobile-menu li .link-container[open] > .sub-menu.is-closing {
  transform: translate(100%);
}

/* Override base-app.css (ported nguyên văn, không sửa trực tiếp) — object-position:left canh
   logo lệch trái trong box, đổi sang initial (= 50% 50%, canh giữa) theo yêu cầu. */
.logolink .logoimg {
  object-position: initial;
  width: 100%;
}