/**
 * Components CSS - Phạm Gia Mobility
 * Header, Footer, Badges, Buttons, Cards, Hero & Block Styles
 *
 * @package Pham_Gia_Mobility
 * @version 1.4.0
 */

/* ==========================================================================
   1. Header Navigation Bar
   ========================================================================== */

.pcg-site-nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: rgba(5, 5, 7, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--pcg-border);
    transition: var(--pcg-transition-smooth);
}

.pcg-nav-container {
    max-width: var(--pcg-wide-width);
    margin: 0 auto;
    padding: 1rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pcg-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: #ffffff;
    text-decoration: none;
}

.pcg-custom-logo {
    max-height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
}

.pcg-brand-text {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
}

.pcg-brand-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: var(--pcg-badge-bg);
    border: 1px solid var(--pcg-badge-border);
    color: #ffffff;
    vertical-align: middle;
}

.pcg-nav-menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.2rem;
}

.pcg-menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--pcg-border);
    border-radius: 8px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: var(--pcg-transition-smooth);
}

.pcg-menu-toggle:hover,
.pcg-menu-toggle:focus {
    border-color: var(--pcg-border-hover);
    background: rgba(255, 255, 255, 0.05);
}

.pcg-hamburger-box {
    width: 20px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.pcg-hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: var(--pcg-transition-smooth);
}

/* Biến đổi Hamburger sang chữ X khi mở Menu */
.pcg-menu-toggle.is-active .pcg-hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.pcg-menu-toggle.is-active .pcg-hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.pcg-menu-toggle.is-active .pcg-hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.pcg-nav-links {
    display: flex;
    align-items: center;
}

.pcg-menu-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

/* Các mục Menu cấp 1 */
.pcg-menu-list > li {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pcg-nav-links a,
.pcg-menu-list a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--pcg-text-secondary);
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: var(--pcg-transition-smooth);
}

.pcg-nav-links a:hover,
.pcg-menu-list a:hover {
    color: #ffffff;
}

/* Căn chỉnh liên kết cho mục cấp 1 */
.pcg-menu-list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0;
    white-space: nowrap;
}

/* Mũi tên chỉ báo cho mục Menu có cấp con (Dropdown Caret Indicator) */
.pcg-menu-list li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease, opacity 0.25s ease;
    margin-left: 4px;
    margin-top: -3px;
    opacity: 0.65;
    flex-shrink: 0;
}

.pcg-menu-list li.menu-item-has-children:hover > a::after,
.pcg-menu-list li.menu-item-has-children:focus-within > a::after,
.pcg-menu-list li.menu-item-has-children.is-dropdown-open > a::after {
    transform: rotate(225deg);
    margin-top: 1px;
    opacity: 1;
    color: #ffffff;
}

/* Khung Menu Xổ Xuống (Dropdown Sub-menu - Luxury Tech Glassmorphism) */
.pcg-menu-list .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: 0.6rem 0.4rem;
    background: rgba(10, 12, 18, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 18px 40px -4px rgba(0, 0, 0, 0.7), 0 0 24px rgba(59, 130, 246, 0.08);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.25s;
}

/* Cầu nối vô hình giúp chuột di chuyển từ mục cha xuống menu con không bị mất hover */
.pcg-menu-list .sub-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

/* Hiển thị Dropdown khi hover, keyboard focus hoặc có class .is-dropdown-open */
.pcg-menu-list li.menu-item-has-children:hover > .sub-menu,
.pcg-menu-list li.menu-item-has-children:focus-within > .sub-menu,
.pcg-menu-list li.menu-item-has-children.is-dropdown-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Các mục con bên trong Sub-menu */
.pcg-menu-list .sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.pcg-menu-list .sub-menu a {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--pcg-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: var(--pcg-transition-smooth);
    white-space: nowrap;
}

.pcg-menu-list .sub-menu a:hover,
.pcg-menu-list .sub-menu a:focus {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    transform: translateX(4px);
}

.pcg-menu-list .sub-menu li.current-menu-item > a {
    color: #60a5fa;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.08);
}

/* Không hiển thị gạch chân thanh active bên trong sub-menu */
.pcg-menu-list .sub-menu li.current-menu-item > a::after {
    display: none !important;
}

/* Trạng thái Active cho mục Menu cấp 1 đang xem (gắn vào li::after để không xung đột với caret) */
.pcg-menu-list > li.current-menu-item > a,
.pcg-menu-list > li.current_page_item > a,
.pcg-menu-list > li.current-menu-ancestor > a,
.pcg-fallback-menu > li.current-menu-item > a {
    color: #ffffff;
    font-weight: 600;
}

.pcg-menu-list > li.current-menu-item::after,
.pcg-menu-list > li.current_page_item::after,
.pcg-menu-list > li.current-menu-ancestor::after,
.pcg-fallback-menu > li.current-menu-item::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #38BDF8 0%, #0099FF 100%);
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(0, 168, 255, 0.75);
}

.pcg-nav-cta-wrapper,
.pcg-site-nav .pcg-nav-cta-wrapper,
.pcg-nav-btn,
.pcg-nav-search-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* ==========================================================================
   2. Badges & Buttons
   ========================================================================== */

.pcg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    background: var(--pcg-badge-bg);
    border: 1px solid var(--pcg-badge-border);
    font-size: 0.725rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--pcg-badge-text);
    margin-bottom: 1.5rem;
}

.wp-block-button__link,
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.4rem;
    background-color: var(--pcg-btn-bg);
    color: var(--pcg-btn-text) !important;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 9999px;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.08);
    transition: var(--pcg-transition-smooth);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus {
    background-color: var(--pcg-btn-hover-bg);
    color: var(--pcg-btn-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255, 255, 255, 0.18);
}

.wp-block-button__link:active,
.wp-element-button:active {
    transform: translateY(0);
}

.is-style-outline .wp-block-button__link,
.is-style-outline .wp-element-button {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    border: 1px solid var(--pcg-border) !important;
    backdrop-filter: blur(8px);
    box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-element-button:hover {
    border-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   3. Sections & Hero Banners
   ========================================================================== */

.pcg-section {
    padding: 6.5rem 1.5rem !important;
    position: relative;
}

.pcg-section-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 4.5rem;
}

.pcg-section-title {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.pcg-section-subtitle {
    font-size: 1.05rem;
    color: var(--pcg-text-secondary);
    line-height: 1.7;
}

.pcg-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88vh;
    padding: 7rem 1.5rem 5rem !important;
    text-align: center;
    background: radial-gradient(ellipse 75% 55% at 50% 25%, rgba(50, 50, 68, 0.45) 0%, #050507 80%);
    border-bottom: 1px solid var(--pcg-border);
    overflow: hidden;
}

.pcg-page-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5.5rem 1.5rem 3.5rem !important;
    text-align: center;
    background: radial-gradient(ellipse 65% 50% at 50% 25%, rgba(45, 45, 60, 0.4) 0%, #050507 80%);
    border-bottom: 1px solid var(--pcg-border);
}

.pcg-hero-section .pcg-title,
.pcg-page-hero-section .pcg-title {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pcg-text-primary);
    margin-bottom: 1.25rem;
    line-height: 1.1;
}

.pcg-hero-section .pcg-description,
.pcg-page-hero-section .pcg-description {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 400;
    color: var(--pcg-text-secondary);
    margin-bottom: 2.5rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.pcg-hero-mockup-wrapper {
    margin-top: 3.5rem;
    width: 100%;
    max-width: 820px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--pcg-border);
    box-shadow: 0 25px 65px -15px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 255, 255, 0.03);
    background-color: var(--pcg-bg-surface);
}

.pcg-hero-mockup-wrapper img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   4. Luxury Tech Cards & Micro-interactions
   ========================================================================== */

.pcg-brand-section {
    border-bottom: 1px solid var(--pcg-border);
}

.pcg-brand-card,
.pcg-stat-card {
    background-color: var(--pcg-bg-surface);
    border: 1px solid var(--pcg-border);
    border-radius: 16px;
    padding: 2.5rem 2rem !important;
    position: relative;
    transition: var(--pcg-transition-smooth);
}

.pcg-stat-card:hover,
.pcg-brand-card:hover {
    border-color: var(--pcg-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.pcg-stat-number {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -1.5px;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.pcg-stat-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.pcg-stat-desc {
    font-size: 0.95rem;
    color: var(--pcg-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

.pcg-collection-section {
    border-bottom: 1px solid var(--pcg-border);
}

.pcg-feature-card {
    background-color: var(--pcg-bg-surface);
    border: 1px solid var(--pcg-border);
    border-radius: 16px;
    padding: 2rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--pcg-transition-smooth);
    overflow: hidden;
    position: relative;
}

.pcg-feature-card:hover {
    border-color: var(--pcg-border-hover);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.pcg-card-image {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.75rem;
    background: #08080a;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pcg-card-image img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.pcg-feature-card:hover .pcg-card-image img {
    transform: scale(1.03);
}

.pcg-card-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pcg-text-muted);
    margin-bottom: 0.6rem;
}

.pcg-feature-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.85rem;
    color: var(--pcg-text-primary);
}

.pcg-feature-card p {
    font-size: 0.95rem;
    color: var(--pcg-text-secondary);
    line-height: 1.65;
    margin-bottom: 1.75rem;
    flex-grow: 1;
}

.pcg-tech-section {
    border-bottom: 1px solid var(--pcg-border);
    background: radial-gradient(circle at 50% 50%, #0d0d12 0%, #050507 70%);
}

.pcg-tech-card {
    background-color: rgba(14, 14, 18, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pcg-border);
    border-radius: 14px;
    padding: 2.25rem 1.85rem !important;
    transition: var(--pcg-transition-smooth);
}

.pcg-tech-card:hover {
    border-color: var(--pcg-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.pcg-tech-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.pcg-tech-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    color: var(--pcg-text-primary);
}

.pcg-tech-card p {
    font-size: 0.95rem;
    color: var(--pcg-text-secondary);
    line-height: 1.65;
    margin-bottom: 0;
}

.pcg-contact-section {
    padding: 6.5rem 1.5rem !important;
    background: linear-gradient(180deg, #050507 0%, #0d0d12 100%);
    border-bottom: 1px solid var(--pcg-border);
}

.pcg-contact-card {
    background-color: var(--pcg-bg-surface);
    border: 1px solid var(--pcg-border);
    border-radius: 16px;
    padding: 2.75rem 2.25rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pcg-contact-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.pcg-contact-list {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0;
}

.pcg-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    color: var(--pcg-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pcg-contact-list strong {
    color: #ffffff;
    min-width: 110px;
}

/* ==========================================================================
   5. Interactive Scroll Reveal
   ========================================================================== */

.pcg-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.pcg-reveal.pcg-is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   6. Gutenberg Blocks & Core Helpers
   ========================================================================== */

.wp-block-columns {
    gap: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

blockquote,
.wp-block-quote {
    border-left: 3px solid var(--pcg-border);
    padding: 1.25rem 1.75rem;
    margin: 2.5rem 0;
    background-color: var(--pcg-bg-surface);
    border-radius: 0 10px 10px 0;
}

blockquote p,
.wp-block-quote p {
    color: var(--pcg-text-primary);
    font-style: italic;
    margin-bottom: 0.5rem;
}

blockquote cite,
.wp-block-quote cite {
    font-size: 0.875rem;
    color: var(--pcg-text-muted);
}

hr,
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--pcg-border);
    margin: 4rem auto;
    width: 100%;
}

pre, code {
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    font-size: 0.9em;
}

code {
    background-color: var(--pcg-bg-surface);
    color: #e4e4e7;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--pcg-border);
}

pre {
    background-color: var(--pcg-bg-surface);
    border: 1px solid var(--pcg-border);
    border-radius: 8px;
    padding: 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ==========================================================================
   7. Footer Section
/* ==========================================================================
   7. Phông nền mờ Mobile Nav Backdrop & Corporate Luxury Tech Footer (v1.6.0)
   ========================================================================== */

.pcg-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 5, 10, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pcg-nav-backdrop.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.pcg-submenu-toggle {
    display: none;
}

.pcg-footer,
.pcg-corporate-footer {
    border-top: 1px solid rgba(56, 189, 248, 0.2);
    padding: 5rem 1.5rem 2.5rem;
    background: #050812;
    background: linear-gradient(180deg, #070c1a 0%, #03050a 100%);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

.pcg-corporate-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.65) 0%, transparent 80%);
    pointer-events: none;
}

.pcg-footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1.15fr 1.15fr 1.7fr;
    gap: 3.5rem;
    margin-bottom: 3.5rem;
    text-align: left;
}

.pcg-footer-col {
    display: flex;
    flex-direction: column;
}

.pcg-footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.pcg-footer-brand-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffffff;
    text-transform: uppercase;
}

.pcg-footer-logo {
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

.pcg-footer-desc {
    font-size: 0.92rem;
    color: rgba(226, 232, 240, 0.78);
    margin-bottom: 1.25rem;
    line-height: 1.65;
    max-width: 380px;
}

.pcg-footer-motto {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #38BDF8;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
}

.pcg-motto-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38BDF8;
    box-shadow: 0 0 8px #38BDF8;
    flex-shrink: 0;
}

.pcg-footer-heading {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #38BDF8 !important;
    text-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
    margin-top: 0;
    margin-bottom: 1.4rem;
    position: relative;
    padding-bottom: 0.65rem;
}

.pcg-footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #38BDF8 0%, #0099FF 100%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.pcg-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pcg-footer-links a {
    color: rgba(226, 232, 240, 0.72);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
}

.pcg-footer-links a:hover {
    color: #38BDF8;
    transform: translateX(4px);
}

.pcg-footer-sublinks {
    margin-bottom: 1.25rem;
}

.pcg-footer-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.88rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1.15rem;
}

.pcg-footer-contact-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: baseline;
    color: rgba(226, 232, 240, 0.78);
    line-height: 1.5;
}

.pcg-contact-label {
    font-weight: 600;
    color: #ffffff;
    flex-shrink: 0;
    min-width: 72px;
}

.pcg-contact-val {
    color: rgba(226, 232, 240, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pcg-contact-val:hover {
    color: #38BDF8;
}

.pcg-contact-hotline {
    color: #38BDF8 !important;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.3px;
}

.pcg-footer-action-row {
    margin-top: 0.35rem;
}

.pcg-footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #38BDF8;
    text-decoration: none;
    transition: all 0.25s ease;
}

.pcg-footer-contact-link:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.pcg-footer-contact-link .pcg-link-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.pcg-footer-contact-link:hover .pcg-link-arrow {
    transform: translateX(3px);
}

.pcg-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.pcg-social-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(226, 232, 240, 0.8);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}

.pcg-social-pill:hover {
    background: rgba(0, 168, 255, 0.1);
    border-color: rgba(56, 189, 248, 0.45);
    color: #38BDF8;
    box-shadow: 0 0 16px rgba(0, 168, 255, 0.3);
    transform: translateY(-2px);
}

.pcg-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.pcg-footer-copyright {
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.6);
}

.pcg-footer-legal-link {
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pcg-footer-legal-link:hover {
    color: #38BDF8;
}

/* ==========================================================================
   8. 404 Error Page
   ========================================================================== */

.pcg-404-site {
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem;
}

.pcg-404-container {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.pcg-404-actions {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

/* ==========================================================================
   9. Corporate Architecture & Strategic Components (v1.7.0)
   ========================================================================== */

.pcg-card-spotlight {
    position: relative;
    background-color: var(--pcg-card-surface, var(--pcg-bg-surface));
    backdrop-filter: var(--pcg-card-blur);
    -webkit-backdrop-filter: var(--pcg-card-blur);
    border: 1px solid var(--pcg-card-border, var(--pcg-border));
    border-radius: 16px;
    padding: 2.25rem 2rem !important;
    transition: var(--pcg-transition-smooth);
    box-shadow: var(--pcg-card-shadow);
    overflow: hidden;
}

.pcg-card-spotlight:hover {
    background-color: var(--pcg-card-surface-hover, var(--pcg-bg-surface));
    border-color: var(--pcg-card-border-hover, var(--pcg-border-hover));
    transform: translateY(-4px);
    box-shadow: var(--pcg-card-shadow-hover);
}

/* Corporate Overview */
.pcg-overview-narrative h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--pcg-text-primary);
}

.pcg-overview-narrative p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--pcg-text-secondary);
    margin-bottom: 1.5rem;
}

.pcg-principle-card {
    margin-bottom: 1.25rem;
    padding: 1.5rem 1.75rem !important;
}

.pcg-principle-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--pcg-text-primary);
}

.pcg-principle-card p {
    font-size: 0.95rem;
    color: var(--pcg-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Strategic Pillars */
.pcg-pillar-card {
    padding: 2.75rem 2.25rem !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pcg-pillar-tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #60a5fa;
    margin-bottom: 0.75rem;
}

.pcg-pillar-title {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    color: var(--pcg-text-primary);
}

.pcg-pillar-desc {
    font-size: 1rem;
    color: var(--pcg-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.pcg-pillar-list,
.pcg-culture-checklist {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 1.5rem;
}

.pcg-pillar-list li,
.pcg-culture-checklist li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    color: var(--pcg-text-secondary);
    line-height: 1.6;
}

.pcg-pillar-list li::before,
.pcg-culture-checklist li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #60a5fa;
    font-weight: bold;
}

/* Vision & Values */
.pcg-vm-row {
    margin-bottom: 2rem;
}

.pcg-vm-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    color: var(--pcg-text-primary);
}

.pcg-vm-card p {
    font-size: 1rem;
    color: var(--pcg-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

.pcg-val-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pcg-border);
    border-radius: 12px;
    padding: 1.5rem !important;
    height: 100%;
    transition: var(--pcg-transition-smooth);
}

.pcg-val-card:hover {
    border-color: var(--pcg-border-hover);
    background-color: var(--pcg-bg-surface);
}

.pcg-val-card h4 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--pcg-text-primary);
    margin-bottom: 0.5rem;
}

.pcg-val-card p {
    font-size: 0.9rem;
    color: var(--pcg-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Ecosystem Grid */
.pcg-eco-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.pcg-status-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    margin-bottom: 1.25rem;
}

.pcg-status-badge.is-active {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.pcg-status-badge.is-research {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.pcg-status-badge.is-planned {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pcg-border);
    color: var(--pcg-text-muted);
}

.pcg-placeholder-note {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--pcg-text-muted);
    margin-top: auto;
    padding-top: 1rem;
}

.pcg-button-link a {
    color: #60a5fa !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0 !important;
    background: none !important;
}

.pcg-button-link a:hover {
    text-decoration: underline !important;
}

/* Roadmap Grid */
.pcg-phase-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #60a5fa;
    margin-bottom: 0.5rem;
}

.pcg-roadmap-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    color: var(--pcg-text-primary);
}

.pcg-roadmap-card p {
    font-size: 0.95rem;
    color: var(--pcg-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Culture & Careers */
.pcg-culture-cta {
    margin-top: 1.5rem;
}

/* ==========================================================================
   Corporate Visual System & Image Styling (v1.8.0)
   ========================================================================== */

/* ==========================================================================
   1. Corporate Hero & Cinematic Luxury Tech Hero (v1.11.0)
   Áp dụng layout Cinematic full-bleed, căn trái trên desktop, gradient điện ảnh,
   bảo toàn 100% hình ảnh Media Library và nội dung quản trị viên đã lưu.
   ========================================================================== */

/* ==========================================================================
   Hero Section — Cinematic Luxury Tech (v1.11.1)
   Khắc phục triệt để căn lề: Khung bao 1260px căn giữa theo viewport,
   Toàn bộ chữ, badge và 2 nút CTA neo cứng về mép trái (khối chữ 600-760px),
   bảo toàn 100% hình ảnh Media Library và nội dung quản trị viên đã lưu.
   ========================================================================== */

.pcg-corp-hero-cover,
.pcg-hero-cinematic,
.pcg-corp-hero {
    min-height: clamp(580px, 70vh, 720px) !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: clamp(4.5rem, 8vh, 6.5rem) !important;
    padding-bottom: clamp(4.5rem, 8vh, 6.5rem) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Gradient overlay ngang điện ảnh: tối đậm ở bên trái cho chữ sắc nét, mờ dần sang phải làm nổi bật hình ảnh công nghệ */
.pcg-corp-hero-cover .wp-block-cover__background,
.pcg-hero-cinematic .wp-block-cover__background,
.pcg-corp-hero .wp-block-cover__background {
    background: linear-gradient(90deg, 
        rgba(4, 8, 16, 0.96) 0%, 
        rgba(5, 10, 20, 0.90) 42%, 
        rgba(6, 12, 22, 0.50) 72%, 
        rgba(5, 10, 20, 0.65) 100%) !important;
}

/* Khung bao nội dung 1260px căn giữa theo Viewport, đồng bộ với Header và phần còn lại của website */
.pcg-corp-hero-cover .wp-block-cover__inner-container,
.pcg-hero-cinematic .wp-block-cover__inner-container,
.pcg-corp-hero .wp-block-cover__inner-container {
    max-width: var(--pcg-wide-width, 1260px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

/* Khối nội dung nằm trọn về nửa trái (chiều rộng 600px - 760px), neo cứng mép trái, không bị căn giữa */
.pcg-hero-cinematic-content,
.pcg-corp-hero-cover .wp-block-cover__inner-container > .wp-block-group,
.pcg-hero-cinematic .wp-block-cover__inner-container > .wp-block-group,
.pcg-corp-hero .wp-block-cover__inner-container > .wp-block-group {
    max-width: clamp(600px, 52vw, 760px) !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Hỗ trợ tương thích ngược hoàn hảo cho trang đã lưu trên production (các phần tử con trực tiếp của inner-container) */
.pcg-corp-hero-cover .wp-block-cover__inner-container > *,
.pcg-hero-cinematic .wp-block-cover__inner-container > *,
.pcg-corp-hero .wp-block-cover__inner-container > * {
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    text-align: left !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
}

/* Huy hiệu mở đầu */
.pcg-corp-hero-cover .pcg-badge,
.pcg-hero-cinematic .pcg-badge,
.pcg-corp-hero .pcg-badge,
.pcg-badge-cyan,
.pcg-badge-arrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #38BDF8 !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    align-self: flex-start !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-shadow: none !important;
}

/* Tiêu đề lớn căn trái, giới hạn 600-760px để không tràn sang hình ảnh xe */
.pcg-corp-hero-cover .pcg-title,
.pcg-hero-cinematic .pcg-title,
.pcg-corp-hero .pcg-title,
.pcg-corp-hero-cover h1,
.pcg-hero-cinematic h1,
.pcg-corp-hero h1,
.pcg-corp-hero-cover h2,
.pcg-hero-title {
    max-width: clamp(600px, 52vw, 760px) !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    text-align: left !important;
    align-self: flex-start !important;
    font-size: clamp(2.2rem, 4.2vw, 3.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.5px !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    text-transform: uppercase !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
    overflow: visible !important;
}

/* Chữ dưới & ĐỔI MỚI SÁNG TẠO: Màu chuyển sắc gradient Xanh Dương chuẩn nét, chóa nhẹ tinh tế, không cắt dấu tiếng Việt */
.pcg-text-accent,
.pcg-text-cyan,
.pcg-title-gradient,
.pcg-corp-hero-cover .pcg-title .pcg-text-accent,
.pcg-corp-hero-cover .pcg-title .pcg-title-gradient,
.pcg-hero-cinematic .pcg-title .pcg-text-accent,
.pcg-hero-cinematic .pcg-title .pcg-title-gradient,
.pcg-corp-hero .pcg-title .pcg-text-accent,
.pcg-corp-hero .pcg-title .pcg-title-gradient {
    background: linear-gradient(180deg, #38BDF8 0%, #0088FF 55%, #0055D4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    color: #38BDF8 !important;
    display: inline-block !important;
    padding: 0.22em 0.08em 0.22em 0.02em !important;
    margin: -0.22em -0.08em -0.22em -0.02em !important;
    line-height: 1.28 !important;
    overflow: visible !important;
    vertical-align: bottom !important;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45)) drop-shadow(0 0 16px rgba(0, 136, 255, 0.25)) !important;
    text-shadow: none !important;
}

/* Đoạn mô tả căn trái, giới hạn 540-680px để giữ nhịp đọc trang nhã */
.pcg-corp-hero-cover .pcg-description,
.pcg-hero-cinematic .pcg-description,
.pcg-corp-hero .pcg-description,
.pcg-corp-hero-cover p.has-text-align-center,
.pcg-hero-cinematic p.has-text-align-center,
.pcg-corp-hero p.has-text-align-center,
.pcg-hero-desc {
    max-width: clamp(540px, 46vw, 680px) !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    text-align: left !important;
    align-self: flex-start !important;
    font-size: clamp(1rem, 1.35vw, 1.15rem) !important;
    line-height: 1.7 !important;
    color: rgba(226, 232, 240, 0.88) !important;
    margin-top: 0 !important;
    margin-bottom: 2.25rem !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* Cụm 2 nút bấm CTA căn sát mép trái */
.pcg-corp-hero-cover .wp-block-buttons,
.pcg-hero-cinematic .wp-block-buttons,
.pcg-corp-hero .wp-block-buttons,
.pcg-hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.15rem !important;
    max-width: clamp(600px, 52vw, 760px) !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    align-self: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Nút CTA 1: Electric Cyan Glow (Pill Button Luxury Tech) */
.pcg-corp-hero-cover .pcg-button-primary .wp-block-button__link,
.pcg-corp-hero .pcg-button-primary .wp-block-button__link,
.pcg-btn-glow .wp-block-button__link,
.pcg-button-primary .wp-block-button__link {
    background: linear-gradient(135deg, #00A8FF 0%, #0066FF 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 0.85rem 2rem !important;
    border-radius: 9999px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    font-size: 0.88rem !important;
    box-shadow: 0 4px 22px rgba(0, 168, 255, 0.5), 0 0 35px rgba(0, 102, 255, 0.3) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
}

.pcg-corp-hero-cover .pcg-button-primary .wp-block-button__link:hover,
.pcg-corp-hero .pcg-button-primary .wp-block-button__link:hover,
.pcg-btn-glow .wp-block-button__link:hover,
.pcg-button-primary .wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 30px rgba(0, 168, 255, 0.7), 0 0 45px rgba(0, 102, 255, 0.45) !important;
    background: linear-gradient(135deg, #38BDF8 0%, #0077FF 100%) !important;
    color: #ffffff !important;
}

/* Nút CTA 2: Frosted Glass Luxury Outline (Pill Button) */
.pcg-corp-hero-cover .pcg-button-secondary .wp-block-button__link,
.pcg-corp-hero .pcg-button-secondary .wp-block-button__link,
.pcg-btn-glass .wp-block-button__link,
.pcg-button-secondary .wp-block-button__link {
    background: rgba(10, 16, 28, 0.65) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.85rem 2rem !important;
    border-radius: 9999px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    font-size: 0.88rem !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.pcg-corp-hero-cover .pcg-button-secondary .wp-block-button__link:hover,
.pcg-corp-hero .pcg-button-secondary .wp-block-button__link:hover,
.pcg-btn-glass .wp-block-button__link:hover,
.pcg-button-secondary .wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    border-color: #38BDF8 !important;
    color: #38BDF8 !important;
    background: rgba(0, 168, 255, 0.12) !important;
    box-shadow: 0 6px 24px rgba(0, 168, 255, 0.35) !important;
}

/* ==========================================================================
   Dải 4 Giá trị Nổi bật - Luxury Tech Unified Values Bar (v1.11.0)
   Thanh kính mờ liền khối nổi sát mép dưới Hero với 4 mục phân tách bằng vạch đứng mờ.
   ========================================================================== */

.pcg-values-strip-wrapper {
    position: relative;
    z-index: 10;
    margin-top: -38px;
    margin-bottom: 3.5rem;
    padding: 0 1.5rem;
    width: 100% !important;
    max-width: var(--pcg-wide-width, 1360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.pcg-values-strip-card {
    background: rgba(8, 14, 26, 0.82) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 16px !important;
    padding: 1.15rem 1.25rem !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 28px rgba(0, 168, 255, 0.12) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pcg-values-strip-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    align-items: center !important;
}

.pcg-value-col {
    width: 100% !important;
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 0.5rem 1.25rem !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.pcg-value-col:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 15% !important;
    height: 70% !important;
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.3), transparent) !important;
}

.pcg-value-item {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    height: 100% !important;
    box-shadow: none !important;
    transition: transform 0.25s ease !important;
}

.pcg-value-item:hover {
    transform: translateY(-2px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pcg-value-icon-box {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(0, 168, 255, 0.1) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
    color: #38BDF8 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 16px rgba(0, 168, 255, 0.35) !important;
    margin-bottom: 0 !important;
    transition: all 0.3s ease !important;
}

.pcg-value-icon-box svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #38BDF8 !important;
}

.pcg-value-item:hover .pcg-value-icon-box {
    border-color: #00A8FF !important;
    box-shadow: 0 0 25px rgba(0, 168, 255, 0.65) !important;
    transform: scale(1.08) !important;
}

.pcg-value-text-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.pcg-value-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 0.2rem 0 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.pcg-value-desc {
    font-size: 0.8rem !important;
    color: rgba(226, 232, 240, 0.72) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   Corporate Overview Section — Bố cục 2 cột & 3 Nguyên tắc (v1.11.0)
   Giữ bố cục cân đối kinh điển: Badge & Tiêu đề căn giữa -> 2 cột (Câu chuyện + Ảnh lớn) -> 3 Card nguyên tắc nằm ngang.
   ========================================================================== */

.pcg-corp-overview-section {
    position: relative;
    width: 100% !important;
}

.pcg-corp-overview-section .pcg-section-header {
    text-align: center;
    max-width: 860px !important;
    margin: 0 auto 3.5rem auto !important;
}

.pcg-overview-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px;
    margin-top: 0.65rem !important;
    margin-bottom: 1.25rem !important;
    color: #ffffff !important;
}

.pcg-overview-desc {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: rgba(226, 232, 240, 0.82) !important;
    margin: 0 auto !important;
    max-width: 760px;
}

/* Khung 2 cột: Câu chuyện bên trái, Ảnh kỹ thuật bên phải */
.pcg-overview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3.5rem;
    align-items: center;
    margin-bottom: 3.5rem !important;
}

.pcg-overview-narrative {
    flex: 1 1 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pcg-overview-narrative h3 {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.35 !important;
}

.pcg-overview-narrative p {
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
    color: rgba(226, 232, 240, 0.84) !important;
    margin-bottom: 1.25rem !important;
}

.pcg-overview-cta {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}

.pcg-overview-visual {
    flex: 1 1 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hình ảnh kỹ thuật lớn, bo góc cao cấp và viền phản chiếu ánh sáng */
.pcg-img-rounded,
.pcg-img-rounded figure,
.pcg-img-rounded img {
    border-radius: 16px !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 140, 255, 0.1) !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.pcg-img-rounded:hover img {
    transform: scale(1.015) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.75), 0 0 36px rgba(0, 140, 255, 0.2) !important;
}

/* Lưới 3 Nguyên tắc hoạt động nằm ngang ở cuối section */
.pcg-principles-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
}

.pcg-principles-col {
    width: 100% !important;
    flex-basis: auto !important;
    margin: 0 !important;
}

.pcg-principle-card {
    background: rgba(11, 17, 28, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 14px !important;
    padding: 1.85rem 1.65rem !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 140, 255, 0.05) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease,
                background 0.3s ease !important;
}

.pcg-principle-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 26px rgba(0, 140, 255, 0.18) !important;
    background: rgba(14, 23, 38, 0.92) !important;
}

.pcg-principle-card h4 {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: #38BDF8 !important;
    letter-spacing: 0.2px;
    margin: 0 0 0.75rem 0 !important;
    line-height: 1.35 !important;
}

.pcg-principle-card p {
    font-size: 0.9rem !important;
    color: rgba(226, 232, 240, 0.78) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Corporate Overview Section — 4 Thẻ Kỹ nghệ Luxury Tech (v1.11.0)
   Bố cục chuẩn tham chiếu: Cột trái 28% (câu chuyện, định hướng & nút bo tròn),
   Cột phải 72% dàn 4 thẻ ngang hàng (repeat(4, 1fr)) với thẻ 3 viền Cyan rực sáng.
   ========================================================================== */

.pcg-overview-cards-layout {
    display: flex !important;
    flex-direction: row !important;
    gap: 2.5rem !important;
    align-items: center !important;
    width: 100% !important;
}

.pcg-overview-narrative-col {
    flex: 0 0 28% !important;
    min-width: 280px !important;
    max-width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.pcg-overview-narrative-col .pcg-badge {
    color: #38BDF8 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 0.75rem !important;
    text-shadow: 0 0 14px rgba(0, 140, 255, 0.35) !important;
}

.pcg-overview-narrative-col .pcg-overview-title {
    font-size: clamp(1.85rem, 2.8vw, 2.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    color: #ffffff !important;
}

.pcg-overview-narrative-col .pcg-overview-text {
    font-size: 0.96rem !important;
    line-height: 1.7 !important;
    color: rgba(226, 232, 240, 0.82) !important;
    margin-bottom: 1.85rem !important;
}

/* Nút Tìm hiểu thêm dạng Pill Outline chuẩn Luxury Tech */
.pcg-btn-pill-outline .wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 0.7rem 1.65rem !important;
    border-radius: 9999px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.pcg-btn-pill-outline .wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    border-color: #38BDF8 !important;
    color: #38BDF8 !important;
    background: rgba(0, 140, 255, 0.12) !important;
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.35) !important;
}

.pcg-overview-cards-col {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

/* Lưới 4 thẻ nằm trên một hàng ngang */
.pcg-overview-4-cards-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.15rem !important;
    width: 100% !important;
    margin: 0 !important;
}

.pcg-overview-visual-card {
    background: rgba(10, 16, 28, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease,
                background 0.3s ease !important;
}

.pcg-overview-visual-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 22px rgba(0, 140, 255, 0.22) !important;
    background: rgba(12, 20, 36, 0.92) !important;
}

/* Điểm nhấn thẻ số 3 (Hợp tác & Phát triển) với viền Cyber Azure phát sáng */
.pcg-overview-visual-card.is-featured {
    border: 1.8px solid #38BDF8 !important;
    box-shadow: 0 0 28px rgba(0, 140, 255, 0.38), 0 16px 40px rgba(0, 0, 0, 0.65) !important;
    background: rgba(12, 22, 38, 0.92) !important;
}

.pcg-overview-visual-card.is-featured:hover {
    box-shadow: 0 0 36px rgba(0, 140, 255, 0.55), 0 20px 48px rgba(0, 0, 0, 0.75) !important;
}

.pcg-card-thumb-img,
.pcg-card-thumb-img figure,
.pcg-card-thumb-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    transition: transform 0.4s ease;
}

.pcg-overview-visual-card:hover .pcg-card-thumb-img img {
    transform: scale(1.03);
}

.pcg-overview-visual-card .pcg-card-body {
    padding: 1.15rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    flex: 1 !important;
}

.pcg-card-body-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0, 140, 255, 0.1) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.38) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #38BDF8 !important;
    margin-bottom: 0.45rem !important;
    box-shadow: 0 0 12px rgba(0, 140, 255, 0.2) !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.pcg-overview-visual-card:hover .pcg-card-body-icon {
    border-color: #38BDF8 !important;
    box-shadow: 0 0 18px rgba(0, 140, 255, 0.45) !important;
    transform: scale(1.08) !important;
}

.pcg-card-body-icon svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #38BDF8 !important;
}

.pcg-overview-visual-card .pcg-card-body h4 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
    text-transform: uppercase !important;
}

.pcg-overview-visual-card .pcg-card-body p {
    font-size: 0.8rem !important;
    color: rgba(226, 232, 240, 0.72) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* Khung card có ảnh (Trụ cột chiến lược & Hệ sinh thái) */
.pcg-card-thumb,
.pcg-card-thumb figure,
.pcg-card-thumb img {
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    margin: 0 0 1.25rem 0 !important;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    display: block;
}

.pcg-card-with-thumb {
    padding-top: 0 !important;
    overflow: hidden;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(11, 17, 28, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 140, 255, 0.05) !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.pcg-card-with-thumb:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 26px rgba(0, 140, 255, 0.18) !important;
}

.pcg-card-with-thumb .pcg-pillar-tag,
.pcg-card-with-thumb .pcg-status-badge {
    margin-top: 1.25rem;
}

.pcg-culture-visual-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   5. Corporate Subpage Styles (Corporate Suite)
   ========================================================================== */

/* Subpage Hero Cover */
.pcg-subpage-hero-cover {
    min-height: 440px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 1.5rem !important;
    overflow: hidden;
}

.pcg-subpage-hero-cover .wp-block-cover__background {
    background: linear-gradient(180deg, rgba(7, 10, 15, 0.90) 0%, rgba(10, 14, 22, 0.75) 50%, rgba(7, 10, 15, 0.95) 100%) !important;
}

.pcg-subpage-hero-cover .wp-block-cover__inner-container {
    max-width: var(--pcg-content-width);
    margin: 0 auto;
    z-index: 2;
    text-align: center;
    width: 100%;
}

/* Job Openings Grid & Cards */
.pcg-job-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pcg-border);
    border-radius: 14px;
    padding: 2rem 2.25rem !important;
    margin-bottom: 1.5rem;
    transition: var(--pcg-transition-smooth);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pcg-job-card:hover {
    border-color: rgba(212, 175, 55, 0.45);
    background: var(--pcg-bg-surface);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.pcg-job-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pcg-job-badge {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.pcg-job-badge.is-fulltime {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.25);
}

.pcg-job-badge.is-apprentice {
    background: rgba(212, 175, 55, 0.12);
    color: var(--pcg-gold-light);
    border-color: rgba(212, 175, 55, 0.28);
}

.pcg-job-meta {
    font-size: 0.85rem;
    color: var(--pcg-text-muted);
}

.pcg-job-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--pcg-text-primary);
    margin-bottom: 0.75rem;
}

.pcg-job-desc {
    font-size: 0.95rem;
    color: var(--pcg-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* Progression Steps */
.pcg-step-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--pcg-border);
    border-radius: 12px;
    padding: 1.75rem 1.5rem !important;
    text-align: center;
    height: 100%;
    transition: var(--pcg-transition-smooth);
}

.pcg-step-card:hover {
    border-color: var(--pcg-border-hover);
    background: var(--pcg-bg-surface);
}

.pcg-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.12);
    color: var(--pcg-gold-light);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.pcg-step-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--pcg-text-primary);
}

.pcg-step-card p {
    font-size: 0.9rem;
    color: var(--pcg-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ==========================================================================
   6. Luxury Tech Background Visual System (v1.10.0)
   ========================================================================== */

/* ==========================================================================
   6. Luxury Tech Background Visual System (v1.10.4)
   Bảo đảm nền Ambient phủ toàn bộ chiều ngang màn hình (Full-bleed)
   Tự động áp dụng cho cả trang đã xuất bản cũ và các Corporate Patterns mới.
   ========================================================================== */

/* Chung cho các Section Background & Full-Bleed Sections */
.pcg-bg-midnight-blue,
.is-style-pcg-bg-midnight-blue,
.pcg-bg-graphite-titanium,
.is-style-pcg-bg-graphite-titanium,
.pcg-bg-deep-navy,
.is-style-pcg-bg-deep-navy,
.pcg-bg-tech-grid,
.is-style-pcg-bg-tech-grid,
.pcg-bg-soft-surface,
.is-style-pcg-bg-soft-surface,
.pcg-corp-overview-section,
.pcg-about-origins-section,
.pcg-two-pillars-section,
.pcg-principles-section,
.pcg-tech-method-section,
.pcg-vision-values-section,
.pcg-tech-materials-section,
.pcg-eco-framework-section,
.pcg-ecosystem-section,
.pcg-roadmap-section,
.pcg-culture-careers-section,
.pcg-culture-mentorship-section,
.pcg-culture-standards-section,
.pcg-culture-progression-section,
.pcg-careers-benefits-section,
.pcg-jobs-list-section,
.pcg-hiring-process-section,
.pcg-partnership-section,
.pcg-contact-channels-section,
.pcg-contact-hq-section,
.pcg-tech-cta-section {
    position: relative;
    overflow: hidden;
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 1. Midnight Blue Ambient */
.pcg-corp-overview-section,
.pcg-about-origins-section,
.pcg-culture-careers-section,
.pcg-bg-midnight-blue,
.is-style-pcg-bg-midnight-blue {
    background-color: var(--pcg-bg-midnight-base);
    background-image: 
        radial-gradient(ellipse 80% 60% at 50% -10%, var(--pcg-ambient-blue-glow) 0%, rgba(15, 23, 42, 0) 70%),
        radial-gradient(circle at 85% 90%, var(--pcg-ambient-cyan-glow) 0%, transparent 50%);
}

/* 2. Graphite Titanium */
.pcg-two-pillars-section,
.pcg-principles-section,
.pcg-tech-method-section,
.pcg-culture-mentorship-section,
.pcg-roadmap-section,
.pcg-culture-progression-section,
.pcg-hiring-process-section,
.pcg-bg-graphite-titanium,
.is-style-pcg-bg-graphite-titanium {
    background-color: var(--pcg-bg-titanium-base);
    background-image: 
        linear-gradient(135deg, var(--pcg-titanium-sheen) 0%, transparent 40%, var(--pcg-titanium-sheen) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.28) 100%);
    border-top: 1px solid var(--pcg-titanium-highlight);
}

/* 3. Deep Navy Gradient */
.pcg-vision-values-section,
.pcg-tech-materials-section,
.pcg-eco-framework-section,
.pcg-culture-standards-section,
.pcg-careers-benefits-section,
.pcg-bg-deep-navy,
.is-style-pcg-bg-deep-navy {
    background: linear-gradient(180deg, var(--pcg-navy-top) 0%, var(--pcg-navy-mid) 55%, var(--pcg-navy-bottom) 100%);
    border-top: 1px solid rgba(59, 130, 246, 0.12);
}

/* 4. Subtle Technology Grid */
.pcg-ecosystem-section,
.pcg-jobs-list-section,
.pcg-bg-tech-grid,
.is-style-pcg-bg-tech-grid {
    background-color: var(--pcg-bg-grid-base);
    background-image: 
        linear-gradient(to right, var(--pcg-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pcg-grid-line) 1px, transparent 1px);
    background-size: var(--pcg-grid-size) var(--pcg-grid-size);
}

.pcg-ecosystem-section::before,
.pcg-jobs-list-section::before,
.pcg-bg-tech-grid::before,
.is-style-pcg-bg-tech-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 20%, var(--pcg-bg-grid-base) 90%);
}

.pcg-ecosystem-section > *,
.pcg-jobs-list-section > *,
.pcg-bg-tech-grid > *,
.is-style-pcg-bg-tech-grid > * {
    position: relative;
    z-index: 1;
}

/* 5. Soft Dark Surface */
.pcg-partnership-section,
.pcg-contact-channels-section,
.pcg-contact-hq-section,
.pcg-tech-cta-section,
.pcg-bg-soft-surface,
.is-style-pcg-bg-soft-surface {
    background-color: var(--pcg-bg-soft-surface);
    background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
    border-top: 1px solid var(--pcg-soft-surface-border);
    border-bottom: 1px solid var(--pcg-soft-surface-border);
}

/* Ưu tiên cao hơn cho các Gutenberg Block Styles được quản trị viên tùy biến */
.pcg-section.is-style-pcg-bg-midnight-blue,
.pcg-section.pcg-bg-midnight-blue {
    background-color: var(--pcg-bg-midnight-base) !important;
    background-image: 
        radial-gradient(ellipse 80% 60% at 50% -10%, var(--pcg-ambient-blue-glow) 0%, rgba(15, 23, 42, 0) 70%),
        radial-gradient(circle at 85% 90%, var(--pcg-ambient-cyan-glow) 0%, transparent 50%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.pcg-section.is-style-pcg-bg-graphite-titanium,
.pcg-section.pcg-bg-graphite-titanium {
    background-color: var(--pcg-bg-titanium-base) !important;
    background-image: 
        linear-gradient(135deg, var(--pcg-titanium-sheen) 0%, transparent 40%, var(--pcg-titanium-sheen) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.28) 100%) !important;
    border-top: 1px solid var(--pcg-titanium-highlight) !important;
}

.pcg-section.is-style-pcg-bg-deep-navy,
.pcg-section.pcg-bg-deep-navy {
    background: linear-gradient(180deg, var(--pcg-navy-top) 0%, var(--pcg-navy-mid) 55%, var(--pcg-navy-bottom) 100%) !important;
    border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
}

.pcg-section.is-style-pcg-bg-tech-grid,
.pcg-section.pcg-bg-tech-grid {
    background-color: var(--pcg-bg-grid-base) !important;
    background-image: 
        linear-gradient(to right, var(--pcg-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pcg-grid-line) 1px, transparent 1px) !important;
    background-size: var(--pcg-grid-size) var(--pcg-grid-size) !important;
}

.pcg-section.is-style-pcg-bg-soft-surface,
.pcg-section.pcg-bg-soft-surface {
    background-color: var(--pcg-bg-soft-surface) !important;
    background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 70%) !important;
    border-top: 1px solid var(--pcg-soft-surface-border) !important;
    border-bottom: 1px solid var(--pcg-soft-surface-border) !important;
}

/* ==========================================================================
   Corporate Typography & Colors Consistency System (v1.13.2)
   Đồng bộ màu sắc tiêu chuẩn Luxury Tech (Chuẩn Xanh Dương - True Blue):
   - Tiêu đề chính: trắng sáng (#ffffff)
   - Từ khóa quan trọng: Electric Azure (#38BDF8)
   - Badge section: xanh dương sang trọng (#38BDF8)
   - Mô tả: xám xanh sáng độ tương phản cao (rgba(226, 232, 240, 0.88))
   - Card titles: trắng rõ nét (#ffffff)
   - Link hover: xanh dương (#38BDF8)
   Không dùng selector quá rộng để tránh ảnh hưởng WP Tabs / Thrive Architect.
   ========================================================================== */

/* 1. Tiêu đề chính & Tiêu đề Section */
.pcg-corp-overview-section .pcg-title,
.pcg-corp-overview-section h2,
.pcg-about-origins-section .pcg-title,
.pcg-about-origins-section h2,
.pcg-two-pillars-section .pcg-title,
.pcg-two-pillars-section h2,
.pcg-principles-section .pcg-title,
.pcg-principles-section h2,
.pcg-tech-method-section .pcg-title,
.pcg-tech-method-section h2,
.pcg-vision-values-section .pcg-title,
.pcg-vision-values-section h2,
.pcg-tech-materials-section .pcg-title,
.pcg-tech-materials-section h2,
.pcg-eco-framework-section .pcg-title,
.pcg-eco-framework-section h2,
.pcg-ecosystem-section .pcg-title,
.pcg-ecosystem-section h2,
.pcg-roadmap-section .pcg-title,
.pcg-roadmap-section h2,
.pcg-culture-careers-section .pcg-title,
.pcg-culture-careers-section h2,
.pcg-culture-mentorship-section .pcg-title,
.pcg-culture-mentorship-section h2,
.pcg-culture-standards-section .pcg-title,
.pcg-culture-standards-section h2,
.pcg-culture-progression-section .pcg-title,
.pcg-culture-progression-section h2,
.pcg-careers-benefits-section .pcg-title,
.pcg-careers-benefits-section h2,
.pcg-jobs-list-section .pcg-title,
.pcg-jobs-list-section h2,
.pcg-hiring-process-section .pcg-title,
.pcg-hiring-process-section h2,
.pcg-partnership-section .pcg-title,
.pcg-partnership-section h2,
.pcg-contact-channels-section .pcg-title,
.pcg-contact-channels-section h2,
.pcg-contact-hq-section .pcg-title,
.pcg-contact-hq-section h2,
.pcg-tech-cta-section .pcg-title,
.pcg-tech-cta-section h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Từ khóa quan trọng Xanh Dương (Tech Blue) */
.pcg-corp-overview-section .pcg-text-accent,
.pcg-corp-overview-section .pcg-text-cyan,
.pcg-two-pillars-section .pcg-text-accent,
.pcg-two-pillars-section .pcg-text-cyan,
.pcg-vision-values-section .pcg-text-accent,
.pcg-vision-values-section .pcg-text-cyan,
.pcg-ecosystem-section .pcg-text-accent,
.pcg-ecosystem-section .pcg-text-cyan,
.pcg-roadmap-section .pcg-text-accent,
.pcg-roadmap-section .pcg-text-cyan,
.pcg-culture-careers-section .pcg-text-accent,
.pcg-culture-careers-section .pcg-text-cyan,
.pcg-partnership-section .pcg-text-accent,
.pcg-partnership-section .pcg-text-cyan,
.pcg-text-accent,
.pcg-text-cyan {
    color: #38BDF8 !important;
    text-shadow: none !important;
}

/* 3. Section Badges với điểm nhấn Xanh Dương (Tech Blue) sang trọng đồng bộ toàn website */
.pcg-corp-overview-section .pcg-badge,
.pcg-two-pillars-section .pcg-badge,
.pcg-principles-section .pcg-badge,
.pcg-vision-values-section .pcg-badge,
.pcg-ecosystem-section .pcg-badge,
.pcg-roadmap-section .pcg-badge,
.pcg-culture-careers-section .pcg-badge,
.pcg-culture-mentorship-section .pcg-badge,
.pcg-culture-standards-section .pcg-badge,
.pcg-culture-progression-section .pcg-badge,
.pcg-careers-benefits-section .pcg-badge,
.pcg-jobs-list-section .pcg-badge,
.pcg-partnership-section .pcg-badge,
.pcg-contact-channels-section .pcg-badge,
.pcg-badge.pcg-badge-arrow,
.pcg-badge.pcg-badge-cyan,
.pcg-badge {
    color: #38BDF8 !important;
    background: rgba(0, 140, 255, 0.1) !important;
    border: 1px solid rgba(56, 189, 248, 0.38) !important;
    border-radius: 9999px !important;
    padding: 0.35rem 0.95rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(0, 140, 255, 0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-bottom: 1.25rem !important;
}

/* 4. Đoạn mô tả với độ tương phản cao */
.pcg-corp-overview-section .pcg-description,
.pcg-corp-overview-section .pcg-overview-text,
.pcg-about-origins-section .pcg-description,
.pcg-two-pillars-section .pcg-description,
.pcg-principles-section .pcg-description,
.pcg-vision-values-section .pcg-description,
.pcg-ecosystem-section .pcg-description,
.pcg-roadmap-section .pcg-description,
.pcg-culture-careers-section .pcg-description,
.pcg-culture-mentorship-section .pcg-description,
.pcg-culture-standards-section .pcg-description,
.pcg-culture-progression-section .pcg-description,
.pcg-careers-benefits-section .pcg-description,
.pcg-partnership-section .pcg-description,
.pcg-contact-channels-section .pcg-description,
.pcg-contact-hq-section .pcg-description,
.pcg-section-header .pcg-description {
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
    line-height: 1.72 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* 5. Tiêu đề Card Spotlight & Card Blocks */
.pcg-card-spotlight h3,
.pcg-card-spotlight h4,
.pcg-card-body h3,
.pcg-card-body h4,
.pcg-pillar-card h3,
.pcg-pillar-card h4,
.pcg-card-with-thumb h3,
.pcg-card-with-thumb h4,
.pcg-roadmap-card h4,
.pcg-job-card h3,
.pcg-job-card h4,
.pcg-channel-card h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.35 !important;
}

/* 6. Đoạn văn bên trong Card */
.pcg-card-spotlight p,
.pcg-card-body p,
.pcg-pillar-card p,
.pcg-card-with-thumb p,
.pcg-roadmap-card p,
.pcg-job-card p,
.pcg-channel-card p {
    color: rgba(226, 232, 240, 0.82) !important;
    line-height: 1.62 !important;
}

/* 7. Hover liên kết trong các Section Corporate */
.pcg-section a:hover:not(.wp-block-button__link),
.pcg-card-spotlight a:hover,
.pcg-card-with-thumb a:hover {
    color: #38BDF8 !important;
}