/* ===== ÁNH SAO THEME – GLOBAL ===== */
:root {
    /* Palette từ banner */
    --green-1: #91CD2B;
    /* xanh sáng */
    --green-2: #309A48;
    /* xanh đậm */
    --red-1: #E82E2F;
    /* đỏ */
    --blue-1: #4F519E;
    /* xanh dương đậm */

    /* map vào Bootstrap để toàn site đổi tông */
    --bs-primary: var(--blue-1);
    /* nút/link chính */
    --bs-warning: var(--red-1);
    /* nút phụ (đỏ) */
    --bs-link-color: var(--blue-1);
    --bs-link-hover-color: #3D3F8B;

    /* theme cũ (nếu có dùng) */
    --brand: var(--blue-1);
    --accent: var(--red-1);
}

html {
    scroll-behavior: smooth
}

body {
    background: #fff
}

/* Logo chấm màu ở brand (nếu dùng chữ) */
.logo-mark {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    margin-right: .35rem;
}

.topbar {
    font-variation-settings: "wght" 500
}

/* ===== HERO & SLIDER ===== */
.hero {
    position: relative;
    background: radial-gradient(60% 100% at 20% 10%, #f6f9ff 0%, #fff 60%);
}

.bg-as-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 60%, #e9ecef 100%) !important;
}

.slider-frame {
    position: relative;
    aspect-ratio: 16/9;
    background: #f5f7fb
}

.slider-frame .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
    display: block;
}

.slider-frame .slide.active {
    opacity: 1
}

/* ===== HERO – TITLE ANIMATION (luôn động) ===== */
@keyframes asGradientShift {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes asUnderlineSweep {
    0% {
        background-position: 0% 50%;
        box-shadow: 0 6px 18px rgba(48, 154, 72, .25)
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0 10px 28px rgba(48, 154, 72, .45)
    }

    100% {
        background-position: 0% 50%;
        box-shadow: 0 6px 18px rgba(48, 154, 72, .25)
    }
}

@keyframes asHighlight {

    0%,
    13%,
    100% {
        transform: translateY(0) scale(1);
        filter: none;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .28)
    }

    6% {
        transform: translateY(-2px) scale(1.08);
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
        text-shadow: 0 4px 16px rgba(0, 0, 0, .35)
    }
}

.as-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--green-1), var(--green-2));
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.as-hero-title {
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: .5rem 0 .75rem;
    font-size: clamp(34px, 6.2vw, 60px);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}

.as-sep {
    color: #310808;
    opacity: .95;
    font-weight: 800;
    padding: 0 .18em;
}

.as-word {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 220% 220%;
    display: inline-block;
}

.as-word.w1 {
    /* In nhanh – xanh dương */
    background-image: linear-gradient(135deg, #4F519E, #3D3F8B, #6a6bd0);
    animation: asGradientShift 6s ease-in-out infinite, asHighlight 6s ease-in-out infinite;
}

.as-word.w2 {
    /* Tem nhãn – đỏ */
    background-image: linear-gradient(135deg, #E82E2F, #C62426, #ff6a6a);
    animation: asGradientShift 7s ease-in-out infinite reverse, asHighlight 6s ease-in-out infinite 2s;
}

.as-word.w3 {
    /* Photocopy – xanh dương */
    background-image: linear-gradient(135deg, #4F519E, #3D3F8B, #6a6bd0);
    animation: asGradientShift 8s ease-in-out infinite, asHighlight 6s ease-in-out infinite 4s;
}

.as-underline {
    width: min(320px, 60%);
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green-1), var(--green-2));
    background-size: 200% 200%;
    margin: .3rem 0 1.2rem;
    animation: asUnderlineSweep 2.8s ease-in-out infinite;
}

.as-hero-lead {
    color: #46a38a;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35)
}

/* ===== CARDS / MISC ===== */
.feature-card i {
    color: var(--brand)
}

.product-card img {
    object-fit: cover;
    height: 180px
}

.hover-card:hover {
    transform: translateY(-4px);
    transition: .2s ease;
    box-shadow: 0 12px 28px rgba(13, 110, 253, .08)
}

.card-as {
    border: 2px solid var(--blue-1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08)
}

.card-as .card-title {
    color: var(--blue-1)
}

.navbar .btn {
    border-radius: 999px
}

.btn-warning {
    color: #fff
}

.btn-warning:hover {
    color: #fff
}

/* CTA stripe phối 3 màu */
.bg-as-stripe {
    background:
        linear-gradient(90deg, var(--blue-1), var(--green-1)),
        linear-gradient(180deg, var(--green-1), var(--green-2));
    background-blend-mode: multiply;
    color: #fff;
}

/* FAB */
.fab {
    position: fixed;
    right: 16px;
    z-index: 1030;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}

.fab-call {
    bottom: 88px;
    background: #198754;
    color: #fff;
}

.fab-zalo {
    bottom: 24px;
    background: #25a1f3;
    color: #fff;
}

.fab:hover {
    transform: translateY(-2px)
}

/* Mobile nav */
.navbar-toggler {
    border: none
}

.navbar-toggler:focus {
    box-shadow: none
}