:root {
    --dpv-navy: #061a3d;
    --dpv-dark: #020b1d;
    --dpv-blue: #0a56c7;
    --dpv-cyan: #22c7ff;
    --dpv-gold: #ffc83d;
    --dpv-orange: #ff7b22;
    --dpv-light: #f5f8ff;
    --dpv-muted: #d6e6ff;
    --dpv-border: rgba(255,255,255,.16);
    --dpv-shadow: 0 28px 90px rgba(0,0,0,.32);
    --bs-primary: var(--dpv-blue);
    --bs-warning: var(--dpv-gold);
    --bs-body-font-family: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 86px
}

body {
    background: var(--dpv-dark);
    color: #fff;
    overflow-x: hidden
}

a {
    text-decoration: none
}

.text-gold {
    color: var(--dpv-gold) !important
}

.text-cyan {
    color: var(--dpv-cyan) !important
}

.text-soft {
    color: var(--dpv-muted) !important
}

.bg-soft {
    background: var(--dpv-light)
}

.pdt10 {
    padding-top: 10px !important;
}

.navbar-glass {
    background: #222 url(/images/icon/pattern-brick.png) repeat top left;
    /*border-bottom: 1px solid var(--dpv-border)*/
    border-bottom: 3px solid #FFC904;
}

.logo img {
    max-height: 46px;
}
.logo p {
    margin: 0;
    color: #f9f111;
    font-size: 13px;
}

.opacity-10 {opacity:0.1;}
.line1, .line2, .line3, .line4 {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.line2 {
    -webkit-line-clamp: 2;
}
.line3 {
    -webkit-line-clamp: 3;
}

.img4x3 {
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
    display:block;
}

    .img4x3 img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.navbar .nav-link {
    color: #dceaff;
    font-weight: 700;
    font-size: .95rem;
    padding: .65rem .85rem !important;
    border-radius: 999px
}

    .navbar .nav-link:hover, .navbar .nav-link.active {
        color: #fff;
        background: rgba(255,255,255,.08)
    }

.btn-dpv {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-border-radius: 999px;
    --bs-btn-font-weight: 700;
    background: linear-gradient(135deg,var(--dpv-gold),#ff9b1a);
    border: 0;
    color: #06132d;
    box-shadow: 0 14px 36px rgba(255,200,61,.26)
}

    .btn-dpv:hover {
        transform: translateY(-2px);
        color: #06132d;
        box-shadow: 0 20px 48px rgba(255,200,61,.36)
    }

.btn-glass {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .82rem;
    --bs-btn-border-radius: 999px;
    --bs-btn-font-weight: 700;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.24);
    color: #fff
}

    .btn-glass:hover {
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.38);
        color: #fff;
        transform: translateY(-2px)
    }

.hero {
    position: relative;
    min-height: calc(100vh - 74px);
    display: flex;
    align-items: center;
    padding: 92px 0 58px;
    background: radial-gradient(circle at 80% 12%,rgba(34,199,255,.28),transparent 30%),radial-gradient(circle at 18% 85%,rgba(10,86,199,.48),transparent 36%),linear-gradient(135deg,#031128 0%,#072f79 55%,#020b1d 100%);
    overflow: hidden
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom,#000 0%,rgba(0,0,0,.78) 58%,transparent 100%)
    }

    .hero::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -180px;
        transform: translateX(-50%);
        width: 980px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(34,199,255,.32),transparent 64%);
        filter: blur(4px)
    }

.hero-content {
    position: relative;
    z-index: 1
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: rgba(34,199,255,.12);
    border: 1px solid rgba(34,199,255,.34);
    color: #c9f5ff;
    font-weight: 700;
    font-size: .92rem
}

.display-hero {
    font-size: clamp(2.6rem,6vw,5.75rem);
    line-height: .98;
    letter-spacing: -.065em;
    font-weight: 700;
    text-transform: uppercase
}

.gradient-text {
    background: linear-gradient(180deg,#fff,#8fe3ff 46%,#fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 34px rgba(34,199,255,.25)
}

.hero-lead {
    font-size: clamp(1.05rem,1.7vw,1.25rem);
    color: var(--dpv-muted);
    max-width: 690px
}

.glass-card {
    background: rgba(255,255,255,.08);
    border: 1px solid var(--dpv-border);
    box-shadow: var(--dpv-shadow);
    backdrop-filter: blur(16px)
}

.event-pill {
    border-radius: 22px;
    padding: 1rem;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    height: 100%
}

    .event-pill small {
        display: block;
        color: #b7cdf4;
        font-weight: 700
    }

    .event-pill strong {
        font-size: 1.25rem;
        color: var(--dpv-gold)
    }

.poster-wrap {
    position: relative;
    border-radius: 32px;
    padding: 1rem;
    background: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.045));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: var(--dpv-shadow)
}

.poster-img {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    background: #061a3d
}
    .poster-img img {width:100% !important; height:auto !important}

.booth-badge {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    background: linear-gradient(135deg,var(--dpv-gold),#ff9b1a);
    color: #07142d;
    border-radius: 18px;
    padding: .65rem 1rem;
    font-size: clamp(1.3rem,3vw,2rem);
    font-weight: 700;
    box-shadow: 0 16px 34px rgba(0,0,0,.32)
}

.trust-row {
    margin-top: 1.5rem;
    color: #cfe5ff;
    font-size: .95rem
}

    .trust-row span {
        display: inline-flex;
        gap: .45rem;
        align-items: center;
        margin-right: 1rem;
        margin-bottom: .5rem
    }

.section {
    padding: 86px 0
}

.section-dark {
    background: linear-gradient(180deg,#020b1d,#061a3d)
}

.section-light {
    background: var(--dpv-light);
    color: #0b1c3d
}

.section-title {
    font-size: clamp(2rem,4vw,3.35rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    /*font-weight: 700*/
}

.section-lead {
    font-size: 1.08rem;
}

.section-dark .section-lead {
    color: var(--dpv-muted)
}

.section-light .section-lead {
    color: #bbb
}

.feature-card {
    height: 100%;
    border-radius: 28px;
    padding: 1.55rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    transition: .22s;
    position: relative;
    overflow: hidden
}

    .feature-card:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,.11)
    }

.feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg,var(--dpv-cyan),var(--dpv-blue));
    display: grid;
    place-items: center;
    font-size: 1.65rem;
    box-shadow: 0 12px 34px rgba(34,199,255,.25);
    margin-bottom: 1rem
}

.feature-card p {
    color: #d6e6ff;
    margin: 0
}

.feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700
}

.carousel-indicators {
    margin-bottom: 0;
}
    .carousel-item {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 67%;
        overflow: hidden;
    }
    .carousel-item img {position:absolute; max-width:100%;max-height:100%;object-fit:contain;}

    .product-card {
        height: 100%;
        border: 1px solid #e0e8f5;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 20px 50px rgba(13,55,120,.08);
        transition: .22s;
        overflow: hidden;
        position: relative
    }

    .product-card::after {
        content: "";
        position: absolute;
        right: -42px;
        top: -42px;
        width: 126px;
        height: 126px;
        border-radius: 50%;
        background: rgba(10,86,199,.07)
    }

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 70px rgba(13,55,120,.14)
    }

    .product-card .card-body {
        position: relative;
        z-index: 1;
        padding: 1.35rem
    }

.product-tag {
    display: inline-flex;
    border-radius: 999px;
    background: #eaf4ff;
    color: #0a56c7;
    font-size: .76rem;
    font-weight: 700;
    padding: .35rem .68rem;
    margin-bottom: .75rem
}

.product-card h3 {
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 700
}

.product-card p {
    font-size: .92rem;
    color: #52617a;
}

.info-card {
    border-radius: 28px;
    padding: 1.45rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    height: 100%
}

.info-number {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dpv-gold);
    color: #06132d;
    display: grid;
    place-items: center;
    font-weight: 700;
    flex: 0 0 auto
}

.cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: clamp(1.6rem,4vw,3rem);
    background: linear-gradient(135deg,#082e78,#0a56c7 50%,#031128);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: var(--dpv-shadow);
    color: #fff
}

    .cta-panel::after {
        content: "";
        position: absolute;
        right: -90px;
        bottom: -90px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(255,200,61,.22)
    }

    .cta-panel > * {
        position: relative;
        z-index: 1
    }

.form-control, .form-select {
    border-radius: 16px;
    border: 1px solid #dce5f3;
    padding: .85rem 1rem
}

    .form-control:focus, .form-select:focus {
        border-color: var(--dpv-blue);
        box-shadow: 0 0 0 .22rem rgba(10,86,199,.13)
    }

.accordion {
    --bs-accordion-border-color: #dce5f3;
    --bs-accordion-border-radius: 22px;
    --bs-accordion-inner-border-radius: 22px;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(10,86,199,.12);
    --bs-accordion-active-bg: #eaf4ff;
    --bs-accordion-active-color: #0a56c7
}

.accordion-item {
    border-radius: 22px !important;
    overflow: hidden;
    margin-bottom: .85rem
}

.accordion-button {
    font-weight: 700
}

.footer {
    background: #020814;
    color: #b9c9e8;
    padding-top: 40px;
    font-size:14px;
    text-align:center;
}

    .footer a {
        color: #fff
    }

    .footer .brand-title {
        color: var(--dpv-gold);
        font-weight: 700
    }

@media (max-width:991.98px) {
    .hero {
        min-height: auto;
        padding-top: 70px
    }

    .poster-wrap {
        margin-top: 2rem
    }

    .navbar-collapse {
        padding-top: 1rem
    }

    .navbar .nav-link {
        border-radius: 14px
    }

    .booth-badge {
        position: static;
        display: inline-flex;
        margin-top: .85rem
    }

    .floating-actions {
        right: 12px;
        bottom: 12px
    }

        .floating-actions .btn span {
            display: none
        }
}

#backToTop {
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #DD0000;
    border: 0;
    border-radius: 10px;
    bottom: 100px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .1), 0 2px 6px 2px rgba(60, 64, 67, .15);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 45px;
    justify-content: center;
    padding: 2px;
    position: fixed;
    right: 5px;
    text-decoration: none;
    width: 45px;
    z-index: 100;
}

    #backToTop .icon-up {
        width: 15px;
        height: 15px;
        margin: 0 auto 5px;
    }

        #backToTop .icon-up svg {
            fill: #fff;
            font-weight: 600
        }

#backToTop strong {font-size:10px;color:#fff;}

.contact-widget {
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 111;
}

    .contact-widget > .widget {
        display: block;
        left: 0;
        transition: left .5s ease;
        border-radius: 10px 0 0 10px !important;
        width: 45px !important;
        height: 45px !important;
        margin: 3px !important;
        background-size: contain !important;
        position: relative;
        cursor: pointer;
        text-align: center;
        background-repeat: no-repeat;
        background-position: center left;
    }

        .contact-widget > .widget:hover {
            left: -70px;
            width: auto
        }

        .contact-widget > .widget .text {
            line-height: 45px !important;
            left: 44px !important;
            position: absolute;
            white-space: nowrap;
            color: #fff;
            padding: 0 10px 0 8px;
            text-align: right;
        }

.widget-hotline-2 {
    border-radius: 10px 0 0 10px !important;
    background-image: url(/images/icon/chat.svg), linear-gradient( 179.83deg,#8ad336 .15%,#509600 92.02%);
}

    .widget-hotline-2 .text {
        background-image: linear-gradient( 179.83deg,#8ad336 .15%,#509600 92.02%);
    }

.widget-hotline {
    background-image: url(/images/icon/widget_icon_click_to_call_square.svg), linear-gradient( 179.83deg,#8ad336 .15%,#509600 92.02%);
}

    .widget-hotline .text {
        background-image: linear-gradient( 179.83deg,#8ad336 .15%,#509600 92.02%);
    }

.widget-inbox {
    background-image: url(/images/icon/widget_icon_youtube.svg),linear-gradient( 180deg,#d42428 0%,#cc202d 100%);
}

    .widget-inbox .text {
        background-image: linear-gradient( 180deg,#d42428 0%,#cc202d 100%);
    }

.widget-message {
    background-image: url(/images/icon/widget_icon_messenger_square.svg),linear-gradient( 0deg,#1d77e2 1.46%,#2cb7ff 99.03%);
}

    .widget-message .text {
        background-image: linear-gradient( 0deg,#1d77e2 1.46%,#2cb7ff 99.03%);
    }

.widget-zalo {
    background-image: url(/images/icon/widget_icon_zalo_square.svg),linear-gradient( 180deg,#3a8bff 0%,#035ada 100%);
}

    .widget-zalo .text {
        background-image: linear-gradient( 180deg,#3a8bff 0%,#035ada 100%);
    }

.widget-address {
    background-image: url(/images/icon/widget_icon_map_square.svg),linear-gradient( 180deg,#07d8f8 0%,#00a0d2 100%);
}

    .widget-address .text {
        background-image: linear-gradient( 180deg,#07d8f8 0%,#00a0d2 100%);
    }

.contact-widget > .widget-zalo:hover {
    left: -43px;
}

.contact-widget > .widget-address:hover {
    left: -83px;
}

@media(max-width:767px) {
    .contact-widget {
        top: initial;
        bottom: 10px;
        width: 100%;
        text-align: center
    }

        .contact-widget > .widget {
            display: inline-block;
            border-radius: 10px !important;
            margin: 0 4px !important;
        }

            .contact-widget > .widget .text {
                display: none;
            }

            .contact-widget > .widget:hover {
                left: unset !important
            }

    .widget-hotline-2 {
        display: inline-block !important;
    }

    .copy {
        padding-bottom: 70px !important
    }

    .alo-phone, .alo-phone.alo-red {
        display: none !important;
    }
}

.citys {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}

.citys-head {
    text-align: center;
    width: 100%;
}

    .citys-head .h3 {
        margin-bottom:0; 
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
    }

    .citys-head .desc {
        font-size: 14px;
        margin:0;
    }

.city {
    margin-bottom: 13px;
}

.city-name {
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    color: #be0000;
    text-align: center;
    margin-bottom: 10px;
}

.city-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

    .city-body .call {
        width: calc(100% / 2 - 10px);
        background: #00804A;
        color: #fff;
        padding: 5px;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        text-decoration: none;
        transition: all ease 0.3s
    }

        .city-body .call:hover {
            background: #005833;
        }



        .city-body .call .info {
            display: flex;
            flex-direction: column;
            margin: auto 15px;
            font-size: 16px;
        }

        .city-body .call .avatar {
            width: 60px;
            border: 2px solid rgba(255,255,255,0.5);
            border-radius: 8px;
            transition: all ease 0.3s
        }

        .city-body .call:hover .avatar {
            border: 2px solid rgba(255,255,255,0.9);
        }

.showrooms {
    display: inline-block !important;
    padding-bottom: 30px;
}

    .showrooms:before {
        content: "";
        display: block;
        background: #ccc;
        z-index: -1;
        position: absolute;
        left: calc(50% - 50vw);
        right: calc(50% - 50vw);
        top: 0;
        height: 1px;
    }

.modal-header .title {
    line-height: 1.4 !important;
    padding: 0;
    position: relative;
    font-size:25px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0;
    width:100%;
}

    .showrooms .showroom {
        margin-bottom: 20px;
    }

        .showrooms .showroom .titH4 {
            line-height: 28px !important;
            font-size: 17px !important;
            margin-top: 0;
        }

    .showrooms .showroom {
        margin: 0 10px 20px 10px;
        width: calc(100% / 5 - 20px);
        float: left;
        background: #fff;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
        min-height: 356px;
    }

        .showrooms .showroom .name {
            line-height: 22px !important;
            font-size: 16px !important;
            margin-top: 0;
            font-weight: 700;
            margin-bottom: 15px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .showrooms .showroom .thumbs {
            width: 100%;
            margin-bottom: 15px;
            border: 2px solid #029b43;
            box-shadow: -1px 3px 3px 0 #ccc
        }


        .showrooms .showroom p * {
            font-size: 14px !important
        }

        .showrooms .showroom p:nth-child(4) strong {
            color: #E5322D
        }

        .showrooms .showroom p:nth-child(5) strong {
            color: #E5322D
        }

    .showrooms .showroom2 {
        padding-top: 20px;
        min-height: 150px !important;
        margin-bottom:0;
    }

        .showrooms .showroom2 p:nth-child(2) strong {
            color: #E5322D
        }

        .showrooms .showroom2 p:nth-child(3) strong {
            color: #E5322D
        }


    .showrooms .showroom .number {
        background: #dd1015;
        display: inline-block;
        width: 25px;
        height: 20px;
        color: #fff;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        font-weight: 700;
        border-radius: 4px;
        -moz-border-radius: 4px;
        box-shadow: -3px 3px 3px 0 #ccc;
        float: left;
        margin-right: 10px;
        vertical-align: middle
    }

@media (max-width:768px) {
    .header .logo {
        margin-bottom: 8px;
        position: relative !important;
    }

    .showrooms .showroom {
        width: calc(100% - 20px);
    }
}

@media (prefers-reduced-motion:no-preference) {
    .reveal {
        animation: fadeUp .7s ease both
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(18px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }
}