/* ==============================================
   Hương Lâm – Contact Sidebar v1.0.0
   ============================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --hl-red:#E30613;
  --hl-red-deep:#B8050F;
  --hl-navy:#0e2547;
  --hl-navy-deep:#081832;
  --hl-zalo:#0068FF;
  --hl-msg:#0084FF;
  --hl-w:#fff;
  --hl-ink:#1a1a1a;
  --hl-size:50px;
  --hl-cta-size:58px;
  --hl-gap:10px;
  --hl-speed:.32s;
  --hl-ease:cubic-bezier(.2,.7,.25,1);
}

/* ── Desktop Sidebar ── */
.hlc-sidebar{
  position:fixed;top:50%;left:14px;transform:translateY(-50%);
  z-index:99999;display:flex;flex-direction:column;
  gap:var(--hl-gap);
  pointer-events:none;
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;
}
.hlc-sidebar > *{pointer-events:auto}

.hlc-btn{
  position:relative;
  width:var(--hl-size);height:var(--hl-size);
  display:flex;align-items:center;justify-content:center;
  background:var(--hl-w);color:var(--hl-navy);
  border-radius:50%;
  box-shadow:0 4px 14px rgba(14,37,71,.18),0 1px 3px rgba(14,37,71,.12);
  transition:transform .25s var(--hl-ease),box-shadow .25s var(--hl-ease),background .25s var(--hl-ease);
  text-decoration:none;
}
.hlc-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(14,37,71,.28),0 2px 5px rgba(14,37,71,.14)}
.hlc-btn svg{width:22px;height:22px;display:block;transition:transform .25s var(--hl-ease)}
.hlc-btn:hover svg{transform:scale(1.08)}

.hlc-btn .hlc-lbl{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-6px);
  background:var(--hl-navy);color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.1px;
  padding:8px 14px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--hl-ease),transform .25s var(--hl-ease);
  box-shadow:0 6px 18px rgba(14,37,71,.22);
}
.hlc-btn .hlc-lbl::before{
  content:'';position:absolute;left:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:10px;height:10px;background:var(--hl-navy);border-radius:2px;
}
.hlc-btn .hlc-lbl .hlc-sub{
  display:block;font-size:10px;font-weight:500;
  color:rgba(255,255,255,.62);letter-spacing:1.1px;text-transform:uppercase;
  margin-bottom:2px;
}
.hlc-btn:hover .hlc-lbl,.hlc-btn:focus-visible .hlc-lbl{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}

/* Per-button colours */
.hlc-btn--phone svg{fill:var(--hl-red)}
.hlc-btn--phone:hover{background:var(--hl-red)}
.hlc-btn--phone:hover svg{fill:#fff}

.hlc-btn--zalo svg{fill:var(--hl-zalo)}
.hlc-btn--zalo:hover{background:var(--hl-zalo)}
.hlc-btn--zalo:hover svg{fill:#fff}

.hlc-btn--msg svg{fill:var(--hl-msg)}
.hlc-btn--msg:hover{background:var(--hl-msg)}
.hlc-btn--msg:hover svg{fill:#fff}

.hlc-btn--map svg{fill:var(--hl-navy)}
.hlc-btn--map:hover{background:var(--hl-navy)}
.hlc-btn--map:hover svg{fill:#fff}

/* Messenger online dot */
.hlc-btn--msg::before{
  content:'';position:absolute;bottom:2px;right:2px;
  width:10px;height:10px;border-radius:50%;
  background:#22c55e;border:2px solid #fff;
  pointer-events:none;
}

/* CTA Báo giá */
.hlc-cta{
  width:var(--hl-cta-size);height:var(--hl-cta-size);
  background:var(--hl-red);
  margin-top:4px;
  box-shadow:0 6px 18px rgba(227,6,19,.32),0 2px 4px rgba(0,0,0,.18);
}
.hlc-cta svg{width:24px;height:24px;fill:#fff}
.hlc-cta:hover{background:var(--hl-red-deep)}
.hlc-cta:hover svg{fill:#fff}
.hlc-cta::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--hl-red);opacity:.55;
  animation:hlc-pulse 1.8s ease-out infinite;pointer-events:none;
}
.hlc-cta::after{
  content:attr(data-label);position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%);
  background:var(--hl-red);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(227,6,19,.3);
  pointer-events:none;
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;
}
.hlc-cta:hover::after{background:var(--hl-red-deep);box-shadow:0 4px 12px rgba(184,5,15,.4)}
.hlc-cta .hlc-lbl{display:none}

@keyframes hlc-pulse{
  0%{opacity:.55;transform:scale(1)}
  80%{opacity:0;transform:scale(1.4)}
  100%{opacity:0;transform:scale(1.4)}
}

/* ── Zalo Flyout Group ── */
.hlc-group{position:relative;cursor:pointer}
.hlc-group .hlc-lbl{display:none}
.hlc-count{
  position:absolute;top:-3px;right:-3px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--hl-red);color:#fff;
  font-size:10px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:2px solid #fff;
  pointer-events:none;
  box-shadow:0 1px 3px rgba(227,6,19,.3);
}
.hlc-flyout{
  position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-8px);
  background:#fff;border-radius:14px;
  box-shadow:0 16px 44px rgba(14,37,71,.22),0 2px 8px rgba(14,37,71,.1);
  padding:8px;display:flex;flex-direction:column;gap:2px;
  min-width:320px;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--hl-ease),transform .25s var(--hl-ease);
  z-index:10;
}
.hlc-flyout::before{
  content:'';position:absolute;left:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:12px;height:12px;background:#fff;border-radius:2px;
  box-shadow:-2px 2px 4px rgba(14,37,71,.06);
}
.hlc-group::after{
  content:'';position:absolute;left:100%;top:0;width:18px;height:100%;
  pointer-events:none;
}
.hlc-group:hover::after{pointer-events:auto}
.hlc-group:hover .hlc-flyout,.hlc-group:focus-within .hlc-flyout{
  opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto;
}
.hlc-group:hover{transform:none}

.hlc-fl-head{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px 10px;
  border-bottom:1px solid rgba(14,37,71,.08);
  margin-bottom:4px;
}
.hlc-fl-h-ico{
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,104,255,.12);color:var(--hl-zalo);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hlc-fl-h-ico svg{width:16px;height:16px;fill:var(--hl-zalo)}
.hlc-fl-h-tx{display:flex;flex-direction:column;line-height:1.2}
.hlc-fl-h-tx .t1{font-size:13px;font-weight:700;color:var(--hl-navy)}
.hlc-fl-h-tx .t2{font-size:10.5px;color:#8b95a3;margin-top:2px}

.hlc-fl{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--hl-navy);
  transition:background .2s;
}
.hlc-fl:hover{background:rgba(0,104,255,.07)}
.hlc-fl-ico{
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,104,255,.1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hlc-fl-ico svg{width:18px;height:18px;fill:var(--hl-zalo)}
.hlc-fl-tx{flex:1;display:flex;flex-direction:column;line-height:1.25}
.hlc-fl-sub{font-size:10px;font-weight:600;color:#8b95a3;letter-spacing:1.1px;text-transform:uppercase;margin-bottom:3px}
.hlc-fl-name{font-size:14px;font-weight:600;color:var(--hl-navy);white-space:nowrap}
.hlc-fl-tag{
  font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:5px;letter-spacing:.5px;
  background:var(--hl-navy);color:#fff;flex-shrink:0;
}
.hlc-fl-tag--soft{background:#ffe9eb;color:var(--hl-red)}

/* ── Mobile Bottom Dock ── */
.hlc-mobi{display:none}
.hlc-mobi a{text-decoration:none;color:inherit}

@media(max-width:768px){
  .hlc-sidebar{display:none!important}
  .hlc-mobi{
    display:flex!important;position:fixed;bottom:0;left:0;right:0;z-index:99999;
    background:#fff;
    justify-content:space-around;align-items:flex-end;
    padding:10px 6px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 18px rgba(14,37,71,.12);
    border-top:1px solid rgba(14,37,71,.08);
    font-family:'Be Vietnam Pro',-apple-system,sans-serif;
  }
  .hlc-mobi::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--hl-red) 20%,var(--hl-red) 80%,transparent);
    opacity:.55;
  }
  .hlc-mobi a{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:4px 6px;border-radius:10px;
    min-width:54px;
    transition:background .2s;
  }
  .hlc-mobi a:active{background:rgba(14,37,71,.06)}
  .hlc-mobi a svg{width:23px;height:23px;display:block}
  .hlc-mobi a span{font-size:10.5px;font-weight:600;color:var(--hl-navy);letter-spacing:.1px;opacity:.92}
  .hlc-mobi .mb-phone svg{fill:var(--hl-red)}
  .hlc-mobi .mb-zalo svg{fill:var(--hl-zalo)}
  .hlc-mobi .mb-msg svg{fill:var(--hl-msg)}
  .hlc-mobi .mb-map svg{fill:var(--hl-navy)}
  .hlc-mobi .mb-cta{
    background:var(--hl-red);border-radius:50%;
    width:60px;height:60px;padding:0;margin-top:-30px;
    box-shadow:0 6px 22px rgba(227,6,19,.4),0 2px 6px rgba(0,0,0,.16);
    position:relative;justify-content:center;align-items:center;
    border:3px solid #fff;
    flex-shrink:0;
  }
  .hlc-mobi .mb-cta svg{width:26px;height:26px;fill:#fff!important}
  .hlc-mobi .mb-cta span{
    position:absolute;bottom:-16px;font-size:10px;font-weight:700;
    color:var(--hl-red);white-space:nowrap;letter-spacing:.4px;
    text-shadow:0 1px 2px rgba(255,255,255,.8);
  }
  .hlc-mobi .mb-cta::after{
    content:'';position:absolute;inset:-5px;border-radius:50%;
    border:2px solid var(--hl-red);opacity:.5;
    animation:hlc-pulse 1.8s ease-out infinite;pointer-events:none;
  }
}

/* ── Mobile Bottom Sheet ── */
.mb-sheet{
  position:fixed;inset:0;z-index:100000;
  display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;
  visibility:hidden;
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,sans-serif;
}
.mb-sheet.is-open{pointer-events:auto;visibility:visible}
.mb-sheet-back{
  position:absolute;inset:0;background:rgba(8,24,50,.45);
  opacity:0;transition:opacity .25s ease;
}
.mb-sheet.is-open .mb-sheet-back{opacity:1}
.mb-sheet-panel{
  position:relative;background:#fff;
  border-radius:18px 18px 0 0;
  padding:8px 14px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.25,1);
  box-shadow:0 -8px 32px rgba(8,24,50,.2);
}
.mb-sheet.is-open .mb-sheet-panel{transform:translateY(0)}
.mb-sheet-handle{
  width:40px;height:4px;border-radius:2px;
  background:rgba(14,37,71,.18);
  margin:8px auto 14px;
}
.mb-sheet-title{
  display:flex;align-items:center;gap:10px;
  padding:0 6px 12px;
  border-bottom:1px solid rgba(14,37,71,.08);
}
.mb-sheet-title .ms-ic{
  width:34px;height:34px;border-radius:50%;
  background:var(--hl-zalo);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mb-sheet-title .ms-ic svg{width:18px;height:18px;fill:#fff}
.mb-sheet-title .ms-tx{display:flex;flex-direction:column;line-height:1.2;flex:1}
.mb-sheet-title .ms-tx .t1{font-size:15px;font-weight:700;color:var(--hl-navy)}
.mb-sheet-title .ms-tx .t2{font-size:12px;color:#8b95a3;margin-top:2px}
.mb-sheet-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(14,37,71,.06);border:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;color:var(--hl-navy);
}
.mb-sheet-close svg{width:16px;height:16px;fill:currentColor}
.mb-sheet-list{display:flex;flex-direction:column;gap:2px;padding-top:8px}
.mb-sheet-list a{
  display:flex;align-items:center;gap:12px;
  padding:12px 8px;border-radius:10px;
  text-decoration:none;color:var(--hl-navy);
}
.mb-sheet-list a:active{background:rgba(0,104,255,.08)}
.mb-sheet-list .ms-row-ic{
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,104,255,.1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mb-sheet-list .ms-row-ic svg{width:20px;height:20px;fill:var(--hl-zalo)}
.mb-sheet-list .ms-row-tx{flex:1;display:flex;flex-direction:column;line-height:1.25}
.mb-sheet-list .ms-row-sub{font-size:10.5px;font-weight:600;color:#8b95a3;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.mb-sheet-list .ms-row-name{font-size:15px;font-weight:600;color:var(--hl-navy)}
.mb-sheet-list .ms-row-tag{
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.5px;
  background:var(--hl-navy);color:#fff;flex-shrink:0;
}
.mb-sheet-list .ms-row-tag--soft{background:#ffe9eb;color:var(--hl-red)}

@media(min-width:769px){.mb-sheet{display:none!important}}