/********** Template CSS **********/
:root {
    --primary: #FDAC53;
    --secondary: #5F6368;       /* was #9B9B9B, too light to read on white */
    --text: #5F6368;            /* body text on white or light grey: 6.0 to 1 */
    --text-on-dark: #9B9B9B;    /* text on the dark topbar and footer, the grey of the live site */
    /* The brand yellow is used for accent text and with white text on buttons, exactly as on the live
       site (owner's decision). Change these two values to adjust every accent text or button label at once. */
    --accent-text: var(--primary);
    --on-accent: #FFFFFF;
    --light: #F5F5F5;
    --dark: #161616;
    --float-bottom: 45px; /* khoảng cách mép dưới: chat (Zalo/Messenger) và back-to-top bằng nhau */
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-black {
    font-weight: 900 !important;
}

/* Hidden until the page is scrolled (site.js adds .is-visible). The button classes set display,
   so it is hidden with visibility and opacity, which also gives a fade. */
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility .3s;
    right: 45px;
    bottom: var(--float-bottom);
    z-index: 99;
}

.back-to-top.is-visible {
    visibility: visible;
    opacity: .92;
}

/*** Floating chat buttons (Zalo/Messenger) ***/
.chat-float {
    position: fixed;
    bottom: var(--float-bottom);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0; /* 2 icon sát nhau */
}

.chat-float--left { left: 45px; }

/* Nút Zalo (pulse/ring + icon) - nằm trong chat-float bên trái */
.zalo-container {
    position: relative;
    width: 80px;
    height: 80px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* căn icon xuống đáy để đáy trùng back-to-top */
}

#zalo-btn {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
    text-align: center;
    text-decoration: none;
}

#zalo-btn span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Icon chung Zalo + Messenger (cùng kích thước 40x40) */
.chat-float-icon {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
}

#zalo-btn img.chat-float-icon {
    width: 40px;
    height: 40px;
}

/* Hiệu ứng vòng tròn pulse/ring Zalo (màu giống Messenger #0084ff) - cùng thời gian với Messenger */
.cmoz-alo-circle {
    border: 2px solid #0084ff;
    border-radius: 50%;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: zoomIn_zalo 1.5s infinite ease-in-out;
    animation-delay: 0s;
    opacity: 0.1;
}

.cmoz-alo-circle-fill {
    border: 1px solid #0084ff;
    background-color: #0084ff;
    border-radius: 50%;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.75;
    animation: pulse_zalo 1.5s infinite ease-in-out;
    animation-delay: 0s;
}

@keyframes zoomIn_zalo {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.1;
    }
}

@keyframes pulse_zalo {
    0% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Messenger: cùng kích thước + hiệu ứng pulse/ring như Zalo, sát Zalo */
.messenger-container {
    position: relative;
    width: 80px;
    height: 80px;
    z-index: 1;
    margin-top: 0; /* kéo sát vào Zalo (bù khoảng trống 2 ô 80px) */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* căn icon xuống đáy để đáy trùng back-to-top */
}

#messenger-btn {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

#messenger-btn span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#messenger-btn .chat-float-icon {
    width: 40px;
    height: 40px;
}

/* Hiệu ứng pulse/ring Messenger (màu #0084ff) - cùng duration & delay với Zalo để đồng bộ */
.cmoz-alo-circle--messenger {
    border-color: #0084ff;
    animation: zoomIn_zalo 1.5s infinite ease-in-out;
    animation-delay: 0s;
}

.cmoz-alo-circle-fill--messenger {
    border-color: #0084ff;
    background-color: #0084ff;
    animation: pulse_zalo 1.5s infinite ease-in-out;
    animation-delay: 0s;
}

/* Zalo OA widget: ép vị trí nằm trên các nút (bên trái) */
.zalo-chat-widget {
    left: 45px !important;
    right: auto !important;
    bottom: calc(var(--float-bottom) + 80px) !important; /* float-bottom + 1 nút 80px */
    z-index: 999 !important;
}


@media (max-width: 576px) {
    :root {
        --float-bottom: 30px;
    }
    .chat-float--left { left: 18px; }
    .zalo-chat-widget {
        left: 18px !important;
        right: auto !important;
        bottom: calc(var(--float-bottom) + 80px) !important;
    }
    .back-to-top {
        right: 18px;
    }
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

    #spinner.show {
        transition: opacity .5s ease-out, visibility 0s linear 0s;
        visibility: visible;
        opacity: 1;
    }


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

    .btn.btn-primary {
        color: var(--on-accent);
    }

    .btn.btn-primary:focus,
    .btn.btn-primary:active {
        background-color: #F5C97A !important;
        border-color: #F5C97A !important;
        box-shadow: 0 0 0 0.25rem rgba(253, 172, 83, 0.25) !important;
    }

    .btn.btn-primary:hover {
        background-color: #F5C97A !important;
        border-color: #F5C97A !important;
    }

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

/* Navbar shadow và border để phân biệt rõ hơn */
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navbar .navbar-brand {
    height: 75px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 500;
    outline: none;
}

    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link.active {
        color: var(--primary);
    }

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
        background-color: #fff;
    }

    /* The last menu opens towards the left, so it never reaches past the edge of the page */
    .navbar .nav-item .dropdown-menu.dropdown-menu-end {
        right: 0;
        left: auto;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

.navbar .btn:hover {
    color: #FFFFFF !important;
    background: var(--primary) !important;
}


/*** Header ***/
.header-carousel .carousel-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background: rgba(22, 22, 22, .7);
}

/* Carousel Image Styling - Ensure all images have same frame size */
.header-carousel .owl-carousel-item {
    position: relative;
    height: 600px;
    overflow: hidden;
}

.header-carousel .owl-carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        height: 500px;
    }

    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

        .header-carousel .owl-carousel-item h5,
        .header-carousel .owl-carousel-item p {
            font-size: 14px !important;
            font-weight: 400 !important;
        }

        .header-carousel .owl-carousel-item h1 {
            font-size: 30px;
            font-weight: 600;
        }
}

.header-carousel .owl-nav {
    position: absolute;
    width: 200px;
    height: 45px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}

    .header-carousel .owl-nav .owl-prev,
    .header-carousel .owl-nav .owl-next {
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        background: transparent;
        border: 1px solid #FFFFFF;
        border-radius: 45px;
        font-size: 22px;
        transition: .5s;
    }

        .header-carousel .owl-nav .owl-prev:hover,
        .header-carousel .owl-nav .owl-next:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

.header-carousel .owl-dots {
    position: absolute;
    height: 45px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 15px;
    transition: .5s;
}

    .header-carousel .owl-dot::after {
        position: absolute;
        content: "";
        width: 5px;
        height: 5px;
        top: 4px;
        left: 4px;
        background: #FFFFFF;
        border-radius: 5px;
    }

    .header-carousel .owl-dot.active {
        background: var(--primary);
        border-color: var(--primary);
    }

.page-header {
    background: linear-gradient(rgba(22, 22, 22, .7), rgba(22, 22, 22, .7)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** About ***/
@media (min-width: 992px) {
    .container.about {
        max-width: 100% !important;
    }

    .about-text {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .about-text {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .about-text {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Service ***/
.service-row {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.service-item {
    border-color: rgba(0, 0, 0, .03) !important;
}

    .service-item .btn {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        color: #FFFFFF;
        background: var(--primary);
        border-radius: 38px;
        white-space: nowrap;
        overflow: hidden;
        transition: .5s;
    }

    .service-item:hover .btn {
        width: 140px;
    }


/*** Feature ***/
@media (min-width: 992px) {
    .container.feature {
        max-width: 100% !important;
    }

    .feature-text {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .feature-text {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .feature-text {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Product Portfolio ***/
#portfolio-flters li {
    display: inline-block;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
}

    #portfolio-flters li:hover,
    #portfolio-flters li.active {
        color: var(--primary);
        border-color: var(--primary);
    }

.portfolio-inner {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

    .portfolio-inner img {
        transition: .5s;
    }

    .portfolio-inner:hover img {
        transform: scale(1.1);
    }

    .portfolio-inner .portfolio-text {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: -50px;
        opacity: 0;
        transition: .5s;
    }

    .portfolio-inner:hover .portfolio-text {
        bottom: 0;
        opacity: 1;
    }


/*** Quote ***/
@media (min-width: 992px) {
    .container.quote {
        max-width: 100% !important;
    }

    .quote-text {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .quote-text {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .quote-text {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Team ***/
.team-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

    .team-item img {
        transition: .5s;
    }

    .team-item:hover img {
        transform: scale(1.1);
    }

    .team-item .team-social {
        position: absolute;
        width: 0;
        height: 0;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(22, 22, 22, .7);
        opacity: 0;
        transition: .5s;
    }

    .team-item:hover .team-social {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 1;
    }

    .team-item .team-social .btn {
        opacity: 0;
    }

    .team-item:hover .team-social .btn {
        opacity: 1;
    }


/*** Testimonial ***/
.testimonial-carousel {
    display: flex !important;
    flex-direction: column-reverse;
    max-width: 700px;
    margin: 0 auto;
}

    .testimonial-carousel .owl-dots {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }

        .testimonial-carousel .owl-dots .owl-dot {
            position: relative;
            width: 60px;
            height: 60px;
            margin: 0 5px;
            transition: .5s;
        }

            .testimonial-carousel .owl-dots .owl-dot.active {
                width: 100px;
                height: 100px;
            }

            .testimonial-carousel .owl-dots .owl-dot::after {
                position: absolute;
                width: 40px;
                height: 40px;
                bottom: -20px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                content: "\f10d";
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                color: var(--primary);
                background: #FFFFFF;
                border-radius: 40px;
                transition: .5s;
                opacity: 0;
            }

            .testimonial-carousel .owl-dots .owl-dot.active::after {
                opacity: 1;
            }

            .testimonial-carousel .owl-dots .owl-dot img {
                border-radius: 60px;
                opacity: .4;
                transition: .5s;
            }

            .testimonial-carousel .owl-dots .owl-dot.active img {
                opacity: 1;
            }


/*** Contact ***/
@media (min-width: 992px) {
    .container.contact {
        max-width: 100% !important;
    }

    .contact-text {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .contact-text {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .contact-text {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--text-on-dark);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

    .footer .btn.btn-link::before {
        position: relative;
        content: "\f105";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right: 10px;
    }

    .footer .btn.btn-link:hover {
        color: var(--primary);
        letter-spacing: 1px;
        box-shadow: none;
    }


/*** Form Input Focus - Yellow Theme ***/
.form-control:focus {
    border-color: #F5C97A !important;
    box-shadow: 0 0 0 0.25rem rgba(253, 172, 83, 0.25) !important;
    outline: 0;
}

.form-control:active {
    border-color: #F5C97A !important;
}


/*** Colours ***
 Body text uses a darker grey than the template (--text) so it reads well on white.
 Accent text and button labels follow --accent-text and --on-accent, set at the top of this file. */
body {
    color: var(--text);
}

.text-secondary,
.text-muted {
    color: var(--text) !important;
}

/* Accent text */
.text-primary,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--accent-text) !important;
}

/* Dark areas (topbar, footer): the darker body grey would be unreadable there */
.bg-dark,
.footer,
.copyright {
    color: var(--text-on-dark);
}

    .bg-dark.text-secondary,
    .footer.text-secondary,
    .bg-dark .text-secondary,
    .bg-dark .text-muted,
    .footer .text-secondary {
        color: var(--text-on-dark) !important;
    }

/* Labels on the brand colour */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active {
    color: var(--on-accent) !important;
}

.badge.bg-secondary {
    background-color: var(--text) !important;
}

.btn-outline-primary {
    color: var(--accent-text);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        color: var(--on-accent);
    }

/* Keyboard users see where they are */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1A73E8 !important;
    outline-offset: 2px;
}

/*** Header carousel: keeps its place before the script starts ***
 Without this the carousel is hidden until Owl Carousel runs, and the page jumps down by its height. */
.header-carousel {
    display: block;
    height: 600px;
    overflow: hidden;
}

    .header-carousel:not(.owl-loaded) > .owl-carousel-item:not(:first-child) {
        display: none;
    }

@media (max-width: 768px) {
    .header-carousel {
        height: 500px;
    }
}

/*** Small screens ***/
.intro-text {
    text-align: justify;
}

.footer .btn.btn-link {
    padding: 6px 0;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    /* A long justified paragraph in a narrow column leaves uneven gaps: left-aligned and shortened,
       the full text is one tap away on the About page */
    .intro-text {
        text-align: left;
        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .back-to-top {
        right: 16px;
        width: 40px;
        height: 40px;
    }

    /* Team: two members per row with a shorter photo, half the scrolling */
    .team-item img {
        height: 190px !important;
    }

    .team-item .p-4,
    .team-item .text-center {
        padding: .75rem !important;
    }

}