/*
Theme Name:   PICK JSC
Theme URI:    https://pickjsc.com
Description:  Theme WordPress chuyên nghiệp cho Công ty Cổ phần Đầu tư PICK. Chuyên về sản xuất, truyền tải và phân phối điện năng lượng mặt trời, xây dựng công trình điện, lắp đặt hệ thống điện và bán buôn thiết bị điện.
Author:       PICK JSC
Author URI:   https://pickjsc.com
Template:     flatsome
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  pickjsc
Tags:         solar energy, energy, business, corporate


/* =========================
   FOOTER – BASE
========================= */
:root {
    --primary-color: #193d5a;
    --fs-color-primary: #193d5a;
    --fs-color-secondary: #57bc59;
    --fs-color-success: #627D47;
    --fs-color-alert: #b20000;
    --fs-color-base: #333333;
    --fs-experimental-link-color: #334862;
    --fs-experimental-link-color-hover: #111;
}

.section-title-normal {
    border: none;
}

.centered .section-title {
    text-align: center;
    justify-content: center;
}

/* =========================
     BUTTON CHUNG
  ========================= */

.pick-btn {
    font-weight: 500;
}

.pick-btn--primary {
    background: linear-gradient(90deg, var(--fs-color-secondary), #7fd87f) !important;
    border: none !important;
    color: #0f172a !important;
}

.pick-btn--ghost {
    border-width: 1px !important;
    border-radius: 999px !important;
}

/* =========================
     HERO
  ========================= */

.pick-home-hero {
    background-color: #020e1c;
}

.pick-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(248, 250, 252, 0.08);
    margin-bottom: 16px;
}

.pick-hero-eyebrow i {
    color: #facc15;
    font-size: 15px;
}

.pick-hero-eyebrow span {
    color: #e5e7eb;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
}

.pick-hero-title .section-title-main {
    color: #f9fafb;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pick-hero-lead {
    font-size: 16px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 90%;
    color: #e5e7eb;
    margin-bottom: 16px;
}

.pick-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: #e5e7eb;
    margin-bottom: 18px;
}

.pick-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pick-hero-meta i {
    color: var(--fs-color-secondary);
}

/* Hero highlight box */

.pick-hero-highlight {
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.5);
}

.pick-hero-highlight h3 {
    font-size: 18px;
    color: #f9fafb;
    margin-bottom: 8px;
}

.pick-hero-highlight ul {
    padding-left: 18px;
    margin: 0 0 10px 0;
}

.pick-hero-highlight li {
    font-size: 14px;
    color: #e5e7eb;
    line-height: 1.7;
}

.pick-hero-highlight-note {
    font-size: 13px;
    color: #cbd5f5;
    margin-top: 6px;
}

/* =========================
     SECTION TITLE / SUBTITLE
  ========================= */

.pick-section-title .section-title-main {
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.pick-section-subtitle {
    font-size: 14px;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* =========================
     CORE VALUES
  ========================= */

.pick-core-values {
    background-color: #ffffff;
}

.pick-core-card {
    text-align: center;
}

.pick-core-card h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-core-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

/* =========================
     ABOUT
  ========================= */

.pick-about {
    background-color: #f9fafb;
}

.pick-eyebrow {
    color: var(--fs-color-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 10px;
}

.pick-about-title {
    color: var(--primary-color);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
}

.pick-about-text {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 12px;
}

.pick-about-list {
    margin: 0 0 10px 18px;
    padding: 0;
}

.pick-about-list li {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
}

.pick-link-btn {
    font-size: 13px;
}

/* =========================
     SERVICES
  ========================= */

.pick-services {
    background-color: #ffffff;
}

.pick-service-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pick-service-card .box-image img {
    transform: scale(1.02);
    transition: transform 0.35s ease;
}

.pick-service-card .box-text {
    padding-top: 18px !important;
}

.pick-service-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.pick-service-meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: #6b7280;
    margin-bottom: 6px;
}

.pick-service-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

.pick-service-card .button {
    margin-top: 6px;
    font-size: 13px;
}

.pick-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.12);
}

.pick-service-card:hover .box-image img {
    transform: scale(1.06);
}

/* =========================
     PROJECTS SLIDER
  ========================= */

.pick-home-projects .pick-projects-slider {
    /* giữ cấu hình mặc định của Flatsome */
}

.pick-project-textbox h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.pick-project-textbox p {
    color: #e5e7eb;
    font-size: 14px;
}

/* =========================
     STATS
  ========================= */

.pick-stats {
    background-color: #f9fafb;
}

.pick-stats__item {
    margin-bottom: 20px;
}

.pick-stats__value {
    font-size: 42px !important;
    font-weight: 300 !important;
    color: var(--primary-color) !important;
    line-height: 1 !important;
}

.pick-stats__label {
    text-transform: uppercase;
    font-size: 11px;
    color: #6b7280;
    letter-spacing: 1.4px;
}

/* =========================
     TESTIMONIALS
  ========================= */

.pick-testimonials {
    background-color: #ffffff;
}

.pick-testimonial-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 22px 20px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.pick-testimonial-stars {
    color: #facc15;
    font-size: 16px;
    margin-bottom: 10px;
}

.pick-testimonial-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.8;
    min-height: 80px;
    margin-bottom: 14px;
}

.pick-testimonial-meta h5 {
    margin: 0;
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 600;
}

.pick-testimonial-meta span {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
}

/* =========================
     CTA CUỐI TRANG
  ========================= */

.pick-home-cta {
    background-color: var(--primary-color);
}

/* đã dùng lại pick-sol-cta__title / subtitle từ trước,
     nếu chưa có thì giữ 2 block dưới: */
.pick-sol-cta__title .section-title-main {
    color: #f9fafb;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.pick-sol-cta__subtitle {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 22px auto;
    color: #e5e7eb;
}

/* =========================
     RESPONSIVE
  ========================= */

@media (max-width: 768px) {
    .pick-hero-title .section-title-main {
        font-size: 26px;
    }

    .pick-hero-lead {
        max-width: 100%;
    }

    .pick-service-card,
    .pick-testimonial-card {
        margin-bottom: 10px;
    }
}


/* =========================
   ABOUT – HERO
========================= */

.pick-about-hero {
    background-color: #020e1c;
}

.pick-about-hero-title .section-title-main {
    color: #f9fafb;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pick-about-hero-desc {
    font-size: 15px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 90%;
    color: #e5e7eb;
    margin-bottom: 16px;
}

.pick-about-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: #e5e7eb;
    margin-bottom: 18px;
}

.pick-about-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pick-about-hero-meta i {
    color: var(--fs-color-secondary);
}

.pick-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* Hero info box */

.pick-about-hero-box {
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.5);
}

.pick-about-hero-box h3 {
    font-size: 18px;
    color: #f9fafb;
    margin-bottom: 8px;
}

.pick-about-hero-box ul {
    margin: 0 0 10px 18px;
    padding: 0;
}

.pick-about-hero-box li {
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.7;
}

.pick-about-hero-note {
    font-size: 13px;
    color: #cbd5f5;
    margin-top: 4px;
}

/* =========================
     COMMON ELEMENTS
  ========================= */

.pick-about-section {
    /* nền & padding đã set trong shortcode */
}

.pick-eyebrow {
    color: var(--fs-color-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 10px;
}

.pick-about-title {
    color: var(--primary-color);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
}

.pick-about-text {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 10px;
}

.pick-about-list {
    margin: 0 0 10px 18px;
    padding: 0;
}

.pick-about-list li {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
}

/* =========================
     OVERVIEW
  ========================= */

.pick-about-overview {
    background-color: #f9fafb;
}

.pick-about-overview-image img {
    border-radius: 18px;
}

/* =========================
     MVV (mission/vision/values)
  ========================= */

.pick-about-mvv {
    background-color: #ffffff;
}

.pick-mvv-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 20px 18px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.pick-mvv-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(87, 188, 89, 0.12);
    color: var(--fs-color-secondary);
    margin-bottom: 10px;
}

.pick-mvv-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-mvv-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

/* =========================
     STRENGTHS
  ========================= */

.pick-about-strengths {
    background-color: #ffffff;
}

.pick-strength-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 18px 16px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.pick-strength-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 61, 90, 0.08);
    color: var(--primary-color);
    margin-bottom: 8px;
}

.pick-strength-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-strength-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

/* =========================
     TIMELINE
  ========================= */

.pick-about-timeline {
    background-color: #f9fafb;
}

.pick-timeline-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 16px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
    position: relative;
}

.pick-timeline-card__year {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--fs-color-secondary);
    margin-bottom: 6px;
}

.pick-timeline-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-timeline-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

/* =========================
     TEAM
  ========================= */

.pick-about-team {
    background-color: #ffffff;
}

.pick-about-team-box {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.pick-about-team-box .box-text {
    padding-top: 18px !important;
}

.pick-about-team-box h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-about-team-box p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.8;
}

/* =========================
     CTA CUỐI TRANG
  ========================= */

.pick-about-cta {
    background-color: var(--primary-color);
}

/* dùng chung với các trang khác */
.pick-sol-cta__title .section-title-main {
    color: #f9fafb;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.pick-sol-cta__subtitle {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 22px auto;
    color: #e5e7eb;
}

/* =========================
     RESPONSIVE
  ========================= */

@media (max-width: 768px) {
    .pick-about-hero-title .section-title-main {
        font-size: 24px;
    }

    .pick-about-hero-desc {
        max-width: 100%;
    }

    .pick-about-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .pick-mvv-card,
    .pick-strength-card,
    .pick-timeline-card,
    .pick-about-team-box {
        margin-bottom: 10px;
    }
}

/* =========================
   CONTACT – HERO
========================= */

.pick-contact-hero {
    background-color: #020e1c;
}

.pick-contact-hero .section-bg-overlay {
    background-color: rgba(0, 0, 0, 0.8);
}

.pick-contact-hero-title .section-title-main {
    color: #f9fafb;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pick-contact-hero-desc {
    font-size: 15px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 90%;
    color: #e5e7eb;
    margin-bottom: 16px;
}

.pick-contact-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: #e5e7eb;
    margin-bottom: 18px;
}

.pick-contact-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pick-contact-hero-meta i {
    color: var(--fs-color-secondary);
}

.pick-contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* hero box */

.pick-contact-hero-box {
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.5);
}

.pick-contact-hero-box h3 {
    font-size: 18px;
    color: #f9fafb;
    margin-bottom: 8px;
}

.pick-contact-hero-box ul {
    margin: 0 0 10px 18px;
    padding: 0;
}

.pick-contact-hero-box li {
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.7;
}

.pick-contact-hero-note {
    font-size: 13px;
    color: #cbd5f5;
    margin-top: 4px;
}

/* =========================
     CONTACT – METHODS
  ========================= */

.pick-contact-methods {
    background-color: #ffffff;
}

.pick-contact-method {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 18px 22px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.03);
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pick-contact-method__icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: rgba(87, 188, 89, 0.12);
    color: var(--fs-color-secondary);
    font-size: 18px;
}

.pick-contact-method__icon--zalo {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.pick-contact-method__icon--mail {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

.pick-contact-method__icon--location {
    background: rgba(250, 204, 21, 0.12);
    color: #facc15;
}

.pick-contact-method h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-contact-method p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

.pick-contact-method__value {
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 4px;
}

.pick-contact-method .button {
    margin-top: 6px;
    font-size: 13px;
}

/* hover */

.pick-contact-method:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    border-color: rgba(87, 188, 89, 0.35);
}

/* =========================
     CONTACT – FORM + MAP
  ========================= */

.pick-contact-form-section {
    background-color: #f9fafb;
}

.pick-contact-form-title .section-title-main {
    color: var(--primary-color);
}

.pick-contact-form-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 16px;
}

.pick-contact-form-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.03);
}

.pick-contact-form-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 10px;
}

/* map box */

.pick-contact-map-box {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.pick-contact-map-box .box-text {
    padding-top: 18px !important;
}

.pick-contact-map-box h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-contact-map-text {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 12px;
}

.pick-contact-map-iframe iframe {
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: 12px;
}

/* =========================
     CONTACT – INFO CARDS
  ========================= */

.pick-contact-info-section {
    background-color: #ffffff;
}

.pick-contact-info-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 18px 18px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.pick-contact-info-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.pick-contact-info-card p,
.pick-contact-info-card li {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}

.pick-contact-info-card ul,
.pick-contact-info-card ol {
    margin: 0 0 0 18px;
    padding: 0;
}

/* =========================
     CONTACT – CTA
  ========================= */

.pick-contact-cta {
    background-color: var(--primary-color);
}

/* dùng chung pick-sol-cta__title / subtitle đã khai báo cho các trang khác */

.pick-sol-cta__title .section-title-main {
    color: #f9fafb;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.pick-sol-cta__subtitle {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 22px auto;
    color: #e5e7eb;
}

/* =========================
     RESPONSIVE
  ========================= */

@media (max-width: 768px) {
    .pick-contact-hero-title .section-title-main {
        font-size: 24px;
    }

    .pick-contact-hero-desc {
        max-width: 100%;
    }

    .pick-contact-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .pick-contact-method,
    .pick-contact-info-card,
    .pick-contact-map-box {
        margin-bottom: 12px;
    }
}
/* Hero chung đã dùng trên nhiều trang */
.pick-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(248, 250, 252, 0.08);
    margin-bottom: 16px;
  }
  .pick-hero-eyebrow i {
    color: #facc15;
    font-size: 15px;
  }
  .pick-hero-eyebrow span {
    color: #e5e7eb;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .pick-btn {
    font-weight: 500;
  }
  .pick-btn--primary {
    background: linear-gradient(90deg, var(--fs-color-secondary), #7fd87f) !important;
    border: none !important;
    color: #0f172a !important;
  }
  .pick-btn--ghost {
    border-width: 1px !important;
    border-radius: 999px !important;
  }
  
  /* Section title chung */
  .pick-section-title .section-title-main {
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
  }
  .pick-section-subtitle {
    font-size: 14px;
    color: #6b7280;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
  }
  
  /* ===================================
     GIẢI PHÁP – HERO
  =================================== */
  
  .pick-sol-hero {
    background-color: #020e1c;
  }
  .pick-sol-hero .section-bg-overlay {
    background-color: rgba(0, 0, 0, 0.75);
  }
  
  .pick-sol-hero-title .section-title-main {
    color: #f9fafb;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
  
  .pick-sol-hero-desc {
    font-size: 15px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 90%;
    color: #e5e7eb;
    margin-bottom: 16px;
  }
  
  .pick-sol-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: #e5e7eb;
    margin-bottom: 18px;
  }
  .pick-sol-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .pick-sol-hero-meta i {
    color: var(--fs-color-secondary);
  }
  
  .pick-sol-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  
  /* Hero box */
  
  .pick-sol-hero-box {
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.5);
  }
  .pick-sol-hero-box h3 {
    font-size: 18px;
    color: #f9fafb;
    margin-bottom: 8px;
  }
  .pick-sol-hero-box ul {
    margin: 0 0 10px 18px;
    padding: 0;
  }
  .pick-sol-hero-box li {
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.7;
  }
  .pick-sol-hero-note {
    font-size: 13px;
    color: #cbd5f5;
    margin-top: 4px;
  }
  
  /* ===================================
     TABS GIẢI PHÁP
  =================================== */
  
  .pick-sol-tabs-section {
    background-color: #ffffff;
  }
  
  .pick-sol-tabs .tab-panels {
    /* Flatsome sẽ render, ta chỉ style nội dung bên trong */
  }
  .pick-sol-tabs h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
  }
  .pick-sol-tabs p {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.8;
  }
  .pick-sol-tabs ul {
    margin: 0 0 8px 18px;
    padding: 0;
  }
  .pick-sol-tabs li {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
  }
  .pick-sol-tab-highlight {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 6px;
  }
  
  /* side image box */
  
  .pick-sol-sidebox {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }
  .pick-sol-sidebox .box-text {
    padding-top: 18px !important;
  }
  .pick-sol-sidebox h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
  }
  .pick-sol-sidebox p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.8;
  }
  
  /* ===================================
     QUY TRÌNH
  =================================== */
  
  .pick-sol-flow {
    background-color: #f9fafb;
  }
  
  .pick-sol-flow-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 16px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
  }
  .pick-sol-flow-card__step {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--fs-color-secondary);
    margin-bottom: 6px;
  }
  .pick-sol-flow-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
  }
  .pick-sol-flow-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
  }
  
  /* ===================================
     GÓI DỊCH VỤ
  =================================== */
  
  .pick-sol-packages {
    background-color: #ffffff;
  }
  
  .pick-sol-package-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 20px 18px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
  }
  .pick-sol-package-card--primary {
    border: 1px solid rgba(87, 188, 89, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }
  .pick-sol-package-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
  }
  .pick-sol-package-card ul {
    margin: 0 0 8px 18px;
    padding: 0;
  }
  .pick-sol-package-card li {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
  }
  .pick-sol-package-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
  }
  
  /* ===================================
     FAQ
  =================================== */
  
  .pick-sol-faq {
    background-color: #f9fafb;
  }
  
  .pick-sol-faq-accordion .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
  }
  .pick-sol-faq-accordion .accordion-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
  }
  .pick-sol-faq-accordion .accordion-inner {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
  }
  
  .pick-sol-faq-sidebox {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 18px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
  }
  .pick-sol-faq-sidebox h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
  }
  .pick-sol-faq-sidebox p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
  }
  
  /* ===================================
     CTA CUỐI TRANG
  =================================== */
  
  .pick-sol-cta {
    background-color: var(--primary-color);
  }
  
  .pick-sol-cta__title .section-title-main {
    color: #f9fafb;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .pick-sol-cta__subtitle {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 22px auto;
    color: #e5e7eb;
  }
  
  /* ===================================
     RESPONSIVE
  =================================== */
  
  @media (max-width: 768px) {
    .pick-sol-hero-title .section-title-main {
      font-size: 24px;
    }
  
    .pick-sol-hero-desc {
      max-width: 100%;
    }
  
    .pick-sol-hero-actions {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .pick-sol-sidebox,
    .pick-sol-flow-card,
    .pick-sol-package-card,
    .pick-sol-faq-sidebox {
      margin-bottom: 12px;
    }
  }
/* =========================
   PROJECTS – HERO
========================= */

.pick-projects-hero {
    background-color: #020e1c;
  }
  .pick-projects-hero .section-bg-overlay {
    background-color: rgba(0, 0, 0, 0.78);
  }
  
  .pick-projects-hero-title .section-title-main {
    color: #f9fafb;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
  
  .pick-projects-hero-desc {
    font-size: 15px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 90%;
    color: #e5e7eb;
    margin-bottom: 16px;
  }
  
  .pick-projects-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: #e5e7eb;
    margin-bottom: 18px;
  }
  .pick-projects-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .pick-projects-hero-meta i {
    color: var(--fs-color-secondary);
  }
  
  .pick-projects-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  
  /* Hero box */
  
  .pick-projects-hero-box {
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.5);
  }
  .pick-projects-hero-box h3 {
    font-size: 18px;
    color: #f9fafb;
    margin-bottom: 8px;
  }
  .pick-projects-hero-box ul {
    margin: 0 0 10px 18px;
    padding: 0;
  }
  .pick-projects-hero-box li {
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.7;
  }
  .pick-projects-hero-note {
    font-size: 13px;
    color: #cbd5f5;
    margin-top: 4px;
  }
  
  /* =========================
     PROJECTS – FILTER MENU
  ========================= */
  
  .pick-projects-filter {
    margin-top: 26px;
    gap: 0 20px;
  }
  .pick-projects-filter .ux-menu-link__link {
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #e5e7eb;
  }
  .pick-projects-filter .ux-menu-link__link:hover .ux-menu-link__text,
  .pick-projects-filter .ux-menu-link__link:focus .ux-menu-link__text {
    color: var(--fs-color-secondary);
  }
  
  /* =========================
     PROJECTS – GRID SECTIONS
  ========================= */
  
  .pick-projects-section {
    /* nền/padding đã set trong shortcode */
  }
  
  .pick-projects-grid-section {
    background-color: #ffffff;
  }
  .pick-projects-grid-section--alt {
    background-color: #f9fafb;
  }
  
  .pick-projects-grid {
    /* extra spacing if needed */
  }
  
  /* Project cards */
  
  .pick-project-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .pick-project-card .box-image img {
    border-radius: 18px 18px 0 0;
  }
  .pick-project-card .box-text {
    padding-top: 18px !important;
  }
  .pick-project-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 4px;
  }
  .pick-project-card-meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .pick-project-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
  }
  .pick-project-card .button {
    margin-top: 6px;
    font-size: 13px;
  }
  
  /* hover */
  
  .pick-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
  }
  
  /* =========================
     O&M SECTION
  ========================= */
  
  .pick-projects-om-section {
    background-color: #ffffff;
  }
  
  .pick-om-card {
    background: #f9fafb;
    border-radius: 16px;
    padding: 18px 16px 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
  }
  .pick-om-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(87, 188, 89, 0.12);
    color: var(--fs-color-secondary);
    margin-bottom: 8px;
  }
  .pick-om-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
  }
  .pick-om-card p {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
  }
  
  /* =========================
     STATS
  ========================= */
  
  .pick-projects-stats-section {
    background-color: #f9fafb;
  }
  
  .pick-stats__item .count-up {
    font-size: 42px;
    font-weight: 300;
    color: #013e73;
    line-height: 1;
  }
  .pick-stats__label {
    text-transform: uppercase;
    font-size: 12px;
    color: #888888;
    margin-top: 10px;
    display: block;
    letter-spacing: 1px;
  }
  
  /* =========================
     CTA CUỐI TRANG
  ========================= */
  
  .pick-projects-cta {
    background-color: var(--primary-color);
  }
  
  .pick-sol-cta__title .section-title-main {
    color: #f9fafb;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .pick-sol-cta__subtitle {
    font-size: 14px;
    font-weight: 300;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 22px auto;
    color: #e5e7eb;
  }
  
  /* =========================
     COMMON ELEMENTS (nếu chưa khai báo)
  ========================= */
  
  .pick-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(248, 250, 252, 0.08);
    margin-bottom: 16px;
  }
  .pick-hero-eyebrow i {
    color: #facc15;
    font-size: 15px;
  }
  .pick-hero-eyebrow span {
    color: #e5e7eb;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .pick-btn {
    font-weight: 500;
  }
  .pick-btn--primary {
    background: linear-gradient(90deg, var(--fs-color-secondary), #7fd87f) !important;
    border: none !important;
    color: #0f172a !important;
  }
  .pick-btn--ghost {
    border-width: 1px !important;
    border-radius: 999px !important;
  }
  
  .pick-section-title .section-title-main {
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
  }
  .pick-section-subtitle {
    font-size: 14px;
    color: #6b7280;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
  }
  
  /* =========================
     RESPONSIVE
  ========================= */
  
  @media (max-width: 768px) {
    .pick-projects-hero-title .section-title-main {
      font-size: 24px;
    }
  
    .pick-projects-hero-desc {
      max-width: 100%;
    }
  
    .pick-projects-hero-actions {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .pick-project-card,
    .pick-om-card {
      margin-bottom: 12px;
    }
  
    .pick-projects-filter {
      overflow-x: auto;
      padding-bottom: 4px;
    }
  }
    

/* FOOTER */
.pick-footer {
    background-color: #030A18;
    color: #e5e7eb;
    font-size: 14px;
}

/* Titles */

.pick-footer-heading {
    margin-bottom: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 15px;
    text-transform: uppercase;
    color: #e5e7eb;
}

.pick-footer-heading-sm {
    margin-bottom: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 15px;
    text-transform: uppercase;
    color: #e5e7eb;
}

/* Text */

.pick-footer-desc {
    font-size: 14px;
    color: #9ca3af;
    line-height: 1.9;
    margin-bottom: 12px;
    max-width: 95%;
}

.pick-footer-meta {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* =========================
     SOCIAL ICONS
  ========================= */

.pick-footer-social {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.pick-footer-social__item {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.08);
    color: #e5e7eb;
    font-size: 14px;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.pick-footer-social__item:hover {
    background: rgba(87, 188, 89, 0.18);
    color: #ffffff;
    transform: translateY(-1px);
}

/* =========================
     MENUS
  ========================= */

.footer-ux-menu .ux-menu-link__link {
    font-size: 14px;
    color: #9ca3af;
    padding: 4px 0;
}

.footer-ux-menu .ux-menu-link__link:hover {
    color: #ffffff;
}

/* Nếu divider kiểu solid của Flatsome hơi đậm, có thể chỉnh thêm: */
.footer-ux-menu.footer-ux-menu--left,
.footer-ux-menu.footer-ux-menu--right {
    --divider-color: rgba(55, 65, 81, 0.7);
}

/* =========================
     CONTACT BLOCK
  ========================= */

.pick-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pick-footer-contact__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pick-footer-contact__icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.pick-footer-contact__icon--location {
    background: rgba(250, 204, 21, 0.12);
    color: #facc15;
}

.pick-footer-contact__icon--phone {
    background: rgba(34, 197, 94, 0.12);
    color: #57BC59;
}

.pick-footer-contact__icon--mail {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

.pick-footer-contact__icon--time {
    background: rgba(129, 140, 248, 0.12);
    color: #a5b4fc;
}

.pick-footer-contact__text {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.7;
}

.pick-footer-contact__text a {
    color: #e5e7eb;
    font-weight: 600;
    text-decoration: none;
}

.pick-footer-contact__text a:hover {
    color: #57BC59;
}

/* =========================
     BOTTOM BAR
  ========================= */

.pick-footer-copy,
.pick-footer-credit {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 0;
}

.pick-footer-credit strong {
    color: #e5e7eb;
}

/* =========================
     RESPONSIVE
  ========================= */

@media (max-width: 768px) {

    .pick-footer-copy,
    .pick-footer-credit {
        text-align: left;
    }

    .pick-footer .col {
        margin-bottom: 20px;
    }
}