/* One page header for every V2 subpage, copied from the approved recharge header (/recharge/vnqr.shtml):
   a bordered charcoal card, Back 42px inside it, title Manrope 800 20-24px, one muted subtitle line,
   compact secondary actions with gold text and icon. Loaded LAST in the shell so it wins over page-group
   stylesheets; Home and the recharge pages (owner's, already this design) are excluded.
   The card host is chosen by v2.js markHeadCards(): the page's own hero box when the heading is its first
   child, otherwise the heading row itself — never a card inside a card. */

body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content [data-mu-v2-head-card] {
  padding: 9px 12px !important;
  margin: 0 0 8px !important;
  border: 1px solid #665438 !important;
  border-radius: 8px !important;
  background: #1e2528 !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #f6f1e8 !important;
}
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content [data-mu-v2-head-card]::before,
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content [data-mu-v2-head-card]::after { display: none !important; }
/* When the hero box is the card, the heading row inside it stays flat. */
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content [data-mu-v2-head-card] > .mu-v2-page-heading:not([data-mu-v2-head-card]) {
  padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
}

/* Title and subtitle scale (same as .vq-title-text / .vq-subtitle). */
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading .mu-v2-page-heading-title :is(h1, h2, h3, [class*="title-text"], [class$="-title"]):not([class*="icon"]) {
  margin: 0 !important;
  font: 800 clamp(20px, 2.4vw, 24px)/1.15 var(--mu-font-head, Manrope, 'Be Vietnam Pro', sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #f6f1e8 !important;
}
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading .mu-v2-page-heading-title :is(p, small, [class*="subtitle"], [class*="-sub"]) {
  margin: 2px 0 0 !important;
  font: 500 11.5px/1.35 var(--mu-font-body, 'Be Vietnam Pro', sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #b8b8b6 !important;
}

/* Secondary header actions (Lịch sử, Hướng dẫn, Luật, info): compact, gold text + icon — the recharge .vq-rule-btn. */
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading-actions > :is(button, a, [role="button"]):not(.mu-v2-btn-primary):not([class*="primary"]):not([class*="sell"]):not([class*="create"]):not([role="tab"]):not([aria-selected]):not(.mu-v2-tabs) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border: 1px solid #665438 !important;
  border-radius: 6px !important;
  background: #22292b !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #e4c386 !important;
  font: 700 13px/1.2 var(--mu-font-body, 'Be Vietnam Pro', sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
}
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading-actions > :is(button, a, [role="button"]):not(.mu-v2-btn-primary):not([class*="primary"]):not([class*="sell"]):not([class*="create"]):not([role="tab"]):not([aria-selected]):not(.mu-v2-tabs) :is(i, svg, .mu-v2-ico) {
  color: #e4c386 !important;
  fill: currentColor;
  font-size: 14px !important;
}
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading-actions > :is(button, a, [role="button"]):not(.mu-v2-btn-primary):not([class*="primary"]):not([class*="sell"]):not([class*="create"]):not([role="tab"]):not([aria-selected]):not(.mu-v2-tabs):is(:hover, :focus-visible) {
  border-color: #e7c78d !important;
  background: #2b2a24 !important;
}
/* Vùng chạm ≥44px cho MỌI nút ở vùng actions của header (vẽ 38px, ngang thấp 34px — hình giữ nguyên): lớp ::before
   trong suốt phủ 4px quanh nút, không thấp/hẹp hơn 44px. Dùng ::before vì ::after là spinner .mu-v2-btn[data-loading].
   Không đặt pointer-events: lớp phủ kế thừa của nút (nút tắt bằng pointer-events:none vẫn tắt). Nút cạnh nhau cách
   6-7px nên phần chờm 1-2px thuộc nút đứng sau. */
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading-actions > :is(button, a, [role="button"]) {
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading-actions > :is(button, a, [role="button"])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 10px);
  min-width: 44px;
  height: calc(100% + 10px);
  min-height: 44px;
  transform: translate(-50%, -50%);
}
/* Nút chữ của chợ (.mk-neo-rule-btn) ở màn đứng bị trang đặt overflow:hidden để cắt chữ dài → lớp phủ bị cắt theo.
   Chỉ cắt chiều ngang (clip vẫn cho dấu …), chiều dọc để lộ vùng chạm; chữ không tràn dọc nên hình không đổi.
   Trình duyệt chưa có overflow:clip giữ nguyên như cũ. */
@media (orientation: portrait) {
  @supports (overflow: clip) {
    body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content :is(.sc-page .mu-v2-page-heading-actions > .mk-neo-rule-btn, .mu-v2-page-heading-actions > .mk-neo-rule-btn-sell) {
      overflow-x: clip !important;
      overflow-y: visible !important;
    }
  }
}
/* Phones: the recharge header tightens the same way. */
@media (max-width: 700px) and (orientation: portrait) {
  body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content [data-mu-v2-head-card] { padding: 8px 10px !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content [data-mu-v2-head-card] { padding: 6px 9px !important; margin-bottom: 6px !important; }
  body[data-mu-preview]:not([data-mu-page="home"]):not([data-mu-page^="recharge"]) #index_content .mu-v2-page-heading-actions > :is(button, a, [role="button"]):not(.mu-v2-btn-primary):not([class*="primary"]):not([class*="sell"]):not([class*="create"]):not([role="tab"]):not([aria-selected]):not(.mu-v2-tabs) { min-height: 34px !important; }
}