/*
 * Sidebar bài viết. Markup: WordPress/Flatsome + inc/sidebar-widgets.php ("Latest Posts").
 * Token: #d81372 / #ab0c58 · chữ #1b1b1f / #4a4a52 / #5c5c66 · viền #ece8e4 · nền #faf8f6 / #e6e3df
 *
 * ⚠️ Chỉ nhắm `.widget-area` để không đụng widget footer hay off-canvas của cửa hàng.
 */

.widget-area { display: flex; flex-direction: column; gap: 14px; }

/*
 * Sidebar rộng hơn (25% -> 31%) và bớt khoảng cách. Bọc trong `:has()` CẢ HAI luật:
 * trình duyệt không hiểu `:has()` thì không luật nào chạy -> giữ nguyên bố cục cũ,
 * thay vì chỉ nới sidebar rồi tổng vượt 100% và nó rơi xuống dưới.
 */
@media (min-width: 850px) {
	/*
	 * ⚠️ PHẢI cho cột nội dung một `flex-basis` cụ thể (69%), KHÔNG dùng `auto`.
	 * `.row` của Flatsome là `flex-flow: row wrap`. Trong flex container CÓ WRAP,
	 * item không co xuống dưới flex-basis mà **xuống dòng**. `flex: 1 1 auto` lấy
	 * basis từ `width: 100%` của `.col` -> cột nội dung chiếm trọn một dòng ->
	 * sidebar bị đẩy xuống dưới (chủ site báo 07/09). 69% + 31% = 100% thì vừa.
	 */
	.row:has(> .post-sidebar) > .col:not(.post-sidebar) { flex: 1 1 69%; max-width: 69%; }
	.row:has(> .post-sidebar) > .post-sidebar { flex: 0 0 31%; max-width: 31%; }
}

/* ---- vỏ widget ---- */
.widget-area .widget {
	margin: 0;
	padding: 16px;
	background: #fff;
	border: 1px solid #ece8e4;
	border-radius: 16px;
	display: flex; flex-direction: column; gap: 12px;
}
.widget-area .widget > .widget-title,
.widget-area .widget > .widget-title span {
	margin: 0;
	font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: #5c5c66;
}
/* Flatsome chèn một gạch ngang dưới mỗi tiêu đề — mẫu không có */
.widget-area .widget .is-divider { display: none; }

.vnin-widget-more {
	align-self: flex-start;
	font-size: 13.5px; font-weight: 600; color: #d81372; text-decoration: none;
}
.vnin-widget-more:hover { color: #ab0c58; }

/* ---- Category: thẻ select ---- */
.widget-area .widget_categories form { position: relative; margin: 0; }
.widget-area .widget_categories select {
	width: 100%; appearance: none; -webkit-appearance: none;
	/*
	 * ⚠️ PHẢI đặt lại `height` và `margin`. Flatsome ghim
	 *     select { height: 2.507em; padding: 0 .75em; margin-bottom: 1em }
	 * nên thêm padding dọc mà không mở `height` thì chữ bị CẮT ngang (chủ site báo 07/09).
	 * `background-image: none` để bỏ mũi tên SVG dựng sẵn của Flatsome — đã có `::after`.
	 */
	height: auto; margin: 0;
	padding: 13px 38px 13px 14px;
	border: 1px solid #ece8e4; border-radius: 12px;
	background: #fff; background-image: none; color: #1b1b1f;
	font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.35; cursor: pointer;
	box-shadow: none;
}
.widget-area .widget_categories select:hover { border-color: #d81372; }
.widget-area .widget_categories select:focus-visible { outline: 2px solid #d81372; outline-offset: 2px; }
/* mũi tên riêng: `appearance:none` đã bỏ mũi tên mặc định của trình duyệt */
.widget-area .widget_categories form::after {
	content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	font-size: 12px; color: #5c5c66; pointer-events: none;
}

/* ---- Latest posts ---- */
.vnin-postlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.vnin-postlist li { margin: 0; }
.vnin-post {
	display: flex; gap: 12px;
	padding: 14px 0; border-top: 1px solid #ece8e4;
}
.vnin-post:first-child { border-top: 0; padding-top: 0; }
.vnin-post:last-child { padding-bottom: 0; }
/*
 * ⚠️ Độ đặc hiệu phải thắng `.widget>ul>li>a { display:inline-block; flex:1; padding:6px 0 }`
 * của Flatsome (0,1,3). Luật đó đặt `flex:1` -> flex-basis 0 -> ảnh co về **0px chiều rộng**
 * (chủ site báo 07/09: "latest post thiếu ảnh"). `.widget-area .vnin-post-thumb` là (0,2,0),
 * hạng class cao hơn nên thắng.
 */
.widget-area .vnin-post-thumb {
	display: block; flex: 0 0 72px;
	width: 72px; height: 56px; padding: 0;
	border-radius: 10px; overflow: hidden; background: #e6e3df;
}
.widget-area .vnin-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vnin-post-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vnin-post-title {
	font-size: 13.5px; line-height: 1.45; font-weight: 600; color: #1b1b1f;
	text-decoration: none; text-wrap: pretty;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vnin-post-title:hover { color: #d81372; }
.vnin-post-meta { font-size: 11.5px; line-height: 1.4; color: #5c5c66; }

/* ---- Tag cloud ---- */
.widget-area .tagcloud { display: flex; flex-wrap: wrap; gap: 7px; }
.widget-area .tagcloud a {
	display: inline-block; padding: 8px 12px;
	border: 1px solid #ece8e4; border-radius: 999px; background: #faf8f6;
	/* ⚠️ WordPress in `style="font-size:…"` thẳng vào thẻ để "vẽ mây" theo số bài —
	   phải !important mới đè được, không thì chữ to nhỏ lộn xộn. */
	font-size: 12.5px !important; font-weight: 500; line-height: 1.3;
	color: #4a4a52; text-decoration: none;
}
/*
 * ⚠️ Custom CSS nội tuyến của site có
 *     .widget .tagcloud a:hover { border-color:#3f3a3a; background-color:#3f3a3a }  (0,2,1)
 * bằng đúng độ đặc hiệu luật cũ của tôi và nằm SAU trong tài liệu -> nó thắng, hover
 * ra nền xám đen (chủ site báo 07/09). Thêm một cấp class nữa cho chắc: (0,3,1).
 */
.widget-area .widget .tagcloud a:hover {
	border-color: #d81372; background-color: #fdeef5; color: #ab0c58;
}

@media (max-width: 849px) {
	.widget-area { gap: 16px; }
	.widget-area .vnin-post-thumb { flex-basis: 84px; width: 84px; height: 64px; }
}