/* Dynamic Sections - Public/Frontend styles.
 * Toàn bộ giá trị động (màu, size, spacing...) đọc qua CSS custom properties (var(--ds-...))
 * được set inline theo từng Group/Section - file này KHÔNG hard-code giá trị hiển thị.
 * Mọi class đều có prefix "ds-" để tránh xung đột với theme/Elementor/plugin khác.
 *
 * LƯU Ý QUAN TRỌNG: hầu hết thuộc tính layout/spacing (padding, margin, display, gap,
 * justify-content, text-align...) đều gắn !important. Theme của site có nhiều CSS ưu tiên
 * cao (!important) áp cho các thẻ chung (div, a...), nếu không !important thì các tùy
 * chỉnh admin nhập vào (Padding, Margin, Căn lề...) sẽ bị đè âm thầm, KHÔNG có tác dụng.
 */

.ds-group {
	box-sizing: border-box;
	max-width: var(--ds-group-max-width, 100%) !important;
	margin: var(--ds-group-margin, 0) auto !important;
	background: var(--ds-group-bg, transparent) !important;
	padding: var(--ds-group-padding, 0) !important;
	border: var(--ds-group-border, none) !important;
	border-radius: var(--ds-group-radius, 0) !important;
}

.ds-group * {
	box-sizing: border-box;
}

.ds-group__inner {
	width: 100%;
}

/* ---------- GRID ---------- */
.ds-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--ds-cols-desktop, 4), 1fr);
	gap: var(--ds-grid-gap, 20px) !important;
}

@media (max-width: 1024px) {
	.ds-grid {
		grid-template-columns: repeat(var(--ds-cols-tablet, 2), 1fr);
	}
}

@media (max-width: 600px) {
	.ds-grid {
		grid-template-columns: repeat(var(--ds-cols-mobile, 1), 1fr);
	}
}

/* ---------- SLIDER (Swiper) ---------- */
.ds-slider.swiper {
	position: relative;
	padding-bottom: 4px;
}

.ds-slider .swiper-slide {
	height: auto;
}

.ds-slider__arrow {
	position: absolute;
	/* top:50% chỉ là giá trị dự phòng ban đầu - JS (public.js) sẽ tự tính lại đúng vào giữa
	 * ảnh của slide đầu tiên ngay sau khi Swiper khởi tạo, để mũi tên không đè lên chữ tiêu
	 * đề bên dưới ảnh. */
	top: 50%;
	transform: translateY(-50%);
	width: var(--ds-arrow-size, 36px);
	height: var(--ds-arrow-size, 36px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	z-index: 5;
	user-select: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Vị trí ngang (trong/ngoài mép ảnh) dùng chung 1 giá trị --ds-arrow-offset-x cho cả 2 nút -
 * âm = nhô ra ngoài mép, dương = lùi vào trong. Không dùng offset âm quá lớn (kiểu đẩy hẳn
 * ra ngoài container) vì từng khiến mũi tên bị trôi mất khi Group không còn lề ngoài - nay
 * mặc định chỉ nhô nhẹ 10px, admin có thể tự điều chỉnh vào/ra tùy bố cục thực tế. */
.ds-slider__arrow--prev {
	left: var(--ds-arrow-offset-x, -10px);
}

.ds-slider__arrow--next {
	right: var(--ds-arrow-offset-x, -10px);
}

.ds-slider__dots.swiper-pagination {
	position: static;
	margin-top: 12px;
	text-align: center;
}

/* ---------- SECTION ---------- */
.ds-section {
	padding: var(--ds-section-padding, 0) !important;
	margin: var(--ds-section-margin, 0) !important;
	background: var(--ds-section-bg, transparent) !important;
	border: var(--ds-section-border, none) !important;
	border-radius: var(--ds-section-radius, 0) !important;
	height: 100%;
}

.ds-section__header {
	margin-bottom: 4px !important;
}

.ds-section__title {
	display: var(--ds-title-display, block) !important;
	font-family: var(--ds-title-font, inherit) !important;
	font-size: var(--ds-title-size, 20px) !important;
	font-weight: var(--ds-title-weight, 700) !important;
	color: var(--ds-title-color, #222) !important;
	line-height: var(--ds-title-lh, 1.3) !important;
	letter-spacing: var(--ds-title-ls, 0) !important;
	text-align: var(--ds-title-align, left) !important;
	margin: var(--ds-title-margin, 0 0 8px 0) !important;
	padding: var(--ds-title-padding, 0) !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ds-section__title:hover {
	color: var(--ds-title-hover-color, var(--ds-title-color, #222)) !important;
}

/* Đường trang trí dùng border-bottom thật (thay vì tô nền) để "Kiểu đường"
 * (solid/dashed/dotted) có tác dụng đúng như tên gọi. */
.ds-section__decoration {
	display: var(--ds-deco-display, block) !important;
	width: var(--ds-deco-width, 48px) !important;
	height: 0;
	background: transparent !important;
	border-bottom-width: var(--ds-deco-thickness, 3px) !important;
	border-bottom-style: var(--ds-deco-style, solid) !important;
	border-bottom-color: var(--ds-deco-color, currentColor) !important;
	margin-top: var(--ds-deco-margin-top, 8px) !important;
	margin-bottom: var(--ds-deco-margin-bottom, 12px) !important;
}

/* ---------- FEATURED ---------- */
.ds-featured {
	display: var(--ds-feat-display, block) !important;
	text-decoration: none;
	color: inherit;
}

.ds-featured__image {
	width: var(--ds-feat-img-width, 100%) !important;
	height: var(--ds-feat-img-height, auto) !important;
	aspect-ratio: var(--ds-feat-aspect, auto);
	border-radius: var(--ds-feat-radius, 0) !important;
	margin: var(--ds-feat-img-margin, 0) !important;
	padding: var(--ds-feat-img-padding, 0) !important;
	overflow: hidden;
	position: relative;
}

/* Lớp phủ (overlay) khi hover - riêng vùng ảnh của Bài viết chính. */
.ds-featured__image::after {
	content: "";
	display: var(--ds-hover-overlay-image-display, none);
	position: absolute;
	inset: 0;
	background: var(--ds-hover-overlay-color, transparent);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.ds-featured:hover .ds-featured__image::after {
	opacity: 1;
}

.ds-featured__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: var(--ds-feat-fit, cover) !important;
	display: block;
}

/* .ds-featured__title là lớp NGOÀI: chỉ lo khoảng cách (padding-top/bottom, margin) và
 * làm nền cho lớp phủ hover. KHÔNG đặt -webkit-line-clamp trực tiếp ở đây, vì một số
 * trình duyệt tính toán cắt dòng SAI khi phần tử có line-clamp đồng thời có padding
 * (chữ tràn ra ngoài, không bị cắt/không hiện dấu "...") - đây chính là lỗi Binh gặp
 * ở bản 0.6.2. Việc cắt dòng được chuyển hẳn sang lớp con .ds-featured__title-text
 * (không có padding) để tránh xung đột. */
.ds-featured__title {
	margin: var(--ds-feat-title-margin, 0) !important;
	padding: var(--ds-feat-title-padding, 0) !important;
	/* Khoảng cách với ảnh nằm trong padding-top (chứ không phải margin-top) để lớp phủ
	 * hover (::after, inset:0 trong border-box) vươn lên phủ sát tới mép ảnh khi cần.
	 * !important vì phải thắng cả giá trị padding-top từ dòng "padding" shorthand ở trên. */
	padding-top: var(--ds-feat-title-gap, 10px) !important;
	/* Khoảng cách phía dưới - field riêng, dùng padding-bottom (KHÔNG phải margin-bottom)
	 * để lớp phủ hover (::after, bottom:0 trong border-box) phủ được luôn phần khoảng cách
	 * này - margin nằm ngoài border-box nên lớp phủ không thể vươn tới (bài học lặp lại từ
	 * lỗi tương tự đã sửa ở khoảng cách phía trên/ảnh, bản 0.4.2). */
	padding-bottom: var(--ds-feat-title-gap-bottom, 0px) !important;
	box-sizing: border-box;
	display: block !important;
	position: relative;
	z-index: 0; /* tạo stacking context để lớp phủ (z-index:-1 bên dưới) không đè lên chữ */
}

/* .ds-featured__title-text là lớp TRONG: đảm nhiệm toàn bộ style chữ + cắt dòng
 * (-webkit-line-clamp). KHÔNG có padding-top/bottom riêng để line-clamp tính đúng (padding
 * trên/dưới từng gây lỗi tràn dòng - xem bản 0.6.3). padding-left/right thì an toàn (không
 * ảnh hưởng line-clamp) - dùng để TỰ THỤT LỀ 2 bên khi Slider có mũi tên, tránh chữ bị mũi
 * tên đè lên; giá trị tự tính theo Kích thước + Độ nhô của mũi tên (Nhóm chuyên mục), bằng
 * 0 khi không có mũi tên (Grid hoặc tắt mũi tên) - không cần admin tự nhập tay. */
.ds-featured__title-text {
	font-family: var(--ds-feat-title-font, inherit) !important;
	font-size: var(--ds-feat-title-size, 18px) !important;
	font-weight: var(--ds-feat-title-weight, 700) !important;
	color: var(--ds-feat-title-color, #222) !important;
	line-height: var(--ds-feat-title-lh, 1.4) !important;
	letter-spacing: var(--ds-feat-title-ls, 0) !important;
	text-transform: var(--ds-feat-title-transform, none) !important;
	text-align: var(--ds-feat-title-align, left) !important;
	padding-left: var(--ds-slider-title-indent, 0px) !important;
	padding-right: var(--ds-slider-title-indent, 0px) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: var(--ds-feat-title-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.ds-featured:hover .ds-featured__title-text {
	color: var(--ds-feat-title-hover-color, var(--ds-feat-title-color, #222)) !important;
}

/* Lớp phủ (overlay) khi hover - phủ TRỌN khối tiêu đề của Bài viết chính, luôn nằm
 * SAU chữ (z-index:-1) để chữ luôn đọc rõ trên nền màu, không bị mờ chồng lên nhau.
 * Kéo mép trên lên thêm đúng bằng border-radius của ảnh (top âm) để "nuốt" luôn phần góc
 * bo tròn của ảnh phía trên - khi bật cả 2 lớp phủ (ảnh+chữ) sẽ khít hoàn toàn, không hở
 * góc; khi chỉ bật lớp phủ chữ, phần bo góc ảnh cũng được phủ luôn (chấp nhận được). */
.ds-featured__title::after {
	content: "";
	display: var(--ds-hover-overlay-text-display, none);
	position: absolute;
	top: calc(-1 * var(--ds-feat-radius, 0px));
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--ds-hover-overlay-color, transparent);
	opacity: 0;
	z-index: -1;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.ds-featured:hover .ds-featured__title::after {
	opacity: 1;
}

/* ---------- LIST ---------- */
.ds-list {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--ds-list-item-gap, 14px) !important;
	margin-top: 12px !important;
	background: var(--ds-list-bg, transparent) !important;
}

.ds-list__item {
	display: flex !important;
	align-items: stretch !important;
	/* KHÔNG dùng gap ở đây nữa - khoảng trắng do "gap" tạo ra nằm NGOÀI mọi box nên lớp phủ
	 * không thể vươn tới (luôn hở). Khoảng cách ảnh-nội dung nay chuyển thành padding-left
	 * của .ds-list__content bên dưới - nằm TRONG border-box nên lớp phủ phủ được tới đó. */
	text-decoration: none;
	color: inherit;
}

.ds-list__image {
	flex: 0 0 var(--ds-list-img-width, 80px);
	width: var(--ds-list-img-width, 80px) !important;
	height: var(--ds-list-img-height, 80px) !important;
	aspect-ratio: var(--ds-list-aspect, auto);
	border-radius: var(--ds-list-radius, 4px) !important;
	overflow: hidden;
	position: relative;
}

/* Lớp phủ (overlay) khi hover - riêng vùng ảnh của từng item Danh sách bài viết. */
.ds-list__image::after {
	content: "";
	display: var(--ds-hover-overlay-image-display, none);
	position: absolute;
	inset: 0;
	background: var(--ds-hover-overlay-color, transparent);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.ds-list__item:hover .ds-list__image::after {
	opacity: 1;
}

.ds-list__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: var(--ds-list-fit, cover) !important;
	display: block;
}

/* .ds-list__content kéo dài full chiều cao hàng (nhờ align-items: stretch ở trên) và làm
 * NỀN cho lớp phủ hover - khác với bản trước chỉ phủ khít theo khối chữ (bị vỡ/rời rạc).
 * padding-left thay cho "gap" cũ của flex container - khoảng cách ảnh-nội dung (px) nay
 * nằm TRONG border-box của khối này, để lớp phủ hover phủ được tới sát mép ảnh.
 * display/flex-direction/justify-content gắn !important - nếu không, theme có thể ép về
 * display:block khiến toàn bộ canh giữa dọc (khi tắt Excerpt) bị hỏng, dồn về phía trên. */
.ds-list__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	position: relative;
	z-index: 0; /* tạo stacking context để lớp phủ (z-index:-1 bên dưới) không đè lên chữ */
	padding: 4px 10px 4px var(--ds-list-gap, 12px) !important;
}

/* Lớp phủ (overlay) khi hover - phủ TRỌN vùng nội dung (cả khối chứa, không chỉ dòng chữ),
 * nằm ở z-index:-1 để LUÔN ở phía SAU chữ (chữ luôn đọc được rõ, không bị mờ chồng).
 * Kéo mép trái sang thêm đúng bằng border-radius của ảnh (left âm) để "nuốt" luôn phần góc
 * bo tròn bên phải của ảnh - khi bật cả 2 lớp phủ (ảnh+chữ) sẽ khít hoàn toàn, không hở góc. */
.ds-list__content::after {
	content: "";
	display: var(--ds-hover-overlay-text-display, none);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: calc(-1 * var(--ds-list-radius, 0px));
	background: var(--ds-hover-overlay-color, transparent);
	opacity: 0;
	z-index: -1;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.ds-list__item:hover .ds-list__content::after {
	opacity: 1;
}

.ds-list__title {
	font-family: var(--ds-list-title-font, inherit) !important;
	font-size: var(--ds-list-title-size, 15px) !important;
	font-weight: var(--ds-list-title-weight, 600) !important;
	color: var(--ds-list-title-color, #222) !important;
	line-height: var(--ds-list-title-lh, 1.4) !important;
	letter-spacing: var(--ds-list-title-ls, 0) !important;
	text-transform: var(--ds-list-title-transform, none) !important;
	text-align: var(--ds-list-title-align, left) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: var(--ds-list-title-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.ds-list__item:hover .ds-list__title {
	color: var(--ds-list-title-hover-color, var(--ds-list-title-color, #222)) !important;
}

.ds-list__excerpt {
	display: var(--ds-list-excerpt-display, -webkit-box) !important;
	font-family: var(--ds-list-excerpt-font, inherit) !important;
	font-size: var(--ds-list-excerpt-size, 13px) !important;
	font-weight: var(--ds-list-excerpt-weight, 400) !important;
	color: var(--ds-list-excerpt-color, #666) !important;
	line-height: var(--ds-list-excerpt-lh, 1.5) !important;
	text-align: var(--ds-list-excerpt-align, left) !important;
	-webkit-line-clamp: var(--ds-list-excerpt-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 2px !important;
	transition: color 0.2s ease;
}

.ds-list__item:hover .ds-list__excerpt {
	color: var(--ds-list-excerpt-hover-color, var(--ds-list-excerpt-color, #666)) !important;
}

/* ---------- READ MORE ---------- */
.ds-readmore {
	display: var(--ds-rm-display, inline-flex) !important;
	align-items: center;
	gap: var(--ds-rm-icon-gap, 4px) !important;
	font-family: var(--ds-rm-font, inherit) !important;
	font-size: var(--ds-rm-size, 14px) !important;
	font-weight: var(--ds-rm-weight, 600) !important;
	color: var(--ds-rm-color, #A2090C) !important;
	margin: var(--ds-rm-margin, 12px 0 0 0) !important;
	padding: var(--ds-rm-padding, 0) !important;
	text-decoration: none;
	width: 100%;
	justify-content: var(--ds-rm-align, flex-start) !important;
	transition: color 0.2s ease;
}

.ds-readmore:hover {
	color: var(--ds-rm-hover-color, var(--ds-rm-color, #A2090C)) !important;
}

.ds-readmore__icon {
	font-size: var(--ds-rm-icon-size, 16px) !important;
	width: var(--ds-rm-icon-size, 16px);
	height: var(--ds-rm-icon-size, 16px);
	color: var(--ds-rm-icon-color, currentColor) !important;
	transition: color 0.2s ease;
}

/* Icon dạng ký tự/emoji thuần (không phải Dashicons font) - không ép width/height vuông. */
.ds-readmore__icon--text {
	width: auto;
	height: auto;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.ds-readmore:hover .ds-readmore__icon {
	color: var(--ds-rm-hover-color, var(--ds-rm-icon-color, currentColor)) !important;
}

/* ---------- ADMIN NOTICE (chỉ hiện với admin, mục XXXI) ---------- */
.ds-admin-notice {
	background: #fff8e5;
	border-left: 4px solid #dba617;
	padding: 8px 12px;
	font-size: 13px;
	color: #555;
}