@import url("./badge_mua.css?v=164ce626");
/* ══════════════════════════════════════════════════════════════════════════
   WEB BẢN SAO — CSS CHUNG
   Bộ biến đo từ web gốc bằng getComputedStyle (11_mau_va_kich_thuoc.json trong thư mục ảnh gốc ở docs/),
   viết lại thành CSS của mình — không chép file CSS của họ. Bootstrap 5.3.2 lo
   khung (lưới, hộp thoại, tab); ở đây chỉ phủ màu, bo góc, kích thước.
   TÔNG MÀU: tím neon (đổi từ cyan của bản gốc ngày 2026-10-04 theo ảnh mẫu chủ bot gửi). Bản cyan
   nguyên trạng ở _backups/web_css_cyan_2026-10-04/web.css. Đo tương phản: tools/kiem_tuong_phan_web.py.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  --app-background: #0b0714;
  --app-foreground: #ece6f7;
  --app-card: #130c20;
  --app-card-foreground: #ece6f7;
  --app-muted: #1c1230;
  --app-muted-foreground: #a99bc6;
  --app-accent: #2a1b45;
  --app-accent-foreground: #fafafa;
  --app-primary: #b06af8;
  --app-primary-foreground: #ffffff;
  --app-border: #2e1f4a;
  --app-success: #22c55e;
  --app-warning: #f59e0b;
  --app-danger: #ef4444;
  --app-info: #38bdf8;
  --app-purple: #c084fc;
  --app-radius: 8px;
  --app-radius-sm: 6px;
  --app-control-height: 40px;
  --app-control-height-sm: 34px;
  --app-touch-target: 44px;
  --app-focus-ring: 0 0 0 .18rem rgba(var(--app-primary-rgb), .30);
  --app-input: #0f0a1a;
  --app-primary-tint: rgba(var(--app-primary-rgb), .12);
  --app-primary-line: rgba(var(--app-primary-hi-rgb), .60);   /* viền nút chính 3.31 trên thân thẻ */
  /* Bảng màu nhấn — đổi tông thì chỉ sửa khối này.
     --app-primary (#b06af8) là màu nhấn dùng làm CHỮ: #a855f7 chỉ đạt 4.05 trên nền tab đang chọn,
     #b06af8 đạt 4.66. Quầng sáng / nền nhạt dùng --app-primary-rgb (#a855f7) cho tím đậm hơn. */
  --app-primary-rgb: 168, 85, 247;        /* #a855f7 — quầng sáng, nền nhạt */
  --app-primary-hi-rgb: 192, 132, 252;    /* #c084fc — viền sáng, góc khung */
  --app-primary-2-rgb: 99, 102, 241;      /* đầu kia của nền chuyển nút chính (chàm) */
  --app-primary-hi: #c084fc;              /* hover: sáng hơn màu nhấn */
  --app-primary-deep: #6b21a8;            /* bấm giữ nút đặc */
  --app-primary-solid: #9333ea;           /* nền nút đặc — chữ trắng 5.38 */
  --app-primary-solid-hover: #7e22ce;     /* hover nút đặc — chữ trắng 6.98 */
  --app-primary-on-tint: #e9d5ff;         /* chữ trên nền nhấn nhạt (chip, nhãn) */
  --app-primary-on-tint-2: #f3e8ff;       /* chữ băng thông báo */
  --app-primary-btn-text: #f5edff;        /* chữ nút chính */
  --app-diem: #9333ea;                    /* thanh điểm GLXH */
  --app-check: #9333ea;                   /* ô tích / công tắc đã chọn */
  --app-tab-vien-bg: #261543;             /* tab viên đang mở (Kho vật phẩm) */
  --app-tab-vien-line: #3b2463;
  --app-glow: 0 0 24px rgba(var(--app-primary-rgb), .10);   /* quầng quanh thẻ */

  /* Bootstrap đọc các biến này cho mọi thành phần của nó. */
  --bs-body-bg: var(--app-background);
  --bs-body-color: var(--app-foreground);
  --bs-border-color: var(--app-border);
  --bs-secondary-color: var(--app-muted-foreground);
  --bs-emphasis-color: #faf5ff;
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary-hi);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: .9rem;
  --bs-border-radius: var(--app-radius);
}

html { scrollbar-color: #4c2a7a var(--app-background); }
::selection { background: rgba(var(--app-primary-rgb), .45); color: #fff; }
body {
  /* Quầng tím mờ cố định như nền ảnh mẫu — không cuộn theo trang. */
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(var(--app-primary-rgb), .20), transparent 62%),
    radial-gradient(760px 480px at 100% 6%, rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(147, 51, 234, .10), transparent 60%),
    var(--app-background);
  background-attachment: fixed;
  color: var(--app-foreground);
  font-family: var(--bs-body-font-family);
  font-size: .9rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
a { color: var(--app-primary); text-decoration: none; }
a:hover { color: var(--app-primary-hi); }
.text-mo { color: var(--app-muted-foreground) !important; }
.text-xanh { color: var(--app-success) !important; }
.text-vang { color: var(--app-warning) !important; }
.text-nhan { color: var(--app-primary) !important; }
.text-do { color: var(--app-danger) !important; }

/* ── Thanh điều hướng ── */
#wNav {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(11, 7, 20, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--app-primary-rgb), .38);
  box-shadow: 0 1px 22px rgba(var(--app-primary-rgb), .16);
  padding: 8px 0;
}
.w-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; color: #fff !important;
  text-shadow: 0 0 14px rgba(var(--app-primary-hi-rgb), .65); }
.w-logo img { display: block; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
#wNav .w-logo { line-height: 1.15; }
.w-nav-link {
  color: var(--app-muted-foreground) !important; display: inline-flex; align-items: center;
  gap: 6px; padding: 6px 10px; border-radius: var(--app-radius); font-size: .95rem;
  background: none; border: 0;
}
.w-nav-link:hover { color: var(--app-foreground) !important; background: var(--app-muted); }
.w-nav-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--app-radius); font-weight: 700; color: #fff;
  border: 1px solid rgba(var(--app-primary-hi-rgb), .40); background: rgba(var(--app-primary-rgb), .12);
}
.w-nav-chip.acc { border-color: rgba(245, 158, 11, .40); background: rgba(245, 158, 11, .10); }
.w-nav-chip i { color: var(--app-foreground); }
.navbar-toggler { border: 1px solid var(--app-border); }
/* Không đảo màu biểu tượng: data-bs-theme="dark" đã vẽ nét sáng; đảo thêm là thành đen trên nền đen. */

/* ── Thẻ ── */
.w-card {
  position: relative; background: var(--app-card); border: 1px solid rgba(var(--app-primary-rgb), .30);
  border-radius: 6px; color: var(--app-card-foreground);
  box-shadow: var(--app-glow), inset 0 0 0 1px rgba(var(--app-primary-rgb), .04);
}
/* Góc khung nhọn sáng ở trên-trái và dưới-phải như khung ảnh mẫu. Nằm đè lên viền (-1px) nên không
   làm thẻ rộng ra; pointer-events:none để không chặn bấm vào góc. */
.w-card::before, .w-card::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border: 0 solid var(--app-primary-hi); filter: drop-shadow(0 0 4px rgba(var(--app-primary-hi-rgb), .8));
}
.w-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 6px; }
.w-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 6px; }
/* Đầu thẻ sáng hơn thân như ảnh mẫu (và như gốc — "Còn lệch" mục 1). */
.w-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid rgba(var(--app-primary-rgb), .26); border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, rgba(var(--app-primary-rgb), .14), rgba(var(--app-primary-rgb), .03) 70%), #1a1030;
}
.w-card-head h5, .w-card-head h4 { margin: 0; font-weight: 700; font-size: 1.05rem; }
.w-card-body { padding: 16px; }
.w-sub { color: var(--app-muted-foreground); font-size: .85rem; }
.w-o-nho {
  background: var(--app-background); border: 1px solid rgba(var(--app-primary-rgb), .22);
  border-radius: 10px; padding: 10px 14px;
}
.w-o-nho .nh { color: var(--app-muted-foreground); font-size: .8rem; }
.w-o-nho strong { display: block; margin-top: 2px; }

/* ── Nút ── */
.btn { border-radius: var(--app-radius); font-size: .9rem; }
/* Nút chính: nền là ẢNH chuyển ngang xanh ngọc → xanh lam (số đo gốc ghi màu nền rgba(0,0,0,0)).
   Đo điểm ảnh 6 nút trong ảnh gốc (Tìm kiếm, Làm mới, Lịch sử chèn, Thêm vào Chèn giá…), trên nền
   trang lẫn nền thẻ đều khớp rgba(34,211,238,.24) → rgba(37,99,235,.18). */
.btn-primary, .w-nut {
  --bs-btn-color: var(--app-primary-btn-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--app-primary-line);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--app-primary);
  --bs-btn-disabled-color: var(--app-muted-foreground); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--app-border);
  background-image: linear-gradient(90deg, rgba(var(--app-primary-rgb), .30), rgba(var(--app-primary-2-rgb), .20));
}
.btn-primary:hover, .w-nut:hover, .btn-primary:active, .w-nut:active {
  background-image: linear-gradient(90deg, rgba(var(--app-primary-rgb), .42), rgba(var(--app-primary-2-rgb), .28));
  box-shadow: 0 0 16px rgba(var(--app-primary-rgb), .35);
}
.btn-primary:disabled, .w-nut:disabled { background-image: none; }
.w-nut-dac {
  --bs-btn-color: var(--app-primary-foreground); --bs-btn-bg: var(--app-primary-solid); --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: var(--app-primary-foreground); --bs-btn-hover-bg: var(--app-primary-solid-hover); --bs-btn-hover-border-color: var(--app-primary-hi);
  --bs-btn-active-bg: var(--app-primary-deep); --bs-btn-active-color: var(--app-primary-foreground);
  font-weight: 500; box-shadow: 0 0 20px rgba(var(--app-primary-rgb), .40);
}
.w-nut-phu, .btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--app-foreground); --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--app-primary-hi-rgb), .26);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--app-muted); --bs-btn-hover-border-color: rgba(var(--app-primary-hi-rgb), .50);
  --bs-btn-active-bg: var(--app-accent); --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #8a7fa6; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--app-border);
}
.w-nut-xam { --bs-btn-color: #fff; --bs-btn-bg: #28173a; --bs-btn-border-color: #42275e; --bs-btn-hover-bg: #42275e; --bs-btn-hover-color: #fff; }
.w-nut-do {
  --bs-btn-color: #fecaca; --bs-btn-bg: rgba(239, 68, 68, .12); --bs-btn-border-color: rgba(239, 68, 68, .45);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(239, 68, 68, .22); --bs-btn-hover-border-color: var(--app-danger);
}
.w-nut-lon { min-height: var(--app-touch-target); }
.btn-command { min-height: var(--app-control-height); }

/* ── Ô nhập ── */
.form-control, .form-select {
  background-color: var(--app-input); border-color: var(--app-border); color: var(--app-foreground);
  border-radius: var(--app-radius); min-height: var(--app-control-height); font-size: .9rem;
}
.form-control:focus, .form-select:focus {
  background-color: var(--app-input); color: var(--app-foreground);
  border-color: var(--app-primary-line); box-shadow: var(--app-focus-ring);
}
.form-control::placeholder { color: #8a7fa6; }
.form-control:disabled, .form-select:disabled { background-color: var(--app-muted); opacity: .7; }
.form-label { margin-bottom: 6px; color: var(--app-foreground); }
.form-text { color: var(--app-muted-foreground); }
.form-check-input { background-color: var(--app-input); border-color: #42275e; }
/* Ô tích và công tắc ĐÃ CHỌN giữ xanh lam mặc định của Bootstrap như bản gốc (đo #0d6efd ở
   22_cai_dat.png và công tắc "Tự động nhận về kho" của 05_mua_phoi.png) — không phải xanh nhấn. */
.form-check-input:checked { background-color: var(--app-check); border-color: var(--app-check); }
.form-check-input:focus { box-shadow: var(--app-focus-ring); border-color: var(--app-primary-line); }
.input-group-text { background: var(--app-muted); border-color: var(--app-border); color: var(--app-muted-foreground); }

/* ── Chip, nhãn ── */
.text-bg-info { background-color: var(--app-primary-solid) !important; color: #fff !important; }
.w-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px;
  font-size: .75rem; font-weight: 600; border: 1px solid var(--app-border);
  background: var(--app-muted); color: var(--app-foreground); white-space: nowrap;
}
.w-chip.nhan { border-color: var(--app-primary-line); background: var(--app-primary-tint); color: var(--app-primary-on-tint); }
.w-chip.xanh { border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .12); color: #86efac; }
.w-chip.vang { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .12); color: #fcd34d; }
.w-chip.do { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .12); color: #fca5a5; }
.w-mua { height: 18px; width: auto; max-width: 34px; object-fit: contain; vertical-align: middle; }
.w-cap {
  display: inline-block; width: 26px; height: 16.1px; vertical-align: middle;
  background-image: url('../assets/grade_sprite.png'); background-size: 26px 226.1px; background-repeat: no-repeat;
}
.w-vt {
  display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 3px;
  font-size: .68rem; font-weight: 700; border: 1px solid; background: rgba(0, 0, 0, .25);
}
.w-vt.gk { color: #fbbf24; border-color: rgba(251, 191, 36, .55); }
.w-vt.df { color: #60a5fa; border-color: rgba(96, 165, 250, .55); }
.w-vt.mf { color: #4ade80; border-color: rgba(74, 222, 128, .55); }
.w-vt.fw { color: #f87171; border-color: rgba(248, 113, 113, .55); }
.w-ovr { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 3px;
  background: #000; font-size: .7rem; font-weight: 700; }

/* Ô cầu thủ: ảnh + tên + dải huy hiệu */
.w-ct { display: flex; align-items: center; gap: 10px; min-width: 0; }
.w-ct-anh { width: 44px; height: 48px; flex: 0 0 auto; position: relative; overflow: hidden; border-radius: 6px; }
.w-ct-anh img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; }
.w-ct-ten { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.w-ct-nhan { display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap; }

/* ── Thanh "Chức năng" ── */
.w-tabs { display: flex; gap: 8px; flex-wrap: wrap; border: 0; }
.w-tabs .nav-link {
  color: var(--app-foreground); border: 1px solid transparent; border-radius: var(--app-radius);
  padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; background: none; font-weight: 500;
}
.w-tabs .nav-link:hover { background: var(--app-muted); color: #fff; }
.w-tabs .nav-link.active {
  color: var(--app-primary-on-tint); border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), .16);
  box-shadow: 0 0 18px rgba(var(--app-primary-rgb), .40), inset 0 0 10px rgba(var(--app-primary-rgb), .15);
}
/* Mở link `dashboard.html#hunt-panel` thì trình duyệt cuộn tới đúng tab: chừa chỗ cho thanh
   điều hướng dính trên đỉnh (cao 65px) để đầu tab không nằm dưới nó. */
.tab-content > .tab-pane { scroll-margin-top: 80px; }

/* Tab con (gạch dưới) */
.w-tab-gach { border-bottom: 1px solid var(--app-border); gap: 4px; }
.w-tab-gach .nav-link {
  color: var(--app-foreground); border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 10px 14px; background: none; display: inline-flex; gap: 6px; align-items: center;
}
.w-tab-gach .nav-link.active { color: var(--app-primary); border-bottom-color: var(--app-primary); background: none; }

/* Tab con kiểu hộp (Tìm kiếm / Yêu thích ở Tìm TTCN; Tìm kiếm / Gần đây ở hộp Tìm cầu thủ), đo trên
   04_tim_ttcn.png: tab đang mở nền thẻ, viền mảnh #21132f, góc trên bo, chữ xanh nhấn; đường đáy #1b1026. */
.w-tab-hop { border-bottom: 1px solid #1b1026; gap: 4px; flex-wrap: nowrap; }
.w-tab-hop .nav-link {
  color: var(--app-muted-foreground); border: 1px solid transparent; border-radius: var(--app-radius) var(--app-radius) 0 0;
  margin-bottom: -1px; padding: 7px 16px; display: inline-flex; align-items: center; gap: 6px; background: none;
}
.w-tab-hop .nav-link:hover { color: var(--app-foreground); }
.w-tab-hop .nav-link.active {
  color: var(--app-primary); background: var(--app-card); border-color: #21132f #21132f var(--app-card); font-weight: 600;
}
.w-h-tab { font-weight: 700; font-size: 1.125rem; margin: 0 0 12px; }

/* ── Bảng ── */
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-foreground); --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: rgba(255, 255, 255, .025); margin: 0; }
.table thead th { background: var(--app-muted); color: var(--app-foreground); font-weight: 700;
  border-bottom: 1px solid var(--app-border); white-space: nowrap; padding: 10px 12px; }
.table td { vertical-align: middle; padding: 10px 12px; }
.w-rong td { text-align: center; color: var(--app-muted-foreground); padding: 18px; }
.w-bang { border: 1px solid rgba(var(--app-primary-rgb), .26); border-radius: 6px; overflow-x: auto; background: var(--app-card); }
/* Bảng "Cầu thủ trong đội" như 01/m01: khung cuộn dọc ≈65% chiều cao màn (gốc 567px ở khung 1701×876,
   516px ở 414; cây nhãn 01 có 28 dòng mà ảnh chỉ hiện ~7,5). Dòng tiêu đề dính đầu khung khi cuộn. */
.w-bang-doi { max-height: 65vh; overflow-y: auto; }
.w-bang-doi thead th { position: sticky; top: 0; z-index: 2; }
/* overflow-x:auto chứ không hidden: bảng lỡ rộng hơn khung (tên rất dài, màn rất hẹp) thì còn cuộn
   tới nút Hành động được — hidden là cắt mất nút mà không ai thấy. */

/* Bảng -> thẻ dòng ở màn hẹp (Review Focus 1). Mỗi ô mang data-nhan để vẫn
   biết ô đó là gì khi tiêu đề cột bị ẩn. */
@media (max-width: 640px) {
  .bang-the thead { display: none; }
  .bang-the tr { display: block; border-bottom: 1px solid var(--app-border); padding: 8px 0; }
  .bang-the td { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border: 0; padding: 5px 12px; text-align: right; }
  .bang-the td[data-nhan]::before { content: attr(data-nhan); color: var(--app-muted-foreground); text-align: left; flex: 0 0 auto; }
  .bang-the td.o-ct { display: block; text-align: left; }
  .bang-the td.o-ct::before { content: none; }
  .bang-the .w-rong td { justify-content: center; }
}

/* ── Hộp thoại ── */
.modal-content { background: var(--app-card); border: 1px solid rgba(var(--app-primary-rgb), .40); border-radius: 8px; color: var(--app-foreground);
  box-shadow: 0 0 40px rgba(var(--app-primary-rgb), .22); }
.modal-header, .modal-footer { border-color: var(--app-border); }
.modal-title { font-weight: 700; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.modal-backdrop.show { opacity: .7; }

/* ── Toast ── */
.w-toast { background: #211330; color: var(--app-foreground); border: 1px solid var(--app-border) !important; }
.w-toast.ok { border-color: rgba(34, 197, 94, .5) !important; }
.w-toast.loi { border-color: rgba(239, 68, 68, .5) !important; }

/* ── Chân trang ── */
#wChan { border-top: 1px solid var(--app-border); margin: 24px auto 0; padding: 18px 0 28px; text-align: center;
  color: var(--app-muted-foreground); font-size: .9rem; max-width: 1180px; width: calc(100% - 32px); }
#wChan a { color: var(--app-muted-foreground); }
#wChan a:hover { color: var(--app-foreground); }

/* ── Trang đăng nhập / đăng ký ── */
.w-auth { max-width: 460px; margin: 40px auto; }
.w-auth-logo { text-align: center; margin-bottom: 18px; }
.w-auth-logo .w-logo { flex-direction: column; gap: 8px; font-size: 1.8rem; }
.w-hero-anh img { width: 100%; height: 100%; object-fit: contain; }
.w-hero-anh.w-brand-hero { aspect-ratio: 1; max-width: 450px; margin: auto; overflow: hidden; background: transparent; border: 0; box-shadow: none; }
.w-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 10px;
  background: var(--app-muted); border: 1px solid var(--app-border); margin-bottom: 16px; }
.w-auth-tabs a { text-align: center; padding: 9px; border-radius: 8px; color: var(--app-muted-foreground); font-weight: 600; }
.w-auth-tabs a.active { background: var(--app-primary-tint); color: var(--app-primary); border: 1px solid var(--app-primary-line); }
.w-mk { position: relative; }
.w-mk .form-control { padding-right: 46px; }
.w-mk button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: var(--app-muted-foreground); width: 38px; height: 34px; }

/* Đếm ngược "Cập nhật sau Ns" */
.w-dem { color: var(--app-muted-foreground); font-size: .85rem; }

/* Giữ chỗ cho nội dung chủ bot tự viết */
.w-giu-cho { color: var(--app-muted-foreground); font-style: italic; }

/* ── Trang công khai ── */
/* width:100% như .w-trang-hep: thiếu nó thì <main> co theo nội dung (home.html chỉ rộng 931px ở 1280,
   gốc 20/24 rộng 1180 = 1212 − 2×16). */
.w-trang { width: 100%; max-width: 1212px; margin: 0 auto; padding: 24px 16px; }
/* width:100% bắt buộc: body là flex dọc nên margin auto làm <main> CO theo nội dung (affiliate.html
   từng chỉ rộng 852px ở 1701). Nội dung rộng 1180px như 21/22/23/24 (1212 − 2×16). */
.w-trang-hep { width: 100%; max-width: 1212px; margin: 0 auto; padding: 32px 16px 8px; }
.w-quay-ve { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 14px; }
.w-tieu-de-trang { font-size: 2rem; font-weight: 800; margin: 0 0 8px; }
.w-mo-ta-trang { color: var(--app-muted-foreground); max-width: 820px; font-size: 1.02rem; }

.w-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; padding: 40px 0 20px; }
.w-hero-anh { aspect-ratio: 16 / 10; border-radius: 16px; border: 1px solid var(--app-border);
  background: linear-gradient(135deg, #130b1c, #190f24); display: grid; place-items: center;
  color: var(--app-muted-foreground); box-shadow: 0 30px 80px rgba(var(--app-primary-rgb), .16); }
.w-hero-nhan { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--app-primary-line); background: var(--app-primary-tint); color: var(--app-primary-on-tint); font-weight: 600; }
.w-hero h1 { font-size: 3.6rem; font-weight: 900; margin: 16px 0 12px; letter-spacing: .01em; }
.w-hero p { color: var(--app-muted-foreground); font-size: 1.05rem; }
.w-khoi-tieu-de { text-align: center; margin: 48px 0 22px; }
.w-khoi-tieu-de h2 { font-weight: 800; }
.w-khoi-tieu-de p { color: var(--app-muted-foreground); }
.w-luoi { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-o-tinh-nang { background: var(--app-card); border: 1px solid var(--app-border); border-radius: 14px; padding: 20px; }
.w-o-tinh-nang h3 { font-size: 1.1rem; font-weight: 700; margin: 10px 0 8px; }
.w-o-tinh-nang .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--app-primary-tint); color: var(--app-primary); font-size: 1.3rem; border: 1px solid var(--app-primary-line); }
.w-ghi-khoi { margin-top: 18px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--app-border);
  color: var(--app-muted-foreground); display: flex; gap: 10px; align-items: flex-start; }
.w-cta { text-align: center; padding: 34px 16px; margin: 40px 0 10px; border-radius: 16px;
  border: 1px solid var(--app-border); background: radial-gradient(circle at 50% 0, rgba(var(--app-primary-rgb), .12), transparent 60%), var(--app-card); }
.w-chan-cong { border-top: 1px solid var(--app-border); margin-top: 36px; padding: 18px 0; display: flex;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--app-muted-foreground); }
.w-chan-cong a { color: var(--app-muted-foreground); margin-left: 14px; }

.w-luu-y { display: flex; gap: 12px; padding: 14px; border-radius: 10px; background: var(--app-background);
  border: 1px solid var(--app-border); color: #d4d4d8; }
.w-luu-y + .w-luu-y { margin-top: 12px; }
.w-luu-y i { color: var(--app-primary); font-size: 1.05rem; }
.w-dieu-khoan h2 { font-size: 1.45rem; font-weight: 800; margin: 26px 0 14px; }
.w-dieu-khoan h2:first-child { margin-top: 0; }
.w-dieu-khoan p { color: #c4c4cc; margin-bottom: 8px; }

/* Ủng hộ */
.w-muc-uh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.w-muc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px;
  border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-background); }
.w-muc b { display: block; }
.w-muc small { color: var(--app-muted-foreground); }
.w-buoc { display: flex; align-items: center; border: 1px solid var(--app-border); border-radius: 8px; overflow: hidden; }
.w-buoc button { width: 34px; height: 34px; border: 0; background: var(--app-muted); color: var(--app-foreground); }
.w-buoc button.cong { color: var(--app-primary); border-left: 1px solid var(--app-border); }
.w-buoc span { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.w-tong-donate { font-size: 1.6rem; font-weight: 800; color: var(--app-primary); }
.w-dong-uh { padding: 12px 0; border-bottom: 1px solid var(--app-border); }
.w-dong-uh:last-child { border-bottom: 0; }
.w-dong-uh .tien { color: var(--app-primary); font-weight: 600; }
.w-dong-uh small { display: block; color: var(--app-muted-foreground); }

@media (max-width: 991px) {
  .w-hero { grid-template-columns: 1fr; }
  .w-hero h1 { font-size: 2.6rem; }
  .w-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .w-luoi, .w-muc-uh { grid-template-columns: 1fr; }
  .w-tieu-de-trang { font-size: 1.6rem; }
}

/* ── Trang chọn tài khoản ── */
.w-chao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; }
.w-chao .avt { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #a1a1aa, #52525b); color: #fff; font-size: 1.2rem; border: 1px solid var(--app-border); }
.w-chao h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.w-chao .phai { margin-left: auto; display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.w-acc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 12px 16px;
  border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-background); }
.w-acc h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.w-acc .phai { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.w-nut-acc { display: flex; gap: 8px; flex-wrap: wrap; }
/* Điện thoại như m20_chon_tai_khoan.png (414px): lề trang 12px; hai ô Ngày hết hạn / Coin chia đôi hết
   bề ngang + nút Thanh toán rộng hết; ba nút đầu thẻ Tài khoản FC Online cao 44px, chia nhau một hàng
   (hẹp hơn thì xuống hàng, không tràn); dòng acc: "Quản lý" xuống dưới thông tin, rộng hết, "…" 44px. */
@media (max-width: 640px) {
  .w-trang { padding-left: 12px; padding-right: 12px; }
  .w-chao .phai { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .w-chao .phai .btn { grid-column: 1 / -1; }
  .w-nut-acc { gap: 6px; }
  .w-nut-acc .btn { flex: 1 1 auto; min-height: var(--app-touch-target); padding-left: 6px; padding-right: 6px;
    font-size: .875rem; white-space: nowrap; }
  .w-acc { flex-wrap: wrap; }
  .w-acc .phai { margin-left: 0; width: 100%; }
  .w-acc .phai > .btn { flex: 1 1 auto; min-height: var(--app-touch-target); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
  .w-acc .phai > .btn .bi { display: none; }
  .w-acc .w-nut-vuong { width: var(--app-touch-target); height: var(--app-touch-target); }
}
.w-dem-chip { display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--app-primary-line); background: var(--app-primary-tint); color: var(--app-primary-on-tint); font-weight: 700; }
.w-nut-vuong { width: 40px; height: 38px; padding: 0; display: inline-grid; place-items: center; }
.dropdown-menu { --bs-dropdown-bg: var(--app-card); --bs-dropdown-border-color: rgba(var(--app-primary-rgb), .35);
  --bs-dropdown-link-color: var(--app-foreground); --bs-dropdown-link-hover-bg: var(--app-muted);
  --bs-dropdown-link-hover-color: #fff; }

/* ── Thanh toán / cài đặt / cộng tác viên ── */
.w-dau-trang { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.w-dau-trang h1 { font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; }
.w-dau-trang .phai { margin-left: auto; }
.w-o-the { background: var(--app-card); border: 1px solid var(--app-border); border-radius: 12px; padding: 14px 16px; height: 100%; }
.w-o-the .nh { color: var(--app-muted-foreground); font-size: .82rem; }
.w-o-the strong { display: block; font-size: 1.15rem; margin-top: 4px; }
.w-slot { border: 1px solid var(--app-border); border-radius: 10px; padding: 14px; background: var(--app-background); height: 100%; }
.w-slot .tieu { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.w-slot div { font-size: .85rem; }
.w-goi { border: 1px solid var(--app-border); border-radius: 10px; padding: 14px; background: var(--app-background);
  display: flex; flex-direction: column; height: 100%; }
.w-goi .gia { font-size: 1.6rem; font-weight: 800; margin: 10px 0; }
.w-goi .canh { color: var(--app-warning); font-size: .8rem; }
.w-goi .btn { margin-top: auto; }
.w-ql li { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.w-ql i { color: var(--app-primary); }
.w-chi-tiet { border: 1px solid var(--app-border); border-radius: 10px; padding: 14px; background: var(--app-background); }
.w-chi-tiet .dong { display: flex; justify-content: space-between; font-size: .85rem; padding: 3px 0; }
.w-thong-bao { border: 1px solid var(--app-primary-line); background: var(--app-primary-tint); color: var(--app-primary-on-tint-2);
  border-radius: 10px; padding: 12px 14px; }
.w-ma-don { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #f472b6; font-size: .8rem; }
.w-khoi-tb { border: 1px solid var(--app-border); border-radius: 10px; padding: 14px; background: var(--app-background); height: 100%; }

/* ── Ví Xu (billing.html — spec 2026-10-05-web-xu-token-design.md). Dùng lại màu sẵn có, không thêm màu mới. ── */
.w-km { border-color: rgba(245, 158, 11, .45); }
.w-km-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-km-dau h5 { margin: 0; font-weight: 700; font-size: 1.05rem; }
.w-km-bang, .w-chon-nhanh { display: flex; flex-wrap: wrap; gap: 6px; }
.w-chon-nhanh .btn.active { border-color: var(--app-primary); background: var(--app-primary-tint); color: #fff; }
.w-goi-nhan { font-size: .8rem; margin: 8px 0 10px; color: var(--app-primary-on-tint); }
.w-goi-vip.chan .w-goi-nhan { color: #fcd34d; }
.w-goi .w-goi-nut { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.w-goi .w-goi-nut .btn { margin-top: 0; }
.w-nut-goi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--app-touch-target); line-height: 1.2; padding-left: 6px; padding-right: 6px; font-size: .85rem; }
.w-nut-goi span { white-space: nowrap; }   /* "30 ngày · 250 Xu" không gãy ở thẻ hẹp (4 thẻ một hàng) */
.w-nut-goi small { font-size: .72rem; font-weight: 600; color: #fcd34d; }
@media (max-width: 640px) {
  .w-chon-nhanh .btn { min-height: var(--app-touch-target); }
}

/* ══ Màn quản lý (dashboard) ══ */
/* Không chặn bề rộng: ảnh gốc ở khổ 1701px vẫn cách mép đúng 18px. */
.w-trang-rong { padding: 24px 18px; margin: 0 auto; width: 100%; }
.w-acc-dau { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; }
.w-acc-dau .nh { color: var(--app-muted-foreground); font-size: .8rem; display: block; }
.w-acc-dau .gt { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.w-acc-dau .gt { flex-wrap: wrap; row-gap: 2px; }   /* "1.234.567 Xu · 99 Token" + "Nạp Xu" ở 360px */
.w-svip { width: 46px; height: 28px; border-radius: 6px; background: linear-gradient(180deg, #52525b, #27272a);
  border: 1px solid #42275e; display: inline-grid; place-items: center; }
.w-svip::after { content: ""; width: 18px; height: 3px; border-radius: 2px; background: #a1a1aa; }
.w-chuc-nang { padding: 14px 12px; }
.w-chuc-nang .nhan { color: var(--app-muted-foreground); font-size: .85rem; margin: 0 0 10px 2px; display: flex; align-items: center; }
.w-chuc-nang .cuon { display: none; margin-left: auto; gap: 6px; }
.w-tieu-de-tab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.w-tieu-de-tab h4 { font-weight: 800; font-size: 1.25rem; margin: 0; }
.w-tieu-de-tab .bp { color: var(--app-primary); }

/* Bảng cầu thủ: ở điện thoại ẩn cột Cấp/OVR (đã hiện thành huy hiệu dưới tên) và
   gom nút hành động vào nút "…" — đúng bản gốc ở 420px, KHÔNG đổi thành thẻ. */
.bang-ct th.sx { cursor: pointer; user-select: none; }
.bang-ct th .bi-copy { font-size: .7rem; color: var(--app-muted-foreground); margin-left: 4px; }
.bang-ct .w-ct-nhan .w-cap, .bang-ct .w-ct-nhan .w-ovr { display: none; }
.bang-ct .hd-nho { display: none; }
.w-nut-hd { display: inline-flex; gap: 6px; flex-wrap: nowrap; justify-content: center; }
.w-nut-hd .btn { white-space: nowrap; }

@media (max-width: 991px) {
  .w-acc-dau { grid-template-columns: 1fr; gap: 10px; }
  .w-acc-dau > div { display: grid; grid-template-columns: 90px 1fr; align-items: center; }
  .w-acc-dau .btn { width: 100%; }
  .w-chuc-nang .cuon { display: inline-flex; }
  .w-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
  .w-tabs::-webkit-scrollbar { display: none; }
  .w-tabs .nav-link { white-space: nowrap; }
}
@media (max-width: 640px) {
  .w-trang-rong { padding: 14px 10px; }
  .bang-ct .an-dt { display: none; }
  .bang-ct .w-ct-nhan .w-cap, .bang-ct .w-ct-nhan .w-ovr { display: inline-flex; }
  .bang-ct .w-cap { display: inline-block !important; }
  .bang-ct .w-nut-hd { display: none; }
  .bang-ct .hd-nho { display: inline-flex; }
  .bang-ct td, .bang-ct th { padding: 8px 6px; }
  .bang-ct thead th { font-size: .8125rem; }
}

/* ── Tab DS mua bán ── */
.w-phieu h5 { font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.w-tieu-de-mb { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.w-tieu-de-mb h4 { font-weight: 800; font-size: 1.25rem; margin: 0; }
.w-mb-cong-cu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w-mb-cong-cu .form-select { width: auto; min-width: 200px; }
.w-lk-tg { color: var(--app-muted-foreground); font-size: .8rem; text-decoration: underline dotted; }
.w-lk-tg:hover { color: var(--app-primary); }
.w-tong { font-size: 1rem; }
.w-tg-nho { flex-basis: 100%; font-weight: 400; font-size: .75rem; color: var(--app-muted-foreground); }
/* Chữ chỉ hiện ở điện thoại: "H.động" thay "Hành động", chip trạng thái dưới tên
   (cột Trạng thái bị ẩn ở màn hẹp — không có chip thì khách không biết lệnh đã khớp). */
.chi-dt { display: none; }
@media (max-width: 640px) {
  .bang-ct .chi-dt { display: inline; }
  .w-mb-cong-cu { width: 100%; }
  .w-mb-cong-cu .form-select { flex: 1; min-width: 0; }
  .w-mb-cong-cu .btn { width: 100%; }
}

/* ── Tab Chèn giá ── */
.w-tieu-de-chen { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
.w-tieu-de-chen h4 { font-weight: 700; font-size: 1.125rem; margin: 0; }
.w-tieu-de-trai { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* Chỉ đếm lùi cạnh tiêu đề Chèn giá: = .875em của tiêu đề 18px như gốc. Viết chung cho .w-dem từng làm
   chữ "Cập nhật sau" ở trang home to 15,7px (gốc m20 ~12,8px). */
.w-tieu-de-trai .w-dem { font-size: .984rem; }
.w-tieu-de-nut { display: flex; flex-wrap: wrap; gap: 8px; }
.w-head-chen { justify-content: space-between; }
/* Ô chọn cầu thủ: khung đứt nét khi chưa chọn; thẻ viền khi đã chọn */
.w-o-chon { border: 1px dashed #42275e; border-radius: 10px; padding: 26px 14px; text-align: center; }
.w-ct-chon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--app-border);
  border-radius: 10px; padding: 10px 12px; background: var(--app-background); }
/* Ô chọn cấp: huy hiệu sprite đè lên <select>; chữ "+N" của select ẩn đi (danh sách mở ra vẫn có chữ) */
.w-chon-cap { position: relative; }
.w-chon-cap select { color: transparent; }
.w-chon-cap select option { color: var(--app-foreground); background: var(--app-card); }
.w-chon-cap-nhan { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; display: inline-flex; }
/* Huy hiệu trong ô chọn cấp của gốc to ≈1,25 lần huy hiệu trong bảng (đo 33×20px ở 03 và 05). */
.w-chon-cap-nhan .w-cap { transform: scale(1.25); transform-origin: left center; }
.w-o-bv { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--app-border); border-radius: 10px; padding: 8px 12px; background: var(--app-background); }
.w-o-bv input[type=number] { width: 88px; }
.w-nhat-ky { min-height: 180px; max-height: 320px; overflow-y: auto; border: 1px solid var(--app-border); border-radius: 10px;
  padding: 12px 14px; background: var(--app-background); font-size: .8rem; color: var(--app-muted-foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.w-nhat-ky div { padding: 2px 0; color: var(--app-foreground); }
.w-sx-bv { width: auto; min-width: 140px; }
/* Hộp Tìm cầu thủ */
.w-loi-o { color: #fca5a5; font-size: .82rem; margin-top: 4px; }
.w-nut-tim { flex: 0 0 auto; min-height: var(--app-control-height); }
/* Ô chọn mùa rộng ~2/3 thân hộp rồi tới nút Tìm, như ảnh gốc (507/766px); màn hẹp thì giãn kín. */
.w-o-mua { flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) { .w-o-mua { flex: 0 1 66.667%; } }
.w-kq-ct { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding: 8px 12px;
  border: 1px solid var(--app-border); border-left: 3px solid var(--app-primary); border-radius: 10px; background: rgba(var(--app-primary-rgb), .04); }
.w-kq-ben { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
@media (max-width: 640px) {
  .w-o-bv input[type=number] { width: 100%; }
  /* Như m03_chen_gia.png: tiêu đề trái – đếm lùi phải cùng một dòng, nút xuống dòng canh phải;
     nút ở dòng tiêu đề và đầu thẻ cao bằng vùng chạm; ô sắp xếp Bảo vệ lệnh giãn hết phần còn lại. */
  .w-tieu-de-trai { width: 100%; justify-content: space-between; }
  .w-tieu-de-nut { width: 100%; justify-content: flex-end; }
  .w-tieu-de-nut .btn, .w-head-chen .btn { min-height: var(--app-touch-target); }
  .w-sx-bv { flex: 1 1 180px; }
}

/* ── Tab Tìm TTCN ── */
/* Một hàng như 04_tim_ttcn.png ở 1701px: ô Tên rộng gấp 1,5 ô Mùa giải (861/574px), ô Cấp 92px, rồi nút. */
.w-ttcn-hang { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 92px auto; gap: 12px; align-items: end; }
/* Nhãn ô ở Tìm TTCN và Mua phôi của gốc nhỏ hơn nhãn Chèn giá: đo ≈12,8px (Chèn giá 14,4px). */
.w-ttcn-hang .form-label, .w-phoi .form-label { font-size: .8rem; }
.w-ttcn-hd { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
.w-sao.bat { color: var(--app-warning); }
@media (max-width: 767px) {
  /* Như m04: xếp dọc, nút Tìm kiếm giãn kín hàng và cao bằng vùng chạm. */
  .w-ttcn-hang { grid-template-columns: minmax(0, 1fr); }
  .w-nut-ttcn { width: 100%; min-height: var(--app-touch-target); }
}

/* ── Tab Mua phôi ── */
.w-h-tab-dau { margin: 18px 0 14px; }
/* Như 05_mua_phoi.png ở 1701px: 5 ô theo tỉ lệ đo 290:261:290:290:179px, vạch dọc, khung phải ≈233px. */
.w-phoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .17fr); padding: 16px; }
.w-phoi-trai {
  display: grid; gap: 15px; align-items: start; padding-right: 16px;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1.46fr) minmax(0, 1.62fr) minmax(0, 1.62fr) minmax(0, 1fr);
}
.w-phoi-phai { display: flex; flex-direction: column; gap: 10px; padding-left: 16px; border-left: 1px solid #1e122b; min-width: 0; }
/* Khoảng "A đến B": hai ô dính nhau, chữ "đến" ở giữa — như input-group của Bootstrap. */
.w-khoang { display: flex; align-items: stretch; }
.w-khoang > .w-chon-cap, .w-khoang > .form-control { flex: 1 1 0; min-width: 0; }
.w-khoang .form-select, .w-khoang .form-control { border-radius: 0; }
.w-khoang > :first-child, .w-khoang > :first-child .form-select { border-radius: var(--app-radius) 0 0 var(--app-radius); }
.w-khoang > :last-child, .w-khoang > :last-child .form-select { border-radius: 0 var(--app-radius) var(--app-radius) 0; }
.w-den {
  display: flex; align-items: center; padding: 0 8px; white-space: nowrap; font-size: .9rem;
  border: 1px solid var(--app-border); border-left: 0; border-right: 0; background: var(--app-input); color: var(--app-foreground);
}
.w-quy-doi { text-align: right; font-size: .75rem; color: var(--app-success); margin-top: 6px; }
.w-quy-doi.rong { color: var(--app-muted-foreground); }
.w-o-khong-gh { margin-top: 12px; }
.w-kho-con { font-size: .75rem; color: var(--app-muted-foreground); margin-top: 6px; }
/* Khung công tắc đo trên ảnh: nền #17171b, viền mảnh, công tắc cách mép 13px. */
.w-o-cong-tac.form-switch {
  align-self: flex-start; padding: 8px 14px 8px calc(13px + 2.5em);
  border: 1px solid #241534; border-radius: 10px; background: #190f23;
}
@media (max-width: 1199px) { .w-phoi-trai { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .w-phoi { grid-template-columns: minmax(0, 1fr); }
  .w-phoi-trai { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; }
  .w-phoi-phai { padding: 14px 0 0; margin-top: 14px; border-left: 0; border-top: 1px solid #1e122b; }
}
@media (max-width: 640px) {
  .w-phoi-trai { grid-template-columns: minmax(0, 1fr); }
  .w-phoi-phai .btn { min-height: var(--app-touch-target); }
}

/* ── Tab GLXH ── */
.w-tieu-de-glxh { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 14px; }
/* Màn hẹp: chữ tiêu đề xuống dòng, nút giữ một dòng ("Làm mới" từng gãy đôi ở 420px tab Giới thiệu). */
.w-tieu-de-glxh > .btn { flex: 0 0 auto; white-space: nowrap; }
.w-cham { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #a1a1aa; margin-right: 6px; vertical-align: middle; }
.w-cham.chay { background: var(--app-success); }
/* Màn rộng như 06_glxh.png: cột trái 340px (thẻ hạng trên, cài đặt dưới), cột phải đội hình.
   DOM xếp hạng → đội hình → cài đặt như bản điện thoại m06. */
.w-glxh { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "hang doi" "cai doi"; gap: 16px; align-items: start; }
.w-glxh-hang { grid-area: hang; padding: 16px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(var(--app-primary-rgb), .10), transparent 60%), var(--app-card); }
.w-glxh-doi { grid-area: doi; }
.w-glxh-cai { grid-area: cai; padding: 16px; }
.w-hang-dau { display: flex; align-items: center; gap: 18px; margin: 4px 0 14px; }
/* Huy hiệu hạng vẽ bằng CSS — ảnh huy hiệu hạng của game không có trong tài nguyên. */
.w-huy-hieu-hang { position: relative; flex: 0 0 96px; height: 96px; display: grid; place-items: center; }
.w-huy-hieu-hang i { font-size: 86px; line-height: 1; color: #c2410c;
  background: linear-gradient(160deg, #fdba74, #c2410c 55%, #7c2d12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.w-huy-hieu-hang span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 34px; color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.w-hang-ten { display: block; font-size: 1.25rem; }
.w-hang-tt { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.w-o-tran { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; margin-bottom: 18px; }
.w-o-tran span { height: 38px; background: #231532; }
.w-o-tran span.T { background: var(--app-success); }
.w-o-tran span.H { background: var(--app-warning); }
.w-o-tran span.B { background: var(--app-danger); }
.w-diem { display: flex; align-items: stretch; gap: 6px; margin-top: 12px; }
.w-diem-so { background: var(--app-diem); color: var(--app-primary-foreground); font-weight: 900; font-size: 1.6rem; line-height: 1; padding: 7px 12px; border-radius: 4px; }
.w-diem-thanh { flex: 1; display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 2px; }
.w-diem-thanh span { background: #221430; }
.w-diem-thanh span.day { background: var(--app-diem); box-shadow: 0 0 6px rgba(var(--app-primary-rgb), .6); }
.w-diem-moc { display: flex; justify-content: space-between; font-size: .75rem; margin: 4px 0 0 64px; }
.w-diem-moc span:first-child { color: var(--app-success); }
.w-o-dung { border: 1px solid #21132f; border-radius: 10px; padding: 12px; background: #150c1e; }
.w-o-dung legend { font-size: 1rem; font-weight: 600; margin: 0 0 6px; padding: 0; }
.w-o-tich { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #21132f; border-radius: 8px; padding: 10px 12px; cursor: pointer; margin-bottom: 0; }
.w-o-tich .form-check-input { margin-top: .2em; flex: 0 0 auto; }
.w-glxh-chon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.w-glxh-chon .form-label { font-size: .8rem; margin-bottom: 4px; }
.w-glxh-chon .form-select { min-height: var(--app-control-height-sm); font-size: .8125rem; }
.w-nut-sua { white-space: nowrap; min-height: var(--app-control-height-sm); font-size: .85rem; }
/* Sân bóng 380×540 như bản gốc: sọc cỏ, vạch kẻ mờ, cầu thủ đặt theo toạ độ của sơ đồ. */
.w-san { position: relative; width: min(100%, 380px); aspect-ratio: 380 / 540; margin: 14px auto 0; overflow: hidden;
  border-radius: 8px; border: 1px solid #2b6f2c; background: repeating-linear-gradient(180deg, #2b702c 0 12.5%, #266529 12.5% 25%); }
.w-san-ke { position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .28); pointer-events: none; }
.w-san-ke i { position: absolute; border: 1px solid rgba(255, 255, 255, .28); }
.w-san-ke .ke-giua { left: 0; right: 0; top: 50%; border-width: 1px 0 0; }
.w-san-ke .ke-tron { left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.w-san-ke .ke-vong { left: 28%; right: 28%; height: 12%; }
.w-san-ke .ke-cau { left: 40%; right: 40%; height: 5%; }
.w-san-ke .tren { top: -1px; }
.w-san-ke .duoi { bottom: -1px; }
.w-san-ct { position: absolute; transform: translate(-50%, -50%); width: 96px; display: flex; flex-direction: column; align-items: center; }
.w-san-ct.tinh { position: static; transform: none; }
.w-san-tren { display: flex; align-items: flex-start; gap: 2px; }
.w-san-so { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-top: 4px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.w-san-so b { font-size: .95rem; }
.w-san-so span { font-size: .55rem; font-weight: 700; margin-top: 2px; }
.w-san-tren img { width: 36px; height: 36px; object-fit: cover; object-position: top; }
.w-san-tren .w-cap { transform: scale(.8); transform-origin: left top; margin-top: 2px; }
.w-san-ten { display: flex; align-items: center; gap: 3px; max-width: 100%; font-size: .66rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7); white-space: nowrap; }
.w-san-ten .w-mua { height: 12px; }
.w-san-ten .w-chip { font-size: .55rem; padding: 0 3px; }
.w-san-ten span { overflow: hidden; text-overflow: ellipsis; max-width: 70px; }
.w-du-bi { width: min(100%, 420px); margin: 16px auto 0; background: #100a17; border: 1px solid var(--app-border); border-radius: 10px; padding: 12px; }
.w-du-bi-dau { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.w-du-bi-ds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; justify-items: center; }
.w-nut-tron { width: 26px; height: 26px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem;
  color: var(--app-primary); border: 1px solid var(--app-primary-line); background: transparent; }
.w-nut-tron:disabled { color: var(--app-muted-foreground); border-color: transparent; }
.w-cuon-ngang { overflow-x: auto; }
.bang-glxh th, .bang-glxh td { white-space: nowrap; }
.w-nhat-ky-glxh { min-height: 220px; }
@media (max-width: 991px) {
  .w-glxh { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hang" "doi" "cai"; }
}
@media (max-width: 640px) {
  .w-glxh-chon { grid-template-columns: minmax(0, 1fr); }
  .w-tieu-de-glxh .btn, .w-glxh-cai .btn-command { min-height: var(--app-touch-target); }
}

/* ── Tab Robot nâng cấp ── (màu đo trên 07_robot_nang_cap.png) */
.w-robot { padding: 16px; }
.w-robot-khoi { background: #190f23; border: 1px solid #221431; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.w-robot-khoi h5 { font-size: 1rem; font-weight: 700; margin: 4px 0 10px; }
.w-robot-tieu-de { font-weight: 700; margin-bottom: 8px; }
.w-robot-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.w-robot-loai { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.w-robot-ds { background: #140c1c; border: 1px solid #1f122c; border-radius: 8px; padding: 12px; max-height: 260px; overflow-y: auto; }
.w-robot-loai-dong { display: flex; align-items: center; gap: 10px; padding: 6px 4px; margin: 0; cursor: pointer; border-bottom: 1px solid #1f122c; }
.w-robot-loai-dong:last-child { border-bottom: 0; }
.w-robot-loai-dong .form-check-input { flex: 0 0 auto; margin: 0; }
.w-robot-ct { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-background); }
.w-robot-ct-ben { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.w-robot-ct-ben .form-select { width: auto; min-height: var(--app-control-height-sm); }
/* Dòng cầu thủ kiểu mới (bản gốc 2026-10-04): nhãn MỤC TIÊU nhỏ in hoa trên ô chọn có huy hiệu cấp. */
.w-robot-ct-ben { align-items: flex-end; }
.w-robot-muc { display: flex; flex-direction: column; gap: 3px; }
.w-robot-muc-nhan { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--app-muted-foreground); }
.w-robot-muc .w-chon-cap select { width: 92px; }
.w-robot-ct-ben > .btn { min-height: var(--app-control-height-sm); }
/* Khối "Mức thẻ đích chung" — chỉ hiện khi chọn ≥2 thẻ. */
.w-robot-chung { margin-top: 12px; padding: 12px; border: 1px solid var(--app-border); border-radius: 10px;
  background: var(--app-background); }
.w-robot-chung .form-select { max-width: 260px; }
/* Chip trong ô chọn cầu thủ: tên + huy hiệu OVR / cấp / mùa trên một dòng. */
.w-robot-chip { display: inline-flex; align-items: center; gap: 5px; }
.w-robot-chip .w-mua { height: 16px; }
/* Nút đoạn "Theo từng cầu thủ | Áp dụng chung": đoạn đang chọn mang nền chuyển của nút chính. */
.w-doan { display: flex; gap: 4px; padding: 4px; background: #150c1f; border: 1px solid #211330; border-radius: 10px; }
.w-doan .btn { flex: 1 1 0; border: 1px solid transparent; color: var(--app-muted-foreground); font-size: .85rem; }
.w-doan .btn-check:checked + .btn { color: #fff; border-color: var(--app-primary-line);
  background-image: linear-gradient(90deg, rgba(var(--app-primary-rgb), .30), rgba(var(--app-primary-2-rgb), .20)); }
.w-hoan-thanh { color: var(--app-primary); font-size: .8rem; font-weight: 600; margin-top: 2px; }
.w-robot-nk { min-height: 40px; font-size: .8rem; }
.ts-ct .w-ct { padding: 2px 0; }
.w-buoc { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--app-border); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.w-buoc-so { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--app-primary-tint); color: var(--app-primary); font-weight: 800; }
@media (max-width: 640px) {
  /* Như m07: nút Làm mới xuống dưới phần mô tả canh phải, "Đã loại trừ" một dòng riêng canh phải. */
  .w-robot-dau { flex-wrap: wrap; }
  .w-robot-dau .btn { margin-left: auto; }
  .w-robot-dau .btn, .w-robot-loai .btn, .w-robot .btn-command { min-height: var(--app-touch-target); }
  .w-robot-loai span { width: 100%; text-align: right; }
}

/* ── Tab Kho vật phẩm ── (màu đo trên 08_kho_vat_pham.png) */
/* Tab con dạng viên trong khung: đang mở nền xanh ngọc nhạt, chữ xanh nhấn. */
.w-tab-vien { display: inline-flex; gap: 4px; padding: 4px; background: #120b1a; border: 1px solid #21132f; border-radius: 10px; }
.w-tab-vien .nav-link { color: var(--app-foreground); border: 1px solid transparent; border-radius: var(--app-radius);
  padding: 7px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; }
.w-tab-vien .nav-link:hover { background: var(--app-muted); }
.w-tab-vien .nav-link.active { color: var(--app-primary); background: var(--app-tab-vien-bg); border-color: var(--app-tab-vien-line); font-weight: 600; }
/* Nút nhỏ của tab đo trên 08: cao 34px (--app-control-height-sm), chữ 14px, biểu tượng ~16px cách
   chữ 6px. Chỉ áp trong tab này; .btn-sm các tab khác vẫn 31px (xem ghi chú Task 14 trong sổ). */
#svip-panel .btn-sm { min-height: var(--app-control-height-sm); font-size: .875rem; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; }
#svip-panel .btn-sm > i { font-size: 1.15em; line-height: 1; }
.w-vp-cong-cu { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
/* Ô tìm của gốc thấp hơn ô nhập thường: 31px, ô biểu tượng hẹp 30px. */
.w-vp-tim { width: 360px; max-width: 100%; }
.w-vp-tim .form-control, .w-vp-tim .input-group-text { min-height: 31px; height: 31px; padding-top: 4px; padding-bottom: 4px; font-size: .875rem; }
.w-vp-tim .input-group-text { background: var(--app-background); padding-left: 8px; padding-right: 8px; }
.w-vp-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
/* Thẻ: cao tối thiểu 167px, nút "Nhận" nằm sát đáy (gốc chừa khoảng trống lớn trên nút ở màn rộng). */
.w-vp { position: relative; display: flex; gap: 12px; padding: 12px; min-width: 0; min-height: 167px;
  background: #110a19; border: 1px solid #180e23; border-radius: 10px; }
.w-vp-gon { background: var(--app-background); min-height: 0; }
.w-vp-anh { flex: 0 0 76px; height: 76px; border-radius: 9px; display: grid; place-content: center; justify-items: center;
  background: #190f24; color: #d4d4d8; font-size: 28px; line-height: 1; }
.w-vp-anh.bp { color: #facc15; }
/* Gói may mắn: khối màu 70px lọt trong ô ảnh 76px (viền tối 3px), biểu tượng quà + chữ nhỏ. */
.w-vp-anh.dong, .w-vp-anh.bac, .w-vp-anh.vang { padding: 3px; color: #fff; font-size: 21px; }
.w-vp-anh.dong { background: linear-gradient(135deg, #8d6445, #3e291c) content-box, #17171c; }
.w-vp-anh.bac { background: linear-gradient(135deg, #a3a3ab, #46464c) content-box, #17171c; }
.w-vp-anh.vang { background: linear-gradient(135deg, #f6dc90, #b85f17) content-box, #17171c; }
.w-vp-anh span { font-size: .66rem; font-weight: 700; margin-top: 4px; }
.w-vp-than { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.w-vp-ten { font-size: .875rem; font-weight: 700; line-height: 1.35; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-vp-than .w-sub { font-size: .78rem; line-height: 1.32; }
.w-vp-nut { margin-top: auto; padding-top: 14px; }
.w-vp-tich { position: absolute; top: 10px; right: 10px; margin: 0; }
.w-vp-rong { grid-column: 1 / -1; text-align: center; }
@media (max-width: 1199px) { .w-vp-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* Như m08: tab con chia đôi kín hàng, ô tìm và nút giãn kín, thẻ 1 cột cao theo nội dung (148px),
     ô ảnh 67px, nút cao bằng vùng chạm. */
  .w-tab-vien { display: flex; }
  .w-tab-vien .nav-item { flex: 1 1 0; }
  .w-tab-vien .nav-link { width: 100%; }
  .w-vp-tim, .w-vp-cong-cu > .btn { width: 100%; }
  .w-vp-cong-cu { margin-bottom: 16px; }
  .w-vp-luoi { grid-template-columns: minmax(0, 1fr); }
  .w-vp { padding: 10px; gap: 10px; min-height: 0; }
  .w-vp-nut { padding-top: 13px; }
  .w-vp-anh { flex-basis: 67px; height: 67px; }
  #svip-panel .btn-sm { min-height: var(--app-touch-target); }   /* Làm mới, Nhận tất cả, Nhận, Mở */
}

/* ── Khối Cộng tác viên (affiliate.html + tab Giới thiệu, cong_tac_vien.js) ── số đo trên
   09_gioi_thieu.png (23 giống). Chỉ áp trong khối: ô số trang billing và băng thông báo ở chỗ khác có
   số đo riêng của chúng. */
.w-ctv .w-thong-bao { padding: 8px 14px; }                     /* băng chính sách cao 40px */
.w-ctv .w-o-the strong { margin-top: 0; line-height: 1.2; }    /* ô số cao 75px, số tiền giữa ô */
.w-ctv .w-o-the { padding-bottom: 15px; }

/* ── Hộp Mua / Bán bản mới (dashboard_hop_gd.js — bản gốc cập nhật 2026-10-04) ── */
/* Tiêu đề canh giữa CẢ HỘP (không phải giữa phần còn trống bên trái hai nút): đặt tuyệt đối. */
.w-hgd .modal-header { position: relative; justify-content: flex-end; gap: 8px; }
.w-hgd-tieu-de { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; font-weight: 800;
  letter-spacing: .04em; pointer-events: none; }
/* Bootstrap cho .btn-close margin-left:auto — để nguyên thì hai margin auto chia đôi khoảng trống và
   nút làm mới trôi ra giữa, nằm dưới chữ tiêu đề. Chỉ nút làm mới được đẩy sang phải. */
.w-hgd-lam-moi { margin-left: auto; }
.w-hgd .modal-header .btn-close { margin-left: 0; }
.w-hgd-dau { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.w-hgd-anh { width: 80px; height: 80px; position: relative; overflow: hidden; border-radius: 8px; background: var(--app-muted); }
.w-hgd-anh img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; }
.w-hgd-ten { font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere; }
.w-hgd-tt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: .85rem;
  color: var(--app-muted-foreground); }
.w-hgd-tt .nh:not(:first-child) { margin-left: 8px; }
.w-hgd-tt .w-ovr { color: #fff; }
/* Ô chọn mùa thẳng cột với tên (lùi qua ảnh 80px + khe 14px). */
.w-hgd-mua { display: flex; align-items: center; gap: 10px; margin: 8px 0 0 94px; }
.w-hgd-mua .form-label { margin: 0; white-space: nowrap; color: var(--app-muted-foreground); font-size: .85rem; }
.w-hgd-mua .form-select { width: auto; min-width: 200px; }
.w-hgd-mua .ts-wrapper { width: 240px; max-width: 100%; }
.w-hgd-mua .ts-dropdown .ts-dropdown-content { max-height: 220px; }
.w-hgd-ke { border-color: var(--app-border); opacity: 1; margin: 14px 0; }
.w-hgd-bang { height: 100%; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-background); overflow: hidden; }
.w-hgd-bang-dau { padding: 8px 12px; border-bottom: 1px solid var(--app-border); font-size: .82rem; color: var(--app-muted-foreground); }
.w-hgd-bang-than { font-size: .875rem; }
.w-hgd-dong { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--app-border); }
.w-hgd-dong:last-child { border-bottom: 0; }
.w-hgd-dong .gia { color: var(--app-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.w-hgd-rong { padding: 14px 12px; text-align: center; color: var(--app-muted-foreground); }
.w-hgd .w-o-nho strong { font-variant-numeric: tabular-nums; }
/* Hàng nhãn trái – ô phải như ảnh ("Giá bán" | ô giá). */
.w-hgd-o { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 10px; }
.w-hgd-o[hidden] { display: none; }
.w-hgd-o .form-label { margin: 0; }
/* Ô giá kiểu game (bp_game.js): chữ gõ + đuôi "0,000" dồn phải như ảnh; bản rút gọn ("2.9M") bên trái. */
.w-hgd .o-gia { display: flex; align-items: center; justify-content: flex-end; cursor: text; }
.w-hgd .o-gia:focus-within { border-color: var(--app-primary-line); box-shadow: var(--app-focus-ring); }
.w-hgd .o-gia input { border: 0; outline: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit;
  font-variant-numeric: tabular-nums; min-width: 2px; flex: 0 0 auto; text-align: right; }
.w-hgd .o-gia-duoi { pointer-events: none; font-variant-numeric: tabular-nums; color: var(--app-muted-foreground); }
.w-hgd .o-gia-gon { order: -1; margin-right: auto; padding-right: 10px; font-size: .8rem; white-space: nowrap;
  pointer-events: none; color: var(--app-muted-foreground); }
.w-hgd-goi-y { text-align: right; font-size: .75rem; font-weight: 600; color: var(--app-success); }
@media (max-width: 640px) {
  .w-hgd-dau { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
  .w-hgd-anh { width: 64px; height: 64px; }
  .w-hgd-mua { margin-left: 0; }
  .w-hgd-mua .form-select { flex: 1 1 auto; min-width: 0; }
  .w-hgd-mua .ts-wrapper { flex: 1 1 auto; min-width: 0; width: auto; }
  .w-hgd-o { grid-template-columns: 84px minmax(0, 1fr); }
  .w-hgd-lam-moi { width: var(--app-touch-target); height: var(--app-touch-target); }
  .w-hgd .w-o-nho { padding: 8px 10px; }
}

/* Tom Select (ô chọn mùa): áo tối, danh sách là lưới 3 cột có huy hiệu như bản gốc.
   Tom Select không tải thì các lớp này không có gì để áp — ô vẫn là <select> gốc. */
.ts-wrapper .ts-control, .ts-wrapper.single.input-active .ts-control {
  background: var(--app-input); border-color: var(--app-border); color: var(--app-foreground); }
/* Mũi tên ▾ là ảnh nền của chính .form-select (như ảnh gốc): khung chỉ đổi MÀU nền, phần trong trong suốt. */
.ts-wrapper.form-select .ts-control, .ts-wrapper.form-select.single.input-active .ts-control {
  background: transparent; color: var(--app-foreground); padding-right: 2.25rem; }
.ts-wrapper.form-select { background-color: var(--app-input); border-color: var(--app-border); min-height: var(--app-control-height); }
.ts-wrapper.focus.form-select, .ts-wrapper.focus .ts-control { border-color: var(--app-primary-line); box-shadow: var(--app-focus-ring); }
.ts-wrapper .ts-control input { color: var(--app-foreground); }
.ts-wrapper .ts-control input::placeholder { color: var(--app-muted-foreground); }
.ts-dropdown { background: var(--app-card); border: 1px solid var(--app-border); color: var(--app-foreground); border-radius: 10px; }
.ts-dropdown .ts-dropdown-content { padding: 6px; max-height: 360px; }
.ts-luoi-mua .ts-dropdown-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ts-dropdown .option { border-radius: 6px; padding: 6px 8px; color: var(--app-foreground); }
.ts-dropdown .active { background: var(--app-primary-tint); color: #fff; }
.ts-dropdown .selected { outline: 1px solid var(--app-primary-line); }
.ts-dropdown .no-results { grid-column: 1 / -1; padding: 8px; color: var(--app-muted-foreground); }
.ts-mua { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .85rem; }
.ts-mua span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-wrapper .item .remove { border-left-color: var(--app-border) !important; color: var(--app-muted-foreground); }
/* Chip của ô chọn nhiều: tom-select.bootstrap5.css mặc định nền xám sáng chữ đen — lạc tông trên nền tối
   (ảnh bản gốc mới: chip nền tối viền mảnh). */
.ts-wrapper.multi .ts-control > .item { background: var(--app-muted); border: 1px solid var(--app-border);
  color: var(--app-foreground); border-radius: 6px; }
.ts-wrapper.multi .ts-control > .item.active { background: var(--app-primary-tint); border-color: var(--app-primary-line);
  color: var(--app-foreground); }
@media (max-width: 480px) {
  .ts-luoi-mua .ts-dropdown-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Chuông thông báo (bản thật, web_api.js) + danh sách kế hoạch liên kết (Cài đặt) ── */
.w-chuong { position: relative; }
.w-chuong-so { position: absolute; top: -2px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #ef4444; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
.w-chuong-ds { width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: 0; }
.w-chuong-dong { padding: 8px 12px; border-bottom: 1px solid var(--app-border); font-size: .875rem; overflow-wrap: anywhere; }
.w-chuong-dong.moi { background: rgba(var(--app-primary-rgb), .12); }
.w-ds-lk { padding-left: 1.1rem; }
.w-ds-lk li { margin-bottom: .35rem; overflow-wrap: anywhere; }

/* ── Lượt B sau rà soát cuối: dòng phụ của danh sách chèn + kết quả nạp mã ── */
.w-lenh-phu { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.w-lenh-phu .w-chip { white-space: nowrap; font-size: .72rem; }
.w-lenh-phu .w-chip i { margin-right: 3px; }
.w-nap-kq { min-height: 1.25rem; font-size: .875rem; overflow-wrap: anywhere; }
.w-nap-kq.ok { color: #86efac; }
.w-nap-kq.loi { color: #fca5a5; }