/* ===================================================================
 * Hệ thống chi nhánh — [dtc_branches]
 * =================================================================== */
.dtc-branches { margin: 0 0 2rem; }
.dtc-branches-title {
	text-align: center;
	font-size: 1.6rem;
	margin: 0 0 24px;
	color: var(--dtc-dark, #006666);
}

/* ---------- Layout SPLIT (danh sách + panel) ---------- */
.dtc-branches--split {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 24px;
	align-items: start;
}
.dtc-branches--split .dtc-branches-title { grid-column: 1 / -1; }

.dtc-branches-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 520px;
	overflow-y: auto;
	padding-right: 4px;
}
.dtc-branch-tab {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--dtc-border, #e5e5e5);
	border-left: 4px solid transparent;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, transform .15s;
	width: 100%;
}
.dtc-branch-tab:hover { border-color: var(--dtc-primary, #1A8922); box-shadow: 0 3px 10px rgba(0,0,0,.07); }
.dtc-branch-tab.is-active {
	border-left-color: var(--dtc-primary, #1A8922);
	border-color: var(--dtc-primary, #1A8922);
	background: var(--dtc-bg-soft, #f5f7f4);
}
.dtc-branch-tab-name { font-weight: 700; color: var(--dtc-dark, #006666); }
.dtc-branch-tab-addr { font-size: 13px; color: var(--dtc-muted, #777); }

/* ---------- Panel chi tiết ---------- */
.dtc-branches-panel {
	position: relative;
	min-height: 200px;
	transition: opacity .2s;
}
.dtc-branches-panel.is-loading { opacity: .4; }
.dtc-branches-panel.is-loading::after {
	content: "";
	position: absolute; top: 40px; left: 50%;
	width: 34px; height: 34px; margin-left: -17px;
	border: 3px solid var(--dtc-border, #e5e5e5);
	border-top-color: var(--dtc-primary, #1A8922);
	border-radius: 50%;
	animation: dtc-branch-spin .7s linear infinite;
}
@keyframes dtc-branch-spin { to { transform: rotate(360deg); } }

.dtc-branch-detail {
	background: #fff;
	border: 1px solid var(--dtc-border, #e5e5e5);
	border-radius: 10px;
	overflow: hidden;
}
.dtc-branch-detail-name {
	margin: 0;
	padding: 16px 20px;
	font-size: 1.2rem;
	color: #fff;
	background: var(--dtc-primary, #1A8922);
}
.dtc-branch-detail-name i { margin-right: 6px; }
.dtc-branch-meta {
	list-style: none;
	margin: 0;
	padding: 16px 20px;
	display: grid;
	gap: 12px;
}
.dtc-branch-meta li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.5;
}
.dtc-branch-meta li > i {
	color: var(--dtc-primary, #1A8922);
	width: 18px;
	text-align: center;
	margin-top: 3px;
	flex-shrink: 0;
}
.dtc-branch-meta a { color: var(--dtc-primary, #1A8922); font-weight: 600; }
.dtc-branch-map { line-height: 0; }
.dtc-branch-map iframe { display: block; width: 100%; height: 360px; border: 0; }

/* ---------- Layout GRID ---------- */
.dtc-branches-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 22px;
}
.dtc-branches-grid .dtc-branch-map iframe { height: 220px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.dtc-branches--split { grid-template-columns: 1fr; }
	.dtc-branches-list {
		flex-direction: row;
		flex-wrap: nowrap;
		max-height: none;
		overflow-x: auto;
		padding-bottom: 6px;
	}
	.dtc-branch-tab { min-width: 220px; }
}
@media (max-width: 480px) {
	.dtc-branch-detail-name { font-size: 1.05rem; padding: 13px 16px; }
	.dtc-branch-meta { padding: 14px 16px; }
	.dtc-branch-map iframe { height: 280px; }
	.dtc-branch-tab { min-width: 180px; }
}

/* ---------- Dark mode ---------- */
body.dtc-dark .dtc-branch-tab,
body.dtc-dark .dtc-branch-detail { background: #1e1e1e; border-color: #333; }
body.dtc-dark .dtc-branch-tab.is-active { background: #222; }
body.dtc-dark .dtc-branch-tab-name { color: #eafdea; }