/* Về Với Đồng Đội — ứng dụng
   Cùng bản sắc với trang web: đỏ thẫm, vàng đồng, nền giấy, ảnh minh hoạ nét mảnh.
   Ít chữ, nhiều hình; chữ gốc 18px, vùng chạm tối thiểu 52px cho người lớn tuổi.
   Chuyển động chỉ ở 3 chỗ: chữ "Miễn phí" bay vào, khói nhang, và phản hồi khi bấm/chuyển tab. */
:root{
  --bg:#FBF6EC; --surface:#FFFDF8; --sunk:#F3EBDD; --ink:#2B241C; --muted:#6E6253; --line:rgba(43,36,28,.13);
  --red:#8A1C17; --red-ink:#FFF7EE; --gold:#B8862F; --gold-soft:rgba(184,134,47,.16); --ok:#4F7A6A; --bar:#8A1C17;
  --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif; --ease:cubic-bezier(.2,.8,.2,1);
  --k:1; --top:var(--safe-area-inset-top,env(safe-area-inset-top,0px)); --bot:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1A1612; --surface:#231E19; --sunk:#2B241E; --ink:#F3EADC; --muted:#B8AA96; --line:rgba(243,234,220,.13);
  --red:#D0564A; --gold:#D3A54E; --gold-soft:rgba(211,165,78,.16); --ok:#7FB59F; --bar:#5E120E; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1A1612; --surface:#231E19; --sunk:#2B241E; --ink:#F3EADC; --muted:#B8AA96; --line:rgba(243,234,220,.13);
  --red:#D0564A; --gold:#D3A54E; --gold-soft:rgba(211,165,78,.16); --ok:#7FB59F; --bar:#5E120E; color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{font-size:calc(18px * var(--k));-webkit-text-size-adjust:100%}
body{margin:0;background:transparent;color:var(--ink);font:400 1rem/1.5 var(--f);overscroll-behavior-y:none;-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
p{margin:0}
.muted{color:var(--muted)}
.lbl{font-weight:600;margin-bottom:8px}

/* ảnh minh hoạ lấy từ trang web */
.art svg,.t-art svg,.per-a svg,.sh-art svg{width:100%;height:100%;stroke:none;display:block}
/* ảnh minh hoạ 2D (AI): phủ kín khung, hiện mờ dần khi tải xong */
.art img,.t-art img,.per-a img,.sh-art img,.q-i img,.gd-art img,.nw-a img{width:100%;height:100%;object-fit:cover;display:block;animation:fade .5s ease}
.per-a{border-radius:10px;overflow:hidden}
.gd-art img{transform-origin:center;animation:fade .5s ease,kb 14s ease-in-out infinite alternate}
.sh-art img{animation:fade .5s ease,kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08)}}
.a-sky{fill:color-mix(in srgb,var(--gold) 14%,var(--surface))}.a-sun{fill:#F2C94C;opacity:.55}
.a-hill{fill:color-mix(in srgb,var(--ok) 30%,var(--surface))}.a-ground{fill:color-mix(in srgb,var(--ok) 45%,var(--surface))}
.a-stone{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1.5}
.a-red{fill:var(--red)}.a-gold{fill:#F2C94C}.a-goldc{fill:var(--gold)}
.a-pole{stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:3}.a-pole2{fill:color-mix(in srgb,var(--ink) 55%,transparent)}
.a-route{fill:none;stroke:var(--red);stroke-width:3;stroke-dasharray:6 7;stroke-linecap:round;animation:march 1.6s linear infinite}
.a-paper{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 20%,transparent);stroke-width:1.5}.a-line{fill:color-mix(in srgb,var(--ink) 16%,transparent)}
.a-seal{fill:var(--red);opacity:.9}
.a-rung{stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:2}
.a-helix{fill:none;stroke-width:3;stroke-linejoin:round}.a-helix.a{stroke:var(--red)}.a-helix.b{stroke:var(--gold)}
@keyframes march{to{stroke-dashoffset:-26}}
.per-a .line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;opacity:.45}
.per-a .line.thin{stroke-width:1.4;opacity:.3}
.per-a .fill{fill:currentColor;opacity:.07}.per-a .fill.solid{fill:var(--surface);opacity:1}
.per-a .acc{fill:var(--red)}.per-a .star{fill:#F2C94C}
.per-a .ring{fill:none;stroke:var(--gold);stroke-width:2.5}.per-a.all .star{fill:var(--red)}

/* thanh tiêu đề */
/* Lá cờ Tổ quốc phía sau thanh tiêu đề và ô tìm: nền đỏ, sao vàng, nếp vải chuyển động nhẹ như cờ bay */
/* Lá cờ Tổ quốc làm nền toàn màn hình: nền đỏ, sao vàng giữa, nếp vải chuyển động nhẹ như cờ bay.
   Chữ nằm thẳng trên cờ dùng màu trắng; các khối nội dung giữ nền sáng/tối để dễ đọc. */
html{background:#DA251D}
.flag{position:fixed;inset:0;z-index:-1;background:#DA251D;overflow:hidden;pointer-events:none}
.flag::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 50% 40%,rgba(255,255,255,.08),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(60,0,0,.22))}
.flag::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:200%;z-index:2;background:repeating-linear-gradient(100deg,rgba(70,0,0,.20) 0%,rgba(255,235,220,.10) 4.5%,rgba(70,0,0,.20) 9%);animation:folds 10s linear infinite}
@keyframes folds{to{transform:translateX(9%)}}
.flag-s{position:absolute;inset:0;display:grid;place-items:center}
.flag-s svg{width:min(62vw,58vh);height:auto;aspect-ratio:1;fill:#FFFF00;stroke:none;filter:drop-shadow(0 2px 6px rgba(90,0,0,.3));animation:sway 6s ease-in-out infinite}
@keyframes sway{25%{transform:translateY(4px) skewY(-2.5deg) scaleX(.97)}75%{transform:translateY(-3px) skewY(2deg) scaleX(1.01)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .flag{filter:brightness(.62) saturate(.9)}}
:root[data-theme="dark"] .flag{filter:brightness(.62) saturate(.9)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:20;background:transparent;transition:background .25s;color:#FFF;padding:calc(var(--top) + 14px) 16px 14px;text-shadow:0 1px 2px rgba(80,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.05rem}
.brand i{position:relative;width:33px;height:22px;border-radius:3px;background:#DA251D;display:grid;place-items:center;box-shadow:0 0 0 1.5px rgba(255,255,255,.95),0 2px 6px rgba(60,0,0,.35);overflow:hidden;flex:none}
.brand i::after{content:"";width:13px;height:13px;background:#FFFF00;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.brand i::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);background-size:250% 100%;animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,40%{background-position:120% 0}100%{background-position:-120% 0}}

main{padding:0 16px calc(100px + var(--bot))}
.view{padding-top:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.view.on{animation:viewIn .28s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}

/* ô tìm: dính dưới thanh tiêu đề khi cuộn */
.find{position:sticky;top:var(--barH,calc(var(--top) + 48px));z-index:10;background:transparent;transition:background .25s,box-shadow .25s;margin:-12px -16px 0;padding:8px 16px 12px}
/* đầu trang: thanh tiêu đề và ô tìm nằm thẳng trên lá cờ; khi cuộn xuống mới có nền đỏ liền một khối để che nội dung bên dưới */
.scrolled .bar,.scrolled .find{background:rgba(196,30,24,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.scrolled .find{box-shadow:0 8px 16px -8px rgba(60,0,0,.45)}
@media (prefers-color-scheme:dark){:root.scrolled:not([data-theme="light"]) .bar,:root.scrolled:not([data-theme="light"]) .find{background:rgba(122,20,15,.92)}}
:root.scrolled[data-theme="dark"] .bar,:root.scrolled[data-theme="dark"] .find{background:rgba(122,20,15,.92)}
.find .field{border-color:transparent;box-shadow:0 4px 14px rgba(90,0,0,.25)}
.field{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:0 6px 0 14px;min-height:60px;transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 14%,transparent)}
.field svg{color:var(--muted)}
.field input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:1.1rem;padding:14px 0}
.field input::-webkit-search-cancel-button{display:none}
.clear{width:48px;height:48px;border:0;border-radius:50%;background:var(--sunk);font-size:1.6rem;line-height:1;color:var(--muted)}
.mic{position:relative;flex:none;width:48px;height:48px;border:0;border-radius:50%;background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);display:grid;place-items:center;transition:background .2s,color .2s}
.mic svg{position:relative;z-index:1}
.mic::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);opacity:0;transform:scale(1);transition:transform .12s}
.mic.on{background:var(--red);color:var(--red-ink)}
.mic.on::before{opacity:.25;transform:scale(calc(1.1 + var(--lv,0) * .7));animation:micp 1.4s ease-out infinite}
@keyframes micp{0%{opacity:.35;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.vh{display:flex;gap:14px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px}
.vh-i{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--red-ink)}
.vh p{font-size:1.05rem;line-height:1.5}
.spin{display:flex;gap:4px;padding:0 6px}
.spin i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:dot 1s infinite ease-in-out}
.spin i:nth-child(2){animation-delay:.15s}.spin i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:none}}

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--red-ink)}
.status{color:var(--muted);font-size:.95rem}
.status:empty{display:none}
.status b{color:var(--ink)}

/* thẻ Miễn phí: ảnh trước/sau + chữ lớn */
.free{display:grid;grid-template-columns:42% 1fr;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:12px}
.ba{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#2a2420}
.ba-i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-new{clip-path:inset(0 0 0 var(--x))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba-line::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;color:#8A1C17;display:grid;place-items:center;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0}
.ba.demo .ba-new,.ba.demo .ba-line{transition:clip-path .9s var(--ease),left .9s var(--ease)}
.free-t{display:grid;gap:8px;justify-items:start;min-width:0}
.kick{font-weight:600}
.free-t{container-type:inline-size}
.big{font-size:clamp(1.7rem,8.2vw,2.6rem);font-size:min(2.6rem,21cqi);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--red);white-space:nowrap;
  background:linear-gradient(transparent 80%,var(--gold-soft) 80% 96%,transparent 96%)}
.big i{font-style:normal;display:inline-block}
/* chạy bằng CSS ngay khi tải, không chờ JS, để chữ không bao giờ bị ẩn */
.big i{animation:letter .7s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.15s + var(--i)*65ms)}
@keyframes letter{from{opacity:0;transform:translateY(.45em) scale(.6) rotate(-8deg)}}
.recent{display:grid}

.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;transition:transform .12s}
.btn.red{background:var(--red);border-color:var(--red);color:var(--red-ink)}
.btn.ghost{background:none}
.btn.wide{width:100%}
.btn:active,.chip:active,.tile:active,.row:active,.per:active,.q:active{transform:scale(.97)}

/* danh sách */
.list{list-style:none;margin:0;padding:0;display:grid;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.list:empty{display:none}
.list li{animation:rowIn .32s var(--ease) both;animation-delay:calc(var(--n,0) * 28ms)}
.news{margin-top:18px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 10px}
.sec-h h2{font-size:1.25rem;margin:0;font-weight:700}
.link{background:none;border:0;color:var(--red);font:inherit;font-weight:600;padding:8px 0;min-height:44px}
.nws{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nws li{animation:rowIn .4s var(--ease) both;animation-delay:calc(.35s + var(--n,0) * 70ms)}
.nw{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;cursor:pointer;transition:transform .15s var(--ease)}
.nw:active{transform:scale(.98)}
.nw-a{display:block;height:78px;border-radius:10px;overflow:hidden}
.nw-a svg{width:100%;height:100%;display:block}
.nw-b{display:grid;gap:4px;min-width:0}
.nw-m{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:.85rem;color:var(--muted)}
.nw-m b{color:var(--red);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;line-height:1.2}
.nw.lead .nw-m b{font-size:1.35rem}
.nw-t{font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw.lead{grid-template-columns:1fr;padding:0;overflow:hidden}
.nw.lead .nw-a{height:150px;border-radius:0}
.nw.lead .nw-b{padding:4px 14px 14px}
.nw.lead .nw-t{font-size:1.1rem}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}}
.row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:13px 14px 13px 16px;min-height:64px}
.row>*{grid-column:1}
.row::after{content:"";grid-column:2;grid-row:1/4;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);opacity:.5}
.list li:last-child .row{border-bottom:0}
.row b{font-weight:600;font-size:1.08rem}
.row .m{color:var(--muted);font-size:.92rem}
.row .pl{color:var(--red);font-weight:600;font-size:.92rem}
.row .star-i{display:inline-block;width:14px;height:14px;margin-right:6px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);vertical-align:-1px}
.more{display:grid}
.empty{padding:24px 16px;color:var(--muted);text-align:center;display:grid;gap:10px;justify-items:center}
.empty .art{width:160px;height:90px;border-radius:12px;overflow:hidden}

/* nghĩa trang: thẻ giai đoạn có tranh */
.pers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.per{display:grid;justify-items:center;align-content:start;gap:4px;padding:8px 4px 10px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);transition:background .2s,border-color .2s}
.per-a{width:100%;aspect-ratio:17/11;color:var(--ink)}
.per b{font-size:.8rem;font-weight:600;text-align:center;line-height:1.2}
.per[aria-pressed="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--surface))}
.per[aria-pressed="true"] b{color:var(--red)}

/* tri ân */
.altar{display:grid;justify-items:center;gap:8px;background:#1A1110;color:#F6EBDD;border-radius:22px;padding:22px 16px 20px;position:relative;overflow:hidden}
.altar::before{content:"";position:absolute;inset:auto -20% -50% -20%;height:80%;background:radial-gradient(closest-side,rgba(242,180,80,.25),transparent);opacity:.35;transition:opacity 1s}
.altar.lit::before{opacity:1}
.altar.flash::before{animation:glow .9s ease-out}
@keyframes glow{40%{opacity:1;transform:scale(1.25)}}
.inc{position:relative;display:grid;justify-items:center;line-height:1.2}
.inc b{font-size:2.2rem;font-weight:700;color:#F2C94C;font-variant-numeric:tabular-nums}
.inc span{font-size:.9rem;color:#CDBBA6}
.btn.gold{position:relative;background:#F2C94C;border-color:#F2C94C;color:#3A1410;font-size:1.1rem}
.btn:disabled{opacity:.6}
.urn{position:relative;width:180px;height:180px}
.stk{position:absolute;bottom:50px;width:3px;height:96px;background:linear-gradient(#E9A23B 0 8%,#7A2E1A 8% 100%);border-radius:2px;transform-origin:bottom center}
.stk:nth-of-type(4){left:68px;transform:rotate(-7deg)}.stk:nth-of-type(5){left:89px}.stk:nth-of-type(6){left:110px;transform:rotate(7deg)}
.stk::before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#FFB347;box-shadow:0 0 12px 4px rgba(255,170,70,.65);animation:ember 2.4s ease-in-out infinite;opacity:0;transition:opacity .6s}
.altar.lit .stk::before{opacity:1}
.altar:not(.lit) .smk{animation:none}
@keyframes ember{50%{opacity:.6}}
.smk{position:absolute;bottom:140px;width:14px;height:56px;margin-left:-5px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.4),transparent);filter:blur(4px);opacity:0;animation:smoke 4.5s ease-in infinite}
.smk:nth-of-type(1){left:66px}.smk:nth-of-type(2){left:90px;animation-delay:1.5s}.smk:nth-of-type(3){left:114px;animation-delay:3s}
@keyframes smoke{0%{opacity:0;transform:translateY(0) scaleX(.6)}25%{opacity:.85}100%{opacity:0;transform:translateY(-80px) translateX(12px) scaleX(1.8)}}
.bowl{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:140px;height:58px;background:linear-gradient(#C9A24B,#8E6A22);border-radius:10px 10px 58px 58px}
.bowl::before{content:"";position:absolute;top:-7px;left:-5px;right:-5px;height:14px;border-radius:50%;background:#D9B65E}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:grid;gap:0;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;text-align:left}
.t-art{display:block;aspect-ratio:16/10;overflow:hidden}
.t-art.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.tile b{padding:12px 14px;font-weight:600;font-size:1.05rem}

/* cài đặt */
.set{display:grid}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--sunk);border-radius:14px;padding:4px;gap:4px}
.seg button{min-height:52px;border:0;border-radius:10px;background:none;font-weight:600;white-space:nowrap;font-size:.95rem}
.seg button[aria-checked="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12);color:var(--red)}
.about{display:grid;gap:10px;padding-top:4px}
.about .art{height:110px;border-radius:16px;overflow:hidden}

/* tab dưới đáy: chấm đỏ trượt theo tab đang chọn */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--bot))}
.tabs button{position:relative;display:grid;justify-items:center;gap:2px;min-height:60px;border:0;background:none;color:var(--muted);font-size:14px;font-weight:500;border-radius:14px;align-content:center;white-space:nowrap}
.tabs button::before{content:"";position:absolute;top:4px;left:50%;width:48px;height:30px;margin-left:-24px;border-radius:15px;background:color-mix(in srgb,var(--red) 12%,transparent);transform:scaleX(.3);opacity:0;transition:transform .25s var(--ease),opacity .2s}
.tabs button svg{position:relative}
.tabs button[aria-current="page"]{color:var(--red);font-weight:700}
.tabs button[aria-current="page"]::before{transform:none;opacity:1}

/* bảng chi tiết trượt từ dưới lên */
.sheet{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:rgba(20,10,8,.5);animation:fade .2s}
.panel{position:absolute;left:0;right:0;bottom:0;max-height:90vh;overflow:auto;background:var(--surface);border-radius:24px 24px 0 0;padding:10px 18px calc(18px + var(--bot));display:grid;gap:14px;animation:up .3s var(--ease)}
.grab{justify-self:center;width:44px;height:5px;border-radius:9px;background:var(--line)}
.sh-art{height:96px;margin:0 -18px 12px;overflow:hidden}
.sh-t{font-size:1.45rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0}
.chipsS{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:10px;background:var(--sunk);padding:6px 12px;font-size:.92rem}
.pill b{font-weight:600}
.plot{display:flex;align-items:center;gap:12px;border:2px solid color-mix(in srgb,var(--red) 30%,transparent);border-radius:14px;padding:12px 14px;color:var(--red);font-weight:700}
.plot svg{color:var(--red)}
.place{display:grid;gap:2px}.place .m{color:var(--muted);font-size:.92rem}
.sh-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sh-acts .btn{min-height:72px;flex-direction:column;gap:4px;padding:8px;font-size:.95rem}
.sh-acts .btn.red{grid-column:1/-1;flex-direction:row;min-height:58px;font-size:1rem}
@keyframes up{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}

.toast{position:fixed;left:50%;bottom:calc(100px + var(--bot));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:18px;opacity:0;pointer-events:none;transition:.25s;z-index:60;width:max-content;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* trang chủ: lối tắt */
#home{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.home-a{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;min-width:0}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.q{display:grid;gap:6px;justify-items:center;padding:10px 6px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:transform .12s}
.q b{font-weight:600;font-size:.95rem;text-align:center;line-height:1.2}
.q-i{display:block;width:100%;height:52px;border-radius:10px;overflow:hidden}
.q-i svg{width:100%;height:100%;stroke:none;display:block}
.q-i.inc{position:relative;background:#1A1110}
.q-i.inc::before{content:"";position:absolute;left:50%;bottom:8px;width:34px;height:14px;margin-left:-17px;border-radius:4px 4px 14px 14px;background:linear-gradient(#C9A24B,#8E6A22)}
.q-i.inc::after{content:"";position:absolute;left:50%;bottom:22px;width:2px;height:22px;margin-left:-1px;background:#7A2E1A;box-shadow:-8px 2px 0 #7A2E1A,8px 2px 0 #7A2E1A;border-top:3px solid #FFB347}
.news{margin-top:4px}

/* trang con của Tri ân */
.pg-h{display:flex;align-items:center;gap:6px;margin:0 -6px}
.pg-h h2{font-size:1.3rem;margin:0;font-weight:700;line-height:1.25}
.back{width:48px;height:48px;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--ink);flex:none}
.back:active{background:var(--sunk)}
.cards{display:grid;gap:12px}
.card{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;animation:rowIn .35s var(--ease) both;animation-delay:calc(var(--n,0) * 50ms)}
.card h3{margin:0;font-size:1.15rem;font-weight:700;line-height:1.3}
.card .body{white-space:pre-line;line-height:1.5}
.card .m,.card .meta{color:var(--muted);font-size:.92rem}
.card .contact b{color:var(--red)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{justify-self:start;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.tag.k{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.tag.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts .btn{min-height:46px;padding:0 14px;font-size:.92rem}
.acts .btn svg{width:20px;height:20px}
.acts select{min-height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;padding:0 10px}
.replies{display:grid;gap:6px;border-top:1px dashed var(--line);padding-top:8px}
.replies p{background:var(--sunk);border-radius:12px;padding:8px 12px}
.replies small{display:block;color:var(--muted);font-size:.8rem}
.reply{display:flex;gap:8px}
.reply input{flex:1;min-width:0;min-height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px}
.reply .btn{min-height:46px}
.trip{grid-template-columns:62px 1fr}
.trip .acts{grid-column:1/-1}
.dt{display:grid;justify-items:center;align-content:start;background:var(--red);color:var(--red-ink);border-radius:14px;padding:8px 0}
.dt b{font-size:1.6rem;font-weight:700;line-height:1}
.dt small{font-size:.8rem}
.ti{display:grid;gap:4px;min-width:0}
.meter{height:8px;border-radius:9px;background:var(--sunk);overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;background:var(--gold);border-radius:9px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps div{display:grid;justify-items:center;text-align:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 6px}
.steps .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--red-ink);font-weight:700;margin-bottom:4px}
.steps b{font-size:.92rem;line-height:1.25}
.steps .m{font-size:.8rem;color:var(--muted)}
.rq .pics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rq figure{margin:0;display:grid;gap:4px;font-size:.85rem}
.rq figure img,.rq .ph{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--sunk);display:grid;place-items:center;color:var(--muted)}
.rq figure a{color:var(--red)}
.say{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px}
.say textarea{min-height:84px;resize:vertical;border:0;background:none;outline:none;font:inherit;color:inherit;padding:4px}
.say-r{display:flex;gap:8px}
.say-r input{flex:1;min-width:0;min-height:52px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);padding:0 12px}
.words{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.words li{border-left:3px solid var(--gold);padding:4px 0 4px 14px;animation:rowIn .35s var(--ease) both;animation-delay:calc(var(--n,0) * 40ms)}
.words li.empty{border:0;padding:24px 0}
.words small{color:var(--muted);font-size:.85rem}
.cg{font-size:.72rem;font-weight:600;color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent);padding:2px 8px;border-radius:999px;vertical-align:2px}

/* biểu mẫu */
.fm{display:grid;gap:12px}
.f{display:grid;gap:4px;min-width:0}
.f>span{font-size:.9rem;font-weight:600;color:var(--muted)}
.f input,.f select,.f textarea{width:100%;min-height:52px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;padding:10px 12px;-webkit-user-select:text;user-select:text}
.f textarea{min-height:96px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus,.say-r input:focus,.reply input:focus{outline:none;border-color:var(--red)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0}
.opts span{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:500}
.opts input:checked+span{background:var(--red);border-color:var(--red);color:var(--red-ink)}
.opts input:focus-visible+span{outline:3px solid var(--gold)}
.drop{position:relative;display:grid;place-items:center;min-height:150px;border:2px dashed color-mix(in srgb,var(--red) 40%,transparent);border-radius:16px;background:color-mix(in srgb,var(--red) 5%,var(--surface));overflow:hidden;color:var(--red)}
.drop input{position:absolute;inset:0;opacity:0}
.drop span{display:grid;justify-items:center;gap:6px}
.drop svg{width:40px;height:40px}
.drop img{max-height:240px;max-width:100%;object-fit:contain}
.ok{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.ok input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--red)}
.err{color:var(--red);font-size:.92rem}
.err:empty{display:none}
textarea{-webkit-user-select:text;user-select:text}

/* số liệu đầu trang + đếm ngược 27/7 */
.stats{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;color:var(--muted);font-size:.9rem}
.stats span{display:inline-flex;gap:5px;align-items:baseline}
.stats b{color:var(--ink);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.d27{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:14px;padding:10px 14px;background:linear-gradient(100deg,color-mix(in srgb,var(--red) 14%,var(--surface)),var(--gold-soft));color:var(--ink);font-size:.92rem}
.d27 b{color:var(--red);font-weight:700}
.d27-i{position:relative;flex:none;width:22px;height:26px}
.d27-i::before{content:"";position:absolute;left:3px;right:3px;bottom:0;height:8px;border-radius:2px 2px 8px 8px;background:var(--gold)}
.d27-i::after{content:"";position:absolute;left:10px;bottom:8px;width:2px;height:16px;background:var(--red);box-shadow:-5px 2px 0 var(--red),5px 2px 0 var(--red);border-top:2px solid #FFB347}

/* hướng dẫn 4 bước */
.guide{display:grid}
.gd{list-style:none;margin:0;padding:0 0 0 2px;display:grid;gap:6px;position:relative}
.gd::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--line)}
.gd li{position:relative;border-radius:16px;transition:background .3s}
.gd li.on{background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.gd-h{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px 6px 4px;border:0;background:none;text-align:left;color:var(--muted)}
.gd-h b{font-weight:600}
.gd li.on .gd-h{color:var(--ink)}
.gd .n{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);font-weight:700;transition:background .3s,color .3s}
.gd li.on .n{background:var(--red);color:var(--red-ink)}
.gd-b{display:none;gap:10px;padding:0 12px 14px 52px}
.gd li.on .gd-b{display:grid;animation:rowIn .4s var(--ease)}
.gd-b p{color:var(--muted);font-size:.95rem}
.gd-b .btn{justify-self:start;min-height:46px}
.gd-art{position:relative;height:96px;border-radius:12px;overflow:hidden;background:var(--sunk)}
.gd-art svg{width:100%;height:100%;stroke:none;display:block}
.g-search{display:grid;place-items:center;padding:0 14px}
.g-search span{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface);border:2px solid var(--red);border-radius:12px;padding:10px 12px}
.g-search svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2}
.g-search i{font-style:normal;font-weight:600;overflow:hidden;white-space:nowrap;border-right:2px solid var(--red);width:0;animation:type 2.2s steps(18) .3s forwards}
.gd li:not(.on) .g-search i{animation:none}
@keyframes type{to{width:11.5em}}
.g-pin{position:absolute;right:10px;top:10px;background:var(--surface);color:var(--red);font-weight:700;font-size:.85rem;padding:6px 10px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.12);animation:pop2 .5s var(--ease) .2s both}
@keyframes pop2{from{opacity:0;transform:translateY(6px) scale(.9)}}
.g-inc{display:grid;place-items:center;background:#1A1110}
.g-inc .q-i{width:120px;height:80px}

/* một ô tìm cho tất cả */
.mix{display:grid;gap:8px}
.mix .list{margin-bottom:6px}
.mix-h{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.mix-h b{font-size:.9rem;color:var(--muted);font-weight:600}
.mix-h .link{min-height:36px;padding:0}

/* nút Cần giúp */
.help{position:fixed;right:14px;bottom:calc(92px + var(--bot));z-index:25;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.14)}
.help span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--red-ink);font-weight:700}
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:0 14px}
.faq summary{min-height:56px;display:flex;align-items:center;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:10px;font-size:1.4rem;color:var(--red)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:12px}
.faq details .btn{margin-bottom:14px;min-height:46px}

.credits{border:1px solid var(--line);border-radius:14px;padding:0 14px;background:var(--surface)}
.credits summary{min-height:52px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.credits ul{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:8px;font-size:.85rem}
.credits a{color:var(--ink);font-weight:600}
.credits li span{display:block;color:var(--muted)}
/* chữ trên nền cờ */
.stats,.stats b,.sec-h h2,.lbl,.status,.status b,.pg-h h2,.back,.mix-h b,.about p,.about .muted,.mix-h .link,#v-tim>.status{color:#FFF8EC;text-shadow:0 1px 3px rgba(70,0,0,.45)}
.stats{color:rgba(255,248,236,.85)}
.about .muted{color:rgba(255,248,236,.8)}
.back:active{background:rgba(255,255,255,.15)}
.mix-h .link{color:#FFE27A}
/* khối nội dung trên nền cờ có nền riêng */
.d27{background:var(--surface)}
.guide{background:var(--surface);border-radius:20px;padding:14px 12px 8px;box-shadow:0 6px 20px rgba(90,0,0,.18)}
.guide .sec-h h2{color:var(--ink);text-shadow:none}
.words li{background:var(--surface);border-radius:14px;padding:12px 14px;border-left:4px solid var(--gold)}
.cards>.empty,.words li.empty{background:var(--surface);border-radius:18px;border-left:0}
.about{background:var(--surface);border-radius:20px;padding:14px}
.about p,.about .muted{color:var(--ink);text-shadow:none}.about .muted{color:var(--muted)}
.list,.free,.card,.tile,.q,.per,.nw,.steps div,.say,.seg,.credits,.altar{box-shadow:0 6px 20px rgba(90,0,0,.16)}
.seg{background:var(--surface)}
/* khối phụ dưới Tin tức: nền riêng để nổi trên lá cờ */
.box{display:grid;gap:10px;margin-top:14px;background:var(--surface);border-radius:20px;padding:14px;box-shadow:0 6px 20px rgba(90,0,0,.16)}
.box .sec-h{margin:0 2px}
.box .sec-h h2{color:var(--ink);text-shadow:none;font-size:1.1rem}
.box .link{color:var(--red);text-shadow:none}
.box .list{box-shadow:none;background:var(--bg)}
.box .words li{background:var(--bg);box-shadow:none}
.box .words li p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.box .words .hw-empty{border-left-color:var(--line)}
.box .words .hw-empty p{color:var(--muted)}
/* Tri ân: cột trái (bàn thờ + ô gửi lời tri ân), hàng dưới 3 khối hoạt động */
.ta-l{display:grid;gap:14px;align-content:start}
@media (max-width:899px){.ta-l{display:contents}#v-ta .altar{order:1}#v-ta .tiles{order:2}.ta-say{order:3}.ta-feed{order:4}}
.ta-say .say-h{font-weight:700;padding:2px 4px 0}
.ta-feed{display:grid;gap:0}
.ta-feed .box{margin-top:14px}
.mini{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mini button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-radius:14px;background:var(--bg);padding:10px 12px;min-height:60px;color:var(--ink)}
.mini button>span:last-child{display:grid;min-width:0}
.mini b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini small{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt.sm{flex:none;width:46px;padding:6px 0;border-radius:12px}.dt.sm b{font-size:1.15rem}.dt.sm small{color:var(--red-ink);font-size:.72rem}
.mi{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);font-weight:700}
.mini-empty{color:var(--muted);background:var(--bg);border-radius:14px;padding:12px 14px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .g-search i{width:auto;border:0}
}
@media (min-width:700px) and (max-width:899px){main{max-width:680px;margin:0 auto}.tabs{padding-inline:calc((100vw - 680px)/2)}}
@media (min-width:900px){
  .bar{padding:0 max(24px,calc((100vw - 1120px)/2));height:68px;display:flex;align-items:center}
  .tabs{position:fixed;top:0;bottom:auto;left:auto;right:calc(max(24px,calc((100vw - 1120px)/2)) + 156px);height:68px;display:flex;gap:4px;align-items:center;background:none;border:0;padding:0}
  .acct{max-width:144px}
  .tabs button{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;color:rgba(255,247,238,.78);font-size:16px}
  .tabs button::before{inset:0;top:0;left:0;width:auto;height:auto;margin:0;border-radius:12px;background:rgba(255,247,238,.14)}
  .tabs button[aria-current="page"]{color:#FFF7EE}
  main{max-width:1120px;margin:0 auto;padding:8px 24px 64px}
  .find{top:68px;margin:-20px -24px 0;padding:6px 24px 18px}
  .chips{margin:0;padding:0}
  #home{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
  .news{margin-top:0}
  .nws{grid-template-columns:1fr 1fr}.nws li:first-child{grid-column:1/-1}
  .nw:not(.lead) .nw-m{display:grid;gap:0}
  #v-nt .list,#results{columns:2;column-gap:0;display:block}
  #results li,#v-nt .list li{break-inside:avoid}
  #v-ta{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
  .ta-feed{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
  .ta-feed .box{margin-top:0}
  .page{max-width:780px;margin:0 auto}
  .cards{grid-template-columns:1fr 1fr;align-items:start}
  #v-them{max-width:560px;margin:0 auto}
  .panel{left:50%;right:auto;bottom:50%;width:min(560px,92vw);transform:translate(-50%,50%);border-radius:24px;max-height:86vh;animation:pop .25s var(--ease)}
  .grab{display:none}
  .toast{bottom:32px}
  .help{bottom:24px;right:24px}
  .scrolled .bar,.scrolled .find{background:#C41E18;-webkit-backdrop-filter:none;backdrop-filter:none}
  .scrolled .find{box-shadow:0 0 0 100vmax #C41E18;clip-path:inset(0 -100vmax)}
  @media (prefers-color-scheme:dark){:root.scrolled:not([data-theme="light"]) .bar,:root.scrolled:not([data-theme="light"]) .find{background:#7A140F}:root.scrolled:not([data-theme="light"]) .find{box-shadow:0 0 0 100vmax #7A140F}}
  :root.scrolled[data-theme="dark"] .bar,:root.scrolled[data-theme="dark"] .find{background:#7A140F}:root.scrolled[data-theme="dark"] .find{box-shadow:0 0 0 100vmax #7A140F}
}
@keyframes pop{from{opacity:0;transform:translate(-50%,calc(50% + 16px))}}
@media (max-width:350px){.free{grid-template-columns:1fr}.big{font-size:2.2rem}.pers{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.q b{font-size:.85rem}}

/* tài khoản */
.acct{display:inline-flex;align-items:center;gap:6px;min-height:40px;max-width:46%;padding:0 14px 0 10px;border-radius:999px;border:1.5px solid rgba(255,255,255,.75);background:rgba(255,255,255,.14);color:#FFF;font:inherit;font-weight:600;font-size:.92rem;text-shadow:inherit}
.acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.acct.in{background:#FFF;color:#B3140F;text-shadow:none;border-color:#FFF}
.acct-c{display:grid;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:14px}
.acct-c:has(.acct-me){grid-template-columns:1fr auto;align-items:center}
.acct-me{display:grid;gap:2px;min-width:0}.acct-me b{font-size:1.1rem}.acct-me span{color:var(--muted);font-size:.92rem}
.acct-c .muted{margin:0}
@media (min-width:900px) and (max-width:1099px){.tabs button{padding:0 10px;font-size:15px}.tabs button svg{display:none}}
.sms{position:fixed;left:50%;top:calc(var(--top) + 10px);z-index:80;width:min(380px,calc(100vw - 24px));transform:translate(-50%,-140%);transition:transform .35s var(--ease);display:grid;gap:3px;text-align:left;padding:12px 16px;border:0;border-radius:18px;background:rgba(250,250,250,.97);color:#111;box-shadow:0 10px 30px rgba(0,0,0,.28);font:inherit}
.sms.on{transform:translate(-50%,0)}.sms b{font-size:.9rem}.sms span{font-size:.95rem}.sms u{text-decoration:none;font-weight:700;letter-spacing:.06em}.sms small{color:#777;font-size:.8rem}
/* màn nhập mã OTP */
.otp-art{display:grid;place-items:center;margin:-4px 0 2px}
.otp-art svg{width:120px;height:100px;overflow:visible}
.otp-art .ph{fill:var(--bg);stroke:var(--ink);stroke-width:2.5}.otp-art .ph-n{stroke:var(--muted);stroke-width:2.5;stroke-linecap:round}
.otp-art .msg rect{fill:#DA251D}.otp-art .msg path{fill:none;stroke:#FFE14D;stroke-width:2.2;stroke-linejoin:round}
.otp-art .msg{animation:msgIn 2.4s var(--ease) infinite}
@keyframes msgIn{0%{transform:translate(46px,-34px) rotate(14deg) scale(.6);opacity:0}25%{opacity:1}45%,80%{transform:none;opacity:1}100%{transform:translateY(6px);opacity:0}}
.otp-art .dot{fill:#F2B705;animation:twk 2.4s ease-in-out infinite}.otp-art .d2{animation-delay:.6s}.otp-art .d3{animation-delay:1.2s}.otp-art .d4{animation-delay:1.8s}
@keyframes twk{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
.otp-art .dot{transform-box:fill-box;transform-origin:center}
.otp-art .ok-c{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.otp-art .ok-c circle{fill:#1E8E3E}.otp-art .ok-c path{fill:none;stroke:#FFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s .3s}
.otp-art.ok .msg{animation:none;opacity:0;transition:opacity .2s}.otp-art.ok .ok-c{opacity:1;transform:none}.otp-art.ok .ok-c path{stroke-dashoffset:0}
.otp-p{text-align:center;margin:0}
.otp{position:relative;display:block}
.otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;caret-color:transparent;-webkit-user-select:text;user-select:text}
.otp-b{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
.otp-b i{display:grid;place-items:center;aspect-ratio:.82;max-height:68px;border:2px solid var(--line);border-radius:14px;background:var(--bg);font-style:normal;font-size:1.65rem;font-weight:700;color:var(--ink);transition:border-color .2s,background .3s,color .3s,transform .3s}
.otp-b i.cur{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 14%,transparent)}
.otp-b i.cur:empty::after{content:"";width:2px;height:40%;background:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.otp-b i.pop{animation:pop .28s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{0%{transform:scale(.7)}100%{transform:none}}
.otp.bad .otp-b{animation:shake .45s}.otp.bad .otp-b i{border-color:#D93025;color:#D93025;background:color-mix(in srgb,#D93025 8%,var(--bg))}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.otp.ok .otp-b i{border-color:#1E8E3E;background:#1E8E3E;color:#FFF;transform:translateY(-4px)}
.otp.ok .otp-b i:nth-child(2){transition-delay:.06s}.otp.ok .otp-b i:nth-child(3){transition-delay:.12s}.otp.ok .otp-b i:nth-child(4){transition-delay:.18s}.otp.ok .otp-b i:nth-child(5){transition-delay:.24s}.otp.ok .otp-b i:nth-child(6){transition-delay:.3s}
.otp-r{justify-self:center}.otp-r:disabled{color:var(--muted);font-weight:500}
@media (prefers-reduced-motion:reduce){.otp-art .msg,.otp-art .dot,.otp-b i.pop,.otp.bad .otp-b{animation:none}}
.otp.ok .otp-b i.cur{box-shadow:none}

/* ===================== Phong cách Song Song =====================
   Lá cờ chỉ ở đầu trang rồi tan dần vào nền giấy kem; chữ Be Vietnam Pro mảnh, tiêu đề lớn nét thanh,
   viền tóc 1px, góc bo nhỏ, điểm nhấn vàng đồng, chữ chuyển sắc vàng, khối hiện dần khi cuộn. */
:root{--paper:#FBF6EC;--paper-2:#F1E8D8;--card:#FFFDF8;--surface:#FFFDF8;--sunk:#F1E8D8;--line:rgba(43,36,28,.12);--gold:#B8862F;--gold-2:#9A6E22;--r:8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#1B1713;--paper-2:#26201A;--card:#221D18;--surface:#221D18;--sunk:#2A231D;--line:rgba(243,234,220,.12);--gold:#D3A54E;--gold-2:#E2BA6A}}
:root[data-theme="dark"]{--paper:#1B1713;--paper-2:#26201A;--card:#221D18;--surface:#221D18;--sunk:#2A231D;--line:rgba(243,234,220,.12);--gold:#D3A54E;--gold-2:#E2BA6A}
html{background:var(--paper)}
body{background:transparent;-webkit-font-smoothing:antialiased;line-height:1.6}
/* lá cờ: chỉ phủ thanh tiêu đề + ô tìm, mép dưới tan vào nền kem với vầng nắng ấm */
.flag{position:absolute;inset:0 0 auto;height:calc(var(--flagH,140px) + 64px);-webkit-mask:linear-gradient(#000 calc(100% - 64px),transparent);mask:linear-gradient(#000 calc(100% - 64px),transparent)}
.flag-s{display:none}  /* dải cờ ở đầu trang quá thấp cho ngôi sao lớn; sao đã có ở logo */
body::after{content:"";position:absolute;left:0;right:0;top:calc(var(--flagH,140px) - 10px);height:260px;z-index:-1;pointer-events:none;background:radial-gradient(60% 100% at 50% 0,rgba(255,214,150,.45),transparent 70%)}
/* chữ giờ nằm trên nền kem: trả về màu mực */
.stats,.stats b,.sec-h h2,.lbl,.status,.status b,.pg-h h2,.back,.mix-h b,.about p,.about .muted,.mix-h .link,#v-tim>.status{color:var(--ink);text-shadow:none}
.stats{color:var(--muted)}.about .muted{color:var(--muted)}.mix-h .link{color:var(--gold-2)}
.back:active{background:var(--sunk)}
/* tiêu đề mục: lớn, nét mảnh, chấm vuông vàng đồng phía trước */
.sec-h{align-items:end;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-h h2{font-weight:300;font-size:1.65rem;letter-spacing:-.035em;line-height:1.1}
.sec-h h2::before{content:"";display:inline-block;width:7px;height:7px;background:var(--gold);margin-right:10px;vertical-align:.35em}
.box .sec-h h2,.guide .sec-h h2{font-size:1.35rem}
.pg-h h2,.sh-t{font-weight:300;letter-spacing:-.03em;font-size:1.6rem}
.link{color:var(--gold-2);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lbl{font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* bỏ bóng đỏ, dùng viền tóc + góc bo nhỏ */
.list,.free,.card,.tile,.q,.per,.nw,.steps div,.say,.seg,.credits,.box,.guide,.about,.words li,.d27,.acct-c,.mini button,.faq details{box-shadow:none;border:1px solid var(--line);border-radius:var(--r)}
.altar{border-radius:var(--r);box-shadow:none}
.box,.guide,.about{background:var(--card);padding:18px}
.box .list,.box .words li,.mini button,.mini-empty{background:var(--paper);border-radius:6px}
.words li{border-left:2px solid var(--gold)}
.nw-a,.q-i,.gd-art,.t-art,.per-a,.about .art,.rq figure img,.rq .ph,.ba{border-radius:4px}
.nw.lead .nw-a{border-radius:0}
.list li .row{border-bottom-color:var(--line)}
/* số liệu kiểu Song Song: số lớn nét mảnh, chia cột bằng đường kẻ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0;border-block:1px solid var(--line);padding:0}
.stats span{display:grid;gap:2px;padding:12px 14px;border-right:1px solid var(--line);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.stats span:last-child{border-right:0}
.stats b{font-weight:300;font-size:2rem;letter-spacing:-.04em;line-height:1;color:var(--ink);text-transform:none}
/* chữ "Miễn phí" chuyển sắc vàng đồng */
.big{font-weight:300;letter-spacing:-.05em;background:none}
.big i{background:linear-gradient(100deg,var(--big1,#8A1C17),#8C6324 55%,#C99A45) no-repeat;background-size:5em 100%;background-position:calc(var(--i) * -.62em) 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.kick{font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* nút: góc 6px, chữ 500, vệt sáng lướt khi rê chuột */
.btn{border-radius:6px;font-weight:500;border-width:1px;position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s var(--ease)}
@media (hover:hover){.btn:hover::after{transform:translateX(130%)}.btn:hover{transform:translateY(-1px)}}
.btn.ghost,.btn:not(.red):not(.gold){background:transparent;border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.chip,.opts span{border-radius:6px;border-width:1px;font-weight:400}
.chip[aria-pressed="true"],.opts input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.seg{border-radius:6px}.seg button{border-radius:4px;font-weight:500}
.seg button[aria-checked="true"]{background:var(--gold);color:#fff;box-shadow:none}
.field{border-radius:12px;border-width:1px}
.f input,.f select,.f textarea,.say-r input,.reply input{border-width:1px;border-radius:6px;background:var(--paper)}
.f input:focus,.f select:focus,.f textarea:focus,.say-r input:focus,.reply input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.f>span{font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.gd .n,.steps .n{font-weight:500}
.gd li.on .n,.steps .n{background:var(--gold);color:#fff}
.gd li.on{box-shadow:none;background:var(--paper)}
.d27{background:linear-gradient(100deg,color-mix(in srgb,var(--gold) 12%,var(--card)),var(--card))}
.d27 b{color:var(--gold-2);font-weight:600}
.nw-m b{font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2)}
.nw.lead .nw-m b{font-size:.78rem}
.nw-t{font-weight:400;font-size:1.02rem;letter-spacing:-.01em}
.nw.lead .nw-t{font-weight:300;font-size:1.45rem;letter-spacing:-.03em;line-height:1.2}
.row b,.mini b,.tile b,.q b,.card h3{font-weight:500}
.card h3{font-weight:400;font-size:1.25rem;letter-spacing:-.02em}
.tile b{font-weight:400;font-size:1.1rem;letter-spacing:-.02em}
.row .pl{color:var(--gold-2);font-weight:500}
.inc b{font-weight:300;font-size:2.8rem;letter-spacing:-.04em}
.tabs{background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tabs button[aria-current="page"]{font-weight:600}
.panel{background:var(--card)}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2),var(--gold),transparent)}
.help{border-radius:6px;font-weight:500;background:var(--card)}
.help span{border-radius:4px;background:var(--gold)}
.toast{border-radius:6px}
@media (min-width:900px){
  /* trên máy tính: cờ cao đủ thanh tiêu đề + ô tìm, sao nhỏ lệch phải như huy hiệu */
  .tabs{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .stats b{font-size:2.4rem}
  .sec-h h2{font-size:2rem}
}
.cards{grid-template-columns:minmax(0,1fr)}.card,.card>*{min-width:0}.card .body,.card h3{overflow-wrap:anywhere}
.say{grid-template-columns:minmax(0,1fr)}.say textarea{width:100%;min-width:0}.g-search span{max-width:100%;min-width:0;overflow:hidden}
.btn{flex-shrink:0}
/* khi cuộn: thanh tiêu đề + ô tìm đỏ đặc, không để chữ bên dưới lộ qua */
.scrolled .bar,.scrolled .find{background:#C41E18;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-color-scheme:dark){:root.scrolled:not([data-theme="light"]) .bar,:root.scrolled:not([data-theme="light"]) .find{background:#7A140F}}
:root.scrolled[data-theme="dark"] .bar,:root.scrolled[data-theme="dark"] .find{background:#7A140F}
/* nút Cần giúp trên điện thoại: chỉ còn hình tròn dấu hỏi để không che nội dung */
@media (max-width:899px){.help{width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;font-size:0;gap:0}.help span{font-size:1rem;border-radius:50%}}
/* tinh chỉnh sau khi tự kiểm tra */
.ta-feed .sec-h h2{font-size:1.2rem}.sec-h .link{white-space:nowrap;margin-left:10px}
@media (min-width:900px){.pers{grid-template-columns:repeat(4,minmax(0,170px))}.per b{font-size:.85rem}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--big1:#E8705F}}
:root[data-theme="dark"]{--big1:#E8705F}
.brand{min-width:0;white-space:nowrap}.brand span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:400px){.brand{font-size:.95rem;gap:8px}.acct{padding:0 10px 0 8px;font-size:.85rem}}
@media (min-width:900px) and (max-width:1199px){.nws{grid-template-columns:1fr}}
/* số liệu: 3 cột trên điện thoại hẹp thì chữ số tự thu nhỏ theo bề rộng ô, không đè lên nhau */
.stats span{container-type:inline-size;min-width:0;padding:12px 10px}
.stats b{font-size:min(2rem,21cqi);white-space:nowrap}
@media (min-width:900px){.stats b{font-size:min(2.4rem,21cqi)}}
.stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stats:has(#stIncBox:not([hidden])){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.stats span{font-size:.64rem;letter-spacing:.05em;line-height:1.3}
.stats b{font-size:min(2rem,24cqi)}
/* mọi con số cùng một cỡ, tính theo bề rộng cả dải số liệu */
.stats{container-type:inline-size}.stats span{container-type:normal}
.stats b{font-size:min(2rem,8.5cqi)}
@media (min-width:900px){.stats b{font-size:min(2.4rem,8.5cqi)}}
/* màu chủ đạo: đỏ cờ. Vàng chỉ còn ở ngôi sao, bát hương, nén nhang */
:root{--gold:#C41E18;--gold-2:#B3140F;--gold-soft:rgba(196,30,24,.10)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--gold:#E5483F;--gold-2:#EF6A5F;--gold-soft:rgba(229,72,63,.14)}}
:root[data-theme="dark"]{--gold:#E5483F;--gold-2:#EF6A5F;--gold-soft:rgba(229,72,63,.14)}
.big i{background-image:linear-gradient(100deg,var(--big1,#8A1C17),#C41E18 55%,#E5483F)}
.row .star-i{background:#F2C94C}
body::after{background:radial-gradient(60% 100% at 50% 0,rgba(218,37,29,.16),transparent 70%)}
/* chữ chuyển sắc chỉ tô trong khung của từng chữ: nới khung lên trên/xuống dưới để dấu (ễ, í) và chân chữ p không bị cắt */
.big{line-height:1.2;overflow:visible}
.big i{padding:.28em 0 .18em;margin:-.28em 0 -.18em}
.big i{padding:.28em .14em .18em;margin:-.28em -.14em -.18em}
.big{font-weight:700;letter-spacing:-.03em}.big i{background-position:calc(var(--i) * -.66em) 0}
/* dải màu đủ rộng để chữ cuối (í) luôn được tô kín */
.big i{background-size:7em 100%;background-position:calc(var(--i) * -.6em) 0}
.big{font-size:min(2.5rem,19cqi);padding-right:.2em}
/* ===================== Chiến tích lịch sử ===================== */
.tabs{grid-template-columns:repeat(5,1fr)}
@media (max-width:899px){.tabs button{font-size:12.5px;min-width:0}.tabs button span{overflow:hidden;text-overflow:ellipsis;max-width:100%}}
.ls-h{display:grid;gap:10px;padding-bottom:6px}
.ls-h h2{font-weight:300;font-size:2rem;letter-spacing:-.04em;line-height:1.1;text-wrap:balance}
.ls-h .chips{margin:0;padding:0}
.tl{list-style:none;margin:0;padding:8px 0 45vh;position:relative;display:grid;gap:22px}
.tl::before{content:"";position:absolute;left:15px;top:0;bottom:45vh;width:2px;background:linear-gradient(var(--red),color-mix(in srgb,var(--red) 20%,transparent))}
.ms{position:relative;padding-left:44px;display:grid;gap:4px;opacity:.45;transform:scale(.92);transform-origin:left center;transition:opacity .45s var(--ease),transform .45s var(--ease);cursor:pointer}
.ms::before{content:"";position:absolute;left:8px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--red);transition:background .3s,box-shadow .3s}
.ms.on{opacity:1;transform:none;cursor:auto}
.ms.on::before{background:var(--red);box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 18%,transparent)}
.ms-y{font-weight:200;font-size:2.4rem;letter-spacing:-.05em;line-height:1;color:var(--red);font-variant-numeric:tabular-nums;transition:font-size .45s var(--ease)}
.ms.on .ms-y{font-weight:300;font-size:3.4rem}
.ms-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid}
.ms.on .ms-c{box-shadow:0 18px 40px -18px rgba(60,10,8,.45)}
.ms-v{position:relative;display:block;aspect-ratio:16/9;max-width:100%;background:#1A0E0C;overflow:hidden;color:#fff;text-decoration:none}
.ms-v img{width:100%;height:100%;object-fit:cover;display:block}
.ms-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.ms-art{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(80% 90% at 70% 30%,#C41E18 0,#7A140F 45%,#1A0E0C 100%)}
.ms-art b{font-weight:200;font-size:min(7rem,26cqi);letter-spacing:-.06em;color:rgba(255,240,230,.22)}
.ms-v{container-type:inline-size}
.ms-art i{position:absolute;left:18px;top:16px;width:26px;height:26px;background:#FFFF00;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.9}
.ms-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--red);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s var(--ease);z-index:2}
.ms-play svg{width:28px;height:28px;fill:currentColor;stroke:none;margin-left:3px}
.ms-v:hover .ms-play{transform:scale(1.08)}
.ms-soon,.ms-yt{position:absolute;left:10px;bottom:10px;font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;padding:3px 8px;border-radius:4px;z-index:2}
.ms-b{display:grid;gap:6px;padding:14px 16px 16px}
.ms-d{font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.ms-b h3{margin:0;font-weight:400;font-size:1.3rem;letter-spacing:-.025em;line-height:1.25}
.ms-s{color:var(--muted);font-size:.95rem}
.ms:not(.on) .ms-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms:not(.on) .acts{display:none}
.ms .acts .btn{min-height:44px}
.lsd{display:grid;gap:14px}
.lsd .ms-v{border-radius:var(--r)}
.lsd>.btn{justify-self:start}
.lsd-s{font-size:1.05rem;font-weight:300;line-height:1.55}
.lsd-h{margin:6px 0 0;font-weight:400;font-size:1.15rem;letter-spacing:-.02em;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lsd-bio{white-space:pre-line;line-height:1.7;-webkit-user-select:text;user-select:text}
.lsd-ph{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lsd-ph figure{margin:0;display:grid;gap:4px}
.lsd-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;background:var(--sunk)}
.lsd-ph figcaption{font-size:.8rem;color:var(--muted)}
.ms-old{display:flex;flex-wrap:wrap;gap:8px}
.ms-old label{display:grid;gap:2px;justify-items:center;font-size:.8rem}
.ms-old img{width:72px;height:54px;object-fit:cover;border-radius:4px}
@media (min-width:900px){
  #v-ls{max-width:860px;margin:0 auto}
  .ls-h h2{font-size:2.8rem}
  .ms{padding-left:64px}.tl::before{left:23px}.ms::before{left:16px}
  .ms.on .ms-y{font-size:4.2rem}
  .ms-c{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .ms-b{align-content:center}
  #msAdd{justify-self:start;width:auto}
  .tabs button{padding:0 12px}
}
@media (min-width:900px) and (max-width:1199px){.tabs button{padding:0 8px;font-size:14px}.tabs button svg{display:none}}
@media (prefers-reduced-motion:reduce){.ms{transition:none}}
@media (max-width:899px){.tabs{padding-inline:2px}.tabs button{font-size:12px;letter-spacing:-.01em;padding:0 1px}.tabs button span{white-space:normal;text-align:center;line-height:1.15;overflow:visible;max-width:none}}
/* ---------- Chiến tích lịch sử: chuyển động ---------- */
/* đường thời gian: phần đã đi qua tô đỏ tươi, chạy theo cột mốc đang xem */
.tl::after{content:"";position:absolute;left:15px;top:0;width:2px;height:var(--fill,0);background:linear-gradient(#DA251D,#FF6A4D);box-shadow:0 0 10px rgba(218,37,29,.6);transition:height .7s var(--ease);pointer-events:none}
@media (min-width:900px){.tl::after{left:23px}}
/* chấm mốc đang xem: vòng sáng lan ra */
.ms::after{content:"";position:absolute;left:8px;top:14px;width:16px;height:16px;border-radius:50%;border:2px solid var(--red);opacity:0;pointer-events:none}
@media (min-width:900px){.ms::after{left:16px}}
.ms.on::after{animation:msRing 2.2s ease-out infinite}
@keyframes msRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
/* số năm cuộn lên từng chữ số */
.ms-y span{display:inline-block}
.ms.on .ms-y span{animation:msDigit .7s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(var(--d) * 70ms)}
@keyframes msDigit{from{transform:translateY(.45em);opacity:.15;filter:blur(3px)}}
/* nội dung thẻ hiện lần lượt khi cột mốc ra giữa */
.ms.on .ms-b>*{animation:msUp .6s var(--ease) both}
.ms.on .ms-b>:nth-child(2){animation-delay:.08s}.ms.on .ms-b>:nth-child(3){animation-delay:.16s}.ms.on .ms-b>:nth-child(4){animation-delay:.24s}
@keyframes msUp{from{transform:translateY(12px);opacity:.3}}
/* ảnh bìa: phóng chậm + vệt sáng lướt + tàn lửa bay lên */
.ms-v img,.ms-art b{transition:transform 6s ease-out}
.ms.on .ms-v img,.ms.on .ms-art b{transform:scale(1.08)}
.ms-v::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,235,210,.22) 50%,transparent 65%);transform:translateX(-120%)}
.ms.on .ms-v::after{animation:msSweep 4.5s ease-in-out .3s infinite}
@keyframes msSweep{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
.ms-art em{position:absolute;bottom:-8px;left:var(--x);width:4px;height:4px;border-radius:50%;background:#FFB347;box-shadow:0 0 8px 2px rgba(255,150,60,.7);opacity:0;transform:scale(var(--s))}
.ms.on .ms-art em{animation:msEmber 4s linear infinite;animation-delay:var(--t)}
@keyframes msEmber{0%{opacity:0;translate:0 0}10%{opacity:.9}80%{opacity:.6}100%{opacity:0;translate:18px -170px}}
.ms-art i{animation:msStar 3s ease-in-out infinite}
@keyframes msStar{50%{transform:scale(1.15) rotate(8deg);filter:drop-shadow(0 0 6px rgba(255,255,0,.8))}}
/* nút phát: vòng sáng lan ra */
.ms-play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.8)}
.ms.on .ms-play::before{animation:msRing 2s ease-out infinite}
/* đầu trang Lịch sử hiện ra khi mở tab; trang chi tiết: ảnh tư liệu hiện lần lượt */
#v-ls.on .ls-h>*{animation:msUp .6s var(--ease) both}
#v-ls.on .ls-h>:nth-child(2){animation-delay:.08s}#v-ls.on .ls-h>:nth-child(3){animation-delay:.16s}#v-ls.on .ls-h>:nth-child(4){animation-delay:.24s}
#v-lsd.on .lsd>*{animation:msUp .5s var(--ease) both}
.lsd-ph figure{animation:msUp .5s var(--ease) both;animation-delay:calc(.2s + var(--n,0) * 60ms)}
.lsd-ph img{transition:transform .5s var(--ease)}
.lsd-ph a:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.tl::after{transition:none}.ms *, .ms::after,.ms-v::after{animation:none!important}.ms-v img,.ms-art b{transition:none;transform:none!important}}
/* thanh mục trên máy tính giống thanh dưới của điện thoại: icon ở trên, chữ ở dưới, viên sáng sau icon mục đang chọn */
@media (min-width:900px){
  .tabs{gap:2px}
  .tabs button,.tabs button[aria-current="page"]{display:grid;justify-items:center;align-content:center;gap:2px;min-height:62px;padding:0 10px;font-size:13px;line-height:1.1;border-radius:12px}
  .tabs button svg{display:block!important;position:relative;width:22px;height:22px}
  .tabs button::before{inset:auto;top:6px;left:50%;width:46px;height:28px;margin-left:-23px;border-radius:14px;background:rgba(255,247,238,.2);transform:scaleX(.3);opacity:0}
  .tabs button[aria-current="page"]::before{transform:none;opacity:1}
  .tabs button:hover{color:#FFF7EE}
  .tabs button:hover:not([aria-current])::before{transform:scaleX(.7);opacity:.6}
}
@media (min-width:900px) and (max-width:1199px){.tabs button,.tabs button[aria-current="page"]{padding:0 6px;font-size:12.5px}}
@media (min-width:1200px){.tabs{gap:6px}.tabs button,.tabs button[aria-current="page"]{font-size:14px;padding:0 14px}.tabs button svg{width:24px;height:24px}}
/* lớp phủ tối nhẹ trên ảnh minh hoạ để chữ và nút phát nổi, kèm tàn lửa */
.ms-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,14,12,.05),rgba(26,14,12,.55));pointer-events:none}
.ms-shade em{position:absolute;bottom:-8px;left:var(--x);width:4px;height:4px;border-radius:50%;background:#FFB347;box-shadow:0 0 8px 2px rgba(255,150,60,.7);opacity:0;transform:scale(var(--s))}
.ms.on .ms-shade em{animation:msEmber 4s linear infinite;animation-delay:var(--t)}
.ms:not(.on) .ms-v img{filter:brightness(.8)}
.ms-v img{transition:transform 6s ease-out,filter .6s}
@media (prefers-reduced-motion:reduce){.ms-shade em{animation:none!important}}
/* máy tính: khung ảnh/video cao bằng phần chữ bên cạnh, không còn dải trống phía dưới */
@media (min-width:900px){.ms-c>.ms-v{aspect-ratio:auto;height:100%;min-height:240px;align-self:stretch}.ms-c>.ms-v img{position:absolute;inset:0}}
/* các con số in đậm: số liệu đầu trang, năm trên dòng thời gian, số nén nhang */
.stats b{font-weight:700;letter-spacing:-.03em;font-size:min(2rem,7.6cqi)}
@media (min-width:900px){.stats b{font-size:min(2.4rem,7.6cqi)}}
.ms-y,.ms.on .ms-y{font-weight:700;letter-spacing:-.04em}
.ms-art b{font-weight:700}
.inc b{font-weight:700;letter-spacing:-.03em}
.d27 b{font-weight:700}
/* chấm mốc: tâm nằm đúng trên đường thời gian và ngang giữa số năm (số năm đổi cỡ khi phóng to) */
.ms{--yh:2.4rem;--rx:16px}
.ms.on{--yh:3.4rem}
.ms::before,.ms::after{box-sizing:border-box;left:var(--rx);margin-left:-8px;top:calc(var(--yh) * .52 - 8px);transition:top .45s var(--ease),background .3s,box-shadow .3s}
.tl::before,.tl::after{left:calc(var(--rx,16px) - 1px)}
@media (min-width:900px){.ms,.tl{--rx:24px}.ms.on{--yh:4.2rem}}
/* sự kiện ngày/tháng bên trong cột mốc năm */
.sub{list-style:none;margin:0;padding:0 0 0 18px;display:grid;gap:12px;position:relative}
.sub::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--gold),color-mix(in srgb,var(--gold) 20%,transparent))}
.sub li{position:relative;animation:msUp .5s var(--ease) both;animation-delay:calc(.15s + var(--n,0) * 70ms)}
.sub li::before{content:"";position:absolute;left:-18px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}
.sub-i{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:96px 1fr;grid-template-areas:"y y" "i t";gap:6px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card,transparent);transition:border-color .2s,transform .2s var(--ease)}
.sub-i:hover,.sub-i:focus-visible{border-color:var(--gold);transform:translateX(3px)}
.sub-i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sub-y{grid-area:y;font-weight:700;font-size:1.6rem;letter-spacing:-.04em;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.sub-i img{grid-area:i;width:96px;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;background:var(--sunk)}
.sub-i span{grid-area:t;display:grid;gap:3px;min-width:0}
.sub-i small{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.sub-i strong{font-weight:500;font-size:1.02rem;line-height:1.3}
.sub-i em{font-style:normal;font-size:.86rem;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sub-i:not(:has(img)){grid-template-areas:"y" "t";grid-template-columns:1fr}
@media (min-width:760px){.sub-i{grid-template-columns:72px 160px 1fr;grid-template-areas:"y i t";align-items:center}.sub-i img{width:160px}.sub-y{font-size:1.5rem}}
.sub-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sub-nav .btn{max-width:100%;white-space:normal;text-align:left}
/* tiêu đề tab Lịch sử: to và đậm */
.ls-h h2{font-weight:700;font-size:clamp(2.3rem,10.5vw,3rem);letter-spacing:-.035em;line-height:1.08}
@media (min-width:760px){.ls-h h2{font-size:4rem}}