/* ---- p_35_pj-mice.css ---- */
/* =====================================================================
   MICE (Project) (.sk-jc) - bảng điều độ split-flap
   Hình khối: ô chữ lật có đường kẻ giữa, đèn LED trạng thái, nền đen than, góc vuông 6px.
   Hệ màu: đen / trắng / cam #ff6a13 (+ xám, giấy). Một font Be Vietnam Pro, Anton chỉ cho vài số .s-art.
   Mobile trước; mở rộng ở 700px, 820px và 1025px.
   ===================================================================== */
.sk-jc{--r:6px;--bw:1px;--hfw:800;--hls:-.035em;--bg:#0a0a0c;--bg2:#101013;--card:#15151a;--ln:rgba(255,255,255,.13);--mut:#a9a9b3;
  --jf1:#2b2b33;--jf2:#202026;--jf3:#17171c;--jf4:#1e1e24;--jg:#f5f4f1;--jl:#050507;--aci:#0a0a0c}
.sk-jc h3{margin:0}
.jc-s1,.jc-s2,.jc-s3,.jc-s4,.jc-s5{padding:44px 0}
.jc-s1 .s-head,.jc-s2 .s-head,.jc-s3 .s-head,.jc-s4 .s-head,.jc-s5 .s-head{margin-bottom:22px}
.sk-jc .jc-ey{margin:0 0 14px;font:700 12px/1 var(--fb);letter-spacing:.2em;color:var(--ac)}
.sk-jc .jc-ey::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--ac);vertical-align:1px}
.s-lt .jc-ey{color:var(--ink)}
.sk-jc .s-chip.on,.sk-jc .s-seg button.on{color:var(--aci)}
.sk-jc button:focus-visible,.sk-jc input:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.jc-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* =====================  Ô CHỮ LẬT (dùng chung)  =====================
   Mỗi ô: hai nửa tĩnh (.jc-a trên = chữ mới, .jc-b dưới = chữ cũ) + hai cánh lật là ::before / ::after.
   Cánh trên rơi 0 -> -90 độ, cánh dưới dựng lên 90 -> 0 độ; đổi .is-fa / .is-fb để chạy lại mà không cần đo layout. */
.jc-c{position:relative;display:inline-block;flex:none;vertical-align:top;width:calc(var(--u) - var(--gp,2px));height:calc(var(--u)*1.5);margin-right:var(--gp,2px);
  font:700 calc(var(--u)*.84)/calc(var(--u)*1.5) var(--fb);text-align:center;color:var(--jg);perspective:calc(var(--u)*7);-webkit-user-select:none;user-select:none}
.jc-c>i,.jc-c::before,.jc-c::after{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;border-radius:calc(var(--u)*.1);font-style:normal;overflow:hidden;white-space:pre}
.jc-a{clip-path:inset(0 0 50% 0);background:linear-gradient(180deg,var(--jf1),var(--jf2))}
.jc-b{clip-path:inset(50% 0 0 0);background:linear-gradient(180deg,transparent 50%,var(--jl) 50%,var(--jl) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(180deg,var(--jf3),var(--jf4))}
.jc-c::before{content:attr(data-p);clip-path:inset(0 0 50% 0);background:linear-gradient(180deg,var(--jf1),var(--jf2));opacity:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jc-c::after{content:attr(data-c);clip-path:inset(50% 0 0 0);background:linear-gradient(180deg,transparent 50%,var(--jl) 50%,var(--jl) calc(50% + 1.5px),transparent calc(50% + 1.5px)),linear-gradient(180deg,var(--jf3),var(--jf4));opacity:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jc-c.is-fa::before{animation:jcFtA var(--fd,46ms) ease-in both}
.jc-c.is-fb::before{animation:jcFtB var(--fd,46ms) ease-in both}
.jc-c.is-fa::after{animation:jcFbA var(--fd,46ms) ease-out var(--fd,46ms) both}
.jc-c.is-fb::after{animation:jcFbB var(--fd,46ms) ease-out var(--fd,46ms) both}
@keyframes jcFtA{0%{opacity:1;transform:rotateX(0)}99%{opacity:1}100%{opacity:0;transform:rotateX(-90deg)}}
@keyframes jcFtB{0%{opacity:1;transform:rotateX(0)}99%{opacity:1}100%{opacity:0;transform:rotateX(-90deg)}}
@keyframes jcFbA{0%{opacity:0;transform:rotateX(90deg)}1%{opacity:1}100%{opacity:1;transform:rotateX(0)}}
@keyframes jcFbB{0%{opacity:0;transform:rotateX(90deg)}1%{opacity:1}100%{opacity:1;transform:rotateX(0)}}

/* đèn LED trạng thái: 0 đúng giờ, 1 mở cửa, 2 đang diễn ra, 3 kết thúc */
.jc-led{position:relative;display:inline-block;flex:none;width:calc(var(--u,16px)*.62);height:calc(var(--u,16px)*.62);border-radius:50%;background:#2a2a30;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.jc-led[data-s="0"]{background:#cfcec9;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.jc-led[data-s="1"]{background:#ffa266;box-shadow:0 0 9px 1px rgba(255,162,102,.55)}
.jc-led[data-s="2"]{background:var(--ac);box-shadow:0 0 12px 2px rgba(255,106,19,.7)}
.jc-led[data-s="3"]{background:#2a2a30}
.jc-led[data-s="2"]::after,.jc-hd::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--ac);opacity:0}

/* =====================  BẢNG (khung + hàng)  ===================== */
.jc-bd{--n:21;--u:calc(100cqw/var(--n));container-type:inline-size;position:relative;overflow:hidden;padding:12px 10px 8px;border-radius:12px;border:1px solid var(--ln);
  background:linear-gradient(180deg,#131318,#0b0b0e);box-shadow:0 34px 60px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07)}
.jc-bh{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px;margin-bottom:12px}
.sk-jc .jc-bt{display:flex;align-items:center;gap:10px;margin:0;font:700 12px/1.2 var(--fb);letter-spacing:.16em;color:#d6d6dc}
.jc-bt .jc-led{--u:16px}
.jc-clk{display:inline-flex;--u:19px;--gp:2px}
.jc-bh .jc-day{grid-column:1/-1}
.jc-row{display:grid;grid-template-columns:calc(5*var(--u)) calc(15*var(--u));column-gap:var(--u);row-gap:calc(var(--u)*.2);align-items:center;padding:calc(var(--u)*.36) 0;border-top:1px solid rgba(255,255,255,.07)}
.jc-row.is-off{display:none}
.jc-g{display:flex;flex:none;width:calc(var(--c)*var(--u));min-width:0}
.jc-tm{--c:5}.jc-ss{--c:15}.jc-rm{--c:8}.jc-st{--c:12}
.jc-rs{grid-column:1/-1;display:flex;align-items:center;min-width:0}
.jc-rs .jc-led{margin-inline:calc(var(--u)*.19)}
.jc-lsp{display:block;flex:none;width:var(--u)}
.jc-cl{padding:0 0 8px;border-top:0}
.jc-cl .jc-g{display:block;width:auto;font:700 12px/1.2 var(--fb);letter-spacing:.14em;color:var(--mut);white-space:nowrap}
.jc-cl .jc-rm{width:calc(8*var(--u))}
.jc-cl .jc-lsp{width:var(--u)}
.jc-rows .jc-row:first-child{border-top:1px solid rgba(255,255,255,.1)}
.jc-row[data-s="0"] .jc-st .jc-c{color:#e9e8e4}
.jc-row[data-s="1"] .jc-st .jc-c{color:#ffc59a}
.jc-row[data-s="2"] .jc-st .jc-c{color:var(--ac)}
.jc-row[data-s="3"] .jc-st .jc-c{color:#80808a}
.jc-row[data-s="3"] .jc-ss .jc-c,.jc-row[data-s="3"] .jc-tm .jc-c{color:#a9a9b3}
.jc-row[data-e="1"]{border-top-color:transparent}
.jc-row[data-e="1"] .jc-ss .jc-c{color:#a9a9b3}

/* =====================  HERO  ===================== */
.jc-hero{background:#09090b;padding-top:clamp(104px,9vw,136px);padding-bottom:clamp(40px,5vw,72px)}
.jc-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(48% 40% at 84% 6%,rgba(255,106,19,.2),transparent 72%),radial-gradient(40% 30% at 0% 100%,rgba(255,106,19,.09),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 64px)}
.jc-hg{display:flex;flex-direction:column;gap:clamp(16px,3vw,28px);margin-top:clamp(12px,2vw,22px)}
.jc-hl{container-type:inline-size;min-width:0}
.jc-hr{min-width:0}
.sk-jc .jc-kk{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:700 12px/1.3 var(--fb);letter-spacing:.18em;color:#d6d6dc}
.jc-kk .jc-led{--u:16px}
.sk-jc .jc-title{margin:0;line-height:1;letter-spacing:0}
.jc-t0{display:block;font:800 clamp(76px,27vw,172px)/1 var(--ff);letter-spacing:-.05em;color:var(--ac)}
.jc-tt{display:flex;--u:calc(100cqw/4);--gp:clamp(6px,2.2cqw,12px)}
.jc-tt .jc-c{height:calc(var(--u)*1.34);font-weight:800;font-size:calc(var(--u)*.88);line-height:calc(var(--u)*1.34);border-radius:calc(var(--u)*.06);
  --jf1:#ff7f35;--jf2:#ff6a13;--jf3:#f7650f;--jf4:#ee600d;--jg:#0a0a0c;--jl:#7a2c00}
.jc-hr .s-sub{max-width:48ch;margin-top:0}
.jc-hr .s-btns{margin-top:18px}
.jc-hero .jc-bd{margin-top:clamp(20px,3vw,34px)}
@media(max-width:699px){.jc-hr .s-btns{flex-wrap:nowrap;gap:10px}.jc-hr .s-btns .btn{flex:1 1 0;min-width:0;padding-inline:8px;white-space:nowrap}}
.sk-jc .jc-hint{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;font:500 14px/1.5 var(--fb);color:var(--mut)}
.jc-hd{position:relative;flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--ac)}
.jc-hero .jc-rows .jc-row:nth-child(n+6){display:none}
.jc-hero .jc-rows{cursor:pointer}

/* =====================  01 · BẢNG PHIÊN  ===================== */
.jc-ctl{display:grid;gap:12px;margin-bottom:16px}
.jc-bh-w{grid-template-columns:1fr auto;margin-bottom:4px}
.jc-clkw{display:grid;gap:8px}
.jc-lb{font:700 12px/1 var(--fb);letter-spacing:.16em;color:var(--mut)}
.jc-play{display:inline-flex;align-items:center;gap:10px;min-width:48px;padding:0 16px}
.jc-play b{font-weight:700;letter-spacing:.1em}
.jc-pi{display:block;flex:none;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.jc-play[aria-pressed="true"]{border-color:var(--ac);color:var(--ac)}
.jc-play[aria-pressed="true"] .jc-pi{width:12px;height:14px;border:0;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
.jc-tr{margin:4px 0 8px}
.sk-jc .jc-cap{margin:16px 0 0;font:500 15px/1.55 var(--fb);color:#d6d6dc}
.jc-cap b{color:var(--ac);font-weight:700}
.jc-leg{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.jc-leg li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.jc-leg .jc-led{--u:16px;grid-row:1/3}
.jc-leg b{font:700 13px/1.3 var(--fb);letter-spacing:.08em}
.jc-leg span{display:none;font:400 13px/1.35 var(--fb);color:var(--mut)}

/* =====================  02 · DỰ ÁN  ===================== */
.jc-pj{display:grid;gap:22px;min-width:0}
.jc-pj-l,.jc-pj-r{min-width:0}
.jc-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 0;padding:0}
.jc-nm{margin:0;padding:12px 12px 14px;border:1px solid var(--ln);border-radius:var(--r);background:linear-gradient(180deg,#131317,#0e0e11)}
.jc-nm dt{margin:0 0 10px;font:700 12px/1.2 var(--fb);letter-spacing:.14em;color:var(--mut)}
.jc-nb{display:flex;margin:0;--u:38px;--gp:3px}
.jc-nb .jc-c{color:var(--ac)}
.sk-jc .jc-pj-note{margin:14px 0 0;font:400 15px/1.6 var(--fb);color:#d0d0d7;min-height:4.8em}
.sk-jc .jc-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:4px var(--gut) 14px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;perspective:none}
.jc-cards::-webkit-scrollbar{display:none}
.jc-cards .card-body em{font-size:12px}
.sk-jc .jc-cards>.card{flex:0 0 min(78%,320px);scroll-snap-align:start;min-width:0}

/* =====================  03 · DÒNG NGƯỜI  ===================== */
.jc-fl{display:grid;gap:0;min-width:0}
.jc-fc{display:grid;gap:6px;padding:16px 16px 18px;background:linear-gradient(180deg,#141418,#0f0f12)}
.jc-fc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.jc-fc-top label{font:600 15px/1.3 var(--fb);color:#d6d6dc}
.jc-no{font:800 clamp(36px,10vw,54px)/1 var(--ff);letter-spacing:-.03em;color:var(--ac);font-variant-numeric:tabular-nums}
.jc-pre{margin-top:2px}
.jc-fc-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.jc-nds{list-style:none;margin:0;padding:0;display:grid;gap:0;--fl:.4}
.jc-nd{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"h h w" "b c c";align-items:center;gap:6px 12px;margin-top:22px;padding:12px 14px;border:1px solid var(--ln);border-radius:10px;background:var(--card);transition:border-color .4s,background .4s}
.jc-nd::before{content:"";position:absolute;left:30px;top:-22px;width:calc(2px + var(--fl)*3px);height:22px;margin-left:-1px;background:repeating-linear-gradient(180deg,var(--ac) 0 6px,transparent 6px 12px);opacity:.85}
.jc-nd:first-child::before{display:none}
.jc-nd.is-over{border-color:var(--ac);background:linear-gradient(180deg,#1d150f,#15151a)}
.jc-nd-h{grid-area:h;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i n" "i g";column-gap:10px;align-items:center}
.jc-nd-i{grid-area:i;font-size:28px;line-height:1;color:var(--ac)}
.jc-nd-h h3{grid-area:n;font:800 15px/1.2 var(--ff);letter-spacing:.02em}
.jc-nd-h small{display:none;grid-area:s;font:400 13px/1.3 var(--fb);color:var(--mut)}
.jc-nd-w{grid-area:w;justify-self:end}
.jc-wl{font:700 12px/1 var(--fb);letter-spacing:.14em;color:var(--mut)}
.jc-wv{display:block;font:800 30px/1 var(--ff);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.jc-nd.is-over .jc-wv{color:var(--ac)}
.jc-bar{grid-area:b;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.jc-bar i{display:block;height:12px;border-radius:2px;background:#2b2b32;transition:background .3s}
.jc-bar i.is-on{background:#e9e8e4}
.jc-bar i.is-hot{background:var(--ac)}
.jc-nd-c{grid-area:c;display:flex;align-items:center;gap:4px;justify-self:end}
.jc-nd-c button{flex:none;width:44px;height:44px;border-radius:var(--r);border:1px solid var(--ln);background:#0e0e11;color:var(--ink);font:700 22px/1 var(--fb);cursor:pointer;transition:border-color .25s,background .25s}
.jc-nd-c button:active{background:var(--ac);color:#0a0a0c}
.jc-nd-c output{min-width:46px;text-align:center;font:500 13px/1.2 var(--fb);color:#d6d6dc}
.jc-nd-c output b{display:block;font:800 22px/1 var(--ff);color:var(--ink)}
.sk-jc .jc-nd-g{grid-area:g;margin:0;font:400 13px/1.3 var(--fb);color:var(--mut)}
.jc-nd-g b{color:var(--ac)}
.sk-jc .jc-lg2{margin:16px 0 0;font:700 12px/1.5 var(--fb);letter-spacing:.1em;color:var(--mut)}
.sk-jc .jc-fs{margin:18px 0 0;font:500 15px/1.6 var(--fb);color:#e4e4e8}
.jc-fs b{color:var(--ac)}
.sk-jc .jc-fine{margin:12px 0 0;max-width:76ch;font:400 13px/1.55 var(--fb);color:var(--mut)}

/* =====================  04 · BA LỚP  ===================== */
.jc-bento{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.jc-lay{--sp:1;position:relative;min-width:0;padding:8px 4px 0;border:1px solid var(--ln);border-radius:12px;background:radial-gradient(60% 60% at 40% 45%,rgba(255,106,19,.12),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 28px),#0c0c0f;overflow:hidden}
.jc-lsvg{display:block;width:100%;height:auto;max-height:420px;overflow:visible}
.jc-pl{transition:opacity .35s}
.jc-pl[data-i="0"]{--pc:#f5f4f1;transform:translateY(calc(var(--sp)*-58px - 14px))}
.jc-pl[data-i="1"]{--pc:#1d1d23}
.jc-pl[data-i="2"]{--pc:#ff6a13;transform:translateY(calc(var(--sp)*58px + 14px))}
.jc-tp{fill:var(--pc)}
.jc-pl[data-i="1"] .jc-tp{stroke:rgba(255,255,255,.22);stroke-width:1}
.jc-sd,.jc-sd2{fill:color-mix(in srgb,var(--pc) 58%,#000)}
.jc-sd2{fill:color-mix(in srgb,var(--pc) 72%,#000)}
.jc-pl[data-i="1"] .jc-sd,.jc-pl[data-i="1"] .jc-sd2{fill:#09090b;stroke:rgba(255,255,255,.2);stroke-width:1}
.jc-pt0 rect{fill:#0a0a0c}
.jc-pt0 rect:nth-child(odd){fill:#ff6a13}
.jc-pt1 circle{fill:#ff6a13}
.jc-stg{fill:#f5f4f1}
.jc-pt2 circle{fill:#0a0a0c}
.jc-pth{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 8}
.jc-lt{font-family:var(--fd);font-size:30px;fill:var(--ac);opacity:clamp(0,calc((var(--sp) - .25)*2.6),1)}
.jc-ln{font:700 13px var(--fb);letter-spacing:.06em;fill:#f5f4f1;opacity:clamp(0,calc((var(--sp) - .25)*2.6),1)}
.jc-lay[data-hi="0"] .jc-pl:not([data-i="0"]),.jc-lay[data-hi="1"] .jc-pl:not([data-i="1"]),.jc-lay[data-hi="2"] .jc-pl:not([data-i="2"]){opacity:.42}
.jc-tl{min-width:0;padding:18px;border:1px solid var(--ln);border-radius:12px;background:var(--card);transition:border-color .35s,background .35s}
.jc-tl.is-on{border-color:var(--ac);background:linear-gradient(180deg,#1b140f,#15151a)}
.jc-tl h3{margin:0}
.jc-tb{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0;border:0;background:none;color:var(--ink);font:800 19px/1.2 var(--ff);letter-spacing:.01em;text-align:left;cursor:pointer}
.jc-tb .s-art{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:4px;background:var(--ac);color:#0a0a0c;font-size:26px}
.jc-tb:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:6px}
.sk-jc .jc-tl>p{margin:4px 0 10px;font:600 16px/1.4 var(--fb);color:#e6e6ea;transition:margin .35s}
.jc-tl .s-list{margin:0;font-size:15px}
.jc-tl-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.jc-tl-x>ul{min-height:0;overflow:hidden}
.jc-tl.is-on .jc-tl-x{grid-template-rows:1fr}
.jc-tl.is-on .jc-tl-x>ul{padding-top:2px}
.s-lt .jc-tl{background:var(--card)}
.s-lt .jc-tl>p{color:var(--ink)}
.s-lt .jc-tl.is-on{background:var(--card);box-shadow:0 0 0 1px var(--ac)}
.s-lt .jc-tl:not(.jc-nt)>p+.jc-tl-x li{color:var(--ink)}
.s-lt .jc-tl.jc-nt{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.sk-jc .jc-tl:not(.is-on):not(.jc-nt)>p{margin-bottom:0}
.jc-nt{display:none;align-content:center;gap:8px;padding:14px 16px;background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.sk-jc .jc-tl>.jc-nt-k{margin:0;color:inherit;font:800 12px/1 var(--fb);letter-spacing:.2em}
.sk-jc .jc-tl>.jc-nt-t{margin:0;color:inherit;font:700 17px/1.4 var(--fb)}

/* =====================  05 · ĐỌC THÊM  ===================== */
.jc-bd-t{--n:22;padding:14px 12px 10px}
.jc-tkr{display:grid;gap:calc(var(--u)*.5)}
.jc-tkl{display:flex}
.jc-tkl+.jc-tkl .jc-c{color:var(--ac)}
.jc-tk-x{display:grid;gap:14px;margin-top:14px}
.sk-jc .jc-tk-f{margin:0;min-height:4.7em;font:400 15px/1.6 var(--fb);color:#d9d9df}
.jc-tk-f b{color:var(--ink)}
.jc-tk-n{display:flex;align-items:center;gap:12px}
.jc-tk-n .btn{min-width:56px;padding:0 20px;font-size:22px}
.jc-tk-c{font:700 14px/1 var(--fb);letter-spacing:.12em;color:var(--mut)}
.jc-rd{margin-top:clamp(22px,4vw,40px)}

/* =====================  MỞ RỘNG  ===================== */
@media(min-width:700px){
  .jc-nt{display:grid}
  .jc-leg span{display:block}
  .jc-tl-x{grid-template-rows:1fr}
  .sk-jc .jc-tl:not(.is-on):not(.jc-nt)>p{margin-bottom:10px}
  .jc-bd{padding:16px 18px 10px}
  .jc-clk{--u:24px}
  .jc-ctl{grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center;gap:16px}
  .jc-leg{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jc-nums{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jc-nb{--u:44px}
  .sk-jc .jc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-inline:0;padding:0;scroll-snap-type:none}
  .sk-jc .jc-cards>.card{flex:none}
  .jc-fc{grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center}
  .jc-fc>*{min-width:0}
  .jc-fc-top{grid-column:1}
  .jc-fc>input{grid-column:1}
  .jc-pre{grid-column:2;grid-row:1/3;flex-wrap:wrap;overflow:visible;margin:0;padding:0;justify-content:flex-end}
  .jc-fc-act{grid-column:1/-1;max-width:460px}
  .jc-nds{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .jc-nd:nth-child(even)::before{display:none}
  .jc-nd:last-child{grid-column:1/-1}
  .jc-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jc-lay{grid-column:1/-1}
  .jc-nt{grid-column:auto}
}
@media(min-width:820px){
  .jc-bd{--n:43}
  .jc-bd-t{--n:22}
  .jc-hg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end;gap:clamp(28px,4vw,56px)}
  .jc-hr .s-sub{margin-top:0}
  .jc-row{grid-template-columns:calc(5*var(--u)) calc(15*var(--u)) calc(21*var(--u))}
  .jc-rs{grid-column:auto}
  .jc-hero .jc-rows .jc-row:nth-child(n+6){display:grid}
  .jc-hero .jc-rows .jc-row:nth-child(n+7){display:none}
  .jc-hero .jc-rows .jc-row.is-off{display:none}
  .jc-bh{grid-template-columns:1fr auto auto;gap:14px 24px}
  .jc-bh .jc-day{grid-column:auto;min-width:240px}
  .jc-clk{--u:26px}
  .jc-bd-t .jc-bh{display:none}
}
@media(min-width:1025px){
  .jc-clk{--u:30px}
  .jc-pj{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.4vw,52px);align-items:start}
  .jc-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jc-nb{--u:52px;--gp:4px}
  .jc-fc{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);padding:20px 24px 22px}
  .jc-fc-act{grid-column:2;grid-row:auto;max-width:none}
  .jc-pre{grid-column:2;grid-row:1}
  .jc-nds{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px;margin-top:10px}
  .jc-nd{margin-top:20px;padding:14px 14px 16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "w" "b" "c";align-items:start;gap:10px}
  .jc-nd-h{grid-template-areas:"i n" "i s" "g g";row-gap:2px}
  .jc-nd-h small{display:block}
  .sk-jc .jc-nd-g{margin-top:6px}
  .jc-nd-w{justify-self:start}
  .jc-nd:nth-child(even)::before{display:block}
  .jc-nd:last-child{grid-column:auto}
  .jc-nd::before{left:-16px;top:34px;width:16px;height:calc(2px + var(--fl)*3px);margin:0;background:repeating-linear-gradient(90deg,var(--ac) 0 6px,transparent 6px 12px)}
  .jc-nd-c{justify-self:start}
  .jc-bento{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,4fr);grid-template-areas:"s a b" "s c n"}
  .jc-lay{grid-area:s;grid-column:auto;display:grid;align-content:center}
  .jc-tl0{grid-area:a}.jc-tl1{grid-area:b}.jc-tl2{grid-area:c}.jc-nt{grid-area:n}
  .jc-tk{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,44px);align-items:center}
  .jc-tk-x{margin-top:0}
}
@media(min-width:1025px) and (hover:hover){
  .jc-nd:hover{border-color:rgba(255,106,19,.6)}
  .jc-tl:hover{border-color:rgba(255,106,19,.6)}
  .jc-nd-c button:hover{border-color:var(--ac)}
}

/* =====================  CHUYỂN ĐỘNG TỰ CHẠY  ===================== */
@media(prefers-reduced-motion:no-preference){
  .jc-led[data-s="2"]::after{animation:jcRing 1.9s ease-out infinite}
  .jc-led[data-s="1"]{animation:jcBlink 1.1s steps(2,jump-none) infinite}
  .jc-hd::after{animation:jcRing 1.8s ease-out infinite}
  .jc-bd-h::after,.jc-bd-w::after{content:"";position:absolute;left:0;right:0;top:-40%;height:36%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,106,19,.07),transparent);animation:jcScan 8s linear infinite}
  .jc-nd::before{animation:jcDash calc(2.4s - var(--fl)*1.7s) linear infinite}
  .jc-nd.is-over .jc-wv{animation:jcWarn 1.4s ease-in-out infinite alternate}
}
@keyframes jcRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.7)}}
@keyframes jcBlink{from{opacity:1}to{opacity:.25}}
@keyframes jcScan{from{transform:translateY(0)}to{transform:translateY(420%)}}
@keyframes jcDash{from{background-position:0 0}to{background-position:0 12px}}
@keyframes jcWarn{from{opacity:1}to{opacity:.6}}
@media(prefers-reduced-motion:no-preference) and (min-width:1025px){
  .jc-nd::before{animation-name:jcDashX}
}
@keyframes jcDashX{from{background-position:0 0}to{background-position:12px 0}}
@media(prefers-reduced-motion:reduce){.jc-tl-x,.jc-pl,.jc-nd,.jc-tl,.jc-bar i{transition:none}}