/* ============================================================
   BP Data Portal — hệ thiết kế
   Token chia 3 tầng: bảng màu thô → ngữ nghĩa giao diện → ngữ nghĩa nghiệp vụ.
   Tầng 3 là chỗ đáng giá: đặt tên theo Ý NGHĨA THỊ TRƯỜNG (tăng/giảm, trần/sàn),
   không theo màu — đổi màu sau này chỉ sửa một chỗ, mọi biểu đồ theo cùng.
   ============================================================ */

:root {
  /* ---------- Tầng 1: bảng màu thô ---------- */
  /* Lấy từ logo Bros Partners: vành đai navy, hành tinh vàng hổ phách,
     ba vệt cam-đỏ. Navy làm màu chính, vàng làm màu nhấn. */
  --navy-400: #2C5A96;
  --navy-500: #1C3F6E;   /* vành đai logo */
  --navy-600: #17365D;   /* chữ trắng đè lên đạt ~10.5:1 */
  --navy-700: #102741;
  --navy-300: #6BA3E0;   /* bản sáng, dùng cho nền tối */
  --navy-200: #8FBCEA;

  --gold-300: #F7CE6B;
  --gold-400: #F2B738;
  --gold-500: #E9A21C;   /* hành tinh */
  --gold-600: #B4790C;   /* đủ tối để làm chữ trên nền sáng */

  --ember-500: #F26A21;  /* vệt cam */
  --ember-600: #E0342A;

  /* Xám ẤM (ngả nâu) thay vì xám lạnh — nhìn bớt khô cứng trên màn hình lớn */
  --warm-0:  #ffffff;
  --warm-25: #fafaf9;
  --warm-50: #f6f5f4;
  --warm-100:#f3f2f0;
  --warm-150:#efeeec;
  --warm-900:#191919;

  /* ---------- Tầng 2: ngữ nghĩa giao diện ---------- */
  --bg-base:      var(--warm-50);
  --bg-sidebar:   var(--warm-25);
  --bg-surface:   var(--warm-0);
  --bg-subtle:    var(--warm-100);
  --bg-hover:     #0000000a;
  --bg-inverse:   var(--warm-900);

  --text-primary:    #0d0d0d;
  --text-secondary:  #31302e;
  --text-tertiary:   #615d59;
  --text-quaternary: #a39e98;
  --text-inverse:    #ffffff;

  /* Viền theo alpha → tự hoạt động trên mọi nền, kể cả khi đổi sang nền tối */
  --border-hairline: #0000000f;   /*  6% — chia ô trong bảng */
  --border-subtle:   #0000001a;   /* 10% — mặc định */
  --border-strong:   #00000029;   /* 16% — nhấn mạnh */

  --accent:        var(--navy-500);
  --accent-text:   var(--navy-600);  /* accent dùng làm CHỮ trên nền sáng */
  /* Cặp nền/chữ cho nút: phải đi cùng nhau, vì ở nền tối accent sáng lên thì
     chữ trắng sẽ tụt tương phản. Nền tối phải lật sang chữ đen. */
  --accent-btn-bg: var(--navy-600);
  --accent-btn-fg: #ffffff;
  --accent-hover:  var(--navy-700);
  --accent-soft:   #1C3F6E14;        /*  8% — nền badge */
  --accent-fill:   #1C3F6E26;        /* 15% — vùng tô dưới đường biểu đồ */
  --accent-ring:   #1C3F6E38;        /* vòng focus */

  /* Vàng thương hiệu — dùng để nhấn, KHÔNG dùng làm nền cho chữ trắng
     (vàng quá sáng, chữ trắng chỉ đạt ~2:1). Làm chữ thì dùng --brand-gold-text. */
  --brand-gold:      var(--gold-500);
  --brand-gold-text: var(--gold-600);
  --brand-gold-soft: #E9A21C1f;
  --brand-ember:     var(--ember-500);

  /* ---------- Tầng 3: ngữ nghĩa NGHIỆP VỤ tài chính ---------- */
  /* Không phải xanh–đỏ chói: lục thẫm và đỏ gạch, đọc lâu đỡ mỏi mắt */
  --trend-up:        #047857;
  --trend-up-soft:   #0478571a;
  --trend-up-fill:   #04785726;
  --trend-down:      #b42318;
  --trend-down-soft: #b4231814;
  --trend-down-fill: #b4231826;
  --trend-flat:      #76767a;

  /* Quy ước bảng giá chứng khoán Việt Nam */
  --price-ceiling:   #7c3aed;  /* trần — tím */
  --price-floor:     #10b981;  /* sàn */
  --price-ref:       #fbbf24;  /* tham chiếu — vàng */

  /* Màu series biểu đồ — TÁCH RIÊNG khỏi màu giao diện, để chart không
     bị lẫn màu với nút bấm/trạng thái */
  --data-1: #1C3F6E; --data-2: #E9A21C; --data-3: #2C5A96; --data-4: #F26A21;
  --data-5: #059669; --data-6: #6366f1; --data-7: #db2777;

  /* ---------- Bố cục ---------- */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            56px;
  --content-pad:         32px;
  --card-pad:            22px;
  --section-gap:         24px;

  /* ---------- Chữ ---------- */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --text-caption:    11px;
  --text-body-sm:    12px;
  --text-body:       13px;
  --text-body-lg:    14px;
  --text-heading-sm: 15px;
  --text-heading-md: 18px;
  --text-heading-lg: 24px;
  --text-display:    32px;

  /* ---------- Bo góc ---------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;

  /* ---------- Bóng đổ: nhiều lớp, alpha rất thấp ---------- */
  --shadow-flat: 0 0 0 1px var(--border-hairline);
  --shadow-sm: 0 1px 2px #00000008, 0 0 0 1px #0000000d;
  --shadow-md: 0 4px 18px #0000000a, 0 2px 7.85px #00000007, 0 .8px 2.93px #00000005;
  --shadow-lg: 0 8px 28px #0000000f, 0 4px 12px #00000009, 0 1px 4px #00000005;

  /* ---------- Chuyển động ---------- */
  --dur-fast: .12s; --dur-base: .2s; --dur-slow: .32s;
  --ease-standard:   cubic-bezier(.2,.8,.2,1);
  --ease-emphasized: cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}

/* ---------- Nền tối: chỉnh lại tương phản, không đảo màu máy móc ---------- */
:root[data-theme="dark"] {
  --bg-base:    #191919;
  --bg-sidebar: #141414;
  --bg-surface: #252525;
  --bg-subtle:  #2f2f2f;
  --bg-hover:   #ffffff0f;
  --bg-inverse: #ededed;

  --text-primary:    #ededed;
  --text-secondary:  #b4b4b4;
  --text-tertiary:   #7d7d7d;
  --text-quaternary: #5a5a5a;
  --text-inverse:    #0d0d0d;

  --border-hairline: #ffffff12;
  --border-subtle:   #ffffff1f;
  --border-strong:   #ffffff33;

  /* Accent phải SÁNG hơn trên nền tối mới đủ tương phản */
  /* Navy gốc quá tối trên nền đen → dùng bản sáng của chính nó */
  --accent:        var(--navy-300);
  --accent-text:   var(--navy-300);
  --accent-btn-bg: var(--navy-300);
  --accent-btn-fg: #0d0d0d;   /* chữ ĐEN trên accent sáng */
  --accent-hover:  var(--navy-200);
  --accent-soft:   #6BA3E01f;
  --accent-fill:   #6BA3E033;
  --accent-ring:   #6BA3E04d;

  --brand-gold:      var(--gold-400);
  --brand-gold-text: var(--gold-300);
  --brand-gold-soft: #F2B73824;

  --trend-up:        #22c55e;
  --trend-up-soft:   #22c55e1a;
  --trend-down:      #f87171;
  --trend-down-soft: #f871711a;
  --trend-flat:      #8a8a8a;

  --shadow-sm: 0 1px 2px #00000040, 0 0 0 1px #ffffff0d;
  --shadow-md: 0 4px 18px #00000047, 0 2px 8px #0000002e;
  --shadow-lg: 0 8px 28px #00000059, 0 4px 12px #00000038;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base:#191919; --bg-sidebar:#141414; --bg-surface:#252525; --bg-subtle:#2f2f2f;
    --bg-hover:#ffffff0f; --bg-inverse:#ededed;
    --text-primary:#ededed; --text-secondary:#b4b4b4; --text-tertiary:#7d7d7d;
    --text-quaternary:#5a5a5a; --text-inverse:#0d0d0d;
    --border-hairline:#ffffff12; --border-subtle:#ffffff1f; --border-strong:#ffffff33;
    --accent:#6BA3E0; --accent-text:#6BA3E0; --accent-hover:#8FBCEA;
    --accent-btn-bg:#6BA3E0; --accent-btn-fg:#0d0d0d;
    --accent-soft:#6BA3E01f; --accent-fill:#6BA3E033; --accent-ring:#6BA3E04d;
    --brand-gold:#F2B738; --brand-gold-text:#F7CE6B; --brand-gold-soft:#F2B73824;
    --trend-up:#22c55e; --trend-up-soft:#22c55e1a; --trend-down:#f87171;
    --trend-down-soft:#f871711a; --trend-flat:#8a8a8a;
    --shadow-sm:0 1px 2px #00000040,0 0 0 1px #ffffff0d;
    --shadow-md:0 4px 18px #00000047,0 2px 8px #0000002e;
    --shadow-lg:0 8px 28px #00000059,0 4px 12px #00000038;
    color-scheme: dark;
  }
}

/* ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-radius: var(--r-sm);
}

/* ---------- Khung tổng ---------- */
.bp-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------- Sidebar ---------- */
.bp-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-hairline);
  display: flex; flex-direction: column;
  transition: width var(--dur-base) var(--ease-standard),
              flex-basis var(--dur-base) var(--ease-standard);
  overflow: hidden;
}
body.bp-collapsed .bp-sidebar {
  width: var(--sidebar-w-collapsed);
  flex-basis: var(--sidebar-w-collapsed);
}

.bp-brand {
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text-primary);
}
.bp-brand:hover { text-decoration: none; }
/* Logo đã gồm cả chữ "BROS PARTNERS" nên không cần nhãn chữ riêng.
   Thu gọn thì hạ chiều cao để vừa cột 64px mà vẫn nhận ra hình. */
.bp-brand img {
  height: 34px; width: auto; flex: 0 0 auto;
  transition: height var(--dur-base) var(--ease-standard);
}
body.bp-collapsed .bp-brand { padding: 0 6px; }
body.bp-collapsed .bp-brand img { height: 30px; }

.bp-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 8px; }

.bp-group + .bp-group { margin-top: 18px; }
.bp-group-label {
  font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--text-quaternary);
  padding: 0 8px 6px;
  white-space: nowrap; overflow: hidden;
}
body.bp-collapsed .bp-group-label {
  /* Giữ khoảng cách nhóm nhưng ẩn chữ, thay bằng vạch ngăn */
  height: 1px; padding: 0; margin: 0 8px 8px;
  background: var(--border-hairline); color: transparent;
}

.bp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 2px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--text-body);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.bp-item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.bp-item svg { flex: 0 0 18px; width: 18px; height: 18px; }
.bp-item-label { overflow: hidden; text-overflow: ellipsis; }
.bp-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
  /* Vạch vàng bên trái — nhắc lại hành tinh vàng trong logo */
  box-shadow: inset 2px 0 0 var(--brand-gold);
}
.bp-item.is-active svg { color: var(--accent-text); }
body.bp-collapsed .bp-item { justify-content: center; padding: 8px 0; }
body.bp-collapsed .bp-item-label { display: none; }

.bp-sidebar-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-hairline);
  padding: 8px;
  display: flex; align-items: center; gap: 4px;
}
body.bp-collapsed .bp-sidebar-foot { flex-direction: column; }

.bp-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-md);
  color: var(--text-tertiary);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.bp-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.bp-iconbtn svg { width: 17px; height: 17px; }

/* ---------- Vùng chính ---------- */
.bp-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.bp-topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-hairline);
}
.bp-topbar-title {
  font-size: var(--text-heading-sm); font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-topbar-cadence {
  font-size: var(--text-caption); color: var(--text-tertiary);
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--bg-subtle); white-space: nowrap;
}
.bp-spacer { flex: 1 1 auto; }

.bp-ghostbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-body-sm); color: var(--text-tertiary);
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  padding: 6px 11px; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.bp-ghostbtn:hover { color: var(--accent-text); border-color: var(--accent); text-decoration: none; }
.bp-ghostbtn svg { width: 14px; height: 14px; }

.bp-content { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }

/* ---------- Trang chủ ---------- */
.bp-home { padding: var(--content-pad); max-width: 1180px; }
.bp-hero h1 {
  margin: 0 0 6px; font-size: var(--text-heading-lg);
  letter-spacing: -0.02em; color: var(--text-primary);
}
.bp-hero p { margin: 0 0 var(--section-gap); color: var(--text-tertiary); max-width: 640px; font-size: var(--text-body-lg); }

.bp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.bp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--card-pad);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.bp-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.bp-card-icon {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--brand-gold-soft); color: var(--brand-gold-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.bp-card-icon svg { width: 18px; height: 18px; }
.bp-card h2 { margin: 0 0 8px; font-size: var(--text-heading-sm); color: var(--text-primary); }
.bp-card p { margin: 0 0 14px; font-size: var(--text-body); color: var(--text-tertiary); line-height: 1.6; }
.bp-card-cadence {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-caption); color: var(--text-quaternary);
  display: flex; align-items: center; gap: 6px;
}
.bp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--trend-up); flex: 0 0 6px; }

.bp-foot {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-body-sm); color: var(--text-quaternary); max-width: 780px;
}
.bp-foot p { margin: 0 0 5px; }

/* ---------- Trang nhúng ---------- */
.bp-frame-wrap { position: absolute; inset: 0; }
.bp-frame-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }

.bp-note {
  padding: 9px 18px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border-hairline);
  font-size: var(--text-body-sm); color: var(--text-secondary);
  flex: 0 0 auto;
}

.bp-overlay {
  position: absolute; inset: 0; background: var(--bg-base);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
}
.bp-overlay[hidden] { display: none; }
.bp-overlay-logo { height: 44px; width: auto; margin-bottom: 4px; }
.bp-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--border-subtle); border-top-color: var(--accent);
  animation: bp-spin .9s linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }
.bp-msg { color: var(--text-tertiary); max-width: 440px; font-size: var(--text-body); }

.bp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-btn-bg); color: var(--accent-btn-fg);
  padding: 9px 18px; border-radius: var(--r-md);
  font-size: var(--text-body); font-weight: 600; border: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.bp-btn:hover { background: var(--accent-hover); text-decoration: none; color: var(--accent-btn-fg); }

/* ---------- Cổng đăng nhập ---------- */
.bp-auth-gate {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-base);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.bp-auth-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 38px 32px; max-width: 380px; width: 100%; text-align: center;
}
.bp-auth-logo { height: 64px; width: auto; margin-bottom: 18px; }
.bp-auth-card h1 { font-size: var(--text-heading-md); margin: 0 0 8px; color: var(--text-primary); }
.bp-auth-sub { font-size: var(--text-body); color: var(--text-tertiary); margin: 0 0 22px; }
.bp-auth-btn-host { display: flex; justify-content: center; min-height: 44px; }
.bp-auth-msg { font-size: var(--text-body-sm); margin-top: 16px; min-height: 1em; color: var(--text-tertiary); }
.bp-auth-msg-error { color: var(--trend-down); }

.bp-signout { font-size: var(--text-body-sm); color: var(--text-tertiary); white-space: nowrap; }
.bp-signout a { color: var(--text-tertiary); }
.bp-signout a:hover { color: var(--accent-text); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  :root { --content-pad: 18px; --sidebar-w: 200px; }
}

/* Dưới 700px: sidebar co về dạng icon, không chiếm chỗ nội dung */
@media (max-width: 700px) {
  :root { --sidebar-w: var(--sidebar-w-collapsed); --content-pad: 14px; }
  .bp-item-label { display: none; }
  .bp-brand { padding: 0 6px; }
  .bp-brand img { height: 30px; }
  .bp-item { justify-content: center; padding: 8px 0; }
  .bp-group-label {
    height: 1px; padding: 0; margin: 0 8px 8px;
    background: var(--border-hairline); color: transparent;
  }
  .bp-sidebar-foot { flex-direction: column; }
  .bp-topbar { padding: 0 12px; gap: 8px; }
  .bp-topbar-cadence { display: none; }
  .bp-ghostbtn span { display: none; }
  .bp-hero h1 { font-size: var(--text-heading-md); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ============================================================
   Trang chủ — chuyển đổi 2 giao diện (như dark/light mode)
   "Giao diện gốc" = .bp-home (đã có ở trên).
   "Giao diện mới" = .bp-legal-* — concept hero full-bleed + card dịch vụ,
   font Noto Serif + DM Sans, navy/vàng cố định (không theo dark mode
   của site, vì đây là một "brand mode" riêng, luôn sáng như bản gốc tham khảo).
   ============================================================ */

.bp-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.bp-hero-row .bp-hero { flex: 1 1 auto; }

.bp-skin-switch {
  display: inline-flex; flex: 0 0 auto; background: var(--bg-subtle);
  border: 1px solid var(--border-subtle); border-radius: var(--r-pill); padding: 3px;
  gap: 2px;
}
.bp-skin-opt {
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-tertiary);
  padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.bp-skin-opt:hover { color: var(--text-primary); }
.bp-skin-opt.is-active { background: var(--bg-surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }

@media (max-width: 700px) {
  .bp-hero-row { flex-direction: column; }
}

/* ---------- Token cố định của "Giao diện mới" ---------- */
.bp-legal {
  --lg-navy:      #1E3A5F;
  --lg-navy-deep: #142943;
  --lg-gold:      #D4AF37;
  --lg-gold-deep: #B4922A;
  --lg-bg:        #F7F8FA;
  --lg-surface:   #FFFFFF;
  --lg-text-body: #475569;
  --lg-border:    #E5E7EB;

  font-family: "DM Sans", "Open Sans", sans-serif;
  background: var(--lg-bg);
  color: var(--lg-text-body);
  min-height: 100vh;
}
.bp-legal h1, .bp-legal h2, .bp-legal h3 {
  font-family: "Noto Serif", Georgia, serif;
  color: var(--lg-navy);
  margin: 0;
}

/* Nav trên cùng — KHÔNG có sidebar, khác hẳn giao diện gốc */
.bp-legal-nav {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; background: var(--lg-surface); border-bottom: 1px solid var(--lg-border);
  position: sticky; top: 0; z-index: 10;
}
.bp-legal-brand { display: flex; align-items: center; gap: 10px; }
.bp-legal-brand img { height: 34px; width: auto; }
.bp-legal-wordmark { font-family: "Noto Serif", serif; font-weight: 700; color: var(--lg-navy); font-size: 15px; letter-spacing: .01em; }
.bp-legal-nav-right { display: flex; align-items: center; gap: 18px; }
.bp-legal-navlink { font-size: 13px; font-weight: 500; color: var(--lg-text-body); }
.bp-legal-navlink:hover { color: var(--lg-navy); }

/* Hero */
.bp-legal-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--lg-navy) 0%, var(--lg-navy-deep) 100%);
  padding: 76px 28px 64px; text-align: center;
}
.bp-legal-hero-deco { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.bp-legal-hero-deco svg { width: 100%; height: 100%; }
.bp-legal-hero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.bp-legal-kicker {
  display: inline-block; font-family: "DM Sans", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lg-gold); margin-bottom: 18px;
}
.bp-legal-hero h1 { color: #fff; font-size: 40px; line-height: 1.2; margin-bottom: 18px; }
.bp-legal-lede { font-size: 16px; color: #cfd8e6; line-height: 1.7; margin: 0 auto 30px; max-width: 560px; }
.bp-legal-hero .bp-legal-lede { color: #cfd8e6; }

.bp-legal-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.bp-legal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700;
  padding: 13px 26px; border-radius: 4px; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.bp-legal-btn:hover { text-decoration: none; transform: translateY(-1px); }
.bp-legal-btn-primary { background: var(--lg-gold); color: var(--lg-navy-deep); }
.bp-legal-btn-primary:hover { background: var(--lg-gold-deep); color: var(--lg-navy-deep); }
.bp-legal-btn-ghost { background: transparent; color: #fff; border: 1.5px solid #ffffff55; }
.bp-legal-btn-ghost:hover { background: #ffffff14; color: #fff; }

.bp-legal-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.bp-legal-stat-num { font-family: "Noto Serif", serif; font-size: 28px; font-weight: 700; color: var(--lg-gold); }
.bp-legal-stat-label { font-size: 12px; color: #b9c4d6; margin-top: 2px; }

/* Lưới thẻ dạng dịch vụ */
.bp-legal-section { padding: 64px 28px; max-width: 1080px; margin: 0 auto; }
.bp-legal-section-head { text-align: center; max-width: 560px; margin: 0 auto 42px; }
.bp-legal-section-head h2 { font-size: 30px; margin: 10px 0 14px; }
.bp-legal-section-head h2::after {
  content: ""; display: block; width: 46px; height: 3px; background: var(--lg-gold);
  margin: 14px auto 0; border-radius: 2px;
}
.bp-legal-section-head .bp-legal-lede { color: var(--lg-text-body); margin-bottom: 0; }

.bp-legal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.bp-legal-card {
  background: var(--lg-surface); border: 1px solid var(--lg-border); border-radius: 6px;
  padding: 30px 28px; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.bp-legal-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.bp-legal-card-icon {
  width: 52px; height: 52px; border-radius: 8px; background: #D4AF3720; color: var(--lg-navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.bp-legal-card-icon svg { width: 24px; height: 24px; }
.bp-legal-card h3 { font-size: 19px; margin-bottom: 10px; }
.bp-legal-card p { font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.bp-legal-more { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; color: var(--lg-gold-deep); }
.bp-legal-more:hover { color: var(--lg-navy); text-decoration: none; }

.bp-legal-footer {
  max-width: 1080px; margin: 0 auto; padding: 0 28px 48px;
  font-family: "DM Sans", sans-serif; font-size: 13px; color: #6b7280;
}
.bp-legal-footer p { margin: 0 0 8px; }
.bp-legal-footer a { color: var(--lg-navy); }

@media (max-width: 760px) {
  .bp-legal-nav { padding: 0 14px; }
  .bp-legal-nav-right { gap: 8px; }
  .bp-legal-navlink { display: none; }
  .bp-legal-nav-right .bp-skin-opt { font-size: 10.5px; padding: 5px 8px; }
  .bp-legal-hero { padding: 52px 18px 44px; }
  .bp-legal-hero h1 { font-size: 28px; }
  .bp-legal-section { padding: 44px 18px; }
  .bp-legal-grid { grid-template-columns: 1fr; }
  .bp-legal-stats { gap: 28px; }
}

/* ============================================================
   Màn hình chờ khi trang đang tải — hiện logo + spinner ngay từ
   HTML tĩnh (không phụ thuộc JS đã chạy xong hay chưa), portal.js
   tự gỡ khi nội dung thật đã dựng xong (xem BP_RENDER).
   ============================================================ */
#bpBootSplash {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: var(--bg-base, #FAFAF9);
  transition: opacity .25s ease;
}
#bpBootSplash img { height: 64px; width: auto; }
#bpBootSplash .bpBootSpin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border-subtle, #0000001a);
  border-top-color: var(--accent, #17365D);
  animation: bpBootSpin .9s linear infinite;
}
#bpBootSplash.bp-boot-gone { opacity: 0; pointer-events: none; }
@keyframes bpBootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #bpBootSplash .bpBootSpin { animation: none; }
}