/* KP Motion & Blocks 2.0 — block trang dự án, cùng ngôn ngữ thiết kế với theme khoa-pham-portfolio. */
.kpb{--kpb-gap:clamp(10px,1.4vw,20px);--kpb-line:#aed43435;--kpb-line-h:#aed43490;--kpb-bg:#131710;padding-block:clamp(40px,6vw,80px);min-width:0}
.kpb *,.kpb *::before,.kpb *::after{box-sizing:border-box}
.kpb-warn{padding:14px 18px;border:1px dashed #e0a84a;color:#e0a84a;font-size:13px}

/* Tiêu đề khối: eyebrow + tiêu đề bên trái, mô tả bên phải */
.kpb-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin:0 0 clamp(22px,3vw,36px)}
.kpb-heading .eyebrow{color:var(--lime,#aed434)}
.kpb-heading h2{max-width:720px;margin:16px 0 0;font-size:clamp(32px,4.2vw,58px);line-height:1.16;letter-spacing:-.045em}
.kpb-heading>div>.eyebrow:only-child{margin:0}
.kpb-heading>p{flex-shrink:0;max-width:320px;margin:0;font-size:13px;line-height:1.9;color:#b2bca6}
.kpb-kicker{margin:0 0 22px}
@media (max-width:800px){.kpb-heading{display:block}.kpb-heading>p{max-width:none;margin-top:16px;font-size:12px}}

/* Ảnh dùng chung (bấm để phóng to bằng hộp xem ảnh của theme) */
.kpb-fig{min-width:0;margin:0;display:flex;flex-direction:column}
.kpb-fig .zoom-image{flex:1;border:1px solid var(--kpb-line);border-radius:12px;background:var(--kpb-bg);transition:border-color .25s,box-shadow .25s}
.kpb-fig .zoom-image:hover,.kpb-fig .zoom-image:focus-visible{border-color:var(--kpb-line-h);box-shadow:0 0 24px #aed43418}
.kpb-fig .zoom-image:focus-visible{outline:2px solid var(--lime,#aed434);outline-offset:4px}
.kpb-fig .zoom-image>.kpb-hint{display:grid;place-items:center;min-width:32px;height:32px;padding:0 10px;font-size:16px;opacity:0;background:#11170eeb;transition:opacity .2s}
.kpb-fig .zoom-image:hover>.kpb-hint,.kpb-fig .zoom-image:focus-visible>.kpb-hint{opacity:1}
.kpb-fig .zoom-image:hover img{transform:none}
.kpb-fig figcaption.kpb-cap{margin:12px 3px 0;font-size:12px;line-height:1.65;color:#aab49b}
.kpb-sr{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (hover:none){.kpb-fig .zoom-image>.kpb-hint{opacity:1;font-size:10px}}

/* SOW: dùng giao diện case-focus của theme, chỉ cho chỉnh số cột */
.kpb-sow .focus-grid.kpb-sow-grid{grid-template-columns:repeat(var(--kpb-cols,4),minmax(0,1fr))}
@media (max-width:900px){.kpb-sow .focus-grid.kpb-sow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpb-sow .focus-grid.kpb-sow-grid{grid-template-columns:1fr}}

/* Video Shorts: giao diện lấy từ rebranding.css của theme */
.kpb-shorts-wrap{padding-block:clamp(40px,6vw,80px)}

/* Bento tự xếp */
.kpb-bento{display:grid;grid-template-columns:repeat(var(--kpb-cols,4),minmax(0,1fr));gap:var(--kpb-gap);grid-auto-flow:dense}
.kpb-bento-photo{grid-auto-rows:clamp(150px,16vw,250px)}
.kpb-bento-photo .zoom-image{height:100%}
.kpb-bento-photo .zoom-image img{width:100%;height:100%;object-fit:cover}
.kpb-bento-text{grid-auto-rows:clamp(190px,19vw,300px);row-gap:calc(var(--kpb-gap) + 40px)}
.kpb-bento-text .zoom-image{display:grid;place-items:center;min-height:0;padding:clamp(8px,1vw,14px);border-radius:16px;background:#111510}
.kpb-bento-text .zoom-image img{width:100%;height:100%;object-fit:contain}
.kpb-bento-text .kpb-fig{height:100%}
.kpb-bento-text figcaption.kpb-cap{margin-top:10px;min-height:20px}
.kpb-b-w{grid-column:span 2}.kpb-b-t{grid-row:span 2}.kpb-b-l{grid-column:span 2;grid-row:span 2}
@media (max-width:800px){
  .kpb-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpb-bento .kpb-fig{grid-column:auto;grid-row:auto}
  .kpb-bento .kpb-m-w{grid-column:span 2}.kpb-bento .kpb-m-t{grid-row:span 2}.kpb-bento .kpb-m-l{grid-column:span 2;grid-row:span 2}
  .kpb-bento-photo{grid-auto-rows:clamp(120px,36vw,200px)}
  .kpb-bento-text{grid-auto-rows:clamp(150px,40vw,220px);row-gap:calc(var(--kpb-gap) + 34px)}
}

/* Slider: desktop 2 ảnh, mobile 1 ảnh */
.kpb-slider-frame{position:relative;min-width:0}
.kpb-track{display:flex;gap:var(--kpb-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab}
.kpb-track::-webkit-scrollbar{display:none}
.kpb-track.is-drag{cursor:grabbing;scroll-snap-type:none}
.kpb-slide{flex:0 0 calc((100% - var(--kpb-gap) * (var(--kpb-per) - 1)) / var(--kpb-per));min-width:0;scroll-snap-align:start}
.kpb-slide .zoom-image{aspect-ratio:var(--kpb-ratio,4/3)}
.kpb-slide .zoom-image img{width:100%;height:100%}
.kpb-fit-cover .zoom-image img{object-fit:cover}
.kpb-fit-contain .zoom-image img{object-fit:contain}
.kpb-slider-bar{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.kpb-dots{display:flex;gap:8px;flex-wrap:wrap}
.kpb-dots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:#3a4032;cursor:pointer;transition:width .25s,background .25s}
.kpb-dots button.is-on{width:26px;background:var(--lime,#aed434)}
.kpb-arrows{display:flex;gap:10px}
.kpb-arrows button{width:46px;height:46px;border:1px solid var(--kpb-line);border-radius:50%;background:#10130e;color:#f3f2e9;font-size:17px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.kpb-arrows button:hover{background:var(--lime,#aed434);border-color:var(--lime,#aed434);color:#10130a}
.kpb-arrows button[disabled]{opacity:.3;pointer-events:none}
.kpb-slider.is-static .kpb-slider-bar{display:none}
@media (max-width:700px){.kpb-slide{flex-basis:calc((100% - var(--kpb-gap) * (var(--kpb-per-m) - 1)) / var(--kpb-per-m))}}

/* Lưới ảnh đều: desktop 4 cột, mobile 2 cột */
.kpb-grid{display:grid;grid-template-columns:repeat(var(--kpb-cols,4),minmax(0,1fr));gap:26px 18px;align-items:start}
.kpb-grid .zoom-image{aspect-ratio:var(--kpb-ratio,1/1)}
.kpb-grid .zoom-image img{width:100%;height:100%}
.kpb-grid figcaption.kpb-cap{margin-top:10px;font-size:11px}
@media (max-width:700px){.kpb-grid{grid-template-columns:repeat(var(--kpb-cols-m,2),minmax(0,1fr));gap:18px 12px}}

/* Lưới tự theo tỷ lệ: mỗi hàng tự co giãn theo tỷ lệ của từng ảnh */
.kpb-ratio{display:flex;flex-direction:column;gap:var(--kpb-gap)}
.kpb-ratio-row{display:flex;gap:var(--kpb-gap);min-width:0}
.kpb-ri{flex:var(--r) 1 0;min-width:0}
.kpb-ri .zoom-image{aspect-ratio:var(--r)}
.kpb-ri .zoom-image img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.kpb-ratio-row{flex-wrap:wrap}.kpb-ri{flex:var(--r) 1 calc(var(--r) * 140px)}}
.kpb-top{margin-bottom:clamp(18px,2.4vw,30px)}

/* Ảnh dài: cột có số, tiêu đề, mô tả + ảnh hiện đủ chiều dài */
.kpb-tall{display:grid;grid-template-columns:repeat(var(--kpb-cols,3),minmax(0,1fr));gap:24px;align-items:start}
.kpb-tall-col{min-width:0}
.kpb-tall-copy{margin-bottom:18px}
.kpb-tall-copy span{display:block;margin-bottom:12px;color:var(--lime,#aed434);font-size:11px;letter-spacing:.12em}
.kpb-tall-copy h3{margin:0 0 8px;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.kpb-tall-copy p{margin:0;font-size:13px;line-height:1.8;color:#b2bca6}
.kpb-tall .zoom-image{background:#fff;border-color:#aed43440}
.kpb-tall .zoom-image img{display:block;width:100%;height:auto}
.kpb-tall-scroll .zoom-image{max-height:var(--kpb-h);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.kpb-tall .zoom-image>.kpb-hint{font-size:11px;position:sticky;float:right;bottom:15px}
@media (max-width:900px){.kpb-tall{grid-template-columns:repeat(min(var(--kpb-cols,3),2),minmax(0,1fr))}}
@media (max-width:600px){.kpb-tall{grid-template-columns:1fr;gap:40px}}

/* Trước / Sau khung lớn */
.kpb-cw{--kpb-split:50%;padding:clamp(12px,2.2vw,28px);border:1px solid #aed43445;border-radius:16px;background:#10120e}
.kpb-cw-labels{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px;color:#dce5cf;font-size:12px}
.kpb-cw-labels>:last-child{text-align:right;color:var(--lime,#aed434)}
.kpb-cw-stage{position:relative;width:100%;max-height:680px;overflow:hidden;border-radius:8px;background:#e7e7e7;cursor:ew-resize;touch-action:pan-y pinch-zoom;user-select:none}
.kpb-cw-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.kpb-cw-over{position:absolute;inset:0;clip-path:inset(0 0 0 var(--kpb-split))}
.kpb-cw-div{position:absolute;top:0;bottom:0;left:var(--kpb-split);width:2px;margin-left:-1px;background:var(--lime,#aed434);pointer-events:none}
.kpb-cw-div span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--lime,#aed434);color:#10120e;font-size:22px;box-shadow:0 4px 20px #0004}
.kpb-cw-ctrl{display:flex;align-items:center;gap:20px;padding-top:14px}
.kpb-cw-ctrl label{font-size:12px;color:#dce5cf;white-space:nowrap}
.kpb-cw-ctrl label span{margin-left:8px;color:var(--lime,#aed434)}
.kpb-cw-ctrl input{flex:1;min-width:0;height:44px;margin:0;padding:0;accent-color:var(--lime,#aed434);cursor:ew-resize}
.kpb-cw-val{width:62px;text-align:right;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums;color:var(--lime,#aed434)}
@media (max-width:600px){.kpb-cw-ctrl label{display:none}}

@media (prefers-reduced-motion:reduce){.kpb *{transition:none!important;animation:none!important}.kpb-track{scroll-behavior:auto}}