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

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

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

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

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

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

  --ka-notch-sm: 10px 10px 10px 3px;
  --ka-notch: 12px 12px 12px 4px;
  --ka-notch-lg: 16px 16px 16px 5px;
  --ka-notch-line: #e2ecec;
  --ka-notch-shadow: 0 7px 16px rgba(20, 45, 53, 0.06);
}

.ka-scope,
.ka-menu,
body[data-page="account"] .order-delete-modal {
  /* --- ink ------------------------------------------------------------- */
  /* muted tones are tuned so even 10px labels clear WCAG AA on paper */
  --ka-ink: #142d35;
  --ka-deep: #10282f;
  --ka-muted: #52686f;
  --ka-muted-soft: #5f767d;

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

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

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

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

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

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

  /* --- focus ----------------------------------------------------------- */
  --ka-focus: 0 0 0 3px rgba(53, 185, 199, 0.42);
}

/* ==========================================================================
   1. Icon primitives — one set, one weight, one alignment rule
   ========================================================================== */

.ka-scope svg.ka-icon,
.ka-menu svg.ka-icon,
body[data-page="account"] svg.ka-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Icon tile — the recurring KROMADE container: squircle with one cut corner. */
.ka-scope .ka-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(11, 141, 130, 0.16);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-teal);
  background: #eaf6f4;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-tile svg.ka-icon {
  width: 21px;
  height: 21px;
}

.ka-scope .ka-tile.is-accent {
  border-color: rgba(236, 99, 134, 0.22);
  color: #c6376a;
  background: #fdeef2;
}

.ka-scope .ka-tile.is-shield {
  border-color: rgba(128, 105, 215, 0.2);
  color: #5b48b0;
  background: #efecfb;
}

.ka-scope .ka-tile.is-notify {
  border-color: rgba(246, 200, 82, 0.42);
  color: var(--ka-warning);
  background: #fdf4dd;
}

.ka-scope .ka-tile.is-danger,
body[data-page="account"] .order-delete-modal .ka-tile.is-danger {
  border-color: rgba(201, 56, 79, 0.22);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}

/* ==========================================================================
   2. Typography — eyebrow / serial / headings / counts
   ========================================================================== */

.ka-scope .ka-eyebrow,
body[data-page="account"] .order-delete-modal .ka-eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  color: var(--ka-teal-dark);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.ka-scope .ka-eyebrow-rule,
body[data-page="account"] .order-delete-modal .ka-eyebrow-rule {
  width: 24px;
  height: 2px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
}

.ka-scope .ka-eyebrow.is-danger,
body[data-page="account"] .order-delete-modal .ka-eyebrow.is-danger {
  color: var(--ka-danger);
}

.ka-scope .ka-count {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid var(--ka-line);
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ka-scope .ka-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 11px 5px 8px;
  border: 1px solid rgba(11, 141, 130, 0.24);
  border-radius: 999px;
  color: var(--ka-teal-dark);
  background: #e9f7f4;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.ka-scope .ka-chip svg.ka-icon {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   3. Button system
   Hierarchy: primary (deep ink) > secondary/outline (teal) > ghost > text.
   Destructive is always explicit and never competes with the page CTA.
   ========================================================================== */

.ka-scope .ka-btn,
.ka-menu .ka-btn,
body[data-page="account"] .ka-btn {
  position: relative;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ka-ink);
  background: transparent;
  font: inherit;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-btn > span,
body[data-page="account"] .ka-btn > span {
  display: inline-flex;
  align-items: center;
}

.ka-scope .ka-btn .ka-btn-icon,
body[data-page="account"] .ka-btn .ka-btn-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}

.ka-scope .ka-btn .ka-btn-icon svg.ka-icon,
body[data-page="account"] .ka-btn .ka-btn-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}

.ka-scope .ka-btn-sm {
  min-height: 38px;
  padding: 8px 15px;
  font-size: 0.7rem;
}

.ka-scope .ka-btn-sm .ka-btn-icon,
.ka-scope .ka-btn-sm .ka-btn-icon svg.ka-icon {
  width: 16px;
  height: 16px;
}

.ka-scope .ka-btn-block,
body[data-page="account"] .ka-btn-block {
  width: 100%;
}

/* --- primary: deep press ink, the single strongest action per view ------- */
.ka-scope .ka-btn-primary,
body[data-page="account"] .ka-btn-primary {
  color: #ffffff;
  background: var(--ka-deep);
  box-shadow: 0 12px 26px rgba(16, 40, 47, 0.22);
}

.ka-scope .ka-btn-primary .ka-btn-icon,
body[data-page="account"] .ka-btn-primary .ka-btn-icon {
  color: var(--ka-yellow);
}

/* --- gate sign-in: mint primary -----------------------------------------
   The sign-out gate's "Đăng nhập" runs on mint #45b9ae rather than the deep
   press ink the other primaries use, so it matches the header's sign-in button
   — same action, same colour, wherever a signed-out visitor meets it.

   Only the fill changes: the white label and the yellow icon are the primary's
   own, kept as they are. */
.ka-scope .ka-gate-actions .ka-btn-primary {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
}

/* --- outline: the everyday secondary ------------------------------------ */
.ka-scope .ka-btn-outline,
body[data-page="account"] .ka-btn-outline {
  border-color: rgba(11, 141, 130, 0.28);
  color: var(--ka-teal-dark);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
}

/* --- secondary: filled teal, used sparingly ----------------------------- */
.ka-scope .ka-btn-secondary {
  color: #ffffff;
  background: var(--ka-teal);
  box-shadow: 0 12px 26px rgba(11, 141, 130, 0.22);
}

/* --- ghost: neutral / cancel ------------------------------------------- */
.ka-scope .ka-btn-ghost,
body[data-page="account"] .ka-btn-ghost {
  border-color: transparent;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
}

/* --- text link button --------------------------------------------------- */
.ka-scope .ka-btn-text {
  min-height: 34px;
  padding: 6px 4px;
  color: var(--ka-teal-dark);
  background: transparent;
}

/* --- destructive -------------------------------------------------------- */
.ka-scope .ka-btn-danger,
body[data-page="account"] .ka-btn-danger {
  color: #ffffff;
  background: var(--ka-danger);
  box-shadow: 0 12px 26px rgba(201, 56, 79, 0.22);
}

/* --- brand-teal primary --------------------------------------------------
   The hook is still named .ka-btn-add for the two buttons it started on
   ("Thêm địa chỉ" / "Thêm đánh giá" in the workspace head), but it now marks
   the whole brand-teal family: the address form's submit ("Thêm địa chỉ" /
   "Lưu thay đổi") and the profile form's "Lưu thông tin" carry it too, so
   every teal CTA in the account area shares one fill and one hover.

   These rest on teal instead of the deep-ink the other primary buttons use,
   so they read lighter than the page's hard CTAs. The icon drops its yellow
   here: yellow on teal is only 2.5:1, too weak to register, while white
   matches the label. */
.ka-scope .ka-btn-primary.ka-btn-add {
  background: var(--ka-teal-dark);
  box-shadow: 0 16px 32px rgba(11, 141, 130, 0.28);
}

.ka-scope .ka-btn-primary.ka-btn-add .ka-btn-icon {
  color: #ffffff;
}

/* --- "Đặt mặc định" (address card) --------------------------------------
   Keeps its label — promoting an address is not an action to guess from a
   pictogram — so it can't be a square like its two neighbours. Instead it
   borrows everything else from them: the same 40px height, the same corner-cut
   radius, the same 1px border, and the amber tonal fill that flips solid on
   hover. Reads as the wide member of the set rather than a different species.

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

   The body[data-page] duplicate is required, not decorative: the base .ka-btn
   rule is also written as `body[data-page="account"] .ka-btn`, which scores
   (0,2,1) and would otherwise keep its 999px radius, 46px height and ink
   colour here. */
.ka-scope .ka-btn-promote,
body[data-page="account"] .ka-btn-promote {
  min-width: 0;
  min-height: 40px;
  height: 40px;
  padding: 8px 15px;
  flex: 0 1 auto;
  border-color: rgba(232, 178, 52, 0.55);
  border-radius: 13px 13px 13px 5px;
  color: var(--ka-ink);
  background: var(--ka-yellow-soft);
}

/* insurance only: at every viewport the row measures well inside its card, but
   an unusually long label should ellipsise rather than push the row wider */
.ka-scope .ka-btn-promote > span:last-child,
body[data-page="account"] .ka-btn-promote > span:last-child {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- "Hủy" (address form, profile form) ---------------------------------
   Same tonal recipe as the .ka-icon-btn-danger delete button — pale danger
   fill, danger text, danger border at 24% — so cancelling reads as the
   step-away action rather than a neutral ghost. Hover matches that button too,
   flooding solid danger with a white label.

   Both selector forms are needed to outrank .ka-btn-ghost, whose own rule is
   written as `body[data-page="account"] .ka-btn-ghost` and scores (0,2,1). */
.ka-scope .ka-btn-cancel,
body[data-page="account"] .ka-btn-cancel {
  border-color: rgba(201, 56, 79, 0.24);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}

/* --- states ------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .ka-scope .ka-btn:not(:disabled):hover,
  body[data-page="account"] .ka-btn:not(:disabled):hover {
    transform: translateY(-2px);
  }

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

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

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

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

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

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

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

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

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

  /* Hover lifts one step inside the same teal — no hue jump, no type colour
     flip. Needs to be its own rule because these buttons already sit on teal
     at rest, so the generic primary hover would be a no-op. */
  .ka-scope .ka-btn-primary.ka-btn-add:not(:disabled):hover {
    background: var(--ka-teal);
    box-shadow: 0 12px 26px rgba(11, 141, 130, 0.24);
  }
}

.ka-scope .ka-btn:not(:disabled):active,
body[data-page="account"] .ka-btn:not(:disabled):active {
  transform: translateY(0) scale(0.985);
}

.ka-scope .ka-btn:focus-visible,
.ka-menu .ka-btn:focus-visible,
body[data-page="account"] .ka-btn:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

.ka-scope .ka-btn:disabled,
body[data-page="account"] .ka-btn:disabled {
  border-color: var(--ka-line);
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ka-scope .ka-btn:disabled .ka-btn-icon,
body[data-page="account"] .ka-btn:disabled .ka-btn-icon {
  color: inherit;
  opacity: 0.75;
}

/* Loading: a determinate-looking sweep on the pill, never a spinning icon. */
.ka-scope .ka-btn.is-loading,
body[data-page="account"] .ka-btn.is-loading {
  cursor: progress;
}

.ka-scope .ka-btn.is-loading::after,
body[data-page="account"] .ka-btn.is-loading::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
  opacity: 0.5;
  transform-origin: 0 50%;
  animation: kaButtonSweep 1.1s var(--ka-ease) infinite;
}

@keyframes kaButtonSweep {
  0% { transform: scaleX(0); }
  55% { transform: scaleX(1); }
  100% { transform: scaleX(1) translateX(100%); }
}

/* --- icon-only buttons -------------------------------------------------- */
.ka-scope .ka-icon-btn,
.ka-menu .ka-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid var(--ka-line);
  border-radius: 13px 13px 13px 5px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  cursor: pointer;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-icon-btn svg.ka-icon {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .ka-icon-btn:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.4);
    color: var(--ka-teal-dark);
    background: #f2fbf9;
    transform: translateY(-1px);
  }

  .ka-scope .ka-icon-btn-danger:not(:disabled):hover {
    border-color: rgba(201, 56, 79, 0.4);
    color: #ffffff;
    background: var(--ka-danger);
  }

  .ka-scope .ka-icon-btn-edit:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.4);
    color: #ffffff;
    background: var(--ka-teal-dark);
  }

}

.ka-scope .ka-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

.ka-scope .ka-icon-btn:disabled {
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  cursor: not-allowed;
}

/* --- tonal icon buttons --------------------------------------------------
   The delete button set this shape; "Sửa" now shares it, so an address card's
   action row reads as one control group. With its word gone, hue is what
   identifies it — teal edits, red destroys — so it carries both aria-label and
   title. Rest fills are the pale end of each hue; hover floods that same hue
   solid, exactly as danger already did. ("Đặt mặc định" keeps its label and so
   stays a .ka-btn — see .ka-btn-promote — but wears the same tonal recipe in
   amber and the same corner-cut radius, so all three still read as one set.) */
.ka-scope .ka-icon-btn-danger {
  border-color: rgba(201, 56, 79, 0.24);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}

.ka-scope .ka-icon-btn-edit {
  border-color: rgba(11, 141, 130, 0.24);
  color: var(--ka-teal-dark);
  background: var(--ka-teal-soft);
}

/* ==========================================================================
   4. Page shell + sidebar
   ========================================================================== */

.account-page {
  padding-top: 34px;
  padding-bottom: 96px;
}

.ka-scope .ka-shell {
  display: grid;
  grid-template-columns: minmax(240px, 278px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.ka-scope .ka-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ka-scope .ka-drawer-inner {
  display: grid;
  gap: 14px;
}

.ka-scope .ka-drawer-head {
  display: none;
}

/* --- identity card ------------------------------------------------------
   Takes its fill and its decoration straight from .about-final-cta on the
   company page: flat brand teal under a 5% diagonal white sheen, with loose
   geometric shapes drifting past the edges. */
.ka-scope .ka-identity {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px 13px;
  align-items: center;
  padding: 17px 17px 15px;
  overflow: hidden;
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-cut) var(--ka-r-lg);
  color: #ffffff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 45%),
    var(--ka-teal);
  box-shadow: var(--ka-shadow-md);
}

/* everything except the art layer rides above it */
.ka-scope .ka-identity > *:not(.ka-identity-art) {
  position: relative;
  z-index: 1;
}

/* The four shapes from .about-final-cta-art, in the same order, colours and
   angles — scaled to about a third, since that block is 340px tall and this
   card is barely 100px. The printer's-crosshair mark that used to sit at the
   top right is gone: the yellow ring lands in that exact corner and two round
   devices there fought each other. */
.ka-scope .ka-identity-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.ka-scope .ka-identity-art i {
  position: absolute;
}

.ka-scope .ka-identity-art i:nth-child(1) {
  top: -26px;
  right: 10%;
  width: 74px;
  height: 74px;
  border: 15px solid rgba(246, 200, 82, 0.28);
  border-radius: 50%;
}

.ka-scope .ka-identity-art i:nth-child(2) {
  right: -10px;
  bottom: -22px;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  background: rgba(236, 99, 134, 0.32);
  transform: rotate(22deg);
}

.ka-scope .ka-identity-art i:nth-child(3) {
  bottom: 11px;
  left: 45%;
  width: 23px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(-18deg);
}

.ka-scope .ka-identity-art i:nth-child(4) {
  top: 7px;
  left: 44%;
  width: 5px;
  height: 29px;
  border-radius: 999px;
  background: rgba(53, 185, 199, 0.48);
  transform: rotate(45deg);
}

/* Brand-yellow chip with a deep-ink glyph and a notched corner — see
   --ka-avatar-* for why the gradient stops where it does. On the identity
   card's teal it reads as the one lit object in the panel. */
.ka-scope .ka-identity-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-deep);
  background: var(--ka-avatar-fill);
  box-shadow: var(--ka-avatar-ring);
}

.ka-scope .ka-identity-avatar svg.ka-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.ka-scope .ka-identity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 26px;
}

.ka-scope .ka-identity-copy strong {
  overflow: hidden;
  font-family: var(--font-brand);
  font-size: 0.87rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Solid white, not the 60% it used to be. Against the old deep ink 60% still
   cleared AA comfortably; against brand teal it collapses to 2.2:1, so the
   secondary tone now has to come from size and weight instead of opacity. */
.ka-scope .ka-identity-copy small {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CMY ink key — brand identity without colouring the icons themselves */
.ka-scope .ka-identity-ink {
  display: flex;
  grid-column: 1;
  gap: 4px;
  align-items: center;
  padding-left: 3px;
}

.ka-scope .ka-identity-ink i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ka-cyan);
}

.ka-scope .ka-identity-ink i:nth-child(2) { background: var(--ka-magenta); }
.ka-scope .ka-identity-ink i:nth-child(3) { background: var(--ka-yellow); }

.ka-scope .ka-identity-meta {
  display: flex;
  grid-column: 2;
  gap: 7px;
  align-items: center;
  color: #ffffff;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.ka-scope .ka-identity-meta-icon svg.ka-icon {
  width: 14px;
  height: 14px;
}

/* --- navigation --------------------------------------------------------- */
.ka-scope .ka-nav {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  grid-template-columns: none;
}

.ka-scope .ka-nav-group {
  display: grid;
  gap: 3px;
}

.ka-scope .ka-nav-group + .ka-nav-group {
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--ka-line);
}

.ka-scope .ka-nav-group-label {
  margin: 0 0 3px;
  padding-left: 12px;
  color: var(--ka-muted-soft);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ka-scope .ka-nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 52px;
  padding: 8px 11px 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-ink);
  background: transparent;
  text-decoration: none;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

/* active ink bar */
.ka-scope .ka-nav-item::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: var(--ka-teal);
  content: "";
  transform: translateY(-50%);
  transition: height var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-nav-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px 12px 12px 4px;
  color: var(--ka-teal);
  background: #eef7f6;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-nav-icon svg.ka-icon {
  width: 19px;
  height: 19px;
}

.ka-scope .ka-nav-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.ka-scope .ka-nav-copy strong {
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.ka-scope .ka-nav-copy small {
  overflow: hidden;
  color: var(--ka-muted);
  font-size: 0.64rem;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ka-scope .ka-nav-count {
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-nav-count.is-quiet {
  color: var(--ka-muted);
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .ka-nav-item:hover {
    background: var(--ka-paper-soft);
    transform: translateX(2px);
  }

  .ka-scope .ka-nav-item:hover .ka-nav-icon {
    color: var(--ka-teal-dark);
    background: #e3f4f1;
  }
}

.ka-scope .ka-nav-item:focus-visible {
  outline: none;
  border-color: rgba(53, 185, 199, 0.5);
  box-shadow: var(--ka-focus);
}

.ka-scope .ka-nav-item.is-active {
  color: var(--ka-deep);
  background: #eaf7f5;
}

.ka-scope .ka-nav-item.is-active::before {
  height: 24px;
}

.ka-scope .ka-nav-item.is-active .ka-nav-icon {
  color: #ffffff;
  background: var(--ka-teal);
}

.ka-scope .ka-nav-item.is-active .ka-nav-copy strong {
  font-weight: 900;
}

.ka-scope .ka-nav-item.is-active .ka-nav-count {
  color: var(--ka-teal-dark);
  background: rgba(11, 141, 130, 0.14);
}

/* --- sidebar footer ----------------------------------------------------- */
.ka-scope .ka-sidebar-foot {
  display: grid;
}

/* Wears the notch instead of the pill every other .ka-btn uses, so the sidebar
   logout and the header dropdown's .account-menu-logout are the same object in
   two places. Border, radius and shadow are taken from that button verbatim,
   including its faintly warm shadow tint.

   The body[data-page] duplicate is required: .ka-btn-ghost's own rule is also
   written as `body[data-page="account"] .ka-btn-ghost`, which scores (0,2,1)
   and was silently winning border-color and background here. */
.ka-scope .ka-logout,
body[data-page="account"] .ka-logout {
  justify-content: flex-start;
  padding-left: 16px;
  border-color: var(--ka-line);
  border-radius: var(--ka-notch);
  color: var(--ka-muted);
  background: var(--ka-paper);
  box-shadow: 0 7px 16px rgba(145, 51, 51, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  /* Both selector forms are required to outrank the generic .ka-btn-ghost
     hover a few lines up: that rule's `body[data-page="account"] ...` variant
     carries an extra element-level specificity point, so a single
     `.ka-scope .ka-logout:hover` rule loses to it and the ghost's ink/#e2eded
     hover shows instead — which was the bug being fixed here. Values mirror
     .account-menu-logout:hover so the sidebar and header dropdown agree. */
  .ka-scope .ka-logout:not(:disabled):hover,
  body[data-page="account"] .ka-logout:not(:disabled):hover {
    border-color: rgba(201, 56, 79, 0.3);
    color: var(--ka-danger);
    background: var(--ka-danger-soft);
  }
}

/* ==========================================================================
   5. Workspace (main column)
   ========================================================================== */

.ka-scope .ka-main {
  display: grid;
  min-width: 0;
  gap: 18px;
  scroll-margin-top: calc(var(--header-h) + 14px);
}

/* Four fixed slots, identical in every section:
     eyebrow | trigger
     title   | actions
   The trigger is a direct child of the header (not nested in the copy column)
   so it is pinned to the same top-right corner no matter what a section puts
   in its action slot. */
.ka-scope .ka-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow trigger"
    "title   actions";
  /* the title row keeps a fixed floor so its baseline does not shift between
     sections that carry a tall action (a button) and ones that carry only a
     count pill — or nothing at all */
  grid-template-rows: auto minmax(48px, auto);
  gap: 10px 16px;
  align-items: center;
  padding: 2px 4px 0;
}

.ka-scope .ka-workspace-eyebrow {
  grid-area: eyebrow;
  align-self: center;
  min-width: 0;
  min-height: 26px;
}

/* the eyebrow is a single unbreakable line — "GIAO HÀNG" must never split */
.ka-scope .ka-workspace-eyebrow .ka-eyebrow-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The trigger shares the auto column with the actions block, and because it has
   a fixed width it would otherwise sit at the *start* of whatever width the
   actions demand — which is why it drifted a different amount in every section.
   Pinning it to the end of the track keeps it on the same right edge always. */
.ka-scope .ka-workspace-head .ka-nav-trigger {
  grid-area: trigger;
  align-self: center;
  justify-self: end;
}

.ka-scope .ka-workspace-head .ka-workspace-actions {
  justify-self: end;
}

.ka-scope .ka-workspace-title {
  display: block;
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -0.048em;
  line-height: 1.04;
  overflow-wrap: break-word;
}

.ka-scope .ka-workspace-actions {
  display: flex;
  grid-area: actions;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
}

/* mobile nav trigger — hidden on desktop */
.ka-scope .ka-nav-trigger {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 1px solid var(--ka-line-strong);
  border-radius: 13px 13px 13px 5px;
  color: var(--ka-teal-dark);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  cursor: pointer;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-nav-trigger svg.ka-icon {
  width: 20px;
  height: 20px;
}

.ka-scope .ka-nav-trigger:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

.ka-scope .ka-nav-trigger[aria-expanded="true"] {
  border-color: rgba(11, 141, 130, 0.5);
  color: #ffffff;
  background: var(--ka-teal);
}

/* ==========================================================================
   6. Surfaces — panels and cards
   ========================================================================== */

.ka-scope .ka-panel,
.ka-scope .account-orders-content,
.ka-scope .account-order-detail-content {
  padding: 20px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
}

.ka-scope .ka-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.ka-scope .ka-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  overflow: visible;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-lg) var(--ka-cut);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  transition: box-shadow var(--ka-base) var(--ka-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .ka-card:hover {
    box-shadow: var(--ka-shadow-md);
  }
}

.ka-scope .ka-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding-bottom: 2px;
}

.ka-scope .ka-card-head > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ka-scope .ka-card-head h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -0.032em;
  line-height: 1.12;
}

/* The profile card head carries an action button, so its text column is the
   first thing to run out of room. Rather than let "Thông tin cá nhân" wrap to
   a second line, the title is dropped once the column can no longer hold it on
   one line — the eyebrow above it still names the card. Measured intrinsic
   widths: "Thông tin cá nhân" 137px, "Cập nhật thông tin" 141px. */
.ka-scope .account-profile-card-heading .ka-card-head-copy {
  container-type: inline-size;
  container-name: kaProfileHead;
}

.ka-scope .account-profile-card-heading .ka-card-head-copy h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container kaProfileHead (max-width: 147px) {
  .ka-scope .account-profile-card-heading .ka-card-head-copy h3 {
    display: none;
  }
}

/* profile summary list */
.ka-scope .account-profile-details {
  border-color: var(--ka-line);
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}

.ka-scope .account-profile-details > div {
  border-bottom-color: var(--ka-line);
}

.ka-scope .account-profile-details dt {
  color: var(--ka-muted);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.ka-scope .account-profile-details dd {
  color: var(--ka-ink);
  font-size: 0.74rem;
  font-weight: 800;
}

/* --- email preference switch -------------------------------------------- */
.ka-scope .account-email-toggle {
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md);
  color: var(--ka-ink);
  background: var(--ka-paper-soft);
  box-shadow: none;
  transition:
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease);
}

.ka-scope .account-email-toggle-copy strong {
  color: var(--ka-ink);
  font-size: 0.76rem;
  font-weight: 850;
}

.ka-scope .account-email-toggle-copy small {
  color: var(--ka-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.ka-scope .account-email-switch {
  border-color: var(--ka-line-strong);
  background: #dae4e5;
  box-shadow: inset 0 1px 3px rgba(20, 45, 53, 0.1);
}

.ka-scope .account-email-toggle.is-on {
  border-color: rgba(11, 141, 130, 0.4);
  background: #f0fbf9;
  box-shadow: none;
}

.ka-scope .account-email-toggle.is-on .account-email-switch {
  border-color: var(--ka-teal-dark);
  background: var(--ka-teal);
}

.ka-scope .account-email-toggle:not(:disabled):hover {
  border-color: rgba(11, 141, 130, 0.45);
  box-shadow: var(--ka-shadow-sm);
  transform: none;
}

.ka-scope .account-email-toggle:focus-visible {
  outline: none;
  border-color: var(--ka-teal);
  box-shadow: var(--ka-focus);
  transform: none;
}

.ka-scope .account-email-toggle:disabled {
  cursor: progress;
  opacity: 0.72;
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

.ka-scope .ka-form {
  display: grid;
  gap: 14px;
}

.ka-scope .ka-field {
  display: grid;
  gap: 7px;
  position: relative;
}

.ka-scope .ka-field-label {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  color: #40575e;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.005em;
}

.ka-scope .ka-field-label small {
  margin-left: auto;
  color: var(--ka-muted-soft);
  font-size: 0.64rem;
  font-weight: 650;
}

.ka-scope .ka-field-label strong {
  font-weight: 900;
}

.ka-scope .ka-field-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ka-teal);
}

.ka-scope .ka-field-icon svg.ka-icon {
  width: 16px;
  height: 16px;
}

/* styles.css carries a very high-specificity global control rule
   (`input:not(...)` x7). The id anchor below is the least noisy way to win
   that cascade without sprinkling !important through the system. */
#accountPageContent input:not([type="checkbox"]):not([type="radio"]),
#accountPageContent textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ka-line-strong);
  border-radius: var(--ka-r-md);
  color: var(--ka-ink);
  background: var(--ka-paper-soft);
  box-shadow: none;
  font: inherit;
  font-size: 0.79rem;
  font-weight: 600;
  transition:
    border-color var(--ka-fast) ease,
    background var(--ka-fast) ease,
    box-shadow var(--ka-fast) ease;
}

#accountPageContent .ka-field textarea,
#accountPageContent .account-address-field textarea {
  min-height: 112px;
  line-height: 1.6;
  resize: vertical;
}

#accountPageContent input::placeholder,
#accountPageContent textarea::placeholder {
  color: #9aacb0;
  font-weight: 500;
}

#accountPageContent input:not([type="checkbox"]):not([type="radio"]):hover,
#accountPageContent textarea:hover {
  border-color: var(--ka-line-strong);
  background: var(--ka-paper);
}

#accountPageContent input:not([type="checkbox"]):not([type="radio"]):focus,
#accountPageContent textarea:focus {
  border-color: var(--ka-teal);
  background: var(--ka-paper);
  box-shadow: 0 0 0 4px rgba(11, 141, 130, 0.12);
  outline: none;
}

#accountPageContent input:disabled,
#accountPageContent textarea:disabled {
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  cursor: not-allowed;
}

/* Search keeps its own borderless pill treatment. The attribute selector is
   needed to outrank the global control rule, which would otherwise force a
   48px input and make the search 4px taller than every other action control. */
#accountPageContent .ka-search input[type="search"] {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.76rem;
  font-weight: 650;
}

.ka-scope .ka-field:focus-within .ka-field-icon {
  color: var(--ka-teal-dark);
}

/* password visibility toggle — 40px hit target, labelled in JS */
.ka-scope .password-field > input {
  padding-right: 50px;
}

.ka-scope .password-visibility-toggle {
  right: 6px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--ka-muted);
}

.ka-scope .password-visibility-toggle svg.ka-icon {
  width: 19px;
  height: 19px;
}

.ka-scope .password-visibility-toggle:hover,
.ka-scope .password-visibility-toggle.is-visible {
  color: var(--ka-teal-dark);
  background: rgba(11, 141, 130, 0.1);
}

.ka-scope .password-visibility-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

/* form action rows — one primary, one quiet escape */
.ka-scope .ka-form-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  margin-top: 2px;
}

.ka-scope .ka-form-actions.is-single {
  grid-template-columns: auto minmax(0, 1fr);
}

/* checkbox row */
.ka-scope .account-address-default-field {
  border-color: var(--ka-line);
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}

.ka-scope .account-address-default-field input:checked {
  border-color: var(--ka-teal);
  background: var(--ka-teal);
}

.ka-scope .account-address-default-field:focus-within {
  border-color: var(--ka-teal);
  box-shadow: 0 0 0 4px rgba(11, 141, 130, 0.1);
}

/* ==========================================================================
   8. Search + segmented control
   ========================================================================== */

.ka-scope .ka-search {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 232px;
  min-height: 46px;
  /* clears a stray legacy margin that made the album action row 4px taller
     than every other section's */
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ka-line-strong);
  border-radius: 999px;
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  transition:
    border-color var(--ka-fast) ease,
    box-shadow var(--ka-fast) ease;
}

.ka-scope .ka-search-icon {
  display: grid;
  place-items: center;
  color: var(--ka-muted);
}

.ka-scope .ka-search-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}

.ka-scope .ka-search input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--ka-ink);
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  outline: none;
}

.ka-scope .ka-search:focus-within {
  border-color: var(--ka-teal);
  box-shadow: 0 0 0 4px rgba(11, 141, 130, 0.12);
}

.ka-scope .ka-search:focus-within .ka-search-icon {
  color: var(--ka-teal-dark);
}

.ka-scope .ka-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ka-line);
  border-radius: 999px;
  background: var(--ka-paper-sunk);
}

.ka-scope .ka-segmented button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ka-muted);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease,
    box-shadow var(--ka-fast) ease;
}

.ka-scope .ka-segmented button svg.ka-icon {
  width: 17px;
  height: 17px;
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .ka-segmented button:hover {
    color: var(--ka-teal-dark);
  }
}

.ka-scope .ka-segmented button:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

.ka-scope .ka-segmented button.is-active {
  color: var(--ka-teal-dark);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
}

/* ==========================================================================
   9. Status badges — colour is never the only signal
   ========================================================================== */

.ka-scope .ka-status,
body[data-page="account"] .ka-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 26px;
  padding: 4px 11px 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
  font-size: 0.655rem;
  font-weight: 850;
  letter-spacing: 0.015em;
  line-height: 1.2;
  white-space: nowrap;
}

.ka-scope .ka-status .ka-status-icon {
  display: grid;
  place-items: center;
  flex: none;
}

.ka-scope .ka-status svg.ka-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.ka-scope .ka-status.is-new {
  border-color: #b7e4ea;
  color: #0d6c7a;
  background: #e9f7fa;
}

.ka-scope .ka-status.is-confirmed {
  border-color: #d2ccf2;
  color: #4a3da0;
  background: #efedfc;
}

.ka-scope .ka-status.is-printing {
  border-color: #efd27a;
  color: #765400;
  background: #fff7d7;
}

.ka-scope .ka-status.is-shipping {
  border-color: #b4e2da;
  color: var(--ka-teal-dark);
  background: #e7f6f3;
}

.ka-scope .ka-status.is-completed {
  border-color: #bde2c9;
  color: var(--ka-success);
  background: #e9f6ed;
}

.ka-scope .ka-status.is-cancelled {
  border-color: #e6cbd0;
  color: #91323e;
  background: #f7ebed;
}

.ka-scope .ka-status.is-processing {
  border-color: var(--ka-line);
  color: #4d6268;
  background: var(--ka-paper-sunk);
}

/* ==========================================================================
   10. Empty / loading states
   ========================================================================== */

.ka-scope .ka-empty {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 40px 22px;
  border: 1px dashed var(--ka-line-strong);
  border-radius: var(--ka-r-lg);
  background: var(--ka-paper-soft);
  text-align: center;
}

.ka-scope .ka-empty-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border: 1px solid rgba(11, 141, 130, 0.18);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-teal);
  background: #eaf6f4;
}

.ka-scope .ka-empty-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}

.ka-scope .ka-empty strong,
.ka-scope .ka-empty h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.ka-scope .ka-empty p,
.ka-scope .ka-empty > span,
.ka-scope .ka-empty small {
  max-width: 42ch;
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.73rem;
  font-weight: 550;
  line-height: 1.6;
}

.ka-scope .ka-empty .ka-btn {
  margin-top: 8px;
}

.ka-scope .ka-empty.is-error .ka-empty-icon {
  border-color: rgba(201, 56, 79, 0.2);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}

.ka-scope .ka-empty.is-loading .ka-empty-icon {
  animation: kaPulse 1.4s ease-in-out infinite;
}

@keyframes kaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.ka-scope .ka-empty.compact {
  padding: 28px 18px;
}

/* ==========================================================================
   11. Address cards
   ========================================================================== */

.ka-scope .ka-address-card {
  position: relative;
  display: grid;
  gap: 15px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-cut) var(--ka-r-lg) var(--ka-r-lg);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  transition:
    border-color var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

.ka-scope .ka-address-card::before,
.ka-scope .ka-address-card::after {
  content: none;
}

/* --- default address: the company page's hero treatment ------------------
   Same recipe as .about-hero-v2: a warm cream→mint paper gradient lit by a
   yellow, a cyan and a magenta ink glow, with the blueprint-grid corner and
   the CMY registration bar as signature details. Opacities are nudged up from
   the hero's since the card is far smaller — at hero values the colour would
   not read at this size. */
.ka-scope .ka-address-card.is-default {
  border-color: rgba(11, 141, 130, 0.34);
  background:
    radial-gradient(circle at 7% 6%, rgba(246, 200, 82, 0.26), transparent 27%),
    radial-gradient(circle at 97% 11%, rgba(53, 185, 199, 0.22), transparent 31%),
    radial-gradient(circle at 91% 97%, rgba(236, 99, 134, 0.16), transparent 33%),
    linear-gradient(118deg, #fffdf8 0%, #f9f5e8 56%, #f4fbf9 100%);
}

/* blueprint grid in the bottom-left corner — mirrors .about-hero-v2-paper-grid */
.ka-scope .ka-address-card.is-default::before {
  position: absolute;
  z-index: 0;
  inset: auto auto -66px -50px;
  width: 220px;
  height: 220px;
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(20, 45, 53, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 45, 53, 0.22) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  pointer-events: none;
  transform: rotate(-8deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 36%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0 36%, transparent 72%);
}

/* CMY ink bar on the top edge — the hero's floating swatch, moved here so it
   clears the "Mặc định" chip that already occupies the top-right corner */
.ka-scope .ka-address-card.is-default::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 86px;
  height: 5px;
  border-radius: 0 0 999px 0;
  background: linear-gradient(
    90deg,
    var(--ka-cyan) 0 33.33%,
    var(--ka-magenta) 33.33% 66.66%,
    var(--ka-yellow) 66.66%
  );
  content: "";
  pointer-events: none;
}

/* keep the card's own content above the decoration */
.ka-scope .ka-address-card.is-default > * {
  position: relative;
  z-index: 1;
}

/* the details panel turns translucent so the paper tint reads through it
   instead of covering the middle of the card with a flat block */
.ka-scope .ka-address-card.is-default .account-address-card-details {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.6);
}

/* The tinted paper is darker than the plain white card, which drops the small
   uppercase labels from ~4.6:1 to ~3.9:1. One step darker puts them back over
   AA without changing the look of the rest of the list. */
.ka-scope .ka-address-card.is-default .account-address-card-identity small,
.ka-scope .ka-address-card.is-default .account-address-detail-row small {
  color: var(--ka-muted);
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .ka-address-card:hover {
    border-color: var(--ka-line-strong);
    box-shadow: var(--ka-shadow-md);
    transform: translateY(-2px);
  }
}

/* --- reorder animation (see playAddressCardReorder in app.js) ------------- */

/* While a card is sliding, its own hover transform must not fight the
   animation's transform, and it needs to sit above the cards it passes. */
.ka-scope .ka-address-card.is-reordering,
.ka-scope .ka-address-card.is-reordering-lead {
  position: relative;
  pointer-events: none;
  will-change: transform;
}

.ka-scope .ka-address-card.is-reordering {
  z-index: 1;
}

/* the promoted card travels over the others */
.ka-scope .ka-address-card.is-reordering-lead {
  z-index: 2;
  box-shadow: var(--ka-shadow-lg);
}

/* brief teal wash so it is obvious which card was just promoted */
.ka-scope .ka-address-card.is-promoted {
  animation: kaAddressPromoted 1200ms var(--ka-ease) both;
}

@keyframes kaAddressPromoted {
  0% {
    border-color: var(--ka-teal);
    box-shadow: 0 0 0 3px rgba(11, 141, 130, 0.22), var(--ka-shadow-md);
  }
  60% {
    border-color: var(--ka-teal);
    box-shadow: 0 0 0 3px rgba(11, 141, 130, 0.16), var(--ka-shadow-sm);
  }
  100% {
    border-color: rgba(11, 141, 130, 0.34);
    box-shadow: 0 0 0 0 rgba(11, 141, 130, 0), var(--ka-shadow-sm);
  }
}

/* the "Mặc định" chip fades in with the card rather than popping */
.ka-scope .ka-address-card.is-promoted .account-address-default-badge {
  animation: kaDefaultBadgeIn 420ms 120ms var(--ka-ease) both;
}

@keyframes kaDefaultBadgeIn {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}

.ka-scope .account-address-card-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
}

.ka-scope .account-address-card-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ka-scope .account-address-card-identity small {
  color: var(--ka-muted-soft);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ka-scope .account-address-card-identity strong {
  overflow: hidden;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: -0.028em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ka-scope .account-address-card-details {
  display: grid;
  gap: 11px;
  padding: 14px;
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}

.ka-scope .account-address-detail-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 0;
}

.ka-scope .account-address-detail-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 0;
  border-radius: 0;
  color: var(--ka-teal);
  background: transparent;
}

.ka-scope .account-address-detail-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}

.ka-scope .account-address-detail-row small {
  display: block;
  margin-bottom: 2px;
  color: var(--ka-muted-soft);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ka-scope .account-address-detail-row strong,
.ka-scope .account-address-detail-row address {
  color: var(--ka-ink);
  font-size: 0.77rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

/* This row used to be two text pills plus the delete square — ~299px against a
   ~292px card around a 1000px viewport, which is why the delete icon kept
   dropping to a second line and needed a container query to shrink everything.
   All three are 40px squares now: 3x40 + 2x8 = 136px, so the row cannot outgrow
   even the narrowest card and the whole cqw scaling apparatus is gone with it.
   Edit and promote cluster at the left; destroy is pushed to the far right so a
   mis-aimed click lands on nothing. */
.ka-scope .account-address-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0;
  border: 0;
}

.ka-scope .account-address-actions .ka-icon-btn-danger {
  margin-left: auto;
}

/* the address workspace wrapper is a plain container — the cards are the
   surfaces, so it must not draw a second card around them */
.ka-scope .account-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-margin-top: calc(var(--header-h) + 14px);
}

.ka-scope .account-address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

/* ==========================================================================
   12. Modal (address editor) + confirm dialog
   ========================================================================== */

.ka-scope .account-address-modal-backdrop {
  background: rgba(10, 28, 33, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ka-scope .ka-modal {
  display: grid;
  gap: 17px;
  padding: 24px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-lg);
  animation: kaModalIn 260ms var(--ka-ease) both;
}

@keyframes kaModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

.ka-scope .ka-modal-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 0 0 3px;
  border: 0;
}

.ka-scope .ka-modal-head .account-address-form-copy .ka-eyebrow {
  color: var(--ka-teal-dark);
}

.ka-scope .account-address-default-copy strong {
  color: var(--ka-ink);
  font-size: 0.76rem;
  font-weight: 850;
}

.ka-scope .account-address-default-copy small {
  color: var(--ka-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.ka-scope .account-address-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ka-scope .account-address-field.is-wide {
  grid-column: 1 / -1;
}

/* ==========================================================================
   13. Orders — list, detail, actions
   ========================================================================== */

/* Always a single column. styles.css puts `.gallery-grid, .feedback-list,
   .orders-list` on two columns inside its 920px media query and only undoes it
   at 640px, which made the account order list jump back to two columns between
   920px and 641px. Declaring the columns here (higher specificity, later file)
   settles it at every width. */
.ka-scope .orders-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.ka-scope .order-list-item {
  border: 0;
  background: transparent;
}

.ka-scope .order-list-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto 26px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-ink);
  background: var(--ka-paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .order-list-row:hover {
    border-color: rgba(11, 141, 130, 0.34);
    background: var(--ka-paper-soft);
    box-shadow: var(--ka-shadow-sm);
    transform: translateX(3px);
  }
}

.ka-scope .order-list-row:focus-visible {
  outline: none;
  border-color: var(--ka-teal);
  box-shadow: var(--ka-focus);
}

.ka-scope .order-list-thumb {
  width: 62px;
  height: 62px;
  border-radius: 12px 12px 12px 4px;
  overflow: hidden;
  background: var(--ka-paper-sunk);
}

.ka-scope .order-list-summary {
  display: grid;
  gap: 7px;
  justify-items: start;
  min-width: 0;
}

.ka-scope .order-list-summary > span:not(.ka-status) {
  overflow: hidden;
  color: var(--ka-muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ka-scope .order-list-summary > span:not(.ka-status) strong {
  color: var(--ka-ink);
  font-weight: 900;
}

.ka-scope .order-list-date {
  display: grid;
  gap: 2px;
  text-align: right;
}

.ka-scope .order-list-date small {
  color: var(--ka-muted-soft);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ka-scope .order-list-date strong {
  color: var(--ka-ink);
  font-size: 0.74rem;
  font-weight: 800;
}

.ka-scope .order-list-chevron {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  color: var(--ka-muted-soft);
  background: transparent;
  transition:
    color var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

.ka-scope .order-list-chevron::before {
  content: none;
}

.ka-scope .order-list-chevron svg.ka-icon {
  width: 18px;
  height: 18px;
}

.ka-scope .order-list-row:hover .order-list-chevron,
.ka-scope .order-list-row:focus-visible .order-list-chevron {
  color: var(--ka-teal);
  transform: translateX(3px);
}

/* --- detail ------------------------------------------------------------- */
.ka-scope .order-detail-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ka-scope .order-detail-heading-copy {
  display: grid;
  flex: 1 1 560px;
  gap: 9px;
  min-width: 0;
}

.ka-scope .order-detail-heading-meta {
  width: 100%;
}

.ka-scope .order-detail-heading h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.036em;
  line-height: 1.1;
}

.ka-scope .order-detail-heading h3 strong {
  font-weight: 900;
}

.ka-scope .order-detail-section {
  padding: 17px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md);
  background: var(--ka-paper-soft);
}

.ka-scope .order-detail-section h4 {
  margin: 0 0 11px;
  color: var(--ka-teal-dark);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ka-scope .order-detail-section dt {
  color: var(--ka-muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.ka-scope .order-detail-section dd {
  color: var(--ka-ink);
  font-size: 0.75rem;
  font-weight: 750;
}

.ka-scope .order-detail-image {
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  overflow: hidden;
}

/* --- order action buttons ---------------------------------------------- */
.ka-scope .order-detail-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 17px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-lg) var(--ka-cut);
  background: var(--ka-paper-soft);
}

.ka-scope .order-detail-actions-copy strong {
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: -0.024em;
}

.ka-scope .order-detail-actions-copy small {
  color: var(--ka-muted);
  font-size: 0.69rem;
  line-height: 1.55;
}

.ka-scope .order-detail-action-buttons {
  display: flex;
  gap: 9px;
  align-items: stretch;
  flex-wrap: wrap;
}

.ka-scope .order-action-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 9px 17px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-ink);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--ka-base) var(--ka-ease),
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

.ka-scope .order-action-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px 11px 11px 4px;
  color: var(--ka-teal);
  background: #eef7f6;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease);
}

.ka-scope .order-action-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}

.ka-scope .order-action-button > span:last-child {
  display: grid;
  gap: 1px;
}

.ka-scope .order-action-button strong {
  color: inherit;
  font-size: 0.74rem;
  font-weight: 850;
}

.ka-scope .order-action-button small {
  color: var(--ka-muted);
  font-size: 0.62rem;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .order-action-button:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.4);
    box-shadow: var(--ka-shadow-md);
    transform: translateY(-2px);
  }
}

.ka-scope .order-action-button:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

.ka-scope .order-action-button.is-primary {
  border-color: transparent;
  color: #ffffff;
  background: var(--ka-deep);
  box-shadow: 0 12px 26px rgba(16, 40, 47, 0.2);
}

.ka-scope .order-action-button.is-primary .order-action-icon {
  color: var(--ka-yellow);
  background: rgba(255, 255, 255, 0.1);
}

.ka-scope .order-action-button.is-primary small {
  color: rgba(255, 255, 255, 0.62);
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .order-action-button.is-primary:not(:disabled):hover {
    background: var(--ka-teal);
  }
}

.ka-scope .order-action-button.is-danger {
  border-color: rgba(201, 56, 79, 0.22);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
  box-shadow: none;
}

.ka-scope .order-action-button.is-danger .order-action-icon {
  color: var(--ka-danger);
  background: rgba(201, 56, 79, 0.1);
}

.ka-scope .order-action-button.is-danger strong,
.ka-scope .order-action-button.is-danger small {
  color: #a32e42;
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .order-action-button.is-danger:not(:disabled):hover {
    border-color: transparent;
    color: #ffffff;
    background: var(--ka-danger);
  }

  .ka-scope .order-action-button.is-danger:not(:disabled):hover .order-action-icon,
  .ka-scope .order-action-button.is-danger:not(:disabled):hover strong,
  .ka-scope .order-action-button.is-danger:not(:disabled):hover small {
    color: #ffffff;
  }

  .ka-scope .order-action-button.is-danger:not(:disabled):hover .order-action-icon {
    background: rgba(255, 255, 255, 0.12);
  }
}

.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible {
  border-color: transparent;
  color: #ffffff;
  background: var(--ka-danger);
}

.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible .order-action-icon,
.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible strong,
.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible small {
  color: #ffffff;
}

.ka-scope .order-action-button.is-danger:not(:disabled):focus-visible .order-action-icon {
  background: rgba(255, 255, 255, 0.12);
}

.ka-scope .order-action-button:disabled {
  border-color: var(--ka-line);
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ka-scope .order-action-button:disabled .order-action-icon {
  color: var(--ka-muted-soft);
  background: #e6eded;
}

/* --- pagination --------------------------------------------------------- */
.ka-scope .account-order-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ka-line);
}

.ka-scope .account-section-pagination {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ka-line);
}

.ka-scope .account-section-pagination .account-page-summary {
  margin: 0;
  color: var(--ka-muted);
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.45;
}

.ka-scope .account-section-pagination .account-order-pagination {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  border-top: 0;
  flex-wrap: nowrap;
}

.ka-scope .account-section-pagination .account-order-page-numbers {
  min-width: 0;
  justify-content: center;
}

@media (max-width: 620px) {
  .ka-scope .account-section-pagination .account-order-page-nav span:not([aria-hidden]) {
    display: none;
  }

  .ka-scope .account-section-pagination .account-order-page-nav {
    min-width: 40px;
    padding-inline: 11px;
  }
}

.ka-scope .account-order-page-nav {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--ka-line);
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  box-shadow: none;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    border-color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}

.ka-scope .account-order-page-nav svg.ka-icon {
  width: 15px;
  height: 15px;
}

.ka-scope .account-order-page-numbers {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ka-scope .account-order-page-number {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ka-muted);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}

.ka-scope .account-order-page-ellipsis {
  padding: 0 3px;
  color: var(--ka-muted-soft);
  font-weight: 900;
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .account-order-page-nav:not(:disabled):hover,
  .ka-scope .account-order-page-number:not(.is-active):hover {
    border-color: rgba(11, 141, 130, 0.4);
    color: var(--ka-teal-dark);
    background: #f2fbf9;
  }
}

.ka-scope .account-order-page-nav:focus-visible,
.ka-scope .account-order-page-number:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

.ka-scope .account-order-page-number.is-active {
  border-color: transparent;
  color: #ffffff;
  background: var(--ka-deep);
}

.ka-scope .account-order-page-nav:disabled {
  border-color: var(--ka-line);
  color: var(--ka-muted-soft);
  background: var(--ka-paper-sunk);
  cursor: not-allowed;
  opacity: 1;
}

/* The filter button itself keeps its original styling from styles.css —
   deliberately not restyled here. Only the toolbar row is arranged: launcher
   pinned left, count annotation right. styles.css pushes the launcher to the
   right inside the account panels, so that has to be undone. */
.ka-scope .account-order-filter-toolbar {
  margin-bottom: 14px;
}

.ka-scope .account-orders-content > .account-order-filter-toolbar,
.ka-scope .account-feedback-content > .feedback-filter-toolbar {
  display: flex;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ka-scope .account-orders-content > .account-order-filter-toolbar .account-order-filter-launcher,
.ka-scope .account-feedback-content > .feedback-filter-toolbar .account-order-filter-launcher {
  justify-items: start;
  min-width: 0;
}

.ka-scope .ka-toolbar-count {
  margin-left: auto;
  flex: none;
}

/* ==========================================================================
   14. Feedback section
   ========================================================================== */

.ka-scope .account-feedback-composer {
  display: grid;
  gap: 15px;
}

.ka-scope .account-feedback-composer > header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ka-line);
}

.ka-scope .account-feedback-composer > header > div {
  display: grid;
  gap: 8px;
}

.ka-scope .account-feedback-composer h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.032em;
}

.ka-scope .account-feedback-composer header p:last-child {
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.ka-scope .account-feedback-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 11px;
}

.ka-scope .account-feedback-product {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  background: var(--ka-paper);
  cursor: pointer;
  transition:
    border-color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ka-scope .account-feedback-product:hover {
    border-color: rgba(11, 141, 130, 0.36);
    box-shadow: var(--ka-shadow-md);
    transform: translateY(-2px);
  }
}

.ka-scope .account-feedback-product:focus-visible {
  outline: none;
  border-color: var(--ka-teal);
  box-shadow: var(--ka-focus);
}

.ka-scope .account-feedback-product-image {
  width: 54px;
  height: 54px;
  border-radius: 11px 11px 11px 4px;
  overflow: hidden;
}

.ka-scope .account-feedback-product-action {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ka-warning);
  background: #fdf4dd;
  font-size: 0.66rem;
  font-weight: 900;
}

.ka-scope .account-feedback-product-action svg.ka-icon {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   15. Danger zone
   ========================================================================== */

.ka-scope .ka-danger-zone {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: start;
  padding: 24px;
  border: 1px solid rgba(201, 56, 79, 0.2);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background:
    radial-gradient(circle at 0 0, rgba(201, 56, 79, 0.05), transparent 42%),
    var(--ka-paper);
  box-shadow: none;
}

.ka-scope .ka-danger-copy {
  display: grid;
  gap: 9px;
}

.ka-scope .ka-danger-copy h3 {
  margin: 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: -0.034em;
}

.ka-scope .ka-danger-copy p:last-child {
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.73rem;
  line-height: 1.62;
}

/* ==========================================================================
   16. Login gate (signed-out state)
   ========================================================================== */

.ka-scope .ka-gate {
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 420px;
  padding: 56px 24px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  background:
    radial-gradient(circle at 50% 0, rgba(53, 185, 199, 0.08), transparent 44%),
    var(--ka-paper);
  box-shadow: var(--ka-shadow-sm);
  place-content: center;
  text-align: center;
}

/* Registration mark instead of the old "ID" glyph */
.ka-scope .ka-gate-mark {
  position: relative;
  width: 66px;
  height: 66px;
  margin-bottom: 10px;
  border: 1px solid rgba(11, 141, 130, 0.35);
  border-radius: 50%;
  background:
    linear-gradient(rgba(11, 141, 130, 0.35), rgba(11, 141, 130, 0.35)) center / 100% 1px no-repeat,
    linear-gradient(rgba(11, 141, 130, 0.35), rgba(11, 141, 130, 0.35)) center / 1px 100% no-repeat;
}

.ka-scope .ka-gate-mark i,
.ka-scope .ka-gate-mark b {
  position: absolute;
  border-radius: 50%;
}

.ka-scope .ka-gate-mark i {
  inset: 15px;
  border: 1px solid rgba(236, 99, 134, 0.5);
}

.ka-scope .ka-gate-mark b {
  inset: 28px;
  background: var(--ka-yellow);
}

.ka-scope .ka-gate h2 {
  margin: 6px 0 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -0.044em;
  line-height: 1.06;
}

.ka-scope .ka-gate > p:not(.ka-eyebrow) {
  max-width: 48ch;
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.8rem;
  line-height: 1.68;
}

.ka-scope .ka-gate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}

/* ==========================================================================
   17. Header auth buttons + account dropdown
   ========================================================================== */

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

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

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

   `:not(.is-account)` guards every rule that paints or sizes the sign-in
   button: once someone signs in, that element becomes the avatar pill styled in
   styles.css, which must keep its own fill and its 34px chip. */
.site-header .login-button:not(.is-account),
.site-header .signup-button {
  gap: 9px;
  min-height: 44px;
  padding: 11px 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  line-height: 1.15;
}

/* Signed in, the button takes the notch instead of the pill the signed-out pair
   wears: three corners rounded, the bottom-left one barely — the same
   12/12/12/4 the menu's "Đăng xuất" row carries, so the button and the row it
   opens share a silhouette. Border colour, fill and shadow stay as they were. */
.site-header .login-button.is-account {
  border-radius: var(--ka-notch);
}

/* primary — .ka-btn-primary as the gate now runs it: mint #45b9ae, white label,
   white icon. */
.site-header .login-button:not(.is-account) {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
}

/* outline — .ka-btn-outline: paper fill, teal hairline, teal-dark label */
.site-header .signup-button {
  border-color: rgba(11, 141, 130, 0.28);
  color: #076c63;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 40, 47, 0.06);
}

/* The gate carries its icons bare at 18px rather than in a chip, so both header
   icons drop the tinted square they used to sit in. `display` is deliberately
   left alone here: the ≤640px rules in styles.css hide both icons on small
   screens, and setting it would undo that. */
.site-header .login-button:not(.is-account) .button-icon,
.site-header .signup-button .signup-icon {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

/* KROMADE yellow, the colour .ka-btn-primary gives its icon — the sign-in button
   carries it in the header for the same reason it does in the gate. */
.site-header .login-button:not(.is-account) .button-icon {
  color: #f6c852;
}

.site-header .login-button:not(.is-account) .button-icon svg.ka-icon,
.site-header .signup-button .signup-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .site-header .login-button:not(.is-account):hover,
  .site-header .login-button:not(.is-account):focus-visible {
    border-color: transparent;
    color: #ffffff;
    background: #35a89d;
    box-shadow: 0 16px 32px rgba(53, 168, 157, 0.3);
    transform: translateY(-2px);
  }

  .site-header .signup-button:hover,
  .site-header .signup-button:focus-visible {
    border-color: rgba(11, 141, 130, 0.55);
    color: #076c63;
    background: #f2fbf9;
    box-shadow: 0 6px 16px rgba(16, 40, 47, 0.06);
    transform: translateY(-2px);
  }
}

/* Matches the shrink styles.css already applies to this pair below 1080px —
   restated because the rules above outrank it. */
@media (max-width: 1079.98px) {
  .site-header .login-button:not(.is-account),
  .site-header .signup-button {
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.72rem;
  }
}

/* Duoi 390px cum nut ben phai khong con du cho.

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

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

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

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

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

  .site-header .login-button:not(.is-account),
  .site-header .signup-button {
    gap: 4px;
    min-width: 0;
    padding: 6px 7px;
    font-size: 0.66rem;
  }
}

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

  .site-header .locale-switcher {
    transform: scale(0.92);
    transform-origin: right center;
  }
}


/* the header entry points now carry real icons instead of "ID" / "+" glyphs */
.site-header .button-icon svg.ka-icon,
.site-header .signup-icon svg.ka-icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header .button-icon {
  display: grid;
  place-items: center;
}

/* All three header chips take the notch one step below their buttons — 10/10/10/3
   inside 12/12/12/4 — so the header reads as one nested shape rather than three
   unrelated rounded squares. */
.site-header .button-icon,
.site-header .signup-icon {
  border-radius: var(--ka-notch-sm);
}

/* Signed-in avatar — a flat pale jade chip carrying a teal glyph, #06a189 on
   #dbf2ed, 3.5:1. KROMADE yellow was tried behind the same glyph and dropped: it
   drew the eye but held only 2.1:1, so the linework went soft.

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

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

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

   border-radius repeats the rule above on purpose: styles.css sets it again on
   `.login-button.is-account .button-icon` at (0,3,0), which outranks the shared
   `.site-header .button-icon` chip rule. */
.site-header .login-button.is-account .button-icon {
  border-radius: var(--ka-notch-sm);
  color: #06a189;
  background: #dbf2ed;
  box-shadow:
    0 7px 16px rgba(11, 141, 130, 0.16),
    inset 0 0 0 1px rgba(11, 141, 130, 0.22);
}

/* styles.css draws a green presence dot here as an ::after overhanging the
   bottom-right corner. Dropped: the avatar is only ever rendered when someone
   is signed in, so the dot restated what the avatar already said. */
.site-header .login-button.is-account .button-icon::after {
  display: none;
}

.site-header .login-button.is-account .button-icon svg.ka-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

/* Nút tài khoản co theo tên nhưng không vượt quá 150px. `min-width: 0` ghi đè
   min-content của header hẹp để phần tên có thể được cắt mà không kéo rộng cả
   cụm hành động. */
.site-header .auth-actions > .login-button.is-account {
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  max-width: 150px;
}

.site-header .login-button.is-account #loginLabel,
.site-header .login-button.is-account #checkoutAccountLabel {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/* Component account-menu chỉ gắn class này khi scrollWidth thực sự lớn hơn
   clientWidth. Vì vậy tên ngắn vẫn sắc nét trọn vẹn, còn phần cuối của tên dài
   tan dần vào nền thay cho ký hiệu ba chấm. */
.site-header .login-button.is-account #loginLabel.is-name-clipped,
.site-header .login-button.is-account #checkoutAccountLabel.is-name-clipped {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
}

/* Điện thoại nhỏ chỉ giữ avatar và chevron lên/xuống. Button đã có aria-label
   riêng cho thao tác mở menu nên việc ẩn tên trực quan không làm mất tên truy
   cập của điều khiển. */
@media (max-width: 480px) {
  .site-header .auth-actions > .login-button.is-account {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .site-header .login-button.is-account #loginLabel,
  .site-header .login-button.is-account #checkoutAccountLabel {
    display: none;
  }
}

/* auth modal: real icons in place of the "@", "✓" and "←" glyphs.
   The id anchor keeps these ahead of the page-level `.ka-icon` sizing rule. */
#loginModal .registration-verification-icon svg.ka-icon,
#loginModal .password-reset-confirmed svg.ka-icon,
#loginModal .password-reset-back svg.ka-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#loginModal .registration-verification-icon svg.ka-icon {
  width: 22px;
  height: 22px;
}

#loginModal .password-reset-confirmed svg.ka-icon {
  width: 15px;
  height: 15px;
}

#loginModal .password-reset-back {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

#loginModal .password-reset-back svg.ka-icon {
  width: 15px;
  height: 15px;
}

.ka-menu {
  width: min(304px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid var(--ka-line);
  border-radius: var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-lg) var(--ka-r-md);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-lg);
  animation: kaMenuIn 200ms var(--ka-ease) both;
}

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

/* The identity card that used to head this menu is gone. The name and email it
   showed are already one click away in the profile section, and the header
   button beside it carries the avatar, so the menu opens straight into what it
   is actually for — the links. */
.ka-menu .account-menu-links {
  display: grid;
  gap: 2px;
}

.ka-menu .account-menu-link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px 12px 12px 4px;
  color: var(--ka-ink);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}

.ka-menu .account-menu-link-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px 10px 10px 3px;
  color: var(--ka-teal);
  background: #eef7f6;
  transition:
    color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}

.ka-menu .account-menu-link-icon svg.ka-icon {
  width: 17px;
  height: 17px;
}

.ka-menu .account-menu-link > strong {
  min-width: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
  font-size: 0.65rem;
  font-weight: 900;
  text-align: center;
}

.ka-menu .account-menu-link-chevron {
  display: grid;
  place-items: center;
  color: var(--ka-muted-soft);
}

.ka-menu .account-menu-link-chevron svg.ka-icon {
  width: 16px;
  height: 16px;
}

.ka-menu .account-menu-link:hover,
.ka-menu .account-menu-link:focus-visible {
  background: var(--ka-paper-soft);
  outline: none;
}

.ka-menu .account-menu-link:focus-visible {
  box-shadow: var(--ka-focus);
}

.ka-menu .account-menu-link:hover .account-menu-link-icon,
.ka-menu .account-menu-link:focus-visible .account-menu-link-icon {
  color: #ffffff;
  background: var(--ka-teal);
}

.ka-menu .account-menu-logout {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ka-line);
  border-radius: 12px 12px 12px 4px;
  color: var(--ka-muted);
  background: var(--ka-paper);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    color var(--ka-fast) ease,
    border-color var(--ka-fast) ease,
    background var(--ka-fast) ease;
}

.ka-menu .account-menu-logout-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px 10px 10px 3px;
  color: inherit;
  background: var(--ka-paper-sunk);
}

.ka-menu .account-menu-logout-icon svg.ka-icon,
.ka-menu .account-menu-logout-arrow svg.ka-icon {
  width: 17px;
  height: 17px;
}

.ka-menu .account-menu-logout-copy strong {
  font-weight: 850;
}

.ka-menu .account-menu-logout-arrow {
  display: grid;
  place-items: center;
  color: var(--ka-muted-soft);
}

.ka-menu .account-menu-logout:hover,
.ka-menu .account-menu-logout:focus-visible {
  border-color: rgba(201, 56, 79, 0.3);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
  outline: none;
}

.ka-menu .account-menu-logout:focus-visible {
  box-shadow: var(--ka-focus);
}

.ka-menu .account-menu-logout:hover .account-menu-logout-icon,
.ka-menu .account-menu-logout:focus-visible .account-menu-logout-icon {
  color: var(--ka-danger);
  background: rgba(201, 56, 79, 0.1);
}

/* ==========================================================================
   18. Order delete confirm dialog (lives outside .ka-scope)
   ========================================================================== */

body[data-page="account"] .order-delete-modal {
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  box-shadow: var(--ka-shadow-lg);
}

/* The close button is left entirely to the site-wide .modal-close system in
   styles.css — same size, fill, X and hover as every other close on the site. */

body[data-page="account"] .order-delete-modal .order-delete-modal-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(201, 56, 79, 0.22);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}

body[data-page="account"] .order-delete-modal .order-delete-modal-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}

body[data-page="account"] .order-delete-modal-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
}

body[data-page="account"] .order-delete-modal-actions > button {
  min-height: 46px;
}

/* ==========================================================================
   18b. ConfirmDialog — shared destructive confirmation
   ========================================================================== */

body.ka-confirm-open {
  overflow: hidden;
}

.ka-confirm-backdrop {
  position: fixed;
  z-index: 2400;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(10, 28, 33, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: kaFade 180ms ease both;
}

@keyframes kaFade {
  from { opacity: 0; }
}

.ka-confirm {
  --ka-ink: #142d35;
  --ka-deep: #10282f;
  --ka-muted: #52686f;
  --ka-muted-soft: #5f767d;
  --ka-teal: #0b8d82;
  --ka-teal-dark: #076c63;
  --ka-yellow: #f6c852;
  --ka-paper: #ffffff;
  --ka-paper-sunk: #eff5f5;
  --ka-line: #e2ecec;
  --ka-danger: #c9384f;
  --ka-danger-soft: #fbeef0;
  --ka-cut: 6px;
  --ka-r-md: 14px;
  --ka-r-xl: 26px;
  --ka-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ka-fast: 140ms;
  --ka-base: 200ms;
  --ka-shadow-sm: 0 6px 16px rgba(16, 40, 47, 0.06);
  --ka-shadow-lg: 0 28px 62px rgba(16, 40, 47, 0.16);
  --ka-focus: 0 0 0 3px rgba(53, 185, 199, 0.42);

  position: relative;
  display: grid;
  gap: 9px;
  justify-items: center;
  width: min(430px, 100%);
  padding: 30px 26px 24px;
  border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
  color: var(--ka-ink);
  background: var(--ka-paper);
  box-shadow: var(--ka-shadow-lg);
  text-align: center;
  animation: kaModalIn 240ms var(--ka-ease) both;
}

/* Placement only. Everything visual — size, border, fill, the X itself and the
   hover — comes from the shared close-button system in styles.css, which this
   button opts into via .ka-close. Declaring any of it again here would either
   lose to that rule's (1,3,1) specificity or, worse, win in one property and
   quietly drift from the rest of the site's close buttons. */
.ka-confirm .ka-confirm-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.ka-confirm svg.ka-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ka-confirm .ka-confirm-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 5px;
  border: 1px solid rgba(201, 56, 79, 0.22);
  border-radius: var(--ka-r-md) var(--ka-r-md) var(--ka-r-md) var(--ka-cut);
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
}

.ka-confirm .ka-confirm-icon svg.ka-icon {
  width: 24px;
  height: 24px;
}

.ka-confirm .ka-eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  color: var(--ka-teal-dark);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ka-confirm .ka-eyebrow.is-danger {
  color: var(--ka-danger);
}

.ka-confirm .ka-eyebrow-rule {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.ka-confirm h2 {
  margin: 2px 0 0;
  color: var(--ka-ink);
  font-family: var(--font-brand);
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.14;
}

.ka-confirm > p:not(.ka-eyebrow) {
  max-width: 40ch;
  margin: 0;
  color: var(--ka-muted);
  font-size: 0.78rem;
  line-height: 1.62;
}

.ka-confirm .ka-confirm-note {
  margin-top: 4px;
  padding: 9px 14px;
  border: 1px dashed rgba(201, 56, 79, 0.3);
  border-radius: 999px;
  color: var(--ka-danger);
  background: var(--ka-danger-soft);
  font-size: 0.68rem;
  font-weight: 850;
}

.ka-confirm .ka-confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  width: 100%;
  margin-top: 15px;
}

.ka-confirm .ka-btn {
  position: relative;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.755rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    color var(--ka-base) var(--ka-ease),
    background var(--ka-base) var(--ka-ease),
    box-shadow var(--ka-base) var(--ka-ease),
    transform var(--ka-base) var(--ka-ease);
}

.ka-confirm .ka-btn-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.ka-confirm .ka-btn-icon svg.ka-icon {
  width: 18px;
  height: 18px;
}

.ka-confirm .ka-btn-ghost {
  color: var(--ka-muted);
  background: var(--ka-paper-sunk);
}

.ka-confirm .ka-btn-danger {
  color: #ffffff;
  background: var(--ka-danger);
  box-shadow: 0 12px 26px rgba(201, 56, 79, 0.22);
}

.ka-confirm .ka-btn-primary {
  color: #ffffff;
  background: var(--ka-deep);
  box-shadow: 0 12px 26px rgba(16, 40, 47, 0.22);
}

.ka-confirm .ka-btn-primary .ka-btn-icon {
  color: var(--ka-yellow);
}

@media (hover: hover) and (pointer: fine) {
  .ka-confirm .ka-btn:hover {
    transform: translateY(-2px);
  }

  .ka-confirm .ka-btn-ghost:hover {
    color: var(--ka-ink);
    background: #e2eded;
  }

  .ka-confirm .ka-btn-danger:hover {
    background: #b02c42;
  }

  .ka-confirm .ka-btn-primary:hover {
    background: var(--ka-teal);
  }
}

.ka-confirm .ka-btn:focus-visible {
  outline: none;
  box-shadow: var(--ka-focus);
}

@media (max-width: 460px) {
  .ka-confirm {
    padding: 26px 18px 20px;
  }

  .ka-confirm .ka-confirm-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .ka-confirm .ka-confirm-actions .ka-btn-ghost {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ka-confirm-backdrop,
  .ka-confirm,
  .ka-confirm * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .ka-confirm .ka-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */

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

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

  .ka-scope .ka-nav-item {
    min-height: 46px;
  }
}

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

  .ka-scope .ka-nav-trigger {
    display: grid;
  }

  /* sidebar becomes an anchored sheet */
  .ka-scope .ka-sidebar {
    position: fixed;
    z-index: 1600;
    top: calc(var(--header-h) + 10px);
    left: 50%;
    width: min(calc(100vw - 20px), 430px);
    max-height: calc(100svh - var(--header-h) - 26px);
    padding: 13px;
    overflow: auto;
    visibility: hidden;
    border: 1px solid var(--ka-line);
    border-radius: var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-xl) var(--ka-r-md);
    background: var(--ka-paper);
    box-shadow: var(--ka-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -10px) scale(0.98);
    transition:
      visibility 0s linear 240ms,
      opacity 180ms ease,
      transform 260ms var(--ka-ease);
  }

  .ka-scope .ka-sidebar.is-mobile-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
  }

  .ka-scope .ka-drawer {
    display: block;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .ka-scope .ka-drawer-inner {
    min-height: 0;
    overflow: visible;
  }

  .ka-scope .ka-drawer-head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 4px;
  }

  .ka-scope .ka-drawer-head-title {
    color: var(--ka-muted-soft);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .ka-scope .ka-nav {
    border: 0;
    padding: 0;
    box-shadow: none;
  }

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

  .ka-scope .ka-nav-item {
    min-height: 54px;
  }

  .ka-scope .ka-settings-grid,
  .ka-scope .ka-danger-zone {
    grid-template-columns: minmax(0, 1fr);
  }

  .ka-scope .account-email-preference-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  /* actions drop to a full-width row of their own — the title keeps the whole
     line so it stops competing with the count pill and the primary button */
  .ka-scope .ka-workspace-head {
    grid-template-areas:
      "eyebrow trigger"
      "title   title"
      "actions actions";
    gap: 10px 14px;
  }

  .ka-scope .ka-workspace-actions {
    justify-content: space-between;
  }

  .ka-scope .ka-workspace-actions .ka-search {
    flex: 1 1 220px;
  }
}

@media (max-width: 780px) {

  .ka-scope .account-address-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ka-scope .account-address-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ka-scope .order-detail-actions {
    align-items: stretch;
  }

  .ka-scope .order-detail-action-buttons {
    width: 100%;
  }

  .ka-scope .order-action-button {
    flex: 1 1 210px;
  }
}

@media (max-width: 640px) {
  .account-page {
    padding-top: 20px;
    padding-bottom: 72px;
  }

  .ka-scope .ka-panel,
  .ka-scope .ka-card,
  .ka-scope .ka-danger-zone,
  .ka-scope .account-orders-content,
  .ka-scope .account-order-detail-content {
    padding: 16px;
  }

  .ka-scope .ka-workspace-head {
    padding-right: 2px;
    padding-left: 2px;
  }

  .ka-scope .ka-workspace-actions {
    gap: 8px;
  }

  .ka-scope .order-list-row {
    grid-template-columns: 52px minmax(0, 1fr) 22px;
    gap: 11px;
  }

  .ka-scope .order-list-thumb {
    width: 52px;
    height: 52px;
  }

  .ka-scope .order-list-date {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .ka-scope .order-list-summary {
    grid-column: 2;
  }

  .ka-scope .order-list-chevron {
    grid-column: 3;
    grid-row: 1 / -1;
  }

  .ka-scope .ka-form-actions,
  .ka-scope .ka-form-actions.is-single,
  body[data-page="account"] .order-delete-modal-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .ka-scope .ka-form-actions .ka-btn:first-child {
    order: 2;
  }

  .ka-scope .ka-search {
    width: 100%;
    min-width: 0;
  }

  .ka-scope .ka-modal {
    padding: 18px;
  }

  .ka-scope .account-feedback-product-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* every tap target stays comfortable */
  .ka-scope .ka-icon-btn,
  .ka-scope .ka-nav-trigger {
    width: 44px;
    height: 44px;
  }

  .ka-scope .ka-segmented button {
    width: 40px;
    height: 38px;
  }
}

@media (max-width: 420px) {
  .ka-scope .ka-workspace-actions .ka-btn {
    flex: 1 1 100%;
  }

  /* Phần Địa chỉ giao hàng là ngoại lệ: nút và dòng đếm ở cùng một hàng, nút chỉ
     rộng bằng nội dung của nó.

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

     `flex: 0 1 auto` chứ không phải `0 0 auto`: ở khổ hẹp nhất, nút vẫn phải co
     được thì mới đứng cùng hàng, còn khi đủ chỗ thì nó giữ đúng bề rộng nội
     dung. `nowrap` để chốt hẳn việc cùng hàng, `min-width: 0` cho phép co. */
  .ka-scope .account-address-workspace-heading .ka-workspace-actions {
    flex-wrap: nowrap;
  }

  .ka-scope .account-address-workspace-heading .ka-workspace-actions .ka-btn {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* three 44px squares plus two gaps is 148px — it fits the narrowest card
     without help, so the old two-column grid fallback is gone */
}

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

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

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

/* ==========================================================================
   20. Motion preferences
   ========================================================================== */

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

  .ka-scope .ka-btn:not(:disabled):hover,
  .ka-scope .ka-nav-item:hover,
  .ka-scope .order-list-row:hover,
  .ka-scope .order-action-button:not(:disabled):hover,
  .ka-scope .ka-address-card:hover,
  .ka-scope .account-feedback-product:hover {
    transform: none;
  }
}

/* ==========================================================================
   20. Auth modal — mode tabs + submit buttons
   --------------------------------------------------------------------------
   The sign-in / sign-up modal is the third place the same two actions appear,
   after the header and the account gate, so it now runs the same recipe: mint
   #45b9ae for the committing action, paper-and-hairline for everything beside
   it, pills throughout.

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

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

/* --- the track ---------------------------------------------------------- */
.login-modal > .auth-tabs {
  gap: 6px;
  padding: 5px;
  border-color: rgba(11, 141, 130, 0.16);
  border-radius: 999px;
  background: #f2faf8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.login-modal > .auth-tabs button {
  min-height: 42px;
  border-radius: 999px;
  color: #52686f;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
}

/* Hairline grey outline on the type itself — the tabs and the submit button
   below share it, so the two controls read as one set. Kept at 0.4px: the
   stroke is centred on the glyph edge, so anything heavier eats into letters
   this small and the labels start to look furred rather than outlined. */
.login-modal > .auth-tabs button,
.login-modal .primary-button.full,
.login-modal .auth-submit-copy strong {
  -webkit-text-stroke: 0.4px rgba(20, 45, 53, 0.34);
  paint-order: stroke fill;
}

/* Resting tabs lift onto white on hover — the same paper-and-hairline move the
   header's "Đăng ký" makes, minus the border, which would jitter the row. */
.login-modal > .auth-tabs button:hover:not(.is-active),
.login-modal > .auth-tabs button:focus-visible:not(.is-active) {
  color: #076c63;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 40, 47, 0.06);
  outline: none;
}

/* One active look for both sides. The register selectors are listed explicitly
   because styles.css targets that tab through an attribute — (0,4,1) — and
   would otherwise keep its amber gradient. */
.login-modal > .auth-tabs button.is-active,
.login-modal > .auth-tabs button[data-mode="register"].is-active,
.login-modal > .auth-tabs button[data-checkout-auth-mode="register"].is-active {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 10px 20px rgba(53, 168, 157, 0.26);
  transform: none;
}

/* --- the submit ---------------------------------------------------------
   "Đăng nhập" / "Tạo tài khoản" and the password-reset steps behind them all
   land on .primary-button.full inside this dialog, so they share one CTA: the
   header's mint pill at full width, one size up because it is the only thing
   the eye should land on after the fields. */
.login-modal .primary-button.full {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  transition:
    color 180ms var(--ka-ease, ease),
    background 180ms var(--ka-ease, ease),
    box-shadow 180ms var(--ka-ease, ease),
    transform 180ms var(--ka-ease, ease);
}

/* A chevron drawn from two borders, the same way the header account button
   draws its caret — no icon markup to add to nine copies of this dialog. It
   nudges forward on hover so the button reads as "continue", not just "submit". */
.login-modal .primary-button.full::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  margin-left: 1px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms var(--ka-ease, ease);
}

.login-modal .text-button.full {
  min-height: 42px;
  border-radius: 999px;
  color: #076c63;
  font-size: 0.73rem;
  font-weight: 800;
  transition:
    color 160ms ease,
    background 160ms ease;
}

/* --- checkout's expanded submit ----------------------------------------
   The checkout dialog swaps the plain CTA for a taller button carrying an icon
   chip, a subtitle and a status dot. Its structure is left alone; only the
   colours move onto the mint, so the two dialogs no longer disagree — sign-in
   was a three-stop teal gradient, sign-up an amber-to-coral one. */
.login-modal .auth-login-submit,
.login-modal .auth-register-submit {
  border-color: transparent;
  border-radius: 999px;
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 14px 29px rgba(53, 168, 157, 0.26);
}

/* The glyph runs in KROMADE yellow, the same colour the header's sign-in icon
   carries — the two buttons are the same action, so they light the same way. */
.login-modal .auth-login-submit .auth-submit-icon,
.login-modal .auth-register-submit .auth-submit-icon {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #f6c852;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.login-modal .auth-login-submit .auth-submit-copy small,
.login-modal .auth-register-submit .auth-submit-copy small {
  color: rgba(255, 255, 255, 0.78);
}

/* The status dot keeps its job as the one warm accent on the button — KROMADE
   yellow, the same yellow the sign-in icon carries in the header. */
.login-modal .auth-login-submit .auth-submit-status,
.login-modal .auth-register-submit .auth-submit-status {
  border-color: rgba(255, 255, 255, 0.62);
  background: #f6c852;
  box-shadow:
    0 0 0 4px rgba(246, 200, 82, 0.16),
    0 0 14px rgba(246, 200, 82, 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .login-modal .primary-button.full:hover:not(:disabled),
  .login-modal .primary-button.full:focus-visible {
    color: #ffffff;
    background: #35a89d;
    box-shadow: 0 16px 32px rgba(53, 168, 157, 0.3);
    transform: translateY(-2px);
  }

  .login-modal .primary-button.full:hover:not(:disabled)::after {
    transform: translateX(3px) rotate(45deg);
  }

  .login-modal .text-button.full:hover,
  .login-modal .text-button.full:focus-visible {
    color: #0b8d82;
    background: #f2fbf9;
    outline: none;
  }

  .login-modal .auth-login-submit:hover:not(:disabled),
  .login-modal .auth-login-submit:focus-visible,
  .login-modal .auth-register-submit:hover:not(:disabled),
  .login-modal .auth-register-submit:focus-visible {
    border-color: transparent;
    background: #35a89d;
    box-shadow: 0 18px 35px rgba(53, 168, 157, 0.3);
    outline: none;
    transform: translateY(-2px);
  }
}

.login-modal .primary-button.full:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.login-modal .primary-button.full:disabled,
.login-modal .primary-button.full:disabled:hover {
  background: #45b9ae;
  box-shadow: none;
  transform: none;
}

@media (max-width: 640px) {
  .login-modal > .auth-tabs button {
    min-height: 40px;
    font-size: 0.72rem;
  }

  .login-modal .primary-button.full {
    min-height: 47px;
    font-size: 0.77rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-modal .primary-button.full,
  .login-modal .primary-button.full::after,
  .login-modal .auth-login-submit,
  .login-modal .auth-register-submit {
    transition: none;
  }
}

/* ==========================================================================
   21. Quality warning — opens inside the crop panel
   --------------------------------------------------------------------------
   The warning that stops an order when the chosen photo is too small for the
   print size. It used to be a plain white box with two grey buttons and a solid
   red "ignore" bar — the red read as an error the customer had caused, when the
   message is really a caution about a choice they are still free to make.

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

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

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

.preview-panel {
  position: relative;
}

.preview-panel > *:not(.quality-inline) {
  transition:
    opacity 200ms var(--ka-ease, ease),
    transform 200ms var(--ka-ease, ease),
    visibility 0s linear 200ms;
}

.preview-panel.has-quality-warning > *:not(.quality-inline) {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
  transition:
    opacity 160ms var(--ka-ease, ease),
    transform 160ms var(--ka-ease, ease),
    visibility 0s;
}

.quality-inline {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 22px);
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition:
    opacity 220ms var(--ka-ease, ease),
    visibility 0s linear 220ms;
}

.preview-panel.has-quality-warning > .quality-inline {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 220ms var(--ka-ease, ease),
    visibility 0s;
}

/* The card arrives a beat after the wash, rising a few pixels as it lands —
   enough to read as "this opened", not enough to bounce. */
.quality-inline .quality-card {
  transform: translateY(12px) scale(0.97);
  opacity: 0;
  transition:
    opacity 240ms var(--ka-ease, ease) 40ms,
    transform 240ms var(--ka-ease, ease) 40ms;
}

.preview-panel.has-quality-warning .quality-card {
  transform: none;
  opacity: 1;
}

/* No transition means no delayed visibility either — the swap has to be a plain
   cut, or the panel's contents would stay hidden after the warning closes. */
@media (prefers-reduced-motion: reduce) {
  .preview-panel > *:not(.quality-inline),
  .preview-panel.has-quality-warning > *:not(.quality-inline),
  .quality-inline,
  .preview-panel.has-quality-warning > .quality-inline,
  .quality-inline .quality-card,
  .preview-panel.has-quality-warning .quality-card {
    transition: none;
  }
}

.quality-card {
  gap: 16px;
  width: min(460px, 100%);
  padding: 26px 24px 24px;
  border: 1px solid rgba(175, 217, 213, 0.72);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
    0 24px 60px rgba(15, 64, 70, 0.18),
    0 8px 20px rgba(21, 81, 84, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.quality-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 34px;
}

/* Yellow at 12% behind an ink glyph: the fill carries the caution, the glyph
   stays readable (10.6:1) instead of relying on colour alone. */
.quality-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(232, 178, 52, 0.42);
  border-radius: var(--ka-notch-lg);
  color: #7a5a12;
  background: rgba(246, 200, 82, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.quality-mark svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quality-card .eyebrow {
  margin: 0 0 3px;
  color: #a07514;
  font-size: 0.64rem;
  letter-spacing: 0.095em;
}

.quality-card h2 {
  margin: 0;
  color: #17262e;
  font-family: var(--font-brand);
  font-size: clamp(1.3rem, 3vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

.quality-card > p {
  margin: 0;
  color: #52686f;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.62;
}

/* Three measurements as a spec sheet: hairline-separated rows, label above the
   figure, so the reader can compare the estimate against the recommendation
   without parsing a sentence. */
.quality-stats {
  gap: 0;
  padding: 4px 14px;
  border-color: #e2ecec;
  border-radius: var(--ka-notch);
  background: #f7fbfa;
}

.quality-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 0;
}

.quality-stats span + span {
  border-top: 1px solid rgba(226, 236, 236, 0.9);
}

.quality-stats small {
  color: #6d838a;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.quality-stats strong {
  color: #142d35;
  font-size: 0.85rem;
  font-weight: 850;
}

/* The recommendation rides along with the estimate it is judging */
.quality-stats strong b {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #7a5a12;
  background: rgba(246, 200, 82, 0.2);
  font-size: 0.66rem;
  font-weight: 850;
  white-space: nowrap;
}

.quality-actions {
  gap: 9px;
  margin-top: 2px;
}

.quality-action {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.755rem;
  font-weight: 850;
  letter-spacing: 0.012em;
  line-height: 1.15;
  cursor: pointer;
  transition:
    color 180ms var(--ka-ease, ease),
    border-color 180ms var(--ka-ease, ease),
    background 180ms var(--ka-ease, ease),
    box-shadow 180ms var(--ka-ease, ease),
    transform 180ms var(--ka-ease, ease);
}

.quality-action-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}

.quality-action-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* replacing the photo is the way out of this dialog, so it wears the mint */
.quality-action-primary {
  color: #ffffff;
  background: #45b9ae;
  box-shadow: 0 12px 26px rgba(53, 168, 157, 0.26);
}

.quality-action-primary .quality-action-icon {
  color: #f6c852;
}

/* Tonal rather than solid red — the same recipe .ka-btn-cancel uses. With the
   box down to two choices it sits beside the upload button rather than under
   it: the pair is "give me a better file" against "print this one anyway", and
   two answers to one question belong on one line. */
.quality-action-ignore {
  min-height: 46px;
  border-color: rgba(201, 56, 79, 0.24);
  color: #c9384f;
  background: rgba(201, 56, 79, 0.07);
  font-size: 0.72rem;
}

@media (hover: hover) and (pointer: fine) {
  .quality-action-primary:hover,
  .quality-action-primary:focus-visible {
    background: #35a89d;
    box-shadow: 0 16px 32px rgba(53, 168, 157, 0.3);
    outline: none;
    transform: translateY(-2px);
  }

  .quality-action-ignore:hover,
  .quality-action-ignore:focus-visible {
    border-color: rgba(201, 56, 79, 0.4);
    color: #ffffff;
    background: #c9384f;
    outline: none;
  }
}

.quality-action:active {
  transform: translateY(0) scale(0.985);
}

@media (max-width: 560px) {
  .quality-card {
    padding: 22px 18px 20px;
  }

  .quality-card-head {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .quality-mark {
    width: 46px;
    height: 46px;
  }

  /* Hai nút vẫn giữ một hàng ở khổ điện thoại — chúng là hai câu trả lời cho
     cùng một câu hỏi. Chỗ bù lại lấy từ đệm hai bên và từ khe giữa icon với
     chữ, chứ không xếp chồng. */
  .quality-actions {
    gap: 7px;
  }

  .quality-action {
    gap: 6px;
    padding-inline: 10px;
    font-size: 0.7rem;
  }

  .quality-action-ignore {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quality-action {
    transition: none;
  }
}

/* ==========================================================================
   22. Crop panel status line
   --------------------------------------------------------------------------
   With the panel title gone, the eyebrow and the status pill are the whole
   head of the crop panel — one strip, read left to right: what this panel is,
   and where the order stands in it.

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

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

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

.preview-panel .panel-heading.row {
  gap: 10px;
}

.preview-panel .panel-heading.row > .eyebrow,
.preview-panel .panel-heading.row > .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
}

.preview-panel .panel-heading.row > .eyebrow {
  color: #076c63;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.075em;
}

.preview-panel .panel-heading.row > .status-pill {
  gap: 8px;
  padding: 5px 14px 5px 12px;
  border: 0;
  border-radius: 999px;
  color: #ad4230;
  background: linear-gradient(180deg, #ffffff, #ffeee9);
  /* Three layers doing what the border used to: a hairline of contact shadow
     to seat the chip on the panel, a wide tinted drop that carries the state's
     colour into the surface below, and a lit top edge so it reads as a raised
     lozenge rather than a flat tag. */
  box-shadow:
    0 1px 2px rgba(173, 66, 48, 0.14),
    0 8px 18px -6px rgba(239, 100, 97, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    color 200ms var(--ka-ease, ease),
    border-color 200ms var(--ka-ease, ease),
    background 200ms var(--ka-ease, ease),
    box-shadow 200ms var(--ka-ease, ease);
}

.preview-panel .panel-heading.row > .status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #ef6461;
  box-shadow: 0 0 0 3px rgba(239, 100, 97, 0.22);
  transition:
    background 200ms var(--ka-ease, ease),
    box-shadow 200ms var(--ka-ease, ease);
}

.preview-panel .panel-heading.row > .status-pill.is-ready {
  color: #ffffff;
  background: linear-gradient(180deg, #4cc3b7, #3faea4);
  box-shadow:
    0 1px 2px rgba(11, 111, 102, 0.22),
    0 10px 22px -7px rgba(53, 168, 157, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.preview-panel .panel-heading.row > .status-pill.is-ready::before {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.34);
}

@media (max-width: 560px) {
  .preview-panel .panel-heading.row > .status-pill {
    padding-inline: 10px 11px;
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-panel .panel-heading.row > .status-pill,
  .preview-panel .panel-heading.row > .status-pill::before {
    transition: none;
  }
}

/* Below 640px styles.css turns every .panel-heading.row into a column, which is
   what pushed the status pill onto a second line. The crop panel opts out and
   stays a row.

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

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

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

  .preview-panel .panel-heading.row > .status-pill::before {
    width: 6px;
    height: 6px;
  }
}

/* ==========================================================================
   23. Artwork step — the two source buttons
   --------------------------------------------------------------------------
   "Tải ảnh lên" and "Mở Tìm ảnh" were laid out as two equal grid columns, so
   each was stretched to half the row whatever its label needed, and below 640px
   they were stacked full-width. They are two buttons, not two panels: each now
   takes the width of its own content and the pair stays on one line at every
   size. The sample strip keeps its own line by being given a full-width basis,
   so it wraps under them rather than joining the row.

   Each button may still shrink if the row runs out of room. Its label is
   allowed to wrap and make the shared grid row taller, so both buttons stay
   side by side without hiding any part of their text. */
/* Two auto columns rather than a flex row: a grid track never wraps, so the
   pair cannot drop onto separate lines however narrow the panel gets. The min
   of 0 is what lets a track shrink past its own text — without it the tracks
   hold at min-content and overflow instead. justify-content keeps the pair
   packed to the left at full width, so each button is exactly as wide as its
   label rather than half the row. */
.source-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  justify-content: start;
  gap: 10px;
  align-items: stretch;
}

.source-row > .upload-zone {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  min-width: 0;
}

.source-row > .sample-more-link {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
}

/* The direct child is .sample-suggestions; .sample-strip lives one level inside
   it. This selector used to name .sample-strip, so it matched nothing and the
   suggestion strip lost the rule that spans it across the whole row. */
.source-row > .sample-suggestions {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}

/* Keep the complete upload label visible. Narrow translations wrap and make
   the shared row taller instead of being shortened with an ellipsis. */
.source-row > .upload-zone > span:last-child {
  min-width: 0;
}

.source-row > .upload-zone strong,
.source-row > .upload-zone small {
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  text-overflow: clip;
}

@media (max-width: 640px) {
  .source-row > .upload-zone,
  .source-row > .sample-more-link {
    width: auto;
  }

  /* Content-sized tracks plus justify-content: start keep each button as wide
     as its own label while there is room to spare. Below 640px that reads the
     other way round: room is scarce, the leftover strip on the right does no
     work, and the suggestion row — which spans both tracks — ends up only as
     wide as their sum rather than as wide as the panel.

     Handing the leftover to the first track fills the row, and the suggestion
     strip spans the panel's full width along with it. */
  .source-row {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
  }
}

/* --------------------------------------------------------------------------
   …and they scale rather than truncate.

   The row is declared a size container so the two buttons can measure
   themselves against the panel they sit in — the viewport is no help here,
   since this column is narrow at 1200px and wide at 900px depending on which
   layout is in play. Every metric that decides how much room the labels need —
   type, icon, padding, gap, height — rides on cqi (1cqi = 1% of the row's
   width) between a floor and the size it has at full width.

   Labels can wrap when this scaling reaches its floor; the grid row then grows
   to the content instead of clipping words.
   -------------------------------------------------------------------------- */
.source-row {
  container-type: inline-size;
  container-name: source-row;
}

.source-row > .upload-zone,
.source-row > .sample-more-link {
  min-height: clamp(34px, 15cqi, 58px);
  gap: clamp(3px, 2.6cqi, 9px);
  padding: clamp(4px, 2.4cqi, 9px) clamp(5px, 3cqi, 11px);
}

.source-row > .upload-zone {
  grid-template-columns: clamp(15px, 8.5cqi, 30px) minmax(0, 1fr);
}

.source-row > .sample-more-link {
  grid-template-columns: clamp(17px, 10cqi, 36px) minmax(0, 1fr);
}

.source-row .upload-icon {
  width: clamp(15px, 8.5cqi, 30px);
  height: clamp(15px, 8.5cqi, 30px);
}

.source-row .upload-icon svg {
  width: clamp(9px, 5.4cqi, 18px);
  height: clamp(9px, 5.4cqi, 18px);
}

.source-row .sample-more-link-icon {
  width: clamp(17px, 10cqi, 36px);
  height: clamp(17px, 10cqi, 36px);
  border-radius: clamp(5px, 3.4cqi, 12px);
}

.source-row .sample-more-link-icon svg {
  width: clamp(10px, 6cqi, 21px);
  height: clamp(10px, 6cqi, 21px);
}

/* Nhãn chính to hơn, chú thích định dạng nhỏ lại: dòng "PNG, JPG, WEBP" chỉ là
   thông tin phụ nên không tăng theo nhãn, hệ số cqi của nó cũng thấp hơn để khi
   khung hẹp lại nó thu nhanh hơn, nhường chỗ cho tên nút. */
.source-row > .upload-zone strong {
  font-size: clamp(0.58rem, 4.8cqi, 1.24rem);
}

.source-row > .upload-zone small {
  font-size: clamp(0.4rem, 2.5cqi, 0.58rem);
}

.source-row .sample-more-link-copy strong {
  font-size: clamp(0.52rem, 3.7cqi, 0.96rem);
}

.source-row .sample-more-link-arrow {
  width: clamp(9px, 4.6cqi, 18px);
  height: clamp(9px, 4.6cqi, 18px);
}

/* --------------------------------------------------------------------------
   Khe hở hai bên trên màn hình điện thoại — phần thuộc về file này.

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

/* Mức đánh giá chất lượng in trong hộp cảnh báo.

   Ba dòng số bên dưới nói bao nhiêu điểm ảnh trên mỗi centimet; dòng này nói
   con số đó nghĩa là gì. Nó đứng đầu bảng và mang màu riêng theo mức, vì đó là
   thứ khách đọc trước rồi mới xuống phần giải thích. */
.quality-level-row {
  border-bottom: 1px solid #e6efee;
}

.quality-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 3px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.quality-level-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Xuất sắc và Tốt cùng là màu xanh vì cùng là "in được"; mức trên đậm hơn để
   hai bậc vẫn phân biệt được khi đứng cạnh nhau. */
.quality-level-row.is-excellent .quality-level-badge {
  border-color: rgba(11, 110, 82, 0.34);
  color: #0b6e52;
  background: rgba(28, 176, 132, 0.18);
}

.quality-level-row.is-good .quality-level-badge {
  border-color: rgba(19, 141, 106, 0.26);
  color: #17805f;
  background: rgba(28, 176, 132, 0.1);
}

.quality-level-row.is-medium .quality-level-badge {
  border-color: rgba(184, 134, 11, 0.3);
  color: #8a6410;
  background: rgba(246, 200, 82, 0.2);
}

.quality-level-row.is-low .quality-level-badge {
  border-color: rgba(201, 56, 79, 0.28);
  color: #b8324a;
  background: rgba(201, 56, 79, 0.1);
}

/* Ô mã bưu điện Nhật trong form địa chỉ.

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

/* Ô mã bưu điện rộng đúng bằng mã dài nhất của nước đang chọn, không kéo hết
   hàng. Số ký tự do trình dựng truyền vào qua --postal-chars vì mỗi nước một
   độ dài: Hàn 5, Canada 7, Nhật 8.

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

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

   Hai bộ chọn cho hai trang. Trong khu tài khoản phải neo vào
   #accountPageContent vì quy tắc ô nhập chung ở đó cũng neo vào id, chọn bằng
   class thường sẽ thua cascade — đúng lý do đã ghi ở đầu nhóm quy tắc kia.
   Trang thanh toán không có id đó và cũng không có quy tắc id nào cạnh tranh,
   nên chọn theo class là đủ. */
#accountPageContent .account-address-postal-row input.account-address-input,
.checkout-address-fields .account-address-postal-row input.account-address-input {
  flex: 0 0 auto;
  width: calc(var(--postal-chars, 8) * 1.4ch + 34px);
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Nút tìm địa chỉ đi kèm ô nhập nên lấy đúng hình dáng của ô: cùng chiều cao,
   cùng bán kính bo. Trước đây nó là viên thuốc 999px đặt cạnh một ô bo 13px,
   nhìn như hai thứ rời nhau.

   Nhẹ hơn nút thường một bậc: nền là một lớp phủ lam nhạt thay vì trắng, viền
   mảnh, bỏ đổ bóng. Nó là nút phụ trợ cho một ô nhập, không phải nút hành động
   chính của form — nặng bằng nút "Thêm địa chỉ" là sai thứ bậc. */
.ka-scope .account-address-postal-button,
body[data-page="account"] .account-address-postal-button {
  flex: 0 0 auto;
  gap: 7px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(11, 141, 130, 0.22);
  border-radius: 13px;
  color: var(--ka-teal-dark);
  background: linear-gradient(180deg, #f5fcfa, #e9f7f3);
  box-shadow: none;
  font-size: 0.71rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ka-scope .account-address-postal-button .ka-btn-icon {
  width: 15px;
  height: 15px;
  opacity: 0.75;
}

.ka-scope .account-address-postal-button .ka-btn-icon svg {
  width: 15px;
  height: 15px;
}

@media (hover: hover) {
  .ka-scope .account-address-postal-button:not(:disabled):hover,
  body[data-page="account"] .account-address-postal-button:not(:disabled):hover {
    border-color: rgba(11, 141, 130, 0.42);
    background: linear-gradient(180deg, #eefaf6, #ddf2ec);
  }

  .ka-scope .account-address-postal-button:not(:disabled):hover .ka-btn-icon {
    opacity: 1;
  }
}

.ka-scope .account-address-postal-button:not(:disabled):active {
  transform: translateY(1px);
}

.ka-scope .account-address-postal-note {
  display: block;
  margin-top: 6px;
  color: var(--ka-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.ka-scope .account-address-postal-note.is-ok {
  color: #12795c;
  font-weight: 800;
}

.ka-scope .account-address-postal-note.is-error {
  color: #b8324a;
  font-weight: 800;
}

/* Trước đây khổ hẹp phải xếp ô nhập và nút thành hai hàng vì ô nhập kéo hết
   chiều ngang. Nay ô chỉ rộng bằng đúng mã nên cả hai nằm vừa một hàng kể cả ở
   320px, không cần tách nữa. */

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

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