/* =============================================================
   SƠN TÙNG YACHT — BẢNG MÀU NHẬN DIỆN CHÍNH THỨC
   Navy là nền tảng; đỏ dành cho hành động; vàng chỉ là điểm nhấn.
   File này được nạp cuối cùng để thay thế lớp xanh ngọc cũ.
   ============================================================= */
:root {
    --surface-page-lit: #FFFFFF;
    --surface-page: #FFFFFF;
    --surface-page-deep: #F8F6F0;
    --surface-card: #FFFFFF;
    --surface-raised: #FAF8F3;
    --surface-sunk: #F3EFE6;

    --text-strong: #011F39;
    --text-body: #27394D;
    --text-soft: #59697A;
    --text-faint: #788695;
    --text-invert: #FFFFFF;
    --line: #E9E2D3;
    --line-strong: #D7C9AB;

    --ink: #011F39;
    --ink-soft: #0B3458;

    --color-primary: #011F39;
    --color-primary-hover: #00152A;
    --color-primary-rgb: 1, 31, 57;
    --color-primary-7: rgba(1, 31, 57, 0.70);
    --color-primary-3: rgba(1, 31, 57, 0.30);
    --color-primary-2: rgba(1, 31, 57, 0.20);
    --color-primary-1: rgba(1, 31, 57, 0.10);
    --color-primary-05: rgba(1, 31, 57, 0.05);
    --color-primary-bright: #F4C32F;
    --color-on-primary: #FFFFFF;

    --color-cta: #E1261C;
    --color-cta-hover: #BD180F;
    --color-cta-rgb: 225, 38, 28;
    --color-on-cta: #FFFFFF;
    --color-coral-text: #C51F17;
    --color-sand: #F4C32F;

    --gradient-primary: linear-gradient(135deg, #011F39 0%, #0B3458 100%);
    --gradient-cta: linear-gradient(135deg, #F03B2D 0%, #CF1E15 100%);
    --gradient-hero: linear-gradient(180deg, rgba(1, 31, 57, 0.24) 0%, rgba(1, 31, 57, 0.94) 100%);
    --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #FAF8F3 100%);
}

/* ----- Điều hướng: xanh đen sang trọng, active màu vàng ----- */
.site-header__nav {
    background: rgba(1, 31, 57, 0.94);
    border-color: rgba(244, 195, 47, 0.30);
    box-shadow: 0 12px 28px rgba(1, 31, 57, 0.20);
}

.menu--primary a,
.menu--mobile a {
    color: #FFFFFF;
}

.menu--primary a:hover,
.menu--primary .current-menu-item > a,
.menu--mobile .current-menu-item > a {
    color: #F4C32F;
}

.site-header .header-cta,
.site-header .book-btn {
    background: var(--gradient-cta);
    border-color: #E1261C;
    color: #FFFFFF;
}

/* ----- Hệ thống CTA: đỏ cho chuyển đổi; xanh đen cho hành động phụ ----- */
.btn-primary,
.header-cta,
.book-btn,
.btn.btn-book,
.wyb-btn--pay,
.btn-login,
.checkout-btn,
.floating-cart,
.address-add-btn,
.cf7-form .cf7-submit-btn,
.woocommerce-checkout #place_order,
.woocommerce-account button.account-save-btn.button {
    background: var(--gradient-cta);
    border-color: var(--color-cta);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(225, 38, 28, 0.25);
}

.btn-primary:hover,
.header-cta:hover,
.book-btn:hover,
.btn.btn-book:hover,
.wyb-btn--pay:hover,
.btn-login:hover,
.checkout-btn:hover,
.floating-cart:hover,
.address-add-btn:hover,
.cf7-form .cf7-submit-btn:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-account button.account-save-btn.button:hover {
    background: #BD180F;
    border-color: #BD180F;
}

.btn-outline,
.btn-secondary {
    border-color: #011F39;
    color: #011F39;
}

.btn-outline:hover,
.btn-secondary:hover {
    background: #011F39;
    border-color: #011F39;
    color: #FFFFFF;
}

/* ----- Điểm nhấn trên nền trắng: đỏ thương hiệu (như chữ "YACHT" trong logo).
   Vàng nhạt trên nền trắng không đủ tương phản nên chỉ dùng vàng trên nền xanh đen. ----- */
.section-title em,
h2.section-title em,
.fleet-intro .section-title em,
.tour-section__title em,
.experience-360 .section-title em,
.section-faq .section-title em,
.booking-popup__title em,
.page-activity-detail .section-gallery .section-title em,
.price,
.price-amount,
.yacht-card__price,
.tour-price__value,
.wyb-total-value {
    color: #E1261C !important;
}

.section-badge,
.section-eyebrow,
.tour-section__badge,
.customer-reviews .section-badge,
.section-faq .section-badge {
    color: #C51F17 !important;
    background: #FDF3F2 !important;
    border-color: rgba(225, 38, 28, 0.55) !important;
    box-shadow: 0 3px 10px rgba(225, 38, 28, 0.12) !important;
}

.site-footer em,
.site-footer .footer-tagline em {
    color: #F4C32F !important;
}

.section-hero__home .hero__title em,
.section-hero__home .hero__badge,
.hero-page .hero__badge,
.section-hero__journal .hero__badge,
.hero-page h1 em,
.hero-page .hero__title em,
.section-hero__journal h1 em,
.section-hero__journal .hero__title em {
    color: #F4C32F !important;
    border-color: rgba(244, 195, 47, 0.52) !important;
}

.hero-page__gradient,
.section-hero__journal .hero-page__gradient {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
}

/* ----- Bề mặt sáng: ấm, sạch và loại bỏ sắc xanh nhạt ----- */
.site-main,
.page-home,
.page-menu,
.fleet-intro,
.seat-categories,
.onboard-amenities,
.section-gallery,
.menu-listing,
.yacht_experiences__home,
.curated-experiences,
.experience-360,
.customer-reviews,
.contact-section,
.tour-section,
.single-tour__content {
    background-color: #FFFFFF !important;
    color: #27394D !important;
}

.site-footer {
    background: #011F39;
}

.footer-menu a:hover {
    background: rgba(244, 195, 47, 0.16);
    border-color: #F4C32F;
    color: #F4C32F;
}

/* ----- Trang giới thiệu: thay các ô xanh nhạt bằng trắng/kem thương hiệu ----- */
.about-yacht-page .about-eyebrow--center {
    color: #C51F17 !important;
}

.about-yacht-page .about-eyebrow--light {
    color: #F4C32F !important;
}

.about-yacht-page {
    --about-navy: #011F39;
    --about-teal: #011F39;
    --about-coral: #E1261C;
    --about-sand: #F4C32F;
    --about-line: #E9E2D3;
}

.about-yacht-page .about-values {
    background: linear-gradient(180deg, #FDFCF8 0%, #FFFFFF 100%);
}

.about-yacht-page .about-wave {
    background-image: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 11px, rgba(244, 195, 47, 0.16) 12px 13px, transparent 14px 22px);
}

.about-yacht-page .about-value__icon,
.about-yacht-page .about-process__list b,
.about-yacht-page .about-faq summary span {
    color: #C58D09;
}

.about-yacht-page .about-experiences,
.about-yacht-page .about-process {
    background: #FBF9F4;
    border-color: #E9E2D3;
}

.about-yacht-page .about-process__list li,
.about-yacht-page .about-process__list b {
    background: #FBF9F4;
}

.about-yacht-page .about-process__list::before {
    border-color: #D7C9AB;
}

.about-yacht-page .about-fact {
    background: linear-gradient(145deg, #FFFFFF 0%, #FBF8F0 100%);
    border-color: #E7D9B9;
    box-shadow: 0 16px 32px rgba(1, 31, 57, 0.09);
}

.about-yacht-page .about-fact strong,
.about-yacht-page .about-value h3,
.about-yacht-page .about-heading--center {
    color: #011F39;
}

.about-yacht-page .about-value p,
.about-yacht-page .about-fact p {
    color: #27394D;
}

.about-yacht-page .about-button--primary {
    background: var(--gradient-cta);
    border-color: #E1261C;
    color: #FFFFFF;
}

.about-yacht-page .about-vision__shade {
    background: rgba(1, 31, 57, 0.76);
}

/* Chữ trên ảnh nền tối: phải thắng quy tắc chung p { color: xám !important } của nền trắng */
.about-yacht-page .about-vision p:not(.about-eyebrow),
.about-yacht-page .about-vision__points span,
.about-yacht-page .about-final-cta p {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 2px 12px rgba(1, 31, 57, 0.6) !important;
}

.about-yacht-page .about-final-cta {
    background-color: #011A31;
    background-image: url('../images/about/son-tung-yacht-private-journey-cta.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about-yacht-page .about-final-cta::before {
    background-image: linear-gradient(90deg, rgba(0, 18, 35, 0.97) 0%, rgba(0, 27, 49, 0.88) 42%, rgba(0, 27, 49, 0.35) 72%, rgba(0, 24, 42, 0.18) 100%);
}

/* ----- Trạng thái tương tác dễ nhận biết, hỗ trợ bàn phím ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #F4C32F !important;
    outline-offset: 3px;
}

@media (max-width: 680px) {
    .about-yacht-page .about-final-cta::before {
        background-image: linear-gradient(180deg, rgba(0, 18, 35, 0.91) 0%, rgba(0, 24, 43, 0.82) 100%);
    }
}

/* ----- Header desktop: menu navy, logo là điểm nhấn ----- */
@media (min-width: 992px) {
    .site-header {
        top: 0;
        padding-block: 10px;
        background: transparent;
        border-bottom-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-header__inner {
        gap: clamp(18px, 2vw, 38px);
    }

    .custom-logo-link,
    .site-header__logo {
        flex: 0 0 auto;
        height: clamp(72px, 5vw, 88px);
    }

    .custom-logo-link img,
    .site-header__logo img {
        height: 100% !important;
    }

    .site-header .custom-logo-link {
        background: #FFFFFF;
        border-radius: 14px;
        padding: 6px 10px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    }

    .site-header__nav {
        background: #011F39 !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35) !important;
        padding: 7px clamp(18px, 2vw, 28px) !important;
    }

    .site-header:not(.is-scrolled) .site-header__nav,
    .site-header.is-scrolled .site-header__nav {
        background: #011F39 !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35) !important;
        padding: 7px clamp(18px, 2vw, 28px) !important;
    }

    ul.menu--primary {
        gap: clamp(14px, 1.7vw, 28px);
    }

    .menu--primary a {
        color: #FFFFFF !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.045em !important;
    }

    .menu--primary a::after {
        background: #F4C32F;
    }

    .menu--primary a:hover,
    .menu--primary .current-menu-item > a {
        color: #F4C32F !important;
    }

    .site-header:not(.is-scrolled) .menu--primary a,
    .site-header.is-scrolled .menu--primary a {
        color: #FFFFFF !important;
    }

    .site-header:not(.is-scrolled) .menu--primary a:hover,
    .site-header:not(.is-scrolled) .menu--primary .current-menu-item > a,
    .site-header.is-scrolled .menu--primary a:hover,
    .site-header.is-scrolled .menu--primary .current-menu-item > a {
        color: #F4C32F !important;
    }

    .site-header:not(.is-scrolled) .lang-switch__btn,
    .site-header:not(.is-scrolled) .lang-current {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    .site-header.is-scrolled {
        padding-block: 7px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-bottom-color: rgba(1, 31, 57, 0.12) !important;
        box-shadow: 0 6px 20px rgba(1, 31, 57, 0.10) !important;
    }

    .site-header.is-scrolled .custom-logo-link,
    .site-header.is-scrolled .site-header__logo {
        height: clamp(60px, 4vw, 70px);
    }

    .site-header.is-scrolled .custom-logo-link {
        background: transparent;
        padding: 0;
        box-shadow: none;
    }
}

/* Màn desktop hẹp hoặc zoom lớn: giữ đủ chỗ cho icon tài khoản ở mép phải. */
@media (min-width: 1200px) and (max-width: 1600px) {
    .site-header__actions {
        flex: 0 0 auto;
    }

    .header-account {
        flex-shrink: 0;
    }

    .site-header__inner {
        gap: 16px;
    }

    .site-header__nav,
    .site-header:not(.is-scrolled) .site-header__nav,
    .site-header.is-scrolled .site-header__nav {
        padding-inline: 18px !important;
    }

    ul.menu--primary {
        gap: clamp(12px, 1.15vw, 18px);
    }

    .menu--primary a {
        font-size: 11px !important;
    }

    .header-cta {
        padding: 9px 16px;
        font-size: 11px;
    }
}

/* Logo desktop lớn hơn cần nhường chỗ cho thao tác chính ở tablet ngang. */
@media (min-width: 992px) and (max-width: 1199px) {
    .site-header__nav {
        display: none !important;
    }

    .site-header__actions {
        flex: 0 0 auto;
        gap: 10px;
    }

    .lang-switch {
        display: none !important;
    }

    .menu-toggle {
        display: flex !important;
        justify-content: center;
        background: rgba(1, 31, 57, 0.65);
        border-color: rgba(255, 255, 255, 0.28);
    }

    .burger,
    .burger::before,
    .burger::after {
        background: #FFFFFF;
    }

    .header-cta {
        padding: 10px 18px;
    }
}