/* Header and footer shared by all KROMADE pages. */
body.site-brand {
  --catalog-ui-font: "Quicksand", "Segoe UI", sans-serif;
  --catalog-footer-script-font: "Oooh Baby", "Segoe Print", cursive;
}

/* Fixed watercolor accents shared by every branded page. */
.catalog-viewport-watercolor {
  position: fixed;
  z-index: 60;
  height: auto;
  opacity: .35;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.catalog-viewport-watercolor-bottom {
  bottom: clamp(-155px, -8vw, -52px);
  left: clamp(-132px, -7vw, -42px);
  width: clamp(100px, 29vw, 440px);
  opacity: .7;
  transform: rotate(-2deg);
}

.catalog-viewport-watercolor-top {
  top: clamp(-165px, -8vw, -58px);
  right: clamp(-145px, -7vw, -50px);
  width: clamp(100px, 18.9vw, 287px);
  transform: rotate(1deg);
}

@media (max-width: 600px) {
  .catalog-viewport-watercolor { opacity: .35; }
  .catalog-viewport-watercolor-bottom { opacity: .7; }
}
html[lang^="ja"] body.site-brand {
  --catalog-ui-font: "Zen Maru Gothic", "Yu Gothic", sans-serif;
  --catalog-footer-script-font: "Klee One", "Yu Mincho", cursive;
}
html[lang^="ko"] body.site-brand {
  --catalog-ui-font: "Gowun Dodum", "Malgun Gothic", sans-serif;
  --catalog-footer-script-font: "Nanum Pen Script", "Malgun Gothic", cursive;
}
body.site-brand .site-header,
body.site-brand .site-header button,
body.site-brand .site-header a {
  font-family: var(--catalog-ui-font);
}
body.site-brand .site-header .brand-logo-image { height: auto; border-radius: 0; }
body.site-brand .site-header .login-button { text-decoration: none; }
body.site-brand .upload-site-header { border-top: 0; }
body.site-brand .admin-logout-button,
body.site-brand .upload-admin-badge {
  border: 1px solid #d8d1c7;
  border-radius: 999px;
  background: #fffdf9;
  color: #263746;
  font-weight: 600;
}
body.site-brand .products-footer-links { flex-wrap: nowrap; }
body.site-brand .admin-login-shell,
body.site-brand .maintenance-shell { min-height: calc(100svh - 100px); }
@media print {
  body.site-brand > .site-header,
  body.site-brand > .site-footer,
  .catalog-viewport-watercolor { display: none !important; }
}
body.site-brand .site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: #eee9e2;
}

body.site-brand .site-header {
  border-bottom-color: rgba(223, 216, 205, .76);
  background: rgba(255, 254, 251, .965);
  box-shadow: 0 8px 28px rgba(53, 61, 66, .045);
}

body.site-brand .nav-link {
  border-radius: 999px;
  color: #3e474d;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .025em;
}

body.site-brand .nav-link:hover,
body.site-brand .nav-link.is-active {
  background: linear-gradient(90deg, rgba(210, 235, 236, .5), rgba(249, 229, 218, .42));
  color: #17364a;
}

body.site-brand .site-header .login-button:not(.is-account),
body.site-brand .site-header .login-button.is-account {
  min-height: 44px;
  gap: 7px;
  padding: 4px 19px 4px 7px;
  border: 1.2px solid #263746;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #14283a;
  box-shadow: 0 6px 16px rgba(45, 63, 71, .08), inset 0 0 0 2px rgba(255, 255, 255, .7);
  font-family: var(--catalog-ui-font);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .045em;
}

body.site-brand .site-header .login-button:not(.is-account):hover,
body.site-brand .site-header .login-button:not(.is-account):focus-visible,
body.site-brand .site-header .login-button.is-account:hover,
body.site-brand .site-header .login-button.is-account:focus-visible,
body.site-brand .site-header .login-button.is-account[aria-expanded="true"] {
  border-color: #4d8191;
  background: linear-gradient(135deg, #fff, #f1f8f7 56%, #fff5ef);
  color: #1d5364;
  box-shadow: 0 10px 24px rgba(54, 100, 110, .13);
  outline: none;
  transform: translateY(-1px);
}

body.site-brand .site-header .login-button:not(.is-account) .button-icon,
body.site-brand .site-header .login-button.is-account .button-icon {
  width: 34px;
  height: 34px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.site-brand .site-header .login-button .button-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Nút đăng nhập chỉ mang minh họa tài khoản sau khi phiên đăng nhập đã được
   xác nhận. Nhãn đăng nhập của khách giữ gọn và không dành chỗ cho icon. */
body.site-brand .site-header .login-button:not(.is-account) .button-icon {
  display: none;
}

/* Khách chưa đăng nhập không có icon. Hai mép nút dùng cùng khoảng đệm để
   nhãn Đăng nhập nằm đúng tâm trên mọi header, kể cả Checkout. */
body.site-brand .site-header .login-button:not(.is-account) {
  justify-content: center;
  padding-inline: clamp(12px, 1.3vw, 19px);
}

body.site-brand .site-header .login-button.is-account {
  min-height: 44px;
  max-width: min(240px, 34vw);
  padding: 4px 16px 4px 7px;
  border-color: #263746;
  background: rgba(255, 255, 255, .94);
}

body.site-brand .site-header .login-button.is-account #loginLabel {
  color: inherit;
  font-family: var(--catalog-ui-font);
  font-size: .8rem;
  font-weight: 600;
}

body.site-brand .site-header .login-button.is-account .button-icon::after { display: none; }

body.site-brand .locale-switcher-trigger {
  min-height: 44px;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  border: 1px solid #d8d1c7;
  border-radius: 999px;
  background: rgba(255, 254, 251, .95);
  color: #263746;
  box-shadow: 0 6px 16px rgba(45, 63, 71, .07);
  font-family: var(--catalog-ui-font);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
}

body.site-brand .locale-switcher-trigger::before {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: center / contain no-repeat url("assets/catalog/header-icons/language-watercolor.webp");
  content: "";
}

body.site-brand .locale-switcher-trigger:hover,
body.site-brand .locale-switcher.is-open .locale-switcher-trigger {
  border-color: #8ab3b9;
  background: linear-gradient(135deg, #fff, #f1f8f7 55%, #fff5ef);
  box-shadow: 0 10px 24px rgba(54, 100, 110, .12);
}

body.site-brand .locale-switcher-flag { display: none; }

body.site-brand .locale-switcher-caret {
  width: 16px;
  height: 16px;
  background: center / contain no-repeat url("assets/catalog/header-icons/chevron-watercolor.webp");
}

body.site-brand .locale-switcher-caret path { display: none; }

body.site-brand .locale-switcher-panel {
  top: calc(100% + 11px);
  gap: 11px;
  width: min(310px, calc(100vw - 24px));
  padding: 17px;
  border: 1px solid rgba(204, 191, 173, .72);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(186, 223, 231, .3), transparent 36%),
    radial-gradient(circle at 0 100%, rgba(247, 208, 191, .26), transparent 42%),
    #fffdf9;
  box-shadow: 0 20px 52px rgba(65, 58, 49, .16);
}

body.site-brand .locale-switcher-field {
  position: relative;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(222, 213, 199, .76);
  border-radius: 17px;
  background: rgba(255, 255, 255, .76);
}

body.site-brand .locale-switcher-field::before {
  position: absolute;
  top: 7px;
  left: 9px;
  width: 31px;
  height: 31px;
  background: center / contain no-repeat url("assets/catalog/header-icons/language-watercolor.webp");
  content: "";
}

body.site-brand .locale-switcher-field:nth-of-type(2)::before {
  background-image: url("assets/catalog/header-icons/currency-watercolor.webp");
}

body.site-brand .locale-switcher-field > span {
  min-height: 27px;
  padding: 5px 0 0 37px;
  color: #40535a;
  font-size: .8rem;
  font-weight: 600;
}

body.site-brand .locale-switcher-field select {
  min-height: 46px;
  padding: 9px 42px 9px 13px;
  border: 1px solid #d9d2c8;
  border-radius: 14px;
  appearance: none;
  background: #fff center right 12px / 16px 16px no-repeat url("assets/catalog/header-icons/chevron-watercolor.webp");
  color: #1f3542;
  font-family: var(--catalog-ui-font);
  font-size: .86rem;
  font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(76, 65, 52, .04);
}

body.site-brand .locale-switcher-field select:focus-visible {
  border-color: #74aab4;
  outline: 3px solid rgba(133, 194, 201, .18);
  outline-offset: 1px;
}

body.site-brand .locale-switcher-save {
  min-height: 44px;
  border: 1px solid #263746;
  background: rgba(255, 255, 255, .9);
  color: #183044;
  box-shadow: 0 7px 18px rgba(45, 63, 71, .08);
  font-family: var(--catalog-ui-font);
  font-size: .82rem;
  font-weight: 600;
}

body.site-brand .locale-switcher-save:hover {
  background: linear-gradient(135deg, #f4faf9, #fff3ec);
  color: #1d5364;
  box-shadow: 0 10px 24px rgba(54, 100, 110, .13);
  transform: translateY(-1px);
}

body.site-brand.site-footer-page > .site-footer.products-site-footer {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 clamp(14px, 3.15vw, 50px) 18px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 0 100%, rgba(147, 213, 237, .22), transparent 22%),
    radial-gradient(circle at 100% 84%, rgba(243, 189, 180, .2), transparent 23%),
    #fff;
  color: #172c3f;
  box-shadow: none;
  font-family: var(--catalog-ui-font);
}

body.site-brand > .site-footer.products-site-footer::before {
  display: none;
}

body.site-brand > .site-footer.products-site-footer::after {
  position: absolute;
  z-index: 0;
  right: -28px;
  bottom: -30px;
  display: block;
  width: 285px;
  height: 120px;
  border-radius: 58% 28% 62% 31%;
  background:
    radial-gradient(ellipse at 68% 36%, rgba(111, 193, 224, .38) 0 18%, transparent 51%),
    radial-gradient(ellipse at 35% 66%, rgba(241, 164, 171, .3) 0 15%, transparent 49%),
    radial-gradient(ellipse at 78% 78%, rgba(231, 190, 132, .28) 0 16%, transparent 48%),
    linear-gradient(165deg, transparent 12%, rgba(154, 215, 232, .2) 30%, transparent 74%);
  clip-path: polygon(3% 55%, 17% 31%, 38% 38%, 53% 12%, 73% 28%, 96% 4%, 89% 43%, 100% 68%, 70% 74%, 56% 98%, 37% 75%, 7% 91%);
  filter: blur(.4px) saturate(.92);
  opacity: .86;
  pointer-events: none;
  transform: rotate(-6deg);
  content: "";
}

body.site-brand .products-footer-banner {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2129 / 306;
  overflow: clip;
  border-radius: 12px;
  background: #edf7fa;
  box-shadow: 0 10px 28px rgba(53, 84, 96, .1);
  isolation: isolate;
}

body.site-brand .products-footer-banner > img {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

body.site-brand .products-footer-banner-copy {
  position: absolute;
  top: clamp(8px, 1vw, 16px);
  left: 50%;
  display: grid;
  gap: 1px;
  width: min(47%, 650px);
  padding: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform: translateX(-50%);
}

body.site-brand .products-footer-banner-copy strong {
  color: #163047;
  font-family: var(--catalog-footer-script-font);
  font-size: clamp(1.08rem, 1.72vw, 1.78rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .015em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .82), 0 0 9px rgba(255, 255, 255, .75);
}

body.site-brand .products-footer-banner-copy strong > .products-footer-banner-title-line {
  display: inline-block;
  white-space: nowrap;
}

body.site-brand .products-footer-banner-copy > span {
  color: #526d7e;
  font-family: var(--catalog-footer-script-font);
  font-size: clamp(.72rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .82), 0 0 8px rgba(255, 255, 255, .72);
}

body.site-brand .products-footer-order-link {
  position: absolute;
  top: 50%;
  right: clamp(16px, 2.8vw, 42px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  min-width: clamp(132px, 10vw, 160px);
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(37, 55, 68, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #193044;
  box-shadow: 0 7px 22px rgba(30, 60, 73, .13);
  font-size: clamp(.72rem, .77vw, .82rem);
  font-weight: 600;
  letter-spacing: .025em;
  text-decoration: none;
  transform: translateY(-50%);
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.site-brand .products-footer-order-link:hover,
body.site-brand .products-footer-order-link:focus-visible {
  border-color: #4d8191;
  color: #2c7187;
  transform: translateY(calc(-50% - 2px));
}

body.site-brand .products-footer-order-link span[aria-hidden="true"] {
  font-size: .95rem;
  line-height: 1;
}

@media (max-width: 1330px) {
  body.site-brand .products-footer-order-link {
    top: auto;
    right: auto;
    bottom: clamp(10px, 1.2vw, 18px);
    left: clamp(14px, 2.8vw, 42px);
    transform: none;
  }

  body.site-brand .products-footer-order-link:hover,
  body.site-brand .products-footer-order-link:focus-visible {
    transform: translateY(-2px);
  }
}

body.site-brand .products-footer-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 235px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 2.3vw, 36px);
  min-height: 82px;
  padding: 10px 3px 7px;
}

body.site-brand .products-footer-logo {
  display: block;
  width: min(100%, 235px);
}

body.site-brand .products-footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

body.site-brand .products-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(15px, 1.8vw, 30px);
  min-width: 0;
}

body.site-brand .products-footer-links a,
body.site-brand .products-footer-bottom a {
  color: #263b4a;
  text-decoration: none;
}

body.site-brand .products-footer-links a {
  flex: 0 0 auto;
  padding: 7px 0;
  font-size: clamp(.68rem, .73vw, .82rem);
  font-weight: 500;
  white-space: nowrap;
}

body.site-brand .products-footer-links a:hover,
body.site-brand .products-footer-links a:focus-visible,
body.site-brand .products-footer-bottom a:hover,
body.site-brand .products-footer-bottom a:focus-visible {
  color: #4b8798;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.site-brand .products-footer-signature {
  margin: 0;
  color: #5c7180;
  font-family: "Oooh Baby", "Segoe Print", cursive;
  font-size: clamp(1.2rem, 1.6vw, 1.65rem);
  line-height: 1;
  text-align: right;
  transform: rotate(-4deg);
}

body.site-brand .products-footer-extras {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

body.site-brand .products-footer-socials {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.site-brand .products-footer-socials a {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #173246;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

body.site-brand .products-footer-socials a:hover,
body.site-brand .products-footer-socials a:focus-visible {
  background: rgba(155, 210, 221, .2);
  color: #43859a;
  outline: none;
  transform: translateY(-2px);
}

body.site-brand .products-footer-socials svg {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.site-brand .products-footer-socials .is-filled {
  fill: currentColor;
  stroke: none;
}

body.site-brand .products-footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 31px;
  padding: 4px 3px 0;
  border-top: 1px solid rgba(37, 55, 68, .08);
  color: #73818b;
  font-size: .62rem;
  letter-spacing: .025em;
}

body.site-brand .products-footer-bottom > * {
  min-width: 0;
  white-space: nowrap;
}

body.site-brand .products-footer-data-credit {
  text-align: right;
}

@media (max-width: 1050px) {
  body.site-brand .products-footer-banner-copy {
    left: 48%;
    width: 48%;
  }

  body.site-brand .products-footer-order-link {
    right: auto;
    left: 18px;
    min-width: 132px;
    padding-inline: 13px;
  }

  body.site-brand .products-footer-main {
    grid-template-columns: 190px minmax(0, 1fr) auto;
  }

  body.site-brand .products-footer-extras .products-footer-signature {
    display: none;
  }

  body.site-brand .products-footer-links {
    justify-content: flex-start;
    gap: clamp(12px, 2vw, 25px);
  }
}

@media (max-width: 826.98px) {
  body.site-brand .products-footer-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px clamp(14px, 3vw, 24px);
  }

  body.site-brand .products-footer-logo {
    grid-column: 1;
    grid-row: 1;
  }

  body.site-brand .products-footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  body.site-brand .products-footer-extras {
    grid-column: 2;
    grid-row: 1;
  }

  body.site-brand .products-footer-bottom {
    gap: clamp(4px, 1.2vw, 10px);
    font-size: clamp(.42rem, 1.05vw, .58rem);
    letter-spacing: 0;
  }
}

@media (max-width: 760px) {
  body.site-brand.site-footer-page > .site-footer.products-site-footer {
    padding: 0 12px 14px;
  }

  body.site-brand .products-footer-banner {
    min-height: 110px;
    aspect-ratio: 2129 / 306;
    border-radius: 11px;
  }

  body.site-brand .products-footer-banner > img {
    object-position: center bottom;
  }

  body.site-brand .products-footer-banner-copy {
    top: 8px;
    left: 37%;
    width: min(48%, 360px);
    padding: 0;
    text-align: center;
    transform: translateX(-50%);
  }

  body.site-brand .products-footer-banner-copy strong {
    font-size: clamp(.82rem, 3.4vw, 1rem);
  }

  body.site-brand .products-footer-order-link {
    top: auto;
    right: auto;
    bottom: 12px;
    left: 14px;
    min-width: 132px;
    min-height: 35px;
    transform: none;
  }

  body.site-brand .products-footer-order-link:hover,
  body.site-brand .products-footer-order-link:focus-visible {
    transform: translateY(-2px);
  }

  body.site-brand .products-footer-main {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 3px 10px;
  }

  body.site-brand .products-footer-logo {
    grid-column: 1;
    grid-row: 1;
    width: min(225px, 72vw);
    margin-inline: 0;
  }

  body.site-brand .products-footer-links {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 22px;
  }

  body.site-brand .products-footer-extras {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }

  body.site-brand .products-footer-links a {
    padding-block: 6px;
    font-size: .72rem;
  }

  body.site-brand .products-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 9px;
    align-items: center;
    text-align: left;
  }

  body.site-brand .products-footer-data-credit {
    text-align: right;
  }
}

@media (max-width: 600px) {
  body.site-brand .products-footer-banner {
    min-height: clamp(218px, 63vw, 330px);
    aspect-ratio: auto;
  }

  body.site-brand .products-footer-banner > img {
    object-position: 77% bottom;
    transform: scale(1.24);
    transform-origin: 50% 18%;
  }

  body.site-brand .products-footer-banner-copy {
    top: 12px;
    right: auto;
    left: 14px;
    width: min(55%, 310px);
    text-align: left;
    transform: none;
  }

  body.site-brand .products-footer-order-link {
    top: auto;
    right: auto;
    bottom: 14px;
    left: 14px;
    transform: none;
  }

  body.site-brand .products-footer-order-link:hover,
  body.site-brand .products-footer-order-link:focus-visible {
    transform: translateY(-2px);
  }
}

body.site-brand .nav-link.is-active {
  color: #395f70;
}

/* Trên header một hàng, gom điều hướng về sát logo thay vì để các liên kết
   đứng giữa phần trống còn lại sau khi bỏ trang Đánh giá. */
@media (min-width: 1080px) {
  body.site-brand .site-header:not(.upload-site-header) .top-nav {
    justify-content: flex-start;
    padding-left: clamp(16px, 1.5vw, 28px);
  }
}


/* Keep labels separated when the shared navigation moves onto its own row. */
@media (max-width: 1079.98px) {
  body.site-brand .site-header {
    --site-header-control-size: clamp(34px, 3.7vw, 40px);
    --site-header-control-icon-size: clamp(26px, 2.8vw, 30px);
  }

  body.site-brand .site-header .brand {
    width: clamp(112px, 37vw, 150px);
  }

  body.site-brand .site-header .auth-actions {
    align-items: center;
    gap: clamp(4px, .6vw, 7px);
  }

  body.site-brand .site-header .locale-switcher {
    display: flex;
    align-items: center;
    height: var(--site-header-control-size);
    transform: none;
  }

  body.site-brand .site-header .login-button:not(.is-account),
  body.site-brand .site-header .login-button.is-account {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--site-header-control-size);
    min-height: var(--site-header-control-size);
    padding: 3px clamp(10px, 1.25vw, 14px);
    gap: clamp(4px, .55vw, 6px);
    font-size: clamp(.72rem, 1.2vw, .79rem);
    line-height: 1;
    text-align: center;
  }

  body.site-brand .site-header .login-button.is-account {
    padding-left: 4px;
  }

  body.site-brand .site-header .login-button:not(.is-account) .button-icon,
  body.site-brand .site-header .login-button.is-account .button-icon,
  body.site-brand .site-header .login-button .button-icon img {
    width: var(--site-header-control-icon-size);
    height: var(--site-header-control-icon-size);
  }

  body.site-brand .site-header .login-button.is-account #loginLabel {
    font-size: clamp(.7rem, 1.12vw, .76rem);
    line-height: 1;
  }

  body.site-brand .locale-switcher-trigger {
    box-sizing: border-box;
    justify-content: center;
    height: var(--site-header-control-size);
    min-height: var(--site-header-control-size);
    gap: clamp(3px, .45vw, 5px);
    padding: 3px clamp(6px, .75vw, 8px) 3px 4px;
    font-size: clamp(.68rem, 1.1vw, .74rem);
    line-height: 1;
  }

  body.site-brand .locale-switcher-trigger::before {
    width: var(--site-header-control-icon-size);
    height: var(--site-header-control-icon-size);
  }

  body.site-brand .locale-switcher-caret {
    width: clamp(11px, 1.3vw, 14px);
    height: clamp(11px, 1.3vw, 14px);
  }

  body.site-brand .site-header .top-nav .nav-link {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    padding: 4px 6px;
    font-size: clamp(.66rem, 2.8vw, .8rem);
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
  }
  body.site-brand .upload-site-header .top-nav { flex-wrap: wrap; }
  body.site-brand .upload-site-header .top-nav .nav-link { flex: 1 1 22%; }
}

body.site-brand .upload-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
body.site-brand .admin-logout-button { padding: 7px 12px; font-size: .8rem; }
@media (max-width: 1079.98px) {
  body.site-brand .upload-header-actions { grid-column: 2; grid-row: 1; }
  body.site-brand .upload-admin-badge { min-height: 36px; padding: 6px 10px; font-size: .75rem; }
}

/* Admin has eight destinations, so give its navigation a full row sooner. */
@media (min-width: 1080px) and (max-width: 1330px) {
  body.site-brand .upload-site-header { grid-template-columns: 1fr auto; gap: 6px 18px; }
  body.site-brand .upload-site-header .upload-header-actions { grid-column: 2; grid-row: 1; }
  body.site-brand .upload-site-header .top-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* Nút đóng dùng chung lấy đúng hình thức đã duyệt ở hộp đăng nhập: dấu × nhỏ,
   nền trong suốt và chỉ đổi sang đỏ khi tương tác. Các trình xem ảnh toàn màn
   hình giữ nút tròn tối riêng để luôn đọc được trên ảnh. */
body.site-brand :is(
  button.modal-close:not([data-action="close-sample-modal"]):not(.crop-design-modal-close):not(.feedback-detail-close),
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
) {
  box-sizing: border-box;
  display: grid;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50%;
  color: #88939d !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0;
  cursor: pointer;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: color 160ms ease, transform 180ms ease;
}

body.site-brand :is(
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
) { position: relative; }

body.site-brand :is(
  button.modal-close:not([data-action="close-sample-modal"]):not(.crop-design-modal-close):not(.feedback-detail-close),
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
)::before,
body.site-brand :is(
  button.modal-close:not([data-action="close-sample-modal"]):not(.crop-design-modal-close):not(.feedback-detail-close),
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 15px;
  height: 1.6px;
  border: 0;
  border-radius: 999px;
  background: currentColor !important;
  box-shadow: none !important;
  content: "";
}

body.site-brand :is(
  button.modal-close:not([data-action="close-sample-modal"]):not(.crop-design-modal-close):not(.feedback-detail-close),
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
)::before { transform: translate(-50%, -50%) rotate(45deg); }

body.site-brand :is(
  button.modal-close:not([data-action="close-sample-modal"]):not(.crop-design-modal-close):not(.feedback-detail-close),
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
)::after { transform: translate(-50%, -50%) rotate(-45deg); }

body.site-brand :is(
  button.modal-close:not([data-action="close-sample-modal"]):not(.crop-design-modal-close):not(.feedback-detail-close),
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
):hover,
body.site-brand :is(
  button.modal-close:not([data-action="close-sample-modal"]):not(.crop-design-modal-close):not(.feedback-detail-close),
  button.image-options-close,
  button.checkout-address-modal-close,
  button.account-profile-close-button,
  button.account-order-filter-modal-close,
  button.ka-close:not(.ka-confirm-close),
  button.kromade-demo-modal-close,
  button.product-config-modal-close
):focus-visible {
  border: 0 !important;
  color: #b43f4a !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  transform: translateY(-1px) rotate(4deg) !important;
}