/* ---- p_36_pj-corp.css ---- */
/* =====================================================================
   CORPORATE EVENTS (.sk-jo) - tường áp phích theo năm
   Hình khối: áp phích trắng khổ dọc 3:4 ghim trên tường đen, lưới Swiss, mã sự kiện EV-24-03,
   đường cắt (crop marks), ghim cam, băng dính, tem DỰ ÁN / MẪU, băng cảnh báo vạch chéo.
   Hệ màu: cam #ff6a13 / đen / trắng (+ xám, giấy #f5f4f1, cam nhạt). Một font Be Vietnam Pro (Anton chỉ cho số năm và chữ áp phích).
   Mobile trước; mở rộng ở 700px, 820px, 1025px, 1200px.
   ===================================================================== */
.sk-jo{--r:2px;--bw:1px;--hfw:800;--hls:-.04em;--bg:#0a0a0c;--bg2:#101013;--card:#15151a;--ln:rgba(255,255,255,.14);--mut:#a9a9b3;--aci:#0a0a0c;--ez:cubic-bezier(.16,1,.3,1)}
.sk-jo h2,.sk-jo h3{text-wrap:balance}
.sk-jo h3{margin:0}
.sk-jo .s-h{font-size:clamp(30px,8.6vw,62px);line-height:1.06;letter-spacing:-.045em}
.sk-jo .s-head{margin-bottom:clamp(24px,4vw,48px)}
.sk-jo button:not(.s-art){font-family:var(--fb)}
.sk-jo button{-webkit-tap-highlight-color:transparent}
.jo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sk-jo .jo-eb{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.jo-eb b{display:grid;place-items:center;min-width:30px;height:26px;padding:0 7px;background:var(--ac);color:#0a0a0c;font-weight:800;letter-spacing:.04em}
.s-lt .jo-eb{color:#5d5d65}
.sk-jo .s-lead b{color:var(--ink)}

/* =====================  01 · HERO: tường áp phích  ===================== */
.jo-hero{background:#0a0a0c;padding-top:clamp(104px,10vw,128px);padding-bottom:clamp(34px,5vw,64px)}
.jo-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(46% 40% at 78% 40%,rgba(255,106,19,.2),transparent 70%),radial-gradient(34% 30% at 4% 100%,rgba(255,106,19,.1),transparent 70%)}
.jo-hg{position:relative;display:flex;flex-direction:column;min-width:0}
.jo-hg::before{content:"";position:absolute;z-index:-1;inset:-30px calc(var(--gut)*-1) -20px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px calc(100%/12));-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent)}
.jo-ht{display:contents}
.jo-hg>*,.jo-ht>*{min-width:0}
.sk-jo .jo-kick{order:1;display:flex;align-items:center;gap:10px;margin:0 0 clamp(12px,3vw,20px);font:600 13px/1.3 var(--fb);color:var(--mut)}
.jo-kick b{display:grid;place-items:center;height:26px;padding:0 8px;background:var(--ac);color:#0a0a0c;font:800 12px/1 var(--fb);letter-spacing:.08em}
.sk-jo .jo-title{order:2;font-weight:800;font-size:clamp(46px,15.4vw,92px);line-height:.9;letter-spacing:-.055em}
.jo-dot{color:var(--ac)}
.jo-wallbox{order:3;position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:14px;margin:clamp(20px,4vw,30px) 0 clamp(22px,4vw,30px);max-width:560px}
.sk-jo .jo-hint{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:4px 0 0;font:500 13px/1.4 var(--fb);color:var(--mut)}
.jo-hd{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ac)}
.sk-jo .jo-sub{order:4;max-width:44ch}
.jo-btns{order:5}

/* cột năm khổng lồ (Anton viền) */
.jo-yrs{container-type:inline-size;position:relative;display:grid;grid-template-rows:repeat(4,1fr);align-self:stretch}
.jo-yk{position:absolute;right:-9px;top:0;width:4px;height:25%;background:var(--ac);transform:translateY(calc(var(--k,3)*100%));transition:transform .6s var(--ez)}
.sk-jo .jo-yb{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:44px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font-size:48cqw;line-height:.9;letter-spacing:0;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.58);transition:color .4s,-webkit-text-stroke-color .4s,transform .55s var(--ez)}
.sk-jo .jo-yb:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sk-jo .jo-yb[aria-pressed=true]{color:var(--ac);-webkit-text-stroke-color:var(--ac);transform:translateX(4px)}

/* sân khấu áp phích */
.jo-stage{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ez)}
.jo-stage::before{content:"";position:absolute;z-index:3;inset:-14px;pointer-events:none;opacity:.7;background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-repeat:no-repeat;background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px;background-position:left 0 top 14px,left 14px top 0,right 0 top 14px,right 14px top 0,left 0 bottom 14px,left 14px bottom 0,right 0 bottom 14px,right 14px bottom 0}
.jo-gh{position:absolute;inset:0;z-index:0;pointer-events:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26)}
.jo-gh1{transform:translate(7px,6px) rotate(3.2deg)}
.jo-gh2{transform:translate(-6px,3px) rotate(-3deg)}
.jo-slot{position:relative;z-index:2;aspect-ratio:3/4}
.jo-pin{position:absolute;z-index:5;top:-8px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffc59a,#ff6a13 55%,#a8380a);box-shadow:0 5px 8px rgba(0,0,0,.6)}
.sk-jo .jo-hp{position:absolute;inset:0;display:block;container-type:inline-size;padding:clamp(5px,1.4vw,10px);background:#fff;color:#fff;box-shadow:0 26px 40px -18px rgba(0,0,0,.9);text-decoration:none}
.jo-hp:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.jo-hin{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;isolation:isolate;background:#0a0a0c}
.jo-hin .jo-hbg{position:absolute;inset:0;z-index:-2}
.jo-hsh{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,12,.8),rgba(10,10,12,.05) 34%,rgba(10,10,12,.2) 52%,rgba(10,10,12,.94))}
.jo-hcode{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4cqw 4.4cqw 0;font:800 12px/1 var(--fb);letter-spacing:.08em}
.jo-hcode em{font-style:normal;color:var(--ac)}
.jo-hbig{display:block;margin-top:auto;padding:0 4.4cqw}
.jo-hbig i{display:block;font-style:normal;font-size:calc(var(--k,.3)*100cqw);line-height:.92;padding-top:.03em}
.jo-hbig i+i{margin-left:6cqw;color:var(--ac)}
.jo-hmeta{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:3.4cqw;padding:3cqw 4.4cqw 3.4cqw;padding-right:calc(4.4cqw + 36px);border-top:1px solid rgba(255,255,255,.42);font:700 12.5px/1.3 var(--fb)}
.jo-go{position:absolute;right:4cqw;top:50%;margin-top:-15px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ac);color:#0a0a0c;transition:transform .5s var(--ez)}
.jo-go svg{width:14px;height:14px}

/* dải chữ chạy: băng cam ngăn giữa hero và tường */
.jo-hero+.s-mq{background:var(--ac);--ink:#0a0a0c;border:0;padding:clamp(10px,1.6vw,16px) 0}
.jo-hero+.s-mq .s-mq-t span::after{color:#0a0a0c}
.jo-hero+.s-mq.out span{-webkit-text-stroke-color:#0a0a0c}

/* =====================  02 · TƯỜNG THEO NĂM  ===================== */
.jo-yearsec{overflow:clip;scroll-margin-top:80px}
.jo-yearsec::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.028) 0 50%,transparent 0) 0 0/112px 100%}
.jo-yw{display:flex;flex-direction:column;gap:6px;min-width:0}
.jo-yl{min-width:0}
.jo-ysel{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ln);background:rgba(255,255,255,.03)}
.jo-ind{position:absolute;left:0;top:0;bottom:0;width:25%;background:var(--ac);transform:translateX(calc(var(--k,3)*100%));transition:transform .55s var(--ez)}
.sk-jo .jo-ys{position:relative;z-index:1;min-height:58px;padding:6px 0 2px;border:0;background:none;color:var(--ink);font-size:32px;line-height:1;letter-spacing:.01em;cursor:pointer;transition:color .3s}
.sk-jo .jo-ys:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.sk-jo .jo-ys[aria-pressed=true]{color:#0a0a0c}
.jo-sum{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-top:1px solid var(--ln)}
.jo-sum>div{padding:14px 0 4px}
.jo-sum>div+div{padding-left:18px;border-left:1px solid var(--ln)}
.jo-sum b{display:block;font-size:clamp(56px,17vw,88px);line-height:.95;color:var(--ac)}
.jo-sum span{display:block;margin-top:6px;font:600 14px/1.3 var(--fb);color:var(--mut)}
.jo-share{display:flex;gap:3px;height:34px;margin-top:16px}
.jo-share>i{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden;background:var(--ac);transition:flex-grow .75s var(--ez)}
.jo-share>i:nth-child(2){background:#fff}
.jo-share>i:nth-child(3){background:#8d8d97}
.jo-share>i:nth-child(4){background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.jo-share span{position:absolute;inset:0;display:grid;place-items:center;font:800 12px/1 var(--fb);color:#0a0a0c}
.jo-share>i:nth-child(4) span{color:var(--mut)}
.sk-jo .jo-note{margin:12px 0 0;font:400 13px/1.55 var(--fb);color:var(--mut)}

/* danh sách áp phích: mobile là hàng vuốt ngang, lộ mép áp phích kế */
.jo-list{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:18px var(--gut) 22px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;min-width:0}
.jo-list::-webkit-scrollbar{display:none}
.jo-list>*{flex:0 0 min(64%,250px);scroll-snap-align:start;min-width:0}
.sk-jo .jo-pz{position:relative;display:flex;flex-direction:column;container-type:inline-size;aspect-ratio:3/4;padding:9px;overflow:visible;background:#fff;color:#0a0a0c;text-decoration:none;box-shadow:0 20px 30px -14px rgba(0,0,0,.85);rotate:var(--rot,0deg);transform-origin:50% 0;transition:rotate .55s var(--ez),scale .45s var(--ez),box-shadow .45s}
.jo-pz:nth-child(1){--rot:-1.3deg;--par:34}
.jo-pz:nth-child(2){--rot:.9deg;--par:-26}
.jo-pz:nth-child(3){--rot:-.6deg;--par:50}
.jo-pz::before{content:"";position:absolute;z-index:3;top:-9px;left:50%;width:48px;height:18px;margin-left:-24px;background:rgba(255,197,154,.88);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.jo-pz:focus-visible{outline:2px solid var(--ac);outline-offset:5px}
.jo-pz-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:6px;border-bottom:2px solid #0a0a0c;font:800 12px/1.1 var(--fb);letter-spacing:.05em}
.jo-pz-top b{flex:none}
.jo-pz-top em{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-style:normal;font-weight:700;opacity:.62}
.jo-pz .jo-pz-img{flex:1 1 0;min-height:52px;margin-top:7px}
.jo-pz-t{flex:none;display:flex;flex-direction:column;padding:6px 0 6px}
.jo-pz-t i{display:block;font-style:normal;font-size:calc(var(--k,.3)*100cqw);line-height:.94;padding-top:.02em}
.jo-pz-t i+i{width:fit-content;margin-top:.03em;padding:.03em .1em 0;background:var(--ac);color:#0a0a0c}
.jo-pz-m{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:6px;border-top:1px solid #0a0a0c;font:700 12.5px/1.25 var(--fb)}
.jo-pz-m span{font-weight:500;color:#4a4a52}
.jo-stamp{position:absolute;z-index:2;top:44px;right:14px;padding:4px 7px 3px;border:2px solid var(--ac);border-radius:2px;background:rgba(10,10,12,.86);color:var(--ac);font:800 12px/1 var(--fb);letter-spacing:.16em;rotate:-7deg}
.jo-stamp.is-real{background:var(--ac);color:#0a0a0c}

/* =====================  03 · LOẠI SỰ KIỆN (giấy)  ===================== */
.jo-typesec{scroll-margin-top:80px}
.jo-ty{min-width:0}
.jo-tabs{display:flex;gap:8px;overflow-x:auto;margin-inline:calc(var(--gut)*-1);padding:2px var(--gut) 16px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.jo-tabs::-webkit-scrollbar{display:none}
.sk-jo .jo-tb{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px 0 10px;border:1.5px solid #0a0a0c;background:transparent;color:#0a0a0c;font:700 15px/1 var(--fb);white-space:nowrap;cursor:pointer;transition:background .3s,color .3s}
.jo-tb b{display:grid;place-items:center;width:30px;height:30px;background:#0a0a0c;color:#fff;font:800 12px/1 var(--fb);letter-spacing:.04em;transition:background .3s,color .3s}
.sk-jo .jo-tb[aria-selected=true]{background:#0a0a0c;color:#fff}
.sk-jo .jo-tb[aria-selected=true] b{background:var(--ac);color:#0a0a0c}
.sk-jo .jo-tb:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.jo-tps{padding:clamp(18px,4vw,34px);background:#fff;border:1.5px solid #0a0a0c}
.jo-tp[hidden]{display:none}
.jo-tp{display:grid;gap:0;color:#0a0a0c}
.jo-tph{display:flex;gap:14px;align-items:flex-start}
.jo-tn{flex:none;font-size:clamp(70px,20vw,112px);line-height:.85;color:transparent;-webkit-text-stroke:1.5px #0a0a0c}
.jo-tph h3{font-size:clamp(26px,6.6vw,42px);line-height:1.04;letter-spacing:-.04em}
.sk-jo .jo-tg{margin:8px 0 0;font:400 16px/1.55 var(--fb);color:#3b3b42}
.sk-jo .jo-sp{display:grid;grid-template-columns:1fr 1fr;margin:20px 0 0;padding:0;border-top:1.5px solid #0a0a0c}
.jo-sp>div{padding:12px 0;border-bottom:1px solid rgba(10,10,12,.14)}
.jo-sp>div:nth-child(odd){padding-right:10px}
.jo-sp>div:nth-child(3){grid-column:1/-1}
.jo-sp dt{font:700 12px/1.25 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:#5d5d65}
.sk-jo .jo-sp dd{margin:5px 0 0;font:700 17px/1.3 var(--fb)}
.jo-bar{display:flex;gap:3px;height:22px;margin-top:22px}
.jo-bar>i{display:block;flex:1 1 0;min-width:0;background:var(--c);transform-origin:0 50%}
.jo-bar>i:nth-child(1){--c:var(--ac)}
.jo-bar>i:nth-child(2){--c:#0a0a0c}
.jo-bar>i:nth-child(3){--c:#8d8d97}
.jo-bar>i:nth-child(4){--c:#ffc59a}
.sk-jo .jo-md{margin:12px 0 0;padding:0;list-style:none}
.jo-md li{padding:14px 0;border-top:1px solid rgba(10,10,12,.14)}
.jo-mh{display:flex;align-items:center;gap:10px;font:700 16px/1.3 var(--fb)}
.jo-mh b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c);color:#0a0a0c;font:800 13px/1 var(--fb)}
.jo-md li:nth-child(1){--c:var(--ac)}
.jo-md li:nth-child(2){--c:#0a0a0c}
.jo-md li:nth-child(2) .jo-mh b{color:#fff}
.jo-md li:nth-child(3){--c:#8d8d97}
.jo-md li:nth-child(4){--c:#ffc59a}
.jo-mh em{margin-left:auto;padding-left:8px;font:700 13px/1 var(--fb);font-style:normal;color:#5d5d65;white-space:nowrap;font-variant-numeric:tabular-nums}
.sk-jo .jo-md p{margin:6px 0 0 36px;font:400 15px/1.55 var(--fb);color:#3b3b42}
.sk-jo .jo-wn{position:relative;overflow:hidden;margin:18px 0 0;padding:28px 16px 16px;background:#0a0a0c;color:#fff;font:400 15px/1.55 var(--fb)}
.jo-wn::before{content:"";position:absolute;left:0;right:-60px;top:0;height:10px;background:repeating-linear-gradient(-45deg,var(--ac) 0 10px,#0a0a0c 10px 20px)}
.jo-wn b{display:block;margin-bottom:5px;font:800 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}

/* =====================  04 · LỊCH MÙA VỤ (heatmap)  ===================== */
.jo-seasec{background:var(--bg2);scroll-margin-top:80px}
.jo-se{min-width:0}
.jo-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 16px;padding:0;list-style:none;font:600 13px/1.3 var(--fb);color:var(--mut)}
.jo-key li{display:flex;align-items:center;gap:8px}
.jo-key li b{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--ln);font:800 12px/1 var(--fb);color:var(--ink)}
.jo-ramp{gap:4px!important}
.jo-ramp i{display:block;width:20px;height:12px}
.jo-mg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sk-jo .jo-mt{position:relative;display:flex;flex-direction:column;gap:4px;min-height:100px;padding:6px 4px;border:0;background:rgba(255,255,255,.05);color:var(--ink);text-align:center;cursor:pointer;transition:background .3s,outline-color .3s}
.sk-jo .jo-mt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sk-jo .jo-mt[aria-pressed=true]{background:rgba(255,255,255,.14);outline:2px solid #fff;outline-offset:2px;z-index:1}
.jo-mn{display:block;padding:2px 0 3px;font:800 13px/1 var(--fb);letter-spacing:.03em}
.jo-hc,.jo-ramp i{--h:0;background:color-mix(in srgb,var(--ac) calc(var(--h)*25%),#1d1d22)}
.jo-hc{flex:1;display:grid;place-items:center;font:800 12px/1 var(--fb);font-style:normal;color:#fff}
.jo-hc.h3,.jo-hc.h4{color:#0a0a0c}
.jo-ramp .h1{--h:1}.jo-ramp .h2{--h:2}.jo-ramp .h3{--h:3}.jo-ramp .h4{--h:4}
.jo-mp{margin-top:20px;padding:clamp(16px,4vw,26px);border:1px solid var(--ln);background:rgba(255,255,255,.03)}
.jo-mph{display:flex;align-items:center;gap:14px}
.jo-mpn{flex:none;min-width:1.1em;font-size:clamp(74px,22vw,110px);line-height:.88;color:var(--ac)}
.jo-mph small{display:block;font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.jo-mph b{display:block;margin-top:4px;font:800 clamp(20px,5.4vw,28px)/1.15 var(--fb);letter-spacing:-.02em}
.sk-jo .jo-mrows{margin:14px 0 0;padding:0;list-style:none}
.jo-mrows li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:12px;min-height:38px;border-top:1px solid var(--ln);font:600 15px/1.3 var(--fb)}
.jo-pp{display:flex;gap:3px}
.jo-pp s{display:block;width:15px;height:8px;background:rgba(255,255,255,.16);text-decoration:none}
.jo-pp s.on{background:var(--ac)}
.jo-mrows b{font:700 13px/1.2 var(--fb);text-align:right;color:var(--mut)}
.sk-jo .jo-lead2{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--ln);font:600 16px/1.5 var(--fb)}
.jo-lead2 b{display:inline-block;margin:0 2px;font-size:38px;line-height:.9;color:var(--ac);vertical-align:-.1em}
.jo-lead2 span.jo-fm{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--mut)}
.jo-nw{white-space:nowrap}
.sk-jo .jo-tip{margin:10px 0 0;font:400 16px/1.6 var(--fb);color:#d6d6dc}

/* =====================  05 · DỰ ÁN (giấy, thẻ tối)  ===================== */
.jo-prosec{scroll-margin-top:80px}
.sk-jo .jo-cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:6px var(--gut) 20px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;perspective:none}
.jo-cards::-webkit-scrollbar{display:none}
.jo-cards>.jo-pc{flex:0 0 min(78%,300px);display:flex;flex-direction:column;scroll-snap-align:start;min-width:0}
.jo-pc>.card{flex:1}
.jo-py{display:block;margin:0 0 10px;font-style:normal;font-size:60px;line-height:.9;color:transparent;-webkit-text-stroke:1.4px #0a0a0c;background:linear-gradient(90deg,var(--ac) calc(var(--f,0)*100%),transparent 0);-webkit-background-clip:text;background-clip:text;width:max-content;max-width:100%}
.sk-jo .jo-pc .card{--card:#15151a;--line:rgba(255,255,255,.12);--mut:#a9a9b3;color:#f5f5f6;border-color:#0a0a0c;border-radius:2px}
.sk-jo .jo-pc .card-body em{font-size:12px}

/* =====================  06 · BÀI VIẾT + TRÍCH DẪN  ===================== */
.jo-bg{display:block;min-width:0}
.sk-jo .jo-bl{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:6px var(--gut) 20px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;perspective:none}
.jo-bl::-webkit-scrollbar{display:none}
.jo-bl>.card{flex:0 0 min(84%,340px);scroll-snap-align:start}
.sk-jo .jo-bl .card-body em{font-size:12px}
.jo-qb{position:relative;margin-top:clamp(26px,5vw,56px);padding:clamp(22px,5vw,44px);padding-bottom:clamp(26px,5vw,48px);overflow:hidden;background:#fff;color:#0a0a0c}
.jo-qb::before{content:"“";position:absolute;right:12px;top:-6px;font:400 150px/1 var(--fd);color:var(--ac);pointer-events:none}
.sk-jo .jo-qtag{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 20px}
.jo-qtag b{padding:5px 9px 4px;background:#0a0a0c;color:#fff;font:800 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase}
.jo-qtag span{max-width:26ch;font:500 13px/1.4 var(--fb);color:#5d5d65}
.jo-qs{position:relative;display:grid}
.jo-q{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.jo-q.is-on{opacity:1;visibility:visible;transition:opacity .4s}
.sk-jo .jo-q blockquote{margin:0;padding:0;border:0;max-width:34ch;font:700 clamp(21px,5.8vw,34px)/1.28 var(--fb);letter-spacing:-.025em;color:#0a0a0c}
.jo-w{display:inline-block}
.jo-q figcaption{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.jo-q figcaption b{font:800 15px/1.3 var(--fb)}
.jo-q figcaption span{font:500 14px/1.3 var(--fb);color:#5d5d65}
.jo-qc{position:relative;display:flex;align-items:center;gap:12px;margin-top:22px}
.sk-jo .jo-qa{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid #0a0a0c;background:transparent;color:#0a0a0c;cursor:pointer;transition:background .3s,color .3s}
.sk-jo .jo-qa:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.jo-qn{min-width:58px;text-align:center;font:700 15px/1 var(--fb)}
.jo-qp{position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--ac);transform:scaleX(0);transform-origin:0 50%}

/* =====================  07 · FAQ  ===================== */
.jo-faqsec .fq{max-width:860px}

/* =====================  Hover (chỉ desktop)  ===================== */
@media(hover:hover) and (pointer:fine){
  .sk-jo .jo-yb:hover{-webkit-text-stroke-color:#fff}
  .sk-jo .jo-yb[aria-pressed=true]:hover{-webkit-text-stroke-color:var(--ac)}
  .jo-hp:hover .jo-go{transform:rotate(-45deg)}
  .jo-pz:hover{rotate:0deg;scale:1.025;box-shadow:0 34px 44px -16px rgba(0,0,0,.95)}
  .sk-jo .jo-ys:hover:not([aria-pressed=true]){color:var(--ac)}
  .sk-jo .jo-mt:hover{background:rgba(255,255,255,.12)}
  .sk-jo .jo-tb:hover:not([aria-selected=true]){background:rgba(10,10,12,.07)}
  .sk-jo .jo-qa:hover{background:#0a0a0c;color:#fff}
}

/* =====================  Chuyển động (chỉ khi cho phép)  ===================== */
@media(prefers-reduced-motion:no-preference){
  .kx-js .jo-yb{animation:joYr .9s var(--ez) both}
  .kx-js .jo-yb:nth-of-type(1){animation-delay:.45s}
  .kx-js .jo-yb:nth-of-type(2){animation-delay:.55s}
  .kx-js .jo-yb:nth-of-type(3){animation-delay:.65s}
  .kx-js .jo-yb:nth-of-type(4){animation-delay:.75s}
  .kx-js .jo-pin{animation:joPin .8s cubic-bezier(.3,1.6,.5,1) .95s both}
  .jo-gh1{animation:joSway1 7s ease-in-out infinite alternate}
  .jo-gh2{animation:joSway2 9s ease-in-out infinite alternate}
  .jo-stage.is-swap::before{animation:joCm .8s var(--ez)}
  .jo-stage.is-swap .jo-pin{animation:joPin .7s cubic-bezier(.3,1.6,.5,1)}
  .jo-wn::before{animation:joHaz 1.4s linear infinite}
  /* tường nhiệt: các ô sáng lần lượt như một làn sóng */
  .kx-js .jo-se:not(.is-lit) .jo-mt,.kx-js .jo-se:not(.is-lit) .jo-mp{opacity:0}
  .kx-js .jo-se.is-lit .jo-mt{animation:joLit .8s var(--ez) both;animation-delay:calc(var(--m)*60ms)}
  .kx-js .jo-se.is-lit .jo-mp{animation:joLit .8s var(--ez) .75s both}
  /* thẻ dự án: số năm tô cam theo cuộn, thẻ vào so le */
  .kx-js .jo-cards:not(.kx-in) .jo-pc{opacity:0}
  .kx-js .jo-cards.kx-in .jo-pc{animation:joUp .9s var(--ez) both;animation-delay:calc(var(--i)*.1s + .25s)}
  .jo-qb.run .jo-qp{animation:joQp 7s linear forwards}
  .kx-js .jo-hd{animation:joPulse 1.8s ease-out infinite}
}
@keyframes joYr{from{opacity:0;translate:0 -46px}}
@keyframes joPin{from{opacity:0;transform:translateY(-34px) scale(.4)}}
@keyframes joSway1{to{transform:translate(9px,7px) rotate(4.4deg)}}
@keyframes joSway2{to{transform:translate(-8px,4px) rotate(-4.2deg)}}
@keyframes joCm{40%{transform:scale(1.07);opacity:1}}
@keyframes joHaz{to{transform:translateX(-28.28px)}}
@keyframes joLit{from{opacity:0;transform:translateY(16px) scale(.9)}}
@keyframes joUp{from{opacity:0;transform:translateY(36px)}}
@keyframes joQp{to{transform:scaleX(1)}}
@keyframes joPulse{0%{box-shadow:0 0 0 0 rgba(255,106,19,.65)}100%{box-shadow:0 0 0 12px rgba(255,106,19,0)}}

/* =====================  Màn hình lớn dần  ===================== */
@media(min-width:700px){
  .jo-wallbox{max-width:520px}
  .jo-list>*{flex-basis:230px}
  .jo-cards>.jo-pc{flex-basis:300px}
  .jo-mg{grid-template-columns:repeat(12,minmax(0,1fr))}
  .jo-mpn{font-size:110px}
}
/* iPad dọc: chữ bên trái, tường bên phải; áp phích thành lưới 3 cột */
@media(min-width:820px){
  .jo-hg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center}
  .jo-ht{display:block;container-type:inline-size}
  .sk-jo .jo-title{font-size:min(17.4cqw,104px)}
  .jo-wallbox{max-width:none;margin:0;gap:20px}
  .jo-yk{right:-12px}
  .jo-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;margin-inline:0;padding:22px 0 8px;scroll-snap-type:none}
  .jo-list>*{flex:none}
  .jo-pz{translate:0 calc(var(--sy,0)*var(--par,0)*1px)}
  .jo-tp{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"tph bar" "sp md" "wn md";column-gap:clamp(28px,4vw,56px);align-content:start}
  .jo-tph{grid-area:tph}
  .jo-sp{grid-area:sp}
  .jo-bar{grid-area:bar;align-self:end;margin:0 0 14px}
  .jo-md{grid-area:md;margin-top:0!important}
  .jo-md li:first-child{border-top:0;padding-top:0}
  .jo-wn{grid-area:wn;align-self:start}
  .jo-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;overflow:visible;margin-inline:0;padding:6px 0 0}
  .jo-cards>.jo-pc{flex:none}
  .jo-bg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:end}
  .jo-bg .s-head{margin-bottom:0}
  .sk-jo .jo-bl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;overflow:visible;margin-inline:0;padding:6px 0 0}
  .jo-bl>.card{flex:none}
  .jo-qb{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);grid-template-areas:"tag q" "ctl q";column-gap:clamp(28px,5vw,64px);align-items:start}
  .jo-qtag{grid-area:tag}
  .jo-qs{grid-area:q;align-self:center}
  .jo-qc{grid-area:ctl;margin-top:0;align-self:end}
  .jo-qb::before{font-size:210px;top:-14px}
}
/* desktop */
@media(min-width:1025px){
  .jo-sum b{font-size:96px}
  .jo-ty{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
  .jo-tabs{flex-direction:column;overflow:visible;margin:0;padding:0}
  .sk-jo .jo-tb{width:100%;min-height:58px}
  .jo-se{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 36px;align-items:start}
  .jo-key{grid-column:1/-1;margin:0}
  .jo-mp{margin-top:0}
  .sk-jo .jo-mt{min-height:236px;padding:8px 5px;gap:6px}
  .jo-mn{font-size:14px;padding-bottom:5px}
  .jo-mg{gap:7px}
  .jo-hc{font-size:13px}
  .jo-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
/* màn hình rộng: tiêu đề bên trái, sổ cái (năm, số đếm, thanh tỷ lệ) bên phải; tường ba áp phích khổ lớn bên dưới */
@media(min-width:1025px){
  .jo-yl{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,88px);align-items:start}
  .jo-yl>.s-head{grid-column:1;grid-row:1/span 5;margin-bottom:0}
  .jo-yl>:not(.s-head){grid-column:2}
  .jo-yw{gap:16px}
  .jo-list{padding-top:30px}
}