/* MU World V2 pages/wallet: page group "wallet" (Hắc kim). Every rule is scoped under
   body[data-mu-preview][data-mu-page="<slug>"]; slugs: bank-trade_log, web-wallet, report, giftcode.
   Popups mounted on <body> (muV2.sheet/confirm, SweetAlert) sit inside the same scope because the
   attributes live on <body>. Tokens come from shared-ui.css (--mu-popup-*, --mu-font-*). */

/* Portrait phones: the single secondary action (Lịch sử / Luật / type chip) stays on the title row as a
   compact 36px control instead of taking a full-width second row (SKILL: "có thể xuống hàng", not "phải"). */
@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="report"],[data-mu-page="giftcode"]) #index_content .mu-v2-page-heading {
    grid-template-columns: 36px minmax(0,1fr) auto;
    grid-template-areas: 'back title actions';
    align-items: center;
  }
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="report"],[data-mu-page="giftcode"]) #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions {
    display: flex !important;
    width: auto;
    max-width: 42vw;
    justify-content: flex-end;
  }
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="report"],[data-mu-page="giftcode"]) #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions > * { width: auto; }
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"]) #index_content .mu-v2-page-heading > .mu-v2-page-heading-actions :is(.mu-v2-btn,.giftcode-neo-rule-btn) {
    position: relative;
    min-height: 36px;
    padding: 7px 11px !important;
    font-size: 12px !important;
  }
  /* The painted control stays 36px to share the title row; the 44px touch target now comes from unify.css
     (::before chung cho mọi nút actions — đợt 3 gỡ ::after riêng ở đây, vì ::after là spinner [data-loading]). */
}

/* ======================================================================================
   1. Lịch sử giao dịch — /bank/trade_log.shtml (trade_log_v2.tpl + trade_log.list_v2.tpl)
   One frame: heading + filters fixed, the list scrolls inside .tl2-list, pager pinned below it.
   ====================================================================================== */
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content:not([hidden]) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2 > .mu-v2-page-heading,
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filters { flex: none; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filters {
  display: grid;
  gap: 8px;
}
/* Explicit min-height: a scrolling flex container inside an auto grid row collapses to its padding in Chrome. */
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filters .mu-v2-tabs { margin: 0; min-height: 48px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filters .mu-v2-tabs > button { flex: 1 1 0; min-width: 0; min-height: 40px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filter-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 8px;
  align-items: center;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset-btn {
  justify-content: flex-start !important;
  gap: 9px;
  padding: 6px 12px !important;
  text-align: left;
  overflow: hidden;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset-icon { display: none; flex: none; width: 24px; height: 24px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset-icon:not(:empty) { display: inline-grid; place-items: center; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset-icon img { width: 24px; height: 24px; object-fit: contain; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-caret {
  flex: none;
  width: 8px;
  height: 8px;
  margin: -3px 2px 0 auto;
  border-right: 2px solid var(--mu-popup-gold);
  border-bottom: 2px solid var(--mu-popup-gold);
  transform: rotate(45deg);
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-min {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: 0;
  padding: 0 0 0 10px;
  border: 1px solid #776342;
  border-radius: 6px;
  background: #10151b;
  color: #b9b8b5;
  font: 600 12px/1.2 var(--mu-font-body);
  cursor: text;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-min:focus-within { border-color: #e0bd7a; box-shadow: 0 0 0 2px #e0bd7a31; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-min input {
  width: 88px;
  min-height: 42px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mu-popup-text) !important;
  text-align: right;
  font: 600 16px/1.2 var(--mu-font-body) !important;
  font-variant-numeric: tabular-nums;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-min input:focus { outline: none !important; box-shadow: none !important; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-go { padding: 9px 14px !important; }

/* Scroll region: the fragment renders .tl2-table-wrap (or .mu-v2-empty) plus nav.tl2-pager; wallet.js adds nav.mu-v2-pager last. */
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-list {
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  border: 1px solid #2a3036;
  border-radius: 8px;
  background: #171d23;
  overflow: hidden;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-list.t-disabled { opacity: .55; pointer-events: none; }
/* WebKit (Safari engine) crashed this page whenever the 2px NProgress bar appeared over it: 20/20 with only
   NProgress.start() called on the page, 0/20 on /home, /report, /giftcode; moving it (absolute), dropping its peg,
   transition or transform did not help, hiding the bar did (0 crashes; the spinner may stay). The list shows its own
   loading state (dimmed list + skeleton), and the rule also covers leaving this page (the shell's load starts while
   data-mu-page is still bank-trade_log). */
body[data-mu-preview][data-mu-page="bank-trade_log"] #nprogress .bar { display: none !important; }
/* Same while the page sits under the Ví/Tài khoản hub (wallet.js keeps html.tl2-nobar while #tl2-root exists). */
html.tl2-nobar body[data-mu-preview] #nprogress .bar { display: none !important; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-list[aria-busy="true"]:empty::before {
  content: '';
  display: block;
  height: 44px;
  margin: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,#1e252b 0%,#2a3137 50%,#1e252b 100%);
  background-size: 200% 100%;
  animation: mu-v2-shimmer 1.4s ease-in-out infinite;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-list > .mu-v2-empty {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* Phân trang (đợt 3): muV2.pager dựng nav.mu-v2-pager là con cuối của .tl2-list → dính đáy thẻ ở mọi khung,
   kiểu chung trong shared-ui.css. nav.tl2-pager cũ của fragment mang .mu-v2-pager-src (ẩn, chỉ còn là đích bấm). */

/* Table cells. */
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table > thead th { background: #1c2227; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content td.tl2-td-asset { width: 48px; padding-right: 0 !important; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #3a3f45;
  border-radius: 8px;
  background: #1c2126;
  color: #aeb4bc;
  font: 700 10px/1 var(--mu-font-head);
  letter-spacing: .02em;
  vertical-align: middle;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset img { width: 22px; height: 22px; object-fit: contain; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset.is-missing::before { content: attr(data-abbr); }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-row.is-in .tl2-asset { border-color: #77634280; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-purpose { display: block; overflow-wrap: anywhere; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-time-inline { display: none; color: #aeb4bc; font-size: 11px; line-height: 1.3; margin-top: 2px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table.is-compact .tl2-time-inline { display: block; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-qty {
  color: #e1dcd1;
  font: 700 14px/1.3 var(--mu-font-head);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-row.is-in .tl2-qty { color: var(--mu-popup-gold); }
/* Rows stretch to meet the bottom of the list box (wallet.js fitRows sets --tl2-row-h on a full page, never on portrait phones). */
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table > tbody > tr:not(.mu-v2-row-more) > td { height: var(--tl2-row-h, auto); }
/* Portrait phones: the time already sits under the text, so it is neither a column nor part of the tap-to-expand row. */
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table.is-compact :is(.tl2-th-time,.tl2-td-time) { display: none !important; }
/* Expanded row: each label and its value on one line (label left, value right). */
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table tr.mu-v2-row-more dl { grid-template-columns: minmax(0,1fr); gap: 4px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table tr.mu-v2-row-more dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content td.tl2-td-time,
body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content td.tl2-td-bal { color: #c9c4ba; white-space: nowrap !important; font-variant-numeric: tabular-nums; }

/* Asset picker sheet (muV2.sheet, mounted on body). */
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 84px;
  padding: 9px 4px 8px;
  border: 1px solid #3a3f45;
  border-radius: 8px;
  background: #20262c;
  color: #e1dcd1;
  font: 600 11px/1.25 var(--mu-font-body);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-tile:is(:hover,:focus-visible) { border-color: var(--mu-popup-border); background: #262c30; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-tile:focus-visible { outline: 2px solid var(--mu-popup-gold); outline-offset: 2px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-tile.is-active { border-color: var(--mu-popup-gold); background: #332e24; color: #f2d49b; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #151a1f;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-badge img { width: 28px; height: 28px; object-fit: contain; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-badge-all { color: var(--mu-popup-gold); }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-badge-all svg { width: 20px; height: 20px; fill: currentColor; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* PagBrasil invoice (same countdown as V1; only the shell follows the V2 popup contract). */
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice {
  width: min(560px,100%) !important;
  padding: 16px !important;
  display: grid;
  gap: 12px;
  align-content: start;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-head { display: flex; align-items: flex-start; gap: 10px; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-title { flex: 1; min-width: 0; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-title h2 { margin: 0 !important; font: 700 18px/1.3 var(--mu-font-head) !important; color: var(--mu-popup-text) !important; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-title p { margin: 3px 0 0; color: var(--mu-popup-muted); font: 500 11px/1.4 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 5px 11px;
  border: 1px solid #77634280;
  border-radius: 999px;
  color: var(--mu-popup-gold);
  font: 700 11px/1.2 var(--mu-font-body);
  text-transform: uppercase;
  letter-spacing: .04em;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice.is-success .tl2-invoice-state { color: #5f9a72; border-color: #5f9a72; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px 14px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #3a3f45;
  border-radius: 7px;
  background: #151a1f;
}
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-grid > div { min-width: 0; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-grid dt { margin: 0; color: #aeb4bc; font: 400 11px/1.35 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-grid dd { margin: 1px 0 0; color: var(--mu-popup-text); font: 600 13px/1.35 var(--mu-font-body); overflow-wrap: anywhere; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-grid > .tl2-invoice-item-full { grid-column: 1 / -1; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice .mu-v2-notice { margin: 0; }
body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice .mu-v2-notice b { color: #f2d49b; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2 { gap: 8px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filter-row { grid-template-columns: minmax(0,1fr) auto; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-min input { width: 76px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-go { grid-column: 1 / -1; min-height: 40px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-go.is-idle { display: none; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content td.tl2-td-asset { width: 44px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table > tbody > tr > td { padding: 7px 8px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-qty { font-size: 13px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2 { gap: 6px; position: relative; }
  /* Chủ web chốt 26/09: phân trang KHÔNG lên hàng tiêu đề nữa — nằm ở đáy thẻ danh sách (hàng mỏng 44px, shared-ui.css). */
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table > thead th { padding-top: 5px !important; padding-bottom: 5px !important; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filters { grid-template-columns: minmax(200px,.8fr) minmax(0,1.2fr); align-items: center; gap: 6px; }
  /* Segments are real 44px targets: the track loses its inner padding instead of the buttons losing height. */
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filters .mu-v2-tabs { min-height: 46px; padding: 0; gap: 0; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-filters .mu-v2-tabs > button { min-height: 44px; padding: 6px 10px !important; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset-btn,
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-go { min-height: 44px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-min { min-height: 44px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-min input { min-height: 42px !important; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content table.tl2-table > tbody > tr > td { height: var(--tl2-row-h, 35px); padding: 2px 8px !important; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset { width: 28px; height: 28px; border-radius: 6px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] #index_content .tl2-asset img { width: 20px; height: 20px; }
  /* Asset picker in the side panel: icon + name on one line, 3 columns, so all 15 fit without scrolling. */
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-tile { flex-direction: row; justify-content: flex-start; gap: 6px; min-height: 44px; padding: 4px 6px; text-align: left; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-badge { flex: none; width: 30px; height: 30px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-badge img { width: 22px; height: 22px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-badge-all { font-size: 9px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-name { font-size: 11px; line-height: 1.2; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-invoice { padding: 12px !important; gap: 8px; }
}
@media (min-width: 701px) {
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

/* ======================================================================================
   2. Ví gia đình — /web/wallet.shtml (wallet_v2.tpl)
   One frame: heading, server tabs, a compact balance card and the member list; only the member list scrolls
   (inside its card). A member's amount + direction buttons open in a sheet ("Chuyển"), the static notes in "Lưu ý".
   Portrait phones stack the two cards; landscape and PC/tablet put them side by side.
   ====================================================================================== */
body[data-mu-preview][data-mu-page="web-wallet"] #index_content:not([hidden]) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2 {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2 > .mu-v2-page-heading { flex: none; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-servers { flex: none; margin: 0; min-height: 46px; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-servers > button { flex: 1 1 0; min-width: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content #fwpMsg { flex: none; margin: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #77634270;
  border-radius: 8px;
  background: #1a2026;
  min-width: 0;
  min-height: 0;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-balance { flex: none; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-members { flex: 1 1 auto; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-card .mu-v2-notice { margin: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-card-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  min-height: 24px;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-label { color: var(--mu-popup-text); font: 700 14px/1.3 var(--mu-font-head); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-quota { flex: none; margin: -2px 0 0; color: #d5b77a; font: 600 12px/1.35 var(--mu-font-body); }
/* Card-head buttons ("Lưu ý", "Thêm acc con"): small gold text buttons (painted 32px, touch area 44px). */
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-head-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  margin: -4px -4px -4px 0;
  padding: 4px 8px;
  border: 1px solid #665438;
  border-radius: 6px;
  background: #22292b;
  color: #e4c386;
  font: 700 12px/1.2 var(--mu-font-body);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-head-btn::after { content: ""; position: absolute; inset: -6px -4px; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-head-btn:is(:hover,:focus-visible) { border-color: #e7c78d; background: #2b2a24; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-head-btn svg { width: 16px; height: 16px; fill: currentColor; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-bal {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--mu-popup-gold);
  font: 800 clamp(26px,4vw,34px)/1.1 var(--mu-font-head);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-bal small { color: #b9b8b5; font: 600 13px/1.2 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-mini { padding: 6px 10px; font-size: 12px; line-height: 1.4; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-mini a { color: #f2d49b; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #2a3036;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-auto-text { display: grid; gap: 1px; min-width: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-auto-text b { color: var(--mu-popup-text); font: 600 13px/1.3 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-auto-text span { color: #d5b77a; font: 600 12px/1.3 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-auto .mu-v2-btn { flex: none; min-width: 76px; }
/* Member list: the only scrolling part of the page. */
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-rows {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 7px 8px 7px 12px;
  border: 1px solid #2a3036;
  border-radius: 7px;
  background: #151a1f;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-who { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-who > b { color: var(--mu-popup-text); font: 700 14px/1.3 var(--mu-font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-who > span { color: #aeb4bc; font: 400 12px/1.35 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-game { flex: none; display: grid; justify-items: end; gap: 1px; max-width: 34%; text-align: right; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-game > span { color: #aeb4bc; font: 400 11px/1.3 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-num { color: var(--mu-popup-gold); font: 700 14px/1.2 var(--mu-font-head); font-variant-numeric: tabular-nums; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-move { flex: none; min-width: 84px; min-height: 44px; padding: 8px 14px !important; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-card-foot { flex: none; display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #2a3036; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-card-foot .mu-v2-btn { min-height: 44px; }

/* Sheets (transfer, notes, history, sub-account) live on <body>: controls get the content skin explicitly. */
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act { display: grid; gap: 10px; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-info { margin: 0; color: #c9c4ba; font: 400 13px/1.55 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-info b { color: var(--mu-popup-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-quota { color: #d5b77a; font-size: 12px; font-weight: 600; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-err { margin: -4px 0 0; color: #e08b8b; font: 600 12px/1.4 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-err[hidden] { display: none; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-btns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-btns .mu-v2-btn { min-height: 46px; white-space: normal; line-height: 1.25; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-info { display: grid; gap: 10px; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-info p { margin: 0; padding-left: 12px; border-left: 2px solid #77634280; color: #d6d0c3; font: 400 13px/1.55 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-slot { display: grid; gap: 10px; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-slot p { margin: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-slot .mu-v2-notice { margin: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-progress { color: #f2d49b; font-weight: 600; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-field { display: grid; gap: 5px; margin: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-field span { color: #d6d0c3; font: 600 12px/1.3 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-in {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid #776342;
  border-radius: 6px;
  background: #10151b;
  color: var(--mu-popup-text);
  font: 600 16px/1.4 var(--mu-font-body);
  -moz-appearance: textfield;
}
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-in::-webkit-outer-spin-button,
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-in:focus { outline: none; border-color: #e0bd7a; box-shadow: 0 0 0 2px #e0bd7a31; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist { display: grid; gap: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 2px 12px;
  padding: 9px 0;
  border-bottom: 1px solid #3a3f45;
}
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-main,
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-side { display: grid; gap: 2px; min-width: 0; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-side { text-align: right; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-main b { color: var(--mu-popup-text); font: 700 13px/1.3 var(--mu-font-head); }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-main span,
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-side time { color: #aeb4bc; font: 400 11px/1.3 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist-side .fwp2-num { color: var(--mu-popup-gold); font: 700 14px/1.3 var(--mu-font-head); font-variant-numeric: tabular-nums; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-st { font: 600 11px/1.3 var(--mu-font-body); color: #e7c78d; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-st-done .fwp2-st { color: #5f9a72; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-st-rolled_back .fwp2-st { color: #9ea3a6; }
body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-hist .fwp2-note { margin: 10px 0 0; color: #aeb4bc; font: 400 12px/1.5 var(--mu-font-body); }

/* Side by side (low landscape, and PC/tablet with room): balance on the left, members on the right. */
@media (max-height: 520px) and (orientation: landscape), (min-width: 701px) and (min-height: 521px) {
  /* Server tabs and messages head the left column, so the member list gets the full height on the right. */
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-body {
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.25fr);
    grid-template-rows: auto auto minmax(0,1fr);
    align-items: stretch;
  }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-servers { grid-column: 1; grid-row: 1; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content #fwpMsg { grid-column: 1; grid-row: 2; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-balance { grid-column: 1; grid-row: 3; align-self: start; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #776342 #11151b; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-members { grid-column: 2; grid-row: 1 / 4; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2,
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-body { gap: 6px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-servers { min-height: 44px; padding: 0; gap: 0; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-servers > button { min-height: 42px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-card { padding: 8px 10px; gap: 6px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-bal { font-size: 24px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-auto { padding-top: 6px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-row { min-height: 50px; padding: 4px 6px 4px 10px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-mini { order: 3; padding: 5px 9px; font-size: 11.5px; }
  /* The auto-transfer action comes right under the balance; the informational notices follow (they may scroll). */
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-auto { order: 2; padding: 6px 0; border-top: 1px solid #2a3036; border-bottom: 1px solid #2a3036; }
}
/* Phones: the day quota is shown in the transfer sheet instead (it only matters while transferring). */
@media (max-width: 700px) and (orientation: portrait), (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-members > .fwp2-quota { display: none; }
}
@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-bal { font-size: 28px; }
}

/* ======================================================================================
   3. Báo lỗi — /report.shtml (overlay on report.tpl)
   Heading = .rp-hero-row; the duplicate info box, colored icon and V1 "Back" link are hidden.
   ====================================================================================== */
body[data-mu-preview][data-mu-page="report"] #index_content:not([hidden]) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--mu-popup-text) !important;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-hero {
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-hero::before,
body[data-mu-preview][data-mu-page="report"] #index_content .rp-icon,
body[data-mu-preview][data-mu-page="report"] #index_content .rp-alert,
body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit .d-flex { display: none !important; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-title-left { gap: 0 !important; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-title {
  color: var(--mu-popup-text) !important;
  font: 800 clamp(20px,2.4vw,24px)/1.15 var(--mu-font-head) !important;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-sub {
  display: block !important;
  margin: 2px 0 0 !important;
  color: #b8b8b6 !important;
  font: 500 11px/1.35 var(--mu-font-body) !important;
  white-space: normal !important;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-chip:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 6px;
  width: auto !important;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid #77634280;
  border-radius: 999px;
  background: #1a2026;
  color: var(--mu-popup-gold);
  font: 700 11px/1.2 var(--mu-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-chip i { color: var(--mu-popup-gold); }
body[data-mu-preview][data-mu-page="report"] #index_content form#report {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px !important;
  border: 1px solid #77634270 !important;
  border-radius: 8px !important;
  background: #1a2026 !important;
  box-shadow: none !important;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid #3a3f45;
  border-radius: 999px;
  background: #151a1f;
  color: #e1dcd1;
  font: 600 11px/1.2 var(--mu-font-body);
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-meta-item i { color: var(--mu-popup-gold); }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-chip[hidden] { display: none !important; }
/* The message box takes the spare height of the panel (no empty band between captcha and the send button). */
body[data-mu-preview][data-mu-page="report"] #index_content .rp-panel { display: flex; flex-direction: column; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child { flex: 1 0 auto; display: flex; flex-direction: column; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child textarea.form-control { flex: 1 0 auto; }
body[data-mu-preview][data-mu-page="report"] #index_content :is(.rp-field label,.rp-captcha label) {
  display: block;
  margin: 0 0 4px !important;
  color: #d6d0c3 !important;
  font: 600 11px/1.3 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-field .form-control,
body[data-mu-preview][data-mu-page="report"] #index_content .rp-captcha .form-control {
  padding: 10px 12px !important;
  font-weight: 400 !important;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp-field textarea.form-control { min-height: 112px; line-height: 1.45 !important; resize: vertical; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp2-counter {
  display: block;
  margin-top: 4px;
  text-align: right;
  color: #aeb4bc;
  font: 500 11px/1.3 var(--mu-font-body);
  font-variant-numeric: tabular-nums;
}
body[data-mu-preview][data-mu-page="report"] #index_content .rp2-counter.is-full { color: var(--mu-popup-gold); }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-captcha { margin-top: 10px; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-captcha .mb-3 { margin-bottom: 0 !important; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-captcha .form-control { padding-right: 140px !important; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-captcha .btn-inputright { top: 50%; right: 6px; transform: translateY(-50%); }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-captcha .captcha_img { height: 36px; border-radius: 4px; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit { flex: none; margin: 0 !important; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit :is(.mb-1,.mt-2) { margin: 0 !important; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit .btn-primary-s1 { min-height: 48px; font-size: 14px !important; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit .iconarrowbtn-right { display: none !important; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-page,
  body[data-mu-preview][data-mu-page="report"] #index_content form#report { gap: 8px; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-panel { padding: 11px 12px !important; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-field textarea.form-control { min-height: 96px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-page { gap: 6px; }
  body[data-mu-preview][data-mu-page="report"] #index_content form#report {
    display: grid;
    grid-template-columns: minmax(0,1fr) 200px;
    gap: 8px;
    align-items: stretch;
  }
  /* Panel becomes a 2-column grid: character + captcha on the left, the message filling the right. */
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-panel {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    grid-template-rows: auto auto minmax(0,1fr);
    gap: 8px 10px;
    align-content: start;
    padding: 9px 11px !important;
  }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-meta { grid-column: 1 / -1; margin: 0; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid { display: contents; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:first-child { grid-column: 1; grid-row: 2; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child { grid-column: 2; grid-row: 2 / 4; display: flex; flex-direction: column; min-height: 0; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child textarea.form-control { flex: 1 1 0; min-height: 64px; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-captcha { grid-column: 1; grid-row: 3; margin-top: 0; align-self: start; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit { align-self: end; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit .btn-primary-s1 { min-height: 44px; }
}

/* ======================================================================================
   4. Mã quà — /giftcode.shtml (overlay; giftcode.css already paints the shell, this file finishes it)
   ====================================================================================== */
body[data-mu-preview][data-mu-page="giftcode"] #index_content:not([hidden]) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content form#giftcode,
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-page,
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-layer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-layer { gap: 8px; }
/* Soát đồng bộ 26/09: #msgret rỗng vẫn nhận gap của cột flex (header tụt 8–10px so với mọi trang), và
   margin-bottom của thẻ header (unify.css) cộng thêm gap thành khe đôi 16–18px → header sát mép trên như
   trang khác, khe header→nội dung = gap của lớp (8px, ngang thấp 6px). */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-layer > #msgret:empty { display: none !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-hero > .mu-v2-page-heading[data-mu-v2-head-card] { margin-bottom: 0 !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-layer > div[style*="grid"] {
  flex: 1 1 auto;
  min-height: 0;
  display: grid !important;
  grid-template-columns: 100% !important;
  grid-template-rows: minmax(0,1fr);
}
/* Heading: hero chrome off, Back + title + Thể lệ on one row (shared .mu-v2-page-heading grid). */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-hero {
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-title-icon { display: none !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-title-left { gap: 0 !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-title-copy { min-height: 0 !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-title {
  font: 800 clamp(20px,2.4vw,24px)/1.15 var(--mu-font-head) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-subtitle {
  display: block !important;
  margin: 2px 0 0 !important;
  color: #b8b8b6 !important;
  font: 500 11px/1.35 var(--mu-font-body) !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-rule-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  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;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  transform: none !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-rule-btn:is(:hover,:focus-visible) { border-color: var(--mu-popup-border) !important; background: #323836 !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-rule-btn i { color: var(--mu-popup-gold); }
/* Form shell fills the frame; the public-code list is the only scrolling part. */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-shell {
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
  overflow: hidden;
  border: 1px solid #77634270 !important;
  background: #1a2026 !important;
  border-radius: 8px !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-codebar,
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-grid { flex: none; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-codebar { grid-template-columns: minmax(0,1fr) auto !important; gap: 8px !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-label {
  padding-left: 0 !important;
  color: #d6d0c3 !important;
  font: 600 11px/1.3 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-input,
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-readonly {
  min-height: 44px !important;
  padding: 8px 12px !important;
  font: 500 16px/1.4 var(--mu-font-body) !important;
  transform: none !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-readonly { opacity: .75; cursor: default !important; }
/* The grey "Locked" badge from V1 goes; readonly styling already says it. */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-field.is-readonly::after { display: none !important; content: none !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-submit {
  min-height: 44px !important;
  padding: 9px 16px !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  white-space: nowrap;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-result { flex: none; margin: 0; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-title {
  flex: none;
  font: 700 12px/1.3 var(--mu-font-head) !important;
  color: #aeb4bc !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-title i { color: var(--mu-popup-gold); }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #776342 #11151b;
  align-content: start;
  padding-right: 2px;
}
/* Code rows (.giftcode-neo-item/-code/-info/-end): see "Giftcode, round 3" further down. */
/* Rules popup: centred card on PC, bottom sheet on portrait phones, side panel on low landscape (shared-ui does the frame). */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-modal.is-open {
  justify-content: center !important;
  align-items: center !important;
  padding: 12px;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-dialog {
  width: min(540px,100%) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 15px 17px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-head { margin-bottom: 8px; padding-right: 0; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-title-icon { display: none !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-title-label {
  font: 700 18px/1.3 var(--mu-font-head) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-title-sub { font: 500 11px/1.4 var(--mu-font-body) !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-row { padding: 10px 0; gap: 11px; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-num { width: 26px; height: 26px; border-radius: 7px; font: 700 13px/1 var(--mu-font-head) !important; letter-spacing: 0 !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-text { font: 400 13px/1.5 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc-quick-code {
  min-height: 36px;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font: 700 12px/1.2 var(--mu-font-head) !important;
  letter-spacing: .04em !important;
  touch-action: manipulation;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc-quick-code strong { font: inherit !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc-quick-code i { display: none; }
/* Result popup: neutralise the SweetAlert skin the V1 template injects (uppercase Google Sans, blue 14px pills). */
body[data-mu-preview][data-mu-page="giftcode"] .swal2-title {
  font-family: var(--mu-font-head) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mu-popup-text) !important;
}
body[data-mu-preview][data-mu-page="giftcode"] .swal2-popup.swal2-modal { border-radius: 10px !important; padding: 17px !important; }
body[data-mu-preview][data-mu-page="giftcode"] .swal2-popup .swal2-html-container { color: #e1dcd1 !important; font: 400 13px/1.55 var(--mu-font-body) !important; }
body[data-mu-preview][data-mu-page="giftcode"] .swal2-popup .swal2-actions { flex-direction: row !important; gap: 9px !important; }
body[data-mu-preview][data-mu-page="giftcode"] .swal2-popup .swal2-actions .swal2-styled {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px;
  border-radius: 6px !important;
  font: 700 13px/1.25 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  transform: none !important;
  filter: none !important;
}
body[data-mu-preview][data-mu-page="giftcode"] .swal2-styled.swal2-confirm { border: 1px solid #f0d5a0 !important; }
body[data-mu-preview][data-mu-page="giftcode"] .swal2-styled.swal2-cancel { border: 1px solid #665438 !important; background: #292f31 !important; color: var(--mu-popup-text) !important; }

@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-layer { gap: 8px; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-shell { padding: 11px !important; gap: 8px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-codebar { grid-template-columns: minmax(0,1fr) !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-submit { width: 100%; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-modal.is-open { align-items: flex-end !important; padding: 0; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-dialog { width: 100% !important; padding: 6px 15px max(15px,env(safe-area-inset-bottom)) !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-layer { gap: 6px; }
  /* Two columns (form | list): see "Giftcode, round 3" (flex row, card hugs its content). */
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-shell { gap: 12px !important; padding: 10px 12px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-input,
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-readonly,
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-submit,
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-rule-btn { min-height: 40px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-modal.is-open { justify-content: flex-end !important; align-items: stretch !important; padding: 5px; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-rule-dialog { width: min(460px,100%) !important; max-height: 100% !important; padding: 10px 14px !important; }
}

/* Giftcode, round 2: locked character/server fields → one short line (wallet.js adds .gc2-target and .gc2-compact),
   sentence-case list title with the V2 gift icon. */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-shell.gc2-compact .giftcode-neo-grid { display: none !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-target {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-width: 0;
  color: #c9c4ba;
  font: 500 13px/1.35 var(--mu-font-body);
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-target > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-target-icon { flex: none; width: 16px; height: 16px; color: var(--mu-popup-gold); }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-title {
  display: flex !important;
  align-items: center;
  gap: 7px;
  font: 700 14px/1.3 var(--mu-font-head) !important;
  color: var(--mu-popup-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-list-icon { flex: none; width: 16px; height: 16px; color: var(--mu-popup-gold); }
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-title { font-size: 13px !important; }
}

/* PC / tablet (enough height): both pages fill the frame like the phone layout, no empty lower half.
   Report: the message box takes the spare height, the send button sits under the card on the right.
   Giftcode: tablet keeps one column with the code list filling the card; wide screens put the form on the left
   and the code list on the right (as low landscape does). */
@media (min-width: 701px) and (min-height: 521px) {
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child textarea.form-control { min-height: 160px; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit { align-self: flex-end; width: min(320px,100%); }
}
@media (min-width: 980px) and (min-height: 521px) {
  /* Two columns (form | list): see "Giftcode, round 3" (flex row, card hugs its content). */
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-shell { gap: 16px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list { padding-left: 16px; border-left: 1px solid #2a3036; }
}

/* Ví gia đình not opened / view error: V2 empty state with Back instead of a SweetAlert over a blank page. */
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-closed { gap: 10px; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 18px 16px;
  border: 1px solid #77634270;
  border-radius: 8px;
  background: #1a2026;
  text-align: center;
}
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty-icon { width: 40px; height: 40px; color: var(--mu-popup-gold); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty-title { margin: 0; color: var(--mu-popup-text); font: 700 16px/1.35 var(--mu-font-head); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty-text { margin: 0; max-width: 420px; color: var(--mu-popup-muted); font: 400 13px/1.5 var(--mu-font-body); }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty-actions { display: flex; gap: 8px; margin-top: 6px; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty-actions .mu-v2-btn { min-height: 44px; padding: 10px 18px !important; text-decoration: none; }
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty { padding: 10px 14px; gap: 5px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty-icon { width: 30px; height: 30px; }
  body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty-actions { margin-top: 2px; }
}

/* SweetAlert result popups on these pages: shared-ui.css forces every .swal2-icon to display:flex, so all five
   icons (error, question, warning, info, success) stack up. Keep only the one SweetAlert itself shows. */
body[data-mu-preview]:is([data-mu-page="bank-trade_log"],[data-mu-page="web-wallet"],[data-mu-page="report"],[data-mu-page="giftcode"]) .swal2-popup.swal-neo-dialog .swal2-icon[style*="display: none"],
body[data-mu-preview]:is([data-mu-page="bank-trade_log"],[data-mu-page="web-wallet"],[data-mu-page="report"],[data-mu-page="giftcode"]) .swal2-popup.swal-neo-dialog .swal2-icon[style*="display:none"] { display: none !important; }

/* Hub "Ví": the heading gets programmatic focus on open (tabindex=-1); no browser focus ring on a non-control. */
body[data-mu-preview][data-mu-page="hub-wallet"] .mu-hub-heading:focus { outline: none; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content :is(.gc2-target-icon,.gc2-list-icon) { fill: currentColor; }
body[data-mu-preview][data-mu-page="web-wallet"] #index_content .fwp2-empty svg.fwp2-empty-icon { fill: var(--mu-popup-gold); opacity: .9; }

/* Giftcode, round 3 (26/09, chủ web: "cân đối hơn").
   - The card hugs its content (max = the frame), so no empty lower half; a long list scrolls inside the card.
   - Every code row has the same parts and height: chip | title + one meta line | "Dùng". Rows without a
     description or end date keep the same height, their title centred.
   - The chip column is as wide as the longest code in every row (subgrid over the list's three columns); a code
     longer than the cap is ellipsed (wallet.js shrinks codes of 11+ characters). Without subgrid: a fixed column.
   - wallet.js makes the whole row one button (role=button, Enter/Space): it fills #my-code and focuses it, never
     submits. .is-picked marks the row whose code is in the box. */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-shell { align-self: start; max-height: 100%; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list { flex: 0 1 auto; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body {
  --gc2-row-h: 54px;
  --gc2-chip-h: 34px;
  --gc2-chip-max: 124px;
  flex: 0 1 auto;
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr) auto !important;
  grid-auto-rows: minmax(var(--gc2-row-h), auto);
  gap: 6px 10px !important;
  align-content: start;
  padding: 0 2px 0 0;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body > .giftcode-neo-item {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: min(var(--gc2-chip-max), 34%) minmax(0,1fr) auto !important;
  grid-template-columns: subgrid !important;
  grid-template-areas: none !important;
  align-items: center !important;
  align-content: center !important;
  gap: 0 10px !important;
  min-width: 0 !important;
  min-height: var(--gc2-row-h);
  margin: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid #343b40 !important;
  border-radius: 6px !important;
  background: #1f2529 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--mu-popup-text) !important;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
@media (hover: hover) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body > .giftcode-neo-item:hover { border-color: #665438 !important; background: #232a2e !important; }
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body > .giftcode-neo-item:active { background: #262d31 !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body > .giftcode-neo-item:focus { outline: none; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body > .giftcode-neo-item:focus-visible { outline: 2px solid var(--mu-popup-gold); outline-offset: -2px; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body > .giftcode-neo-item.is-picked {
  border-color: #9b7e50 !important;
  background: #252a29 !important;
  box-shadow: inset 3px 0 0 var(--mu-popup-gold) !important;
}
/* Chip: one line, capitals, slight tracking, tabular digits; charcoal with the muted gold border. */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .giftcode-neo-code {
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
  display: block !important;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  max-width: var(--gc2-chip-max);
  height: var(--gc2-chip-h);
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid #7a6440 !important;
  border-radius: 5px !important;
  background: #13181c !important;
  box-shadow: none !important;
  color: #e7c78d !important;
  font: 700 13px/calc(var(--gc2-chip-h) - 2px) var(--mu-font-head) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em !important;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .giftcode-neo-code.gc2-code-long { font-size: 11.5px !important; letter-spacing: .03em !important; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item.is-picked > .giftcode-neo-code { border-color: #c9a86b !important; }
/* Title (one line) over the meta line: description · clock + end date. The date never gets cut. */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .giftcode-neo-info {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: stretch !important;
  gap: 2px !important;
  min-width: 0 !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item .giftcode-neo-info-title {
  display: block;
  margin: 0 !important;
  color: #f4eee3 !important;
  font: 600 13px/1.3 var(--mu-font-body) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item .gc2-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #aeb4bc;
  font: 500 11.5px/1.3 var(--mu-font-body);
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-meta > .giftcode-neo-info-desc {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-meta > .giftcode-neo-end {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  margin: 0 !important;
  color: #d2bb8c !important;
  font: inherit !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-meta > .giftcode-neo-info-desc + .giftcode-neo-end::before { content: "·"; color: #737a80; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-meta > .giftcode-neo-end i { margin: 0 !important; font-size: 10px; }
/* "Dùng": the visible action of the row (the row itself is the button, 44px+ tall). */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .gc2-use {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 6px 0 10px;
  border: 1px solid #665438;
  border-radius: 5px;
  background: #22292b;
  color: #e4c386;
  font: 700 12.5px/1 var(--mu-font-body);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-use-icon { flex: none; width: 13px; height: 13px; fill: currentColor; }
body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item.is-picked > .gc2-use { border-color: #f0d39a; background: linear-gradient(120deg,#f2d9a6,#cba46a); color: #21190e; }
/* Narrow portrait: "Dùng" without the arrow, so the title keeps more of its line. */
@media (max-width: 420px) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .gc2-use { padding: 0 10px; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-use-icon { display: none; }
}
/* One column (phone portrait, tablet): the form parts are plain items of the card (wallet.js wraps them in .gc2-form).
   PC and low landscape: a flex row — form 5 : list 7 (a code is short, titles are long). A single-line flex row
   clamps its height to the card's max-height, so the stretched list column scrolls inside instead of the page. */
body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-form { display: contents; }
@media (min-width: 980px) and (min-height: 521px), (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-shell { display: flex !important; flex-direction: row; align-items: stretch; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-form {
    flex: 5 1 0;
    min-width: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list { flex: 7 1 0; min-width: 0; min-height: 0; align-self: stretch; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .gc2-form { gap: 8px; }
}
@media (min-width: 980px) and (min-height: 521px) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body { --gc2-row-h: 56px; --gc2-chip-h: 36px; --gc2-chip-max: 150px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body { --gc2-row-h: 46px; --gc2-chip-h: 30px; --gc2-chip-max: 120px; row-gap: 5px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-list-body > .giftcode-neo-item { padding: 5px 7px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .giftcode-neo-code { font-size: 12px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .giftcode-neo-code.gc2-code-long { font-size: 11px !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item .giftcode-neo-info-title { font-size: 12.5px !important; line-height: 1.25 !important; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item .gc2-meta { font-size: 11px; line-height: 1.25; }
  body[data-mu-preview][data-mu-page="giftcode"] #index_content .giftcode-neo-item > .gc2-use { height: 28px; padding: 0 5px 0 8px; font-size: 12px; }
}

/* Report, low landscape (round 2): the panel takes the full width; the send button sits at the bottom of the left
   column (character + captcha), the message fills the right column. */
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="report"] #index_content form#report { display: flex; flex-direction: column; position: relative; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-panel {
    flex: 1 1 auto;
    grid-template-columns: 40% minmax(0,1fr);
    grid-template-rows: auto auto auto minmax(0,1fr) 44px;
    overflow: hidden;
  }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child { grid-column: 2; grid-row: 2 / 6; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp2-counter { display: none; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp2-counter { margin-top: 2px; }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit {
    position: absolute;
    left: 12px;
    bottom: 10px;
    width: calc((100% - 24px) * .4);
  }
  body[data-mu-preview][data-mu-page="report"] #index_content .rp-submit .btn-primary-s1 { width: 100%; min-height: 44px; }
}

/* Asset picker in the low-landscape side panel: 5 columns of short tiles (icon over a name of at most two lines),
   so all 15 types fit in three rows without scrolling. Overrides the one-line 3-column tiles above. */
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-sheet .tl2-asset-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-sheet .tl2-asset-tile { flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px; min-height: 58px; padding: 4px 3px; text-align: center; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-sheet .tl2-asset-badge { width: 28px; height: 28px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-sheet .tl2-asset-badge img { width: 22px; height: 22px; }
  body[data-mu-preview][data-mu-page="bank-trade_log"] .tl2-asset-sheet .tl2-asset-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; font-size: 10.5px; line-height: 1.15; }
}

/* Report counter (round 3): inside the bottom-right corner of the message box, so it never depends on the height
   left under the box (it sat on the card border in low landscape). The box no longer resizes by hand: it fills. */
body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child { position: relative; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp-grid > .rp-field:last-child textarea.form-control { padding-bottom: 26px !important; resize: none; }
body[data-mu-preview][data-mu-page="report"] #index_content .rp2-counter {
  position: absolute;
  right: 9px;
  bottom: 6px;
  margin: 0 !important;
  padding: 1px 5px;
  border-radius: 4px;
  background: #10151be6;
  pointer-events: none;
}

/* Confirm popups of this group (transfer, sub-account, auto-transfer, giftcode, report): the title and the two
   buttons always stay visible; only the body scrolls when the frame is short (844×300 cut the buttons off). */
body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-popup-dialog.mu-v2-confirm { overflow: hidden; }
body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-confirm :is(.mu-v2-confirm-head,.mu-v2-confirm-actions) { flex: none; }
body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-confirm-body { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-height: 520px) and (orientation: landscape) {
  /* Summary in two columns of label-over-value pairs, so a four-line summary takes two rows. */
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-confirm-body { gap: 8px; }
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-confirm-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 14px; padding: 8px 11px; }
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-confirm-summary > div { display: grid; gap: 0; }
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-confirm-summary dd { font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
  body[data-mu-preview]:is([data-mu-page="web-wallet"],[data-mu-page="giftcode"],[data-mu-page="report"]) .mu-v2-confirm-summary > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Transfer sheet: amount and both direction buttons on one row, under a short info block. */
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: end; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-info { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-field { grid-column: 1; grid-row: 2; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-field > span { display: none; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-btns { display: contents; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-btns > :first-child { grid-column: 2; grid-row: 2; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-btns > :last-child { grid-column: 3; grid-row: 2; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-btns .mu-v2-btn { min-height: 46px; max-width: 150px; padding: 6px 12px !important; }
  body[data-mu-preview][data-mu-page="web-wallet"] .mu-v2-sheet .fwp2-act-err { grid-column: 1 / -1; grid-row: 3; margin: 0; }
}