/* Lịch trình cưới cho người thân — "Phim cưới cuộn". Đặc tả: so-ke-hoach/nguoi-than/thiet-ke/dac-ta.md
   Trang trí = ẢNH THẬT. Code chỉ làm chữ, nút, số, đường mảnh. Chỉ animate transform + opacity. */
:root {
  --do: #511419; --do-dam: #3a0e12; --kem: #ece4d8; --nen: #fff7eb; --vang: #b58b2f; --vang-nhat: #e9dbb6;
  --toi: rgba(20, 6, 8, .66);
  --f-tieude: "Viaoda Libre", Tinos, serif;
  --f-gio: Tinos, "Times New Roman", serif;
  --f-ten: "The Nautigal", cursive;
  --f-than: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --e-ra: cubic-bezier(.22, 1, .36, 1); --e-vr: cubic-bezier(.65, 0, .35, 1); --e-nay: cubic-bezier(.3, 1.4, .6, 1);
  --vh: 1vh;
  color-scheme: only light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-snap-type: y proximity; -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.chu-to { font-size: 112%; } html.chu-to-2 { font-size: 125%; }
body { margin: 0; background: var(--do-dam); color: var(--kem); font: 400 1.1875rem/1.5 var(--f-than); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { display: block; max-width: 100%; }

/* ---------- thanh trên ---------- */
.thanh { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 56px; display: flex; align-items: center; background: var(--do);
  box-shadow: 0 1px 0 rgba(233, 219, 182, .18); transform: translateY(-100%); transition: transform .35s var(--e-ra); padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
.thanh.hien-thanh { transform: none; }
.chips { flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 6px; position: relative; height: 56px; align-items: center; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 48px; min-width: 48px; padding: 0 12px; border: 0; background: none; font: 700 1rem/1 var(--f-gio); color: var(--kem); opacity: .78; position: relative; }
.chip.chon { opacity: 1; }
.chip::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--vang); transform: scaleX(0); transition: transform .25s ease-out; }
.chip.chon::after { transform: scaleX(1); }
.nut-ba { flex: 0 0 56px; height: 56px; border: 0; background: none; color: var(--kem); font-size: 28px; line-height: 1; }
.menu { position: fixed; top: calc(60px + env(safe-area-inset-top)); right: 8px; z-index: 40; background: var(--nen); color: var(--do); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 6px; min-width: 240px; }
.menu button { display: block; width: 100%; min-height: 52px; border: 0; background: none; text-align: left; padding: 0 14px; font: 500 1.05rem var(--f-than); color: var(--do); border-radius: 8px; }
.menu button:active { background: rgba(81,20,25,.08); }
.bang-doi { position: fixed; top: calc(56px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 29; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--vang); color: var(--do); font: 700 1.05rem var(--f-than); border: 0; width: 100%; animation: truotXuong .3s var(--e-ra); }
@keyframes truotXuong { from { transform: translateY(-100%); } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 50; transform: translateX(-50%); background: var(--nen); color: var(--do); padding: 12px 20px; border-radius: 999px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: toastLen .2s var(--e-ra); }
@keyframes toastLen { from { transform: translate(-50%, 16px); opacity: 0; } }

/* ---------- cảnh ---------- */
.canh { position: relative; min-height: calc(var(--vh) * 100); min-height: 100svh; scroll-snap-align: start; overflow: hidden; isolation: isolate; }
.anh-nen { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--do-dam); }
.anh-nen img { width: 100%; height: 100%; object-fit: cover; animation: kb 16s linear infinite alternate; animation-play-state: paused; }
.dang-xem .anh-nen img { animation-play-state: running; will-change: transform; }
@keyframes kb { from { transform: scale(1) translateY(0); } to { transform: scale(1.08) translateY(-2%); } }
.anh-nen.lia img { animation-name: kbNgang; animation-duration: 14s; animation-timing-function: ease-in-out; }
@keyframes kbNgang { from { transform: scale(1.08) translateX(-4%); } to { transform: scale(1.08) translateX(0); } }
.anh-nen.lui img { animation-name: kbLui; }
@keyframes kbLui { from { transform: scale(1.12); } to { transform: scale(1); } }
.phu-toi::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,6,8,.05) 0%, rgba(20,6,8,.12) 38%, var(--toi) 62%, rgba(20,6,8,.88) 100%); }
.noi-canh { position: relative; min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: 88px 16px calc(40px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
.dau-ban { position: absolute; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); font: 400 .8125rem var(--f-than); opacity: .7; z-index: 2; }
.chu-thich-anh { position: absolute; left: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); font-size: .875rem; opacity: .7; z-index: 2; }

/* hiện dần (một lần) */
.hien { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--e-ra), transform .6s var(--e-ra); transition-delay: calc(var(--i, 0) * 120ms); }
.da-hien .hien { opacity: 1; transform: none; }
/* chữ lộ từ mặt nạ */
.mat { display: block; overflow: hidden; line-height: 1.02; padding-bottom: .04em; }
.mat > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--e-ra); transition-delay: calc(var(--i, 0) * 120ms); }
.da-hien .mat > span { transform: none; }

/* ---------- S0 mở màn ---------- */
.canh--mo { display: grid; place-items: end center; text-align: center; background: #000; }
.canh--mo .anh-nen { opacity: 0; animation: mo 1.2s ease-out forwards; }
@keyframes mo { to { opacity: 1; } }
.canh--mo .anh-nen img { animation-play-state: running; }
.mo-ten { font: 700 4rem/1.1 var(--f-ten); letter-spacing: .15em; opacity: 0; animation: tenRa 1.4s cubic-bezier(.16, 1, .3, 1) 1s forwards; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
@keyframes tenRa { to { letter-spacing: 0; opacity: 1; } }
.mo-phu { font: 400 1.375rem/1.4 var(--f-tieude); margin: 8px 0 0; opacity: 0; transform: translateY(16px); animation: len .6s var(--e-ra) 2.4s forwards; }
@keyframes len { to { opacity: 1; transform: none; } }
.mo-nut { margin: 28px auto 0; min-height: 56px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(233,219,182,.7); background: rgba(81,20,25,.55); color: var(--kem);
  font: 600 1.125rem var(--f-than); opacity: 0; animation: len .5s var(--e-ra) 3.2s forwards, nhip 2s ease-in-out 3.7s infinite; }
@keyframes nhip { 50% { transform: scale(1.04); } }

/* ---------- S1 đếm ngược ---------- */
.dem-nhan { font: 600 1rem var(--f-than); letter-spacing: .12em; text-transform: uppercase; color: var(--vang-nhat); margin: 0 0 10px; }
.dem-hang { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.dem-o { text-align: center; }
.dem-o small { display: block; margin-top: 6px; font: 600 .875rem var(--f-than); letter-spacing: .1em; text-transform: uppercase; color: var(--vang-nhat); }
.dem-hai-cham { font: 700 44px/1.18 var(--f-gio); padding-top: 4px; color: var(--vang-nhat); }
.dem-dich { margin: 14px 0 0; font: 400 1.25rem/1.4 var(--f-tieude); }
.dem-dich b { font-family: var(--f-gio); }
.chon-doan { margin-top: 26px; }
.chon-doan p { margin: 0 0 10px; font-weight: 600; }
.chon-doan .luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nut-doan { min-height: 56px; border-radius: 12px; border: 1px solid rgba(233,219,182,.55); background: rgba(58,14,18,.55); color: var(--kem); font: 600 1rem/1.25 var(--f-than); padding: 6px 10px; }
.nut-doan.chon { background: var(--kem); color: var(--do); border-color: var(--kem); }
.nut-doan.ca { grid-column: 1 / -1; }
.dang-xem-doan { margin-top: 20px; font-weight: 600; }
.dang-xem-doan button { min-height: 48px; min-width: 48px; padding: 0 8px; border: 0; background: none; color: var(--vang-nhat); text-decoration: underline; text-underline-offset: 4px; font: inherit; }

/* ô số lật */
.o-lat { --h: 66px; position: relative; display: inline-block; width: calc(var(--h) * .62); height: var(--h); margin: 0 2px; perspective: 400px; font: 700 calc(var(--h) * .82) var(--f-gio); color: var(--kem); }
.o-lat .nua { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #2c0a0d; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.o-lat .tren { top: 0; border-radius: 7px 7px 0 0; transform-origin: 50% 100%; border-bottom: 1px solid rgba(0,0,0,.45); }
.o-lat .duoi { bottom: 0; border-radius: 0 0 7px 7px; transform-origin: 50% 0; }
.o-lat b { display: block; height: var(--h); line-height: var(--h); text-align: center; font-variant-numeric: tabular-nums lining-nums; }
.o-lat .duoi b { margin-top: calc(var(--h) / -2); }
.o-lat .lap { z-index: 2; }
.o-lat.nho { --h: 40px; }

/* ---------- S2 bảng giờ ---------- */
.canh--bang .noi-canh { justify-content: center; padding-top: 80px; }
.bang-tieu { font: 400 1.75rem/1.2 var(--f-tieude); margin: 0 0 4px; }
.bang-phu { margin: 0 0 16px; opacity: .85; }
.dong-bang { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; width: 100%; min-height: 72px; padding: 10px 4px; border: 0; border-bottom: 1px solid rgba(233,219,182,.18); background: none; color: var(--kem); text-align: left;
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--e-ra), transform .5s var(--e-ra); transition-delay: calc(var(--i, 0) * 80ms); }
.da-hien .dong-bang { opacity: 1; transform: none; }
.da-hien .dong-bang.mo-khac { opacity: .5; }
.dong-bang .ngay-nho { grid-column: 1 / -1; font: 600 .95rem var(--f-than); color: var(--vang-nhat); letter-spacing: .02em; }
.gio-bang { display: inline-flex; align-items: center; }
.gio-o { display: inline-flex; flex-direction: column; align-items: flex-start; }
.gio-tien { font: 600 .8125rem var(--f-than); color: var(--vang-nhat); line-height: 1; }
.gio-bang .hai-cham { font: 700 28px var(--f-gio); margin: 0 1px; color: var(--vang-nhat); }
.gio-trong { font: 700 32px var(--f-gio); color: rgba(233,219,182,.55); letter-spacing: .05em; }
.dong-bang .viec { font-size: 1.125rem; line-height: 1.3; }
.nhan-tt { display: inline-block; margin-top: 4px; font: 700 .875rem var(--f-than); letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; }
.nhan-tt.chot { background: var(--kem); color: var(--do); }
.nhan-tt.cho { border: 1.5px dashed var(--vang); color: var(--vang-nhat); }
.canh--moc .nhan-tt.cho { color: #8a5a14; }                                   /* nền kem: chữ vàng nhạt chỉ 1,3:1 → nâu vàng 5,6:1 */
.nhan-tt.doi { background: var(--vang); color: var(--do); }

/* ---------- chương ---------- */
.so-chuong { font: 600 1rem var(--f-than); letter-spacing: .22em; text-transform: uppercase; color: var(--vang-nhat); margin: 0 0 6px; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.ngay-lon { font: 400 6rem var(--f-tieude); margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.ngay-phu { margin: 8px 0 0; font: 400 1.25rem/1.4 var(--f-tieude); }
.tieu-chuong { margin: 18px 0 0; font: 400 2rem/1.15 var(--f-tieude); }
.phu-chuong { margin: 6px 0 0; opacity: .9; }
.nhom-doan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nhom-doan span { padding: 8px 14px; border-radius: 999px; background: rgba(236,228,216,.14); border: 1px solid rgba(233,219,182,.4); font-weight: 600; }

.canh--moc { background: var(--nen); color: var(--do); }
.canh--moc .noi-canh { justify-content: flex-start; padding-top: calc(80px + env(safe-area-inset-top)); }
.tieu-moc { font: 400 1.5rem/1.2 var(--f-tieude); margin: 0 0 18px; }
.chang { position: relative; padding-left: 34px; }
.chang::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--vang); transform: scaleY(0); transform-origin: top; transition: transform 1.2s ease-out .2s; }
.da-hien .chang::before { transform: scaleY(1); }
.moc { position: relative; padding: 4px 0 22px; }
.moc .cham { position: absolute; left: -30px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--nen); border: 3px solid var(--vang); transform: scale(0); }
.da-hien .moc .cham { animation: nay .22s var(--e-nay) forwards; animation-delay: calc(var(--i, 0) * 160ms + 300ms); }
@keyframes nay { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.moc.lon .cham { background: var(--do); border-color: var(--do); }
.gio-to { font: 700 4.5rem/1 var(--f-gio); font-variant-numeric: tabular-nums lining-nums; color: var(--do); }
.gio-vua { font: 700 2.25rem/1.1 var(--f-gio); font-variant-numeric: tabular-nums lining-nums; color: var(--do); }
.gio-tien-to { font: 600 1rem var(--f-than); color: #7a4a4f; margin-right: 6px; }
.gio-cho { font: 700 2.25rem/1.1 var(--f-gio); color: #b9a9a0; letter-spacing: .04em; }
.moc .viec { margin: 6px 0 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.moc .noi { margin: 2px 0 0; color: #6a3a3f; }
.moc .phu { margin: 4px 0 0; color: #7a4a4f; font-size: 1.0625rem; }
.moc .cho-xn { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #7a4a4f; font-style: italic; font-size: 1rem; }
.moc .cho-xn .nhan-tt { font-style: normal; }
.moc-thu { display: block; width: 100%; min-height: 48px; padding: 0; border: 0; border-top: 1px dashed rgba(81,20,25,.2); background: none; text-align: left; color: #8a6a6e; font-size: 1rem; }
.nhac { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(181,139,47,.14); color: #5a2a2f; font-size: 1.0625rem; line-height: 1.45; }
.nhac + .nhac { margin-top: 6px; }

/* thẻ địa điểm / khách sạn */
.the-dd { margin-top: 12px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 6px 18px rgba(60,20,20,.12); }
.the-dd h4 { margin: 0; font: 400 1.5rem/1.2 var(--f-tieude); color: var(--do); }
.the-dd .dc { margin: 4px 0 0; color: #6a3a3f; }
.the-dd .gio-ks { margin: 10px 0 0; font: 700 1.5rem/1.3 var(--f-gio); color: var(--do); }
.the-dd .gio-ks span { font: 500 1rem var(--f-than); color: #7a4a4f; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nut, a.nut { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--do); color: var(--kem); text-decoration: none; font: 600 1.0625rem var(--f-than); flex: 1 1 auto; }
.nut.phu { background: #f1e7d8; color: var(--do); }
.nut.xam { background: #e6ddd2; color: #8a7a74; }

/* hoàng hôn Century: hoà ảnh chiều → đêm (2 bản chỉnh sẵn) */
.canh--hoang-hon .anh-nen img { position: absolute; inset: 0; }
.canh--hoang-hon .anh-nen img.dem { opacity: 0; transition: opacity 2.5s ease; }
.canh--hoang-hon.da-chay .anh-nen img.dem { opacity: 1; }
.canh--hoang-hon .gio-to { color: var(--kem); font-size: 5rem; }
.canh--hoang-hon .nhac { background: rgba(236,228,216,.16); color: var(--kem); border: 1px solid rgba(233,219,182,.3); }

/* S7 hai miền */
.canh--hai-mien { background: var(--do); }
.canh--hai-mien .anh-nen { opacity: .18; mix-blend-mode: multiply; }
.canh--hai-mien .noi-canh { justify-content: center; text-align: center; }
.mien { font: 400 2.5rem/1.1 var(--f-tieude); margin: 0; }
.mien small { display: block; font: 600 1rem var(--f-than); letter-spacing: .14em; text-transform: uppercase; color: var(--vang-nhat); margin-top: 6px; }
.duong-noi { width: 2px; height: 34vh; height: calc(var(--vh) * 34); margin: 18px auto; background: var(--vang); transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--e-ra) .3s; position: relative; }
.da-hien .duong-noi { transform: scaleY(1); }
.duong-noi span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; font: 600 1rem var(--f-than); color: var(--vang-nhat); background: var(--do); border: 1px solid rgba(233,219,182,.45); border-radius: 999px; padding: 6px 14px; }
.muoi-hai { font: 700 3rem/1.1 var(--f-ten); margin: 18px 0 0; opacity: 0; transition: opacity 1.4s ease 1.4s; }
.da-hien .muoi-hai { opacity: 1; }

/* Hành trình giả 3D (js/hanh-trinh.js): mặt đất ảnh vệ tinh nghiêng, vật thể ảnh thật. Màu nền = màu viền ảnh bản đồ (tools/tai-ve-tinh.py NEN). */
.canh--ht { background: #13242c; color: var(--kem); }
.ht-san { position: absolute; inset: 0; z-index: -2; perspective-origin: 50% 60%; }                  /* perspective đặt từ JS (PHOI) */
.ht-dat { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; will-change: transform; }
.ht-dat img, .ht-dat svg, .ht-ghim { position: absolute; left: 0; top: 0; max-width: none; }
.ht-nen { width: 100%; height: 100%; will-change: transform; }              /* lớp riêng: vẽ lại vệt vàng không phải vẽ lại ảnh vệ tinh */
.ht-vet { overflow: visible; will-change: transform; }
.ht-vet path { fill: none; stroke: #f3d27a; stroke-linecap: round; stroke-linejoin: round; }
.ht-ghim { width: 0; height: 0; transform-style: preserve-3d; }
.ht-ghim i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #f3d27a; box-shadow: 0 0 0 4px rgba(243,210,122,.3); }
.ht-nhan { position: absolute; left: 0; bottom: 0; transform-origin: 0 100%; white-space: nowrap; font: 700 15px/1.2 var(--f-than); color: #fff;
  background: rgba(20,6,8,.66); border: 1px solid rgba(233,219,182,.5); border-radius: 999px; padding: 5px 10px; }
.ht-vat, .ht-bong, .ht-nhan, .ht-ghim i { will-change: transform; }      /* giữ cỡ raster cố định: đổi zoom không bắt vẽ lại */
.ht-vat, .ht-bong { transform-origin: 50% 50%; }
.ht-nhan { transition: opacity .3s ease; }
.ht-lop-may { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }      /* trên lớp tối, dưới chữ */
.ht-may { position: absolute; top: 0; max-width: none; height: auto; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.ht-dem { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(6,10,34,.92) 0%, rgba(10,18,48,.7) 55%, rgba(6,10,34,.85) 100%); will-change: opacity; }   /* đêm 16/10 ở Đà Nẵng */
html.nhe .ht-dem { display: none; }
.ht-anh-cuoi { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.canh--ht::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,16,22,.88) 0%, rgba(10,16,22,.35) 20%, rgba(10,16,22,0) 34%, rgba(10,16,22,0) 64%, rgba(10,16,22,.8) 100%); }
.ht-phu { position: relative; z-index: 1; min-height: inherit; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  padding: calc(76px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
.ht-tieu { margin: 0; font: 600 1rem var(--f-than); letter-spacing: .12em; text-transform: uppercase; color: var(--vang-nhat); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.ht-duoi { margin-top: auto; }
.ht-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 38px; }
.ht-chip { padding: 7px 14px; border-radius: 999px; background: rgba(20,6,8,.62); border: 1px solid rgba(233,219,182,.45); font-weight: 600; font-size: 1rem; animation: chipVao .45s var(--e-nay); }
@keyframes chipVao { from { transform: translateY(10px) scale(.92); opacity: 0; } }
.ht-dong { margin: 10px 0 0; min-height: 3em; font: 400 1.5rem/1.25 var(--f-tieude); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.ht-dong.moi { animation: dongVao .5s var(--e-ra); }
@keyframes dongVao { from { transform: translateY(8px); opacity: 0; } }
.ht-dong small { display: block; margin-top: 4px; font: 400 .95rem var(--f-than); opacity: .85; }
.ht-dong b { font-family: var(--f-gio); }
.ht-tay { font: 700 2.4rem/1.1 var(--f-ten); }
.ht-lai { pointer-events: auto; align-self: flex-start; margin-top: 12px; flex: 0 0 auto; background: rgba(236,228,216,.16); border: 1px solid rgba(233,219,182,.5); }
.ht-ghi { margin: 10px 0 0; font: 400 .6875rem/1.35 var(--f-than); opacity: .6; }
.the-nhom { display: inline-block; vertical-align: .12em; margin-right: 4px; padding: 2px 9px; border-radius: 999px; font: 700 .8125rem/1.35 var(--f-than); letter-spacing: .02em; border: 1px solid currentColor; }
.the-nhom--xe { color: #8a5a14; background: rgba(181,139,47,.14); }
.the-nhom--bay { color: #1f4e79; background: rgba(31,78,121,.1); }
.canh--bang .the-nhom--xe, .phu-toi .the-nhom--xe { color: #f3d27a; background: rgba(243,210,122,.14); }
.canh--bang .the-nhom--bay, .phu-toi .the-nhom--bay { color: #a9d0f5; background: rgba(169,208,245,.12); }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.nhe .ht-may { display: none; }

/* S11 mang gì */
.canh--mang { background: var(--nen) url(../img/do-vat/giay-canva.webp); background-size: 420px; background-blend-mode: multiply; color: var(--do); }
.canh--mang .noi-canh { justify-content: flex-start; padding-top: calc(min(46vw, 260px) + 64px + env(safe-area-inset-top)); }
.mang-anh { position: absolute; right: -36px; top: calc(52px + env(safe-area-inset-top)); width: 46%; max-width: 260px; transform: rotate(8deg); pointer-events: none; z-index: -1; }
.dong-mang { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; border-bottom: 1px dotted rgba(81,20,25,.25); background: none; color: var(--do); text-align: left; font-size: 1.125rem; line-height: 1.35; }
.dong-mang i { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 2px solid var(--vang); background: transparent center / 120% no-repeat; }
.dong-mang.xong i { border-color: transparent; background-image: url(../img/do-vat/dau-sap.webp); }
.dong-mang.xong span { text-decoration: line-through; opacity: .6; }
.dong-mang.cho { font-style: italic; color: #7a4a4f; }

/* S12 gọi ai */
.canh--goi { background: var(--nen); color: var(--do); min-height: auto; }
.canh--goi .noi-canh { justify-content: flex-start; padding-top: 72px; padding-bottom: 48px; }
.the-goi { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(60,20,20,.1); }
.the-goi h4 { margin: 0 0 2px; font: 400 1.3rem var(--f-tieude); }
.the-goi p { margin: 0; color: #6a3a3f; }

/* S13 kết */
.ket-chu { font: 700 3.25rem/1.1 var(--f-ten); margin: 0; text-align: center; }
.ket-phu { text-align: center; margin: 10px 0 0; }
details { margin-top: 18px; background: rgba(236,228,216,.1); border-radius: 10px; padding: 0 14px; }
summary { min-height: 52px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
details p { margin: 0 0 12px; font-size: 1rem; opacity: .9; }
details a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; color: var(--vang-nhat); text-underline-offset: 3px; }   /* link ghi công: vùng chạm ≥48px */

/* trạng thái ĐÃ ĐỔI: dấu sáp thật "đóng" xuống một lần */
.dau-doi { width: 56px; height: 56px; display: inline-block; vertical-align: middle; background: url(../img/do-vat/dau-sap.webp) center / contain no-repeat; opacity: 0; transform: scale(1.4); }
.da-hien .dau-doi { animation: dong .32s var(--e-nay) .4s forwards; }
@keyframes dong { to { opacity: 1; transform: scale(1); } }
.gio-cu { display: block; font: 400 1rem var(--f-gio); text-decoration: line-through; color: #9a8a84; }

/* ---------- dạng danh sách + in A5 ---------- */
html.ds { scroll-snap-type: none; }
.ds-trang { background: var(--nen); color: var(--do); min-height: 100vh; padding: 76px 16px 40px; }
.ds-trang h1 { font: 400 1.75rem var(--f-tieude); margin: 0 0 4px; }
.ds-ngay { margin-top: 22px; }
.ds-ngay h2 { font: 400 1.5rem var(--f-tieude); margin: 0; border-bottom: 2px solid var(--vang); padding-bottom: 4px; }
.ds-dong { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dotted rgba(81,20,25,.25); font-size: 1.25rem; }
.ds-dong b { font: 700 2rem/1 var(--f-gio); }
.ds-dong .trong { color: #b9a9a0; }
@media print {
  @page { size: A5; margin: 10mm; }
  .thanh, .menu, .bang-doi, .toast, .nut-in { display: none !important; }
  .ds-trang { padding: 0; background: #fff; }
}

/* ---------- chế độ nhẹ / giảm chuyển động ---------- */
html.nhe *, html.nhe *::before, html.nhe *::after { animation: none !important; transition: none !important; }
html.nhe .hien, html.nhe .dong-bang, html.nhe .mat > span, html.nhe .moc .cham, html.nhe .muoi-hai { opacity: 1 !important; transform: none !important; }
html.nhe .chang::before, html.nhe .duong-noi { transform: none !important; }
html.nhe .canh--hoang-hon .anh-nen img.dem { opacity: 1; }
html.nhe .dau-doi { opacity: 1; transform: none; }

@media (min-width: 700px) {
  .ngay-lon { font-size: 7rem; }
}

/* ---------- trưởng đoàn cập nhật giờ (10/10) ---------- */
html.dang-sua, html.dang-sua body { overflow: hidden; }
.moc .cap-nhat { font-size: .95rem; font-style: italic; }
.hop-sua { position: fixed; inset: 0; z-index: 60; background: rgba(20,6,8,.72); display: flex; align-items: flex-end; justify-content: center; }
.hop-trong { background: var(--nen); color: var(--do); width: 100%; max-width: 560px; max-height: calc(100% - 24px - env(safe-area-inset-top)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 18px 18px 0 0; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.hop-dau { position: sticky; top: 0; background: var(--nen); display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; z-index: 1; border-bottom: 1px solid rgba(81,20,25,.12); }
.hop-dau h2 { margin: 0; font: 400 1.6rem/1.2 var(--f-tieude); }
.hop-dong { min-width: 52px; min-height: 52px; border: 0; background: #f1e7d8; border-radius: 12px; font-size: 1.3rem; color: var(--do); }
#suaThan > p { margin: 14px 0 0; }
.o-pin { display: block; width: 100%; margin-top: 12px; min-height: 64px; border: 2px solid #c9b48a; border-radius: 12px; background: #fff; color: var(--do);
  font: 700 2rem/1 var(--f-gio); letter-spacing: .5em; text-align: center; padding: 0 0 0 .5em; }
.o-pin:focus, .the-sua input:focus, .the-sua textarea:focus { outline: 3px solid var(--vang); outline-offset: 1px; }
.sua-loi:not(:empty), .sua-tt.loi { color: #a3171f; font-weight: 600; }
.sua-goi-y { color: #6a3a3f; font-size: 1.02rem; }
.the-sua { margin-top: 14px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(60,20,20,.1); }
.the-sua .sua-ngay { margin: 0 0 8px; color: #6a3a3f; }
.the-sua .sua-ngay b { color: var(--do); }
.the-sua label { display: block; margin-top: 10px; font-weight: 600; font-size: 1rem; color: #6a3a3f; }
.the-sua input, .the-sua textarea { display: block; width: 100%; margin-top: 4px; min-height: 52px; border: 1px solid #c9b48a; border-radius: 10px; background: #fffdf8; color: var(--do);
  font: 400 1.15rem/1.35 var(--f-than); padding: 10px 12px; }
.the-sua input[type=time] { font: 700 1.5rem/1 var(--f-gio); max-width: 220px; }
.the-sua .hang-nut { margin-top: 12px; }
.the-sua .sua-tt { margin: 8px 0 0; min-height: 1.4em; font-weight: 600; color: #2f6b2f; }
.the-sua details { margin-top: 6px; color: #6a3a3f; font-size: .98rem; }
.the-sua details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.the-sua details p { margin: 4px 0; }
#suaThan > .hang-nut { margin: 18px 0 4px; }