@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root{
  --do:#DA251D; --do2:#b81d16; --xam:#58595B; --nen:#fdf8f5; --card:#ffffff;
  --line:#f0e3dc; --ink:#26201e; --mut:#7c716b;
  --sh:0 10px 30px -12px rgba(60,30,20,.18); --sh2:0 4px 14px -6px rgba(60,30,20,.14);
  --rad:16px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'Be Vietnam Pro',-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--nen); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; }
.wrap{ max-width:720px; margin:0 auto; padding:0 18px; }
.sec{ padding:40px 0; }
h1,h2{ line-height:1.2; color:var(--ink); letter-spacing:-.02em; }
h2{ font-size:25px; font-weight:800; margin-bottom:16px; text-align:center; }
h2 span{ color:var(--do); }
.kicker{ text-align:center; color:var(--do); font-weight:700; letter-spacing:.12em; font-size:12px; text-transform:uppercase; margin-bottom:8px; }
.lead{ text-align:center; color:var(--mut); max-width:580px; margin:0 auto 20px; font-size:16px; }

/* header */
header{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); }
.hd{ display:flex; align-items:center; justify-content:space-between; height:58px; }
.logo{ font-weight:800; color:var(--do); font-size:20px; letter-spacing:.02em; }
.logo small{ display:block; font-size:9px; color:var(--xam); font-weight:700; letter-spacing:.22em; }
.hd-call{ background:var(--do); color:#fff; font-weight:700; padding:9px 16px; border-radius:30px; font-size:14px; box-shadow:0 4px 12px -3px rgba(218,37,29,.5); }

/* hero */
.hero{ position:relative; color:#fff; text-align:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,12,10,.35) 0%,rgba(20,12,10,.35) 40%,rgba(20,12,10,.72) 100%); }
.hero-in{ position:relative; padding:56px 18px 46px; }
.hero h1{ color:#fff; font-size:30px; font-weight:800; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.hero p{ margin:16px auto 22px; max-width:540px; font-size:16.5px; color:#fff; opacity:.96; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; }
.badge{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); padding:7px 13px; border-radius:20px; font-size:13px; font-weight:600; backdrop-filter:blur(3px); }

/* buttons */
.cta-row{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; padding:14px 24px; border-radius:32px; font-size:16px; transition:transform .12s ease, box-shadow .12s ease; }
.btn:active{ transform:translateY(1px); }
.btn-call{ background:linear-gradient(180deg,var(--do),var(--do2)); color:#fff; box-shadow:0 10px 24px -8px rgba(218,37,29,.6); }
.btn-zalo{ background:#0068ff; color:#fff; box-shadow:0 10px 24px -10px rgba(0,104,255,.5); }
.btn-mess{ background:#0a7cff; color:#fff; }
.btn-out{ background:#fff; color:var(--do); border:2px solid #fff; }

/* trust bar */
.trustbar{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trustbar .in{ max-width:720px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:16px 10px; text-align:center; }
.trustbar b{ display:block; color:var(--do); font-size:20px; font-weight:800; line-height:1.1; }
.trustbar span{ font-size:11.5px; color:var(--mut); font-weight:600; }

/* pain */
.pain li{ list-style:none; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px 14px 46px; margin-bottom:11px; position:relative; font-size:15px; box-shadow:var(--sh2); }
.pain li:before{ content:"✕"; position:absolute; left:15px; top:13px; color:var(--do); font-weight:800; }
.pain .ok{ border:1px solid #f3cfc7; background:linear-gradient(180deg,#fff7f3,#fff); font-weight:600; color:#7a2b25; }
.pain .ok:before{ content:"✓"; color:#20a24a; }

/* offer */
.offer{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:26px 22px; text-align:center; box-shadow:var(--sh); position:relative; }
.offer:before{ content:""; position:absolute; inset:0; border-radius:20px; padding:2px; background:linear-gradient(135deg,var(--do),#ffb3ad,var(--do)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; }
.offer .name{ font-size:19px; font-weight:800; color:var(--do); }
.offer .price{ font-size:27px; font-weight:800; color:var(--ink); margin:8px 0; }
.offer .price .ph{ color:#caa89f; font-size:18px; font-weight:600; }
.offer ul{ text-align:left; max-width:420px; margin:16px auto; }
.offer li{ list-style:none; padding:6px 0 6px 28px; position:relative; font-size:15px; }
.offer li:before{ content:"✓"; position:absolute; left:0; color:#20a24a; font-weight:800; }
.gift{ background:linear-gradient(180deg,#fff4d6,#fff8e6); color:#8a6d3b; border:1px solid #f2e2b8; border-radius:12px; padding:11px; font-weight:700; margin-top:8px; font-size:14px; }

/* reasons */
.why{ display:grid; grid-template-columns:1fr; gap:12px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 18px 18px 62px; position:relative; box-shadow:var(--sh2); }
.card .ic{ position:absolute; left:16px; top:18px; width:36px; height:36px; background:linear-gradient(180deg,#fff1ee,#ffe3de); color:var(--do); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:19px; }
.card b{ display:block; color:var(--ink); margin-bottom:3px; font-weight:700; }
.card small{ color:var(--mut); font-size:13.5px; }

/* gallery — editorial, hover zoom */
.figs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
figure{ background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--sh2); }
figure .ph{ overflow:hidden; }
figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s ease; }
figure:hover img{ transform:scale(1.06); }
figure figcaption{ padding:10px 13px; font-size:12.5px; color:var(--mut); line-height:1.45; font-weight:500; }

/* steps */
.step{ display:flex; gap:14px; margin-bottom:14px; align-items:flex-start; }
.step .n{ flex:0 0 34px; height:34px; background:linear-gradient(180deg,var(--do),var(--do2)); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; box-shadow:0 6px 14px -6px rgba(218,37,29,.6); }
.step b{ color:var(--ink); }

/* reviews */
.reviews{ display:grid; gap:13px; }
.review{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--sh2); }
.review .stars{ color:#ffb400; font-size:15px; letter-spacing:2px; }
.review p{ margin:8px 0 12px; color:#3a322f; font-size:15px; font-style:italic; }
.review .who{ display:flex; align-items:center; gap:10px; }
.review .av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#ffd9d3,#f7b0a8); color:var(--do); display:flex; align-items:center; justify-content:center; font-weight:800; }
.review .who b{ font-size:14px; color:var(--ink); display:block; }
.review .who span{ font-size:12px; color:var(--mut); }

/* commit */
.commit{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--sh2); }
.commit li{ list-style:none; padding:8px 0 8px 32px; position:relative; }
.commit li:before{ content:"🛡️"; position:absolute; left:0; }

/* faq */
details{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:10px; box-shadow:var(--sh2); }
summary{ font-weight:700; cursor:pointer; color:var(--ink); list-style:none; position:relative; padding-right:24px; }
summary::-webkit-details-marker{ display:none; }
summary:after{ content:"+"; position:absolute; right:2px; top:-2px; color:var(--do); font-size:22px; font-weight:400; }
details[open] summary:after{ content:"–"; }
details p{ padding-top:10px; color:#555; font-size:14.5px; }

/* final + contact */
.final{ background:linear-gradient(135deg,var(--do),var(--do2)); color:#fff; text-align:center; border-radius:20px; padding:32px 20px; box-shadow:var(--sh); }
.final h2{ color:#fff; }
.final p{ margin-bottom:18px; opacity:.95; }
.contact{ text-align:center; font-size:15px; color:var(--mut); }
.contact b{ color:var(--ink); }
footer{ text-align:center; padding:24px 18px 96px; color:#a99f9a; font-size:13px; }

/* floating bar */
.fab{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; background:#fff; box-shadow:0 -4px 18px rgba(0,0,0,.14); }
.fab a{ flex:1; text-align:center; padding:12px 4px; font-weight:700; font-size:13px; color:#fff; display:flex; flex-direction:column; align-items:center; gap:3px; }
.fab .f-call{ background:linear-gradient(180deg,var(--do),var(--do2)); } .fab .f-zalo{ background:#0068ff; } .fab .f-mess{ background:#0a7cff; }
.fab .ic{ font-size:18px; }

/* hub */
.hub-card{ display:block; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-bottom:16px; box-shadow:var(--sh2); transition:transform .15s ease, box-shadow .15s ease; }
.hub-card:hover{ transform:translateY(-3px); box-shadow:var(--sh); }
.hub-card .ph{ overflow:hidden; }
.hub-card img{ width:100%; height:190px; object-fit:cover; transition:transform .5s ease; }
.hub-card:hover img{ transform:scale(1.05); }
.hub-card .b{ padding:16px 18px; }
.hub-card .b b{ font-size:18px; color:var(--ink); }
.hub-card .b span{ display:block; color:var(--mut); font-size:14px; margin-top:3px; }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media(min-width:640px){
  .why{ grid-template-columns:1fr 1fr; }
  .figs{ grid-template-columns:1fr 1fr 1fr; }
  .reviews{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:36px; }
  h2{ font-size:28px; }
}

/* ===== MÁY TÍNH / màn hình lớn ===== */
@media(min-width:900px){
  .wrap{ max-width:1060px; padding:0 28px; }
  .sec{ padding:64px 0; }
  h2{ font-size:33px; margin-bottom:24px; }
  .kicker{ font-size:13px; }
  .hd{ height:66px; }
  .logo{ font-size:23px; }
  .hd-call{ font-size:15px; padding:11px 20px; }

  /* hero rộng, chữ lớn */
  .hero-in{ padding:104px 28px 92px; }
  .hero h1{ font-size:52px; max-width:940px; margin:0 auto; line-height:1.12; }
  .hero p{ font-size:19px; max-width:640px; }
  .badges{ margin-bottom:30px; }
  .btn{ font-size:17px; padding:15px 28px; }

  /* thanh uy tín to hơn */
  .trustbar .in{ max-width:940px; padding:24px 10px; }
  .trustbar b{ font-size:28px; }
  .trustbar span{ font-size:13px; }

  /* khối chữ giữ hẹp cho dễ đọc, khối lưới trải rộng */
  .pain, .commit, .offer{ max-width:720px; margin-left:auto; margin-right:auto; }
  .step{ max-width:720px; margin-left:auto; margin-right:auto; }
  details{ max-width:800px; margin-left:auto; margin-right:auto; }
  .why{ grid-template-columns:repeat(2,1fr); gap:18px; max-width:900px; margin:0 auto; }
  .figs{ grid-template-columns:repeat(3,1fr); gap:20px; }
  figure img{ aspect-ratio:3/4; }
  figure:hover{ box-shadow:var(--sh); }
  .reviews{ grid-template-columns:repeat(3,1fr); gap:18px; }

  .final{ max-width:860px; margin:0 auto; padding:52px 34px; }
  .final h2{ font-size:36px; }

  /* desktop: ẩn thanh nút đáy (đã có nút ở header + trong trang) */
  .fab{ display:none; }
  footer{ padding-bottom:44px; }

  /* hub 2 cột trên máy tính */
  .hub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .hub-grid .hub-card{ margin-bottom:0; }
  .hub-card img{ height:230px; }
}
@media(min-width:1200px){
  .wrap{ max-width:1140px; }
  .hero h1{ font-size:58px; }
}