/* Mobile */ @media (max-width: 767.98px){ .container.blv-noibat .col.bg-white.blv-wrap{ min-height: 220px; } .blv-noibat .item{ width: 132px; } } /* kehoach.cv consolidated UI */ :root { --kh-radius: 6px; } /* grid cards */ .video-item{position:relative} .video-item .mask{position:absolute;inset:auto calc(var(--bs-gutter-x,.75rem)/2);top:0;height:160px;border-radius:var(--kh-radius) var(--kh-radius) 0 0} .video-item .live-cover{display:block;width:100%;height:167px;object-fit:cover;border-radius:var(--kh-radius)} .video-item .bottom-title .name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* player wrapper stable */ #videoBox{position:relative} #videoBox video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} #videoFallback{position:absolute;inset:0;background:#000 url('/wp-content/uploads/2025/08/bgvd.webp') center/cover no-repeat} /* tabs area */ .kh-tabs .nav-tabs .nav-link{border:none} .kh-tabs .tab-content{border:1px solid #dee2e6;border-top:0} /* small utilities */ .rounded-6{border-radius:var(--kh-radius)} /* ===== KH Slider — style giống mẫu + ẩn thanh cuộn ngang ===== */ :root{ --kh-card-w: 253px; --kh-gap: 8px; --kh-blue: #257BE5; --kh-blue-strong: #1465c8; --kh-orange: #E66D0A; } /* Container trắng + căn giữa giống “box-content” */ .kh-slider{ display:flex; align-items:center; justify-content:center; gap:16px; padding:16px 16px 32px; width:100%; background:#fff; border-radius:8px 8px 8px; } /* Thanh điều hướng dạng cột 38x179px, chỉ hiện trên desktop */ .kh-nav{ position:static; width:38px; height:179px; display:none; background:transparent; border:0; box-shadow:none; cursor:pointer; align-items:center; justify-content:center; } .kh-nav::before{ content:"‹"; font-size:2.25rem; line-height:1; color:#8C8C8C; } .kh-nav.next::before{ content:"›"; } @media (min-width: 960px){ .kh-nav{ display:flex; } } /* Track: scroll-snap, ẨN thanh cuộn ngang mọi trình duyệt */ .kh-track{ display:flex; gap:var(--kh-gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; /* làm mờ 2 mép cho đẹp; có thể bỏ nếu không thích */ mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); } /* Ẩn scrollbar: Chrome/Safari/Edge */ .kh-track::-webkit-scrollbar{ width:0; height:0; display:none; } /* Firefox */ .kh-track{ scrollbar-width:none; } /* IE/old Edge */ .kh-track{ -ms-overflow-style:none; } /* Card ~253px, cao tối thiểu 180px, nền xanh giống mẫu */ .kh-card{ flex:0 0 var(--kh-card-w); max-width:var(--kh-card-w); min-height:180px; display:flex; flex-direction:column; border-radius:.5rem; background:var(--kh-blue); box-shadow:0 6px 18px rgba(0,0,0,.12); color:#fff; scroll-snap-align:start; } /* Header xanh đậm cao ~39px */ .kh-card-head{ display:flex; align-items:center; justify-content:space-between; height:39px; padding:6px 12px; background:var(--kh-blue-strong); border-radius:.5rem .5rem 0 0; font-size:.75rem; } /* Thân card cao ~92px, bố cục 2 team + VS */ .kh-card-body{ display:flex; align-items:center; justify-content:space-between; height:92px; width:252px; padding:0 12px; background:var(--kh-blue); border-radius:0 0 .5rem .5rem; gap:.25rem; } .kh-card-body .team{ width:93px; display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; } .kh-card-body .team img{ width:55px; height:55px; border-radius:50%; background:#fff; } .kh-card-body .team .name{ font-size:.75rem; line-height:1; max-width:93px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kh-card-body .vs{ width:33px; text-align:center; font-size:1.5rem; } /* Footer nút cam */ .kh-card-foot{ display:flex; justify-content:center; padding-bottom:1rem; } .kh-btn-set{ min-height:32px; height:32px; width:140px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:.625rem; border-radius:60px; border:0; background:var(--kh-orange); color:#fff; } /* ===== KH Slider – compact + arrows outside ===== */ :root{ /* giữ nguyên rộng 253px như mẫu, chỉ hạ chiều cao tổng */ --kh-card-w: 253px; --kh-gap: 8px; --kh-blue: #257BE5; --kh-blue-strong: #1465c8; --kh-orange: #E66D0A; --kh-arrow: #257BE5; /* màu xanh của nút mũi tên */ --kh-card-h: 160px; /* chiều cao card mới (giảm từ ~180px) */ } /* wrapper thấp hơn 1 chút */ .kh-slider{ padding:12px 24px; position:relative; } /* card gọn hơn */ .kh-card{ min-height:var(--kh-card-h); } .kh-card-head{ height:34px; padding:5px 10px; font-size:11px; } .kh-card-body{ height:78px; width:252px; padding:0 10px; gap:.25rem; } .kh-card-body .team{ width:93px; } .kh-card-body .team img{ width:35px; height:35px; } /* logo nhỏ lại */ .kh-card-body .team .name{ font-size:12px; line-height:1; } .kh-card-body .vs{ width:28px; font-size:20px; } .kh-card-foot{ padding:10px 0 6px; } .kh-btn-set{ height:28px; min-height:28px; width:132px; font-size:13px; } /* ===== mũi tên ra ngoài, màu xanh, click dễ ===== */ .kh-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--kh-arrow); color:#fff; border:0; box-shadow:0 3px 10px rgba(0,0,0,.15); z-index:3; cursor:pointer; } /* đẩy ra ngoài một nửa chiều rộng nút (22px) */ .kh-nav.prev{ left:-22px; } .kh-nav.next{ right:-22px; } .kh-nav::before{ content:"‹"; font-size:26px; line-height:1; } .kh-nav.next::before{ content:"›"; } /* giữ ẩn thanh cuộn ngang như trước */ .kh-track::-webkit-scrollbar{ width:0; height:0; display:none; } .kh-track{ scrollbar-width:none; -ms-overflow-style:none; } /* nếu trên mobile muốn ẩn mũi tên */ @media (max-width: 959.98px){ .kh-nav{ display:none; } }