/* Màu/kích thước đọc qua biến --dlb-dh-* — PHP đẩy giá trị thật vào inline style ngay
   trên khối .dlb-divider-heading 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-divider-heading {
	max-width: 100%;
	overflow-x: hidden;
}

.dlb-divider-heading {
	display: flex;
	align-items: center;
	gap: var(--dlb-dh-gap, 16px);
	box-shadow: var(--dlb-dh-shadow, none);
}
.dlb-divider-heading--lines {
	flex-direction: row;
}
.dlb-divider-heading--underline,
.dlb-divider-heading--eyebrow {
	flex-direction: column;
}

.dlb-divider-heading--align-left {
	justify-content: flex-start;
	text-align: left;
}
.dlb-divider-heading--align-center {
	justify-content: center;
	text-align: center;
}
.dlb-divider-heading--align-right {
	justify-content: flex-end;
	text-align: right;
}

.dlb-divider-heading--underline.dlb-divider-heading--align-left,
.dlb-divider-heading--eyebrow.dlb-divider-heading--align-left {
	align-items: flex-start;
}
.dlb-divider-heading--underline.dlb-divider-heading--align-center,
.dlb-divider-heading--eyebrow.dlb-divider-heading--align-center {
	align-items: center;
}
.dlb-divider-heading--underline.dlb-divider-heading--align-right,
.dlb-divider-heading--eyebrow.dlb-divider-heading--align-right {
	align-items: flex-end;
}

.dlb-divider-heading__text {
	margin: 0;
	color: var(--dlb-dh-text-color, #1a1a1a);
	font-size: var(--dlb-dh-font-size, 28px);
	font-weight: var(--dlb-dh-font-weight, 700);
	letter-spacing: var(--dlb-dh-letter-spacing, 1px);
	line-height: 1.3;
}
.dlb-divider-heading--uppercase .dlb-divider-heading__text {
	text-transform: uppercase;
}

/* Tablet Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
	.dlb-divider-heading {
		gap: var(--dlb-dh-gap-tablet, var(--dlb-dh-gap, 12px));
	}
	.dlb-divider-heading__text {
		font-size: var(--dlb-dh-font-size-tablet, 22px);
	}
}

/* Mobile Breakpoint (<= 782px) */
@media (max-width: 782px) {
	.dlb-divider-heading {
		gap: var(--dlb-dh-gap-mobile, var(--dlb-dh-gap-tablet, 8px));
		margin-top: 6px !important;
		margin-bottom: 6px !important;
	}
	.dlb-divider-heading__text {
		font-size: var(--dlb-dh-font-size-mobile, 18px);
	}
}

/* --- Kiểu "lines": đường kẻ 2 bên --- */
.dlb-divider-heading--lines .dlb-divider-heading__line {
	flex: 1 1 auto;
	max-width: min(var(--dlb-dh-line-max-width, 100vw), 100%);
	min-width: 20px;
	height: 0;
	border-top-width: var(--dlb-dh-line-thickness, 1px);
	border-top-style: var(--dlb-dh-line-style, solid);
	border-top-color: var(--dlb-dh-accent-color, #2563eb);
}

/* --- Kiểu "underline": gạch chân nhấn --- */
.dlb-divider-heading--underline .dlb-divider-heading__underline {
	display: block;
	width: var(--dlb-dh-underline-width, 60px);
	height: calc(var(--dlb-dh-line-thickness, 1px) * 3);
	background: var(--dlb-dh-accent-color, #2563eb);
	border-radius: 2px;
}

/* --- Kiểu "eyebrow": nhãn phụ + tiêu đề --- */
.dlb-divider-heading__subtitle {
	margin: 0;
	color: var(--dlb-dh-accent-color, #2563eb);
	font-size: calc(var(--dlb-dh-font-size, 28px) * 0.42);
	font-weight: 600;
	letter-spacing: calc(var(--dlb-dh-letter-spacing, 1px) + 1px);
	text-transform: uppercase;
}

.dlb-divider-heading__notice {
	color: #666666;
	font-style: italic;
}

@media (max-width: 480px) {
	.dlb-divider-heading--lines .dlb-divider-heading__line {
		min-width: 12px;
	}
}

/* ==========================================================================
   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;
}