/* ==========================================================
   DOKI – thang chữ dùng chung cho trang chủ, shop và admin
   Quy tắc: chữ <14px đậm tối đa 600 · chữ 14–16px tối đa 700 · từ 17px trở lên tối đa 800 · không dùng 900.
   Đơn vị rem: tôn trọng cỡ chữ mặc định lớn của trình duyệt (không khóa html{font-size}).
   ========================================================== */
:root{
  --fs-xs:.8125rem;   /* 13px – ghi chú, huy hiệu, nhãn nhỏ (đậm ≤600) */
  --fs-sm:.875rem;    /* 14px – chữ phụ, nút nhỏ, nhãn ô nhập, bảng admin */
  --fs-md:.9375rem;   /* 15px – chữ thân trong hộp thoại, chip, tab */
  --fs-lg:1rem;       /* 16px – nút chính, ô nhập, tên sản phẩm */
  --fs-xl:1.125rem;   /* 18px – tên thẻ dịch vụ, tiêu đề phụ */
  --fs-h3:1.25rem;    /* 20px – giá, tiêu đề nhóm */
  --fs-h2:clamp(1.5rem,1.3rem + .6vw,1.75rem);        /* 24–28px – tiêu đề hộp thoại, ngăn kéo, tổng tiền */
  --fs-h1:clamp(2rem,1.25rem + 1.5vw,3.25rem);        /* 32–52px – tiêu đề mục trang chủ */
  --fs-display:clamp(2.25rem,4.5vw,5.5rem);           /* 36–88px – tiêu đề lớn đầu trang */
  --fs-lead:clamp(1.0625rem,1.25vw,1.3125rem);        /* 17–21px – đoạn dẫn */
  --lh-body:1.6;--lh-head:1.25;--lh-ui:1.3;
  --danger:#BE123C;                                   /* chữ đỏ cảnh báo nhỏ trên nền sáng */
}
:root.dark{--danger:#FF9C94}

body{line-height:var(--lh-body);overflow-wrap:break-word}
h1,h2,h3,h4,h5,h6{line-height:var(--lh-head);text-wrap:balance}
.m-title,.svc-t,.step-t,.vc-t,.sh-pname,.sh-cat b,.sh-feat b,.row-name,.subsvc-n,.h1,.sh-banner h1{text-wrap:balance;overflow-wrap:anywhere}
p,li,small,.m-desc,.m-note,.svc-d,.step-d,.vc-d,.hint,.sh-note,.m-warn,.m-hist-note{text-wrap:pretty}
button,.btn,label,input,select,textarea{line-height:var(--lh-ui)}
textarea{line-height:1.5}
b,strong{font-weight:700}
small{font-size:var(--fs-xs)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1;font-weight:400}
.stat-l,.pic-name-2,.fcol .flink,.mmlink,.sh-btn,.m-btn,.btn,.hbtn,.tab,.m-chip,.m-subchip,.sh-chip{text-wrap:balance}
.sh-price,.sh-sum b,.pic-name-1,.m-bal-n,.stat-n,.money,.sum-n,.m-ic{line-height:1.2}

/* ==========================================================
   Thanh cuộn SIÊU MẢNH cho mọi trang (chủ shop chốt 07/11/2026): trang chủ, Shop, Studio, admin, chính sách, offline…
   Tệp này được nạp ở tất cả các trang nên chỉ cần khai báo một chỗ. Áp dụng cả thanh cuộn của trang lẫn các khung cuộn bên trong (hộp thoại, bảng admin…).
   - Chrome / Cốc Cốc / Edge / Safari: rộng 4px, nền trong suốt, con trượt bo tròn màu xanh thương hiệu nhạt, đậm lên khi rê chuột; không có nút mũi tên.
   - Firefox (không có ::-webkit-scrollbar): dùng mức nhỏ nhất của chuẩn (scrollbar-width: thin). KHÔNG đặt scrollbar-width cho Chrome, vì từ
     Chrome 121 hễ có thuộc tính đó là trình duyệt bỏ qua toàn bộ ::-webkit-scrollbar và thanh cuộn lại to như cũ.
   ========================================================== */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{min-height:36px;border-radius:999px;background:rgba(42,82,217,.38)}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:rgba(42,82,217,.7)}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
:root.dark ::-webkit-scrollbar-thumb{background:rgba(165,192,255,.32)}
:root.dark ::-webkit-scrollbar-thumb:hover,:root.dark ::-webkit-scrollbar-thumb:active{background:rgba(165,192,255,.62)}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:rgba(42,82,217,.45) transparent}
  :root.dark *{scrollbar-color:rgba(165,192,255,.4) transparent}
}