/* Màu/kích thước đọc qua biến --dlb-cc-* — PHP/JS đẩy giá trị thật vào inline style
   ngay trên khối .dlb-category-circles theo cấu hình chọn trong Inspector Controls. */

.dlb-width-limited {
	max-width: var(--dlb-max-width, 1200px);
	margin-left: auto;
	margin-right: auto;
}

.dlb-category-circles {
	max-width: 100%;
	overflow-x: hidden;
}

.dlb-category-circles__title {
	margin: 0 0 16px;
	color: var(--dlb-cc-title-color, #e91e8c);
	font-size: var(--dlb-cc-title-size, 24px);
	font-weight: var(--dlb-cc-title-weight, 700);
	line-height: 1.3;
}

.dlb-category-circles__track-wrap {
	position: relative;
	width: 100%;
}

.dlb-category-circles__track {
	display: flex;
	gap: var(--dlb-cc-gap, 16px);
	justify-content: var(--dlb-cc-justify, safe center);
	align-items: flex-start;
}

/* Scroll mode */
.dlb-category-circles--scroll .dlb-category-circles__track {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 8px;
}
.dlb-category-circles--scroll .dlb-category-circles__track::-webkit-scrollbar {
	display: none;
}

/* Grid mode */
.dlb-category-circles--grid .dlb-category-circles__track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--dlb-cc-item-width, 110px), 1fr));
	justify-items: center;
}

.dlb-category-circles__item {
	flex: 0 0 var(--dlb-cc-item-width, 110px);
	width: var(--dlb-cc-item-width, 110px);
	scroll-snap-align: start;
	display: flex;
	justify-content: center;
}

.dlb-category-circles__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	width: 100%;
}

.dlb-category-circles__circle-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dlb-category-circles__circle {
	width: var(--dlb-cc-circle-size, 90px);
	height: var(--dlb-cc-circle-size, 90px);
	background: var(--dlb-cc-circle-bg, #ffffff);
	border-radius: var(--dlb-cc-circle-radius, 50%);
	border: var(--dlb-cc-circle-border-thickness, 0px) solid var(--dlb-cc-circle-border-tint, transparent);
	padding: var(--dlb-cc-image-padding, 18px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--dlb-cc-shadow, none);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
}

.dlb-category-circles__circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.dlb-category-circles__placeholder {
	width: 60%;
	height: 60%;
	background: #e5e7eb;
	border-radius: 50%;
}

.dlb-category-circles__shadow-ellipse {
	width: calc(var(--dlb-cc-circle-size, 90px) * 0.85);
	height: 10px;
	border-radius: 50%;
	background: var(--dlb-cc-ellipse-color, rgba(233, 30, 140, 0.12));
	filter: blur(4px);
	margin-top: 4px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.dlb-category-circles__label {
	margin-top: var(--dlb-cc-label-margin-top, 8px);
	color: var(--dlb-cc-label-color, #333333);
	font-size: var(--dlb-cc-label-size, 14px);
	font-weight: var(--dlb-cc-label-weight, 500);
	text-align: center;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: var(--dlb-cc-label-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

/* Tablet Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
	.dlb-category-circles__title {
		font-size: var(--dlb-cc-title-size-tablet, 20px);
	}
	.dlb-category-circles__item {
		flex: 0 0 var(--dlb-cc-item-width-tablet, 95px);
		width: var(--dlb-cc-item-width-tablet, 95px);
	}
	.dlb-category-circles__circle {
		width: var(--dlb-cc-circle-size-tablet, 76px);
		height: var(--dlb-cc-circle-size-tablet, 76px);
		padding: calc(var(--dlb-cc-image-padding, 18px) * 0.8);
	}
	.dlb-category-circles__shadow-ellipse {
		width: calc(var(--dlb-cc-circle-size-tablet, 76px) * 0.85);
	}
	.dlb-category-circles__label {
		font-size: var(--dlb-cc-label-size-tablet, 12px);
	}
}

/* Mobile Breakpoint (<= 782px) */
@media (max-width: 782px) {
	.dlb-category-circles {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}
	.dlb-category-circles__title {
		font-size: var(--dlb-cc-title-size-mobile, 16px);
		margin-bottom: 10px;
	}
	.dlb-category-circles__item {
		flex: 0 0 var(--dlb-cc-item-width-mobile, 80px);
		width: var(--dlb-cc-item-width-mobile, 80px);
	}
	.dlb-category-circles__circle {
		width: var(--dlb-cc-circle-size-mobile, 64px);
		height: var(--dlb-cc-circle-size-mobile, 64px);
		padding: calc(var(--dlb-cc-image-padding, 18px) * 0.65);
	}
	.dlb-category-circles__shadow-ellipse {
		width: calc(var(--dlb-cc-circle-size-mobile, 64px) * 0.85);
		height: 6px;
	}
	.dlb-category-circles__label {
		font-size: var(--dlb-cc-label-size-mobile, 11px);
		margin-top: 4px;
	}
	/* Chế độ lưới (grid): "grid-template-columns" gốc tính cột theo
	   "--dlb-cc-item-width" (giá trị desktop, VD 151px) — KHÔNG đọc biến
	   "--dlb-cc-item-width-mobile" nào cả, nên trên di động vẫn co theo kích
	   thước desktop, 4 mục dồn thành 2x2 thay vì 1 hàng. Theo yêu cầu người
	   dùng 2026-09-01 "sắp 4 mục cùng 1 hàng": ép cứng 4 cột bằng nhau trên di
	   động cho đúng chế độ lưới (không đụng chế độ cuộn ngang --scroll, vốn đã
	   tự hoạt động đúng qua flex-basis riêng). */
	.dlb-category-circles--grid .dlb-category-circles__track {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

/* Hover Effects */
.dlb-category-circles--hover-lift .dlb-category-circles__link:hover .dlb-category-circles__circle {
	transform: translateY(-5px);
}
.dlb-category-circles--hover-lift .dlb-category-circles__link:hover .dlb-category-circles__shadow-ellipse {
	transform: scale(0.9);
	opacity: 0.7;
}
.dlb-category-circles--hover-scale .dlb-category-circles__link:hover .dlb-category-circles__circle {
	transform: scale(1.08);
}
.dlb-category-circles--hover-bounce .dlb-category-circles__link:hover .dlb-category-circles__circle {
	animation: dlb-cc-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dlb-cc-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* Scroll Arrows */
.dlb-category-circles__arrow {
	position: absolute;
	top: calc(var(--dlb-cc-circle-size, 90px) / 2);
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: var(--dlb-cc-arrow-bg, rgba(255, 255, 255, 0.92));
	color: var(--dlb-cc-arrow-color, #333333);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: all 0.2s ease;
}
.dlb-category-circles__arrow:hover {
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.dlb-category-circles__arrow--prev {
	left: -12px;
}
.dlb-category-circles__arrow--next {
	right: -12px;
}
.dlb-category-circles__arrow svg {
	width: 18px;
	height: 18px;
}

.dlb-category-circles__notice {
	color: #666666;
	font-style: italic;
}

/* ==========================================================================
   Gutenberg Inspector Accordion & Bold Heading Styling
   ========================================================================== */
.components-panel__body.dlb-panel-bold .components-panel__body-title,
.components-panel__body.dlb-panel-bold .components-panel__body-title button,
.components-panel__body.dlb-panel-bold .components-panel__body-toggle {
	font-weight: 700 !important;
	font-size: 13.5px !important;
	letter-spacing: 0.2px;
	color: #1e1e1e !important;
	transition: all 0.2s ease;
}

.components-panel__body.dlb-panel-bold.is-opened .components-panel__body-title button,
.components-panel__body.dlb-panel-bold.is-opened .components-panel__body-toggle {
	color: #2271b1 !important;
	background: #f0f6fc !important;
	border-left: 3.5px solid #2271b1 !important;
	padding-left: 12px !important;
}

.components-panel__body.dlb-panel-bold .components-panel__body-title button:hover,
.components-panel__body.dlb-panel-bold .components-panel__body-toggle:hover {
	background: #f6f7f7 !important;
}