/*
 * Hero trang danh mục. Token màu lấy từ file design của chủ site (07/09) —
 * trùng sẵn màu thương hiệu #d81372 đang dùng trên site.
 *
 * ⚠️ Class PHẢI giữ tiền tố `vnin-` — safelist RUCSS của WP Rocket bao trùm tiền tố này.
 * ⚠️ Font: dùng Montserrat của site, KHÔNG nạp Poppins như file design (chốt 07/09).
 */

.vnin-hero { padding: 22px 0 0; }

/*
 * PHƯƠNG ÁN 2: bó trong khung 1200px vì ảnh danh mục chỉ rộng 400–1024px.
 * Có ảnh ≥1600px rồi thì đổi sang tràn màn hình: bỏ max-width + border-radius,
 * và bỏ padding ngang của .vnin-hero.
 */
.vnin-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	/* --vnin-hero-h: shortcode [vnin_hero height="520px"] ghi đè được */
	min-height: var(--vnin-hero-h, 440px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: 22px;
	background: #14100f;
}
.vnin-hero-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}
.vnin-hero-veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top,
		rgba(14,10,12,.92) 0%, rgba(14,10,12,.72) 42%,
		rgba(14,10,12,.34) 78%, rgba(14,10,12,.5) 100%);
}
.vnin-hero-body {
	position: relative;
	width: 100%;
	padding: 36px 34px 38px;
	display: flex; flex-direction: column; gap: 22px;
}

.vnin-hero-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.8);
}
.vnin-hero-crumbs a { color: rgba(255,255,255,.8); text-decoration: none; }
.vnin-hero-crumbs a:hover { color: #fff; text-decoration: underline; }
.vnin-hero-crumb-now { color: #fff; font-weight: 500; }

/* ---- Hàng trên hero: breadcrumb trái, huy hiệu uy tín phải ---- */
.vnin-hero-top {
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 14px;
}
.vnin-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.vnin-hero-badge {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 8px 13px; border-radius: 12px;
	background: rgba(255,255,255,.94);
	border: 1px solid rgba(255,255,255,.6);
	font-size: 12.5px; line-height: 1.2; text-decoration: none;
}
a.vnin-hero-badge:hover { background: #fff; border-color: #fff; }
a.vnin-hero-badge:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vnin-hero-badge-name { font-weight: 600; color: #1b1b1f; }
.vnin-hero-badge-sep { width: 1px; height: 14px; background: #e2ded9; }
.vnin-hero-badge-val {
	display: inline-flex; align-items: center; gap: 5px; color: #4a4a52;
}
.vnin-hero-badge-val b { color: #1b1b1f; font-weight: 700; }
/* ngôi sao là <i> nhưng KHÔNG in nghiêng — nó là ký tự ★, không phải chữ */
.vnin-hero-badge-val i { color: #d81372; font-style: normal; }

.vnin-hero-cols {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: 28px;
}
.vnin-hero-main {
	flex: 1 1 520px; min-width: 0;
	display: flex; flex-direction: column; gap: 13px;
}
.vnin-hero-eyebrow {
	align-self: flex-start;
	padding: 6px 12px; border-radius: 999px;
	background: #d81372; color: #fff;
	font-size: 11.5px; font-weight: 600; line-height: 1.5;
	letter-spacing: .12em; text-transform: uppercase;
}
/* ---- Hàng nhãn: eyebrow (đặc) + pill phụ (viền), dùng ở hero tour đơn ---- */
.vnin-hero-pillrow {
	align-self: flex-start;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.vnin-hero-pill {
	padding: 6px 12px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.45);
	background: rgba(255,255,255,.12); color: #fff;
	font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}

/*
 * Hero TRANG TOUR ĐƠN — cỡ chữ theo file demo Tour_Detail_Redesign:
 * h1 36px/600 (hero danh mục 42px/700), giá 27px/600 (thay 32px/700).
 * Hero danh mục cố ý to hơn vì tiêu đề ở đó là tiêu đề trang đích SEO.
 */
.vnin-hero--tour .vnin-hero-title { font-size: 36px; font-weight: 600; line-height: 1.18; }
.vnin-hero--tour .vnin-hero-sub { font-size: 15.5px; line-height: 1.62; }
.vnin-hero--tour .vnin-hero-price-amt { font-size: 27px; font-weight: 600; }
.vnin-hero--tour .vnin-hero-price-note { font-size: 13px; color: rgba(255,255,255,.84); }
.vnin-hero--tour .vnin-hero-trust-item { font-size: 14.5px; }
@media (max-width: 900px) { .vnin-hero--tour .vnin-hero-title { font-size: 30px; } }
@media (max-width: 640px) { .vnin-hero--tour .vnin-hero-title { font-size: 25px; } }

/* ---- Giá + nút, xếp cùng hàng (hero tour đơn) ---- */
.vnin-hero-buy {
	/* demo: gap 22px, padding-top 6px */
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 14px 22px; padding-top: 6px;
}
.vnin-hero-buy .vnin-hero-cta { padding-top: 0; }
.vnin-hero-price { display: flex; flex-direction: column; gap: 2px; }
.vnin-hero-price-from {
	font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: rgba(255,255,255,.72);
}
.vnin-hero-price-amt {
	font-size: 32px; font-weight: 700; line-height: 1.1;
	letter-spacing: -.02em; color: #fff;
	font-variant-numeric: tabular-nums;
}
/*
 * "/person" dính liền con số — quyết định 07/09, giống hệt tour card:
 * tách ra dòng riêng thì khách đọc thành giá cho cả nhóm.
 */
.vnin-hero-price-per {
	font-size: 14px; font-weight: 500; letter-spacing: 0;
	color: rgba(255,255,255,.82);
}
.vnin-hero-price-note { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.75); }

.vnin-hero-title {
	margin: 0; color: #fff; max-width: 620px;
	font-size: 42px; line-height: 1.12; font-weight: 700; letter-spacing: -.025em;
	text-wrap: pretty;
}
.vnin-hero-sub {
	margin: 0; max-width: 560px;
	font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9);
}
.vnin-hero-cta { display: flex; flex-wrap: wrap; gap: 11px; padding-top: 5px; }
/*
 * Bo 999px + padding 16/26 + 15.5px: CẢ HAI file demo (Phu Quoc hero và Tour detail)
 * đều ghi vậy. Vòng đầu tôi làm 12px/14-23/15px — sửa lại 07/09 khi rà soát đối chiếu.
 */
.vnin-hero-btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 16px 26px; border-radius: 999px;
	background: #d81372; color: #fff;
	font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.vnin-hero-btn:hover { background: #ab0c58; color: #fff; }
.vnin-hero-btn--ghost {
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.45);
}
.vnin-hero-btn--ghost:hover { background: rgba(255,255,255,.26); color: #fff; }

.vnin-hero-trust {
	flex: 0 1 292px;
	display: flex; flex-direction: column; gap: 9px;
	padding: 17px 19px; border-radius: 16px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.24);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vnin-hero-trust-head {
	font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: rgba(255,255,255,.72);
}
.vnin-hero-trust-item { font-size: 14px; line-height: 1.45; color: #fff; }

/* ---------- Tablet ---------- */
@media (max-width: 1240px) {
	.vnin-hero { padding: 16px 16px 0; }
	.vnin-hero-inner { border-radius: 18px; }
}
@media (max-width: 900px) {
	.vnin-hero-title { font-size: 34px; }
	.vnin-hero-trust { flex: 1 1 100%; }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 640px) {
	.vnin-hero { padding: 12px 12px 0; }
	.vnin-hero-inner { min-height: 380px; border-radius: 14px; }
	.vnin-hero-body { padding: 20px 18px 22px; gap: 15px; }
	.vnin-hero-crumbs { font-size: 12px; gap: 6px; }
	.vnin-hero-top { gap: 10px; }
	/*
	 * Huy hiệu trên điện thoại: một hàng trượt ngang. Không dùng flex-wrap vì
	 * ba badge xuống ba dòng thì đẩy tiêu đề rơi khỏi màn hình đầu tiên.
	 */
	.vnin-hero-badges {
		width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.vnin-hero-badges::-webkit-scrollbar { display: none; }
	.vnin-hero-badge { flex: none; padding: 6px 11px; font-size: 11.5px; border-radius: 10px; }
	.vnin-hero-badge-sep { height: 12px; }
	.vnin-hero-title { font-size: 27px; line-height: 1.16; }
	.vnin-hero-sub { font-size: 14.5px; }
	.vnin-hero-pillrow { gap: 6px; }
	.vnin-hero-pill { padding: 5px 10px; font-size: 11px; }
	/*
	 * Điện thoại: giá nằm TRÊN nút, không cạnh nút. Nút đã `width:100%` ở dưới nên
	 * để cùng hàng thì giá bị ép còn một cột hẹp, số 32px xuống dòng giữa chừng.
	 */
	.vnin-hero-buy { flex-direction: column; align-items: stretch; gap: 12px; }
	.vnin-hero-price-amt { font-size: 27px; }
	.vnin-hero-price-note { font-size: 12px; }
	.vnin-hero-cta { flex-direction: column; gap: 9px; padding-top: 2px; }
	.vnin-hero-btn { justify-content: center; width: 100%; padding: 14px 18px; }
	/* Trên điện thoại: cam kết thành một dòng chấm giữa, không còn khối kính */
	.vnin-hero-trust {
		flex-direction: row; flex-wrap: wrap; gap: 5px 12px;
		padding: 0; background: none; border: 0;
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
	.vnin-hero-trust-head { display: none; }
	/*
	 * Chấm đầu dòng đặt trên MỌI mục, không dùng `+ item::before` kiểu dấu phân cách.
	 * Với 4 mục thì hàng bị xuống dòng, mà dấu phân cách rơi xuống đầu dòng mới trông
	 * như lỗi — còn mục đầu tiên thì trơ ra không có chấm (nhắc 07/09).
	 */
	.vnin-hero-trust-item {
		display: inline-flex; align-items: baseline; gap: 7px;
		font-size: 12.5px; color: rgba(255,255,255,.9);
	}
	.vnin-hero-trust-item::before {
		content: "·"; color: rgba(255,255,255,.65); font-weight: 700;
	}
}

/*
 * Hero gọn cho trang shop và 4 trang lưu trữ taxonomy — chúng không phải term
 * product_cat nên không có ảnh/eyebrow. Không có bản này thì các trang đó mất H1
 * (vì dải tiêu đề Flatsome đã bị gỡ). Xem ghi chú trong inc/category-hero.php.
 */
.vnin-hero--plain .vnin-hero-inner {
	min-height: 0;
	background: linear-gradient(120deg, #1d1418 0%, #3a1226 62%, #5c0f36 100%);
}
.vnin-hero--plain .vnin-hero-body { padding: 30px 34px 32px; gap: 10px; }
.vnin-hero--plain .vnin-hero-title { font-size: 32px; }
.vnin-hero--plain .vnin-hero-sub { font-size: 14.5px; margin-top: 4px; }
@media (max-width: 640px) {
	.vnin-hero--plain .vnin-hero-body { padding: 20px 18px 22px; }
	.vnin-hero--plain .vnin-hero-title { font-size: 24px; }
}

/* ============ Khối 2 cột: mô tả + thẻ nhận quote ============ */
.vnin-intro {
	max-width: 1200px;
	margin: 0 auto;
	/* padding-bottom rộng: sát thanh lọc quá thì hai khối dính vào nhau (nhắc 07/09) */
	padding: 34px 0 30px;
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
	gap: 38px;
	align-items: start;
}
.vnin-intro-main { min-width: 0; }
/* Mô tả là UX Block có [section] với padding riêng — bỏ padding thừa trong cột hẹp */
.vnin-intro-main .term-description > .section > .section-content { padding-left: 0; padding-right: 0; }

.vnin-quote {
	background: #faf8f6;
	border: 1px solid #ece8e4;
	border-radius: 20px;
	padding: 25px 24px;
	display: flex; flex-direction: column; gap: 14px;
}
.vnin-quote-title {
	margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3;
	letter-spacing: -.01em; color: #1b1b1f; text-wrap: pretty;
}
.vnin-quote-text { margin: 0; font-size: 14px; line-height: 1.65; color: #4a4a52; }
.vnin-quote-btn {
	display: block; padding: 14px 20px; border-radius: 12px;
	background: #d81372; color: #fff; text-align: center; text-decoration: none;
	font-size: 15px; font-weight: 600; line-height: 1.2;
}
.vnin-quote-btn:hover { background: #ab0c58; color: #fff; }
.vnin-quote-note { font-size: 12.5px; color: #5c5c66; text-align: center; }

@media (max-width: 900px) {
	.vnin-intro { grid-template-columns: 1fr; gap: 24px; padding: 26px 0 24px; }
}
@media (max-width: 640px) {
	.vnin-intro { padding: 20px 0 20px; gap: 20px; }
	.vnin-quote { padding: 20px 18px; border-radius: 16px; }
	.vnin-quote-title { font-size: 17.5px; }
}

/* ============ Thu gọn mô tả (thay readmore cũ) ============ */
.vnin-intro-main .term-description {
	overflow: hidden;
	position: relative;
	margin-bottom: 0;
	padding-bottom: 0;
	transition: max-height .25s ease;
}
.vnin-intro-main .term-description.vnin-clamp { max-height: 190px; }
.vnin-intro-main .term-description.vnin-clamp.vnin-clamp-open { max-height: 4000px; }
/* Bản cũ chèn 2 div absolute vào trong mô tả — chặn hẳn nếu còn sót */
.vnin-intro-main .devvn_readmore_taxonomy_flatsome { display: none !important; }

.vnin-more {
	all: unset;
	box-sizing: border-box;
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 12px; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3;
	color: #d81372;
}
.vnin-more:hover { color: #ab0c58; }
.vnin-more:focus-visible { outline: 2px solid #d81372; outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
	.vnin-intro-main .term-description { transition: none; }
}

/* Thẻ quote sau khi JS chuyển xuống dưới lưới tour trên mobile */
@media (max-width: 900px) {
	.vnin-quote { margin-top: 26px; }
}

/*
 * Biến thể TRÀN MÀN HÌNH cho shortcode [vnin_hero full="1"].
 * ⚠️ Chỉ dùng khi ảnh nền rộng >= 1600px. Ảnh danh mục trên site này chỉ 400–1024px
 * nên hero danh mục cố ý dùng bản khung 1200px.
 */
.vnin-hero--full { padding: 0; }
.vnin-hero--full .vnin-hero-inner {
	max-width: none;
	border-radius: 0;
	min-height: var(--vnin-hero-h, 520px);
}
.vnin-hero--full .vnin-hero-body {
	max-width: 1200px; margin: 0 auto;
	padding-left: 24px; padding-right: 24px;
}
@media (max-width: 640px) {
	.vnin-hero--full .vnin-hero-inner { min-height: var(--vnin-hero-h, 420px); }
	.vnin-hero--full .vnin-hero-body { padding-left: 18px; padding-right: 18px; }
}