/* Mobile stability, focused inputs and exact purchase-return flow for Ngoc An Hy V17. */
html {
  min-height: 100%;
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  height: auto !important;
}

body:not(.modal-open) {
  height: auto !important;
  overflow-y: auto !important;
  padding-right: 0 !important;
  position: static !important;
}

/*
 * A fixed-body lock is required on iOS Safari and embedded Facebook/Messenger
 * browsers. Locking overflow alone still allows the page underneath a modal to
 * rubber-band, which can cause visible jumps and excessive repainting.
 */
html.nah-modal-locked {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.nah-modal-locked {
  position: fixed !important;
  top: var(--nah-scroll-lock-top, 0px) !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.nah-modal-locked .modal-layer,
body.nah-modal-locked .order-success-layer {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: auto;
  isolation: isolate;
}

body.nah-modal-locked .detail-modal {
  touch-action: manipulation;
}

body.nah-modal-locked .detail-modal .gallery__stage {
  touch-action: pan-x;
}

body.nah-modal-locked .order-modal {
  overscroll-behavior: contain !important;
  touch-action: pan-y;
}

body.nah-modal-locked .order-modal input,
body.nah-modal-locked .order-modal select,
body.nah-modal-locked .order-modal button,
body.nah-modal-locked .detail-modal button,
body.nah-modal-locked .order-success-card button {
  touch-action: manipulation;
}

main {
  overflow-x: hidden;
  overflow-y: visible !important;
}

#top,
#story,
#collection,
#contact,
[id^="product-"] {
  scroll-margin-top: 110px;
}

button,
a,
input,
select {
  touch-action: manipulation;
}

.order-modal {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.nah-field-error {
  display: block;
  margin: -1px 2px 0;
  color: #a22f2f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.nah-field-error[hidden] {
  display: none !important;
}

.field.is-invalid input,
.field.is-invalid select {
  border-color: #b64545 !important;
  background: #fffafa !important;
  box-shadow: 0 0 0 3px rgba(182, 69, 69, 0.1) !important;
}

.consent.is-invalid {
  padding: 10px 12px;
  border: 1px solid rgba(182, 69, 69, 0.35);
  border-radius: 10px;
  background: #fffafa;
}

.form-status.is-error {
  color: #8c2d2d;
  background: #fff0f0;
}

.nah-fallback-layer {
  z-index: 120;
}

.nah-fallback-order .order-product-lock {
  grid-template-columns: minmax(0, 1fr) auto;
}

.nah-fallback-detail .nah-fallback-detail-buy {
  width: 100%;
  min-height: 48px;
}

body.nah-fallback-active .floating-contact {
  display: none !important;
}

@media (max-width: 700px) {
  html.nah-mobile-optimized [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.nah-mobile-optimized .hero:after,
  html.nah-mobile-optimized .story__seal {
    animation: none !important;
  }

  /*
   * Do not virtualize product cards on mobile. Safari/WebView can temporarily
   * replace fast-scrolled cards with their intrinsic placeholder, producing
   * the large white gaps and jump-back visible in the supplied recording.
   * Images remain lazy-loaded, so this does not undo V18's memory reduction.
   */
  .product-card {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    contain: layout paint;
  }

  .modal-layer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 30, 27, 0.9);
  }

  .detail-modal {
    width: calc(100% - 12px);
    height: min(88vh, 780px);
    height: min(88dvh, 780px);
    max-height: min(88vh, 780px);
    max-height: min(88dvh, 780px);
    margin: 6px;
    padding: 10px 10px calc(70px + env(safe-area-inset-bottom));
    border-radius: 18px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: start;
    gap: 9px;
    animation: none;
    overflow: hidden;
  }

  .detail-modal__gallery {
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .detail-modal__gallery .gallery {
    height: 100%;
  }

  .detail-modal__gallery .gallery__stage {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
    border-radius: 14px;
  }

  .detail-modal__gallery .gallery__slide {
    object-fit: contain;
    background: var(--jade-pale);
  }

  .detail-modal .gallery__thumbs {
    display: none;
  }

  .detail-modal__copy {
    min-width: 0;
    padding: 0 4px;
  }

  .detail-modal__copy .kicker {
    display: none;
  }

  .detail-modal__copy h2 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 28px;
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .detail-modal__variant {
    margin: 3px 0 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-modal__price {
    margin-top: 6px;
    font-size: 22px;
    line-height: 1.2;
  }

  .detail-modal__copy > p:not(.kicker):not(.detail-modal__variant) {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .detail-modal__copy ul {
    display: none;
  }

  .detail-modal .detail-buy-button,
  .detail-modal .nah-fallback-detail-buy {
    z-index: 9;
    width: auto;
    min-height: 54px;
    margin: 0;
    position: absolute;
    right: 14px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 14px;
    font-size: 14px;
    box-shadow: 0 12px 30px rgba(18, 61, 54, 0.38);
  }

  .detail-modal .modal-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 23px;
  }

  .order-modal {
    width: calc(100% - 12px);
    min-height: 0;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 18px;
    animation: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .order-modal__heading {
    padding: 0 38px 0 0;
  }

  .order-modal__heading .kicker {
    display: none;
  }

  .order-modal__heading h2 {
    font-size: 24px;
    line-height: 1.08;
  }

  .order-modal__heading > p:not(.kicker) {
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.4;
  }

  .order-modal form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 7px;
    margin-top: 10px;
  }

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

  .field {
    min-width: 0;
    gap: 3px;
    position: relative;
  }

  .field input,
  .field select,
  .order-modal form button {
    font-size: 16px !important;
  }

  .field input,
  .field select {
    min-height: 42px;
    padding: 0 10px;
    border-radius: 9px;
    transform: none !important;
  }

  .order-modal,
  .order-modal form,
  .order-modal .field,
  .order-modal .field input,
  .order-modal .field select {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
  }

  .order-modal:focus-within {
    -webkit-overflow-scrolling: auto;
  }

  .order-modal .field input {
    appearance: none;
    -webkit-appearance: none;
    caret-color: #0f554c !important;
    line-height: 1.25;
    text-align: left;
    text-indent: 0;
    contain: none;
    will-change: auto;
  }

  .order-modal .field select {
    line-height: 1.25;
    text-align: left;
  }

  .order-modal .field:focus-within > span,
  .order-modal .field.is-focused > span {
    color: #8a6734;
  }

  .order-modal .field:focus-within > span::after,
  .order-modal .field.is-focused > span::after {
    content: "• Đang nhập";
    margin-left: auto;
    color: #9b7338;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    font-size: 8.5px;
    font-weight: 700;
  }

  .order-modal .field input:focus,
  .order-modal .field select:focus {
    outline: none !important;
    border: 2px solid #a5834f !important;
    background: #fffef9 !important;
    box-shadow: 0 0 0 4px rgba(165, 131, 79, 0.13) !important;
  }

  .field > span,
  .turnstile-label {
    font-size: 10px;
    line-height: 1.25;
  }

  .order-product-lock,
  .nah-fallback-order .order-product-lock {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 52px;
    gap: 5px 8px;
    padding: 8px 11px;
    border-radius: 11px;
  }

  .order-product-lock > span {
    display: none;
  }

  .order-product-lock:before {
    top: 12px;
    right: 10px;
    width: 22px;
    height: 22px;
  }

  .order-product-lock > strong,
  .order-product-lock > small {
    padding-right: 27px;
    font-size: 12px;
    line-height: 1.25;
  }

  .consent {
    gap: 7px;
    font-size: 10px;
    line-height: 1.3;
  }

  .consent input {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }

  .turnstile-field {
    gap: 3px;
  }

  .turnstile-widget {
    min-height: 65px;
    overflow: hidden;
  }

  .turnstile-status,
  .nah-field-error,
  .form-status {
    font-size: 10px;
    line-height: 1.35;
  }

  .order-modal form > .primary-button {
    min-height: 44px;
  }

  .form-status {
    padding: 8px 10px;
  }

  .modal-close {
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
  }

  .order-success-layer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 700px) and (max-height: 700px) {
  .detail-modal {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .detail-modal__gallery .gallery__stage {
    height: 100%;
  }

  .detail-modal__copy > p:not(.kicker):not(.detail-modal__variant) {
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 390px) {
  .order-modal {
    padding-right: 10px;
    padding-left: 10px;
  }

  .order-modal__heading h2 {
    font-size: 22px;
  }
}

@media (max-width: 340px) {
  .order-modal form {
    grid-template-columns: 1fr;
  }

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

html.nah-embedded-webview .site-header,
html.nah-embedded-webview .modal-layer,
html.nah-embedded-webview .order-success-layer {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.nah-embedded-webview *,
html.nah-embedded-webview *:before,
html.nah-embedded-webview *:after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .modal-layer,
  .order-modal,
  .detail-modal {
    animation: none !important;
  }
}

/* V19: keep fast vertical swipes deterministic without virtual card gaps. */
@media (max-width: 900px), (pointer: coarse) {
  html {
    scroll-behavior: auto !important;
    overscroll-behavior-y: none;
  }

  body {
    overflow-anchor: none;
  }

  #top,
  #story,
  #collection,
  #contact,
  [id^="product-"] {
    scroll-behavior: auto !important;
  }

  .product-card {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    contain: layout paint;
  }

  .gallery__slides,
  .gallery__slide {
    will-change: auto !important;
    backface-visibility: hidden;
  }

  /* Mobile reveal effects are already disabled above. Avoid swapping card
     shadows/styles during a gesture because that forces an unnecessary repaint. */
}

html.nah-embedded-webview {
  scroll-behavior: auto !important;
}