/* MCK Special Interview — Side A / Side B
   Khung thiết kế cao 1080px (desktop, zoom theo chiều cao cửa sổ) hoặc rộng 402px (mobile, zoom theo chiều rộng).
   Mọi toạ độ trong CSS/JS là "px thiết kế"; --z là hệ số phóng. */
@font-face{font-family:"Basteleur VN";src:url(SVN-Basteleur-Moonlight.otf) format("opentype");font-display:block}
@font-face{font-family:"Apparat";font-weight:400;src:url(SVN-Apparat-Regular.otf) format("opentype");font-display:swap}
@font-face{font-family:"Apparat";font-weight:700;src:url(SVN-Apparat-Heavy.otf) format("opentype");font-display:swap}
@font-face{font-family:"Inclusive Sans";font-weight:400 700;font-display:swap;src:url(InclusiveSans-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inclusive Sans";font-weight:400 700;font-display:swap;src:url(InclusiveSans-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inclusive Sans";font-weight:400 700;font-display:swap;src:url(InclusiveSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chivo Mono";font-weight:200;font-display:swap;src:url(ChivoMono-200-vi.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Chivo Mono";font-weight:200;font-display:swap;src:url(ChivoMono-200-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chivo Mono";font-weight:200;font-display:swap;src:url(ChivoMono-200-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--paper:#f7f7f7;--ink:#000;--chrome:#dbdbdb;
  --display:"Basteleur VN",Georgia,serif;--body:"Apparat","Inclusive Sans",system-ui,sans-serif;--ui:"Inclusive Sans",system-ui,sans-serif;--mono:"Chivo Mono",ui-monospace,monospace;
  --z:1;--sh:1080px;--fs:22px;--lh:34px}
html.mob{--sh:var(--vh);--fs:16px;--lh:24px}

/* ---------- cô lập khỏi CSS của trang IMS (p, h1-3, img bị style chung) ---------- */
#scroller,#chrome,#gal,#lb{font-family:var(--body);font-size:16px;line-height:1.3;font-weight:400;font-style:normal;color:#000;letter-spacing:0;text-transform:none;text-align:left;text-indent:0;-webkit-text-size-adjust:100%}
#scroller *,#chrome *,#gal *,#lb *{box-sizing:border-box}
#scroller p,#scroller h1,#scroller h2,#scroller h3,#chrome p,#lb p{margin:0;padding:0;font:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;text-indent:0}
#scroller img,#gal img{max-width:none;border:0;box-shadow:none}
html,body{margin:0;height:100%;background:#000;overflow:hidden;overscroll-behavior:none}
:where(#scroller,#chrome,#gal,#lb) a{color:inherit}
:where(#scroller,#chrome,#gal,#lb) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#scroller img,#gal img,#lb img{display:block;-webkit-user-drag:none;user-select:none}

#scroller{touch-action:pan-x;position:fixed;left:0;right:0;top:var(--top,0px);height:calc(var(--vh) * var(--z));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
#scroller::-webkit-scrollbar{display:none}
#strip{display:flex;width:max-content;height:var(--sh);zoom:var(--z);opacity:0;transition:opacity .6s}
html.ready #strip{opacity:1}

.sec{position:relative;flex:none;height:var(--sh);overflow:hidden;background:var(--paper)}
.sec.k{background:#000;color:var(--paper)}
.sec.w{background:#fff}
.a{position:absolute}
.hl{display:none}


/* ---------- ảnh + parallax ngang ---------- */
.fr{position:absolute;overflow:hidden;background:#d9d9d9}
.k .fr,.fr.dk{background:#161616}
.fr>img,.fr>.bgim{position:absolute;top:0;left:-14%;width:128%;height:100%;object-fit:cover;max-width:none;will-change:transform;transform:translate3d(calc(var(--p,0)*-10.5%),0,0)}
.fr.soft>img{left:-7%;width:114%;transform:translate3d(calc(var(--p,0)*-6%),0,0)}
.fr.nopx>img{left:0;width:100%;transform:none}
.fr.tall>img{left:-18%;width:136%;transform:translate3d(calc(var(--p,0)*-13%),0,0)}
.bgfull{inset:0;width:100%;height:100%}

/* ---------- chữ ---------- */
.col{position:absolute;font:400 var(--fs)/var(--lh) var(--body);letter-spacing:0}
#scroller .col p+p{margin-top:var(--lh)}
.col p{overflow-wrap:break-word}
.col .dc{float:left;font:calc(var(--lh)*4.835)/calc(var(--lh)*3.6) var(--display);width:calc(var(--lh)*4.3);height:calc(var(--lh)*4);margin:2px 18px 0 -6px;letter-spacing:-.07em;color:currentColor}
.k .col{color:var(--paper)}
.ttl{position:absolute;text-transform:uppercase;font:400 95.6px/96px var(--display);letter-spacing:-.07em;color:var(--chrome);margin:0}
.ttl.sm{font-size:76.4px;line-height:77px}
.cover-t{position:absolute;text-transform:uppercase;font:400 93.8px/84px var(--display);letter-spacing:-.07em;text-align:center}
.df{mix-blend-mode:difference;color:var(--chrome)}
.q{position:absolute;font:400 26.8px/37px var(--display);letter-spacing:-.04em;text-align:center;color:var(--paper)}
.q.l{text-align:left}
.q.big{font-size:26.8px}
#scroller .q p+p{margin-top:37px}
.ln{display:block}
.mono{position:absolute;font:200 16.4px/20px var(--mono);letter-spacing:-.03em;color:var(--paper);white-space:nowrap;text-align:center}
.emb{position:absolute}
.svg{position:absolute;background:currentColor;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}

/* ---------- reveal: mờ → rõ ---------- */
[data-rv]{opacity:0;filter:blur(14px);transform:translate3d(0,18px,0);transition:opacity 1s cubic-bezier(.2,.7,.2,1),filter 1.15s cubic-bezier(.2,.7,.2,1),transform 1.15s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;filter:blur(0);transform:none}
[data-rv=img]{filter:blur(22px);transform:scale(1.03);transition-duration:1.3s,1.5s,1.5s}
[data-rv=img].in{transform:none}
.js-l .ln>span{display:block;opacity:0;filter:blur(12px);transform:translate3d(0,12px,0);transition:opacity .9s,filter 1s,transform 1s;transition-delay:calc(var(--i)*.13s + var(--d,0s))}
.js-l.in .ln>span{opacity:1;filter:blur(0);transform:none}
.js-l[data-rv]{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){[data-rv],.js-l .ln>span{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}}

/* ---------- CHROME (luôn hiện) ---------- */
#chrome{position:fixed;inset:var(--top,0px) 0 0 0;z-index:50;pointer-events:none;mix-blend-mode:difference;color:var(--chrome);font-family:var(--ui)}
#chrome .cin{position:absolute;left:0;top:0;width:var(--vw);height:var(--vv,var(--vh));transform:scale(var(--z));transform-origin:0 0}
#chrome a,#chrome button{pointer-events:auto}
.sw{position:absolute;left:25px;top:23px;display:flex;gap:16px}
.sw a{display:block;height:25px;padding:0 12px;border:1px solid var(--chrome);font:400 14px/23px var(--ui);text-decoration:none;color:var(--chrome);white-space:nowrap;letter-spacing:0;transition:background .3s,color .3s}
.sw a.on{background:var(--chrome);color:#000}
.emag{position:absolute;left:317px;top:20px;font:400 12px/14.6px var(--ui);color:var(--chrome);white-space:nowrap}
.allph{position:absolute;right:20px;top:20px;height:19px;display:flex;align-items:center;gap:0;background:var(--chrome);color:#000;font:400 12px/15px var(--ui);padding:0 5px;white-space:nowrap}
.allph b{display:flex;gap:2px;margin-right:12px}
.allph i{display:block;width:8px;height:13px;background:#000}
.prog{position:absolute;left:33px;right:40px;bottom:12px;height:56px;transition:opacity .5s}
.prog .bars{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex;justify-content:space-between;align-items:flex-end}
.prog .bars i{display:block;width:2px;height:6px;background:var(--chrome);opacity:.34;transition:height .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.prog .bars i.on{height:20px;opacity:1}
.prog .marks i{position:absolute;bottom:0;width:2px;height:20px;background:var(--chrome)}
.prog .labels span{position:absolute;bottom:32px;font:400 14px/17px var(--ui);white-space:nowrap;color:var(--chrome);opacity:.55;transition:opacity .3s}
.prog .labels span.on{opacity:1}
html.hero #chrome .prog{opacity:0}

/* ---------- hero ---------- */
.hero{background:#fff}
.hero .fr{background:transparent}
.hero .wm{position:absolute;left:20px;width:1880px}
.hero .foot{position:absolute;bottom:20px;left:0;right:0;font:400 14px/17px var(--ui);color:var(--chrome)}
.hero .foot span,.hero .foot b{position:absolute;bottom:0;white-space:nowrap}
.hero .foot b{font-weight:700}

/* ---------- dải chuyển ---------- */
.strip{width:189px;flex:none}
.g-wk{background:linear-gradient(90deg,#f7f7f7 0%,#e8ebed 19%,#a9b7c7 47%,#4b5465 75%,#030506 100%)}
.g-kw{background:linear-gradient(90deg,#030506 0%,#4b5465 25%,#a9b7c7 53%,#e8ebed 81%,#f7f7f7 100%)}

/* ---------- cover chương ---------- */
.cvr .emb{color:var(--paper)}

/* ---------- video ---------- */
.vid{display:flex;align-items:center;justify-content:center}
.vid .vbox{position:relative;width:1180px;aspect-ratio:16/9;background:#0c0c0c}
.vid .vbox>*{position:absolute;inset:0;width:100%;height:100%}
.vid .vbox video{object-fit:contain;background:#000}
.vid .vph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#9a9a9a;font:200 16px/1.4 var(--mono);text-align:center;letter-spacing:-.02em;border:1px solid #2a2a2a;background:radial-gradient(ellipse at 50% 40%,#1b1b1b,#070707)}
.vid .vph i{width:74px;height:74px;border:1px solid #777;border-radius:50%;position:relative}
.vid .vph i:after{content:"";position:absolute;left:30px;top:22px;border-left:22px solid #999;border-top:15px solid transparent;border-bottom:15px solid transparent}
.vid .cap{position:absolute;left:0;right:0;bottom:92px;text-align:center;font:200 16px/20px var(--mono);color:#8c8c8c;letter-spacing:-.03em}

/* ---------- B: chat + pin ---------- */
.pin{position:relative;flex:none;height:var(--sh)}
.stage{position:sticky;left:0;width:var(--vw);height:var(--sh);overflow:hidden;background:var(--paper)}
.stage.dim{background:#000}
.stage .bgp{position:absolute;inset:0}
.stage .bgp img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--br,1));transform:scale(var(--sc,1.04))}
.stage .shade{position:absolute;inset:0;background:#000;opacity:var(--dk,0)}
.chat{position:absolute;left:50%;width:780px;margin-left:-390px;top:0;bottom:0;overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent 0,transparent 56px,#000 150px,#000 100%);mask:linear-gradient(180deg,transparent 0,transparent 56px,#000 150px,#000 100%)}
.chat .roll{position:absolute;left:0;right:0;top:0;transition:transform .18s linear}
.measuring .cq,.measuring .cm,.measuring .cbq{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
.cq,.cm,.cbq{opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(8px);transition:opacity .55s,transform .65s cubic-bezier(.2,.8,.2,1),filter .55s;transform-origin:50% 100%}
.cq.on,.cm.on,.cbq.on{opacity:1;transform:none;filter:none}
.cq{display:flex;gap:12px;align-items:flex-start;margin-top:41px;font:700 22px/32px var(--body);letter-spacing:.005em}
.cq:first-child{margin-top:0}
.cq b{flex:none;width:30px;height:30px;margin-top:1px;background:#000;color:var(--paper);display:grid;place-items:center;font:700 13px/1 var(--body)}
.cm{position:relative;margin-top:44px;padding-left:92px;min-height:76px}
.cm .av{position:absolute;left:0;top:0;width:76px;height:76px;border-radius:50%;object-fit:cover;background:#bbb;display:grid;place-items:center;font:700 26px/1 var(--body);color:var(--paper);overflow:hidden;border:0}
.cm .nm{display:block;font:700 22px/32px var(--body);margin-bottom:12px}
.cm .tx{font:400 var(--fs)/var(--lh) var(--body);letter-spacing:0}
#scroller .cm .tx p+p{margin-top:var(--lh)}
.cm.same{margin-top:var(--lh)}
.cm.same .av,.cm.same .nm{display:none}
.cm.same{min-height:0}
.dim .cq{color:#000}
.card .cm,.card .cq{background:#fff;padding:20px 20px 20px 104px;margin-top:33px;min-height:0}
.card .cm .av{left:20px;top:20px}
.card .cq{padding:20px;color:#000}
.card .cm.same{padding-left:104px;margin-top:2px}
.card .cm.same .tx{padding-top:0}
.card .cm:first-child,.card .cq:first-child{margin-top:0}
.chat .roll .end{margin-top:60px;font:700 18px/28px var(--body);text-align:center;opacity:0;transition:opacity .6s}
.chat .roll .end.on{opacity:1}

/* B: quote trên ảnh */
.qimg .shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.28),rgba(0,0,0,.72) 85%)}
.qimg .bgim{position:absolute;top:0;left:-14%;width:128%;height:100%;object-fit:cover;max-width:none;transform:translate3d(calc(var(--p,0)*-10.5%),0,0);filter:saturate(.9)}
.qimg .who{position:absolute;font:200 16.4px/20px var(--mono);letter-spacing:-.03em;color:var(--chrome);white-space:nowrap}
.divd .t{position:absolute;text-transform:uppercase;font:400 76.4px/80px var(--display);letter-spacing:-.07em;color:var(--chrome)}

/* ---------- toàn bộ ảnh ---------- */
#gal{position:fixed;inset:0;z-index:80;background:#0b0b0b;color:var(--chrome);overflow:auto;padding:0 clamp(16px,3vw,40px) 60px;font-family:var(--ui)}
#gal[hidden],#lb[hidden]{display:none}
.gal-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px 0;background:linear-gradient(#0b0b0b 70%,transparent);font:400 13px/17px var(--ui)}
.gal-top button{border:1px solid var(--chrome);padding:2px 8px}
.gal-body h3{font:400 13px/17px var(--ui);margin:26px 0 12px;opacity:.6}
.gal-grid{columns:5 220px;column-gap:10px}
.gal-grid button{display:block;width:100%;margin:0 0 10px;break-inside:avoid;background:#1b1b1b;overflow:hidden}
.gal-grid img{width:100%;height:auto;transition:transform .5s,opacity .4s;opacity:.92}
.gal-grid button:hover img{transform:scale(1.03);opacity:1}
.gal-grid .onw{background:#fff}
#lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:grid;place-items:center}
.lb-img{width:92vw;height:86vh;background:center/contain no-repeat;margin-top:-2vh}
.lb-img.onw{background-color:#fff}
.lb-x,.lb-n{position:absolute;color:var(--chrome);font:400 13px/17px var(--ui);border:1px solid var(--chrome);padding:4px 10px}
.lb-x{bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}
.lb-n{top:50%;font-size:18px;padding:6px 14px}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-c{position:absolute;top:16px;left:0;right:0;text-align:center;font:400 12px/15px var(--ui);color:var(--chrome);opacity:.7}

/* ---------- MOBILE (khung 402 × vh) ---------- */
html.mob .sw{left:10px;top:auto;bottom:62px;gap:8px}
html.mob .sw a{font-size:10px;height:25px;line-height:23px}
html.mob .emag{left:15px;top:18px;font-size:14px;line-height:15px}
html.mob .allph{right:9px;top:20px;font-size:12px}
html.mob .prog{left:10px;right:10px;bottom:10px;height:44px}
html.mob .prog .labels span{font-size:10px;bottom:22px}
html.mob .prog .labels span:not(.on){display:none}
html.mob .prog .marks i{height:14px}
html.mob .prog .bars{height:18px}html.mob .prog .bars i{width:1.5px;height:5px}html.mob .prog .bars i.on{height:14px}
html.mob #gal .gal-grid{columns:2 140px}
html.mob .hero .foot{display:none}
html.mob .stage .chat{width:362px;margin-left:-181px}
html.mob .cm{padding-left:62px;min-height:50px}
html.mob .cm .av{width:48px;height:48px;font-size:19px}
html.mob .cm .nm{font-size:17px;line-height:24px;margin-bottom:6px}

html.mob .cq{font-size:17px;line-height:24px;gap:8px;margin-top:26px}
html.mob .cq b{width:20px;height:20px;font-size:11px}
html.mob .card .cm{padding:14px 14px 14px 72px}
html.mob .card .cm .av{left:14px;top:14px}
html.mob .card .cm.same{padding-left:72px}
html.mob .card .cq{padding:14px}



.divd .shade{position:absolute;inset:0;background:rgba(0,0,0,.68)}
.divd .fr{opacity:1}
.end button{background:none}

.cbq{margin:56px 0 15px;padding:0 6px;font:400 26.8px/37px var(--display);letter-spacing:-.04em;color:#000}
#scroller .cbq p+p{margin-top:18px}
.cbq em{display:block;font:200 14px/18px var(--mono);font-style:normal;letter-spacing:-.02em;opacity:.55;margin-bottom:2px}
.card .cbq{background:#fff;padding:24px 22px;margin-top:33px}
html.mob .cbq{font-size:20px;line-height:28px;margin:34px 0 8px}

/* ---------- quote Side B (ghim: ảnh → tối dần → chữ) ---------- */
#scroller .qbox{position:absolute;width:760px;color:#f7f7f7;font:400 26.8px/37px var(--display);letter-spacing:-.04em;text-align:center;text-shadow:0 1px 18px rgba(0,0,0,.45)}
#scroller .qbox p+p{margin-top:37px}
#scroller .qb-c{left:50%;top:50%;transform:translate(-50%,-50%)}
#scroller .qb-bl,#scroller .qb-tl,#scroller .qb-br,#scroller .qb-tr{text-align:left}
#scroller .qb-bl{left:90px;bottom:130px}#scroller .qb-tl{left:90px;top:150px}
#scroller .qb-br{right:90px;bottom:130px}#scroller .qb-tr{right:90px;top:150px}
.qbox .who{margin-top:30px;font:200 16.4px/20px var(--mono);letter-spacing:-.03em;color:var(--chrome);opacity:0;transition:opacity 1s .8s}
.qbox.in .who{opacity:1}
html.mob #scroller .qbox{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%);text-align:left}

/* ---------- logo eMagazine trên ảnh + chống lưu ảnh ---------- */
:root { --wm: url("data:image/svg+xml,%3Csvg width='26' height='133' viewBox='0 0 26 133' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.0918 128.518C15.8042 128.071 16.6466 126.835 16.6466 124.811C16.6466 123.522 16.1846 122.523 15.2877 121.865L16.9186 119.131C18.8486 120.419 19.8267 122.339 19.8267 124.863C19.8267 127.046 19.1472 128.781 17.7883 130.096C16.4294 131.411 14.7173 132.068 12.6514 132.068C10.613 132.068 8.92787 131.411 7.5417 130.122C6.15585 128.834 5.47607 127.177 5.47607 125.126C5.47607 123.18 6.15585 121.603 7.5417 120.367C8.92787 119.104 10.613 118.473 12.6514 118.473C13.0318 118.473 13.5211 118.526 14.0918 118.605L14.0918 128.518ZM11.374 121.865C9.5531 122.26 8.62888 123.338 8.62888 125.126C8.62888 126.993 9.5531 128.15 11.374 128.571L11.374 121.865Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1561 0.134109L14.1561 10.2305C15.8647 9.775 16.7053 8.51665 16.7053 6.45423C16.7053 5.14223 16.2444 4.12444 15.3494 3.45486L16.9768 0.669834C18.9024 1.98216 19.8784 3.93692 19.8784 6.50791C19.8784 8.73069 19.2004 10.4982 17.8445 11.8374C16.4886 13.1763 14.7803 13.8458 12.7189 13.8458C10.685 13.8458 9.00357 13.1762 7.62044 11.8642C6.23765 10.5519 5.55937 8.86454 5.55937 6.77594C5.55937 4.79403 6.23765 3.18715 7.62044 1.9285C9.00357 0.643001 10.685 0.000256753 12.7189 0.000256777C13.0985 0.000256782 13.5866 0.0539273 14.1561 0.134109ZM8.70524 6.77594C8.70524 8.67735 9.62743 9.8555 11.4443 10.2842L11.4443 3.45486C9.62743 3.85674 8.70524 4.95471 8.70524 6.77594ZM11.6072 18.8805C10.7122 18.8805 10.0343 19.1217 9.51892 19.6034C9.05766 20.0586 8.81375 20.7017 8.81375 21.5316C8.81375 23.4867 9.92575 24.4777 12.1766 24.4777L19.4988 24.4777L19.4988 27.9323L5.93932 27.9323L5.93932 24.4777L7.45817 24.4777C6.18323 23.6474 5.55937 22.3354 5.55937 20.4873C5.55937 19.0146 6.04784 17.8093 7.051 16.872C8.05449 15.9079 9.4104 15.4259 11.1732 15.4259L19.4988 15.4259L19.4988 18.8805L11.6072 18.8805ZM4.31197 32.1635C4.31197 32.726 4.09527 33.2346 3.68811 33.6633C3.25438 34.0649 2.73936 34.2792 2.16959 34.2792C1.60015 34.2792 1.0848 34.0649 0.651074 33.6633C0.217353 33.2346 9.83285e-07 32.726 9.89994e-07 32.1635C9.97018e-07 31.5744 0.217353 31.0655 0.651074 30.6371C1.0848 30.2352 1.60015 30.0212 2.16959 30.0212C2.73936 30.0212 3.25438 30.2352 3.68811 30.6371C4.09527 31.0655 4.31197 31.5744 4.31197 32.1635ZM17.1662 46.3304L9.22092 40.6799L9.22092 46.0627L5.93932 46.0627L5.93932 36.02L8.27152 36.02L16.2175 41.6974L16.2175 35.7523L19.4988 35.7523L19.4988 46.3304L17.1662 46.3304ZM17.8989 51.8203C19.2276 52.8649 19.8784 54.3108 19.8784 56.1854C19.8784 57.9801 19.2004 59.5064 17.8173 60.7919C16.4342 62.0506 14.7259 62.6933 12.7189 62.6933C10.7394 62.6933 9.03077 62.0506 7.64765 60.7919C6.26453 59.5064 5.55937 57.9801 5.55937 56.1854C5.55937 54.3108 6.21011 52.8649 7.53914 51.8203L5.93932 51.8203L5.93932 48.3657L19.4988 48.3657L19.4988 51.8203L17.8989 51.8203ZM9.97985 52.8914C9.2478 53.5879 8.89538 54.4715 8.89538 55.5429C8.89538 56.6141 9.2478 57.4977 9.97985 58.1941C10.685 58.8902 11.6072 59.2384 12.7189 59.2384C13.8309 59.2384 14.7531 58.8902 15.4851 58.1941C16.1903 57.4977 16.543 56.6141 16.543 55.5429C16.543 54.4715 16.1903 53.5879 15.4851 52.8914C14.7531 52.1685 13.8309 51.8203 12.7189 51.8203C11.6072 51.8203 10.685 52.1685 9.97985 52.8914ZM25.3024 71.4503C25.3024 74.4765 24.1904 76.5923 21.9939 77.7973L20.2852 74.8515C21.5598 74.182 22.1837 73.0303 22.1837 71.3433C22.1837 70.2453 21.885 69.3882 21.3159 68.7723C20.7465 68.1564 19.9056 67.835 18.848 67.835L17.3839 67.835C18.7667 68.8525 19.4443 70.2721 19.4443 72.1199C19.4443 74.0213 18.7667 75.6013 17.4377 76.8868C16.0546 78.1455 14.4275 78.7882 12.5019 78.7882C10.5765 78.7882 8.9498 78.1455 7.59323 76.86C6.23765 75.5748 5.55937 73.9944 5.55937 72.1199C5.55937 70.2721 6.23765 68.8525 7.62044 67.835L5.93932 67.835L5.93932 64.4606L18.848 64.4606C20.936 64.4606 22.5364 65.157 23.6481 66.5227C24.7598 67.8887 25.3024 69.5224 25.3024 71.4503ZM9.87166 68.9061C9.1665 69.6026 8.81375 70.4862 8.81375 71.5841C8.81375 72.6556 9.1665 73.566 9.87166 74.2893C10.5493 74.9854 11.4174 75.3336 12.5019 75.3336C13.5866 75.3336 14.482 74.9854 15.1599 74.2625C15.8647 73.5661 16.2175 72.6824 16.2175 71.5841C16.2175 70.4862 15.8647 69.6026 15.1599 68.9061C14.482 68.1832 13.5866 67.835 12.5019 67.835C11.4174 67.835 10.5493 68.1832 9.87166 68.9061ZM17.8989 84.0104C19.2276 85.0547 19.8784 86.5009 19.8784 88.3754C19.8784 90.1698 19.2004 91.6965 17.8173 92.9817C16.4342 94.2403 14.7259 94.8831 12.7189 94.8831C10.7394 94.8831 9.03077 94.2403 7.64765 92.9817C6.26453 91.6965 5.55937 90.1698 5.55937 88.3754C5.55937 86.5009 6.21011 85.0547 7.53914 84.0104L5.93932 84.0104L5.93932 80.5558L19.4988 80.5558L19.4988 84.0104L17.8989 84.0104ZM9.97985 85.0815C9.2478 85.7779 8.89538 86.6615 8.89538 87.7327C8.89538 88.8038 9.2478 89.6878 9.97985 90.3842C10.685 91.0803 11.6072 91.4285 12.7189 91.4285C13.8309 91.4285 14.7531 91.0803 15.4851 90.3842C16.1903 89.6878 16.543 88.8038 16.543 87.7327C16.543 86.6615 16.1903 85.7779 15.4851 85.0815C14.7531 84.3583 13.8309 84.0104 12.7189 84.0104C11.6072 84.0104 10.685 84.3583 9.97985 85.0815ZM7.18672 100.507L16.0001 105.783L16.0001 106.211L7.2136 111.487L19.4988 111.487L19.4988 115.183L0.515351 115.183L0.515351 111.38L9.49171 105.997L0.515351 100.641L0.515351 96.8378L19.4988 96.8378L19.4988 100.507L7.18672 100.507ZM19.4988 30.4228L19.4988 33.8774L5.93932 33.8774L5.93932 30.4228L19.4988 30.4228Z' fill='white'/%3E%3C/g%3E%3C/svg%3E"); }
[data-wm]::before{content:"";position:absolute;z-index:3;right:20px;bottom:20px;height:min(150px,39%);aspect-ratio:26/133;background:var(--wm) center/contain no-repeat;pointer-events:none}
[data-wm="full"]::before{bottom:86px;right:24px}
.lb-img{position:relative}
.lb-img[data-wm]::before{display:none}
.lb-img[data-wm]::after{content:"";position:absolute;z-index:3;right:16px;bottom:16px;height:min(150px,33%);aspect-ratio:26/133;background:var(--wm) center/contain no-repeat;pointer-events:none}
.fr::after,.bgp::after,.gal-grid button::after{content:"";position:absolute;inset:0;z-index:2;background:transparent}     /* lớp phủ trong suốt: nhấn giữ/chuột phải không dính vào ảnh */
.gal-grid button{position:relative}
#scroller img,#gal img,#lb img,#scroller .fr,#scroller .bgp,#lb .lb-img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
html.mob [data-wm]::before{right:10px;bottom:10px;height:min(96px,30%)}
html.mob [data-wm="full"]::before{bottom:104px;right:12px}

/* ---------- MOBILE: nút và text phụ trên UI = 10px ---------- */
html.mob .sw{left:10px;bottom:56px;gap:6px}
html.mob .sw a{font-size:10px!important;line-height:23px;height:25px;padding:0 12px}
html.mob .emag{left:10px;top:10px;font-size:10px!important;line-height:12px}
html.mob .allph{right:10px;top:10px;height:16px;font-size:10px!important;line-height:12px;padding:0 4px}
html.mob .allph b{margin-right:7px;gap:1.5px}html.mob .allph i{width:6px;height:10px}
html.mob .prog{left:10px;right:10px;bottom:10px;height:40px}
html.mob .prog .labels span{font-size:10px!important;line-height:12px;bottom:18px}
html.mob .mono,html.mob .qbox .who,html.mob .cbq em,html.mob .vid .cap,html.mob .vid .vph,html.mob .lb-c{font-size:10px!important;line-height:13px!important}
html.mob .gal-top,html.mob .gal-top button,html.mob .gal-body h3,html.mob .lb-x,html.mob .lb-n{font-size:10px!important;line-height:13px!important}
html.mob .lb-n{padding:4px 9px}

.cbq+.cbq{margin-top:18px}

/* player kenh14: bỏ lớp đếm ngược 'Tự động phát sau…' (hay kẹt và che nút play) */
.intro__video .Kenh14Player-countdown-background,.intro__video .Kenh14Player-countdown{display:none!important}
.vid .intro__video,.vid .intro__video *{-webkit-touch-callout:none}

/* hero Side A: ảnh lớn trượt chậm hơn khi cuộn (parallax cả khung) */
.fr.hpx{transition:opacity 1.3s cubic-bezier(.2,.7,.2,1),filter 1.5s cubic-bezier(.2,.7,.2,1);will-change:transform;transform:translate3d(calc(var(--p,0)*-22%),0,0)}

/* ===== MOBILE: cuộn DỌC, parallax dọc ===== */
html.mob #scroller{touch-action:pan-y;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}
html.mob #strip{flex-direction:column;width:402px;height:max-content}
html.mob .sec{width:402px}
html.mob .pin{width:402px}
html.mob .stage{top:0;left:auto;width:402px}
html.mob .fr>img,html.mob .fr>.bgim,html.mob .qimg .bgim{left:0;width:100%;top:-14%;height:128%;transform:translate3d(0,calc(var(--p,0)*-10.5%),0)}
html.mob .fr.tall>img{top:-18%;height:136%;transform:translate3d(0,calc(var(--p,0)*-13%),0)}
html.mob .fr.soft>img{top:-7%;height:114%;transform:translate3d(0,calc(var(--p,0)*-6%),0)}
html.mob .fr.nopx>img{top:0;left:0;width:100%;height:100%;transform:none}

/* ===== TRANG CHỌN BÀI VIẾT ===== */
#select{position:fixed;left:0;right:0;bottom:0;top:var(--top,0px);z-index:70;background:#000;color:#fff;overflow:hidden;font-family:var(--ui);transition:opacity .8s,visibility .8s}
#select.off{opacity:0;visibility:hidden;pointer-events:none}
#select *{box-sizing:border-box}
#select .sx{position:absolute;left:0;top:0;width:var(--vw);height:var(--vv);zoom:var(--z);display:flex;align-items:center;justify-content:center}
#select .stack{display:flex;flex-direction:column;align-items:center;gap:23px}
#select .hd{margin:0;font:400 10px/12px var(--ui);letter-spacing:0;color:rgba(255,255,255,.62)}
#select .cards{display:flex;gap:8px}
#select .card{position:relative;display:block;width:406px;height:761px;overflow:hidden;background:#000;color:#fff;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .5s}
#select .cards:hover .card:not(:hover){opacity:.45}
#select .ph{position:absolute;inset:0;overflow:hidden}
#select .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);-webkit-user-drag:none;user-select:none}
#select .card:hover .ph img{transform:scale(1.045)}
#select .wm{position:absolute;left:10px;width:388px;height:53px;bottom:58px;background:#fff;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
#select .row{position:absolute;left:10px;right:10px;bottom:12px;display:flex;justify-content:space-between;align-items:flex-end}
#select .sub{font:400 12.1px/14.8px var(--ui);color:#fff;text-align:left}
#select .btn{font:400 14.6px/17.8px var(--ui);background:#fff;color:#000;padding:1px 6px;transition:background .3s,color .3s}
#select .card:hover .btn{background:#000;color:#fff;box-shadow:inset 0 0 0 1px #fff}
html.mob #select .stack{gap:22px}
html.mob #select .hd{font-size:12px;line-height:14px}
html.mob #select .cards{flex-direction:column}
html.mob #select .card{width:268px;height:265px}
html.mob #select .wm{left:7px;width:256px;height:35px;bottom:14px}
html.mob #select .sub{display:none}
html.mob #select .row{inset:0;display:flex;justify-content:center;align-items:center}
html.mob #select .btn{font-size:10.3px;line-height:13px;padding:1px 5px}
#select .card.b .wm{height:95px;bottom:33px}
html.mob #select .card.a .wm{bottom:12px}
html.mob #select .card.b .wm{left:4px;width:259px;height:64px;bottom:0}

/* blur-in trang chọn bài */
#select .hd,#select .card{transition:opacity 1.3s cubic-bezier(.2,.7,.2,1),filter 1.6s cubic-bezier(.2,.7,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
#select .hd{--d:.1s}#select .card.a{--d:.3s}#select .card.b{--d:.5s}
#select.pre .hd,#select.pre .card{opacity:0;filter:blur(20px);transform:translate3d(0,16px,0)}
#select.done .card{transition:opacity .5s;transition-delay:0s}

/* ảnh nền trắng (hero A, cover III) trong "Toàn bộ ảnh" + lightbox: logo eMagazine màu đen */
.gal-grid .onw::before,.lb-img.onw::after{filter:brightness(0);opacity:.85}

#select .wm{display:none}
#select .sub{color:#a81e21}
#select .btn{background:#a81e21;color:#000;font:400 15.4px/23px var(--ui);height:25px;padding:0 8px;text-align:center}
#select .card.a .btn{width:115px}#select .card.b .btn{width:147px}
#select .row{left:10px;right:10px;bottom:10px}
#select .card:hover .btn{background:#000;color:#a81e21;box-shadow:inset 0 0 0 1px #a81e21}
html.mob #select .btn{font-size:10.3px;line-height:17px;height:17px;padding:0 5px;color:#f6f6f6;width:auto!important}
html.mob #select .card:hover .btn{color:#a81e21}
/* con trỏ chấm tròn */
#cursor{position:fixed;left:0;top:0;width:16px;height:16px;mix-blend-mode:difference;pointer-events:none;z-index:2147483647;opacity:0;transition:opacity .25s;will-change:transform}
html.cur,html.cur *{cursor:none!important}

/* loading */
#loader{position:fixed;inset:0;z-index:2147483000;background:#a81e21;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--ui);transition:opacity .8s,visibility .8s}
#loader.off{opacity:0;visibility:hidden;pointer-events:none}
#loader .lt{margin:0;font:400 12.1px/14.8px var(--ui);text-align:center;color:#000;letter-spacing:0}
#loader .lb{width:104px;height:4px;margin-top:25px;background:rgba(0,0,0,.18);overflow:hidden}
#loader .lb i{display:block;height:100%;width:8%;background:#000;transition:width .35s ease-out}

/* nút trang chọn bài: rộng theo chữ, không xuống dòng; phủ kín khối đỏ đã nằm sẵn trong ảnh Side B */
#select .btn{white-space:nowrap;width:auto!important;min-width:0;padding:0 14px;height:27px;line-height:25px}
#select .row{right:9px;bottom:8px}
html.mob #select .btn{height:17px;line-height:17px;padding:0 6px}
html.mob #select .row{right:0;bottom:0}

/* hover nút: chỉ đổi màu chữ, giữ nền đỏ (không để lộ khối đỏ có sẵn trong ảnh như một cái bóng) */
#select .card:hover .btn,html.mob #select .card:hover .btn{background:#a81e21;box-shadow:none;color:#fff}

/* hover trang chọn bài: không zoom ảnh, chỉ sáng/tối (thẻ còn lại tối đi) */
#select .card:hover .ph img{transform:none}
#select .ph img{transition:none}
#select.done .cards:hover .card:not(:hover){opacity:.4}

/* nút TOÀN BỘ ẢNH: cao 25px, lề 12px, cỡ chữ giữ nguyên */
.allph{height:25px;padding:0 12px}
html.mob .allph{height:25px;padding:0 12px;font-size:10px!important;line-height:12px}

#cursor i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
#cursor.big i{transform:scale(2.8)}
/* nút hamburger về trang chọn bài */
.sw a.menu{display:flex;flex-direction:column;justify-content:center;gap:4px;width:25px;padding:0 6px;align-items:stretch}
.sw a.menu i{display:block;height:1.5px;background:currentColor}
html.mob .sw a.menu{padding:0 6px;width:25px}

/* mobile: cụm menu + A/B lên góc trên trái (thay khối EMAGAZINE…SIDE A) */
html.mob .sw{left:10px;top:10px;bottom:auto;gap:6px}
html.mob .emag{display:none}

/* mobile: scroller kéo hết xuống đáy khung nhìn (phủ cả vùng dưới thanh địa chỉ nổi của Safari/Chrome) */
html.mob #scroller{bottom:0;height:auto}