/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.1.45
*/

/* ========================================================================
   TABLE OF CONTENTS
   ========================================================================
   1. FONTS & TYPOGRAPHY
   2. CSS VARIABLES & ROOT STYLES
   3. BASE STYLES & UTILITIES
   4. HEADER & NAVIGATION
   5. HERO & BANNER SECTIONS
   6. CONTENT SECTIONS
   7. COMPONENTS
   8. PAGES
   9. ANIMATIONS & KEYFRAMES
   10. RESPONSIVE STYLES
   ======================================================================== */


/* ========================================================================
   1. FONTS & TYPOGRAPHY
   ======================================================================== */

/* SVN-Gilroy Font Family */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Thin Italic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Xlight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Xlight Italic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Light Italic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Medium Italic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy SemiBold Italic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Bold Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy XBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy XBold Italic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Heavy.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Heavy Italic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('font/SVN-Gilroy Black Italic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ========================================================================
   2. CSS VARIABLES & ROOT STYLES
   ======================================================================== */

:root {
    --color-primary: #203BDC;
    --text-color: #1A1A1A;
    --width-container: 1248px;
}

/* ========================================================================
   9. ANIMATIONS & KEYFRAMES
   ======================================================================== */

/* Animation */

/* Chip animations */
@keyframes chipFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes chipPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Loading animations */
@keyframes loadingProgress {
    0% {
        height: 0;
    }

    100% {
        height: 70%;
    }
}

@keyframes loadingProgressHorizontal {
    0% {
        width: 0;
        right: 0;
    }

    100% {
        width: 90%;
        right: 10%;
    }
}

@keyframes loadingProgressVertical {
    0% {
        height: 0;
        bottom: 0;
    }

    100% {
        height: 100%;
        bottom: 0;
    }
}

/* Progress bar animation */
@keyframes progressBar {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Notice bar animations */
@keyframes gipSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes gipSlideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Float animation */
@keyframes float-down {

    0%,
    100% {
        transform: translateY(0);
    }

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

/* Pulse animations */
@keyframes pulseRectangle {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 59, 220, 0.6),
            0 0 15px rgba(32, 59, 220, 0.4),
            inset 0 0 15px rgba(32, 59, 220, 0.3);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(32, 59, 220, 0),
            0 0 30px rgba(32, 59, 220, 0.8),
            inset 0 0 30px rgba(32, 59, 220, 0.5);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(32, 59, 220, 0),
            0 0 15px rgba(32, 59, 220, 0.4),
            inset 0 0 15px rgba(32, 59, 220, 0.3);
    }
}

@keyframes pulseCircle {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 59, 220, 0.7),
            0 0 20px rgba(32, 59, 220, 0.5),
            inset 0 0 20px rgba(32, 59, 220, 0.4);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(32, 59, 220, 0),
            0 0 40px rgba(32, 59, 220, 1),
            inset 0 0 40px rgba(32, 59, 220, 0.6);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(32, 59, 220, 0),
            0 0 20px rgba(32, 59, 220, 0.5),
            inset 0 0 20px rgba(32, 59, 220, 0.4);
    }
}

/* Slide animation */
@keyframes slideInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Benefit fade in animation */
@keyframes benefitFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

/* GPU Power animations */
@keyframes icon-pop {

    0%,
    100% {
        transform: scale(1);
    }

    1% {
        transform: scale(1.15);
    }

    18% {
        transform: scale(1.15);
    }

    20% {
        transform: scale(1);
    }
}

@keyframes circle-fill {
    0% {
        --angle: 0deg;
        opacity: 1;
    }

    18% {
        --angle: 360deg;
        opacity: 1;
    }

    20% {
        --angle: 360deg;
        opacity: 0;
    }

    100% {
        --angle: 360deg;
        opacity: 0;
    }
}

/* Reverse animation for even items (counter-clockwise) */
@keyframes circle-fill-reverse {
    0% {
        --angle: 360deg;
        opacity: 1;
    }

    18% {
        --angle: 0deg;
        opacity: 1;
    }

    20% {
        --angle: 0deg;
        opacity: 0;
    }

    100% {
        --angle: 0deg;
        opacity: 0;
    }
}

@keyframes line-fill {
    0% {
        width: 0;
        opacity: 1;
    }

    15% {
        width: 0;
        opacity: 1;
    }

    /* Wait for circle */
    20% {
        width: 100%;
        opacity: 1;
    }

    /* Fill line */
    23% {
        width: 100%;
        opacity: 0;
    }

    /* Fade out */
    100% {
        width: 100%;
        opacity: 0;
    }
}

/* Spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* CSS Variable cho angle */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Keyframe cho vệt sáng xoay vòng tròn */
@keyframes rotate-glow {
    0% {
        --glow-angle: 0deg;
    }

    100% {
        --glow-angle: 360deg;
    }
}

/* Animation */
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* End animation */

/* Apply SVN-Gilroy to entire website */
body {
    font-family: 'SVN-Gilroy', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: #000000;
}

html[lang="ja"] body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000000;
}

.nav-column li.active>a,
.nav-column li>a:hover,
.nav-dropdown li.active>a,
.nav-dropdown>li>a:hover,
.nav-vertical-fly-out>li.active>a,
.nav-vertical-fly-out>li>a:hover,
.nav>li.active>a,
.nav>li.current>a,
.nav>li>a.active,
.nav>li>a.current,
.nav>li>a:hover {
    color: var(--color-primary);
}

a:hover {
    opacity: 0.6;
}

/* ========================================================================
   3. BASE STYLES & UTILITIES
   ======================================================================== */

/* Grid System */
.container .row:not(.row-collapse),
.lightbox-content .row:not(.row-collapse),
.row .gallery,
.row .row:not(.row-collapse) {
    margin-left: -16px;
    margin-right: -16px;
}

.col,
.columns,
.gallery-item {
    padding: 0 16px 30px;
}

.container {
    padding-left: 16px;
    padding-right: 16px;
}

.bg-E9EBFC {
    background: #E9EBFC;
}

body .container-width,
body .full-width .ubermenu-nav,
body .container,
body .row {
    max-width: var(--width-container);
}

/* Notice Bar System - Top Banner Style */
.gip-notice-bar {
    width: 100%;
    padding: 4px 0;
    position: relative;
    z-index: 999;
    animation: gipSlideDown 0.4s ease-out;
    font-family: 'SVN-Gilroy', sans-serif;
}

.gip-notice-bar.gip-notice-hiding {
    animation: gipSlideUp 0.3s ease-in forwards;
}

.gip-notice-container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.gip-notice-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    position: relative;
    text-align: center;
}

.gip-notice-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.gip-notice-text {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}

.gip-notice-text a {
    color: #fff;
}

.gip-notice-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gip-notice-link i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.gip-notice-link:hover i {
    transform: translateX(3px);
}

.gip-notice-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 16px;
    color: #AFAFAF;
    height: 20px;
    min-height: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    position: absolute;
    right: 0;
}

.gip-notice-close:hover {
    opacity: 1;
}

/* Info Style */
.gip-notice-info {
    background: #203BDC;
    color: #ffffff;
}

.gip-notice-info .gip-notice-icon {
    color: #ffffff;
}

.gip-notice-info .gip-notice-link {
    background: #ffffff;
    color: #0066ff;
}

.gip-notice-info .gip-notice-link:hover {
    background: #f0f0f0;
}

/* ========================================================================
   4. HEADER & NAVIGATION
   ======================================================================== */

.header-top {
    background: transparent;
}

.header-bg-color {
    background: transparent;
}

.header-wrapper {
    position: fixed;
    border: 0;
}

.header-main {
    margin-top: 16px;
}

.header-main .header-inner {
    background: rgb(255 255 255 / 80%);
    border-radius: 8px;
    padding-left: 32px;
    padding-right: 32px;
    max-width: calc(var(--width-container) - 32px);
}

.row.row-collapse {
    max-width: calc(var(--width-container) - 32px) !important;
}

.header-shadow .header-wrapper,
.header-wrapper.stuck,
.layout-shadow #wrapper {
    box-shadow: none;
}

.nav-column>li>a,
.nav-dropdown>li>a,
.nav-vertical-fly-out>li>a,
.nav>li>a {
    color: #000;
}

.nav>li>a {
    font-size: 1rem;
    font-weight: 500;
    gap: 6px;
}

.nav>li:hover>a {
    opacity: 1;
}

.nav>li {
    margin-right: 2rem;
}

.has-dropdown .icon-angle-down {
    color: #1C2024;
    opacity: 1 !important;
    margin-left: 10px;
}

#logo {
    width: auto !important;
}

.logo-left .logo {
    margin-right: 2rem;
}

.btn-header {
    line-height: 40px !important;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    border-radius: 6px;
    padding: 0 1rem;
}

.btn-header.btn-login:hover {
    background-color: var(--color-primary);
    color: #fff !important;
}

.btn-header.btn-login:hover span {
    color: #fff !important;
}

.btn-header.btn-contact {
    color: #fff !important;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    box-shadow: 0px 4px 16px 0px #203BDC80;
    position: relative;
    padding-right: 38px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-header.btn-contact:hover {}

.btn-header.btn-contact:hover,
.button.primary.btn-header.btn-contact:hover,
a.btn-header.btn-contact:hover {
    opacity: 0.8;
}

.header-block .btn-header.btn-contact {
    margin-right: 0;
}

.btn-header.btn-contact span {
    position: relative;
    z-index: 1;
}

.btn-header.btn-contact:before,
.item-slide-ct>.col-inner .col:last-child a:before,
.list-tin-tuc .tin-tuc-item .doc-ngay:before,
.model-meta .model-try-btn:before {
    content: "\f061";
    position: absolute;
    transition: all 0.3s ease;
    font-family: 'Font Awesome 6 Free';
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E9EBFC;
    color: var(--color-primary);
    border-radius: 50%;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.nav-dropdown-has-border .nav-dropdown {
    box-shadow: 0px 4px 6px -2px #0000000D;
    border: 0;
    opacity: 1;
    border-radius: 8px;
    padding: 4px;
    top: 65px;
    min-width: 200px;
}

.nav-dropdown-has-border .stuck .nav-dropdown {
    top: 76px;
}

.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:after,
.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:before {
    display: none;
}

.nav-dropdown .menu-item-has-children>a,
.nav-dropdown .nav-dropdown-col>a,
.nav-dropdown .title>a {
    text-transform: none;
    font-size: 1rem;
    font-weight: 500;
}

/* Custom Language Switcher */
.custom-language-switcher {
    position: relative;
    display: inline-block;
    margin-right: 28px;
}

.language-current {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.language-current:hover {}

.language-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.language-code {
    font-size: 14px;
    color: #565656;
    font-weight: 500;
    position: absolute;
    left: 23px;
    bottom: 0px;
}

.language-arrow {
    font-size: 10px;
    color: #666;
    transition: transform 0.3s ease;
}

.custom-language-switcher:hover .language-arrow {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
}

.custom-language-switcher:hover .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-dropdown li {
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0;
}

.language-dropdown li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.language-dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    transition: background 0.2s ease;
}

.language-dropdown li a:hover {
    background: #f5f5f5;
}

.language-dropdown li.active a {
    background: #e3f2fd;
    color: #1976d2;
}

.language-dropdown .lang-code {
    font-weight: 600;
    font-size: 13px;
    min-width: 30px;
}

.language-dropdown .lang-name {
    font-size: 14px;
}

.header-block>div {
    display: flex;
    align-items: center;
}

.ms-slide-info {
    margin-top: 0 !important;
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    left: calc((100vw - var(--width-container)) / 2 + 40px);
    width: auto !important;
}

.ms-info {
    max-width: 525px;
    line-height: 28px;
    font-size: 20px;
}

.ms-info strong {
    font-size: 60px;
    color: #000;
    line-height: 60px;
    letter-spacing: -2px;
    font-weight: 600;
    margin-bottom: 24px;
    display: inline-block;
}

.ms-info blockquote {
    border: 0;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    font-style: normal;
}

.ms-info blockquote a {
    height: 44px;
    background: #fff;
    border: 0 !important;
    border-radius: 0;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
}

.ms-info blockquote a.btn-header.btn-contact {
    padding-right: 40px;
    color: #fff !important;
    z-index: 2;
    height: auto;
    margin-right: 0;
}

.ms-info blockquote a.btn-header {
    color: #020817 !important;
    border-radius: 6px;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
}

blockquote>a.btn-header:last-child:hover {
    opacity: 1;
    background: var(--color-primary);
    color: #fff !important;
}

.ms-skin-default .ms-bullet {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.ms-skin-default .ms-bullet-selected {
    background: transparent;
    position: relative;
}

.ms-skin-default .ms-bullet-selected:before {
    content: "";
    position: absolute;
    border: 3px solid #fff;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.ms-bullets.ms-dir-h {
    left: 8px;
    right: auto;
    bottom: 12vw !important;
}

.master-slider {
    position: relative;
    height: 100%;
}

.master-slider:after,
.section-banner:after {
    content: "";
    background-image: url("images/icon-mouse.png");
    display: block;
    width: 64px;
    height: 64px;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: 0 auto;
    /* Thêm animation */
    animation: float-down 1s ease-in-out infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ========================================================================
   5. HERO & BANNER SECTIONS
   ======================================================================== */

.sec-banner {}

.sec-banner .col {
    padding-bottom: 0;
}

.text-title {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    color: #000000BF;
    font-size: 20px;
    line-height: 28px;
}

.text-title h2 {
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 36px;
}

.build-your {
    position: relative;
    background-color: #E9EBFC;
    /* Các style khác của bạn */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    /* overflow: hidden; */
    z-index: 9;
}

.build-your::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("images/bg-build-ai.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 30% center;
    opacity: 0.75;
    filter: invert(1) brightness(2) contrast(1.5);
    mix-blend-mode: lighten;
    z-index: 0;
    pointer-events: none;
}

/* Đảm bảo nội dung hiển thị phía trên */
.build-your>* {
    z-index: 1;
}

.infa-fpt {
    max-width: 925px;
    margin: 0 auto 0;
}


.image-hotspot {
    transition: all 0.3s ease;
}

.image-hotspot:hover {
    animation: none !important;
}

.image-hover-popup {
    font-family: 'SVN-Gilroy', sans-serif;
}

.image-hover-popup h4 {
    color: #1A1A1A !important;
}

/* Style cho .box-show-hover popup */
.box-show-hover {
    border-top: 6px solid #1532C7;
    display: none;
    opacity: 0;
    visibility: hidden;
    background: white;
    padding: 16px 24px 24px;
    font-family: 'SVN-Gilroy', sans-serif;
    width: 320px;
    max-width: 100%;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 4px 16px 0px #203BDC40;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Style cho .location-gb và .location-vn popup (dùng chung) */
.location-gb,
.location-vn {
    display: none;
    opacity: 0;
    visibility: hidden;
    background: white;
    padding: 16px;
    font-family: 'SVN-Gilroy', sans-serif;
    width: 432px;
    max-width: calc(100% - 32px) !important;
    border-radius: 4px;
    transform: translateY(-10px);
    box-shadow: 0px 4px 16px 0px #203BDC40;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Mũi tên nhọn từ popup trỏ xuống hotspot */
.location-gb::after,
.location-vn::after {
    display: none;
    content: '';
    position: absolute;
    bottom: -10px;
    left: var(0, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    filter: drop-shadow(0px 2px 4px rgba(32, 59, 220, 0.15));
}

.location-gb .col,
.location-vn .col {
    padding: 0;
}

.location-gb .col p,
.location-vn .col p {
    text-align: center;
    margin-bottom: 0;
    color: #6A7CE8;
    font-size: 20px;
    line-height: 28px;
}

.overlay-icon {
    backdrop-filter: blur(16px);
    background-color: #FFFFFF66;
    border: 0;
    opacity: 1;
    width: 64px;
    height: 64px;
    line-height: 64px;
}

.overlay-icon i {
    font-size: 26px;
    top: 5px;
}

.box-show-hover[style*="display: block"],
.location-gb[style*="display: block"] {
    animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.box-show-hover h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.box-show-hover p {
    font-size: 14px;
    line-height: 20px;
    color: #000000BF;
    margin-bottom: 0;
}

.box-show-hover table {
    margin-top: 20px;
    margin-bottom: 0;
}

.box-show-hover table img {
    margin-bottom: 4px !important;
    height: 32px;
    width: auto;
}

.box-show-hover table tr td {
    padding-bottom: 16px;
    text-align: center;
}

.box-show-hover table tr td a {
    font-size: 15px;
}

.box-show-hover table tr td a:hover {
    color: var(--color-primary);
}

.box-show-hover table tr td a img {}

.box-show-hover table tr td a:hover img {
    scale: 1.1;
}

.box-show-hover table tr:last-child td {
    padding-bottom: 0;
}

.box-show-hover table td {
    padding: 0;
    border: 0;
    vertical-align: text-bottom;
}

.box-show-hover table p {
    text-align: center;
    color: #000000BF;
}

/* ========================================================================
   6. CONTENT SECTIONS
   ======================================================================== */

/* ============ CHIPSET SECTION ============ */
.chipset {
    background-image: url("images/bg-slide-next.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 0 50px !important;
}

.chipset .col-inner>.row {
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
}

/* ============ IMAGE COLUMN ============ */
.col-chip-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.col-chip-img .col-inner {
    height: 100%;
}

.col-chip-img .img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    margin-bottom: 0 !important;
}

.col-chip-img .img:first-child {
    opacity: 1;
}

.col-chip-img .img .img-inner img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    animation: chipFloat 6s ease-in-out infinite;
}

.col-chip-img .img::after {
    content: "";
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2), transparent 70%);
    z-index: -1;
    animation: chipPulse 4s ease-in-out infinite;
}

/* ============ TEXT COLUMN ============ */
.col-chip-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.col-chip-text .text {
    background: #E9EBFC;
    padding: 40px 24px 40px 52px;
    margin: 0;
    border-bottom: 1px solid #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.col-chip-text .text:hover {
    transform: translateX(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.col-chip-text .text.active {
    background: #FFFFFF;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

/* Accent bar */
.col-chip-text .text::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: #0000330F;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.col-chip-text .text.active::before {
    width: 4px;
}

/* Loading bar */
.chip-loading-bar {
    position: absolute;
    top: 15%;
    left: 24px;
    width: 4px;
    height: 0;
    background: #3E63DD;
    z-index: 100;
    opacity: 0;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: opacity 0.3s ease;
}

.col-chip-text .text.active .chip-loading-bar {
    opacity: 1;
}

/* Typography */
.col-chip-text .text strong {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
    line-height: 40px;
}

.col-chip-text .text p {
    font-size: 18px;
    line-height: 24px;
    color: #000000BF;
    margin: 0;
}

/* ============ FULL AI JOURNEY SECTION ============ */
.sec-full-ai {
    background-image: url("images/bg-full-ai.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 80px 0 50px !important;
}

.sec-full-ai .text-title {
    text-align: center;
    margin-bottom: 0;
}

.sec-full-ai .text-title h2 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 8px;
    letter-spacing: -0.9px;
}

.sec-full-ai .text-title p {
    font-size: 20px;
    color: #FFFFFFBF;
    line-height: 28px;
    margin: 0;
}

/* ============ IMAGE COLUMN ============ */
.full-ai-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
}

.section-finetune .full-ai-img .col-inner{
    padding-bottom: 49%;
    /* border: 1px solid var(--color-primary); */
    border-radius: 9px;
}

.full-ai-img .col-inner {
    position: relative;
    overflow: hidden;
    margin: 0 auto !important;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-ai-img .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(100%);
    width: 100%;
    max-width: 500px;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    margin-bottom: 0 !important;
}

.section-finetune .full-ai-img .img {
    max-width: 100%;
}

.full-ai-img .img:first-child {
    transform: translate(-50%, -50%) translateX(0);
    opacity: 1;
    z-index: 10;
}

.full-ai-img .img .img-inner {
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.4));
}
.section-finetune .full-ai-img .img .img-inner{
    filter: none;
}

.full-ai-img .img .img-inner img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ============ TEXT COLUMN ============ */
.full-ai-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-finetune .full-ai-text{
    padding-bottom: 10px;
}

.full-ai-text .col-inner {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.full-ai-text .text {
    flex: 1;
    margin-bottom: 0;
}

/* Text Block Container */
.full-ai-text .text>p:first-child {
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.full-ai-text .text>p:has(strong)::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 10%;
    right: auto;
    width: 90%;
    height: 4px;
    border-radius: 4px;
    background: #DDEAF833;
    transition: background 0.3s ease;
}

/* Mobile: Line dọc từ trên xuống */
.full-ai-text .text>p:has(strong)::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px;
    background: #DDEAF833;
    transition: background 0.3s ease;
    display: none;
    /* Ẩn trên desktop */
}

/* Completed step - border sáng */
.full-ai-text .text>p:has(strong).completed::before,
.full-ai-text .text>p.completed::before {
    background: #60A5FA;
}

.full-ai-text .text>p.completed:not(.active)::before {
    background: #fff;
}

/* Active step - border sáng (giống completed) */
.full-ai-text .text>p:has(strong).active::before,
.full-ai-text .text>p.active::before {
    background: #DDEAF833;
}

/* Mobile: Completed state cho ::after */
.full-ai-text .text>p:has(strong).completed::after,
.full-ai-text .text>p.completed::after {
    background: #60A5FA;
}

.full-ai-text .text>p.completed:not(.active)::after {
    background: #fff;
}

.section-finetune .full-ai-text .text>p.completed::after{
    background: var(--color-primary);
}

.section-finetune .full-ai-text .text>p:has(strong)::after{
    max-height: calc(100% - 10px);
    top: 30px;
}

.section-finetune .full-ai-text .text>p::after{
    background: #00000040;
}

/* Mobile: Active state cho ::after */
.full-ai-text .text>p:has(strong).active::after,
.full-ai-text .text>p.active::after {
    background: #DDEAF833;
}

/* Check Icon - Default state (nằm ngoài strong, cùng cấp) */
.full-ai-text .text>p:first-child .fa-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    background: #DDEAF833;
    margin-right: 12px;
    transition: all 0.3s ease;
    vertical-align: middle;
}

/* Completed step - đã hoàn thành (icon sáng nhưng không có shadow) */
.full-ai-text .text>p.completed .fa-check {
    background: #E9EBFC;
    color: #203BDC;
}

.full-ai-text .text>p.completed .fa-check:before {
    display: inline-block;
}

.full-ai-text .text>p .fa-check:before {
    display: none;
}

/* Title */
.full-ai-text .text>p strong {
    padding-top: 12px;
    display: block;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: #FFFFFF;
}

/* Description Text */
.full-ai-text .text>p:not(:has(strong)) {
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFFBF;
    margin: 0 0 16px 0;
    padding: 0;
}

/* Links Container */
.full-ai-text .text>p:last-child {
    margin-top: 0;
    padding: 0;
}

.full-ai-text .text p a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    font-weight: 400;
    padding-right: 16px;
}

.full-ai-text .text p a.btn-cluster {
    margin-right: 0;
    padding-left: 15px;
    border-left: 1px solid #fff;
}

.full-ai-text .text p a:hover {
    color: #93C5FD;
    gap: 10px;
}

/* Arrow icon chỉ cho link đầu tiên */
.full-ai-text .text p a::after {
    content: "\f061";
    transition: transform 0.3s ease;
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 50%;
    color: #203BDC;
    text-align: center;
    font-family: 'Font Awesome 6 Free';
    font-size: 13px;
	line-height: 24px;
}

.full-ai-text .text p a:first-child:hover::after {
    transform: translateX(3px);
}

/* Loading Bar - Desktop: chạy ngang từ trái sang phải */
.fullai-loading-bar {
    position: absolute;
    left: 10%;
    top: 12px;
    width: 0;
    height: 4px;
    background: #fff;
    border-radius: 2px 0 0 2px;
    z-index: 10;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.6);
    transition: opacity 0.3s ease;
}

.full-ai-text .text>p.active .fullai-loading-bar {
    opacity: 1;
}

/* Loading Bar Mobile - chạy dọc từ trên xuống */
.fullai-loading-bar-mobile {
    position: absolute;
    left: 12px;
    top: 0;
    width: 4px;
    height: 0;
    background: #fff;
    border-radius: 4px;
    z-index: 10;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.6);
    transition: opacity 0.3s ease;
    display: none;
    /* Ẩn trên desktop */
}

.full-ai-text .text>p.active .fullai-loading-bar-mobile {
    opacity: 1;
}

.sec-robot {
    padding-bottom: 0 !important;
}

.sec-global {
    padding-top: 50px !important;
    padding-bottom: 0 !important;
    background-color: #fff;
}

.sec-global .row>.col {
    display: flex;
    align-items: center;
}

.text-box-global {
    width: 468px;
    max-width: 100%;
}

.text-box-global strong {
    font-size: 36px;
    font-weight: 600;
    color: #000000;
    line-height: 40px;
    letter-spacing: -0.9px;
}

.text-box-global p {
    font-size: 20px;
    color: #000000BF;
    line-height: 28px;
}

.row-sec-text {
    margin-top: 0;
}

.row-sec-text p {
    margin-bottom: 0;
    font-size: 20px;
}

.row-slider .col {
    padding-bottom: 0;
}

.row-slider .img {
    display: flex;
    justify-content: center;
}

.gallery-columns-12 .gallery-item,
.large-columns-12 .flickity-slider>.col,
.large-columns-12>.col {
    flex-basis: 10%;
    max-width: 10%;
}

.row-robot {
    text-align: center;
}

.row-robot h2 {
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 8px;
}

.row-robot .text {
    width: 530px;
    max-width: 100%;
    margin: 0 auto;
}

.row-robot p {
    color: #000000BF;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 24px;
}

.row-robot .img {
    width: 536px !important;
    max-width: 100%;
    margin: 0 auto;
}

.sec-real-world {
    padding-top: 0 !important;
}

.sec-real-world .section-content {}

.sec-real-world .section-content>.row {
    background-image: url("images/bg-real-world.png");
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 1340px !important;
    border-radius: 8px;
    overflow: hidden;
    padding: 50px 50px;
}

.sec-real-world .section-content .row h2 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 0;
}

.sec-real-world .img {
    width: 80px !important;
    height: 80px;
    background: #FFFFFF;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.sec-real-world .img img {
    height: 48px;
    width: auto;
}

.sec-real-world strong {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -1px;
}

.sec-real-world p {
    color: #000000BF;
    font-size: 14px;
    line-height: 20px;
}

.sec-real-world .medium-3 {
    border: 1px solid #FFFFFF66;
    padding: 24px;
    border-right: 0;
    min-height: 404px;
}

.sec-real-world .medium-3:hover {
    background: rgb(255 255 255 / 40%);
    cursor: pointer;
}

.sec-real-world .medium-3:hover .col-inner .text {
    display: block;
}

.sec-real-world .medium-3:last-child {
    border-right: 1px solid #FFFFFF66;
}

.sec-real-world .medium-3 .col-inner .text {
    display: none;
}

.sec-real-world .medium-3 .col-inner .text p {
    color: #203BDC;
    margin-bottom: 0;
    font-weight: 600;
}

.home .content-area {}

.slide-ct {
    display: block;
    padding-left: calc((100vw - var(--width-container)) / 2 - 6px);
}

.slide-ct .item-slide-ct {
    position: absolute;
    width: 70%;
    counter-increment: carousel-cell;
}

.item-slide-ct>.col-inner {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.item-slide-ct>.col-inner .col {
    padding-bottom: 0;
}

.item-slide-ct>.col-inner .col:first-child {
    flex-basis: 58%;
    max-width: 58%;
}

.item-slide-ct>.col-inner .col:last-child {
    flex: none;
    width: 42%;
    padding: 35px 50px 35px 35px;
    font-size: 16px;
    line-height: 24px;
}

.item-slide-ct>.col-inner .col:last-child strong {
    font-weight: 600;
    font-size: 20px;
}

.item-slide-ct>.col-inner .col:last-child img {
    margin-bottom: 0;
    margin-right: 32px;
}

.item-slide-ct>.col-inner .col:last-child a,
.list-tin-tuc .tin-tuc-item .doc-ngay {
    position: relative;
    background: #E9EBFC;
    padding: 4px 40px 4px 16px;
    font-size: 14px;
    color: #203BDC;
    border-radius: 4px;
    line-height: 20px;
    display: inline-block;
    border: 1px solid #E9EBFC;
    transition: all 0.3s ease;
}

.item-slide-ct>.col-inner .col:last-child a:hover,
.list-tin-tuc .tin-tuc-item .doc-ngay:hover {
    background: var(--color-primary);
    color: #E9EBFC;
}

.item-slide-ct>.col-inner .col:last-child a:before {
    right: 12px;
}

.row-title-con {
    margin-bottom: 10px;
}

.row-title-con .col {
    padding-bottom: 0;
}

.row-title-con .col .btn-header.btn-contact:before,
.related-posts-section .btn-header:before {
    color: #fff;
    background: #203BDC;
    font-size: 12px;
}

.row-title-con .col h2 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 8px;
}

.row-title-con .col p {
    font-size: 20px;
    line-height: 28px;
    color: #000000BF;
}

.row-title-con .col .btn-header.btn-contact,
.related-posts-section .btn-header {
    margin: 0;
    float: right;
    color: #020817 !important;
    background: #fff;
    border-color: #E2E8F0 !important;
    box-shadow: none;
    font-size: 14px;
    padding-right: 42px;
}

.item-slide-ct .col:last-child .col-inner,
.item-slide-ct>.col-inner .img {
    height: 100%;
}

.item-slide-ct .col:last-child .col-inner p:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-slide-ct>.col-inner>.row .col:last-child .img-inner {
    border-radius: 12px;
    height: 100%;
}

.item-slide-ct>.col-inner>.row .col:last-child .img-inner img {
    object-fit: cover;
    height: 500px;
    max-height: 100%;
}

.slide-ct .flickity-page-dots {
    left: 0;
    right: 0;
    bottom: -50px;
    margin: 0 auto;
}

.slide-ct .flickity-page-dots .dot {
    line-height: normal;
    min-height: unset;
    background: rgba(255, 255, 255, 0.5);
    margin: 0px 5px;
    width: 10px;
    height: 10px;
    border: 0;
}

.flickity-page-dots .dot.is-selected {
    background: #fff;
}

.flickity-page-dot:focus,
.flickity-button:focus {
    box-shadow: none;
}

.flickity-prev-next-button,
.slick-initialized .slick-arrow {
    background: #fff;
    opacity: 1;
    box-shadow: 0 10px 15px -3px #00000014;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 2;
    top: auto;
    bottom: -66px;
}

.flickity-prev-next-button svg,
.flickity-prev-next-button svg {
    display: none;
}

.flickity-prev-next-button:before,
.list-news.slick-initialized .slick-arrow:before {
    content: "\f053";
    position: absolute;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 51%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 1;
}

.slide-ct .flickity-prev-next-button.previous {
    left: calc((100vw - var(--width-container)) / 2 - 20px);
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
}

.slide-ct .flickity-prev-next-button.next {
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
}

.slide-ct .flickity-prev-next-button:hover {
    opacity: 1;
}

.flickity-prev-next-button.next:before,
.list-news.slick-initialized .slick-next:before {
    content: "\f054";
}

.sec-conf {
    padding-bottom: 40px !important;
    overflow: hidden;
}

/* ========================================================================
   7. COMPONENTS
   ======================================================================== */

/* News & Blog Lists */
.list-tin-tuc {
    margin-right: -16px;
    margin-left: -16px;
    display: flex;
    flex-wrap: wrap;
    clear: both;
}

.sec-blog {
    padding-bottom: 80px !important;
}

.sec-use-case {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.list-tin-tuc .tin-tuc-item {
    display: flex;
    flex-direction: column;
    width: calc(33.333333% - 32px);
    margin-right: 16px;
    margin-left: 16px;
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 8px 16px 0px #203BDC1A;
}

.list-tin-tuc .tin-tuc-item figure {
    margin-bottom: 0;
}

.list-tin-tuc .tin-tuc-item .post-content {
    display: flex;
    flex-direction: column;
    padding: 24px;
    height: 100%;
}

.list-tin-tuc .tin-tuc-item .post-title {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-tin-tuc .tin-tuc-item .post-title a {
    color: #000;
}

.list-tin-tuc .tin-tuc-item .post-excerpt {
    color: #000000BF;
    margin-bottom: 2rem;
}

.list-use-case .tin-tuc-item .post-excerpt {
    color: #000000D9;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-tin-tuc .tin-tuc-item .doc-ngay {
    padding-right: 35px;
}

.list-tin-tuc .tin-tuc-item .post-action {
    margin-top: auto;
}

/* AJAX Loading State for Blog - reuse existing spin animation */
#blog-list-container.loading,
#blog-pagination-container.loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
    min-height: 200px;
}

#blog-list-container.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

.footer-wrapper {
    position: relative;
    background: #E9EBFC;
}

.footer-wrapper:before {
    position: absolute;
    content: "";
    background: linear-gradient(180deg, #FFFFFF 0%, #C9DAFF 100%);
    height: 100%;
    width: 100%;
}

.footer-logo {
    width: 273px !important;
    max-width: 100%;
    margin-bottom: 0 !important;
    margin-right: 10px;
}

.two-logo {
    padding-bottom: 0;
}

.two-logo .col-inner {
    display: flex;
    align-items: center;
}

.nvidia-partner {
    width: 120px !important;
}

.nvidia-partner .img-inner {}

.footer-info {}

.footer-info p {
    margin-bottom: 8px;
    line-height: 24px;
}

.footer-info a {
    color: #000;
    font-weight: 600;
}

.footer-info strong {
    font-weight: 600;
    color: #000;
}

.footer-info ul {
    margin-bottom: 0;
    list-style: none;
}

.footer-info ul li {
    position: relative;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 0;
    color: #3D3D3D;
}

.footer-info ul li::marker {
    content: '• ';
    /* Sử dụng ký tự Unicode cho dấu chấm */
    color: #3D3D3D;
    /* Đổi màu dấu chấm */
    font-size: 1.2em;
    /* Thay đổi kích thước */
    position: absolute;
}

.col-sitemap {}

.col-sitemap p {
    margin-bottom: 1rem;
}

.col-sitemap strong {
    color: #203BDC;
    font-weight: 600;
    font-size: 18px;
}

.col-sitemap ul {}

.col-sitemap ul li {
    margin-left: 0;
    list-style: none;
    margin-bottom: 8px;
}

.col-sitemap ul li a {
    color: #000000;
}

.footer-form {}

.footer-form strong {
    color: #203BDC;
    font-size: 18px;
    font-weight: 600;
}

.footer-form .nf-form-fields-required {
    display: none;
}

.footer-form nf-fields-wrap {
    display: flex;
}

.footer-form nf-fields-wrap nf-field {
    margin-right: 8px;
}

.footer-form nf-fields-wrap nf-field:first-child {
    width: 246px;
    max-width: 100%;
}

.nf-form-layout .nf-field-element input {
    border-radius: 6px;
    text-transform: none;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    border: 0;
    line-height: normal;
}

.nf-form-layout .field-wrap input[type=submit] {
    background-color: #203BDC !important;
    background-image: url("images/bg-icon-right.png") !important;
    background-repeat: no-repeat !important;
    background-position: center right 10px !important;
    padding: 10px 45px 10px 20px;
    font-size: 14px;
    color: #fff !important;
}

.footer-bottom {
    padding-top: 0 !important;
    padding-bottom: 15px !important;
    font-size: 14px;
}

.footer-bottom .col {
    padding-bottom: 0;
}

.footer-bottom p {
    margin-bottom: 0;
    font-weight: 400;
}

.footer-bottom .row {
    position: relative;
}

.footer-bottom .row:after {
    content: "";
    position: absolute;
    border-top: 1px solid #5277A8;
    top: -32px;
    width: calc(100% - 32px);
    left: 0;
    right: 0;
    margin: 0 auto;
}

.footer-bottom a {
    color: #000;
}

.footer-bottom .list-icon-social a {
    margin-right: 8px;
}

.footer-bottom a i {
    font-size: 16px;
    color: #000;
}

.layout-blog {
    padding-top: 144px;
}

.archive-title {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: normal;
}

/* Archive Header with Search */
.archive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    gap: 30px;
    flex-wrap: wrap;
}

.archive-bg-title {
    flex: 0 0 auto;
}

/* Archive Search Form */
.archive-search-form {
    flex: 0 0 auto;
    max-width: 100%;
}

.archive-search-form::placeholder {
    color: #999;
}

.archive-search-form .search-form {
    margin: 0;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-field {
    width: 378px;
    max-width: 100%;
    height: 48px;
    padding: 12px 50px 12px 20px;
    background: #D5DAF9;
    border-radius: 40px;
    border: 0;
    font-size: 16px;
    font-family: 'SVN-Gilroy', sans-serif;
    color: #000;
    transition: all 0.3s ease;
    margin-bottom: 0;
}


.search-input-wrapper .search-field::placeholder {
    color: #666;
    opacity: 0.7;
}

.search-input-wrapper .search-submit {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: color 0.3s ease;
    margin: 0;
    padding: 0;
}

.search-input-wrapper .search-submit:hover {
    color: #203BDC;
}

.search-input-wrapper .search-submit svg {
    width: 16px;
    height: 16px;
}

/* Featured Posts Slider */
.feature-post-wrapper {
    margin-bottom: 60px;
    width: 100%;
}

.featured-posts-slider {
    background: #FFFFFF;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 8px 24px rgba(32, 59, 220, 0.1);
}

/* Main Featured Post */
.featured-main {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.featured-main-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.featured-main-item.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.featured-main-content {
    flex: 0 0 50%;
    padding: 16px 30px 16px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.single-events .featured-main-content{
    padding: 16px 30px 16px 0;
}

.featured-category {
    display: inline-block;
    padding: 6px 16px;
    background: #203BDC1A;
    color: #203BDC;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    margin-bottom: 20px;
    width: fit-content;
}

.featured-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    margin-bottom: 24px;
    color: #000;
    background: none;
    text-shadow: none;
}

.featured-excerpt {
    margin-bottom: 2rem;
}

.featured-title a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.featured-title a:hover {
    color: #203BDC;
}

.featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #203BDC;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
}

.featured-btn:hover {
    background: #1a2fb8;
    transform: translateX(4px);
}

.featured-btn svg {
    transition: transform 0.3s ease;
}

.featured-btn:hover svg {
    transform: translateX(4px);
}

.featured-main-image {
    flex: 1;
}

.featured-main-image .bd-img {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 350px;
}

.single-events .featured-main-image .bd-img{
    max-width: 100%;
    min-height: auto;
    height: auto;
    padding-bottom: 54%;
    border-radius: 6px;
}

.featured-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

/* Thumbnail List */
.featured-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #E9EBFC;
    border-top: 1px solid #E9EBFC;
}

.featured-thumb-item {
    position: relative;
    background: #FFFFFF80;
    padding: 36px 16px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.post-type-archive-events .featured-thumb-item {
    padding: 16px 16px 36px;
}

.featured-thumb-item:hover {
    background: #F8F9FF;
    transform: translateY(-4px);
}

.featured-thumb-item.active {
    background: #fff;
}

.featured-thumb-image {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.featured-thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-thumb-item:hover .featured-thumb-image img {
    transform: scale(1.05);
}

.featured-thumb-content {
    min-height: 80px;
}

.featured-thumb-category {
    display: inline-block;
    padding: 2px 12px;
    background: #E9EBFC;
    color: #203BDC;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    margin-bottom: 16px;
}

.featured-thumb-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progress Bar */
.featured-progress-bar {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 0;
    height: 3px;
    background: #203BDC;
    transition: width 0.3s ease;
    max-width: calc(100% - 32px);
    z-index: 2;
}

.featured-progress-bg {
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    background: #dedede;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
}

.featured-thumb-item.active .featured-progress-bar {
    animation: progressBar 7000ms linear;
}

.featured-main-content .btn-header.btn-contact {
    display: inline-flex;
    min-width: 130px;
    align-self: flex-start;
    margin: 0;
}

.post-type-archive-events .featured-main-content .btn-header.btn-contact {
    margin-top: 16px;
}

.archive-posts-wrapper {}

.archive-posts-wrapper .tin-tuc-item {
    border: 2px solid #93C5FD;
    box-shadow: 0px 8px 16px 0px #203BDC1A;
    margin-bottom: 48px;
}

.archive-posts-wrapper .list-tin-tuc .tin-tuc-item figure,
.list-tin-tuc .tin-tuc-item figure {
    top: -1px;
    position: relative;
    padding-bottom: 69%;
    overflow: hidden;
}

.single-events .related-posts-section .list-tin-tuc .tin-tuc-item figure{
	padding-bottom: 54%;
}

.archive-posts-wrapper .list-tin-tuc .tin-tuc-item figure img,
.list-tin-tuc .tin-tuc-item figure img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.archive-posts-wrapper .list-tin-tuc .tin-tuc-item figure:hover img,
.list-tin-tuc .tin-tuc-item figure:hover img {
    transform: scale(1.2);
}

.tab-cat-event {
    display: flex;
    text-align: center;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-bottom: 16px;
}

.archive-category-filter {
    background: #D5DAF9;
    border-radius: 9999px;
    padding: 2px;
    margin-bottom: 16px;
    display: inline-flex;
    text-align: center;
}

.archive-category-filter .filter-tab {
    font-size: 14px;
    color: #404040;
    padding: 8px 20px;
    line-height: 20px;
    align-content: center;
    white-space: nowrap;
}

.archive-category-filter .filter-tab.active {
    color: #203BDC;
    font-weight: 600;
    background: #fff;
    border-radius: 999px;
}

.title-blog {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.9px;
    margin-bottom: 16px;
}

.archive-pagination {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.pagination-nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
}

.pagination-nav .pagination-btn,
.pagination-nav .pagination-number {
    height: 32px;
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border-radius: 4px;
}

.pagination-nav .pagination-btn.disabled {
    opacity: 0.2;
}

.pagination-nav .pagination-number {
    font-size: 14px;
}

.pagination-nav .pagination-number.active {
    background: #203BDC;
    color: #fff;
}

/* ========================================================================
   8. PAGES
   ======================================================================== */

/* ========================================
   FPT Single Post Custom Layout Styles
   ======================================== */

/* Breadcrumb */
.fpt-single-post .fpt-breadcrumb {
    font-size: 14px;
    line-height: 20px;
    color: #666;
    margin-bottom: 20px;
}

.fpt-single-post .fpt-breadcrumb a {
    color: #203BDC;
    text-decoration: none;
}

.fpt-single-post .fpt-breadcrumb a:hover {
    text-decoration: underline;
}

.fpt-single-post .fpt-breadcrumb .separator {
    margin: 0 8px;
}

.fpt-single-post .fpt-breadcrumb .current {
    color: #1A1A1A;
    font-weight: 500;
}

/* Category Badge */
.fpt-category-badge {
    margin-bottom: 24px;
}

.fpt-category-badge .category-tag {
    display: inline-block;
    background: #203BDC1A;
    color: #203BDC;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
}

/* Post Title */
.fpt-single-post .fpt-post-title {
    font-size: 36px;
    line-height: 48px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 24px;
    margin-top: 0;
}

/* Post Meta Header */
.fpt-post-meta-header {}

/* Social Share Buttons */
.social-share-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
}

.social-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #E5E5E5;
    border-radius: 50%;
    background: #203BDC;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    line-height: initial;
    min-height: auto;
    margin: 0;
    padding: 0;
}

.social-btn:hover {}

.social-btn svg {}

.social-btn.like-btn {
    background: #E9EBFC;
    border-color: #E9EBFC;
    color: #203BDC;
}

.social-btn.linkedin-btn svg {}

.social-btn.twitter-btn svg {
    color: #000000;
}

.social-btn.facebook-btn svg {
    color: #1877F2;
}

/* Engagement Meta */
.fpt-engagement-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.author-info {
    font-size: 14px;
    line-height: 20px;
    color: #666;
}

.author-info strong {
    color: #1A1A1A;
    font-weight: 600;
}

.author-info .post-date {
    display: block;
}

.engagement-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

.box-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #000000BF;
    font-weight: 600;
}

.engagement-stats svg {
    width: 16px;
    height: 16px;
    color: #203BDC;
}

/* Content Wrapper with TOC */
.fpt-content-wrapper {
    display: flex;
    gap: 40px;
    padding: 40px 72px 40px 40px;
}

/* TOC Sidebar */
.fpt-toc-sidebar {
    position: relative;
    width: 344px;
    max-width: 100%;
}

.fpt-toc-sidebar .toc-sticky {
    position: sticky;
    top: 100px;
}

.fpt-toc-sidebar .toc-title {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 16px;
    margin-top: 0;
    letter-spacing: 0.5px;
}

.fpt-toc-sidebar .toc-content {
    border-left: 2px solid #E5E5E5;
}

.fpt-toc-sidebar .toc-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fpt-toc-sidebar .toc-content li {
    margin: 0;
}

.fpt-toc-sidebar .toc-content a {
    display: block;
    padding: 8px 0 8px 16px;
    font-size: 14px;
    line-height: 20px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
    margin-left: -2px;
}

.fpt-toc-sidebar .toc-content a:hover {
    color: #203BDC;
    border-left-color: #203BDC;
}

.fpt-toc-sidebar .toc-content a.active {
    color: #203BDC;
    font-weight: 600;
    border-left-color: #203BDC;
}

/* Nested TOC Items */
.fpt-toc-sidebar .toc-content ul ul {
    margin-left: 16px;
}

.fpt-toc-sidebar .toc-content ul ul a {
    font-size: 13px;
}

/* Main Content */
.fpt-main-content {
    max-width: calc(100% - 384px);
    flex: 1;
}

/* Full width when no sidebar */
.fpt-content-wrapper.no-sidebar .fpt-main-content {
    max-width: 100%;
}

.title-share {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #1A1A1A;
}

.fpt-main-content .entry-content {
    font-size: 16px;
    line-height: 28px;
    color: #1A1A1A;
    padding-top: 0;
    border-bottom: 1px solid #00000033;
    padding-bottom: 10px;
    margin-bottom: 32px;
}

.fpt-main-content .entry-content h2,
.fpt-main-content .entry-content h3,
.fpt-main-content .entry-content h4 {
    margin-top: 32px;
    margin-bottom: 16px;
    scroll-margin-top: 100px;
}

.fpt-main-content .entry-content h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    margin-top: 0;
}

.fpt-main-content .entry-content h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.fpt-main-content .entry-content h4 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.fpt-main-content .entry-content p {
    margin-bottom: 16px;
    line-height: 24px;
}

.fpt-main-content .entry-content a {
    color: var(--color-primary);
}

.fpt-main-content .entry-content img {
    max-width: 100%;
    height: auto;
    margin-top: 24px;
    margin-bottom: 24px;
}

.fpt-main-content .entry-content figure img {
    margin-bottom: 0;
}

.blog-single {
    padding-top: 144px;
}

.rank-math-breadcrumb {
    font-size: 14px;
    color: #8C8C8C;
}

.rank-math-breadcrumb p {
    /* display: flex; */
    flex-wrap: wrap;
}

.rank-math-breadcrumb a {
    color: #8C8C8C;
    display: inline-block;
}

.rank-math-breadcrumb .separator {
    background-image: url("images/arrow-breadcrumb.png");
    background-size: 6px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin: 0 10px;
    width: 16px;
    color: #E9EBFC;
}

.rank-math-breadcrumb .last {
    color: #203BDC;
    font-weight: 500;
}

.box-data {
    background: #D5DAF9;
    width: 24px;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.fpt-toc-sidebar .widget_media_image {}

.widget_media_image img {
    width: 100%;
}

.related-posts-section {
    border-top: 1px solid #00000033;
    padding-top: 40px;
}

.related-posts-section .btn-header {
    float: none;
    min-width: 118px;
}

.related-posts-title {
    font-size: 36px;
    font-weight: 600;
    display: inline-flex;
    margin-bottom: 0;
    line-height: 44px;
}

.vn-toc-container {
    width: 100% !important;
    box-shadow: none;
    background: #E9EBFC;
    padding: 0 0 20px;
    box-shadow: 0px 8px 16px 0px #203BDC1A;
}

.vn-toc-header {
    text-transform: uppercase;
    font-size: 16px;
    padding: 20px;
    border-bottom: 0 !important;
}

.vn-toc-sublist {
    border-left: 0 !important;
    padding-left: 0 !important;
}

.vn-toc-link.vn-toc-active,
.vn-toc-link:hover {
    color: #203BDC !important;
    border: 0 !important;
    background: #fff;
    font-weight: 500 !important;
}

.section-banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.section-banner .text {
    width: 556px;
    max-width: 100%;
    font-size: 20px;
    line-height: 28px;
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    left: calc((100vw - var(--width-container)) / 2 + 40px);
}

.section-banner .text h1 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 600;
    letter-spacing: -1.5px;
}

.section-banner .text p {
    margin-bottom: 24px;
    display: flex;
}

.section-banner .text blockquote,
.list-btn blockquote {
    padding: 0;
    border: 0;
    font-style: normal;
    margin-bottom: 0;
}

.section-banner .text blockquote a,
.list-btn blockquote a {
    margin-bottom: 0;
}

.section-banner .text blockquote a:last-child,
.list-btn blockquote a:last-child {
    margin-bottom: 0;
    background: #fff;
    display: inline-block;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
}

.section-banner .text blockquote a:last-child:hover {
    background: var(--color-primary);
    color: #fff !important;
    opacity: 1;
}

.page-template .content-area {
    background-color: #E9EBFC;
}

.section-ai-model {
    padding-top: 80px !important;
    padding-bottom: 10px !important;
}

.section-ai-model .col-inner>p {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
}

.section-ai-model h2,
.prd-heading h2 {
    text-align: center;
    font-size: 36px;
    line-height: 40px;
    font-weight: 600;
    margin-bottom: 10px;
}

.prd-heading p {
    text-align: center;
    font-size: 20px;
    color: #000000BF;
}

.section-ai-model .ai-models-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.models-filter-tabs {
    background: #D5DAF9;
    border-radius: 99px;
    display: inline-flex;
    margin: 0 auto;
    height: 40px;
    margin-bottom: 16px;
}

.models-filter-tabs .filter-tab {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    margin-bottom: 0;
    padding: 8px 16px;
    color: #404040;
    margin-right: 0;
    border-radius: 99px;
    align-content: center;
    white-space: nowrap;
}

.models-filter-tabs .filter-tab.active {
    background: #FFFFFF;
    border: 2px solid #D5DAF9;
}

.section-ai-model .models-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
    min-height: 200px;
    /* Prevent layout shift */
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    width: 100%;
}

.models-loading {
    text-align: center;
    padding: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.no-models {
    text-align: center;
    padding: 40px;
    width: 100%;
    font-size: 16px;
    color: #666;
}

.section-ai-model .models-grid .model-card {
    width: 25%;
    border: 1px solid #D9D9D9;
    margin-left: -1px;
    margin-top: -1px;
    position: relative;
    padding: 32px 16px 16px;
}

.section-ai-model .models-grid .model-card:hover {
    z-index: 1;
    border-color: #203BDC;
}

.models-grid .model-badges {
    position: absolute;
    top: 0;
    right: 0;
    background: #0047F112;
    color: #002BB7C5;
    font-size: 12px;
    line-height: 20px;
    padding: 2px 8px;
}

.models-grid .model-thumbnail {
    margin-bottom: 32px;
    width: 104px;
    height: 104px;
    border-radius: 20px;
    overflow: hidden;
}

.models-grid h3 {
    margin-bottom: 4px;
    color: #000000D9;
    font-weight: 600;
    font-size: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.models-grid .model-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    margin-bottom: 12px;
}

.model-meta {
    display: flex;
    justify-content: space-between;
}

.model-meta .model-tags {
    background: #203BDC1A;
    color: #203BDC;
    font-size: 12px;
    line-height: 16px;
    border-radius: 99px;
    padding: 4px 8px;
    max-width: 134px;
}

.model-meta .model-try-btn {
    position: relative;
    padding-right: 20px;
    font-size: 14px;
    color: #203BDC;
    line-height: 26px;
}

.model-meta .model-try-btn:before {
    background: none;
    width: 16px;
    height: 16px;
    font-size: 12px;
    right: -1px;
}

.model-meta .model-tags span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    word-break: break-all;
}

/* View All Models Button */
.models-view-all {
    text-align: center;
    margin-top: 32px;
}

.btn-view-all-models {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 20px;
    background: #fff;
    color: #020817;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 2rem;
}

.btn-view-all-models:hover {
    background: #203BDC;
    color: #FFFFFF;
}

.btn-view-all-models i {
    transition: transform 0.3s ease;
    font-size: 14px;
    width: 24px;
    height: 24px;
    background: #203BDC;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-view-all-models:hover i {
    transform: translateX(4px);
}

.section-unique {
    background: #fff;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.row-unique-data {}

.row-unique-data .col-inner {
    padding-right: 1px;
}

.row-unique-data .text {
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    z-index: 2;
    font-size: 16px;
    line-height: 22px;
}

.row-unique-data .text h3 {
    color: #000000D9;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 8px;
}

.section-benefit {
    padding-top: 80px !important;
}

.section-benefit .prd-heading h2 {
    text-align: left;
    margin-bottom: 2rem;
}

.section-benefit ul {
    list-style: none;
}

.section-benefit ul li {
    margin-left: 0;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.section-benefit ul li a {
    color: #000000BF;
    font-weight: 500;
}

.section-benefit ul li a:hover {
    color: #203BDC;
}

.section-benefit ul li:last-child {
    border: 0;
}

/* Benefit Image Toggle */
.benefit-img .img {
    display: none;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-img .img.active {
    display: block;
    animation: benefitFadeIn 0.6s ease-out forwards;
}

.benefit-img .img.ben-1 {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Style cho link active */
.section-benefit a {
    transition: color 0.3s ease;
}

.section-benefit a.active {
    color: #203BDC;
}

.section-light {
    background: #fff;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.row-light {
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

.row-light .col-inner {
    height: 280px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    border-right: 1px solid #D9D9D9;
    background-image: radial-gradient(circle, #ede9e9 2px, transparent 2px);
    background-size: 26px 26px;
    background-repeat: repeat;
}

.row-light .col-inner p {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.row-light .col-inner h3 {
    color: #203BDC;
    font-size: 56px;
    line-height: 56px;
    font-weight: 700;
    margin-bottom: 0;
}

.row-light .col:last-child .col-inner {
    border: 0;
}

.section-work {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}

.section-work h3 {
    font-size: 36px;
    line-height: 40px;
    font-weight: 600;
    margin-bottom: 8px;
}

.section-work ul {
    list-style: none;
    padding-left: 36px;
    position: relative;
    margin-bottom: 2rem;
}

.section-work ul li {
    position: relative;
    margin-bottom: 20px;
    padding-left: 0;
    transition: all 0.3s ease;
    margin-left: 0;
    line-height: 24px;
}

/* Sidebar background (static) - căn giữa dưới icon check cho mỗi li */
.section-work ul li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 36px;
    width: 2px;
    height: calc(100% - 30px);
    background: #0000330F;
    border-radius: 10px;
}

.section-work ul li strong {
    transition: color 0.3s ease;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}

/* Vertical Loading Bar - chạy từ trên xuống dưới, căn giữa dưới icon check */
.work-vertical-loading-bar {
    position: absolute;
    left: -25px;
    top: 36px;
    width: 2px;
    height: 0;
    background: #3E63DD;
    z-index: 2;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: height 0.3s ease;
    max-height: calc(100% - 30px);
}

/* Check Icon */
.work-check-icon {
    position: absolute;
    left: -36px;
    top: 4px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: #203BDC33;
    transition: all 0.3s ease;
    z-index: 2;
}


/* Li states */
.section-work ul li.completed .work-check-icon {
    color: #203BDC;
}

.section-work p {
    color: #000000BF;
    line-height: 22px;
    margin-bottom: 22px;
}

.section-serverless {
    padding-bottom: 50px !important;
}

.section-serverless .prd-heading h2 {
    text-align: left;
    margin-left: calc((100vw - var(--width-container)) / 2 - 6px);
    margin-bottom: 2.5rem;
}

.section-serverless .serverless-grid {
    padding-left: calc((100vw - var(--width-container)) / 2 - 6px);
}

.section-serverless .serverless-grid .serverless-card {
    background: #FFFFFF;
    padding: 16px;
    width: 280px !important;
    height: 280px;
    border-radius: 4px;
    backdrop-filter: blur(50px);
    display: flex;
    flex-direction: column;
    margin-right: 4px;
}

.section-serverless .serverless-grid .serverless-card .serverless-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: #000000D9;
}

.section-serverless .serverless-grid .serverless-card .serverless-excerpt {
    line-height: 22px;
}

.section-serverless .serverless-grid .serverless-card .serverless-link {
    background: #203BDC1A;
    padding: 4px 16px;
    border-radius: 4px;
    font-size: 14px;
    color: #203BDC;
    line-height: 20px;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    transition: all 0.3s ease;
}

.section-serverless .serverless-grid .serverless-card .serverless-link:hover {
    background: #203BDC;
    color: #fff;
    transform: translateX(4px);
}

.section-serverless .serverless-grid .serverless-card .serverless-link i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.section-serverless .serverless-grid .serverless-card .serverless-link:hover i {
    transform: translateX(4px);
}

.section-serverless .slick-initialized .slick-arrow,
.section-serverless .flickity-prev-next-button {
    top: -75px;
    bottom: auto;
}

.section-serverless .flickity-prev-next-button.previous {
    left: auto;
    right: calc((100vw - var(--width-container)) / 2 - -90px);
}

.section-serverless .flickity-prev-next-button.next {
    right: calc((100vw - var(--width-container)) / 2 - 18px);
}

.section-flex,
.section-get-start {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-image: url("images/bg-full-ai.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.section-flex blockquote {
    border: 0;
    background: #203BDC1A;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 2rem;
    margin-left: auto;
}

.section-flex blockquote img {
    margin-bottom: 0 !important;
}

.section-flex p {
    margin-bottom: 0;
}

.section-flex p:last-child {
    margin-top: auto;
}

.section-flex h2 {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 36px;
    margin-bottom: 40px;
}

.section-flex .medium-6 {
    background: #fff;
    border-radius: 4px;
    padding: 24px !important;
    margin-right: 4px;
    flex-basis: calc(50% - 4px);
    max-width: calc(50% - 4px);
}

.section-flex .medium-6 .col-inner {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.section-flex .row.row-collapse {
    max-width: 720px !important;
}

.section-flex h3 {
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
}

.section-flex ul {
    margin-bottom: 2rem;
}

.section-flex ul li:before {
    content: "•";
    position: absolute;
    left: 5px;
}

.section-flex ul li {
    margin-bottom: 0;
    list-style: none;
    line-height: 22px;
    color: #000000D9;
}

.section-flex a {
    background: #203BDC1A;
    color: #203BDC;
    padding: 4px 16px;
    line-height: 20px;
    font-size: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.section-flex a:hover {
    opacity: 1;
    color: #fff;
    background: var(--color-primary);
}

.section-flex a:after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-size: 13px;
    margin-left: 8px;
}

.section-endpage {
    padding-top: 80px !important;
    padding-bottom: 20px !important;
}

.section-endpage p {
    font-size: 36px;
    line-height: 40px;
    text-align: center;
    width: 840px;
    max-width: 100%;
    margin: 0 auto 2rem;
    font-weight: 500;
}

.section-endpage a {}

.section-contact {}

.section-contact strong {
    display: inline-block;
    font-size: 36px;
    line-height: 40px;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 40px;
}

.section-contact img {
    width: 442px;
}

.nf-form-fields-required {
    display: none;
}

.text-form-contact {
    background: #FFFFFF;
    padding: 24px;
    border-radius: 8px;
}

.text-form-contact .nf-field-container {
    margin-bottom: 1rem;
}

.text-form-contact .nf-after-field .nf-error-msg {
    font-size: 13px;
}

.nf-form-layout .nf-field-element input {
    background: #0000000D;
    color: #000000BF;
    box-shadow: none;
}

#footer .nf-form-layout .nf-field-element input{
	background: #fff;
}

.text-form-contact .nf-form-layout .nf-field-element input::placeholder {
    color: #000000BF;
}

.nf-form-layout .nf-field-element select {
    height: 40px;
    background: #0000000D;
    border-radius: 6px;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23333' d='M6 9L1 4h10z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.text-form-contact .nf-field-label .nf-label-span {
    font-weight: 400;
}

.text-form-contact .list-checkbox-wrap .nf-field-element ul {
    display: flex;
    flex-wrap: wrap;
}

.text-form-contact .list-checkbox-wrap .nf-field-element li {
    width: 50%;
    margin-bottom: 8px !important;
}

.text-form-contact .list-checkbox-wrap .nf-field-element li label {
    margin-bottom: 0;
    font-weight: 500;
    color: #1C2024;
}

.text-form-contact .nf-form-layout .nf-field-element input[type=checkbox] {
    height: auto;
}

.text-form-contact .nf-field-element textarea {
    padding: 8px;
    background: #0000000D;
    border-radius: 6px;
    box-shadow: none;
    border: 0;
    height: 80px;
}

.text-form-contact .nf-field-element textarea::placeholder {
    color: #000000BF;
}

.text-form-contact .html-wrap .nf-field-element {
    color: #000000BF;
}

.text-form-contact .html-wrap .nf-field-element a {
    color: #203BDC;
    font-weight: 700;
}

.text-form-contact .checkbox-wrap {}

.text-form-contact .checkbox-wrap label {
    color: #1C2024;
    font-weight: 400;
    text-shadow: none;
    opacity: 1;
    font-size: 14px;
}

.text-form-contact .nf-form-layout .field-wrap input[type=submit] {
    height: 44px;
    margin: 0 auto;
    display: table;
    box-shadow: 0px 4px 16px 0px #203BDC80;
}

.policy-pages-title {
    font-size: 1rem;
    text-transform: uppercase;
}

.policy-pages-list {
    list-style: none;
}

.policy-pages-list li {
    padding: 7px 20px;
    margin-bottom: 0;
}

.policy-pages-list li a {
    color: #000000BF;
    font-size: 14px;
    font-weight: 600;
    line-height: 6px;
}

.policy-pages-list li.active {
    background: #fff;
    line-height: normal;
}

.policy-pages-list li.active a {
    color: var(--color-primary);
}

.page-template-page-policy .fpt-main-content {
    padding-left: 32px;
}

.page-template-page-policy .fpt-post-title {
    padding: 0;
    margin-bottom: 22px;
}

.page-template-page-policy .fpt-main-content .entry-content h2 {
    margin-bottom: 0;
    padding: 16px 0;
}

.page-template-page-policy .fpt-main-content .entry-content h3 {
    margin: 0;
    padding: 16px 0;
}

td {
    color: #000000;
    font-size: 16px;
}

td:first-child,
th:first-child {
    padding: 12px 16px;
}

table {
    border: 1px solid #D9D9D9;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.single table tr:first-child td {
    background: #F5F5F5;
}

.single-story .fpt-post-title {
    margin-bottom: 0;
}

.vn-toc-header strong {
    letter-spacing: 2px;
}

.hero-banner {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
}

.hero-banner img {
    width: 100%;
}

.single-story .fpt-main-content .entry-content {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.single-story table {
    border: 0;
    border-radius: 4px;
}

.single-story table tr:first-child td {
    background: 0;
}

.single-story td,
.single-story th {
    border-bottom: 4px solid #E9EBFC;
}

.info-customer {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    margin-top: 40px;
}

.info-customer figure {
    width: 440px;
    margin-bottom: 0;
    max-width: 100%;
    position: relative;
}

.info-customer figure img {
    position: absolute;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.info-customer figure:after {
    content: "";
    background-image: url("images/icon-quote.png");
    background-repeat: no-repeat;
    position: absolute;
    background-size: 100%;
    width: 80px;
    height: 80px;
    top: -40px;
    right: -36px;
}

.info-customer .customer-info {
    flex: 1;
    font-size: 24px;
    line-height: 32px;
    padding: 48px 24px 24px 48px;
}

.info-customer .customer-info img {
    margin-left: 0;
    height: 60px;
    width: auto;
}

.single-story .related-posts-section {
    padding-top: 80px;
    border-top: 0;
    position: relative;
}

.top-related-posts {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.layout-event .featured-main-image {
    padding: 10px;
}

.layout-event .featured-main-image img {
    border-radius: 6px;
}

.layout-event .featured-main {
    height: 370px;
}

.frame-event{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.layout-event .date-start {
    display: inline-flex;
    border-radius: 4px;
    width: 72px;
    height: 83px;
    background: #203BDC33;
    text-align: center;
    color: var(--color-primary);
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin-top: 50px;
}

.layout-event .date-start strong {
    font-size: 40px;
    letter-spacing: -1px;
    line-height: 42px;
    display: block;
    width: 100%;
}

.layout-event .date-start span {
    font-size: 20px;
    line-height: 21px;
}

.layout-event .featured-main-content {
    padding: 10px 24px;
    flex-direction: row;
    align-items: center;
    flex: 0 0 45%;
}

.layout-event .featured-categories {}

.layout-event .featured-category {
    margin-bottom: 16px;
    padding: 4px 8px;
    margin-right: 8px;
}

.layout-event .featured-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout-event .full-info {
    margin-left: 24px;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* align-self: center; */
}

.layout-event .featured-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.layout-event .event-start-time {
    width: 100%;
}

.layout-event .event-start-time img,
.layout-event .event-location img {}

.layout-event .event-start-time span,
.layout-event .event-location span {
    font-weight: 600;
    color: var(--color-primary);
}

.layout-event .event-location {
    width: 100%;
}

.layout-event .event-location img {}

.layout-event .event-location span {}

.layout-event .featured-thumbnails {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    border-top: 4px solid #E9EBFC;
}

.layout-event .featured-thumbnails .featured-thumb-item {
    border-radius: 4px;
}

.layout-event .event-thumb-time {
    display: inline-flex;
    color: var(--color-primary);
}

.layout-event .event-thumb-time strong {
    font-size: 40px;
    line-height: 42px;
    margin-right: 5px;
}

.layout-event .event-thumb-time span {}

.layout-event .featured-progress-bg {
    top: auto;
    bottom: 16px;
}

.layout-event .featured-progress-bar {
    top: auto;
    bottom: 16px;
}

.layout-event .featured-main {
    margin-bottom: 4px;
}

.list-event .featured-event-main-item {
    opacity: 1;
    z-index: 2;
}

.list-event .featured-event-main-item {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
}

.single-events .featured-event-main-item {
    display: flex;
    flex-wrap: wrap;
}

.single-events .layout-event .featured-main-content {
    padding: 32px 64px 0 0;
}

.single-events .full-info {
    margin-left: 0;
}

.single-events .layout-event .featured-title {
    font-size: 36px;
    line-height: 44px;
}

.single-events .layout-event .featured-main-image {
    height: 350px;
}

.guest-speaker {
    margin-top: 60px;
}

.guest-slider {
    margin-right: -20px;
}

.single-events .guest-slider .guest-item {
    width: calc(33.333% - 20px) !important;
    margin-right: 20px;
}

.guest-info {
    /* position: absolute; */
    padding: 10px 0 !important;
    bottom: 0;
    background: linear-gradient(180deg, rgba(233, 235, 252, 0) 0%, #E9EBFC 100%);
    padding: 12px 16px;
    left: 0;
    right: 0;
}

.guest-info .guest-title {
    font-weight: 600;
}

.guest-info .guest-excerpt {
    line-height: normal;
    font-size: 12px;
    color: #000000BF;
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 1; */
    line-clamp: 1;
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
}

.single-events .related-posts-section {
    border-top: 0;
}

.single-events .fpt-main-content .entry-content {
    border: 0;
}

.single-events .guest-slider img {
    margin: 0;
}

.guest-slider .flickity-prev-next-button {
    top: 50%;
    transform: translateY(-50%);
}

.guest-slider .flickity-prev-next-button.previous {
    left: -28px;
}

.guest-slider .flickity-prev-next-button.next {
    right: -8px;
}

.event-schedule {
    margin-top: 40px
}

.event-schedule {
    padding-top: 16px;
}

.schedule-content table {
    max-width: 100%;
}

.event-schedule td:first-child {
    width: 20% !important;
}

.event-schedule td:first-child em {
    font-size: 12px;
    color: #1F2D5C;
    background: #0047F112;
    display: inline-block;
    padding: 4px;
    border-radius: 9px;
    font-style: normal;
}

.form-register {
    background: #fff;
    border-radius: 4px;
    padding: 24px;
}

.form-register h3 {
    font-size: 24px;
}

.form-register .nf-form-layout .nf-field-element input {
    background: #f3f3f3;
    border: 0;
    box-shadow: none;
}

.form-register .nf-form-layout .html-wrap {
    line-height: 22px;
    color: #000000BF;
}

.form-register .checkbox-wrap label {
    font-size: 14px;
    line-height: normal;
    font-weight: 500;
    color: #1C2024;
}

.form-register .nf-form-layout .field-wrap input[type=submit] {
    display: table;
    margin: 0 auto;
}

.html-container a {
    color: var(--color-primary);
}

.single-events .fpt-main-content {
    margin-left: 30px;
}

.single-events .fpt-content-wrapper.no-sidebar .fpt-main-content {
    margin-left: 0;
}

.single-events .fpt-main-content p:first-child img {
    margin-top: 0;
}

/* Fix passive event listener warning for sliders */
.slick-list,
.slick-track,
.flickity-viewport,
.flickity-slider {
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
}

.slick-list.dragging,
.flickity-enabled.is-dragging {
    touch-action: none !important;
    -ms-touch-action: none !important;
}

.section-global-gpu {
    background: #fff;
}

.col-gpu {
    display: flex;
    align-items: center;
}

.col-gpu>.col-inner {}

.col-gpu .col {}

.col-gpu .col p {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 24px;
}

.col-gpu .col p strong {
    font-size: 2rem;
    color: var(--color-primary);
    position: relative;
    display: block;
    transition: transform .4s;
    line-height: 1.1;
}

.col-gpu .col p strong:hover {
    transform: scale(1.1);
    cursor: crosshair;
}

.col-gpu .col p strong:after {
    content: "";
    border-bottom: 1px solid #D9D9D9;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -14px;
}

.col-gpu .row-dashed .col:before,
.col-gpu .row-dashed .col:after {
    display: none;
}

.section-price {
    padding-top: 80px !important;
    background: #fff;
}


/* GPU Pricing List Styles */
.gpu-pricing-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}


/* Tabs */
.gpu-tabs-container {
    justify-content: center;
    margin-bottom: 24px;
    /* overflow-x: auto; */
    flex-wrap: nowrap;
    text-align: center;
}

.gpu-description {
    text-align: center;
    margin-bottom: 24px;
    font-size: 20px;
    color: #565656;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.gpu-tabs {
    display: inline-flex;
    background: #E9EBFC;
    padding: 2px;
    border-radius: 50px;
}

.gpu-filter-tab {
    background: transparent;
    border: none;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: #565656;
    cursor: pointer;
    transition: all 0.3s ease;
    /* white-space: nowrap; */
}

.gpu-filter-tab.active {
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.gpu-filter-tab:hover:not(.active) {
    color: var(--color-primary);
}

/* Header */
.gpu-pricing-header {
    display: flex;
    background: #F5F5F5;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #E0E0E0;
    border-bottom: none;
    font-weight: 600;
    color: #1A1A1A;
}

.gpu-header-col {
    font-size: 16px;
}

/* Columns */
.gpu-col-instance {
    width: 30%;
    padding-right: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.gpu-col-spec {
    width: 39%;
    padding-right: 20px;
    border-left: 1px solid #E0E0E0;
    padding-left: 20px;
}

.gpu-col-price {
    width: 31%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 1px solid #E0E0E0;
    padding-left: 20px;
}

/* List Items */
.gpu-pricing-list {
    border: 1px solid #E0E0E0;
    border-top: none;
    background: #fff;
}

.gpu-item {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid #E0E0E0;
    transition: background 0.2s ease;
}

.gpu-item:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.gpu-item:hover {
    background: #FAFAFA;
}

/* Instance Column */
.gpu-number-box {
    width: 56px;
    height: 56px;
    background: #203BDC40;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

.gpu-number {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary);
}

.gpu-title-box {
    flex: 1;
}

.gpu-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1A1A1A;
}

.gpu-info {
    font-size: 1rem;
    color: #000000BF;
}

/* Spec Column */
.gpu-spec-content {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.gpu-spec-content p {
    margin-bottom: 4px;
}

.gpu-spec-content p:last-child {
    margin-bottom: 0;
}

/* Price Column */
.gpu-price-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gpu-original-price-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gpu-original-price {
    font-size: 14px;
    color: #00000080;
    text-decoration: line-through;
}

.gpu-discount-badge {
    background: #E9EBFC;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.gpu-sale-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.gpu-action-box {
    margin-left: auto;
}

html[lang="ja"] .gpu-action-box {
	margin: 0 auto;
}

html[lang="ja"] .gpu-col-spec{
	width: 50%;
}

html[lang="ja"] .gpu-col-price{
	width: 20%;
}

.btn-rent {
    min-width: 100px;
    text-align: center;
    justify-content: center;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    margin-bottom: 0;
    background: var(--color-primary);
}

/* Loading State */
.gpu-pricing-list.loading {
    position: relative;
    min-height: 200px;
}

.gpu-pricing-list.loading:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

/* Load More Button */
.gpu-load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 0;
    padding: 4px 20px;
    background: #EEF2FF;
    border-color: #D9D9D9;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.btn-show-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: unset;
    line-height: 19px;
    margin: 0;
    padding: 0;
}

.btn-show-all:hover {
    text-decoration: underline;
}

.btn-show-all svg {
    transition: transform 0.3s ease;
}

.btn-show-all:hover svg {
    transform: translateY(2px);
}

.btn-show-all.loading {
    opacity: 0.7;
    pointer-events: none;
}

.section-power {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.row-gpu-power .col-inner {
    text-align: center;
}

.row-gpu-power .img-inner {
    background: #fff;
    display: inline-flex;
    padding: 36px;
    border-radius: 50%;
}

.row-gpu-power .img-inner img {
    width: 48px;
    height: 48px;
}

.row-gpu-power p {
    margin-bottom: 7px;
    line-height: 22px;
    max-width: 210px;
    margin: 0 auto;
}

.row-gpu-power p strong {
    font-size: 24px;
    font-weight: 600;
}

.sec-performance {
    padding-bottom: 80px !important;
}

.row-hp {
    margin-top: 50px;
    max-width: calc(var(--width-container) - 24px) !important;
}

.row-hp .col {
    padding: 0 4px 30px;
}

.row-hp .col .col-inner {
    background: #fff;
    box-shadow: 0px 4px 16px 0px #0000000D;
    border-radius: 8px;
    overflow: hidden;
}

.row-hp .col .col-inner .img {
    margin-bottom: 0;
}

.row-hp .col .col-inner .img-inner {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 212px;
    overflow: hidden;
}

.row-hp .col .col-inner .img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.row-hp .col .col-inner .text {
    padding: 24px;
    height: 212px;
}

.row-hp .col .col-inner p {
    margin-bottom: 7px;
    color: #000000BF;
    line-height: 22px;
}

.row-hp .col .col-inner p strong {
    font-size: 20px;
    line-height: 22px;
}

.row-hp .col:nth-child(even) .col-inner {
    display: flex;
    flex-wrap: wrap;
}

.row-hp .col:nth-child(even) .col-inner .img {
    order: 2;
}

/* GPU Power - Hover Effect with Rotating Glow */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.row-gpu-power {
    position: relative;
    max-width: calc(var(--width-container) - 32px) !important;
}

.row-gpu-power .col {
    position: relative;
    z-index: 1;
    flex-basis: 20%;
    max-width: 20%;
    padding: 0;
}

/* Icon Styles */
.row-gpu-power .img {
    border-radius: 50%;
    border: 1px solid #ffffff42;
    transition: border-color 0.3s ease;
    position: relative;
    z-index: 2;
    margin: 0 auto 2rem !important;
    padding: 62px;
}

/* Rotating Glowing Ring - Hidden by default */
.row-gpu-power .img::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from var(--angle),
            transparent 0deg,
            transparent 270deg,
            rgba(255, 255, 255, 0.3) 300deg,
            rgba(255, 255, 255, 0.6) 330deg,
            #ffffff 345deg,
            #ffffff 360deg);
    -webkit-mask: radial-gradient(transparent 67%, black 68%);
    mask: radial-gradient(transparent 67%, black 68%);
    z-index: -1;
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    --angle: 0deg;
}

/* Icon Inner - For zoom effect */
.row-gpu-power .img-inner {
    transition: transform 0.3s ease;
}

.row-gpu-power .img img {
    width: 40px;
    height: auto;
}

/* Hover Effects - Start rotation animation */
.row-gpu-power .col:hover{
    cursor: crosshair;
}
.row-gpu-power .col:hover .img::after {
    animation: circle-fill-hover 2s linear infinite;
}

.row-gpu-power .col:hover .img-inner {
    transform: scale(1.15);
}

.row-gpu-power .col:hover .img {
    border-color: rgba(255, 255, 255, 0.8);
}

/* Hover Rotation Animation - Giống code cũ */
@keyframes circle-fill-hover {
    0% {
        --angle: 0deg;
        opacity: 1;
    }
    100% {
        --angle: 360deg;
        opacity: 1;
    }
}

.slide-gpu .img-inner {
    border-radius: 12px;
    overflow: hidden;
}


.slide-gpu .img-inner img {
    transition: transform .4s;
}

.slide-gpu .img-inner:hover img {
    transform: scale(1.2);
}

/* ========================================
   Card Stack Animation
   ======================================== */
.section-everything {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
}

.row-card-stack {
    --card-stack-count: 4;
    --card-stack-top-padding: 1.5em;
    --card-stack-margin: 4vw;
}

.row-card-stack>.col>.col-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 4px;
}

/* Individual card rows */
.row-card-stack>.col>.col-inner>.row {
    position: sticky;
    top: 120px;
    margin: 0;
    background: #FFFFFF;
    padding: 4px;
}

/* Progressive padding for stacking effect */
.row-card-stack>.col>.col-inner>.row:nth-child(1) {
    --stack-index: 1;
}

.row-card-stack>.col>.col-inner>.row:nth-child(2) {
    --stack-index: 2;
}

.row-card-stack>.col>.col-inner>.row:nth-child(3) {
    --stack-index: 3;
}

.row-card-stack>.col>.col-inner>.row:nth-child(4) {
    --stack-index: 4;
}

/* Alternating layout for stack cards */
/* Odd rows: Text left (medium-3), Image right (medium-9) */
.row-card-stack>.col>.col-inner>.row:nth-child(odd) .col:first-child {
    order: 1;
}

.row-card-stack>.col>.col-inner>.row:nth-child(odd) .col:last-child {
    order: 2;
}

/* Even rows: Image left (medium-9), Text right (medium-3) */
.row-card-stack>.col>.col-inner>.row:nth-child(even) .col:first-child {
    order: 2;
}

.row-card-stack>.col>.col-inner>.row:nth-child(even) .col:last-child {
    order: 1;
}

/* Text alignment */
.row-card-stack>.col>.col-inner>.row:nth-child(odd) .col:first-child .col-inner {
    text-align: left;
    padding: 20px;
}

.row-card-stack>.col>.col-inner>.row .col .col-inner p {
    margin-bottom: 0;
    color: #000000BF;
    line-height: 22px;
}

.row-card-stack>.col>.col-inner>.row .col .col-inner p strong {
    font-size: 24px;
    color: #000;
    line-height: 32px;
}

.row-card-stack>.col>.col-inner>.row:nth-child(even) .col:first-child {
    display: flex;
}

.row-card-stack>.col>.col-inner>.row:nth-child(even) .col:first-child .col-inner {
    text-align: right;
    width: 100%;
    padding: 20px;
}

/* Card content styling */
.row-card-stack>.col>.col-inner>.row>.col {
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

/* Smooth transitions */
.row-card-stack>.col>.col-inner>.row>.col .col-inner {
    transition: all 0.5s ease;
}

.section-get-start {
    color: #fff;
    padding-bottom: 20px !important;
}

.section-get-start h2 {
    color: #fff;
}

.section-get-start .btn-header.btn-contact {
    background: #fff;
    box-shadow: 0px 4px 16px 0px #203BDC80;
    color: var(--color-primary) !important;
}

.section-get-start .btn-header.btn-contact:before {
    color: #fff;
    background: var(--color-primary);
}

.section-fast {
    background: #fff;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.row-fast {
    border-radius: 8px;
    border: 1px solid #D9D9D9;
}

.row-fast .col {
    border-right: 1px solid #D9D9D9;
}

.row-fast .col .col-inner {
    padding: 24px;
    height: 100%;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
}

.row-fast .col:last-child {
    border-right: 0;
}

.row-fast .col .col-inner p {
    margin-bottom: 0;
    line-height: normal;
    width: 100%;
    color: #000000D9;
}

.row-fast .col .col-inner strong {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 8px;
    display: inline-block;
}

.row-fast .col .col-inner p:last-child {
    margin-top: auto;
    text-align: right;
}

.row-fast .col .col-inner img {
    margin-top: 22px;
    margin-bottom: 0;
}

.section-role {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.section-role h2 {
    font-size: 36px;
    font-weight: 600;
}

.row-role {
    background: #fff;
    border-radius: 4px;
}

.row-role .col {
    padding: 16px 16px 29px !important;
}

.row-role .col .col-inner {}

.row-role .col .col-inner p {
    margin-bottom: 0;
}

.row-role .col .col-inner p:last-child {
    line-height: 22px;
    text-align: justify;
    color: #000000D9;
}

.row-role .col .col-inner p img {
    width: 80px;
    height: 80px;
    margin-bottom: 40px;
}

.row-role .col .col-inner p strong {
    font-size: 20px;
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: -1px;
}

.nf-after-field .nf-error-msg {
    font-size: 14px;
}

.footer-form .nf-error-field-errors {
    display: none;
}

.bottom-home-banner {
    background-image: linear-gradient(90deg, #203bdc, #d1dbef);
    margin-right: -16px;
    margin-left: -16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.bottom-home-banner p {
    color: #fff;
    margin-left: 10px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
}

.bottom-home-banner p img {
    width: 109px;
    height: 51px;
    margin: 10px 0 !important;
}

.absolute-footer.dark {
    display: none;
}

.section-finetune .full-ai-img .img .img-inner{
    border: 1px solid #203bdc;
    border-radius: 10px;
    filter: none;
}
.section-finetune .full-ai-img .img{
    max-width: 100%;
}
.section-finetune .full-ai-img .col-inner{padding-bottom: 50%;}
.text-quote{padding-bottom: 0;}
.text-quote .col-inner{
    background: #FFFFFF80;
    padding: 16px 24px;
    border-radius: 8px;
}
.text-quote p{
    margin-bottom: 0;
}
.section-finetune .full-ai-img .img .img-inner img{}
.section-finetune .full-ai-text .text > p strong{
    color: #00000073;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding-top: 8px;
}

.section-finetune .full-ai-text .text>p.completed strong{
    color: #000000E0;
}

.section-finetune .full-ai-text .text>p.completed.active strong{
    color: var(--color-primary);
}

.section-finetune .full-ai-text .text > p:has(strong)::before{
    background: #00000040;
}
.section-finetune .full-ai-text .text > p.completed:not(.active)::before{
    background: var(--color-primary);
}
.section-finetune .full-ai-text .text > p:first-child .fa-check{
    background: #00000040;
    color: #fff;
}
.section-finetune .fullai-loading-bar{
    background: var(--color-primary);
}

.section-finetune .full-ai-text .text>p.completed .fa-check{
    background: var(--color-primary);
}

.section-finetune .full-ai-text .text>p:first-child .fa-check{
    margin-top: 4px;
    width: 20px;
    height: 20px;
}


/* ========================================================================
   NINJA FORMS SUCCESS POPUP
   ======================================================================== */

/* Overlay - Lớp phủ tối */
.ninja-form-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Popup content - Nội dung popup với background bg-popup.png */
.ninja-form-popup-content {
    position: relative;
    width: 100%;
    max-width: 1060px;
    min-height: 407px;
    background-image: url('images/bg-popup.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    animation: popupFadeIn 0.3s ease-out;
}

/* Close button X - Nút đóng góc trên bên phải */
.ninja-form-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #ffffff;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
    border-radius: 4px;
    font-weight: 300;
    min-height: auto;
    margin: 0;
}

.ninja-form-popup-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Message text */
.ninja-form-popup-message {
    text-align: center;
    margin-bottom: 40px;
}

.ninja-form-popup-message p {
    font-size: 28px;
    line-height: 1.5;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
    max-width: 800px;
}

/* OK button - Nút OK nền trắng chữ primary */
.ninja-form-popup-ok {
    background-color: #ffffff;
    color: var(--color-primary, #0066FF);
    border: none;
    padding: 12px 60px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ninja-form-popup-ok:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Prevent body scroll when popup is open */
body.ninja-form-popup-open {
    overflow: hidden;
}

/* Button container */
.ms-info blockquote .btn-ani {
    position: relative;
    z-index: 1;
    background: var(--color-primary);
    box-shadow: 0px 4px 16px 0px #203BDC80;
    padding: 2px;
    margin-right: 12px;
    border-radius: 6px;
}

/* Vệt sáng chạy vòng - ::before */
.ms-info blockquote .btn-ani::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: conic-gradient(from var(--glow-angle) at 50% 50%,
    transparent 0%,
    transparent 33%,
    #fff 50%,
    transparent 66%,
    transparent 100%);
    animation: rotate-glow 2s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Lớp nền che phần trong - ::after */
.ms-info blockquote .btn-ani::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--color-primary);
    border-radius: 4px;
    z-index: 1;
}

/* Nội dung button */
.ms-info blockquote .btn-ani span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
}

/* Hover effect - tăng tốc animation */
.ms-info blockquote .btn-ani:hover::before {
    animation: rotate-glow 1s linear infinite;
}

.ms-info blockquote .btn-ani:hover {
    box-shadow: 0px 6px 20px 0px #203BDC99,
    0 0 20px rgba(59, 130, 246, 0.4);
}

/* ========================================

/* ========================================
   GPU Pricing List - Toggle Show/Hide
   ======================================== */

/* Hide GPU items beyond 5th */
.gpu-item.gpu-hidden {
    display: none;
}

/* Finetune Navigation Buttons */
.section-finetune .row{
    position: relative;
}
.finetune-nav-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 35%;
    z-index: 99;
    margin: 0;
}

.finetune-nav-btn {
    padding: 12px 21px;
    background: #fff;
    box-shadow: 0px 2.8px 11.2px 0px #0000001A;
    color: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: normal;
    width: 56px;
    height: 56px;
    position: absolute;
}

.finetune-nav-btn.finetune-prev-btn{
    left: -12px;
}
.finetune-nav-btn.finetune-next-btn{
    right: -12px;
}

.finetune-nav-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.finetune-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.finetune-prev-btn::before {
    content: "\f060";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
}

.finetune-next-btn::before {
    content: "\f061";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
}
.sec-faq{}
.sec-faq .accordion-item{
    border: 1px solid #78787833;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.sec-faq .accordion-item.active{}
.sec-faq .accordion{
    margin-top: 30px;
}
.sec-faq .accordion-title{
    border: 0;
    padding: 20px 32px;
    font-weight: 600;
    color: #0C0C0D;
}
.sec-faq  .accordion-inner{
    color: #404040;
    margin-top: -4px;
    padding: 0 32px 20px;
    background: #fff;
}
.sec-faq  .accordion-inner p:last-child{
    margin-bottom: 0;
}
.sec-faq .accordion-title.active{
    background: #fff;
}
.sec-faq .accordion-title button{
    top: 24px;
    left: auto;
    right: 32px;
    width: 24px;
    height: 24px;
    min-height: auto;
    margin-right: 0;
    opacity: 1;
}

.sec-faq .accordion-title button i{
    line-height: normal;
    font-size: 28px;
    color: #203BDC;
}
.sec-faq .accordion-title span{
    font-size: 20px;
    color: #0C0C0D;
    display: block;
    padding-right: 25px;
    line-height: normal;
}

/* ========================================================================
   10. RESPONSIVE STYLES
   ======================================================================== */

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

    /*************** MOBILE (max-width: 768px) ***************/
    .nav>li {
        margin-right: 0;
    }

    .language-current {
        padding: 7px 0;
        width: auto;
        position: relative;
    }

    .header-main .header-inner {
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 0;
        backdrop-filter: blur(50px);
        border-bottom: 1px solid #fff;
    }

    .gip-notice-text {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custom-language-switcher {
        margin-right: 0;
    }

    .header-main {
        margin-top: 0;
    }

    #logo img {
        height: 24px !important;
    }

    .language-code {
        right: -6px;
        left: auto;
        bottom: 0px;
        font-size: 10.5px;
    }

    .nav>li.html {
        margin-right: 10px;
    }

    .language-icon {}

    .language-dropdown {
        right: -60px;
        left: auto;
    }

    #main {
        padding-top: 56px;
    }

    .ms-slide-info {
        position: initial !important;
        transform: inherit;
        background: #fff;
        padding: 16px 16px 50px;
    }

    .ms-bullets.ms-dir-h {
        bottom: 8px !important;
        left: -36px;
        right: 0;
        margin: 0 auto;
    }

    .ms-info {
        font-size: 18px;
        line-height: 24px;
    }

    .ms-info strong,
    .section-banner .text h1 {
        font-size: 40px;
        line-height: 48px;
        letter-spacing: -1.5px;
    }

    .master-slider:after,
    .section-banner:after {
        content: "\f107";
        background-image: none;
        font-family: 'Font Awesome 6 Free';
        font-size: 20px;
        color: #00000080;
        text-align: center;
        bottom: -16px;
    }

    .ms-info blockquote a.btn-header {
        border-radius: 6px;
        border: 1px solid #E2E8F0 !important;
    }

    .ms-info blockquote a.btn-header.btn-contact {
        border: 0 !important;
    }

    .text-title h2 {
        line-height: 40px;
        letter-spacing: -0.9px;
    }

    .build-your .text-title h2 span {
        display: block;
    }

    .text-title {
        text-align: left;
        font-size: 16px;
        line-height: 22px;
    }

    .text-title p:last-child {
        margin-bottom: 0;
    }

    .col-chip-img .img {}

    .col-chip-img .col-inner {
        height: calc(100vw - 32px);
    }

    .chipset {
        padding: 64px 16px !important;
    }

    .chip-loading-bar {
        display: none;
    }

    .col-chip-text .text::before {
        display: none;
    }

    .col-chip-text .text {
        padding: 24px 16px;
    }

    .col-chip-text .text strong {
        font-size: 24px;
        line-height: 1.4;
    }

    .col-chip-text .text p {
        font-size: 16px;
        line-height: 1.4;
    }

    .sec-global {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .text-box-global p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .row-sec-text {
        margin-top: 15px;
    }

    .row-slider .col {
        padding-bottom: 0;
    }

    .slider-chay-muot.row-slider .flickity-prev-next-button {
        display: none;
    }

    .gallery-columns-12 .gallery-item,
    .large-columns-12 .flickity-slider>.col,
    .large-columns-12>.col {
        flex-basis: 30%;
        max-width: 30%;
    }

    .location-gb,
    .location-vn {}

    .sec-full-ai {
        padding: 64px 0 34px !important;
    }

    .sec-full-ai .text-title {
        text-align: left;
        margin-bottom: 0;
    }

    .full-ai-img .col-inner {
        min-height: calc(90vw - 32px);
    }

    .section-finetune .full-ai-img .col-inner{
        margin-top: 10px!important;
        min-height: auto;
    }

    .full-ai-text .col-inner {
        flex-wrap: wrap;
    }

    .full-ai-text .text {
        width: 100%;
        flex: 100%;
        padding-left: 36px;
        padding-top: 30px;
        position: relative;
    }

    .full-ai-text .text>p:first-child {
        top: -12px;
        left: 5px;
        height: 100%;
        position: absolute !important;
    }

    .section-finetune .full-ai-text .text>p::after{
        display: none;
    }

    .full-ai-text .text>p strong {
        display: inline-block;
    }

    .section-finetune .full-ai-text .text > p strong{
        /* padding-top: 0; */
    }

    .full-ai-text .text>p:has(strong)::before {
        display: none;
    }
    .section-finetune .full-ai-text .text>p:has(strong)::before{
        display: block;
        left: 24px;
    }

    .section-finetune .full-ai-text .text{
        padding-top: 0;
        flex: none;
        width: 170px;
        padding-left: 0;
    }

    .section-finetune .full-ai-text .col-inner{
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

    .full-ai-text .text>p:has(strong)::after {
        display: block;
        /* Hiển thị line dọc trên mobile */
        max-height: calc(100% - 40px);
        left: 9px;
        top: 50px;
    }

    /* Ẩn loading bar ngang, hiển thị loading bar dọc */
    .fullai-loading-bar {
        display: none;
    }

    .section-finetune .fullai-loading-bar-mobile{
    display: none;
    }

    .section-finetune .fullai-loading-bar{
        display: flex;
        left: 24px;
    }

    .section-finetune .full-ai-text .text>p:has(strong).active::after,
    .section-finetune .full-ai-text .text>p.active::after{
        background: #00000040;
    }

    .fullai-loading-bar-mobile {
        display: block;
        left: 9px;
        top: 50px;
        max-height: calc(100% - 40px);
    }

    .full-ai-text .text>p:last-child {
        font-size: 14px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .section-finetune .full-ai-text .text>p:last-child{
    position: initial!important;
}

    .full-ai-text .text>p:last-child br {
        display: none;
    }

    .full-ai-text .text p a {
        padding-right: 10px;
        margin-right: auto;
    }

    .full-ai-text .text p a.btn-cluster {
        border: 0;
        padding-left: 0;
    }

    .sec-real-world {
        padding-top: 0 !important;
    }

    .sec-real-world .section-content>.row {
        max-width: calc(100% - 32px) !important;
        background-position: center;
        padding: 40px 0 15px;
    }

    .real-world-slide {
        /* flex-flow: nowrap; */
    }

    .real-world-slide .medium-3 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .slick-dots {
        bottom: -45px;
    }

    .slick-dots li {
        margin-left: 8px !important;
    }

    .slick-dots li button:before,
    .slick-dots li button {
        color: #FFFFFF;
    }

    .row-title-con .col p {
        font-size: 16px;
        margin-bottom: 0;
    }

    .row-title-con .col p br {
        display: none;
    }

    .row-title-con .col .btn-header.btn-contact,
    .related-posts-section .btn-header {
        margin-top: 1rem;
        float: none;
        margin-bottom: 2rem;
    }

    .slide-ct .item-slide-ct {
        width: 90%;
    }

    .item-slide-ct>.col-inner .col:first-child {
        flex-basis: 100%;
        max-width: 100%;
    }

    .item-slide-ct>.col-inner .col:last-child {
        width: 100%;
        padding: 16px 32px;
    }

    .item-slide-ct>.col-inner .col:last-child strong {
        font-size: 16px;
    }

    .item-slide-ct .col:last-child .col-inner p:last-child {
        margin-bottom: 0;
    }

    .slide-ct .flickity-prev-next-button.next {
        right: 0;
    }

    .slide-ct .flickity-prev-next-button.previous {
        left: 0;
    }

    .flickity-prev-next-button,
    .slick-initialized .slick-arrow {
        bottom: -60px;
    }

    .sec-conf {
        padding-bottom: 0 !important;
    }

    .list-tin-tuc .tin-tuc-item {
        width: 100%;
        margin-bottom: 16px;
    }

    .list-tin-tuc .tin-tuc-item:last-child {
/*         margin-bottom: 0; */
    }

    .list-tin-tuc {}

    .sec-blog {
        padding-bottom: 34px !important;
    }

    .footer-form {}

    .footer-form form {
        margin-bottom: 0;
    }

    .footer-form .nf-field-container {
        margin-bottom: 0;
    }

    .col-sitemap {}

    .col-sitemap .small-12 {
        flex-basis: 50%;
        max-width: 50%;
        padding-bottom: 0;
    }

    .col-sitemap .small-12:nth-child(even) {
        padding-left: 14px;
    }

    .col-sitemap .small-12:nth-child(odd) {
        padding-right: 10px;
    }

    .col-sitemap .small-12:nth-child(5) p {
        display: none;
    }

    .footer-bottom .col {
        padding-bottom: 1rem;
    }

    .off-canvas-center .mfp-content {
        vertical-align: top;
        padding-top: 0;
    }

    .mfp-bg.off-canvas-center:not(.dark) {}

    .off-canvas-center .nav-vertical>li>a {
        justify-content: flex-start;
        font-size: 20px;
    }

    .nav:not(.nav-slide) .active>.children {
        padding: 0 30px;
    }

    .off-canvas-center .nav-sidebar.nav-vertical>li {
        border-bottom: 1px solid #FFFFFF40;
    }

    .off-canvas-center .nav-vertical>li>ul>li a {
        font-size: 18px;
        justify-content: flex-start;
        text-transform: none;
    }

    .nav-vertical>li>ul li a {
        color: #000;
    }

    .layout-blog {
        padding-top: 32px;
    }

    .featured-main-item {
        position: initial;
        display: none;
    }

    .featured-main-item.active {
        display: flex;
        flex-wrap: wrap;
        order: 1;
    }

    .featured-main-content {
        padding: 16px;
        width: 100%;
        flex: none;
    }

    .single-events .featured-main-content {
        padding: 0 0 16px;
    }

    .featured-main-image {
        flex: none;
        width: 100%;
    }
	
	.post-type-archive-events .featured-main-image .bd-img{
		  padding-bottom: 54%;
	}

    .featured-main-image .bd-img {
        padding-bottom: 69%;
        min-height: auto;
    }

    .featured-title {
        font-size: 28px;
        font-weight: 700;
        line-height: 34px;
    }

    .featured-main {
        height: auto;
    }

    .featured-thumbnails {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-thumb-item {
        padding: 32px 16px 16px;
    }

    .blog-single {
        padding-top: 32px;
    }

    .fpt-single-post .fpt-post-title {
        font-size: 28px;
        line-height: 36px;
    }

    .fpt-content-wrapper {
        padding: 32px 0;
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
    }

    .vn-toc-list {
        padding: 0 16px !important;
    }

    .fpt-toc-sidebar {
        width: 100%;
    }

    .related-posts-title {
        font-size: 28px;
    }

    .related-posts-section .top-related-posts .btn-header {
        margin-top: 0;
        margin-bottom: 0;
        display: inline-flex;
    }

    .title-share {
        font-size: 18px;
    }

    .info-customer figure:after {
        width: 60px;
        height: 60px;
        right: -10px;
    }

    .info-customer .customer-info {
        padding: 16px;
        font-size: 18px;
        line-height: normal;
    }

    .info-customer {
        padding-top: 16px;
    }

    .info-customer figure {
        padding-bottom: 63%;
    }

    .layout-event .featured-thumbnails {
        grid-template-columns: repeat(1, 1fr);
    }

    .layout-event .featured-main-content {
        width: 100%;
        flex: none;
        padding: 16px;
    }

    .layout-event .featured-main {
        height: auto;
    }

    .featured-main-image img {}

    .layout-event .featured-thumbnails .featured-thumb-item {
        padding: 16px 16px 32px;
    }

    .list-event .featured-event-main-item {
        margin-bottom: 16px;
    }

    .archive-category-filter {
        margin-bottom: 16px;
    }

    .single-events .fpt-main-content {
        margin-top: 32px;
        margin-left: 0;
    }

    .single-events .guest-slider .guest-item {
        width: 100% !important;
        text-align: center;
        margin: 0;
    }

    .guest-slider {
        margin-right: 0;
    }

    .guest-slider .flickity-prev-next-button.next {
        right: 0;
    }

    .guest-slider .flickity-prev-next-button.previous {
        left: 0;
    }

    .section-banner .text {
        position: initial !important;
        transform: none;
        background: #fff;
        padding: 16px 16px 64px;
    }

    .section-banner .text h1 {}

    .section-banner .text p {
        font-size: 18px;
        line-height: 24px;
    }

    .section-banner .text blockquote p {
        margin-bottom: 0;
        flex-wrap: wrap;
    }

    .section-banner.tunning-banner .text blockquote p a {
        margin-right: 0;
        margin-bottom: 10px;
        width: 70%;
        text-align: center;
    }

    .section-ai-model {
        align-items: start;
    }

    .section-ai-model h2 {
        text-align: left;
    }

    .section-ai-model .col-inner>p {
        text-align: left;
        font-size: 16px;
        line-height: 22px;
    }

    .section-ai-model .col-inner>p br {
        display: none;
    }

    .section-ai-model .models-grid .model-card {
        width: 50%;
        padding: 24px 12px 12px;
    }

    .model-meta {
        flex-wrap: wrap;
    }

    .model-meta .model-tags {
        max-width: max-content;
        margin-bottom: 12px;
    }

    .models-grid .model-thumbnail img {
        width: 80px;
    }

    .models-grid h3 {
        font-size: 16px;
        height: 51px;
    }

    .models-grid .model-description {
        font-size: 12px;
        -webkit-line-clamp: 3;
    }

    .model-meta .model-try-btn {
        margin-left: auto;
    }

    .section-unique {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .row.row-collapse {
        padding-right: 16px;
        padding-left: 16px;
    }
	
	.row.row-collapse.row-fast{
		width: calc(100% - 32px);
	}
	
	.row-fast .col{
		border: 0;
		border-bottom: 1px solid #D9D9D9;
	}

    .section-benefit ul li a {
        color: #000000;
        font-weight: 600;
    }

    .section-benefit ul li a br {
        display: none;
    }

    .row-light {
        border: 0;
    }

    .row-light .col-inner {
        border: 1px solid #D9D9D9;
        height: 210px;
        padding: 16px;
    }

    .row-light .col:first-child .col-inner {
        border-radius: 8px 8px 0 0;
    }

    .row-light .col-inner h3 {
        font-size: 40px;
        line-height: 42px;
    }

    .row-light .col:last-child .col-inner {
        border: 1px solid #D9D9D9;
        border-radius: 0 0 8px 8px;
    }

    .section-light {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .section-serverless .prd-heading h2 {
        margin-left: 0;
    }

    .section-serverless .serverless-grid .serverless-card {
        width: 100% !important;
        height: auto;
        margin-bottom: 2px;
    }

    .section-serverless .serverless-grid .serverless-card .serverless-excerpt {
        margin-bottom: 12px;
    }

    .section-flex {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .section-flex h2 {
        text-align: left;
    }

    .section-flex .medium-6 {
        margin-bottom: 2px;
    }

    .nf-form-cont .one-half,
    .nf-form-cont .three-sixths,
    .nf-form-cont .two-fourths {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }

    .nf-form-cont .one-sixth {
        margin-left: 0 !important;
    }

    .text-form-contact .nf-form-cont .one-sixth {
        width: 30%;
    }

    .text-form-contact .nf-form-cont .two-sixths {
        width: 67%;
    }

    .text-form-contact .list-checkbox-wrap .nf-field-element li {
        width: 100%;
    }

    .page-template-page-policy .fpt-main-content {
        padding-left: 0;
    }

    .page-template-page-policy .blog-single {
        padding-top: 0;
    }

    .gpu-pricing-header {
        display: none;
    }

    .gpu-item {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .gpu-col-instance,
    .gpu-col-spec,
    .gpu-col-price {
        width: 100%;
        padding: 0;
        border: none;
    }

    .gpu-col-price {
        /* flex-wrap: wrap; */
        flex-direction: row;
        justify-content: space-between;
        padding-top: 16px;
        border-top: 1px solid #eee;
    }

    .gpu-action-box {
        /* margin-left: 0; */
        /* width: 100%; */
    }

    .btn-rent {
        /* width: 100%; */
        margin-right: 0;
    }

    .row-gpu-power {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .row-gpu-power .col {
        width: 243px;
        max-width: none;
        flex: none;
    }

    .row-gpu-power .img-inner {
        padding: 3px;
        width: 120px;
        height: 120px;
        justify-content: center;
        align-items: center;
    }

    .row-gpu-power .img {
        height: 243px;
        width: 243px;
    }

    .row-gpu-power .img img {
        width: 48px;
    }

    .row-gpu-power p {
        font-size: 14px;
        line-height: normal;
    }

    .row-gpu-power p strong {
        /* font-size: 14px; */
    }

    .row-hp .col .col-inner .text {
        height: auto;
    }

    .row-hp .col {
        flex-basis: 100%;
        max-width: 100%;
        padding: 0 16px 16px;
    }

    .row-hp .col:nth-child(even) .col-inner .img {
        order: 0;
    }

    .fpt-main-content {
        max-width: 100%;
    }

    .bottom-home-banner p img {
        width: 80px;
        height: auto;
    }

    .bottom-home-banner p {
        font-size: 14px;
    }

    .fpt-toc-sidebar .widget_media_image {
        display: none;
    }

    .single .rank-math-breadcrumb .last {
        display: none;
    }

    .single .rank-math-breadcrumb .separator {
        width: 10px;
        background-size: 6px;
    }

    .single .rank-math-breadcrumb span.separator:has(+ span.last) {
        display: none;
    }

    .layout-event .date-start {
        width: 50px;
        height: auto;
        padding: 5px;
        line-height: normal;
    }

    .layout-event .date-start strong {
        font-size: 30px;
        line-height: 30px;
    }

    .layout-event .date-start span {
        font-size: 16px;
    }

    .archive-title {
        font-size: 40px;
        margin-bottom: 0;
    }

    .layout-event .event-thumb-time strong {
        font-size: 32px;
        line-height: 1.2;
    }

    .layout-event .event-thumb-time span {
        font-size: 16px;
    }

    .layout-event .event-thumb-time {}

    .feature-post-wrapper {
        margin-bottom: 0;
    }

    .section-work {
        padding-bottom: 0 !important;
    }

    .section-work p {
        margin-bottom: 0;
    }

    .section-work p .btn-header.btn-contact {
        margin-bottom: 10px;
    }

    .section-flex blockquote {
        width: 70px;
        height: 70px;
        margin-bottom: 0;
    }

    .section-ai-model h2,
    .prd-heading h2 {
        text-align: left;
        margin-bottom: 0;
    }

    .section-get-start .prd-heading h2 {
        text-align: center;
    }

    .section-price .prd-heading p,
    .section-global-gpu .prd-heading p,
    .section-price .prd-heading p,
    .section-power .prd-heading p,
    .sec-use-case .prd-heading p,
    .sec-performance .prd-heading p {
        text-align: left;
        font-size: 16px;
    }

    .gpu-filter-tab {
        padding: 8px 10px;
        line-height: normal;
        display: inline-flex;
        align-items: center;
        width: 33.33333%;
        justify-content: center;
    }

    .gpu-tabs {
        width: 100%;
    }

    .gpu-description {
        text-align: left;
    }

    .gpu-price-box {
        /* width: 100%; */
    }

    .footer-bottom {
        padding-bottom: 16px !important;
    }

    .footer-bottom .medium-4 {
        order: 2;
    }

    .col-sitemap .show-for-medium ul {
        margin-top: -1em;
    }

    .section-price {
        padding-top: 0px !important;
    }

    .sec-use-case {
        padding-top: 30px !important;
        padding-bottom: 0 !important;
    }

    .sec-performance {
        padding-bottom: 60px !important;
    }

    .row-hp {
        margin-top: 30px;
    }

    .row-card-stack>.col>.col-inner>.row:nth-child(even) .col:first-child {
        order: 1;
    }

    /* MOBILE MENU - Mega dropdown mặc định ẩn, chỉ hiện khi Flatsome active */
    .off-canvas .mega-dropdown {
        width: 100%;
        display: none !important;
    }

    /* Hiện mega-dropdown khi parent li có class active từ Flatsome */
    .off-canvas li.current-dropdown .mega-dropdown,
    .off-canvas li.nav-dropdown-open .mega-dropdown,
    .off-canvas li.active .mega-dropdown {
        display: block !important;
    }

    /* Ẩn SVG NGOẠI TRỪ dropdown-arrow và mega-arrow */
    .off-canvas:not(.off-canvas-center) .nav-vertical li>a svg:not(.dropdown-arrow):not(.mega-arrow) {
        display: none;
    }

    /* Ẩn dropdown-arrow trên mobile menu cấp 1 vì đã có toggle button */
    /* Chỉ ẩn cho menu cấp 1, giữ mega-arrow cho menu cấp 2 */
    .off-canvas .nav-vertical>li>a .dropdown-arrow {
        display: none !important;
    }

    .header-block .custom-language-switcher {
        display: none;
    }

    .nav-vertical>li.header-block {
        padding: 20px;
    }

    .fpt-post-meta-header .social-share-buttons {
        display: none;
    }

    /* ========================================================================
       MENU CẤP 1 - COLLAPSE/EXPAND SUB-MENU
       Xử lý toggle cho menu cấp 1 (không phải mega menu)
       ======================================================================== */

    /* Sub-menu mặc định đóng */
    .off-canvas .nav-sidebar>li.menu-item-has-children>.sub-menu,
    .off-canvas .nav-sidebar>li.menu-item-has-children>.mega-dropdown {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Mở sub-menu khi menu-expanded */
    .off-canvas .nav-sidebar>li.menu-item-has-children.menu-expanded>.sub-menu,
    .off-canvas .nav-sidebar>li.menu-item-has-children.menu-expanded>.mega-dropdown {
        max-height: 2000px;
    }

    /* Toggle icon cho menu cấp 1 */
    .off-canvas .nav-sidebar>li.menu-item-has-children>.toggle i,
    .off-canvas .nav-sidebar>li.menu-item-has-children>.toggle i::before {
        transition: transform 0.3s ease !important;
        display: inline-block !important;
        transform: rotate(0deg) !important;
    }

    /* Xoay toggle icon khi menu expanded */
    .off-canvas .nav-sidebar>li.menu-item-has-children.menu-expanded>.toggle i,
    .off-canvas .nav-sidebar>li.menu-item-has-children.menu-expanded>.toggle i::before {
        transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(180deg) !important;
        -ms-transform: rotate(180deg) !important;
    }

    .section-role{
        padding-top: 80px !important;
        padding-bottom: 10px !important;
    }
        .section-finetune .prd-heading h2{
        margin-bottom: 10px;
    }
        .section-finetune .prd-heading p{
        text-align: left;
    }

    .fpt-main-content .entry-content h2 {
        font-size: 28px;
        line-height: normal;
    }

    .fpt-main-content .entry-content h3 {
        font-size: 22px;
    }

    .fpt-main-content .entry-content h4 {
        font-size: 18px;
    }

    .finetune-nav-buttons{
        margin-top: 20px;
        position: initial;
    }
    .finetune-nav-btn{
        position: initial;
    }

    .sec-faq .accordion-title{
        padding: 10px 15px;
    }
    .sec-faq .accordion-title button{
    right: 15px;
}
    .sec-faq .accordion-inner{
    margin-top: 0;
    padding: 0 15px 10px;
}
    .sec-faq .accordion-title span{
    font-size: 18px;
}
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    .ninja-form-popup-content {
        max-width: 90%;
        min-height: auto;
        padding: 40px 30px;
    }

    .ninja-form-popup-message p {
        font-size: 20px;
    }

    .ninja-form-popup-ok {
        padding: 10px 40px;
        font-size: 14px;
    }

    .ninja-form-popup-close {
        top: 15px;
        right: 15px;
        font-size: 16px;
        width: 26px;
        height: 26px;
    }
}

@media screen and (max-width: 480px) {
    .ninja-form-popup-content {
        padding: 30px 20px;
    }

    .ninja-form-popup-message {
        margin-bottom: 30px;
    }

    .ninja-form-popup-message p {
        font-size: 18px;
    }

    .ninja-form-popup-ok {
        padding: 10px 30px;
    }
}

/* ========================================================================
   MENU - ẨN TOGGLE BUTTON TRÊN DESKTOP
   Toggle button chỉ dành cho mobile (off-canvas), trên PC dùng hover
   CHỈ ẩn toggle trong desktop header, KHÔNG ẩn trong off-canvas
   ======================================================================== */

/* Ẩn toggle button trong DESKTOP HEADER (không phải off-canvas) */
@media (min-width: 850px) {

    .header .nav>li>.toggle,
    .header-main .nav>li>.toggle,
    .header-wrapper .nav>li>.toggle {
        display: none !important;
    }

    /* KHÔNG ẩn toggle trong off-canvas (để debug mobile) */
    /* .off-canvas .nav > li > .toggle sẽ vẫn hiện nếu có */
}

/* ========================================================================
   MOBILE MENU - COLLAPSE MEGA CHILD LIST (CẤP 2 ONLY)
   Chỉ áp dụng trên mobile (< 850px)
   CHỈ target menu cấp 2 TRONG .mega-dropdown
   KHÔNG ảnh hưởng menu cấp 1 của Flatsome
   ======================================================================== */

@media (max-width: 849px) {

    /* Mega parent item CẤP 2 có children */
    /* CHỈ target items TRONG .mega-dropdown */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children {
        position: relative;
        margin-bottom: 8px;
    }

    .nav-vertical li li.menu-item-has-children:not(:first-child) {
        margin-top: 8px;
    }

    .nav.nav-vertical li {
        margin-top: 8px;
    }

    .off-canvas .nav-vertical li li>a {
        color: #000;
    }

    /* Link của mega-parent-item - chừa chỗ cho toggle button */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children>a {
        padding-right: 60px !important;
        /* Chừa chỗ cho toggle button */
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    /* ẨN mega-arrow SVG trên mobile (vì đã có toggle button) */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children .mega-arrow {
        display: none !important;
    }

    /* HIỆN toggle button cho mega parent items CẤP 2 */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children>.toggle {
        display: flex !important;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: currentColor;
        z-index: 10;
        outline: none;
        align-items: center;
        justify-content: center;
        min-height: auto;
    }

    /* Icon transition - tăng specificity */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children>.toggle i,
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children>.toggle i.icon-angle-down,
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children>.toggle i::before {
        transition: transform 0.3s ease !important;
        display: inline-block !important;
        transform: rotate(0deg) !important;
    }

    /* Xoay toggle icon khi mở - tăng specificity và force rotation */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded>.toggle i,
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded>.toggle i.icon-angle-down,
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded>.toggle i::before {
        transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
        -moz-transform: rotate(180deg) !important;
        -ms-transform: rotate(180deg) !important;
    }

    /* Mega child list CẤP 3 - mặc định đóng */
    /* CHỈ target mega-child-list TRONG .mega-dropdown */
    .off-canvas .mega-dropdown .mega-child-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding-left: 16px;
        width: 100%;
    }

    /* Mở mega child list khi parent mega-expanded */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-list {
        max-height: 2000px;
        /* Đủ lớn để chứa tất cả items */
        margin-top: 8px;
    }

    /* Style cho mega child items */
    .off-canvas .mega-dropdown .mega-child-item {
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        margin-bottom: 1rem;
    }

    /* Hiển thị child items khi parent mega-expanded */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item {
        opacity: 1;
        transform: translateX(0);
    }

    /* Delay animation cho từng item (stagger effect) - tự động tính cho tất cả items */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item {
        transition-delay: calc(var(--item-index, 0) * 0.05s);
    }

    /* Fallback: set delay cho 10 items đầu tiên nếu browser không support CSS variables */
    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(1) {
        transition-delay: 0.05s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(2) {
        transition-delay: 0.1s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(3) {
        transition-delay: 0.15s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(4) {
        transition-delay: 0.2s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(5) {
        transition-delay: 0.25s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(6) {
        transition-delay: 0.3s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(7) {
        transition-delay: 0.35s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(8) {
        transition-delay: 0.4s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(9) {
        transition-delay: 0.45s;
    }

    .off-canvas .mega-dropdown .mega-parent-item.has-mega-children.mega-expanded .mega-child-item:nth-child(10) {
        transition-delay: 0.5s;
    }

    /* Section Finetune - Mobile: Ẩn full-ai-text và hiển thị title trong text-quote */
    .section-finetune .full-ai-text {
        display: none;
    }

    .section-finetune .text-quote .mobile-title {
        color: #000;
        font-size: 16px;
        font-weight: 600;
        text-align: left;
    }

    /* Finetune navigation buttons - Ẩn trên mobile */
    .finetune-nav-buttons {
        /* display: none; */
    }

}