/* KP Motion & Blocks 1.0 — dùng token của theme: --bg --panel --ink --muted --lime --line */
.kpb{--k-bg:var(--bg,#141512);--k-panel:var(--panel,#1d1f19);--k-ink:var(--ink,#f3f2e9);--k-muted:var(--muted,#a8aaa1);--k-lime:var(--lime,#aed434);--k-line:var(--line,#383b31);--k-r:var(--radius,3px);
  margin-block:0;padding-block:clamp(40px,6vw,84px);color:var(--k-ink);box-sizing:border-box;background:#0b0e08;box-shadow:0 0 0 100vmax #0b0e08;clip-path:inset(0 -100vmax)}
.kpb+.kpb{padding-top:0}
.kpb .eyebrow,.kpb p,.kpb dt,.kpb dd{color:inherit}
.kpb-eyebrow{color:var(--k-lime)!important}.kpb-stat-label{color:var(--k-ink)!important}.kpb-sow-d,.kpb-caption,.kpb-stat-note,.kpb-info-row dt{color:var(--k-muted)!important}
.kpb *,.kpb *::before,.kpb *::after{box-sizing:border-box}
.kpb img{display:block;max-width:100%;height:auto}
.kpb-head{margin-bottom:clamp(20px,3vw,40px)}
.kpb-eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.14em;color:var(--k-lime)}
.kpb-title{margin:0;font-size:clamp(26px,4vw,48px);line-height:1.08;letter-spacing:-.02em}
.kpb-caption{margin:14px 0 0;color:var(--k-muted);font-size:14px}

/* 1. Số liệu */
.kpb-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--k-line);border-left:1px solid var(--k-line)}
.kpb-stat{min-width:0;padding:clamp(20px,3vw,36px);border-right:1px solid var(--k-line);border-bottom:1px solid var(--k-line);background:linear-gradient(180deg,#ffffff05,transparent)}
.kpb-stat-num{display:flex;align-items:baseline;gap:4px;font-size:clamp(34px,5vw,64px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--k-lime);font-variant-numeric:tabular-nums}
.kpb-stat-aff{font-size:.5em;font-weight:600}
.kpb-stat-label{margin:12px 0 0;font-size:15px;color:var(--k-ink)}
.kpb-stat-note{margin:6px 0 0;font-size:13px;color:var(--k-muted)}

/* 2. Thông tin */
.kpb-info-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin:0;border-top:1px solid var(--k-line)}
.kpb-info-row{padding:18px 20px 18px 0;border-bottom:1px solid var(--k-line)}
.kpb-info-row dt{margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-muted)}
.kpb-info-row dd{margin:0;font-size:clamp(16px,1.6vw,20px);font-weight:600}

/* 3. SOW */
.kpb-sow-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--k-line)}
.kpb-sow-item{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.4fr);gap:8px 20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--k-line);transition:background .25s,padding .25s}
.kpb-sow-item:hover{background:#aed4340d;padding-inline:12px}
.kpb-sow-n{color:var(--k-lime);font-size:13px;letter-spacing:.1em}
.kpb-sow-t{font-size:clamp(18px,2vw,26px);font-weight:600;line-height:1.2}
.kpb-sow-d{color:var(--k-muted);font-size:15px;line-height:1.55}
@media(max-width:700px){.kpb-sow-item{grid-template-columns:40px 1fr}.kpb-sow-d{grid-column:2}}

/* 4. Bento */
.kpb-bento-grid{display:grid;grid-template-columns:repeat(var(--kpb-cols,4),minmax(0,1fr));grid-auto-rows:clamp(150px,18vw,260px);grid-auto-flow:dense;gap:clamp(8px,1.2vw,16px)}
.kpb-tile{position:relative;margin:0;overflow:hidden;border-radius:var(--k-r);background:var(--k-panel);border:1px solid var(--k-line)}
.kpb-w{grid-column:span 2}.kpb-t{grid-row:span 2}.kpb-l{grid-column:span 2;grid-row:span 2}
.kpb-zoom{width:100%;height:100%;overflow:hidden}
.kpb-tile .kpb-zoom img,.kpb-gi .kpb-zoom img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.kpb-tile:hover .kpb-zoom img,.kpb-gi:hover .kpb-zoom img{transform:scale(1.05)}
.kpb-cap{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:4px;padding:40px 18px 16px;background:linear-gradient(0deg,#0b0e08ee,transparent);font-size:14px;line-height:1.45}
.kpb-cap strong{font-size:clamp(15px,1.5vw,19px)}
.kpb-cap span{color:#d9dbd0}
.kpb-noimg{display:flex;align-items:flex-end;background:var(--k-panel)}
.kpb-noimg .kpb-cap{position:static;background:none;padding:20px}
.kpb-tone-lime{background:var(--k-lime);color:#10130a;border-color:var(--k-lime)}.kpb-tone-lime .kpb-cap span{color:#10130acc}
@media(max-width:800px){.kpb-bento-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}.kpb-l,.kpb-w{grid-column:span 2}.kpb-l{grid-row:span 2}}

/* 5. Slider */
.kpb-slider-wrap{position:relative}
.kpb-slider-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.kpb-slider-track::-webkit-scrollbar{display:none}
.kpb-slide{flex:0 0 calc((100% - 16px*(var(--kpb-per) - 1))/var(--kpb-per));scroll-snap-align:start;aspect-ratio:var(--kpb-ratio,4/3);overflow:hidden;border-radius:var(--k-r);background:var(--k-panel)}
.kpb-slide img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.kpb-slide{flex-basis:calc((100% - 12px*(var(--kpb-per-m) - 1))/var(--kpb-per-m))}.kpb-slider-track{gap:12px}}
.kpb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--k-line);background:#0b0e08cc;color:var(--k-ink);font-size:18px;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,color .2s,opacity .2s}
.kpb-nav:hover{background:var(--k-lime);color:#10130a}
.kpb-prev{left:10px}.kpb-next{right:10px}.kpb-nav[disabled]{opacity:.25;pointer-events:none}
.kpb-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.kpb-dots i{width:8px;height:8px;border-radius:50%;background:var(--k-line);transition:background .2s,width .2s}
.kpb-dots i.on{background:var(--k-lime);width:24px;border-radius:6px}
@media(hover:none){.kpb-nav{display:none}}

/* 6. Trước / Sau */
.kpb-cmp{position:relative;aspect-ratio:var(--kpb-ratio,16/10);overflow:hidden;border-radius:var(--k-r);border:1px solid var(--k-line);background:var(--k-panel);touch-action:pan-y;user-select:none}
.kpb-cmp-after,.kpb-cmp-before{position:absolute;inset:0}
.kpb-cmp img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.kpb-cmp-before{clip-path:inset(0 calc(100% - var(--kpb-pos)) 0 0)}
.kpb-cmp-tag{position:absolute;top:14px;padding:5px 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:#0b0e08cc;border-radius:2px}
.kpb-tag-l{left:14px}.kpb-tag-r{right:14px}
.kpb-cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.kpb-cmp-bar{position:absolute;top:0;bottom:0;left:var(--kpb-pos);width:2px;margin-left:-1px;background:var(--k-lime);z-index:2;pointer-events:none}
.kpb-cmp-bar i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--k-lime);box-shadow:0 0 0 6px #aed43440}
.kpb-cmp-bar i::before,.kpb-cmp-bar i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.kpb-cmp-bar i::before{left:8px;border-right-color:#10130a}.kpb-cmp-bar i::after{right:8px;border-left-color:#10130a}
.kpb-cmp-range:focus-visible~.kpb-cmp-bar i{outline:2px solid #fff}

/* 7. Lưới ảnh */
.kpb-grid-fixed .kpb-grid-in{display:grid;grid-template-columns:repeat(var(--kpb-gc,4),minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.kpb-grid-fixed .kpb-gi{aspect-ratio:var(--kpb-ratio,1/1)}
@media(max-width:700px){.kpb-grid-fixed .kpb-grid-in{grid-template-columns:repeat(var(--kpb-gm,2),minmax(0,1fr));gap:8px}}
.kpb-gi{margin:0;overflow:hidden;border-radius:var(--k-r);background:var(--k-panel)}
.kpb-grid-auto .kpb-grid-in{display:flex;flex-wrap:wrap;gap:clamp(8px,1.2vw,16px)}
.kpb-grid-auto .kpb-gi{flex:calc(var(--r)*100) 1 calc(var(--r)*var(--kpb-row,260px));aspect-ratio:var(--r)}
.kpb-grid-auto .kpb-grid-in::after{content:"";flex:999 1 0}
@media(max-width:700px){.kpb-grid-auto .kpb-gi{flex-basis:calc(var(--r)*var(--kpb-row,260px)*.6)}}

/* 8. YouTube */
.kpb-yt{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--k-r);border:1px solid var(--k-line);background:#000}
.kpb-yt iframe,.kpb-yt-play,.kpb-yt-play img{position:absolute;inset:0;width:100%;height:100%;border:0}
.kpb-yt-play{padding:0;margin:0;border:0;background:none;cursor:pointer}
.kpb-yt-play img{object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .3s}
.kpb-yt-play:hover img{transform:scale(1.03);opacity:.85}
.kpb-yt-btn{position:absolute;top:50%;left:50%;width:84px;height:84px;margin:-42px;border-radius:50%;background:var(--k-lime);box-shadow:0 0 0 10px #aed43440;transition:transform .25s}
.kpb-yt-btn::after{content:"";position:absolute;top:50%;left:50%;margin:-14px 0 0 -9px;border-left:26px solid #10130a;border-top:14px solid transparent;border-bottom:14px solid transparent}
.kpb-yt-play:hover .kpb-yt-btn{transform:scale(1.08)}

/* 9. Ảnh dài */
.kpb-browser{max-width:min(100%,980px);margin-inline:auto;border:1px solid var(--k-line);border-radius:10px;overflow:hidden;background:var(--k-panel);box-shadow:0 30px 70px -30px #000}
.kpb-browser-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--k-line);background:#ffffff08}
.kpb-browser-bar i{width:10px;height:10px;border-radius:50%;background:var(--k-line)}
.kpb-browser-bar span{margin-left:10px;padding:4px 12px;border-radius:20px;background:#0b0e08;color:var(--k-muted);font-size:12px;flex:1;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpb-tall-view{height:var(--kpb-h,640px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#58623d transparent;cursor:ns-resize}
.kpb-tall-view img{width:100%;height:auto}
@media(max-width:700px){.kpb-tall-view{height:min(var(--kpb-h,640px),70vh)}}

/* ===== Hiệu ứng toàn site (JS gắn class) ===== */
html.kp-fx [data-reveal].kp-in{will-change:auto}
.kp-count-done{animation:kp-pop .5s ease}
@keyframes kp-pop{50%{transform:scale(1.06)}}
.kp-ripple-ring{position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;border:1.5px solid #dcffa3;pointer-events:none}
@media(prefers-reduced-motion:reduce){.kpb *{transition:none!important;animation:none!important}.kpb-slider-track{scroll-behavior:auto}}