:root{
  --primary:#ff6f00; --primary-600:#ff7f1a; --bg:#fff7f0; --ink:#0f172a; --muted:#475569;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink); background:linear-gradient(180deg,#fff 0%, var(--bg) 100%); scroll-behavior:smooth}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #f1f5f9; z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .brand{display:flex;gap:12px;align-items:center;font-weight:800}
.nav img{width:36px;height:36px}
.nav a{color:var(--ink);text-decoration:none;margin:0 12px;font-weight:600}
.btn{display:inline-block;padding:12px 18px;border:2px solid var(--primary);border-radius:999px;
  color:#fff;background:var(--primary);box-shadow:0 10px 24px rgba(255,111,0,.25);transition:.25s}
.btn.ghost{background:transparent;color:var(--primary)}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(255,111,0,.35)}
.hero{padding:96px 0 48px; position:relative}
.hero .card-visual{border-radius:24px;background:linear-gradient(180deg,#ffe7c2,#fff); padding:16px;
  box-shadow:0 30px 70px rgba(15,23,42,.15); border:1px solid #f1f5f9}
.hero h1{font-size:clamp(36px,6vw,56px); line-height:1.06; margin:0 0 16px}
.hero p{font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:720px}
.hero .actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.grid{display:grid; gap:24px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .grid.cols-2{grid-template-columns:1fr} }
.section{padding:64px 0}
.badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.badge{display:inline-flex; gap:8px; align-items:center; padding:10px 14px; border-radius:999px;
  background:#fff; border:1px solid #e2e8f0; color:#0f172a; font-weight:600}
.card{background:#fff;border:1px solid #eef2f7;border-radius:20px;padding:24px;
  box-shadow:0 18px 40px rgba(15,23,42,.08)}
.product{align-items:center}
.feature-icons{display:flex; gap:24px; justify-content:center; margin-top:16px; opacity:.9}
.feature-icons img{width:42px;height:42px}
.input{width:100%; padding:14px 16px; border:1px solid #e2e8f0; border-radius:12px; margin:8px 0; font:inherit}
textarea.input{min-height:120px; resize:vertical}
footer{padding:40px 0; color:#475569}
small.muted{color:#64748b}
a {
    color: #0f172ac4
}
.coming-soon {
    font-size: 3em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 122, 24, 0.8);
    animation: pulse 2s infinite;
    letter-spacing: 2px;
    text-align: center;
    margin: 40px 0 20px;
}

@keyframes pulse {

    0%, 100% {
        text-shadow: 0 0 15px rgba(255, 122, 24, 0.8);
    }

    50% {
        text-shadow: 0 0 35px rgba(255, 122, 24, 1);
    }
}

.product .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.product img {
    width: min(420px, 90%);
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .15));
}

.store-icons a, .store-icons > img {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(100%);
}
    .store-icons .active {
        opacity: 1;
        pointer-events: auto;
        filter: none;
    }

    .store-icons img {
        height: 48px;
    }


.product-split {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    margin: 80px 0;
    flex-wrap: wrap;
}

    .product-split.reverse {
        flex-direction: row-reverse;
    }

.product-card,
.product-image {
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* CARD STYLE */
.product-card {
    background: radial-gradient(circle at top left, #fffefb, #fff6ec);
    border-radius: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    padding: 80px 40px;
    text-align: center;
}

/* TIÊU ?? */
.product-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 56px;
}

.product-logo-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f2f2f2);
    box-shadow: 0 8px 20px rgba(255, 122, 24, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .product-logo-circle img {
        width: 50px;
        height: 50px;
    }

.product-text {
    font-size: 2.4rem;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.4px;
}

/* COMING SOON */
.coming-soon {
    font-size: 3.2em;
    font-weight: 800;
    color: #ff7a18;
    text-shadow: 0 0 16px rgba(255, 122, 24, 0.5);
    margin: 40px 0;
    letter-spacing: 1px;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 14px rgba(255, 122, 24, 0.6);
    }

    50% {
        text-shadow: 0 0 28px rgba(255, 122, 24, 1);
    }
}

/* ICONS */
.store-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
    justify-items: center;
    align-items: center;
    max-width: 500px;
    margin: 40px auto 0;
}

    .store-icons img {
        width: 180px;
        height: auto;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

        .store-icons img:hover {
            transform: scale(1.05);
            opacity: 0.9;
        }

/* ?NH BÊN PH?I */
.product-image img {
    width: min(420px, 95%);
    border-radius: 36px;
    box-shadow: 0 25px 60px rgba(255, 122, 24, 0.25);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .product-split {
        flex-direction: column;
        gap: 60px;
    }

    .product-card {
        padding: 60px 20px;
    }

    .coming-soon {
        font-size: 2.4em;
    }

    .product-text {
        font-size: 2rem;
    }

    .store-icons img {
        height: 46px;
        max-width: 140px;
    }
}

@media (max-width: 768px) {
    .store-icons {
        grid-template-columns: 1fr;
        gap: 16px;
    }

        .store-icons img {
            width: 200px;
        }
}


footer {
    background: #fffaf5;
    padding: 30px 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #555;
    font-size: 0.95rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

    footer .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    footer a {
        color: #333;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease, text-shadow 0.2s ease;
    }

        footer a:hover {
            color: #ff7a18;
            text-shadow: 0 0 6px rgba(255, 122, 24, 0.4);
        }

        footer a::after {
            content: "·";
            margin: 0 8px;
            color: rgba(0, 0, 0, 0.25);
        }

        footer a:last-child::after {
            content: "";
        }


/* NOTE DAY — Description */
.nd-description {
    text-align: center;
    color: #475569;
    max-width: 400px;
    margin: 0 auto 20px;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
}

/* NOTE DAY — Badges ("Không quảng cáo") */
.nd-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

    .nd-badges span {
        background: #fff;
        border-radius: 20px;
        padding: 6px 14px;
        font-size: 0.9rem;
        border: 1px solid #ffe0c2;
    }

/* NOTE DAY — Feature list */
.nd-features {
    margin: 0 auto 28px;
    max-width: 380px;
    padding: 0;
    list-style: none;
    color: #475569;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left; /* 👈 Fix text alignment */
}

    .nd-features li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .nd-features .check {
        color: #ff7a00;
        font-weight: bold;
        flex-shrink: 0; /* 👈 icon không bị co */
    }
.nd-cta {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.nd-btn {
    background: var(--primary);
    border-color: var(--primary);
    font-size: 1rem;
    padding: 10px 22px;
    white-space: nowrap;
}

    .nd-btn:hover {
        transform: translateY(-2px);
    }