/* Bản đồ ăn uống Việt Nam: /ban-do/, trang tỉnh, và phần riêng của trang mục đặc sản. Tiền tố .bd- .
   Màu chung (đỏ cờ, vàng sao, cam đồng) lấy từ web.css; ở đây chỉ có thang đỏ của bản đồ. */

/* thang đỏ một sắc: hồng đào → đỏ cờ → đỏ thẫm. Chữ trên ô đạt tương phản 4,5:1 trở lên. */
:root {
  --bd-1: #FDE7DC; --bd-2: #F8C0AA; --bd-3: #EE8A6C; --bd-4: #DA251D; --bd-5: #A50F15;
  --bd-c1: #2A1714; --bd-c2: #2A1714; --bd-c3: #2A1714; --bd-c4: #FFFFFF; --bd-c5: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bd-1: #3A1C1B; --bd-2: #5E2420; --bd-3: #92302A; --bd-4: #E8584C; --bd-5: #FFA08F;
    --bd-c1: #F5E9DF; --bd-c2: #F5E9DF; --bd-c3: #FFF3EC; --bd-c4: #1A0808; --bd-c5: #1A0808;
  }
}
.m1 { --f: var(--bd-1); --t: var(--bd-c1); } .m2 { --f: var(--bd-2); --t: var(--bd-c2); } .m3 { --f: var(--bd-3); --t: var(--bd-c3); }
.m4 { --f: var(--bd-4); --t: var(--bd-c4); } .m5 { --f: var(--bd-5); --t: var(--bd-c5); }

/* ---------- trang làm việc /ban-do/ */
.bd-main { max-width: var(--max); margin: 0 auto; padding: 0 var(--le); }
.bd-lv { display: grid; gap: var(--s4) var(--s5); padding: var(--s3) 0 var(--s5); }
.bd-trai, .bd-phai { min-width: 0; }
.bd-trai__dau { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.bd-trai h1 { font-size: var(--xl); }
.bd-tom { margin: 2px 0 0; font-size: var(--xs); color: var(--ink-2); }
.bd-tom strong { color: var(--ink); font-weight: 600; }
.bd-nut { font: 500 var(--xs)/1.3 var(--f-body); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); padding: 5px var(--s3); cursor: pointer; }
.bd-nut:hover { background: var(--surface-2); color: var(--ink); }
.bd-nut[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.bd-chuyen, .bd-tab { display: inline-flex; }
.bd-chuyen .bd-nut, .bd-tab .bd-nut { border-radius: 0; margin-left: -1px; }
.bd-chuyen .bd-nut:first-child, .bd-tab .bd-nut:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.bd-chuyen .bd-nut:last-child, .bd-tab .bd-nut:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.bd-tab { margin-left: auto; }
.bd-tab[hidden] { display: none; }

/* ---------- khung bản đồ: viewBox đổi để phóng/thu, nên khung có kích thước cố định */
.bd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bd-defs path { vector-effect: non-scaling-stroke; }
.bd-ban-do { position: relative; isolation: isolate; overflow: hidden; touch-action: pan-y; }
.bd-ban-do.da-phong { cursor: grab; touch-action: none; }
.bd-ban-do.dang-keo { cursor: grabbing; }
.bd-ban-do.dang-keo a { pointer-events: none; }
.bd-lop { height: 100%; }
.bd-lop[hidden], .bd-thang[hidden], .bd-ds-tinh__lop[hidden] { display: none; }
.bd-svg { display: block; width: 100%; height: 100%; }
.bd-svg:focus { outline: none; }

/* tỉnh: tô theo số đặc sản. Nét trong suốt rộng quanh tỉnh làm vùng nhận chuột lớn hơn hình, tỉnh nhỏ vẽ sau nên nằm trên */
.bd-o { cursor: pointer; text-decoration: none; }
.bd-o use { fill: var(--f); stroke: transparent; stroke-width: 7px; stroke-linejoin: round; pointer-events: all; transition: fill var(--dong-nhanh) var(--dong-em), filter var(--dong-nhanh) var(--dong-em); }
.bd-o:hover use, .bd-o:focus-visible use { filter: brightness(1.1); }
.bd-o:focus-visible { outline: none; }
.bd-svg.co-chon .bd-o:not(.dang-chon), .bd-svg.co-chon .bd-dao:not(.dang-chon) { opacity: .45; }
.bd-svg .ngoai-vung { opacity: .3; }

/* viền mảnh (px màn hình, không dày lên khi phóng): bờ biển, ranh giới tỉnh, nhóm tỉnh mới, vùng */
.bd-bo, .bd-vien-cu, .bd-vien-nhom, .bd-vien-vung, .bd-vien-hv, .bd-vien-chon { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.bd-bo { stroke: color-mix(in srgb, #4A0A0E 65%, transparent); stroke-width: .6px; }
.bd-vien-cu { stroke: color-mix(in srgb, var(--ground) 90%, transparent); stroke-width: .6px; }
.bd-vien-nhom { stroke: color-mix(in srgb, #4A0A0E 70%, transparent); stroke-width: .9px; }
.bd-vien-vung { stroke: #4A0A0E; stroke-width: 1.5px; opacity: .85; }
.bd-vien-hv, .bd-vien-chon { stroke: var(--sao); filter: drop-shadow(0 0 .6px #3D0709) drop-shadow(0 0 .6px #3D0709); }
.bd-vien-hv { stroke-width: 1.6px; }
.bd-vien-hv.foc { stroke: #FFFFFF; stroke-width: 2.4px; }
.bd-vien-chon { stroke-width: 2.4px; }
@media (prefers-color-scheme: dark) {
  .bd-bo { stroke: color-mix(in srgb, #FFE9A8 55%, transparent); }
  .bd-vien-cu { stroke: color-mix(in srgb, #171111 80%, transparent); }
  .bd-vien-nhom { stroke: color-mix(in srgb, #FFE9A8 60%, transparent); }
  .bd-vien-vung { stroke: var(--sao); opacity: .8; }
}

/* nhãn: JS đặt transform scale(1/k) nên luôn cao 10px trên màn hình ở mọi mức phóng */
.bd-nhan { pointer-events: none; }
.bd-nh.an-nhan { display: none; }
.bd-nh .bd-ten { font: 600 10px var(--f-body); fill: var(--t); stroke: var(--f); stroke-width: 2.6px; paint-order: stroke; stroke-linejoin: round; text-anchor: middle; }
.bd-nh .bd-so { font: 600 9.5px var(--f-body); fill: var(--t); stroke: var(--f); stroke-width: 2.6px; paint-order: stroke; stroke-linejoin: round; text-anchor: middle; font-variant-numeric: tabular-nums; }
.bd-nh.mot-dong .bd-so { display: none; }

/* Hoàng Sa, Trường Sa: khung nét đứt, cờ nhỏ */
.bd-dao { cursor: pointer; }
.bd-dao--that rect { fill: transparent; stroke: var(--ink-3); stroke-width: 1px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; pointer-events: all; }
.bd-dao:hover rect, .bd-dao:focus-visible rect, .bd-dao.dang-chon rect { stroke: var(--ink); stroke-dasharray: none; }
.bd-dao:focus-visible { outline: none; }
.bd-dao--that .bd-thuoc { font: 500 8.5px var(--f-body); fill: var(--ink-2); pointer-events: none; }
.bd-dao--that .bd-thuoc--phu { font-size: 8px; fill: var(--ink-3); }
.bd-co { filter: drop-shadow(0 .6px .6px rgba(60, 14, 12, .45)); }
.bd-co-cot { stroke: var(--ink); stroke-width: 1px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }

/* nút phóng, thu, cả nước */
.bd-zoom { position: absolute; right: 8px; top: 8px; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.bd-zoom[hidden] { display: none; }
.bd-zoom button { font: 600 var(--md)/1 var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); min-width: 32px; height: 32px; padding: 0 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(60, 20, 15, .15); }
.bd-zoom button:hover:not(:disabled) { border-color: var(--brand); color: var(--link); }
.bd-zoom button:disabled { opacity: .4; cursor: default; }
.bd-zoom .bd-zoom__ca-nuoc { font: 600 var(--xxs)/1 var(--f-body); height: 28px; }

/* nền trống đồng Đông Sơn rất mờ sau bản đồ, ở vùng biển Đông */
.bd-ban-do::before { content: ""; position: absolute; z-index: -1; width: 112%; aspect-ratio: 1; left: 22%; top: 50%; transform: translateY(-50%); pointer-events: none;
  background: var(--trong); opacity: .11; -webkit-mask: url(/tinh/trong_dong.png) center / contain no-repeat; mask: url(/tinh/trong_dong.png) center / contain no-repeat; }
@media (max-width: 1099px) { .bd-ban-do::before { width: 140%; left: 10%; } }

/* chú thích: vùng (bấm để lọc và phóng) và thang đậm nhạt */
.bd-chu-thich { margin-top: var(--s2); }
.bd-vung-ds { display: flex; flex-wrap: wrap; gap: 2px var(--s2); list-style: none; margin: 0 0 var(--s2); padding: 0; }
.bd-vung-nut { display: inline-flex; align-items: center; gap: 5px; font: 500 var(--xxs)/1.4 var(--f-body); color: var(--ink-2); background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: 1px 6px; cursor: pointer; }
.bd-vung-nut:hover { background: var(--surface); color: var(--ink); }
.bd-vung-nut[aria-pressed="true"] { background: var(--surface); border-color: var(--brand); color: var(--ink); font-weight: 600; }
.bd-vung-nut .dem { margin-left: 0; }
.bd-thang { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3); list-style: none; margin: 0; padding: 0; font-size: var(--xxs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bd-thang__td { color: var(--ink-3); }
.bd-mau { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--f); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.bd-goi-y-phong { margin: 2px 0 0; font-size: var(--xxs); color: var(--ink-3); }
.bd-nguon-bd { margin: 4px 0 0; font-size: var(--xxs); color: var(--ink-3); line-height: 1.4; }

/* danh sách tỉnh thay cho bản đồ */
.bd-ds-tinh { display: none; }
.bd-trai[data-hien="ds"] .bd-ds-tinh, .bd-trai:not([data-hien]) .bd-ds-tinh { display: block; }
.bd-trai[data-hien="ds"] .bd-ban-do, .bd-trai[data-hien="ds"] .bd-chu-thich { display: none; }
.bd-ds-tinh__lop { columns: 220px; column-gap: var(--s4); margin-top: var(--s2); }
.bd-ds-tinh section { break-inside: avoid; margin-bottom: var(--s3); }
.bd-ds-tinh h2 { font-size: var(--sm); margin: 0 0 4px; color: var(--ink-2); font-family: var(--f-body); font-weight: 600; }
.bd-ds-tinh ul { list-style: none; margin: 0; padding: 0; font-size: var(--sm); }
.bd-ds-tinh li { padding: 1px 0; }
.bd-ds-tinh a.dang-chon { font-weight: 700; text-decoration-thickness: 2px; }
.bd-ds-tinh .phu { font-size: var(--xxs); color: var(--ink-3); }

/* bộ lọc */
.bd-loc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s2) var(--s3); display: grid; gap: var(--s2); }
.bd-loc__hang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.bd-o-tim { position: relative; flex: 1 1 240px; min-width: 200px; display: flex; align-items: center; }
.bd-o-tim .bieu-tuong { position: absolute; left: 9px; color: var(--ink-3); pointer-events: none; }
.bd-o-tim input { width: 100%; font: inherit; font-size: var(--sm); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 6px 10px 6px 32px; }
.bd-o-tim input::placeholder { color: var(--ink-3); }
.bd-chon { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--xs); color: var(--ink-3); }
.bd-chon select { font: inherit; font-size: var(--sm); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 5px 8px; max-width: 220px; }
.bd-chon--nho select { max-width: 110px; }
.bd-tich { display: inline-flex; align-items: center; gap: 6px; font-size: var(--xs); color: var(--ink-2); cursor: pointer; }
.bd-tich input { accent-color: var(--brand); }
.bd-loai { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bd-loc__td { font-size: var(--xs); color: var(--ink-3); margin-right: 2px; }
.bd-nut--loai { border-radius: var(--r-sm); padding: 3px 9px; }
.bd-nut--loai .dem { color: inherit; opacity: .75; }

.bd-dai { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-height: 32px; padding: 4px 2px; font-size: var(--sm); color: var(--ink-2); }
.bd-dai [data-dem] { font-variant-numeric: tabular-nums; }
.bd-dai [data-dem] strong { color: var(--ink); }
.bd-dai__tinh { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); background: color-mix(in srgb, var(--link) 12%, transparent); border-radius: var(--r-sm); padding: 2px var(--s2); }
.bd-dai__tinh[hidden], .bd-bo-loc[hidden], .bd-them[hidden] { display: none; }
.bd-dai__tinh b { color: var(--ink); font-weight: 600; }
.bd-dai__tinh button { font: inherit; font-size: var(--xxs); background: var(--surface); color: var(--link); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0 6px; cursor: pointer; }
.bd-dai__tinh button:hover { background: var(--surface-2); }
.bd-bo-loc { margin-left: auto; font: 500 var(--xs) var(--f-body); color: var(--link); background: none; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 3px var(--s3); cursor: pointer; }
.bd-bo-loc:hover { background: var(--surface); }

/* bảng danh sách: ngăn cuộn riêng, tiêu đề dính */
.bd-bang-khung { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.bd-bang { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--xs); line-height: 1.35; }
.bd-bang thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font: 600 var(--xxs)/1.4 var(--f-body); color: var(--ink-2); text-align: left; padding: 0; border-bottom: 1px solid var(--rule); }
.bd-bang thead th > button { display: block; width: 100%; text-align: inherit; font: inherit; color: inherit; background: none; border: 0; padding: 6px var(--s2); cursor: pointer; }
.bd-bang thead th:not(.c-nl) > button:hover { color: var(--link); }
.bd-bang thead th.c-nl { padding: 6px var(--s2); }
.bd-bang th[aria-sort] > button::after { content: " ↑"; color: var(--link); }
.bd-bang th[aria-sort="descending"] > button::after { content: " ↓"; }
.bd-bang td { padding: 4px var(--s2); border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.bd-bang tbody tr:hover > td, .bd-bang tbody tr:focus-within > td { background: var(--surface-2); }
.bd-bang .c-ten { width: 23%; } .bd-bang .c-loai { width: 9%; } .bd-bang .c-tinh { width: 15%; } .bd-bang .c-nl { width: 28%; }
.bd-bang .c-md { width: 8%; white-space: nowrap; } .bd-bang .c-kcal { width: 11%; text-align: right; } .bd-bang .c-vach { width: 6%; padding-right: var(--s3); }
.bd-bang td.c-ten a { font-weight: 500; }
.bd-bang .c-vach { padding-top: 10px; }
.bd-bang td.c-loai, .bd-bang td.c-md, .bd-bang td.c-nl { color: var(--ink-2); }
.bd-bang .phu { color: var(--ink-3); font-size: var(--xxs); }
.bd-bang .kcal small { font-size: var(--xxs); color: var(--ink-3); margin-left: 1px; }
.bd-bang .vach { max-width: 48px; }
.bd-trong { padding: var(--s5) var(--s4) !important; white-space: normal !important; color: var(--ink-3); }
.bd-trong button { font: 500 var(--xs) var(--f-body); color: var(--link); background: none; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 3px var(--s3); cursor: pointer; margin-left: var(--s2); }
.bd-them { display: block; margin: var(--s2) auto; }
.bd-ghi { font-size: var(--xxs); color: var(--ink-3); margin: var(--s2) 0 0; line-height: 1.45; }

/* màn máy tính: bản đồ bên trái dính, cao vừa màn hình; danh sách bên phải cuộn theo trang (không có khung cuộn lồng) */
@media (min-width: 1100px) {
  .bd-lv { grid-template-columns: minmax(520px, 40vw) minmax(0, 1fr); align-items: start; padding-bottom: var(--s5); }
  .bd-trai { position: sticky; top: var(--cao-dinh); display: flex; flex-direction: column; max-height: calc(100vh - var(--cao-dinh)); overflow-y: auto; overflow-x: hidden; }
  .bd-ban-do { flex: 0 0 auto; height: calc(100vh - var(--cao-dinh) - 262px); min-height: 380px; }
  .bd-bang-khung { max-height: none; overflow: visible; }
  .bd-bang thead th { top: var(--cao-dinh); }
}
@media (min-width: 1100px) and (max-width: 1500px) { .bd-lv { grid-template-columns: minmax(480px, 40vw) minmax(0, 1fr); } }
@media (max-width: 1099px) {
  .bd-ban-do { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 533 / 606; }
}
@media (max-width: 720px) {
  .bd-bang .c-nl, .bd-bang .c-md, .bd-bang .c-vach { display: none; }
  .bd-bang .c-ten { width: 36%; } .bd-bang .c-loai { width: 16%; } .bd-bang .c-tinh { width: 28%; } .bd-bang .c-kcal { width: 20%; }
  .bd-ds-tinh__lop { columns: 150px; } .bd-ds-tinh .phu { display: block; }
}
@media (prefers-reduced-motion: reduce) { .bd-o use { transition: none; } }

/* ---------- ô nổi dùng chung cho hàng danh sách và ô bản đồ (bám gần con trỏ, không che con trỏ) */
.bd-noi { position: fixed; z-index: 60; top: 0; left: 0; max-width: min(400px, 90vw); pointer-events: none; }
.bd-noi.hien { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.bd-noi__bang { width: 100%; border-collapse: collapse; margin: var(--s1) 0 var(--s2); font-variant-numeric: tabular-nums; }
.bd-noi__bang td { padding: 1px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.bd-noi__bang td:last-child { text-align: right; padding-left: var(--s3); }
.bd-noi__ten-tieu-bieu { color: var(--ink-2); }
.bd-thanh { display: inline-block; height: 6px; border-radius: 2px; background: var(--brand); margin-right: 6px; vertical-align: 1px; }

/* ---------- trang tỉnh, trang mục đặc sản */
.bd-the { display: flex; gap: var(--s4); align-items: center; }
.bd-the__ban-do { flex: 0 0 190px; }
.bd-the__ban-do .bd-svg { height: auto; }
.bd-svg--that.bd-svg--nho .bd-o-nho { fill: var(--surface-3); stroke: var(--ground); stroke-width: .4px; }
.bd-svg--that.bd-svg--nho .bd-o-nho.bd-chon { fill: var(--brand); }
.bd-the__bang { flex: 1; border-collapse: collapse; font-size: var(--sm); }
.bd-the__bang th { text-align: left; font-weight: 400; padding: 2px 0; }
.bd-the__bang td { text-align: right; padding: 2px 0 2px var(--s4); color: var(--ink); font-weight: 500; }
.bd-the__bang tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.bd-the__bang .tong > * { font-weight: 600; border-top: 1px solid var(--rule); }
.bd-gon:not(.bd-mo) .bd-ds li:nth-child(n+9) { display: none; }
.bd-mo .ngan__them .bt { transform: rotate(180deg); }
.bd-ds { list-style: none; margin: 0; padding: 0; }
li.bd-hang { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; gap: 0 var(--s3); padding: 4px var(--s3); font-size: var(--xs); }
li.bd-hang + li.bd-hang { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
li.bd-hang:hover, li.bd-hang:focus-within { background: var(--surface-2); }
.bd-hang__ten { font-weight: 500; overflow-wrap: anywhere; }
li.bd-hang .kcal { color: var(--ink-2); white-space: nowrap; text-align: right; }
.bd-hang .kcal small { font-size: var(--xxs); color: var(--ink-3); }
li.bd-hang .vach { height: 3px; }
li.bd-hang .phu { grid-column: 1 / -1; font-size: var(--xxs); color: var(--ink-3); line-height: 1.35; overflow-wrap: anywhere; }
.bd-trong-ngan { padding: var(--s3); margin: 0; font-size: var(--xs); color: var(--ink-2); }
.bd-luu-y { margin-top: var(--s1); }
.dong-tom.bd-luu-y { display: block; }
.bd-nguon-chu .manh { display: block; }
.bd-nguon-chu .manh + .manh::before { content: none; }
.bd-url { color: var(--ink-3); font-size: var(--xxs); overflow-wrap: anywhere; }
/* nền trống đồng sau đầu trang tỉnh, trang mục */
.bd-trang .dau-muc { position: relative; isolation: isolate; }
.bd-trang .dau-muc::before { content: ""; position: absolute; z-index: -1; width: 460px; aspect-ratio: 1; right: -90px; top: -150px; pointer-events: none;
  background: var(--trong); opacity: .09; -webkit-mask: url(/tinh/trong_dong.png) center / contain no-repeat; mask: url(/tinh/trong_dong.png) center / contain no-repeat; }

/* biểu tượng */
.bd-hang__ten .bt-ds, .bd-bang td.c-ten .bt-ds { width: 15px; height: 15px; margin-right: 5px; color: var(--ink-3); vertical-align: -.22em; }
.bd-trai h1, .bd-trang .dau-muc h1 { display: flex; align-items: center; gap: var(--s2); }
.bd-trai h1 .bt, .bd-trang .dau-muc h1 .bt { width: .9em; height: .9em; margin: 0; color: var(--brand); }
.bd-o-tim .bd-o-tim__bt { position: absolute; left: 9px; width: 16px; height: 16px; margin: 0; color: var(--ink-3); pointer-events: none; }
.bd-loc__td .bt { width: 14px; height: 14px; margin-right: 3px; }
.bd-nut--loai .bt { width: 14px; height: 14px; margin-right: 3px; }
.bd-vung-nut .bt { width: 13px; height: 13px; margin: 0; color: var(--brand); }
.bd-the__bang th .bt { width: 14px; height: 14px; color: var(--ink-3); }
.tab-khoi .bt { width: 14px; height: 14px; }

/* ---------- món phổ biến theo miền (không chỉ đặc sản tỉnh) */
.bd-mien { margin: 0 0 var(--s4); padding: 12px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.bd-mien h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--md); margin: 0 0 10px; }
.bd-mien h2 small { font: 400 var(--xs) var(--f-body); color: var(--ink-3); }
.bd-mien__luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .bd-mien__luoi { grid-template-columns: 1fr; } }
.bd-mien__o { border-top: 3px solid var(--c); padding-top: 6px; }
.bd-mien__o--bac { --c: #B23A2A; } .bd-mien__o--trung { --c: #C9961A; } .bd-mien__o--nam { --c: #3E9B47; }
.bd-mien__o h3 { margin: 0 0 6px; font-size: var(--sm); color: var(--c); }
.bd-mien__o ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.bd-mien__o a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--rule)); border-radius: 99px; font-size: var(--xs); color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.bd-mien__o a:hover { border-color: var(--c); color: var(--c); }
.bd-mien__o a .dem { font-size: var(--xxs); color: var(--ink-3); }
.bd-mien__nguon { margin: 8px 0 0; font-size: var(--xxs); color: var(--ink-3); }
.bd-mien--gon { margin-top: var(--s4); }

/* nguồn bản đồ: chữ nhỏ + nút ?, chi tiết hiện khi rê chuột hoặc bấm */
.bd-hoi { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: var(--xxs); color: var(--ink-3); cursor: help; }
.bd-hoi > b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); font: 700 10px var(--f-body); color: var(--ink-2); }
.bd-hoi:hover > b, .bd-hoi:focus > b { border-color: var(--brand); color: var(--brand); }
.bd-hoi__the { display: none; position: absolute; z-index: 40; bottom: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 64px)); padding: 9px 11px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--r-md); box-shadow: 0 10px 26px rgba(0,0,0,.16); font-size: var(--xs); line-height: 1.5; cursor: auto; }
.bd-hoi:hover .bd-hoi__the, .bd-hoi:focus .bd-hoi__the, .bd-hoi:focus-within .bd-hoi__the { display: block; }

/* món ăn vùng miền: hai phần "Món quen thuộc" và "Đặc sản vùng" chia theo loại */
.bd-mien__td { margin: 10px 0 4px; font: 600 var(--xs) var(--f-body); color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.bd-mien__o h3 + .bd-mien__td { margin-top: 0; }
.bd-mien__nhom { margin: 2px 0 6px; }
.bd-mien__nhom > summary { cursor: pointer; font: 600 var(--sm) var(--f-body); color: var(--ink-2); padding: 2px 0; }
.bd-mien__nhom > ul { margin-top: 4px; }
.bd-mien__them { flex-basis: 100%; }
.bd-mien__them summary { cursor: pointer; font-size: var(--xs); color: var(--link); }
.bd-mien__them ul { margin-top: 4px; }
.bd-mien-duoi .bd-mien { margin: var(--s4) 0 0; }

/* ---------- chuyển động nhẹ (thêm 13/11) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bd-mo-dan { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* tỉnh và khung đảo: đổi màu, viền, độ sáng êm hơn khi rê chuột */
  .bd-o use { transition: fill var(--dong-tg) var(--dong-em), stroke var(--dong-tg) var(--dong-em), filter var(--dong-tg) var(--dong-em), opacity var(--dong-tg) var(--dong-em); }
  .bd-dao--that rect { transition: stroke var(--dong-tg) var(--dong-em); }

  /* nút, chip, bộ lọc: đổi nền, viền, chữ êm; ấn xuống nhẹ */
  .bd-vung-nut, .bd-nut, .bd-nut--loai, .bd-bo-loc, .bd-dai__tinh button, .bd-zoom button, .bd-mien__o a {
    transition: background-color var(--dong-nhanh) var(--dong-em), border-color var(--dong-nhanh) var(--dong-em), color var(--dong-nhanh) var(--dong-em), transform var(--dong-nhanh) var(--dong-em);
  }
  .bd-vung-nut:active, .bd-nut:active, .bd-nut--loai:active, .bd-bo-loc:active, .bd-dai__tinh button:active, .bd-zoom button:active:not(:disabled), .bd-mien__o a:active {
    transform: scale(.97);
  }

  /* hàng bảng và danh sách: chỉ đổi nền khi rê chuột */
  .bd-bang tbody tr > td { transition: background-color var(--dong-nhanh) var(--dong-em); }
  li.bd-hang { transition: background-color var(--dong-nhanh) var(--dong-em); }

  /* món theo miền: nội dung mở ra thì hiện dần */
  .bd-mien details[open] > :not(summary) { animation: bd-mo-dan var(--dong-tg) var(--dong-em); }
}

/* có logo tỉnh (tinh/logo_tinh/): thay trống đồng sau đầu trang tỉnh, trang đặc sản */
.bd-trang .dau-muc--logo::before { -webkit-mask: none; mask: none; background: var(--logo-tinh) center / contain no-repeat;
  opacity: .13; filter: grayscale(.35); width: 380px; right: -40px; top: -110px; }
@media (prefers-color-scheme: dark) { .bd-trang .dau-muc--logo::before { opacity: .1; } }
.logo-tinh-nguon { margin: 2px 0 0; font-size: var(--xxs); color: var(--ink-3); }

/* logo tỉnh in chìm sau ô nổi của bản đồ */
.bd-noi__chim { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bd-noi__chim img { position: absolute; right: -36px; top: 50%; width: 230px; height: 230px; object-fit: contain;
  transform: translateY(-50%); opacity: .12; filter: grayscale(.3); }
@media (prefers-color-scheme: dark) { .bd-noi__chim img { opacity: .1; } }
/* logo tỉnh: nằm chìm ở giữa trang bên phải (cố định theo màn hình), không đè ô số liệu đầu trang — 14/11 */
.bd-trang .dau-muc--logo::before { position: fixed; top: 55%; right: 3vw; width: min(440px, 34vw); transform: translateY(-50%); }
@media (max-width: 1100px) { .bd-trang .dau-muc--logo::before { display: none; } }