/* =============================================================================
 * OneOffice — DESIGN SYSTEM  (Wonderland Việt Nam)
 * -----------------------------------------------------------------------------
 * Nguồn chân lý DUY NHẤT cho: color tokens, typography scale, spacing,
 * radius, shadow, button / form / card / section primitives.
 *
 * Bảng màu: teal logo #129C94 (primary) · navy #063443 (dark) ·
 *           blue logo #1571B5 (secondary) · cyan #6FE4ED (accent).
 *
 * Thứ tự load: main → category-page → single-page → sprint1 → [FILE NÀY]
 *              → (home-v2 / vptg-v2 / single-product-v2 nạp SAU, ưu tiên 30).
 *   ⇒ File này override layer cũ + Flatsome/Woo/CF7, NHƯNG không đụng V2.
 *
 * ROLLBACK: comment dòng enqueue 'oneoffice-design-system' trong functions.php.
 * ========================================================================== */

/* =============================================================
 * 1. DESIGN TOKENS
 * ============================================================= */
:root {
    /* — Brand: teal logo Wonderland — */
    --primary:        #129C94;   /* teal logo (canonical) */
    --primary-d:      #0C7B73;   /* hover / gradient end  */
    --primary-l:      #E6F5F3;   /* tint nền nhạt         */
    --primary-rgb:    18, 156, 148;

    /* — Secondary: blue logo — */
    --secondary:      #1571B5;
    --secondary-d:    #115E96;

    /* — Accent: cyan — */
    --accent:         #6FE4ED;
    --accent-soft:    #E6F6F8;

    /* — Dark / navy — */
    --dark:           #063443;
    --dark-2:         #0A4A5D;
    --dark-rgb:       6, 52, 67;

    /* — Surfaces — */
    --background:     #F6FAFB;
    --surface:        #FFFFFF;
    --surface-alt:    #EDF4F5;

    /* — Text — */
    --text-main:      #172B35;
    --text-body:      #2C3A45;
    --text-muted:     #5B6C76;
    --text-inverse:   #FFFFFF;

    /* — Lines / borders — */
    --border:         #E1E8EC;
    --border-strong:  #CDD8DE;

    /* — Special — */
    --gold:           #C9A24B;
    --gold-hover:     #B68E3A;
    --danger:         #E25563;
    --success:        #1B9C6E;

    /* — Shadows (navy-tint, cao cấp) — */
    --shadow:         rgba(var(--dark-rgb), .12);
    --sh-sm:          0 2px 8px rgba(var(--dark-rgb), .06);
    --sh:             0 12px 40px rgba(var(--dark-rgb), .10);
    --sh-lg:          0 20px 60px rgba(var(--dark-rgb), .16);
    --sh-primary:     0 8px 24px rgba(var(--primary-rgb), .30);

    /* — Radius scale — */
    --r-sm:           8px;
    --r:              14px;
    --r-lg:           20px;
    --r-pill:         999px;

    /* — Spacing scale — */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
    --section-pad:    clamp(56px, 8vw, 96px);
    --container:      1200px;

    /* — Type scale — */
    --fs-h1:  clamp(28px, 4vw, 44px);
    --fs-h2:  clamp(24px, 3vw, 34px);
    --fs-h3:  22px;
    --fs-h4:  18px;
    --fs-body: 16px;
    --fs-sm:  14px;
    --fs-cap: 13px;
    --lh-heading: 1.2;
    --lh-body:    1.65;

    /* — Motion — */
    --fast: .2s ease;
    --base: .32s cubic-bezier(.2, .7, .2, 1);

    /* — Re-point token LEGACY (sprint1 --oo-*) sang bảng màu mới.
     *    File này load SAU sprint1.css nên các :root dưới đây THẮNG. — */
    --oo-primary:   #129C94;
    --oo-primary-d: #0C7B73;
    --oo-accent:    #1571B5;   /* bỏ hồng #ef6594. Badge "Quan tâm" chữ trắng cần
                                  nền tương phản → dùng blue logo (cyan #6FE4ED quá nhạt).
                                  Soft accent cyan dùng qua --accent. */
    --oo-text:      #172B35;
    --oo-muted:     #5B6C76;
    --oo-bg:        #F6FAFB;
    --oo-radius:    8px;        /* 6px → 8px cho đồng bộ scale */
    --oo-shadow:    0 12px 40px rgba(6, 52, 67, .10);

    /* Call Now Button plugin set --cnb-theme-color=#00a1b2 (cũ) qua inline <style>.
       !important để thắng inline đó → nút gọi nổi + CTA desktop về teal logo. */
    --cnb-theme-color: #129C94 !important;
}

/* =============================================================
 * 2. BASE TYPOGRAPHY  (nhẹ tay — không !important, để V2/Flatsome override khi cần)
 * ============================================================= */
body {
    color: var(--text-body);
    line-height: var(--lh-body);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    line-height: var(--lh-heading);
    font-weight: 700;
}
.oo-muted   { color: var(--text-muted); }
.oo-caption { font-size: var(--fs-cap); color: var(--text-muted); }

/* Link trong NỘI DUNG bài viết / trang (không đụng menu, footer, breadcrumb) */
.entry-content a:not(.button):not(.oo-btn),
.post-content a:not(.button):not(.oo-btn),
.page-content a:not(.button):not(.oo-btn) {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--fast);
}
.entry-content a:not(.button):not(.oo-btn):hover,
.post-content a:not(.button):not(.oo-btn):hover,
.page-content a:not(.button):not(.oo-btn):hover {
    color: var(--primary-d);
}

/* =============================================================
 * 3. BUTTON PRIMITIVES
 *    - .oo-btn--*  : class tiện ích dùng cho markup mới.
 *    - Re-skin các CTA tuỳ biến sẵn có (.btn-phone/.btn-trang) cho ĐỒNG BỘ.
 *    - KHÔNG đụng .hv2-btn / .vp2-btn / .sp2-btn (V2 nạp sau, giữ nguyên).
 * ============================================================= */
.oo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 24px;
    border-radius: var(--r-sm);
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1;
    text-decoration: none; white-space: nowrap;
    border: 1.5px solid transparent; cursor: pointer;
    transition: transform var(--fast), box-shadow var(--fast), background var(--fast), color var(--fast), border-color var(--fast);
}
.oo-btn--sm { padding: 10px 18px; font-size: var(--fs-cap); }
.oo-btn--lg { padding: 16px 30px; font-size: var(--fs-body); }

.oo-btn--primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
    color: var(--text-inverse); box-shadow: var(--sh-primary);
}
.oo-btn--primary:hover { transform: translateY(-2px); color: var(--text-inverse); box-shadow: 0 12px 28px rgba(var(--primary-rgb), .42); }

.oo-btn--secondary { background: var(--secondary); color: var(--text-inverse); }
.oo-btn--secondary:hover { background: var(--secondary-d); color: var(--text-inverse); transform: translateY(-2px); }

.oo-btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.oo-btn--outline:hover { background: var(--primary); color: var(--text-inverse); }

.oo-btn--gold { background: var(--gold); color: var(--dark); }
.oo-btn--gold:hover { background: var(--gold-hover); color: var(--dark); transform: translateY(-2px); }

.oo-btn[disabled], .oo-btn--disabled { background: var(--border); color: var(--text-muted); box-shadow: none; cursor: not-allowed; transform: none; }

/* — Re-skin CTA tuỳ biến đã có trong main.css (header + block tiết kiệm) — */
a.btn-phone, .btn-phone {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-primary);
    transition: transform var(--fast), box-shadow var(--fast);
}
a.btn-phone:hover, .btn-phone:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--primary-rgb), .42); color: #fff; }
a.btn-trang, .btn-trang {
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border) !important;
    color: var(--primary) !important;
    transition: border-color var(--fast), color var(--fast);
}
a.btn-trang:hover, .btn-trang:hover { border-color: var(--primary) !important; }

/* — CF7 submit + Woo primary action → primary button đồng bộ — */
.wpcf7-submit,
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt,
.single_add_to_cart_button {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%) !important;
    color: var(--text-inverse) !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    font-weight: 600 !important;
    box-shadow: var(--sh-primary);
    transition: transform var(--fast), box-shadow var(--fast) !important;
}
.wpcf7-submit:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--primary-rgb), .42) !important; }

/* =============================================================
 * 4. FORM PRIMITIVES  (CF7, comment, Woo, search)
 * ============================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"], input[type="date"],
select, textarea,
.wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]) {
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--text-main);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    transition: border-color var(--fast), box-shadow var(--fast);
}
input:focus, select:focus, textarea:focus,
.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
::placeholder { color: var(--text-muted); opacity: 1; }

/* trạng thái lỗi/thành công CF7 */
.wpcf7-not-valid { border-color: var(--danger) !important; }
.wpcf7-not-valid-tip { color: var(--danger); font-size: var(--fs-cap); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--success); color: var(--success); }

/* =============================================================
 * 5. CARD PRIMITIVES  (opt-in — dùng cho markup mới, không ép layout cũ)
 * ============================================================= */
.oo-card {
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform var(--base), box-shadow var(--base);
}
.oo-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.oo-card--bordered { box-shadow: none; border: 1px solid var(--border); }
.oo-card--flat { box-shadow: none; background: var(--surface-alt); }
.oo-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.oo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--base); }
.oo-card:hover .oo-card__media img { transform: scale(1.04); }
.oo-card__body { padding: var(--sp-5); }

/* =============================================================
 * 6. SECTION PRIMITIVES  (opt-in)
 * ============================================================= */
.oo-section        { padding: var(--section-pad) 0; }
.oo-section--light { background: var(--surface); }
.oo-section--soft  { background: var(--surface-alt); }
.oo-section--tint  { background: var(--primary-l); }
.oo-section--dark  { background: var(--dark); color: var(--text-inverse); }
.oo-section--dark h1, .oo-section--dark h2, .oo-section--dark h3 { color: var(--text-inverse); }
.oo-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }

/* =============================================================
 * 7. IMAGE TREATMENT (opt-in helpers)
 * ============================================================= */
.oo-img       { border-radius: var(--r); overflow: hidden; }
.oo-img img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.oo-img--sm   { border-radius: var(--r-sm); }
.oo-zoom      { overflow: hidden; }
.oo-zoom img  { transition: transform var(--base); }
.oo-zoom:hover img { transform: scale(1.04); }

/* =============================================================
 * 8. FOCUS / ACCESSIBILITY  (đồng bộ màu mới)
 * ============================================================= */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* =============================================================
 * 9. GRADIENT BRAND + MOTION
 *    Logo Wonderland = gradient teal→cyan→blue ⇒ UI cũng dùng gradient.
 *    Tách cuối file để dễ bật/tắt. Tôn trọng prefers-reduced-motion.
 *    Áp cho CẢ nút V2 (dùng !important — thắng dù nạp trước, không sửa file V2).
 * ============================================================= */
:root {
    --grad-brand:      linear-gradient(120deg, #16A085 0%, #129C94 38%, #1486A8 68%, #1571B5 100%);
    --grad-brand-soft: linear-gradient(120deg, #E8F6F2 0%, #E6F1F8 100%);
    --grad-dark:       linear-gradient(120deg, #063443 0%, #0A4A5D 55%, #12597F 100%);
}

/* — Primary buttons (global + V2) → gradient logo + “sweep” khi hover — */
.oo-btn--primary,
a.btn-phone, .btn-phone,
.btn.btn-search, .btn-search,
.wpcf7-submit,
.single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt,
.home-v2 .hv2-btn--primary,
.vptg-v2 .vp2-btn--primary,
body.single-product .sp2-sidebar-btn--quote,
body.single-product .sp2-cta__btn--primary {
    background-image: var(--grad-brand) !important;
    background-size: 220% auto !important;
    background-position: 0 50% !important;
    border: none !important;
    transition: background-position .55s ease, transform var(--fast), box-shadow var(--fast) !important;
}
.oo-btn--primary:hover,
a.btn-phone:hover, .btn-phone:hover,
.btn.btn-search:hover, .btn-search:hover,
.wpcf7-submit:hover,
.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.home-v2 .hv2-btn--primary:hover,
.vptg-v2 .vp2-btn--primary:hover,
body.single-product .sp2-sidebar-btn--quote:hover,
body.single-product .sp2-cta__btn--primary:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px);
}

/* — Gradient text cho heading nhấn (opt-in: thêm class .oo-grad-text) — */
.oo-grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    display: inline-block;
}

/* — Section tối premium → gradient navy→teal-blue — */
.oo-section--dark { background-image: var(--grad-dark); }

/* — Gạch chân gradient dưới tiêu đề section (opt-in: .oo-title-underline) — */
.oo-title-underline { position: relative; padding-bottom: 14px; }
.oo-title-underline::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 56px; height: 4px; border-radius: var(--r-pill);
    background: var(--grad-brand);
}

/* ---------- MOTION: reveal-on-scroll (global, an toàn) ---------- */
.oo-prereveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
.oo-prereveal.oo-in {
    opacity: 1; transform: none;
    transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
.oo-prereveal.oo-d1 { transition-delay: .07s; }
.oo-prereveal.oo-d2 { transition-delay: .14s; }
.oo-prereveal.oo-d3 { transition-delay: .21s; }
.oo-prereveal.oo-d4 { transition-delay: .28s; }

/* ---------- MOTION: hover life (card lift + image zoom) ---------- */
.oo-hover-card { transition: transform var(--base), box-shadow var(--base); }
.oo-hover-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.oo-zoom-img { overflow: hidden; }
.oo-zoom-img img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.oo-zoom-img:hover img { transform: scale(1.06); }

/* Woo/Flatsome card ảnh — zoom mượt khi hover (không ẩn gì) */
ul.products li.product .box-image,
.product-small .box-image { overflow: hidden; }
ul.products li.product .box-image img,
.product-small .box-image img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
ul.products li.product:hover .box-image img,
.product-small:hover .box-image img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .oo-prereveal { opacity: 1 !important; transform: none !important; }
    .oo-zoom-img img, .oo-hover-card,
    ul.products li.product .box-image img,
    .oo-btn--primary, .btn-phone { transition: none !important; }
}

/* =============================================================
 * 10. PASS 2 — POLISH cao cấp (depth · hero · micro · typography)
 *     Mức "tinh tế": nhẹ, sang, không màu mè. Tôn trọng reduced-motion.
 * ============================================================= */

/* 10a · Shadow nhiều lớp (mềm, premium) — nâng component dùng token */
:root {
    --sh-sm: 0 1px 2px rgba(6,52,67,.04), 0 3px 10px rgba(6,52,67,.05);
    --sh:    0 4px 12px rgba(6,52,67,.06), 0 14px 36px rgba(6,52,67,.10);
    --sh-lg: 0 8px 24px rgba(6,52,67,.10), 0 28px 64px rgba(6,52,67,.15);
}

/* 10b · Hero — Ken Burns rất nhẹ (pan dọc) cho cảm giác “sống” */
.hv2-hero, .vp2-hero {
    animation: oo-kenburns 30s ease-in-out infinite alternate;
}
@keyframes oo-kenburns {
    from { background-position: center 27%; }
    to   { background-position: center 33%; }
}

/* 10c · CTA cuối trang / section tối → gradient navy→teal-blue sang */
.hv2-final, .vp2-final, .oo-section--dark {
    background-image: var(--grad-dark) !important;
}

/* 10d · Số liệu nổi bật trên nền sáng → chữ gradient (reasons) */
.hv2-reasons__stat {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 10e · Micro — link nội dung: gạch chân “chạy” khi hover */
.entry-content a:not(.button):not(.oo-btn),
.post-content a:not(.button):not(.oo-btn),
.page-content a:not(.button):not(.oo-btn) {
    text-decoration: none;
    background-image: linear-gradient(var(--primary), var(--primary));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left 100%;
    padding-bottom: 2px;
    transition: background-size .35s cubic-bezier(.2,.7,.2,1), color var(--fast);
}
.entry-content a:not(.button):not(.oo-btn):hover,
.post-content a:not(.button):not(.oo-btn):hover,
.page-content a:not(.button):not(.oo-btn):hover {
    background-size: 100% 2px;
    color: var(--primary-d);
}

/* 10f · Micro — sticky header “kính mờ” khi cuộn (Flatsome .stuck) */
.header-wrapper.stuck,
.stuck .header-main,
#masthead.stuck .header-wrapper {
    background: rgba(255,255,255,.85) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 2px 14px rgba(6,52,67,.08) !important;
}

/* 10g · Typography — nhịp dọc cho nội dung bài viết/trang */
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { font-size: var(--fs-h2); margin-top: 1.7em; margin-bottom: .5em; }
.entry-content h3 { font-size: var(--fs-h3); margin-top: 1.4em; margin-bottom: .4em; }
.entry-content p, .entry-content li { line-height: var(--lh-body); }
.entry-content img { border-radius: var(--r-sm); }

/* 10h · giảm chuyển động nếu user yêu cầu */
@media (prefers-reduced-motion: reduce) {
    .hv2-hero, .vp2-hero { animation: none !important; }
}

/* =============================================================
 * 11. GRADIENT MAXIMALIST — mọi khối teal phẳng → gradient
 *     (theo yêu cầu: nút · nền · chữ nổi · hover đều gradient)
 *     Vẫn giữ chữ đọc rõ: gradient ở dải teal→blue đậm vừa.
 * ============================================================= */

/* 11a · NÚT nền đặc → gradient + sweep hover (phủ mọi loại nút) */
.button.primary, button.button.primary, a.button.primary,
.button.secondary, button.button.secondary,
.ux-search-submit, .btn-price-apply, input.submit,
.add_to_cart_button, .ajax_add_to_cart, .checkout-button,
.btn-care.active,
a.oo-desktop-cta__item, a.oo-desktop-cta__item--phone {
    background-image: var(--grad-brand) !important;
    background-color: transparent !important;
    background-size: 220% auto !important;
    background-position: 0 50% !important;
    color: #fff !important;
    border: none !important;
    transition: background-position .55s ease, transform var(--fast), box-shadow var(--fast) !important;
}
.button.primary:hover, .button.secondary:hover,
.ux-search-submit:hover, .btn-price-apply:hover, input.submit:hover,
.add_to_cart_button:hover, .checkout-button:hover,
.btn-care.active:hover, a.oo-desktop-cta__item:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px);
    color: #fff !important;
}

/* 11b · NỀN teal đặc (badge thông báo, thanh slider giá, chip) → gradient
   (KHÔNG gồm .count-care chung — xử lý riêng ở 11b-fix để số đếm inline không bị "bôi đen") */
.badge-inner, [data-text-bg="primary"],
.slider-track, .ui-slider .ui-slider-range, .noUi-connect,
.oo-badge, .cat-badge, .is-selected,
.list-filter .btn-filter.active, .building-item .tag,
.sp2-rank-badge {
    background-image: var(--grad-brand) !important;
    background-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: transparent !important;
}

/* 11b-fix · Badge "Quan tâm" — số đếm INLINE chỉ là chữ teal (KHÔNG bọc khối).
   Chỉ badge TRÒN trên icon mới giữ nền (chấm thông báo). */
.text-care .count-care, .care-note .count-care,
span.count-care.js-count-care, span.count-care.js-count-care-info {
    background: none !important;
    background-image: none !important;
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 700;
}
.icon-mobile-care .count-care {           /* chấm tròn thông báo trên icon */
    background: var(--secondary) !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* 11c · CHỮ teal nổi (giá, callout) → CHỮ gradient. Gồm cả CON ('$', /m2…)
   để không bị mất chữ. Chỉ áp nền sáng + chữ cỡ vừa/đậm → vẫn đọc rõ. */
.price, .price *, .meta .price, .meta .price *,
.building-item .price, .building-item .price *,
.sp2-price, .sp2-price *,
.single-product p.price, .single-product p.price *,
.sp2-contact-callout__link {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 11d · NÚT viền (outline) → hover đổ gradient + chữ trắng */
.button.is-outline:hover, button.button.is-outline:hover,
.btn-care:not(.active):hover, .sp2-sidebar-btn--form:hover,
.home-v2 .hv2-btn--outline:hover, .vptg-v2 .vp2-btn--outline:hover,
.oo-btn--outline:hover, a.btn-trang:hover {
    background-image: var(--grad-brand) !important;
    background-color: transparent !important;
    background-size: 220% auto !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: transparent !important;
}

/* =============================================================
 * 12. FULL-GRADIENT AT REST + FLOW ON HOVER  (+ phủ nốt V2)
 *     Sửa lỗi nút trông "teal đặc": dùng gradient ĐỐI XỨNG teal→blue→teal
 *     ở size 200% → thấy NGAY dải teal→xanh lúc nghỉ; hover thì CHẢY tiếp.
 * ============================================================= */
:root {
    --grad-flow: linear-gradient(120deg,
        #16A085 0%, #1486A8 25%, #1571B5 50%, #1486A8 75%, #16A085 100%);
}
@keyframes oo-grad-flow { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* 12a · Mọi nút gradient: ĐẦY ĐỦ teal→blue lúc nghỉ, CHẢY khi hover */
.oo-btn--primary, a.btn-phone, .btn-phone, .btn-search, .btn.btn-search,
.wpcf7-submit, .single_add_to_cart_button, .woocommerce button.button.alt,
.button.primary, button.button.primary, .button.secondary,
.ux-search-submit, .btn-price-apply, input.submit,
.add_to_cart_button, .ajax_add_to_cart, .checkout-button, .btn-care.active,
.home-v2 .hv2-btn--primary, .vptg-v2 .vp2-btn--primary,
a.oo-desktop-cta__item, a.oo-desktop-cta__item--phone,
body.single-product .sp2-sidebar-btn--quote, body.single-product .sp2-cta__btn--primary {
    background-image: var(--grad-flow) !important;
    background-size: 200% 100% !important;
    background-position: 0% 50% !important;
    background-repeat: repeat !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
}
.oo-btn--primary:hover, a.btn-phone:hover, .btn-phone:hover, .btn-search:hover,
.wpcf7-submit:hover, .single_add_to_cart_button:hover, .woocommerce button.button.alt:hover,
.button.primary:hover, .button.secondary:hover, .ux-search-submit:hover,
.btn-price-apply:hover, input.submit:hover, .add_to_cart_button:hover, .checkout-button:hover,
.btn-care.active:hover,
.home-v2 .hv2-btn--primary:hover, .vptg-v2 .vp2-btn--primary:hover,
a.oo-desktop-cta__item:hover,
body.single-product .sp2-sidebar-btn--quote:hover {
    animation: oo-grad-flow 2.4s linear infinite !important;
    transform: translateY(-2px);
}

/* 12b · Phủ nốt phần tử teal đặc trên trang V2 */
/* Eyebrow (QUY TRÌNH 6 BƯỚC, ĐỀ XUẤT…) → pill gradient chữ trắng */
.hv2-eyebrow, .vp2-eyebrow, .sp2-eyebrow {
    background-image: var(--grad-brand) !important;
    background-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Số bước 01–06 → chữ gradient */
.home-v2 .hv2-process__num, .vptg-v2 .vp2-process__num, .hv2-process__num {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* Dot testimonial active → gradient */
.hv2-testi__dot.is-active, .vp2-testi__dot.is-active {
    background-image: var(--grad-brand) !important;
    background-color: transparent !important;
}
/* Nút outline V2 lúc nghỉ → CHỮ gradient (hover đã đổ nền ở 11d) */
.home-v2 .hv2-btn--outline:not(:hover), .vptg-v2 .vp2-btn--outline:not(:hover) {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* 12c · Reveal-on-scroll RÕ hơn cho V2 (20px → 42px, mượt hơn) + STAGGER theo cụm */
.home-v2 .hv2-prereveal, .vptg-v2 .vp2-prereveal {
    transform: translateY(42px) !important;
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) !important;
}
.home-v2 .hv2-prereveal.is-in, .vptg-v2 .vp2-prereveal.is-in { transform: none !important; }
/* Cascade cho card trong lưới (process/buildings/team/reasons/areas) */
.hv2-prereveal:nth-child(2) { transition-delay: .08s !important; }
.hv2-prereveal:nth-child(3) { transition-delay: .16s !important; }
.hv2-prereveal:nth-child(4) { transition-delay: .24s !important; }
.hv2-prereveal:nth-child(5) { transition-delay: .32s !important; }
.hv2-prereveal:nth-child(6) { transition-delay: .40s !important; }

@media (prefers-reduced-motion: reduce) {
    .oo-btn--primary:hover, .btn-phone:hover, .home-v2 .hv2-btn--primary:hover { animation: none !important; }
}

/* =============================================================
 * 13. NÚT NỔI — sóng "rung rung" ĐỒNG BỘ cho cả 3 (messenger/zalo/phone)
 * ============================================================= */
.oo-desktop-cta__item                 { --oo-wave: rgba(18, 156, 148, .55); }  /* phone: teal */
.oo-desktop-cta__item--zalo           { --oo-wave: rgba(0, 104, 255, .55); }   /* zalo: blue */
.oo-desktop-cta__item--messenger      { --oo-wave: rgba(120, 70, 255, .5); }   /* messenger: tím-xanh */
.oo-desktop-cta__item--phone          { animation: none !important; }          /* bỏ pulse cũ riêng phone */

.oo-desktop-cta__item::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 var(--oo-wave);
    animation: oo-cta-wave 2s ease-out infinite;
    pointer-events: none; z-index: -1;
}
@keyframes oo-cta-wave {
    0%   { box-shadow: 0 0 0 0 var(--oo-wave); }
    70%  { box-shadow: 0 0 0 14px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
    .oo-desktop-cta__item::after { animation: none; }
}

/* 14. Load-more button (trang quận/tìm kiếm) */
.oo-loadmore-wrap { width: 100%; text-align: center; margin: 12px 0 44px; }
.oo-loadmore-btn  { min-width: 240px; }

/* =============================================================
 * 15. BLOCK "TIẾT KIỆM 95%" (#2261) — CTA cuối nhiều trang
 *     Nền gradient navy → teal · ảnh tròn góc + halo · text rõ · mobile gọn.
 * ============================================================= */
.oo-tk95 {
    position: relative;
    margin: 0;                            /* full-bleed section, không card */
    border-radius: 0;
    overflow: hidden;
    color: #fff;
    background-image:
      radial-gradient(1100px 520px at 90% 10%, rgba(18,156,148,.28), transparent 62%),
      radial-gradient(800px 420px at 10% 90%, rgba(21,113,181,.22), transparent 65%),
      linear-gradient(135deg, #063443 0%, #0A4A5D 55%, #0E5F7A 100%);
}
.oo-tk95__container {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px;
    align-items: center;
    padding: 96px 56px;                   /* thoáng hơn, cao hơn cho cân với ảnh */
    max-width: 1240px; margin: 0 auto;
}
.oo-tk95__eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 24px;
}
.oo-tk95__title {
    color: #fff;
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 22px;
    text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.oo-tk95__sub {
    color: rgba(255,255,255,.85);
    font-size: 16.5px;
    line-height: 1.75;
    margin: 0 0 36px;
    max-width: 540px;
}
.oo-tk95__bullets {
    list-style: none !important; padding: 0; margin: 0 0 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
}
.oo-tk95__bullets li {
    list-style-type: none !important;
    position: relative; padding-left: 36px;
    color: rgba(255,255,255,.92);
    font-size: 15.5px;
    line-height: 1.6;
}
.oo-tk95__bullets li::before {
    content: ""; position: absolute; left: 0; top: 2px;
    width: 22px; height: 22px;
    background: linear-gradient(135deg, #16A085 0%, #1486A8 50%, #1571B5 100%);
    border-radius: 50%;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/></svg>") no-repeat center / contain;
}
.oo-tk95__bullets li::after {
    content: ""; position: absolute; left: 5px; top: 7px;
    width: 12px; height: 12px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") no-repeat center / contain;
}
.oo-tk95__actions {
    display: flex; gap: 14px; flex-wrap: wrap;
    max-width: 520px;
}
.oo-tk95__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 26px;
    border-radius: 12px;
    font-size: 15px; font-weight: 700; line-height: 1;
    text-decoration: none !important;
    border: none; cursor: pointer; font-family: inherit;
    white-space: nowrap;
    transition: transform var(--fast), box-shadow var(--fast), background var(--fast), color var(--fast);
    flex: 1;
    min-width: 200px;
}
.oo-tk95__btn svg { flex-shrink: 0; }
.oo-tk95__btn--primary {
    background: linear-gradient(120deg, #16A085 0%, #1486A8 50%, #1571B5 100%);
    background-size: 200% 100%;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(18,156,148,.40);
}
.oo-tk95__btn--primary:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 14px 32px rgba(18,156,148,.55);
}
.oo-tk95__btn--ghost {
    background: rgba(255,255,255,.10);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.50);
    backdrop-filter: blur(6px);
}
.oo-tk95__btn--ghost:hover {
    background: #fff;
    color: var(--dark) !important;
    border-color: #fff;
    transform: translateY(-2px);
}

.oo-tk95__media { position: relative; max-width: 480px; margin-left: auto; }
.oo-tk95__media .img, .oo-tk95__media .img-inner { border-radius: 20px !important; }
.oo-tk95__media img,
.oo-tk95__media .oo-tk95__img img,
.oo-tk95__media .img img {
    width: 100% !important; height: auto !important;
    aspect-ratio: 1 / 1;                  /* vuông — thấp hơn portrait, cân chữ */
    object-fit: cover;
    object-position: center 20%;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.30);
    display: block;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .oo-tk95__container { gap: 44px; padding: 72px 32px; }
    .oo-tk95__bullets { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 768px) {
    .oo-tk95 { margin: 0; border-radius: 0; }
    .oo-tk95__container {
        grid-template-columns: 1fr; gap: 32px;
        padding: 56px 22px;
    }
    .oo-tk95__media { order: -1; max-width: 100%; margin: 0 auto; }
    .oo-tk95__media img,
    .oo-tk95__media .img img { aspect-ratio: 16 / 10; max-height: 280px; }
    .oo-tk95__title    { font-size: 24px; margin-bottom: 16px; }
    .oo-tk95__sub      { font-size: 15px; margin-bottom: 24px; }
    .oo-tk95__bullets li { font-size: 14.5px; }
    .oo-tk95__bullets { margin-bottom: 28px; }
    .oo-tk95__actions  { flex-direction: column; gap: 10px; }
    .oo-tk95__btn      { width: 100%; padding: 14px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .oo-tk95__btn { transition: none; }
}

/* =============================================================
 * 16. BUILDING ITEM HOVER OVERLAY (Branding gradient)
 * ============================================================= */
.building-item .thumb a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.building-item .thumb a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 52, 67, 0) 60%, rgba(6, 52, 67, 0.4) 100%);
    opacity: 1;
    transition: background var(--base);
    pointer-events: none;
    z-index: 1;
}
.building-item:hover .thumb a::after {
    background: linear-gradient(180deg, rgba(6, 52, 67, 0.2) 20%, rgba(18, 156, 148, 0.7) 100%) !important;
}