/* ==========================================================================
   BM BASE — DESIGN TOKEN + COMPONENT DUNG CHUNG (GREEN v2)
   Dung chung cho CA Cua 0 (public) va Cua 1 (private).
   TUYET DOI KHONG dat selector rieng tu (dieu huong thanh pho, tai chinh,
   phong, tang, toa, nhan su) vao file nay — de tranh lot sang HTML cong khai.
   ========================================================================== */

:root {
  /* ---------- COLOR ---------- */
  --color-bg:            #0A1628;   /* deep navy */
  --color-bg-alt:        #0D1D33;
  --color-surface:       #101F35;   /* dark navy card */
  --color-surface-2:     #16283F;
  --color-surface-3:     #1B3149;
  --color-primary:       #1B3A5C;
  --color-accent:        #35C4E8;   /* cyan / tech blue */
  --color-accent-strong: #1FA8CC;
  --color-accent-soft:   rgba(53, 196, 232, .13);
  --color-premium:       #D8AC55;   /* gold / amber — dung tiet che */
  --color-premium-soft:  rgba(216, 172, 85, .13);
  --color-text:          #F2F6FA;
  --color-text-muted:    #9DB0C6;
  --color-text-dim:      #7E92A9;
  --color-border:        #1F3552;
  --color-border-strong: #2B4A70;
  --color-success:       #45C08F;
  --color-warning:       #E3AC4A;
  --color-danger:        #E8756A;

  /* ba mau logo goc — CHI dung lam brand accent co kiem soat */
  --brand-la:            #3FB86F;
  --brand-duong:         #3288D8;
  --brand-cam:           #F08A33;

  /* ---------- TYPOGRAPHY ---------- */
  --font-stack: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --fs-page:      46px;
  --fs-section:   30px;
  --fs-card:      19px;
  --fs-body:      15.5px;
  --fs-small:     14px;
  --fs-badge:     11.5px;
  --lh-page:      1.10;
  --lh-section:   1.20;
  --lh-body:      1.58;
  --lh-tight:     1.40;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --ls-body:      0;
  --ls-heading:   .01em;
  --ls-badge:     .04em;

  /* ---------- SPACING ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- RADIUS ---------- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;

  /* ---------- BORDER ---------- */
  --border-thin: 1px solid var(--color-border);
  --border-accent: 1px solid var(--color-accent-strong);

  /* ---------- SHADOW ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 4px 14px rgba(0,0,0,.30);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.38);

  /* ---------- Z-INDEX ---------- */
  --z-base: 1; --z-sticky: 100; --z-drawer: 300; --z-modal: 400;
  --z-toast: 500; --z-tooltip: 600;

  /* ---------- BREAKPOINT (tai lieu — media query dung so that) ---------- */
  --bp-mobile: 480px; --bp-tablet: 900px; --bp-laptop: 1280px;
  --bp-desktop: 1536px;

  /* ---------- LAYOUT ---------- */
  --content-max: 1400px;
  --content-hep: 1120px;

  /* ---------- TRANSITION ---------- */
  --tr-fast: 120ms ease; --tr-base: 180ms ease; --tr-slow: 280ms ease;
}


/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-stack);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: var(--ls-heading); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- FOCUS (nhin ro, khong chi dua vao mau) ---------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- TIENG VIET: khong cat dau, khong tran chu ---------- */
.bm-wrap { overflow-wrap: anywhere; word-break: normal; hyphens: none; }

/* ==========================================================================
   COMPONENT DUNG CHUNG — ten trung tinh
   ========================================================================== */

/* ---------- BUTTON ---------- */
.bm-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 42px; padding: 0 var(--sp-5);
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  cursor: pointer; transition: background var(--tr-base),
    border-color var(--tr-base), color var(--tr-base);
}
.bm-btn:hover { background: var(--color-surface-3);
  border-color: var(--color-border-strong); text-decoration: none; }
.bm-btn:active { transform: translateY(1px); }
.bm-btn[disabled], .bm-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed;
}
.bm-btn[disabled]::after, .bm-btn[aria-disabled="true"]::after {
  content: " (không dùng được)"; font-size: var(--fs-badge);
  font-weight: var(--fw-medium); color: var(--color-text-dim);
}
.bm-btn--chinh {
  background: var(--color-accent-strong); border-color: var(--color-accent);
  color: #04141C;
}
.bm-btn--chinh:hover { background: var(--color-accent); }
.bm-btn--vien {
  background: transparent; border-color: var(--color-border-strong);
}
.bm-btn--vang {
  background: var(--color-premium-soft);
  border-color: var(--color-premium); color: var(--color-premium);
}
.bm-btn--nho { min-height: 34px; padding: 0 var(--sp-3);
  font-size: var(--fs-small); }

/* ---------- CARD ---------- */
.bm-card {
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--tr-base), transform var(--tr-base);
}
.bm-card--hover:hover {
  border-color: var(--color-border-strong); transform: translateY(-2px);
}
.bm-card__tieude {
  font-size: var(--fs-card); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); margin-bottom: var(--sp-2);
}
.bm-card__mota { color: var(--color-text-muted); font-size: var(--fs-body); }

/* ---------- BADGE ---------- */
.bm-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2); border-radius: var(--radius-pill);
  border: var(--border-thin); background: var(--color-surface-2);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-badge); text-transform: uppercase;
  color: var(--color-text-muted); white-space: nowrap;
}
.bm-badge--mock {
  color: var(--color-warning); border-color: var(--color-warning);
  background: rgba(227, 172, 74, .12);
}
.bm-badge--fixture {
  color: var(--color-danger); border-color: var(--color-danger);
  background: rgba(232, 117, 106, .12);
}
.bm-badge--vang {
  color: var(--color-premium); border-color: var(--color-premium);
  background: var(--color-premium-soft);
}
.bm-badge--xanh {
  color: var(--color-accent); border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

/* ---------- STATUS (mau KHONG phai tin hieu duy nhat — co chu) ---------- */
.bm-status { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: var(--fw-medium); }
.bm-status__cham { width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 8px; }
.bm-status--chay  .bm-status__cham { background: var(--color-success); }
.bm-status--xay   .bm-status__cham { background: var(--color-warning); }
.bm-status--chua  .bm-status__cham { background: var(--color-text-dim); }

/* ---------- TABLE ---------- */
.bm-table-wrap { width: 100%; overflow-x: auto;
  border: var(--border-thin); border-radius: var(--radius-md); }
.bm-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.bm-table th, .bm-table td {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  border-bottom: 1px solid var(--color-border); font-size: var(--fs-small);
  vertical-align: top;
}
.bm-table th {
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-badge);
  text-transform: uppercase; font-size: var(--fs-badge);
  position: sticky; top: 0; z-index: var(--z-base);
}
.bm-table tbody tr:hover { background: var(--color-surface-2); }
.bm-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- FORM / FILTER / SEARCH ---------- */
.bm-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.bm-label { font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--color-text-muted); }
.bm-input, .bm-select {
  min-height: 42px; padding: 0 var(--sp-3);
  background: var(--color-bg-alt); border: var(--border-thin);
  border-radius: var(--radius-md); color: var(--color-text);
  transition: border-color var(--tr-base);
}
.bm-input:hover, .bm-select:hover { border-color: var(--color-border-strong); }
.bm-input::placeholder { color: var(--color-text-dim); }
.bm-filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: flex-end; }

/* ---------- MODAL ---------- */
.bm-modal-nen {
  position: fixed; inset: 0; background: rgba(4, 10, 20, .72);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4); z-index: var(--z-modal);
}
.bm-modal {
  background: var(--color-surface); border: var(--border-thin);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 560px; width: 100%; padding: var(--sp-6);
}

/* ---------- DRAWER ---------- */
.bm-drawer-nen {
  position: fixed; inset: 0; background: rgba(4, 10, 20, .62);
  z-index: var(--z-drawer);
}
.bm-drawer {
  position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px);
  background: var(--color-bg-alt); border-right: var(--border-thin);
  box-shadow: var(--shadow-lg); z-index: var(--z-drawer);
  overflow-y: auto; padding: var(--sp-4);
}
[hidden] { display: none !important; }

/* ---------- TOOLTIP ---------- */
.bm-tooltip { position: relative; }
.bm-tooltip__noi {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--color-surface-3); border: var(--border-thin);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small); white-space: nowrap;
  box-shadow: var(--shadow-md); z-index: var(--z-tooltip);
}

/* ---------- TOAST ---------- */
.bm-toast-khu {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: var(--z-toast);
}
.bm-toast {
  background: var(--color-surface-3); border: var(--border-thin);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-md); max-width: 380px;
}

/* ---------- STATE: LOADING / EMPTY / FORBIDDEN / ERROR / STEP-UP ---------- */
.bm-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  gap: var(--sp-3); padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg); background: var(--color-surface);
}
.bm-state__nhan {
  font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-badge); text-transform: uppercase;
  color: var(--color-text-dim);
}
.bm-state__tieude { font-size: var(--fs-card);
  font-weight: var(--fw-semibold); }
.bm-state__mota { color: var(--color-text-muted); max-width: 46ch; }
.bm-state--forbidden { border-color: var(--color-danger); }
.bm-state--forbidden .bm-state__nhan { color: var(--color-danger); }
.bm-state--error { border-color: var(--color-warning); }
.bm-state--error .bm-state__nhan { color: var(--color-warning); }
.bm-state--stepup { border-color: var(--color-premium); }
.bm-state--stepup .bm-state__nhan { color: var(--color-premium); }

.bm-spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  animation: bm-quay 720ms linear infinite;
}
@keyframes bm-quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bm-spin { animation-duration: 2400ms; }
  * { transition-duration: 1ms !important; }
}


/* ---------- HUY HIEU LOGO (dung chung ca hai cua) ----------
   File logo goc NEN TRANG. Dat trong dia tron trang, vien cyan manh
   -> trong co y, khong giong loi hien thi. Khong sua file anh goc. */
.bm-dau-tron {
  display: grid; place-items: center; flex: 0 0 auto;
  background: #FFFFFF; border-radius: 50%;
  border: 1px solid var(--color-accent-strong);
  box-shadow: 0 0 0 3px rgba(53, 196, 232, .12);
  overflow: hidden;
}
.bm-dau-tron img { border-radius: 50%; object-fit: contain; }
.bm-dau-tron--nhonhat { width: 40px; height: 40px; padding: 3px; }
.bm-dau-tron--nhonhat img { width: 34px; height: 34px; }
.bm-dau-tron--nho { width: 46px; height: 46px; padding: 3px; }
.bm-dau-tron--nho img { width: 40px; height: 40px; }
.bm-dau-tron--vua { width: 72px; height: 72px; padding: 5px; }
.bm-dau-tron--vua img { width: 62px; height: 62px; }

/* ---------- SKELETON dong chu cho loading ---------- */
.bm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }