/* One Hắc kim language for every V2 dialog and every subpage back action. */
body[data-mu-preview] {
  --mu-popup-bg: #1b2227;
  --mu-popup-border: #9b7e50;
  --mu-popup-text: #f6f1e8;
  --mu-popup-muted: #b9b8b5;
  --mu-popup-gold: #e7c78d;
  /* Font stacks: Thai swaps the first family in (see the language section below). */
  --mu-font-body: 'Be Vietnam Pro', sans-serif;
  --mu-font-head: Manrope, 'Be Vietnam Pro', sans-serif;
  --mu-danger: #b45252;
  --mu-item-size: 30px;
}

body[data-mu-preview] .mu-page-backbar {
  width: min(100%, 1120px);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
}
body[data-mu-preview] :is(.mu-page-back, #index_content .mu-card-back) {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #806b49 !important;
  border-radius: 8px !important;
  background: #242a2b !important;
  color: var(--mu-popup-gold) !important;
  box-shadow: none !important;
  font: 700 25px/1 Manrope, 'Be Vietnam Pro', sans-serif !important;
  text-decoration: none !important;
  cursor: pointer;
  touch-action: manipulation;
}
body[data-mu-preview] :is(.mu-page-back, #index_content .mu-card-back):is(:hover,:focus-visible) {
  border-color: var(--mu-popup-gold) !important;
  background: #332e24 !important;
}
body[data-mu-preview] .mu-page-back svg { width: 22px; height: 22px; fill: currentColor; }

/* Reusable V2 subpage header: Back and title never occupy separate rows. */
body[data-mu-preview] #index_content .mu-v2-page-heading {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) auto;
  grid-template-areas: 'back title actions';
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-page-backbar,
body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-card-back {
  grid-area: back;
  width: 42px !important;
  margin: 0 !important;
}
body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-v2-page-heading-title { grid-area: title; min-width: 0; }
body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions {
  grid-area: actions;
  margin-left: 0 !important;
  min-width: 0;
}
/* Every recharge page keeps a title line and a short explanatory line. */
body[data-mu-preview] #index_content .mu-v2-page-heading .mu-v2-page-heading-title h1 {
  margin: 0 !important;
  color: #f6f1e8 !important;
  font: 800 clamp(19px,2.7vw,24px)/1.15 Manrope,'Be Vietnam Pro',sans-serif !important;
}
body[data-mu-preview] #index_content .mu-v2-page-heading .mu-v2-page-heading-title p {
  display: block !important;
  margin: 2px 0 0 !important;
  color: #b8b8b6 !important;
  font: 500 11px/1.35 'Be Vietnam Pro',sans-serif !important;
  text-wrap: pretty;
}
@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview] #index_content .mu-v2-page-heading {
    grid-template-columns: 36px minmax(0,1fr);
    grid-template-areas: 'back title' 'actions actions';
    gap: 7px 9px;
  }
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-page-backbar,
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-card-back { width: 36px !important; height: 36px !important; }
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-card-back { min-width: 36px !important; min-height: 36px !important; }
  /* The button inside the 36px backbar must shrink with it: a 42px button overflowed 3px above the row and got
     clipped at the top edge of the page window on every page whose heading sits at the top. */
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-page-backbar > .mu-page-back {
    width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
  }
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    width: 100%;
  }
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions > * { justify-content: center; min-width: 0; width: 100%; }
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions > :only-child { grid-column: 1 / -1; }
  /* Segmented controls and icon buttons keep their own width instead of stretching across the row. */
  body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions > :is(.mu-v2-seg,.mu-v2-icon-btn) { width: auto; justify-self: start; }
}
/* .is-inline-actions: one or two small actions stay on the title row at every size (portrait included). */
body[data-mu-preview] #index_content .mu-v2-page-heading.is-inline-actions > .mu-v2-page-heading-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  width: auto;
}
body[data-mu-preview] #index_content .mu-v2-page-heading.is-inline-actions > .mu-v2-page-heading-actions > * { width: auto; flex: none; }
@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview] #index_content .mu-v2-page-heading.is-inline-actions {
    grid-template-columns: 36px minmax(0,1fr) auto;
    grid-template-areas: 'back title actions';
  }
}

/* The card warning is part of the form, so the acknowledgement cannot be missed. */
body[data-mu-preview] #index_content .mu-card-warning {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #a67c4d;
  border-left: 3px solid var(--mu-popup-gold);
  border-radius: 7px;
  background: #30291f;
  color: #eee4d1;
  font: 400 11px/1.55 'Be Vietnam Pro', sans-serif;
}
body[data-mu-preview] #index_content .mu-card-warning > strong {
  display: block;
  margin-bottom: 3px;
  color: #f2d49b;
  font: 700 12px/1.35 Manrope, 'Be Vietnam Pro', sans-serif;
}
body[data-mu-preview] #index_content .mu-card-warning p { margin: 0 0 9px; }
body[data-mu-preview] #index_content .mu-card-confirm {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #fff5e2;
  cursor: pointer;
}
body[data-mu-preview] #index_content .mu-card-confirm input {
  flex: none;
  width: 19px;
  height: 19px;
  min-height: 19px !important;
  margin: 0;
  accent-color: #d5b77a;
}
body[data-mu-preview] #index_content .mu-card-confirm b { color: #f2d49b; }

/* Overlay color is shared; each feature keeps its own safe open/close logic. */
body[data-mu-preview] :is(.mu-dialog-layer,.mu-v2-popup-layer,.swal2-container.swal2-backdrop-show),
body[data-mu-preview] #index_content :is(
  .mu-card-amount-overlay,.rc-lucky-modal,.rc-server-modal,.rc-rule-modal,
  .vq-overlay,.mk-rules-modal,.mk-picker-modal,.sc-class-modal,
  .sc-rules-modal,.sc-picker-modal,.scbp-charpicker,.scbp-carry-modal,
  .scbp-item-modal,.smt-rules-modal,.giftcode-rule-modal
) {
  background: rgba(5, 9, 14, .86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-mu-preview] .modal-backdrop {
  background: #05090e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-mu-preview] .modal-backdrop.show { opacity: .86 !important; }
body[data-mu-preview] .mu-v2-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
body[data-mu-preview] .mu-v2-popup-layer[hidden] { display: none !important; }
body[data-mu-preview] .mu-v2-popup-dialog {
  width: min(480px,100%);
  overflow-y: auto;
}
/* v2.js focuses the panel itself (tabindex=-1) on open; the container needs no ring, controls keep theirs. */
body[data-mu-preview] .mu-v2-popup-dialog:focus { outline: 0 !important; }
body[data-mu-preview] .mu-v2-guide-list { display:grid; gap:0; }
body[data-mu-preview] .mu-v2-guide-row { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:start; gap:11px; padding:11px 0; border-bottom:1px solid #514736; }
body[data-mu-preview] .mu-v2-guide-row:last-child { border-bottom:0; }
body[data-mu-preview] .mu-v2-guide-num { display:grid; place-items:center; width:26px; height:26px; border:1px solid #77603f; border-radius:7px; background:#332c22; color:#ebca8d; font:700 13px/1 Manrope,sans-serif; }
body[data-mu-preview] .mu-v2-guide-row > :last-child { margin:2px 0 0; color:#e1dcd1; line-height:1.48; }
body[data-mu-preview] .mu-v2-guide-row a { color:#ebca8d !important; text-decoration:underline; text-underline-offset:2px; }

/* Feature popups must cover the entire app, including its bottom/side navigation. */
body[data-mu-preview] .auth-page.mu-v2-bootstrap-open { z-index: 1060 !important; }
body[data-mu-preview] .auth-container.mu-v2-modal-open {
  position: relative;
  z-index: 1060;
}
body[data-mu-preview] .auth-container.mu-v2-modal-open #index_content .modal.mu-v2-popup-layer-host.show {
  background: rgba(5, 9, 14, .86) !important;
}
body[data-mu-preview] .auth-container.mu-v2-modal-open .auth-main {
  z-index: 10 !important;
  overflow: visible !important;
}
body[data-mu-preview] .auth-container.mu-v2-modal-open :is(.auth-content-area,.mu-view-slot,.mu-page-window) {
  overflow: visible !important;
}
body[data-mu-preview] .auth-container.mu-v2-modal-open #index_content .mu-v2-popup-layer-host {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body[data-mu-preview] :is(.mu-dialog,.mu-v2-popup-dialog,.swal2-popup,.modal-content),
body[data-mu-preview] #index_content :is(
  .mu-card-amount-dialog,.rc-lucky-dialog,.rc-server-dialog,.rc-rule-dialog,
  .vq-modal,.p247-modal-card,.ud-rules-dialog,.up-rules-popup,
  .mk-rules-dialog,.mk-picker-dialog,.sc-class-dialog,.sc-rules-dialog,
  .sc-picker-dialog,.scbp-charpicker-dialog,.scbp-carry-dialog,.scbp-item-dialog,
  .smt-rules-dialog,.giftcode-rule-dialog
) {
  border: 1px solid var(--mu-popup-border) !important;
  border-radius: 10px !important;
  background: var(--mu-popup-bg) !important;
  color: var(--mu-popup-text) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-height: calc(var(--mu-h, 100dvh) - 24px) !important;
  overscroll-behavior: contain;
}
body[data-mu-preview] #index_content .mu-card-amount-dialog { width: min(430px,100%) !important; }
body[data-mu-preview] :is(.mu-dialog-head,.modal-header,.swal2-title),
body[data-mu-preview] #index_content :is(
  .mu-card-amount-top,.vq-modal-head,.rc-rule-head,.up-rules-popup-head,
  .mk-rules-head,.mk-picker-head,.sc-class-head,.sc-rules-head,
  .sc-picker-head,.giftcode-rule-head
) {
  color: var(--mu-popup-text) !important;
  font-family: Manrope, 'Be Vietnam Pro', sans-serif !important;
}
/* One close mark for all of V2: .mu-v2-x is the contract, legacy close buttons
   alias into it. The box never depends on #index_content, so popups mounted on
   body (SweetAlert, Bootstrap modal, hub dialogs) get the same thin cross. */
body[data-mu-preview] :is(.mu-v2-x,.mu-v2-popup-close,.mu-dialog-head button),
body[data-mu-preview] #index_content :is(
  .mu-card-amount-close,.vq-modal-close,.vq-inline-close,.vq-v2-pay-close,.vp-modal-close,
  .p247-modal-close,.rc-rule-close,.rc-lucky-close,.rc-server-close,.rc-v2-server-x,
  .ud-rules-close,.ud-history-close,.ud-v2-pay-close,.up-rules-popup-close,
  .gb-inline-close,.gb-pay-head-close,.mk-rules-close,.mk-picker-close,
  .sc-class-close,.sc-rules-close,.sc-picker-close,.scbp-charpicker-close,
  .scbp-carry-close,.scbp-item-close,.smt-rules-close,.giftcode-rule-close
) {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0;
  flex: none;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #796444 !important;
  border-radius: 7px !important;
  background: #2b302e !important;
  color: var(--mu-popup-gold) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}
/* Legacy close buttons keep the in-flow placement their popups were approved with. */
body[data-mu-preview] :is(.mu-v2-x,.mu-dialog-head button) { position: relative; }
body[data-mu-preview] #index_content :is(
  .mu-card-amount-close,.vq-modal-close,.vq-inline-close,.vq-v2-pay-close,.vp-modal-close,
  .p247-modal-close,.rc-rule-close,.rc-lucky-close,.rc-server-close,.rc-v2-server-x,
  .ud-rules-close,.ud-history-close,.ud-v2-pay-close,.up-rules-popup-close,
  .gb-inline-close,.gb-pay-head-close,.mk-rules-close,.mk-picker-close,
  .sc-class-close,.sc-rules-close,.sc-picker-close,.scbp-charpicker-close,
  .scbp-carry-close,.scbp-item-close,.smt-rules-close,.giftcode-rule-close
) { position: relative !important; }
body[data-mu-preview] :is(.mu-v2-x,.mu-v2-popup-close,.mu-dialog-head button) :is(i,svg),
body[data-mu-preview] #index_content :is(
  .mu-card-amount-close,.vq-modal-close,.vq-inline-close,.vq-v2-pay-close,.vp-modal-close,
  .p247-modal-close,.rc-rule-close,.rc-lucky-close,.rc-server-close,.rc-v2-server-x,
  .ud-rules-close,.ud-history-close,.ud-v2-pay-close,.up-rules-popup-close,
  .gb-inline-close,.gb-pay-head-close,.mk-rules-close,.mk-picker-close,
  .sc-class-close,.sc-rules-close,.sc-picker-close,.scbp-charpicker-close,
  .scbp-carry-close,.scbp-item-close,.smt-rules-close,.giftcode-rule-close
) :is(i,svg) { display: none !important; }
body[data-mu-preview] :is(.mu-v2-x,.mu-v2-popup-close,.mu-dialog-head button)::before,
body[data-mu-preview] :is(.mu-v2-x,.mu-v2-popup-close,.mu-dialog-head button)::after,
body[data-mu-preview] #index_content :is(
  .mu-card-amount-close,.vq-modal-close,.vq-inline-close,.vq-v2-pay-close,.vp-modal-close,
  .p247-modal-close,.rc-rule-close,.rc-lucky-close,.rc-server-close,.rc-v2-server-x,
  .ud-rules-close,.ud-history-close,.ud-v2-pay-close,.up-rules-popup-close,
  .gb-inline-close,.gb-pay-head-close,.mk-rules-close,.mk-picker-close,
  .sc-class-close,.sc-rules-close,.sc-picker-close,.scbp-charpicker-close,
  .scbp-carry-close,.scbp-item-close,.smt-rules-close,.giftcode-rule-close
)::before,
body[data-mu-preview] #index_content :is(
  .mu-card-amount-close,.vq-modal-close,.vq-inline-close,.vq-v2-pay-close,.vp-modal-close,
  .p247-modal-close,.rc-rule-close,.rc-lucky-close,.rc-server-close,.rc-v2-server-x,
  .ud-rules-close,.ud-history-close,.ud-v2-pay-close,.up-rules-popup-close,
  .gb-inline-close,.gb-pay-head-close,.mk-rules-close,.mk-picker-close,
  .sc-class-close,.sc-rules-close,.sc-picker-close,.scbp-charpicker-close,
  .scbp-carry-close,.scbp-item-close,.smt-rules-close,.giftcode-rule-close
)::after {
  content: '' !important;
  position: absolute !important;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  border-radius: 2px;
  background: #e7c78d !important;
  transform: translate(-50%,-50%) rotate(45deg);
}
body[data-mu-preview] :is(.mu-v2-x,.mu-v2-popup-close,.mu-dialog-head button)::after,
body[data-mu-preview] #index_content :is(
  .mu-card-amount-close,.vq-modal-close,.vq-inline-close,.vq-v2-pay-close,.vp-modal-close,
  .p247-modal-close,.rc-rule-close,.rc-lucky-close,.rc-server-close,.rc-v2-server-x,
  .ud-rules-close,.ud-history-close,.ud-v2-pay-close,.up-rules-popup-close,
  .gb-inline-close,.gb-pay-head-close,.mk-rules-close,.mk-picker-close,
  .sc-class-close,.sc-rules-close,.sc-picker-close,.scbp-charpicker-close,
  .scbp-carry-close,.scbp-item-close,.smt-rules-close,.giftcode-rule-close
)::after { transform: translate(-50%,-50%) rotate(-45deg); }
body[data-mu-preview] :is(.mu-v2-x,.mu-v2-popup-close,.mu-dialog-head button):is(:hover,:focus-visible),
body[data-mu-preview] #index_content :is(
  .mu-card-amount-close,.vq-modal-close,.vq-inline-close,.vq-v2-pay-close,.vp-modal-close,
  .p247-modal-close,.rc-rule-close,.rc-lucky-close,.rc-server-close,.rc-v2-server-x,
  .ud-rules-close,.ud-history-close,.ud-v2-pay-close,.up-rules-popup-close,
  .gb-inline-close,.gb-pay-head-close,.mk-rules-close,.mk-picker-close,
  .sc-class-close,.sc-rules-close,.sc-picker-close,.scbp-charpicker-close,
  .scbp-carry-close,.scbp-item-close,.smt-rules-close,.giftcode-rule-close
):is(:hover,:focus-visible) {
  border-color: var(--mu-popup-gold) !important;
  background: #3b3326 !important;
}
body[data-mu-preview] :is(.swal2-confirm,.modal-footer .btn-primary) {
  min-height: 42px !important;
  border: 1px solid #f0d5a0 !important;
  border-radius: 6px !important;
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
  box-shadow: none !important;
  font: 700 13px 'Be Vietnam Pro',sans-serif !important;
}
body[data-mu-preview] :is(.swal2-cancel,.modal-footer .btn-secondary) {
  min-height: 42px !important;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #292f31 !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
}
body[data-mu-preview] #index_content .mu-card-amount-grid button {
  border-radius: 7px !important;
  background: #252b2d !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
}
body[data-mu-preview] #index_content .mu-card-amount-grid button:is(:hover,:focus-visible) {
  border-color: var(--mu-popup-gold) !important;
  background: #3b3326 !important;
}

@media (max-width:700px) and (orientation:portrait) {
  body[data-mu-preview] .mu-dialog-layer,
  body[data-mu-preview] .mu-v2-popup-layer,
  body[data-mu-preview] #index_content .mu-card-amount-overlay { align-items:flex-end !important; padding:0 !important; }
  body[data-mu-preview] :is(.mu-dialog,.mu-v2-popup-dialog,.swal2-popup,.modal-content),
  body[data-mu-preview] #index_content :is(
    .mu-card-amount-dialog,.rc-lucky-dialog,.rc-server-dialog,.rc-rule-dialog,
    .vq-modal,.p247-modal-card,.up-rules-popup,.mk-rules-dialog,.mk-picker-dialog,
    .sc-class-dialog,.sc-rules-dialog,.sc-picker-dialog,.scbp-charpicker-dialog,
    .scbp-carry-dialog,.scbp-item-dialog,.smt-rules-dialog,.giftcode-rule-dialog
  ) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 78dvh !important;
    border-radius: 13px 13px 0 0 !important;
  }
  body[data-mu-preview] #index_content .mu-card-amount-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-height:520px) and (min-width:600px) and (orientation:landscape) {
  body[data-mu-preview] .mu-dialog-layer,
  body[data-mu-preview] .mu-v2-popup-layer,
  body[data-mu-preview] #index_content .mu-card-amount-overlay { justify-content:flex-end !important; align-items:stretch !important; padding:5px !important; }
  body[data-mu-preview] :is(.mu-dialog,.mu-v2-popup-dialog,.swal2-popup,.modal-content),
  body[data-mu-preview] #index_content :is(
    .mu-card-amount-dialog,.rc-lucky-dialog,.rc-server-dialog,.rc-rule-dialog,
    .vq-modal,.p247-modal-card,.up-rules-popup,.mk-rules-dialog,.mk-picker-dialog,
    .sc-class-dialog,.sc-rules-dialog,.sc-picker-dialog,.scbp-charpicker-dialog,
    .scbp-carry-dialog,.scbp-item-dialog,.smt-rules-dialog,.giftcode-rule-dialog
  ) {
    width: min(460px,100%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 9px !important;
  }
  body[data-mu-preview] .mu-page-backbar { margin-bottom: 5px; }
  body[data-mu-preview] .mu-page-back { width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; }
}

/* Shared dismissal affordances. The handle is an intentional, small drag zone:
   scrolling inside a popup never closes it by accident. */
body[data-mu-preview] .mu-v2-popup-panel { position: relative !important; }

/* One title scale and one quiet, precise close mark throughout V2. */
body[data-mu-preview] #index_content .mu-v2-page-heading :is(h1,.vq-title-text,.ud-title-text,.gb-title-text,.rc-title-text,.mu-recharge-title-text) {
  font: 800 clamp(20px,2.4vw,24px)/1.15 Manrope,'Be Vietnam Pro',sans-serif !important;
}
/* The cross itself is drawn by the shared .mu-v2-x rules above; the injected
   close only needs its corner position (also inside #index_content panels). */
body[data-mu-preview] .mu-v2-swipe-handle { display: none; }
body[data-mu-preview] .mu-v2-popup-close,
body[data-mu-preview] #index_content .mu-v2-popup-close {
  position: absolute !important;
  z-index: 8;
  top: 8px;
  right: 8px;
}
body[data-mu-preview] .swal2-popup.mu-v2-has-injected-close .swal2-title,
body[data-mu-preview] .modal-content.mu-v2-has-injected-close .modal-header {
  padding-right: 54px !important;
}
@media (max-width:700px) and (orientation:portrait) {
  body[data-mu-preview] .mu-v2-swipe-handle {
    display: block;
    position: relative;
    z-index: 7;
    flex: none;
    width: 100%;
    height: 18px;
    margin: -4px 0 2px;
    touch-action: none;
    cursor: grab;
  }
  body[data-mu-preview] .mu-v2-swipe-handle::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: #9b927f;
    transform: translateX(-50%);
    pointer-events: none;
  }
  body[data-mu-preview] .mu-v2-popup-close { top: 19px; }
}

/* ------------------------------------------------------------------------ */
/* Shared V2 controls (contract H). Every rule below is scoped to the shell. */
/* ------------------------------------------------------------------------ */
@keyframes mu-v2-spin { to { transform: rotate(360deg); } }
@keyframes mu-v2-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Buttons: charcoal with a gold hairline; primary is the solid gold action. */
body[data-mu-preview] .mu-v2-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  padding: 9px 16px !important;
  margin: 0;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #292f31 !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s, background .15s, filter .15s;
}
body[data-mu-preview] .mu-v2-btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
body[data-mu-preview] .mu-v2-btn:is(:hover,:focus-visible) {
  border-color: var(--mu-popup-border) !important;
  background: #323836 !important;
  color: var(--mu-popup-text) !important;
}
body[data-mu-preview] .mu-v2-btn:focus-visible { outline: 2px solid var(--mu-popup-gold) !important; outline-offset: 2px !important; }
body[data-mu-preview] .mu-v2-btn-primary,
body[data-mu-preview] .mu-v2-btn-primary:is(:hover,:focus-visible) {
  border-color: #f0d5a0 !important;
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
}
body[data-mu-preview] .mu-v2-btn-primary:is(:hover,:focus-visible) { filter: brightness(1.06); }
body[data-mu-preview] .mu-v2-btn-danger,
body[data-mu-preview] .mu-v2-btn-danger:is(:hover,:focus-visible) {
  border-color: #8a4a4a !important;
  background: #2b2424 !important;
  color: #f3d9d9 !important;
}
body[data-mu-preview] .mu-v2-btn-danger:is(:hover,:focus-visible) { border-color: var(--mu-danger) !important; background: #342828 !important; }
body[data-mu-preview] .mu-v2-btn:is(:disabled,[disabled],[aria-disabled="true"]) {
  opacity: .5 !important;
  filter: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
/* Loading: the label fades, one thin ring spins. Ladda buttons keep their own spinner. */
body[data-mu-preview] .mu-v2-btn[data-loading] { color: transparent !important; pointer-events: none; }
body[data-mu-preview] .mu-v2-btn[data-loading]:not(.ladda-button)::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(231,199,141,.3);
  border-top-color: var(--mu-popup-gold);
  border-radius: 50%;
  animation: mu-v2-spin .7s linear infinite;
}
body[data-mu-preview] .mu-v2-btn-primary[data-loading]:not(.ladda-button)::after {
  border-color: rgba(37,29,18,.25);
  border-top-color: #251d12;
}

/* Notices: a 3px semantic edge on the charcoal card, room for a leading icon. */
body[data-mu-preview] .mu-v2-notice {
  --mu-notice-accent: var(--mu-popup-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #3a3f45;
  border-left: 3px solid var(--mu-notice-accent);
  border-radius: 7px;
  background: #1a2026;
  color: #eee7d8;
  font: 400 13px/1.5 var(--mu-font-body);
  overflow-wrap: anywhere;
}
body[data-mu-preview] .mu-v2-notice > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: var(--mu-notice-accent); }
body[data-mu-preview] .mu-v2-notice > :is(p,div) { margin: 0; min-width: 0; }
body[data-mu-preview] .mu-v2-notice strong { color: var(--mu-popup-text); font-weight: 700; }
body[data-mu-preview] .mu-v2-notice a { color: var(--mu-popup-gold) !important; text-decoration: underline; text-underline-offset: 2px; }
body[data-mu-preview] .mu-v2-notice.is-info { --mu-notice-accent: #7ea3c4; }
body[data-mu-preview] .mu-v2-notice.is-warn { --mu-notice-accent: #d5b77a; }
body[data-mu-preview] .mu-v2-notice.is-error { --mu-notice-accent: var(--mu-danger); }
body[data-mu-preview] .mu-v2-notice.is-success { --mu-notice-accent: #5f9a72; }
/* v2.js notice(): svg.mu-v2-notice-icon + span.mu-v2-notice-text; .mu-v2-notice-float is the transient
   error card v2.js prepends to #index_content when a '$hidden' reply is raw text. */
body[data-mu-preview] .mu-v2-notice > .mu-v2-notice-text { display: block; min-width: 0; flex: 1 1 auto; }
body[data-mu-preview] #index_content > .mu-v2-notice-float { margin: 10px 0 12px; box-shadow: 0 6px 18px #0009; }

/* Empty state: centred, one dim icon and one sentence. */
body[data-mu-preview] .mu-v2-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  min-height: 160px;
  padding: 24px 16px;
  border: 1px dashed #3a3f45;
  border-radius: 7px;
  color: #aeb4bc;
  font: 400 13px/1.5 var(--mu-font-body);
  text-align: center;
}
body[data-mu-preview] .mu-v2-empty svg { width: 36px; height: 36px; fill: #7b7f85; opacity: .6; }
body[data-mu-preview] .mu-v2-empty p { margin: 0; max-width: 34ch; }

/* Skeleton: soft charcoal shimmer, static when the user asked for less motion. */
body[data-mu-preview] .mu-v2-skeleton {
  display: block;
  min-height: 14px;
  border-radius: 5px;
  background: linear-gradient(90deg,#1e252b 0%,#2a3137 50%,#1e252b 100%);
  background-size: 200% 100%;
  color: transparent !important;
  animation: mu-v2-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-mu-preview] .mu-v2-skeleton { animation: none; background: #232a30; }
  body[data-mu-preview] .mu-v2-btn[data-loading]::after { animation-duration: 1.6s; }
}

/* Tabs: a segmented control; scrolls inside its frame when there are many tabs. */
body[data-mu-preview] .mu-v2-tabs {
  display: flex;
  flex: none;
  gap: 2px;
  max-width: 100%;
  min-height: 46px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid #77634280;
  border-radius: 7px;
  background: #151a1f;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body[data-mu-preview] .mu-v2-tabs::-webkit-scrollbar { display: none; }
body[data-mu-preview] .mu-v2-tabs > button {
  flex: 1 0 auto;
  min-width: max-content;
  min-height: 38px;
  padding: 8px 14px !important;
  margin: 0;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #c9c4ba !important;
  box-shadow: none !important;
  font: 600 13px/1.2 var(--mu-font-body) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
body[data-mu-preview] .mu-v2-tabs > button:is(:hover,:focus-visible) { background: #232a30 !important; color: var(--mu-popup-text) !important; }
body[data-mu-preview] .mu-v2-tabs > button[aria-selected="true"],
body[data-mu-preview] .mu-v2-tabs > button[aria-selected="true"]:is(:hover,:focus-visible) {
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
}

/* ------------------------------------------------------------------------ */
/* Confirm popup (contract F) mirrors the approved .vq-v2-confirm pattern.  */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] .mu-v2-popup-dialog.mu-v2-confirm {
  width: min(500px,100%) !important;
  padding: 17px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body[data-mu-preview] .mu-v2-confirm-head { display: flex; align-items: center; gap: 10px; }
body[data-mu-preview] .mu-v2-confirm-title {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  color: var(--mu-popup-text) !important;
  font: 700 18px/1.3 var(--mu-font-head) !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: anywhere;
}
body[data-mu-preview] .mu-v2-confirm-body { display: grid; gap: 13px; color: var(--mu-popup-text); }
body[data-mu-preview] .mu-v2-confirm-html { color: #e1dcd1; font: 400 13px/1.55 var(--mu-font-body); overflow-wrap: anywhere; }
body[data-mu-preview] .mu-v2-confirm-html p { margin: 0 0 6px; }
body[data-mu-preview] .mu-v2-confirm-html p:last-child { margin-bottom: 0; }
body[data-mu-preview] .mu-v2-confirm-html b,
body[data-mu-preview] .mu-v2-confirm-html strong { color: #f2d49b; }
body[data-mu-preview] .mu-v2-confirm-summary {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid #665438;
  border-radius: 7px;
  background: #171e22;
}
body[data-mu-preview] .mu-v2-confirm-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
body[data-mu-preview] .mu-v2-confirm-summary dt { margin: 0; color: #b8b8b6; font: 400 12px/1.35 var(--mu-font-body); }
body[data-mu-preview] .mu-v2-confirm-summary dd {
  margin: 0;
  color: var(--mu-popup-text);
  font: 700 17px/1.3 var(--mu-font-head);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
body[data-mu-preview] .mu-v2-confirm-summary > div:last-child dd { color: var(--mu-popup-gold); }
body[data-mu-preview] .mu-v2-confirm-hint { margin: 0; color: #c9c4ba; font: 400 12px/1.5 var(--mu-font-body); }
body[data-mu-preview] .mu-v2-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #fff5e2;
  font: 600 12px/1.45 var(--mu-font-body);
  cursor: pointer;
}
body[data-mu-preview] .mu-v2-confirm-check input {
  flex: none;
  width: 19px;
  height: 19px;
  min-height: 19px !important;
  margin: 0;
  accent-color: #d5b77a;
  cursor: pointer;
}
body[data-mu-preview] .mu-v2-confirm-check span { min-width: 0; }
/* Empty slots collapse so the layout stays tight without JS bookkeeping. */
body[data-mu-preview] :is(.mu-v2-confirm-html,.mu-v2-confirm-summary,.mu-v2-confirm-hint):empty { display: none; }
body[data-mu-preview] .mu-v2-confirm-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px; }
body[data-mu-preview] .mu-v2-confirm-actions > :only-child { grid-column: 1 / -1; }
body[data-mu-preview] .mu-v2-confirm-actions .mu-v2-btn { min-height: 43px; }
/* Danger variant: irreversible actions trade gold for a muted red edge and action. */
body[data-mu-preview] .mu-v2-popup-dialog.mu-v2-confirm-danger { border-color: #8a4a4a !important; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-confirm-title { color: #f3d9d9 !important; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-confirm-summary { border-color: #6b4343; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-confirm-summary > div:last-child dd { color: #f3d9d9; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-confirm-check input { accent-color: var(--mu-danger); }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-btn-primary,
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-btn-primary:is(:hover,:focus-visible) {
  border-color: #c96a6a !important;
  background: var(--mu-danger) !important;
  color: #fff8f0 !important;
  filter: none;
}
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-btn-primary:is(:hover,:focus-visible) { background: #c05c5c !important; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-btn-primary[data-loading]::after { border-color: rgba(255,248,240,.3); border-top-color: #fff8f0; }

/* General sheet (contract G): head + scrolling body + actions. */
body[data-mu-preview] .mu-v2-popup-dialog.mu-v2-sheet {
  width: min(540px,100%) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
body[data-mu-preview] .mu-v2-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 15px 17px 11px;
  border-bottom: 1px solid #3a3f45;
}
body[data-mu-preview] .mu-v2-sheet-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  color: var(--mu-popup-text) !important;
  font: 700 18px/1.3 var(--mu-font-head) !important;
  overflow-wrap: anywhere;
}
body[data-mu-preview] .mu-v2-sheet-head p { margin: 3px 0 0; color: var(--mu-popup-muted); font: 500 11px/1.4 var(--mu-font-body); }
body[data-mu-preview] .mu-v2-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 13px 17px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
  color: #e1dcd1;
  font: 400 13px/1.55 var(--mu-font-body);
}
body[data-mu-preview] .mu-v2-sheet-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  gap: 9px;
  flex: none;
  padding: 11px 17px max(15px,env(safe-area-inset-bottom));
  border-top: 1px solid #3a3f45;
  background: var(--mu-popup-bg);
}
body[data-mu-preview] .mu-v2-sheet-actions:empty { display: none; }
/* Language sheet (v2.js showLanguages): flag cards in the hub grid, the active one marked gold. */
body[data-mu-preview] .mu-v2-lang-sheet .mu-v2-lang-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body[data-mu-preview] .mu-v2-lang-item { min-height: 52px !important; padding: 10px 12px !important; gap: 10px !important; font-size: 13px !important; }
body[data-mu-preview] .mu-v2-lang-item .mu-v2-lang-flag { width: 24px; height: 18px; min-width: 24px; object-fit: cover; border-radius: 3px; border: 1px solid #3a3f45; }
body[data-mu-preview] .mu-v2-lang-item[aria-current="true"] { border-color: var(--mu-popup-gold) !important; box-shadow: inset 3px 0 var(--mu-popup-gold) !important; cursor: default; }
body[data-mu-preview] .mu-v2-lang-item .mu-v2-lang-current { margin-left: auto; color: var(--mu-popup-gold); font: 600 11px/1.2 var(--mu-font-body); white-space: nowrap; }
@media (max-width:480px) { body[data-mu-preview] .mu-v2-lang-sheet .mu-v2-lang-list { grid-template-columns: minmax(0,1fr); } }
/* v2.js sheets/confirms follow the visual viewport (--mu-top/--mu-h from visualViewport): when the iOS keyboard
   opens the layer shrinks to the visible area and the panel stays above the keys. Page-owned layers are untouched. */
body[data-mu-preview] .mu-v2-popup-layer:is(.mu-v2-sheet-layer,.mu-v2-confirm-layer) {
  top: var(--mu-top,0px);
  bottom: auto;
  height: 100%;
  height: var(--mu-h,100dvh);
}
@media (max-width:700px) and (orientation:portrait) {
  body[data-mu-preview] .mu-v2-popup-dialog:is(.mu-v2-sheet,.mu-v2-confirm) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    max-height: min(80dvh, calc(var(--mu-h,100dvh) - 12px)) !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: 0 !important;
  }
  body[data-mu-preview] .mu-v2-popup-dialog.mu-v2-confirm { padding: 15px 15px max(15px,env(safe-area-inset-bottom)) !important; }
  body[data-mu-preview] .mu-v2-sheet-head { padding-top: 6px; }
  body[data-mu-preview] .mu-v2-confirm-actions { grid-template-columns: 1fr 1.25fr; }
}
@media (max-height:520px) and (min-width:600px) and (orientation:landscape) {
  body[data-mu-preview] .mu-v2-popup-dialog:is(.mu-v2-sheet,.mu-v2-confirm) {
    width: min(460px,60vw) !important;
    max-height: 100% !important;
    border-radius: 9px !important;
  }
  body[data-mu-preview] .mu-v2-popup-dialog.mu-v2-confirm { padding: 12px 14px !important; gap: 9px; }
  body[data-mu-preview] .mu-v2-sheet-head { padding: 10px 14px 8px; }
  body[data-mu-preview] .mu-v2-sheet-body { padding: 10px 14px; }
  body[data-mu-preview] .mu-v2-sheet-actions { padding: 8px 14px 10px; }
}

/* ------------------------------------------------------------------------ */
/* #modal-popup (SPAY.showModal): ID selectors beat the white-glass CSS that */
/* main.js injects into <head>; the Bootstrap centring becomes a sheet.     */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] #modal-popup.modal { padding: 0 !important; }
body[data-mu-preview] #modal-popup .modal-dialog {
  max-width: min(540px,calc(100% - 24px)) !important;
  width: 100%;
  margin: 12px auto !important;
  min-height: calc(100% - 24px);
}
body[data-mu-preview] #modal-popup .modal-content {
  position: relative;
  border: 1px solid var(--mu-popup-border) !important;
  border-radius: 10px !important;
  background: var(--mu-popup-bg) !important;
  color: var(--mu-popup-text) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-height: calc(var(--mu-h,100dvh) - 24px) !important;
  overflow: hidden !important;
  font-family: var(--mu-font-body);
}
body[data-mu-preview] #modal-popup .modal-header {
  min-height: 56px;
  padding: 12px 56px 12px 17px !important;
  border-bottom: 1px solid #3a3f45 !important;
  background: transparent !important;
  color: var(--mu-popup-text) !important;
}
body[data-mu-preview] #modal-popup .modal-header .modal-title {
  margin: 0;
  color: var(--mu-popup-text) !important;
  font: 700 18px/1.3 var(--mu-font-head) !important;
}
body[data-mu-preview] #modal-popup .modal-header .btn-close { display: none !important; }
body[data-mu-preview] #modal-popup .modal-body {
  padding: 15px 17px !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
  color: var(--mu-popup-text);
}
/* Without a header the first block keeps clear of the corner X. */
body[data-mu-preview] #modal-popup .modal-content > .spay-neo-close + .modal-body { padding-top: 54px !important; }
body[data-mu-preview] #modal-popup .modal-footer {
  padding: 11px 17px max(15px,env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #3a3f45 !important;
  background: transparent !important;
  gap: 9px;
}
body[data-mu-preview] #modal-popup .spay-neo-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 20;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #796444 !important;
  border-radius: 7px !important;
  background: #2b302e !important;
  color: var(--mu-popup-gold) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  transition: border-color .15s, background .15s !important;
  overflow: hidden;
  cursor: pointer;
}
body[data-mu-preview] #modal-popup .spay-neo-close :is(i,svg) { display: none !important; }
body[data-mu-preview] #modal-popup .spay-neo-close::before,
body[data-mu-preview] #modal-popup .spay-neo-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  border-radius: 2px;
  background: var(--mu-popup-gold);
  transform: translate(-50%,-50%) rotate(45deg);
}
body[data-mu-preview] #modal-popup .spay-neo-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
body[data-mu-preview] #modal-popup .spay-neo-close:is(:hover,:focus-visible) {
  border-color: var(--mu-popup-gold) !important;
  background: #3b3326 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Content rendered into the modal follows the same dark form language as pages. */
body[data-mu-preview] #modal-popup :is(h1,h2,h3,h4,h5,.t-popup_title) { color: var(--mu-popup-text) !important; font-family: var(--mu-font-head) !important; }
body[data-mu-preview] #modal-popup :is(.text-muted,small,.form-text) { color: var(--mu-popup-muted) !important; }
body[data-mu-preview] #modal-popup :is(.form-control,.form-select,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea) {
  color: var(--mu-popup-text) !important;
  background: #10151b !important;
  border: 1px solid #776342 !important;
  border-radius: 4px !important;
  min-height: 44px;
  box-shadow: none !important;
  font: 400 16px/1.4 var(--mu-font-body) !important;
}
body[data-mu-preview] #modal-popup :is(.btn-primary,.btn-primary-s1,.btn-success) {
  min-height: 44px;
  border: 1px solid #f0d5a0 !important;
  border-radius: 6px !important;
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
}
body[data-mu-preview] #modal-popup :is(.btn-secondary,.btn-light,.btn-default,[class*="btn-outline-"]) {
  min-height: 44px;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #292f31 !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
}
body[data-mu-preview] #modal-popup :is(.btn-danger,.btn-outline-danger) {
  min-height: 44px;
  border: 1px solid #8a4a4a !important;
  border-radius: 6px !important;
  background: #2b2424 !important;
  color: #f3d9d9 !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
}
body[data-mu-preview] #modal-popup :is(.table,.table td,.table th) { color: var(--mu-popup-text) !important; border-color: #3a3f45 !important; background: transparent !important; }
body[data-mu-preview] #modal-popup :is(.card,.card-body,.list-group-item,.alert) { background: #171e22 !important; border-color: #3a3f45 !important; color: var(--mu-popup-text) !important; box-shadow: none !important; }
@media (max-width:700px) and (orientation:portrait) {
  body[data-mu-preview] #modal-popup .modal-dialog {
    display: flex !important;
    align-items: flex-end !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
  }
  body[data-mu-preview] #modal-popup .modal-content {
    width: 100% !important;
    max-height: 80dvh !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: 0 !important;
  }
  body[data-mu-preview] #modal-popup .modal-body { padding-bottom: max(15px,env(safe-area-inset-bottom)) !important; }
  body[data-mu-preview] #modal-popup .spay-neo-close { top: 19px !important; }
  body[data-mu-preview] #modal-popup .modal-content > .spay-neo-close + .modal-body { padding-top: 66px !important; }
}
@media (max-height:520px) and (min-width:600px) and (orientation:landscape) {
  body[data-mu-preview] #modal-popup .modal-dialog {
    display: flex !important;
    align-items: stretch !important;
    max-width: min(460px,60vw) !important;
    height: calc(100% - 10px) !important;
    min-height: calc(100% - 10px) !important;
    margin: 5px 5px 5px auto !important;
  }
  body[data-mu-preview] #modal-popup .modal-content { max-height: 100% !important; border-radius: 9px !important; }
  body[data-mu-preview] #modal-popup .modal-body { padding: 12px 14px !important; }
}

/* ------------------------------------------------------------------------ */
/* SweetAlert2 via SPAY (swal-neo-*): one rule set at >= (0,4,1) so it beats  */
/* main.css and the shell's inline iOS block. No #index_content dependency.  */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] .swal2-container.swal2-backdrop-show,
body[data-mu-preview] .swal2-container.swal-neo-container {
  background: rgba(5,9,14,.86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 12000 !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog,
body[data-mu-preview] .swal2-popup.swal-neo-confirm,
body[data-mu-preview] .swal2-popup.swal-neo-alert,
body[data-mu-preview] .swal2-popup.swal-compact {
  width: min(420px,calc(100vw - 24px)) !important;
  padding: 18px 17px 16px !important;
  border: 1px solid var(--mu-popup-border) !important;
  border-radius: 10px !important;
  background: var(--mu-popup-bg) !important;
  color: var(--mu-popup-text) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--mu-font-body) !important;
  overscroll-behavior: contain;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Title and text are ivory whatever the icon; main.css/inline tinted them. */
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-title,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon ~ .swal2-title,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error ~ .swal2-title,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-success ~ .swal2-title,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-warning ~ .swal2-title,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-info ~ .swal2-title,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-question ~ .swal2-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mu-popup-text) !important;
  font: 700 18px/1.3 var(--mu-font-head) !important;
  text-align: center !important;
  overflow-wrap: anywhere;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-html-container {
  max-width: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  color: #e1dcd1 !important;
  font: 400 13px/1.55 var(--mu-font-body) !important;
  text-align: center !important;
  overflow-wrap: anywhere;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-html-container :is(b,strong) { color: #f2d49b; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-html-container a { color: var(--mu-popup-gold) !important; text-decoration: underline; }
/* Icons: one thin ring in a muted semantic colour on charcoal, glyph inside. */
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon {
  --mu-swal-accent: #7ea3c4;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: none !important;
  margin: 0 auto 12px !important;
  border: 1.5px solid var(--mu-swal-accent) !important;
  border-radius: 50% !important;
  background: #151a1f !important;
  color: var(--mu-swal-accent) !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
  animation: none !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error { --mu-swal-accent: var(--mu-danger); }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-success { --mu-swal-accent: #5f9a72; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-warning { --mu-swal-accent: #d5b77a; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-info { --mu-swal-accent: #7ea3c4; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-question { --mu-swal-accent: #a58ac9; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon .swal2-icon-content {
  position: static !important;
  margin: 0 !important;
  color: var(--mu-swal-accent) !important;
  font: 700 20px/1 var(--mu-font-head) !important;
}
/* Error: SweetAlert's own two bars become the thin cross; inline glyphs are dropped. */
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error::before,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error::after,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-warning::before,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-warning::after,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-info::before,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-info::after,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-question::before,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-question::after { content: none !important; display: none !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error .swal2-x-mark {
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--mu-swal-accent) !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error .swal2-x-mark-line-left { transform: rotate(45deg) !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error .swal2-x-mark-line-right { transform: rotate(-45deg) !important; }
/* Success: keep the two tick lines, drop the animated ring/fix helpers. */
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-success :is(.swal2-success-ring,.swal2-success-fix,[class^="swal2-success-circular-line"]) { display: none !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-success [class^="swal2-success-line"] {
  display: block !important;
  position: absolute !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--mu-swal-accent) !important;
  animation: none !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-success .swal2-success-line-tip {
  width: 10px !important;
  top: 21px !important;
  left: 11px !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-success .swal2-success-line-long {
  width: 17px !important;
  top: 28px !important;
  left: 18px !important;
  transform: rotate(-45deg) !important;
  transform-origin: left center !important;
}
/* Actions: same two-button rhythm as the confirm popup. */
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions.swal-neo-actions {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  gap: 9px !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions:has(.swal-neo-btn-cancel:not([style*="display: none"])) { grid-template-columns: 1fr 1.4fr; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #292f31 !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  transform: none !important;
  filter: none !important;
  transition: border-color .15s, background .15s !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn-cancel { grid-column: 1; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn-cancel:is(:hover,:focus-visible) { border-color: var(--mu-popup-border) !important; background: #323836 !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn-confirm,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn-confirm:is(:hover,:focus-visible) {
  border-color: #f0d5a0 !important;
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn-confirm:is(:hover,:focus-visible) { filter: brightness(1.06) !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn:focus-visible { outline: 2px solid var(--mu-popup-gold) !important; outline-offset: 2px !important; box-shadow: none !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions .swal-neo-btn:disabled { opacity: .5 !important; cursor: not-allowed; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-close { display: none !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog.mu-v2-has-injected-close { padding-top: 22px !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog.mu-v2-has-injected-close .swal2-header { padding-right: 0 !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog.mu-v2-has-injected-close .swal2-title { padding: 0 44px !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog :is(.swal2-input,.swal2-textarea,.swal2-select) {
  min-height: 44px;
  margin: 12px 0 0 !important;
  border: 1px solid #776342 !important;
  border-radius: 4px !important;
  background: #10151b !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
  font: 400 16px/1.4 var(--mu-font-body) !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-validation-message { background: #2b2424 !important; color: #f3d9d9 !important; }
@media (max-width:700px) and (orientation:portrait) {
  body[data-mu-preview] .swal2-container.swal-neo-container,
  body[data-mu-preview] .swal2-container.swal2-backdrop-show {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  body[data-mu-preview] .swal2-popup.swal-neo-dialog,
  body[data-mu-preview] .swal2-popup.swal-neo-confirm,
  body[data-mu-preview] .swal2-popup.swal-neo-alert,
  body[data-mu-preview] .swal2-popup.swal-compact {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80dvh !important;
    margin: 0 !important;
    padding: 22px 15px max(16px,env(safe-area-inset-bottom)) !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: 0 !important;
    overflow-y: auto;
  }
}
@media (max-height:520px) and (min-width:600px) and (orientation:landscape) {
  body[data-mu-preview] .swal2-container.swal-neo-container,
  body[data-mu-preview] .swal2-container.swal2-backdrop-show {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 5px !important;
  }
  body[data-mu-preview] .swal2-popup.swal-neo-dialog,
  body[data-mu-preview] .swal2-popup.swal-neo-confirm,
  body[data-mu-preview] .swal2-popup.swal-neo-alert,
  body[data-mu-preview] .swal2-popup.swal-compact {
    width: min(460px,60vw) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 9px !important;
    overflow-y: auto;
  }
  body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; margin-bottom: 8px !important; }
  body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-actions { margin-top: 10px !important; }
}

/* ------------------------------------------------------------------------ */
/* select2: the dropdown is appended to body, so the scope stops at body.   */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] .select2-container { font-family: var(--mu-font-body); }
body[data-mu-preview] .select2-container--default .select2-selection--single,
body[data-mu-preview] .select2-container--default .select2-selection--multiple {
  min-height: 44px;
  height: auto;
  border: 1px solid #776342 !important;
  border-radius: 4px !important;
  background: #10151b !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
  outline: 0;
}
body[data-mu-preview] .select2-container--default.select2-container--focus .select2-selection--single,
body[data-mu-preview] .select2-container--default.select2-container--focus .select2-selection--multiple,
body[data-mu-preview] .select2-container--default.select2-container--open .select2-selection--single,
body[data-mu-preview] .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #e0bd7a !important;
  box-shadow: 0 0 0 2px #e0bd7a31 !important;
}
body[data-mu-preview] .select2-container--default .select2-selection--single .select2-selection__rendered {
  min-height: 42px;
  padding: 0 40px 0 12px;
  color: var(--mu-popup-text) !important;
  font: 400 16px/42px var(--mu-font-body);
}
body[data-mu-preview] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ea3a6 !important; }
body[data-mu-preview] .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--mu-popup-gold) !important; margin-right: 6px; font-weight: 400; }
body[data-mu-preview] .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 4px; width: 32px; height: 42px; }
body[data-mu-preview] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--mu-popup-gold) transparent transparent transparent;
  border-width: 6px 5px 0 5px;
  margin-left: -5px;
  margin-top: -3px;
}
body[data-mu-preview] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--mu-popup-gold) transparent;
  border-width: 0 5px 6px 5px;
}
body[data-mu-preview] .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 3px 8px; }
body[data-mu-preview] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 4px 4px 0 0;
  border: 1px solid #665438 !important;
  border-radius: 5px;
  background: #292f31 !important;
  color: var(--mu-popup-text) !important;
  font-size: 14px;
}
body[data-mu-preview] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--mu-popup-gold) !important; }
body[data-mu-preview] .select2-container--default .select2-search--inline .select2-search__field { color: var(--mu-popup-text) !important; font: 400 16px/1.4 var(--mu-font-body) !important; margin-top: 8px; }
body[data-mu-preview] .select2-container--default.select2-container--disabled .select2-selection--single { background: #171b1f !important; opacity: .55; cursor: not-allowed; }
body[data-mu-preview] .select2-container .select2-dropdown {
  z-index: 12500;
  border: 1px solid var(--mu-popup-border) !important;
  border-radius: 6px !important;
  background: var(--mu-popup-bg) !important;
  color: var(--mu-popup-text) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  overflow: hidden;
}
body[data-mu-preview] .select2-container .select2-dropdown--below { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
body[data-mu-preview] .select2-container .select2-dropdown--above { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body[data-mu-preview] .select2-container--default .select2-search--dropdown { padding: 8px; }
body[data-mu-preview] .select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #776342 !important;
  border-radius: 4px !important;
  background: #10151b !important;
  color: var(--mu-popup-text) !important;
  font: 400 16px/1.4 var(--mu-font-body) !important;
  outline: 0;
}
body[data-mu-preview] .select2-container--default .select2-results > .select2-results__options {
  max-height: min(280px,50dvh);
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
}
body[data-mu-preview] .select2-container--default .select2-results__option {
  min-height: 44px;
  padding: 11px 12px;
  color: var(--mu-popup-text);
  font: 400 16px/1.35 var(--mu-font-body);
  border-bottom: 1px solid #23292f;
}
body[data-mu-preview] .select2-container--default .select2-results__option:last-child { border-bottom: 0; }
body[data-mu-preview] .select2-container--default .select2-results__option--highlighted[aria-selected],
body[data-mu-preview] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: #33301f !important;
  color: var(--mu-popup-text) !important;
}
body[data-mu-preview] .select2-container--default .select2-results__option[aria-selected="true"],
body[data-mu-preview] .select2-container--default .select2-results__option--selected {
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
  font-weight: 600;
}
body[data-mu-preview] .select2-container--default .select2-results__option[aria-disabled="true"] { color: #7b7f85; }
body[data-mu-preview] .select2-container--default .select2-results__group { color: var(--mu-popup-muted); font: 700 12px/1.3 var(--mu-font-head); padding: 8px 12px 4px; }
body[data-mu-preview] .select2-container--default .select2-results__message { color: var(--mu-popup-muted); }

/* ------------------------------------------------------------------------ */
/* Bootstrap popover / tooltip (item tooltips, input-error popovers).       */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] .popover {
  --bs-popover-bg: var(--mu-popup-bg);
  --bs-popover-border-color: var(--mu-popup-border);
  --bs-popover-border-radius: 8px;
  --bs-popover-header-bg: #20262a;
  --bs-popover-header-color: var(--mu-popup-text);
  --bs-popover-body-color: var(--mu-popup-text);
  --bs-popover-arrow-border: var(--mu-popup-border);
  background: var(--mu-popup-bg) !important;
  border: 1px solid var(--mu-popup-border) !important;
  border-radius: 8px !important;
  color: var(--mu-popup-text) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  font-family: var(--mu-font-body);
}
body[data-mu-preview] .popover .popover-header {
  color: var(--mu-popup-text) !important;
  background: #20262a !important;
  border-bottom: 1px solid #3a3f45 !important;
  font: 700 13px/1.3 var(--mu-font-head);
}
body[data-mu-preview] .popover .popover-body { color: var(--mu-popup-text) !important; font-size: 13px; line-height: 1.5; }
body[data-mu-preview] .popover .popover-body .text-red { color: #f0a3a3 !important; }
body[data-mu-preview] .popover[data-popper-placement^="top"] > .popover-arrow::before { border-top-color: var(--mu-popup-border) !important; }
body[data-mu-preview] .popover[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: var(--mu-popup-bg) !important; }
body[data-mu-preview] .popover[data-popper-placement^="right"] > .popover-arrow::before { border-right-color: var(--mu-popup-border) !important; }
body[data-mu-preview] .popover[data-popper-placement^="right"] > .popover-arrow::after { border-right-color: var(--mu-popup-bg) !important; }
body[data-mu-preview] .popover[data-popper-placement^="bottom"] > .popover-arrow::before { border-bottom-color: var(--mu-popup-border) !important; }
body[data-mu-preview] .popover[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--mu-popup-bg) !important; }
body[data-mu-preview] .popover[data-popper-placement^="bottom"] .popover-header::before { border-bottom-color: #20262a !important; }
body[data-mu-preview] .popover[data-popper-placement^="left"] > .popover-arrow::before { border-left-color: var(--mu-popup-border) !important; }
body[data-mu-preview] .popover[data-popper-placement^="left"] > .popover-arrow::after { border-left-color: var(--mu-popup-bg) !important; }
body[data-mu-preview] .tooltip {
  --bs-tooltip-bg: var(--mu-popup-bg);
  --bs-tooltip-color: var(--mu-popup-text);
  --bs-tooltip-border-radius: 6px;
  --bs-tooltip-opacity: 1;
  font-family: var(--mu-font-body);
}
body[data-mu-preview] .tooltip .tooltip-inner {
  background: var(--mu-popup-bg) !important;
  border: 1px solid var(--mu-popup-border);
  border-radius: 6px;
  color: var(--mu-popup-text) !important;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
body[data-mu-preview] .bs-tooltip-top .tooltip-arrow::before, body[data-mu-preview] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--mu-popup-border) !important; }
body[data-mu-preview] .bs-tooltip-bottom .tooltip-arrow::before, body[data-mu-preview] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--mu-popup-border) !important; }
body[data-mu-preview] .bs-tooltip-start .tooltip-arrow::before, body[data-mu-preview] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--mu-popup-border) !important; }
body[data-mu-preview] .bs-tooltip-end .tooltip-arrow::before, body[data-mu-preview] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--mu-popup-border) !important; }
/* Item tooltips keep their per-option text colours; only the frame changes. */
body[data-mu-preview] .popover .t-item-tooltip { color: inherit; }

/* Invalid fields: a muted red hairline, and the captcha image sits in a charcoal frame. */
body[data-mu-preview] #index_content :is(.form-control.is-invalid,.form-select.is-invalid,.is-invalid .form-control,.is-invalid .form-select,.is-invalid > input:not([type=hidden]):not([type=checkbox]):not([type=radio]),input.is-invalid,select.is-invalid,textarea.is-invalid) {
  border-color: var(--mu-danger) !important;
  background-color: #1a1417 !important;
  background-image: none !important;
  box-shadow: none !important;
}
body[data-mu-preview] #index_content :is(.form-control.is-invalid,.is-invalid .form-control):focus { box-shadow: 0 0 0 2px #b4525240 !important; }
body[data-mu-preview] #index_content .invalid-feedback { color: #f0a3a3 !important; font-size: 12px; }
body[data-mu-preview] #index_content .is-invalid .form-check-input { border-color: var(--mu-danger) !important; }
body[data-mu-preview] #index_content img.captcha_img {
  display: inline-block;
  height: 44px;
  padding: 3px;
  border: 1px solid #776342;
  border-radius: 4px;
  background: #e8e2d6;
  vertical-align: middle;
  cursor: pointer;
}

/* ------------------------------------------------------------------------ */
/* Forms in page content: checkbox accent, legacy buttons mapped to .mu-v2-btn. */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] #index_content .form-check-input,
body[data-mu-preview] #index_content input:is([type=checkbox],[type=radio]) {
  width: 19px;
  height: 19px;
  min-width: 19px;
  min-height: 19px !important;
  margin-top: 0;
  border: 1px solid #8a7a5c !important;
  background-color: #10151b !important;
  accent-color: #d5b77a;
  box-shadow: none !important;
  cursor: pointer;
  flex: none;
}
body[data-mu-preview] #index_content .form-check-input:is([type=checkbox]) { border-radius: 4px !important; }
body[data-mu-preview] #index_content .form-check-input:is([type=radio]) { border-radius: 50% !important; }
body[data-mu-preview] #index_content .form-check-input:checked {
  background-color: #d5b77a !important;
  border-color: #e0bd7a !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23251d12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
body[data-mu-preview] #index_content .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23251d12'/%3e%3c/svg%3e") !important;
}
body[data-mu-preview] #index_content .form-check-input:focus-visible { outline: 2px solid var(--mu-popup-gold) !important; outline-offset: 2px !important; }
body[data-mu-preview] #index_content .form-check { display: flex; align-items: flex-start; gap: 9px; padding-left: 0; min-height: 0; }
body[data-mu-preview] #index_content .form-check .form-check-input { margin: 1px 0 0; float: none; }
body[data-mu-preview] #index_content :is(.form-check-label,.form-switch .form-check-label) { color: #e1dcd1 !important; cursor: pointer; }
body[data-mu-preview] #index_content .form-switch .form-check-input { width: 36px; border-radius: 19px !important; }
body[data-mu-preview] #index_content .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23251d12'/%3e%3c/svg%3e") !important;
}
body[data-mu-preview] #index_content :is(label,.form-label,.col-form-label) { color: #d6d0c3; }
body[data-mu-preview] #index_content :is(.form-control,.form-select,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea)::placeholder { color: #9ea3a6; }
body[data-mu-preview] #index_content :is(.form-control,.form-select,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea):focus {
  border-color: #e0bd7a !important;
  box-shadow: 0 0 0 2px #e0bd7a31 !important;
}
body[data-mu-preview] #index_content :is(.form-control,.form-select,input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea):is(:disabled,[readonly]) { opacity: .6; background: #171b1f !important; }
body[data-mu-preview] #index_content :is(.form-control-s1,.form-control-s2) { padding-top: 10px !important; }
body[data-mu-preview] #index_content :is(.input-group-text,.form-floating > label) { color: var(--mu-popup-muted) !important; background: #171b1f !important; border-color: #776342 !important; }
/* Primary/secondary Bootstrap buttons take the shared V2 button shape. */
body[data-mu-preview] #index_content :is(.btn-primary-s1,.btn-primary,.btn-success,.btn-info,.btn-warning,[class*="-neo-submit"]) {
  position: relative;
  min-height: 44px;
  padding: 9px 16px !important;
  top: auto !important;
  left: auto !important;
  border: 1px solid #f0d5a0 !important;
  border-radius: 6px !important;
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  transition: filter .15s;
}
body[data-mu-preview] #index_content :is(.btn-primary-s1,.btn-primary,.btn-success,.btn-info,.btn-warning,[class*="-neo-submit"]):is(:hover,:focus-visible) {
  top: auto !important;
  left: auto !important;
  border-color: #f0d5a0 !important;
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
  box-shadow: none !important;
  filter: brightness(1.06);
}
body[data-mu-preview] #index_content :is(.btn-primary-s1,.btn-primary,.btn-success) :is(path,circle) { fill: #251d12 !important; }
body[data-mu-preview] #index_content :is(.btn-primary-s1,.btn-primary,.btn-success):is(:hover,:focus) :is(path,circle) { fill: #251d12 !important; }
body[data-mu-preview] #index_content :is(.btn-primary-s1,.btn-primary,.btn-success) :is(svg,i) { color: #251d12 !important; }
body[data-mu-preview] #index_content :is(.btn-secondary,.btn-light,.btn-default,.btn-dark,.btn-ghost-dark,[class*="btn-outline-"]) {
  position: relative;
  min-height: 44px;
  padding: 9px 16px !important;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #292f31 !important;
  color: var(--mu-popup-text) !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: border-color .15s, background .15s;
}
body[data-mu-preview] #index_content :is(.btn-secondary,.btn-light,.btn-default,.btn-dark,.btn-ghost-dark,[class*="btn-outline-"]):is(:hover,:focus-visible) {
  border-color: var(--mu-popup-border) !important;
  background: #323836 !important;
  color: var(--mu-popup-text) !important;
}
body[data-mu-preview] #index_content :is(.btn-danger,.btn-outline-danger) {
  min-height: 44px;
  padding: 9px 16px !important;
  border: 1px solid #8a4a4a !important;
  border-radius: 6px !important;
  background: #2b2424 !important;
  color: #f3d9d9 !important;
  box-shadow: none !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
}
body[data-mu-preview] #index_content :is(.btn-danger,.btn-outline-danger):is(:hover,:focus-visible) { border-color: var(--mu-danger) !important; background: #342828 !important; color: #f3d9d9 !important; }
body[data-mu-preview] #index_content .btn-sm { min-height: 36px; padding: 6px 12px !important; font-size: 12px !important; }
body[data-mu-preview] #index_content .btn-lg { min-height: 50px; font-size: 15px !important; }
body[data-mu-preview] #index_content .btn:is(:disabled,.disabled,[aria-disabled="true"]),
body[data-mu-preview] #index_content .btn-primary-s1:is(:disabled,.disabled) {
  opacity: .5 !important;
  filter: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
/* Ladda: dark spinner on the gold action, gold spinner on charcoal buttons. */
body[data-mu-preview] .ladda-button[data-loading] { pointer-events: none; }
body[data-mu-preview] .ladda-button[data-loading] .ladda-label { opacity: .45; }
body[data-mu-preview] .ladda-spinner > div > div { background: var(--mu-popup-gold) !important; }
body[data-mu-preview] :is(.mu-v2-btn-primary,#index_content .btn-primary,#index_content .btn-primary-s1,#index_content .btn-success,#index_content [class*="-neo-submit"],#modal-popup .btn-primary,.swal-neo-btn-confirm) .ladda-spinner > div > div { background: #251d12 !important; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-btn-primary .ladda-spinner > div > div { background: #fff8f0 !important; }

/* ------------------------------------------------------------------------ */
/* Tables (contract H): the frame scrolls, the page never does; numbers do   */
/* not break mid-figure. .mu-v2-table adds phone rows that expand on tap.   */
/* Luật table.mu-v2-table + nút mở dòng áp cả trong popup (sheet/confirm    */
/* .mu-v2-popup-layer và #modal-popup) vì muV2.tables(root) rút gọn cả ở đó. */
/* Nhánh .mu-v2-popup-layer chỉ (0,n,m) → luật riêng của trang vẫn thắng.   */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] #index_content .table-responsive {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
}
body[data-mu-preview] #index_content .table :is(td,th) {
  white-space: normal !important;
  overflow-wrap: break-word;
  vertical-align: middle;
}
body[data-mu-preview] #index_content .table :is(td.num,th.num,td[data-mu-num],th[data-mu-num],td.text-nowrap,th.text-nowrap) {
  white-space: nowrap !important;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
body[data-mu-preview] #index_content .table > thead th,
body[data-mu-preview] #index_content .table > :not(caption) > * > th {
  color: var(--mu-muted,#aeb4bc) !important;
  background: #151a1f !important;
  border-bottom: 1px solid #77634270 !important;
  font: 700 12px/1.3 var(--mu-font-head) !important;
  letter-spacing: .02em;
}
body[data-mu-preview] #index_content .table > tbody > tr > td { border-color: #2a3036 !important; }
body[data-mu-preview] #index_content table.mu-v2-table,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table,
body[data-mu-preview] #modal-popup table.mu-v2-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #f5f0e6;
  font: 400 13px/1.4 var(--mu-font-body);
}
body[data-mu-preview] #index_content table.mu-v2-table > thead th,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table > thead th,
body[data-mu-preview] #modal-popup table.mu-v2-table > thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 10px;
  color: #aeb4bc;
  background: #151a1f;
  border-bottom: 1px solid #77634270;
  font: 700 12px/1.3 var(--mu-font-head);
  letter-spacing: .02em;
  text-align: left;
  white-space: nowrap;
}
body[data-mu-preview] #index_content table.mu-v2-table > tbody > tr > td,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table > tbody > tr > td,
body[data-mu-preview] #modal-popup table.mu-v2-table > tbody > tr > td {
  height: 44px;
  padding: 6px 10px;
  border-bottom: 1px solid #2a3036;
  vertical-align: middle;
  background: transparent;
}
body[data-mu-preview] #index_content table.mu-v2-table > tbody > tr:not(.mu-v2-row-more):hover > td,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table > tbody > tr:not(.mu-v2-row-more):hover > td,
body[data-mu-preview] #modal-popup table.mu-v2-table > tbody > tr:not(.mu-v2-row-more):hover > td { background: #1c2227; }
body[data-mu-preview] #index_content table.mu-v2-table :is(.num,[data-mu-num]),
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table :is(.num,[data-mu-num]),
body[data-mu-preview] #modal-popup table.mu-v2-table :is(.num,[data-mu-num]) { text-align: right; }
body[data-mu-preview] #index_content table.mu-v2-table tr[aria-expanded],
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr[aria-expanded],
body[data-mu-preview] #modal-popup table.mu-v2-table tr[aria-expanded] { cursor: pointer; }
body[data-mu-preview] #index_content table.mu-v2-table tr[aria-expanded="true"] > td,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr[aria-expanded="true"] > td,
body[data-mu-preview] #modal-popup table.mu-v2-table tr[aria-expanded="true"] > td { background: #1c2227; border-bottom-color: transparent; }
body[data-mu-preview] #index_content table.mu-v2-table tr[aria-expanded="true"] > td:first-child,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr[aria-expanded="true"] > td:first-child,
body[data-mu-preview] #modal-popup table.mu-v2-table tr[aria-expanded="true"] > td:first-child { box-shadow: inset 3px 0 var(--mu-gold,#d5b77a); }
body[data-mu-preview] #index_content table.mu-v2-table :is(.mu-v2-col-hidden,th[hidden],td[hidden]),
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table :is(.mu-v2-col-hidden,th[hidden],td[hidden]),
body[data-mu-preview] #modal-popup table.mu-v2-table :is(.mu-v2-col-hidden,th[hidden],td[hidden]) { display: none !important; }
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more > td,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more > td,
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more > td {
  height: auto;
  padding: 10px 12px 12px 15px;
  background: #151a1f;
  border-bottom: 1px solid #77634270;
  box-shadow: inset 3px 0 var(--mu-gold,#d5b77a);
}
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more dl,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more dl,
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more dl {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px 14px;
  margin: 0;
}
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more dt,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more dt,
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more dt { margin: 0; color: #aeb4bc; font: 400 12px/1.4 var(--mu-font-body); }
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more dd,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more dd,
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more dd {
  margin: 0;
  color: #f5f0e6;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more[hidden],
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more[hidden],
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more[hidden] { display: none !important; }
/* Expand control (v2.js collapsibleTables): td/th.mu-v2-row-toggle is the cell, button.mu-v2-row-toggle-btn
   inside it carries the chevron (svg 'next' pointing right, turned down while the row is open). */
body[data-mu-preview] #index_content :is(td,th).mu-v2-row-toggle,
body[data-mu-preview] .mu-v2-popup-layer :is(td,th).mu-v2-row-toggle,
body[data-mu-preview] #modal-popup :is(td,th).mu-v2-row-toggle { width: 44px; padding-left: 4px !important; padding-right: 6px !important; text-align: right; vertical-align: middle; }
body[data-mu-preview] #index_content .mu-v2-row-toggle-btn,
body[data-mu-preview] #index_content .mu-v2-row-toggle > button,
body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle-btn,
body[data-mu-preview] #modal-popup .mu-v2-row-toggle-btn,
body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle > button,
body[data-mu-preview] #modal-popup .mu-v2-row-toggle > button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid #3a3f45 !important;
  border-radius: 6px !important;
  background: #20262c !important;
  color: var(--mu-popup-gold) !important;
  box-shadow: none !important;
  font-size: 0;
  cursor: pointer;
}
body[data-mu-preview] #index_content .mu-v2-row-toggle-btn,
body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle-btn,
body[data-mu-preview] #modal-popup .mu-v2-row-toggle-btn { position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body[data-mu-preview] #index_content .mu-v2-row-toggle-btn::after,
body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle-btn::after,
body[data-mu-preview] #modal-popup .mu-v2-row-toggle-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(calc(100% + 14px), 44px); height: max(calc(100% + 14px), 44px); transform: translate(-50%, -50%); }
body[data-mu-preview] #index_content :is(td,th).mu-v2-row-toggle,
body[data-mu-preview] .mu-v2-popup-layer :is(td,th).mu-v2-row-toggle,
body[data-mu-preview] #modal-popup :is(td,th).mu-v2-row-toggle { cursor: pointer; }
body[data-mu-preview] #index_content .mu-v2-row-toggle-btn svg,
body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle-btn svg,
body[data-mu-preview] #modal-popup .mu-v2-row-toggle-btn svg { width: 14px; height: 14px; fill: currentColor; transition: transform .18s; }
/* CSS chevron only for an empty button; v2.js inserts the 'next' svg, so no :has() is needed. */
body[data-mu-preview] #index_content .mu-v2-row-toggle-btn:empty::before,
body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle-btn:empty::before,
body[data-mu-preview] #modal-popup .mu-v2-row-toggle-btn:empty::before {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s;
}
body[data-mu-preview] #index_content tr[aria-expanded="true"] .mu-v2-row-toggle-btn::before,
body[data-mu-preview] .mu-v2-popup-layer tr[aria-expanded="true"] .mu-v2-row-toggle-btn::before,
body[data-mu-preview] #modal-popup tr[aria-expanded="true"] .mu-v2-row-toggle-btn::before { transform: translateY(2px) rotate(225deg); }
body[data-mu-preview] #index_content tr[aria-expanded="true"] .mu-v2-row-toggle-btn svg,
body[data-mu-preview] .mu-v2-popup-layer tr[aria-expanded="true"] .mu-v2-row-toggle-btn svg,
body[data-mu-preview] #modal-popup tr[aria-expanded="true"] .mu-v2-row-toggle-btn svg { transform: rotate(90deg); }
body[data-mu-preview] #index_content td.mu-v2-row-toggle-cell,
body[data-mu-preview] .mu-v2-popup-layer td.mu-v2-row-toggle-cell,
body[data-mu-preview] #modal-popup td.mu-v2-row-toggle-cell { width: 44px; padding-left: 4px !important; padding-right: 6px !important; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  body[data-mu-preview] #index_content .mu-v2-row-toggle-btn::before,
  body[data-mu-preview] #index_content .mu-v2-row-toggle-btn svg,
  body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle-btn::before,
  body[data-mu-preview] #modal-popup .mu-v2-row-toggle-btn::before,
  body[data-mu-preview] .mu-v2-popup-layer .mu-v2-row-toggle-btn svg,
  body[data-mu-preview] #modal-popup .mu-v2-row-toggle-btn svg { transition: none; }
}
/* Pagination: 44px gold-lined steps, the current page solid gold. */
body[data-mu-preview] #index_content .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  --bs-pagination-border-radius: 6px;
}
body[data-mu-preview] #index_content .pagination .page-item { margin: 0; }
body[data-mu-preview] #index_content .pagination .page-link,
body[data-mu-preview] #index_content .pagination .page-item:first-child .page-link,
body[data-mu-preview] #index_content .pagination .page-item:last-child .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #1b2127 !important;
  color: var(--mu-popup-gold) !important;
  box-shadow: none !important;
  font: 600 13px/1 var(--mu-font-body) !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
}
body[data-mu-preview] #index_content .pagination .page-link:is(:hover,:focus-visible) { border-color: var(--mu-popup-border) !important; background: #262c30 !important; color: var(--mu-popup-text) !important; }
body[data-mu-preview] #index_content .pagination .page-item.active .page-link,
body[data-mu-preview] #index_content .pagination .page-link.active {
  border-color: #f0d5a0 !important;
  background: linear-gradient(110deg,#f2d7a2,#c9a468) !important;
  color: #251d12 !important;
}
body[data-mu-preview] #index_content .pagination .page-item.disabled .page-link,
body[data-mu-preview] #index_content .pagination .page-link.disabled { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------------------ */
/* V1 furniture hidden on V2 subpages that carry their own heading.          */
/* ------------------------------------------------------------------------ */
@supports selector(:has(a)) {
  body[data-mu-preview]:not([data-mu-page="home"]) #index_content:has(.mu-v2-page-heading) :is(.breadcrumbBar,.logobar,.webbg-userbar) { display: none !important; }
}
@supports not selector(:has(a)) {
  body[data-mu-preview][data-mu-page]:not([data-mu-page="home"]) #index_content :is(.breadcrumbBar,.logobar,.webbg-userbar) { display: none !important; }
}
/* Legacy Bootstrap alerts inside content follow the notice palette. */
body[data-mu-preview] #index_content .alert {
  border: 1px solid #3a3f45 !important;
  border-left: 3px solid var(--mu-popup-border) !important;
  border-radius: 7px !important;
  background: #1a2026 !important;
  color: #eee7d8 !important;
  box-shadow: none !important;
}
body[data-mu-preview] #index_content .alert-info { border-left-color: #7ea3c4 !important; }
body[data-mu-preview] #index_content .alert-warning { border-left-color: #d5b77a !important; }
body[data-mu-preview] #index_content .alert-danger { border-left-color: var(--mu-danger) !important; }
body[data-mu-preview] #index_content .alert-success { border-left-color: #5f9a72 !important; }
body[data-mu-preview] #index_content .alert a { color: var(--mu-popup-gold) !important; }

/* ------------------------------------------------------------------------ */
/* MU item grids. The pixel inventory (.t-inventory) is positioned by main.js */
/* in 26px steps, so only its skin changes; free-flowing lists use the size  */
/* token (two cells per tile) and no longer overflow a phone screen.        */
/* ------------------------------------------------------------------------ */
@media (max-width: 480px) { body[data-mu-preview] { --mu-item-size: 26px; } }
body[data-mu-preview] #index_content .t-inventory .t-item {
  background-image: none !important;
  background-color: #1c2126;
  border: 1px solid #3a3f45;
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
body[data-mu-preview] #index_content .t-inventory .t-item:hover:not(.t-item-selected):not(.t-item-disable) {
  background-image: none !important;
  background-color: #24292e;
  border-color: #8a7a5c;
}
body[data-mu-preview] #index_content .t-inventory .t-item.t-item-selected {
  background-image: none !important;
  background-color: #2b2920;
  border-color: var(--mu-popup-gold);
  box-shadow: 0 0 0 1px #e7c78d66, 0 0 9px #e7c78d55;
  z-index: 1;
}
body[data-mu-preview] #index_content .t-inventory .t-item.t-item-disable {
  background-image: none !important;
  background-color: #14181c;
  border-color: #2a2f34;
  opacity: .35;
}
body[data-mu-preview] #index_content .t-inventory .t-item img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
body[data-mu-preview] #index_content :is(.t-item-view_list,.t-item-select_list) {
  max-width: 100%;
  gap: 4px;
  justify-content: flex-start;
}
body[data-mu-preview] #index_content :is(.t-item-view_list,.t-item-select_list) :is(.t-item,.t-load-more) {
  width: calc(var(--mu-item-size) * 2);
  height: calc(var(--mu-item-size) * 2);
  line-height: calc(var(--mu-item-size) * 2);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3a3f45;
  border-radius: 6px;
  background-color: #1c2126;
  color: #d9d9d9;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
body[data-mu-preview] #index_content :is(.t-item-view_list,.t-item-select_list) :is(.t-item,.t-load-more):hover { background-color: #24292e; border-color: #8a7a5c; }
body[data-mu-preview] #index_content :is(.t-item-view_list,.t-item-select_list) .t-item.t-item-selected {
  background-color: #2b2920;
  border-color: var(--mu-popup-gold);
  box-shadow: 0 0 0 1px #e7c78d66, 0 0 9px #e7c78d55;
}
body[data-mu-preview] #index_content :is(.t-item-view_list,.t-item-select_list) .t-item.t-item-disable { opacity: .35; cursor: default; }
body[data-mu-preview] #index_content .t-item-view_group {
  border: 1px solid #3a3f45;
  border-radius: 6px;
  background-color: #1c2126;
}

/* ------------------------------------------------------------------------ */
/* Loading: gold NProgress bar, dimmed content while a request is in flight. */
/* ------------------------------------------------------------------------ */
body[data-mu-preview] #nprogress .bar { background: var(--mu-gold,#d5b77a) !important; height: 2px !important; }
body[data-mu-preview] #nprogress .peg { box-shadow: 0 0 10px #d5b77a, 0 0 5px #d5b77a !important; }
body[data-mu-preview] #nprogress .spinner-icon { border-top-color: var(--mu-gold,#d5b77a) !important; border-left-color: var(--mu-gold,#d5b77a) !important; }
body[data-mu-preview] #index_content.t-disabled,
body[data-mu-preview] #index_content .t-disabled {
  opacity: .55 !important;
  pointer-events: none !important;
  cursor: progress;
  transition: opacity .15s;
}
body[data-mu-preview] .mu-page-window:has(> #index_content.t-disabled) { cursor: progress; }

/* ------------------------------------------------------------------------ */
/* Guest shell (login / register / recovery before sign-in).                 */
/* ------------------------------------------------------------------------ */
body[data-mu-preview][data-mu-auth="guest"] .mu-auth-shell {
  position: relative;
  box-sizing: border-box;
  width: min(100%,480px);
  min-height: var(--mu-h,100dvh);
  max-height: var(--mu-h,100dvh);
  margin: 0 auto;
  padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
  color: var(--mu-text,#f5f0e6);
  font-family: var(--mu-font-body);
}
body[data-mu-preview][data-mu-auth="guest"] .mu-auth-shell > * { min-width: 0; }
body[data-mu-preview][data-mu-auth="guest"] .mu-auth-shell #index_content { flex: 1 0 auto; }
@media (min-width: 701px) {
  body[data-mu-preview][data-mu-auth="guest"] .mu-auth-shell {
    margin: max(12px,env(safe-area-inset-top)) auto;
    min-height: 0;
    max-height: calc(var(--mu-h,100dvh) - 24px);
    padding: 22px 24px;
    border: 1px solid var(--mu-gold,#d5b77a);
    border-radius: 8px;
    background: #10151a;
    box-shadow: 0 15px 70px #0009;
  }
}
@media (max-width: 700px) {
  body[data-mu-preview][data-mu-auth="guest"] .mu-auth-shell { width: 100%; max-width: none; }
}
@media (max-height:520px) and (min-width:600px) and (orientation:landscape) {
  body[data-mu-preview][data-mu-auth="guest"] .mu-auth-shell { width: min(100%,var(--mu-auth-shell-w,560px)); padding: 12px 18px; gap: 8px; }
}

/* ------------------------------------------------------------------------ */
/* Thai: Noto Sans Thai leads every stack; the shell loads the face only for TH. */
/* ------------------------------------------------------------------------ */
body[data-mu-preview][data-mu-lang="TH"] {
  --mu-font-body: 'Noto Sans Thai', 'Be Vietnam Pro', sans-serif;
  --mu-font-head: 'Noto Sans Thai', Manrope, 'Be Vietnam Pro', sans-serif;
  font-family: 'Noto Sans Thai', 'Be Vietnam Pro', sans-serif !important;
}
body[data-mu-preview][data-mu-lang="TH"] :is(button,input,select,textarea,.mu-nav,.mu-card,a.hm-btn,a.hm-btn .hm-label,.mu-quiet-button,.mu-deposit-button,.swal2-popup,.select2-container,.popover,.tooltip,#modal-popup .modal-content,.mu-dialog,.mu-v2-popup-dialog),
body[data-mu-preview][data-mu-lang="TH"] #index_content :is(p,span,div,td,th,li,label,small,a):not(.mu-wordmark):not(.mu-wordmark *):not(.fa):not([class*="fa-"]):not(.material-icons) {
  font-family: 'Noto Sans Thai', 'Be Vietnam Pro', sans-serif !important;
}
body[data-mu-preview][data-mu-lang="TH"] :is(h1,h2,h3,h4,h5,.mu-heading,.mu-hub-heading,.mu-dialog-head h2,.swal2-title,.modal-title,.mu-v2-confirm-title,.mu-v2-sheet-head h2),
body[data-mu-preview][data-mu-lang="TH"] #index_content :is(h1,h2,h3,h4,h5,.mu-v2-page-heading-title h1,table.mu-v2-table > thead th) {
  font-family: 'Noto Sans Thai', Manrope, 'Be Vietnam Pro', sans-serif !important;
}

/* Browser autofill (Chrome/Safari paint saved credentials light blue/yellow): keep the charcoal field.
   The inset shadow is the only reliable override; the long transition stops WebKit flashing the default colour. */
body[data-mu-preview] input:-webkit-autofill,
body[data-mu-preview] input:-webkit-autofill:hover,
body[data-mu-preview] input:-webkit-autofill:focus,
body[data-mu-preview] input:-webkit-autofill:active,
body[data-mu-preview] textarea:-webkit-autofill,
body[data-mu-preview] select:-webkit-autofill {
  -webkit-text-fill-color: var(--mu-popup-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #10151b inset !important;
  box-shadow: 0 0 0 1000px #10151b inset !important;
  caret-color: var(--mu-popup-text);
  transition: background-color 600000s 0s, color 600000s 0s;
}
body[data-mu-preview] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #10151b inset, 0 0 0 2px #d5b77a40 !important; }

/* View switch guard: a hidden page slot or hub never renders, whatever display a page stylesheet gives it.
   (1,3,1) outranks every page rule of the form body[data-mu-preview][data-mu-page=…] #index_content (1,2,1). */
body[data-mu-preview] .mu-page-window > #index_content[hidden],
body[data-mu-preview] .mu-page-window > .mu-hub[hidden] { display: none !important; }

/* Thin V2 line icons that replace Font Awesome's solid circle-info (v2.js refineIcons). Same box as an FA glyph
   so page layouts keep their spacing; gold on dark buttons and titles, muted inside notes. */
body[data-mu-preview] .mu-v2-ico {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  line-height: 0;
  vertical-align: -0.2em;
  color: var(--mu-popup-gold);
}
body[data-mu-preview] .mu-v2-ico svg { width: 100%; height: 100%; fill: currentColor; }
body[data-mu-preview] .mu-v2-ico-note { color: var(--mu-popup-muted); }
body[data-mu-preview] :is(button,[role="button"],a) > .mu-v2-ico:only-child { width: 22px; height: 22px; }
body[data-mu-preview] :is([class*="title-icon"],[class*="sec-icon"]) > .mu-v2-ico { width: 60%; height: 60%; }
/* Icon-only header buttons often carry a small font-size: keep the line icon readable. */
body[data-mu-preview] :is(button,[role="button"],a) .mu-v2-ico { width: max(1.15em, 18px); height: max(1.15em, 18px); }

/* Heading row never shorter than its Back button, and the button never pokes out of the row
   (a clipped top border reads as "the header is pushed up"). */
body[data-mu-preview] #index_content .mu-v2-page-heading { min-height: 36px; }
body[data-mu-preview] #index_content .mu-v2-page-heading > :is(.mu-page-backbar, .mu-card-back) { align-self: center; overflow: visible; }
body[data-mu-preview] #index_content .mu-v2-page-heading > .mu-page-backbar > .mu-page-back { margin: 0 !important; }

/* Password rules checklist (pw-rules.js): grey until typed, green tick per satisfied rule, shake on a blocked submit. */
body[data-mu-preview] .mu-pw-rules {
  list-style: none;
  margin: 6px 0 2px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 12px;
  border: 1px solid #3a3f45;
  border-radius: 6px;
  background: #151a1f;
  font: 500 12px/1.35 var(--mu-font-body, 'Be Vietnam Pro', sans-serif);
  color: var(--mu-popup-muted);
}
body[data-mu-preview] .mu-pw-rule { display: flex; align-items: center; gap: 7px; min-width: 0; }
body[data-mu-preview] .mu-pw-rule > i {
  flex: none; width: 14px; height: 14px; border: 1.5px solid #6b6f73; border-radius: 50%; position: relative;
}
body[data-mu-preview] .mu-pw-rules.is-touched .mu-pw-rule:not(.is-ok) { color: #e3b1a6; }
body[data-mu-preview] .mu-pw-rules.is-touched .mu-pw-rule:not(.is-ok) > i { border-color: #b45252; }
body[data-mu-preview] .mu-pw-rule.is-ok { color: #cfe5c9; }
body[data-mu-preview] .mu-pw-rule.is-ok > i { border-color: #6fa86a; background: #6fa86a; }
body[data-mu-preview] .mu-pw-rule.is-ok > i::after {
  content: ''; position: absolute; left: 3.5px; top: 0.5px; width: 3.5px; height: 7px;
  border: solid #10151b; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body[data-mu-preview] .mu-pw-rules.is-shake { animation: mu-pw-shake .4s ease; }
@keyframes mu-pw-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { body[data-mu-preview] .mu-pw-rules.is-shake { animation: none; } }
body[data-mu-preview] .mu-pw-rules-msg { margin-top: 6px; }

/* Password show/hide eye (pw-rules.js addEye): the button sits inside the field, 44px touch target. */
body[data-mu-preview] .mu-pw-wrap { position: relative; display: block; width: 100%; min-width: 0; }
body[data-mu-preview] .mu-pw-wrap > input { width: 100% !important; padding-right: 48px !important; }
body[data-mu-preview] .mu-pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--mu-popup-muted);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
body[data-mu-preview] .mu-pw-eye svg { width: 20px; height: 20px; fill: currentColor; }
body[data-mu-preview] .mu-pw-eye:is(:hover, :focus-visible), body[data-mu-preview] .mu-pw-eye[aria-pressed="true"] { color: var(--mu-popup-gold); }
/* Edge / WebView2 draws its own "::-ms-reveal" eye inside password fields → two eyes. Every V2 field has its own eye. (28/09/2026) */
body[data-mu-preview] input::-ms-reveal, body[data-mu-preview] input::-ms-clear { display: none !important; }

/* ======================================================================== */
/* Soát đồng bộ toàn site sau đợt 2 (26/09). Gom các bản vá cục bộ mà nhiều  */
/* nhóm đã tự làm riêng về một chỗ; luật trang (specificity cao hơn) vẫn     */
/* thắng nếu trang cần khác.                                                 */
/* ======================================================================== */

/* Vỏ thành viên trên PC: body cao 0px nên nền than + hero của v2.css không phủ, lộ nền xanh nhạt
   #eef5f8 của main.css (.pagein) quanh khung app. Cho body cao bằng vùng nhìn thật (--mu-h do v2.js
   đo từ visualViewport, không vượt khung nên không sinh thanh cuộn). */
html.pagein body[data-mu-preview] { min-height: 100vh; min-height: var(--mu-h, 100vh); }

/* SweetAlert2 10.9 dựng sẵn cả 5 icon và chỉ ẩn icon thừa bằng style inline; luật display:flex!important
   ở trên làm hiện đủ 5 vòng. Chỉ giữ icon đang dùng (.swal2-icon-show). */
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon:not(.swal2-icon-show),
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon[style*="display: none"],
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon[style*="display:none"] { display: none !important; }

/* Không dùng xanh dương trong V2: thông báo/alert/icon "info" dùng vàng trầm. */
body[data-mu-preview] .mu-v2-notice.is-info { --mu-notice-accent: var(--mu-popup-border, #9b7e50); }
body[data-mu-preview] #index_content .alert-info { border-left-color: var(--mu-popup-border, #9b7e50) !important; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon,
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-info { --mu-swal-accent: #c9a468; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-error { --mu-swal-accent: var(--mu-danger); }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-success { --mu-swal-accent: #5f9a72; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-warning { --mu-swal-accent: #d5b77a; }
body[data-mu-preview] .swal2-popup.swal-neo-dialog .swal2-icon.swal2-question { --mu-swal-accent: #a58ac9; }
/* SPAY.alert lỗi/thành công thêm .swal-neo-alert.swal-neo-error|success → main.css (0,6,0)!important tô tròn
   hồng/xanh lá đặc, nét trắng, lệch với vòng mảnh của info/warning. Nâng specificity để giữ vòng mảnh. */
body[data-mu-preview] .swal2-popup.swal-neo-dialog.swal-neo-alert .swal2-icon.swal2-icon-show:is(.swal2-error,.swal2-success) {
  background: #151a1f !important;
  box-shadow: none !important;
}
body[data-mu-preview] .swal2-popup.swal-neo-dialog.swal-neo-alert .swal2-icon.swal2-icon-show.swal2-error [class^="swal2-x-mark-line"],
body[data-mu-preview] .swal2-popup.swal-neo-dialog.swal-neo-alert .swal2-icon.swal2-icon-show.swal2-success [class^="swal2-success-line"] {
  height: 2px !important;
  background: var(--mu-swal-accent) !important;
}

/* X của SweetAlert cách mép phải 8px, còn X của confirm/sheet (v2.js) cách ~16px → cùng inset. */
body[data-mu-preview] .swal2-popup.swal-neo-dialog > .mu-v2-popup-close { right: 15px; }

/* Tiêu đề hub nhận focus bằng code (showHub) → không vẽ viền focus trình duyệt (xanh ở Safari). */
body[data-mu-preview] .mu-hub-heading:focus { outline: none !important; box-shadow: none !important; }

/* Ô tích xác nhận Hắc kim cho MỌI muV2.confirm (trước đây ô trắng gốc, 4 nhóm tự vẽ lại). */
body[data-mu-preview] .mu-v2-confirm-check { align-items: center; min-height: 44px; }
body[data-mu-preview] .mu-v2-confirm-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 22px !important;
  margin: 0;
  border: 1.5px solid #9b7e50;
  border-radius: 5px;
  background: #141b20 center / 15px 15px no-repeat;
  box-shadow: none;
  cursor: pointer;
}
body[data-mu-preview] .mu-v2-confirm-check input[type="checkbox"]:checked {
  border-color: #e7c78d;
  background-color: #e7c78d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23251d12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body[data-mu-preview] .mu-v2-confirm-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--mu-popup-gold); outline-offset: 2px; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-confirm-check input[type="checkbox"] { border-color: #8a4a4a; }
body[data-mu-preview] .mu-v2-confirm-danger .mu-v2-confirm-check input[type="checkbox"]:checked { border-color: var(--mu-danger); background-color: var(--mu-danger); }

/* Confirm ở điện thoại ngang thấp (844×300): đầu + hàng nút cố định, phần giữa cuộn, ô tích dính đáy
   phần giữa → ô tích và Hủy/Xác nhận luôn thấy dù tóm tắt dài. Tóm tắt xếp 2 cột. */
@media (max-height:520px) and (orientation:landscape) {
  body[data-mu-preview] .mu-v2-popup-dialog.mu-v2-confirm { overflow: hidden !important; }
  body[data-mu-preview] :is(.mu-v2-confirm-head,.mu-v2-confirm-actions) { flex: none; }
  body[data-mu-preview] .mu-v2-confirm-body {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    gap: 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #776342 #11151b;
  }
  body[data-mu-preview] .mu-v2-confirm-body > .mu-v2-confirm-check:last-child {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--mu-popup-bg, #1b2227);
  }
  body[data-mu-preview] .mu-v2-confirm-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 14px; padding: 8px 11px; }
  body[data-mu-preview] .mu-v2-confirm-summary > div { flex-direction: column; align-items: flex-start; gap: 0; }
  body[data-mu-preview] .mu-v2-confirm-summary dd { max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 15px; }
  body[data-mu-preview] .mu-v2-confirm-summary > div:only-child { grid-column: 1 / -1; }
}

/* Dòng mở rộng bảng: v2.js bọc từng cặp dt/dd trong <div> → lưới 2 cột bằng nhau, nhãn trên giá trị dưới
   (trước đây cột 'minmax(0,1fr) auto' làm giá trị dính sang cặp kế bên). */
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more dl,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more dl,
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 14px; }
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more dl > div,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more dl > div,
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more dl > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body[data-mu-preview] #index_content table.mu-v2-table tr.mu-v2-row-more dd,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr.mu-v2-row-more dd,
body[data-mu-preview] #modal-popup table.mu-v2-table tr.mu-v2-row-more dd { text-align: left; }
/* Dòng đang mở: một màu nền cho cả dòng (bỏ lớp sọc Bootstrap box-shadow 9999px), vạch vàng ở ô đầu. */
body[data-mu-preview] #index_content table.mu-v2-table tr[aria-expanded="true"] > td,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr[aria-expanded="true"] > td,
body[data-mu-preview] #modal-popup table.mu-v2-table tr[aria-expanded="true"] > td { box-shadow: none; }
body[data-mu-preview] #index_content table.mu-v2-table tr[aria-expanded="true"] > td:first-child,
body[data-mu-preview] .mu-v2-popup-layer table.mu-v2-table tr[aria-expanded="true"] > td:first-child,
body[data-mu-preview] #modal-popup table.mu-v2-table tr[aria-expanded="true"] > td:first-child { box-shadow: inset 3px 0 var(--mu-gold,#d5b77a); }

/* Nút Back 36px ở điện thoại đứng: vùng chạm nới ra 44px, hình vẽ giữ nguyên. */
body[data-mu-preview] #index_content .mu-v2-page-heading .mu-page-back { position: relative; }
body[data-mu-preview] #index_content .mu-v2-page-heading .mu-page-back::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(calc(100% + 10px), 44px); height: max(calc(100% + 10px), 44px); transform: translate(-50%, -50%); }

/* unify.css ép display:inline-flex!important (specificity 1,12,1) lên nút phụ header → nút đã [hidden]
   vẫn hiện. Hai :not(#id) nâng lên 3 ID để [hidden] luôn thắng. */
body[data-mu-preview] #index_content .mu-v2-page-heading-actions > [hidden]:not(#mu-v2-never-a):not(#mu-v2-never-b) { display: none !important; }

/* Thanh điều hướng trái ở ngang thấp (≤300px): v2.css đặt icon cạnh chữ trong cột 68px nên cắt
   'Trang …', 'Tài kho…'. Giữ icon trên, chữ dưới (3 mục × 48px vẫn vừa 300px). */
@media (max-height:300px) {
  body[data-mu-preview] .nav-buttons .mu-nav {
    flex-direction: column !important;
    gap: 2px !important;
    min-height: 48px !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  body[data-mu-preview] .nav-buttons .mu-nav svg { width: 18px; height: 18px; }
}

/* ======================================================================== */
/* Đợt 3 (26/09): hoàn thiện chung.                                          */
/* ======================================================================== */

/* Popover ở điện thoại ngang thấp. mobile-landscape.css (V1) không còn ép popover của vỏ V2 ra giữa vùng phải:
   popover lỗi ô nhập nằm cạnh ô, giữ mũi tên; nội dung dài cuộn trong .popover-body, không vượt khung 300px.
   Tooltip vật phẩm (v2.js gắn .mu-v2-item-pop) rộng ~420px, cạnh ô đồ không đủ chỗ (Popper đẩy tràn ngang)
   → tấm cố định sát phải, giữa theo chiều dọc, như popup ở ngang thấp. */
@media (max-height:520px) and (orientation:landscape) {
  body[data-mu-preview] .popover .popover-body {
    max-height: calc(var(--mu-h,100vh) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body[data-mu-preview] .popover.mu-v2-item-pop {
    position: fixed !important;
    inset: auto !important;
    top: calc(var(--mu-top,0px) + var(--mu-h,100vh) / 2) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    max-height: calc(var(--mu-h,100vh) - 12px) !important;
  }
  body[data-mu-preview] .popover.mu-v2-item-pop > .popover-arrow { display: none !important; }
  body[data-mu-preview] .popover.mu-v2-item-pop .popover-body { max-height: calc(var(--mu-h,100vh) - 14px); }
}
/* Màn cảm ứng: chạm vào tấm tooltip thì cuộn tấm, không xuyên xuống nút Mua/ô đồ phía dưới (main.css để none). */
@media (max-height:520px) and (orientation:landscape) and (hover:none) {
  body[data-mu-preview] .popover.mu-v2-item-pop { pointer-events: auto; }
}
/* Sửa cuối đợt 3 — điện thoại đứng: Popper đặt tooltip vật phẩm cạnh ô đồ, main.js (fitPopoverToContent) ép width
   inline !important ~292px → tràn ngang (Chrome innerWidth 413, WebKit right 412). Dựng thành tấm cố định phủ bề ngang
   (min-width thắng width/max-width inline), đứng ngay trên thanh điều hướng 64px; nội dung dài cuộn trong
   .popover-body. Popover lỗi ô nhập (không có .mu-v2-item-pop) giữ nguyên. */
@media (max-width:700px) and (orientation:portrait) and (min-height:481px) {
  body[data-mu-preview] .popover.mu-v2-item-pop {
    position: fixed !important;
    inset: auto !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    top: calc(var(--mu-top,0px) + var(--mu-h,100vh) - 72px) !important;
    margin: 0 !important;
    transform: translateY(-100%) !important;
    min-width: calc(var(--mu-w,100vw) - 16px) !important;
    max-height: calc(var(--mu-h,100vh) - 80px) !important;
  }
  body[data-mu-preview] .popover.mu-v2-item-pop > .popover-arrow { display: none !important; }
  body[data-mu-preview] .popover.mu-v2-item-pop .popover-body {
    max-height: calc(var(--mu-h,100vh) - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width:700px) and (orientation:portrait) and (min-height:481px) and (hover:none) {
  body[data-mu-preview] .popover.mu-v2-item-pop { pointer-events: auto; }
}

/* ======================================================================== */
/* BẮT ĐẦU .mu-v2-pager — phân trang chung (đợt 3, chủ web chốt 26/09/2026). */
/* ======================================================================== */
/* muV2.pager() (v2.js) dựng một thanh: [«] [‹] "Trang N/M" [›] [»] (keyset không biết tổng: [‹] "Trang N" [›]).
   Vị trí: LUÔN là con cuối của thẻ danh sách — thẻ là flex column, vùng danh sách flex:1 min-height:0 overflow:auto,
   thanh flex:none → nằm ngay dưới dòng cuối, đứng yên ở đáy thẻ, không lên header/hàng tab/nhãn cột ở mọi khung.
   Nút vẽ 36px (ngang thấp 34px), vùng chạm 44px bằng ::after; than viền vàng trầm; khóa = mờ + aria-disabled.
   Markup phân trang cũ của trang gắn .mu-v2-pager-src (ẩn trong V2, vẫn nhận click() từ thanh mới). */
body[data-mu-preview] .mu-v2-pager-src { display: none !important; }
body[data-mu-preview] .mu-v2-pager {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid #2a3036;
  border-radius: 0;
  background: #151a1f;
  color: var(--mu-popup-text);
  font-family: var(--mu-font-body);
}
body[data-mu-preview] .mu-v2-pager[hidden] { display: none !important; }
body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #22292b !important;
  color: #e4c386 !important;
  box-shadow: none !important;
  line-height: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* Vùng chạm 44px: 4px quanh nút 36px; khoảng cách 8px giữa hai nút nên vùng chạm không chồng nhau. */
body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(calc(100% + 10px), 44px); height: max(calc(100% + 10px), 44px); transform: translate(-50%, -50%); }
body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn.is-edge svg { width: 16px; height: 16px; }
body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn:not([aria-disabled="true"]):is(:hover,:focus-visible) {
  border-color: var(--mu-popup-border) !important;
  background: #2a3134 !important;
  color: #f2d49b !important;
}
body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn[aria-disabled="true"] { opacity: .35; cursor: default; }
body[data-mu-preview] .mu-v2-pager .mu-v2-pager-pos {
  flex: none;
  min-width: 84px;
  padding: 0 4px;
  color: #e1dcd1;
  font: 600 13px/1.2 var(--mu-font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
/* Khung rất hẹp: bỏ «/» (còn ‹ ›), không để thanh tràn ngang. */
@media (max-width: 340px) {
  body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn.is-edge { display: none; }
}
/* Ngang thấp (844×300): một hàng mỏng 44px, nút vẽ 34px, vùng chạm vẫn 44px. */
@media (max-height:520px) and (orientation:landscape) {
  body[data-mu-preview] .mu-v2-pager { gap: 10px; min-height: 44px; padding: 5px 8px; }
  body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  body[data-mu-preview] .mu-v2-pager .mu-v2-pager-btn::after { inset: -5px; }
  body[data-mu-preview] .mu-v2-pager .mu-v2-pager-pos { min-width: 76px; font-size: 12px; }
}
/* KẾT THÚC .mu-v2-pager                                                     */

/* 27/09/2026: ban build navigation-core focus vao header (tabindex=-1) sau moi lan chuyen trang de ho tro trinh doc man
   hinh -> Chrome ve vien trang, Safari vach xanh quanh the header o MOI trang. Giu focus (a11y), bo vien: phan tu
   tabindex=-1 chi nhan focus bang code, khong phai dich cua ban phim nen khong can vong focus. */
body[data-mu-preview] :is(.mu-v2-page-heading, [data-mu-v2-heading], .mu-hub-heading, .mu-v2-page-heading-title)[tabindex="-1"]:is(:focus, :focus-visible) { outline: none !important; box-shadow: none; }

/* 28/09/2026 (chu web cho sua loi nho Home): iPhone 12 Pro Safari 390x664 Home du 44px (o Nhap Giftcode bi cat day),
   ngang 844x300 du 20px. Chi ap cho man THAP — dien thoai cao (390x844) giu nguyen thiet ke. */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 760px) {
  body[data-mu-preview][data-mu-page="home"] .mu-home .mu-home-grid > a.hm-btn {
    flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    min-height: 60px !important; height: auto !important; padding: 8px 10px !important; gap: 10px !important;
  }
  body[data-mu-preview][data-mu-page="home"] .mu-home .mu-home-grid > a.hm-btn .hm-label { margin: 0 !important; text-align: left !important; line-height: 1.25 !important; }
}
@media (orientation: landscape) and (max-height: 340px) {
  body[data-mu-preview][data-mu-page="home"] .mu-home .mu-home-features > .mu-home-heading { display: none !important; }
}
/* 28/09/2026: tablet DUNG (vd iPad 820x1180): khung app bi gioi han cao 850px (luat PC cua v2.css / navigation.css) nen
   trong ~165px tren va duoi. Tablet dung dung het chieu cao; PC va man ngang giu khung 1240x850 nhu cu. */
@media (orientation: portrait) and (min-width: 701px) {
  body[data-mu-preview] .auth-container { height: 100% !important; max-height: none !important; }
}

/* ======================================================================== */
/* 28/09/2026 (chủ web: "thống nhất toàn bộ thông báo, popup theo chung 1 style") — gom các chỗ tự chế về hợp đồng:   */
/* SweetAlert gọi thẳng + SPAY.confirm → popup-gesture.js (lớp neo / muV2.confirm); dưới đây là phần CSS.            */
/* ======================================================================== */
/* Dòng thông báo tự chế → cùng dáng .mu-v2-notice (nền than, viền trái màu theo loại), bản GỌN để không vỡ khung 1 màn */
body[data-mu-preview] :is(.mu-card-result, #mu-character .feedback, .mu-login-msg:not(:empty)) {
  --mu-notice-accent: var(--mu-popup-border);
  display: block; margin: 8px 0 0 !important; padding: 7px 10px !important; border: 1px solid #3a3f45 !important;
  border-left: 3px solid var(--mu-notice-accent) !important; border-radius: 7px !important; background: #1a2026 !important;
  color: #eee7d8 !important; font: 500 12.5px/1.45 var(--mu-font-body) !important; text-align: left !important; overflow-wrap: anywhere;
}
body[data-mu-preview] :is(.mu-card-result.is-ok, #mu-character .feedback:not(.error), .mu-login-msg.is-ok) { --mu-notice-accent: #5f9a72; }
body[data-mu-preview] :is(.mu-card-result.is-bad, #mu-character .feedback.error, .mu-login-msg.is-err) { --mu-notice-accent: var(--mu-danger); }
body[data-mu-preview] :is(.mu-card-result[hidden], #mu-character .feedback:empty) { display: none !important; }
/* Lỗi nhỏ của Hỗ trợ (ảnh / soạn tin): chữ đỏ trầm của bảng màu V2 thay đỏ hồng riêng */
body[data-mu-preview][data-mu-page="support"] #index_content :is(.sp2-photo-err, .sp2-compose-err) { color: #f0a3a3; }

/* Đổi nhân vật → "Reset đã lưu" (<dialog> tự dựng của character-unified.js): về đúng hộp popup V2 + X mảnh + tấm đáy ở màn dọc */
body[data-mu-preview] .uc-archive-dialog {
  width: min(420px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 16px 17px 14px; border: 1px solid var(--mu-popup-border);
  border-radius: 10px; background: var(--mu-popup-bg); color: var(--mu-popup-text); box-shadow: 0 18px 48px rgba(0,0,0,.55); font-family: var(--mu-font-body);
}
body[data-mu-preview] .uc-archive-dialog::backdrop { background: rgba(5,9,14,.86); }
body[data-mu-preview] .uc-archive-dialog .uc-archive-head { padding-bottom: 8px; border-bottom: 1px solid #3a3f45; }
body[data-mu-preview] .uc-archive-dialog .uc-archive-head h2 { color: var(--mu-popup-text); font: 700 18px/1.3 var(--mu-font-head) !important; }
body[data-mu-preview] .uc-archive-dialog .uc-archive-row { border-bottom-color: #3a3f45; }
body[data-mu-preview] .uc-archive-dialog .uc-archive-row small { color: var(--mu-popup-muted); }
body[data-mu-preview] .uc-archive-dialog .uc-archive-nav button { min-height: 40px; padding: 7px 12px; border: 1px solid #665438; border-radius: 6px; background: #292f31; color: var(--mu-popup-text); font: 700 13px/1.25 var(--mu-font-body); }
body[data-mu-preview] .uc-archive-dialog .uc-archive-nav span { color: var(--mu-popup-muted); font-size: 12px; }
@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview] .uc-archive-dialog { width: 100%; max-width: 100%; margin: auto 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-bottom: 0; border-radius: 13px 13px 0 0; }
}