/* HOSO design token - nguồn duy nhất cho màu, font, nút.
   Đừng ghi mã màu thẳng vào trang. Luôn dùng var(--hoso-*). */
:root{
  --hoso-nau:#603813;
  --hoso-xanh:#78bc20;
  --hoso-be:#F0DBC0;
  --hoso-nen:#ffffff;
  --hoso-chu:#2b2118;
  --hoso-chu-nhat:#6b5a4a;
  --hoso-vien:#e8ded2;

  --hoso-font:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --hoso-bo-goc:14px;
  --hoso-bong:0 2px 12px rgba(96,56,19,.10);
  --hoso-rong:1120px;
  --hoso-le:20px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--hoso-font);color:var(--hoso-chu);
  background:var(--hoso-nen);line-height:1.65;font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hoso-nau)}

.hoso-khung{max-width:var(--hoso-rong);margin:0 auto;padding:0 var(--hoso-le)}
.hoso-muc{padding:64px 0}
.hoso-muc--be{background:var(--hoso-be)}

h1,h2,h3{line-height:1.25;color:var(--hoso-nau);margin:0 0 16px}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:clamp(23px,3.6vw,32px)}
h3{font-size:clamp(19px,2.4vw,22px)}
p{margin:0 0 16px}

/* Nút - thứ tự ưu tiên: Zalo > gọi lại > hotline */
.hoso-nut{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;font-weight:700;font-size:17px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
}
.hoso-nut--zalo{
  background:linear-gradient(135deg,var(--hoso-xanh),#5ea015);color:#fff;
  box-shadow:0 4px 14px rgba(120,188,32,.32);
}
.hoso-nut--goilai{background:var(--hoso-nau);color:#fff}
.hoso-nut--hotline{background:transparent;color:var(--hoso-nau);border-color:var(--hoso-nau)}
.hoso-nhom-nut{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}

.hoso-luoi{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hoso-the{
  background:var(--hoso-nen);border:1px solid var(--hoso-vien);
  border-radius:var(--hoso-bo-goc);padding:24px;box-shadow:var(--hoso-bong);
}
table{width:100%;border-collapse:collapse;margin:0 0 20px}
th,td{padding:12px 14px;border-bottom:1px solid var(--hoso-vien);text-align:left}
th{background:var(--hoso-be);color:var(--hoso-nau)}

.hoso-faq{border-bottom:1px solid var(--hoso-vien);padding:16px 0}
.hoso-faq summary{font-weight:700;color:var(--hoso-nau);cursor:pointer;font-size:18px}
.hoso-faq p{margin:12px 0 0}

.hoso-chan{background:var(--hoso-nau);color:#f5ece1;padding:40px 0;font-size:15px}
.hoso-chan a{color:var(--hoso-be)}

@media(max-width:640px){
  .hoso-muc{padding:44px 0}
  .hoso-nut{width:100%;justify-content:center}
}
