/* ==========================================================================
   BM PUBLIC — CUA 0. Website cong khai.
   File nay CHI chua selector cong khai. KHONG co dieu huong thanh pho,
   KHONG co selector tai chinh / nhan su / phong / tang / toa.
   Cach ly: khong @import file rieng tu.
   ========================================================================== */

/* Cua 0 sang hon va thoang hon Cua 1 — cung he mau, khac do dam */
body.bm-cua0 {
  /* Cua 0 doc thoai mai hon Cua 1: chu than lon hon, dong thua hon.
     Cua 1 giu nguyen mat do de xem duoc nhieu du lieu. */
  --fs-body:  16px;
  --fs-small: 14.5px;
  --lh-body:  1.62;
  --color-bg:        #0E1E36;
  --color-bg-alt:    #122645;
  --color-surface:   #16294A;
  --color-surface-2: #1C3358;
  --color-surface-3: #244065;
}

.bm-cua0 { display: flex; flex-direction: column; min-height: 100vh; }
.bm-vung { width: 100%; max-width: var(--content-max);
  margin: 0 auto; padding: 0 var(--sp-6); }
.bm-noscript { padding: var(--sp-6) 0; }

/* ==========================================================================
   NEN LUOI RAT NHE — chi o hero va mot muc, khong phu toan trang
   ========================================================================== */
.bm-luoi-nen { position: relative; isolation: isolate; }
.bm-luoi-nen::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(157, 176, 198, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 176, 198, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:
    radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* ---------- HEADER ---------- */
.bm-dau {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(10, 22, 40, .90);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-thin);
}
.bm-dau__trong { display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-5); min-height: 76px; }
.bm-hieu { display: flex; align-items: center; gap: var(--sp-3);
  color: var(--color-text); }
.bm-hieu:hover { text-decoration: none; }
.bm-hieu__chu { display: flex; flex-direction: column; line-height: 1.15; }
.bm-hieu__ten { font-size: 15px; font-weight: var(--fw-bold);
  letter-spacing: .02em; }
.bm-hieu__phu { font-size: 11.5px; font-weight: var(--fw-semibold);
  letter-spacing: .08em; color: var(--color-premium); }

.bm-menu { display: flex; align-items: center; gap: var(--sp-6); }
.bm-menu a { color: var(--color-text-muted); font-size: 15.5px;
  font-weight: var(--fw-medium); }
.bm-menu a:hover { color: var(--color-text); text-decoration: none; }

.bm-dau__nut { display: flex; align-items: center; gap: var(--sp-3); }
.bm-menu-mo { display: none; }
.bm-drawer__menu { display: flex; flex-direction: column;
  gap: var(--sp-3); margin-top: var(--sp-5); }

/* ==========================================================================
   HERO
   ========================================================================== */
.bm-hero { position: relative; padding: var(--sp-9) 0; overflow: hidden; }
.bm-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(940px 440px at 16% -12%, rgba(53,196,232,.15), transparent 62%),
    radial-gradient(720px 400px at 90% 6%, rgba(216,172,85,.09), transparent 64%);
  pointer-events: none;
}
.bm-hero__trong { position: relative; display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: var(--sp-8); align-items: center; }
.bm-hero__chu { max-width: 640px; }

.bm-hero__nhan { display: inline-flex; margin-bottom: var(--sp-4); }
.bm-hero__ten { margin: 0 0 var(--sp-4); font-weight: var(--fw-bold);
  line-height: var(--lh-page); letter-spacing: .005em; }
/* BAT BUOC 2 dong tren desktop: "THE GIOI CONG NGHE" / "BINH MINH" */
.bm-hero__d1 { display: block; white-space: nowrap;
  font-size: clamp(28px, 3.2vw, 48px); }
.bm-hero__d2 { display: block; white-space: nowrap;
  font-size: clamp(32px, 4.1vw, 60px);
  background: linear-gradient(96deg, var(--color-accent), var(--color-premium));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.bm-hero__slogan {
  font-size: var(--fs-card); font-weight: var(--fw-semibold);
  letter-spacing: .14em; color: var(--color-premium);
  margin-bottom: var(--sp-5);
}
.bm-hero__mo { color: var(--color-text-muted); font-size: 17px;
  max-width: 52ch; margin-bottom: var(--sp-6); }
.bm-hero__nut { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- MINH HOA HERO — CSS thuan, khong anh ngoai ---------- */
.bm-minhhoa { position: relative; display: grid; place-items: center;
  min-height: 460px; }
.bm-minhhoa__vong { position: absolute; border-radius: 50%;
  border: 1px solid var(--color-border-strong); opacity: .55; }
.bm-minhhoa__vong--1 { width: 340px; height: 340px; }
.bm-minhhoa__vong--2 { width: 470px; height: 470px;
  border-style: dashed; opacity: .3; }

.bm-may {
  position: relative; width: 232px; height: 400px;
  border: 1px solid var(--color-border-strong);
  border-radius: 30px; padding: var(--sp-3);
  background: linear-gradient(158deg, var(--color-surface-2),
              var(--color-bg-alt) 62%);
  box-shadow: var(--shadow-lg);
}
.bm-may__loa { position: absolute; top: 13px; left: 50%;
  transform: translateX(-50%); width: 54px; height: 5px;
  border-radius: var(--radius-pill); background: var(--color-border-strong); }
.bm-may__man {
  height: 100%; border-radius: 22px; padding: var(--sp-6) var(--sp-4);
  background: linear-gradient(180deg, rgba(53,196,232,.07), transparent 46%);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--sp-3);
  justify-content: center;
}
.bm-may__vach { height: 8px; border-radius: var(--radius-pill);
  background: var(--color-surface-3); }
.bm-may__vach--nhan { background: var(--color-accent); width: 54%; }
.bm-may__vach--ngan { width: 68%; }
.bm-may__o { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0; }
.bm-may__cham { width: 26px; height: 26px; border-radius: var(--radius-sm); }
.bm-may__cham--la    { background: var(--brand-la); }
.bm-may__cham--duong { background: var(--brand-duong); }
.bm-may__cham--cam   { background: var(--brand-cam); }

.bm-the-noi {
  position: absolute; right: 0; bottom: 42px;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface); border: var(--border-thin);
  border-left: 3px solid var(--color-premium);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.bm-the-noi__nhan { font-size: var(--fs-badge);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-badge);
  color: var(--color-premium); }
.bm-the-noi__chu { font-size: var(--fs-small);
  font-weight: var(--fw-semibold); white-space: nowrap; }

/* ==========================================================================
   SECTION — nhip dieu thi giac: vach gold + nhan chu hoa + tieu de lon
   ========================================================================== */
.bm-muc { padding: calc(var(--sp-9) + var(--sp-2)) 0;
  border-top: var(--border-thin); }
.bm-muc--nen { background: var(--color-bg-alt); }
.bm-muc__dau { margin-bottom: var(--sp-7); max-width: var(--content-hep); }
.bm-muc__nhan {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-premium); margin-bottom: var(--sp-3);
}
.bm-muc__vach { width: 30px; height: 2px; flex: 0 0 30px;
  background: var(--color-premium); border-radius: var(--radius-pill); }
.bm-muc__tieude { font-size: var(--fs-section);
  font-weight: var(--fw-semibold); line-height: var(--lh-section); }
.bm-muc__mo { color: var(--color-text-muted); margin-top: var(--sp-3);
  font-size: 16px; max-width: 74ch; }

.bm-luoi { display: grid; gap: var(--sp-5); }
.bm-cua0 .bm-card { padding: var(--sp-6); }
.bm-cua0 .bm-card__mota { font-size: var(--fs-body);
  line-height: var(--lh-body); }
.bm-luoi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-luoi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bm-luoi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- THE THUONG HIEU ---------- */
.bm-dv { display: flex; flex-direction: column; gap: var(--sp-3);
  height: 100%; padding: var(--sp-6); }
.bm-dv__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center; margin-bottom: var(--sp-2);
  background: var(--color-accent-soft); color: var(--color-accent);
  border: 1px solid rgba(53, 196, 232, .26);
}
.bm-dv__linhvuc { color: var(--color-text-muted);
  font-size: var(--fs-small); }
.bm-dv__diem { display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-3); }
.bm-dv__diem li { display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }
.bm-dv__diem li::before { content: "✓"; color: var(--color-accent);
  font-weight: var(--fw-bold); flex: 0 0 auto; }
.bm-dv__chan { margin-top: auto; padding-top: var(--sp-4);
  border-top: var(--border-thin); display: flex;
  flex-direction: column; gap: 2px; }
.bm-dv__nhan { font-size: var(--fs-badge); letter-spacing: var(--ls-badge);
  text-transform: uppercase; color: var(--color-text-dim);
  font-weight: var(--fw-semibold); }
.bm-dv__so { font-size: var(--fs-card); font-weight: var(--fw-semibold);
  color: var(--color-accent); }
.bm-dv--duong .bm-dv__icon { border-top: 2px solid var(--brand-duong); }
.bm-dv--cam   .bm-dv__icon { border-top: 2px solid var(--brand-cam); }
.bm-dv--la    .bm-dv__icon { border-top: 2px solid var(--brand-la); }

/* ---------- DIEM PHUC VU ---------- */
.bm-diem { display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); }
.bm-diem__so { font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-badge); color: var(--color-premium); }
.bm-diem__dc { font-size: 21px; font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); }
.bm-diem__kv { color: var(--color-text-muted); font-size: var(--fs-small);
  margin-top: -6px; }
.bm-diem__dong { display: flex; }
.bm-diem__so-dt { font-size: 19px; font-weight: var(--fw-semibold);
  color: var(--color-accent); }
.bm-diem__gio, .bm-diem__th { display: flex; flex-direction: column;
  gap: var(--sp-1); }
.bm-diem__nhan { font-size: var(--fs-badge);
  letter-spacing: var(--ls-badge); text-transform: uppercase;
  color: var(--color-text-dim); font-weight: var(--fw-semibold); }
.bm-diem__th { margin-top: auto; padding-top: var(--sp-4);
  border-top: var(--border-thin); }
.bm-diem__thds { display: flex; flex-direction: column; gap: var(--sp-1); }
.bm-diem__thds li { font-size: var(--fs-small); color: var(--color-text-muted);
  display: flex; gap: var(--sp-2); }
.bm-diem__thds li::before { content: "•"; color: var(--color-premium); }

/* ---------- SU MENH ---------- */
.bm-sm { display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-sm__o { display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-5); background: var(--color-surface);
  border: var(--border-thin); border-radius: var(--radius-lg);
  font-size: 16px; }
.bm-sm__cham { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 9px;
  border-radius: 50%; background: var(--color-accent); }

/* ---------- GIA TRI COT LOI ---------- */
.bm-gtl { display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); align-items: flex-start; }
.bm-gtl__so { font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-badge); color: var(--color-premium); }
.bm-gtl__ten { font-size: 26px; font-weight: var(--fw-bold);
  letter-spacing: .04em; }
.bm-chip { display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5); }
.bm-chip__o {
  padding: 7px var(--sp-4); border-radius: var(--radius-pill);
  border: var(--border-thin); background: var(--color-surface);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* ---------- TRIET LY + Y NGHIA MAU ---------- */
.bm-triet {
  border-left: 3px solid var(--color-premium);
  padding: var(--sp-6) var(--sp-7); background: var(--color-surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: var(--content-hep);
}
.bm-triet p { font-size: 20px; font-weight: var(--fw-medium);
  line-height: 1.5; }
.bm-mau { display: grid; gap: var(--sp-4); margin-top: var(--sp-6);
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bm-mau__o { display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); background: var(--color-surface);
  border: var(--border-thin); border-radius: var(--radius-md); }
.bm-mau__cham { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 5px;
  border-radius: 50%; }
.bm-mau__o--la    .bm-mau__cham { background: var(--brand-la); }
.bm-mau__o--duong .bm-mau__cham { background: var(--brand-duong); }
.bm-mau__o--cam   .bm-mau__cham { background: var(--brand-cam); }
.bm-mau__ten { display: block; font-weight: var(--fw-semibold);
  margin-bottom: 2px; }
.bm-mau__y { display: block; color: var(--color-text-muted);
  font-size: var(--fs-small); }

/* ---------- LIEN HE ---------- */
.bm-lh__luoi { display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bm-lh__o { display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6); }
.bm-lh__nhan { font-size: var(--fs-badge); letter-spacing: var(--ls-badge);
  text-transform: uppercase; color: var(--color-text-dim);
  font-weight: var(--fw-semibold); }
.bm-lh__lon { font-size: 27px; font-weight: var(--fw-bold);
  color: var(--color-premium); }
.bm-lh__phu { color: var(--color-text-muted); font-size: var(--fs-small); }
.bm-lh__so { font-size: 20px; font-weight: var(--fw-semibold);
  color: var(--color-accent); }
.bm-lh__kenh { font-size: 16px; font-weight: var(--fw-medium); }

/* ---------- FOOTER ---------- */
.bm-chan { margin-top: auto; border-top: var(--border-thin);
  background: var(--color-bg); padding: var(--sp-8) 0 var(--sp-6); }
.bm-chan__trong { display: grid; gap: var(--sp-6);
  grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.bm-chan__cot { display: flex; flex-direction: column;
  gap: var(--sp-2); min-width: 0; }
.bm-chan__cot--hieu { gap: var(--sp-3); }
.bm-chan__ten { font-size: 15px; letter-spacing: .02em; }
.bm-chan__slogan { color: var(--color-premium);
  font-weight: var(--fw-semibold); letter-spacing: .08em;
  font-size: var(--fs-small); }
.bm-chan__nhan { font-size: var(--fs-badge); letter-spacing: var(--ls-badge);
  text-transform: uppercase; color: var(--color-text-dim);
  font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.bm-chan__nhan--tren { margin-top: var(--sp-4); }
.bm-chan__ds { display: flex; flex-direction: column; gap: var(--sp-2); }
.bm-chan__dong { display: flex; flex-direction: column; }
.bm-chan__dong span { color: var(--color-text-muted);
  font-size: var(--fs-small); }
.bm-chan__ghi { color: var(--color-text-dim); font-size: var(--fs-small);
  margin-top: var(--sp-6); border-top: var(--border-thin);
  padding-top: var(--sp-4); }

/* ---------- TRANG DANG NHAP ---------- */
.bm-dn { flex: 1; display: grid; place-items: center;
  padding: var(--sp-8) var(--sp-5); }
.bm-dn__hop { width: 100%; max-width: 480px; }
.bm-dn__dau { text-align: center; margin-bottom: var(--sp-6);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); }
.bm-dn__tieude { font-size: var(--fs-section);
  font-weight: var(--fw-semibold); }
.bm-dn__mo { color: var(--color-text-muted); font-size: var(--fs-small); }
.bm-dn__ds { display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-5); }
.bm-dn__nut { display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-3); width: 100%;
  text-align: left; min-height: 58px; padding: var(--sp-3) var(--sp-4); }
.bm-dn__ve { display: inline-flex; margin-bottom: var(--sp-5); }
.bm-dn__canhbao {
  margin-top: var(--sp-5); padding: var(--sp-4);
  border: 1px dashed var(--color-danger); border-radius: var(--radius-md);
  background: rgba(232, 117, 106, .08);
  font-size: var(--fs-small); color: var(--color-text-muted);
}

/* ==========================================================================
   RESPONSIVE — kiem tai 1920 · 1536 · 1440 · 1366 · tablet · 390
   ========================================================================== */
@media (max-width: 1440px) {
  .bm-vung { padding: 0 var(--sp-5); }
  .bm-minhhoa { min-height: 420px; }
}
@media (max-width: 1280px) {
  .bm-luoi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-chan__trong { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-menu { gap: var(--sp-4); }
  .bm-menu a { font-size: 14.5px; }
}
@media (max-width: 1100px) {
  .bm-hero__trong { grid-template-columns: minmax(0, 1fr); }
  .bm-hero__chu { max-width: none; }
  .bm-minhhoa { min-height: 360px; }
  .bm-may { width: 200px; height: 340px; }
  .bm-luoi--3, .bm-mau, .bm-lh__luoi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .bm-menu { display: none; }
  .bm-menu-mo { display: inline-flex; }
  .bm-hero { padding: var(--sp-7) 0; }
  .bm-muc { padding: var(--sp-7) 0; }
  .bm-sm { grid-template-columns: minmax(0, 1fr); }
  .bm-the-noi { right: auto; left: 0; bottom: 10px; }
}
@media (max-width: 640px) {
  .bm-vung { padding: 0 var(--sp-4); }
  .bm-luoi--2, .bm-luoi--3, .bm-luoi--4,
  .bm-mau, .bm-lh__luoi, .bm-chan__trong {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Mobile duoc xuong dong rieng — van khong tach chu "NGHE" */
  .bm-hero__d1 { white-space: normal; font-size: clamp(24px, 7.2vw, 34px); }
  .bm-hero__d2 { white-space: nowrap; font-size: clamp(30px, 9.4vw, 44px); }
  .bm-hero__slogan { font-size: var(--fs-body); letter-spacing: .1em; }
  .bm-hero__mo { font-size: 16px; }
  .bm-dau__trong { min-height: 64px; }
  .bm-hieu__ten { font-size: 13px; }
  .bm-hero__nut .bm-btn { width: 100%; justify-content: center; }
  .bm-minhhoa { min-height: 300px; }
  .bm-may { width: 170px; height: 292px; }
  .bm-minhhoa__vong--1 { width: 250px; height: 250px; }
  .bm-minhhoa__vong--2 { width: 330px; height: 330px; }
  .bm-triet { padding: var(--sp-5); }
  .bm-triet p { font-size: 17px; }
  .bm-gtl__ten { font-size: 22px; }
}
@media (max-width: 400px) {
  .bm-hieu__chu { display: none; }
  .bm-the-noi__chu { white-space: normal; }
}