/* ============================================================================
   Trang "Hệ thống cửa hàng" — /store-locator
   Dựng theo bản thiết kế chủ shop gửi 12/09/2026. Chỉ nạp ở đúng trang này
   (views/hl-store-locator.blade.php tự chèn <link> kèm ?v=filemtime).

   Bảng màu / bo góc / bóng lấy từ biến của hl-theme.css để không lệch phần còn lại
   của web; chỗ nào thiết kế dùng màu riêng thì ghi thẳng số và có chú thích.
   Tiền tố .hl-sl để không đụng class nào khác.
   ============================================================================ */

.hl-sl {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* .hl-wrap của layout rộng tới 1560px, bản thiết kế vẽ ở 1320px — giữ đúng bề ngang thiết kế,
       rộng hơn thì cột bản đồ bị kéo dẹt và thẻ chi nhánh trông loãng. */
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

/* ------------------------------- Đầu trang ------------------------------- */

.hl-sl__hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    /* dải vàng riêng của thiết kế, sáng hơn --hl-grad-head một chút */
    background: linear-gradient(150deg, #FFE3A0 0%, #FFC65C 48%, #F5AE2E 100%);
    padding: 30px 34px 28px;
    box-shadow: 0 10px 30px rgba(196, 145, 20, .2);
}
.hl-sl__hero::before {           /* quầng sáng góc phải trên */
    content: '';
    position: absolute;
    right: -90px;
    top: -120px;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
}
.hl-sl__heroin {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 26px;
    flex-wrap: wrap;
}
.hl-sl__herotxt {
    flex: 1 1 380px;
    min-width: min(300px, 100%);
}
.hl-sl__h1 {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.14;
    color: var(--hl-ink-strong);
    text-wrap: pretty;
}
.hl-sl__lead {
    margin: 9px 0 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #6B4405;
    line-height: 1.6;
    max-width: 560px;
    text-wrap: pretty;
}
.hl-sl__stats {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.hl-sl__stat {
    padding: 14px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .68);
    min-width: 104px;
}
.hl-sl__stat b {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hl-ink-strong);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hl-sl__stat.is-open b { color: #2E7D5B; }
.hl-sl__stat.is-shut b { color: #8A6A2E; }
.hl-sl__stat span {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #6B4405;
    padding-top: 3px;
}

/* ------------------------- Thanh tìm kiếm + lọc -------------------------- */

.hl-sl__bar {
    background: var(--hl-surface);
    border-radius: 24px;
    padding: 18px 20px;
    box-shadow: 0 6px 20px rgba(163, 124, 32, .1);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hl-sl__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.hl-sl__search {
    flex: 1 1 300px;
    min-width: min(240px, 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FBF7EC;
    border: 1.5px solid var(--hl-line);
    border-radius: 16px;
    padding: 0 15px;
}
.hl-sl__search:focus-within { border-color: var(--hl-gold-2); }
.hl-sl__search svg { flex: 0 0 18px; color: #8C8372; }
.hl-sl__search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-ink);
    padding: 14px 0;
}
.hl-sl__search input::-webkit-search-cancel-button { display: none; }

/* nút vàng dùng lại cho "Dùng vị trí của tôi" và "Chỉ đường" */
.hl-sl__gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 16px;
    background: var(--hl-grad);
    color: var(--hl-ink-strong);
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(196, 145, 20, .26);
}
.hl-sl__gold:hover { color: var(--hl-ink-strong); filter: brightness(1.04); }
.hl-sl__gold:disabled { opacity: .6; cursor: default; box-shadow: none; }
.hl-sl__geo {
    flex: 0 0 auto;
    padding: 13px 20px;
    font-size: 14px;
}
.hl-sl__geo.is-busy svg { animation: hlSlSpin 1s linear infinite; }
@keyframes hlSlSpin { to { transform: rotate(360deg); } }

.hl-sl__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.hl-sl__flabel {
    flex: 0 0 auto;          /* dãy nút trượt ngang trên điện thoại — không cho nhãn bị bóp xuống dòng */
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hl-ink-3);
    padding-right: 2px;
}
.hl-sl__chip {
    padding: 8px 16px;
    border-radius: 13px;
    border: 1.5px solid var(--hl-line);
    background: var(--hl-surface);
    color: var(--hl-ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.hl-sl__chip[aria-pressed="true"] {
    background: var(--hl-grad);
    border-color: transparent;
    color: var(--hl-ink-strong);
}
.hl-sl__spacer { flex: 1 1 0; min-width: 0; }
.hl-sl__toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    padding: 8px 14px;
    border: none;
    border-radius: 13px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #3A3327;
    white-space: nowrap;
}
.hl-sl__toggle[aria-pressed="true"] { background: #FFF8E4; }
.hl-sl__box {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border-radius: 6px;
    border: 1.5px solid #DDD0B4;
    background: #FBF7EC;
    display: grid;
    place-items: center;
    color: #fff;
}
.hl-sl__box svg { opacity: 0; }
.hl-sl__toggle[aria-pressed="true"] .hl-sl__box {
    border-color: var(--hl-gold-2);
    background: var(--hl-gold-2);
}
.hl-sl__toggle[aria-pressed="true"] .hl-sl__box svg { opacity: 1; }

/* ------------------------------ Bố cục lưới ------------------------------ */

.hl-sl__grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.hl-sl__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hl-sl__side { position: sticky; top: 14px; gap: 16px; }

.hl-sl__count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 4px;
    flex-wrap: wrap;
}
.hl-sl__count b { font-size: 14px; font-weight: 800; color: var(--hl-ink); }
.hl-sl__count span { font-size: 12.5px; color: var(--hl-ink-3); }

/* Bản thiết kế đặt max-height 720px vì mock có 6 cửa hàng; thật chỉ có 4 nên để cao tự nhiên —
   đặt trần thì thẻ cuối bị cắt ngang trông như trang lỗi. */
.hl-sl__cards {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 2px;
    margin: -2px;             /* chừa chỗ cho viền 2px của thẻ đang chọn, khỏi bị cắt */
}

/* -------------------------------- Thẻ chi nhánh ------------------------- */

.hl-sl__card {
    position: relative;
    background: var(--hl-surface);
    border-radius: 22px;
    padding: 17px 18px;
    border: 2px solid transparent;
    box-shadow: var(--hl-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 13px;
    text-align: left;
}
/* Nút chọn phủ kín thẻ, nằm DƯỚI hai nút "gọi / chỉ đường" — nhờ vậy bấm chỗ nào trên thẻ cũng
   chọn được chi nhánh, mà vẫn bấm được hai nút kia, và bàn phím Tab vẫn tới được. */
.hl-sl__pick {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font: inherit;
}
.hl-sl__pick:focus-visible { outline: 2px solid var(--hl-gold-2); outline-offset: 2px; }
.hl-sl__acts { position: relative; z-index: 1; }
.hl-sl__card:hover { border-color: #F6E4B4; }
.hl-sl__card.is-on {
    border-color: #F0C75A;
    box-shadow: 0 10px 26px rgba(196, 145, 20, .22);
}
.hl-sl__card[hidden] { display: none; }
.hl-sl__chead { display: flex; align-items: flex-start; gap: 12px; }
.hl-sl__num {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    background: #FBF7EC;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--hl-ink-3);
}
.hl-sl__card.is-on .hl-sl__num { background: var(--hl-grad); color: var(--hl-ink-strong); }
.hl-sl__ctitle { flex: 1; min-width: 0; }
.hl-sl__name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--hl-ink);
    line-height: 1.3;
}
.hl-sl__badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hl-ink-strong);
    color: #FFD874;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}
.hl-sl__meta { display: flex; align-items: center; gap: 7px; padding-top: 6px; flex-wrap: wrap; }
.hl-sl__state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--hl-green-soft);
    color: #1D5940;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.hl-sl__state i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.hl-sl__state.is-shut { background: var(--hl-line); color: var(--hl-ink-3); }
.hl-sl__dist {
    font-size: 12px;
    font-weight: 700;
    color: var(--hl-ink-3);
    white-space: nowrap;
}
.hl-sl__dist:empty { display: none; }

.hl-sl__lines { display: flex; flex-direction: column; gap: 7px; }
.hl-sl__line { display: flex; gap: 9px; }
.hl-sl__line svg { flex: 0 0 15px; margin-top: 2px; color: var(--hl-link); }
.hl-sl__line span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--hl-ink-2); line-height: 1.55; }

.hl-sl__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hl-sl__tag {
    padding: 4px 10px;
    border-radius: 9px;
    background: var(--hl-gold-soft);
    color: #7A4405;
    font-size: 10.5px;
    font-weight: 700;
}
.hl-sl__tag.is-stock { background: var(--hl-green-soft); color: #1D5940; }
.hl-sl__tag.is-hub { background: #E8EEFA; color: #2A4879; }

.hl-sl__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hl-sl__act {
    flex: 1 1 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border-radius: 13px;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}
.hl-sl__act svg { flex: 0 0 15px; }
.hl-sl__act--call { background: var(--hl-grad); color: var(--hl-ink-strong); }
.hl-sl__act--call:hover { color: var(--hl-ink-strong); filter: brightness(1.04); }
.hl-sl__act--dir { background: #FBF7EC; color: var(--hl-ink-2); font-weight: 700; }
.hl-sl__act--dir:hover { color: var(--hl-ink); background: #F6EFDE; }

.hl-sl__empty {
    display: none;
    padding: 26px 20px;
    border-radius: 22px;
    background: var(--hl-surface);
    box-shadow: var(--hl-shadow-sm);
    text-align: center;
    font-size: 13px;
    color: var(--hl-ink-2);
    line-height: 1.6;
}
.hl-sl__empty b { display: block; font-size: 14.5px; color: var(--hl-ink); margin-bottom: 4px; }

/* --------------------------------- Bản đồ -------------------------------- */

.hl-sl__mapbox {
    position: relative;
    z-index: 0;
    isolation: isolate;
    border-radius: 26px;
    overflow: hidden;
    background: #EFE7D4;
    box-shadow: 0 8px 26px rgba(163, 124, 32, .13);
    aspect-ratio: 16 / 9;
    min-height: 300px;
    max-height: 520px;
}
/* CSS của MapLibre nạp SAU file này và gán .maplibregl-map { position: relative }. Cùng độ ưu tiên
   thì nó thắng → khung mất inset:0, cao 0px, bản đồ trắng bốc. Chọn cụ thể hơn để giữ thế. */
.hl-sl__mapbox > .hl-sl__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hl-sl__map { font-family: inherit; background: #EFE7D4; }
.hl-sl__map .maplibregl-ctrl-attrib { font-size: 10px; }
.hl-sl__map .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 4px 12px rgba(120, 86, 16, .16); }
.hl-sl__map .maplibregl-marker { cursor: pointer; }
.hl-sl .maplibregl-cooperative-gesture-screen { font-family: inherit; font-size: 14px; }
.hl-sl__mapfail {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--hl-muted);
    line-height: 1.6;
}

/* ghim chi nhánh trên bản đồ — dựng lại đúng kiểu trong bản thiết kế */
.hl-pin { display: flex; flex-direction: column; align-items: center; }
.hl-pin__b {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px;
    border-radius: 14px;
    background: #fff;
    color: var(--hl-ink-2);
    box-shadow: 0 4px 12px rgba(120, 80, 0, .2);
    white-space: nowrap;
}
.hl-pin__n {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 999px;
    background: var(--hl-gold-2);
    display: grid;
    place-items: center;
    font: 800 11px/1 'Be Vietnam Pro', system-ui, sans-serif;
    color: var(--hl-ink-strong);
}
.hl-pin__t { display: none; font: 800 12.5px/1 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: -.01em; }
.hl-pin__a {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
}
.hl-pin.is-on .hl-pin__b {
    background: var(--hl-price);
    color: #fff;
    padding: 7px 13px 7px 8px;
    box-shadow: 0 8px 20px rgba(150, 45, 25, .34);
}
.hl-pin.is-on .hl-pin__n { background: rgba(255, 255, 255, .25); color: #fff; }
.hl-pin.is-on .hl-pin__t { display: block; }
.hl-pin.is-on .hl-pin__a { border-top-color: var(--hl-price); }
.hl-pin__ping {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--hl-price);
    transform: translateX(-50%);
    animation: hlSlPing 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.hl-pin:not(.is-on) .hl-pin__ping { display: none; }
@keyframes hlSlPing {
    0% { transform: translateX(-50%) scale(1); opacity: .5; }
    70%, 100% { transform: translateX(-50%) scale(2.4); opacity: 0; }
}
/* Ghim của chi nhánh chưa dò được đúng số nhà: viền đứt để phân biệt ngay bằng mắt. */
.hl-pin--approx .hl-pin__b {
    border: 1.5px dashed #C9970F;
    background: #FFFDF6;
}
.hl-pin--approx .hl-pin__a { border-top-color: #C9970F; }
.hl-pin--approx.is-on .hl-pin__b { border-color: #fff; background: var(--hl-price); }
.hl-pin--approx.is-on .hl-pin__a { border-top-color: var(--hl-price); }

/* ghim vị trí của khách */
.hl-pin--me .hl-pin__b { background: var(--hl-ink-strong); color: #fff; padding: 6px 11px; }
.hl-pin--me .hl-pin__a { border-top-color: var(--hl-ink-strong); }
.hl-pin--me .hl-pin__t { display: block; font-size: 11.5px; }

.hl-sl__legend {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(120, 80, 0, .14);
    pointer-events: none;
}
.hl-sl__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hl-ink-2);
    white-space: nowrap;
}
.hl-sl__legend i { width: 9px; height: 9px; border-radius: 999px; background: var(--hl-gold-2); }
.hl-sl__legend span:first-child i { background: var(--hl-price); }
.hl-sl__legend em { width: 1px; height: 13px; background: var(--hl-line-2); }

/* Góc phải-dưới là chỗ MapLibre in dòng ghi nguồn bản đồ, góc phải-trên là nút phóng to →
   nút này để góc trái-trên cho khỏi đè lên cái nào. */
.hl-sl__all {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: none;
    border-radius: 13px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(120, 80, 0, .14);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--hl-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.hl-sl__all:hover { color: var(--hl-ink); }

/* ---------------------------- Thẻ chi tiết ------------------------------- */

.hl-sl__detail {
    background: var(--hl-surface);
    border-radius: 26px;
    box-shadow: 0 8px 26px rgba(163, 124, 32, .13);
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hl-sl__dhead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.hl-sl__dicon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 17px;
    background: var(--hl-gold-soft);
    display: grid;
    place-items: center;
    color: var(--hl-link);
}
.hl-sl__dmain { flex: 1 1 240px; min-width: min(200px, 100%); }
.hl-sl__dname {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hl-ink);
    line-height: 1.25;
}
.hl-sl__daddr { font-size: 13px; color: var(--hl-ink-2); padding-top: 6px; line-height: 1.6; }
.hl-sl__ddist { flex: 0 0 auto; text-align: right; }
.hl-sl__ddist small { display: block; font-size: 11.5px; font-weight: 700; color: var(--hl-ink-3); }
.hl-sl__ddist b { display: block; font-size: 20px; font-weight: 800; color: var(--hl-link); letter-spacing: -.02em; }
.hl-sl__ddist[hidden] { display: none; }

.hl-sl__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 10px;
}
.hl-sl__tile {
    padding: 14px 16px;
    border-radius: 17px;
    background: #FBF7EC;
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}
.hl-sl__tile svg { flex: 0 0 19px; color: var(--hl-link); }
.hl-sl__tile > div { min-width: 0; }
.hl-sl__tile small { display: block; font-size: 11px; font-weight: 700; color: var(--hl-ink-3); }
.hl-sl__tile b {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--hl-ink);
    line-height: 1.4;
}
a.hl-sl__tile:hover b { color: var(--hl-link); }

.hl-sl__svctitle {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--hl-ink-3);
    padding-bottom: 10px;
}
.hl-sl__svcs { display: flex; gap: 7px; flex-wrap: wrap; }
.hl-sl__svc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 13px;
    background: var(--hl-green-soft);
    color: #1D5940;
    font-size: 12.5px;
    font-weight: 700;
}
.hl-sl__svc svg { flex: 0 0 14px; }

.hl-sl__dacts { display: flex; gap: 9px; flex-wrap: wrap; }
.hl-sl__dact {
    flex: 1 1 190px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}
.hl-sl__dact svg { flex: 0 0 17px; }
.hl-sl__dact--dir { background: var(--hl-grad); color: var(--hl-ink-strong); box-shadow: 0 8px 20px rgba(196, 145, 20, .26); }
.hl-sl__dact--dir:hover { color: var(--hl-ink-strong); filter: brightness(1.04); }
.hl-sl__dact--zalo { flex: 1 1 160px; background: #FBF7EC; color: var(--hl-ink-2); font-weight: 700; }
.hl-sl__dact--zalo:hover { color: var(--hl-ink); background: #F6EFDE; }

/* ----------------------- Bài viết SEO cuối trang ------------------------- */

.hl-sl__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--hl-surface);
    box-shadow: var(--hl-shadow-sm);
    font-size: 13px;
    color: var(--hl-ink-2);
    line-height: 1.6;
}
.hl-sl__note svg { flex: 0 0 20px; color: var(--hl-link); margin-top: 1px; }
.hl-sl__note b { color: var(--hl-ink); }

/* ------------------------------ Màn hình hẹp ----------------------------- */

@media (max-width: 1100px) {
    .hl-sl__grid { grid-template-columns: minmax(0, 1fr); }
    .hl-sl__side { position: static; order: -1; }      /* bản đồ + chi tiết lên trên danh sách */
    .hl-sl__cards { max-height: none; overflow: visible; }
}

@media (max-width: 640px) {
    .hl-sl__hero { padding: 22px 18px 20px; border-radius: 24px; }
    .hl-sl__h1 { font-size: 25px; }
    .hl-sl__lead { font-size: 13.5px; }
    .hl-sl__stats { width: 100%; }
    .hl-sl__stat { flex: 1 1 0; min-width: 0; padding: 12px 14px; }
    .hl-sl__stat b { font-size: 22px; }
    .hl-sl__bar { padding: 14px; border-radius: 20px; }
    .hl-sl__geo { width: 100%; }
    /* dãy nút khu vực trượt ngang, không xuống dòng lộn xộn */
    .hl-sl__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -14px;
        padding: 0 14px;
        /* Hàng này trượt ngang nhưng thanh cuộn bị giấu, nên ở mép phải chỉ thấy một nút bị cắt
           cụt — trông như lỗi tràn chứ không ai đoán là kéo được. Vệt mờ dần ở hai mép nói cho
           khách biết còn nội dung phía sau; nó bám theo khung nhìn của chính hàng nên khi cuộn
           tới đầu/cuối thì vệt tương ứng tự tắt. */
        background:
            linear-gradient(to right, var(--hl-surface) 40%, rgba(255, 255, 255, 0)) left center,
            linear-gradient(to left, var(--hl-surface) 40%, rgba(255, 255, 255, 0)) right center,
            radial-gradient(farthest-side at 0 50%, rgba(107, 68, 5, .16), rgba(107, 68, 5, 0)) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(107, 68, 5, .16), rgba(107, 68, 5, 0)) right center;
        background-repeat: no-repeat;
        background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    .hl-sl__filters::-webkit-scrollbar { display: none; }
    .hl-sl__spacer { display: none; }
    .hl-sl__toggle { flex: 0 0 auto; }
    /* 240px là quá thấp: dải ghi nguồn đã ăn một phần, và "Xem cả 4 chi nhánh" phải thu nhỏ tới
       mức 3,4 mới nhét đủ 4 ghim vào (xem ghi chú ở fitAll trong hl-store-locator.js). */
    .hl-sl__mapbox { min-height: 360px; border-radius: 22px; }
    .hl-sl__legend { left: 10px; bottom: 10px; padding: 8px 11px; gap: 7px; }
    .hl-sl__legend span { font-size: 10.5px; }
    /* CHỈ dời bằng left/top. Trước đây khối này ghi right/bottom mà không xoá left/top của
       khối gốc → cả bốn cạnh cùng có giá trị, nút inline-flex bị kéo giãn phủ 84–90% khung
       bản đồ; nền trắng 94% của nút làm bản đồ trên điện thoại trông như bị mờ đi, và mọi
       cú chạm lên bản đồ đều rơi vào nút. */
    .hl-sl__all { left: 10px; top: 10px; padding: 8px 11px; font-size: 10.5px; }
    .hl-sl__detail { padding: 18px 16px 16px; border-radius: 22px; }
    .hl-sl__dname { font-size: 18px; }
    .hl-sl__card { padding: 15px 15px; border-radius: 20px; }
    .hl-sl__name { font-size: 14.5px; }

    /* Ngón tay cần ô bấm ≥48px (Google đo 48×48, cách nhau ≥8px). Ba nút này đang 42–46px —
       đủ để hụt tay khi đi đường. Dùng min-height chứ không tăng padding: chữ giữ nguyên cỡ,
       chỉ ô bấm cao thêm. Bản máy tính không đụng tới vì khối này chỉ chạy ở ≤640px. */
    .hl-sl__chip,
    .hl-sl__toggle { min-height: 48px; }
    .hl-sl__act { min-height: 48px; }

    /* Nút +/− của MapLibre mặc định 29×29 và dính sát nhau. Nới lên 44px — không lấy hẳn 48
       vì hai nút xếp chồng, 48 là chiếm gần 1/3 chiều cao khung bản đồ trên điện thoại. */
    .hl-sl__mapbox .maplibregl-ctrl-group button {
        width: 44px;
        height: 44px;
        background-size: 22px 22px;
    }

    /* Chữ 10–10.5px trên điện thoại quá nhỏ để đọc lướt. Nâng vừa đủ, giữ nguyên bố cục.
       Riêng huy hiệu "TRỤ SỞ"/"KHO TỔNG" là chữ hoa có giãn cách nên 11px vẫn rõ. */
    .hl-sl__badge { font-size: 11px; }
    .hl-sl__state,
    .hl-sl__tag { font-size: 12px; }
    .hl-sl__all { font-size: 12px; }
}

/* Ở màn rất hẹp, chú thích và nút "xem tất cả" chồng nhau → giấu chú thích, giữ nút */
@media (max-width: 420px) {
    .hl-sl__legend { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-pin__ping { animation: none; opacity: 0; }
    .hl-sl__geo.is-busy svg { animation: none; }
}

/* ------------------- Thắng lại luật màu chữ chung của theme ------------------- */

/* hl-theme.css:66-67 đặt màu cho MỌI thẻ <a> ở độ ưu tiên (0,1,1) và (0,2,1) khi hover.
   Bốn nút hành động của trang này cũng là thẻ <a>, mà luật màu của chúng chỉ có một lớp
   (0,1,0) nên THUA — chữ bị đổi sang nâu link #A8620A, tương phản trên nền vàng chỉ còn
   2,2:1 đến 3,0:1 (WCAG AA đòi 4,5:1), và đổi màu lần nữa khi hover trông như lỗi vẽ.
   Hai nút cùng kiểu nhưng là <button> thì không dính, nên nhìn lướt rất khó nhận ra.
   Thêm tiền tố .hl-body cho đủ ưu tiên. Cùng cách đã dùng ở hl-theme.css:1187, hl-pages.css:1126. */
.hl-body a.hl-sl__act--call,
.hl-body a.hl-sl__act--call:hover,
.hl-body a.hl-sl__dact--dir,
.hl-body a.hl-sl__dact--dir:hover { color: var(--hl-ink-strong); }

.hl-body a.hl-sl__act--dir,
.hl-body a.hl-sl__dact--zalo { color: var(--hl-ink-2); }
.hl-body a.hl-sl__act--dir:hover,
.hl-body a.hl-sl__dact--zalo:hover { color: var(--hl-ink); }

/* ------------------------------ Viền tiêu điểm ------------------------------- */

/* Bấm bằng bàn phím phải nhìn thấy mình đang ở đâu (WCAG 2.4.7). Chỉ dùng :focus-visible
   nên bấm chuột hay chạm tay không hiện viền.
   Nút chọn .hl-sl__pick phủ kín thẻ (inset:0) nên viền của chính nó đã ôm đúng viền thẻ —
   không cần :has() để vẽ hộ, và cũng KHÔNG được tắt viền của nó rồi trông chờ vào :has():
   trình duyệt nào chưa hiểu :has() sẽ bỏ luật đó mà vẫn nghe luật tắt, thành ra mất sạch viền. */
.hl-sl :is(a, button, input, [tabindex]):focus-visible {
    outline: 3px solid var(--hl-gold-2);
    outline-offset: 2px;
    border-radius: 12px;
}