/* ==========================================================================
   Vivu V2 — Visual Conversion Redesign (P0.5). Nạp SAU vivu-v2.css, chỉ khi cờ `visual` bật.
   Token: docs/DESIGN_TOKENS.md. Giữ DNA: navy #002d72 · biển #5dace1 · cam #ff8a00 (nhấn nhỏ) · Zalo #0068ff.
   Chỉ transition 150ms; không animation vào trang; không video autoplay.
   ========================================================================== */
:root {
  --v-primary: #002d72; --v-primary-hover: #001f52; --v-primary-soft: #eaf1fb;
  --v-sea: #0f5f8a; --v-sea-soft: #eaf4fb; --v-accent: #ff8a00; --v-zalo: #0068ff;
  --v-ink: #14213d; --v-ink-2: #4b5563; --v-ink-3: #6b7280;
  --v-bg: #ffffff; --v-surface: #f4f7fb; --v-surface-2: #e9eff7; --v-border: #e2e8f0; --v-brand-dark: #0b1f4b;
  --v-success: #15803d; --v-focus: #ffb454;
  --v-r-card: 16px; --v-r-img: 12px; --v-r-btn: 10px; --v-r-hero: 24px;
  --v-sh-1: 0 1px 2px rgba(11, 31, 75, .06), 0 8px 24px rgba(11, 31, 75, .08);
  --v-sh-2: 0 12px 32px rgba(11, 31, 75, .14);
  --v-font: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --v-container: 1120px;
}
body.vivu-visual .vivu-v2 { color: var(--v-ink); }
body.vivu-visual .vivu-btn--primary, body.vivu-visual button.vivu-btn--primary { background: var(--v-primary) !important; }
body.vivu-visual .vivu-btn--primary:hover { background: var(--v-primary-hover) !important; }

/* ---- Typography scale --------------------------------------------------- */
.vivu-eyebrow { margin: 0 0 8px; font: 700 12px/1 var(--v-font); letter-spacing: .08em; text-transform: uppercase; color: var(--v-sea); }
.vivu-h2 { margin: 0 0 10px; font: 800 26px/1.2 var(--v-font); color: var(--v-primary); letter-spacing: -.01em; }
.vivu-lead { margin: 0 0 16px; font: 400 16px/1.55 var(--v-font); color: var(--v-ink-2); }
.vivu-link { font: 700 15px/1.2 var(--v-font); color: var(--v-sea); text-decoration: none; }
.vivu-link:hover { text-decoration: underline; }
@media (min-width: 850px) { .vivu-h2 { font-size: 34px; } .vivu-lead { font-size: 18px; } .vivu-eyebrow { font-size: 13px; } }

/* ---- Hero V2: nền video flycam (poster WebP = LCP, video nạp sau load) — copy trắng trên scrim tối, form trắng ----- */
body.vivu-visual .vivu-hero { background: #fff; padding: 0; }
.vivu-hero__stage { position: relative; isolation: isolate; overflow: hidden; background: #0d2b2a; padding: 28px 16px 30px; }
body.vivu-visual .vivu-hero:not(.vivu-hero--video) .vivu-hero__stage { background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%); }
.vivu-hero__bg { position: absolute; inset: 0; z-index: 0; }
.vivu-hero__poster, .vivu-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vivu-hero__video { opacity: 0; transition: opacity .5s ease; }
.vivu-hero__video.is-playing { opacity: 1; }
.vivu-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 20, 24, .62) 0%, rgba(4, 20, 24, .58) 100%); }
body.vivu-visual .vivu-hero__in { position: relative; z-index: 1; }
body.vivu-visual .vivu-hero__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
body.vivu-visual .vivu-hero__copy { max-width: 680px; }
body.vivu-visual .vivu-hero__h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 10px; }
body.vivu-visual .vivu-hero__sub { font-size: 17px; line-height: 1.5; margin-bottom: 18px; max-width: 60ch; }
.vivu-hero--video .vivu-hero__h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.vivu-hero--video .vivu-hero__sub { color: rgba(255, 255, 255, .94); text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
body.vivu-visual .vivu-hero__form { border: 0; box-shadow: var(--v-sh-2); border-radius: var(--v-r-card); padding: 16px; }
body.vivu-visual .vivu-hero__trust { margin-top: 14px; gap: 8px 10px; }
body.vivu-visual .vivu-hero__trust li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--v-border); font: 600 12.5px/1.2 var(--v-font); color: var(--v-ink-2); }
body.vivu-visual .vivu-hero__trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v-accent); margin: 0; }
.vivu-hero--video .vivu-hero__trust li { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); color: #fff; }
.vivu-hero__nudge { margin: 12px 0 0; font: 500 14px/1.45 var(--v-font); color: var(--v-ink-2); }
.vivu-hero__nudge a { color: var(--v-sea); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vivu-hero__nudge a:hover { color: var(--v-primary); }
.vivu-hero--video .vivu-hero__nudge { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.vivu-hero--video .vivu-hero__nudge a { color: #fff; }
.vivu-hero--video .vivu-hero__nudge a:hover { color: #ffd9a8; }
.vivu-hero__quickwrap { padding: 4px 16px 0; }
@media (min-width: 850px) {
  .vivu-hero__stage { padding: 64px 24px 56px; min-height: clamp(520px, 74vh, 740px); display: flex; align-items: center; }
  .vivu-hero__scrim { background: linear-gradient(to right, rgba(4, 20, 24, .78) 0%, rgba(4, 20, 24, .52) 48%, rgba(4, 20, 24, .18) 100%), linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .28) 100%); }
  body.vivu-visual .vivu-hero__in { width: 100%; }
  body.vivu-visual .vivu-hero__h1 { font-size: 46px; }
  body.vivu-visual .vivu-hero__form { grid-template-columns: 1.1fr 1fr 1.4fr; align-items: end; padding: 18px; }
  body.vivu-visual .vivu-hero__form .vivu-btn--block { grid-column: 1 / -1; margin-top: 2px !important; }
  .vivu-hero__quickwrap { padding: 8px 24px 0; }
}
@media (prefers-reduced-motion: reduce) { .vivu-hero__video { display: none; } }

/* ---- Quick category V2: icon + nhãn + phụ đề ---------------------------- */
body.vivu-visual .vivu-quick { margin: 16px 0 0; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.vivu-visual .vivu-quick li { min-width: 0; }
body.vivu-visual .vivu-quick a { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; justify-content: start; min-width: 0; min-height: 64px; padding: 10px 12px; text-align: left; border: 1px solid var(--v-border); border-radius: 14px; background: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
body.vivu-visual .vivu-quick .vivu-quick__t, body.vivu-visual .vivu-quick .vivu-quick__s { min-width: 0; overflow-wrap: normal; word-break: normal; }
@media (min-width: 640px) { body.vivu-visual .vivu-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body.vivu-visual .vivu-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
body.vivu-visual .vivu-quick a:hover { border-color: var(--v-primary); box-shadow: var(--v-sh-1); background: var(--v-primary-soft); }
body.vivu-visual .vivu-quick svg { grid-row: 1 / span 2; color: var(--v-sea); }
body.vivu-visual .vivu-quick .vivu-quick__t { font: 700 14px/1.2 var(--v-font); color: var(--v-primary); }
body.vivu-visual .vivu-quick .vivu-quick__s { font: 500 12px/1.3 var(--v-font); color: var(--v-ink-3); }
@media (min-width: 1024px) { body.vivu-visual .vivu-quick a { min-height: 72px; padding: 12px 14px; } }

/* ---- Product Card V2 ----------------------------------------------------- */
body.vivu-visual .vivu-cards { gap: 16px; margin: 24px 0 8px; }
body.vivu-visual .vivu-cards > li { display: flex; min-width: 0; }
body.vivu-visual .vivu-cards > li > .vivu-card { flex: 1 1 auto; width: 100%; }
body.vivu-visual .vivu-card { border: 0; box-shadow: var(--v-sh-1); border-radius: var(--v-r-card); }
body.vivu-visual .vivu-card:hover { box-shadow: var(--v-sh-2); }
body.vivu-visual .vivu-card__media { aspect-ratio: 4 / 3; background: var(--v-surface-2); }
body.vivu-visual .vivu-card__media a { display: block; height: 100%; }
body.vivu-visual .vivu-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vivu-card__noimg { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px/1.2 var(--v-font); color: #6b7280; background: var(--v-surface-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23a5b4c7' stroke-width='1.4' d='M3 17l5-6 4 5 3-4 6 5M3 5h18v14H3z'/></svg>") center 38%/44px no-repeat; padding-top: 40px; }
body.vivu-visual .vivu-card__badge { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--v-primary); font: 700 12px/1 var(--v-font); letter-spacing: .02em; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
body.vivu-visual .vivu-card__body { padding: 14px 16px 16px; gap: 0; }
body.vivu-visual .vivu-card__title { margin: 0 0 4px; font: 700 17px/1.3 var(--v-font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.vivu-visual .vivu-card__title a { color: var(--v-ink); }
body.vivu-visual .vivu-card__meta { margin: 0 0 8px; font: 500 13px/1.3 var(--v-font); color: var(--v-ink-3); }
body.vivu-visual .vivu-card__hl { margin: 0 0 12px; gap: 4px; }
body.vivu-visual .vivu-card__hl li { font: 400 13.5px/1.4 var(--v-font); color: var(--v-ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
body.vivu-visual .vivu-card__pricebox { margin-top: auto; padding: 12px 0 0; border-top: 1px solid var(--v-border); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
body.vivu-visual .vivu-card__from { font: 600 12px/1 var(--v-font); color: var(--v-ink-3); }
body.vivu-visual .vivu-card__amount { font: 800 22px/1.1 var(--v-font); color: var(--v-primary); font-variant-numeric: tabular-nums; }
body.vivu-visual .vivu-card__unit { grid-column: 1 / -1; font: 500 12.5px/1.3 var(--v-font); color: var(--v-ink-3); }
body.vivu-visual .vivu-card__child { grid-column: 1 / -1; font: 500 12.5px/1.3 var(--v-font); color: var(--v-ink-2); margin-top: 2px; }
body.vivu-visual .vivu-card__ctas { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 8px; }
body.vivu-visual .vivu-card__ctas .vivu-btn { min-height: 46px !important; }
body.vivu-visual .vivu-card__zalo { text-align: center; font: 700 14px/1.2 var(--v-font); color: var(--v-zalo); display: flex; align-items: center; justify-content: center; min-height: 40px; }
@media (min-width: 640px) { body.vivu-visual .vivu-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { body.vivu-visual .vivu-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } body.vivu-visual .vivu-card__title { font-size: 18px; } }

/* ---- Local Expert (photo-led) ------------------------------------------- */
.vivu-expert { padding: 40px 16px; background: var(--v-bg); }
.vivu-expert__in { max-width: var(--v-container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.vivu-expert__media { display: grid; grid-template-columns: 5fr 7fr; gap: 12px; align-items: end; }
.vivu-expert__media figure { margin: 0; }
.vivu-expert__media img { display: block; width: 100%; height: auto; border-radius: var(--v-r-card); object-fit: cover; box-shadow: var(--v-sh-1); }
.vivu-expert__founder img { aspect-ratio: 4 / 5; }
.vivu-expert__group img { aspect-ratio: 4 / 3; }
.vivu-expert__media figcaption { margin: 6px 2px 0; font: 500 12px/1.4 var(--v-font); color: var(--v-ink-3); }
.vivu-expert__proof { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.vivu-expert__proof li { position: relative; padding-left: 28px; font: 400 15px/1.45 var(--v-font); color: var(--v-ink-2); }
.vivu-expert__proof li strong { color: var(--v-ink); font-weight: 700; }
.vivu-expert__proof li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--v-primary); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5.1-5.1L12.7 5z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5.1-5.1L12.7 5z'/></svg>") center/contain no-repeat; }
.vivu-expert__ctas { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
@media (min-width: 850px) {
  .vivu-expert { padding: 72px 24px; }
  .vivu-expert__in { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .vivu-expert__copy { order: 0; }
  .vivu-expert__media { order: 1; }
}

/* ---- Không cho JS "reveal" của trang chủ (WPCode: section → .vv-reveal opacity 0) làm ẩn khối plugin — không animation vào trang */
body.vivu-visual .vivu-v2.vv-reveal, body.vivu-visual .vivu-expert.vv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- Header (Flatsome): nút "Nhận giá" desktop (JS chèn, chỉ ≥850) --------- */
body.vivu-visual #header .header-nav-main > li.vivu-hdr-cta { display: none; } /* specificity > Flatsome .nav>li */
@media (min-width: 1100px) {
  body.vivu-visual #header .header-nav-main > li.vivu-hdr-cta { display: flex; align-items: center; margin-left: 6px; }
  body.vivu-visual .vivu-hdr-cta a.vivu-btn { min-height: 38px !important; padding: 0 16px !important; font-size: 13.5px !important; border-radius: 999px !important; white-space: nowrap; }
  /* menu 7 mục + nút: thu khoảng cách mục để không xuống dòng (Flatsome nav-spacing-large ≈ 20px mỗi bên) */
  body.vivu-visual #header .header-nav-main.nav-right { flex-wrap: nowrap; }
  body.vivu-visual #header .header-nav-main.nav-spacing-large > li > a { padding-left: 10px !important; padding-right: 10px !important; font-size: 14px !important; }
}

/* ---- Nhịp nền các section cũ trên trang chủ (id thật, đo 13/09/2026) ----- */
/* hero (gradient nhạt) → cards (trắng) → Local Expert (trắng, ảnh thật) → "Trọn gói" (soft) → Dịch vụ Vinpearl (trắng)
   → [Vì sao khách chọn: ẩn, đã thay bằng Local Expert] → Đối tác đặt được (trắng) → Reviews (soft) → 3 bước (trắng)
   → Lên kế hoạch (brand-dark, 1 điểm nhấn tối duy nhất) → Điểm đến (trắng) → Tin tức (soft) → Theo dõi → footer */
body.vivu-visual-home #section_2117865687 { display: none !important; }
body.vivu-visual-home .vv-tg { background: var(--v-surface) !important; border-top: 0 !important; padding: 48px 0 !important; }
body.vivu-visual-home .vv-tg__lead { font: 400 16px/1.55 var(--v-font) !important; color: var(--v-ink-2) !important; }
body.vivu-visual-home .vv-tg__c { border: 0 !important; border-radius: var(--v-r-card) !important; box-shadow: var(--v-sh-1); padding: 22px 24px !important; }
body.vivu-visual-home .vv-tg__c h3 { font: 700 17px/1.35 var(--v-font) !important; color: var(--v-primary) !important; }
body.vivu-visual-home #section_1818790736 { background: var(--v-surface) !important; padding-top: 48px !important; padding-bottom: 48px !important; }
body.vivu-visual-home #section_332170747 { background: var(--v-brand-dark) !important; color: #fff; }
body.vivu-visual-home #section_332170747 h2, body.vivu-visual-home #section_332170747 p, body.vivu-visual-home #section_332170747 li { color: #fff !important; }
body.vivu-visual-home #section_332170747 .bg { opacity: .18; }
body.vivu-visual-home #section_332170747 .img-inner img { border-radius: var(--v-r-card); box-shadow: var(--v-sh-2); width: 100%; height: auto; }
body.vivu-visual-home #section_332170747 .img-inner.dark::after { display: none; } /* Flatsome .dark overlay không cần trên ảnh thật */
body.vivu-visual-home #section_226927514 { background: var(--v-surface) !important; }
body.vivu-visual-home #section_226927514 > .bg { background-color: transparent !important; }
/* H2 các section cũ: cùng thang chữ, bỏ CAPS (trừ section tối) */
body.vivu-visual-home section.section h2, body.vivu-visual-home .vv-tg h2 { font-family: var(--v-font) !important; font-weight: 800 !important; font-size: 26px !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: -.01em; color: var(--v-primary) !important; }
body.vivu-visual-home section.section h2 strong { font-weight: 800; }
body.vivu-visual-home #section_1133669554 h2 { color: #fff !important; } /* nền gradient xanh của theme */
@media (min-width: 850px) { body.vivu-visual-home section.section h2, body.vivu-visual-home .vv-tg h2 { font-size: 34px !important; } body.vivu-visual-home .vv-tg { padding: 72px 0 !important; } }
/* Dịch vụ Vinpearl: chip icon đồng nhất */
body.vivu-visual-home #section_967456296 .icon-box.item-services { background: #fff; border: 1px solid var(--v-border); border-radius: 14px; padding: 14px 10px; transition: border-color .15s, box-shadow .15s; }
body.vivu-visual-home #section_967456296 .icon-box.item-services:hover { border-color: var(--v-primary); box-shadow: var(--v-sh-1); }
body.vivu-visual-home #section_967456296 .icon-box.item-services h3, body.vivu-visual-home #section_967456296 .icon-box.item-services h4 { font: 700 14px/1.3 var(--v-font) !important; color: var(--v-primary) !important; }
/* Đối tác đặt được: ô logo 3:2 đồng nhất, logo contain */
body.vivu-visual-home #section_257516122 .gallery-box { background: #fff; border: 1px solid var(--v-border); border-radius: var(--v-r-img); overflow: hidden; }
body.vivu-visual-home #section_257516122 .gallery-box .box-image { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 12px; }
body.vivu-visual-home #section_257516122 .gallery-box .box-image img { max-height: 56px !important; width: auto !important; object-fit: contain; }
body.vivu-visual-home #section_257516122 .gallery-box .overlay { display: none; }
/* "Đi ba bước là xong": số bước nổi */
.vivu-step { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; background: var(--v-primary); color: #fff; font: 800 18px/1 var(--v-font); vertical-align: middle; }
body.vivu-visual-home #section_1847319252 .icon-box-text h3 { font: 700 17px/1.35 var(--v-font) !important; color: var(--v-primary) !important; }
/* Reviews (Trustindex): font/màu về token + nút Google */
body.vivu-visual-home #section_1818790736 .ti-widget, body.vivu-visual-home #section_1818790736 .ti-widget * { font-family: var(--v-font) !important; }
body.vivu-visual-home #section_1818790736 .ti-review-item, body.vivu-visual-home #section_1818790736 .ti-widget-container .ti-review-content { border-radius: var(--v-r-card) !important; }
.vivu-reviews__cta { margin: 20px auto 0 !important; display: inline-flex !important; }
body.vivu-visual-home #section_1818790736 .section-content { text-align: center; }
/* Điểm đến yêu thích: lưới ảnh 3:4 đồng nhất (2 cột mobile, 3 cột từ 640) */
body.vivu-visual-home #section_1480742586 .destination-favourite { border-radius: var(--v-r-img); overflow: hidden; }
body.vivu-visual-home #section_1480742586 .destination-favourite .image-cover { padding-top: 133.333% !important; }
body.vivu-visual-home #section_1480742586 .destination-favourite .box-text h4 { font: 700 17px/1.3 var(--v-font); margin: 0 0 4px; }
body.vivu-visual-home #section_1480742586 .destination-favourite .box-text p { font: 400 13px/1.4 var(--v-font); }
@media (max-width: 639px) {
  body.vivu-visual-home #section_1480742586 .row > .col.small-12.large-4 { flex-basis: 50%; max-width: 50%; padding: 0 6px 12px; }
  body.vivu-visual-home #section_1480742586 .destination-favourite .box-text h4 { font-size: 14px; }
}
/* Tin tức: card 4:3 trắng, bo 16, không divider */
body.vivu-visual-home #section_226927514 .box-blog-post { background: #fff; border-radius: var(--v-r-card); overflow: hidden; box-shadow: var(--v-sh-1); }
body.vivu-visual-home #section_226927514 .box-blog-post .image-cover { padding-top: 75% !important; }
body.vivu-visual-home #section_226927514 .box-blog-post .box-text { padding: 14px 16px 16px; }
body.vivu-visual-home #section_226927514 .box-blog-post .post-title { font: 700 16px/1.35 var(--v-font); color: var(--v-ink); }
body.vivu-visual-home #section_226927514 .box-blog-post .is-divider { display: none; }
/* Section padding chuẩn 40 · 64 */
body.vivu-visual-home section.section.pb-0 { padding-top: 40px !important; padding-bottom: 40px !important; }
@media (min-width: 850px) { body.vivu-visual-home section.section.pb-0 { padding-top: 64px !important; padding-bottom: 64px !important; } }

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) { body.vivu-visual * { transition: none !important; } }

/* P1 gate: sản phẩm draft_catalog */
.vivu-card__badge--draft { background: #fff3cd !important; color: #6b4d00 !important; border: 1px solid #f1c27d; }
.vivu-wizard__card--draft .vivu-wizard__meta::after { content: ' · đang cập nhật nội dung'; color: #9a6b00; }