/* =============================================================================
   TRANG GIỚI THIỆU (index.html) + TRANG ĐĂNG NHẬP — dùng biến màu của giao-dien.css
============================================================================= */
.lp-thanh { position: sticky; top: 0; z-index: 50; background: rgba(248, 250, 252, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--mau-vien); }
.lp-thanh-trong { max-width: 1140px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-logo { display: flex; align-items: center; gap: 12px; }
.lp-logo-o { width: 40px; height: 40px; border-radius: 12px; background: var(--mau-chinh); color: #fff; font-weight: 900; font-size: 19px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 71, 255, .3); }

.lp-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--mau-chinh) 0%, var(--mau-gradient-toi) 100%); color: #fff; }
.lp-hero::before, .lp-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.lp-hero::before { width: 520px; height: 520px; right: -140px; top: -180px; background: radial-gradient(circle, rgba(255, 199, 0, .35), transparent 65%); }
.lp-hero::after { width: 380px; height: 380px; left: -120px; bottom: -190px; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%); }
.lp-hero-trong { position: relative; max-width: 1140px; margin: 0 auto; padding: 88px 20px 96px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.lp-nhan { display: inline-block; padding: 6px 14px; border-radius: 9999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.lp-hero h1 { font-size: clamp(34px, 5.4vw, 58px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; margin: 18px 0 16px; }
.lp-hero h1 em { font-style: normal; color: var(--mau-phu); }
.lp-hero p.lp-mo-ta { font-size: 17px; font-weight: 600; opacity: .88; max-width: 520px; line-height: 1.6; }
.lp-nut-hang { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.lp-nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: 14px; font-weight: 800; font-size: 15px; font-family: inherit; cursor: pointer; border: none; transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s; }
.lp-nut:hover { transform: translateY(-2px); }
.lp-nut.vang { background: var(--mau-phu); color: #3B2F00; box-shadow: 0 10px 28px rgba(255, 199, 0, .4); }
.lp-nut.vien { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }

.lp-the-demo { background: rgba(255, 255, 255, .96); color: var(--mau-chu); border-radius: 24px; padding: 22px; box-shadow: 0 30px 70px rgba(0, 20, 80, .45); transform: rotate(1.5deg); }
.lp-the-demo .tieu { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--mau-chu-phu); }
.lp-demo-dong { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #F8FAFC; margin-top: 10px; font-size: 14px; font-weight: 700; }
.lp-demo-dong .so { width: 30px; height: 30px; border-radius: 50%; background: #E2E8F0; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.lp-demo-dong.xong .so { background: var(--mau-thanh-cong); color: #fff; }
.lp-demo-dong.dang .so { background: var(--mau-chinh); color: #fff; }

.lp-muc { max-width: 1140px; margin: 0 auto; padding: 84px 20px; }
.lp-muc h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 900; letter-spacing: -1px; text-align: center; }
.lp-muc .lp-phu { text-align: center; color: var(--mau-chu-phu); font-weight: 600; margin: 10px auto 0; max-width: 560px; }
.lp-luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.lp-the { background: #fff; border: 1px solid var(--mau-vien); border-radius: 22px; padding: 28px; box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .06); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.lp-the:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -12px rgba(0, 71, 255, .14); }
.lp-icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(0, 71, 255, .08); color: var(--mau-chinh); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.lp-icon.vang { background: rgba(255, 199, 0, .2); color: #854D0E; }
.lp-icon.xanh { background: rgba(22, 163, 74, .12); color: var(--mau-thanh-cong); }
.lp-the h3 { font-size: 18px; font-weight: 900; letter-spacing: -.3px; }
.lp-the p { margin-top: 8px; font-size: 14px; color: var(--mau-chu-phu); font-weight: 600; line-height: 1.65; }

.lp-nen-xam { background: #fff; border-top: 1px solid var(--mau-vien); border-bottom: 1px solid var(--mau-vien); }
.lp-buoc-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; counter-reset: buoc; }
.lp-buoc { position: relative; padding: 24px; border-radius: 20px; background: #F8FAFC; border: 1px solid var(--mau-vien); }
.lp-buoc::before { counter-increment: buoc; content: counter(buoc); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--mau-chinh); color: #fff; font-weight: 900; margin-bottom: 14px; }
.lp-buoc strong { display: block; font-size: 16px; font-weight: 900; }
.lp-buoc span { display: block; margin-top: 6px; font-size: 13px; color: var(--mau-chu-phu); font-weight: 600; line-height: 1.6; }

.lp-quy-dinh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.lp-quy-dinh > div { text-align: center; padding: 26px 16px; border-radius: 20px; background: linear-gradient(135deg, var(--mau-chinh), var(--mau-gradient-toi)); color: #fff; }
.lp-quy-dinh b { display: block; font-size: 38px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; }
.lp-quy-dinh span { font-size: 13px; font-weight: 700; opacity: .85; }

.lp-hoi { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 10px; }
.lp-hoi details { background: #fff; border: 1px solid var(--mau-vien); border-radius: 16px; padding: 16px 20px; }
.lp-hoi summary { font-weight: 800; font-size: 15px; cursor: pointer; }
.lp-hoi details p { margin-top: 10px; font-size: 14px; color: var(--mau-chu-phu); font-weight: 600; line-height: 1.7; }

.lp-cta { margin: 0 auto; max-width: 1100px; border-radius: 28px; padding: 56px 24px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--mau-chinh) 0%, var(--mau-gradient-toi) 100%); }
.lp-cta h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; letter-spacing: -.8px; }
.lp-chan { text-align: center; padding: 40px 20px 48px; font-size: 13px; font-weight: 600; color: var(--mau-chu-phu); }

@media (max-width: 900px) {
    .lp-hero-trong { grid-template-columns: 1fr; padding: 56px 20px 64px; gap: 36px; }
    .lp-the-demo { transform: none; }
    .lp-luoi-3, .lp-buoc-luoi, .lp-quy-dinh { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .lp-luoi-3, .lp-buoc-luoi, .lp-quy-dinh { grid-template-columns: 1fr; }
    .lp-muc { padding: 56px 20px; }
    .lp-cta { margin: 0 16px; }
}

/* Trang đăng nhập */
.dn-nen { background: radial-gradient(circle at 15% 10%, rgba(0, 71, 255, .12), transparent 45%), radial-gradient(circle at 90% 90%, rgba(255, 199, 0, .18), transparent 40%), var(--mau-nen); }
.dn-mat-khau { position: relative; }
.dn-mat-khau .o-nhap-lieu { padding-right: 76px; }
.dn-mat-khau button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--mau-chinh); padding: 6px 8px; font-family: inherit; }