:root{
    --primary:#2563eb;
    --success:#22c55e;
    --text:#1f2937;
}

/* ================= BASE ================= */
body{
    background:#f8f9fb;
    font-size:15px;
    line-height:1.7;
    color:var(--text);
}

.section{
    padding:56px 0;
}

 

.icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;

    display: flex;
    align-items: center;      /* canh dọc */
    justify-content: center;  /* canh ngang */

    margin: 0 auto;           /* canh giữa icon-circle trong card */
    font-size: 1.5rem;
}

/* ================= SERVICE ICON ================= */
.service-icon{
    width:48px;
    height:48px;
    border-radius:12px;        /* vuông bo nhẹ – hợp layout service */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    flex-shrink:0;
    transition:all .3s ease;
}

/* hover nhẹ theo card */
.card:hover .service-icon{
    transform:scale(1.05);
}
 

/* ================= HERO ================= */
.hero{
    position:relative;
    overflow:hidden;
    padding:64px 0;
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--success));
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right, rgba(255,255,255,.15), transparent 40%);
}

.hero h1{
    font-weight:800;
    letter-spacing:-0.3px;
}

.hero p{
    max-width:640px;
    margin-inline:auto;
}

/* ================= CARD ================= */
.card{
    border:none;
    border-radius:16px;
    box-shadow:0 10px 26px rgba(0,0,0,.06);
    transition:all .35s ease;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.1);
}

/* ================= ICON ================= */
.icon-circle{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
    transition:all .35s ease;
}

.card:hover .icon-circle{
    transform:scale(1.08) rotate(3deg);
}

.bg-soft-primary{background:#dbeafe;color:#2563eb}
.bg-soft-success{background:#dcfce7;color:#16a34a}
.bg-soft-warning{background:#fef3c7;color:#d97706}
.bg-soft-danger{background:#fee2e2;color:#dc2626}

/* ================= BADGE ================= */
.badge-price{
    background:rgba(255,255,255,.15);
    font-size:1rem;
}

/* ================= TABLE ================= */
.table th{
    white-space:nowrap;
}

.col-no{
    background:#fff5f5;
}

.col-yes{
    background:#f0fff4;
}

/* ================= LIST ================= */
.section ul{
    list-style:none;
    padding-left:0;
    margin:0;
}

.section ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:10px;
    font-weight:500;
}

.section ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:2px;
    color:var(--success);
    font-weight:700;
}

/* ================= ANIMATION ================= */
.fade-up{
    animation:fadeUp .7s ease both;
}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

/* ================= CTA / BUTTON ================= */
.btn-success{
    transition:all .3s ease;
}

.btn-success:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(34,197,94,.35);
}

.hero::after{
    pointer-events:none;
}