/**
 * SÀN CỠ CHỮ 12px
 *
 * Quy tắc duy nhất: cỡ nào ĐANG DƯỚI 12px thì nâng lên đúng 12px; cỡ nào từ 12px trở lên
 * thì GIỮ NGUYÊN, không đụng tới.
 *
 * Bản trước của file này còn gom thêm các cỡ 13–17.6px về hai bậc 14 và 16. Đã bỏ hẳn phần
 * đó: những cỡ ấy đều đã trên 12px và đang hiển thị vừa khung, đổi chúng là thay đổi bố cục
 * chứ không phải sửa lỗi đọc.
 *
 * Số đo trước khi làm (Chrome, 7 trang × 2 kích thước): có 4 nguồn sinh ra chữ dưới 12px
 *   - lớp tiện ích text-[6.5px] … text-[11px]  (mã nguồn có 6.5, 7, 8, 9, 10, 10.5, 11)
 *   - nhãn thanh điều hướng dưới  (11px ở khu tài khoản, 11.4px ở trang chủ)
 *   - .footer-ico của trang chủ   (11.6px)
 *   - huy hiệu sàn trên ảnh sản phẩm (6.5px, còn bị scale 0.9 nên thực tế ~5.9px)
 *
 * Nạp SAU tất cả stylesheet khác ở cả hai layout. Dùng !important vì phải thắng quy tắc
 * "nâng sàn cỡ chữ" trong htms-app.css vốn cũng đã dùng !important.
 */

:root {
  --fs-min: 12px;
}

/* ==========================================================================
   Lớp tiện ích Tailwind có cỡ dưới 12px

   Liệt kê đầy đủ mọi giá trị đang có trong mã nguồn KÈM các biến thể responsive
   sm:/md:/lg: — một phần tử chỉ khai báo `sm:text-[9px]` mà không có lớp gốc sẽ lọt lưới
   nếu chỉ chặn lớp gốc.

   CỐ Ý KHÔNG đưa .text-xs vào đây: lớp đó đang cho ra 12.1px, tức đã trên sàn.
   ========================================================================== */
/* PHẢI có tiền tố `body...` — không dùng selector trần.

   htms-app.css khai báo `body.htms-app .text-[9px] { font-size: 0.75rem !important }`, độ
   đặc hiệu (0,2,0). Bản trước tôi viết `.text-[9px]` trần = (0,1,0); giữa hai khai báo cùng
   !important thì cái ĐẶC HIỆU HƠN thắng, bất kể nạp sau. Kết quả đo lại: 228 phần tử tụt
   về 11px. Thêm tiền tố body đưa lên (0,2,0), bằng nhau, lúc đó nạp-sau mới có tác dụng. */
body.htms-app .text-\[6px\],
body:not(.htms-app) .text-\[6px\],
body.htms-app .text-\[6\.5px\],
body:not(.htms-app) .text-\[6\.5px\],
body.htms-app .text-\[7px\],
body:not(.htms-app) .text-\[7px\],
body.htms-app .text-\[7\.5px\],
body:not(.htms-app) .text-\[7\.5px\],
body.htms-app .text-\[8px\],
body:not(.htms-app) .text-\[8px\],
body.htms-app .text-\[8\.5px\],
body:not(.htms-app) .text-\[8\.5px\],
body.htms-app .text-\[9px\],
body:not(.htms-app) .text-\[9px\],
body.htms-app .text-\[9\.5px\],
body:not(.htms-app) .text-\[9\.5px\],
body.htms-app .text-\[10px\],
body:not(.htms-app) .text-\[10px\],
body.htms-app .text-\[10\.5px\],
body:not(.htms-app) .text-\[10\.5px\],
body.htms-app .text-\[11px\],
body:not(.htms-app) .text-\[11px\],
body.htms-app .text-\[11\.5px\],
body:not(.htms-app) .text-\[11\.5px\],
body.htms-app .sm\:text-\[6px\],
body:not(.htms-app) .sm\:text-\[6px\],
body.htms-app .sm\:text-\[6\.5px\],
body:not(.htms-app) .sm\:text-\[6\.5px\],
body.htms-app .sm\:text-\[7px\],
body:not(.htms-app) .sm\:text-\[7px\],
body.htms-app .sm\:text-\[7\.5px\],
body:not(.htms-app) .sm\:text-\[7\.5px\],
body.htms-app .sm\:text-\[8px\],
body:not(.htms-app) .sm\:text-\[8px\],
body.htms-app .sm\:text-\[8\.5px\],
body:not(.htms-app) .sm\:text-\[8\.5px\],
body.htms-app .sm\:text-\[9px\],
body:not(.htms-app) .sm\:text-\[9px\],
body.htms-app .sm\:text-\[9\.5px\],
body:not(.htms-app) .sm\:text-\[9\.5px\],
body.htms-app .sm\:text-\[10px\],
body:not(.htms-app) .sm\:text-\[10px\],
body.htms-app .sm\:text-\[10\.5px\],
body:not(.htms-app) .sm\:text-\[10\.5px\],
body.htms-app .sm\:text-\[11px\],
body:not(.htms-app) .sm\:text-\[11px\],
body.htms-app .sm\:text-\[11\.5px\],
body:not(.htms-app) .sm\:text-\[11\.5px\],
body.htms-app .md\:text-\[6px\],
body:not(.htms-app) .md\:text-\[6px\],
body.htms-app .md\:text-\[6\.5px\],
body:not(.htms-app) .md\:text-\[6\.5px\],
body.htms-app .md\:text-\[7px\],
body:not(.htms-app) .md\:text-\[7px\],
body.htms-app .md\:text-\[7\.5px\],
body:not(.htms-app) .md\:text-\[7\.5px\],
body.htms-app .md\:text-\[8px\],
body:not(.htms-app) .md\:text-\[8px\],
body.htms-app .md\:text-\[8\.5px\],
body:not(.htms-app) .md\:text-\[8\.5px\],
body.htms-app .md\:text-\[9px\],
body:not(.htms-app) .md\:text-\[9px\],
body.htms-app .md\:text-\[9\.5px\],
body:not(.htms-app) .md\:text-\[9\.5px\],
body.htms-app .md\:text-\[10px\],
body:not(.htms-app) .md\:text-\[10px\],
body.htms-app .md\:text-\[10\.5px\],
body:not(.htms-app) .md\:text-\[10\.5px\],
body.htms-app .md\:text-\[11px\],
body:not(.htms-app) .md\:text-\[11px\],
body.htms-app .md\:text-\[11\.5px\],
body:not(.htms-app) .md\:text-\[11\.5px\],
body.htms-app .lg\:text-\[6px\],
body:not(.htms-app) .lg\:text-\[6px\],
body.htms-app .lg\:text-\[6\.5px\],
body:not(.htms-app) .lg\:text-\[6\.5px\],
body.htms-app .lg\:text-\[7px\],
body:not(.htms-app) .lg\:text-\[7px\],
body.htms-app .lg\:text-\[7\.5px\],
body:not(.htms-app) .lg\:text-\[7\.5px\],
body.htms-app .lg\:text-\[8px\],
body:not(.htms-app) .lg\:text-\[8px\],
body.htms-app .lg\:text-\[8\.5px\],
body:not(.htms-app) .lg\:text-\[8\.5px\],
body.htms-app .lg\:text-\[9px\],
body:not(.htms-app) .lg\:text-\[9px\],
body.htms-app .lg\:text-\[9\.5px\],
body:not(.htms-app) .lg\:text-\[9\.5px\],
body.htms-app .lg\:text-\[10px\],
body:not(.htms-app) .lg\:text-\[10px\],
body.htms-app .lg\:text-\[10\.5px\],
body:not(.htms-app) .lg\:text-\[10\.5px\],
body.htms-app .lg\:text-\[11px\],
body:not(.htms-app) .lg\:text-\[11px\],
body.htms-app .lg\:text-\[11\.5px\],
body:not(.htms-app) .lg\:text-\[11\.5px\] {
  font-size: var(--fs-min) !important;
}

/* ==========================================================================
   Thành phần của trang chủ đang dưới sàn
   ========================================================================== */

/* .footer-ico và .logo-mark-text đều đo được 11.6px (cái sau chỉ lộ ra ở bản desktop của
   trang chủ, nên vòng đo đầu tiên chỉ chạy mobile đã bỏ sót). */
body .footer-ico,
body .logo-mark-text {
  font-size: var(--fs-min) !important;
}

/* Huy hiệu sàn ("Shopee" / "TikTok Shop") đè trên ảnh sản phẩm: khai báo text-[6.5px] đã
   được quy tắc trên nâng lên 12px, nhưng phần tử còn mang scale-[0.9] nên kích thước hiển
   thị thực tế vẫn chỉ ~10.8px. Bỏ phép thu nhỏ để nó đúng 12px thật. */
.text-\[6px\].scale-\[0\.9\],
.text-\[6\.5px\].scale-\[0\.9\],
.text-\[7px\].scale-\[0\.9\] {
  transform: none !important;
}