:root{
  --xanh:#1d5a3a; --xanh-dam:#123d27; --xanh-nhat:#e8f1ea;
  --do:#c8102e; --do-dam:#a00d24;
  --kem:#faf7f1; --chu:#1f2a24; --phu:#5b6760; --vien:#e3e0d8;
  --bo:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",system-ui,Arial,sans-serif;color:var(--chu);background:var(--kem);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
h2.tieu-de{font-size:clamp(26px,3.4vw,36px);line-height:1.25;color:var(--xanh-dam);font-weight:800}
.nhan{display:inline-block;color:var(--do);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.dan{color:var(--phu);max-width:620px;margin-top:10px}
.dau-muc{margin-bottom:36px}
.giua{text-align:center}.giua .dan{margin-left:auto;margin-right:auto}

/* ô ảnh chờ: khi chưa có ảnh sẽ hiện tên file cần đặt */
.ph{position:relative;background:repeating-linear-gradient(45deg,#eee9df 0 12px,#f4f0e8 12px 24px);overflow:hidden;border-radius:var(--bo)}
.ph::after{content:"📷 " attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-size:13px;color:#8a8577;font-weight:600}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.hoan-thien .ph{background:#f1ede4}
.hoan-thien .ph::after{content:"";background:url(../images/logo.png) center/110px no-repeat;opacity:.12}

/* nút */
.nut{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;transition:.2s}
.nut-do{background:var(--do);color:#fff}.nut-do:hover{background:var(--do-dam)}
.nut-vien{border-color:var(--xanh);color:var(--xanh);background:#fff}.nut-vien:hover{background:var(--xanh);color:#fff}
.nut-xanh{background:var(--xanh);color:#fff}.nut-xanh:hover{background:var(--xanh-dam)}

/* thanh trên cùng */
.topbar{background:var(--xanh-dam);color:#d7e6dc;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:7px;padding-bottom:7px}
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--vien)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:46px;width:auto}
.logo-chu{font-weight:900;font-size:30px;letter-spacing:-1px;line-height:1}
.logo-chu .t{color:var(--xanh)}.logo-chu .a{color:var(--do)}
.logo-phu{font-size:11px;color:var(--phu);line-height:1.2;font-weight:600}
nav ul{display:flex;gap:26px;list-style:none;font-weight:600;font-size:15px}
nav a:hover{color:var(--do)}
.hotline-nut{background:var(--do);color:#fff;padding:10px 18px;border-radius:999px;font-weight:800;white-space:nowrap}
.menu-btn{display:none;background:none;border:0;font-size:28px;cursor:pointer;color:var(--xanh)}

/* banner */
.hero{padding:40px 0 64px;background:linear-gradient(180deg,#fff 0,var(--kem) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.12;font-weight:900;color:var(--xanh-dam)}
.hero h1 em{font-style:normal;color:var(--do)}
.hero p{font-size:18px;color:var(--phu);margin:18px 0 26px;max-width:520px}
.hero .nut{margin:0 10px 10px 0}
.hero .ph{aspect-ratio:5/4}
.diem-tin{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.diem-tin b{display:block;font-size:22px;color:var(--xanh)}
.diem-tin span{font-size:13px;color:var(--phu)}

/* cam kết */
.cam-ket{padding:0;margin-top:-28px;position:relative;z-index:2}
.cam-ket .luoi{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(18,61,39,.08);overflow:hidden}
.ck{padding:24px 22px;display:flex;gap:14px;align-items:flex-start;border-right:1px solid var(--vien)}
.ck:last-child{border:0}
.ck .ic{flex:0 0 44px;height:44px;border-radius:12px;background:var(--xanh-nhat);display:flex;align-items:center;justify-content:center;font-size:22px}
.ck b{display:block;color:var(--xanh-dam)}.ck span{font-size:14px;color:var(--phu)}

/* thương hiệu */
.thuong-hieu{padding:44px 0}
.th-luoi{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.th{width:150px;height:70px;background:#fff;border:1px solid var(--vien);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--xanh);letter-spacing:.06em;padding:10px}
.th img{max-height:46px;width:auto}

/* sản phẩm */
.loc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.loc button{border:1px solid var(--vien);background:#fff;padding:9px 16px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--chu)}
.loc button.on{background:var(--xanh);border-color:var(--xanh);color:#fff}
.sp-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sp{background:#fff;border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.sp:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(18,61,39,.1)}
.sp .ph{aspect-ratio:1;border-radius:0;background:#fff}
.sp .ph img{object-fit:contain;background:#fff}
.sp-tt{padding:16px;display:flex;flex-direction:column;flex:1}
.sp-hang{font-size:12px;font-weight:800;color:var(--do);letter-spacing:.08em}
.sp h3{font-size:16px;margin:4px 0 6px;color:var(--xanh-dam)}
.sp p{font-size:14px;color:var(--phu);flex:1}
.sp-duoi{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:8px}
.sp-gia{font-weight:800;color:var(--do)}
.sp-duoi a{font-size:13px;font-weight:700;background:var(--xanh-nhat);color:var(--xanh);padding:8px 12px;border-radius:999px;white-space:nowrap}
.sp-duoi a:hover{background:var(--xanh);color:#fff}

/* combo nhà mới */
.combo{background:var(--xanh);color:#fff}
.combo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.combo h2{color:#fff}.combo .dan{color:#cfe2d6}
.combo .nhan{color:#ffb3bf}
.combo ul{list-style:none;margin:22px 0 28px}
.combo li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15);display:flex;gap:10px}
.combo li::before{content:"✓";color:#ffb3bf;font-weight:900}
.combo .ph{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#2a6b48 0 12px,#246140 12px 24px)}
.combo .ph::after{color:#cfe2d6}

/* hộp quà */
.hq-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hq{background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--vien)}
.hq .ph{aspect-ratio:4/3;border-radius:0}
.hq-tt{padding:20px}
.hq h3{color:var(--xanh-dam);font-size:19px}
.hq p{color:var(--phu);font-size:14px;margin:4px 0 12px}
.hq-duoi{display:flex;justify-content:space-between;align-items:center}
.hq-duoi b{color:var(--do)}
.hq-duoi a{font-weight:700;color:var(--xanh);font-size:14px}
.hq-ghi{margin-top:26px;text-align:center;color:var(--phu)}

/* video */
.video{background:#fff}
.vd-luoi{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.vd{display:block}
.vd .ph{aspect-ratio:9/12;position:relative}
.vd:first-child .ph{aspect-ratio:auto;height:100%;min-height:340px}
.vd .ph::after{align-items:flex-end;padding-bottom:18px}
.vd .play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(200,16,46,.92);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.vd h4{margin-top:10px;font-size:15px;color:var(--xanh-dam)}

/* giới thiệu */
.gioi-thieu .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.gt-anh{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gt-anh .ph{aspect-ratio:3/4}.gt-anh .ph:first-child{grid-row:span 2;aspect-ratio:auto}
.gioi-thieu p{color:var(--phu);margin-top:14px}
.so-lieu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.so-lieu div{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:16px}
.so-lieu b{display:block;font-size:24px;color:var(--do)}
.so-lieu span{font-size:13px;color:var(--phu)}

/* đại lý */
.dai-ly{background:var(--xanh-nhat)}
.dai-ly .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.loi-ich{list-style:none;margin-top:22px;display:grid;gap:14px}
.loi-ich li{background:#fff;border-radius:12px;padding:14px 16px;display:flex;gap:12px}
.loi-ich li b{color:var(--xanh-dam)}
.loi-ich .so{flex:0 0 30px;height:30px;border-radius:50%;background:var(--do);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
form.dk{background:#fff;border-radius:18px;padding:28px;box-shadow:0 10px 30px rgba(18,61,39,.08)}
form.dk h3{color:var(--xanh-dam);margin-bottom:16px}
form.dk label{display:block;font-size:14px;font-weight:600;margin:12px 0 6px}
form.dk input,form.dk select,form.dk textarea{width:100%;padding:12px 14px;border:1px solid var(--vien);border-radius:10px;font:inherit;font-size:15px;background:#fcfbf8}
form.dk button{width:100%;justify-content:center;margin-top:18px}
.bh-khong{margin-top:24px;background:#fff;border:1px solid var(--vien);border-radius:var(--bo);padding:20px 24px}
.bh-khong b{color:var(--xanh-dam)}
.bh-khong ul{margin:8px 0 0 20px;color:var(--phu);font-size:15px;display:grid;gap:4px}
.cam-on{display:none;margin-top:14px;padding:14px;border-radius:10px;background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:600}

/* bảo hành */
.bh-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bh{background:#fff;border:1px solid var(--vien);border-radius:var(--bo);padding:22px}
.bh .buoc{font-weight:900;font-size:28px;color:var(--xanh-nhat);-webkit-text-stroke:1px var(--xanh)}
.bh h4{color:var(--xanh-dam);margin:6px 0}
.bh p{font-size:14px;color:var(--phu)}

/* liên hệ */
.lien-he{background:#fff}
.lien-he .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:36px}
.lh-dong{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--vien)}
.lh-dong .ic{font-size:22px}
.lh-dong b{display:block;color:var(--xanh-dam)}
.lh-dong span{color:var(--phu)}
.ban-do{border-radius:18px;overflow:hidden;min-height:360px;border:1px solid var(--vien)}
.ban-do iframe{width:100%;height:100%;min-height:360px;border:0}

/* chân trang */
footer{background:var(--xanh-dam);color:#c3d6ca;padding:48px 0 24px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer h5{color:#fff;font-size:15px;margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}
footer a:hover{color:#fff}
.ban-quyen{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:10px;font-size:13px;color:#8fae9b}
footer .logo-chu .t{color:#fff}

/* nút nổi */
.noi{position:fixed;right:16px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px}
.noi a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.noi .goi{background:var(--do);font-size:22px;animation:rung 2s infinite}
.noi .zl{background:#0068ff}
.noi .ms{background:#7b3cff;font-size:22px}
@keyframes rung{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.5)}50%{box-shadow:0 0 0 12px rgba(200,16,46,0)}}

/* điện thoại */
@media (max-width:960px){
  nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--vien)}
  nav.mo{display:block}
  nav ul{flex-direction:column;gap:0;padding:8px 20px}
  nav li a{display:block;padding:12px 0;border-bottom:1px solid var(--vien)}
  .menu-btn{display:block}
  .hotline-nut{display:none}
  .hero .wrap,.combo .wrap,.gioi-thieu .wrap,.dai-ly .wrap,.lien-he .wrap{grid-template-columns:1fr;gap:28px}
  .cam-ket .luoi{grid-template-columns:1fr 1fr}
  .ck:nth-child(2){border-right:0}.ck{border-bottom:1px solid var(--vien)}
  .sp-luoi{grid-template-columns:1fr 1fr;gap:12px}
  .hq-luoi{grid-template-columns:1fr}
  .vd-luoi{grid-template-columns:1fr 1fr}.vd:first-child{grid-column:1/-1}
  .vd:first-child .ph{min-height:220px}
  .bh-luoi{grid-template-columns:1fr 1fr}
  footer .wrap{grid-template-columns:1fr}
  section{padding:52px 0}
  .topbar .an-dt{display:none}
}
@media (max-width:520px){
  .sp-tt{padding:12px}.sp h3{font-size:14px}.sp p{display:none}
  .sp-duoi{flex-direction:column;align-items:flex-start}
  .ck{padding:16px 14px}.ck span{font-size:12px}
  .so-lieu b{font-size:19px}
}
.doc-tiep{display:inline-block;margin-top:6px;font-weight:700;color:var(--do);border-bottom:2px solid currentColor}