/* =============================================================================
   panel-v2.css — HỆ THỐNG DASHBOARD cho /kenh, /gioi-thieu và /tai-khoan
   =============================================================================
   Nạp SAU site.css + site-v2.css (và shop.css ở /kenh + /tai-khoan):
     <link rel="stylesheet" href="/site/site.css?v=7">
     <link rel="stylesheet" href="/site/site-v2.css?v=2">
     <link rel="stylesheet" href="/site/panel-v2.css?v=7">

   Nguyên tắc:
   - Chỉ dùng lại token của site-v2.css (--v2-acc/--v2-card/--v2-line/--v2-shadow/
     --v2-1..6/--v2-r). KHÔNG định nghĩa bảng màu mới, KHÔNG thêm màu mè.
   - Mọi class mới có tiền tố .pv- để không đụng site.css/shop.css.
   - Bố cục desktop (>=1080px): lưới 2 cột minmax(0,1fr) 360px, cột phải sticky.
     Mobile: 1 cột, đổi thứ tự bằng `order` + display:contents (không nhân bản DOM).
   - Không emoji. Icon là SVG inline trong HTML.
   ============================================================================= */

:root {
  --pv-acc: var(--v2-acc);
  --pv-acc-soft: var(--v2-acc-soft);
  --pv-acc-line: var(--v2-acc-line);
  --pv-card: var(--v2-card);
  --pv-card2: var(--v2-card2);
  --pv-line: var(--v2-line);
  --pv-txt: var(--v2-txt);
  --pv-dim: var(--v2-dim);
  --pv-soft: var(--v2-soft);
  --pv-well: var(--v2-well);
  --pv-r: var(--v2-r);
  --pv-r-sm: var(--v2-r-sm);
  --pv-shadow: var(--v2-shadow);
  --pv-gap: 22px;
  --pv-side: 360px;
  --pv-ok: var(--v2-ok);
  --pv-bad: #f87171;
}

/* =============================================================================
   1. KHUNG TRANG
   ============================================================================= */

.pv-main { display: flex; flex-direction: column; gap: var(--pv-gap); }
.pv-main > * { min-width: 0; }

/* Mobile-first: bóc 2 lớp cột để mọi card thành item trực tiếp của .pv-main,
   nhờ đó đổi thứ tự bằng `order` mà không phải nhân bản DOM. */
.pv-cols,
.pv-col-main,
.pv-col-side { display: contents; }

@media (max-width: 1079px) {
  .pv-head { order: 0; }
  #previewCard { order: 1; }
  #linkCard { order: 2; }
  #guestCard { order: 3; }
  #formCard { order: 4; }
  #ovlCard { order: 5; }
  #guideCard { order: 6; }
  #feeCard { order: 7; }
  #goalCard { order: 8; }
  #foot { order: 9; }
  .pv-ref { order: 1; }
  #loadErr { order: 9; }
}

@media (min-width: 1080px) {
  .pv-main { display: block; }
  .pv-head { margin-bottom: var(--pv-gap); }
  .pv-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--pv-side);
    gap: var(--pv-gap); align-items: start;
  }
  .pv-col-main { display: grid; gap: var(--pv-gap); min-width: 0; }
  .pv-col-side {
    display: grid; gap: var(--pv-gap); min-width: 0; align-content: start;
    align-self: start; position: sticky; top: 78px;
  }
}

/* =============================================================================
   2. CARD + NHỊP THỊ GIÁC (số thứ tự + tiêu đề mục)
   ============================================================================= */

.pv-card {
  min-width: 0; margin: 0; padding: 20px;
  background: linear-gradient(180deg, var(--pv-card), var(--pv-card2));
  border: 1px solid var(--pv-line); border-radius: var(--pv-r);
  box-shadow: var(--pv-shadow);
}
.pv-card > :last-child { margin-bottom: 0; }

.pv-card__h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px;
}
.pv-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 900; color: #170f2e;
  background: linear-gradient(145deg, var(--pv-acc), #8f6ae0);
}
.pv-h {
  font-size: .95rem; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--pv-soft); margin: 0;
}
.pv-sub { margin: 0; font-size: .88rem; color: var(--pv-dim); line-height: 1.55; }
.pv-card__body { margin-top: 14px; }
.pv-sep { height: 1px; background: var(--pv-line); border: 0; margin: 16px 0; }

/* =============================================================================
   3. HEADER STRIP — nhận diện kênh + hành động chính
   ============================================================================= */

.pv-head {
  min-width: 0; padding: 20px;
  background:
    radial-gradient(760px 220px at 0% 0%, var(--pv-acc-soft), rgb(0 0 0 / 0) 70%),
    linear-gradient(180deg, var(--pv-card), var(--pv-card2));
  border: 1px solid var(--pv-line); border-radius: var(--pv-r);
  box-shadow: var(--pv-shadow);
}
.pv-head__top {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start;
  justify-content: space-between;
}
.pv-head__ttl { min-width: 0; flex: 1 1 22rem; }
.pv-title { margin: 0 0 6px; font-size: 1.42rem; font-weight: 900; letter-spacing: -.2px; }

/* Hàng nhận diện: avatar + tên + slug chip + badge + nút phụ */
.pv-ident {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pv-line);
}
.pv-ava {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, var(--pv-acc), #8f6ae0);
  border: 1px solid var(--pv-line);
}
.pv-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-ava img:not([src]) { display: none; }
.pv-ava img[src] + .pv-ava__txt { display: none; }
.pv-ava__txt { font-size: 1.12rem; font-weight: 900; color: #170f2e; }
.pv-ident__txt { min-width: 0; flex: 1 1 12rem; }
.pv-ident__name { font-size: 1.12rem; font-weight: 800; overflow-wrap: anywhere; }
.pv-ident__mail { font-size: .84rem; color: var(--pv-dim); overflow-wrap: anywhere; }
.pv-ident__act { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* Hàng hành động chính nằm trong #userCard nên khách chưa đăng nhập không thấy nút nào. */
.pv-ident__act--full {
  flex: 1 1 100%; margin-left: 0; padding-top: 14px; border-top: 1px solid var(--pv-line);
  justify-content: flex-end;
}

.pv-slugchip {
  display: inline-block; max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 700; color: #e2d5ff;
  padding: 5px 10px; border-radius: 999px;
  background: var(--pv-acc-soft); border: 1px solid var(--pv-acc-line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 800; letter-spacing: .2px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.pv-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pv-badge.is-ok { color: #bbf7d0; background: var(--v2-ok-soft); border: 1px solid var(--v2-ok-line); }
.pv-badge.is-bad { color: #fecaca; background: rgb(248 113 113 / .12); border: 1px solid rgb(248 113 113 / .45); }

/* =============================================================================
   4. NÚT
   ============================================================================= */

.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 18px; border-radius: var(--pv-r-sm);
  border: 1px solid var(--pv-line); background: #18213c; color: var(--pv-txt);
  font: inherit; font-size: .95rem; font-weight: 700; text-align: center;
  cursor: pointer; text-decoration: none;
}
.pv-btn:hover { text-decoration: none; filter: brightness(1.08); }
.pv-btn:active { transform: scale(.99); }
.pv-btn:disabled { opacity: .55; cursor: default; filter: none; }
.pv-btn--primary {
  background: linear-gradient(180deg, var(--pv-acc), #8f6ae0);
  border-color: #d3bcff; color: #170f2e;
}
.pv-btn--ghost { background: transparent; }
.pv-btn--block { display: flex; width: 100%; }

.pv-mini {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 6px 11px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--pv-line); background: #1b2440; color: var(--pv-txt);
  font: inherit; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.pv-mini:hover { text-decoration: none; border-color: var(--pv-acc-line); color: #fff; }
.pv-mini:active { transform: scale(.98); }
.pv-mini.disabled { opacity: .45; pointer-events: none; }

/* =============================================================================
   5. FORM 2 CỘT
   ============================================================================= */

.pv-fields { display: grid; gap: 14px 16px; }
@media (min-width: 640px) { .pv-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-field { display: flex; flex-direction: column; min-width: 0; }
.pv-field--span { grid-column: 1 / -1; }
.pv-field > label,
.pv-lbl {
  font-size: .74rem; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--pv-dim); margin-bottom: 6px;
}
.pv-field .inp { width: 100%; min-height: 44px; }
.pv-field .inp:focus-visible,
.pv-field .inp:focus {
  outline: 2px solid var(--pv-acc-line); outline-offset: 1px;
  border-color: var(--pv-acc); box-shadow: 0 0 0 4px var(--pv-acc-soft);
}
.pv-hint { margin-top: 6px; font-size: .8rem; color: var(--pv-dim); line-height: 1.5; }
.pv-hint b { color: var(--pv-soft); }
.pv-hint .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e2d5ff; }

/* =============================================================================
   6. STEPPER DỌC (3 bước nối SePay)
   ============================================================================= */

.pv-steps { list-style: none; margin: 0; padding: 0; }
.pv-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; padding-bottom: 20px; }
.pv-step:last-child { padding-bottom: 0; }
.pv-step__n {
  grid-row: 1 / span 3; position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .86rem; font-weight: 900; color: #170f2e;
  background: linear-gradient(145deg, var(--pv-acc), #8f6ae0);
}
/* đường dọc nối các bước */
.pv-step:not(:last-child)::before {
  content: ""; position: absolute; left: 14px; top: 30px; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--pv-acc-line), rgb(181 140 255 / .08));
}
.pv-step__t { font-size: .95rem; font-weight: 800; margin: 4px 0 4px; }
.pv-step__d { font-size: .88rem; color: var(--pv-dim); line-height: 1.55; margin: 0 0 10px; }
.pv-step__d b { color: var(--pv-soft); }
.pv-step > :last-child { margin-bottom: 0; }

/* Ô giá trị + nút Copy trong bước */
.pv-val {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 8px 8px 12px; border-radius: 12px;
  background: var(--pv-well); border: 1px solid var(--pv-line);
}
.pv-val__t {
  flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; color: #dbe4f7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Nút trong hàng giá trị KHÔNG được kế thừa `.btn { width:100% }` của shop.css —
   nếu không, nút chiếm hết hàng flex và bóp chữ (.pv-val__t) về 0px ⇒ chữ vô hình.
   Đồng thời cho hàng flex tự xuống dòng khi hẹp thay vì bóp chữ. */
.pv-val .pv-mini { flex: 0 0 auto; width: auto; margin-top: 0; }
.pv-val--wrap .pv-val__t { white-space: normal; overflow-wrap: anywhere; }

/* =============================================================================
   7. HÀNG LINK (Link của bạn · Link nhúng OBS)
   ============================================================================= */

.pv-rows { display: grid; gap: 8px; }
.pv-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px;
  align-items: center; padding: 10px 12px;
  background: var(--pv-well); border: 1px solid var(--pv-line); border-radius: 12px;
}
.pv-row__ico {
  grid-column: 1; grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--pv-acc-soft); border: 1px solid var(--pv-acc-line); color: #e2d5ff;
}
.pv-row__ico svg { width: 16px; height: 16px; display: block; }
.pv-row__main { grid-column: 2; min-width: 0; }
.pv-row__size {
  font-size: .72rem; font-weight: 700; color: var(--pv-dim);
  padding: 2px 8px; border-radius: 999px; background: rgb(143 160 192 / .1);
  border: 1px solid rgb(143 160 192 / .28); white-space: nowrap;
}
.pv-row__lbl { font-size: .9rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pv-row__url {
  display: block; margin-top: 3px; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; color: #9fb0d0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* PHẢI chỉ định cột: chỉ có `grid-row` thì trình duyệt xếp nút vào CỘT GIỮA và đẩy ô link
   sang cột cuối — ở cột phải hẹp nút bị bóp còn 0-27px, trông như đè lên ô link. */
.pv-row__act .pv-mini { flex: 0 0 auto; }
.pv-row__act { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }

@media (max-width: 719px) {
  .pv-row { grid-template-columns: 30px minmax(0, 1fr); }
  .pv-row__act { grid-row: 3; grid-column: 1 / -1; margin-top: 8px; }
  .pv-row__act .pv-mini { flex: 1 1 auto; }
}

/* =============================================================================
   8. KPI TILE + THANH TIẾN ĐỘ
   ============================================================================= */

.pv-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pv-kpi {
  min-width: 0; padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgb(24 33 60 / .75), rgb(15 22 40 / .75));
  border: 1px solid var(--pv-line);
}
.pv-kpi__lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--pv-dim); }
.pv-kpi__val { display: block; margin-top: 4px; font-size: 1.06rem; font-weight: 900; color: var(--pv-txt); overflow-wrap: anywhere; }
.pv-kpi__val--acc { color: var(--pv-acc); }
.pv-kpi__val--ok { color: var(--pv-ok); }
.pv-kpi__val--bad { color: var(--pv-bad); }
.pv-kpi__val--sm { font-size: .98rem; }
.pv-kpi--hero .pv-kpi__val { font-size: 1.5rem; letter-spacing: -.4px; }

.pv-meter { margin-top: 14px; }
.pv-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--pv-dim); }
.pv-meter__top b { color: var(--pv-soft); font-variant-numeric: tabular-nums; }
.pv-meter__track {
  margin-top: 7px; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgb(143 160 192 / .16); border: 1px solid var(--pv-line);
}
.pv-meter__fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pv-acc), #8f6ae0);
  transition: width .5s ease-out;
}
.pv-meter__fill.is-hot { background: linear-gradient(90deg, #f6c453, var(--pv-bad)); }

.pv-warn {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  font-size: .88rem; line-height: 1.55; color: #fecaca;
  background: rgb(248 113 113 / .09); border: 1px solid rgb(248 113 113 / .5);
}

/* =============================================================================
   9. XEM TRƯỚC OVERLAY — khung dọc 9:16 kiểu điện thoại
   ============================================================================= */

.pv-prev__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pv-tab {
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--pv-line); background: #151d33; color: var(--pv-dim);
}
.pv-tab:hover { color: var(--pv-txt); border-color: var(--pv-acc-line); }
.pv-tab.is-on { color: #170f2e; background: linear-gradient(180deg, var(--pv-acc), #8f6ae0); border-color: #d3bcff; }

.pv-phone {
  position: relative; margin: 0 auto; width: min(100%, 240px); aspect-ratio: 9 / 16;
  border-radius: 22px; padding: 8px;
  background: linear-gradient(180deg, #1b2440, #0d1424);
  border: 1px solid var(--pv-line);
  box-shadow: 0 18px 40px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .03);
}
.pv-phone__screen {
  position: relative; width: 100%; height: 100%; border-radius: 15px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(181 140 255 / .16), rgb(0 0 0 / 0) 60%),
    linear-gradient(160deg, #101728, #070b16);
}
.pv-phone__screen iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.pv-phone__ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 18px; font-size: .82rem; color: var(--pv-dim); line-height: 1.6;
}
.pv-phone__ph span { display: block; margin-bottom: 8px; opacity: .6; }
/* Chưa có kênh thì ẩn iframe, hiện placeholder; có kênh thì ngược lại. */
.pv-preview iframe { visibility: hidden; }
.pv-preview.is-live iframe { visibility: visible; }
.pv-preview.is-live .pv-phone__ph { display: none; }

.pv-prev__foot { margin-top: 14px; display: grid; gap: 8px; }
.pv-prev__foot .pv-hint { margin-top: 0; }

/* =============================================================================
   10. BẢNG GỌN (lịch sử đơn / lịch sử rút)
   ============================================================================= */

.pv-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--pv-r-sm); }
table.pv-table {
  width: 100%; min-width: 520px; border-collapse: collapse;
  font-size: .88rem; background: transparent;
  border: 1px solid var(--pv-line); border-radius: var(--pv-r-sm); overflow: hidden;
}
table.pv-table th,
table.pv-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgb(42 55 82 / .6); }
table.pv-table thead th {
  background: rgb(24 33 60 / .6); color: var(--pv-dim);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap;
}
table.pv-table tbody tr:nth-child(even) { background: rgb(255 255 255 / .022); }
table.pv-table tbody tr:last-child td { border-bottom: 0; }
table.pv-table .num { color: var(--pv-txt); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.pv-table .nowrap { white-space: nowrap; }
table.pv-table .note { font-size: .78rem; color: var(--pv-dim); }

/* =============================================================================
   11. TRANG GIỚI THIỆU — mã giới thiệu + form rút
   ============================================================================= */

.pv-ref {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px;
  align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pv-line);
}
.pv-ref__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.7rem; font-weight: 900; letter-spacing: 3px; color: #fde9b8;
  background: #0d1424; border: 1px dashed var(--v2-gld-line); border-radius: var(--pv-r-sm);
  padding: 8px 16px; white-space: nowrap;
}
.pv-ref__side { min-width: 0; display: grid; gap: 8px; }
.pv-ref__link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv-ref__link input {
  flex: 1 1 16rem; min-width: 0; min-height: 44px;
  background: var(--pv-well); border: 1px solid var(--pv-line); color: var(--pv-txt);
  border-radius: var(--pv-r-sm); padding: 10px 12px; font: inherit; font-size: .88rem;
}
.pv-ref__link input:focus { outline: 2px solid var(--pv-acc-line); outline-offset: 1px; }

.pv-form { display: grid; gap: 12px; }
.pv-form label {
  font-size: .74rem; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--pv-dim); margin-bottom: -6px;
}
.pv-form input {
  width: 100%; min-height: 44px; background: var(--pv-well);
  border: 1px solid var(--pv-line); color: var(--pv-txt);
  border-radius: var(--pv-r-sm); padding: 10px 12px; font: inherit;
}
.pv-form input:focus { outline: 2px solid var(--pv-acc-line); outline-offset: 1px; border-color: var(--pv-acc); }
.pv-form .aff-msg { margin: 0; }
#affAvailable.aff-balance { color: var(--pv-ok); }
#affAvailable.aff-balance.neg { color: var(--pv-bad); }
#wdMsg.aff-msg.ok { color: var(--pv-ok); }
#wdMsg.aff-msg.bad { color: var(--pv-bad); }
#negWarn.aff-warn {
  border: 1px solid rgb(248 113 113 / .6); background: rgb(248 113 113 / .1);
  color: #fecaca; border-radius: var(--pv-r-sm); padding: 11px 13px;
  font-size: .88rem; line-height: 1.55; margin-top: 12px;
}
.pv-side-sticky { align-self: start; }
@media (min-width: 1080px) { .pv-side-sticky { position: sticky; top: 78px; } }

.pv-note-line { font-size: .84rem; color: var(--pv-dim); margin: 12px 0 0; line-height: 1.55; }

/* Header strip của /gioi-thieu: mã giới thiệu + KPI nằm gọn trong cùng một dải.
   Mọi luật dưới đây chỉ áp cho trang giới thiệu (body.pv-aff) — /kenh cũng có
   #userCard nhưng là hàng nhận diện flex, không được biến thành grid. */
.pv-head .v2-pills { margin-bottom: 12px; }
body.pv-aff #userCard { display: grid; gap: 16px; }
body.pv-aff #userMain { display: grid; gap: var(--pv-gap); }
body.pv-aff .pv-kpis--mini { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
body.pv-aff .pv-kpis--mini .pv-kpi { padding: 9px 10px; }
@media (max-width: 719px) {
  .pv-ref { grid-template-columns: 1fr; }
  .pv-ref__code { justify-self: start; }
}
@media (max-width: 1079px) {
  body.pv-aff #wdCard { order: 1; }
  body.pv-aff #saleCard { order: 2; }
  body.pv-aff #payoutCard { order: 3; }
}

/* =============================================================================
   12. MOBILE — 1 cột, thanh hành động dính đáy
   ============================================================================= */

@media (max-width: 720px) {
  .pv-card, .pv-head { padding: 16px; }
  .pv-fields { grid-template-columns: 1fr; }
  .pv-ident__act--full { justify-content: stretch; }
  .pv-ident__act--full .pv-btn { flex: 1 1 auto; }

  /* Thanh hành động dính đáy: 2 nút chính vẫn nằm trong DOM gốc,
     chỉ đổi sang position:fixed nên không phải nhân bản control. */
  .pv-dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 74px; z-index: 55;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(11 16 32 / 0), rgb(11 16 32 / .92) 42%);
    border-top: 1px solid var(--pv-line);
  }
  #btnSave1,
  #btnTest {
    position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
    margin: 0; width: auto; min-height: 46px;
  }
  #btnSave1 { left: 12px; right: calc(50% + 5px); }
  #btnTest { left: calc(50% + 5px); right: 12px; }
  #pvSaveInline { display: none; }   /* mobile chỉ có 1 nút Lưu: nút dính đáy */
  .pv-main { padding-bottom: 76px; }
}

@media (min-width: 721px) {
  .pv-dock { display: none; }
}

/* =============================================================================
   13. Ô thưởng vòng quay (do JS dựng: .wc-wheelrow / .wc-wheel-input / .wc-wheel-del)
   ============================================================================= */

#wheelList { margin-top: 10px; }
.wc-wheelrow { display: grid; grid-template-columns: minmax(0, 1fr) 88px 58px auto; gap: 8px; align-items: center; }
.wc-wheelrow .inp { min-width: 0; min-height: 44px; padding: 9px 11px; font-size: .9rem; }
.wc-wheelrow .wc-wheel-input-weight { text-align: center; font-variant-numeric: tabular-nums; }
.wc-wheelrow .copy { margin: 0; }
.pv-wheelpct { font-size: .8rem; font-weight: 700; color: var(--pv-dim); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .wc-wheelrow {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas: "label label label" "weight pct del";
  }
  .wc-wheelrow .wc-wheel-input { grid-area: label; }
  .wc-wheelrow .wc-wheel-input-weight { grid-area: weight; }
  .pv-wheelpct { grid-area: pct; text-align: left; }
  .wc-wheelrow .copy { grid-area: del; }
}

/* =============================================================================
   14. TIỆN ÍCH
   ============================================================================= */

.pv-mt { margin-top: 14px; }
.pv-mt0 { margin-top: 0; }
.pv-2col { display: grid; gap: 18px; }
@media (min-width: 900px) { .pv-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.pv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pv-actions .pv-btn { flex: 1 1 auto; }
@media (min-width: 560px) { .pv-actions .pv-btn { flex: 0 0 auto; } }
#ovlCard { scroll-margin-top: 78px; }

/* =============================================================================
   15. TRANG TÀI KHOẢN (/tai-khoan) — dashboard 2 cột
   -----------------------------------------------------------------------------
   Trang này chỉ có 7 khối nhỏ nên 2 cột đã vừa từ 1000px (2 dashboard kia để mốc
   1080px vì có bảng rộng). Mọi luật ở đây khoá theo body.pv-tk nên KHÔNG đụng
   /kenh và /gioi-thieu.
   ============================================================================= */

/* 1000–1079px: dải 2 cột riêng cho trang tài khoản (từ 1080px luật chung ở mục 1 đã lo). */
@media (min-width: 1000px) and (max-width: 1079px) {
  body.pv-tk .pv-main { display: block; }
  body.pv-tk .pv-head { margin-bottom: var(--pv-gap); }
  body.pv-tk .pv-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--pv-side);
    gap: var(--pv-gap); align-items: start;
  }
  body.pv-tk .pv-col-main { display: grid; gap: var(--pv-gap); min-width: 0; }
  body.pv-tk .pv-col-side {
    display: grid; gap: var(--pv-gap); min-width: 0;
    align-content: start; align-self: start; position: sticky; top: 78px;
  }
}

/* Chưa đăng nhập: chỉ có card đăng nhập + kho hiệu ứng + việc nhanh => gom 1 cột
   giữa trang, không để trống nửa phải. Thu cả dải header vào cùng bề rộng để
   tiêu đề không rộng hơn các card bên dưới. */
@media (min-width: 1000px) {
  body.pv-tk.pv-guest .pv-main { max-width: 780px; }
  body.pv-tk.pv-guest .pv-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile (dưới 1000px, và cả 1000–1079px vì lúc đó 2 cột nên `order` vô hại):
   thứ tự ưu tiên việc hay dùng — header · tên hiển thị · gói hiện tại · kênh nhận
   ủng hộ · thiết bị · đơn hàng · kho hiệu ứng · việc nhanh. */
@media (max-width: 1079px) {
  body.pv-tk #nameCard { order: 1; }
  body.pv-tk #planCard { order: 2; }
  body.pv-tk #channelCard { order: 3; }
  body.pv-tk #devicesCard { order: 4; }
  body.pv-tk #ordersCard { order: 5; }
  body.pv-tk #kho-hieu-ung { order: 6; }
  body.pv-tk #tasksCard { order: 7; }
  body.pv-tk #foot { order: 8; }
  body.pv-tk #guestCard { order: 1; }
}

/* "Việc nhanh": cả hàng là một link lớn (dễ bấm trên điện thoại), không phải
   chữ trơ — nút "Mở" chỉ là dấu hiệu bấm được nên để aria-hidden. */
body.pv-tk a.pv-row { text-decoration: none; color: inherit; }
body.pv-tk a.pv-row:hover { border-color: var(--pv-acc-line); background: #1a2440; }
body.pv-tk a.pv-row:hover .pv-row__lbl { color: #fff; }
body.pv-tk a.pv-row:focus-visible { outline: 2px solid var(--pv-acc-line); outline-offset: 2px; }

/* =============================================================================
   16. DANH SÁCH YÊU CẦU (do JS dựng: .wc-menurow)
   -----------------------------------------------------------------------------
   Mỗi yêu cầu là 1 hàng: tên · giá · loại · giây tối đa · lượt quay thưởng · Xoá.
   Ô "Giây tối đa" chỉ hiện khi loại = Phát nhạc (JS gắn .hidden — shop.css đã có luật).
   Lưới auto-fit nên khổ hẹp tự xuống 2 cột, khổ rộng ra 5 cột — không cần media query.
   ============================================================================= */

#menuList { margin-top: 10px; }
.wc-menurow {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  padding: 12px;
  background: var(--pv-well); border: 1px solid var(--pv-line); border-radius: 12px;
}
.wc-menurow .wc-menu-name { grid-column: 1 / -1; }
.wc-menurow .inp { width: 100%; min-height: 44px; padding: 9px 11px; font-size: .9rem; }
.wc-menurow .pv-field > label { font-size: .68rem; letter-spacing: .5px; }
.wc-menurow__del { display: flex; align-items: flex-end; }
.wc-menurow__del .copy { margin: 0; width: 100%; }
#menuEmpty { margin-top: 10px; }
/* Ô "Giây tối đa" ẩn với yêu cầu thường. Ở khổ rộng (dashboard 2 cột) thì GIỮ CHỖ của ô
   bằng visibility:hidden — nếu display:none thì mỗi hàng có số cột khác nhau và các ô
   (giá · loại · lượt quay · Xoá) so le nhau, nhìn rất lệch. */
.wc-menurow .wc-menu-sec.is-off { display: none; }
@media (min-width: 1100px) {
  .wc-menurow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wc-menurow .wc-menu-sec.is-off { display: flex; visibility: hidden; pointer-events: none; }
}