@charset "UTF-8";
/*
 * Thành phần dùng chung TOÀN SITE — nạp ở mọi trang.
 *
 * 1) Mục lục (plugin Easy Table of Contents)
 * 2) Accordion FAQ của Flatsome
 *
 * ⚠️ CỐ Ý KHÔNG bám `.vnin-prose`. Luật mục lục trước đây nằm trong post-single.css và
 * bám `.vnin-prose #ez-toc-container`, nên chỉ đẹp ở bài viết và page template mặc định.
 * 12 trang /destinations/ dùng `page-blank.php` -> không có class đó -> mục lục hiện ra
 * kiểu mặc định xấu của plugin (chủ site báo 08/09). `#ez-toc-container` là ID nên
 * độ đặc hiệu (1,0,0) đã đủ mạnh, không cần tiền tố.
 */

/* ============ MỤC LỤC (plugin ez-TOC) ============ */
#ez-toc-container {
	width: 100%; max-width: none; margin: 24px 0; padding: 0;
	background: #fff; border: 1px solid #ece8e4; border-radius: 16px;
	box-shadow: none; overflow: hidden;
}
#ez-toc-container .ez-toc-title-container {
	padding: 15px 18px; background: #faf8f6;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#ez-toc-container .ez-toc-title {
	margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: #5c5c66;
}
#ez-toc-container nav { padding: 16px 18px; }
#ez-toc-container ul { margin: 0; padding: 0; list-style: none; }
#ez-toc-container li { margin: 0; line-height: 1.5; }
#ez-toc-container a { text-decoration: none; }
#ez-toc-container a:hover { color: #d81372; }
/* ---- CẤP 1: đậm, có số thứ tự ---- */
#ez-toc-container nav > ul { counter-reset: vnin-toc; }
#ez-toc-container nav > ul > li { counter-increment: vnin-toc; margin-bottom: 11px; }
#ez-toc-container nav > ul > li:last-child { margin-bottom: 0; }
#ez-toc-container nav > ul > li > a {
	display: block; font-size: 14.5px; font-weight: 600; color: #1b1b1f;
}
/*
 * Số do CSS counter sinh. ez-TOC có sẵn `counter-hierarchy ez-toc-counter` nhưng bộ đếm
 * của nó KHÔNG hiện (đã kiểm trên trang thật), nên tự đánh số ở đây. Nếu bản ez-TOC sau
 * bật lại được counter của nó thì sẽ ra số đúp — lúc đó bỏ khối này.
 */
#ez-toc-container nav > ul > li > a::before {
	content: counter(vnin-toc) ". ";
	color: #d81372; font-weight: 700;
}
/* ---- CẤP 2: nhạt hơn, thụt vào, có vạch dọc cho thấy rõ đang lồng ---- */
#ez-toc-container nav > ul > li > ul {
	margin: 9px 0 0 4px; padding-left: 14px;
	border-left: 2px solid #ece8e4;
	display: flex; flex-direction: column; gap: 8px;
}
#ez-toc-container nav > ul > li > ul > li > a {
	display: block; font-size: 13.5px; font-weight: 400; color: #4a4a52;
}
/* cấp 3 trở xuống (hiếm) — thụt thêm một nấc, không đánh số */
#ez-toc-container nav > ul > li > ul ul {
	margin: 8px 0 0 4px; padding-left: 14px; border-left: 2px solid #f2efec;
	display: flex; flex-direction: column; gap: 7px;
}
/* mục đang xem — ez-TOC tự gắn class */
#ez-toc-container a.active,
#ez-toc-container .ez-toc-link.ez-toc-heading-highlight { color: #d81372; }

/* =========================================================================
 * ACCORDION FAQ — kéo accordion mặc định của Flatsome về đúng kiểu Tour v2
 *
 * Đồng bộ bằng CSS chứ KHÔNG đổi markup: `[accordion]` của Flatsome dùng ở rất nhiều
 * nơi (12 trang destination, trang FAQs, block…). Viết lại markup 12 trang là rủi ro
 * không cần thiết, mà đằng nào cũng chỉ khác nhau ở phần nhìn.
 *
 * Markup Flatsome:
 *   .accordion > .accordion-item > a.accordion-title[aria-expanded] > button.toggle + span
 *                                > .accordion-inner
 * Đối chiếu Tour v2: .vnin-ts-acc > .vnin-ts-acc-item > .vnin-ts-acc-btn > title + sign
 *                                                     > .vnin-ts-acc-body
 * ========================================================================= */
.accordion { display: flex; flex-direction: column; gap: 10px; }

.accordion .accordion-item {
	border: 1px solid #ece8e4;
	border-radius: 16px;
	overflow: hidden;
	margin: 0;
}

.accordion .accordion-title {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 18px;
	border: 0; margin: 0;
	background: #fff;
	font-size: 15px; font-weight: 600; line-height: 1.4; color: #1b1b1f;
	text-transform: none; letter-spacing: 0;
	transition: background-color .18s ease;
}
.accordion .accordion-title:hover { background: #f4f0ec; color: #1b1b1f; }
.accordion .accordion-title.active { background: #faf8f6; }
.accordion .accordion-title:focus-visible { outline: 2px solid #d81372; outline-offset: -2px; }
.accordion .accordion-title > span { flex: 1; min-width: 0; }

/*
 * Nút bật/tắt: Flatsome đặt nó ĐỨNG TRƯỚC chữ và dùng icon Font Awesome.
 * `order: 2` + `margin-left: auto` đẩy sang phải cho giống Tour v2, và dấu +/− vẽ bằng
 * CSS để không phụ thuộc bộ icon (Font Awesome đang tải 127 KB từ CDN ngoài).
 */
.accordion .accordion-title .toggle {
	order: 2; flex: none; margin: 0 0 0 auto;
	position: relative; width: 13px; height: 13px; min-height: 0;
	padding: 0; border: 0; background: none; opacity: 1;
	transform: none;
}
.accordion .accordion-title .toggle i { display: none; }   /* giấu icon font */
.accordion .accordion-title .toggle::before,
.accordion .accordion-title .toggle::after {
	content: ""; position: absolute; inset: 50% 0 auto 0;
	height: 2px; background: #d81372; border-radius: 2px;
	transform: translateY(-50%); transition: transform .18s ease;
}
.accordion .accordion-title .toggle::after { transform: translateY(-50%) rotate(90deg); }
/* đang mở -> dấu cộng thành dấu trừ */
.accordion .accordion-title[aria-expanded="true"] .toggle::after { transform: translateY(-50%) rotate(0deg); }

.accordion .accordion-inner {
	padding: 18px;
	font-size: 14.5px; line-height: 1.7; color: #4a4a52;
}
.accordion .accordion-inner > *:first-child { margin-top: 0; }
.accordion .accordion-inner > *:last-child  { margin-bottom: 0; }

@media (max-width: 640px) {
	.accordion .accordion-title { padding: 14px 15px; font-size: 14.5px; gap: 10px; }
	.accordion .accordion-inner { padding: 15px; }
}