/* =====================================================================
   drhouse-branches.css — HỆ THỐNG CHI NHÁNH DRHOUSES (trang /chi-nhanh + /chi-nhanh/dang-ky)
   Tiền tố class: .dh-br-*  (trang) · .dh-sign-* (biển hiệu chi nhánh) · .dh-pin-* (ghim SVG)
   Chỉ nạp ở 2 trang này (xem _head.tpl). Mobile-first (Quy tắc 7).
   Tông màu theo poster khách: nền đen, đỏ #e0182d, vàng kim #f5c451.
   ===================================================================== */

.dh-br {
  --br-red:   #e0182d;
  --br-red2:  #ff3b4e;
  --br-gold:  #f5c451;
  --br-gold2: #ffe08a;
  --br-bg:    #0a0a0d;
  --br-card:  #141418;
  --br-line:  rgba(224, 24, 45, .35);
  --br-text:  #ffffff;
  --br-muted: #b9b3b5;
  color: var(--br-text);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(224, 24, 45, .22), transparent 60%),
    radial-gradient(700px 400px at 90% 30%, rgba(245, 196, 81, .10), transparent 60%),
    var(--br-bg);
  margin: -10px 0 0;
  padding-bottom: 30px;
  overflow: hidden;
  border-radius: 18px;
  font-family: inherit;
}
.dh-br *, .dh-br *::before, .dh-br *::after { box-sizing: border-box; }
.dh-br a { color: inherit; text-decoration: none; }
.dh-br img { max-width: 100%; }
.dh-br button { font-family: inherit; }
.dh-br-inner { max-width: 1140px; margin: 0 auto; padding: 0 14px; }

/* ══════════════ HERO ══════════════ */
.dh-br-hero { position: relative; padding: 26px 0 18px; text-align: center; }
.dh-br-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(60% 80% at 50% 40%, #000 30%, transparent 100%);
}
.dh-br-hero-inner { position: relative; }
.dh-br-brand { display: inline-flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 14px; }
.dh-br-brand-mark { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(224,24,45,.8)); }
.dh-br-brand-name { font-size: 26px; font-weight: 900; letter-spacing: .5px; line-height: 1; color: var(--br-red2); }
.dh-br-brand-name span { color: #fff; }
.dh-br-brand-slogan { font-size: 9.5px; letter-spacing: 1.2px; color: var(--br-muted); margin-top: 4px; }

.dh-br-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: var(--br-gold);
  margin: 0 0 10px;
}
.dh-br-kicker i { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--br-gold)); }
.dh-br-kicker i:last-child { transform: scaleX(-1); }

.dh-br-title {
  font-size: clamp(22px, 5.6vw, 44px); font-weight: 900; line-height: 1.12; margin: 0 0 12px;
  letter-spacing: .3px; text-shadow: 0 2px 30px rgba(224,24,45,.35);
}
.dh-br-title em { font-style: normal; color: var(--br-red2); text-shadow: 0 0 22px rgba(255,59,78,.75); }
.dh-br-title em.gold {
  color: var(--br-gold);
  background: linear-gradient(180deg, #fff2c2, var(--br-gold) 55%, #c98d10);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
}
.dh-br-title-sm { font-size: clamp(20px, 4.6vw, 32px); }
.dh-br-lead { max-width: 640px; margin: 0 auto 18px; color: var(--br-muted); font-size: 13.5px; line-height: 1.65; }

/* số liệu */
.dh-br-stats { display: flex; justify-content: center; gap: 10px; margin: 0 0 18px; }
.dh-br-stat {
  flex: 1 1 0; max-width: 200px; padding: 12px 6px 10px; border-radius: 14px; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px);
}
.dh-br-stat.is-main { border-color: rgba(224,24,45,.6); box-shadow: 0 0 28px rgba(224,24,45,.25), inset 0 0 24px rgba(224,24,45,.08); }
.dh-br-stat b { display: block; font-size: 30px; font-weight: 900; line-height: 1; color: var(--br-gold); font-variant-numeric: tabular-nums; }
.dh-br-stat.is-main b { color: #fff; font-size: 36px; text-shadow: 0 0 18px rgba(255,59,78,.9); }
.dh-br-stat span { display: block; font-size: 9.5px; letter-spacing: 1.6px; font-weight: 700; color: var(--br-muted); margin-top: 6px; }

/* nút */
.dh-br-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dh-br-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .3px; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s; line-height: 1.1; text-align: left;
}
.dh-br-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dh-br-btn:active { transform: scale(.97); }
.dh-br-btn-red { background: linear-gradient(135deg, var(--br-red2), #b30f21); color: #fff; box-shadow: 0 8px 26px rgba(224,24,45,.45); }
.dh-br-btn-red:hover { box-shadow: 0 10px 32px rgba(224,24,45,.65); color: #fff; }
.dh-br-btn-ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); color: #fff; }
.dh-br-btn-ghost:hover { background: rgba(255,255,255,.09); color: #fff; }
.dh-br-btn-danger { border-color: rgba(224,24,45,.5); color: var(--br-red2); }
.dh-br-btn-pulse { animation: brBtnPulse 2.2s ease-out infinite; }
@keyframes brBtnPulse {
  0%   { box-shadow: 0 8px 26px rgba(224,24,45,.45), 0 0 0 0 rgba(255,59,78,.6); }
  70%  { box-shadow: 0 8px 26px rgba(224,24,45,.45), 0 0 0 16px rgba(255,59,78,0); }
  100% { box-shadow: 0 8px 26px rgba(224,24,45,.45), 0 0 0 0 rgba(255,59,78,0); }
}

/* ══════════════ BẢN ĐỒ ══════════════ */
.dh-br-mapwrap { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
.dh-br-map {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 320px;
  background:
    radial-gradient(60% 55% at 45% 45%, rgba(224,24,45,.16), transparent 70%),
    linear-gradient(180deg, #101014, #0a0a0d);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(224,24,45,.12);
}
.dh-br-map::before {                       /* lưới nền mờ */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px);
}
.dh-br-map::after {                        /* vòng radar quét */
  content: ""; position: absolute; left: 50%; top: 50%; width: 140%; padding-top: 140%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(255,59,78,.16) 96%, rgba(255,255,255,.35) 100%);
  border-radius: 50%; pointer-events: none; opacity: .55; mix-blend-mode: screen;
  animation: brRadar 9s linear infinite;
}
@keyframes brRadar { to { transform: translate(-50%, -50%) rotate(360deg); } }

.dh-br-map svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 78vh; margin: 0 auto; }
.dh-br-map-legend {
  position: absolute; z-index: 2; right: 12px; top: 12px;   /* góc trên-phải = vùng biển trống */ display: flex; flex-direction: column; gap: 6px;
  font-size: 10.5px; color: var(--br-muted); font-weight: 600;
}
.dh-br-map-legend span { display: flex; align-items: center; gap: 6px; }
.dh-br-map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dh-br-map-legend .lg-on  { background: var(--br-red2); box-shadow: 0 0 8px var(--br-red2); }
.dh-br-map-legend .lg-off { background: #5a4a4d; }
.dh-br-map-legend .lg-hq  { background: var(--br-gold); box-shadow: 0 0 8px var(--br-gold); }
.dh-br-map-hint {
  position: absolute; z-index: 2; right: 12px; bottom: 10px; font-size: 10.5px; color: var(--br-muted);
  background: rgba(0,0,0,.4); padding: 4px 9px; border-radius: 999px;
}

/* tooltip */
.dh-br-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 14px));
  background: #17171c; border: 1px solid rgba(224,24,45,.55); border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 18px rgba(224,24,45,.25); white-space: nowrap; font-size: 12px;
}
.dh-br-tip b { display: block; font-size: 13px; color: #fff; }
.dh-br-tip small { color: var(--br-gold); font-weight: 700; }
.dh-br-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: #17171c; border-right: 1px solid rgba(224,24,45,.55); border-bottom: 1px solid rgba(224,24,45,.55);
}

/* ── SVG: chấm, viền, đường nối ── */
.dh-map-outline { fill: none; stroke: rgba(255,255,255,.14); stroke-width: .6; }
.dh-map-dots   { fill: none; stroke: #c9142a; stroke-width: 4.1; stroke-linecap: round; opacity: .85; }
.dh-map-dots-glow { fill: none; stroke: rgba(255,59,78,.55); stroke-width: 7; stroke-linecap: round; filter: url(#dhBlur); }
.dh-map-dots-scan { fill: none; stroke: #ffb3bb; stroke-width: 4.1; stroke-linecap: round; }
.dh-map-scanrect  { animation: brScan 5.5s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes brScan { 0% { transform: translateY(-80px); } 100% { transform: translateY(720px); } }
.dh-map-islands { fill: none; stroke: var(--br-gold); stroke-width: 3.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(245,196,81,.9)); }
.dh-map-isl-label { font-size: 10px; font-weight: 700; fill: var(--br-gold2); letter-spacing: .4px; }

.dh-map-link {
  fill: none; stroke: rgba(255,150,160,.55); stroke-width: 1.1; stroke-dasharray: 3 5; stroke-linecap: round;
  animation: brDash 1.4s linear infinite;
}
@keyframes brDash { to { stroke-dashoffset: -16; } }
.dh-map-packet { fill: #fff; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px var(--br-red2)); }

/* ── ghim tỉnh ── */
.dh-pin { cursor: pointer; }
.dh-pin .dh-pin-ring { fill: none; stroke: var(--br-red2); stroke-width: 1.4; opacity: 0; transform-origin: center; transform-box: fill-box; }
.dh-pin.has .dh-pin-ring { animation: brRing 2.4s ease-out infinite; }
.dh-pin.has .dh-pin-ring:nth-child(2) { animation-delay: .8s; }
.dh-pin.has .dh-pin-ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes brRing {
  0%   { transform: scale(.3); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.dh-pin .dh-pin-core { fill: var(--br-red2); stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 0 5px var(--br-red2)); }
.dh-pin.has .dh-pin-core { animation: brCore 1.2s ease-in-out infinite alternate; }
@keyframes brCore { from { filter: drop-shadow(0 0 3px var(--br-red2)); } to { filter: drop-shadow(0 0 10px #fff); } }
.dh-pin .dh-pin-house { fill: #fff; pointer-events: none; }
.dh-pin.idle .dh-pin-core { fill: #4a3a3d; stroke: rgba(255,255,255,.35); stroke-width: 1; filter: none; }
.dh-pin.idle:hover .dh-pin-core { fill: #7a2a33; }
.dh-pin .dh-pin-badge { fill: var(--br-gold); stroke: #2a1a00; stroke-width: 1; }
.dh-pin .dh-pin-badge-t { fill: #1a1000; font-size: 8.5px; font-weight: 900; text-anchor: middle; pointer-events: none; }
.dh-pin .dh-pin-label { fill: #fff; font-size: 9px; font-weight: 700; paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: 2.5px; pointer-events: none; }
.dh-pin:hover .dh-pin-core { stroke: var(--br-gold); }
.dh-pin.is-open .dh-pin-core { fill: var(--br-gold); stroke: #fff; }
.dh-pin.hq .dh-pin-core { fill: var(--br-gold); stroke: #fff; filter: drop-shadow(0 0 8px var(--br-gold)); animation: brHq 1.4s ease-in-out infinite alternate; }
.dh-pin.hq .dh-pin-ring { stroke: var(--br-gold); }
.dh-pin.hq .dh-pin-house { fill: #3a2600; }
@keyframes brHq { from { filter: drop-shadow(0 0 4px var(--br-gold)); } to { filter: drop-shadow(0 0 14px #fff); } }
.dh-pin.hq .dh-pin-hqlabel { fill: var(--br-gold2); font-size: 8px; font-weight: 900; letter-spacing: .8px; paint-order: stroke; stroke: rgba(0,0,0,.9); stroke-width: 2.5px; pointer-events: none; }

@media (max-width: 640px) {
  .dh-pin .dh-pin-label { display: none; }     /* màn nhỏ: bỏ nhãn tỉnh, giữ ghim + badge */
}

/* ── cột phải: trụ sở + điểm kết nối mới ── */
.dh-br-side { display: grid; gap: 14px; grid-template-columns: 1fr; }
.dh-br-hq {
  border-radius: 18px; padding: 16px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(245,196,81,.12), rgba(224,24,45,.10) 60%, rgba(255,255,255,.02));
  border: 1px solid rgba(245,196,81,.4); box-shadow: 0 0 30px rgba(245,196,81,.12);
}
.dh-br-hq::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,196,81,.35), transparent 70%);
}
.dh-br-hq-head { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 2px; font-weight: 800; color: var(--br-gold); }
.dh-br-hq-head svg { width: 16px; height: 16px; }
.dh-br-hq-name { font-size: 17px; font-weight: 900; margin: 6px 0 8px; }
.dh-br-hq-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #eae2e3; padding: 3px 0; }
.dh-br-hq-row svg { width: 16px; height: 16px; color: var(--br-red2); flex: 0 0 auto; }
.dh-br-hq-row b { color: var(--br-gold2); }

.dh-br-latest { border-radius: 18px; background: var(--br-card); border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.dh-br-latest-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.dh-br-latest-head small { color: var(--br-muted); font-size: 11px; }
.dh-br-live { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: #fff; }
.dh-br-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--br-red2); box-shadow: 0 0 0 0 rgba(255,59,78,.7); animation: brLive 1.5s infinite; }
@keyframes brLive { 70% { box-shadow: 0 0 0 8px rgba(255,59,78,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,78,0); } }
.dh-br-ticker { max-height: 300px; overflow: hidden; position: relative; }
.dh-br-ticker ul { list-style: none; margin: 0; padding: 0; animation: brTicker var(--tk-dur, 24s) linear infinite; }
.dh-br-ticker:hover ul { animation-play-state: paused; }
@keyframes brTicker { to { transform: translateY(-50%); } }
.dh-br-ticker li a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
.dh-br-ticker li a:hover { background: rgba(224,24,45,.08); }
.dh-br-tk-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--br-red); flex: 0 0 auto; }
.dh-br-tk-body { min-width: 0; flex: 1; }
.dh-br-tk-body b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-br-tk-body small { display: block; font-size: 11px; color: var(--br-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-br-tk-prov { font-size: 10px; font-weight: 800; color: var(--br-gold); background: rgba(245,196,81,.12); border: 1px solid rgba(245,196,81,.35); padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.dh-br-empty-mini { padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--br-muted); line-height: 1.6; }

/* ══════════════ DẢI DỊCH VỤ ══════════════ */
.dh-br-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px;
}
.dh-br-services a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 6px 12px;
  border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.07); transition: transform .15s, border-color .15s;
}
.dh-br-services a:hover { transform: translateY(-2px); border-color: rgba(224,24,45,.5); }
.dh-br-services svg { width: 30px; height: 30px; color: var(--br-red2); filter: drop-shadow(0 0 6px rgba(255,59,78,.6)); }
.dh-br-services b { font-size: 10px; letter-spacing: .6px; line-height: 1.35; font-weight: 800; }

/* ══════════════ LƯỚI 34 TỈNH ══════════════ */
.dh-br-provwrap { margin-top: 26px; scroll-margin-top: 70px; }
.dh-br-band {
  text-align: center; font-weight: 900; font-size: clamp(12px, 3.2vw, 17px); letter-spacing: .8px; padding: 12px 14px;
  background: linear-gradient(90deg, transparent, rgba(224,24,45,.9) 15%, rgba(224,24,45,.9) 85%, transparent);
  border-radius: 10px; margin-bottom: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.dh-br-band em { font-style: normal; color: var(--br-gold2); font-size: 1.25em; }

.dh-br-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dh-br-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dh-br-tabs button {
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #ddd; transition: all .15s;
}
.dh-br-tabs button.active, .dh-br-tabs button:hover { background: var(--br-red); border-color: var(--br-red2); color: #fff; box-shadow: 0 0 14px rgba(224,24,45,.5); }
.dh-br-search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; max-width: 320px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.dh-br-search svg { width: 16px; height: 16px; color: var(--br-muted); }
.dh-br-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-size: 13px; }
.dh-br-search input::placeholder { color: #8b8386; }

/* 1 HÀNG cuộn ngang (khách chốt): flex + scroll-snap, kéo chuột được (JS), mũi tên trên desktop */
.dh-br-rail { position: relative; }
.dh-br-grid {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(224,24,45,.6) rgba(255,255,255,.05); cursor: grab;
}
.dh-br-grid.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.dh-br-grid::-webkit-scrollbar { height: 6px; }
.dh-br-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 999px; }
.dh-br-grid::-webkit-scrollbar-thumb { background: rgba(224,24,45,.6); border-radius: 999px; }
.dh-br-arrow {
  position: absolute; top: 42%; z-index: 3; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,13,.85); color: #fff; display: none;
  align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: background .15s, opacity .15s;
}
.dh-br-arrow svg { width: 20px; height: 20px; }
.dh-br-arrow:hover { background: var(--br-red); }
.dh-br-arrow.prev { left: -14px; }
.dh-br-arrow.next { right: -14px; }
.dh-br-arrow[disabled] { opacity: .25; cursor: default; }
.dh-br-rail-hint { text-align: center; font-size: 11px; color: var(--br-muted); margin-top: 2px; }
.dh-br-prov {
  flex: 0 0 150px; scroll-snap-align: start;
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  border-radius: 14px; background: var(--br-card); border: 1px solid rgba(255,255,255,.08); color: #fff; cursor: pointer;
  text-align: center; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.dh-br-prov:hover { transform: translateY(-3px); border-color: rgba(224,24,45,.6); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 22px rgba(224,24,45,.25); }
.dh-br-prov.is-open { border-color: var(--br-gold); box-shadow: 0 0 0 2px rgba(245,196,81,.5), 0 14px 30px rgba(0,0,0,.5); }
.dh-br-prov.hidden { display: none; }
.dh-br-prov.has { border-color: rgba(224,24,45,.45); }

/* mặt tiền thu nhỏ (giống ảnh poster: bảng hiệu đen viền đỏ + cửa kính) */
.dh-br-prov-store {
  display: block; position: relative; padding: 10px 10px 0;
  background: linear-gradient(180deg, #1c1c22, #0d0d10 70%);
}
.dh-br-prov-lights { display: flex; justify-content: space-around; padding: 0 12px 4px; }
.dh-br-prov-lights i { width: 5px; height: 5px; border-radius: 50%; background: #fff2c2; box-shadow: 0 0 6px 2px rgba(255,236,170,.65); opacity: .55; }
.dh-br-prov.has .dh-br-prov-lights i { animation: brLight 2.6s ease-in-out infinite; }
.dh-br-prov.has .dh-br-prov-lights i:nth-child(2) { animation-delay: .3s; }
.dh-br-prov.has .dh-br-prov-lights i:nth-child(3) { animation-delay: .6s; }
.dh-br-prov.has .dh-br-prov-lights i:nth-child(4) { animation-delay: .9s; }
.dh-br-prov.has .dh-br-prov-lights i:nth-child(5) { animation-delay: 1.2s; }
@keyframes brLight { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.dh-br-prov-board {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px; border-radius: 6px;
  background: #0b0b0e; border: 2px solid var(--br-red); box-shadow: 0 0 14px rgba(224,24,45,.35), inset 0 0 12px rgba(224,24,45,.15);
}
.dh-br-prov.idle .dh-br-prov-board, .dh-br-prov:not(.has) .dh-br-prov-board { border-color: #5a2a30; box-shadow: none; opacity: .75; }
.dh-br-prov-board img { width: 18px; height: 18px; object-fit: contain; }
.dh-br-prov-board span { font-size: 12px; font-weight: 900; letter-spacing: .4px; color: var(--br-red2); }
.dh-br-prov-board span b { color: #fff; }
.dh-br-prov-door { display: flex; justify-content: center; gap: 3px; margin-top: 8px; height: 26px; padding: 0 22%; }
.dh-br-prov-door i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(255,220,180,.32), rgba(255,200,150,.08)); border: 1px solid rgba(255,255,255,.14); border-bottom: 0; }
.dh-br-prov-name { display: block; padding: 8px 6px 2px; font-size: 13px; font-weight: 900; background: linear-gradient(180deg, rgba(224,24,45,.95), #a80f1f); letter-spacing: .3px; }
.dh-br-prov-count { display: block; padding: 3px 6px 8px; font-size: 10.5px; color: #ffd0d5; background: #a80f1f; }
.dh-br-prov:not(.has) .dh-br-prov-name { background: linear-gradient(180deg, #2a2a30, #1c1c21); }
.dh-br-prov:not(.has) .dh-br-prov-count { background: #1c1c21; color: var(--br-muted); }
.dh-br-prov-count b { color: var(--br-gold2); font-size: 12px; }
.dh-br-prov-badge {
  position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--br-gold); color: #1a1000; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(245,196,81,.7);
}
.dh-br-prov.hq .dh-br-prov-badge { background: #fff; }
.dh-br-prov.hq::before {
  content: "TRỤ SỞ"; position: absolute; top: 6px; left: 6px; z-index: 1; font-size: 8px; font-weight: 900; letter-spacing: 1px;
  color: #1a1000; background: var(--br-gold); padding: 3px 6px; border-radius: 4px;
}
.dh-br-grid-empty { flex: 1 0 100%; text-align: center; padding: 26px; color: var(--br-muted); font-size: 13px; }

/* ══════════════ DANH SÁCH CHI NHÁNH ══════════════ */
.dh-br-listwrap { margin-top: 26px; scroll-margin-top: 64px; }
.dh-br-list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(224,24,45,.35); }
.dh-br-list-kicker { font-size: 10.5px; letter-spacing: 2px; font-weight: 800; color: var(--br-gold); }
.dh-br-list-title { margin: 2px 0 0; font-size: clamp(20px, 5vw, 30px); font-weight: 900; color: #fff; }
.dh-br-list-right { display: flex; align-items: center; gap: 10px; }
.dh-br-list-count { font-size: 12px; color: var(--br-muted); white-space: nowrap; }
.dh-br-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; font-size: 14px; }
.dh-br-close:hover { background: var(--br-red); }
.dh-br-list-foot { text-align: center; margin-top: 14px; }

.dh-br-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dh-br-cards-empty {
  grid-column: 1 / -1; text-align: center; padding: 30px 16px; border-radius: 16px; border: 1px dashed rgba(224,24,45,.45);
  background: rgba(224,24,45,.05); color: var(--br-muted); font-size: 13.5px; line-height: 1.7;
}
.dh-br-cards-empty b { color: #fff; display: block; font-size: 16px; margin-bottom: 4px; }
.dh-br-cards-empty .dh-br-btn { margin-top: 12px; }
.dh-br-loading { grid-column: 1 / -1; text-align: center; padding: 30px; color: var(--br-muted); }
.dh-br-loading i { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--br-red2); animation: brSpin .8s linear infinite; }
@keyframes brSpin { to { transform: rotate(360deg); } }

/* ── BIỂN HIỆU CHI NHÁNH (mọi user giống nhau, chỉ khác địa chỉ) ── */
.dh-sign {
  position: relative; border-radius: 16px; overflow: hidden; background: #0c0c10;
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 40px rgba(0,0,0,.55);
  transition: transform .18s, box-shadow .18s; animation: brSignIn .45s ease both;
}
@keyframes brSignIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dh-sign:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,.65), 0 0 30px rgba(224,24,45,.25); }
.dh-sign.is-me { box-shadow: 0 0 0 2px var(--br-gold), 0 16px 40px rgba(0,0,0,.55); }
.dh-sign-me-tag { position: absolute; z-index: 3; top: 10px; left: 10px; font-size: 9.5px; font-weight: 900; letter-spacing: 1px; color: #1a1000; background: var(--br-gold); padding: 3px 8px; border-radius: 4px; }
.dh-sign-board {
  position: relative; margin: 8px 8px 0; padding: 12px 12px 10px; border-radius: 8px;
  background: linear-gradient(180deg, #17171c, #0b0b0e); border: 3px solid var(--br-red);
  box-shadow: 0 0 22px rgba(224,24,45,.35), inset 0 0 26px rgba(224,24,45,.12);
}
.dh-sign-lights { position: absolute; left: 14px; right: 14px; top: -3px; display: flex; justify-content: space-between; }
.dh-sign-lights i { width: 7px; height: 7px; border-radius: 50%; background: #fff5d6; box-shadow: 0 0 8px 3px rgba(255,236,170,.7); animation: brLight 2.4s ease-in-out infinite; }
.dh-sign-lights i:nth-child(2n) { animation-delay: .5s; }
.dh-sign-lights i:nth-child(3n) { animation-delay: 1s; }
.dh-sign-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.dh-sign-brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,59,78,.8)); }
.dh-sign-brand b { font-size: 26px; font-weight: 900; letter-spacing: .5px; color: var(--br-red2); line-height: 1; text-shadow: 0 0 12px rgba(255,59,78,.5); }
.dh-sign-brand b span { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.35); }
.dh-sign-sub { text-align: center; font-size: 9px; letter-spacing: 1.6px; font-weight: 800; color: #fff; margin-top: 4px; opacity: .9; }
.dh-sign-name { text-align: center; font-size: 15px; font-weight: 900; margin-top: 9px; text-transform: uppercase; letter-spacing: .3px; line-height: 1.25; }
.dh-sign-slogan { text-align: center; font-size: 10.5px; color: var(--br-red2); font-weight: 700; margin-top: 3px; }
.dh-sign-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 10px; padding: 6px 8px;
  border: 1px solid rgba(224,24,45,.6); border-radius: 6px; font-size: 10.5px; color: #eee;
}
.dh-sign-strip span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.dh-sign-strip svg { width: 12px; height: 12px; color: var(--br-red2); flex: 0 0 auto; }
.dh-sign-strip b { color: #fff; }
.dh-sign-strip a { color: var(--br-gold2); }
.dh-sign-front { display: grid; grid-template-columns: 54px 1fr 54px; gap: 6px; padding: 8px; }
.dh-sign-pillar {
  border-radius: 6px; background: linear-gradient(180deg, #16161a, #0a0a0c); border: 2px solid var(--br-red);
  display: flex; align-items: center; justify-content: center; padding: 6px 2px; text-align: center;
  font-size: 8px; font-weight: 900; letter-spacing: 1px; color: #fff; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  box-shadow: inset 0 0 12px rgba(224,24,45,.15);
}
.dh-sign-pillar span { color: var(--br-red2); }
.dh-sign-glass {
  position: relative; border-radius: 6px; padding: 12px 10px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,214,170,.14), rgba(255,190,130,.05) 60%, rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
}
.dh-sign-glass::before {           /* ánh sáng cửa kính */
  content: ""; position: absolute; left: -40%; top: -50%; width: 60%; height: 200%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: brGlass 6s ease-in-out infinite;
}
@keyframes brGlass { 0%, 100% { left: -40%; } 50% { left: 90%; } }
.dh-sign-ava { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--br-red); box-shadow: 0 0 16px rgba(224,24,45,.5); display: block; margin: 0 auto 8px; background: #222; }
.dh-sign-owner { font-size: 14px; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; gap: 5px; }
.dh-sign-owner svg { width: 15px; height: 15px; color: #1da1f2; }
.dh-sign-role { font-size: 10.5px; color: var(--br-gold); letter-spacing: 1.2px; font-weight: 800; margin-top: 2px; }
.dh-sign-addr { font-size: 12px; color: #eee; margin-top: 8px; line-height: 1.5; }
.dh-sign-addr b { color: var(--br-gold2); }
.dh-sign-actions { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dh-sign-actions a {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; transition: background .15s;
}
.dh-sign-actions a:hover { background: var(--br-red); border-color: var(--br-red2); }
.dh-sign-actions a.call { background: var(--br-red); border-color: var(--br-red2); }
.dh-sign-actions a.map { border-color: rgba(245,196,81,.55); color: var(--br-gold2); }
.dh-sign-actions a.map:hover { background: rgba(245,196,81,.18); border-color: var(--br-gold); color: #fff; }
.dh-sign-maplink { color: inherit; text-decoration: underline dotted rgba(255,255,255,.45); text-underline-offset: 3px; }
.dh-sign-maplink:hover { color: var(--br-gold2); }
.dh-sign-actions svg { width: 13px; height: 13px; }
.dh-sign-date { margin-top: 10px; text-align: right; font-size: 9.5px; color: #7d7377; }

/* ══════════════ CHÂN TRANG ══════════════ */
.dh-br-foot { margin-top: 30px; text-align: center; }
.dh-br-foot-band { font-weight: 900; font-size: clamp(13px, 3.4vw, 18px); letter-spacing: 1px; }
.dh-br-foot-band em { font-style: normal; color: var(--br-gold); font-size: 1.3em; }
.dh-br-foot-slogan { color: var(--br-red2); font-weight: 900; letter-spacing: 1px; font-size: clamp(12px, 3vw, 16px); margin: 6px 0 14px; }
.dh-br-foot-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dh-br-foot-row span { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-width: 140px; text-align: left; }
.dh-br-foot-row small { font-size: 10px; letter-spacing: 1.2px; color: var(--br-muted); }
.dh-br-foot-row b { font-size: 13px; }

/* ══════════════ TRANG ĐĂNG KÝ ══════════════ */
.dh-br-reg { padding-top: 16px; }
.dh-br-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--br-muted); margin-bottom: 14px; }
.dh-br-back svg { width: 16px; height: 16px; }
.dh-br-back:hover { color: #fff; }
.dh-br-reg .dh-br-kicker, .dh-br-reg .dh-br-title, .dh-br-reg .dh-br-lead { text-align: left; margin-left: 0; }
.dh-br-reg-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 8px; }
.dh-br-form { border-radius: 18px; padding: 18px 16px; background: var(--br-card); border: 1px solid rgba(255,255,255,.08); }
.dh-br-field { margin-bottom: 14px; }
.dh-br-field label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .4px; color: #eee; margin-bottom: 6px; }
.dh-br-field label em { color: var(--br-red2); font-style: normal; }
.dh-br-field label .opt { color: var(--br-muted); font-weight: 600; }
.dh-br-field input, .dh-br-field select {
  width: 100%; padding: 11px 12px; border-radius: 10px; font-size: 14px; color: #fff; outline: 0;
  background: #0d0d11; border: 1px solid rgba(255,255,255,.14); transition: border-color .15s, box-shadow .15s;
}
.dh-br-field input:focus, .dh-br-field select:focus { border-color: var(--br-red2); box-shadow: 0 0 0 3px rgba(224,24,45,.2); }
.dh-br-field select option, .dh-br-field select optgroup { background: #15151a; color: #fff; }
.dh-br-field small { display: block; margin-top: 5px; font-size: 11px; color: var(--br-muted); }
.dh-br-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; margin: 4px 0 14px; }
.dh-br-switch input { position: absolute; opacity: 0; pointer-events: none; }
.dh-br-switch-ui { width: 42px; height: 24px; border-radius: 999px; background: #333; position: relative; transition: background .2s; flex: 0 0 auto; }
.dh-br-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.dh-br-switch input:checked + .dh-br-switch-ui { background: var(--br-red); }
.dh-br-switch input:checked + .dh-br-switch-ui::after { transform: translateX(18px); }
.dh-br-form-msg { padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; }
.dh-br-form-msg.err { background: rgba(224,24,45,.14); border: 1px solid rgba(224,24,45,.5); color: #ffb3bb; }
.dh-br-form-msg.ok  { background: rgba(60,180,90,.14); border: 1px solid rgba(60,180,90,.5); color: #b7f0c5; }
.dh-br-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dh-br-btn[disabled] { opacity: .6; cursor: default; }
.dh-br-preview-label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 2px; font-weight: 800; color: var(--br-gold); margin-bottom: 10px; }
.dh-br-preview-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--br-gold); box-shadow: 0 0 8px var(--br-gold); }
.dh-br-preview-note { font-size: 11.5px; color: var(--br-muted); margin-top: 10px; text-align: center; }
.dh-br-preview .dh-sign { max-width: 420px; margin: 0 auto; }

/* ══════════════ RESPONSIVE (Quy tắc 7) ══════════════ */
@media (min-width: 768px) {
  .dh-br { border-radius: 22px; }
  .dh-br-cards { grid-template-columns: repeat(2, 1fr); }
  .dh-br-arrow { display: flex; }
  .dh-br-rail-hint { display: none; }
  .dh-br-prov { flex-basis: 168px; }
  .dh-br-services { grid-template-columns: repeat(6, 1fr); }
  .dh-br-services b { font-size: 10.5px; }
  .dh-br-side { grid-template-columns: 1fr 1fr; }
  .dh-br-reg-grid { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .dh-br-hero { padding-top: 34px; }
}
@media (min-width: 992px) {
  .dh-br-mapwrap { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); align-items: stretch; }
  .dh-br-side { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dh-br-ticker { max-height: 100%; position: absolute; inset: 44px 0 0; }
  .dh-br-latest { position: relative; min-height: 320px; }
}
@media (min-width: 1200px) {
  .dh-br-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-br *, .dh-br *::before, .dh-br *::after { animation: none !important; }
}