/* Hallmark · macrostructure: Centered Poster Form · tone: luxury heritage · anchor hue: gold 80°
 * theme: studied-DNA (source: user mockup image) · paper oklch(95.4% 0.027 85.7) · accent oklch(50.8% 0.185 28.9)
 * display: Cormorant SC 700 · script: Dancing Script 600 · body: Be Vietnam Pro · nav: none · footer: none
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · contrast: pass (40-41) · mobile: pass (34, 49, 50-57)
 * Lệch luật có chủ đích theo mockup của khách: gate 2 (tiêu đề chữ vàng gradient), gate 6 (bố cục căn giữa)
 * Một theme duy nhất (cảnh tối + thẻ giấy dó) theo đúng mockup, không đảo màu theo dark mode.
 */

/* ---------- Nền tảng ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  background: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

svg {
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.stop-gold-100 { stop-color: var(--color-gold-100); }
.stop-gold-300 { stop-color: var(--color-gold-300); }
.stop-gold-500 { stop-color: var(--color-gold-500); }
.stop-gold-700 { stop-color: var(--color-gold-700); }

.orn-fill {
  fill: url(#g-gold);
}

.orn-line {
  fill: none;
  stroke: var(--color-gold-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Cảnh nền cửa hàng ---------- */
/* Lớp fixed riêng thay cho background-attachment: fixed (iOS không hỗ trợ). 100lvh để ảnh không giật khi thanh địa chỉ co lại.
 * bg-store.webp 16:9: neo đáy để mặt bàn và hai linh vật luôn trong khung; màn dọc thấy phần giữa (lư hương). */
.scene {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background: var(--color-ink) url("../img/bg-store.webp?v=3") 50% 100% / cover no-repeat;
  pointer-events: none;
}

/* Chỉ phủ tối phía trên (thêm một quầng tối ngay sau tiêu đề) cho chữ vàng nổi trên kệ;
 * không phủ hai góc dưới để linh vật giữ nguyên màu */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34rem 15rem at 50% 24%, var(--color-ink-a55), transparent),
    linear-gradient(to bottom, var(--color-ink-a80) 0%, var(--color-ink-a55) 22%, var(--color-ink-a20) 50%, transparent 70%);
}

/* ---------- Bố cục trang ---------- */
.page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  min-height: 100dvh;
  /* Đệm dưới tối thiểu 1rem: huy hiệu hoa sen ở đáy thẻ nhô ra ngoài khoảng 12px, nếu thiếu chỗ sẽ sinh thanh cuộn */
  padding:
    max(var(--v-pad), env(safe-area-inset-top))
    max(var(--space-sm), env(safe-area-inset-right))
    max(var(--v-pad), var(--space-sm), env(safe-area-inset-bottom))
    max(var(--space-sm), env(safe-area-inset-left));
}

/* ---------- Thương hiệu ---------- */
.brand {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 44rem;
  text-align: center;
}

.brand__emblem {
  width: var(--emblem-w);
  height: auto;
  overflow: visible;
}

.emblem__disc {
  fill: var(--color-ink);
  stroke: url(#g-gold);
  stroke-width: 3;
}

.emblem__ring {
  fill: none;
  stroke: var(--color-gold-700);
  stroke-width: 1;
}

.brand__title {
  display: grid;
  min-width: 0;
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  overflow-wrap: anywhere;
}

/* background-clip: text chỉ tô trong hộp của phần tử, nên chừa padding cho dấu tiếng Việt chồng (Ấ, Ệ) */
.brand__line {
  display: block;
  padding-block: 0.14em 0.04em;
  line-height: 1.05;
  color: var(--color-gold-300);
  background: linear-gradient(
    180deg,
    var(--color-gold-100) 18%,
    var(--color-gold-300) 42%,
    var(--color-gold-700) 66%,
    var(--color-gold-300) 86%,
    var(--color-gold-100) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 var(--color-gold-900)) drop-shadow(0 8px 14px var(--color-shadow));
}

.brand__line--1 {
  font-size: var(--text-title);
  letter-spacing: 0.01em;
}

.brand__line--2 {
  margin-top: -0.12em;
  font-size: var(--text-title-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brand__tagline {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: var(--text-tagline);
  line-height: 1.3;
  color: var(--color-gold-300);
  text-shadow: 0 2px 10px var(--color-shadow);
  text-wrap: balance;
}

/* Chỉ xuống dòng ở dấu gạch nối giữa các cụm, không cắt giữa "Vượng tài lộc" */
.brand__tagline span {
  white-space: nowrap;
}

/* ---------- Thẻ form ---------- */
/* Cách slogan tối thiểu 1.25rem: huy hiệu trên đỉnh thẻ nhô lên khoảng chừng đó */
.card {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-top: max(var(--v-pad), 1rem);
}

/* Bóng đổ tách lớp riêng: đặt filter lên cả thẻ sẽ bắt trình duyệt vẽ lại mỗi lần con trỏ nhấp nháy khi gõ */
.card::before {
  content: "";
  position: absolute;
  inset: var(--space-2xs);
  border-radius: var(--radius-field);
  box-shadow: 0 28px 60px var(--color-shadow), 0 6px 16px var(--color-shadow);
}

/* Khoét bốn góc lõm khớp với frame.svg */
.card__panel {
  --mask-corner: transparent var(--radius-notch), var(--color-ink) calc(var(--radius-notch) + 0.5px); /* mask chỉ dùng độ đục */
  position: relative;
  background: radial-gradient(130% 80% at 50% 28%, var(--color-paper-50) 0%, var(--color-paper-100) 52%, var(--color-paper-200) 100%);
  -webkit-mask:
    radial-gradient(circle at 0 0, var(--mask-corner)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, var(--mask-corner)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, var(--mask-corner)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, var(--mask-corner)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, var(--mask-corner)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, var(--mask-corner)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, var(--mask-corner)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, var(--mask-corner)) bottom right / 51% 51% no-repeat;
}

.card__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--frame-width) solid transparent;
  border-image: url("../img/frame.svg?v=2") 16 stretch;
  pointer-events: none;
}

.card__medallion {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 4.5rem;
  transform: translate(-50%, -48%);
}

.card__medallion--bottom {
  top: auto;
  bottom: 0;
  width: 3.75rem;
  transform: translate(-50%, 48%);
}

.medallion__body {
  fill: var(--color-jade-700);
  stroke: url(#g-gold);
  stroke-width: 2;
}

.card__cloud {
  position: absolute;
  z-index: 3;
  display: none;
  width: 5.5rem;
  color: var(--color-gold-500);
  filter: drop-shadow(0 2px 3px var(--color-shadow));
}

.card__cloud--start {
  top: 34%;
  left: -3.25rem;
}

.card__cloud--end {
  top: 21%;
  right: -3.25rem;
  transform: scaleX(-1);
}

/* ---------- Form ---------- */
.form {
  padding:
    calc(var(--frame-width) + var(--v-form-top))
    calc(var(--frame-width) + var(--space-2xs))
    var(--v-pad);
}

.form__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v-field-gap);
}

.form[aria-busy="true"] .form__fields {
  opacity: 0.7;
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field__box {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon control";
  align-items: center;
  column-gap: var(--space-xs);
  padding: var(--v-field-pad) var(--space-sm);
  background: var(--color-paper-50-a85);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius-field);
  box-shadow: inset 0 1px 2px var(--color-gold-900-a12);
  cursor: text;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* Mũi tên nằm đè lên phần đệm phải của nút chọn để chữ có thêm chỗ trên màn hình hẹp */
.field__box--select {
  grid-template-columns: 1.375rem minmax(0, 1fr) 1.125rem;
  grid-template-areas:
    "icon label label"
    "icon control control";
  cursor: pointer;
}

.field__icon {
  grid-area: icon;
  width: 1.375rem;
  height: 1.375rem;
  fill: var(--color-icon);
}

.field__label {
  grid-area: label;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  cursor: inherit;
}

.field__req {
  color: var(--color-danger);
}

.field__control {
  grid-area: control;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.125rem 0 0;
  font-size: var(--text-base); /* 16px: iOS không tự zoom khi chạm vào ô nhập */
  line-height: 1.45;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
}

.field__control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Cao cố định, không cho kéo giãn (kéo to sẽ đẩy trang ra ngoài một màn hình); chữ dài thì cuộn bên trong */
textarea.field__control {
  height: var(--v-area-h);
  resize: none;
}

/* Chrome tô nền xanh khi tự điền: phủ lại bằng màu giấy */
.field__control:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 0 0 100px var(--color-paper-50) inset;
}

.field__caret {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--color-icon);
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Nút mở danh sách: chữ một dòng, dài thì cắt "…"; chừa chỗ bên phải cho mũi tên */
.field__trigger {
  display: block;
  padding-right: var(--space-md);
  text-align: left;
  cursor: pointer;
}

.field__value {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.field__value.is-placeholder {
  color: var(--color-text-muted);
}

.field__box--select:has([aria-expanded="true"]) .field__caret {
  transform: rotate(180deg);
}

/* Danh sách chọn nhiều: popover nằm ở lớp trên cùng nên không bị khung thẻ cắt.
 * JS đặt top/left/width khớp với ô; trình duyệt không hỗ trợ popover thì danh sách hiện ngay dưới ô. */
.picker {
  inset: auto;
  box-sizing: border-box;
  max-height: min(26rem, 70vh);
  margin: var(--space-2xs) 0 0;
  padding: var(--space-2xs);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--color-text);
  background: var(--color-paper-50);
  border: 1px solid var(--color-gold-500);
  border-radius: var(--radius-field);
  box-shadow: 0 18px 40px var(--color-shadow);
}

.picker:popover-open {
  margin: 0;
}

.picker[hidden] {
  display: none;
}

/* Bảng sản phẩm: cột Sản phẩm | Số lượng | Vận chuyển | Thành tiền khi đủ rộng (máy tính, máy tính bảng).
 * Hẹp (điện thoại): tên sản phẩm chiếm cả hàng trên; bên dưới là ô số lượng, bên phải thành tiền và phí ship. */
.picker,
.confirm__list {
  --qty-btn: 2rem;
  container-type: inline-size;
}

.picker__head {
  display: none;
  gap: var(--space-xs);
  margin-bottom: var(--space-3xs);
  padding: var(--space-3xs) var(--space-sm) var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-paper-line);
}

.picker__option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "pick pick"
    "qty total"
    "qty ship";
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-base);
  line-height: 1.35;
  border-radius: calc(var(--radius-field) - var(--space-3xs));
  transition: background-color var(--dur-fast) var(--ease-out);
}

.picker__option:has(.picker__input:checked) {
  background: var(--color-paper-100);
}

.picker__pick {
  grid-area: pick;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  cursor: pointer;
}

.picker__name {
  display: grid;
  min-width: 0;
}

.picker__option:has(.picker__input:checked) .picker__text {
  font-weight: 600;
}

.picker__price {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.picker__price:empty {
  display: none;
}

.picker__ship {
  grid-area: ship;
  font-size: var(--text-xs);
  text-align: right;
  color: var(--color-text-muted);
}

.picker__ship::before {
  content: "Ship: ";
}

.picker__ship.is-free {
  font-weight: 600;
  color: var(--color-jade-700);
}

.picker__ship.is-free::before,
.picker__option--custom .picker__ship::before {
  content: none;
}

.picker__option--custom .picker__ship {
  display: none; /* chưa có giá: điện thoại bỏ hẳn, bảng rộng hiện "—" */
}

.picker__total {
  grid-area: total;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--color-red-700);
}

.picker__option--custom .picker__total {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Ô số lượng: nút −, ô gõ số, nút +. Combo cố định 1 nên chỉ hiện số trong khung nét đứt */
.qty {
  grid-area: qty;
  justify-self: start;
  display: inline-flex;
  align-items: stretch;
  height: var(--qty-btn);
  overflow: hidden;
  font-weight: 600;
  background: var(--color-paper-50);
  border: 1px solid var(--color-paper-line);
  border-radius: calc(var(--radius-field) - var(--space-3xs));
}

.qty--fixed {
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: calc(var(--qty-btn) * 2 + 2.25rem + 2px);
  color: var(--color-text-muted);
  background: transparent;
  border-style: dashed;
  cursor: default;
}

.qty__btn {
  display: grid;
  place-items: center;
  width: var(--qty-btn);
  margin: 0;
  padding: 0;
  color: var(--color-jade-700);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.qty__btn svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

.qty__btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .qty__btn:not([aria-disabled="true"]):hover {
    background: var(--color-paper-200);
  }
}

.qty__btn:focus-visible,
.qty__input:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* Bỏ mũi tên tăng/giảm mặc định của ô số, đã có nút − và + */
.qty__input {
  width: 2.25rem;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-base); /* 16px: iPhone không tự phóng to trang khi gõ */
  text-align: center;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-inline: 1px solid var(--color-paper-line);
  border-radius: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

.qty__input::-webkit-inner-spin-button,
.qty__input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

@container (min-width: 34rem) {
  .picker__head,
  .picker__option {
    grid-template-columns: minmax(0, 1fr) calc(var(--qty-btn) * 2 + 2.75rem) 6rem 7rem;
  }

  .picker__head {
    display: grid;
  }

  .picker__head span:nth-child(2),
  .picker__head span:nth-child(3) {
    text-align: center;
  }

  .picker__head span:last-child {
    text-align: right;
  }

  .picker__option {
    grid-template-areas: "pick qty ship total";
    column-gap: var(--space-xs);
  }

  .qty {
    justify-self: center;
  }

  .picker__ship {
    font-size: var(--text-sm);
    text-align: center;
    white-space: nowrap;
  }

  .picker__ship::before {
    content: none;
  }

  .picker__option--custom .picker__ship {
    display: block;
  }
}

/* Ô tích gốc ẩn đi nhưng vẫn nhận focus và bấm qua nhãn */
.picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.picker__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-paper-50);
  border: 1.5px solid var(--color-gold-700);
  border-radius: 0.3125rem;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.picker__check svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--color-cream);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.picker__input:checked + .picker__check {
  background: var(--color-jade-700);
  border-color: var(--color-jade-700);
}

.picker__input:checked + .picker__check svg {
  opacity: 1;
  transform: none;
}

.picker__input:focus-visible + .picker__check {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .picker__option:hover {
    background: var(--color-paper-200);
  }
}

/* Màn cảm ứng: hàng và nút −/+ to hơn cho dễ chạm ngón tay */
@media (pointer: coarse) {
  .picker,
  .confirm__list {
    --qty-btn: 2.25rem;
  }

  .picker__option {
    padding-block: var(--space-xs);
  }
}

/* "Sản phẩm khác": ô tự nhập + nút Thêm ở cuối danh sách, ngăn với các ô tích bằng một đường kẻ */
.picker__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* không để bề rộng mặc định của ô nhập đẩy nút Thêm tràn ra ngoài */
  gap: var(--space-3xs);
  margin-top: var(--space-3xs);
  padding: var(--space-xs) var(--space-sm) var(--space-2xs);
  border-top: 1px solid var(--color-paper-line);
}

.picker__add-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.picker__add-row {
  display: flex;
  gap: var(--space-2xs);
}

.picker__add-input {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  margin: 0;
  padding: 0 var(--space-xs);
  font: inherit;
  font-size: var(--text-base); /* 16px: iPhone không tự phóng to trang khi gõ */
  color: var(--color-text);
  background: var(--color-paper-50);
  border: 1px solid var(--color-paper-line);
  border-radius: calc(var(--radius-field) - var(--space-3xs));
  transition: border-color var(--dur-fast) var(--ease-out);
}

.picker__add-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.picker__add-input:focus {
  border-color: var(--color-gold-700);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.picker__add-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  height: 2.75rem;
  margin: 0;
  padding: 0 var(--space-sm);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-cream);
  background: var(--color-jade-700);
  border: 1px solid var(--color-gold-700);
  border-radius: calc(var(--radius-field) - var(--space-3xs));
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.picker__add-btn svg {
  width: 1rem;
  height: 1rem;
  fill: var(--color-gold-300);
}

@media (hover: hover) and (pointer: fine) {
  .picker__add-btn:hover {
    background: var(--color-jade-900);
  }
}

.picker__add-btn:active {
  transform: translateY(1px);
}

.picker__add-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .field__box:hover {
    border-color: var(--color-gold-500);
  }
}

/* Vòng focus hiện ngay, không có transition */
.field__box:focus-within {
  background: var(--color-paper-50);
  border-color: var(--color-gold-700);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.field.is-invalid .field__box {
  background: var(--color-paper-50);
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger), 0 0 0 3px var(--color-danger-a12);
}

.field.is-invalid .field__box:focus-within {
  outline-color: var(--color-danger);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  padding-inline: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-danger);
}

.field__error[hidden] {
  display: none;
}

.field__error svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  fill: currentColor;
}

/* Ô bẫy bot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Nút gửi ---------- */
.form__actions {
  margin-top: var(--v-pad);
}

.cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--cta-h);
  margin: 0;
  padding: 0 var(--space-xs);
  overflow: hidden;
  font-size: var(--text-cta);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-on-red);
  background: linear-gradient(180deg, var(--color-red-500) 0%, var(--color-red-700) 100%);
  border: 2px solid var(--color-gold-500);
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 0 0 3px var(--color-red-700),
    inset 0 0 0 4px var(--color-gold-300-a50),
    0 8px 18px var(--color-red-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Vệt sáng lướt qua khi rê chuột */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, var(--color-sheen) 50%, transparent 65%);
  transform: translateX(-110%);
}

.cta__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.cta__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.cta__icon--busy {
  display: none;
}

.cta__fret {
  position: absolute;
  top: 50%;
  display: none;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-gold-300);
  transform: translateY(-50%);
}

.cta__fret--start {
  left: var(--space-md);
}

.cta__fret--end {
  right: var(--space-md);
  transform: translateY(-50%) scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover::before {
    transform: translateX(110%);
    transition: transform var(--dur-sheen) var(--ease-out);
  }
}

.cta:active {
  transform: translateY(1px);
}

.cta:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.cta[aria-disabled="true"] {
  cursor: progress;
  transform: none;
}

.cta[aria-disabled="true"]::before {
  display: none;
}

.cta.is-loading .cta__icon--send {
  display: none;
}

.cta.is-loading .cta__icon--busy {
  display: block;
}

/* Trạng thái gửi: chỉ hiện chữ khi có nội dung, vùng live luôn nằm trong DOM */
.form__status {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
}

.form__status:not(:empty) {
  margin-top: var(--space-xs);
}

.form__status[data-tone="success"] {
  color: var(--color-success);
}

.form__status[data-tone="error"] {
  color: var(--color-danger);
}

/* ---------- Dải cam kết ---------- */
/* Mỗi cam kết là một "ấn" tròn viền vàng như đồng xu phong thủy; chữ hai tầng: tiêu đề vàng + mô tả kem.
 * Ánh sáng tỏa từ mép trên xuống để dải xanh có chiều sâu thay vì một mảng phẳng. */
.card__foot {
  padding:
    var(--v-foot-pad)
    calc(var(--frame-width) + var(--space-3xs))
    calc(var(--frame-width) + var(--v-foot-pad));
  color: var(--color-cream);
  background:
    radial-gradient(70% 140% at 50% 0%, var(--color-jade-600) 0%, transparent 72%),
    linear-gradient(180deg, var(--color-jade-700) 0%, var(--color-jade-900) 100%);
  border-top: 2px solid var(--color-gold-500);
  box-shadow: inset 0 1px 0 var(--color-gold-900);
}

.assure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.assure__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-3xs);
  text-align: center;
}

/* Vạch ngăn mảnh, mờ dần ở hai đầu */
.assure__item + .assure__item::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-gold-500) 50%, transparent);
}

.assure__seal {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: radial-gradient(circle at 50% 35%, var(--color-jade-600), var(--color-jade-900) 78%);
  border: 1.5px solid var(--color-gold-500);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px var(--color-jade-900),
    inset 0 0 0 3px var(--color-gold-700),
    0 2px 6px var(--color-shadow);
}

.assure__seal svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--color-gold-300);
}

.assure__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.assure__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-sm), 4.2vw, var(--text-base));
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-gold-300);
}

.assure__desc {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-cream-muted);
  text-wrap: balance;
}

/* ---------- Hộp xác nhận ---------- */
/* Dùng lại giấy dó, khung góc khuyết và huy hiệu của thẻ form (.card__panel, .card__frame, .card__medallion) */
.confirm {
  width: min(100% - 1.5rem, 40rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible; /* huy hiệu hoa sen nhô lên khỏi mép trên */
  color: var(--color-text);
  background: transparent;
  border: 0;
}

.confirm::backdrop {
  background: var(--color-ink-a80);
  backdrop-filter: blur(3px);
}

/* Khoá cuộn trang phía sau khi hộp đang mở */
html:has(.confirm[open]) {
  overflow: hidden;
}

.confirm::before {
  content: "";
  position: absolute;
  inset: var(--space-2xs);
  border-radius: var(--radius-field);
  box-shadow: 0 28px 60px var(--color-shadow), 0 6px 16px var(--color-shadow);
}

/* Màn thấp: nội dung cuộn bên trong khung, khung và huy hiệu đứng yên */
.confirm__panel {
  max-height: calc(100dvh - 3rem);
  padding:
    calc(var(--frame-width) + var(--space-md))
    calc(var(--frame-width) + var(--space-xs))
    calc(var(--frame-width) + var(--space-sm));
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
}

.confirm__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--color-gold-900);
}

/* Đường kẻ vàng mảnh hai bên một bông sen nhỏ */
.confirm__divider {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 12rem;
  margin: var(--space-2xs) auto 0;
  color: var(--color-gold-500);
}

.confirm__divider::before,
.confirm__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-500));
}

.confirm__divider::after {
  background: linear-gradient(90deg, var(--color-gold-500), transparent);
}

.confirm__divider svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.confirm__desc {
  max-width: 36ch;
  margin: var(--space-xs) auto 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: balance;
}

/* Hàng sản phẩm dùng chung kiểu .picker__option của danh sách thả xuống, thêm viền để thành từng ô */
.confirm__list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  text-align: left;
}

.confirm__list .picker__option {
  padding-inline: var(--space-xs);
  background: var(--color-paper-50);
  border: 1px solid var(--color-paper-line);
}

.confirm__list .picker__option:has(.picker__input:checked) {
  background: var(--color-paper-100);
  border-color: var(--color-gold-500);
}

/* Tiêu đề cột thẳng với nội dung các dòng có viền 1px */
.confirm__list .picker__head {
  margin-bottom: 0;
  padding-inline: calc(var(--space-sm) + 1px);
}

/* Trong hộp xác nhận: ô tự nhập nằm ngay dưới danh sách, không cần đường kẻ ngăn */
.confirm__add {
  margin-top: var(--space-xs);
  padding: 0;
  text-align: left;
  border-top: 0;
}

.confirm__count {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-jade-700);
}

.confirm__count:empty {
  display: none;
}

.confirm__error {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2xs);
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-danger);
}

.confirm__error[hidden] {
  display: none;
}

.confirm__error svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  fill: currentColor;
}

/* Điện thoại: nút đỏ ở trên cho dễ bấm, "Quay lại sửa" ở dưới; từ 480px thì nằm cùng hàng */
.confirm__actions {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.confirm__actions--center {
  align-items: center;
  justify-content: center;
}

/* Bỏ hết sản phẩm thì nút gửi mờ đi (lúc đang gửi thì vẫn giữ nguyên màu, chỉ đổi con trỏ) */
.confirm__send[aria-disabled="true"]:not(.is-loading) {
  cursor: not-allowed;
  opacity: 0.55;
}

.confirm__ghost {
  min-height: var(--cta-h);
  margin: 0;
  padding: 0 var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text);
  background: transparent;
  border: 1.5px solid var(--color-gold-500);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .confirm__ghost:hover {
    background: var(--color-paper-200);
    border-color: var(--color-gold-700);
  }
}

.confirm__ghost:active {
  transform: translateY(1px);
}

.confirm__ghost:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Ấn xanh ngọc viền vàng như các ấn ở dải cam kết, lớn hơn */
.confirm__seal {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-sm);
  color: var(--color-gold-300);
  background: radial-gradient(circle at 50% 35%, var(--color-jade-600), var(--color-jade-900) 78%);
  border: 1.5px solid var(--color-gold-500);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px var(--color-jade-900),
    inset 0 0 0 4px var(--color-gold-700),
    0 4px 12px var(--color-shadow);
}

.confirm__seal svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

.confirm__label {
  margin: var(--space-md) 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.confirm__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.confirm__chips li {
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-jade-700);
  background: var(--color-paper-100);
  border: 1px solid var(--color-gold-500);
  border-radius: var(--radius-pill);
}

@media (min-width: 30rem) {
  .confirm__panel {
    padding:
      calc(var(--frame-width) + var(--space-lg))
      calc(var(--frame-width) + var(--space-sm))
      calc(var(--frame-width) + var(--space-md));
  }

  .confirm__list .picker__option {
    padding-inline: var(--space-sm);
  }

  .confirm__actions {
    flex-direction: row;
  }

  .confirm__actions .cta {
    flex: 1;
    width: auto;
  }
}

/* ---------- Nút nhạc nền ---------- */
/* Góc trên bên phải: chỗ trống duy nhất không đè lên tiêu đề hay thẻ form ở mọi cỡ màn hình */
.music-toggle {
  position: fixed;
  top: max(var(--space-xs), env(safe-area-inset-top));
  right: max(var(--space-xs), env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-gold-300);
  background: var(--color-ink-a80);
  border: 1px solid var(--color-gold-500);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px var(--color-shadow);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.music-toggle[hidden] {
  display: none;
}

.music-toggle:active {
  transform: scale(0.96);
}

.music-toggle:focus-visible {
  outline: 2px solid var(--color-gold-300);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .music-toggle:hover {
    color: var(--color-gold-100);
    border-color: var(--color-gold-300);
  }
}

.music-toggle__icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* Đang phát: loa có sóng; đang tắt: loa gạch chéo */
.music-toggle__icon--on,
.music-toggle[aria-pressed="true"] .music-toggle__icon--off {
  display: none;
}

.music-toggle[aria-pressed="true"] .music-toggle__icon--on {
  display: block;
}

/* ---------- Màn hình lớn hơn ---------- */
/* Từ 416px nút mới đủ chỗ cho hoa văn hai đầu mà chữ vẫn nằm trên một dòng */
@media (min-width: 26rem) {
  .cta {
    padding-inline: calc(var(--space-lg) + var(--space-md));
    letter-spacing: 0.03em;
  }

  .cta__label {
    gap: var(--space-xs);
  }

  .cta__icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .cta__fret {
    display: block;
  }
}

@media (min-width: 30rem) {
  .form {
    padding-inline: calc(var(--frame-width) + var(--space-md));
  }

  .assure__item {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-xs);
    text-align: start;
  }

  .assure__title {
    font-size: var(--text-md);
  }
}

@media (min-width: 40rem) {
  .card__cloud {
    display: block;
  }

  .assure__seal {
    width: 2.5rem;
    height: 2.5rem;
  }

  .assure__seal svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Từ 768px: Họ tên | SĐT chung một hàng; Địa chỉ, Danh mục, Yêu cầu trải hết hàng vì nội dung thường dài.
 * Thứ tự trong HTML khớp thứ tự nhìn, nên phím Tab đi đúng từ trái sang phải, trên xuống dưới. */
@media (min-width: 48rem) {
  .card {
    max-width: 46rem;
  }

  .form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; /* một ô hiện lỗi không kéo giãn ô bên cạnh */
    column-gap: var(--space-sm);
  }

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

/* ---------- Chuyển động ---------- */
/* Hiện lần lượt: biểu tượng → tên → slogan → form, đúng thứ tự đọc */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise var(--dur-reveal) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 110ms);
  }

  .cta.is-loading .cta__icon--busy {
    animation: spin 1.2s linear infinite;
  }

  .confirm[open] {
    animation: confirm-in var(--dur-base) var(--ease-out);
  }

  .confirm[open]::backdrop {
    animation: fade-in var(--dur-base) var(--ease-out);
  }
}

@keyframes confirm-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta::before,
  .field__box,
  .field__caret,
  .picker__check,
  .picker__check svg,
  .music-toggle,
  .confirm__ghost,
  .picker__add-input,
  .picker__add-btn,
  .qty__btn {
    transition: none;
  }
}