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

.dlb-feature-icons {
	display: grid;
	grid-template-columns: repeat(var(--dlb-fi-columns, 6), 1fr);
	gap: var(--dlb-fi-gap-h, 24px);
}

.dlb-feature-icons__item {
	display: flex;
}

.dlb-feature-icons--divider .dlb-feature-icons__item:not(:last-child) {
	border-right: var(--dlb-fi-divider-thickness, 1px) solid var(--dlb-fi-divider-color, #e5e5e5);
}

.dlb-feature-icons__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--dlb-fi-gap-v, 12px);
	width: 100%;
	padding: var(--dlb-fi-item-padding, 16px);
	background: var(--dlb-fi-item-bg, transparent);
	border-radius: var(--dlb-fi-item-radius, 8px);
	box-shadow: var(--dlb-fi-item-shadow, none);
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* CHỈ áp dụng khi thiết bị có hover THẬT (chuột) — thêm 2026-09-02 theo yêu cầu người
   dùng "bỏ hiệu ứng đổ bóng khi click vào đi". Trên thiết bị CHẠM (điện thoại/máy tính
   bảng), trình duyệt tự MÔ PHỎNG ":hover" ngay khi chạm — rule không có @media(hover:hover)
   sẽ khiến bóng đổ này bật lên MỖI LẦN CHẠM/BẤM vào icon, trông như "hiệu ứng khi click"
   dù bản chất là hover giả — CÙNG LỖI đã gặp + sửa ở nút liên hệ nhanh nổi
   (dlb-footer-info-sg48.css, "hover-first-tap"), áp dụng lại đúng cách đó ở đây. */
@media (hover: hover) {
	.dlb-feature-icons__link:hover {
		box-shadow: var(--dlb-fi-item-shadow-hover, var(--dlb-fi-item-shadow, none));
	}
}

.dlb-feature-icons--horizontal .dlb-feature-icons__link {
	flex-direction: row;
}

.dlb-feature-icons--align-left .dlb-feature-icons__link {
	align-items: flex-start;
	text-align: left;
}

.dlb-feature-icons--align-center .dlb-feature-icons__link {
	align-items: center;
	text-align: center;
}

.dlb-feature-icons--horizontal.dlb-feature-icons--align-center .dlb-feature-icons__link {
	text-align: left;
}

.dlb-feature-icons__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--dlb-fi-icon-bg-size, 64px);
	height: var(--dlb-fi-icon-bg-size, 64px);
	background: var(--dlb-fi-icon-bg, transparent);
	border-radius: var(--dlb-fi-icon-radius, 50%);
	border: var(--dlb-fi-icon-border-thickness, 1px) solid var(--dlb-fi-icon-border-tint, transparent);
	box-shadow: var(--dlb-fi-icon-shadow, var(--dlb-fi-shadow, none));
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Chế độ không bật nền icon: co ôm sát icon, bỏ mọi đệm/viền/khung thừa */
.dlb-feature-icons--no-icon-bg .dlb-feature-icons__icon-wrap {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.dlb-feature-icons__icon {
	display: flex;
	color: var(--dlb-fi-icon-color, #666666);
}

.dlb-feature-icons__icon svg {
	width: var(--dlb-fi-icon-size, 28px);
	height: var(--dlb-fi-icon-size, 28px);
	stroke-width: var(--dlb-fi-icon-stroke, 1.6);
}

.dlb-feature-icons__number {
	display: block;
	color: var(--dlb-fi-number-color, #111111);
	font-size: var(--dlb-fi-number-size, 32px);
	font-weight: var(--dlb-fi-number-weight, 800);
	line-height: 1.1;
}

.dlb-feature-icons__text {
	color: var(--dlb-fi-text-color, #333333);
	font-size: var(--dlb-fi-font-size, 13px);
	font-weight: var(--dlb-fi-font-weight, 600);
	letter-spacing: var(--dlb-fi-letter-spacing, 0.3px);
	line-height: var(--dlb-fi-line-height, 1.4);
}

.dlb-feature-icons--uppercase .dlb-feature-icons__text {
	text-transform: uppercase;
}

/* --- Hiệu ứng hover --- */
.dlb-feature-icons--hover-lift .dlb-feature-icons__link:hover {
	transform: translateY(-4px);
}
.dlb-feature-icons--hover-scale .dlb-feature-icons__link:hover .dlb-feature-icons__icon-wrap {
	transform: scale(1.08);
}
.dlb-feature-icons--hover-color .dlb-feature-icons__link:hover .dlb-feature-icons__icon {
	color: var(--dlb-fi-hover-color, #2563eb);
}
.dlb-feature-icons--hover-color .dlb-feature-icons__link:hover .dlb-feature-icons__icon-wrap {
	border-color: var(--dlb-fi-hover-color, #2563eb);
}

.dlb-feature-icons__notice {
	color: #666666;
	font-style: italic;
}

/* ==========================================================================
   Breakpoint tablet/mobile — ĐẶT SAU MỌI LUẬT GỐC Ở TRÊN (sửa 2026-09-01)
   ==========================================================================
   PHÁT HIỆN LỖI THẬT có sẵn từ trước (không phải do các vòng sửa gần đây gây
   ra): 2 khối @media này TRƯỚC ĐÓ nằm ngay sau khối grid gốc (gần đầu file),
   tức là ĐỨNG TRƯỚC các luật không điều kiện cho .dlb-feature-icons__icon-wrap/
   __icon svg/__text/__link (đứng sau, tương đương độ ưu tiên CSS specificity).
   Theo đúng quy tắc CSS: khi 2 luật CÙNG specificity, luật đứng SAU trong file
   thắng — bất kể có nằm trong @media hay không. Nghĩa là suốt từ trước tới giờ,
   dù đúng viewport khớp @media, các luật thu nhỏ tablet/mobile (icon/chữ nhỏ
   lại) KHÔNG BAO GIỜ có tác dụng thật — luật gốc (kích thước desktop) luôn đè
   lên sau cùng ở MỌI kích thước màn hình. Xác nhận qua Playwright: đo
   `getComputedStyle` ở nhiều độ rộng (375px→1024px) đều ra đúng 1 giá trị
   desktop (73px/14px), không đổi theo breakpoint nào — đúng là lỗi có sẵn, ẩn
   suốt vì nhìn qua tưởng "chỉ hơi to", không nghĩ tới bị đè hoàn toàn.
   Sửa: DỜI nguyên xi 2 khối @media xuống ĐÂY (sau toàn bộ luật gốc liên quan) —
   không đổi bất kỳ giá trị nào bên trong, chỉ đổi VỊ TRÍ trong file, để đúng
   quy tắc cascade CSS chuẩn (breakpoint luôn đặt sau rule mặc định muốn ghi
   đè). Vòng 2026-09-01 "sắp xếp trên 2 hàng cạnh giữa" tưởng đã sửa xong
   nhưng thực ra khối .dlb-feature-icons/.dlb-feature-icons__item mới hoạt
   động đúng (đứng SAU rule desktop tương ứng từ đầu) — chỉ riêng 4 rule
   icon-wrap/icon-svg/text/link là bị đè, giờ sửa nốt. */

/* Tablet Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
	.dlb-feature-icons {
		grid-template-columns: repeat(var(--dlb-fi-tablet-columns, 3), 1fr);
		gap: calc(var(--dlb-fi-gap-h, 24px) * 0.75);
	}
	.dlb-feature-icons__icon-wrap {
		width: var(--dlb-fi-icon-bg-size-tablet, 52px);
		height: var(--dlb-fi-icon-bg-size-tablet, 52px);
	}
	.dlb-feature-icons__icon svg {
		width: var(--dlb-fi-icon-size-tablet, 24px);
		height: var(--dlb-fi-icon-size-tablet, 24px);
	}
	.dlb-feature-icons__text {
		font-size: var(--dlb-fi-font-size-tablet, 12px);
	}
}

/* Mobile Breakpoint (<= 782px) */
@media (max-width: 782px) {
	/* Sửa 2026-09-01 theo yêu cầu người dùng "sắp xếp trên 2 hàng cạnh giữa":
	   trước đó dùng CSS GRID (repeat(N, 1fr)) — khi số mục không chia hết cho số
	   cột (VD 5 mục / 2 cột = 2 hàng đủ + 1 mục lẻ), CSS Grid luôn đặt mục lẻ đó
	   vào Ô ĐẦU TIÊN của hàng cuối, LỆCH TRÁI, không có cách nào canh giữa bằng
	   thuộc tính grid thường. Đổi sang FLEXBOX + "flex-wrap:wrap" +
	   "justify-content:center" — cùng số cột mỗi hàng (qua đúng biến
	   "--dlb-fi-mobile-columns" có sẵn, không hard-code), nhưng hàng cuối không
	   đủ mục sẽ TỰ ĐỘNG canh giữa (đúng hành vi mặc định của flexbox khi hàng
	   không lấp đầy) — không cần thêm CSS gì riêng cho từng số mục. Trừ luôn
	   phần "gap" ra khỏi bề rộng mỗi mục (calc lồng) để không bị vượt quá 100%
	   khiến trình duyệt tự đẩy xuống dòng sớm hơn mong muốn. */
	.dlb-feature-icons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: calc(var(--dlb-fi-gap-v, 12px) * 0.7);
		column-gap: calc(var(--dlb-fi-gap-h, 24px) * 0.5);
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}
	.dlb-feature-icons__item {
		box-sizing: border-box;
		flex: 0 0 calc((100% - (var(--dlb-fi-mobile-columns, 2) - 1) * calc(var(--dlb-fi-gap-h, 24px) * 0.5)) / var(--dlb-fi-mobile-columns, 2));
	}
	.dlb-feature-icons__icon-wrap {
		width: var(--dlb-fi-icon-bg-size-mobile, 44px);
		height: var(--dlb-fi-icon-bg-size-mobile, 44px);
	}
	.dlb-feature-icons__icon svg {
		width: var(--dlb-fi-icon-size-mobile, 20px);
		height: var(--dlb-fi-icon-size-mobile, 20px);
	}
	.dlb-feature-icons__text {
		font-size: var(--dlb-fi-font-size-mobile, 11px);
	}
	.dlb-feature-icons__link {
		padding: calc(var(--dlb-fi-item-padding, 16px) * 0.6);
		gap: calc(var(--dlb-fi-gap-v, 12px) * 0.7);
	}
}

/* --- Sidebar Inspector Controls --- */
.dlb-fi-icon-picker {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	margin: 8px 0 12px;
}
.dlb-fi-icon-picker__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #dddddd;
	border-radius: 4px;
	color: #555555;
}
.dlb-fi-icon-picker__btn.is-active {
	border-color: #2563eb;
	background: #eef4ff;
	color: #2563eb;
}
.dlb-fi-icon-glyph svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
}
.dlb-fi-item-row {
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 14px;
	margin-bottom: 14px;
}
.dlb-fi-item-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
	gap: 8px;
}
.dlb-fi-item-row__head strong {
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dlb-fi-item-row__actions {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
}

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