/* === Header === */
.header-nav.header-nav-main {
  height: 100%;
}

#header .nav-left {
  justify-content: center;
}

.live-search-results .search-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.searchform-wrapper.form-flat .flex-col:last-of-type {
  margin: 0;
  background-color: transparent;
  padding: 0;
}

#header .header-search-form-wrapper form .flex-row {
  flex-direction: row-reverse;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
}

#header .header-search-form-wrapper form .flex-row,
#header .header-search-form-wrapper form .flex-row * {
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#header .header-search-form-wrapper,
#header .header-search-form-wrapper form,
#header .header-search-form-wrapper .searchform-wrapper,
#header .header-search-form-wrapper .searchform {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#header .header-search-form-wrapper form .flex-row {
  overflow: hidden !important;
}

#header .header-search-form-wrapper form .flex-row > .flex-col {
  background: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header .header-search-form-wrapper form .flex-row > .flex-col:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

#header .header-search-form-wrapper form .flex-row input {
  border-radius: 0px;
  background-color: transparent;
  border: unset;
  color: var(--primary-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

#header .header-search-form {
  min-width: 400px;
}

#header .header-top-btn {
  background-color: var(--primary-blue);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  display: flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  flex-wrap: nowrap;
  transition: background-color 0.2s ease;
}

#header .header-top-btn:hover {
  background-color: var(--primary-blue-hover);
}

#header .flex-right .header-nav.nav {
  justify-content: space-around;
  flex-wrap: nowrap;
}

.header-nav .account-item > a {
  color: var(--primary-text) !important;
  font-size: 13px;
  line-height: 18px !important;
  font-weight: 500;
  text-transform: none;
  background-color: transparent;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header-nav .account-item > a:hover {
  background-color: var(--surface-alt);
  color: var(--primary-blue) !important;
}

.header-nav .account-item > a .material-symbols-outlined {
  margin-right: 6px;
  font-size: 20px;
}

.header-nav .cart-item > a {
  color: #fff !important;
  font-size: 13px;
  line-height: 18px !important;
  font-weight: 500;
  text-transform: none;
  background-color: var(--primary-blue);
  padding: 7px 12px;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}

.header-nav .cart-item > a:hover {
  background-color: var(--primary-blue-hover);
}

.header-nav .cart-item > a .material-symbols-outlined {
  margin-right: 6px;
  font-size: 18px;
}

.header-nav .cart-item .nav-dropdown {
  border-radius: var(--radius-md);
  min-width: 420px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-default);
}

.button.wc-backward {
  border-radius: var(--radius-md);
}

.woocommerce-mini-cart__total {
  align-items: center;
}

.woocommerce-mini-cart__total .woocommerce-Price-amount {
  color: var(--accent-danger);
  font-size: 18px;
  font-weight: 700;
}

.ux-mini-cart-footer .woocommerce-mini-cart__buttons .button {
  border-radius: var(--radius-md);
}

/* Breadcrumb band — slim, transparent, blends with page below */
.page-title {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.page-title-inner {
  padding: 10px 0 6px !important;
  min-height: 0 !important;
}
.page-title-inner .container,
.page-title-inner .row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   PHARMACITY-STYLE HEADER REDESIGN
   2-tier layout matching Pharmacity exactly:
     1) Top utility bar (WHITE) — Tải app, Hotline, Deal hot, etc.
     2) Main bar (SOLID BLUE) — logo + Danh mục + search + icons
   ============================================================ */

/* === Tier 1: Top utility bar (WHITE) === */
.cms-pm-topbar {
  background: #fff !important;
  color: var(--primary-text) !important;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid var(--border-default);
}
.cms-pm-topbar * { box-sizing: border-box; }
.cms-pm-topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  min-height: 36px;
  padding: 0 16px;
  max-width: 1400px;
  margin: 0 auto;
}
.cms-pm-topbar ul.cms-pm-topbar-nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  flex-wrap: nowrap !important;
}
.cms-pm-topbar ul.cms-pm-topbar-nav > li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
  position: relative;
}
.cms-pm-topbar ul.cms-pm-topbar-nav > li::before,
.cms-pm-topbar ul.cms-pm-topbar-nav > li::after,
.cms-pm-topbar ul.cms-pm-topbar-nav > li::marker {
  display: none !important;
  content: none !important;
}
/* Vertical dot separator between items in the SAME group only */
.cms-pm-topbar ul.cms-pm-topbar-nav > li + li {
  position: relative;
}
.cms-pm-topbar ul.cms-pm-topbar-nav > li + li::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: #d1d5db;
  border-radius: 50%;
}
.cms-pm-topbar .cms-pm-topbar-item {
  padding: 8px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
  font-weight: 500;
  border: none !important;
}

.cms-pm-topbar a {
  color: var(--primary-text) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 500 !important;
  transition: color 0.15s ease;
  line-height: 1.4 !important;
}
.cms-pm-topbar a:hover { color: var(--primary-blue) !important; }
.cms-pm-topbar .material-symbols-outlined {
  font-size: 17px !important;
  font-variation-settings: 'FILL' 0 !important;
  color: var(--second-text) !important;
  margin: 0 !important;
}
.cms-pm-topbar a:hover .material-symbols-outlined { color: var(--primary-blue) !important; }
.cms-pm-topbar-hotline a strong {
  font-weight: 700 !important;
  color: var(--primary-text) !important;
  margin-left: 4px;
  letter-spacing: 0.3px;
}
.cms-pm-topbar-hotline a:hover strong { color: var(--primary-blue) !important; }
.cms-pm-topbar-badge {
  display: inline-flex !important;
  align-items: center;
  background: var(--accent-success) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-left: 6px;
  text-transform: uppercase;
  line-height: 1.2 !important;
  height: 16px;
}
.cms-pm-topbar-fire {
  font-size: 14px;
  margin-left: 4px;
  display: inline-block;
}

/* === Tier 2: Main header — SOLID PHARMACITY BLUE band (focal point) === */
#header,
#header .header-main,
#header .header-wrapper,
#header .header-bg-container,
#header .header-bg-color {
  background-color: var(--primary-blue) !important;
  background-image: none !important;
}
#header {
  box-shadow: 0 4px 16px rgba(11, 31, 68, 0.12);
}
#header .header-main {
  border-bottom: none !important;
  min-height: 80px;
  padding: 12px 0 !important;
}
#header .header-main .header-inner {
  align-items: center !important;
  gap: 20px;
}
#header .header-main .container,
#header .header-main .row {
  max-width: 1400px;
}

/* Logo: white-variant uploaded — sits directly on the blue header.
   No capsule, no filter, just clean and big. */
#header #logo {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}
#header #logo a,
#header #logo .header-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#header #logo img {
  max-height: 64px !important;
  height: 64px !important;
  width: auto !important;
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}
@media (max-width: 849px) {
  /* Force logo to never exceed available width.
     Viewport - 90px reserves space for menu button + minimal padding. */
  #header #logo {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 90px) !important;
  }
  #header #logo a,
  #header #logo .header-logo-link {
    max-width: 100% !important;
    min-width: 0 !important;
    display: inline-block !important;
  }
  #header #logo img {
    max-height: 46px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
}

/* === Search wrapper: row layout with Danh mục button inside === */
#header .header-search-form,
#header .header-search-form-wrapper {
  min-width: 0;
  max-width: 720px;
  width: 100%;
  flex: 1 1 auto;
}
#header .header-search-form-wrapper form {
  margin: 0 !important;
}
#header .searchform-wrapper.form-flat .flex-row,
#header .header-search-form-wrapper form .flex-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 48px !important;
  margin: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* The injected "Danh mục" button — WHITE pill on the blue header (Pharmacity style) */
.cms-pm-danhmuc-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  color: var(--primary-blue) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 18px !important;
  height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-right: 10px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: background 0.15s ease;
}
.cms-pm-danhmuc-btn:hover {
  background: var(--primary-blue-soft) !important;
}
.cms-pm-danhmuc-btn.is-open {
  background: var(--primary-blue-soft) !important;
}
.cms-pm-danhmuc-btn .material-symbols-outlined,
.cms-pm-danhmuc-btn .cms-pm-danhmuc-ico {
  font-size: 22px !important;
  color: var(--primary-blue) !important;
  font-variation-settings: 'FILL' 1 !important;
}
.cms-pm-danhmuc-btn .cms-pm-danhmuc-chev {
  font-size: 20px !important;
  color: var(--primary-blue) !important;
  opacity: 0.7;
  font-variation-settings: 'FILL' 0 !important;
}

/* The search-input cell — white pill that fills remaining width */
#header .header-search-form-wrapper form .flex-row .flex-col:not(.cms-pm-danhmuc-btn) {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Group all native Flatsome flex-cols (input + submit) inside a single white pill */
#header .header-search-form-wrapper form .flex-row {
  background: #fff !important;
  border-radius: var(--radius-md) !important;
  height: 48px !important;
  overflow: hidden !important;
}
#header .header-search-form-wrapper form .flex-row > .cms-pm-danhmuc-btn ~ * {
  background: #fff !important;
}
/* If danh muc button has been injected, ensure parent row still flexes */
#header .header-search-form-wrapper form .flex-row[data-cms-pm-danhmuc] {
  background: transparent !important;
  border-radius: 0 !important;
}
/* The whole search "pill" group needs a visible blue border on white bg */
#header .header-search-form-wrapper form .flex-row[data-cms-pm-danhmuc] > *:not(.cms-pm-danhmuc-btn) {
  background: #fff !important;
}
#header .header-search-form-wrapper form .flex-row[data-cms-pm-danhmuc] > *:not(.cms-pm-danhmuc-btn):first-of-type {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  padding-left: 14px;
}

#header .header-search-form-wrapper form .flex-row > .flex-col,
#header .header-search-form-wrapper form .flex-row > .flex-col > * {
  height: 100% !important;
}

/* Wrap the search input + submit in a faux pill with blue border */
#header .header-search-form-wrapper form .flex-row {
  position: relative;
}
#header .header-search-form-wrapper form .flex-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--cms-pm-danhmuc-w, 0px));   /* not used; visual ring below instead */
  right: 0;
  pointer-events: none;
  border-radius: var(--radius-md);
  display: none;
}

#header .header-search-form-wrapper form input[type="search"],
#header .header-search-form-wrapper form .search-field {
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--primary-text) !important;
  padding: 0 18px !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  transition: box-shadow 0.15s ease;
}
#header .header-search-form-wrapper form input[type="search"]:focus,
#header .header-search-form-wrapper form .search-field:focus {
  outline: none !important;
}
#header .header-search-form-wrapper form input::placeholder {
  color: var(--muted-text) !important;
  font-weight: 400 !important;
}

/* Submit icon — same white background as input (continues the pill), muted icon */
#header .header-search-form-wrapper form button[type="submit"],
#header .header-search-form-wrapper form .ux-search-submit {
  height: 100% !important;
  background: #fff !important;
  border: none !important;
  color: var(--muted-text) !important;
  box-shadow: none !important;
  padding: 0 18px !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background 0.15s ease;
}
#header .header-search-form-wrapper form button[type="submit"]:hover,
#header .header-search-form-wrapper form .ux-search-submit:hover {
  background: var(--surface-alt) !important;
}
#header .header-search-form-wrapper form .icon-search {
  color: var(--primary-blue) !important;
  font-size: 20px !important;
}
#header .header-search-form-wrapper form .icon-search::before {
  font-size: 22px !important;
  color: var(--primary-blue) !important;
}

/* Focus ring on the whole search pill — soft white halo */
#header .header-search-form-wrapper form .flex-row:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--radius-md) !important;
}

/* === Right side: account + cart on BLUE header === */
.header-nav .account-item,
.header-nav .cart-item {
  margin: 0 !important;
}
.header-nav .account-item > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background-color: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  transition: background-color 0.15s ease;
}
.header-nav .account-item > a:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.header-nav .account-item > a .material-symbols-outlined {
  font-size: 24px !important;
  color: #fff !important;
  margin: 0 !important;
}

/* Cart — white solid pill that pops against the blue band (focal CTA) */
.header-nav .cart-item > a,
.header-nav .cart-item > a.is-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 48px !important;
  width: auto !important;
  max-width: none !important;
  height: 48px !important;
  padding: 0 18px !important;
  background-color: #fff !important;
  color: var(--primary-blue) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  border: none !important;
  text-indent: 0 !important;
  line-height: 1 !important;
  transition: background-color 0.15s ease;
  position: relative;
  overflow: visible;
}
.header-nav .cart-item > a:hover {
  background-color: var(--primary-blue-soft) !important;
  color: var(--primary-blue) !important;
}
.header-nav .cart-item > a > * {
  font-size: 14px;
  line-height: normal;
}
.header-nav .cart-item > a .material-symbols-outlined,
.header-nav .cart-item > a .icon-shopping-basket {
  font-size: 22px !important;
  color: var(--primary-blue) !important;
  margin: 0 !important;
  display: inline-flex !important;
}
.header-nav .cart-item > a .icon-shopping-basket::before {
  font-size: 22px !important;
  color: var(--primary-blue) !important;
}

/* Cart icon container */
.header-nav .cart-item > a .cart-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  visibility: visible !important;
  overflow: visible !important;
}
/* Count badge — red dot, blue border so it pops against the blue header */
.header-nav .cart-item .cart-icon strong,
.header-nav .cart-item > a .cart-icon strong {
  position: absolute !important;
  top: -8px !important;
  right: -10px !important;
  background: var(--accent-danger) !important;
  color: #fff !important;
  border: 2px solid var(--primary-blue) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 20px;
  height: 20px;
  line-height: 16px !important;
  border-radius: 9999px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
}

/* Nav menu items on blue bar (if any inline) */
#header .header-nav-main .nav > li > a,
#header .nav .nav-divider {
  color: #fff !important;
}

/* === Tier 3 (nav bar UNDER main header) — HIDDEN ===
   Pharmacity uses only 2 tiers. The page nav (Giới thiệu, Liên hệ, ...) has
   been moved into the topbar (right side) to reduce vertical clutter and
   match the user's expectation of a "compact" header. */
#header .header-bottom,
#header .header-bottom-nav-dark.nav-dark,
.header-bottom {
  display: none !important;
}

/* === Mobile responsive === */
@media (max-width: 849px) {
  .cms-pm-topbar { display: none; }
  .cms-pm-danhmuc-btn { display: none !important; }
  #header .header-search-form { min-width: 0; max-width: 100%; }
  #header .header-main { min-height: 56px; padding: 6px 0 !important; }
  #header .header-search-form-wrapper form .flex-row { height: 36px; }
  #header .header-search-form-wrapper form .flex-row * { height: 36px; }
  #header #logo img { max-height: 38px; }
}

/* Flatsome live search result cards.
   Keep these outside the forced 42px header input sizing; otherwise mobile
   autocomplete rows collapse and text/price overlap the product thumbnail. */
.autocomplete-suggestions,
.live-search-results {
  box-sizing: border-box !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: var(--shadow-lg) !important;
  text-align: left !important;
}

.autocomplete-suggestions .autocomplete-suggestion,
.live-search-results .autocomplete-suggestion {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  height: auto !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--border-default) !important;
}

.autocomplete-suggestions .autocomplete-suggestion *,
.live-search-results .autocomplete-suggestion * {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.autocomplete-suggestions .autocomplete-suggestion img,
.live-search-results .autocomplete-suggestion img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  object-fit: cover !important;
  border-radius: var(--radius-md) !important;
  margin: 0 !important;
  background: var(--surface-alt) !important;
}

.autocomplete-suggestions .search-name,
.live-search-results .search-name {
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--primary-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

.autocomplete-suggestions .search-price,
.live-search-results .search-price {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  color: var(--primary-text) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-align: right !important;
}

.autocomplete-suggestions .search-price .woocommerce-Price-amount,
.live-search-results .search-price .woocommerce-Price-amount {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 549px) {
  .autocomplete-suggestions,
  .live-search-results {
    max-width: calc(100vw - 24px) !important;
  }

  .autocomplete-suggestions .autocomplete-suggestion,
  .live-search-results .autocomplete-suggestion {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px !important;
  }

  .autocomplete-suggestions .search-price,
  .live-search-results .search-price {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px !important;
    color: var(--primary-blue) !important;
  }
}

/* === Tablet: progressively hide topbar items by importance ===
   Left group: keep Hotline (always), then Cam kết, Kín đáo, Tra cứu
   Right group: keep Liên hệ (most important), Giới thiệu, Bí kíp */
@media (max-width: 1280px) {
  .cms-pm-topbar-left .cms-pm-topbar-item:nth-child(4),
  .cms-pm-topbar-right .cms-pm-topbar-item:first-child {
    display: none !important;
  }
  /* When the first .right item is hidden, the next item's "+li" dot would
     still draw via its previous sibling rule, but since we hide via :nth-child
     CSS still treats it as sibling. Remove the orphan dot. */
  .cms-pm-topbar-right .cms-pm-topbar-item:nth-child(2)::before {
    display: none !important;
  }
}
@media (max-width: 1080px) {
  .cms-pm-topbar-left .cms-pm-topbar-item:nth-child(3),
  .cms-pm-topbar-left .cms-pm-topbar-item:nth-child(4) {
    display: none !important;
  }
}
@media (max-width: 900px) {
  .cms-pm-topbar { display: none !important; }
}

/* ============================================================
   DANH MỤC MEGAMENU
   Click "Danh mục" button → panel slides down:
   left = parent category list, right = thumbnail grid of children.
   ============================================================ */

/* Indicator on the danh-muc button when open */
.cms-pm-danhmuc-btn.is-open .cms-pm-danhmuc-chev {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}
.cms-pm-danhmuc-btn .cms-pm-danhmuc-chev {
  transition: transform 0.2s ease;
}

.cms-pm-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.cms-pm-megamenu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cms-pm-megamenu-inner {
  display: flex;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(11, 31, 68, 0.16);
  border: 1px solid var(--border-default);
  margin: 8px 16px 0;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  min-height: 420px;
  max-height: 76vh;
}

/* Left sidebar = parent categories */
.cms-pm-megamenu-sidebar {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  background: var(--surface-alt);
  border-right: 1px solid var(--border-default);
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
}
.cms-pm-megamenu-sidebar::-webkit-scrollbar { width: 6px; }
.cms-pm-megamenu-sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.cms-pm-megamenu-sidebar li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
.cms-pm-megamenu-sidebar li::before,
.cms-pm-megamenu-sidebar li::after,
.cms-pm-megamenu-sidebar li::marker {
  display: none !important;
  content: none !important;
}
.cms-pm-megamenu-sidebar li > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: var(--primary-text) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.12s ease, color 0.12s ease;
  border-left: 3px solid transparent;
}
.cms-pm-megamenu-sidebar li:hover > a,
.cms-pm-megamenu-sidebar li.is-active > a {
  background: var(--primary-blue-soft);
  color: var(--primary-blue) !important;
  font-weight: 600;
  border-left-color: var(--primary-blue);
}
.cms-pm-megamenu-cat-arrow {
  font-size: 18px !important;
  color: var(--muted-text);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.cms-pm-megamenu-sidebar li:hover .cms-pm-megamenu-cat-arrow,
.cms-pm-megamenu-sidebar li.is-active .cms-pm-megamenu-cat-arrow {
  opacity: 1;
  color: var(--primary-blue);
}

/* Right content area */
.cms-pm-megamenu-content {
  flex: 1;
  padding: 24px;
  background: #fff;
  overflow-y: auto;
  position: relative;
}
.cms-pm-megamenu-panel {
  display: none;
}
.cms-pm-megamenu-panel.is-active {
  display: block;
  animation: cmsPmFadeIn 0.18s ease;
}
@keyframes cmsPmFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel head: title + "Xem tất cả" link */
.cms-pm-megamenu-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}
.cms-pm-megamenu-panel-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--primary-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px;
}
.cms-pm-megamenu-viewall-link {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: var(--primary-blue) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.cms-pm-megamenu-viewall-link:hover {
  background: var(--primary-blue-soft);
}
.cms-pm-megamenu-viewall-link .material-symbols-outlined {
  font-size: 16px !important;
  color: var(--primary-blue);
  transition: transform 0.15s ease;
}
.cms-pm-megamenu-viewall-link:hover .material-symbols-outlined {
  transform: translateX(2px);
}

/* Subcategory chips row */
.cms-pm-megamenu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.cms-pm-megamenu-chip {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 12px;
  background: var(--surface-alt);
  color: var(--second-text) !important;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
  border: 1px solid var(--border-default);
  transition: all 0.15s ease;
}
.cms-pm-megamenu-chip:hover {
  background: var(--primary-blue-soft);
  color: var(--primary-blue) !important;
  border-color: var(--primary-blue-border);
}

/* Product cards grid — 4 per row */
.cms-pm-megamenu-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cms-pm-megamenu-product {
  display: flex !important;
  flex-direction: column;
  text-decoration: none !important;
  padding: 8px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border-default);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  gap: 6px;
}
.cms-pm-megamenu-product:hover {
  border-color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 79, 168, 0.10);
}
.cms-pm-megamenu-product-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--primary-blue-gallery);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cms-pm-megamenu-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform 0.25s ease;
}
.cms-pm-megamenu-product:hover .cms-pm-megamenu-product-img img {
  transform: scale(1.05);
}
.cms-pm-megamenu-product-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--accent-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.cms-pm-megamenu-product-name {
  color: var(--primary-text) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}
.cms-pm-megamenu-product:hover .cms-pm-megamenu-product-name {
  color: var(--primary-blue) !important;
}
.cms-pm-megamenu-product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1.2;
  margin-top: auto;
}
.cms-pm-megamenu-product-price del,
.cms-pm-megamenu-product-price del .woocommerce-Price-amount {
  color: var(--muted-text);
  font-size: 11px;
  font-weight: 400;
  margin-right: 4px;
}
.cms-pm-megamenu-product-price ins {
  text-decoration: none;
  background: transparent;
}

/* Empty state when category has no products */
.cms-pm-megamenu-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted-text);
}
.cms-pm-megamenu-empty-state .material-symbols-outlined {
  font-size: 48px !important;
  color: var(--border-strong);
  margin-bottom: 8px;
  font-variation-settings: 'FILL' 0 !important;
}
.cms-pm-megamenu-empty-state p {
  font-size: 14px;
  margin: 0 0 12px;
}
.cms-pm-megamenu-empty-link {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: var(--primary-blue) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  background: var(--primary-blue-soft);
  text-decoration: none !important;
}
.cms-pm-megamenu-empty-link:hover {
  background: var(--primary-blue);
  color: #fff !important;
}

@media (max-width: 1024px) {
  .cms-pm-megamenu-products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 849px) {
  .cms-pm-megamenu-inner {
    flex-direction: column;
    margin: 8px 8px 0;
    max-height: calc(100vh - 130px);
  }
  .cms-pm-megamenu-sidebar {
    width: 100%;
    max-height: 180px;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }
  .cms-pm-megamenu-products { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cms-pm-megamenu-product { padding: 6px; }
  .cms-pm-megamenu-product-name { font-size: 12px; }
}

/* ============================================================
   MOBILE SUB-HEADER — Pharmacity-style
   Hidden on desktop, shows below main logo bar on mobile.
   Includes: search bar + trending pills + quick-action shortcuts.
   ============================================================ */
.cms-pm-mobile-subhead { display: none; }

@media (max-width: 849px) {
  /* Make hamburger menu PROMINENT — 4-square icon look (Pharmacity-style) */
  #header .header-button .icon-menu,
  #header .nav-icon-wrap,
  #header .mobile-nav-button,
  #header a[data-open="#main-menu"] {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    color: #fff !important;
    transition: background 0.15s ease;
  }
  /* Replace the default 3-line burger with 4-square dot grid (Pharmacity look) */
  #header i.icon-menu,
  #header a[data-open="#main-menu"] i.icon-menu {
    font-size: 0 !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    position: relative;
    background-image:
      radial-gradient(circle, #fff 50%, transparent 55%),
      radial-gradient(circle, #fff 50%, transparent 55%),
      radial-gradient(circle, #fff 50%, transparent 55%),
      radial-gradient(circle, #fff 50%, transparent 55%) !important;
    background-size: 6px 6px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0, 12px 0, 0 12px, 12px 12px !important;
    line-height: 18px !important;
  }
  #header i.icon-menu::before {
    content: '' !important;
    display: none !important;
  }

  /* === Mobile sub-header container === */
  .cms-pm-mobile-subhead {
    display: block;
    background: #fff;
    border-bottom: 1px solid var(--border-default, #e6e9ef);
    padding: 8px 12px 10px;
    box-shadow: 0 2px 8px rgba(11, 31, 68, 0.04);
  }

  /* === Row 1: search bar === */
  .cms-pm-mobile-search {
    display: flex;
    align-items: stretch;
    background: #f3f6fc;
    border: 1px solid #dde6f4;
    border-radius: 10px;
    overflow: hidden;
    height: 42px;
    margin: 0 0 8px;
  }
  .cms-pm-mobile-search:focus-within {
    border-color: var(--primary-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 79, 168, 0.10);
  }
  .cms-pm-mobile-search-cat,
  .cms-pm-mobile-search-btn {
    background: transparent;
    border: none;
    padding: 0 10px;
    cursor: pointer;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cms-pm-mobile-search-cat {
    border-right: 1px solid #dde6f4;
  }
  .cms-pm-mobile-search-cat .material-symbols-outlined {
    font-size: 22px;
    font-variation-settings: 'FILL' 1;
  }
  .cms-pm-mobile-search-btn .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
  }
  .cms-pm-mobile-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    color: var(--primary-text) !important;
    padding: 0 6px !important;
    height: 40px !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: 0;
  }
  .cms-pm-mobile-search-input::placeholder { color: #94a3b8; font-size: 13px; }
  .cms-pm-mobile-search-input:focus { outline: none !important; box-shadow: none !important; }

  /* === Row 2: trending pills === */
  .cms-pm-mobile-trending {
    margin: 0 -12px 8px;
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cms-pm-mobile-trending::-webkit-scrollbar { display: none; }
  .cms-pm-mobile-trending-inner {
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
    padding-right: 12px;
  }
  .cms-pm-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--primary-blue-soft, #eaf2ff);
    color: var(--primary-blue);
    border: 1px solid var(--primary-blue-border, #c8def8);
    border-radius: 9999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cms-pm-trend-pill:hover, .cms-pm-trend-pill:focus {
    background: var(--primary-blue);
    color: #fff;
  }
  .cms-pm-trend-pill .material-symbols-outlined {
    font-size: 13px;
    color: inherit;
    font-variation-settings: 'FILL' 1;
  }
  .cms-pm-trend-pill--hot {
    background: linear-gradient(90deg, #ff5b1f 0%, #ff7a3d 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
  }
  .cms-pm-trend-pill--hot:hover {
    background: linear-gradient(90deg, #f97316 0%, #ea6f1f 100%);
    color: #fff;
  }

  /* === Row 3: quick-action shortcuts (3 cards) === */
  .cms-pm-mobile-quickactions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .cms-pm-mobile-qa {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
    padding: 6px 8px;
    text-decoration: none !important;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .cms-pm-mobile-qa:active { transform: scale(0.97); }
  .cms-pm-mobile-qa:hover { border-color: var(--primary-blue); }
  .cms-pm-qa-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cms-pm-qa-icon .material-symbols-outlined {
    font-size: 18px;
    color: #fff;
    font-variation-settings: 'FILL' 1;
  }
  .cms-pm-qa-icon--green { background: #16a34a; }
  .cms-pm-qa-icon--blue { background: var(--primary-blue); }
  .cms-pm-qa-icon--orange { background: #ea6f1f; }
  .cms-pm-qa-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
  }
  .cms-pm-qa-text strong {
    color: var(--primary-text);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
  }
  .cms-pm-qa-text span {
    color: var(--muted-text);
    font-size: 10px;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* === Ultra-small (iPhone SE) — even tighter === */
@media (max-width: 380px) {
  .cms-pm-mobile-subhead { padding: 6px 10px 8px; }
  .cms-pm-mobile-search { height: 38px; }
  .cms-pm-mobile-search-input { font-size: 13px !important; }
  .cms-pm-trend-pill { font-size: 11.5px; padding: 4px 9px; }
  .cms-pm-mobile-qa { padding: 5px 6px; gap: 5px; }
  .cms-pm-qa-icon { width: 26px; height: 26px; }
  .cms-pm-qa-icon .material-symbols-outlined { font-size: 16px; }
  .cms-pm-qa-text strong { font-size: 11px; }
  .cms-pm-qa-text span { font-size: 9.5px; }
}

/* ============================================================
   Mobile Menu Drawer — Modern clean restyle
   ============================================================ */
.mfp-bg.mfp-fade.mfp-ready { opacity: 0.55 !important; background: #0b1838 !important; }

#main-menu.mobile-sidebar {
  background: #fff !important;
  width: 86vw !important;
  max-width: 360px !important;
  padding: 0 !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}
#main-menu .sidebar-menu { padding: 0 !important; }

/* Close button (X) — bigger, more visible */
.mfp-content button.mfp-close,
#main-menu .mfp-close,
.mfp-mobile-menu .mfp-close {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 28px !important;
  background: rgba(15, 79, 168, 0.08) !important;
  color: var(--primary-blue) !important;
  border-radius: 50% !important;
  top: 12px !important;
  right: 12px !important;
  opacity: 1 !important;
  transition: background 0.15s ease;
}
.mfp-content button.mfp-close:hover { background: var(--primary-blue) !important; color: #fff !important; }

/* Search at top — branded pill */
#main-menu .nav-sidebar .header-search-form {
  padding: 16px 16px 8px !important;
  border-bottom: 1px solid #eef0f4 !important;
  margin-bottom: 8px !important;
}
#main-menu .nav-sidebar .header-search-form form {
  border-radius: 9999px !important;
  background: #f5f7fb !important;
  border: 1px solid #e5e7ec !important;
  overflow: hidden !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}
#main-menu .nav-sidebar .header-search-form input[type="search"],
#main-menu .nav-sidebar .header-search-form input.search-field {
  background: transparent !important;
  border: none !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  color: var(--primary-text) !important;
  height: 44px !important;
  box-shadow: none !important;
}
#main-menu .nav-sidebar .header-search-form button[type="submit"],
#main-menu .nav-sidebar .header-search-form .ux-search-submit {
  background: transparent !important;
  color: var(--primary-blue) !important;
  border: none !important;
  padding: 0 14px !important;
  height: 44px !important;
}

/* Menu items — sentence case, tight, with chevron */
#main-menu .nav-sidebar.nav-uppercase > li > a {
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--primary-text) !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #f0f2f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
#main-menu .nav-sidebar > li:last-child > a { border-bottom: 0 !important; }

/* Chevron right indicator */
#main-menu .nav-sidebar.nav-uppercase > li > a::after {
  content: "›";
  font-size: 22px;
  color: #c7cad1;
  font-weight: 400;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}
#main-menu .nav-sidebar.nav-uppercase > li > a:hover::after,
#main-menu .nav-sidebar.nav-uppercase > li.active > a::after {
  color: var(--primary-blue);
  transform: translateX(2px);
}

/* Hover + active state */
#main-menu .nav-sidebar > li > a:hover {
  background: #f5f8ff !important;
  color: var(--primary-blue) !important;
}
#main-menu .nav-sidebar > li.active > a,
#main-menu .nav-sidebar > li.current-menu-item > a {
  background: linear-gradient(90deg, rgba(15,79,168,0.06) 0%, rgba(15,79,168,0) 100%) !important;
  color: var(--primary-blue) !important;
  border-left: 3px solid var(--primary-blue) !important;
  padding-left: 15px !important;
}

/* Icons before menu items (auto-injected via content based on link text/href) */
#main-menu .nav-sidebar > li > a {
  gap: 12px;
}
#main-menu .nav-sidebar > li > a::before {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  color: var(--primary-blue);
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24';
}
#main-menu .nav-sidebar > li.menu-item-home > a::before,
#main-menu .nav-sidebar > li[id*="-723"] > a::before { content: "home"; }
#main-menu .nav-sidebar > li[id*="-724"] > a::before { content: "storefront"; }
#main-menu .nav-sidebar > li[id*="-1157"] > a::before { content: "menu_book"; }
#main-menu .nav-sidebar > li[id*="-1015"] > a::before { content: "info"; }
#main-menu .nav-sidebar > li[id*="-1005"] > a::before { content: "support_agent"; }
/* Fallback icon */
#main-menu .nav-sidebar > li > a::before { content: "chevron_right"; }
/* Re-specify per id (specificity beats fallback above) */
#main-menu .nav-sidebar > li.menu-item-home > a::before { content: "home" !important; }

/* Account/login link (usually toward bottom) */
#main-menu .nav-sidebar > li.account-item > a,
#main-menu .nav-sidebar > li a[href*="my-account"],
#main-menu .nav-sidebar > li a[href*="login"] {
  color: var(--primary-blue) !important;
}

/* Newsletter row — distinct icon */
#main-menu .nav-sidebar > li > a[href*="newsletter"],
#main-menu .nav-sidebar > li.newsletter > a { background: #fafbfd !important; }

/* Social icons section — wrap in a soft footer area */
#main-menu .nav-sidebar > li.html.custom > .social-icons,
#main-menu .social-icons {
  padding: 16px 18px !important;
  margin-top: 8px !important;
  background: linear-gradient(180deg, #f5f8ff 0%, #eef3fd 100%);
  display: flex !important;
  gap: 12px !important;
  border-top: 1px solid #e5eaf3 !important;
}
#main-menu .social-icons a {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border-radius: 50% !important;
  color: var(--primary-blue) !important;
  border: 1px solid #dde3ee !important;
  transition: all 0.15s ease;
}
#main-menu .social-icons a:hover {
  background: var(--primary-blue) !important;
  color: #fff !important;
  border-color: var(--primary-blue) !important;
  transform: translateY(-1px);
}
#main-menu .social-icons a i,
#main-menu .social-icons a svg {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

/* Remove default outlines on tap */
#main-menu a, #main-menu button { outline: none !important; }

/* ==== MOBILE HEADER FIX (2026-06-07): logo căn giữa, bỏ khoảng trống phải ==== */
@media (max-width: 849px){
  #masthead .header-main .flex-col.flex-grow{ flex-grow:0 !important; }
  #masthead .header-main .flex-col.logo{ flex:1 1 auto !important; text-align:center !important; }
  #masthead .header-main .flex-col.logo a,
  #masthead .header-main .flex-col.logo img{ margin-left:auto !important; margin-right:auto !important; }
  /* bỏ padding thừa 2 đầu cột mobile cho cân */
  #masthead .header-main .flex-col.show-for-medium.flex-right{ padding-right:6px !important; }
  #masthead .header-main .flex-col.show-for-medium.flex-left{ padding-left:6px !important; }
}