.hnsc-wrap,
.hnsc-wrap * {
    box-sizing: border-box;
}

.hnsc-wrap {
    width: 100%;
    max-width: var(--hnsc-max, 1180px);
    margin: 0 auto;
    padding: var(--hnsc-pad, 16px);
    isolation: isolate;
}

.hnsc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hnsc-gap, 24px);
    align-items: stretch;
}

.hnsc-card {
    --hnsc-shadow: 0 20px 50px rgba(50, 40, 20, .08);
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: var(--hnsc-radius, 30px);
    padding: clamp(34px, 4vw, 64px) clamp(24px, 4vw, 48px) clamp(30px, 4vw, 54px);
    background: var(--hnsc-card-bg, #fff);
    box-shadow: var(--hnsc-shadow);
    transform-origin: center;
    transition: transform .38s ease, box-shadow .38s ease, filter .38s ease;
}

.hnsc-equal-height .hnsc-card { height: 100%; }

.hnsc-card::before,
.hnsc-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hnsc-pattern-dots::before {
    inset: 0;
    opacity: .55;
    background-image: radial-gradient(circle, rgba(245, 192, 63, .45) 1.4px, transparent 1.6px);
    background-size: 52px 52px;
    background-position: 0 0;
}

.hnsc-pattern-grid::before {
    inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px);
    background-size: 36px 36px;
}

.hnsc-pattern-glow::before {
    width: 70%;
    height: 52%;
    top: -18%;
    right: -12%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 169, 71, .38), rgba(255, 191, 106, .08) 55%, transparent 72%);
    filter: blur(12px);
}

.hnsc-pattern-glow::after {
    width: 66%;
    height: 42%;
    left: -22%;
    bottom: -20%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 210, 123, .32), transparent 70%);
    filter: blur(16px);
}

.hnsc-card-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,.26);
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
}

.hnsc-card-content {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hnsc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    max-width: 100%;
    padding: 10px 24px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 999px;
    background: var(--hnsc-badge-bg, #fff);
    color: var(--hnsc-badge-color, #1f64d6);
    box-shadow: 0 10px 22px rgba(30, 41, 59, .08);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 2.3px;
    text-transform: uppercase;
}

.hnsc-title {
    width: 100%;
    margin: 0 0 4px;
    color: var(--hnsc-title-color, #111);
    font-size: clamp(22px, 2.4vw, 31px);
    font-weight: 800;
    line-height: 1.2;
}

.hnsc-subtitle {
    width: 100%;
    color: var(--hnsc-subtitle-color, #2563eb);
    font-size: clamp(14px, 1.35vw, 18px);
    font-weight: 800;
    line-height: 1.45;
}

.hnsc-description {
    width: 100%;
    margin: clamp(28px, 4vw, 52px) auto clamp(28px, 3.2vw, 45px);
    color: var(--hnsc-text-color, #50545c);
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 500;
    line-height: 1.55;
}

.hnsc-description p { margin: 0; }
.hnsc-description strong { font-weight: 800; }

.hnsc-items {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: auto;
}

.hnsc-item {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 112px;
    padding: 20px 18px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 18px;
    background: linear-gradient(140deg, var(--hnsc-item-bg, #fff), var(--hnsc-item-bg-2, #fff));
    box-shadow: 0 12px 28px rgba(52, 65, 85, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform .28s ease, box-shadow .28s ease;
}

.hnsc-item::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -40%;
    width: 32%;
    height: 340%;
    transform: rotate(22deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    opacity: 0;
    transition: left .65s ease, opacity .25s ease;
}

.hnsc-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(52, 65, 85, .12);
}

.hnsc-item:hover::after { left: 115%; opacity: 1; }
.hnsc-item--full { grid-column: 1 / -1; }
.hnsc-item--half { grid-column: span 1; }

.hnsc-item-icon {
    margin-bottom: 10px;
    font-size: 26px;
    line-height: 1;
}

.hnsc-item-title {
    color: var(--hnsc-item-title, #34435f);
    font-size: clamp(12px, 1.02vw, 15px);
    font-weight: 800;
    line-height: 1.35;
}

.hnsc-item-text {
    margin-top: 9px;
    color: var(--hnsc-item-text, #667085);
    font-size: clamp(10px, .88vw, 13px);
    line-height: 1.45;
}

.hnsc-button-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(30px, 4vw, 54px);
}

.hnsc-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 230px);
    min-height: 62px;
    padding: 16px 28px;
    border-radius: 16px;
    background: var(--hnsc-btn-bg, linear-gradient(100deg,#ff9d23,#ed6500));
    color: var(--hnsc-btn-color, #fff) !important;
    box-shadow: 0 14px 28px rgba(235, 101, 0, .2);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    transition: transform .28s ease, box-shadow .28s ease;
}

.hnsc-button span { position: relative; z-index: 2; }
.hnsc-button:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(235, 101, 0, .28); }

.hnsc-button-shine .hnsc-button::after {
    content: "";
    position: absolute;
    top: -80%;
    left: -50%;
    width: 28%;
    height: 260%;
    transform: rotate(22deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    animation: hnscShine 3.8s ease-in-out infinite;
}

@keyframes hnscShine {
    0%, 45% { left: -60%; opacity: 0; }
    55% { opacity: 1; }
    75%, 100% { left: 135%; opacity: 0; }
}

.hnsc-effects-on [data-hnsc-reveal] {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: var(--hnsc-duration, 850ms);
    transition-timing-function: cubic-bezier(.2,.75,.2,1);
    transition-delay: var(--hnsc-card-delay, 0ms);
}

.hnsc-entry-fade-up [data-hnsc-reveal] { transform: translateY(34px); }
.hnsc-entry-fade-left [data-hnsc-reveal] { transform: translateX(-34px); }
.hnsc-entry-fade-right [data-hnsc-reveal] { transform: translateX(34px); }
.hnsc-entry-zoom-in [data-hnsc-reveal] { transform: scale(.94); filter: blur(3px); }
.hnsc-entry-none [data-hnsc-reveal] { opacity: 1; transform: none; filter: none; }

.hnsc-effects-on [data-hnsc-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.hnsc-effects-on.hnsc-animate-items [data-hnsc-item] {
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity .55s ease var(--hnsc-item-delay, 0ms), transform .55s ease var(--hnsc-item-delay, 0ms), box-shadow .28s ease;
}

.hnsc-effects-on.hnsc-animate-items .is-visible [data-hnsc-item] {
    opacity: 1;
    transform: none;
}

.hnsc-ambient-float-soft .hnsc-card.is-visible { animation: hnscFloat 7s ease-in-out infinite; }
.hnsc-ambient-float-soft .hnsc-card:nth-child(2).is-visible { animation-delay: -3.5s; }
@keyframes hnscFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }

.hnsc-ambient-breathe .hnsc-card.is-visible { animation: hnscBreathe 6s ease-in-out infinite; }
.hnsc-ambient-breathe .hnsc-card:nth-child(2).is-visible { animation-delay: -3s; }
@keyframes hnscBreathe { 0%,100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.06) brightness(1.015); } }

.hnsc-ambient-glow-pulse .hnsc-card-glow { animation: hnscGlowPulse 5.5s ease-in-out infinite; }
@keyframes hnscGlowPulse { 0%,100% { transform: translate(-50%,-50%) scale(.85); opacity: .35; } 50% { transform: translate(-50%,-50%) scale(1.2); opacity: .72; } }

.hnsc-hover-lift .hnsc-card:hover { transform: translateY(-8px); box-shadow: 0 28px 64px rgba(50,40,20,.14); }
.hnsc-hover-scale .hnsc-card:hover { transform: scale(1.015); box-shadow: 0 28px 64px rgba(50,40,20,.14); }
.hnsc-hover-tilt .hnsc-card:nth-child(odd):hover { transform: perspective(900px) rotateY(1.6deg) rotateX(-1.2deg) translateY(-4px); }
.hnsc-hover-tilt .hnsc-card:nth-child(even):hover { transform: perspective(900px) rotateY(-1.6deg) rotateX(-1.2deg) translateY(-4px); }

.hnsc-pause-hover .hnsc-card:hover,
.hnsc-pause-hover .hnsc-card:hover .hnsc-card-glow,
.hnsc-pause-hover .hnsc-card:hover .hnsc-button::after { animation-play-state: paused; }

@media (max-width: 767px) {
    .hnsc-wrap { padding-left: 10px; padding-right: 10px; }
    .hnsc-card { padding: 32px 18px 30px; }
    .hnsc-description { margin-top: 26px; margin-bottom: 28px; }
}

@media (max-width: 480px) {
    .hnsc-items { gap: 10px; }
    .hnsc-item { min-height: 100px; padding: 16px 10px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .hnsc-wrap *, .hnsc-wrap *::before, .hnsc-wrap *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .hnsc-effects-on [data-hnsc-reveal],
    .hnsc-effects-on.hnsc-animate-items [data-hnsc-item] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Chuyển động chữ rất nhẹ: chỉ áp dụng cho các dòng nhấn mạnh để không gây khó đọc. */
.hnsc-text-motion .hnsc-card.is-visible .hnsc-badge,
.hnsc-text-motion .hnsc-card.is-visible .hnsc-title,
.hnsc-text-motion .hnsc-card.is-visible .hnsc-subtitle,
.hnsc-text-motion .hnsc-card.is-visible .hnsc-description strong,
.hnsc-text-motion .hnsc-card.is-visible .hnsc-item-icon,
.hnsc-text-motion .hnsc-card.is-visible .hnsc-item-title,
.hnsc-text-motion .hnsc-card.is-visible .hnsc-button span {
    animation-duration: var(--hnsc-text-duration, 6500ms);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

.hnsc-text-motion .hnsc-card.is-visible .hnsc-title { animation-delay: -700ms; }
.hnsc-text-motion .hnsc-card.is-visible .hnsc-subtitle { animation-delay: -1400ms; }
.hnsc-text-motion .hnsc-card.is-visible .hnsc-description strong { animation-delay: -2100ms; }
.hnsc-text-motion .hnsc-card.is-visible .hnsc-item-icon { animation-delay: -2800ms; }
.hnsc-text-motion .hnsc-card.is-visible .hnsc-item-title { animation-delay: -3500ms; }
.hnsc-text-motion .hnsc-card.is-visible .hnsc-button span { animation-delay: -4200ms; }

.hnsc-text-float-soft .hnsc-card.is-visible .hnsc-badge,
.hnsc-text-float-soft .hnsc-card.is-visible .hnsc-title,
.hnsc-text-float-soft .hnsc-card.is-visible .hnsc-subtitle,
.hnsc-text-float-soft .hnsc-card.is-visible .hnsc-description strong,
.hnsc-text-float-soft .hnsc-card.is-visible .hnsc-item-icon,
.hnsc-text-float-soft .hnsc-card.is-visible .hnsc-item-title,
.hnsc-text-float-soft .hnsc-card.is-visible .hnsc-button span {
    animation-name: hnscTextFloatSoft;
}

.hnsc-text-sway-soft .hnsc-card.is-visible .hnsc-badge,
.hnsc-text-sway-soft .hnsc-card.is-visible .hnsc-title,
.hnsc-text-sway-soft .hnsc-card.is-visible .hnsc-subtitle,
.hnsc-text-sway-soft .hnsc-card.is-visible .hnsc-description strong,
.hnsc-text-sway-soft .hnsc-card.is-visible .hnsc-item-icon,
.hnsc-text-sway-soft .hnsc-card.is-visible .hnsc-item-title,
.hnsc-text-sway-soft .hnsc-card.is-visible .hnsc-button span {
    animation-name: hnscTextSwaySoft;
}

.hnsc-text-breathe-soft .hnsc-card.is-visible .hnsc-badge,
.hnsc-text-breathe-soft .hnsc-card.is-visible .hnsc-title,
.hnsc-text-breathe-soft .hnsc-card.is-visible .hnsc-subtitle,
.hnsc-text-breathe-soft .hnsc-card.is-visible .hnsc-description strong,
.hnsc-text-breathe-soft .hnsc-card.is-visible .hnsc-item-icon,
.hnsc-text-breathe-soft .hnsc-card.is-visible .hnsc-item-title,
.hnsc-text-breathe-soft .hnsc-card.is-visible .hnsc-button span {
    animation-name: hnscTextBreatheSoft;
}

@keyframes hnscTextFloatSoft {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -2px, 0); }
}

@keyframes hnscTextSwaySoft {
    0%, 100% { transform: translate3d(-1px, 0, 0); }
    50% { transform: translate3d(1px, 0, 0); }
}

@keyframes hnscTextBreatheSoft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.008); opacity: .92; }
}

.hnsc-pause-hover .hnsc-card:hover .hnsc-badge,
.hnsc-pause-hover .hnsc-card:hover .hnsc-title,
.hnsc-pause-hover .hnsc-card:hover .hnsc-subtitle,
.hnsc-pause-hover .hnsc-card:hover .hnsc-description strong,
.hnsc-pause-hover .hnsc-card:hover .hnsc-item-icon,
.hnsc-pause-hover .hnsc-card:hover .hnsc-item-title,
.hnsc-pause-hover .hnsc-card:hover .hnsc-button span {
    animation-play-state: paused;
}