/* Google Font: Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap");

/* OSP VN Website - Homepage Custom Styles
 * Additional CSS overrides for homepage sections
 */

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* ============================================
   Checklist icon deduplication
   .checklist li has both :before (SVG) and <i> (font icon)
   Hide :before pseudo-element, keep <i> tag
   Adjust padding since <i> is inline (no absolute positioning)
   Exception: #leadership-sec uses :before with custom SVG background
   Exception: #about-sec .about-checklist uses :before with checkmark SVG
   ============================================ */
.checklist li {
    padding-left: 0 !important;
}

.checklist li:before {
    display: none !important;
}

/* Keep :before for leadership section (uses custom SVG background) */
#leadership-sec .process-item .checklist li {
    padding-left: 35px !important;
}

#leadership-sec .process-item .checklist li:before {
    display: block !important;
}

/* AI Statement checklist — checkmark icon from Figma 1:1744
   26px icon, 2-part SVG: outer box + checkmark tick */
#about-sec .about-checklist.list-two-column ul li {
    padding-left: 40px !important;
    position: relative;
    font-size: 15px;
    color: #0b203f;
}

#about-sec .about-checklist.list-two-column ul li:before {
    display: block !important;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    /* Combined SVG: outer box frame + checkmark tick, color #0B203F */
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.5 8.5H4.5C3.1 8.5 2.3 9.6 2.3 10.7V19.5C2.3 20.6 3.1 21.7 4.5 21.7H21.5C22.9 21.7 23.7 20.6 23.7 19.5V10.7C23.7 9.6 22.9 8.5 21.5 8.5ZM17.3 17.3H8.7V15.1H17.3V17.3ZM19.5 13H6.5V10.7H19.5V13Z' fill='%230B203F'/%3E%3Cpath d='M23.7 10.7H2.3V8.5C2.3 7.4 3.4 6.3 4.5 6.3H21.5C22.6 6.3 23.7 7.4 23.7 8.5V10.7Z' fill='%230B203F'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================
   Section Spacing
   ============================================ */

#hero {
    margin-bottom: 0;
}

/* Space-lg: dùng cho trang About để đồng bộ spacing với trang chủ */
.space-lg {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 991px) {
    .space-lg {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.stats-section {
    padding: 80px 0;
}

.ai-statement-section {
    padding: 100px 0;
}

.products-section {
    padding: 80px 0;
}

.partners-section {
    padding: 60px 0;
}

.news-section {
    padding: 80px 0;
}

.cta-recruitment {
    padding: 100px 0;
}

/* ============================================
   Smooth Scrolling
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* ============================================
   Section Transitions
   ============================================ */

section {
    transition: opacity 0.3s ease-in-out;
}

/* ============================================
   Hero Section Enhancements
   ============================================ */

.hero-style1 {
    padding: 172px 56px 172px 56px;
    height: 100%;
}

.hero-style1::before {
    background: linear-gradient(135deg, rgba(11, 32, 63, 0.9) 0%, rgba(0, 174, 239, 0.3) 100%);
}

/* ============================================
   Stats Section Background (legacy, kept for fallback)
   ============================================ */

.stats-section {
    background-color: #0b203f;
    color: #ffffff;
}

/* ============================================
   OSP Stats Section — Card Layout
   Matches reference: 4 cards in a row, gradient card bg,
   large bold number + suffix, label below
   ============================================ */

.osp-stats-section {
    padding: 60px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Grid: 4 columns on desktop */
.osp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}

/* Card wrapper — gradient border */
.osp-stat-card {
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(180, 200, 255, 0.35) 0%, rgba(220, 230, 255, 0.15) 100%);
    padding: 2px;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    cursor: default;
}

.osp-stat-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(100, 160, 255, 0.35);
}

/* Inner card: image background + exact dimensions */
.osp-stat-card-inner {
    border-radius: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 28px;
    padding-right: 28px;
    position: relative;
    overflow: hidden;
    height: 221px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Default fallback image */
    background-image: url("../img/blog/blog-grid-2.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Light bottom-fade overlay for text legibility */
.osp-stat-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0.65) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Card 1 — blog-grid-2: xanh ice wave (mặc định, đã set ở base) */
.osp-stat-card:nth-child(1) .osp-stat-card-inner {
    background-image: url("../img/blog/blog-grid-2.jpg");
    background-position: center center;
}

/* Card 2 — blog-grid-1: xanh cyan crystal */
.osp-stat-card:nth-child(2) .osp-stat-card-inner {
    background-image: url("../img/blog/blog-grid-1.jpg");
    background-position: center center;
}

/* Card 3 — blog-grid-4: tím-hồng geometric */
.osp-stat-card:nth-child(3) .osp-stat-card-inner {
    background-image: url("../img/blog/blog-grid-4.jpg");
    background-position: center center;
}

/* Card 4 — blog-grid-6: xanh-hồng abstract petal */
.osp-stat-card:nth-child(4) .osp-stat-card-inner {
    background-image: url("../img/blog/blog-grid-6.jpg");
    background-position: center center;
}

/* Number + suffix */
.osp-stat-number {
    position: relative;
    z-index: 1;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: #0b203f;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    font-family: var(--title-font, "Inter", sans-serif);
}

/* Label */
.osp-stat-label {
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1a2d4f;
    line-height: 1.4;
    font-family: var(--body-font, "Inter", sans-serif);
}

/* ── Responsive ── */

/* Tablet: 2 columns */
@media (max-width: 991px) {
    .osp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .osp-stat-card-inner {
        height: auto;
        min-height: 160px;
    }

    .osp-stat-number {
        font-size: 2.25rem;
    }
}

/* Mobile: 2 columns */
@media (max-width: 575px) {
    .osp-stats-section {
        padding: 40px 0;
    }

    .osp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .osp-stat-card-inner {
        padding: 24px 18px;
        height: auto;
        min-height: 130px;
    }

    .osp-stat-number {
        font-size: 1.875rem;
    }

    .osp-stat-label {
        font-size: 0.875rem;
    }
}

/* Very small: 1 column */
@media (max-width: 360px) {
    .osp-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   AI Statement Accent
   ============================================ */

.ai-statement-section .sec-title span {
    color: #00aeef;
}

/* ============================================
   Products Card Hover Effects
   ============================================ */

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 174, 239, 0.2);
}

/* ============================================
   Careers Hero Section (hero-6 override)
   ============================================ */

/* Override hero-6 text color for light background */
#hero-careers .hero-style6 .hero-title,
#hero-careers .hero-style6 .hero-text,
#hero-careers .hero-style6 .hero-title2 {
    color: var(--title-color, #0b203f);
}

#hero-careers .hero-style6 .hero-title2 {
    font-style: italic;
    color: var(--theme-color, #00aeef);
}

/* Fix button hover area clipped by overflow:hidden on hero wrapper */
#hero-careers .th-hero-wrapper {
    overflow: visible !important;
}

#hero-careers .btn-group {
    position: relative;
    z-index: 10;
}

/* Counter section overflow fix - allow button to extend above */
#hero-careers + .counter-sec {
    overflow: visible !important;
    margin-top: -100px !important;
}

/* ============================================
   CTA Recruitment Gradient
   ============================================ */

.cta-recruitment {
    background: linear-gradient(135deg, #0b203f 0%, #00aeef 100%);
}

/* ============================================
   Recruitment Timeline Section
   ============================================ */

#process-timeline {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

/* Vertical connector line */
.timeline-line {
    position: absolute;
    left: 36px;
    top: 30px;
    bottom: 60px;
    width: 3px;
    background: linear-gradient(180deg, #00aeef 0%, #2563eb 50%, #00aeef 100%);
    border-radius: 2px;
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 0;
    position: relative;
}

/* Step marker (circle with number) */
.step-marker {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00aeef 0%, #2563eb 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(0, 174, 239, 0.3);
    z-index: 2;
    position: relative;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.timeline-step:hover .step-marker {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 174, 239, 0.4);
}

.step-marker--final {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.step-marker--final::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #10b981;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Step content card */
.step-content {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    transition: all 0.3s ease;
    position: relative;
}

.step-content::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 24px;
    width: 16px;
    height: 2px;
    background: #00aeef;
}

.timeline-step:hover .step-content {
    border-color: #00aeef;
    box-shadow: 0 8px 32px rgba(0, 174, 239, 0.12);
    transform: translateX(4px);
}

.step-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0b203f;
    margin-bottom: 8px;
}

.step-text {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-line {
        left: 24px;
    }

    .step-marker {
        width: 48px;
        height: 48px;
        font-size: 0.9rem;
    }

    .timeline-step {
        gap: 16px;
    }

    .step-content {
        padding: 16px 20px;
    }

    .step-title {
        font-size: 1rem;
    }

    .step-text {
        font-size: 0.875rem;
    }
}

/* ============================================
   Mobile Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .stats-section,
    .ai-statement-section,
    .products-section,
    .news-section,
    .cta-recruitment {
        padding: 60px 0;
    }
}

/* ============================================
   About Checklist — tight gap
   ============================================ */
.about-checklist.list-two-column ul {
    gap: 12px 8px;
}

/* ============================================
   Shape mockup — subtle brand-tinted decoration
   Low opacity + light cyan tint, not a full-blob fill
   ============================================ */
#about-sec .shape-mockup img {
    filter: invert(58%) sepia(30%) saturate(500%) hue-rotate(163deg) brightness(115%) contrast(90%);
    opacity: 0.18;
}

/* ============================================
   Preloader — OSP color theme override
   Replace default purple/violet gradient with OSP cyan palette:
   Primary #00AEEF, light #2fc4fa, dark navy #0B203F, mid #0076a3
   ============================================ */
.loader::after {
    background-image:
        radial-gradient(circle at 50% 50%, #00aeef 0%, transparent 50%),
        radial-gradient(circle at 45% 45%, #2fc4fa 0%, transparent 45%),
        radial-gradient(circle at 55% 55%, #0099d4 0%, transparent 45%),
        radial-gradient(circle at 45% 55%, #0076a3 0%, transparent 45%),
        radial-gradient(circle at 55% 45%, #0b203f 0%, transparent 45%);
}

/* ============================================
   Scroll Animation Classes
   ============================================ */

.animate-out {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* =====================
   Partners logo grid (legacy — kept for fallback)
   ===================== */
.partner-logo-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #fff;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo-item:hover {
    box-shadow: 0 4px 16px rgba(0, 174, 239, 0.15);
    transform: translateY(-2px);
}

.partner-logo {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(30%);
    transition: filter 0.2s ease;
}

.partner-logo-item:hover .partner-logo {
    filter: grayscale(0%);
}

/* =====================
   Partners carousel — tall cards with color + zoom-out hover
   ===================== */

/* ============================================
   Partners Marquee Section — Infinite Scroll
   ============================================ */

.partners-marquee-section {
    padding: 105px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.marquee-outer-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.marquee-inner-wrapper {
    width: 100%;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
}

/* Cursor kéo cho marquee */
.marquee-outer-wrapper {
    cursor: grab;
}

.marquee-outer-wrapper:active {
    cursor: grabbing;
}

.marquee-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.partner-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    min-width: 160px;
}

.partner-logo-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 174, 239, 0.15);
    border-color: rgba(0, 174, 239, 0.3);
}

.partner-logo-inner {
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none !important;
    transition: transform 0.3s ease;
}

.partner-logo-card:hover .partner-logo-img {
    transform: scale(1.08);
}

.partner-name-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-align: center;
    line-height: 1.4;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marquee-fade-left,
.marquee-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 5;
    pointer-events: none;
}

.marquee-fade-left {
    left: 0;
    background: linear-gradient(to right, #f8fafc 0%, transparent 100%);
}

.marquee-fade-right {
    right: 0;
    background: linear-gradient(to left, #f8fafc 0%, transparent 100%);
}

@media (max-width: 768px) {
    .partners-marquee-section {
        padding: 85px 0;
    }

    .marquee-slide {
        padding: 0 16px;
    }

    .partner-logo-card {
        min-width: 130px;
        padding: 16px 18px;
        gap: 8px;
    }

    .partner-logo-inner {
        width: 90px;
        height: 48px;
    }

    .partner-name-label {
        font-size: 11px;
        max-width: 110px;
    }

    .marquee-fade-left,
    .marquee-fade-right {
        width: 60px;
    }

    .marquee-track {
        animation-duration: 20s;
    }
}

@media (max-width: 476px) {
    .marquee-slide {
        padding: 0 12px;
    }

    .partner-logo-card {
        min-width: 110px;
        padding: 12px 14px;
        gap: 6px;
    }

    .partner-logo-inner {
        width: 72px;
        height: 40px;
    }

    .partner-name-label {
        font-size: 10px;
        max-width: 90px;
    }

    .marquee-fade-left,
    .marquee-fade-right {
        width: 40px;
    }
}

/* Extra small screens — under 375px */
@media (max-width: 374px) {
    .marquee-slide {
        padding: 0 8px;
    }

    .partner-logo-card {
        min-width: 95px;
        padding: 10px 12px;
        gap: 6px;
    }

    .partner-logo-inner {
        width: 60px;
        height: 36px;
    }

    .partner-name-label {
        font-size: 9px;
        max-width: 80px;
        /* Allow wrapping on very small screens instead of ellipsis */
        white-space: normal;
        line-height: 1.3;
    }

    .marquee-fade-left,
    .marquee-fade-right {
        width: 30px;
    }
}

/* Legacy brand slider styles — kept for backward compatibility */

/* ============================================
   Products Section — reduce spacing between rows
   ============================================ */
#products-sec .space-extra-top {
    padding-top: 60px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    #products-sec .space-extra-top {
        padding-top: 40px;
        margin-bottom: 15px;
    }
}

/* ============================================
   News Section — carousel / slider layout
   ============================================ */
.newsSlider .blog-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;

    display: flex;
    flex-direction: column;
}

.newsSlider .blog-card:hover {
    background: rgba(0, 174, 239, 0.04);
    border-color: rgba(0, 174, 239, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.newsSlider .blog-card .box-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.newsSlider .blog-card .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.newsSlider .blog-card:hover .box-img img {
    transform: scale(1.05);
}

.newsSlider .blog-card .box-content {
    padding: 20px 24px 16px;
}

.newsSlider .blog-card .cat {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #00aeef;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: inline-block;
}

.newsSlider .blog-card .box-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
    height: 56px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.newsSlider .blog-card .box-text {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
    height: 67px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.newsSlider .blog-card .box-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.newsSlider .blog-card .box-title a:hover {
    color: #00aeef;
}

.newsSlider .blog-card .blog-meta {
    padding: 0 24px 20px;
    margin-top: auto;
}

.newsSlider .blog-card .blog-meta a {
    color: #666;
    font-size: 13px;
    text-decoration: none;
}

.newsSlider .blog-card .blog-meta a:hover {
    color: #00aeef;
}

/* ============================================
   News List Page — grid layout (Index.cshtml)
   ============================================ */
#news-list-section .blog-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

#news-list-section .blog-card-link {
    text-decoration: none;
}

#news-list-section .blog-card-link:hover .blog-card {
    background: rgba(0, 174, 239, 0.04);
    border-color: rgba(0, 174, 239, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

#news-list-section .blog-card .box-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}

#news-list-section .blog-card .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#news-list-section .blog-card-link:hover .blog-card .box-img img {
    transform: scale(1.05);
}

#news-list-section .blog-card .box-content {
    padding: 20px 24px 16px;
}

#news-list-section .blog-card .cat {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #00aeef;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: inline-block;
}

/* Tag pill — same visual language as admin “Danh mục” badges */
#news-list-section .blog-card .cat.news-card-category-tag {
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 174, 239, 0.12);
    color: #0284c7;
    font-size: 11px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#news-list-section .blog-card .box-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
    height: 56px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#news-list-section .blog-card .box-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

#news-list-section .blog-card .box-title a:hover {
    color: #00aeef;
}

#news-list-section .blog-card .box-content .text-muted {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
    height: 62px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#news-list-section .blog-card .blog-meta {
    padding: 0 24px 20px;
    margin-top: auto;
}

#news-list-section .blog-card .blog-meta span {
    color: #666;
    font-size: 13px;
}

/* ============================================
   News Responsive Fixes
   ============================================ */

/* Mobile: reduce title size and adjust card spacing */
@media (max-width: 576px) {
    /* News slider cards */
    .newsSlider .blog-card .box-title {
        font-size: 16px;
        line-height: 1.4;
        height: 45px;
    }

    .newsSlider .blog-card .box-content {
        padding: 16px;
    }

    .newsSlider .blog-card .cat {
        font-size: 11px;
    }

    .newsSlider .blog-card .blog-meta {
        padding: 0 16px 16px;
    }

    /* News list page cards */
    #news-list-section .blog-card .box-title {
        font-size: 16px;
        line-height: 1.4;
        height: 45px;
    }

    #news-list-section .blog-card .box-content {
        padding: 16px;
    }

    #news-list-section .blog-card .cat {
        font-size: 11px;
    }

    #news-list-section .blog-card .blog-meta {
        padding: 0 16px 16px;
    }

    #news-list-section .blog-card .box-content .text-muted {
        font-size: 13px;
        height: auto;
        -webkit-line-clamp: 2;
    }
}

/* Responsive: thu nhỏ padding khi mobile */
@media (max-width: 576px) {
    .brand-slider-wrapper {
        padding: 0 36px;
    }

    .brand-nav-btn {
        width: 32px;
        height: 32px;
    }

    .brand-card-tall {
        height: 160px;
    }

    .brand-logo-full {
        max-height: 90px;
    }
}

/* ============================================
   Partners Scroll Snap — CSS-only slider
   Alternative to Swiper-based brand slider
   ============================================ */

.scroll-snap-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.scroll-snap-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.scroll-snap-track {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.scroll-snap-card {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: calc((100% / 2) - 0.75rem);
    /* 2 items mobile */
}

@media (min-width: 476px) {
    .scroll-snap-card {
        width: calc((100% / 3) - 1rem);
    }
}

@media (min-width: 768px) {
    .scroll-snap-card {
        width: calc((100% / 4) - 1.125rem);
    }
}

@media (min-width: 992px) {
    .scroll-snap-card {
        width: calc((100% / 5) - 1.2rem);
    }
}

@media (min-width: 1200px) {
    .scroll-snap-card {
        width: calc((100% / 6) - 1.25rem);
    }
}

/* ============================================
   OSP Ecosystem Orbit — Hero Right Column
   3 concentric rings, alternating CW / CCW
   Pure-CSS animation, xl+ only
   ============================================ */

/* ---------- keyframes ---------- */
/* Ring spin directions */
@keyframes orbit-spin-cw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-spin-ccw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* Bubble counter-spins (keep icons upright) */
@keyframes orbit-counter-cw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes orbit-counter-ccw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Per-icon counter-rotation keyframes (compensate for initial angular position) */
/* Ring 1 (CW 16s) */
@keyframes orbit-counter-cw-r1-60 {
    from {
        transform: rotate(-60deg);
    }

    to {
        transform: rotate(-420deg);
    }
}

@keyframes orbit-counter-cw-r1-240 {
    from {
        transform: rotate(-240deg);
    }

    to {
        transform: rotate(-600deg);
    }
}

/* Ring 2 (CCW 26s) — counter-rotate CW để giữ icon thẳng */
@keyframes orbit-counter-ccw-r2-0 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-counter-ccw-r2-180 {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(540deg);
    }
}

/* Ring 3 (CW 38s) */
@keyframes orbit-counter-cw-r3-120 {
    from {
        transform: rotate(-120deg);
    }

    to {
        transform: rotate(-480deg);
    }
}

@keyframes orbit-counter-cw-r3-300 {
    from {
        transform: rotate(-300deg);
    }

    to {
        transform: rotate(-660deg);
    }
}

@keyframes orbit-glow-pulse {
    0%,
    100% {
        box-shadow:
            0 0 30px rgba(0, 174, 239, 0.35),
            0 0 60px rgba(0, 174, 239, 0.15);
    }

    50% {
        box-shadow:
            0 0 50px rgba(0, 174, 239, 0.6),
            0 0 90px rgba(0, 174, 239, 0.3);
    }
}

/* Decorative dot keyframes — one per ring */
@keyframes orbit-dot-r1 {
    from {
        transform: rotate(0deg) translateY(-141px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateY(-141px) rotate(-360deg);
    }
}

@keyframes orbit-dot-r2 {
    from {
        transform: rotate(0deg) translateY(-212px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateY(-212px) rotate(360deg);
    }
}

@keyframes orbit-dot-r3 {
    from {
        transform: rotate(0deg) translateY(-282px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateY(-282px) rotate(-360deg);
    }
}

/* ---------- container ---------- */
.osp-ecosystem-orbit {
    position: relative;
    width: 960px;
    height: 960px;
    max-width: 100%;
    max-height: 1000px;
    flex-shrink: 0;
}

/* ---------- center image ---------- */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 50%;
    animation: orbit-glow-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

.orbit-hero-img {
    display: block;
    width: 120px;
    height: 120px;
    min-width: 120px;
    max-width: 140px;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid rgba(0, 174, 239, 0.4);
    background: rgba(11, 32, 63, 0.6);
    padding: 8px;
}

.orbit-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 174, 239, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

/* ---------- rings ---------- */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(0, 174, 239, 0.35);
    pointer-events: none;
}

/* Ring 1 — innermost, CW, r=169px */
.orbit-ring-1 {
    width: 338px;
    height: 338px;
    margin-top: -169px;
    margin-left: -169px;
    animation: orbit-spin-cw 16s linear infinite;
}

/* Ring 2 — middle, CCW, r=254px */
.orbit-ring-2 {
    width: 508px;
    height: 508px;
    margin-top: -254px;
    margin-left: -254px;
    animation: orbit-spin-ccw 26s linear infinite;
}

/* Ring 3 — outermost, CW, r=338px */
.orbit-ring-3 {
    width: 676px;
    height: 676px;
    margin-top: -338px;
    margin-left: -338px;
    animation: orbit-spin-cw 38s linear infinite;
}

/* ---------- icon bubbles ---------- */
/* .orbit-icon: transparent positioning wrapper on the ring */
.orbit-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    z-index: 5;
    /* Ensure hover works regardless of animation state */
    pointer-events: none;
    transition: pointer-events 0s;
    overflow: visible;
}

/* Enable pointer events on icon when hovering the icon area */
.orbit-icon:hover {
    pointer-events: auto;
    z-index: 50;
}

/* Let bubbles receive pointer events even when parent icon doesn't */
.orbit-icon .orbit-bubble {
    pointer-events: auto;
}

/* .orbit-bubble: the visible circular card (counter-rotates to stay upright) */
.orbit-bubble {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 4px 16px rgba(11, 32, 63, 0.18),
        0 0 0 2px rgba(0, 174, 239, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
    position: relative;
}

.orbit-bubble:hover {
    box-shadow:
        0 6px 24px rgba(0, 174, 239, 0.4),
        0 0 0 3px rgba(0, 174, 239, 0.45);
}

/* Icon images & FA icons */
.orbit-icon img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
    display: block;
    padding: 4px;
}

/* DevFlow & Core Platform images */
.orbit-icon[data-product="devflow"] img,
.orbit-icon[data-product="core"] img,
.orbit-icon[data-product="iuchi"] img,
.orbit-icon[data-product="telecom"] img {
    width: 150%;
    height: auto;
    max-width: none;
    max-height: none;
}

.orbit-icon-fa {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
}

/* ---------- hover tooltip labels ---------- */
/* Tooltip nằm trong .orbit-icon — cùng coordinate space với icon nên luôn đi theo icon khi xoay.
   Dùng animation counter-rotate để giữ tooltip luôn nằm ngang (không xoay theo ring). */
.orbit-icon .orbit-tooltip {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(11, 32, 63, 0.95);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 174, 239, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 100;
    backdrop-filter: blur(8px);
}

/* Counter-rotate tooltip để luôn nằm ngang, khớp với animation của ring */
.orbit-icon--60 .orbit-tooltip {
    animation: orbit-counter-cw-r1-60 16s linear infinite;
}

.orbit-icon--240 .orbit-tooltip {
    animation: orbit-counter-cw-r1-240 16s linear infinite;
}

.orbit-icon--0 .orbit-tooltip {
    animation: orbit-counter-ccw-r2-0 26s linear infinite;
}

.orbit-icon--180 .orbit-tooltip {
    animation: orbit-counter-ccw-r2-180 26s linear infinite;
}

.orbit-icon--120 .orbit-tooltip {
    animation: orbit-counter-cw-r3-120 38s linear infinite;
}

.orbit-icon--300 .orbit-tooltip {
    animation: orbit-counter-cw-r3-300 38s linear infinite;
}

/* Show tooltip when hovering the icon */
.orbit-icon:hover .orbit-tooltip {
    opacity: 1;
}

/* ---------- icon position on rings ---------- */
/* Định vị icon trên quỹ đạo bằng rotate + translateY */
/* Icon sẽ xoay cùng ring, nhưng bubble bên trong sẽ counter-rotate để giữ thẳng */

/* Ring 1, r=169px — Kolia (60°), K-Doctor (240°) */
.orbit-ring-1 .orbit-icon--60 {
    transform: rotate(60deg) translateY(-169px);
}

.orbit-ring-1 .orbit-icon--240 {
    transform: rotate(240deg) translateY(-169px);
}

/* Ring 2, r=254px — AI DevFlow (0°), Core Platform (180°) */
.orbit-ring-2 .orbit-icon--0 {
    transform: rotate(0deg) translateY(-254px);
}

.orbit-ring-2 .orbit-icon--180 {
    transform: rotate(180deg) translateY(-254px);
}

/* Ring 3, r=338px — IUCHI (120°), Viễn Thông (300°) */
.orbit-ring-3 .orbit-icon--120 {
    transform: rotate(120deg) translateY(-338px);
}

.orbit-ring-3 .orbit-icon--300 {
    transform: rotate(300deg) translateY(-338px);
}

/* Counter-rotate .orbit-bubble để giữ logo và tooltip luôn thẳng đứng
   Vì .orbit-icon wrapper bị rotate(angle) từ rule định vị trên,
   bubble bên trong cần rotate ngược lại để bù trừ. */
.orbit-icon--60 > .orbit-bubble {
    animation: orbit-counter-cw-r1-60 16s linear infinite;
}

.orbit-icon--120 > .orbit-bubble {
    animation: orbit-counter-cw-r3-120 38s linear infinite;
}

/* Ring 2 quay CCW nên bubble quay CW (dương) */
.orbit-icon--0 > .orbit-bubble {
    animation: orbit-counter-ccw-r2-0 26s linear infinite;
}

.orbit-icon--180 > .orbit-bubble {
    animation: orbit-counter-ccw-r2-180 26s linear infinite;
}

.orbit-icon--240 > .orbit-bubble {
    animation: orbit-counter-cw-r1-240 16s linear infinite;
}

.orbit-icon--300 > .orbit-bubble {
    animation: orbit-counter-cw-r3-300 38s linear infinite;
}

/* ---------- decorative moving dots (one per ring) ---------- */
.orbit-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-left: -4px;
    border-radius: 50%;
    background: #00aeef;
    box-shadow: 0 0 8px rgba(0, 174, 239, 0.8);
    pointer-events: none;
    z-index: 6;
}

/* Decorative moving dots — active animations */
.orbit-dot-1 {
    animation: orbit-dot-r1 16s linear infinite;
    animation-delay: -8s;
}

.orbit-dot-2 {
    animation: orbit-dot-r2 26s linear infinite;
    animation-delay: -13s;
}

.orbit-dot-3 {
    animation: orbit-dot-r3 38s linear infinite;
    animation-delay: -19s;
}

/* ---------- responsive: scale on all screen sizes ---------- */

.osp-ecosystem-orbit-wrapper {
    z-index: 1000 !important;
}

/* Large desktops (1400px+): full size */
@media (min-width: 1400px) {
    .osp-ecosystem-orbit-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Desktops (1200px - 1399px): scale down slightly */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .osp-ecosystem-orbit-wrapper {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .osp-ecosystem-orbit {
        transform: scale(0.72);
        transform-origin: center center;
    }
}

/* Tablets landscape (992px - 1199px): scale more aggressively */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .osp-ecosystem-orbit-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem 0;
    }

    .osp-ecosystem-orbit {
        transform: scale(0.55);
        transform-origin: center center;
    }
}

/* Tablets portrait (768px - 991px): smaller scale */
@media (min-width: 768px) and (max-width: 991.98px) {
    .osp-ecosystem-orbit-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem 0;
    }

    .osp-ecosystem-orbit {
        transform: scale(0.45);
        transform-origin: center center;
    }
}

/* Large phones / small tablets (576px - 767px): minimal visible */
@media (min-width: 576px) and (max-width: 767.98px) {
    .osp-ecosystem-orbit-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 0;
    }

    .osp-ecosystem-orbit {
        transform: scale(0.35);
        transform-origin: center center;
    }
}

/* Small phones (< 576px): hide orbit to prevent clutter */
@media (max-width: 575.98px) {
    .osp-ecosystem-orbit-wrapper {
        display: none !important;
    }
}

/* ============================================
   Heading Standardization — All section titles
   must have consistent sizing across homepage
   ============================================ */

/* Base sec-title:统一所有 section heading kích thước */
.sec-title {
    font-size: clamp(28px, 5vw, 56px);
    line-height: 1.2;
}

/* Override style2 để đồng bộ */
.title-area .sec-title.style2 {
    font-size: clamp(28px, 5vw, 56px);
}

/* Override style3 để đồng bộ */
.title-area .sec-title.style3 {
    font-size: clamp(28px, 5vw, 56px);
}

/* Products Section — force title to single line on desktop */
#products-sec .title-area h2.sec-title {
    white-space: nowrap;
}

@media (max-width: 768px) {
    #products-sec .title-area h2.sec-title {
        white-space: normal;
    }
}

/* ============================================
   Product Metric Tags — inline stat style
   Replicates ospgroup.io.vn: two metrics side-by-side,
   no card borders — pure text hierarchy
   ============================================ */

/* Row: metrics sit side-by-side with a divider gap */
.product-tags-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* Each metric column */
.product-tag-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0 32px 0 0;
    /* Vertical divider between sibling cards (except last) */
    position: relative;
}

.product-tag-card + .product-tag-card {
    padding-left: 32px;
    padding-right: 0;
}

/* Vertical divider line between the two metrics */
.product-tag-card + .product-tag-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(11, 32, 63, 0.15);
}

/* Big metric number / keyword */
.product-tag-highlight {
    display: block;
    font-family: var(--title-font);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #00aeef;
}

@media (max-width: 1399px) {
    .product-tag-highlight {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .product-tag-highlight {
        font-size: 26px;
    }
}

/* Small muted label beneath the metric */
.product-tag-label {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: var(--body-color, #777);
    line-height: 1.4;
}

/* ============================================
   Main Navigation Menu — Refined Spacing & Style
   Target: .header-layout1.style2 .main-menu > ul > li
   ============================================ */

/* More breathing room between top-level menu items */
.header-layout1.style2 .main-menu > ul > li {
    margin: 0 4px;
}

/* Pill-shaped hover background + comfortable padding */
.header-layout1.style2 .main-menu > ul > li > a {
    padding: 8px 14px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 8px;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

/* Hover: subtle tinted pill */
.header-layout1.style2 .main-menu > ul > li > a:hover {
    background: rgba(0, 174, 239, 0.08);
    color: var(--theme-color, #00aeef);
}

/* Active / current page — stronger pill background */
.header-layout1.style2 .main-menu > ul > li.active > a,
.header-layout1.style2 .main-menu > ul > li > a.active {
    background: rgba(0, 174, 239, 0.12);
    color: var(--theme-color, #00aeef);
}

/* Keep the overall nav vertical centre-aligned within .menu-area pill */
.header-layout1.style2 .main-menu ul li {
    display: inline-flex;
    align-items: center;
}

/* ============================================
   Product Mega Menu — using theme's mega-menu-box pattern
   Uses .osp-product-mega (NOT .mega-menu-content) to avoid
   theme JS hooking in and overriding height dynamically.
   ============================================ */

/* Elevate header above hero section (hero has z-index:2, position:relative) */
.th-header {
    z-index: 50 !important;
    isolation: isolate;
}

/* mega-menu-wrap: position static — mega menu positions against header */
.header-layout1.style2 .main-menu > ul > li.mega-menu-wrap {
    position: static;
}

/* Dropdown panel: full-viewport-width, centered with 50vw trick.
   Avoids theme JS by not using .mega-menu-content class. */
.header-layout1.style2 .main-menu ul.osp-product-mega {
    left: 50vw !important;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 24px 0;
    background: linear-gradient(180deg, #ffffff 0%, #e6f7ff 50%, #b3e5fc 100%);
    border-top: 3px solid var(--theme-color, #00aeef);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scaleY(0) translateX(-50%);
    transform: scaleY(0) translateX(-50%);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    transition:
        transform 0.5s ease,
        opacity 0.35s ease,
        visibility 0.35s;
}

/* Show on hover */
.header-layout1.style2 .main-menu > ul > li.mega-menu-wrap:hover ul.osp-product-mega {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scaleY(1) translateX(-50%);
    transform: scaleY(1) translateX(-50%);
}

/* Responsive: identical at all breakpoints */
@media (max-width: 1599px) {
    .header-layout1.style2 .main-menu ul.osp-product-mega {
        left: 50vw !important;
        width: 100vw;
        max-width: 100vw;
    }
}

/* Constrain inner content to max 1320px centered — prevents cards
   from stretching edge-to-edge on ultra-wide screens */
.osp-product-mega > li > .container {
    max-width: 1320px !important;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Product card — entire card is clickable */
.osp-product-mega .mega-menu-box {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 174, 239, 0.1);
}

.osp-product-mega .mega-menu-box a {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 8px;
}

/* Override theme blur effect on mega menu images */
.osp-product-mega .mega-menu-box:hover .mega-menu-img img {
    filter: none !important;
}

/* Hover: zoom-out + shadow (no blur, no translateY) */
.osp-product-mega .mega-menu-box .mega-menu-img img {
    transition: transform 0.25s ease;
}

.osp-product-mega .mega-menu-box:hover .mega-menu-img img {
    transform: scale(0.95);
}

.osp-product-mega .mega-menu-box:hover {
    box-shadow: 0 8px 30px rgba(0, 174, 239, 0.2);
    transform: translateY(-4px);
}

/* Product name styling — center aligned */
.osp-product-mega .mega-menu-title {
    font-size: 14px !important;
    padding: 10px 12px 4px;
    margin-top: 16px;
    text-align: center;
}

.osp-product-mega .mega-menu-title a {
    color: var(--title-color, #1a1a2e) !important;
    font-weight: 600;
}

.osp-product-mega .mega-menu-title a:hover {
    color: var(--theme-color, #00aeef) !important;
}

/* Short description under product name — center aligned */
.osp-product-mega .mega-menu-desc {
    font-size: 12px;
    color: var(--body-color, #888);
    margin: 0;
    padding: 0 12px 10px;
    line-height: 1.4;
    text-align: center;
}

.mega-menu-title a {
    padding-top: 10px;
}

/* Consistent thumbnail — fixed height ensures all cards identical.
   width + height both set = true square regardless of content. */
.mega-menu-box .mega-menu-img {
    width: 100%;
    height: 200px !important;
    min-height: 200px !important;
    overflow: hidden !important;
    /* White radial gradient: white from center fading to soft gray only at
       the very edges. Makes white-background product images blend seamlessly. */
    background: radial-gradient(circle at center, #ffffff 0%, #ffffff 60%, #f4f6f8 100%);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Stretch img to fill the box */
.mega-menu-box .mega-menu-img img,
.mega-menu-box .mega-menu-img .mega-menu-img-placeholder {
    position: static;
    width: 100%;
    height: 100%;
}

.mega-menu-box .mega-menu-img img {
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 20px;
}

/* Larger sizing for logos that appear visually smaller in the mega menu.
   Reduces internal padding so the actual logo graphic fills more of the
   thumbnail area, matching the visual weight of top-row logos. */
.mega-menu-box .mega-menu-img img[src*="osp_core_platform"],
.mega-menu-box .mega-menu-img img[src*="iuchi"],
.mega-menu-box .mega-menu-img img[src*="signal"] {
    padding: 5px;
    max-width: 85%;
    max-height: 85%;
}

/* Fallback placeholder when product has no image yet.
   Uses same radial gradient as .mega-menu-img to stay consistent. */
.mega-menu-box .mega-menu-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #ffffff 0%, #ffffff 60%, #f4f6f8 100%);
}

.mega-menu-box .mega-menu-img-placeholder i {
    font-size: 5rem;
    color: var(--theme-color, #00aeef);
    opacity: 0.6;
}

/* ============================================
   Header Responsive - Mobile & Tablet
   ============================================ */

/* Hide desktop contact button on mobile */
@media (max-width: 991px) {
    .header-contact-btn {
        display: none !important;
    }
}

/* Flex layout for header buttons - keep on same row */
.header-button {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* Language switcher desktop - CSS hover instead of inline JS events */
.lang-switcher-desktop {
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: inline-block;
}
.lang-switcher-desktop:hover {
    transform: scale(1.1);
}

/* ============================================
   Partners Grid
   Flat grid đều nhau, hover → scale nhẹ
   ============================================ */

/* Wrapper */
.partners-pyramid-wrapp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

/* Mỗi hàng ngang — số cột cố định = số items trong hàng */
.partners-pyramid-row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    justify-items: center;
    margin-bottom: 12px;
}

/* Bỏ hết tier sizing / depth / blur */
.partners-pyramid-row.tier-0,
.partners-pyramid-row.tier-1,
.partners-pyramid-row.tier-2,
.partners-pyramid-row.tier-3,
.partners-pyramid-row.tier-4 {
    opacity: 1;
    filter: none;
    transform: none;
    z-index: auto;
}

/* Tất cả items cùng kích thước — gấp đôi so với trước */
.partners-pyramid-row .partners-dl-item {
    --item-size: 240px;
    --img-size: 200px;
}

/* Mỗi logo item — trần, không card */
.partners-dl-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--item-size, 120px);
    height: var(--item-size, 120px);
    margin: 0 6px;
    background: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px;
    cursor: default;
    overflow: visible;
    transform: rotate(var(--tilt, 0deg));
    transform-origin: bottom center;
    transition: filter 0.25s ease;
    z-index: 1;
}

/* Ẩn reflection pseudo */
.partners-dl-item::after {
    display: none;
}

/* Item pad (hàng cuối) — chiếm chỗ nhưng ẩn */
.partners-dl-item--empty {
    visibility: hidden;
    pointer-events: none;
}

/* Logo bên trong — width+height cố định, contain để không bị méo */
.partners-dl-item img {
    width: var(--img-size, 200px);
    height: var(--img-size, 200px);
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    transition: filter 0.25s ease;
    display: block;
    flex-shrink: 0;
}

.partners-dl-item:hover img {
    filter: drop-shadow(0 4px 16px rgba(0, 174, 239, 0.6)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Hover — nhấc nhẹ lên */
.partners-dl-item:hover {
    transform: translateY(-8px) scale(1.06) rotate(var(--tilt, 0deg));
    z-index: 10;
}

/* Tooltip tên đơn vị */
.dl-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0b203f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    z-index: 30;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.dl-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0b203f;
}

.partners-dl-item:hover .dl-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive mobile */
@media (max-width: 768px) {
    .partners-pyramid-wrapp {
        gap: 0;
    }

    .partners-pyramid-row {
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 8px;
    }

    .partners-pyramid-row .partners-dl-item {
        --item-size: 160px;
        --img-size: 136px;
        margin: 0 2px;
    }

    .partners-dl-item {
        transform: none !important;
    }
}

/* Extra small screens — under 375px */
@media (max-width: 374px) {
    .partners-pyramid-row {
        gap: 2px;
        margin-bottom: 6px;
    }

    .partners-pyramid-row .partners-dl-item {
        --item-size: 120px;
        --img-size: 100px;
        margin: 0 1px;
        padding: 4px;
    }

    .dl-tooltip {
        font-size: 9px;
        padding: 4px 8px;
    }
}

/* ============================================
   About Page — Orphan Classes
   Styles for About page sections: hero, timeline,
   leadership, org, values, testimonials, AI badges
   ============================================ */

/* ---------- Hero Enhancement ---------- */
.about-hero-enhanced {
    position: relative;
    overflow: hidden;
}

.hero-particle-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 174, 239, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 174, 239, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-cta-btn {
    background: var(--theme-color, #00aeef);
    color: var(--white-color, #fff);
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--title-font);
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.hero-cta-btn:hover {
    background: #0092cc;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 174, 239, 0.35);
    color: var(--white-color, #fff);
}

.hero-cta-btn-outline {
    background: transparent;
    color: var(--white-color, #fff);
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-family: var(--title-font);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.hero-cta-btn-outline:hover {
    background: var(--white-color, #fff);
    border-color: var(--white-color, #fff);
    color: #0b203f;
    transform: translateY(-2px);
}

/* ---------- Timeline Section ---------- */
.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--theme-color, #00aeef), rgba(0, 174, 239, 0.2));
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 48px;
    width: 100%;
}

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

/* Default: content on left, marker center */
.timeline-item {
    justify-content: flex-start;
    padding-right: calc(50% + 30px);
}

.timeline-right {
    justify-content: flex-end;
    padding-right: 0;
    padding-left: calc(50% + 30px);
}

.timeline-marker {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--white-color, #fff);
    border: 3px solid var(--theme-color, #00aeef);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 12px rgba(0, 174, 239, 0.2);
    padding: 8px;
}

.timeline-marker .year {
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-color, #00aeef);
    line-height: 1.3;
    text-align: center;
    word-break: break-all;
}

.timeline-marker.highlight {
    background: var(--theme-color, #00aeef);
    border-color: var(--theme-color, #00aeef);
}

.timeline-marker.highlight .year {
    color: var(--white-color, #fff);
    font-weight: 700;
}

.timeline-content {
    background: var(--white-color, #fff);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(11, 32, 63, 0.08);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    width: 100%;
}

.timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(11, 32, 63, 0.14);
}

.timeline-content h3 {
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
    margin-bottom: 8px;
}

.timeline-content p {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--body-color, #484848);
    line-height: 1.75;
    margin: 0;
}

/* Tablet: reduce timeline padding for better fit */
@media (min-width: 768px) and (max-width: 991.98px) {
    .timeline-item {
        padding-right: calc(50% + 20px);
    }

    .timeline-right {
        padding-left: calc(50% + 20px);
    }

    .timeline-marker {
        width: 70px;
        height: 70px;
        padding: 6px;
    }

    .timeline-marker .year {
        font-size: 14px;
    }

    .timeline-content {
        padding: 18px;
    }
}

/* Mobile: stack timeline vertically */
@media (max-width: 767.98px) {
    .timeline-line {
        left: 20px;
    }

    .timeline-item,
    .timeline-right {
        padding-left: 56px;
        padding-right: 0;
        justify-content: flex-start;
    }

    .timeline-marker {
        left: 20px;
        width: 60px;
        height: 60px;
        padding: 6px;
    }

    .timeline-marker .year {
        font-size: 13px;
    }
}

/* ---------- Leadership Section ---------- */

/* Intro content */
.leadership-intro {
    max-width: 1100px;
    margin: 0 auto;
}

.leadership-tagline {
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-color, #00aeef);
    margin-bottom: 32px;
    line-height: 1.5;
}

.intro-content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.intro-block {
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border-left: 3px solid var(--theme-color, #00aeef);
}

.intro-block h4 {
    font-family: var(--title-font);
    font-size: 20px;
    font-weight: 600;
    color: var(--title-color, #0b203f);
    margin: 0 0 10px;
    line-height: 1.5;
}

.intro-block p {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--body-color, #484848);
    line-height: 1.75;
    margin: 0;
}

/* ---------- Leadership Section (Swiper Carousel) ---------- */
#leadership-slider-wrap {
    position: relative;
    padding: 0 48px;
}

#leadershipSlider .swiper-slide {
    height: auto;
}

.leader-card-inner {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    height: 100%;
}

#leadershipSlider .swiper-slide:hover .leader-card-inner {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(11, 32, 63, 0.15);
}

.card-img-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

#leadershipSlider .swiper-slide:hover .card-img-wrap img {
    transform: scale(1.05);
}

.card-info {
    padding: 16px;
    text-align: center;
}

.leader-position {
    display: block;
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-color, #00aeef);
    margin-bottom: 4px;
}

.leader-name {
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
    margin: 0 0 4px;
    line-height: 1.3;
}

.leader-desc {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--body-color, #484848);
    margin: 0;
    line-height: 1.5;
}

/* ---------- How It Works Section ---------- */
.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.how-it-works-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    height: 100%;
}

.how-it-works-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(11, 32, 63, 0.15);
}

.hiw-image-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.hiw-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.how-it-works-card:hover .hiw-image-wrap img {
    transform: scale(1.05);
}

.hiw-content {
    padding: 24px;
}

.hiw-number {
    font-family: var(--title-font);
    font-size: 48px;
    font-weight: 700;
    color: rgba(0, 174, 239, 0.15);
    line-height: 1;
    display: block;
    margin-bottom: -16px;
    position: relative;
    z-index: 0;
}

.hiw-title {
    font-family: var(--title-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
    margin: 0 0 8px;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

.hiw-subtitle {
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color, #00aeef);
    margin: 0 0 12px;
    line-height: 1.5;
}

.hiw-description {
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--body-color, #484848);
    line-height: 1.7;
    margin: 0 0 16px;
}

.hiw-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hiw-bullets li {
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--body-color, #484848);
    line-height: 1.7;
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px;
}

.hiw-bullets li i {
    color: var(--theme-color, #00aeef);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 14px;
}

.hiw-bullets li:last-child {
    margin-bottom: 0;
}

/* Responsive: How It Works */
@media (max-width: 991px) {
    .how-it-works-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .how-it-works-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Org Structure ---------- */
.org-card {
    background: var(--white-color, #fff);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.org-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(11, 32, 63, 0.12);
}

.org-connection-line {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 12px;
    border-left: 2px dotted rgba(0, 174, 239, 0.3);
}

/* ---------- Values (8-card grid) ---------- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.value-card {
    text-align: center;
    padding: 36px 24px;
    background: var(--white-color, #fff);
    border-radius: 16px;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    height: 100%;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(11, 32, 63, 0.12);
}

.value-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 174, 239, 0.08);
    color: var(--theme-color, #00aeef);
    font-size: 24px;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.value-card:hover .value-icon-wrap {
    background: rgba(0, 174, 239, 0.15);
    transform: scale(1.08);
}

/* ============================================
   Achievements Section
   ============================================ */
.achievements-slider-wrapper {
    position: relative;
    padding: 0 48px;
}

#achSlider .swiper-slide {
    height: auto;
}

.ach-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    display: grid;
    grid-template-columns: 40% 60%;
    height: 220px;
}

.ach-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(11, 32, 63, 0.15);
}

.ach-content {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ach-number {
    font-family: var(--title-font);
    font-size: 42px;
    font-weight: 800;
    color: var(--theme-color, #00aeef);
    line-height: 1.1;
    margin-bottom: 8px;
    white-space: nowrap;
}

.ach-title {
    font-family: var(--title-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 44px;
}

.ach-desc {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--body-color, #484848);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}

.ach-image {
    overflow: hidden;
    position: relative;
}

.ach-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ach-card:hover .ach-image img {
    transform: scale(1.08);
}

/* Nav buttons */
.ach-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--title-color, #0b203f);
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.ach-nav-btn:hover {
    background: var(--theme-color, #00aeef);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.ach-nav-prev {
    left: 0;
}

.ach-nav-next {
    right: 0;
}

/* Responsive */
@media (max-width: 767px) {
    .ach-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto 140px;
        height: auto;
    }

    .ach-content {
        padding: 20px;
    }

    .ach-number {
        font-size: 36px;
    }

    .ach-title {
        font-size: 15px;
        min-height: auto;
    }

    .ach-desc {
        min-height: auto;
    }

    .achievements-slider-wrapper {
        padding: 0 36px;
    }
}

@media (max-width: 476px) {
    .ach-card {
        height: auto;
    }

    .ach-number {
        font-size: 32px;
    }
}

/* Responsive: Values grid */
@media (max-width: 1199px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Testimonials ---------- */
.testimonials-carousel-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    background: var(--white-color, #fff);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(11, 32, 63, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(11, 32, 63, 0.12);
}

.testimonial-content {
    flex: 1;
    margin-bottom: 24px;
    position: relative;
    padding-left: 8px;
}

.testimonial-content p {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--body-color, #484848);
    line-height: 1.75;
    margin: 0;
    font-style: italic;
}

.testimonial-quote-icon {
    position: absolute;
    top: -8px;
    left: 0;
    font-size: 28px;
    color: rgba(0, 174, 239, 0.15);
    line-height: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.1), rgba(0, 174, 239, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color, #00aeef);
    font-size: 18px;
    flex-shrink: 0;
}

.author-info h4 {
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
    margin: 0 0 2px;
}

.author-info span {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--body-color, #484848);
}

/* ---------- AI Badges ---------- */
.ai-agents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ai-powered-badge {
    display: inline-flex;
    align-items: center;
    background: var(--theme-color, #00aeef);
    color: var(--white-color, #fff);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    letter-spacing: 0.02em;
}

.ai-powered-badge i {
    font-size: 12px;
}

.ai-agent-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 174, 239, 0.08);
    color: var(--theme-color, #00aeef);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(0, 174, 239, 0.2);
    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}

.ai-agent-badge:hover {
    background: rgba(0, 174, 239, 0.15);
    border-color: rgba(0, 174, 239, 0.4);
}

/* WOW.js animation: hide elements before animation triggers to prevent flash */
.wow {
    visibility: hidden;
}

/* ============================================
   Shared Page Hero Section — Used by News, Contact, About
   Consistent hero section across all content pages
   ============================================ */
.page-hero-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    background:
        linear-gradient(rgba(16, 16, 22, 0.75), rgba(16, 16, 22, 0.75)),
        url("/img/bg/breadcrumb-bg.jpg") center/cover no-repeat;
    overflow: hidden;
}

.page-hero-section .hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 32, 63, 0.4) 0%, rgba(0, 174, 239, 0.15) 100%);
    z-index: 1;
}

.page-hero-section .hero-content {
    position: relative;
    z-index: 2;
}

.page-hero-section .hero-content .sec-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
}

.page-hero-section .hero-content .text-white-50 {
    font-size: 18px;
    max-width: 650px;
    margin: 0 auto;
}

/* ============================================
   About CTA Section — Enhanced buttons
   ============================================ */

.cta-about-enhanced {
    position: relative;
}

.cta-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(0, 174, 239, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(0, 119, 163, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.cta-about-enhanced .title-area {
    position: relative;
    z-index: 2;
}

.cta-about-enhanced .btn-group {
    position: relative;
    z-index: 2;
    gap: 20px;
    margin: 32px 0;
}

.cta-about-enhanced .cta-list {
    position: relative;
    z-index: 2;
}

/* CTA list styling */
.cta-about-enhanced .cta-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 32px;
    margin-top: 24px;
}

.cta-about-enhanced .cta-list li {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta-about-enhanced .cta-list li i {
    color: var(--theme-color, #00aeef);
    font-size: 12px;
}

/* Ensure th-btn and th-border work correctly in this context */
.cta-about-enhanced .th-btn,
.cta-about-enhanced .th-btn.th-border {
    font-size: 16px;
    font-weight: 500;
    padding: 20px 24px 20px 24px;
    min-width: 220px;
    justify-content: center;
    gap: 38px;
    background-color: var(--theme-color, #00aeef);
    border: none;
    color: var(--white-color, #fff);
}

.cta-about-enhanced .th-btn .icon,
.cta-about-enhanced .th-btn.th-border .icon {
    display: inline-block;
}

.cta-about-enhanced .th-btn .icon img,
.cta-about-enhanced .th-btn.th-border .icon img {
    width: 18px;
    height: 18px;
}

.cta-about-enhanced .th-btn:hover,
.cta-about-enhanced .th-btn.th-border:hover {
    background-color: #0099d4;
    color: var(--white-color, #fff);
}

/* Responsive */
@media (max-width: 767.98px) {
    .cta-about-enhanced .btn-group {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .cta-about-enhanced .th-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 991.98px) {
    .page-hero-section {
        padding: 80px 0;
    }

    .page-hero-section .hero-content .sec-title {
        font-size: 36px;
    }
}

@media (max-width: 767.98px) {
    .page-hero-section {
        padding: 60px 0;
    }

    .page-hero-section .hero-content .sec-title {
        font-size: 28px;
    }

    .page-hero-section .hero-content .text-white-50 {
        font-size: 16px;
    }
}

/* ============================================
   About Page — Section 1: Banner with hover
   Full-width, padding-based height (matches news hero)
   ============================================ */
.about-banner-section {
    width: 100%;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.about-banner-section .banner-wrapper {
    width: 100%;
    height: 100%;
    background-image: url("/img/bg/breadcumb-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-banner-section .banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 32, 63, 0.85) 0%, rgba(0, 174, 239, 0.35) 100%);
    z-index: 1;
}

.about-banner-section .banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 800px;
}

/* 20px gap between sections */
.section-gap-20 {
    height: 20px;
    width: 100%;
}

/* 10px gap between sections */
.section-gap-10 {
    height: 10px;
    width: 100%;
}

/* ============================================
   About Page — Section 2: Video wrapper (30%)
   ============================================ */
.video-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(11, 32, 63, 0.12);
}

.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

.video-thumbnail {
    position: relative;
    width: 100%;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.video-wrapper .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--theme-color, #00aeef);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 174, 239, 0.4);
    z-index: 3;
}

.video-wrapper .play-btn:hover {
    background: #fff;
    color: var(--theme-color, #00aeef);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 8px 32px rgba(0, 174, 239, 0.5);
}

/* ---------- Who We Are Section (Chúng tôi là ai?) ---------- */
/* Theo Figma design node-id 1:3378 */
/* Layout: single column, centered - text above, video below */

#who-we-are-sec .who-we-are-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1344px;
    margin: 0 auto;
    padding: 40px 12px;
}

#who-we-are-sec .who-we-are-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    padding-top: 41px;
    padding-bottom: 18px;
}

#who-we-are-sec .who-we-are-content .sec-title {
    text-align: center;
    font-size: 56px;
    font-weight: 700;
    line-height: 67.2px;
    color: #0b203f;
}

#who-we-are-sec .who-we-are-content .box-text {
    text-align: center;
    font-size: 18px;
    line-height: 28.8px;
    color: #484848;
    max-width: 800px;
}

#who-we-are-sec .who-we-are-content .box-text + .box-text {
    margin-top: 17px;
}

#who-we-are-sec .who-we-are-video {
    width: 100%;
    max-width: 600px;
    margin-top: 17px;
}

#who-we-are-sec .who-we-are-video .video-wrapper {
    max-width: none;
    margin: 0;
}

#who-we-are-sec .who-we-are-video .video-thumbnail img {
    height: 348px;
    object-fit: cover;
}

@media (max-width: 991px) {
    #who-we-are-sec .who-we-are-content .sec-title {
        font-size: 40px;
        line-height: 1.3;
    }

    #who-we-are-sec .who-we-are-content .box-text {
        font-size: 16px;
        line-height: 1.6;
    }
}

@media (max-width: 767px) {
    #who-we-are-sec .who-we-are-wrapper {
        padding: 40px 16px;
    }

    #who-we-are-sec .who-we-are-content .sec-title {
        font-size: 32px;
    }

    #who-we-are-sec .who-we-are-video .video-thumbnail img {
        height: auto;
    }
}

/* Responsive: banner padding */
@media (max-width: 991.98px) {
    .about-banner-section {
        padding: 80px 0;
    }
}

@media (max-width: 767.98px) {
    .about-banner-section {
        padding: 60px 0;
    }

    .about-banner-section .banner-content .sec-title {
        font-size: 28px;
    }

    .section-gap-20 {
        height: 16px;
    }
}

/* ============================================
   Values-grid-v2 — Reference card layout
   2 columns, icon+title header, tagline, bullets
   ============================================ */

.values-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.vc2 {
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 24px;
    border: 1px solid rgba(11, 32, 63, 0.07);
    box-shadow: 0 2px 12px rgba(11, 32, 63, 0.06);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.vc2:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(11, 32, 63, 0.12);
}

/* Header row: icon + title side-by-side */
.vc2-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

/* Icon bubble */
.vc2-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.3s ease;
}

.vc2:hover .vc2-icon {
    transform: scale(1.12);
}

/* Per-card icon colors */
.vc2-icon--blue {
    background: rgba(0, 118, 255, 0.1);
    color: #0076ff;
}

.vc2-icon--orange {
    background: rgba(255, 127, 0, 0.1);
    color: #ff7f00;
}

.vc2-icon--purple {
    background: rgba(138, 43, 226, 0.1);
    color: #8a2be2;
}

.vc2-icon--teal {
    background: rgba(0, 172, 193, 0.1);
    color: #00acc1;
}

.vc2-icon--green {
    background: rgba(15, 157, 88, 0.1);
    color: #0f9d58;
}

.vc2-icon--lime {
    background: rgba(100, 185, 0, 0.1);
    color: #64b900;
}

.vc2-icon--rose {
    background: rgba(235, 60, 80, 0.1);
    color: #eb3c50;
}

.vc2-icon--indigo {
    background: rgba(63, 81, 181, 0.1);
    color: #3f51b5;
}

/* Hover: deepen icon bg */
.vc2:hover .vc2-icon--blue {
    background: rgba(0, 118, 255, 0.18);
}

.vc2:hover .vc2-icon--orange {
    background: rgba(255, 127, 0, 0.18);
}

.vc2:hover .vc2-icon--purple {
    background: rgba(138, 43, 226, 0.18);
}

.vc2:hover .vc2-icon--teal {
    background: rgba(0, 172, 193, 0.18);
}

.vc2:hover .vc2-icon--green {
    background: rgba(15, 157, 88, 0.18);
}

.vc2:hover .vc2-icon--lime {
    background: rgba(100, 185, 0, 0.18);
}

.vc2:hover .vc2-icon--rose {
    background: rgba(235, 60, 80, 0.18);
}

.vc2:hover .vc2-icon--indigo {
    background: rgba(63, 81, 181, 0.18);
}

.vc2-title {
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--title-color, #0b203f);
    margin: 0;
    line-height: 1.3;
}

.vc2-tagline {
    font-family: var(--body-font);
    font-size: 15px;
    font-style: italic;
    color: var(--theme-color, #00aeef);
    margin: 8px 0 10px;
    line-height: 1.5;
}

.vc2-desc {
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--body-color, #484848);
    line-height: 1.7;
    margin: 0 0 16px;
}

.vc2-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vc2-bullets li {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--body-color, #484848);
    line-height: 1.6;
    padding-left: 22px;
    position: relative;
    margin-bottom: 6px;
}

.vc2-bullets li:last-child {
    margin-bottom: 0;
}

.vc2-bullets li i {
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 13px;
    color: var(--theme-color, #00aeef);
}

/* Responsive: values-grid-v2 */
@media (max-width: 991px) {
    .values-grid-v2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Section Chỉ có tại OSP - Tăng Font Size
   Tham khảo: Phong cách Lãnh Đạo (Leadership)
   ============================================ */
#values-sec .vc2-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
}

#values-sec .vc2-tagline {
    font-size: 18px;
    line-height: 1.5;
}

#values-sec .vc2-desc {
    font-size: 18px;
    line-height: 1.65;
}

#values-sec .vc2-bullets li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 991px) {
    #values-sec .vc2-title {
        font-size: 22px;
    }

    #values-sec .vc2-tagline,
    #values-sec .vc2-desc {
        font-size: 16px;
    }

    #values-sec .vc2-bullets li {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    #values-sec .vc2-title {
        font-size: 20px;
    }

    #values-sec .vc2-tagline,
    #values-sec .vc2-desc {
        font-size: 15px;
    }

    #values-sec .vc2-bullets li {
        font-size: 13px;
    }
}

/* ============================================
   Leader Values Row — 3 icon-keyword blocks
   ============================================ */

.leader-values-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 8px;
}

.leader-value-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px;
    border: 1px solid rgba(11, 32, 63, 0.07);
    box-shadow: 0 2px 10px rgba(11, 32, 63, 0.05);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.leader-value-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(11, 32, 63, 0.1);
}

.lv-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.leader-value-item:hover .lv-icon {
    transform: scale(1.1);
}

.lv-icon--blue {
    background: rgba(0, 118, 255, 0.1);
    color: #0076ff;
}

.lv-icon--orange {
    background: rgba(255, 127, 0, 0.1);
    color: #ff7f00;
}

.lv-icon--rose {
    background: rgba(235, 60, 80, 0.1);
    color: #eb3c50;
}

.lv-body {
    flex: 1;
}

.lv-title {
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
    margin: 0 0 6px;
}

.lv-desc {
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--body-color, #484848);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 991px) {
    .leader-values-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Leadership — How It Works Process Style
   3 leadership styles displayed as process step cards
   With scroll pin effect, matching "How it Works" template
   ============================================ */

/* Process area background */
#leadership-sec.process-area {
    background-color: #0b203f;
    padding-top: 100px;
    padding-bottom: 100px;
}

#leadership-sec .title-area .sec-title {
    color: #fff;
}

#leadership-sec .title-area .sub-title {
    color: rgba(255, 255, 255, 0.7);
}

/* Process item — main card
   Override theme's .process-item:after (white overlay) that conflicts
   with our custom background and shadow styling */
#leadership-sec .process-item {
    position: relative;
    z-index: 9;
    padding: 24px 24px 24px 40px;
    border-radius: 24px;
    background-color: #fff;
    box-shadow: 0px 20px 50px rgba(11, 11, 11, 0.1);
    width: 100%;
    display: flex;
    gap: 60px;
    min-height: 550px;
}

/* Disable theme's white overlay pseudo-element that breaks our layout */
#leadership-sec .process-item:after {
    display: none !important;
}

/* Box wrapper */
#leadership-sec .process-item .box-wrapp {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Step number */
#leadership-sec .process-item .box-num {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    margin-bottom: 56px;
    display: block;
}

#leadership-sec .process-item .box-num .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    background: #06050b;
    border-radius: 48px;
    font-weight: 400;
    font-size: 16px;
    color: var(--white-color);
    margin-right: 14px;
}

/* Box content */
#leadership-sec .process-item .box-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#leadership-sec .process-item .box-title {
    font-weight: 600;
    font-size: 40px;
    color: #0f172b;
    line-height: 1.2;
    margin: 0 0 16px 0;
}

@media (max-width: 1500px) {
    #leadership-sec .process-item .box-title {
        font-size: 35px;
    }
}

@media (max-width: 1299px) {
    #leadership-sec .process-item .box-title {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    #leadership-sec .process-item .box-title {
        font-size: 25px;
    }
}

#leadership-sec .process-item .box-text {
    max-width: 417px;
    margin-bottom: 50px;
    text-align: justify;
}

/* Checklist inside process item */
#leadership-sec .process-item .checklist {
    margin: 16px 0 0 0;
}

#leadership-sec .process-item .checklist ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

#leadership-sec .process-item .checklist li {
    position: relative;
    padding-left: 35px;
    font-size: var(--body-font-size, 18px);
    color: #475569;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#leadership-sec .process-item .checklist li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-image: url("../img/icon/checklist.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Box image — thumbnail */
#leadership-sec .process-item .box-img {
    width: 524px;
    height: 502px;
    border-radius: 24px;
    flex-shrink: 0;
}

@media (max-width: 1199px) {
    #leadership-sec .process-item .box-img {
        width: 100%;
        height: 100%;
    }
}

#leadership-sec .process-item .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* Scroll pin effect */
.th-panel-pin-area {
    position: relative;
}

.th-panel-pin {
    position: sticky;
    top: 100px;
}

/* Disable sticky pin on mobile to prevent layout issues */
@media (max-width: 767px) {
    .th-panel-pin {
        position: static;
    }
}

/* Fix checklist items wrapping on mobile */
@media (max-width: 767px) {
    #leadership-sec .process-item {
        flex-direction: column;
        gap: 24px;
        padding: 20px;
        min-height: auto;
    }

    #leadership-sec .process-item .box-img {
        width: 100%;
        height: 200px;
    }

    #leadership-sec .process-item .checklist li {
        padding-left: 28px;
        font-size: 14px;
        line-height: 1.6;
    }

    #leadership-sec .process-item .checklist li:before {
        width: 14px;
        height: 14px;
        top: 4px;
    }

    #leadership-sec .process-item .box-text {
        max-width: none;
    }
}

/* ============================================
   Leader Value Cards — 3D Service Card Style
   (dùng trong About page leadership section)
   3D flip icon + animated gradient + cubic-bezier
   ============================================ */

.leader-value-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 48px 36px;
    text-align: center;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    overflow: hidden;
}

@media (max-width: 1500px) {
    .leader-value-card {
        padding: 36px 28px;
    }
}

@media (max-width: 991px) {
    .leader-value-card {
        padding: 32px 24px;
    }
}

@media (max-width: 767px) {
    .leader-value-card {
        padding: 28px 20px;
    }
}

/* Hover: lift card */
.leader-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(11, 32, 63, 0.12);
    border-color: transparent;
}

/* Icon wrap — 3D flip effect */
.lvc-icon-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 14px;
    margin: 0 auto 28px;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52);
}

/* Animated gradient overlay behind icon */
.leader-value-card .lvc-icon-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scale(0);
    border-radius: inherit;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    transform-origin: center;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52);
    z-index: -1;
}

/* Each card gets a different gradient */
.leader-value-card:nth-child(1) .lvc-icon-wrap::before {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.leader-value-card:nth-child(2) .lvc-icon-wrap::before {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}

.leader-value-card:nth-child(3) .lvc-icon-wrap::before {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
}

/* Icon inside */
.lvc-icon-wrap i {
    font-size: 32px;
    transition: all 0.4s ease-in-out;
    display: inline-block;
}

/* Color icon per card */
.leader-value-card:nth-child(1) .lvc-icon-wrap i {
    color: #2563eb;
}

.leader-value-card:nth-child(2) .lvc-icon-wrap i {
    color: #f97316;
}

.leader-value-card:nth-child(3) .lvc-icon-wrap i {
    color: #ec4899;
}

/* Hover: scale gradient + 3D flip icon */
.leader-value-card:hover .lvc-icon-wrap::before {
    transform: scale(1);
}

.leader-value-card:hover .lvc-icon-wrap i {
    transform: rotateY(180deg);
    color: #fff;
}

/* Decorative gradient border on hover */
.leader-value-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #2563eb, #3b82f6, #ec4899, #f97316);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.leader-value-card:nth-child(2)::after {
    background: linear-gradient(135deg, #f97316, #fb923c, #2563eb, #3b82f6);
}

.leader-value-card:nth-child(3)::after {
    background: linear-gradient(135deg, #ec4899, #f472b6, #f97316, #fb923c);
}

.leader-value-card:hover::after {
    opacity: 1;
}

/* Title */
.lvc-title {
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
    margin-bottom: 14px;
    line-height: 1.3;
}

@media (max-width: 1399px) {
    .lvc-title {
        font-size: 19px;
    }
}

@media (max-width: 575px) {
    .lvc-title {
        font-size: 17px;
    }
}

/* Description */
.lvc-desc {
    font-size: 15px;
    line-height: 1.75;
    color: #555;
    margin-bottom: 0;
}

@media (max-width: 1399px) {
    .lvc-desc {
        font-size: 14px;
    }
}

/* Bounce animation for entrance */
.leader-value-card.bounce__anim {
    opacity: 0;
    transform: translateY(-100px);
}

/* Section gap 40px */
.section-gap-40 {
    height: 40px;
}

/* ============================================
   Leader Card v2 — with LinkedIn overlay + dept badge
   ============================================ */

.leader-slider-outer {
    position: relative;
    padding: 0 56px;
}

.leader-card-v2 {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.leader-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(11, 32, 63, 0.15);
}

.lc-img-wrap {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #f0f4f8;
}

.lc-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
}

.leader-card-v2:hover .lc-img-wrap img {
    transform: scale(1.05);
}

/* Dept badge (top-left) */
.lc-dept-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--theme-color, #00aeef);
    color: #fff;
    font-family: var(--title-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

/* LinkedIn icon (top-right, hidden by default, shows on hover) */
.lc-linkedin {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0a66c2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    text-decoration: none;
}

.leader-card-v2:hover .lc-linkedin {
    opacity: 1;
    transform: translateY(0);
}

.lc-info {
    padding: 16px;
    text-align: center;
    background: #fff;
}

.lc-name {
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 800;
    color: var(--title-color, #0b203f);
    margin: 0 0 4px;
    letter-spacing: 0.02em;
}

.lc-position {
    display: block;
    font-family: var(--body-font);
    font-size: 12px;
    color: var(--body-color, #484848);
    line-height: 1.4;
}

.lc-bio {
    padding: 12px 16px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
}

.lc-bio p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    text-align: left;
}

/* Circular prev/next nav buttons */
.leader-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(11, 32, 63, 0.12);
    color: var(--title-color, #0b203f);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 12px rgba(11, 32, 63, 0.1);
    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.leader-nav-btn:hover {
    background: var(--theme-color, #00aeef);
    color: #fff;
    border-color: var(--theme-color, #00aeef);
    box-shadow: 0 4px 20px rgba(0, 174, 239, 0.35);
    transform: translateY(-50%) scale(1.08);
}

.leader-nav-prev {
    left: 0;
}

.leader-nav-next {
    right: 0;
}

/* mb-40 utility */
.mb-40 {
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .leader-slider-outer {
        padding: 0 40px;
    }

    .lc-img-wrap {
        height: 180px;
    }
}

/* ============================================
   Block 2 — OSP Org Chart
   ============================================ */

.osp-org-chart {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Root node */
.org-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.org-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 32px 40px;
    box-shadow: 0 4px 20px rgba(11, 32, 63, 0.1);
    border: 2px solid transparent;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    min-width: 240px;
    text-align: center;
    cursor: default;
}

.org-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(11, 32, 63, 0.16);
}

.org-node--root {
    background: linear-gradient(135deg, #0b203f 0%, #1a3a6b 100%);
    border-color: transparent;
    min-width: 320px;
    padding: 36px 48px;
}

.org-node--root .org-node-icon {
    color: #ffd700;
    font-size: 28px;
    margin-bottom: 10px;
}

.org-node--root .org-node-label {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--title-font);
}

.org-node--root .org-node-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin-top: 4px;
}

.org-node-icon {
    font-size: 24px;
    color: var(--theme-color, #00aeef);
    margin-bottom: 8px;
}

.org-node-label {
    font-family: var(--title-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--title-color, #0b203f);
}

.org-node-sub {
    font-family: var(--body-font);
    font-size: 12px;
    color: var(--body-color, #484848);
    margin-top: 4px;
}

/* Per-khối accent */
.org-node--bo {
    border-color: #00acc1;
}

.org-node--cn {
    border-color: var(--theme-color, #00aeef);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f4ff 100%);
}

.org-node--kd {
    border-color: #ff7f00;
}

.org-node--dt {
    border-color: #8a2be2;
}

/* Vertical connector */
.org-connector-v {
    width: 3px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(0, 174, 239, 0.3), rgba(0, 174, 239, 0.6));
    margin: 0 auto;
    border-radius: 2px;
}

/* Horizontal level */
.org-level {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    width: 100%;
    position: relative;
}

/* Horizontal connector line across top — curved style */
.org-level::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(12.5% + 8px);
    right: calc(12.5% + 8px);
    height: 3px;
    background: linear-gradient(
        to right,
        rgba(0, 174, 239, 0.2) 0%,
        rgba(0, 174, 239, 0.5) 25%,
        rgba(124, 58, 237, 0.5) 50%,
        rgba(0, 174, 239, 0.5) 75%,
        rgba(0, 174, 239, 0.2) 100%
    );
    border-radius: 2px;
}

/* Animated flow dots on the horizontal line */
.org-level::after {
    content: "";
    position: absolute;
    top: -3px;
    left: calc(12.5% + 8px);
    width: 8px;
    height: 8px;
    background: var(--theme-color, #00aeef);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 174, 239, 0.5);
    animation: orgFlowLine 3s linear infinite;
}

@keyframes orgFlowLine {
    0% {
        left: calc(12.5% + 8px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(87.5% - 8px);
        opacity: 0;
    }
}

.org-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.org-connector-h {
    width: 3px;
    height: 28px;
    background: linear-gradient(to bottom, rgba(0, 174, 239, 0.4), rgba(0, 174, 239, 0.7));
    border-radius: 2px;
}

/* AI tags under each node */
.org-ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 10px;
}

.org-ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 174, 239, 0.08);
    color: var(--theme-color, #00aeef);
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid rgba(0, 174, 239, 0.2);
    transition: background 0.25s ease;
}

.org-ai-tag:hover {
    background: rgba(0, 174, 239, 0.18);
}

/* Highlighted AI tags (Khối CN) */
.org-ai-tag--highlight {
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.15) 0%, rgba(0, 118, 255, 0.15) 100%);
    color: #0076ff;
    border-color: rgba(0, 118, 255, 0.3);
    font-weight: 700;
    position: relative;
}

.org-ai-tag--highlight::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, #00aeef, #0076ff);
    z-index: -1;
    opacity: 0.3;
}

/* Legend */
.org-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 118, 255, 0.05);
    border: 1px dashed rgba(0, 118, 255, 0.3);
    border-radius: 12px;
    padding: 12px 20px;
    margin-top: 32px;
    flex-wrap: wrap;
    justify-content: center;
}

.org-legend-dot--ai {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00aeef, #0076ff);
    box-shadow: 0 0 8px rgba(0, 118, 255, 0.5);
    flex-shrink: 0;
}

.org-legend-text {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--body-color, #484848);
}

.org-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--theme-color, #00aeef);
    color: #fff;
    font-family: var(--title-font);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
}

/* Responsive org chart */
@media (max-width: 991px) {
    .org-level {
        grid-template-columns: repeat(2, 1fr);
    }

    .org-level::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .org-level {
        grid-template-columns: 1fr;
    }

    .org-node {
        padding: 16px 20px;
        min-width: auto;
    }

    .org-node-label {
        font-size: 14px;
    }

    .org-node-sub {
        font-size: 10px;
    }

    .org-ai-tags {
        gap: 3px;
    }

    .org-ai-tag {
        font-size: 10px;
        padding: 2px 7px;
    }

    .org-connector-v {
        height: 24px;
    }
}

/* ============================================
   Subsidiaries Carousel (Swiper-based)
   ============================================ */
.sub-carousel-wrapper {
    position: relative;
    padding: 0 48px;
}

.sub-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--title-color, #0b203f);
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.sub-nav-btn:hover {
    background: var(--theme-color, #00aeef);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.sub-nav-prev {
    left: 0;
}

.sub-nav-next {
    right: 0;
}

#subCarousel .swiper-slide {
    height: auto;
}

.sub-card-v2 {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    height: 100%;
}

#subCarousel .swiper-slide:hover .sub-card-v2 {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(11, 32, 63, 0.15);
}

.sub-card-v2-inner {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive */
@media (max-width: 767px) {
    .sub-card-v2-inner {
        padding: 20px;
    }

    .sub-carousel-wrapper {
        padding: 0 36px;
    }
}

/* ============================================
   Contact Split Section — Responsive Fixes
   ============================================ */
@media (max-width: 767px) {
    .cta-area2 .btn-group {
        flex-direction: column;
        gap: 12px;
    }

    .cta-area2 .th-btn {
        width: 100%;
        justify-content: center;
    }

    .cta-area2 .cta-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 16px;
    }
}

@media (max-width: 576px) {
    .cta-area2 .cta-list {
        grid-template-columns: 1fr;
    }
}

/* Each card */
.sub-card {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 40px rgba(11, 32, 63, 0.12);
    overflow: hidden;
    will-change: transform, opacity;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

/* Card inner: two-column */
.sub-card-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}

/* Left col */
.sub-card-left {
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

/* Step badge */
.sub-step-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0b203f;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.sub-step-word {
    font-family: var(--title-font);
    font-size: 7px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.08em;
    line-height: 1;
}

.sub-step-num {
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.sub-card-title {
    font-family: var(--title-font);
    font-size: 22px;
    font-weight: 800;
    color: var(--title-color, #0b203f);
    margin: 0 0 6px;
    line-height: 1.3;
}

.sub-card-tagline {
    font-family: var(--body-font);
    font-size: 13px;
    font-style: italic;
    color: var(--theme-color, #00aeef);
    margin: 0 0 10px;
    line-height: 1.5;
}

.sub-card-desc {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--body-color, #484848);
    line-height: 1.7;
    margin: 0 0 14px;
}

.sub-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.sub-card-bullets li {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--body-color, #484848);
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
    margin-bottom: 5px;
}

.sub-card-bullets li i {
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 13px;
    color: var(--theme-color, #00aeef);
}

/* CTA button */
.sub-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0b203f;
    color: #fff;
    font-family: var(--title-font);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
    width: fit-content;
}

.sub-card-cta:hover {
    background: var(--theme-color, #00aeef);
    color: #fff;
    transform: translateX(4px);
}

/* Right col — image */
.sub-card-right {
    position: relative;
    overflow: hidden;
    background: #f0f4f8;
}

.sub-card-img-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.sub-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sub-card-logo-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--theme-color, #00aeef);
    color: #fff;
    font-family: var(--title-font);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

/* Responsive stacking cards */
@media (max-width: 767px) {
    .sub-stack-viewport {
        height: 360px;
    }

    .sub-card-inner {
        grid-template-columns: 1fr;
    }

    .sub-card-left {
        padding: 24px 20px;
    }

    .sub-card-right {
        height: 180px;
    }

    .sub-dot-nav {
        display: flex;
        right: 4px;
    }

    .sub-step-badge {
        width: 44px;
        height: 44px;
    }

    .sub-step-word {
        font-size: 6px;
    }

    .sub-step-num {
        font-size: 14px;
    }

    .sub-card-title {
        font-size: 18px;
    }

    .sub-card-tagline {
        font-size: 13px;
    }

    .sub-card-desc {
        font-size: 13px;
    }
}

@media (max-width: 476px) {
    .sub-stack-viewport {
        height: 340px;
    }

    .sub-card-left {
        padding: 20px 16px;
    }

    .sub-card-right {
        height: 150px;
    }
}

/* ============================================
   Increase stacking card height
   ============================================ */
.sub-stack-viewport {
    height: 520px;
}

/* ============================================
   Block 2 — Glassmorphism Bento Org Chart
   ============================================ */

/* Section wrapper */
.org-bento-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0f1e 0%, #0d1b3e 50%, #0f0a2e 100%);
    padding: 80px 0 90px;
}

/* Particle canvas */
.org-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* Gradient headline */
.org-headline {
    color: var(--title-color, #0b203f) !important;
    -webkit-text-fill-color: var(--title-color, #0b203f) !important;
}

.org-gradient-title {
    font-family: "Inter", var(--title-font) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: clamp(22px, 3.5vw, 42px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.org-gradient-highlight {
    background: linear-gradient(90deg, #00aeef 0%, #7c3aed 50%, #ff2d9b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Override subtitle color in dark section */
.org-bento-section .sub-title {
    color: rgba(255, 255, 255, 0.55) !important;
}

.org-bento-section .box-text {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* SVG overlay for bezier paths */
.org-svg-paths {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Animated particles on SVG paths */
.org-particle {
    filter: drop-shadow(0 0 4px currentColor);
}

/* ── Bento Grid layout ─────────────────────────────────────────────────────── */
.org-bento-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    gap: 18px;
    position: relative;
    z-index: 3;
    max-width: 1100px;
    margin: 0 auto;
}

/* Center card occupies middle column, row 1 */
.org-bento-center {
    grid-column: 2 / 5;
    grid-row: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b203f 0%, #1a3a6b 60%, #0d2657 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    box-shadow:
        0 0 40px rgba(0, 174, 239, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
}

/* Dept cards in row 2 (span full width 1 each) */
.org-bento-dept {
    grid-row: 2;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px 18px 0;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.org-bento-dept:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Per-dept pastel glass colors */
.org-bento-bo {
    background: rgba(0, 172, 193, 0.07);
    box-shadow: 0 4px 20px rgba(0, 172, 193, 0.1);
}

.org-bento-cn {
    background: rgba(124, 58, 237, 0.1);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
}

.org-bento-kd {
    background: rgba(255, 127, 0, 0.07);
    box-shadow: 0 4px 20px rgba(255, 127, 0, 0.1);
}

.org-bento-dt {
    background: rgba(138, 43, 226, 0.07);
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.1);
}

/* Featured (CN) glow ring */
.org-bento-featured {
    border-color: rgba(124, 58, 237, 0.45) !important;
}

.org-featured-glow {
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: linear-gradient(135deg, #7c3aed, #0076ff);
    z-index: -1;
    opacity: 0.35;
    filter: blur(8px);
    animation: featuredPulse 3s ease-in-out infinite;
}

@keyframes featuredPulse {
    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.5;
    }
}

/* Metallic glow on center card */
.org-metallic-glow {
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 215, 0, 0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: metallicShift 5s ease-in-out infinite;
}

@keyframes metallicShift {
    0%,
    100% {
        opacity: 0.8;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-8px);
    }
}

.org-bento-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffd700;
    margin: 14px auto 0;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }
}

.org-bento-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.org-bento-label-sm {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 215, 0, 0.7);
    margin-bottom: 8px;
}

.org-bento-name {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.org-bento-sub {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* Dept header */
.org-dept-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.org-dept-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.org-dept-icon--cn {
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.3);
}

.org-dept-icon--kd {
    color: #ffa040;
    background: rgba(255, 127, 0, 0.2);
    border-color: rgba(255, 127, 0, 0.3);
}

.org-dept-icon--dt {
    color: #c084fc;
    background: rgba(138, 43, 226, 0.2);
    border-color: rgba(138, 43, 226, 0.3);
}

.org-dept-name {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.2;
}

.org-dept-sub {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
}

/* AI sub-container (cyberpunk zone) */
.org-ai-sub {
    margin-top: auto;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 14px;
    border-radius: 0 0 14px 14px;
    margin-left: -18px;
    margin-right: -18px;
}

.org-ai-sub--cyber {
    background: rgba(0, 0, 0, 0.45);
    border-top-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 -4px 20px rgba(124, 58, 237, 0.15) inset;
}

.org-ai-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Fira Code", monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.org-ai-label--cyber {
    color: rgba(167, 139, 250, 0.7);
}

.org-ai-tags-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.org-ai-tag-v2 {
    font-family: "Fira Code", monospace;
    font-size: 10px;
    font-weight: 500;
    color: rgba(0, 174, 239, 0.85);
    background: rgba(0, 174, 239, 0.08);
    border: 1px solid rgba(0, 174, 239, 0.2);
    border-radius: 4px;
    padding: 3px 8px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition:
        background 0.25s,
        color 0.25s;
}

.org-ai-tag-v2:hover {
    background: rgba(0, 174, 239, 0.18);
    color: #00aeef;
}

/* Cyberpunk variant for CN */
.org-ai-tag-v2--cyber {
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
    animation: cyberBlink 4s ease-in-out infinite;
}

@keyframes cyberBlink {
    0%,
    90%,
    100% {
        box-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
    }

    95% {
        box-shadow: 0 0 16px rgba(124, 58, 237, 0.7);
    }
}

/* Legend */
.org-bento-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 20px;
    margin-top: 28px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive bento grid */
@media (max-width: 991px) {
    .org-bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .org-bento-center {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .org-bento-dept {
        grid-row: auto;
    }

    .org-svg-paths {
        display: none;
    }
}

@media (max-width: 576px) {
    .org-bento-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Contact Page — Center align icon-btn
   Ensure icons in contact media boxes are centered
   both horizontally and vertically within the circle
   ============================================ */
.contact-media .icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 auto 16px !important;
}

/* ============================================
   Products Section — Reduced row spacing
   ============================================ */
#products-sec .space-extra-top {
    padding-top: 60px;
    margin-bottom: 20px;
}

/* ============================================
   Primary Button — "Tìm hiểu thêm" / "Xem tất cả" / "Khám phá ngay"
   Figma: node-id 1:417 (button component)
   Background: #0B203F, border-radius 48px,
   padding: 24px, width: 223px
   white text 16px font-weight 500, arrow icon right
   Hover: rgba(0,174,239,0.18) pseudo-element right side
   Override theme .th-btn:before to prevent conflict
   ============================================ */

/* Disable theme's default :before pseudo-element on all primary buttons */
.th-btn.primary-btn:before,
.btn-group .th-btn:before,
.th-btn-outline:before,
.sec-btn .th-btn:before,
#products-sec .th-btn:before {
    display: none !important;
    content: none !important;
}

/* Disable hover :after pseudo-element on Products section button (no color change on hover per Figma 1:1573) */
#products-sec .th-btn.primary-btn::after {
    display: none !important;
}

/* Disable hover :after pseudo-element on Hero section button (no color change on hover per Figma 1:1573) */
.hero-style1 .th-btn:hover::after {
    width: auto !important;
    opacity: 0 !important;
}

.th-btn.primary-btn,
.btn-group .th-btn,
.th-btn-outline,
.sec-btn .th-btn,
#products-sec .th-btn {
    background: #0b203f;
    border-radius: 48px;
    padding: 24px 24px;
    width: 223px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border: none;
    transition: all 0.3s ease;
}

.th-btn .icon img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.th-btn.primary-btn::after,
.btn-group .th-btn::after,
.th-btn-outline::after,
.sec-btn .th-btn::after,
#products-sec .th-btn::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 68px;
    height: 68px;
    /* background: rgba(0, 174, 239, 0.18); */
    background: #0b203f;
    border-radius: 0 32px 32px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.th-btn.primary-btn:hover::after,
.btn-group .th-btn:hover::after,
.th-btn-outline:hover::after,
.sec-btn .th-btn:hover::after,
#products-sec .th-btn:hover::after {
    opacity: 1;
}

.th-btn.primary-btn .icon,
.btn-group .th-btn .icon,
.th-btn-outline .icon,
.sec-btn .th-btn .icon,
#products-sec .th-btn .icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.th-btn.primary-btn .icon img,
.btn-group .th-btn .icon img,
.th-btn-outline .icon img,
.sec-btn .th-btn .icon img,
#products-sec .th-btn .icon img {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    #products-sec .space-extra-top {
        padding-top: 40px;
        margin-bottom: 15px;
    }
}

/* ============================================
   Products Section — Feature image hover effect
   Zoom out (scale down) on hover for both img and font icons
   ============================================ */
#products-sec .feature-image {
    transition: transform 0.3s ease;
}

#products-sec .feature-image:hover {
    transform: scale(0.95);
}

#products-sec .feature-image img,
#products-sec .feature-image i {
    transition: transform 0.3s ease;
}

#products-sec .feature-image:hover img,
#products-sec .feature-image:hover i {
    transform: scale(1.1);
}

/* ============================================
   About Page — Discovery Block
   Figma: node-id 89:4009
   4-column grid after "Chúng tôi là ai" section
   ============================================ */
.discovery-block-section {
    padding: 40px 80px;
}

.discovery-grid {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.discovery-item {
    flex: 1 0 0;
    text-decoration: none;
    min-width: 0;
}

.discovery-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    min-height: 1px;
    min-width: 1px;
}

.discovery-ellipse {
    position: absolute;
    left: -41px;
    top: -13.76px;
    width: 242px;
    height: 66px;
    background: linear-gradient(248.13deg, #0076ff 17.45%, #004799 61.31%);
    opacity: 0;
    filter: blur(40px);
    transform: matrix(-1, 0, 0, 1, 0, 0);
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.discovery-card:hover .discovery-ellipse {
    opacity: 0.8;
}

.discovery-icon-wrap {
    background: rgba(244, 244, 244, 0.5);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.discovery-icon-wrap .discovery-icon {
    width: 32px;
    height: 32px;
}

.discovery-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.discovery-content .item-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 28.6px;
    color: #0b203f;
}

.discovery-content .item-subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
    .discovery-block-section {
        padding: 40px 40px;
    }
}

@media (max-width: 767px) {
    .discovery-block-section {
        padding: 30px 20px;
    }

    .discovery-grid {
        flex-direction: column;
    }

    .discovery-content .item-title {
        font-size: 20px;
    }
}

/* ============================================
   Leader Horizontal Card - Ban Lãnh Đạo
   ============================================ */
.leader-horizontal-card {
    display: flex;
    gap: 32px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.leader-horizontal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.leader-horizontal-card .lhc-image {
    flex-shrink: 0;
    width: 220px;
    height: 260px;
    overflow: hidden;
}

.leader-horizontal-card .lhc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.leader-horizontal-card:hover .lhc-image img {
    transform: scale(1.05);
}

.leader-horizontal-card .lhc-content {
    flex: 1;
    padding: 28px 32px 28px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.leader-horizontal-card .lhc-header {
    margin-bottom: 16px;
}

.leader-horizontal-card .lhc-name {
    font-size: 22px;
    font-weight: 700;
    color: #0b203f;
    margin: 0 0 6px;
}

.leader-horizontal-card .lhc-title {
    font-size: 14px;
    color: #ff6b00;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leader-horizontal-card .lhc-bio {
    margin-bottom: 20px;
}

.leader-horizontal-card .lhc-bio p {
    font-size: var(--body-font-size, 18px);
    line-height: 1.75;
    color: #555;
    margin: 0;
    text-align: justify;
}

.leader-horizontal-card .lhc-social {
    display: flex;
    gap: 12px;
}

.leader-horizontal-card .lhc-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b203f;
    font-size: 14px;
    transition: all 0.3s ease;
}

.leader-horizontal-card .lhc-social a:hover {
    background: #ff6b00;
    color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .leader-horizontal-card {
        flex-direction: column;
    }

    .leader-horizontal-card .lhc-image {
        width: 100%;
        height: 300px;
    }

    .leader-horizontal-card .lhc-content {
        padding: 24px;
    }
}

/* ============================================
   Leader 3D Parallax Cards — Ban Lãnh Đạo
   Hiệu ứng 3D parallax với ảnh transparent
   ============================================ */
.leader-3d-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 32px;
    overflow: visible;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 8px 40px rgba(0, 0, 0, 0.04);
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease;
    min-height: 360px;
}

.leader-3d-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.1),
        0 24px 60px rgba(0, 0, 0, 0.06);
}

/* Card sizes */
.leader-card-lg {
    padding: 40px 48px;
    min-height: 380px;
}

.leader-card-sm {
    padding: 28px;
    min-height: 360px;
}

/* Image wrap — 3D parallax container */
.leader-3d-card .l3d-image-wrap {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    height: 260px;
    display: flex;
    align-items: center;
    align-self: center;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

.leader-card-lg .l3d-image-wrap {
    width: 240px;
    height: 280px;
}

.leader-card-sm .l3d-image-wrap {
    width: 170px;
    height: 220px;
}

/* Background circle — gradient halo */
.leader-3d-card .l3d-bg-circle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(11, 32, 63, 0.1) 100%);
    filter: blur(20px);
    transition: all 0.4s ease;
}

.leader-card-lg .l3d-bg-circle {
    width: 200px;
    height: 200px;
}

.leader-card-sm .l3d-bg-circle {
    width: 130px;
    height: 130px;
}

.leader-3d-card:hover .l3d-bg-circle {
    width: 180px;
    filter: blur(24px);
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.25) 0%, rgba(11, 32, 63, 0.15) 100%);
}

.leader-card-lg:hover .l3d-bg-circle {
    width: 230px;
}

.leader-card-sm:hover .l3d-bg-circle {
    width: 150px;
}

/* Image layer — 3D tilt effect */
.leader-3d-card .l3d-image-layer {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leader-3d-card:hover .l3d-image-layer {
    transform: translateY(-12px) scale(1.05) rotateX(5deg);
}

/* Transparent PNG image */
.leader-3d-card .l3d-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
    transition: filter 0.4s ease;
}

.leader-3d-card:hover .l3d-img {
    filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.2));
}

/* Content area */
.leader-3d-card .l3d-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.leader-3d-card .l3d-header {
    margin-bottom: 14px;
}

.leader-3d-card .l3d-name {
    font-size: 24px;
    font-weight: 700;
    color: #0b203f;
    margin: 0 0 6px;
    line-height: 1.3;
}

.leader-card-lg .l3d-name {
    font-size: 28px;
}

.leader-card-sm .l3d-name {
    font-size: 20px;
}

.leader-3d-card .l3d-title {
    font-size: 13px;
    color: #ff6b00;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    background: linear-gradient(90deg, #ff6b00, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Bio text */
.leader-3d-card .l3d-bio {
    margin-bottom: 18px;
    flex: 1;
}

.leader-3d-card .l3d-bio p {
    font-size: 13.5px;
    line-height: 1.75;
    color: #555;
    margin: 0;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.leader-card-lg .l3d-bio p {
    font-size: var(--body-font-size, 18px);
    -webkit-line-clamp: 12;
}

.leader-card-sm .l3d-bio p {
    font-size: var(--body-font-size, 18px);
    -webkit-line-clamp: 12;
}

/* Social buttons */
.leader-3d-card .l3d-social {
    display: flex;
    gap: 10px;
}

.leader-3d-card .l3d-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f0f4f8, #e6ecf1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b203f;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.leader-3d-card .l3d-social-btn:hover {
    background: linear-gradient(145deg, #ff6b00, #ff8c00);
    color: #fff;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .leader-3d-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .leader-3d-card .l3d-image-wrap {
        width: 180px;
        height: 220px;
    }

    .leader-3d-card .l3d-content {
        padding: 0;
    }

    .leader-3d-card .l3d-social {
        justify-content: center;
    }

    .leader-3d-card .l3d-bio p {
        -webkit-line-clamp: unset;
    }
}

@media (max-width: 575px) {
    .leader-3d-card {
        padding: 24px;
        gap: 20px;
    }

    .leader-card-lg {
        padding: 32px 24px;
    }

    .leader-3d-card .l3d-image-wrap {
        width: 150px;
        height: 190px;
    }

    .leader-3d-card .l3d-name {
        font-size: 20px;
    }

    .leader-3d-card .l3d-bio p {
        font-size: 13px;
        text-align: left;
    }

    .leader-3d-card .l3d-social-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

/* ============================================
   Button Outline Style
   ============================================ */
.th-btn-outline {
    background-color: transparent !important;
    color: var(--theme-color) !important;
    border: 2px solid var(--theme-color) !important;
}

.th-btn-outline:hover {
    background-color: var(--theme-color) !important;
    color: var(--white-color) !important;
}

.th-btn-outline:before,
.th-btn-outline:after {
    display: none;
}

/* Override global .th-btn .icon img filter for outline buttons — prevent white icon on light background */
.th-btn-outline .icon img {
    -webkit-filter: none !important;
    filter: none !important;
    /* Match icon color to button text (theme color) */
    color: var(--theme-color);
}

.th-btn-outline:hover .icon img {
    /* On hover, make icon white to match white text */
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

/* ============================================
   TikTok Button — Social Links
   ============================================ */
.btn-outline-tiktok {
    background-color: transparent;
    border: 2px solid #000000;
    color: #000000;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-tiktok i {
    color: #000000;
    transition: color 0.3s ease;
}

.btn-outline-tiktok:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.btn-outline-tiktok:hover i {
    color: #ffffff;
}

.btn-outline-tiktok:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Contact Map Link — Address clickable
   ============================================ */
.contact-map {
    position: relative;
}

/* Google Maps iframe: responsive + above theme decorative pin (.contact-map .contact-icon from style.css) */
.contact-map .contact-map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 280px;
    overflow: hidden;
    border-radius: 0 0 48px 48px;
    background: #e8e6e3;
}

.contact-map .contact-map-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    z-index: 4;
}

/* "Xem bản đồ lớn hơn" stays clickable above iframe */
.contact-map .contact-map-link {
    z-index: 6;
}

.contact-map-link {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 50px;
    padding: 8px 16px 8px 8px;
    text-decoration: none;
    color: #0b203f;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.contact-map-link:hover {
    background: #ff6b00;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
}

.contact-map-link:hover .contact-icon {
    background: #ffffff;
    color: #ff6b00;
}

.contact-map-link:hover .contact-icon img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(91%) saturate(2468%) hue-rotate(340deg) brightness(101%)
        contrast(101%);
}

.contact-map-link-text {
    white-space: nowrap;
}

.contact-map-link .contact-icon {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact-map-link .contact-icon img {
    width: 16px;
    height: 16px;
    transition: filter 0.3s ease;
}

.contact-map-link .contact-icon::before,
.contact-map-link .contact-icon::after {
    content: none;
    display: none;
}

/* ============================================
   Contact Page — Address Link Hover
   ============================================ */
.contact-media .box-text a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.contact-media .box-text a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #ff6b00;
    transition: width 0.3s ease;
}

.contact-media .box-text a:hover {
    color: #ff6b00;
}

.contact-media .box-text a:hover::after {
    width: 100%;
}

/* ============================================
   Contact Map — Icon overlay hover
   ============================================ */
.contact-map .contact-icon {
    transition: all 0.3s ease;
}

.contact-map:hover .contact-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
}

/* ============================================
   Social Links — Hover lift effect
   ============================================ */
.social-links .btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-links .btn:hover {
    transform: translateY(-4px) scale(1.02);
}

.social-links .btn-outline-primary:hover {
    box-shadow: 0 8px 24px rgba(0, 123, 255, 0.3);
}

/* Footer copyright text - smaller */
.footer-layout1 .copyright-text {
    font-size: 13px;
    opacity: 0.85;
}

/* CTA section background - dark gradient for text contrast */
.cta-about-enhanced {
    background: linear-gradient(135deg, rgba(0, 51, 87, 0.92) 0%, rgba(0, 174, 239, 0.85) 100%);
}

/* Social media hover effects - brand colors */
.social-links .btn-outline-facebook {
    background-color: transparent;
    border: 2px solid #1877f2;
    color: #1877f2;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-links .btn-outline-facebook i {
    color: #1877f2;
    transition: color 0.3s ease;
}

.social-links .btn-outline-facebook:hover {
    background-color: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.3);
}

.social-links .btn-outline-facebook:hover i {
    color: #ffffff;
}

.social-links .btn-outline-youtube {
    background-color: transparent;
    border: 2px solid #ff0000;
    color: #ff0000;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-links .btn-outline-youtube i {
    color: #ff0000;
    transition: color 0.3s ease;
}

.social-links .btn-outline-youtube:hover {
    background-color: #ff0000;
    border-color: #ff0000;
    color: #ffffff;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.3);
}

.social-links .btn-outline-youtube:hover i {
    color: #ffffff;
}

/* ============================================
   K-Doctor Logo Size Adjustment
   Reduce logo size by 20% and center it
   ============================================ */
#products-sec img[src*="kdoctor-icon"] {
    max-width: 80%;
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* ============================================
   Contact Page — Info row
   Matches vertical spacing of "Kết nối với chúng tôi" section below
   ============================================ */
.contact-info-row {
    padding: var(--section-space, 120px) 0 20px;
}

/* ============================================
   Contact Map — Fixed size centered layout
   ============================================ */
.contact-map-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.contact-map-wrapper iframe {
    width: 1650px;
    height: 600px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Tablet: 768px - 1199px */
@media (max-width: 1650px) {
    .contact-map-wrapper iframe {
        width: 100%;
        max-width: 1650px;
        height: 500px;
    }
}

/* Tablet small: 576px - 767px */
@media (max-width: 767px) {
    .contact-map-wrapper iframe {
        height: 350px;
        border-radius: 12px;
    }

    .contact-map-wrapper {
        padding: 20px 0;
    }
}

/* Mobile: < 576px */
@media (max-width: 575px) {
    .contact-map-wrapper iframe {
        height: 280px;
        border-radius: 8px;
    }
}

/* ============================================
   Recruitment Pages — Responsive Fixes
   Fix job card inline styles, quiz result dimensions,
   application form layout, and grid issues
   ============================================ */

/* Job Card — move inline styles to CSS classes */
.job-card {
    transition: all 0.3s ease;
    border-left: 4px solid #00aeef;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Recruitment listing grid — ensure proper mobile layout */
@media (max-width: 991px) {
    .recruitment-listing .row.gy-4 {
        row-gap: 1.5rem;
    }
}

/* Mobile: stack job cards full width */
@media (max-width: 767px) {
    .recruitment-listing .col-lg-6 {
        width: 100%;
        max-width: 100%;
    }

    .job-card {
        padding: 1.5rem;
    }

    .job-card h4 {
        font-size: 1.1rem;
    }

    .job-card .badge {
        font-size: 0.75rem;
        padding: 0.5em 0.75em;
    }
}

/* Quiz Result — responsive score circle */
.score-circle {
    width: 150px;
    height: 150px;
    max-width: 40vw;
    max-height: 40vw;
}

.score-number {
    font-size: 2.5rem;
    font-weight: bold;
}

@media (max-width: 767px) {
    .score-circle {
        width: 120px;
        height: 120px;
        border-width: 6px;
    }

    .score-number {
        font-size: 2rem;
    }

    .quiz-result-wrapper {
        padding: 2rem 1.5rem;
    }

    .quiz-result-wrapper .sec-title {
        font-size: 1.5rem;
    }

    .quiz-result-wrapper .lead {
        font-size: 1rem;
    }
}

@media (max-width: 476px) {
    .score-circle {
        width: 100px;
        height: 100px;
        border-width: 5px;
    }

    .score-number {
        font-size: 1.5rem;
    }
}

/* Application Form — mobile stacking */
@media (max-width: 767px) {
    .application-form .col-md-6 {
        width: 100%;
        max-width: 100%;
    }

    .application-form .form-control {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .application-form .th-btn {
        width: 100%;
        text-align: center;
    }

    .application-form .d-flex.gap-3 {
        flex-direction: column;
    }
}

/* Job Detail — sidebar adjustments */
@media (max-width: 991px) {
    .job-sidebar {
        margin-top: 2rem;
    }
}

@media (max-width: 767px) {
    .job-description,
    .job-requirements,
    .job-benefits {
        margin-bottom: 2rem;
    }

    .apply-section .d-flex {
        flex-direction: column;
    }

    .apply-section .th-btn {
        width: 100%;
        text-align: center;
    }
}

/* Quiz Form — mobile adjustments */
@media (max-width: 767px) {
    .quiz-question {
        padding: 1.25rem;
    }

    .quiz-question h4 {
        font-size: 1.1rem;
    }

    .quiz-form .th-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   Products Pages — Responsive Fixes
   Fix inline height styles, product selector,
   demo animation layout, and image scaling
   ============================================ */

/* Hero images — responsive heights replacing inline styles */
.responsive-hero-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

/* Tablet: scale down hero images */
@media (max-width: 991px) {
    .responsive-hero-img {
        max-height: 300px;
    }
}

/* Mobile: further reduce */
@media (max-width: 767px) {
    .responsive-hero-img {
        max-height: 250px;
    }
}

/* Section images — responsive scaling */
.responsive-section-img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .responsive-section-img {
        max-height: 280px;
    }
}

@media (max-width: 767px) {
    .responsive-section-img {
        max-height: 220px;
    }
}

/* Hero/section placeholders — responsive heights */
.responsive-hero-placeholder,
.responsive-section-placeholder {
    width: 100%;
    height: auto;
    min-height: 300px;
    border-radius: 20px;
}

@media (max-width: 991px) {
    .responsive-hero-placeholder,
    .responsive-section-placeholder {
        min-height: 250px;
    }
}

@media (max-width: 767px) {
    .responsive-hero-placeholder,
    .responsive-section-placeholder {
        min-height: 200px;
    }
}

/* Product selector — improve horizontal scroll on tablets */
.product-selector-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
}

.product-selector-wrapper::-webkit-scrollbar {
    height: 4px;
}

.product-selector-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.product-selector-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 174, 239, 0.3);
    border-radius: 2px;
}

/* Product buttons — responsive scaling */
.product-btn {
    width: 200px;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .product-btn {
        width: 160px;
    }
}

@media (max-width: 767px) {
    .product-btn {
        width: 140px;
    }

    /* Stack product buttons vertically on mobile instead of horizontal scroll */
    .product-selector-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        overflow-x: visible;
    }

    .product-btn {
        width: calc(50% - 6px);
        max-width: 200px;
    }
}

/* Demo animation layout — fix flex issues on medium screens */
.demo-animation-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

@media (max-width: 991px) {
    .demo-animation-section {
        flex-direction: column;
        text-align: center;
    }

    .demo-animation-section .demo-content {
        order: 1;
    }

    .demo-animation-section .demo-visual {
        order: 2;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .demo-animation-section {
        gap: 1.5rem;
    }

    .demo-animation-section .th-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   News Detail Page — Responsive
   ============================================ */

/* Hero section title responsive */
@media (max-width: 768px) {
    .hero-wrapper h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .hero-wrapper .sub-title {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .hero-wrapper {
        padding: 60px 0;
    }

    .hero-wrapper h1 {
        font-size: 24px;
    }

    .hero-wrapper .sub-title {
        font-size: 11px;
    }
}

/* Article excerpt */
@media (max-width: 576px) {
    .article-excerpt {
        padding: 1rem;
    }

    .article-excerpt .lead {
        font-size: 14px;
    }
}

/* Article content images responsive */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Article content typography mobile */
@media (max-width: 576px) {
    .article-content {
        font-size: 15px;
        line-height: 1.7;
    }

    .article-content h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .article-content h3 {
        font-size: 18px;
        line-height: 1.4;
    }
}

/* Share buttons mobile */
@media (max-width: 576px) {
    .share-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .share-buttons .btn {
        flex: 1 1 auto;
        text-align: center;
        min-width: 80px;
    }
}

/* Related articles grid mobile */
@media (max-width: 576px) {
    .blog-card .box-title {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* ============================================
   Kolia Product Page - Logo Border Blur
   ============================================ */

/* Border blur gradient cho logo Kolia - tạo chuyển tiếp mượt giữa logo và hero background */
.product-kolia .hero-image2 {
    position: relative;
}

.product-kolia .hero-image2 .responsive-hero-img {
    border-radius: 20px;
    box-shadow:
        0 0 40px rgba(59, 130, 246, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.product-kolia .hero-image2::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.25) 0%,
        rgba(59, 130, 246, 0.1) 30%,
        rgba(16, 185, 129, 0.05) 60%,
        rgba(16, 185, 129, 0) 100%
    );
    z-index: 0;
    filter: blur(12px);
    -webkit-filter: blur(12px);
}

.product-kolia .hero-image2::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 28px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, rgba(16, 185, 129, 0.03) 50%, transparent 100%);
    z-index: 0;
    filter: blur(20px);
    -webkit-filter: blur(20px);
}

/* ============================================
   IUCHI Product Page Styles
   ============================================ */

/* IUCHI primary button - matches logo color #10456d */
.product-iuchi .th-btn3.style3 {
    background: linear-gradient(135deg, #10456d 0%, #063d67 100%);
    border: 1px solid rgba(16, 69, 109, 0.8);
}

.product-iuchi .th-btn3.style3:hover {
    background: linear-gradient(135deg, #1a5a8f 0%, #10456d 100%);
    border-color: #10456d;
    box-shadow: 0 8px 24px rgba(16, 69, 109, 0.4);
}

.product-iuchi .th-btn3.style3 .icon {
    background-color: rgba(255, 255, 255, 0.2);
}

/* White arrow icons in IUCHI buttons */
.product-iuchi .th-btn3.style3 .icon i svg path {
    stroke: white;
}

/* Dark arrow icons for "Liên hệ tư vấn" button */
.product-iuchi .th-btn3.style4 .icon i svg path {
    stroke: #10456d;
}

.product-iuchi .hero-style5 {
    padding-top: 80px;
}

/* IUCHI scroll down button - matches logo color */
.product-iuchi .scroll-down a {
    color: #10456d;
}

.product-iuchi .scroll-down .icon-btn {
    background: linear-gradient(135deg, #10456d 0%, #063d67 100%);
    border: 1px solid rgba(16, 69, 109, 0.8);
    color: white;
}

/* ============================================
   IUCHI Logo Showcase - Redesigned
   ============================================ */
.product-iuchi .iuchi-logo-showcase {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer glow ring - gradient halo effect */
.product-iuchi .iuchi-logo-showcase .logo-glow-ring {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(16, 69, 109, 0.6) 15%,
        rgba(201, 162, 39, 0.4) 30%,
        transparent 45%,
        rgba(16, 69, 109, 0.6) 60%,
        rgba(201, 162, 39, 0.3) 75%,
        transparent 100%
    );
    animation: glowRotate 20s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
}

/* Inner ring - solid border accent */
.product-iuchi .iuchi-logo-showcase .logo-inner-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid rgba(201, 162, 39, 0.3);
    background: radial-gradient(
        circle at center,
        rgba(16, 69, 109, 0.15) 0%,
        rgba(6, 61, 103, 0.1) 60%,
        transparent 100%
    );
    backdrop-filter: blur(4px);
}

/* Main logo container */
.product-iuchi .iuchi-logo-showcase .logo-main-container {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(16, 69, 109, 0.3) 50%,
        rgba(6, 61, 103, 0.2) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 32px rgba(6, 61, 103, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.product-iuchi .iuchi-logo-showcase .logo-main-image {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-iuchi .iuchi-logo-showcase:hover .logo-main-image {
    transform: scale(1.08);
}

/* Police badge - authorized emblem */
.product-iuchi .iuchi-logo-showcase .police-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    width: 66px;
    height: 87px;
    background: white;
    border-radius: 12px;
    padding: 6px;
    box-shadow:
        0 4px 16px rgba(6, 61, 103, 0.3),
        0 0 0 3px rgba(201, 162, 39, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: badgeFloat 3s ease-in-out infinite;
    cursor: help;
}

.product-iuchi .iuchi-logo-showcase .police-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Badge tooltip */
.product-iuchi .iuchi-logo-showcase .police-badge .badge-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(6, 61, 103, 0.95);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-iuchi .iuchi-logo-showcase .police-badge .badge-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(6, 61, 103, 0.95);
}

.product-iuchi .iuchi-logo-showcase .police-badge:hover .badge-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.product-iuchi .iuchi-logo-showcase .police-badge:hover {
    animation-play-state: paused;
}

/* Animations */
@keyframes glowRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes badgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-iuchi .iuchi-logo-showcase {
        width: 220px;
        height: 220px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-glow-ring {
        width: 200px;
        height: 200px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-inner-ring {
        width: 170px;
        height: 170px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-main-container {
        width: 140px;
        height: 140px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-main-image {
        width: 110px;
        height: 110px;
    }

    .product-iuchi .iuchi-logo-showcase .police-badge {
        width: 50px;
        height: 66px;
        right: -8px;
    }
}

@media (max-width: 480px) {
    .product-iuchi .iuchi-logo-showcase {
        width: 180px;
        height: 180px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-glow-ring {
        width: 160px;
        height: 160px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-inner-ring {
        width: 130px;
        height: 130px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-main-container {
        width: 110px;
        height: 110px;
    }

    .product-iuchi .iuchi-logo-showcase .logo-main-image {
        width: 80px;
        height: 80px;
    }

    .product-iuchi .iuchi-logo-showcase .police-badge {
        width: 40px;
        height: 52px;
    }
}

/* ============================================
   Telecom Logo Showcase - Following IUCHI pattern
   With telecom-specific branding (#00AEEF cyan)
   ============================================ */

/* Telecom checklist - single row, reduced padding */
.product-telecom .about-checklist {
    padding-top: 0;
    margin-top: 0;
}

/* Telecom primary button - matches brand color #00AEEF */
.product-telecom .th-btn3.style3 {
    background: linear-gradient(135deg, #00aeef 0%, #0088cc 100%);
    border: 1px solid rgba(0, 174, 239, 0.8);
}

.product-telecom .th-btn3.style3:hover {
    background: linear-gradient(135deg, #00c0ff 0%, #00aeef 100%);
    border-color: #00aeef;
    box-shadow: 0 8px 24px rgba(0, 174, 239, 0.4);
}

.product-telecom .th-btn3.style3 .icon {
    background-color: rgba(255, 255, 255, 0.2);
}

/* White arrow icons in Telecom buttons */
.product-telecom .th-btn3.style3 .icon i svg path {
    stroke: white;
}

/* Dark arrow icons for "Liên hệ tư vấn" button */
.product-telecom .th-btn3.style4 .icon i svg path {
    stroke: #00aeef;
}

.product-telecom .hero-style5 {
    padding-top: 80px;
}

/* Telecom scroll down button */
.product-telecom .scroll-down a {
    color: #00aeef;
}

.product-telecom .scroll-down .icon-btn {
    background: linear-gradient(135deg, #00aeef 0%, #0088cc 100%);
    border: 1px solid rgba(0, 174, 239, 0.8);
    color: white;
}

/* Telecom Logo Showcase */
.product-telecom .telecom-logo-showcase {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer glow ring - cyan/gold gradient */
.product-telecom .telecom-logo-showcase .logo-glow-ring {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(0, 174, 239, 0.6) 15%,
        rgba(201, 162, 39, 0.4) 30%,
        transparent 45%,
        rgba(0, 174, 239, 0.6) 60%,
        rgba(201, 162, 39, 0.3) 75%,
        transparent 100%
    );
    animation: glowRotate 20s linear infinite;
    filter: blur(8px);
    opacity: 0.7;
}

/* Inner ring */
.product-telecom .telecom-logo-showcase .logo-inner-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid rgba(0, 174, 239, 0.3);
    background: radial-gradient(
        circle at center,
        rgba(0, 174, 239, 0.15) 0%,
        rgba(0, 136, 204, 0.1) 60%,
        transparent 100%
    );
    backdrop-filter: blur(4px);
}

/* Main logo container */
.product-telecom .telecom-logo-showcase .logo-main-container {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(0, 174, 239, 0.3) 50%,
        rgba(0, 136, 204, 0.2) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 32px rgba(0, 136, 204, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    z-index: 2;
}

/* Font Awesome icon styled as image */
.product-telecom .telecom-logo-showcase .logo-main-icon {
    width: 140px;
    height: 140px;
    font-size: 100px;
    color: #00aeef;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-telecom .telecom-logo-showcase:hover .logo-main-icon {
    transform: scale(1.08);
}

/* Responsive adjustments for telecom */
@media (max-width: 768px) {
    .product-telecom .telecom-logo-showcase {
        width: 220px;
        height: 220px;
    }

    .product-telecom .telecom-logo-showcase .logo-glow-ring {
        width: 200px;
        height: 200px;
    }

    .product-telecom .telecom-logo-showcase .logo-inner-ring {
        width: 170px;
        height: 170px;
    }

    .product-telecom .telecom-logo-showcase .logo-main-container {
        width: 140px;
        height: 140px;
    }

    .product-telecom .telecom-logo-showcase .logo-main-icon {
        width: 110px;
        height: 110px;
        font-size: 75px;
    }
}

@media (max-width: 480px) {
    .product-telecom .telecom-logo-showcase {
        width: 180px;
        height: 180px;
    }

    .product-telecom .telecom-logo-showcase .logo-glow-ring {
        width: 160px;
        height: 160px;
    }

    .product-telecom .telecom-logo-showcase .logo-inner-ring {
        width: 130px;
        height: 130px;
    }

    .product-telecom .telecom-logo-showcase .logo-main-container {
        width: 110px;
        height: 110px;
    }

    .product-telecom .telecom-logo-showcase .logo-main-icon {
        width: 80px;
        height: 80px;
        font-size: 55px;
    }
}

/* ============================================
   Share Buttons — align all icons evenly
   ============================================ */
.share-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.share-buttons .btn-sm {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
}

.share-buttons .btn-sm i,
.share-buttons .btn-sm svg {
    display: block;
    width: 14px;
    height: 14px;
    line-height: 1;
}

/* Kolia hero: giảm kích thước chữ "Quản Lý Bệnh Mạn Tính" để hiển thị 1 dòng */
.hero-style2 .hero-title .text-theme {
    font-size: 0.7em;
    white-space: nowrap;
}

/* Kolia hero: dùng màu teal của logo Kolia thay vì màu theme cyan */
.product-kolia .hero-style2 .hero-title .text-theme {
    color: #5bc9be !important;
}

/* Kolia hero CTA button: dùng màu teal */
.product-kolia .hero-style2 .th-btn2 {
    background: #5bc9be !important;
}

.product-kolia .hero-style2 .th-btn2:hover {
    background: #3db8aa !important;
}

/* Kolia hero bottom text: fix z-index and position to stay above logo */
.product-kolia .hero-image2 .hero-bottom-text {
    z-index: 10 !important;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: -20px;
    margin-bottom: 15px;
}

.product-kolia .hero-image2 .hero-bottom-text.jump {
    text-align: left;
}

.product-kolia .hero-image2 .hero-bottom-text.jump-reverse {
    text-align: right;
}

/* K-Doctor hero title: allow wrapping for long descriptions */
.product-kdoctor .hero-style2 .hero-title .text-theme {
    display: inline !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* K-Doctor hero: prevent title from overlapping logo */
.product-kdoctor .hero-style2 .hero-title {
    line-height: 1.3 !important;
}

@media (max-width: 991px) {
    .product-kdoctor .hero-style2 .hero-title .text-theme {
        font-size: 0.55em !important;
    }
}

/* K-Doctor: section title size — half of default .sec-title */
.product-kdoctor .kdoctor-detail-card .sec-title {
    font-size: 1em !important;
}

/* ============================================
   Gallery Section — Swiper Carousel (Lazy Load)
   ============================================ */
.gallery-carousel-wrapper {
    position: relative;
    padding: 0 48px;
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--title-color, #0b203f);
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.gallery-nav-btn:hover {
    background: var(--theme-color, #00aeef);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.gallery-nav-prev {
    left: 0;
}

.gallery-nav-next {
    right: 0;
}

.gallery-slider {
    overflow: hidden;
}

#galleryCarousel .swiper-wrapper {
    align-items: center;
}

.gallery-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11, 32, 63, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

#galleryCarousel .swiper-slide:hover .gallery-card {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(11, 32, 63, 0.15);
}

/* Hover overlay with zoom button */
.gallery-card .gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 5, 11, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 24px;
    z-index: 2;
}

#galleryCarousel .swiper-slide:hover .gallery-card .gallery-overlay {
    opacity: 1;
}

.gallery-card .gallery-zoom-btn {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #d4d4d4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.gallery-card .gallery-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.gallery-img-placeholder {
    width: 100%;
    height: 248px;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

/* Taller images (variant) */
.gallery-card.tall .gallery-img-placeholder {
    height: 353px;
}

.gallery-img-placeholder .gallery-loading {
    color: #999;
    font-size: 14px;
}

.gallery-img-placeholder.loading {
    background: linear-gradient(90deg, #f0f2f5 25%, #e8eaed 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: gallery-shimmer 1.5s infinite;
}

@keyframes gallery-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.gallery-img-placeholder.loaded {
    background: transparent;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-img {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 767px) {
    .gallery-carousel-wrapper {
        padding: 0 36px;
    }

    .gallery-img-placeholder {
        height: 200px;
    }

    .gallery-card.tall .gallery-img-placeholder {
        height: 280px;
    }
}

@media (max-width: 576px) {
    .gallery-nav-btn {
        width: 36px;
        height: 36px;
    }

    .gallery-nav-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================
   Gallery Lightbox Modal
   ============================================ */
.gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox.active {
    display: flex;
}

.gallery-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.gallery-lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.gallery-lightbox-image-container {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gallery-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: lightboxZoomIn 0.3s ease;
}

@keyframes lightboxZoomIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.gallery-lightbox-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gallery-lightbox-loader.hidden {
    display: none;
}

.gallery-lightbox-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.gallery-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.gallery-lightbox-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: 20px;
    z-index: 10;
}

.gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.gallery-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.gallery-lightbox-prev {
    left: 20px;
}

.gallery-lightbox-next {
    right: 20px;
}

/* Responsive */
@media (max-width: 767px) {
    .gallery-lightbox-nav {
        width: 44px;
        height: 44px;
    }

    .gallery-lightbox-prev {
        left: 10px;
    }

    .gallery-lightbox-next {
        right: 10px;
    }

    .gallery-lightbox-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }

    .gallery-lightbox-counter {
        font-size: 12px;
        top: 12px;
    }

    .gallery-lightbox-img {
        max-width: 95vw;
        max-height: 85vh;
    }
}

/* ============================================
   Kolia Product Detail — Custom UI Cards
   ============================================ */

/* Left side: Demo UI cards (teal gradient background) */
.kolia-demo-card {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.kolia-demo-card-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kolia-demo-item {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
}

.kolia-demo-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.kolia-demo-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.kolia-demo-header {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
}

.kolia-demo-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.kolia-demo-status {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.kolia-demo-meds {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.kolia-med-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kolia-med-done {
    color: #a7f3d0;
    font-weight: 500;
}

.kolia-med-pending {
    color: #fde047;
    font-weight: 500;
}

.kolia-demo-summary {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* Right side: Detail card (white/light card) */
.kolia-detail-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.kolia-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.kolia-detail-icon {
    width: 64px;
    height: 64px;
    background: #f0fdfa;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kolia-detail-icon svg {
    width: 32px;
    height: 32px;
    stroke: #0d9488;
}

.kolia-detail-name {
    font-size: 24px;
    font-weight: 700;
    color: #0b203f;
    margin: 0 0 4px 0;
}

.kolia-detail-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
}

.kolia-detail-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #0b203f;
    margin-bottom: 12px;
}

.kolia-detail-summary {
    font-size: 15px;
    color: #475569;
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.6;
}

.kolia-detail-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 20px;
}

.kolia-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #334155;
    line-height: 1.4;
}

.kolia-check-item i {
    color: #14b8a6;
    margin-top: 2px;
    flex-shrink: 0;
}

.kolia-detail-stats {
    background: #f0fdfa;
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.kolia-stat {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #0f766e;
}

.stat-label {
    font-size: 13px;
    color: #64748b;
}

.kolia-detail-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kolia-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #0d9488;
    color: #fff;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.kolia-cta-btn:hover {
    background: #0f766e;
    color: #fff;
    transform: translateY(-2px);
}

.kolia-cta-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.kolia-cta-note {
    font-size: 12px;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 991px) {
    .kolia-detail-checklist {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .kolia-detail-card {
        padding: 24px;
    }

    .kolia-demo-card {
        padding: 16px;
    }

    .kolia-demo-item {
        padding: 12px;
    }

    .kolia-detail-header {
        gap: 12px;
    }

    .kolia-detail-icon {
        width: 48px;
        height: 48px;
    }

    .kolia-detail-icon svg {
        width: 24px;
        height: 24px;
    }

    .kolia-detail-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   K-Doctor Product Detail — Custom UI Cards
   ============================================ */

/* Left side: Dashboard demo card (navy gradient) */
.kdoctor-demo-card {
    background: linear-gradient(135deg, #0b203f 0%, #334155 100%);
    border-radius: 24px;
    padding: 24px;
    color: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.kdoctor-demo-header {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kdoctor-demo-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #fff;
}

.kdoctor-demo-subtitle {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.kdoctor-demo-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.kdoctor-stat {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.kdoctor-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.kdoctor-stat-label {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.kdoctor-stat-success .kdoctor-stat-value {
    color: #4ade80;
}

.kdoctor-stat-alert {
    background: rgba(59, 130, 246, 0.3);
}

.kdoctor-stat-alert .kdoctor-stat-value {
    color: #60a5fa;
}

.kdoctor-demo-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kdoctor-list-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kdoctor-patient-name {
    font-weight: 500;
    font-size: 14px;
}

.kdoctor-patient-time {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.kdoctor-status {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.kdoctor-status-done {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.kdoctor-status-waiting {
    background: rgba(234, 179, 8, 0.2);
    color: #facc15;
}

.kdoctor-list-item-alert {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.kdoctor-status-alert {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Responsive */
@media (max-width: 767px) {
    .kdoctor-demo-card {
        padding: 16px;
    }

    .kdoctor-demo-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .kdoctor-stat {
        padding: 8px;
    }

    .kdoctor-stat-value {
        font-size: 18px;
    }
}

/* Right side: K-Doctor detail card */
.kdoctor-detail-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.kdoctor-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.kdoctor-detail-icon {
    width: 64px;
    height: 64px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kdoctor-detail-icon svg {
    width: 32px;
    height: 32px;
    stroke: #3b82f6;
}

.kdoctor-detail-name {
    font-size: 24px;
    font-weight: 700;
    color: #0b203f;
    margin: 0 0 4px 0;
}

.kdoctor-detail-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
}

.kdoctor-detail-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #0b203f;
    margin-bottom: 12px;
}

.kdoctor-detail-summary {
    font-size: 15px;
    color: #475569;
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Comparison block */
.kdoctor-detail-comparison {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.kdoctor-comp-item {
    text-align: center;
    flex: 1;
    min-width: 100px;
}

.comp-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.comp-value {
    font-size: 16px;
    font-weight: 700;
}

.comp-value-gray {
    color: #475569;
}

.comp-value-blue {
    color: #3b82f6;
}

.comp-multiplier {
    font-size: 36px;
    font-weight: 700;
    color: #3b82f6;
}

.comp-arrow {
    color: #3b82f6;
    flex-shrink: 0;
}

.comp-arrow svg {
    width: 24px;
    height: 24px;
    stroke: #3b82f6;
}

/* Features grid */
.kdoctor-detail-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.kdoctor-feature-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
}

.feature-title {
    font-size: 14px;
    font-weight: 600;
    color: #0b203f;
    margin-bottom: 4px;
}

.feature-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.kdoctor-detail-cta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kdoctor-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #3b82f6;
    color: #fff;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.kdoctor-cta-btn:hover {
    background: #2563eb;
    color: #fff;
    transform: translateY(-2px);
}

.kdoctor-cta-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .kdoctor-detail-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .kdoctor-detail-card {
        padding: 24px;
    }

    .kdoctor-detail-header {
        gap: 12px;
    }

    .kdoctor-detail-icon {
        width: 48px;
        height: 48px;
    }

    .kdoctor-detail-icon svg {
        width: 24px;
        height: 24px;
    }

    .kdoctor-detail-comparison {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .comp-arrow {
        transform: rotate(90deg);
    }

    .kdoctor-detail-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   Quiz Assessment Modal Styles
   ============================================ */

/* Modal Overlay */
.quiz-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Modal Container */
.quiz-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 80px rgba(0, 174, 239, 0.15);
}

.quiz-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s;
    z-index: 10;
}

.quiz-modal-close:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Screen transitions */
.quiz-screen {
    display: none;
    padding: 40px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Intro Screen */
.quiz-intro-content {
    text-align: center;
}

.quiz-intro-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.quiz-intro-title {
    font-size: 24px;
    font-weight: 700;
    color: #0a1628;
    margin-bottom: 12px;
}

.quiz-intro-desc {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Stats row */
.quiz-intro-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
}

.quiz-stat {
    text-align: center;
}

.quiz-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #00aeef;
}

.quiz-stat-label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Checklist */
.quiz-intro-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    text-align: left;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.quiz-intro-checklist li {
    padding: 8px 0;
    color: #475569;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.quiz-intro-checklist .check-icon {
    color: #00aeef;
    font-weight: bold;
    flex-shrink: 0;
}

/* Buttons */
.quiz-btn {
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.quiz-btn-primary {
    background: linear-gradient(135deg, #00aeef 0%, #0086cc 100%);
    color: #fff;
}

.quiz-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 174, 239, 0.3);
}

.quiz-btn-secondary {
    background: #f1f5f9;
    color: #475569;
}

.quiz-btn-secondary:hover {
    background: #e2e8f0;
}

/* Progress Bar */
.quiz-progress {
    margin-bottom: 24px;
}

.quiz-step-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.quiz-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00aeef 0%, #0086cc 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

/* Question Card */
.quiz-question-card {
    min-height: 200px;
}

.quiz-question-text {
    font-size: 18px;
    font-weight: 600;
    color: #0a1628;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Option buttons */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-option {
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: #334155;
    transition: all 0.2s;
}

.quiz-option:hover {
    border-color: #00aeef;
    background: #f0f9ff;
}

.quiz-option.selected {
    border-color: #00aeef;
    background: #e0f2fe;
    color: #00699e;
    font-weight: 500;
}

/* Self-rating buttons */
.quiz-rating-scale {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.quiz-rating-btn {
    flex: 1;
    padding: 16px 8px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #64748b;
    transition: all 0.2s;
}

.quiz-rating-btn:hover {
    border-color: #00aeef;
    color: #00aeef;
}

.quiz-rating-btn.selected {
    border-color: #00aeef;
    background: #e0f2fe;
    color: #00699e;
}

.quiz-rating-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
}

/* Open text area */
.quiz-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.2s;
}

.quiz-textarea:focus {
    outline: none;
    border-color: #00aeef;
}

/* Navigation */
.quiz-navigation {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.quiz-navigation .quiz-btn {
    flex: 1;
}

.quiz-navigation .quiz-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Loading Screen */
.quiz-loading-screen {
    text-align: center;
    padding: 60px 40px;
}

.quiz-loading-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.quiz-loading-content h3 {
    font-size: 20px;
    color: #0a1628;
    margin-bottom: 8px;
}

.quiz-loading-content p {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 20px;
}

.quiz-loading-dimensions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.loading-dim {
    padding: 6px 14px;
    background: #f0f9ff;
    color: #00aeef;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.quiz-loading-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
}

.quiz-loading-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00aeef 0%, #0086cc 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

/* Result Screen */
.quiz-result-screen {
    padding: 32px 40px 40px;
}

.quiz-result-header {
    text-align: center;
    margin-bottom: 32px;
}

.quiz-result-header h2 {
    font-size: 22px;
    color: #0a1628;
    margin-bottom: 24px;
}

.quiz-score-gauge {
    display: inline-block;
    position: relative;
    margin-bottom: 8px;
}

.quiz-score-svg {
    width: 120px;
    height: 120px;
}

.quiz-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 700;
    color: #00aeef;
}

.quiz-result-subtitle {
    color: #64748b;
    font-size: 13px;
}

/* Radar chart */
.quiz-radar-container {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.quiz-radar-container h4 {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
    font-weight: 500;
}

#quiz-radar-chart {
    max-width: 300px;
    margin: 0 auto;
}

/* Gap analysis */
.quiz-gap-analysis {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.quiz-gap-analysis p {
    color: #92400e;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Strengths & Improvements */
.quiz-strengths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.quiz-strengths h4,
.quiz-improvements h4 {
    font-size: 15px;
    color: #0a1628;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quiz-strengths ul,
.quiz-improvements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quiz-strengths li,
.quiz-improvements li {
    padding: 6px 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
}

.quiz-strengths li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.quiz-improvements li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #f59e0b;
    font-weight: bold;
}

/* Job cards */
.quiz-jobs-section {
    margin-bottom: 24px;
}

.quiz-jobs-section h4 {
    font-size: 15px;
    color: #0a1628;
    margin-bottom: 16px;
}

.quiz-job-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-job-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.quiz-job-card:hover {
    border-color: #00aeef;
    background: #f0f9ff;
    transform: translateX(4px);
}

.quiz-job-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #0a1628;
}

.quiz-job-match {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quiz-job-match-label {
    font-size: 11px;
    color: #64748b;
}

.quiz-job-match-score {
    font-size: 18px;
    font-weight: 700;
    color: #00aeef;
}

.quiz-job-reason {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin: 4px 0 0 0;
}

.quiz-job-apply {
    font-size: 13px;
    font-weight: 600;
    color: #00aeef;
    display: flex;
    align-items: center;
    gap: 4px;
}

.quiz-job-apply .icon {
    transition: transform 0.2s;
}

.quiz-job-card:hover .quiz-job-apply .icon {
    transform: translateX(4px);
}

/* Recommendations */
.quiz-recommendations {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.quiz-recommendations h4 {
    font-size: 14px;
    color: #00699e;
    margin-bottom: 8px;
}

.quiz-recommendations p {
    color: #0369a1;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Result actions */
.quiz-result-actions {
    display: flex;
    gap: 12px;
}

.quiz-result-actions .quiz-btn {
    flex: 1;
}

/* Responsive */
@media (max-width: 640px) {
    .quiz-screen {
        padding: 24px 20px;
    }

    .quiz-modal {
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .quiz-modal-overlay {
        padding: 0;
    }

    .quiz-intro-stats {
        gap: 16px;
    }

    .quiz-stat-value {
        font-size: 22px;
    }

    .quiz-strengths-grid {
        grid-template-columns: 1fr;
    }

    .quiz-job-card {
        flex-wrap: wrap;
    }

    .quiz-result-actions {
        flex-direction: column;
    }
}

/* ======================================
   Contact Map Section
   ====================================== */
.contact-map-section {
    width: 100%;

    padding: 40px 0;
}

.contact-map-container {
    width: 1600px;
    max-width: 100%;
    height: 650px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-map-container iframe {
    width: 1600px;
    max-width: 100%;
    height: 650px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1600px) {
    .contact-map-container {
        width: 100%;
        padding: 0 20px;
    }

    .contact-map-container iframe {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .contact-map-container {
        height: 400px;
    }

    .contact-map-container iframe {
        height: 400px;
    }
}

@media (max-width: 480px) {
    .contact-map-container {
        height: 300px;
    }

    .contact-map-container iframe {
        height: 300px;
    }
}

/* ============================================
   Timeline Section - Tab-based layout
   "Cột mốc đáng nhớ" / "Highlights Over The Years"
   ============================================ */

.th-container5 {
    --main-container: 1320px;
}

.timing-tab {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: right;
    border-left: 2px solid #d4d4d4;
    margin-left: 40px;
}

.timing-tab .nav-link {
    position: relative;
    font-family: var(--title-font, "Inter", sans-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    text-transform: capitalize;
    color: #484848;
    z-index: 2;
    background: none;
    border: none;
    padding: 8px 0;
}

.timing-tab .nav-link:before {
    content: "";
    position: absolute;
    left: -3px;
    height: 0px;
    width: 4px;
    background-color: var(--title-color, #0b203f);
    transition: all 0.4s ease-in-out;
}

.timing-tab .nav-link.active {
    font-weight: 600;
    font-size: 48px;
    line-height: 56px;
    color: var(--title-color, #0b203f);
}

.timing-tab .nav-link.active:before {
    height: 61px;
}

.history-list {
    position: relative;
    height: 412px;
    border-radius: 48px;
    z-index: 2;
    transition: 0.7s ease-in-out;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.history-list-area {
    display: flex;
    gap: 24px;
}

.history-list-wrap {
    flex: 100%;
    box-sizing: border-box;
    transition: all 0.3s linear;
}

.history-list-wrap.active {
    flex: 700%;
}

.history-list-wrap.active .history-list {
    border-radius: 24px;
}

.history-list-wrap.active .icon-btn {
    opacity: 0;
    visibility: hidden;
}

.history-list .icon-btn {
    position: absolute;
    bottom: 8px;
    right: 16px;
    color: var(--white-color, #fff);
    transition: all 0.4s ease-in-out;
}

/* Responsive: Timeline tabs */
@media (max-width: 1199px) {
    .timing-tab {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        border-left: none;
        border-bottom: 2px solid #d4d4d4;
        margin-left: 0;
        text-align: left;
    }

    .timing-tab .nav-link:before {
        height: 4px;
        width: 0;
        left: 0;
        bottom: -3px;
    }

    .timing-tab .nav-link.active:before {
        height: 4px;
        width: 100%;
        left: 0;
        bottom: -3px;
    }

    .timing-tab .nav-link.active {
        font-size: 20px;
        line-height: 30px;
    }

    .history-list-wrap.active {
        max-width: 100%;
    }

    .history-list .icon-btn {
        right: 10px;
    }
}

@media (max-width: 767px) {
    .timing-tab {
        grid-template-columns: repeat(3, 1fr);
        border: none;
    }

    .timing-tab .nav-link:before {
        display: none;
    }

    .history-list {
        display: flex;
        max-height: 110px;
    }

    .history-list-area {
        flex-direction: column;
    }

    .history-list-wrap.active .history-list {
        max-height: 345px;
    }

    .history-list .icon-btn {
        bottom: 15%;
        transform: translateY(-50%);
    }
}

@media (max-width: 375px) {
    .timing-tab {
        grid-template-columns: repeat(2, 1fr);
    }

    .timing-tab .nav-link.active {
        font-size: 30px;
        line-height: 40px;
    }
}

/* ============================================
   Section: Chỉ có tại OSP - Values Grid
   3-column grid with service-box2 cards
   ============================================ */

#values-sec .values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

#values-sec .service-box2 {
    background: #f4f7ff;
    border-radius: 16px;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: 280px;
}

#values-sec .service-box2 .box-icon {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

#values-sec .service-box2 .box-icon.gradient-blue {
    background: linear-gradient(-50.57deg, rgb(0, 174, 239) 9.12%, rgb(28, 78, 255) 100%);
}

#values-sec .service-box2 .box-icon .icon-inset {
    position: absolute;
    inset: 10px;
    background: #fff;
    border-radius: 10px;
}

#values-sec .service-box2 .box-icon i {
    position: relative;
    z-index: 2;
    color: #0b203f;
    font-size: 20px;
}

#values-sec .service-box2 .box-content {
    display: flex;
    flex-direction: column;
    gap: 8.4px;
}

#values-sec .service-box2 .box-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 26.4px;
    color: #06050b;
    margin: 0;
}

#values-sec .service-box2 .box-text {
    font-size: 16px;
    line-height: 28px;
    color: #484848;
    margin: 0;
}

/* Revel line - title style for values section */
#values-sec .revel-line {
    display: flex;
    justify-content: center;
    gap: 15.6px;
    margin-bottom: 14px;
}

#values-sec .revel-line .sub-title {
    font-family: var(--title-font, "Inter", sans-serif);
    font-weight: 700;
    font-size: 56px;
    line-height: 67.2px;
    color: #0b203f;
    text-align: center;
}

@media (max-width: 991px) {
    #values-sec .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #values-sec .revel-line .sub-title {
        font-size: 36px;
        line-height: 48px;
    }
}

@media (max-width: 767px) {
    #values-sec .values-grid {
        grid-template-columns: 1fr;
    }

    #values-sec .service-box2 {
        padding: 32px 24px;
    }

    #values-sec .service-box2 .box-title {
        font-size: 20px;
    }

    #values-sec .service-box2 .box-text {
        font-size: 15px;
    }

    #values-sec .revel-line .sub-title {
        font-size: 28px;
        line-height: 38px;
    }
}

/* ============================================
   Header: Nút "Liên hệ" — Pill-shaped button
   Figma: node-id 1:16341
   ============================================ */

.header-layout1.style2 .header-button a.header-contact-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 10px;
    gap: 10px;
    width: 138px;
    height: 58px;
    background: rgba(11, 32, 63, 0.15);
    border-radius: 100px;
    font-size: 20px;
    line-height: 26px;
    color: #0b203f;
    font-weight: 400;
    border: none;
    flex: none;
    order: 2;
    flex-grow: 0;
    text-decoration: none;
}

/* ============================================
   Our Story Section — Reference: about.html
   2-column layout: left (col-xl-8) + right (col-xl-4)
   No button, 2 tabs, badge "65+ Dự án"
   ============================================ */

#about-story-sec {
    padding: 40px 48px 40px 48px;
    position: relative;
}

#about-story-sec .container {
    max-width: 1644px;
}

#about-story-sec .title-area {
    margin-bottom: 30px;
}

#about-story-sec .sub-title.style3 {
    font-size: 14px;
    font-weight: 500;
    color: #0b203f;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    display: block;
}

#about-story-sec .sec-title {
    font-family: "Sora", sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 73.36px;
    color: #06050b;
}

/* 2-tab navigation with bottom border separator */
#about-story-sec .about-tab {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    gap: 47px;
    margin-bottom: 0;
    max-width: 300px;
    height: 42px;
    padding-bottom: 1px;
}

#about-story-sec .about-tab .nav-link {
    font-size: 20px;
    font-weight: 500;
    color: #06050b;
    padding: 0 0 11px 0;
    border: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    background: transparent !important;
    white-space: nowrap;
}

#about-story-sec .about-tab .nav-link.active {
    color: #06050b;
    border-bottom-color: #7b5dff;
}

#about-story-sec .about-tab .nav-link:hover:not(.active) {
    border-bottom-color: rgba(123, 93, 255, 0.3);
}

/* Tab content text */
#about-story-sec .about-text {
    font-size: 18px;
    line-height: 28.8px;
    color: #484848;
    margin-bottom: 0;
    max-width: 550px;
}

/* Image area — main image with 65+ badge */
#about-story-sec .img-box2 {
    margin-top: 90px;
    margin-right: 50px;
}

#about-story-sec .img-box2 .img1 {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    max-width: 512px;
    display: block;
    margin-left: auto;
}

#about-story-sec .img-box2 .img1 img {
    border-radius: 16px;
    width: 100%;
    height: auto;
    display: block;
}

/* Experience badge — positioned bottom-left overlapping (per original theme CSS) */
#about-story-sec .img-box2 .img1 .th-experience {
    position: absolute;
    left: -10px;
    bottom: 60px;
    background: #ffffff;
    border-radius: 16px;
    padding: 45px 24px 40px 24px;
    box-shadow: 0px 20px 30px rgba(11, 11, 11, 0.1);
    min-width: 174px;
    height: 200px;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#about-story-sec .img-box2 .img1 .th-experience .th-experience_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#about-story-sec .img-box2 .img1 .th-experience .experience-year {
    font-family: "Sora", sans-serif;
    font-size: 84px;
    font-weight: 700;
    color: #06050b;
    line-height: 84px;
    margin-bottom: 0;
}

#about-story-sec .img-box2 .img1 .th-experience .experience-text {
    font-family: "Work Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #06050b;
    line-height: 31.5px;
    margin-bottom: 0;
}

/* Right column: 2 stacked images */
#about-story-sec .img-box3 {
    display: flex;
    flex-direction: column;
    gap: 16.98px;
}

#about-story-sec .img-box3 .img1 {
    border-radius: 20px;
    overflow: hidden;
    height: 305.55px;
}

#about-story-sec .img-box3 .img1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#about-story-sec .img-box3 .img2 {
    border-radius: 20px;
    overflow: hidden;
    height: 448.48px;
}

#about-story-sec .img-box3 .img2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1199px) {
    #about-story-sec .th-experience {
        right: 0;
        bottom: 20px;
    }
}

@media (max-width: 991px) {
    #about-story-sec {
        padding: 40px 24px 40px 24px;
    }

    #about-story-sec .sec-title {
        font-size: 36px;
        line-height: 48px;
    }

    #about-story-sec .img-box3 {
        margin-top: 30px;
    }

    #about-story-sec .img-box2 .img1 .th-experience {
        left: 0;
        bottom: 20px;
        min-width: 140px;
        padding: 30px 20px 25px;
    }

    #about-story-sec .img-box2 .img1 .th-experience .experience-year {
        font-size: 60px;
        line-height: 60px;
    }

    #about-story-sec .img-box2 .img1 .th-experience .experience-text {
        font-size: 16px;
        line-height: 26px;
    }
}

/* Shape mockup — decorative spinning circle */
#about-story-sec .shape-mockup {
    position: absolute;
    top: 15%;
    right: 40%;
    z-index: 0;
    pointer-events: none;
}

#about-story-sec .shape-mockup img {
    width: auto;
    height: auto;
}

/* Spinning animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#about-story-sec .shape-mockup.spin {
    animation: spin 20s linear infinite;
}

/* Footer CTA button — white background, black text */
.footer-cta-btn {
    background: #fff !important;
    color: #0b203f !important;
    white-space: nowrap;
}

.footer-cta-btn .icon img {
    filter: none !important;
}

.footer-cta-btn:hover::after,
.footer-cta-btn:hover::before {
    display: none !important;
    opacity: 0 !important;
}