/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.3.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flatsome-child
*/

/*************** ADD CUSTOM CSS HERE ***************/

/** GLOBAL **/
.m0 {
    margin: 0;
}

/*
 * Smooth scroll for the header anchors (#services / #routes / #faq).
 * scroll-margin-top keeps the target clear of the 80px sticky header.
 */
html {
    scroll-behavior: smooth;
}

/* Injected anchor markers (see intshipland_section_anchors) */
.sg-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 100px;
}

#pricing {
    scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

:root {
    --sg-teal: #00a8a8;
    --sg-teal-dark: #157a76;
    --sg-navy: #1a2332;
    --sg-orange: #ff6b35;

    /* Text colours, matching the reference palette */
    --sg-text: #1a2332;        /* --foreground */
    --sg-body: #4b5563;        /* gray-600  — body copy, section subtitles */
    --sg-body-strong: #374151; /* gray-700  — longer descriptions */
    --sg-muted: #6b7280;       /* gray-500  — small labels */
    --sg-ink: #111827;         /* gray-900  — card titles */

    --sg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sg-font-head: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}


/** TYPOGRAPHY — type scale mirrors the reference (Tailwind defaults) **/
body,
button,
input,
select,
textarea,
.button {
    font-family: var(--sg-font-body);
}

body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sg-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.button {
    font-family: var(--sg-font-head);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--sg-text);
    text-transform: none;
}

/* text-6xl / text-5xl / text-4xl / text-3xl / text-2xl / text-xl */
h1 { font-size: 60px; line-height: 1.15; }
h2 { font-size: 48px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.3; }
h4 { font-size: 20px; line-height: 1.35; }
h5 { font-size: 18px; line-height: 1.4; }
h6 { font-size: 16px; line-height: 1.4; }

p { color: var(--sg-body); }

/* Section intro paragraph: text-lg */
.section-content > .text > p,
.section-content > p {
    font-size: 18px;
    line-height: 1.65;
    color: var(--sg-body);
}

@media only screen and (max-width: 62em) {
    h1 { font-size: 48px; }
    h2 { font-size: 36px; }
}

@media only screen and (max-width: 48em) {
    h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    h3 { font-size: 20px; }

    .section-content > .text > p,
    .section-content > p { font-size: 16px; }
}

/* Card titles — the reference sizes these below the default h3 */
.problem-box .icon-box-text h3,          /* problem / solution / why-choose: text-xl */
.proof-card h3 {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 12px;
}

.goods .problem-box .icon-box-text h3 {  /* goods: font-bold at base size */
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 8px;
}

/* Card body copy: text-sm */
.problem-box .icon-box-text p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sg-body);
    margin-bottom: 0;
}

/* Accent spans inside headings keep the heading weight */
h1 span, h2 span, h3 span {
    font-weight: inherit;
    letter-spacing: inherit;
}


/** BG **/
.look-up > .fill {
    background: linear-gradient(90deg, #1b8f89 0%, #4abeb8 100%);
}

.about-us > .fill {
    background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 50%, #f3fdfb 100%);
}

.coop > .fill {
    background: linear-gradient(90deg, #fbfbfc 0%, #ffffff 50%, #fbfbfc 100%);
}

.hero-banner > .fill {
    background-image: linear-gradient(to right, #1b8f89 0%, #157a76 100%);
}

.service > .fill {
    background-image: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
}

.routes > .fill {
    background-image: linear-gradient(to bottom right, #f8fafc 0%, #ffffff 100%);
}

.problem > .fill {
    background-image: linear-gradient(to bottom right, #fff1f2 0%, #ffffff 50%, #fff7ed 100%);
}

.goods > .fill {
    background-image: linear-gradient(to bottom right, #eff6ff 0%, #ffffff 100%);
}

.pricing > .fill {
    background-image: linear-gradient(to right bottom, #ffffff 0%, #f4f6fa 50%);
}

.why-choose > .fill {
    background-image: linear-gradient(to bottom right, #ecfdf5 0%, #ffffff 50%, #f0fdfa 100%);
}

.media > .fill {
    background-image: linear-gradient(to bottom right, #ffffff 0%, #eff6ff 50%, #ffffff 100%);
}

.testimonials > .fill {
    background-image: linear-gradient(to bottom right, #ffffff 0%, #f0fdfa 50%, #ffffff 100%);
}

.faq-section > .fill {
    background-image: linear-gradient(to bottom right, #f9fafb 0%, #ffffff 100%);
}

.trust-footer .col .icon-box-text .text * {
    margin-bottom: 0;
}


/** FOOTER **/
.site-footer {
    background-image: linear-gradient(to bottom, #0f172a 0%, #020617 100%);
    color: #d1d5db;
}

/* Layout comes from the UX Builder rows (container width by default) —
   no width overrides needed here. */

/* --- Newsletter band --- */
/* .site-footer .footer-newsletter {
    border-bottom: 1px solid #334155;
} */

.newsletter-title {
    margin-bottom: 14px;
    color: #fff;
    font-size: 30px;
    line-height: 1.25;
    text-transform: none;
}

.newsletter-lead {
    max-width: 42rem;
    margin: 0 auto 24px;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.6;
}

/* Wider and shallower than before, with a more compact button */
.newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 48rem;
    margin: 0 auto;
}

/* CF7 wraps each control in its own <p>; strip the inherited spacing. */
.newsletter-form p,
.newsletter-form .wpcf7-form-control-wrap {
    margin: 0;
    display: block;
}

.newsletter-form__field {
    flex: 1 1 auto;
    min-width: 0;
}

.newsletter-form__field input[type="email"] {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #2c3e57;
    border-radius: 8px;
    background: #16233a;
    color: #fff;
    font-size: 14px;
    line-height: 42px;
    box-shadow: none;
}

.newsletter-form__field input[type="email"]::placeholder {
    color: #6b7280;
}

.newsletter-form__field input[type="email"]:focus {
    border-color: #14b8a6;
    outline: none;
    box-shadow: none;
}

.newsletter-form__submit {
    flex: 0 0 auto;
    position: relative;
}

/*
 * CF7 renders the submit as <input>, which cannot hold a child icon, so the
 * paper-plane sits on the wrapper and the input is padded to clear it.
 */
.newsletter-form__submit::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/><path d='m21.854 2.147-10.94 10.939'/></svg>") no-repeat center / contain;
}

.newsletter-form__submit input[type="submit"] {
    height: 42px;
    margin: 0;
    padding: 0 18px 0 40px;   /* room for the icon */
    border: 0;
    border-radius: 8px;
    background-color: #0d9488;
    background-image: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 42px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color .25s;
}

.newsletter-form__submit input[type="submit"]:hover {
    background-color: #0f766e;
    box-shadow: none;
}

.newsletter-note {
    margin: 14px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.site-footer .wpcf7-response-output {
    margin: 14px auto 0;
    max-width: 42rem;
    border-radius: 8px;
    font-size: 14px;
    color: #d1d5db;
}

.site-footer .wpcf7-not-valid-tip {
    margin-top: 6px;
    color: #f87171;
    font-size: 13px;
    text-align: left;
}

@media only screen and (max-width: 48em) {
    .newsletter-title { font-size: 24px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form__submit input[type="submit"] { width: 100%; }
}

/* --- Main columns --- */
.footer-about {
    margin-bottom: 24px;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.65;
}

.site-footer .footer-heading,
.site-footer .ux-menu-title {
    margin-bottom: 22px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.site-footer .footer-menu .ux-menu-link__link {
    padding: 0;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.5;
    transition: color .25s;
}

.site-footer .footer-menu .ux-menu-link {
    margin-bottom: 12px;
}

.site-footer .footer-menu .ux-menu-link__link:hover {
    color: #2dd4bf;
}

/* Social icons */
.site-footer .social-icons a {
    color: #9ca3af;
    transition: color .25s;
}

.site-footer .social-icons a:hover {
    color: #2dd4bf;
}

/* Contact list */
.contact-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-menu li {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.contact-menu li i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #2dd4bf;
    font-size: 17px;
}

.contact-menu li p {
    margin: 0;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.45;
}

.contact-menu li a,
.contact-menu li .contact-value {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    transition: color .25s;
}

.contact-menu li a:hover {
    color: #2dd4bf;
}

/* --- Trust badges --- */
.trust-footer .col_inner,
.trust-footer .col {
    transition: background-color .25s;
}

.trust-footer .featured-box .icon-box-img {
    width: 48px !important;
    height: 48px;
    flex: 0 0 48px;
    margin: 0 auto 10px;
    padding: 0;
    border-radius: 999px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s;
}

.trust-footer .featured-box .icon-box-img .icon,
.trust-footer .featured-box .icon-box-img .icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.trust-footer .featured-box .icon-box-img svg {
    width: 24px !important;
    height: 24px;
    padding-top: 0;
}

.trust-footer .col:hover .icon-box-img {
    transform: scale(1.1);
}

/* The heading now sits above the row, so badges are children 1–4. */
.trust-heading {
    margin: 32px 0 16px;
}

.trust-footer .col:nth-of-type(1) .icon-box-img { background-image: linear-gradient(to bottom right, #22c55e, #059669); }
.trust-footer .col:nth-of-type(2) .icon-box-img { background-image: linear-gradient(to bottom right, #3b82f6, #0891b2); }
.trust-footer .col:nth-of-type(3) .icon-box-img { background-image: linear-gradient(to bottom right, #eab308, #ea580c); }
.trust-footer .col:nth-of-type(4) .icon-box-img { background-image: linear-gradient(to bottom right, #a855f7, #db2777); }

/* Badge tiles: even padding and a subtle hover, as in the reference */
.trust-footer .col .col-inner {
    padding: 18px 12px;
    transition: background-color .25s;
}

.trust-footer {
    border-bottom: 1px solid rgb(49, 65, 88);
}

.trust-footer .col .col-inner:hover {
    background-color: rgba(52, 61, 84, 0.5) !important;
}

.trust-footer h4 {
    margin: 0 0 2px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.trust-footer p {
    margin: 0;
    color: #9ca3af !important;
    font-size: 12px;
    line-height: 1.4;
}

.footer-trust-head > .col{
    padding-bottom: 0px !important; 
}

.footer-trust-head .trust-heading p{
    font-size: 14px;
    color: #9ca3b3; 
}

/* --- Bottom bar --- */
.footer-2,
.absolute-footer {
    background-color: #020617;
    color: #9ca3af;
    font-size: 14px;
}

.absolute-footer a {
    color: #9ca3af;
    transition: color .25s;
}

.absolute-footer a:hover {
    color: #2dd4bf;
}

.absolute-footer {
    padding-bottom: 64px;
    padding-top: 32px;
}

ul.ab-ft-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
}

ul.ab-ft-menu li {
    margin: 0;
}

/* Heading block */
.coop .coop-head {
    margin-bottom: 48px;
}

.coop .coop-head .coop-eyebrow {
    margin-bottom: 14px;
    color: #0d9488;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.4;
}

.coop .coop-head .coop-title {
    max-width: 20em;
    margin: 0 auto 16px;
    color: var(--sg-navy);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
}

.coop .coop-head .coop-lead {
    max-width: 42rem;
    margin: 0 auto;
    color: var(--sg-muted);   /* lighter grey, matching the reference */
    font-size: 16px;
    line-height: 1.65;
}

/* Five equal tiles filling the container, as in the reference */
.coop-row .col {
    flex-basis: 20%;
    max-width: 20%;
}

@media only screen and (max-width: 48em) {
    .coop-row .col {
        flex-basis: 50%;
        max-width: 50%;
    }
}

/* Partner cards — scale in place on hover */
.coop .col {
    padding-bottom: 0;
}

.coop .col .box.has-hover {
    padding: 48px 24px 32px;   /* larger tiles, matching the reference */
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: rgba(17, 24, 39, .10) 0 4px 14px;
    /* Transition on the base state so hover-out animates too. */
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color .3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    will-change: transform;
    position: relative;
    z-index: 1;
}

.coop .col .box.has-hover:hover {
    /* Scale only — no translate, so the card grows from its own centre. */
    transform: scale(1.06);
    border-color: #5eead4;
    box-shadow: rgba(13, 148, 136, .22) 0 10px 28px;
    z-index: 2;               /* sit above neighbours while enlarged */
}

/* Logo: centred and a little larger */
.coop .col .box-image {
    margin: 0 auto;
}

.coop .col .box-image img {
    object-fit: contain;
}

.coop .col .box-text {
    background: transparent;
}

.coop .col .box-text h4 {
    margin: 0;
    color: var(--sg-navy);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

/* Bigger logo inside the tile */
.coop .col .box-image {
    width: 76% !important;
}

@media only screen and (max-width: 48em) {
    .coop .coop-head .coop-title { font-size: 26px; }
    .coop .col .box.has-hover { padding: 24px 14px; }
}


/** HERO (About Us section) **/

/* Pill badge above the headline */
.about-us .tag-heading {
    display: inline-block;
    margin-bottom: 20px;
}

.about-us .tag-heading p {
    display: inline-block;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.about-us .hero-title {
    margin-bottom: 20px;
    font-size: 60px;
    line-height: 1.15;
    color: var(--sg-navy);
}

.about-us .hero-lead {
    margin-bottom: 28px;
    max-width: 34em;
    font-size: 18px;
    line-height: 1.7;
    color: #4b5563;
}

/* Buttons sit side by side, stack on mobile */
.about-us .hero-actions {
    margin-bottom: 24px;
}

.about-us .hero-actions .button {
    margin: 0;
    padding: 0 26px;
    min-height: 52px;
    line-height: 52px;
    font-size: 15px;
    font-weight: 600;
}

/* Long arrow, not Flatsome's chevron — matches the reference glyph.
   Kept unscoped so every CTA that opts in gets the same treatment. */
.button.has-arrow::after {
    content: "→";
    margin-left: 10px;
    font-size: 16px;
    line-height: 1;
}

.about-us .hero-actions .button.white-btn {
    border-width: 1px;
    border-color: #e5e7eb;
    background-color: #fff;
}

.about-us .hero-actions .button.white-btn i {
    margin-right: 8px;
    font-size: 15px;
}

/* Trust row: horizontal, green ticks */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #374151;
}

/* Circled tick, as in the reference */
.hero-trust span::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 1.5px solid #22c55e;
    border-radius: 999px;
    color: #22c55e;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
}

/* Video: fill the 16:9 box, rounded with a soft shadow */
.about-us .hero-video {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

.about-us .hero-video .wp-video,
.about-us .hero-video video,
.about-us .hero-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    background: #000;
}

.about-us .hero-video .mejs-container,
.about-us .hero-video .mejs-overlay,
.about-us .hero-video .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}

@media only screen and (max-width: 48em) {
    .about-us .hero-title { font-size: 34px; }

    .about-us .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .about-us .hero-actions .button { width: 100%; }

    .hero-trust { gap: 12px; }
}


/** SERVICE **/
/* Tightened to match the reference's narrower three-up layout */
.service-box {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.service-box .col {
    padding-bottom: 0;
}

.service-box .col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The card needs a positioning context for the "Phổ biến" badge. */
.service-card {
    position: relative;
    flex: 1 1 auto;
}

/*
 * Service badges differ from the Problem/Solution circles: the reference uses
 * a large rounded square in pale teal with a teal (not white) glyph.
 */
.service-card .icon-box-img {
    width: 96px !important;
    height: 96px;
    flex: 0 0 96px;
    margin: 0 auto 24px;
    padding: 0;
    border-radius: 24px;
    background-image: linear-gradient(to bottom right, #ccfbf1 0%, #f0fdfa 50%, #ecfeff 100%);
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card .icon-box-img .icon,
.service-card .icon-box-img .icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.service-card .icon-box-img svg {
    width: 46px !important;
    height: 46px;
    padding-top: 0;
}

.service-box .col-inner:hover .icon-box-img {
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 18px 36px rgba(13, 148, 136, .25);
    color: #0f766e;
}

.service-card h3 {
    margin-bottom: 12px;
    color: #111827;
    font-size: 24px;
    font-weight: 700;
    transition: color .3s;
}

.service-box .col-inner:hover .service-card h3 {
    color: var(--sg-teal);
}

.service-desc {
    margin-bottom: 14px;
    color: #6b7280;
    font-size: 14px;
}

.service-full {
    margin-bottom: 22px;
    color: #374151;
    font-size: 16px;
    line-height: 1.65;
}

/* "Phổ biến" ribbon, centred over the top of the card */
.service-card.is-popular::before {
    content: "Phổ biến";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 5px 15px;
    border-radius: 999px;
    background-image: linear-gradient(to right, #fb923c 0%, #f97316 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* Feature list — the reference uses a circled tick, not a bare check */
ul.service-check {
    list-style: none;
    padding: 0;
    text-align: left;
    /* Flatsome's .last-reset zeroes the last child's margin — keep the gap
       above the button. */
    margin: 0 0 22px !important;
}

ul.service-check li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

ul.service-check li::before {
    content: "✓";
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border: 1.5px solid #14b8a6;
    border-radius: 999px;
    color: #14b8a6;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.service-box .button {
    margin-bottom: 0;
    margin-top: auto;
}


/** ROUTES **/
/* Equal-height cards with the content left aligned, per the reference */
.routes-box .col {
    display: flex;
    text-align: left;
}

.routes-box .col-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 28px 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

/* Push price + button to the bottom so they line up across cards */
.routes-box .route-price {
    margin-top: auto;
}

.routes-box .button {
    margin-bottom: 0;
}

.routes-box .col-inner:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    transform: translateY(-4px);
}

.route-name {
    font-weight: 700;
    color: var(--sg-navy);
    font-size: 18px;
    margin-bottom: .6em;
}

.route-time {
    color: #6b7280;
    font-size: 16px;
}

.route-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--sg-teal);
    margin-bottom: 0;
}


/** GRADIENT ICON CARDS (problem / solution / goods / why-choose / process) **/
/* Process steps sit directly on the section background — no card, per the reference. */
.problem-box .col-inner {
    background: linear-gradient(to bottom right, #ffffff 0%, #f9fafb 100%);
    border-radius: 12px;
    padding: 56px 32px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.problem-box .col-inner:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
    transform: translateY(-6px) scale(1.02);
}

/*
 * Icon badge. Flatsome prints the SVG inline (not as <img>) and the Lucide
 * markup uses stroke="currentColor", so the glyph colour comes from `color`.
 * Width AND height must both be fixed or the badge renders as an oval —
 * the inline `width:Npx` from img_width only sets one axis.
 */
.bg-color-icon .icon-box-img {
    width: 80px !important;
    height: 80px;
    flex: 0 0 80px;
    padding: 0;
    border-radius: 999px;
    background-image: linear-gradient(to bottom right, #2dd4bf 0%, #0d9488 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-color-icon .icon-box-img .icon,
.bg-color-icon .icon-box-img .icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/*
 * Flatsome sets `fill: currentColor` on .icon-box-img svg AND its paths.
 * Lucide icons are stroke-only (fill="none"), so that rule floods the
 * outlines into solid blobs. Match on the lucide class so this applies
 * everywhere they are used (page sections and the footer trust badges)
 * without touching Flatsome's own filled icons.
 */
.icon-box-img svg[class*="lucide"],
.icon-box-img svg[class*="lucide"] * {
    fill: none;
    stroke: currentColor;
}

.bg-color-icon .icon-box-img svg {
    width: 38px !important;
    height: 38px;
    padding-top: 0;
    stroke-width: 2;
}

/* Goods cards use a slightly smaller badge, as in the reference */
.goods .bg-color-icon .icon-box-img {
    width: 64px !important;
    height: 64px;
    flex: 0 0 64px;
}

.goods .bg-color-icon .icon-box-img svg {
    width: 30px !important;
    height: 30px;
}

.problem-box .col-inner:hover .bg-color-icon .icon-box-img {
    transform: scale(1.1) rotate(12deg);
}

/* Per-card gradient colours, mirroring the source design */
.problem .problem-box .col:nth-child(1) .icon-box-img { background-image: linear-gradient(to bottom right, #f87171, #dc2626); }
.problem .problem-box .col:nth-child(2) .icon-box-img { background-image: linear-gradient(to bottom right, #fb923c, #ea580c); }
.problem .problem-box .col:nth-child(3) .icon-box-img { background-image: linear-gradient(to bottom right, #fbbf24, #d97706); }
.problem .problem-box .col:nth-child(4) .icon-box-img { background-image: linear-gradient(to bottom right, #fb7185, #e11d48); }
.problem .problem-box .col:nth-child(5) .icon-box-img { background-image: linear-gradient(to bottom right, #f472b6, #db2777); }
.problem .problem-box .col:nth-child(6) .icon-box-img { background-image: linear-gradient(to bottom right, #ef4444, #f97316); }

.solution .problem-box .col:nth-child(1) .icon-box-img { background-image: linear-gradient(to bottom right, #60a5fa, #2563eb); }
.solution .problem-box .col:nth-child(2) .icon-box-img { background-image: linear-gradient(to bottom right, #c084fc, #9333ea); }
.solution .problem-box .col:nth-child(3) .icon-box-img { background-image: linear-gradient(to bottom right, #4ade80, #16a34a); }
.solution .problem-box .col:nth-child(4) .icon-box-img { background-image: linear-gradient(to bottom right, #fb923c, #ea580c); }
.solution .problem-box .col:nth-child(5) .icon-box-img { background-image: linear-gradient(to bottom right, #f472b6, #db2777); }
.solution .problem-box .col:nth-child(6) .icon-box-img { background-image: linear-gradient(to bottom right, #facc15, #ca8a04); }

.goods .problem-box .col:nth-child(1) .icon-box-img { background-image: linear-gradient(to bottom right, #60a5fa, #2563eb); }
.goods .problem-box .col:nth-child(2) .icon-box-img { background-image: linear-gradient(to bottom right, #c084fc, #9333ea); }
.goods .problem-box .col:nth-child(3) .icon-box-img { background-image: linear-gradient(to bottom right, #f472b6, #db2777); }
.goods .problem-box .col:nth-child(4) .icon-box-img { background-image: linear-gradient(to bottom right, #fb923c, #ea580c); }
.goods .problem-box .col:nth-child(5) .icon-box-img { background-image: linear-gradient(to bottom right, #4ade80, #16a34a); }

.why-choose .problem-box .col:nth-child(1) .icon-box-img { background-image: linear-gradient(to bottom right, #fbbf24, #ea580c); }
.why-choose .problem-box .col:nth-child(2) .icon-box-img { background-image: linear-gradient(to bottom right, #60a5fa, #2563eb); }
.why-choose .problem-box .col:nth-child(3) .icon-box-img { background-image: linear-gradient(to bottom right, #facc15, #ca8a04); }
.why-choose .problem-box .col:nth-child(4) .icon-box-img { background-image: linear-gradient(to bottom right, #c084fc, #9333ea); }
.why-choose .problem-box .col:nth-child(5) .icon-box-img { background-image: linear-gradient(to bottom right, #4ade80, #16a34a); }
.why-choose .problem-box .col:nth-child(6) .icon-box-img { background-image: linear-gradient(to bottom right, #fb7185, #e11d48); }


/*
 * PROCESS — numbered circles + connecting arrows.
 *
 * These boxes have no image, so Flatsome renders no .icon-box-img at all —
 * the step number comes through as the featured_box title (<h5>). Style that
 * element itself into the circle.
 */
.process-box .icon-box-text > h5 {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background-image: linear-gradient(to bottom right, #14b8a6 0%, #0d9488 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: 0;
    text-align: center;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-box .col-inner:hover .icon-box-text > h5 {
    transform: scale(1.1);
}

.process-box .icon-box-text h3 {
    margin-bottom: 8px;
    color: var(--sg-navy);
    font-size: 16px;
    font-weight: 700;
}

.process-box .icon-box-text p {
    margin-bottom: 0;
    color: #6b7280;
    font-size: 14px;
}

.process-box .col {
    position: relative;
}


/** PROOF CARDS (Bằng Chứng Thực Tế) **/
/*
 * The reference leaves a small white band above the colour bar, so the bar is
 * offset from the top edge rather than flush with it.
 */
.proof-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .10);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    padding: 48px 28px 28px;
}

.proof-card:hover {
    box-shadow: 0 20px 40px rgba(17, 24, 39, .16);
    transform: translateY(-6px) scale(1.02);
}

.proof-card__bar {
    position: absolute;
    top: 14px;          /* white band above, as in the reference */
    left: 0;
    right: 0;
    height: 8px;
}

.proof-card__bar--blue   { background-image: linear-gradient(to right, #3b82f6, #2563eb); }
.proof-card__bar--purple { background-image: linear-gradient(to right, #a855f7, #9333ea); }
.proof-card__bar--teal   { background-image: linear-gradient(to right, #14b8a6, #0d9488); }

/* Title + green tick badge */
.proof-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.proof-card h3 {
    margin: 0;
    color: var(--sg-navy);
    font-size: 20px;
    line-height: 1.3;
}

.proof-card__check {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-image: linear-gradient(to bottom right, #4ade80, #16a34a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s;
}

.proof-card:hover .proof-card__check {
    transform: scale(1.1);
}

.proof-card__check .sg-ico {
    width: 22px;
    height: 22px;
}

/* Detail rows: icon + label/value */
.proof-card__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.proof-card__row .sg-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 2px;
    color: #9ca3af;
}

.proof-card__cell {
    display: block;
    min-width: 0;
}

.proof-card__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sg-muted);
    line-height: 1.35;
}

.proof-card__value {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    line-height: 1.45;
}

.proof-card__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    color: #16a34a;
    font-weight: 600;
    font-size: 15px;
}

.proof-card__status .sg-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}




/** TESTIMONIALS — slider (Flatsome ux_slider) **/
.tm-slider {
    max-width: 1152px;   /* max-w-6xl */
    margin: 0 auto;
}

/*
 * .tm-slide is the Flickity cell (Flatsome sets max-width on the slider's
 * direct children). Keep the cell free of any percentage height — giving the
 * card height:100% here collapses the slider, because Flickity derives the
 * viewport height from the cells.
 */
/*
 * Gutter via margin on the card, not padding on the cell: Flickity gives the
 * cell `position:absolute` with a max-width, and padding there did not
 * translate into a visible gap.
 */
.tm-slide {
    padding: 0;
}

.tm-slide > .tm-card {
    margin: 10px 16px 24px;
}

/* Flickity flags the active cell — highlight it like the reference does */
.tm-slide.is-selected .tm-card {
    border-color: #5eead4;
}

/* Reserve room under the slides so the nav clears the cards */
.tm-slider .slider {
    padding-bottom: 112px;
}

/*
 * Flatsome floats the arrows over the slides and only reveals them on hover.
 * The reference puts them below, flanking the dots, always visible.
 */
/*
 * The teal disc lives on the BUTTON, not the SVG, so the chevron inside is
 * free to move on hover. (Flatsome's "circle" nav style normally puts the
 * circle on the SVG; that is undone below.)
 */
.tm-slider .flickity-prev-next-button {
    /* Base Flatsome derives the height from top/bottom:40% — reset both. */
    top: auto;
    bottom: 24px;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background-color: #0d9488;
    background-image: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: #fff;
    opacity: 1 !important;
    transform: none !important;
    transition: background-image .25s, box-shadow .25s;
}

.tm-slider .flickity-prev-next-button:hover {
    /* background-image: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
    scale: 1.1;   
}

/* Offset = half the dot cluster (~63px) + an ~18px gap + the 48px button */
.tm-slider .flickity-prev-next-button.previous { left: calc(50% - 128px); right: auto; }
.tm-slider .flickity-prev-next-button.next     { right: calc(50% - 128px); left: auto; }

/* The SVG is now only the glyph — strip Flatsome's circle styling off it. */
.tm-slider .slider .flickity-prev-next-button svg {
    width: 48px;
    height: 48px !important;
    padding: 33%;          /* smaller, thinner chevron as in the reference */
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    fill: #fff !important;
    opacity: 1;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Nudge the chevron 5px toward where it points. Flatsome centres the SVG with
 * `position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)`, so
 * that centring translate has to be repeated or the glyph jumps out of place.
 */
.tm-slider .flickity-prev-next-button.previous:hover svg {
    transform: translate(-50%, -50%) translateX(-5px);
}

.tm-slider .flickity-prev-next-button.next:hover svg {
    transform: translate(-50%, -50%) translateX(5px);
}

/* Dots centred between the arrows */
.tm-slider .flickity-page-dots {
    position: absolute;
    bottom: 44px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    line-height: 1;
}

.tm-slider .flickity-page-dots .dot {
    width: 11px;
    height: 11px;
    margin: 0;
    background: #cbd5e1;
    opacity: 1;
    border: 0;
    border-radius: 999px;
    transition: all .25s;
}

/* Active dot is a wide pill in the reference */
.tm-slider .flickity-page-dots .dot.is-selected {
    width: 30px;
    background: #0d9488;
}

@media only screen and (max-width: 48em) {
    .tm-slider .flickity-prev-next-button.previous { left: 8px; }
    .tm-slider .flickity-prev-next-button.next     { right: 8px; }
}

.tm-card {
    display: flex;
    flex-direction: column;
    min-height: 300px;   /* keeps the cards visually even without a % height */
    padding: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * No scale on hover: Flickity's viewport clips overflow, so an enlarged card
 * gets cut off. A small lift stays inside the cell. Border is set with
 * !important so it still wins over the .is-selected rule below.
 */
.tm-card:hover {
    border-color: #14b8a6 !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: translateY(-4px);
}

/* Avatar + stars on one row */
.tm-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.tm-card__avatar {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(17, 24, 39, .18);
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tm-card:hover .tm-card__avatar {
    transform: scale(1.1);
}

.tm-card__avatar--pink   { background-image: linear-gradient(to bottom right, #f472b6, #db2777); }
.tm-card__avatar--blue   { background-image: linear-gradient(to bottom right, #60a5fa, #2563eb); }
.tm-card__avatar--purple { background-image: linear-gradient(to bottom right, #c084fc, #9333ea); }
.tm-card__avatar--orange { background-image: linear-gradient(to bottom right, #fb923c, #ea580c); }
.tm-card__avatar--green  { background-image: linear-gradient(to bottom right, #4ade80, #16a34a); }
.tm-card__avatar--teal   { background-image: linear-gradient(to bottom right, #2dd4bf, #0d9488); }

.tm-card__stars {
    color: #facc15;
    font-size: 26px;
    letter-spacing: 2px;
    line-height: 1;
    white-space: nowrap;
}

/* Quote grows so the meta block stays bottom-aligned across cards */
.tm-card__quote {
    flex: 1 1 auto;
    margin: 0 0 24px;
    color: #374151;
    font-size: 16px;
    font-style: italic;
    line-height: 1.7;
}

.tm-card__meta {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.tm-card__name {
    margin: 0 0 2px;
    color: var(--sg-navy);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.tm-card__city {
    margin: 0;
    color: var(--sg-body);
    font-size: 14px;
    line-height: 1.4;
}

@media only screen and (max-width: 48em) {
    .tm-card { padding: 24px; }
}


/** FAQ **/
.faq-wrap {
    max-width: 768px;   /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

.faq-accordion .accordion-item {
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: background-color .25s, border-color .25s;
}

.faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

/*
 * Flatsome clears its own borders here. The chevron cannot be reordered with
 * flexbox because `.accordion .toggle` is `position:absolute; left:0` — it is
 * out of flow — so it has to be repositioned to the right instead.
 */
.faq-accordion .accordion-title {
    display: block;
    padding: 18px 48px 18px 24px;   /* room on the right for the chevron */
    border: 0;
    color: #111827;
    font-family: var(--sg-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    transition: color .25s;
}

.faq-accordion .accordion-title span {
    display: block;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.faq-accordion .accordion-title .toggle {
    left: auto;
    right: 18px;
    top: 50%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    line-height: 1;
    transform: translateY(-50%);
}

/* Smaller, muted chevron on the right, per the reference */
.faq-accordion .accordion-title .toggle {
    color: #9ca3af;
}

.faq-accordion .accordion-title .toggle i {
    font-size: 14px;
}

.faq-accordion .accordion-title.active .toggle {
    color: var(--sg-teal);
}

.faq-accordion .accordion-title:hover {
    color: var(--sg-teal);
    text-decoration: none;
}

/* Open state: pale teal wash, as in the reference */
.faq-accordion .accordion-item .accordion-title.active {
    background: #f0fdfa;
    color: #0f766e;
}

.faq-accordion .accordion-item:has(.accordion-title.active) {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.faq-accordion .accordion-title .toggle {
    color: var(--sg-teal);
    opacity: 1;
    transition: transform .25s;
}

/* Keep the centring translate when rotating the open-state chevron */
.faq-accordion .accordion-title.active .toggle {
    transform: translateY(-50%) rotate(180deg);
}

.faq-accordion .accordion-inner {
    padding: 0 24px 20px;
}

.faq-accordion .accordion-inner p {
    margin: 0;
    color: var(--sg-body);
    font-size: 15px;
    line-height: 1.7;
}


/** PRICING CALCULATOR **/
.shipgo-calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

@media only screen and (max-width: 48em) {
    .shipgo-calc { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Left: inputs --- */
.shipgo-calc__field {
    margin-bottom: 20px;
}

.shipgo-calc__field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.shipgo-calc__field input,
.shipgo-calc__field select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    margin: 0;
    font-size: 15px;
    color: var(--sg-text);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: none;
}

/* The reference sizes the two selects to their content, not full width. */
.shipgo-calc__field select {
    width: auto;
    min-width: 210px;
    max-width: 100%;
    padding-right: 38px;
}

/* Insurance panel hugs the column rather than stretching */
.shipgo-calc__check {
    width: 100%;
    max-width: 100%;
}

/* Icon sits inside the weight field */
.shipgo-calc__with-icon {
    position: relative;
    display: block;
}

.shipgo-calc__with-icon .sg-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.shipgo-calc__with-icon input {
    padding-left: 42px;
}

.shipgo-calc__field input:focus,
.shipgo-calc__field select:focus {
    border-color: var(--sg-teal);
    outline: none;
    box-shadow: none;
}

/* Insurance toggle in a tinted panel, as in the reference */
.shipgo-calc__check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border-radius: 8px;
    background: #f0fdfa;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .25s;
}

.shipgo-calc__check:hover {
    background: #ccfbf1;
}

.shipgo-calc__check input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #0d9488;
}

/* --- Right: result card --- */
.shipgo-calc__result {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background-image: linear-gradient(to bottom right, #f0fdfa 0%, #eff6ff 100%);
    box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
}

.shipgo-calc__bar {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    height: 8px;
    background-image: linear-gradient(to right, #14b8a6 0%, #2563eb 100%);
}

.shipgo-calc__body {
    padding: 60px 32px 32px;
}

/* Icon + label + total */
.shipgo-calc__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    margin-top: 30px;
}

/* The reference uses a rounded square here, not a circle */
.shipgo-calc__head-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 99%;
    background-color: #0d9488;
    background-image: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipgo-calc__head-icon .sg-ico {
    width: 26px;
    height: 26px;
}

.shipgo-calc__head-text {
    display: block;
}

.shipgo-calc__head-label {
    display: block;
    font-size: 13px;
    color: var(--sg-muted);
    line-height: 1.4;
}

.shipgo-calc__head-total {
    display: block;
    font-family: var(--sg-font-head);
    font-size: 26px;
    font-weight: 700;
    color: #0d9488;
    line-height: 1.25;
}

/* Line items */
.shipgo-calc__lines {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

/* The reference spaces these rows generously (~40px apart) */
.shipgo-calc__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.shipgo-calc__line:last-child {
    margin-bottom: 0;
}

.shipgo-calc__line > span {
    color: #374151;
    font-size: 14px;
}

.shipgo-calc__line strong {
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* Meta rows */
.shipgo-calc__meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--sg-body);
    font-size: 14px;
}

.shipgo-calc__meta-row .sg-ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: #0d9488;
}

.shipgo-calc__meta-row strong {
    color: #111827;
    font-weight: 600;
}

/* CTA */
/* Solid teal in the reference, not a gradient */
.shipgo-calc__cta {
    display: block;
    margin-top: 30px;
    padding: 15px 20px;
    border-radius: 8px;
    background-color: #0d9488;
    background-image: none;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shipgo-calc__cta:hover {
    background-color: #0f766e;
    color: #fff;
    box-shadow: 0 12px 26px rgba(13, 148, 136, .35);
}

.shipgo-calc__cta:active {
    transform: scale(.98);
}


/** BUTTONS **/
.gradient-btn {
    background-image: linear-gradient(to right, #14b8a6 0%, #0d9488 100%);
    border-color: transparent;
    color: #fff;
}

.gradient-btn:hover {
    background-image: linear-gradient(to right, #0d9488 0%, #0f766e 100%);
    color: #fff;
}

.white-btn {
    background-color: transparent;
    border: 2px solid #d1d5db;
    color: var(--sg-navy);
}

/** CTA BAND (Sẵn Sàng Gửi Hàng?) **/
/* Narrow enough to break after "không có", as the reference does */
.hero-banner .cta-lead {
    max-width: 580px;
    margin: 0 auto 30px;
    color: #fff;
    font-size: 17px;
    line-height: 1.65;
}

.hero-banner h2 {
    margin-bottom: 18px;
    color: #fff;
}

/* White button on teal, per the reference */
.hero-banner .button {
    min-height: 48px;
    line-height: 48px;
    padding: 0 28px;
    background-color: #fff;
    background-image: none;
    border-color: #fff;
    color: #1f5f57;
    font-size: 15px;
    font-weight: 600;
}

.hero-banner .button:hover {
    background-color: #f3f4f6;
    border-color: #f3f4f6;
    color: #0f766e;
}


/** HEADER **/
/*
 * Flatsome's main header row has no centre zone, so the nav sits in the left
 * one. Let that column grow and centre its contents to match the reference.
 */
.header-inner .flex-col.flex-left.flex-grow {
    justify-content: center;
}

.header-nav-main {
    justify-content: center;
}

.header-nav-main > li > a {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 15px;
}


/** HEADER CTA (topbar_left HTML element) **/
.header .quote-btn,
.quote-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 10px;
    background-image: linear-gradient(to right, #14b8a6 0%, #0d9488 100%);
    color: #fff !important; 
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.header .quote-btn:hover,
.quote-btn:hover {
    background-image: linear-gradient(to right, #0d9488 0%, #0f766e 100%);
    color: #fff;
}

.stuck .header-main .nav > li > a {
    line-height: normal !important;
}

#header-contact i.icon-phone a {
    font-size: 14px !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* The header contact element sits next to the button */
.header-contact .icon-phone {
    color: var(--sg-teal);
}


/** FLOATING CONTACT BUTTONS **/
.fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
}

.fab__item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.fab__icon {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s;
}

.fab__icon svg {
    width: 26px;
    height: 26px;
}

.fab__item--zalo .fab__icon { background-color: #2563eb; }
.fab__item--call .fab__icon { background-color: #16a34a; }

.fab__item:hover .fab__icon {
    transform: scale(1.08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .3);
}

/* Small badge on the call button */
.fab__dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #f87171;
}

/*
 * Labels are hidden until the wrapper is hovered — because the hover lives on
 * .fab, pointing at either button reveals both labels at once.
 */
.fab__label {
    padding: 9px 16px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity .25s, transform .25s, visibility .25s;
}

.fab:hover .fab__label,
.fab:focus-within .fab__label {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@media only screen and (max-width: 48em) {
    .fab { right: 14px; bottom: 14px; gap: 12px; }
    .fab__icon { flex-basis: 50px; width: 50px; height: 50px; }
    .fab__icon svg { width: 23px; height: 23px; }
}


/** EXIT-INTENT POPUP **/
/* Blurred backdrop, as in the reference */
.mfp-bg {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: rgba(15, 23, 42, .55);
    opacity: 1;
}

.exit-popup {
    position: relative;
    padding: 0 !important;
    border-radius: 16px;
    overflow: hidden;
}

/* Teal header band */
.xp__head {
    padding: 32px 24px 24px;
    background-image: linear-gradient(to right, #14b8a6 0%, #0d9488 50%, #0891b2 100%);
}

.xp__title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 24px;
    line-height: 1.25;
}

.xp__sub {
    margin: 0;
    color: #ccfbf1;
    font-size: 14px;
    line-height: 1.5;
}

/* Orange offer band */
.xp__banner {
    padding: 12px 24px;
    background-image: linear-gradient(to right, #fb923c 0%, #f97316 100%);
    color: #fff;
    font-family: var(--sg-font-head);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.xp__body {
    padding: 24px;
}

.xp__lead {
    margin: 0 0 22px;
    color: #374151;
    font-size: 14px;
    line-height: 1.65;
}

/* Form — even spacing between every field and the button */
.xp-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xp-form__row,
.xp-form__submit {
    margin: 0;
}

.xp-form .wpcf7-form-control-wrap {
    display: block;
}

.xp-form input[type="text"],
.xp-form input[type="email"],
.xp-form input[type="tel"] {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    box-shadow: none;
}

.xp-form input:focus {
    border-color: var(--sg-teal);
    outline: none;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, .25);
}

.xp-form__submit {
    margin: 0;
}

.xp-form input[type="submit"] {
    width: 100%;
    height: 46px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background-image: linear-gradient(to right, #14b8a6 0%, #0d9488 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    transition: background-image .25s;
}

.xp-form input[type="submit"]:hover {
    background-image: linear-gradient(to right, #0d9488 0%, #0f766e 100%);
}

.xp-note {
    margin: 12px 0 0;
    color: var(--sg-muted);
    font-size: 12px;
    text-align: center;
}

/* Dismiss bar */
.xp__foot {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.xp__dismiss {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sg-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: color .25s;
}

.xp__dismiss:hover {
    color: var(--sg-text);
    background: none;
}

/* Close control sits on the teal band, so it is light */
.exit-popup .mfp-close {
    position: absolute;
    top: 12px !important;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    opacity: .8;
    transition: all .25s;
}

.exit-popup .mfp-close:hover {
    background: rgba(255, 255, 255, .18);
    opacity: 1;
}

.exit-popup .mfp-close svg {
    width: 18px;
    height: 18px;
}

.exit-popup .wpcf7-response-output {
    margin: 14px 0 0;
    border-radius: 8px;
    font-size: 13px;
}

.exit-popup .wpcf7-not-valid-tip {
    margin-top: 4px;
    color: #dc2626;
    font-size: 12px;
}


/** QUOTE MODAL (calculator step + contact step) **/
.quote-lightbox {
    border-radius: 16px;
}

/*
 * Close button. `flatsome_lightbox_close_btn_inside` is filtered to true in
 * functions.php so Magnific renders it inside the popup — it can then be
 * anchored to the card's own top-right corner.
 */
.quote-lightbox {
    position: relative;
}

.mfp-content .quote-lightbox .mfp-close,
.quote-lightbox .mfp-close {
    position: absolute;
    top: 16px !important;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 2px solid #99f6e4; */
    border-radius: 10px;
    /* background: #fff; */
    color: var(--sg-navy);
    opacity: 1;
    transition: all .25s;
}

.quote-lightbox .mfp-close svg {
    width: 20px;
    height: 20px;
}

.quote-lightbox .mfp-close:hover {
    /* border-color: var(--sg-teal); */
    /* background: #f0fdfa; */
    color: var(--sg-teal);
}

/* Never render a second close control */
.quote-lightbox .mfp-close ~ .mfp-close {
    display: none !important;
}

.qm__title {
    margin-bottom: 26px;
    padding-right: 48px;
    color: var(--sg-navy);
    font-size: 22px;
    text-align: center;
}

.qm__field {
    margin-bottom: 18px;
}

.qm__field label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

.qm__field input,
.qm__field select {
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #fff;
    color: var(--sg-text);
    font-size: 15px;
    box-shadow: none;
}

.qm__field input { width: 100%; }

.qm__field select {
    width: auto;
    min-width: 210px;
    max-width: 100%;
    padding-right: 38px;
}

.qm__field input:focus,
.qm__field select:focus {
    border-color: var(--sg-teal);
    outline: none;
    box-shadow: none;
}

/* Insurance toggle */
.qm__check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f0fdfa;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.qm__check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #0d9488;
}

/* Price breakdown */
.qm__detail,
.qm__summary {
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.qm__summary {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.qm__detail h4,
.qm__summary h4 {
    margin: 0 0 14px;
    color: var(--sg-navy);
    font-size: 17px;
}

.qm__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: #374151;
    font-size: 15px;
}

.qm__line strong {
    color: var(--sg-text);
    font-weight: 600;
    white-space: nowrap;
}

.qm__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    color: #0d9488;
    font-size: 19px;
    font-weight: 700;
}

.qm__total strong {
    color: #0d9488;
    white-space: nowrap;
}

/* CTA + note */
.qm__cta {
    display: block;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    border: 0;
    border-radius: 8px;
    background-color: #0d9488;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .25s;
}

.qm__cta:hover {
    background-color: #0f766e;
    color: #fff;
}

.qm__note {
    margin: 14px 0 0;
    color: var(--sg-muted);
    font-size: 13px;
    text-align: center;
}

.quote-lightbox .wpcf7 {
    margin-top: 20px;
}

.quote-form__field {
    margin-bottom: 16px;
    text-align: left;
}

.quote-form__field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.quote-form__field input {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    box-shadow: none;
}

.quote-form__field input:focus {
    border-color: var(--sg-teal);
    outline: none;
    box-shadow: none;
}

.quote-form__submit {
    margin-bottom: 0;
}

.quote-form__submit input[type="submit"] {
    width: 100%;
    height: 52px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background-image: linear-gradient(to right, #14b8a6 0%, #0d9488 100%);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quote-form__submit input[type="submit"]:hover {
    background-image: linear-gradient(to right, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 8px 20px rgba(13, 148, 136, .35);
}

.quote-lightbox .wpcf7-not-valid-tip {
    color: #dc2626;
    font-size: 13px;
    margin-top: 4px;
}

.quote-lightbox .wpcf7-response-output {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
}


@media only screen and (max-width: 48em) {

/*************** ADD MOBILE ONLY CSS HERE ***************/

}