/* ATA House — hệ thống chung: Nhà ấm áp (Baloo 2 + Quicksand) */
:root{
  --cream:#FFF8EE; --ink:#3A2E22; --brick:#D9714E; --brick-deep:#B85536;
  --leaf:#7A9A5B; --gold:#E8B44A; --card:#FFFFFF; --muted:#8A7A68; --line:#EEDFC9;
}
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--cream); color:var(--ink); font-family:'Quicksand',sans-serif; line-height:1.6}
h1,h2,h3,.brand{font-family:'Baloo 2',sans-serif; font-weight:700}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px}

/* header / nav */
header{padding:22px 0; border-bottom:1px solid var(--line)}
.navbar{display:flex; justify-content:space-between; align-items:center; gap:20px}
.brand{font-size:1.35rem; color:var(--brick-deep)}
.brand span{color:var(--leaf)}
nav ul{display:flex; gap:26px; list-style:none; font-weight:600; font-size:.95rem; flex-wrap:wrap}
nav a{color:var(--ink); padding:4px 0; border-bottom:2px solid transparent}
nav a:hover, nav a.active{color:var(--brick-deep); border-bottom-color:var(--brick)}
.pill-btn{background:var(--brick); color:#fff; padding:11px 24px; border-radius:999px; font-weight:700; font-size:.9rem; display:inline-block; border:none; cursor:pointer; font-family:'Quicksand',sans-serif}
.btn-outline{border:2px solid var(--brick); color:var(--brick-deep); padding:10px 22px; border-radius:999px; font-weight:700; font-size:.9rem; display:inline-block; background:none; cursor:pointer; font-family:'Quicksand',sans-serif}

/* page header (non-home pages) */
.page-hero{padding:40px 0 30px}
.page-hero .badge{display:inline-block; background:#FDEFE2; color:var(--brick-deep); padding:7px 16px; border-radius:999px; font-weight:700; font-size:.82rem; margin-bottom:16px}
.page-hero h1{font-size:clamp(1.8rem,3.4vw,2.5rem); line-height:1.2; margin-bottom:14px}
.page-hero p{color:var(--muted); font-size:1.02rem; max-width:60ch}

/* hero (home) */
.hero{padding:50px 0 70px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.hero .badge{display:inline-block; background:#FDEFE2; color:var(--brick-deep); padding:7px 16px; border-radius:999px; font-weight:700; font-size:.82rem; margin-bottom:18px}
.hero h1{font-size:clamp(2.1rem,4vw,3rem); line-height:1.18; margin-bottom:18px}
.hero h1 em{font-style:normal; color:var(--brick)}
.hero p{color:var(--muted); font-size:1.05rem; max-width:46ch; margin-bottom:26px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-art{background:linear-gradient(160deg,var(--gold),var(--brick)); border-radius:32px; aspect-ratio:1/1; position:relative; display:flex; align-items:center; justify-content:center}
.hero-art::before{content:"🏠"; font-size:5rem}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:30px 0 60px}
.stat{background:var(--card); border-radius:20px; padding:24px; text-align:center; border:2px solid var(--line)}
.stat .n{font-family:'Baloo 2'; font-size:1.8rem; font-weight:800; color:var(--brick-deep)}
.stat .l{font-size:.86rem; color:var(--muted); margin-top:4px}

section{padding:50px 0}
.sec-title{text-align:center; margin-bottom:36px}
.sec-title .kicker{color:var(--leaf); font-weight:700; font-size:.9rem; margin-bottom:8px}
.sec-title h2{font-size:1.9rem}
.sec-title.left{text-align:left}

/* personas */
.personas{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.persona-card{background:var(--card); border-radius:24px; padding:32px; border:2px solid var(--line)}
.persona-card .icon{width:52px; height:52px; border-radius:16px; background:#FDEFE2; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px}
.persona-card h3{font-size:1.3rem; margin-bottom:10px}
.persona-card p{color:var(--muted)}

/* plans */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.plan{background:var(--card); border-radius:24px; padding:30px; border:2px solid var(--line); text-align:center; display:flex; flex-direction:column}
.plan.mid{background:var(--brick); color:#fff; border-color:var(--brick); transform:translateY(-10px)}
.plan .name{font-weight:700; font-family:'Baloo 2'; font-size:1.1rem; margin-bottom:10px}
.plan .price{font-size:1.5rem; font-weight:800; font-family:'Baloo 2'; margin-bottom:6px}
.plan .sub{font-size:.82rem; opacity:.8; margin-bottom:16px}
.plan ul{list-style:none; text-align:left; font-size:.9rem; flex:1}
.plan li{padding:6px 0; border-top:1px solid rgba(0,0,0,.06)}
.plan.mid li{border-top-color:rgba(255,255,255,.2)}
.plan .plan-cta{margin-top:18px}

/* comparison table */
.compare{width:100%; border-collapse:collapse; background:var(--card); border-radius:20px; overflow:hidden; border:2px solid var(--line)}
.compare th,.compare td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem}
.compare th{background:#FDEFE2; color:var(--brick-deep); font-family:'Baloo 2'; font-weight:700}
.compare tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto}

/* steps */
.steps{display:flex; flex-direction:column; gap:0; max-width:680px; margin:0 auto}
.steps.wide{max-width:100%}
.step{display:flex; gap:20px; padding:18px 0; border-bottom:1px dashed var(--line)}
.step:last-child{border-bottom:none}
.step .circ{width:40px; height:40px; border-radius:50%; background:var(--leaf); color:#fff; font-family:'Baloo 2'; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.step h4{font-size:1.02rem; margin-bottom:4px}
.step p{color:var(--muted); font-size:.9rem}

/* trust */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.trust-card{background:#FDEFE2; border-radius:20px; padding:26px}
.trust-card h4{font-size:1.05rem; margin-bottom:8px; color:var(--brick-deep)}
.trust-card p{color:var(--ink); font-size:.9rem; opacity:.85}

/* blog cards */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.blog-card{background:var(--card); border-radius:24px; padding:0; border:2px solid var(--line); overflow:hidden; display:flex; flex-direction:column}
.blog-card .thumb{background:linear-gradient(135deg,var(--gold),var(--leaf)); height:150px; display:flex; align-items:center; justify-content:center; font-size:2.4rem}
.blog-card .body{padding:24px}
.blog-card .tag{color:var(--leaf); font-weight:700; font-size:.8rem; margin-bottom:8px}
.blog-card h3{font-size:1.12rem; margin-bottom:10px; line-height:1.35}
.blog-card p{color:var(--muted); font-size:.9rem; margin-bottom:14px}
.blog-card .read-more{color:var(--brick-deep); font-weight:700; font-size:.88rem}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.contact-form{background:var(--card); border:2px solid var(--line); border-radius:24px; padding:30px; display:flex; flex-direction:column; gap:16px}
.contact-form label{font-weight:700; font-size:.9rem; margin-bottom:6px; display:block}
.contact-form input, .contact-form textarea{width:100%; padding:12px 14px; border-radius:14px; border:2px solid var(--line); font-family:'Quicksand',sans-serif; font-size:.95rem; background:var(--cream)}
.contact-form textarea{min-height:100px; resize:vertical}
.contact-info{display:flex; flex-direction:column; gap:20px}
.contact-info .item{background:#FDEFE2; border-radius:20px; padding:22px}
.contact-info .item h4{color:var(--brick-deep); margin-bottom:6px; font-size:1rem}
.contact-info .item p{color:var(--ink); font-size:.92rem}
.map-box{background:var(--card); border:1px solid var(--line); border-radius:20px; height:220px; overflow:hidden}
.map-box.empty{border:2px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem}
.map-box iframe{width:100%; height:100%; border:0; display:block}

/* CTA final */
.cta-final{background:var(--leaf); border-radius:32px; padding:50px; text-align:center; color:#fff; margin:20px 0 60px}
.cta-final h2{font-size:1.9rem; margin-bottom:14px}
.cta-final p{max-width:50ch; margin:0 auto 24px; opacity:.92}
.cta-final .pill-btn{background:#fff; color:var(--leaf)}

footer{padding:32px 0; text-align:center; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line)}
footer .foot-links{display:flex; justify-content:center; gap:20px; margin-bottom:10px; flex-wrap:wrap; font-weight:600}

@media(max-width:800px){
  .hero{grid-template-columns:1fr}
  .stats,.personas,.plans,.trust,.blog-grid,.contact-grid{grid-template-columns:1fr}
  .plan.mid{transform:none}
  nav ul{display:none}
}