/* =====================================================================
   petami.css — MỘT file CSS duy nhất cho cả web petami.vn
   Viết kiểu "điện thoại trước": quy tắc gốc cho màn nhỏ (375px),
   màn rộng hơn thì thêm ở các khối @media phía dưới.
   Không framework, không gọi máy ngoài (phông tự lưu ở /assets/fonts/).
   ===================================================================== */

/* ---------- 1. Phông Be Vietnam Pro tự lưu (3 độ đậm × 3 bộ chữ) ----------
   Trình duyệt chỉ tải bộ chữ nào trang thật sự dùng (nhờ unicode-range). */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Bảng màu (kế hoạch V3 §2) ----------
   Mọi màu khai báo một chỗ ở đây. Bộ kiểm đọc dòng KIEM-TUONG-PHAN bên dưới
   để đo tương phản từng cặp chữ/nền (phải ≥ 4,5:1).
   KIEM-TUONG-PHAN: nau/kem, nau-nhat/kem, reu/kem, trang/cam, trang/cam-dam, nau/vang, trang/reu, kem/nau, nau/trang, reu/trang, nau-nhat/trang, cam/kem, cam/trang, cam-dam/kem, kem/reu
*/
:root{
  --kem:#FFF8EE;      /* nền chính: kem sữa */
  --nau:#3A2618;      /* chữ chính: nâu cà phê */
  --nau-nhat:#6B5242; /* chữ phụ (chú thích, dòng nhỏ) */
  --reu:#2F5E4E;      /* xanh rêu: tiêu đề phụ, link, nền khối nhấn */
  --cam:#B84E26;      /* cam gạch: CHỈ dùng cho nút hành động, chữ trắng */
  --cam-dam:#9A3F1C;  /* cam gạch đậm: nút khi rê chuột/bấm */
  --vang:#F2C14E;     /* vàng rơm: CHỈ làm nền huy hiệu / ô số bước, chữ nâu */
  --trang:#FFFFFF;
  --vien:#E7DCCB;     /* đường viền nhạt (không mang chữ) */
  --bo-goc:12px;
  --rong-toi-da:1120px;
  /* Giao diện v2 (25/10/2026, báo cáo 11-SOI-GIAO-DIEN):
     THANG KHOẢNG CÁCH — mọi margin/padding/gap trong file chỉ dùng các bậc này. */
  --k1:4px;--k2:8px;--k3:12px;--k4:16px;--k5:24px;--k6:32px;--k7:48px;--k8:64px;
  --rong-doc:720px;
  --le:var(--k4);     /* lề trái/phải của .khung (đổi ở 700–1359px để chữ không chui dưới nút Zalo nổi) */   /* CỘT ĐỌC: đoạn văn, danh sách, bảng, form, hỏi đáp — 60–80 ký tự/dòng */
  --bong:0 1px 2px rgba(58,38,24,.06),0 6px 20px rgba(58,38,24,.07);
}

/* ---------- 3. Nền tảng + THANG CHỮ ----------
   Chữ thường 16px (máy tính 17px) · h3 19px · h2 22→28px · h1 28→40px (tỉ lệ ~1,25 mỗi bậc).
   Tiêu đề text-wrap:balance → không rơi một chữ mồ côi xuống dòng. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kem);color:var(--nau);font:400 1rem/1.65 "Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--reu);text-underline-offset:3px}
a:hover{color:var(--nau)}
h1,h2,h3{font-weight:700;text-wrap:balance;margin:0}
h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:var(--k4)}
h2{font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);line-height:1.2;color:var(--reu);margin-bottom:var(--k4)}
h3{font-size:1.1875rem;line-height:1.3;margin-bottom:var(--k2)}
p,ul,ol,dl{margin:0 0 var(--k4)}
ul,ol{padding-left:1.3em}
li + li{margin-top:var(--k1)}
/* Khoảng TRÊN tiêu đề lớn hơn khoảng DƯỚI → tiêu đề "thuộc về" đoạn bên dưới nó */
.khung > * + h2{margin-top:var(--k7)}
.khung > * + h3{margin-top:var(--k5)}
/* Phần tử cuối mỗi khối không mang margin thừa → khối nào cũng dày như nhau */
.khung > :last-child,.chu-doi > :last-child,.the > :last-child,.tra-loi > :last-child{margin-bottom:0}
.khung{max-width:var(--rong-toi-da);margin:0 auto;padding:0 var(--le)}
/* Vòng 2: 700–1359px nút Zalo nổi tròn 56px ở góc phải (cách mép 12px) → mép chữ phải cách mép màn ≥ 76px.
   Lề = 76px trừ phần màn đã dư hai bên khung 1120px (không âm), tối thiểu 16px — hai bên bằng nhau. */
@media (min-width:700px) and (max-width:1359px){
  html[lang]{--le:max(var(--k4),calc(76px - max(0px,(100vw - var(--rong-toi-da)) / 2)))}
}
.an-di{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chu-nho{font-size:.875rem;color:var(--nau-nhat)}
.tac-gia{font-size:.875rem;color:var(--nau-nhat);margin:0 0 var(--k5)}
:focus-visible{outline:3px solid var(--reu);outline-offset:2px}
.bo-qua{position:absolute;left:-999px;top:0;background:var(--trang);color:var(--nau);padding:var(--k2) var(--k3);z-index:30}
.bo-qua:focus{left:var(--k2)}
@media (min-width:900px){body{font-size:1.0625rem}}

/* ---------- 4. Đầu trang + menu ----------
   Điện thoại: menu gọn sau nút "Menu" (ô tích ẩn — chạy được cả khi tắt JavaScript).
   Màn ≥ 900px: menu nằm ngang. */
.dau-trang{background:var(--kem);border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:20}
.dau-trang .khung{display:flex;align-items:center;justify-content:space-between;min-height:56px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--nau)}
.logo img{display:block;width:150px;height:auto}
.mo-menu-o{position:absolute;opacity:0;width:1px;height:1px}
.nut-menu{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--k3);border:1px solid var(--vien);border-radius:999px;font-weight:600;cursor:pointer;background:var(--trang);color:var(--nau)}
.mo-menu-o:focus-visible + .nut-menu{outline:3px solid var(--reu);outline-offset:2px}
.menu{display:none;width:100%;padding:var(--k1) 0 var(--k3)}
.mo-menu-o:checked ~ .menu{display:block}
.menu ul{list-style:none;margin:0;padding:0}
.menu li + li{margin-top:0}
.menu a{display:block;padding:10px var(--k1);text-decoration:none;color:var(--nau);font-weight:600;border-bottom:1px solid var(--vien)}
.menu a[aria-current="page"]{color:var(--reu)}
.menu .cua a{color:var(--reu)}

/* ---------- 5. Nút ----------
   Nút chính: cam gạch, chữ trắng, cao ≥ 48px (dễ bấm bằng ngón cái).
   Không nút nào kéo dài hết bề ngang trên máy tính (≥ 700px). */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:var(--k2);min-height:48px;padding:var(--k3) 20px;border-radius:999px;border:0;font-family:inherit;font-weight:600;font-size:1rem;line-height:1.3;text-decoration:none;cursor:pointer;text-align:center;text-wrap:balance;max-width:100%}
.nut-chinh{background:var(--cam);color:var(--trang)}
.nut-chinh:hover,.nut-chinh:active{background:var(--cam-dam);color:var(--trang)}
.nut-phu{background:var(--trang);color:var(--reu);border:2px solid var(--reu)}
.nut-phu:hover{background:var(--reu);color:var(--trang)}
.nut-rong{width:100%}
/* Nút + chú thích "(khách trả phí gửi)" ngay dưới: chú thích thẳng mép chữ trong nút */
.nut-kem{display:flex;flex-direction:column;align-items:flex-start;gap:var(--k1);margin:0 0 var(--k4)}
.nut-kem .chu-nho{padding-left:20px}
.cum-nut{display:flex;flex-direction:column;align-items:flex-start;gap:var(--k3);margin:0 0 var(--k4)}
.cum-nut .nut-kem{margin:0}
/* Điện thoại: chữ nút không gãy 2 dòng ở 390px — bớt đệm + cỡ chữ, KHÔNG đổi chữ */
@media (max-width:699px){
  .nut{font-size:.9375rem;padding:var(--k3) var(--k4)}
  .cum-nut,.nut-kem{align-items:stretch;width:100%}
  .nut-kem .chu-nho{padding-left:0;text-align:center}
}
@media (max-width:399px){.nut{font-size:.875rem;padding:var(--k3)}}
@media (min-width:700px){
  .nut-rong{width:auto;min-width:320px}
  .cum-nut{flex-direction:row;flex-wrap:wrap}
}

/* ---------- 6. Màn đầu (trang chủ + trang bán hàng) ----------
   Điện thoại 375×667 phải thấy đủ: ảnh hàng thật · H1 · huy hiệu · nút Zalo (giữ nguyên thứ tự).
   Máy tính: 2 cột chữ | ảnh, ảnh khung 4/3 (ảnh dọc 4/5, ảnh dải dẹt giữ nguyên tỉ lệ — không cắt chữ trên hàng). */
.man-dau{padding:var(--k3) 0 var(--k6)}
.man-dau .anh-dau{border-radius:var(--bo-goc);width:100%;aspect-ratio:16/9;object-fit:cover;max-height:30vh;background:var(--vien);margin:0}
.man-dau .anh-dau.anh-dai{aspect-ratio:auto;max-height:none;object-fit:contain}
.man-dau .anh-dau.anh-nen-trang{background:var(--trang)}
.man-dau .khung > .anh-dau{max-width:none}
.man-dau h1{margin:var(--k4) 0 var(--k3)}
.man-dau .dong-2{color:var(--nau-nhat);font-size:.95rem;margin-bottom:var(--k3)}
.huy-hieu{list-style:none;margin:0 0 var(--k4);padding:0;display:flex;flex-wrap:wrap;gap:6px}
.huy-hieu li{background:var(--vang);color:var(--nau);font-weight:600;font-size:.85rem;padding:5px 10px;border-radius:999px;line-height:1.3;margin:0}
.huy-hieu small{font-weight:400;font-size:.78rem}
.man-dau .mo-dau{font-size:1rem;margin-bottom:var(--k3)}
.man-dau .cum-nut{margin:var(--k4) 0 0}
/* Điện thoại: đoạn mở đầu xếp SAU huy hiệu + nút (chữ trong HTML giữ nguyên thứ tự) để màn 375×667 thấy đủ nút Zalo */
@media (max-width:699px){
  .chu-dau{display:flex;flex-direction:column}
  .chu-dau .mo-dau{order:5;margin:var(--k3) 0 0}
  .man-dau .anh-dau{max-height:26vh}
  .man-dau h1{font-size:1.5rem;line-height:1.2}
  .man-dau .cum-nut{margin-top:var(--k1)}
}
@media (min-width:700px){.man-dau .anh-dau{max-height:none}}
@media (min-width:900px){
  .man-dau{padding:var(--k7) 0 var(--k8)}
  .man-dau .khung{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--k7);align-items:center}
  .man-dau .anh-dau{order:2;aspect-ratio:4/3}
  .man-dau .anh-dau.anh-doc{aspect-ratio:auto;height:520px;max-height:none}
  .man-dau h1{margin-top:0}
  .man-dau .mo-dau{font-size:1.0625rem}
  .man-dau .khung:has(> .anh-dai){grid-template-columns:minmax(0,1fr)}
  .man-dau .khung:has(> .anh-dai) > .chu-dau{max-width:var(--rong-doc)}
}

/* ---------- 7. Khối thân trang — NHỊP NỀN ----------
   Khối xen kẽ kem / trắng (không còn đường kẻ 1px); .khoi-nhan (nền rêu, chữ trắng) cho 1–2 khối nhấn mỗi trang. */
.khoi{padding:var(--k7) 0;background:var(--kem)}
main > section.khoi:nth-of-type(even){background:var(--trang)}
@media (min-width:900px){.khoi{padding:var(--k8) 0}}
.khoi-nhan,main > section.khoi-nhan:nth-of-type(even){background:var(--reu);color:var(--trang)}
.khoi-nhan h2,.khoi-nhan h3,.khoi-nhan a:not(.nut){color:var(--trang)}
.khoi-nhan .chu-nho{color:var(--kem)}
.khoi-nhan .nut-phu{border-color:var(--trang)}
.khoi-nhan .nut-phu:hover{background:var(--kem);color:var(--reu)}
.khoi-nhan .nut-chinh{box-shadow:0 0 0 2px var(--kem)}

/* CỘT ĐỌC: chữ trong khối bán hàng gọn 720px (lưới thẻ, khối ảnh+chữ vẫn dùng đủ 1120px) */
.khung > :is(p,ul,ol,dl,blockquote,h2,h3,.bang-cuon,details,form,.thong-tin-nhan,.tac-gia,.nut-kem){max-width:var(--rong-doc)}

/* KHỐI ẢNH + CHỮ: 2 cột trên máy tính (ảnh phải; thêm .dao → ảnh trái), xếp chồng trên điện thoại.
   .doc khi ảnh là ảnh dọc: cột ảnh hẹp lại (≤ 400px) để ảnh không cao quá màn. */
.khoi-doi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--k5)}
.khoi-doi > .anh{margin:0}
@media (min-width:900px){
  .khoi-doi{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--k7);align-items:center}
  .khoi-doi.doc{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .khoi-doi.dao > .anh{order:-1}
  .khoi-doi.dao.doc{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
  .khoi-doi.tren{align-items:start}
  .khoi-doi.rong-chu{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}

/* ---------- 8. Lưới thẻ ----------
   3 cột máy tính · 2 cột máy tính bảng · 1 cột điện thoại. Thẻ cùng hàng cao bằng nhau,
   link/nút "Xem …" luôn bám đáy thẻ (margin-top:auto), ảnh thẻ cùng khung 4/3. */
.luoi{display:grid;gap:var(--k4);grid-template-columns:1fr;margin:0 0 var(--k5)}
.the{display:flex;flex-direction:column;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-goc);padding:20px;box-shadow:var(--bong)}
main > section.khoi:nth-of-type(even) .the{background:var(--kem)}
.the h3 a{color:var(--nau);text-decoration:none}
.the h3 a:hover{color:var(--reu);text-decoration:underline}
.xem{font-weight:600}
.the > :is(.xem,.nut,.day-the){margin-top:auto}
.the .xem{font-size:.9375rem}
.the > .nut{align-self:flex-start}
.the > .anh{margin:-20px -20px var(--k4);width:calc(100% + 40px);max-width:none;aspect-ratio:4/3;border-radius:var(--bo-goc) var(--bo-goc) 0 0}
.the > .anh.anh-nen-trang{object-fit:cover;padding:0;border:0;background:var(--trang)}
.the > .nut{font-size:.875rem;padding:var(--k3)}
/* 3 khối chữ ngắn gom thành 3 ô (xưởng): tiêu đề ô nhỏ hơn h2 khối */
.luoi-khoi{margin:0}
.luoi-khoi h2{font-size:1.25rem}
.day-the > :last-child{margin-bottom:0}
.day-the .xem{display:inline-block;margin-bottom:var(--k2)}
@media (min-width:700px){
  .luoi-2,.luoi-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .luoi-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:700px) and (max-width:1199px){
  /* thẻ lẻ cuối hàng: trải hết bề ngang (không để một thẻ trơ trọi nửa hàng); thẻ CÓ ảnh: ảnh trái — chữ phải */
  .luoi-3 > .the:last-child:nth-child(odd){grid-column:1/-1}
  .luoi-3 > .the:last-child:nth-child(odd):has(> .anh){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--k5);align-content:start}
  .luoi-3 > .the:last-child:nth-child(odd):has(> .anh) > *{grid-column:2}
  .luoi-3 > .the:last-child:nth-child(odd):has(> .anh) > .anh{grid-column:1;grid-row:1 / span 6;margin:-20px 0 -20px -20px;width:calc(100% + 20px);height:calc(100% + 40px);aspect-ratio:auto;min-height:220px;border-radius:var(--bo-goc) 0 0 var(--bo-goc)}
}
@media (min-width:1200px){
  .luoi-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .luoi-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 5 thẻ trong lưới 3 cột: thẻ đầu rộng 2 ô → 2 hàng đầy (2+1 · 3) */
  .luoi-noi-bat > .the:first-child{grid-column:span 2}
}

/* ---------- 9. Bước làm (ol.buoc): ô số vàng rơm, mỗi bước một ô ---------- */
.buoc{list-style:none;padding:0;margin:0 0 var(--k5);display:grid;gap:var(--k3);counter-reset:buoc}
.buoc li{counter-increment:buoc;position:relative;margin:0;padding:var(--k4) var(--k4) var(--k4) 64px;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-goc);min-height:68px}
main > section.khoi:nth-of-type(even) .buoc li{background:var(--kem)}
.buoc li::before{content:counter(buoc);position:absolute;left:var(--k4);top:var(--k4);width:36px;height:36px;border-radius:50%;background:var(--vang);color:var(--nau);font-weight:700;display:grid;place-items:center;line-height:1}
.khoi-nhan .buoc li,main > section.khoi-nhan:nth-of-type(even) .buoc li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:var(--trang)}
@media (min-width:900px){
  .buoc-ngang{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--k4);max-width:none!important}
  .buoc-ngang li{padding:68px 20px 20px}
  .buoc-ngang li::before{left:20px;top:20px}
}

/* ---------- 10. Ảnh thân trang ----------
   Mọi ảnh lấp ĐẦY bề ngang khối chứa, khung cố định, cắt bằng object-fit (build tự gắn lớp theo tỉ lệ gốc):
   ngang 3/2 · .anh-doc 4/5 · .anh-dai giữ nguyên tỉ lệ · .anh-nen-trang khung trắng viền nhẹ, không cắt. */
.anh{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--bo-goc);margin:var(--k5) 0;background:var(--vien)}
.anh-doc{aspect-ratio:4/5}
.anh-dai{aspect-ratio:auto;object-fit:contain}
.anh-nen-trang{object-fit:contain;padding:var(--k4);background:var(--trang);border:1px solid var(--vien)}
/* lop=khung-ngang: ép ảnh dọc vào khung ngang 3/2 khi chữ bên cạnh ngắn */
.anh.khung-ngang{aspect-ratio:3/2;max-height:none}
.khung > .anh{max-width:var(--rong-doc)}
@media (max-width:699px){
  /* điện thoại: ảnh dọc không chiếm trọn màn */
  .anh-doc{max-height:min(380px,50vh)}
}
@media (min-width:700px){
  .khung > .anh-doc:not(.anh-dau){max-width:400px}
  .khoi-doi > .anh-nen-trang{max-width:400px;justify-self:center}
}
@media (min-width:700px) and (max-width:899px){
  .khoi-doi > .anh-doc:not(.khung-ngang){max-width:420px;justify-self:center}
}
/* cờ ảnh đầu: giữ phần dưới ảnh khi cắt (pallet: thấy chân pallet + thùng, không chỉ khối màng co) */
.anh.lay-duoi{object-position:50% 85%}
/* Hàng 3 ảnh (xưởng): máy tính 3 ô cao bằng nhau 4/5; điện thoại ảnh đầu ngang trọn bề rộng + 2 ảnh dưới chia đôi */
.hang-anh{display:grid;gap:var(--k2);grid-template-columns:1fr 1fr;margin:0 0 var(--k5)}
.hang-anh .anh{margin:0;aspect-ratio:4/5;max-height:none}
.hang-anh .anh:first-child{grid-column:1/-1;aspect-ratio:3/2}
@media (min-width:700px){
  .hang-anh{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k4)}
  .hang-anh .anh:first-child{grid-column:auto;aspect-ratio:4/5}
}

/* danh sách link dài (404): 2 cột trên máy tính */
@media (min-width:700px){.ds-2-cot{columns:2;column-gap:var(--k7)}.ds-2-cot li{break-inside:avoid}.ds-2-cot li + li{margin-top:0}.ds-2-cot li{margin-bottom:var(--k1)}}
.loi-ke{margin:0 0 var(--k5);padding:0 0 0 var(--k5);border-left:4px solid var(--reu);font-size:1.125rem;line-height:1.6}
.loi-ke p:last-child{margin-bottom:0}
.duong-dan-vun{font-size:.875rem;margin:var(--k3) auto 0}
.duong-dan-vun ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.duong-dan-vun li + li{margin-top:0}
.duong-dan-vun li+li::before{content:"›";margin-right:6px;color:var(--nau-nhat)}

/* ---------- 11. Bảng ----------
   Bảng nằm trong cột đọc 720px; bảng 2 cột: cột nhãn 34%. Bảng rộng (≥ 5 cột, .bang-rong) trên điện thoại cuộn ngang gọn,
   cột đầu (Size) dính trái. */
.bang-cuon{overflow-x:auto;margin:0 0 var(--k5);border-radius:var(--bo-goc);border:1px solid var(--vien);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;background:var(--trang);font-size:.9375rem}
th,td{border-bottom:1px solid var(--vien);padding:10px var(--k3);text-align:left;vertical-align:top}
tr:last-child > :is(th,td){border-bottom:0}
:is(th,td) + :is(th,td){border-left:1px solid var(--vien)}
th{background:var(--kem);font-weight:600}
table:not(.bang-rong) tr > :first-child{width:34%}
.bang-rong td{white-space:nowrap}
@media (max-width:699px){.bang-rong{min-width:560px}}
.bang-rong :is(th,td):first-child{position:sticky;left:0;z-index:1;width:auto;font-weight:700}
.bang-rong td:first-child{background:var(--trang)}
.thong-tin-nhan{background:var(--trang);border:2px solid var(--reu);border-radius:var(--bo-goc);padding:var(--k5)}
.thong-tin-nhan h2{margin-top:0}
.thong-tin-nhan dl{margin:0}
.thong-tin-nhan dt{font-weight:700;margin-top:var(--k3)}
.thong-tin-nhan dt:first-child{margin-top:0}
.thong-tin-nhan dd{margin:0}

/* ---------- 12. Hỏi đáp (thẻ <details>; chữ phải khớp JSON-LD FAQPage) ---------- */
/* .hoi-nhanh: cùng kiểu hiện nhưng KHÔNG sinh FAQPage (trang chủ, mua sỉ, nhãn riêng, xuất khẩu, bài viết) */
.hoi-dap,.hoi-nhanh{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-goc);margin:0 0 var(--k2)}
main > section.khoi:nth-of-type(even) :is(.hoi-dap,.hoi-nhanh){background:var(--kem)}
.hoi-dap summary,.hoi-nhanh summary{cursor:pointer;font-weight:600;padding:14px var(--k4);min-height:48px;text-wrap:balance}
.hoi-dap .tra-loi,.hoi-nhanh .tra-loi{padding:0 var(--k4) var(--k4)}
:is(.hoi-dap,.hoi-nhanh) + :not(details){margin-top:var(--k4)}

/* ---------- 13. Form xin báo giá (cột đọc 720px) ---------- */
.form-bao-gia{display:grid;gap:var(--k3);margin:0 0 var(--k5)}
.form-bao-gia label{font-weight:600;display:block;margin-bottom:var(--k1)}
.form-bao-gia input[type=text],.form-bao-gia input[type=tel],.form-bao-gia select,.form-bao-gia textarea{width:100%;min-height:48px;padding:10px var(--k3);border:1px solid var(--nau-nhat);border-radius:8px;background:var(--trang);color:var(--nau);font:inherit}
.form-bao-gia textarea{min-height:96px}
.form-bao-gia .nut{justify-self:start}
.form-bao-gia p{margin:0}
.o-tich{display:flex;gap:10px;align-items:flex-start;font-weight:400!important}
.o-tich input{width:22px;height:22px;margin-top:2px;flex:0 0 auto}
.bat-buoc{color:var(--cam)}
.o-bay{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-status{font-weight:600;color:var(--cam-dam)}
.form-status:empty{display:none}
@media (max-width:699px){.form-bao-gia .nut{justify-self:stretch}}

/* ---------- 14. Trang ĐỌC (body.trang-bai: bài kiến thức, hỏi đáp, trang luật) ----------
   Cả trang là một cột 720px; h2 trên 48 / dưới 16; ảnh dọc nổi phải cho chữ chảy bên cạnh. */
.trang-bai main .khung{max-width:calc(var(--rong-doc) + 2 * var(--le))}
/* Vòng 2 — trang nhiều chữ (body.trang-hep: mua sỉ, xuất khẩu, liên hệ, nhãn riêng) và khối .khoi-hep: cột 720px CANH GIỮA,
   màn đầu vẫn rộng 1120px. Khối ảnh+chữ trong cột hẹp: cột ảnh 260px. */
.trang-hep main > section:not(.man-dau) > .khung,.khoi-hep > .khung{max-width:calc(var(--rong-doc) + 2 * var(--le))}
@media (min-width:900px){
  .trang-hep .khoi-doi{gap:var(--k6)}
  .trang-hep .khoi-doi.doc{grid-template-columns:minmax(0,1fr) minmax(0,260px)}
  .trang-hep .khoi-doi.dao.doc{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
}
.trang-bai main > .khoi{background:var(--kem)}
.trang-bai .khung > * + h3{margin-top:var(--k6)}
.trang-bai .khung > :is(h2,h3) + h3{margin-top:var(--k4)}
@media (min-width:700px){
  .trang-bai .khung > .anh-doc{float:right;width:300px;max-width:42%;margin:var(--k1) 0 var(--k4) var(--k6)}
  .trang-bai .khung > :is(.bang-cuon,details,.cum-nut,.nut-kem,.luoi,form,.anh:not(.anh-doc)){clear:both}
}

/* ---------- 15. Chân trang ----------
   Máy tính: lưới 3 cột (logo + liên hệ | trang | luật), dòng pháp nhân dưới cùng. Điện thoại: chừa đáy cho nút Zalo nổi. */
.chan-trang{background:var(--nau);color:var(--kem);padding:var(--k7) 0;font-size:.9375rem}
.chan-trang a{color:var(--kem)}
.chan-trang a:hover{color:var(--vang)}
.chan-trang .khung{display:grid;gap:var(--k5)}
.chan-trang ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--k2)}
.chan-trang li + li{margin-top:0}
.chan-cot{display:grid;gap:var(--k4);align-content:start}
.chan-logo{display:block;width:150px;height:55px;padding:0;border-radius:10px;background:var(--kem) url(/assets/img/logo-petami-300.webp) center/130px auto no-repeat;box-sizing:content-box;border:var(--k2) solid var(--kem)}
.chan-trang .phap-nhan{max-width:none;margin:0;padding-top:var(--k5);border-top:1px solid rgba(255,248,238,.18);font-size:.8125rem;line-height:1.7;opacity:.88}
.chan-trang .phap-nhan strong{font-weight:600}
@media (min-width:700px){
  .chan-trang{padding:var(--k8) 0 var(--k6)}
  .chan-trang .khung{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:var(--k6) var(--k7)}
  .chan-trang .phap-nhan{grid-column:1/-1}
}

/* ---------- 16. Nút Zalo nổi (góc phải dưới, mọi trang) ----------
   Điện thoại: thu thành nút tròn 56×56 chỉ còn biểu tượng (chữ "Zalo" vẫn trong HTML cho máy đọc màn hình);
   petami.js ẩn nút khi form báo giá hoặc chân trang đang hiện trên màn → không che ô nhập. */
.zalo-noi{position:fixed;right:var(--k3);bottom:max(var(--k3),env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;justify-content:center;gap:var(--k2);min-height:52px;padding:0 18px;border-radius:999px;background:var(--cam);color:var(--trang);font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(58,38,24,.28);transition:opacity .2s,transform .2s}
.zalo-noi:hover{background:var(--cam-dam);color:var(--trang)}
.zalo-noi svg{width:22px;height:22px;flex:0 0 auto}
.zalo-noi.an-zalo{opacity:0;transform:translateY(12px);pointer-events:none}
@media (max-width:1359px){
  .zalo-noi{width:56px;height:56px;min-height:56px;padding:0}
  .zalo-noi svg{width:26px;height:26px}
  .zalo-noi .zalo-chu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- 17. Menu máy tính ---------- */
@media (min-width:900px){
  .nut-menu{display:none}
  .menu{display:block!important;width:auto;padding:0}
  .menu ul{display:flex;gap:2px}
  .menu a{border:0;padding:var(--k2) 10px;font-size:.95rem}
}
/* 900–1199px: lề khung rộng để chừa nút Zalo → menu gọn lại cho vừa một hàng với logo */
@media (min-width:900px) and (max-width:1199px){.menu a{padding:var(--k2) 6px;font-size:.875rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.zalo-noi{transition:none}}