/* ==================== UT-AVAIL ==================== */
.ut-availability-datepicker-field .ut-availability-datepicker {border: 1px solid #aaa;}


/* ==================== RULE ==================== */
small.utpr-mini-subtotal {
    font-size: 110%;
}



/* ==================== LOOP ==================== */
.woocommerce-loop-product__title a {color: #000;}
.woocommerce table.shop_attributes {margin: 0; border: 0}




/* ==================== UNIQUE ==================== */
.wc-block-cart__submit-container .wc-block-components-button {background: #fff; border: 2px solid;}


/* ==================== UNIQUE ==================== */

.utpls-trigger,
button.utpls__chip {background: #F5f5f5; color: #222;}




/* ==================== CHAT ==================== */
.uta-timeless-theme.uta-window.uta-open .uta-header {
	background: linear-gradient(130deg, #426ec0 0%, #84bbd6 100%);
}

@media (max-width: 760px) {
	.uta-timeless-theme.uta-window.uta-open .uta-mobile-header {
	background: linear-gradient(130deg, #426ec0 0%, #84bbd6 100%);
	}
}

/* ==================== UNIQUE ==================== */

.utag-group {font-size: 13px; margin-top: 20px;}

.utag-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap; align-items: center;
}

.ut-tags-block .tags {flex-direction: column;}

.utag-row {margin: 5px 0;}
.utag-group__body {margin: 5px 0 0 0;}

.utag-group--ungrouped .utag-row {margin: 0; margin: 5px 0;}
.utag-group--ungrouped .utag-group__body {padding-top: 1px; padding-bottom: 1px;}

.utag-group__body {margin-left: 8px !important; padding: 5px 0 5px 16px; border-left: 1px solid #aaa; text-transform: capitalize;}

.utag-group .utag-row__label {color: #0f6892;}
.utag-group__title {font-weight: 600; text-transform: uppercase}

.utag-group__title {position: relative; display: flex;}
.utag-group__title:after {content: ""; display:block; }

.utag-row__label, .utag-pill {display: inline-block; font-style: normal;}

.utag-row__label {padding: 0;}

.utag-pill,
.utag-group__body > span,
.utag-group__body > * > span {padding-left: 0;}
.utag-group__body span:first-child {padding: 0;}

.utag-group span + span::before{
  content:"·";
  margin: 0 5px;
  opacity:.5;
}

.utag-group .utag-group__title {background-position: left; background-repeat: no-repeat; background-size: 18px; background-image: url('media/theme/special.png'); padding-left: 26px; font-size: 14px; font-style: normal}
.utag-group.destination .utag-group__title {background-image: url('media/theme/location.png'); }

.s-right .utag-group {margin-top: 30px}









/* ========= SEARCH ======== */

.gform_wrapper.gravity-theme .gform_footer, 
.gform_wrapper.gravity-theme .gform_page_footer {margin: 5px 0 !important; padding: 5px 0 !important;}


/* ========= SEARCH ======== */
.utpls-modal-open body {overflow: hidden;}
.utpls-modal-open .bottom-bar {display: none;}
.utpls-trigger-wrap  {display: flex;}
.utpls-trigger {background: unset !important; width: unset !important; height: unset !important;}
.utpls__item--category .utpls__item-body .utpls__item-title {margin-right: 3px;}
.utpls__results .utpls__item {padding: 10px 15px;}
.utpls__item .utpls__item-thumb {border-radius: 5px;}
.utpls__item-body .utpls__item-meta {}
.utpls__item-body .utpls__item-meta {font-size: 11px; margin: 0;}
.utpls__item-body .utpls__item-meta .amount {font-size: 16px; color: #333;}

.utpls-modal .utpls-modal__backdrop {backdrop-filter: blur(5px); background: rgba(0,0,0,.6);}
.utpls-modal .utpls-modal__dialog {width: 700px; max-width: calc(100% - 30px); border-radius: unset; padding: 0; background: unset;}
.utpls__field-wrap > input {border: 0; border-radius: 1000px;}

.utpls__dropdown .utpls__results {padding: 0;}

.utpls .utpls__dropdown {margin-top: 15px; position: relative;  border: 0;}
.utpls__status {position: absolute; right: 0; padding: 10px;}

.utpls__results .utpls__section-title {padding: 20px;}
.utpls__title-text {color: #333;}
.utpls__item-title .utpls__duration {margin-right: 5px; color: #3f83aa;}
.utpls__input {padding-left: 25px !important;}
.ut-wishlist-card {max-width: 400px;}

.utpls-modal__dialog .utpls-modal__close {top: -40px; color: #ff6e6e;}

/* ========= CART ======== */


.ut-cart-item-data {font-size: 13px;}
.ut-cart-item-data__key {color: #888;}

.ut-sidecart {box-shadow: unset;}

.ut-sidecart .ut-sidecart__footer {display: none;}
.ut-sidecart {margin: 15px 0 0 15px; height: calc(100% - 30px); border-radius: 15px;}
body.ut-sidecart-open .ut-sidecart {transform: translateX(-15px);}

body.ut-sidecart-open .ut-sidecart {box-shadow: -8px 0 30px rgba(0,0,0,.1);}

.ut-sidecart-overlay {
    opacity: ;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    background: rgba(0,0,0,.18);
}

.ut-sidecart__close {display: flex; justify-content: center; align-items: center; background: unset; color: #000; font-weight: normal;}
.ut-sidecart__close:hover {transform: rotate(90deg);}

.ut-cart-icon-wrap{

    position:relative;
    display:inline-flex;

}

.ut-cart-icon{

    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;

}

/* right -11px làm badge thò 5px khỏi viewport ở màn hẹp → scroll ngang */
.ut-cart-count{position: absolute; top: 2px; right:-6px; min-width:18px; height:18px; font-size:11px; font-weight:600; background:#ff4d4f; color:#fff; border-radius:20px; display:flex; align-items:center; justify-content:center; padding:0 5px; opacity: 0;}

.has-cart .ut-cart-trigger__count {opacity: 1;}


body.ut-sidecart-open {overflow: hidden;}

.ut-sidecart .remove {position: unset; display: flex; align-items: center; margin: 10px 0; color: #777}
.ut-sidecart .remove .razzi-svg-icon svg {color: #c00; font-size: 20px;}
.ut-sidecart .remove .name {margin-left: 3px; font-size: 15px; text-transform: uppercase}

.ut-sidecart .woocommerce-mini-cart__total {font-size: 20px;}
.ut-sidecart .woocommerce-mini-cart__total .woocommerce-Price-amount {font-weight: 500;}


/* ========= ADDITIONAL ======== */

.ut-ac-guest-heading {color: #555 !important; font-size: 15px; border-color: #ccc !important; border-radius: 4px;}

.ut-yith-additional-costs .ut-ac-groups {padding: 20px 15px; margin-top: 5px; border: 1px solid #ccc; max-height: 100vh; visibility: visible; opacity: 1; transition: all .4s; overflow: hidden; display: block !important;}

.ut-yith-additional-costs.is-collapsed .ut-ac-groups {opacity: 0; max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0;}

.ut-ac-groups .ut-ac-group {margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
.ut-ac-groups .ut-ac-group:last-child {margin-bottom: 0; border: 0; padding: 0;}

.ut-ac-groups .ut-additional-cost-label, 
.ut-ac-groups .ut-additional-cost-value {color: #444; font-size: 15px;}

.ut-ac-groups .ut-additional-cost-content,
.ut-ac-groups .ut-additional-cost-option {display: flex; align-items: center;}

.ut-ac-groups .ut-additional-cost-meta {margin: 0 0 0 3px;}
.ut-ac-groups .ut-ac-group-title {text-transform: uppercase; color: #222;}




/* ========= WISHLIST ======== */

.archive .ut-wishlist-btn {background: unset; border: 0; padding: 20px;}

.favourite.ut-wishlist {display: flex;}

.ut-wishlist-grid {display: flex;}
..ut-wishlist-card {max-width: 400px;}

.ut-wishlist-card__image img {border-radius: 5px;}

.single button.ut-wishlist-btn {border: 0; padding: 0; background: #eee; width: 0; height: 0; padding: 25px; transition: all .3s; line-height: 0;}
.single button.ut-wishlist-btn:hover {background: #e5e5e5;}

/* Heart ghim mép trên s-wrap (2026-08-11): markup nằm trong wrap,
   âm top để nửa nút nhô lên sát mép ngoài cạnh trên của card. */
.s-wrap {position: relative;}
.s-wrap > .favourite.fav-top {position: absolute; top: -25px; right: 18px; z-index: 5;}
.s-wrap > .favourite.fav-top .ut-wishlist-btn {background: #fff; border-radius: 100px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);}
.s-wrap > .favourite.fav-top .ut-wishlist-btn:hover {background: #fff; transform: scale(1.08);}

.wishlist-btn svg {width:20px; height:20px; fill:#e63946;}
span.ut-wishlist-btn__icon,
button.ut-wishlist-btn {line-height: 0; width: 0; color: #222; border: 0; background: #eee; height: 0;}
button.ut-wishlist-btn {padding: 15px;}

.ut-wishlist-card__content {padding: 10px 0;}

.archive .ut-wishlist-btn__icon {width: 0; height: 0; color: #000;}

.ut-wishlist-btn__icon-inner.ut-wishlist-btn__icon-inner--on {color: #333;}
.ut-wishlist-btn__icon-inner.ut-wishlist-btn__icon-inner--on svg {}
.ut-wishlist-btn__icon-inner svg {width: 20px; height: 20px;}
.ut-wishlist-btn__text {display: none;}

.ut-wishlist-count-wrap .ut-wishlist-count {height: 0; width: 0; min-width: 0; min-height: 0; padding: 9px; background: #ff4d4f; color: #fff; font-size: 11px; border: 0; opacity: 0;}
.has-wishlist .ut-wishlist-count-wrap .ut-wishlist-count {opacity: 1;}

.ut-wishlist-btn__icon svg {transition: transform .18s ease, color .18s ease;}

.ut-wishlist-btn.is-active svg {
  transform: scale(1.08);
}

.ut-wishlist-btn.is-active svg {
  animation: ut-heart-pop .25s ease;
}

@keyframes ut-heart-pop {
  0% { transform: scale(.9); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------------
   WooCommerce loop: the razzi-child loop design lives in style.css. The
   scaffold's competing grid/card block was removed from
   assets/css/woocommerce.css so style.css governs the loop. Here we only keep
   the <ul> a plain block (full-width horizontal cards) and center it.
   --------------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: block;
  margin: 0 auto 30px auto;
}

/* Loop card title shares the single-product title size (var --tour-title-sz).
   Needs the .woocommerce prefix + ut.css (loads last) to beat WooCommerce core's
   `.woocommerce …li.product .woocommerce-loop-product__title { font-size: 1em }`
   which otherwise wins and shrinks the title to 16px. */



/* Add-to-cart / booking "Book Now" submit button. style.css only styles it under
   .product-button-wrapper (razzi markup) which the booking form's button lacks, so
   without tb-woo it fell back to WooCommerce's default purple. Apply razzi's button
   look (var --color) directly to the real button so it isn't purple. */
.woocommerce .single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.ut-booking-form__submit {
  background-color: var(--color) !important;
  color: #fff !important;
  padding: var(--button-padding);
  min-width: 100px;
  width: auto;
}
.woocommerce .single_add_to_cart_button:hover,
.ut-booking-form__submit:hover {
  background-color: var(--color-dark-blue) !important;
}

/* Currency switcher (YITH): style.css wants the pill bar (.cur-single > *) to wrap its
   currencies (compact + centered). YITH's shortcodes.css loads after style.css here and
   stretches .yith-wcmcs-currency-list to width:100%, leaving a wide empty bar — pin the
   bar to its content width instead. */
.cur-single > * {
  width: max-content;
  max-width: 100%;
}


.option {border-radius: 10px; background: #eee; max-width: 800px; padding: 15px; justify-content: space-between} .option > * {max-width: calc(50% - 10px)} .option table {background: #fff;} .option sup {font-size: 80%; top: -0.2em; font-weight: bold; color: #999;} .option .pr .symbol {font-size: 85%;} @media screen and (max-width: 781px) { .option {padding: 10px; flex-direction: column} .option > * {max-width: 100%} }

.wp-block-columns.inclusion {} .wp-block-columns.inclusion .wp-block-column {padding: 15px;} .wp-block-columns.inclusion .wp-block-column > *:first-child {padding: 10px; border-bottom: 3px solid #eee;}

/* "From" prefix in Recently Viewed + Similar/Related price: 80% size, muted */
.recently .ut-from-price__prefix {
  font-size: 80%;
  color: #888;
}

/* ─── #actions DOCKED (2026-08-04): cùng MỘT node hai vai — ngồi inline cuối
   phần mô tả (is-docked) / bay lên popup (.open, flow cũ nguyên byte vì JS gỡ
   is-docked trước khi thêm open). Vỏ .layer vốn LÀ backdrop đen fixed 0×0 nên
   docked phải trung hoà trọn bộ vỏ. ── */
.layer.is-docked {position: static; width: auto; height: auto; opacity: 1;
	overflow: visible; background: none; backdrop-filter: none; display: block;
	transition: none; margin: 30px 0 0;     background-image: linear-gradient(125deg, #6492b2, #d2e6f6);
    padding: 150px 20px;
    margin: 0 auto;
    border-radius: 10px;}

@media screen and (max-width: 500px) {
	.layer.is-docked {padding: 50px 20px;}
}

.layer.is-docked .layer-header {overflow: hidden;}


.layer.is-docked .layer-body {opacity: 1; width: 100%; max-width: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 5px; max-height: none; overflow: visible; margin: 0 auto;}
.layer.is-docked .layer-content {overflow: visible;}
.layer.is-docked .layer-close {display: none;} /* không có gì để đóng khi docked */
/* Popup phủ luôn bottom bar (bar fixed z-1000, trước đây hoà z và thắng nhờ
   DOM order — owner chốt backdrop đè bar). ID nên thắng mọi thứ tự nạp css. */
#actions {z-index: 1001;}

/* ─── Modal chung #actions (2026-07-21): tab bar giả lập button bottom-bar ── */
#actions .layer-body {width: 700px;}
#actions .layer-header {align-items: stretch;}
.ut-actions-tabs {display: flex; flex: 1; min-width: 0; overflow-x: auto;}
.ut-actions-tab {display: flex; flex-direction:column; align-items: center; padding: 10px 12px; background: transparent; border: none; font-size: 11px; font-weight: bold; text-transform: uppercase; color: var(--color-dark-blue, #16324c); cursor: pointer; white-space: nowrap; gap: 5px;}
.ut-svg-icon {flex: 0 0 auto; display: inline-block; vertical-align: middle;}
/* #tool: icon trong vòng tròn .wr — trắng như filter-white cũ của PNG. */
#tool .wr .ut-svg-icon {color: #fff; display: block;}
.bottom-bar .rg > * .ut-svg-icon {margin-right: 4px;}
.ut-actions-tab .ut-svg-icon {margin-right: 5px;}
.ut-actions-tab.is-active {background: var(--color-dark-blue, #16324c); color: #fff;}

.ut-actions-panel {display: none;}
.ut-actions-panel.is-active {display: block;}
#actions .layer-content {padding: 50px; width: 100%; box-sizing: border-box;
	/* Equal height theo TAB CAO NHẤT — JS đo lúc mở modal và set min-height
	   cho từng panel (footer.php equalizeActionPanels): modal không đổi cao
	   khi chuyển tab, không có không gian chết. Trần chiều cao đã do
	   max-height của layer-body gate; quá trần thì cuộn bên trong. */
	overflow-y: auto;}
@media screen and (max-width: 781px) {
	#actions .layer-content {padding: 25px 14px;}
	.ut-actions-tab {padding: 9px 9px;}
}

/* Animation chuyển tab trong #actions: panel mới fade + trượt nhẹ lên.
   Dùng animation (không phải transition) vì panel đi từ display:none —
   keyframes vẫn chạy khi class .is-active được gắn. */
.ut-actions-tab {transition: background .18s, color .18s;}
.ut-actions-panel.is-active {animation: utActionsPanelIn .28s ease;}
@keyframes utActionsPanelIn {
	from {opacity: 0; transform: translateY(8px);}
	to {opacity: 1; transform: none;}
}
@media (prefers-reduced-motion: reduce) {
	.ut-actions-panel.is-active {animation: none;}
	.ut-actions-tab {transition: none;}
}

/* ==================== BOTTOM BAR TRANG LOOP (2026-07-21) ==================== */
/* Nút Filter + Destinations bên trái thay chỗ giá — pill giống các button .rg
   (style.css). */
/* BAR TRONG DÒNG CHẢY (2026-08-03) — chỉ áp cho bar của trang loop.
   Bar trang product single giữ nguyên hành vi cũ (fixed + .stick).
   `position: static` thắng luật fixed ở style.css nhờ hai class, và opacity 1
   để khách chưa cuộn nhìn thấy ngay — đó là toàn bộ mục đích. */
.bottom-bar.loop-bar {position: static; opacity: 1; pointer-events: auto; visibility: visible;
	margin: 0 auto 14px; transition: none;}
/* Cuộn qua khỏi chỗ của nó → trả về fixed đáy đúng như trước. transition chỉ
   bật ở trạng thái này, nếu không lúc tải trang sẽ thấy nó trôi vào. */
.bottom-bar.loop-bar.is-docked {position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;
	opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .4s;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,.2); border-radius: 6px 6px 0 0;}
/* Chỗ trống giữ nguyên chiều cao khi bar rời khỏi dòng chảy — không có nó thì
   trang giật lên đúng bằng chiều cao bar tại khoảnh khắc dock. */
.ut-barslot {display: none;}
.ut-barslot.is-active {display: block;}

.bottom-bar.loop-bar .lf {display: flex; align-items: stretch;}
.bottom-bar .lf .ut-loop-filter,
.bottom-bar .lf .ut-loop-dest {padding: 5px 10px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 3px; font-size: 11px;
	font-weight: bold; text-transform: uppercase; color: var(--color-dark-blue);
	white-space: nowrap; border-right: 1px solid #ccc; cursor: pointer;}
.bottom-bar .lf .ut-loop-filter:hover,
.bottom-bar .lf .ut-loop-filter.on,
.bottom-bar .lf .ut-loop-dest:hover,
.bottom-bar .lf .ut-loop-dest.on {background: #ddd;}

/* Body filter (.few = [fe_widget] sẵn có của loop) bật dạng popup cạnh nút
   Filter của bottom bar. .ut-fpop CHỈ đổi cách đặt (fixed ngay trên bar, mép
   trái theo mép bar) — hiện/ẩn nội dung vẫn đi qua class .on sẵn có của theme,
   nên mở từ nút .feb đầu trang vẫn là collapse in-flow như cũ. */
/* Gỡ cụm "Edit Filter Set" của FE (link admin, vô nghĩa với khách). display:none
   để nó không chiếm chỗ; markup vẫn do FE sinh nên đây là cách gỡ an toàn nhất
   khỏi phải chặn ở PHP. */
.wpc-edit-filter-set {display: none !important;}

.few.ut-fpop {position: fixed; bottom: 64px;
	/* Full-width (thiết kế cũ "mép trái khớp mép bar" đã bỏ 2026-08).
	   ⚠️ CẤM viết chuỗi kiểu hàm-calc/-min/-max/-clamp kèm ngoặc mở trong
	   comment CSS: regex hide-calc của Autoptimize (autoptimizeCSSmin::run)
	   không phân biệt comment, match tham lam tới dấu chấm-phẩy kế tiếp sẽ
	   nuốt cả dấu đóng comment lẫn declaration thật phía sau — chính bug đã
	   làm rule này mất left/right (2026-08-09). */
	left: 0; right: 0;
	/* !important vì .archive.woocommerce #main > * (style.css) set width/max-width
	   cho MỌI con trực tiếp của #main với specificity chứa ID. */
	max-height: calc(100vh - 140px);
	overflow-y: auto; overscroll-behavior: contain; z-index: 1001; background: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,.3); padding: 5px 15px;
	/* Mode popup KHÔNG dùng bộ máy collapse của mode in-flow: bỏ grid 0fr/1fr
	   và mọi clamp trên con — container này là CHỦ CUỘN duy nhất. Thiếu các
	   override này, con bị .few.on > * {max-height:100%; overflow:hidden}
	   tự clip (nội dung dài bị cắt/tràn mà container không cuộn). */
	display: block;}

.few.ut-fpop.on > * {margin: 0; max-height: none !important; overflow: visible !important;}

/* Heading bar của popup filter: title "Filter" trái + nút close phải, sticky
   trên đỉnh scrollport (tham khảo head bar của hotel/inquiry modal). Selector
   đủ mạnh để thoát các rule con chung .few > * (max-height/opacity/bg). */
.few .ut-fpop-head {display: none;}
.few.ut-fpop {padding-top: 0;}
.few.ut-fpop .ut-fpop-head {display: flex; position: sticky; top: 0; z-index: 5;
	align-items: center; justify-content: space-between; gap: 10px;
	margin: 0 -15px 10px; padding: 5px 15px;
	background: #eee; border-bottom: 1px solid #eee;
	border-radius: 10px 10px 0 0;
	max-height: none !important; overflow: visible !important;
	/* Fade WITH the panel, not after it. The exemptions above exist so the
	   collapse machinery of `.few > *` cannot clip the head while the popup is
	   open — but an unconditional `opacity:1 !important` also pinned it through
	   the CLOSE: the body faded out, the head stayed at full strength, and 550ms
	   later the JS pulled `.ut-fpop` and it vanished in one frame. Tying the
	   opacity to `.on` keeps the exemption where it was needed and returns the
	   head to the shared fade. */
	opacity: 0; transition: opacity .35s ease;}
.few.ut-fpop.on .ut-fpop-head {opacity: 1 !important;}

/* The panel itself, same reasoning: while `.ut-fpop` is on the element it is a
   fixed white box with a shadow, and it kept both for the whole 550ms after the
   content had gone — a blank card hanging over the page. Fading the container
   takes the head, the background and the shadow out together, and the JS still
   removes the class afterwards, so nothing is cut short. */
.few.ut-fpop {opacity: 0; transition: opacity .35s ease;}
.few.ut-fpop.on {opacity: 1;}
/* Busy state: no curtain, no cursor games — just a ring beside the word FILTER.
   FE Pro's own signals were a full-screen overlay that swallowed clicks and a
   spinner parked away from what the user was looking at. Both are switched off
   in the plugin's settings (use_loader, dark_overlay); the two rules below are
   the belt to that braces, because the overlay ALSO has an unconditional
   `html.is-active` rule of its own — turning the "dark" option off only changes
   its colour, it still covers the page and still blocks the click.

   Interaction stays live throughout: filtering is fast and idempotent, and a
   second click during a request simply supersedes the first. Nothing needs
   protecting from the user here. */
.wpc-filters-overlay {display: none !important;}
.wpc-spinner {display: none !important;}

/* The ring lives inside the title, so the feedback appears where the eye
   already is. Its space is reserved at all times — an indicator that pushes the
   heading sideways as it appears reads as a glitch, not as progress. */
.ut-fpop-head__title {display: inline-flex; align-items: center; gap: 8px;}
.ut-fpop-head__title::after {content: ""; width: 13px; height: 13px; flex: 0 0 auto;
	border-radius: 50%; border: 2px solid rgba(0,0,0,.16); border-top-color: #2766ad;
	opacity: 0; transition: opacity .15s ease;}
/* `html.is-active` is FE Pro's own in-flight flag (filter-everything.js sets it
   when a request starts and clears it when the markup is back), so this tracks
   the real request rather than guessing at a duration. */
html.is-active .ut-fpop-head__title::after {opacity: 1; animation: ut-fpop-spin .7s linear infinite;}
@keyframes ut-fpop-spin {to {transform: rotate(360deg);}}
@media (prefers-reduced-motion: reduce) {
	html.is-active .ut-fpop-head__title::after {animation: none; border-top-color: rgba(0,0,0,.16); background: #2766ad;
		width: 7px; height: 7px; border: 0;}
}

.ut-fpop-head__title {font-size: 14px; font-weight: bold; text-transform: uppercase;
	letter-spacing: .5px; color: var(--color-dark-blue, #16324c);}
.ut-fpop-close {display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
	color: #000; font-size: 25px; line-height: 1; cursor: pointer; background: transparent;
	flex-shrink: 0;}
.ut-fpop-close:hover {color: #c90000;}

/* Destinations INLINE giữa bottom bar ở màn rộng (2026-07-22): ≥800px menu
   hiện mặc định trong khoảng trống giữa bar; nút Destinations thu/phóng qua
   class ut-dest-collapsed trên #bottombar (max-width transition). <800px các
   override này không áp → quay về popup .ut-cpop bên dưới. */
@media screen and (min-width: 800px) {
	.bottom-bar .caw {flex: 1; display: flex; justify-content: center; min-width: 0;
		overflow: hidden; max-width: 100%; opacity: 1;
		transition: max-width .3s ease, opacity .3s ease;}
	.bottom-bar.ut-dest-collapsed .caw {max-width: 0; opacity: 0;}
	.bottom-bar .caw .cm {position: static; opacity: 1; visibility: visible;
		background: none; padding: 0; justify-content: center; transition: none;}
	.bottom-bar .catbar {width: auto; max-width: none; background: none;
		box-shadow: none; padding: 0; font-size: 13px; border-radius: 0;
		backdrop-filter: none;}
	.bottom-bar .catbar ul {flex-wrap: nowrap; justify-content: center;}
	.bottom-bar .catbar ul li {width: auto; font-weight: normal; white-space: nowrap;}
}

/* Destinations IN-FLOW (mobile, bar CHƯA dock — 2026-08-06): bản clone .catbar
   trong #ut-dest-flow chèn ngay sau bar, nằm trong dòng chảy nên cuộn theo
   trang (fixed thì dính viewport, cuộn là "bơi" theo). Docked vẫn .ut-cpop. */
#ut-dest-flow {display: none;}
#ut-dest-flow.on {display: block;
	position: absolute; z-index: 1001;
	left: 50%; transform: translateX(-50%);
	width: var(--wid); max-width: var(--max, calc(100% - 30px));
	border-radius: 10px;}
#ut-dest-flow .catbar ul {flex-direction: column;}
#ut-dest-flow .catbar ul li a {padding: 10px 15px; display: block; width: 100%;}

/* Destinations popup từ bottom bar (<800px): .ut-cpop đổi .cm từ absolute
   (neo .caw) sang fixed ngay trên bar, mép trái khớp mép bar như popup filter;
   hiện/ẩn vẫn qua .caw.on (style.css). */
.caw .cm.ut-cpop {position: fixed; top: auto; right: auto; bottom: 64px;
	left: max(30px, calc((100% - var(--wid, 1170px)) / 2));
	max-width: calc(100vw - 60px); z-index: 1001; justify-content: flex-start;
	/* base .caw .cm để transition: all → đổi vị trí (left 0 → mép bar) cũng bị
	   animate thành slide ngang khi mở. Chỉ giữ fade. */
	transition: opacity .5s, visibility .5s;}

/* Toolbar loop (2026-07-21, thay .baw retired): Filter trái — Sort phải. */
.ut-loop-toolbar {display: flex; align-items: center; justify-content: space-between;
	margin-top: 15px; margin-bottom: 5px;}
.ut-loop-toolbar .sortw .widget_wpc_sorting_widget {margin: 0; padding: 0;}

/* Custom sort dropdown (2026-07-21): select thật ẩn đi (vẫn trong DOM để FE
   serialize + nghe change), UI thay thế do JS dựng trong archive-product.php. */
.sortw.ut-sort-custom .widget_wpc_sorting_widget {display: none;}
.ut-sort {position: relative;}
.ut-sort-btn {display: flex; align-items: center; justify-content: center; gap: 7px;
	height: 38px; padding: 0 15px; flex: 0 0 auto;
	border: 0; border-radius: 50px; background: #fff; color: #333; cursor: pointer;
	font-size: 13px; white-space: nowrap;}
.ut-sort-btn__label {line-height: 1;}
.ut-sort-btn:hover {background: #fff;}
/* KHÔNG xoay icon khi mở: luật rotate(180deg) cũ được viết cho mũi tên caret.
   Icon sort có mũi tên chỉ hướng — xoay nó sẽ ngụ ý SAI rằng thứ tự vừa đảo. */
.ut-sort-btn svg {flex: 0 0 auto;}
/* Neo phải (left:auto) vì nút Sort nằm mép phải toolbar — neo trái làm panel
   220px trải quá viewport; visibility:hidden vẫn chiếm layout → scroll ngang. */
.ut-sort-menu {position: absolute; top: calc(100% + 8px); left: auto; right: 0; z-index: 30;
	min-width: 220px; background: #fff; border-radius: 10px;
	box-shadow: var(--light-shadow, 0 6px 24px rgba(0,0,0,.14)); padding: 6px;
	margin: 0; list-style: none; opacity: 0; visibility: hidden;
	transform: translateY(4px); transition: opacity .2s, visibility .2s, transform .2s;}
.ut-sort.open .ut-sort-menu {opacity: 1; visibility: visible; transform: none;}

/* Bong bóng trạng thái sort: neo TRÊN nút icon, mũi nhọn chĩa xuống nút.
   Đặt trên chứ không dưới vì menu lựa chọn đã mở xuống dưới — hai thứ
   sẽ chồng nhau nếu cùng phía.
   Nút giờ chỉ có icon nên bề rộng đứng yên dù nhãn sort dài tới đâu —
   trước đây nhãn nằm trong nút và "Duration - longer first" làm toolbar nhảy.
   Mũi nhọn là hình vuông xoay 45deg, cùng nền, che mép bằng chính nó. */
.ut-sort-active {position: absolute; bottom: calc(100% + 9px); right: 0; z-index: 29;
	display: flex; align-items: center; gap: 6px; white-space: nowrap;
	padding: 7px 8px 7px 12px; border-radius: 10px;
	background: #213343; color: #fff; font-size: 12.5px;
	box-shadow: var(--light-shadow, 0 6px 24px rgba(0,0,0,.14));}
/* PHẢI có: thuộc tính [hidden] chỉ được UA stylesheet cho display:none, mà
   display:flex ở trên là luật của TÁC GIẢ nên thắng — bong bóng vẫn hiện dù JS
   đã đặt hidden đúng. Bug này sống sót vì logic JS nhìn thì đúng. */
.ut-sort-active[hidden] {display: none;}
.ut-sort-active::before {content: ""; position: absolute; bottom: -4px; right: 13px;
	width: 10px; height: 10px; background: inherit; transform: rotate(45deg);
	border-radius: 2px;}
.ut-sort-active__x {display: flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.15); color: #fff; font-size: 13px; line-height: 1;
	cursor: pointer;}
.ut-sort-active__x:hover {background: rgba(255,255,255,.3);}
/* Nút đang mang sort: đổi màu để nhận ra ngay cả khi bong bóng bị che khuất. */
.ut-sort.is-sorted .ut-sort-btn {background: #213343; color: #fff;}
.ut-sort-menu li {padding: 8px 14px; border-radius: 6px; cursor: pointer;
	white-space: nowrap; font-size: 14px; margin: 0;}
.ut-sort-menu li:hover {background: #f0f0f0;}
.ut-sort-menu li.is-active {color: var(--color-dark-blue); font-weight: bold;}
@media (prefers-reduced-motion: reduce) {
	.ut-sort-menu, .ut-sort-btn svg {transition: none;}
}

/* ===== Skeleton loading khi FE lọc AJAX (2026-07-21) ===== */
/* Nhịp: body.ut-loop-loading (JS ở archive-product.php, theo html.is-active
   của FE) ẩn grid thật, hiện dàn tour card giả mô phỏng layout card loop
   (thumb 35% trái + 65% dòng chữ phải). Wrapper được JS set min-height =
   chiều cao grid cũ để trang không sập chiều cao trong lúc chờ. */
.ut-loop-skeleton {display: none;}
body.ut-loop-loading .ut-loop-skeleton {display: block;}
body.ut-loop-loading ul.products {display: none !important;}

.ut-skel-card {display: flex; margin: 0 0 30px 0;}
.ut-skel-thumb {width: 35%; min-height: 240px; border-radius: 8px; flex-shrink: 0;}
.ut-skel-body {width: 65%; padding: 20px 0 20px 30px; box-sizing: border-box;
	display: flex; flex-direction: column; gap: 16px;}
.ut-skel-line {height: 14px; border-radius: 7px;}
.ut-skel-line--big {height: 26px; margin-top: auto;}
.ut-skel-thumb, .ut-skel-line {
	/* Tông xanh brand thay xám nhạt (2026-08-06, owner): #ececec↔#f8f8f8 trên nền
	   trắng gần như tàng hình — guest không nhận ra trang đang lọc. Base xanh ghi
	   đậm hơn + vệt sáng quét qua tương phản rõ.
	   Nấc 2 (cùng ngày, owner: "vẫn khá mờ"): #ccd9ea → #a9c2de, vệt sáng gần
	   trắng — chênh sáng base/vệt đủ lớn để thấy shimmer cả trên màn kém. */
	background: linear-gradient(90deg, #a9c2de 25%, #f2f7fd 45%, #a9c2de 65%);
	background-size: 400% 100%;
	animation: utSkelShimmer 1.2s linear infinite;}
@keyframes utSkelShimmer {
	from {background-position: 100% 0;}
	to {background-position: -100% 0;}
}
@media (prefers-reduced-motion: reduce) {
	.ut-skel-thumb, .ut-skel-line {animation: none;}
}
@media screen and (max-width: 768px) {
	.ut-skel-card {flex-direction: column;}
	.ut-skel-thumb, .ut-skel-body {width: 100%;}
	.ut-skel-thumb {min-height: 180px;}
	.ut-skel-body {padding: 15px 0;}
}

/* Nút (i) Prices by date nằm dòng cuối .price-right của loop card */
.price-right .price-r-i {margin-top: 1px;}

/* ===== Meta chips dưới title loop card (2026-07-22) ===== */
/* Hàng category + Tour-ID nâng thành cặp pill đồng bộ: category pill xanh nhạt
   (accent của site), Tour-ID pill xám label/value tách bậc — icon SVG 12px. */
.info.tour-meta {gap: 8px; margin: 4px 0 10px;}
.info.tour-meta .info-inner {display: inline-flex; align-items: center; gap: 6px;
	margin: 0; padding: 2px 8px; border-radius: 100px; font-size: 9px; line-height: 1.6;}
.info.tour-meta .ut-svg-icon {width: 12px; height: 12px; flex-shrink: 0;}
.info.tour-meta .cat-name {background: var(--color-bg-blue, #dfeeff); color: var(--color-dark-blue, #16324c);}
.info.tour-meta .cat-name a {color: var(--color-dark-blue, #16324c); font-weight: 600;
	letter-spacing: .4px; text-transform: uppercase;}
.info.tour-meta .cat-name a:hover {color: var(--color, #0693e3);}
.info.tour-meta .tour-id {background: #f4f4f4; color: #999; margin-left: 0;}
.info.tour-meta .tour-id__label {text-transform: uppercase; font-size: 10px;
	letter-spacing: .6px; color: #999;}
.info.tour-meta .tour-id__value {font-weight: 600; color: #333;}




/* ===== Currency dropdown ở toolbar loop (2026-07-22, thay nút Filter đã bỏ) ===== */
/* Button hiện tiền tệ hiện hành, popup = [yith_currency_shortcode] nguyên bản
   (YITH JS tự bắt click .yith-wcmcs-currency). Style đồng bộ .ut-sort. */
.ut-loop-cur-wrap {position: relative;}
.ut-loop-cur {display: flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 50px; background: #fff; font-size: 13px; color: #333; white-space: nowrap; cursor: pointer;}
.ut-loop-cur:hover {background: #f8f8f8;}
.ut-loop-cur svg {transition: transform .2s;}
.ut-loop-cur-wrap.open .ut-loop-cur svg {transform: rotate(180deg);}
.ut-cur-pop {position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
	background: #fff; border-radius: 10px;
	box-shadow: var(--light-shadow, 0 6px 24px rgba(0,0,0,.14)); padding: 6px;
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .2s, visibility .2s, transform .2s;}
.ut-loop-cur-wrap.open .ut-cur-pop {opacity: 1; visibility: visible; transform: none;}
.ut-cur-pop .yith-wcmcs-shortcode {margin: 0; display: flex; padding: 10px;}
.ut-cur-pop .yith-wcmcs-currency {display: block; padding: 2px 11px;}
.ut-cur-pop .yith-wcmcs-currency:hover {background: #f0f0f0; color: #000;}
.ut-cur-pop .yith-wcmcs-currency--selected {font-weight: bold;}
.ut-cur-pop .yith-wcmcs-currency-name {white-space: nowrap;}
@media (prefers-reduced-motion: reduce) {
	.ut-cur-pop, .ut-loop-cur svg {transition: none;}
}

/* ─── Pagination (2026-08-04): khuôn ut-crm .51 — nút vuông bo góc 32px,
   current xanh đậm, dots trần, prev/next chỉ mũi tên (Woo sẵn arrow) ─── */
.ut-loop-region .woocommerce-pagination {border: 0; margin: 26px 0 6px;}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {border: 0;}
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.ut-loop-region ul.page-numbers {list-style: none; padding: 0; margin: 0; border: 0 !important;
	display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: center;}
.ut-loop-region ul.page-numbers li {border: 0; margin: 0; padding: 0; display: inline-block; float: none; overflow: visible;}
/* Selector dài có chủ đích: phải THẮNG bộ mặc định của Woo
   (.woocommerce nav.woocommerce-pagination ul li span.current = 0,3,4) —
   thêm ul.page-numbers vào chuỗi cho đủ (0,4,4). */
.ut-loop-region nav.woocommerce-pagination ul.page-numbers li a,
.ut-loop-region nav.woocommerce-pagination ul.page-numbers li span {display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 6px;
	border-radius: 5px; background: #fff; color: #333;
	font-weight: bold; font-size: 13px; line-height: 1; text-decoration: none;}
.ut-loop-region nav.woocommerce-pagination ul.page-numbers li a:hover {background: #f3f4f6; color: #333;}
.ut-loop-region nav.woocommerce-pagination ul.page-numbers li span.current {background: #3762c1; border-color: #3762c1; color: #fff;}
.ut-loop-region nav.woocommerce-pagination ul.page-numbers li span.dots {border: 0; background: transparent; min-width: auto; padding: 0 2px;}


/* ===== Product meta trên single (2026-08-06) ================================
   Bản gốc Woo in ba span dính liền, theme lại để 13px in đậm toàn bộ → một dải
   chữ chạy liền không phân cấp. Dựng lại theo ĐÚNG ngôn ngữ pill của loop card
   (.info.tour-meta): nhãn micro in hoa mờ đứng trước, giá trị nằm trong pill;
   category mang màu thương hiệu, tag để dạng ghost cho đúng thứ bậc thông tin. */
.single-product div.product .product_meta.ut-pmeta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px 18px; margin: 18px 0 6px; font-size: 12px; font-weight: normal;
	padding-top: 14px; border-top: 1px solid var(--color-border, #e5e7eb);
}
.ut-pmeta__group {display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;}

/* Nhãn: đủ nhỏ để không tranh chấp với giá trị, đủ rõ để biết đang đọc gì. */
.ut-pmeta__label {
	text-transform: uppercase; font-size: 10px; letter-spacing: .8px;
	font-weight: 600; color: var(--color-text-light, #9ca3af); white-space: nowrap;
}

.ut-pmeta__pill {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 11px; border-radius: 100px; line-height: 1.5;
	font-size: 12px; font-weight: 600; white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s;
}
.ut-pmeta__pill .ut-svg-icon {width: 12px; height: 12px; flex-shrink: 0;}

/* Tour ID: xám trung tính — mã tra cứu, không phải điểm nhấn marketing. */
.ut-pmeta__pill--sku {background: #f4f4f6; color: #333;}

/* Category: pill xanh thương hiệu, giống hệt .cat-name ở loop card. */
.ut-pmeta__pill--cat {
	background: var(--color-bg-blue, #dfeeff); color: var(--color-dark-blue, #16324c);
}
.ut-pmeta__pill--cat:hover {background: var(--color-dark-blue, #16324c); color: #fff;}

/* Tag: ghost — thứ yếu so với category, nhưng vẫn bấm được. */
.ut-pmeta__pill--tag {
	background: #fff; color: var(--color-text-muted, #6b7280);
	border: 1px solid var(--color-border, #e5e7eb); font-weight: 500;
}
.ut-pmeta__pill--tag:hover {border-color: var(--color-dark, #0b77b4); color: var(--color-dark, #0b77b4);}

@media screen and (max-width: 600px) {
	.single-product div.product .product_meta.ut-pmeta {gap: 8px 12px;}
	.ut-pmeta__group {width: 100%;}
}

/* ── Block cart/checkout (chuyển đổi 2026-08-06) ─────────────────────────
   Block cart tự chèn mô tả ngắn sản phẩm dưới tên — với tour là cả đoạn
   văn dài, gây nhiễu (classic cart không có). Ẩn đi, giữ item-data
   (dates/persons/Tour ID) vốn là thông tin thật sự của booking. */
.wc-block-cart .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-product-metadata__description,
.wc-block-components-order-summary .wc-block-components-product-metadata__description,
.wc-block-mini-cart .wc-block-components-product-metadata__description { display: none; }

/* Breakdown trong block UI: dạng CỘT như sidecart — mỗi dòng một hàng, bỏ
   separator " / " inline của component. Sub-row add-on được thụt từ nguồn
   (em-space trong key, xem ut-availability display class) vì class của nó
   trùng với row person, CSS không phân biệt được. */
.wc-block-components-product-details > span { display: block; }
.wc-block-components-product-details > span > span[aria-hidden] { display: none; }

/* ── UTCS switcher (cutover 2026-08-07) ──────────────────────────────────
   style="list": bản dọc trong .ut-cur-pop và .cur-single — mirror đúng khuôn
   .ut-cur-pop .yith-wcmcs-currency cũ để popup không đổi hình dạng. */
.utcs-style-list { display: flex; flex-direction: row; padding: 10px; }
.utcs-style-list .utcs-btn { display: block; text-align: left; background: none; padding: 5px 8px; font-weight: inherit; }
.utcs-style-list .utcs-btn:hover { background: #f0f0f0; color: #000; }
.utcs-style-list .utcs-btn.is-active { background: #1e90ff; color: #fff; }

/* ── Currency dropdown trong product_meta (single, 2026-08-07) ───────────
   Thế chỗ Tags: pill làm trigger, popup tái dùng .ut-cur-pop. Tags dọn sang
   s-right dưới khối attribute, mượn nguyên utag-* nên không cần CSS riêng. */
.ut-pmeta__dd { position: relative; display: inline-block; }
.ut-pmeta__pill--currency { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: #eee;}
.ut-pmeta__pill--currency svg { transition: transform .2s; }
.ut-pmeta__dd.open .ut-pmeta__pill--currency svg { transform: rotate(180deg); }
.ut-pmeta__dd.open .ut-cur-pop { opacity: 1; visibility: visible; transform: none; }
.ut-tags-block .utag-pill a { color: inherit; text-decoration: none; }
.ut-tags-block .utag-pill a:hover { text-decoration: underline; }

/* ========= LAYER SCROLL POLISH (2026-08-11) ========= */
/* Hộp cuộn thật là .layer-content bên trong .layer-body (bo góc + clip).
   1) Scrollbar mảnh, bo tròn, lùi vào trong — không đè lên góc bo của body.
   2) "Độ thở": nội dung mờ dần ~10px trước hai mép trên/dưới thay vì bị cắt
      phẳng đúng mép (mask áp cả lên scrollbar nên thanh cuộn cũng thở theo).
   Chỉ áp cho trạng thái popup (.open), KHÔNG áp khi is-docked (inline). */
.layer.open .layer-content {
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.layer.open .layer-content::-webkit-scrollbar {width: 8px;}
.layer.open .layer-content::-webkit-scrollbar-track {background: transparent; margin: 12px 0;}
.layer.open .layer-content::-webkit-scrollbar-thumb {background: #d5d5d8; border-radius: 8px; border: 2px solid #fff;}
.layer.open .layer-content::-webkit-scrollbar-thumb:hover {background: #bfbfc4;}
.layer.open .layer-content {scrollbar-width: thin; scrollbar-color: #d5d5d8 transparent;}