/* Source: styles.css */
:root {
  /* Con trỏ phóng to tự vẽ, có quầng trắng bao ngoài nét đen.
     -----------------------------------------------------------------------
     Con trỏ zoom-in sẵn có của trình duyệt gần như chỉ là nét đen mảnh, nên
     đặt lên một tấm ảnh tối là nó lẫn hẳn vào ảnh và khách mất dấu con trỏ.
     Bản này tô một lớp trắng dày bên dưới rồi mới vẽ nét đen lên trên, nhìn
     ra được trên cả nền sáng lẫn nền tối. Mỗi chỗ dùng vẫn khai kèm zoom-in
     hoặc zoom-out làm bản dự phòng. */
  --ka-con-tro-phong-to: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='M15.9 15.9 22 22'/%3E%3Cpath d='M11 7.9v6.2M7.9 11h6.2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='M15.9 15.9 22 22'/%3E%3Cpath d='M11 7.9v6.2M7.9 11h6.2'/%3E%3C/g%3E%3C/svg%3E") 11 11;
  --ka-con-tro-thu-nho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='M15.9 15.9 22 22'/%3E%3Cpath d='M7.9 11h6.2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='M15.9 15.9 22 22'/%3E%3Cpath d='M7.9 11h6.2'/%3E%3C/g%3E%3C/svg%3E") 11 11;

  color-scheme: light;
  --bg: #f5f8fb;
  --paper: #ffffff;
  --paper-soft: #fbfcf7;
  --ink: #18232d;
  --muted: #687684;
  --line: #dce6ee;
  --line-strong: #b9c7d3;
  --teal: #139b8f;
  --teal-dark: #08776e;
  --coral: #ef6461;
  /* Vàng của bộ màu K-R-O-M-A. Trước đây có ba biến cho cùng một vai trò —
     `--ka-yellow`, `--sun` (#f4bd4f) và `--about-yellow` — nên sửa màu thương
     hiệu phải nhớ sửa ba chỗ. Nay chỉ còn một, và khai báo nằm ở `:root` của
     tệp này vì `admin.html` không nạp `account-ui.css`: biến không tồn tại thì
     cả khai báo dùng nó bị vô hiệu, đúng kiểu lỗi "tàng hình" từng gặp. */
  --ka-yellow: #f6c852;
  --violet: #725ac1;
  --green: #4f9f68;
  --danger: #c94b4b;
  --shadow: 0 16px 36px rgba(27, 40, 54, 0.12);
  --radius: 8px;
  --header-h: 64px;
  --scrollbar-size: 5px;
  --scrollbar-hit-size: 11px;
  --scrollbar-hit-padding: 3px;
  --scrollbar-thumb: #A7CCDF;
  --scrollbar-thumb-hover: #A7CCDF;
  --scrollbar-track: #F1F7FA;
  --font-ui: "Quicksand", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-brand: var(--font-ui);
}
* {
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
html {
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
@supports selector(::-webkit-scrollbar){
* {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
html {
    scrollbar-color: auto;
    scrollbar-width: none;
  }
}
*::-webkit-scrollbar {
  width: var(--scrollbar-hit-size);
  height: var(--scrollbar-hit-size);
}
*::-webkit-scrollbar-track {
  border: var(--scrollbar-hit-padding) solid transparent;
  border-radius: 999px;
  background-color: var(--scrollbar-track);
  background-clip: content-box;
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
}
*::-webkit-scrollbar-thumb {
  min-width: 40px;
  min-height: 40px;
  border: var(--scrollbar-hit-padding) solid transparent;
  border-radius: 999px;
  background-color: var(--scrollbar-thumb);
  background-clip: content-box;
  box-shadow: inset 0 0 0 1px rgba(74, 126, 155, 0.1);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(157, 68, 54, 0.08);
}
@keyframes kromadeNativeScrollbarSweep {
  0%,
  100% {
    background: var(--scrollbar-thumb);
    background-clip: content-box;
  }
  16% {
    background: linear-gradient(
      135deg,
      #A7CCDF 0%,
      #f6c852 33%,
      #ec6386 66%,
      #8069d7 100%
    );
    background-size: 280% 280%;
    background-position: 0% 0%;
    background-clip: content-box;
  }
  72% {
    background: linear-gradient(
      135deg,
      #A7CCDF 0%,
      #f6c852 33%,
      #ec6386 66%,
      #8069d7 100%
    );
    background-size: 280% 280%;
    background-position: 100% 100%;
    background-clip: content-box;
  }
}
@media (hover: hover) and (min-width: 641px){
*::-webkit-scrollbar-thumb:hover {
    animation: kromadeNativeScrollbarSweep 900ms ease-out both;
  }
}
*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
/* Hộp nào đang có thanh cuộn chiếm chỗ thì bỏ bo góc ở đúng cạnh thanh cuộn
   đứng — lớp do scrollbar-corners.js gắn. Thanh cuộn chạy thẳng còn mép hộp
   cong ra khỏi nó thì hở một mẩu hình liềm ở hai đầu.

   Bốn ngôn ngữ của trang đều viết từ trái sang phải nên thanh cuộn dọc luôn ở
   mép phải.

   Phải dùng !important: mỗi hộp tự đặt border-radius trong quy tắc riêng của
   nó, nhiều quy tắc đặc hiệu hơn một lớp đơn, mà lớp này thì phải thắng ở mọi
   chỗ chứ không thể đi liệt kê lại từng bộ chọn một. */
.has-scrollbar-y {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.has-scrollbar-x {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.page-scrollbar {
  position: fixed;
  z-index: 9998;
  top: 3px;
  right: 0;
  bottom: 3px;
  width: var(--scrollbar-hit-size);
  overflow: hidden;
  border-radius: 999px;
  opacity: 1;
  pointer-events: auto;
  cursor: default;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 200ms ease,
    transform 430ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.page-scrollbar::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  content: "";
}
.page-scrollbar-thumb {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: max(3px, calc(var(--scrollbar-size) - 2px));
  height: var(--page-scrollbar-thumb-height, 36px);
  min-height: 34px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  box-shadow:
    inset 0 0 0 1px rgba(74, 126, 155, 0.1),
    0 2px 7px rgba(74, 126, 155, 0.18);
  transform: translate3d(0, var(--page-scrollbar-thumb-offset, 0px), 0);
  cursor: grab;
  transition: width 180ms ease, box-shadow 180ms ease;
  will-change: height, transform, width;
}
.page-scrollbar-thumb::after {
  position: absolute;
  inset: -45% -70%;
  content: "";
  background: linear-gradient(
    180deg,
    transparent 8%,
    rgba(167, 204, 223, 0.98) 26%,
    rgba(246, 200, 82, 0.96) 43%,
    rgba(236, 99, 134, 0.96) 58%,
    rgba(128, 105, 215, 0.95) 74%,
    transparent 92%
  );
  opacity: 0;
  pointer-events: none;
  transform: translateY(-55%);
}
.page-scrollbar.is-dragging .page-scrollbar-thumb {
  cursor: grabbing;
}
@keyframes pageScrollbarKromadeSweep {
  0% {
    opacity: 0;
    transform: translateY(-55%);
  }
  18% {
    opacity: 0.95;
  }
  72% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateY(55%);
  }
}
@media (hover: hover) and (min-width: 641px){
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover .page-scrollbar-thumb {
    box-shadow:
      inset 0 0 0 1px rgba(74, 126, 155, 0.1),
      0 3px 10px rgba(74, 126, 155, 0.24);
  }
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover .page-scrollbar-thumb::after {
    animation: pageScrollbarKromadeSweep 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce){
*::-webkit-scrollbar-thumb:hover {
    animation: none !important;
  }
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover .page-scrollbar-thumb::after {
    animation: none !important;
  }
}
.page-scrollbar.is-modal-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, calc(100vh + 18px), 0);
  transition:
    opacity 80ms linear 560ms,
    transform 560ms cubic-bezier(0.4, 0, 0.2, 1);
}
.page-scrollbar.is-inactive,
html.is-page-loading .page-scrollbar {
  opacity: 0;
  pointer-events: none;
}
body.is-modal-scroll-locked {
  position: fixed;
  top: var(--modal-scroll-lock-offset, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden !important;
}
@media (prefers-reduced-motion: reduce){
.page-scrollbar {
    transition: opacity 120ms ease;
  }
.page-scrollbar.is-modal-hidden {
    transform: none;
    transition: opacity 120ms ease;
  }
.page-scrollbar-thumb::after {
    animation: none !important;
  }
}
@media (max-width: 640px){
.page-scrollbar {
    width: 1px;
  }
.page-scrollbar-thumb {
    width: 1px;
    border: 0;
    box-shadow: none;
  }
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.5;
}
body.site-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.site-footer-page > main {
  margin-bottom: clamp(54px, 7vw, 96px);
}
body.site-footer-page > .site-footer {
  margin-top: auto;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: var(--header-h);
  padding: 8px clamp(16px, 4vw, 42px);
  border-bottom: 1px solid rgba(220, 230, 238, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  width: clamp(156px, 18vw, 230px);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.brand-mark,
.button-icon,
.upload-icon,
.service-code {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: 0;
}
.brand-logo-image {
  width: 100%;
  height: 56px;
  border-radius: var(--radius);
  object-fit: contain;
  object-position: center;
}
.auth-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 9px;
  min-width: 0;
}
.top-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.top-nav::-webkit-scrollbar {
  display: none;
}
.nav-link,
.login-button,
.signup-button,
.text-button,
.stepper,
.modal-close {
  border: 0;
  background: transparent;
  color: var(--ink);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link[hidden] {
  display: none;
}
.nav-link:hover {
  background: #edf7f5;
  color: var(--teal-dark);
}
.nav-link.is-active {
  background: transparent;
  color: var(--teal-dark);
}
.login-button,
.signup-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 15px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.login-button {
  border: 1px solid #d2e0e1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 247, 0.96));
  color: var(--ink);
  box-shadow: 0 7px 19px rgba(38, 71, 76, 0.08);
}
.login-button .button-icon {
  display: inline-grid;
}
.login-button.is-account {
  min-height: 44px;
  max-width: min(270px, 38vw);
  padding: 4px 11px 4px 5px;
  border-color: #b8dcd8;
  color: #17383a;
  background:
    radial-gradient(circle at 8% 18%, rgba(45, 190, 175, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff, #f0faf8);
  box-shadow:
    0 9px 24px rgba(26, 91, 89, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.login-button.is-account .button-icon {
  position: relative;
  display: inline-grid;
  color: #fff;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(145deg, #24b3a3, #087a72);
  box-shadow:
    0 7px 16px rgba(8, 122, 114, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.login-button.is-account #loginLabel {
  overflow: hidden;
  color: #17383a;
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
}
.login-button.is-account::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: -3px 1px 0 2px;
  border-right: 1.8px solid #5a7779;
  border-bottom: 1.8px solid #5a7779;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}
.login-button.is-account[aria-expanded="true"]::after {
  margin-top: 3px;
  transform: rotate(225deg);
}
.login-button.is-account[aria-expanded="true"] {
  border-color: #73c3ba;
  background: #ecf8f6;
  box-shadow:
    0 0 0 4px rgba(19, 155, 143, 0.1),
    0 12px 28px rgba(26, 91, 89, 0.13);
}
.account-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  right: 0;
  width: min(300px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(23, 43, 52, 0.18);
}
.account-menu[hidden] {
  display: none;
}
.account-menu-logout {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 1px solid #efc4c4;
  border-radius: 10px;
  color: #a63232;
  background: #fff7f7;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}
.account-menu-logout:hover,
.account-menu-logout:focus-visible {
  color: #fff;
  background: #b73d3d;
  outline: none;
}
/* Hộp chọn ngôn ngữ và tiền tệ trong header.
   ---------------------------------------------------------------------------
   Gộp từ ba control cũ — hai nút ¥/$ luôn hiện cộng một nút ngôn ngữ — thành
   một nút mở ra bảng, theo cách AliExpress làm. Nút chỉ mang cờ, mã ngôn ngữ và
   mã tiền tệ: đủ để biết trang đang ở trạng thái nào mà tốn ít chỗ hơn hẳn. */
.locale-switcher {
  position: relative;
  flex: 0 0 auto;
}
.locale-switcher-trigger {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.locale-switcher-trigger:hover,
.locale-switcher.is-open .locale-switcher-trigger {
  border-color: var(--teal);
  background: #fff;
}
.locale-switcher-trigger:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}
.locale-switcher-flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
}
.locale-switcher-summary {
  white-space: nowrap;
}
.locale-switcher-caret {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.18s ease;
}
.locale-switcher.is-open .locale-switcher-caret {
  transform: rotate(180deg);
}
.locale-switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 12px;
  width: min(280px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(16, 40, 47, 0.16);
}
.locale-switcher-panel[hidden] {
  display: none;
}
.locale-switcher-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.locale-switcher-field > span {
  font-size: 0.82rem;
  font-weight: 800;
}
.locale-switcher-field select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.locale-switcher-field select:focus-visible {
  border-color: var(--teal);
  outline: 2px solid var(--teal-dark);
  outline-offset: 1px;
}
/* Nút Lưu mượn nguyên hình dáng của .about-button.about-hero-v2-button-primary
   bên trang giới thiệu công ty.

   Màu chép ra thành số chứ không dùng var(--about-deep) và var(--about-teal):
   hai biến đó khai trong "body[data-page=about] .about-landing", ngoài trang
   giới thiệu chúng không có giá trị nào — viết biến ở đây là nút mất màu trên
   chín trang khách còn lại. */
.locale-switcher-save {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #10282f;
  color: #ffffff;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 13px 30px rgba(16, 40, 47, 0.22);
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.locale-switcher-save:hover {
  transform: translateY(-3px);
  background: #0b8d82;
  box-shadow: 0 16px 35px rgba(11, 141, 130, 0.25);
}
.locale-switcher-save:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}
/* Khổ hẹp: bỏ phần chữ tóm tắt, chỉ còn cờ và mũi tên. Header ở đây chật, mà
   cờ một mình đã nói đủ rằng bấm vào là đổi ngôn ngữ. */
@media (max-width: 1079.98px) {
  .locale-switcher-trigger {
    gap: 4px;
    padding: 4px 7px;
  }

  .locale-switcher-summary {
    display: none;
  }
}
/* Nút Lưu co lại đúng lúc nút bên trang giới thiệu co lại: .about-button có
   sẵn một bản nhỏ ở khổ này, chép nốt cho hai nút giống nhau ở mọi khổ màn
   hình chứ không chỉ ở khổ rộng. */
@media (max-width: 620px) {
  .locale-switcher-save {
    min-height: 46px;
    padding: 10px 17px;
    font-size: 0.72rem;
  }
}
.login-button:hover {
  border-color: #91c8c2;
  background: linear-gradient(135deg, #ffffff, #eaf7f5);
  color: var(--teal-dark);
  box-shadow: 0 11px 25px rgba(26, 91, 89, 0.13);
  transform: translateY(-2px);
}
.login-button:active,
.signup-button:active {
  transform: translateY(0);
}
.button-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #cce3df;
  border-radius: 11px;
  background: #eaf7f4;
  color: #08776e;
  font-size: 0.68rem;
  font-weight: 900;
}
.button-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-button.is-account .button-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
}
.login-button.is-account .button-icon::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #45bf73;
}
.app {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 28px clamp(14px, 3vw, 34px) 56px;
}
.view.is-active {
  display: block;
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-ui);
  line-height: 1.08;
  letter-spacing: 0;
}
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 10px 26px rgba(29, 43, 54, 0.06);
}
.service-panel,
.preview-panel,
.product-info-panel,
.feedback-form {
  padding: 16px;
}
.product-info-panel.is-hien-ra .product-info-card {
  animation: thong-tin-muc-hien 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.product-info-panel.is-hien-ra .product-info-card:nth-child(2) { animation-delay: 0.06s; }
.product-info-panel.is-hien-ra .product-info-row:nth-child(2) .product-info-card { animation-delay: 0.12s; }
.product-info-panel.is-hien-ra .product-info-row:nth-child(2) .product-info-card:nth-child(2) { animation-delay: 0.18s; }
.product-info-panel.is-hien-ra .product-info-row:nth-child(3) .product-info-card { animation-delay: 0.24s; }
.product-info-panel.is-hien-ra .product-info-row:nth-child(3) .product-info-card:nth-child(2) { animation-delay: 0.3s; }
@keyframes thong-tin-hien {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes thong-tin-muc-hien {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.product-info-panel.is-hien-ra,
  .product-info-panel.is-hien-ra .product-info-card {
    animation: none;
  }
}
.product-info-grid {
  display: grid;
  gap: 12px;
}
/* Mỗi hàng tự chia đều theo số mục trong nó (--info-cols do app.js đặt).
   minmax(240px, 1fr) là chỗ quyết định việc co: khi bề ngang không đủ cho 240px
   mỗi cột, auto-fit dồn các mục xuống thành một cột. Nhờ vậy không phải chọn sẵn
   một điểm ngắt cố định — hàng 3 mục co sớm hơn hàng 2 mục, đúng như mong đợi. */
.product-info-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}
/* Bố cục trong một mục thông tin.
   ---------------------------------------------------------------------------
   Người bán chọn ba thứ: ảnh đứng ở đâu so với đoạn chữ (data-info-place), canh
   ngang (--info-img-align), và rộng bao nhiêu phần trăm (--info-img-width).

   Ảnh nằm SAU đoạn chữ trong HTML dù đặt ở đâu, vì đó là thứ tự đọc đúng: tiêu
   đề trước, minh họa sau. Đưa ảnh lên trên hay ra bên trái là việc của
   flex-direction, không phải của thứ tự thẻ. */
.product-info-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.product-info-body[data-info-place="tren"] {
  flex-direction: column-reverse;
}
.product-info-body[data-info-place="trai"] {
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 14px;
}
.product-info-body[data-info-place="phai"] {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.product-info-text {
  flex: 1 1 0;
  min-width: 0;
}
.product-info-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: var(--info-img-align, flex-start);
}
/* Ảnh đứng trên thì khoảng cách phải nhảy sang phía dưới, nếu không nó dính vào
   tiêu đề mà lại hở một quãng phía trên. */
.product-info-body[data-info-place="tren"] .product-info-images {
  margin-top: 0;
  margin-bottom: 10px;
}
/* Ảnh nằm trên/dưới dùng một hàng dọc rộng hết box để `justify-content` vẫn
   canh được ảnh. Bề rộng thật của từng ảnh tiếp tục lấy từ cấu hình quản lý. */
.product-info-body[data-info-place="tren"] .product-info-images,
.product-info-body[data-info-place="duoi"] .product-info-images {
  width: 100%;
}
.product-info-images img {
  width: var(--info-img-width, 100%);
  max-width: var(--info-img-max, 180px);
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.product-info-body[data-info-place="tren"] .product-info-images img,
.product-info-body[data-info-place="duoi"] .product-info-images img {
  width: var(--info-img-width, 100%);
  max-width: var(--info-img-max, none);
}
/* Đứng cạnh đoạn chữ thì phần trăm là bề rộng của cả cột ảnh, và ảnh choán hết
   cột đó — đây là cách hiểu duy nhất giữ được nghĩa "rộng bao nhiêu phần của
   mục" khi ảnh không còn nằm trên cả bề ngang. */
.product-info-body[data-info-place="trai"] .product-info-images,
.product-info-body[data-info-place="phai"] .product-info-images {
  flex: 0 0 var(--info-img-width, 40%);
  margin-top: 0;
}
.product-info-body[data-info-place="trai"] .product-info-images img,
.product-info-body[data-info-place="phai"] .product-info-images img {
  width: 100%;
  max-width: none;
}
/* Màn hình hẹp: hai cột cạnh nhau còn chừng 150px mỗi bên, chữ vỡ vụn. Xếp lại
   thành trên dưới.

   align-items phải trả về stretch cùng lúc: đứng cạnh nhau thì flex-start giữ
   hai cột dính mép trên, nhưng khi đã xếp dọc thì nó bóp bề ngang của khối ảnh
   về vừa nội dung — mà nội dung lại là tấm ảnh rộng 100% của chính khối đó, nên
   ảnh co về 0. Phần trăm người bán đặt vẫn giữ nguyên nghĩa: rộng bấy nhiêu
   phần của mục, dù ảnh đang đứng cạnh chữ hay nằm dưới chữ. */
@media (max-width: 700px) {
  .product-info-body[data-info-place="trai"] {
    /* Ảnh vốn ở bên trái trên desktop sẽ lên trước nội dung khi xếp dọc. */
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .product-info-body[data-info-place="phai"] {
    flex-direction: column;
    align-items: stretch;
  }

  .product-info-body[data-info-place="trai"] .product-info-images,
  .product-info-body[data-info-place="phai"] .product-info-images {
    flex: 0 0 auto;
    margin-top: 10px;
  }

  .product-info-body[data-info-place="trai"] .product-info-images img,
  .product-info-body[data-info-place="phai"] .product-info-images img,
  .product-info-body[data-info-place="tren"] .product-info-images img,
  .product-info-body[data-info-place="duoi"] .product-info-images img {
    /* Phần trăm do quản trị đặt dùng trên desktop. Trên màn hình nhỏ, mọi vị
       trí ảnh đều dùng hết bề ngang để phần nội dung còn dễ xem và dễ đọc. */
    width: 100%;
    max-width: none;
  }
}
.product-info-card {
  display: flex;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}
.product-info-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.product-info-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
/* Restrained typography for product lists and specification tables. */
.product-info-content {
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.product-info-content .product-info-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.35em;
  list-style-position: outside;
}
.product-info-content ul.product-info-list { list-style-type: disc; }
.product-info-content ol.product-info-list { list-style-type: decimal; }
.product-info-content .product-info-list li { padding-left: 0.2em; }
.product-info-content .product-info-list li::marker { color: var(--ink); }
.product-info-card .product-info-content > * + * {
  margin-top: 12px;
}
.product-info-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.product-info-table-scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.product-info-content .product-info-table {
  width: 100%;
  min-width: calc(var(--info-table-columns, 2) * 120px);
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font: inherit;
  line-height: 1.6;
}
.product-info-content .product-info-table th,
.product-info-content .product-info-table td {
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  white-space: normal;
}
.product-info-content .product-info-table th {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.product-info-content .product-info-table td { color: var(--muted); }
.product-info-content .product-info-table tbody tr:last-child td { border-bottom: 0; }
.product-info-content .product-info-table [data-align="center"] { text-align: center; }
.product-info-content .product-info-table [data-align="right"] { text-align: right; }
.admin-record-row:hover,
.admin-record-row:focus-visible,
.admin-record-row.is-active {
  border-color: rgba(19, 151, 143, 0.36);
  background: var(--admin-record-hover-bg);
  transform: translateY(-1px);
}
.admin-order-origin.is-account {
  color: #087d76;
  background: #dff6f1;
}
.admin-order-status-tools .secondary-button {
  width: 100%;
  min-height: 42px;
}
.admin-order-status-tools .secondary-button.is-pending {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
}
.admin-order-copy-field.is-wide {
  grid-column: 1 / -1;
}
.admin-login-card > p:not(.eyebrow) {
  margin-bottom: 20px;
  color: var(--muted);
  line-height: 1.65;
}
.checkout-app {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0 70px;
}
.checkout-panel-heading-row .eyebrow {
  min-width: 0;
  margin: 0;
}
@keyframes checkoutGuestDetailsReveal {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes nhac-o-trong {
  0%, 100% { transform: translateX(0); box-shadow: none; }
  12% { transform: translateX(-7px); }
  28% { transform: translateX(6px); }
  44% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  76% { transform: translateX(-2px); }
  30%, 70% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--service-accent, var(--teal)) 30%, transparent);
  }
}
@keyframes next-step-nhun {
  0%, 72%, 100% { transform: translateY(0); }
  82% { transform: translateY(3px); }
}
/* Người đã tắt hiệu ứng chuyển động thì mũi tên đứng yên. */
@media (prefers-reduced-motion: reduce) {
  .next-step-button svg {
    animation: none;
  }
}
@keyframes totalStepOpenDown {
  from {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-7px) scaleY(0.96);
  }

  to {
    max-height: var(--total-step-open-height);
    margin-top: 14px;
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0) scaleY(1);
  }
}
/* Số đang chạy: nhích lên khi tăng, nhích xuống khi giảm. Chỉ là một cái hích
   nhẹ đi kèm việc đếm, đủ để mắt bắt được hướng thay đổi. */
[data-tong-so],
[data-animated-price] {
  display: inline-block;
  transition: transform 0.18s ease, color 0.18s ease;
}
[data-tong-so].is-counting-up,
[data-animated-price].is-counting-up {
  transform: translateY(-1px);
  color: #2f8f5b;
}
[data-tong-so].is-counting-down,
[data-animated-price].is-counting-down {
  transform: translateY(1px);
  color: #c2653f;
}
@media (prefers-reduced-motion: reduce){
[data-tong-so],
  [data-animated-price] {
    transition: none;
  }
[data-tong-so].is-counting-up,
  [data-tong-so].is-counting-down,
  [data-animated-price].is-counting-up,
  [data-animated-price].is-counting-down {
    transform: none;
    color: inherit;
  }
}
@keyframes checkout-address-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes checkout-address-modal-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.checkout-address-empty .secondary-button {
  justify-self: center;
  margin-top: 5px;
}
.checkout-address-empty.is-error strong {
  color: #a24141;
}
.invoice-heading-copy .eyebrow {
  margin-bottom: 3px;
  color: #6e8ca5;
  letter-spacing: 0.22em;
}
.panel-heading.row,
.feed-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
/* The builder's two panels head with the eyebrow alone — no title line under
   it — so the eyebrow drops the gap it normally leaves for one, and in the crop
   panel it sits on the same line as the status pill. */
.panel-heading > .eyebrow:only-child,
.panel-heading.row > .eyebrow {
  margin-bottom: 0;
}
.service-grid,
.feedback-form,
.checkout-form,
.feedback-list,
.orders-list {
  display: grid;
  gap: 12px;
}
.service-card:hover,
.service-card.is-active,
.size-card:hover,
.size-card.is-active,
.sample-button:hover,
.sample-button.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.service-card.is-active .service-code {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 2px rgba(19, 155, 143, 0.24);
}
.option-header span,
#sizeHint,
#unitPrice {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}
#previewImage {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  -webkit-user-drag: none;
  user-select: none;
  transform-origin: center;
  will-change: left, top, width, height, transform;
}
.product-stage.has-image.is-dragging {
  cursor: grabbing;
}
.crop-tool,
.checkout-form label,
.feedback-form label,
.login-modal label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  transition: color 160ms ease;
}
@keyframes crop-center-arrival {
  0%,
  100% {
    box-shadow:
      0 2px 7px rgba(6, 115, 108, 0.16),
      0 0 0 0 rgba(23, 156, 145, 0.12);
  }
  48% {
    box-shadow:
      0 3px 11px rgba(6, 115, 108, 0.24),
      0 0 0 6px rgba(23, 156, 145, 0.13);
  }
}
/* Lật và xoay nằm ở transform của chính tấm ảnh. Bốn thuộc tính hình học đi kèm
   vì xoay 90 độ làm khung đổi chiều, ảnh phải đổi bề ngang và bề cao theo. */
.crop-workspace.is-crop-motion #previewImage {
  transition:
    left 400ms cubic-bezier(0.22, 1, 0.36, 1),
    top 400ms cubic-bezier(0.22, 1, 0.36, 1),
    width 400ms cubic-bezier(0.22, 1, 0.36, 1),
    height 400ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes crop-zoom-bump {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  16% {
    transform: translate3d(-6px, 0, 0);
  }
  34% {
    transform: translate3d(5px, 0, 0);
  }
  52% {
    transform: translate3d(-3.5px, 0, 0);
  }
  70% {
    transform: translate3d(2px, 0, 0);
  }
  86% {
    transform: translate3d(-1px, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce){
.crop-workspace.is-crop-motion #previewImageFrame,
  .crop-workspace.is-crop-motion #previewImage {
    transition: none;
  }
}
.crop-confirm-button.is-dragging {
  border-color: #67bdb5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 13px 28px rgba(17, 112, 102, 0.16);
  cursor: grabbing;
}
.crop-confirm-button.is-dragging .crop-confirm-fill {
  transition: none;
}
.crop-confirm-button.is-dragging .crop-confirm-text,
.crop-confirm-button.is-dragging .crop-confirm-complete-label {
  transition: none;
}
@keyframes crop-confirm-label-shine {
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -80% 0;
  }
}
@keyframes crop-confirm-marquee-scroll {
  0%,
  16% {
    transform: translate3d(0, 0, 0);
  }
  82%,
  96% {
    transform: translate3d(var(--confirm-marquee-end, 0px), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.crop-confirm-button.is-dragging .crop-confirm-thumb {
  box-shadow: 0 7px 18px rgba(8, 119, 110, 0.32);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.crop-confirm-button.is-at-start:not(.is-disabled):not(.is-dragging):not(.is-loading) .crop-confirm-thumb {
  animation: crop-confirm-thumb-hint 11.3s ease-in-out infinite;
}
.crop-confirm-button.is-at-start:not(.is-disabled):not(.is-dragging):not(.is-loading) .crop-confirm-fill {
  animation: crop-confirm-fill-hint 11.3s ease-in-out infinite;
}
@keyframes crop-confirm-thumb-hint {
  0%,
  88.5%,
  93.5%,
  97.5%,
  100% {
    translate: 0 0;
  }
  91%,
  96% {
    translate: 11px 0;
  }
}
@keyframes crop-confirm-fill-hint {
  0%,
  88.5%,
  93.5%,
  97.5%,
  100% {
    width: var(--confirm-slide-fill);
  }
  91%,
  96% {
    width: calc(var(--confirm-slide-fill) + 11px);
  }
}
@keyframes crop-confirm-spin {
  to {
    transform: scale(1) rotate(360deg);
  }
}
.summary-row.total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 900;
}
.summary-row.total strong {
  color: var(--coral);
  font-size: 1.16rem;
}
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eef3f6;
}
.segmented button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}
.segmented button.is-active {
  background: var(--paper);
  color: var(--teal-dark);
  box-shadow: 0 5px 12px rgba(24, 35, 45, 0.08);
}
.auth-tabs {
  margin-right: 42px;
}
.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible,
.password-visibility-toggle.is-visible {
  color: var(--teal-dark);
  background: rgba(19, 155, 143, 0.1);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input),
textarea,
select {
  width: 100%;
  border: 1px solid rgba(185, 199, 211, 0.78);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 251, 0.94));
  color: var(--ink);
  padding: 11px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 6px 16px rgba(29, 43, 54, 0.04);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}
textarea {
  min-height: 92px;
  resize: vertical;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input)::placeholder,
textarea::placeholder {
  color: #8fa0aa;
  opacity: 0.86;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input):hover,
textarea:hover,
select:hover {
  border-color: rgba(19, 155, 143, 0.32);
  background:
    linear-gradient(180deg, #ffffff, #f8fcfb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(8, 119, 110, 0.06);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input):focus,
textarea:focus,
select:focus {
  border-color: rgba(19, 155, 143, 0.68);
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(19, 155, 143, 0.12),
    0 10px 22px rgba(8, 119, 110, 0.09);
  outline: none;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input):disabled,
textarea:disabled,
select:disabled {
  border-color: rgba(185, 199, 211, 0.45);
  background: #eef3f4;
  color: #87949c;
  box-shadow: none;
  cursor: not-allowed;
}
/* Safari trên iPhone tự phóng trang khi focus một control có cỡ chữ dưới 16px.
   Giữ ngưỡng này cho các trường nhập thật trên màn hình cảm ứng nhỏ để viewport
   đứng nguyên, thay vì cố ép thu phóng lại sau blur và làm hỏng pinch zoom. */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}
.checkout-form label:focus-within,
.feedback-form label:focus-within,
.login-modal label:focus-within {
  color: var(--teal-dark);
}
.saved-address-actions .secondary-button,
.saved-address-actions .text-button {
  min-height: 38px;
}
button:focus-visible {
  outline: 3px solid rgba(19, 155, 143, 0.24);
  outline-offset: 2px;
}
.primary-button,
.secondary-button,
.danger-button,
.text-button {
  min-height: 42px;
  border-radius: var(--radius);
  font-weight: 900;
}
.primary-button {
  border: 1px solid var(--teal-dark);
  background: var(--teal);
  color: white;
  padding: 0 14px;
}
.primary-button:hover {
  background: var(--teal-dark);
}
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.primary-button:disabled:hover {
  background: var(--teal);
}
.secondary-button {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  padding: 0 12px;
}
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 6px;
  color: var(--teal-dark);
  text-decoration: none;
}
.full {
  width: 100%;
}
.view.find-view.is-active {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 24px;
}
body[data-page="find"] {
  overflow-x: clip;
}
.find-hero-slide.is-active {
  opacity: 1;
}
.find-hero-slide.is-motion-ready {
  animation: find-hero-cover-motion 6500ms ease both;
}
@keyframes find-hero-cover-motion {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce){
.find-hero-slide,
  .find-hero-slide.is-motion-ready {
    transform: scale(1);
    animation: none;
  }
}
.find-tab.is-active {
  background: linear-gradient(135deg, #78addc, #5f97c8);
  color: #ffffff;
  box-shadow:
    0 7px 16px rgba(76, 133, 181, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: none;
}
.find-tabs.is-indicator-ready .find-tab.is-active {
  background: transparent;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine){
.find-suggestions.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
  }
.find-suggestions.is-dragging button {
    pointer-events: none;
  }
}
.find-suggestions button:hover,
.find-suggestions button.is-active {
  border-color: #a7ccdf;
  background: rgba(231, 244, 250, 0.96);
  color: #173b5d;
}
body[data-page="find"] .gallery-gap-filler.is-left img {
  left: -92px;
  bottom: -46px;
  width: 324px;
  height: 424px;
}
body[data-page="find"] .gallery-gap-filler.is-right img {
  right: -84px;
  bottom: -76px;
  width: 322px;
  height: 433px;
  opacity: 0.84;
}
@keyframes gallery-card-chaotic-reveal {
  0% {
    opacity: 0;
    transform: translate3d(var(--gallery-reveal-x), var(--gallery-reveal-y), 0)
      rotate(var(--gallery-reveal-rotate)) scale(0.94);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}
.gallery-icon-button.is-active svg {
  fill: currentColor;
}
.gallery-icon-button.card-save-button.is-active {
  background: var(--teal);
}
/* Modal đánh giá tự khóa cuộn trang ngay khi mở. Thanh cuộn trang dùng chuyển
   động rời màn hình có độ trễ cho các modal khác; bỏ độ trễ tại đây để nó
   không lóe lên trong khung đầu tiên của modal. */
body.feedback-modal-open .page-scrollbar {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, calc(100vh + 18px), 0);
  transition: none;
}
.feedback-modal-backdrop {
  position: fixed;
  z-index: 230;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(10, 25, 32, 0.62);
  backdrop-filter: blur(8px);
  animation: feedbackBackdropIn 180ms ease both;
}
.feedback-modal-backdrop[hidden] {
  display: none;
}
.feedback-form.feedback-modal {
  position: relative;
  top: auto;
  width: min(560px, 100%);
  max-height: calc(100dvh - 36px);
  padding: 22px;
  overflow: auto;
  background: #fff;
  box-shadow: 0 28px 90px rgba(8, 24, 31, 0.36);
  animation: feedbackModalIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feedback-modal .panel-heading {
  padding-right: 44px;
}
.feedback-modal > .modal-close {
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #eef5f4;
  cursor: pointer;
}
.feedback-modal > .modal-close:hover,
.feedback-modal > .modal-close:focus-visible {
  color: #fff;
  background: var(--teal);
  outline: none;
}
.feedback-order-id-field[hidden] {
  display: none;
}
.feedback-order-lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.feedback-order-lookup-row .secondary-button {
  min-height: 44px;
  padding: 9px 14px;
}
.feedback-form-error {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}
.feedback-form-error {
  color: #a23c49;
  background: #fff0f1;
}
.feedback-order-summary {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #bfe0db;
  border-radius: 13px;
  background: #f3fbf9;
}
.feedback-rating-field {
  display: grid;
  gap: 7px;
  padding: 0;
  border: 0;
}
.feedback-rating-field legend {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}
.feedback-star-picker {
  display: inline-flex;
  width: max-content;
  gap: 5px;
}
.feedback-star-picker button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #d8e1e3;
  border-radius: 11px;
  color: #c7d0d2;
  background: #f7f9f9;
  font: inherit;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.feedback-star-picker button span {
  font-size: 1.55rem;
  line-height: 1;
}
.feedback-star-picker button:hover,
.feedback-star-picker button:focus-visible {
  border-color: #e7b53c;
  color: #e7b53c;
  background: #fff9e8;
  outline: none;
  transform: translateY(-1px);
}
.feedback-star-picker button.is-selected {
  border-color: #e7b53c;
  color: #f2b928;
  background: #fff7d9;
}
.feedback-rating-field small,
.feedback-form label > small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
}
@keyframes feedbackBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes feedbackModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 640px){
.feedback-modal-backdrop {
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }
.feedback-form.feedback-modal {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 18px;
  }
.feedback-star-picker {
    width: 100%;
  }
.feedback-star-picker button {
    flex: 1 1 0;
    width: auto;
  }
}
@media (max-width: 420px){
.feedback-order-lookup-row {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce){
.feedback-modal-backdrop,
  .feedback-form.feedback-modal {
    animation: none;
  }
}
.feedback-form.feedback-modal {
  width: min(720px, 100%);
  max-height: calc(100dvh - 36px);
  gap: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(206, 224, 225, 0.94);
  border-radius: 24px;
  background: #f6f9f9;
  box-shadow: 0 34px 100px rgba(8, 24, 31, 0.4);
}
.feedback-modal > .modal-close {
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 14px rgba(26, 55, 63, 0.08);
}
.feedback-modal-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding: 26px 72px 24px 26px;
  border-bottom: 1px solid #dce8e8;
  background:
    radial-gradient(circle at 90% 12%, rgba(244, 189, 79, 0.18), transparent 26%),
    linear-gradient(135deg, #fff, #eef9f7);
}
.feedback-modal-heading-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, var(--teal), #08776e);
  box-shadow: 0 12px 24px rgba(19, 155, 143, 0.22);
}
.feedback-modal-heading-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.feedback-modal-heading > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.feedback-modal-heading p,
.feedback-modal-heading h2 {
  margin: 0;
}
.feedback-modal-heading h2 {
  font-family: var(--font-brand);
  font-size: 1.5rem;
}
.feedback-modal-heading > div > span {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.55;
}
.feedback-form.is-account-product-picker .feedback-form-body,
.feedback-form.is-account-product-picker .feedback-form-footer,
.feedback-form.is-account-product-picker .feedback-already-submitted {
  display: none;
}
.feedback-account-product-picker {
  display: grid;
  gap: 15px;
  min-height: 390px;
  align-content: start;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(244, 194, 89, 0.12), transparent 28%),
    linear-gradient(145deg, #f8fffd, #eef8f6);
  animation: feedbackProductPickerEnter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feedback-account-product-picker[hidden] {
  display: none;
}
.feedback-form.is-product-picker-leaving .feedback-account-product-picker {
  pointer-events: none;
  animation: feedbackProductPickerLeave 220ms ease both;
}
.feedback-form.is-feedback-form-entering .feedback-form-body {
  animation: feedbackFormStageEnter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes feedbackProductPickerEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
}
@keyframes feedbackProductPickerLeave {
  to {
    opacity: 0;
    transform: translateX(-28px) scale(0.985);
  }
}
@keyframes feedbackFormStageEnter {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.99);
  }
}
@media (prefers-reduced-motion: reduce){
.feedback-account-product-picker,
  .feedback-form.is-product-picker-leaving .feedback-account-product-picker,
  .feedback-form.is-feedback-form-entering .feedback-form-body {
    animation: none;
  }
}
.feedback-form.is-already-feedback {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(244, 189, 79, 0.16), transparent 34%),
    linear-gradient(155deg, #ffffff, #eef9f7);
}
.feedback-form.is-already-feedback .feedback-modal-heading,
.feedback-form.is-already-feedback .feedback-form-body,
.feedback-form.is-already-feedback .feedback-form-footer {
  display: none;
}
.feedback-already-submitted {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 470px;
  padding: 60px 54px 48px;
  text-align: center;
  animation: feedbackAlreadySubmittedIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feedback-already-submitted-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border: 1px solid rgba(19, 155, 143, 0.18);
  border-radius: 25px;
  color: #ffffff;
  background:
    linear-gradient(145deg, #27b6a9, #087b72);
  box-shadow:
    0 18px 34px rgba(9, 130, 120, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.feedback-already-submitted-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.feedback-already-submitted .eyebrow {
  margin: 0 0 8px;
}
.feedback-already-submitted h2 {
  max-width: 520px;
  margin: 0;
  color: #263f45;
  font-family: var(--font-brand);
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.2;
}
.feedback-already-submitted > p:not(.eyebrow) {
  max-width: 510px;
  margin: 14px 0 0;
  color: #60777b;
  font-size: 0.78rem;
  line-height: 1.7;
}
.feedback-already-submitted > p strong {
  color: var(--teal-dark);
  overflow-wrap: anywhere;
}
.feedback-already-submitted-note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  max-width: 510px;
  margin-top: 20px;
  padding: 11px 13px;
  border: 1px solid #d9e8e6;
  border-radius: 13px;
  color: #6c8083;
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.55;
  text-align: left;
}
.feedback-already-submitted-note > span:first-child {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--teal-dark);
  background: #e5f5f2;
  font-family: Georgia, serif;
  font-size: 0.7rem;
  font-weight: 900;
}
.feedback-already-submitted-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.feedback-already-submitted-actions button {
  min-height: 46px;
  border-radius: 13px;
}
@keyframes feedbackAlreadySubmittedIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.feedback-form-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.feedback-form-section {
  display: grid;
  gap: 14px;
  padding: 17px;
  border: 1px solid #dce7e8;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(30, 56, 66, 0.045);
}
.feedback-section-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.feedback-section-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--teal-dark);
  background: #e9f7f4;
  font-size: 0.62rem;
  font-weight: 900;
}
.feedback-section-heading > div {
  display: grid;
  gap: 1px;
}
.feedback-section-heading strong {
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 0.78rem;
}
.feedback-section-heading small {
  color: var(--muted);
  font-size: 0.59rem;
  font-weight: 600;
  line-height: 1.5;
}
.feedback-form.feedback-modal label {
  gap: 6px;
  font-size: 0.7rem;
}
.feedback-order-email-field input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #cbdcde;
  border-radius: 12px;
  color: var(--ink);
  background: #fbfdfd;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}
.feedback-order-email-field input:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(19, 155, 143, 0.11);
}
.feedback-order-email-field small {
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.45;
}
.feedback-form.is-order-verified .feedback-experience-section {
  animation: feedbackExperienceIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feedback-form.feedback-modal.is-feedback-layout-transitioning {
  overflow-y: hidden;
  overflow-anchor: none;
  transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}
.feedback-form.is-order-verified .feedback-order-section {
  animation: feedbackVerifiedOrderIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feedback-form.is-order-verified .feedback-form-footer {
  animation: feedbackVerifiedFooterIn 340ms 70ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feedback-form.is-order-verified .feedback-order-email-field,
.feedback-form.is-order-verified .feedback-order-id-field {
  display: none;
}
@keyframes feedbackExperienceIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes feedbackVerifiedOrderIn {
  from {
    opacity: 0.82;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes feedbackVerifiedFooterIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
.feedback-form.feedback-modal.is-feedback-layout-transitioning {
    transition: none;
  }
.feedback-form.is-order-verified .feedback-order-section,
  .feedback-form.is-order-verified .feedback-experience-section,
  .feedback-form.is-order-verified .feedback-form-footer {
    animation: none;
  }
}
.feedback-order-lookup-row {
  gap: 9px;
}
.feedback-order-lookup-row input {
  min-height: 46px;
  padding-inline: 14px;
  border-color: #cbdcde;
  border-radius: 12px;
  background: #fbfdfd;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.015em;
}
.feedback-order-lookup-row .secondary-button {
  display: inline-flex;
  gap: 7px;
  min-height: 46px;
  padding: 9px 15px;
  border-color: #bdd8d5;
  color: var(--teal-dark);
  background: #f0f9f7;
}
.feedback-order-lookup-row .secondary-button:hover,
.feedback-order-lookup-row .secondary-button:focus-visible {
  border-color: var(--teal);
  background: #e5f6f2;
  outline: none;
}
.feedback-order-lookup-row .secondary-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}
.feedback-form-error {
  border: 1px solid transparent;
  border-radius: 12px;
}
.feedback-form-error {
  margin: 0 18px 18px;
  border-color: #f1cdd2;
}
.feedback-order-summary {
  padding: 15px;
  border-color: #c9e4df;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5fcfa, #eef9f7);
}
.feedback-rating-field {
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid #e4e9df;
  border-radius: 14px;
  background: #fffdf7;
}
.feedback-rating-field legend {
  margin: 0 0 4px;
  padding: 0 4px;
  font-size: 0.7rem;
}
.feedback-rating-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.feedback-star-picker {
  flex: 0 0 auto;
  gap: 6px;
}
.feedback-star-picker button {
  width: 44px;
  height: 44px;
  border-color: #e1e3d9;
  border-radius: 13px;
  background: #fff;
}
.feedback-star-picker button span {
  font-size: 1.62rem;
}
.feedback-rating-field #feedbackRatingLabel {
  max-width: 180px;
  color: #846d37;
  text-align: right;
  line-height: 1.45;
}
.feedback-content-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: stretch;
}
.feedback-field-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.feedback-field-title em {
  padding: 3px 6px;
  border-radius: 999px;
  color: #a26022;
  background: #fff2df;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 800;
}
.feedback-upload-field {
  display: grid;
  align-content: start;
  gap: 7px;
}
.feedback-upload-box {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-content: center;
  align-items: center;
  min-height: 132px;
  padding: 16px;
  overflow: hidden;
  border: 1px dashed #9fcfc9;
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 10%, rgba(244, 189, 79, 0.12), transparent 30%),
    #f3faf8;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.feedback-upload-box:hover,
.feedback-upload-box:focus-within,
.feedback-upload-field.has-file .feedback-upload-box {
  border-color: var(--teal);
  background: #edf9f6;
  box-shadow: 0 0 0 4px rgba(19, 155, 143, 0.08);
}
.feedback-upload-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--teal-dark);
  background: #dff3ef;
}
.feedback-upload-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.feedback-upload-box > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.feedback-upload-box strong {
  font-size: 0.68rem;
}
.feedback-upload-box small {
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1.45;
}
.feedback-upload-box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.feedback-upload-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.feedback-upload-file-name {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-upload-field.has-file .feedback-upload-file-name {
  color: var(--teal-dark);
  font-weight: 800;
}
.feedback-comment-field textarea {
  min-height: 132px;
  padding: 13px 14px;
  border-color: #cbdcde;
  border-radius: 14px;
  background: #fbfdfd;
  font-size: 0.7rem;
  line-height: 1.65;
  resize: vertical;
}
.feedback-comment-field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(19, 155, 143, 0.09);
  outline: none;
}
.feedback-form-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  border-top: 1px solid #dce7e8;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}
.feedback-form-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1.45;
}
.feedback-form-note svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--teal-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.feedback-submit-button {
  display: inline-flex;
  justify-content: center;
  gap: 9px;
  min-width: 176px;
  min-height: 48px;
  border-radius: 13px;
  box-shadow: 0 10px 22px rgba(19, 155, 143, 0.18);
}
.feedback-submit-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.feedback-submit-button:disabled {
  box-shadow: none;
}
@media (max-width: 640px){
.feedback-form.feedback-modal {
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 20px;
  }
.feedback-modal-heading {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 18px 50px 17px 16px;
  }
.feedback-modal-heading-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
.feedback-modal-heading h2 {
    overflow: visible;
    font-size: 1.1rem;
    line-height: 1.18;
    text-overflow: clip;
    white-space: normal;
  }
.feedback-account-product-picker {
    min-height: 360px;
    padding: 13px;
  }
.feedback-already-submitted {
    min-height: 430px;
    padding: 54px 20px 34px;
  }
.feedback-already-submitted-icon {
    width: 64px;
    height: 64px;
    border-radius: 21px;
  }
.feedback-already-submitted h2 {
    font-size: 1.38rem;
  }
.feedback-already-submitted > p:not(.eyebrow) {
    font-size: 0.7rem;
  }
.feedback-already-submitted-actions {
    display: grid;
    width: 100%;
  }
.feedback-already-submitted-actions button {
    width: 100%;
  }
.feedback-form-body {
    gap: 11px;
    padding: 11px;
  }
.feedback-form-section {
    gap: 12px;
    padding: 14px;
    border-radius: 15px;
  }
.feedback-rating-row {
    display: grid;
  }
.feedback-rating-field #feedbackRatingLabel {
    max-width: none;
    text-align: left;
  }
.feedback-content-grid {
    grid-template-columns: 1fr;
  }
.feedback-upload-box {
    min-height: 112px;
  }
.feedback-form-error {
    margin: 0 11px 11px;
  }
.feedback-form-footer {
    grid-template-columns: 1fr;
    gap: 10px;
    padding:
      12px
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }
.feedback-submit-button {
    width: 100%;
  }
}
@keyframes orderPanelLeaveForward {
  to {
    opacity: 0;
    transform: translateX(-32px) scale(0.985);
  }
}
@keyframes orderPanelEnterForward {
  from {
    opacity: 0;
    transform: translateX(32px) scale(0.985);
  }
}
@keyframes orderPanelLeaveBack {
  to {
    opacity: 0;
    transform: translateX(32px) scale(0.985);
  }
}
@keyframes orderPanelEnterBack {
  from {
    opacity: 0;
    transform: translateX(-32px) scale(0.985);
  }
}
.order-tab-button:hover:not(:disabled):not(.is-active) {
  color: var(--ink);
}
/* Mặt đang xem là một viên TÔ ĐẶC màu thương hiệu, không phải viên trắng trên
   nền xám.

   Bản trước theo đúng lối của `.segmented` có sẵn: nền `--paper` trên rãnh
   `#f2f6f8`. Hai màu đó chênh nhau chưa tới bốn phần trăm độ sáng, nên trên màn
   hình thường hoặc dưới ánh sáng chói thì gần như không thấy nút nào đang bật —
   đúng phản ánh của người dùng. Tô đặc thì khác biệt không còn nằm ở sắc độ mà
   ở việc CÓ hay KHÔNG có mảng màu, thứ nhìn thấy được ở mọi điều kiện.

   Dùng `--teal-dark` chứ không phải `--teal`: chữ trắng trên `--teal` chỉ đạt
   3.4:1, dưới ngưỡng 4.5:1 mà cỡ chữ này cần. Trên `--teal-dark` là 5.4:1. */
.order-tab-button.is-active {
  background: var(--teal-dark);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(8, 119, 110, 0.34);
}
.order-detail-section dl > div.is-wide {
  grid-column: 1 / -1;
}
.order-delete-modal .eyebrow {
  margin: 0 0 7px;
  color: #c3352d;
}
.order-delete-modal > p:not(.eyebrow) {
  margin: 13px 0 0;
  color: #725f5d;
  font-size: 0.72rem;
  line-height: 1.7;
}
@media (max-width: 760px){
.order-detail-section dl > div.is-wide {
    grid-column: auto;
  }
}
.toast {
  --toast-accent: #6f9aa6;
  --toast-accent-dark: #294764;
  --toast-tint: #f5fbfd;
  --toast-wash: #a9cfdf;
  --toast-warm-wash: #f7d7bb;
  --toast-icon: url("assets/ui/toast-icons/toast-info-watercolor.png");
  --toast-brush: url("assets/ui/toast-icons/toast-brush-info.png");
  --toast-note: url("assets/ui/toast-icons/toast-note-info.png");
  position: fixed;
  top: calc(var(--header-h) + 14px);
  left: max(18px, env(safe-area-inset-left));
  right: auto;
  bottom: auto;
  z-index: 220;
  width: min(580px, calc(100vw - 32px));
  min-height: 108px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  overflow: hidden;
  padding: 14px 184px 16px 14px;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 74%, white);
  border-radius: 22px;
  background:
    var(--toast-note) right 46px center / 116px auto no-repeat,
    var(--toast-brush) right bottom / 245px auto no-repeat,
    linear-gradient(118deg, color-mix(in srgb, var(--toast-tint) 50%, #fffefb), #fffefb 64%);
  color: #172b45;
  box-shadow:
    0 18px 42px rgba(23, 43, 69, 0.1),
    0 4px 13px color-mix(in srgb, var(--toast-accent) 11%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.52;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-16px, -18px, 0) scale(0.985);
  transition:
    opacity 210ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.toast[hidden] {
  display: none;
}
.toast.has-image {
  grid-template-columns: 76px minmax(0, 1fr);
}
.toast.has-image::before {
  display: none;
}
.toast > span {
  position: relative;
  z-index: 1;
}
.toast::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 84px;
  height: 76px;
  border-right: 1px solid color-mix(in srgb, var(--toast-accent) 34%, transparent);
  background: var(--toast-icon) left center / 70px 70px no-repeat;
}
.toast::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(90deg, #bc944d 0%, var(--toast-accent) 48%, #f2bfc3 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.toast[data-toast-kind="error"] {
  --toast-accent: #c9797d;
  --toast-accent-dark: #8e4e57;
  --toast-tint: #fff7f6;
  --toast-wash: #f2bfc3;
  --toast-warm-wash: #f7d7bb;
  --toast-icon: url("assets/ui/toast-icons/toast-error-watercolor.png");
  --toast-brush: url("assets/ui/toast-icons/toast-brush-error.png");
  --toast-note: url("assets/ui/toast-icons/toast-note-error.png");
}
.toast[data-toast-kind="success"] {
  --toast-accent: #7f9e93;
  --toast-accent-dark: #4f7367;
  --toast-tint: #f5faf7;
  --toast-wash: #bfd8cf;
  --toast-warm-wash: #f6e5c5;
  --toast-icon: url("assets/ui/toast-icons/toast-success-watercolor.png");
  --toast-brush: url("assets/ui/toast-icons/toast-brush-success.png");
  --toast-note: url("assets/ui/toast-icons/toast-note-success.png");
}
.toast[data-toast-kind="warning"] {
  --toast-accent: #bc944d;
  --toast-accent-dark: #826329;
  --toast-tint: #fffbf3;
  --toast-wash: #f6e5c5;
  --toast-warm-wash: #f7d7bb;
  --toast-icon: url("assets/ui/toast-icons/toast-warning-watercolor.png");
  --toast-brush: url("assets/ui/toast-icons/toast-brush-warning.png");
  --toast-note: url("assets/ui/toast-icons/toast-note-warning.png");
}
.toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.toast[data-toast-ready].is-visible::after {
  opacity: 1;
  animation: toast-lifetime var(--toast-duration, 4200ms) linear forwards;
}
.toast:not([data-toast-ready]):not([hidden]) {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
@keyframes toast-lifetime {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce){
.toast {
    transition: none;
  }
.toast[data-toast-ready].is-visible::after {
    animation: none;
    transform: scaleX(1);
  }
}
@media (max-width: 560px){
.toast {
    top: calc(var(--header-h) + 10px);
    left: max(10px, env(safe-area-inset-left));
    width: calc(100vw - 20px);
    min-height: 92px;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 132px 13px 10px;
    border-radius: 18px;
    background-position: right 34px center, right bottom, center;
    background-size: 80px auto, 175px auto, auto;
    font-size: 0.78rem;
  }
.toast::before {
    width: 66px;
    height: 62px;
    background-size: 56px 56px;
  }
.toast.has-image {
    grid-template-columns: 62px minmax(0, 1fr);
  }
}
@media (max-width: 360px){
.toast {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    padding-right: 112px;
    background-position: right 30px center, right bottom, center;
    background-size: 64px auto, 148px auto, auto;
    font-size: 0.74rem;
  }
.toast::before {
    width: 58px;
    height: 56px;
    background-size: 50px 50px;
  }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 30, 39, 0.45);
}
.modal-backdrop[hidden] {
  display: none;
}
.login-modal {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(460px, 100%);
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.quality-card .modal-close {
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
}
.size-menu-option:hover,
.size-menu-option.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.image-choice:hover,
.image-choice.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.image-choice.is-active .choice-icon {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 2px rgba(19, 155, 143, 0.28);
}
.auth-panel-shell {
  position: relative;
  overflow: hidden;
  transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-panel-shell.is-animating {
  will-change: height;
}
.auth-panel {
  display: grid;
  gap: 14px;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-panel.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
}
/* Hiệu ứng hiện ra chỉ chạy khi VỪA MỞ hộp, không chạy khi đổi bảng.
   ---------------------------------------------------------------------------
   Trước đây keyframe này gắn thẳng vào `.auth-panel.is-active` và bị chặn bằng
   `.auth-panel-shell.is-animating`. Nhưng lúc chuyển bảng xong, hàm dọn gỡ
   `is-animating` — luật chặn biến mất, keyframe lập tức chạy lại từ `opacity: 0`
   trên bảng đang hiện sẵn. Đó là cú nháy của các ô nhập và nút ngay sau khi
   chuyển xong.

   Nay hiệu ứng buộc vào lớp `vua-mo` do `openLogin()` gắn và `animateAuthPanels()`
   gỡ ngay ở lần đổi bảng đầu tiên. Mở hộp thì vẫn có hiệu ứng vào; đổi bảng thì
   chỉ còn phần trượt/mờ của chính lượt chuyển, không có gì chạy lại. */
#loginModal.vua-mo .auth-panel.is-active {
  animation: authPanelEnter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.auth-panel.is-entering,
.auth-panel.is-exiting {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
}
.auth-panel.is-entering {
  opacity: 0;
  transform: translateX(var(--auth-enter-offset, 18px));
}
.auth-panel.is-exiting {
  opacity: 0;
  transform: translateX(var(--auth-exit-offset, -18px));
}
#loginModal[data-auth-mode="login"] .auth-panel.is-active {
  --auth-active-enter-offset: -12px;
}
#loginModal[data-auth-mode="register"] .auth-panel.is-active {
  --auth-active-enter-offset: 12px;
}
#loginModal[data-auth-mode="forgot"] .auth-panel.is-active {
  --auth-active-enter-offset: -12px;
}
/* Luật chặn cũ không cần nữa: hiệu ứng vào đã buộc vào lớp `vua-mo`, mà lớp đó
   được gỡ ngay khi bắt đầu đổi bảng. */

@media (prefers-reduced-motion: reduce) {
  .auth-panel-shell,
  .auth-panel {
    transition: none;
    animation: none;
  }
}
@keyframes authPanelEnter {
  from {
    opacity: 0;
    transform: translateX(var(--auth-active-enter-offset, 12px));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  font-size: 1.5rem;
}
[hidden] {
  display: none !important;
}
@keyframes serviceMenuOpen {
  from {
    opacity: 0.45;
    transform: translateY(-8px) scaleY(0.72);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@keyframes serviceMenuClose {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.72);
  }
}
@keyframes serviceMenuSettle {
  from {
    opacity: 0.72;
    transform: translateY(-4px) scaleY(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
/* The builder drops to one column here rather than at the 920px the rest of the
   page uses: below this width the two-column split leaves the crop panel too
   narrow to work in, so "Dịch vụ" and "Căn vùng cắt" stack instead.

   949.98 rather than 950 so that 950 itself is still the two-column layout, the
   same edge isMobileStepFlow() in app.js tests against. */
@media (max-width: 949.98px) {
  .builder-layout {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .service-panel,
  .preview-panel,
  .product-info-panel {
    grid-area: auto;
  }

  .product-info-panel {
    grid-column: auto;
  }
}
@media (max-width: 920px){
.feedback-form {
    position: static;
  }
}
/* --------------------------------------------------------------------------
   Phone header, all the way up to 1080px
   --------------------------------------------------------------------------
   Everything that makes the header a phone header now lives in one block
   rather than split across the 920px and 640px breakpoints it grew up in: the
   two-row layout, the full-width menu, the smaller mark and auth controls. The
   whole set switches on together, so there is no width where the header is
   half one design and half the other.

   page-loader.js watches this same width to decide when the top row may slide
   away, so behaviour and appearance change at the same place. */
@media (max-width: 1079.98px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 8px 12px 5px;
  }

  .top-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: start;
    min-width: 0;
    margin-inline: -12px;
    /* 2px all round, except the sides never go inside the notch's cutout —
       env() is 0 on a normal screen, so this stays 2px there. */
    padding:
      2px
      max(2px, env(safe-area-inset-right, 0px))
      0
      max(2px, env(safe-area-inset-left, 0px));
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
    gap: clamp(0px, 0.8vw, 4px);
    overflow-x: hidden;
    overflow-y: visible;
    scroll-padding-inline: 12px;
  }

  .top-nav .nav-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding-inline: clamp(3px, 1.6vw, 10px);
    font-size: clamp(0.68rem, 3.1vw, 0.8rem);
  }

  .brand {
    width: clamp(96px, 34vw, 132px);
  }

  .brand-logo-image {
    height: 38px;
  }

  .auth-actions {
    gap: 5px;
  }

  .login-button,
  .signup-button {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 38px;
    padding: 4px 10px;
    gap: 5px;
  }

  .signup-button span:last-child {
    display: inline;
  }

  .signup-icon {
    display: none;
  }

  .login-button:not(.is-account) .button-icon {
    display: none;
  }

  .login-button.is-account {
    min-height: 40px;
    padding: 3px 9px 3px 4px;
  }

  .login-button.is-account .button-icon {
    display: inline-grid;
    width: 32px;
    height: 32px;
  }

  .button-icon {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 640px){
.app {
    padding-inline: 12px;
  }
.feed-toolbar,
  .panel-heading.row {
    align-items: start;
    flex-direction: column;
  }
}
/* Màn hình cảm ứng không có con trỏ nên khối nút trên ảnh luôn hiện (quy tắc
   ngay bên trên). Ở bố cục bốn cột thẻ ảnh chỉ còn khoảng 210–270 px, đo được
   cụm nút chiếm tới 31% mặt ảnh — che mất đúng thứ khách đang xem. Một và hai
   cột thì thẻ rộng 340–560 px nên vẫn để nguyên.

   Ẩn đi không mất chức năng: chạm vào ảnh vẫn mở cửa sổ xem ảnh, ở đó có đủ nút
   lưu, dùng ảnh và tải xuống. */
@media (hover: none) and (min-width: 921px) {
  body[data-page="find"] .gallery-card .gallery-overlay {
    opacity: 0;
  }

  /* Đã ẩn thì không được ăn cú chạm nữa, nếu không khách bấm vào ảnh lại trúng
     phải nút vô hình. */
  body[data-page="find"] .gallery-card .gallery-use-button,
  body[data-page="find"] .gallery-card .gallery-download-button,
  body[data-page="find"] .gallery-card .gallery-icon-button {
    pointer-events: none;
  }
}
@media print{
.checkout-page .site-header,
  .checkout-page .checkout-breadcrumb,
  .checkout-page-heading,
  .invoice-actions,
  .checkout-page .toast {
    display: none !important;
  }
.checkout-app {
    width: 100%;
    padding: 0;
  }
}
.upload-feedback.is-error {
  border-color: #edb6b6;
  color: #9a3030;
  background: #fff5f5;
}
.upload-dropzone:hover,
.upload-dropzone:focus-visible,
.upload-dropzone.is-dragging {
  border-color: var(--teal);
  background: #e7f7f4;
  transform: translateY(-2px);
  outline: none;
}
.manager-accordion-heading .eyebrow {
  margin: 0;
}
.manager-bulk-collection .primary-button,
.manager-bulk-danger .manager-delete-button {
  width: 100%;
  justify-content: center;
}
.manager-audit-heading .eyebrow,
.manager-audit-heading h3,
.manager-audit-heading p {
  margin: 0;
}
.manager-page-jump .secondary-button {
  padding: 6px 12px;
  font-size: 0.78rem;
}
.manager-page-nav .secondary-button {
  min-width: 38px;
  padding: 6px 10px;
  font-size: 1rem;
  line-height: 1;
}
.manager-page-nav .secondary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Dưới 560px ba nhóm không còn đứng chung một hàng được (170 + 184 + 194 px là
   quá khổ), nên mỗi nhóm chiếm trọn một dòng và tự dàn nhãn sang trái, điều
   khiển sang phải — vẫn ba dòng nhưng nhìn ra chủ ý thay vì so le. */
@media (max-width: 560px) {
  .manager-page-bar > * {
    width: 100%;
    justify-content: space-between;
  }
}
.manager-audit-tag.is-error {
  color: #963434;
  background: #ffe3e3;
}
.manager-audit-tag.is-ok {
  color: #276a4a;
  background: #e4f5ea;
}
/* Màn hình hẹp: chữ nhỏ lại nhưng nút vẫn bấm được bằng ngón tay. */
@media (max-width: 620px) {
  .manager-editor-back {
    padding: 7px 10px;
    font-size: 0.72rem;
  }
}
.image-modal-topbar,
.image-modal-quick-actions,
.image-modal-actions,
.image-order-options,
.image-modal > .modal-close {
  transition: opacity 160ms ease;
}
body.sample-modal-transitioning .image-modal-topbar,
body.sample-modal-transitioning .image-modal-quick-actions,
body.sample-modal-transitioning .image-modal-actions,
body.sample-modal-transitioning .image-order-options,
body.sample-modal-transitioning .image-modal > .modal-close {
  opacity: 0;
  pointer-events: none;
}
.image-modal > .modal-close {
  z-index: 12;
  top: 0;
  right: -52px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 18, 25, 0.4);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  transform: none;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}
.image-modal > .modal-close::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
  transform: translateY(3px);
  background: center / 20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3L17 17M17 3L3 17' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.image-modal > .modal-close:hover,
.image-modal > .modal-close:focus-visible {
  background: rgba(8, 18, 25, 0.72);
  outline: none;
}
.image-modal .modal-quick-action.is-active svg {
  fill: currentColor;
}
.image-modal #sampleSaveButton.is-active {
  border-color: rgba(255, 255, 255, 0.9);
  background: var(--teal);
}
/* Bảng chọn sản phẩm trượt từ dưới lên. Dùng 100% chiều cao của chính bảng nên
   quãng trượt luôn vừa đúng: bảng bắt đầu ở ngay dưới mép nó rồi đẩy lên chỗ. */
@keyframes sampleOptionsEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes sampleSizeMenuEnter {
  from {
    opacity: 0;
    scale: 0.97;
    translate: 0 var(--size-menu-enter-y);
  }

  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce){
.image-order-options,
  .image-modal > .size-picker-menu,
  .image-modal-topbar,
  .image-modal-quick-actions,
  .image-modal-actions,
  .image-modal > .modal-close {
    animation: none;
    transition: none;
  }
}
/* Chỉ từ 950px trở lên mới giấu cụm nút cho tới khi rê chuột. Dưới mốc đó cửa
   sổ dùng bố cục điện thoại — nút neo cố định ở bốn góc màn hình và luôn hiện,
   vì ở khổ đó không có chỗ để nút nổi chồng lên ảnh mà vẫn bấm được. */
@media (min-width: 950px) and (hover: hover) and (pointer: fine) {
  .image-modal-topbar,
  .image-modal-quick-actions,
  .image-modal-actions {
    opacity: 0;
    pointer-events: none;
  }

  .image-modal-stage:hover .image-modal-topbar,
  .image-modal-stage:hover .image-modal-quick-actions,
  .image-modal-stage:hover .image-modal-actions,
  /* Bảng chọn sản phẩm giờ là anh em của khung ảnh chứ không nằm bên trong nó
     nữa, nên phải hỏi từ cấp .image-modal. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-modal-topbar,
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-modal-quick-actions,
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-modal-actions {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Bố cục điện thoại của cửa sổ xem ảnh phóng to: cửa sổ chiếm gần trọn màn
   hình, còn thanh tiêu đề, cụm lưu/thích, nút đóng và cụm nút dưới đều neo cố
   định vào bốn góc màn hình thay vì nổi chồng lên ảnh.

   Dùng từ dưới 950px chứ không chỉ dưới 640px: trong khoảng giữa, cửa sổ được
   đặt vừa khít với ảnh nên với ảnh ngang nó rất thấp, nút nổi chồng lên ảnh
   chiếm gần hết phần nhìn được. */
@media (max-width: 949px) {
  .image-modal-backdrop,
  .image-modal {
    will-change: auto;
  }

  /* Cụm nút dưới neo cố định vào đáy màn hình nên nó nằm đè lên mọi thứ. Chừa
     sẵn một dải đáy đúng bằng chỗ nó chiếm (38px nút + 10px cách đáy + 8px thở)
     thì cửa sổ — và bảng chọn bên trong — không bao giờ bị nó che.

     Chừa bằng padding của lớp nền chứ không bằng max-height của cửa sổ: cửa sổ
     được căn giữa, cắt bớt chiều cao thì phần chừa chia đều cả trên lẫn dưới,
     phí một nửa. */
  .image-modal-backdrop {
    padding: 8px 8px calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .image-modal {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border-radius: 14px;
  }

  body[data-page="find"] .image-modal {
    border-radius: 0;
  }

  .image-modal-topbar {
    position: fixed;
    z-index: 90;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: max(64px, calc(env(safe-area-inset-right, 0px) + 60px));
    left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
    gap: 8px;
    max-width: none;
  }

  /* Cùng `top` với nút đóng ở góc đối diện để hai bên thẳng mép trên.
     Trước đây là +32px, tức thấp hơn nút đóng đúng 24px. */
  .image-modal-quick-actions {
    position: fixed;
    z-index: 91;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: auto;
    left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
  }

  .image-modal-title {
    max-width: 100%;
    padding: 0;
  }

  .image-modal-title h2 {
    max-width: 100%;
  }

  .image-modal > .modal-close {
    position: fixed;
    z-index: 92;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
    width: 40px;
    height: 40px;
    transform: none;
  }

  .image-modal-actions {
    position: fixed;
    z-index: 90;
    right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    display: flex;
    grid-template-columns: none;
  }

  .image-modal .modal-use-button {
    min-width: 124px;
  }

  .image-order-options {
    top: 68px;
    right: 12px;
    bottom: 68px;
    left: 12px;
    width: auto;
    max-height: none;
    padding: 15px;
  }

  .image-order-options-fields {
    grid-template-columns: 1fr;
  }

  .image-order-options .service-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-order-options .service-choice-grid .service-choice {
    min-width: 0;
  }

}
/* ------------------------------------------------------------------------- */
/* Bảng chọn sản phẩm trên màn hình nhỏ                                       */
/* ------------------------------------------------------------------------- */

/* Cửa sổ xem ảnh được đặt kích thước vừa khít với ảnh (app.js tính
   --sample-modal-fit-*), nên với một ảnh ngang trên máy nhỏ nó chỉ cao khoảng
   190px. Bảng chọn sản phẩm nằm tuyệt đối bên trong, bị kẹp giữa top: 68px và
   bottom: 68px, nên chỉ còn khoảng 60px chỗ cho 414px nội dung — đo được phải
   cuộn thêm 351px và nội dung gần như bị giấu hết.

   Dưới 950px đổi hẳn cách bày: cửa sổ xếp dọc, ảnh ở trên với chiều cao có hạn,
   bảng chọn nằm dưới trong dòng chảy bình thường và tự cao theo nội dung. Chỉ
   đổi khi bảng đang mở, để lúc chỉ xem ảnh thì ảnh vẫn được chiếm trọn cửa sổ
   như cũ.

   Các quy tắc này thắng khối @media (max-width: 640px) bên trên nhờ độ đặc
   hiệu, không phụ thuộc thứ tự. */
@media (max-width: 949px) {
  .image-modal:has(#sampleOrderOptions:not([hidden])) {
    display: flex;
    flex-direction: column;
    /* Quy tắc gốc của cửa sổ có `gap: 14px` cho bố cục lưới cũ. Ở đây ảnh và
       bảng dính liền nhau, ngăn cách bằng đường viền trên của bảng. */
    gap: 0;
    width: min(520px, calc(100vw - 24px));
    height: auto;
    /* Trừ đúng dải đáy mà lớp nền đã chừa cho cụm nút cố định (8px trên + 56px
       dưới). Không trừ thì bảng thò xuống dưới cụm nút và bị che. */
    max-height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-modal-stage {
    flex: 0 0 auto;
    height: min(32vh, 280px);
    min-height: 132px;
  }

  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-order-options {
    /* `relative` chứ không phải `static`: bảng phải tự làm khối chứa cho nút
       đóng đang neo tuyệt đối. Chừa 60px bên phải để chữ "Sản phẩm" không chui
       xuống dưới nút đó.

       Kèm theo phải trả `inset` về `auto`: bố cục điện thoại đặt sẵn
       `top/right/bottom/left: 68px/12px` cho bảng lúc nó còn neo tuyệt đối. Khi
       bảng là `static` thì mấy giá trị đó vô hiệu, nhưng đổi sang `relative` là
       chúng có tác dụng trở lại và đẩy bảng lệch xuống 68px. */
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    /* Bắt buộc: phần tử flex mặc định có `min-height: auto` nên không co xuống
       dưới chiều cao nội dung — `overflow-y: auto` sẽ không bao giờ chạy, nội
       dung tràn ra ngoài cửa sổ rồi bị `overflow: hidden` của cửa sổ cắt mất mà
       khách không cuộn tới được. Đo ở 844x700 tiếng Anh: mất 52px cuối. */
    min-height: 0;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    /* Giữ hiệu ứng trượt từ dưới lên — nó hợp với bảng nằm dưới đáy cửa sổ. */
  }

  /* Cửa sổ lấp đầy chỗ, phần dư dồn hết cho ảnh

     Mặc định cửa sổ cao theo nội dung rồi được căn giữa, nên còn thừa một khoảng
     trống giữa đáy bảng chọn và cụm nút dưới. Cho cửa sổ cao đúng bằng vùng lớp
     nền chừa ra thì đáy bảng luôn nằm sát ngay trên cụm nút, còn khoảng dư trước
     đây thì chuyển hết sang khung ảnh.

     Áp cho mọi chiều cao màn hình, không chỉ màn hình cao: ở khổ thấp khoảng
     thừa còn khó chịu hơn vì ảnh vốn đã chật. Bảng neo đáy và có `max-height`
     nên khi hết chỗ nó tự co lại rồi cuộn, không tràn. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) {
    height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px));
    /* Chừa chỗ cho bảng bằng padding chứ không để bảng chiếm chỗ trong dòng
       flex. Khung ảnh nằm trong hộp nội dung nên chiều cao của nó luôn đúng
       bằng `height - padding-bottom`, hai giá trị này cùng chạy một nhịp nên
       ảnh co giãn đều từ đầu tới cuối.

       Để bảng trong dòng flex thì ngay khung hình đầu nó đã chiếm 372px trong
       khi cửa sổ mới cao 276px, khung ảnh bị ép xuống mức tối thiểu 132px rồi
       mới nở ra 443px — đo được, và nhìn thành một cú giật. */
    padding-bottom: var(--sample-options-height, 0px);
  }

  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-modal-stage {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
  }

  /* Bảng neo vào đáy cửa sổ, nằm đúng vùng padding vừa chừa ra. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-order-options {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    /* Luôn để khung ảnh giữ được ít nhất 132px. */
    max-height: calc(100% - 132px);
  }

  /* Cho phần ảnh bị đẩy lên chuyển động cùng nhịp với bảng đang trượt.

  /* KHÔNG chuyển tiếp `height` và `padding-bottom` của cửa sổ.

     Đã thử cho hai thuộc tính này chạy 300ms để phần ảnh bị đẩy lên cũng có
     chuyển động. Kết quả bị khựng, vì hai lẽ:

     - Cả hai đều là thuộc tính bố cục, mỗi khung hình trình duyệt phải tính lại
       bố cục cửa sổ rồi tính lại khung ảnh theo `object-fit`. Khác hẳn
       `transform` vốn chạy trên bộ ghép ảnh.
     - Cửa sổ được căn giữa nên khi chiều cao chạy từ 201px lên 603px thì mép
       dưới trôi xuống 201px. Bảng neo vào chính mép đó, nên trong lúc nó tự
       trượt lên thì cái neo lại đang trôi xuống.

     Bỏ chuyển tiếp thì cửa sổ đổi kích thước ngay trong một khung hình, còn
     bảng giữ nguyên hiệu ứng trượt bằng `transform` — mượt như trước. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-order-options-fields {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .image-modal:has(#sampleOrderOptions:not([hidden])) .service-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .image-modal:has(#sampleOrderOptions:not([hidden])) .service-choice-grid .service-choice {
    min-width: 0;
  }

  /* Nút xác nhận bám đáy bảng để luôn thấy được mà không phải cuộn tìm. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-options-confirm {
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
    margin-top: 4px;
  }
}
/* Màn hình thấp: nút xác nhận xuống nằm chung hộp với "Sử dụng ảnh"

   Dưới 825px chiều cao thì phần đứng quá chật để vừa xếp bảng chọn vừa dành
   riêng một hàng cho nút xác nhận. app.js chuyển hẳn nút vào trong
   .image-modal-actions và gắn thêm lớp .is-inline-action.

   Nằm chung một hộp flex nên khe hở lấy luôn `gap` của hộp, chiều cao lấy luôn
   `min-height` chung với hai nút kia, và phần giãn do `flex` lo — không phải đo
   bề rộng rồi tính bù. */
@media (max-width: 949px) and (max-height: 824px) {
  /* Cho hàng trải hết bề ngang thì nút xác nhận mới có chỗ mà giãn. `align-items`
     mặc định là `stretch`, mà nút xác nhận có chiều cao riêng nên nó bị dính mép
     trên trong khi hai nút kia giãn — phải căn giữa cho ba nút thẳng hàng. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-modal-actions {
    left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Phải viết đủ cả tiền tố :has(...) thì mới thắng được quy tắc bám đáy bảng ở
     khối 949px — quy tắc đó đặt position: sticky và margin-top: 4px, để nguyên
     thì nút bị đẩy lệch 2px so với hai nút bên cạnh. */
  .image-modal:has(#sampleOrderOptions:not([hidden]))
    .image-modal-actions > .image-options-confirm.is-inline-action {
    position: static;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 38px;
    height: 38px;
    margin: 0;
    padding: 0 16px;
    font-size: 0.85rem;
  }

  /* Nút đã rời khỏi bảng nên bỏ luôn khoảng trống nó từng chiếm ở đáy bảng. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-order-options {
    padding-bottom: 16px;
  }
}
.image-order-options .service-choice.is-active {
  border-color: color-mix(in srgb, var(--service-accent) 62%, white);
  background: linear-gradient(135deg, #ffffff, var(--service-soft));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--service-accent) 15%, transparent);
}
.image-order-options .service-choice.is-active .choice-icon,
.sample-product-summary .choice-icon {
  border-color: transparent;
  background: var(--service-accent);
  color: #ffffff;
  box-shadow:
    0 4px 10px color-mix(in srgb, var(--service-accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.sample-option-choice:hover,
.sample-option-choice:focus-visible,
.sample-option-choice.is-active {
  border-color: color-mix(in srgb, var(--service-accent) 55%, white);
  background: color-mix(in srgb, var(--service-accent) 9%, white);
  outline: none;
}
.account-menu-links {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.account-menu-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 6px 9px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  transition: color 160ms ease, background 160ms ease;
}
.account-menu-link:hover,
.account-menu-link:focus-visible {
  color: var(--teal-dark);
  background: var(--mint);
  outline: none;
}
.account-menu-link > strong {
  min-width: 25px;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: #f0f4f5;
  text-align: center;
  font-size: 0.66rem;
}
.account-menu-link-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--teal);
  background: #edf9f7;
}
.account-menu-link-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-empty-state .secondary-button {
  margin-top: 8px;
  text-decoration: none;
}
.account-empty-state.is-error {
  color: #a24141;
  border-color: #ecc3c3;
  background: #fff8f8;
}
@keyframes accountAddressBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes accountAddressModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.saved-address-actions .secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}
.account-address-form-copy .eyebrow {
  margin: 0;
  color: #08796f;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.3;
}
.account-address-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}
.account-address-field.is-wide {
  grid-column: 1 / -1;
}
.account-address-field-label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #355c58;
  font-size: 0.66rem;
  font-weight: 800;
}
.account-address-field-label > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  color: #168c82;
  background: #e6f6f3;
}
.account-address-field-label svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-address-field input,
.account-address-field textarea {
  width: 100%;
  border: 1px solid #cbdedc;
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 15px rgba(29, 75, 72, 0.035);
  font: inherit;
  font-size: 0.74rem;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.account-address-field input {
  min-height: 46px;
  padding: 10px 12px;
}
.account-address-field textarea {
  min-height: 108px;
  padding: 12px;
  resize: vertical;
}
.account-address-field input::placeholder,
.account-address-field textarea::placeholder {
  color: #93a5a3;
  opacity: 1;
  font-weight: 600;
}
.account-address-field input:hover,
.account-address-field textarea:hover {
  border-color: #9ccdc7;
  background: #ffffff;
}
.account-address-field input:focus,
.account-address-field textarea:focus {
  border-color: #3baea2;
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(21, 143, 132, 0.11),
    0 9px 20px rgba(18, 112, 104, 0.08);
  outline: none;
}
.account-address-field:focus-within .account-address-field-label {
  color: #08746b;
}
.account-address-field:focus-within .account-address-field-label > span {
  color: #ffffff;
  background: linear-gradient(145deg, #35b8a9, #11877e);
}
.account-login-required > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 640px){
.account-address-form-copy .eyebrow {
    font-size: 0.7rem;
  }
.account-address-field.is-wide {
    grid-column: 1;
  }
.account-address-field input {
    min-height: 44px;
  }
.account-address-field textarea {
    min-height: 96px;
  }
}
.account-dashboard-nav a:hover,
.account-dashboard-nav a:focus-visible,
.account-dashboard-nav a.is-active {
  border-color: #cbe4e0;
  color: var(--teal-dark);
  background: #eff9f7;
  outline: none;
}
@keyframes accountProfilePanelOut {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.975);
    filter: blur(2px);
  }
}
@keyframes accountProfilePanelIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
    filter: blur(3px);
  }
}
.account-order-filter-modal-header .eyebrow {
  margin: 0 0 3px;
  font-size: 0.52rem;
}
.account-order-filter-choice.is-active {
  border-color: #148f85;
  color: #08786f;
}
.account-order-filter-choice.is-rating:hover,
.account-order-filter-choice.is-rating:focus-visible,
.account-order-filter-choice.is-rating.is-active {
  border: 0;
  color: #d78e00;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.account-order-filter-rating-stars .is-empty,
.account-order-filter-choice.is-rating.is-active .account-order-filter-rating-stars .is-filled {
  opacity: 1;
}
.account-order-filter-rating-stars .is-filled,
.account-order-filter-choice.is-rating.is-active .account-order-filter-rating-stars .is-empty {
  opacity: 0;
}
.account-order-filter-choice:is(
  .is-new,
  .is-confirmed,
  .is-printing,
  .is-shipping,
  .is-completed,
  .is-cancelled,
  .is-processing
).is-active {
  border-color: var(--filter-choice-tone);
  color: color-mix(in srgb, var(--filter-choice-tone) 72%, #173936);
}
.account-order-filter-dropdown-trigger:hover,
.account-order-filter-dropdown-trigger:focus-visible,
.account-order-filter-dropdown.is-open .account-order-filter-dropdown-trigger {
  border-color: #42b4a9;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(30, 165, 152, 0.11);
  outline: none;
}
.account-order-filter-dropdown.is-open .account-order-filter-dropdown-trigger > svg {
  background: #e2f5f2;
  transform: rotate(180deg);
}
@keyframes account-order-filter-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes account-order-filter-modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes account-order-filter-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes account-order-filter-menu-up-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.account-order-page-number.is-active {
  border-color: #179d91;
  color: #ffffff;
  background: linear-gradient(145deg, #2fc1b0, #087f75);
  box-shadow: 0 7px 16px rgba(9, 125, 115, 0.19);
}
.account-order-page-nav:not(:disabled):hover,
.account-order-page-nav:not(:disabled):focus-visible,
.account-order-page-number:not(.is-active):hover,
.account-order-page-number:not(.is-active):focus-visible {
  border-color: #65bcb3;
  color: #087b71;
  background: #ecf8f6;
  outline: none;
  transform: translateY(-1px);
}
.account-album-view-switcher button.is-active {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 4px 10px rgba(8, 119, 110, 0.18);
}
.order-lookup-page {
  width: min(1180px, 100%);
}
.protected-order-notice {
  position: relative;
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid #dbe7e8;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(18, 42, 50, 0.22);
}
.protected-order-notice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 15px;
  color: var(--teal-dark);
  background: #e9f7f4;
}
.protected-order-notice-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.protected-order-notice h2 {
  margin: 5px 40px 8px 0;
  font-family: var(--font-brand);
  font-size: 1.45rem;
}
.protected-order-notice > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.65;
}
.protected-order-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}
.protected-order-notice-actions button {
  min-width: 112px;
}
@keyframes orderLookupSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orderLookupResultEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.order-progress-marker svg.ka-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
@media (max-width: 640px){
.protected-order-notice {
    padding: 24px 20px 20px;
    border-radius: 17px;
  }
.protected-order-notice-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
.protected-order-notice-actions button {
    width: 100%;
  }
}
@media (max-width: 480px){
.top-nav {
    justify-content: space-between;
    gap: 0;
    padding-right: max(5px, env(safe-area-inset-right, 0px));
    padding-left: max(5px, env(safe-area-inset-left, 0px));
  }
.top-nav .nav-link {
    flex: 0 1 auto;
    padding-inline: 2px;
    font-size: clamp(0.66rem, 3.2vw, 0.72rem);
  }
.nav-link[data-page="about"] {
    font-size: 0;
  }
.nav-link[data-page="about"]::after {
    content: attr(data-mobile-label);
    font-size: 0.72rem;
  }
}
/* Shared site footer */
.site-footer {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 10%, rgba(244, 189, 79, 0.18), transparent 28%),
    radial-gradient(circle at 94% 12%, rgba(114, 90, 193, 0.2), transparent 30%),
    linear-gradient(145deg, #073f3b 0%, #075c55 54%, #063c3a 100%);
  color: rgba(255, 255, 255, 0.78);
}
.site-footer::before,
.site-footer::after {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}
.site-footer::before {
  top: -78px;
  right: 11%;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(255, 255, 255, 0.035);
}
.site-footer::after {
  bottom: -110px;
  left: -54px;
  width: 240px;
  height: 240px;
  background: rgba(19, 155, 143, 0.2);
}
@media (max-width: 760px){
body.site-footer-page > main {
    margin-bottom: 48px;
  }
}
@media (prefers-reduced-motion: reduce){
.site-footer a {
    transition: none;
  }
}
/* Bright creative footer theme */
.site-footer {
  border-top: 8px solid transparent;
  border-image: linear-gradient(90deg, #0f978b 0 62%, #a8ded7 62% 76%, #f4dfaa 76% 88%, #e9c7ce 88% 95%, #d8d0ee 95% 100%) 1;
  background:
    radial-gradient(circle at 6% 18%, rgba(15, 151, 139, 0.2) 0 7%, transparent 7.2%),
    radial-gradient(circle at 92% 10%, rgba(128, 103, 217, 0.07) 0 9%, transparent 9.2%),
    radial-gradient(circle at 79% 82%, rgba(244, 123, 120, 0.06) 0 8%, transparent 8.2%),
    linear-gradient(135deg, #dff7f2 0%, #edfaf7 54%, #f8fdfb 100%);
  color: #42515b;
}
.site-footer::before {
  top: 44px;
  right: 6%;
  width: 126px;
  height: 126px;
  border: 24px solid rgba(15, 151, 139, 0.18);
  transform: rotate(18deg);
}
.site-footer::after {
  bottom: 54px;
  left: -72px;
  width: 214px;
  height: 214px;
  background: rgba(15, 151, 139, 0.16);
}
/* Từ 1180px trở xuống, hai thẻ Quyền riêng tư và Liên hệ gộp thành một bộ
   nút chuyển, đúng như ở khổ điện thoại.
   -------------------------------------------------------------------------
   Trước đây việc chuyển này chỉ xảy ra dưới 600px. Ở quãng 600–1180px lưới
   phải nhét năm thẻ vào ba cột, nên hai thẻ cuối rơi xuống hàng dưới và để lại
   một khoảng trống lệch.

   Toàn bộ phần dựng hình của bộ tab nằm ở đây chứ không phải trong khối 600px
   như trước — khối này đặt TRƯỚC khối 600px để khổ điện thoại vẫn đè lên được
   những gì cần riêng (cỡ chữ, khoảng cách, ô lưới có tên). */
@media (max-width: 1180px) {
  .site-footer-privacy-card,
  .site-footer-contact {
    display: none;
  }

  .site-footer-mobile-info {
    /* Ô lưới có tên chỉ tồn tại ở khổ ≤600px. Ở quãng 600–1180px lưới footer
       vẫn là ba cột thường, nên cho bộ tab trải hết một hàng. */
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .site-footer-mobile-info-tabs {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 4px;
    overflow: hidden;
    border: 1px solid rgba(19, 123, 114, 0.13);
    border-radius: 16px;
    background: rgba(225, 246, 241, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .site-footer-mobile-info-tabs::before {
    position: absolute;
    z-index: -1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border: 1px solid rgba(19, 155, 143, 0.14);
    border-radius: 12px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 251, 248, 0.98));
    box-shadow:
      0 6px 16px rgba(35, 97, 91, 0.11),
      inset 0 1px 0 #ffffff;
    content: "";
    transition: transform 360ms cubic-bezier(.22, .86, .28, 1);
  }

  .site-footer-mobile-info-tabs.is-contact-active::before {
    transform: translateX(100%);
  }

  .site-footer-mobile-info-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 42px;
    padding: 7px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #70817f;
    font-size: 0.68rem;
    font-weight: 850;
    cursor: pointer;
    transition:
      color 240ms ease,
      transform 320ms cubic-bezier(.22, .86, .28, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .site-footer-mobile-info-tab svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 320ms cubic-bezier(.22, .86, .28, 1);
  }

  .site-footer-mobile-info-tab.is-active {
    color: #08776e;
    transform: translateY(-1px);
  }

  .site-footer-mobile-info-tab.is-active svg {
    transform: scale(1.08);
  }

  .site-footer-mobile-info-tab:focus-visible {
    outline: 2px solid rgba(19, 155, 143, 0.32);
    outline-offset: -2px;
  }

  .site-footer-mobile-info-box {
    display: grid;
    min-width: 0;
    padding: 13px;
    overflow: hidden;
    border: 1px solid rgba(38, 83, 84, 0.1);
    border-radius: 17px;
    background:
      radial-gradient(circle at 100% 100%, rgba(15, 151, 139, 0.11), transparent 38%),
      rgba(231, 248, 244, 0.96);
    box-shadow: 0 10px 24px rgba(43, 91, 88, 0.08);
  }

  .site-footer-mobile-info-panel {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-12px);
    transition:
      opacity 210ms ease,
      transform 340ms cubic-bezier(.22, .86, .28, 1),
      visibility 0s linear 340ms;
  }

  .site-footer-mobile-info-panel[data-footer-info-panel="contact"] {
    transform: translateX(12px);
  }

  .site-footer-mobile-info-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .site-footer-mobile-info-panel p {
    display: inline;
    margin: 0;
    color: #596a70;
    font-size: 0.67rem;
    line-height: 1.48;
  }

  .site-footer-mobile-info-panel p + p::before {
    content: " ";
  }

  .site-footer-mobile-contact-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
}
/* Bố cục footer kiểu điện thoại áp dụng từ 760px trở xuống.
   -------------------------------------------------------------------------
   Trước là 600px. Ở quãng 600–760px lưới hai cột vẫn phải chứa thẻ thương
   hiệu cùng hai cột liên kết, nên chữ bị bó lại mà khoảng trống hai bên thì
   thừa. Khối này chỉ chứa luật của footer nên đổi mốc là an toàn. */
@media (max-width: 760px) {
  body.site-footer-page > main {
    margin-bottom: 32px;
  }

  .site-footer-main,
  .site-footer-bottom {
    width: min(calc(100% - 20px), 560px);
  }

  .site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "brand brand"
      "services company"
      "mobile-info mobile-info";
    gap: 10px;
    padding-block: 18px 12px;
  }

  .site-footer-brand,
  .site-footer-column {
    min-height: 0;
    border-radius: 17px;
    box-shadow: 0 10px 24px rgba(43, 91, 88, 0.08);
  }

  .site-footer-brand {
    grid-area: brand;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "logo logo"
      "title title"
      "description description"
      "socials tags";
    gap: 5px 12px;
    padding: 13px;
  }

  .site-footer-logo {
    grid-area: logo;
    align-self: start;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-footer-logo img {
    width: 100%;
    height: auto;
  }

  .site-footer-brand h2 {
    grid-area: title;
    align-self: end;
    max-width: none;
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.2;
  }

  .site-footer-brand > p {
    grid-area: description;
    align-self: start;
    font-size: 0.68rem;
    line-height: 1.42;
  }

  .site-footer-tags {
    grid-area: tags;
    align-self: end;
    gap: 4px;
    margin-top: 7px;
  }

  /* 0.54rem is 8.6px on a phone, below anything the rest of the site asks a
     reader to make out. The pills wrap, so a larger label costs lines rather
     than width. */
  .site-footer-tags span {
    padding: 3px 6px;
    font-size: 0.62rem;
  }

  .site-footer-socials {
    grid-area: socials;
    display: grid;
    grid-template-columns: repeat(2, 26px);
    align-self: end;
    justify-self: start;
    gap: 4px;
    margin-top: 7px;
  }

  /* The letters sit inside a fixed 26px disc, so the size below was set by the
     disc rather than by reading distance and had dropped to 8.3px. 0.62rem
     still clears the two-letter marks (ig, tt) inside the same disc. */
  .site-footer-socials a {
    width: 26px;
    height: 26px;
    border-width: 2px;
    font-size: 0.62rem;
    box-shadow: 0 4px 10px rgba(31, 58, 63, 0.11);
  }

  .site-footer-column {
    align-self: stretch;
    gap: 6px;
    padding: 12px;
  }

  .site-footer-column:nth-child(2) {
    grid-area: services;
  }

  .site-footer-column:nth-child(3) {
    grid-area: company;
  }

  .site-footer-column h2 {
    margin: 0 0 7px;
    padding-bottom: 8px;
    font-size: 0.8rem;
  }

  .site-footer-column h2::after {
    width: 22px;
    height: 2px;
  }

  .site-footer-column > a,
  .site-footer-contact-item a {
    font-size: 0.67rem;
    line-height: 1.35;
  }

  /* Ở khổ này lưới footer dùng vùng có tên, nên gắn tab vào đúng ô. Toàn bộ
     phần còn lại của tab đã chuyển lên khối 1180px phía trên. */
  .site-footer-mobile-info {
    grid-area: mobile-info;
  }

  /* Panel liên hệ ở khổ này là lưới hai cột, nên khối nút chỉ được một nửa bề
     ngang — vừa đủ cho nhãn tiếng Việt nhưng thiếu với bản Anh và Nhật, khiến
     nút thứ hai rơi xuống dòng. Cho nó trải cả hàng để hai nút luôn cùng hàng ở
     mọi ngôn ngữ. */
  .site-footer-mobile-contact-panel .site-footer-contact-actions {
    grid-column: 1 / -1;
  }


  .site-footer-contact-item {
    gap: 1px;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  /* The label above each contact line ("Address", "Support hours") was 9px,
     small enough that the value under it read as unlabelled. */
  .site-footer-contact-item span {
    font-size: 0.63rem;
  }

  .site-footer-contact-item strong {
    font-size: 0.67rem;
    line-height: 1.35;
  }

  .site-footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 0;
    margin-top: 4px;
    padding-block: 10px max(10px, env(safe-area-inset-bottom));
    font-size: 0.62rem;
  }

  /* GIỮ NGUYÊN luật cũ, kể cả phần không có tác dụng.
     -----------------------------------------------------------------------
     `min-height` và `padding` ở đây KHÔNG thắng: luật gốc `.site-footer-contact-actions a`
     nằm SAU khối media này trong tệp, cùng độ ưu tiên, nên nó đè lại. Tức nút ở
     khổ hẹp vẫn là 36px và 7px 13px chứ không phải 30px và 5px 8px.

     Đó cũng đúng là cách bản cũ hiển thị — thứ tự hai luật đã như vậy từ trước
     khi chuyển chỗ. Cố ý không sửa thứ tự: sửa là nút bé lại và khác bản cũ,
     trong khi cả lượt này chỉ nhằm giữ nguyên dáng cũ. Chỉ `font-size` và
     `white-space` là thật sự có tác dụng. */
  /* Luật thu nhỏ nút cũ đã gỡ ngày 2026-08-31.

     `min-height`, `padding` và `font-size` ở đây chưa bao giờ có tác dụng —
     luật gốc cùng bộ chọn nằm SAU khối này trong tệp nên luôn đè lại. Thứ duy
     nhất còn tác dụng là `white-space: nowrap`, mà nay nó chống lại thiết kế
     mới: hai nút chia đôi hàng và cho chữ xuống dòng bên trong. */
}
/* Community policy page */
body[data-page="community"],
body[data-page="refund"] {
  background:
    radial-gradient(circle at 8% 5%, rgba(53, 185, 199, 0.1), transparent 24rem),
    radial-gradient(circle at 94% 18%, rgba(246, 200, 82, 0.11), transparent 22rem),
    #f4f8f5;
}
.community-policy-page {
  --community-ink: #17343a;
  --community-muted: #65757a;
  --community-line: rgba(37, 79, 80, 0.13);
  width: min(1180px, calc(100% - clamp(28px, 6vw, 80px)));
  margin-inline: auto;
  padding: clamp(30px, 5vw, 66px) 0 54px;
  color: var(--community-ink);
}
.community-policy-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, 0.62fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
  min-height: min(650px, calc(100vh - 132px));
  padding: clamp(38px, 7vw, 88px);
  overflow: hidden;
  border: 1px solid rgba(36, 94, 92, 0.12);
  border-radius: 36px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(241, 251, 247, 0.92)),
    #fff;
  box-shadow: 0 28px 76px rgba(38, 82, 78, 0.12);
}
.community-policy-hero::before,
.community-policy-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.community-policy-hero::before {
  top: -124px;
  right: -92px;
  width: 340px;
  height: 340px;
  border: 58px solid rgba(53, 185, 199, 0.11);
  border-radius: 50%;
}
.community-policy-hero::after {
  bottom: -86px;
  left: 44%;
  width: 196px;
  height: 196px;
  border-radius: 46px;
  background: rgba(246, 200, 82, 0.1);
  transform: rotate(24deg);
}
.community-policy-hero-copy {
  position: relative;
  z-index: 1;
}
.community-policy-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  color: #117f77;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.community-policy-kicker > span {
  display: inline-flex;
  gap: 3px;
}
.community-policy-kicker i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35b9c7;
}
.community-policy-kicker i:nth-child(2) {
  background: #f6c852;
}
.community-policy-kicker i:nth-child(3) {
  background: #ec6386;
}
.community-policy-hero h1 {
  max-width: 790px;
  margin: 0;
  color: #16373c;
  font-family: var(--font-brand);
  font-size: clamp(2.65rem, 6.2vw, 5.9rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}
.community-policy-hero h1 em {
  color: #159487;
  font-style: normal;
}
.community-policy-lead {
  max-width: 680px;
  margin: 28px 0 0;
  color: #647478;
  font-size: clamp(1rem, 1.65vw, 1.18rem);
  line-height: 1.75;
}
.community-policy-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.community-policy-hero-actions a,
.community-policy-support > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(21, 148, 135, 0.2);
  border-radius: 999px;
  color: #107970;
  background: rgba(255, 255, 255, 0.84);
  font-size: 0.8rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.community-policy-hero-actions a:first-child {
  color: #fff;
  background: #159487;
  box-shadow: 0 12px 24px rgba(21, 148, 135, 0.2);
}
.community-policy-hero-actions a:hover,
.community-policy-hero-actions a:focus-visible,
.community-policy-support > a:hover,
.community-policy-support > a:focus-visible {
  color: #fff;
  background: #ef6461;
  box-shadow: 0 13px 26px rgba(239, 100, 97, 0.23);
  transform: translateY(-2px);
  outline: none;
}
.community-policy-summary {
  position: relative;
  z-index: 1;
  padding: 24px;
  border: 1px solid rgba(18, 118, 109, 0.13);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 50px rgba(40, 91, 84, 0.1);
  backdrop-filter: blur(12px);
}
.community-policy-summary > p {
  margin: 0 0 14px;
  color: #7b898c;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.community-policy-summary ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.community-policy-summary li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: #eef9f6;
}
.community-policy-summary li:nth-child(2) {
  background: #fff7e8;
}
.community-policy-summary li > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #fff;
  background: #159487;
  font-size: 0.72rem;
  font-weight: 900;
}
.community-policy-summary li:nth-child(2) > span {
  color: #59471c;
  background: #f6c852;
}
.community-policy-summary strong,
.community-policy-summary small {
  display: block;
}
.community-policy-summary strong {
  color: #234248;
  font-size: 0.88rem;
}
.community-policy-summary small {
  margin-top: 3px;
  color: #748184;
  font-size: 0.7rem;
  line-height: 1.45;
}
.community-policy-summary-note {
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px dashed rgba(21, 148, 135, 0.22);
  border-radius: 15px;
  color: #5f7374;
  background: rgba(244, 251, 248, 0.72);
  font-size: 0.7rem;
  line-height: 1.55;
}
.community-policy-intro {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 90px);
  padding: clamp(70px, 9vw, 120px) clamp(10px, 4vw, 50px);
}
.community-policy-section-index {
  margin: 5px 0 0;
  color: #159487;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.community-policy-intro h2 {
  max-width: 820px;
  margin: 0 0 22px;
  color: #1e3b41;
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.community-policy-intro div > p {
  max-width: 820px;
  margin: 0;
  color: #647579;
  font-size: 0.98rem;
  line-height: 1.85;
}
.community-policy-intro div > p + p {
  margin-top: 13px;
}
.community-policy-layout {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}
.community-policy-toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--community-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 34px rgba(43, 83, 80, 0.07);
  backdrop-filter: blur(12px);
}
.community-policy-toc p {
  margin: 0 0 8px;
  color: #758587;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.community-policy-toc a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 12px;
  color: #5f7074;
  font-size: 0.73rem;
  font-weight: 750;
  text-decoration: none;
}
.community-policy-toc a span {
  color: #159487;
  font-size: 0.62rem;
  font-weight: 900;
}
.community-policy-toc a:hover,
.community-policy-toc a:focus-visible {
  color: #126f68;
  background: #e9f7f3;
  outline: none;
}
.community-policy-content {
  display: grid;
  gap: 30px;
  min-width: 0;
}
.community-policy-section,
.community-policy-decision,
.community-policy-checklist {
  scroll-margin-top: 96px;
}
.community-policy-section {
  padding: clamp(26px, 5vw, 54px);
  border: 1px solid var(--community-line);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 52px rgba(45, 87, 83, 0.08);
}
.community-policy-section-heading {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 30px;
}
.community-policy-section-heading > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #fff;
  background: #173c42;
  font-size: 0.72rem;
  font-weight: 900;
}
.community-policy-section-heading p {
  max-width: 760px;
  margin: 0;
  color: #68797d;
  font-size: 0.83rem;
  line-height: 1.7;
}
.community-policy-section-heading div > p:first-child {
  margin-bottom: 7px;
  color: #159487;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.community-policy-section-heading h2,
.community-policy-decision h2,
.community-policy-checklist h2,
.community-policy-support h2 {
  margin: 0;
  color: #213f45;
  font-family: var(--font-brand);
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.community-policy-section-heading h2 + p {
  margin-top: 10px;
}
.community-policy-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.community-policy-rule-card {
  position: relative;
  min-height: 188px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid rgba(40, 76, 78, 0.1);
  border-radius: 22px;
  background: #f5f8f7;
}
.community-policy-rule-card::after {
  position: absolute;
  top: -28px;
  right: -24px;
  width: 92px;
  height: 92px;
  border: 18px solid var(--rule-color, #159487);
  border-radius: 50%;
  opacity: 0.11;
  content: "";
}
.community-policy-rule-card[data-rule-tone="magenta"] { --rule-color: #ec6386; background: #fff6f9; }
.community-policy-rule-card[data-rule-tone="violet"] { --rule-color: #8069d7; background: #f8f6ff; }
.community-policy-rule-card[data-rule-tone="yellow"] { --rule-color: #dba936; background: #fffaf0; }
.community-policy-rule-card[data-rule-tone="cyan"] { --rule-color: #35b9c7; background: #f2fbfc; }
.community-policy-rule-card[data-rule-tone="coral"] { --rule-color: #ef6461; background: #fff7f5; }
.community-policy-rule-card > span {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--rule-color, #159487);
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.61rem;
  font-weight: 900;
}
.community-policy-rule-card h3 {
  margin: 0 0 8px;
  color: #29464b;
  font-size: 1rem;
}
.community-policy-rule-card p {
  margin: 0;
  color: #68777b;
  font-size: 0.79rem;
  line-height: 1.65;
}
.community-policy-rule-card-wide {
  grid-column: 1 / -1;
  min-height: 0;
}
.community-policy-decision {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(222, 91, 88, 0.18);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #d95362, #ef7167);
  box-shadow: 0 22px 46px rgba(193, 76, 78, 0.18);
}
.community-policy-decision-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 2rem;
  font-weight: 900;
}
.community-policy-decision > div > p:first-child {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.community-policy-decision h2 {
  color: #fff;
}
.community-policy-decision h2 + p,
.community-policy-decision p + p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.83rem;
  line-height: 1.72;
}
.community-policy-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.community-policy-review-grid article {
  padding: 22px;
  border: 1px solid rgba(21, 148, 135, 0.12);
  border-radius: 20px;
  background: #f0f9f6;
}
.community-policy-review-grid article:nth-child(2) { background: #fff9ed; }
.community-policy-review-grid article:nth-child(3) { background: #f8f6ff; }
.community-policy-review-grid span {
  display: inline-block;
  margin-bottom: 18px;
  color: #159487;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.community-policy-review-grid h3 {
  margin: 0 0 8px;
  color: #28464b;
  font-size: 0.9rem;
  line-height: 1.35;
}
.community-policy-review-grid p {
  margin: 0;
  color: #68787b;
  font-size: 0.76rem;
  line-height: 1.62;
}
.community-policy-example {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 20px 22px;
  border-left: 4px solid #159487;
  border-radius: 4px 18px 18px 4px;
  background: #edf8f5;
}
.community-policy-example > span {
  color: #12796f;
  font-size: 0.69rem;
  font-weight: 900;
}
.community-policy-example blockquote {
  margin: 0;
  color: #415b60;
  font-size: 0.83rem;
  font-style: italic;
  line-height: 1.65;
}
.community-policy-checklist {
  display: grid;
  grid-template-columns: minmax(210px, 0.68fr) minmax(0, 1.32fr);
  gap: 30px;
  align-items: start;
  padding: clamp(27px, 5vw, 48px);
  border: 1px solid rgba(90, 75, 149, 0.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 100%, rgba(128, 105, 215, 0.11), transparent 34%),
    #f9f8ff;
}
.community-policy-checklist > div > p {
  margin: 0 0 7px;
  color: #8069d7;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.community-policy-checklist ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.community-policy-checklist li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(90, 75, 149, 0.1);
  border-radius: 14px;
  color: #52656a;
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  line-height: 1.48;
}
.community-policy-checklist li span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #fff;
  background: #8069d7;
  font-size: 0.64rem;
  font-weight: 900;
}
.community-policy-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(52px, 8vw, 92px);
  padding: clamp(30px, 5vw, 54px);
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 82% -30%, rgba(246, 200, 82, 0.3), transparent 38%),
    linear-gradient(135deg, #123e42, #126f68);
  box-shadow: 0 24px 60px rgba(21, 70, 69, 0.18);
}
.community-policy-support p {
  margin: 0 0 7px;
  color: #9edbd4;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.community-policy-support h2 {
  color: #fff;
}
.community-policy-support h2 + span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.73);
  font-size: 0.8rem;
}
.community-policy-support > a {
  flex: 0 0 auto;
  gap: 16px;
  min-height: 50px;
  color: #173f43;
  background: #fff;
}
@media (max-width: 960px){
.community-policy-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
.community-policy-summary {
    max-width: 620px;
  }
.community-policy-layout {
    grid-template-columns: 1fr;
  }
.community-policy-toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
.community-policy-toc p {
    flex: 1 0 100%;
  }
.community-policy-review-grid {
    grid-template-columns: 1fr;
  }
.community-policy-review-grid article {
    min-height: 0;
  }
}
@media (max-width: 640px){
.community-policy-page {
    width: min(100% - 20px, 600px);
    padding-top: 18px;
  }
.community-policy-hero {
    gap: 28px;
    padding: 28px 20px 22px;
    border-radius: 24px;
  }
.community-policy-hero::before {
    width: 220px;
    height: 220px;
    border-width: 36px;
  }
.community-policy-kicker {
    align-items: flex-start;
    font-size: 0.63rem;
    line-height: 1.45;
  }
.community-policy-hero h1 {
    font-size: clamp(2.25rem, 13vw, 3.6rem);
  }
.community-policy-lead {
    margin-top: 20px;
    font-size: 0.9rem;
    line-height: 1.65;
  }
.community-policy-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
  }
.community-policy-hero-actions a {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 0.7rem;
  }
.community-policy-summary {
    padding: 15px;
    border-radius: 19px;
  }
.community-policy-summary li {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 10px;
  }
.community-policy-summary li > span {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
.community-policy-intro {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 58px 8px;
  }
.community-policy-intro h2 {
    font-size: 1.82rem;
  }
.community-policy-intro div > p {
    font-size: 0.84rem;
    line-height: 1.72;
  }
.community-policy-toc {
    padding: 12px;
    border-radius: 16px;
  }
.community-policy-toc a {
    flex: 1 0 calc(50% - 6px);
    font-size: 0.67rem;
  }
.community-policy-content {
    gap: 16px;
  }
.community-policy-section,
  .community-policy-decision,
  .community-policy-checklist {
    border-radius: 22px;
  }
.community-policy-section {
    padding: 20px;
  }
.community-policy-section-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }
.community-policy-section-heading > span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
.community-policy-section-heading h2,
  .community-policy-decision h2,
  .community-policy-checklist h2,
  .community-policy-support h2 {
    font-size: 1.42rem;
  }
.community-policy-section-heading p {
    font-size: 0.74rem;
  }
.community-policy-rule-grid {
    grid-template-columns: 1fr;
  }
.community-policy-rule-card-wide {
    grid-column: auto;
  }
.community-policy-rule-card {
    min-height: 0;
    padding: 20px;
  }
.community-policy-rule-card > span {
    margin-bottom: 18px;
  }
.community-policy-decision {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
  }
.community-policy-decision-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 1.35rem;
  }
.community-policy-decision h2 + p,
  .community-policy-decision p + p {
    font-size: 0.74rem;
  }
.community-policy-review-grid article {
    padding: 18px;
  }
.community-policy-example {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }
.community-policy-checklist {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 18px;
  }
.community-policy-support {
    display: grid;
    margin-top: 50px;
    padding: 25px 21px;
    border-radius: 22px;
  }
.community-policy-support > a {
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce){
.community-policy-hero-actions a,
  .community-policy-support > a {
    transition: none;
  }
}
.care-page,
.admin-care-app {
  width: min(1180px, calc(100% - clamp(28px, 6vw, 78px)));
  margin-inline: auto;
  padding: clamp(32px, 5vw, 64px) 0 24px;
}
.care-picker-option.is-account,
.care-picker[data-value="account"] .care-picker-trigger {
  --pick-ink: #6152b0;
  --pick-paper: #e8e3fb;
}
@keyframes carePickerMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes careSubmitSpin {
  to {
    transform: rotate(360deg);
  }
}
.care-result.is-error {
  border-color: rgba(201, 75, 75, 0.2);
  background: #fff1f1;
  color: #a23f3f;
  font-size: 0.78rem;
  font-weight: 700;
}
@media (max-width: 900px){
.admin-care-editor .primary-button {
    width: 100%;
  }
}
@media (max-width: 620px){
.care-page {
    width: min(100% - 24px, 580px);
    padding-top: 22px;
  }
}
@keyframes care-chat-spin {
  to { transform: rotate(360deg); }
}
.admin-care-chat-composer .primary-button {
  flex: 0 0 auto;
  min-height: 43px;
}
.admin-chat-status-tools .secondary-button {
  min-height: 42px;
}
@media (max-width: 620px){
.admin-care-chat-composer .primary-button,
  .admin-chat-status-tools .upload-field,
  .admin-chat-status-tools .secondary-button {
    width: 100%;
  }
}
.admin-sort-toggle button.is-active {
  background: var(--teal);
  color: #fff;
}
.admin-filter-chips button.is-active {
  border-color: #0d9186;
  background: linear-gradient(135deg, #17a99b, #087e76);
  color: #ffffff;
  box-shadow: 0 7px 17px rgba(11, 132, 122, 0.17);
}
.admin-filter-chips button.is-active span {
  background: rgba(255, 255, 255, 0.2);
}
.auth-panel.is-awaiting-verification > label {
  display: none;
}
.registration-verification-card .eyebrow {
  margin: 0;
}
.registration-verification-actions .text-button {
  padding: 5px 2px;
  color: var(--teal-dark);
  font-size: 0.66rem;
  font-weight: 900;
}
.registration-verification-actions .text-button:disabled {
  color: #9eaaaa;
  cursor: wait;
}
/* Feedback community hub */
body[data-page="feedback"] .app {
  width: min(1280px, calc(100% - 32px));
}
.feedback-story-card > img.is-active {
  opacity: 1;
  transform: scale(1);
}
.feedback-story-card:hover > img.is-active {
  transform: scale(1.035);
}
@keyframes feedbackSkeleton {
  to { background-position: -220% 0; }
}
.feedback-filters button.is-active {
  border-color: var(--teal);
  color: #ffffff;
  background: linear-gradient(135deg, #16a596, #087b72);
  box-shadow: 0 8px 18px rgba(8, 123, 114, 0.17);
}
.feedback-filters button.is-active strong {
  background: rgba(255, 255, 255, 0.18);
}
.feedback-detail-image-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}
.feedback-detail-image-dot.is-active::after {
  background: #35dccb;
  box-shadow:
    0 0 0 3px rgba(53, 220, 203, 0.18),
    0 0 12px rgba(24, 218, 197, 0.9),
    0 0 24px rgba(22, 180, 165, 0.52);
  transform: scale(1.2);
}
@keyframes accountFeedbackComposerEnter {
  from {
    opacity: 0;
    transform: translateY(-14px) scaleY(0.94);
  }
}
@media (max-width: 640px){
body[data-page="feedback"] .app {
    width: min(100% - 20px, 1280px);
  }
}
.order-lookup-submit-button::before,
.feedback-submit-button::before {
  position: absolute;
  top: -80%;
  left: -20%;
  width: 38%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg) translateX(-180%);
  transition: transform 420ms ease;
}
.order-lookup-submit-button:hover:not(:disabled)::before,
.feedback-submit-button:hover:not(:disabled)::before {
  transform: rotate(18deg) translateX(420%);
}
.protected-order-notice-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
}
.protected-order-notice-actions .protected-notice-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 7px 12px 7px 8px;
  border-radius: 14px;
  font-family: var(--font-brand);
  font-size: 0.7rem;
  text-align: left;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}
.checkout-identity-modal-backdrop.is-visible {
  opacity: 1;
}
.checkout-identity-modal-backdrop.is-visible .checkout-identity-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.checkout-identity-card > p:not(.eyebrow):not(.checkout-identity-register-prompt) {
  max-width: 470px;
  font-size: 0.76rem;
}
#loginModal.is-checkout-continuation .login-modal {
  animation: checkoutAuthCardEnter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes checkoutAuthBackdropEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes checkoutAuthCardEnter {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce){
.checkout-identity-modal-backdrop,
  .checkout-identity-card,
  .checkout-identity-action,
  .checkout-identity-action-icon,
  #loginModal.is-checkout-continuation,
  #loginModal.is-checkout-continuation .login-modal {
    animation: none;
    transition: none;
  }
}
.protected-notice-button-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.protected-notice-button-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.protected-notice-later {
  border-color: #cfdedf;
  color: #4c6668;
  background: linear-gradient(135deg, #fff, #f1f6f6);
  box-shadow: 0 7px 16px rgba(36, 68, 74, 0.06);
}
.protected-notice-later .protected-notice-button-icon {
  color: #607b7d;
  background: #e5eeee;
}
.protected-notice-later:hover,
.protected-notice-later:focus-visible {
  border-color: #a8c2c2;
  color: #284f50;
  background: linear-gradient(135deg, #fff, #e8f2f1);
  box-shadow: 0 10px 20px rgba(36, 68, 74, 0.1);
  outline: none;
  transform: translateY(-2px);
}
.protected-notice-login {
  border-color: #08776f;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(135deg, #19a99b, #08756d);
  box-shadow:
    0 11px 23px rgba(8, 117, 109, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.protected-notice-login .protected-notice-button-icon {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.15);
}
.protected-notice-login:hover,
.protected-notice-login:focus-visible {
  border-color: #055e58;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(135deg, #159d91, #06665f);
  box-shadow: 0 15px 28px rgba(8, 117, 109, 0.29);
  outline: none;
  transform: translateY(-2px);
}
.protected-notice-button:active {
  transform: translateY(0);
}
.feedback-submit-button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  min-width: 210px;
  min-height: 56px;
  overflow: hidden;
  padding: 7px 13px 7px 8px;
  border: 1px solid #08766e;
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 0, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(135deg, #1aab9d, #08756d);
  box-shadow:
    0 13px 26px rgba(8, 117, 109, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-family: var(--font-brand);
  font-size: 0.72rem;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease,
    background 170ms ease;
}
.feedback-submit-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
}
.feedback-submit-button .feedback-submit-icon svg {
  width: 18px;
  height: 18px;
}
.feedback-submit-button .feedback-submit-arrow {
  width: 17px;
  height: 17px;
  transition: transform 170ms ease;
}
.feedback-submit-button:hover:not(:disabled),
.feedback-submit-button:focus-visible:not(:disabled) {
  border-color: #055d57;
  background:
    radial-gradient(circle at 10% 0, rgba(255, 255, 255, 0.27), transparent 40%),
    linear-gradient(135deg, #169e92, #06645e);
  box-shadow: 0 17px 32px rgba(8, 117, 109, 0.31);
  outline: none;
  transform: translateY(-2px);
}
.feedback-submit-button:hover:not(:disabled) .feedback-submit-arrow {
  transform: translateX(3px);
}
.feedback-submit-button:disabled,
.feedback-submit-button:disabled:hover {
  border-color: #cbdcda;
  color: #72918e;
  background: linear-gradient(135deg, #f1f7f6, #e6f0ef);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}
.feedback-submit-button:disabled .feedback-submit-icon {
  border-color: #d2e2e0;
  background: #fff;
}
.account-menu-logout {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 17px;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin-top: 7px;
  padding: 7px 10px 7px 8px;
  border: 1px solid #f0cece;
  border-radius: 14px;
  color: #a44343;
  background: linear-gradient(135deg, #fffafa, #fff2f2);
  box-shadow: 0 7px 16px rgba(145, 51, 51, 0.06);
  font: inherit;
  text-align: left;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}
.account-menu-logout-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #b74b4b;
  background: #ffe3e3;
  transition: background 160ms ease, color 160ms ease;
}
.account-menu-logout-icon svg,
.account-menu-logout-arrow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.account-menu-logout-icon svg {
  width: 18px;
  height: 18px;
}
.account-menu-logout-copy {
  display: grid;
  min-width: 0;
  align-items: center;
}
.account-menu-logout-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-logout-copy strong {
  font-family: var(--font-brand);
  font-size: 0.7rem;
}
.account-menu-logout-arrow {
  width: 17px;
  height: 17px;
  transition: transform 160ms ease;
}
.account-menu-logout:hover,
.account-menu-logout:focus-visible {
  border-color: #b83f3f;
  color: #fff;
  background:
    radial-gradient(circle at 10% 0, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(135deg, #d45555, #a93131);
  box-shadow: 0 13px 25px rgba(169, 49, 49, 0.23);
  outline: none;
  transform: translateY(-2px);
}
.account-menu-logout:hover .account-menu-logout-icon,
.account-menu-logout:focus-visible .account-menu-logout-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.account-menu-logout:hover .account-menu-logout-arrow,
.account-menu-logout:focus-visible .account-menu-logout-arrow {
  transform: translateX(2px);
}
.account-menu-logout:active {
  transform: translateY(0);
}
@media (max-width: 640px){
.protected-order-notice-actions {
    grid-template-columns: 1fr;
  }
.feedback-submit-button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce){
.order-lookup-submit-button,
  .order-lookup-submit-button::before,
  .order-lookup-submit-arrow,
  .protected-notice-button,
  .feedback-submit-button,
  .feedback-submit-button::before,
  .feedback-submit-arrow,
  .account-menu-logout,
  .account-menu-logout-icon,
  .account-menu-logout-arrow {
    transition: none;
  }
}
/* Feedback order verification button */
.feedback-lookup-button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 15px;
  gap: 9px;
  align-items: center;
  min-width: 168px;
  min-height: 50px;
  overflow: hidden;
  padding: 7px 11px 7px 7px;
  border: 1px solid #08776f;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.23), transparent 40%),
    linear-gradient(135deg, #1aab9d 0%, #08766e 65%, #05635d 100%);
  box-shadow:
    0 10px 20px rgba(8, 118, 110, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.19);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease,
    background 170ms ease;
}
.feedback-lookup-button::before {
  position: absolute;
  top: -100%;
  left: -30%;
  width: 35%;
  height: 300%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.17), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg) translateX(-170%);
  transition: transform 420ms ease;
}
.feedback-lookup-button:hover:not(:disabled),
.feedback-lookup-button:focus-visible {
  border-color: #055e58;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.27), transparent 42%),
    linear-gradient(135deg, #159f92 0%, #066b64 65%, #044f4a 100%);
  box-shadow: 0 14px 26px rgba(8, 118, 110, 0.28);
  outline: none;
  transform: translateY(-2px);
}
.feedback-lookup-button:hover:not(:disabled)::before {
  transform: rotate(18deg) translateX(450%);
}
.feedback-lookup-button:active:not(:disabled) {
  box-shadow: 0 7px 15px rgba(8, 118, 110, 0.2);
  transform: translateY(0);
}
.feedback-lookup-button-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.feedback-lookup-search-icon,
.feedback-lookup-button-arrow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.feedback-lookup-search-icon {
  width: 18px;
  height: 18px;
}
.feedback-lookup-button-arrow {
  width: 15px;
  height: 15px;
  transition: transform 170ms ease;
}
.feedback-lookup-button:hover:not(:disabled) .feedback-lookup-button-arrow {
  transform: translateX(2px);
}
.feedback-lookup-button-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.feedback-lookup-button-copy strong,
.feedback-lookup-button-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-lookup-button-copy strong {
  font-family: var(--font-brand);
  font-size: 0.68rem;
}
.feedback-lookup-button-copy small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.52rem;
  font-weight: 700;
}
.feedback-lookup-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: orderLookupSpin 700ms linear infinite;
}
.feedback-lookup-button.is-loading .feedback-lookup-search-icon {
  display: none;
}
.feedback-lookup-button.is-loading .feedback-lookup-spinner {
  display: block;
}
.feedback-lookup-button:disabled,
.feedback-lookup-button:disabled:hover {
  cursor: wait;
  border-color: #08776f;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.2), transparent 40%),
    linear-gradient(135deg, #1aab9d, #08766e);
  box-shadow: 0 8px 17px rgba(8, 118, 110, 0.17);
  opacity: 0.8;
  transform: none;
}
@media (max-width: 420px){
.feedback-lookup-button {
    width: 100%;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce){
.feedback-lookup-button,
  .feedback-lookup-button::before,
  .feedback-lookup-button-arrow {
    transition: none;
  }
.feedback-lookup-spinner {
    animation-duration: 1.4s;
  }
}
/* Softer header registration, brighter sign-in and refreshed image/size controls */
.site-header .signup-button {
  border-color: #45b9ae;
  background:
    radial-gradient(circle at 14% 0, rgba(255, 255, 255, 0.34), transparent 40%),
    linear-gradient(135deg, #62cec3 0%, #36b8ab 52%, #219b90 100%);
  box-shadow:
    0 9px 20px rgba(36, 164, 152, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.site-header .signup-button .signup-icon {
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 3px 8px rgba(16, 112, 104, 0.08);
}
.site-header .signup-button:hover,
.site-header .signup-button:focus-visible {
  border-color: #2ca99e;
  background:
    radial-gradient(circle at 14% 0, rgba(255, 255, 255, 0.38), transparent 42%),
    linear-gradient(135deg, #55c7bc 0%, #2eafa3 52%, #178d83 100%);
  box-shadow:
    0 13px 26px rgba(36, 164, 152, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  outline: none;
}
.size-menu-option.is-active {
  border-color: #56b9af;
  color: #0a5e59;
  background:
    radial-gradient(circle at 95% 0, rgba(255, 220, 139, 0.23), transparent 35%),
    linear-gradient(135deg, #e5f8f4, #f8fffd);
  box-shadow:
    inset 3px 0 0 #159c8f,
    0 7px 15px rgba(31, 95, 94, 0.08);
}
body[data-page="order"] .service-card.is-active {
  border-color: color-mix(in srgb, var(--service-accent) 55%, white);
  background: linear-gradient(135deg, #ffffff, var(--service-soft));
  box-shadow:
    inset 3px 0 0 var(--service-accent),
    0 10px 20px rgba(38, 79, 79, 0.08);
}
body[data-page="order"] .service-card.is-active::before {
  opacity: 0;
}
body[data-page="order"] .service-card.is-active .service-code {
  border-color: transparent;
  background: var(--service-accent);
  color: #ffffff;
  box-shadow:
    0 8px 16px color-mix(in srgb, var(--service-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
/* Shared KROMADE page-loading experience */
html.is-page-loading,
html.is-page-loading body {
  overflow: hidden;
}
.page-loader {
  --page-loader-progress: 0%;
  --page-loader-reveal: 100%;
  --page-loader-progress-color: #35b9c7;
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 255, 255, 0.99) 0 32%, rgba(255, 255, 255, 0.82) 67%, transparent 87%),
    #fbfaf6;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 160ms ease,
    visibility 160ms ease;
}
.page-loader[hidden] {
  display: none;
}
.page-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader-corner-mark {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.page-loader-corner-mark.is-top-left {
  top: 0;
  left: 0;
  width: min(34vw, 568px);
  aspect-ratio: 568 / 722;
}
.page-loader-corner-mark.is-bottom-right {
  right: 0;
  bottom: 0;
  width: min(42.25vw, 706px);
  aspect-ratio: 706 / 547;
}
.page-loader-corner-mark > img,
.page-loader-corner-mark .page-loader-reveal-color,
.page-loader-corner-mark .page-loader-reveal-color img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-loader-reveal-base {
  filter: grayscale(1) saturate(0) brightness(1.34) contrast(0.58);
  opacity: 0.34;
  clip-path: inset(0 0 var(--page-loader-progress) 0);
  will-change: clip-path;
}
.page-loader-reveal-color {
  overflow: hidden;
  clip-path: inset(var(--page-loader-reveal) 0 0 0);
  will-change: clip-path;
}
.page-loader-corner-mark .page-loader-reveal-color {
  opacity: 1;
}
.page-loader-card {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100vw - 36px));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.page-loader-card::after {
  content: none;
}
.page-loader-watercolor {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  color: #17385f;
  text-align: center;
}
.page-loader-flower {
  position: relative;
  width: clamp(164px, 15vw, 210px);
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 21px rgba(42, 69, 82, 0.07));
}
.page-loader-flower > img,
.page-loader-flower .page-loader-reveal-color,
.page-loader-flower .page-loader-reveal-color img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-loader-flower .page-loader-reveal-base {
  filter: grayscale(1) saturate(0) brightness(1.3) contrast(0.62);
  opacity: 0.58;
}
.page-loader-flower .page-loader-reveal-color {
  opacity: 1;
}
.page-loader-percentage {
  display: flex;
  min-width: 4.7ch;
  align-items: baseline;
  justify-content: center;
  margin-top: -8px;
  color: var(--page-loader-progress-color);
  font: 400 clamp(1.42rem, 2.25vw, 1.82rem)/0.95 "Oooh Baby", "Segoe Script", "Brush Script MT", cursive;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  text-shadow: 0 4px 13px color-mix(in srgb, var(--page-loader-progress-color) 22%, transparent);
  transition: color 90ms linear, text-shadow 90ms linear;
}
.page-loader-percentage__value {
  min-width: 3ch;
  text-align: right;
}
.page-loader-percentage__sign {
  margin-left: 0.04em;
  font-size: 0.66em;
  font-weight: 400;
}
@media (max-width: 620px){
.page-loader {
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 47%, rgba(255, 255, 255, 0.99) 0 31%, rgba(255, 255, 255, 0.84) 66%, transparent 89%),
      #fbfaf6;
  }
.page-loader-corner-mark.is-top-left {
    width: min(76vw, 330px);
  }
.page-loader-corner-mark.is-bottom-right {
    width: min(88vw, 380px);
  }
.page-loader-card {
    width: min(100%, 280px);
  }
.page-loader-flower {
    width: clamp(142px, 46vw, 182px);
  }
.page-loader-percentage {
    margin-top: -7px;
    font-size: clamp(1.28rem, 6.2vw, 1.56rem);
  }
}
@media (max-height: 560px) and (min-width: 621px){
.page-loader-flower {
    width: clamp(142px, 24vh, 178px);
  }
.page-loader-percentage {
    margin-top: -9px;
  }
}
@media (prefers-reduced-motion: reduce){
.page-loader,
  .page-loader-percentage {
    transition-duration: 0.01ms;
  }
.page-loader-reveal-color {
    will-change: auto;
  }
.page-loader-reveal-base {
    will-change: auto;
  }
}
/* Refreshed authentication header and unified modal close controls. */
.login-modal {
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(480px, 100%);
  max-height: calc(100dvh - 28px);
  padding: 0 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(175, 217, 213, 0.72);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
    0 34px 86px rgba(15, 64, 70, 0.24),
    0 9px 24px rgba(21, 81, 84, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.login-modal::before,
.login-modal::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}
.login-modal::before {
  top: 0;
  right: 0;
  left: 0;
  height: 150px;
  border-bottom: 1px solid rgba(135, 202, 195, 0.28);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.95), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(244, 189, 79, 0.22), transparent 27%),
    linear-gradient(135deg, #eafffb 0%, #eff9ff 55%, #fff8e8 100%);
}
.login-modal::after {
  top: -78px;
  right: -64px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 48%, rgba(45, 169, 155, 0.17), transparent 54%),
    rgba(255, 255, 255, 0.22);
  box-shadow:
    -28px 82px 0 -58px rgba(239, 100, 97, 0.2),
    -90px 30px 0 -70px rgba(114, 90, 193, 0.2);
}
.login-modal > .eyebrow,
.login-modal > h2,
.login-modal > .auth-tabs,
.login-modal > .auth-panel,
.login-modal > .auth-panel-shell {
  position: relative;
  z-index: 1;
}
.login-modal > .eyebrow,
.login-modal > h2,
.login-modal > .auth-tabs,
.login-modal > .auth-panel,
.login-modal > .auth-panel-shell {
  grid-column: 1 / -1;
}
.login-modal > .eyebrow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 22px 56px 0 0;
  color: #08776e;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.095em;
}
.login-modal > .eyebrow::before {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(19, 155, 143, 0.2);
  border-radius: 15px;
  background:
    center / 22px 22px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.5' fill='none' stroke='%2308776e' stroke-width='1.8'/%3E%3Cpath d='M5.5 19c.8-4.1 3-6.1 6.5-6.1s5.7 2 6.5 6.1' fill='none' stroke='%2308776e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(208, 245, 239, 0.92));
  box-shadow:
    0 9px 20px rgba(8, 119, 110, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  content: "";
}
.login-modal > h2 {
  margin: 6px 58px 0 56px;
  color: #17262e;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.login-modal > .auth-tabs {
  margin: 22px 0 0;
  padding: 5px;
  border-color: rgba(156, 199, 198, 0.5);
  border-radius: 17px;
  background: rgba(242, 249, 249, 0.92);
  box-shadow:
    0 10px 24px rgba(33, 86, 88, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}
.login-modal > .auth-tabs button {
  min-height: 44px;
  border-radius: 12px;
  color: #657b81;
  transition:
    color 180ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 180ms ease;
}
.login-modal > .auth-tabs button:hover:not(.is-active),
.login-modal > .auth-tabs button:focus-visible:not(.is-active) {
  color: #08776e;
  background: rgba(255, 255, 255, 0.72);
  outline: none;
}
.login-modal > .auth-tabs button.is-active {
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.28), transparent 43%),
    linear-gradient(135deg, #22b9aa, #08776e);
  box-shadow:
    0 9px 18px rgba(8, 119, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.login-modal > .auth-tabs button[data-mode="register"].is-active,
.login-modal > .auth-tabs button[data-checkout-auth-mode="register"].is-active {
  color: #5d3916;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.48), transparent 42%),
    linear-gradient(135deg, #ffd56a, #ff9c83);
  box-shadow:
    0 9px 18px rgba(202, 127, 56, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.login-modal > .auth-panel,
.login-modal > .auth-panel-shell {
  margin-top: 18px;
}
.login-modal > .modal-close {
  z-index: 3;
  top: 18px;
  right: 18px;
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
) {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(109, 181, 174, 0.34);
  border-radius: 14px;
  color: #08776e;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.98), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 246, 242, 0.96));
  box-shadow:
    0 8px 20px rgba(26, 83, 84, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 180ms ease;
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::before,
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: none;
  content: "";
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
):hover,
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
):focus-visible {
  border-color: rgba(224, 88, 82, 0.55);
  color: #ffffff;
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(145deg, #ff9583, #e95f5d);
  box-shadow:
    0 12px 25px rgba(213, 78, 73, 0.25),
    0 0 0 4px rgba(239, 100, 97, 0.1);
  outline: none;
  transform: translateY(-2px) rotate(4deg);
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
):active {
  box-shadow:
    0 5px 12px rgba(213, 78, 73, 0.2),
    0 0 0 3px rgba(239, 100, 97, 0.08);
  transform: translateY(0) scale(0.94);
}
@media (max-width: 520px){
.login-modal {
    max-height: calc(100dvh - 16px);
    padding: 0 18px 20px;
    border-radius: 24px;
  }
.login-modal::before {
    height: 142px;
  }
.login-modal > .eyebrow {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding-top: 18px;
    padding-right: 48px;
    font-size: 0.61rem;
  }
.login-modal > .eyebrow::before {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background-size: 20px 20px, auto;
  }
.login-modal > h2 {
    margin: 5px 48px 0 50px;
    font-size: 1.32rem;
  }
.login-modal > .auth-tabs {
    margin-top: 19px;
  }
.login-modal > .modal-close {
    top: 14px;
    right: 14px;
  }
}
@media (prefers-reduced-motion: reduce){
.login-modal > .auth-tabs button,
  :is(
    .modal-close:not([data-action="close-sample-modal"]),
    body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
    .image-options-close,
    .checkout-address-modal-close,
    .account-profile-close-button,
    .account-order-filter-modal-close,
    .ka-close
  ) {
    transition: none;
  }
}
/* About page — creative workshop editorial redesign */
body[data-page="about"] {
  background:
    radial-gradient(circle at 8% 22%, rgba(244, 189, 79, 0.09), transparent 20%),
    radial-gradient(circle at 92% 54%, rgba(114, 90, 193, 0.07), transparent 18%),
    #fffefa;
}
body[data-page="about"] .about-landing {
  --about-ink: #142d35;
  --about-deep: #10282f;
  --about-teal: #0b8d82;
  --about-cyan: #35b9c7;
  --about-magenta: #ec6386;
  --about-violet: #8069d7;
  --about-cream: #fff7df;
  width: 100%;
  overflow: clip;
  color: var(--about-ink);
}
.about-landing a:focus-visible {
  outline: 3px solid rgba(53, 185, 199, 0.45);
  outline-offset: 4px;
}
.about-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 850;
  text-decoration: none;
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.about-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.about-button:hover {
  transform: translateY(-3px);
}
.about-section {
  width: min(1280px, calc(100% - clamp(30px, 7vw, 96px)));
  margin-inline: auto;
  padding-top: clamp(94px, 12vw, 164px);
}
body[data-page="about"].about-motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page="about"].about-motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes about-hero-settle {
  from {
    opacity: 0.45;
    transform: scale(1.065);
  }
  to {
    opacity: 1;
    transform: scale(1.015);
  }
}
@keyframes about-scroll-line {
  0%, 22% {
    transform: translateX(-100%);
  }
  64%, 100% {
    transform: translateX(100%);
  }
}
@media (max-width: 620px){
.about-button {
    min-height: 46px;
    padding: 10px 17px;
    font-size: 0.72rem;
  }
.about-section,
  .about-final-cta {
    width: calc(100% - 24px);
  }
.about-section {
    padding-top: 88px;
  }
.about-final-actions .about-button {
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce){
.about-gallery-card img,
  .about-capability-grid article,
  .about-button,
  body[data-page="about"].about-motion-ready [data-reveal] {
    transition: none;
  }
body[data-page="about"].about-motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
/* About hero v2 — “Tờ in đang mở” */
.about-hero-v2 {
  position: relative;
  width: min(1536px, calc(100% - clamp(20px, 3.5vw, 56px)));
  min-height: clamp(700px, calc(100svh - var(--header-h) - 18px), 850px);
  margin: clamp(10px, 1.5vw, 22px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(20, 45, 53, 0.08);
  border-radius: clamp(24px, 3vw, 38px);
  color: var(--about-ink);
  background: #fbf8ee;
  box-shadow:
    0 30px 80px rgba(18, 51, 55, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  isolation: isolate;
}
.about-hero-v2::before,
.about-hero-v2::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.about-hero-v2::before {
  right: 5.5%;
  bottom: -78px;
  width: 380px;
  height: 150px;
  border-radius: 50%;
  background: rgba(246, 91, 146, 0.1);
  filter: blur(52px);
  transform: rotate(-12deg);
}
.about-hero-v2::after {
  top: 38px;
  right: 42px;
  width: 58px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--about-cyan) 0 33.33%, var(--about-magenta) 33.33% 66.66%, var(--ka-yellow) 66.66%);
  box-shadow: 0 8px 20px rgba(20, 45, 53, 0.09);
}
@keyframes about-hero-v2-copy-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes about-hero-v2-main-in {
  from {
    opacity: 0;
    transform: translate(34px, 18px) rotate(4.5deg) scale(0.96);
  }

  to {
    opacity: 1;
    transform: rotate(1.9deg);
  }
}
@keyframes about-hero-v2-detail-in {
  from {
    opacity: 0;
    transform: translate(-28px, 26px) rotate(-7deg) scale(0.96);
  }

  to {
    opacity: 1;
    transform: rotate(-4.2deg);
  }
}
@keyframes about-hero-v2-mark-in {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-30deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@media (max-width: 980px){
.about-hero-v2 {
    min-height: 0;
  }
}
@media (max-width: 620px){
.about-hero-v2 {
    width: calc(100% - 20px);
    border-radius: 25px;
  }
.about-hero-v2::after {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 7px;
  }
.about-hero-v2-actions .about-button {
    width: auto;
  }
}
/* Vùng cắt lúc phóng to chiếm trọn màn hình.

   Bình thường cửa sổ này là một hộp min(1380px, 100vw - 96px) đặt giữa, có
   viền và bo góc. Dưới 1450px thì bỏ hết: nền tràn viền, cửa sổ đúng bằng
   khung nhìn, không viền không bo góc — chính là bố cục vẫn dùng cho điện
   thoại, nay nâng ngưỡng lên.

   Nút đóng riêng của cửa sổ cũng ẩn theo, vì nút thu nhỏ trên thanh công cụ
   đã làm đúng việc đó. */
@media (max-width: 1449px) {
  .crop-design-modal-backdrop {
    padding: 0;
    background: #f7fbfb;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .crop-design-modal {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .crop-design-modal-host {
    border-radius: 0;
  }

  /* Dùng id để chắc chắn thắng quy tắc `display: grid` ở khối "giữ quy tắc
     cửa sổ cắt cuối tệp" phía trên, không phụ thuộc thứ tự dòng. */
  #cropDesignModal .crop-design-modal-close {
    display: none;
  }
}
@keyframes crop-content-image-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes crop-content-ruler-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* --------------------------------------------------------------------------
   Header giving its top row back while reading down (phones)
   --------------------------------------------------------------------------
   Sliding the header by the measured height of its first row leaves the menu
   exactly where the header's top edge was, so the nav never moves relative to
   the screen — only the mark and the account button travel. page-loader.js
   writes the distance into --header-hide-offset and toggles the class on the
   scroll direction. */
@media (max-width: 1079.98px) {
  .site-header {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .site-header.is-row-hidden {
    transform: translateY(calc(var(--header-hide-offset, 46px) * -1));
  }
}
@media (prefers-reduced-motion: reduce){
.site-header {
    transition: none;
  }
}
/* Khe hở hai bên trên màn hình điện thoại.

   Trước đây mỗi trang tự chọn khe của mình, cộng dồn lại thành 28px tới 38px từ
   viền màn hình tới chữ: khe ngoài của khung trang 12px (trang Đánh giá là 22px)
   cộng với padding của từng thẻ nội dung, có chỗ tới 26px. Trên máy 375px đó là
   gần một phần năm bề ngang bỏ không.

   Khối này gom về một mức chung: khung trang 8px, thẻ nội dung 14px, tức chữ bắt
   đầu ở 22px. Chỉ đặt padding theo trục ngang để không đụng tới khoảng cách dọc
   mà từng trang đã cân riêng. Những thẻ vốn đã chật hơn mức này — khung căn vùng
   cắt 10px, hai thẻ trang Đánh giá 14px — thì để nguyên, vì mục tiêu là bỏ chỗ
   thừa chứ không phải ép mọi thứ về cùng một con số.

   Khe ngoài dùng max() với env(safe-area-inset-*) để ở máy có tai thỏ, khi xoay
   ngang, nội dung không chui xuống dưới phần khuyết của màn hình. */
@media (max-width: 640px) {
  .app {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  /* Trang Đánh giá tự thu khung bằng width, cộng thêm padding của .app thành
     khe đôi. Bỏ phần thu đó đi để chỉ còn một lớp khe duy nhất. */
  body[data-page="feedback"] .app {
    width: 100%;
  }

  /* Hero trang đặt in được đặt kiểu qua body[data-page="order"] nên phải viết
     lại đúng mức đặc hiệu đó thì mới thắng. */
  body[data-page="order"] .studio-intro {
    padding-inline: 14px;
  }

  .service-panel,
  .product-info-panel,
  .feedback-page-heading,
  .order-lookup-intro,
  .order-lookup-form,
  .care-hero,
  .care-form-panel,
  .bug-hero-card,
  .bug-privacy-note {
    padding-inline: 14px;
  }

  /* Chân trang và khung trang Thanh toán tự thu bằng width nên phải chỉnh riêng
     cho khớp mức 8px. */
  .site-footer-main,
  .site-footer-bottom {
    width: min(calc(100% - 16px), 560px);
  }

  .checkout-app {
    width: calc(100% - 16px);
  }

  .checkout-missing-draft,
  .checkout-payment-form {
    padding-inline: 14px;
  }
}
/* Trang Hỗ trợ, Báo lỗi và Giới thiệu tự thu khung bằng width, và mốc của chúng
   là 620px chứ không phải 640px, nên phải sửa đúng trong mốc đó. */
@media (max-width: 620px) {
  .care-page {
    width: min(100% - 16px, 580px);
  }

  .about-hero,
  .about-hero-v2,
  .about-section,
  .about-final-cta {
    width: calc(100% - 16px);
  }

  .about-hero-v2-grid,
  .about-final-cta {
    padding-inline: 14px;
  }
}
.admin-workspace .upload-hero .eyebrow {
  font-size: 0.6rem;
}
.admin-country-filter-chips button.is-active {
  border-color: #0d9186;
  background: linear-gradient(135deg, #17a99b, #087e76);
  color: #ffffff;
  box-shadow: 0 7px 17px rgba(11, 132, 122, 0.17);
}
.admin-country-filter-chips button.is-active .admin-country-filter-count {
  background: rgba(255, 255, 255, 0.2);
}
.collection-picker-tools .text-button {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
}
.option-choice.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.product-option-gear:hover,
.product-option-gear.is-open {
  border-color: var(--ink);
  color: var(--ink);
}
.pp-list-item:hover,
.pp-list-item.is-active {
  border-color: var(--ink);
}
.fm-view-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.fm-view-tab.is-active .fm-view-count {
  background: color-mix(in srgb, var(--paper) 26%, transparent);
}
/* Ô đang được kéo mờ đi để nhìn rõ chỗ sắp thả vào. */
.fm-item.is-dragging {
  opacity: 0.4;
}
/* Màn hẹp: hai ô chọn xếp dọc, chỉ nút xoá ở lại cạnh ô trên. Tên hồ sơ dài
   như “Ốp Galaxy S24 Ultra” không đọc được trong một ô rộng 130px. */
@media (max-width: 620px) {
  .slot-rule-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Nút xoá ở lại cạnh ô trên, ô chọn hồ sơ xuống hàng dưới trọn chiều ngang. */
  .slot-rule-row > :nth-child(1) {
    grid-area: 1 / 1;
  }

  .slot-rule-row > :nth-child(3) {
    grid-area: 1 / 2;
  }

  .slot-rule-row > :nth-child(2) {
    grid-area: 2 / 1 / 3 / -1;
  }

  .slot-crop-dimensions {
    grid-template-columns: minmax(0, 1fr);
  }
}
.product-view-tab.is-active {
  border-color: transparent;
  background: var(--ink);
  color: var(--paper);
}
.product-view-tab.is-active .product-view-count {
  background: color-mix(in srgb, var(--paper) 26%, transparent);
}
.product-preview-currency button.is-active {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 6px 14px rgba(16, 123, 114, 0.2);
}
.product-preview-section-heading .eyebrow {
  margin-bottom: 3px;
}
/* Trạng thái đã chọn giữ đúng luật của box dịch vụ trên trang đặt in. Đặt sau
   các luật mô phỏng trạng thái thường để màu icon SVG currentColor đổi sang
   trắng giống giao diện khách, kể cả với icon tùy chỉnh. */
.product-preview-service-grid .service-card.is-active {
  border-color: color-mix(in srgb, var(--service-accent) 55%, white);
  background: linear-gradient(135deg, #ffffff, var(--service-soft));
  box-shadow:
    inset 3px 0 0 var(--service-accent),
    0 10px 20px rgba(38, 79, 79, 0.08);
}
.product-preview-service-grid .service-card.is-active::before {
  opacity: 0;
}
.product-preview-service-grid .service-card.is-active .service-code {
  border-color: transparent;
  color: #ffffff;
  background: var(--service-accent);
  box-shadow:
    0 8px 16px color-mix(in srgb, var(--service-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.product-preview-layout-switch button.is-active {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 5px 12px rgba(16, 123, 114, 0.18);
}
.product-preview-choice-backdrop .option-modal-head .eyebrow {
  margin-bottom: 2px;
}
.product-editor-page-tabs button.is-active {
  border-color: color-mix(in srgb, var(--teal) 58%, var(--line));
  background: color-mix(in srgb, var(--teal) 8%, var(--paper));
  color: var(--teal-dark, var(--teal));
}
.product-editor-page-tabs button.is-active span {
  background: var(--teal);
  color: #fff;
}
@media (hover: hover) and (pointer: fine){
body[data-page="find"] .gallery-pagination.ka-scope .account-order-page-nav:not(:disabled):hover,
  body[data-page="find"] .gallery-pagination.ka-scope .account-order-page-number:not(.is-active):hover {
    border-color: var(--scrollbar-thumb);
    color: var(--scrollbar-thumb);
  }
}
.preview-heading-label > .eyebrow {
  margin: 0;
}
.art-quality-hint.is-peeking,
.art-quality-hint.is-touch-armed,
.art-quality-hint:focus-visible {
  width: var(--art-quality-hint-open-width);
  max-height: 14em;
  gap: 7px;
}
.art-quality-hint.is-peeking .art-quality-hint-text,
.art-quality-hint.is-touch-armed .art-quality-hint-text,
.art-quality-hint:focus-visible .art-quality-hint-text {
  opacity: 1;
  clip-path: inset(-20px -24px -20px -12px);
  transform: translateX(0);
  transition-delay: 100ms, 35ms, 35ms;
}
.art-quality-hint.is-peeking .art-quality-hint-text::before,
.art-quality-hint.is-touch-armed .art-quality-hint-text::before,
.art-quality-hint:focus-visible .art-quality-hint-text::before {
  animation: art-quality-hint-brush-in 430ms cubic-bezier(.18, .8, .2, 1) both;
}
.art-quality-hint.is-peeking .art-quality-hint-text::after,
.art-quality-hint.is-touch-armed .art-quality-hint-text::after,
.art-quality-hint:focus-visible .art-quality-hint-text::after {
  animation: art-quality-hint-drops-in 230ms ease-out 310ms both;
}
@keyframes art-quality-hint-brush-in {
  0% {
    opacity: 0;
    transform: scaleX(0.025) rotate(-0.35deg);
  }

  14% {
    opacity: 0.92;
  }

  100% {
    opacity: 0.92;
    transform: scaleX(1) rotate(-0.35deg);
  }
}
@keyframes art-quality-hint-drops-in {
  from {
    opacity: 0;
    transform: translateX(-8px) scale(0.75);
  }

  to {
    opacity: 0.9;
    transform: translateX(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce){
.art-quality-hint.is-peeking .art-quality-hint-text::before,
  .art-quality-hint.is-touch-armed .art-quality-hint-text::before,
  .art-quality-hint:focus-visible .art-quality-hint-text::before,
  .art-quality-hint.is-peeking .art-quality-hint-text::after,
  .art-quality-hint.is-touch-armed .art-quality-hint-text::after,
  .art-quality-hint:focus-visible .art-quality-hint-text::after {
    animation: none;
    opacity: 0.9;
    transform: none;
  }
}
/* Nút đóng neo hẳn vào góc trên bên phải BÊN TRONG khung, không trôi theo dòng
   tiêu đề. Có nền và viền riêng nên nó nổi lên trên mọi nội dung phía sau. */
.library-modal .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.library-modal .modal-close:hover {
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.library-item.is-active {
  border-color: var(--service-accent, var(--ink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--service-accent, #11978b) 35%, transparent);
}
.library-suggest-item.is-active {
  border-color: var(--service-accent, var(--ink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--service-accent, #11978b) 35%, transparent);
}
/* Dưới 950px: chiếm trọn màn hình, bỏ luôn bo góc và đổ bóng. Ở khổ đó mà vẫn
   chừa lề với bo góc thì phần lưới ảnh còn lại quá hẹp, mà cái viền quanh cũng
   chẳng để làm gì khi phía sau không còn nhìn thấy gì. */
@media (max-width: 950px) {
  .library-modal-backdrop {
    padding: 0;
  }

  .library-modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}
/* Hàng tiêu đề khung xem trước: nhãn, thanh ô ảnh, nút Đổi ảnh.
   ---------------------------------------------------------------------------
   Cho xuống dòng ở MỌI bề ngang, và thanh ô ảnh khai cận dưới 240px. Nhờ vậy
   khi còn dưới 240px cho nó thì nó tự rơi xuống hàng riêng — không phải chờ một
   ngưỡng pixel nào cả. Trước đây chỉ xuống dòng dưới 620px, nên trong khoảng
   620–950px nút Đổi ảnh bóp thanh ô ảnh lại và hai chip trôi ra ngoài vùng nhìn
   thấy (thanh này cuộn ngang được nên chúng biến mất chứ không tràn). */
.preview-heading.row {
  flex-wrap: wrap;
}
/* Màn hẹp: nút Đổi ảnh đứng riêng một hàng trên cùng, nhường cả hàng dưới cho
   nhãn và hai chip ô ảnh. */
/* Màn hẹp: nhãn "Xem trước" và nút Đổi ảnh chung hàng đầu — nhãn bên trái, nút
   bên phải theo justify-content: space-between sẵn có. Thanh ô ảnh xuống trọn
   hàng dưới, nơi nó có cả bề ngang cho mình. */
@media (max-width: 620px) {
  .preview-heading-right {
    order: 2;
  }

  /* Ở khổ này cho chip xuống dòng thay vì cuộn ngang. Cuộn ngang hợp với sản
     phẩm nhiều ô trên màn rộng, nhưng trên điện thoại hai chip tên dài đã đủ
     tràn — mà chip nằm ngoài vùng cuộn thì coi như không có, khách không biết
     là còn mặt sau. Xuống dòng thì cao thêm một hàng nhưng thấy đủ. */
  .slot-switcher {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.slot-chip.is-active {
  border-color: var(--service-accent, var(--ink));
  background: color-mix(in srgb, var(--service-accent, #11978b) 10%, var(--paper));
}
@keyframes art-drop-nho-len {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes art-upload-status-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94);
  }
}
@keyframes artwork-crop-result-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: none; }
}
@keyframes artwork-crop-ruler-result-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Khung hẹp thì bỏ dòng phụ và thu nút lại cho vừa lòng hình in. */
/* Khung ảnh trên điện thoại chỉ rộng chừng 145px, nên mọi thứ phải nhường chỗ
   cho chữ: lề ngang còn 6px, icon nhỏ lại, và dòng phụ ẩn đi. Nhãn chính vẫn
   phải nằm trọn một dòng — đó mới là chữ khách cần đọc. */
@media (max-width: 620px) {
  .art-drop {
    gap: 7px;
    padding: 8% 6px;
  }

  .art-drop-button {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 8px;
  }

  .art-drop-icon {
    width: 20px;
    height: 20px;
  }

  .art-drop-icon svg {
    width: 18px;
    height: 18px;
  }

  .art-drop-copy strong {
    font-size: 0.74rem;
  }

  .art-drop-copy small {
    display: none;
  }
}
/* Ô chọn quốc gia có lá cờ.

   Phải tự dựng thay vì dùng <select> vì thẻ đó không nhận được ảnh trong
   <option> — đó là giới hạn của chính thẻ, không phải lựa chọn thẩm mỹ. Cờ vẽ
   bằng SVG chứ không dùng ký tự emoji cờ, vì Windows không có phông cho emoji
   cờ và sẽ hiện ra hai chữ cái thay vì lá cờ. */
.country-picker {
  position: relative;
  display: grid;
  gap: 7px;
}
/* Nhãn xếp ngang để icon đứng trước chữ, giống mọi nhãn ô nhập khác. Không có
   icon thì flex một phần tử cũng không đổi gì so với span thường. */
.country-picker-label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #52686f;
  font-size: 0.72rem;
  font-weight: 800;
}
.country-picker-trigger {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid #d6e3e2;
  border-radius: 13px;
  background: #ffffff;
  color: #142d35;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.country-picker-trigger:hover,
.country-picker.is-open .country-picker-trigger {
  border-color: #65bcb3;
  box-shadow: 0 0 0 3px rgba(19, 151, 143, 0.12);
  outline: none;
}
.country-picker-flag {
  display: block;
  flex: 0 0 auto;
  width: 27px;
  height: 18px;
  overflow: hidden;
  border-radius: 3px;
}
.country-picker-flag svg,
.country-picker-flag img {
  display: block;
  width: 27px;
  height: 18px;
  object-fit: cover;
}
.country-picker-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 800;
}
.country-picker-native {
  flex: 0 0 auto;
  color: #7d9296;
  font-size: 0.72rem;
  font-weight: 700;
}
/* Nước nào viết giống nhau ở cả hai ngôn ngữ thì ô này rỗng, ẩn hẳn đi để
   không chừa lại một khoảng trống giữa tên nước và mũi tên. */
.country-picker-native:empty {
  display: none;
}
.country-picker-arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  transition: transform 180ms ease;
}
.country-picker-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #7d9296;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.country-picker.is-open .country-picker-arrow {
  transform: rotate(180deg);
}
/* Danh sách nổi lên trên chứ không đẩy form giãn ra, vì ô chọn nằm ngay đầu
   form đăng ký và mọi ô bên dưới sẽ nhảy chỗ mỗi lần mở. */
.country-picker-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid #d6e3e2;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(20, 45, 53, 0.16);
}
.country-picker-menu[hidden] {
  display: none;
}
.country-picker-option {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #142d35;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.country-picker-option:hover,
.country-picker-option:focus-visible {
  background: #eef8f6;
  outline: none;
}
.country-picker-option.is-active {
  background: #e3f4f1;
}
.country-picker-check {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #0b7f75;
  opacity: 0;
}
.country-picker-check svg {
  width: 17px;
  height: 17px;
}
.country-picker-option.is-active .country-picker-check {
  opacity: 1;
}
/* Trong modal đăng nhập, ô chọn đứng ngay trên ô họ tên nên nó phải trông cùng
   một họ với các ô nhập bên dưới. */
.auth-country-slot {
  display: block;
  margin-bottom: 2px;
}
@media (max-width: 480px){
.country-picker-native {
    display: none;
  }
}
/* KHÔNG xoay hình trong nút công cụ.

   Đã thử xoay rồi phải bỏ: mấy hình này mã hoá một trục chứ không phải một
   vật. "Fit ngang" là mũi tên nằm ngang; xoay 90 độ thì nó thành mũi tên dọc,
   tức là biến thành "fit dọc". "Fit dọc" thì ngược lại. Lật và xoay cũng vẽ
   theo một trục nên gặp đúng cảnh đó. Dấu trừ của cụm zoom xoay đi thành một
   vạch đứng, trông như nút hỏng.

   Nút trượt thì khác: nó là một đường chạy có chiều, nên xoay cả nút 90 độ là
   đúng — phần đó nằm ở quy tắc .crop-confirm-button phía trên. */

/* ---------------------------------------------------------------------------
   Modal tràn kín màn hình trên điện thoại
   ---------------------------------------------------------------------------
   Dưới 640px, khung nhìn không còn chỗ cho một viền tối chạy quanh hộp: nó ăn
   mất bề ngang vốn đã hẹp mà chẳng nói thêm điều gì — khách đã biết mình đang ở
   trong một cửa sổ nhờ chính nội dung của nó.

   Backdrop vẫn giữ nguyên là backdrop, chỉ bỏ khoảng đệm và thôi căn giữa; hộp
   bên trong nhận trọn khung nhìn và bỏ bo góc vì không còn góc nào lộ ra.

   Chỉ áp cho những cửa sổ nhiều nội dung. Hộp xác nhận ngắn — xoá đơn, xác nhận
   khách vãng lai, .ka-confirm — giữ nguyên dạng gọn ở giữa: kéo hai dòng chữ ra
   kín màn hình chỉ tạo một khoảng trống lớn. Vì .modal-backdrop dùng chung cho
   cả hai nhóm nên phải lọc bằng :has() thay vì gọi thẳng tên lớp.

   Cửa sổ vùng cắt ảnh không có ở đây: nó đã tràn kín từ mốc 1450px.

   Hai điều kiện chứ không một. Bám mỗi bề ngang thì điện thoại nằm ngang lọt
   lưới: khổ 844x390 rộng hơn 640px nên viền tối quay lại, mà đó lại đúng là lúc
   chiều cao hiếm nhất. Mốc cao 480px bắt được mọi điện thoại nằm ngang và không
   chạm tới máy tính bảng — iPad nằm ngang cao 820px, máy tính xách tay nhỏ cao
   800px. Đổi lại, một cửa sổ trình duyệt bị bóp thấp dưới 480px trên máy bàn
   cũng rơi vào đây. */
@media (max-width: 640px), (max-height: 480px) {
  .modal-backdrop:has(> .login-modal),
  .image-modal-backdrop,
  .account-address-modal-backdrop,
  .checkout-address-modal-backdrop,
  .account-order-filter-backdrop,
  .manager-modal-backdrop,
  .feedback-modal-backdrop,
  .feedback-detail-backdrop {
    padding: 0;
    place-items: stretch;
  }

  .modal-backdrop:has(> .login-modal) > .login-modal,
  .image-modal-backdrop > .image-modal,
  .account-address-modal-backdrop > .account-address-modal,
  .checkout-address-modal-backdrop > .checkout-address-modal,
  .account-order-filter-backdrop > .account-order-filter-modal,
  .manager-modal-backdrop > .manager-editor,
  .feedback-modal-backdrop > .feedback-form,
  .feedback-detail-backdrop > .feedback-detail-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}
/* ---------------------------------------------------------------------------
   Lớp sương lúc đang chuẩn bị thanh toán
   ---------------------------------------------------------------------------
   Bật khi lượt kéo xác nhận đã gửi đi và tắt khi có phản hồi; xem
   setCheckoutPreparingVeil trong app.js.

   Chỉ nút kéo xác nhận nổi lên trên lớp sương — đó là chỗ khách vừa thao tác và
   cũng là chỗ đang chạy dòng "Đang chuẩn bị", nên nó phải rõ nét. */
.checkout-veil {
  position: fixed;
  inset: 0;
  z-index: 12500;
  background: rgba(226, 240, 238, 0.36);
  backdrop-filter: blur(5px) saturate(1.04);
  -webkit-backdrop-filter: blur(5px) saturate(1.04);
  animation: checkoutVeilIn 200ms ease both;
}
/* Trong cửa sổ vùng cắt toàn màn hình, cửa sổ đã là khối chứa nên position:
   fixed ở đây tính theo cửa sổ chứ không theo khung nhìn. Dùng absolute cho
   đúng ý và cho một thang z-index riêng bên trong cửa sổ đó. */
.crop-design-modal > .checkout-veil {
  position: absolute;
  z-index: 40;
}
@keyframes checkoutVeilIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce){
.checkout-veil {
    animation: none;
  }
}
/* Demo Mode toàn website
   ------------------------------------------------------------------------- */
.kromade-demo-banner {
  position: sticky;
  top: var(--header-h);
  z-index: 49;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 7px clamp(14px, 4vw, 42px);
  border: 0;
  border-bottom: 1px solid rgba(121, 14, 25, 0.34);
  color: #fff;
  background: linear-gradient(100deg, #9f1d2e, #d43545 52%, #ae1d30);
  box-shadow: 0 8px 20px rgba(122, 20, 31, 0.18);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: left;
}
.kromade-demo-banner strong {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 900;
}
.kromade-demo-banner > span:nth-child(3) {
  overflow: hidden;
  max-width: min(720px, 58vw);
  color: rgba(255, 255, 255, 0.88);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kromade-demo-banner-icon,
.kromade-demo-modal-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 900;
}
.kromade-demo-banner-icon {
  width: 21px;
  height: 21px;
  font-size: 0.69rem;
}
.kromade-demo-banner-arrow {
  margin-left: 4px;
  font-size: 1.25rem;
  line-height: 1;
}
.kromade-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23, 31, 35, 0.66);
  backdrop-filter: blur(12px);
}
.kromade-demo-modal[hidden] {
  display: none;
}
.kromade-demo-modal-card {
  position: relative;
  width: min(620px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  padding: clamp(25px, 5vw, 42px);
  overflow: auto;
  border: 1px solid rgba(172, 32, 47, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(212, 53, 69, 0.11), transparent 34%),
    #fff;
  box-shadow: 0 34px 90px rgba(11, 20, 24, 0.32);
}
.kromade-demo-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ead4d7;
  border-radius: 50%;
  color: #8b2330;
  background: #fff6f7;
  font-size: 1.35rem;
}
.kromade-demo-modal-heading {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  padding-right: 34px;
}
.kromade-demo-modal-icon {
  width: 58px;
  height: 58px;
  color: #fff;
  background: #c72d40;
  box-shadow: 0 12px 24px rgba(188, 39, 57, 0.22);
  font-size: 1.35rem;
}
.kromade-demo-modal-heading p {
  margin: 0 0 3px;
  color: #c72d40;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kromade-demo-modal-heading h2 {
  margin: 0;
  color: #293e43;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  line-height: 1.18;
}
.kromade-demo-modal-lead {
  margin: 20px 0;
  color: #63767a;
  font-size: 0.85rem;
  line-height: 1.68;
}
.kromade-demo-modal-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kromade-demo-modal-list li {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid #ece2e3;
  border-radius: 14px;
  background: #fffafa;
}
.kromade-demo-modal-list li > span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  color: #ac2939;
  background: #f8e9eb;
  font-size: 0.62rem;
  font-weight: 900;
}
.kromade-demo-modal-list p {
  margin: 1px 0 0;
  color: #53676b;
  font-size: 0.77rem;
  line-height: 1.55;
}
.kromade-demo-custom-message {
  margin-top: 16px;
  padding: 16px 17px;
  border-left: 4px solid #c72d40;
  border-radius: 4px 15px 15px 4px;
  background: #f7eeee;
}
.kromade-demo-custom-message strong {
  display: block;
  margin-bottom: 5px;
  color: #9d2332;
  font-size: 0.7rem;
}
.kromade-demo-custom-message p {
  margin: 0;
  color: #55484a;
  font-size: 0.8rem;
  line-height: 1.62;
  white-space: pre-wrap;
}
.kromade-demo-modal-confirm {
  width: 100%;
  margin-top: 20px;
}
body.kromade-demo-modal-open {
  overflow: hidden;
}
.upload-admin-badge:hover,
.upload-admin-badge:focus-visible,
.upload-admin-badge.is-active {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
  outline: none;
}
.test-tool-hero .eyebrow {
  color: #9fe4da;
}
.test-tool-demo-toggle.is-active {
  color: #fff;
  background: #bd2f41;
  box-shadow: 0 10px 22px rgba(183, 42, 61, 0.2);
}
.test-tool-maintenance-toggle.is-active {
  color: #fff;
  background: #735bc8;
  box-shadow: 0 10px 22px rgba(103, 80, 188, 0.22);
}
.test-tool-demo-content-filters button.is-active {
  border-color: #167f76;
  color: #fff;
  background: #167f76;
}
.test-tool-gate-card > p:not(.eyebrow) {
  margin: 0 auto 20px;
  color: #6a7d80;
  font-size: 0.78rem;
  line-height: 1.6;
}
@media (max-width: 680px){
.kromade-demo-banner {
    top: 0;
    justify-content: flex-start;
    min-height: 42px;
    padding-inline: 12px;
  }
.kromade-demo-banner > span:nth-child(3) {
    max-width: none;
  }
.kromade-demo-banner strong {
    display: none;
  }
.kromade-demo-modal {
    align-items: end;
    padding: 10px;
  }
.kromade-demo-modal-card {
    max-height: calc(100dvh - 20px);
    padding: 25px 18px 20px;
    border-radius: 23px;
  }
.kromade-demo-modal-heading {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
.kromade-demo-modal-icon {
    width: 48px;
    height: 48px;
  }
}
.db-sync-loading.is-error {
  color: #a03a48;
}
@media (max-width: 820px){
.db-sync-selection-actions,
  .db-sync-run-row .primary-button {
    width: 100%;
  }
}
body[data-page="feedback"] { min-width: 0; }
.coupon-form-status.is-error { color: var(--danger); }
.maintenance-note.is-left {
  top: 28%;
  left: clamp(28px, 7vw, 110px);
  transform: rotate(-7deg);
}
.maintenance-note.is-right {
  top: 31%;
  right: clamp(28px, 7vw, 110px);
  font-family: "Quicksand", "Segoe UI", Arial, sans-serif;
  font-size: clamp(.92rem, 1.28vw, 1.2rem);
  transform: rotate(-6deg);
}
.maintenance-card.is-language-ja :is(h1, .maintenance-copy, .maintenance-note, .maintenance-status) {
  font-family: "Klee One", "Yu Mincho", "Hiragino Mincho ProN", serif;
}
.maintenance-card.is-language-ko :is(h1, .maintenance-copy, .maintenance-note, .maintenance-status) {
  font-family: "Gowun Dodum", "Malgun Gothic", sans-serif;
}
@keyframes maintenance-retry-spin {
  to { transform: rotate(360deg); }
}
/* Trang tra cứu đơn hàng: khung giấy màu nước, chữ viết tay là ảnh PNG để giữ
   nguyên nét bút và câu tiếng Anh ở mọi ngôn ngữ. Toàn bộ quy tắc được giới
   hạn trong main nên header và footer dùng chung không bị đổi kiểu. */
.order-lookup-page {
  --lookup-ink: #123e6b;
  --lookup-blue: #0d6f9f;
  --lookup-line: rgba(35, 101, 148, 0.2);
  --lookup-paper: #fffefa;
  --lookup-content-font: var(--font-ui);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--lookup-ink);
  font-family: var(--lookup-content-font);
}
.order-lookup-page :where(button, input, textarea, select) {
  font-family: inherit;
}
.order-lookup-watercolor-card .order-lookup-result-title .eyebrow {
  margin: 0 0 5px;
  color: #168bc4;
  font-family: var(--lookup-content-font);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
/* Giữ câu viết tay đủ lớn trong phần đầu thẻ desktop; các breakpoint hẹp
 * tiếp tục dùng kích thước linh hoạt để thẻ không tạo thanh cuộn ngang. */
@media (min-width: 1101px) {
  .order-lookup-result-script--good {
    width: 700px;
    min-width: 700px;
  }
}
.order-lookup-watercolor-card .order-progress-marker svg.ka-icon {
  width: 21px;
  height: 21px;
  stroke-width: 1.65;
}
/* The reference uses a plain check in the final circle. Keep the shared
   account progress renderer unchanged and replace only this card's last icon. */
.order-lookup-watercolor-card .order-progress-step:last-child .order-progress-marker svg.ka-icon {
  display: none;
}
@media (max-width: 680px){
.order-lookup-watercolor-card .order-progress-marker svg.ka-icon {
    width: 17px;
    height: 17px;
  }
}
.order-lookup-watercolor-card .order-progress-marker::after,
.order-lookup-watercolor-card .order-progress-marker svg.ka-icon {
  display: block;
}
.order-lookup-watercolor-card .order-progress-step:last-child .order-progress-marker svg.ka-icon {
  display: block;
}
/* ===========================================================================
   Feedback modal — Kromade pastel watercolor stationery
   Mirrors the approved account modal: light paper, watercolor corners,
   restrained navy actions and compact editorial typography.
   ========================================================================== */
.feedback-modal-backdrop {
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  background: rgba(255, 254, 251, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.feedback-form.feedback-modal {
  isolation: isolate;
  width: min(720px, calc(100vw - 36px));
  height: auto;
  max-width: 720px;
  max-height: calc(100dvh - 36px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(229, 231, 232, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 62px rgba(56, 63, 70, 0.14),
    0 6px 18px rgba(74, 105, 124, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.feedback-form.feedback-modal::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") left top / 34% auto no-repeat,
    url("assets/catalog/page-loader-watercolor-bottom-right.webp") right bottom / 38% auto no-repeat;
  content: "";
  opacity: 0.26;
  pointer-events: none;
}
.feedback-modal-heading,
.feedback-account-product-picker,
.feedback-already-submitted,
.feedback-form-body {
  position: relative;
  z-index: 1;
}
#feedbackModal .feedback-modal > .modal-close {
  z-index: 4;
  top: 14px;
  right: 14px;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 50%;
  color: #88939d !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.18rem;
  line-height: 1;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#feedbackModal .feedback-modal > .modal-close:hover,
#feedbackModal .feedback-modal > .modal-close:focus-visible {
  border: 0 !important;
  color: #b43f4a !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  transform: none;
}
#feedbackModal .feedback-modal > .modal-close:hover::before,
#feedbackModal .feedback-modal > .modal-close:hover::after,
#feedbackModal .feedback-modal > .modal-close:focus-visible::before,
#feedbackModal .feedback-modal > .modal-close:focus-visible::after {
  background: #b43f4a !important;
}
.feedback-modal-heading {
  display: block;
  padding: 42px 72px 20px;
  border: 0;
  background: transparent;
  text-align: center;
}
.feedback-modal-heading-icon,
.feedback-modal-heading .eyebrow {
  display: none;
}
.feedback-modal-heading > div {
  display: block;
}
.feedback-modal-heading h2 {
  color: #172b45;
  font-family: "Noto Serif", "Klee One", Georgia, serif;
  font-size: 1.72rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
}
.feedback-modal-heading h2::after {
  display: block;
  width: 25px;
  height: 2px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: #bc944d;
  content: "";
}
.feedback-modal-heading > div > span {
  display: block;
  max-width: 46ch;
  margin: 12px auto 0;
  color: #536273;
  font-size: 0.72rem;
  line-height: 1.55;
}
.feedback-account-product-picker {
  gap: 14px;
  min-height: 390px;
  padding: 8px 28px 26px;
  background: transparent;
}
/* Giữ thanh cuộn trong danh sách sản phẩm thay vì để cả card modal lúc có lúc
   không có thanh cuộn trong khi hiệu ứng mở đang chạy. */
.feedback-form.feedback-modal.is-account-product-picker {
  overflow-y: hidden;
}
.feedback-form.is-account-product-picker .feedback-account-product-picker {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  height: min(390px, calc(100dvh - 176px));
  min-height: 0;
}
.feedback-form.is-account-product-picker .feedback-modal-product-list {
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  scrollbar-gutter: stable;
}
.feedback-form.is-already-feedback {
  background: rgba(255, 255, 255, 0.96);
}
.feedback-already-submitted {
  min-height: 470px;
  padding: 60px 54px 48px;
}
.feedback-already-submitted-icon {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(169, 207, 223, 0.62);
  border-radius: 50%;
  color: #315f7b;
  background: rgba(236, 247, 251, 0.88);
  box-shadow:
    0 12px 25px rgba(41, 71, 100, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.feedback-already-submitted h2 {
  color: #172b45;
  font-family: "Noto Serif", "Klee One", Georgia, serif;
}
.feedback-already-submitted > p:not(.eyebrow),
.feedback-already-submitted-note {
  color: #5f6f80;
}
.feedback-already-submitted > p strong {
  color: #294764;
}
.feedback-already-submitted-note {
  border-color: #d8dfe4;
  background: rgba(255, 255, 255, 0.72);
}
.feedback-already-submitted-note > span:first-child {
  color: #294764;
  background: rgba(169, 207, 223, 0.22);
}
.feedback-already-submitted-actions .primary-button {
  border-color: transparent;
  border-radius: 999px;
  background: linear-gradient(90deg, #315f7b 0%, #437c99 48%, #315f7b 100%);
  box-shadow: 0 8px 17px rgba(41, 71, 100, 0.2);
}
.feedback-already-submitted-actions .secondary-button {
  border-color: #9bb6c5;
  border-radius: 999px;
  color: #294764;
  background: rgba(255, 255, 255, 0.74);
}
.feedback-form-body {
  gap: 12px;
  padding: 0 28px 22px;
}
.feedback-form-section {
  gap: 14px;
  padding: 17px;
  border: 1px solid #d8dfe4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 7px 18px rgba(41, 71, 100, 0.05);
}
.feedback-section-heading > span {
  border: 1px solid rgba(169, 207, 223, 0.5);
  border-radius: 9px;
  color: #294764;
  background: rgba(169, 207, 223, 0.2);
}
.feedback-section-heading strong {
  color: #172b45;
  font-family: "Noto Serif", "Klee One", Georgia, serif;
  font-weight: 600;
}
.feedback-section-heading small,
.feedback-order-email-field small,
.feedback-upload-box small,
.feedback-upload-file-name,
.feedback-form-note {
  color: #667687;
}
.feedback-form.feedback-modal label,
.feedback-field-title,
.feedback-rating-field legend {
  color: #294764;
}
.feedback-order-email-field input,
.feedback-order-lookup-row input,
.feedback-comment-field textarea {
  border-color: #d8dfe4;
  border-radius: 6px;
  color: #172b45;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 7px rgba(41, 71, 100, 0.045);
}
.feedback-order-email-field input:focus,
.feedback-order-lookup-row input:focus,
.feedback-comment-field textarea:focus {
  border-color: #6f9aa6;
  box-shadow: 0 0 0 3px rgba(169, 207, 223, 0.25);
  outline: none;
}
.feedback-lookup-button,
.feedback-submit-button {
  border: 1px solid rgba(41, 71, 100, 0.08);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #315f7b 0%, #437c99 48%, #315f7b 100%);
  box-shadow: 0 8px 17px rgba(41, 71, 100, 0.2);
}
.feedback-lookup-button::before,
.feedback-submit-button::before {
  display: none;
}
.feedback-lookup-button-icon,
.feedback-submit-button .feedback-submit-icon {
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.feedback-lookup-button-copy small {
  color: rgba(255, 255, 255, 0.72);
}
.feedback-lookup-button:hover:not(:disabled),
.feedback-lookup-button:focus-visible,
.feedback-submit-button:hover:not(:disabled),
.feedback-submit-button:focus-visible:not(:disabled) {
  border-color: rgba(41, 71, 100, 0.15);
  color: #fff;
  background: linear-gradient(90deg, #294f69 0%, #39738f 48%, #294f69 100%);
  box-shadow: 0 10px 21px rgba(41, 71, 100, 0.24);
  outline: none;
  transform: translateY(-1px);
}
.feedback-lookup-button:disabled,
.feedback-lookup-button:disabled:hover {
  border-color: rgba(41, 71, 100, 0.1);
  color: #fff;
  background: linear-gradient(90deg, #7192a6, #86aabd);
  box-shadow: 0 6px 13px rgba(41, 71, 100, 0.12);
  opacity: 0.78;
  transform: none;
}
.feedback-submit-button:disabled,
.feedback-submit-button:disabled:hover {
  border-color: #d8e2e7;
  color: #788c98;
  background: linear-gradient(135deg, #f3f7f8, #e8f0f3);
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.feedback-submit-button:disabled .feedback-submit-icon {
  border-color: #d8e2e7;
  background: rgba(255, 255, 255, 0.72);
}
.feedback-form-error {
  margin: 0 28px 18px;
  border-color: #f1cdd2;
  color: #a23c49;
  background: #fff0f1;
}
.feedback-order-summary {
  border-color: rgba(169, 207, 223, 0.58);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(248, 252, 254, 0.96), rgba(235, 246, 250, 0.9));
}
.feedback-rating-field {
  border-color: #e6dfd2;
  border-radius: 10px;
  background: rgba(255, 253, 247, 0.86);
}
.feedback-star-picker button {
  border-color: #e3dfd5;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
}
.feedback-field-title em {
  color: #91652c;
  background: rgba(255, 242, 223, 0.86);
}
.feedback-upload-box {
  border-color: #a9cfdf;
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 10%, rgba(242, 191, 195, 0.14), transparent 31%),
    rgba(244, 250, 252, 0.88);
}
.feedback-upload-box:hover,
.feedback-upload-box:focus-within,
.feedback-upload-field.has-file .feedback-upload-box {
  border-color: #6f9aa6;
  background:
    radial-gradient(circle at 92% 10%, rgba(242, 191, 195, 0.18), transparent 31%),
    rgba(237, 247, 251, 0.94);
  box-shadow: 0 0 0 3px rgba(169, 207, 223, 0.2);
}
.feedback-upload-icon {
  border-radius: 50%;
  color: #315f7b;
  background: rgba(169, 207, 223, 0.25);
}
.feedback-upload-field.has-file .feedback-upload-file-name {
  color: #294764;
}
.feedback-form-footer {
  border-top-color: rgba(216, 223, 228, 0.92);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.feedback-form-note svg {
  stroke: #315f7b;
}
@media (max-width: 640px), (max-height: 480px){
.feedback-modal-backdrop {
    place-items: center;
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
  }
.feedback-modal-backdrop > .feedback-form.feedback-modal {
    width: 100%;
    max-width: 720px;
    height: auto;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 17px;
  }
.feedback-form.feedback-modal::before {
    background-size: 48% auto, 55% auto;
    opacity: 0.22;
  }
.feedback-modal-heading {
    padding: 38px 48px 18px;
  }
.feedback-modal-heading h2 {
    font-size: clamp(1.42rem, 7vw, 1.68rem);
  }
.feedback-modal-heading > div > span {
    font-size: 0.68rem;
  }
.feedback-account-product-picker {
    padding: 4px 12px 16px;
  }
.feedback-form-body {
    padding: 0 12px 14px;
  }
.feedback-form-section {
    padding: 14px;
  }
.feedback-form-error {
    margin: 0 12px 12px;
  }
.feedback-form-footer {
    padding:
      12px
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }
}
/* Order workspace — Pastel Watercolor Editorial
   -------------------------------------------------------------------------
   Trang Đặt in bắt đầu thẳng ở công cụ làm việc. Các lớp dưới chỉ đổi cách
   trình bày; cấu trúc chọn dịch vụ, option, ảnh, crop, giá và xác nhận giữ
   nguyên để không tạo một luồng nghiệp vụ song song. */
body[data-page="order"] {
  --order-ink: #294764;
  --order-blue: #6f9aa6;
  --order-blue-soft: #a9cfdf;
  --order-pink: #f2bfc3;
  --order-peach: #f7d7bb;
  --order-cream: #f6e5c5;
  --order-paper: #fffefb;
  overflow-x: clip;
  color: #172b45;
  background:
    radial-gradient(circle at 12% 18%, rgba(169, 207, 223, 0.12), transparent 24rem),
    radial-gradient(circle at 89% 62%, rgba(242, 191, 195, 0.1), transparent 26rem),
    #fffefb;
}
body[data-page="order"] .app {
  width: min(1540px, 100%);
  padding-top: clamp(18px, 2.2vw, 30px);
}
body[data-page="order"] .order-workspace-heading .eyebrow {
  margin: 0;
  color: #4d8fc9;
  font-size: clamp(0.68rem, 0.8vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}
body[data-page="order"] .order-product-back .product-edge-back-arrow {
  width: 22px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
  transform: rotate(-2deg);
}
body[data-page="order"] .order-product-back .product-edge-back-line {
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: rgba(242, 191, 195, 0.9);
  transform: rotate(1.5deg);
}
body[data-page="order"] .order-product-back .product-edge-back-label {
  font-size: clamp(0.61rem, 0.68vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: center;
}
body[data-page="order"] .panel-heading .eyebrow {
  margin: 0;
  color: var(--order-ink);
  font: 600 0.82rem/1.35 "Noto Serif", var(--font-ui);
  letter-spacing: 0.08em;
}
body[data-page="order"] .service-card.is-active {
  border-color: #72bfe2;
  background:
    radial-gradient(circle at 12% 16%, rgba(169, 207, 223, 0.28), transparent 42%),
    linear-gradient(135deg, #ffffff, #f4fafc);
  box-shadow:
    inset 3px 0 0 #72bfe2,
    0 12px 27px rgba(41, 71, 100, 0.11);
}
body[data-page="order"] .service-card.is-active .service-code {
  border-color: rgba(114, 191, 226, 0.62);
  background: linear-gradient(145deg, #fff, #e8f5fb);
  color: #164777;
  box-shadow: 0 7px 17px rgba(71, 159, 194, 0.14);
}
body[data-page="order"] .preview-heading.row {
  gap: 16px;
  margin: 0;
  padding: 2px 2px 4px;
}
body[data-page="order"] .preview-heading-label > .eyebrow {
  color: var(--order-ink);
}
body[data-page="order"] .slot-chip.is-active {
  border-color: rgba(111, 154, 166, 0.78);
  color: #164777;
  background:
    radial-gradient(circle at 7% 16%, rgba(169, 207, 223, 0.48), transparent 42%),
    radial-gradient(circle at 96% 88%, rgba(242, 191, 195, 0.34), transparent 44%),
    rgba(255, 254, 251, 0.98);
  box-shadow:
    0 7px 17px rgba(41, 71, 100, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.74);
}
body[data-page="order"] .slot-chip.is-active .slot-chip-mark {
  border-color: rgba(111, 154, 166, 0.82);
  color: #fff;
  background: linear-gradient(145deg, #7faebf, #5f8fa3);
  box-shadow: 0 4px 10px rgba(41, 71, 100, 0.16);
}
body[data-page="order"] .slot-chip.is-done.is-active .slot-chip-mark {
  color: #fff;
  background: linear-gradient(145deg, #7faebf, #5f8fa3);
}
/* Ở 620px trở xuống, slot-switcher chuyển thành một hàng riêng. Không giữ một
   hàng rỗng cao 40px trong trạng thái hidden vì nó tạo khoảng trắng lớn ngay
   trên vùng edit; khi có nhiều ô ảnh, thanh vẫn xuất hiện theo bố cục mobile. */
@media (max-width: 620px) {
  body[data-page="order"] .slot-switcher[hidden] {
    display: none !important;
  }
}
body[data-page="order"] .crop-confirm-button:focus-visible,
body[data-page="order"] .crop-confirm-button.is-dragging {
  border-color: #72bfe2;
  box-shadow: 0 0 0 4px rgba(167, 204, 223, 0.18), 0 12px 28px rgba(41, 71, 100, 0.13);
}
body[data-page="order"] .quality-card > .modal-close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
}
body[data-page="order"] .quality-card .eyebrow,
body[data-page="order"] .quality-card h2 {
  text-align: center;
}
body[data-page="order"] .option-choice.is-active {
  border-color: #72bfe2;
  background: linear-gradient(145deg, #f5fbfd, #fff8f7);
  box-shadow: 0 0 0 1px #72bfe2, 0 11px 24px rgba(71, 159, 194, 0.12);
}
body[data-page="order"] .product-info-grid,
body[data-page="order"] .product-info-row {
  gap: clamp(10px, 1.4vw, 16px);
}
body[data-page="order"] .product-info-card {
  position: relative;
  isolation: isolate;
  min-height: 138px;
  padding: clamp(16px, 1.8vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(169, 207, 223, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(247, 215, 187, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.88);
  box-shadow:
    0 10px 24px rgba(41, 71, 100, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
body[data-page="order"] .product-info-card::before {
  position: absolute;
  z-index: -1;
  top: 18px;
  left: 0;
  width: 3px;
  height: 46px;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(#a9cfdf, #f2bfc3);
  content: "";
  opacity: 0.9;
}
body[data-page="order"] .product-info-card:nth-child(even) {
  background:
    radial-gradient(circle at 0 100%, rgba(169, 207, 223, 0.13), transparent 42%),
    rgba(255, 255, 255, 0.9);
}
body[data-page="order"] .product-info-card h3 {
  margin-bottom: 8px;
  color: #164777;
  font: 600 clamp(0.98rem, 1.4vw, 1.12rem)/1.35 "Noto Serif", var(--font-ui);
  letter-spacing: -0.01em;
}
body[data-page="order"] .product-info-card p {
  color: #667887;
  font-size: 0.8rem;
  line-height: 1.72;
}
body[data-page="order"] .product-info-images img {
  border: 1px solid rgba(169, 207, 223, 0.52);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 20px rgba(41, 71, 100, 0.08);
}
body[data-page="order"] .library-modal-heading-copy .eyebrow {
  margin: 0 0 2px;
  color: #d06f86;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-page="order"] .library-modal > .library-modal-head > .modal-close {
  position: relative;
  top: auto;
  right: auto;
  justify-self: end;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  color: #6f8290;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body[data-page="order"] .library-modal > .library-modal-head > .modal-close:hover,
body[data-page="order"] .library-modal > .library-modal-head > .modal-close:focus-visible {
  border: 0;
  color: #d84f5c;
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px) rotate(5deg);
}
body[data-page="order"] .library-item.is-active,
body[data-page="order"] .library-suggest-item.is-active {
  border-color: #db7790;
  box-shadow:
    0 10px 22px rgba(164, 78, 104, 0.15),
    0 0 0 3px rgba(242, 176, 190, 0.32);
}
body[data-page="order"] .library-suggest-head .text-button {
  position: relative;
  z-index: 0;
  min-height: 34px;
  padding: 5px 14px;
  border: 0;
  color: #b8526c;
  background: transparent;
  font: 750 0.74rem/1.2 var(--font-ui);
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}
body[data-page="order"] .library-suggest-head .text-button::before {
  position: absolute;
  z-index: -1;
  inset: -5px -9px;
  background: url("assets/ui/toast-icons/toast-brush-warning.png") center / 100% 100% no-repeat;
  content: "";
  opacity: 0.54;
}
body[data-page="order"] .library-suggest-head .text-button:hover,
body[data-page="order"] .library-suggest-head .text-button:focus-visible {
  color: #8f3750;
  outline: none;
  transform: translateY(-1px) rotate(-1deg);
}
@media (max-width: 640px){
body[data-page="order"] .library-modal-heading-copy .eyebrow {
    font-size: 0.56rem;
  }
}
body[data-page="order"] .checkout-identity-card > .modal-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
}
body[data-page="order"] .checkout-identity-card > .eyebrow {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 2px 52px 3px 0;
  color: #5a83aa;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}
body[data-page="order"] .checkout-identity-card > p:not(.eyebrow):not(.checkout-identity-register-prompt) {
  grid-column: 1 / -1;
  max-width: 535px;
  margin: 19px 0 0;
  color: #667887;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.72;
}
@media (max-width: 640px){
body[data-page="order"] .checkout-identity-card > .modal-close {
    top: 13px;
    right: 13px;
  }
body[data-page="order"] .checkout-identity-card > .eyebrow {
    margin-right: 44px;
    font-size: 0.58rem;
  }
body[data-page="order"] .checkout-identity-card > p:not(.eyebrow):not(.checkout-identity-register-prompt) {
    margin-top: 16px;
    font-size: 0.74rem;
  }
}
@media (max-width: 949.98px){
body[data-page="order"] .order-product-back .product-edge-back-arrow {
    width: 19px;
    height: 29px;
    stroke-width: 3;
  }
body[data-page="order"] .order-product-back .product-edge-back-line {
    width: 19px;
  }
body[data-page="order"] .order-product-back .product-edge-back-label {
    font-size: 0.58rem;
  }
}
@media (max-width: 640px){
body[data-page="order"] .app {
    padding: 16px 10px 44px;
  }
body[data-page="order"] .order-workspace-heading .eyebrow {
    font-size: 0.64rem;
  }
body[data-page="order"] .product-info-card {
    min-height: 0;
    padding: 15px;
    border-radius: 15px;
  }
}
/* Fullview ngang trên điện thoại phải được phép co theo chiều cao thật của
   khung nhìn. Các min-height của preview ở bố cục Order thường (460/400px tại
   breakpoint 950px) không được đi theo workspace vào modal, nếu không mép dưới
   của sản phẩm vượt khỏi màn hình và bị host cắt. */
@media (orientation: landscape) and (max-height: 500px) {
  body[data-page="order"] .crop-design-modal-host .preview-board,
  body[data-page="order"] .crop-design-modal-host .product-shell {
    height: 100%;
    min-height: 0;
  }
}
.checkout-page .checkout-app {
  position: relative;
  isolation: isolate;
  width: min(1480px, calc(100% - 40px));
  padding: 28px 0 76px;
}
.checkout-page .checkout-app::before,
.checkout-page .checkout-app::after {
  position: absolute;
  z-index: -1;
  width: clamp(210px, 24vw, 390px);
  aspect-ratio: 1;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.22;
  pointer-events: none;
}
.checkout-page .checkout-app::before {
  top: 90px;
  left: min(-12vw, -110px);
  background-image: url("assets/catalog/page-loader-watercolor-top-left.webp");
}
.checkout-page .checkout-app::after {
  right: min(-11vw, -100px);
  bottom: 30px;
  background-image: url("assets/catalog/page-loader-watercolor-bottom-right.webp");
}
.checkout-page .checkout-page-heading .eyebrow {
  margin: 0;
  color: #4b83bd;
}
.checkout-page .checkout-panel-heading-row .eyebrow {
  color: #4b83bd;
  letter-spacing: 0.12em;
}
.checkout-page .checkout-form-grid input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.checkout-page .checkout-form-grid textarea,
.checkout-page .checkout-form-grid select,
.checkout-page .account-address-field input,
.checkout-page .account-address-field select {
  border-color: rgba(137, 177, 211, 0.52);
  color: #213d5b;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.checkout-page .checkout-form-grid input:focus,
.checkout-page .checkout-form-grid textarea:focus,
.checkout-page .checkout-form-grid select:focus,
.checkout-page .account-address-field input:focus,
.checkout-page .account-address-field select:focus {
  border-color: #6ca8d1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 168, 209, 0.14);
}
.checkout-page .checkout-order-summary-heading .eyebrow {
  margin: 0;
  color: #d56c91;
}
@media (max-width: 720px){
.checkout-page .checkout-app {
    width: min(100% - 20px, 1480px);
    padding-top: 14px;
  }
}
body[data-page="checkout"] .checkout-payment-resolution-copy .eyebrow {
  margin: 0 0 5px;
  color: #6d8ba3;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
body[data-page="checkout"] .checkout-payment-resolution[data-state="unresolved"] .checkout-payment-resolution-copy .eyebrow,
body[data-page="checkout"] .checkout-payment-resolution[data-state="unresolved"] .checkout-payment-resolution-copy h2 {
  color: #a34455;
}
@keyframes checkout-resolution-brush {
  0%, 100% { opacity: 0.36; transform: translateY(0) scaleX(0.82); }
  48% { opacity: 1; transform: translateY(-2px) scaleX(1.12); }
}
body[data-page="checkout"] .checkout-page-heading .eyebrow {
  margin: 0;
  color: #4d8fc9;
  font-size: clamp(0.68rem, 0.8vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}
body[data-page="checkout"] .checkout-order-back .product-edge-back-arrow {
  width: 22px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
  transform: rotate(-2deg);
}
body[data-page="checkout"] .checkout-order-back .product-edge-back-line {
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: rgba(242, 191, 195, 0.9);
  transform: rotate(1.5deg);
}
body[data-page="checkout"] .checkout-order-back .product-edge-back-label {
  font-size: clamp(0.61rem, 0.68vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 949.98px){
body[data-page="checkout"] .checkout-order-back .product-edge-back-arrow { width: 18px; height: 28px; }
body[data-page="checkout"] .checkout-order-back .product-edge-back-line { width: 20px; }
}
@media (max-width: 640px){
body[data-page="checkout"] .checkout-order-back .product-edge-back-label { font-size: 0.58rem; }
}
/* ==========================================================================
   Public information and customer-care pages — Pastel Watercolor Editorial

   The four public help pages share one visual language: a warm paper surface,
   loose watercolor marks that escape individual cards, illustrated notice
   icons, and flat painted actions inspired by the print quality warning.
   Decorative layers never receive pointer events and remain below real copy.
   ========================================================================== */

:is(body[data-page="community"], body[data-page="refund"], body[data-page="support"], body[data-page="bug"]) {
  background:
    radial-gradient(circle at 4% 12%, rgba(169, 207, 223, 0.2), transparent 24rem),
    radial-gradient(circle at 96% 32%, rgba(242, 191, 195, 0.16), transparent 26rem),
    linear-gradient(180deg, #fffefb 0%, #fbfdff 46%, #fffaf7 100%);
  color: #294764;
  font-family: var(--font-ui);
}
:is(.community-policy-page, .care-page) {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.painted-page-atmosphere {
  position: absolute;
  z-index: -1;
  inset: -36px calc((100vw - 100%) / -2) -100px;
  overflow: hidden;
  pointer-events: none;
}
.painted-page-atmosphere > i {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.painted-page-splash--top {
  top: 2%;
  left: -92px;
  width: clamp(250px, 31vw, 530px);
  aspect-ratio: 568 / 722;
  background-image: url("assets/catalog/page-loader-watercolor-top-left.webp");
  opacity: 0.18;
  transform: rotate(-12deg);
}
.painted-page-splash--bottom {
  right: -110px;
  bottom: 2%;
  width: clamp(320px, 39vw, 680px);
  aspect-ratio: 706 / 547;
  background-image: url("assets/catalog/page-loader-watercolor-bottom-right.webp");
  opacity: 0.2;
  transform: rotate(7deg);
}
.painted-page-stroke {
  width: clamp(260px, 34vw, 590px);
  aspect-ratio: 594 / 310;
  background-image: url("assets/ui/toast-icons/toast-brush-info.png");
  opacity: 0.28;
}
.painted-page-stroke--one {
  top: 29%;
  right: -7%;
  transform: rotate(-11deg) scaleX(1.16);
}
.painted-page-stroke--two {
  bottom: 28%;
  left: -8%;
  background-image: url("assets/ui/toast-icons/toast-brush-warning.png");
  opacity: 0.2;
  transform: rotate(16deg) scaleX(0.88);
}
.painted-page-drops {
  top: 49%;
  left: 5%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(111, 154, 166, 0.34);
  box-shadow:
    28px 17px 0 -3px rgba(242, 191, 195, 0.42),
    51px -6px 0 1px rgba(247, 215, 187, 0.38),
    calc(78vw - 70px) 230px 0 3px rgba(169, 207, 223, 0.32),
    calc(84vw - 70px) 274px 0 -2px rgba(242, 191, 195, 0.44),
    calc(72vw - 70px) 321px 0 1px rgba(246, 229, 197, 0.52);
  transform: rotate(-9deg);
}
body[data-page="refund"] .painted-page-stroke--one,
body[data-page="bug"] .painted-page-stroke--one {
  background-image: url("assets/ui/toast-icons/toast-brush-warning.png");
  opacity: 0.25;
}
body[data-page="refund"] .painted-page-stroke--two,
body[data-page="bug"] .painted-page-stroke--two {
  background-image: url("assets/ui/toast-icons/toast-brush-info.png");
}
.painted-hero-emblem {
  position: absolute;
  z-index: 4;
  top: -34px;
  right: clamp(22px, 4vw, 62px);
  display: grid;
  place-items: center;
  width: clamp(72px, 8vw, 102px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: rotate(5deg);
}
.painted-hero-emblem::before {
  position: absolute;
  z-index: -1;
  width: 178%;
  aspect-ratio: 594 / 310;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / contain no-repeat;
  content: "";
  opacity: 0.62;
  transform: rotate(-13deg);
}
.painted-hero-emblem--warning::before {
  background-image: url("assets/ui/toast-icons/toast-brush-warning.png");
}
.painted-hero-emblem img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 9px 13px rgba(41, 71, 100, 0.12));
}
/* Policy and community pages. */
.community-policy-page {
  --community-ink: #172b45;
  --community-muted: #687684;
  --community-line: rgba(169, 207, 223, 0.62);
  width: min(1220px, calc(100% - clamp(28px, 6vw, 82px)));
  padding-top: clamp(48px, 6vw, 78px);
}
.community-policy-hero {
  overflow: visible;
  min-height: min(620px, calc(100vh - 150px));
  border-color: rgba(169, 207, 223, 0.68);
  border-radius: 30px 22px 34px 25px;
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") -58px -86px / 260px auto no-repeat,
    url("assets/catalog/page-loader-watercolor-bottom-right.webp") calc(100% + 76px) calc(100% + 62px) / 360px auto no-repeat,
    rgba(255, 254, 251, 0.94);
  box-shadow: 0 18px 46px rgba(41, 71, 100, 0.1);
}
.community-policy-hero::before {
  top: auto;
  right: auto;
  bottom: 18%;
  left: -48px;
  width: 250px;
  height: 130px;
  border: 0;
  border-radius: 0;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / contain no-repeat;
  opacity: 0.34;
  transform: rotate(-8deg);
}
.community-policy-hero::after {
  right: 10%;
  bottom: -36px;
  left: auto;
  width: 210px;
  height: 112px;
  border-radius: 0;
  background: url("assets/ui/toast-icons/toast-brush-warning.png") center / contain no-repeat;
  opacity: 0.23;
  transform: rotate(8deg);
}
.community-policy-kicker,
.community-policy-section-index,
.community-policy-section-heading div > p:first-child,
.community-policy-checklist > div > p,
.community-policy-support p {
  color: #6f9aa6;
}
.community-policy-hero h1,
.community-policy-intro h2,
.community-policy-section-heading h2,
.community-policy-decision h2,
.community-policy-checklist h2,
.community-policy-support h2 {
  color: #173f65;
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 700;
}
.community-policy-hero h1 {
  max-width: 760px;
  letter-spacing: -0.045em;
}
.community-policy-hero h1 em {
  position: relative;
  color: #bf6175;
}
.community-policy-hero h1 em::after {
  position: absolute;
  z-index: -1;
  right: -12px;
  bottom: -12px;
  left: -18px;
  height: 29px;
  background: url("assets/ui/toast-icons/toast-brush-warning.png") center / 100% 100% no-repeat;
  content: "";
  opacity: 0.34;
  transform: rotate(-1deg);
}
.community-policy-lead,
.community-policy-intro div > p,
.community-policy-section-heading p,
.community-policy-rule-card p,
.community-policy-review-grid p,
.community-policy-checklist li {
  color: #687684;
}
.community-policy-hero-actions a,
.community-policy-support > a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 16px 13px 18px 12px;
  color: #294764;
  background-color: rgba(223, 239, 247, 0.88);
  box-shadow: none;
}
.community-policy-hero-actions a::before,
.community-policy-support > a::before {
  position: absolute;
  z-index: -1;
  inset: -20px -14px;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / 110% 150% no-repeat;
  content: "";
  opacity: 0.48;
  transition: transform 180ms ease, opacity 180ms ease;
}
.community-policy-hero-actions a:first-child {
  color: #294764;
  background-color: rgba(205, 230, 243, 0.94);
  box-shadow: none;
  transform: rotate(-0.35deg);
}
.community-policy-hero-actions a:nth-child(2)::before,
.community-policy-support > a::before {
  background-image: url("assets/ui/toast-icons/toast-brush-warning.png");
  opacity: 0.4;
}
.community-policy-hero-actions a:hover,
.community-policy-hero-actions a:focus-visible,
.community-policy-support > a:hover,
.community-policy-support > a:focus-visible {
  color: #173f65;
  background-color: rgba(255, 247, 243, 0.96);
  box-shadow: none;
  outline: 2px solid rgba(111, 154, 166, 0.34);
  outline-offset: 3px;
  transform: translateY(-1px) rotate(0.2deg);
}
.community-policy-hero-actions a:hover::before,
.community-policy-hero-actions a:focus-visible::before,
.community-policy-support > a:hover::before,
.community-policy-support > a:focus-visible::before {
  opacity: 0.62;
  transform: translateX(3%) rotate(-1deg);
}
.community-policy-summary,
.community-policy-toc,
.community-policy-section,
.community-policy-checklist {
  border-color: rgba(169, 207, 223, 0.58);
  background-color: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 38px rgba(41, 71, 100, 0.07);
  backdrop-filter: blur(7px);
}
.community-policy-summary {
  overflow: hidden;
  border-radius: 24px 19px 27px 20px;
  background:
    url("assets/ui/toast-icons/toast-brush-info.png") calc(100% + 40px) -18px / 190px auto no-repeat,
    rgba(255, 255, 255, 0.88);
}
.community-policy-summary > p,
.community-policy-toc p {
  color: #6f9aa6;
}
.community-policy-summary li {
  border: 1px solid rgba(169, 207, 223, 0.44);
  border-radius: 17px 13px 18px 14px;
  background: rgba(239, 248, 252, 0.78);
}
.community-policy-summary li:nth-child(2) {
  border-color: rgba(242, 191, 195, 0.44);
  background: rgba(255, 244, 244, 0.74);
}
.community-policy-summary li > span,
.community-policy-summary li:nth-child(2) > span {
  border: 1px solid rgba(111, 154, 166, 0.3);
  border-radius: 50%;
  color: #294764;
  background: rgba(213, 236, 247, 0.88);
}
.community-policy-summary li:nth-child(2) > span {
  border-color: rgba(191, 97, 117, 0.24);
  background: rgba(251, 224, 226, 0.86);
}
.community-policy-summary strong,
.community-policy-rule-card h3,
.community-policy-review-grid h3 {
  color: #294764;
}
.community-policy-summary-note {
  border: 0;
  border-radius: 14px 11px 16px 12px;
  background:
    url("assets/ui/toast-icons/toast-brush-warning.png") center / 120% 190% no-repeat,
    rgba(255, 250, 243, 0.8);
}
.community-policy-toc {
  border-radius: 18px 14px 20px 15px;
}
.community-policy-toc a {
  border-radius: 11px 8px 12px 9px;
  color: #587087;
}
.community-policy-toc a span {
  color: #bf6175;
}
.community-policy-toc a:hover,
.community-policy-toc a:focus-visible {
  color: #173f65;
  background: rgba(217, 237, 247, 0.66);
}
.community-policy-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 27px 20px 30px 23px;
  background:
    url("assets/catalog/page-loader-watercolor-bottom-right.webp") calc(100% + 100px) calc(100% + 92px) / 300px auto no-repeat,
    rgba(255, 255, 255, 0.9);
}
.community-policy-section:nth-child(even) {
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") -92px -110px / 250px auto no-repeat,
    rgba(255, 255, 255, 0.9);
}
.community-policy-section-heading > span {
  border: 0;
  border-radius: 50%;
  color: #294764;
  background:
    url("assets/ui/toast-icons/toast-info-watercolor.png") center / contain no-repeat,
    transparent;
  box-shadow: none;
}
.community-policy-rule-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--rule-color, #a9cfdf) 22%, transparent);
  border-radius: 19px 14px 21px 16px;
  background: rgba(255, 255, 255, 0.74) !important;
}
.community-policy-rule-card::after {
  top: auto;
  right: -30px;
  bottom: -34px;
  width: 150px;
  height: 82px;
  border: 0;
  border-radius: 0;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / contain no-repeat;
  opacity: 0.34;
  filter: sepia(0.1);
  transform: rotate(-10deg);
}
.community-policy-rule-card:nth-child(even)::after {
  background-image: url("assets/ui/toast-icons/toast-brush-warning.png");
  transform: rotate(9deg);
}
.community-policy-rule-card > span {
  color: var(--rule-color, #6f9aa6);
  background: transparent;
}
.community-policy-decision {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(242, 191, 195, 0.56);
  border-radius: 26px 19px 29px 21px;
  color: #294764;
  background:
    url("assets/ui/toast-icons/toast-brush-warning.png") calc(100% + 36px) center / 310px auto no-repeat,
    rgba(255, 248, 247, 0.94);
  box-shadow: 0 16px 40px rgba(41, 71, 100, 0.07);
}
body[data-page="community"] .community-policy-decision,
body[data-page="refund"] .community-policy-decision {
  border-color: rgba(201, 75, 75, 0.48);
  background:
    url("assets/ui/toast-icons/toast-brush-error.png") calc(100% + 34px) center / 320px auto no-repeat,
    rgba(255, 239, 239, 0.96);
  box-shadow: 0 16px 40px rgba(154, 55, 65, 0.12);
}
.community-policy-decision-mark {
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  color: transparent;
  background: url("assets/ui/toast-icons/toast-warning-watercolor.png") center / contain no-repeat;
}
body[data-page="community"] .community-policy-decision-mark,
body[data-page="refund"] .community-policy-decision-mark {
  background-image: url("assets/ui/toast-icons/toast-error-watercolor.png");
}
body[data-page="community"] .community-policy-decision > div > p:first-child,
body[data-page="refund"] .community-policy-decision > div > p:first-child {
  color: #c94b4b;
}
.community-policy-decision > div > p:first-child {
  color: #bf6175;
}
.community-policy-decision h2 {
  color: #173f65;
}
.community-policy-decision h2 + p,
.community-policy-decision p + p {
  color: #687684;
}
.community-policy-review-grid article {
  border-color: rgba(169, 207, 223, 0.52);
  border-radius: 18px 13px 20px 15px;
  background:
    url("assets/ui/toast-icons/toast-brush-info.png") 110% 125% / 150px auto no-repeat,
    rgba(247, 252, 255, 0.8) !important;
}
.community-policy-review-grid article:nth-child(2) {
  background-image: url("assets/ui/toast-icons/toast-brush-warning.png") !important;
  background-color: rgba(255, 250, 245, 0.82) !important;
}
.community-policy-review-grid span {
  color: #6f9aa6;
}
.community-policy-checklist {
  border-radius: 26px 19px 29px 21px;
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") -82px calc(100% + 74px) / 240px auto no-repeat,
    rgba(252, 251, 255, 0.9);
}
.community-policy-checklist li {
  border-color: rgba(169, 207, 223, 0.42);
  border-radius: 13px 10px 15px 11px;
}
.community-policy-checklist li span {
  border-radius: 50%;
  color: #294764;
  background: rgba(220, 238, 247, 0.94);
}
.community-policy-support {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(169, 207, 223, 0.64);
  border-radius: 28px 20px 31px 22px;
  color: #294764;
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") -72px -120px / 290px auto no-repeat,
    url("assets/catalog/page-loader-watercolor-bottom-right.webp") calc(100% + 74px) calc(100% + 86px) / 330px auto no-repeat,
    rgba(255, 254, 251, 0.94);
  box-shadow: 0 18px 46px rgba(41, 71, 100, 0.09);
}
.community-policy-support p {
  color: #bf6175;
}
.community-policy-support h2 {
  color: #173f65;
}
.community-policy-support h2 + span {
  color: #687684;
}
.community-policy-support > a {
  color: #294764;
  background-color: rgba(253, 230, 230, 0.86);
}
/* Support and bug-report pages. */
.care-page {
  width: min(1220px, calc(100% - clamp(28px, 6vw, 82px)));
  padding-top: clamp(48px, 6vw, 76px);
}
.care-hero > *:not(.painted-hero-emblem) {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px){
.painted-hero-emblem {
    right: 24px;
    width: 76px;
  }
.community-policy-hero,
  .care-hero {
    min-height: 0;
  }
}
@media (max-width: 640px){
.community-policy-page,
  .care-page {
    width: min(100% - 20px, 600px);
    padding-top: 38px;
  }
.painted-page-atmosphere {
    inset-inline: -10px;
  }
.painted-page-stroke--one {
    right: -38%;
  }
.painted-page-stroke--two {
    left: -40%;
  }
.painted-hero-emblem {
    top: -28px;
    right: 16px;
    width: 64px;
  }
.community-policy-hero,
  .care-hero {
    padding: 30px 20px 24px;
    border-radius: 24px 17px 26px 19px;
  }
.community-policy-hero-copy,
  .care-hero-copy {
    padding-top: 18px;
  }
.community-policy-summary,
  .care-form-panel,
  .bug-privacy-note {
    border-radius: 21px 15px 23px 17px;
  }
.community-policy-decision-mark {
    width: 48px;
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce){
.care-hero-steps span,
  .care-submit-button,
  .care-submit-button::before,
  .community-policy-hero-actions a,
  .community-policy-hero-actions a::before,
  .community-policy-support > a,
  .community-policy-support > a::before {
    transition: none;
  }
}
/* --------------------------------------------------------------------------
   About — reference-led watercolor editorial page
   -------------------------------------------------------------------------- */
body[data-page="about"] {
  --about-paper: #fffefa;
  --about-paper-warm: #fffaf5;
  --about-navy: #153d66;
  --about-copy: #526b82;
  --about-blue: #69a9d6;
  --about-pink: #ef9da9;
  --about-peach: #f3c7a7;
  --about-mint: #9cc9c2;
  background: var(--about-paper);
  color: var(--about-navy);
}
body[data-page="about"] .about-reference {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: clip;
  background:
    linear-gradient(rgba(255, 254, 250, 0.96), rgba(255, 254, 250, 0.96)),
    repeating-linear-gradient(0deg, rgba(21, 61, 102, 0.015) 0 1px, transparent 1px 4px);
}
.about-reference-shell {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
}
.about-reference h1,
.about-reference h2 {
  color: var(--about-navy);
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.about-reference h1,
.about-reference h2,
.about-reference p,
.about-reference figure,
.about-reference ul,
.about-reference ol {
  margin-top: 0;
}
.about-reference-hero,
.about-reference-story,
.about-reference-workshop,
.about-reference-process,
.about-reference-belief,
.about-reference-final {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-bottom: 1px solid rgba(117, 147, 171, 0.18);
}
.about-decor {
  position: absolute;
  z-index: 0;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.about-decor-wash {
  width: 640px;
  opacity: 0.32;
  mix-blend-mode: multiply;
}
.about-decor-sprig {
  width: 260px;
  opacity: 0.64;
}
.about-paint-mark {
  position: absolute;
  z-index: 0;
  display: block;
  background-image: url("assets/about/about-watercolor-washes.png");
  background-repeat: no-repeat;
  background-size: 620px auto;
  opacity: 0.56;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}
.about-paint-mark.is-rose-cloud {
  width: 260px;
  height: 200px;
  background-position: left top;
}
.about-paint-mark.is-blue-stroke {
  width: 320px;
  height: 150px;
  background-position: right top;
}
.about-paint-mark.is-peach-stroke {
  width: 300px;
  height: 145px;
  background-position: center center;
}
.about-paint-mark.is-pink-cloud {
  width: 220px;
  height: 180px;
  background-position: right 40%;
}
.about-paint-mark.is-blue-cloud {
  width: 250px;
  height: 190px;
  background-position: left bottom;
}
.about-paint-mark.is-cream-stroke {
  width: 320px;
  height: 150px;
  background-position: right bottom;
}
.about-reference-hero {
  min-height: 670px;
  background:
    radial-gradient(circle at 17% 48%, rgba(245, 183, 190, 0.1), transparent 23%),
    radial-gradient(circle at 91% 20%, rgba(166, 208, 229, 0.14), transparent 24%),
    var(--about-paper);
}
.about-reference-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(520px, 1.04fr);
  gap: clamp(34px, 3.5vw, 56px);
  align-items: center;
  min-height: 670px;
  padding-block: 54px 48px;
}
.about-reference-hero-copy {
  position: relative;
  z-index: 3;
}
.about-reference-hand,
.about-reference-note {
  margin: 0;
  color: #db7d89;
  font-family: "Oooh Baby", "Klee One", cursive;
}
.about-reference-hand {
  margin-bottom: 8px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  transform: rotate(-4deg);
  transform-origin: left center;
}
.about-reference-hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(3rem, 3.3vw, 3.55rem);
  line-height: 0.99;
}
.about-reference-lead {
  max-width: 610px;
  margin: 22px 0 0;
  color: var(--about-copy);
  font-size: 0.92rem;
  line-height: 1.78;
}
.about-reference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.about-reference .about-button {
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.about-reference-primary {
  border-color: var(--about-navy);
  color: #fff;
  background: var(--about-navy);
  box-shadow: 0 10px 24px rgba(21, 61, 102, 0.16);
}
.about-reference-primary:hover,
.about-reference-primary:focus-visible {
  border-color: #285c88;
  color: #fff;
  background: #285c88;
}
.about-reference-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 610px;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(117, 147, 171, 0.2);
  list-style: none;
}
.about-reference-values li,
.about-reference-belief-values li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: #587086;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.45;
}
.about-reference-values svg,
.about-reference-belief-values svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #e88c99;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}
.about-reference-values li:nth-child(2) svg,
.about-reference-belief-values li:nth-child(2) svg {
  stroke: #67aeb2;
}
.about-reference-values li:nth-child(3) svg,
.about-reference-belief-values li:nth-child(3) svg {
  stroke: #d98c99;
}
.about-reference-hero-visual {
  position: relative;
  min-height: 555px;
}
.about-reference-photo {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 8px solid rgba(255, 255, 255, 0.96);
  background: #eef4f5;
  box-shadow: 0 20px 45px rgba(36, 67, 86, 0.16);
}
.about-reference-photo > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-reference-photo-main {
  top: 8px;
  right: 7%;
  width: 62%;
  height: 86%;
  border-radius: 18px 18px 18px 44px;
  transform: rotate(1.8deg);
}
.about-reference-photo-main > img:first-child {
  object-position: 50% 42%;
}
.about-reference-photo-inset {
  bottom: 7px;
  left: 3%;
  z-index: 3;
  width: 45%;
  aspect-ratio: 1.35;
  border-radius: 18px;
  transform: rotate(-2.4deg);
}
.about-reference-note {
  position: absolute;
  z-index: 4;
  color: #4c76a1;
  font-size: 1.45rem;
  line-height: 0.92;
  text-align: center;
  transform: rotate(-6deg);
}
.about-reference-note-top {
  top: 5%;
  right: -1%;
}
.about-reference-note-bottom {
  right: 0;
  bottom: 2%;
}
.about-decor-hero-wash {
  top: -220px;
  right: -170px;
  transform: rotate(-12deg);
}
.about-decor-hero-sprig {
  bottom: -65px;
  left: -74px;
  transform: rotate(15deg);
}
.about-paint-hero-left {
  top: 84px;
  left: -74px;
  transform: rotate(-12deg) scale(0.84);
}
.about-paint-hero-top {
  top: 18px;
  right: 25%;
  transform: rotate(-8deg) scale(0.78);
}
.about-paint-hero-bottom {
  right: 4%;
  bottom: -18px;
  transform: rotate(11deg) scale(0.9);
}
.about-reference-story {
  min-height: 320px;
  padding: 68px 0 58px;
}
.about-reference-story-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(54px, 9vw, 130px);
  align-items: center;
}
.about-reference-eyebrow {
  margin: 0 0 11px;
  color: #607992;
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.about-reference-story h2,
.about-reference-workshop h2,
.about-reference-process h2,
.about-reference-belief h2,
.about-reference-final h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.85rem);
  line-height: 1.09;
}
.about-reference-brush-line {
  display: block;
  width: 68%;
  height: 10px;
  margin-top: 17px;
  background: linear-gradient(90deg, rgba(239, 146, 151, 0.78), rgba(247, 199, 184, 0.4), transparent);
  clip-path: polygon(0 42%, 7% 20%, 21% 28%, 38% 8%, 58% 26%, 76% 18%, 100% 44%, 86% 67%, 59% 61%, 37% 81%, 19% 64%, 0 77%);
}
.about-reference-story-copy {
  display: grid;
  gap: 15px;
  max-width: 660px;
  color: var(--about-copy);
  font-size: 0.83rem;
  line-height: 1.8;
}
.about-reference-story-copy p {
  margin-bottom: 0;
}
.about-reference-story-lead {
  color: var(--about-navy);
  font-family: "Noto Serif", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.65;
}
.about-reference-story-note {
  right: -26px;
  top: 8px;
}
.about-decor-story-wash {
  left: -280px;
  bottom: -270px;
  transform: rotate(16deg);
}
.about-decor-story-sprig {
  right: -64px;
  bottom: -88px;
  width: 210px;
  transform: rotate(-18deg) scaleX(-1);
}
.about-paint-story-left {
  top: 18px;
  left: -96px;
  transform: rotate(13deg) scale(0.76);
}
.about-paint-story-right {
  right: 13%;
  bottom: -56px;
  transform: rotate(-9deg) scale(0.72);
}
.about-reference-workshop {
  padding: 62px 0 70px;
}
.about-reference-workshop-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.67fr) minmax(0, 1.33fr);
  gap: clamp(38px, 7vw, 90px);
  align-items: start;
}
.about-reference-workshop-copy {
  position: relative;
  padding-top: 26px;
}
.about-reference-workshop-copy > p:not(.about-reference-eyebrow):not(.about-reference-note) {
  margin: 19px 0 0;
  color: var(--about-copy);
  font-size: 0.8rem;
  line-height: 1.8;
}
.about-reference-workshop-copy > .about-button {
  margin-top: 22px;
}
.about-reference-workshop-note {
  right: 7%;
  bottom: -112px;
  transform: rotate(-8deg);
}
.about-reference-workshop-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.about-reference-workshop-gallery figure {
  position: relative;
  margin: 0;
}
.about-reference-workshop-gallery figure > img:first-child {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 4px;
}
.about-reference-workshop-gallery .about-reference-workshop-wide {
  grid-column: 1 / -1;
}
.about-reference-workshop-gallery .about-reference-workshop-wide > img:first-child {
  height: 310px;
  object-position: center 46%;
}
.about-reference-workshop-gallery figcaption {
  display: grid;
  gap: 2px;
  padding-top: 8px;
  color: var(--about-copy);
  font-size: 0.65rem;
  line-height: 1.45;
}
.about-reference-workshop-gallery figcaption strong {
  color: var(--about-navy);
  font-family: "Noto Serif", Georgia, serif;
  font-size: 0.86rem;
}
.about-decor-workshop-sprig {
  bottom: -80px;
  left: -80px;
  width: 270px;
  transform: rotate(8deg);
}
.about-paint-workshop-left {
  top: 34%;
  left: -86px;
  transform: rotate(-16deg) scale(0.78);
}
.about-paint-workshop-top {
  top: -42px;
  left: 39%;
  transform: rotate(7deg) scale(0.68);
}
.about-paint-workshop-right {
  right: -54px;
  bottom: 18%;
  transform: rotate(12deg) scale(0.82);
}
.about-reference-process {
  padding: 54px 0 58px;
}
.about-paint-process-left {
  top: -34px;
  left: -88px;
  transform: rotate(10deg) scale(0.68);
}
.about-paint-process-right {
  right: -72px;
  bottom: -35px;
  transform: rotate(-9deg) scale(0.8);
}
.about-reference-process-grid {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
.about-reference-process-heading > p:last-child {
  margin: 13px 0 0;
  color: var(--about-copy);
  font-size: 0.72rem;
  line-height: 1.65;
}
.about-reference-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-reference-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}
.about-reference-steps li:not(:last-child)::after {
  position: absolute;
  top: 41px;
  right: -13px;
  color: #8ca6bb;
  content: "→";
  font-size: 0.85rem;
}
.about-reference-step-icon {
  --step-brush-rgb: 151, 203, 231;
  position: relative;
  isolation: isolate;
  display: grid;
  width: 82px;
  height: 82px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 0;
  background: none;
}
.about-reference-step-icon::before,
.about-reference-step-icon::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}
.about-reference-step-icon::before {
  inset: -5px;
  background: rgba(var(--step-brush-rgb), 0.54);
  -webkit-mask: url("assets/about/about-round-brush-mark.png") center / 100% 100% no-repeat;
  mask: url("assets/about/about-round-brush-mark.png") center / 100% 100% no-repeat;
  transform: rotate(-7deg);
}
.about-reference-step-icon::after {
  inset: 0;
  background: rgba(var(--step-brush-rgb), 0.16);
  -webkit-mask: url("assets/about/about-round-brush-mark.png") center / 84% 84% no-repeat;
  mask: url("assets/about/about-round-brush-mark.png") center / 84% 84% no-repeat;
  transform: rotate(13deg) scale(0.94);
}
.about-reference-step-icon.is-pink { --step-brush-rgb: 242, 181, 189; }
.about-reference-step-icon.is-peach { --step-brush-rgb: 239, 199, 137; }
.about-reference-step-icon.is-mint { --step-brush-rgb: 157, 202, 194; }
.about-reference-step-icon.is-violet { --step-brush-rgb: 205, 181, 228; }
.about-reference-steps li:nth-child(2) .about-reference-step-icon::before {
  transform: rotate(5deg) scale(0.98);
}
.about-reference-steps li:nth-child(3) .about-reference-step-icon::before {
  transform: rotate(-3deg) scale(1.02, 0.96);
}
.about-reference-steps li:nth-child(4) .about-reference-step-icon::before {
  transform: rotate(8deg) scale(0.96, 1.01);
}
.about-reference-steps li:nth-child(5) .about-reference-step-icon::before {
  transform: rotate(-5deg) scale(1.01, 0.97);
}
.about-reference-step-icon svg {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  fill: none;
  stroke: var(--about-navy);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}
.about-reference-steps strong {
  color: var(--about-navy);
  font-family: "Noto Serif", Georgia, serif;
  font-size: 0.83rem;
}
.about-reference-steps p {
  margin: 7px 0 0;
  color: var(--about-copy);
  font-size: 0.65rem;
  line-height: 1.55;
}
.about-reference-belief {
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
  min-height: 430px;
  background: rgba(255, 251, 247, 0.72);
}
.about-reference-belief-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 890px;
  min-height: 430px;
}
.about-reference-belief-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
}
.about-reference-belief-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 680px;
  padding: 54px clamp(38px, 6vw, 94px);
}
.about-reference-belief-copy > p:not(.about-reference-eyebrow):not(.about-reference-note) {
  margin: 18px 0 0;
  color: var(--about-copy);
  font-size: 0.8rem;
  line-height: 1.75;
}
.about-reference-belief-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}
.about-reference-belief-values li {
  grid-template-columns: 28px minmax(0, 1fr);
  color: var(--about-navy);
}
.about-reference-belief-values small {
  display: block;
  color: var(--about-copy);
  font-size: 0.61rem;
  font-weight: 500;
}
.about-reference-belief-note {
  top: 24px;
  right: 28px;
  color: #d48892;
}
.about-decor-belief-wash {
  right: -260px;
  bottom: -300px;
  transform: rotate(15deg);
}
.about-paint-belief-left {
  left: 43%;
  bottom: -54px;
  transform: rotate(-14deg) scale(0.74);
}
.about-paint-belief-right {
  top: -32px;
  right: 4%;
  transform: rotate(13deg) scale(0.82);
}
.about-reference-final {
  padding: 48px 0 52px;
  text-align: center;
}
.about-reference-final h2 {
  font-size: clamp(1.9rem, 3vw, 3rem);
}
.about-reference-final .about-reference-shell > p:not(.about-reference-eyebrow) {
  margin: 13px 0 0;
  color: var(--about-copy);
  font-size: 0.76rem;
  line-height: 1.65;
}
.about-reference-final .about-reference-actions {
  justify-content: center;
  margin-top: 20px;
}
.about-decor-final-sprig {
  bottom: -100px;
  left: -58px;
  width: 230px;
}
.about-decor-final-wash {
  top: -250px;
  right: -260px;
  transform: rotate(-18deg);
}
.about-paint-final-left {
  left: 4%;
  bottom: -45px;
  transform: rotate(-8deg) scale(0.82);
}
.about-paint-final-right {
  top: -58px;
  right: 2%;
  transform: rotate(15deg) scale(0.72);
}
.about-paint-final-center {
  left: 54%;
  bottom: -76px;
  transform: rotate(-18deg) scale(0.56);
}
@media (max-width: 1100px){
.about-reference-hero-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(450px, 1.02fr);
    gap: 28px;
  }
.about-reference-photo-main {
    right: 3%;
    width: 66%;
  }
.about-reference-note-top,
  .about-reference-note-bottom,
  .about-reference-story-note,
  .about-reference-workshop-note,
  .about-reference-belief-note {
    display: none;
  }
.about-reference-process-grid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
  }
.about-reference-step-icon {
    width: 70px;
    height: 70px;
  }
.about-reference-steps li:not(:last-child)::after {
    top: 35px;
  }
}
@media (max-width: 900px){
.about-reference-shell {
    width: min(100% - 40px, 760px);
  }
.about-reference-hero-grid,
  .about-reference-story-grid,
  .about-reference-workshop-grid,
  .about-reference-process-grid {
    grid-template-columns: 1fr;
  }
.about-reference-hero-grid {
    gap: 34px;
    padding-block: 46px 54px;
  }
.about-reference-hero h1 {
    font-size: clamp(3.4rem, 9vw, 5rem);
  }
.about-reference-hero-visual {
    width: min(100%, 650px);
    min-height: 580px;
    margin: 0 auto;
  }
.about-reference-story-grid {
    gap: 34px;
  }
.about-reference-story-copy {
    max-width: none;
  }
.about-reference-workshop-copy {
    max-width: 600px;
    padding-top: 0;
  }
.about-reference-workshop-gallery .about-reference-workshop-wide > img:first-child {
    height: 360px;
  }
.about-reference-process-grid {
    gap: 30px;
  }
.about-reference-process-heading {
    max-width: 560px;
  }
.about-reference-belief {
    grid-template-columns: 1fr;
  }
.about-reference-belief-photo {
    min-height: 390px;
  }
.about-reference-belief-copy {
    max-width: 760px;
    margin: 0 auto;
  }
}
@media (max-width: 700px){
.about-reference-values,
  .about-reference-belief-values {
    grid-template-columns: 1fr;
  }
.about-reference-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }
.about-reference-steps li:not(:last-child)::after {
    display: none;
  }
.about-reference-steps li:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px){
body[data-page="about"] .about-reference,
  body[data-page="about"] .about-reference-hero,
  body[data-page="about"] .about-reference-story,
  body[data-page="about"] .about-reference-workshop,
  body[data-page="about"] .about-reference-process,
  body[data-page="about"] .about-reference-final {
    width: 100%;
  }
.about-reference-shell {
    width: min(100% - 28px, 560px);
  }
.about-reference-hero-grid {
    padding-block: 36px 42px;
  }
.about-reference-hand {
    font-size: 1.18rem;
  }
.about-reference-hero h1 {
    font-size: clamp(2.72rem, 13vw, 4rem);
    line-height: 1.02;
  }
.about-reference-lead {
    font-size: 0.82rem;
  }
.about-reference-actions {
    gap: 9px;
  }
.about-reference .about-button {
    min-height: 42px;
    padding-inline: 17px;
    font-size: 0.68rem;
  }
.about-reference-values {
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
  }
.about-reference-hero-visual {
    min-height: 430px;
  }
.about-reference-photo-main {
    right: 0;
    width: 74%;
    height: 88%;
    border-width: 6px;
    border-radius: 13px 13px 13px 30px;
  }
.about-reference-photo-inset {
    left: 0;
    width: 54%;
    border-width: 6px;
    border-radius: 13px;
  }
.about-reference-story,
  .about-reference-workshop,
  .about-reference-process {
    padding-block: 42px;
  }
.about-reference-story h2,
  .about-reference-workshop h2,
  .about-reference-process h2,
  .about-reference-belief h2,
  .about-reference-final h2 {
    font-size: clamp(1.85rem, 10vw, 2.85rem);
  }
.about-reference-story-copy {
    font-size: 0.77rem;
  }
.about-reference-workshop-gallery {
    gap: 8px;
  }
.about-reference-workshop-gallery figure > img:first-child {
    height: 140px;
  }
.about-reference-workshop-gallery .about-reference-workshop-wide > img:first-child {
    height: 230px;
  }
.about-reference-workshop-gallery figcaption span {
    display: none;
  }
.about-reference-steps {
    gap: 24px 10px;
  }
.about-reference-step-icon {
    width: 68px;
    height: 68px;
  }
.about-reference-step-icon svg {
    width: 36px;
    height: 36px;
  }
.about-reference-belief-photo {
    min-height: 280px;
  }
.about-reference-belief-copy {
    padding: 40px 18px 44px;
  }
.about-reference-final {
    padding-block: 40px 44px;
  }
.about-reference-final .about-reference-shell > p:not(.about-reference-eyebrow) br {
    display: none;
  }
.about-decor-wash {
    width: 460px;
    opacity: 0.24;
  }
.about-decor-sprig {
    width: 180px;
    opacity: 0.48;
  }
.about-paint-mark {
    opacity: 0.38;
  }
.about-paint-mark.is-optional {
    display: none;
  }
.about-paint-hero-left,
  .about-paint-story-left,
  .about-paint-workshop-left,
  .about-paint-process-left,
  .about-paint-final-left {
    left: -150px;
  }
.about-paint-story-right,
  .about-paint-workshop-right,
  .about-paint-process-right,
  .about-paint-belief-right,
  .about-paint-final-right {
    right: -145px;
  }
}
@media (prefers-reduced-motion: reduce){
.about-reference .about-button,
  body[data-page="about"].about-motion-ready [data-reveal] {
    transition: none;
  }
}

/* Source: account-ui.css */
/* ==========================================================================
   KROMADE — Account UI system  ("Bàn in" / Press Desk)
   --------------------------------------------------------------------------
   A single design system for the customer account area. It borrows its
   language directly from the company page (about.html): editorial 900-weight
   headings, serial-number eyebrows, registration marks, CMY ink chips,
   asymmetric corner cuts and soft paper shadows.

   Loaded AFTER styles.css. Everything is scoped to `.ka-scope`
   (#accountPageContent), `.ka-menu` (header dropdown) or the account page
   body so nothing leaks into the rest of the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The notch — KROMADE's shared border shape
   --------------------------------------------------------------------------
   Three rounded corners plus one clipped corner at the bottom-left, over a 1px
   hairline and a low, wide shadow. It reads as a sheet of paper with one corner
   trimmed off, which is where the whole "press desk" language starts.

   These live on :root, not on .ka-scope, because the notch is used outside the
   account area too (the header's .auth-actions plate, for one). Ask for it by
   name — "viền góc cắt" / notch — or add the .ka-notch class to any surface.
   Sizes step together: the cut is always about a third of the round corner, so
   a notched box nested inside another still looks concentric. */
/* --------------------------------------------------------------------------
   Avatar chip
   --------------------------------------------------------------------------
   The signed-in avatar on the sidebar identity card. Lit brand yellow with a
   white sheen in the top-left, the way a glossy print sample catches light —
   the brightest object on a panel that is otherwise all teal.

   The ramp is built around #f6c852, KROMADE's yellow, sitting at the middle stop
   where it covers most of the chip; the other two stops only lift and deepen
   the same hue so the chip reads as one lit object rather than a flat swatch.
   Written as literals because these tokens live on :root, outside the scopes
   that define --ka-yellow.

   The glyph is deep ink rather than white, which is what lets the fill stay
   this bright: ink holds 7.34:1 on the gradient's darkest stop, 9.73:1 on the
   yellow itself and 12.46:1 on the lightest, whereas white would sit between
   1.23:1 and 2.09:1 and simply disappear. The darkest stop is capped at
   #e0ab2c for the same reason. */
:root {
  --ka-avatar-fill:
    radial-gradient(circle at 26% 16%, rgba(255, 255, 255, 0.6), transparent 54%),
    linear-gradient(138deg, #fbe6ae 0%, #f6c852 48%, #e0ab2c 100%);
  --ka-avatar-ring:
    0 7px 16px rgba(190, 141, 27, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);

  --ka-notch-sm: 10px 10px 10px 3px;
  --ka-notch: 12px 12px 12px 4px;
  --ka-notch-lg: 16px 16px 16px 5px;
  --ka-notch-line: #e2ecec;
  --ka-notch-shadow: 0 7px 16px rgba(20, 45, 53, 0.06);
}
.ka-scope,
.ka-menu,
body[data-page="account"] .order-delete-modal {
  /* --- ink ------------------------------------------------------------- */
  /* muted tones are tuned so even 10px labels clear WCAG AA on paper */
  --ka-ink: #142d35;
  --ka-deep: #10282f;
  --ka-muted: #52686f;
  --ka-muted-soft: #5f767d;

  /* --- brand ----------------------------------------------------------- */
  --ka-teal: #0b8d82;
  --ka-teal-dark: #076c63;
  --ka-cyan: #35b9c7;
  --ka-magenta: #ec6386;
  --ka-yellow: #f6c852;
  --ka-violet: #8069d7;

  /* --- surfaces -------------------------------------------------------- */
  --ka-paper: #ffffff;
  --ka-paper-soft: #f6faf9;
  --ka-paper-sunk: #eff5f5;
  --ka-line: #e2ecec;
  --ka-line-strong: #cddddc;

  /* --- semantic -------------------------------------------------------- */
  --ka-danger: #c9384f;
  --ka-danger-soft: #fbeef0;
  --ka-success: #25704b;
  --ka-warning: #856008;
  /* rest fill for the tonal icon buttons — the pale end of the hue */
  --ka-teal-soft: #eaf7f5;
  /* --ka-yellow lightened ~32% toward white: the rest fill for "Đặt mặc định",
     which hovers up to the full --ka-yellow rather than down into a darker one */
  --ka-yellow-soft: #fadd93;

  /* --- shape ----------------------------------------------------------- */
  --ka-cut: 6px;
  --ka-r-sm: 10px;
  --ka-r-md: 14px;
  --ka-r-lg: 20px;
  --ka-r-xl: 26px;

  /* --- elevation ------------------------------------------------------- */
  --ka-shadow-sm: 0 6px 16px rgba(16, 40, 47, 0.06);
  --ka-shadow-md: 0 16px 38px rgba(16, 40, 47, 0.09);
  --ka-shadow-lg: 0 28px 62px rgba(16, 40, 47, 0.16);

  /* --- motion ---------------------------------------------------------- */
  --ka-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ka-fast: 140ms;
  --ka-base: 200ms;

  /* --- focus ----------------------------------------------------------- */
  --ka-focus: 0 0 0 3px rgba(53, 185, 199, 0.42);
}
/* ==========================================================================
   1. Icon primitives — one set, one weight, one alignment rule
   ========================================================================== */

.ka-scope svg.ka-icon,
.ka-menu svg.ka-icon,
body[data-page="account"] svg.ka-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ka-scope .ka-tile svg.ka-icon {
  width: 21px;
  height: 21px;
}
.ka-scope .ka-chip svg.ka-icon {
  width: 14px;
  height: 14px;
}
/* ==========================================================================
   3. Button system
   Hierarchy: primary (deep ink) > secondary/outline (teal) > ghost > text.
   Destructive is always explicit and never competes with the page CTA.
   ========================================================================== */

.ka-scope .ka-btn,
.ka-menu .ka-btn,
body[data-page="account"] .ka-btn {
  position: relative;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ka-ink);
  background: transparent;
  font: inherit;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}
.ka-scope .ka-btn > span,
body[data-page="account"] .ka-btn > span {
  display: inline-flex;
  align-items: center;
}
.ka-scope .ka-btn .ka-btn-icon,
body[data-page="account"] .ka-btn .ka-btn-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.ka-scope .ka-btn .ka-btn-icon svg.ka-icon,
body[data-page="account"] .ka-btn .ka-btn-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}
.ka-scope .ka-btn-sm .ka-btn-icon,
.ka-scope .ka-btn-sm .ka-btn-icon svg.ka-icon {
  width: 16px;
  height: 16px;
}
.ka-scope .ka-btn-primary .ka-btn-icon,
body[data-page="account"] .ka-btn-primary .ka-btn-icon {
  color: var(--ka-yellow);
}
/* --- outline: the everyday secondary ------------------------------------ */
.ka-scope .ka-btn-outline,
body[data-page="account"] .ka-btn-outline {
  border-color: rgba(11, 141, 130, 0.28);
  color: var(--ka-teal-dark);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
}
.ka-scope .ka-btn-primary.ka-btn-add .ka-btn-icon {
  color: #ffffff;
}
/* --- states ------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .ka-scope .ka-btn:not(:disabled):hover,
  body[data-page="account"] .ka-btn:not(:disabled):hover {
    transform: translateY(-2px);
  }

  .ka-scope .ka-btn-primary:not(:disabled):hover,
  body[data-page="account"] .ka-btn-primary:not(:disabled):hover {
    background: var(--ka-teal);
    box-shadow: 0 16px 32px rgba(11, 141, 130, 0.26);
  }

  /* Hover deepens one step inside the same mint — no hue jump, no colour flip
     on the label. */
  .ka-scope .ka-gate-actions .ka-btn-primary:not(:disabled):hover {
    color: #ffffff;
    background: #35a89d;
    box-shadow: 0 16px 32px rgba(53, 168, 157, 0.3);
  }

  .ka-scope .ka-btn-outline:not(:disabled):hover,
  body[data-page="account"] .ka-btn-outline:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.55);
    background: #f2fbf9;
  }

  .ka-scope .ka-btn-secondary:not(:disabled):hover {
    background: var(--ka-teal-dark);
  }

  .ka-scope .ka-btn-ghost:not(:disabled):hover,
  body[data-page="account"] .ka-btn-ghost:not(:disabled):hover {
    color: var(--ka-ink);
    background: #e2eded;
  }

  /* The rest fill deepens to full KROMADE yellow. The label stays ink rather than
     flipping to white the way the teal and red buttons do: those two darken on
     hover so white is the only thing that survives them, whereas this fill is
     light in both states and white on #f6c852 measures 1.58:1 — invisible. Ink
     reads 10.6:1 at rest and 9.1:1 on hover, so the type holds steady and the
     deepening fill is what registers. */
  /* Identical to .ka-icon-btn-danger:hover — same border, same solid danger
     fill, same white label. Placed after the ghost hover above so the matching
     (0,2,1) form wins the tie by source order. */
  .ka-scope .ka-btn-cancel:not(:disabled):hover,
  body[data-page="account"] .ka-btn-cancel:not(:disabled):hover {
    border-color: rgba(201, 56, 79, 0.4);
    color: #ffffff;
    background: var(--ka-danger);
  }

  .ka-scope .ka-btn-promote:not(:disabled):hover,
  body[data-page="account"] .ka-btn-promote:not(:disabled):hover {
    border-color: rgba(232, 178, 52, 0.85);
    color: var(--ka-ink);
    background: var(--ka-yellow);
  }

  .ka-scope .ka-btn-text:not(:disabled):hover {
    color: var(--ka-teal);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .ka-scope .ka-btn-danger:not(:disabled):hover,
  body[data-page="account"] .ka-btn-danger:not(:disabled):hover {
    background: #b02c42;
    box-shadow: 0 16px 32px rgba(201, 56, 79, 0.28);
  }

  /* Hover lifts one step inside the same teal — no hue jump, no type colour
     flip. Needs to be its own rule because these buttons already sit on teal
     at rest, so the generic primary hover would be a no-op. */
  .ka-scope .ka-btn-primary.ka-btn-add:not(:disabled):hover {
    background: var(--ka-teal);
    box-shadow: 0 12px 26px rgba(11, 141, 130, 0.24);
  }
}
.ka-scope .ka-btn:not(:disabled):active,
body[data-page="account"] .ka-btn:not(:disabled):active {
  transform: translateY(0) scale(0.985);
}
.ka-scope .ka-btn:focus-visible,
.ka-menu .ka-btn:focus-visible,
body[data-page="account"] .ka-btn:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
.ka-scope .ka-btn:disabled,
body[data-page="account"] .ka-btn:disabled {
  border-color: var(--ka-line);
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.ka-scope .ka-btn:disabled .ka-btn-icon,
body[data-page="account"] .ka-btn:disabled .ka-btn-icon {
  color: inherit;
  opacity: 0.75;
}
/* Loading: a determinate-looking sweep on the pill, never a spinning icon. */
.ka-scope .ka-btn.is-loading,
body[data-page="account"] .ka-btn.is-loading {
  cursor: progress;
}
.ka-scope .ka-btn.is-loading::after,
body[data-page="account"] .ka-btn.is-loading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
  opacity: 0.5;
  transform-origin: 0 50%;
  animation: kaButtonSweep 1.1s var(--ka-ease) infinite;
}
@keyframes kaButtonSweep {
  0% { transform: scaleX(0); }
  55% { transform: scaleX(1); }
  100% { transform: scaleX(1) translateX(100%); }
}
/* --- icon-only buttons -------------------------------------------------- */
.ka-scope .ka-icon-btn,
.ka-menu .ka-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid var(--ka-line);
  border-radius: 13px 13px 13px 5px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  cursor: pointer;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}
.ka-scope .ka-icon-btn svg.ka-icon {
  width: 18px;
  height: 18px;
}
.ka-scope .ka-identity-avatar svg.ka-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.ka-scope .ka-identity-meta-icon svg.ka-icon {
  width: 14px;
  height: 14px;
}
.ka-scope .ka-nav-icon svg.ka-icon {
  width: 19px;
  height: 19px;
}
.ka-scope .ka-nav-item.is-active {
  color: var(--ka-deep);
  background: #eaf7f5;
}
.ka-scope .ka-nav-item.is-active::before {
  height: 24px;
}
.ka-scope .ka-nav-item.is-active .ka-nav-icon {
  color: #ffffff;
  background: var(--ka-teal);
}
.ka-scope .ka-nav-item.is-active .ka-nav-copy strong {
  font-weight: 900;
}
.ka-scope .ka-nav-item.is-active .ka-nav-count {
  color: var(--ka-teal-dark);
  background: rgba(11, 141, 130, 0.14);
}
.ka-scope .ka-nav-trigger svg.ka-icon {
  width: 20px;
  height: 20px;
}
.ka-scope .ka-field {
  display: grid;
  gap: 7px;
  position: relative;
}
.ka-scope .ka-field-label {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  color: #40575e;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.005em;
}
.ka-scope .ka-field-label small {
  margin-left: auto;
  color: var(--ka-muted-soft);
  font-size: 0.64rem;
  font-weight: 650;
}
.ka-scope .ka-field-label strong {
  font-weight: 900;
}
.ka-scope .ka-field-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ka-teal);
}
.ka-scope .ka-field-icon svg.ka-icon {
  width: 16px;
  height: 16px;
}
#accountPageContent .ka-field textarea,
#accountPageContent .account-address-field textarea {
  min-height: 112px;
  line-height: 1.6;
  resize: vertical;
}
.ka-scope .ka-field:focus-within .ka-field-icon {
  color: var(--ka-teal-dark);
}
.ka-scope .password-visibility-toggle svg.ka-icon {
  width: 19px;
  height: 19px;
}
.ka-scope .password-visibility-toggle:hover,
.ka-scope .password-visibility-toggle.is-visible {
  color: var(--ka-teal-dark);
  background: rgba(11, 141, 130, 0.1);
}
.ka-scope .ka-search-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}
.ka-scope .ka-segmented button svg.ka-icon {
  width: 17px;
  height: 17px;
}
.ka-scope .ka-segmented button.is-active {
  color: var(--ka-teal-dark);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
}
.ka-scope .ka-status svg.ka-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.ka-scope .ka-empty-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}
.ka-scope .ka-empty .ka-btn {
  margin-top: 8px;
}
.ka-scope .ka-empty.is-error .ka-empty-icon {
  border-color: rgba(201, 56, 79, 0.2);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}
@keyframes kaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes kaAddressPromoted {
  0% {
    border-color: var(--ka-teal);
    box-shadow: 0 0 0 3px rgba(11, 141, 130, 0.22), var(--ka-shadow-md);
  }
  60% {
    border-color: var(--ka-teal);
    box-shadow: 0 0 0 3px rgba(11, 141, 130, 0.16), var(--ka-shadow-sm);
  }
  100% {
    border-color: rgba(11, 141, 130, 0.34);
    box-shadow: 0 0 0 0 rgba(11, 141, 130, 0), var(--ka-shadow-sm);
  }
}
@keyframes kaDefaultBadgeIn {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}
.ka-scope .account-address-detail-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}
@keyframes kaModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}
.ka-scope .account-address-field.is-wide {
  grid-column: 1 / -1;
}
.ka-scope .order-list-chevron svg.ka-icon {
  width: 18px;
  height: 18px;
}
.ka-scope .order-action-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}
.ka-scope .account-order-page-nav svg.ka-icon {
  width: 15px;
  height: 15px;
}
@media (hover: hover) and (pointer: fine){
.ka-scope .account-order-page-nav:not(:disabled):hover,
  .ka-scope .account-order-page-number:not(.is-active):hover {
    border-color: rgba(11, 141, 130, 0.4);
    color: var(--ka-teal-dark);
    background: #f2fbf9;
  }
}
.ka-scope .account-order-page-number.is-active {
  border-color: transparent;
  color: #ffffff;
  background: var(--ka-deep);
}
.ka-scope .account-feedback-product-action svg.ka-icon {
  width: 14px;
  height: 14px;
}
/* ==========================================================================
   17. Header auth buttons + account dropdown
   ========================================================================== */

/* The two header entry points are now the account gate's pair (.ka-gate-actions)
   moved into the header: the same pill, the same 1px border, the same weights,
   and the same split of roles — a filled mint primary for "Đăng nhập" beside a
   paper outline for "Đăng ký". That flips the header's old arrangement, where
   sign-up carried the solid teal fill and sign-in was the pale one; the gate
   treats signing in as the stronger action, and now so does the header.

   Sizing is the gate's, one step down: the gate's buttons stand alone in the
   middle of an empty panel at 46px, these sit in a 60px header row, so they run
   at 44px with slightly tighter padding.

   The pill replaces the notch these two used to carry. The notch stays on the
   icon chips and the account dropdown, so the header keeps the motif where it
   still has a surface to sit on.

   `:not(.is-account)` guards every rule that paints or sizes the sign-in
   button: once someone signs in, that element becomes the avatar pill styled in
   styles.css, which must keep its own fill and its 34px chip. */
.site-header .login-button:not(.is-account),
.site-header .signup-button {
  gap: 9px;
  min-height: 44px;
  padding: 11px 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  line-height: 1.15;
}
/* Signed in, the button takes the notch instead of the pill the signed-out pair
   wears: three corners rounded, the bottom-left one barely — the same
   12/12/12/4 the menu's "Đăng xuất" row carries, so the button and the row it
   opens share a silhouette. Border colour, fill and shadow stay as they were. */
.site-header .login-button.is-account {
  border-radius: var(--ka-notch);
}
/* primary — .ka-btn-primary as the gate now runs it: mint #45b9ae, white label,
   white icon. */
.site-header .login-button:not(.is-account) {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
}
/* outline — .ka-btn-outline: paper fill, teal hairline, teal-dark label */
.site-header .signup-button {
  border-color: rgba(11, 141, 130, 0.28);
  color: #076c63;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 40, 47, 0.06);
}
/* The gate carries its icons bare at 18px rather than in a chip, so both header
   icons drop the tinted square they used to sit in. `display` is deliberately
   left alone here: the ≤640px rules in styles.css hide both icons on small
   screens, and setting it would undo that. */
.site-header .login-button:not(.is-account) .button-icon,
.site-header .signup-button .signup-icon {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}
/* KROMADE yellow, the colour .ka-btn-primary gives its icon — the sign-in button
   carries it in the header for the same reason it does in the gate. */
.site-header .login-button:not(.is-account) .button-icon {
  color: #f6c852;
}
.site-header .login-button:not(.is-account) .button-icon svg.ka-icon,
.site-header .signup-button .signup-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}
@media (hover: hover) and (pointer: fine){
.site-header .login-button:not(.is-account):hover,
  .site-header .login-button:not(.is-account):focus-visible {
    border-color: transparent;
    color: #ffffff;
    background: #35a89d;
    box-shadow: 0 16px 32px rgba(53, 168, 157, 0.3);
    transform: translateY(-2px);
  }
.site-header .signup-button:hover,
  .site-header .signup-button:focus-visible {
    border-color: rgba(11, 141, 130, 0.55);
    color: #076c63;
    background: #f2fbf9;
    box-shadow: 0 6px 16px rgba(16, 40, 47, 0.06);
    transform: translateY(-2px);
  }
}
/* Matches the shrink styles.css already applies to this pair below 1080px —
   restated because the rules above outrank it. */
@media (max-width: 1079.98px) {
  .site-header .login-button:not(.is-account),
  .site-header .signup-button {
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.72rem;
  }
}
/* Duoi 390px cum nut ben phai khong con du cho.

   No la mot hang flex can ve phai, ma hai nut dat min-width: max-content nen
   khong co duoc. Thieu cho thi ca cum tran ra ngoai cot cua no - tran ve ben
   TRAI vi mep phai da bi neo - roi de len logo. Do duoc: che 3px o kho 380,
   7px o 375, 16px o 360 va 43px o 320.

   Hai viec phai lam cung luc. Thu gon hai nut cho vua cho, va cho logo nhuong
   phan con thieu bang min-width: 0 - thieu ve sau thi cot logo van giu nguyen
   be rong toi thieu cua no va cum nut lai tran.

   Viet lai du ca :not(.is-account) de cung do dac hieu voi quy tac ngay tren;
   thieu no thi nut Dang nhap khong nhan, chi moi nut Dang ky thu lai. */
@media (max-width: 390px) {
  /* Khong dung toi padding-inline cua header: .top-nav bu am dung bang gia tri
     do de chay tran ra sat mep, doi mot ben la no thua ra ben kia. Da do duoc
     2px tran ngang khi thu. */
  .site-header {
    gap: 8px;
  }

  .site-header .brand {
    min-width: 0;
  }

  .site-header .auth-actions {
    gap: 3px;
    min-width: 0;
  }

  .site-header .login-button:not(.is-account),
  .site-header .signup-button {
    gap: 4px;
    min-width: 0;
    padding: 6px 7px;
    font-size: 0.66rem;
  }
}
/* Duoi 340px thi rieng khoang dem ngang cua hai nut phai siet them lan nua:
   o kho 320 do duoc con thieu dung 2px moi het de len logo. */
@media (max-width: 340px) {
  .site-header .login-button:not(.is-account),
  .site-header .signup-button {
    padding: 6px 5px;
  }

  .site-header .locale-switcher {
    transform: scale(0.92);
    transform-origin: right center;
  }
}
/* the header entry points now carry real icons instead of "ID" / "+" glyphs */
.site-header .button-icon svg.ka-icon,
.site-header .signup-icon svg.ka-icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-header .button-icon {
  display: grid;
  place-items: center;
}
/* All three header chips take the notch one step below their buttons — 10/10/10/3
   inside 12/12/12/4 — so the header reads as one nested shape rather than three
   unrelated rounded squares. */
.site-header .button-icon,
.site-header .signup-icon {
  border-radius: var(--ka-notch-sm);
}
/* Signed-in avatar — a flat pale jade chip carrying a teal glyph, #06a189 on
   #dbf2ed, 3.5:1. KROMADE yellow was tried behind the same glyph and dropped: it
   drew the eye but held only 2.1:1, so the linework went soft.

   Deliberately quieter than the sidebar avatar's lit cyan gradient: this one
   sits inside a white pill inside a white header, so a saturated fill made the
   header's right end shout over the nav.

   Earlier versions, for the record: the KROMADE mark as a backdrop (at 34px the
   mark is too busy under a glyph, and whichever glyph colour you pick fails
   against one half of it), then a deep ink chip with a CMY registration tick
   (correct but sombre), then the sidebar's cyan gradient.

   The 1px teal hairline is load-bearing, not decoration — at this lightness the
   fill alone leaves no edge against the pill behind it.

   border-radius repeats the rule above on purpose: styles.css sets it again on
   `.login-button.is-account .button-icon` at (0,3,0), which outranks the shared
   `.site-header .button-icon` chip rule. */
.site-header .login-button.is-account .button-icon {
  border-radius: var(--ka-notch-sm);
  color: #06a189;
  background: #dbf2ed;
  box-shadow:
    0 7px 16px rgba(11, 141, 130, 0.16),
    inset 0 0 0 1px rgba(11, 141, 130, 0.22);
}
/* styles.css draws a green presence dot here as an ::after overhanging the
   bottom-right corner. Dropped: the avatar is only ever rendered when someone
   is signed in, so the dot restated what the avatar already said. */
.site-header .login-button.is-account .button-icon::after {
  display: none;
}
.site-header .login-button.is-account .button-icon svg.ka-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
/* Nút tài khoản co theo tên nhưng không vượt quá 150px. `min-width: 0` ghi đè
   min-content của header hẹp để phần tên có thể được cắt mà không kéo rộng cả
   cụm hành động. */
.site-header .auth-actions > .login-button.is-account {
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  max-width: 150px;
}
.site-header .login-button.is-account #loginLabel,
.site-header .login-button.is-account #checkoutAccountLabel {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
/* Component account-menu chỉ gắn class này khi scrollWidth thực sự lớn hơn
   clientWidth. Vì vậy tên ngắn vẫn sắc nét trọn vẹn, còn phần cuối của tên dài
   tan dần vào nền thay cho ký hiệu ba chấm. */
.site-header .login-button.is-account #loginLabel.is-name-clipped,
.site-header .login-button.is-account #checkoutAccountLabel.is-name-clipped {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
}
/* Điện thoại nhỏ chỉ giữ avatar và chevron lên/xuống. Button đã có aria-label
   riêng cho thao tác mở menu nên việc ẩn tên trực quan không làm mất tên truy
   cập của điều khiển. */
@media (max-width: 480px) {
  .site-header .auth-actions > .login-button.is-account {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .site-header .login-button.is-account #loginLabel,
  .site-header .login-button.is-account #checkoutAccountLabel {
    display: none;
  }
}
/* auth modal: real icons in place of the "@", "✓" and "←" glyphs.
   The id anchor keeps these ahead of the page-level `.ka-icon` sizing rule. */
#loginModal .registration-verification-icon svg.ka-icon,
#loginModal .password-reset-confirmed svg.ka-icon,
#loginModal .password-reset-back svg.ka-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginModal .registration-verification-icon svg.ka-icon {
  width: 22px;
  height: 22px;
}
#loginModal .password-reset-confirmed svg.ka-icon {
  width: 15px;
  height: 15px;
}
#loginModal .password-reset-back svg.ka-icon {
  width: 15px;
  height: 15px;
}
.ka-menu {
  width: min(304px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-md);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-lg);
  animation: kaMenuIn 200ms var(--ka-ease) both;
}
@keyframes kaMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* The identity card that used to head this menu is gone. The name and email it
   showed are already one click away in the profile section, and the header
   button beside it carries the avatar, so the menu opens straight into what it
   is actually for — the links. */
.ka-menu .account-menu-links {
  display: grid;
  gap: 2px;
}
.ka-menu .account-menu-link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px 12px 12px 4px;
  color: var(--ka-ink);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}
.ka-menu .account-menu-link-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px 10px 10px 3px;
  color: var(--ka-teal);
  background: #eef7f6;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}
.ka-menu .account-menu-link-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}
.ka-menu .account-menu-link > strong {
  min-width: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
  font-size: 0.65rem;
  font-weight: 900;
  text-align: center;
}
.ka-menu .account-menu-link-chevron {
  display: grid;
  place-items: center;
  color: var(--ka-muted-soft);
}
.ka-menu .account-menu-link-chevron svg.ka-icon {
  width: 16px;
  height: 16px;
}
.ka-menu .account-menu-link:hover,
.ka-menu .account-menu-link:focus-visible {
  background: var(--ka-paper-soft);
  outline: none;
}
.ka-menu .account-menu-link:focus-visible {
  box-shadow: var(--ka-focus);
}
.ka-menu .account-menu-link:hover .account-menu-link-icon,
.ka-menu .account-menu-link:focus-visible .account-menu-link-icon {
  color: #ffffff;
  background: var(--ka-teal);
}
.ka-menu .account-menu-logout {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ka-line);
  border-radius: 12px 12px 12px 4px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    border-color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}
.ka-menu .account-menu-logout-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px 10px 10px 3px;
  color: inherit;
  background: var(--ka-paper-sunk);
}
.ka-menu .account-menu-logout-icon svg.ka-icon,
.ka-menu .account-menu-logout-arrow svg.ka-icon {
  width: 17px;
  height: 17px;
}
.ka-menu .account-menu-logout-copy strong {
  font-weight: 850;
}
.ka-menu .account-menu-logout-arrow {
  display: grid;
  place-items: center;
  color: var(--ka-muted-soft);
}
.ka-menu .account-menu-logout:hover,
.ka-menu .account-menu-logout:focus-visible {
  border-color: rgba(201, 56, 79, 0.3);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
  outline: none;
}
.ka-menu .account-menu-logout:focus-visible {
  box-shadow: var(--ka-focus);
}
.ka-menu .account-menu-logout:hover .account-menu-logout-icon,
.ka-menu .account-menu-logout:focus-visible .account-menu-logout-icon {
  color: var(--ka-danger);
  background: rgba(201, 56, 79, 0.1);
}
body[data-page="account"] .order-delete-modal .order-delete-modal-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}
@keyframes kaFade {
  from { opacity: 0; }
}
.ka-confirm svg.ka-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ka-confirm .ka-confirm-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}
.ka-confirm .ka-btn {
  position: relative;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.755rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}
.ka-confirm .ka-btn-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.ka-confirm .ka-btn-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}
.ka-confirm .ka-btn-primary .ka-btn-icon {
  color: var(--ka-yellow);
}
@media (hover: hover) and (pointer: fine){
.ka-confirm .ka-btn:hover {
    transform: translateY(-2px);
  }
}
.ka-confirm .ka-btn:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
@media (prefers-reduced-motion: reduce){
.ka-confirm .ka-btn:hover {
    transform: none;
  }
}
/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .ka-scope .ka-shell {
    grid-template-columns: minmax(214px, 244px) minmax(0, 1fr);
    gap: 18px;
  }

  .ka-scope .ka-nav-copy small {
    display: none;
  }

  .ka-scope .ka-nav-item {
    min-height: 46px;
  }
}
@media (max-width: 640px){
.ka-scope .ka-form-actions .ka-btn:first-child {
    order: 2;
  }
}
@media (max-width: 420px){
.ka-scope .ka-workspace-actions .ka-btn {
    flex: 1 1 100%;
  }
.ka-scope .account-address-workspace-heading .ka-workspace-actions .ka-btn {
    flex: 0 1 auto;
    min-width: 0;
  }
}
/* --------------------------------------------------------------------------
   From 950px down every account section header drops its <h2>: only the
   eyebrow and the nav trigger stay on the top row, with the section actions
   below. Placed last in the responsive cascade on purpose — the 860/780/640
   blocks above also set grid-template-areas, so this has to come after them
   to win. The title is visually hidden rather than display:none so each page
   keeps a heading in the accessibility tree.
   -------------------------------------------------------------------------- */
@media (max-width: 950px) {
  .ka-scope .account-workspace-heading .ka-workspace-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* sections that carry actions keep a second, full-width row for them */
  .ka-scope .account-workspace-heading:has(.ka-workspace-actions) {
    grid-template-areas:
      "eyebrow trigger"
      "actions actions";
    grid-template-rows: auto auto;
  }

  /* sections without actions collapse to a single row — no empty track or gap */
  .ka-scope .account-workspace-heading:not(:has(.ka-workspace-actions)) {
    grid-template-areas: "eyebrow trigger";
    grid-template-rows: auto;
  }
}
/* ==========================================================================
   20. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ka-scope *,
  .ka-menu *,
  body[data-page="account"] .order-delete-modal * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .ka-scope .ka-btn:not(:disabled):hover,
  .ka-scope .ka-nav-item:hover,
  .ka-scope .order-list-row:hover,
  .ka-scope .order-action-button:not(:disabled):hover,
  .ka-scope .ka-address-card:hover,
  .ka-scope .account-feedback-product:hover {
    transform: none;
  }
}
/* ==========================================================================
   20. Auth modal — mode tabs + submit buttons
   --------------------------------------------------------------------------
   The sign-in / sign-up modal is the third place the same two actions appear,
   after the header and the account gate, so it now runs the same recipe: mint
   #45b9ae for the committing action, paper-and-hairline for everything beside
   it, pills throughout.

   Two things go with the old design. The frosted glass track (a 10px backdrop
   blur over a near-white panel, which cost a compositing layer to render an
   effect nobody could see) is now a flat pale-mint groove. And the amber-coral
   fill the "Đăng ký" tab and its submit button used to switch to is gone: a
   segmented control changes which side is lit, not what colour the site is, and
   that amber belonged to no palette the rest of the flow uses.

   Everything here is scoped to .login-modal, which is the dialog on all nine
   public pages and the checkout dialog too — one rule set, both modals.
   ========================================================================== */

/* --- the track ---------------------------------------------------------- */
.login-modal > .auth-tabs {
  gap: 6px;
  padding: 5px;
  border-color: rgba(11, 141, 130, 0.16);
  border-radius: 999px;
  background: #f2faf8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.login-modal > .auth-tabs button {
  min-height: 42px;
  border-radius: 999px;
  color: #52686f;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
}
/* Hairline grey outline on the type itself — the tabs and the submit button
   below share it, so the two controls read as one set. Kept at 0.4px: the
   stroke is centred on the glyph edge, so anything heavier eats into letters
   this small and the labels start to look furred rather than outlined. */
.login-modal > .auth-tabs button,
.login-modal .primary-button.full,
.login-modal .auth-submit-copy strong {
  -webkit-text-stroke: 0.4px rgba(20, 45, 53, 0.34);
  paint-order: stroke fill;
}
/* Resting tabs lift onto white on hover — the same paper-and-hairline move the
   header's "Đăng ký" makes, minus the border, which would jitter the row. */
.login-modal > .auth-tabs button:hover:not(.is-active),
.login-modal > .auth-tabs button:focus-visible:not(.is-active) {
  color: #076c63;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 40, 47, 0.06);
  outline: none;
}
/* One active look for both sides. The register selectors are listed explicitly
   because styles.css targets that tab through an attribute — (0,4,1) — and
   would otherwise keep its amber gradient. */
.login-modal > .auth-tabs button.is-active,
.login-modal > .auth-tabs button[data-mode="register"].is-active,
.login-modal > .auth-tabs button[data-checkout-auth-mode="register"].is-active {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 10px 20px rgba(53, 168, 157, 0.26);
  transform: none;
}
/* --- the submit ---------------------------------------------------------
   "Đăng nhập" / "Tạo tài khoản" and the password-reset steps behind them all
   land on .primary-button.full inside this dialog, so they share one CTA: the
   header's mint pill at full width, one size up because it is the only thing
   the eye should land on after the fields. */
.login-modal .primary-button.full {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  transition:
    color 180ms var(--ka-ease, ease),
    background 180ms var(--ka-ease, ease),
    box-shadow 180ms var(--ka-ease, ease),
    transform 180ms var(--ka-ease, ease);
}
/* A chevron drawn from two borders, the same way the header account button
   draws its caret — no icon markup to add to nine copies of this dialog. It
   nudges forward on hover so the button reads as "continue", not just "submit". */
.login-modal .primary-button.full::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  margin-left: 1px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms var(--ka-ease, ease);
}
.login-modal .text-button.full {
  min-height: 42px;
  border-radius: 999px;
  color: #076c63;
  font-size: 0.73rem;
  font-weight: 800;
  transition:
    color 160ms ease,
    background 160ms ease;
}
/* --- checkout's expanded submit ----------------------------------------
   The checkout dialog swaps the plain CTA for a taller button carrying an icon
   chip, a subtitle and a status dot. Its structure is left alone; only the
   colours move onto the mint, so the two dialogs no longer disagree — sign-in
   was a three-stop teal gradient, sign-up an amber-to-coral one. */
.login-modal .auth-login-submit,
.login-modal .auth-register-submit {
  border-color: transparent;
  border-radius: 999px;
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 14px 29px rgba(53, 168, 157, 0.26);
}
/* The glyph runs in KROMADE yellow, the same colour the header's sign-in icon
   carries — the two buttons are the same action, so they light the same way. */
.login-modal .auth-login-submit .auth-submit-icon,
.login-modal .auth-register-submit .auth-submit-icon {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #f6c852;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.login-modal .auth-login-submit .auth-submit-copy small,
.login-modal .auth-register-submit .auth-submit-copy small {
  color: rgba(255, 255, 255, 0.78);
}
/* The status dot keeps its job as the one warm accent on the button — KROMADE
   yellow, the same yellow the sign-in icon carries in the header. */
.login-modal .auth-login-submit .auth-submit-status,
.login-modal .auth-register-submit .auth-submit-status {
  border-color: rgba(255, 255, 255, 0.62);
  background: #f6c852;
  box-shadow:
    0 0 0 4px rgba(246, 200, 82, 0.16),
    0 0 14px rgba(246, 200, 82, 0.45);
}
@media (hover: hover) and (pointer: fine){
.login-modal .primary-button.full:hover:not(:disabled),
  .login-modal .primary-button.full:focus-visible {
    color: #ffffff;
    background: #35a89d;
    box-shadow: 0 16px 32px rgba(53, 168, 157, 0.3);
    transform: translateY(-2px);
  }
.login-modal .primary-button.full:hover:not(:disabled)::after {
    transform: translateX(3px) rotate(45deg);
  }
.login-modal .text-button.full:hover,
  .login-modal .text-button.full:focus-visible {
    color: #0b8d82;
    background: #f2fbf9;
    outline: none;
  }
.login-modal .auth-login-submit:hover:not(:disabled),
  .login-modal .auth-login-submit:focus-visible,
  .login-modal .auth-register-submit:hover:not(:disabled),
  .login-modal .auth-register-submit:focus-visible {
    border-color: transparent;
    background: #35a89d;
    box-shadow: 0 18px 35px rgba(53, 168, 157, 0.3);
    outline: none;
    transform: translateY(-2px);
  }
}
.login-modal .primary-button.full:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}
.login-modal .primary-button.full:disabled,
.login-modal .primary-button.full:disabled:hover {
  background: #45b9ae;
  box-shadow: none;
  transform: none;
}
@media (max-width: 640px){
.login-modal > .auth-tabs button {
    min-height: 40px;
    font-size: 0.72rem;
  }
.login-modal .primary-button.full {
    min-height: 47px;
    font-size: 0.77rem;
  }
}
@media (prefers-reduced-motion: reduce){
.login-modal .primary-button.full,
  .login-modal .primary-button.full::after,
  .login-modal .auth-login-submit,
  .login-modal .auth-register-submit {
    transition: none;
  }
}
/* No transition means no delayed visibility either — the swap has to be a plain
   cut, or the panel's contents would stay hidden after the warning closes. */
@media (prefers-reduced-motion: reduce) {
  .preview-panel > *:not(.quality-inline),
  .preview-panel.has-quality-warning > *:not(.quality-inline),
  .quality-inline,
  .preview-panel.has-quality-warning > .quality-inline,
  .quality-inline .quality-card,
  .preview-panel.has-quality-warning .quality-card {
    transition: none;
  }
}
.quality-card .eyebrow {
  margin: 0 0 3px;
  color: var(--quality-status-color);
  font-size: 0.64rem;
  letter-spacing: 0.095em;
}
/* ==========================================================================
   22. Crop panel status line
   --------------------------------------------------------------------------
   With the panel title gone, the eyebrow and the status pill are the whole
   head of the crop panel — one strip, read left to right: what this panel is,
   and where the order stands in it.

   Both sides are given the same 30px height so they share a centre line rather
   than merely sitting in the same flex row; before this the pill's extra height
   left the two visibly off by a few pixels.

   While steps are outstanding the pill wears the same coral the size group
   wears when it is waiting on a choice — #ef6461 at 34% on a white-to-blush
   wash, with the group's own #ad4230 label — so the two ends of the builder
   agree on what "still needed" looks like. The moment the crop is confirmed it
   flips to a solid mint fill with a white label and white dot. Unfinished reads
   as "asking", finished reads as "done", and the difference carries from across
   the panel.

   The dot has to be drawn in CSS because renderPreview() writes the label with
   textContent, which would wipe any markup inside.
   ========================================================================== */

.preview-panel .panel-heading.row {
  gap: 10px;
}
.preview-panel .panel-heading.row > .eyebrow,
.preview-panel .panel-heading.row > .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
}
.preview-panel .panel-heading.row > .eyebrow {
  color: #076c63;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.075em;
}
.preview-panel .panel-heading.row > .status-pill {
  gap: 8px;
  padding: 5px 14px 5px 12px;
  border: 0;
  border-radius: 999px;
  color: #ad4230;
  background: linear-gradient(180deg, #ffffff, #ffeee9);
  /* Three layers doing what the border used to: a hairline of contact shadow
     to seat the chip on the panel, a wide tinted drop that carries the state's
     colour into the surface below, and a lit top edge so it reads as a raised
     lozenge rather than a flat tag. */
  box-shadow:
    0 1px 2px rgba(173, 66, 48, 0.14),
    0 8px 18px -6px rgba(239, 100, 97, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    color 200ms var(--ka-ease, ease),
    border-color 200ms var(--ka-ease, ease),
    background 200ms var(--ka-ease, ease),
    box-shadow 200ms var(--ka-ease, ease);
}
.preview-panel .panel-heading.row > .status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #ef6461;
  box-shadow: 0 0 0 3px rgba(239, 100, 97, 0.22);
  transition:
    background 200ms var(--ka-ease, ease),
    box-shadow 200ms var(--ka-ease, ease);
}
.preview-panel .panel-heading.row > .status-pill.is-ready {
  color: #ffffff;
  background: linear-gradient(180deg, #4cc3b7, #3faea4);
  box-shadow:
    0 1px 2px rgba(11, 111, 102, 0.22),
    0 10px 22px -7px rgba(53, 168, 157, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.preview-panel .panel-heading.row > .status-pill.is-ready::before {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.34);
}
@media (max-width: 560px){
.preview-panel .panel-heading.row > .status-pill {
    padding-inline: 10px 11px;
    font-size: 0.62rem;
  }
}
@media (prefers-reduced-motion: reduce){
.preview-panel .panel-heading.row > .status-pill,
  .preview-panel .panel-heading.row > .status-pill::before {
    transition: none;
  }
}
/* Below 640px styles.css turns every .panel-heading.row into a column, which is
   what pushed the status pill onto a second line. The crop panel opts out and
   stays a row.

   WRAP, not nowrap. This head held two short items when the rule was written —
   an eyebrow and a status pill. It now also carries the image-slot switcher and
   the "Đổi ảnh" button, and nowrap squeezed the switcher down to zero width, so
   the slot chips scrolled clean out of sight instead of dropping to a second
   line. The row direction is what this rule was really opting into; the nowrap
   came along for the ride and has outlived its reason. */
@media (max-width: 640px) {
  .preview-panel .panel-heading.row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .preview-panel .panel-heading.row > .eyebrow {
    flex: 0 0 auto;
    font-size: clamp(0.58rem, 2.6vw, 0.7rem);
    white-space: nowrap;
  }

  .preview-panel .panel-heading.row > .status-pill {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 28px;
    gap: 6px;
    padding: 5px clamp(10px, 2.6vw, 14px) 5px clamp(9px, 2.2vw, 12px);
    overflow: hidden;
    /* The 0.5rem floor bottomed out at 8px on a 320px phone. The pill already
       ellipsises, and it had room to spare there, so the floor was costing
       legibility without buying any. */
    font-size: clamp(0.6rem, 2.3vw, 0.66rem);
    text-overflow: ellipsis;
  }

  .preview-panel .panel-heading.row > .status-pill::before {
    width: 6px;
    height: 6px;
  }
}
/* --------------------------------------------------------------------------
   Khe hở hai bên trên màn hình điện thoại — phần thuộc về file này.

   styles.css có một khối gom khe hở của toàn site về 8px cho khung trang và
   14px cho thẻ nội dung. Cổng đăng nhập nằm ở đây, mà file này nạp sau
   styles.css nên rule bên đó không thắng được; phải viết ở đây.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ka-scope .ka-gate {
    padding-inline: 16px;
  }
}
/* Ô mã bưu điện Nhật trong form địa chỉ.

   Ô nhập và nút tra cứu đứng chung một hàng vì chúng là một thao tác; dòng chú
   thích bên dưới đổi nội dung theo kết quả nên nó cũng là nơi báo lỗi, thay vì
   đẩy một thông báo nổi che mất ô đang gõ. */
/* Cho xuống dòng thay vì đặt một mốc màn hình cứng: ô nhập giữ đúng bề rộng
   của mã, nút chỉ tụt xuống hàng dưới khi hàng thật sự không còn chỗ — đo được
   là dưới 360px. Rộng hơn thì cả hai luôn nằm cùng hàng. */
.ka-scope .account-address-postal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
/* Ô mã bưu điện rộng đúng bằng mã dài nhất của nước đang chọn, không kéo hết
   hàng. Số ký tự do trình dựng truyền vào qua --postal-chars vì mỗi nước một
   độ dài: Hàn 5, Canada 7, Nhật 8.

   Hệ số 1.4 chứ không phải 1: đơn vị ch đo bề ngang chữ số 0 ở dạng thường,
   trong khi ô này bật chữ số đều bề ngang (tabular-nums) vốn rộng hơn, lại cộng
   thêm letter-spacing đặt bên dưới. Đo thật trên cả ba nước thì mỗi ký tự chiếm
   khoảng 1.34ch, nên 1.4 là vừa đủ kèm một chút dư. Cộng 34px là đệm hai bên
   (14+14), viền (1+1) và chỗ cho con trỏ nhấp nháy.

   Dùng ch để bề rộng tự tính lại theo cỡ chữ của chính ô đó — đổi cỡ chữ không
   phải sửa lại con số này.

   Hai bộ chọn cho hai trang. Trong khu tài khoản phải neo vào
   #accountPageContent vì quy tắc ô nhập chung ở đó cũng neo vào id, chọn bằng
   class thường sẽ thua cascade — đúng lý do đã ghi ở đầu nhóm quy tắc kia.
   Trang thanh toán không có id đó và cũng không có quy tắc id nào cạnh tranh,
   nên chọn theo class là đủ. */
#accountPageContent .account-address-postal-row input.account-address-input,
.checkout-address-fields .account-address-postal-row input.account-address-input {
  flex: 0 0 auto;
  width: calc(var(--postal-chars, 8) * 1.4ch + 34px);
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
/* Nút tìm địa chỉ đi kèm ô nhập nên lấy đúng hình dáng của ô: cùng chiều cao,
   cùng bán kính bo. Trước đây nó là viên thuốc 999px đặt cạnh một ô bo 13px,
   nhìn như hai thứ rời nhau.

   Nhẹ hơn nút thường một bậc: nền là một lớp phủ lam nhạt thay vì trắng, viền
   mảnh, bỏ đổ bóng. Nó là nút phụ trợ cho một ô nhập, không phải nút hành động
   chính của form — nặng bằng nút "Thêm địa chỉ" là sai thứ bậc. */
.ka-scope .account-address-postal-button,
body[data-page="account"] .account-address-postal-button {
  flex: 0 0 auto;
  gap: 7px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(11, 141, 130, 0.22);
  border-radius: 13px;
  color: var(--ka-teal-dark);
  background: linear-gradient(180deg, #f5fcfa, #e9f7f3);
  box-shadow: none;
  font-size: 0.71rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ka-scope .account-address-postal-button .ka-btn-icon {
  width: 15px;
  height: 15px;
  opacity: 0.75;
}
.ka-scope .account-address-postal-button .ka-btn-icon svg {
  width: 15px;
  height: 15px;
}
@media (hover: hover){
.ka-scope .account-address-postal-button:not(:disabled):hover,
  body[data-page="account"] .account-address-postal-button:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.42);
    background: linear-gradient(180deg, #eefaf6, #ddf2ec);
  }
.ka-scope .account-address-postal-button:not(:disabled):hover .ka-btn-icon {
    opacity: 1;
  }
}
.ka-scope .account-address-postal-button:not(:disabled):active {
  transform: translateY(1px);
}
.ka-scope .account-address-postal-note {
  display: block;
  margin-top: 6px;
  color: var(--ka-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}
.ka-scope .account-address-postal-note.is-ok {
  color: #12795c;
  font-weight: 800;
}
.ka-scope .account-address-postal-note.is-error {
  color: #b8324a;
  font-weight: 800;
}
/* Trước đây khổ hẹp phải xếp ô nhập và nút thành hai hàng vì ô nhập kéo hết
   chiều ngang. Nay ô chỉ rộng bằng đúng mã nên cả hai nằm vừa một hàng kể cả ở
   320px, không cần tách nữa. */

/* Màn hẹp nhất: nút rút về chỉ còn icon để ô mã và nút vẫn nằm cùng một hàng.
   Ở 320px, ô mã Nhật 118px cộng nhãn đầy đủ 118px là vượt khung 2px — mất cả
   một hàng chỉ vì hai điểm ảnh. Chữ ẩn đi nhưng nút vẫn có aria-label nên bộ
   đọc màn hình vẫn đọc ra "Tìm địa chỉ theo mã bưu điện". */
@media (max-width: 350px) {
  .ka-scope .account-address-postal-button span:not(.ka-btn-icon) {
    display: none;
  }

  .ka-scope .account-address-postal-button {
    padding: 0 13px;
  }
}
body[data-page="checkout"] .ka-scope .ka-field-label,
body[data-page="checkout"] .checkout-address-field-heading label,
body[data-page="checkout"] .checkout-account-address-heading strong {
  color: #294764;
}
body[data-page="checkout"] .ka-scope .ka-field-icon {
  color: #6f9aa6;
}
body[data-page="checkout"] .ka-scope .ka-field:focus-within .ka-field-icon {
  color: #294764;
}
body[data-page="checkout"] .checkout-form-grid input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
body[data-page="checkout"] .checkout-form-grid textarea,
body[data-page="checkout"] .checkout-form-grid select,
body[data-page="checkout"] .checkout-address-fields .country-picker-trigger {
  border-color: rgba(111, 154, 166, 0.46);
  color: #213d5b;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body[data-page="checkout"] .checkout-form-grid input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):hover,
body[data-page="checkout"] .checkout-form-grid textarea:hover,
body[data-page="checkout"] .checkout-form-grid select:hover,
body[data-page="checkout"] .checkout-address-fields .country-picker-trigger:hover {
  border-color: rgba(111, 154, 166, 0.68);
}
body[data-page="checkout"] .checkout-form-grid input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
body[data-page="checkout"] .checkout-form-grid textarea:focus,
body[data-page="checkout"] .checkout-form-grid select:focus,
body[data-page="checkout"] .checkout-address-fields .country-picker.is-open .country-picker-trigger {
  border-color: #6f9aa6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(169, 207, 223, 0.3);
}
/* The global control selector contains seven :not() clauses. Anchor Checkout
   to its form id so the page palette also wins for email/name/phone fields. */
body[data-page="checkout"] #checkoutForm input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not(.crop-number),
body[data-page="checkout"] #checkoutForm textarea,
body[data-page="checkout"] #checkoutForm select,
body[data-page="checkout"] #checkoutForm .country-picker-trigger {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #d8dfe4;
  border-radius: 5px;
  color: #172b45;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 7px rgba(23, 43, 69, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
}
body[data-page="checkout"] #checkoutForm input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not(.crop-number):hover,
body[data-page="checkout"] #checkoutForm textarea:hover,
body[data-page="checkout"] #checkoutForm select:hover,
body[data-page="checkout"] #checkoutForm .country-picker-trigger:hover {
  border-color: #b8c6d0;
  background: #ffffff;
  box-shadow:
    0 3px 9px rgba(23, 43, 69, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
body[data-page="checkout"] #checkoutForm input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not(.crop-number):focus,
body[data-page="checkout"] #checkoutForm textarea:focus,
body[data-page="checkout"] #checkoutForm select:focus,
body[data-page="checkout"] #checkoutForm .country-picker.is-open .country-picker-trigger {
  border-color: #6f9aa6;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(169, 207, 223, 0.24);
}
body[data-page="checkout"] .account-address-field-label > span,
body[data-page="checkout"] .checkout-address-field-heading .ka-field-icon {
  border: 0;
  color: #6f9aa6;
  background:
    radial-gradient(circle at 72% 20%, rgba(242, 191, 195, 0.56), transparent 38%),
    rgba(169, 207, 223, 0.28);
}
body[data-page="checkout"] .account-address-field:focus-within .account-address-field-label {
  color: #294764;
}
body[data-page="checkout"] .account-address-field:focus-within .account-address-field-label > span {
  color: #294764;
  background:
    radial-gradient(circle at 72% 20%, rgba(242, 191, 195, 0.72), transparent 38%),
    rgba(169, 207, 223, 0.5);
}
body[data-page="checkout"] .ka-scope .account-address-postal-button {
  min-height: 46px;
  padding: 8px 15px;
  border: 0;
  border-radius: 0;
  color: #294764;
  background:
    radial-gradient(ellipse at 18% 45%, rgba(169, 207, 223, 0.72), transparent 42%),
    radial-gradient(ellipse at 82% 50%, rgba(242, 191, 195, 0.62), transparent 46%),
    linear-gradient(96deg, rgba(237, 248, 252, 0.96), rgba(255, 243, 245, 0.94));
  clip-path: polygon(2% 8%, 96% 1%, 100% 16%, 98% 91%, 92% 100%, 3% 96%, 0 82%, 1% 16%);
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(41, 71, 100, 0.1));
  transform: rotate(-0.2deg);
}
@media (hover: hover){
body[data-page="checkout"] .ka-scope .account-address-postal-button:not(:disabled):hover {
    border: 0;
    color: #173c62;
    background:
      radial-gradient(ellipse at 18% 45%, rgba(169, 207, 223, 0.88), transparent 44%),
      radial-gradient(ellipse at 82% 50%, rgba(242, 191, 195, 0.78), transparent 48%),
      rgba(255, 254, 251, 0.96);
    filter: drop-shadow(0 7px 10px rgba(41, 71, 100, 0.13));
    transform: translateY(-1px) rotate(0.25deg);
  }
}
/* ===========================================================================
   24. Authentication — Kromade pastel watercolor editorial
   --------------------------------------------------------------------------
   The account dialog is shared by every public page.  Keep the existing auth
   flow and its animated panels, while presenting the entry point as a small
   piece of Kromade stationery: brand story on the left, clear form on the
   right, and a compact single-column composition on narrow screens.
   ========================================================================== */

#loginModal.modal-backdrop {
  padding: clamp(12px, 3vw, 34px);
  background: rgba(23, 43, 69, 0.46);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#loginModal .login-modal {
  --auth-navy: #172b45;
  --auth-blue: #6f9aa6;
  --auth-blue-pale: #a9cfdf;
  --auth-pink: #f2bfc3;
  --auth-peach: #f7d7bb;
  --auth-gold: #bc944d;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(390px, 1.28fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: min(880px, 100%);
  max-height: calc(100dvh - clamp(24px, 6vw, 68px));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(111, 154, 166, 0.3);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(255, 254, 251, 0.98) 0 34%, #ffffff 34% 100%);
  box-shadow:
    0 32px 84px rgba(23, 43, 69, 0.2),
    0 8px 24px rgba(59, 92, 111, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
#loginModal .login-modal::before,
#loginModal .login-modal::after {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  content: "";
}
#loginModal .login-modal::before {
  inset: 0 auto 0 0;
  width: 34%;
  border-right: 1px solid rgba(111, 154, 166, 0.2);
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") left top / 112% auto no-repeat,
    url("assets/catalog/page-loader-watercolor-bottom-right.webp") right bottom / 120% auto no-repeat,
    linear-gradient(155deg, rgba(248, 252, 253, 0.95), rgba(255, 250, 242, 0.96));
  opacity: 0.72;
}
#loginModal .login-modal::after {
  right: -44px;
  bottom: -34px;
  width: 250px;
  aspect-ratio: 706 / 547;
  background: url("assets/catalog/page-loader-watercolor-bottom-right.webp") right bottom / contain no-repeat;
  opacity: 0.16;
}
#loginModal .login-modal > :not(.modal-close) {
  position: relative;
  z-index: 1;
}
#loginModal .login-modal > .eyebrow {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  min-height: 0;
  margin: 0;
  padding: 38px 30px 0;
  color: #657786;
  font: 700 0.67rem/1.4 var(--font-ui);
  letter-spacing: 0.13em;
}
#loginModal .login-modal > .eyebrow::before {
  display: block;
  width: min(218px, 100%);
  height: 55px;
  border: 0;
  border-radius: 0;
  background: url("assets/brand/kromade-print-header-logo.webp") left center / contain no-repeat;
  box-shadow: none;
  content: "";
}
#loginModal .login-modal > h2 {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 12ch;
  margin: 20px 30px 34px;
  color: var(--auth-navy);
  font-family: "Noto Serif", "Klee One", Georgia, serif;
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.025em;
}
#loginModal .login-modal > h2::after {
  display: block;
  width: 62px;
  height: 4px;
  margin-top: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--auth-gold), rgba(242, 191, 195, 0.65));
  box-shadow: 18px 0 0 -1px rgba(169, 207, 223, 0.64);
  content: "";
  transform: rotate(-1.5deg);
}
#loginModal .login-modal > .auth-tabs {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  gap: 8px;
  margin: 34px 74px 0 36px;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(111, 154, 166, 0.25);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#loginModal .login-modal > .auth-tabs button {
  position: relative;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #707786;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0;
  paint-order: normal;
}
#loginModal .login-modal > .auth-tabs button:hover:not(.is-active),
#loginModal .login-modal > .auth-tabs button:focus-visible:not(.is-active) {
  border-color: rgba(169, 207, 223, 0.48);
  color: var(--auth-navy);
  background: rgba(247, 251, 253, 0.92);
  box-shadow: none;
  outline: none;
}
#loginModal .login-modal > .auth-tabs button.is-active,
#loginModal .login-modal > .auth-tabs button[data-mode="register"].is-active,
#loginModal .login-modal > .auth-tabs button[data-checkout-auth-mode="register"].is-active {
  border-color: rgba(111, 154, 166, 0.28);
  color: var(--auth-navy);
  background:
    linear-gradient(105deg, rgba(169, 207, 223, 0.42), rgba(242, 191, 195, 0.24) 58%, rgba(247, 215, 187, 0.2));
  box-shadow: inset 0 -2px 0 rgba(111, 154, 166, 0.56);
  transform: none;
}
#loginModal .login-modal > .auth-panel,
#loginModal .login-modal > .auth-panel-shell {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  margin: 20px 36px 36px;
}
#loginModal .auth-panel {
  gap: 15px;
}
#loginModal .auth-panel[data-auth-panel="register"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}
#loginModal .auth-panel[data-auth-panel="register"] > :is(
  .auth-country-slot,
  .registration-verification-card,
  .auth-submit-button,
  .primary-button.full
) {
  grid-column: 1 / -1;
}
#loginModal .login-modal label {
  gap: 7px;
  color: #445b6b;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
}
#loginModal .login-modal label:focus-within {
  color: var(--auth-navy);
}
#loginModal .login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#loginModal .country-picker-trigger {
  min-height: 48px;
  border: 1px solid rgba(111, 154, 166, 0.34);
  border-radius: 12px;
  color: var(--auth-navy);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 16px rgba(71, 102, 119, 0.05);
  font-family: var(--font-ui);
}
#loginModal .login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
#loginModal .country-picker-trigger:hover {
  border-color: rgba(111, 154, 166, 0.56);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(71, 102, 119, 0.07);
}
#loginModal .login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#loginModal .country-picker.is-open .country-picker-trigger {
  border-color: var(--auth-blue);
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(169, 207, 223, 0.28),
    0 9px 20px rgba(71, 102, 119, 0.08);
  outline: none;
}
#loginModal .password-visibility-toggle:hover,
#loginModal .password-visibility-toggle:focus-visible,
#loginModal .password-visibility-toggle.is-visible {
  color: var(--auth-navy);
  background: rgba(169, 207, 223, 0.22);
}
#loginModal .login-modal .primary-button.full {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid rgba(23, 43, 69, 0.08);
  border-radius: 13px;
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 0, rgba(169, 207, 223, 0.38), transparent 42%),
    linear-gradient(135deg, #365d7c, #294764 62%, #223c58);
  box-shadow: 0 12px 25px rgba(41, 71, 100, 0.2);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0;
}
#loginModal .login-modal .primary-button.full::after {
  width: 7px;
  height: 7px;
  margin-left: 3px;
}
#loginModal .login-modal .auth-submit-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 58px;
  padding: 9px 14px 9px 10px;
  border: 1px solid rgba(23, 43, 69, 0.08);
  border-radius: 14px;
  color: #ffffff;
  background:
    radial-gradient(circle at 13% 0, rgba(169, 207, 223, 0.42), transparent 39%),
    linear-gradient(135deg, #365d7c, #294764 62%, #223c58);
  box-shadow: 0 13px 28px rgba(41, 71, 100, 0.21);
}
#loginModal .login-modal .auth-login-submit,
#loginModal .login-modal .auth-register-submit {
  border-color: rgba(23, 43, 69, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 13% 0, rgba(169, 207, 223, 0.42), transparent 39%),
    linear-gradient(135deg, #365d7c, #294764 62%, #223c58);
  box-shadow: 0 13px 28px rgba(41, 71, 100, 0.21);
}
#loginModal .login-modal .auth-submit-icon,
#loginModal .login-modal .auth-login-submit .auth-submit-icon,
#loginModal .login-modal .auth-register-submit .auth-submit-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
#loginModal .login-modal .auth-submit-copy strong {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  -webkit-text-stroke: 0;
}
#loginModal .login-modal .auth-submit-copy small {
  color: rgba(255, 255, 255, 0.72);
}
#loginModal .login-modal .auth-submit-status {
  border-color: rgba(255, 255, 255, 0.58);
  background: #f6e5c5;
  box-shadow: 0 0 0 4px rgba(246, 229, 197, 0.12);
}
#loginModal .login-modal .text-button.full,
#loginModal .registration-verification-actions .text-button,
#loginModal .password-reset-back {
  color: #50798b;
}
#loginModal .login-modal > .modal-close {
  z-index: 4;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-color: rgba(111, 154, 166, 0.32);
  border-radius: 50%;
  color: var(--auth-navy);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 18px rgba(41, 71, 100, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (hover: hover) and (pointer: fine){
#loginModal .login-modal .primary-button.full:hover:not(:disabled),
  #loginModal .login-modal .primary-button.full:focus-visible,
  #loginModal .login-modal .auth-login-submit:hover:not(:disabled),
  #loginModal .login-modal .auth-login-submit:focus-visible,
  #loginModal .login-modal .auth-register-submit:hover:not(:disabled),
  #loginModal .login-modal .auth-register-submit:focus-visible {
    border-color: rgba(23, 43, 69, 0.04);
    color: #ffffff;
    background:
      radial-gradient(circle at 18% 0, rgba(242, 191, 195, 0.32), transparent 44%),
      linear-gradient(135deg, #416b88, #294764 62%, #1f3751);
    box-shadow: 0 17px 31px rgba(41, 71, 100, 0.25);
    outline: none;
    transform: translateY(-2px);
  }
#loginModal .login-modal .text-button.full:hover,
  #loginModal .login-modal .text-button.full:focus-visible,
  #loginModal .registration-verification-actions .text-button:hover,
  #loginModal .registration-verification-actions .text-button:focus-visible {
    color: var(--auth-navy);
    background: rgba(169, 207, 223, 0.18);
  }
#loginModal .login-modal > .modal-close:hover,
  #loginModal .login-modal > .modal-close:focus-visible {
    border-color: rgba(111, 154, 166, 0.56);
    color: var(--auth-navy);
    background: #ffffff;
    box-shadow:
      0 10px 22px rgba(41, 71, 100, 0.14),
      0 0 0 3px rgba(169, 207, 223, 0.16);
    transform: translateY(-1px);
  }
}
@media (max-width: 820px){
#loginModal.modal-backdrop {
    align-items: center;
    padding: 10px;
  }
#loginModal .login-modal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    width: min(540px, 100%);
    height: auto;
    max-height: calc(100dvh - 20px);
    background: #ffffff;
  }
#loginModal .login-modal::before {
    inset: 0 0 auto;
    width: 100%;
    height: 164px;
    border-right: 0;
    border-bottom: 1px solid rgba(111, 154, 166, 0.18);
    background:
      url("assets/catalog/page-loader-watercolor-top-left.webp") left top / 54% auto no-repeat,
      url("assets/catalog/page-loader-watercolor-bottom-right.webp") right bottom / 58% auto no-repeat,
      linear-gradient(145deg, #f8fcfd, #fffaf3);
    opacity: 0.64;
  }
#loginModal .login-modal::after {
    right: -34px;
    bottom: -24px;
    width: 190px;
    opacity: 0.13;
  }
#loginModal .login-modal > .eyebrow {
    grid-column: 1;
    grid-row: 1;
    gap: 10px;
    align-items: center;
    padding: 24px 64px 0;
    text-align: center;
  }
#loginModal .login-modal > .eyebrow::before {
    width: min(190px, 100%);
    height: 48px;
    background-position: center;
  }
#loginModal .login-modal > h2 {
    grid-column: 1;
    grid-row: 2;
    max-width: min(20ch, calc(100% - 80px));
    margin: 10px auto 18px;
    font-size: clamp(1.35rem, 5vw, 1.68rem);
    line-height: 1.24;
    text-align: center;
  }
#loginModal .login-modal > h2::after {
    margin: 13px auto 0;
  }
#loginModal .login-modal > .auth-tabs {
    grid-column: 1;
    grid-row: 3;
    margin: 14px 20px 0;
  }
#loginModal .login-modal > .auth-panel,
  #loginModal .login-modal > .auth-panel-shell {
    grid-column: 1;
    grid-row: 4;
    margin: 16px 20px 24px;
  }
#loginModal .login-modal > .modal-close {
    top: 14px;
    right: 14px;
  }
}
@media (max-width: 520px){
#loginModal.modal-backdrop {
    place-items: end center;
    padding: 8px;
  }
#loginModal .login-modal {
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
  }
#loginModal .login-modal::before {
    height: 148px;
  }
#loginModal .login-modal > .eyebrow {
    padding: 20px 54px 0;
    font-size: 0.61rem;
  }
#loginModal .login-modal > .eyebrow::before {
    width: min(168px, 100%);
    height: 43px;
  }
#loginModal .login-modal > h2 {
    max-width: calc(100% - 54px);
    margin-bottom: 13px;
    font-size: 1.32rem;
  }
#loginModal .login-modal > .auth-tabs {
    margin: 10px 16px 0;
    padding-bottom: 8px;
  }
#loginModal .login-modal > .auth-tabs button {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 0.72rem;
  }
#loginModal .login-modal > .auth-panel,
  #loginModal .login-modal > .auth-panel-shell {
    margin: 14px 16px 20px;
  }
#loginModal .auth-panel[data-auth-panel="register"] {
    grid-template-columns: minmax(0, 1fr);
  }
#loginModal .auth-panel[data-auth-panel="register"] > * {
    grid-column: 1;
  }
#loginModal .login-modal .auth-submit-button {
    min-height: 54px;
  }
}
@media (max-height: 650px) and (min-width: 821px){
#loginModal .login-modal {
    height: auto;
    max-height: calc(100dvh - 20px);
  }
#loginModal .login-modal > .eyebrow {
    padding-top: 26px;
  }
#loginModal .login-modal > .eyebrow::before {
    height: 48px;
  }
#loginModal .login-modal > .auth-tabs {
    margin-top: 24px;
  }
#loginModal .login-modal > .auth-panel,
  #loginModal .login-modal > .auth-panel-shell {
    margin-top: 16px;
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce){
#loginModal .login-modal,
  #loginModal .login-modal *,
  #loginModal .login-modal *::before,
  #loginModal .login-modal *::after {
    scroll-behavior: auto;
  }
}
/* ===========================================================================
   25. Authentication — compact watercolor stationery card
   --------------------------------------------------------------------------
   The login reference is a single centered card. The same composition is
   shared by login, registration and password recovery so switching modes does
   not feel like leaving the stationery set.
   ========================================================================== */

:is(#loginModal, #checkoutLoginModal).modal-backdrop {
  place-items: center;
  padding: 18px;
  background: rgba(255, 254, 251, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
:is(#loginModal, #checkoutLoginModal) .login-modal {
  display: block;
  width: min(508px, calc(100vw - 36px));
  height: auto;
  max-height: calc(100dvh - 36px);
  padding: 46px 106px 32px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(229, 231, 232, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 62px rgba(56, 63, 70, 0.14),
    0 6px 18px rgba(74, 105, 124, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
:is(#loginModal, #checkoutLoginModal) .login-modal::before {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") left top / 43% auto no-repeat,
    url("assets/catalog/page-loader-watercolor-bottom-right.webp") right bottom / 48% auto no-repeat;
  opacity: 0.34;
}
:is(#loginModal, #checkoutLoginModal) .login-modal::after {
  display: none;
}
:is(#loginModal, #checkoutLoginModal) .login-modal > .eyebrow,
:is(#loginModal, #checkoutLoginModal) .login-modal > .auth-tabs {
  display: none !important;
}
:is(#loginModal, #checkoutLoginModal) .login-modal > h2 {
  display: block;
  max-width: none;
  margin: 0;
  color: #172b45;
  font-family: "Noto Serif", "Klee One", Georgia, serif;
  font-size: 1.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
}
:is(#loginModal, #checkoutLoginModal) .login-modal > h2::after {
  display: block;
  width: 25px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 99px;
  background: #bc944d;
  box-shadow: none;
  content: "";
  transform: none;
}
:is(#loginModal, #checkoutLoginModal) .login-modal > .auth-panel,
:is(#loginModal, #checkoutLoginModal) .login-modal > .auth-panel-shell {
  display: block;
  min-width: 0;
  margin: 0;
}
:is(#loginModal, #checkoutLoginModal) .auth-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
}
:is(#loginModal, #checkoutLoginModal) .login-modal > .auth-panel {
  display: grid;
}
:is(#loginModal, #checkoutLoginModal) .auth-panel[hidden] {
  display: none !important;
}
:is(#loginModal, #checkoutLoginModal) .auth-panel-shell.is-animating {
  position: relative;
}
:is(#loginModal, #checkoutLoginModal) .auth-panel[data-auth-panel="register"] {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}
:is(#loginModal, #checkoutLoginModal) .auth-panel[data-auth-panel="register"] > * {
  grid-column: 1;
}
:is(#loginModal, #checkoutLoginModal) .auth-field-icon svg.ka-icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
}
:is(#loginModal, #checkoutLoginModal) .login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:is(#loginModal, #checkoutLoginModal) .country-picker-trigger {
  width: 100%;
  min-height: 42px;
  padding: 9px 40px 9px 42px;
  border: 1px solid #d8dfe4;
  border-radius: 5px;
  color: #172b45;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 7px rgba(23, 43, 69, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
}
:is(#loginModal, #checkoutLoginModal) .login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"])::placeholder {
  color: #8b96a2;
  opacity: 1;
}
:is(#loginModal, #checkoutLoginModal) .login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
:is(#loginModal, #checkoutLoginModal) .country-picker-trigger:hover {
  border-color: #b8c6d0;
  background: #ffffff;
  box-shadow:
    0 3px 9px rgba(23, 43, 69, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
:is(#loginModal, #checkoutLoginModal) .login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
:is(#loginModal, #checkoutLoginModal) .country-picker.is-open .country-picker-trigger {
  border-color: #6f9aa6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(169, 207, 223, 0.24);
  outline: none;
}
:is(#loginModal, #checkoutLoginModal) .password-visibility-toggle:hover,
:is(#loginModal, #checkoutLoginModal) .password-visibility-toggle:focus-visible,
:is(#loginModal, #checkoutLoginModal) .password-visibility-toggle.is-visible {
  color: #294764;
  background: rgba(169, 207, 223, 0.2);
}
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-submit-button,
:is(#loginModal, #checkoutLoginModal) .login-modal .primary-button.full {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 8px 18px;
  border: 1px solid rgba(41, 71, 100, 0.08);
  border-radius: 999px;
  color: #ffffff;
  background:
    linear-gradient(90deg, #315f7b 0%, #437c99 48%, #315f7b 100%);
  box-shadow: 0 8px 17px rgba(41, 71, 100, 0.2);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-login-submit,
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-register-submit {
  border-radius: 999px;
  background: linear-gradient(90deg, #315f7b 0%, #437c99 48%, #315f7b 100%);
  box-shadow: 0 8px 17px rgba(41, 71, 100, 0.2);
}
:is(#loginModal, #checkoutLoginModal) .login-modal .primary-button.full:not(.auth-submit-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-submit-icon,
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-submit-status,
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-submit-copy small {
  display: none;
}
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-submit-copy {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-submit-copy strong {
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
}
:is(#loginModal, #checkoutLoginModal) .login-modal .auth-submit-arrow {
  grid-column: 3;
  justify-self: start;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(#loginModal, #checkoutLoginModal) .auth-editorial-secondary,
:is(#loginModal, #checkoutLoginModal) .login-modal .text-button.full.auth-editorial-secondary,
:is(#loginModal, #checkoutLoginModal) .password-reset-back.auth-editorial-secondary {
  display: inline-flex;
  gap: 7px;
  width: calc(100% - 12px);
  min-height: 36px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  margin: 0 6px;
  padding: 7px 16px;
  border: 1px solid #294764;
  border-radius: 999px;
  color: #294764;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
:is(#loginModal, #checkoutLoginModal) .auth-country-slot {
  margin-bottom: 0;
}
:is(#loginModal, #checkoutLoginModal) .country-picker-trigger {
  min-height: 42px;
  padding-left: 14px;
}
:is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close {
  z-index: 4;
  top: 14px;
  right: 14px;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 50%;
  color: #88939d !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
:is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close svg.ka-icon {
  width: 15px;
  height: 15px;
}
@media (hover: hover) and (pointer: fine){
:is(#loginModal, #checkoutLoginModal) .login-modal .primary-button.full:hover:not(:disabled),
  :is(#loginModal, #checkoutLoginModal) .login-modal .primary-button.full:focus-visible,
  :is(#loginModal, #checkoutLoginModal) .login-modal .auth-login-submit:hover:not(:disabled),
  :is(#loginModal, #checkoutLoginModal) .login-modal .auth-login-submit:focus-visible,
  :is(#loginModal, #checkoutLoginModal) .login-modal .auth-register-submit:hover:not(:disabled),
  :is(#loginModal, #checkoutLoginModal) .login-modal .auth-register-submit:focus-visible {
    border-color: rgba(41, 71, 100, 0.08);
    color: #ffffff;
    background: linear-gradient(90deg, #294f69 0%, #39738f 48%, #294f69 100%);
    box-shadow: 0 10px 21px rgba(41, 71, 100, 0.24);
    outline: none;
    transform: translateY(-1px);
  }
:is(#loginModal, #checkoutLoginModal) .auth-editorial-secondary:hover,
  :is(#loginModal, #checkoutLoginModal) .auth-editorial-secondary:focus-visible,
  :is(#loginModal, #checkoutLoginModal) .login-modal .text-button.full.auth-editorial-secondary:hover,
  :is(#loginModal, #checkoutLoginModal) .login-modal .text-button.full.auth-editorial-secondary:focus-visible {
    border-color: #294764;
    color: #172b45;
    background: rgba(169, 207, 223, 0.16);
    box-shadow: none;
    outline: none;
    transform: none;
  }
:is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close:hover,
  :is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close:focus-visible {
    border: 0;
    color: #b43f4a !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
  }
:is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close:hover::before,
  :is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close:hover::after,
  :is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close:focus-visible::before,
  :is(#loginModal, #checkoutLoginModal) .login-modal > .modal-close:focus-visible::after {
    background: #b43f4a !important;
  }
}
@media (max-width: 560px){
:is(#loginModal, #checkoutLoginModal).modal-backdrop {
    place-items: center;
    padding: 10px;
  }
:is(#loginModal, #checkoutLoginModal) .login-modal {
    width: min(100%, 430px);
    max-height: calc(100dvh - 20px);
    padding: 39px 24px 25px;
    border-radius: 17px;
  }
:is(#loginModal, #checkoutLoginModal) .login-modal::before {
    height: 100%;
    background-size: 53% auto, 62% auto;
    opacity: 0.3;
  }
:is(#loginModal, #checkoutLoginModal) .login-modal > h2 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.42rem, 7vw, 1.68rem);
  }
:is(#loginModal, #checkoutLoginModal) .login-modal > .auth-panel,
  :is(#loginModal, #checkoutLoginModal) .login-modal > .auth-panel-shell {
    margin: 0;
  }
}
@media (max-width: 340px){
:is(#loginModal, #checkoutLoginModal).modal-backdrop {
    padding: 6px;
  }
:is(#loginModal, #checkoutLoginModal) .login-modal {
    width: 100%;
    max-height: calc(100dvh - 12px);
    padding: 36px 17px 22px;
  }
}
/* ==========================================================================
   Shared editorial form controls
   Checkout, Customer Care and Account use the same quiet stationery language
   as the sign-in modal: a fine grey-blue edge, almost-square corners, a soft
   paper surface and one consistent blue focus ring. Structural controls such
   as checkboxes, radios, file inputs and crop controls keep their own design.
   ========================================================================== */

:is(
  body[data-page="checkout"],
  body[data-page="support"],
  body[data-page="bug"],
  body[data-page="account"]
) {
  --editorial-field-border: #d8dfe4;
  --editorial-field-border-hover: #b8c6d0;
  --editorial-field-focus: #6f9aa6;
  --editorial-field-ring: rgba(169, 207, 223, 0.24);
  --editorial-field-ink: #172b45;
  --editorial-field-placeholder: #8b96a2;
  --editorial-field-paper: rgba(255, 255, 255, 0.9);
  --editorial-field-shadow:
    0 2px 7px rgba(23, 43, 69, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
body[data-page="checkout"] #checkoutForm :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not(.crop-number),
  textarea,
  select,
  .country-picker-trigger
),
body[data-page="support"] #app .care-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  textarea,
  select,
  .care-picker-trigger
),
body[data-page="bug"] #app .care-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  textarea,
  select,
  .care-picker-trigger
),
body[data-page="account"] #accountPageContent :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="date"]):not(.account-album-search-input),
  textarea,
  select,
  .country-picker-trigger
) {
  width: 100%;
  border: 1px solid var(--editorial-field-border);
  border-radius: 5px;
  color: var(--editorial-field-ink);
  background: var(--editorial-field-paper);
  box-shadow: var(--editorial-field-shadow);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  outline: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
body[data-page="checkout"] #checkoutForm :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not(.crop-number),
  select,
  .country-picker-trigger
),
body[data-page="support"] #app .care-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  select
),
body[data-page="bug"] #app .care-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  select
),
body[data-page="account"] #accountPageContent :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="date"]):not(.account-album-search-input),
  select,
  .country-picker-trigger
) {
  min-height: 42px;
  padding: 9px 14px;
}
body[data-page="checkout"] #checkoutForm textarea,
body[data-page="support"] #app .care-form-panel textarea,
body[data-page="bug"] #app .care-form-panel textarea,
body[data-page="account"] #accountPageContent textarea {
  padding: 12px 14px;
  line-height: 1.6;
}
body[data-page="checkout"] #checkoutForm :where(input, textarea)::placeholder,
body[data-page="support"] #app .care-form-panel :where(input, textarea)::placeholder,
body[data-page="bug"] #app .care-form-panel :where(input, textarea)::placeholder,
body[data-page="account"] #accountPageContent :where(input, textarea)::placeholder,
body[data-page="account"] #accountPageContent .account-album-search-input::placeholder {
  color: var(--editorial-field-placeholder);
  font-weight: 500;
  opacity: 1;
}
body[data-page="checkout"] #checkoutForm :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not(.crop-number),
  textarea,
  select,
  .country-picker-trigger
):hover,
body[data-page="support"] #app .care-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  textarea,
  select,
  .care-picker-trigger
):hover,
body[data-page="bug"] #app .care-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
  textarea,
  select,
  .care-picker-trigger
):hover,
body[data-page="account"] #accountPageContent :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="date"]):not(.account-album-search-input),
  textarea,
  select,
  .country-picker-trigger
):hover {
  border-color: var(--editorial-field-border-hover);
  background: #ffffff;
  box-shadow:
    0 3px 9px rgba(23, 43, 69, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
body[data-page="checkout"] #checkoutForm :where(input, textarea, select):focus,
body[data-page="checkout"] #checkoutForm .country-picker.is-open .country-picker-trigger,
body[data-page="support"] #app .care-form-panel :where(input, textarea, select):focus,
body[data-page="support"] #app .care-form-panel .care-picker-trigger:is(:focus-visible, [aria-expanded="true"]),
body[data-page="bug"] #app .care-form-panel :where(input, textarea, select):focus,
body[data-page="bug"] #app .care-form-panel .care-picker-trigger:is(:focus-visible, [aria-expanded="true"]),
body[data-page="account"] #accountPageContent :where(input, textarea, select):focus,
body[data-page="account"] #accountPageContent .country-picker.is-open .country-picker-trigger {
  border-color: var(--editorial-field-focus);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--editorial-field-ring);
  outline: none;
}
body[data-page="checkout"] #checkoutForm :where(input, textarea, select):disabled,
body[data-page="support"] #app .care-form-panel :where(input, textarea, select):disabled,
body[data-page="bug"] #app .care-form-panel :where(input, textarea, select):disabled,
body[data-page="account"] #accountPageContent :where(input, textarea, select):disabled {
  border-color: #dce3e7;
  color: #84909b;
  background: rgba(241, 246, 247, 0.94);
  box-shadow: none;
  cursor: not-allowed;
}
@media (max-width: 640px){
body[data-page="checkout"] #checkoutForm input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not(.crop-number),
  body[data-page="checkout"] #checkoutForm textarea,
  body[data-page="checkout"] #checkoutForm select,
  body[data-page="checkout"] #checkoutForm .country-picker-trigger,
  body[data-page="support"] #app .care-form-panel :where(input, textarea, select, .care-picker-trigger),
  body[data-page="bug"] #app .care-form-panel :where(input, textarea, select, .care-picker-trigger),
  body[data-page="account"] #accountPageContent input:not([type="checkbox"]):not([type="radio"]),
  body[data-page="account"] #accountPageContent textarea,
  body[data-page="account"] #accountPageContent select,
  body[data-page="account"] #accountPageContent .country-picker-trigger {
    font-size: 1rem;
  }
}
/* ==========================================================================
   26. Account and saved-address surfaces — Pastel Watercolor Editorial
   --------------------------------------------------------------------------
   The account area, its shared header menu and Checkout's signed-in address
   picker use the same paper, ink and painted-icon language as the current
   authentication and notification dialogs. Behaviour and DOM contracts stay
   unchanged; this section only replaces the older teal/raised presentation.
   ========================================================================== */

body[data-page="account"] #accountPageContent,
.ka-menu {
  --ka-ink: #172b45;
  --ka-deep: #172b45;
  --ka-muted: #60758a;
  --ka-muted-soft: #73869a;
  --ka-teal: #6f9aa6;
  --ka-teal-dark: #294764;
  --ka-cyan: #a9cfdf;
  --ka-magenta: #f2bfc3;
  --ka-yellow: #f6e5c5;
  --ka-violet: #7f759e;
  --ka-paper: #ffffff;
  --ka-paper-soft: #fbfdfd;
  --ka-paper-sunk: #f3f7f8;
  --ka-line: #e2e8eb;
  --ka-line-strong: #c8d7de;
  --ka-teal-soft: #eef6f8;
  --ka-shadow-sm: 0 8px 22px rgba(23, 43, 69, 0.065);
  --ka-shadow-md: 0 16px 36px rgba(23, 43, 69, 0.09);
  --ka-shadow-lg: 0 28px 72px rgba(23, 43, 69, 0.17);
  --ka-focus: 0 0 0 3px rgba(169, 207, 223, 0.3);
}
body[data-page="account"] #accountPageContent .ka-tile.is-danger,
body[data-page="account"] #accountPageContent .ka-empty.is-error .ka-empty-icon {
  color: #b43f4a;
  background-image: url("assets/ui/toast-icons/toast-brush-error.png");
}
body[data-page="account"] #accountPageContent .ka-nav-item.is-active {
  color: #172b45;
  border-color: rgba(169, 207, 223, 0.5);
  background:
    linear-gradient(90deg, rgba(239, 247, 250, 0.92), rgba(255, 247, 247, 0.88)),
    url("assets/ui/toast-icons/toast-brush-info.png") left center / 150px 72px no-repeat;
}
body[data-page="account"] #accountPageContent .ka-nav-item.is-active .ka-nav-icon {
  color: #294764;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / contain no-repeat;
}
body[data-page="account"] #accountPageContent .ka-nav-item.is-active .ka-nav-count {
  color: #294764;
  background: rgba(169, 207, 223, 0.24);
}
body[data-page="account"] #accountPageContent :is(.ka-field-icon, .account-address-modal-symbol) {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  color: #294764;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / contain no-repeat;
  box-shadow: none;
}
body[data-page="account"] #accountPageContent :is(.ka-field-icon, .account-address-modal-symbol) svg {
  width: 15px;
  height: 15px;
}
body[data-page="account"] #accountPageContent .ka-field-label,
body[data-page="account"] #accountPageContent .country-picker-label {
  color: #294764;
}
body[data-page="account"] #accountPageContent .ka-field:focus-within .ka-field-icon {
  color: #173c62;
  background-image: url("assets/ui/toast-icons/toast-brush-success.png");
}
body[data-page="account"] #accountPageContent .account-address-input,
body[data-page="account"] #accountPageContent .country-picker-trigger {
  min-height: 42px;
  border-color: #d8dfe4;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 7px rgba(23, 43, 69, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
body[data-page="account"] #accountPageContent input.account-address-input {
  height: 42px;
}
body[data-page="account"] #accountPageContent .account-address-postal-row .ka-btn {
  min-height: 42px;
}
body[data-page="account"] #accountPageContent :is(.ka-btn, .ka-icon-btn, .ka-nav-trigger) {
  border-radius: 7px;
  box-shadow: none;
}
body[data-page="account"] #accountPageContent .ka-btn-outline,
body[data-page="account"] #accountPageContent .ka-btn-ghost,
body[data-page="account"] #accountPageContent .ka-logout {
  border-color: rgba(169, 207, 223, 0.48);
  color: #294764;
  background:
    url("assets/ui/toast-icons/toast-brush-info.png") center / 130% 180% no-repeat,
    rgba(255, 255, 255, 0.92);
  box-shadow: none;
}
body[data-page="account"] #accountPageContent .ka-segmented button.is-active {
  color: #173c62;
  background:
    url("assets/ui/toast-icons/toast-brush-info.png") center / 132% 176% no-repeat,
    rgba(255, 255, 255, 0.94);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine){
body[data-page="account"] #accountPageContent :is(.ka-btn-outline, .ka-btn-ghost, .ka-logout):not(:disabled):hover {
    border-color: #6f9aa6;
    color: #172b45;
    background:
      url("assets/ui/toast-icons/toast-brush-info.png") center / 138% 188% no-repeat,
      #ffffff;
    transform: translateY(-1px) rotate(0.15deg);
  }
}
body[data-page="account"] .account-order-filter-modal-header .eyebrow {
  margin-bottom: 2px;
  color: #6f9aa6;
  font-family: var(--font-sans);
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}
body[data-page="account"] .account-order-filter-choice:not(.is-rating).is-active {
  border-color: #6f9aa6;
  color: #173c62;
  background:
    url("assets/ui/toast-icons/toast-brush-info.png") center / 145% 190% no-repeat,
    #ffffff;
  box-shadow: 0 0 0 2px rgba(169, 207, 223, 0.18);
}
/* Shared signed-in account menu ------------------------------------------------ */
.ka-menu {
  isolation: isolate;
  width: min(310px, calc(100vw - 24px));
  padding: 12px;
  overflow: hidden;
  border-color: rgba(169, 207, 223, 0.55);
  border-radius: 20px 20px 20px 7px;
  background:
    url("assets/catalog/page-loader-watercolor-top-left.webp") -72px -94px / 210px auto no-repeat,
    url("assets/catalog/page-loader-watercolor-bottom-right.webp") right -68px bottom -48px / 210px auto no-repeat,
    rgba(255, 254, 251, 0.98);
  box-shadow: 0 24px 62px rgba(23, 43, 69, 0.18);
}
.ka-menu::before {
  position: absolute;
  z-index: -1;
  top: 12px;
  right: -44px;
  width: 142px;
  height: 72px;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / contain no-repeat;
  content: "";
  opacity: 0.2;
  pointer-events: none;
  transform: rotate(-8deg);
}
.ka-menu .account-menu-links {
  gap: 1px;
}
.ka-menu .account-menu-link,
.ka-menu .account-menu-logout {
  min-height: 48px;
  border-radius: 6px;
  color: #172b45;
  background: transparent;
}
.ka-menu .account-menu-link + .account-menu-link {
  border-top: 1px solid rgba(169, 207, 223, 0.2);
}
.ka-menu .account-menu-link-icon,
.ka-menu .account-menu-logout-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  color: #294764;
  background: url("assets/ui/toast-icons/toast-brush-info.png") center / contain no-repeat;
  box-shadow: none;
}
.ka-menu .account-menu-link:nth-child(even) .account-menu-link-icon {
  background-image: url("assets/ui/toast-icons/toast-brush-success.png");
}
.ka-menu .account-menu-link:nth-child(3n) .account-menu-link-icon {
  background-image: url("assets/ui/toast-icons/toast-brush-warning.png");
}
.ka-menu .account-menu-logout {
  border-color: rgba(242, 191, 195, 0.55);
  color: #93404a;
  background: rgba(255, 251, 251, 0.72);
  box-shadow: none;
}
.ka-menu .account-menu-logout-icon {
  color: #a23e49;
  background-image: url("assets/ui/toast-icons/toast-brush-error.png");
}
@media (hover: hover) and (pointer: fine){
.ka-menu .account-menu-link:hover,
  .ka-menu .account-menu-link:focus-visible {
    color: #172b45;
    background:
      linear-gradient(90deg, rgba(237, 247, 251, 0.88), rgba(255, 246, 247, 0.78)),
      url("assets/ui/toast-icons/toast-brush-info.png") left center / 145px 72px no-repeat;
  }
.ka-menu .account-menu-link:hover .account-menu-link-icon,
  .ka-menu .account-menu-link:focus-visible .account-menu-link-icon {
    color: #294764;
    background-color: transparent;
    transform: rotate(-4deg) scale(1.05);
  }
.ka-menu .account-menu-logout:hover,
  .ka-menu .account-menu-logout:focus-visible {
    border-color: rgba(216, 135, 144, 0.78);
    color: #8f313c;
    background:
      url("assets/ui/toast-icons/toast-brush-error.png") left center / 150px 74px no-repeat,
      rgba(255, 247, 247, 0.88);
    box-shadow: none;
  }
}