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

  color-scheme: light;
  --bg: #f5f8fb;
  --paper: #ffffff;
  --paper-soft: #fbfcf7;
  --ink: #18232d;
  --muted: #687684;
  --line: #dce6ee;
  --line-strong: #b9c7d3;
  --teal: #139b8f;
  --teal-dark: #08776e;
  --coral: #ef6461;
  /* Vàng của bộ màu K-R-O-M-A. Trước đây có ba biến cho cùng một vai trò —
     `--ka-yellow`, `--sun` (#f4bd4f) và `--about-yellow` — nên sửa màu thương
     hiệu phải nhớ sửa ba chỗ. Nay chỉ còn một, và khai báo nằm ở `:root` của
     tệp này vì `admin.html` không nạp `account-ui.css`: biến không tồn tại thì
     cả khai báo dùng nó bị vô hiệu, đúng kiểu lỗi "tàng hình" từng gặp. */
  --ka-yellow: #f6c852;
  --violet: #725ac1;
  --green: #4f9f68;
  --danger: #c94b4b;
  --shadow: 0 16px 36px rgba(27, 40, 54, 0.12);
  --radius: 8px;
  --header-h: 64px;
  --scrollbar-size: 5px;
  --scrollbar-thumb: #2da99b;
  --scrollbar-thumb-hover: #ef8a78;
  --scrollbar-track: #edf8f6;
  --font-ui: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-brand: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
html {
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
@supports selector(::-webkit-scrollbar){
* {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
html {
    scrollbar-color: auto;
    scrollbar-width: none;
  }
}
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
  border-radius: 999px;
  background-color: var(--scrollbar-track);
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
}
*::-webkit-scrollbar-thumb {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--scrollbar-thumb);
  background-clip: content-box;
  box-shadow: inset 0 0 0 1px rgba(5, 104, 95, 0.08);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb);
  box-shadow: inset 0 0 0 1px rgba(157, 68, 54, 0.08);
}
@keyframes kromadeNativeScrollbarSweep {
  0%,
  100% {
    background: var(--scrollbar-thumb);
  }
  16% {
    background: linear-gradient(
      135deg,
      #35b9c7 0%,
      #f6c852 33%,
      #ec6386 66%,
      #8069d7 100%
    );
    background-size: 280% 280%;
    background-position: 0% 0%;
  }
  72% {
    background: linear-gradient(
      135deg,
      #35b9c7 0%,
      #f6c852 33%,
      #ec6386 66%,
      #8069d7 100%
    );
    background-size: 280% 280%;
    background-position: 100% 100%;
  }
}
@media (hover: hover) and (min-width: 641px){
*::-webkit-scrollbar:hover {
    width: 9px;
    height: 9px;
  }
*::-webkit-scrollbar-thumb:hover {
    animation: kromadeNativeScrollbarSweep 900ms ease-out both;
  }
}
*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.page-scrollbar {
  position: fixed;
  z-index: 9998;
  top: 3px;
  right: 0;
  bottom: 3px;
  width: var(--scrollbar-size);
  overflow: hidden;
  border-radius: 999px;
  opacity: 1;
  pointer-events: auto;
  cursor: default;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 200ms ease,
    transform 430ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.page-scrollbar::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  content: "";
}
.page-scrollbar-thumb {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: max(3px, calc(var(--scrollbar-size) - 2px));
  height: var(--page-scrollbar-thumb-height, 36px);
  min-height: 34px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  box-shadow:
    inset 0 0 0 1px rgba(5, 104, 95, 0.08),
    0 2px 7px rgba(10, 112, 102, 0.18);
  transform: translate3d(0, var(--page-scrollbar-thumb-offset, 0px), 0);
  cursor: grab;
  transition: width 180ms ease, box-shadow 180ms ease;
  will-change: height, transform, width;
}
.page-scrollbar-thumb::after {
  position: absolute;
  inset: -45% -70%;
  content: "";
  background: linear-gradient(
    180deg,
    transparent 8%,
    rgba(53, 185, 199, 0.95) 26%,
    rgba(246, 200, 82, 0.96) 43%,
    rgba(236, 99, 134, 0.96) 58%,
    rgba(128, 105, 215, 0.95) 74%,
    transparent 92%
  );
  opacity: 0;
  pointer-events: none;
  transform: translateY(-55%);
}
.page-scrollbar.is-dragging .page-scrollbar-thumb {
  cursor: grabbing;
}
@keyframes pageScrollbarKromadeSweep {
  0% {
    opacity: 0;
    transform: translateY(-55%);
  }
  18% {
    opacity: 0.95;
  }
  72% {
    opacity: 0.78;
  }
  100% {
    opacity: 0;
    transform: translateY(55%);
  }
}
@media (hover: hover) and (min-width: 641px){
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover {
    width: 9px;
  }
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover .page-scrollbar-thumb {
    width: 7px;
    box-shadow:
      inset 0 0 0 1px rgba(5, 104, 95, 0.08),
      0 3px 10px rgba(10, 112, 102, 0.24);
  }
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover .page-scrollbar-thumb::after {
    animation: pageScrollbarKromadeSweep 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce){
*::-webkit-scrollbar-thumb:hover {
    animation: none !important;
  }
.page-scrollbar:not(.is-modal-hidden):not(.is-inactive):hover .page-scrollbar-thumb::after {
    animation: none !important;
  }
}
.page-scrollbar.is-modal-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, calc(100vh + 18px), 0);
  transition:
    opacity 80ms linear 560ms,
    transform 560ms cubic-bezier(0.4, 0, 0.2, 1);
}
.page-scrollbar.is-inactive,
html.is-page-loading .page-scrollbar {
  opacity: 0;
  pointer-events: none;
}
body.is-modal-scroll-locked {
  position: fixed;
  top: var(--modal-scroll-lock-offset, 0);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden !important;
}
@media (prefers-reduced-motion: reduce){
.page-scrollbar {
    transition: opacity 120ms ease;
  }
.page-scrollbar.is-modal-hidden {
    transform: none;
    transition: opacity 120ms ease;
  }
.page-scrollbar-thumb::after {
    animation: none !important;
  }
}
@media (max-width: 640px){
.page-scrollbar {
    width: 1px;
  }
.page-scrollbar-thumb {
    width: 1px;
    border: 0;
    box-shadow: none;
  }
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.5;
}
body.site-footer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.site-footer-page > main {
  margin-bottom: clamp(54px, 7vw, 96px);
}
body.site-footer-page > .site-footer {
  margin-top: auto;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: var(--header-h);
  padding: 8px clamp(16px, 4vw, 42px);
  border-bottom: 1px solid rgba(220, 230, 238, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  width: clamp(156px, 18vw, 230px);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.brand-mark,
.button-icon,
.upload-icon,
.service-code {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: 0;
}
.brand-logo-image {
  width: 100%;
  height: 56px;
  border-radius: var(--radius);
  object-fit: contain;
  object-position: center;
}
.auth-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 9px;
  min-width: 0;
}
.top-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.top-nav::-webkit-scrollbar {
  display: none;
}
.nav-link,
.login-button,
.signup-button,
.text-button,
.stepper,
.modal-close {
  border: 0;
  background: transparent;
  color: var(--ink);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link[hidden] {
  display: none;
}
.nav-link:hover {
  background: #edf7f5;
  color: var(--teal-dark);
}
.nav-link.is-active {
  background: transparent;
  color: var(--teal-dark);
}
.login-button,
.signup-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 15px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.login-button {
  border: 1px solid #d2e0e1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 247, 0.96));
  color: var(--ink);
  box-shadow: 0 7px 19px rgba(38, 71, 76, 0.08);
}
.signup-button {
  border: 1px solid #07847a;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(135deg, #20b3a3, #087a72);
  color: white;
  box-shadow:
    0 9px 22px rgba(8, 122, 114, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.login-button .button-icon {
  display: inline-grid;
}
.login-button.is-account {
  min-height: 44px;
  max-width: min(270px, 38vw);
  padding: 4px 11px 4px 5px;
  border-color: #b8dcd8;
  color: #17383a;
  background:
    radial-gradient(circle at 8% 18%, rgba(45, 190, 175, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff, #f0faf8);
  box-shadow:
    0 9px 24px rgba(26, 91, 89, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.login-button.is-account .button-icon {
  position: relative;
  display: inline-grid;
  color: #fff;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(145deg, #24b3a3, #087a72);
  box-shadow:
    0 7px 16px rgba(8, 122, 114, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.login-button.is-account #loginLabel {
  overflow: hidden;
  color: #17383a;
  font-family: var(--font-brand);
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
}
.login-button.is-account::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: -3px 1px 0 2px;
  border-right: 1.8px solid #5a7779;
  border-bottom: 1.8px solid #5a7779;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}
.login-button.is-account[aria-expanded="true"]::after {
  margin-top: 3px;
  transform: rotate(225deg);
}
.login-button.is-account[aria-expanded="true"] {
  border-color: #73c3ba;
  background: #ecf8f6;
  box-shadow:
    0 0 0 4px rgba(19, 155, 143, 0.1),
    0 12px 28px rgba(26, 91, 89, 0.13);
}
.account-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  right: 0;
  width: min(300px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(23, 43, 52, 0.18);
}
.account-menu[hidden] {
  display: none;
}
.account-menu-logout {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 1px solid #efc4c4;
  border-radius: 10px;
  color: #a63232;
  background: #fff7f7;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}
.account-menu-logout:hover,
.account-menu-logout:focus-visible {
  color: #fff;
  background: #b73d3d;
  outline: none;
}
/* Hộp chọn ngôn ngữ và tiền tệ trong header.
   ---------------------------------------------------------------------------
   Gộp từ ba control cũ — hai nút ¥/$ luôn hiện cộng một nút ngôn ngữ — thành
   một nút mở ra bảng, theo cách AliExpress làm. Nút chỉ mang cờ, mã ngôn ngữ và
   mã tiền tệ: đủ để biết trang đang ở trạng thái nào mà tốn ít chỗ hơn hẳn. */
.locale-switcher {
  position: relative;
  flex: 0 0 auto;
}
.locale-switcher-trigger {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.locale-switcher-trigger:hover,
.locale-switcher.is-open .locale-switcher-trigger {
  border-color: var(--teal);
  background: #fff;
}
.locale-switcher-trigger:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}
.locale-switcher-flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
}
.locale-switcher-summary {
  white-space: nowrap;
}
.locale-switcher-caret {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.18s ease;
}
.locale-switcher.is-open .locale-switcher-caret {
  transform: rotate(180deg);
}
.locale-switcher-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 12px;
  width: min(280px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(16, 40, 47, 0.16);
}
.locale-switcher-panel[hidden] {
  display: none;
}
.locale-switcher-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.locale-switcher-field > span {
  font-size: 0.82rem;
  font-weight: 800;
}
.locale-switcher-field select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.locale-switcher-field select:focus-visible {
  border-color: var(--teal);
  outline: 2px solid var(--teal-dark);
  outline-offset: 1px;
}
/* Nút Lưu mượn nguyên hình dáng của .about-button.about-hero-v2-button-primary
   bên trang giới thiệu công ty.

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

  .locale-switcher-summary {
    display: none;
  }
}
/* Nút Lưu co lại đúng lúc nút bên trang giới thiệu co lại: .about-button có
   sẵn một bản nhỏ ở khổ này, chép nốt cho hai nút giống nhau ở mọi khổ màn
   hình chứ không chỉ ở khổ rộng. */
@media (max-width: 620px) {
  .locale-switcher-save {
    min-height: 46px;
    padding: 10px 17px;
    font-size: 0.72rem;
  }
}
.signup-button:hover {
  border-color: #056d66;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(135deg, #159f92, #066b64);
  box-shadow:
    0 13px 28px rgba(8, 122, 114, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.login-button:hover {
  border-color: #91c8c2;
  background: linear-gradient(135deg, #ffffff, #eaf7f5);
  color: var(--teal-dark);
  box-shadow: 0 11px 25px rgba(26, 91, 89, 0.13);
  transform: translateY(-2px);
}
.login-button:active,
.signup-button:active {
  transform: translateY(0);
}
.button-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #cce3df;
  border-radius: 11px;
  background: #eaf7f4;
  color: #08776e;
  font-size: 0.68rem;
  font-weight: 900;
}
.button-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-button.is-account .button-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
}
.login-button.is-account .button-icon::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #45bf73;
}
.app {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 28px clamp(14px, 3vw, 34px) 56px;
}
.view {
  display: none;
}
.view.is-active {
  display: block;
}
.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;
}
@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); }
}
/* 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);
  }
}
.admin-record-row:hover,
.admin-record-row:focus-visible,
.admin-record-row.is-active {
  border-color: rgba(19, 151, 143, 0.36);
  background: var(--admin-record-hover-bg);
  transform: translateY(-1px);
}
.admin-order-origin.is-account {
  color: #087d76;
  background: #dff6f1;
}
.admin-login-card > p:not(.eyebrow) {
  margin-bottom: 20px;
  color: var(--muted);
  line-height: 1.65;
}
@keyframes checkoutGuestDetailsReveal {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

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

  to {
    max-height: var(--total-step-open-height);
    margin-top: 14px;
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0) scaleY(1);
  }
}
/* Số đang chạy: nhích lên khi tăng, nhích xuống khi giảm. Chỉ là một cái hích
   nhẹ đi kèm việc đếm, đủ để mắt bắt được hướng thay đổi. */
[data-tong-so] {
  display: inline-block;
  transition: transform 0.18s ease, color 0.18s ease;
}
@media (prefers-reduced-motion: reduce){
[data-tong-so] {
    transition: none;
  }
}
@keyframes checkout-address-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes checkout-address-modal-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.checkout-address-empty .secondary-button {
  justify-self: center;
  margin-top: 5px;
}
.checkout-address-empty.is-error strong {
  color: #a24141;
}
/* 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-card:hover,
.service-card.is-active,
.size-card:hover,
.size-card.is-active,
.sample-button:hover,
.sample-button.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.service-card.is-active .service-code {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 2px rgba(19, 155, 143, 0.24);
}
.option-header span,
#sizeHint,
#unitPrice {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}
.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);
}
.product-stage.has-image.is-dragging {
  cursor: grabbing;
}
.crop-tool,
.checkout-form label,
.feedback-form label,
.login-modal label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  transition: color 160ms ease;
}
@keyframes crop-center-arrival {
  0%,
  100% {
    box-shadow:
      0 2px 7px rgba(6, 115, 108, 0.16),
      0 0 0 0 rgba(23, 156, 145, 0.12);
  }
  48% {
    box-shadow:
      0 3px 11px rgba(6, 115, 108, 0.24),
      0 0 0 6px rgba(23, 156, 145, 0.13);
  }
}
@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);
  }
}
.crop-confirm-button.is-dragging {
  border-color: #67bdb5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 13px 28px rgba(17, 112, 102, 0.16);
  cursor: grabbing;
}
.crop-confirm-button.is-dragging .crop-confirm-fill {
  transition: none;
}
.crop-confirm-button.is-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-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-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-button.is-dragging .crop-confirm-thumb {
  box-shadow: 0 7px 18px rgba(8, 119, 110, 0.32);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.crop-confirm-button.is-at-start:not(.is-disabled):not(.is-dragging):not(.is-loading) .crop-confirm-thumb {
  animation: crop-confirm-thumb-hint 11.3s ease-in-out infinite;
}
.crop-confirm-button.is-at-start:not(.is-disabled):not(.is-dragging):not(.is-loading) .crop-confirm-fill {
  animation: crop-confirm-fill-hint 11.3s ease-in-out infinite;
}
@keyframes crop-confirm-thumb-hint {
  0%,
  88.5%,
  93.5%,
  97.5%,
  100% {
    translate: 0 0;
  }
  91%,
  96% {
    translate: 11px 0;
  }
}
@keyframes crop-confirm-fill-hint {
  0%,
  88.5%,
  93.5%,
  97.5%,
  100% {
    width: var(--confirm-slide-fill);
  }
  91%,
  96% {
    width: calc(var(--confirm-slide-fill) + 11px);
  }
}
.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);
  }
}
.summary-row.total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 900;
}
.summary-row.total strong {
  color: var(--coral);
  font-size: 1.16rem;
}
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eef3f6;
}
.segmented button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}
.segmented button.is-active {
  background: var(--paper);
  color: var(--teal-dark);
  box-shadow: 0 5px 12px rgba(24, 35, 45, 0.08);
}
.auth-tabs {
  margin-right: 42px;
}
.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible,
.password-visibility-toggle.is-visible {
  color: var(--teal-dark);
  background: rgba(19, 155, 143, 0.1);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input),
textarea,
select {
  width: 100%;
  border: 1px solid rgba(185, 199, 211, 0.78);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 251, 0.94));
  color: var(--ink);
  padding: 11px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 6px 16px rgba(29, 43, 54, 0.04);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}
textarea {
  min-height: 92px;
  resize: vertical;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input)::placeholder,
textarea::placeholder {
  color: #8fa0aa;
  opacity: 0.86;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input):hover,
textarea:hover,
select:hover {
  border-color: rgba(19, 155, 143, 0.32);
  background:
    linear-gradient(180deg, #ffffff, #f8fcfb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(8, 119, 110, 0.06);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input):focus,
textarea:focus,
select:focus {
  border-color: rgba(19, 155, 143, 0.68);
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(19, 155, 143, 0.12),
    0 10px 22px rgba(8, 119, 110, 0.09);
  outline: none;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crop-number):not(.account-album-search-input):not(.account-address-input):disabled,
textarea:disabled,
select:disabled {
  border-color: rgba(185, 199, 211, 0.45);
  background: #eef3f4;
  color: #87949c;
  box-shadow: none;
  cursor: not-allowed;
}
.checkout-form label:focus-within,
.feedback-form label:focus-within,
.login-modal label:focus-within {
  color: var(--teal-dark);
}
.saved-address-actions .secondary-button,
.saved-address-actions .text-button {
  min-height: 38px;
}
button:focus-visible {
  outline: 3px solid rgba(19, 155, 143, 0.24);
  outline-offset: 2px;
}
.primary-button,
.secondary-button,
.danger-button,
.text-button {
  min-height: 42px;
  border-radius: var(--radius);
  font-weight: 900;
}
.primary-button {
  border: 1px solid var(--teal-dark);
  background: var(--teal);
  color: white;
  padding: 0 14px;
}
.primary-button:hover {
  background: var(--teal-dark);
}
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.primary-button:disabled:hover {
  background: var(--teal);
}
.secondary-button {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  padding: 0 12px;
}
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 6px;
  color: var(--teal-dark);
  text-decoration: none;
}
.full {
  width: 100%;
}
.view.find-view.is-active {
  display: grid;
  gap: 24px;
}
.find-hero-slide.is-active {
  opacity: 1;
}
.find-hero-slide.is-motion-ready {
  animation: find-hero-cover-motion 6500ms ease both;
}
@keyframes find-hero-cover-motion {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce){
.find-hero-slide,
  .find-hero-slide.is-motion-ready {
    transform: scale(1);
    animation: none;
  }
}
.find-tab.is-active {
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  box-shadow: none;
  text-shadow: none;
}
@media (hover: hover) and (pointer: fine){
.find-suggestions.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
  }
.find-suggestions.is-dragging button {
    pointer-events: none;
  }
}
.find-suggestions button:hover,
.find-suggestions button.is-active {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.34);
  color: #ffffff;
}
.gallery-grid.is-empty {
  grid-template-columns: 1fr;
}
body[data-page="find"] .gallery-grid.is-empty {
  columns: 1;
}
@keyframes gallery-card-chaotic-reveal {
  0% {
    opacity: 0;
    transform: translate3d(var(--gallery-reveal-x), var(--gallery-reveal-y), 0)
      rotate(var(--gallery-reveal-rotate)) scale(0.94);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}
.gallery-icon-button.is-active svg {
  fill: currentColor;
}
.gallery-icon-button.card-save-button.is-active {
  background: var(--teal);
}
.gallery-icon-button.card-like-button.is-active {
  background: #df5570;
}
.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-lookup-row .secondary-button {
  min-height: 44px;
  padding: 9px 14px;
}
@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);
  }
}
.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);
}
@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);
  }
}
.feedback-already-submitted .eyebrow {
  margin: 0 0 8px;
}
.feedback-already-submitted > p:not(.eyebrow) {
  max-width: 510px;
  margin: 14px 0 0;
  color: #60777b;
  font-size: 0.78rem;
  line-height: 1.7;
}
@keyframes feedbackAlreadySubmittedIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.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;
}
@media (max-width: 640px){
.feedback-already-submitted > p:not(.eyebrow) {
    font-size: 0.7rem;
  }
}
@keyframes orderPanelLeaveForward {
  to {
    opacity: 0;
    transform: translateX(-32px) scale(0.985);
  }
}
@keyframes orderPanelEnterForward {
  from {
    opacity: 0;
    transform: translateX(32px) scale(0.985);
  }
}
@keyframes orderPanelLeaveBack {
  to {
    opacity: 0;
    transform: translateX(32px) scale(0.985);
  }
}
@keyframes orderPanelEnterBack {
  from {
    opacity: 0;
    transform: translateX(-32px) scale(0.985);
  }
}
.order-tab-button:hover:not(:disabled):not(.is-active) {
  color: var(--ink);
}
/* Mặt đang xem là một viên TÔ ĐẶC màu thương hiệu, không phải viên trắng trên
   nền xám.

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

   Dùng `--teal-dark` chứ không phải `--teal`: chữ trắng trên `--teal` chỉ đạt
   3.4:1, dưới ngưỡng 4.5:1 mà cỡ chữ này cần. Trên `--teal-dark` là 5.4:1. */
.order-tab-button.is-active {
  background: var(--teal-dark);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(8, 119, 110, 0.34);
}
.order-tab-shell.is-animating {
  will-change: height;
}
/* =============================================================================
   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;
}
.order-detail-section dl > div.is-wide {
  grid-column: 1 / -1;
}
.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;
}
.order-delete-modal .eyebrow {
  margin: 0 0 7px;
  color: #c3352d;
}
.order-delete-modal > p:not(.eyebrow) {
  margin: 13px 0 0;
  color: #725f5d;
  font-size: 0.72rem;
  line-height: 1.7;
}
@media (max-width: 760px){
.order-detail-section dl > div.is-wide {
    grid-column: auto;
  }
.order-action-button {
    width: 100%;
  }
}
.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 .modal-close {
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
}
.size-menu-option:hover,
.size-menu-option.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.image-choice:hover,
.image-choice.is-active {
  border-color: var(--teal);
  background: #f4fbfa;
}
.image-choice.is-active .choice-icon {
  background: #ffffff;
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 2px rgba(19, 155, 143, 0.28);
}
.auth-panel-shell.is-animating {
  will-change: height;
}
.auth-panel {
  display: grid;
  gap: 14px;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-panel.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
}
/* Hiệu ứng hiện ra chỉ chạy khi VỪA MỞ hộp, không chạy khi đổi bảng.
   ---------------------------------------------------------------------------
   Trước đây keyframe này gắn thẳng vào `.auth-panel.is-active` và bị chặn bằng
   `.auth-panel-shell.is-animating`. Nhưng lúc chuyển bảng xong, hàm dọn gỡ
   `is-animating` — luật chặn biến mất, keyframe lập tức chạy lại từ `opacity: 0`
   trên bảng đang hiện sẵn. Đó là cú nháy của các ô nhập và nút ngay sau khi
   chuyển xong.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .auth-actions {
    gap: 5px;
  }

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

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

  .signup-icon {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Nút đã rời khỏi bảng nên bỏ luôn khoảng trống nó từng chiếm ở đáy bảng. */
  .image-modal:has(#sampleOrderOptions:not([hidden])) .image-order-options {
    padding-bottom: 16px;
  }
}
.account-menu-links {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.account-menu-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 6px 9px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  transition: color 160ms ease, background 160ms ease;
}
.account-menu-link:hover,
.account-menu-link:focus-visible {
  color: var(--teal-dark);
  background: var(--mint);
  outline: none;
}
.account-menu-link > strong {
  min-width: 25px;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: #f0f4f5;
  text-align: center;
  font-size: 0.66rem;
}
.account-menu-link-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--teal);
  background: #edf9f7;
}
.account-menu-link-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-empty-state .secondary-button {
  margin-top: 8px;
  text-decoration: none;
}
.account-empty-state.is-error {
  color: #a24141;
  border-color: #ecc3c3;
  background: #fff8f8;
}
@keyframes accountAddressBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes accountAddressModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.saved-address-actions .secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}
.account-address-form-copy .eyebrow {
  margin: 0;
  color: #08796f;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.3;
}
.account-address-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}
.account-address-field.is-wide {
  grid-column: 1 / -1;
}
.account-address-field-label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #355c58;
  font-size: 0.66rem;
  font-weight: 800;
}
.account-address-field-label > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  color: #168c82;
  background: #e6f6f3;
}
.account-address-field-label svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-address-field input,
.account-address-field textarea {
  width: 100%;
  border: 1px solid #cbdedc;
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 15px rgba(29, 75, 72, 0.035);
  font: inherit;
  font-size: 0.74rem;
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.account-address-field input {
  min-height: 46px;
  padding: 10px 12px;
}
.account-address-field textarea {
  min-height: 108px;
  padding: 12px;
  resize: vertical;
}
.account-address-field input::placeholder,
.account-address-field textarea::placeholder {
  color: #93a5a3;
  opacity: 1;
  font-weight: 600;
}
.account-address-field input:hover,
.account-address-field textarea:hover {
  border-color: #9ccdc7;
  background: #ffffff;
}
.account-address-field input:focus,
.account-address-field textarea:focus {
  border-color: #3baea2;
  background: #ffffff;
  box-shadow:
    0 0 0 3px rgba(21, 143, 132, 0.11),
    0 9px 20px rgba(18, 112, 104, 0.08);
  outline: none;
}
.account-address-field:focus-within .account-address-field-label {
  color: #08746b;
}
.account-address-field:focus-within .account-address-field-label > span {
  color: #ffffff;
  background: linear-gradient(145deg, #35b8a9, #11877e);
}
.account-login-required > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 640px){
.account-address-form-copy .eyebrow {
    font-size: 0.7rem;
  }
.account-address-field.is-wide {
    grid-column: 1;
  }
.account-address-field input {
    min-height: 44px;
  }
.account-address-field textarea {
    min-height: 96px;
  }
}
.account-dashboard-nav a:hover,
.account-dashboard-nav a:focus-visible,
.account-dashboard-nav a.is-active {
  border-color: #cbe4e0;
  color: var(--teal-dark);
  background: #eff9f7;
  outline: none;
}
@keyframes accountProfilePanelOut {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.975);
    filter: blur(2px);
  }
}
@keyframes accountProfilePanelIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
    filter: blur(3px);
  }
}
.account-order-filter-modal-header .eyebrow {
  margin: 0 0 3px;
  font-size: 0.52rem;
}
.account-order-filter-choice.is-active {
  border-color: #148f85;
  color: #08786f;
}
.account-order-filter-choice.is-rating:hover,
.account-order-filter-choice.is-rating:focus-visible,
.account-order-filter-choice.is-rating.is-active {
  border: 0;
  color: #d78e00;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.account-order-filter-rating-stars .is-empty,
.account-order-filter-choice.is-rating.is-active .account-order-filter-rating-stars .is-filled {
  opacity: 1;
}
.account-order-filter-rating-stars .is-filled,
.account-order-filter-choice.is-rating.is-active .account-order-filter-rating-stars .is-empty {
  opacity: 0;
}
.account-order-filter-choice:is(
  .is-new,
  .is-confirmed,
  .is-printing,
  .is-shipping,
  .is-completed,
  .is-cancelled,
  .is-processing
).is-active {
  border-color: var(--filter-choice-tone);
  color: color-mix(in srgb, var(--filter-choice-tone) 72%, #173936);
}
.account-order-filter-dropdown-trigger:hover,
.account-order-filter-dropdown-trigger:focus-visible,
.account-order-filter-dropdown.is-open .account-order-filter-dropdown-trigger {
  border-color: #42b4a9;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(30, 165, 152, 0.11);
  outline: none;
}
.account-order-filter-dropdown.is-open .account-order-filter-dropdown-trigger > svg {
  background: #e2f5f2;
  transform: rotate(180deg);
}
@keyframes account-order-filter-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes account-order-filter-modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes account-order-filter-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes account-order-filter-menu-up-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.account-order-page-number.is-active {
  border-color: #179d91;
  color: #ffffff;
  background: linear-gradient(145deg, #2fc1b0, #087f75);
  box-shadow: 0 7px 16px rgba(9, 125, 115, 0.19);
}
.account-order-page-nav:not(:disabled):hover,
.account-order-page-nav:not(:disabled):focus-visible,
.account-order-page-number:not(.is-active):hover,
.account-order-page-number:not(.is-active):focus-visible {
  border-color: #65bcb3;
  color: #087b71;
  background: #ecf8f6;
  outline: none;
  transform: translateY(-1px);
}
.account-album-view-switcher button.is-active {
  color: #fff;
  background: var(--teal);
  box-shadow: 0 4px 10px rgba(8, 119, 110, 0.18);
}
.order-lookup-page {
  width: min(1180px, 100%);
}
.protected-order-notice {
  position: relative;
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid #dbe7e8;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(18, 42, 50, 0.22);
}
.protected-order-notice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 15px;
  color: var(--teal-dark);
  background: #e9f7f4;
}
.protected-order-notice-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.protected-order-notice h2 {
  margin: 5px 40px 8px 0;
  font-family: var(--font-brand);
  font-size: 1.45rem;
}
.protected-order-notice > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.65;
}
.protected-order-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}
.protected-order-notice-actions button {
  min-width: 112px;
}
.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 > 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"],
body[data-page="refund"] {
  background:
    radial-gradient(circle at 8% 5%, rgba(53, 185, 199, 0.1), transparent 24rem),
    radial-gradient(circle at 94% 18%, rgba(246, 200, 82, 0.11), transparent 22rem),
    #f4f8f5;
}
.care-attachment-field.is-compact {
  padding: 10px;
  border-radius: 13px;
}
.care-attachment-field.is-compact .care-attachment-preview {
  grid-template-columns: repeat(auto-fill, minmax(58px, 72px));
}
.care-attachment-field.is-compact .care-attachment-add {
  min-height: 32px;
  padding: 6px 10px;
}
.care-picker-option.is-account,
.care-picker[data-value="account"] .care-picker-trigger {
  --pick-ink: #6152b0;
  --pick-paper: #e8e3fb;
}
@keyframes carePickerMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.care-submit-button.is-loading .care-submit-glyph {
  display: none;
}
.care-submit-button.is-loading .care-submit-spinner {
  display: block;
}
@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;
}
/* 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;
  }
}
.care-request-row.is-loading {
  cursor: wait;
  opacity: 0.6;
}
.care-result.is-error {
  border-color: rgba(201, 75, 75, 0.2);
  background: #fff1f1;
  color: #a23f3f;
  font-size: 0.78rem;
  font-weight: 700;
}
@media (max-width: 900px){
.admin-care-editor .primary-button {
    width: 100%;
  }
}
@media (max-width: 620px){
/* Giữ nguyên luật cũ: hai nút xếp ngang ở khổ này. Luật gốc dùng `!important`
     để thắng phần ghi đè của hàng cuối footer; nay không còn ai chọi nữa nhưng
     vẫn để y nguyên, vì mục đích của lượt sửa này là hai nút trông giống hệt
     bản cũ. */
  .site-footer-contact-actions {
    display: flex !important;
  }
}
.care-chat-refresh.is-loading {
  animation: care-chat-spin 800ms linear infinite;
}
@keyframes care-chat-spin {
  to { transform: rotate(360deg); }
}
.admin-care-chat-composer .primary-button {
  flex: 0 0 auto;
  min-height: 43px;
}
.admin-chat-status-tools .secondary-button {
  min-height: 42px;
}
@media (max-width: 620px){
.admin-care-chat-composer .primary-button,
  .admin-chat-status-tools .upload-field,
  .admin-chat-status-tools .secondary-button {
    width: 100%;
  }
}
.admin-sort-toggle button.is-active {
  background: var(--teal);
  color: #fff;
}
.admin-filter-chips button.is-active {
  border-color: #0d9186;
  background: linear-gradient(135deg, #17a99b, #087e76);
  color: #ffffff;
  box-shadow: 0 7px 17px rgba(11, 132, 122, 0.17);
}
.admin-filter-chips button.is-active span {
  background: rgba(255, 255, 255, 0.2);
}
.auth-panel.is-awaiting-verification > label {
  display: none;
}
.registration-verification-card .eyebrow {
  margin: 0;
}
.registration-verification-actions .text-button {
  padding: 5px 2px;
  color: var(--teal-dark);
  font-size: 0.66rem;
  font-weight: 900;
}
.registration-verification-actions .text-button:disabled {
  color: #9eaaaa;
  cursor: wait;
}
/* Feedback community hub */
body[data-page="feedback"] .app {
  width: min(1280px, calc(100% - 32px));
}
.feedback-story-card > img.is-active {
  opacity: 1;
  transform: scale(1);
}
.feedback-story-card:hover > img.is-active {
  transform: scale(1.035);
}
@keyframes feedbackSkeleton {
  to { background-position: -220% 0; }
}
.feedback-filters button.is-active {
  border-color: var(--teal);
  color: #ffffff;
  background: linear-gradient(135deg, #16a596, #087b72);
  box-shadow: 0 8px 18px rgba(8, 123, 114, 0.17);
}
.feedback-filters button.is-active strong {
  background: rgba(255, 255, 255, 0.18);
}
.feedback-detail-image-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}
.feedback-detail-image-dot.is-active::after {
  background: #35dccb;
  box-shadow:
    0 0 0 3px rgba(53, 220, 203, 0.18),
    0 0 12px rgba(24, 218, 197, 0.9),
    0 0 24px rgba(22, 180, 165, 0.52);
  transform: scale(1.2);
}
@keyframes accountFeedbackComposerEnter {
  from {
    opacity: 0;
    transform: translateY(-14px) scaleY(0.94);
  }
}
@media (max-width: 640px){
body[data-page="feedback"] .app {
    width: min(100% - 20px, 1280px);
  }
}
/* 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;
}
.checkout-identity-modal-backdrop.is-visible {
  opacity: 1;
}
.checkout-identity-modal-backdrop.is-visible .checkout-identity-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.checkout-identity-card > p:not(.eyebrow):not(.checkout-identity-register-prompt) {
  max-width: 470px;
  font-size: 0.76rem;
}
#loginModal.is-checkout-continuation .login-modal {
  animation: checkoutAuthCardEnter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes checkoutAuthBackdropEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes checkoutAuthCardEnter {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce){
.checkout-identity-modal-backdrop,
  .checkout-identity-card,
  .checkout-identity-action,
  .checkout-identity-action-icon,
  #loginModal.is-checkout-continuation,
  #loginModal.is-checkout-continuation .login-modal {
    animation: none;
    transition: none;
  }
}
.protected-notice-button-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.protected-notice-button-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.protected-notice-later {
  border-color: #cfdedf;
  color: #4c6668;
  background: linear-gradient(135deg, #fff, #f1f6f6);
  box-shadow: 0 7px 16px rgba(36, 68, 74, 0.06);
}
.protected-notice-later .protected-notice-button-icon {
  color: #607b7d;
  background: #e5eeee;
}
.protected-notice-later:hover,
.protected-notice-later:focus-visible {
  border-color: #a8c2c2;
  color: #284f50;
  background: linear-gradient(135deg, #fff, #e8f2f1);
  box-shadow: 0 10px 20px rgba(36, 68, 74, 0.1);
  outline: none;
  transform: translateY(-2px);
}
.protected-notice-login {
  border-color: #08776f;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(135deg, #19a99b, #08756d);
  box-shadow:
    0 11px 23px rgba(8, 117, 109, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.protected-notice-login .protected-notice-button-icon {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.15);
}
.protected-notice-login:hover,
.protected-notice-login:focus-visible {
  border-color: #055e58;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(135deg, #159d91, #06665f);
  box-shadow: 0 15px 28px rgba(8, 117, 109, 0.29);
  outline: none;
  transform: translateY(-2px);
}
.protected-notice-button:active {
  transform: translateY(0);
}
.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;
  }
}
@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-lookup-button.is-loading .feedback-lookup-search-icon {
  display: none;
}
.feedback-lookup-button.is-loading .feedback-lookup-spinner {
  display: block;
}
.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;
}
/* 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;
}
.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);
}
.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);
}
/* 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);
}
/* 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"] .service-card.is-active {
  border-color: color-mix(in srgb, var(--service-accent) 55%, white);
  background: linear-gradient(135deg, #ffffff, var(--service-soft));
  box-shadow:
    inset 3px 0 0 var(--service-accent),
    0 10px 20px rgba(38, 79, 79, 0.08);
}
body[data-page="order"] .service-card.is-active::before {
  opacity: 0;
}
body[data-page="order"] .service-card.is-active .service-code {
  border-color: transparent;
  background: var(--service-accent);
  color: #ffffff;
  box-shadow:
    0 8px 16px color-mix(in srgb, var(--service-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
/* Shared KROMADE page-loading experience */
html.is-page-loading,
html.is-page-loading body {
  overflow: hidden;
}
.page-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background:
    radial-gradient(circle at 8% 12%, rgba(246, 198, 90, 0.24), transparent 25%),
    radial-gradient(circle at 91% 11%, rgba(125, 102, 202, 0.2), transparent 27%),
    radial-gradient(circle at 84% 90%, rgba(235, 119, 111, 0.2), transparent 25%),
    linear-gradient(135deg, #dff8f2 0%, #effbf8 48%, #fff8ef 100%);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 420ms ease;
}
.page-loader[hidden] {
  display: none;
}
.page-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader.is-loaded :is(
  .page-loader-backdrop-shape,
  .page-loader-shape,
  .page-loader-progress span,
  .page-loader-card > p span
) {
  animation-play-state: paused !important;
}
.page-loader::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background: linear-gradient(
    90deg,
    #129b8e 0 54%,
    #83d3c8 54% 69%,
    #f1c862 69% 82%,
    #eb928b 82% 92%,
    #9785cf 92% 100%
  );
  content: "";
}
.page-loader-backdrop-shape {
  position: absolute;
  display: block;
  pointer-events: none;
  animation: pageLoaderBackdropFloat 4.8s ease-in-out infinite;
}
.page-loader-backdrop-shape.is-one {
  top: 8%;
  left: 7%;
  width: 88px;
  height: 88px;
  border: 18px solid rgba(19, 155, 143, 0.12);
  border-radius: 23px;
  transform: rotate(18deg);
}
.page-loader-backdrop-shape.is-two {
  right: 7%;
  bottom: 8%;
  width: 124px;
  height: 112px;
  background: rgba(126, 105, 195, 0.11);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation-delay: -1.6s;
}
.page-loader-backdrop-shape.is-three {
  right: 15%;
  top: 11%;
  width: 62px;
  height: 62px;
  border: 15px solid rgba(235, 119, 111, 0.12);
  border-radius: 50%;
  animation-delay: -3.2s;
}
.page-loader-card {
  position: relative;
  width: min(520px, calc(100vw - 40px));
  padding: 0 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.page-loader-card::after {
  content: none;
}
.page-loader-wave {
  position: relative;
  z-index: 2;
  height: 116px;
  margin: 0 0 12px;
}
.page-loader-wave::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  background:
    radial-gradient(circle, rgba(19, 123, 114, 0.18) 0 1.5px, transparent 1.8px)
    left center / 13px 3px repeat-x;
  content: "";
  transform: translateY(-50%);
}
.page-loader-shape {
  position: absolute;
  top: 50%;
  left: var(--shape-x);
  display: block;
  width: var(--shape-size);
  height: var(--shape-size);
  background: var(--shape-color);
  filter: drop-shadow(0 7px 7px color-mix(in srgb, var(--shape-color) 25%, transparent));
  will-change: transform;
  animation: pageLoaderShapeWave 1.55s ease-in-out infinite;
  animation-delay: var(--shape-delay);
}
.page-loader-shape.is-square {
  border: 3px solid rgba(255, 255, 255, 0.58);
  border-radius: 7px;
}
.page-loader-shape.is-triangle {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.page-loader-progress {
  position: relative;
  z-index: 2;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(19, 123, 114, 0.09);
  contain: paint;
  transform: translateZ(0);
}
.page-loader-progress span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #159b8f, #59cabb, #f1c25f, #e9867e);
  box-shadow: 0 0 14px rgba(19, 155, 143, 0.24);
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform;
  animation: pageLoaderProgress 1.25s linear -0.25s infinite;
  animation-play-state: paused;
  transition: opacity 120ms ease-out;
}
.page-loader.is-motion-ready .page-loader-progress span {
  opacity: 1;
  animation-play-state: running;
}
.page-loader-card > p {
  position: relative;
  z-index: 2;
  margin: 10px 0 0;
  color: #526d70;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}
.page-loader-card > p span {
  display: inline-block;
  width: 18px;
  overflow: hidden;
  vertical-align: bottom;
  animation: pageLoaderDots 1.1s steps(4, end) infinite;
}
@keyframes pageLoaderShapeWave {
  0%,
  100% {
    transform: translate3d(-50%, 17px, 0) rotate(-9deg) scale(0.92);
  }
  25% {
    transform: translate3d(-50%, -25px, 0) rotate(42deg) scale(1.05);
  }
  50% {
    transform: translate3d(-50%, 7px, 0) rotate(92deg) scale(0.96);
  }
  75% {
    transform: translate3d(-50%, -18px, 0) rotate(142deg) scale(1.02);
  }
}
@keyframes pageLoaderProgress {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(278%, 0, 0);
  }
}
@keyframes pageLoaderBackdropFloat {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -16px;
    rotate: 7deg;
  }
}
@keyframes pageLoaderDots {
  from {
    width: 0;
  }
  to {
    width: 18px;
  }
}
@media (max-width: 560px){
.page-loader {
    padding: 14px;
  }
.page-loader::before {
    height: 5px;
  }
.page-loader-card {
    width: min(100%, 390px);
    padding: 0 8px;
  }
.page-loader-wave {
    height: 102px;
    margin-top: 0;
  }
.page-loader-shape:nth-child(1),
  .page-loader-shape:nth-child(9) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce){
.page-loader,
  .page-loader-backdrop-shape,
  .page-loader-shape,
  .page-loader-progress span,
  .page-loader-card > p span {
    animation: none;
    transition: none;
  }
.page-loader-shape {
    transform: translate3d(-50%, -50%, 0);
  }
.page-loader-progress span {
    width: 100%;
  }
}
/* Refreshed authentication header and unified modal close controls. */
.login-modal {
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(480px, 100%);
  max-height: calc(100dvh - 28px);
  padding: 0 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(175, 217, 213, 0.72);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
    0 34px 86px rgba(15, 64, 70, 0.24),
    0 9px 24px rgba(21, 81, 84, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.login-modal::before,
.login-modal::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}
.login-modal::before {
  top: 0;
  right: 0;
  left: 0;
  height: 150px;
  border-bottom: 1px solid rgba(135, 202, 195, 0.28);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.95), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(244, 189, 79, 0.22), transparent 27%),
    linear-gradient(135deg, #eafffb 0%, #eff9ff 55%, #fff8e8 100%);
}
.login-modal::after {
  top: -78px;
  right: -64px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 48%, rgba(45, 169, 155, 0.17), transparent 54%),
    rgba(255, 255, 255, 0.22);
  box-shadow:
    -28px 82px 0 -58px rgba(239, 100, 97, 0.2),
    -90px 30px 0 -70px rgba(114, 90, 193, 0.2);
}
.login-modal > .eyebrow,
.login-modal > h2,
.login-modal > .auth-tabs,
.login-modal > .auth-panel,
.login-modal > .auth-panel-shell {
  position: relative;
  z-index: 1;
}
.login-modal > .eyebrow,
.login-modal > h2,
.login-modal > .auth-tabs,
.login-modal > .auth-panel,
.login-modal > .auth-panel-shell {
  grid-column: 1 / -1;
}
.login-modal > .eyebrow {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 22px 56px 0 0;
  color: #08776e;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.095em;
}
.login-modal > .eyebrow::before {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(19, 155, 143, 0.2);
  border-radius: 15px;
  background:
    center / 22px 22px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.5' fill='none' stroke='%2308776e' stroke-width='1.8'/%3E%3Cpath d='M5.5 19c.8-4.1 3-6.1 6.5-6.1s5.7 2 6.5 6.1' fill='none' stroke='%2308776e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(208, 245, 239, 0.92));
  box-shadow:
    0 9px 20px rgba(8, 119, 110, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  content: "";
}
.login-modal > h2 {
  margin: 6px 58px 0 56px;
  color: #17262e;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.login-modal > .auth-tabs {
  margin: 22px 0 0;
  padding: 5px;
  border-color: rgba(156, 199, 198, 0.5);
  border-radius: 17px;
  background: rgba(242, 249, 249, 0.92);
  box-shadow:
    0 10px 24px rgba(33, 86, 88, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}
.login-modal > .auth-tabs button {
  min-height: 44px;
  border-radius: 12px;
  color: #657b81;
  transition:
    color 180ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 180ms ease;
}
.login-modal > .auth-tabs button:hover:not(.is-active),
.login-modal > .auth-tabs button:focus-visible:not(.is-active) {
  color: #08776e;
  background: rgba(255, 255, 255, 0.72);
  outline: none;
}
.login-modal > .auth-tabs button.is-active {
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.28), transparent 43%),
    linear-gradient(135deg, #22b9aa, #08776e);
  box-shadow:
    0 9px 18px rgba(8, 119, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.login-modal > .auth-tabs button[data-mode="register"].is-active,
.login-modal > .auth-tabs button[data-checkout-auth-mode="register"].is-active {
  color: #5d3916;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.48), transparent 42%),
    linear-gradient(135deg, #ffd56a, #ff9c83);
  box-shadow:
    0 9px 18px rgba(202, 127, 56, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.login-modal > .auth-panel,
.login-modal > .auth-panel-shell {
  margin-top: 18px;
}
.login-modal > .modal-close {
  z-index: 3;
  top: 18px;
  right: 18px;
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
) {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(109, 181, 174, 0.34);
  border-radius: 14px;
  color: #08776e;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.98), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 246, 242, 0.96));
  box-shadow:
    0 8px 20px rgba(26, 83, 84, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 180ms ease;
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::before,
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: none;
  content: "";
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
)::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
):hover,
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
):focus-visible {
  border-color: rgba(224, 88, 82, 0.55);
  color: #ffffff;
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(145deg, #ff9583, #e95f5d);
  box-shadow:
    0 12px 25px rgba(213, 78, 73, 0.25),
    0 0 0 4px rgba(239, 100, 97, 0.1);
  outline: none;
  transform: translateY(-2px) rotate(4deg);
}
:is(
  .modal-close:not([data-action="close-sample-modal"]),
  body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
  .image-options-close,
  .checkout-address-modal-close,
  .account-profile-close-button,
  .account-order-filter-modal-close,
  .ka-close
):active {
  box-shadow:
    0 5px 12px rgba(213, 78, 73, 0.2),
    0 0 0 3px rgba(239, 100, 97, 0.08);
  transform: translateY(0) scale(0.94);
}
@media (max-width: 520px){
.login-modal {
    max-height: calc(100dvh - 16px);
    padding: 0 18px 20px;
    border-radius: 24px;
  }
.login-modal::before {
    height: 142px;
  }
.login-modal > .eyebrow {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding-top: 18px;
    padding-right: 48px;
    font-size: 0.61rem;
  }
.login-modal > .eyebrow::before {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background-size: 20px 20px, auto;
  }
.login-modal > h2 {
    margin: 5px 48px 0 50px;
    font-size: 1.32rem;
  }
.login-modal > .auth-tabs {
    margin-top: 19px;
  }
.login-modal > .modal-close {
    top: 14px;
    right: 14px;
  }
}
@media (prefers-reduced-motion: reduce){
.login-modal > .auth-tabs button,
  :is(
    .modal-close:not([data-action="close-sample-modal"]),
    body:not([data-page="find"]) #sampleModal > .image-modal > .modal-close,
    .image-options-close,
    .checkout-address-modal-close,
    .account-profile-close-button,
    .account-order-filter-modal-close,
    .ka-close
  ) {
    transition: none;
  }
}
/* About page — creative workshop editorial redesign */
body[data-page="about"] {
  background:
    radial-gradient(circle at 8% 22%, rgba(244, 189, 79, 0.09), transparent 20%),
    radial-gradient(circle at 92% 54%, rgba(114, 90, 193, 0.07), transparent 18%),
    #fffefa;
}
body[data-page="about"].about-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%);
  }
}
@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);
  }
}
/* Vùng cắt lúc phóng to chiếm trọn màn hình.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .slot-crop-dimensions {
    grid-template-columns: minmax(0, 1fr);
  }
}
.product-view-tab.is-active {
  border-color: transparent;
  background: var(--ink);
  color: var(--paper);
}
.product-view-tab.is-active .product-view-count {
  background: color-mix(in srgb, var(--paper) 26%, transparent);
}
/* 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;
}
/* 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;
  }
}
/* Nút đóng neo hẳn vào góc trên bên phải BÊN TRONG khung, không trôi theo dòng
   tiêu đề. Có nền và viền riêng nên nó nổi lên trên mọi nội dung phía sau. */
.library-modal .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.library-modal .modal-close:hover {
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.library-item.is-active {
  border-color: var(--service-accent, var(--ink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--service-accent, #11978b) 35%, transparent);
}
.library-suggest-item.is-active {
  border-color: var(--service-accent, var(--ink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--service-accent, #11978b) 35%, transparent);
}
/* Dưới 950px: chiếm trọn màn hình, bỏ luôn bo góc và đổ bóng. Ở khổ đó mà vẫn
   chừa lề với bo góc thì phần lưới ảnh còn lại quá hẹp, mà cái viền quanh cũng
   chẳng để làm gì khi phía sau không còn nhìn thấy gì. */
@media (max-width: 950px) {
  .library-modal-backdrop {
    padding: 0;
  }

  .library-modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}
/* 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-chip.is-active {
  border-color: var(--service-accent, var(--ink));
  background: color-mix(in srgb, var(--service-accent, #11978b) 10%, var(--paper));
}
@keyframes art-drop-nho-len {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Khung hẹp thì bỏ dòng phụ và thu nút lại cho vừa lòng hình in. */
/* Khung ảnh trên điện thoại chỉ rộng chừng 145px, nên mọi thứ phải nhường chỗ
   cho chữ: lề ngang còn 6px, icon nhỏ lại, và dòng phụ ẩn đi. Nhãn chính vẫn
   phải nằm trọn một dòng — đó mới là chữ khách cần đọc. */
@media (max-width: 620px) {
  .art-drop {
    gap: 7px;
    padding: 8% 6px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Chỉ nút kéo xác nhận nổi lên trên lớp sương — đó là chỗ khách vừa thao tác và
   cũng là chỗ đang chạy dòng "Đang chuẩn bị", nên nó phải rõ nét. */
.checkout-veil {
  position: fixed;
  inset: 0;
  z-index: 12500;
  background: rgba(226, 240, 238, 0.36);
  backdrop-filter: blur(5px) saturate(1.04);
  -webkit-backdrop-filter: blur(5px) saturate(1.04);
  animation: checkoutVeilIn 200ms ease both;
}
/* Trong cửa sổ vùng cắt toàn màn hình, cửa sổ đã là khối chứa nên position:
   fixed ở đây tính theo cửa sổ chứ không theo khung nhìn. Dùng absolute cho
   đúng ý và cho một thang z-index riêng bên trong cửa sổ đó. */
.crop-design-modal > .checkout-veil {
  position: absolute;
  z-index: 40;
}
@keyframes checkoutVeilIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce){
.checkout-veil {
    animation: none;
  }
}
/* Demo Mode toàn website
   ------------------------------------------------------------------------- */
.kromade-demo-banner {
  position: sticky;
  top: var(--header-h);
  z-index: 49;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 7px clamp(14px, 4vw, 42px);
  border: 0;
  border-bottom: 1px solid rgba(121, 14, 25, 0.34);
  color: #fff;
  background: linear-gradient(100deg, #9f1d2e, #d43545 52%, #ae1d30);
  box-shadow: 0 8px 20px rgba(122, 20, 31, 0.18);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: left;
}
.kromade-demo-banner strong {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 900;
}
.kromade-demo-banner > span:nth-child(3) {
  overflow: hidden;
  max-width: min(720px, 58vw);
  color: rgba(255, 255, 255, 0.88);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kromade-demo-banner-icon,
.kromade-demo-modal-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 900;
}
.kromade-demo-banner-icon {
  width: 21px;
  height: 21px;
  font-size: 0.69rem;
}
.kromade-demo-banner-arrow {
  margin-left: 4px;
  font-size: 1.25rem;
  line-height: 1;
}
.kromade-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23, 31, 35, 0.66);
  backdrop-filter: blur(12px);
}
.kromade-demo-modal[hidden] {
  display: none;
}
.kromade-demo-modal-card {
  position: relative;
  width: min(620px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  padding: clamp(25px, 5vw, 42px);
  overflow: auto;
  border: 1px solid rgba(172, 32, 47, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(212, 53, 69, 0.11), transparent 34%),
    #fff;
  box-shadow: 0 34px 90px rgba(11, 20, 24, 0.32);
}
.kromade-demo-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ead4d7;
  border-radius: 50%;
  color: #8b2330;
  background: #fff6f7;
  font-size: 1.35rem;
}
.kromade-demo-modal-heading {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  padding-right: 34px;
}
.kromade-demo-modal-icon {
  width: 58px;
  height: 58px;
  color: #fff;
  background: #c72d40;
  box-shadow: 0 12px 24px rgba(188, 39, 57, 0.22);
  font-size: 1.35rem;
}
.kromade-demo-modal-heading p {
  margin: 0 0 3px;
  color: #c72d40;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kromade-demo-modal-heading h2 {
  margin: 0;
  color: #293e43;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  line-height: 1.18;
}
.kromade-demo-modal-lead {
  margin: 20px 0;
  color: #63767a;
  font-size: 0.85rem;
  line-height: 1.68;
}
.kromade-demo-modal-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kromade-demo-modal-list li {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid #ece2e3;
  border-radius: 14px;
  background: #fffafa;
}
.kromade-demo-modal-list li > span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  color: #ac2939;
  background: #f8e9eb;
  font-size: 0.62rem;
  font-weight: 900;
}
.kromade-demo-modal-list p {
  margin: 1px 0 0;
  color: #53676b;
  font-size: 0.77rem;
  line-height: 1.55;
}
.kromade-demo-custom-message {
  margin-top: 16px;
  padding: 16px 17px;
  border-left: 4px solid #c72d40;
  border-radius: 4px 15px 15px 4px;
  background: #f7eeee;
}
.kromade-demo-custom-message strong {
  display: block;
  margin-bottom: 5px;
  color: #9d2332;
  font-size: 0.7rem;
}
.kromade-demo-custom-message p {
  margin: 0;
  color: #55484a;
  font-size: 0.8rem;
  line-height: 1.62;
  white-space: pre-wrap;
}
.kromade-demo-modal-confirm {
  width: 100%;
  margin-top: 20px;
}
body.kromade-demo-modal-open {
  overflow: hidden;
}
.upload-admin-badge:hover,
.upload-admin-badge:focus-visible,
.upload-admin-badge.is-active {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
  outline: none;
}
.test-tool-hero .eyebrow {
  color: #9fe4da;
}
.test-tool-demo-toggle.is-active {
  color: #fff;
  background: #bd2f41;
  box-shadow: 0 10px 22px rgba(183, 42, 61, 0.2);
}
.test-tool-demo-content-filters button.is-active {
  border-color: #167f76;
  color: #fff;
  background: #167f76;
}
.test-tool-gate-card > p:not(.eyebrow) {
  margin: 0 auto 20px;
  color: #6a7d80;
  font-size: 0.78rem;
  line-height: 1.6;
}
@media (max-width: 680px){
.kromade-demo-banner {
    top: 0;
    justify-content: flex-start;
    min-height: 42px;
    padding-inline: 12px;
  }
.kromade-demo-banner > span:nth-child(3) {
    max-width: none;
  }
.kromade-demo-banner strong {
    display: none;
  }
.kromade-demo-modal {
    align-items: end;
    padding: 10px;
  }
.kromade-demo-modal-card {
    max-height: calc(100dvh - 20px);
    padding: 25px 18px 20px;
    border-radius: 23px;
  }
.kromade-demo-modal-heading {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
.kromade-demo-modal-icon {
    width: 48px;
    height: 48px;
  }
}
.db-sync-loading.is-error {
  color: #a03a48;
}
@media (max-width: 820px){
.db-sync-selection-actions,
  .db-sync-run-row .primary-button {
    width: 100%;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .ka-scope .account-address-postal-button {
    padding: 0 13px;
  }
}