/*
 * Thẻ tour — bám ĐÚNG file design của chủ site (Tour_Card_Redesign, 07/09/2026).
 *
 * ⚠️ Mọi con số dưới đây lấy nguyên từ design. Rà lại 07/09 phát hiện tôi đã tự chỉnh
 *    11/14 thuộc tính (cỡ chữ nhỏ đi, padding hẹp lại, thêm box-shadow khi hover…).
 *    ĐỪNG "tinh chỉnh" nữa nếu chủ site không yêu cầu — muốn đổi thì đổi cả file design.
 *
 * Bảng đối chiếu để lần sau khỏi phải bóc lại file design:
 *    thẻ        bo 20px · viền 1px #ece8e4 · hover CHỈ đổi border-color -> #d81372
 *    ảnh        cao 238px · nền chờ #e6e3df · phủ gradient rgba(12,10,8,.62) -> trong ở 46%
 *    nhãn       top/left 12px · padding 6px 11px · bo 999px · nền #d81372 · 12px/600
 *    chip N/D   bottom 12px / right 14px · padding 5px 10px · bo 8px · nền rgba(12,10,8,.62)
 *    thân       padding 18px 20px 20px · gap 14px · riêng tiêu đề↔lộ trình 7px
 *    tiêu đề    20px / 1.3 / 600 / -.01em · KHÔNG đổi màu khi hover
 *    lộ trình   13.5px / 1.5 / #6b6b76
 *    nhãn nhỏ   padding 5px 10px · bo 8px · nền #f7f5f3 · viền #ece8e4 · 12px/500 #4a4a52
 *    gạch ngang 1px #ece8e4, cách trên dưới 14px
 *    giá        24px / 700 / -.02em · đơn vị 12px #6b6b76
 *    nút        padding 13px 20px · bo 12px · nền #d81372 · 14.5px/600 · gap 8px
 *               hover -> #ab0c58
 *
 * ⚠️ Class giữ tiền tố `vnin-` (safelist RUCSS của WP Rocket).
 * ⚠️ KHÔNG dựng lại thẻ <img> — ảnh đi qua JS WebP của EWWW. Xem inc/tour-card.php.
 */

/*
 * 🔴 CHỐT CHẶN equalize-box: xoá height cố định mà JS của Flatsome đặt vào.
 * Shortcode [ux_products] bật equalize theo THAM SỐ riêng, theme_mod không với tới.
 * Danh sách phần tử lấy đúng từ flatsome/assets/js/woocommerce.js.
 * Thiếu !important là thua vì JS đặt style inline.
 */
.vnin-card .box-text,
.vnin-card .box-text .name,
.vnin-card .box-text .price-wrapper,
.vnin-card .box-text .box-excerpt,
.vnin-card .box-text .add-to-cart-button,
.vnin-card .box-text a { height: auto !important; }

/* ---- khung ngoài: các thẻ trong hàng tự cao bằng nhau (lưới .row đã là flex) ---- */
.vnin-card { display: flex; }
.vnin-card > .col-inner { display: flex; width: 100%; }
.vnin-card .product-small.box {
	display: flex; flex-direction: column; width: 100%;
	background: #fff;
	border: 1px solid #ece8e4;
	border-radius: 20px;
	overflow: hidden;
	transition: border-color .2s ease;
}
/* design chỉ đổi MÀU VIỀN khi hover — không đổ bóng, không nhấc thẻ lên */
.vnin-card .product-small.box:hover { border-color: #d81372; }

/* ---- ảnh ---- */
.vnin-card .box-image { position: relative; width: 100%; margin: 0; background: #e6e3df; }
.vnin-card .box-image > div { height: 100%; }
.vnin-card .box-image img {
	width: 100%; height: 238px; object-fit: cover; display: block; margin: 0; border-radius: 0;
}
.vnin-card-veil {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(12,10,8,.62) 0%, rgba(12,10,8,0) 46%);
}
.vnin-card-flag {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 11px; border-radius: 999px;
	background: #d81372; color: #fff;
	font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
}
.vnin-card-nd {
	position: absolute; bottom: 12px; right: 14px; z-index: 2;
	display: inline-flex; align-items: center;
	padding: 5px 10px; border-radius: 8px;
	background: rgba(12,10,8,.62); color: #fff;
	font-size: 12px; font-weight: 600; line-height: 1.2;
}

/* ---- thân thẻ ---- */
.vnin-card .box-text {
	flex: 1 1 auto; display: flex; flex-direction: column; gap: 0;
	padding: 18px 20px 20px; text-align: left;
}
/* tiêu đề cách lộ trình 7px, các khối còn lại cách nhau 14px */
.vnin-card .box-text .title-wrapper { margin: 0 0 7px; padding: 0; }
.vnin-card .box-text .price-wrapper {
	flex: 1 1 auto; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 14px;
}
.vnin-card .name.product-title,
.vnin-card .box-text h3 {
	margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600;
	letter-spacing: -.01em; text-wrap: pretty;
}
.vnin-card .name.product-title a { color: #1b1b1f; }

.vnin-card-route { margin: 0; font-size: 13.5px; line-height: 1.5; color: #6b6b76; }

.vnin-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vnin-card-tag {
	padding: 5px 10px; border-radius: 8px;
	background: #f7f5f3; border: 1px solid #ece8e4;
	font-size: 12px; font-weight: 500; line-height: 1.3; color: #4a4a52;
}

/* gạch ngang + khối giá; margin-top:auto đẩy xuống đáy cho các thẻ thẳng chân */
.vnin-card-foot {
	margin-top: auto; padding-top: 14px; border-top: 1px solid #ece8e4;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
}
.vnin-card-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vnin-card-amount {
	font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #1b1b1f;
	line-height: 1.15; white-space: nowrap;
}
/*
 * "/person" dính liền con số — đây là chỗ khách đọc trước tiên nên phải nói rõ đơn vị
 * ngay tại đó. Dòng dưới ("2 adults · twin sharing") là ĐIỀU KIỆN áp dụng, không phải đơn vị.
 * Cố ý khác design; xem ghi chú trong inc/tour-card.php.
 */
.vnin-card-per {
	font-size: 13px; font-weight: 500; color: #6b6b76;
	letter-spacing: 0; margin-left: 3px; white-space: nowrap;
}
.vnin-card-unit { font-size: 12px; color: #6b6b76; line-height: 1.3; }
.vnin-card-btn {
	flex: none; display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 20px; border-radius: 12px;
	background: #d81372; color: #fff; text-decoration: none;
	font-size: 14.5px; font-weight: 600; line-height: 1.2;
	transition: background .18s ease;
}
.vnin-card .product-small.box:hover .vnin-card-btn,
.vnin-card-btn:hover { background: #ab0c58; color: #fff; }

/* ---- dọn phần thừa của Flatsome trong thẻ ---- */
.vnin-card .box-image .image-tools,
.vnin-card .out-of-stock-label,
.vnin-card .category-name,
.vnin-card .box-text .price-wrapper > .price { display: none; }

/*
 * ---- màn hẹp ----
 * Chỉ THU NHỎ theo tỉ lệ, giữ nguyên tương quan của design. Desktop phải đúng số ở trên.
 */
@media (max-width: 849px) {
	.vnin-card .box-image img { height: 200px; }
	.vnin-card .box-text { padding: 16px 17px 18px; }
	.vnin-card .box-text .price-wrapper { gap: 12px; }
	.vnin-card .name.product-title,
	.vnin-card .box-text h3 { font-size: 18px; }
	.vnin-card-amount { font-size: 21px; }
	.vnin-card-per { font-size: 12px; }
	.vnin-card-btn { padding: 11px 15px; font-size: 13.5px; gap: 7px; }
	.vnin-card-foot { padding-top: 12px; gap: 10px; }
}
@media (max-width: 549px) {
	.vnin-card .box-image img { height: 210px; }
	.vnin-card-btn { padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.vnin-card .product-small.box,
	.vnin-card-btn { transition: none; }
}

/*
 * Neo cho nút "Browse N packages" ở hero.
 * `scroll-margin-top` để header dính của Flatsome không che mất phần đầu danh sách
 * khi trình duyệt nhảy tới neo.
 */
.vnin-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 110px;
}