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

/* ==========================================================================
   03 COMPARE
   ========================================================================== */
.areaCompare {
    padding: 80px 0 88px;
}

.areaCompare .commonHeadingLabel {
    color: #A45E00;
}

.areaCompare .commonHeadingLead {
    line-height: 1.7;
    color: #566777;
}

.areaCompare .areaCompareTableWrap {
    overflow: hidden;
    margin-top: 36px;
    background: #FFFFFF;
    border: 1px solid #D9E1EA;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(10, 26, 62, 0.04);
}

.areaCompare .areaCompareTable {
    width: 100%;
    table-layout: fixed;
}

.areaCompare .areaCompareTable thead th {
    padding: 24px;
    background: #0A1A3E;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    vertical-align: top;
    color: #FFFFFF;
}

.areaCompare .areaCompareTable thead th:first-child {
    width: 22.45%;
}

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

.areaCompare .areaCompareTable thead th span:not(.sp) {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 400;
    color: #BCCCE1;
}

.areaCompare .areaCompareTable thead .areaCompareTablePremium {
    color: #AADCEB;
}

.areaCompare .areaCompareTable tbody tr {
    border-bottom: 1px solid #D9E1EA;
}

.areaCompare .areaCompareTable tbody tr:last-child {
    border-bottom: 0;
}

.areaCompare .areaCompareTable tbody th {
    padding: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
}

.areaCompare .areaCompareTable tbody td {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.7;
    vertical-align: middle;
}

.areaCompare .areaCompareTable tbody td:nth-child(2) {
    color: #566777;
}

.areaCompare .areaCompareTable tbody td:nth-child(3) {
    background: #F0F8FB;
}

.areaCompare .areaCompareTable tbody td:nth-child(4) {
    background: #F0F5F8;
}

.areaCompare .areaCompareNote {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    font-size: 13px;
    line-height: 1.7;
    color: #566777;
}

.areaCompare .areaCompareNote img {
    flex-shrink: 0;
}

/* ==========================================================================
   04 EXPERIENCE
   ========================================================================== */
.areaExperience {
    padding: 48px 0;
    background: #0A1A3E;
}

.areaExperience .commonHeading {
    gap: 12px;
}

.areaExperience .commonHeadingLabel {
    font-size: 13px;
    color: #4DB0D7;
}

.areaExperience .commonHeadingTitle {
    font-size: 36px;
    line-height: 1.2;
    color: #FFFFFF;
}

.areaExperience .areaExperienceBody {
    display: flex;
    gap: 32px;
    margin-top: 24px;
}

.areaExperience .areaExperienceText {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    width: 560px;
    max-width: 45%;
}

.areaExperience .areaExperienceLabel {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #EC9013;
}

.areaExperience .areaExperienceLead {
    font-size: 18px;
    line-height: 1.8;
    color: #BCCCE1;
}

.areaExperience .areaExperiencePoint {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.areaExperience .areaExperienceList {
    display: grid;
    grid-template-columns: 259fr 170fr 203fr;
    gap: 12px;
}

.areaExperience .areaExperienceList li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #182C50;
    border: 1px solid #304566;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: #FFFFFF;
}

.areaExperience .areaExperienceIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #0A1A3E;
}

/* ==========================================================================
   05 REASON
   ========================================================================== */
.areaReason {
    padding: 80px 0;
    background: #0A1A3E;
}

.areaReason .inner {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.areaReason .areaReasonIntro {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex-shrink: 0;
    width: 460px;
}

.areaReason .commonHeadingLabel {
    color: #BCCCE1;
}

.areaReason .commonHeadingTitle {
    color: #FFFFFF;
}

.areaReason .areaReasonText {
    font-size: 16px;
    line-height: 1.8;
    color: #BCCCE1;
}

.areaReason .areaReasonCta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    background: #182C50;
    border: 1px solid #304566;
    border-radius: 12px;
}

.areaReason .areaReasonCtaTitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #FFFFFF;
}

.areaReason .areaReasonCtaText {
    font-size: 14px;
    line-height: 1.8;
    color: #BCCCE1;
}

.areaReason .areaReasonCtaButtons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.areaReason .areaReasonCtaButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #0A1A3E;
    transition: opacity 0.3s ease;
}

.areaReason .areaReasonCtaButtonZalo {
    background: #EC9013;
}

.areaReason .areaReasonCtaButtonForm {
    background: #4DB0D7;
}

@media (hover: hover) and (pointer: fine) {
    .areaReason .areaReasonCtaButton:hover {
        opacity: 0.85;
    }
}

.areaReason .areaReasonDetail {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
    min-width: 0;
}

.areaReason .areaReasonStats {
    display: flex;
    gap: 16px;
}

.areaReason .areaReasonStats li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 16px;
    background: #182C50;
    border: 1px solid #304566;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #BCCCE1;
}

.areaReason .areaReasonStatsValue {
    font-family: "Noto Serif", serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.36;
    color: #FFFFFF;
}

.areaReason .areaReasonSlogan {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #FFFFFF;
}

.areaReason .areaReasonSlogan::before {
    content: "";
    flex-shrink: 0;
    width: 32px;
    height: 2px;
    background: #4DB0D7;
}

.areaReason .areaReasonList li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid #304566;
}

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

.areaReason .areaReasonListIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #182C50;
}

.areaReason .areaReasonListBody {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.areaReason .areaReasonListTitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #FFFFFF;
}

.areaReason .areaReasonListText {
    font-size: 14px;
    line-height: 1.8;
    color: #BCCCE1;
}

/* ==========================================================================
   SAMPLE (Inter typography per design)
   ========================================================================== */
.areaSample {
    padding: 72px 0;
    background: #FAFBFD;
    font-family: "Inter", "Be Vietnam Pro", sans-serif;
    color: #172C44;
}

.areaSample .areaSampleInner {
    width: calc(100% - 80px);
    max-width: 1280px;
    margin: 0 auto;
}

.areaSample .areaSampleHead {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.areaSample .areaSampleLabel {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #255BC7;
}

.areaSample .areaSampleLabel span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #EEF4FF;
    font-weight: 700;
}

.areaSample .areaSampleTitle {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
}

.areaSample .areaSampleTabs {
    display: flex;
    margin-top: 32px;
    border-bottom: 1px solid #DFE6EF;
}

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

.areaSample .areaSampleTabs li:last-child {
    padding-right: 0;
}

.areaSample .areaSampleTab {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.areaSample .areaSampleTab::after {
    content: "";
    height: 2px;
    background: #DFE6EF;
}

.areaSample .areaSampleTab.is-current::after {
    background: #172C44;
}

.areaSample .areaSampleTab .areaSampleBadge {
    padding: 3px 8px;
    font-size: 11px;
}

.areaSample .areaSampleGroup {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.areaSample .areaSampleGroupStandard,
.areaSample .areaSampleGroupPremium {
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid #DFE6EF;
}

.areaSample .areaSampleIntro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #F0FDF4;
}

.areaSample .areaSampleIntroIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #16A34A;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
}

.areaSample .areaSampleIntroBody {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.areaSample .areaSampleIntroTitle {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #14532D;
}

.areaSample .areaSampleIntroText {
    font-size: 13px;
    color: #166534;
}

.areaSample .areaSampleList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
}

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

.areaSample .areaSampleGroupPremium .areaSampleList {
    margin-top: 8px;
}

.areaSample .areaSampleItem {
    overflow: hidden;
    padding: 8px 8px 5px;
    border: 1px solid #DFE6EF;
    border-radius: 12px;
}

.areaSample .areaSampleGroupStandard .areaSampleItem,
.areaSample .areaSampleGroupPremium .areaSampleItem {
    border-color: #C7D7F5;
}

.areaSample .areaSampleItemBar {
    display: block;
    height: 20px;
    border-radius: 4px 4px 0 0;
    background:
        url("../images/index/sample-dot.svg") 8px center / 4px no-repeat,
        url("../images/index/sample-dot.svg") 15px center / 4px no-repeat,
        url("../images/index/sample-dot.svg") 22px center / 4px no-repeat,
        #FFFFFF;
}

.areaSample .areaSampleGroupStandard .areaSampleItemBar,
.areaSample .areaSampleGroupPremium .areaSampleItemBar {
    background:
        url("../images/index/sample-dot-blue.svg") 8px center / 4px no-repeat,
        url("../images/index/sample-dot-blue.svg") 15px center / 4px no-repeat,
        url("../images/index/sample-dot-blue.svg") 22px center / 4px no-repeat,
        #FFFFFF;
}

.areaSample .areaSampleItem img {
    display: block;
    width: 100%;
    aspect-ratio: 293 / 186;
    object-fit: cover;
}

/* Preview background colours per template */
#sampleLight .areaSampleItem:nth-child(1) { background: #F2EDE4; }
#sampleLight .areaSampleItem:nth-child(2) { background: #EAF1F4; }
#sampleLight .areaSampleItem:nth-child(3) { background: #F2ECE2; }
#sampleLight .areaSampleItem:nth-child(4) { background: #F5F0FB; }
#sampleLight .areaSampleItem:nth-child(5) { background: #EFF6EE; }
#sampleLight .areaSampleItem:nth-child(6) { background: #FFF7F0; }
#sampleLight .areaSampleItem:nth-child(7) { background: #F0F4FF; }
#sampleLight .areaSampleItem:nth-child(8) { background: #F9F5EE; }
#sampleLight .areaSampleItem:nth-child(9) { background: #F5FAFA; }
#sampleLight .areaSampleItem:nth-child(10) { background: #FFF0F3; }
#sampleLight .areaSampleItem:nth-child(11) { background: #FFFBEB; }
#sampleLight .areaSampleItem:nth-child(12) { background: #F3F4F6; }
.areaSample .areaSampleGroupStandard .areaSampleItem:nth-child(1),
.areaSample .areaSampleGroupPremium .areaSampleItem:nth-child(1) { background: #EAF0FF; }
.areaSample .areaSampleGroupStandard .areaSampleItem:nth-child(2),
.areaSample .areaSampleGroupPremium .areaSampleItem:nth-child(2) { background: #F0FFF4; }
.areaSample .areaSampleGroupStandard .areaSampleItem:nth-child(3),
.areaSample .areaSampleGroupPremium .areaSampleItem:nth-child(3) { background: #F5F3FF; }
.areaSample .areaSampleGroupStandard .areaSampleItem:nth-child(4),
.areaSample .areaSampleGroupPremium .areaSampleItem:nth-child(4) { background: #FFF1F2; }

.areaSample .areaSampleGroupHead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.areaSample .areaSampleBadge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.areaSample .areaSampleBadgeLight {
    background: #F0FDF4;
    color: #16A34A;
}

.areaSample .areaSampleBadgeStandard {
    background: #EEF4FF;
    color: #255BC7;
}

.areaSample .areaSampleBadgePremium {
    background: #FFF7ED;
    color: #C2410C;
}

.areaSample .areaSampleGroupTitle {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
}

.areaSample .areaSampleGroupMore {
    font-size: 13px;
    font-weight: 600;
    color: #255BC7;
    white-space: nowrap;
}

.areaSample .areaSampleGroupPremium .areaSampleGroupMore {
    color: #C2410C;
}

@media (hover: hover) and (pointer: fine) {
    .areaSample .areaSampleGroupMore {
        transition: opacity 0.3s ease;
    }

    .areaSample .areaSampleGroupMore:hover {
        opacity: 0.7;
    }
}

/* SAMPLE ITEM BUTTON */
.areaSample .areaSampleItemButton {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

@media (hover: hover) and (pointer: fine) {
    .areaSample .areaSampleItem img {
        transition: opacity 0.3s ease;
    }

    .areaSample .areaSampleItemButton:hover img {
        opacity: 0.8;
    }
}

/* SAMPLE POPUP (Fancybox) */
.areaSampleFancybox .fancybox__caption {
    padding-top: 12px;
    font-size: 14px;
    font-weight: 600;
}

/* thumbnails: show the top of each full page */
.areaSampleFancybox .f-thumbs__slide__img {
    object-position: top center;
}

.areaSample .areaSampleGroupText {
    padding: 14px;
    border-radius: 8px;
    background: #FFF7ED;
    font-size: 13px;
    color: #92400E;
}

.areaSample .areaSampleNote {
    margin-top: 24px;
    padding: 16px;
    background: #F8FAFC;
    border: 1px solid #DFE6EF;
    border-radius: 8px;
    font-size: 12px;
    color: #5B6C7E;
}

.areaSample .areaSampleNote strong {
    font-weight: 600;
    color: #172C44;
}

.areaSample .areaSampleTip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    padding: 18px;
    border-radius: 8px;
    background: #EEF4FF;
    font-size: 14px;
}

.areaSample .areaSampleTip img {
    flex-shrink: 0;
}

.areaSample .areaSampleTipTitle {
    font-weight: 600;
    line-height: 1.2;
    color: #255BC7;
    white-space: nowrap;
}

.areaSample .areaSampleTipText {
    flex: 1;
    line-height: 1.55;
}

/* ==========================================================================
   COST
   ========================================================================== */
.areaCost {
    padding: 80px 0 88px;
}

.areaCost .commonHeadingLabel {
    color: #A45E00;
}

.areaCost .areaCostList {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-top: 52px;
}

.areaCost .areaCostItem {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 0;
    min-height: 451px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #D9E1EA;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(10, 26, 62, 0.04);
}

.areaCost .areaCostItemHead {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.areaCost .areaCostItemName {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.areaCost .areaCostItemDot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

.areaCost .areaCostItemDotShopee { background: #EE4D2D; }
.areaCost .areaCostItemDotLazada { background: #F57224; }
.areaCost .areaCostItemDotTiktok { background: #010101; }
.areaCost .areaCostItemDotOwn { background: #4DB0D7; }

.areaCost .areaCostItemSub {
    font-size: 11px;
    line-height: 1.2;
    color: #8FA4B8;
}

.areaCost .areaCostBox {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: 10px;
}

.areaCost .areaCostBoxFee {
    background: #FFF8F5;
}

.areaCost .areaCostBoxFeeTiktok {
    background: #F5F5F5;
}

.areaCost .areaCostBoxPay {
    padding: 14px 16px;
    background: #F7FBFF;
}

.areaCost .areaCostBoxLabel {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: #8FA4B8;
}

.areaCost .areaCostBoxValue {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #0A1A3E;
    white-space: nowrap;
}

.areaCost .areaCostBoxValueShopee {
    font-size: 30px;
    color: #EE4D2D;
}

.areaCost .areaCostBoxValueLazada {
    color: #F57224;
}

.areaCost .areaCostBoxValueTiktok {
    font-size: 26px;
    color: #010101;
}

.areaCost .areaCostBoxValueMall {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 32px;
    font-weight: 600;
}

.areaCost .areaCostBoxValueMall::before {
    content: "";
    width: 20px;
    height: 1px;
    background: #D9E1EA;
}

.areaCost .areaCostBoxNote {
    font-size: 11px;
    line-height: 1.5;
    color: #566777;
}

.areaCost .areaCostBoxNoteSub {
    margin-top: 2px;
    line-height: 1.2;
}

.areaCost .areaCostBoxWarn {
    padding-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #A45E00;
}

.areaCost .areaCostItemFoot {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.areaCost .areaCostItemFootValue {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #566777;
}

/* Own website (dark card) */
.areaCost .areaCostItemOwn {
    background: #0A1A3E;
    border-color: #1E3A6E;
    box-shadow: 0 4px 16px rgba(10, 26, 62, 0.15);
    color: #FFFFFF;
}

.areaCost .areaCostItemOwn .areaCostItemSub,
.areaCost .areaCostItemOwn .areaCostBoxNote {
    color: #BCCCE1;
}

.areaCost .areaCostItemOwn .areaCostBox {
    background: #122040;
}

.areaCost .areaCostItemOwn .areaCostBoxLabel {
    color: #4DB0D7;
}

.areaCost .areaCostItemOwn .areaCostBoxFee .areaCostBoxValue {
    font-size: 30px;
    color: #4DB0D7;
}

.areaCost .areaCostItemOwn .areaCostBoxWarn {
    padding-top: 6px;
    color: #AADCEB;
}

.areaCost .areaCostItemOwn .areaCostBoxValueText {
    font-size: 16px;
    color: #FFFFFF;
}

.areaCost .areaCostItemOwn .areaCostItemFootValue {
    font-size: 14px;
    color: #FFFFFF;
}

.areaCost .areaCostSummary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 52px;
    padding: 28px;
    border-radius: 12px;
    background: #0A1A3E;
}

.areaCost .areaCostSummaryTitle {
    font-size: 15px;
    font-weight: 600;
    color: #AADCEB;
}

.areaCost .areaCostSummaryText {
    font-size: 14px;
    line-height: 1.8;
    color: #BCCCE1;
}