/* ============================================================
   TND Nested Accordion — tnd-dv-accordion.css v1.1.3
   ============================================================ */

/* ============================================================
   ICON BASE — GPU Acceleration
   ============================================================ */
.tnd-list-dichvu .e-n-accordion-item-title-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition:
		background-color 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
		transform        0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: background-color, transform;
}

.tnd-list-dichvu .e-n-accordion-item-title-icon svg {
	width: 18px;
	height: 18px;
	fill: #fff;
	display: block;
	transition: fill 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: fill;
}

.tnd-list-dichvu .e-n-accordion-item-title-icon .e-closed {
	display: none !important;
}

.tnd-list-dichvu .e-n-accordion-item-title-icon .e-opened {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   ACCORDION ITEM — Layout & border
   ============================================================ */
.tnd-list-dichvu .e-n-accordion-item {
	cursor: pointer;
	padding-bottom: 30px;
	border-color: var(--e-global-color-gray_70) !important;
	border-bottom: 1px solid;
	/* Transition bg cho cả hover (desktop) lẫn open (mọi thiết bị) */
	transition: background-color 0.3s ease;
}

.tnd-list-dichvu .e-n-accordion-item > [role="region"] {
	transition:
		opacity   0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: opacity, transform;
}

/* ============================================================
   HOVER & ACTIVE STATES — Icon
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
	.tnd-list-dichvu .e-n-accordion-item:hover .e-n-accordion-item-title-icon,
	.tnd-list-dichvu .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
		background-color: #ffd100;
		transform: rotate(90deg);
	}

	.tnd-list-dichvu .e-n-accordion-item:hover .e-n-accordion-item-title-icon svg,
	.tnd-list-dichvu .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
		fill: #000;
	}
}

@media (hover: none) {
	.tnd-list-dichvu .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
		background-color: #ffd100;
		transform: rotate(90deg);
	}

	.tnd-list-dichvu .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
		fill: #000;
	}
}

/* ============================================================
   MÀU NỀN — Desktop hover (CSS thuần, không cần JS)
              Open state (dùng [open] attribute — đủ cho mọi thiết bị)
   FIX: Bỏ .tnd-is-open vì JS v1.1.0 không add class này.
        Dùng attribute [open] làm nguồn sự thật duy nhất.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
	.tnd-list-dichvu .e-n-accordion-item:hover {
		background-color: #f6f6f7;
	}
}

/* Touch device (tablet, mobile): dùng [open] vì không có :hover */
@media (hover: none) {
	.tnd-list-dichvu .e-n-accordion-item[open] {
		background-color: #f6f6f7;
	}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.tnd-list-dichvu .e-n-accordion-item-title {
	gap: 30px !important;
}

.tnd-list-dichvu-title {
	display: flex;
	flex-direction: row;
	gap: 80px;
}

.tnd-list-dichvu-title .tnd-number {
	width: 60px;
}

@media (max-width: 1024px) {
	.tnd-list-dichvu-title {
		flex-direction: column;
		gap: 10px;
	}
}