/* Đơn Sàn 4.0 — bộ giao diện "Quốc lộ" (từ 29/10/2026, thay bộ "Atlas bưu chính").
   Hình ảnh lấy từ đường bộ Việt Nam: mặt đường nhựa có vạch kẻ đứt, cột cây số đỏ trắng, bó vỉa sơn đỏ trắng, biển chỉ dẫn viền đậm.
   Màu: đen nhựa đường + đỏ cột mốc + trắng; xanh lá chỉ dành cho "đã giao". Không dùng xanh lam (Atlas) hay xanh than/bạc hà (TraCuuDon).
   Chữ: Barlow Semi Condensed 700 (tiêu đề, nhãn, nút; tự host 1 tệp) + phông hệ thống cho thân và mã.
   @font-face nằm trong <head> của base.html để trỏ đúng tên tệp đã băm, trùng URL với thẻ preload. */
:root {
  --paper: #f4f2ed; --surface: #ffffff; --ink: #17181b; --muted: #5a5c62; --line: #c8c4ba; --line-soft: #e4e1da;
  --frame: #232529; --road: #232529; --road-ink: #f3f1ec; --road-muted: #bdbab3; --lane: #f3f1ec; --road-off: #d9d5cc;
  --signal: #b3141a; --signal-bg: #c4161c; --signal-soft: #fbe6e5; --kerb: #f3f1ec;
  --ok: #0c6b3c; --ok-bg: #0c6b3c; --ok-soft: #e1f0e7; --move-bg: #232529; --idle: #5f6167; --idle-soft: #ecebe6;
  --l1: #ffffff; --l2: #e6e1d6; --l3: #cbc3b2; --l4: #232529; --l4-ink: #ffffff; --post-edge: #232529;
  --focus: #b3141a;
  --f-display: "Barlow SC", "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-code: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --r: 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --paper: #111214; --surface: #1b1c20; --ink: #edebe6; --muted: #a8a6a0; --line: #3b3c41; --line-soft: #2a2b30;
  --frame: #5a5d64; --road: #1f2125; --road-ink: #f3f1ec; --road-muted: #b0aea8; --lane: #e6e3dc; --road-off: #3a3c41;
  --signal: #ff6b70; --signal-bg: #c4161c; --signal-soft: #3a1c1d; --kerb: #d9d6cf;
  --ok: #63cf95; --ok-bg: #0c6b3c; --ok-soft: #173025; --move-bg: #474a51; --idle: #a3a5ab; --idle-soft: #2a2b30;
  --l1: #1f2024; --l2: #2f3136; --l3: #474a50; --l4: #e8e5dd; --l4-ink: #17181b; --post-edge: #6b6e75;
  --focus: #ff8a8e; color-scheme: dark; } }

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }  /* lớp đặt display (.stack, .row) không được đè thuộc tính hidden (bẫy đã gặp ở TraCuuDon) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--f-body); min-height: 100vh; display: flex; flex-direction: column }
a { color: var(--ink); text-decoration-color: var(--signal-bg); text-decoration-thickness: 2px; text-underline-offset: 3px }
img { max-width: 100%; height: auto }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.15 }
h1 { font: 700 clamp(2rem, 1.35rem + 2.9vw, 3.1rem)/1.04 var(--f-display); letter-spacing: -.005em }
h2 { font: 700 1.6rem/1.12 var(--f-display) }
h3, .h3 { font: 650 1.05rem/1.3 var(--f-body) }
p { margin: 0 }
code, .code { font-family: var(--f-code) }
td code { overflow-wrap: anywhere }
.code { font-weight: 650; letter-spacing: .02em; overflow-wrap: anywhere }
.num { font-variant-numeric: tabular-nums }
.eyebrow { font: 700 .84rem/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.muted { color: var(--muted) }
.small { font-size: .88rem }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: -999px; top: 0 }
.skip:focus { left: 16px; top: 8px; z-index: 20; background: var(--surface); color: var(--ink); padding: 8px 12px }
.stack { display: flex; flex-direction: column; gap: var(--s5) }
.stack.tight { gap: var(--s2) }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center }
.row.between { justify-content: space-between }
.lead { color: var(--muted); max-width: 64ch; font-size: 1.05rem }
.hint { font-size: .92rem; color: var(--muted) }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* Mặt đường: thanh trên, dải tiêu đề trang, chân trang. Vạch kẻ đứt giữa thanh trên và dải tiêu đề, bó vỉa đỏ trắng ở mép dải. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--road) }
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--road); color: var(--road-ink);
  background-image: repeating-linear-gradient(90deg, var(--lane) 0 26px, transparent 26px 48px); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat }
header.top .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 62px }
.brand { display: flex; align-items: center; gap: var(--s2); color: var(--road-ink); text-decoration: none; font: 700 1.35rem/1 var(--f-display); letter-spacing: .01em; min-height: 44px }
nav.main { margin-left: auto; display: flex; gap: var(--s1) }
nav.main a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); color: var(--road-ink); text-decoration: none; font: 700 1rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase }
nav.main a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--signal-bg) }
@media (hover: hover) { nav.main a:hover { background: rgb(255 255 255 / .08) } }
header.top :focus-visible, .band :focus-visible, footer.site :focus-visible, nav.main :focus-visible { outline-color: var(--road-ink) }
@media (max-width: 640px), (max-height: 500px) and (max-width: 940px) {
  nav.main { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; margin: 0; justify-content: space-around; background: var(--road); border-top: 3px solid var(--signal-bg);
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)) }
  nav.main a { flex: 1; justify-content: center; min-height: 52px; font-size: .95rem }
  nav.main a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--lane) }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) }
}
@media (max-height: 500px) {
  header.top { position: relative }  /* không dính, nhưng vẫn là khung cho dây đèn mùa Noel */
  /* Điện thoại nằm ngang: thanh tra mã phải nằm trọn trên hộp đồng ý và thanh tab ở màn đầu. */
  .band-in { padding-block: var(--s3) var(--s4) }
}
main { outline: none; flex: 1 0 auto }
.band { background: var(--road); color: var(--road-ink) }
.band::after { content: ""; display: block; height: 10px; background: repeating-linear-gradient(90deg, var(--signal-bg) 0 36px, var(--kerb) 36px 72px) }
.band-in { padding-block: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s3) }
.band .lead, .band .hint { color: var(--road-muted) }
.hero-name { font-size: .95rem; margin: 0 }
.band .eyebrow { color: var(--road-ink); justify-self: start; align-self: flex-start; border: 2px solid var(--road-ink); border-radius: var(--r); padding: .3rem .55rem .25rem }
.band a { color: var(--road-ink) }
.band .muted { color: var(--road-muted) }
.crumbs { font-size: .9rem; color: var(--road-muted); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2) }
.crumbs a { color: var(--road-muted) }
.page { padding-block: var(--s6) var(--s7); display: flex; flex-direction: column; gap: var(--s6) }

.split { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr) }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start } .split.wide-left { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) } }

/* Trang chủ: tiêu đề và thanh tra mã nằm ngay trên mặt đường */
.hero { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; max-width: 780px }
.band-in { position: relative }
.hero-post { display: none }
@media (min-width: 1080px) {
  /* Cột cây số lớn bên phải dải tiêu đề: chỉ để trang trí (aria-hidden), mũ đỏ ghi tên, thân ghi số tỉnh thành. */
  .hero-post { display: grid; grid-template-rows: 44% auto 1fr; position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: var(--s6);
    width: 150px; height: 196px; background: #fff; border: 4px solid #fff; border-radius: 75px 75px 8px 8px; overflow: hidden; box-shadow: 0 10px 0 -4px rgb(0 0 0 / .35); text-align: center; color: #17181b }
  .hero-post b { display: grid; place-items: center; padding-top: 10px; background: var(--signal-bg); color: #fff; font: 700 1.05rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase }
  .hero-post span { font: 700 2.6rem/1.05 var(--f-display); padding-top: 6px }
  .hero-post small { font: 700 .78rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #5a5c62 }
}
/* Dải hãng tra được: thẻ trắng có logo chuẩn của hãng + tên (chủ sở hữu 31/10: biển chữ "VNP", "NTL", "VXR" khó nhận). Nền trắng để
   logo nền trong suốt (GHN, BEST, VNPost, VeXeRe) đọc được trên mặt đường tối. */
.plates { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.plates li { display: inline-flex; align-items: center; gap: 6px; height: 2rem; padding: 0 .6rem 0 .25rem; background: #fff; border-radius: 6px; color: #17181b;
  font: 700 .8rem/1 var(--f-display); letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgb(23 24 27 / .12) }
.plates li img { flex: none; width: 24px; height: 24px; border-radius: 5px; object-fit: contain }
/* Logo cạnh tên hãng: đầu thẻ kết quả, cột "Hãng" của bảng nhiều đơn, bảng số điểm theo hãng, danh bạ bưu cục. */
.hang, .eyebrow.carrier { display: inline-flex; align-items: center; gap: .45rem }
.hang img, .eyebrow.carrier img { flex: none; border-radius: 5px; object-fit: contain }
.eyebrow.carrier { display: flex }

/* Thanh tra mã: một tấm biển số xe. Mép trắng ngoài, vạch đen trong; bên trái nhãn có cột cây số, giữa là mã chữ đều đậm,
   bên phải nút đỏ gắn liền. Cao một dòng, tự giãn khi dán nhiều mã (site.js). Màu cố định trắng/đen/đỏ ở cả chế độ tối (biển phản quang). */
.tracker { width: 100%; display: grid; gap: var(--s2) }
.plate-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; background: #fff; border: 3px solid #fff; border-radius: 8px; padding: 2px; box-shadow: inset 0 0 0 2px #17181b }
.plate-bar:focus-within { box-shadow: inset 0 0 0 3px var(--signal-bg); outline: 3px solid var(--road-ink); outline-offset: 3px }
.plate-tag { display: flex; align-items: center; gap: .5rem; padding: 0 .85rem 0 .55rem; background: #232529; color: #f3f1ec; border-radius: 3px 0 0 3px; font: 700 .86rem/1.05 var(--f-display); letter-spacing: .07em; text-transform: uppercase; cursor: text; white-space: nowrap }
.plate-tag img { flex: none }
.plate-bar textarea { display: block; width: 100%; min-height: 3.35rem; margin: 0; padding: .78rem .9rem; border: 0; background: transparent; color: #17181b; resize: none; overflow-y: auto; max-height: 13.5rem;
  font: 700 1.18rem/1.45 var(--f-code); letter-spacing: .06em; text-transform: uppercase }
.plate-bar textarea::placeholder { color: #8a8b90; opacity: 1 }
.plate-bar textarea:focus { outline: none }
.plate-go { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: 0 1.15rem 0 1.3rem; border: 0; border-radius: 0 3px 3px 0; background: var(--signal-bg); color: #fff;
  font: 700 1.05rem/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase; cursor: pointer }
.plate-go::after { content: "→" / ""; font-size: 1.25rem; line-height: 1 }
.plate-go:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff }
.plate-go[disabled] { opacity: .65; cursor: progress }
@media (hover: hover) { .plate-go:hover { filter: brightness(1.12) } }
/* Điện thoại: bỏ hẳn ô nhãn "Mã vận đơn" khỏi mắt (chủ sở hữu 29/10: "tốn diện tích thừa"; bản cũ ô nhãn chiếm 70 px, chữ gãy 3 dòng),
   ô nhập lấy trọn bề ngang. Nhãn vẫn còn cho trình đọc màn hình (ẩn kiểu .sr), ô nhập vẫn có tên "Mã vận đơn". */
@media (max-width: 560px) {
  .plate-bar { position: relative; grid-template-columns: minmax(0, 1fr) auto }
  .plate-tag { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .plate-bar textarea { font-size: 1.05rem; letter-spacing: .04em; padding-inline: .8rem }
  .plate-go { grid-column: 1 / -1; border-radius: 0 0 3px 3px }
}
.tracker .hint { color: var(--road-muted); font-size: .88rem }
/* Nút trong biển: Dán (đọc bộ nhớ tạm) khi ô trống, Xoá khi ô đã có chữ — như ô tra của bản cũ. */
.plate-act { display: grid; place-items: center; width: 52px; min-height: 52px; padding: 0; border: 0; border-left: 2px solid #e2dfd8; background: #fff; color: #17181b; cursor: pointer }
.plate-act:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--signal-bg) }
@media (hover: hover) { .plate-act:hover { background: #f1efe9 } }
.tracker-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline }
.multi-toggle { flex: none; min-height: 32px; padding: 0; border: 0; background: none; color: var(--road-ink); cursor: pointer;
  font: 700 .9rem/1.2 var(--f-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--signal-bg); text-decoration-thickness: 2px; text-underline-offset: 4px }
.multi-toggle[aria-pressed="true"] { text-decoration-color: var(--road-ink) }
.multi-toggle[aria-pressed="true"]::before { content: "✓ " / "" }
.tracker.multi .plate-bar textarea { min-height: 9.5rem; resize: vertical }
.note { color: var(--road-ink); font-weight: 650 }
.note:empty { display: none }
.ts-box:empty { display: none }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border-radius: var(--r); border: 2px solid var(--frame); background: var(--surface); color: var(--ink); font: 700 1rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; text-decoration: none }
.btn.primary { background: var(--signal-bg); border-color: var(--signal-bg); color: #fff; padding: 0 var(--s5) }
.btn[disabled] { opacity: .6; cursor: progress }
@media (hover: hover) { .btn:hover { border-color: var(--signal-bg) } .btn.primary:hover { filter: brightness(1.1) } }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal-bg); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; font: inherit; min-height: 32px }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); border-radius: 3px; border: 2px solid var(--frame); background: var(--surface); font: 650 .92rem/1 var(--f-code); color: var(--ink); cursor: pointer }

/* Bản đồ ô lưới: mỗi tỉnh là một cột cây số, mũ đỏ ghi mã, thân tô đậm dần theo số điểm */
.atlas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; max-width: 430px }
.atlas.big { max-width: 520px }
.tile { position: relative; aspect-ratio: 1 / 1.08; max-width: 100%; min-width: 0; display: grid; grid-template-rows: 42% 1fr; overflow: hidden; text-decoration: none; color: var(--ink); background: var(--l1);
  border: 2px solid var(--post-edge); border-radius: 46% 46% 4px 4px / 30% 30% 4px 4px }
.tile b { display: grid; place-items: center; background: var(--signal-bg); color: #fff; font: 700 .8rem/1 var(--f-display); letter-spacing: .04em }
.tile span:not(.sr) { display: grid; place-items: center; font: 650 .74rem/1 var(--f-body); font-variant-numeric: tabular-nums }
.r1 { grid-row: 1 } .r2 { grid-row: 2 } .r3 { grid-row: 3 } .r4 { grid-row: 4 } .r5 { grid-row: 5 } .r6 { grid-row: 6 }
.r7 { grid-row: 7 } .r8 { grid-row: 8 } .r9 { grid-row: 9 } .r10 { grid-row: 10 } .r11 { grid-row: 11 } .r12 { grid-row: 12 }
.c1 { grid-column: 1 } .c2 { grid-column: 2 } .c3 { grid-column: 3 } .c4 { grid-column: 4 } .c5 { grid-column: 5 }
.tile[data-level="2"] { background: var(--l2) }
.tile[data-level="3"] { background: var(--l3) }
.tile[data-level="4"] { background: var(--l4); color: var(--l4-ink) }
.tile[aria-current="page"] { outline: 3px solid var(--ink); outline-offset: 2px }
@media (hover: hover) { .tile:hover { border-color: var(--signal-bg) } }
.legend { display: flex; gap: var(--s2); align-items: center; font-size: .82rem; color: var(--muted) }
.legend i { width: 14px; height: 16px; border-radius: 6px 6px 2px 2px; display: inline-block; background: var(--l1); border: 2px solid var(--post-edge) }
.legend i[data-level="2"] { background: var(--l2) } .legend i[data-level="3"] { background: var(--l3) } .legend i[data-level="4"] { background: var(--l4) }

/* Bảng: hàng tiêu đề như biển đen chữ trắng */
.table-wrap { position: relative; overflow-x: auto; border: 2px solid var(--frame); border-radius: var(--r); background: var(--surface) }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums }
caption { text-align: left; padding: .6rem .75rem }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line-soft); vertical-align: top }
thead th { font: 700 .82rem/1.2 var(--f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--road-ink); background: var(--road) }
tbody tr:last-child td { border-bottom: 0 }
td.n, th.n { text-align: right }

/* Hành trình: mặt đường dọc có vạch kẻ đứt, mỗi mốc là một nút trên đường, mốc mới nhất là cột cây số */
.journey { background: var(--surface); border: 2px solid var(--frame); border-radius: var(--r); padding: var(--s5); display: grid; gap: var(--s4) }
.j-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between }
.j-head .code { font-size: 1.2rem }
.status { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3); border-radius: 3px; font: 700 .92rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: #fff; border: 2px solid transparent }
.st-delivered { background: var(--ok-bg) }
.st-in_transit, .st-delivering { background: var(--move-bg) }
.st-action_required, .st-need_phone { background: var(--signal-bg) }
.st-cancelled, .st-unknown { background: transparent; color: var(--idle); border-color: var(--idle) }
.legs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 }
.legs li { position: relative; padding-top: 26px; padding-right: var(--s2); font-size: .82rem; color: var(--muted); min-width: 0 }
.legs li::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 12px; background: var(--road-off) }
.legs li.on { color: var(--ink); font-weight: 650 }
.legs li.on::before { background: repeating-linear-gradient(90deg, var(--lane) 0 10px, transparent 10px 18px) 0 50% / 100% 2px no-repeat, var(--road) }
.legs li.now::after { content: ""; position: absolute; top: -2px; right: 6px; width: 16px; height: 24px; border-radius: 8px 8px 2px 2px; background: linear-gradient(var(--signal-bg) 0 44%, #fff 44%); border: 2px solid var(--road) }
.g-delivered .legs li.now::after { background: linear-gradient(var(--ok-bg) 0 44%, #fff 44%) }
.legs li.warn::before { background: repeating-linear-gradient(45deg, var(--signal-bg) 0 7px, #fff 7px 14px) }
.j-facts { list-style: none; margin: 0; padding: var(--s3) var(--s4); background: var(--paper); border-left: 4px solid var(--road); display: grid; gap: 2px; font-size: .92rem }
.stations { list-style: none; margin: 0; padding: 0 }
.stations li { display: grid; grid-template-columns: 4.4rem 1fr; gap: var(--s3); padding-bottom: var(--s4) }
.stations li > time { font: 500 .85rem/1.35 var(--f-code); color: var(--muted); text-align: right }
.stations li > div { position: relative; padding-left: 2.1rem; min-width: 0 }
.stations li > div::before { content: ""; position: absolute; left: 2px; top: 0; bottom: calc(-1 * var(--s4)); width: 14px;
  background: repeating-linear-gradient(180deg, var(--lane) 0 7px, transparent 7px 13px) 50% 0 / 2px 100% no-repeat, var(--road) }
.stations li:last-child > div::before { bottom: auto; height: 18px }
.stations li > div::after { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--road) }
.stations li.now > div::after { left: -1px; top: -6px; width: 20px; height: 30px; border-radius: 10px 10px 3px 3px; background: linear-gradient(var(--signal-bg) 0 44%, #fff 44%); border: 2px solid var(--road) }
.g-delivered .stations li.now > div::after { background: linear-gradient(var(--ok-bg) 0 44%, #fff 44%) }
.stations li.now strong { font-size: 1.08rem }
.stations.stopped li > div::before { background-color: var(--idle) }
.stations.stopped li.now > div::after { background: repeating-linear-gradient(45deg, var(--signal-bg) 0 4px, #fff 4px 8px) }
.stations p { color: var(--muted); font-size: .92rem; overflow-wrap: anywhere }
.callout { border-left: 5px solid var(--road); background: var(--idle-soft); padding: var(--s3) var(--s4); border-radius: 0 var(--r) var(--r) 0 }
.callout.warn { border-color: var(--signal-bg); background: var(--signal-soft) }
.phone-ask { display: grid; gap: var(--s2) }
.phone-ask label { font-weight: 650 }
.phone-ask input { width: 11rem; min-height: 44px; font: 650 1rem var(--f-code); padding: 0 var(--s3); border: 2px solid var(--frame); border-radius: var(--r); background: var(--paper); color: var(--ink) }
.spx-loc { font-size: .95rem; border-left: 4px solid var(--signal-bg); padding-left: var(--s3) }
.board .code { font-size: .95rem }
.board-detail > td { background: var(--paper); padding: var(--s3) }
@media (max-width: 1023px) {
  .board thead { display: none }
  .board, .board tbody, .board tr, .board td { display: block; width: 100% }
  .board tr { border-bottom: 2px solid var(--line); padding: var(--s3) var(--s4) }
  .board td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s2) }
  .board td::before { content: attr(data-label); color: var(--muted); font-size: .85rem }
  .board tr.board-detail { padding: 0 }
  .board .board-detail > td { display: block }
  .board .board-detail > td::before { content: none }
}

/* Danh sách điểm: hãng ghi trên một tấm biển số */
.points { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--frame) }
.points li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft) }
.points li[hidden] { display: none }
.plate { display: block; width: 2.25rem; height: 2.25rem; padding: 2px; border: 1px solid var(--line-soft); border-radius: 7px; background: #fff; object-fit: contain; align-self: start; margin-top: 2px }
.pt { min-width: 0; display: grid; gap: 2px }
.pt-name { font: 650 1rem/1.35 var(--f-body) }
.facts { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: .92rem; color: var(--muted); overflow-wrap: anywhere }
.facts .tag { color: var(--signal); font-weight: 650 }
.filter { display: grid; gap: 4px; max-width: 30rem }
.filter label { font: 700 1rem/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase }
.filter input { min-height: 44px; font: 400 1rem var(--f-body); padding: 0 var(--s3); border: 2px solid var(--frame); border-radius: var(--r); background: var(--surface); color: var(--ink) }
.carrier-block { padding-top: var(--s2) }
.prov-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s2) var(--s5) }
.prov-list li { display: flex; flex-wrap: wrap; gap: 0 var(--s2); align-items: baseline; padding: var(--s1) 0; border-bottom: 1px solid var(--line-soft) }
/* Biển chỉ dẫn: khung trắng viền đậm, mũi tên chỉ hướng */
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s3) }
.guide-list a { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: var(--s3); row-gap: 2px; height: 100%; padding: var(--s3) 2.6rem var(--s3) var(--s4); background: var(--surface); border: 2px solid var(--frame); border-radius: var(--r); text-decoration: none; color: var(--ink) }
.guide-list a::after { content: "→"; position: absolute; right: var(--s3); top: 50%; translate: 0 -50%; font: 700 1.3rem/1 var(--f-display); color: var(--signal) }
.guide-list a img { grid-row: span 2; border-radius: 8px; object-fit: contain }
.guide-list a strong { font: 700 1.12rem/1.2 var(--f-display); letter-spacing: .01em }
.guide-list a span { color: var(--muted); font-size: .9rem }
@media (hover: hover) { .guide-list a:hover { border-color: var(--signal-bg) } }

/* Chi tiết: bảng thông tin như một tấm biển */
dl.kv { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; background: var(--surface); border: 2px solid var(--frame); border-radius: var(--r); padding: var(--s4) }
dl.kv dt { color: var(--muted) }
dl.kv dd { margin: 0; overflow-wrap: anywhere }

/* Bài viết */
.prose { max-width: 70ch; display: grid; gap: var(--s4); font-size: 1.05rem }
.prose section { display: grid; gap: var(--s3) }
.prose h2 { margin-top: var(--s3) }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0; display: grid; gap: var(--s2) }
.prose .points { padding-left: 0 }
.prose a { text-decoration-thickness: 2px }
.cover { margin: 0 }
.cover img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--line-soft); border: 2px solid var(--frame) }
.cover figcaption { font-size: .85rem; color: var(--muted) }
.faq { border-bottom: 1px solid var(--line-soft); padding: var(--s3) 0 }
.faq summary { cursor: pointer; font-weight: 650; min-height: 32px }
.faq p { margin-top: var(--s2); color: var(--muted) }
.related ul { list-style: none; padding: 0 }
.steps li::marker { font: 700 1rem var(--f-display); color: var(--signal) }

footer.site { background: var(--road); color: var(--road-muted); font-size: .9rem }
footer.site::before { content: ""; display: block; height: 10px; background: repeating-linear-gradient(90deg, var(--signal-bg) 0 36px, var(--kerb) 36px 72px) }
footer.site .wrap { display: grid; gap: var(--s2); padding-block: var(--s5) var(--s6) }
.foot-brand { font: 700 1.2rem var(--f-display); color: var(--road-ink); letter-spacing: .01em }
footer.site .muted { color: var(--road-muted) }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s4) }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--road-ink) }
.foot-mail a { color: var(--road-ink) }
@media (hover: none) {
  input, textarea, select { font-size: max(16px, 1rem) }
  /* Vùng chạm ≥ 44 px cho liên kết đứng riêng trên máy cảm ứng (lỗi G-8); liên kết nằm trong câu chữ giữ nguyên. */
  .multi-toggle { min-height: 44px }
  .crumbs a, .prov-list a, .row.between a, .foot-links a, .related a, .pt-name a, td a, .skip, .band-links a, .prose > p > a:only-child, .cover figcaption a { display: inline-flex; align-items: center; min-height: 44px }
}
.skip { min-height: 44px; display: inline-flex; align-items: center }
@media (prefers-reduced-motion: no-preference) { .journey, .board-wrap { animation: rise .25s ease-out } }
@keyframes rise { from { transform: translateY(6px) } to { transform: none } }

/* ---------- Mùa Giáng sinh 2026 (body.season-noel, bật/tắt bằng tệp ~/DON_SAN/data/v4-season, xem season.py) ----------
   Tĩnh (luôn có khi bật mùa): bầu trời đêm cực quang + trăng sao trên dải quốc lộ, bó vỉa kẹo gậy, dây đèn thông dưới thanh trên,
   biển tra mã phủ tuyết + nhánh ô rô, quả châu thuỷ tinh 3D đếm ngày + giờ:phút:giây tới Noel 2026, cây thông 34 tỉnh thành kèm ông già
   Noel & người tuyết cầm đèn bão. Động (khi noel.js gắn html.fx-on): cực quang trôi nhẹ, sao & đèn nhấp nháy, tuần lộc phi nước đại kéo xe,
   tuyết + bụi sao vàng rơi đa tầng, bấm rung cây nổ pháo sao & lời chúc Noel 2026. */
.season-noel .band::after, .season-noel footer.site::before { background: repeating-linear-gradient(-45deg, var(--signal-bg) 0 9px, #fff 9px 18px) }
.season-noel .band { position: relative; overflow: hidden; background-color: #181c24;
  background-image: radial-gradient(ellipse 80% 55% at 22% 0%, rgb(25 148 92 / .2), transparent 70%),
    radial-gradient(ellipse 65% 50% at 82% 8%, rgb(196 22 28 / .18), transparent 72%),
    linear-gradient(180deg, #131720 0%, #1b2029 58%, #232529 100%) }
.season-noel .band-in { z-index: 1 }
.noel-sky { position: absolute; inset: 0 0 10px; pointer-events: none; z-index: 0; overflow: hidden }
/* Mép trên cực quang neo bằng px: đặt theo % chiều cao dải thì khi ô mã tự giãn (trang ?code=) cả dải cực quang dịch xuống, Lighthouse
   tính là xô lệch bố cục (CLS 0,034 → 0,069). Chỉ đổi kích thước ở mép dưới thì không tính. */
.noel-aurora { position: absolute; inset: -72px -12% 28%; opacity: .85;
  background: radial-gradient(ellipse 52% 42% at 26% 32%, rgb(46 213 132 / .24), transparent 70%),
    radial-gradient(ellipse 46% 38% at 64% 24%, rgb(96 198 255 / .18), transparent 72%),
    radial-gradient(ellipse 40% 34% at 82% 38%, rgb(255 196 92 / .14), transparent 72%) }
.noel-stars { position: absolute; inset: 0; opacity: .72;
  background-image:
    radial-gradient(1.5px 1.5px at 42px 18px, #fff 90%, transparent),
    radial-gradient(1.2px 1.2px at 118px 36px, #ffe6a3 90%, transparent),
    radial-gradient(1.6px 1.6px at 206px 14px, #bfe8ff 90%, transparent),
    radial-gradient(1.1px 1.1px at 284px 42px, #fff 90%, transparent),
    radial-gradient(1.5px 1.5px at 356px 22px, #ffe6a3 90%, transparent),
    radial-gradient(1.2px 1.2px at 438px 34px, #fff 90%, transparent);
  background-size: 480px 68px; background-repeat: repeat-x }
/* Trăng đứng bên trái chỗ xe trượt đỗ (tắt hiệu ứng / giảm chuyển động / chưa có JS xe đỗ góc phải làn trời, rộng 184 hoặc 244 px):
   bản đầu đặt trăng ở góc phải nên con tuần lộc đầu đè lên trăng. Một chỗ duy nhất, không đổi theo html.fx-on (đổi chỗ khi bật hiệu ứng
   là một lần xô lệch bố cục). */
.noel-moon { position: absolute; top: 14px; right: calc(max(16px, env(safe-area-inset-right, 0px)) + 204px); width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset -10px 3px 0 0 #fff4cf, 0 0 22px rgb(255 236 179 / .38); opacity: .92 }
@media (min-width: 720px) { .noel-moon { right: max(calc(max(16px, env(safe-area-inset-right, 0px)) + 266px), calc(50% - 340px)); top: 16px } }
@media (max-height: 500px) { .noel-moon { display: none } }
.season-noel .snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 }
.snow-page { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30 }
.season-noel .band::before { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 6px; z-index: 0; pointer-events: none;
  background: radial-gradient(10px 6px at 50% 100%, #fff 96%, transparent) 0 100% / 20px 6px repeat-x; transition: opacity .4s ease }
.fx-on .season-noel .band::before { opacity: 0 }
.season-noel header.top { background-image: none; box-shadow: 0 2px 12px rgb(0 0 0 / .28) }
.season-noel header.top::before, .season-noel header.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 18px; pointer-events: none }
.season-noel header.top::before {
  background: radial-gradient(circle at 12px 11px, #fff 0 1.2px, #ff5252 1.8px 4px, transparent 5.2px) 0 0 / 96px 18px repeat-x,
    radial-gradient(circle at 60px 11px, #fff 0 1.2px, #ffd15c 1.8px 4px, transparent 5.2px) 0 0 / 96px 18px repeat-x,
    linear-gradient(#2d5a39, #1d3d26) 0 4px / 100% 2px no-repeat;
  filter: drop-shadow(0 0 4px rgb(255 210 130 / .8)) }
.season-noel header.top::after {
  background: radial-gradient(circle at 36px 11px, #fff 0 1.2px, #3ee084 1.8px 4px, transparent 5.2px) 0 0 / 96px 18px repeat-x,
    radial-gradient(circle at 84px 11px, #fff 0 1.2px, #9fd8ff 1.8px 4px, transparent 5.2px) 0 0 / 96px 18px repeat-x;
  filter: drop-shadow(0 0 4px rgb(165 228 255 / .8)) }
@media (prefers-reduced-motion: no-preference) {
  .fx-on .season-noel header.top::before { animation: twinkle 1.7s ease-in-out infinite alternate; will-change: opacity }
  .fx-on .season-noel header.top::after { animation: twinkle 1.7s ease-in-out infinite alternate-reverse; will-change: opacity }
  .fx-on .noel-aurora { animation: aurora 11s ease-in-out infinite alternate }
  .fx-on .noel-stars { animation: stars 2.8s ease-in-out infinite alternate }
}
@keyframes twinkle { 0%, 35% { opacity: 1 } 100% { opacity: .22 } }
@keyframes aurora { from { transform: translate3d(-2%, 0, 0) scale(1) } to { transform: translate3d(2.5%, 3%, 0) scale(1.05) } }
@keyframes stars { from { opacity: .5 } to { opacity: .95 } }
/* Biển tên mùa Noel 2026 + thanh biển số phủ tuyết và nhánh ô rô ở trang chủ. */
.season-noel .hero-name { background: rgb(255 255 255 / .06); border-color: rgb(255 220 138 / .72); box-shadow: 0 0 18px rgb(255 201 74 / .14) }
.season-noel .hero-name::after { content: " · NOEL 2026" / ""; color: #ffd97d }
.season-noel .plate-bar { position: relative; margin-top: 8px; box-shadow: inset 0 0 0 2px #17181b, 0 8px 24px rgb(0 0 0 / .34) }
.season-noel .plate-bar::before { content: ""; position: absolute; left: 10px; right: 10px; top: -10px; height: 11px; pointer-events: none;
  background: var(--nl-drift) 0 0 / 120px 11px repeat-x }
.season-noel .plate-bar::after { content: ""; position: absolute; left: -6px; top: -14px; width: 40px; height: 26px; pointer-events: none;
  background: var(--nl-holly) center / contain no-repeat }
.season-noel .plate-bar:focus-within { outline-color: #ffd97d; box-shadow: inset 0 0 0 3px var(--signal-bg), 0 0 22px rgb(255 210 90 / .28) }
.season-noel .plate-go { background: linear-gradient(180deg, #d82228 0%, #b31218 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .28) }
.season-noel .plates li { box-shadow: inset 0 0 0 1px rgb(23 24 27 / .12), 0 0 0 2px rgb(255 217 125 / .35) }
/* Chủ sở hữu 29/10: cột mốc bo tròn đầu + mũ đỏ + tuyết phủ trông như BIA MỘ, không hợp (và kiêng) mùa Noel. Trong mùa Noel bỏ hẳn
   dáng cột mốc: 34 tỉnh thành là quả châu tròn (móc vàng, ánh bóng) treo trên cây thông xanh 3 tầng, cột đếm ngày là quả châu đỏ lớn.
   Màu quả châu đậm dần theo số điểm (kem → vàng → đỏ cam → đỏ rượu vang); chữ đặt màu cố định để đủ tương phản ở cả chế độ sáng/tối. */
.season-noel { --l1: #fff3d6; --l2: #ffd166; --l3: #d2461c; --l4: #8c1424; --l4-ink: #fff }
.season-noel .legend i { border-radius: 50%; width: 14px; height: 14px }
/* Cây thông Noel vẽ bằng SVG (mẫu trang _macros.html xmas_svg, toạ độ ở donsan4/web/xmas.py): tán 3 tầng mép răng cưa có tuyết, dây
   kim tuyến võng, đèn 4 màu, ngôi sao có tia sáng, gốc cây + hộp quà + người tuyết cầm đèn bão. 34 quả châu là liên kết thật. */
.xmas { position: relative; width: 100%; max-width: 470px; margin-inline: auto; aspect-ratio: 500 / 815; overflow-x: clip; cursor: pointer }
.xmas.big { max-width: 560px }
.xmas-tree { position: relative; display: block; width: 100%; height: 100%; overflow: visible }
.xt-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3 }
.xt-pine { position: absolute; left: 0; top: 2.454%; width: 100%; height: 90.798%; opacity: 0; transition: opacity .8s ease; transform-origin: 50% 100% }
.xt-tiers { transition: opacity .8s ease }
.pine-on .xt-pine { opacity: 1 }
.pine-on .xt-tiers { opacity: 0 }
.xt-o { cursor: pointer }
.xt-o:focus-visible { outline: none }
.xt-o text { text-anchor: middle; fill: #17181b; pointer-events: none }
.xt-o.lv3 text, .xt-o.lv4 text { fill: #fff }
.xt-code { font: 700 12px/1 var(--f-display); letter-spacing: .02em }
.xt-n { font: 600 9.5px/1 var(--f-body); font-variant-numeric: tabular-nums }
.xt-o .ring { fill: none; stroke: transparent; stroke-width: 4; transition: stroke .16s ease }
.xt-o:focus-visible .ring { stroke: #fff; filter: drop-shadow(0 0 5px rgb(255 255 255 / .9)) }
.xt-o[aria-current="page"] .ring { stroke: #ffd25a; stroke-dasharray: 7 5 }
.xt-o:focus-visible[aria-current="page"] .ring { stroke: #fff; stroke-dasharray: none }
@media (hover: hover) { .xt-o:hover .ring { stroke: #ffe08a; filter: drop-shadow(0 0 6px rgb(255 214 102 / .85)) } }
.xt-rays { transform-box: view-box; transform-origin: 250px 34px }
.xt-star { transform-box: fill-box; transform-origin: center }
.xt-sp { transform-box: fill-box; transform-origin: center; opacity: .75 }
.xt-snowman { transform-box: fill-box; transform-origin: 50% 100% }
.xt-lantern { transform-box: fill-box; transform-origin: 35% 15% }
/* Ông già Noel rung cây (chu kỳ 7 s hoặc khi người xem bấm Rung cây / chạm cây): cả tán + quả châu lắc tắt dần quanh gốc, tay nắm cành
   giật theo, tuyết rơi khỏi chóp cành, bóng chữ "Ho ho ho!". Tay kia vẫy liên tục. Tắt hiệu ứng / giảm chuyển động: đứng yên. */
.xt-sway { transform-box: view-box; transform-origin: 250px 760px }
.xt-wave { transform-box: fill-box; transform-origin: 100% 100% }
.xt-grab { transform-box: fill-box; transform-origin: 0% 100% }
.xt-hoho { transform-box: fill-box; transform-origin: 0% 100%; opacity: 0 }
.xt-fall { opacity: 0; --dx: 6px; --dy: 88px }
.xt-fall.f1 { --dx: -8px; --dy: 70px } .xt-fall.f2 { --dx: 10px; --dy: 104px } .xt-fall.f3 { --dx: -4px; --dy: 80px }
.xt-fall.f4 { --dx: 12px; --dy: 64px } .xt-fall.f5 { --dx: -12px; --dy: 96px }
.xt-o .hit { fill: transparent }
@media (max-width: 520px) { .xmas { width: calc(100% + 32px); max-width: none; margin-inline: -16px } }
.xt-fence { fill: #f7f4ee; stroke: #b9b09c; stroke-width: 1 }
.xmas-bar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; padding: var(--s2) var(--s3);
  background: var(--surface); border: 2px solid var(--frame); border-radius: var(--r); box-shadow: 0 3px 10px rgb(0 0 0 / .06) }
.xmas-btn { background: var(--signal-bg); border-color: var(--signal-bg); color: #fff; min-height: 44px; padding: 0 var(--s3); font-size: .92rem }
.xmas-btn::before { content: "🎄 " / "" }
@media (hover: hover) { .xmas-btn:hover { filter: brightness(1.1) } }
.xmas-tip { font-size: .9rem; font-weight: 600; color: var(--ink); flex: 1 1 13rem }
/* Xe trượt ông già Noel (mẫu _sleigh.html) có làn trời riêng ở đầu dải tiêu đề nên không bao giờ bay qua chữ. */
.season-noel .band-in { padding-top: calc(var(--s5) + 46px) }
.sleigh { position: absolute; top: 6px; right: max(16px, env(safe-area-inset-right, 0px)); z-index: 0; width: 184px; height: auto; pointer-events: none;
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / .45)) }
@media (min-width: 720px) { .season-noel .band-in { padding-top: calc(var(--s5) + 58px) } .sleigh { width: 244px } }
@media (max-height: 500px) { .season-noel .band-in { padding-top: var(--s3) } .sleigh { display: none } }
/* Quả châu thuỷ tinh 3D đếm ngày + đồng hồ giờ:phút:giây tới Noel 2026. */
.season-noel .hero-post { grid-template-rows: auto auto auto auto; align-content: center; justify-items: center; gap: 1px;
  width: 176px; height: 176px; border: 2px solid rgb(255 224 140 / .55); border-radius: 50%; overflow: visible; color: #fff;
  transform-origin: 50% -14px;
  background: radial-gradient(circle at 30% 24%, rgb(255 255 255 / .62) 0 7%, rgb(255 215 170 / .22) 16%, transparent 32%),
    radial-gradient(circle at 68% 76%, rgb(90 4 12 / .65), transparent 52%),
    radial-gradient(circle at 46% 42%, #e0242b 0%, #b81118 64%, #7a0910 100%);
  box-shadow: inset -8px -10px 16px rgb(0 0 0 / .28), inset 3px 3px 10px rgb(255 230 180 / .25), 0 10px 28px rgb(0 0 0 / .42), 0 0 30px rgb(255 76 76 / .34) }
.season-noel .hero-post::before { content: ""; position: absolute; top: -12px; left: 50%; width: 30px; height: 14px; translate: -50% 0; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(90deg, #9a7014, #ffe082 45%, #c4921e 80%, #87600e); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .25) }
.season-noel .hero-post::after { content: ""; position: absolute; top: -22px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%;
  border: 2.5px solid #f0c75e; pointer-events: none }
.season-noel .hero-post b { background: none; padding: 0; font-size: .96rem; text-shadow: 0 1px 2px rgb(0 0 0 / .35) }
.season-noel .hero-post span { padding: 0; font-size: 2.85rem; line-height: .98; text-shadow: 0 2px 6px rgb(0 0 0 / .35) }
.season-noel .hero-post small { color: #fff6dc }
.noel-hms { font: 700 .74rem/1.1 var(--f-code); font-style: normal; letter-spacing: .05em; color: #fff4c2; background: rgb(0 0 0 / .32);
  padding: 3px 8px; border-radius: 99px; margin-top: 3px; font-variant-numeric: tabular-nums }
.noel-hms:empty, .noel-hms-inline:empty { display: none }
.noel-hms-inline { font: 700 .88rem/1 var(--f-code); font-style: normal; color: #ffd97d; font-variant-numeric: tabular-nums }
.sl-leg-f, .sl-leg-b { transform-box: fill-box; transform-origin: 50% 0% }
@media (prefers-reduced-motion: no-preference) {
  .fx-on .xt-l { animation: bulb 1.4s ease-in-out infinite alternate }
  .fx-on .xt-l:nth-child(3n+1) { animation-duration: 1.1s }
  .fx-on .xt-l:nth-child(3n+2) { animation-delay: -.6s; animation-duration: 1.7s }
  .fx-on .xt-l:nth-child(5n) { animation-delay: -1.1s }
  .fx-on .xt-sp { animation: sp-twinkle 1.8s ease-in-out infinite alternate }
  .fx-on .xt-sp.s1 { animation-delay: -.7s; animation-duration: 2.3s }
  .fx-on .xt-sp.s2 { animation-delay: -1.3s; animation-duration: 1.5s }
  .fx-on .xt-rays { animation: rays 24s linear infinite }
  .fx-on .xt-star { animation: star 2.4s ease-in-out infinite alternate }
  .fx-on .xt-sway, .fx-on .xt-pine { animation: xt-shake 7s ease-in-out 2s infinite }
  .fx-on .xt-grab { animation: xt-grab 7s ease-in-out 2s infinite }
  .fx-on .xt-wave { animation: xt-wave .8s ease-in-out infinite alternate }
  .fx-on .xt-snowman { animation: sm-bob 2.6s ease-in-out infinite alternate }
  .fx-on .xt-lantern { animation: lantern 1.9s ease-in-out infinite alternate }
  .fx-on .xt-fall { animation: xt-fall 7s ease-in 2s infinite }
  .fx-on .xt-fall.f1 { animation-delay: 2.12s } .fx-on .xt-fall.f2 { animation-delay: 2.24s } .fx-on .xt-fall.f3 { animation-delay: 2.36s }
  .fx-on .xt-fall.f4 { animation-delay: 2.08s } .fx-on .xt-fall.f5 { animation-delay: 2.2s }
  .fx-on .xt-hoho { animation: xt-hoho 7s ease-out 2s infinite }
  .xmas-burst .xt-sway, .xmas-burst .xt-pine { animation: xt-burst-shake 1.35s ease-out 1 }
  .xmas-burst .xt-grab { animation: xt-burst-grab 1.35s ease-out 1 }
  .xmas-burst .xt-hoho { animation: xt-burst-hoho 1.55s ease-out 1 }
  .xmas-burst .xt-fall { animation: xt-burst-fall 1.45s ease-in 1 }
  .fx-on .season-noel .hero-post { animation: bauble-sway 4.2s ease-in-out infinite alternate }
  .fx-on .sleigh { left: 0; right: auto; transform: translate(-110%, 8px); animation: sleigh 28s linear .8s infinite }
  .fx-on .sl-bob { animation: bob .95s ease-in-out infinite alternate }
  .fx-on .sl-leg-f { animation: deer-f .48s ease-in-out infinite alternate }
  .fx-on .sl-leg-b { animation: deer-b .48s ease-in-out infinite alternate }
  .fx-on .sl-nose { animation: bulb 0.85s ease-in-out infinite alternate }
  .fx-on .sl-trail { animation: bulb 0.65s ease-in-out infinite alternate }
}
@keyframes sleigh { 0% { transform: translate(-110%, 10px) } 18% { transform: translate(26vw, 1px) } 38% { transform: translate(66vw, 7px) } 58% { transform: translate(calc(100vw + 60px), -3px) } 100% { transform: translate(calc(100vw + 60px), -3px) } }
@keyframes bob { from { translate: 0 0 } to { translate: 0 3.5px } }
@keyframes deer-f { from { rotate: -14deg } to { rotate: 16deg } }
@keyframes deer-b { from { rotate: 15deg } to { rotate: -14deg } }
@keyframes bauble-sway { from { rotate: -1.8deg } to { rotate: 1.8deg } }
@keyframes sm-bob { from { rotate: -1.2deg } to { rotate: 1.4deg } }
@keyframes lantern { from { rotate: -5deg; opacity: .88 } to { rotate: 5deg; opacity: 1 } }
@keyframes sp-twinkle { from { opacity: .2; scale: .65 } to { opacity: 1; scale: 1.18 } }
@keyframes bulb { 0%, 30% { opacity: 1 } 100% { opacity: .2 } }
@keyframes rays { to { rotate: 360deg } }
@keyframes xt-shake { 0%, 2% { rotate: 0deg } 4% { rotate: -1.3deg } 7% { rotate: 1.1deg } 10% { rotate: -.75deg } 13% { rotate: .45deg } 16% { rotate: -.2deg } 19%, 100% { rotate: 0deg } }
@keyframes xt-grab { 0%, 2% { rotate: 0deg } 4% { rotate: 7deg } 7% { rotate: -6deg } 10% { rotate: 4deg } 13% { rotate: -2.5deg } 16% { rotate: 1deg } 19%, 100% { rotate: 0deg } }
@keyframes xt-wave { from { rotate: -20deg } to { rotate: 16deg } }
@keyframes xt-fall { 0%, 3% { opacity: 0; translate: 0 0 } 5% { opacity: 1 } 24% { opacity: .9 } 32%, 100% { opacity: 0; translate: var(--dx) var(--dy) } }
@keyframes xt-hoho { 0%, 3% { opacity: 0; scale: .5 } 6% { opacity: 1; scale: 1.08 } 8% { scale: 1 } 24% { opacity: 1; scale: 1 } 28%, 100% { opacity: 0; scale: 1 } }
@keyframes xt-burst-shake { 0% { rotate: 0deg } 14% { rotate: -2.1deg } 32% { rotate: 1.8deg } 50% { rotate: -1.2deg } 68% { rotate: .75deg } 84% { rotate: -.35deg } 100% { rotate: 0deg } }
@keyframes xt-burst-grab { 0% { rotate: 0deg } 15% { rotate: 10deg } 35% { rotate: -8deg } 58% { rotate: 5deg } 80% { rotate: -2deg } 100% { rotate: 0deg } }
@keyframes xt-burst-hoho { 0% { opacity: 0; scale: .5 } 14% { opacity: 1; scale: 1.12 } 26%, 78% { opacity: 1; scale: 1 } 100% { opacity: 0; scale: .96 } }
@keyframes xt-burst-fall { 0% { opacity: 0; translate: 0 0 } 10% { opacity: 1 } 75% { opacity: .9 } 100% { opacity: 0; translate: var(--dx) var(--dy) } }
@keyframes star { from { scale: 1 } to { scale: 1.12 } }
.noel-line { color: var(--road-ink); font: 700 .95rem/1.2 var(--f-display); letter-spacing: .05em; text-transform: uppercase }
@media (min-width: 1080px) { .noel-line { display: none } }
.fx-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: var(--s2); padding: 0; border: 2px solid transparent; border-radius: 50%; background: transparent; color: var(--road-ink); cursor: pointer }
.fx-toggle[aria-pressed="true"] { color: #9fd8ff; border-color: rgb(159 216 255 / .55); box-shadow: 0 0 12px rgb(159 216 255 / .25) }
.fx-toggle:focus-visible { outline: 3px solid var(--road-ink); outline-offset: 2px }
@media (hover: hover) { .fx-toggle:hover { background: rgb(255 255 255 / .08) } }
@media (max-width: 640px), (max-height: 500px) and (max-width: 940px) { .fx-toggle { margin-left: auto } }

/* Thẻ kết quả tra trong mùa Noel (chủ sở hữu 30/10: "ui tra cứu chưa cập nhật noel"). Đơn hàng là một món quà đang được chở tới:
   tuyết đọng trên mép thẻ + nhánh ô rô ở góc, mũ ông già Noel trên nhãn trạng thái; thanh 4 chặng thành dây kim tuyến xanh có đèn,
   xe trượt chở quà đỗ ở chặng hiện tại (đã giao: hộp quà xanh ở chặng Hoàn tất); hành trình dọc là dây kim tuyến treo quả châu, mốc
   mới nhất là hộp quà (xanh = đã giao, đỏ = đang đi, xám = đã huỷ). Chỉ dùng ::before/::after nên không vào cây truy cập; chữ, màu
   nhãn trạng thái và vạch rào chắn "cần xử lý" giữ nguyên. Ảnh SVG là biến --nl-* trong khối noel-svg (donsan4/web/noel_art.py). */
.season-noel { --nl-track: #e3eaf1; --nl-rope: #24583a; --nl-rope-hi: #3b8552; --nl-rope-lo: #163a25 }
@media (prefers-color-scheme: dark) { .season-noel { --nl-track: #29313b } }
.season-noel .journey { position: relative; margin-top: 10px; box-shadow: 0 8px 22px rgb(23 24 27 / .08) }
.season-noel .board-detail > td { padding: 26px 18px 16px }
.season-noel .j-head { gap: 16px var(--s4) }
/* Tuyết đọng NẰM TRÊN viền trên (đáy dải tuyết trùng mép ngoài viền): tuyết trắng trên nền giấy sáng chỉ thấy nhờ nét viền xám xanh,
   nên không được che viền thẻ. */
.season-noel .journey::before { content: ""; position: absolute; left: 12px; right: 12px; top: -17px; height: 15px; pointer-events: none;
  background: var(--nl-drift) 0 0 / 150px 15px repeat-x; filter: drop-shadow(0 -1px 1px rgb(23 24 27 / .12)) }
.season-noel .journey::after { content: ""; position: absolute; left: -12px; top: -16px; width: 50px; height: 33px; pointer-events: none;
  background: var(--nl-holly) center / contain no-repeat }
.season-noel .j-head .status { position: relative }
.season-noel .j-head .status::before { content: ""; position: absolute; left: -13px; top: -14px; width: 30px; height: 22px; rotate: -16deg;
  pointer-events: none; background: var(--nl-hat) center / contain no-repeat }
.season-noel .legs { margin-top: var(--s2) }  /* chừa chỗ cho xe trượt nhô lên trên thanh chặng, không chạm dòng mã ở trên */
.season-noel .legs li::before { background: linear-gradient(rgb(255 255 255 / .5), transparent 70%), var(--nl-track) }
.season-noel .legs li:first-child::before { border-radius: 6px 0 0 6px }
.season-noel .legs li:last-child::before { border-radius: 0 6px 6px 0 }
.season-noel .legs li.on::before { background:
    radial-gradient(circle at 9px 6px, #ff5252 0 2.4px, rgb(255 82 82 / .35) 3.2px, transparent 4.6px) 0 0 / 54px 12px repeat-x,
    radial-gradient(circle at 27px 6px, #ffd166 0 2.4px, rgb(255 209 102 / .35) 3.2px, transparent 4.6px) 0 0 / 54px 12px repeat-x,
    radial-gradient(circle at 45px 6px, #9fd8ff 0 2.4px, rgb(159 216 255 / .35) 3.2px, transparent 4.6px) 0 0 / 54px 12px repeat-x,
    repeating-linear-gradient(60deg, rgb(255 255 255 / .13) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(-60deg, rgb(0 0 0 / .22) 0 1.5px, transparent 1.5px 4px),
    linear-gradient(var(--nl-rope-hi), var(--nl-rope) 55%, var(--nl-rope-lo)) }
.season-noel .legs li.warn::before { background: repeating-linear-gradient(45deg, var(--signal-bg) 0 7px, #fff 7px 14px) }
.season-noel .legs li.now::after { top: -17px; right: -8px; width: 50px; height: 30px; border: 0; border-radius: 0;
  background: var(--nl-sleigh) center / contain no-repeat; transform-origin: 50% 100% }
.season-noel .g-delivered .legs li.now::after { top: -17px; right: 0; width: 28px; height: 30px; background-image: var(--nl-gift-green) }
.season-noel .stations li { --bl: #ff7a7a; --bd: #a3121a }
.season-noel .stations li:nth-child(4n+2) { --bl: #ffe9a3; --bd: #b07a12 }
.season-noel .stations li:nth-child(4n+3) { --bl: #cfeeff; --bd: #1f5f99 }
.season-noel .stations li:nth-child(4n) { --bl: #ffffff; --bd: #7d8a9c }
.season-noel .stations li > div::before { background:
    radial-gradient(circle at 7px 10px, #ff5252 0 2.3px, rgb(255 82 82 / .3) 3.2px, transparent 4.4px) 0 0 / 14px 60px repeat-y,
    radial-gradient(circle at 7px 30px, #ffd166 0 2.3px, rgb(255 209 102 / .3) 3.2px, transparent 4.4px) 0 0 / 14px 60px repeat-y,
    radial-gradient(circle at 7px 50px, #9fd8ff 0 2.3px, rgb(159 216 255 / .3) 3.2px, transparent 4.4px) 0 0 / 14px 60px repeat-y,
    repeating-linear-gradient(30deg, rgb(255 255 255 / .13) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(-30deg, rgb(0 0 0 / .22) 0 1.5px, transparent 1.5px 4px),
    linear-gradient(90deg, var(--nl-rope-lo), var(--nl-rope) 35%, var(--nl-rope-hi) 55%, var(--nl-rope) 80%, var(--nl-rope-lo)) }
.season-noel .stations li:last-child > div::before { border-radius: 0 0 7px 7px }
.season-noel .stations li > div::after { top: -1px; left: 0; width: 18px; height: 22px; border: 0; border-radius: 0;
  background: radial-gradient(circle at 6px 11px, rgb(255 255 255 / .9) 0 1.5px, transparent 3px),
    linear-gradient(#f3d27a, #b8862a) 50% 0 / 6px 5px no-repeat,
    radial-gradient(circle 8.6px at 9px 13.2px, var(--bl) 0, var(--bd) 7.6px, rgb(0 0 0 / .35) 8.4px, transparent 8.8px);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25)) }
.season-noel .stations li.now > div::after { left: -5px; top: -11px; width: 28px; height: 30px; filter: none;
  background: var(--nl-gift-red) center / contain no-repeat; transform-origin: 50% 100% }
.season-noel .g-delivered .stations li.now > div::after { background-image: var(--nl-gift-green) }
.season-noel .stations.stopped li.now > div::after { background-image: var(--nl-gift-gray) }
.season-noel .stations.stopped li > div::before { filter: grayscale(1); opacity: .7 }
.season-noel .board thead th { padding-bottom: .95rem; background:
    radial-gradient(circle at 8px calc(100% - 5px), #ff5252 0 2.3px, transparent 3.2px) 0 0 / 48px 100% repeat-x,
    radial-gradient(circle at 24px calc(100% - 5px), #ffd166 0 2.3px, transparent 3.2px) 0 0 / 48px 100% repeat-x,
    radial-gradient(circle at 40px calc(100% - 5px), #3ad17a 0 2.3px, transparent 3.2px) 0 0 / 48px 100% repeat-x,
    linear-gradient(#3d6b48, #3d6b48) 0 calc(100% - 9px) / 100% 1px no-repeat, var(--road) }
/* Động (chỉ khi noel.js bật fx-on và không chọn giảm chuyển động): xe trượt nhún nhẹ, hộp quà lắc mỗi 4 giây. Không cho xe "chạy vào"
   từ bên trái: kết quả dựng sẵn trong trang (?code=) có trước khi fx-on bật, xe sẽ hiện, biến mất rồi chạy lại — trông như lỗi. */
@media (prefers-reduced-motion: no-preference) {
  .fx-on .season-noel .legs li.now::after { animation: nl-bob .9s ease-in-out infinite alternate }
  .fx-on .season-noel .g-delivered .legs li.now::after, .fx-on .season-noel .stations li.now > div::after { animation: nl-wiggle 4s ease-in-out 1s infinite }
}
@keyframes nl-bob { from { translate: 0 0 } to { translate: 0 -2px } }
@keyframes nl-wiggle { 0%, 72%, 100% { rotate: 0deg } 77% { rotate: -9deg } 83% { rotate: 7deg } 89% { rotate: -4deg } 95% { rotate: 2deg } }
/* noel-svg:start (sinh bằng python -m donsan4.web.noel_art, đừng sửa tay) */
.season-noel {
  --nl-gift-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cellipse cx='12' cy='24.7' rx='10.5' ry='1.3' fill='%23000' opacity='.2'/%3E%3Crect x='3' y='11' width='18' height='13' rx='1' fill='%23c4161c'/%3E%3Crect x='14.5' y='11' width='6.5' height='13' fill='%23000' opacity='.16'/%3E%3Crect x='10.5' y='11' width='3' height='13' fill='%23f2c14e'/%3E%3Crect x='1.5' y='7.6' width='21' height='4.6' rx='1' fill='%23dc2a30'/%3E%3Crect x='1.5' y='11.2' width='21' height='1' fill='%23000' opacity='.22'/%3E%3Crect x='10.2' y='7.6' width='3.6' height='4.6' fill='%23f2c14e'/%3E%3Crect x='2.6' y='8.4' width='6.5' height='1' rx='.5' fill='%23fff' opacity='.5'/%3E%3Cpath d='M12 7.8C9.2 2.6 4.6 3.4 5.9 6.2 6.7 7.7 9.4 8 12 7.8Z' fill='%23f2c14e'/%3E%3Cpath d='M12 7.8C14.8 2.6 19.4 3.4 18.1 6.2 17.3 7.7 14.6 8 12 7.8Z' fill='%23f2c14e'/%3E%3Cpath d='M12 7.8C10 4.8 7.4 4.6 7.2 5.8' fill='none' stroke='%23b8862a' stroke-width='.8'/%3E%3Cpath d='M12 7.8C14 4.8 16.6 4.6 16.8 5.8' fill='none' stroke='%23b8862a' stroke-width='.8'/%3E%3Ccircle cx='12' cy='7.6' r='1.7' fill='%23b8862a'/%3E%3C/svg%3E");
  --nl-gift-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cellipse cx='12' cy='24.7' rx='10.5' ry='1.3' fill='%23000' opacity='.2'/%3E%3Crect x='3' y='11' width='18' height='13' rx='1' fill='%230c6b3c'/%3E%3Crect x='14.5' y='11' width='6.5' height='13' fill='%23000' opacity='.16'/%3E%3Crect x='10.5' y='11' width='3' height='13' fill='%23f2c14e'/%3E%3Crect x='1.5' y='7.6' width='21' height='4.6' rx='1' fill='%2313854b'/%3E%3Crect x='1.5' y='11.2' width='21' height='1' fill='%23000' opacity='.22'/%3E%3Crect x='10.2' y='7.6' width='3.6' height='4.6' fill='%23f2c14e'/%3E%3Crect x='2.6' y='8.4' width='6.5' height='1' rx='.5' fill='%23fff' opacity='.5'/%3E%3Cpath d='M12 7.8C9.2 2.6 4.6 3.4 5.9 6.2 6.7 7.7 9.4 8 12 7.8Z' fill='%23f2c14e'/%3E%3Cpath d='M12 7.8C14.8 2.6 19.4 3.4 18.1 6.2 17.3 7.7 14.6 8 12 7.8Z' fill='%23f2c14e'/%3E%3Cpath d='M12 7.8C10 4.8 7.4 4.6 7.2 5.8' fill='none' stroke='%23b8862a' stroke-width='.8'/%3E%3Cpath d='M12 7.8C14 4.8 16.6 4.6 16.8 5.8' fill='none' stroke='%23b8862a' stroke-width='.8'/%3E%3Ccircle cx='12' cy='7.6' r='1.7' fill='%23b8862a'/%3E%3C/svg%3E");
  --nl-gift-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cellipse cx='12' cy='24.7' rx='10.5' ry='1.3' fill='%23000' opacity='.2'/%3E%3Crect x='3' y='11' width='18' height='13' rx='1' fill='%2380838a'/%3E%3Crect x='14.5' y='11' width='6.5' height='13' fill='%23000' opacity='.16'/%3E%3Crect x='10.5' y='11' width='3' height='13' fill='%23ecebe6'/%3E%3Crect x='1.5' y='7.6' width='21' height='4.6' rx='1' fill='%23969aa1'/%3E%3Crect x='1.5' y='11.2' width='21' height='1' fill='%23000' opacity='.22'/%3E%3Crect x='10.2' y='7.6' width='3.6' height='4.6' fill='%23ecebe6'/%3E%3Crect x='2.6' y='8.4' width='6.5' height='1' rx='.5' fill='%23fff' opacity='.5'/%3E%3Cpath d='M12 7.8C9.2 2.6 4.6 3.4 5.9 6.2 6.7 7.7 9.4 8 12 7.8Z' fill='%23ecebe6'/%3E%3Cpath d='M12 7.8C14.8 2.6 19.4 3.4 18.1 6.2 17.3 7.7 14.6 8 12 7.8Z' fill='%23ecebe6'/%3E%3Cpath d='M12 7.8C10 4.8 7.4 4.6 7.2 5.8' fill='none' stroke='%23bdbab3' stroke-width='.8'/%3E%3Cpath d='M12 7.8C14 4.8 16.6 4.6 16.8 5.8' fill='none' stroke='%23bdbab3' stroke-width='.8'/%3E%3Ccircle cx='12' cy='7.6' r='1.7' fill='%23bdbab3'/%3E%3C/svg%3E");
  --nl-sleigh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Crect x='12.5' y='2.4' width='10' height='7.6' rx='.7' fill='%230c6b3c'/%3E%3Crect x='16.7' y='2.4' width='1.7' height='7.6' fill='%23f2c14e'/%3E%3Cpath d='M17.5 2.6C15.8.2 13.4.9 14.2 2.3ZM17.5 2.6C19.2.2 21.6.9 20.8 2.3Z' fill='%23f2c14e'/%3E%3Cpath d='M2.5 21H31.5C35.2 21 37.2 19 37.2 16.4 37.2 14.7 35.8 13.9 34.5 14.5' fill='none' stroke='%23d4a72c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9 21V17M25 21V17' stroke='%23d4a72c' stroke-width='1.6'/%3E%3Cpath d='M4 9.2C4 7.2 5.1 6.5 6.6 7.1L10 8.6H27C30.6 8.6 32.6 11.1 32.1 14.1L31.5 16.4C31.2 17.5 30.3 18 29.1 18H7C5.3 18 4 16.7 4 15Z' fill='%23c4161c'/%3E%3Cpath d='M20 8.6H27C30.6 8.6 32.6 11.1 32.1 14.1L31.5 16.4C31.2 17.5 30.3 18 29.1 18H24C26.5 16 27.2 11.5 20 8.6Z' fill='%23000' opacity='.18'/%3E%3Cpath d='M5.5 15.6H30.8' stroke='%23f2c14e' stroke-width='1.3'/%3E%3Cpath d='M8 10.6H25' stroke='%23fff' stroke-opacity='.4' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --nl-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M4 16C7 8 13 3.4 19 3.9 23.6 4.3 25.6 8 24.7 12.6 23.9 10 22.1 9 20 9.6 16 10.8 13.6 13.5 12.6 16Z' fill='%23d42a2a'/%3E%3Cpath d='M18.6 5C14.4 6 10.6 10 8.6 15.4' fill='none' stroke='%239c1414' stroke-width='1.1' opacity='.55'/%3E%3Crect x='2' y='14.4' width='13.6' height='5.2' rx='2.6' fill='%23fff'/%3E%3Crect x='2.6' y='17.6' width='12.4' height='1.8' rx='.9' fill='%23d7dee6'/%3E%3Ccircle cx='24.7' cy='14.3' r='3.1' fill='%23fff'/%3E%3Ccircle cx='25.5' cy='15.2' r='1.6' fill='%23d7dee6'/%3E%3C/svg%3E");
  --nl-holly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cg transform='translate(21 14) rotate(160)'%3E%3Cpath d='M0 0Q3-4 5-2.5Q7-6 10-3.6Q13-6.6 15-3.1Q18-4.6 20 0Q18 4.6 15 3.1Q13 6.6 10 3.6Q7 6 5 2.5Q3 4 0 0Z' fill='%232e7d43'/%3E%3Cpath d='M0 0H19' stroke='%231b5230' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(25 13) rotate(12)'%3E%3Cpath d='M0 0Q3-4 5-2.5Q7-6 10-3.6Q13-6.6 15-3.1Q18-4.6 20 0Q18 4.6 15 3.1Q13 6.6 10 3.6Q7 6 5 2.5Q3 4 0 0Z' fill='%233a8f50'/%3E%3Cpath d='M0 0H19' stroke='%231b5230' stroke-width='.9'/%3E%3C/g%3E%3Ccircle cx='20.5' cy='11.2' r='3.3' fill='%23c4161c'/%3E%3Ccircle cx='26.2' cy='10.4' r='3.3' fill='%23d42a2a'/%3E%3Ccircle cx='23.4' cy='15.6' r='3.3' fill='%23b3141a'/%3E%3Ccircle cx='19.6' cy='10.2' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='25.3' cy='9.4' r='1' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='22.5' cy='14.6' r='1' fill='%23fff' opacity='.8'/%3E%3C/svg%3E");
  --nl-drift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 12V8C6 4.2 12 4.8 16 7 22 2.8 32 2.2 38 6 44 4 50 4.8 54 7.4 60 4.6 70 2.8 78 6 84 4.4 92 5 96 7 102 3.8 112 3.8 120 8V12Z' fill='%23fff'/%3E%3Cpath d='M0 8C6 4.2 12 4.8 16 7 22 2.8 32 2.2 38 6 44 4 50 4.8 54 7.4 60 4.6 70 2.8 78 6 84 4.4 92 5 96 7 102 3.8 112 3.8 120 8' fill='none' stroke='%23aebfcf' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* noel-svg:end */