@font-face{font-family:"Montserrat";src:url(/fonts/Montserrat-Variable.ttf) format("truetype");font-weight:600 700;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}

:root{
  --nau-moc:#7A4B2A; --nau-dam:#4A2D19; --xanh-mam:#86B97A; --xanh-rung:#4A7A3E;
  --kem:#F7F2EA; --kem-nhat:#E3D5C4; --xam-moc:#6E6155; --trang:#FFFFFF;
  --vien:#E2D6C6; --muc:#2E2119;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--kem);color:var(--nau-dam);font-family:"Be Vietnam Pro",sans-serif;font-size:17px;line-height:1.65;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:"Montserrat",sans-serif;line-height:1.25;color:var(--nau-dam)}
a{color:var(--nau-moc)}
.khung{max-width:960px;margin:0 auto;padding:0 20px}

/* Đầu trang */
.dau{background:var(--nau-moc);color:var(--kem);position:relative;overflow:hidden}
.dau::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;background:url(/hoa-tiet-mam-cay.png) center/contain no-repeat;opacity:.18;pointer-events:none}
.dau .khung{padding-top:64px;padding-bottom:64px;position:relative;z-index:1}
.nhan{display:inline-block;background:var(--xanh-mam);color:var(--muc);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.dau h1{color:var(--kem);font-weight:700;font-size:clamp(36px,8vw,60px);margin:18px 0 12px}
.dau p.gioi-thieu{color:var(--kem);font-size:clamp(18px,3.4vw,22px);max-width:640px}
.dau .nut{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:12px 22px;border-radius:10px;min-height:48px}
.btn-sang{background:var(--kem);color:var(--nau-dam)}
.btn-vien{border:1.5px solid var(--kem-nhat);color:var(--kem)}

/* Mục chung */
section{padding:56px 0}
.tieu-de{font-weight:700;font-size:clamp(26px,5vw,34px);margin-bottom:8px}
.gach{width:48px;height:4px;background:var(--xanh-mam);border-radius:2px;margin-bottom:28px}
.phu{color:var(--xam-moc)}

/* Con số */
.so-lieu{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.o-so{background:var(--trang);border:1px solid var(--vien);border-radius:14px;padding:22px}
.o-so b{display:block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:34px;color:var(--nau-moc);line-height:1.1}
.o-so span{color:var(--xam-moc);font-size:15px}

/* Kỹ năng */
.ky-nang{list-style:none;display:grid;gap:14px}
.ky-nang li{background:var(--trang);border:1px solid var(--vien);border-left:4px solid var(--xanh-mam);border-radius:10px;padding:16px 18px;font-weight:500}

/* Dự án */
.du-an{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.the{background:var(--trang);border:1px solid var(--vien);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
.the .loai{align-self:flex-start;background:var(--xanh-mam);color:var(--muc);font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.the h3{font-size:19px;font-weight:600}
.the p{color:var(--xam-moc);font-size:15.5px}

/* Dịch vụ */
.dich-vu{background:var(--nau-dam);color:var(--kem)}
.dich-vu .tieu-de,.dich-vu h3{color:var(--kem)}
.goi{border:1px solid var(--kem-nhat);border-radius:14px;padding:26px;max-width:640px}
.goi h3{font-size:22px;font-weight:700;margin-bottom:8px}
.goi p{color:var(--kem-nhat)}
.goi .gia{margin-top:16px;padding-top:16px;border-top:1px solid rgba(227,213,196,.35);color:var(--kem);font-weight:600}

/* Liên hệ */
.lien-he{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.kenh{background:var(--trang);border:1px solid var(--vien);border-radius:14px;padding:22px;text-decoration:none;color:var(--nau-dam);display:block}
.kenh small{display:block;color:var(--xam-moc);font-size:14px;margin-bottom:4px}
.kenh strong{font-size:18px;font-weight:600;word-break:break-all;color:var(--nau-moc)}
.kenh:hover{border-color:var(--nau-moc)}

/* Đặt lịch */
.dl-buoc{font-weight:600;margin:22px 0 10px}
.dl-ngay{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.dl-ngay button,.dl-gio button{font-family:inherit;cursor:pointer;border:1px solid var(--vien);background:var(--trang);color:var(--nau-dam);border-radius:10px}
.dl-ngay button{flex:0 0 auto;min-width:76px;padding:8px 10px;line-height:1.3;text-align:center}
.dl-ngay button small{display:block;color:var(--xam-moc);font-size:12px}
.dl-ngay button b{font-family:"Montserrat",sans-serif;font-size:18px}
.dl-gio{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.dl-gio button{padding:10px 0;font-weight:500;font-size:15px;min-height:44px}
.dl-ngay button[aria-pressed=true],.dl-gio button[aria-pressed=true]{background:var(--nau-moc);border-color:var(--nau-moc);color:var(--kem)}
.dl-ngay button[aria-pressed=true] small{color:var(--kem-nhat)}
.dl-form{display:grid;gap:14px;max-width:560px}
.dl-form label{display:grid;gap:6px;font-weight:500;font-size:15px}
.dl-form input,.dl-form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--vien);border-radius:10px;background:var(--trang);color:var(--nau-dam);width:100%}
.dl-form input:focus,.dl-form textarea:focus,.dl-ngay button:focus-visible,.dl-gio button:focus-visible{outline:2px solid var(--xanh-rung);outline-offset:1px}
.dl-form .btn{border:0;cursor:pointer;background:var(--nau-moc);color:var(--kem);font-family:inherit;justify-self:start}
.dl-form .btn:disabled{opacity:.55;cursor:default}
.dl-chon{background:var(--trang);border:1px solid var(--vien);border-left:4px solid var(--xanh-mam);border-radius:10px;padding:12px 16px}
.dl-bao{padding:14px 16px;border-radius:10px;border:1px solid var(--vien);background:var(--trang)}
.dl-bao.loi{border-left:4px solid var(--nau-moc)}
.dl-bao.xong{border-left:4px solid var(--xanh-rung)}
[hidden]{display:none!important}

footer{padding:28px 0 40px;color:var(--xam-moc);font-size:14px;border-top:1px solid var(--vien)}

@media (max-width:520px){
  body{font-size:16px}
  .dau .khung{padding-top:44px;padding-bottom:48px}
  section{padding:44px 0}
  .btn{flex:1 1 100%;text-align:center}
}

/* Chân trang */
.chan{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.chan a{color:var(--xam-moc)}

/* Nhiều gói dịch vụ */
.ds-goi{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.goi{max-width:none}
.btn-nau{background:var(--nau-moc);color:var(--kem);align-self:flex-start}

/* Trang sản phẩm */
.dau-nho .khung{padding-top:36px;padding-bottom:40px}
.dau-nho h1{font-size:clamp(28px,6vw,42px)}
.ve{color:var(--kem-nhat);text-decoration:none;font-weight:500}
.ghi-chu-aff{color:var(--xam-moc);font-size:14px;margin-bottom:20px;max-width:680px}
.the-sp-ngan{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:var(--trang);border:1px solid var(--vien);border-radius:14px;padding:22px}

/* Hỏi nhanh */
.chat{background:var(--trang);border:1px solid var(--vien);border-radius:14px;max-width:680px;overflow:hidden}
.chat-ds{display:flex;flex-direction:column;gap:10px;padding:18px;max-height:420px;overflow-y:auto}
.tin{max-width:85%;padding:10px 14px;border-radius:14px;font-size:15.5px;white-space:pre-wrap;word-wrap:break-word}
.tin.ai{background:var(--kem);align-self:flex-start;border-bottom-left-radius:4px}
.tin.toi{background:var(--nau-moc);color:var(--kem);align-self:flex-end;border-bottom-right-radius:4px}
.tin a{color:inherit;font-weight:600}
.chat-goi-y{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.chat-goi-y button{font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--vien);background:var(--kem);color:var(--nau-dam);border-radius:999px;padding:6px 12px}
.chat-o{display:flex;gap:8px;border-top:1px solid var(--vien);padding:12px}
.chat-o input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--vien);border-radius:10px;color:var(--nau-dam)}
.chat-o .btn{flex:0 0 auto;border:0;cursor:pointer;background:var(--nau-moc);color:var(--kem);font-family:inherit;padding:10px 18px;min-height:44px}
.chat-o .btn:disabled{opacity:.55}

/* Thanh toán QR */
.qr{display:grid;gap:14px;justify-items:start}
.qr img{width:min(280px,100%);height:auto;border:1px solid var(--vien);border-radius:12px;background:#fff}
.qr dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15.5px}
.qr dt{color:var(--xam-moc)}
.qr dd{font-weight:600;word-break:break-all}
.qr .ma{font-family:"Montserrat",sans-serif;letter-spacing:.06em}
.qr .chep{font:inherit;font-size:13px;margin-left:8px;cursor:pointer;border:1px solid var(--vien);background:var(--kem);color:var(--nau-dam);border-radius:6px;padding:2px 8px}
.dem-gio{font-weight:600;color:var(--nau-moc)}