/* Trang Liên hệ: Danh sách cửa hàng + Chỉ đường + FAQ (shortcode trong inc/ds-contact-page.php). Chỉ dùng token. Figma mobile 30/10. */
.ds-sf{display:grid;gap:var(--spacing-lg)}
.ds-sf__list{display:flex;flex-direction:column;gap:var(--spacing-md);margin:0;padding:0;list-style:none}
.ds-sf__store{display:flex;flex-direction:column;gap:var(--spacing-2xs)}
.ds-sf__name{margin:0 0 var(--spacing-2xs);font-family:var(--type-font-family-body);font-size:var(--font-size-body-md);line-height:var(--line-height-body-md);font-weight:var(--type-font-weight-bold)}
.ds-sf__row{display:flex;align-items:flex-start;gap:var(--spacing-xs);margin:0;font-size:var(--font-size-body-sm);line-height:var(--line-height-body-sm)}
.ds-sf__row svg{flex:none;width:var(--scale-500);height:var(--scale-500);fill:currentColor}
.ds-sf__row a{color:var(--text-body);text-decoration:none}.ds-sf__row a:hover{color:var(--text-primary)}
.ds-sf__dir{display:flex;flex-direction:column;gap:var(--spacing-md);min-width:0}
.ds-sf__title{margin:0}
.ds-sf__select{width:100%;min-height:var(--scale-1000);padding:0 var(--spacing-sm);border:var(--border-width-xs) solid var(--border-neutral-subtle);
	border-radius:var(--border-radius-sm);background:var(--surface-primary);color:var(--text-body);font:inherit;font-size:var(--font-size-body-md)}
.ds-sf__select:focus-visible,.ds-sf a:focus-visible,.ds-sf__track:focus-visible,.ds-faq__q:focus-visible{
	outline:var(--border-width-sm) solid var(--border-action-focus);outline-offset:var(--scale-50)}
.ds-sf__map{min-width:0;border-radius:var(--border-radius-sm);overflow:hidden;background:var(--surface-neutral-subtle)}
.ds-sf__map iframe{display:block;width:100%;height:100%;border:0}
.ds-sf__go{align-self:flex-start;color:var(--text-primary);font-size:var(--font-size-body-sm);line-height:var(--line-height-body-sm);font-weight:var(--type-font-weight-bold);text-decoration:none}
.ds-sf__go:hover{text-decoration:underline}
.ds-sf__photos{min-width:0}
.ds-sf__track{display:grid;grid-auto-flow:column;gap:var(--spacing-md);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ds-sf__track::-webkit-scrollbar{display:none}
.ds-sf__photo{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 20%;border-radius:var(--border-radius-sm);scroll-snap-align:start}
.ds-sf__dots{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}
.ds-sf__dots span{width:var(--scale-200);height:var(--scale-200);border-radius:var(--border-radius-xxl);background:var(--color-neutral-300)}
.ds-sf__dots span.is-on{background:var(--icons-primary)}
@media (min-width:768px){
	.ds-sf{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--spacing-xl);align-items:start}
	.ds-sf__photos{grid-column:1 / -1}
	.ds-sf__map{height:calc(var(--scale-1600) * 6)} /* cao cố định để iframe height:100% có mốc */
	.ds-sf__track{grid-auto-columns:calc((100% - 2 * var(--spacing-md)) / 3)}
	.ds-sf__dots{justify-content:center}
}
@media (max-width:767px){
	.ds-sf__map{aspect-ratio:361/229}
	.ds-sf__track{grid-auto-columns:100%}
}

.ds-faq{display:flex;flex-direction:column;gap:var(--spacing-md)}
.ds-faq__item{border:var(--border-width-xs) solid transparent;border-radius:var(--border-radius-sm);background:var(--surface-neutral-subtle)}
.ds-faq__item[open]{border-color:var(--border-neutral-subtle);background:var(--surface-primary)}
.ds-faq__q{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);cursor:pointer;list-style:none;
	font-size:var(--font-size-body-md);line-height:var(--line-height-body-md);font-weight:var(--type-font-weight-bold);color:var(--text-body)}
.ds-faq__q::-webkit-details-marker{display:none}
.ds-faq__icon{position:relative;flex:none;width:var(--scale-500);height:var(--scale-500)}
.ds-faq__icon::before,.ds-faq__icon::after{content:"";position:absolute;inset:50% 0 auto;height:var(--border-width-sm);background:currentColor;transform:translateY(-50%)}
.ds-faq__icon::after{transform:translateY(-50%) rotate(90deg);transition:transform .2s}
.ds-faq__item[open] .ds-faq__icon::after{transform:translateY(-50%) rotate(0deg)}
.ds-faq__a{padding:0 var(--spacing-md) var(--spacing-md);color:var(--text-body);font-size:var(--font-size-body-md);line-height:var(--line-height-body-md)}
.ds-faq__a p{margin:0}
@media (prefers-reduced-motion:reduce){.ds-faq__icon::after{transition:none}}
.ds-faq__a p+p,.ds-faq__a p+ul,.ds-faq__a ul+p{margin-top:var(--spacing-xs)}
.ds-faq__a ul{margin:0;padding-left:var(--spacing-md)}
.ds-faq__a a{color:var(--text-primary);text-decoration:underline}