/* ============================================================
   MẪU WEB 990k — MỘT bộ xương, NĂM bộ da.
   Đổi da bằng class trên <body>: gd-do-vang | gd-xanh-y-te
                       | gd-navy-cong-ty | gd-xanh-la | gd-hong-lam-dep
   Không framework. Không JS bắt buộc. Một chủ đề sáng, cố ý.

   Bản này viết lại sau khi ĐO 25 bản mẫu theme WordPress bán chạy
   (Astra, Kadence, GeneratePress, Blocksy, Divi, Elementor) rồi rút số.
   Bốn luật khiến bản cũ trông rẻ, cả bốn đều đo được:

   1. MỘT DẢI MÀU trong 800px đầu. Bản cũ có 6 dải trong 720px đầu, ba
      trong số đó là ba sắc đỏ khác nhau nằm trong 171px. Cả trang có
      ~13 dải vì mọi mục xen kẽ trắng/kem. Đo trên 25 bản mẫu: trang
      6-9 mục thì chỉ 1-3 mục có nền khác trắng, và chúng gom cụm.
      Nay: băng đầu (tối) · dải ba lời hứa (kem) · mục liên hệ (kem) ·
      chân trang (tối). Hết. Mọi mục khác nền trắng.

   2. MỘT MÀU BÃO HOÀ, mọi ô màu còn lại S < 25%. Bản cũ có 91 mã màu
      và bốn sắc gần-trắng lệch nhau dưới 3% dùng làm bốn tín hiệu khác
      nhau — mắt không phân biệt nổi, chỉ thấy bẩn. Nay mọi biến suy ra
      từ ĐÚNG BỐN SỐ mỗi bộ da: (góc màu, S nhấn, L nhấn, L nền tối).
      Xám đều lệch nhẹ về góc màu của bộ da — xám trung tính tuyệt đối
      trông như chưa ai chọn.

   3. MÀU NHẤN LÀ MỰC, KHÔNG PHẢI GIẤY. Đo tỉ lệ dùng trên bản mẫu thật:
      12:1 nghiêng về mực. Bản cũ tô nguyên dải vàng bão hoà cho ba lời
      hứa và nguyên thanh đỏ cho đầu bảng giá. Nay màu nhấn chỉ còn ở
      nút, giá, liên kết, chữ nghiêng trong băng đầu, tiêu đề chân trang.

   4. CÓ THANG. Bản cũ: 12 bậc cỡ chữ trong đó 7 bậc lệch nhau 6-9%
      (mắt không thấy, chỉ máy thấy), 28 giá trị khoảng cách với 13 giá
      trị lệch lưới 4px, 8 công thức đổ bóng. Nay: 7 bậc khoảng cách
      nhân 1,5 (thang lõi WordPress), 4 bậc cỡ chữ, MỘT công thức bóng.

   Một số ĐO ĐƯỢC phải nhớ, đừng chép số của theme Tây về:
   dấu tiếng Việt CHẠM NHAU khi line-height < 1,142. Đo bằng fontTools
   trên Be Vietnam Pro (unitsPerEm=1000): đỉnh chữ 'ế' ở 0,914em, chữ
   'ộ' trải -0,227…0,774em, nên khe giữa hai dòng = line-height - 1,142.
   WordPress Twenty Twenty-Five đặt heading lineHeight 1,125 — con số đó
   là BẪY với tiếng Việt. Dưới đây không chỗ nào dưới 1,25.
   ============================================================ */

/* ---------- Thang dùng chung, không theo bộ da ---------- */
:root{
  /* Thang khoảng cách nhân 1,5 — lấy đúng thang lõi WordPress. */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:36px; --s6:54px; --s7:81px;
  /* Đo trên 25 bản mẫu: đệm mục máy bàn 70-104px, điện thoại 24-64px,
     tỉ lệ điện thoại/máy bàn 0,50-0,60. clamp() cho đúng dải đó. */
  --khoang-muc:clamp(48px,8vw,96px);
  --le:clamp(16px,4vw,32px);
  --rong:1120px;
  /* Khe giữa hai dòng = (line-height - 1,142) x cỡ chữ, phải >= 2px thì dấu
     mới không chạm. 1,25 chỉ đủ cho chữ >= 21px: đo trang thật ra nút 17px
     khe 1,89px, tiêu đề thẻ 14px khe 1,51px — dấu 'ế' chạm dấu 'ộ' dòng
     dưới. Ngưỡng đúng cho cỡ nhỏ nhất của trang (14px) là 1,285. */
  --lh-de:1.30;
  --lh-than:1.65;
  --f-nho:14px;
  --f-tem:14px;                       /* Trước 13px. Đây là cỡ của nhãn hoa,
                                         đầu bảng giá và chân trang — thứ
                                         khách đọc trên điện thoại rẻ. 13px
                                         có dấu tiếng Việt thì mất dấu.
                                         14px là sàn, không hạ nữa. */
  --f-dan:18px;                       /* Câu dẫn dưới tiêu đề và câu dẫn
                                         trong băng đầu. Trước hai chỗ này
                                         viết 17px thẳng — lệch 6% so với
                                         16px, mắt không thấy, chỉ làm thang
                                         thêm một bậc thừa. */
  --f-h3:clamp(18px,2.2vw,21px);
  --f-h2:clamp(24px,3.4vw,32px);
  --f-h1:clamp(29px,5vw,42px);
  /* Bề rộng ruột chữ. Đơn vị ch = bề rộng chữ SỐ "0", ở phông này rộng
     hơn chữ thường ~28%: viết 64ch tưởng 64 chữ, đo ra 78. Dùng em.
     Đo trên trang thật bằng span thử, phông Be Vietnam Pro: một ký tự
     rộng 0,4646em (đã tính dấu cách). Vậy 30em ≈ 65 chữ, dưới mốc 70. */
  --ruot:30em;
  /* MỘT công thức bóng cho cả trang. Đo trên bản mẫu thật: alpha
     0,04-0,20, nhoè >= 20px, spread ÂM. Twenty Twelve dùng alpha 0,30
     nhoè 6px — đó là dấu vân tay "2012" đo được. */
  --bong:0 1px 2px rgba(0,0,0,.04),0 12px 28px -12px rgba(0,0,0,.12);
  --trang:#ffffff;
  /* Xanh Zalo. Màu nhận diện của người ta là #0068ff, nhưng chữ trắng
     16px nét 700 đặt lên đó chỉ ra 4,75:1 — qua mốc WCAG AA 4,5 nhờ 0,25,
     tức qua nhờ may chứ không nhờ thiết kế. Cạnh nó nút Gọi là 6,00:1.
     Tối một nấc còn #005ce6 ra 5,72:1: vẫn đọc ra Zalo, mà biên thành
     thật. Nút này là nút khách bấm để nhắn — đọc được đi trước giống hệt. */
  --xanh-zalo:#005ce6;
  --chu-tieu-de:Roboto,"Helvetica Neue",Arial,sans-serif;
  --chu-than:Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Bộ da mặc định: ĐỎ (quán ăn / kinh doanh chung) ---------- */
:root{
  --chinh:#b63420;
  --chinh-dam:#592017;
  --nhan:#e4978b;
  --kem:#f9f6f6;
  --soc:#fbf9f9;
  --vien:#e9e3e2;
  --chu:#29201f;
  --chu-nhat:#766360;
  --bang-chu:#e7dcda;
  --chan-chu:#e7dcda;
  --o-trong-nen:#f2eeed;
  --o-trong-chu:#6d5b58;   /* 5,54:1 tren --o-trong-nen (cu 4,65:1 — dat AA nhung sat mep 0,15) */
  --bo-goc:4px;
  --co-chu-goc:16px;
  --ty-le-anh-dau:4/3;
}

/* ---------- Bộ da: XANH Y TẾ (nha khoa, phòng khám, nhà thuốc) ---------- */
body.gd-xanh-y-te{
  --chinh:#11699c;
  --chinh-dam:#103c56;
  --nhan:#8bc3e4;
  --kem:#f6f8f9;
  --soc:#f9fafb;
  --vien:#e2e6e9;
  --chu:#1f2529;
  --chu-nhat:#606e76;
  --bang-chu:#dae2e7;
  --chan-chu:#dae2e7;
  --o-trong-nen:#edf0f2;
  --o-trong-chu:#556269;   /* 5,53:1 tren --o-trong-nen (cu 4,61:1 — dat AA nhung sat mep 0,11) */
  --bo-goc:8px;
  --co-chu-goc:17px;
  --ty-le-anh-dau:4/3;
}

/* ---------- Bộ da: NAVY CÔNG TY (xưởng, vật tư, dịch vụ kỹ thuật) ---------- */
body.gd-navy-cong-ty{
  --chinh:#284871;
  --chinh-dam:#182739;
  --nhan:#8bb2e4;
  --kem:#f6f7f9;
  --soc:#f9fafb;
  --vien:#e2e5e9;
  --chu:#1f2329;
  --chu-nhat:#606a76;
  --bang-chu:#dae0e7;
  --chan-chu:#dae0e7;
  --o-trong-nen:#edeff2;
  --o-trong-chu:#56606c;   /* 5,55:1 tren --o-trong-nen (cu 4,64:1 — dat AA nhung sat mep 0,14) */
  --bo-goc:0;
  --co-chu-goc:16px;
  --ty-le-anh-dau:16/9;
}

/* ---------- Bộ da: XANH LÁ (nông sản, thực phẩm, vật tư nông nghiệp) ---------- */
body.gd-xanh-la{
  --chinh:#226d31;
  --chinh-dam:#173b1e;
  --nhan:#8be49d;
  --kem:#f6f9f7;
  --soc:#f9fbf9;
  --vien:#e2e9e3;
  --chu:#1f2921;
  --chu-nhat:#55695a;
  --bang-chu:#dae7dd;
  --chan-chu:#dae7dd;
  --o-trong-nen:#edf2ee;
  --o-trong-chu:#516555;   /* 5,55:1 tren --o-trong-nen (cu 4,61:1 — dat AA nhung sat mep 0,11) */
  --bo-goc:2px;
  --co-chu-goc:17px;
  --ty-le-anh-dau:4/3;
}

/* ---------- Bộ da: HỒNG LÀM ĐẸP (tóc, nail, spa) ---------- */
body.gd-hong-lam-dep{
  --chinh:#a12b5a;
  --chinh-dam:#4c1a2e;
  --nhan:#e48baf;
  --kem:#f9f6f7;
  --soc:#fbf9fa;
  --vien:#e9e2e5;
  --chu:#291f23;
  --chu-nhat:#766069;
  --bang-chu:#e7dadf;
  --chan-chu:#e7dadf;
  --o-trong-nen:#f2edef;
  --o-trong-chu:#705863;   /* 5,55:1 tren --o-trong-nen (cu 4,63:1 — dat AA nhung sat mep 0,13) */
  --bo-goc:14px;
  --co-chu-goc:16px;
  --ty-le-anh-dau:4/3;
}

/* ============================================================
   Bộ xương — dùng chung cho cả năm bộ da
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--trang);
  color:var(--chu);
  font:400 var(--co-chu-goc)/var(--lh-than) var(--chu-than);
  /* Chừa chỗ cho thanh Gọi/Zalo dính đáy. Cộng thêm vạch home iPhone:
     thiếu nó thì dòng cuối trang nằm dưới vạch, vuốt trúng là thoát app.
     Con số phải bằng ĐÚNG chiều cao thanh (.day a{min-height:56px}). Trước
     để 72px: thanh che 56px dưới cùng, 16px còn lại là một dải TRẮNG hở ra
     ngay dưới chân trang màu đậm — nhìn ra trang bị cụt chứ không ra chừa
     chỗ. Vạch home iPhone đã có env(safe-area-inset-bottom) lo riêng. */
  padding-bottom:calc(56px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
/* height:auto bắt buộc đi kèm width/height trên thẻ <img>. Thiếu nó thì khi
   max-width bóp ảnh hẹp lại, chiều cao vẫn giữ đúng số ghi trên thẻ — ảnh bẹt
   ra méo hình. Ô nào tự đặt height riêng thì luật của ô đó thắng, không sao. */
img{max-width:100%;height:auto;display:block}
a{color:var(--chinh);text-decoration:none}
a:hover{text-decoration:underline}
/* Vòng lấy nét: dùng màu chính (đậm, ăn trên nền trắng). Trên hai vùng
   nền tối thì đổi sang trắng — màu chính nằm trên nền tối cùng góc màu
   là gần như vô hình. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--chinh);outline-offset:2px}
.bang a:focus-visible,.chan a:focus-visible,.day a:focus-visible{outline-color:var(--trang)}

.khung{width:100%;max-width:var(--rong);margin:0 auto;padding:0 var(--le)}

/* ---------- Thanh trên cùng ---------- */
/* Trước là dải nền --chinh-dam, tức dải màu tối THỨ HAI trong 100px đầu,
   ngay trên băng đầu cũng tối. Hai dải tối kẹp một dải trắng mỏng là
   dáng trang 2010. Nay: nền kem, chữ xám, một nét viền chân. */
.thanh-tren{background:var(--kem);color:var(--chu-nhat);font-size:var(--f-tem);
  border-bottom:1px solid var(--vien)}
.thanh-tren .khung{display:flex;flex-wrap:wrap;gap:4px var(--s4);align-items:center;
  justify-content:space-between;min-height:36px}
.thanh-tren span{display:inline-flex;align-items:center;gap:6px}
.thanh-tren b{font-weight:700;color:var(--chu)}
.thanh-tren svg{width:13px;height:13px;fill:var(--chinh);flex:none}

/* ---------- Thanh mục lục ---------- */
/* Dính đỉnh, một hàng, cuộn ngang: nhãn là tiêu đề khối nguyên văn nên có
   thể dài quá thanh; mép phải mờ dần để lộ là còn mục phía sau. Mỗi liên
   kết đệm --s3 hai đầu, cao trên 44px (WCAG 2.5.8). */
.muc-luc{position:sticky;top:0;z-index:50;background:var(--trang);
  border-bottom:1px solid var(--vien)}
.muc-luc .khung{display:flex;gap:var(--s1);overflow-x:auto;white-space:nowrap;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,var(--chu) calc(100% - var(--s5)),transparent)}
.muc-luc .khung::-webkit-scrollbar{display:none}
.muc-luc a{flex:none;display:inline-flex;align-items:center;
  padding:var(--s3) var(--s2);color:var(--chu);font:600 var(--f-nho)/var(--lh-de) var(--chu-than);
  border-bottom:2px solid transparent}
.muc-luc a:hover{text-decoration:none;color:var(--chinh);border-bottom-color:var(--chinh)}
.muc-luc a:focus-visible{outline-offset:-2px}
.bang,.muc{scroll-margin-top:var(--s6)}

/* ---------- Đầu trang ---------- */
/* Viền chân 3px màu chính -> 1px màu viền. Nét dày nhất đo được trên
   25 bản mẫu là 1px, không có ngoại lệ. */
.dau-trang{background:var(--trang);border-bottom:1px solid var(--vien)}
.dau-trang .khung{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  justify-content:space-between;padding-top:var(--s3);padding-bottom:var(--s3)}
.hieu{display:flex;align-items:center;gap:var(--s2)}
.hieu:hover{text-decoration:none}
.dau-bat{width:48px;height:48px;flex:none;border-radius:var(--bo-goc);
  background:var(--chinh);display:grid;place-items:center}
.dau-bat svg{width:26px;height:26px;fill:var(--trang)}
/* Bỏ chữ hoa. Chữ hoa tiếng Việt cõng nguyên tầng dấu nên nặng hơn hẳn
   chữ hoa tiếng Anh; đo trên bản mẫu thật cũng chỉ dùng chữ hoa cho
   nhãn nhỏ, không dùng cho tên. Giãn chữ âm giúp tên lớn bớt rời, nhưng
   chặn ở -0,01em: quá mức là dấu chạm thân chữ bên cạnh. */
.hieu h1{margin:0;font:700 clamp(20px,2.6vw,26px)/var(--lh-de) var(--chu-tieu-de);
  color:var(--chinh);letter-spacing:-.01em}
.hieu p{margin:2px 0 0;font-size:var(--f-nho);color:var(--chu-nhat)}

/* Viền đứt -> viền liền. Viền đứt trên hộp số điện thoại đọc ra "ô nhập
   liệu tạm" chứ không ra "thông tin quan trọng". */
.hop-hotline{display:flex;align-items:center;gap:var(--s2);
  border:1px solid var(--vien);border-radius:var(--bo-goc);
  padding:var(--s1) var(--s3);background:var(--trang)}
.hop-hotline svg{width:24px;height:24px;fill:var(--chinh);flex:none}
.hop-hotline small{display:block;font-size:var(--f-tem);color:var(--chu-nhat);
  text-transform:uppercase;letter-spacing:.08em}
.hop-hotline strong{font:700 var(--f-h3)/var(--lh-de) var(--chu-tieu-de);
  color:var(--chinh);font-variant-numeric:tabular-nums}

/* ---------- Băng đầu trang ---------- */
/* Bỏ nền chuyển sắc xuyên tâm + nền chuyển sắc dọc. Đo trên 25 bản mẫu:
   nền băng đầu hoặc là ẢNH, hoặc là MỘT màu phẳng. Chuyển sắc hai lớp
   trên nền màu đặc là dấu vân tay 2013. */
.bang{position:relative;background:var(--chinh-dam);color:var(--trang);overflow:hidden}
.bang-nen{position:absolute;inset:0;background:var(--chinh-dam)}
.bang .khung{position:relative;display:grid;gap:var(--s5);align-items:center;
  grid-template-columns:1.05fr .95fr;
  padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(40px,7vw,88px)}
/* Bỏ chữ hoa + bỏ đổ bóng chữ. Bóng chữ đen 55% dưới tiêu đề là cách
   duy nhất bản cũ làm cho chữ đọc được trên nền chuyển sắc; nền phẳng
   thì tương phản đã đủ, bóng chỉ còn làm chữ nhoè. */
.bang h2{margin:0 0 var(--s3);font:700 var(--f-h1)/var(--lh-de) var(--chu-tieu-de);
  letter-spacing:-.01em;text-wrap:balance}
.bang h2 em{font-style:normal;color:var(--nhan);display:block}
.bang p{margin:0;font-size:var(--f-dan);color:var(--bang-chu);max-width:var(--ruot)}
.nut-hang{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}

/* Nút: cao 56px. Đo trên bản mẫu thật 48-54px; cộng thêm vì đây là nút
   GỌI ĐIỆN trên điện thoại, thứ được bấm nhiều nhất trang.
   Bỏ chuyển sắc dọc và bỏ box-shadow "0 3px 0" (nút nổi kiểu 2014). */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:56px;padding:var(--s2) var(--s5);border-radius:var(--bo-goc);
  font:700 var(--co-chu-goc)/var(--lh-de) var(--chu-than);
  border:1px solid transparent;cursor:pointer}
.nut svg{width:19px;height:19px;fill:currentColor;flex:none}
.nut:hover{text-decoration:none;filter:brightness(1.06)}
/* Nút chính trên nền tối: nền TRẮNG, chữ màu chính. Đã thử nền màu nhấn
   trước — màu nhấn là sắc nhạt (L 72%) nên trên nền tối nó đọc ra "nút
   phụ đang mờ" chứ không ra "bấm vào đây". Trắng đặc + trắng viền là
   đúng cặp đo được trên bản mẫu thật, và thứ bậc rõ ngay từ xa.
   Tương phản chữ trên nền trắng đã tính đủ 5 bộ da: 6,00 · 5,96 · 9,31
   · 6,36 · 6,98. */
.nut-nhan{background:var(--trang);color:var(--chinh)}
.nut-vien{background:transparent;color:var(--trang);border-color:rgba(255,255,255,.6)}

/* Viền trắng 4px + bóng đen 40% -> khung ảnh kiểu album 2011.
   Nay: không viền, bo theo bộ da, một công thức bóng chung. */
/* padding PHẢI là 0. Bản trước để 12px cho chữ "chưa có ảnh" thở, nhưng
   khi CÓ ảnh thì 12px đó thành một khung nền sáng viền quanh tấm ảnh —
   đúng cái khung ảnh album 2011 vừa bỏ, chỉ là vẽ bằng padding thay vì
   bằng border. Chữ chỗ trống tự đệm lấy. */
.o-anh{border:0;border-radius:var(--bo-goc);box-shadow:var(--bong);
  background:var(--o-trong-nen);aspect-ratio:var(--ty-le-anh-dau);
  position:relative;
  display:grid;place-items:center;text-align:center;padding:0;overflow:hidden}
/* <picture> nam GIUA .o-anh va <img>. No la inline, cao tu dong, nen khung
   1/1 cua .o-anh khong truyen xuong duoc va object-fit ben duoi thanh cau
   lenh chet: moi o anh vien xam tren duoi. Cho <picture> thanh khoi cao
   day o thi anh moi cat vua khung. */
/* Anh phai nam DE len khung, khong duoc lam o luoi. Ly do: .o-anh la
   display:grid + place-items:center, ma place-items:center = align-self:center
   -> o luoi KHONG gian ra day hang, hang ngam thi tu co theo NOI DUNG. The la
   height:100% do vao mot hang dang tu co theo chinh no: vong tron, trinh duyet
   tra ve chieu cao that cua anh. Khung khai aspect-ratio 16/10 nhung anh cao
   hon, tran ra 11-42px roi bi overflow:hidden xen mat DAY — object-fit:cover
   khong he chay lan nao. Hai anh canh nhau lech chieu cao 30,5px vi the.
   Dat tuyet doi inset:0 la cho anh mot chieu cao XAC DINH bang dung khung,
   luc do cover moi cat, va cat can giua. Chu cho o trong van la o luoi nen
   place-items:center giu nguyen cho no. */
.o-anh > picture,.o-anh > img{position:absolute;inset:0;width:100%;height:100%}
.o-anh img{width:100%;height:100%;object-fit:cover}
/* :not(.nhan-ts) — không có nó thì câu này (0,1,1) đè nhãn TRƯỚC/SAU (0,1,0)
   dù nhãn viết sau: nhãn nhận màu chữ ô trống (--o-trong-chu) trên nền đen 72%, đo
   ra 1,88:1 hồi còn #5b7260, tức chữ tàng hình; và nhận cả đệm 16px, giãn chữ .1em, dòng 1,5
   của ô trống thay vì 5px/10px của chính nó. Nhãn cũng là <span> trong
   .o-anh, chỉ khác việc. */
.o-anh span:not(.nhan-ts){font:700 var(--f-tem)/1.5 var(--chu-tieu-de);
  color:var(--o-trong-chu);
  text-transform:uppercase;letter-spacing:.1em;padding:var(--s3)}

/* ---------- Ba lời hứa ---------- */
/* Trước: nguyên dải vàng bão hoà chạy hết bề ngang, ngay dưới băng đỏ —
   dải màu thứ hai trong 800px đầu, và là chỗ màu nhấn bị dùng làm GIẤY
   thay vì làm MỰC. Nay: nền kem, biểu tượng màu chính, ngăn bằng khoảng
   trống chứ không bằng vạch. */
.hua{background:var(--kem);color:var(--chu);border-bottom:1px solid var(--vien)}
.hua .khung{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  padding-top:var(--s5);padding-bottom:var(--s5)}
.hua > .khung > div{display:flex;align-items:flex-start;gap:var(--s2)}
.hua svg{width:26px;height:26px;fill:var(--chinh);flex:none;margin-top:2px}
.hua b{display:block;font:700 16px/var(--lh-de) var(--chu-tieu-de)}
.hua small{font-size:var(--f-nho);color:var(--chu-nhat);line-height:1.5}

/* ---------- Khung mục chung ---------- */
.muc{padding:var(--khoang-muc) 0}
.muc-kem{background:var(--kem)}
/* Bỏ chữ hoa, bỏ màu chính. Tiêu đề mục màu chính x8 mục là màu nhấn
   phủ quá 10% diện tích trang — ngưỡng đo được trên bản mẫu thật. */
.tieu-de{text-align:center;margin:0 0 var(--s5);
  font:700 var(--f-h2)/var(--lh-de) var(--chu-tieu-de);
  color:var(--chu);letter-spacing:-.005em;text-wrap:balance}
/* Có câu dẫn thì tiêu đề nhích lại gần nó, hết khoảng cách âm. :has()
   thay cho margin-top âm — trình duyệt cũ không hiểu thì chỉ hở rộng
   hơn một chút, không vỡ. */
.khung:has(> .dan) > .tieu-de{margin-bottom:var(--s2)}
.dan{text-align:center;max-width:var(--ruot);margin:0 auto var(--s5);
  color:var(--chu-nhat);font-size:var(--f-dan)}
/* Câu dẫn dài (trang.js gắn lớp `dai` khi quá 120 ký tự) trả về căn trái:
   khối 4-7 dòng căn giữa thì hai mép đều răng cưa, mắt mất chỗ bám đầu
   dòng. Vẫn giữ chặn bề rộng và vẫn nằm giữa khung — chỉ CHỮ căn trái. */
.dan.dai{text-align:left}

/* ---------- Bảng giá ---------- */
/* Ba lỗi đo được ở bản cũ, sửa cả ba:
   1. Bảng trải hết 1140px nên giữa tên món và giá hở 919px trống, bằng
      81% bề ngang bảng — mắt không nối được hàng. Nay chặn 760px, đặt
      giữa (bảng hai chiều thì vẫn trải, vì nó có nhiều cột giá).
   2. Kẻ sọc chẵn/lẻ ĐẾM CẢ dòng nhóm, nên qua mỗi dòng nhóm nhịp sọc
      lật pha, sinh ra hai dòng tô liền nhau. Nay bỏ hẳn sọc: hàng phân
      cách bằng nét 1px là đủ, và không còn gì để lật pha.
   3. Đầu bảng là thanh đỏ đặc chữ trắng — dải màu bão hoà thứ ba trên
      trang. Nay đầu bảng là chữ xám nhỏ trên nền trắng, dưới một nét. */
.bang-gia{width:100%;border-collapse:collapse;background:var(--trang);
  font-size:var(--co-chu-goc)}
.bang-gia:not(.bang-2c){max-width:760px;margin-left:auto;margin-right:auto}
/* Chú thích bảng nằm TRONG bảng, nên bề rộng của nó tính theo bảng chứ không
   theo khung nhìn. Bảng hai chiều rộng 1028px trong khung cuộn 361px, chú
   thích được 420px — tức câu "phải đo xong mới có giá chốt" bị cắt mất đuôi
   cho tới khi khách vuốt ngang, mà không ai vuốt để đọc chú thích. Chặn nó
   theo bề rộng KHUNG NHÌN trừ hai lề trang (đúng công thức của .khung), lấy
   số nào nhỏ hơn giữa nó và --ruot. */
.bang-gia caption{caption-side:top;text-align:left;padding:0 0 var(--s2);
  font-size:var(--f-nho);color:var(--chu-nhat);
  max-width:min(var(--ruot), calc(100vw - 2 * var(--le)))}
.bang-gia th{background:var(--trang);color:var(--chu-nhat);text-align:left;
  padding:0 var(--s2) var(--s1);font:700 var(--f-tem)/1.3 var(--chu-tieu-de);
  text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--chu)}
.bang-gia th:last-child,.bang-gia td:last-child{text-align:right;white-space:nowrap}
/* Bảng MỘT chiều: cột giá được xuống dòng. Đo trên gara ở màn 393px: giá dài
   nhất "công từ 9.500.000 đ" chiếm 193px, cột tên 225px, bảng 418px — rộng
   hơn khung 361px nên khách phải vuốt ngang mới thấy GIÁ. Cho xuống dòng thì
   bảng về đúng 361px, vừa màn. Con số không bị xé: trang.js dán số với "đ"
   bằng khoảng trắng cứng, nên chỗ ngắt duy nhất là sau "từ" / "công từ".
   Bảng HAI chiều không theo luật này: bốn cột giá thì cuộn ngang là đúng,
   và nó đã có cột tên ghim cùng dòng nhắc vuốt. */
.bang-gia:not(.bang-2c) td:last-child{white-space:normal}
.bang-gia td{padding:var(--s2);border-top:1px solid var(--vien)}
/* Dòng nhóm là ô duy nhất của hàng nên dính luật căn phải của cột giá.
   Trả nó về căn trái — nhóm món phải thẳng hàng với tên món bên dưới. */
.bang-gia tr.nhom td{text-align:left;background:var(--kem);
  font:700 var(--f-tem)/1.3 var(--chu-tieu-de);
  text-transform:uppercase;color:var(--chu-nhat);letter-spacing:.08em}
.gia{font-weight:700;color:var(--chu);font-variant-numeric:tabular-nums}
/* Ô ảnh món: khung vuông cố định, ảnh nào cũng cắt vừa, hàng không nhảy cao thấp. */
.bang-gia td.o-mon{width:80px;padding:var(--s1) 0 var(--s1) 0}
.bang-gia td.o-mon img{display:block;width:64px;height:64px;object-fit:cover;
  border-radius:var(--bo-goc);background:var(--soc)}
/* Chữ chỉ dành cho trình đọc màn hình. */
.chi-doc{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
/* ---------- Bảng giá hai chiều ---------- */
/* Cột đầu là TÊN hạng mục, không phải tiêu đề cột, nên phải trả nó về
   dáng chữ thường — luật .bang-gia th ở trên đang tô chữ hoa xám nhỏ. */
.bang-2c th[scope="row"]{background:var(--trang);color:var(--chu);
  font:400 var(--co-chu-goc)/1.4 var(--chu-than);text-transform:none;letter-spacing:0;
  padding:var(--s2);border-top:1px solid var(--vien);border-bottom:0;white-space:normal;
  /* Ghim cột tên lại khi cuộn ngang: cuộn tới cột giá thứ tư vẫn biết đang
     đọc dòng nào. Viền phải vẽ bằng box-shadow vì ô sticky trong bảng
     border-collapse hay rụng mất border. Nền phải ĐỤC, không trong suốt,
     không thì chữ cột dưới trôi qua dưới nó khi cuộn. */
  position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--vien)}
.bang-2c tr.nhom td{position:sticky;left:0}
/* Mọi cột giá căn phải, không riêng cột cuối. */
.bang-2c th:not(:first-child){text-align:right}
.bang-2c td.gia{text-align:right;white-space:nowrap}
.bang-2c th[scope="col"]{white-space:nowrap}
/* Dòng nhắc vuốt: máy bàn thấy hết bảng rồi thì nhắc làm gì. */
.chi-cuon{display:none;margin:var(--s2) auto 0;font-size:var(--f-nho);
  color:var(--chu-nhat);text-align:center}

.cuon-ngang{overflow-x:auto}

.doi-dang{display:flex;flex-direction:column}
.doi-dang>#gia-bang,.doi-dang>#gia-luoi{scroll-margin-top:var(--s7)}
.chon-dang{order:-1;display:flex;width:fit-content;margin:0 auto var(--s3);
  border:1px solid var(--vien);border-radius:var(--bo-goc);overflow:hidden;
  background:var(--trang)}
.chon-dang a{padding:var(--s1) var(--s3);text-decoration:none;
  font:700 var(--f-nho)/1.3 var(--chu-tieu-de);color:var(--chu-nhat)}
.chon-dang a+a{border-left:1px solid var(--vien)}
.chon-dang a:focus-visible{outline-offset:-3px}
.chon-dang a[href="#gia-luoi"],
#gia-bang:target~.chon-dang a[href="#gia-bang"]{
  background:var(--chinh);color:var(--trang)}
#gia-bang:target~.chon-dang a[href="#gia-luoi"]{
  background:var(--trang);color:var(--chu-nhat)}
#gia-bang{display:none}
#gia-bang:target{display:block}
#gia-bang:target~#gia-luoi{display:none}
.ghi-gia{margin:0 0 var(--s2);font-size:var(--f-nho);color:var(--chu-nhat);
  max-width:min(var(--ruot), calc(100vw - 2 * var(--le)))}
.ten-nhom-mon{margin:var(--s4) 0 var(--s2);
  font:700 var(--f-tem)/1.3 var(--chu-tieu-de);
  text-transform:uppercase;letter-spacing:.08em;color:var(--chu-nhat)}
.luoi-mon{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.the-mon{background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo-goc);overflow:hidden;display:flex;flex-direction:column}
.the-mon .anh-mon img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;background:var(--soc)}
.the-mon .ten-mon{padding:var(--s1) var(--s2) 0}
.the-mon .gia{padding:var(--s1) var(--s2) var(--s2);margin-top:auto}
.the-mon:not(:has(.anh-mon)){justify-content:center}
.the-mon:not(:has(.anh-mon)) .gia{margin-top:0}
.doi-dang>.nho-ts{order:1}

/* ---------- Lưới ---------- */
/* Công thức lưới dùng lại khắp trang: minmax(min(100%,Xpx),1fr).
   min(100%,...) là thứ chặn tràn ở màn 320px — thiếu nó thì ô rộng Xpx
   cứng, màn hẹp hơn là đẩy trang cuộn ngang. auto-fit để 1/2/3/5/7 ô
   đều xếp được mà không cần thêm câu lệnh màn hình nào. */
/* Truoc: repeat(4,1fr) cung. Tiem co 5 anh thi hang hai con tro 1 o, tiem
   6 anh con 2 o — luoi rach. auto-fill tu chia theo be rong that. */
.luoi-anh{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:var(--s2)}
.luoi-anh figure{margin:0}
.luoi-anh .o-anh{aspect-ratio:1/1;padding:0}
/* Chú thích căn giữa thì mỗi tấm ảnh đội một khối chữ ba dòng hình thang,
   năm tấm cạnh nhau là năm hình thang lệch nhau — mép chữ không bám vào mép
   ảnh nào cả. Căn trái thì chữ dựng đúng cột với ảnh nó tả, năm khối thành
   năm cột thẳng. Căn giữa chỉ hợp với chú thích MỘT dòng, mà chú thích ở đây
   luôn dài (phải nói rõ ảnh chụp ở đâu, không phải của tiệm này). */
.luoi-anh figcaption{font-size:var(--f-nho);color:var(--chu-nhat);
  padding-top:var(--s1);text-align:left}

/* ---------- Trước / sau ---------- */
.luoi-ts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:var(--s5)}
.luoi-ts figure{margin:0}
.luoi-ts .cap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
.luoi-ts .o-anh{position:relative;aspect-ratio:1/1;padding:0}
.nhan-ts{position:absolute;top:0;left:0;z-index:1;background:rgba(0,0,0,.72);color:var(--trang);
  padding:5px 10px;font:700 var(--f-tem)/1.3 var(--chu-tieu-de);
  text-transform:uppercase;letter-spacing:.08em}
/* Truoc: nen var(--chinh). Do ra 2.41:1 (navy) va 1.89:1 (xanh la) — chu
   12px/700 khong dat nguong chu lon 3:1, phai la 4.5:1. Giu nguyen nen den
   nhu nhan "Truoc" (dat), phan biet hai nhan bang net mau ben trai. */
/* "Trước" 5 chữ, "Sau" 3 chữ -> hai nhãn lệch bề ngang 14,2px, nằm cạnh
   nhau ở góc trên hai ô sát nhau nên mắt đọc ra hai nhãn khác loại. Ghim
   một bề ngang tối thiểu rồi căn giữa chữ trong đó. */
.nhan-ts{min-width:76px;text-align:center}
.nhan-ts.sau{border-left:4px solid var(--chinh)}
/* Cùng lý do như chú thích lưới ảnh ở trên: chú thích ở đây cũng luôn dài
   (phải nói ảnh chụp ở đâu), cũng xuống hai dòng, nên căn giữa ra hình thang
   lệch. Hai loại chú thích ảnh nằm cách nhau một mục trên cùng trang mà căn
   hai kiểu thì mắt đọc ra hai thứ khác loại. Một kiểu: căn trái theo mép ảnh. */
.luoi-ts figcaption{font-size:var(--f-nho);color:var(--chu-nhat);
  padding-top:var(--s1);text-align:left}
.nho-ts{margin:var(--s4) auto 0;font-size:var(--f-nho);color:var(--chu-nhat);
  text-align:center}

/* ---------- Các cơ sở ---------- */
.luoi-cn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--s4)}
.luoi-cn article{padding:var(--s4)}
/* Luat 44px o duoi chi phu .dong-tin trong khoi lien he va chan trang.
   The tung co so cung toan link tel: — cao 19px neu khong noi them. */
.luoi-cn .dong-tin{padding:var(--s1) 0;align-items:flex-start}
.luoi-cn .dong-tin a{display:inline-flex;align-items:center;min-height:44px}
.nut-nho{min-height:44px;padding:var(--s1) var(--s3);font-size:var(--f-nho);
  margin-top:var(--s2);display:inline-flex;align-items:center;
  color:var(--chinh);border-color:var(--vien)}

/* ---------- Giờ theo ngày ---------- */
.gio-tuan{border-collapse:collapse;margin-top:var(--s1);font-size:var(--f-nho)}
.gio-tuan th{text-align:left;font-weight:400;color:var(--chu-nhat);
  padding:3px var(--s3) 3px 0;white-space:nowrap}
.gio-tuan td{padding:3px 0;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Thẻ chữ ---------- */
.the{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-goc);
  box-shadow:var(--bong);padding:var(--s4)}
.the h3{margin:0 0 var(--s2);font:700 var(--f-h3)/var(--lh-de) var(--chu-tieu-de);
  color:var(--chu)}
/* Căn đều mà không có gạch nối tiếng Việt thì phải kéo dãn khoảng trắng
   để lấp cho vừa mép phải: đo được dòng xấu nhất giãn 6,14px so với
   3,73px thường, tức 65%, thành vệt trắng dọc giữa đoạn. Căn trái. */
.the p{margin:0 0 var(--s2);max-width:var(--ruot)}
/* Thẻ chỉ có một cột chữ thì trải hết bề ngang khung — đo ra một dòng
   149 chữ, hết dòng mắt dò ngược về đầu là lạc hàng. Chặn thẻ theo đúng
   bề rộng ruột cộng hai lề trong, rồi đặt giữa. */
.the-hep{max-width:calc(var(--ruot) + var(--s4) * 2 + 2px);
  margin-left:auto;margin-right:auto}
.the p:last-child{margin-bottom:0}
.the ul{margin:0;padding-left:var(--s4)}
.the li{margin-bottom:6px;max-width:var(--ruot)}
.cot-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:var(--s4);align-items:start}
/* Cột chữ dài cạnh cột gạch đầu dòng ngắn để lại một hố ở góc dưới phải. Đo
   trên trang thật ở 1280px: gara "Xe vào xưởng thế nào" 429 so 254 — hố 175px;
   nội thất "Mua hàng và đóng mới" 432 so 221 và "Bảo hành và đổi trả" 367 so
   162 — hố 205-211px. Không đi cân chiều cao hai cột: đoạn văn và danh sách là
   hai thứ khác nhau, ép bằng nhau là ép nội dung theo bố cục. Mà VIỀN lấy khối
   — vạch dọc kéo hết chiều cao hàng thì chỗ trống nằm TRONG khối, mắt đọc ra
   lề chứ không đọc ra hố. Phải bỏ `align-items:start` thì ô mới cao hết hàng.
   Chỉ từ 861px: dưới mốc đó lưới còn một cột, vạch dọc bên trái là vạch thừa.
   Mốc 861px lấy đúng mốc đã có, không đẻ mốc mới. */
@media (min-width:861px){
  .cot-2{align-items:stretch}
  .cot-2 > :last-child:not(:first-child){
    border-left:1px solid var(--vien);padding-left:var(--s4)}
}

/* ---------- Hồ sơ năng lực ---------- */
.luoi-nl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--s4)}
.luoi-nl article{background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo-goc);box-shadow:var(--bong);overflow:hidden}
.luoi-nl .o-anh{border-radius:0;box-shadow:none;aspect-ratio:16/10;padding:0}
.luoi-nl .noi{padding:var(--s3)}
.luoi-nl h3{margin:0 0 6px;font:700 var(--co-chu-goc)/var(--lh-de) var(--chu-tieu-de);
  color:var(--chu)}
.luoi-nl p{margin:0;font-size:var(--f-nho);color:var(--chu-nhat);max-width:var(--ruot)}
.luoi-nl .chu-o{margin:var(--s2) 0 0;font-size:var(--f-tem);color:var(--chu-nhat);
                font-style:italic}

/* ---------- Lời khách (khối mới, ẩn khi rỗng) ---------- */
.luoi-dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--s4)}
.luoi-dg blockquote{margin:0 0 var(--s2)}
.luoi-dg blockquote p{text-align:left;margin:0;max-width:var(--ruot)}
.luoi-dg figcaption{display:flex;align-items:center;gap:var(--s1);
  font:700 var(--f-nho)/var(--lh-de) var(--chu-tieu-de);color:var(--chu-nhat)}
.luoi-dg figcaption svg{width:18px;height:18px;fill:var(--chinh);flex:none}

/* ---------- Đối tác / khách hàng (khối mới, ẩn khi rỗng) ---------- */
/* align-items:center làm mỗi ô tự co theo nội dung rồi căn giữa hàng: ô
   tên một dòng thấp hơn ô tên hai dòng 17,2px, thành một dãy hộp viền cao
   thấp so le. Để stretch (mặc định) thì mọi ô trong hàng cao bằng nhau,
   còn logo bên trong vẫn được place-items:center căn giữa ô của nó. */
.luoi-dt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:var(--s3)}
.o-doi-tac{display:grid;place-items:center;padding:var(--s2);
  border:1px solid var(--vien);border-radius:var(--bo-goc);background:var(--trang)}
.o-doi-tac img{max-height:48px;width:auto;filter:grayscale(1);opacity:.75}
.o-doi-tac-chu{min-height:48px;text-align:center;font-weight:600;
  font-size:var(--f-nho);color:var(--chu-nhat);line-height:1.4;
  display:grid;place-items:center}
/* Ô đối tác đóng cỡ cho LOGO: các ô rộng bằng nhau, logo căn giữa ô của nó.
   Tiệm nào chỉ ghi TÊN, không có logo, mà vẫn giữ khuôn đó thì ba cái tên
   ngắn nằm giữa ba khung 355x47 trắng trơn — đo trên trang nội thất — mắt
   đọc ra ba ô ảnh hỏng chứ không đọc ra danh sách đối tác. Cả hàng không có
   lấy một tấm ảnh thì thôi khuôn lưới: xếp thành dãy thẻ chữ tự ôm lấy chữ,
   canh giữa hàng. Có đúng một logo là luật này tắt, quay về lưới ô đều —
   lúc đó ô đều mới là đúng. */
.luoi-dt:not(:has(img)){display:flex;flex-wrap:wrap;justify-content:center}

/* ---------- Luật chia cột: số cột phải chia hết số thẻ ---------- */
/* auto-fit không biết đếm. Ba thẻ với sàn 280px thì mọi màn trong dải
   726–1071px xếp 2+1, để lại một hố rộng bằng nửa hàng dưới. Dải đó chứa
   đúng hai khổ máy đang được soi: iPad dọc 768 và iPad ngang 1024. Đo trên
   trang thật: hồ sơ năng lực nội thất 3 thẻ ở 768 và 860, và cả gara nữa.
   :has() đếm hộ — đúng ba thẻ thì hoặc 1 cột hoặc 3, bỏ hẳn bậc 2 ở giữa.
   Mốc 861px lấy đúng mốc điện thoại/máy bàn đã có sẵn dưới kia, không đẻ
   thêm mốc mới. Trình duyệt không hiểu :has() thì bỏ qua cả câu và rơi về
   hành vi cũ — hở chứ không vỡ. */
.luoi-nl:has(> :last-child:nth-child(3)),
.luoi-cn:has(> :last-child:nth-child(3)),
.luoi-dg:has(> :last-child:nth-child(3)),
.luoi-ts:has(> :last-child:nth-child(3)),
/* 5 thẻ chữ dưới 861px: auto-fit ở 768px ra 2 cột, thành 2+2+1. Một cột,
   5 hàng. Không đẻ mốc màn hình mới cho riêng dải 617-860px chỉ để nhét
   được 2 cột — thẻ hồ sơ năng lực trải hết bề ngang ở 768px vẫn đọc tốt,
   còn lưới rách thì không. */
.luoi-nl:has(> :last-child:nth-child(5)),
.luoi-cn:has(> :last-child:nth-child(5)),
.luoi-dg:has(> :last-child:nth-child(5)){grid-template-columns:minmax(0,1fr)}
@media (min-width:861px){
  .luoi-nl:has(> :last-child:nth-child(3)),
  .luoi-cn:has(> :last-child:nth-child(3)),
  .luoi-dg:has(> :last-child:nth-child(3)),
  .luoi-ts:has(> :last-child:nth-child(3)){
    grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* NĂM thẻ thì hết đường chia: ước của 5 chỉ có 1 và 5, mà 5 cột ở 1056px
   ra thẻ rộng 195px — hồ sơ năng lực có ảnh + tựa + đoạn chữ thì 195px là
   bóp nát. Nên không chia nữa mà CĂN GIỮA hàng cuối: dựng lưới SÁU cột,
   mỗi thẻ chiếm hai cột (thành 3 thẻ một hàng), rồi đẩy thẻ thứ tư sang
   cột 2. Thẻ thứ tư chiếm cột 2-3, thẻ thứ năm tự trôi vào cột 4-5 — hai
   thẻ cuối nằm chính giữa, hở đều hai bên. Lỗ trống chia đôi cân xứng thì
   mắt đọc ra "hết hàng", còn dồn hết sang phải thì đọc ra "lưới rách".
   Đo trên gara (5 hồ sơ, 5 ảnh) và nội thất (5 ảnh): trước đây lỗ bên phải
   rộng tới 765x286px. */
@media (min-width:861px){
  .luoi-nl:has(> :last-child:nth-child(5)),
  .luoi-cn:has(> :last-child:nth-child(5)),
  .luoi-dg:has(> :last-child:nth-child(5)),
  .luoi-anh:has(> :last-child:nth-child(5)){
    grid-template-columns:repeat(6,minmax(0,1fr))}
  .luoi-nl:has(> :last-child:nth-child(5)) > *,
  .luoi-cn:has(> :last-child:nth-child(5)) > *,
  .luoi-dg:has(> :last-child:nth-child(5)) > *,
  .luoi-anh:has(> :last-child:nth-child(5)) > *{grid-column:span 2}
  .luoi-nl:has(> :last-child:nth-child(5)) > :nth-child(4),
  .luoi-cn:has(> :last-child:nth-child(5)) > :nth-child(4),
  .luoi-dg:has(> :last-child:nth-child(5)) > :nth-child(4),
  .luoi-anh:has(> :last-child:nth-child(5)) > :nth-child(4){grid-column:2/span 2}
  /* Bốn ảnh: auto-fill ở 1056px ra đúng 4 cột, nhưng chỉ ĐÚNG TÌNH CỜ theo
     con số 220px. Nói thẳng ra để đổi --rong không làm rách lưới. */
  .luoi-anh:has(> :last-child:nth-child(4)){
    grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* MỘT cặp trước/sau thì auto-fit trải nguyên 1056px cho một hàng, mỗi ô ảnh
   thành 516x516 — to gấp đôi ô trong lưới ảnh (336) ngay mục kế bên, và mục
   đó phình lên 825px trong khi mọi mục chữ quanh nó là 500-750. Cặp thứ hai
   xuất hiện là ô tự co về 250px, tức bề rộng ĐÚNG đã có sẵn trong luật, chỉ
   là một cặp thì không ai ép. Chốt bề rộng một cặp bằng đúng bề rộng nó nhận
   khi có hai cặp: nhịp ảnh cả trang về một cỡ, không đẻ con số mới. Viết bằng
   phép tính chứ không bằng số px: hai cặp thì mỗi cặp lấy nửa hàng trừ nửa
   khe, đó ĐÚNG là công thức, còn 510px chỉ là kết quả của nó ở --rong hiện
   thời. Đổi --rong hay --s5 thì một cặp vẫn bằng hai cặp, không phải sửa tay. */
@media (min-width:861px){
  .luoi-ts:has(> :only-child){max-width:calc(50% - var(--s5) / 2);
    margin-left:auto;margin-right:auto}
}
/* Điện thoại 2 cột: 5 ảnh ra 2+2+1, ô lẻ dính mép trái. Cùng cách trên,
   lưới bốn cột, mỗi ô hai cột, ô thứ năm đẩy vào cột 2-3 cho nằm giữa. */
@media (max-width:860px){
  .luoi-anh:has(> :last-child:nth-child(5)){
    grid-template-columns:repeat(4,minmax(0,1fr))}
  .luoi-anh:has(> :last-child:nth-child(5)) > *{grid-column:span 2}
  .luoi-anh:has(> :last-child:nth-child(5)) > :nth-child(5){grid-column:2/span 2}
}

/* ---------- Giấy phép ---------- */
/* Thẻ này KHÔNG dùng `.the-hep` như mọi thẻ một cột khác, vì nó hai cột.
   `.the-hep` chặn cả thẻ ở bề rộng ruột chữ, mà ở đây cột nhãn ăn mất ~200px
   nên cột chữ chỉ còn 255px — đo trên trang thật: dòng "Hình thức hoá đơn"
   xuống 8 dòng, mỗi dòng 40 ký tự, cạnh một cột nhãn trống trơn từ dòng thứ
   hai trở xuống. Cách đúng: chặn ở CỘT CHỮ đúng bề rộng ruột, rồi để thẻ tự
   ôm lấy bề ngang nó cần. Tiệm nào giá trị ngắn thì thẻ tự co lại, không ai
   phải đoán trước một con số. */
.giay-phep{border-left:3px solid var(--chinh);background:var(--trang);
  width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.giay-phep dl{display:grid;grid-template-columns:auto minmax(0,var(--ruot));
  gap:var(--s1) var(--s3);margin:0}
.giay-phep dt{font-weight:700;color:var(--chu-nhat);font-size:var(--f-tem);
  text-transform:uppercase;letter-spacing:.08em}
/* Chặn bề rộng ở CHÍNH KHỐI chứ không ở ô chữ: chặn ở `dd` thì chữ hẹp mà
   nền trắng vẫn trải hết 1056px, nửa phải thẻ "Thông tin xuất hoá đơn" thành
   330x250px trắng trơn có viền — mắt đọc ra thẻ hụt nội dung. `.the-hep` là
   đúng luật đã có sẵn cho mọi khối một cột (trang.js:632), dùng lại nó. */
.giay-phep dd{margin:0}

/* ---------- Liên hệ ---------- */
.lien-he{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:var(--s5);align-items:start}
/* Thẻ tin bên trái cao theo số dòng có thật (gara: địa chỉ + máy + Zalo + giờ
   tuần 4 dòng = 505px), ô bản đồ bên phải cao theo khung 16/11 = 350px. Hai ô
   cạnh nhau lệch 155px, mà cả hai đều CÓ VIỀN nên mắt đọc ra một ô bị hụt đáy
   chứ không đọc ra khoảng thở. Cho ô bản đồ cao hết hàng: khung 16/11 chỉ là
   để giữ chỗ khi chưa biết nội dung, có hàng để bám thì nhường hàng. Chỉ từ
   861px — dưới mốc đó lưới một cột, không có hàng nào để bằng nhau. */
@media (min-width:861px){
  .lien-he{align-items:stretch}
  .lien-he .o-ban-do{aspect-ratio:auto}
}
.dong-tin{display:flex;gap:var(--s2);padding:var(--s2) 0;
  border-bottom:1px solid var(--vien)}
.dong-tin:last-child{border-bottom:none}
/* Ngón tay cái không bấm trúng dòng chữ cao 18px. Mốc 44px của Apple,
   48dp của Google — số máy và Zalo là thứ khách bấm nhiều nhất, phải to. */
.dong-tin a[href^="tel:"],.dong-tin a[href*="zalo"],
.chan a[href^="tel:"],.chan a[href*="zalo"]{
  display:inline-flex;align-items:center;min-height:44px}
.dong-tin svg{width:20px;height:20px;fill:var(--chinh);flex:none;margin-top:3px}
.dong-tin b{display:block;font-size:var(--f-tem);text-transform:uppercase;
  color:var(--chu-nhat);letter-spacing:.08em;font-weight:700}
.o-ban-do{border:1px solid var(--vien);background:var(--o-trong-nen);aspect-ratio:16/11;
  display:grid;place-items:center;text-align:center;padding:0;
  border-radius:var(--bo-goc);overflow:hidden}
.o-ban-do iframe{width:100%;height:100%;border:0;display:block}
/* Bản đồ là LINK, không phải iframe. Iframe Google Maps nạp ngay lúc mở trang:
   IP khách, chuỗi trình duyệt và địa chỉ trang chạy sang Google, kèm cookie của
   Google, dù khách chưa bấm gì. Gói này tự chốt không gọi bên thứ ba, nên bản
   đồ chỉ mở khi khách tự bấm. Ô giữ nguyên khung 16/11 cho bố cục khỏi nhảy. */
.o-ban-do .di-ban-do{width:100%;height:100%;display:grid;place-content:center;
  justify-items:center;gap:var(--s1);padding:var(--s4);text-decoration:none;
  color:var(--chinh-dam);background:var(--o-trong-nen)}
.o-ban-do .di-ban-do svg{width:28px;height:28px;fill:currentColor}
.o-ban-do .di-ban-do b{font:700 var(--f-nho)/1.4 var(--chu-tieu-de)}
.o-ban-do .di-ban-do span{font-size:var(--f-tem);text-transform:none;
  letter-spacing:0;color:var(--o-trong-chu);padding:0}
.o-ban-do .di-ban-do:hover b{text-decoration:underline}
.o-ban-do span{font:700 var(--f-tem)/1.6 var(--chu-tieu-de);color:var(--o-trong-chu);
  text-transform:uppercase;letter-spacing:.1em;padding:var(--s3)}

/* ---------- Chân trang ---------- */
.chan{background:var(--chinh-dam);color:var(--chan-chu);padding:var(--s6) 0 0;
  font-size:var(--f-nho)}
/* Chân trang có ĐÚNG BA thẻ, cố định trong trang.js, không đổi theo dữ liệu.
   auto-fit thì không đếm được ba: ở khổ 768 lòng khung ~706px chỉ nhét vừa
   hai cột 220px, ra hàng trên hai thẻ hàng dưới một thẻ lửng — vỡ suốt dải
   726–1071px. Khai thẳng số cột, và nhảy 1 -> 3 chứ không ghé 2. */
.chan .khung{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
@media (min-width:861px){
  .chan .khung{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.chan h3{margin:0 0 var(--s2);font:700 var(--f-nho)/var(--lh-de) var(--chu-tieu-de);
  text-transform:uppercase;color:var(--nhan);letter-spacing:.08em}
.chan p{margin:0;max-width:var(--ruot)}
/* Giữ gạch chân: trong chân trang màu chữ liên kết bằng đúng màu chữ
   thường nên bỏ gạch là mất dấu hiệu duy nhất nhận ra bấm được. Nhưng cột
   "Nội dung trang" gồm toàn liên kết, năm gạch chân xếp dọc thì ồn hơn hẳn
   hai cột kia. Hạ độ đậm nét gạch và đẩy xuống cho rời chân chữ.
   Vì gạch chân là dấu hiệu DUY NHẤT nhận ra bấm được nên nó là thành phần
   phi văn bản mang thông tin: WCAG 1.4.11 đòi 3:1 so với nền. Trộn trắng
   lên năm nền --chinh-dam rồi tính, mức .45 KHÔNG đủ. .52 thì nền thấp
   nhất vẫn qua 3:1 kể cả khi trình duyệt làm tròn lệch một đơn vị mỗi
   kênh; mắt thường không thấy khác .45. Chốt trong kiem-tra.mjs ĐỌC con
   số này ra rồi tính lại với cả năm nền, nên hạ xuống là chốt rớt.
   Đừng đụng ĐỘ DÀY nét nếu thấy ồn: 1px lên 2px là gấp đôi sức nặng nét.
   Cần gạt an toàn là offset. */
.chan a{color:var(--trang);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.52);text-underline-offset:3px}
/* Cột "Nội dung trang" toàn liên kết, đo ra vùng chạm cao 15-16px — số máy
   và Zalo đã được nâng 44px ở trên, còn mấy liên kết này thì không, dù ngón
   tay cái không phân biệt liên kết nào quan trọng hơn. WCAG 2.5.8. Đệm dọc
   thay cho margin-bottom, để chỗ chừa ra chính là chỗ bấm được. */
.chan ul{margin:0;padding:0;list-style:none;max-width:var(--ruot)}
/* Kẹp --ruot ở đây chứ không chỉ ở .chan p. Dưới 861px chân trang là MỘT
   cột, nên mấy dòng dài của thẻ "Điều kiện hoạt động" trải hết lòng khung:
   đo ở iPad dọc 768 ra 102-107 ký tự một dòng, gấp rưỡi trần 70 của
   npm run soi. Ba thẻ kia dòng ngắn nên không ai thấy, và trên 861px chia
   ba cột cũng tự ngắn lại — lỗi chỉ hiện đúng ở dải một cột. */
.chan li{margin-bottom:0}
.chan li > a{display:inline-flex;align-items:center;min-height:44px}
/* Ghi công ảnh mượn. CC BY và CC BY-SA bắt buộc in tên tác giả, tên ảnh gốc và
   giấy phép ngay trên bản đang phát hành — bóc EXIF xong thì trang là chỗ duy
   nhất còn ghi được. Gấp vào <details> cho chân trang khỏi dài ra, nhưng dòng
   mở luôn nhìn thấy: gấp không phải giấu. */
.ghi-cong{max-width:var(--rong);margin:var(--s4) auto 0;padding:0 var(--le);
  font-size:var(--f-tem);color:var(--chan-chu)}
/* Truoc day khoi nay dat opacity:.75. Opacity nhan len CA khoi nen khoi
   ghi cong trong nhu bi hong, va no lam moi phep do tuong phan tinh ra sai
   (may do doc mau khai bao, khong doc mau sau khi nhan mo). Doi mau chu la
   dung, do duoc, va van nhat hon chu chinh. */
.ghi-cong summary{cursor:pointer;display:flex;align-items:center;min-height:44px}
/* .ghi-cong kẹp theo --rong (1120px) vì nó là một KHỐI của chân trang, mà
   ruột chữ thì phải kẹp theo --ruot: đo được một dòng 123 ký tự ở đây, gấp
   đôi mức đọc trôi. Kẹp từng đoạn, không kẹp cả khối, để cái <summary> vẫn
   trải hết bề ngang cho dễ bấm. */
.ghi-cong p,.ghi-cong li{max-width:var(--ruot)}
.ghi-cong p{margin:var(--s2) 0}
.ghi-cong ul{display:grid;gap:var(--s1)}
.ghi-cong li{margin-bottom:0}

/* Dòng bản quyền nằm ngoài .khung nên màn rộng nó chạm hai mép màn hình
   trong khi mọi thứ khác dừng ở --rong. Cho vào cùng lề. */
.ban-quyen{border-top:1px solid rgba(255,255,255,.18);margin:var(--s5) auto 0;
  max-width:var(--rong);padding:var(--s3) var(--le);text-align:center;
  font-size:var(--f-tem)}

/* ---------- Nút kiếm tiền ---------- */
/* Chỉ còn thanh dính đáy trên ĐIỆN THOẠI. Hai vòng tròn nổi trên máy bàn
   đã bỏ: tel: trên máy bàn gần như vô dụng, và vòng nhấp nháy vô hạn
   (scale .9 -> 1.35, 1.8s, không do người dùng bấm) là chi tiết đơn lẻ
   làm trang trông rẻ nhất. */
.day{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
  grid-template-columns:1fr 1fr;box-shadow:0 -1px 0 rgba(0,0,0,.12);
  padding-bottom:env(safe-area-inset-bottom)}
.day a{display:flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:56px;padding:var(--s2) var(--s1);color:var(--trang);
  font:700 var(--co-chu-goc)/var(--lh-de) var(--chu-than)}
.day a:hover{text-decoration:none}
.day svg{width:20px;height:20px;fill:var(--trang)}
.day .goi{background:var(--chinh)}
.day .zalo{background:var(--xanh-zalo)}

/* ---------- Điện thoại ---------- */
@media (max-width:860px){
  /* Điện thoại: ảnh món nhỏ lại cho tên món còn chỗ thở. */
  .bang-gia td.o-mon{width:64px}
  .bang-gia td.o-mon img{width:52px;height:52px}
  /* Đệm đáy băng đầu ĐÃ BỎ. Nó là bản vá đặt sai chỗ: ở điện thoại `.khung`
     xếp một cột nên `.o-anh` đứng SAU `.nut-hang`, đệm đáy chỉ đỡ cho ảnh,
     còn hàng nút nằm giữa thân băng thì không được che chở gì. Đo bản đang
     chạy ở 393x727: hàng nút rơi đúng 678 / 676 / 595px, mà thanh dính đáy
     chiếm dải 671-727 — cả ba tiệm đều bị che, đệm vẫn nguyên tại chỗ. Chỗ
     hở thật lấy ở hai luật ngay dưới. */
  .bang .khung{grid-template-columns:1fr;gap:var(--s4)}
  .hua .khung{grid-template-columns:1fr;gap:var(--s4)}
  .luoi-anh{grid-template-columns:repeat(2,1fr)}
  .dau-trang .khung{justify-content:center;text-align:center}
  /* Hộp hotline: ở điện thoại nó là một <div> KHÔNG bấm được, in lại đúng con
     số mà thanh dính đáy đang hiện sẵn dưới ngón tay ("Gọi 0795 047 952").
     Nó lại xuống hàng riêng nên ăn ~100px của màn đầu — bằng cả dòng tiêu đề
     tiệm. Bỏ ở điện thoại; máy bàn giữ, máy bàn không có thanh dính. */
  .hop-hotline{display:none}
  /* Nút "Gọi" trong băng đầu cũng là bản sao của thanh dính đáy — thanh đó ở
     điện thoại LÚC NÀO CŨNG hiện, không cuộn đi đâu, lại to hơn. In lại nó
     cách đó 600px vừa thừa vừa đẩy nút "Xem bảng giá" — cái thanh dính KHÔNG
     có — xuống đúng dải thanh đang che. Băng đầu giữ đúng nút mà thanh thiếu.
     Tiệm nào không có bảng giá thì cả hàng nút biến mất chứ không để lại một
     khoảng hở không ai hiểu vì sao. */
  .bang .nut-nhan{display:none}
  .nut-hang:not(:has(.nut-vien)){display:none}
  .hieu{flex-direction:column;text-align:center}
  .nut-hang{gap:var(--s2)}
  .nut{flex:1 1 100%}
  .giay-phep dl{grid-template-columns:1fr;gap:2px var(--s3)}
  .giay-phep dd{margin-bottom:var(--s2)}
  /* Bảng đã cuộn ngang được rồi thì đừng bóp cột tên: cho nó đủ chỗ
     xuống nhiều nhất hai dòng, thừa thì để người ta vuốt. */
  .bang-2c th[scope="row"]{min-width:150px;max-width:52vw;font-size:var(--f-nho)}
  .bang-2c{font-size:var(--f-nho)}
  /* Dau bang va dong nhom dung --f-tem — co chu nho nhat cua trang — trong
     khi day la bang khach doc lau nhat. Tren dien thoai keo len co chu goc. */
  .bang-gia th,.bang-gia tr.nhom td{font-size:var(--co-chu-goc)}
  .chi-cuon{display:block}
}
@media (min-width:861px){
  .day{display:none}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}