/* 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-thumb: #2da99b;
  --scrollbar-thumb-hover: #ef8a78;
  --scrollbar-track: #edf8f6;
  --font-ui: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-brand: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
}
* {
  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-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
  border-radius: 999px;
  background-color: var(--scrollbar-track);
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
}
*::-webkit-scrollbar-thumb {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--scrollbar-thumb);
  background-clip: content-box;
  box-shadow: inset 0 0 0 1px rgba(5, 104, 95, 0.08);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb);
  box-shadow: inset 0 0 0 1px rgba(157, 68, 54, 0.08);
}
@keyframes kromadeNativeScrollbarSweep {
  0%,
  100% {
    background: var(--scrollbar-thumb);
  }
  16% {
    background: linear-gradient(
      135deg,
      #35b9c7 0%,
      #f6c852 33%,
      #ec6386 66%,
      #8069d7 100%
    );
    background-size: 280% 280%;
    background-position: 0% 0%;
  }
  72% {
    background: linear-gradient(
      135deg,
      #35b9c7 0%,
      #f6c852 33%,
      #ec6386 66%,
      #8069d7 100%
    );
    background-size: 280% 280%;
    background-position: 100% 100%;
  }
}
@media (hover: hover) and (min-width: 641px){
*::-webkit-scrollbar:hover {
    width: 9px;
    height: 9px;
  }
*::-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-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(5, 104, 95, 0.08),
    0 2px 7px rgba(10, 112, 102, 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(53, 185, 199, 0.95) 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 {
    width: 9px;
  }
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover .page-scrollbar-thumb {
    width: 7px;
    box-shadow:
      inset 0 0 0 1px rgba(5, 104, 95, 0.08),
      0 3px 10px rgba(10, 112, 102, 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);
}
.signup-button {
  border: 1px solid #07847a;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(135deg, #20b3a3, #087a72);
  color: white;
  box-shadow:
    0 9px 22px rgba(8, 122, 114, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.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;
  }
}
.signup-button:hover {
  border-color: #056d66;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(135deg, #159f92, #066b64);
  box-shadow:
    0 13px 28px rgba(8, 122, 114, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.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 {
  display: none;
}
.view.is-active {
  display: block;
}
.studio-intro {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(360px, 1.22fr);
  gap: clamp(20px, 4vw, 46px);
  align-items: center;
  margin-bottom: 28px;
  padding: clamp(10px, 2vw, 18px) 0 10px;
}
.intro-copy {
  max-width: 560px;
}
.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;
}
.intro-copy h1,
.page-heading h1 {
  max-width: 12ch;
  font-size: clamp(2.3rem, 5.1vw, 4.9rem);
}
.brand-headline {
  font-family: var(--font-brand);
  font-weight: 900;
  line-height: 0.95;
}
.brand-headline span {
  display: block;
}
.brand-headline span:first-child {
  color: var(--ink);
}
.brand-headline span:last-child {
  width: max-content;
  max-width: 100%;
  color: var(--teal-dark);
  background: linear-gradient(90deg, var(--teal-dark), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-copy p:last-child,
.page-heading p {
  max-width: 650px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}
.intro-visual {
  margin: 0;
  min-width: 0;
}
.intro-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.builder-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  grid-template-areas:
    "service preview"
    "options preview"
    "thong-tin thong-tin";
  gap: 14px;
  align-items: start;
}
.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;
}
.service-panel {
  grid-area: service;
  position: relative;
  overflow: visible;
}
.preview-panel {
  grid-area: preview;
}
/* Ô lưới của hộp Thông tin sản phẩm. Tên cũ là `checkout-panel` / vùng
   `checkout` — tàn dư từ khi form thanh toán còn nằm ngay trên trang đặt in.
   Cái tên đó đã gây một lỗi thật: danh sách mốc cuộn tự động trỏ tới
   `.product-info-panel`, tức đi tìm một box thanh toán mà trang này không có. */
.product-info-panel {
  grid-area: thong-tin;
}
/* Hộp Thông tin sản phẩm hiện ra.
   ---------------------------------------------------------------------------
   Hộp trôi lên một quãng ngắn rồi rõ dần; các mục bên trong nối theo, mỗi mục
   trễ thêm 60ms. Cả hai chỉ chạy đúng lúc hộp vừa xuất hiện hoặc vừa đổi nội
   dung — app.js gắn lớp is-hien-ra ở đúng hai dịp đó rồi gỡ ra, chứ không để
   nó bám lại. */
.product-info-panel.is-hien-ra {
  animation: thong-tin-hien 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.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-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(134, 196, 116, 0.14), transparent 34%),
    var(--paper);
}
.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 là một hàng dọc độc lập, vì vậy luôn dùng trọn bề ngang
   của box. Tỷ lệ phần trăm chỉ có ý nghĩa khi ảnh đứng cạnh chữ trên desktop. */
.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: 100%;
  max-width: 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 {
    /* Phần trăm do quản trị đặt dùng để chia ảnh/chữ trên desktop. Trên mobile
       cột đã xếp dọc nên ảnh cần dùng hết bề ngang, tránh thumbnail nhỏ lọt
       thỏm giữa một box dài. */
    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;
}
.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-row.is-confirmed,
.admin-support-row.is-in_progress {
  --admin-record-bg: #f3f7ff;
  --admin-record-hover-bg: #e8f0ff;
  --admin-record-accent: #5d84c8;
}
.admin-order-row.is-printing {
  --admin-record-bg: #f8f4ff;
  --admin-record-hover-bg: #f0e8ff;
  --admin-record-accent: #8767b5;
}
.admin-order-row.is-shipping {
  --admin-record-bg: #fff7ed;
  --admin-record-hover-bg: #ffedd9;
  --admin-record-accent: #c97731;
}
.admin-order-row.is-completed,
.admin-support-row.is-closed {
  --admin-record-bg: #effaf7;
  --admin-record-hover-bg: #e0f6f0;
  --admin-record-accent: #17998f;
}
.admin-order-row.is-cancelled {
  --admin-record-bg: #fff4f5;
  --admin-record-hover-bg: #ffe8eb;
  --admin-record-accent: #c3515a;
}
.admin-order-origin.is-account {
  color: #087d76;
  background: #dff6f1;
}
.admin-order-origin.is-guest {
  color: #8d6417;
  background: #fff0c9;
}
.admin-record-state.is-confirmed { color: #456db0; background: #eaf1ff; }
.admin-record-state.is-printing { color: #7556a8; background: #f0eaff; }
.admin-record-state.is-shipping { color: #a35b1e; background: #fff0df; }
.admin-record-state.is-completed { color: var(--teal-dark); background: #dff6f1; }
.admin-record-state.is-cancelled { color: #a53d46; background: #ffe8ea; }
.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-edit-control.is-editing input,
.admin-order-edit-control.is-editing textarea {
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(19, 151, 143, 0.1);
}
.admin-order-edit-control.is-note {
  align-items: start;
}
/* Luồng đặt hàng mới không tạo ảnh tham khảo. Khi chỉ còn ảnh gốc, cho thẻ
   chiếm trọn hàng thay vì để lại một nửa khoảng trống cho box đã được ẩn. */
.admin-order-assets.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.admin-order-asset:not(.is-empty) .admin-order-asset-preview {
  grid-row: 1 / span 2;
}
.admin-order-copy-field.is-wide {
  grid-column: 1 / -1;
}
.admin-order-copy-field.is-copied {
  border-color: var(--teal);
  background: #e6f7f4;
}
.admin-login-card > p:not(.eyebrow) {
  margin-bottom: 20px;
  color: var(--muted);
  line-height: 1.65;
}
.checkout-page {
  min-height: 100vh;
  background: var(--paper-soft);
}
.checkout-account-link {
  text-decoration: none;
}
body.checkout-auth-modal-open {
  overflow: hidden;
}
.checkout-auth-error {
  margin-top: 2px;
}
.checkout-app {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0 70px;
}
.checkout-page-heading {
  max-width: 760px;
  margin-bottom: 22px;
}
.checkout-edit-back-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  margin: 0;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(18, 139, 128, 0.24);
  border-radius: 16px;
  color: #076f68;
  background:
    radial-gradient(circle at 10% 12%, rgba(53, 185, 199, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 249, 246, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 24px rgba(16, 100, 93, 0.1);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}
.checkout-edit-back-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -55% auto -55% -22%;
  width: 46%;
  transform: skewX(-15deg) translateX(-38%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms ease, opacity 220ms ease;
}
.checkout-edit-back-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 51px;
  right: 15px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #35b9c7 0 25%, #f6c852 25% 50%, #ec6386 50% 75%, #8069d7 75% 100%);
  opacity: 0.72;
  transform: scaleX(0.3);
  transform-origin: right center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  pointer-events: none;
}
.checkout-edit-back-button svg {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(145deg, #22b4a6, #08776e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 7px 16px rgba(8, 119, 110, 0.22);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}
.checkout-edit-back-button > span {
  position: relative;
  z-index: 2;
  padding-bottom: 3px;
}
.checkout-edit-back-button:hover,
.checkout-edit-back-button:focus-visible {
  border-color: rgba(10, 139, 127, 0.42);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 14px 29px rgba(16, 100, 93, 0.15);
  transform: translateY(-2px);
}
.checkout-edit-back-button:hover::before,
.checkout-edit-back-button:focus-visible::before {
  transform: skewX(-15deg) translateX(285%);
  opacity: 0.82;
}
.checkout-edit-back-button:hover::after,
.checkout-edit-back-button:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}
.checkout-edit-back-button:hover svg,
.checkout-edit-back-button:focus-visible svg {
  transform: translateX(-2px) rotate(-4deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 9px 19px rgba(8, 119, 110, 0.27);
}
.checkout-edit-back-button:focus-visible {
  outline: 2px solid rgba(18, 151, 138, 0.36);
  outline-offset: 3px;
}
.checkout-edit-back-button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}
.checkout-edit-back-button:disabled::before,
.checkout-edit-back-button:disabled::after,
.checkout-edit-back-button:disabled svg {
  transform: none;
}
@media (prefers-reduced-motion: reduce){
.checkout-edit-back-button,
  .checkout-edit-back-button::before,
  .checkout-edit-back-button::after,
  .checkout-edit-back-button svg {
    transition-duration: 0.01ms;
  }
}
.checkout-page-heading h1 {
  margin-bottom: 8px;
}
.checkout-page-heading > p:last-child {
  color: var(--muted);
  line-height: 1.65;
}
/* Hộp ảnh sản phẩm ở cột trái đã bỏ, nên trang còn đúng một cột: chính form
   thanh toán. Giữ max-width để dòng chữ không kéo dài hết màn hình rộng. */
.checkout-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 760px;
  margin-inline: auto;
}
.checkout-payment-form,
.checkout-missing-draft {
  padding: 20px;
}
.checkout-payment-form {
  padding: 26px;
  border-color: rgba(27, 112, 105, 0.16);
  background:
    radial-gradient(circle at 100% 0, rgba(30, 181, 165, 0.06), transparent 28%),
    linear-gradient(155deg, #ffffff 0%, #fcfffe 72%, #f5fbf9 100%);
  box-shadow: 0 20px 48px rgba(25, 73, 70, 0.08);
}
.checkout-payment-form .panel-heading {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(38, 96, 91, 0.1);
}
.checkout-panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.checkout-panel-heading-row .eyebrow {
  min-width: 0;
  margin: 0;
}
.checkout-payment-form .panel-heading h2 {
  margin-top: 5px;
  letter-spacing: -0.025em;
}
.checkout-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 16px;
  row-gap: 18px;
}
.checkout-form-details {
  display: contents;
}
.checkout-form-details[hidden],
.checkout-payment-completion[hidden] {
  display: none;
}
.checkout-payment-completion {
  display: grid;
  gap: 12px;
}
.checkout-payment-form.is-guest-email-verified .checkout-form-details > *,
.checkout-payment-form.is-guest-email-verified .checkout-payment-completion {
  animation: checkoutGuestDetailsReveal 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes checkoutGuestDetailsReveal {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.checkout-form-grid label {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}
.checkout-form-grid > label:not(.checkout-wide-field) input,
.checkout-form-details > label:not(.checkout-wide-field) input,
.checkout-email-stage input {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding-inline: 14px;
  border-color: rgba(39, 104, 99, 0.22);
  border-radius: 14px;
  background: rgba(251, 254, 253, 0.94);
}
.checkout-form-grid textarea,
.checkout-form-grid select {
  border-color: rgba(39, 104, 99, 0.22);
  border-radius: 14px;
  background: rgba(251, 254, 253, 0.94);
}
.checkout-form-grid textarea {
  padding: 13px 14px;
  line-height: 1.55;
  resize: vertical;
}
.checkout-quantity-field {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
}
.checkout-quantity-title {
  font-size: 0.82rem;
  font-weight: 800;
}
.checkout-quantity-stepper {
  display: grid;
  grid-template-columns: 48px minmax(112px, 1fr) 48px;
  gap: 7px;
  align-items: center;
  width: 100%;
  max-width: 250px;
}
.checkout-form-grid .checkout-quantity-step-button,
.total-step .checkout-quantity-step-button {
  width: 48px;
  height: 48px;
  border-color: rgba(39, 104, 99, 0.22);
  border-radius: 14px;
  color: #176f68;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.92), transparent 52%),
    linear-gradient(180deg, #f7fffd, #e8f7f4);
  box-shadow:
    0 7px 15px rgba(24, 86, 80, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.checkout-form-grid .checkout-quantity-step-button:hover:not(:disabled),
.checkout-form-grid .checkout-quantity-step-button:focus-visible,
.total-step .checkout-quantity-step-button:hover:not(:disabled),
.total-step .checkout-quantity-step-button:focus-visible {
  border-color: rgba(19, 155, 143, 0.68);
  color: #075f58;
  background: linear-gradient(180deg, #ffffff, #dcf4ef);
  box-shadow: 0 10px 20px rgba(8, 119, 110, 0.14);
  outline: none;
  transform: translateY(-2px);
}
.checkout-form-grid .checkout-quantity-step-button:active:not(:disabled),
.total-step .checkout-quantity-step-button:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
.checkout-form-grid .checkout-quantity-number-wrap,
.total-step .checkout-quantity-number-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(2ch, 1fr) auto;
  align-content: center;
  align-items: center;
  align-self: stretch;
  gap: 7px;
  min-height: 48px;
  padding: 0 12px;
  border-color: rgba(39, 104, 99, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 250, 248, 0.96));
  box-shadow:
    0 7px 15px rgba(24, 86, 80, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.checkout-form-grid .checkout-quantity-number-wrap:focus-within,
.total-step .checkout-quantity-number-wrap:focus-within {
  border-color: var(--teal);
  box-shadow:
    0 0 0 3px rgba(19, 155, 143, 0.14),
    0 9px 18px rgba(24, 86, 80, 0.07);
}
.checkout-quantity-short-label,
.checkout-quantity-unit {
  color: #78908d;
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}
.checkout-form-grid .checkout-quantity-number,
.total-step .checkout-quantity-number {
  justify-self: stretch;
  min-width: 2ch;
  padding: 0;
  color: #174b47;
  font-size: 0.92rem;
  text-align: center;
}
.checkout-quantity-hint {
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.4;
}
/* Mục Tổng ở cuối box Dịch vụ.
   ---------------------------------------------------------------------------
   Ô số lượng dùng lại nguyên bộ lớp .checkout-quantity-* của trang thanh toán —
   những quy tắc trước đây khoá cứng vào .checkout-form-grid nay nhận thêm
   .total-step, nên hai nơi trông và bấm y hệt nhau mà không có bản sao thứ hai
   của cùng một kiểu dáng. */
/* Ô còn trống bị rung khi khách bấm vào khung xem trước đang khoá.
   ---------------------------------------------------------------------------
   Lắc ngang biên độ nhỏ rồi tắt dần, kèm một quầng sáng cùng màu nhấn: đủ để mắt
   bắt được chỗ cần bấm mà không thành một cú giật khó chịu. Không đổi màu chữ
   hay viền thành đỏ — đây là lời nhắc, không phải báo lỗi. */
.size-picker.is-nhac {
  animation: nhac-o-trong 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@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);
  }
}
@media (prefers-reduced-motion: reduce){
.size-picker.is-nhac {
    animation: none;
  }
}
/* Tách khỏi khối Chọn kích thước ngay trên. .service-panel là khối thường có
   đệm nên lề này không bị nuốt: đúng 14px giữa hai khối. */
.total-step {
  margin-top: 14px;
}
/* Nút "Bước tiếp theo" dưới box Tổng.
   ---------------------------------------------------------------------------
   Chỉ tồn tại ở bố cục một cột. Ở hai cột, khung xem trước đã nằm ngay bên
   cạnh nên không có gì để cuộn tới, và một nút "đi tiếp" khi chẳng phải đi đâu
   chỉ làm khách phân vân.

   Mặc định display:none, mở lại trong media query bên dưới — viết như vậy thì
   thuộc tính hidden do JS đặt vẫn thắng, vì luật mở có kèm :not([hidden]). */
.next-step-button {
  display: none;
}
@media (max-width: 949.98px){
.next-step-button:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--service-accent, var(--teal));
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--service-accent, var(--teal)) 30%, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  }
.next-step-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Mũi tên nhích xuống rồi về, đủ để mắt hiểu nút này đưa xuống dưới trang
       chứ không mở thêm một hộp nào. */
    animation: next-step-nhun 2.4s ease-in-out infinite;
  }
/* Chưa chọn đủ tùy chọn: nút vẫn đứng đó cho khách biết còn một bước nữa,
     nhưng xám lại và không bấm được. Giấu hẳn thì mỗi lần chọn xong một tùy chọn
     lại thấy trang mọc thêm một nút, đọc như trang đang tự đổi. */
  .next-step-button:disabled,
  .next-step-button.is-disabled {
    background: color-mix(in srgb, var(--ink) 16%, var(--paper));
    color: var(--muted);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
  }
.next-step-button:disabled svg,
  .next-step-button.is-disabled svg {
    animation: none;
  }
.next-step-button:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 9px 18px color-mix(in srgb, var(--service-accent, var(--teal)) 38%, transparent);
  }
.next-step-button:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--service-accent, var(--teal)) 30%, transparent);
  }
.next-step-button:focus-visible {
    outline: 2px solid var(--service-accent, var(--teal));
    outline-offset: 3px;
  }
}
@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;
  }
}
/* Box đã được dựng đủ nội dung khi còn ẩn, rồi mở theo đúng chiều cao vừa đo.
   max-height làm phần dưới thật sự được đẩy xuống dần; clip-path giữ mép mở sắc
   nét từ trên xuống thay vì cả khối cùng mờ hiện. */
.total-step.is-opening {
  overflow: hidden;
  transform-origin: top;
  animation: totalStepOpenDown 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
@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);
  }
}
/* Chưa chọn dịch vụ thì chưa có gì để tính. Cần quy tắc riêng vì .option-group
   đặt display: grid, mà display bao giờ cũng thắng thuộc tính hidden. */
.total-step[hidden] {
  display: none;
}
.total-step .checkout-quantity-stepper {
  max-width: none;
}
.total-lines {
  display: grid;
  gap: 5px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.total-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.78rem;
}
.total-line span {
  color: var(--muted);
}
.total-line strong {
  font-variant-numeric: tabular-nums;
}
/* Dòng cuối là số khách thật sự phải trả, nên nó to và đậm hơn hẳn hai dòng
   trên — nhìn một cái là biết đâu là con số quan trọng. */
.total-line.is-grand {
  align-items: center;
  margin-top: 2px;
  font-size: 0.86rem;
}
.total-line.is-grand span {
  color: var(--ink);
  font-weight: 800;
}
.total-line.is-grand strong {
  font-size: 1.12rem;
  font-weight: 900;
}
/* 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] {
  display: inline-block;
  transition: transform 0.18s ease, color 0.18s ease;
}
[data-tong-so].is-counting-up {
  transform: translateY(-1px);
  color: #2f8f5b;
}
[data-tong-so].is-counting-down {
  transform: translateY(1px);
  color: #c2653f;
}
@media (prefers-reduced-motion: reduce){
.total-step.is-opening {
    animation: none;
  }
[data-tong-so] {
    transition: none;
  }
[data-tong-so].is-counting-up,
  [data-tong-so].is-counting-down {
    transform: none;
    color: inherit;
  }
}
.checkout-email-field {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 13px;
  min-width: 0;
  padding: 19px;
  border: 1px solid rgba(18, 143, 132, 0.19);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(38, 190, 173, 0.11), transparent 34%),
    linear-gradient(145deg, #ffffff, #f2fbf8);
  box-shadow:
    0 14px 30px rgba(20, 91, 84, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.checkout-email-field > label {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}
.checkout-email-gate-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}
.checkout-email-gate-icon {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #1db3a5, #087b72);
  box-shadow:
    0 10px 20px rgba(8, 123, 114, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.checkout-email-gate-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.checkout-email-gate-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.checkout-email-gate-heading strong {
  color: #234d49;
  font-size: 0.78rem;
  line-height: 1.4;
}
.checkout-email-gate-heading small {
  color: #738886;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.45;
}
.checkout-email-stage-shell {
  position: relative;
  display: grid;
  min-width: 0;
  /* Giữ vùng cắt cho animation đổi email → mã, nhưng đẩy biên cắt ra 4px để
     không xén nét bo và focus ring của input nằm sát mép nội dung. */
  margin: -4px;
  padding: 4px;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}
.checkout-email-stage-shell[hidden],
.checkout-email-verification-meta[hidden],
.checkout-email-trust-note[hidden],
.checkout-verified-email-card[hidden] {
  display: none;
}
.checkout-email-stage {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  min-width: 0;
  transform-origin: left center;
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(.2, .82, .22, 1),
    clip-path 420ms cubic-bezier(.2, .82, .22, 1);
}
.checkout-email-stage input {
  min-width: 0;
}
.checkout-email-code-stage {
  opacity: 0;
  transform: translateX(28px) scale(.96);
  clip-path: inset(0 0 0 32%);
  pointer-events: none;
}
.checkout-email-field[data-state="pending"] .checkout-email-address-stage {
  opacity: 0;
  transform: translateX(-18px) scaleX(.58);
  clip-path: inset(0 46% 0 0);
  pointer-events: none;
}
.checkout-email-field[data-state="pending"] .checkout-email-code-stage {
  opacity: 1;
  transform: translateX(0) scale(1);
  clip-path: inset(0);
  pointer-events: auto;
}
.checkout-email-action {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(7, 136, 127, 0.22);
  border-radius: 14px;
  background: rgba(231, 248, 244, 0.88);
  color: var(--teal-dark);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(8, 119, 110, 0.07);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}
.checkout-email-action:hover:not(:disabled) {
  border-color: rgba(7, 136, 127, 0.4);
  background: #dff5f0;
  transform: translateY(-1px);
  box-shadow: 0 9px 18px rgba(8, 119, 110, 0.11);
}
.checkout-email-field[data-state="pending"] .checkout-email-action {
  border-color: #087f76;
  background: linear-gradient(135deg, #129b8f, #087f76);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 127, 118, 0.16);
}
.checkout-email-field[data-state="verified"] .checkout-email-action,
.checkout-email-field[data-state="account"] .checkout-email-action {
  border-color: rgba(7, 136, 127, 0.18);
  background: #e9f8f3;
  color: #087a71;
  opacity: 1;
}
.checkout-email-field[data-state="verified"] .checkout-email-action::before,
.checkout-email-field[data-state="account"] .checkout-email-action::before {
  content: "✓";
  margin-right: 5px;
}
.checkout-email-verification-meta {
  display: grid;
  gap: 5px;
  min-height: 19px;
  padding-inline: 2px;
}
.checkout-email-verification-meta p {
  margin: 0;
  color: #718486;
  font-size: 0.61rem;
  font-weight: 700;
  line-height: 1.5;
}
.checkout-email-field[data-state="verified"] .checkout-email-verification-meta p,
.checkout-email-field[data-state="account"] .checkout-email-verification-meta p {
  color: #087a71;
}
.checkout-email-verification-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.checkout-email-verification-actions[hidden] {
  display: none;
}
.checkout-email-verification-actions button {
  min-height: 26px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 0.61rem;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: rgba(8, 127, 118, 0.22);
  text-underline-offset: 3px;
}
.checkout-email-verification-actions button:disabled {
  color: #9aa9aa;
  cursor: wait;
}
.checkout-email-trust-note {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(35, 112, 105, 0.13);
  border-radius: 13px;
  color: #667d7a;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.61rem;
  font-weight: 700;
  line-height: 1.6;
}
.checkout-email-trust-note > span:first-child {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #087a71;
  background: #dff4ef;
  font-family: Georgia, serif;
  font-size: 0.7rem;
  font-weight: 900;
}
.checkout-verified-email-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.checkout-verified-email-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #20b5a6, #087e75);
  box-shadow: 0 10px 20px rgba(8, 126, 117, 0.17);
  font-size: 1rem;
  font-weight: 900;
}
.checkout-verified-email-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.checkout-verified-email-copy small {
  color: #718683;
  font-size: 0.56rem;
  font-weight: 800;
}
.checkout-verified-email-copy strong {
  overflow: hidden;
  color: #175c56;
  font-size: 0.75rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-verified-email-card > button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(8, 126, 117, 0.2);
  border-radius: 11px;
  color: #087a71;
  background: #edf9f6;
  font: inherit;
  font-size: 0.61rem;
  font-weight: 850;
  cursor: pointer;
}
.checkout-verified-email-card > button:hover,
.checkout-verified-email-card > button:focus-visible {
  border-color: rgba(8, 126, 117, 0.42);
  background: #dff4ef;
  outline: none;
}
.checkout-email-field[data-state="verified"] {
  padding-block: 15px;
  border-color: rgba(8, 126, 117, 0.24);
  background:
    radial-gradient(circle at 100% 0, rgba(37, 188, 170, 0.1), transparent 35%),
    linear-gradient(145deg, #fafffd, #edf9f5);
}
.checkout-email-field[data-state="verified"] .checkout-email-gate-heading {
  display: none;
}
.checkout-wide-field {
  grid-column: 1 / -1;
}
.checkout-account-address-panel {
  display: grid;
  gap: 14px;
  padding: 17px;
  border: 1px solid rgba(19, 155, 143, 0.24);
  border-radius: 17px;
  background: linear-gradient(145deg, #f7fcfb, #eef9f6);
  box-shadow: 0 10px 24px rgba(18, 102, 92, 0.06);
}
.checkout-account-address-panel[hidden] {
  display: none;
}
.checkout-account-address-heading,
.checkout-selected-address-heading,
.checkout-address-editor-actions > div {
  display: flex;
  align-items: center;
}
.checkout-account-address-heading {
  justify-content: space-between;
  gap: 14px;
}
.checkout-account-address-heading > div {
  display: grid;
  gap: 3px;
}
.checkout-account-address-heading strong {
  font-size: 0.88rem;
}
.checkout-account-address-heading small {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.45;
}
.checkout-account-address-heading > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: #dff3ee;
  font-size: 0.62rem;
  font-weight: 900;
}
.checkout-selected-address-card {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid #b9ddd6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(24, 86, 80, 0.06);
}
.checkout-selected-address-card[hidden] {
  display: none;
}
.checkout-selected-address-card:focus {
  outline: 3px solid rgba(19, 155, 143, 0.15);
}
.checkout-selected-address-heading {
  justify-content: space-between;
  gap: 12px;
}
.checkout-selected-address-card > span,
.checkout-selected-address-card address {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.55;
}
.checkout-account-address-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}
.checkout-address-actions-left,
.checkout-address-actions-right {
  display: flex;
  gap: 9px;
  align-items: stretch;
}
.checkout-address-actions-left {
  justify-content: flex-start;
}
.checkout-address-actions-right {
  justify-content: flex-end;
}
.checkout-address-action {
  position: relative;
  display: inline-grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 7px 12px 7px 8px;
  overflow: hidden;
  border: 1px solid rgba(33, 111, 102, 0.18);
  border-radius: 15px;
  color: #284743;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 8px 18px rgba(24, 86, 80, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.checkout-address-action[hidden] {
  display: none;
}
.checkout-address-action::after {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  content: "";
  inset: auto -27px -29px auto;
  background: currentColor;
  opacity: 0.055;
  pointer-events: none;
}
.checkout-address-action-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  transition: transform 180ms ease, background 180ms ease;
}
.checkout-address-action-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.checkout-address-action-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.checkout-address-action-copy strong,
.checkout-address-action-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-address-action-copy strong {
  color: inherit;
  font-size: 0.66rem;
  line-height: 1.35;
}
.checkout-address-action-copy small {
  color: #6f8582;
  font-size: 0.54rem;
  font-weight: 700;
  line-height: 1.4;
}
.checkout-address-action.is-add {
  min-width: 190px;
  border-color: #0e8d82;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(135deg, #1aab9e, #08796f);
  box-shadow: 0 11px 22px rgba(8, 121, 111, 0.18);
}
.checkout-address-action.is-add .checkout-address-action-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.checkout-address-action.is-add small {
  color: rgba(255, 255, 255, 0.76);
}
.checkout-address-action.is-switch {
  min-width: 156px;
  color: #0c756c;
  background: linear-gradient(145deg, #ffffff, #eff9f7);
}
.checkout-address-action.is-switch .checkout-address-action-icon {
  background: #dff5f0;
}
.checkout-address-action.is-edit {
  min-width: 176px;
  border-color: #eadbbf;
  color: #80591f;
  background: linear-gradient(145deg, #fffdfa, #faf3e8);
}
.checkout-address-action.is-edit .checkout-address-action-icon {
  background: #f7e8cf;
}
.checkout-address-action:hover:not(:disabled),
.checkout-address-action:focus-visible {
  z-index: 1;
  outline: none;
  transform: translateY(-2px);
}
.checkout-address-action:hover:not(:disabled) .checkout-address-action-icon,
.checkout-address-action:focus-visible .checkout-address-action-icon {
  transform: rotate(-4deg) scale(1.05);
}
.checkout-address-action.is-add:hover:not(:disabled),
.checkout-address-action.is-add:focus-visible {
  border-color: #086f67;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.24), transparent 40%),
    linear-gradient(135deg, #169f93, #06675f);
  box-shadow: 0 15px 28px rgba(8, 121, 111, 0.24);
}
.checkout-address-action.is-switch:hover:not(:disabled),
.checkout-address-action.is-switch:focus-visible {
  border-color: #8acfc6;
  background: #f3fbf9;
  box-shadow: 0 12px 22px rgba(17, 118, 107, 0.11);
}
.checkout-address-action.is-edit:hover:not(:disabled),
.checkout-address-action.is-edit:focus-visible {
  border-color: #d9bd8d;
  background: #fcf5e9;
  box-shadow: 0 12px 22px rgba(139, 94, 31, 0.1);
}
.checkout-address-action:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}
.checkout-address-action.is-limit,
.checkout-address-action.is-limit:disabled {
  border-color: #d8dedd;
  color: #6e7b79;
  background:
    repeating-linear-gradient(-45deg, rgba(121, 137, 134, 0.035) 0 8px, transparent 8px 16px),
    #f5f7f6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  cursor: not-allowed;
  opacity: 1;
}
.checkout-address-action.is-limit .checkout-address-action-icon {
  color: #7b8987;
  background: #e3e8e7;
}
.checkout-address-action.is-limit small {
  color: #8b9896;
}
@media (max-width: 760px){
.checkout-account-address-actions {
    grid-template-columns: 1fr;
  }
.checkout-address-actions-left,
  .checkout-address-actions-right {
    width: 100%;
  }
.checkout-address-actions-right {
    justify-content: flex-end;
  }
.checkout-address-action.is-add {
    width: min(240px, 100%);
  }
}
.checkout-address-editor-actions {
  display: grid;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid rgba(39, 104, 99, 0.16);
  border-radius: 14px;
  background: #f8fbfa;
}
.checkout-address-editor-actions[hidden] {
  display: none;
}
.checkout-form-grid .checkout-address-default-choice {
  display: flex;
  grid-column: auto;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
}
.checkout-address-default-choice input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--teal);
}
.checkout-address-editor-actions > div {
  flex-wrap: wrap;
  gap: 9px;
}
.checkout-address-editor-actions button {
  min-height: 40px;
}
.checkout-address-editor-actions p {
  min-height: 18px;
  margin: 0;
  color: #a33d3d;
  font-size: 0.64rem;
  font-weight: 700;
}
.checkout-address-field {
  display: grid;
  gap: 6px;
}
.checkout-address-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.checkout-address-field-heading label {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}
body.checkout-address-modal-open {
  overflow: hidden;
}
.checkout-address-modal-backdrop {
  position: fixed;
  z-index: 230;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow: auto;
  background:
    radial-gradient(circle at 14% 12%, rgba(109, 226, 207, 0.16), transparent 34%),
    rgba(9, 27, 32, 0.62);
  backdrop-filter: blur(10px);
  animation: checkout-address-backdrop-in 180ms ease both;
}
.checkout-address-modal-backdrop[hidden] {
  display: none;
}
.checkout-address-modal {
  position: relative;
  display: grid;
  width: min(680px, 100%);
  max-height: calc(100dvh - 32px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(172, 220, 214, 0.72);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(130, 226, 212, 0.22), transparent 31%),
    linear-gradient(145deg, #ffffff 0%, #f9fffe 58%, #fffdf5 100%);
  box-shadow:
    0 32px 100px rgba(5, 34, 38, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: checkout-address-modal-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.checkout-address-modal::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 74px;
  left: 74px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #6cdcc9, #11a89b 52%, #ffd269);
  content: "";
}
@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-modal-heading,
.checkout-address-option-heading,
.checkout-address-recipient {
  display: flex;
  align-items: center;
}
.checkout-address-modal-heading {
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 15px;
}
.checkout-address-modal-heading-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}
.checkout-address-modal-symbol {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(66, 183, 170, 0.3);
  border-radius: 17px;
  color: #087d73;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(145deg, #dbfaf4, #b9eee5);
  box-shadow: 0 10px 24px rgba(26, 135, 124, 0.12);
}
.checkout-address-modal-symbol svg {
  width: 27px;
  height: 27px;
}
.checkout-address-modal-heading-copy {
  min-width: 0;
}
.checkout-address-modal-heading h2 {
  margin-top: 3px;
  font-size: clamp(1.22rem, 3vw, 1.58rem);
  line-height: 1.25;
}
.checkout-address-modal-heading-copy > p:last-child {
  margin-top: 5px;
  color: #687d82;
  font-size: 0.78rem;
  line-height: 1.5;
}
.checkout-address-modal-close {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.checkout-address-modal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px 12px;
  padding: 9px 12px;
  border: 1px solid rgba(157, 211, 205, 0.54);
  border-radius: 12px;
  color: #087b72;
  background: rgba(234, 249, 246, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
}
.checkout-address-modal-summary-hint {
  color: #789095;
  font-weight: 700;
}
.checkout-address-list {
  display: grid;
  align-content: start;
  gap: 11px;
  grid-auto-rows: max-content;
  min-height: 0;
  max-height: min(52dvh, 480px);
  padding: 2px 24px 8px;
  overflow-y: auto;
}
.checkout-address-option {
  display: grid;
  width: 100%;
  grid-template-columns: 46px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 13px;
  padding: 15px 16px 14px;
  overflow: hidden;
  border: 1px solid #d9e5e4;
  border-top: 4px solid #cbd5d5;
  border-radius: 17px;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(239, 247, 246, 0.9), transparent 33%),
    #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 20px rgba(37, 80, 82, 0.055);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.checkout-address-option:focus-visible {
  border-color: var(--teal);
  box-shadow:
    0 9px 25px rgba(18, 102, 92, 0.13),
    0 0 0 3px rgba(19, 155, 143, 0.1);
  outline: none;
}
@media (hover: hover) and (pointer: fine){
.checkout-address-option:hover {
    border-color: #68bdb3;
    box-shadow: 0 11px 27px rgba(18, 102, 92, 0.13);
    transform: translateY(-2px);
  }
}
.checkout-address-option.is-default {
  border-top-color: #43b8ab;
}
.checkout-address-option.is-selected {
  border-color: #44b8ac;
  border-top-color: #079b8e;
  background:
    radial-gradient(circle at 100% 0, rgba(126, 225, 209, 0.28), transparent 38%),
    linear-gradient(135deg, #f4fffd, #ffffff 64%);
  box-shadow:
    0 11px 30px rgba(18, 121, 109, 0.13),
    0 0 0 3px rgba(19, 155, 143, 0.1);
}
.checkout-address-option-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  align-self: start;
  border: 1px solid #d5e9e6;
  border-radius: 15px;
  color: #168e84;
  background: #effaf8;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.checkout-address-option-icon svg {
  width: 23px;
  height: 23px;
}
.checkout-address-option.is-selected .checkout-address-option-icon {
  border-color: #20a99c;
  color: #ffffff;
  background: linear-gradient(145deg, #31bfaf, #079487);
}
.checkout-address-option-content {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.checkout-address-option-heading {
  justify-content: space-between;
  gap: 10px;
}
.checkout-address-option-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.35;
}
.checkout-address-option-heading .badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(24, 160, 147, 0.22);
  color: #087b72;
  background: #eaf9f6;
  font-size: 0.62rem;
}
.checkout-address-recipient {
  flex-wrap: wrap;
  gap: 6px;
  color: #668086;
  font-size: 0.76rem;
  font-weight: 700;
}
.checkout-address-recipient svg {
  width: 15px;
  height: 15px;
}
.checkout-address-recipient > span,
.checkout-address-value {
  color: var(--muted);
}
.checkout-address-value {
  font-size: 0.76rem;
  line-height: 1.6;
}
.checkout-address-select-label {
  width: fit-content;
  margin-top: 2px;
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 900;
}
.checkout-address-option-check {
  position: relative;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 2px solid #c8d7d6;
  border-radius: 50%;
  background: #ffffff;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.checkout-address-option-check::after {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.6);
  transition: opacity 160ms ease, transform 180ms ease;
}
.checkout-address-option.is-selected .checkout-address-option-check {
  border-color: #079b8e;
  background: #079b8e;
  box-shadow: 0 0 0 4px rgba(19, 155, 143, 0.1);
}
.checkout-address-option.is-selected .checkout-address-option-check::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.checkout-address-empty {
  display: grid;
  min-height: 150px;
  place-content: center;
  gap: 7px;
  padding: 20px;
  border: 1px dashed #9fcac5;
  border-radius: 17px;
  color: var(--muted);
  background: rgba(245, 252, 251, 0.74);
  text-align: center;
}
.checkout-address-empty strong {
  color: var(--ink);
}
.checkout-address-empty .secondary-button {
  justify-self: center;
  margin-top: 5px;
}
.checkout-address-empty.is-error strong {
  color: #a24141;
}
.checkout-address-modal-footer {
  padding: 12px 24px 22px;
}
.checkout-address-manage-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7e7e5;
  border-radius: 14px;
  color: #24363d;
  background: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.checkout-address-manage-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  color: #087d73;
  background: #e6f8f5;
}
.checkout-address-manage-icon svg {
  width: 21px;
  height: 21px;
}
.checkout-address-manage-link > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.checkout-address-manage-link strong {
  font-size: 0.75rem;
}
.checkout-address-manage-link small {
  color: #76888c;
  font-size: 0.66rem;
  line-height: 1.35;
}
.checkout-address-manage-arrow {
  color: #109d91;
  font-size: 1.1rem;
  font-weight: 900;
  transition: transform 180ms ease;
}
.checkout-address-manage-link:focus-visible {
  border-color: #56b9af;
  outline: 3px solid rgba(19, 155, 143, 0.1);
}
@media (hover: hover) and (pointer: fine){
.checkout-address-manage-link:hover {
    border-color: #8bcfc7;
    background: #f5fdfb;
    transform: translateY(-1px);
  }
.checkout-address-manage-link:hover .checkout-address-manage-arrow {
    transform: translateX(3px);
  }
}
/* Bảng giá chi tiết đứng sát ngay trên hộp Tổng thanh toán — nên hộp tổng bỏ
   luôn lề trên của nó, hai khối đọc thành một mạch. */
.checkout-price-breakdown {
  margin-top: 24px;
}
.checkout-price-breakdown + .checkout-total-row {
  margin-top: 10px;
}
.checkout-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 14px;
  padding: 17px 18px;
  border: 1px solid rgba(39, 104, 99, 0.12);
  border-radius: 16px;
  background: rgba(242, 250, 248, 0.78);
  color: #405d5d;
  font-size: 0.9rem;
}
.checkout-total-row strong {
  color: #173f41;
  font-family: var(--font-brand);
  font-size: 1.48rem;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
#checkoutSubmit {
  position: relative;
  min-height: 52px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(110deg, #0e9589 0%, #16aa9b 55%, #087d75 100%);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow:
    0 14px 26px rgba(7, 126, 117, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.2);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}
#checkoutSubmit::after {
  content: "→";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.9rem;
  line-height: 1;
  vertical-align: middle;
  transition: transform 180ms ease;
}
#checkoutSubmit:hover:not(:disabled) {
  background: linear-gradient(110deg, #0b897f 0%, #119d91 55%, #06736c 100%);
  transform: translateY(-1px);
  box-shadow:
    0 17px 30px rgba(7, 126, 117, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.24);
}
#checkoutSubmit:hover:not(:disabled)::after {
  transform: translateX(3px);
}
#checkoutSubmit:disabled {
  border: 1px solid rgba(76, 126, 122, 0.08);
  background: linear-gradient(110deg, #d8e8e5, #c8dfdb);
  color: rgba(48, 91, 88, 0.58);
  opacity: 1;
  box-shadow: none;
}
#checkoutSubmit:disabled::after {
  background: rgba(255, 255, 255, 0.42);
}
.checkout-missing-draft {
  text-align: center;
}
.checkout-missing-draft p {
  margin: 8px 0 18px;
  color: var(--muted);
}
.invoice-sheet {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}
.invoice-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.invoice-heading > strong {
  font-size: 1.15rem;
}
.invoice-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px;
  padding: 20px 0;
}
.invoice-lines {
  border-top: 1px solid var(--line);
}
.invoice-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 150px;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
}
.invoice-line > :last-child {
  text-align: right;
}
.invoice-line-header,
.invoice-line-total {
  font-weight: 800;
}
.invoice-line-total {
  font-size: 1.08rem;
}
.invoice-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}
.invoice-next-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 13px;
  min-width: 206px;
  min-height: 54px;
  padding: 7px 8px 7px 16px;
  border: 1px solid #087f75;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.19), transparent 38%),
    linear-gradient(135deg, #139b8e, #08766d);
  box-shadow: 0 10px 22px rgba(8, 118, 109, 0.2);
  text-decoration: none;
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    filter 170ms ease;
}
.invoice-next-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.invoice-next-copy small,
.invoice-next-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-next-copy small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.58rem;
  font-weight: 700;
}
.invoice-next-copy strong {
  color: inherit;
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
}
.invoice-next-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  transition: transform 170ms ease, background 170ms ease;
}
.invoice-next-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.invoice-next-action:hover,
.invoice-next-action:focus-visible {
  color: #fff;
  box-shadow: 0 14px 28px rgba(8, 118, 109, 0.28);
  filter: saturate(1.08);
  outline: none;
  transform: translateY(-2px);
}
.invoice-next-action:hover .invoice-next-icon,
.invoice-next-action:focus-visible .invoice-next-icon {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(2px);
}
@media (max-width: 640px){
.invoice-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
.invoice-actions > a {
    width: 100%;
  }
.invoice-next-action {
    min-width: 0;
  }
}
.panel-heading {
  margin-bottom: 15px;
}
.panel-heading.row,
.feed-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.panel-heading h2,
.feed-toolbar h2 {
  font-size: 1.25rem;
}
/* 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-grid {
  grid-template-columns: 1fr;
  transform-origin: top center;
}
.service-grid.is-collapsed {
  gap: 8px;
  animation: serviceMenuSettle 180ms ease both;
}
.service-grid.is-opening {
  animation: serviceMenuOpen 190ms ease both;
}
.service-grid.is-closing {
  pointer-events: none;
  animation: serviceMenuClose 190ms ease both;
}
.service-panel #sizeStep {
  position: relative;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.service-panel #sizeStep.is-required {
  border-color: rgba(239, 100, 97, 0.34);
  border-left-color: var(--coral);
  background: linear-gradient(180deg, #ffffff, #fff8f5);
  box-shadow: 0 10px 22px rgba(239, 100, 97, 0.08);
}
.service-panel #sizeStep.is-complete {
  border-color: rgba(19, 155, 143, 0.28);
  border-left-color: var(--teal);
  background: #f7fcfb;
}
.service-card,
.size-card,
.sample-button,
.gallery-card,
.feedback-card,
.order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.service-card,
.size-card,
.sample-button {
  color: var(--ink);
  text-align: left;
}
.service-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 12px;
}
.service-card > span:last-child {
  min-width: 0;
}
.service-card strong,
.size-card strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.service-card small,
.size-card small,
.upload-zone small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.service-code {
  width: 56px;
  height: 56px;
  padding: 3px;
  background: #eef8f7;
  color: var(--teal-dark);
  font-size: 0.78rem;
  overflow: hidden;
}
.service-code svg {
  width: 24px;
  height: 24px;
}
/* Icon vẽ theo lối nét viền phải mượn màu chữ của ô.
   -------------------------------------------------------------------------
   Ô icon đặt color = màu nhấn của sản phẩm, và đổi thành trắng khi thẻ đang
   được chọn. Nét icon bám vào currentColor nên đi theo cả hai trạng thái đó.

   Điều kiện là THUỘC TÍNH CỦA CHÍNH HÌNH, không phải icon đến từ đâu: hình nào
   không tự khai fill lẫn stroke thì mới ép, còn hình tự khai màu thì để nguyên.
   Bản trước chừa hẳn icon tùy chọn ra khỏi luật này nên icon nét viền lấy từ kho
   rơi về fill đen mặc định của SVG và mất luôn nét trắng khi chọn.

   Chỉ bắt con trực tiếp của svg và của một lớp g, và chỉ khi svg/g đó cũng không
   tự khai màu — nếu không, hình nằm trong <g fill="..."> sẽ bị ép nhầm. */
.service-code svg:not([fill]):not([stroke]) > :is(path, rect, circle, ellipse, line, polyline, polygon):not([fill]):not([stroke]),
.service-code svg:not([fill]):not([stroke]) > g:not([fill]):not([stroke]) > :is(path, rect, circle, ellipse, line, polyline, polygon):not([fill]):not([stroke]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon riêng vẫn phải nằm vừa ô, nhưng giữ nguyên tỉ lệ của chính nó. */
.service-code.has-custom-icon svg {
  width: 100%;
  height: 100%;
  max-width: 36.4px;
  max-height: 36.4px;
  object-fit: contain;
}
.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-group {
  display: grid;
  gap: 10px;
}
.option-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.option-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.98rem;
}
.service-panel #sizeStep > .option-header h3::after,
.attached-art-step > .option-header h3::after {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.service-panel #sizeStep.is-required > .option-header h3::after,
.attached-art-step.is-required > .option-header h3::after {
  content: attr(data-required-label);
  background: #fff0eb;
  color: #ad4230;
}
.service-panel #sizeStep.is-complete > .option-header h3::after,
.attached-art-step.is-complete > .option-header h3::after {
  content: attr(data-complete-label);
  background: #e6f6f3;
  color: var(--teal-dark);
}
.option-header span,
#sizeHint,
#unitPrice {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}
#sizeStep.is-required #sizeHint {
  color: #ad4230;
  font-weight: 900;
}
#sizeStep.is-complete #sizeHint {
  color: var(--teal-dark);
  font-weight: 800;
}
.option-list {
  display: grid;
  gap: 8px;
}
.order-size-picker.is-empty .size-picker-trigger {
  min-height: 42px;
  border-color: rgba(239, 100, 97, 0.5);
  background: #fff7f3;
  box-shadow: inset 0 0 0 1px rgba(239, 100, 97, 0.12);
}
.order-size-picker.is-empty .size-picker-arrow {
  color: var(--coral);
}
.order-size-picker.is-selected .size-picker-trigger {
  border-color: rgba(19, 155, 143, 0.36);
  background: #f7fcfb;
}
.option-list.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.price {
  color: var(--coral);
  font-weight: 900;
  white-space: nowrap;
}
.sample-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sample-suggestions {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  gap: 8px;
  min-width: 0;
}
.sample-suggestions[hidden] {
  display: none;
}
.sample-suggestions-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sample-suggestions-heading > strong {
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.sample-suggestions-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--paper-soft);
  font-size: 0.72rem;
  font-weight: 800;
  transition: border-color 170ms ease, color 170ms ease, background 170ms ease, transform 170ms ease;
}
.sample-suggestions-refresh svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 240ms ease;
}
.sample-suggestions-refresh:hover,
.sample-suggestions-refresh:focus-visible {
  border-color: rgba(19, 155, 143, 0.46);
  color: var(--teal-dark);
  background: var(--mint);
  outline: none;
  transform: translateY(-1px);
}
.sample-suggestions-refresh:hover svg,
.sample-suggestions-refresh:focus-visible svg {
  transform: rotate(120deg);
}
.sample-button {
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1;
}
.sample-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sample-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 1;
  min-width: 124px;
  text-decoration: none;
}
.quantity-step {
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.preview-board {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-height: 420px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, #edf2f4 25%, transparent 25%),
    linear-gradient(-45deg, #edf2f4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #edf2f4 75%),
    linear-gradient(-45deg, transparent 75%, #edf2f4 75%);
  background-color: #fbfdff;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}
.product-shell {
  display: grid;
  place-items: center;
  width: 100%;
  height: 360px;
  max-width: 100%;
  max-height: 100%;
  min-height: 360px;
  min-width: 0;
  overflow: hidden;
}
/* Lớp vùng in trên khung xem trước.
   ---------------------------------------------------------------------------
   Bốn lớp xếp từ dưới lên: ảnh khách đã bị mask cắt, đường dẫn safe/bleed, ảnh
   phủ sản phẩm, và một thẻ svg rỗng chỉ để chứa định nghĩa mask.

   Không có hồ sơ vùng in thì lớp mask không mang thuộc tính mask nào, và khung xem
   trước chạy đúng như trước — vẫn cắt bằng overflow của .product-stage. */
.print-mask-layer {
  position: absolute;
  inset: 0;
}
/* Khung mang hình của hồ sơ thay vì hình chữ nhật của CSS.
   ---------------------------------------------------------------------------
   Viền, bo góc, nền trắng và đổ bóng của .product-stage đều vẽ theo hình chữ
   nhật, nên khi ảnh đã bị mask cắt thành hình ốp bo cong thì chúng trơ ra thành một
   khung vuông bao quanh một vật bo tròn. Bỏ hết chúng đi và để chính mask định
   nghĩa hình dáng.

   Bóng chuyển sang drop-shadow đặt ở khung: bộ lọc này đi theo kênh alpha nên bóng
   ôm đúng hình đã cắt, kể cả góc cong và lỗ khoét. Đặt ở khung chứ không đặt ở
   lớp mask, vì filter chạy TRƯỚC mask trên cùng một phần tử — đặt sai chỗ thì bóng
   lại ôm hình chữ nhật chưa cắt. */
.product-stage.has-print-shape {
  border-color: transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 14px 26px rgba(24, 35, 45, 0.22));
}
/* Giấy trắng nằm BÊN TRONG lớp mask, không phải ở bảng xem trước.
   ---------------------------------------------------------------------------
   Nền của một phần tử cũng bị mask cắt như nội dung, nên đặt màu trắng ở đây thì
   nó dừng đúng ở mép hình sản phẩm: bên trong là giấy trắng, bên ngoài vẫn là hoa
   văn ô vuông của mặt bàn chỉnh ảnh.

   Đặt ở .preview-board thì cả mặt bàn trắng theo — mất luôn dấu hiệu “chỗ này
   trong suốt” mà hoa văn đang nói hộ. */
.product-stage.has-print-shape .print-mask-layer {
  background: #ffffff;
}
.print-guide-layer,
.print-overlay-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Ảnh phủ kéo căng đúng khung sản phẩm: nó được vẽ theo đúng tỉ lệ canvas của
   hồ sơ, mà khung cũng đang mang đúng tỉ lệ đó. */
.print-overlay-layer {
  object-fit: fill;
}
.print-shape-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.product-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border: 1px solid rgba(24, 35, 45, 0.16);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 22px 38px rgba(24, 35, 45, 0.18);
}
/* Bo góc và độ dày viền của khung xem trước cố định cho mọi sản phẩm — xem
   .product-stage bên trên. Trước đây có năm biến thể chọn trong trang quản lý,
   nhưng chúng chỉ đổi border-radius nên không đáng giữ một trường dữ liệu. */

#previewImageFrame {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  will-change: left, top, width, height;
}
#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-ruler {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.product-ruler[hidden] {
  display: none;
}
.product-stage.has-image {
  cursor: grab;
  touch-action: none;
}
.product-stage.has-image.is-dragging {
  cursor: grabbing;
}
@media (min-width: 921px){
.preview-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 10px;
    height: 700px;
  }
.preview-panel .panel-heading {
    margin-bottom: 0;
  }
.preview-panel .crop-workspace {
    min-height: 0;
  }
.preview-panel .preview-board {
    height: 100%;
    min-height: 0;
    padding-block: 18px;
  }
.preview-panel .product-shell {
    height: 100%;
    min-height: 0;
  }
}
.empty-preview {
  display: grid;
  gap: 5px;
  place-items: center;
  color: var(--muted);
  text-align: center;
  padding: 18px;
}
.empty-preview strong {
  color: var(--ink);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.crop-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}
.crop-tools {
  grid-row: 1;
  min-width: 0;
  container-name: crop-tools;
  container-type: inline-size;
}
.crop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.crop-icon-button,
.crop-step-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(185, 199, 211, 0.72);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #f7fbfb);
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(29, 43, 54, 0.06);
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}
.crop-icon-button {
  gap: 6px;
  min-height: 32px;
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 900;
}
.crop-icon-button:hover,
.crop-step-button:hover {
  border-color: rgba(19, 155, 143, 0.58);
  background: linear-gradient(180deg, #f7fffd, #edf9f6);
  color: var(--teal-dark);
  box-shadow:
    inset 0 0 0 1px rgba(19, 155, 143, 0.12),
    0 6px 14px rgba(8, 119, 110, 0.1);
}
.crop-icon-button:active,
.crop-step-button:active {
  border-color: var(--teal);
  background: #e4f5f1;
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 2px rgba(19, 155, 143, 0.2);
}
.crop-icon-button[aria-pressed="true"] {
  border-color: var(--teal);
  background: #e4f5f1;
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 2px rgba(19, 155, 143, 0.2);
}
.crop-step-button:disabled,
.crop-step-button:disabled:hover {
  border-color: rgba(185, 199, 211, 0.5);
  background: #f1f4f3;
  color: #a9b3b9;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}
.crop-step-button.is-limit-disabled {
  opacity: 0.48;
}
.control-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crop-step-button {
  min-width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1rem;
  font-weight: 900;
}
.crop-preview-layout {
  --crop-y-rail: 0px;
  --crop-x-row: 0px;
  --crop-stack-gap: 8px;
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "board";
  gap: 8px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.crop-workspace.has-crop-controls .crop-preview-layout {
  --crop-y-rail: 18px;
  --crop-x-row: 28px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "board";
  align-items: stretch;
}
.crop-board-stack {
  grid-area: board;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--crop-stack-gap);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.crop-workspace.has-crop-controls .crop-board-stack {
  padding-left: calc(var(--crop-y-rail) + var(--crop-stack-gap));
  grid-template-rows: minmax(0, 1fr) var(--crop-x-row);
}
.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;
}
.crop-tool {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.crop-zoom-stepper {
  display: inline-grid;
  grid-template-columns: 28px minmax(58px, 76px) 28px;
  gap: 4px;
  align-items: center;
  margin-left: 0;
}
@media (max-width: 720px){
.crop-toolbar {
    flex-wrap: wrap;
    gap: 5px;
  }
.crop-zoom-stepper {
    flex: 0 1 auto;
    grid-template-columns: 32px minmax(72px, 82px) 32px;
    gap: 3px;
  }
.crop-step-button {
    min-width: 32px;
    width: 32px;
    height: 36px;
  }
.crop-zoom-number-wrap {
    min-height: 36px;
  }
}
@media (max-width: 390px){
.crop-zoom-stepper {
    grid-template-columns: 28px minmax(68px, 74px) 28px;
  }
.crop-step-button {
    min-width: 28px;
    width: 28px;
  }
}
.crop-fullview-button {
  margin-left: auto;
}
@container crop-tools (max-width: 645px){
.crop-icon-button {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }
.crop-icon-button > span {
    display: none;
  }
}
@container crop-tools (max-width: 350px){
.crop-icon-button {
    flex-basis: 32px;
    width: 32px;
    min-width: 32px;
  }
}
.crop-fullview-collapse {
  display: none;
}
.crop-workspace.is-fullview .crop-fullview-expand {
  display: none;
}
.crop-workspace.is-fullview .crop-fullview-collapse {
  display: inline;
}
.crop-workspace.is-fullview {
  position: fixed;
  z-index: 12000;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 18px;
  gap: 12px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 220, 131, 0.16), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(99, 218, 202, 0.18), transparent 32%),
    #f7fbfb;
  box-shadow: none;
  transform-origin: top left;
  will-change: transform, opacity, border-radius;
}
@media (prefers-reduced-motion: reduce){
.crop-workspace.is-fullview {
    will-change: auto;
  }
}
.crop-workspace.is-fullview .crop-tools {
  padding: 10px 12px;
  border: 1px solid rgba(185, 199, 211, 0.62);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px rgba(29, 43, 54, 0.08);
}
.crop-workspace.is-fullview .crop-preview-layout,
.crop-workspace.is-fullview .crop-board-stack,
.crop-workspace.is-fullview .preview-board,
.crop-workspace.is-fullview .product-shell {
  min-height: 0;
  height: 100%;
}
.crop-workspace.is-fullview .preview-board {
  padding-block: 10px;
}
@media (max-width: 680px){
.crop-workspace.is-fullview {
    padding: 10px;
  }
}
/* Design preview modal: same source-to-modal transition used by catalog images. */
body.crop-design-modal-open {
  overflow-x: hidden;
  overflow-y: scroll;
}
.crop-design-modal-backdrop,
.crop-design-modal {
  will-change: transform, opacity;
}
.crop-design-modal-backdrop {
  z-index: 12000;
  padding: 36px 60px 36px 36px;
  overscroll-behavior: none;
  touch-action: none;
  background:
    radial-gradient(circle at 11% 13%, rgba(255, 210, 112, 0.28), transparent 27%),
    radial-gradient(circle at 88% 12%, rgba(115, 219, 205, 0.3), transparent 31%),
    radial-gradient(circle at 84% 88%, rgba(255, 159, 165, 0.18), transparent 29%),
    linear-gradient(145deg, rgba(250, 255, 254, 0.96), rgba(232, 249, 246, 0.96));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.crop-design-modal {
  position: relative;
  display: block;
  width: min(1380px, calc(100vw - 96px));
  height: min(900px, calc(100dvh - 72px));
  max-width: calc(100vw - 96px);
  max-height: calc(100dvh - 72px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background: #f7fbfb;
  box-shadow: 0 28px 90px rgba(6, 18, 25, 0.36);
}
.crop-design-modal-host {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}
.crop-design-modal-host .crop-workspace {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px;
  gap: 12px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 220, 131, 0.12), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(99, 218, 202, 0.14), transparent 32%),
    #f7fbfb;
}
.crop-design-modal-host .crop-tools {
  padding: 10px 12px;
  border: 1px solid rgba(185, 199, 211, 0.62);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(29, 43, 54, 0.08);
}
.crop-design-modal-host .crop-preview-layout,
.crop-design-modal-host .crop-board-stack,
.crop-design-modal-host .preview-board,
.crop-design-modal-host .product-shell {
  min-height: 0;
  height: 100%;
}
.crop-design-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: transparent;
  background: rgba(8, 18, 25, 0.4);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.crop-design-modal-close::before {
  content: "";
  width: 20px;
  height: 20px;
  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");
}
.crop-design-modal-close:hover,
.crop-design-modal-close:focus-visible {
  background: rgba(8, 18, 25, 0.72);
}
.crop-workspace-placeholder {
  width: 100%;
  min-height: 0;
}
body.crop-design-modal-transitioning .crop-design-modal-close,
body.crop-design-modal-transitioning .crop-fullview-button {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 640px){
.crop-design-modal-backdrop {
    padding: 8px;
  }
.crop-design-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 14px;
  }
.crop-design-modal-close {
    top: 8px;
    right: 8px;
  }
.crop-design-modal-host .crop-workspace {
    padding: 10px;
  }
}
.crop-fullview-button[aria-pressed="true"] .crop-fullview-expand {
  display: none;
}
.crop-fullview-button[aria-pressed="true"] .crop-fullview-collapse {
  display: inline;
}
.crop-fullview-button[aria-pressed="false"] .crop-fullview-expand {
  display: inline;
}
.crop-fullview-button[aria-pressed="false"] .crop-fullview-collapse {
  display: none;
}
@media (max-width: 720px){
body[data-page="order"] .preview-panel {
    padding-right: 10px;
    padding-left: 10px;
  }
body[data-page="order"] .preview-panel .crop-tools {
    padding-top: 0;
    overflow: visible;
  }
body[data-page="order"] .crop-toolbar {
    padding-top: 4px;
    padding-bottom: 3px;
    overflow: visible;
  }
}
.crop-axis-control {
  --crop-track-size: 3px;
  --crop-thumb-size: 12px;
  --crop-center-size: 18px;
  position: relative;
  gap: 4px;
  border: 0;
  outline: none;
  box-shadow: none;
}
.crop-axis-control:focus,
.crop-axis-control:focus-within,
.crop-axis-control:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
}
.crop-axis-x {
  display: block;
  width: 100%;
  height: 28px;
}
.crop-axis-y {
  position: absolute;
  top: 0;
  bottom: calc(var(--crop-x-row) + var(--crop-stack-gap));
  left: 0;
  z-index: 2;
  display: block;
  width: var(--crop-y-rail);
  height: auto;
}
.crop-axis-x::before,
.crop-axis-x::after,
.crop-axis-y::before,
.crop-axis-y::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.crop-axis-x::before {
  top: 50%;
  left: calc(var(--crop-thumb-size) / 2);
  right: calc(var(--crop-thumb-size) / 2);
  height: var(--crop-track-size);
  border-radius: 999px;
  background: #179c91;
  transform: translateY(-50%);
  z-index: 1;
}
.crop-axis-y::before {
  left: 50%;
  top: calc(var(--crop-thumb-size) / 2);
  bottom: calc(var(--crop-thumb-size) / 2);
  width: var(--crop-track-size);
  border-radius: 999px;
  background: #179c91;
  transform: translateX(-50%);
  z-index: 1;
}
.crop-axis-x::after,
.crop-axis-y::after {
  box-sizing: border-box;
  width: var(--crop-thumb-size);
  height: var(--crop-thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--teal-dark);
  box-shadow: none;
  z-index: 5;
}
.crop-axis-x::after {
  top: 50%;
  left: var(--crop-thumb-x, 50%);
  transform: translate(-50%, -50%);
}
.crop-axis-y::after {
  top: var(--crop-thumb-y, 50%);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.crop-center-target {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--crop-center-size);
  height: var(--crop-center-size);
  padding: 0;
  border: 2px solid #179c91;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 2px 7px rgba(6, 115, 108, 0.16),
    0 0 0 0 rgba(23, 156, 145, 0.12);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.crop-center-target::before {
  content: "";
  width: 5px;
  height: 5px;
  box-sizing: border-box;
  border: 1px solid rgba(23, 156, 145, 0.72);
  border-radius: 50%;
  opacity: 0.75;
  transform: scale(0.82);
  transition:
    width 180ms ease,
    height 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}
.crop-center-target:hover:not(:disabled),
.crop-center-target:focus-visible {
  border-color: var(--teal-dark);
  box-shadow:
    0 3px 10px rgba(6, 115, 108, 0.22),
    0 0 0 4px rgba(23, 156, 145, 0.1);
  transform: translate(-50%, -50%) scale(1.06);
  outline: none;
}
.crop-center-target:hover:not(:disabled)::before,
.crop-center-target:focus-visible::before {
  width: 9px;
  height: 9px;
  border-color: var(--teal-dark);
  opacity: 1;
  transform: scale(1);
}
.crop-axis-control.is-centering .crop-center-target {
  animation: crop-center-arrival 400ms ease;
}
.crop-workspace.is-crop-centering .crop-axis-x::after {
  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crop-workspace.is-crop-centering .crop-axis-y::after {
  transition: top 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crop-workspace.is-crop-centering #previewImageFrame {
  transition:
    left 380ms cubic-bezier(0.22, 1, 0.36, 1),
    top 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@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);
  }
}
/* ---------------------------------------------------------------------------
   Hoạt ảnh khi vùng cắt nhảy một bước
   ---------------------------------------------------------------------------
   Áp cho các thao tác bấm nút: phóng to, thu nhỏ, fit ngang, fit dọc, lật, xoay.

   Lớp .is-crop-motion do playCropMotion() gắn trong đúng một lượt rồi gỡ, nên
   lúc kéo ảnh hay lăn chuột — hai thao tác gọi renderPreview liên tục — ảnh vẫn
   bám tay không có độ trễ. */
.crop-workspace.is-crop-motion #previewImageFrame {
  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);
}
/* 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);
}
/* Lăn con lăn khi đã hết cỡ: rung ngang một nhịp rồi thôi, thay cho một dòng
   thông báo. Biên độ nhỏ dần để giống một cú chạm biên hơn là một cơn rung đều. */
.crop-workspace.is-crop-zoom-bump #previewImageFrame {
  animation: crop-zoom-bump 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@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-workspace.is-crop-zoom-bump #previewImageFrame {
    animation: none;
  }
}
.crop-label {
  position: absolute;
  z-index: 4;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: var(--teal-dark);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  border: 0;
  pointer-events: none;
  text-transform: uppercase;
}
.crop-axis-x .crop-label {
  top: 0;
  right: 0;
}
.crop-axis-y .crop-label {
  top: 0;
  left: calc(50% + 6px);
}
.crop-tool.is-disabled {
  opacity: 0.46;
}
.crop-tool.is-disabled .crop-label,
.crop-tool.is-disabled .crop-range,
.crop-tool.is-disabled .crop-number-wrap {
  cursor: not-allowed;
}
.crop-tool.is-disabled .crop-range {
  opacity: 0.65;
}
.crop-tool.is-disabled .crop-center-target {
  border-color: #cbd9df;
  background: #f8fbfc;
  box-shadow: none;
  cursor: not-allowed;
}
.crop-center-target.is-thumb-centered {
  pointer-events: none;
}
.crop-tool.is-disabled .crop-center-target::before {
  border-color: #b8c8cf;
  opacity: 0.55;
}
.crop-range {
  --crop-track-size: 3px;
  --crop-thumb-size: 12px;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  accent-color: var(--teal);
  outline: none;
  box-shadow: none;
}
.crop-range:focus,
.crop-range:focus-visible,
.crop-range:active {
  border: 0;
  outline: none;
  box-shadow: none;
}
.crop-range-vertical {
  width: 100%;
  min-width: 0;
  min-height: 0;
  writing-mode: vertical-lr;
  direction: rtl;
}
.crop-axis-control .crop-range {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.crop-range::-webkit-slider-runnable-track {
  height: var(--crop-track-size);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.crop-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--crop-thumb-size);
  height: var(--crop-thumb-size);
  margin-top: calc((var(--crop-track-size) - var(--crop-thumb-size)) / 2);
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}
.crop-range-vertical::-webkit-slider-runnable-track {
  width: var(--crop-track-size);
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.crop-range-vertical::-webkit-slider-thumb {
  width: var(--crop-thumb-size);
  height: var(--crop-thumb-size);
  margin-left: 0;
  margin-inline-start: 0;
  margin-top: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}
.crop-range::-moz-range-track {
  height: var(--crop-track-size);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.crop-range::-moz-range-progress {
  height: var(--crop-track-size);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.crop-range::-moz-range-thumb {
  appearance: none;
  box-sizing: border-box;
  width: var(--crop-thumb-size);
  height: var(--crop-thumb-size);
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}
.crop-range-vertical::-moz-range-track {
  width: var(--crop-track-size);
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.crop-range-vertical::-moz-range-progress {
  width: var(--crop-track-size);
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.crop-range-vertical::-moz-range-thumb {
  width: var(--crop-thumb-size);
  height: var(--crop-thumb-size);
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}
.crop-tool.is-disabled .crop-range::-webkit-slider-runnable-track {
  background: transparent;
}
.crop-tool.is-disabled .crop-range-vertical::-webkit-slider-runnable-track {
  background: transparent;
}
.crop-tool.is-disabled.crop-axis-x::before,
.crop-tool.is-disabled.crop-axis-x::after,
.crop-tool.is-disabled.crop-axis-y::before,
.crop-tool.is-disabled.crop-axis-y::after {
  background: #dbe5ec;
  box-shadow: none;
}
.crop-tool.is-disabled .crop-range::-moz-range-track,
.crop-tool.is-disabled .crop-range::-moz-range-progress {
  background: transparent;
}
.crop-number-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}
.crop-number {
  -moz-appearance: textfield;
  appearance: textfield;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: right;
  outline: none;
}
.crop-number::-webkit-outer-spin-button,
.crop-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.crop-number:focus-visible {
  outline: none;
}
.crop-number-wrap:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 155, 143, 0.14);
}
.crop-zoom-number-wrap {
  position: relative;
  grid-template-columns: auto auto;
  justify-content: end;
  gap: 0;
  min-height: 28px;
  padding: 0 5px 0 7px;
}
.crop-zoom-number {
  justify-self: end;
  width: 3.2ch;
  min-width: 3.2ch;
  padding: 0;
}
.crop-zoom-label {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}
.crop-confirm-actions {
  grid-row: 3;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.crop-confirm-button {
  --confirm-slide-x: 0px;
  --confirm-slide-fill: 55px;
  --confirm-label-opacity: 1;
  /* Tổng khoảng thụt hai bên của tay kéo: 5px bên trái cộng 4px bên phải.
     app.js đọc số này để biết tay kéo còn bao nhiêu đường để chạy, nên chỗ nào
     đổi kích thước tay kéo thì phải đổi kèm số này ở đúng chỗ đó. */
  --confirm-thumb-inset: 9px;
  position: relative;
  justify-self: center;
  width: min(360px, 100%);
  height: 56px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #bddbd7;
  border-radius: 999px;
  color: #0b6f67;
  background: linear-gradient(180deg, #f8fcfb, #edf7f5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 9px 22px rgba(17, 112, 102, 0.1);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}
.crop-confirm-button:focus-visible {
  border-color: #139b8e;
  box-shadow:
    0 0 0 4px rgba(19, 155, 142, 0.14),
    0 11px 26px rgba(17, 112, 102, 0.14);
  outline: 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-fill {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: var(--confirm-slide-fill);
  border-radius: inherit;
  background: linear-gradient(90deg, #08776e 0%, #12a99b 68%, #43d4c2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    8px 0 20px rgba(18, 169, 155, 0.24);
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crop-confirm-button.is-dragging .crop-confirm-fill {
  transition: none;
}
.crop-confirm-button.is-completing .crop-confirm-fill,
.crop-confirm-button.is-loading .crop-confirm-fill,
.crop-confirm-button.is-at-end .crop-confirm-fill {
  width: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 24px rgba(18, 169, 155, 0.28);
  transition: none;
}
.crop-confirm-text {
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 0 18px 0 58px;
  pointer-events: none;
  clip-path: inset(0 0 0 var(--confirm-slide-fill));
  transition: clip-path 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crop-confirm-text strong {
  color: #075f58;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}
/* The hint under "Kéo để xác nhận". At 0.55rem it was 8.8px at every width,
   including desktop, where there was never a reason for it to be that small —
   the slider is the last step before payment and the hint is what says which
   way to drag. */
.crop-confirm-text small {
  color: #66837f;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.crop-confirm-complete-label {
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 0 58px 0 18px;
  color: #fff;
  background: linear-gradient(
    110deg,
    #e9fffc 0%,
    #fff 40%,
    #9ffff0 48%,
    #fff 56%,
    #e9fffc 100%
  );
  background-position: 140% 0;
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  clip-path: inset(0 calc(100% - var(--confirm-slide-fill)) 0 0);
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 2px rgba(5, 75, 69, 0.28);
  transform: translateY(0);
  animation: crop-confirm-label-shine 4.2s linear infinite;
  transition: clip-path 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crop-confirm-button.is-completing .crop-confirm-complete-label,
.crop-confirm-button.is-loading .crop-confirm-complete-label,
.crop-confirm-button.is-at-end .crop-confirm-complete-label {
  opacity: 1;
  transform: translateY(0);
}
.crop-confirm-button.is-at-end .crop-confirm-complete-label {
  transition: none;
}
.crop-confirm-button.is-at-end .crop-confirm-text {
  opacity: 0;
  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;
  }
}
.crop-confirm-thumb {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 5px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #16aa9c, #08776e);
  box-shadow: 0 5px 13px rgba(8, 119, 110, 0.26);
  transform: translate3d(var(--confirm-slide-x), 0, 0);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    box-shadow 180ms ease;
}
.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-end .crop-confirm-thumb {
  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);
  }
}
.crop-confirm-thumb svg {
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: opacity 160ms ease, transform 200ms ease;
}
.crop-confirm-arrow {
  opacity: 1;
  transform: scale(1);
}
.crop-confirm-spinner,
.crop-confirm-check {
  opacity: 0;
  transform: scale(0.65);
}
.crop-confirm-button.is-completing .crop-confirm-arrow {
  opacity: 0;
  transform: scale(0.7);
}
.crop-confirm-button.is-completing .crop-confirm-check {
  opacity: 1;
  transform: scale(1);
}
.crop-confirm-button.is-loading .crop-confirm-arrow,
.crop-confirm-button.is-loading .crop-confirm-check {
  opacity: 0;
  transform: scale(0.65);
}
.crop-confirm-button.is-loading .crop-confirm-spinner {
  opacity: 1;
  transform: scale(1);
  animation: crop-confirm-spin 0.9s linear infinite;
}
@keyframes crop-confirm-spin {
  to {
    transform: scale(1) rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce){
.crop-confirm-complete-label,
  .crop-confirm-button.is-at-start .crop-confirm-thumb,
  .crop-confirm-button.is-at-start .crop-confirm-fill {
    animation: none;
  }
}
.crop-confirm-button.is-disabled {
  border-color: #d5e0e1;
  color: #87979d;
  background: #f0f4f4;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.crop-confirm-button.is-disabled .crop-confirm-thumb {
  color: #7f9096;
  background: #d9e2e3;
  box-shadow: none;
}
.crop-confirm-button.is-disabled .crop-confirm-fill {
  background: rgba(126, 145, 151, 0.08);
}
.crop-confirm-button.is-disabled .crop-confirm-text strong,
.crop-confirm-button.is-disabled .crop-confirm-text small {
  color: #87979d;
}
/* .status-pill đã gỡ khỏi trang đặt in cùng ô trạng thái vùng cắt; chỉ .badge
   còn dùng. Giữ tên lớp trong danh sách này để trang nào lỡ còn dùng thì không
   mất kiểu dáng. */
.status-pill,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff4da;
  color: #845a09;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}
.summary-box {
  display: grid;
  gap: 9px;
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}
.summary-row strong {
  color: var(--ink);
  text-align: right;
}
.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-field {
  position: relative;
  width: 100%;
}
#loginModal .password-field > input {
  padding-right: 48px;
}
.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #6f7e88;
  background: transparent;
  transform: translateY(-50%);
  transition:
    color 160ms ease,
    background 160ms ease;
}
.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);
}
.password-visibility-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
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;
}
.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%;
}
.order-result {
  padding: 12px;
  border: 1px solid rgba(79, 159, 104, 0.3);
  border-radius: var(--radius);
  background: #edf8f0;
  color: #235b32;
  font-weight: 800;
}
.page-heading {
  margin-bottom: 24px;
}
.view.find-view.is-active {
  display: grid;
  gap: 24px;
}
.find-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(340px, 27vw, 430px);
  overflow: hidden;
  border-radius: 10px;
  background: #17211f;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(22, 37, 44, 0.12);
}
.find-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 12, 14, 0.12), rgba(7, 16, 16, 0.08) 46%, rgba(7, 12, 14, 0.12)),
    linear-gradient(180deg, rgba(5, 9, 12, 0.08), rgba(5, 9, 12, 0.15)),
    rgba(10, 12, 14, 0.1);
  -webkit-backdrop-filter: blur(1.8px);
  backdrop-filter: blur(1.8px);
  pointer-events: none;
}
.find-hero-media,
.find-hero-slide {
  position: absolute;
  inset: 0;
}
.find-hero-media {
  z-index: 0;
  overflow: hidden;
  background: #17211f;
}
.find-hero-slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  filter: saturate(1.08) contrast(1.03) brightness(1.06);
  transition: opacity 900ms ease;
}
.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-hero-content {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  gap: 18px;
  width: min(920px, calc(100% - 40px));
  padding: 58px 0 76px;
  text-align: center;
}
.find-hero h1 {
  max-width: none;
  color: #ffffff;
  font-size: clamp(1.4rem, 2.1vw, 2.14rem);
  font-weight: 900;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.74),
    0 4px 22px rgba(0, 0, 0, 0.38);
}
.find-tabs,
.find-suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.find-tabs::-webkit-scrollbar,
.find-suggestions::-webkit-scrollbar {
  display: none;
}
.find-tabs {
  gap: 6px;
  margin-top: 2px;
  padding: 0 2px;
}
.find-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(1.2px);
  backdrop-filter: blur(1.2px);
}
.find-tab:hover {
  background: rgba(255, 255, 255, 0.39);
  color: #ffffff;
}
.find-tab.is-active {
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  box-shadow: none;
  text-shadow: none;
}
.find-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  justify-self: center;
  width: min(920px, 100%);
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 34px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(1.2px);
  backdrop-filter: blur(1.2px);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.find-search:focus-within {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.33);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 3px rgba(255, 255, 255, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.18);
}
.find-search-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.38));
}
#findSearchInput {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  padding: 0;
  box-shadow: none;
  font-size: 0.94rem;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
  outline: none;
}
#findSearchInput:hover,
#findSearchInput:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
#findSearchInput::placeholder {
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
}
#findSearchInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px)) center / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px)) center / 12px 12px no-repeat,
    rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: pointer;
  opacity: 1;
}
#findSearchInput::-webkit-search-cancel-button:hover {
  border-color: #ffffff;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px)) center / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px)) center / 12px 12px no-repeat,
    rgba(255, 255, 255, 0.18);
}
.find-suggestions {
  gap: 7px;
  justify-content: flex-start;
  width: 100%;
  padding: 0 2px 3px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
@media (hover: hover) and (pointer: fine){
.find-suggestions {
    cursor: grab;
    scroll-snap-type: none;
  }
.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-shell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: start;
  gap: 8px;
  justify-self: center;
  width: min(920px, 100%);
  min-width: 0;
  overflow: hidden;
}
.find-suggestions-shell[hidden] {
  display: none;
}
.find-suggestions-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.25);
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.36);
}
.find-suggestions-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.find-suggestions-arrow:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.34);
  color: #ffffff;
}
.find-suggestions-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.find-suggestions button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.79rem;
  font-weight: 800;
  white-space: nowrap;
  scroll-snap-align: start;
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.36);
  -webkit-backdrop-filter: blur(1.2px);
  backdrop-filter: blur(1.2px);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}
.find-suggestions button:hover,
.find-suggestions button.is-active {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.34);
  color: #ffffff;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.gallery-grid.is-empty {
  grid-template-columns: 1fr;
}
/* Let gallery cards keep their natural aspect ratios without allowing the
   tallest image in a grid row to create a large blank area below its
   landscape neighbours. This is scoped to the find page so the other grids
   that reuse .gallery-grid keep their existing layout. */
body[data-page="find"] .gallery-grid {
  display: block;
  columns: 4;
  column-gap: 24px;
  overflow-x: clip;
}
body[data-page="find"] .gallery-grid.is-empty {
  columns: 1;
}
body[data-page="find"] .gallery-grid > .gallery-card,
body[data-page="find"] .gallery-grid > .gallery-collection-card {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  break-inside: avoid;
}
body[data-page="find"] .gallery-grid > .inline-collection-heading,
body[data-page="find"] .gallery-grid > .empty-state {
  column-span: all;
}
body[data-page="find"] .gallery-topbar,
.account-album-content .gallery-topbar {
  justify-content: flex-end;
}
.gallery-card,
.feedback-card,
.order-card {
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(29, 43, 54, 0.06);
}
.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 10px;
  background: #eef3f6;
  box-shadow: none;
  break-inside: avoid;
}
body[data-page="find"] .gallery-card.is-gallery-reveal-pending {
  opacity: 0;
  transform: translate3d(var(--gallery-reveal-x), var(--gallery-reveal-y), 0)
    rotate(var(--gallery-reveal-rotate)) scale(0.94);
  transform-origin: center;
  will-change: opacity, transform;
}
body[data-page="find"] .gallery-card.is-gallery-reveal-running {
  animation: gallery-card-chaotic-reveal var(--gallery-reveal-duration)
    cubic-bezier(0.22, 1, 0.36, 1) var(--gallery-reveal-delay) both;
}
@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);
  }
}
@media (prefers-reduced-motion: reduce){
body[data-page="find"] .gallery-card.is-gallery-reveal-pending,
  body[data-page="find"] .gallery-card.is-gallery-reveal-running {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.gallery-image-button {
  display: block;
  line-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: #eef3f6;
  color: inherit;
  cursor: var(--ka-con-tro-phong-to), zoom-in;
}
/* Trang Tìm ảnh dùng con trỏ mặc định trên ảnh thu nhỏ theo yêu cầu. Nút vẫn
   mở ảnh khi bấm; chỉ bỏ biểu tượng kính lúp trên hover. Các kho ảnh ở trang
   tài khoản giữ nguyên con trỏ phóng to của chúng. */
body[data-page="find"] .gallery-image-button {
  cursor: default;
}
.gallery-image-button:hover img {
  transform: scale(1.025);
}
.gallery-card img,
.feedback-card img,
.order-thumb img {
  width: 100%;
  object-fit: cover;
}
.gallery-card .gallery-image-button img {
  display: block;
  height: auto;
  aspect-ratio: auto;
  transition: transform 180ms ease;
}
body[data-page="find"] .gallery-card .gallery-image-button img,
.account-album-content .gallery-card .gallery-image-button img {
  /* Keep the metadata ratio before lazy loading, then let the decoded image's
     intrinsic ratio take over. This prevents multi-column rebalancing. */
  aspect-ratio: auto var(--gallery-image-ratio, 1 / 1);
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.gallery-card:hover .gallery-overlay,
.gallery-card:focus-within .gallery-overlay {
  opacity: 1;
}
.gallery-topbar,
.gallery-bottom,
.gallery-actions,
.gallery-icon-row {
  display: flex;
  align-items: center;
}
.gallery-topbar,
.gallery-bottom {
  justify-content: space-between;
  gap: 12px;
}
.gallery-use-button,
.gallery-download-button,
.gallery-icon-button {
  pointer-events: none;
}
.gallery-card:hover .gallery-use-button,
.gallery-card:hover .gallery-download-button,
.gallery-card:hover .gallery-icon-button,
.gallery-card:focus-within .gallery-use-button,
.gallery-card:focus-within .gallery-download-button,
.gallery-card:focus-within .gallery-icon-button {
  pointer-events: auto;
}
.gallery-icon-row {
  flex: 0 0 auto;
  gap: 6px;
}
.gallery-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: rgba(18, 24, 31, 0.3);
  color: white;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(18, 24, 31, 0.16);
}
.gallery-icon-button.has-count {
  width: auto;
  min-width: 30px;
  padding: 0 8px;
  gap: 5px;
  border-radius: 999px;
}
.gallery-like-count {
  min-width: 1ch;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}
.gallery-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-icon-button.is-active svg {
  fill: currentColor;
}
.gallery-icon-button.card-save-button.is-active {
  background: var(--teal);
}
.gallery-icon-button.card-like-button.is-active {
  background: #df5570;
}
.gallery-download-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gallery-bottom {
  align-items: end;
  justify-content: end;
}
.gallery-actions {
  flex: 0 0 auto;
  justify-content: end;
  gap: 8px;
}
.gallery-use-button,
.gallery-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}
.gallery-use-button {
  gap: 8px;
  min-width: 120px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 252, 250, 0.9));
  color: var(--teal-dark);
  font-weight: 800;
  box-shadow:
    0 12px 28px rgba(8, 119, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-shadow: none;
}
.gallery-use-button::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-1px) rotate(45deg);
  transition: transform 160ms ease;
}
.gallery-download-button {
  gap: 8px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(18, 24, 31, 0.3);
  color: white;
  text-decoration: none;
}
.gallery-download-button span {
  display: none;
}
.gallery-use-button:hover {
  border-color: rgba(19, 155, 143, 0.46);
  background: #ffffff;
  box-shadow:
    0 16px 34px rgba(8, 119, 110, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: #075f59;
  transform: translateY(-1px);
}
.gallery-use-button:hover::after {
  transform: translateX(1px) rotate(45deg);
}
.gallery-use-button:active {
  transform: translateY(0);
}
.gallery-download-button:hover {
  background: rgba(255, 255, 255, 0.14);
}
.tag {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #edf7f5;
  color: var(--teal-dark);
  font-size: 0.76rem;
  font-weight: 800;
}
.feedback-layout {
  display: block;
}
.feedback-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.feedback-page-heading > div {
  min-width: 0;
}
.feedback-open-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  white-space: nowrap;
}
body.feedback-modal-open {
  overflow: hidden;
}
.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-lookup-status,
.feedback-form-error {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}
.feedback-lookup-status {
  color: var(--teal-dark);
  background: #edf9f7;
}
.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-order-summary[hidden] {
  display: none;
}
.feedback-order-summary-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #d4eae6;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}
.feedback-order-summary-heading strong {
  color: var(--ink);
  font-size: 0.8rem;
}
.feedback-order-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
.feedback-order-summary-grid span {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.65rem;
}
.feedback-order-summary-grid strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.72rem;
}
.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);
  }
}
.feed-toolbar {
  margin-bottom: 14px;
}
@media (max-width: 640px){
.feedback-page-heading {
    align-items: stretch;
    flex-direction: column;
  }
.feedback-open-button {
    width: 100%;
  }
.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;
  }
.feedback-order-summary-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce){
.feedback-modal-backdrop,
  .feedback-form.feedback-modal {
    animation: none;
  }
}
/* Feedback composer redesign */
.feedback-open-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  min-width: 238px;
  min-height: 64px;
  padding: 8px 12px 8px 9px;
  border: 1px solid rgba(5, 107, 99, 0.16);
  border-radius: 17px;
  background: linear-gradient(135deg, #16a596, #087b72);
  box-shadow: 0 14px 30px rgba(8, 123, 114, 0.2);
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.feedback-open-button:hover,
.feedback-open-button:focus-visible {
  background: linear-gradient(135deg, #10988b, #066d65);
  box-shadow: 0 18px 36px rgba(8, 123, 114, 0.27);
  outline: none;
  transform: translateY(-2px);
}
.feedback-open-button-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.17);
}
.feedback-open-button-icon svg,
.feedback-open-button-arrow svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.feedback-open-button-icon svg {
  width: 22px;
  height: 22px;
}
.feedback-open-button-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.feedback-open-button-copy strong {
  color: #fff;
  font-family: var(--font-brand);
  font-size: 0.78rem;
}
.feedback-open-button-copy small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.57rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-open-button-arrow {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
}
.feedback-open-button-arrow svg {
  width: 18px;
  height: 18px;
}
.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-modal-picker-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 2px 2px 10px;
}
.feedback-modal-picker-heading > div {
  display: grid;
  gap: 3px;
}
.feedback-modal-picker-heading strong {
  color: #294f50;
  font-family: var(--font-brand);
  font-size: 0.9rem;
}
.feedback-modal-picker-heading small {
  color: var(--muted);
  font-size: 0.61rem;
}
.feedback-modal-picker-heading > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #087b72;
  background: #dcf3ef;
  font-size: 0.59rem;
  font-weight: 850;
}
.feedback-modal-product-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.feedback-modal-product {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dce9e7;
  border-radius: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(36, 73, 74, 0.06);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.feedback-modal-product:hover,
.feedback-modal-product:focus-visible {
  border-color: rgba(9, 151, 140, 0.42);
  box-shadow: 0 12px 25px rgba(18, 112, 104, 0.13);
  outline: none;
  transform: translateY(-2px);
}
.feedback-modal-product:disabled {
  cursor: wait;
  opacity: 0.68;
}
.feedback-modal-product-image {
  grid-row: 1 / 3;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 12px;
  background: #e8f0ef;
}
.feedback-modal-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feedback-modal-product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.feedback-modal-product-copy strong,
.feedback-modal-product-copy span,
.feedback-modal-product-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-modal-product-copy strong {
  font-size: 0.71rem;
}
.feedback-modal-product-copy span {
  color: #5e7778;
  font-size: 0.59rem;
  font-weight: 700;
}
.feedback-modal-product-copy small {
  color: #8b999a;
  font-size: 0.53rem;
}
.feedback-modal-product-choose {
  display: inline-flex;
  width: max-content;
  gap: 4px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 8px;
  color: #087b72;
  background: #e5f6f2;
  font-size: 0.51rem;
  font-weight: 850;
}
.feedback-modal-product-choose > span {
  color: #e9b63d;
}
.feedback-modal-picker-empty {
  display: grid;
  justify-items: center;
  min-height: 260px;
  gap: 5px;
  place-content: center;
  padding: 28px;
  color: #6c8283;
  text-align: center;
}
.feedback-modal-picker-empty > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  border-radius: 15px;
  color: var(--teal);
  background: #dcf3ef;
}
.feedback-modal-picker-empty svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.feedback-modal-picker-empty strong {
  color: #355658;
  font-size: 0.76rem;
}
.feedback-modal-picker-empty small {
  font-size: 0.62rem;
}
.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 220ms ease both;
}
.feedback-form.is-order-verified .feedback-order-email-field,
.feedback-form.is-order-verified .feedback-order-id-field,
.feedback-form.is-order-verified .feedback-lookup-status {
  display: none;
}
@keyframes feedbackExperienceIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.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-lookup-status,
.feedback-form-error {
  border: 1px solid transparent;
  border-radius: 12px;
}
.feedback-lookup-status {
  border-color: #cce8e2;
}
.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-thumbnail {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #edf4f3;
  box-shadow: inset 0 0 0 1px rgba(16, 117, 108, 0.08);
  cursor: pointer;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.feedback-upload-thumbnail:hover,
.feedback-upload-thumbnail:focus-visible {
  box-shadow:
    inset 0 0 0 2px rgba(15, 151, 139, 0.62),
    0 7px 18px rgba(21, 94, 89, 0.16);
  outline: none;
  transform: translateY(-2px);
}
.feedback-upload-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feedback-upload-thumbnail strong {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(7, 119, 110, 0.9);
  box-shadow: 0 3px 9px rgba(8, 81, 77, 0.24);
  font-size: 0.5rem;
  font-weight: 900;
}
.feedback-upload-thumbnail-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(224, 78, 78, 0.9);
  box-shadow: 0 4px 10px rgba(119, 34, 34, 0.22);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}
.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-open-button {
    width: 100%;
    min-width: 0;
  }
.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-modal-picker-heading {
    align-items: flex-start;
    flex-direction: column;
  }
.feedback-modal-product-list {
    grid-template-columns: 1fr;
  }
.feedback-modal-product {
    grid-template-columns: 58px minmax(0, 1fr);
  }
.feedback-modal-product-image {
    width: 58px;
    height: 58px;
  }
.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%;
  }
}
.feedback-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feedback-media {
  position: relative;
  overflow: hidden;
  background: #eef3f6;
}
.feedback-media img {
  display: block;
  aspect-ratio: 4 / 3;
  transition: transform 180ms ease;
}
.feedback-card:hover .feedback-media img {
  transform: scale(1.025);
}
.feedback-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
}
.private-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 180px;
  padding: 20px;
  background: repeating-linear-gradient(135deg, #f1f5f8 0, #f1f5f8 10px, #e6edf2 10px, #e6edf2 20px);
  color: var(--muted);
  text-align: center;
  font-weight: 900;
}
.stars {
  color: #d9961b;
  font-weight: 900;
  letter-spacing: 0;
}
.orders-list {
  grid-template-columns: 1fr;
}
.orders-view-stage {
  min-width: 0;
}
.orders-view-stage.is-transitioning {
  pointer-events: none;
}
.orders-view-panel {
  transform-origin: center;
  will-change: transform, opacity;
}
.orders-view-panel.is-leaving-forward {
  animation: orderPanelLeaveForward 190ms ease-in both;
}
.orders-view-panel.is-entering-forward {
  animation: orderPanelEnterForward 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.orders-view-panel.is-leaving-back {
  animation: orderPanelLeaveBack 190ms ease-in both;
}
.orders-view-panel.is-entering-back {
  animation: orderPanelEnterBack 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@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-list-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(29, 43, 54, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.order-list-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto 24px;
  gap: 13px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 10px 13px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}
.order-list-row:hover,
.order-list-row:focus-visible {
  background: #f3faf8;
  outline: none;
}
.order-list-thumb {
  display: block;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: 11px;
  background: #eef3f6;
}
.order-list-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-list-summary {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.order-list-summary > span {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-list-summary > small {
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: #eaf7f4;
  font-size: 0.62rem;
  font-weight: 800;
}
.order-list-code {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}
.order-list-date {
  display: grid;
  gap: 2px;
  justify-items: end;
  min-width: 132px;
  text-align: right;
}
.order-list-date small {
  color: #91a0a2;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.order-list-date strong {
  color: #526b6e;
  font-size: 0.64rem;
  white-space: nowrap;
}
.order-list-chevron {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
  font-size: 1.1rem;
  transition: transform 180ms ease, color 180ms ease;
}
.order-list-chevron::before {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}
.order-list-row:hover .order-list-chevron,
.order-list-row:focus-visible .order-list-chevron {
  color: var(--teal);
  transform: translateX(2px);
}
.order-detail-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}
.order-detail-heading h3,
.order-detail-heading p {
  margin: 0;
}
.order-detail-heading h3 {
  margin-top: 2px;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}
.order-detail-heading-copy {
  min-width: 0;
}
.order-detail-heading small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
}
.order-detail-heading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
}
.order-detail-heading-meta small {
  margin-top: 0;
}
.order-detail-status {
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
}
.order-status-pill {
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}
.order-status-pill.is-new {
  border-color: #c9ddfa;
  color: #2865ad;
  background: #edf5ff;
}
.order-status-pill.is-confirmed {
  border-color: #b9e1dc;
  color: #16786f;
  background: #eaf8f5;
}
.order-status-pill.is-printing {
  border-color: #efd27a;
  color: #765400;
  background: #fff7d7;
}
.order-status-pill.is-shipping {
  border-color: #c4def0;
  color: #267599;
  background: #edf8fd;
}
.order-status-pill.is-completed {
  border-color: #bfe2c9;
  color: #257b42;
  background: #edf9f0;
}
.order-status-pill.is-cancelled {
  border-color: #d8dddf;
  color: #677477;
  background: #f3f5f5;
}
.order-status-pill.is-processing {
  border-color: #eed9aa;
  color: #916517;
  background: #fff8e8;
}
/* =============================================================================
   Chi tiết đơn: hai mặt "Thông tin đơn hàng" và "Tra cứu đơn hàng"
   =============================================================================
   Kỹ thuật trượt lấy từ hộp đăng nhập/đăng ký, nhưng CỠ SỐ thì làm riêng: hộp
   đó là cửa sổ hẹp giữa màn hình, còn đây là dải ngang trong trang. Dùng chung
   một bộ số đo là ép hai nhu cầu khác nhau vào một khuôn. */
.order-tab-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f2f6f8;
}
.order-tab-button {
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  /* Đậm hơn `--muted` một nấc. Trên rãnh `#f2f6f8` thì `--muted` chỉ đạt 4.28:1,
     dưới ngưỡng 4.5:1 — mà đây là chữ trên một cái nút bấm được, không phải chú
     thích. Màu này là 5.25:1, và cũng kéo giãn khoảng cách với trạng thái bị vô
     hiệu hoá phía dưới. */
  color: #5b6874;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.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);
}
/* Nút bị vô hiệu hoá vẫn phải ĐỌC ĐƯỢC, chỉ là không bấm được. Làm mờ tới mức
   không đọc nổi thì khách không biết chỗ đó là gì để mà chờ.

   Nhạt chữ VÀ nhạt cả nét, để tách khỏi "bật được nhưng chưa chọn" — chỉ đổi
   màu chữ thôi thì hai trạng thái đó trông na ná nhau. Không gạch ngang: gạch
   ngang đọc ra là "đã huỷ", không phải "chưa dùng được". */
.order-tab-button:disabled {
  color: #9aa8b2;
  font-weight: 600;
  cursor: not-allowed;
}
.order-tab-button:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}
.order-tab-switch-note {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 0.8rem;
}
.order-tab-shell {
  position: relative;
  overflow: hidden;
  transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.order-tab-shell.is-animating {
  will-change: height;
}
.order-tab-panel {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hai lớp này đặt bảng ra khỏi luồng để hai mặt chồng lên nhau trong lúc
   chuyển. Chính vì `inset: 0` mà phải đo chiều cao bảng đích TRƯỚC khi gắn
   chúng — xem chú thích ở animateOrderTabPanels() trong app.js. */
.order-tab-panel.is-entering,
.order-tab-panel.is-exiting {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
}
.order-tab-panel.is-entering {
  opacity: 0;
  transform: translateX(var(--order-tab-enter, 20px));
}
.order-tab-panel.is-exiting {
  opacity: 0;
  transform: translateX(var(--order-tab-exit, -20px));
}
/* =============================================================================
   Hộp hành trình vận chuyển
   =============================================================================
   Dùng ở cả chi tiết đơn trong trang tài khoản lẫn kết quả tra cứu của khách
   vãng lai, nên không có luật nào phụ thuộc vào thẻ cha của một trang cụ thể. */
.order-tracking {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.order-tracking-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.order-tracking-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.order-tracking-number {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.order-tracking-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-tracking-step {
  position: relative;
  padding: 0 0 18px 26px;
}
/* Đường nối dọc vẽ bằng ::before của chính mốc, không phải một phần tử riêng.
   Mốc CUỐI bỏ đường đi để nó không thò xuống dưới chấm cuối cùng. */
.order-tracking-step::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: var(--line);
}
.order-tracking-step:last-child {
  padding-bottom: 0;
}
.order-tracking-step:last-child::before {
  display: none;
}
.order-tracking-dot {
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c8d4dc;
}
/* Mốc mới nhất là thứ khách tìm trước tiên, nên nó đậm hơn hẳn phần còn lại —
   giống cách trang tra cứu của hãng vận chuyển làm. */
.order-tracking-step.is-latest .order-tracking-dot {
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(16, 40, 47, 0.1);
}
.order-tracking-body {
  display: grid;
  gap: 2px;
}
/* Chỉ tiêu đề của mốc MỚI NHẤT được tô mực và in đậm. Mọi chữ còn lại — kể cả
   tiêu đề của các mốc cũ — dùng chung một màu, để mắt rơi thẳng vào chỗ đơn
   hàng đang đứng thay vì phải quét qua một bảng nhiều mức đậm nhạt. */
.order-tracking-title {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}
.order-tracking-step.is-latest .order-tracking-title {
  color: var(--ink);
  font-weight: 850;
}
.order-tracking-content {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.order-tracking-time {
  color: var(--muted);
  font-size: 0.76rem;
}
/* Thu gọn là mặc định. Giấu bằng CSS chứ không bằng cách không dựng ra, để nút
   "xem thêm" chỉ phải bật một lớp — xem chú thích ở renderOrderTrackingBox().

   `:not(.is-animating)` là chỗ then chốt cho phần chuyển động: trong lúc chiều
   cao đang chạy thì các mốc thừa VẪN HIỆN, để thu gọn là cảnh nội dung bị cuốn
   dần lên chứ không phải tắt phụt rồi hộp rỗng co lại. */
.order-tracking:not(.is-expanded) .order-tracking-timeline:not(.is-animating) .order-tracking-step.is-extra {
  display: none;
}
/* Mốc cuối CÒN NHÌN THẤY phải bỏ đường nối, không phải mốc cuối trong danh sách.
   Lúc thu gọn thì mốc cuối thật đang bị ẩn, nên nếu chỉ dựa vào :last-child thì
   đường kẻ thò xuống dưới chấm cuối cùng rồi cụt giữa không trung. */
.order-tracking:not(.is-expanded) .order-tracking-timeline:not(.is-animating) .order-tracking-step:nth-child(2)::before {
  display: none;
}
.order-tracking:not(.is-expanded) .order-tracking-timeline:not(.is-animating) .order-tracking-step:nth-child(2) {
  padding-bottom: 0;
}
/* Chỉ DANH SÁCH bị kẹp chiều cao khi chạy, không phải cả hộp — xem chú thích ở
   toggleOrderTracking() trong app.js. Hộp ngoài để `auto` nên nó bám theo. */
.order-tracking-timeline.is-animating {
  overflow: hidden;
  transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.order-tracking:not(.is-expanded) .order-tracking-more-close,
.order-tracking.is-expanded .order-tracking-more-open {
  display: none;
}
.order-tracking-more {
  justify-self: start;
  min-height: 38px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.order-tracking-more:hover {
  border-color: var(--teal);
  background: #f6fbfb;
}
.order-tracking-more:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}
.order-tracking-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
@media (max-width: 620px){
.order-tab-button {
    padding: 9px 8px;
    font-size: 0.76rem;
  }
}
.order-detail-layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.order-detail-image {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #eef3f4;
}
.order-detail-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.order-detail-sections {
  display: grid;
  min-width: 0;
  gap: 12px;
}
.order-detail-section {
  padding: 14px;
  border: 1px solid #dce8e6;
  border-radius: 12px;
  background: #fff;
}
.order-detail-section h4 {
  margin: 0 0 11px;
  color: var(--teal-dark);
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
}
.order-detail-section dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}
.order-detail-section dl > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.order-detail-section dl > div.is-wide {
  grid-column: 1 / -1;
}
.order-detail-section dt {
  color: var(--muted);
  font-size: 0.62rem;
}
.order-detail-section dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}
.order-detail-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #dce8e6;
  border-radius: 14px;
  background: #fff;
}
.order-detail-actions-copy {
  display: grid;
  gap: 3px;
}
.order-detail-actions-copy strong {
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
}
.order-detail-actions-copy small {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.5;
}
.order-detail-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.order-action-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 142px;
  min-height: 50px;
  padding: 7px 11px 7px 8px;
  border: 1px solid #d5e3e2;
  border-radius: 12px;
  color: var(--ink);
  background: #f9fbfb;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.order-action-button > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.order-action-button strong,
.order-action-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-action-button strong {
  color: inherit;
  font-size: 0.68rem;
}
.order-action-button small {
  color: var(--muted);
  font-size: 0.57rem;
}
.order-action-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--teal-dark);
  background: #e9f7f4;
}
.order-action-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.order-action-button:hover,
.order-action-button:focus-visible {
  border-color: #9bcfc9;
  background: #f2faf8;
  box-shadow: 0 8px 18px rgba(15, 112, 102, 0.08);
  outline: none;
  transform: translateY(-1px);
}
.order-action-button.is-primary {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
}
.order-action-button.is-primary .order-action-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.order-action-button.is-primary small {
  color: rgba(255, 255, 255, 0.76);
}
.order-action-button.is-primary:hover,
.order-action-button.is-primary:focus-visible {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
}
.order-action-button.is-danger {
  border-color: #f2c8c4;
  color: #b52b24;
  background: #fff8f7;
}
.order-action-button.is-danger .order-action-icon {
  color: #d5362e;
  background: #ffe7e4;
}
.order-action-button.is-danger small {
  color: #a75c57;
}
.order-action-button.is-danger:hover,
.order-action-button.is-danger:focus-visible {
  border-color: #e35750;
  color: #9f1f19;
  background: #fff0ee;
  box-shadow: 0 8px 18px rgba(190, 49, 40, 0.12);
}
.order-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}
.order-action-button:disabled:hover {
  border-color: #d5e3e2;
  background: #f9fbfb;
  box-shadow: none;
  transform: none;
}
body.order-delete-modal-open {
  overflow: hidden;
}
.order-delete-modal-backdrop {
  position: fixed;
  z-index: 270;
  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: auto;
  background: rgba(27, 18, 18, 0.62);
  backdrop-filter: blur(8px);
  animation: feedbackBackdropIn 180ms ease both;
}
.order-delete-modal-backdrop[hidden] {
  display: none;
}
.order-delete-modal {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(460px, 100%);
  padding: 34px 32px 28px;
  border: 1px solid rgba(180, 45, 37, 0.14);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(29, 18, 18, 0.24);
  text-align: center;
  animation: feedbackModalIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.order-delete-modal-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  border: 1px solid #ffc9c4;
  border-radius: 22px;
  color: #d5362e;
  background: linear-gradient(145deg, #fff4f2, #ffe1dd);
  box-shadow: 0 14px 26px rgba(201, 48, 39, 0.12);
}
.order-delete-modal-icon svg,
.order-delete-confirm-button svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.order-delete-modal .eyebrow {
  margin: 0 0 7px;
  color: #c3352d;
}
.order-delete-modal h2 {
  margin: 0;
  color: #332828;
  font-family: var(--font-brand);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
}
.order-delete-modal > p:not(.eyebrow) {
  margin: 13px 0 0;
  color: #725f5d;
  font-size: 0.72rem;
  line-height: 1.7;
}
.order-delete-modal > p strong {
  color: #a12620;
  overflow-wrap: anywhere;
}
.order-delete-modal-note {
  width: 100%;
  margin-top: 18px;
  padding: 10px 13px;
  border: 1px solid #f4d3cf;
  border-radius: 12px;
  color: #9c4d47;
  background: #fff7f6;
  font-size: 0.62rem;
  font-weight: 750;
}
.order-delete-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
}
.order-delete-modal-actions > button {
  min-height: 48px;
  border-radius: 13px;
}
.order-delete-confirm-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid #bd2d26;
  color: #fff;
  background: #d83b33;
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.order-delete-confirm-button span {
  display: grid;
  place-items: center;
}
.order-delete-confirm-button svg {
  width: 18px;
  height: 18px;
}
.order-delete-confirm-button:hover,
.order-delete-confirm-button:focus-visible {
  border-color: #8f1f1a;
  background: #af2923;
  outline: none;
  transform: translateY(-1px);
}
.order-delete-confirm-button:disabled,
.order-delete-modal-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}
.order-delete-modal .form-error {
  width: 100%;
  margin-top: 12px;
  text-align: left;
}
@media (max-width: 760px){
.order-list-row {
    grid-template-columns: 54px minmax(0, 1fr) 22px;
    gap: 10px;
    padding: 9px 10px;
  }
.order-list-thumb {
    width: 54px;
    height: 54px;
  }
.order-list-code {
    display: none;
  }
.order-detail-layout {
    grid-template-columns: 1fr;
  }
.order-detail-image {
    width: min(180px, 100%);
  }
.order-detail-section {
    padding: 12px;
  }
.order-detail-section dl {
    grid-template-columns: 1fr;
  }
.order-detail-section dl > div.is-wide {
    grid-column: auto;
  }
.order-detail-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
.order-detail-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }
.order-action-button {
    width: 100%;
  }
.order-detail-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }
.order-delete-modal {
    padding: 30px 20px 22px;
    border-radius: 20px;
  }
.order-delete-modal-actions {
    grid-template-columns: 1fr;
  }
}
.empty-state {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}
.toast {
  --toast-accent: #139b8f;
  --toast-accent-dark: #08776e;
  --toast-tint: #ecfffb;
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  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(420px, calc(100vw - 32px));
  min-height: 68px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 11px 17px 13px 11px;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 34%, white);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--toast-accent) 14%, transparent), transparent 38%),
    linear-gradient(125deg, var(--toast-tint), #ffffff 72%);
  color: #24323c;
  box-shadow:
    0 18px 42px rgba(24, 35, 45, 0.17),
    0 5px 14px color-mix(in srgb, var(--toast-accent) 15%, transparent);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.01em;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -34px, 0) scale(0.98);
  transition:
    opacity 210ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.toast[hidden] {
  display: none;
}
.toast::before {
  content: "";
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 60%, white);
  border-radius: 50%;
  background:
    var(--toast-icon) center / 22px 22px no-repeat,
    linear-gradient(145deg, color-mix(in srgb, var(--toast-accent) 78%, white), var(--toast-accent-dark));
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--toast-accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.toast::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(90deg, var(--toast-accent-dark), var(--toast-accent));
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.toast[data-toast-kind="error"] {
  --toast-accent: #f06a4f;
  --toast-accent-dark: #cf493a;
  --toast-tint: #fff3ed;
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
}
.toast[data-toast-kind="success"] {
  --toast-accent: #21a875;
  --toast-accent-dark: #087a54;
  --toast-tint: #ebfff5;
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}
.toast[data-toast-kind="warning"] {
  --toast-accent: #ee9b26;
  --toast-accent-dark: #c56d13;
  --toast-tint: #fff9e9;
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.5 3.4 17a2 2 0 0 0 1.8 3h13.6a2 2 0 0 0 1.8-3L13.7 4.5a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.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: 62px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 14px 12px 10px;
    border-radius: 16px;
    font-size: 0.79rem;
  }
.toast::before {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: 20px 20px, auto;
  }
}
.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 {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(480px, 100%);
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.quality-card h2 {
  font-size: 1.45rem;
}
.quality-card .modal-close {
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
}
.quality-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}
.quality-stats {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
}
.quality-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.quality-actions button {
  width: 100%;
  min-width: 0;
}
.image-modal-backdrop {
  padding: clamp(12px, 3vw, 28px);
}
.image-modal {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  width: min(1120px, 100%);
  max-height: calc(100vh - 40px);
  padding: 16px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.image-modal-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #101820;
}
.image-modal-stage img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(74vh, 760px);
  object-fit: contain;
}
.image-order-options {
  display: grid;
  grid-template-columns: minmax(230px, 0.95fr) minmax(250px, 1.05fr);
  gap: 10px;
  min-width: min(560px, 100%);
}
.sample-choice-group {
  display: grid;
  gap: 7px;
}
.sample-choice-group.is-disabled {
  opacity: 0.48;
}
.sample-choice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}
.image-choice-grid {
  display: grid;
  gap: 6px;
}
.service-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.size-picker {
  position: relative;
}
.size-picker-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: left;
}
.size-picker-trigger:hover,
.size-picker-trigger[aria-expanded="true"] {
  border-color: var(--teal);
  background: #f4fbfa;
}
.size-picker-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.size-picker-arrow {
  display: inline-grid;
  place-items: center;
  color: var(--teal-dark);
  font-size: 1rem;
}
.size-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 12;
  display: grid;
  gap: 5px;
  max-height: 280px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.size-menu-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.size-menu-option:hover,
.size-menu-option.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.size-menu-option strong,
.size-menu-option small {
  display: block;
}
.size-menu-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}
.image-choice {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.78rem;
  text-align: left;
  font-weight: 900;
}
.image-choice:hover,
.image-choice.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.choice-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 6px;
  background: #eef8f7;
  color: var(--teal-dark);
  font-size: 0.6rem;
  font-weight: 900;
}
.choice-icon svg {
  width: 19px;
  height: 19px;
}
.choice-icon path,
.choice-icon rect,
.choice-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.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);
}
.image-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: end;
}
.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);
  }
}
@media (max-width: 1220px){
.builder-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-areas:
      "service preview"
      "options preview"
      "thong-tin thong-tin";
  }
.product-info-panel {
    grid-column: 1 / -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){
.studio-intro,
  .feedback-layout {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
.checkout-page-layout,
  .checkout-form-grid,
  .invoice-meta {
    grid-template-columns: 1fr;
  }
.checkout-wide-field {
    grid-column: auto;
  }
.checkout-payment-form {
    padding: 22px;
  }
.checkout-form-grid {
    row-gap: 16px;
  }
.invoice-line {
    grid-template-columns: minmax(0, 1fr) 42px 110px;
  }
.find-hero {
    min-height: 380px;
  }
.find-hero-content {
    width: min(820px, calc(100% - 28px));
  }
.find-tabs {
    justify-content: flex-start;
  }
.feedback-form {
    position: static;
  }
.gallery-grid,
  .feedback-list,
  .orders-list {
    grid-template-columns: 1fr 1fr;
  }
.gallery-grid {
    gap: 18px;
  }
body[data-page="find"] .gallery-grid {
    columns: 2;
    column-gap: 18px;
  }
body[data-page="find"] .gallery-grid > .gallery-card,
  body[data-page="find"] .gallery-grid > .gallery-collection-card {
    margin-bottom: 18px;
  }
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
.service-card {
    min-width: 0;
  }
}
/* --------------------------------------------------------------------------
   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){
.checkout-address-field-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
.checkout-address-modal-backdrop {
    align-items: end;
    padding:
      max(12px, 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));
  }
.checkout-address-modal {
    width: 100%;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 0;
    border-radius: 25px 25px 15px 15px;
  }
.checkout-address-modal::before {
    right: 56px;
    left: 56px;
  }
.checkout-address-modal-heading {
    align-items: flex-start;
    gap: 12px;
    padding: 19px 16px 12px;
  }
.checkout-address-modal-heading-main {
    align-items: flex-start;
    gap: 11px;
  }
.checkout-address-modal-symbol {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
    border-radius: 14px;
  }
.checkout-address-modal-symbol svg {
    width: 23px;
    height: 23px;
  }
.checkout-address-modal-heading h2 {
    font-size: clamp(1.08rem, 5vw, 1.28rem);
  }
.checkout-address-modal-heading-copy > p:last-child {
    max-width: 250px;
    font-size: 0.69rem;
  }
.checkout-address-modal-summary {
    margin: 0 16px 10px;
    padding: 8px 10px;
  }
.checkout-address-list {
    gap: 9px;
    max-height: none;
    padding: 2px 16px 7px;
  }
.checkout-address-option {
    grid-template-columns: 39px minmax(0, 1fr) 22px;
    gap: 10px;
    padding: 12px 11px;
    border-radius: 15px;
  }
.checkout-address-option-icon {
    width: 39px;
    height: 39px;
    border-radius: 13px;
  }
.checkout-address-option-icon svg {
    width: 20px;
    height: 20px;
  }
.checkout-address-option-heading {
    align-items: flex-start;
  }
.checkout-address-option-heading strong {
    font-size: 0.82rem;
  }
.checkout-address-option-heading .badge {
    padding: 4px 6px;
    font-size: 0.56rem;
  }
.checkout-address-option-check {
    width: 21px;
    height: 21px;
  }
.checkout-address-value {
    font-size: 0.7rem;
  }
.checkout-address-modal-footer {
    padding: 10px 16px max(14px, env(safe-area-inset-bottom, 0px));
  }
.checkout-address-manage-link {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 8px 10px;
  }
.checkout-address-manage-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }
.service-grid {
    gap: 8px;
    grid-template-columns: 1fr;
  }
.upload-zone,
  .sample-strip,
  .sample-more-link {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
.app {
    padding-inline: 12px;
  }
.find-view {
    gap: 16px;
  }
.find-hero {
    min-height: 420px;
    border-radius: 8px;
    background-position: center;
  }
.find-hero-content {
    width: calc(100% - 24px);
    gap: 14px;
    padding: 42px 0 88px;
    text-align: left;
  }
.find-hero h1 {
    font-size: clamp(1.27rem, 6.3vw, 1.82rem);
    line-height: 1.12;
  }
.find-tabs,
  .find-suggestions {
    justify-content: flex-start;
    margin-inline: -12px;
    padding-inline: 12px;
    width: calc(100% + 24px);
  }
.find-tab {
    min-height: 36px;
    padding-inline: 11px;
    font-size: 0.78rem;
  }
.find-search {
    min-height: 50px;
    padding-inline: 16px;
  }
.find-suggestions button {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 0.74rem;
  }
.intro-copy h1,
  .page-heading h1 {
    max-width: 100%;
    font-size: 2.15rem;
  }
.preview-board {
    min-height: 340px;
    padding: 12px;
  }
.product-shell {
    height: 300px;
    min-height: 300px;
  }
.crop-workspace {
    gap: 7px;
  }
.crop-preview-layout {
    --crop-stack-gap: 6px;
  }
.crop-toolbar {
    justify-content: start;
  }
.crop-zoom-stepper {
    margin-left: 0;
  }
.crop-workspace.has-crop-controls .crop-preview-layout {
    --crop-y-rail: 18px;
    --crop-x-row: 26px;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
.crop-workspace.has-crop-controls .crop-board-stack {
    grid-template-rows: minmax(0, 1fr) var(--crop-x-row);
    gap: 6px;
  }
.crop-axis-x {
    height: 26px;
  }
.option-list.compact,
  .gallery-grid,
  .feedback-list,
  .orders-list {
    grid-template-columns: 1fr;
  }
.gallery-grid {
    gap: 16px;
  }
.gallery-card {
    margin-bottom: 0;
  }
.find-suggestions-shell {
    display: block;
    width: 100%;
    margin-inline: 0;
  }
.find-suggestions {
    width: 100%;
    margin-inline: 0;
    padding-inline: 4px;
    scroll-padding-inline: 4px;
  }
.find-suggestions-arrow {
    display: none;
  }
body[data-page="find"] .gallery-grid {
    columns: 1;
    column-gap: 16px;
  }
body[data-page="find"] .gallery-grid > .gallery-card,
  body[data-page="find"] .gallery-grid > .gallery-collection-card {
    margin-bottom: 16px;
  }
.gallery-overlay {
    opacity: 1;
    padding: 12px;
  }
.gallery-bottom {
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }
.gallery-actions {
    flex: 0 0 auto;
    justify-content: end;
  }
.gallery-use-button {
    flex: 0 0 auto;
  }
.gallery-download-button {
    flex: 0 0 38px;
  }
.feed-toolbar,
  .panel-heading.row {
    align-items: start;
    flex-direction: column;
  }
.image-modal {
    max-height: calc(100vh - 24px);
    padding: 12px;
  }
.image-modal-stage img {
    max-height: 64vh;
  }
.image-order-options {
    grid-template-columns: 1fr;
    min-width: 0;
  }
.service-choice-grid,
  .size-choice-grid {
    grid-template-columns: 1fr;
  }
.service-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
.service-choice-grid .service-choice {
    flex: 1 1 calc(50% - 6px);
    min-width: 136px;
  }
.image-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (hover: none){
.gallery-overlay {
    opacity: 1;
  }
.gallery-use-button,
  .gallery-download-button {
    pointer-events: auto;
  }
}
/* 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, yêu thích, 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-heading,
  .invoice-actions,
  .checkout-page .toast {
    display: none !important;
  }
.checkout-app {
    width: 100%;
    padding: 0;
  }
.invoice-sheet {
    width: 100%;
    border: 0;
    box-shadow: none;
  }
}
.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-sidebar [data-manager-accordion-panel].is-expanded .manager-accordion-chevron {
  transform: rotate(180deg);
}
.manager-bulk-panel.is-expanded {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: var(--manager-bulk-max-height, calc(100dvh - 120px));
}
.manager-bulk-panel.is-expanded .manager-accordion-content {
  min-height: 0;
  padding-right: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.manager-bulk-collection .primary-button,
.manager-bulk-danger .manager-delete-button {
  width: 100%;
  justify-content: center;
}
.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;
  }
}
/* 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;
  }
}
/* Large catalog image modal */
body.sample-modal-open {
  overflow-x: hidden;
  overflow-y: scroll;
}
.image-modal,
.image-modal-backdrop {
  will-change: transform, opacity;
}
.image-modal-backdrop {
  overscroll-behavior: none;
  touch-action: none;
}
.image-order-options,
.image-order-options .size-picker-menu {
  touch-action: pan-y;
}
.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;
}
.sample-transition-source {
  opacity: 0 !important;
}
.image-modal-backdrop {
  padding: 36px 60px 36px 36px;
  background:
    radial-gradient(circle at 11% 13%, rgba(255, 210, 112, 0.28), transparent 27%),
    radial-gradient(circle at 88% 12%, rgba(115, 219, 205, 0.3), transparent 31%),
    radial-gradient(circle at 84% 88%, rgba(255, 159, 165, 0.18), transparent 29%),
    linear-gradient(145deg, rgba(250, 255, 254, 0.96), rgba(232, 249, 246, 0.96));
  backdrop-filter: blur(14px);
}
.image-modal {
  position: relative;
  display: block;
  width: var(--sample-modal-fit-width, min(1380px, calc(100vw - 96px)));
  height: var(--sample-modal-fit-height, min(900px, calc(100dvh - 72px)));
  max-width: calc(100vw - 96px);
  max-height: calc(100dvh - 72px);
  overflow: visible;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(6, 18, 25, 0.36);
}
.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-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: #fff;
}
.image-modal-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
body[data-page="find"] .image-modal {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-page="find"] .image-modal-stage {
  border-radius: 0;
  background: transparent;
}
/* Bitmap cũ của cùng thẻ <img> phải biến mất ngay khi người dùng mở một ảnh
   khác. JavaScript chỉ gỡ lớp này sau khi thumbnail của ảnh mới decode xong. */
body[data-page="find"] #sampleModalImage {
  opacity: 1;
  transition: opacity 160ms ease;
}
body[data-page="find"] #sampleModalImage.is-switching-sample {
  opacity: 0;
}
.image-modal-topbar {
  position: absolute;
  z-index: 7;
  top: clamp(12px, 2vw, 24px);
  left: clamp(12px, 2vw, 24px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(100% - 188px);
}
.image-modal-title {
  position: static;
  z-index: auto;
  max-width: min(660px, 72vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.image-modal-title h2 {
  overflow: hidden;
  margin: 0;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.9rem, 1.7vw, 1.2rem);
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.96),
    0 0 12px rgba(255, 255, 255, 0.88);
}
.gallery-credit strong,
.image-modal-title h2 {
  color: #ffffff;
  -webkit-text-stroke: 0.45px rgba(84, 94, 104, 0.92);
  paint-order: stroke fill;
  text-shadow:
    -0.4px -0.4px 0 rgba(84, 94, 104, 0.72),
    0.4px -0.4px 0 rgba(84, 94, 104, 0.72),
    -0.4px 0.4px 0 rgba(84, 94, 104, 0.72),
    0.4px 0.4px 0 rgba(84, 94, 104, 0.72);
}
.image-modal-quick-actions {
  position: absolute;
  z-index: 12;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}
.image-modal .modal-quick-action,
.image-modal .modal-download-button,
.image-modal .modal-use-button {
  pointer-events: auto;
}
.image-modal .modal-quick-action {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  backdrop-filter: none;
  cursor: pointer;
}
.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);
}
.image-modal #sampleLikeButton.is-active {
  border-color: rgba(255, 255, 255, 0.9);
  background: #df5570;
}
.image-modal #sampleShareButton.is-copied {
  border-color: rgba(255, 255, 255, 0.9);
  background: var(--teal);
  color: #fff;
}
.image-modal .modal-download-button {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(18, 24, 31, 0.2);
}
.image-modal .modal-use-button {
  min-width: 132px;
  border: 1px solid rgba(105, 117, 130, 0.45);
  background: #fff;
  backdrop-filter: none;
}
.image-modal-actions {
  position: absolute;
  z-index: 7;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.image-order-options {
  position: absolute;
  z-index: 9;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(76px, 8vw, 92px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: min(720px, calc(100% - 48px));
  min-width: 0;
  max-height: calc(100% - 140px);
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: none;
  transform-origin: bottom center;
  animation: sampleOptionsEnter 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}
.image-order-options.is-closing {
  pointer-events: none;
}
.image-order-options-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}
.image-modal > .size-picker-menu {
  position: absolute;
  z-index: 20;
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  margin: 0;
  max-height: 220px;
  transform-origin: top center;
  --size-menu-enter-y: -8px;
  animation: sampleSizeMenuEnter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, scale, translate;
}
.image-modal > .size-picker-menu.is-above {
  transform-origin: bottom center;
  --size-menu-enter-y: 8px;
}
/* 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;
  }
}
/* Nút chính của bảng chọn sản phẩm: một khối màu ngọc phẳng, bo tròn viên
   thuốc theo đúng ngôn ngữ nút của trang. Không chuyển màu, không bóng đổ,
   không viền — chỉ đổi nền khi rê chuột và khi bấm. */
.image-options-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.15;
  transition: background 150ms ease;
}
.image-options-confirm:hover:not(:disabled) {
  background: var(--teal-dark);
}
.image-options-confirm:active:not(:disabled) {
  background: #066259;
}
.image-options-confirm:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 3px;
}
/* app.js tắt nút khi khách chưa chọn kích thước. Giữ chữ đọc được thay vì làm
   mờ tịt, để khách còn biết mình đang thiếu bước nào. */
.image-options-confirm:disabled {
  color: #6b7d84;
  background: #e6edef;
  cursor: not-allowed;
}
/* ------------------------------------------------------------------------- */
/* Nút "Sử dụng ảnh" thu lại thành hình tròn khi bảng chọn đang mở            */
/* ------------------------------------------------------------------------- */

/* Nút vừa mở vừa đóng bảng. Lúc bảng mở nó co lại thành hình tròn, chữ thu về 0
   và mũi tên hiện ra hướng lên — vừa nhường chỗ cho bảng vừa cho biết bấm lần
   nữa là đóng. */
.image-modal .modal-use-button {
  overflow: hidden;
  transition:
    min-width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 160ms ease,
    color 160ms ease;
}
.image-modal .modal-use-button .modal-use-label {
  display: inline-block;
  max-width: 12ch;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
}
/* Nút vốn đã có sẵn một chevron vẽ bằng border ở ::after, bình thường xoay 45deg
   nên hướng sang phải. Cho nó xoay thành hướng lên khi bảng mở, thay vì thêm
   một mũi tên thứ hai. */
.image-modal .modal-use-button::after {
  flex: none;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Trạng thái mở: hình tròn, chỉ còn chevron hướng lên. */
.image-modal .modal-use-button[aria-expanded="true"] {
  width: 38px;
  min-width: 38px;
  /* Bỏ cả khe hở giữa chữ và mũi tên, nếu không nó vẫn chiếm chỗ và bóp mũi
     tên lại trong hình tròn 38px. */
  gap: 0;
  padding: 0;
}
.image-modal .modal-use-button[aria-expanded="true"] .modal-use-label {
  max-width: 0;
  opacity: 0;
}
/* Thu tròn rồi thì đổi hẳn sang dấu ×: hai vạch bắt chéo nhau.

   Chevron gốc của nút vẽ bằng hai cạnh viền của một ô 7x7 nên không dựng thành
   dấu × được. Ở trạng thái mở, biến ::after thành một vạch ngang 14x2 rồi xoay
   45deg, và thêm ::before làm vạch còn lại xoay -45deg. Hai vạch cùng lấy tâm
   nút làm gốc nên cắt nhau đúng giữa hình tròn. */
.image-modal .modal-use-button {
  position: relative;
}
.image-modal .modal-use-button[aria-expanded="true"]::after,
.image-modal .modal-use-button[aria-expanded="true"]:hover::after {
  width: 14px;
  height: 0;
  border-top: 2px solid currentColor;
  border-right: 0;
  border-radius: 2px;
  transform: rotate(45deg);
}
.image-modal .modal-use-button[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 0;
  /* Lùi nửa bề rộng và nửa bề dày để tâm vạch trùng tâm nút. */
  margin: -1px 0 0 -7px;
  border-top: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce){
.image-modal .modal-use-button,
  .image-modal .modal-use-button .modal-use-label,
  .image-modal .modal-use-button::after {
    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;
  }
}
.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-page {
  padding-top: 40px;
  padding-bottom: 88px;
}
.account-view {
  display: grid;
  gap: 24px;
}
.account-page-content {
  display: grid;
  gap: 24px;
}
.account-summary,
.account-section,
.account-login-required {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(32, 60, 69, 0.07);
}
.account-welcome h2,
.account-section-heading h2 {
  margin: 2px 0 0;
  font-family: "Inter", sans-serif;
  line-height: 1.12;
}
.account-section {
  scroll-margin-top: 92px;
  padding: clamp(20px, 3vw, 30px);
}
.account-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.account-section-heading h2 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.account-section-heading > div > p:last-child {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
.account-section-count {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--mint);
  font-size: 0.68rem;
  font-weight: 800;
}
.account-image-grid {
  display: block;
  columns: 5;
  column-gap: 18px;
}
.account-image-grid.is-small {
  columns: 8;
  column-gap: 9px;
}
.account-image-grid.is-medium {
  columns: 5;
}
.account-image-grid.is-large {
  columns: 3;
  column-gap: 24px;
}
.account-image-grid > .account-gallery-card {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  break-inside: avoid;
}
.account-image-grid.is-small > .account-gallery-card {
  margin-bottom: 9px;
}
.account-image-grid.is-large > .account-gallery-card {
  margin-bottom: 24px;
}
.account-gallery-card {
  border-radius: 9px;
}
.account-empty-state {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 190px;
  place-content: center;
  padding: 28px;
  border: 1px dashed #c9dcda;
  border-radius: 16px;
  color: var(--muted);
  background: #f9fbfb;
  text-align: center;
}
.account-empty-state strong {
  color: var(--ink);
}
.account-empty-state .secondary-button {
  margin-top: 8px;
  text-decoration: none;
}
.account-empty-state.compact {
  min-height: 140px;
}
.account-empty-state.is-error {
  color: #a24141;
  border-color: #ecc3c3;
  background: #fff8f8;
}
.account-address-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 20px;
  align-items: start;
}
.account-address-layout.is-form-hidden {
  grid-template-columns: 1fr;
}
body.account-address-modal-open {
  overflow: hidden;
}
.account-address-modal-backdrop {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow: auto;
  background:
    radial-gradient(circle at 16% 12%, rgba(61, 196, 181, 0.14), transparent 32%),
    rgba(10, 27, 33, 0.56);
  backdrop-filter: blur(9px) saturate(1.08);
  animation: accountAddressBackdropIn 180ms ease both;
}
.account-address-modal {
  width: min(640px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-color: rgba(193, 225, 221, 0.9);
  border-radius: 24px;
  background: #f8fcfb;
  box-shadow:
    0 30px 90px rgba(8, 24, 31, 0.33),
    0 0 0 1px rgba(255, 255, 255, 0.42);
  animation: accountAddressModalIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@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-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.account-address-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  min-width: 0;
  min-height: 265px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid #d5e5e3;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(80, 208, 191, 0.1), transparent 33%),
    linear-gradient(155deg, #ffffff 0%, #fbfefd 100%);
  box-shadow:
    0 14px 35px rgba(24, 77, 78, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  transition:
    border-color 190ms ease,
    box-shadow 190ms ease,
    transform 190ms ease;
}
.account-address-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #d9dfe1, #aeb8bb, #d3dade);
  content: "";
}
.account-address-card::after {
  position: absolute;
  z-index: 0;
  top: -58px;
  right: -54px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(50, 190, 176, 0.06);
  content: "";
  pointer-events: none;
}
.account-address-card.is-default {
  border-color: #78cfc4;
  background:
    radial-gradient(circle at 100% 0, rgba(55, 202, 183, 0.17), transparent 36%),
    linear-gradient(155deg, #ffffff 0%, #f1fbf9 100%);
  box-shadow:
    0 17px 42px rgba(17, 124, 113, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.account-address-card.is-default::before {
  background: linear-gradient(90deg, #1cc0ad, #087f76, #52d4c3);
}
.account-address-card-heading,
.account-address-actions {
  position: relative;
  z-index: 1;
}
.account-address-card-heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}
.account-address-card-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(52, 180, 166, 0.18);
  border-radius: 15px;
  color: #168e82;
  background: linear-gradient(145deg, #e9faf7, #d8f3ef);
  box-shadow: 0 8px 18px rgba(20, 138, 128, 0.1);
}
.account-address-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.account-address-card-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.account-address-card-identity small {
  color: #72908e;
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.account-address-card-identity strong {
  overflow: hidden;
  color: #193f3c;
  font-family: var(--font-brand);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-address-default-badge {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(24, 164, 149, 0.19);
  border-radius: 999px;
  color: #08786e;
  background: rgba(226, 248, 244, 0.88);
  font-size: 0.57rem;
  font-weight: 900;
  white-space: nowrap;
}
.account-address-default-badge svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.account-address-card-details {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  align-content: start;
}
.account-address-detail-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid rgba(202, 224, 221, 0.78);
  border-radius: 13px;
  background: rgba(248, 252, 251, 0.82);
}
.account-address-detail-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #309b91;
  background: #e9f7f5;
}
.account-address-detail-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.account-address-detail-row > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.account-address-detail-row small {
  color: #809694;
  font-size: 0.56rem;
  font-weight: 800;
}
.account-address-detail-row strong {
  color: #294d4a;
  font-size: 0.72rem;
}
.account-address-detail-row address {
  color: #506b69;
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.6;
}
.account-address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(205, 224, 222, 0.78);
}
.account-address-action.is-edit {
  color: #147f76;
  border-color: rgba(56, 163, 153, 0.19);
  background: #edf9f7;
}
.account-address-action.is-default {
  flex: 1 1 auto;
  color: #8b681f;
  border-color: rgba(220, 175, 65, 0.23);
  background: #fff9e8;
}
.account-address-action.is-danger {
  margin-left: auto;
  color: #b24755;
  border-color: rgba(210, 103, 116, 0.2);
  background: #fff2f4;
}
@media (min-width: 951px) and (max-width: 1025px){
.account-address-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }
.account-address-action.is-default {
    flex: 1 1 0;
  }
.account-address-action.is-danger {
    margin-left: 0;
  }
}
@media (hover: hover) and (pointer: fine){
.account-address-card:hover {
    border-color: #95cec7;
    box-shadow:
      0 20px 48px rgba(24, 97, 94, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
  }
}
.account-address-form {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(191, 224, 219, 0.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(79, 207, 191, 0.08), transparent 28%),
    #f8fcfb;
}
.account-address-form-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  gap: 11px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(202, 226, 223, 0.86);
  background:
    radial-gradient(circle at 92% 0, rgba(255, 206, 91, 0.13), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(236, 249, 247, 0.9));
}
.account-address-form-symbol {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(48, 178, 164, 0.18);
  border-radius: 14px;
  color: #11877e;
  background: linear-gradient(145deg, #e8faf7, #d6f2ee);
  box-shadow:
    0 9px 22px rgba(18, 128, 119, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.account-address-form.is-editing .account-address-form-symbol {
  color: #2d7896;
  border-color: rgba(75, 151, 183, 0.2);
  background: linear-gradient(145deg, #edf8fc, #ddecf3);
}
.account-address-form-symbol svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-address-form-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.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-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 23px 15px;
}
.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-address-default-field {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin: 0 23px 17px;
  padding: 12px 13px;
  border: 1px solid #d3e5e2;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(242, 249, 248, 0.86);
  cursor: pointer;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}
.account-address-default-field input {
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 0;
  place-content: center;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1px solid #aacbc7;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(31, 79, 75, 0.05);
  cursor: pointer;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.account-address-default-field input::after {
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.5);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
.account-address-default-field input:checked {
  border-color: #118b82;
  background: linear-gradient(145deg, #2eb4a5, #087a72);
  box-shadow: 0 5px 11px rgba(8, 122, 114, 0.2);
}
.account-address-default-field input:checked::after {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.account-address-default-field:has(input:checked) {
  border-color: #a9d8d2;
  background: linear-gradient(145deg, #f0faf8, #eaf7f5);
}
.account-address-default-field:focus-within {
  border-color: #62bbb2;
  box-shadow: 0 0 0 3px rgba(21, 143, 132, 0.1);
}
.account-address-default-copy {
  display: grid;
  gap: 3px;
}
.account-address-default-copy strong {
  color: #315653;
  font-size: 0.68rem;
}
.account-address-default-copy small {
  color: #7a918f;
  font-size: 0.59rem;
  font-weight: 650;
  line-height: 1.45;
}
.account-address-form-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 23px 23px;
}
.account-address-loading {
  grid-column: 1 / -1;
  min-height: 140px;
  padding: 30px;
  border-radius: 14px;
  color: var(--muted);
  background: #f7fafa;
  text-align: center;
}
.account-login-required {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 390px;
  place-content: center;
  padding: 40px 20px;
  text-align: center;
}
.account-login-required h2 {
  margin: 4px 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.account-login-required > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.account-login-actions {
  display: flex;
  gap: 9px;
  margin-top: 14px;
}
@media (max-width: 1000px){
.account-address-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px){
.account-page {
    width: 100%;
    padding-top: 4px;
    padding-right: 0;
    padding-bottom: 54px;
    padding-left: 0;
  }
.account-view,
  .account-page-content {
    width: 100%;
    gap: 14px;
  }
.account-section {
    padding: 18px 14px;
    border-radius: 18px;
  }
.account-section-heading {
    gap: 12px;
  }
.account-image-grid,
  .account-address-list {
    grid-template-columns: 1fr;
  }
.account-address-card {
    min-height: 0;
    padding: 16px;
    border-radius: 17px;
  }
.account-address-card-heading {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
  }
.account-address-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
.account-address-default-badge {
    padding: 5px 7px;
  }
.account-address-actions {
    gap: 7px;
  }
.account-address-action.is-danger {
    margin-left: 0;
  }
.account-address-form {
    padding: 0;
  }
.account-address-form-heading {
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 14px 16px;
  }
.account-address-form-symbol {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
.account-address-form-symbol svg {
    width: 20px;
    height: 20px;
  }
.account-address-form-copy .eyebrow {
    font-size: 0.7rem;
  }
.account-address-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 15px 13px;
  }
.account-address-field.is-wide {
    grid-column: 1;
  }
.account-address-field input {
    min-height: 44px;
  }
.account-address-field textarea {
    min-height: 96px;
  }
.account-address-default-field {
    margin: 0 15px 14px;
  }
.account-address-form-actions {
    padding: 0 15px 16px;
  }
.account-address-modal-backdrop {
    padding:
      max(12px, 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));
  }
.account-address-modal {
    width: 100%;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce){
.account-address-modal-backdrop,
  .account-address-modal {
    animation: none;
  }
}
.account-dashboard {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.account-dashboard-sidebar {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(32, 60, 69, 0.07);
}
.account-mobile-menu-panel-inner {
  display: grid;
  gap: 16px;
}
.account-mobile-menu-panel-heading {
  display: none;
}
.account-dashboard-nav {
  display: grid;
  gap: 7px;
}
.account-dashboard-nav a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.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;
}
.account-dashboard-nav a > span:first-child,
.account-settings-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--teal);
  background: #e5f6f3;
}
.account-dashboard-nav svg,
.account-settings-icon svg,
.account-album-search svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-dashboard-nav a > span:last-child {
  display: grid;
  gap: 2px;
}
.account-dashboard-nav strong {
  font-size: 0.76rem;
}
.account-dashboard-nav small {
  color: var(--muted);
  font-size: 0.62rem;
}
.account-dashboard-main {
  display: grid;
  min-width: 0;
  gap: 18px;
  scroll-margin-top: calc(var(--header-h) + 14px);
}
.account-workspace-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  padding: 8px 4px;
}
.account-workspace-menu-button {
  display: none;
}
.account-orders-workspace-heading {
  align-items: center;
}
.account-orders-heading-title {
  margin: 2px 0 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.28rem, 2vw, 1.68rem);
  font-weight: 800;
  line-height: 1.08;
}
.account-workspace-heading h2 {
  margin: 2px 0 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.28rem, 2vw, 1.68rem);
  line-height: 1.08;
}
.account-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.account-settings-card {
  display: grid;
  gap: 15px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #d8e7e6;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(69, 190, 177, 0.08), transparent 32%),
    #ffffff;
  box-shadow: 0 16px 42px rgba(32, 75, 78, 0.075);
}
.account-settings-card-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding-bottom: 4px;
}
.account-settings-card-heading h3,
.account-delete-section h3,
.account-album-content-heading h3 {
  margin: 2px 0 0;
  font-family: "Inter", sans-serif;
  line-height: 1.12;
}
.account-settings-card label,
.account-delete-fields label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
}
.account-settings-card label > span,
.account-delete-fields label > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.account-settings-card label small {
  color: var(--muted);
  font-weight: 600;
}
.account-settings-card input,
.account-delete-fields input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #d1e0e1;
  border-radius: 14px;
  color: var(--ink);
  background: #f8fbfb;
  font: inherit;
  font-size: 0.78rem;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.account-settings-card input:focus,
.account-delete-fields input:focus {
  border-color: var(--teal);
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(21, 143, 132, 0.11),
    0 9px 24px rgba(22, 107, 100, 0.07);
  outline: none;
}
.account-settings-card input::placeholder,
.account-delete-fields input::placeholder {
  color: #94a6a8;
}
.account-settings-card input:hover,
.account-delete-fields input:hover {
  border-color: #a9c9c7;
  background: #ffffff;
}
.account-settings-card .password-field,
.account-delete-fields .password-field {
  width: 100%;
}
.account-profile-card {
  min-height: 100%;
  transform-origin: 50% 24%;
}
.account-profile-card.is-switching-out {
  pointer-events: none;
  animation: accountProfilePanelOut 180ms cubic-bezier(0.55, 0, 1, 0.45) both;
}
.account-profile-card.is-switching-in {
  animation: accountProfilePanelIn 300ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
@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-profile-card-heading {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}
.account-profile-details {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid #e1ebeb;
  border-radius: 17px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
}
.account-profile-details > div {
  display: grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.5fr);
  gap: 14px;
  align-items: center;
  min-height: 48px;
  padding: 10px 13px;
  border-bottom: 1px solid #edf3f3;
}
.account-profile-details > div:last-child {
  border-bottom: 0;
}
.account-profile-details dt {
  color: #789093;
  font-size: 0.64rem;
  font-weight: 800;
}
.account-profile-details dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-profile-form {
  display: grid;
  gap: 13px;
}
.account-form-field {
  position: relative;
}
.account-profile-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 3px;
}
.account-button {
  display: inline-flex;
  min-height: 46px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.account-button span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
}
.account-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-button-secondary {
  color: #0a746d;
  border-color: #a9d7d1;
  background: linear-gradient(135deg, #f1fbf9, #e4f5f2);
}
.account-button:not(:disabled):hover,
.account-button:not(:disabled):focus-visible {
  outline: none;
  transform: translateY(-2px);
}
.account-button-secondary:not(:disabled):hover,
.account-button-secondary:not(:disabled):focus-visible,
.account-button-quiet:not(:disabled):hover,
.account-button-quiet:not(:disabled):focus-visible {
  border-color: #69bbb2;
  color: #075f59;
  box-shadow: 0 10px 24px rgba(20, 121, 111, 0.1);
}
.account-button:disabled,
.account-profile-edit-button:disabled,
.account-profile-close-button:disabled {
  cursor: wait;
  opacity: 0.62;
}
.account-email-preference-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(190px, 0.62fr) minmax(300px, 1.38fr);
  align-items: center;
}
.account-email-icon {
  color: #a66b00;
  background: #fff4d6;
}
.account-email-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 74px;
  padding: 14px 15px;
  border: 1px solid #d8e5e5;
  border-radius: 18px;
  color: var(--ink);
  background: #f8fbfb;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.account-email-toggle-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.account-email-toggle-copy strong {
  font-size: 0.75rem;
}
.account-email-toggle-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-email-switch {
  position: relative;
  display: block;
  width: 48px;
  height: 28px;
  padding: 3px;
  border: 1px solid #bdcdcf;
  border-radius: 999px;
  background: #d9e2e3;
  box-shadow: inset 0 2px 5px rgba(35, 65, 70, 0.08);
  transition: border-color 180ms ease, background 180ms ease;
}
.account-email-switch > span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(32, 61, 67, 0.22);
  transition: transform 220ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
.account-email-toggle.is-on {
  border-color: #92d1c9;
  background: linear-gradient(135deg, #effaf8, #f8fdfc);
  box-shadow: 0 10px 26px rgba(17, 129, 118, 0.09);
}
.account-email-toggle.is-on .account-email-switch {
  border-color: #0d9488;
  background: linear-gradient(135deg, #22b7a6, #078077);
}
.account-email-toggle.is-on .account-email-switch > span {
  transform: translateX(20px);
}
.account-email-toggle:not(:disabled):hover,
.account-email-toggle:not(:disabled):focus-visible {
  border-color: #79c3ba;
  box-shadow: 0 12px 28px rgba(17, 129, 118, 0.12);
  outline: none;
  transform: translateY(-1px);
}
.account-email-toggle:disabled {
  cursor: wait;
  opacity: 0.72;
}
.account-delete-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 24px;
  align-items: center;
  padding: 22px;
  border: 1px solid #efc2c6;
  border-radius: 18px;
  background: #fff8f8;
}
.account-delete-section > div:first-child > p:last-child {
  max-width: 600px;
  margin: 8px 0 0;
  color: #8b5e62;
  font-size: 0.75rem;
  line-height: 1.6;
}
.account-delete-fields {
  display: grid;
  gap: 11px;
}
.account-delete-button {
  display: inline-flex;
  min-height: 50px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 8px 15px 8px 9px;
  border: 1px solid #e1a4ab;
  border-radius: 14px;
  color: #a93442;
  background:
    radial-gradient(circle at 8% 0, rgba(255, 255, 255, 0.94), transparent 38%),
    linear-gradient(145deg, #fffafa, #fff0f2);
  box-shadow:
    0 9px 22px rgba(162, 55, 68, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    border-color 170ms ease,
    color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.account-delete-button:focus-visible {
  border-color: #c6505e;
  color: #ffffff;
  background: linear-gradient(135deg, #d65362, #a62f3d);
  box-shadow:
    0 14px 29px rgba(166, 47, 61, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  outline: none;
  transform: translateY(-1px);
}
.account-delete-button-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 10px;
  color: #b23c49;
  background: #ffe3e7;
  box-shadow: inset 0 0 0 1px rgba(198, 80, 94, 0.08);
  transition: color 170ms ease, background 170ms ease;
}
.account-delete-button-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-delete-button:focus-visible .account-delete-button-icon {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}
@media (hover: hover) and (pointer: fine){
.account-delete-button:hover:not(:disabled) {
    border-color: #c6505e;
    color: #ffffff;
    background: linear-gradient(135deg, #d65362, #a62f3d);
    box-shadow:
      0 14px 29px rgba(166, 47, 61, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
  }
.account-delete-button:hover:not(:disabled) .account-delete-button-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
  }
}
.account-delete-button:active:not(:disabled) {
  transform: scale(0.98);
}
.account-delete-button:disabled {
  border-color: #e1d4d6;
  color: #a98b8f;
  background: #f5f0f1;
  box-shadow: none;
  opacity: 0.72;
  cursor: wait;
}
.account-album-heading {
  align-items: center;
}
.account-album-search {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: min(290px, 100%);
  min-height: 48px;
  padding: 5px 13px 5px 6px;
  border: 1px solid #c7e2de;
  border-radius: 16px;
  color: #13877d;
  background:
    radial-gradient(circle at 10% 0, rgba(80, 210, 194, 0.13), transparent 38%),
    linear-gradient(135deg, #ffffff, #f3fbfa);
  box-shadow:
    0 9px 24px rgba(31, 105, 99, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  cursor: text;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.account-album-search > span[aria-hidden="true"] {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #e7f8f5, #d9f1ed);
  box-shadow: inset 0 0 0 1px rgba(32, 152, 140, 0.08);
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
.account-album-search:focus-within {
  border-color: #4bb9ae;
  box-shadow:
    0 0 0 3px rgba(21, 143, 132, 0.11),
    0 13px 28px rgba(31, 105, 99, 0.12);
  transform: translateY(-1px);
}
.account-album-search:focus-within > span[aria-hidden="true"] {
  color: #ffffff;
  background: linear-gradient(145deg, #35bdad, #118b82);
  transform: scale(0.94);
}
.account-album-search-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  outline: none;
}
.account-album-search-input::placeholder {
  color: #899c9f;
  opacity: 1;
  font-weight: 650;
}
.account-album-search-input::-webkit-search-cancel-button {
  cursor: pointer;
  opacity: 0.54;
}
.account-album-content {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(32, 60, 69, 0.06);
}
.account-album-content {
  min-width: 0;
  padding: 20px;
}
.account-orders-content,
.account-order-detail-content {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(32, 60, 69, 0.06);
}
.account-order-detail-content {
  background: #f8fbfa;
}
.account-orders-content .orders-list {
  display: grid;
  gap: 10px;
  margin: 0;
}
.orders-list-panel {
  display: grid;
  gap: 17px;
}
.account-order-filter-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 230px;
  place-content: center;
  padding: 30px 20px;
  border: 1px dashed #bddbd7;
  border-radius: 16px;
  color: #718b89;
  background: #f8fbfa;
  text-align: center;
}
.account-order-filter-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 15px;
  color: #159488;
  background: #e2f5f2;
}
.account-order-filter-empty svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.account-order-filter-empty strong {
  color: #284e4a;
  font-size: 0.78rem;
}
.account-order-filter-empty p {
  max-width: 420px;
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.55;
}
.account-order-filter-empty button {
  min-height: 34px;
  margin-top: 5px;
  padding: 7px 12px;
  border: 1px solid #9bcec8;
  border-radius: 11px;
  color: #147b72;
  background: #edf9f7;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 850;
  cursor: pointer;
}
.account-order-filter-toolbar {
  min-width: 0;
}
.account-order-filter-launcher {
  display: grid;
  justify-items: start;
  gap: 9px;
}
/* Nút chỉ còn icon: một cột cho ô icon, cột thứ hai chỉ mọc ra khi có số đếm
   bộ lọc đang bật. Lề trái phải bằng nhau vì không còn chữ nào ở bên phải kéo
   nút dài ra nữa. */
.account-order-filter-button {
  display: inline-grid;
  grid-template-columns: 36px;
  gap: 7px;
  align-items: center;
  min-height: 48px;
  padding: 5px 6px;
  border: 1px solid #b9ddd8;
  border-radius: 15px;
  color: #176f68;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.86), transparent 34%),
    linear-gradient(135deg, #effbf9, #fffaf0);
  box-shadow: 0 8px 20px rgba(22, 112, 104, 0.09);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.account-order-filter-button.has-filters {
  grid-template-columns: 36px 20px;
  padding-right: 10px;
}
.account-order-filter-button-icon {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(145deg, #32c4b4, #0a8d82);
  box-shadow: 0 6px 14px rgba(10, 141, 130, 0.18);
}
.account-order-filter-button-icon::after {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid #effbf9;
  border-radius: 50%;
  background: #ffc95f;
  box-shadow: 0 2px 6px rgba(173, 117, 7, 0.2);
  content: "";
}
.account-order-filter-button-icon svg,
.account-order-filter-summary-icon svg,
.account-order-filter-modal-symbol svg,
.account-order-filter-column header svg,
.account-order-filter-confirm svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.account-order-filter-button-icon svg .is-accent,
.account-order-filter-modal-symbol svg .is-accent {
  stroke: #ffd36d;
  stroke-width: 2;
}
.account-order-filter-count {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #8a6413;
  background: #ffebb6;
  font-size: 0.53rem;
  font-weight: 900;
}
.account-order-filter-button:hover,
.account-order-filter-button:focus-visible {
  border-color: #63bdb4;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.94), transparent 34%),
    linear-gradient(135deg, #e5f8f5, #fff5dc);
  box-shadow: 0 10px 23px rgba(15, 119, 109, 0.14);
  outline: none;
  transform: translateY(-1px);
}
.account-order-filter-button:active {
  transform: scale(0.97);
}
.account-order-filter-summary {
  display: flex;
  max-width: min(100%, 720px);
  gap: 7px;
  align-items: center;
  padding: 6px 7px 6px 8px;
  border: 1px solid #d1e7e4;
  border-radius: 13px;
  color: #46706c;
  background: #f7fbfa;
  box-shadow: 0 5px 13px rgba(25, 88, 82, 0.05);
}
.account-order-filter-summary-icon {
  display: grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #15998e;
}
.account-order-filter-summary-icon svg {
  width: 15px;
  height: 15px;
}
.account-order-filter-summary-items {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}
.account-order-filter-summary-items > span {
  padding: 4px 7px;
  border-radius: 999px;
  color: #246a64;
  background: #e7f5f3;
  font-size: 0.55rem;
  font-weight: 850;
  line-height: 1.2;
}
.account-order-filter-summary > button {
  display: grid;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  margin-left: auto;
  padding: 0;
  place-items: center;
  border: 1px solid #efc9c4;
  border-radius: 8px;
  color: #c55f54;
  background: #fff5f3;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}
.account-order-filter-summary > button:hover,
.account-order-filter-summary > button:focus-visible {
  border-color: #e7978d;
  color: #aa4137;
  background: #ffe9e5;
  outline: none;
  transform: scale(1.04);
}
.account-order-filter-backdrop {
  position: fixed;
  z-index: 104;
  inset: 0;
  display: grid;
  padding: 12px;
  place-items: center;
  background: rgba(25, 54, 59, 0.32);
  -webkit-backdrop-filter: blur(9px) saturate(108%);
  backdrop-filter: blur(9px) saturate(108%);
  animation: account-order-filter-backdrop-in 180ms ease both;
}
.account-order-filter-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, 100%);
  min-height: min(430px, calc(100dvh - 24px));
  max-height: min(740px, calc(100dvh - 24px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 25px;
  background:
    radial-gradient(circle at 92% 5%, rgba(84, 210, 194, 0.17), transparent 28%),
    radial-gradient(circle at 5% 100%, rgba(255, 206, 111, 0.16), transparent 25%),
    #fbfefd;
  box-shadow: 0 30px 80px rgba(13, 55, 59, 0.24);
  animation: account-order-filter-modal-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  overscroll-behavior: contain;
}
.account-order-filter-modal-header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 40px;
  gap: 13px;
  align-items: center;
  padding: 20px 20px 17px;
  border-bottom: 1px solid #deebe9;
}
.account-order-filter-modal-symbol {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  color: #0d8c82;
  background: linear-gradient(145deg, #ddf7f3, #fff6dc);
  box-shadow: inset 0 0 0 1px rgba(45, 173, 159, 0.13);
}
.account-order-filter-modal-header > div {
  min-width: 0;
}
.account-order-filter-modal-header .eyebrow {
  margin: 0 0 3px;
  font-size: 0.52rem;
}
.account-order-filter-modal-header h3 {
  margin: 0;
  color: #193f3c;
  font-family: var(--font-brand);
  font-size: 1.12rem;
  line-height: 1.2;
}
.account-order-filter-modal-header > div > p:last-child {
  margin: 4px 0 0;
  color: #748b89;
  font-size: 0.61rem;
  line-height: 1.45;
}
/* The filter modal's close button is styled entirely by the shared
   close-button system further down this file, which it now joins. Its old
   standalone rules were removed rather than left in place: every property they
   set was already being overridden by that system's (1,3,1) specificity, so
   they read as live styling while having no effect. */

.account-order-filter-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 12px;
  padding: 18px 20px;
}
.account-order-filter-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #d8e9e6;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 22px rgba(22, 77, 72, 0.05);
}
.account-order-filter-column header {
  display: flex;
  gap: 8px;
  align-items: center;
}
.account-order-filter-column header > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #168f84;
  background: #e4f6f3;
}
.account-order-filter-column header svg {
  width: 16px;
  height: 16px;
}
.account-order-filter-column header small {
  color: #1b716a;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-order-filter-dropdown {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 6px;
}
.account-order-filter-dropdown-title,
.account-order-filter-date-field > span:first-child {
  color: #718784;
  font-size: 0.53rem;
  font-weight: 800;
}
.account-order-filter-dropdown-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 8px 0 11px;
  border: 1px solid #cce0dd;
  border-radius: 11px;
  color: #2c5551;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 251, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.63rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.account-order-filter-dropdown-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-filter-rating-icons {
  color: #e3a217;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
.account-order-filter-choices {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  max-height: 310px;
  gap: 6px;
  padding: 2px 4px 4px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #91c9c2 transparent;
  scrollbar-width: thin;
}
.account-order-filter-choices::-webkit-scrollbar {
  width: 5px;
}
.account-order-filter-choices::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #91c9c2;
}
.account-order-filter-choices.is-stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.account-order-filter-choice {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #d2e3e0;
  border-radius: 999px;
  color: #486b67;
  background: rgba(249, 252, 251, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.account-order-filter-choice > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-order-filter-choice:hover,
.account-order-filter-choice:focus-visible {
  border-color: #72bbb4;
  color: #176e67;
  background: #f3faf8;
  box-shadow: 0 3px 8px rgba(20, 112, 104, 0.08);
  outline: none;
  transform: translateY(-1px);
}
.account-order-filter-choice.is-active {
  border-color: #148f85;
  color: #08786f;
}
.account-order-filter-choice.is-rating {
  min-height: 22px;
  padding: 1px 2px;
  border: 0;
  color: #d0a13a;
  background: transparent;
  box-shadow: none;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  line-height: 1;
}
.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-choice.is-rating:focus-visible {
  outline: 2px solid rgba(215, 142, 0, 0.24);
  outline-offset: 2px;
}
.account-order-filter-rating-stars {
  display: inline-grid;
  line-height: 1;
}
.account-order-filter-rating-stars > span {
  grid-area: 1 / 1;
  transition: opacity 140ms ease;
}
.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-new {
  --filter-choice-tone: #2865ad;
  border-color: #c9ddfa;
  color: #2865ad;
  background: #edf5ff;
}
.account-order-filter-choice.is-confirmed {
  --filter-choice-tone: #16786f;
  border-color: #b9e1dc;
  color: #16786f;
  background: #eaf8f5;
}
.account-order-filter-choice.is-printing {
  --filter-choice-tone: #765400;
  border-color: #efd27a;
  color: #765400;
  background: #fff7d7;
}
.account-order-filter-choice.is-shipping {
  --filter-choice-tone: #267599;
  border-color: #c4def0;
  color: #267599;
  background: #edf8fd;
}
.account-order-filter-choice.is-completed {
  --filter-choice-tone: #257b42;
  border-color: #bfe2c9;
  color: #257b42;
  background: #edf9f0;
}
.account-order-filter-choice.is-cancelled {
  --filter-choice-tone: #677477;
  border-color: #d8dddf;
  color: #677477;
  background: #f3f5f5;
}
.account-order-filter-choice.is-processing {
  --filter-choice-tone: #916517;
  border-color: #eed9aa;
  color: #916517;
  background: #fff8e8;
}
.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 > svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 6px;
  fill: none;
  stroke: #248f86;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition:
    background 160ms ease,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.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);
}
.account-order-filter-dropdown-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 220px;
  gap: 3px;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(179, 217, 211, 0.94);
  border-radius: 13px;
  background: rgba(252, 255, 254, 0.97);
  box-shadow:
    0 18px 38px rgba(17, 74, 70, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  animation: account-order-filter-menu-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.account-order-filter-dropdown.opens-upward .account-order-filter-dropdown-menu {
  top: auto;
  bottom: calc(100% + 7px);
  animation-name: account-order-filter-menu-up-in;
}
.account-order-filter-dropdown-menu[hidden] {
  display: none;
}
.account-order-filter-dropdown-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 7px 8px 7px 10px;
  border: 0;
  border-radius: 9px;
  color: #486b67;
  background: transparent;
  font: inherit;
  font-size: 0.59rem;
  font-weight: 780;
  text-align: left;
  cursor: pointer;
  transition:
    color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}
.account-order-filter-dropdown-menu button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-order-filter-dropdown-menu button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #0e978c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}
.account-order-filter-dropdown-menu button:hover,
.account-order-filter-dropdown-menu button:focus-visible {
  color: #176d66;
  background: #edf8f6;
  outline: none;
  transform: translateX(1px);
}
.account-order-filter-dropdown-menu button.is-selected {
  color: #087d73;
  background:
    linear-gradient(135deg, rgba(222, 247, 243, 0.98), rgba(255, 248, 225, 0.92));
  font-weight: 900;
}
.account-order-filter-dropdown-menu button.is-selected svg {
  opacity: 1;
  transform: scale(1);
}
.account-order-filter-date-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}
.account-order-filter-date-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.account-order-filter-date-input {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 9px 0 11px;
  border: 1px solid #cce0dd;
  border-radius: 11px;
  color: #1c9489;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 251, 0.98));
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.account-order-filter-date-input:focus-within {
  border-color: #42b4a9;
  box-shadow: 0 0 0 3px rgba(30, 165, 152, 0.11);
}
.account-order-filter-date-input > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  pointer-events: none;
}
.account-order-filter-date-input input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  color: #2c5551;
  background: transparent;
  font: inherit;
  font-size: 0.63rem;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}
.account-order-filter-date-input input::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.68;
  transition:
    background 150ms ease,
    opacity 150ms ease;
}
.account-order-filter-date-input input:hover::-webkit-calendar-picker-indicator,
.account-order-filter-date-input input:focus::-webkit-calendar-picker-indicator {
  background: #def3ef;
  opacity: 1;
}
.account-order-filter-date-note {
  margin: -4px 0 0;
  color: #7c908e;
  font-size: 0.52rem;
  line-height: 1.5;
}
.account-order-filter-modal-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  padding: 15px 20px 20px;
  border-top: 1px solid #e0ecea;
}
.account-order-filter-cancel,
.account-order-filter-confirm {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 900;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.account-order-filter-cancel {
  padding: 8px 15px;
  border: 1px solid #d2e2df;
  color: #587370;
  background: #f7faf9;
}
.account-order-filter-confirm {
  gap: 7px;
  padding: 8px 17px;
  border: 1px solid #15998d;
  color: #ffffff;
  background: linear-gradient(135deg, #2dbbaa, #09857b);
  box-shadow: 0 8px 18px rgba(8, 133, 123, 0.18);
}
.account-order-filter-confirm svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.account-order-filter-cancel:hover,
.account-order-filter-cancel:focus-visible {
  border-color: #9ec8c3;
  color: #286a64;
  background: #eef7f5;
  outline: none;
}
.account-order-filter-confirm:hover,
.account-order-filter-confirm:focus-visible {
  border-color: #087d74;
  background: linear-gradient(135deg, #36c9b7, #087b72);
  box-shadow: 0 10px 22px rgba(8, 133, 123, 0.23);
  outline: none;
  transform: translateY(-1px);
}
@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);
  }
}
@media (max-width: 820px){
.account-order-filter-modal {
    width: min(620px, 100%);
  }
.account-order-filter-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px){
.account-order-filter-backdrop {
    align-items: end;
    padding: 0;
  }
.account-order-filter-modal {
    width: 100%;
    max-height: 92dvh;
    border-width: 1px 0 0;
    border-radius: 23px 23px 0 0;
  }
.account-order-filter-modal-header {
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 15px 14px 13px;
  }
.account-order-filter-modal-symbol {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
.account-order-filter-modal-header h3 {
    font-size: 0.96rem;
  }
.account-order-filter-modal-header > div > p:last-child {
    display: none;
  }
.account-order-filter-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
.account-order-filter-columns {
    gap: 9px;
    padding: 12px 14px;
  }
.account-order-filter-column {
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }
.account-order-filter-choices {
    max-height: none;
  }
.account-order-filter-date-range {
    grid-template-columns: 1fr;
  }
.account-order-filter-modal-actions {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  }
.account-order-filter-summary {
    width: 100%;
  }
}
.account-order-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e0ecea;
}
.account-order-page-numbers {
  display: flex;
  min-width: 0;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.account-order-page-nav,
.account-order-page-number {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d2e3e1;
  color: #426561;
  background: #f9fcfb;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.account-order-page-nav {
  gap: 6px;
  padding: 7px 12px;
  border-radius: 11px;
}
.account-order-page-nav > span[aria-hidden="true"] {
  font-size: 1rem;
  line-height: 1;
}
.account-order-page-number {
  width: 36px;
  padding: 0;
  border-radius: 11px;
}
.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-order-page-nav:disabled {
  cursor: default;
  opacity: 0.42;
}
.account-order-page-ellipsis {
  display: grid;
  width: 24px;
  place-items: center;
  color: #8ca09e;
  font-weight: 850;
}
@media (max-width: 480px){
.account-order-page-nav {
    min-width: 36px;
    padding-inline: 9px;
  }
.account-order-page-nav > span:not([aria-hidden="true"]) {
    display: none;
  }
.account-order-page-number {
    width: 34px;
    min-height: 34px;
  }
}
@media (prefers-reduced-motion: reduce){
.orders-view-panel.is-leaving-forward,
  .orders-view-panel.is-entering-forward,
  .orders-view-panel.is-leaving-back,
  .orders-view-panel.is-entering-back {
    animation-duration: 1ms;
  }
.account-order-filter-body,
  .account-order-filter-toggle i,
  .account-mobile-menu-panel {
    transition-duration: 1ms;
  }
}
.account-album-content-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.account-album-content-heading > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--mint);
  font-size: 0.64rem;
  font-weight: 800;
}
.account-album-heading-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.account-album-heading-actions > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--mint);
  font-size: 0.64rem;
  font-weight: 800;
}
.account-album-view-switcher {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f4f7f6;
}
.account-album-view-switcher button {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.account-album-view-switcher button:hover,
.account-album-view-switcher button:focus-visible {
  color: var(--teal-dark);
  background: #fff;
  outline: none;
}
.account-album-view-switcher button.is-active {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 4px 10px rgba(8, 119, 110, 0.18);
}
.account-album-view-switcher svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1100px){
.account-dashboard {
    grid-template-columns: 220px minmax(0, 1fr);
  }
.account-settings-grid,
  .account-delete-section {
    grid-template-columns: 1fr;
  }
.account-email-preference-card {
    grid-template-columns: minmax(180px, 0.58fr) minmax(280px, 1.42fr);
  }
.account-image-grid {
    columns: 3;
  }
.account-image-grid.is-small {
    columns: 6;
  }
.account-image-grid.is-medium {
    columns: 4;
  }
.account-image-grid.is-large {
    columns: 2;
  }
}
@media (max-width: 780px){
.account-dashboard {
    grid-template-columns: 1fr;
  }
.account-dashboard-sidebar {
    position: static;
  }
.account-dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
.account-dashboard,
  .account-dashboard-main {
    width: 100%;
  }
.account-workspace-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
    padding-top: 4px;
    padding-right: 16px;
    padding-bottom: 4px;
    padding-left: 16px;
  }
.account-orders-workspace-heading {
    gap: 7px;
  }
.account-orders-workspace-heading .account-section-count {
    justify-self: start;
    padding: 5px 10px;
  }
.account-album-search {
    width: 100%;
    margin-top: 4px;
  }
.account-settings-grid {
    grid-template-columns: 1fr;
  }
.account-profile-card-heading {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
.account-profile-details > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
.account-profile-details dd {
    text-align: left;
  }
.account-profile-form-actions {
    grid-template-columns: 1fr;
  }
.account-email-preference-card {
    grid-template-columns: 1fr;
  }
.account-email-toggle-copy small {
    white-space: normal;
  }
.account-settings-card,
  .account-delete-section,
  .account-album-content,
  .account-orders-content,
  .account-order-detail-content {
    width: 100%;
    padding: 15px;
  }
.account-dashboard-sidebar {
    position: fixed;
    z-index: 1600;
    top: calc(var(--header-h) + 12px);
    left: 50%;
    display: block;
    width: min(calc(100vw - 24px), 420px);
    padding: 12px;
    visibility: hidden;
    border-radius: 17px;
    background:
      radial-gradient(circle at 100% 0, rgba(73, 202, 187, 0.16), transparent 42%),
      #fff;
    box-shadow: 0 20px 50px rgba(24, 67, 63, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px) scale(0.98);
    transition:
      visibility 0s linear 220ms,
      opacity 180ms ease,
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
.account-dashboard-sidebar.is-mobile-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
  }
.account-mobile-menu-panel {
    display: block;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
.account-mobile-menu-panel-inner {
    min-height: 0;
    overflow: visible;
  }
.account-mobile-menu-panel-heading {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 7px;
  }
.account-mobile-menu-panel-heading button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #c9e6e2;
    border-radius: 10px;
    color: #16847b;
    background: #eff9f7;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
  }
.account-mobile-menu-panel-heading button:focus-visible {
    outline: 3px solid rgba(43, 177, 164, 0.16);
    outline-offset: 2px;
  }
.account-workspace-menu-button {
    display: grid;
    position: relative;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid #b8ded9;
    border-radius: 13px;
    color: #14897f;
    background:
      radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.96), transparent 34%),
      linear-gradient(145deg, #f8fffe, #dcf3ef);
    box-shadow:
      0 8px 19px rgba(17, 117, 109, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }
.account-workspace-menu-button::after {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border: 2px solid #f8fffe;
    border-radius: 50%;
    background: #ffc95b;
    box-shadow: 0 2px 7px rgba(187, 125, 0, 0.25);
    content: "";
  }
.account-workspace-menu-button > span,
  .account-workspace-menu-button svg {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
  }
.account-workspace-menu-button svg {
    fill: currentColor;
    stroke: none;
  }
.account-workspace-menu-button[aria-expanded="true"] {
    border-color: #118b82;
    color: #ffffff;
    background: linear-gradient(145deg, #32bbab, #087a72);
    box-shadow:
      0 11px 24px rgba(8, 122, 114, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.27);
    transform: rotate(4deg);
  }
.account-workspace-menu-button:focus-visible {
    outline: 3px solid rgba(43, 177, 164, 0.2);
    outline-offset: 3px;
  }
.account-workspace-menu-button:active {
    transform: scale(0.94);
  }
@media (hover: hover) and (pointer: fine){
.account-workspace-menu-button:hover {
      border-color: #79c8bf;
      box-shadow:
        0 11px 24px rgba(17, 117, 109, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      transform: translateY(-1px);
    }
}
.account-workspace-heading h2,
  .account-orders-heading-title {
    font-size: 1.22rem;
  }
.account-dashboard-nav a {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 8px;
  }
.account-dashboard-nav a > span:first-child {
    width: 34px;
    height: 34px;
  }
.account-dashboard-nav small {
    display: none;
  }
.account-album-content .account-image-grid,
  .account-album-content .account-image-grid.is-small,
  .account-album-content .account-image-grid.is-medium,
  .account-album-content .account-image-grid.is-large {
    columns: 1;
    column-gap: 16px;
  }
.account-album-content .account-image-grid > .account-gallery-card {
    margin-bottom: 16px;
  }
.account-album-content-heading {
    align-items: center;
  }
/* Khối tiêu đề lặp lại: "Thư viện / Ảnh đã lưu" nhắc đúng dòng chữ mà đầu mục
     ngay phía trên đã nói, nên trên điện thoại nó chỉ ăn chỗ theo cả chiều dọc
     lẫn chiều ngang của hàng.

     Bỏ hẳn chứ không thu nhỏ: đầu mục vẫn giữ thẻ h2 cùng nội dung "Ảnh đã lưu"
     trong cây trợ năng, nên phần này không mất tiêu đề nào. */
  .account-album-content-heading > div:first-child {
    display: none;
  }
.account-album-heading-actions {
    gap: 6px;
  }
}
@media (max-width: 950px){
.account-dashboard {
    grid-template-columns: 1fr;
  }
.account-dashboard-main {
    width: 100%;
  }
.account-dashboard-sidebar {
    position: fixed;
    z-index: 1600;
    top: calc(var(--header-h) + 12px);
    left: 50%;
    display: block;
    width: min(calc(100vw - 24px), 420px);
    padding: 12px;
    visibility: hidden;
    border-radius: 17px;
    background:
      radial-gradient(circle at 100% 0, rgba(73, 202, 187, 0.16), transparent 42%),
      #fff;
    box-shadow: 0 20px 50px rgba(24, 67, 63, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px) scale(0.98);
    transition:
      visibility 0s linear 220ms,
      opacity 180ms ease,
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
.account-dashboard-sidebar.is-mobile-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
  }
.account-mobile-menu-panel {
    display: block;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
.account-mobile-menu-panel-inner {
    min-height: 0;
    overflow: visible;
  }
.account-mobile-menu-panel-heading {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 7px;
  }
.account-mobile-menu-panel-heading button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid #c9e6e2;
    border-radius: 10px;
    color: #16847b;
    background: #eff9f7;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
  }
.account-mobile-menu-panel-heading button:focus-visible {
    outline: 3px solid rgba(43, 177, 164, 0.16);
    outline-offset: 2px;
  }
.account-workspace-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
    padding: 4px 16px;
  }
.account-orders-workspace-heading {
    gap: 7px;
  }
.account-orders-workspace-heading .account-section-count {
    justify-self: start;
    padding: 5px 10px;
  }
.account-album-search {
    width: 100%;
    margin-top: 4px;
  }
.account-workspace-heading h2 {
    display: none;
  }
.account-workspace-menu-button {
    display: grid;
    position: relative;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid #b8ded9;
    border-radius: 13px;
    color: #14897f;
    background:
      radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.96), transparent 34%),
      linear-gradient(145deg, #f8fffe, #dcf3ef);
    box-shadow:
      0 8px 19px rgba(17, 117, 109, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }
.account-workspace-menu-button::after {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border: 2px solid #f8fffe;
    border-radius: 50%;
    background: #ffc95b;
    box-shadow: 0 2px 7px rgba(187, 125, 0, 0.25);
    content: "";
  }
.account-workspace-menu-button > span,
  .account-workspace-menu-button svg {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
  }
.account-workspace-menu-button svg {
    fill: currentColor;
    stroke: none;
  }
.account-workspace-menu-button[aria-expanded="true"] {
    border-color: #118b82;
    color: #ffffff;
    background: linear-gradient(145deg, #32bbab, #087a72);
    box-shadow:
      0 11px 24px rgba(8, 122, 114, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.27);
    transform: rotate(4deg);
  }
.account-workspace-menu-button:focus-visible {
    outline: 3px solid rgba(43, 177, 164, 0.2);
    outline-offset: 3px;
  }
.account-workspace-menu-button:active {
    transform: scale(0.94);
  }
.account-dashboard-nav a {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 8px;
  }
.account-dashboard-nav a > span:first-child {
    width: 34px;
    height: 34px;
  }
.account-dashboard-nav small,
  .account-sidebar-stats {
    display: none;
  }
}
@media (max-width: 950px) and (hover: hover) and (pointer: fine){
.account-workspace-menu-button:hover {
    border-color: #79c8bf;
    box-shadow:
      0 11px 24px rgba(17, 117, 109, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce){
.account-profile-card.is-switching-out,
  .account-profile-card.is-switching-in {
    animation-duration: 1ms;
  }
.account-dashboard-sidebar,
  .account-workspace-menu-button {
    transition-duration: 1ms;
  }
.account-email-switch > span {
    transition: none;
  }
}
@media (max-width: 420px){
.account-album-heading-actions > span {
    display: none;
  }
}
.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;
}
#orderLookupSubmit.is-loading {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  cursor: wait;
}
@keyframes orderLookupSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orderLookupResultEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.order-lookup-status.is-printing {
  color: #765400;
  background: #fff7d7;
}
.order-lookup-status.is-shipping {
  color: #3f4c91;
  background: #edf0ff;
}
.order-lookup-status.is-completed {
  color: #276b3e;
  background: #eaf7ee;
}
.order-lookup-status.is-cancelled {
  color: #9d3434;
  background: #fff0f0;
}
.order-progress-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 11px 0 10px;
  border: 0;
  border-radius: 14px;
  list-style: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 247, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 7px 18px rgba(27, 94, 87, 0.06);
}
.order-lookup-card > .order-progress-strip {
  margin: 24px 0;
}
.order-progress-step {
  position: relative;
  display: grid;
  gap: 5px;
  justify-items: center;
  width: 100%;
  min-width: 0;
  color: #8ca09e;
  text-align: center;
}
.order-progress-step:not(:first-child)::before {
  position: absolute;
  z-index: 0;
  top: 14px;
  right: 50%;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #dbe8e6;
  content: "";
}
.order-progress-step.is-reached:not(:first-child)::before {
  background: linear-gradient(90deg, #2db8ab, #138f85);
}
.order-progress-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid #d7e5e3;
  border-radius: 50%;
  color: #8ba09e;
  background: #f8fbfb;
  box-shadow: 0 0 0 3px rgba(248, 251, 251, 0.9);
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.order-progress-marker svg.ka-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
.order-progress-step.is-reached {
  color: #0d756d;
}
.order-progress-step.is-reached .order-progress-marker {
  border-color: #15998e;
  color: #ffffff;
  background: linear-gradient(145deg, #35baad, #11877e);
  box-shadow: 0 0 0 3px #eef9f7;
}
.order-progress-step.is-current .order-progress-marker {
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px rgba(29, 164, 152, 0.2),
    0 6px 13px rgba(20, 134, 124, 0.2);
}
.order-progress-label {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 0.59rem;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-progress-step.is-current .order-progress-label {
  color: #0c746c;
}
.order-lookup-product-icon.has-image {
  padding: 0;
  border: 1px solid #d9e5e5;
  background: #fff;
  box-shadow: 0 7px 16px rgba(30, 56, 66, 0.08);
}
.order-lookup-result-actions a:not(.order-action-button) {
  min-height: 40px;
  text-decoration: none;
}
@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);
}
.site-footer-main,
.site-footer-bottom {
  width: min(1440px, calc(100% - clamp(32px, 8vw, 112px)));
  margin-inline: auto;
}
.site-footer-main {
  display: grid;
  grid-template-columns: minmax(250px, 1.45fr) repeat(4, minmax(130px, 1fr));
  gap: clamp(30px, 4vw, 62px);
  padding-block: clamp(48px, 6vw, 78px) 38px;
}
.site-footer-brand {
  max-width: 360px;
}
.site-footer-logo {
  display: inline-flex;
  align-items: center;
  width: 154px;
  min-height: 56px;
  margin-bottom: 24px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(0, 31, 28, 0.22);
}
.site-footer-logo img {
  width: 100%;
  height: 46px;
  object-fit: contain;
}
.site-footer-brand h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: clamp(1.28rem, 2vw, 1.72rem);
  line-height: 1.25;
}
.site-footer-brand > p {
  max-width: 34ch;
  margin: 0;
  line-height: 1.75;
}
.site-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}
.site-footer-socials a {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.site-footer-socials a:hover,
.site-footer-socials a:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.68);
  background: var(--teal);
  outline: none;
}
.site-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.site-footer-column h2 {
  position: relative;
  margin: 9px 0 13px;
  padding-bottom: 13px;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 900;
}
.site-footer-column h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--ka-yellow);
  content: "";
}
.site-footer-column > a,
.site-footer-bottom a,
.site-footer-contact-item a {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}
.site-footer-column > a:hover,
.site-footer-column > a:focus-visible,
.site-footer-bottom a:hover,
.site-footer-bottom a:focus-visible,
.site-footer-contact-item a:hover,
.site-footer-contact-item a:focus-visible {
  color: #ffffff;
  outline: none;
}
.site-footer-column > a:hover,
.site-footer-column > a:focus-visible {
  transform: translateX(4px);
}
.site-footer-contact {
  gap: 15px;
}
.site-footer-contact h2 {
  margin-bottom: 7px;
}
.site-footer-contact-item {
  display: grid;
  gap: 2px;
  width: 100%;
}
.site-footer-contact-item span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer-contact-item strong {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.55;
}
.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 72px;
  margin-top: 18px;
  padding-block: 17px max(17px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.76rem;
}
.site-footer-bottom > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 20px;
}
.site-footer-bottom a {
  font-size: 0.76rem;
}
/* Dòng ghi công nguồn dữ liệu mã bưu điện. Đứng ngay sau dòng bản quyền và đẩy
   nhóm nút sang phải; hàng cho phép xuống dòng để ở khổ hẹp ba mảnh tự xếp
   thành nhiều hàng thay vì bị bóp lại. */
.site-footer-bottom {
  flex-wrap: wrap;
}
.site-footer-data-credit {
  margin-right: auto;
  color: rgba(255, 255, 255, 0.4);
}
.site-footer-data-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 1180px){
.site-footer-main {
    grid-template-columns: minmax(250px, 1.4fr) repeat(2, minmax(160px, 1fr));
  }
}
@media (max-width: 760px){
body.site-footer-page > main {
    margin-bottom: 48px;
  }
.site-footer-main,
  .site-footer-bottom {
    width: min(100% - 32px, 680px);
  }
.site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
    padding-block: 44px 30px;
  }
.site-footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }
.site-footer-bottom {
    display: grid;
    justify-items: start;
    gap: 9px;
  }
.site-footer-bottom > div {
    justify-content: flex-start;
  }
}
@media (max-width: 460px){
.site-footer-main {
    grid-template-columns: 1fr;
  }
.site-footer-brand {
    grid-column: auto;
  }
.site-footer-column {
    padding-top: 2px;
  }
.site-footer-bottom > div {
    display: grid;
    gap: 8px;
  }
}
@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);
}
.site-footer-main {
  grid-template-columns: minmax(260px, 1.48fr) repeat(4, minmax(145px, 1fr));
  gap: 18px;
  padding-block: clamp(52px, 6vw, 76px) 28px;
}
.site-footer-brand,
.site-footer-column {
  position: relative;
  border: 1px solid rgba(38, 83, 84, 0.1);
  border-radius: 26px;
  box-shadow: 0 18px 38px rgba(43, 91, 88, 0.09);
}
.site-footer-brand {
  max-width: none;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(246, 200, 95, 0.13), transparent 33%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(210, 244, 237, 0.96));
}
.site-footer-brand::after {
  position: absolute;
  right: -28px;
  bottom: -36px;
  width: 118px;
  height: 118px;
  border: 22px solid rgba(23, 170, 156, 0.1);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.site-footer-logo {
  width: 100%;
  min-height: 0;
  margin-bottom: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.site-footer-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
.site-footer-brand h2 {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  color: #153d3a;
}
.site-footer-brand > p {
  position: relative;
  z-index: 1;
  color: #52646c;
}
.site-footer-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.site-footer-tags span {
  padding: 6px 9px;
  border: 1px solid rgba(19, 155, 143, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #177d73;
  font-size: 0.64rem;
  font-weight: 800;
}
.site-footer-socials {
  position: relative;
  z-index: 1;
  margin-top: 20px;
}
.site-footer-socials a {
  width: 40px;
  height: 40px;
  border: 3px solid #ffffff;
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(31, 58, 63, 0.13);
}
.site-footer-socials a:nth-child(1) {
  background: #4d88c8;
}
.site-footer-socials a:nth-child(2) {
  background: linear-gradient(140deg, #9a8bc8, #d88da3 58%, #e8c982);
}
.site-footer-socials a:nth-child(3) {
  background: #40565a;
}
.site-footer-socials a:nth-child(4) {
  background: #4a9fc2;
}
.site-footer-socials a:hover,
.site-footer-socials a:focus-visible {
  border-color: #ffffff;
  background: var(--coral);
  box-shadow: 0 11px 20px rgba(239, 100, 97, 0.25);
}
.site-footer-column {
  align-self: start;
  min-height: 100%;
  gap: 10px;
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.82);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.site-footer-column:nth-child(2) {
  background: rgba(243, 251, 239, 0.94);
  transform: rotate(-0.6deg);
}
.site-footer-column:nth-child(3) {
  background: rgba(255, 248, 242, 0.94);
  transform: translateY(7px) rotate(0.55deg);
}
.site-footer-column:nth-child(4) {
  background: rgba(248, 246, 255, 0.94);
  transform: rotate(-0.45deg);
}
.site-footer-column:nth-child(5) {
  background: rgba(218, 246, 240, 0.96);
  transform: translateY(7px) rotate(0.5deg);
}
.site-footer-column:hover {
  z-index: 2;
  transform: translateY(-5px);
  box-shadow: 0 24px 42px rgba(43, 91, 88, 0.14);
}
.site-footer-column h2 {
  margin-top: 2px;
  color: #213941;
  font-size: 1.02rem;
}
.site-footer-mobile-info {
  display: none;
}
.site-footer-column:nth-child(2) h2::after {
  background: #72bfb5;
}
.site-footer-column:nth-child(3) h2::after {
  background: #dfb39e;
}
.site-footer-column:nth-child(4) h2::after {
  background: #b8abd9;
}
.site-footer-column:nth-child(5) h2::after {
  background: #139b8f;
}
.site-footer-column > a,
.site-footer-bottom a,
.site-footer-contact-item a {
  color: #52606a;
}
.site-footer-column > a:hover,
.site-footer-column > a:focus-visible,
.site-footer-bottom a:hover,
.site-footer-bottom a:focus-visible,
.site-footer-contact-item a:hover,
.site-footer-contact-item a:focus-visible {
  color: #08776e;
}
.site-footer-contact-item {
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(19, 123, 114, 0.16);
}
.site-footer-contact-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.site-footer-contact-item span {
  color: #7b7488;
}
.site-footer-contact-item strong {
  color: #354b52;
}
.site-footer-privacy-card {
  background:
    radial-gradient(circle at 100% 100%, rgba(15, 151, 139, 0.11), transparent 38%),
    rgba(231, 248, 244, 0.96) !important;
}
.site-footer-privacy-card p {
  margin: 0;
  color: #596a70;
  font-size: 0.8rem;
  line-height: 1.72;
}
.site-footer-privacy-card h2::after {
  background: #139b8f !important;
}
.site-footer-privacy-card p + p {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 151, 139, 0.2);
}
.site-footer-bottom {
  border-top-color: rgba(19, 123, 114, 0.14);
  color: #6e7b83;
}
@media (max-width: 1180px){
.site-footer-main {
    grid-template-columns: minmax(270px, 1.35fr) repeat(2, minmax(180px, 1fr));
  }
.site-footer-column:nth-child(n) {
    transform: none;
  }
}
@media (max-width: 760px){
.site-footer-main {
    gap: 18px;
  }
.site-footer-brand,
  .site-footer-column {
    border-radius: 22px;
  }
.site-footer-brand {
    padding: 24px;
  }
/* Below 760px .site-footer-brand spans the full row (see the earlier
     grid-column: 1 / -1 rule), and .site-footer-logo img is width:100% with
     no cap, so it was stretching to match the card's full width — as wide as
     630px, dwarfing the heading text under it. Capping it keeps the logo at
     roughly the same size as the site header's until the sub-600px layout
     takes over and constrains it to an 88px grid column instead. */
  .site-footer-logo {
    max-width: 190px;
  }
}
/* 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. */
}
@media (prefers-reduced-motion: reduce){
.site-footer-column {
    transition: none;
  }
.site-footer-mobile-info-tabs::before,
  .site-footer-mobile-info-tab,
  .site-footer-mobile-info-tab svg,
  .site-footer-mobile-info-panel {
    transition: none;
  }
}
/* Hai nút liên hệ hỗ trợ và báo lỗi.
   -------------------------------------------------------------------------
   Chuyển vào khối liên hệ ngày 2026-08-30, nhưng GIỮ NGUYÊN dáng cũ: vẫn là
   hai viên thuốc ôm sát chữ, không kéo hết bề ngang cột.

   Vì vậy container dùng `flex` chứ không phải `grid`. Bản đầu sau khi chuyển
   dùng `display: grid` nên nút giãn full width — trông khác hẳn nút cũ, đã sửa
   lại. `flex-wrap` để khi cột hẹp thì nút thứ hai xuống dòng nguyên vẹn thay vì
   bị bóp.

   Không đặt `justify-content: flex-end` như bản ở hàng cuối: canh phải là để
   nút nằm nép bên phải dòng bản quyền, còn trong cột này mọi thứ canh trái nên
   nép phải sẽ lệch khỏi Address và Support hours ngay phía trên.

   Hai nút phải nằm CÙNG MỘT HÀNG theo yêu cầu, nên đã thu nhỏ ở luật bên dưới.
   `flex-wrap` vẫn giữ làm lưới an toàn: nếu bản dịch nào có nhãn dài bất thường
   thì nút xuống dòng nguyên vẹn, hơn là bị bóp méo hoặc tràn khỏi cột. */
.site-footer-contact-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 4px;
}
/* Nhỏ hơn bản ở hàng cuối footer, để hai nút nằm vừa một hàng.
   -------------------------------------------------------------------------
   Đo ở khổ 1400px: cột liên hệ chừa 181px, mà bản cũ cần 224px — thiếu 43px.
   Phần lớn là do cỡ chữ: luật cũ không khai `font-size` nên nút thừa hưởng
   16px, riêng chữ đã chiếm 160px.

   Nên chỗ cắt chính là cỡ chữ, rồi mới tới padding. `min-height` giữ 32px để
   vùng bấm vẫn đủ rộng — thấp hơn nữa thì khó bấm trên màn cảm ứng. */
.site-footer-contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Chia đều bề ngang thay vì ôm sát chữ.
     -----------------------------------------------------------------------
     Ôm sát chữ thì bề rộng phụ thuộc độ dài nhãn, mà nhãn đổi theo ngôn ngữ:
     ở khổ 1200px cột chỉ chừa 152px, bản Việt cần 130px nhưng bản Anh cần
     172px nên nút thứ hai rơi xuống dòng.

     Chia đôi hàng thì hai nút luôn nằm cùng hàng ở mọi khổ và mọi ngôn ngữ.
     `min-width: 0` là bắt buộc: mặc định `min-width: auto` của flex item
     không cho co nhỏ hơn nội dung, tức vẫn tràn như cũ. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(19, 123, 114, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--teal-dark);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.25;
  /* Cho chữ xuống dòng trong nút. Ép một dòng thì nhãn dài của bản Anh và
     Nhật lại tràn ra ngoài viên thuốc. */
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.site-footer-contact-actions .site-footer-bug-button {
  border-color: rgba(201, 75, 75, 0.18);
  background: rgba(255, 241, 241, 0.8);
  color: #a24343;
}
.site-footer-contact-actions a:hover,
.site-footer-contact-actions a:focus-visible {
  color: #ffffff;
  background: var(--teal);
  transform: translateY(-2px);
}
.site-footer-contact-actions .site-footer-bug-button:hover,
.site-footer-contact-actions .site-footer-bug-button:focus-visible {
  color: #ffffff;
  background: #c65353;
}
/* TẠM ẨN trong footer: mạng xã hội và dòng Email.
   -------------------------------------------------------------------------
   - Mạng xã hội: hai liên kết vẫn trỏ `facebook.com/` và `instagram.com/` trần,
     tức chưa có tài khoản thật.
   - Email: `support@kromade.vn` là giá trị mẫu, chỉ tồn tại trong `site-footer.js`
     và không dùng ở đâu khác; email thật của hệ thống lấy từ `mail_from_email`
     trong config. Ẩn bằng CSS thay vì xoá markup để bật lại chỉ cần bỏ một bộ
     chọn ở đây — đúng cách khối liên hệ từng được bật lại ngày 2026-08-30.

   Dòng Hotline thì đã XOÁ HẲN khỏi markup, không nằm trong danh sách này.

   Nút Liên hệ hỗ trợ và Báo lỗi ở hàng cuối vẫn là luồng thật, luôn hiển thị. */
.site-footer-socials,
.site-footer-contact-item[data-footer-contact="email"] {
  display: none;
}
/* 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);
}
@media (max-width: 640px){
.community-policy-page {
    width: min(100% - 20px, 600px);
    padding-top: 18px;
  }
}
.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;
}
.care-picker-option.is-shipping,
.care-picker[data-value="shipping"] .care-picker-trigger {
  --pick-ink: #b93f63;
  --pick-paper: #fcdfe8;
}
@keyframes carePickerMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.care-submit-button.is-loading .care-submit-glyph {
  display: none;
}
.care-submit-button.is-loading .care-submit-spinner {
  display: block;
}
/* Form bị khoá vì đang còn yêu cầu chưa hoàn thành: con trỏ báo không bấm được,
   khác với lúc đang gửi (con trỏ chờ). */
.care-form-panel.is-locked .care-submit-button:disabled,
.care-form-panel.is-locked .care-submit-button:disabled:hover {
  cursor: not-allowed;
  opacity: 0.55;
}
.care-form-panel.is-locked .care-form-note {
  color: #a2603f;
}
.care-form-panel.is-locked .care-form-note svg {
  stroke: #c47a4f;
}
@keyframes careSubmitSpin {
  to {
    transform: rotate(360deg);
  }
}
/* Nút phụ cũng dài vừa nội dung. Cột giữa để minmax(0, auto) chứ không phải auto
   thuần: bình thường nó rộng bằng chữ, còn khi khung hẹp hơn chữ thì vẫn co lại
   được và chữ rút gọn bằng dấu ba chấm thay vì tràn ra ngoài. */
.care-submit-button.is-quiet {
  grid-template-columns: 42px minmax(0, auto) 18px;
  justify-self: start;
  width: auto;
  max-width: 100%;
  border-color: #b8dcd8;
  color: #17383a;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(33, 89, 84, 0.08);
}
.care-submit-button.is-quiet:hover:not(:disabled),
.care-submit-button.is-quiet:focus-visible {
  border-color: #45b9ae;
  background: #f6fdfb;
  box-shadow: 0 16px 32px rgba(33, 89, 84, 0.12);
}
.care-submit-button.is-quiet .care-submit-icon {
  border-color: #cbe9e4;
  background: #e6f6f2;
  color: #0b8d82;
  box-shadow: none;
}
.care-submit-button.is-quiet .care-submit-copy small {
  color: #6b8188;
}
.care-submit-button.is-quiet .care-submit-spinner {
  border-color: rgba(11, 141, 130, 0.35);
  border-top-color: #0b8d82;
}
.care-request-row.is-loading {
  cursor: wait;
  opacity: 0.6;
}
.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){
/* Giữ nguyên luật cũ: hai nút xếp ngang ở khổ này. Luật gốc dùng `!important`
     để thắng phần ghi đè của hàng cuối footer; nay không còn ai chọi nữa nhưng
     vẫn để y nguyên, vì mục đích của lượt sửa này là hai nút trông giống hệt
     bản cũ. */
  .site-footer-contact-actions {
    display: flex !important;
  }
.care-page {
    width: min(100% - 24px, 580px);
    padding-top: 22px;
  }
}
.care-chat-refresh.is-loading {
  animation: care-chat-spin 800ms linear infinite;
}
@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);
}
/* Email verification during account registration */
.forgot-password-button {
  justify-self: end;
  width: auto;
  margin: -7px 0 -4px;
  padding: 3px 1px;
  color: var(--teal-dark);
  font-size: 0.68rem;
  font-weight: 900;
}
.password-reset-panel {
  gap: 12px;
}
.password-reset-step {
  display: grid;
  gap: 14px;
}
.password-reset-copy {
  margin: 0;
  color: #687d7f;
  font-size: 0.75rem;
  line-height: 1.65;
}
.password-reset-back {
  margin-top: 1px;
}
.password-reset-new-password {
  padding: 18px;
  border: 1px solid rgba(13, 145, 134, 0.2);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(45, 202, 181, 0.12), transparent 36%),
    linear-gradient(145deg, #ffffff, #f3fbf9);
}
.password-reset-confirmed {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(13, 145, 134, 0.09);
  color: #406364;
}
.password-reset-confirmed > span {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1bb6a6, #07857d);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(9, 137, 126, 0.18);
}
.password-reset-confirmed strong,
.password-reset-confirmed small {
  display: block;
}
.password-reset-confirmed strong {
  color: #285152;
  font-size: 0.72rem;
}
.password-reset-confirmed small {
  margin-top: 2px;
  color: #668081;
  font-size: 0.64rem;
  overflow-wrap: anywhere;
}
.auth-panel.is-awaiting-verification > label {
  display: none;
}
.checkout-registration-details {
  display: grid;
  gap: 14px;
}
.checkout-registration-details[hidden] {
  display: none;
}
.registration-verification-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(13, 145, 134, 0.2);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(45, 202, 181, 0.14), transparent 38%),
    linear-gradient(145deg, #ffffff, #effaf7);
}
.registration-verification-card[hidden] {
  display: none;
}
.registration-verification-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(145deg, #1bb6a6, #07857d);
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: 0 9px 22px rgba(9, 137, 126, 0.2);
}
.registration-verification-card .eyebrow {
  margin: 0;
}
.registration-verification-card h3 {
  margin: -6px 0 0;
  color: #29494b;
  font-family: var(--font-brand);
  font-size: 1.25rem;
}
.registration-verification-copy {
  margin: -4px 0 2px;
  color: #687d7f;
  font-size: 0.72rem;
  line-height: 1.65;
}
/* Dòng nhắc hạn dùng là câu thứ hai của cùng một đoạn, đứng ngay dưới dòng báo
   đã gửi đến đâu. Thẻ bao là lưới có gap 12px nên nếu để nguyên, hai câu tách
   ra thành hai khối rời — đọc như hai ý khác nhau. Kéo ngược lại cho chúng sát
   nhau đúng bằng một dòng liền mạch. */
.registration-verification-copy.is-note {
  margin-top: -13px;
}
.registration-verification-copy strong {
  color: var(--teal-dark);
  overflow-wrap: anywhere;
}
.registration-code-field input {
  min-height: 55px;
  padding: 10px 15px;
  border: 1px solid #cfe3df;
  border-radius: 14px;
  outline: none;
  background: #ffffff;
  color: #254749;
  font-family: var(--font-brand);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-align: center;
}
.registration-code-field input:focus {
  border-color: #0d9186;
  box-shadow: 0 0 0 4px rgba(13, 145, 134, 0.1);
}
.registration-code-field input::placeholder {
  color: #b6c7c5;
}
.registration-verification-status {
  min-height: 18px;
  margin: -4px 0 0;
  color: #748889;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
}
.registration-verification-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.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;
}
@media (max-width: 520px){
.checkout-payment-form {
    padding: 18px;
    border-radius: 18px;
  }
.checkout-payment-form .panel-heading {
    margin-bottom: 18px;
    padding-bottom: 15px;
  }
.checkout-panel-heading-row {
    gap: 8px;
  }
.checkout-panel-heading-row .checkout-edit-back-button {
    min-height: 44px;
    gap: 7px;
    padding: 5px 10px 5px 5px;
    border-radius: 14px;
    font-size: 0.66rem;
  }
.checkout-panel-heading-row .checkout-edit-back-button svg {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 10px;
  }
.checkout-panel-heading-row .checkout-edit-back-button::after {
    left: 44px;
    right: 9px;
    bottom: 5px;
  }
.checkout-email-field {
    gap: 11px;
    padding: 15px;
    border-radius: 16px;
  }
.checkout-email-gate-heading {
    align-items: flex-start;
  }
.checkout-email-stage {
    grid-template-columns: 1fr;
    gap: 7px;
  }
.checkout-email-action {
    width: 100%;
    padding-inline: 10px;
    font-size: 0.64rem;
  }
.checkout-verified-email-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }
.checkout-verified-email-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
.checkout-verified-email-card > button {
    grid-column: 2;
    justify-self: start;
  }
.checkout-address-actions-right {
    display: grid;
    grid-template-columns: 1fr;
  }
.checkout-address-action,
  .checkout-address-action.is-add,
  .checkout-address-action.is-switch,
  .checkout-address-action.is-edit {
    width: 100%;
    min-width: 0;
  }
.registration-verification-card {
    padding: 16px;
    border-radius: 16px;
  }
.registration-code-field input {
    font-size: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce){
.checkout-email-stage {
    transition: none;
  }
}
/* Feedback community hub */
body[data-page="feedback"] .app {
  width: min(1280px, calc(100% - 32px));
}
.feedback-page-heading {
  align-items: center;
  margin-bottom: 22px;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(201, 226, 222, 0.88);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 205, 108, 0.2), transparent 25%),
    radial-gradient(circle at 8% 90%, rgba(48, 185, 170, 0.14), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f1faf8 58%, #fffaf0 100%);
  box-shadow: 0 20px 50px rgba(21, 67, 72, 0.08);
}
.feedback-page-heading h1 {
  max-width: 720px;
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 2.1vw, 2.14rem);
  line-height: 1.08;
}
.feedback-page-heading > div > p:last-child {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}
.feedback-stories-shell {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(205, 223, 224, 0.9);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(24, 62, 68, 0.07);
}
.feedback-stories-heading,
.feedback-feed-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}
.feedback-stories-mobile-add-button {
  display: none;
}
.feedback-stories-heading h2 {
  margin: 2px 0 4px;
  font-family: var(--font-brand);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}
.feedback-stories-heading > div > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}
.feedback-stories-controls {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(43, 151, 139, 0.14);
  border-radius: 999px;
  background: #f4faf9;
}
.feedback-stories-controls button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--teal-dark);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.feedback-stories-controls button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-stories-controls button:hover,
.feedback-stories-controls button:focus-visible {
  color: var(--teal-dark);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(31, 105, 100, 0.12);
  outline: 2px solid transparent;
  transform: translateY(-1px);
}
.feedback-stories-controls button:focus-visible {
  outline-color: rgba(43, 151, 139, 0.28);
  outline-offset: 1px;
}
.feedback-stories-controls button:active {
  box-shadow: none;
  transform: scale(0.94);
}
.feedback-stories {
  display: grid;
  grid-auto-columns: 150px;
  grid-auto-flow: column;
  gap: 12px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.feedback-stories::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.feedback-story-card {
  position: relative;
  display: block;
  width: 150px;
  height: 218px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 19px;
  color: #ffffff;
  background: #dfecea;
  box-shadow: 0 10px 24px rgba(16, 65, 68, 0.14);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.feedback-story-card:hover,
.feedback-story-card:focus-visible {
  box-shadow: 0 15px 30px rgba(16, 65, 68, 0.2);
  outline: none;
  transform: translateY(-3px);
}
.feedback-story-card > img,
.feedback-story-placeholder,
.feedback-story-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.feedback-story-card > img {
  z-index: 0;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 480ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.feedback-story-card > img.is-active {
  opacity: 1;
  transform: scale(1);
}
.feedback-story-card:hover > img.is-active {
  transform: scale(1.035);
}
.feedback-story-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(145deg, #2ab4a6, #086f68);
  font-size: 3rem;
}
.feedback-story-shade {
  background:
    linear-gradient(180deg, rgba(7, 25, 31, 0.28), transparent 34%),
    linear-gradient(0deg, rgba(7, 25, 31, 0.88), transparent 62%);
}
.feedback-story-copy {
  position: absolute;
  z-index: 2;
  right: 11px;
  bottom: 12px;
  left: 11px;
  display: grid;
  min-width: 0;
  gap: 3px;
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.55);
}
.feedback-story-copy strong,
.feedback-story-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-story-copy strong {
  font-size: 0.73rem;
}
.feedback-story-copy small {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.58rem;
  font-weight: 800;
}
.feedback-story-rating-star {
  color: #ffd66f;
}
.feedback-story-copy small {
  display: flex;
  gap: 3px;
  align-items: center;
}
.feedback-story-product-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  margin-left: 1px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(7, 63, 60, 0.34);
}
.feedback-story-product-icon svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-story-skeleton {
  width: 150px;
  height: 218px;
  border-radius: 19px;
  background: linear-gradient(100deg, #edf3f3 30%, #f8fbfb 50%, #edf3f3 70%);
  background-size: 220% 100%;
  animation: feedbackSkeleton 1.2s linear infinite;
}
.feedback-story-empty {
  display: grid;
  min-width: min(420px, 100%);
  min-height: 120px;
  place-items: center;
  padding: 20px;
  border: 1px dashed #c9ddda;
  border-radius: 16px;
  color: var(--muted);
  background: #f7fbfa;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
@keyframes feedbackSkeleton {
  to { background-position: -220% 0; }
}
.feedback-feed {
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(205, 223, 224, 0.9);
  border-radius: 24px;
  background: #f8fbfb;
}
.feedback-feed-toolbar {
  align-items: center;
  margin-bottom: 18px;
}
.feedback-filter-host {
  flex: 0 1 520px;
  min-width: 0;
  max-width: 100%;
}
.feedback-filter-host .account-order-filter-launcher {
  justify-items: end;
}
.feedback-filter-host .account-order-filter-summary {
  justify-content: flex-start;
}
.feedback-filter-star-symbol {
  color: #d69513 !important;
  background: linear-gradient(145deg, #fff7d9, #ffedb1) !important;
  box-shadow: inset 0 0 0 1px rgba(224, 166, 33, 0.13);
  font-size: 0.88rem;
  line-height: 1;
}
.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-list,
.account-feedback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 14px;
  align-items: start;
}
.feedback-list > .empty-state {
  grid-column: 1 / -1;
}
.feedback-feed-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe7e7;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(21, 59, 65, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.feedback-feed-card:hover {
  border-color: #abd9d3;
  box-shadow: 0 16px 34px rgba(21, 77, 78, 0.12);
  transform: translateY(-2px);
}
.feedback-feed-card[data-action="open-feedback-detail"] {
  cursor: pointer;
}
.feedback-feed-card[data-action="open-feedback-detail"]:focus-visible {
  border-color: var(--teal);
  box-shadow:
    0 0 0 4px rgba(19, 155, 143, 0.14),
    0 18px 38px rgba(21, 77, 78, 0.15);
  outline: none;
  transform: translateY(-2px);
}
.feedback-feed-card.is-story-target {
  border-color: var(--teal);
  box-shadow:
    0 0 0 4px rgba(19, 155, 143, 0.12),
    0 18px 38px rgba(21, 77, 78, 0.15);
}
.feedback-feed-card .feedback-media {
  position: relative;
  height: 158px;
  overflow: hidden;
  background: #ffffff;
}
.feedback-feed-card .feedback-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: #ffffff;
}
.feedback-rating-badge,
.feedback-product-chip {
  position: absolute;
  z-index: 2;
  top: 10px;
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  border-radius: 999px;
  font-size: 0.61rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}
.feedback-rating-badge {
  left: 10px;
  gap: 4px;
  padding: 4px 9px;
  color: #5d4300;
  background: rgba(255, 235, 167, 0.94);
}
.feedback-rating-badge span {
  color: #eca917;
}
.feedback-product-chip {
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  color: #ffffff;
  background: rgba(8, 94, 88, 0.82);
}
.feedback-product-chip svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-card-content {
  display: grid;
  gap: 8px;
  padding: 13px;
}
.feedback-card-author {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}
.feedback-card-author .feedback-avatar {
  width: 32px;
  height: 32px;
  border: 0;
  color: var(--teal-dark);
  background: #e2f5f2;
  text-shadow: none;
  backdrop-filter: none;
  font-size: 0.63rem;
}
.feedback-card-author > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.feedback-card-author strong,
.feedback-card-author small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-card-author strong {
  color: var(--ink);
  font-size: 0.72rem;
}
.feedback-card-author small {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 700;
}
.feedback-card-rating {
  color: #efb01f;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.feedback-card-content h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 0.86rem;
  line-height: 1.35;
}
.feedback-card-content > p {
  display: -webkit-box;
  min-height: 3.9em;
  margin: 0;
  overflow: hidden;
  color: #5e7377;
  font-size: 0.67rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* The line that closes each review card ("1 sản phẩm", the date). At 0.56rem
   it was 9px at every width, desktop included, which made the card look like
   it ended a line early. */
.feedback-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid #edf2f2;
  color: #849296;
  font-size: 0.63rem;
  font-weight: 750;
}
body.feedback-detail-modal-open {
  overflow-x: hidden;
  overflow-y: scroll;
}
.feedback-transition-source {
  opacity: 0 !important;
}
.feedback-detail-backdrop {
  z-index: 98;
  padding: clamp(12px, 3vw, 34px);
  background:
    radial-gradient(circle at 11% 13%, rgba(255, 210, 112, 0.28), transparent 27%),
    radial-gradient(circle at 88% 12%, rgba(115, 219, 205, 0.3), transparent 31%),
    radial-gradient(circle at 84% 88%, rgba(255, 159, 165, 0.18), transparent 29%),
    linear-gradient(145deg, rgba(250, 255, 254, 0.96), rgba(232, 249, 246, 0.96));
  backdrop-filter: blur(14px);
  overscroll-behavior: none;
  touch-action: none;
  will-change: opacity;
}
.feedback-detail-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  width: min(1120px, 100%);
  height: min(735px, calc(100dvh - 44px));
  min-height: min(540px, calc(100dvh - 44px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 220, 131, 0.2), transparent 31%),
    radial-gradient(circle at 88% 10%, rgba(99, 218, 202, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(250, 255, 254, 0.92), rgba(232, 249, 246, 0.9));
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow:
    0 38px 100px rgba(24, 103, 96, 0.24),
    0 9px 30px rgba(26, 89, 87, 0.1);
  transform-origin: center;
  transition:
    grid-template-columns 460ms cubic-bezier(0.22, 1, 0.36, 1),
    grid-template-rows 460ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 360ms ease;
  will-change: transform, border-radius, box-shadow, grid-template-columns, grid-template-rows;
}
.feedback-detail-modal.is-fullview {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
}
.feedback-detail-media {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 0;
  background: transparent;
  touch-action: pan-y;
}
.feedback-detail-media::before,
.feedback-detail-media::after {
  content: none;
}
.feedback-detail-media-canvas {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: var(--ka-con-tro-phong-to), zoom-in;
}
.feedback-detail-modal.is-fullview .feedback-detail-media-canvas {
  cursor: var(--ka-con-tro-thu-nho), zoom-out;
}
.feedback-detail-image-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  background: transparent;
  transform: scale(0.985);
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.feedback-detail-image-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}
.feedback-detail-fullview {
  position: absolute;
  z-index: 5;
  top: 17px;
  left: 17px;
  display: inline-flex;
  min-height: 38px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 13px 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #246a65;
  background: rgba(247, 255, 253, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 7px 19px rgba(14, 82, 78, 0.12);
  -webkit-backdrop-filter: blur(13px) saturate(118%);
  backdrop-filter: blur(13px) saturate(118%);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.feedback-detail-fullview:focus-visible {
  border-color: rgba(31, 174, 160, 0.55);
  color: #16776f;
  background: rgba(247, 255, 253, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 9px 22px rgba(7, 116, 106, 0.16);
  outline: none;
  transform: translateY(-1px);
}
.feedback-detail-fullview:focus-visible {
  outline: 2px solid rgba(39, 184, 170, 0.32);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine){
.feedback-detail-fullview:hover {
    border-color: rgba(31, 174, 160, 0.55);
    color: #16776f;
    background: rgba(247, 255, 253, 0.68);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 9px 22px rgba(7, 116, 106, 0.16);
    transform: translateY(-1px);
  }
}
.feedback-detail-fullview[aria-pressed="true"],
.feedback-detail-fullview[aria-pressed="true"]:focus-visible {
  border-color: rgba(31, 174, 160, 0.55);
  color: #ffffff;
  background: linear-gradient(145deg, rgba(47, 198, 181, 0.9), rgba(8, 132, 121, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 9px 23px rgba(7, 116, 106, 0.21);
}
.feedback-detail-fullview:active {
  transform: translateY(0) scale(0.96);
}
.feedback-detail-fullview svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}
.feedback-detail-fullview-collapse {
  display: none;
}
.feedback-detail-modal.is-fullview .feedback-detail-fullview-expand {
  display: none;
}
.feedback-detail-modal.is-fullview .feedback-detail-fullview-collapse {
  display: initial;
}
.feedback-detail-image-nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #28cabb;
  background: rgba(17, 63, 65, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 6px 16px rgba(11, 45, 48, 0.15);
  backdrop-filter: blur(12px) saturate(112%);
  cursor: pointer;
  opacity: 0.88;
  transform: translateY(-50%);
  transition:
    opacity 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.feedback-detail-image-nav.is-previous {
  left: 14px;
}
.feedback-detail-image-nav.is-next {
  right: 14px;
}
.feedback-detail-image-nav:hover,
.feedback-detail-image-nav:focus-visible {
  border-color: rgba(255, 255, 255, 0.96);
  color: #28cabb;
  background: rgba(8, 133, 122, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 9px 22px rgba(7, 91, 86, 0.24);
  outline: none;
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
}
.feedback-detail-image-nav:active {
  transform: translateY(-50%) scale(0.94);
}
.feedback-detail-image-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  filter: drop-shadow(0 1px 2px rgba(7, 39, 42, 0.2));
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.feedback-detail-image-dots {
  position: absolute;
  z-index: 4;
  bottom: 16px;
  left: 50%;
  display: inline-flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 7px 20px rgba(20, 91, 86, 0.09);
  backdrop-filter: blur(14px) saturate(125%);
  transform: translateX(-50%);
}
.feedback-detail-image-dot {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.feedback-detail-image-dot::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(57, 124, 118, 0.44);
  content: "";
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.feedback-detail-image-dot:hover::after,
.feedback-detail-image-dot:focus-visible::after {
  background: rgba(27, 150, 140, 0.78);
  transform: scale(1.18);
}
.feedback-detail-image-dot:focus-visible {
  outline: none;
}
.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);
}
.feedback-detail-image-placeholder {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  color: #4f7471;
  text-align: center;
}
.feedback-detail-image-placeholder > span {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(218, 160, 19, 0.17);
  border-radius: 25px;
  color: #e8a714;
  background: linear-gradient(145deg, #fff9dd, #ffefb9);
  box-shadow: 0 12px 25px rgba(203, 151, 24, 0.13);
  font-size: 2rem;
}
.feedback-detail-image-placeholder strong {
  color: #2b5552;
  font-family: var(--font-brand);
  font-size: 0.78rem;
}
.feedback-detail-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  gap: 14px;
  padding: 31px 30px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(93, 212, 195, 0.18), transparent 31%),
    radial-gradient(circle at 12% 100%, rgba(255, 211, 116, 0.13), transparent 30%),
    linear-gradient(165deg, #ffffff 0%, #fbfffe 62%, #f4fcfa 100%);
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition:
    opacity 230ms ease,
    transform 430ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 430ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear;
}
.feedback-detail-modal.is-fullview .feedback-detail-panel {
  padding-right: 0;
  padding-left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px);
  visibility: hidden;
  transition:
    opacity 190ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 430ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 430ms;
}
.feedback-detail-author {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-right: 46px;
}
.feedback-detail-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #30c9b5, #07857a);
  box-shadow:
    0 0 0 2px rgba(27, 180, 161, 0.18),
    0 9px 20px rgba(8, 119, 111, 0.16);
  font-size: 0.7rem;
  font-weight: 900;
}
.feedback-detail-author-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.feedback-detail-author strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 0.91rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-detail-author small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 750;
}
.feedback-detail-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27b9a4;
  box-shadow: 0 0 0 3px rgba(39, 185, 164, 0.12);
}
.feedback-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.feedback-detail-rating {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid #f6e0a5;
  border-radius: 999px;
  color: #e7a715;
  background: linear-gradient(145deg, #fffbee, #fff5ce);
  box-shadow: 0 7px 16px rgba(215, 163, 32, 0.09);
  font-size: 0.89rem;
  letter-spacing: 0.08em;
}
.feedback-detail-purchase-chip {
  display: inline-flex;
  min-height: 32px;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #cdebe6;
  border-radius: 999px;
  color: #26796f;
  background: #effaf7;
  font-size: 0.56rem;
  font-weight: 900;
  white-space: nowrap;
}
.feedback-detail-purchase-chip svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.feedback-detail-product {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid #d5eee9;
  border-radius: 17px;
  background:
    radial-gradient(circle at 94% 18%, rgba(255, 208, 108, 0.25), transparent 28%),
    linear-gradient(135deg, #effbf8, #f9fffd);
}
.feedback-detail-product > span {
  color: #43827c;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feedback-detail-product h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: clamp(0.98rem, 2vw, 1.22rem);
  line-height: 1.35;
}
.feedback-detail-scroll {
  position: relative;
  min-height: 0;
  padding: 20px 18px 20px 46px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e3eceb;
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 8%, rgba(255, 206, 101, 0.13), transparent 30%),
    #ffffff;
  box-shadow: 0 12px 28px rgba(28, 94, 90, 0.07);
  touch-action: pan-y;
}
.feedback-detail-scroll:focus-visible {
  border-color: #60c2b6;
  box-shadow:
    0 0 0 4px rgba(19, 155, 143, 0.1),
    0 12px 28px rgba(28, 94, 90, 0.08);
  outline: none;
}
.feedback-detail-quote {
  position: absolute;
  top: 14px;
  left: 16px;
  color: #78cec2;
  font-family: Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.feedback-detail-scroll p {
  margin: 0;
  color: #4b666a;
  font-size: 0.76rem;
  font-weight: 550;
  line-height: 1.82;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.feedback-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  padding: 0 2px;
  color: #6c8386;
  font-size: 0.59rem;
  font-weight: 800;
}
.feedback-detail-verified {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #267d73;
}
.feedback-detail-verified svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.feedback-detail-quantity {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #7b6b3f;
}
.feedback-detail-quantity > span:first-child {
  color: #eab340;
}
.feedback-detail-close {
  z-index: 6;
  top: 17px;
  right: 17px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(8, 119, 111, 0.13);
  border-radius: 50%;
  color: #29746d;
  background: rgba(244, 253, 251, 0.94);
  box-shadow: 0 9px 20px rgba(15, 92, 84, 0.12);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    color 170ms ease,
    background 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease,
    opacity 140ms ease;
}
.feedback-detail-close:hover,
.feedback-detail-close:focus-visible {
  border-color: #139b8f;
  color: #ffffff;
  background: linear-gradient(145deg, #24b9a7, #087d73);
  box-shadow: 0 11px 24px rgba(8, 125, 115, 0.23);
  outline: none;
  transform: rotate(6deg) scale(1.05);
}
body.feedback-detail-transitioning .feedback-detail-close {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 860px){
.feedback-detail-backdrop {
    align-items: end;
    padding: 8px;
  }
.feedback-detail-modal {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(246px, calc(36vh + 56px)) minmax(0, 1fr);
    height: calc(100dvh - 16px);
    min-height: 0;
    border-radius: 0;
  }
.feedback-detail-modal.is-fullview {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 0fr);
  }
.feedback-detail-media {
    padding: 56px 0 0;
  }
.feedback-detail-media-canvas {
    border-radius: 0;
  }
.feedback-detail-image-nav {
    top: calc(50% + 28px);
    width: 36px;
    height: 36px;
  }
.feedback-detail-image-nav.is-previous {
    left: 10px;
  }
.feedback-detail-image-nav.is-next {
    right: 10px;
  }
.feedback-detail-image-dots {
    bottom: 10px;
  }
.feedback-detail-fullview {
    top: 12px;
    left: 12px;
    min-height: 36px;
  }
.feedback-detail-panel {
    gap: 10px;
    padding: 18px 17px 14px;
  }
.feedback-detail-author {
    grid-template-columns: 40px minmax(0, 1fr);
    padding-right: 42px;
  }
.feedback-detail-avatar {
    width: 40px;
    height: 40px;
  }
.feedback-detail-scroll {
    padding: 16px 14px 16px 40px;
    border-radius: 16px;
  }
.feedback-detail-quote {
    top: 11px;
    left: 13px;
    font-size: 2rem;
  }
.feedback-detail-close {
    top: 12px;
    right: 12px;
  }
}
@media (max-width: 480px){
.feedback-detail-backdrop {
    padding: 0;
  }
.feedback-detail-modal {
    grid-template-rows: minmax(236px, calc(31vh + 56px)) minmax(0, 1fr);
    height: 100dvh;
    border-width: 0;
    border-radius: 0;
  }
.feedback-detail-media {
    padding: 56px 0 0;
  }
.feedback-detail-image-nav {
    width: 34px;
    height: 34px;
  }
.feedback-detail-image-dots {
    bottom: 8px;
  }
.feedback-detail-panel {
    padding: 15px 14px 12px;
  }
.feedback-detail-close {
    top: 12px;
    right: 12px;
  }
.feedback-detail-product {
    padding: 10px 12px;
    border-radius: 14px;
  }
.feedback-detail-footer {
    gap: 8px;
    font-size: 0.53rem;
  }
}
.feedback-detail-modal.is-fullview .feedback-detail-media {
  padding: 0;
}
.feedback-detail-modal.is-fullview .feedback-detail-image-nav {
  top: 50%;
}
.feedback-detail-modal.is-fullview .feedback-detail-fullview,
.feedback-detail-modal.is-fullview .feedback-detail-close {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 7px 20px rgba(20, 91, 86, 0.09);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}
.feedback-detail-modal.is-fullview .feedback-detail-fullview {
  color: #246a65;
}
.feedback-detail-modal.is-fullview .feedback-detail-close {
  color: #29746d;
}
.feedback-detail-modal.is-fullview .feedback-detail-image-nav {
  background: rgba(17, 63, 65, 0.224);
}
.feedback-detail-modal.is-fullview .feedback-detail-image-dots {
  background: rgba(255, 255, 255, 0.14);
}
@media (hover: hover) and (pointer: fine){
.feedback-detail-modal.is-fullview .feedback-detail-fullview:hover,
  .feedback-detail-modal.is-fullview .feedback-detail-close:hover {
    border-color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.21);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.54),
      0 9px 24px rgba(15, 72, 70, 0.14);
  }
.feedback-detail-modal.is-fullview .feedback-detail-fullview:hover {
    color: #246a65;
  }
.feedback-detail-modal.is-fullview .feedback-detail-close:hover {
    color: #29746d;
  }
.feedback-detail-modal.is-fullview .feedback-detail-image-nav:hover {
    color: #28cabb;
    background: rgba(8, 133, 122, 0.574);
  }
}
@media (prefers-reduced-motion: reduce){
.feedback-detail-modal,
  .feedback-detail-panel,
  .feedback-detail-fullview,
  .feedback-detail-close,
  .feedback-detail-image-slide,
  .feedback-detail-image-nav,
  .feedback-detail-image-dot::after {
    transition: none;
  }
}
.account-feedback-content {
  display: grid;
  gap: 16px;
  min-height: 280px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fbfb;
}
.account-orders-content > .account-order-filter-toolbar .account-order-filter-launcher,
.account-feedback-content > .feedback-filter-toolbar .account-order-filter-launcher {
  justify-items: end;
}
.account-feedback-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.account-feedback-workspace-heading {
  align-items: center;
}
.account-feedback-composer {
  display: grid;
  gap: 15px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(10, 151, 140, 0.2);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(244, 194, 89, 0.13), transparent 28%),
    linear-gradient(145deg, #f8fffd, #edf9f6);
  box-shadow: 0 12px 30px rgba(35, 81, 78, 0.08);
  transform-origin: top center;
  animation: accountFeedbackComposerEnter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.account-feedback-composer > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}
.account-feedback-composer h3 {
  margin: 3px 0 4px;
  font-family: var(--font-brand);
  font-size: 1.08rem;
}
.account-feedback-composer header p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
}
.account-feedback-composer > header > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #087b72;
  background: #dff5f1;
  font-size: 0.61rem;
  font-weight: 850;
}
.account-feedback-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px;
}
.account-feedback-product {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dceae7;
  border-radius: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 7px 17px rgba(41, 72, 74, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.account-feedback-product:hover,
.account-feedback-product:focus-visible {
  border-color: rgba(9, 151, 140, 0.4);
  box-shadow: 0 11px 23px rgba(18, 112, 104, 0.12);
  outline: none;
  transform: translateY(-2px);
}
.account-feedback-product-image {
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 12px;
  background: #eaf2f1;
}
.account-feedback-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-feedback-product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.account-feedback-product-copy strong,
.account-feedback-product-copy span,
.account-feedback-product-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-feedback-product-copy strong {
  font-size: 0.73rem;
}
.account-feedback-product-copy span {
  color: #5f7778;
  font-size: 0.61rem;
  font-weight: 700;
}
.account-feedback-product-copy small {
  color: #8b999a;
  font-size: 0.55rem;
}
.account-feedback-product-action {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 60px;
  padding: 7px 8px;
  border-radius: 11px;
  color: #087b72;
  background: #e5f6f2;
  font-size: 0.52rem;
  font-weight: 850;
}
.account-feedback-product-action > span {
  color: #edb83e;
  font-size: 0.9rem;
}
.account-feedback-picker-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 130px;
  place-content: center;
  padding: 20px;
  color: #688081;
  text-align: center;
}
.account-feedback-picker-empty > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  border-radius: 13px;
  color: var(--teal);
  background: #dff5f1;
}
.account-feedback-picker-empty svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.account-feedback-picker-empty strong {
  color: #355658;
  font-size: 0.75rem;
}
.account-feedback-picker-empty small {
  font-size: 0.62rem;
}
@keyframes accountFeedbackComposerEnter {
  from {
    opacity: 0;
    transform: translateY(-14px) scaleY(0.94);
  }
}
@media (max-width: 950px){
.account-feedback-workspace-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    padding: 4px 16px;
  }
}
@media (max-width: 640px){
.account-feedback-composer {
    padding: 14px;
  }
.account-feedback-composer > header {
    align-items: start;
    flex-direction: column;
  }
.account-feedback-product-list {
    grid-template-columns: 1fr;
  }
.account-feedback-product {
    grid-template-columns: 58px minmax(0, 1fr);
  }
.account-feedback-product-image {
    width: 58px;
    height: 58px;
  }
.account-feedback-product-action {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce){
.account-feedback-composer,
  .account-feedback-add-button,
  .account-feedback-add-icon svg,
  .account-feedback-product {
    animation: none;
    transition: none;
  }
}
.account-feedback-empty {
  display: grid;
  justify-items: center;
  min-height: 280px;
  place-content: center;
  padding: 30px;
  text-align: center;
}
.account-feedback-empty > span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 12px;
  border-radius: 19px;
  color: var(--teal);
  background: #e5f6f3;
}
.account-feedback-empty svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-feedback-empty h3 {
  margin: 0 0 7px;
  font-family: var(--font-brand);
}
.account-feedback-empty p {
  max-width: 460px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.65;
}
@media (max-width: 950px){
.feedback-page-heading {
    display: none;
  }
.feedback-stories-label {
    display: none;
  }
.feedback-stories-mobile-add-button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    padding: 4px 10px 4px 5px;
    border: 1px solid #b8ded8;
    border-radius: 999px;
    color: #08786f;
    background: #f0faf8;
    box-shadow: 0 4px 11px rgba(8, 125, 116, 0.08);
    font: inherit;
    cursor: pointer;
    transition:
      border-color 170ms ease,
      background 170ms ease,
      box-shadow 170ms ease,
      transform 170ms ease;
  }
.feedback-stories-mobile-add-button > span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #159d91;
  }
.feedback-stories-mobile-add-button svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
.feedback-stories-mobile-add-button strong {
    font-size: 0.59rem;
    font-weight: 850;
    white-space: nowrap;
  }
.feedback-stories-mobile-add-button:focus-visible {
    border-color: #61bbb2;
    background: #ffffff;
    box-shadow:
      0 0 0 3px rgba(29, 170, 157, 0.13),
      0 6px 14px rgba(8, 125, 116, 0.12);
    outline: none;
  }
.feedback-stories-mobile-add-button:active {
    transform: scale(0.96);
  }
}
@media (max-width: 900px){
.feedback-page-heading {
    align-items: stretch;
    flex-direction: column;
  }
.feedback-open-button {
    width: min(100%, 320px);
  }
.feedback-feed-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
.feedback-filter-host {
    width: 100%;
    flex-basis: auto;
  }
.feedback-filter-host .account-order-filter-launcher {
    justify-items: start;
  }
}
@media (max-width: 640px){
body[data-page="feedback"] .app {
    width: min(100% - 20px, 1280px);
  }
.feedback-stories-shell,
  .feedback-feed {
    padding: 14px;
    border-radius: 19px;
  }
.feedback-stories-shell {
    gap: 11px;
    margin-bottom: 20px;
  }
.feedback-stories-heading {
    align-items: center;
    gap: 10px;
  }
.feedback-stories-controls {
    flex: 0 0 auto;
  }
/* Asking for 3.5 cards regardless of width made each card 71px on a 320px
     phone: the reviewer's name was cut to about five letters and the rating
     under it fell to 7.8px, the smallest text anywhere on the site. The floor
     keeps a card readable and lets the strip show fewer of them instead —
     still a peeking carousel, just not a shredded one. */
  .feedback-stories {
    grid-auto-columns: max(104px, calc((100% - 24px) / 3.5));
    gap: 8px;
    padding: 2px 0 6px;
  }
.feedback-story-card,
  .feedback-story-skeleton {
    width: 100%;
    height: auto;
    aspect-ratio: 0.69;
    border-radius: 14px;
  }
.feedback-story-copy {
    right: 7px;
    bottom: 8px;
    left: 7px;
    gap: 2px;
  }
.feedback-story-copy strong {
    font-size: 0.61rem;
  }
.feedback-story-copy small {
    font-size: 0.58rem;
  }
.feedback-list,
  .account-feedback-grid {
    grid-template-columns: 1fr;
  }
.feedback-feed-card .feedback-media {
    height: 190px;
  }
.account-feedback-content {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce){
.feedback-story-card,
  .feedback-feed-card,
  .feedback-story-card > img {
    transition: none;
  }
.feedback-story-skeleton {
    animation: none;
  }
}
.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%);
}
.order-lookup-submit-button.is-loading .order-lookup-submit-search {
  display: none;
}
.order-lookup-submit-button.is-loading .order-lookup-spinner {
  display: block;
}
.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;
}
/* Guest checkout identity choice */
.checkout-identity-modal-backdrop {
  z-index: 96;
  overflow-y: auto;
  background:
    radial-gradient(circle at 22% 18%, rgba(58, 211, 188, 0.2), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(255, 195, 92, 0.18), transparent 28%),
    rgba(15, 35, 42, 0.56);
  opacity: 0;
  backdrop-filter: blur(7px);
  transition: opacity 190ms ease;
}
.checkout-identity-modal-backdrop.is-visible {
  opacity: 1;
}
.checkout-identity-modal-backdrop.is-switching-to-auth {
  opacity: 0;
  pointer-events: none;
}
.checkout-identity-card {
  isolation: isolate;
  width: min(560px, 100%);
  overflow: hidden;
  padding: 30px;
  border-color: rgba(28, 150, 137, 0.2);
  border-radius: 26px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(37, 190, 169, 0.58), rgba(255, 192, 91, 0.42)) border-box;
  box-shadow:
    0 34px 90px rgba(14, 48, 54, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  opacity: 0;
  transform: translateY(-18px) scale(0.97);
  transition:
    opacity 190ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.checkout-identity-card::before,
.checkout-identity-card::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.checkout-identity-card::before {
  top: -92px;
  right: -78px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(42, 201, 179, 0.17), rgba(42, 201, 179, 0));
}
.checkout-identity-card::after {
  bottom: -86px;
  left: -68px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 189, 77, 0.16), rgba(255, 189, 77, 0));
}
.checkout-identity-modal-backdrop.is-visible .checkout-identity-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.checkout-identity-modal-backdrop.is-switching-to-auth .checkout-identity-card {
  opacity: 0;
  transform: translateX(-28px) scale(0.98);
}
.checkout-identity-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border: 1px solid rgba(14, 142, 130, 0.16);
  border-radius: 50%;
  color: #08776f;
  background:
    radial-gradient(circle at 32% 22%, #fff, rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, #dff8f3, #c8efe8);
  box-shadow:
    0 12px 24px rgba(8, 119, 111, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.checkout-identity-icon svg {
  width: 25px;
  height: 25px;
}
.checkout-identity-card h2 {
  margin-top: 4px;
  font-size: clamp(1.35rem, 3vw, 1.72rem);
}
.checkout-identity-card > p:not(.eyebrow):not(.checkout-identity-register-prompt) {
  max-width: 470px;
  font-size: 0.76rem;
}
.checkout-identity-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.checkout-identity-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 70px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 18px;
  font: inherit;
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}
.checkout-identity-action-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  transition: transform 180ms ease;
}
.checkout-identity-action-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.checkout-identity-action-copy {
  display: grid;
  min-width: 0;
  gap: 0;
}
.checkout-identity-action-copy strong {
  font-family: var(--font-brand);
  font-size: 0.74rem;
  line-height: 1.35;
}
.checkout-identity-action-copy small {
  color: inherit;
  font-size: 0.59rem;
  font-weight: 700;
  line-height: 1.45;
  opacity: 0.72;
}
.checkout-identity-action.is-guest {
  border-color: #e9bd57;
  color: #694817;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(145deg, #fffaf0, #ffedbd);
  box-shadow:
    0 12px 25px rgba(185, 126, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.checkout-identity-action.is-guest .checkout-identity-action-icon {
  color: #8b5800;
  background: linear-gradient(145deg, #fff7da, #ffd978);
  box-shadow: 0 6px 14px rgba(180, 117, 8, 0.16);
}
.checkout-identity-action.is-login {
  border-color: #0b8177;
  color: #fff;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.2), transparent 44%),
    linear-gradient(135deg, #20b6a6, #08776f);
  box-shadow:
    0 13px 26px rgba(8, 119, 111, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.checkout-identity-action.is-login .checkout-identity-action-icon {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.16);
}
.checkout-identity-action:hover,
.checkout-identity-action:focus-visible {
  outline: none;
  transform: translateY(-2px);
}
.checkout-identity-action:hover .checkout-identity-action-icon,
.checkout-identity-action:focus-visible .checkout-identity-action-icon {
  transform: scale(1.06);
}
.checkout-identity-action.is-guest:hover,
.checkout-identity-action.is-guest:focus-visible {
  border-color: #dca62f;
  color: #563806;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(145deg, #fff8e7, #ffe29a);
  box-shadow:
    0 16px 29px rgba(185, 126, 20, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}
.checkout-identity-action.is-login:hover,
.checkout-identity-action.is-login:focus-visible {
  border-color: #05655e;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(135deg, #1aa89a, #06675f);
  box-shadow: 0 17px 30px rgba(8, 119, 111, 0.29);
}
.checkout-identity-action:active {
  transform: translateY(0);
}
.checkout-identity-register-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 18px 0 0 !important;
  color: #668083 !important;
  font-size: 0.68rem !important;
  font-weight: 750;
}
.checkout-identity-register-prompt button {
  padding: 3px 4px;
  border: 0;
  border-radius: 7px;
  color: #08776f;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgba(8, 119, 111, 0.28);
  text-underline-offset: 3px;
}
.checkout-identity-register-prompt button:hover,
.checkout-identity-register-prompt button:focus-visible {
  color: #055e58;
  background: #e7f7f4;
  outline: none;
  text-decoration-color: currentColor;
}
#loginModal.is-checkout-continuation {
  animation: checkoutAuthBackdropEnter 260ms ease both;
}
#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 (max-width: 640px){
.checkout-identity-modal-backdrop {
    align-items: end;
    padding: 12px;
  }
.checkout-identity-card {
    padding: 24px 18px 20px;
    border-radius: 24px;
  }
.checkout-identity-actions {
    grid-template-columns: 1fr;
  }
.checkout-identity-action {
    min-height: 64px;
  }
}
@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;
  }
}
/* Distinct login and registration actions inside the account modal */
.auth-submit-button {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  overflow: hidden;
  padding: 8px 14px 8px 9px;
  border-radius: 17px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.auth-submit-button::before {
  position: absolute;
  z-index: -1;
  top: -90%;
  left: -20%;
  width: 36%;
  height: 280%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.17), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg) translateX(-190%);
  transition: transform 440ms ease;
}
.auth-submit-button:hover:not(:disabled)::before {
  transform: rotate(18deg) translateX(470%);
}
.auth-submit-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
}
.auth-submit-main-icon,
.auth-submit-arrow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.auth-submit-main-icon {
  width: 22px;
  height: 22px;
}
.auth-submit-arrow {
  width: 18px;
  height: 18px;
  transition: transform 180ms ease;
}
.auth-submit-button:hover:not(:disabled) .auth-submit-arrow {
  transform: translateX(3px);
}
.auth-submit-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.auth-submit-copy strong,
.auth-submit-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-submit-copy strong {
  font-family: var(--font-brand);
  font-size: 0.78rem;
}
/* The line under "Đăng nhập" on the modal's own submit button. At 0.56rem it
   was 9px — the smallest reading text in a dialog whose whole job is being
   read. */
.auth-submit-copy small {
  font-size: 0.63rem;
  font-weight: 700;
}
.auth-login-submit {
  border: 1px solid #243d47;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(34, 201, 183, 0.2), transparent 30%),
    linear-gradient(135deg, #182a34 0%, #102029 58%, #0c171f 100%);
  box-shadow:
    0 14px 28px rgba(10, 24, 32, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.auth-login-submit .auth-submit-icon {
  border: 1px solid rgba(79, 224, 207, 0.2);
  color: #67e0d1;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.16), transparent 36%),
    rgba(29, 174, 158, 0.14);
  box-shadow: inset 0 0 18px rgba(48, 210, 191, 0.08);
}
.auth-login-submit .auth-submit-copy small {
  color: rgba(221, 244, 241, 0.62);
}
.auth-submit-status {
  position: relative;
  justify-self: center;
  width: 9px;
  height: 9px;
  border: 2px solid #14232c;
  border-radius: 50%;
  background: #4ce0b5;
  box-shadow:
    0 0 0 4px rgba(76, 224, 181, 0.12),
    0 0 14px rgba(76, 224, 181, 0.45);
}
.auth-login-submit:hover:not(:disabled),
.auth-login-submit:focus-visible {
  border-color: #37616a;
  background:
    radial-gradient(circle at 88% 10%, rgba(49, 224, 203, 0.25), transparent 32%),
    linear-gradient(135deg, #203741 0%, #122630 58%, #0c171f 100%);
  box-shadow:
    0 18px 34px rgba(10, 24, 32, 0.29),
    0 0 0 4px rgba(30, 175, 159, 0.08);
  outline: none;
  transform: translateY(-2px);
}
.auth-register-submit {
  border: 1px solid #e78267;
  color: #45251f;
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 255, 255, 0.48), transparent 27%),
    linear-gradient(135deg, #ffd07d 0%, #ffac78 45%, #ff887b 100%);
  box-shadow:
    0 14px 28px rgba(220, 105, 74, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.auth-register-submit .auth-submit-icon {
  border: 1px solid rgba(111, 48, 36, 0.1);
  color: #6e3328;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.auth-register-submit .auth-submit-copy small {
  color: rgba(75, 38, 30, 0.66);
}
.auth-register-submit:hover:not(:disabled),
.auth-register-submit:focus-visible {
  border-color: #d66b53;
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 255, 255, 0.54), transparent 29%),
    linear-gradient(135deg, #ffca68 0%, #ffa06d 45%, #f97870 100%);
  box-shadow:
    0 18px 34px rgba(220, 105, 74, 0.31),
    0 0 0 4px rgba(255, 153, 118, 0.12);
  outline: none;
  transform: translateY(-2px);
}
.auth-submit-button:active:not(:disabled) {
  box-shadow: 0 8px 17px rgba(26, 47, 55, 0.2);
  transform: translateY(0);
}
.auth-submit-spinner {
  display: none;
  width: 19px;
  height: 19px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: orderLookupSpin 700ms linear infinite;
}
.auth-submit-button.is-loading .auth-submit-main-icon {
  display: none;
}
.auth-submit-button.is-loading .auth-submit-spinner {
  display: block;
}
.auth-submit-button.is-loading .auth-submit-status,
.auth-submit-button.is-loading .auth-submit-arrow {
  opacity: 0.35;
}
.auth-submit-button:disabled,
.auth-submit-button:disabled:hover {
  cursor: wait;
  box-shadow: none;
  opacity: 0.78;
  transform: none;
}
@media (max-width: 480px){
.auth-submit-button {
    min-height: 58px;
  }
.auth-submit-copy strong {
    font-size: 0.73rem;
  }
}
@media (prefers-reduced-motion: reduce){
.auth-submit-button,
  .auth-submit-button::before,
  .auth-submit-arrow {
    transition: none;
  }
.auth-submit-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;
}
.auth-login-submit {
  border-color: #079487;
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(183, 255, 241, 0.28), transparent 30%),
    radial-gradient(circle at 12% 100%, rgba(94, 224, 212, 0.22), transparent 34%),
    linear-gradient(135deg, #2bc9b7 0%, #0aa493 48%, #06776e 100%);
  box-shadow:
    0 14px 29px rgba(8, 148, 135, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.auth-login-submit .auth-submit-icon {
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.25), transparent 38%),
    rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 5px 12px rgba(3, 103, 94, 0.12);
}
.auth-login-submit .auth-submit-copy small {
  color: rgba(255, 255, 255, 0.76);
}
.auth-login-submit .auth-submit-status {
  border-color: #08776e;
  background: #ffe58f;
  box-shadow:
    0 0 0 4px rgba(255, 229, 143, 0.16),
    0 0 15px rgba(255, 229, 143, 0.48);
}
.auth-login-submit:hover:not(:disabled),
.auth-login-submit:focus-visible {
  border-color: #04786f;
  background:
    radial-gradient(circle at 88% 8%, rgba(210, 255, 247, 0.32), transparent 32%),
    radial-gradient(circle at 12% 100%, rgba(94, 224, 212, 0.25), transparent 36%),
    linear-gradient(135deg, #27c1b0 0%, #07988a 48%, #056a62 100%);
  box-shadow:
    0 18px 35px rgba(8, 148, 135, 0.32),
    0 0 0 4px rgba(43, 201, 183, 0.11);
}
.sample-more-link {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 58px;
  overflow: hidden;
  padding: 8px 11px 8px 8px;
  border: 1px solid #a8d8d2;
  border-radius: 16px;
  color: #17494a;
  background:
    radial-gradient(circle at 92% 0, rgba(255, 212, 134, 0.32), transparent 34%),
    linear-gradient(135deg, #effcf9 0%, #e7f8f5 58%, #fff8e9 100%);
  box-shadow:
    0 10px 22px rgba(28, 104, 101, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  text-align: left;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.sample-more-link::before {
  position: absolute;
  top: -90%;
  left: -25%;
  width: 34%;
  height: 280%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg) translateX(-190%);
  transition: transform 440ms ease;
}
.sample-more-link:hover,
.sample-more-link:focus-visible {
  border-color: #6fc6bc;
  color: #0c5f5b;
  background:
    radial-gradient(circle at 92% 0, rgba(255, 205, 113, 0.4), transparent 36%),
    linear-gradient(135deg, #e4faf6 0%, #d9f4ef 58%, #fff3da 100%);
  box-shadow: 0 15px 28px rgba(28, 104, 101, 0.17);
  outline: none;
  transform: translateY(-2px);
}
.sample-more-link:hover::before {
  transform: rotate(18deg) translateX(480%);
}
.sample-more-link:hover .sample-more-link-arrow {
  transform: translateX(3px);
}
.sample-more-link.is-disabled {
  pointer-events: none;
  filter: saturate(0.65);
  opacity: 0.5;
}
.size-picker-trigger {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 30px;
  gap: 9px;
  align-items: center;
  min-height: 56px;
  padding: 7px 8px 7px 7px;
  border: 1px solid #bfd9d7;
  border-radius: 15px;
  color: #183f41;
  background:
    radial-gradient(circle at 94% 0, rgba(255, 226, 159, 0.2), transparent 30%),
    linear-gradient(135deg, #fff, #f2faf8);
  box-shadow:
    0 8px 18px rgba(32, 85, 88, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.size-picker-trigger:hover,
.size-picker-trigger[aria-expanded="true"] {
  border-color: #63beb5;
  color: #0b5d59;
  background:
    radial-gradient(circle at 94% 0, rgba(255, 221, 143, 0.26), transparent 32%),
    linear-gradient(135deg, #fff, #e9f8f5);
  box-shadow:
    0 11px 23px rgba(32, 85, 88, 0.12),
    0 0 0 4px rgba(19, 155, 143, 0.08);
  transform: translateY(-1px);
}
.size-picker-trigger-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(145deg, #34bcae, #087b72);
  box-shadow:
    0 6px 14px rgba(8, 123, 114, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.size-picker-trigger-icon svg {
  width: 25.3px;
  height: 25.3px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}
.size-picker-trigger-copy {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-brand);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.size-picker-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #187f78;
  background: rgba(19, 155, 143, 0.1);
  transition: color 170ms ease, background 170ms ease, transform 170ms ease;
}
.size-picker-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
.size-picker-trigger[aria-expanded="true"] .size-picker-arrow {
  color: #fff;
  background: var(--teal);
  transform: rotate(180deg);
}
.size-picker-trigger:disabled {
  box-shadow: none;
  filter: saturate(0.6);
  opacity: 0.5;
  transform: none;
}
.order-size-picker.is-empty .size-picker-trigger {
  min-height: 56px;
  border-color: #efb1a5;
  color: #813f34;
  background:
    radial-gradient(circle at 94% 0, rgba(255, 216, 133, 0.26), transparent 32%),
    linear-gradient(135deg, #fff, #fff3ed);
  box-shadow:
    0 9px 20px rgba(196, 91, 69, 0.09),
    inset 0 0 0 1px rgba(239, 100, 97, 0.08);
}
.order-size-picker.is-empty .size-picker-trigger-icon {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(145deg, #f28c78, #d95e54);
  box-shadow: 0 6px 14px rgba(194, 78, 65, 0.18);
}
.order-size-picker.is-empty .size-picker-arrow {
  color: #c25445;
  background: rgba(239, 100, 97, 0.1);
}
.order-size-picker.is-selected .size-picker-trigger {
  border-color: #91cec7;
  background:
    radial-gradient(circle at 94% 0, rgba(255, 226, 159, 0.22), transparent 31%),
    linear-gradient(135deg, #fff, #eaf8f5);
}
.size-picker-menu {
  gap: 6px;
  max-height: 300px;
  padding: 8px;
  border-color: #bcd7d5;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 226, 159, 0.16), transparent 25%),
    #fff;
  box-shadow:
    0 22px 45px rgba(22, 60, 67, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.7);
}
.size-menu-option {
  position: relative;
  min-height: 52px;
  padding: 8px 10px;
  border-color: #e1ebeb;
  border-radius: 12px;
  background: rgba(248, 251, 251, 0.86);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}
.size-menu-option:hover {
  border-color: #91cfc8;
  background: #eef9f7;
  box-shadow: 0 7px 15px rgba(31, 95, 94, 0.08);
  transform: translateY(-1px);
}
.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);
}
.size-menu-option strong {
  font-family: var(--font-brand);
  font-size: 0.66rem;
}
.size-menu-option small {
  color: #70888a;
  font-size: 0.6rem;
}
.size-menu-option .price {
  padding: 5px 8px;
  border-radius: 999px;
  color: #9b493a;
  background: #fff0e7;
  font-size: 0.6rem;
}
@media (max-width: 720px){
.sample-more-link {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce){
.sample-more-link,
  .sample-more-link::before,
  .sample-more-link-arrow,
  .sample-suggestions-refresh,
  .sample-suggestions-refresh svg,
  .size-picker-trigger,
  .size-picker-arrow,
  .size-menu-option {
    transition: none;
  }
}
/* Bright KROMADE intro and simple color-coded product buttons */
body[data-page="order"] .studio-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(480px, 1.12fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  min-height: 454px;
  margin-bottom: 32px;
  padding: clamp(38px, 5vw, 68px);
  overflow: hidden;
  border: 1px solid rgba(20, 143, 132, 0.16);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 216, 126, 0.2), transparent 22%),
    radial-gradient(circle at 92% 8%, rgba(131, 109, 204, 0.13), transparent 24%),
    radial-gradient(circle at 84% 96%, rgba(240, 126, 117, 0.14), transparent 25%),
    linear-gradient(135deg, #e1f8f3 0%, #f4fcfa 50%, #fffaf4 100%);
  box-shadow:
    0 28px 70px rgba(33, 89, 84, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
body[data-page="order"] .studio-intro::after {
  position: absolute;
  z-index: -1;
  bottom: -86px;
  left: -52px;
  width: 222px;
  height: 222px;
  border: 38px solid rgba(19, 155, 143, 0.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
body[data-page="order"] .intro-copy {
  position: relative;
  z-index: 2;
  max-width: 570px;
}
body[data-page="order"] .intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(19, 155, 143, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 18px rgba(45, 104, 98, 0.07);
  color: #08776e;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
/* The same three ink dots the about hero opens with, in place of the single
   coral bead this eyebrow used to carry — the two heroes now introduce
   themselves the same way. */
body[data-page="order"] .intro-eyebrow > .intro-eyebrow-dots {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}
body[data-page="order"] .intro-eyebrow > .intro-eyebrow-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35b9c7;
}
body[data-page="order"] .intro-eyebrow > .intro-eyebrow-dots i:nth-child(2) {
  background: #ec6386;
}
body[data-page="order"] .intro-eyebrow > .intro-eyebrow-dots i:nth-child(3) {
  background: #f6c852;
}
/* The about hero's corner mark, copied here on the pseudo-element the old
   full-width strip used to occupy: a 58x8 pill of the three process inks in
   hard thirds, floated at the top right. Same size, same position, same
   gradient as .about-hero-v2::after — the colours are written out because the
   --about-* tokens only exist inside .about-landing. */
body[data-page="order"] .studio-intro::before {
  position: absolute;
  z-index: 4;
  top: 38px;
  right: 42px;
  width: 58px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #35b9c7 0 33.33%,
    #ec6386 33.33% 66.66%,
    #f6c852 66.66%
  );
  box-shadow: 0 8px 20px rgba(20, 45, 53, 0.09);
  content: "";
}
body[data-page="order"] .intro-copy .brand-headline {
  max-width: none;
  color: #173d3a;
  font-family: var(--font-brand);
  font-size: clamp(3.2rem, 5.35vw, 5.45rem);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.055em;
}
body[data-page="order"] .brand-headline span:first-child {
  width: max-content;
  max-width: 100%;
  color: #173d3a;
  white-space: nowrap;
}
body[data-page="order"] .brand-headline span:last-child {
  width: max-content;
  max-width: 100%;
  margin-top: 0.14em;
  background: linear-gradient(90deg, #0b8b80 0%, #25aa9c 58%, #7b67bc 100%);
  background-clip: text;
  font-size: 0.7em;
  letter-spacing: -0.035em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-page="order"] .intro-copy .intro-lead {
  max-width: 520px;
  margin: 24px 0 0;
  color: #5a6d72;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  font-weight: 500;
  line-height: 1.75;
}
body[data-page="order"] .intro-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
body[data-page="order"] .intro-highlights > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(47, 95, 94, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #4c6165;
  font-size: 0.68rem;
  font-weight: 800;
}
body[data-page="order"] .intro-highlights i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20a99b;
}
body[data-page="order"] .intro-highlights > span:nth-child(2) i {
  background: #e7b84e;
}
body[data-page="order"] .intro-highlights > span:nth-child(3) i {
  background: #e7847b;
}
/* Keeps the browser's own jump for index.html#dich-vu clear of the sticky
   header; app.js re-measures against the live header height right after and
   lands it on the exact spot the hero button uses. */
body[data-page="order"] #dich-vu {
  scroll-margin-top: calc(var(--header-h) + 14px);
}
body[data-page="order"] .intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
/* The hero CTA is the about page's closing button (.about-button-white in
   .about-final-actions), moved here: same pill, same white-on-shadow rest,
   same lift into KROMADE yellow on hover, same "Bắt đầu đặt in" + arrow.

   Only the arrow turns: that button sends you to another page, so it points
   up-and-out; this one scrolls down the page it is already on, so it points
   down-and-in.

   Written out rather than reusing .about-button because those rules read
   --about-teal, which only exists inside .about-landing. (--about-yellow used
   to be in the same boat; it has since been merged into the global
   --ka-yellow.) */
body[data-page="order"] .intro-order-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;
  color: #0b8d82;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(2, 68, 63, 0.18);
  font-family: var(--font-brand);
  font-size: 0.79rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
body[data-page="order"] .intro-order-button > span {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
}
body[data-page="order"] .intro-order-button:hover,
body[data-page="order"] .intro-order-button:focus-visible {
  color: #10282f;
  background: #f6c852;
  transform: translateY(-3px);
}
body[data-page="order"] .intro-order-button:focus-visible {
  outline: 3px solid rgba(20, 157, 145, 0.2);
  outline-offset: 3px;
}
body[data-page="order"] .intro-order-button:active {
  transform: translateY(-1px) scale(0.98);
}
/* Same step down .about-button takes at this width */
@media (max-width: 620px) {
  body[data-page="order"] .intro-order-button {
    min-height: 46px;
    padding: 10px 17px;
    font-size: 0.72rem;
  }
}
body[data-page="order"] .intro-visual {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
body[data-page="order"] .intro-visual::before,
body[data-page="order"] .intro-visual::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
body[data-page="order"] .intro-visual::before {
  top: -26px;
  right: -24px;
  width: 112px;
  height: 112px;
  background: rgba(126, 105, 195, 0.14);
}
body[data-page="order"] .intro-visual::after {
  bottom: -24px;
  left: -28px;
  width: 82px;
  height: 82px;
  border: 17px solid rgba(239, 126, 117, 0.16);
}
body[data-page="order"] .intro-visual img {
  width: 100%;
  aspect-ratio: 16 / 10.2;
  border: 8px solid rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  object-fit: cover;
  box-shadow:
    0 26px 48px rgba(41, 79, 80, 0.16),
    0 0 0 1px rgba(19, 123, 114, 0.09);
}
body[data-page="order"] .intro-visual figcaption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 214px;
  padding: 10px 13px 10px 10px;
  border: 1px solid rgba(19, 123, 114, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 28px rgba(35, 79, 78, 0.14);
  backdrop-filter: blur(10px);
}
body[data-page="order"] .intro-visual figcaption > span:first-child {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, #42c0b2, #0c887e);
  box-shadow: 0 8px 16px rgba(8, 119, 110, 0.2);
}
body[data-page="order"] .intro-visual figcaption > span:first-child::before {
  color: #ffffff;
  content: "✦";
  font-size: 1rem;
}
body[data-page="order"] .intro-visual figcaption > span:last-child {
  display: grid;
  gap: 2px;
}
body[data-page="order"] .intro-visual figcaption strong {
  color: #26494a;
  font-family: var(--font-brand);
  font-size: 0.76rem;
  font-weight: 900;
}
body[data-page="order"] .intro-visual figcaption small {
  color: #6c7d81;
  font-size: 0.62rem;
  font-weight: 700;
}
body[data-page="order"] .service-panel {
  border-color: rgba(19, 123, 114, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(241, 201, 102, 0.1), transparent 28%),
    linear-gradient(145deg, #ffffff, #f6fbfa);
  box-shadow: 0 14px 32px rgba(38, 79, 79, 0.08);
}
body[data-page="order"] .service-panel > .panel-heading {
  margin-bottom: 15px;
}
body[data-page="order"] .service-panel > .panel-heading h2 {
  color: #243f43;
  font-family: var(--font-brand);
  font-size: 1.22rem;
}
body[data-page="order"] .service-grid {
  gap: 8px;
}
body[data-page="order"] .service-card {
  /* Màu nhấn do dữ liệu sản phẩm quyết định: app.js đặt --service-accent thẳng
     lên thẻ. Giá trị dưới đây chỉ là mức dự phòng khi thiếu.

     --service-soft suy từ chính nó nên chủ shop chỉ phải chọn một màu, và mọi
     trạng thái di chuột / đang chọn bên dưới giữ nguyên thiết kế cũ vì chúng
     vốn đã tính từ --service-accent. */
  --service-accent: #11978b;
  --service-soft: color-mix(in srgb, var(--service-accent) 11%, white);
  position: relative;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 10px 32px 10px 11px;
  overflow: hidden;
  border-color: rgba(42, 78, 82, 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 13px rgba(38, 79, 79, 0.04);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
body[data-page="order"] .service-card::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--service-accent);
  opacity: 0.52;
  content: "";
}
body[data-page="order"] .service-card::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--service-accent);
  box-shadow: 0 0 0 3px var(--service-soft);
  content: "";
  transform: translateY(-50%);
}
body[data-page="order"] .service-card .service-code {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--service-accent) 18%, white);
  border-radius: 13px;
  background: var(--service-soft);
  color: var(--service-accent);
  box-shadow: none;
}
body[data-page="order"] .service-card .service-code svg {
  width: 29.9px;
  height: 29.9px;
}
body[data-page="order"] .service-card strong {
  color: #2f4348;
  font-family: var(--font-brand);
  font-size: 0.9rem;
  font-weight: 900;
}
body[data-page="order"] .service-card small {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #708084;
  font-size: 0.69rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body[data-page="order"] .service-card:hover,
body[data-page="order"] .service-card:focus-visible {
  border-color: color-mix(in srgb, var(--service-accent) 42%, white);
  background: linear-gradient(135deg, #ffffff, var(--service-soft));
  box-shadow: 0 10px 21px rgba(38, 79, 79, 0.09);
  outline: none;
  transform: translateX(3px);
}
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);
}
@media (max-width: 1100px){
body[data-page="order"] .studio-intro {
    grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.14fr);
    gap: 30px;
    padding-inline: clamp(30px, 4vw, 48px);
  }
body[data-page="order"] .intro-copy .brand-headline {
    font-size: clamp(2.8rem, 5.2vw, 4.4rem);
  }
}
@media (max-width: 920px){
body[data-page="order"] .studio-intro {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: 0;
    padding: clamp(32px, 6vw, 52px);
  }
body[data-page="order"] .intro-copy {
    max-width: 680px;
  }
body[data-page="order"] .intro-copy .brand-headline {
    font-size: clamp(3.15rem, 9vw, 5.2rem);
  }
body[data-page="order"] .intro-visual {
    width: 100%;
  }
}
@media (max-width: 640px){
body[data-page="order"] .studio-intro {
    gap: 28px;
    margin-bottom: 20px;
    padding: 29px 18px 20px;
    border-radius: 24px;
  }
body[data-page="order"] .intro-eyebrow {
    margin-bottom: 15px;
    padding: 7px 10px;
    font-size: 0.61rem;
  }
body[data-page="order"] .studio-intro::before {
    top: 18px;
    right: 18px;
    width: 46px;
    height: 7px;
  }
body[data-page="order"] .intro-copy .brand-headline {
    font-size: clamp(2.65rem, 14vw, 3.55rem);
  }
body[data-page="order"] .intro-copy .intro-lead {
    margin-top: 19px;
    font-size: 0.9rem;
  }
body[data-page="order"] .intro-highlights {
    gap: 6px;
    margin-top: 16px;
  }
body[data-page="order"] .intro-highlights > span {
    padding-inline: 8px;
    font-size: 0.61rem;
  }
/* Stays the flex row it is above this width so the CTA keeps its own width —
     as a 1fr grid item it was stretched edge to edge here. */
  body[data-page="order"] .intro-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
body[data-page="order"] .intro-order-button {
    width: auto;
  }
body[data-page="order"] .intro-visual img {
    border-width: 5px;
    border-radius: 20px;
  }
body[data-page="order"] .intro-visual figcaption {
    right: 10px;
    bottom: 10px;
    min-width: 0;
    max-width: calc(100% - 20px);
  }
body[data-page="order"] .service-card {
    min-height: 70px;
  }
}
@media (prefers-reduced-motion: reduce){
body[data-page="order"] :is(.intro-action, .intro-order-button, .service-card) {
    transition: none;
  }
}
/* Shared KROMADE page-loading experience */
html.is-page-loading,
html.is-page-loading body {
  overflow: hidden;
}
.page-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background:
    radial-gradient(circle at 8% 12%, rgba(246, 198, 90, 0.24), transparent 25%),
    radial-gradient(circle at 91% 11%, rgba(125, 102, 202, 0.2), transparent 27%),
    radial-gradient(circle at 84% 90%, rgba(235, 119, 111, 0.2), transparent 25%),
    linear-gradient(135deg, #dff8f2 0%, #effbf8 48%, #fff8ef 100%);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 420ms ease;
}
.page-loader[hidden] {
  display: none;
}
.page-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader.is-loaded :is(
  .page-loader-backdrop-shape,
  .page-loader-shape,
  .page-loader-progress span,
  .page-loader-card > p span
) {
  animation-play-state: paused !important;
}
.page-loader::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background: linear-gradient(
    90deg,
    #129b8e 0 54%,
    #83d3c8 54% 69%,
    #f1c862 69% 82%,
    #eb928b 82% 92%,
    #9785cf 92% 100%
  );
  content: "";
}
.page-loader-backdrop-shape {
  position: absolute;
  display: block;
  pointer-events: none;
  animation: pageLoaderBackdropFloat 4.8s ease-in-out infinite;
}
.page-loader-backdrop-shape.is-one {
  top: 8%;
  left: 7%;
  width: 88px;
  height: 88px;
  border: 18px solid rgba(19, 155, 143, 0.12);
  border-radius: 23px;
  transform: rotate(18deg);
}
.page-loader-backdrop-shape.is-two {
  right: 7%;
  bottom: 8%;
  width: 124px;
  height: 112px;
  background: rgba(126, 105, 195, 0.11);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation-delay: -1.6s;
}
.page-loader-backdrop-shape.is-three {
  right: 15%;
  top: 11%;
  width: 62px;
  height: 62px;
  border: 15px solid rgba(235, 119, 111, 0.12);
  border-radius: 50%;
  animation-delay: -3.2s;
}
.page-loader-card {
  position: relative;
  width: min(520px, calc(100vw - 40px));
  padding: 0 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.page-loader-card::after {
  content: none;
}
.page-loader-wave {
  position: relative;
  z-index: 2;
  height: 116px;
  margin: 0 0 12px;
}
.page-loader-wave::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  background:
    radial-gradient(circle, rgba(19, 123, 114, 0.18) 0 1.5px, transparent 1.8px)
    left center / 13px 3px repeat-x;
  content: "";
  transform: translateY(-50%);
}
.page-loader-shape {
  position: absolute;
  top: 50%;
  left: var(--shape-x);
  display: block;
  width: var(--shape-size);
  height: var(--shape-size);
  background: var(--shape-color);
  filter: drop-shadow(0 7px 7px color-mix(in srgb, var(--shape-color) 25%, transparent));
  will-change: transform;
  animation: pageLoaderShapeWave 1.55s ease-in-out infinite;
  animation-delay: var(--shape-delay);
}
.page-loader-shape.is-square {
  border: 3px solid rgba(255, 255, 255, 0.58);
  border-radius: 7px;
}
.page-loader-shape.is-triangle {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.page-loader-progress {
  position: relative;
  z-index: 2;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(19, 123, 114, 0.09);
  contain: paint;
  transform: translateZ(0);
}
.page-loader-progress span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #159b8f, #59cabb, #f1c25f, #e9867e);
  box-shadow: 0 0 14px rgba(19, 155, 143, 0.24);
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform;
  animation: pageLoaderProgress 1.25s linear -0.25s infinite;
  animation-play-state: paused;
  transition: opacity 120ms ease-out;
}
.page-loader.is-motion-ready .page-loader-progress span {
  opacity: 1;
  animation-play-state: running;
}
.page-loader-card > p {
  position: relative;
  z-index: 2;
  margin: 10px 0 0;
  color: #526d70;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}
.page-loader-card > p span {
  display: inline-block;
  width: 18px;
  overflow: hidden;
  vertical-align: bottom;
  animation: pageLoaderDots 1.1s steps(4, end) infinite;
}
@keyframes pageLoaderShapeWave {
  0%,
  100% {
    transform: translate3d(-50%, 17px, 0) rotate(-9deg) scale(0.92);
  }
  25% {
    transform: translate3d(-50%, -25px, 0) rotate(42deg) scale(1.05);
  }
  50% {
    transform: translate3d(-50%, 7px, 0) rotate(92deg) scale(0.96);
  }
  75% {
    transform: translate3d(-50%, -18px, 0) rotate(142deg) scale(1.02);
  }
}
@keyframes pageLoaderProgress {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(278%, 0, 0);
  }
}
@keyframes pageLoaderBackdropFloat {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -16px;
    rotate: 7deg;
  }
}
@keyframes pageLoaderDots {
  from {
    width: 0;
  }
  to {
    width: 18px;
  }
}
@media (max-width: 560px){
.page-loader {
    padding: 14px;
  }
.page-loader::before {
    height: 5px;
  }
.page-loader-card {
    width: min(100%, 390px);
    padding: 0 8px;
  }
.page-loader-wave {
    height: 102px;
    margin-top: 0;
  }
.page-loader-shape:nth-child(1),
  .page-loader-shape:nth-child(9) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce){
.page-loader,
  .page-loader-backdrop-shape,
  .page-loader-shape,
  .page-loader-progress span,
  .page-loader-card > p span {
    animation: none;
    transition: none;
  }
.page-loader-shape {
    transform: translate3d(-50%, -50%, 0);
  }
.page-loader-progress span {
    width: 100%;
  }
}
/* 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);
}
.checkout-address-modal-close,
.image-options-close,
.account-profile-close-button,
.account-order-filter-modal-close,
.ka-close:not(.ka-confirm-close) {
  position: relative;
}
: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;
  }
}
#feedbackDetailModal .feedback-detail-modal.is-fullview > .feedback-detail-close[data-action="close-feedback-detail"] {
  border-color: rgba(255, 255, 255, 0.46);
  color: #29746d;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 7px 20px rgba(20, 91, 86, 0.09);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}
/* 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;
}
.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].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-section,
  .about-final-cta {
    width: calc(100% - 24px);
  }
.about-section {
    padding-top: 88px;
  }
}
/* 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;
  }
}
@media (hover: hover) and (pointer: fine){
#feedbackDetailModal .feedback-detail-modal.is-fullview > .feedback-detail-close[data-action="close-feedback-detail"]:hover {
    border-color: rgba(255, 255, 255, 0.68);
    color: #29746d;
    background: rgba(255, 255, 255, 0.21);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.54),
      0 9px 24px rgba(15, 72, 70, 0.14);
  }
}
/* Curated collections and progressive gallery */
.find-collections{padding:36px 28px 10px}
.find-collections-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.find-collections-heading h2{margin:0;font-size:22px}
.find-collections-heading p{margin:6px 0 0;color:#667085}
.collection-all-button{border:0;border-radius:999px;padding:11px 18px;background:#f3f4f6;font:inherit;cursor:pointer}
.collection-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.collection-card{border:0;background:none;padding:0;text-align:left;font:inherit;cursor:pointer}
.collection-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:265px;border-radius:14px;overflow:hidden;background:#edf0f3;margin-bottom:12px;gap:2px}
.collection-collage img{width:100%;height:100%;object-fit:cover}
.collection-collage img:first-child{grid-row:1/3}
.collection-card strong,.collection-card small{display:block}
.collection-card small{margin-top:4px;color:#667085}
@media(max-width:800px){
.collection-card-grid{grid-template-columns:1fr}
.collection-collage{height:220px}
.find-collections{padding-inline:16px}
.find-collections-heading{align-items:flex-start}
}
.gallery-collection-card{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}
.gallery-collection-collage{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;aspect-ratio:1/.92;overflow:hidden;border-radius:10px;background:#edf0f3;gap:2px}
.gallery-collection-collage img{width:100%;height:100%;object-fit:cover}
.gallery-collection-collage img:first-child{grid-row:1/3}
.gallery-collection-caption{display:block;margin-top:11px;font-size:15px;line-height:1.45}
.gallery-collection-card small{display:block;margin-top:4px;color:#667085}
.inline-collection-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 10px}
.inline-collection-heading span,.inline-collection-heading strong{display:block}
.inline-collection-heading span{color:#667085;font-size:13px}
.inline-collection-heading strong{font-size:22px}
.inline-collection-heading button{border:0;border-radius:999px;padding:10px 16px;background:#f3f4f6;font:inherit;cursor:pointer}
/* Keep crop modal rules last so generic modal styles cannot override them. */
.crop-design-modal-backdrop {
  padding: 36px 60px 36px 36px;
  background:
    radial-gradient(circle at 11% 13%, rgba(255, 210, 112, 0.28), transparent 27%),
    radial-gradient(circle at 88% 12%, rgba(115, 219, 205, 0.3), transparent 31%),
    radial-gradient(circle at 84% 88%, rgba(255, 159, 165, 0.18), transparent 29%),
    linear-gradient(145deg, rgba(250, 255, 254, 0.96), rgba(232, 249, 246, 0.96));
}
.crop-design-modal-close {
  top: 0;
  right: -52px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}
/* 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;
  }
}
/* --------------------------------------------------------------------------
   Crop fullview — the workspace travels empty
   --------------------------------------------------------------------------
   The zoom between the panel and the dialog is a FLIP: the dialog is scaled
   from the thumbnail's rect to its own. Anything measured in pixels while that
   transform is on — the ruler's ticks, the crop sliders' thumbs — is measured
   through it, and came out at the wrong scale for the whole of the animation.

   So the picture and the ruler sit the trip out. Only the edit surface zooms,
   which is the part whose size is actually changing; the contents are drawn
   once the workspace is at rest and then introduced on their own timing. */
/* The whole sheet goes, not just the artwork on it: .product-stage is the white
   page with its border and drop shadow, and a white rectangle riding along at
   the wrong scale was as much of a giveaway as the picture. What zooms is the
   checkered edit surface alone. */
body.crop-design-modal-transitioning .product-stage,
body.crop-design-modal-transitioning .product-ruler {
  opacity: 0;
}
/* The sheet arrives first and the ruler follows it a beat later, so the eye
   lands on the artwork rather than on the measurements. Both animations are
   opacity-only: scaling the sheet and translating the separate ruler canvas
   put them in different coordinate systems for a few frames after collapse,
   which made the top ruler slip inside the artwork. */
.crop-workspace.is-crop-content-entering .product-stage {
  animation: crop-content-image-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.crop-workspace.is-crop-content-entering .product-ruler {
  animation: crop-content-ruler-in 300ms cubic-bezier(0.22, 1, 0.36, 1) 110ms both;
}
@keyframes crop-content-image-in {
  from {
    opacity: 0;
  }

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

  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce){
body.crop-design-modal-transitioning .product-stage,
  body.crop-design-modal-transitioning .product-ruler {
    opacity: 1;
  }
.crop-workspace.is-crop-content-entering .product-stage,
  .crop-workspace.is-crop-content-entering .product-ruler {
    animation: none;
  }
}
/* --------------------------------------------------------------------------
   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-workspace .panel-heading {
  margin-bottom: -2px;
}
.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);
}
.admin-workspace .panel-heading h2,
.admin-workspace .manager-library-heading h2,
.admin-workspace .upload-queue-heading h2 {
  font-size: 1.05rem;
}
.collection-picker-tools .text-button {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
}
/* Quản lý sản phẩm ------------------------------------------------------- */

/* Danh mục chưa tải được hoặc chưa có hàng: nói thẳng thay vì để lưới trống. */
.service-grid-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 4px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
.service-grid-message .link-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.service-grid-message .link-button[disabled] {
  opacity: 0.5;
  cursor: default;
}
/* Nút chọn tùy chọn trên trang đặt in: cùng ngôn ngữ với nút chọn kích thước. */
.order-option-picker {
  margin-top: 8px;
}
/* Chưa chọn thì đỏ, chọn rồi mới xanh — cùng bảng màu với bước Kích thước:
   coral khi còn thiếu, teal khi đã xong. Vạch màu dùng box-shadow inset chứ
   không đổi border-width, để lưới ba cột bên trong không bị xê dịch. */
.order-option-picker.is-empty .size-picker-trigger {
  border-color: rgba(239, 100, 97, 0.42);
  color: #7f2f22;
  background: linear-gradient(135deg, #ffffff, #fff7f4);
  box-shadow:
    inset 3px 0 0 var(--coral),
    0 8px 18px rgba(239, 100, 97, 0.09);
}
.order-option-picker.is-empty .size-picker-trigger-copy small {
  color: #ad4230;
}
.order-option-picker.is-empty .size-picker-trigger:hover {
  border-color: rgba(239, 100, 97, 0.62);
  background: linear-gradient(135deg, #ffffff, #fff1ec);
}
.order-option-picker.is-selected .size-picker-trigger {
  border-color: rgba(19, 155, 143, 0.42);
  background: linear-gradient(135deg, #ffffff, #f2faf8);
  box-shadow:
    inset 3px 0 0 var(--teal),
    0 8px 18px rgba(32, 85, 88, 0.08);
}
/* Nhóm chính và nhóm tùy chọn dùng chung một bố cục: tên nhóm ở dòng nhỏ phía
   trên, lựa chọn hiện tại ở dòng dưới. Cả cột vì thế đọc thành một dãy đều
   nhau thay vì một ô kiểu này một ô kiểu kia. */
.order-option-picker .size-picker-trigger-copy,
.order-size-picker .size-picker-trigger-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}
.order-option-picker .size-picker-trigger-copy small,
.order-size-picker .size-picker-trigger-copy small {
  color: var(--muted);
  font-size: 0.72rem;
}
.order-option-picker .size-picker-trigger-icon img,
.order-size-picker .size-picker-trigger-icon img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
/* Modal chọn phần tử: phần tử có thể kèm ảnh nên cần nhiều chỗ hơn một dòng chữ,
   vì vậy nó mở ra modal thay vì xổ xuống tại chỗ như menu kích thước. */
.option-modal-backdrop {
  position: fixed;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  inset: 0;
  background: rgba(16, 40, 47, 0.44);
}
.option-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: 82vh;
  padding: 17px;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(16, 40, 47, 0.28);
}
.option-modal-head {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 13px;
  padding-right: 48px;
}
/* Neo vào chính góc phải trên của hộp, không nằm trong hàng tiêu đề: tiêu đề
   dài mấy thì nút vẫn đúng chỗ. */
.option-modal-close {
  position: absolute;
  top: 11px;
  right: 11px;
}
.option-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.option-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
  gap: 10px;
}
.option-choice {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.option-choice:hover {
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
}
.option-choice.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.option-choice-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
}
.option-choice-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.option-choice-label {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
/* Dòng mô tả khổ in — chỉ nhóm chính có. */
.option-choice-detail {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
/* Giá: giá đầy đủ với nhóm chính, phụ thu với nhóm tùy chọn. Cùng một chỗ đứng
   trong thẻ nên mắt tìm được ngay ở cả hai loại. */
.option-choice-price {
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}
.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;
}
.fm-item.is-selected {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, var(--paper));
}
/* 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);
  }
}
.icon-tile-pick.is-selected {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 6%, var(--paper));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 17%, transparent);
}
.icon-tile-pick.is-selected .icon-tile-art-shell {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.94), transparent 45%),
    color-mix(in srgb, var(--teal) 18%, var(--paper));
}
.icon-tile-pick.is-selected .icon-tile-action {
  color: var(--teal-dark);
  font-weight: 800;
}
.icon-tile-pick.is-selected .icon-tile-check {
  display: grid;
}
.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);
}
/* Chưa dán icon: ô hiện mã sản phẩm, vẫn theo màu nhấn. */
.manager-product-icon.is-empty {
  font-family: var(--font-brand, inherit);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}
/* Phân trang kho ảnh trên trang Tìm ảnh.

   Bản thân bộ nút là bộ nút của danh sách đơn hàng, dùng lại nguyên vẹn: cùng
   class, cùng cách rút gọn dãy số trang. Khối này chỉ lo chỗ đứng cho nó và
   dòng tóm tắt phía trên, thay cho dòng trạng thái của cơ chế cuộn vô tận cũ. */
.gallery-pagination {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 26px 16px 46px;
}
.gallery-pagination:empty {
  display: none;
}
.gallery-pagination .account-order-pagination {
  width: 100%;
  max-width: 1120px;
  border-top: 0;
  padding-top: 0;
}
@media (max-width: 620px){
.gallery-pagination {
    padding: 20px 12px 36px;
  }
.gallery-pagination .account-order-page-nav span:not([aria-hidden]) {
    display: none;
  }
.gallery-pagination .account-order-page-nav {
    padding-inline: 11px;
  }
}
/* Dòng nhắc phía trên hai nút chọn nguồn ảnh.

   Dòng này và box cảnh báo toàn phần dùng chung một kết quả đánh giá. Nó chỉ
   xuất hiện khi ảnh hiện tại ở mức phải cảnh báo. */
/* Dòng nhắc chất lượng ảnh.
   ---------------------------------------------------------------------------
   Giữ vị trí ở góc trên bên trái ô lưới và đổi màu theo mức cảnh báo. Nội dung
   dùng cùng nhịp mở/thu 280 ms và state tương tác của box Tiếp tục tiến trình:
   mở tối thiểu hai giây, giữ khi hover, chạm để mở lại rồi tự thu. */
.art-quality-hint {
  --art-quality-hint-open-width: min(560px, calc(100vw - 86px));
  position: absolute;
  /* Canvas thước dùng z-index 5 và nằm sau hint trong DOM. Hint phải cao hơn để
     dòng cảnh báo cùng icon luôn phủ lên vạch/số cm thay vì bị chúng cắt ngang. */
  z-index: 7;
  top: 4px;
  right: auto;
  left: 4px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
  box-sizing: border-box;
  width: 31px;
  max-height: 29px;
  margin: 0;
  max-width: calc(100% - 8px);
  padding: 5px 6px;
  border: 1px solid rgba(184, 134, 11, 0.3);
  border-radius: 9px;
  background: rgba(255, 249, 228, 0.92);
  color: #8a6410;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  cursor: help;
  pointer-events: auto;
  overflow: hidden;
  transition:
    width 280ms cubic-bezier(.2, .82, .2, 1),
    max-height 280ms cubic-bezier(.2, .82, .2, 1),
    box-shadow 180ms ease,
    transform 280ms cubic-bezier(.2, .82, .2, 1);
}
.art-quality-hint[hidden] {
  display: none;
}
.art-quality-hint[data-quality-level="low"] {
  border-color: rgba(201, 56, 79, 0.3);
  color: #b8324a;
  background: rgba(255, 241, 243, 0.94);
}
.art-quality-hint-text {
  display: block;
  flex: 0 0 calc(var(--art-quality-hint-open-width) - 40px);
  width: calc(var(--art-quality-hint-open-width) - 40px);
  min-width: calc(var(--art-quality-hint-open-width) - 40px);
  max-height: 6em;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-7px);
  transition:
    opacity 170ms ease,
    transform 280ms cubic-bezier(.2, .82, .2, 1);
}
.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: 7em;
  gap: 7px;
  padding-inline: 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;
  transform: translateX(0);
}
.art-quality-hint-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}
.art-quality-hint-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 620px){
.art-quality-hint {
    font-size: 0.69rem;
  }
}
/* Kho ảnh — cửa sổ chọn ảnh ngay trong trang đặt in.
   ---------------------------------------------------------------------------
   To hẳn để nhìn rõ ảnh: gần kín màn hình, chia ba tầng cố định — công cụ ở
   trên, lưới ảnh cuộn ở giữa, hai hàng gợi ý neo dưới đáy. Chỉ tầng giữa cuộn
   nên ô tìm và dải gợi ý luôn ở trong tầm mắt.

   Nằm dưới cửa sổ xem ảnh (z-index 90) một bậc: bấm "Dùng ảnh" trong kho có thể
   mở tiếp cửa sổ đó, và nó phải nằm trên. */
.library-modal-backdrop {
  z-index: 88;
  padding: 24px;
}
/* Đặt hẳn CHIỀU CAO chứ không chỉ chặn trên: chỉ chặn trên thì cửa sổ co lại
   vừa đúng số ảnh đang có, kho vài tấm là một dải dẹt lép giữa màn hình. Cao
   theo khung nhìn thì lưới ảnh lúc nào cũng rộng rãi, và màn càng cao càng thấy
   được nhiều hàng.

   Dùng dvh khi trình duyệt hiểu — trên di động thanh địa chỉ trượt lên xuống làm
   vh nhảy, dvh thì không. Dòng vh phía trên là đường lui cho trình duyệt cũ. */
.library-modal {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(1180px, 100%);
  height: 88vh;
  height: 88dvh;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(18, 30, 39, 0.28);
}
.library-modal-head {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  /* Chừa chỗ cho nút đóng ở góc, để tiêu đề dài không chui xuống dưới nó. */
  padding-right: 42px;
}
/* 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-modal-head h2 {
  margin: 2px 0 0;
  font-size: 1.12rem;
}
.library-modal-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  align-items: center;
  justify-content: space-between;
}
.library-modal-tools .account-album-search {
  flex: 1 1 220px;
  min-width: 0;
}
/* Chỉ tầng này cuộn. Cho nó nền hơi lõm để tách khỏi hai tầng đứng yên. */
.library-modal-body {
  overflow: auto;
  min-height: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 2%, var(--paper));
}
/* Lưới ảnh trong kho.
   ---------------------------------------------------------------------------
   Ô ảnh nhỏ hẳn — cạnh lớn nhất 144px kể cả ở kiểu "large" — vì đây là chỗ liếc
   qua rồi chọn, không phải chỗ ngắm ảnh.

   Ảnh dùng đúng bản WebP thu nhỏ mà kho đã dựng sẵn (rộng 720px), và dừng ở đó.
   Có bàn tới việc dựng thêm một biến thể nhỏ nữa cho vừa khít 144px, nhưng chủ
   shop chốt là dùng thumbnail sẵn có — đỡ phải thêm một biến thể vào luồng tải
   ảnh lên rồi còn phải bù cho gần hai nghìn ảnh đang nằm trong kho. */
.library-grid {
  display: grid;
  gap: 8px;
  padding: 4px;
}
/* Cận trên của mỗi cột chốt cứng, không để 1fr kéo ô to ra: màn càng rộng thì
   thêm cột chứ ô không phình theo. */
.library-grid.is-small {
  grid-template-columns: repeat(auto-fill, minmax(72px, 96px));
}
.library-grid.is-medium {
  grid-template-columns: repeat(auto-fill, minmax(96px, 120px));
}
.library-grid.is-large,
.library-grid.is-list {
  grid-template-columns: repeat(auto-fill, minmax(112px, 144px));
}
/* Cả thẻ là một nút: bấm đâu cũng là chọn ảnh đó. Không có lớp phủ, không có
   icon nào hiện lên khi rê chuột — chỉ viền đậm lên để biết đang trỏ vào đâu. */
.library-item {
  overflow: hidden;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.library-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-item:hover,
.library-item:focus-visible {
  border-color: var(--service-accent, var(--ink));
  transform: translateY(-1px);
}
.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);
}
@media (prefers-reduced-motion: reduce){
.library-item {
    transition: none;
  }
.library-item:hover,
  .library-item:focus-visible {
    transform: none;
  }
}
.library-suggest {
  display: grid;
  gap: 9px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.library-suggest[hidden] {
  display: none;
}
.library-suggest-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.82rem;
}
/* Đúng MỘT hàng.
   ---------------------------------------------------------------------------
   Ô rộng cố định và xếp theo cột, nên hàng không bao giờ tự xuống dòng. Số ảnh
   dựng ra do JavaScript đếm theo bề ngang thật của dải (xem veKhoAnh): vừa đủ
   lấp hàng, không tấm nào bị cắt dở ở mép phải.

   Hai biến này là nguồn duy nhất cho cả CSS lẫn phép đếm bên JavaScript — sửa
   một chỗ là hai bên cùng đổi. */
/* --o-goi-y-chuan là cỡ mong muốn, --o-goi-y là cỡ đang thật sự dùng. Bình
   thường hai cái bằng nhau; màn hẹp quá thì JavaScript ghi đè --o-goi-y để bốn
   tấm vẫn nằm đủ trong hàng (xem daiGoiYVuaMotHang). */
.library-suggest-grid {
  --o-goi-y-chuan: 112px;
  --o-goi-y: var(--o-goi-y-chuan);
  --khe-goi-y: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--o-goi-y);
  gap: var(--khe-goi-y);
  overflow: hidden;
}
/* Chỗ giữ nhịp trong lúc chờ nhóm ảnh hợp tỉ lệ về. Cao đúng bằng một ô nên
   dải không co giật khi ảnh hiện ra. */
.library-suggest-loading {
  display: flex;
  align-items: center;
  height: var(--o-goi-y);
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}
.library-suggest-item {
  overflow: hidden;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
}
.library-suggest-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-suggest-item:hover {
  border-color: var(--service-accent, var(--ink));
}
.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;
  }
}
@media (max-width: 640px){
.library-modal {
    gap: 11px;
    padding: 15px;
  }
.library-suggest-grid {
    --o-goi-y: 82px;
    --khe-goi-y: 7px;
  }
}
/* Thanh chuyển ô ảnh.
   ---------------------------------------------------------------------------
   Chỉ hiện với sản phẩm cần từ hai ảnh trở lên. Mỗi ô là một nút mang đúng tên
   chủ shop đặt, có dấu tích khi đã tải ảnh — nhìn một cái là biết còn thiếu gì
   mà không phải bấm thử từng ô. */
/* Nằm giữa dòng tiêu đề của khung xem trước, giữa chữ "Xem trước" và nhóm nút
   bên phải. Co lại được và cuộn ngang khi tên ô dài — thà cuộn còn hơn đẩy vỡ
   cả dòng tiêu đề. */
.slot-switcher {
  display: flex;
  flex: 1 1 auto;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.slot-switcher::-webkit-scrollbar {
  display: none;
}
.slot-chip {
  flex: 0 0 auto;
}
.preview-heading-right {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
}
/* Nút Đổi ảnh.
   ---------------------------------------------------------------------------
   Viên thuốc đặc mang đúng màu nhấn của sản phẩm đang chọn, không phải một dòng
   chữ mờ lẫn vào tiêu đề. Đây là lối thoát duy nhất khi khách trót chọn nhầm
   ảnh, nên nó phải tự nói ra rằng bấm được.

   Chỉ hiện khi đã có ảnh, mà lúc đó khung xem trước đầy màu sắc — nền đặc và
   một quầng sáng mảnh là đủ để nó không chìm vào ảnh phía sau. */
.preview-change-image {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--service-accent, var(--teal));
  color: #fff;
  font-size: 0.79rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--service-accent, #11978b) 32%, transparent);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.preview-change-image:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--service-accent, #11978b) 42%, transparent);
  transform: translateY(-1px);
}
.preview-change-image:active {
  transform: translateY(0);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--service-accent, #11978b) 30%, transparent);
}
.preview-change-image:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--service-accent, #11978b) 55%, transparent);
  outline-offset: 2px;
}
.preview-change-image[hidden] {
  display: none;
}
/* Mũi tên quay tại chỗ khi rê chuột — nói đúng việc nút sắp làm mà không cần
   thêm chữ nào. */
.preview-change-icon svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.28s ease;
}
.preview-change-image:hover .preview-change-icon svg {
  transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce){
.preview-change-image,
  .preview-change-icon svg {
    transition: none;
  }
.preview-change-image:hover {
    transform: none;
  }
.preview-change-image:hover .preview-change-icon svg {
    transform: 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;
}
.slot-switcher {
  flex: 1 1 240px;
}
/* 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.row > .eyebrow {
    order: 1;
  }

  .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-switcher[hidden] {
  display: none;
}
/* Ô ảnh chưa tới lượt. Mờ đi và bỏ con trỏ tay là đủ nói "chưa bấm được"; không
   dùng màu cảnh báo vì đây không phải lỗi, chỉ là chưa tới lượt. */
.slot-chip.is-locked {
  opacity: 0.42;
  cursor: not-allowed;
}
.slot-chip.is-locked:hover {
  border-color: var(--line);
}
.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.slot-chip:hover {
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
}
.slot-chip.is-active {
  border-color: var(--service-accent, var(--ink));
  background: color-mix(in srgb, var(--service-accent, #11978b) 10%, var(--paper));
}
.slot-chip-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
}
.slot-chip.is-done .slot-chip-mark {
  background: color-mix(in srgb, #2f8f5b 18%, transparent);
  color: #2f8f5b;
}
.slot-chip-optional {
  color: var(--muted);
  font-size: 0.68rem;
}
/* Tiêu đề ô ảnh ngay trong khung xem trước.
   ---------------------------------------------------------------------------
   Đây là nhãn trạng thái, không phải nút thứ hai: thanh chip phía trên vẫn lo
   chuyển ô. Pill đứng chính giữa mép trên, dùng màu nhấn của sản phẩm và nền
   trắng gần đặc để đọc được trên cả ảnh sáng, ảnh tối lẫn khung chưa có ảnh.
   pointer-events: none giữ toàn bộ thao tác kéo/căn ảnh phía dưới nguyên vẹn. */
.preview-slot-title {
  position: absolute;
  z-index: 7;
  top: 10px;
  left: 50%;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  max-width: calc(100% - 20px);
  padding: 5px 10px 5px 6px;
  border: 1px solid color-mix(in srgb, var(--service-accent, #11978b) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--service-accent, #11978b) 9%, rgba(255, 255, 255, 0.96));
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(24, 35, 45, 0.14);
  pointer-events: none;
  transform: translateX(-50%);
}
.preview-slot-title[hidden] {
  display: none;
}
.preview-slot-title-count {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--service-accent, var(--teal));
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--service-accent, #11978b) 28%, transparent);
}
.preview-slot-title-name {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px){
.slot-chip {
    padding: 5px 10px;
    font-size: 0.72rem;
  }
.slot-chip-optional {
    display: none;
  }
.preview-slot-title {
    top: 16px;
    gap: 5px;
    max-width: calc(100% - 12px);
    padding: 4px 7px 4px 4px;
  }
.preview-slot-title-count {
    min-width: 24px;
    height: 20px;
    padding-inline: 5px;
    font-size: 0.59rem;
  }
.preview-slot-title-name {
    font-size: 0.68rem;
  }
}
/* Hai lối đưa ảnh vào, nằm ngay trong khung xem trước.
   ---------------------------------------------------------------------------
   Trước đây chúng nằm trong một hộp riêng ở cột trái, cách khung xem trước cả
   một quãng — khách nhìn vào khung trống rỗng mà không biết bấm đâu. Nay đặt
   thẳng vào chỗ ảnh sẽ hiện ra.

   Nằm trong .print-mask-layer nên bị chính mặt nạ vùng in cắt theo hình sản
   phẩm. Vì vậy khối này căn giữa và chừa lề rộng: hình ốp bo cong hay khoét
   camera thì phần giữa vẫn luôn đặc, nút không bị xén. */
.art-drop {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 9px;
  /* Lề dọc theo phần trăm để tránh mép cong của hình in, còn lề ngang cố định:
     hình ốp điện thoại chỉ rộng chừng 230px, mà 14% mỗi bên thì hai nút chỉ còn
     hơn 60px và chữ vỡ thành từng chữ một. */
  padding: 10% 12px;
}
/* Hai nút nhô lên một chút lúc xuất hiện, ngay sau khi tấm ảnh mờ đi. Đặt trên
   từng nút chứ không trên cả khối: khối này trải kín khung và mang lề theo phần
   trăm, dịch cả khối thì mép trên bị hụt khỏi vùng in.

   Animation chỉ chạy đúng lúc khối chuyển từ ẩn sang hiện, vì đó là lúc phần tử
   được dựng lại; những lượt render sau không đụng gì tới nó nên nút đứng yên. */
.art-drop:not([hidden]) > * {
  animation: art-drop-nho-len 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.art-drop:not([hidden]) > *:nth-child(2) {
  animation-delay: 0.05s;
}
.art-drop:not([hidden]) > *:nth-child(3) {
  animation-delay: 0.1s;
}
@keyframes art-drop-nho-len {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.art-drop:not([hidden]) > * {
    animation: none;
  }
}
.art-drop[hidden] {
  display: none;
}
/* Trạng thái chuẩn bị ảnh dùng lại đúng track chuyển màu của màn hình load,
   nhưng độ rộng là tiến độ thật thay vì vệt indeterminate chạy vòng. Card nằm
   chính giữa khung crop trong lúc xử lý và được JavaScript ẩn ngay khi
   hoàn tất để trả lại toàn bộ không gian cho ảnh. */
.art-upload-status {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  bottom: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(88%, 25rem);
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--service-accent, var(--teal)) 30%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 12px 30px rgba(17, 69, 73, 0.14);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
}
.art-upload-status[hidden] {
  display: none;
}
.art-upload-status[data-state="failed"] {
  border-color: color-mix(in srgb, #d34f5d 46%, var(--line));
}
.art-upload-status.is-completing {
  pointer-events: none;
  animation: art-upload-status-out 220ms cubic-bezier(.4, 0, 1, 1) both;
}
@keyframes art-upload-status-out {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94);
  }
}
/* Sau khi card tiến độ rời đi, ảnh/hồ sơ và bộ điều khiển cùng xuất hiện theo
   hai nhịp ngắn. Mask được dựng sẵn trước frame đầu nên các lỗ không bật đột ngột. */
.crop-workspace.is-upload-result-entering :where(
  #previewImageFrame,
  #printGuideLayer,
  #printOverlayLayer,
  .crop-tools,
  .crop-confirm-actions
) {
  animation: artwork-crop-result-in 420ms cubic-bezier(.22, 1, .36, 1) both;
}
.crop-workspace.is-upload-result-entering :where(.crop-tools, .crop-confirm-actions) {
  animation-delay: 90ms;
}
/* Canvas thước phải ở nguyên hệ tọa độ trong mọi frame. Nếu scale/translate
   canvas rồi vẽ lại giữa animation, getBoundingClientRect() trả tọa độ đã biến
   đổi và các vạch sẽ còn lệch sau khi animation kết thúc. */
.crop-workspace.is-upload-result-entering .product-ruler {
  animation: artwork-crop-ruler-result-in 330ms cubic-bezier(.22, 1, .36, 1) 90ms both;
}
@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; }
}
.art-upload-status-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--service-accent, var(--teal)) 14%, white);
  color: var(--service-accent, var(--teal-dark));
  font-size: 1rem;
  font-weight: 900;
}
.art-upload-status-copy {
  min-width: 0;
}
.art-upload-status-copy strong,
.art-upload-status-copy small {
  display: block;
}
.art-upload-status-copy strong {
  font-size: 0.78rem;
}
.art-upload-status-copy small {
  overflow: hidden;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.art-upload-progress-track {
  display: block;
  height: 5px;
  margin-top: 7px;
}
.art-upload-progress-track > span {
  width: 0;
  opacity: 1;
  animation: none;
  transition: width 160ms ease-out;
}
.art-upload-status-percent {
  min-width: 2.6em;
  color: var(--teal-dark);
  font-size: 0.72rem;
  text-align: right;
}
.art-upload-retry {
  grid-column: 2 / -1;
  justify-self: start;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(211, 79, 93, 0.11);
  color: #a43b47;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 620px){
.art-upload-status {
    top: 50%;
    width: calc(100% - 12px);
    gap: 7px;
    padding: 8px;
    border-radius: 11px;
  }
.art-upload-status-icon {
    width: 25px;
    height: 25px;
  }
.art-upload-status-copy strong {
    font-size: 0.7rem;
  }
.art-upload-status-copy small {
    font-size: 0.61rem;
  }
}
@media (prefers-reduced-motion: reduce){
.art-upload-status.is-completing,
  .crop-workspace.is-upload-result-entering :is(
    #previewImageFrame, #printGuideLayer, #printOverlayLayer,
    .product-ruler, .crop-tools, .crop-confirm-actions
  ) { animation: none; }
}
/* Chưa chọn xong khổ in và tùy chọn thì hai nút vẫn đứng đó nhưng bấm không
   được — để khách thấy trước lát nữa sẽ làm gì, thay vì nhìn một khung trống. */
.art-drop.is-disabled {
  opacity: 0.45;
}
.art-drop.is-disabled .art-drop-button {
  cursor: not-allowed;
}
.art-drop.is-disabled .art-drop-button:hover {
  border-color: var(--line-strong);
  border-style: dashed;
}
/* Mỗi nút chiếm trọn một hàng.
   ---------------------------------------------------------------------------
   .sample-more-link còn mang grid-column: 2 / grid-row: 1 từ thời nó nằm trong
   .source-row hai cột — mà .source-row nay không còn trên trang nào. Không ghi
   đè thì hai nút bị nhét cạnh nhau trong một hàng và chữ vỡ vụn. */
.art-drop-button {
  grid-column: auto;
  grid-row: auto;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  max-width: 15rem;
  /* Dáng cũ của .upload-zone: nét đứt, nền giấy nhạt, cao tối thiểu 58px. */
  min-height: 58px;
  padding: 9px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-soft);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.art-drop-button:hover {
  border-color: var(--service-accent, var(--ink));
  border-style: solid;
}
/* Ô chọn tệp thật nằm ẩn sau nhãn, giữ nguyên cách cũ. */
.art-drop-button input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Nút huỷ nằm dưới hai lối đưa ảnh vào.
   ---------------------------------------------------------------------------
   Mang tông vàng KROMADE — cùng bộ màu với dòng nhắc chất lượng ảnh nên trông vẫn
   là người nhà, mà lại tách hẳn khỏi hai nút nét đứt phía trên và khỏi nút Đổi
   ảnh màu nhấn. Ba thứ ba màu, không ai lẫn vào ai.

   Vẫn nhỏ và thấp hơn hai nút kia: đây là đường lui, không phải việc chính. */
.art-drop-undo {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  max-width: 15rem;
  margin-top: 4px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, #f6c852 58%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #f6c852 20%, var(--paper));
  color: #7a5a12;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.art-drop-undo:hover {
  border-color: #e0ab2a;
  background: color-mix(in srgb, #f6c852 38%, var(--paper));
  color: #5e4409;
  transform: translateY(-1px);
}
.art-drop-undo:active {
  transform: translateY(0);
}
.art-drop-undo:focus-visible {
  outline: 2px solid color-mix(in srgb, #f6c852 75%, transparent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
.art-drop-undo {
    transition: none;
  }
.art-drop-undo:hover {
    transform: none;
  }
}
.art-drop-undo[hidden] {
  display: none;
}
.art-drop-undo-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 620px){
.art-drop-undo {
    padding: 4px 8px;
    font-size: 0.68rem;
  }
}
.art-drop-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.art-drop-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art-drop-copy {
  min-width: 0;
}
.art-drop-copy strong {
  display: block;
  font-size: 0.86rem;
}
.art-drop-copy small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
}
/* 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;
  }
}
/* Mã giữ lại nhưng chưa dùng tới: không bao giờ hiện ra. */
.parked-markup {
  display: none !important;
}
/* Ô 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;
}
/* Dòng quốc gia trong thẻ hồ sơ: cờ đứng trước tên nước, cùng một hàng. */
/* Dòng Quốc gia trong hồ sơ.

   Phải tự căn phải: các dòng khác là dd thường nên ăn text-align của dd, còn
   dòng này là flex vì có lá cờ đứng cạnh chữ, mà flex thì bỏ qua text-align. */
.account-profile-country {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
/* Cờ vẽ bằng SVG không có kích thước tự thân — thiếu hai dòng này là nó co về
   0 và dòng Quốc gia trông như không có cờ. */
.account-profile-flag {
  display: block;
  flex: 0 0 auto;
  width: 22.5px;
  height: 15px;
  overflow: hidden;
  border-radius: 3px;
}
.account-profile-flag svg,
.account-profile-flag img {
  display: block;
  width: 22.5px;
  height: 15px;
  object-fit: cover;
}
/* Tên nước dài thì cắt bằng dấu ba chấm như mọi dòng khác, chứ không đẩy cờ
   ra khỏi khung. */
.account-profile-country > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px){
.country-picker-native {
    display: none;
  }
}
/* ---------------------------------------------------------------------------
   Vùng cắt phóng to trên điện thoại xoay ngang
   ---------------------------------------------------------------------------
   Xoay ngang thì chiều cao là thứ hiếm nhất: thanh công cụ nằm ngang trên đầu
   và nút trượt nằm ngang dưới đáy ăn hết phần đứng vốn đã hẹp.

   Ở khổ này dựng lại: thanh công cụ thành một cột dọc bên trái, nút trượt thành
   một cột dọc bên phải, phần còn lại dành trọn cho trục X, trục Y và vùng sửa.

   ĐIỀU KIỆN DO app.js QUYẾT ĐỊNH, KHÔNG PHẢI MỘT MỐC TỶ LỆ CỐ ĐỊNH.

   syncCropLayoutMode() tính chiều cao ảnh lồng vừa khung cho cả hai bố cục rồi
   gắn lớp .is-crop-columns khi bố cục ba cột cho ảnh to hơn. Nhờ vậy quyết định
   tính được cả tỷ lệ khổ in đang chọn, chứ một mốc tỷ lệ cố định thì chỉ đúng
   cho đúng một khổ.

   Đo được: bố cục xếp dọc ăn mất 165px chiều cao và 20px bề ngang; bố cục ba
   cột ăn mất 166px bề ngang và 16px chiều cao. Mỗi bên hy sinh chừng 165px trên
   đúng một trục, nên cái nào lợi hơn chỉ phụ thuộc trục nào đang hiếm.

   Tính chiều cao ảnh lồng vừa khung (object-fit: contain) cho từng khổ in thật
   của trang, ngưỡng W/H mà ba cột bắt đầu thắng là: 0,77–0,85 với A4/A3 dọc;
   0,73–0,83 với móc khoá; 1,01 với sticker vuông; 1,12–1,18 với mousepad. Một
   mốc duy nhất phục vụ được cả nhóm là 1/1 — đúng bằng ngưỡng của khổ vuông và
   thiên về an toàn với các khổ dọc, vốn là phần lớn khổ in của trang.

   Dấu hiệu "đang phóng to" là vùng làm việc nằm trong .crop-design-modal-host —
   đó là việc app.js thật sự làm. Lớp .is-fullview mà nhiều quy tắc phía trên
   đang dùng thì không có ai gắn cho .crop-workspace cả. */
.crop-design-modal-host .crop-workspace.is-crop-columns {
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
}
/* Cột trái: thanh công cụ. Cụm zoom giữ ở trên cùng. */
/* Bề ngang phải cộng cả phần đệm và viền của chính hộp này: nó có
   `padding: 10px 12px` cộng viền 1px, mà `box-sizing` là `border-box`. Để 52px
   thì lòng trong chỉ còn 26px trong khi nút rộng 44px — mọi nút bị cắt mất
   18px. 44 + 24 + 2 = 70px là vừa khít. */
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-tools {
  grid-row: 1;
  grid-column: 1;
  width: 70px;
  min-height: 0;
}
/* Xếp ngược lại: nút xem toàn màn hình lên trên cùng, cả nhóm nút còn lại dồn
   xuống đáy — đúng như hàng ngang, nơi nút đó bị `margin-left: auto` đẩy ra
   đầu đối diện với cả nhóm. */
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-toolbar {
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Trục chính giờ là trục dọc nên phần đẩy cũng phải đổi trục: bỏ
   `margin-left: auto` của hàng ngang, thay bằng `margin-bottom: auto` để nút
   bị đẩy lên đỉnh cột. */
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-fullview-button {
  margin-left: 0;
  margin-bottom: auto;
}
/* Cột hẹp nên bỏ chữ trên nút, chỉ còn hình. */
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-icon-button > span,
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-zoom-label {
  display: none;
}
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-icon-button {
  justify-content: center;
  width: 44px;
  min-width: 0;
  padding: 0;
}
/* Cụm zoom là inline-grid ba cột, `flex-direction` không có tác dụng gì với
   nó — phải đổi thẳng khung lưới thành một cột. Giữ nguyên thứ tự trong DOM
   (trừ, số, cộng) cho khớp với hàng ngang. */
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-zoom-stepper {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  width: 44px;
  min-width: 0;
  padding: 4px 0;
}
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-number-wrap {
  justify-content: center;
  grid-template-columns: auto auto;
  padding: 0 2px;
}
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-zoom-number {
  width: 26px;
  min-width: 0;
  text-align: center;
}
/* Cột giữa: trục và vùng sửa. */
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-preview-layout {
  grid-row: 1;
  grid-column: 2;
}
/* Cột phải: nút trượt.

   Không dựng lại một nút dọc riêng nữa — bản dựng riêng luôn lệch so với nút
   gốc ở chỗ này chỗ kia. Thay vào đó xoay đúng nút gốc 90 độ: mọi thứ bên
   trong (vệt sáng chạy, dòng chữ đổi khi kéo qua, mũi tên trên tay kéo, nhịp
   hoạt ảnh) giữ nguyên vì đó vẫn là cùng một nút.

   Xoay 90 độ là chiều kim đồng hồ, nên "trái sang phải" của bản gốc thành
   "trên xuống dưới", và mũi tên vốn chỉ sang phải thì chỉ xuống. */
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-confirm-actions {
  position: relative;
  grid-row: 1;
  grid-column: 3;
  width: 64px;
  height: 100%;
  min-width: 0;
}
.crop-design-modal-host .crop-workspace.is-crop-columns .crop-confirm-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(320px, calc(100vh - 40px));
  /* transform không đổi hộp bố cục, nên nút vẫn "chiếm" 320px bề ngang trong
     một cột rộng 64px. Cho nó ra khỏi dòng chảy bằng position: absolute thì
     phần thừa đó không đẩy cột nào cả. */
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}
/* 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;
  }
}
body.is-checkout-preparing [data-confirm-slide] {
  position: relative;
  z-index: 12600;
}
/* Thẻ không có thuộc tính disabled thì chặn bằng con trỏ. Quy tắc theo lớp nên
   vẫn giữ hiệu lực nếu một phần trang được dựng lại giữa lúc chờ. */
body.is-checkout-preparing a[href],
body.is-checkout-preparing label,
body.is-checkout-preparing [role="button"],
body.is-checkout-preparing [data-action] {
  pointer-events: none;
}
body.is-checkout-preparing [data-confirm-slide],
body.is-checkout-preparing [data-confirm-slide] * {
  pointer-events: auto;
}
@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-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%;
  }
}
/* Public reviews keep at least two cards per row, including narrow screens. */
body[data-page="feedback"] #feedbackList {
  grid-template-columns: repeat(auto-fill, minmax(min(245px, calc((100% - 14px) / 2)), 1fr));
}
@media (max-width: 620px){
body[data-page="feedback"] #feedbackList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
body[data-page="feedback"] #feedbackList .feedback-card-content { padding: 8px; min-width: 0; }
body[data-page="feedback"] #feedbackList .feedback-card-author { grid-template-columns: 24px minmax(0, 1fr); gap: 5px; }
body[data-page="feedback"] #feedbackList .feedback-avatar { width: 24px; height: 24px; }
body[data-page="feedback"] #feedbackList .feedback-media { height: auto; aspect-ratio: 1 / 1; }
body[data-page="feedback"] #feedbackList :is(h3, p) { overflow-wrap: anywhere; }
}
body[data-page="feedback"] { min-width: 0; }
body[data-page="feedback"] :is(.feedback-layout, .feedback-feed, #feedbackList) { min-width: 0; }
.coupon-form-status.is-error { color: var(--danger); }
.checkout-coupon-section { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(20, 156, 146, .26); border-radius: 20px; background: linear-gradient(145deg, rgba(234, 249, 247, .94), #fff); }
.checkout-coupon-section[hidden] { display: none; }
.checkout-coupon-heading { display: flex; align-items: center; gap: 11px; }
.checkout-coupon-heading > div { display: grid; gap: 2px; }
.checkout-coupon-heading > div > span { color: var(--teal-dark); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.checkout-coupon-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: var(--teal); color: #fff; }
.checkout-coupon-icon svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.checkout-coupon-list { display: grid; gap: 9px; }
.checkout-coupon-card { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.checkout-coupon-card.is-none { grid-template-columns: auto minmax(0, 1fr); }
.checkout-coupon-card:hover, .checkout-coupon-card.is-selected { border-color: var(--teal); box-shadow: 0 9px 24px rgba(10, 119, 112, .1); transform: translateY(-1px); }
.checkout-coupon-card.is-disabled { opacity: .58; cursor: not-allowed; }
.checkout-coupon-card input { width: 17px; height: 17px; margin: 0; accent-color: var(--teal); }
.checkout-coupon-code { border-radius: 9px; padding: 6px 8px; background: var(--teal-soft); color: var(--teal-dark); font-size: .74rem; font-weight: 900; }
.checkout-coupon-copy, .checkout-coupon-card.is-none > span { display: grid; gap: 2px; min-width: 0; }
.checkout-coupon-copy small, .checkout-coupon-card.is-none small, .checkout-coupon-copy em { color: var(--muted); font-size: .74rem; font-style: normal; }
.checkout-coupon-status { min-height: 1.2em; margin: 0; color: var(--muted); font-size: .76rem; font-weight: 700; }
.checkout-coupon-status button { border: 0; background: transparent; color: var(--teal-dark); font: inherit; text-decoration: underline; cursor: pointer; }
.summary-row.checkout-coupon-discount, .invoice-line.invoice-line-discount { color: var(--teal-dark); }
@media (max-width: 560px){
.checkout-coupon-card { grid-template-columns: auto minmax(0, 1fr); }
.checkout-coupon-code { grid-column: 2; justify-self: start; }
.checkout-coupon-copy { grid-column: 2; }
}

/* 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;
}
/* Icon tile — the recurring KROMADE container: squircle with one cut corner. */
.ka-scope .ka-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(11, 141, 130, 0.16);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-teal);
  background: #eaf6f4;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}
.ka-scope .ka-tile svg.ka-icon {
  width: 21px;
  height: 21px;
}
.ka-scope .ka-tile.is-accent {
  border-color: rgba(236, 99, 134, 0.22);
  color: #c6376a;
  background: #fdeef2;
}
.ka-scope .ka-tile.is-shield {
  border-color: rgba(128, 105, 215, 0.2);
  color: #5b48b0;
  background: #efecfb;
}
.ka-scope .ka-tile.is-notify {
  border-color: rgba(246, 200, 82, 0.42);
  color: var(--ka-warning);
  background: #fdf4dd;
}
.ka-scope .ka-tile.is-danger,
body[data-page="account"] .order-delete-modal .ka-tile.is-danger {
  border-color: rgba(201, 56, 79, 0.22);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}
/* ==========================================================================
   2. Typography — eyebrow / serial / headings / counts
   ========================================================================== */

.ka-scope .ka-eyebrow,
body[data-page="account"] .order-delete-modal .ka-eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  color: var(--ka-teal-dark);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}
.ka-scope .ka-eyebrow-rule,
body[data-page="account"] .order-delete-modal .ka-eyebrow-rule {
  width: 24px;
  height: 2px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
}
.ka-scope .ka-eyebrow.is-danger,
body[data-page="account"] .order-delete-modal .ka-eyebrow.is-danger {
  color: var(--ka-danger);
}
.ka-scope .ka-count {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid var(--ka-line);
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ka-scope .ka-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 11px 5px 8px;
  border: 1px solid rgba(11, 141, 130, 0.24);
  border-radius: 999px;
  color: var(--ka-teal-dark);
  background: #e9f7f4;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.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 {
  min-height: 38px;
  padding: 8px 15px;
  font-size: 0.7rem;
}
.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-block,
body[data-page="account"] .ka-btn-block {
  width: 100%;
}
/* --- primary: deep press ink, the single strongest action per view ------- */
.ka-scope .ka-btn-primary,
body[data-page="account"] .ka-btn-primary {
  color: #ffffff;
  background: var(--ka-deep);
  box-shadow: 0 12px 26px rgba(16, 40, 47, 0.22);
}
.ka-scope .ka-btn-primary .ka-btn-icon,
body[data-page="account"] .ka-btn-primary .ka-btn-icon {
  color: var(--ka-yellow);
}
/* --- gate sign-in: mint primary -----------------------------------------
   The sign-out gate's "Đăng nhập" runs on mint #45b9ae rather than the deep
   press ink the other primaries use, so it matches the header's sign-in button
   — same action, same colour, wherever a signed-out visitor meets it.

   Only the fill changes: the white label and the yellow icon are the primary's
   own, kept as they are. */
.ka-scope .ka-gate-actions .ka-btn-primary {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
}
/* --- 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);
}
/* --- secondary: filled teal, used sparingly ----------------------------- */
.ka-scope .ka-btn-secondary {
  color: #ffffff;
  background: var(--ka-teal);
  box-shadow: 0 12px 26px rgba(11, 141, 130, 0.22);
}
/* --- ghost: neutral / cancel ------------------------------------------- */
.ka-scope .ka-btn-ghost,
body[data-page="account"] .ka-btn-ghost {
  border-color: transparent;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
}
/* --- text link button --------------------------------------------------- */
.ka-scope .ka-btn-text {
  min-height: 34px;
  padding: 6px 4px;
  color: var(--ka-teal-dark);
  background: transparent;
}
/* --- destructive -------------------------------------------------------- */
.ka-scope .ka-btn-danger,
body[data-page="account"] .ka-btn-danger {
  color: #ffffff;
  background: var(--ka-danger);
  box-shadow: 0 12px 26px rgba(201, 56, 79, 0.22);
}
/* --- brand-teal primary --------------------------------------------------
   The hook is still named .ka-btn-add for the two buttons it started on
   ("Thêm địa chỉ" / "Thêm đánh giá" in the workspace head), but it now marks
   the whole brand-teal family: the address form's submit ("Thêm địa chỉ" /
   "Lưu thay đổi") and the profile form's "Lưu thông tin" carry it too, so
   every teal CTA in the account area shares one fill and one hover.

   These rest on teal instead of the deep-ink the other primary buttons use,
   so they read lighter than the page's hard CTAs. The icon drops its yellow
   here: yellow on teal is only 2.5:1, too weak to register, while white
   matches the label. */
.ka-scope .ka-btn-primary.ka-btn-add {
  background: var(--ka-teal-dark);
  box-shadow: 0 16px 32px rgba(11, 141, 130, 0.28);
}
.ka-scope .ka-btn-primary.ka-btn-add .ka-btn-icon {
  color: #ffffff;
}
/* --- "Đặt mặc định" (address card) --------------------------------------
   Keeps its label — promoting an address is not an action to guess from a
   pictogram — so it can't be a square like its two neighbours. Instead it
   borrows everything else from them: the same 40px height, the same corner-cut
   radius, the same 1px border, and the amber tonal fill that flips solid on
   hover. Reads as the wide member of the set rather than a different species.

   It runs on KROMADE yellow rather than the amber it started on, and it carries a
   solid fill in both states rather than a wash: rest is that yellow lightened
   toward white, hover is the yellow itself. So the button always looks filled,
   and hovering deepens it instead of switching it on. Label and icon sit in ink
   throughout — the page's own text colour, so nothing brown enters the palette,
   and the fill is left to signal state on its own.

   The body[data-page] duplicate is required, not decorative: the base .ka-btn
   rule is also written as `body[data-page="account"] .ka-btn`, which scores
   (0,2,1) and would otherwise keep its 999px radius, 46px height and ink
   colour here. */
.ka-scope .ka-btn-promote,
body[data-page="account"] .ka-btn-promote {
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 8px 15px;
  flex: 0 1 auto;
  border-color: rgba(232, 178, 52, 0.55);
  border-radius: 13px 13px 13px 5px;
  color: var(--ka-ink);
  background: var(--ka-yellow-soft);
}
/* insurance only: at every viewport the row measures well inside its card, but
   an unusually long label should ellipsise rather than push the row wider */
.ka-scope .ka-btn-promote > span:last-child,
body[data-page="account"] .ka-btn-promote > span:last-child {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* --- "Hủy" (address form, profile form) ---------------------------------
   Same tonal recipe as the .ka-icon-btn-danger delete button — pale danger
   fill, danger text, danger border at 24% — so cancelling reads as the
   step-away action rather than a neutral ghost. Hover matches that button too,
   flooding solid danger with a white label.

   Both selector forms are needed to outrank .ka-btn-ghost, whose own rule is
   written as `body[data-page="account"] .ka-btn-ghost` and scores (0,2,1). */
.ka-scope .ka-btn-cancel,
body[data-page="account"] .ka-btn-cancel {
  border-color: rgba(201, 56, 79, 0.24);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}
/* --- 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;
}
@media (hover: hover) and (pointer: fine){
.ka-scope .ka-icon-btn:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.4);
    color: var(--ka-teal-dark);
    background: #f2fbf9;
    transform: translateY(-1px);
  }
.ka-scope .ka-icon-btn-danger:not(:disabled):hover {
    border-color: rgba(201, 56, 79, 0.4);
    color: #ffffff;
    background: var(--ka-danger);
  }
.ka-scope .ka-icon-btn-edit:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.4);
    color: #ffffff;
    background: var(--ka-teal-dark);
  }
}
.ka-scope .ka-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
.ka-scope .ka-icon-btn:disabled {
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  cursor: not-allowed;
}
/* --- tonal icon buttons --------------------------------------------------
   The delete button set this shape; "Sửa" now shares it, so an address card's
   action row reads as one control group. With its word gone, hue is what
   identifies it — teal edits, red destroys — so it carries both aria-label and
   title. Rest fills are the pale end of each hue; hover floods that same hue
   solid, exactly as danger already did. ("Đặt mặc định" keeps its label and so
   stays a .ka-btn — see .ka-btn-promote — but wears the same tonal recipe in
   amber and the same corner-cut radius, so all three still read as one set.) */
.ka-scope .ka-icon-btn-danger {
  border-color: rgba(201, 56, 79, 0.24);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}
.ka-scope .ka-icon-btn-edit {
  border-color: rgba(11, 141, 130, 0.24);
  color: var(--ka-teal-dark);
  background: var(--ka-teal-soft);
}
/* ==========================================================================
   4. Page shell + sidebar
   ========================================================================== */

.account-page {
  padding-top: 34px;
  padding-bottom: 96px;
}
.ka-scope .ka-shell {
  display: grid;
  grid-template-columns: minmax(240px, 278px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.ka-scope .ka-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ka-scope .ka-drawer-inner {
  display: grid;
  gap: 14px;
}
.ka-scope .ka-drawer-head {
  display: none;
}
/* --- identity card ------------------------------------------------------
   Takes its fill and its decoration straight from .about-final-cta on the
   company page: flat brand teal under a 5% diagonal white sheen, with loose
   geometric shapes drifting past the edges. */
.ka-scope .ka-identity {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px 13px;
  align-items: center;
  padding: 17px 17px 15px;
  overflow: hidden;
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-cut) var(--ka-r-lg);
  color: #ffffff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 45%),
    var(--ka-teal);
  box-shadow: var(--ka-shadow-md);
}
/* everything except the art layer rides above it */
.ka-scope .ka-identity > *:not(.ka-identity-art) {
  position: relative;
  z-index: 1;
}
/* The four shapes from .about-final-cta-art, in the same order, colours and
   angles — scaled to about a third, since that block is 340px tall and this
   card is barely 100px. The printer's-crosshair mark that used to sit at the
   top right is gone: the yellow ring lands in that exact corner and two round
   devices there fought each other. */
.ka-scope .ka-identity-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.ka-scope .ka-identity-art i {
  position: absolute;
}
.ka-scope .ka-identity-art i:nth-child(1) {
  top: -26px;
  right: 10%;
  width: 74px;
  height: 74px;
  border: 15px solid rgba(246, 200, 82, 0.28);
  border-radius: 50%;
}
.ka-scope .ka-identity-art i:nth-child(2) {
  right: -10px;
  bottom: -22px;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: rgba(236, 99, 134, 0.32);
  transform: rotate(22deg);
}
.ka-scope .ka-identity-art i:nth-child(3) {
  bottom: 11px;
  left: 45%;
  width: 23px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(-18deg);
}
.ka-scope .ka-identity-art i:nth-child(4) {
  top: 7px;
  left: 44%;
  width: 5px;
  height: 29px;
  border-radius: 999px;
  background: rgba(53, 185, 199, 0.48);
  transform: rotate(45deg);
}
/* Brand-yellow chip with a deep-ink glyph and a notched corner — see
   --ka-avatar-* for why the gradient stops where it does. On the identity
   card's teal it reads as the one lit object in the panel. */
.ka-scope .ka-identity-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-deep);
  background: var(--ka-avatar-fill);
  box-shadow: var(--ka-avatar-ring);
}
.ka-scope .ka-identity-avatar svg.ka-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.ka-scope .ka-identity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 26px;
}
.ka-scope .ka-identity-copy strong {
  overflow: hidden;
  font-family: var(--font-brand);
  font-size: 0.87rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Solid white, not the 60% it used to be. Against the old deep ink 60% still
   cleared AA comfortably; against brand teal it collapses to 2.2:1, so the
   secondary tone now has to come from size and weight instead of opacity. */
.ka-scope .ka-identity-copy small {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* CMY ink key — brand identity without colouring the icons themselves */
.ka-scope .ka-identity-ink {
  display: flex;
  grid-column: 1;
  gap: 4px;
  align-items: center;
  padding-left: 3px;
}
.ka-scope .ka-identity-ink i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ka-cyan);
}
.ka-scope .ka-identity-ink i:nth-child(2) { background: var(--ka-magenta); }
.ka-scope .ka-identity-ink i:nth-child(3) { background: var(--ka-yellow); }
.ka-scope .ka-identity-meta {
  display: flex;
  grid-column: 2;
  gap: 7px;
  align-items: center;
  color: #ffffff;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.ka-scope .ka-identity-meta-icon svg.ka-icon {
  width: 14px;
  height: 14px;
}
/* --- navigation --------------------------------------------------------- */
.ka-scope .ka-nav {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  grid-template-columns: none;
}
.ka-scope .ka-nav-group {
  display: grid;
  gap: 3px;
}
.ka-scope .ka-nav-group + .ka-nav-group {
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--ka-line);
}
.ka-scope .ka-nav-group-label {
  margin: 0 0 3px;
  padding-left: 12px;
  color: var(--ka-muted-soft);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ka-scope .ka-nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 52px;
  padding: 8px 11px 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-ink);
  background: transparent;
  text-decoration: none;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}
/* active ink bar */
.ka-scope .ka-nav-item::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: var(--ka-teal);
  content: "";
  transform: translateY(-50%);
  transition: height var(--ka-base) var(--ka-ease);
}
.ka-scope .ka-nav-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px 12px 12px 4px;
  color: var(--ka-teal);
  background: #eef7f6;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}
.ka-scope .ka-nav-icon svg.ka-icon {
  width: 19px;
  height: 19px;
}
.ka-scope .ka-nav-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.ka-scope .ka-nav-copy strong {
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.ka-scope .ka-nav-copy small {
  overflow: hidden;
  color: var(--ka-muted);
  font-size: 0.64rem;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ka-scope .ka-nav-count {
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}
.ka-scope .ka-nav-count.is-quiet {
  color: var(--ka-muted);
}
@media (hover: hover) and (pointer: fine){
.ka-scope .ka-nav-item:hover {
    background: var(--ka-paper-soft);
    transform: translateX(2px);
  }
.ka-scope .ka-nav-item:hover .ka-nav-icon {
    color: var(--ka-teal-dark);
    background: #e3f4f1;
  }
}
.ka-scope .ka-nav-item:focus-visible {
  outline: none;
  border-color: rgba(53, 185, 199, 0.5);
  box-shadow: var(--ka-focus);
}
.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);
}
/* --- sidebar footer ----------------------------------------------------- */
.ka-scope .ka-sidebar-foot {
  display: grid;
}
/* Wears the notch instead of the pill every other .ka-btn uses, so the sidebar
   logout and the header dropdown's .account-menu-logout are the same object in
   two places. Border, radius and shadow are taken from that button verbatim,
   including its faintly warm shadow tint.

   The body[data-page] duplicate is required: .ka-btn-ghost's own rule is also
   written as `body[data-page="account"] .ka-btn-ghost`, which scores (0,2,1)
   and was silently winning border-color and background here. */
.ka-scope .ka-logout,
body[data-page="account"] .ka-logout {
  justify-content: flex-start;
  padding-left: 16px;
  border-color: var(--ka-line);
  border-radius: var(--ka-notch);
  color: var(--ka-muted);
  background: var(--ka-paper);
  box-shadow: 0 7px 16px rgba(145, 51, 51, 0.06);
}
@media (hover: hover) and (pointer: fine){
/* Both selector forms are required to outrank the generic .ka-btn-ghost
     hover a few lines up: that rule's `body[data-page="account"] ...` variant
     carries an extra element-level specificity point, so a single
     `.ka-scope .ka-logout:hover` rule loses to it and the ghost's ink/#e2eded
     hover shows instead — which was the bug being fixed here. Values mirror
     .account-menu-logout:hover so the sidebar and header dropdown agree. */
  .ka-scope .ka-logout:not(:disabled):hover,
  body[data-page="account"] .ka-logout:not(:disabled):hover {
    border-color: rgba(201, 56, 79, 0.3);
    color: var(--ka-danger);
    background: var(--ka-danger-soft);
  }
}
/* ==========================================================================
   5. Workspace (main column)
   ========================================================================== */

.ka-scope .ka-main {
  display: grid;
  min-width: 0;
  gap: 18px;
  scroll-margin-top: calc(var(--header-h) + 14px);
}
/* Four fixed slots, identical in every section:
     eyebrow | trigger
     title   | actions
   The trigger is a direct child of the header (not nested in the copy column)
   so it is pinned to the same top-right corner no matter what a section puts
   in its action slot. */
.ka-scope .ka-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow trigger"
    "title   actions";
  /* the title row keeps a fixed floor so its baseline does not shift between
     sections that carry a tall action (a button) and ones that carry only a
     count pill — or nothing at all */
  grid-template-rows: auto minmax(48px, auto);
  gap: 10px 16px;
  align-items: center;
  padding: 2px 4px 0;
}
.ka-scope .ka-workspace-eyebrow {
  grid-area: eyebrow;
  align-self: center;
  min-width: 0;
  min-height: 26px;
}
/* the eyebrow is a single unbreakable line — "GIAO HÀNG" must never split */
.ka-scope .ka-workspace-eyebrow .ka-eyebrow-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The trigger shares the auto column with the actions block, and because it has
   a fixed width it would otherwise sit at the *start* of whatever width the
   actions demand — which is why it drifted a different amount in every section.
   Pinning it to the end of the track keeps it on the same right edge always. */
.ka-scope .ka-workspace-head .ka-nav-trigger {
  grid-area: trigger;
  align-self: center;
  justify-self: end;
}
.ka-scope .ka-workspace-head .ka-workspace-actions {
  justify-self: end;
}
.ka-scope .ka-workspace-title {
  display: block;
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -0.048em;
  line-height: 1.04;
  overflow-wrap: break-word;
}
.ka-scope .ka-workspace-actions {
  display: flex;
  grid-area: actions;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
}
/* mobile nav trigger — hidden on desktop */
.ka-scope .ka-nav-trigger {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 1px solid var(--ka-line-strong);
  border-radius: 13px 13px 13px 5px;
  color: var(--ka-teal-dark);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  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);
}
.ka-scope .ka-nav-trigger svg.ka-icon {
  width: 20px;
  height: 20px;
}
.ka-scope .ka-nav-trigger:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
.ka-scope .ka-nav-trigger[aria-expanded="true"] {
  border-color: rgba(11, 141, 130, 0.5);
  color: #ffffff;
  background: var(--ka-teal);
}
/* ==========================================================================
   6. Surfaces — panels and cards
   ========================================================================== */

.ka-scope .ka-panel,
.ka-scope .account-orders-content,
.ka-scope .account-order-detail-content {
  padding: 20px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
}
.ka-scope .ka-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ka-scope .ka-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  overflow: visible;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-lg) var(--ka-cut);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  transition: box-shadow var(--ka-base) var(--ka-ease);
}
@media (hover: hover) and (pointer: fine){
.ka-scope .ka-card:hover {
    box-shadow: var(--ka-shadow-md);
  }
}
.ka-scope .ka-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding-bottom: 2px;
}
.ka-scope .ka-card-head > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.ka-scope .ka-card-head h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -0.032em;
  line-height: 1.12;
}
/* The profile card head carries an action button, so its text column is the
   first thing to run out of room. Rather than let "Thông tin cá nhân" wrap to
   a second line, the title is dropped once the column can no longer hold it on
   one line — the eyebrow above it still names the card. Measured intrinsic
   widths: "Thông tin cá nhân" 137px, "Cập nhật thông tin" 141px. */
.ka-scope .account-profile-card-heading .ka-card-head-copy {
  container-type: inline-size;
  container-name: kaProfileHead;
}
.ka-scope .account-profile-card-heading .ka-card-head-copy h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@container kaProfileHead (max-width: 147px){
.ka-scope .account-profile-card-heading .ka-card-head-copy h3 {
    display: none;
  }
}
/* profile summary list */
.ka-scope .account-profile-details {
  border-color: var(--ka-line);
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}
.ka-scope .account-profile-details > div {
  border-bottom-color: var(--ka-line);
}
.ka-scope .account-profile-details dt {
  color: var(--ka-muted);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}
.ka-scope .account-profile-details dd {
  color: var(--ka-ink);
  font-size: 0.74rem;
  font-weight: 800;
}
/* --- email preference switch -------------------------------------------- */
.ka-scope .account-email-toggle {
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md);
  color: var(--ka-ink);
  background: var(--ka-paper-soft);
  box-shadow: none;
  transition:
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease);
}
.ka-scope .account-email-toggle-copy strong {
  color: var(--ka-ink);
  font-size: 0.76rem;
  font-weight: 850;
}
.ka-scope .account-email-toggle-copy small {
  color: var(--ka-muted);
  font-size: 0.66rem;
  font-weight: 600;
}
.ka-scope .account-email-switch {
  border-color: var(--ka-line-strong);
  background: #dae4e5;
  box-shadow: inset 0 1px 3px rgba(20, 45, 53, 0.1);
}
.ka-scope .account-email-toggle.is-on {
  border-color: rgba(11, 141, 130, 0.4);
  background: #f0fbf9;
  box-shadow: none;
}
.ka-scope .account-email-toggle.is-on .account-email-switch {
  border-color: var(--ka-teal-dark);
  background: var(--ka-teal);
}
.ka-scope .account-email-toggle:not(:disabled):hover {
  border-color: rgba(11, 141, 130, 0.45);
  box-shadow: var(--ka-shadow-sm);
  transform: none;
}
.ka-scope .account-email-toggle:focus-visible {
  outline: none;
  border-color: var(--ka-teal);
  box-shadow: var(--ka-focus);
  transform: none;
}
.ka-scope .account-email-toggle:disabled {
  cursor: progress;
  opacity: 0.72;
}
/* ==========================================================================
   7. Forms
   ========================================================================== */

.ka-scope .ka-form {
  display: grid;
  gap: 14px;
}
.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;
}
/* styles.css carries a very high-specificity global control rule
   (`input:not(...)` x7). The id anchor below is the least noisy way to win
   that cascade without sprinkling !important through the system. */
#accountPageContent input:not([type="checkbox"]):not([type="radio"]),
#accountPageContent textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ka-line-strong);
  border-radius: var(--ka-r-md);
  color: var(--ka-ink);
  background: var(--ka-paper-soft);
  box-shadow: none;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 600;
  transition:
    border-color var(--ka-fast) ease,
    background var(--ka-fast) ease,
    box-shadow var(--ka-fast) ease;
}
#accountPageContent .ka-field textarea,
#accountPageContent .account-address-field textarea {
  min-height: 112px;
  line-height: 1.6;
  resize: vertical;
}
#accountPageContent input::placeholder,
#accountPageContent textarea::placeholder {
  color: #9aacb0;
  font-weight: 500;
}
#accountPageContent input:not([type="checkbox"]):not([type="radio"]):hover,
#accountPageContent textarea:hover {
  border-color: var(--ka-line-strong);
  background: var(--ka-paper);
}
#accountPageContent input:not([type="checkbox"]):not([type="radio"]):focus,
#accountPageContent textarea:focus {
  border-color: var(--ka-teal);
  background: var(--ka-paper);
  box-shadow: 0 0 0 4px rgba(11, 141, 130, 0.12);
  outline: none;
}
#accountPageContent input:disabled,
#accountPageContent textarea:disabled {
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  cursor: not-allowed;
}
/* Search keeps its own borderless pill treatment. The attribute selector is
   needed to outrank the global control rule, which would otherwise force a
   48px input and make the search 4px taller than every other action control. */
#accountPageContent .ka-search input[type="search"] {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.76rem;
  font-weight: 650;
}
.ka-scope .ka-field:focus-within .ka-field-icon {
  color: var(--ka-teal-dark);
}
/* password visibility toggle — 40px hit target, labelled in JS */
.ka-scope .password-field > input {
  padding-right: 50px;
}
.ka-scope .password-visibility-toggle {
  right: 6px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--ka-muted);
}
.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 .password-visibility-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
/* form action rows — one primary, one quiet escape */
.ka-scope .ka-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  margin-top: 2px;
}
.ka-scope .ka-form-actions.is-single {
  grid-template-columns: auto minmax(0, 1fr);
}
/* checkbox row */
.ka-scope .account-address-default-field {
  border-color: var(--ka-line);
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}
.ka-scope .account-address-default-field input:checked {
  border-color: var(--ka-teal);
  background: var(--ka-teal);
}
.ka-scope .account-address-default-field:focus-within {
  border-color: var(--ka-teal);
  box-shadow: 0 0 0 4px rgba(11, 141, 130, 0.1);
}
/* ==========================================================================
   8. Search + segmented control
   ========================================================================== */

.ka-scope .ka-search {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 232px;
  min-height: 46px;
  /* clears a stray legacy margin that made the album action row 4px taller
     than every other section's */
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ka-line-strong);
  border-radius: 999px;
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  transition:
    border-color var(--ka-fast) ease,
    box-shadow var(--ka-fast) ease;
}
.ka-scope .ka-search-icon {
  display: grid;
  place-items: center;
  color: var(--ka-muted);
}
.ka-scope .ka-search-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}
.ka-scope .ka-search input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--ka-ink);
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  outline: none;
}
.ka-scope .ka-search:focus-within {
  border-color: var(--ka-teal);
  box-shadow: 0 0 0 4px rgba(11, 141, 130, 0.12);
}
.ka-scope .ka-search:focus-within .ka-search-icon {
  color: var(--ka-teal-dark);
}
.ka-scope .ka-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ka-line);
  border-radius: 999px;
  background: var(--ka-paper-sunk);
}
.ka-scope .ka-segmented button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ka-muted);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease,
    box-shadow var(--ka-fast) ease;
}
.ka-scope .ka-segmented button svg.ka-icon {
  width: 17px;
  height: 17px;
}
@media (hover: hover) and (pointer: fine){
.ka-scope .ka-segmented button:hover {
    color: var(--ka-teal-dark);
  }
}
.ka-scope .ka-segmented button:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
.ka-scope .ka-segmented button.is-active {
  color: var(--ka-teal-dark);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
}
/* ==========================================================================
   9. Status badges — colour is never the only signal
   ========================================================================== */

.ka-scope .ka-status,
body[data-page="account"] .ka-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 26px;
  padding: 4px 11px 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
  font-size: 0.655rem;
  font-weight: 850;
  letter-spacing: 0.015em;
  line-height: 1.2;
  white-space: nowrap;
}
.ka-scope .ka-status .ka-status-icon {
  display: grid;
  place-items: center;
  flex: none;
}
.ka-scope .ka-status svg.ka-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.ka-scope .ka-status.is-new {
  border-color: #b7e4ea;
  color: #0d6c7a;
  background: #e9f7fa;
}
.ka-scope .ka-status.is-confirmed {
  border-color: #d2ccf2;
  color: #4a3da0;
  background: #efedfc;
}
.ka-scope .ka-status.is-printing {
  border-color: #efd27a;
  color: #765400;
  background: #fff7d7;
}
.ka-scope .ka-status.is-shipping {
  border-color: #b4e2da;
  color: var(--ka-teal-dark);
  background: #e7f6f3;
}
.ka-scope .ka-status.is-completed {
  border-color: #bde2c9;
  color: var(--ka-success);
  background: #e9f6ed;
}
.ka-scope .ka-status.is-cancelled {
  border-color: #e6cbd0;
  color: #91323e;
  background: #f7ebed;
}
.ka-scope .ka-status.is-processing {
  border-color: var(--ka-line);
  color: #4d6268;
  background: var(--ka-paper-sunk);
}
/* ==========================================================================
   10. Empty / loading states
   ========================================================================== */

.ka-scope .ka-empty {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 40px 22px;
  border: 1px dashed var(--ka-line-strong);
  border-radius: var(--ka-r-lg);
  background: var(--ka-paper-soft);
  text-align: center;
}
.ka-scope .ka-empty-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border: 1px solid rgba(11, 141, 130, 0.18);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-teal);
  background: #eaf6f4;
}
.ka-scope .ka-empty-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}
.ka-scope .ka-empty strong,
.ka-scope .ka-empty h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.ka-scope .ka-empty p,
.ka-scope .ka-empty > span,
.ka-scope .ka-empty small {
  max-width: 42ch;
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.73rem;
  font-weight: 550;
  line-height: 1.6;
}
.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);
}
.ka-scope .ka-empty.is-loading .ka-empty-icon {
  animation: kaPulse 1.4s ease-in-out infinite;
}
@keyframes kaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.ka-scope .ka-empty.compact {
  padding: 28px 18px;
}
/* ==========================================================================
   11. Address cards
   ========================================================================== */

.ka-scope .ka-address-card {
  position: relative;
  display: grid;
  gap: 15px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-cut) var(--ka-r-lg) var(--ka-r-lg);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  transition:
    border-color var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}
.ka-scope .ka-address-card::before,
.ka-scope .ka-address-card::after {
  content: none;
}
/* --- default address: the company page's hero treatment ------------------
   Same recipe as .about-hero-v2: a warm cream→mint paper gradient lit by a
   yellow, a cyan and a magenta ink glow, with the blueprint-grid corner and
   the CMY registration bar as signature details. Opacities are nudged up from
   the hero's since the card is far smaller — at hero values the colour would
   not read at this size. */
.ka-scope .ka-address-card.is-default {
  border-color: rgba(11, 141, 130, 0.34);
  background:
    radial-gradient(circle at 7% 6%, rgba(246, 200, 82, 0.26), transparent 27%),
    radial-gradient(circle at 97% 11%, rgba(53, 185, 199, 0.22), transparent 31%),
    radial-gradient(circle at 91% 97%, rgba(236, 99, 134, 0.16), transparent 33%),
    linear-gradient(118deg, #fffdf8 0%, #f9f5e8 56%, #f4fbf9 100%);
}
/* blueprint grid in the bottom-left corner — mirrors .about-hero-v2-paper-grid */
.ka-scope .ka-address-card.is-default::before {
  position: absolute;
  z-index: 0;
  inset: auto auto -66px -50px;
  width: 220px;
  height: 220px;
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(20, 45, 53, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 45, 53, 0.22) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  pointer-events: none;
  transform: rotate(-8deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 36%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0 36%, transparent 72%);
}
/* CMY ink bar on the top edge — the hero's floating swatch, moved here so it
   clears the "Mặc định" chip that already occupies the top-right corner */
.ka-scope .ka-address-card.is-default::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 86px;
  height: 5px;
  border-radius: 0 0 999px 0;
  background: linear-gradient(
    90deg,
    var(--ka-cyan) 0 33.33%,
    var(--ka-magenta) 33.33% 66.66%,
    var(--ka-yellow) 66.66%
  );
  content: "";
  pointer-events: none;
}
/* keep the card's own content above the decoration */
.ka-scope .ka-address-card.is-default > * {
  position: relative;
  z-index: 1;
}
/* the details panel turns translucent so the paper tint reads through it
   instead of covering the middle of the card with a flat block */
.ka-scope .ka-address-card.is-default .account-address-card-details {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.6);
}
/* The tinted paper is darker than the plain white card, which drops the small
   uppercase labels from ~4.6:1 to ~3.9:1. One step darker puts them back over
   AA without changing the look of the rest of the list. */
.ka-scope .ka-address-card.is-default .account-address-card-identity small,
.ka-scope .ka-address-card.is-default .account-address-detail-row small {
  color: var(--ka-muted);
}
@media (hover: hover) and (pointer: fine){
.ka-scope .ka-address-card:hover {
    border-color: var(--ka-line-strong);
    box-shadow: var(--ka-shadow-md);
    transform: translateY(-2px);
  }
}
/* --- reorder animation (see playAddressCardReorder in app.js) ------------- */

/* While a card is sliding, its own hover transform must not fight the
   animation's transform, and it needs to sit above the cards it passes. */
.ka-scope .ka-address-card.is-reordering,
.ka-scope .ka-address-card.is-reordering-lead {
  position: relative;
  pointer-events: none;
  will-change: transform;
}
.ka-scope .ka-address-card.is-reordering {
  z-index: 1;
}
/* the promoted card travels over the others */
.ka-scope .ka-address-card.is-reordering-lead {
  z-index: 2;
  box-shadow: var(--ka-shadow-lg);
}
/* brief teal wash so it is obvious which card was just promoted */
.ka-scope .ka-address-card.is-promoted {
  animation: kaAddressPromoted 1200ms var(--ka-ease) both;
}
@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);
  }
}
/* the "Mặc định" chip fades in with the card rather than popping */
.ka-scope .ka-address-card.is-promoted .account-address-default-badge {
  animation: kaDefaultBadgeIn 420ms 120ms var(--ka-ease) both;
}
@keyframes kaDefaultBadgeIn {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}
.ka-scope .account-address-card-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
}
.ka-scope .account-address-card-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ka-scope .account-address-card-identity small {
  color: var(--ka-muted-soft);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ka-scope .account-address-card-identity strong {
  overflow: hidden;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: -0.028em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ka-scope .account-address-card-details {
  display: grid;
  gap: 11px;
  padding: 14px;
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}
.ka-scope .account-address-detail-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 0;
}
.ka-scope .account-address-detail-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 0;
  border-radius: 0;
  color: var(--ka-teal);
  background: transparent;
}
.ka-scope .account-address-detail-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}
.ka-scope .account-address-detail-row small {
  display: block;
  margin-bottom: 2px;
  color: var(--ka-muted-soft);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ka-scope .account-address-detail-row strong,
.ka-scope .account-address-detail-row address {
  color: var(--ka-ink);
  font-size: 0.77rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}
/* This row used to be two text pills plus the delete square — ~299px against a
   ~292px card around a 1000px viewport, which is why the delete icon kept
   dropping to a second line and needed a container query to shrink everything.
   All three are 40px squares now: 3x40 + 2x8 = 136px, so the row cannot outgrow
   even the narrowest card and the whole cqw scaling apparatus is gone with it.
   Edit and promote cluster at the left; destroy is pushed to the far right so a
   mis-aimed click lands on nothing. */
.ka-scope .account-address-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0;
  border: 0;
}
.ka-scope .account-address-actions .ka-icon-btn-danger {
  margin-left: auto;
}
/* the address workspace wrapper is a plain container — the cards are the
   surfaces, so it must not draw a second card around them */
.ka-scope .account-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-margin-top: calc(var(--header-h) + 14px);
}
.ka-scope .account-address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
/* ==========================================================================
   12. Modal (address editor) + confirm dialog
   ========================================================================== */

.ka-scope .account-address-modal-backdrop {
  background: rgba(10, 28, 33, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ka-scope .ka-modal {
  display: grid;
  gap: 17px;
  padding: 24px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-lg);
  animation: kaModalIn 260ms var(--ka-ease) both;
}
@keyframes kaModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}
.ka-scope .ka-modal-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 0 0 3px;
  border: 0;
}
.ka-scope .ka-modal-head .account-address-form-copy .ka-eyebrow {
  color: var(--ka-teal-dark);
}
.ka-scope .account-address-default-copy strong {
  color: var(--ka-ink);
  font-size: 0.76rem;
  font-weight: 850;
}
.ka-scope .account-address-default-copy small {
  color: var(--ka-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}
.ka-scope .account-address-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ka-scope .account-address-field.is-wide {
  grid-column: 1 / -1;
}
/* ==========================================================================
   13. Orders — list, detail, actions
   ========================================================================== */

/* Always a single column. styles.css puts `.gallery-grid, .feedback-list,
   .orders-list` on two columns inside its 920px media query and only undoes it
   at 640px, which made the account order list jump back to two columns between
   920px and 641px. Declaring the columns here (higher specificity, later file)
   settles it at every width. */
.ka-scope .orders-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.ka-scope .order-list-item {
  border: 0;
  background: transparent;
}
.ka-scope .order-list-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto 26px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-ink);
  background: var(--ka-paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    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);
}
@media (hover: hover) and (pointer: fine){
.ka-scope .order-list-row:hover {
    border-color: rgba(11, 141, 130, 0.34);
    background: var(--ka-paper-soft);
    box-shadow: var(--ka-shadow-sm);
    transform: translateX(3px);
  }
}
.ka-scope .order-list-row:focus-visible {
  outline: none;
  border-color: var(--ka-teal);
  box-shadow: var(--ka-focus);
}
.ka-scope .order-list-thumb {
  width: 62px;
  height: 62px;
  border-radius: 12px 12px 12px 4px;
  overflow: hidden;
  background: var(--ka-paper-sunk);
}
.ka-scope .order-list-summary {
  display: grid;
  gap: 7px;
  justify-items: start;
  min-width: 0;
}
.ka-scope .order-list-summary > span:not(.ka-status) {
  overflow: hidden;
  color: var(--ka-muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ka-scope .order-list-summary > span:not(.ka-status) strong {
  color: var(--ka-ink);
  font-weight: 900;
}
.ka-scope .order-list-date {
  display: grid;
  gap: 2px;
  text-align: right;
}
.ka-scope .order-list-date small {
  color: var(--ka-muted-soft);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ka-scope .order-list-date strong {
  color: var(--ka-ink);
  font-size: 0.74rem;
  font-weight: 800;
}
.ka-scope .order-list-chevron {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  color: var(--ka-muted-soft);
  background: transparent;
  transition:
    color var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}
.ka-scope .order-list-chevron::before {
  content: none;
}
.ka-scope .order-list-chevron svg.ka-icon {
  width: 18px;
  height: 18px;
}
.ka-scope .order-list-row:hover .order-list-chevron,
.ka-scope .order-list-row:focus-visible .order-list-chevron {
  color: var(--ka-teal);
  transform: translateX(3px);
}
/* --- detail ------------------------------------------------------------- */
.ka-scope .order-detail-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ka-scope .order-detail-heading-copy {
  display: grid;
  flex: 1 1 560px;
  gap: 9px;
  min-width: 0;
}
.ka-scope .order-detail-heading-meta {
  width: 100%;
}
.ka-scope .order-detail-heading h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.036em;
  line-height: 1.1;
}
.ka-scope .order-detail-heading h3 strong {
  font-weight: 900;
}
.ka-scope .order-detail-section {
  padding: 17px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}
.ka-scope .order-detail-section h4 {
  margin: 0 0 11px;
  color: var(--ka-teal-dark);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ka-scope .order-detail-section dt {
  color: var(--ka-muted);
  font-size: 0.66rem;
  font-weight: 800;
}
.ka-scope .order-detail-section dd {
  color: var(--ka-ink);
  font-size: 0.75rem;
  font-weight: 750;
}
.ka-scope .order-detail-image {
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  overflow: hidden;
}
/* --- order action buttons ---------------------------------------------- */
.ka-scope .order-detail-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 17px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-lg) var(--ka-cut);
  background: var(--ka-paper-soft);
}
.ka-scope .order-detail-actions-copy strong {
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: -0.024em;
}
.ka-scope .order-detail-actions-copy small {
  color: var(--ka-muted);
  font-size: 0.69rem;
  line-height: 1.55;
}
.ka-scope .order-detail-action-buttons {
  display: flex;
  gap: 9px;
  align-items: stretch;
  flex-wrap: wrap;
}
.ka-scope .order-action-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 9px 17px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-ink);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  font: inherit;
  text-align: left;
  text-decoration: none;
  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 .order-action-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px 11px 11px 4px;
  color: var(--ka-teal);
  background: #eef7f6;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}
.ka-scope .order-action-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}
.ka-scope .order-action-button > span:last-child {
  display: grid;
  gap: 1px;
}
.ka-scope .order-action-button strong {
  color: inherit;
  font-size: 0.74rem;
  font-weight: 850;
}
.ka-scope .order-action-button small {
  color: var(--ka-muted);
  font-size: 0.62rem;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine){
.ka-scope .order-action-button:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.4);
    box-shadow: var(--ka-shadow-md);
    transform: translateY(-2px);
  }
}
.ka-scope .order-action-button:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
.ka-scope .order-action-button.is-primary {
  border-color: transparent;
  color: #ffffff;
  background: var(--ka-deep);
  box-shadow: 0 12px 26px rgba(16, 40, 47, 0.2);
}
.ka-scope .order-action-button.is-primary .order-action-icon {
  color: var(--ka-yellow);
  background: rgba(255, 255, 255, 0.1);
}
.ka-scope .order-action-button.is-primary small {
  color: rgba(255, 255, 255, 0.62);
}
@media (hover: hover) and (pointer: fine){
.ka-scope .order-action-button.is-primary:not(:disabled):hover {
    background: var(--ka-teal);
  }
}
.ka-scope .order-action-button.is-danger {
  border-color: rgba(201, 56, 79, 0.22);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
  box-shadow: none;
}
.ka-scope .order-action-button.is-danger .order-action-icon {
  color: var(--ka-danger);
  background: rgba(201, 56, 79, 0.1);
}
.ka-scope .order-action-button.is-danger strong,
.ka-scope .order-action-button.is-danger small {
  color: #a32e42;
}
@media (hover: hover) and (pointer: fine){
.ka-scope .order-action-button.is-danger:not(:disabled):hover {
    border-color: transparent;
    color: #ffffff;
    background: var(--ka-danger);
  }
.ka-scope .order-action-button.is-danger:not(:disabled):hover .order-action-icon,
  .ka-scope .order-action-button.is-danger:not(:disabled):hover strong,
  .ka-scope .order-action-button.is-danger:not(:disabled):hover small {
    color: #ffffff;
  }
.ka-scope .order-action-button.is-danger:not(:disabled):hover .order-action-icon {
    background: rgba(255, 255, 255, 0.12);
  }
}
.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible {
  border-color: transparent;
  color: #ffffff;
  background: var(--ka-danger);
}
.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible .order-action-icon,
.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible strong,
.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible small {
  color: #ffffff;
}
.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible .order-action-icon {
  background: rgba(255, 255, 255, 0.12);
}
.ka-scope .order-action-button: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 .order-action-button:disabled .order-action-icon {
  color: var(--ka-muted-soft);
  background: #e6eded;
}
/* --- pagination --------------------------------------------------------- */
.ka-scope .account-order-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ka-line);
}
.ka-scope .account-section-pagination {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ka-line);
}
.ka-scope .account-section-pagination .account-page-summary {
  margin: 0;
  color: var(--ka-muted);
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.45;
}
.ka-scope .account-section-pagination .account-order-pagination {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  border-top: 0;
  flex-wrap: nowrap;
}
.ka-scope .account-section-pagination .account-order-page-numbers {
  min-width: 0;
  justify-content: center;
}
@media (max-width: 620px){
.ka-scope .account-section-pagination .account-order-page-nav span:not([aria-hidden]) {
    display: none;
  }
.ka-scope .account-section-pagination .account-order-page-nav {
    min-width: 40px;
    padding-inline: 11px;
  }
}
.ka-scope .account-order-page-nav {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--ka-line);
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  box-shadow: none;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    border-color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}
.ka-scope .account-order-page-nav svg.ka-icon {
  width: 15px;
  height: 15px;
}
.ka-scope .account-order-page-numbers {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ka-scope .account-order-page-number {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ka-muted);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}
.ka-scope .account-order-page-ellipsis {
  padding: 0 3px;
  color: var(--ka-muted-soft);
  font-weight: 900;
}
@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-nav:focus-visible,
.ka-scope .account-order-page-number:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
.ka-scope .account-order-page-number.is-active {
  border-color: transparent;
  color: #ffffff;
  background: var(--ka-deep);
}
.ka-scope .account-order-page-nav:disabled {
  border-color: var(--ka-line);
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  cursor: not-allowed;
  opacity: 1;
}
/* The filter button itself keeps its original styling from styles.css —
   deliberately not restyled here. Only the toolbar row is arranged: launcher
   pinned left, count annotation right. styles.css pushes the launcher to the
   right inside the account panels, so that has to be undone. */
.ka-scope .account-order-filter-toolbar {
  margin-bottom: 14px;
}
.ka-scope .account-orders-content > .account-order-filter-toolbar,
.ka-scope .account-feedback-content > .feedback-filter-toolbar {
  display: flex;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ka-scope .account-orders-content > .account-order-filter-toolbar .account-order-filter-launcher,
.ka-scope .account-feedback-content > .feedback-filter-toolbar .account-order-filter-launcher {
  justify-items: start;
  min-width: 0;
}
.ka-scope .ka-toolbar-count {
  margin-left: auto;
  flex: none;
}
/* ==========================================================================
   14. Feedback section
   ========================================================================== */

.ka-scope .account-feedback-composer {
  display: grid;
  gap: 15px;
}
.ka-scope .account-feedback-composer > header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ka-line);
}
.ka-scope .account-feedback-composer > header > div {
  display: grid;
  gap: 8px;
}
.ka-scope .account-feedback-composer h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.032em;
}
.ka-scope .account-feedback-composer header p:last-child {
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.72rem;
  line-height: 1.55;
}
.ka-scope .account-feedback-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 11px;
}
.ka-scope .account-feedback-product {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  background: var(--ka-paper);
  cursor: pointer;
  transition:
    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);
}
@media (hover: hover) and (pointer: fine){
.ka-scope .account-feedback-product:hover {
    border-color: rgba(11, 141, 130, 0.36);
    box-shadow: var(--ka-shadow-md);
    transform: translateY(-2px);
  }
}
.ka-scope .account-feedback-product:focus-visible {
  outline: none;
  border-color: var(--ka-teal);
  box-shadow: var(--ka-focus);
}
.ka-scope .account-feedback-product-image {
  width: 54px;
  height: 54px;
  border-radius: 11px 11px 11px 4px;
  overflow: hidden;
}
.ka-scope .account-feedback-product-action {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ka-warning);
  background: #fdf4dd;
  font-size: 0.66rem;
  font-weight: 900;
}
.ka-scope .account-feedback-product-action svg.ka-icon {
  width: 14px;
  height: 14px;
}
/* ==========================================================================
   15. Danger zone
   ========================================================================== */

.ka-scope .ka-danger-zone {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: start;
  padding: 24px;
  border: 1px solid rgba(201, 56, 79, 0.2);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background:
    radial-gradient(circle at 0 0, rgba(201, 56, 79, 0.05), transparent 42%),
    var(--ka-paper);
  box-shadow: none;
}
.ka-scope .ka-danger-copy {
  display: grid;
  gap: 9px;
}
.ka-scope .ka-danger-copy h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: -0.034em;
}
.ka-scope .ka-danger-copy p:last-child {
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.73rem;
  line-height: 1.62;
}
/* ==========================================================================
   16. Login gate (signed-out state)
   ========================================================================== */

.ka-scope .ka-gate {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 420px;
  padding: 56px 24px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background:
    radial-gradient(circle at 50% 0, rgba(53, 185, 199, 0.08), transparent 44%),
    var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  place-content: center;
  text-align: center;
}
/* Registration mark instead of the old "ID" glyph */
.ka-scope .ka-gate-mark {
  position: relative;
  width: 66px;
  height: 66px;
  margin-bottom: 10px;
  border: 1px solid rgba(11, 141, 130, 0.35);
  border-radius: 50%;
  background:
    linear-gradient(rgba(11, 141, 130, 0.35), rgba(11, 141, 130, 0.35)) center / 100% 1px no-repeat,
    linear-gradient(rgba(11, 141, 130, 0.35), rgba(11, 141, 130, 0.35)) center / 1px 100% no-repeat;
}
.ka-scope .ka-gate-mark i,
.ka-scope .ka-gate-mark b {
  position: absolute;
  border-radius: 50%;
}
.ka-scope .ka-gate-mark i {
  inset: 15px;
  border: 1px solid rgba(236, 99, 134, 0.5);
}
.ka-scope .ka-gate-mark b {
  inset: 28px;
  background: var(--ka-yellow);
}
.ka-scope .ka-gate h2 {
  margin: 6px 0 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -0.044em;
  line-height: 1.06;
}
.ka-scope .ka-gate > p:not(.ka-eyebrow) {
  max-width: 48ch;
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.8rem;
  line-height: 1.68;
}
.ka-scope .ka-gate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}
/* ==========================================================================
   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 {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
#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);
}
/* ==========================================================================
   18. Order delete confirm dialog (lives outside .ka-scope)
   ========================================================================== */

body[data-page="account"] .order-delete-modal {
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  box-shadow: var(--ka-shadow-lg);
}
/* The close button is left entirely to the site-wide .modal-close system in
   styles.css — same size, fill, X and hover as every other close on the site. */

body[data-page="account"] .order-delete-modal .order-delete-modal-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(201, 56, 79, 0.22);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}
body[data-page="account"] .order-delete-modal .order-delete-modal-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}
body[data-page="account"] .order-delete-modal-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
}
body[data-page="account"] .order-delete-modal-actions > button {
  min-height: 46px;
}
/* ==========================================================================
   18b. ConfirmDialog — shared destructive confirmation
   ========================================================================== */

body.ka-confirm-open {
  overflow: hidden;
}
.ka-confirm-backdrop {
  position: fixed;
  z-index: 2400;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(10, 28, 33, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: kaFade 180ms ease both;
}
@keyframes kaFade {
  from { opacity: 0; }
}
.ka-confirm {
  --ka-ink: #142d35;
  --ka-deep: #10282f;
  --ka-muted: #52686f;
  --ka-muted-soft: #5f767d;
  --ka-teal: #0b8d82;
  --ka-teal-dark: #076c63;
  --ka-yellow: #f6c852;
  --ka-paper: #ffffff;
  --ka-paper-sunk: #eff5f5;
  --ka-line: #e2ecec;
  --ka-danger: #c9384f;
  --ka-danger-soft: #fbeef0;
  --ka-cut: 6px;
  --ka-r-md: 14px;
  --ka-r-xl: 26px;
  --ka-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ka-fast: 140ms;
  --ka-base: 200ms;
  --ka-shadow-sm: 0 6px 16px rgba(16, 40, 47, 0.06);
  --ka-shadow-lg: 0 28px 62px rgba(16, 40, 47, 0.16);
  --ka-focus: 0 0 0 3px rgba(53, 185, 199, 0.42);

  position: relative;
  display: grid;
  gap: 9px;
  justify-items: center;
  width: min(430px, 100%);
  padding: 30px 26px 24px;
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  color: var(--ka-ink);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-lg);
  text-align: center;
  animation: kaModalIn 240ms var(--ka-ease) both;
}
/* Placement only. Everything visual — size, border, fill, the X itself and the
   hover — comes from the shared close-button system in styles.css, which this
   button opts into via .ka-close. Declaring any of it again here would either
   lose to that rule's (1,3,1) specificity or, worse, win in one property and
   quietly drift from the rest of the site's close buttons. */
.ka-confirm .ka-confirm-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
.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 {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 5px;
  border: 1px solid rgba(201, 56, 79, 0.22);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}
.ka-confirm .ka-confirm-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}
.ka-confirm .ka-eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  color: var(--ka-teal-dark);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.ka-confirm .ka-eyebrow.is-danger {
  color: var(--ka-danger);
}
.ka-confirm .ka-eyebrow-rule {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.ka-confirm h2 {
  margin: 2px 0 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.14;
}
.ka-confirm > p:not(.ka-eyebrow) {
  max-width: 40ch;
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.78rem;
  line-height: 1.62;
}
.ka-confirm .ka-confirm-note {
  margin-top: 4px;
  padding: 9px 14px;
  border: 1px dashed rgba(201, 56, 79, 0.3);
  border-radius: 999px;
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
  font-size: 0.68rem;
  font-weight: 850;
}
.ka-confirm .ka-confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  width: 100%;
  margin-top: 15px;
}
.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-ghost {
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
}
.ka-confirm .ka-btn-danger {
  color: #ffffff;
  background: var(--ka-danger);
  box-shadow: 0 12px 26px rgba(201, 56, 79, 0.22);
}
.ka-confirm .ka-btn-primary {
  color: #ffffff;
  background: var(--ka-deep);
  box-shadow: 0 12px 26px rgba(16, 40, 47, 0.22);
}
.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-ghost:hover {
    color: var(--ka-ink);
    background: #e2eded;
  }
.ka-confirm .ka-btn-danger:hover {
    background: #b02c42;
  }
.ka-confirm .ka-btn-primary:hover {
    background: var(--ka-teal);
  }
}
.ka-confirm .ka-btn:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}
@media (max-width: 460px){
.ka-confirm {
    padding: 26px 18px 20px;
  }
.ka-confirm .ka-confirm-actions {
    grid-template-columns: minmax(0, 1fr);
  }
.ka-confirm .ka-confirm-actions .ka-btn-ghost {
    order: 2;
  }
}
@media (prefers-reduced-motion: reduce){
.ka-confirm-backdrop,
  .ka-confirm,
  .ka-confirm * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
.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: 950px){
.ka-scope .ka-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
.ka-scope .ka-nav-trigger {
    display: grid;
  }
/* sidebar becomes an anchored sheet */
  .ka-scope .ka-sidebar {
    position: fixed;
    z-index: 1600;
    top: calc(var(--header-h) + 10px);
    left: 50%;
    width: min(calc(100vw - 20px), 430px);
    max-height: calc(100svh - var(--header-h) - 26px);
    padding: 13px;
    overflow: auto;
    visibility: hidden;
    border: 1px solid var(--ka-line);
    border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
    background: var(--ka-paper);
    box-shadow: var(--ka-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px) scale(0.98);
    transition:
      visibility 0s linear 240ms,
      opacity 180ms ease,
      transform 260ms var(--ka-ease);
  }
.ka-scope .ka-sidebar.is-mobile-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
  }
.ka-scope .ka-drawer {
    display: block;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
.ka-scope .ka-drawer-inner {
    min-height: 0;
    overflow: visible;
  }
.ka-scope .ka-drawer-head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 4px;
  }
.ka-scope .ka-drawer-head-title {
    color: var(--ka-muted-soft);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
.ka-scope .ka-nav {
    border: 0;
    padding: 0;
    box-shadow: none;
  }
.ka-scope .ka-nav-copy small {
    display: block;
  }
.ka-scope .ka-nav-item {
    min-height: 54px;
  }
.ka-scope .ka-settings-grid,
  .ka-scope .ka-danger-zone {
    grid-template-columns: minmax(0, 1fr);
  }
.ka-scope .account-email-preference-card {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px){
/* actions drop to a full-width row of their own — the title keeps the whole
     line so it stops competing with the count pill and the primary button */
  .ka-scope .ka-workspace-head {
    grid-template-areas:
      "eyebrow trigger"
      "title   title"
      "actions actions";
    gap: 10px 14px;
  }
.ka-scope .ka-workspace-actions {
    justify-content: space-between;
  }
.ka-scope .ka-workspace-actions .ka-search {
    flex: 1 1 220px;
  }
}
@media (max-width: 780px){
.ka-scope .account-address-list {
    grid-template-columns: minmax(0, 1fr);
  }
.ka-scope .account-address-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
.ka-scope .order-detail-actions {
    align-items: stretch;
  }
.ka-scope .order-detail-action-buttons {
    width: 100%;
  }
.ka-scope .order-action-button {
    flex: 1 1 210px;
  }
}
@media (max-width: 640px){
.account-page {
    padding-top: 20px;
    padding-bottom: 72px;
  }
.ka-scope .ka-panel,
  .ka-scope .ka-card,
  .ka-scope .ka-danger-zone,
  .ka-scope .account-orders-content,
  .ka-scope .account-order-detail-content {
    padding: 16px;
  }
.ka-scope .ka-workspace-head {
    padding-right: 2px;
    padding-left: 2px;
  }
.ka-scope .ka-workspace-actions {
    gap: 8px;
  }
.ka-scope .order-list-row {
    grid-template-columns: 52px minmax(0, 1fr) 22px;
    gap: 11px;
  }
.ka-scope .order-list-thumb {
    width: 52px;
    height: 52px;
  }
.ka-scope .order-list-date {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
.ka-scope .order-list-summary {
    grid-column: 2;
  }
.ka-scope .order-list-chevron {
    grid-column: 3;
    grid-row: 1 / -1;
  }
.ka-scope .ka-form-actions,
  .ka-scope .ka-form-actions.is-single,
  body[data-page="account"] .order-delete-modal-actions {
    grid-template-columns: minmax(0, 1fr);
  }
.ka-scope .ka-form-actions .ka-btn:first-child {
    order: 2;
  }
.ka-scope .ka-search {
    width: 100%;
    min-width: 0;
  }
.ka-scope .ka-modal {
    padding: 18px;
  }
.ka-scope .account-feedback-product-list {
    grid-template-columns: minmax(0, 1fr);
  }
/* every tap target stays comfortable */
  .ka-scope .ka-icon-btn,
  .ka-scope .ka-nav-trigger {
    width: 44px;
    height: 44px;
  }
.ka-scope .ka-segmented button {
    width: 40px;
    height: 38px;
  }
}
@media (max-width: 420px){
.ka-scope .ka-workspace-actions .ka-btn {
    flex: 1 1 100%;
  }
/* Phần Địa chỉ giao hàng là ngoại lệ: nút và dòng đếm ở cùng một hàng, nút chỉ
     rộng bằng nội dung của nó.

     Hàng này chỉ có hai phần tử và cả hai đều ngắn, nên không cần cả một dòng
     riêng cho nút như các phần khác — nơi ô tìm kiếm đứng cạnh mới thật sự chật.

     `flex: 0 1 auto` chứ không phải `0 0 auto`: ở khổ hẹp nhất, nút vẫn phải co
     được thì mới đứng cùng hàng, còn khi đủ chỗ thì nó giữ đúng bề rộng nội
     dung. `nowrap` để chốt hẳn việc cùng hàng, `min-width: 0` cho phép co. */
  .ka-scope .account-address-workspace-heading .ka-workspace-actions {
    flex-wrap: nowrap;
  }
.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;
  }
}
/* ==========================================================================
   21. Quality warning — opens inside the crop panel
   --------------------------------------------------------------------------
   The warning that stops an order when the chosen photo is too small for the
   print size. It used to be a plain white box with two grey buttons and a solid
   red "ignore" bar — the red read as an error the customer had caused, when the
   message is really a caution about a choice they are still free to make.

   So it is rebuilt on the same parts as the rest of the flow: the auth modal's
   28px card, the header's mint pill for the safe action, a paper outline beside
   it, and KROMADE yellow — the palette's caution colour — carrying the warning
   mark. Ignoring stays possible but goes tonal red, loud enough to hesitate at
   and quiet enough not to shout.

   It is also no longer a dialog floating over the page: it takes over the crop
   panel it is talking about, and the panel's own contents step aside while it
   is up. That keeps the message next to the thing it concerns, and it drops the
   page-wide scroll lock that a dialog brought with it.

   Both halves stay in the layout the whole time — the contents only fade and
   lose visibility — so the panel never changes height and nothing below it
   jumps while the two swap.
   ========================================================================== */

.preview-panel {
  position: relative;
}
.preview-panel > *:not(.quality-inline) {
  transition:
    opacity 200ms var(--ka-ease, ease),
    transform 200ms var(--ka-ease, ease),
    visibility 0s linear 200ms;
}
.preview-panel.has-quality-warning > *:not(.quality-inline) {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
  transition:
    opacity 160ms var(--ka-ease, ease),
    transform 160ms var(--ka-ease, ease),
    visibility 0s;
}
.quality-inline {
  --quality-status-color: #8a6410;
  --quality-status-border: rgba(184, 134, 11, 0.3);
  --quality-status-background: rgba(246, 200, 82, 0.16);
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 22px);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition:
    opacity 220ms var(--ka-ease, ease),
    visibility 0s linear 220ms;
}
.quality-inline[data-quality-level="low"] {
  --quality-status-color: #b8324a;
  --quality-status-border: rgba(201, 56, 79, 0.3);
  --quality-status-background: rgba(201, 56, 79, 0.1);
}
.preview-panel.has-quality-warning > .quality-inline {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 220ms var(--ka-ease, ease),
    visibility 0s;
}
/* The card arrives a beat after the wash, rising a few pixels as it lands —
   enough to read as "this opened", not enough to bounce. */
.quality-inline .quality-card {
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition:
    opacity 240ms var(--ka-ease, ease) 40ms,
    transform 240ms var(--ka-ease, ease) 40ms;
}
.preview-panel.has-quality-warning .quality-card {
  transform: none;
  opacity: 1;
}
/* 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 {
  gap: 16px;
  width: min(460px, 100%);
  padding: 26px 24px 24px;
  border: 1px solid rgba(175, 217, 213, 0.72);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
    0 24px 60px rgba(15, 64, 70, 0.18),
    0 8px 20px rgba(21, 81, 84, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.quality-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 34px;
}
/* Biểu tượng và eyebrow lấy cùng màu từ mức đang cảnh báo. */
.quality-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--quality-status-border);
  border-radius: var(--ka-notch-lg);
  color: var(--quality-status-color);
  background: var(--quality-status-background);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.quality-mark svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quality-card .eyebrow {
  margin: 0 0 3px;
  color: var(--quality-status-color);
  font-size: 0.64rem;
  letter-spacing: 0.095em;
}
.quality-card h2 {
  margin: 0;
  color: #17262e;
  font-family: var(--font-brand);
  font-size: clamp(1.3rem, 3vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.14;
}
.quality-card > p {
  margin: 0;
  color: #52686f;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.62;
}
/* Hai thông tin quyết định được xếp theo chiều đọc. Badge mức chất lượng luôn
   ôm đúng nội dung để không biến thành một thanh ngang ở viewport hẹp. */
.quality-stats {
  gap: 0;
  padding: 6px 14px 12px;
  border-color: #e2ecec;
  border-radius: var(--ka-notch);
  background: #f7fbfa;
}
.quality-stat-row {
  display: grid;
  gap: 5px;
  padding: 11px 0;
}
.quality-stat-row + .quality-stat-row {
  border-top: 1px solid rgba(226, 236, 236, 0.9);
}
.quality-stats small {
  color: #6d838a;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.quality-stats strong {
  color: #142d35;
  font-size: 0.85rem;
  font-weight: 850;
}
.quality-level-row strong {
  display: flex;
}
/* The recommendation rides along with the estimate it is judging */
.quality-stats strong b {
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(53, 185, 199, 0.22);
  border-radius: 999px;
  color: #08776e;
  background: rgba(53, 185, 199, 0.14);
  font-size: 0.66rem;
  font-weight: 850;
  white-space: nowrap;
}
.quality-ai-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 12px 2px 0;
  border-top: 1px solid rgba(226, 236, 236, 0.9);
  color: #52686f;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.45;
}
.quality-ai-note-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(128, 105, 215, 0.18);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(53, 185, 199, 0.18), rgba(236, 99, 134, 0.15) 55%, rgba(246, 200, 82, 0.24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1;
}
.quality-actions {
  gap: 9px;
  margin-top: 2px;
}
.quality-action {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  line-height: 1.15;
  cursor: pointer;
  transition:
    color 180ms var(--ka-ease, ease),
    border-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);
}
.quality-action-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.quality-action-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* replacing the photo is the way out of this dialog, so it wears the mint */
.quality-action-primary {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
}
.quality-action-primary .quality-action-icon {
  color: #f6c852;
}
/* Dùng cùng bảng màu với lựa chọn mua không cần tài khoản để hành động tiếp tục
   có một ngôn ngữ thị giác thống nhất ở cả hai điểm quyết định. */
.quality-action-ignore {
  min-height: 46px;
  border-color: #e9bd57;
  color: #694817;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(145deg, #fffaf0, #ffedbd);
  box-shadow:
    0 12px 25px rgba(185, 126, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
}
@media (hover: hover) and (pointer: fine){
.quality-action-primary:hover,
  .quality-action-primary:focus-visible {
    background: #35a89d;
    box-shadow: 0 16px 32px rgba(53, 168, 157, 0.3);
    outline: none;
    transform: translateY(-2px);
  }
.quality-action-ignore:hover,
  .quality-action-ignore:focus-visible {
    border-color: #dca62f;
    color: #563806;
    background:
      radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.88), transparent 42%),
      linear-gradient(145deg, #fff8e7, #ffe29a);
    box-shadow:
      0 16px 29px rgba(185, 126, 20, 0.23),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    outline: none;
    transform: translateY(-2px);
  }
}
.quality-action:active {
  transform: translateY(0) scale(0.985);
}
@media (max-width: 560px){
.quality-card {
    padding: 22px 18px 20px;
  }
.quality-card-head {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }
.quality-mark {
    width: 46px;
    height: 46px;
  }
/* Hai nút vẫn giữ một hàng ở khổ điện thoại — chúng là hai câu trả lời cho
     cùng một câu hỏi. Chỗ bù lại lấy từ đệm hai bên và từ khe giữa icon với
     chữ, chứ không xếp chồng. */
  .quality-actions {
    gap: 7px;
  }
.quality-action {
    gap: 6px;
    padding-inline: 10px;
    font-size: 0.7rem;
  }
.quality-action-ignore {
    font-size: 0.68rem;
  }
}
@media (prefers-reduced-motion: reduce){
.quality-action {
    transition: none;
  }
}
/* ==========================================================================
   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;
  }
}
.source-row > .sample-more-link {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
}
/* The direct child is .sample-suggestions; .sample-strip lives one level inside
   it. This selector used to name .sample-strip, so it matched nothing and the
   suggestion strip lost the rule that spans it across the whole row. */
.source-row > .sample-suggestions {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}
@media (max-width: 640px){
.source-row > .upload-zone,
  .source-row > .sample-more-link {
    width: auto;
  }
}
.source-row > .upload-zone,
.source-row > .sample-more-link {
  min-height: clamp(34px, 15cqi, 58px);
  gap: clamp(3px, 2.6cqi, 9px);
  padding: clamp(4px, 2.4cqi, 9px) clamp(5px, 3cqi, 11px);
}
.source-row > .sample-more-link {
  grid-template-columns: clamp(17px, 10cqi, 36px) minmax(0, 1fr);
}
/* --------------------------------------------------------------------------
   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ức đánh giá chất lượng in trong hộp cảnh báo.

   Độ nét bên dưới nói bao nhiêu điểm ảnh trên mỗi centimet; dòng này nói con số
   đó nghĩa là gì. Nó đứng đầu bảng và mang màu riêng theo mức. */

.quality-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  min-height: 27px;
  padding: 3px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.quality-level-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
/* Xuất sắc và Tốt cùng là màu xanh vì cùng là "in được"; mức trên đậm hơn để
   hai bậc vẫn phân biệt được khi đứng cạnh nhau. */
.quality-level-row.is-excellent .quality-level-badge {
  border-color: rgba(11, 110, 82, 0.34);
  color: #0b6e52;
  background: rgba(28, 176, 132, 0.18);
}
.quality-level-row.is-good .quality-level-badge {
  border-color: rgba(19, 141, 106, 0.26);
  color: #17805f;
  background: rgba(28, 176, 132, 0.1);
}
.quality-level-row.is-medium .quality-level-badge {
  border-color: rgba(184, 134, 11, 0.3);
  color: #8a6410;
  background: rgba(246, 200, 82, 0.2);
}
.quality-level-row.is-low .quality-level-badge {
  border-color: rgba(201, 56, 79, 0.28);
  color: #b8324a;
  background: rgba(201, 56, 79, 0.1);
}
/* Ô 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;
  }
}
.ka-scope .account-email-options { display: grid; gap: 12px; min-width: 0; }