@charset "utf-8";
/* Only24h — index styles (phần tiếp theo, tách để mỗi file < 1000 dòng) */

/* ==========================================================================
   RESPONSIVE: PC narrow (769px - 1339px)
   ========================================================================== */
@media (max-width: 1339px) {
    .areaMainVisual .inner {
        flex-direction: column;
        align-items: stretch;
    }

    .areaMainVisual .areaMainVisualMessage {
        width: auto;
        max-width: 640px;
    }

    .areaMainVisual .areaMainVisualPreviewInner {
        margin: 0 auto;
    }

    .areaSocial .inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .areaReason .inner {
        gap: 48px;
    }

    .areaReason .areaReasonIntro {
        width: 380px;
    }

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

    .areaReason .areaReasonStats li {
        flex: 1 1 calc(50% - 8px);
    }

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

    .areaCost .areaCostItem {
        flex: 1 1 calc(50% - 8px);
    }

    .areaContact .inner {
        gap: 48px;
    }

    .areaContact .areaContactIntro {
        width: 360px;
    }

    .areaExperience .areaExperienceBody {
        flex-direction: column;
    }

    .areaExperience .areaExperienceText {
        width: auto;
        max-width: none;
    }

    .areaPlan .areaPlanItem {
        padding: 28px;
    }

    .areaPlan .areaPlanItemPriceValue {
        font-size: 34px;
        white-space: normal;
    }

    .areaPlan .areaPlanCtaBody {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1023px) {
    .areaPlan .areaPlanList {
        flex-direction: column;
    }

    .areaPlan .areaPlanItemText,
    .areaPlan .areaPlanItemScope {
        min-height: 0;
    }

    .areaSocial .areaSocialFlow {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .areaSocial .areaSocialStep {
        padding-top: 0;
        text-align: center;
    }

    .areaSocial .areaSocialStepPhone {
        width: auto;
        margin-left: 0;
    }

    .areaSocial .areaSocialStepImage img {
        margin: 0 auto;
    }

    .areaSocial .areaSocialStepWebsite {
        width: 100%;
        max-width: 452px;
    }

    .areaSocial .areaSocialArrow {
        width: auto;
        margin: 8px 0;
        transform: rotate(90deg);
    }
}

/* ==========================================================================
   RESPONSIVE: SP (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Main visual */
    .areaMainVisual {
        padding: 40px 0 48px;
    }

    .areaMainVisual .inner {
        gap: 40px;
    }

    .areaMainVisual .areaMainVisualMessage {
        gap: 20px;
    }

    .areaMainVisual .areaMainVisualTitle {
        font-size: 34px;
    }

    .areaMainVisual .areaMainVisualText {
        font-size: 15px;
    }

    .areaMainVisual .areaMainVisualButtons {
        flex-direction: column;
        align-self: stretch;
    }

    .areaMainVisual .areaMainVisualPreviewInner {
        zoom: 0.8;
    }

    /* Value */
    .areaValue {
        padding: 56px 0;
    }

    .areaValue .commonHeadingLabel {
        font-size: 13px;
    }

    .areaValue .areaValueCard {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-top: 24px;
        padding: 16px;
    }

    .areaValue .areaValueImage {
        width: 100%;
        max-width: none;
    }

    .areaValue .areaValueText {
        font-size: 15px;
    }

    /* Social */
    .areaSocial {
        padding: 48px 0;
    }

    .areaSocial .inner {
        gap: 32px;
    }

    .areaSocial .areaSocialMessage {
        width: auto;
        gap: 12px;
    }

    .areaSocial .areaSocialTitle {
        font-size: 26px;
        white-space: normal;
    }

    .areaSocial .areaSocialSub {
        font-size: 22px;
    }

    /* Google */
    .areaGoogle {
        padding: 48px 0;
    }

    .areaGoogle .areaGoogleTitle {
        font-size: 26px;
    }

    .areaGoogle .areaGoogleList {
        flex-direction: column;
        gap: 40px;
        margin-top: 24px;
    }

    .areaGoogle .areaGoogleItemTitle {
        font-size: 19px;
    }

    /* Plan */
    .areaPlan {
        padding: 56px 0 48px;
    }

    .areaPlan .areaPlanHead {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .areaPlan .areaPlanHead .commonHeading {
        width: auto;
        max-width: none;
    }

    .areaPlan .areaPlanHeadText {
        font-size: 15px;
    }

    .areaPlan .areaPlanList {
        flex-direction: column;
        gap: 16px;
        margin-top: 32px;
    }

    .areaPlan .areaPlanItem {
        gap: 22px;
        padding: 24px 20px;
    }

    .areaPlan .areaPlanItemName {
        font-size: 26px;
    }

    .areaPlan .areaPlanItemText {
        min-height: 0;
    }

    .areaPlan .areaPlanItemPriceValue {
        font-size: 34px;
    }

    .areaPlan .areaPlanItemPriceValue span {
        font-size: 22px;
    }

    .areaPlan .areaPlanItemScope {
        min-height: 0;
        padding-top: 22px;
    }

    .areaPlan .areaPlanCta {
        margin-top: 32px;
    }

    .areaPlan .areaPlanCtaBar {
        padding: 12px 16px;
        font-size: 13px;
    }

    .areaPlan .areaPlanCtaBody {
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }

    .areaPlan .areaPlanCtaTitle {
        font-size: 20px;
    }

    .areaPlan .areaPlanCtaButtons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .areaPlan .areaPlanCtaZalo,
    .areaPlan .areaPlanCtaForm {
        justify-content: center;
    }

    /* Compare */
    .areaCompare {
        padding: 56px 0;
    }

    .areaCompare .areaCompareTableWrap {
        overflow-x: auto;
        margin-top: 28px;
        -webkit-overflow-scrolling: touch;
    }

    .areaCompare .areaCompareTable {
        min-width: 760px;
    }

    .areaCompare .areaCompareTable thead th {
        padding: 18px 16px;
        font-size: 17px;
    }

    .areaCompare .areaCompareTable thead th:first-child {
        width: 150px;
    }

    .areaCompare .areaCompareTable thead th:nth-child(2),
    .areaCompare .areaCompareTable thead th:nth-child(3) {
        width: 200px;
    }

    .areaCompare .areaCompareTable thead th:first-child .sp {
        font-size: 13px;
        font-weight: 500;
        color: #BCCCE1;
    }

    .areaCompare .areaCompareTable tbody th,
    .areaCompare .areaCompareTable tbody td {
        padding: 16px;
        font-size: 13px;
    }

    .areaCompare .areaCompareNote {
        align-items: flex-start;
        margin-top: 24px;
    }

    /* Experience */
    .areaExperience {
        padding: 48px 0;
    }

    .areaExperience .commonHeadingTitle {
        font-size: 26px;
    }

    .areaExperience .areaExperienceLead {
        font-size: 16px;
    }

    .areaExperience .areaExperienceList {
        grid-template-columns: 1fr;
    }

    .areaExperience .areaExperienceList li {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    /* Reason */
    .areaReason {
        padding: 56px 0;
    }

    .areaReason .inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .areaReason .areaReasonIntro {
        width: auto;
        gap: 24px;
    }

    .areaReason .areaReasonText {
        font-size: 15px;
    }

    .areaReason .areaReasonCta {
        padding: 20px;
    }

    .areaReason .areaReasonCtaButtons {
        align-self: stretch;
    }

    .areaReason .areaReasonCtaButton {
        justify-content: center;
        width: 100%;
    }

    .areaReason .areaReasonStats {
        gap: 12px;
    }

    .areaReason .areaReasonStats li {
        flex: 1 1 calc(50% - 6px);
    }

    .areaReason .areaReasonStatsValue {
        font-size: 24px;
    }

    .areaReason .areaReasonDetail {
        gap: 24px;
    }

    .areaReason .areaReasonList li {
        gap: 16px;
        padding: 22px 0;
    }

    .areaReason .areaReasonList li + li {
        margin-top: 0;
    }

    .areaReason .areaReasonListTitle {
        font-size: 16px;
    }

    /* Sample */
    .areaSample {
        padding: 56px 0;
    }

    .areaSample .areaSampleInner {
        width: 100%;
        padding: 0 4%;
    }

    .areaSample .areaSampleTitle {
        font-size: 26px;
    }

    .areaSample .areaSampleTabs {
        margin-top: 24px;
    }

    .areaSample .areaSampleTabs li {
        padding-right: 20px;
    }

    .areaSample .areaSampleList,
    .areaSample .areaSampleGroupStandard .areaSampleList,
    .areaSample .areaSampleGroupPremium .areaSampleList {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

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

    .areaSample .areaSampleTip {
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-top: 24px;
    }

    .areaSample .areaSampleTipText {
        flex-basis: 100%;
    }

    /* Cost */
    .areaCost {
        padding: 56px 0;
    }

    .areaCost .areaCostList {
        flex-direction: column;
        margin-top: 32px;
    }

    .areaCost .areaCostItem {
        flex-basis: auto;
        min-height: 0;
    }

    .areaCost .areaCostSummary {
        margin-top: 32px;
        padding: 20px;
    }

    /* Flow */
    .areaFlow {
        padding: 56px 0;
    }

    .areaFlow .areaFlowHead {
        padding: 20px;
    }

    .areaFlow .areaFlowList {
        gap: 16px;
        margin-top: 32px;
    }

    .areaFlow .areaFlowItem {
        gap: 12px;
    }

    .areaFlow .areaFlowItemNumber {
        width: 40px;
        height: 40px;
        margin: 0;
        font-size: 17px;
    }

    .areaFlow .areaFlowItem::after {
        top: 48px;
        left: 19px;
        height: calc(100% - 32px);
    }

    .areaFlow .areaFlowItemBody {
        padding: 16px;
    }

    .areaFlow .areaFlowItemTitle {
        font-size: 16px;
    }

    /* FAQ */
    .areaFaq {
        padding: 56px 0;
    }

    .areaFaq .areaFaqIntro {
        gap: 20px;
    }

    .areaFaq .areaFaqList {
        margin-top: 40px;
    }

    .areaFaq .areaFaqItem {
        padding: 20px 0;
    }

    .areaFaq .areaFaqQuestion {
        gap: 16px;
        font-size: 15px;
    }

    /* Contact */
    .areaContact {
        padding: 56px 0;
    }

    .areaContact .inner {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .areaContact .areaContactIntro {
        width: auto;
        gap: 24px;
    }

    .areaContact .areaContactText {
        font-size: 15px;
    }

    .areaContact .areaContactForm {
        gap: 18px;
        padding: 24px 20px;
    }

    .areaContact .areaContactFormTitle {
        font-size: 20px;
    }

    .areaContact .areaContactFormRow {
        flex-direction: column;
        gap: 18px;
    }

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

    .areaContact .areaContactPlan {
        flex: 1 1 calc(50% - 5px);
    }
}

@media (max-width: 600px) {
    .areaMainVisual .areaMainVisualPreviewInner {
        zoom: 0.6;
    }
}

@media (max-width: 440px) {
    .areaMainVisual .areaMainVisualPreviewInner {
        zoom: 0.5;
    }

    .areaMainVisual .areaMainVisualTitle {
        font-size: 30px;
    }

    .areaSample .areaSampleList,
    .areaSample .areaSampleGroupStandard .areaSampleList,
    .areaSample .areaSampleGroupPremium .areaSampleList {
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jsAnimate .jsFadeUp {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .areaMainVisual .areaMainVisualButtonMain,
    .areaMainVisual .areaMainVisualPreviewBg,
    .areaMainVisual .mvBrowser {
        animation: none;
    }
}