/* Copyright © Hiếu BK · shop.hieubk.vn
   Engineering standards: ReviewDeck — RDC · RDS
   HBK Social Proof — carousel đánh giá (dark cinematic). */

.hbksp{
	--hbksp-accent:#7a1f2b;
	--hbksp-beige:#d8c3a5;
	--hbksp-ink:#15140f;
	--hbksp-line:rgba(250,250,250,.12);
	--hbksp-text:#fafafa;
	--hbksp-muted:rgba(250,250,250,.55);
	--hbksp-fh:'Space Grotesk',sans-serif;
	--hbksp-fb:'Inter',sans-serif;
	--hbksp-gap:22px;
	--hbksp-per:3;
	font-family:var(--hbksp-fb);
	color:var(--hbksp-text);
	box-sizing:border-box;
	max-width:1200px;
	margin:0 auto;
	padding:0 4px;
}
.hbksp *,.hbksp *::before,.hbksp *::after{box-sizing:border-box}

.hbksp-head{text-align:center;margin-bottom:44px}
.hbksp-eyebrow{font-family:var(--hbksp-fh);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--hbksp-beige)}
.hbksp-title{font-family:var(--hbksp-fh);font-weight:700;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;margin:14px 0 0;color:var(--hbksp-text)}

.hbksp-carousel{position:relative;display:flex;align-items:center;gap:8px}
.hbksp-viewport{overflow:hidden;flex:1 1 auto;width:100%}
.hbksp-track{display:flex;gap:var(--hbksp-gap);transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform}

.hbksp-card{
	flex:0 0 calc((100% - (var(--hbksp-per) - 1) * var(--hbksp-gap)) / var(--hbksp-per));
	min-width:0;
	background:var(--hbksp-ink);
	border:1px solid var(--hbksp-line);
	border-radius:8px;
	padding:28px 26px;
	display:flex;flex-direction:column;
}
.hbksp-stars{color:var(--hbksp-beige);letter-spacing:2px;font-size:.95rem;margin-bottom:16px}
.hbksp-stars .off{color:rgba(250,250,250,.18)}
.hbksp-quote{font-size:.98rem;line-height:1.6;color:rgba(250,250,250,.82);font-style:italic;margin:0 0 22px;flex:1 1 auto}
.hbksp-person{display:flex;align-items:center;gap:12px}
.hbksp-av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.hbksp-av-ph{background:linear-gradient(135deg,#1e3a34,var(--hbksp-accent))}
.hbksp-who b{font-family:var(--hbksp-fh);font-size:.92rem;font-weight:600;color:var(--hbksp-text);display:block}
.hbksp-who small{color:var(--hbksp-muted);font-size:.76rem}

/* nút điều hướng 2 bên */
.hbksp-nav{
	flex:0 0 auto;width:46px;height:46px;border-radius:50%;
	background:var(--hbksp-ink);border:1px solid var(--hbksp-line);
	color:var(--hbksp-text);cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:all .18s ease;z-index:2;
}
.hbksp-nav svg{width:20px;height:20px}
.hbksp-nav:hover:not(:disabled){border-color:var(--hbksp-beige);color:var(--hbksp-beige);transform:scale(1.06)}
.hbksp-nav:disabled{opacity:.3;cursor:default}
.hbksp-nav[hidden]{display:none}

/* dots */
.hbksp-dots{display:flex;justify-content:center;gap:7px;margin-top:26px}
.hbksp-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(250,250,250,.22);cursor:pointer;padding:0;transition:all .2s}
.hbksp-dots button.on{background:var(--hbksp-beige);width:22px;border-radius:99px}
.hbksp-dots[hidden]{display:none}

@media(max-width:920px){
	.hbksp{--hbksp-per:2}
	.hbksp-nav{width:40px;height:40px}
}
@media(max-width:600px){
	.hbksp{--hbksp-per:1}
	.hbksp-carousel{gap:4px}
	.hbksp-nav{width:36px;height:36px}
}