: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 {
  width: 100%;
  height: 100%;
}

.brand-logo-image {
  width: 100%;
  height: 56px;
  border-radius: var(--radius);
  object-fit: contain;
  object-position: center;
}

.brand-name {
  font-family: var(--font-brand);
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--ink);
}

.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;
}

html.admin-auth-pending body {
  visibility: hidden;
}

.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;
}

.upload-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: #edf7f5;
  color: var(--teal-dark);
}

.upload-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.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%;
  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-lead {
  max-width: 720px;
  margin: -5px 0 16px;
  color: var(--muted);
  line-height: 1.65;
}

.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;
}

.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;
}

/* Đứ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"],
  .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 {
    width: var(--info-img-width, 100%);
    max-width: var(--info-img-max, 180px);
  }
}

.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;
}

.product-process-card {
  grid-column: 1 / -1;
}

.product-process-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: product-process;
}

.product-process-list li {
  position: relative;
  min-height: 28px;
  padding-left: 32px;
  color: var(--muted);
  line-height: 1.55;
  counter-increment: product-process;
}

.product-process-list li::before {
  content: counter(product-process);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #fff;
  background: #426f3b;
  font-size: 0.72rem;
  font-weight: 800;
}

.payment-form select {
  width: 100%;
}

.admin-order-page {
  min-height: 100vh;
  background: var(--paper-soft);
}

.admin-order-app {
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 60px;
}

.admin-order-toolbar,
.admin-order-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.admin-order-list {
  display: grid;
  gap: 14px;
}

/* Admin master-detail: the landing view is intentionally dense; the existing
   full editors are mounted only for the selected record in the left pane. */
.admin-record-list {
  display: grid;
  gap: 8px;
}

.admin-record-row {
  --admin-record-bg: var(--paper);
  --admin-record-hover-bg: #f4fbf9;
  --admin-record-accent: transparent;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 18px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--admin-record-bg);
  box-shadow: inset 4px 0 var(--admin-record-accent), 0 5px 16px rgba(30, 65, 70, 0.045);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.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-new,
.admin-support-row.is-new {
  --admin-record-bg: #fffaf0;
  --admin-record-hover-bg: #fff5dc;
  --admin-record-accent: #d5a033;
}

.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-bug-row.is-low {
  --admin-record-bg: #f2f7f8;
  --admin-record-hover-bg: #e7f1f2;
  --admin-record-accent: #6d8990;
}

.admin-bug-row.is-normal {
  --admin-record-bg: #fffaf0;
  --admin-record-hover-bg: #fff4d9;
  --admin-record-accent: #bd9132;
}

.admin-bug-row.is-high {
  --admin-record-bg: #fff6ed;
  --admin-record-hover-bg: #ffead7;
  --admin-record-accent: #d17234;
}

.admin-bug-row.is-critical {
  --admin-record-bg: #fff2f3;
  --admin-record-hover-bg: #ffe3e6;
  --admin-record-accent: #c33f4b;
}

.admin-record-row:focus-visible {
  outline: 3px solid rgba(19, 151, 143, 0.14);
  outline-offset: 2px;
}

.admin-record-thumb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 52px;
  overflow: hidden;
  border-radius: 10px;
  color: var(--muted);
  background: var(--paper-soft);
}

.admin-record-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-record-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-record-copy strong,
.admin-record-copy span,
.admin-record-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-record-copy strong {
  font-size: 0.82rem;
}

.admin-record-copy span {
  color: #53686e;
  font-size: 0.73rem;
  font-weight: 700;
}

.admin-record-copy small,
.admin-record-date {
  color: var(--muted);
  font-size: 0.66rem;
}

.admin-order-customer-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.admin-order-customer-line > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-order-origin {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 21px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.admin-order-origin svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.admin-order-origin.is-account {
  color: #087d76;
  background: #dff6f1;
}

.admin-order-origin.is-guest {
  color: #8d6417;
  background: #fff0c9;
}

.admin-order-origin b {
  font: inherit;
}

.admin-record-state {
  min-height: 27px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #617078;
  background: #eef2f4;
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-record-state.is-new { color: #94650d; background: #fff4d6; }
.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-record-chevron {
  color: #7b9297;
  font-size: 1.35rem;
  line-height: 1;
}

.admin-care-row {
  grid-template-columns: minmax(0, 1fr) auto auto 18px;
}

.admin-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
  gap: 18px;
  align-items: start;
}

.admin-detail-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-detail-back {
  justify-self: start;
  padding: 7px 0;
  border: 0;
  color: var(--teal-dark);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-detail-back:hover {
  color: var(--teal);
}

.admin-detail-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.admin-detail-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: #52666d;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease;
}

.admin-detail-sidebar-heading:hover {
  color: var(--teal-dark);
  background: #f4fbf9;
}

.admin-detail-sidebar-heading:focus-visible {
  outline: 3px solid rgba(19, 151, 143, 0.16);
  outline-offset: -3px;
}

.admin-detail-sidebar-heading strong {
  display: grid;
  place-items: center;
  min-width: 25px;
  min-height: 25px;
  padding-inline: 6px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: rgba(19, 155, 143, 0.1);
}

.admin-detail-sidebar-list {
  display: grid;
  gap: 5px;
  max-height: min(68vh, 720px);
  padding: 7px;
  overflow: auto;
}

.admin-detail-sidebar .admin-record-row {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 7px;
  border-radius: 11px;
  box-shadow: inset 3px 0 var(--admin-record-accent);
}

.admin-detail-sidebar .admin-record-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.admin-detail-sidebar .admin-care-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-detail-sidebar .admin-record-state,
.admin-detail-sidebar .admin-record-date,
.admin-detail-sidebar .admin-record-chevron,
.admin-detail-sidebar .admin-care-row .bug-severity,
.admin-detail-sidebar .admin-care-row .care-status {
  display: none;
}

.admin-detail-sidebar .admin-record-copy strong {
  font-size: 0.72rem;
}

.admin-detail-sidebar .admin-record-copy span {
  font-size: 0.64rem;
}

.admin-detail-sidebar .admin-record-copy small {
  font-size: 0.59rem;
}

.admin-detail-sidebar .admin-order-origin b {
  display: none;
}

.admin-detail-sidebar .admin-order-origin {
  min-height: 19px;
  padding-inline: 4px;
}

.admin-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr);
  gap: 16px;
  padding: 16px;
}

.admin-order-overview {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.admin-order-thumbnail {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: var(--paper-soft);
  text-decoration: none;
}

.admin-order-thumbnail img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.admin-order-meta {
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--muted);
}

.admin-order-actions {
  display: grid;
  align-content: start;
  gap: 10px;
}

.admin-order-actions textarea,
.admin-order-actions input,
.admin-order-actions select {
  width: 100%;
}

.admin-order-edit-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}

.admin-order-edit-control input,
.admin-order-edit-control textarea {
  min-width: 0;
}

.admin-order-edit-control input[readonly],
.admin-order-edit-control textarea[readonly] {
  color: #526568;
  background: #f3f7f6;
  cursor: copy;
}

.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;
}

.admin-order-edit-button {
  min-width: 72px;
  min-height: 45px;
  padding: 0 10px;
  border: 1px solid #bcded9;
  border-radius: 11px;
  color: var(--teal-dark);
  background: #edf8f6;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-order-edit-button:hover,
.admin-order-edit-button:focus-visible {
  border-color: var(--teal);
  background: #dff4ef;
  outline: none;
}

.admin-order-edit-button.is-confirming {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
}

.admin-order-edit-button:active {
  transform: translateY(1px);
}

.admin-order-production {
  grid-column: 1 / -1;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

/* Khối này từng là <details> gập mở được. Giờ luôn mở: nhân viên vào chi tiết
   đơn là để làm việc với ảnh và phiếu in, bắt bấm thêm một lần chỉ tốn thao
   tác. Tiêu đề vì vậy là thẻ chữ thường, không còn mũi tên gập. */
.admin-order-production-title {
  margin: 0;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-order-production-body {
  display: grid;
  gap: 12px;
  padding-top: 13px;
}

/* Hàng nút của khối dữ liệu sản xuất: tải ảnh, tải phiếu in, sao chép phiếu in.
   Cho xuống dòng vì ở khổ hẹp ba nhãn này không nằm vừa một hàng. */
.admin-order-production-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.admin-copy-instructions {
  justify-self: start;
  width: auto;
  padding: 0;
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 900;
}

/* Đơn nhiều ảnh: các ô ảnh xếp liền nhau thành một khối, mỗi ô một hàng gồm
   ảnh gốc và ảnh tham khảo. Khoảng cách giữa hai ô hẹp hơn khoảng cách bên
   trong một ô để mắt đọc ra ngay đâu là một cặp thuộc cùng một ô ảnh. */
.admin-order-slots {
  display: grid;
  gap: 14px;
}

.admin-order-slot {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
}

.admin-order-slot-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

/* Ký hiệu thứ tự ô ảnh. Dùng màu nhấn để nhận ra ngay khi lướt qua một đơn có
   bốn năm ô. */
.admin-order-slot-index {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.admin-order-assets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-order-asset {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-soft);
}

.admin-order-asset-preview,
.admin-order-asset-placeholder {
  display: grid;
  place-items: center;
  width: 116px;
  height: 92px;
  overflow: hidden;
  border-radius: 11px;
  color: var(--muted);
  background: var(--paper);
  text-align: center;
  text-decoration: none;
  font-size: 0.78rem;
}

.admin-order-asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-order-asset-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 7px;
  min-width: 0;
}

.admin-order-asset-copy > span,
.admin-order-asset-url {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.admin-order-asset-open {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.78rem;
}

.admin-print-instructions {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-soft);
}

.admin-print-instructions-title {
  margin: 0;
  padding: 13px 15px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.admin-print-instructions pre,
.admin-print-instructions p {
  margin: 0;
  padding: 0 15px 15px;
}

/* Không giới hạn chiều cao và không cuộn trong khung: phiếu in hiện trọn vẹn để
   đọc một mạch. Một thanh cuộn lồng trong trang vốn đã cuộn là chỗ dễ bỏ sót vài
   dòng cuối nhất. */
.admin-print-instructions pre {
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 500 0.82rem/1.65 "Inter", sans-serif;
}

/* Đường dẫn ảnh trong phiếu in bấm được; xem adminLinkifyInstructions trong
   admin.js. Gạch chân đặt lệch xuống để không cắt ngang phần đuôi chữ của một
   địa chỉ dài đang xuống dòng giữa chừng. */
.admin-print-instructions pre .admin-instruction-link {
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-print-instructions pre .admin-instruction-link:hover,
.admin-print-instructions pre .admin-instruction-link:focus-visible {
  color: var(--teal);
}

.admin-logout-button {
  white-space: nowrap;
}

.admin-login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(134, 196, 116, 0.2), transparent 32%),
    var(--paper-soft);
}

.admin-login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.admin-login-card {
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(24, 35, 45, 0.14);
}

.admin-login-card h1 {
  margin-bottom: 10px;
}

.admin-login-card > p:not(.eyebrow) {
  margin-bottom: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.admin-login-card form {
  display: grid;
  gap: 14px;
}

.admin-login-brand {
  display: inline-flex;
  margin-bottom: 22px;
}

.admin-login-back {
  display: inline-block;
  margin-top: 18px;
}

.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-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-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;
  }
}

.total-empty {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.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;
  overflow: hidden;
  border-radius: 14px;
  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;
}

.attached-art-step {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.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: 28px;
  max-height: 28px;
  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;
}

.source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.upload-zone {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-soft);
  cursor: pointer;
}

.upload-zone strong {
  display: block;
  overflow: visible;
  font-size: 0.9rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.upload-zone > span:last-child {
  min-width: 0;
}

.upload-zone small {
  margin-top: 1px;
  font-size: 0.74rem;
  line-height: 1.2;
}

.upload-zone input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.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;
}

.stepper,
.quantity-row input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
  font-weight: 900;
}

.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;
}

.checkout-form > *,
.verify-box > * {
  min-width: 0;
}

.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;
}

.status-pill.is-ready {
  background: #e8f6ec;
  color: #2e7442;
}

.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-heading,
.saved-address-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.saved-address-heading {
  justify-content: space-between;
}

.saved-address-heading strong,
.saved-address-heading small,
.saved-address-preview span {
  display: block;
}

.saved-address-heading small,
.saved-address-preview span {
  color: var(--muted);
  font-size: 0.76rem;
}

.saved-address-select {
  margin: 0;
}

.saved-address-preview {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
}

.saved-address-actions {
  align-items: stretch;
}

.saved-address-actions .secondary-button,
.saved-address-actions .text-button {
  min-height: 38px;
}

.danger-text-button {
  color: #b43a3a;
}

button:focus-visible {
  outline: 3px solid rgba(19, 155, 143, 0.24);
  outline-offset: 2px;
}

.helper-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.45;
}

.verify-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.verify-actions input {
  min-width: 0;
}

.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 (max-width: 1020px) {
  .admin-detail-layout {
    grid-template-columns: 1fr;
  }

  .admin-detail-sidebar {
    position: static;
    order: 2;
  }

  .admin-detail-sidebar-list {
    max-height: 360px;
  }
}

@media (max-width: 620px) {
  .admin-record-row,
  .admin-care-row {
    grid-template-columns: 48px minmax(0, 1fr) 16px;
    gap: 9px;
  }

  .admin-care-row {
    grid-template-columns: minmax(0, 1fr) 16px;
  }

  .admin-record-thumb {
    width: 48px;
    height: 46px;
  }

  .admin-record-state,
  .admin-record-date,
  .admin-care-row .bug-severity,
  .admin-care-row .care-status {
    display: none;
  }
}

@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-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: min(260px, 100%);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: white;
  backdrop-filter: none;
}

.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-credit > span {
  min-width: 0;
}

.gallery-credit strong,
.gallery-credit small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-credit strong {
  font-size: 0.78rem;
  line-height: 1.05;
}

.gallery-credit small {
  max-width: 190px;
  opacity: 0.86;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.05;
}

.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);
  }
}

.check-row {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  font-weight: 700;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
}

.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;
}

@media (hover: hover) {

}

.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;
  }

  /* .product-info-grid nay chi con xep hang chong len nhau; viec co ve mot cot
     do chinh .product-info-row lo bang auto-fit. */
  .product-process-list {
    grid-template-columns: 1fr;
  }

  .payment-layout,
  .admin-order-toolbar,
  .admin-order-card {
    grid-template-columns: 1fr;
  }

  .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;
  }

  .admin-order-overview,
  .admin-order-assets {
    grid-template-columns: 1fr;
  }

  .admin-order-thumbnail {
    width: 100%;
    height: min(320px, 62vw);
  }

  .admin-order-thumbnail img {
    width: 100%;
    height: 100%;
    max-height: 320px;
  }

  .admin-order-asset {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .admin-order-asset-preview,
  .admin-order-asset-placeholder {
    width: 96px;
    height: 84px;
  }

  .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;
  }

  .source-row {
    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;
  }

  .find-hero-credit {
    align-items: start;
    flex-direction: column;
    gap: 8px;
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .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-credit {
    flex: 1 1 auto;
    max-width: min(220px, 100%);
    min-width: 0;
  }

  .gallery-credit strong {
    font-size: 0.74rem;
  }

  .gallery-credit small {
    max-width: 100%;
    font-size: 0.58rem;
  }

  .gallery-actions {
    flex: 0 0 auto;
    justify-content: end;
  }

  .gallery-use-button {
    flex: 0 0 auto;
  }

  .gallery-download-button {
    flex: 0 0 38px;
  }

  .order-card {
    grid-template-columns: 1fr;
  }

  .order-thumb img {
    min-height: 220px;
  }

  .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;
  }

  .verify-actions {
    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;
  }
}

/* R2 batch uploader */
.upload-page {
  min-width: 320px;
  background:
    radial-gradient(circle at 14% 12%, rgba(28, 153, 145, 0.09), transparent 28%),
    var(--bg);
}

.upload-site-header {
  border-top: 3px solid var(--teal);
}

.upload-header-actions {
  display: flex;
  justify-content: flex-end;
}

.upload-admin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid #c8dedb;
  border-radius: 999px;
  color: var(--teal-dark);
  background: #edf8f6;
  font-size: 0.82rem;
  font-weight: 800;
}

.upload-app {
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 72px;
}

.upload-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
  padding: 26px 28px;
  border: 1px solid #d6e7e4;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f0faf8 100%);
  box-shadow: 0 18px 45px rgba(29, 43, 54, 0.07);
}

.upload-hero h1 {
  margin: 4px 0 9px;
  font-family: "Inter", sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
}

.upload-hero p:last-child {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.65;
}

.upload-hero-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 8px;
  min-width: min(420px, 100%);
}

.upload-hero-summary span {
  display: grid;
  gap: 2px;
  padding: 14px 12px;
  border: 1px solid #d6e7e4;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.86);
  text-align: center;
  font-size: 0.75rem;
}

.upload-hero-summary strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.upload-layout {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.upload-settings-panel,
.upload-queue-panel,
.upload-results-panel {
  padding: 20px;
}

.upload-settings-panel {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 15px;
}

.upload-field {
  display: grid;
  gap: 7px;
}

.upload-field > span {
  font-size: 0.84rem;
  font-weight: 800;
}

.upload-field input,
.upload-field select {
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: #fff;
  font: inherit;
}

.upload-field input:focus,
.upload-field select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 151, 143, 0.12);
}

.upload-field small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.upload-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.78rem;
}

.upload-check-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--teal);
}

.upload-field code {
  font-size: 0.72rem;
}

.upload-limit-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
}

.upload-limit-list span::before {
  content: "✓";
  margin-right: 8px;
  color: var(--teal);
  font-weight: 900;
}

.upload-queue-panel {
  min-width: 0;
}

.upload-queue-heading,
.upload-result-actions,
.upload-queue-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-queue-actions,
.upload-result-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.upload-feedback {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #acd7d2;
  border-radius: 12px;
  color: #185d57;
  background: #edf9f7;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.55;
}

.upload-feedback.is-success {
  border-color: #a8d8c5;
  color: #17613f;
  background: #f0faf5;
}

.upload-feedback.is-warning {
  border-color: #e8c77e;
  color: #76500a;
  background: #fff9e9;
}

.upload-feedback.is-error {
  border-color: #edb6b6;
  color: #9a3030;
  background: #fff5f5;
}

.upload-dropzone {
  display: grid;
  place-items: center;
  min-height: 210px;
  margin-top: 16px;
  padding: 24px;
  border: 2px dashed #9dcfc9;
  border-radius: 18px;
  color: var(--teal-dark);
  background: #f3fbfa;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.upload-dropzone:hover,
.upload-dropzone:focus-visible,
.upload-dropzone.is-dragging {
  border-color: var(--teal);
  background: #e7f7f4;
  transform: translateY(-2px);
  outline: none;
}

.upload-dropzone strong {
  margin: 9px 0 4px;
  font-size: 1rem;
}

.upload-dropzone > span:last-child {
  color: var(--muted);
  font-size: 0.78rem;
}

.upload-drop-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  background: var(--teal);
  font-size: 1.45rem;
  font-weight: 900;
}

.upload-empty {
  padding: 28px 12px 8px;
  color: var(--muted);
  text-align: center;
  font-size: 0.82rem;
}

.upload-queue-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.upload-queue-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 13px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.upload-queue-item.status-done {
  border-color: #a8d8c5;
  background: #f7fcfa;
}

.upload-queue-item.status-error {
  border-color: #edb6b6;
  background: #fff8f8;
}

.upload-queue-item > img {
  width: 92px;
  height: 78px;
  border-radius: 10px;
  object-fit: cover;
  background: #edf2f2;
}

.upload-item-info {
  min-width: 0;
}

.upload-item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upload-item-title-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.upload-remove-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
}

.upload-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.69rem;
}

.upload-item-manual-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.3fr);
  gap: 8px;
  margin-top: 8px;
}

.upload-item-manual-field {
  display: grid;
  gap: 5px;
}

.upload-item-manual-field > span {
  color: #466a66;
  font-size: 0.68rem;
  font-weight: 800;
}

.upload-item-manual-field input,
.upload-item-manual-field select {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #c9ddda;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fbfefd;
  font: 0.75rem/1.4 "Inter", sans-serif;
}

.upload-item-manual-field input:focus,
.upload-item-manual-field select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 151, 143, 0.1);
}

.upload-item-metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 7px;
  min-height: 0;
  color: #276a65;
  font-size: 0.68rem;
}

.upload-item-metadata:empty {
  display: none;
}

.upload-item-metadata > strong {
  max-width: min(100%, 310px);
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-item-metadata > div {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 4px;
}

.upload-item-metadata > div span,
.upload-metadata-source {
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f6f3;
}

.upload-metadata-source {
  color: #745617;
  background: #fff1c9;
  font-weight: 800;
}

.upload-progress-track {
  height: 6px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eeee;
}

.upload-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #55b6af);
  transition: width 120ms linear;
}

.status-error .upload-progress-track span {
  background: #d96b6b;
}

.upload-item-status {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}

.status-done .upload-item-status {
  color: #177653;
  font-weight: 800;
}

.status-error .upload-item-status {
  color: #ad3434;
  font-weight: 700;
}

.upload-item-link {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--teal-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.69rem;
}

.upload-results-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.upload-results-panel[hidden] {
  display: none;
}

.upload-results-panel p {
  color: var(--muted);
  font-size: 0.82rem;
}

.upload-results-panel textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #29423f;
  background: #f7fbfa;
  font: 0.75rem/1.6 Consolas, monospace;
}

@media (max-width: 920px) {
  .upload-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .upload-hero-summary {
    width: 100%;
  }

  .upload-layout {
    grid-template-columns: 1fr;
  }

  .upload-settings-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .upload-site-header {
    grid-template-columns: auto 1fr;
  }

  .upload-header-actions {
    display: none;
  }

  .upload-app {
    width: min(100% - 24px, 1380px);
    padding-top: 22px;
  }

  .upload-hero,
  .upload-settings-panel,
  .upload-queue-panel,
  .upload-results-panel {
    padding: 16px;
  }

  .upload-hero-summary {
    grid-template-columns: 1fr;
  }

  .upload-queue-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .upload-queue-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .upload-dropzone {
    min-height: 175px;
  }

  .upload-queue-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .upload-queue-item > img {
    width: 72px;
    height: 68px;
  }

  .upload-item-manual-fields {
    grid-template-columns: 1fr;
  }
}

/* R2 image manager */
.manager-app {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 72px;
}

.manager-layout {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.manager-control-panel,
.manager-library-panel,
.manager-bulk-panel {
  padding: 20px;
}

.manager-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 15px;
}

.manager-control-panel,
.manager-bulk-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.manager-accordion-toggle {
  display: flex;
  width: 100%;
  padding: 0;
  border: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.manager-accordion-heading {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.manager-accordion-heading .eyebrow {
  margin: 0;
}

.manager-accordion-title {
  font-size: 1.06rem;
  font-weight: 850;
  line-height: 1.25;
}

.manager-accordion-chevron {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgba(19, 151, 143, 0.2);
  border-radius: 11px;
  color: var(--teal-dark);
  background: rgba(19, 151, 143, 0.08);
  transition: color 180ms ease, background-color 180ms ease, transform 220ms ease;
}

.manager-accordion-chevron::before {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.manager-accordion-toggle:hover .manager-accordion-chevron,
.manager-accordion-toggle:focus-visible .manager-accordion-chevron {
  color: #fff;
  background: var(--teal);
}

.manager-accordion-toggle:focus-visible {
  outline: 3px solid rgba(19, 151, 143, 0.18);
  outline-offset: 6px;
  border-radius: 8px;
}

.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-accordion-content {
  display: grid;
  gap: 15px;
  padding-top: 15px;
}

.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-accordion-content[hidden] {
  display: none;
}

.manager-filter-block {
  display: grid;
  gap: 13px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.manager-page .upload-field select,
.manager-page .upload-field textarea {
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.manager-page .upload-field select:focus,
.manager-page .upload-field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 151, 143, 0.12);
}

.manager-bulk-fields,
.manager-bulk-collection,
.manager-bulk-danger {
  display: grid;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.manager-operation-progress {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(19, 151, 143, 0.25);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(19, 151, 143, 0.08);
}

.manager-operation-progress[hidden] {
  display: none;
}

.manager-operation-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.manager-operation-progress-heading span,
.manager-operation-progress p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.manager-operation-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(19, 151, 143, 0.14);
}

.manager-operation-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35b9c7, #8069d7, #ec6386);
  transition: width 220ms ease;
}

.manager-operation-progress[data-state="success"] {
  border-color: rgba(31, 146, 91, 0.3);
  background: rgba(31, 146, 91, 0.09);
}

.manager-operation-progress[data-state="error"] {
  border-color: rgba(190, 62, 62, 0.3);
  background: rgba(190, 62, 62, 0.08);
}

.manager-bulk-dimensions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.manager-bulk-dimensions > span {
  padding-bottom: 13px;
  color: var(--muted);
  font-weight: 800;
}

.manager-bulk-collection .primary-button,
.manager-bulk-danger .manager-delete-button {
  width: 100%;
  justify-content: center;
}

.manager-bulk-danger {
  padding: 14px;
  border: 1px solid #edc0c0;
  border-radius: 14px;
  color: #8b3434;
  background: #fff5f5;
}

.manager-library-panel {
  min-width: 0;
  min-height: 440px;
}

.manager-library-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.manager-library-heading h2 {
  margin-bottom: 5px;
}

.manager-library-heading p:last-child {
  color: var(--muted);
  font-size: 0.78rem;
}

.manager-library-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.manager-library-actions a {
  text-decoration: none;
}

/* Thanh chia trang kho ảnh.
   ---------------------------------------------------------------------------
   Nằm ngay trên lưới để chỉnh xong là thấy kết quả liền, không phải cuộn xuống
   cuối rồi cuộn ngược lên. */
.manager-page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Khối chứa là block thường, không có gap: tự chừa khoảng để hai thanh không
     dính vào lưới ảnh. */
  margin: 14px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbfb;
}

.manager-page-bar[hidden] {
  display: none;
}

.manager-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Chọn theo id chứ không theo lớp: luật chung của mọi ô nhập trong trang dùng
   một chuỗi :not() dài, độ ưu tiên cao hơn hẳn một selector hai lớp, nên
   ".manager-page-num" thua và ô rộng ra 127px. Hai thanh nên bốn id. */
#managerPerPage,
#managerPerPageDuoi,
#managerPageJump,
#managerPageJumpDuoi {
  width: 74px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  text-align: center;
}

#managerPageJump,
#managerPageJumpDuoi {
  width: 82px;
}

.manager-page-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.manager-page-jump .secondary-button {
  padding: 6px 12px;
  font-size: 0.78rem;
}

.manager-page-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.manager-page-nav .secondary-button {
  min-width: 38px;
  padding: 6px 10px;
  font-size: 1rem;
  line-height: 1;
}

.manager-page-nav .secondary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Dưới 560px ba nhóm không còn đứng chung một hàng được (170 + 184 + 194 px là
   quá khổ), nên mỗi nhóm chiếm trọn một dòng và tự dàn nhãn sang trái, điều
   khiển sang phải — vẫn ba dòng nhưng nhìn ra chủ ý thay vì so le. */
@media (max-width: 560px) {
  .manager-page-bar > * {
    width: 100%;
    justify-content: space-between;
  }
}

.manager-page-state {
  min-width: 92px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.manager-empty {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 28px;
  border: 1px dashed #cbdcda;
  border-radius: 16px;
  color: var(--muted);
  background: #f8fbfb;
  text-align: center;
}

.manager-empty[hidden] {
  display: none;
}

.manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 14px;
}

.manager-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23, 43, 52, 0.06);
}

.manager-card-image {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(45deg, #edf3f3 25%, transparent 25%),
    linear-gradient(-45deg, #edf3f3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #edf3f3 75%),
    linear-gradient(-45deg, transparent 75%, #edf3f3 75%),
    #f8fbfb;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.manager-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.manager-kind-badge,
.manager-sync-badge {
  position: absolute;
  top: 9px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(23, 43, 52, 0.16);
}

.manager-kind-badge {
  left: 9px;
  background: #296f9b;
}

.manager-kind-badge.is-illustration {
  background: #8857bb;
}

.manager-kind-badge.is-vector {
  background: var(--teal);
}

.manager-sync-badge {
  right: 9px;
}

.manager-sync-badge.is-synced {
  background: #24794e;
}

.manager-sync-badge.is-missing {
  color: #6e4b08;
  background: #ffe7a5;
}

.manager-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 13px;
}

.manager-card-body > * {
  min-width: 0;
  max-width: 100%;
}

.manager-card-body h3 {
  overflow: hidden;
  margin: 0 0 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.91rem;
}

.manager-card-body p {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.69rem;
}

.manager-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: var(--muted);
  font-size: 0.65rem;
}

.manager-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 23px;
}

.manager-card-tags span {
  max-width: 100%;
  overflow: hidden;
  padding: 4px 7px;
  border-radius: 999px;
  color: #276a65;
  background: #eaf7f4;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.62rem;
}

.manager-object-key {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 7px 8px;
  border-radius: 8px;
  color: #58716f;
  background: #f3f7f7;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.59rem;
}

.manager-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(58px, auto);
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.manager-card-actions button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

.manager-delete-button {
  padding: 8px 13px;
  border: 1px solid #e8b3b3;
  border-radius: 10px;
  color: #a63232;
  background: #fff7f7;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.manager-delete-button:hover {
  color: #fff;
  background: #bd3c3c;
}

.manager-modal-open {
  overflow: hidden;
}

.manager-modal-backdrop {
  position: fixed;
  z-index: 160;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 31, 39, 0.72);
  backdrop-filter: blur(8px);
}

.manager-modal-backdrop[hidden] {
  display: none;
}

.manager-editor {
  width: min(1380px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid #d4e3e1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(8, 24, 31, 0.32);
}

.manager-editor-heading {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.manager-editor-heading h2 {
  margin: 3px 0 5px;
}

/* Góc phải của tiêu đề cửa sổ: nút lùi một bước, rồi tới nút đóng.
   ---------------------------------------------------------------------------
   Lùi và đóng là hai việc khác nhau — lùi trả về màn hình trước, đóng bỏ cả cửa
   sổ — nên chúng đứng cạnh nhau chứ không thay nhau. */
.manager-editor-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  /* Nút × của cửa sổ này nằm tuyệt đối ở góc phải, không chiếm chỗ trong hàng.
     Chừa sẵn đúng bề ngang của nó, nếu không nút lùi chui xuống dưới nó. */
  padding-right: 42px;
}

.manager-editor-back {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.manager-editor-back:hover {
  border-color: var(--ink);
  background: #fff;
}

.manager-editor-back[hidden] {
  display: none;
}

/* 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;
  }
}

.manager-editor-heading p:last-child {
  max-width: min(820px, 76vw);
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 0.68rem/1.4 Consolas, monospace;
}

.manager-editor-close {
  position: static;
  flex: 0 0 auto;
}

.manager-editor-layout {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(440px, 1fr) minmax(290px, 360px);
  gap: 20px;
  padding: 20px 22px;
  align-items: start;
}

.manager-editor-preview {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 10px;
}

.manager-editor-preview img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f3f7f7;
}

.manager-editor-file-meta {
  color: var(--muted);
  text-align: center;
  font-size: 0.7rem;
}

.manager-editor-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  min-width: 0;
}

.manager-field-wide {
  grid-column: 1 / -1;
}

.manager-json-panel {
  position: sticky;
  top: 112px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cce0dd;
  border-radius: 14px;
  background: #f5faf9;
}

.manager-json-panel > div {
  display: grid;
  gap: 3px;
  padding: 12px 13px;
  border-bottom: 1px solid #dbe9e7;
}

.manager-json-panel strong {
  font-size: 0.8rem;
}

.manager-json-panel span {
  color: var(--muted);
  font-size: 0.65rem;
}

.manager-json-panel pre {
  max-height: 480px;
  margin: 0;
  overflow: auto;
  padding: 13px;
  color: #205851;
  font: 0.66rem/1.55 Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.manager-editor-actions {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

.manager-editor-actions > div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.manager-sync-status {
  color: #2c6964;
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 1120px) {
  .manager-editor-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .manager-json-panel {
    position: static;
    grid-column: 1 / -1;
  }

  .manager-json-panel pre {
    max-height: 300px;
  }
}

@media (max-width: 920px) {
  .manager-layout {
    grid-template-columns: 1fr;
  }

  .manager-sidebar,
  .manager-control-panel {
    position: static;
  }

  .manager-editor-layout {
    grid-template-columns: 1fr;
  }

  .manager-editor-preview,
  .manager-json-panel {
    position: static;
    grid-column: auto;
  }

  .manager-editor-preview img {
    max-height: 300px;
  }
}

@media (max-width: 640px) {
  .manager-app {
    width: min(100% - 24px, 1480px);
    padding-top: 22px;
  }

  .manager-control-panel,
  .manager-library-panel,
  .manager-bulk-panel {
    padding: 16px;
  }

  .manager-library-heading,
  .manager-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .manager-library-actions,
  .manager-editor-actions > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .manager-grid {
    grid-template-columns: 1fr;
  }

  .manager-modal-backdrop {
    padding: 0;
  }

  .manager-editor {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .manager-editor-heading,
  .manager-editor-layout,
  .manager-editor-actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .manager-editor-fields {
    grid-template-columns: 1fr;
  }

  .manager-field-wide {
    grid-column: auto;
  }
}

/* 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-options-close {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #c95858;
  border-radius: 8px;
  color: #b83c3c;
  background: #fff3f3;
  box-shadow: 0 4px 11px rgba(184, 60, 60, 0.16);
  font: inherit;
  font-size: 0;
}

.image-options-close::before,
.image-options-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1px;
  border-radius: 999px;
  background: #b83c3c;
}

.image-options-close::before {
  transform: rotate(45deg);
}

.image-options-close::after {
  transform: rotate(-45deg);
}

.image-options-close:hover,
.image-options-close:focus-visible {
  border-color: #a92f2f;
  color: #9c2525;
  background: #ffe4e4;
  box-shadow: 0 5px 14px rgba(156, 37, 37, 0.22);
  outline: none;
}

.image-options-close:hover::before,
.image-options-close:hover::after,
.image-options-close:focus-visible::before,
.image-options-close:focus-visible::after {
  background: #9c2525;
}

.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 {
  display: inline-flex;
  min-height: 36px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    border-color 170ms ease,
    color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}

.account-address-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.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 {
    min-width: 0;
    gap: 5px;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .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-action:hover {
    border-color: currentColor;
    box-shadow: 0 7px 16px rgba(32, 85, 84, 0.11);
    transform: translateY(-1px);
  }
}

.account-address-action:focus-visible {
  border-color: currentColor;
  box-shadow: 0 0 0 3px rgba(27, 159, 147, 0.14);
  outline: none;
}

.account-address-action:active {
  transform: scale(0.97);
}

.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 {
    flex: 1 1 auto;
    padding-inline: 9px;
  }

  .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-filters {
  display: grid;
  gap: 14px;
  padding: 15px;
  border: 1px solid #d5e8e5;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(68, 203, 187, 0.11), transparent 35%),
    linear-gradient(145deg, #f8fdfc, #f2faf8);
}

.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: 640px) {
  .account-order-filters {
    gap: 0;
    padding: 11px;
    border-radius: 14px;
  }
}

@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;
}

.order-lookup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 20px;
  align-items: stretch;
}

.order-lookup-intro,
.order-lookup-form,
.order-lookup-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(30, 56, 66, 0.08);
}

/* Cột giới thiệu dựng lại theo đúng công thức hero của trang đặt in, trang giới
   thiệu và hai trang Hỗ trợ, Báo lỗi: nền giấy ba vệt màu, vòng tròn viền dày
   chìm dưới mép trái, dải ngắn ba màu ở góc phải trên. Ô icon sẵn có được giữ
   nguyên và đóng vai trò dấu mở đầu, nên eyebrow ở đây không cần ba chấm mực. */
.order-lookup-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding: clamp(30px, 5vw, 56px);
  border-color: rgba(20, 143, 132, 0.16);
  border-radius: 30px;
  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);
}

.order-lookup-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;
}

.order-lookup-intro::before {
  position: absolute;
  z-index: 4;
  top: 34px;
  right: 36px;
  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: "";
}

.order-lookup-eyebrow {
  margin: 0 0 12px;
}

.order-lookup-intro h1 {
  max-width: 16ch;
  margin: 0 0 16px;
  color: #173d3a;
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

.order-lookup-lead {
  max-width: 50ch;
  margin: 0;
  color: #56686e;
  font-size: 0.9rem;
  line-height: 1.75;
}

/* Ba bước mang ba màu đầu của bộ KROMADE, cùng cách làm với ba ô bước ở hero trang
   Hỗ trợ, để hai trang cùng một nhịp đọc. */
/* Cùng cách với khung ba bước bên trang Hỗ trợ: khối co vừa nội dung, ba ô bên
   trong giãn đều cho bằng ô dài nhất. */
.order-lookup-steps {
  display: grid;
  justify-self: start;
  gap: 10px;
  max-width: 100%;
  margin-top: 26px;
}

.order-lookup-steps span {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid rgba(20, 143, 132, 0.14);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(33, 89, 84, 0.06);
  color: #3f585e;
  font-family: var(--font-brand);
  font-size: 0.8rem;
  font-weight: 800;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.order-lookup-steps span:hover {
  box-shadow: 0 16px 32px rgba(33, 89, 84, 0.1);
  transform: translateY(-2px);
}

.order-lookup-steps b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: #ddf4f7;
  color: #0e7783;
  font-family: var(--font-brand);
  font-size: 0.92rem;
  font-weight: 900;
}

.order-lookup-steps span:nth-child(2) b {
  background: #fcdfe8;
  color: #b93f63;
}

.order-lookup-steps span:nth-child(3) b {
  background: #fdeecb;
  color: #8a6410;
}

.order-lookup-hero-icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 20px;
  border: 1px solid rgba(105, 190, 180, 0.36);
  border-radius: 22px;
  color: #08776e;
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.98), transparent 38%),
    radial-gradient(circle at 84% 85%, rgba(244, 189, 79, 0.2), transparent 34%),
    linear-gradient(145deg, #ebfffb, #dff5f3 56%, #fff8e8);
  box-shadow:
    0 16px 30px rgba(8, 119, 110, 0.16),
    0 5px 12px rgba(21, 86, 84, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: rotate(-2deg);
}

.order-lookup-hero-icon::before {
  position: absolute;
  z-index: -1;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.24);
  content: "";
}

.order-lookup-hero-icon::after {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #ef7d73;
  box-shadow: 0 0 0 4px rgba(239, 125, 115, 0.12);
  content: "";
}

.order-lookup-hero-icon svg {
  position: relative;
  z-index: 1;
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(2deg);
}

.order-lookup-hero-icon .order-lookup-search-accent {
  stroke: #e96862;
  stroke-width: 2;
}

.order-lookup-form {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 38px);
}

.order-lookup-form h2 {
  margin: 3px 0 0;
  font-family: var(--font-brand);
  font-size: 1.45rem;
}

.order-lookup-form label {
  font-size: 0.72rem;
  font-weight: 800;
}

.order-lookup-field {
  display: grid;
  gap: 7px;
}

.order-lookup-field > small {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.55;
}

.order-lookup-input-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 50px;
  overflow: hidden;
  border: 1px solid #c6d8dc;
  border-radius: 13px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.order-lookup-input-row:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(19, 155, 143, 0.11);
}

.order-lookup-input-row > span {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 50px;
  border-right: 1px solid #dbe6e8;
  color: var(--teal-dark);
  background: #eef8f6;
  font-size: 0.74rem;
  font-weight: 900;
}

.order-lookup-input-row input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  outline: none;
}

.order-lookup-email-row input {
  letter-spacing: 0;
}

.order-lookup-error {
  padding: 10px 12px;
  border: 1px solid #efc1c1;
  border-radius: 10px;
  color: #a63232;
  background: #fff5f5;
  font-size: 0.67rem;
  font-weight: 700;
}

.order-lookup-error[hidden],
.order-lookup-result[hidden] {
  display: none;
}

.order-lookup-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: orderLookupSpin 700ms linear infinite;
}

#orderLookupSubmit.is-loading {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  cursor: wait;
}

@keyframes orderLookupSpin {
  to {
    transform: rotate(360deg);
  }
}

.order-lookup-result {
  margin-top: 22px;
  scroll-margin-top: calc(var(--header-h) + 18px);
  animation: orderLookupResultEnter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes orderLookupResultEnter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.order-lookup-card {
  padding: clamp(20px, 3vw, 30px);
}

.order-lookup-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.order-lookup-result-heading h2,
.order-lookup-result-heading p {
  margin: 0;
}

.order-lookup-result-heading h2 {
  margin-top: 4px;
  font-family: var(--font-brand);
  font-size: clamp(1.15rem, 3vw, 1.7rem);
}

.order-lookup-result-heading div > span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.order-lookup-status {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: #e8f7f4;
  font-size: 0.68rem;
  font-weight: 800;
}

.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-cancelled {
  display: grid;
  gap: 3px;
  margin: 22px 0;
  padding: 14px 16px;
  border: 1px solid #efc4c4;
  border-radius: 12px;
  color: #9d3434;
  background: #fff5f5;
}

.order-lookup-cancelled strong {
  font-size: 0.75rem;
}

.order-lookup-cancelled span {
  font-size: 0.64rem;
}

.order-lookup-detail-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
}

.order-lookup-product,
.order-lookup-meta {
  border: 1px solid #dfe8e9;
  border-radius: 14px;
  background: #f9fbfb;
}

.order-lookup-product {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 13px;
  align-content: center;
  align-items: center;
  padding: 18px;
}

.order-lookup-product-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, var(--teal), #08776e);
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 900;
}

.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-product-icon img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  background: #f3f7f7;
}

.order-lookup-product > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.order-lookup-product small,
.order-lookup-product span {
  color: var(--muted);
  font-size: 0.63rem;
}

.order-lookup-product strong {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.order-lookup-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 18px;
}

.order-lookup-meta div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.order-lookup-meta dt {
  color: var(--muted);
  font-size: 0.6rem;
}

.order-lookup-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.7rem;
  font-weight: 700;
}

.order-lookup-result-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.order-lookup-result-actions p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.6;
}

.order-lookup-result-actions > div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.order-lookup-result-actions a:not(.order-action-button) {
  min-height: 40px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .order-lookup-hero,
  .order-lookup-detail-grid {
    grid-template-columns: 1fr;
  }

  .order-lookup-form {
    align-content: start;
  }
}

@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%;
  }

  .order-lookup-form,
  .order-lookup-card {
    border-radius: 16px;
  }

  .order-lookup-intro {
    padding: 26px 20px 24px;
    border-radius: 24px;
  }

  /* Dải ba màu và vòng tròn trang trí thu về cho vừa khung hẹp, giống cách hero
     hai trang Hỗ trợ và Báo lỗi làm ở khổ này. */
  .order-lookup-intro::before {
    top: 20px;
    right: 20px;
    width: 46px;
    height: 7px;
  }

  .order-lookup-intro::after {
    bottom: -64px;
    left: -44px;
    width: 158px;
    height: 158px;
    border-width: 28px;
  }

  .order-lookup-intro h1 {
    font-size: clamp(1.62rem, 8.4vw, 2.3rem);
    line-height: 1.04;
  }

  .order-lookup-lead {
    font-size: 0.84rem;
  }

  .order-lookup-steps {
    margin-top: 20px;
  }

  .order-lookup-hero-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 17px;
    border-radius: 19px;
  }

  .order-lookup-hero-icon::before {
    inset: 6px;
    border-radius: 14px;
  }

  .order-lookup-hero-icon::after {
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
  }

  .order-lookup-hero-icon svg {
    width: 30px;
    height: 30px;
  }

  .order-lookup-form {
    padding: 20px;
  }

  .order-lookup-result-heading,
  .order-lookup-result-actions {
    display: grid;
    align-items: start;
  }

  .order-lookup-result-heading {
    justify-items: start;
  }

  .order-lookup-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-lookup-result-actions > div {
    display: grid;
    width: 100%;
  }

  .order-lookup-result-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-lookup-result,
  .order-lookup-spinner {
    animation-duration: 1ms;
  }
}

@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"] {
  background:
    radial-gradient(circle at 8% 5%, rgba(53, 185, 199, 0.1), transparent 24rem),
    radial-gradient(circle at 94% 18%, rgba(246, 200, 82, 0.11), transparent 22rem),
    #f4f8f5;
}

.community-policy-page {
  --community-ink: #17343a;
  --community-muted: #65757a;
  --community-line: rgba(37, 79, 80, 0.13);
  width: min(1180px, calc(100% - clamp(28px, 6vw, 80px)));
  margin-inline: auto;
  padding: clamp(30px, 5vw, 66px) 0 54px;
  color: var(--community-ink);
}

.community-policy-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, 0.62fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
  min-height: min(650px, calc(100vh - 132px));
  padding: clamp(38px, 7vw, 88px);
  overflow: hidden;
  border: 1px solid rgba(36, 94, 92, 0.12);
  border-radius: 36px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(241, 251, 247, 0.92)),
    #fff;
  box-shadow: 0 28px 76px rgba(38, 82, 78, 0.12);
}

.community-policy-hero::before,
.community-policy-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.community-policy-hero::before {
  top: -124px;
  right: -92px;
  width: 340px;
  height: 340px;
  border: 58px solid rgba(53, 185, 199, 0.11);
  border-radius: 50%;
}

.community-policy-hero::after {
  bottom: -86px;
  left: 44%;
  width: 196px;
  height: 196px;
  border-radius: 46px;
  background: rgba(246, 200, 82, 0.1);
  transform: rotate(24deg);
}

.community-policy-hero-copy {
  position: relative;
  z-index: 1;
}

.community-policy-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px;
  color: #117f77;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.community-policy-kicker > span {
  display: inline-flex;
  gap: 3px;
}

.community-policy-kicker i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35b9c7;
}

.community-policy-kicker i:nth-child(2) {
  background: #f6c852;
}

.community-policy-kicker i:nth-child(3) {
  background: #ec6386;
}

.community-policy-hero h1 {
  max-width: 790px;
  margin: 0;
  color: #16373c;
  font-family: var(--font-brand);
  font-size: clamp(2.65rem, 6.2vw, 5.9rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.community-policy-hero h1 em {
  color: #159487;
  font-style: normal;
}

.community-policy-lead {
  max-width: 680px;
  margin: 28px 0 0;
  color: #647478;
  font-size: clamp(1rem, 1.65vw, 1.18rem);
  line-height: 1.75;
}

.community-policy-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.community-policy-hero-actions a,
.community-policy-support > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(21, 148, 135, 0.2);
  border-radius: 999px;
  color: #107970;
  background: rgba(255, 255, 255, 0.84);
  font-size: 0.8rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.community-policy-hero-actions a:first-child {
  color: #fff;
  background: #159487;
  box-shadow: 0 12px 24px rgba(21, 148, 135, 0.2);
}

.community-policy-hero-actions a:hover,
.community-policy-hero-actions a:focus-visible,
.community-policy-support > a:hover,
.community-policy-support > a:focus-visible {
  color: #fff;
  background: #ef6461;
  box-shadow: 0 13px 26px rgba(239, 100, 97, 0.23);
  transform: translateY(-2px);
  outline: none;
}

.community-policy-summary {
  position: relative;
  z-index: 1;
  padding: 24px;
  border: 1px solid rgba(18, 118, 109, 0.13);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 50px rgba(40, 91, 84, 0.1);
  backdrop-filter: blur(12px);
}

.community-policy-summary > p {
  margin: 0 0 14px;
  color: #7b898c;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.community-policy-summary ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-policy-summary li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: #eef9f6;
}

.community-policy-summary li:nth-child(2) {
  background: #fff7e8;
}

.community-policy-summary li > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #fff;
  background: #159487;
  font-size: 0.72rem;
  font-weight: 900;
}

.community-policy-summary li:nth-child(2) > span {
  color: #59471c;
  background: #f6c852;
}

.community-policy-summary strong,
.community-policy-summary small {
  display: block;
}

.community-policy-summary strong {
  color: #234248;
  font-size: 0.88rem;
}

.community-policy-summary small {
  margin-top: 3px;
  color: #748184;
  font-size: 0.7rem;
  line-height: 1.45;
}

.community-policy-summary-note {
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px dashed rgba(21, 148, 135, 0.22);
  border-radius: 15px;
  color: #5f7374;
  background: rgba(244, 251, 248, 0.72);
  font-size: 0.7rem;
  line-height: 1.55;
}

.community-policy-intro {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 90px);
  padding: clamp(70px, 9vw, 120px) clamp(10px, 4vw, 50px);
}

.community-policy-section-index {
  margin: 5px 0 0;
  color: #159487;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.community-policy-intro h2 {
  max-width: 820px;
  margin: 0 0 22px;
  color: #1e3b41;
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.community-policy-intro div > p {
  max-width: 820px;
  margin: 0;
  color: #647579;
  font-size: 0.98rem;
  line-height: 1.85;
}

.community-policy-intro div > p + p {
  margin-top: 13px;
}

.community-policy-layout {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}

.community-policy-toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--community-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 34px rgba(43, 83, 80, 0.07);
  backdrop-filter: blur(12px);
}

.community-policy-toc p {
  margin: 0 0 8px;
  color: #758587;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.community-policy-toc a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 12px;
  color: #5f7074;
  font-size: 0.73rem;
  font-weight: 750;
  text-decoration: none;
}

.community-policy-toc a span {
  color: #159487;
  font-size: 0.62rem;
  font-weight: 900;
}

.community-policy-toc a:hover,
.community-policy-toc a:focus-visible {
  color: #126f68;
  background: #e9f7f3;
  outline: none;
}

.community-policy-content {
  display: grid;
  gap: 30px;
  min-width: 0;
}

.community-policy-section,
.community-policy-decision,
.community-policy-checklist {
  scroll-margin-top: 96px;
}

.community-policy-section {
  padding: clamp(26px, 5vw, 54px);
  border: 1px solid var(--community-line);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 52px rgba(45, 87, 83, 0.08);
}

.community-policy-section-heading {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 30px;
}

.community-policy-section-heading > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #fff;
  background: #173c42;
  font-size: 0.72rem;
  font-weight: 900;
}

.community-policy-section-heading p {
  max-width: 760px;
  margin: 0;
  color: #68797d;
  font-size: 0.83rem;
  line-height: 1.7;
}

.community-policy-section-heading div > p:first-child {
  margin-bottom: 7px;
  color: #159487;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.community-policy-section-heading h2,
.community-policy-decision h2,
.community-policy-checklist h2,
.community-policy-support h2 {
  margin: 0;
  color: #213f45;
  font-family: var(--font-brand);
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.community-policy-section-heading h2 + p {
  margin-top: 10px;
}

.community-policy-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.community-policy-rule-card {
  position: relative;
  min-height: 188px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid rgba(40, 76, 78, 0.1);
  border-radius: 22px;
  background: #f5f8f7;
}

.community-policy-rule-card::after {
  position: absolute;
  top: -28px;
  right: -24px;
  width: 92px;
  height: 92px;
  border: 18px solid var(--rule-color, #159487);
  border-radius: 50%;
  opacity: 0.11;
  content: "";
}

.community-policy-rule-card[data-rule-tone="magenta"] { --rule-color: #ec6386; background: #fff6f9; }
.community-policy-rule-card[data-rule-tone="violet"] { --rule-color: #8069d7; background: #f8f6ff; }
.community-policy-rule-card[data-rule-tone="yellow"] { --rule-color: #dba936; background: #fffaf0; }
.community-policy-rule-card[data-rule-tone="cyan"] { --rule-color: #35b9c7; background: #f2fbfc; }
.community-policy-rule-card[data-rule-tone="coral"] { --rule-color: #ef6461; background: #fff7f5; }

.community-policy-rule-card > span {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--rule-color, #159487);
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.61rem;
  font-weight: 900;
}

.community-policy-rule-card h3 {
  margin: 0 0 8px;
  color: #29464b;
  font-size: 1rem;
}

.community-policy-rule-card p {
  margin: 0;
  color: #68777b;
  font-size: 0.79rem;
  line-height: 1.65;
}

.community-policy-rule-card-wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.community-policy-decision {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(222, 91, 88, 0.18);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #d95362, #ef7167);
  box-shadow: 0 22px 46px rgba(193, 76, 78, 0.18);
}

.community-policy-decision-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 2rem;
  font-weight: 900;
}

.community-policy-decision > div > p:first-child {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.community-policy-decision h2 {
  color: #fff;
}

.community-policy-decision h2 + p,
.community-policy-decision p + p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.83rem;
  line-height: 1.72;
}

.community-policy-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.community-policy-review-grid article {
  padding: 22px;
  border: 1px solid rgba(21, 148, 135, 0.12);
  border-radius: 20px;
  background: #f0f9f6;
}

.community-policy-review-grid article:nth-child(2) { background: #fff9ed; }
.community-policy-review-grid article:nth-child(3) { background: #f8f6ff; }

.community-policy-review-grid span {
  display: inline-block;
  margin-bottom: 18px;
  color: #159487;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.community-policy-review-grid h3 {
  margin: 0 0 8px;
  color: #28464b;
  font-size: 0.9rem;
  line-height: 1.35;
}

.community-policy-review-grid p {
  margin: 0;
  color: #68787b;
  font-size: 0.76rem;
  line-height: 1.62;
}

.community-policy-example {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 20px 22px;
  border-left: 4px solid #159487;
  border-radius: 4px 18px 18px 4px;
  background: #edf8f5;
}

.community-policy-example > span {
  color: #12796f;
  font-size: 0.69rem;
  font-weight: 900;
}

.community-policy-example blockquote {
  margin: 0;
  color: #415b60;
  font-size: 0.83rem;
  font-style: italic;
  line-height: 1.65;
}

.community-policy-checklist {
  display: grid;
  grid-template-columns: minmax(210px, 0.68fr) minmax(0, 1.32fr);
  gap: 30px;
  align-items: start;
  padding: clamp(27px, 5vw, 48px);
  border: 1px solid rgba(90, 75, 149, 0.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 100%, rgba(128, 105, 215, 0.11), transparent 34%),
    #f9f8ff;
}

.community-policy-checklist > div > p {
  margin: 0 0 7px;
  color: #8069d7;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.community-policy-checklist ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-policy-checklist li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(90, 75, 149, 0.1);
  border-radius: 14px;
  color: #52656a;
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  line-height: 1.48;
}

.community-policy-checklist li span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #fff;
  background: #8069d7;
  font-size: 0.64rem;
  font-weight: 900;
}

.community-policy-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(52px, 8vw, 92px);
  padding: clamp(30px, 5vw, 54px);
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 82% -30%, rgba(246, 200, 82, 0.3), transparent 38%),
    linear-gradient(135deg, #123e42, #126f68);
  box-shadow: 0 24px 60px rgba(21, 70, 69, 0.18);
}

.community-policy-support p {
  margin: 0 0 7px;
  color: #9edbd4;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.community-policy-support h2 {
  color: #fff;
}

.community-policy-support h2 + span {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.73);
  font-size: 0.8rem;
}

.community-policy-support > a {
  flex: 0 0 auto;
  gap: 16px;
  min-height: 50px;
  color: #173f43;
  background: #fff;
}

@media (max-width: 960px) {
  .community-policy-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .community-policy-summary {
    max-width: 620px;
  }

  .community-policy-layout {
    grid-template-columns: 1fr;
  }

  .community-policy-toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .community-policy-toc p {
    flex: 1 0 100%;
  }

  .community-policy-review-grid {
    grid-template-columns: 1fr;
  }

  .community-policy-review-grid article {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .community-policy-page {
    width: min(100% - 20px, 600px);
    padding-top: 18px;
  }

  .community-policy-hero {
    gap: 28px;
    padding: 28px 20px 22px;
    border-radius: 24px;
  }

  .community-policy-hero::before {
    width: 220px;
    height: 220px;
    border-width: 36px;
  }

  .community-policy-kicker {
    align-items: flex-start;
    font-size: 0.63rem;
    line-height: 1.45;
  }

  .community-policy-hero h1 {
    font-size: clamp(2.25rem, 13vw, 3.6rem);
  }

  .community-policy-lead {
    margin-top: 20px;
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .community-policy-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
  }

  .community-policy-hero-actions a {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 0.7rem;
  }

  .community-policy-summary {
    padding: 15px;
    border-radius: 19px;
  }

  .community-policy-summary li {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 10px;
  }

  .community-policy-summary li > span {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .community-policy-intro {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 58px 8px;
  }

  .community-policy-intro h2 {
    font-size: 1.82rem;
  }

  .community-policy-intro div > p {
    font-size: 0.84rem;
    line-height: 1.72;
  }

  .community-policy-toc {
    padding: 12px;
    border-radius: 16px;
  }

  .community-policy-toc a {
    flex: 1 0 calc(50% - 6px);
    font-size: 0.67rem;
  }

  .community-policy-content {
    gap: 16px;
  }

  .community-policy-section,
  .community-policy-decision,
  .community-policy-checklist {
    border-radius: 22px;
  }

  .community-policy-section {
    padding: 20px;
  }

  .community-policy-section-heading {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .community-policy-section-heading > span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .community-policy-section-heading h2,
  .community-policy-decision h2,
  .community-policy-checklist h2,
  .community-policy-support h2 {
    font-size: 1.42rem;
  }

  .community-policy-section-heading p {
    font-size: 0.74rem;
  }

  .community-policy-rule-grid {
    grid-template-columns: 1fr;
  }

  .community-policy-rule-card-wide {
    grid-column: auto;
  }

  .community-policy-rule-card {
    min-height: 0;
    padding: 20px;
  }

  .community-policy-rule-card > span {
    margin-bottom: 18px;
  }

  .community-policy-decision {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
  }

  .community-policy-decision-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 1.35rem;
  }

  .community-policy-decision h2 + p,
  .community-policy-decision p + p {
    font-size: 0.74rem;
  }

  .community-policy-review-grid article {
    padding: 18px;
  }

  .community-policy-example {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }

  .community-policy-checklist {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 18px;
  }

  .community-policy-support {
    display: grid;
    margin-top: 50px;
    padding: 25px 21px;
    border-radius: 22px;
  }

  .community-policy-support > a {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-policy-hero-actions a,
  .community-policy-support > a {
    transition: none;
  }
}

.care-page,
.admin-care-app {
  width: min(1180px, calc(100% - clamp(28px, 6vw, 78px)));
  margin-inline: auto;
  padding: clamp(32px, 5vw, 64px) 0 24px;
}

/* Hero hai trang Hỗ trợ và Báo lỗi dựng theo đúng ngôn ngữ hero của trang đặt in
   và trang giới thiệu: giấy pha ba vệt màu ở góc, vòng tròn viền dày chìm dưới
   mép trái, và dải ngắn ba màu ở góc phải trên. Màu viết thẳng vì token --about-*
   chỉ sống trong .about-landing. */
.care-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  padding: clamp(32px, 5vw, 62px);
  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);
}

.care-hero::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;
}

.care-hero::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: "";
}

.care-eyebrow {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}

.care-eyebrow-dots {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}

.care-eyebrow-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35b9c7;
}

.care-eyebrow-dots i:nth-child(2) {
  background: #ec6386;
}

.care-eyebrow-dots i:nth-child(3) {
  background: #f6c852;
}

.care-hero h1 {
  max-width: 15ch;
  margin: 0 0 16px;
  color: #173d3a;
  font-family: var(--font-brand);
  font-size: clamp(2.15rem, 4.6vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

.care-hero-lead {
  max-width: 54ch;
  margin: 0;
  color: #56686e;
  font-size: 0.92rem;
  line-height: 1.75;
}

/* Khung ba bước co lại vừa nội dung, còn ba ô bên trong thì kéo dài hết khung.
   Lưới co theo nội dung sẽ lấy bề rộng của ô dài nhất, rồi hai ô còn lại giãn ra
   cho bằng — nên ba ô luôn thẳng mép mà cả khối vẫn không chiếm hết cột.
   max-width giữ khối không tràn khi cột hẹp hơn ô dài nhất. */
.care-hero-steps {
  display: grid;
  justify-self: start;
  gap: 10px;
  max-width: 100%;
}

/* Ba bước mang ba màu đầu của bộ KROMADE, cùng thứ tự với ba chấm mực trên eyebrow
   nên người đọc thấy được cùng một mạch màu chạy suốt hero. */
.care-hero-steps span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 14px 17px;
  border: 1px solid rgba(20, 143, 132, 0.14);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(33, 89, 84, 0.06);
  color: #3f585e;
  font-family: var(--font-brand);
  font-size: 0.84rem;
  font-weight: 800;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.care-hero-steps span:hover {
  box-shadow: 0 16px 32px rgba(33, 89, 84, 0.1);
  transform: translateY(-2px);
}

.care-hero-steps b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #ddf4f7;
  color: #0e7783;
  font-family: var(--font-brand);
  font-size: 0.98rem;
  font-weight: 900;
}

.care-hero-steps span:nth-child(2) b {
  background: #fcdfe8;
  color: #b93f63;
}

.care-hero-steps span:nth-child(3) b {
  background: #fdeecb;
  color: #8a6410;
}

.care-layout,
.bug-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  gap: 18px;
  align-items: start;
  margin-top: 20px;
}

/* Trang Hỗ trợ đặt khung mở trò chuyện trước form gửi yêu cầu, nên hai cột đổi bề
   rộng cho nhau để mỗi khung vẫn giữ đúng khổ như trước. */
.care-layout {
  grid-template-columns: minmax(330px, 0.85fr) minmax(0, 1.15fr);
}

.care-form-panel,
.bug-privacy-note,
.admin-care-panel {
  border: 1px solid rgba(19, 155, 143, 0.13);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(33, 75, 72, 0.07);
}

.care-form-panel {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 4vw, 38px);
}

.care-panel-heading {
  margin-bottom: 4px;
}

.care-panel-heading h2 {
  margin: 7px 0 8px;
  color: #244244;
  font-family: var(--font-brand);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
}

.care-panel-heading > p:last-child {
  margin: 0;
  color: #6b7b81;
  font-size: 0.82rem;
  line-height: 1.65;
}

/* .care-field là bản không dùng thẻ <label> — dành cho ô có bộ chọn tự dựng, vì
   <label> bọc <button> sẽ khiến bấm vào chữ nhãn cũng mở luôn danh sách. */
.care-form-panel label,
.care-form-panel .care-field,
.care-form-panel form {
  display: grid;
  gap: 7px;
}

.care-form-panel label > span,
.care-form-panel .care-field > span {
  color: #385157;
  font-size: 0.76rem;
  font-weight: 800;
}

.care-form-panel label small {
  color: #89969b;
  font-weight: 600;
}

.care-form-panel input,
.care-form-panel select,
.care-form-panel textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfdfd;
  color: var(--ink);
  outline: 0;
}

.care-form-panel input,
.care-form-panel select {
  min-height: 46px;
  padding: 10px 13px;
}

.care-form-panel textarea {
  padding: 13px;
  line-height: 1.65;
  resize: vertical;
}

.care-form-panel input:focus,
.care-form-panel select:focus,
.care-form-panel textarea:focus {
  border-color: rgba(19, 155, 143, 0.65);
  box-shadow: 0 0 0 4px rgba(19, 155, 143, 0.09);
}

.care-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Bộ chọn tự dựng dùng chung cho hai trang Hỗ trợ và Báo lỗi.

   Danh sách xổ xuống của thẻ <select> gốc do hệ điều hành vẽ, CSS gần như không
   chạm được vào. Nên hai ô cần danh sách đẹp — "Vấn đề cần hỗ trợ" và "Mức độ
   ảnh hưởng" — dựng lại bằng nút và một khối danh sách, theo đúng khuôn bộ chọn
   kích thước ở trang đặt in. Giá trị thật vẫn nằm trong một input ẩn cùng tên với
   trường cũ, nên phần đọc dữ liệu lúc gửi form không phải đổi gì.

   Mỗi mục mang một cặp màu riêng, khai báo qua --pick-ink và --pick-paper để chấm
   tròn, nền dòng đang chọn và dấu tích dùng chung một nguồn màu. */
.care-picker {
  position: relative;
}

/* Bốn mức độ ảnh hưởng lấy thẳng cặp màu từ nhóm .bug-severity mà trang quản trị
   dùng để hiển thị mức độ của phiếu, nên hai nơi nhìn vào là nhận ra nhau. */
.care-picker-option.is-low,
.care-picker[data-value="low"] .care-picker-trigger {
  --pick-ink: #557078;
  --pick-paper: #eaf1f2;
}

.care-picker-option.is-normal,
.care-picker[data-value="normal"] .care-picker-trigger {
  --pick-ink: #8a681d;
  --pick-paper: #fff4d6;
}

.care-picker-option.is-high,
.care-picker[data-value="high"] .care-picker-trigger {
  --pick-ink: #ad5d25;
  --pick-paper: #fff0df;
}

.care-picker-option.is-critical,
.care-picker[data-value="critical"] .care-picker-trigger {
  --pick-ink: #a53d46;
  --pick-paper: #ffe8ea;
}

/* Sáu nhóm vấn đề hỗ trợ lấy màu từ bộ năm chữ KROMADE, thêm một tông trung tính
   cho mục "Vấn đề khác". Mỗi nhóm một màu giúp người đọc nhận ra nhóm mình chọn
   mà không phải đọc lại cả dòng chữ. */
.care-picker-option.is-order,
.care-picker[data-value="order"] .care-picker-trigger {
  --pick-ink: #0e7783;
  --pick-paper: #ddf4f7;
}

.care-picker-option.is-payment,
.care-picker[data-value="payment"] .care-picker-trigger {
  --pick-ink: #8a6410;
  --pick-paper: #fdeecb;
}

.care-picker-option.is-status,
.care-picker[data-value="status"] .care-picker-trigger {
  --pick-ink: #0b8d82;
  --pick-paper: #d9f3ee;
}

.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;
}

.care-picker-option.is-other,
.care-picker[data-value="other"] .care-picker-trigger {
  --pick-ink: #5c6f76;
  --pick-paper: #eaf1f2;
}

/* Chưa chọn gì: chấm rỗng viền nét đứt và chữ nhạt, để ô nói rõ là còn trống chứ
   không giả vờ đã có giá trị. */
.care-picker:not([data-value]) .care-picker-trigger .care-picker-dot,
.care-picker[data-value=""] .care-picker-trigger .care-picker-dot {
  border: 2px dashed #c2d2d4;
  background: transparent;
}

.care-picker:not([data-value]) .care-picker-trigger .care-picker-dot::before,
.care-picker[data-value=""] .care-picker-trigger .care-picker-dot::before {
  display: none;
}

.care-picker:not([data-value]) .care-picker-trigger-copy strong,
.care-picker[data-value=""] .care-picker-trigger-copy strong {
  color: #8b989d;
  font-weight: 700;
}

.care-picker-trigger {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 7px 8px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #183f41;
  background: #fbfdfd;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}

.care-picker-trigger:hover,
.care-picker-trigger[aria-expanded="true"] {
  border-color: rgba(19, 155, 143, 0.65);
  background: #f6fdfb;
  box-shadow: 0 0 0 4px rgba(19, 155, 143, 0.09);
}

.care-picker-trigger:focus-visible {
  border-color: rgba(19, 155, 143, 0.65);
  outline: 3px solid rgba(20, 157, 145, 0.2);
  outline-offset: 2px;
}

/* Bấm gửi khi chưa chọn thì ô đỏ lên, cùng tông với hộp báo lỗi của form. */
.care-picker.is-missing .care-picker-trigger {
  border-color: rgba(201, 75, 75, 0.55);
  background: #fff6f6;
  box-shadow: 0 0 0 4px rgba(201, 75, 75, 0.1);
}

/* Chấm tròn có quầng cùng màu nhạt hơn, đủ để phân biệt bốn mức mà không biến ô
   nhập thành một mảng màu lớn. */
.care-picker-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background: var(--pick-paper, #eaf1f2);
}

.care-picker-dot::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pick-ink, #557078);
  content: "";
}

.care-picker-trigger-copy,
.care-picker-option-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.care-picker-trigger-copy strong,
.care-picker-option-copy strong {
  overflow: hidden;
  color: #244244;
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-picker-trigger-copy small,
.care-picker-option-copy small {
  overflow: hidden;
  color: #7c8b91;
  font-size: 0.66rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-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;
}

.care-picker-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.care-picker-trigger[aria-expanded="true"] .care-picker-arrow {
  color: #ffffff;
  background: var(--teal);
  transform: rotate(180deg);
}

.care-picker-menu {
  position: absolute;
  z-index: 14;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(19, 155, 143, 0.22);
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 22px 44px rgba(23, 62, 59, 0.16),
    0 2px 6px rgba(23, 62, 59, 0.06);
  animation: carePickerMenuIn 160ms ease;
}

.care-picker-menu[hidden] {
  display: none;
}

@keyframes carePickerMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.care-picker-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 7px 9px 7px 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.care-picker-option:hover,
.care-picker-option:focus-visible {
  border-color: rgba(19, 155, 143, 0.22);
  background: #f4fbfa;
  outline: none;
}

.care-picker-option[aria-selected="true"] {
  border-color: var(--pick-ink);
  background: var(--pick-paper);
}

.care-picker-option[aria-selected="true"] .care-picker-option-copy strong {
  color: var(--pick-ink);
}

.care-picker-option[aria-selected="true"] .care-picker-dot {
  background: #ffffff;
}

/* Dấu tích chỉ hiện ở dòng đang chọn, dựng bằng viền xoay như dấu tích ở thẻ
   thông tin trên hero. */
.care-picker-check {
  position: relative;
  width: 20px;
  height: 20px;
}

.care-picker-option[aria-selected="true"] .care-picker-check::after {
  position: absolute;
  top: 6px;
  left: 5px;
  width: 9px;
  height: 5px;
  border: 2px solid var(--pick-ink);
  border-top: 0;
  border-right: 0;
  content: "";
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .care-picker-menu {
    animation: none;
  }
}

/* Nút gửi form của hai trang này dùng chung khuôn với nút tra cứu đơn hàng và
   nút gửi đánh giá: ô icon vuông bo tròn, hai dòng chữ, mũi tên trượt sang phải
   khi rê chuột, và một vệt sáng quét ngang. Bản .is-quiet là biến thể nền trắng
   viền ngọc cho hành động phụ. */
.care-submit-button {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  overflow: hidden;
  padding: 8px 14px 8px 9px;
  border: 1px solid #08776f;
  border-radius: 17px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(135deg, #18aa9c 0%, #087b72 58%, #05665f 100%);
  box-shadow:
    0 14px 28px rgba(8, 123, 114, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.care-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;
}

.care-submit-button:hover:not(:disabled),
.care-submit-button:focus-visible {
  border-color: #055f59;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.26), transparent 40%),
    linear-gradient(135deg, #14a093 0%, #076f68 58%, #045a54 100%);
  box-shadow:
    0 18px 34px rgba(8, 123, 114, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  outline: none;
  transform: translateY(-2px);
}

.care-submit-button:hover:not(:disabled)::before {
  transform: rotate(18deg) translateX(420%);
}

.care-submit-button:focus-visible {
  outline: 3px solid rgba(20, 157, 145, 0.24);
  outline-offset: 3px;
}

.care-submit-button:active:not(:disabled) {
  box-shadow: 0 9px 18px rgba(8, 123, 114, 0.22);
  transform: translateY(0);
}

.care-submit-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.care-submit-glyph,
.care-submit-arrow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.care-submit-glyph {
  width: 22px;
  height: 22px;
}

.care-submit-arrow {
  width: 18px;
  height: 18px;
  transition: transform 180ms ease;
}

.care-submit-button:hover:not(:disabled) .care-submit-arrow {
  transform: translateX(3px);
}

.care-submit-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.care-submit-copy strong {
  overflow: hidden;
  font-family: var(--font-brand);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-submit-copy small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.58rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-submit-spinner {
  display: none;
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: careSubmitSpin 700ms linear infinite;
}

.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;
}

.care-submit-button:disabled,
.care-submit-button:disabled:hover {
  cursor: wait;
  border-color: #08776f;
  box-shadow: 0 10px 22px rgba(8, 123, 114, 0.16);
  opacity: 0.9;
  transform: none;
}

@keyframes careSubmitSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Bản .is-compact: nút gửi form chính, dài vừa đúng nội dung và chỉ một dòng
   chữ. Câu chú giải tách ra thành .care-form-note nằm bên trái, đúng như hàng
   nút gửi đánh giá — chú giải là thông tin cho cả form chứ không phải nhãn của
   riêng cái nút. */
.care-form-footer,
.order-lookup-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
}

.care-form-note,
.order-lookup-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;
}

.care-form-note svg,
.order-lookup-note svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--teal-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.care-submit-button.is-compact {
  grid-template-columns: 38px auto 18px;
  gap: 10px;
  width: auto;
  min-height: 56px;
  padding: 8px 15px 8px 9px;
}

.care-submit-button.is-compact .care-submit-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.care-submit-button.is-compact .care-submit-glyph {
  width: 20px;
  height: 20px;
}

.care-submit-label {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Nút tra cứu đơn hàng đi theo cùng một lối: dài vừa nội dung, một dòng chữ, câu
   chú giải tách ra bên trái. Bản gốc của nút này rộng hết khung nên phải gỡ cả
   grid co giãn lẫn class .full trong markup. */
.order-lookup-submit-button.is-compact {
  grid-template-columns: 38px auto 18px;
  width: auto;
  min-height: 56px;
  padding: 8px 16px 8px 9px;
}

/* Ô icon thu về 38px cho bằng hai nút gửi ở trang Hỗ trợ và Báo lỗi, để ba nút
   cùng một chiều cao. */
.order-lookup-submit-button.is-compact .order-lookup-submit-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.order-lookup-submit-button.is-compact .order-lookup-submit-search {
  width: 20px;
  height: 20px;
}

.order-lookup-submit-label {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* Khổ hẹp thì xếp dọc: chú giải trên, nút dưới và trải hết bề ngang cho dễ
     bấm bằng ngón tay. */
  .care-form-footer,
  .order-lookup-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .care-submit-button.is-compact,
  .order-lookup-submit-button.is-compact {
    width: 100%;
    justify-items: center;
  }

  .care-submit-button.is-compact {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
  }

  .order-lookup-submit-button.is-compact {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
  }

  .care-submit-button.is-compact .care-submit-icon,
  .order-lookup-submit-button.is-compact .order-lookup-submit-icon {
    justify-self: start;
  }

  .care-submit-button.is-compact .care-submit-arrow,
  .order-lookup-submit-button.is-compact .order-lookup-submit-arrow {
    justify-self: end;
  }
}

/* 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-lookup-panel {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  background:
    radial-gradient(circle at 100% 0, rgba(19, 155, 143, 0.11), transparent 30%),
    #ffffff;
}

/* Thẻ thay cho hai ô email và số điện thoại khi khách đã đăng nhập. */
.care-identity-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(20, 143, 132, 0.16);
  border-radius: 16px;
  background: #f2faf8;
}

.care-identity-card[hidden] {
  display: none;
}

.care-identity-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #06a189;
  background: #dbf2ed;
  font-family: var(--font-brand);
  font-size: 0.82rem;
  font-weight: 900;
}

.care-identity-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.care-identity-copy strong {
  color: #244244;
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 800;
}

.care-identity-copy small {
  overflow: hidden;
  color: #6b8188;
  font-size: 0.68rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-identity-link {
  color: #0b8d82;
  font-size: 0.68rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.care-identity-link:hover {
  text-decoration: underline;
}

/* Hai màn của khung "Mở cuộc trò chuyện": màn duyệt và màn cuộc trò chuyện, xếp
   chồng lên nhau trong một khung cao cố định. Áp cho cả khách đã đăng nhập lẫn
   khách vãng lai; chỉ khác nội dung màn duyệt — người đã đăng nhập thấy danh sách
   yêu cầu, khách vãng lai thấy form nhập mã hỗ trợ.

   Khung phải cao cố định thì lúc chuyển màn mới không giật, vì hai màn cao khác
   nhau. Chiều cao chọn đủ chứa cuộc trò chuyện; khi đang ở màn danh sách thì phần
   dưới để trống, đổi lại được hoạt ảnh trượt liền mạch.

   Cách ẩn hiện dùng visibility chứ không dùng display: display không chạy được
   hoạt ảnh. Độ trễ visibility đúng bằng thời lượng trượt, để màn đi ra vẫn nhìn
   thấy suốt quãng đường của nó. */
.care-lookup-panel.has-screens {
  position: relative;
  height: clamp(540px, 68vh, 680px);
  padding: 0;
  overflow: hidden;
}

/* Hai màn phủ kín khung (inset: 0) chứ không thụt vào theo lề của khung. Đây là
   điều kiện để translateY(100%) đẩy màn ra đúng hết một chiều cao khung: nếu còn
   thụt lề, phần trên của màn đang chờ sẽ ló ra ở dải lề dưới.

   Trượt thuần bằng transform, không kèm mờ dần: mờ dần làm màn đi ra biến mất
   giữa đường, nhìn không còn ra động tác trượt nữa. */
.care-lookup-panel.has-screens > .care-lookup-browse,
.care-lookup-panel.has-screens > .care-result {
  position: absolute;
  inset: 0;
  visibility: visible;
  will-change: transform;
  transition:
    transform 420ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s;
}

.care-lookup-panel.has-screens > .care-lookup-browse {
  padding: clamp(24px, 4vw, 38px);
  overflow-y: auto;
}

/* Chỉ màn đang khuất mới hoãn visibility, và hoãn đúng bằng thời lượng trượt để
   nó còn nhìn thấy suốt quãng đường đi ra. Màn đang vào thì hiện ngay từ đầu.

   Hai selector dưới đây phải loại trừ nhau chặt chẽ: mỗi màn chỉ được dính rule
   này đúng lúc nó khuất. Nếu để selector của màn trò chuyện khớp cả khi đang mở
   (thiếu :not) thì độ hoãn 420ms vẫn còn hiệu lực lúc mở, ô trò chuyện trượt lên
   trong trạng thái vô hình rồi mới bật ra ở cuối — nhìn thành hiện đột ngột. */
.care-lookup-panel.has-screens:not(.has-open-chat) > .care-result,
.care-lookup-panel.has-screens.has-open-chat > .care-lookup-browse {
  visibility: hidden;
  transition:
    transform 420ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 420ms;
}

/* Màn trò chuyện chờ sẵn dưới mép khung, màn danh sách lùi lên trên khi nhường
   chỗ. */
.care-lookup-panel.has-screens:not(.has-open-chat) > .care-result {
  transform: translateY(100%);
}

.care-lookup-panel.has-screens.has-open-chat > .care-lookup-browse {
  transform: translateY(-100%);
}

/* Ở chế độ này thẻ trò chuyện đóng vai một màn phủ kín khung, nên bỏ viền, bo góc
   và đổ bóng riêng của nó — khung ngoài đã có sẵn. Phần lịch sử tin nhắn co giãn
   theo chỗ còn lại sau khi trừ phần đầu và khung soạn. */
.care-lookup-panel.has-screens > .care-chat-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.care-lookup-panel.has-screens > .care-chat-error {
  padding: clamp(24px, 4vw, 38px);
  background: #ffffff;
}

.care-lookup-panel.has-screens .care-chat-history {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.care-chat-error {
  display: grid;
  gap: 12px;
  justify-items: start;
  align-content: center;
}

@media (max-width: 620px) {
  .care-lookup-panel.has-screens {
    height: clamp(480px, 76vh, 620px);
  }
}

/* Nút đóng cuộc trò chuyện, cùng khuôn với nút làm mới bên cạnh. */
.care-chat-close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(20, 143, 132, 0.16);
  border-radius: 11px;
  background: #ffffff;
  color: #5c7176;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(33, 89, 84, 0.07);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.care-chat-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.care-chat-close:hover,
.care-chat-close:focus-visible {
  border-color: #e6a99a;
  color: #b5573f;
  background: #fff5f2;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .care-lookup-panel.has-screens > .care-lookup-browse,
  .care-lookup-panel.has-screens > .care-result {
    transition: visibility 0s;
  }
}

/* Danh sách yêu cầu của khách đã đăng nhập, đặt ngay trong khung mở trò chuyện. */
.care-my-requests {
  display: grid;
  gap: 12px;
}

.care-my-requests[hidden] {
  display: none;
}

.care-my-requests-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: #385157;
  font-size: 0.76rem;
  font-weight: 800;
}

.care-my-requests-title b {
  padding: 2px 8px;
  border-radius: 999px;
  background: #dbf2ed;
  color: #06a189;
  font-size: 0.66rem;
}

.care-my-requests-empty {
  margin: 0;
  color: #7c8b91;
  font-size: 0.74rem;
  line-height: 1.6;
}

.care-my-requests-group {
  display: grid;
  gap: 7px;
}

.care-my-requests-group-label {
  margin: 0;
  color: #8b989d;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.care-request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(20, 143, 132, 0.14);
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.care-request-row:hover,
.care-request-row:focus-visible {
  border-color: rgba(19, 155, 143, 0.5);
  background: #f6fdfb;
  outline: none;
  transform: translateY(-1px);
}

.care-request-row.is-loading {
  cursor: wait;
  opacity: 0.6;
}

.care-request-row-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.care-request-row-copy strong {
  overflow: hidden;
  color: #244244;
  font-family: var(--font-brand);
  font-size: 0.76rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-request-row-copy small {
  overflow: hidden;
  color: #7c8b91;
  font-size: 0.64rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-lookup-note {
  padding: 15px;
  border-radius: 15px;
  background: #f0f8f6;
}

.care-lookup-note strong {
  color: #385257;
  font-size: 0.78rem;
}

.care-lookup-note p {
  margin: 5px 0 0;
  color: #728087;
  font-size: 0.72rem;
  line-height: 1.6;
}

.care-result {
  padding: 16px;
  border: 1px solid rgba(19, 155, 143, 0.18);
  border-radius: 16px;
  background: #edf9f6;
  color: #385257;
}

.care-result[hidden] {
  display: none;
}

.care-result.is-error {
  border-color: rgba(201, 75, 75, 0.2);
  background: #fff1f1;
  color: #a23f3f;
  font-size: 0.78rem;
  font-weight: 700;
}

.care-result-kicker {
  display: block;
  color: var(--teal-dark);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.care-result > strong {
  display: block;
  margin-top: 5px;
  color: #183f3d;
  font-family: var(--font-brand);
  font-size: 1.35rem;
}

.care-result > p {
  margin: 8px 0 12px;
  font-size: 0.76rem;
  line-height: 1.65;
}

.care-status,
.bug-severity {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2f4;
  color: #617078;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}

.care-status.is-new {
  color: #9a6b13;
  background: #fff4d6;
}

.care-status.is-in_progress {
  color: #456db0;
  background: #eaf1ff;
}

.care-status.is-reviewing {
  color: #7556a8;
  background: #f0eaff;
}

/* Hoàn thành dùng chung sắc ngọc với trạng thái "đã sửa" của phiếu báo lỗi. */
.care-status.is-closed,
.care-status.is-fixed {
  color: var(--teal-dark);
  background: #dff6f1;
}

.care-ticket-meta,
.admin-care-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 15px 0;
}

.care-ticket-meta div,
.admin-care-contact div {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.care-ticket-meta dt,
.admin-care-contact dt {
  color: #859298;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.care-ticket-meta dd,
.admin-care-contact dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #40565c;
  font-size: 0.72rem;
  font-weight: 700;
}

.care-message-block,
.admin-care-message {
  padding: 14px;
  border-radius: 14px;
  background: #ffffff;
}

.care-message-block > span,
.admin-care-message > span,
.admin-care-page-url > span {
  color: #7b898f;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.care-message-block p,
.admin-care-message p {
  margin: 7px 0 0;
  color: #4f6268;
  font-size: 0.78rem;
  line-height: 1.72;
  white-space: pre-wrap;
}

/* Cùng nền giấy với hero trang Hỗ trợ, chỉ đổi vệt màu góc trên phải sang hồng
   san hô để trang báo lỗi có sắc riêng mà vẫn cùng một họ. */
.bug-care-hero {
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 216, 126, 0.18), transparent 22%),
    radial-gradient(circle at 92% 8%, rgba(239, 100, 97, 0.16), transparent 26%),
    radial-gradient(circle at 84% 96%, rgba(131, 109, 204, 0.12), transparent 25%),
    linear-gradient(135deg, #e4f8f4 0%, #f5fcfa 50%, #fff7f4 100%);
}

/* Cùng cách với khung ba bước bên trang Hỗ trợ: thẻ co vừa nội dung, ba dòng bên
   trong kéo dài hết thẻ. */
.bug-hero-card {
  display: grid;
  justify-self: start;
  gap: 9px;
  max-width: 100%;
  padding: 22px;
  border: 1px solid rgba(20, 143, 132, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(33, 89, 84, 0.07);
}

.bug-hero-card span {
  color: #0b8d82;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* Dấu tích dựng bằng hai nét viền xoay 45 độ, không cần thêm SVG vào markup. */
.bug-hero-card strong {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 11px 13px;
  border-radius: 14px;
  background: #f1faf8;
  color: #3f585e;
  font-family: var(--font-brand);
  font-size: 0.81rem;
  font-weight: 800;
}

.bug-hero-card strong::before {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d7f1ec;
  content: "";
}

.bug-hero-card strong::after {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 8px;
  height: 4px;
  border: 2px solid #0b8d82;
  border-top: 0;
  border-right: 0;
  content: "";
  transform: translateY(-70%) rotate(-45deg);
}

.bug-form-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.bug-privacy-note {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: grid;
  gap: 18px;
  padding: 26px;
}

.bug-note-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: #fff0f0;
  color: #b84e4e;
  font-family: var(--font-brand);
  font-size: 1.4rem;
  font-weight: 900;
}

.bug-privacy-note strong {
  color: #344d53;
  font-size: 0.8rem;
}

.bug-privacy-note p {
  margin: 5px 0 0;
  color: #6f7f85;
  font-size: 0.72rem;
  line-height: 1.65;
}

.bug-privacy-note a {
  text-decoration: none;
}

.admin-care-page {
  min-height: 100vh;
  background: var(--paper-soft);
}

.admin-care-app {
  width: min(1240px, calc(100% - 28px));
}

.admin-care-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 18px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
}

.admin-care-tabs {
  width: min(520px, 100%);
}

.admin-care-tabs button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.admin-care-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  padding-inline: 6px;
  border-radius: 999px;
  background: rgba(19, 155, 143, 0.1);
  font-size: 0.65rem;
}

.admin-care-panel {
  padding: clamp(18px, 3vw, 30px);
}

.admin-care-panel[hidden] {
  display: none;
}

.admin-care-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}

.admin-care-panel-heading h2 {
  margin: 5px 0 0;
  font-family: var(--font-brand);
}

.admin-care-panel-heading > p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  text-align: right;
}

.admin-care-list {
  display: grid;
  gap: 14px;
}

.admin-care-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfdfd;
}

.admin-care-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}

.admin-care-card-heading h3 {
  margin: 5px 0 0;
  color: #2c444a;
  font-family: var(--font-brand);
}

.admin-care-code {
  color: var(--teal-dark);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-care-contact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.admin-care-contact div {
  background: #f1f7f6;
}

.admin-care-message {
  border: 1px solid rgba(19, 155, 143, 0.1);
}

.admin-care-editor {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-radius: 16px;
  background: #edf7f5;
}

.admin-care-reply-field textarea {
  min-height: 118px;
}

.bug-severity.is-low {
  color: #557078;
  background: #eaf1f2;
}

.bug-severity.is-normal {
  color: #8a681d;
  background: #fff4d6;
}

.bug-severity.is-high {
  color: #ad5d25;
  background: #fff0df;
}

.bug-severity.is-critical {
  color: #a53d46;
  background: #ffe8ea;
}

.admin-care-page-url {
  display: grid;
  gap: 6px;
}

.admin-care-page-url code,
.admin-bug-browser code {
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border-radius: 11px;
  background: #eef3f4;
  color: #52666d;
  font-size: 0.7rem;
}

.admin-bug-browser summary {
  color: #557078;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-bug-browser code {
  display: block;
  margin-top: 9px;
}

@media (max-width: 900px) {
  .care-hero,
  .care-layout,
  .bug-form-layout {
    grid-template-columns: 1fr;
  }

  .care-lookup-panel,
  .bug-privacy-note {
    position: static;
  }

  .admin-care-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-care-editor {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .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-hero {
    padding: 30px 22px 26px;
    border-radius: 26px;
  }

  /* Dải ba màu kéo về sát góc theo đúng khoảng lề mới của hero ở khổ này, và
     vòng tròn trang trí thu lại cho vừa khung hẹp. */
  .care-hero::before {
    top: 22px;
    right: 22px;
    width: 46px;
    height: 7px;
  }

  .care-hero::after {
    bottom: -64px;
    left: -44px;
    width: 158px;
    height: 158px;
    border-width: 28px;
  }

  .care-hero h1 {
    font-size: clamp(2rem, 10.4vw, 2.9rem);
  }

  .care-hero-lead {
    font-size: 0.85rem;
  }

  .care-submit-button {
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    min-height: 58px;
    border-radius: 15px;
  }

  .care-submit-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .care-submit-glyph {
    width: 20px;
    height: 20px;
  }

  .care-field-grid,
  .care-ticket-meta,
  .admin-care-contact {
    grid-template-columns: 1fr;
  }

  .care-form-panel {
    padding: 22px;
    border-radius: 22px;
  }

  .admin-care-toolbar,
  .admin-care-panel-heading {
    display: grid;
    align-items: stretch;
  }

  .admin-care-panel-heading > p {
    text-align: left;
  }

  .admin-care-card-heading,
  .care-ticket-heading {
    display: grid;
  }
}

/* Conversational customer support */
/* Ô trò chuyện dựng theo cùng ngôn ngữ với các panel khác của trang: bo góc lớn,
   viền ngọc nhạt, phần đầu là nền giấy ba vệt màu như hero, và dùng lại cặp
   eyebrow cộng nhãn trạng thái quen thuộc. */
.care-chat-card {
  padding: 0;
  overflow: hidden;
  border-color: rgba(20, 143, 132, 0.16);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(33, 89, 84, 0.1);
}

.care-chat-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(20, 143, 132, 0.12);
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 216, 126, 0.16), transparent 26%),
    radial-gradient(circle at 94% 6%, rgba(131, 109, 204, 0.1), transparent 28%),
    linear-gradient(135deg, #e7f9f5 0%, #f6fdfb 55%, #fffaf4 100%);
}

.care-chat-identity {
  display: flex;
  min-width: 0;
  gap: 11px;
  align-items: center;
}

.care-chat-avatar,
.care-chat-mini-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #18b4a4, #087b73);
  color: #ffffff;
  font-family: var(--font-brand);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(9, 128, 118, 0.2);
}

/* Icon tai nghe hỗ trợ: dạng vành tai nghe cộng cần micro, đúng hình mà các bộ
   icon nét phổ biến hiện nay dùng cho tổng đài viên. Cùng họ với các icon khác
   của trang, nên nét và cách bo đầu nét khớp sẵn. */
.care-chat-avatar {
  width: 42px;
  height: 42px;
}

.care-chat-avatar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.care-chat-mini-avatar {
  border-radius: 9px;
}

.care-chat-mini-avatar {
  width: 26px;
  height: 26px;
  margin-top: auto;
  font-size: 0.48rem;
}

.care-chat-mini-avatar svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.care-chat-identity > div {
  min-width: 0;
}

.care-chat-identity strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #294a4c;
  font-family: var(--font-brand);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.care-chat-identity small {
  display: block;
  margin-top: 3px;
  color: #789091;
  font-size: 0.62rem;
  font-weight: 700;
}

.care-chat-kicker {
  margin: 0;
  font-size: 0.6rem;
}

.care-chat-header-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
}

.care-chat-refresh {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(20, 143, 132, 0.16);
  border-radius: 11px;
  background: #ffffff;
  color: #0b8d82;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(33, 89, 84, 0.07);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.care-chat-refresh svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.care-chat-refresh:hover {
  border-color: #63beb5;
  background: #f0fbf8;
  transform: rotate(30deg);
}

.care-chat-refresh.is-loading {
  animation: care-chat-spin 800ms linear infinite;
}

@keyframes care-chat-spin {
  to { transform: rotate(360deg); }
}

.care-chat-history,
.admin-support-chat-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 330px;
  max-height: 480px;
  padding: 18px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 12% 8%, rgba(42, 192, 173, 0.07), transparent 24%),
    radial-gradient(circle at 88% 96%, rgba(246, 200, 82, 0.06), transparent 22%),
    #f5faf9;
}

.care-chat-date {
  align-self: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(77, 104, 106, 0.08);
  color: #829091;
  font-size: 0.58rem;
  font-weight: 800;
}

.care-chat-row {
  display: flex;
  width: 100%;
  gap: 7px;
  align-items: end;
}

.care-chat-row.is-customer {
  justify-content: flex-end;
}

.care-chat-row.is-company {
  justify-content: flex-start;
}

.care-chat-bubble {
  width: fit-content;
  max-width: min(82%, 560px);
  padding: 11px 13px 8px;
  border: 1px solid rgba(20, 143, 132, 0.12);
  border-radius: 18px 18px 18px 6px;
  background: #ffffff;
  color: #40575a;
  box-shadow: 0 6px 18px rgba(33, 89, 84, 0.06);
}

.care-chat-row.is-customer .care-chat-bubble {
  border-color: transparent;
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(145deg, #16a99a, #0c8f85);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(12, 143, 133, 0.2);
}

.care-chat-bubble > span {
  display: block;
  margin-bottom: 3px;
  color: #168f85;
  font-size: 0.58rem;
  font-weight: 900;
}

.care-chat-row.is-customer .care-chat-bubble > span {
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
}

.care-chat-bubble p {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.74rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.care-chat-bubble time {
  display: block;
  margin-top: 4px;
  color: #93a0a1;
  font-size: 0.52rem;
  text-align: right;
}

.care-chat-row.is-customer .care-chat-bubble time {
  color: rgba(255, 255, 255, 0.7);
}

/* Dòng báo đã tiếp nhận: nằm giữa luồng tin nhắn như một thông báo hệ thống, chứ
   không phải bong bóng của bên nào. */
.care-chat-notice {
  align-self: center;
  max-width: min(88%, 420px);
  margin: 2px 0;
  padding: 9px 14px;
  border: 1px dashed rgba(20, 143, 132, 0.28);
  border-radius: 14px;
  background: rgba(223, 246, 241, 0.6);
  color: #4a6b6b;
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.55;
  text-align: center;
}

.care-chat-empty {
  margin: auto;
  color: #819091;
  font-size: 0.72rem;
  text-align: center;
}

/* Dùng lưới hai cột thay cho flex: khung soạn là thẻ <form> nằm trong
   .care-form-panel, mà panel đó có rule ".care-form-panel form { display: grid }"
   đặc hiệu hơn nên flex ở đây không bao giờ thắng. Viết thẳng thành lưới thì cột
   thứ hai auto cho nút dài vừa nội dung. */
.care-chat-composer,
.admin-care-chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid rgba(20, 143, 132, 0.12);
  background: #ffffff;
}

/* Chiều cao do JS đặt theo nội dung, giới hạn bằng max-height. resize: none vì
   kéo tay xong thì lần gõ tiếp theo cũng bị ghi đè, để lại thì gây hiểu nhầm. */
.care-chat-composer textarea,
.admin-care-chat-composer textarea {
  min-width: 0;
  min-height: 46px;
  max-height: 148px;
  margin: 0;
  padding: 12px 14px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 15px;
  outline: none;
  background: #fbfdfd;
  color: #314d50;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.45;
}

.care-chat-composer textarea:focus,
.admin-care-chat-composer textarea:focus {
  border-color: rgba(13, 148, 137, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 148, 137, 0.09);
}

/* Nút gửi dùng lại khuôn nút gửi form của trang: ô icon vuông bo tròn rồi tới
   nhãn, dài vừa đúng nội dung nên không kéo theo bề ngang của khung soạn. */
.care-chat-composer button {
  display: inline-grid;
  grid-template-columns: 30px auto;
  gap: 9px;
  align-items: center;
  width: auto;
  min-height: 46px;
  padding: 8px 15px 8px 8px;
  border: 1px solid #08776f;
  border-radius: 15px;
  color: #ffffff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(135deg, #18aa9c 0%, #087b72 58%, #05665f 100%);
  cursor: pointer;
  box-shadow:
    0 12px 24px rgba(8, 123, 114, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font: inherit;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.care-chat-composer button:hover:not(:disabled),
.care-chat-composer button:focus-visible {
  border-color: #055f59;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.26), transparent 40%),
    linear-gradient(135deg, #14a093 0%, #076f68 58%, #045a54 100%);
  box-shadow:
    0 16px 30px rgba(8, 123, 114, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  outline: none;
  transform: translateY(-2px);
}

.care-chat-composer button:active:not(:disabled) {
  box-shadow: 0 8px 16px rgba(8, 123, 114, 0.22);
  transform: translateY(0);
}

.care-chat-send-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  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.12);
}

.care-chat-send-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.care-chat-composer button strong {
  font-family: var(--font-brand);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.care-chat-composer button:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.care-chat-closed,
.admin-chat-closed {
  padding: 13px 16px;
  border-top: 1px solid rgba(17, 131, 121, 0.1);
  background: #f1f5f4;
  color: #758486;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

.care-chat-send-error {
  grid-column: 1 / -1;
  margin: 0;
  color: #ae4444;
  font-size: 0.62rem;
  font-weight: 700;
}

.admin-support-chat {
  overflow: hidden;
  border: 1px solid rgba(17, 131, 121, 0.14);
  border-radius: 17px;
  background: #ffffff;
}

.admin-support-chat-history {
  min-height: 240px;
  max-height: 430px;
}

.admin-care-chat-composer .primary-button {
  flex: 0 0 auto;
  min-height: 43px;
}

.admin-chat-status-tools {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: flex-end;
  padding: 12px 14px;
  border-radius: 15px;
  background: #edf7f5;
}

.admin-chat-status-tools .upload-field {
  width: min(290px, 100%);
}

.admin-chat-status-tools .secondary-button {
  min-height: 42px;
}

@media (max-width: 620px) {
  .care-chat-header {
    align-items: flex-start;
  }

  /* Nhãn trạng thái xuống hàng riêng, còn hai nút tròn giữ nguyên một hàng bên
     dưới — trước đây khối này là lưới một cột nên nút đóng mới thêm bị đẩy xuống
     thành hàng thứ ba. */
  .care-chat-header-actions {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, auto);
    justify-content: end;
    justify-items: end;
  }

  .care-chat-header-actions .care-status {
    grid-column: 1 / -1;
  }

  .care-chat-header .care-status {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .care-chat-history {
    min-height: 360px;
    max-height: 62vh;
  }

  .care-chat-bubble {
    max-width: 88%;
  }

  .care-chat-composer {
    position: sticky;
    bottom: 0;
  }

  /* Khổ hẹp hạ trần chiều cao ô nhập, để khung soạn dính đáy không ăn hết phần
     lịch sử tin nhắn khi khách gõ dài. */
  .care-chat-composer textarea {
    max-height: 108px;
  }

  /* Nút gửi ở khổ hẹp vẫn giữ ô icon và nhãn, chỉ bóp lại khoảng đệm. Trước đây
     khổ này ẩn <span> đi để còn một nút tròn, nhưng ô icon của nút mới cũng là
     <span> nên rule đó làm nút mất icon và bị co lại còn 43px. */
  .care-chat-composer button {
    grid-template-columns: 26px auto;
    gap: 7px;
    padding: 8px 12px 8px 7px;
    border-radius: 13px;
  }

  .care-chat-send-icon {
    width: 26px;
    height: 26px;
    border-radius: 9px;
  }

  .care-chat-send-icon svg {
    width: 15px;
    height: 15px;
  }

  .admin-care-chat-composer,
  .admin-chat-status-tools {
    display: grid;
    align-items: stretch;
  }

  .admin-care-chat-composer .primary-button,
  .admin-chat-status-tools .upload-field,
  .admin-chat-status-tools .secondary-button {
    width: 100%;
  }
}

/* Shared admin filters */
.admin-filter-bar {
  display: grid;
  gap: 13px;
  margin: 0 0 18px;
  padding: 15px;
  border: 1px solid rgba(19, 151, 143, 0.18);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(46, 197, 178, 0.08), transparent 38%),
    #ffffff;
  box-shadow: 0 12px 34px rgba(37, 84, 81, 0.07);
}

.admin-filter-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.admin-filter-heading > div {
  display: grid;
  gap: 4px;
}

.admin-filter-heading strong {
  color: #3a5557;
  font-size: 0.74rem;
}

/* Hai nút sắp xếp đơn theo lúc đặt. Dạng công tắc hai vế nên chỉ một vế sáng,
   nhìn là biết đang xếp kiểu nào mà không cần đọc. */
/* Phải viết kèm phần tử cha: luật ".admin-filter-heading > div" đã đặt sẵn
   display:grid cho mọi ô con của hàng tiêu đề, và nó thắng một selector chỉ có
   một lớp — nút sắp xếp sẽ rơi xuống dòng dưới nút "Hiển thị tất cả". */
.admin-filter-heading > .admin-filter-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.admin-sort-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}

.admin-sort-toggle button {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.67rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.admin-sort-toggle button:hover {
  color: var(--ink);
}

.admin-sort-toggle button.is-active {
  background: var(--teal);
  color: #fff;
}

@media (max-width: 640px) {
  .admin-filter-heading {
    flex-wrap: wrap;
  }

  .admin-filter-heading > .admin-filter-heading-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.admin-filter-reset {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  cursor: pointer;
  font: inherit;
  font-size: 0.67rem;
  font-weight: 900;
}

.admin-filter-reset:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 4px;
}

.admin-filter-chips button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  min-height: 37px;
  padding: 7px 10px 7px 13px;
  border: 1px solid #dce9e7;
  border-radius: 999px;
  background: #f8fbfa;
  color: #607477;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.admin-filter-chips button:hover {
  border-color: rgba(13, 143, 132, 0.3);
  color: var(--teal-dark);
  transform: translateY(-1px);
}

.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 span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(20, 127, 118, 0.09);
  font-size: 0.59rem;
  font-weight: 900;
}

.admin-filter-chips button.is-active span {
  background: rgba(255, 255, 255, 0.2);
}

.admin-care-filter-bar {
  margin-top: 2px;
  box-shadow: none;
}

.manager-page .upload-hero-summary {
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  min-width: min(590px, 100%);
}

.manager-sync-badge.is-source-customer_upload {
  background: #a56822;
}

.manager-sync-badge.is-source-reference {
  background: #805bb0;
}

.manager-card-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  text-decoration: none;
}

.manager-linked-asset-note {
  align-self: center;
  color: #78888a;
  font-size: 0.59rem;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .manager-page .upload-hero-summary {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .admin-filter-bar {
    margin-bottom: 14px;
    padding: 13px;
    border-radius: 16px;
  }

  .admin-filter-heading {
    align-items: end;
  }

  .admin-filter-chips {
    margin-inline: -13px;
    padding-inline: 13px;
  }

  .admin-filter-chips button {
    min-height: 35px;
    font-size: 0.64rem;
  }

  .manager-page .upload-hero-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 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-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,
.feedback-feed-toolbar h2 {
  margin: 2px 0 4px;
  font-family: var(--font-brand);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.feedback-stories-heading > div > span,
.feedback-feed-toolbar > 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 {
  display: flex;
  max-width: 100%;
  gap: 7px;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.feedback-filters::-webkit-scrollbar {
  display: none;
}

.feedback-filters button {
  display: inline-flex;
  min-height: 36px;
  gap: 7px;
  align-items: center;
  padding: 6px 8px 6px 12px;
  border: 1px solid #d5e4e3;
  border-radius: 999px;
  color: #526a70;
  background: #ffffff;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.feedback-filters button strong {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: inherit;
  background: #eef4f4;
  font-size: 0.58rem;
}

.feedback-filters button:hover,
.feedback-filters button:focus-visible {
  border-color: #83c8c0;
  color: var(--teal-dark);
  outline: none;
  transform: translateY(-1px);
}

.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;
}

.feedback-feed-card:not(.is-account-feedback) .feedback-card-footer {
  justify-content: flex-end;
}

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;
  }
}

/* Customer action buttons: lookup, protected-account notice, feedback and logout */
.order-lookup-submit-button {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  min-height: 64px;
  overflow: hidden;
  padding: 8px 14px 8px 9px;
  border: 1px solid #08776f;
  border-radius: 17px;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(135deg, #18aa9c 0%, #087b72 58%, #05665f 100%);
  box-shadow:
    0 14px 28px rgba(8, 123, 114, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-align: left;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.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),
.order-lookup-submit-button:focus-visible {
  border-color: #055f59;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.26), transparent 40%),
    linear-gradient(135deg, #14a093 0%, #076f68 58%, #045a54 100%);
  box-shadow:
    0 18px 34px rgba(8, 123, 114, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  outline: none;
  transform: translateY(-2px);
}

.order-lookup-submit-button:hover:not(:disabled)::before,
.feedback-submit-button:hover:not(:disabled)::before {
  transform: rotate(18deg) translateX(420%);
}

.order-lookup-submit-button:active:not(:disabled) {
  box-shadow: 0 9px 18px rgba(8, 123, 114, 0.22);
  transform: translateY(0);
}

.order-lookup-submit-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.order-lookup-submit-search,
.order-lookup-submit-arrow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.order-lookup-submit-search {
  width: 22px;
  height: 22px;
}

.order-lookup-submit-arrow {
  width: 18px;
  height: 18px;
  transition: transform 180ms ease;
}

.order-lookup-submit-button:hover:not(:disabled) .order-lookup-submit-arrow {
  transform: translateX(3px);
}

.order-lookup-submit-button .order-lookup-spinner {
  display: none;
  width: 19px;
  height: 19px;
  border-width: 2px;
}

.order-lookup-submit-button.is-loading .order-lookup-submit-search {
  display: none;
}

.order-lookup-submit-button.is-loading .order-lookup-spinner {
  display: block;
}

.order-lookup-submit-button:disabled,
.order-lookup-submit-button:disabled:hover {
  cursor: wait;
  border-color: #08776f;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(135deg, #18aa9c, #087b72);
  box-shadow: 0 10px 22px rgba(8, 123, 114, 0.18);
  opacity: 0.78;
  transform: none;
}

.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;
  }

  .order-lookup-submit-button {
    min-height: 60px;
  }

  .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-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.25), transparent 38%),
    linear-gradient(145deg, #31bcae, #087a72);
  box-shadow:
    0 7px 15px rgba(8, 122, 114, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sample-more-link-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.sample-more-link-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sample-more-link-copy strong {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.sample-more-link-copy strong {
  font-family: var(--font-brand);
  font-size: 0.68rem;
}

.sample-more-link-arrow {
  display: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.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;
}

.source-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.size-picker-trigger {
  display: grid;
  grid-template-columns: 38px 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: 38px;
  height: 38px;
  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: 20px;
  height: 20px;
  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) {
  .source-row {
    grid-template-columns: 1fr;
  }

  .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;
}

body[data-page="order"] .intro-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-family: var(--font-brand);
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease,
    transform 170ms ease;
}

body[data-page="order"] .intro-action > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 0.88rem;
  line-height: 1;
}

body[data-page="order"] .intro-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="order"] .intro-action:hover,
body[data-page="order"] .intro-action:focus-visible {
  outline: none;
  transform: translateY(-2px);
}

/* 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: 23px;
  height: 23px;
}

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-action {
    width: 100%;
  }

  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);
}

.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);
  animation: pageLoaderProgress 1.25s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.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: translateX(-115%);
  }
  to {
    transform: translateX(320%);
  }
}

@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;
}

.manager-editor-close {
  position: relative;
  top: auto;
  right: auto;
}

: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;
}

body[data-page="about"] .about-landing {
  --about-ink: #142d35;
  --about-deep: #10282f;
  --about-teal: #0b8d82;
  --about-cyan: #35b9c7;
  --about-magenta: #ec6386;
  --about-violet: #8069d7;
  --about-cream: #fff7df;
  width: 100%;
  overflow: clip;
  color: var(--about-ink);
}

.about-landing a:focus-visible {
  outline: 3px solid rgba(53, 185, 199, 0.45);
  outline-offset: 4px;
}

.about-hero {
  position: relative;
  width: min(1536px, calc(100% - clamp(20px, 3.5vw, 56px)));
  min-height: clamp(650px, calc(100svh - var(--header-h) - 18px), 850px);
  margin: clamp(10px, 1.5vw, 22px) auto 0;
  overflow: hidden;
  border-radius: clamp(22px, 3vw, 38px);
  background: #24383d;
  box-shadow: 0 28px 80px rgba(18, 51, 55, 0.18);
  isolation: isolate;
}

.about-hero::before {
  position: absolute;
  z-index: -1;
  top: clamp(76px, 12vw, 150px);
  left: clamp(-82px, -5vw, -46px);
  width: clamp(210px, 22vw, 350px);
  aspect-ratio: 1;
  border: clamp(38px, 5vw, 78px) solid rgba(53, 185, 199, 0.2);
  border-radius: 50%;
  content: "";
}

.about-hero::after {
  position: absolute;
  z-index: 1;
  top: 34px;
  right: 34px;
  width: 88px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--about-cyan) 0 31%, var(--about-magenta) 31% 65%, var(--ka-yellow) 65%);
  box-shadow: 0 8px 22px rgba(16, 40, 47, 0.18);
  content: "";
}

.about-kicker {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--about-teal);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-kicker::before {
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.about-kicker-light {
  color: rgba(255, 255, 255, 0.84);
}

.about-kicker-light::before {
  display: none;
}

.about-hero h1 {
  max-width: 13ch;
  margin: 18px 0 22px;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: clamp(3.3rem, 6.2vw, 6.3rem);
  font-weight: 900;
  letter-spacing: -0.057em;
  line-height: 0.92;
  text-wrap: balance;
}

.about-hero h1 em {
  display: inline-block;
  color: var(--ka-yellow);
  font-style: normal;
  transform: rotate(-1.5deg);
}

.about-hero-actions,
.about-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 30px;
}

.about-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 850;
  text-decoration: none;
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.about-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.about-button:hover {
  transform: translateY(-3px);
}

.about-section {
  width: min(1280px, calc(100% - clamp(30px, 7vw, 96px)));
  margin-inline: auto;
  padding-top: clamp(94px, 12vw, 164px);
}

.about-section-index {
  margin-bottom: 24px;
  color: #8b999e;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-story {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}

.about-story > .about-section-index {
  grid-column: 1 / -1;
  margin-bottom: -4px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dce6e4;
}

.about-story-heading h2,
.about-section-topline h2,
.about-visit-copy h2,
.about-capabilities-heading h2,
.about-team-copy h2,
.about-final-cta h2 {
  margin: 14px 0 0;
  color: var(--about-ink);
  font-family: var(--font-brand);
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -0.052em;
  line-height: 1;
  text-wrap: balance;
}

.about-story-heading h2 span,
.about-visit-copy h2 span {
  position: relative;
  z-index: 0;
  color: var(--about-teal);
  white-space: nowrap;
}

.about-story-heading h2 span::after,
.about-visit-copy h2 span::after {
  position: absolute;
  z-index: -1;
  right: -5px;
  bottom: 5px;
  left: -5px;
  height: 12px;
  border-radius: 999px;
  background: rgba(246, 200, 82, 0.55);
  content: "";
  transform: rotate(-2deg);
}

.about-story-copy {
  padding-top: 38px;
}

.about-story-copy > p,
.about-section-topline > p,
.about-visit-copy > p,
.about-capabilities-heading > p,
.about-team-copy > p {
  margin: 0;
  color: #5d7077;
  line-height: 1.84;
}

.about-story-copy .about-story-lead,
.about-visit-copy .about-visit-lead {
  margin-bottom: 18px;
  color: #27464e;
  font-size: clamp(1.05rem, 1.7vw, 1.27rem);
  font-weight: 650;
  line-height: 1.68;
}

.about-story-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.about-story-pills span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid #d9e9e6;
  border-radius: 999px;
  color: #456269;
  background: #ffffff;
  font-size: 0.68rem;
  font-weight: 750;
  box-shadow: 0 8px 22px rgba(23, 67, 65, 0.05);
}

.about-story-pills i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--about-cyan);
}

.about-story-pills span:nth-child(2) i {
  background: var(--about-magenta);
}

.about-story-pills span:nth-child(3) i {
  background: var(--ka-yellow);
}

.about-section-topline,
.about-capabilities-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.64fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  margin-bottom: 38px;
}

.about-section-topline > p,
.about-capabilities-heading > p {
  padding-bottom: 6px;
}

.about-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.64fr) minmax(300px, 0.86fr);
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 16px;
}

.about-gallery-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #dce5e6;
  box-shadow: 0 16px 42px rgba(21, 49, 56, 0.1);
}

.about-gallery-main {
  grid-row: 1 / 3;
  min-height: 650px;
}

.about-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-gallery-process img {
  object-position: center;
}

.about-gallery-products img {
  object-position: center 44%;
}

.about-gallery-card::after {
  position: absolute;
  inset: 44% 0 0;
  background: linear-gradient(0deg, rgba(8, 26, 31, 0.78), transparent);
  content: "";
  pointer-events: none;
}

.about-gallery-card figcaption {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 20px;
  left: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  color: #ffffff;
}

.about-gallery-card figcaption > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--about-deep);
  background: var(--ka-yellow);
  font-size: 0.62rem;
  font-weight: 900;
}

.about-gallery-card figcaption strong {
  font-family: var(--font-brand);
  font-size: 1rem;
}

.about-gallery-card figcaption small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
}

.about-gallery-card:hover img {
  transform: scale(1.035);
}

.about-visit {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(42px, 8vw, 112px);
  align-items: center;
}

.about-visit-visual {
  position: relative;
}

.about-visit-visual::before {
  position: absolute;
  z-index: -1;
  inset: -22px 32px 20px -22px;
  border-radius: 36px;
  background:
    linear-gradient(130deg, rgba(53, 185, 199, 0.2), transparent 48%),
    #eefafa;
  content: "";
}

.about-visit-visual figure {
  margin: 0;
  overflow: hidden;
  border-radius: 30px 30px 30px 8px;
  box-shadow: 0 24px 60px rgba(28, 65, 71, 0.16);
  transform: rotate(-1.1deg);
}

.about-visit-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.about-visit-sticker {
  position: absolute;
  right: -24px;
  bottom: -26px;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border: 8px solid #ffffff;
  border-radius: 50%;
  color: var(--about-deep);
  background: var(--ka-yellow);
  box-shadow: 0 14px 32px rgba(86, 69, 24, 0.15);
  font-family: var(--font-brand);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  transform: rotate(8deg);
}

.about-visit-sticker span {
  color: #8d6220;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-visit-copy {
  padding: clamp(14px, 3vw, 34px) 0;
}

.about-visit-copy h2 {
  margin-bottom: 26px;
}

.about-visit-copy > p + p {
  margin-top: 16px;
}

.about-visit-list {
  display: grid;
  gap: 11px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.about-visit-list li {
  display: flex;
  gap: 11px;
  align-items: center;
  color: #344f56;
  font-size: 0.78rem;
  font-weight: 750;
}

.about-visit-list span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--about-magenta);
}

/* The other sections space themselves with padding-top, which this one spends
   on the inside of its dark card instead — so its edges ended up flush against
   the section above and below. A small outer margin gives the card room to read
   as a separate block without breaking the page's larger rhythm. */
.about-capabilities {
  width: min(1380px, calc(100% - clamp(20px, 4vw, 64px)));
  margin-block: clamp(22px, 3vw, 38px);
  padding: clamp(54px, 7vw, 90px);
  border-radius: clamp(26px, 3vw, 40px);
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 4%, rgba(53, 185, 199, 0.19), transparent 26%),
    radial-gradient(circle at 7% 100%, rgba(236, 99, 134, 0.16), transparent 25%),
    var(--about-deep);
  box-shadow: 0 26px 70px rgba(13, 42, 48, 0.16);
}

.about-capabilities .about-section-index,
.about-capabilities .about-kicker {
  color: #7bd2d6;
}

.about-capabilities-heading h2 {
  color: #ffffff;
}

.about-capabilities-heading > p {
  color: rgba(255, 255, 255, 0.66);
}

.about-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.about-capability-grid article {
  position: relative;
  min-height: 320px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.07);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.about-capability-grid article::after {
  position: absolute;
  right: -28px;
  bottom: -30px;
  width: 105px;
  height: 105px;
  border: 18px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  content: "";
}

.about-capability-grid article:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.11);
  transform: translateY(-6px);
}

.about-capability-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 52px;
  border-radius: 18px;
  color: var(--about-deep);
}

.about-capability-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.about-icon-cyan {
  background: var(--about-cyan);
}

.about-icon-magenta {
  background: var(--about-magenta);
}

.about-icon-yellow {
  background: var(--ka-yellow);
}

.about-icon-violet {
  background: #9c8be4;
}

.about-capability-grid small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  font-weight: 900;
}

.about-capability-grid h3 {
  max-width: 13ch;
  margin: 9px 0 12px;
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.15;
}

.about-capability-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  line-height: 1.7;
}

.about-team {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(44px, 9vw, 130px);
  padding: clamp(94px, 12vw, 164px) clamp(28px, 6vw, 88px) clamp(64px, 8vw, 110px);
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(circle at 96% 0, rgba(236, 99, 134, 0.12), transparent 22%),
    radial-gradient(circle at 4% 100%, rgba(53, 185, 199, 0.14), transparent 24%),
    var(--about-cream);
}

.about-team::after {
  position: absolute;
  top: 44px;
  right: 56px;
  width: 84px;
  height: 84px;
  border: 20px solid rgba(128, 105, 215, 0.13);
  border-radius: 50%;
  content: "";
}

.about-team-label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: center;
  justify-content: center;
}

.about-team-label span {
  display: grid;
  place-items: center;
  width: clamp(68px, 7.6vw, 98px);
  aspect-ratio: 1;
  border-radius: 24px;
  color: #ffffff;
  background: var(--about-cyan);
  box-shadow: 0 12px 24px rgba(44, 91, 98, 0.12);
  font-family: var(--font-brand);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 900;
  transform: rotate(-4deg);
}

.about-team-label span:nth-child(2) {
  color: var(--about-deep);
  background: var(--ka-yellow);
  transform: translateY(16px) rotate(3deg);
}

.about-team-label span:nth-child(3) {
  background: var(--about-magenta);
  transform: rotate(2deg);
}

.about-team-label span:nth-child(4) {
  background: var(--about-violet);
  transform: translateY(-8px) rotate(-2deg);
}

.about-team-label span:nth-child(5) {
  color: var(--about-deep);
  background: #ffffff;
  transform: translateY(8px) rotate(4deg);
}

.about-team-copy {
  align-self: center;
}

.about-team-copy h2 {
  margin-bottom: 24px;
  font-size: clamp(2.35rem, 4.4vw, 4.35rem);
}

.about-team blockquote {
  position: relative;
  grid-column: 1 / -1;
  width: min(860px, 100%);
  margin: 36px auto 0;
  padding: 28px 38px 28px 82px;
  border: 1px solid rgba(20, 45, 53, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 40px rgba(65, 57, 38, 0.08);
}

.about-team blockquote > span {
  position: absolute;
  top: 12px;
  left: 28px;
  color: var(--about-magenta);
  font-family: Georgia, serif;
  font-size: 4.2rem;
  line-height: 1;
}

.about-team blockquote p {
  margin: 0;
  color: #314b51;
  font-family: var(--font-brand);
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.about-final-cta {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 42px;
  align-items: center;
  width: min(1280px, calc(100% - clamp(30px, 7vw, 96px)));
  min-height: 340px;
  margin: clamp(94px, 12vw, 164px) auto 0;
  padding: clamp(42px, 7vw, 84px);
  overflow: hidden;
  border-radius: 36px;
  color: #ffffff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 45%),
    var(--about-teal);
  box-shadow: 0 24px 60px rgba(9, 104, 96, 0.19);
}

.about-final-cta > div:not(.about-final-cta-art),
.about-final-actions {
  position: relative;
  z-index: 2;
}

.about-final-cta h2 {
  max-width: 13ch;
  color: #ffffff;
  font-size: clamp(2.6rem, 5vw, 5rem);
}

.about-final-actions {
  flex: 0 0 auto;
  margin: 0;
}

.about-button-white {
  color: var(--about-teal);
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(2, 68, 63, 0.18);
}

.about-button-white:hover {
  color: var(--about-deep);
  background: var(--ka-yellow);
}

.about-final-cta-art,
.about-final-cta-art span {
  position: absolute;
}

.about-final-cta-art {
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.about-final-cta-art span:nth-child(1) {
  top: -80px;
  right: 10%;
  width: 230px;
  height: 230px;
  border: 48px solid rgba(246, 200, 82, 0.28);
  border-radius: 50%;
}

.about-final-cta-art span:nth-child(2) {
  right: -30px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 52px;
  background: rgba(236, 99, 134, 0.32);
  transform: rotate(22deg);
}

.about-final-cta-art span:nth-child(3) {
  bottom: 34px;
  left: 45%;
  width: 72px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(-18deg);
}

.about-final-cta-art span:nth-child(4) {
  top: 22px;
  left: 44%;
  width: 14px;
  height: 90px;
  border-radius: 999px;
  background: rgba(53, 185, 199, 0.48);
  transform: rotate(45deg);
}

body[data-page="about"].about-motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="about"].about-motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes about-hero-settle {
  from {
    opacity: 0.45;
    transform: scale(1.065);
  }
  to {
    opacity: 1;
    transform: scale(1.015);
  }
}

@keyframes about-scroll-line {
  0%, 22% {
    transform: translateX(-100%);
  }
  64%, 100% {
    transform: translateX(100%);
  }
}

@media (max-width: 1080px) {

  .about-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-capability-grid article {
    min-height: 290px;
  }

  .about-capability-icon {
    margin-bottom: 36px;
  }

  .about-team {
    grid-template-columns: 1fr;
  }

  .about-team-label {
    max-width: 650px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .about-hero {
    min-height: 720px;
  }

  .about-story,
  .about-visit {
    grid-template-columns: 1fr;
  }

  .about-story-copy {
    padding-top: 0;
  }

  .about-section-topline,
  .about-capabilities-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .about-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .about-gallery-main {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 500px;
  }

  .about-gallery-process,
  .about-gallery-products {
    min-height: 300px;
  }

  .about-visit-visual {
    width: min(720px, calc(100% - 12px));
    margin-inline: auto;
  }

  .about-visit-copy {
    padding-top: 42px;
  }

  .about-final-cta {
    display: grid;
    justify-items: start;
  }
}

@media (max-width: 620px) {
  .about-hero {
    width: calc(100% - 20px);
    min-height: 670px;
    border-radius: 22px;
  }

  .about-hero::after {
    top: 20px;
    right: 20px;
    width: 66px;
    height: 10px;
  }

  .about-hero h1 {
    max-width: 12ch;
    margin-block: 14px 18px;
    font-size: clamp(2.75rem, 13vw, 4rem);
    line-height: 0.95;
  }

  .about-button {
    min-height: 46px;
    padding: 10px 17px;
    font-size: 0.72rem;
  }

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

  .about-section {
    padding-top: 88px;
  }

  .about-story {
    gap: 30px;
  }

  .about-story-heading h2,
  .about-section-topline h2,
  .about-visit-copy h2,
  .about-capabilities-heading h2,
  .about-team-copy h2,
  .about-final-cta h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    letter-spacing: -0.045em;
  }

  .about-story-pills {
    display: grid;
  }

  .about-story-pills span {
    justify-content: flex-start;
  }

  .about-gallery {
    grid-template-columns: 1fr;
  }

  .about-gallery-main,
  .about-gallery-process,
  .about-gallery-products {
    grid-column: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .about-gallery-main img {
    object-position: center;
  }

  .about-gallery-card {
    border-radius: 20px;
  }

  .about-gallery-card figcaption {
    right: 16px;
    bottom: 15px;
    left: 16px;
  }

  .about-visit-visual figure {
    border-radius: 24px 24px 24px 7px;
  }

  .about-visit-sticker {
    right: -8px;
    bottom: -24px;
    width: 102px;
    height: 102px;
    border-width: 6px;
    font-size: 1.08rem;
  }

  .about-capabilities {
    width: calc(100% - 20px);
    padding: 42px 18px;
    border-radius: 25px;
  }

  .about-capability-grid {
    grid-template-columns: 1fr;
  }

  .about-capability-grid article {
    min-height: 0;
    padding: 20px;
  }

  .about-capability-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 28px;
  }

  .about-team {
    padding: 74px 20px 46px;
    border-radius: 26px;
  }

  .about-team-label {
    gap: 5px;
  }

  .about-team-label span {
    width: 58px;
    border-radius: 17px;
    font-size: 2rem;
  }

  .about-team blockquote {
    padding: 56px 22px 24px;
  }

  .about-team blockquote > span {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }

  .about-final-cta {
    min-height: 420px;
    margin-top: 88px;
    padding: 40px 24px;
    border-radius: 26px;
  }

  /* Stays the flex row it is above this width: the buttons keep their own
     width and wrap onto a second line when the phone is too narrow, rather
     than stretching edge to edge. */
  .about-final-actions {
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }

  .about-final-actions .about-button {
    width: auto;
  }
}

@media (max-width: 390px) {

  .about-team-label span {
    width: 51px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .about-gallery-card img,
  .about-capability-grid article,
  .about-button,
  body[data-page="about"].about-motion-ready [data-reveal] {
    transition: none;
  }

  body[data-page="about"].about-motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* About hero v2 — “Tờ in đang mở” */
.about-hero-v2 {
  position: relative;
  width: min(1536px, calc(100% - clamp(20px, 3.5vw, 56px)));
  min-height: clamp(700px, calc(100svh - var(--header-h) - 18px), 850px);
  margin: clamp(10px, 1.5vw, 22px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(20, 45, 53, 0.08);
  border-radius: clamp(24px, 3vw, 38px);
  color: var(--about-ink);
  background: #fbf8ee;
  box-shadow:
    0 30px 80px rgba(18, 51, 55, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  isolation: isolate;
}

.about-hero-v2-paper,
.about-hero-v2-paper-grid,
.about-hero-v2-paper-ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-hero-v2-paper {
  z-index: -2;
  background:
    radial-gradient(circle at 8% 10%, rgba(246, 200, 82, 0.17), transparent 21%),
    radial-gradient(circle at 95% 17%, rgba(53, 185, 199, 0.14), transparent 25%),
    linear-gradient(118deg, #fffdf8 0%, #f9f5e8 58%, #f4fbf9 100%);
}

.about-hero-v2-paper-grid {
  inset: auto auto -160px -110px;
  width: 520px;
  height: 520px;
  opacity: 0.16;
  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: 27px 27px;
  transform: rotate(-8deg);
  mask-image: radial-gradient(circle, #000 0 36%, transparent 72%);
}

.about-hero-v2-paper-ink {
  inset: -165px -120px auto auto;
  width: 490px;
  height: 490px;
  border: 86px solid rgba(53, 185, 199, 0.09);
  border-radius: 50%;
  filter: blur(0.2px);
}

.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);
}

.about-hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(390px, 0.88fr) minmax(520px, 1.12fr);
  gap: clamp(30px, 4.5vw, 74px);
  align-items: center;
  min-height: inherit;
  padding: clamp(54px, 5.8vw, 88px) clamp(42px, 5.8vw, 90px) clamp(70px, 6.5vw, 98px);
  box-sizing: border-box;
}

.about-hero-v2-content {
  position: relative;
  z-index: 3;
  max-width: 650px;
  animation: about-hero-v2-copy-in 780ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.about-hero-v2-serial {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: clamp(22px, 3vw, 38px);
  color: rgba(20, 45, 53, 0.48);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-hero-v2-serial i {
  width: 38px;
  height: 1px;
  background: rgba(20, 45, 53, 0.28);
}

.about-hero-v2-kicker {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--about-teal);
  font-size: clamp(0.68rem, 0.85vw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-hero-v2-dots {
  display: inline-flex;
  gap: 4px;
}

.about-hero-v2-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--about-cyan);
}

.about-hero-v2-dots i:nth-child(2) {
  background: var(--about-magenta);
}

.about-hero-v2-dots i:nth-child(3) {
  background: var(--ka-yellow);
}

.about-hero-v2-title {
  max-width: 8.8ch;
  margin: 0;
  color: var(--about-deep);
  font-family: var(--font-brand);
  font-size: clamp(4.2rem, 6.25vw, 6.95rem);
  font-weight: 900;
  letter-spacing: -0.071em;
  line-height: 0.86;
}

.about-hero-v2-title span,
.about-hero-v2-title em {
  display: block;
}

.about-hero-v2-title em {
  position: relative;
  z-index: 0;
  width: max-content;
  max-width: 100%;
  margin-top: 0.08em;
  color: var(--about-teal);
  font-style: normal;
}

.about-hero-v2-title em::after {
  position: absolute;
  z-index: -1;
  right: -0.04em;
  bottom: -0.04em;
  left: 0.02em;
  height: 0.14em;
  border-radius: 999px 30% 999px 35%;
  background: linear-gradient(90deg, var(--ka-yellow) 0 64%, var(--about-magenta) 64%);
  content: "";
  transform: rotate(-1.4deg);
}

.about-hero-v2-lead {
  max-width: 58ch;
  margin: clamp(24px, 2.7vw, 34px) 0 0;
  color: rgba(20, 45, 53, 0.71);
  font-size: clamp(0.92rem, 1.1vw, 1.06rem);
  font-weight: 500;
  line-height: 1.75;
}

.about-hero-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}

.about-hero-v2-button-primary {
  color: #ffffff;
  background: var(--about-deep);
  box-shadow: 0 13px 30px rgba(16, 40, 47, 0.22);
}

.about-hero-v2-button-primary svg {
  color: var(--ka-yellow);
}

.about-hero-v2-button-secondary {
  border-color: rgba(11, 141, 130, 0.24);
  color: var(--about-teal);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.about-hero-v2-button-primary:hover {
  background: var(--about-teal);
  box-shadow: 0 16px 35px rgba(11, 141, 130, 0.25);
}

.about-hero-v2-button-secondary:hover {
  border-color: rgba(11, 141, 130, 0.48);
  background: #ffffff;
}

.about-hero-v2-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 540px;
  margin: clamp(30px, 3.5vw, 46px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(20, 45, 53, 0.12);
  list-style: none;
}

.about-hero-v2-proof li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 42px;
  padding: 0 14px;
  border-left: 1px solid rgba(20, 45, 53, 0.1);
}

.about-hero-v2-proof li:first-child {
  padding-left: 0;
  border-left: 0;
}

.about-hero-v2-proof li:last-child {
  padding-right: 0;
}

.about-hero-v2-proof i {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--about-cyan);
  box-shadow: 0 0 0 3px rgba(53, 185, 199, 0.12);
}

.about-hero-v2-proof li:nth-child(2) i {
  background: var(--about-magenta);
  box-shadow: 0 0 0 3px rgba(236, 99, 134, 0.12);
}

.about-hero-v2-proof li:nth-child(3) i {
  background: var(--ka-yellow);
  box-shadow: 0 0 0 3px rgba(246, 200, 82, 0.18);
}

.about-hero-v2-proof span {
  color: rgba(20, 45, 53, 0.68);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-transform: uppercase;
}

.about-hero-v2-collage {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: clamp(590px, 46vw, 690px);
}

.about-hero-v2-main-photo,
.about-hero-v2-detail-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 8px solid #ffffff;
  background: #ffffff;
  box-shadow: 0 30px 60px rgba(16, 40, 47, 0.18);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms ease;
}

.about-hero-v2-main-photo {
  top: 1%;
  right: 1%;
  width: 72%;
  height: 84%;
  border-radius: 14px 30px 14px 14px;
  transform: rotate(1.9deg);
  animation: about-hero-v2-main-in 900ms 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.about-hero-v2-detail-photo {
  z-index: 3;
  bottom: 1.5%;
  left: 0;
  width: 55%;
  aspect-ratio: 3 / 2;
  border-radius: 24px 10px 10px 10px;
  transform: rotate(-4.2deg);
  animation: about-hero-v2-detail-in 900ms 290ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.about-hero-v2-main-photo img,
.about-hero-v2-detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-hero-v2-main-photo img {
  object-position: center 45%;
}

.about-hero-v2-detail-photo img {
  object-position: center;
}

.about-hero-v2-main-photo figcaption {
  position: absolute;
  right: 13px;
  bottom: 13px;
  left: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(10, 35, 41, 0.58);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.about-hero-v2-main-photo figcaption b {
  color: var(--ka-yellow);
}

.about-hero-v2-detail-photo figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--about-deep);
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.about-hero-v2-registration {
  position: absolute;
  z-index: 4;
  top: 8%;
  left: 4%;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(20, 45, 53, 0.34);
  border-radius: 50%;
  animation: about-hero-v2-mark-in 600ms 650ms ease both;
}

.about-hero-v2-registration::before,
.about-hero-v2-registration::after,
.about-hero-v2-registration i,
.about-hero-v2-registration span {
  position: absolute;
  background: rgba(20, 45, 53, 0.34);
  content: "";
}

.about-hero-v2-registration::before {
  top: 50%;
  left: -9px;
  width: calc(100% + 18px);
  height: 1px;
}

.about-hero-v2-registration::after {
  top: -9px;
  left: 50%;
  width: 1px;
  height: calc(100% + 18px);
}

.about-hero-v2-registration i {
  inset: 18px;
  border: 1px solid rgba(20, 45, 53, 0.34);
  border-radius: 50%;
  background: transparent;
}

.about-hero-v2-ink-key {
  position: absolute;
  z-index: 5;
  right: -2px;
  bottom: 3%;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 28px rgba(16, 40, 47, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.about-hero-v2-ink-key span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--about-deep);
  background: var(--ink);
  font-size: 0.58rem;
  font-weight: 900;
}

.about-hero-v2-side-note {
  position: absolute;
  right: -78px;
  top: 46%;
  z-index: 4;
  margin: 0;
  color: rgba(20, 45, 53, 0.44);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(90deg);
}

.about-hero-v2-scroll {
  position: absolute;
  z-index: 6;
  bottom: 27px;
  left: clamp(42px, 5.8vw, 90px);
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(20, 45, 53, 0.5);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.about-hero-v2-scroll i {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(20, 45, 53, 0.2);
  border-radius: 50%;
}

.about-hero-v2-scroll i::before,
.about-hero-v2-scroll i::after {
  position: absolute;
  left: 50%;
  content: "";
  transform: translateX(-50%);
}

.about-hero-v2-scroll i::before {
  top: 7px;
  width: 1px;
  height: 10px;
  background: currentColor;
}

.about-hero-v2-scroll i::after {
  bottom: 7px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .about-hero-v2-main-photo:hover {
    z-index: 6;
    box-shadow: 0 38px 72px rgba(16, 40, 47, 0.22);
    transform: rotate(0.8deg) translateY(-7px);
  }

  .about-hero-v2-detail-photo:hover {
    box-shadow: 0 34px 66px rgba(16, 40, 47, 0.22);
    transform: rotate(-2.2deg) translateY(-7px);
  }

  .about-hero-v2-main-photo:hover img,
  .about-hero-v2-detail-photo:hover img {
    transform: scale(1.025);
  }
}

@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: 1220px) {
  .about-hero-v2-grid {
    grid-template-columns: minmax(350px, 0.9fr) minmax(430px, 1.1fr);
    gap: 34px;
    padding-right: 46px;
    padding-left: 46px;
  }

  .about-hero-v2-title {
    font-size: clamp(4rem, 6.1vw, 5.6rem);
  }

  .about-hero-v2-collage {
    min-height: 600px;
  }

  .about-hero-v2-scroll {
    left: 46px;
  }
}

@media (max-width: 980px) {
  .about-hero-v2 {
    min-height: 0;
  }

  .about-hero-v2-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: 0;
    padding: 58px clamp(34px, 7vw, 68px) 90px;
  }

  .about-hero-v2-content {
    max-width: 720px;
  }

  .about-hero-v2-title {
    max-width: 9.3ch;
    font-size: clamp(4.4rem, 10.6vw, 6.3rem);
  }

  .about-hero-v2-lead {
    max-width: 62ch;
  }

  .about-hero-v2-proof {
    max-width: 600px;
  }

  .about-hero-v2-collage {
    width: min(100%, 690px);
    min-height: 620px;
    margin: 0 auto;
  }

  .about-hero-v2-scroll {
    bottom: 25px;
    left: clamp(34px, 7vw, 68px);
  }
}

@media (max-width: 620px) {
  .about-hero-v2 {
    width: calc(100% - 20px);
    border-radius: 25px;
  }

  .about-hero-v2::after {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 7px;
  }

  .about-hero-v2-grid {
    gap: 22px;
    padding: 34px 22px 77px;
  }

  .about-hero-v2-serial {
    display: none;
  }

  .about-hero-v2-kicker {
    max-width: 30ch;
    font-size: 0.62rem;
    line-height: 1.4;
  }

  .about-hero-v2-title {
    max-width: none;
    font-size: clamp(3.25rem, 16.7vw, 4.85rem);
    line-height: 0.87;
  }

  .about-hero-v2-lead {
    margin-top: 25px;
    font-size: 0.9rem;
    line-height: 1.68;
  }

  .about-hero-v2-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 23px;
  }

  .about-hero-v2-actions .about-button {
    width: auto;
  }

  .about-hero-v2-proof {
    display: none;
  }

  .about-hero-v2-collage {
    min-height: clamp(400px, 115vw, 520px);
  }

  .about-hero-v2-main-photo {
    right: 0;
    width: 76%;
    height: 84%;
    border-width: 6px;
    border-radius: 10px 23px 10px 10px;
  }

  .about-hero-v2-detail-photo {
    bottom: 1%;
    width: 59%;
    border-width: 6px;
    border-radius: 18px 8px 8px 8px;
  }

  /* "Đội ngũ tại xưởng" is a caption, not a graphic mark, and 0.54rem put it
     at 8.6px. The strip is 194px wide on a 320px phone, so it had the room. */
  .about-hero-v2-main-photo figcaption {
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 8px 9px;
    font-size: 0.63rem;
  }

  .about-hero-v2-main-photo figcaption span {
    display: none;
  }

  .about-hero-v2-detail-photo figcaption {
    display: none;
  }

  .about-hero-v2-registration {
    top: 7%;
    left: 2%;
    width: 42px;
    height: 42px;
  }

  .about-hero-v2-registration i {
    inset: 14px;
  }

  .about-hero-v2-ink-key {
    right: 0;
    bottom: 0;
    gap: 3px;
    padding: 6px;
  }

  /* One letter inside a 23px ink dot — the disc has room for a legible mark,
     8px was simply the desktop size scaled down without looking at it. */
  .about-hero-v2-ink-key span {
    width: 23px;
    height: 23px;
    font-size: 0.6rem;
  }

  .about-hero-v2-side-note {
    display: none;
  }

  .about-hero-v2-scroll {
    bottom: 23px;
    left: 22px;
  }
}

@media (max-width: 390px) {
  .about-hero-v2-title {
    font-size: clamp(2.95rem, 16.3vw, 3.75rem);
  }

  .about-hero-v2-proof span {
    font-size: 0.61rem;
  }

  .about-hero-v2-scroll span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-v2-content,
  .about-hero-v2-main-photo,
  .about-hero-v2-detail-photo,
  .about-hero-v2-registration {
    animation: none;
  }

  .about-hero-v2-main-photo,
  .about-hero-v2-detail-photo,
  .about-hero-v2-main-photo img,
  .about-hero-v2-detail-photo img {
    transition: none;
  }
}

@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}.collection-editor{width:min(1100px,94vw);max-height:92vh;overflow:auto}.collection-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px}.collection-fields label:last-child{grid-column:1/-1}.collection-picker-heading{display:flex;justify-content:space-between;padding:24px 24px 12px}.collection-image-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-height:430px;overflow:auto;padding:0 24px}.collection-pick-card{position:relative;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#f5f6f7;cursor:pointer}.collection-pick-card:has(input:checked){border-color:#111}.collection-pick-card input{position:absolute;top:8px;left:8px;z-index:1;width:19px;height:19px}.collection-pick-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.collection-pick-card span{display:block;padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}@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}.collection-image-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-fields{grid-template-columns:1fr}.collection-fields label:last-child{grid-column:auto}}
.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: gọn khung, ưu tiên chỗ cho dữ liệu */
.admin-workspace .upload-hero {
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 15px 20px;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(29, 43, 54, 0.05);
}

.admin-workspace .upload-hero h1 {
  margin: 2px 0 5px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.18;
}

.admin-workspace .upload-hero .eyebrow {
  font-size: 0.6rem;
}

.admin-workspace .upload-hero p:last-child {
  max-width: 640px;
  font-size: 0.78rem;
  line-height: 1.55;
}

.admin-workspace .upload-hero-summary {
  gap: 7px;
  min-width: 0;
}

.admin-workspace .upload-hero-summary span {
  padding: 8px 11px;
  border-radius: 11px;
  font-size: 0.66rem;
}

.admin-workspace .upload-hero-summary strong {
  font-size: 1.1rem;
}

.admin-workspace .manager-app,
.admin-workspace .upload-app,
.admin-workspace .admin-order-app,
.admin-workspace .admin-care-app {
  padding-top: 26px;
  padding-bottom: 56px;
}

.admin-workspace .admin-care-toolbar {
  margin: 14px 0;
}

.admin-workspace .panel-heading {
  margin-bottom: -2px;
}

.admin-workspace .manager-grid {
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
}

.admin-filter-search {
  display: block;
}

.admin-filter-search input {
  width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 0.82rem;
}

.admin-filter-search input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 151, 143, 0.12);
}

.admin-country-filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 4px;
}

.admin-country-filter-chips button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  min-height: 39px;
  padding: 7px 8px 7px 10px;
  border: 1px solid #dce9e7;
  border-radius: 12px;
  background: #f8fbfa;
  color: #536d70;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.admin-country-filter-chips button:hover {
  border-color: rgba(13, 143, 132, 0.34);
  color: var(--teal-dark);
  transform: translateY(-1px);
}

.admin-country-filter-chips button:focus-visible {
  outline: 3px solid rgba(19, 151, 143, 0.18);
  outline-offset: 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-flag {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 27px;
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(16, 40, 47, 0.14);
  border-radius: 3px;
  background: #ffffff;
}

.admin-country-filter-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-country-filter-flag.is-multiple {
  display: flex;
  width: auto;
  padding: 2px;
}

.admin-country-filter-flag.is-multiple img {
  width: 15px;
  height: 12px;
  border-radius: 1px;
}

.admin-country-filter-flag.is-multiple img + img {
  margin-left: -3px;
  box-shadow: -1px 0 0 #ffffff;
}

.admin-country-filter-flag.is-unknown {
  border-radius: 50%;
  color: #718486;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-country-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(20, 127, 118, 0.09);
  font-size: 0.59rem;
  font-weight: 900;
}

.admin-country-filter-chips button.is-active .admin-country-filter-count {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 620px) {
  .admin-country-filter-chips {
    margin-inline: -13px;
    padding-inline: 13px;
  }

  .admin-country-filter-label {
    display: none;
  }
}

.admin-workspace .panel-heading h2,
.admin-workspace .manager-library-heading h2,
.admin-workspace .upload-queue-heading h2 {
  font-size: 1.05rem;
}

/* Thư viện kho ảnh: đầu mục, tab và danh sách bộ sưu tập */
.manager-library-heading {
  align-items: center;
  margin-bottom: 13px;
}

.manager-library-heading h2 {
  margin-bottom: 3px;
}

.manager-view-tabs {
  width: min(420px, 100%);
  margin-bottom: 15px;
}

.manager-view-tabs button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.manager-view-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: rgba(19, 155, 143, 0.1);
  font-size: 0.65rem;
}

.manager-view[hidden] {
  display: none;
}

.manager-collection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #f8fbfb;
}

.manager-collection-bar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.manager-collection-bar button {
  flex: 0 0 auto;
}

.manager-collection-list {
  display: grid;
  gap: 12px;
}

.manager-collection-list:empty {
  display: none;
}

.manager-collection-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.manager-collection-covers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 132px;
  height: 92px;
  overflow: hidden;
  border-radius: 12px;
  background: #eef3f3;
}

.manager-collection-covers img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manager-collection-covers img:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.manager-collection-covers-empty {
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  padding: 8px;
  color: var(--muted);
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
}

.manager-collection-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.manager-collection-body h3 {
  margin: 0 0 3px;
  font-size: 0.98rem;
}

.manager-collection-body p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.manager-collection-warning {
  color: #9a5511;
  font-weight: 800;
}

.manager-collection-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 7px;
  align-content: center;
}

.manager-collection-actions button {
  min-width: 96px;
}

/* Hộp thoại bộ sưu tập */
.collection-editor .manager-editor-heading p:last-child {
  max-width: 560px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.collection-picker-heading {
  align-items: baseline;
  gap: 14px;
}

.collection-picker-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.collection-picker-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 24px 12px;
}

.collection-picker-tools input[type="search"] {
  flex: 1 1 220px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.collection-picker-tools input[type="search"]:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 151, 143, 0.12);
}

.collection-picker-tools .upload-check-row {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.75rem;
}

.collection-picker-tools .text-button {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
}

.collection-picker-empty {
  margin: 0;
  padding: 22px 24px 4px;
  color: var(--muted);
  text-align: center;
  font-size: 0.78rem;
}

.collection-image-picker[hidden] {
  display: none;
}

.collection-delete-button {
  flex: 0 0 auto;
}

.collection-delete-button[hidden] {
  display: none;
}

/* 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;
}

/* Hai cửa sổ này mở CHỒNG LÊN cửa sổ sửa sản phẩm.
   Cả ba dùng chung .manager-modal-backdrop với z-index 160, mà trong HTML chúng
   lại đứng trước #productEditorModal — cùng z-index thì cái sau trong DOM vẽ
   đè lên, nên kho icon bị khuất hẳn xuống dưới. Nâng riêng hai cái này thay vì
   đổi thứ tự thẻ: thứ tự trong HTML không nên là thứ quyết định lớp trên dưới. */
#iconLibraryModal,
#adminKeyModal {
  z-index: 170;
}

/* Trình chỉnh vùng in cũng mở từ bên trong trình sửa sản phẩm, và thẻ của nó
   cũng đứng trước #productEditorModal trong HTML, nên dính đúng cái bẫy ở trên:
   cùng z-index thì cái sau trong DOM vẽ đè lên.

   Viết thành quy tắc riêng thay vì thêm vào danh sách bên trên, để không phải sửa
   một dòng đang bao gồm kho icon. */
#printProfileModal {
  z-index: 170;
}

/* 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 {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  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 {
  margin-bottom: 13px;
  padding-right: 38px;
}

/* 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;
}

/* Trình soạn tùy chọn trong trang quản lý. */
.product-option-list {
  display: grid;
  gap: 10px;
}

.product-option {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.product-option-head {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
}

.product-option-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr));
  gap: 8px;
  align-items: start;
}

.product-option-choice {
  position: relative;
  display: grid;
  gap: 5px;
}

.product-option-art {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1;
  padding: 0;
  border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
  cursor: pointer;
}

.product-option-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-option-empty {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.product-option-drop,
.product-option-choice-remove {
  position: absolute;
  top: -5px;
  width: 19px;
  height: 19px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
}

.product-option-drop { left: -5px; }
.product-option-choice-remove { right: -5px; }

.product-option-choice-remove:hover {
  border-color: #d0574e;
  color: #d0574e;
}

.product-option-add {
  align-self: center;
  padding: 8px 11px;
  border: 1px dashed color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.product-option-add:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Thiết lập nâng cao của phần tử tùy chọn và điều kiện hiển thị của Mục.
   ---------------------------------------------------------------------------
   Toàn bộ khối này dùng tên lớp mới, không sửa lại lớp nào đang có, nên phần
   form phía trên — màu nhấn, kho icon, SVG icon — không bị đụng tới.

   Mặc định mọi bảng đều đóng: form nhìn y hệt trước khi có tính năng này. */
.product-option-gear {
  position: absolute;
  top: -5px;
  right: 17px;
  width: 19px;
  height: 19px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
}

.product-option-gear:hover,
.product-option-gear.is-open {
  border-color: var(--ink);
  color: var(--ink);
}

/* Phần tử đã được cấu hình gì đó thì nút ⚙ tự đậm lên, để nhìn lướt qua lưới là
   biết thẻ nào có điều kiện hay vùng cắt riêng mà không phải mở từng cái. */
.product-option-gear.is-set {
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  color: var(--ink);
}

.product-option-tag {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-option-choice.is-off .product-option-art,
.product-option-choice.is-off input {
  opacity: 0.45;
}

/* Bảng thiết lập chiếm trọn bề ngang của lưới phần tử thay vì nằm trong ô rộng
   110px. Lưới tự xuống dòng nên bảng luôn hiện ngay dưới hàng chứa thẻ vừa bấm. */
.product-option-advanced {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
}

.product-adv-head,
.product-adv-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.product-adv-head {
  min-width: 0;
  justify-content: space-between;
}

.product-adv-head-actions {
  flex: 0 0 auto;
}

.product-adv-title {
  overflow: hidden;
  min-width: 0;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ba phần của điều kiện nằm cùng một hàng trên màn hình đủ rộng. Bảng vẫn
   chiếm một hàng của lưới phần tử, nhưng chiều cao chỉ còn bằng một cụm input
   thay vì ba box xếp dọc. */
.product-adv-condition {
  display: grid;
  grid-template-columns: minmax(145px, 0.72fr) minmax(145px, 0.85fr) minmax(210px, 1.6fr);
  gap: 7px;
  align-items: start;
}

.product-adv-condition > .product-adv-note {
  grid-column: 1 / -1;
}

.product-adv-field {
  display: grid;
  gap: 4px;
}

.product-adv-field > span {
  color: var(--muted);
  font-size: 0.7rem;
}

.product-adv-field select,
.product-adv-field input {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
}

.product-adv-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.product-adv-check {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 0.76rem;
  cursor: pointer;
}

.product-adv-check input {
  margin: 0;
}

.product-adv-active {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  white-space: nowrap;
}

.product-adv-note,
.product-adv-warn {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
}

.product-adv-note {
  color: var(--muted);
}

.product-adv-warn {
  color: #b45309;
}

.product-adv-close {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.product-adv-close:hover {
  border-color: var(--ink);
}

@media (max-width: 720px) {
  .product-adv-condition {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-adv-values-field,
  .product-adv-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .product-adv-head {
    align-items: flex-start;
  }

  .product-adv-condition {
    grid-template-columns: 1fr;
  }

  .product-adv-values-field,
  .product-adv-note {
    grid-column: auto;
  }
}

/* Trình chỉnh vùng in.
   ---------------------------------------------------------------------------
   Toàn bộ dùng tiền tố .pp- riêng, mượn lại biến màu và bo góc của trang quản lý
   nên nhìn liền mạch với phần còn lại mà không đụng vào selector nào đang có. */
.print-profile-editor {
  max-width: 1180px;
}

.pp-body {
  display: grid;
  grid-template-columns: minmax(180px, 230px) 1fr;
  gap: 13px;
  align-items: start;
}

.pp-side {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.pp-side-head {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
}

.pp-list {
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}

.pp-list-item {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pp-list-item small {
  color: var(--muted);
  font-size: 0.68rem;
}

.pp-list-item:hover,
.pp-list-item.is-active {
  border-color: var(--ink);
}

.pp-main {
  display: grid;
  gap: 11px;
}

.pp-fields {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(90px, 1fr));
  gap: 9px;
  align-items: end;
}

.pp-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 13px;
  align-items: start;
}

.pp-stage-wrap {
  display: grid;
  place-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
}

/* Khung mang đúng tỉ lệ canvas của hồ sơ, nên hình vẽ ra trông đúng như lúc
   khách nhìn thấy. */
.pp-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 460px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 8px;
  background: var(--paper);
  touch-action: none;
}

.pp-reference,
.pp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pp-reference {
  object-fit: fill;
  opacity: 0.55;
  pointer-events: none;
}

.pp-shape {
  cursor: move;
}

.pp-handle {
  cursor: nwse-resize;
}

.pp-tools {
  display: grid;
  gap: 11px;
}

.pp-tool-group {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.pp-tool-group > strong {
  font-size: 0.76rem;
}

.pp-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pp-num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
}

.pp-tool-group textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.74rem;
}

@media (max-width: 900px) {
  .pp-body,
  .pp-work {
    grid-template-columns: 1fr;
  }

  .pp-fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* Ô tìm của hai lưới, và trạng thái kéo thả. */
/* Hai tab Tất cả / Nháp của kho icon và kho vùng in. Cùng hình dáng với tab
   nhóm sản phẩm để hai chỗ không trông như hai thứ khác nhau. */
.fm-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 11px;
}

.fm-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.79rem;
  cursor: pointer;
}

.fm-view-tab:hover {
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
}

.fm-view-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.fm-view-count {
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.fm-view-tab.is-active .fm-view-count {
  background: color-mix(in srgb, var(--paper) 26%, transparent);
}

.fm-search {
  max-width: 320px;
}

.fm-item[draggable="true"] {
  cursor: grab;
}

.fm-item[draggable="true"]:active {
  cursor: grabbing;
}

/* Ô đang được kéo mờ đi để nhìn rõ chỗ sắp thả vào. */
.fm-item.is-dragging {
  opacity: 0.4;
}

.fm-editor-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}

/* Khung soạn icon, nằm giữa thanh công cụ và lưới. Ô xem trước đứng cạnh ô nhập
   để nhìn thấy hình ngay trong lúc gõ. */
.fm-editor {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
}

.fm-editor-head {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
}

.fm-editor-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 150px);
  gap: 11px;
  align-items: start;
}

.fm-editor-fields {
  display: grid;
  gap: 8px;
}

.fm-editor-side {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.fm-editor-side > span {
  color: var(--muted);
  font-size: 0.7rem;
}

.fm-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

@media (max-width: 700px) {
  .fm-editor-body {
    grid-template-columns: 1fr;
  }

  .fm-editor-side {
    justify-items: start;
  }
}

/* Lưới kiểu trình quản lý tệp, dùng chung cho kho icon và hồ sơ vùng in.
   ---------------------------------------------------------------------------
   Bấm một ô để chọn, thanh công cụ hiện ra ngay bên trên với đúng những việc
   làm được với ô đó. Bấm đúp một hồ sơ thì mở trình chỉnh hình. */
.fm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
}

.fm-selected {
  flex: 1 1 auto;
  min-width: 120px;
  color: var(--muted);
  font-size: 0.76rem;
}

.fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
  gap: 9px;
  align-items: start;
}

.fm-item {
  position: relative;
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 11px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.fm-item:hover {
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.fm-item.is-selected {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, var(--paper));
}

.fm-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
}

.fm-thumb .fm-svg,
.fm-thumb svg {
  width: 68%;
  height: 68%;
}

/* Icon trong kho vẽ bằng nét — cùng ngôn ngữ với ô xem trước icon trong form
   sản phẩm và với thẻ sản phẩm. */
.fm-thumb .fm-svg svg {
  width: 100%;
  height: 100%;
  color: var(--ink);
}

/* Ép nét CHỈ khi icon không tự khai màu. Trước đây quy tắc này ép thẳng lên thẻ
   svg nên một icon vẽ bằng mảng màu bị xoá sạch fill và biến mất khỏi lưới. */
.fm-thumb .fm-svg svg:not([fill]):not([stroke]) > :is(path, rect, circle, ellipse, line, polyline, polygon):not([fill]):not([stroke]),
.fm-thumb .fm-svg 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.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fm-name {
  overflow: hidden;
  width: 100%;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-meta {
  color: var(--muted);
  font-size: 0.66rem;
}

.fm-draft {
  position: absolute;
  top: 5px;
  right: 5px;
}

/* Nhãn báo sản phẩm có bản nháp chưa đăng. Màu hổ phách — không phải lỗi, chỉ là
   việc còn dở. */
.product-draft-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, #b45309 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #b45309 12%, var(--paper));
  color: #b45309;
  font-size: 0.66rem;
  vertical-align: middle;
}

/* Nhãn nháp của một sản phẩm ĐANG BÁN: cùng hình dáng với nhãn nháp thường
   nhưng đổi màu, để trong mục Nháp nhìn một cái là biết cái nào khách vẫn đang
   mua được và cái nào chưa từng lên trang. */
.product-draft-tag.is-live {
  border-color: color-mix(in srgb, #35b9c7 45%, transparent);
  background: color-mix(in srgb, #35b9c7 14%, transparent);
  color: color-mix(in srgb, #35b9c7 72%, var(--ink));
}

/* Ô đặt tên cho nhóm chính. Nằm ngay dưới tiêu đề "Main option" và trên danh
   sách các dòng giá, nên thuộc về cụm đó hơn là đứng riêng. */
.main-option-name {
  margin-bottom: 9px;
}

.main-option-name small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Điều kiện hiển thị của một Mục thông tin. Nút nằm chung hàng công cụ với
   ↑ ↓ Gộp Tách, bảng mở ra ngay dưới đầu mục. */
.info-block-cond-open {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.info-block-cond-open:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.info-block-cond-open.is-set {
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  color: var(--ink);
}

.info-block-cond {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
}

.info-block-cond-tag {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

/* Luật đổi vùng cắt theo tùy chọn, nằm trong từng ô ảnh. */
.slot-rules {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
}

.slot-rules-title {
  font-size: 0.76rem;
  font-weight: 600;
}

.slot-rule {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
}

/* Dải “hoặc” giữa hai luật. Hai vạch kẻ hai bên cho thấy đây là chỗ nối, không
   phải một luật nữa; chữ nhỏ và nhạt để không tranh chỗ với nội dung luật. */
.slot-rule-or {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}

.slot-rule-or::before,
.slot-rule-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}

.slot-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
}

/* Cùng một khối cấu hình dùng cho vùng mặc định và từng luật. Nền xanh rất
   nhạt giúp người quản trị nhận ra đây là hình học của ô ảnh, không phải giá. */
.slot-crop-config,
.slot-rule-crop {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--teal) 5%, var(--paper));
}

.slot-rule-crop {
  padding: 7px;
}

.slot-crop-dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.slot-crop-profile {
  min-width: 0;
}

.slot-crop-profile select {
  width: 100%;
}

/* 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);
  }
}

.image-slot-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

/* Ô ảnh của sản phẩm trong form quản lý. Cùng ngôn ngữ thẻ với tùy chọn ở ngay
   bên dưới, để hai danh sách đứng cạnh nhau không đá nhau. */
.image-slot-list {
  display: grid;
  gap: 9px;
}

.image-slot {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.image-slot-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 9px;
}

/* Trình soạn mục Thông tin sản phẩm. */
.info-block-section {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.info-block-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.info-block-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.info-block-list {
  display: grid;
  gap: 11px;
}

.info-block-row {
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 11px;
}

.info-block-row-tag {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Hàng trong trình soạn cũng chia cột như trang khách, để chủ shop thấy trước
   bố cục thật thay vì phải tưởng tượng. */
.info-block-row-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 9px;
}

.info-block-item {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.info-block-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.info-block-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.info-block-tools button {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.info-block-tools button:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
  color: var(--ink);
}

.info-block-tools button[disabled] {
  opacity: 0.38;
  cursor: default;
}

.info-block-tools .info-block-remove:hover {
  border-color: #d0574e;
  color: #d0574e;
}

.info-block-images {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.info-block-thumb {
  position: relative;
  display: inline-block;
}

.info-block-thumb img {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 9px;
  object-fit: cover;
}

.info-block-thumb button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 19px;
  height: 19px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1;
  cursor: pointer;
}

/* Ba ô bố cục ảnh, chỉ hiện khi mục đã có ảnh. Xếp một hàng ba trên máy tính,
   rơi xuống một cột khi hết chỗ. */
.info-block-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* Ô chọn có chữ dài; không cho co lại thì bề rộng nhỏ nhất của nó đẩy lưới
   xuống còn hai cột và ô thứ ba rơi xuống một mình. */
.info-block-layout > * {
  min-width: 0;
}

/* Không đặt lại cỡ chữ hay đệm cho ba ô này: luật chung của mọi ô nhập trong
   trang có độ ưu tiên cao hơn hẳn, chỉ phần font-size lọt qua — kết quả là ô số
   chữ nhỏ xíu nằm cạnh ô chọn chữ to. Để nguyên thì cả ba giống hệt những
   trường còn lại của cùng cửa sổ. */

.info-block-add-image {
  padding: 6px 11px;
  border: 1px dashed color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.info-block-add-image:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Chọn icon trong form sản phẩm.
   ---------------------------------------------------------------------------
   Form chỉ cho chọn từ kho, không phơi mã SVG. Giá trị SVG vẫn nằm trong một ô
   ẩn để dữ liệu cũ và API không phải đổi cấu trúc. */
.product-icon-choice {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 2%, var(--paper));
}

.product-icon-choice.has-icon {
  border-color: color-mix(in srgb, var(--card-accent, var(--teal)) 35%, var(--line));
  background: color-mix(in srgb, var(--card-accent, var(--teal)) 4%, var(--paper));
}

.product-icon-choice-copy {
  min-width: 0;
}

.product-icon-choice-copy strong,
.product-icon-choice-copy small {
  display: block;
}

.product-icon-choice-copy strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-icon-choice-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.product-icon-choice-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.product-icon-pick,
.product-icon-clear {
  min-height: 34px;
  padding: 5px 11px;
  font-size: 0.76rem;
  white-space: nowrap;
}

/* Hộp chọn là một bảng hình trực quan; thêm/sửa/xoá icon được giữ riêng trong
   khung Kho icon đầy đủ trên trang quản lý. */
.icon-library {
  width: min(760px, 100%);
}

.icon-library-tools {
  display: flex;
  gap: 11px;
  align-items: center;
  justify-content: space-between;
}

.icon-library-search {
  position: relative;
  display: block;
  flex: 1 1 320px;
  max-width: 430px;
}

.icon-library-search-mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.icon-library-search-mark svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

#iconLibrarySearch {
  width: 100%;
  padding-left: 38px;
  border-radius: 999px;
}

.icon-library-count {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 9%, var(--paper));
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.icon-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 11px;
  max-height: min(56vh, 520px);
  min-height: 124px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--ink) 2%, var(--paper));
}

.icon-tile-pick {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(21, 36, 43, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.icon-tile-pick:hover {
  border-color: color-mix(in srgb, var(--teal) 52%, var(--line));
  box-shadow: 0 8px 20px rgba(21, 36, 43, 0.1);
  transform: translateY(-2px);
}

.icon-tile-pick:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 58%, transparent);
  outline-offset: 2px;
}

.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-art-shell {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.92), transparent 45%),
    color-mix(in srgb, var(--teal) 9%, var(--paper));
  color: var(--teal-dark);
}

.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-art {
  display: grid;
  place-items: center;
  width: 58%;
  height: 58%;
}

.icon-tile-art svg {
  width: 100%;
  height: 100%;
}

/* Cùng một công thức với ô icon ở trang đặt in, để hình trong kho trông đúng
   như lúc nó lên thẻ sản phẩm. */
.icon-tile-art svg:not([fill]):not([stroke]) > :is(path, rect, circle, ellipse, line, polyline, polygon):not([fill]):not([stroke]),
.icon-tile-art 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-tile-name {
  overflow: hidden;
  width: 100%;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-tile-action {
  color: var(--muted);
  font-size: 0.64rem;
}

.icon-tile-pick.is-selected .icon-tile-action {
  color: var(--teal-dark);
  font-weight: 800;
}

.icon-tile-check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(12, 91, 84, 0.26);
}

.icon-tile-pick.is-selected .icon-tile-check {
  display: grid;
}

.icon-library-empty {
  margin: 0;
  padding: 28px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .icon-tile-pick {
    transition: none;
  }

  .icon-tile-pick:hover {
    transform: none;
  }
}

@media (max-width: 620px) {
  .product-icon-choice {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .product-icon-choice-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .icon-library-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .icon-library-search {
    flex-basis: auto;
    max-width: none;
  }

  .icon-library-count {
    align-self: flex-start;
  }

  .icon-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
    padding: 7px;
  }
}

/* Ô chọn màu nhấn trong trang quản lý sản phẩm. */
.product-accent-field {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Phải bám theo id: luật input toàn cục ở đầu file dùng chuỗi bảy :not() nên có
   độ đặc hiệu (0,7,1), cao hơn mọi bộ chọn theo lớp viết ở đây. */
#productAccent {
  /* Chiều cao để luật input chung lo, nhờ vậy nó luôn bằng ô hex bên cạnh. */
  width: 46px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 9px;
  background: none;
  cursor: pointer;
}

#productAccentHex {
  width: 120px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.product-accent-presets {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.product-accent-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
}

.product-accent-swatch:hover {
  transform: scale(1.12);
}

.product-accent-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--swatch);
  vertical-align: baseline;
}

.product-search-field {
  width: min(360px, 100%);
  margin-bottom: 13px;
}

/* Ba mục Đang bán / Nháp / Kho lưu trữ.
   Không dùng .segmented được: lớp đó khai grid hai cột nên mục thứ ba rơi hẳn
   xuống hàng dưới. Ở đây là một hàng flex tự xuống dòng khi hẹp. */
.product-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 13px;
}

.product-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.product-view-tab:hover {
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  color: var(--ink);
}

.product-view-tab.is-active {
  border-color: transparent;
  background: var(--ink);
  color: var(--paper);
}

.product-view-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: inherit;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
}

.product-view-tab.is-active .product-view-count {
  background: color-mix(in srgb, var(--paper) 26%, transparent);
}

.product-admin-key {
  width: min(420px, 100%);
}

.manager-product-list {
  display: grid;
  gap: 12px;
}

.manager-product-list:empty {
  display: none;
}

.manager-product-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

/* Sản phẩm đang ẩn vẫn phải đọc được, chỉ cần nhìn qua là biết nó không nằm
   trong lựa chọn của khách. Làm mờ hẳn thì lúc soát bảng giá lại khó đọc. */
.manager-product-card.is-hidden-product {
  border-style: dashed;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%);
}

.manager-product-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

/* Icon trên thẻ sản phẩm mang đúng màu nhấn của chính sản phẩm đó — cùng cách
   trang đặt in vẽ nó, để chủ shop nhìn thẻ là biết khách sẽ thấy gì. Màu do
   `productCardHtml()` đặt vào --card-accent; giá trị dự phòng ở đây chỉ để ô
   không mất màu nếu có chỗ nào quên truyền. */
.manager-product-icon {
  --card-accent: #11978b;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-accent) 11%, var(--paper));
  color: var(--card-accent);
}

/* Giữ tỉ lệ của chính icon thay vì ép vuông 28×28: icon dài hoặc ngang đều có,
   ép cứng là méo. */
.manager-product-icon svg {
  width: 100%;
  height: 100%;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}

/* Icon chỉ có path mà không khai fill hay stroke thì trình duyệt tô đen đặc —
   thành một vệt đen thay vì một hình nhận ra được. Vẽ bằng nét theo currentColor,
   đúng quy tắc mà ô xem trước trong form và trang đặt in đang dùng.

   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. */
.manager-product-icon svg:not([fill]):not([stroke]) > :is(path, rect, circle, ellipse, line, polyline, polygon):not([fill]):not([stroke]),
.manager-product-icon 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;
}

/* 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;
}

.manager-product-title h3 {
  margin: 0 0 3px;
  font-size: 0.98rem;
}

.manager-product-title p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.manager-product-meta {
  margin-top: 4px;
}

.manager-product-meta code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #eef3f3;
  font-size: 0.74rem;
}

.product-hidden-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--muted);
  vertical-align: middle;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manager-product-actions {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}

/* Cửa sổ sửa sản phẩm ---------------------------------------------------- */

.product-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

/* Bản dịch sản phẩm ------------------------------------------------------ */

.product-editor-utility-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--page) 52%, var(--paper));
}

.product-editor-utility-bar > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.product-editor-utility-bar strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.product-editor-utility-bar small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.product-json-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.product-localized-control {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}

.product-localized-control > input,
.product-localized-control > textarea {
  width: 100%;
  min-width: 0;
  padding-right: 44px !important;
}

.product-localized-source[hidden],
.product-localized-translation[hidden] {
  display: none !important;
}

.manager-page select.product-field-language-select {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 4px;
  width: 34px;
  min-height: 25px;
  height: 25px;
  padding: 1px 2px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--page) 58%, var(--paper));
  color: var(--ink);
  font: inherit;
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: none;
}

.manager-page select.product-field-language-select:hover,
.manager-page select.product-field-language-select:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 13%, transparent);
}

.product-localized-control.is-translated > input,
.product-localized-control.is-translated > textarea {
  border-color: color-mix(in srgb, var(--teal) 62%, var(--line));
  background: color-mix(in srgb, var(--teal) 4%, var(--paper));
}

.product-localized-control.is-translated select.product-field-language-select {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

@media (max-width: 620px) {
  .product-editor-utility-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .product-json-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

}

.product-icon-preview {
  --card-accent: #11978b;
  display: grid;
  place-items: center;
  /* Nền đậm thêm một chút cho icon nổi lên khỏi nền giấy. Kích thước KHÔNG đặt
     ở đây: ô này dùng ở hai chỗ với hai khổ khác nhau, và mỗi chỗ tự khai. */
  min-height: 66px;
  margin-top: -4px;
  border: 1px dashed color-mix(in srgb, var(--card-accent) 38%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-accent) 13%, var(--paper));
  color: var(--card-accent);
  font-size: 0.74rem;
}

/* Câu báo lỗi vẫn phải đọc được, không nhuộm theo màu nhấn. */
.product-icon-preview:not(:has(svg)) {
  color: var(--muted);
}

.product-icon-preview svg {
  width: 52px;
  height: 52px;
}

.product-icon-preview svg:not([fill]):not([stroke]) > :is(path, rect, circle, ellipse, line, polyline, polygon):not([fill]):not([stroke]),
.product-icon-preview 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;
}

.product-icon-preview:empty {
  display: none;
}

/* Trong ô chọn icon, khoảng dành cho hình luôn được giữ lại để bố cục không
   nhảy khi chọn/bỏ. Chữ ICON là trạng thái rỗng, không phải một giá trị icon. */
/* Khổ thật của ô xem trước trong form sản phẩm. Quy tắc này cụ thể hơn quy tắc
   gốc nên nó mới là chỗ quyết định — sửa nhầm ở quy tắc gốc thì không ăn thua.
   To hẳn lên để nhìn ra nét icon ngay, không phải ghé sát màn hình. */
.product-icon-choice .product-icon-preview {
  width: 86px;
  height: 86px;
  min-height: 0;
  margin: 0;
  border-style: solid;
}

.product-icon-choice .product-icon-preview:empty {
  display: grid;
}

.product-icon-choice .product-icon-preview:empty::before {
  content: "ICON";
  color: color-mix(in srgb, var(--muted) 74%, transparent);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.product-icon-choice.has-invalid-icon .product-icon-preview {
  border-color: color-mix(in srgb, #d0574e 42%, var(--line));
  background: color-mix(in srgb, #d0574e 7%, var(--paper));
}

@media (max-width: 620px) {
  .product-icon-choice .product-icon-preview {
    width: 70px;
    height: 70px;
  }

  /* Khung nhỏ lại thì icon cũng phải nhỏ theo, không thì nó chạm sát viền. */
  .product-icon-choice .product-icon-preview svg {
    width: 44px;
    height: 44px;
  }
}

.product-size-list {
  display: grid;
  gap: 10px;
}

/* Một hàng là một phần tử main option: tên, ghi chú, hai mức giá và trạng thái.
   Kích thước vùng cắt đã chuyển xuống từng ô ảnh nên không còn lẫn vào đây. */
.product-size-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
}

.product-size-row-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .manager-product-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .manager-product-icon {
    width: 44px;
    height: 44px;
  }

  .manager-product-actions {
    grid-column: 1 / -1;
    justify-content: start;
  }

  .manager-collection-card {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .manager-collection-covers {
    width: 104px;
    height: 78px;
  }

  .manager-collection-actions {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-content: start;
  }

  .manager-collection-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 620px) {
  .admin-workspace .upload-hero {
    padding: 13px 15px;
  }

  .manager-library-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .manager-library-actions {
    flex-wrap: wrap;
  }

  .manager-library-actions > * {
    flex: 1 1 130px;
  }

  .collection-picker-tools {
    padding-inline: 16px;
  }
}

/* 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.

   Cảnh báo chất lượng chỉ nổ ra sau khi khách đã chọn xong một ảnh quá nhỏ.
   Dòng này nói trước điều đó, ngay chỗ khách sắp chọn, nên phần lớn trường hợp
   sẽ không đi tới cái cảnh báo kia nữa. */
/* Dòng nhắc chất lượng ảnh.
   ---------------------------------------------------------------------------
   Giữ nguyên vị trí cũ ở góc trên bên trái của ô lưới (.preview-board), chỉ thêm
   nền vàng kem bán trong suốt để chữ dễ đọc hơn. Nền co đúng theo nội dung thay
   vì trải hết bề ngang vùng xem trước.

   Giới hạn max-width vẫn chừa 4px ở hai mép để câu nhắc tự xuống dòng khi khung
   hẹp, nhưng không đổi điểm neo top/left ban đầu.

   Chưa có ảnh thì mở đủ chữ. Có ảnh rồi thì thu về đúng cái icon, và chỉ mở lại
   khi khách hỏi tới: di chuột vào, hoặc chạm vào trên màn hình cảm ứng. */
.art-quality-hint {
  position: absolute;
  z-index: 5;
  top: 4px;
  right: auto;
  left: 4px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
  width: fit-content;
  margin: 0;
  max-width: calc(100% - 8px);
  padding: 5px 7px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 249, 228, 0.86);
  color: #7a5a12;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  /* Dải này trải hết bề ngang ô lưới nên phải trơ với chuột: nếu không, rê chuột
     ngang qua mép trên ảnh là dòng nhắc bung ra. Chỉ mỗi cái icon nhận tương
     tác — và :hover vẫn lên tới thẻ cha khi chuột chạm đúng icon. */
  pointer-events: none;
  transition: gap 0.18s ease;
}

.art-quality-hint-text {
  min-width: 0;
}

/* Thu gọn bằng display chứ không bằng max-width: 0.
   ---------------------------------------------------------------------------
   Ép rộng 0 thì chữ vẫn xuống dòng bên trong, mỗi chữ cái một hàng, và ô cao
   vống lên 734px — đo được. Bỏ hẳn chữ khỏi bố cục là cách duy nhất vừa đúng
   chiều rộng vừa đúng chiều cao. */
.art-quality-hint.is-collapsed {
  gap: 0;
  padding: 5px 6px;
  cursor: help;
}

.art-quality-hint.is-collapsed .art-quality-hint-text {
  display: none;
}

/* Chuột di vào thì mở lại. Màn hình cảm ứng không có trạng thái di chuột nên
   phần đó do JavaScript lo bằng lớp is-peek — hai đường không giẫm lên nhau. */
@media (hover: hover) {
  .art-quality-hint.is-collapsed:hover {
    gap: 7px;
  }

  .art-quality-hint.is-collapsed:hover .art-quality-hint-text {
    display: block;
  }
}

.art-quality-hint.is-collapsed.is-peek {
  gap: 7px;
}

.art-quality-hint.is-collapsed.is-peek .art-quality-hint-text {
  display: block;
}

.art-quality-hint-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  pointer-events: auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.art-quality-hint-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #c99a1f;
  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;
}

.library-modal-tools-right {
  display: flex;
  gap: 11px;
  align-items: center;
}

/* 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;
}

/* 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;
}

/* Nút tải ảnh thay thế trong thẻ đơn hàng.

   Đặt tách khỏi nút "Lưu cập nhật" bằng một đường kẻ vì hai nút này khác hẳn
   nhau về hậu quả: một cái sửa trạng thái đơn, cái kia ghi đè hẳn một tệp trong
   kho lưu trữ. */
.admin-replace-image {
  display: grid;
  gap: 7px;
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.admin-replace-image small {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

/* Ô 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;
  }
}
.upload-translated-metadata {
  display: grid;
  gap: 8px;
}

.upload-translated-metadata label {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.upload-translated-metadata label > span {
  font-size: 0.72rem;
  font-weight: 750;
  color: #60757b;
}

/* ---------------------------------------------------------------------------
   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;
}

/* Test Tool nội bộ
   ------------------------------------------------------------------------- */
.upload-admin-badge {
  text-decoration: none;
}

.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-page {
  min-width: 320px;
  background:
    radial-gradient(circle at 8% 8%, rgba(18, 143, 133, 0.1), transparent 25%),
    #f4f7f6;
}

.test-tool-app {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: 36px 0 80px;
}

.test-tool-page:not(.is-test-tool-unlocked) .test-tool-app {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

.test-tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 20px;
  padding: clamp(28px, 5vw, 48px);
  overflow: hidden;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 84% -20%, rgba(244, 190, 70, 0.3), transparent 34%),
    linear-gradient(135deg, #123f43, #117a70);
  box-shadow: 0 24px 60px rgba(18, 73, 73, 0.18);
}

.test-tool-hero .eyebrow {
  color: #9fe4da;
}

.test-tool-hero h1 {
  margin: 4px 0 10px;
  color: #fff;
  font-size: clamp(2.35rem, 6vw, 4.8rem);
  letter-spacing: -0.055em;
}

.test-tool-hero p:last-child {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* Hai thẻ trạng thái xếp chồng trong cùng một cột bên phải hero. Chồng dọc chứ
   không nằm ngang: hero đã là lưới hai cột, thêm cột thứ ba thì phần chữ bên
   trái bị bóp lại trên màn hình vừa. */
.test-tool-hero-cards {
  display: grid;
  gap: 9px;
}

.test-tool-hero-status {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 250px;
  padding: 17px 19px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.test-tool-status-dot {
  width: 12px;
  height: 12px;
  border: 3px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: #8ad59c;
  box-shadow: 0 0 0 5px rgba(138, 213, 156, 0.14);
}

.test-tool-hero-status[data-demo-status="on"] .test-tool-status-dot {
  background: #ff6b72;
  box-shadow: 0 0 0 5px rgba(255, 107, 114, 0.16);
}

/* Vàng chứ không đỏ: Demo Mode đỏ vì nó đổi hành vi của cả website với khách
   thật, còn sự cố giả lập là thứ người thử chủ động bật trong chốc lát. Hai màu
   khác nhau để liếc một cái là biết đang bật cái nào. */
.test-tool-hero-status[data-fault-status="on"] .test-tool-status-dot {
  background: #f4be46;
  box-shadow: 0 0 0 5px rgba(244, 190, 70, 0.18);
}

.test-tool-hero-status small,
.test-tool-hero-status strong {
  display: block;
}

.test-tool-hero-status small {
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.64rem;
}

.test-tool-hero-status strong {
  color: #fff;
  font-size: 0.8rem;
}

.test-tool-demo-panel,
.test-tool-demo-content-panel,
.test-tool-fault-panel,
.test-tool-data-section,
.test-tool-log {
  margin-top: 18px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid #dce8e6;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(28, 58, 62, 0.07);
}

.test-tool-section-heading {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.test-tool-section-heading > div:first-child {
  position: relative;
  padding-left: 54px;
}

.test-tool-section-index {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #147e75;
  background: #e5f6f2;
  font-size: 0.68rem;
  font-weight: 900;
}

.test-tool-section-heading h2,
.test-tool-log h2 {
  margin: 2px 0 0;
  color: #29464b;
  font-size: clamp(1.3rem, 3vw, 1.72rem);
}

.test-tool-demo-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.test-tool-demo-toggle {
  min-height: 44px;
  padding: 9px 17px;
  border: 1px solid #b92e3f;
  border-radius: 12px;
  color: #a22233;
  background: #fff1f3;
  font-weight: 900;
}

.test-tool-demo-toggle.is-active {
  color: #fff;
  background: #bd2f41;
  box-shadow: 0 10px 22px rgba(183, 42, 61, 0.2);
}

.test-tool-demo-warning {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid #efd4d7;
  border-radius: 15px;
  background: #fff7f8;
}

.test-tool-demo-warning span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: #c03243;
  font-weight: 900;
}

.test-tool-demo-warning p,
.test-tool-section-note,
.test-tool-card-hint {
  margin: 0;
  color: #66797d;
  font-size: 0.74rem;
  line-height: 1.55;
}

.test-tool-message-grid,
.test-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.test-tool-message-grid label,
.test-tool-card form > label,
.test-tool-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #50666a;
  font-size: 0.69rem;
  font-weight: 800;
}

.test-tool-message-grid label > span,
.test-tool-card label > span {
  display: flex;
  gap: 7px;
  align-items: center;
}

.test-tool-message-grid label b {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 23px;
  border-radius: 7px;
  color: #147d73;
  background: #e8f6f3;
  font-size: 0.6rem;
}

.test-tool-message-grid textarea,
.test-tool-card input,
.test-tool-card select,
.test-tool-card textarea,
.test-tool-gate-card input {
  width: 100%;
  border: 1px solid #cadbd8;
  border-radius: 11px;
  color: #29464b;
  background: #fff;
}

.test-tool-message-grid textarea,
.test-tool-card textarea {
  min-height: 84px;
  padding: 11px 12px;
  resize: vertical;
}

.test-tool-card input,
.test-tool-card select,
.test-tool-gate-card input {
  min-height: 43px;
  padding: 8px 11px;
}

.test-tool-message-grid textarea:focus,
.test-tool-card input:focus,
.test-tool-card select:focus,
.test-tool-card textarea:focus,
.test-tool-gate-card input:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(20, 143, 133, 0.1);
}

.test-tool-section-note {
  max-width: 480px;
  text-align: right;
}

.test-tool-demo-content-panel > .test-tool-section-note {
  max-width: 920px;
  margin: -7px 0 18px 54px;
  text-align: left;
}

.test-tool-demo-content-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.test-tool-clear-demo-content {
  flex: 0 0 auto;
  border-color: #efd0d5;
  color: #a52b3b;
  background: #fff7f8;
}

/* auto-fit chứ không phải bốn cột cứng: số ô tóm tắt đã lên sáu và còn có thể
   tăng nữa, nên để lưới tự chia thay vì phải sửa con số mỗi lần thêm một loại. */
.test-tool-demo-content-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px;
  margin-bottom: 13px;
}

.test-tool-demo-content-summary > div {
  --demo-summary-color: #168e83;
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--demo-summary-color) 18%, #dbe6e4);
  border-radius: 14px;
  background: color-mix(in srgb, var(--demo-summary-color) 5%, #fff);
}

.test-tool-demo-content-summary [data-tone="feedback"] { --demo-summary-color: #7d64ce; }
.test-tool-demo-content-summary [data-tone="account"] { --demo-summary-color: #d18b25; }
.test-tool-demo-content-summary [data-tone="support"] { --demo-summary-color: #2f8db8; }
.test-tool-demo-content-summary [data-tone="report"] { --demo-summary-color: #d05a62; }
.test-tool-demo-content-summary [data-tone="like"] { --demo-summary-color: #c4426f; }

.test-tool-demo-content-summary strong {
  color: var(--demo-summary-color);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.test-tool-demo-content-summary span {
  color: #687c80;
  font-size: 0.68rem;
  font-weight: 800;
}

.test-tool-demo-content-filters {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.test-tool-demo-content-filters::-webkit-scrollbar {
  display: none;
}

.test-tool-demo-content-filters button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #d7e3e1;
  border-radius: 999px;
  color: #607579;
  background: #f8faf9;
  font-size: 0.66rem;
  font-weight: 850;
}

.test-tool-demo-content-filters button.is-active {
  border-color: #167f76;
  color: #fff;
  background: #167f76;
}

.test-tool-demo-content-list {
  display: grid;
  gap: 8px;
}

.test-tool-demo-content-item {
  --demo-item-color: #168e83;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--demo-item-color) 16%, #dce7e5);
  border-left: 4px solid var(--demo-item-color);
  border-radius: 14px;
  background: #fff;
}

.test-tool-demo-content-item[data-tone="feedback"] { --demo-item-color: #7d64ce; }
.test-tool-demo-content-item[data-tone="account"] { --demo-item-color: #d18b25; }
.test-tool-demo-content-item[data-tone="support"] { --demo-item-color: #2f8db8; }
.test-tool-demo-content-item[data-tone="report"] { --demo-item-color: #d05a62; }

.test-tool-demo-content-kind span,
.test-tool-demo-content-kind time {
  display: block;
}

.test-tool-demo-content-kind span {
  color: var(--demo-item-color);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.test-tool-demo-content-kind time {
  margin-top: 3px;
  color: #8a999c;
  font-size: 0.61rem;
}

.test-tool-demo-content-main {
  min-width: 0;
}

.test-tool-demo-content-main strong,
.test-tool-demo-content-main p,
.test-tool-demo-content-main small {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-tool-demo-content-main strong {
  color: #314c50;
  font-size: 0.78rem;
}

.test-tool-demo-content-main p {
  margin-top: 3px;
  color: #627579;
  font-size: 0.69rem;
}

.test-tool-demo-content-main small {
  margin-top: 4px;
  color: #8a999c;
  font-size: 0.61rem;
}

.test-tool-demo-content-item > button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #ead6d9;
  border-radius: 10px;
  color: #a33241;
  background: #fff8f9;
  font-size: 0.65rem;
  font-weight: 850;
}

.test-tool-demo-content-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 18px;
  border: 1px dashed #cadbd8;
  border-radius: 15px;
  color: #718489;
  background: #f8fbfa;
}

.test-tool-demo-content-empty > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #6f8588;
  background: #e6efed;
  font-weight: 900;
}

.test-tool-demo-content-empty strong {
  color: #456065;
  font-size: 0.76rem;
}

.test-tool-demo-content-empty p {
  margin: 3px 0 0;
  font-size: 0.67rem;
  line-height: 1.5;
}

.test-tool-card {
  --test-card-color: #168e83;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--test-card-color) 22%, #dbe6e4);
  border-radius: 19px;
  background: color-mix(in srgb, var(--test-card-color) 4%, #fff);
}

.test-tool-card.is-feedback { --test-card-color: #7d64ce; }
.test-tool-card.is-support { --test-card-color: #2f8db8; }
.test-tool-card.is-bug { --test-card-color: #d05a62; }
.test-tool-card.is-likes { --test-card-color: #d69629; }

.test-tool-card header {
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--test-card-color) 16%, transparent);
}

.test-tool-card header span {
  color: var(--test-card-color);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.test-tool-card h3 {
  margin: 3px 0 0;
  color: #314b50;
  font-size: 1rem;
}

.test-tool-card form {
  display: grid;
  gap: 11px;
}

.test-tool-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.test-tool-card button[type="submit"] {
  justify-self: start;
  margin-top: 3px;
}

.test-tool-card label.is-account-required > span::after {
  color: #bd2f41;
  content: "*";
}

/* ---------------------------------------------------------------------------
   Khu giả lập API và email hỏng
   --------------------------------------------------------------------------- */

/* Hộp cảnh báo của khu này có hai đoạn, mà lưới gốc chỉ tính đúng một: đoạn thứ
   hai sẽ rơi vào cột 38px của icon. Cho icon chiếm cả hai hàng là hai đoạn cùng
   về cột chữ. Màu cũng đổi sang vàng cho khớp chấm trạng thái của sự cố — đỏ là
   màu dành riêng cho Demo Mode. */
.test-tool-fault-panel .test-tool-demo-warning {
  align-items: start;
  border-color: #f0dcae;
  background: #fffcf3;
}

.test-tool-fault-panel .test-tool-demo-warning span {
  grid-row: 1 / span 2;
  background: #c98b12;
}

.test-tool-fault-panel .test-tool-demo-warning p + p {
  margin-top: 6px;
}

.test-tool-fault-style {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
}

.test-tool-fault-style label {
  display: grid;
  gap: 5px;
  min-width: 210px;
}

.test-tool-fault-style label > span {
  color: #55696d;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Chọn theo id: luật input chung của trang có sáu lớp phủ định nên thắng mọi
   selector viết bằng tên lớp ở đây. */
#apiFaultStyle,
#apiFaultDelay {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d5e2e0;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 0.8rem;
}

#apiFaultStyle:focus,
#apiFaultDelay:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(20, 143, 133, 0.1);
}

.test-tool-fault-count {
  margin: 0 0 3px;
  color: #55696d;
  font-size: 0.74rem;
  font-weight: 700;
}

.test-tool-fault-groups {
  display: grid;
  gap: 12px;
}

.test-tool-fault-group {
  padding: 14px 16px 16px;
  border: 1px solid #dce8e6;
  border-radius: 18px;
  background: #fbfdfc;
}

/* Nhóm nào đang có API bị tắt thì tự đổi viền — không phải đọc từng nút mới
   biết mình đã tắt cái gì ở đâu. */
.test-tool-fault-group[data-has-fault="true"] {
  border-color: #f0dcae;
  background: #fffcf3;
}

.test-tool-fault-group > header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.test-tool-fault-group h3 {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}

.test-tool-fault-group > header button {
  padding: 6px 12px;
  border: 1px solid #d5e2e0;
  border-radius: 999px;
  color: #3d5457;
  background: #fff;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.test-tool-fault-group > header button:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.test-tool-fault-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

/* Tên API xuống dòng được và chữ trạng thái nằm hàng dưới, không tranh chỗ với
   tên. Xếp cả ba trên một hàng thì tên dài như "Tra cứu đơn không cần đăng
   nhập" bị cắt cụt bằng dấu ba chấm — mà một danh sách API cắt cụt tên thì
   không dùng được: người bấm phải đọc ra mình đang tắt cái gì. */
.test-tool-fault-chip {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 3px 9px;
  align-items: start;
  padding: 10px 13px;
  border: 1px solid #dce8e6;
  border-radius: 13px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.test-tool-fault-chip:hover {
  border-color: #b7cfcb;
}

.test-tool-fault-chip[aria-pressed="true"] {
  border-color: #e8bf6a;
  background: #fff6e4;
}

.test-tool-fault-dot {
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: #6cc08a;
}

.test-tool-fault-chip[aria-pressed="true"] .test-tool-fault-dot {
  background: #d8901f;
}

.test-tool-fault-name {
  color: #1d3336;
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.test-tool-fault-chip small {
  color: #7d9094;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.test-tool-fault-chip[aria-pressed="true"] small {
  color: #a5701a;
}

.test-tool-log {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  gap: 24px;
}

.test-tool-log ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.test-tool-log li {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #52686c;
  background: #f2f7f6;
  font-size: 0.72rem;
  line-height: 1.45;
}

.test-tool-log li[data-kind="error"] { color: #9e2b38; background: #fff1f3; }
.test-tool-log li[data-kind="demo"] { color: #94402e; background: #fff4ee; }
.test-tool-log li[data-kind="fault"] { color: #8a6412; background: #fff9ec; }

.test-tool-log time {
  color: #839397;
  font-variant-numeric: tabular-nums;
}

.test-tool-gate {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 35, 38, 0.68);
  backdrop-filter: blur(15px);
}

.test-tool-gate[hidden] {
  display: none;
}

.test-tool-gate-card {
  width: min(430px, 100%);
  padding: clamp(26px, 6vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(9, 26, 29, 0.32);
  text-align: center;
}

.test-tool-gate-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #14968a, #0f6f68);
  box-shadow: 0 14px 26px rgba(17, 125, 117, 0.22);
  font-size: 1.4rem;
  font-weight: 900;
}

.test-tool-gate-card h1 {
  margin: 4px 0 10px;
  color: #29464b;
  font-size: 1.65rem;
}

.test-tool-gate-card > p:not(.eyebrow) {
  margin: 0 auto 20px;
  color: #6a7d80;
  font-size: 0.78rem;
  line-height: 1.6;
}

.test-tool-gate-card form {
  display: grid;
  gap: 12px;
  text-align: left;
}

.test-tool-gate-card label {
  display: grid;
  gap: 6px;
  color: #52686c;
  font-size: 0.7rem;
  font-weight: 800;
}

.test-tool-gate-card > a {
  display: inline-block;
  margin-top: 17px;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 800;
}

@media (max-width: 900px) {
  .test-tool-hero,
  .test-tool-log {
    grid-template-columns: 1fr;
  }

  .test-tool-hero-status {
    min-width: 0;
  }

  .test-tool-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .test-tool-section-note {
    max-width: none;
    text-align: left;
  }
}

@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;
  }

  .test-tool-app {
    width: min(100% - 20px, 640px);
    padding-top: 18px;
  }

  .test-tool-hero,
  .test-tool-demo-panel,
  .test-tool-demo-content-panel,
  .test-tool-fault-panel,
  .test-tool-data-section,
  .test-tool-log {
    border-radius: 20px;
  }

  .test-tool-hero {
    padding: 25px 20px;
  }

  .test-tool-message-grid,
  .test-tool-grid,
  .test-tool-form-grid {
    grid-template-columns: 1fr;
  }

  .test-tool-demo-content-panel > .test-tool-section-note {
    margin-left: 0;
  }

  .test-tool-demo-content-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .test-tool-demo-content-actions,
  .test-tool-fault-style label {
    width: 100%;
  }

  .test-tool-demo-content-actions button {
    flex: 1 1 0;
  }

  .test-tool-fault-list {
    grid-template-columns: 1fr;
  }

  .test-tool-demo-content-item {
    grid-template-columns: 1fr auto;
  }

  .test-tool-demo-content-kind {
    grid-column: 1 / -1;
  }

  .test-tool-demo-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .test-tool-demo-actions button {
    padding-inline: 10px;
    font-size: 0.7rem;
  }
}

/* Liên kết đối tác trong hộp Thông tin sản phẩm.
   ---------------------------------------------------------------------------
   Nằm cuối hộp, tách khỏi các mục thông tin bằng một đường kẻ mảnh: đây là chỗ
   đưa khách RA KHỎI trang, nên không được trông giống một mục nội dung. */
.product-info-partner {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.product-info-partner[hidden] { display: none; }

.product-info-partner a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: none;
}

.product-info-partner a::after {
  /* Mũi tên chéo: dấu quy ước cho liên kết mở tab mới. */
  content: "↗";
  font-size: 0.9em;
}

.product-info-partner a:hover,
.product-info-partner a:focus-visible {
  text-decoration: underline;
}

/* Công cụ dựng bù bản ảnh nhỏ (dung-bu-anh.html).
   ---------------------------------------------------------------------------
   Trang quản trị dùng một lần rồi thôi, nên dùng lại token và lớp có sẵn thay
   vì dựng một hệ riêng. */
.bb-panel { display: grid; gap: 16px; padding: 20px; }

.bb-canh-bao {
  padding: 13px 15px;
  border: 1px solid #e7d5a8;
  border-left: 4px solid #d9a441;
  border-radius: 12px;
  background: #fdf9ee;
  color: #5c5334;
  font-size: 0.9rem;
  line-height: 1.55;
}

.bb-dieu-khien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.bb-o { display: grid; gap: 7px; min-width: 0; }

.bb-o > span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bb-o > span small { font-weight: 600; text-transform: none; color: var(--muted); }

.bb-o input,
.bb-o select {
  width: 100%;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: inherit;
  font: inherit;
}

.bb-hang-nut { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-trang-thai { margin: 0; color: var(--muted); }

.bb-thanh {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e7eef0;
}

.bb-thanh-trong {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: width 0.2s ease;
}

.bb-nhat-ky {
  display: grid;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}

.bb-nhat-ky li {
  padding: 6px 10px;
  border-radius: 8px;
  background: #fafcfc;
  overflow-wrap: anywhere;
}

.bb-nhat-ky li.la-xong { background: #f1f9f8; color: var(--teal-dark); }
.bb-nhat-ky li.la-thieu { background: #fdf9ee; color: #7a6420; }
.bb-nhat-ky li.la-hong { background: #fdf2f3; color: #a03a48; }

/* ========================= ĐỒNG BỘ DATABASE ========================= */
.db-sync-page {
  background:
    radial-gradient(circle at 6% 7%, rgba(53, 185, 199, 0.12), transparent 25%),
    radial-gradient(circle at 94% 18%, rgba(128, 105, 215, 0.1), transparent 24%),
    #f5f8f9;
}

.db-sync-app {
  display: grid;
  gap: 22px;
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 64px;
}

.db-sync-hero {
  margin: 0;
}

.db-sync-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border-color: rgba(236, 99, 134, 0.24);
  background: linear-gradient(135deg, rgba(255, 247, 249, 0.98), rgba(255, 252, 242, 0.98));
}

.db-sync-warning-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #ec6386;
  color: #fff;
  font-weight: 900;
}

.db-sync-warning p,
.db-sync-receiver p,
.db-sync-run-row p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.db-sync-controller,
.db-sync-receiver,
.db-sync-table-panel,
.db-sync-log-panel {
  padding: clamp(20px, 3vw, 30px);
}

.db-sync-section-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.db-sync-section-heading h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.db-sync-connection-badge,
.db-sync-status,
.db-sync-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.db-sync-connection-badge {
  padding: 8px 12px;
}

.db-sync-connection-badge::before,
.db-sync-legend span::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.db-sync-connection-badge[data-state="offline"],
.db-sync-connection-badge[data-state="waiting"] {
  border-color: #ead9ad;
  background: #fff9e9;
  color: #846712;
}

.db-sync-connection-badge[data-state="online"] {
  border-color: rgba(26, 151, 138, 0.24);
  background: #eaf8f5;
  color: #0d7469;
}

.db-sync-connect-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
}

.db-sync-connect-row label,
.db-sync-dialog label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
}

.db-sync-connect-row input,
.db-sync-dialog input {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(35, 66, 73, 0.17);
  border-radius: 13px;
  outline: 0;
  background: #fff;
  color: var(--ink);
}

.db-sync-connect-row input:focus,
.db-sync-dialog input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 170, 156, 0.13);
}

.db-sync-receiver-origin {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px dashed rgba(23, 170, 156, 0.35);
  border-radius: 13px;
  background: rgba(234, 248, 245, 0.82);
  color: #0d7469;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.db-sync-table-heading {
  align-items: end;
}

.db-sync-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.db-sync-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 16px;
}

.db-sync-legend span {
  padding: 6px 9px;
  border-color: rgba(35, 66, 73, 0.11);
  background: #f8fafb;
  color: #62747b;
}

.db-sync-legend span[data-state="same"] { color: #0d7469; background: #eaf8f5; }
.db-sync-legend span[data-state="different"] { color: #a24d08; background: #fff4e4; }
.db-sync-legend span[data-state="missing"] { color: #9b3e5d; background: #fff0f5; }
.db-sync-legend span[data-state="protected"] { color: #6753ae; background: #f1edff; }

.db-sync-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(35, 66, 73, 0.12);
  border-radius: 18px;
  background: #fff;
}

.db-sync-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  color: var(--ink);
}

.db-sync-table th,
.db-sync-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(35, 66, 73, 0.08);
  text-align: left;
  vertical-align: middle;
}

.db-sync-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f8f8;
  color: #51646a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.db-sync-table tbody tr:last-child th,
.db-sync-table tbody tr:last-child td {
  border-bottom: 0;
}

.db-sync-table tbody tr:hover {
  background: rgba(239, 248, 248, 0.5);
}

.db-sync-table tbody tr[data-state="protected"] {
  background: rgba(243, 239, 255, 0.52);
}

.db-sync-table code {
  display: block;
  color: #163f45;
  font-size: 0.82rem;
  font-weight: 800;
}

.db-sync-table th small,
.db-sync-table td small {
  display: block;
  margin-top: 4px;
  color: #7b8d92;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
}

.db-sync-table select {
  min-width: 190px;
  min-height: 40px;
  padding: 8px 32px 8px 10px;
  border: 1px solid rgba(35, 66, 73, 0.14);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.db-sync-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.db-sync-status {
  padding: 6px 9px;
}

.db-sync-status[data-state="same"] { color: #0d7469; background: #eaf8f5; }
.db-sync-status[data-state="different"] { color: #a24d08; background: #fff4e4; }
.db-sync-status[data-state="missing"] { color: #9b3e5d; background: #fff0f5; }
.db-sync-status[data-state="protected"] { color: #6753ae; background: #f1edff; }

.db-sync-loading {
  padding: 34px !important;
  color: var(--muted);
  text-align: center !important;
}

.db-sync-loading.is-error {
  color: #a03a48;
}

.db-sync-run-row {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 17px 18px;
  border-radius: 16px;
  background: linear-gradient(130deg, rgba(230, 247, 244, 0.96), rgba(244, 241, 255, 0.96));
}

.db-sync-live-progress {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.db-sync-live-progress > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.db-sync-live-progress progress {
  width: 100%;
  height: 11px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e5eeee;
  accent-color: var(--teal);
}

.db-sync-log {
  display: grid;
  gap: 7px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.db-sync-log li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f7f9fa;
  color: #41555b;
  font-size: 0.8rem;
}

.db-sync-log time {
  color: #829298;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.db-sync-log li[data-kind="success"] { background: #edf9f6; color: #0d7469; }
.db-sync-log li[data-kind="warning"] { background: #fff7e8; color: #86620d; }
.db-sync-log li[data-kind="error"] { background: #fff0f2; color: #a03a48; }

.db-sync-dialog {
  width: min(560px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(13, 48, 54, 0.28);
}

.db-sync-dialog::backdrop {
  background: rgba(13, 38, 43, 0.58);
  backdrop-filter: blur(4px);
}

.db-sync-dialog form {
  display: grid;
  gap: 15px;
  padding: clamp(22px, 4vw, 32px);
}

.db-sync-dialog h2,
.db-sync-dialog p {
  margin: 0;
}

.db-sync-confirm-danger {
  padding: 13px 14px;
  border: 1px solid rgba(236, 99, 134, 0.3);
  border-radius: 13px;
  background: #fff1f4;
  color: #9f3655;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}

.db-sync-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 820px) {
  .db-sync-app {
    width: min(100% - 16px, 1440px);
    padding-top: 14px;
  }

  .db-sync-connect-row {
    grid-template-columns: 1fr 1fr;
  }

  .db-sync-connect-row label {
    grid-column: 1 / -1;
  }

  .db-sync-section-heading,
  .db-sync-run-row {
    align-items: stretch;
    flex-direction: column;
  }

  .db-sync-selection-actions,
  .db-sync-run-row .primary-button {
    width: 100%;
  }

  .db-sync-selection-actions > button {
    flex: 1 1 160px;
  }
}

@media (max-width: 480px) {
  .db-sync-controller,
  .db-sync-receiver,
  .db-sync-table-panel,
  .db-sync-log-panel {
    padding: 17px 14px;
  }

  .db-sync-connect-row {
    grid-template-columns: 1fr;
  }

  .db-sync-connect-row label {
    grid-column: auto;
  }

  .db-sync-warning {
    grid-template-columns: 1fr;
  }

  .db-sync-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}