/* vatlieucachdien.vn: giao diện (spec docs/superpowers/specs/2026-10-21-redesign-design.md).
   Màu web chỉ khai báo ở :root (ux-ui-rule mục 1). Chuyển động mức 1 (Nhẹ), chỉ trong prefers-reduced-motion: no-preference. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/be-vietnam-pro-400-vietnamese.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(/fonts/be-vietnam-pro-400-latin.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(/fonts/be-vietnam-pro-700-vietnamese.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(/fonts/be-vietnam-pro-700-latin.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 dự phòng chỉnh cỡ cho gần Be Vietnam Pro, giảm xô chữ lúc font tải xong (CLS) */
@font-face { font-family: "BVP Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 107%; ascent-override: 96%; descent-override: 24%; }

:root {
  --chu: #1d2329; --nhat: #5b6670; --nen: #ffffff; --nen2: #f3f5f7; --vien: #dde3e8;
  --chinh: #0b4f6c; --chinh2: #083a50; --nhan: #c2610f; --nhan-sang: #f2a35e;
  --nut-goi: #a8520b; --zalo: #0068ff;
  --bong: 0 8px 22px rgba(8, 58, 80, .14);
}
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.65 "Be Vietnam Pro", "BVP Fallback", system-ui, sans-serif; color: var(--chu); background: var(--nen); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
a { color: var(--chinh); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--chinh); outline-offset: 2px; border-radius: 2px; }
.khung { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* Header: lục giác PL + tên + dòng nhỏ, menu (partials/menu.njk) */
header.dau { background: var(--chinh2); color: var(--nen); }
header.dau .khung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-top: 8px; padding-bottom: 0; }
.ten-web { color: var(--nen); text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 4px 0; min-height: 44px; }
.ten-web .chu { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; }
.ten-web small { display: block; font-weight: 400; font-size: 12px; line-height: 1.4; opacity: .88; }
.ten-web .luc-giac { height: 34px; width: auto; flex: none; }
.luc-giac .lg-nen { fill: var(--nen); }
.luc-giac .lg-pl { fill: var(--chinh); }
.luc-giac .lg-chan { fill: var(--nhan); }
header.dau .ten-web:focus-visible { outline-color: var(--nhan-sang); }

main { padding: 20px 16px 8px; }
h1 { font-size: 28px; line-height: 1.3; margin: 8px 0 12px; letter-spacing: -.01em; }
h2 { font-size: 22px; line-height: 1.35; margin: 36px 0 10px; letter-spacing: -.005em; }
h3 { font-size: 18px; line-height: 1.4; margin: 22px 0 6px; }
.vun { font-size: 14px; color: var(--nhat); margin: 0 0 4px; }
.author-byline { font-size: 14px; color: var(--nhat); margin: 0 0 8px; }
.tom-tat { background: var(--nen2); border-left: 4px solid var(--nhan); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 16px 0; }
.tom-tat p { margin: 4px 0; }

figure.anh { margin: 18px 0; }
figure.anh img { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--nen2); }
figure.anh figcaption { font-size: 14px; color: var(--nhat); margin-top: 6px; }

/* Bảng: hàng sọc; cột đầu dính khi vuốt ngang trên điện thoại */
.bang { overflow-x: auto; margin: 14px 0; border: 1px solid var(--vien); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
th, td { border-bottom: 1px solid var(--vien); padding: 9px 12px; text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { background: var(--chinh2); color: var(--nen); font-weight: 700; }
tbody tr:nth-child(even) td { background: var(--nen2); }
td { background: var(--nen); }
.bang th:first-child, .bang td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--vien); }

/* Thẻ sản phẩm (trang chủ) */
.the { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 16px 0; }
.the > a { display: grid; grid-template-columns: 104px 1fr; column-gap: 14px; align-items: start; border: 1px solid var(--vien); border-radius: 10px; padding: 12px; text-decoration: none; color: var(--chu); background: var(--nen); font-size: 15px; line-height: 1.5; }
.the > a img { grid-column: 1; grid-row: 1 / span 2; display: block; width: 104px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--nen2); }
.the > a strong { grid-column: 2; color: var(--chinh); display: block; font-size: 17px; line-height: 1.35; margin: 0 0 4px; }
@media (min-width: 560px) {
  .the { grid-template-columns: 1fr 1fr; gap: 14px; }
  .the > a { display: block; padding: 0 14px 14px; overflow: hidden; font-size: 16px; }
  .the > a img { width: calc(100% + 28px); max-width: none; aspect-ratio: 4 / 3; border-radius: 0; margin: 0 -14px 12px; }
  .the > a strong { font-size: 18px; }
}
.the > a:focus-visible { outline-offset: 3px; }

/* Nút: nền trượt + mũi tên (mức 1) */
.lien-he-khoi { background: var(--nen2); border-radius: 10px; padding: 16px; margin: 24px 0; }
.nut { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 8px; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; margin: 4px 8px 4px 0; color: var(--nen); }
.nut::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--chinh2); transform: scaleX(0); transform-origin: 0 50%; }
.nut::after { content: "→"; }
.nut-goi { background: var(--nut-goi); }
.nut-zalo { background: var(--zalo); }
.nut:hover::before { transform: scaleX(1); }
.nut:focus-visible { outline: 3px solid var(--nhan-sang); outline-offset: 2px; }
.nguoi { display: flex; gap: 14px; align-items: center; margin: 12px 0; }
.nguoi img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; }

.cach-lam { font-size: 15px; color: var(--nhat); border-top: 1px solid var(--vien); margin-top: 32px; padding-top: 8px; }
.faq { margin-top: 28px; }
.faq-item { border-bottom: 1px solid var(--vien); }
.faq-item summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--nhan); flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 12px; }

footer.cuoi { background: var(--chinh2); color: var(--nen); font-size: 14px; margin-top: 40px; padding: 22px 0; }
footer.cuoi a { color: var(--nen); }
footer.cuoi a:focus-visible { outline-color: var(--nhan-sang); }
footer.cuoi p { margin: 4px 0; }

/* Thanh Gọi/Zalo dính đáy (kiểu B "Sáng gọn", anh chọn 21/10/2026). Nút không xê dịch (khách cần bấm trúng):
   chỉ biểu tượng và vệt sáng bên trong nút chuyển động, xem khối prefers-reduced-motion cuối file. */
.thanh-nut { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--nen); box-shadow: 0 -6px 18px rgba(8, 58, 80, .12); z-index: 10; }
.thanh-nut a { position: relative; overflow: hidden; isolation: isolate; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 6px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: 16px; letter-spacing: .01em; }
.thanh-nut .ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.thanh-nut .nut-goi { background: var(--chinh); color: var(--nen); }
.thanh-nut .nut-zalo { background: var(--nen); color: var(--zalo); box-shadow: inset 0 0 0 2px var(--zalo); }
.thanh-nut .nut-goi:hover { background: var(--chinh2); }
.thanh-nut .nut-zalo:hover { background: var(--zalo); color: var(--nen); }
.thanh-nut a:focus-visible { outline: 3px solid var(--nhan); outline-offset: 2px; }

@media (min-width: 768px) {
  .ten-web .luc-giac { height: 40px; }
  .ten-web .chu { font-size: 19px; }
  .ten-web small { font-size: 13px; }
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  h3 { font-size: 19px; }
  .thanh-nut { max-width: 760px; margin: 0 auto; border: 1px solid var(--vien); border-bottom: 0; border-radius: 12px 12px 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .nut { transition: transform .15s; }
  .nut::before { transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
  .nut::after { transition: transform .3s; }
  .nut:hover::after { transform: translateX(5px); }
  .nut:active { transform: scale(.98); }
  .the > a { transition: transform .2s, box-shadow .2s, border-color .2s; }
  .the > a:hover { transform: translateY(-3px); box-shadow: var(--bong); border-color: var(--chinh); }
  .the > a:active { transform: scale(.98); }
  .faq-item summary::after { transition: transform .2s; }
  /* Thanh Gọi/Zalo: chuông rung ở biểu tượng Gọi, bong bóng Zalo nảy lệch nhịp, vệt sáng lướt qua nút Gọi; nhấn thì lún nhẹ */
  .thanh-nut a { transition: background-color .2s, transform .12s; }
  .thanh-nut a:active { transform: scale(.97); }
  .thanh-nut .nut-goi .ico { transform-origin: 50% 60%; animation: rung 5s 1.2s ease-in-out infinite; }
  .thanh-nut .nut-zalo .ico { animation: nay 5s 3.7s ease-in-out infinite; }
  .thanh-nut .nut-goi::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-110%); animation: luot 5s 1.2s ease-in-out infinite; }
  @keyframes rung { 0%, 16%, 100% { transform: rotate(0); } 2%, 6%, 10% { transform: rotate(-14deg); } 4%, 8%, 12% { transform: rotate(14deg); } }
  @keyframes nay { 0%, 14%, 100% { transform: translateY(0) scale(1); } 5% { transform: translateY(-4px) scale(1.12); } 9% { transform: translateY(0) scale(.96); } }
  @keyframes luot { 0%, 20% { transform: translateX(-110%); } 34%, 100% { transform: translateX(110%); } }
}