@charset "UTF-8";
/*
 * FOOTER v2 — dựng theo file thiết kế chủ site gửi 09/09/2026.
 *
 * Markup do `inc/footer.php` sinh ra (shortcode [vnin_footer]); UX Block "Footer v2"
 * chỉ gọi shortcode đó. Đừng tìm markup trong block.
 *
 * ⚠️ Class PHẢI có tiền tố `vnin-` — WP Rocket RUCSS có safelist `/\.vnin-(.*)/`.
 * Đặt tên khác là ngày nào bật lại RUCSS sẽ bị cắt mất.
 *
 * Bảng màu lấy đúng từ thiết kế:
 *   nền dải CTA #faf8f6 · viền #ece8e4 · chữ #1b1b1f · chữ phụ #5c5c66
 *   nền footer #231f20 · nền đáy #1a1718 · hồng #d81372 / hover #ab0c58
 */

/* ============================ DẢI CTA TRÊN CÙNG ============================ */
.vnin-ft-cta {
	background: #faf8f6;
	border-top: 1px solid #ece8e4;
}
.vnin-ft-cta-in {
	max-width: 1250px; margin: 0 auto; padding: 40px 20px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px;
}
.vnin-ft-cta-main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vnin-ft-cta-title {
	margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600;
	letter-spacing: -.01em; color: #1b1b1f; text-wrap: pretty; max-width: 46ch;
}
.vnin-ft-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.vnin-ft-btn {
	min-height: 44px; padding: 14px 26px; border-radius: 999px;
	background: #d81372; color: #fff !important;
	font-size: 15px; font-weight: 600; line-height: 1;
	display: inline-flex; align-items: center; gap: 9px;
	transition: background-color .18s ease;
}
.vnin-ft-btn:hover { background: #ab0c58; color: #fff !important; }
.vnin-ft-hot { display: flex; flex-direction: column; gap: 2px; }
.vnin-ft-hot a { font-size: 15px; font-weight: 600; color: #d81372 !important; }
.vnin-ft-hot a:hover { color: #ab0c58 !important; }
.vnin-ft-hot span { font-size: 12.5px; color: #5c5c66; }

/* ảnh đội ngũ (travel-experts.png, 342x107) — thay 4 vòng tròn viết tắt của thiết kế */
.vnin-ft-team {
	flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
	padding-left: 32px; border-left: 1px solid #ece8e4;
}
.vnin-ft-team-img { flex: none; width: 150px; height: auto; display: block; }
.vnin-ft-team-txt { flex: none; display: flex; flex-direction: column; gap: 2px; }
.vnin-ft-team-txt b { font-size: 13.5px; font-weight: 600; color: #1b1b1f; white-space: nowrap; }
.vnin-ft-team-txt span { font-size: 12.5px; color: #5c5c66; white-space: nowrap; }

/* ============================ THÂN FOOTER ============================ */
.vnin-ft { background: #231f20; color: #fff; }
.vnin-ft-in {
	max-width: 1250px; margin: 0 auto; padding: 44px 20px 16px;
	display: flex; flex-wrap: wrap; gap: 28px 40px;
}
.vnin-ft-col { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vnin-ft-col--brand { flex: 1 1 280px; }

.vnin-ft-logo { align-self: flex-start; display: block; }
.vnin-ft-logo img { max-width: 190px; height: auto; display: block; }

.vnin-ft-h {
	font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: rgba(255,255,255,.5);
}
.vnin-ft-links { display: flex; flex-direction: column; gap: 8px; }
.vnin-ft-links a { font-size: 14px; color: rgba(255,255,255,.82) !important; transition: color .16s ease; }
.vnin-ft-links a:hover { color: #fff !important; }

/* văn phòng: nhãn đậm + địa chỉ mờ, đúng thiết kế */
.vnin-ft-offices { display: flex; flex-direction: column; gap: 9px; }
.vnin-ft-office { display: flex; flex-direction: column; gap: 8px; }
.vnin-ft-office-line,
.vnin-ft-office span { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
.vnin-ft-office-line b,
.vnin-ft-office b { color: #fff; font-weight: 600; }

/* khối "Talk to us" */
.vnin-ft-talk { display: flex; flex-direction: column; gap: 12px; }
.vnin-ft-talk-item { display: flex; flex-direction: column; gap: 1px; }
.vnin-ft-talk-item .lbl {
	font-size: 11px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: rgba(255,255,255,.62);
}
.vnin-ft-talk-item a,
.vnin-ft-talk-item b { font-size: 15px; font-weight: 600; color: #fff !important; }
.vnin-ft-talk-item a:hover { color: #ff8ec0 !important; }

/* danh sách nhân viên */
.vnin-ft-people { display: flex; flex-direction: column; gap: 7px; }
.vnin-ft-people a {
	display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
}
.vnin-ft-people .nm { color: rgba(255,255,255,.6); transition: color .16s ease; }
.vnin-ft-people .no { color: #fff; }
.vnin-ft-people a:hover .nm { color: #fff; }

.vnin-ft-b2b {
	align-self: flex-start; margin-top: 4px;
	padding: 11px 20px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.28);
	font-size: 13.5px; font-weight: 600; color: #fff !important;
	transition: background-color .18s ease, border-color .18s ease;
}
.vnin-ft-b2b:hover { background: #d81372; border-color: #d81372; color: #fff !important; }

/* ---- dải giải thưởng + đánh giá ---- */
.vnin-ft-strip {
	max-width: 1250px; margin: 0 auto; padding: 22px 20px;
	border-top: 1px solid rgba(255,255,255,.12);
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}
.vnin-ft-awards { display: flex; flex-wrap: wrap; gap: 10px; }
.vnin-ft-award {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 16px; background: #fff; border-radius: 12px;
}
.vnin-ft-award svg { flex: none; }
.vnin-ft-award span { display: flex; flex-direction: column; gap: 1px; }
.vnin-ft-award .who {
	font-size: 11px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: #5c5c66;
}
.vnin-ft-award .what { font-size: 14px; font-weight: 700; color: #1b1b1f; }

/* icon mạng xã hội — nút tròn viền mờ, hover đổ nền hồng, đúng thiết kế */
.vnin-ft-social { display: flex; flex-wrap: wrap; gap: 9px; }
.vnin-ft-social a {
	width: 38px; height: 38px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.22);
	color: rgba(255,255,255,.86) !important;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.vnin-ft-social a:hover { background: #d81372; border-color: #d81372; color: #fff !important; }

/* ---- đáy trang ---- */
/*
 * Trùng màu thân footer (#231f20) chứ KHÔNG dùng #1a1718 của bản thiết kế. Lý do: dải này
 * phải chừa chỗ cho nút nổi "Get a Quote", mà nền tối hơn làm phần chừa đó nổi lên thành
 * một khối đen rỗng — chủ site bác 09/09/2026. Cùng màu thì nó đọc thành khoảng thở.
 */
.vnin-ft-bot { background: #231f20; }
/*
 * Đệm dưới 64px chừa chỗ cho nút nổi "Get a Quote" (#wa-widget-send-button: position
 * fixed, cao 40px, margin-bottom 20px -> chiếm dải 20-60px tính từ đáy MÀN HÌNH). Không
 * chừa thì lúc khách cuộn hết trang, nút đè lên link "Payment options", bấm không được.
 * Footer cũ không dính vì dòng bản quyền căn giữa, không chạm mép phải.
 *
 * Đã thử chừa theo chiều ngang (đẩy dãy link sang trái) để khỏi tốn chiều cao — nhưng
 * link rời mép phải trông như lỗi căn lề, chủ site bác. Chừa dọc + dải đáy cùng màu thân
 * footer là phương án chốt.
 */
.vnin-ft-bot-in {
	max-width: 1250px; margin: 0 auto; padding: 18px 20px 64px;
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 12px 24px;
}
.vnin-ft-bot-in span { font-size: 12.5px; color: rgba(255,255,255,.68); }
.vnin-ft-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.vnin-ft-legal a { font-size: 12.5px; color: rgba(255,255,255,.68) !important; }
.vnin-ft-legal a:hover { color: #fff !important; }

/* ---- đoạn giới thiệu cột thương hiệu ---- */
.vnin-ft-blurb {
	margin: 0; max-width: 42ch;
	font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.7);
}

/*
 * Khối gập (văn phòng / số máy trực tiếp). Thiết kế dùng một nút chữ hồng tự đổi nhãn
 * chứ không phải tiêu đề kèm mũi tên — mặc định ĐÓNG.
 *
 * Dùng <details> nên không cần JS: nhãn "đang đóng" và "đang mở" cùng nằm trong
 * <summary>, CSS `[open]` quyết định cái nào hiện. Nội dung vẫn nằm trong DOM khi đóng
 * nên Google đọc được bình thường.
 */
.vnin-ft-fold { display: flex; flex-direction: column; gap: 12px; }
.vnin-ft-toggle {
	list-style: none; cursor: pointer; align-self: flex-start;
	font-size: 13px; font-weight: 600; color: #f06ba6;
	transition: color .16s ease;
}
.vnin-ft-toggle::-webkit-details-marker { display: none; }
.vnin-ft-toggle:hover { color: #fff; }
.vnin-ft-fold > .vnin-ft-toggle > .o { display: none; }
.vnin-ft-fold[open] > .vnin-ft-toggle > .c { display: none; }
.vnin-ft-fold[open] > .vnin-ft-toggle > .o { display: inline; }
.vnin-ft-panel { padding: 14px; background: rgba(255,255,255,.05); border-radius: 12px; }

/*
 * Viền focus bàn phím. Nền footer tối và nút hồng đậm nên outline mặc định của trình
 * duyệt dễ chìm; vẽ luôn cho chắc. Chỉ :focus-visible để chuột bấm không hiện viền.
 */
.vnin-ft-cta :focus-visible,
.vnin-ft :focus-visible,
.vnin-ft-bot :focus-visible {
	outline: 2px solid #ff8ec0;
	outline-offset: 3px;
	border-radius: 6px;
}

/*
 * Ẩn dải đáy mặc định của Flatsome (.absolute-footer). Footer v2 đã có dòng bản quyền +
 * số giấy phép riêng ở .vnin-ft-bot, để cả hai là hiện hai dòng chồng nhau.
 *
 * ⚠️ BẪY (đã dính 09/09/2026): XOÁ theme mod `footer_left_text` KHÔNG làm mất dải này —
 * template-parts/footer/footer-absolute.php:47 gọi get_theme_mod() kèm giá trị mặc định
 * "Copyright [ux_current_year] © <strong>Flatsome Theme</strong>", nên xoá đi là rơi về
 * đúng chuỗi mặc định đó và nó hiện ra trang thật. Phải đặt CHUỖI RỖNG, không phải xoá.
 * Trên máy này .absolute-footer không chứa gì khác (không có menu vị trí `footer`,
 * footer_right_text = false) nên ẩn cả khối là an toàn.
 *
 * File này chỉ được nạp khi footer_block = 'footer-v2' (inc/assets.php), nên quay về
 * footer cũ là dải đáy tự hiện lại, không phải nhớ gỡ luật này.
 */
.absolute-footer { display: none; }

/* ============================ ĐIỆN THOẠI ============================ */
@media (max-width: 849px) {
	.vnin-ft-cta-in { padding: 30px 18px; gap: 22px; }
	.vnin-ft-cta-title { font-size: 17px; }
	/*
	 * Khối đội ngũ: bỏ vạch ngăn dọc và thụt lề trái — khi xuống một cột thì vạch dọc
	 * treo lơ lửng giữa màn hình, trông như lỗi.
	 */
	.vnin-ft-team { padding-left: 0; border-left: 0; }
	.vnin-ft-in { padding: 32px 18px 12px; gap: 26px; }
	/*
	 * Máy tính bảng: cột thương hiệu chiếm trọn hàng, ba cột link chia đôi -> 2 cột.
	 * Trước đây ép hết về 100% nên ở 768px footer xếp thành 4 hàng, dài lê thê.
	 */
	.vnin-ft-col { flex: 1 1 45%; }
	.vnin-ft-col--brand { flex: 1 1 100%; }
	.vnin-ft-strip { padding: 18px; }
	.vnin-ft-bot-in { padding: 16px 18px; }
}
@media (max-width: 549px) {
	.vnin-ft-cta-title { font-size: 16px; }
	.vnin-ft-btn { width: 100%; justify-content: center; }
	.vnin-ft-col { flex: 1 1 100%; }
	.vnin-ft-award { padding: 10px 13px; }
	.vnin-ft-award .what { font-size: 13px; }
}