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

@font-face {
    font-family: 'SVN-Aptima';
    src: url(/wp-content/fonts/svnaptim/SVN-Aptima.woff2) format('woff2');
}

/*************** ADD CUSTOM CSS HERE.   ***************/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --devitech-linear-color: linear-gradient(270deg, #fec719 0, #faa21b 100%);
    --devitech-light-color: #fec719;
    --devitech-color: #faa21b;
    --devi-font: "SVNAptima";
}

body {
    font-family: "Montserrat", sans-serif !important;
    color: #000000;
    background: #fff;
}

.second-font {
    font-family: "SVNAptima", "SVN-Aptima", sans-serif !important;
}

.custom-cursor {
    cursor: default !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid #fec719;
    border-radius: 8px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) rotate(45deg);
    /* Tạo hình thoi */
    transition: background-color 0.3s, transform 0.3s;
}

.custom-cursor::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--devitech-light-color);
    border-radius: 50%;
    display: block;
    transform: translate(200%, 200%);
}

.custom-cursor.hovering {
    background-color: #fec91988 !important;
    border: 1px solid transparent;
    transform: translate(-50%, -50%) rotate(45deg) scale(2);
}

.custom-cursor.hovering::before {
    background-color: transparent !important;
}


#wrapper {
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

.tooltipster-fade.tooltipster-show {
    opacity: 0 !important;
}

.col-inner>.img:not(:last-child),
.col>.img:not(:last-child) {
    margin-bottom: 0 !important;
}

.only-mobile {
    display: none;
}

/* ——————————————
/// REM-based font-sizes
—————————————— */
.fs-10 {
    font-size: 0.625rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-20 {
    font-size: 1.25rem;
}

.fs-24 {
    font-size: 1.5rem;
}

.fs-30 {
    font-size: 1.875rem;
}

.fs-36 {
    font-size: 2.25rem;
}

.fs-48 {
    font-size: 3rem;
}

.pl-40 {
    padding-left: 2.5rem !important;
}

.pr-40 {
    padding-right: 2.5rem !important;
}

.pb-32 {
    padding-bottom: 2rem !important;
}

.row {
    margin: 0 !important;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.max-w-\[800px\] {
    max-width: 50rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.max-h-full {
    max-height: 100%;
}

.block {
    display: block;
}

.top-0 {
    top: 0px;
}

.left-0 {
    left: 0px;
}

.top-48px {
    top: 48px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

a {
    color: var(--fs-color-primary);
}

.rounded-full {
    border-radius: 9999px;
}

.section {
    width: auto;
}

.container-center-layout {
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem !important;
}

.container-center-layout-2 {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem !important;
}

.container-center-layout-3 {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem !important;
}

.container,
.container-width,
.full-width .ubermenu-nav,
.row {
    max-width: 100%;
}

.page-wrapper,
.col,
.columns,
.gallery-item,
.container .section,
.row .section {
    padding: 0;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.justify-content-start {
    justify-content: start;

}

.justify-content-center {
    justify-content: center;

}

.align-items-center {
    align-items: center;
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.relative {
    position: relative;
}

.m-0 {
    margin: 0 0 0 0 !important;
}

.mt-0 {
    margin-top: 0;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.m-auto {
    margin: auto !important;
}

.medium-none {
    display: none;
}

.bg-white {
    background-color: #ffffff;
}

/* Media Video */
.mejs-controls {
    display: none !important;
}

.mejs-container {
    background: transparent !important;
}

video {
    border-radius: 1rem;
}

.video.video-fit {
    padding-top: 0 !important;
}

.video.video-fit *:not(.mejs-overlay-button) {
    width: 100% !important;
}

/* Button - Contact - Submit */
.btn,
.contact-group-1 input[type=submit],
.submit {
    cursor: pointer;
    padding: .625rem 2rem;
    border-radius: 5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background-size: 400% auto !important;
    background: var(--devitech-linear-color) !important;
    -webkit-transition: all .3s !important;
    transition: all .3s !important;
    border: 0 !important;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.btn:hover,
.contact-group-1 input[type=submit],
.submit {
    -webkit-animation: gradient 2s ease alternate infinite !important;
    animation: gradient 2s ease alternate infinite !important;
}

.btn:hover {
    box-shadow: 0 4px 24px 0 rgb(254 199 25 / 30%);
    transition: all .3s;
}

.btn:hover:before {
    content: '';
    position: absolute;
    width: 250%;
    height: 100%;
    transition: all .5s;
}



.btn--white {
    background: #fff !important;
    color: var(--fs-color-primary) !important;
}

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

/* MainMenu */
/* Đè css header */
.header-inner.flex-row.container.logo-left.medium-logo-left {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.header-main {
    height: auto !important;
}

/* NONE Stuck */
/* .header-wrapper.stuck {
    display: none;
} */

/* stuck */
.header.show-on-scroll,
.stuck #masthead.header-main {
    height: auto !important;
}

#header .header-main .header-inner {
    height: auto;
    padding: 1.125rem 1rem;
}

.header-main .nav>li>a {
    line-height: 16px;
    font-size: 0.875rem;
    color: #000000;
}

ul.header-nav.header-nav-main.nav.nav-left.nav-line-bottom {
    justify-content: center !important;
    gap: 2rem;
}

.header__right {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__nav_container {
    padding: 0 5%;
    width: calc(100% - 220px);
}

.header__contact.header-contact-button {
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-weight: 500;
    color: #fff;
    background: var(--fs-color-primary);
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    position: relative;

    animation: pulse-shadow 2s ease-in-out infinite;
}

.header__contact.header-contact-button:hover {
    color: #fff;
}

/* 1. Định nghĩa keyframes */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 var(--fs-color-primary);
    }

    50% {
        /* Ở giữa: bật box-shadow với bán kính và alpha mong muốn */
        box-shadow: 0 0 1rem var(--fs-color-primary);
    }

    100% {
        box-shadow: 0 0 0 var(--fs-color-primary);
    }
}

@keyframes gradient {
    50% {
        background-position: right center;
    }
}

@keyframes balloon {
    100% {
        transform: translateY(35px);
    }
}

@keyframes balloon1 {
    0% {
        transform: rotate(180deg);
        border-radius: 40% 50% 43% 48%;
    }

    50% {
        transform: rotate(360deg);
        border-radius: 50% 40% 45% 50%;
    }

    100% {
        transform: rotate(0deg);
        border-radius: 50%;
    }
}

/* Thanh Before dưới nav item */
.nav-line-bottom>li>a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transform: none;
    width: 0;
    height: 3px;
    background-color: var(--fs-color-primary);
    opacity: 0;
    transition: width .3s ease, opacity .3s ease;
}

.nav-line-bottom>li:hover>a::before,
.nav-line-bottom>li>a:focus::before {
    width: 100%;
    opacity: 1;
}

.nav-line-bottom>li.current-menu-item>a::before,
.nav-line-bottom>li.current_page_item>a::before,
.nav-line-bottom>li.active>a::before {
    width: 100% !important;
    opacity: 1 !important;
    transition: none !important;
}

/* FORM Contact Footer */
#footer {
    padding: 4.6875rem 0 0;
    background: #faf5f0 !important;
}

.section.section-footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

a.location-on-map {
    color: #000000 !important;
}

.section.section-footer .ux-menu-link__link {
    border: none !important;
}

.section.section-footer .ux-menu-link__link span.ux-menu-link__text {
    position: relative;
}

.section.section-footer .ux-menu-link__link span:hover {
    color: var(--fs-color-primary);
    padding-left: 0.313rem;
}

.section.section-footer .ux-menu-link__link span::after {
    position: absolute;
    content: "";
    width: 0;
    height: 2px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background: var(--devitech-linear-color);
    background-size: 400% auto;
    left: 0;
    bottom: -2px;
}

.section.section-footer .ux-menu-link__link span:hover::after {
    width: 100%;
    opacity: 1;
    -webkit-animation: gradient 2s ease alternate infinite;
    animation: gradient 2s ease alternate infinite;
}

.footer__title {
    font-weight: 700;
    font-size: 1.125rem;
    color: #000;
    text-transform: uppercase;
    margin-bottom: .625rem;
}

.social-icons.follow-icons.footer-mobile-hidden.contact-icons>a {
    color: #ffffff;
    background-color: var(--devitech-light-color);
    font-size: 1rem;
}

.tooltipster-box,
.tooltipstered:hover::after {
    display: none !important;
}

/* Footer contact */
.footer-cf7 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-cf7 .row {
    gap: .5rem;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.footer-cf7 .col.medium-6 {
    /* Buộc đúng 50% - 1rem (nếu có gap 1rem) */
    flex: 0 0 calc(50% - 0.25rem);
    max-width: calc(50% - 0.25rem);
}

.footer-cf7>p {
    text-align: center;
}

.footer-cf7 .wpcf7-spinner {
    display: none;
}

/* Style chung cho input, textarea */
.footer-cf7 input[type="text"],
.footer-cf7 input[type="email"],
.footer-cf7 input[type="tel"],
.footer-cf7 .wpcf7-select,
.footer-cf7 textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #efe9e3;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    box-sizing: border-box;
    resize: vertical;
}

.footer-cf7 .wpcf7-select {
    height: auto;
    line-height: 1;
}

/* Button gửi */
.footer-cf7-submit {
    width: 190px;
    margin: 0 !important;
    padding: 0.75rem 2rem;
    background: linear-gradient(90deg, var(--devitech-light-color) 0, var(--devitech-color) 100%);
    color: #fff;
    border: none;
    border-radius: 999rem !important;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity .3s;
}

.footer-cf7-submit:hover {
    box-shadow: 0 4px 24px 0 var(--devitech-light-color) !important;
}

/* Section Contact at Bottom Page */
.section.section-contact::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1250px;
    height: 100%;
    background: var(--devitech-linear-color);
    border-radius: 1rem;
}

.section.section-contact::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #faf5f0;
    z-index: -1;
}

.home-contact {
    padding: 4.375rem .625rem;
    z-index: 9999;
}

.section-contact .home-contact-image {
    position: absolute;
    left: 0;
    top: 8%;
    width: 100%;
    z-index: -1;
}

.section-contact .home-contact__desc {
    margin: 0 auto 1.6875rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
}

.footer-contact__title {
    margin-bottom: 1rem;
}

/* Banner Section - Intro & Contact */
.banner-image::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: -moz-linear-gradient(70deg, var(--devitech-color) 40%, var(--devitech-light-color) 100%);
    background: -webkit-gradient(linear, 70deg, color-stop(40%, 1bc1c1), color-stop(100%, 70efd1));
    background: -webkit-linear-gradient(70deg, var(--devitech-color) 40%, var(--devitech-light-color) 100%);
    background: -o-linear-gradient(70deg, var(--devitech-color) 40%, var(--devitech-light-color) 100%);
    background: -ms-linear-gradient(70deg, var(--devitech-color) 40%, var(--devitech-light-color) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1');
    background: linear-gradient(70deg, var(--devitech-color) 40%, #fec71900 100%);
    left: 0;
    top: 0;
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 7.5rem;
    width: 40%;
    word-break: break-word;
    transform: translate(0, -50%);
}

.banner-image.banner-image__desktop img {
    border-radius: 1rem;
}

.banner-title__header {
    text-transform: uppercase;
    font-size: 1.5rem;
    /* opacity: 0.5; */
    opacity: 1;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.8rem;
}

.banner-title__title {
    color: #fff;
    text-transform: uppercase;
    font-size: 2.25rem;
    font-family: var(--devi-font);
}

/* BLOG */
/* Container Wrapper */
.blog-wrapper .row.row-large {
    max-width: 100%;
}

.searchform-wrapper:not(.form-flat) .submit-button,
.widget_search .submit-button {
    background: var(--devitech-linear-color);
}

.widget .is-divider,
.text-center .is-divider,
.blog-wrapper h6.entry-category {
    display: none;
}

/* Box Left */
.col.blog-left {
    padding-right: 2rem;
}


/* Box Right */
/* Title */
.post-detail__sub-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Search */
.searchform-wrapper.ux-search-box.relative.form-flat.is-normal {
    margin-bottom: 2rem;
}

.search-group {
    margin-bottom: 30px;
}

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

#searchform {
    position: relative;
}

#searchform #s {
    height: 45px;
    border: 1px solid #ddd;
    width: 100%;
    text-indent: 15px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0rem 1rem #0000000d;
    box-shadow: 0 0rem 1rem #0000000d;
}

#searchform #searchsubmit {
    position: absolute;
    right: 3px;
    top: 3px;
    height: 39px;
    width: 80px;
    color: #fff;
    border-radius: 6px;
    background: var(--devitech-linear-color);
}

/* Danh mục + Details */
.blog-items-desk-mt {
    border-radius: 1rem;
    -webkit-box-shadow: 0 0rem 1rem rgb(0 0 0 / 5%);
    box-shadow: 0 0rem 1rem rgb(0 0 0 / 5%);
    padding: .75rem .75rem 4rem;
    background: #fff;
    position: relative;
}

.mgb-2 {
    margin-bottom: 2rem;
}

.pd075 {
    padding: .75rem !important;
}

/* Danh mục */
.mt-text-center--item-desktop {
    display: inline-block;
    margin: 4px 2px;
}

.mt-text-center--item-desktop a {
    padding: .625rem 1rem;
    display: block;
    border-radius: 10px;
    font-weight: 500;
    font-size: 1rem;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-size: 400% auto;
    background: var(--devitech-linear-color);
    -webkit-transition: all .3s;
    transition: all .3s;
}

/* Most popular */
.blog-items-1-line-first {
    margin-bottom: 15px;
    padding-bottom: 1rem;
    position: relative;
}

.blog-items-views {
    border-bottom: 1px solid #ddd;
}

.blog-items__date {
    display: flex;
    align-items: center;
    gap: .125rem;

    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0.625rem;
}

.blog-items-1-line-first {
    margin-bottom: 15px;
    padding-bottom: 1rem;
    position: relative;
}

.blog-items__name {
    font-weight: 400;
    margin: .625rem 0 0;
}

.desktop-post-view .blog-items__name a {
    font-weight: 700;
    font-size: .95rem;
    color: #000;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
}

.blog-items__name a {
    font-weight: 700;
    font-size: 1.125rem;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
}

/* Company Services */
.post-detail-service-list1 {
    padding-left: 0;
}

.post-detail-service-list1 li {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
}

.post-detail-service-list1 li .service-img1 {
    width: 40%;
    overflow: hidden;
}

.post-detail-service-list1 li .service-img1 .img {
    width: 100%;
    overflow: hidden;
}

.post-detail-service-list1 li .service-info1 {
    width: 57%;
}

.post-detail-service-list1 li .service-info1 a {
    color: #000;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

.post-detail-service-list1 li .service-info1 .service-desc1 {
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Xem Tất Cả */
.blog-items__view {
    position: absolute;
    right: 1.125rem;
    bottom: 1.125rem;
}

.blog-items__view a {
    text-decoration: none;
}

.blog-items__view span {
    font-weight: 700;
    color: var(--fs-color-primary) !important;
    font-size: 0.75rem;
    margin-right: 1rem;
}

/* Từng Service */
.category-post {
    margin-bottom: 0rem;
}

.post-related {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.category-post li:first-child {
    border-top: none;
}

.post-related li {
    display: flex;
    margin-bottom: 1.25rem;
}

.post-related__image {
    width: 40% !important;
}

.post-related__image img {
    border-radius: 0.625rem;
}

.post-related__info {
    width: 60%;
    padding-left: 1rem;
}

.category-post .post-related__name {
    margin-bottom: 0.3rem;
}

.post-related__name {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    font-size: 0.875rem;
    margin: 0 0 0.625rem;
    transition: all 0.3s;
}

.post-related__date {
    font-size: 0.625rem;
    color: #999;
}

/* Tin tuyển dụng */
.mt-item-tuyendung-desktop {
    padding: 10px 0;
    border-bottom: 1px #ddd solid;
    width: 100%;
}

.mt-item-tuyendung__desc {
    font-size: .875rem;
}

/* 
* SECTION FEEDBACK
*/
.section.section-feedback {
    padding: 6.5rem 0 6.5rem 1.75rem !important;
}

.section.section-feedback .section-content {
    padding-bottom: 4rem;
}

.feedback__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    margin-left: 2rem;
    font-weight: 500;
}

#feedbackContentSwiper::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgb(239, 233, 227);
    border-radius: 1rem 1rem 0 1rem;

    inset: 0;
    z-index: -1;
}

/* Feedback Comment/Content Swiper */
#feedbackContentSwiper .feedback-item {
    padding: 3rem 8rem 0 3rem;
    min-height: 475px;
}

img.feedback-comment__icon {
    margin-bottom: 1rem;
}

.feedback-item__comment {
    font-size: 1rem;
    font-weight: 500;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Author */
.feedback-item__author {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

img.feedback-item__avatar {
    border-radius: 999px;
    border: 8px solid #fff;
    width: 40%;
    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 80%);
}

/* Image Thumbnail */
.feedback__left .col-inner,
#feedbackThumbnailSwiper {
    height: 100%;
}

.feedback-thumbnail-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.feedback-thumbnail__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* feedback main */
#feedbackMainSwiper {
    position: absolute;
    width: 65%;
    top: 15%;
    left: 17.5%;
    border-radius: .5rem .5rem 0 0;
}

.feedback-main-wrapper {
    position: absolute !important;
    z-index: 10;
}

.feedback-main__background {
    position: absolute;
    width: 65%;
    top: 10%;
    left: 27.5%;
    z-index: 20;
}

/* Custom feedback slide */
.external-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    width: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 1rem;
}

.external-controls>button {
    padding: 0;
    margin: 0;
    width: 10%;
}

.feedback-progress-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}

#feedback-fraction {
    font-size: 1rem;
    font-weight: bold;
    color: #8b8b8b;
    width: 3rem;
    text-align: center;
}

.feedback-progress {
    position: relative;
    width: 100%;
    height: 2px;
    background: #8b8b8b;
    margin-left: 1rem;
    border-radius: 2px;
    overflow: hidden;
}

.feedback-progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #000000;
    transition: width .3s ease;
}

/**
 BLOG Details
*/
.blog-wrapper.blog-single.page-wrapper .entry-content.single-page {
    font-size: 17.5px;
    font-family: 'Roboto', sans-serif;
}

.blog-wrapper.blog-single.page-wrapper .entry-content.single-page p {
    margin: 1rem 0;
}

.blog-wrapper.blog-single.page-wrapper .entry-content.single-page h2,
.blog-wrapper.blog-single.page-wrapper .entry-content.single-page h3,
.blog-wrapper.blog-single.page-wrapper .entry-content.single-page h4 {
    margin: 1.5rem 0;
    color: black !important;
}

.blog-wrapper.blog-single.page-wrapper .entry-content.single-page img {
    display: block;
    width: 100%;
}

/* Bread crumb Blog */
.breadcrumb-wrapper {
    padding: 10px 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.rank-math-breadcrumb a {
    color: #666;
}

.rank-math-breadcrumb a:hover {
    color: var(--devitech-light-color);
}

.rank-math-breadcrumb .separator {
    margin: 0 6px;
    color: #666;
}

/* Main Content */
.entry-header-text .entry-title {
    padding-bottom: 1rem;
    color: black;
}

.entry-header-text {
    padding: 0 !important;
    text-align: left;
    color: #000000 !important;
    font-weight: 700;
}

.entry-header .entry-image {
    display: none;
}

.meta-info span {
    color: #666;
    font-size: .875rem;
}

/* Auth */
.author-box {
    background-color: #fec919bc;
    padding: 24px;
    font-size: 16px;
    border: 2rem solid #e4e4e4;
}

.author-box .author-name {
    color: var(--devitech-color) !important;
    font-weight: bold;
    margin-bottom: 1rem;
}

.author-box a {
    color: #ff3a00;
    text-decoration: none;
    float: right;
}

/* Post views */
#post-view {
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-size: 1rem;
    color: #000;
}

#post-view .dashicons {
    vertical-align: middle;
    margin-right: 4px;
}

#post-view .post-author {
    color: var(--devitech-color);
    text-decoration: none;
}

#post-view .post-author:hover {
    text-decoration: underline;
}

/* Related Blogs */
.related-posts {
    margin-top: 40px;
}

.related-heading {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #000000;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.related-item {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    padding: 1rem 1rem 4rem;
    transition: all 0.2s ease;
}

.related-thumb img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.related-meta {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0.625rem;
}

.related-title a {
    font-weight: 700;
    font-size: 1.125rem;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
}

.read-more {
    position: absolute;
    right: 1.125rem;
    bottom: 1.125rem;

}

.read-more span {
    font-weight: 700;
    color: var(--miko-color);
    font-size: 0.75rem;
    margin-right: 1rem;
}

/* Footer Mobile */
.footer-mobile-accordion .accordion-logo .accordion-title span {
    display: block;
    width: 250px;
    height: 50px;
    background: url('/wp-content/uploads/2025/05/devitech_logo.png') no-repeat center center;
    background-size: contain;
    text-indent: -9999px;
    /* Ẩn chữ */
}

.footer-mobile-accordion .accordion-title {
    text-transform: uppercase;

    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: .5rem 0 !important;
}

.footer-mobile-accordion .accordion-item:first-child .accordion-title {
    border-top: none !important;
}

.footer-mobile-accordion .toggle {
    position: relative;
}

/* Socials Media Items */
.social-icons-wrapper {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    align-items: end;
    position: fixed;
    bottom: 7rem;
    right: 3rem;
    z-index: 9999;
}

.social-icon {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: right;
    gap: 1rem;
}

.social-icon>span.social-icon-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    width: 50px;
    aspect-ratio: 1 / 1;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.social-icon>span.social-icon-title {
    color: #ffff;
    left: -250%;
    background: var(--fs-color-primary);
    padding: .25rem .5rem;
    border-radius: 0.25rem;
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
}

.social-icon:hover svg {
    transform: scale(1.05);
}

.social-icon:hover>span.social-icon-title {
    display: block;
    opacity: 1;
}

.social-icon .icon svg {
    width: 20px;
    height: 20px;
}

.social-icon .title {
    font-size: 14px;
}

/* MENU MOBILE */

ul.mobile-nav.nav.nav-right .icon-menu {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-block;
}

/* Ẩn icon mặc định */
ul.mobile-nav.nav.nav-right .icon-menu::before {
    display: none !important;
}

/* Thêm ảnh PNG */
ul.mobile-nav.nav.nav-right .icon-menu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/uploads/2025/07/menu-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mfp-close svg {
    display: none !important;
}

.mfp-close {
    background-image: url('/wp-content/uploads/2025/07/menu-back-arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
}

.mfp-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 2rem;
    padding: 2rem 0;
    height: calc(100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mfp-container.mfp-s-ready.mfp-inline-holder::before,
.mfp-container.mfp-s-ready.mfp-inline-holder::after {
    content: "";
    position: absolute;
    left: -20%;
    top: 0;
    width: 0;
    height: 0;
    background: #fec71940;
    transform-origin: top right;
    transform: scaleX(0) rotate(0deg);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out, height 0.6s ease-out, border-radius .8s ease-out;
    z-index: 0;
    pointer-events: none;
    border-radius: 100%;
}

.mfp-container.mfp-s-ready.mfp-inline-holder.mfp-bg-animate::before {
    transform: scaleX(1) rotate(5deg);
    opacity: 1;
    width: 300%;
    height: 75vh;
    border-radius: 0%;
}

.mfp-container.mfp-s-ready.mfp-inline-holder.mfp-bg-animate::after {
    transform: scaleX(1) rotate(12deg);
    opacity: 1;
    width: 300%;
    height: 118vh;
    border-radius: 0%;
}

.mfp-container {
    background: #fec71960;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.6s ease-out, opacity 0.6s ease-out;
}

.mfp-container.mfp-bg-animate {
    height: 100vh;
    opacity: 1;
}

.mfp-container .header-search-form {
    display: none !important;
}

.mfp-container a {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Media */
/* ───────── iPhone family ───────── */

/* iPhone SE (2nd gen) – 375px */
@media screen and (max-width: 376px) {
    /* styles cho iPhone SE */
}

/* iPhone 12/13/14 Pro – 390px */
@media screen and (max-width: 391px) {
    /* styles cho iPhone 12/13/14 Pro */
}

/* iPhone XR – 414px */
@media screen and (max-width: 415px) {
    /* styles cho iPhone XR */
}

/* iPhone 14 Pro Max – 430px */
@media screen and (max-width: 431px) {

    /* styles cho iPhone 14 Pro Max */
    /* Common */
    .only-mobile {
        display: block;
    }

    /* BUTTON */
    .btn,
    .contact-group-1 input[type=submit],
    .submit {
        cursor: pointer;
        padding: 0.5rem 1.25rem !important;
    }

    /* ABOUT US */
    .about-us {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .about-us__title {
        font-size: 1.25rem;
    }

    .about-us__name {
        font-size: 1.5rem;
    }

    .text.about-us__desc {
        text-align: justify !important;
    }

    /* Feedback */
    .section.section-feedback .section-content {
        padding-bottom: 8rem !important;
    }
}



/* Google Nest Hub – 600px */
@media screen and (max-width: 601px) {

    /* styles cho Nest Hub portrait */
    /* Banner */
    .section.section-banner.container-center-layout {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .banner-image::after {
        background: -moz-linear-gradient(180deg, var(--devitech-color) 25%, var(--devitech-light-color) 100%);
        background: -webkit-gradient(linear, 180deg, color-stop(25%, 1bc1c1), color-stop(100%, 70efd1));
        background: -webkit-linear-gradient(180deg, var(--devitech-color) 25%, var(--devitech-light-color) 100%);
        background: -o-linear-gradient(180deg, var(--devitech-color) 25%, var(--devitech-light-color) 100%);
        background: -ms-linear-gradient(180deg, var(--devitech-color) 25%, var(--devitech-light-color) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1');
        background: linear-gradient(180deg, var(--devitech-color) 25%, var(--devitech-light-color) 100%);
    }

    .banner-content {
        width: 100% !important;
        left: 0 !important;
        top: 2rem;
        transform: initial;
        text-align: center;
    }
}

/* Google Nest Hub Max – 800px */
@media screen and (max-width: 801px) {
    /* styles cho Nest Hub Max portrait */
}


/* ───────── iPad family ───────── */

/* iPad Mini / Air (9.7"–10.2") – 768px */
@media screen and (max-width: 769px) {

    /* styles cho iPad 9.7"/10.2" portrait */
    .feedback-main__background {
        position: absolute;
        width: 65%;
        top: auto;
        left: auto;
        bottom: 5% !important;
        right: 50%;
        transform: translateX(50%) !important;
        z-index: 20;
    }

    /* Footer Mobile */
    #footer {
        padding: 1rem 0 0;
        background: #faf5f0 !important;
    }

    .section.section-footer {
        display: none;
    }

    .section.section-footer-mobile {
        display: block !important;
    }
}

/* iPad Air 10.9" – 820px */
@media screen and (max-width: 821px) {
    .d-absolute {
        position: absolute !important;
    }

    /* Banner */
    .banner-content {
        left: 1.875rem;
        width: 50%;
    }

    .section.section-banner.container-center-layout {
        padding: 0 !important;
    }

    .banner-image::after {
        border-radius: 0;
    }

    .banner-image.banner-image__desktop img {
        border-radius: 0;
    }

    /* Feedback */
    .section.section-feedback {
        padding: 5rem 0 !important;
    }

    img.feedback-item__avatar {
        width: 30%;
    }

    #feedbackContentSwiper .feedback-item {
        padding: 2rem 2rem 0;
    }

    .feedback-thumbnail__image {
        position: relative;
    }

    .section.section-feedback .section-content {
        padding-bottom: 15rem;
    }

    .feedback-main__background {
        position: absolute;
        width: 65%;
        top: auto;
        left: auto;
        bottom: 2%;
        right: 50%;
        transform: translateX(50%) !important;
        z-index: 20;
    }

    .external-controls {
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #feedback-fraction {
        width: 3rem;

    }

    .external-controls>button {
        width: 2rem;
    }
}

/* iPad Pro 11" – 834px */
@media screen and (max-width: 835px) {
    /* styles cho iPad Pro 11" portrait */
}

/* iPad Pro 12.9" – 1024px + Nest Hub*/
@media screen and (max-width: 1025px) {
    /* styles cho iPad Pro 12.9" portrait */
}

/* ───────── Nest Hub Max ───────── */
@media screen and (max-width: 1281px) {
    /*  */
}