/* Sinh tu the <style> cua bo thiet ke boi build/css-thiet-ke.mjs.
   Dung sua tay — sua trong bo thiet ke roi dung lai. */
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:#FBF8F0;background-image:radial-gradient(rgba(35,119,60,0.075) 1px,transparent 1px);background-size:24px 24px;color:#1E3B27;font-family:'Be Vietnam Pro',sans-serif;text-wrap:pretty;overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
header nav a,header a[href^="tel:"]{white-space:nowrap}
a{color:#23773C;text-decoration:none}
a:hover{color:#175A2B}
/* ===== Rút gọn bản mobile: phần lớn người xem qua điện thoại ===== */
  [data-quet]{display:none}
@media (max-width:700px){
    /* dải thẻ quẹt ngang thay vì xếp dọc dài dằng dặc */
    [data-rail]{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px !important;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    [data-rail]::-webkit-scrollbar{display:none}
    [data-rail]>*{flex:0 0 76% !important;scroll-snap-align:start;min-width:0}
    [data-rail] img{height:148px !important}
    [data-quet]{display:inline-flex !important}
    /* thông tin phụ: ẩn trên điện thoại cho trang gọn */
    [data-mob-an]{display:none !important}
    /* lưới nhỏ: 2 cột thay vì 1 */
    [data-2cot]{grid-template-columns:1fr 1fr !important;gap:10px !important}
    [data-2cot]>*{padding:14px 15px !important}
    /* nén khoảng đệm dọc */
    [data-nen]{padding-top:24px !important;padding-bottom:24px !important}
  }
@media (max-width:1023px){
    #froga-nav{display:none !important}
    #froga-nav[data-mo="1"]{display:flex !important;flex-direction:column;align-items:stretch;flex-wrap:wrap;overflow:visible;order:9;flex-basis:100%;gap:2px;padding:8px 0 4px;border-top:1px solid #E4DDC9;margin-top:6px}
    #froga-nav[data-mo="1"] a{padding:11px 4px;font-size:15px}
    #froga-ham{display:inline-flex !important}
  }
h1,h2,h3{text-wrap:balance;letter-spacing:-0.4px}
html{scroll-behavior:smooth}
@media (max-width:700px){
    /* 07/09/2026: một cột thì khung Mục lục KHÔNG dính theo cuộn, kẻo che nửa màn hình */
    nav[style*="position:sticky"]{position:static !important}
    /* dải thẻ quẹt ngang thay vì xếp dọc dài dằng dặc */
    [data-rail]{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px !important;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    [data-rail]::-webkit-scrollbar{display:none}
    [data-rail]>*{flex:0 0 76% !important;scroll-snap-align:start;min-width:0}
    [data-rail] img{height:148px !important}
    [data-quet]{display:inline-flex !important}
    /* thông tin phụ: ẩn trên điện thoại cho trang gọn */
    [data-mob-an]{display:none !important}
    /* lưới nhỏ: 2 cột thay vì 1 */
    [data-2cot]{grid-template-columns:1fr 1fr !important;gap:10px !important}
    [data-2cot]>*{padding:14px 15px !important}
    /* nén khoảng đệm dọc */
    [data-nen]{padding-top:24px !important;padding-bottom:24px !important}
  }
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes song1{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes song2{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes laroi{0%{transform:translate(0,-40px) rotate(-24deg);opacity:0}12%{opacity:0.9}50%{transform:translate(-46px,46vh) rotate(28deg)}88%{opacity:0.9}100%{transform:translate(28px,86vh) rotate(-14deg);opacity:0}}
@keyframes gon{0%{transform:translate(-50%,-50%) scale(0.55);opacity:0.55}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes duasau{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(8px) rotate(2deg)}}
@keyframes nhayvao{0%{transform:translate(140px,-70vh) rotate(24deg) scale(0.5);opacity:0}55%{transform:translate(0,0) rotate(-6deg) scale(1.08);opacity:1}70%{transform:translate(0,-26px) rotate(3deg) scale(0.98)}85%{transform:translate(0,0) rotate(0deg) scale(1.03)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes bapbenh{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes bongno{0%{transform:scale(0.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.froga-tc-muc:last-child{border-right:0}
/* 13/09/2026: hero chữ to hơn, cột chữ rộng hơn cột ảnh. Chốt ngưỡng
     1180px (= đúng max-width của khối hero) chứ không phải 701px: đã đo
     thật bằng KH_JS trên froga.vn — ở khổ 1024px (giữa 701 và 1180),
     grid-template-columns 1.3fr/0.7fr làm cột chữ chỉ còn 603px mà chữ
     46px cần 665px, TRÀN ra đè lên ảnh.

     Nhân tiện bắt được lỗi CÓ SẴN từ trước (không phải do sửa lần này):
     minmax(310px,1fr) cho hai cột NGANG NHAU vẫn tràn ở khổ ~826–1179px —
     `auto-fit` giữ đúng 2 cột (vì 2×310+48 vẫn lọt), nhưng cột chữ khi đó
     chỉ còn ~400–540px trong khi dòng "Chăm sóc máy rửa bát đúng cách" ở
     cỡ 34px (bản GỐC, chưa sửa gì) đã cần 489px — tràn đè lên ảnh ở đúng
     khổ cửa sổ thu nhỏ nửa màn hình 1920px hay laptop 900–1024px, chỉ
     không ai để ý vì hiếm ai mở trình duyệt đúng khổ đó. Vá bằng cách nâng
     ngưỡng gộp cột từ 310px lên 560px: dưới ~1216px hai cột không đủ chỗ
     nữa nên auto-fit tự gộp về MỘT cột (chữ full-width, thừa chỗ), đúng
     dải 701–1179px giờ xếp dọc thay vì ép cạnh nhau. ≥1180px luật media
     query dưới đây ép lại đúng 2 cột theo tỉ lệ mới, đã đo an toàn.

     BẪY (xem bay-da-tra-gia.md, mục C.5): minmax(560px,1fr) KHÔNG BAO GIỜ
     nhỏ hơn 560px — ở khổ điện thoại 375px cột vẫn đòi 560px, section có
     overflow:hidden nên không lộ ra thanh cuộn ngang nhưng ÂM THẦM cắt mất
     phần bên phải (hàng 3 biểu tượng USP tính theo 560px thay vì 343px
     thật, dễ bị đẩy ra ngoài khung mà không hay). Phải bọc
     `minmax(min(560px,100%),1fr)` — dưới điện thoại thì 100% < 560px nên
     floor tự hạ về đúng bề ngang máy, không tràn. */
  @media (min-width:1180px){
    [data-hero-luoi]{grid-template-columns:minmax(310px,1.3fr) minmax(310px,0.7fr) !important}
    [data-hero-h1] span:first-child{font-size:46px !important}
    [data-hero-h1] span:last-child{font-size:40px !important}
  }
html{scroll-behavior:smooth;scroll-padding-top:150px}
input[type=range]{accent-color:#23773C}
@keyframes nhayBac{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes gonSong{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
input,textarea{font-family:'Be Vietnam Pro',sans-serif}