:root{--bg:#080c0d;--bg2:#0c1314;--panel:#101a1b;--track:#1d2b2b;--sage:#86b9a1;--ivory:#ece6d6;--cream:#d6d0c1;--mute:#98a39f;--ink:#08100e;--line:rgba(134,185,161,.24);--line2:rgba(134,185,161,.11);--glow:rgba(134,185,161,.09);--ease:cubic-bezier(.2,.7,.2,1);
--h:'Noto Serif',Georgia,'Times New Roman',serif;--d:'Roboto','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:60px;color-scheme:dark}
body{background:var(--bg);color:var(--cream);font-family:var(--h);font-size:1.125rem;line-height:1.8}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--h);font-weight:800;line-height:1.25;color:var(--ivory)}
h2{font-size:clamp(1.65rem,3.4vw,2.3rem);margin-bottom:16px;max-width:30ch}
h2::after{content:"";display:block;width:64px;height:2px;margin-top:14px;background:var(--sage);transform-origin:left;transition:transform 1.1s var(--ease) .4s}
.js h2:not(.seen)::after{transform:scaleX(0)}
h2 .no{color:var(--sage);margin-right:.3em}
p{max-width:66ch;color:var(--cream)}
p+p{margin-top:1em}
#bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#4f8b72,var(--sage));width:0;z-index:30}
nav{position:sticky;top:0;z-index:20;background:rgba(8,12,13,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;gap:4px;overflow-x:auto;align-items:center}
nav b{font-family:var(--d);color:var(--sage);margin-right:auto;white-space:nowrap;font-weight:700;font-size:.95rem;padding:14px 0;letter-spacing:.02em}
nav a{font-family:var(--d);font-size:.9rem;font-weight:500;color:var(--mute);text-decoration:none;padding:15px 12px 12px;white-space:nowrap;border-bottom:3px solid transparent;transition:color .3s,border-color .3s}
nav a:hover{color:var(--ivory)}nav a.on{color:var(--sage);border-bottom-color:var(--sage)}
/* cover */
.cover{position:relative;overflow:hidden;padding:28px 0 0;border-bottom:1px solid var(--line);background:linear-gradient(rgba(134,185,161,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(134,185,161,.04) 1px,transparent 1px) 0 0/48px 48px,radial-gradient(ellipse at 10% 100%,#0e2a23 0,transparent 60%),var(--bg)}
.cover::before{content:"";position:absolute;top:-25%;right:-10%;width:65%;height:95%;background:radial-gradient(closest-side,rgba(60,150,115,.24),transparent);filter:blur(30px);pointer-events:none;translate:calc(var(--px,0)*34px) calc(var(--py,0)*22px);animation:drift 14s ease-in-out infinite alternate}
.cover .wrap{position:relative;z-index:1}
.mast{display:flex;justify-content:space-between;font-family:var(--d);font-size:.9rem;font-weight:500;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:28px;gap:12px;flex-wrap:wrap}
.cover h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.22;max-width:26ch;background:linear-gradient(180deg,#f7f1e0 25%,#b9b3a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.08em}
.cover .lead{margin-top:18px;font-size:1.1rem;font-style:italic;max-width:56ch;color:var(--cream);line-height:1.7}
.cover .mast{animation:rise 1s var(--ease) .05s both}
.cover h1{animation:riseB 1.2s var(--ease) .2s both}
.cover .lead{animation:rise 1s var(--ease) .5s both}
.cover .cta{animation:rise 1s var(--ease) .7s both}
.cover .by{animation:rise 1s var(--ease) .85s both}
.cta{position:relative;overflow:hidden;display:inline-block;margin-top:22px;background:var(--sage);color:var(--ink);font-family:var(--d);font-weight:700;font-size:.95rem;padding:12px 26px;border-radius:3px;text-decoration:none;transition:background .3s,box-shadow .3s}
.cta:hover{background:#aed5c1;box-shadow:0 8px 28px rgba(60,150,115,.35)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%)}
.cta:hover::after{transform:translateX(130%);transition:transform .9s var(--ease)}
.by{margin-top:18px;font-family:var(--d);font-size:.85rem;color:var(--mute)}
.line{margin-top:26px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,4vw,56px);border-bottom:2px solid var(--sage);padding:0 8px}
.grp{display:flex;flex-direction:column;align-items:center;gap:10px}
.grp .yr{font-family:var(--d);font-size:.85rem;font-weight:700;color:var(--sage)}
.grp .pr{display:flex;align-items:flex-end;gap:clamp(8px,1.6vw,20px)}
.ph{display:block;filter:drop-shadow(0 0 1px rgba(236,230,214,.45)) drop-shadow(0 12px 16px rgba(0,0,0,.6));transition:translate .5s var(--ease)}
.grp .ph{animation:riseP 1.2s var(--ease) both,float 6s ease-in-out infinite alternate}
.grp .ph:hover{translate:0 -12px}
section.sec{padding:80px 0}
.alt{background:var(--bg2);border-block:1px solid var(--line2)}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:52px;align-items:start}
.fact{margin:22px 0;padding-left:18px;border-left:4px solid var(--sage)}
.fact .v{font-family:var(--h);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--ivory);line-height:1.2}
.fact .v small{font-size:.5em;font-weight:700}
.fact .d{font-family:var(--d);font-size:.92rem;color:var(--mute);margin-top:4px;line-height:1.5}
.pull{font-style:italic;font-weight:700;font-size:1.25rem;line-height:1.55;color:var(--ivory);border-top:2px solid var(--sage);border-bottom:1px solid var(--line);padding:16px 0;margin:26px 0;max-width:36ch}
/* khối nội dung dùng chung: nổi nhẹ + đốm sáng theo con trỏ */
.card,.cn>div,.chg>div{position:relative;background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%),var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 60px rgba(0,0,0,.5);transition:transform .45s var(--ease),border-color .4s,box-shadow .4s}
.card::before,.cn>div::before,.chg>div::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(134,185,161,.11),transparent 60%)}
.card:hover::before,.cn>div:hover::before,.chg>div:hover::before{opacity:1}
.cn>div:hover,.chg>div:hover{transform:translateY(-5px);border-color:rgba(134,185,161,.5);box-shadow:0 24px 48px rgba(0,0,0,.45)}
.card:hover{border-color:rgba(134,185,161,.42)}
.card{padding:24px}
.ttl{font-family:var(--d);font-size:.85rem;font-weight:700;color:var(--sage);margin-bottom:14px;letter-spacing:.02em}
.cap{font-family:var(--d);font-size:.85rem;color:var(--mute);margin-top:12px;line-height:1.5}
.rd{margin-top:16px;border-left:3px solid var(--sage);padding:2px 0 2px 14px;font-style:italic;font-size:1.02rem;min-height:3.4em;color:var(--cream)}
/* donut */
.dn{width:100%;max-width:320px;display:block;margin:0 auto}
.dn .seg{fill:none;stroke:var(--s);stroke-width:46;cursor:pointer;transition:stroke .3s,stroke-width .3s var(--ease),filter .3s}
.dn .seg:hover{filter:brightness(1.2)}
.dn .seg.on{stroke:var(--sage);stroke-width:54}
.dn text{font-family:var(--h);text-anchor:middle;fill:var(--ivory);transition:opacity 1s .7s}
.js .card:not(.vis) .dn text{opacity:0}
.lgd{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:18px}
.lgd button{display:flex;align-items:center;gap:8px;font-family:var(--d);font-size:.85rem;background:none;border:1px solid transparent;border-radius:4px;padding:5px 6px;cursor:pointer;color:var(--cream);text-align:left;transition:background .3s,border-color .3s}
.lgd button:hover{background:var(--glow)}
.lgd button.on{background:var(--glow);border-color:var(--line);font-weight:700;color:var(--ivory)}
.lgd button>i{width:11px;height:11px;border-radius:2px;flex:none;background:var(--s);transition:background .3s}
.lgd button.on>i{background:var(--sage)}
.lgd b{margin-left:auto;font-weight:700}
.lg{display:inline-flex;align-items:center;width:64px;height:20px;flex:none;color:var(--mute);transition:color .3s}
.lg svg{display:block;width:100%;height:100%}
.lgd button:hover .lg{color:var(--cream)}
.lgd button.on .lg{color:var(--sage)}
@media(max-width:520px){.lgd{grid-template-columns:1fr}}
/* timeline */
.tlk{position:relative;display:flex;justify-content:space-between;margin:4px 14px 26px}
.tlk::before,.tlk .pg{content:"";position:absolute;left:0;right:0;top:13px;height:4px;background:var(--track);border-radius:2px}
.tlk .pg{background:var(--sage);right:auto;width:0;transition:width .9s ease}
.tlk button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font-family:var(--d);font-weight:700;font-size:1rem;color:var(--mute);transition:color .3s}
.tlk button i{width:30px;height:30px;border-radius:50%;background:var(--panel);border:4px solid #33433f;transition:.35s var(--ease)}
.tlk button:hover i{transform:scale(1.12)}
.tlk button.on{color:var(--sage)}.tlk button.on i,.tlk button.done i{border-color:var(--sage)}.tlk button.on i{background:var(--sage);box-shadow:0 0 0 6px rgba(134,185,161,.16)}
.stg{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:end}
.pstage{height:210px;display:flex;align-items:flex-end;justify-content:center;border-bottom:3px solid var(--track)}
.pstage img{transition:height .9s var(--ease),opacity .9s ease}
.big2{font-family:var(--h);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.25;color:var(--ivory)}
.sub2{font-family:var(--d);color:var(--mute);margin-top:6px;font-size:.95rem}
.yrs{margin-top:18px;display:grid;gap:8px;font-family:var(--d);font-size:.92rem}
.yrs div{padding:8px 12px;border:1px solid var(--line2);border-radius:4px;color:var(--mute);transition:.35s}
.yrs div.on{background:var(--glow);border-color:var(--line);color:var(--ivory);font-weight:700}
/* morph */
.mets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.met{border-top:2px solid var(--sage);padding-top:10px}
.met .k{font-family:var(--d);font-size:.8rem;font-weight:700;color:var(--mute)}
.met .v{font-family:var(--h);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--ivory);line-height:1.25;font-variant-numeric:tabular-nums}
.mbar{display:flex;gap:2px;height:64px;border-radius:4px;overflow:hidden}
.mlb{display:flex;gap:2px;margin-top:6px;font-family:var(--d);font-size:.72rem;font-weight:700;color:var(--mute)}.mlb div{min-width:0;text-align:center;overflow:hidden;white-space:nowrap}
.mbar div{color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--d);font-weight:700;font-size:.8rem;line-height:1.25;min-width:0;overflow:hidden;white-space:nowrap}
.sizebar{height:10px;border-radius:5px;background:var(--track);margin:12px 0 4px;overflow:hidden}
.sizebar i{display:block;height:100%;background:var(--sage);width:24%}
.anim .mbar div,.anim .mlb div{transition:flex .7s var(--ease),background-color .7s ease}.anim .sizebar i{transition:width .7s var(--ease)}
/* biểu đồ lộ dần từ trái sang khi cuộn tới */
.wipe{transition:clip-path 1.3s var(--ease) .3s}
.js .card:not(.vis) .wipe{clip-path:inset(0 100% 0 0 round 4px)}
.card.vis .wipe{clip-path:inset(0 0 0 0 round 4px)}
.sl{margin-top:20px;display:flex;align-items:center;gap:14px;font-family:var(--d);font-weight:700;font-size:.95rem;color:var(--cream)}
.sl input{flex:1;accent-color:var(--sage);height:28px}
.sl button{font-family:var(--d);font-weight:500;font-size:.85rem;border:1px solid var(--line);background:transparent;color:var(--sage);border-radius:4px;padding:6px 12px;cursor:pointer;transition:.3s}
.sl button:hover{background:var(--sage);color:var(--ink);border-color:var(--sage)}
/* china */
.cn{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 8px}
.cn>div{border-top:5px solid var(--c);padding:20px 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.cn b{font-family:var(--d);font-size:1.05rem;display:block;color:var(--cream)}
.cn .v{font-family:var(--h);font-weight:800;font-size:2.6rem;color:var(--ivory);line-height:1.15}
.cn .u{font-family:var(--d);font-size:.8rem;color:var(--mute)}
.cn .mini .ph{transition:translate .5s var(--ease)}
.cn>div:hover .mini .ph{translate:0 -6px}
.cmp{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.cr{display:flex;align-items:center;gap:10px;font-family:var(--d);font-size:.85rem}
.cy{width:38px;flex:none;font-weight:700;color:var(--mute)}
.ct{flex:1;height:22px;background:var(--track);border-radius:3px;overflow:hidden;display:flex;gap:2px}
.ct i{display:block;height:100%}
.cv{width:60px;text-align:right;font-weight:700;color:var(--ivory)}
.ps{display:flex;align-items:flex-end;gap:12px;flex:1;height:76px;border-bottom:2px solid #33433f}
.ps span{display:flex;align-items:flex-end;justify-content:center;flex:1;position:relative}
.ps .ph{filter:drop-shadow(0 0 1px rgba(236,230,214,.4)) drop-shadow(0 4px 5px rgba(0,0,0,.5))}
.ps .off{opacity:.7;filter:grayscale(1) brightness(1.9)}
.ps .cn5::after{content:"";position:absolute;left:10%;right:10%;bottom:-6px;height:4px;background:var(--sage);border-radius:2px;transform-origin:center;transition:transform .8s var(--ease) 1.3s}
.js .card:not(.vis) .ps .cn5::after{transform:scaleX(0)}
.js .card:not(.vis) .ps .ph{visibility:hidden}
.card.vis .ps .ph{animation:riseP .9s var(--ease) backwards;animation-delay:calc(var(--i,0)*110ms + .3s)}
/* table */
.tw{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;table-layout:fixed;font-family:var(--d);font-size:1rem;min-width:520px;background:var(--panel)}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line2);transition:background .3s}
th:first-child,td:first-child{width:48%}
thead th{background:#16231f;color:var(--sage);font-weight:700}
thead th:last-child,td:last-child{background:var(--glow)}
td:first-child{font-weight:500;color:var(--mute)}
td:nth-child(2){color:var(--cream)}
td:last-child{font-weight:700;color:var(--ivory)}
tbody tr:hover td{background:rgba(134,185,161,.10)}
tbody tr:last-child td{border-bottom:0}
.js .tw:not(.vis) tbody tr{opacity:0}
.tw.vis tbody tr{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0)*100ms + .25s)}
/* changes */
.chg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.chg>div{padding:24px;border-top:5px solid var(--c)}
.chg .n{font-family:var(--h);font-weight:800;font-size:2.6rem;color:var(--c);line-height:1}
.chg h3{font-size:1.2rem;margin:12px 0 8px}
.chg p{font-size:1rem;line-height:1.7;color:var(--cream)}
.end{background:var(--bg2);color:var(--cream);text-align:center;border-top:1px solid var(--line);background-image:radial-gradient(ellipse at 50% 0,rgba(60,150,115,.20) 0,transparent 60%)}
.end .k{font-family:var(--d);font-weight:700;letter-spacing:.2em;color:var(--sage);font-size:.85rem;margin-bottom:18px}
.end blockquote{font-family:var(--h);font-weight:700;font-style:italic;font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:1.45;max-width:30ch;margin:0 auto 26px;color:var(--ivory)}
.end p{margin:0 auto;color:var(--cream);text-align:left}
.end p+p{margin-top:1em}
footer{background:#05090a;border-top:1px solid var(--line);color:var(--mute);padding:30px 0;font-family:var(--d);font-size:.85rem;line-height:1.6}
footer a{color:var(--sage)}
i.num{font-style:normal;font-variant-numeric:tabular-nums lining-nums}

/* ===== nâng cấp thẩm mỹ & ảnh điện thoại ===== */
section.sec::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 45% at 88% 0%,rgba(60,150,115,.10),transparent 70%)}
section.alt::before{background:radial-gradient(55% 45% at 6% 100%,rgba(60,150,115,.10),transparent 70%)}
section.sec>.wrap{position:relative;z-index:1}
.line{position:relative}
.line::before{content:"";position:absolute;left:6%;right:6%;bottom:-2px;height:70px;background:radial-gradient(ellipse at 50% 100%,rgba(70,170,130,.30),transparent 70%);pointer-events:none}
.grp{position:relative;z-index:1}
.shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:28px}
.sh{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 2px 10px;background:none;border:1px solid transparent;border-radius:12px;cursor:pointer;font-family:var(--d);color:var(--mute);transition:background .4s,border-color .4s,color .4s}
.sh .stand{position:relative;height:130px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.sh .stand::after{content:"";position:absolute;left:10%;right:10%;bottom:-7px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(134,185,161,.5),transparent);opacity:0;transition:opacity .5s}
.sh img{display:block;height:120px;width:auto;opacity:.5;filter:grayscale(.7) drop-shadow(0 8px 10px rgba(0,0,0,.5));transition:opacity .5s,filter .5s,transform .6s var(--ease)}
.sh b{font-size:.78rem;font-weight:700}
.sh em{font-style:normal;font-size:.75rem}
.sh:hover img{opacity:.85}
.sh.on{background:var(--glow);border-color:var(--line);color:var(--ivory)}
.sh.on img{opacity:1;filter:drop-shadow(0 0 1px rgba(236,230,214,.5)) drop-shadow(0 14px 16px rgba(0,0,0,.6));transform:translateY(-8px) scale(1.06)}
.sh.on .stand::after{opacity:1}
.pstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line2)}
.pslot{position:relative;height:126px}
.pslot img{position:absolute;left:50%;bottom:0;height:112px;width:auto;transform-origin:50% 100%;filter:drop-shadow(0 0 1px rgba(236,230,214,.4)) drop-shadow(0 10px 12px rgba(0,0,0,.55))}
.pname{position:relative;height:1.5em;margin-top:6px;font-family:var(--d);font-size:.74rem;font-weight:700;color:var(--mute);text-align:center}
.pname span{position:absolute;inset:0}
.chg .n{height:92px}
.chp{position:absolute;top:22px;right:20px;display:flex;align-items:flex-end;gap:6px;height:84px}
.chp img{display:block;width:auto;filter:drop-shadow(0 0 1px rgba(236,230,214,.4)) drop-shadow(0 8px 10px rgba(0,0,0,.5));transition:translate .5s var(--ease)}
.chg>div:hover .chp img{translate:0 -6px}
.end .p.src,.end p.src{text-align:center;margin-top:22px;font-size:.88rem;letter-spacing:.04em;color:var(--sage);line-height:1.7}
.end .line{margin-top:46px;border-bottom-color:var(--line)}
.end .grp .ph{animation:float 7s ease-in-out infinite alternate}
.end blockquote{background:linear-gradient(180deg,#f7f1e0 25%,#b9b3a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media(max-width:520px){.shelf{gap:2px}.sh b{font-size:.68rem}.sh img{height:96px}.sh .stand{height:106px}}
/* hiệu ứng xuất hiện khi cuộn */
.js .rv:not(.in){opacity:0}
.rv.in{animation:rise 1s var(--ease) both;animation-delay:var(--dl,0s)}
.end .rv.in{animation-name:riseB}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes riseB{from{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes riseP{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes drift{from{transform:translate(-5%,0) scale(1)}to{transform:translate(5%,7%) scale(1.15)}}
@media(max-width:820px){.two,.cn,.chg,.mets{grid-template-columns:1fr}.two{gap:28px}.stg{grid-template-columns:1fr}.pstage{height:150px}
section.sec{padding:56px 0}.line{zoom:.6}.mbar div{font-size:.65rem}}

/* ===== tối ưu đa nền tảng (web, mobile, iOS/Android/Windows/macOS/Linux) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-wrap:break-word;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img,svg{max-width:100%}
button,input,a{touch-action:manipulation}
button{font:inherit;-webkit-appearance:none;appearance:none}
nav{padding-top:env(safe-area-inset-top,0px)}
#bar{top:env(safe-area-inset-top,0px)}
nav .wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
nav .wrap::-webkit-scrollbar{display:none}
.tw{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.sl input{touch-action:pan-y;min-height:44px}
.sl button,.lgd button,.tlk button,.sh{min-height:44px}
nav a{min-height:44px;display:inline-flex;align-items:center}
.cta{min-height:44px}
/* hover chỉ áp dụng cho thiết bị có chuột; tránh "kẹt hover" trên cảm ứng */
@media(hover:none){
.cn>div:hover,.chg>div:hover{transform:none;border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 60px rgba(0,0,0,.5)}
.card:hover::before,.cn>div:hover::before,.chg>div:hover::before{opacity:0}
.grp .ph:hover,.cn>div:hover .mini .ph,.chg>div:hover .chp img{translate:none}
.cta:hover::after{transform:translateX(-130%)}
.cta:hover{background:var(--sage);box-shadow:none}
.sh:hover img{opacity:.5}.sh.on:hover img{opacity:1}
.lgd button:hover,.sl button:hover{background:transparent;color:inherit}
.lgd button.on:hover{background:var(--glow)}
.sl button:hover{color:var(--sage)}
}
/* điện thoại: nhẹ máy, bỏ hiệu ứng nặng */
@media(max-width:820px){
body{font-size:1.06rem;line-height:1.75}
.wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.cover::before{filter:blur(18px);animation:none}
.grp .ph,.end .grp .ph{animation:riseP 1.2s var(--ease) both}
.card,.cn>div,.chg>div{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.45)}
.card{padding:20px}
.cn .v{font-size:2.2rem}
th,td{padding:12px 14px}
}
@media(max-width:380px){
body{font-size:1rem}
.cover h1{font-size:1.9rem}
.tlk button{font-size:.9rem}
.mets{gap:10px}
}
/* màn hình ngang thấp (điện thoại xoay ngang) */
@media(max-height:480px) and (orientation:landscape){section.sec{padding:40px 0}.pstage{height:130px}}
/* màn hình lớn */
@media(min-width:1600px){body{font-size:1.2rem}.wrap{max-width:1180px}}
/* trình duyệt cũ không hỗ trợ zoom/backdrop-filter */
@supports not (zoom:1){@media(max-width:820px){.line{transform:scale(.6);transform-origin:50% 100%;margin-left:-20%;margin-right:-20%}}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){nav{background:rgba(8,12,13,.97)}}
@supports not (background-clip:text){.cover h1,.end blockquote{-webkit-text-fill-color:currentColor;color:var(--ivory);background:none}}
/* in ấn */
@media print{
html,body{background:#fff!important;color:#111!important}
nav,#bar,.cta,.sl,.lgd,.tlk,.shelf{display:none!important}
.sec,.alt,.end,.cover{background:#fff!important;color:#111!important;padding:24px 0!important}
.card,.cn>div,.chg>div{box-shadow:none!important;background:#fff!important;border:1px solid #bbb!important;break-inside:avoid}
h1,h2,h3,p,.end blockquote,.fact .v,.big2{color:#111!important;-webkit-text-fill-color:#111!important;background:none!important}
.js .rv:not(.in){opacity:1!important}
}

/* ===== chuyển trang bằng nút "Cuộn xuống" ===== */
:root{--nav:56px}
html{scroll-padding-top:var(--nav)}
header.cover,section.sec{display:flex;flex-direction:column;min-height:calc(100vh - var(--nav));min-height:calc(100svh - var(--nav))}
header.cover>.wrap,section.sec>.wrap{width:100%;margin-block:auto}
section.sec{padding-bottom:0}
.src a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sage);font-weight:700;transition:color .3s}
.src a:hover{color:var(--sage)}
.pgnav{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 18px calc(34px + env(safe-area-inset-bottom,0px))}
.pgn{font-family:var(--d);font-size:.8rem;letter-spacing:.16em;color:var(--mute);font-variant-numeric:tabular-nums}
.down{position:relative;font-family:var(--d);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 30px;border:1px solid var(--sage);border-radius:999px;background:rgba(134,185,161,.08);color:var(--sage);font-weight:700;font-size:.98rem;letter-spacing:.02em;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.down svg{width:18px;height:18px;flex:none;animation:nudge 1.6s ease-in-out infinite}
.down.up svg{transform:rotate(180deg);animation:none}
.down:hover{background:var(--sage);color:var(--ink);box-shadow:0 8px 28px rgba(60,150,115,.35)}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.cover .pgnav{animation:rise 1s var(--ease) .9s both}
@media print{.pgnav{display:none!important}}

/* ===== bản WEB: bố cục rộng, mỗi trang vừa một màn hình ===== */
section.sec{padding-top:72px}
.pgnav{padding-bottom:44px}

/* ===== NÂNG CẤP: màu, chữ, chuyển động, hiệu năng ===== */
:root{--bg:#07090a;--bg2:#0b1011;--panel:#0e1516;--track:#1a2525;--ivory:#f0eadb;--cream:#cdc8b9;--mute:#9aa5a0;--line:rgba(134,185,161,.2);--line2:rgba(134,185,161,.1);--glow:rgba(134,185,161,.07);--ease:cubic-bezier(.16,1,.3,1);--h:'Source Serif 4','Noto Serif',Georgia,serif;--d:'IBM Plex Sans',Roboto,'Segoe UI',system-ui,sans-serif}
body{line-height:1.7;font-optical-sizing:auto}
h1,h2,h3{font-weight:600;letter-spacing:-.012em;text-wrap:balance}
p{max-width:60ch;text-wrap:pretty;line-height:1.72}
p+p{margin-top:1.15em}
h2{line-height:1.14;margin-bottom:clamp(20px,3vh,32px);max-width:22ch}
h2::after{display:none}
h2 .no{font-weight:400;color:var(--sage);margin-right:.35em}
.cover{background:radial-gradient(ellipse at 12% 110%,#0d241e 0,transparent 62%),var(--bg)}
.cover::before{display:none}
.cover h1{background:none;-webkit-text-fill-color:currentColor;color:var(--ivory);line-height:1.08;letter-spacing:-.02em;font-weight:700;max-width:19ch;padding:0}
.cover .lead{font-style:normal;line-height:1.65;max-width:52ch;margin-top:clamp(20px,3vh,32px)}
.by{margin-top:20px;font-size:.8125rem}
.end blockquote{background:none;-webkit-text-fill-color:currentColor;color:var(--ivory);font-weight:600;line-height:1.38}
.ttl{font-size:.8125rem;font-weight:600;letter-spacing:0;margin-bottom:18px}
.cap{font-size:.8125rem;margin-top:14px}
.fact{border-left:2px solid var(--sage);padding-left:20px;margin:clamp(22px,3.4vh,34px) 0}
.fact .v{font-weight:700;letter-spacing:-.02em}
.fact .d{font-size:.9rem;margin-top:6px}
.pull{font-weight:600;font-size:1.4rem;line-height:1.45;border-top:1px solid var(--sage);border-bottom:0;padding:20px 0 0;margin:clamp(28px,4vh,40px) 0;max-width:30ch}
.rd{font-size:1rem;min-height:3.6em;border-left:2px solid var(--sage)}
.fact .v,.cv,.met .v,.cn .v,.big2,td,.chg .n{font-variant-numeric:tabular-nums lining-nums}
.met .v,.cn .v,.big2{font-weight:700;letter-spacing:-.015em}
.chg .n{font-size:1.6rem;font-weight:600}
.chg h3{font-size:1.25rem;font-weight:600}
.end .k{letter-spacing:0;font-size:.9rem;font-weight:600}
.end p.src{letter-spacing:0}
.pgn{letter-spacing:.04em}
section.sec{position:relative}
section.sec::before{background:radial-gradient(50% 40% at 90% 0,rgba(60,150,115,.06),transparent 70%)}
section.alt::before{background:radial-gradient(50% 40% at 4% 100%,rgba(60,150,115,.06),transparent 70%)}
/* thẻ phẳng: một đường viền mảnh, không đổ bóng, không nâng khi rê chuột */
.card,.cn>div,.chg>div{background:var(--panel);border:1px solid var(--line2);border-radius:6px;box-shadow:none;transition:none}
.card::before,.cn>div::before,.chg>div::before{display:none}
.card:hover,.cn>div:hover,.chg>div:hover{transform:none;border-color:var(--line2);box-shadow:none}
.cn>div,.chg>div{border-top:3px solid var(--c)}
.card{padding:clamp(22px,2.6vw,36px)}
.cn>div{padding:22px 24px}
.chg>div{padding:clamp(22px,2.4vw,32px)}
/* biểu đồ */
.dn .seg{stroke-width:34;transition:stroke .3s,stroke-width .35s var(--ease)}
.dn .seg:hover{filter:none;opacity:.88}
.dn .seg.on{stroke-width:42}
.mbar{height:72px;border-radius:2px}
.mbar div{font-weight:600;font-variant-numeric:tabular-nums}
.ct{height:18px;border-radius:2px}
.sizebar{height:6px;border-radius:3px}
.wipe{transition:clip-path 1.4s var(--ease) .25s}
.pstage img{height:190px!important;transform-origin:50% 100%;transition:transform .9s var(--ease),opacity .9s ease}
.tw{border:0;border-top:1px solid var(--line);border-radius:0;margin-top:clamp(28px,5vh,48px)}
table{background:none}
th,td{padding:18px 20px 18px 0;border-bottom:1px solid var(--line2)}
thead th{background:none;font-size:.8125rem;border-bottom:1px solid var(--line)}
thead th:last-child,td:last-child{background:none}
td{font-size:1.0625rem}
/* hiệu năng: bỏ blur nền, bỏ vòng lặp vô hạn, thanh tiến trình dùng transform */
nav{background:rgba(7,9,10,.95);-webkit-backdrop-filter:none;backdrop-filter:none}
#bar{width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;background:var(--sage)}
.ph{filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
.grp .ph,.end .grp .ph{animation:riseP 1.2s var(--ease) both}
.down svg{animation:nudge 1.6s ease-in-out 3}
/* chuyển động: một màn mở đầu, còn lại tiết chế; chỉ dùng transform + opacity */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes riseB{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes riseP{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.rv.in{animation-duration:.85s}
.cover h1{animation-duration:1.3s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ===== bản WEB: lưới rộng, khoảng thở lớn ===== */
.wrap{max-width:1180px;padding:0 clamp(20px,4vw,48px)}
.cover h1{font-size:clamp(2.3rem,5.8vw,4.8rem)}
.cover .lead{font-size:1.2rem}
h2{font-size:clamp(1.8rem,3.7vw,3rem)}
.fact .v{font-size:clamp(1.7rem,3.2vw,2.7rem)}
.two{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6.5vw,96px)}
section.sec{padding-top:clamp(88px,13vh,136px)}
section.sec .two[style]{margin-top:clamp(28px,5vh,52px)!important}
.cn{gap:24px;margin:clamp(32px,5vh,52px) 0 8px}
.chg{gap:24px;margin-top:clamp(32px,5vh,52px)}
@media(min-width:1600px){.wrap{max-width:1280px}}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:36px}.pstage{height:200px}section.sec{padding-top:72px}.pull{font-size:1.25rem}}

/* chống méo ảnh: giữ đúng tỉ lệ dù CMS/theme ép width hoặc height cho thẻ img */
img{object-fit:contain}
.pstage img,.ph,.sh img,.pslot img,.chp img,.bd{width:auto!important;max-width:none!important;flex:none}
.pstage img{aspect-ratio:138/300}