:root{
  --vang:#F5B301;
  --vang-nhat:#FFF3D6;
  --xanh:#1B6B3A;
  --xanh-dam:#12502B;
  --do:#D32F2F;
  --nen:#FFFBF4;
  --chu:#2B2118;
  --chu-nhat:#6B5D4F;
  --vien:#EDE0CC;
  --bong:0 2px 12px rgba(43,33,24,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:var(--chu);
  background:var(--nen);
  line-height:1.7;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--xanh);text-decoration:none}
a:hover{text-decoration:underline}
.khung{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---- Thanh đầu ---- */
header{background:#fff;border-bottom:3px solid var(--vang);position:sticky;top:0;z-index:50;box-shadow:var(--bong)}
.dau{display:flex;align-items:center;gap:14px;padding:10px 0;flex-wrap:wrap}
.dau img{width:52px;height:auto;border-radius:50%}
.ten{font-weight:800;font-size:1.15rem;color:var(--xanh);line-height:1.2}
.ten small{display:block;font-weight:500;font-size:.72rem;color:var(--chu-nhat);letter-spacing:.08em;text-transform:uppercase}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:7px 13px;border-radius:999px;font-weight:600;font-size:.93rem;color:var(--chu)}
nav a:hover{background:var(--vang-nhat);text-decoration:none}
nav a.goi{background:var(--do);color:#fff}
nav a.goi:hover{background:#b71c1c}

/* ---- Hero ---- */
.hero{position:relative;background:var(--xanh-dam);color:#fff;overflow:hidden}
.hero img.nen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.hero .noi{position:relative;padding:72px 20px;max-width:760px;margin:0 auto;text-align:center}
.hero h1{font-size:2.5rem;margin:0 0 14px;line-height:1.22;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero p{font-size:1.12rem;margin:0 auto 26px;max-width:620px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.nut{display:inline-block;padding:13px 28px;border-radius:999px;font-weight:700;margin:5px}
.nut-chinh{background:var(--vang);color:#3a2a00}
.nut-chinh:hover{background:#ffc93c;text-decoration:none}
.nut-phu{background:rgba(255,255,255,.16);color:#fff;border:2px solid rgba(255,255,255,.7)}
.nut-phu:hover{background:rgba(255,255,255,.28);text-decoration:none}

/* ---- Phần chung ---- */
section{padding:56px 0}
section.sang{background:#fff}
h2.tieu{font-size:1.85rem;margin:0 0 8px;color:var(--xanh-dam);text-align:center}
p.dan{text-align:center;color:var(--chu-nhat);max-width:640px;margin:0 auto 34px}

/* ---- Sản phẩm ---- */
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.the{background:#fff;border:1px solid var(--vien);border-radius:16px;overflow:hidden;box-shadow:var(--bong);display:flex;flex-direction:column}
.the img{aspect-ratio:4/3;object-fit:cover;width:100%}
.the .noi{padding:20px;flex:1;display:flex;flex-direction:column}
.the h3{margin:0 0 8px;font-size:1.22rem;color:var(--xanh-dam)}
.the p{margin:0 0 14px;color:var(--chu-nhat);font-size:.97rem}
.the ul{margin:0 0 16px;padding-left:20px;font-size:.95rem;color:var(--chu-nhat)}
.the .day{margin-top:auto}
.gia{font-weight:800;color:var(--do);font-size:1.05rem;margin-bottom:12px}
.nut-nho{display:inline-block;background:var(--xanh);color:#fff;padding:10px 20px;border-radius:999px;font-weight:700;font-size:.95rem}
.nut-nho:hover{background:var(--xanh-dam);text-decoration:none}

/* ---- Câu chuyện ---- */
.doi{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.doi img{border-radius:16px;box-shadow:var(--bong)}
@media(max-width:820px){.doi{grid-template-columns:1fr}}

/* ---- Blog ---- */
.bai{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.bai a{display:block;background:#fff;border:1px solid var(--vien);border-radius:14px;padding:20px;box-shadow:var(--bong);color:var(--chu)}
.bai a:hover{border-color:var(--vang);text-decoration:none;transform:translateY(-2px)}
.bai h3{margin:0 0 8px;font-size:1.05rem;color:var(--xanh-dam);line-height:1.4}
.bai time{font-size:.85rem;color:var(--chu-nhat)}

/* ---- Thực đơn ---- */
.bang-gia{margin:0 0 26px}
.bang-gia img{width:100%;border-radius:16px;box-shadow:var(--bong);aspect-ratio:1600/1000;object-fit:contain}
.duoi-bang{text-align:center}
.duoi-bang .ghi{display:block;margin-top:12px;font-size:.9rem;color:var(--chu-nhat)}
.chi-doc{display:none}
@media(max-width:640px){
  .bang-gia img{aspect-ratio:1080/1350}
  .chi-ngang{display:none}
  .chi-doc{display:inline-block}
}

/* ---- Liên hệ ---- */
.lienhe{background:var(--xanh-dam);color:#fff;text-align:center}
.lienhe h2{color:#fff}
.lienhe p{color:rgba(255,255,255,.9)}
.sdt{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.sdt a{background:var(--vang);color:#3a2a00;padding:15px 30px;border-radius:999px;font-weight:800;font-size:1.1rem}
.sdt a:hover{background:#ffc93c;text-decoration:none}

/* ---- Nút nổi Zalo + Gọi ---- */
.noi-nut{
  position:fixed;right:16px;bottom:16px;z-index:900;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.nut-noi{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.nut-noi:hover{transform:scale(1.08);text-decoration:none}
.nut-zalo{background:#0068FF}
.chu-zalo{font-weight:800;font-size:1rem;letter-spacing:.02em}
.nut-goi{background:var(--do);animation:rung 2.2s ease-in-out infinite}
@keyframes rung{
  0%,88%,100%{transform:rotate(0)}
  90%{transform:rotate(-12deg)}
  92%{transform:rotate(12deg)}
  94%{transform:rotate(-8deg)}
  96%{transform:rotate(8deg)}
}
@media(prefers-reduced-motion:reduce){.nut-goi{animation:none}}
@media(max-width:640px){
  .noi-nut{right:12px;bottom:12px;gap:10px}
  .nut-noi{width:50px;height:50px}
  .chu-zalo{font-size:.9rem}
}

/* ---- Chân trang ---- */
footer{background:#241a12;color:rgba(255,255,255,.75);padding:34px 0;font-size:.92rem}
footer a{color:var(--vang)}
footer .khung{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---- Trang bài viết ---- */
article{max-width:760px;margin:0 auto;padding:44px 20px}
article h1{font-size:2rem;line-height:1.28;color:var(--xanh-dam);margin:0 0 10px}
article .ngay{color:var(--chu-nhat);font-size:.92rem;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid var(--vang)}
article h2{font-size:1.4rem;color:var(--xanh-dam);margin:34px 0 12px}
article h3{font-size:1.15rem;color:var(--xanh);margin:26px 0 10px}
article ul,article ol{padding-left:26px}
article li{margin-bottom:7px}
article img{border-radius:12px;margin:22px 0}
article table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem;display:block;overflow-x:auto}
article th,article td{border:1px solid var(--vien);padding:9px 12px;text-align:left}
article th{background:var(--vang-nhat)}
article blockquote{margin:22px 0;padding:14px 20px;background:var(--vang-nhat);border-left:4px solid var(--vang);border-radius:0 10px 10px 0}
.ve{display:inline-block;margin-bottom:24px;font-weight:600}
.chot{margin-top:44px;padding:26px;background:var(--vang-nhat);border-radius:16px;text-align:center}
.chot h3{margin:0 0 10px;color:var(--xanh-dam)}

@media(max-width:640px){
  body{font-size:16px}
  .hero h1{font-size:1.75rem}
  .hero .noi{padding:52px 16px}
  h2.tieu{font-size:1.5rem}
  article h1{font-size:1.55rem}
  nav{width:100%;margin-left:0}
  nav a{font-size:.86rem;padding:6px 11px}
}