:root{
  --cream:#FFF7ED; --cream2:#FFFBF2; --red:#DC2626; --red-d:#991B1B; --orange:#EA580C;
  --grad:linear-gradient(135deg,#DC2626,#EA580C);
  --ink:#18181B; --mut:#5f5a52; --line:#f0e2d0; --gold:#B45309;
  --radius:24px; --shadow:0 10px 30px rgba(153,27,27,.10),0 2px 8px rgba(24,24,27,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--cream2);line-height:1.65;font-size:16px}
h1,h2,h3,.logo-txt{font-family:"Baloo 2","Be Vietnam Pro",sans-serif}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.topbar{background:#18181B;color:#d6d3cd;font-size:13px}
.topbar-in{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{color:#e7e5e4;margin-left:16px}
.topbar a.tb-hot{color:#FDBA74;font-weight:800}
.header{background:rgba(255,251,242,.96);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(153,27,27,.10);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.header-in{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;line-height:1;text-decoration:none!important}
.logo-ic{background:var(--grad);color:#fff;border-radius:14px;font-size:26px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.logo-txt{font-weight:800;font-size:22px;letter-spacing:.3px;color:var(--ink);display:flex;flex-direction:column}
.logo-txt em{font-style:normal;font-size:11.5px;letter-spacing:1.6px;font-weight:600;color:var(--orange);font-family:"Be Vietnam Pro",sans-serif}
.nav{display:flex;gap:20px;margin-left:6px;flex:1;flex-wrap:wrap}
.nav a{color:#292524;font-weight:600;font-size:14.5px}
.nav a:hover{color:var(--red);text-decoration:none}
.header-cta{display:flex;gap:10px;align-items:center}
.btn-reg{background:var(--grad);color:#fff;font-weight:800;padding:11px 18px;border-radius:999px;font-size:14.5px;white-space:nowrap;box-shadow:var(--shadow)}
.btn-reg:hover{opacity:.92;text-decoration:none;color:#fff}
.burger{display:none;background:var(--ink);color:#fff;border:0;border-radius:10px;font-size:20px;padding:6px 12px;cursor:pointer}
.hero{background:radial-gradient(ellipse 800px 380px at 50% 0%,rgba(234,88,12,.16),rgba(234,88,12,0) 70%),linear-gradient(180deg,#FFF7ED,#FFFBF2);padding:48px 0 40px;text-align:center}
.hero .kicker{display:inline-block;background:var(--ink);color:#FDBA74;font-weight:800;letter-spacing:2px;font-size:12px;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.hero h1{font-size:clamp(28px,4.4vw,46px);font-weight:800;line-height:1.2;margin:16px auto 10px;max-width:880px}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:17.5px;color:#44403C;max-width:760px;margin:0 auto 24px}
.section{padding:52px 0}
.section.alt{background:var(--cream)}
.section.white{background:#fff}
.kicker2{color:var(--orange);font-weight:800;letter-spacing:1.4px;text-transform:uppercase;font-size:13px;text-align:center}
.section h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;text-align:center;line-height:1.25;margin:8px auto 10px;max-width:840px}
.section h2 em{font-style:normal;color:var(--red)}
.section .sub{text-align:center;color:var(--mut);max-width:780px;margin:0 auto 30px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{font-size:19px;margin-bottom:8px}
.card p,.card li{font-size:15px;color:#3f3f46}
.card ul{margin:8px 0 0 18px}
.center{text-align:center;margin-top:28px}
.btn-grad{background:var(--grad);color:#fff;font-weight:800;padding:13px 26px;border-radius:999px;display:inline-block;border:0;cursor:pointer;font-family:inherit;font-size:15.5px;box-shadow:var(--shadow)}
.btn-grad:hover{opacity:.92;text-decoration:none;color:#fff}
.btn-outline{border:2px solid var(--red);color:var(--red);font-weight:800;padding:11px 24px;border-radius:999px;display:inline-block;background:#fff}
.btn-outline:hover{background:#FEF2F2;text-decoration:none}
.btn-zalo{background:#0068ff;color:#fff;font-weight:800;padding:13px 26px;border-radius:999px;display:inline-block}
.btn-zalo:hover{opacity:.9;text-decoration:none;color:#fff}
/* laso form */
.laso-form{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:28px;text-align:left}
.laso-form h2{font-size:22px;text-align:left;margin-bottom:4px}
.laso-form .sub2{color:var(--mut);font-size:14.5px;margin-bottom:18px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-group{margin-bottom:12px}
.f-group label{display:block;font-weight:700;font-size:14px;margin-bottom:5px}
.f-group input,.f-group select{width:100%;border:1.5px solid #E7DDD0;border-radius:12px;padding:12px 13px;font-size:15px;font-family:inherit;background:#fff}
.f-group input:focus,.f-group select:focus{outline:2px solid #FDBA74;border-color:var(--orange)}
.chk{display:flex;gap:8px;align-items:center;font-size:14.5px;font-weight:600;cursor:pointer;margin:6px 0 14px}
button.btn-grad.full{width:100%;padding:14px}
/* comparison */
.cmp3 .card.bad{opacity:.92} .cmp3 .card.good{border:2px solid var(--red);position:relative}
.badge-pop{position:absolute;top:-13px;right:18px;background:var(--grad);color:#fff;font-weight:800;font-size:12px;padding:4px 12px;border-radius:999px}
table.cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:20px;overflow:hidden;font-size:15px;box-shadow:var(--shadow);border:1px solid var(--line)}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp th{background:#18181B;color:#fff}
table.cmp th.hot{background:var(--grad)}
table.cmp td.c{text-align:center}
/* articles */
.art-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;color:inherit}
.art-card:hover{text-decoration:none;transform:translateY(-2px);transition:.18s}
.art-card img{width:100%;height:170px;object-fit:cover;background:#FDE68A}
.art-card .b{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.art-card h3{font-size:16.5px;line-height:1.4;color:var(--ink)}
.art-card p{font-size:14px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-meta{font-size:12.5px;color:var(--gold);font-weight:700}
.chip{display:inline-block;background:#FFF7ED;border:1px solid var(--line);color:#7C2D12;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700}
a.chip:hover,a.chip.on{background:var(--grad);color:#fff;text-decoration:none;border-color:transparent}
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pager a,.pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;background:#fff;border:1.5px solid var(--line);border-radius:12px;font-weight:700;color:var(--ink)}
.pager a:hover{border-color:var(--red);text-decoration:none}
.pager span.on{background:var(--grad);color:#fff;border-color:transparent}
.searchbar{display:flex;gap:10px;max-width:680px;margin:0 auto 26px}
.searchbar input{flex:1;border:1.5px solid #E7DDD0;border-radius:999px;padding:13px 18px;font-size:15px;font-family:inherit;background:#fff}
/* article body + static pages */
.prose{max-width:820px;margin:0 auto}
.prose h1{font-size:clamp(26px,3.6vw,38px);line-height:1.25;margin-bottom:10px}
.prose h2{font-size:25px;margin:28px 0 10px;text-align:left}
.prose h3{font-size:19px;margin:20px 0 6px}
.prose p,.prose li{font-size:15.5px;color:#292524;margin-bottom:10px}
.prose ul,.prose ol{margin:8px 0 12px 22px}
.prose img{border-radius:16px;margin:12px 0}
.prose table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--cream)}
.static-page{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:34px;max-width:900px;margin:0 auto}
.crumb{font-size:13.5px;color:var(--mut);margin-bottom:14px}
.crumb a{color:var(--mut)}
/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;padding:16px 20px;box-shadow:0 2px 8px rgba(24,24,27,.04)}
.faq summary{font-weight:700;cursor:pointer;font-size:15.5px}
.faq details p{margin-top:8px;color:#3f3f46;font-size:15px}
/* chart */
.chart-wrap{max-width:860px;margin:0 auto}
.chart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cell{background:#fff;border:1.5px solid #E7DDD0;border-radius:14px;padding:10px;min-height:128px;display:flex;flex-direction:column;gap:3px}
.cell .dc{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.5px}
.cell .cname{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:15px}
.cell .stars{font-size:13.5px;font-weight:700;color:var(--red-d);line-height:1.45}
.cell .dv{margin-top:auto;font-size:11.5px;color:var(--mut)}
.cell.menh{border:2.5px solid var(--red);background:#FEF2F2}
.cell.than{border:2.5px dashed var(--orange)}
.cell.center-cell{grid-column:2/4;grid-row:2/4;background:linear-gradient(160deg,#FFF7ED,#FEE2E2);border:2px solid #FCA5A5;align-items:center;text-align:center;justify-content:center;padding:18px}
.cell.center-cell h3{font-size:21px;color:var(--red-d)}
.cell.center-cell p{font-size:13.5px;color:#44403C}
.tag-menh{background:var(--red);color:#fff;font-size:10.5px;border-radius:999px;padding:1px 8px;font-weight:800}
.tag-than{background:var(--orange);color:#fff;font-size:10.5px;border-radius:999px;padding:1px 8px;font-weight:800}
.interp{max-width:860px;margin:26px auto 0}
.interp .card{margin-bottom:14px}
/* pricing */
.price-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;position:relative;box-shadow:var(--shadow);text-align:center}
.price-card.hot{border:2.5px solid var(--red)}
.price-card .xu{font-size:34px;font-weight:800;font-family:"Baloo 2",sans-serif}
.price-card .p{font-size:22px;font-weight:900;color:var(--red);margin:6px 0}
.price-card ul{margin:12px 0 18px 18px;font-size:14.5px;text-align:left}
/* testimonial */
.testi .stars5{color:#F59E0B;font-size:17px;letter-spacing:2px}
.testi .who{margin-top:12px;font-weight:800;font-size:14.5px}
.testi .who span{display:block;font-weight:600;color:var(--mut);font-size:13px}
.pagehero{background:radial-gradient(ellipse 700px 300px at 50% 0%,rgba(234,88,12,.15),transparent 70%),linear-gradient(180deg,#FFF7ED,#FFFBF2);padding:42px 0 34px;text-align:center}
.pagehero h1{font-size:clamp(26px,3.8vw,40px);font-weight:800;line-height:1.22;max-width:860px;margin:0 auto}
.pagehero p{margin:10px auto 0;font-size:16.5px;color:#44403C;max-width:760px}
.notice{background:#FEF3C7;border:1.5px solid #F59E0B;border-radius:16px;padding:16px 20px;font-size:15px;max-width:860px;margin:0 auto}
/* footer */
.footer{background:#18181B;color:#D6D3CD;padding:44px 0 26px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:28px}
.foot-col h4{color:#fff;font-size:16px;margin-bottom:12px}
.foot-col a{display:block;color:#D6D3CD;font-size:14.5px;margin-bottom:8px}
.foot-col a:hover{color:#FDBA74}
.foot-col p{font-size:14.5px}
.foot-company{text-align:center;font-size:14.5px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.foot-company p{margin-bottom:5px}
.foot-company .fc-name{font-weight:900;font-size:16px;text-transform:uppercase;color:#fff}
.foot-company a{color:#FDBA74}
.foot-copy{text-align:center;margin-top:16px;font-size:13px;color:#A8A29E}
.float-btns{position:fixed;right:16px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px}
.fbtn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 14px rgba(0,0,0,.25);border:0;cursor:pointer;text-decoration:none!important}
.fbtn.call{background:var(--grad);color:#fff}
.fbtn.zalo{background:#0068ff;color:#fff}
.fbtn.top{background:#18181B;color:#FDBA74;font-weight:900}
.fbtn:hover{transform:translateY(-2px)}
@media(max-width:980px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#FFFBF2;flex-direction:column;padding:14px 18px;gap:12px;border-bottom:3px solid var(--red);box-shadow:0 10px 20px rgba(0,0,0,.12)}
  .nav.open{display:flex}.header-in{position:relative;flex-wrap:wrap}.burger{display:block}.btn-reg{display:none}
  .grid.c4,.grid.c3,.grid.c2{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}.topbar-r{display:none}
  .chart-grid{gap:4px}.cell{min-height:104px;padding:7px}.cell .stars{font-size:11.5px}.cell .cname{font-size:12.5px}
  .foot-grid{grid-template-columns:1fr}.static-page{padding:22px 16px}
}
