.bsk-help-center,
.bsk-help-center * { box-sizing: border-box; }
.bsk-help-center h1, .bsk-help-center h2, .bsk-help-center h3, .bsk-help-center h4, .bsk-help-center p { margin: 0; }
.bsk-help-center { color: var(--bsk-text-primary); background: #fff; }
.bsk-help-center-hero { position: relative; height: 480px; overflow: hidden; background: var(--bsk-bg-blue-light); }
.bsk-help-center-hero-bg { position: absolute; top: 416px; left: 50%; width: 100%; aspect-ratio: 1080/1920; background: url("/templates/BrandSku/common/images/help-center/help-hero-bg.webp") center / 100% 100% no-repeat; transform: translate(-50%, -50%) rotate(-90deg); }
.bsk-help-center-hero-content { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; padding-top: 68px; }
.bsk-help-center-hero h1 { color: var(--bsk-text-primary); font-size: 56px; font-weight: 800; line-height: 1.4; }
.bsk-help-center-search { display: flex; align-items: center; width: 740px; height: 64px; margin-top: 24px; padding: 0 24px; gap: 12px; border-radius: 16px; background: #fff; }
.bsk-help-center-search img { display: block; width: 20px; height: 20px; opacity: .5; }
.bsk-help-center-search input { width: 100%; height: 62px; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--bsk-text-primary); font: 500 18px/1.5 var(--bsk-font-base); }
.bsk-help-center-search input::placeholder { color: var(--bsk-text-tertiary); }
.bsk-help-center-hero h4 { margin-top: 48px; color: var(--bsk-text-secondary); font-size: 24px; font-weight: 700; line-height: 1.5; }
.bsk-help-center-popular { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; }
.bsk-help-center-popular a { padding: 10px 24px; border-radius: 36px; background: #eff6ff; color: var(--bsk-text-secondary); font-size: 16px; font-weight: 500; line-height: 1.5; text-decoration: none; border: 1px solid #FFFFFF80;}
.bsk-help-center-tabs { height: 96px; background: #fff; }
.bsk-help-center-tab-list { display: flex; height: 96px; }
.bsk-help-center-tab-list button { position: relative; width: 50%; padding: 0; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--bsk-text-secondary); font: 600 28px/1.5 var(--bsk-font-base); cursor: pointer; }
.bsk-help-center-tab-list button.is-active { border-bottom-color: var(--bsk-primary); color: var(--bsk-primary); font-weight: 700; }
.bsk-help-center-content-panel { background: #fff; }
.bsk-help-center-recommend { padding: 56px 0 80px; background: #f8f8f8; }
.bsk-help-center-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bsk-help-center-article-link { display: flex; align-items: flex-start; min-width: 0; color: var(--bsk-text-secondary); font-size: 22px; font-weight: 600; line-height: 1.6; text-decoration: none; transition: color .2s ease; }
.bsk-help-center-article-link:hover, .bsk-help-center-article-link:focus-visible { color: var(--bsk-text-primary); }
.bsk-help-center-article-link img { display: block; width: 25px; height: 32px; flex: 0 0 25px; }
.bsk-help-center-article-link span { min-width: 0; }
.bsk-help-center-topics { padding: 104px 0 120px; background: #fff; }
.bsk-help-center-topics h2 { color: var(--bsk-text-primary); font-size: 48px; font-weight: 700; line-height: 1.5; text-align: center; }
.bsk-help-center-topic-grid { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 36px; margin-top: 80px; }
.bsk-help-center-topic-card { display: flex; width: 376px; min-height: 248px; padding: 60px; align-items: center; justify-content: center; flex-direction: column; gap: 32px; border-radius: 28px; background: #f8f8f8; color: var(--bsk-text-primary); text-align: center; text-decoration: none; }
.bsk-help-center-topic-card.is-narrow { width: 456px; padding: 60px 100px; }
.bsk-help-center-topic-card img { display: block; width: 80px; height: 80px; flex: 0 0 80px; }
.bsk-help-center-topic-card span { color: var(--bsk-text-primary); font-size: 20px; font-weight: 700; line-height: 1.4; min-height: 56px}
.bsk-help-center-support { position: relative; display: flex; min-height: 338px; padding: 60px 0; align-items: center; justify-content: center; overflow: hidden; background: var(--bsk-bg-blue-light); }
.bsk-help-center-support-decoration img { position: absolute; display: block; width: 186px; height: 186px; border-radius: 24px; object-fit: cover; pointer-events: none; }
.bsk-help-center-support-decoration img:first-child { top: 100px; left: calc(50% - 600px); transform: rotate(-26.57deg) }
.bsk-help-center-support-decoration img:last-child { top: 60px; right: calc(50% - 600px); transform: rotate(18.48deg)}
.bsk-help-center-support-content { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; gap: 36px; text-align: center; }
.bsk-help-center-support-content h2 { color: var(--bsk-text-primary); font-size: 36px; font-weight: 800; line-height: 1.6; }
.bsk-help-center-support-content p { max-width: 720px; margin-top: 16px; color: var(--bsk-text-secondary); font-size: 24px; font-weight: 400; line-height: 1.5; }
.bsk-help-center-support-actions { display: flex; gap: 36px; }
.bsk-help-center-faq-panel { background: #f8f8f8; }
.bsk-help-center-faq-list.bsk-faq { padding: 40px 0 80px; background: transparent; }
.bsk-help-center-faq-categories { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 0 0 40px; }
.bsk-help-center-faq-categories a { padding: 16px 24px; border: 1px solid #fff; border-radius: 32px; background: #fff; color: var(--bsk-text-primary); font-size: 20px; font-weight: 500; line-height: 1.5; text-decoration: none; }
.bsk-help-center-faq-categories a.is-active { border-color: transparent; background: linear-gradient(#f0f5ff, #f0f5ff) padding-box, var(--bsk-gradient-brand) border-box; color: var(--bsk-primary); }
.bsk-help-center-faq-items[hidden], .bsk-help-center-faq-panel[hidden] { display: none; }