/* ============================================================
   ZeWork — Tổng đài Zalo Page Styles
   Đồng bộ design system với trang "Đồng bộ hóa tin nhắn"
   (rem base = 10px, primary #027BFF, nền sáng)
   ============================================================ */

:root {
    --zw-blue: #027BFF;
    --zw-blue-light: #4da3ff;
    --zw-blue-dark: #0055CC;
    --zw-blue-50: #F0F7FF;
    --zw-blue-200: #B2DDFF;
    --zw-ink: #101828;
    --zw-body: #475467;
    --zw-muted: #667085;
    --zw-border: #EAECF0;
    --zw-surface: #F9FAFB;
    --zw-surface-2: #F2F4F7;
    --zw-green: #12B76A;
    --zw-green-dark: #039855;
    --zw-green-50: #ECFDF3;
    --zw-red: #D92D20;
    --zw-red-50: #FEF3F2;
    --zw-purple: #6941C6;
    --zw-amber-50: #FEF0C7;
    --zw-amber-700: #B54708;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8fbff;
    color: var(--zw-ink);
    overflow-x: hidden;
}

.gradient-text {
    background: linear-gradient(135deg, #027BFF 0%, #00c6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.highlight-text {
    color: var(--zw-blue);
    font-weight: 700;
}

.text-red {
    color: var(--zw-red);
}

.text-green {
    color: var(--zw-green-dark);
}

/* ═══ SECTION COMMON ═══ */
.sec {
    padding: 3.2rem 4.8rem;
}

.container {
    max-width: 120rem;
    margin: 0 auto;
}

.sec-header {
    margin-bottom: 2.8rem;
    text-align: center;
}

.sec-label {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: rgba(2, 123, 255, 0.1);
    color: var(--zw-blue);
    border-radius: 10rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1.2rem;
}

.sec-title {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--zw-ink);
    margin-bottom: 1.2rem;
}

.sec-desc {
    font-size: 1.8rem;
    color: var(--zw-body);
    line-height: 1.6;
    max-width: 86rem;
    margin: 0 auto;
}

/* ═══ HERO ═══ */
.hero {
    padding: 10rem 4.8rem 3.2rem;
    background: radial-gradient(circle at 70% 30%, rgba(2, 123, 255, 0.08) 0%, transparent 50%);
    overflow: hidden;
    position: relative;
}

.hero-grid {
    max-width: 120rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1.4rem;
    background: rgba(2, 123, 255, 0.1);
    color: var(--zw-blue);
    border-radius: 10rem;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.6rem;
}

.hero-tag .pulse {
    width: 0.8rem;
    height: 0.8rem;
    background: var(--zw-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(18, 183, 106, .45)
    }

    50% {
        box-shadow: 0 0 0 0.5rem rgba(18, 183, 106, 0)
    }
}

.hero h1 {
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--zw-ink);
    margin-bottom: 1.6rem;
}

.hero-sub {
    font-size: 2rem;
    color: var(--zw-body);
    line-height: 1.6;
    max-width: 78rem;
    margin: 0 auto 2.4rem;
}

.hero-btns {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2.4rem;
}

.hero-metrics {
    display: flex;
    gap: 1.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3.2rem;
}

.metric {
    background: #fff;
    border: 0.1rem solid var(--zw-border);
    border-radius: 1.6rem;
    padding: 1.4rem 2.8rem;
    text-align: center;
    box-shadow: 0 0.4rem 1.2rem rgba(16, 24, 40, 0.04);
}

.metric .val {
    display: block;
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--zw-blue);
    line-height: 1.2;
}

.metric .lbl {
    font-size: 1.3rem;
    color: var(--zw-muted);
    text-transform: uppercase;
    letter-spacing: 0.06rem;
    font-weight: 600;
}

.hero-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-visual canvas {
    width: 100%;
    max-width: 100rem;
    border-radius: 2.4rem;
    border: 0.1rem solid var(--zw-border);
    background: #f8fbff;
    box-shadow: 0 3rem 6rem rgba(16, 24, 40, 0.10);
}

/* ═══ CALL FLOW ═══ */
.flow-sec {
    background: #ffffff;
}

.flow-layout {
    display: grid;
    grid-template-columns: 36rem 1fr;
    gap: 3.2rem;
    align-items: stretch;
}

.flow-tabs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.8rem;
    height: 100%;
}

.flow-tab {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem 1.6rem;
    border-radius: 1.6rem;
    cursor: pointer;
    transition: all .3s ease;
    border: 0.1rem solid transparent;
    background: transparent;
    flex: 1 1 0;
    width: 100%;
    font: inherit;
    text-align: left;
}

.flow-tab-txt {
    flex: 1;
}

.flow-tab:hover {
    background: var(--zw-surface);
}

.flow-tab.active {
    background: var(--zw-blue-50);
    border-color: var(--zw-blue-200);
}

.flow-tab-num {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
    border: 0.1rem solid var(--zw-border);
    box-shadow: 0 0.4rem 1rem rgba(16, 24, 40, 0.05);
    transition: all .3s ease;
    overflow: hidden;
    position: relative;
}

.flow-tab-num img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    opacity: .55;
    transition: all .3s ease;
}

.flow-tab-num span {
    position: absolute;
    bottom: 0.2rem;
    right: 0.4rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--zw-muted);
    background: rgba(255, 255, 255, .9);
    border-radius: 0.4rem;
    padding: 0 0.4rem;
    line-height: 1.4;
}

.flow-tab.active .flow-tab-num {
    background: var(--zw-blue);
    border-color: var(--zw-blue);
    box-shadow: 0 0.6rem 1.6rem rgba(2, 123, 255, .3);
}

.flow-tab.active .flow-tab-num img {
    opacity: 1;
}

.flow-tab.active .flow-tab-num span {
    background: rgba(2, 123, 255, .9);
    color: #fff;
}

.flow-tab-txt h4 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--zw-ink);
    margin-bottom: 0.4rem;
}

.flow-tab-txt p {
    font-size: 1.5rem;
    color: var(--zw-body);
    line-height: 1.5;
}

.flow-tab.active .flow-tab-txt h4 {
    color: var(--zw-blue-dark);
}

.flow-tab-progress {
    width: 100%;
    height: 0.4rem;
    background: var(--zw-border);
    border-radius: 0.2rem;
    margin-top: 1rem;
    overflow: hidden;
}

.flow-tab-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #027BFF, #4da3ff);
    border-radius: 0.2rem;
}

@keyframes progress-fill {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* Flow preview */
.flow-preview {
    background: var(--zw-surface);
    border: 0.1rem solid var(--zw-border);
    border-radius: 2.4rem;
    padding: 3.2rem;
    min-height: 50rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(2, 123, 255, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.flow-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.96);
    transition: all .5s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
    padding: 3.2rem 3.2rem 9rem;
}

.flow-scene.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.scene-img {
    width: 22rem;
    border-radius: 1.6rem;
    margin-bottom: 2.4rem;
    box-shadow: 0 2rem 4rem rgba(16, 24, 40, 0.12);
    border: 0.1rem solid var(--zw-border);
}

.scene-img.wide {
    width: 26rem;
}

.scene-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--zw-ink);
}

.scene-title.is-green {
    color: var(--zw-green-dark);
}

.scene-title.is-purple {
    color: var(--zw-purple);
}

.scene-desc {
    font-size: 1.6rem;
    color: var(--zw-body);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

.scene-label {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--zw-muted);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    background: #ffffff;
    border: 0.1rem solid var(--zw-border);
    padding: 0.8rem 1.8rem;
    border-radius: 10rem;
    box-shadow: 0 0.4rem 1.2rem rgba(16, 24, 40, 0.05);
}

/* Music bars */
.music-bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 0.5rem;
    height: 7rem;
}

.music-bar {
    width: 0.8rem;
    border-radius: 0.4rem;
    background: linear-gradient(180deg, #12B76A, #039855);
    animation: m-bar .6s ease-in-out infinite alternate;
}

.music-bar:nth-child(1) {
    height: 3rem;
    animation-delay: 0s
}

.music-bar:nth-child(2) {
    height: 5rem;
    animation-delay: .1s
}

.music-bar:nth-child(3) {
    height: 7rem;
    animation-delay: .2s
}

.music-bar:nth-child(4) {
    height: 3.8rem;
    animation-delay: .15s
}

.music-bar:nth-child(5) {
    height: 6.2rem;
    animation-delay: .25s
}

.music-bar:nth-child(6) {
    height: 4.5rem;
    animation-delay: .05s
}

.music-bar:nth-child(7) {
    height: 5.6rem;
    animation-delay: .3s
}

.music-bar:nth-child(8) {
    height: 2.5rem;
    animation-delay: .12s
}

@keyframes m-bar {
    from {
        transform: scaleY(.3)
    }

    to {
        transform: scaleY(1)
    }
}

/* Notification cards */
.notif-grid {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.4rem;
}

.notif-card {
    background: #ffffff;
    border: 0.1rem solid var(--zw-border);
    border-radius: 1.2rem;
    padding: 1.2rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: notif-pop .4s ease both;
    min-width: 19rem;
    box-shadow: 0 0.4rem 1.2rem rgba(16, 24, 40, 0.05);
    position: relative;
}

.notif-card:nth-child(1) {
    animation-delay: .2s
}

.notif-card:nth-child(2) {
    animation-delay: .6s
}

.notif-card:nth-child(3) {
    animation-delay: 1s
}

@keyframes notif-pop {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(.9)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.notif-av {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.notif-info .n-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zw-ink);
}

.notif-info .n-status {
    font-size: 1.3rem;
    font-weight: 600;
}

.notif-info .n-status.online {
    color: var(--zw-green-dark)
}

.notif-info .n-status.busy {
    color: var(--zw-amber-700)
}

.notif-ring {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--zw-red);
    border-radius: 50%;
    border: 0.2rem solid #fff;
    animation: notif-pulse 1s infinite;
}

@keyframes notif-pulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.2)
    }
}

/* Connecting dots */
.conn-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2rem;
}

.conn-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--zw-green);
    animation: conn-flow .8s ease-in-out infinite;
}

.conn-dot:nth-child(2) {
    animation-delay: .2s
}

.conn-dot:nth-child(3) {
    animation-delay: .4s
}

@keyframes conn-flow {

    0%,
    100% {
        opacity: .2
    }

    50% {
        opacity: 1
    }
}

.conn-text {
    color: var(--zw-green-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin-left: 0.6rem;
}

/* Recording */
.rec-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--zw-red-50);
    border: 0.1rem solid #FECDCA;
    padding: 0.8rem 1.8rem;
    border-radius: 10rem;
    margin-bottom: 1.6rem;
}

.rec-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--zw-red);
    animation: rec-blink 1s infinite;
}

@keyframes rec-blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.rec-text {
    color: #B42318;
    font-size: 1.5rem;
    font-weight: 700;
}

.rec-stats {
    display: flex;
    gap: 2.4rem;
    justify-content: center;
    margin-top: 2.4rem;
    flex-wrap: wrap;
}

.rec-stat {
    text-align: center;
    background: #ffffff;
    border: 0.1rem solid var(--zw-border);
    border-radius: 1.2rem;
    padding: 1.2rem 1.8rem;
    min-width: 9rem;
    box-shadow: 0 0.4rem 1rem rgba(16, 24, 40, 0.04);
}

.rec-stat .val {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--zw-ink);
}

.rec-stat .lbl {
    font-size: 1.3rem;
    color: var(--zw-muted);
    font-weight: 600;
}

/* ═══ FEATURES ═══ */
.feat-sec {
    background: #fcfdfe;
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
}

.feat {
    background: var(--zw-surface);
    border: 0.1rem solid var(--zw-border);
    border-radius: 2.4rem;
    padding: 3.2rem;
    transition: all .3s ease;
}

.feat:hover {
    transform: translateY(-1rem);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, .06);
    border-color: var(--zw-blue);
}

.feat-ic {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 1.6rem;
    margin-bottom: 1.6rem;
    object-fit: contain;
}

.feat h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: var(--zw-ink);
}

.feat p {
    font-size: 1.6rem;
    color: var(--zw-body);
    line-height: 1.6;
}

/* ═══ USE CASES ═══ */
.uc-sec {
    background: #ffffff;
}

.uc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}

.uc {
    background: var(--zw-surface);
    border: 0.1rem solid var(--zw-border);
    border-radius: 2.4rem;
    padding: 2.8rem;
    transition: all .3s ease;
}

.uc:hover {
    transform: translateY(-1rem);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, .06);
    border-color: var(--zw-blue);
}

.uc-emoji {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 1.6rem;
    margin-bottom: 1.2rem;
    object-fit: contain;
}

.uc h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--zw-ink);
    margin-bottom: 1rem;
}

.uc p {
    font-size: 1.6rem;
    color: var(--zw-body);
    line-height: 1.6;
}

.uc-example {
    margin-top: 1.2rem;
    padding: 1.4rem 1.6rem;
    background: var(--zw-blue-50);
    border: 0.1rem solid var(--zw-blue-200);
    border-radius: 1.2rem;
}

.uc-example span {
    color: #344054;
    font-size: 1.4rem;
    line-height: 1.6;
}

.uc-tags {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

.uc-tag {
    padding: 0.5rem 1.2rem;
    background: rgba(2, 123, 255, .1);
    color: var(--zw-blue);
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 10rem;
}

/* ═══ TESTIMONIALS ═══ */
.testi-sec {
    background: #fcfdfe;
}

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
}

.testi {
    background: #ffffff;
    border: 0.1rem solid var(--zw-border);
    border-radius: 2.4rem;
    padding: 2.8rem;
    transition: all .3s ease;
}

.testi:hover {
    transform: translateY(-1rem);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, .06);
    border-color: var(--zw-blue);
}

.testi-stars {
    color: #F79009;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    letter-spacing: 0.2rem;
}

.testi-quote {
    font-size: 1.6rem;
    color: var(--zw-body);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.testi-av {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.testi-info .t-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--zw-ink);
}

.testi-info .t-role {
    font-size: 1.3rem;
    color: var(--zw-muted);
}

/* ═══ COST SAVINGS ═══ */
.save-sec {
    background: #ffffff;
}

.save-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    margin-bottom: 2rem;
}

.save-card {
    border-radius: 2.4rem;
    padding: 3.2rem;
    position: relative;
    overflow: hidden;
}

.save-card.old {
    background: var(--zw-surface);
    border: 0.1rem solid var(--zw-border);
}

.save-card.new {
    background: var(--zw-blue-50);
    border: 0.1rem solid var(--zw-blue-200);
}

.save-card .badge {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    border-radius: 10rem;
    margin-bottom: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.save-card.old .badge {
    background: var(--zw-surface-2);
    color: var(--zw-body);
}

.save-card.new .badge {
    background: var(--zw-blue);
    color: #fff;
}

.save-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.6rem;
}

.save-card.old h3 {
    color: var(--zw-body);
}

.save-card.new h3 {
    color: #004EEB;
}

.save-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem;
    padding: 1rem 0;
    border-bottom: 0.1rem solid rgba(16, 24, 40, .07);
}

.save-row:last-child {
    border-bottom: none;
}

.save-row .item {
    font-size: 1.6rem;
    color: var(--zw-body);
}

.save-row .cost {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.save-card.old .cost {
    color: var(--zw-red);
}

.save-card.new .cost {
    color: var(--zw-green-dark);
}

.save-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem;
    padding: 1.8rem 0 0;
    margin-top: 1rem;
    border-top: 0.2rem solid;
}

.save-card.old .save-total {
    border-color: #D0D5DD;
}

.save-card.new .save-total {
    border-color: var(--zw-blue-200);
}

.save-total .item {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--zw-ink);
}

.save-total .cost {
    font-size: 2.4rem;
    font-weight: 700;
}

.save-highlight {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    background: var(--zw-green-50);
    border: 0.1rem solid #A6F4C5;
    border-radius: 2.4rem;
    padding: 3.2rem;
    max-width: 100rem;
    margin: 0 auto;
    text-align: left;
}

.save-highlight .big-num {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--zw-green-dark);
    white-space: nowrap;
    line-height: 1.3;
}

.save-highlight .txt h4 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--zw-ink);
    margin-bottom: 0.8rem;
}

.save-highlight .txt p {
    font-size: 1.7rem;
    color: #344054;
    line-height: 1.6;
}

/* ═══ COMPARE ═══ */
.cmp-sec {
    background: #fcfdfe;
}

.cmp-wrap {
    max-width: 90rem;
    margin: 0 auto;
    border-radius: 2rem;
    overflow: hidden;
    border: 0.1rem solid var(--zw-border);
    background: #fff;
    box-shadow: 0 2rem 4rem rgba(16, 24, 40, 0.06);
}

.cmp-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.cmp-wrap thead th {
    padding: 1.8rem 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    text-align: left;
}

.cmp-wrap thead th:first-child {
    background: var(--zw-ink);
    color: #fff;
}

.cmp-wrap thead th:nth-child(2) {
    background: var(--zw-blue);
    color: #fff;
    text-align: center;
}

.cmp-wrap thead th:nth-child(3) {
    background: #344054;
    color: #fff;
    text-align: center;
}

.cmp-wrap td {
    padding: 1.6rem 2rem;
    font-size: 1.6rem;
    color: var(--zw-body);
    border-bottom: 0.1rem solid var(--zw-border);
}

.cmp-wrap td:nth-child(2),
.cmp-wrap td:nth-child(3) {
    text-align: center;
    font-weight: 600;
}

.cmp-wrap tr:last-child td {
    border-bottom: none;
}

.cmp-wrap tbody tr:hover td {
    background: var(--zw-surface);
}

.ck {
    color: var(--zw-green);
    font-size: 1.6rem;
    font-weight: 700;
}

.cx {
    color: var(--zw-red);
    font-size: 1.6rem;
    font-weight: 700;
}

/* ═══ CTA ═══ */
.cta-sec {
    background: #ffffff;
    padding: 3.2rem 4.8rem 6rem;
}

.cta-box {
    background: linear-gradient(135deg, #027BFF, #4da3ff);
    border-radius: 2.4rem;
    padding: 5rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2rem 5rem rgba(2, 123, 255, 0.25);
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-box h2 {
    font-size: 3.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.2rem;
    position: relative;
    line-height: 1.2;
}

.cta-box p {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 2.8rem;
    position: relative;
    line-height: 1.6;
}

.cta-btn {
    padding: 0 4rem;
    height: 6rem;
    background: #fff;
    color: var(--zw-blue-dark);
    border: none;
    border-radius: 1.2rem;
    font-size: 1.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.cta-btn:hover {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, .18);
}

/* ═══ SCROLL REVEAL ═══ */
.rv {
    opacity: 0;
    transform: translateY(2.4rem);
    transition: all .6s cubic-bezier(.16, 1, .3, 1);
}

.rv.vis {
    opacity: 1;
    transform: translateY(0);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
    .sec {
        padding: 2.8rem 2.4rem;
    }

    .hero {
        padding: 8rem 2.4rem 2.8rem;
    }

    .hero h1 {
        font-size: 3.6rem;
        line-height: 1.2;
    }

    .hero-sub {
        font-size: 1.8rem;
    }

    .sec-title {
        font-size: 3rem;
    }

    .sec-desc {
        font-size: 1.7rem;
    }

    .flow-layout {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .flow-tabs {
        flex-direction: row;
        overflow-x: auto;
        gap: 1rem;
        height: auto;
        padding-bottom: 0.8rem;
    }

    .flow-tab {
        flex-shrink: 0;
        min-width: 22rem;
    }

    .flow-preview {
        min-height: 44rem;
        height: auto;
        padding: 2.4rem 2.4rem 8rem;
    }

    .feat-grid,
    .uc-grid,
    .testi-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .save-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .cta-sec {
        padding: 2.8rem 2.4rem 5rem;
    }

    .cta-box {
        padding: 4rem 2.4rem;
    }

    .cta-box h2 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .hero-metrics {
        gap: 1rem;
    }

    .metric {
        padding: 1.4rem 2rem;
        flex: 1;
        min-width: 10rem;
    }

    .metric .val {
        font-size: 2.4rem;
    }

    .save-highlight {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 3rem 2rem;
    }

    .scene-label {
        white-space: normal;
        width: 90%;
    }

    .flow-scene {
        padding: 2rem 1.6rem 8rem;
    }

    .scene-img {
        width: 16rem;
        margin-bottom: 1.6rem;
    }

    .scene-img.wide {
        width: 20rem;
    }

    .cmp-wrap {
        overflow-x: auto;
    }

    .cmp-wrap td,
    .cmp-wrap thead th {
        padding: 1.2rem 1.4rem;
        font-size: 1.4rem;
    }

    .sec-title {
        font-size: 2.8rem;
    }
}

/* ============================================================
   Business UI refresh — 2026
   Restrained product-led presentation: less decoration, stronger hierarchy.
   ============================================================ */
:root {
    --biz-navy: #12233f;
    --biz-ink: #172b4d;
    --biz-copy: #52647d;
    --biz-line: #dce4ef;
    --biz-soft: #f5f8fc;
    --biz-blue: #0b63e5;
    --biz-blue-dark: #074cb5;
}

body {
    background: #fff;
    color: var(--biz-ink);
    letter-spacing: -0.01em;
}

.gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--biz-blue);
}

.sec { padding: 8.8rem 4.8rem; }
.sec:nth-of-type(even) { background: var(--biz-soft); }
.container, .hero-grid { max-width: 124rem; }
.sec-header { max-width: 76rem; margin: 0 auto 4.8rem; }
.sec-label, .hero-tag {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--biz-blue);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .14em;
}
.sec-title {
    max-width: 72rem;
    margin: 0 auto 1.4rem;
    color: var(--biz-navy);
    font-size: clamp(3.2rem, 4vw, 4.8rem);
    font-weight: 750;
    letter-spacing: -.04em;
}
.sec-desc { max-width: 70rem; color: var(--biz-copy); font-size: 1.7rem; }

.hero {
    padding: 13rem 4.8rem 7.2rem;
    background:
        linear-gradient(90deg, rgba(11,99,229,.035) 1px, transparent 1px),
        linear-gradient(rgba(11,99,229,.035) 1px, transparent 1px),
        linear-gradient(180deg, #f8fbff 0%, #fff 78%);
    background-size: 4.8rem 4.8rem, 4.8rem 4.8rem, auto;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 74% 30%, rgba(11,99,229,.13), transparent 31%);
    pointer-events: none;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(56rem, 1.12fr);
    column-gap: 5.6rem;
    row-gap: 4.8rem;
    align-items: center;
    text-align: left;
}
.hero-copy { min-width: 0; }
.hero-tag { margin-bottom: 2.2rem; }
.hero h1 {
    max-width: 62rem;
    margin: 0 0 2.2rem;
    color: var(--biz-navy);
    font-size: clamp(4.6rem, 5vw, 6.6rem);
    line-height: 1.03;
    font-weight: 760;
    letter-spacing: -.055em;
}
.hero-sub {
    max-width: 59rem;
    margin: 0 0 3rem;
    color: var(--biz-copy);
    font-size: 1.8rem;
    line-height: 1.7;
}
.hero-btns { justify-content: flex-start; gap: 1.2rem; margin-bottom: 2.8rem; }
.hero-btns .experience, .hero-btns .btn-consult {
    min-height: 5.2rem;
    padding: 0 2.2rem;
    border-radius: .8rem;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: none;
}
.hero-btns .experience {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--biz-blue);
}
.hero-btns .experience:hover { background: var(--biz-blue-dark); transform: translateY(-1px); }
.hero-btns .btn-consult { border: .1rem solid #b8c7dc; color: var(--biz-ink); background: rgba(255,255,255,.8); }
.hero-btns .btn-consult:hover { border-color: var(--biz-blue); color: var(--biz-blue); background: #fff; }
.hero-proof { display: grid; gap: 1.1rem; color: #41536c; font-size: 1.4rem; }
.hero-proof span { display: flex; align-items: center; gap: 1rem; }
.hero-proof i {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f5ed;
    color: #15803d;
    font-size: 1rem;
}
.studio-visual {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) 3.6rem 24rem;
    gap: 1.2rem;
    margin: 0;
    max-width: none;
    padding: 1.2rem;
    border: .1rem solid rgba(148,163,184,.55);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.82);
    box-shadow: 0 2.4rem 6rem rgba(30,64,115,.14);
    backdrop-filter: blur(1rem);
}
.sv-composer, .sv-phone { border-radius: 1rem; box-shadow: none; border-color: #d9e1ec; }
.sv-composer { padding: 1.2rem; }
.sv-bar { margin: -1.2rem -1.2rem 1.2rem; border-radius: 1rem 1rem 0 0; }
.hero-ops {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: .1rem solid var(--biz-line);
    border-bottom: .1rem solid var(--biz-line);
    background: rgba(255,255,255,.75);
}
.hero-ops div { padding: 2rem 2.4rem; border-right: .1rem solid var(--biz-line); }
.hero-ops div:last-child { border-right: 0; }
.hero-ops small { display: block; margin-bottom: .7rem; color: #718096; font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; }
.hero-ops strong { color: var(--biz-navy); font-size: 1.42rem; font-weight: 700; }

.flow-sec { background: #fff !important; }
.flow-layout { grid-template-columns: 38rem minmax(0,1fr); gap: 4.8rem; }
.flow-tab { border-radius: .8rem; border-left: .3rem solid transparent; }
.flow-tab.active {
    border-color: #dbe6f5;
    border-left-color: var(--biz-blue);
    background: #f7faff;
    box-shadow: none;
    transform: none;
}
.flow-preview, .scene-card { border-radius: 1.2rem; box-shadow: none; }
.flow-preview { border: .1rem solid var(--biz-line); background: #edf3f9; }
.scene-card { border-color: #d8e1ed; }

.sched-sec { background: var(--biz-soft) !important; }
.sched-layout { grid-template-columns: 35rem minmax(0,1fr); gap: 5rem; }
.sched-point { padding: 1.6rem 0; border-radius: 0; border-bottom: .1rem solid var(--biz-line); background: transparent; box-shadow: none; }
.sched-point:last-child { border-bottom: 0; }
.sched-point .sp-ic { border-radius: .8rem; background: #e8f1ff; color: var(--biz-blue); }
.sched-table { border-radius: 1.2rem; border: .1rem solid #cfd9e6; box-shadow: 0 1.6rem 4rem rgba(33,55,88,.08); }
.st-kpi { background: #fff; border: 0; border-right: .1rem solid var(--biz-line); border-radius: 0; }
.st-kpi:last-child { border-right: 0; }

.feat-sec { background: #fff !important; }
.feat-grid { gap: 0; border-top: .1rem solid var(--biz-line); border-left: .1rem solid var(--biz-line); }
.feat {
    min-height: 24rem;
    padding: 3rem;
    border: 0;
    border-right: .1rem solid var(--biz-line);
    border-bottom: .1rem solid var(--biz-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}
.feat:hover { transform: none; background: #f8fbff; box-shadow: none; }
.feat-ico { width: 4.4rem; height: 4.4rem; border-radius: .8rem; }
.feat h3 { margin-top: 2.2rem; color: var(--biz-navy); font-size: 1.8rem; }
.feat p { color: var(--biz-copy); font-size: 1.45rem; line-height: 1.7; }

.care-sec { background: #0e203c !important; }
.care-sec .sec-label { color: #75aaff; }
.care-sec .sec-title, .care-sec .sec-desc { color: #fff; }
.care-sec .sec-desc { color: #b8c6da; }
.care-flow { gap: 0; border: .1rem solid rgba(255,255,255,.16); }
.care-step { min-height: 23rem; padding: 3rem 2.4rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.care-step h4 { color: #fff; }
.care-step p { color: #b8c6da; }
.care-arrow { color: #75aaff; }

.uc-sec { background: #fff !important; }
.uc-grid { gap: 2rem; }
.uc { border-radius: 1rem; border: .1rem solid var(--biz-line); box-shadow: none; }
.uc:hover { transform: translateY(-.3rem); box-shadow: 0 1.5rem 3rem rgba(20,42,78,.08); }
.uc-ico { border-radius: .8rem; }
.uc-tag { border-radius: .4rem; background: #edf4ff; color: #365f96; }

.safe-sec { background: var(--biz-soft) !important; }
.safe-box { padding: 4.8rem; border-radius: 1.2rem; border: .1rem solid var(--biz-line); background: #fff; box-shadow: none; }
.safe-list li { padding: 1.5rem 0; border-bottom: .1rem solid #e7edf4; }
.safe-list li:last-child { border-bottom: 0; }
.safe-perm { border-radius: .8rem; border-color: #d4deea; box-shadow: none; }

.faq-sec { background: #fff !important; }
.faq-item { border-radius: .6rem; }
.faq-item[open] { border-color: #afc6e6; box-shadow: none; }
.faq-item summary::after { border-radius: .5rem; }

.cta-sec { padding: 0 4.8rem 9rem; background: #fff; }
.cta-box {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 4rem;
    padding: 5.6rem;
    border-radius: 1.2rem;
    text-align: left;
    background: var(--biz-navy);
    box-shadow: none;
}
.cta-box::before { display: none; }
.cta-kicker { grid-column: 1/-1; color: #76aaff; font-size: 1.15rem; font-weight: 800; letter-spacing: .14em; }
.cta-box h2 { max-width: 75rem; margin: 0; font-size: 3.8rem; line-height: 1.2; letter-spacing: -.035em; }
.cta-box p { max-width: 70rem; margin: 1.4rem 0 0; color: #bfcce0; }
.cta-btn { grid-column: 2; grid-row: 2 / span 2; align-self: center; border-radius: .8rem; box-shadow: none; }

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; max-width: 86rem; }
    .hero-copy { text-align: center; }
    .hero h1, .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-btns { justify-content: center; }
    .hero-proof { max-width: 54rem; margin: 0 auto; text-align: left; }
    .studio-visual { grid-column: 1; grid-row: auto; }
    .flow-layout, .sched-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sec { padding: 6.4rem 2rem; }
    .hero { padding: 10rem 2rem 5rem; }
    .hero h1 { font-size: clamp(4rem, 12vw, 5.4rem); }
    .hero-sub { font-size: 1.65rem; }
    .hero-btns { align-items: stretch; }
    .hero-btns button { width: 100%; }
    .hero-ops { grid-template-columns: 1fr 1fr; }
    .hero-ops div:nth-child(2) { border-right: 0; }
    .hero-ops div:nth-child(-n+2) { border-bottom: .1rem solid var(--biz-line); }
    .studio-visual { padding: .8rem; border-radius: 1rem; }
    .sec-title { font-size: 3.2rem; }
    .feat-grid { grid-template-columns: 1fr; }
    .feat { min-height: 0; }
    .safe-box { padding: 2.4rem; }
    .cta-sec { padding: 0 2rem 6rem; }
    .cta-box { display: block; padding: 3.6rem 2.4rem; text-align: left; }
    .cta-box h2 { margin-top: 1.6rem; font-size: 3rem; }
    .cta-btn { margin-top: 2.4rem; width: 100%; }
}

/* ============================================================
   Đăng bài Zalo — phần riêng của trang (bổ sung trên nền Tổng đài)
   ============================================================ */

/* ─── Hero mô phỏng: khung soạn → điện thoại ─── */
.studio-visual { display: grid; grid-template-columns: 1.35fr auto 0.85fr; align-items: center; gap: 2rem; width: 100%; max-width: 104rem; margin: 3.6rem auto 0; text-align: left; }
.hero-visual.studio-visual { height: auto; }
.sv-composer { position: relative; background: #fff; border: 0.1rem solid var(--zw-border); border-radius: 2rem; padding: 1.6rem 1.8rem 1.8rem; box-shadow: 0 2.4rem 6rem rgba(16, 24, 40, 0.1); }
.sv-bar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.sv-dot { width: 1rem; height: 1rem; border-radius: 50%; background: #E4E7EC; }
.sv-dot:nth-child(1) { background: #FDA29B; } .sv-dot:nth-child(2) { background: #FEC84B; } .sv-dot:nth-child(3) { background: #6CE9A6; }
.sv-bar-title { margin-left: 0.6rem; font-size: 1.3rem; font-weight: 700; color: var(--zw-muted); }
.sv-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.9rem; border: 0.1rem solid var(--zw-border); background: var(--zw-surface); font-size: 1.25rem; font-weight: 600; color: var(--zw-body); white-space: nowrap; }
.sv-chip b { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 0.9rem; background: var(--zw-blue); color: #fff; font-size: 1.1rem; padding: 0 0.4rem; }
.sv-chip-acc { margin-left: auto; color: var(--zw-green-dark); background: var(--zw-green-50); border-color: #A6F4C5; }
.sv-chip-acc i { font-size: 0.7rem; }
.sv-chip-time { color: var(--zw-blue); background: var(--zw-blue-50); border-color: var(--zw-blue-200); }
.sv-modes { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.sv-mode { padding: 0.55rem 1.1rem; border-radius: 0.9rem; border: 0.1rem solid var(--zw-border); font-size: 1.25rem; font-weight: 650; color: var(--zw-body); }
.sv-mode.on { background: var(--zw-blue-50); border-color: var(--zw-blue); color: var(--zw-blue-dark); }
.sv-text { min-height: 6.4rem; padding: 1.2rem 1.4rem; border: 0.1rem solid var(--zw-border); border-radius: 1.2rem; font-size: 1.5rem; line-height: 1.7; color: var(--zw-ink); background: #fff; }
.sv-caret { display: inline-block; width: 0.2rem; height: 1.6rem; background: var(--zw-blue); vertical-align: -0.3rem; margin-left: 0.2rem; animation: svBlink 0.9s steps(1) infinite; }
@keyframes svBlink { 50% { opacity: 0; } }
.sv-media { display: flex; gap: 0.8rem; margin: 1.2rem 0; }
.sv-img { position: relative; width: 7.2rem; height: 7.2rem; border-radius: 1.2rem; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.6rem; }
.sv-img.a { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.sv-img.b { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.sv-img.c { background: linear-gradient(135deg, #10b981, #06b6d4); }
.sv-img.c span { background: rgba(16, 24, 40, 0.45); border-radius: 0.8rem; padding: 0.3rem 0.8rem; }
.sv-img i { font-size: 1.4rem; background: rgba(16, 24, 40, 0.45); border-radius: 50%; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; }
.sv-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.sv-publish { margin-left: auto; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.6rem; border-radius: 1rem; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-size: 1.35rem; font-weight: 700; box-shadow: 0 0.8rem 1.8rem rgba(37, 99, 235, 0.28); }
.sv-toast { position: absolute; left: 50%; bottom: -1.6rem; transform: translate(-50%, 1rem); opacity: 0; display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.4rem; border-radius: 10rem; background: var(--zw-green-dark); color: #fff; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 1rem 2.4rem rgba(3, 152, 85, 0.3); transition: all .4s ease; }
.studio-visual.posted .sv-toast { opacity: 1; transform: translate(-50%, 0); }
.sv-arrow { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--zw-blue); font-size: 1.2rem; font-weight: 700; }
.sv-arrow i { width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--zw-blue-50); border: 0.1rem solid var(--zw-blue-200); font-size: 1.6rem; transition: all .4s ease; }
.studio-visual.posted .sv-arrow i { background: var(--zw-blue); color: #fff; box-shadow: 0 0 0 0.8rem rgba(2, 123, 255, 0.15); }
.sv-phone { position: relative; width: 26rem; margin: 0 auto; padding: 2.4rem 1.2rem 1.6rem; border-radius: 3.2rem; background: #0f172a; box-shadow: 0 2.4rem 6rem rgba(16, 24, 40, 0.28); }
.sv-notch { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); width: 9rem; height: 1.6rem; border-radius: 1rem; background: #1e293b; }
.sv-post { background: #fff; border-radius: 1.8rem; padding: 1.2rem; opacity: 0.35; transform: translateY(1.2rem) scale(0.98); filter: grayscale(1); transition: all .5s ease; }
.studio-visual.posted .sv-post { opacity: 1; transform: none; filter: none; }
.sv-post-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.sv-post-head b { display: block; font-size: 1.3rem; color: var(--zw-ink); }
.sv-post-head small { font-size: 1.05rem; color: var(--zw-muted); }
.sv-ava { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: linear-gradient(135deg, #f472b6, #a855f7); flex-shrink: 0; }
.sv-ava.s { width: 2.6rem; height: 2.6rem; }
.sv-ava.p2 { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.sv-post p { font-size: 1.25rem; line-height: 1.55; color: #26364e; margin: 0 0 0.8rem; }
.sv-post-media { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; border-radius: 1rem; overflow: hidden; }
.sv-post-media .sv-img { width: 100%; height: 7rem; border-radius: 0; }
.sv-post-foot { display: flex; gap: 1.4rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 0.1rem solid var(--zw-border); font-size: 1.2rem; color: var(--zw-muted); font-weight: 600; }
.sv-post-foot i { color: #df3864; margin-right: 0.3rem; }
.sv-post-foot span:last-child i { color: var(--zw-blue); }
.sv-tagnote { position: absolute; left: -1.6rem; right: -1.6rem; bottom: -1.4rem; display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem; border-radius: 1.2rem; background: #fff; border: 0.1rem solid var(--zw-blue-200); color: var(--zw-ink); font-size: 1.2rem; box-shadow: 0 1rem 2.4rem rgba(16, 24, 40, 0.12); opacity: 0; transform: translateY(0.8rem); transition: all .4s ease; }
.sv-tagnote i { color: var(--zw-blue); }
.sv-tagnote b { color: var(--zw-blue-dark); }
.studio-visual.tagged .sv-tagnote { opacity: 1; transform: none; }

/* ─── Quy trình: icon thay ảnh, thẻ mock ─── */
.flow-tab-num.ico { color: var(--zw-muted); font-size: 1.9rem; }
.flow-tab.active .flow-tab-num.ico { background: var(--zw-blue); border-color: var(--zw-blue); color: #fff; }
.flow-tab.active .flow-tab-num.ico span { color: var(--zw-blue); }
.flow-scene { display: none; flex-direction: column; justify-content: center; gap: 1.6rem; padding: 2.4rem; }
.flow-scene.active { display: flex; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.scene-card { background: #fff; border: 0.1rem solid var(--zw-border); border-radius: 1.8rem; padding: 2rem; box-shadow: 0 1.2rem 3.2rem rgba(16, 24, 40, 0.06); text-align: left; }
.scene-title { display: flex; align-items: center; gap: 0.8rem; font-size: 1.6rem; font-weight: 700; color: var(--zw-ink); margin-bottom: 1.4rem; }
.scene-title i { color: var(--zw-blue); }
.scene-desc { font-size: 1.5rem; color: var(--zw-body); line-height: 1.6; text-align: center; margin: 0; }
.mock-steps { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.mock-steps span { font-size: 1.2rem; font-weight: 700; color: var(--zw-muted); padding: 0.4rem 1rem; border-radius: 10rem; background: var(--zw-surface-2); }
.mock-steps span.on { background: var(--zw-blue-50); color: var(--zw-blue); }
.mock-field { margin-bottom: 1.2rem; }
.mock-field label { display: block; font-size: 1.2rem; font-weight: 600; color: var(--zw-body); margin-bottom: 0.5rem; }
.mock-input { display: inline-flex; align-items: center; gap: 0.8rem; width: 100%; padding: 1rem 1.2rem; border: 0.1rem solid #dce4ef; border-radius: 1rem; font-size: 1.4rem; color: var(--zw-ink); background: #fff; }
.mock-input.sm { width: auto; padding: 0.7rem 1.1rem; font-size: 1.3rem; }
.mock-input i { color: var(--zw-muted); }
.mock-otp { display: flex; gap: 0.8rem; }
.mock-otp span { width: 4rem; height: 4.6rem; border: 0.1rem solid #dce4ef; border-radius: 1rem; display: grid; place-items: center; font-size: 1.8rem; font-weight: 700; color: var(--zw-ink); }
.mock-otp span.blink { border-color: var(--zw-blue); box-shadow: 0 0 0 0.3rem rgba(2, 123, 255, 0.15); }
.mock-note { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1rem 1.2rem; border-radius: 1rem; background: var(--zw-blue-50); color: #1e3a8a; font-size: 1.25rem; line-height: 1.5; }
.mock-note i { color: var(--zw-blue); margin-top: 0.2rem; }
.mock-modes { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mock-modes span { padding: 0.5rem 1rem; border-radius: 0.9rem; border: 0.1rem solid var(--zw-border); font-size: 1.2rem; font-weight: 650; color: var(--zw-body); }
.mock-modes span.on { background: var(--zw-blue-50); border-color: var(--zw-blue); color: var(--zw-blue-dark); }
.mock-textarea { padding: 1.2rem; border: 0.1rem solid #dce4ef; border-radius: 1rem; font-size: 1.4rem; line-height: 1.6; color: var(--zw-ink); margin-bottom: 1rem; }
.mock-grid { display: flex; gap: 0.8rem; margin-bottom: 1.2rem; }
.mock-add { width: 7.2rem; height: 7.2rem; border-radius: 1.2rem; border: 0.15rem dashed #cbd5e1; display: grid; place-items: center; color: var(--zw-muted); font-size: 1.6rem; }
.mock-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.mock-label { font-size: 1.2rem; font-weight: 700; color: var(--zw-body); min-width: 8rem; }
.mock-pill { padding: 0.6rem 1.2rem; border-radius: 0.9rem; border: 0.1rem solid var(--zw-border); font-size: 1.25rem; font-weight: 650; color: var(--zw-body); }
.mock-pill.on { background: var(--zw-blue-50); border-color: var(--zw-blue); color: var(--zw-blue-dark); }
.mock-tag { padding: 0.5rem 1rem; border-radius: 0.8rem; font-size: 1.15rem; font-weight: 700; color: #fff; background: #2563eb; }
.mock-tag.t2 { background: #10b981; }
.mock-tag.off { background: var(--zw-surface-2); color: var(--zw-muted); }
.mock-acc { padding: 0.5rem 1.1rem; border-radius: 10rem; border: 0.1rem solid var(--zw-border); font-size: 1.2rem; font-weight: 650; color: var(--zw-body); }
.mock-acc.on { border-color: var(--zw-green); background: var(--zw-green-50); color: var(--zw-green-dark); }
.mock-acc.on::before { content: '✓ '; }
.mock-hint { font-size: 1.2rem; font-weight: 700; color: var(--zw-blue); }
.mock-cta { display: flex; gap: 0.8rem; margin-top: 0.4rem; }
.mock-btn { padding: 0.9rem 1.6rem; border-radius: 1rem; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-size: 1.3rem; font-weight: 700; }
.mock-btn.ghost { background: var(--zw-surface-2); color: var(--zw-body); }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; }
.mock-kpis div { padding: 1rem; border-radius: 1.2rem; background: var(--zw-surface); border: 0.1rem solid var(--zw-border); text-align: center; }
.mock-kpis b { display: block; font-size: 2rem; color: var(--zw-blue); }
.mock-kpis small { font-size: 1.1rem; color: var(--zw-muted); font-weight: 600; }
.mock-cust { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 0.8rem 0; border-top: 0.1rem solid var(--zw-border); }
.mock-cust .sv-ava { grid-row: 1 / 3; }
.mock-cust b { font-size: 1.3rem; color: var(--zw-ink); }
.mock-cust small { grid-column: 2; font-size: 1.15rem; color: var(--zw-muted); }
.mock-cust .mock-tag { grid-column: 3; grid-row: 1 / 3; }

/* ─── Hẹn lịch ─── */
.sched-sec { background: linear-gradient(180deg, #fff 0%, var(--zw-blue-50) 100%); }
.sched-layout { display: grid; grid-template-columns: 38rem 1fr; gap: 3.2rem; align-items: start; }
.sched-points { display: flex; flex-direction: column; gap: 1.2rem; }
.sched-point { display: flex; gap: 1.4rem; padding: 1.6rem; border-radius: 1.6rem; background: #fff; border: 0.1rem solid var(--zw-border); text-align: left; }
.sched-point h4 { font-size: 1.6rem; font-weight: 700; color: var(--zw-ink); margin: 0 0 0.4rem; }
.sched-point p { font-size: 1.4rem; color: var(--zw-body); line-height: 1.55; margin: 0; }
.sp-ic { width: 4.4rem; height: 4.4rem; border-radius: 1.2rem; flex-shrink: 0; display: grid; place-items: center; background: var(--zw-blue-50); color: var(--zw-blue); font-size: 1.7rem; }
.sched-table { background: #fff; border: 0.1rem solid var(--zw-border); border-radius: 2rem; box-shadow: 0 2rem 5rem rgba(16, 24, 40, 0.08); overflow: hidden; text-align: left; }
.st-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.6rem; border-bottom: 0.1rem solid var(--zw-border); }
.st-kpi { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: var(--zw-surface); }
.st-kpi i { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--zw-blue-50); color: var(--zw-blue); font-size: 1.5rem; }
.st-kpi b { font-size: 2.2rem; color: var(--zw-ink); }
.st-kpi span { display: block; font-size: 1.15rem; color: var(--zw-muted); font-weight: 600; }
.st-kpi > b + span { margin-left: -0.4rem; }
.st-kpi.ok i { background: var(--zw-green-50); color: var(--zw-green-dark); }
.st-kpi.warn i { background: var(--zw-amber-50); color: var(--zw-amber-700); }
.st-kpi.love i { background: #FFE4E6; color: #E11D48; }
.st-tabs { display: flex; gap: 0.6rem; padding: 1.2rem 1.6rem; border-bottom: 0.1rem solid var(--zw-border); flex-wrap: wrap; }
.st-tabs span { padding: 0.6rem 1.3rem; border-radius: 10rem; background: var(--zw-surface-2); font-size: 1.2rem; font-weight: 700; color: var(--zw-body); }
.st-tabs span.on { background: var(--zw-blue); color: #fff; }
.st-row { display: grid; grid-template-columns: 5.6rem 1fr 15rem 12rem 13rem; gap: 1.2rem; align-items: center; padding: 1.2rem 1.6rem; border-bottom: 0.1rem solid var(--zw-surface-2); }
.st-thumb { width: 5.6rem; height: 5.6rem; border-radius: 1rem; }
.st-thumb.a { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.st-thumb.b { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.st-thumb.c { background: linear-gradient(135deg, #10b981, #06b6d4); }
.st-thumb.d { background: linear-gradient(135deg, #f472b6, #a855f7); }
.st-body { min-width: 0; }
.st-body b { display: block; font-size: 1.35rem; color: var(--zw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-body small { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.st-chip { padding: 0.25rem 0.7rem; border-radius: 0.6rem; background: var(--zw-surface-2); color: var(--zw-body); font-size: 1.05rem; font-weight: 650; }
.st-chip.z { background: rgba(0, 104, 255, 0.1); color: #0068ff; }
.st-chip.tag { background: #2563eb; color: #fff; }
.st-err { display: block; margin-top: 0.4rem; font-size: 1.1rem; color: var(--zw-red); font-style: normal; }
.st-time { font-size: 1.25rem; color: var(--zw-ink); }
.st-time em { display: block; font-style: normal; font-size: 1.1rem; font-weight: 700; margin-top: 0.2rem; }
.st-time .t-wait { color: var(--zw-blue); } .st-time .t-ok { color: var(--zw-green-dark); }
.st-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border-radius: 0.8rem; font-size: 1.15rem; font-weight: 700; white-space: nowrap; justify-self: start; }
.st-status.wait { background: var(--zw-blue-50); color: var(--zw-blue); }
.st-status.ok { background: var(--zw-green-50); color: var(--zw-green-dark); }
.st-status.warn { background: var(--zw-amber-50); color: var(--zw-amber-700); }
.st-act { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; color: var(--zw-muted); }
.st-act span { padding: 0.6rem 1.1rem; border-radius: 0.8rem; border: 0.1rem solid var(--zw-blue-200); color: var(--zw-blue); font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.st-act span.ghost { border-color: var(--zw-border); color: var(--zw-body); }
.st-act span.solid { background: var(--zw-blue); border-color: var(--zw-blue); color: #fff; }
.st-foot { padding: 1.2rem 1.6rem; font-size: 1.2rem; color: var(--zw-muted); }

/* ─── Tính năng: icon tròn thay ảnh ─── */
.feat-ico { width: 5.6rem; height: 5.6rem; border-radius: 1.6rem; display: grid; place-items: center; font-size: 2.2rem; margin-bottom: 1.6rem; color: #fff; }
.feat-ico.c1 { background: linear-gradient(135deg, #2563eb, #4da3ff); } .feat-ico.c2 { background: linear-gradient(135deg, #7c3aed, #a855f7); } .feat-ico.c3 { background: linear-gradient(135deg, #10b981, #34d399); }
.feat-ico.c4 { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .feat-ico.c5 { background: linear-gradient(135deg, #e11d48, #f472b6); } .feat-ico.c6 { background: linear-gradient(135deg, #0891b2, #22d3ee); }

/* ─── Khách quan tâm → chăm sóc ─── */
.care-sec { background: #fff; }
.care-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 1.2rem; }
.care-step { padding: 2.4rem 2rem; border-radius: 2rem; background: var(--zw-surface); border: 0.1rem solid var(--zw-border); text-align: center; height: 100%; }
.cs-ic { width: 5.6rem; height: 5.6rem; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--zw-blue); color: #fff; font-size: 2rem; box-shadow: 0 1rem 2.4rem rgba(2, 123, 255, 0.25); }
.care-step h4 { font-size: 1.6rem; font-weight: 700; color: var(--zw-ink); margin: 0 0 0.5rem; }
.care-step p { font-size: 1.35rem; color: var(--zw-body); line-height: 1.55; margin: 0; }
.care-arrow { color: var(--zw-blue-200); font-size: 2rem; }

/* ─── Ứng dụng: icon ─── */
.uc-ico { width: 5.6rem; height: 5.6rem; border-radius: 1.6rem; display: grid; place-items: center; background: var(--zw-blue-50); color: var(--zw-blue); font-size: 2.2rem; margin-bottom: 1.2rem; }

/* ─── An toàn & quyền ─── */
.safe-sec { background: linear-gradient(180deg, var(--zw-blue-50) 0%, #fff 100%); }
.safe-box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.safe-copy { text-align: left; }
.safe-copy .sec-title { font-size: 3.2rem; }
.safe-list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 1.4rem; }
.safe-list li { display: flex; gap: 1.4rem; align-items: flex-start; }
.safe-list li > i { width: 4rem; height: 4rem; border-radius: 1.2rem; display: grid; place-items: center; background: #fff; border: 0.1rem solid var(--zw-border); color: var(--zw-blue); font-size: 1.6rem; flex-shrink: 0; }
.safe-list b { display: block; font-size: 1.5rem; color: var(--zw-ink); }
.safe-list span { font-size: 1.35rem; color: var(--zw-body); line-height: 1.55; }
.safe-perm { background: #fff; border: 0.1rem solid var(--zw-border); border-radius: 2rem; padding: 2rem; box-shadow: 0 2rem 5rem rgba(16, 24, 40, 0.08); text-align: left; }
.sp-title { font-size: 1.5rem; font-weight: 700; color: var(--zw-ink); margin-bottom: 1.2rem; }
.sp-row { display: grid; grid-template-columns: 1fr repeat(4, 5.2rem); align-items: center; gap: 0.6rem; padding: 0.9rem 0; border-top: 0.1rem solid var(--zw-surface-2); font-size: 1.3rem; color: var(--zw-ink); }
.sp-row.head { border-top: 0; font-size: 1.15rem; font-weight: 700; color: var(--zw-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sp-row.head span { text-align: center; }
.sp-row.head span:first-child { text-align: left; }
.sp-row i { justify-self: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--zw-surface-2); }
.sp-row i.on { background: var(--zw-green); position: relative; }
.sp-row i.on::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.2rem; font-weight: 800; }
.sp-note { margin-top: 1.2rem; font-size: 1.2rem; color: var(--zw-muted); }

/* ─── FAQ ─── */
.faq-list { max-width: 86rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.faq-item { background: #fff; border: 0.1rem solid var(--zw-border); border-radius: 1.6rem; padding: 0 2rem; transition: border-color .2s; }
.faq-item[open] { border-color: var(--zw-blue-200); box-shadow: 0 1rem 2.6rem rgba(2, 123, 255, 0.08); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.8rem 3.2rem 1.8rem 0; font-size: 1.6rem; font-weight: 700; color: var(--zw-ink); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--zw-blue-50); color: var(--zw-blue); font-size: 1.8rem; font-weight: 700; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { font-size: 1.45rem; color: var(--zw-body); line-height: 1.7; margin: 0; padding: 0 0 2rem; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .studio-visual { grid-template-columns: 1fr; gap: 2.4rem; }
    .sv-arrow { flex-direction: row; }
    .sv-arrow i { transform: rotate(90deg); }
    .sched-layout { grid-template-columns: 1fr; }
    .care-flow { grid-template-columns: 1fr 1fr; }
    .care-arrow { display: none; }
    .safe-box { grid-template-columns: 1fr; }
    .st-row { grid-template-columns: 5.6rem 1fr 13rem; }
    .st-status, .st-act { grid-column: 2 / -1; justify-self: start; }
    .st-act { justify-content: flex-start; }
}
@media (max-width: 768px) {
    .sv-composer { padding: 1.4rem; }
    .sv-chip-acc { display: none; }
    .sv-publish { margin-left: 0; }
    .sv-phone { width: 24rem; }
    .st-head { grid-template-columns: 1fr 1fr; }
    .st-row { grid-template-columns: 4.8rem 1fr; }
    .st-time, .st-status, .st-act { grid-column: 2; justify-self: start; }
    .care-flow { grid-template-columns: 1fr; }
    .mock-kpis { grid-template-columns: 1fr 1fr; }
    .sp-row { grid-template-columns: 1fr repeat(4, 4rem); font-size: 1.2rem; }
    .safe-copy .sec-title { font-size: 2.6rem; }
    .faq-item summary { font-size: 1.45rem; }
}

/* Final cascade for page-specific components declared above. */
.studio-visual {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) 3.6rem 24rem;
    gap: 1.2rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.2rem;
    border: .1rem solid rgba(148,163,184,.55);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.86);
    box-shadow: 0 2.4rem 6rem rgba(30,64,115,.14);
}
.sv-composer, .sv-phone { border-radius: 1rem; box-shadow: none; border-color: #d9e1ec; }
.sv-composer { padding: 1.2rem; }
.sched-layout { grid-template-columns: 35rem minmax(0,1fr); gap: 5rem; }
.sched-point { padding: 1.6rem 0; border: 0; border-bottom: .1rem solid var(--biz-line); border-radius: 0; background: transparent; }
.sched-point:last-child { border-bottom: 0; }
.sched-table { border-radius: 1.2rem; border-color: #cfd9e6; box-shadow: 0 1.6rem 4rem rgba(33,55,88,.08); }
.st-kpi { border-radius: 0; border-right: .1rem solid var(--biz-line); background: #fff; }
.st-kpi:last-child { border-right: 0; }
.feat-ico { width: 4.4rem; height: 4.4rem; border-radius: .8rem; }
.care-sec { background: #0e203c !important; }
.care-step { min-height: 23rem; padding: 3rem 2.4rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.care-step h4 { color: #fff; }
.care-step p { color: #b8c6da; }
.care-arrow { color: #75aaff; }
.safe-sec { background: var(--biz-soft) !important; }
.safe-box { padding: 4.8rem; border-radius: 1.2rem; border: .1rem solid var(--biz-line); background: #fff; }
.safe-list { gap: 0; }
.safe-list li { padding: 1.5rem 0; border-bottom: .1rem solid #e7edf4; }
.safe-list li:last-child { border-bottom: 0; }
.safe-perm { border-radius: .8rem; box-shadow: none; }
.faq-item { border-radius: .6rem; }
.faq-item[open] { box-shadow: none; }

@media (max-width: 1100px) {
    .studio-visual { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; max-width: 86rem; margin: 0 auto; }
    .sched-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .studio-visual { padding: .8rem; border-radius: 1rem; }
    .safe-box { padding: 2.4rem; }
    .flow-tabs { flex-flow: row wrap; overflow: visible; gap: .8rem; }
    .flow-tab { flex: 1 1 calc(33.333% - .8rem); min-width: 15rem; min-height: 8rem; padding: 1.2rem; }
    .flow-tab-txt p, .flow-tab-progress { display: none; }
    .flow-tab-num.ico { width: 3.6rem; height: 3.6rem; flex-basis: 3.6rem; }
    .flow-tab h4 { font-size: 1.35rem; }
    .flow-preview { min-height: 39rem; padding: 1.2rem 1.2rem 6rem; }
}

@media (max-width: 480px) {
    .flow-tab { flex-basis: calc(50% - .8rem); min-width: 13rem; }
}