/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - HERO
   Dong bo format hero cac trang dich vu
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H1 = Noto Serif | con lai = Be Vietnam Pro
   Anh nen: doi URL o "background-image" ben duoi neu can
=================================================== */

#atp-office-hero,
#atp-office-hero *,
#atp-office-hero *::before,
#atp-office-hero *::after {
    box-sizing: border-box;
}

#atp-office-hero * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

/* SECTION FULL WIDTH + ANH NEN */
#atp-office-hero {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden;
    background-color: #111111 !important;
    background-image: url("https://noithatanthinhphat.vn/wp-content/uploads/2026/04/3.-van-phong-showroom.jpg") !important;
    background-position: center right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    color: #FFFFFF;
    text-align: left;
}

/* LOP PHU TOI - dam o vung chu, nhat dan sang phai */
#atp-office-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg,
        rgba(8, 8, 8, .97) 0%,
        rgba(8, 8, 8, .93) 38%,
        rgba(8, 8, 8, .82) 55%,
        rgba(8, 8, 8, .55) 75%,
        rgba(8, 8, 8, .38) 100%);
}

/* LAM MO ANH NEN PHIA SAU CHU - giam chi tiet gay roi mat */
#atp-office-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 72%);
    mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 72%);
    pointer-events: none;
}

#atp-office-hero p:empty,
#atp-office-hero br {
    display: none !important;
}

/* KHUNG NOI DUNG */
#atp-office-hero .atp-office-hero-inner {
    position: relative !important;
    z-index: 1;
    width: 100% !important;
    max-width: 1290px !important;
    min-height: 510px;
    margin: 0 auto !important;
    padding: 80px 24px !important;
    display: flex !important;
    align-items: center !important;
}

#atp-office-hero .atp-office-hero-content {
    width: 100% !important;
}

/* LABEL CAM */
#atp-office-hero .atp-office-hero-label {
    display: flex !important;
    align-items: center !important;
    gap: 9px;
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#atp-office-hero .atp-office-hero-label::before {
    content: "";
    display: block;
    flex: 0 0 3px;
    width: 3px;
    height: 17px;
    background: #F8752B;
}

/* H1 NOTO SERIF - 2 DONG */
#atp-office-hero h1.atp-office-hero-title {
    display: block !important;
    max-width: 760px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#atp-office-hero .atp-office-hero-title-accent {
    display: block !important;
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

/* MO TA */
#atp-office-hero .atp-office-hero-desc {
    max-width: 600px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
}

/* 4 DIEM MANH - 1 HANG TREN DAI NEN TOI */
#atp-office-hero .atp-office-hero-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    max-width: 1136px !important;
    margin: 0 0 9px !important;
    padding: 10px 20px 10px 0 !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .72) 100%) !important;
    border-radius: 0 6px 6px 0 !important;
}

#atp-office-hero .atp-office-hero-feature {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
}

#atp-office-hero .atp-office-hero-feature-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(248, 117, 43, .08) !important;
    border: 1px solid #F8752B !important;
    border-radius: 6px !important;
}

#atp-office-hero .atp-office-hero-feature-icon img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

#atp-office-hero .atp-office-hero-feature-text {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* NUT */
#atp-office-hero .atp-office-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 13px !important;
}

#atp-office-hero .atp-office-hero-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border-radius: 3px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    transition: .25s ease !important;
}

#atp-office-hero .atp-office-hero-primary {
    color: #FFFFFF !important;
    background: #F8752B !important;
    border: 2px solid #F8752B !important;
}

#atp-office-hero .atp-office-hero-primary:hover {
    background: #E0601A !important;
    border-color: #E0601A !important;
}

#atp-office-hero .atp-office-hero-arrow {
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform .25s ease !important;
}

#atp-office-hero .atp-office-hero-primary:hover .atp-office-hero-arrow {
    transform: translateX(4px);
}

#atp-office-hero .atp-office-hero-secondary {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 2px solid #FFFFFF !important;
}

#atp-office-hero .atp-office-hero-secondary:hover {
    color: #111111 !important;
    background: #FFFFFF !important;
}

/* ICON PLAY TRON */
#atp-office-hero .atp-office-hero-play {
    position: relative;
    display: inline-block !important;
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    transition: .25s ease !important;
}

#atp-office-hero .atp-office-hero-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #111111;
}

#atp-office-hero .atp-office-hero-secondary:hover .atp-office-hero-play {
    background: #111111 !important;
}

#atp-office-hero .atp-office-hero-secondary:hover .atp-office-hero-play::after {
    border-left-color: #FFFFFF;
}

/* TABLET */
@media screen and (max-width: 1199px) {

    #atp-office-hero .atp-office-hero-inner {
        min-height: 0;
        padding: 70px 24px !important;
    }

    #atp-office-hero h1.atp-office-hero-title {
        font-size: 38px !important;
    }

    #atp-office-hero::before {
        background: linear-gradient(90deg, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .88) 60%, rgba(8, 8, 8, .7) 100%);
    }

    #atp-office-hero::after {
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
    }

    #atp-office-hero .atp-office-hero-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 14px 16px !important;
        background: rgba(0, 0, 0, .55) !important;
        border-radius: 6px !important;
    }
}

/* MOBILE */
@media screen and (max-width: 699px) {

    #atp-office-hero::before {
        background: rgba(8, 8, 8, .88);
    }

    #atp-office-hero::after {
        -webkit-mask-image: none;
        mask-image: none;
    }

    #atp-office-hero .atp-office-hero-inner {
        padding: 56px 16px !important;
    }

    #atp-office-hero .atp-office-hero-label {
        font-size: 13px !important;
    }

    #atp-office-hero h1.atp-office-hero-title {
        font-size: 30px !important;
        line-height: 1.35 !important;
    }

    #atp-office-hero .atp-office-hero-desc {
        font-size: 16px !important;
    }

    #atp-office-hero .atp-office-hero-features {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #atp-office-hero .atp-office-hero-actions,
    #atp-office-hero .atp-office-hero-button {
        width: 100% !important;
    }
}

/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - NOI LO (BO CUC TAP CHI)
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H2 + so lon = Noto Serif | con lai = Be Vietnam Pro
=================================================== */

#atp-office-insight,
#atp-office-insight *,
#atp-office-insight *::before,
#atp-office-insight *::after {
    box-sizing: border-box;
}

#atp-office-insight * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

#atp-office-insight {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 90px 24px !important;
    overflow: hidden;
    background: #FFFFFF !important;
    color: #14243D;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

#atp-office-insight p:empty {
    display: none !important;
}

#atp-office-insight h2,
#atp-office-insight h3,
#atp-office-insight p,
#atp-office-insight ul,
#atp-office-insight ol,
#atp-office-insight li,
#atp-office-insight blockquote {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-transform: none !important;
}

#atp-office-insight img {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
}

#atp-office-insight .atp-ofi-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 0 11px !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#atp-office-insight .atp-ofi-label::before {
    content: "";
    display: block;
    flex: 0 0 5px;
    width: 5px;
    height: 23px;
    background: #F8752B;
    border-radius: 4px;
}

#atp-office-insight h2 {
    color: #14243D !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
}

#atp-office-insight h2 span {
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

#atp-office-insight .atp-ofi-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#atp-office-insight .atp-ofi-top {
    display: grid !important;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important;
    gap: 64px !important;
    align-items: end !important;
    margin: 0 0 40px !important;
}

#atp-office-insight .atp-ofi-intro p {
    margin: 0 0 18px !important;
    color: #475467 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

#atp-office-insight .atp-ofi-quote {
    padding: 4px 0 4px 18px !important;
    border-left: 3px solid #F8752B !important;
    color: #14243D !important;
    font-size: 16px !important;
    font-style: normal !important;
    line-height: 1.65 !important;
}

#atp-office-insight .atp-ofi-quote strong {
    color: #F8752B !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

#atp-office-insight .atp-ofi-banner {
    margin: 0 0 64px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

#atp-office-insight .atp-ofi-banner img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    object-position: center 60% !important;
}

/* ===== TIEU DE 4 NOI LO - NOI BAT ===== */
#atp-office-insight .atp-ofi-pains-head {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 34px !important;
    max-width: 1000px !important;
    margin: 0 auto 40px !important;
}

#atp-office-insight .atp-ofi-pains-num {
    flex: 0 0 auto;
    display: block !important;
    width: 120px !important;
    line-height: 0 !important;
}

#atp-office-insight .atp-ofi-pains-num svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

#atp-office-insight .atp-ofi-pains-title {
    padding: 6px 0 6px 28px !important;
    border-left: 2px solid #F5DCCB !important;
}

#atp-office-insight .atp-ofi-pains-title h3 {
    margin: 0 0 6px !important;
    color: #14243D !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#atp-office-insight .atp-ofi-pains-title p {
    color: #475467 !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}

#atp-office-insight .atp-ofi-pains-title strong {
    color: #F8752B !important;
    font-weight: 700 !important;
}

/* ===== 4 NOI LO ===== */
#atp-office-insight .atp-ofi-pains {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px !important;
}

#atp-office-insight .atp-ofi-pain {
    position: relative !important;
    padding: 24px 0 0 !important;
    border-top: 2px solid #F5DCCB !important;
}

#atp-office-insight .atp-ofi-pain::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 48px;
    height: 2px;
    background: #F8752B;
    transition: width .4s ease;
}

#atp-office-insight .atp-ofi-pain:hover::before {
    width: 100%;
}

#atp-office-insight .atp-ofi-pain-num {
    display: block !important;
    margin: 0 0 12px !important;
    color: transparent !important;
    -webkit-text-stroke: 1.5px #F8752B;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#atp-office-insight .atp-ofi-pain h4 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #14243D !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}

#atp-office-insight .atp-ofi-pain p {
    color: #475467 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media screen and (max-width: 1199px) {

    #atp-office-insight .atp-ofi-top {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    #atp-office-insight h2 {
        font-size: 30px !important;
    }

    #atp-office-insight .atp-ofi-banner img {
        height: 320px !important;
    }

    #atp-office-insight .atp-ofi-pains {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 36px 32px !important;
    }

    #atp-office-insight .atp-ofi-pains-title h3 {
        font-size: 26px !important;
    }
}

@media screen and (max-width: 699px) {

    #atp-office-insight {
        padding: 56px 16px !important;
    }

    #atp-office-insight h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;
    }

    #atp-office-insight .atp-ofi-banner {
        margin: 0 0 44px !important;
        border-radius: 16px !important;
    }

    #atp-office-insight .atp-ofi-banner img {
        height: 240px !important;
    }

    #atp-office-insight .atp-ofi-pains-head {
        flex-direction: column !important;
        gap: 18px !important;
        margin: 0 0 28px !important;
        text-align: center !important;
    }

    #atp-office-insight .atp-ofi-pains-num {
        width: 96px !important;
    }

    #atp-office-insight .atp-ofi-pains-title {
        padding: 16px 0 0 !important;
        border-left: 0 !important;
        border-top: 2px solid #F5DCCB !important;
    }

    #atp-office-insight .atp-ofi-pains-title h3 {
        font-size: 22px !important;
    }

    #atp-office-insight .atp-ofi-pains-title p {
        font-size: 15px !important;
    }

    #atp-office-insight .atp-ofi-pains {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - QUY TRINH 5 BUOC (TIMELINE)
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H2 + so lon = Noto Serif | con lai = Be Vietnam Pro
=================================================== */

#atp-office-solutions,
#atp-office-solutions *,
#atp-office-solutions *::before,
#atp-office-solutions *::after {
    box-sizing: border-box;
}

#atp-office-solutions * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

#atp-office-solutions {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 90px 24px !important;
    overflow: hidden;
    background: #14243D !important;
    color: #14243D;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

#atp-office-solutions p:empty {
    display: none !important;
}

#atp-office-solutions h2,
#atp-office-solutions h3,
#atp-office-solutions p,
#atp-office-solutions ul,
#atp-office-solutions ol,
#atp-office-solutions li,
#atp-office-solutions blockquote {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-transform: none !important;
}

#atp-office-solutions img {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
}

#atp-office-solutions .atp-ofp-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 0 11px !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#atp-office-solutions .atp-ofp-label::before {
    content: "";
    display: block;
    flex: 0 0 5px;
    width: 5px;
    height: 23px;
    background: #F8752B;
    border-radius: 4px;
}

#atp-office-solutions h2 {
    color: #FFFFFF !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
}

#atp-office-solutions h2 span {
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

#atp-office-solutions::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 420px;
    height: 420px;
    border: 2px solid rgba(248, 117, 43, .25);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(248, 117, 43, .05), 0 0 0 80px rgba(248, 117, 43, .03);
}

#atp-office-solutions .atp-ofp-container {
    position: relative !important;
    z-index: 1;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#atp-office-solutions .atp-ofp-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 780px !important;
    margin: 0 auto 64px !important;
    text-align: center !important;
}

#atp-office-solutions .atp-ofp-head p {
    margin: 14px 0 0 !important;
    color: #D0D5DD !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

#atp-office-solutions .atp-ofp-steps {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 28px !important;
}

#atp-office-solutions .atp-ofp-steps::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(248, 117, 43, .7) 0 8px, transparent 8px 16px);
}

#atp-office-solutions .atp-ofp-step {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

#atp-office-solutions .atp-ofp-dot {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 0 22px !important;
    background: #1C3150 !important;
    border: 2px solid #F8752B !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 8px #14243D !important;
    transition: .3s ease !important;
}

#atp-office-solutions .atp-ofp-step:hover .atp-ofp-dot {
    background: #F8752B !important;
}

#atp-office-solutions .atp-ofp-icon img {
    width: 28px !important;
    height: 28px !important;
    transition: filter .3s ease !important;
}

#atp-office-solutions .atp-ofp-step:hover .atp-ofp-icon img {
    filter: brightness(0) invert(1);
}

#atp-office-solutions .atp-ofp-num {
    position: absolute !important;
    top: -6px;
    right: -6px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    color: #14243D !important;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#atp-office-solutions .atp-ofp-step h3 {
    margin: 0 0 8px !important;
    color: #FFFFFF !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

#atp-office-solutions .atp-ofp-step p {
    color: #B8C0CC !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

@media screen and (max-width: 1199px) {

    #atp-office-solutions h2 {
        font-size: 30px !important;
    }

    #atp-office-solutions .atp-ofp-steps {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }

    #atp-office-solutions .atp-ofp-steps::before {
        top: 10px;
        bottom: 10px;
        left: 36px;
        right: auto;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, rgba(248, 117, 43, .7) 0 8px, transparent 8px 16px);
    }

    #atp-office-solutions .atp-ofp-step {
        display: grid !important;
        grid-template-columns: 74px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 22px !important;
        align-items: start !important;
        padding: 0 0 30px !important;
        text-align: left !important;
    }

    #atp-office-solutions .atp-ofp-dot {
        grid-row: 1 / 3;
        margin: 0 !important;
    }

    #atp-office-solutions .atp-ofp-step h3,
    #atp-office-solutions .atp-ofp-step p {
        text-align: left !important;
    }

    #atp-office-solutions .atp-ofp-step h3 {
        margin: 14px 0 6px !important;
    }
}

@media screen and (max-width: 699px) {

    #atp-office-solutions {
        padding: 56px 16px !important;
    }

    #atp-office-solutions h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;
    }

    #atp-office-solutions .atp-ofp-head {
        margin: 0 auto 40px !important;
    }

    #atp-office-solutions .atp-ofp-steps::before {
        left: 29px;
    }

    #atp-office-solutions .atp-ofp-step {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        column-gap: 16px !important;
    }

    #atp-office-solutions .atp-ofp-dot {
        width: 60px !important;
        height: 60px !important;
    }

    #atp-office-solutions .atp-ofp-step h3 {
        margin: 8px 0 6px !important;
    }
}

/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - KHONG GIAN THIET KE
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H2 = Noto Serif | con lai = Be Vietnam Pro
=================================================== */

#atp-office-spaces,
#atp-office-spaces *,
#atp-office-spaces *::before,
#atp-office-spaces *::after {
    box-sizing: border-box;
}

#atp-office-spaces * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

#atp-office-spaces {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 90px 24px !important;
    background: #FFFFFF !important;
    color: #14243D;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

#atp-office-spaces p:empty {
    display: none !important;
}

#atp-office-spaces .atp-spaces-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#atp-office-spaces .atp-spaces-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 760px !important;
    margin: 0 auto 40px !important;
    text-align: center !important;
}

#atp-office-spaces .atp-spaces-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 0 11px !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#atp-office-spaces .atp-spaces-label::before {
    content: "";
    display: block;
    flex: 0 0 5px;
    width: 5px;
    height: 23px;
    background: #F8752B;
    border-radius: 4px;
}

#atp-office-spaces h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #14243D !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
    text-transform: none !important;
}

#atp-office-spaces .atp-spaces-accent {
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

#atp-office-spaces .atp-spaces-head p {
    margin: 0 !important;
    padding: 0 !important;
    color: #475467 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

#atp-office-spaces .atp-spaces-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

#atp-office-spaces .atp-spaces-item {
    position: relative !important;
    aspect-ratio: 3 / 4;
    margin: 0 !important;
    overflow: hidden !important;
    background: #F5DCCB !important;
    border-radius: 18px !important;
}

#atp-office-spaces .atp-spaces-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    transition: transform .6s ease !important;
}

#atp-office-spaces .atp-spaces-item:hover img {
    transform: scale(1.07) !important;
}

#atp-office-spaces .atp-spaces-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 70px 20px 20px !important;
    background: linear-gradient(to top, rgba(20, 36, 61, .92) 0%, rgba(20, 36, 61, .55) 55%, rgba(20, 36, 61, 0) 100%) !important;
}

#atp-office-spaces .atp-spaces-index {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 10px !important;
    color: #FFFFFF !important;
    background: #F8752B !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#atp-office-spaces .atp-spaces-info h3 {
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}

#atp-office-spaces .atp-spaces-info p {
    min-height: 42px;
    margin: 0 !important;
    padding: 0 !important;
    color: #E4E7EC !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 1199px) {

    #atp-office-spaces h2 {
        font-size: 30px !important;
    }

    #atp-office-spaces .atp-spaces-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #atp-office-spaces .atp-spaces-item {
        aspect-ratio: 4 / 3;
    }
}

@media screen and (max-width: 699px) {

    #atp-office-spaces {
        padding: 56px 16px !important;
    }

    #atp-office-spaces h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;
    }

    #atp-office-spaces .atp-spaces-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #atp-office-spaces .atp-spaces-info p {
        min-height: 0;
    }
}

/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - DU AN TIEU BIEU (XEN KE)
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H2 + so lon = Noto Serif | con lai = Be Vietnam Pro
=================================================== */

#atp-office-projects,
#atp-office-projects *,
#atp-office-projects *::before,
#atp-office-projects *::after {
    box-sizing: border-box;
}

#atp-office-projects * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

#atp-office-projects {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 90px 24px !important;
    overflow: hidden;
    background: linear-gradient(110deg, #FFF8F0 0%, #FFFCF9 50%, #FFF7EF 100%) !important;
    color: #14243D;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

#atp-office-projects p:empty {
    display: none !important;
}

#atp-office-projects h2,
#atp-office-projects h3,
#atp-office-projects p,
#atp-office-projects ul,
#atp-office-projects ol,
#atp-office-projects li,
#atp-office-projects blockquote {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-transform: none !important;
}

#atp-office-projects img {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
}

#atp-office-projects .atp-ofj-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 0 11px !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#atp-office-projects .atp-ofj-label::before {
    content: "";
    display: block;
    flex: 0 0 5px;
    width: 5px;
    height: 23px;
    background: #F8752B;
    border-radius: 4px;
}

#atp-office-projects h2 {
    color: #14243D !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
}

#atp-office-projects h2 span {
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

#atp-office-projects .atp-ofj-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#atp-office-projects .atp-ofj-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin: 0 0 44px !important;
}

#atp-office-projects .atp-ofj-all,
#atp-office-projects .atp-ofj-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: gap .25s ease !important;
}

#atp-office-projects .atp-ofj-all {
    padding: 0 0 4px !important;
    border-bottom: 2px solid #F8752B !important;
}

#atp-office-projects .atp-ofj-all:hover,
#atp-office-projects .atp-ofj-link:hover {
    gap: 16px !important;
}

#atp-office-projects .atp-ofj-item {
    display: grid !important;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
    align-items: center !important;
    margin: 0 0 40px !important;
}

#atp-office-projects .atp-ofj-item:last-child {
    margin: 0 !important;
}

#atp-office-projects .atp-ofj-photo {
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

#atp-office-projects .atp-ofj-photo img {
    width: 100% !important;
    height: 460px !important;
    object-fit: cover !important;
    transition: transform .6s ease !important;
}

#atp-office-projects .atp-ofj-photo:hover img {
    transform: scale(1.05) !important;
}

#atp-office-projects .atp-ofj-info {
    position: relative !important;
    z-index: 1;
    margin: 0 0 0 -60px !important;
    padding: 40px !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(20, 36, 61, .1) !important;
}

#atp-office-projects .atp-ofj-item:nth-child(odd) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
}

#atp-office-projects .atp-ofj-item:nth-child(odd) .atp-ofj-photo {
    order: 2;
}

#atp-office-projects .atp-ofj-item:nth-child(odd) .atp-ofj-info {
    order: 1;
    margin: 0 -60px 0 0 !important;
}

#atp-office-projects .atp-ofj-tag {
    display: inline-block !important;
    margin: 0 0 12px !important;
    padding: 5px 12px !important;
    color: #F8752B !important;
    background: #FFE5D6 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#atp-office-projects .atp-ofj-info h3 {
    margin: 0 0 18px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#atp-office-projects .atp-ofj-info h3 a {
    color: #14243D !important;
    text-decoration: none !important;
}

#atp-office-projects .atp-ofj-meta {
    margin: 0 0 16px !important;
    border-top: 1px solid #F0E6DE !important;
}

#atp-office-projects .atp-ofj-meta li {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #F0E6DE !important;
}

#atp-office-projects .atp-ofj-meta span {
    color: #667085 !important;
    font-size: 14px !important;
}

#atp-office-projects .atp-ofj-meta strong {
    color: #14243D !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
}

#atp-office-projects .atp-ofj-info p {
    margin: 0 0 18px !important;
    color: #475467 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

@media screen and (max-width: 1199px) {

    #atp-office-projects h2 {
        font-size: 30px !important;
    }

    #atp-office-projects .atp-ofj-item,
    #atp-office-projects .atp-ofj-item:nth-child(odd) {
        grid-template-columns: 1fr !important;
    }

    #atp-office-projects .atp-ofj-item:nth-child(odd) .atp-ofj-photo {
        order: 0;
    }

    #atp-office-projects .atp-ofj-info,
    #atp-office-projects .atp-ofj-item:nth-child(odd) .atp-ofj-info {
        order: 0;
        margin: -60px 24px 0 !important;
    }

    #atp-office-projects .atp-ofj-photo img {
        height: 380px !important;
    }
}

@media screen and (max-width: 699px) {

    #atp-office-projects {
        padding: 56px 16px !important;
    }

    #atp-office-projects h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;
    }

    #atp-office-projects .atp-ofj-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin: 0 0 30px !important;
    }

    #atp-office-projects .atp-ofj-photo img {
        height: 240px !important;
    }

    #atp-office-projects .atp-ofj-info,
    #atp-office-projects .atp-ofj-item:nth-child(odd) .atp-ofj-info {
        margin: -40px 12px 0 !important;
        padding: 24px 20px !important;
    }

    #atp-office-projects .atp-ofj-info h3 {
        font-size: 20px !important;
    }

    #atp-office-projects .atp-ofj-meta li {
        grid-template-columns: 90px minmax(0, 1fr) !important;
    }
}

/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - LY DO CHON (ANH + LUOI 2x2)
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H2 + so lon = Noto Serif | con lai = Be Vietnam Pro
=================================================== */

#atp-office-why,
#atp-office-why *,
#atp-office-why *::before,
#atp-office-why *::after {
    box-sizing: border-box;
}

#atp-office-why * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

#atp-office-why {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 90px 24px !important;
    overflow: hidden;
    background: #FFFFFF !important;
    color: #14243D;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

#atp-office-why p:empty {
    display: none !important;
}

#atp-office-why h2,
#atp-office-why h3,
#atp-office-why p,
#atp-office-why ul,
#atp-office-why ol,
#atp-office-why li,
#atp-office-why blockquote {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-transform: none !important;
}

#atp-office-why img {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
}

#atp-office-why .atp-ofw-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 0 11px !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#atp-office-why .atp-ofw-label::before {
    content: "";
    display: block;
    flex: 0 0 5px;
    width: 5px;
    height: 23px;
    background: #F8752B;
    border-radius: 4px;
}

#atp-office-why h2 {
    color: #14243D !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
}

#atp-office-why h2 span {
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

#atp-office-why .atp-ofw-container {
    display: grid !important;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
    gap: 72px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#atp-office-why .atp-ofw-visual {
    position: relative !important;
    padding: 0 0 28px 28px !important;
}

#atp-office-why .atp-ofw-visual::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70%;
    height: 70%;
    background: #F8752B;
    border-radius: 20px;
}

#atp-office-why .atp-ofw-visual img {
    position: relative !important;
    width: 100% !important;
    height: 520px !important;
    object-fit: cover !important;
    border-radius: 20px !important;
}

#atp-office-why .atp-ofw-card {
    position: absolute !important;
    right: -24px;
    top: 40px;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 22px !important;
    background: #14243D !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 36px rgba(20, 36, 61, .25) !important;
}

#atp-office-why .atp-ofw-card strong {
    color: #F8752B !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#atp-office-why .atp-ofw-card span {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

#atp-office-why .atp-ofw-card span b {
    display: block !important;
    font-weight: 600 !important;
}

#atp-office-why .atp-ofw-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 34px 0 0 !important;
}

#atp-office-why .atp-ofw-item {
    padding: 26px 26px 26px 0 !important;
    border-bottom: 1px solid #F0E6DE !important;
}

#atp-office-why .atp-ofw-item:nth-child(even) {
    padding: 26px 0 26px 26px !important;
    border-left: 1px solid #F0E6DE !important;
}

#atp-office-why .atp-ofw-item:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

#atp-office-why .atp-ofw-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 0 14px !important;
    background: #FFE5D6 !important;
    border-radius: 14px !important;
}

#atp-office-why .atp-ofw-icon img {
    width: 26px !important;
    height: 26px !important;
}

#atp-office-why .atp-ofw-item h3 {
    margin: 0 0 6px !important;
    color: #14243D !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

#atp-office-why .atp-ofw-item p {
    color: #475467 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

@media screen and (max-width: 1199px) {

    #atp-office-why .atp-ofw-container {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    #atp-office-why .atp-ofw-visual {
        max-width: 600px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    #atp-office-why .atp-ofw-visual img {
        height: 400px !important;
    }

    #atp-office-why .atp-ofw-card {
        right: 16px;
    }

    #atp-office-why h2 {
        font-size: 30px !important;
    }
}

@media screen and (max-width: 699px) {

    #atp-office-why {
        padding: 56px 16px !important;
    }

    #atp-office-why h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;
    }

    #atp-office-why .atp-ofw-visual {
        padding: 0 0 16px 16px !important;
    }

    #atp-office-why .atp-ofw-visual img {
        height: 280px !important;
    }

    #atp-office-why .atp-ofw-card {
        top: auto;
        right: 12px;
        bottom: 34px;
        padding: 12px 16px !important;
    }

    #atp-office-why .atp-ofw-card strong {
        font-size: 34px !important;
    }

    #atp-office-why .atp-ofw-grid {
        grid-template-columns: 1fr !important;
        margin: 24px 0 0 !important;
    }

    #atp-office-why .atp-ofw-item,
    #atp-office-why .atp-ofw-item:nth-child(even) {
        padding: 20px 0 !important;
        border-left: 0 !important;
        border-bottom: 1px solid #F0E6DE !important;
    }

    #atp-office-why .atp-ofw-item:last-child {
        border-bottom: 0 !important;
    }
}

/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - FAQ (LUOI 2 COT)
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H2 + so lon = Noto Serif | con lai = Be Vietnam Pro
=================================================== */

#atp-office-faq,
#atp-office-faq *,
#atp-office-faq *::before,
#atp-office-faq *::after {
    box-sizing: border-box;
}

#atp-office-faq * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

#atp-office-faq {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 90px 24px !important;
    overflow: hidden;
    background: #F8F9FB !important;
    color: #14243D;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

#atp-office-faq p:empty {
    display: none !important;
}

#atp-office-faq h2,
#atp-office-faq h3,
#atp-office-faq p,
#atp-office-faq ul,
#atp-office-faq ol,
#atp-office-faq li,
#atp-office-faq blockquote {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-transform: none !important;
}

#atp-office-faq img {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
}

#atp-office-faq .atp-ofq-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    margin: 0 0 11px !important;
    color: #F8752B !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

#atp-office-faq .atp-ofq-label::before {
    content: "";
    display: block;
    flex: 0 0 5px;
    width: 5px;
    height: 23px;
    background: #F8752B;
    border-radius: 4px;
}

#atp-office-faq h2 {
    color: #14243D !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
}

#atp-office-faq h2 span {
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

#atp-office-faq .atp-ofq-container {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}

#atp-office-faq .atp-ofq-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 0 40px !important;
    text-align: center !important;
}

#atp-office-faq .atp-ofq-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

#atp-office-faq .atp-ofq-item {
    margin: 0 !important;
    padding: 0 22px !important;
    background: #FFFFFF !important;
    border: 1px solid #EAECF0 !important;
    border-radius: 14px !important;
    transition: .25s ease !important;
}

#atp-office-faq .atp-ofq-item[open] {
    border-color: #F8752B !important;
    box-shadow: 0 12px 30px rgba(20, 36, 61, .07) !important;
}

#atp-office-faq .atp-ofq-item summary {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 18px 0 !important;
    list-style: none !important;
    cursor: pointer;
}

#atp-office-faq .atp-ofq-item summary::-webkit-details-marker {
    display: none;
}

#atp-office-faq .atp-ofq-item summary::after {
    content: "";
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 auto;
    border-right: 2px solid #F8752B;
    border-bottom: 2px solid #F8752B;
    transform: rotate(45deg) translateY(-3px);
    transition: transform .25s ease;
}

#atp-office-faq .atp-ofq-item[open] summary::after {
    transform: rotate(-135deg) translateY(-3px);
}

#atp-office-faq .atp-ofq-q {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    color: #F8752B !important;
    background: #FFE5D6 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#atp-office-faq .atp-ofq-item[open] .atp-ofq-q {
    color: #FFFFFF !important;
    background: #F8752B !important;
}

#atp-office-faq .atp-ofq-text {
    color: #14243D !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

#atp-office-faq .atp-ofq-answer {
    margin: 0 !important;
    padding: 0 0 18px 52px !important;
    color: #475467 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

@media screen and (max-width: 1199px) {

    #atp-office-faq h2 {
        font-size: 30px !important;
    }
}

@media screen and (max-width: 699px) {

    #atp-office-faq {
        padding: 56px 16px !important;
    }

    #atp-office-faq h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;
    }

    #atp-office-faq .atp-ofq-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #atp-office-faq .atp-ofq-item {
        padding: 0 16px !important;
    }

    #atp-office-faq .atp-ofq-answer {
        padding: 0 0 16px !important;
    }
}

/* ===================================================
   AN THINH PHAT - VAN PHONG CONG TY - KEU GOI LIEN HE (NEN CAM)
   FLATSOME UX BUILDER - CSS DOC LAP
   Font: H2 + so lon = Noto Serif | con lai = Be Vietnam Pro
=================================================== */

#atp-office-cta,
#atp-office-cta *,
#atp-office-cta *::before,
#atp-office-cta *::after {
    box-sizing: border-box;
}

#atp-office-cta * {
    font-family: "Be Vietnam Pro", Arial, sans-serif !important;
}

#atp-office-cta {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 80px 24px !important;
    overflow: hidden;
    background: #F8752B !important;
    color: #14243D;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

#atp-office-cta p:empty {
    display: none !important;
}

#atp-office-cta h2,
#atp-office-cta h3,
#atp-office-cta p,
#atp-office-cta ul,
#atp-office-cta ol,
#atp-office-cta li,
#atp-office-cta blockquote {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-transform: none !important;
}

#atp-office-cta img {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
}

#atp-office-cta h2 {
    color: #FFFFFF !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
}

#atp-office-cta h2 span {
    color: #F8752B !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

#atp-office-cta::before {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -200px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

#atp-office-cta h2 span {
    color: #14243D !important;
}

#atp-office-cta .atp-ofc-container {
    position: relative !important;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
    gap: 56px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#atp-office-cta .atp-ofc-content p {
    margin: 14px 0 28px !important;
    color: #FFF1E8 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

#atp-office-cta .atp-ofc-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

#atp-office-cta .atp-ofc-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    border-radius: 3px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: .25s ease !important;
}

#atp-office-cta .atp-ofc-light {
    color: #14243D !important;
    background: #FFFFFF !important;
}

#atp-office-cta .atp-ofc-light:hover {
    background: #FFE5D6 !important;
}

#atp-office-cta .atp-ofc-dark {
    color: #FFFFFF !important;
    background: #14243D !important;
}

#atp-office-cta .atp-ofc-dark:hover {
    background: #0B1628 !important;
}

#atp-office-cta .atp-ofc-card {
    padding: 32px !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(20, 36, 61, .18) !important;
}

#atp-office-cta .atp-ofc-card-title {
    margin: 0 0 8px !important;
    color: #14243D !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}

#atp-office-cta .atp-ofc-card li {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #F0E6DE !important;
}

#atp-office-cta .atp-ofc-card li:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

#atp-office-cta .atp-ofc-card li span {
    color: #F8752B !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

#atp-office-cta .atp-ofc-card li strong,
#atp-office-cta .atp-ofc-card li a {
    color: #14243D !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    word-break: break-word !important;
}

@media screen and (max-width: 1199px) {

    #atp-office-cta .atp-ofc-container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    #atp-office-cta h2 {
        font-size: 30px !important;
    }
}

@media screen and (max-width: 699px) {

    #atp-office-cta {
        padding: 56px 16px !important;
    }

    #atp-office-cta h2 {
        font-size: 25px !important;
        line-height: 1.45 !important;
    }

    #atp-office-cta .atp-ofc-actions,
    #atp-office-cta .atp-ofc-button {
        width: 100% !important;
    }

    #atp-office-cta .atp-ofc-card {
        padding: 24px 20px !important;
    }
}