/* BIVACO Mẫu 13 V66 — loaded last in to win old builder rules. */ /* Main title on content/service landing pages. */ html body.agency-theme.ai-page--content .ai-hero .ai-hero__copy h1, html body.agency-theme.ai-page--services .ai-hero .ai-hero__copy h1, html body.agency-theme.ai-page--service-detail .ai-hero .ai-hero__copy h1 { font-size: 32px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.02em !important; } /* Every Page Builder section title on inner pages, regardless of template key. */ html body.agency-theme .ai-builder-wrap .pbx-schema .pbx-heading > h2, html body.agency-theme .ai-builder-wrap .pbt .pbx-heading > h2, html body.agency-theme .ai-builder-wrap .customer-list-title { font-size: 28px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -.02em !important; } /* A Page Builder hero inserted inside a service/content page. */ html body.agency-theme .ai-builder-wrap .pbx-hero.pbx-schema h1 { font-size: 32px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.025em !important; } /* Per-page hero colors managed from Admin > Static pages > Edit. */ html body.agency-theme .ai-hero.ai-hero--custom-style { background: linear-gradient(110deg, var(--ai-hero-bg-start), var(--ai-hero-bg-end)) !important; } html body.agency-theme .ai-hero.ai-hero--light.ai-hero--with-image::before { background: linear-gradient(90deg, rgba(248,250,252,.98) 0%, rgba(248,250,252,.9) 48%, rgba(248,250,252,.2) 100%) !important; } html body.agency-theme .ai-hero.ai-hero--dark.ai-hero--with-image::before { background: linear-gradient(90deg,rgba(8,18,37,.92),rgba(8,18,37,.7)) !important; } html body.agency-theme .ai-hero.ai-hero--custom-style.ai-hero--with-image::before { background: linear-gradient(90deg, var(--ai-hero-overlay-strong) 0%, var(--ai-hero-overlay-middle) 48%, var(--ai-hero-overlay-soft) 100%) !important; } /* Banner with an image follows the actual image ratio on desktop. */ html body.agency-theme .ai-hero.ai-hero--with-image { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; padding: 0 !important; } html body.agency-theme .ai-hero.ai-hero--with-image::before { z-index: 1 !important; } html body.agency-theme .ai-hero.ai-hero--with-image .ai-hero__media { grid-area: 1 / 1 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important; } html body.agency-theme .ai-hero.ai-hero--with-image .ai-hero__inner { grid-area: 1 / 1 !important; position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding-top: 34px !important; padding-bottom: 34px !important; } /* Without an image, keep only the height required by the text. */ html body.agency-theme .ai-hero:not(.ai-hero--with-image) { min-height: 0 !important; padding: 30px 0 40px !important; } html body.agency-theme .ai-hero:not(.ai-hero--with-image) .ai-breadcrumbs { margin-bottom: 20px !important; } html body.agency-theme .ai-hero.ai-hero--custom-style .ai-hero__copy h1 { color: var(--ai-hero-title-color) !important; } html body.agency-theme .ai-hero.ai-hero--custom-style .ai-hero__copy > p { color: var(--ai-hero-description-color) !important; } html body.agency-theme .ai-hero.ai-hero--custom-style .ai-breadcrumbs { color: var(--ai-hero-breadcrumb-color) !important; } html body.agency-theme .ai-hero.ai-hero--custom-style .ai-kicker { background: none !important; color: var(--ai-hero-kicker-color) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; } /* Pricing CTA: use the normal button scale and avoid the overly heavy text. */ html body.agency-theme .ai-builder-wrap .pbx-cards.v-pricing .pbx-pricing-card__button { font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; white-space: nowrap !important; text-align: center !important; min-height: 42px !important; padding: 11px 24px !important; } @media (max-width: 900px) { html body.agency-theme .ai-hero.ai-hero--with-image .ai-hero__inner { padding-top: 24px !important; padding-bottom: 24px !important; } html body.agency-theme .ai-hero:not(.ai-hero--with-image) { padding: 24px 0 32px !important; } } @media (max-width: 767px) { html body.agency-theme.ai-page--content .ai-hero .ai-hero__copy h1, html body.agency-theme.ai-page--services .ai-hero .ai-hero__copy h1, html body.agency-theme.ai-page--service-detail .ai-hero .ai-hero__copy h1, html body.agency-theme .ai-builder-wrap .pbx-hero.pbx-schema h1 { font-size: 27px !important; } html body.agency-theme .ai-builder-wrap .pbx-schema .pbx-heading > h2, html body.agency-theme .ai-builder-wrap .pbt .pbx-heading > h2, html body.agency-theme .ai-builder-wrap .customer-list-title { font-size: 24px !important; } } /* ========================================================= BIVACO V67 - GLOBAL PAGE BUILDER CTA 2026-09-20 Nền sáng: tím -> xanh Nền xanh: cam ========================================================= */ /* CARD PRICING NỀN TRẮNG */ html body.agency-theme .ai-builder-wrap .pbx-cards.v-pricing .pbx-pricing-card:not(.is-featured) .pbx-pricing-card__button { position: relative !important; overflow: hidden !important; color: #fff !important; border-color: transparent !important; background: linear-gradient( 105deg, #7147f5 0%, #595ee9 44%, #2f91ed 100% ) !important; background-image: linear-gradient( 105deg, #7147f5 0%, #595ee9 44%, #2f91ed 100% ) !important; background-color: #7147f5 !important; background-size: 200% 200% !important; box-shadow: 0 10px 27px rgba(76,80,221,.25), inset 0 1px 0 rgba(255,255,255,.24) !important; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important; animation: bivacoV67Flow 5s ease infinite !important; } /* CARD NỔI BẬT NỀN XANH */ html body.agency-theme .ai-builder-wrap .pbx-cards.v-pricing .pbx-pricing-card.is-featured .pbx-pricing-card__button { position: relative !important; overflow: hidden !important; color: #fff !important; border-color: rgba(255,255,255,.30) !important; background: linear-gradient( 105deg, #ff6717 0%, #ff8b22 48%, #ffb536 100% ) !important; background-image: linear-gradient( 105deg, #ff6717 0%, #ff8b22 48%, #ffb536 100% ) !important; background-color: #ff6717 !important; background-size: 200% 200% !important; box-shadow: 0 12px 30px rgba(255,103,23,.40), inset 0 1px 0 rgba(255,255,255,.30) !important; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important; animation: bivacoV67Flow 5s ease infinite !important; } /* NÚT PRIMARY PAGE BUILDER TRÊN NỀN SÁNG */ html body.agency-theme .ai-builder-wrap .pbx-btn.primary { position: relative !important; overflow: hidden !important; color: #fff !important; border-color: transparent !important; background: linear-gradient( 105deg, #7147f5 0%, #595ee9 44%, #2f91ed 100% ) !important; background-size: 200% 200% !important; box-shadow: 0 10px 27px rgba(76,80,221,.25) !important; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important; animation: bivacoV67Flow 5s ease infinite !important; } /* PAGE BUILDER NỀN TỐI / CHỮ TRẮNG -> CAM */ html body.agency-theme .ai-builder-wrap section.pbx[style*="--pbx-title-color:#ffffff"] .pbx-btn.primary, html body.agency-theme .ai-builder-wrap section.pbx[style*="--pbx-text-color:#ffffff"] .pbx-btn.primary { color: #fff !important; border-color: rgba(255,255,255,.30) !important; background: linear-gradient( 105deg, #ff6717 0%, #ff8b22 48%, #ffb536 100% ) !important; background-size: 200% 200% !important; box-shadow: 0 12px 30px rgba(255,103,23,.36) !important; } /* CTA XANH CUỐI TRANG */ html body.agency-theme section.ai-cta .ai-btn--primary, html body.agency-theme section.ai-cta .ai-btn--ghost { color: #fff !important; border-color: rgba(255,255,255,.30) !important; background: linear-gradient( 105deg, #ff6717 0%, #ff8b22 48%, #ffb536 100% ) !important; background-size: 200% 200% !important; box-shadow: 0 12px 30px rgba(255,103,23,.36) !important; animation: bivacoV67Flow 5s ease infinite !important; } /* ÁNH SÁNG LƯỚT */ html body.agency-theme .ai-builder-wrap .pbx-pricing-card__button::after, html body.agency-theme .ai-builder-wrap .pbx-btn.primary::after, html body.agency-theme section.ai-cta .ai-btn::after { content: ""; position: absolute; top: -45%; bottom: -45%; left: -50%; width: 30%; pointer-events: none; transform: skewX(-22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.50), transparent ); opacity: 0; } /* HOVER */ html body.agency-theme .ai-builder-wrap .pbx-pricing-card__button:hover, html body.agency-theme .ai-builder-wrap .pbx-btn.primary:hover, html body.agency-theme section.ai-cta .ai-btn:hover { color: #fff !important; transform: translateY(-3px) scale(1.012) !important; filter: brightness(1.05) saturate(1.08) !important; } html body.agency-theme .ai-builder-wrap .pbx-pricing-card__button:hover::after, html body.agency-theme .ai-builder-wrap .pbx-btn.primary:hover::after, html body.agency-theme section.ai-cta .ai-btn:hover::after { opacity: 1; animation: bivacoV67Shine .72s ease forwards; } /* CARD TRẮNG HOVER */ html body.agency-theme .ai-builder-wrap .pbx-pricing-card:not(.is-featured) .pbx-pricing-card__button:hover { box-shadow: 0 17px 37px rgba(76,80,221,.35), 0 5px 15px rgba(47,145,237,.20) !important; } /* CARD XANH HOVER */ html body.agency-theme .ai-builder-wrap .pbx-pricing-card.is-featured .pbx-pricing-card__button:hover { box-shadow: 0 18px 40px rgba(255,103,23,.50), 0 5px 16px rgba(255,181,54,.28) !important; } @keyframes bivacoV67Flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes bivacoV67Shine { 0% { left: -50%; opacity: 0; } 20% { opacity: .9; } 100% { left: 125%; opacity: 0; } } /* ========================================================= BIVACO V68 - CTA COLOR TUNING 2026-09-20 Xanh cyan theo mẫu + Gold nhạt theo mẫu ========================================================= */ /* ========================================================= NÚT XANH - NỀN SÁNG Cyan -> Sky Blue ========================================================= */ html body.agency-theme .ai-builder-wrap .pbx-cards.v-pricing .pbx-pricing-card:not(.is-featured) .pbx-pricing-card__button, html body.agency-theme .ai-builder-wrap .pbx-btn.primary { color:#ffffff !important; background: linear-gradient( 105deg, #66d4e7 0%, #25bfe7 48%, #1299ee 100% ) !important; background-image: linear-gradient( 105deg, #66d4e7 0%, #25bfe7 48%, #1299ee 100% ) !important; background-color:#25bfe7 !important; border-color: rgba(255,255,255,.30) !important; box-shadow: 0 10px 27px rgba(18,153,238,.22), inset 0 1px 0 rgba(255,255,255,.34) !important; } /* Hover xanh */ html body.agency-theme .ai-builder-wrap .pbx-cards.v-pricing .pbx-pricing-card:not(.is-featured) .pbx-pricing-card__button:hover, html body.agency-theme .ai-builder-wrap .pbx-btn.primary:hover { color:#ffffff !important; box-shadow: 0 17px 38px rgba(18,153,238,.32), 0 5px 16px rgba(37,191,231,.22), inset 0 1px 0 rgba(255,255,255,.38) !important; } /* ========================================================= NÚT GOLD NHẠT - TRÊN NỀN XANH / NỀN TỐI Gold đậm -> sáng giữa -> gold đậm ========================================================= */ html body.agency-theme .ai-builder-wrap .pbx-cards.v-pricing .pbx-pricing-card.is-featured .pbx-pricing-card__button, html body.agency-theme .ai-builder-wrap section.pbx[style*="--pbx-title-color:#ffffff"] .pbx-btn.primary, html body.agency-theme .ai-builder-wrap section.pbx[style*="--pbx-text-color:#ffffff"] .pbx-btn.primary, html body.agency-theme section.ai-cta .ai-btn--primary, html body.agency-theme section.ai-cta .ai-btn--ghost { color:#171717 !important; background: linear-gradient( 100deg, #c38c26 0%, #ddb04c 27%, #ffe59d 50%, #ddb04c 73%, #c38c26 100% ) !important; background-image: linear-gradient( 100deg, #c38c26 0%, #ddb04c 27%, #ffe59d 50%, #ddb04c 73%, #c38c26 100% ) !important; background-color:#ddb04c !important; border-color: rgba(255,235,176,.45) !important; box-shadow: 0 10px 28px rgba(195,140,38,.27), inset 0 1px 0 rgba(255,255,255,.42) !important; } /* Hover gold */ html body.agency-theme .ai-builder-wrap .pbx-cards.v-pricing .pbx-pricing-card.is-featured .pbx-pricing-card__button:hover, html body.agency-theme .ai-builder-wrap section.pbx[style*="--pbx-title-color:#ffffff"] .pbx-btn.primary:hover, html body.agency-theme .ai-builder-wrap section.pbx[style*="--pbx-text-color:#ffffff"] .pbx-btn.primary:hover, html body.agency-theme section.ai-cta .ai-btn:hover { color:#171717 !important; box-shadow: 0 17px 38px rgba(195,140,38,.38), 0 5px 16px rgba(255,229,157,.23), inset 0 1px 0 rgba(255,255,255,.48) !important; }