:root{
    --primary:#8b0000;
    --primary-dark:#6f0000;
    --gold:#d4af37;
    --success:#28a745;
    --warning:#ff9800;
    --danger:#dc3545;
    --bg:#f4f7fa;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg);
    font-family:"Segoe UI",Tahoma,sans-serif;
}

/* =============================
   TOOL PAGES (2-column layout)
   ============================= */

.page-wrapper{
    min-height:calc(100vh - 160px);
    display:flex;
    align-items:center;
}

.container{
    width:100%;
    max-width:1300px;
    margin:auto;
    padding:40px 15px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.tool-box,
.guide-box{
    background:#fff;
    padding:30px;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.tool-box{
    border-top:5px solid var(--gold);
}

.guide-box{
    border-top:5px solid var(--gold);
}

.tool-box h1{
    text-align:center;
    margin-bottom:25px;
    color:var(--primary);
    font-size:28px;
}

label{
    display:block;
    margin-top:15px;
    font-weight:600;
}

input,
select{
    width:100%;
    padding:12px;
    margin-top:8px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:15px;
}

.group-title{
    margin-top:25px;
    margin-bottom:12px;
    color:var(--primary);
    font-size:17px;
    font-weight:700;
}

.checkbox-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.checkbox-grid label{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:0;
    padding:12px;
    background:#fafafa;
    border:1px solid #e5e5e5;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
}

.checkbox-grid label:hover{
    border-color:var(--gold);
    background:#fffdf6;
}

.checkbox-grid input{
    width:auto;
    margin:2px 0 0;
}

.check-btn{
    width:100%;
    margin-top:25px;
    padding:14px;
    border:none;
    border-radius:8px;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.check-btn:hover{
    background:var(--primary-dark);
}

.result{
    margin-top:20px;
    padding:18px;
    border-radius:10px;
    line-height:1.8;
}

.ok{
    background:#f2fff5;
    border-left:6px solid var(--success);
}

.warn{
    background:#fff8eb;
    border-left:6px solid var(--warning);
}

.danger{
    background:#fff4f4;
    border-left:6px solid var(--danger);
}

.money-box{
    text-align:center;
    font-size:28px;
    font-weight:700;
    margin-bottom:15px;
}

.contact-btn{
    display:block;
    margin-top:20px;
    text-align:center;
    background:var(--primary);
    color:#fff;
    padding:14px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
}

.contact-btn:hover{
    background:var(--primary-dark);
}

.guide-box h2{
    color:var(--primary);
    margin-bottom:15px;
}

.guide-box p,
.guide-box li{
    line-height:1.8;
}

@media(max-width:900px){

    .page-wrapper{
        align-items:flex-start;
    }

    .container{
        grid-template-columns:1fr;
    }

    .checkbox-grid{
        grid-template-columns:1fr;
    }
}

/* =============================
   TRANG CHỦ (homepage layout)
   ============================= */

.page-wrapper.home{
    display:block;
    min-height:unset;
    padding:2rem 0;
}

.page-wrapper.home .container{
    display:block;
    max-width:1200px;
    width:90%;
    margin:0 auto;
    padding:0 15px 2rem;
    grid-template-columns:unset;
    gap:unset;
}

.hero{
    text-align:center;
    margin-bottom:1.5rem;
    padding:1.5rem 1rem;
    background:#fff;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.hero h1{
    font-size:2.5rem;
    color:var(--primary);
    margin-bottom:0.75rem;
}

.hero p{
    font-size:1rem;
    max-width:700px;
    margin:0 auto;
    color:#555;
}

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1rem;
}

.feature-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    padding:1.25rem .75rem;
    text-align:center;
    transition:transform .3s,box-shadow .3s;
}

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

.card-icon{
    width:80px;
    height:80px;
    object-fit:cover;
    display:block;
    margin:0.75rem auto 0.5rem;
}

.feature-card h3{
    font-size:1.1rem;
    color:var(--primary);
    margin:0.5rem 0;
}

.feature-card p{
    font-size:.92rem;
    color:#555;
    line-height:1.4;
    margin:0 auto 0.75rem;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.feature-card .btn{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:.5rem 1.2rem;
    border-radius:20px;
    font-weight:600;
    font-size:.95rem;
    text-decoration:none;
    transition:background .3s,transform .3s;
}

.feature-card .btn:hover{
    background:var(--primary-dark);
    transform:translateY(-1px);
}

@media(max-width:600px){
    .hero{ padding:1rem .5rem; }
    .hero h1{ font-size:2rem; }
}

/* =============================
   LANDING PAGE
   ============================= */

.lp-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* Hero */
.lp-hero{
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,#c0392b 100%);
    color:#fff;
    padding:100px 0 70px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.lp-hero::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="white" opacity="0.08"/></svg>') repeat;
    animation:lp-float 20s linear infinite;
}

@keyframes lp-float{
    0%{transform:translateY(0)}
    100%{transform:translateY(-100px)}
}

.lp-hero-content{
    position:relative;
    z-index:2;
}

.lp-hero h1{
    font-size:3rem;
    margin-bottom:1rem;
    text-shadow:2px 2px 4px rgba(0,0,0,.3);
    animation:lp-up 1s ease-out;
    color:#fff;
}

.lp-hero p{
    font-size:1.2rem;
    margin-bottom:2rem;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
    animation:lp-up 1s ease-out 0.2s both;
    color:rgba(255,255,255,.9);
}

@keyframes lp-up{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

.lp-cta{
    display:inline-block;
    background:#fff;
    color:var(--primary);
    padding:14px 40px;
    text-decoration:none;
    border-radius:50px;
    font-weight:700;
    font-size:1rem;
    transition:all .3s;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
    animation:lp-up 1s ease-out 0.4s both;
}

.lp-cta:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 25px rgba(0,0,0,.3);
    background:#fdf5f5;
}

/* Features */
.lp-features{
    padding:80px 0;
    background:#fff;
}

.lp-section-title{
    text-align:center;
    font-size:2.2rem;
    color:var(--primary);
    margin-bottom:1rem;
    position:relative;
    padding-bottom:18px;
}

.lp-section-title::after{
    content:'';
    position:absolute;
    bottom:0;left:50%;
    transform:translateX(-50%);
    width:70px;height:4px;
    background:var(--gold);
    border-radius:2px;
}

.lp-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
    margin-top:3rem;
}

.lp-card{
    background:#fff;
    border:1px solid #f0e0e0;
    padding:2rem;
    border-radius:12px;
    text-align:center;
    box-shadow:0 4px 16px rgba(139,0,0,.06);
    transition:transform .3s,box-shadow .3s;
    border-top:4px solid var(--gold);
}

.lp-card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 32px rgba(139,0,0,.12);
}

.lp-icon{
    font-size:2.8rem;
    margin-bottom:1rem;
}

.lp-card h3{
    color:var(--primary);
    margin-bottom:.75rem;
    font-size:1.15rem;
}

.lp-card p{
    color:#666;
    line-height:1.8;
    font-size:.95rem;
}

/* Stats */
.lp-stats{
    background:var(--primary);
    color:#fff;
    padding:60px 0;
}

.lp-stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:2rem;
    text-align:center;
}

.lp-stat{
    padding:1rem;
}

.lp-stat-number{
    font-size:2.8rem;
    font-weight:700;
    margin-bottom:.5rem;
    color:var(--gold);
}

.lp-stat-label{
    font-size:1rem;
    opacity:.9;
}

/* About */
.lp-about{
    padding:80px 0;
    background:var(--bg);
}

.lp-about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
}

.lp-about-text h2{
    color:var(--primary);
    font-size:2rem;
    margin-bottom:1.5rem;
}

.lp-about-text p{
    color:#555;
    margin-bottom:1.2rem;
    line-height:1.8;
}

.lp-about-box{
    background:var(--primary);
    border-radius:16px;
    padding:3rem 2rem;
    text-align:center;
    color:#fff;
    border-top:5px solid var(--gold);
}

.lp-about-box h3{
    font-size:1.8rem;
    margin-bottom:1rem;
    color:var(--gold);
}

.lp-about-box p{
    font-size:1.05rem;
    line-height:1.8;
    opacity:.92;
}

/* Fade-in */
.fade-in{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s ease,transform .8s ease;
}

.fade-in.visible{
    opacity:1;
    transform:translateY(0);
}

@media(max-width:768px){
    .lp-hero h1{ font-size:2.2rem; }
    .lp-about-grid{ grid-template-columns:1fr; }
    .lp-grid{ grid-template-columns:1fr; }
    .lp-stats-grid{ grid-template-columns:repeat(2,1fr); }
}