/* ══════════════════════════════════════════════════════════════════════════════
   SBH SHIRT STUDIO — hệ thiết kế
   Tông màu là TÔNG MÀU ANH TIỀN ĐÃ CHỐT cho trang này (xem audit §R1):
   navy #1B2A4A · thẻ trắng · chữ Georgia · nút xanh thương hiệu #2E3192.
   Cố ý KHÔNG đọc bộ token --sbh-* của sbh-design-system.php — đó là quyết định,
   không phải thiếu sót.

   MỌI luật nằm dưới `.st` (trừ hai luật có chủ đích chạm <body>, xem cuối tệp).
   Bản Studio đầu tiên đặt luật body{} trong shortcode và đổi nền CẢ WEBSITE — đây là chỗ vá.

   Thứ tự: 1 token · 2 nền chung · 3 hero · 4 tiến trình · 5 ô lựa chọn ·
           6 thẻ vải · 7 thẻ cách đo · 8 phiếu tóm tắt · 9 khung bản dựng ·
           10 màn thành công · 11 bảng Kathy · 12 thanh đáy · 13 nhắc lưu ·
           14 máy tính · 15 a11y · 16 không-JS · 17 hai luật <body>
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN ─────────────────────────────────────────────────────────────── */
.st{
  /* màu — lấy từ logo thật của SBH, không tự đặt */
  --muc:#1B2A4A;          /* mực navy */
  --chi:#2E3192;          /* xanh thương hiệu — MÀU LOGO THẬT, một sắc nhấn duy nhất */
  --chi-dam:#242680;
  --chi-nhat:#EDEDF7;
  --vai:#F6F4F0;          /* nền vải mộc */
  --vai-sau:#EDEAE4;
  --the:#FFFFFF;
  --duong-may:#C7B79A;    /* chỉ lược / phấn thợ may — chỉ dùng cho nét mảnh */
  --than:#5F5B54;         /* chữ phụ. Sẫm hơn #6E6A63 của bản cũ để đạt tương phản AA */
  --vien:rgba(27,42,74,.14);
  --vien-dam:rgba(27,42,74,.30);
  --dat:#7C5E33;          /* nhấn ấm cho lời Kathy. #8C6D3F chỉ đạt 4.37 trên nền vải ⇒ trượt AA */
  --loi:#9B2C2C;
  --tot:#2F6B45;

  /* khoảng cách */
  --k-xs:.35rem; --k-sm:.6rem; --k-md:1rem; --k-lg:1.6rem; --k-xl:2.4rem;
  /* bo góc: gần vuông. Bo tròn nhiều trông như ứng dụng, không như tiệm may */
  --bo-sm:2px; --bo-md:3px; --bo-lg:4px;
  /* chữ: đúng HAI họ */
  --chu-tieu-de:Georgia,"Times New Roman",serif;
  --chu-doc:inherit;
  /* bóng */
  --bong:0 1px 2px rgba(27,42,74,.06), 0 8px 24px -12px rgba(27,42,74,.18);
  --bong-noi:0 -1px 0 var(--vien), 0 -8px 24px -16px rgba(27,42,74,.25);
  /* nhịp */
  --nhanh:.16s; --vua:.24s;
  /* chiều cao thanh đáy — JS cập nhật theo safe-area thật của máy */
  --day-cao:0px;
  /* chiều cao thanh đầu trang đang che — JS ĐO THẬT rồi ghi vào, không hard-code 88px */
  --dinh-tren:0px;

  box-sizing:border-box;
  background:var(--vai); color:var(--muc);
  font-family:var(--chu-doc); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  border-radius:var(--bo-lg);
}
.st *,.st *::before,.st *::after{box-sizing:border-box}
.st [hidden],.st [data-hien="0"]{display:none!important}
.st-ao [data-an="0"]{display:none}

/* ── 2. NỀN CHUNG ─────────────────────────────────────────────────────────── */
.st{padding:clamp(.9rem,2.6vw,2rem); max-width:1180px; margin:0 auto}
.st h1,.st h2,.st h3,.st p,.st ul,.st ol,.st dl,.st dd,.st dt{margin:0}
.st ul,.st ol{padding:0; list-style:none}
.st p{margin:0}
.st-an{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.st h1,.st h2,.st h3{font-family:var(--chu-tieu-de);font-weight:600;text-transform:none;
  line-height:1.18;text-wrap:balance}
.st a{color:var(--chi)}
.st b,.st strong{font-weight:600}

/* nút — mọi nút CAO TỐI THIỂU 44px (mục XXV) */
.st-nut{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.62rem 1.15rem;
  border:1px solid transparent;border-radius:var(--bo-md);
  background:var(--chi);color:#fff;font:inherit;font-size:.95rem;font-weight:500;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background var(--nhanh),border-color var(--nhanh),color var(--nhanh);
}
.st-nut--chinh{background:var(--chi)}
.st-nut--chinh:hover{background:var(--chi-dam)}
.st-nut--phu{background:transparent;color:var(--muc);border-color:var(--vien-dam)}
.st-nut--phu:hover{background:var(--vai-sau)}
.st-nut--to{min-height:52px;font-size:1rem;padding:.8rem 1.3rem;width:100%}
.st-nut--nho{min-height:44px;padding:.5rem .9rem;font-size:.9rem}
.st-nut:disabled{opacity:.5;cursor:not-allowed}
.st :focus-visible,.st-nut:focus-visible,.st-day:focus-visible,
.st-kb:focus-visible,.st-kathy-noi:focus-visible{
  outline:2px solid var(--chi);outline-offset:2px}

.st-icon-nut{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--vien);border-radius:var(--bo-md);
  background:var(--the);color:var(--muc);font:inherit;font-size:1.05rem;cursor:pointer;
}
.st-icon-nut:hover{background:var(--vai-sau)}

/* nhóm */
.st-nhom{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md);
  padding:clamp(.95rem,2.4vw,1.25rem);margin-top:var(--k-md)}
.st-nhom-de{font-size:1.02rem;display:flex;align-items:baseline;gap:.55rem;margin-bottom:.2rem!important}
.st-nhom-ta{font-size:.85rem;color:var(--than);margin-bottom:.85rem!important}
/* Số bước ("01", "2.1") là CHỮ, không phải nét trang trí. Màu chỉ lược --duong-may
   (#C7B79A) chỉ đạt ~1,9:1 — axe-core bắt đúng là vi phạm tương phản. Dùng --dat
   (#7C5E33) đã đo 5,99:1 trên thẻ trắng và 5,57:1 trên nền vải: vẫn tông đồng thau
   của tiệm may mà đạt AA. --duong-may từ nay CHỈ dùng cho đường kẻ mảnh. */
.st-so{font-family:inherit;font-size:.66rem;letter-spacing:.12em;color:var(--dat);
  font-weight:600;font-variant-numeric:tabular-nums}
.st-nhom-ta b{color:var(--muc)}

/* fieldset: bỏ viền mặc định nhưng KHÔNG ẩn <legend> (bản cũ ẩn hết nên trình đọc
   màn hình mất nhãn nhóm). Legend ở đây hiện thật. */
.st fieldset{border:0;padding:0;margin:0;min-width:0}
.st legend{font-size:.8rem;color:var(--than);padding:0;margin-bottom:.45rem}

/* ── 3. HERO (mục V — RẤT NGẮN trên điện thoại) ───────────────────────────── */
.st-hero{padding-bottom:var(--k-md);border-bottom:1px solid var(--vien);margin-bottom:var(--k-md)}
.st-nhan{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--than);
  margin-bottom:.4rem!important}
.st-h1{font-size:clamp(1.5rem,6.4vw,2.6rem);letter-spacing:-.01em}
.st-hero-dan{margin-top:.5rem!important;font-size:.95rem;color:var(--than);max-width:46ch}
.st-hero-nut{display:flex;flex-direction:column;gap:var(--k-sm);margin-top:var(--k-md)}
.st-hero-cu{margin-top:var(--k-sm);padding:.7rem .85rem;background:var(--the);
  border:1px solid var(--vien);border-left:2px solid var(--duong-may);border-radius:var(--bo-md)}
.st-hero-cu-mo{font-size:.86rem;color:var(--than);margin-bottom:.5rem!important}
.st-tin{margin-top:var(--k-md)!important;display:grid;gap:.55rem;font-size:.82rem;color:var(--than);
  padding-top:.8rem;border-top:1px solid var(--vien)}
.st-tin li{display:grid;gap:.05rem}
.st-tin b{color:var(--muc);font-size:.88rem}

/* ── 3b. BỐN THẺ HÀNH ĐỘNG (mục VI) ──────────────────────────────────────── */
.st-cua{display:grid;gap:var(--k-sm)}
.st-cua-o{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;
  width:100%;min-height:76px;padding:.85rem .9rem;text-align:left;
  border:1px solid var(--vien-dam);border-radius:var(--bo-md);background:var(--the);
  color:var(--muc);font:inherit;cursor:pointer;
  transition:border-color var(--nhanh),background var(--nhanh);
}
.st-cua-o:hover{background:var(--vai-sau);border-color:var(--vien-dam)}
.st-cua-o:disabled{opacity:.55;cursor:not-allowed}
.st-cua-so{font-family:var(--chu-tieu-de);font-size:1.15rem;color:var(--dat);
  font-weight:600;line-height:1}
.st-cua-chu{display:grid;gap:.15rem;min-width:0}
.st-cua-chu b{font-family:var(--chu-tieu-de);font-size:1.05rem;font-weight:600;line-height:1.25}
.st-cua-chu span{font-size:.83rem;color:var(--than);line-height:1.45}
.st-cua-mui{font-size:1.1rem;color:var(--chi)}

/* ── 4. TIẾN TRÌNH (mục VII + header gọn mục XVIII) ──────────────────────── */
.st-tien-trinh{
  /* `--dinh-tren` do JS ĐO THẬT rồi ghi vào (xem wizard.js doDinhTren): nếu thanh đầu trang
     của website vẫn đang ghim và che mất, thanh tiến trình tự tụt xuống dưới nó —
     không hard-code 88px, vì giao diện đổi là hỏng ngay. */
  position:sticky;top:var(--dinh-tren,0px);z-index:60;
  margin:0 0 var(--k-md);padding:.5rem 0 .4rem;
  background:var(--vai);
  border-bottom:1px solid var(--vien);
}
.st-tt-trong{display:flex;align-items:center;gap:.6rem}
.st-tt-giua{flex:1 1 auto;min-width:0;display:grid}
.st-tt-thuong-hieu{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--than)}
.st-tt-ten{font-family:var(--chu-tieu-de);font-size:1rem;font-weight:600;line-height:1.2}
.st-tt-so{font-size:.72rem;color:var(--than);font-variant-numeric:tabular-nums}
.st-thanh{height:3px;background:var(--vai-sau);border-radius:99px;margin-top:.5rem;overflow:hidden}
.st-thanh i{display:block;height:100%;width:20%;background:var(--chi);
  transition:width var(--vua)}
/* Mục VII cho phép hai kiểu tiến trình: 5 điểm có tên (máy tính) HOẶC "Bước n/5 + thanh"
   (điện thoại). Trên 375px hàng 5 điểm cao 44px làm thanh tiến trình cao 167px — bằng 1/5
   màn hình chỉ để nói đang ở bước nào. Nên: điện thoại chỉ dùng thanh, máy tính mới có điểm.
   Điều hướng bước trên điện thoại đã có [←] và [Tiếp tục] ở thanh đáy, cùng nút [SỬA]
   trong phiếu ở bước 5. */
.st-cham{display:none}
.st-cham li{flex:1 1 0;min-width:0}
.st-cham button{
  width:100%;min-height:44px;padding:.3rem .15rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  border:0;border-top:2px solid var(--vien);background:transparent;color:var(--than);
  font:inherit;font-size:.62rem;cursor:pointer;line-height:1.25;
}
.st-cham button b{font-size:.6rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.st-cham button[aria-current="step"]{border-top-color:var(--chi);color:var(--chi);font-weight:600}
.st-cham button[data-xong="1"]{border-top-color:var(--duong-may);color:var(--muc)}
.st-cham button:disabled{opacity:.55;cursor:default}

/* ── 5. Ô LỰA CHỌN ───────────────────────────────────────────────────────── */
.st-chon{display:flex;flex-wrap:wrap;gap:.5rem}
.st-o{position:relative;flex:1 1 auto;min-width:0}
.st-o input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.st-o-trong{
  display:flex;align-items:center;gap:.55rem;
  min-height:44px;padding:.5rem .8rem;
  border:1px solid var(--vien-dam);border-radius:var(--bo-md);
  background:var(--the);font-size:.9rem;cursor:pointer;
  transition:border-color var(--nhanh),background var(--nhanh),color var(--nhanh);
}
.st-o-chu{display:grid;line-height:1.3}
.st-o-chu small{font-size:.76rem;color:var(--than);font-weight:400}
.st-o-dau{opacity:0;margin-left:auto;color:var(--chi);font-weight:700;flex:0 0 auto}
/* BA tín hiệu đang-chọn cùng lúc: viền + nền + dấu ✓ — không chỉ dùng màu (mục XXV) */
.st-o input:checked + .st-o-trong{border-color:var(--chi);background:var(--chi-nhat);
  box-shadow:inset 0 0 0 1px var(--chi)}
.st-o input:checked + .st-o-trong .st-o-dau{opacity:1}
.st-o input:focus-visible + .st-o-trong{outline:2px solid var(--chi);outline-offset:2px}

/* lưới ô có hình */
.st-luoi-o{display:grid;gap:.5rem;grid-template-columns:1fr}
.st-luoi-o .st-o{flex:none}
.st-luoi-o .st-o-trong{align-items:flex-start}
.st-o-hinh{flex:0 0 46px;width:46px;height:40px;display:block;color:var(--muc)}
.st-o-hinh svg{width:100%;height:100%;padding:3px}

/* ô màu */
.st-luoi-o--mau{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.st-luoi-o--mau .st-o-trong{flex-direction:column;gap:.28rem;padding:.4rem .25rem;
  align-items:stretch;text-align:center}
.st-luoi-o--mau .st-o-chu{font-size:.72rem;justify-items:center}
.st-luoi-o--mau .st-o-dau{margin:0 auto}
.st-mau{display:block;height:34px;border-radius:var(--bo-sm);
  border:1px solid var(--vien-dam);background:var(--m)}

/* ô nhập */
.st-nhap-hang{display:flex;flex-wrap:wrap;gap:.6rem}
.st-o-nhap{flex:1 1 130px;min-width:0;display:grid;gap:.25rem;font-size:.8rem;color:var(--than)}
.st-o-nhap--rong{flex:1 1 100%}
.st-o-nhap input,.st-o-nhap select{
  width:100%;min-height:46px;padding:.55rem .65rem;
  border:1px solid var(--vien-dam);border-radius:var(--bo-md);
  background:var(--vai);color:var(--muc);font:inherit;font-size:1rem;
}
.st-o-nhap input:focus-visible,.st-o-nhap select:focus-visible{
  outline:2px solid var(--chi);outline-offset:1px;background:var(--the)}
.st-o-nhap em{color:var(--loi);font-style:normal}
.st-o-nhap input[aria-invalid="true"]{border-color:var(--loi);background:#FDF6F6}

.st-goiy{margin-top:.6rem!important;font-size:.84rem;line-height:1.5;padding-left:.7rem;
  border-left:2px solid var(--duong-may)}
.st-goiy:empty{display:none}
.st-ghi{margin-top:.8rem!important;font-size:.84rem;color:var(--than);line-height:1.55}
.st-ghi:empty{display:none}
.st-ghi.st-loi{color:var(--loi)}
.st-ghi strong{color:var(--muc)}
.st-loi-o{margin-top:.4rem!important;font-size:.84rem;color:var(--loi);line-height:1.5}
.st-loi-o:empty{display:none}

/* ── 6. THẺ VẢI (mục VIII) ───────────────────────────────────────────────── */
.st-vai-the{display:grid;gap:.6rem}
.st-the-vai{position:relative;display:block}
.st-the-vai input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.st-the-vai-trong{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:.8rem;
  min-height:76px;padding:.7rem .85rem;
  border:1px solid var(--vien-dam);border-radius:var(--bo-md);background:var(--the);
  cursor:pointer;transition:border-color var(--nhanh),background var(--nhanh);
}
.st-the-vai-chu{display:grid;gap:.1rem;min-width:0}
.st-the-vai-chu b{font-size:.98rem}
.st-the-vai-tinh{font-size:.8rem;color:var(--than)}
.st-the-vai-chon{font-size:.78rem;color:var(--chi);border:1px solid var(--chi);
  border-radius:var(--bo-sm);padding:.2rem .55rem;white-space:nowrap}
.st-the-vai .st-o-dau{margin:0}
.st-the-vai input:checked + .st-the-vai-trong{border-color:var(--chi);background:var(--chi-nhat);
  box-shadow:inset 0 0 0 1px var(--chi)}
.st-the-vai input:checked + .st-the-vai-trong .st-o-dau{opacity:1}
.st-the-vai input:checked + .st-the-vai-trong .st-the-vai-chon{background:var(--chi);color:#fff}
.st-the-vai input:focus-visible + .st-the-vai-trong{outline:2px solid var(--chi);outline-offset:2px}

/* HÌNH MINH HOẠ KIỂU DỆT — sinh bằng CSS, KHÔNG phải ảnh vải thật.
   Trong uploads không có ảnh texture vải nào và mục X cấm bịa ảnh, nên đây là hình
   minh hoạ trừu tượng và nhóm vải đã ghi rõ điều đó bằng chữ. */
.st-vai-hinh{width:64px;height:64px;border-radius:var(--bo-sm);
  border:1px solid var(--vien-dam);background-color:#F2EFE9}
.st-det--poplin{background-image:
  repeating-linear-gradient(0deg,rgba(27,42,74,.10) 0 1px,transparent 1px 4px),
  repeating-linear-gradient(90deg,rgba(27,42,74,.10) 0 1px,transparent 1px 4px)}
.st-det--twill{background-image:
  repeating-linear-gradient(45deg,rgba(27,42,74,.11) 0 2px,transparent 2px 6px)}
.st-det--tron{background-image:
  radial-gradient(circle at 30% 30%,rgba(27,42,74,.08) 0 2px,transparent 3px),
  radial-gradient(circle at 70% 70%,rgba(27,42,74,.08) 0 2px,transparent 3px);
  background-size:10px 10px}
.st-det--lua{background-image:
  linear-gradient(120deg,rgba(255,255,255,.75) 0%,transparent 45%,rgba(27,42,74,.09) 60%,transparent 100%)}

/* ── 7. THẺ CÁCH LẤY SỐ ĐO (mục XII) ─────────────────────────────────────── */
.st-the-do-boc{display:grid;gap:.6rem}
.st-the-do{position:relative;display:block}
.st-the-do input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.st-the-do-trong{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:start;gap:.75rem;
  min-height:88px;padding:.85rem .9rem;
  border:1px solid var(--vien-dam);border-radius:var(--bo-md);background:var(--the);
  cursor:pointer;transition:border-color var(--nhanh),background var(--nhanh);
}
.st-the-do-so{font-family:var(--chu-tieu-de);font-size:1.1rem;color:var(--dat);font-weight:600}
.st-the-do-chu{display:grid;gap:.15rem;min-width:0}
.st-the-do-chu b{font-size:1rem}
.st-the-do-ta{font-size:.83rem;color:var(--than)}
.st-the-do-nut{font-size:.8rem;color:var(--chi);font-weight:500;margin-top:.2rem}
.st-the-do .st-o-dau{margin:0;align-self:center}
.st-the-do input:checked + .st-the-do-trong{border-color:var(--chi);background:var(--chi-nhat);
  box-shadow:inset 0 0 0 1px var(--chi)}
.st-the-do input:checked + .st-the-do-trong .st-o-dau{opacity:1}
.st-the-do input:focus-visible + .st-the-do-trong{outline:2px solid var(--chi);outline-offset:2px}
.st-do-nhac{font-size:.82rem;color:var(--than);padding-left:.7rem;border-left:2px solid var(--duong-may)}
.st-do-nhac[data-loi="1"]{color:var(--loi);border-left-color:var(--loi)}

/* ô số đo + "Xem cách đo" (mục XIII) */
.st-do{padding:.85rem 0;border-top:1px solid var(--vien)}
.st-do:first-of-type{border-top:0}
.st-do-dau{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.st-do-dau label{font-size:.92rem;font-weight:500}
.st-do-cach{min-height:44px;padding:.3rem .1rem;border:0;background:transparent;
  color:var(--chi);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.st-do-nhap{display:flex;align-items:center;gap:.4rem;margin-top:.35rem}
.st-do-nhap input{width:8.5rem;min-height:46px;padding:.5rem .6rem;
  border:1px solid var(--vien-dam);border-radius:var(--bo-md);
  background:var(--vai);color:var(--muc);font:inherit;font-size:1rem}
.st-do-nhap input:focus-visible{outline:2px solid var(--chi);outline-offset:1px;background:var(--the)}
.st-do-nhap input[aria-invalid="true"]{border-color:var(--loi);background:#FDF6F6}
.st-dv{font-size:.85rem;color:var(--than)}
.st-do-goiy{margin-top:.3rem!important;font-size:.82rem;color:var(--loi);line-height:1.45}
.st-do-goiy:empty{display:none}
.st-do-hinh{margin-top:.5rem;padding:.6rem;background:var(--vai);border:1px solid var(--vien);
  border-radius:var(--bo-md)}
.st-do-hinh svg{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
.st-do-hinh-chu{font-size:.83rem;color:var(--than);text-align:center;margin-top:.3rem!important}
.st-do-tincay{margin-top:var(--k-md)!important;font-size:.84rem;line-height:1.55;color:var(--than);
  padding-left:.7rem;border-left:2px solid var(--duong-may)}
.st-do-tincay:empty{display:none}
.st-do-tincay.st-cao{border-left-color:var(--tot);color:var(--muc)}

/* ── 8. PHIẾU TÓM TẮT ───────────────────────────────────────────────────── */
/* ⚠️ BẪY CỦA THEME — đo thật mới thấy, đọc mã không thấy:
   Flatsome khai `dl{opacity:0.8; text-transform:uppercase; font-size:0.85em}`.
   Phiếu tóm tắt dùng <dl> (đúng chuẩn HTML cho cặp dt/dd) nên THỪA HƯỞNG cả ba:
     · `opacity:.8` làm màu chữ #5F5B54 bị pha loãng thành #7f7c76
       ⇒ tương phản tụt từ 6,75:1 xuống 4,16:1 ⇒ TRƯỢT chuẩn AA 4,5:1.
       (axe-core bắt được; nhìn mắt thường không thấy.)
     · `text-transform:uppercase` biến nhãn "Chất liệu" thành "CHẤT LIỆU" — không phải ý đồ.
   Nên phải TRẢ LẠI cả ba ở đúng khối này. Đây là chỗ thứ hai phải "giành lại" kiểu chữ
   mà theme đã đặt, giống việc giành lại Georgia từ luật !important ép Arial. */
.st-tomtat{opacity:1;text-transform:none;font-size:.86rem;display:grid;gap:.1rem}
.st-tt-dong{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .7rem;
  padding:.42rem 0;border-bottom:1px solid var(--vien)}
.st-tt-dong:last-child{border-bottom:0}
.st-tt-dong dt{display:block;color:var(--than);grid-column:1;font-size:.78rem}
.st-tt-dong dd{display:block;margin:0;grid-column:1;font-weight:500;word-break:break-word}
.st-tt-sua{grid-column:2;grid-row:1 / span 2;align-self:center;
  /* 12/09/2026 — ĐO ĐƯỢC: nút Sửa chỉ rộng 29px (chuẩn ngón tay là 44px). Nay đủ 44×44. */
  min-height:44px;min-width:44px;padding:.3rem .1rem;border:0;background:transparent;
  color:var(--chi);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.st-tomtat--day{font-size:.9rem}
.st-tomtat--day .st-tt-dong{padding:.55rem 0}

/* ── 9. KHUNG BẢN DỰNG ÁO ───────────────────────────────────────────────── */
.st-luoi{display:grid;gap:clamp(1rem,2.5vw,1.8rem);grid-template-columns:1fr;margin-top:var(--k-md)}
.st-khung{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md);
  box-shadow:var(--bong);overflow:hidden}
.st-khung-dau{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.7rem .9rem;border-bottom:1px solid var(--vien)}
.st-khung-nhan{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--than)}
.st-ma{font-size:.72rem;color:var(--than);font-variant-numeric:tabular-nums}
.st-ao{display:block;width:100%;height:auto;background:var(--vai-sau)}
.st-khung-chu{font-size:.76rem;color:var(--than);text-align:center;padding:.45rem .7rem 0}
.st-phieu{border-top:1px solid var(--vien);padding:.8rem .9rem 1rem}
.st-phieu-dau{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-bottom:.5rem;flex-wrap:wrap}
.st-phieu-dau strong{font-family:var(--chu-tieu-de);font-size:1rem;font-weight:600}
.st-phieu-xem{min-height:44px;padding:.3rem .1rem;border:0;background:transparent;
  color:var(--chi);font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.st-gia{margin-top:.7rem!important;font-size:.8rem;color:var(--than);line-height:1.55}
.st-gia strong{display:block;color:var(--muc);font-size:.98rem}

/* bản dựng đóng/mở trên điện thoại (mục X) */
.st-luoi[data-xem="0"] .st-khung .st-ao,
.st-luoi[data-xem="0"] .st-khung .st-khung-chu{display:none}

/* ── 10. MÀN THÀNH CÔNG (mục XX) ────────────────────────────────────────── */
.st-tc-trong{background:var(--the);border:1px solid var(--vien);border-left:3px solid var(--chi);
  border-radius:var(--bo-md);padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--bong)}
.st-tc-nhan{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--chi);
  font-weight:600;margin-bottom:.35rem!important}
.st-tc h2{font-size:clamp(1.25rem,4.6vw,1.8rem)}
.st-tc-phieu{margin:var(--k-md) 0;padding:.85rem 1rem;background:var(--vai);
  border:1px solid var(--vien);border-radius:var(--bo-md);display:grid;gap:.15rem}
.st-tc-phieu-nhan{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--than)}
.st-tc-phieu b{font-size:1.15rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.st-tc-phieu-trang{font-size:.78rem;color:var(--than)}
.st-tc-chu{font-size:.92rem;color:var(--than)}
.st-tc-nut{display:grid;gap:var(--k-sm);margin-top:var(--k-md)}
.st-tc-ghi{margin-top:var(--k-md)!important;font-size:.8rem;color:var(--than)}

/* ── 11. BẢNG KATHY (mục XXI) ──────────────────────────────────────────── */
.st-kathy-ai{font-size:.86rem;line-height:1.55;color:var(--muc);margin-top:.75rem;
  padding:.7rem .85rem;background:#FBF7EF;border-left:2px solid var(--dat);border-radius:var(--bo-sm)}
.st-kathy-ai[data-trong="1"]{display:none}
.st-kathy-ai b{color:var(--dat)}
.st-kathy-ai{white-space:pre-line}
.st-kathy-ai em{font-style:normal;color:var(--than)}
/* nhãn "Kathy" đứng đầu khối */
.st-kathy-ai .st-kathy-nhan{display:block;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dat);font-weight:600;margin-bottom:.25rem}
.st-kathy-kq{margin-top:var(--k-md)}
.st-kathy-kq .st-kathy-ai{margin-top:0}

.st-kb{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:0 .6rem calc(.6rem + env(safe-area-inset-bottom,0px))}
.st-kb-trong{max-width:520px;margin:0 auto;background:var(--the);color:var(--muc);
  border:1px solid var(--vien);border-radius:var(--bo-lg);box-shadow:0 -8px 40px -10px rgba(27,42,74,.35);
  padding:1rem 1.05rem 1.1rem;max-height:78vh;overflow:auto;
  font-family:var(--chu-doc);line-height:1.6;font-size:.92rem}
.st-kb-dau{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.3rem}
.st-kb-dau b{font-family:var(--chu-tieu-de);font-size:1.15rem;font-weight:600}
.st-kb-mo{font-size:.86rem;color:var(--than);margin-bottom:.8rem!important}
.st-kb-hoi{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.st-kb-hoi button{min-height:44px;padding:.5rem .8rem;border:1px solid var(--vien-dam);
  border-radius:var(--bo-md);background:var(--the);color:var(--muc);font:inherit;font-size:.85rem;
  cursor:pointer}
.st-kb-hoi button:hover{background:var(--vai-sau)}
.st-kb-hoi button[aria-pressed="true"]{border-color:var(--chi);background:var(--chi-nhat);color:var(--chi)}
.st-kb-tra{font-size:.88rem;line-height:1.6;color:var(--muc)}
.st-kb-tra:empty{display:none}
.st-kb-tra p{margin-bottom:.5rem}
.st-kb-tra ul{display:grid;gap:.3rem;margin:.4rem 0}
.st-kb-tra li{padding-left:.9rem;position:relative}
.st-kb-tra li::before{content:"·";position:absolute;left:.25rem;color:var(--dat);font-weight:700}
.st-kb-zalo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:48px;margin-top:.9rem;padding:.6rem .9rem;border:1px solid var(--chi);
  border-radius:var(--bo-md);color:var(--chi);text-decoration:none;font-size:.9rem;font-weight:500}
.st-kb-zalo:hover{background:var(--chi-nhat)}
.st-kb-ghi{margin-top:.7rem!important;font-size:.76rem;color:var(--than);line-height:1.5}

/* nút Kathy nổi — CHỈ trên máy tính.
   Trên điện thoại Kathy nằm ở nút "?" trong thanh tiến trình (thanh đó luôn dính trên đỉnh),
   nên Kathy vẫn luôn tìm thấy được mà không thêm một nút nổi nữa đè lên thanh hành động đáy. */
.st-kathy-noi{
  display:none;
  position:fixed;right:12px;z-index:9990;
  bottom:calc(var(--day-cao) + 12px + env(safe-area-inset-bottom,0px));
  align-items:center;gap:.45rem;
  min-height:48px;padding:.4rem .9rem .4rem .45rem;
  border:1px solid var(--vien);border-radius:99px;background:var(--the);color:var(--muc);
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:var(--bong);
}
@media (min-width:1024px){ .st-kathy-noi{display:inline-flex} }
.st-kathy-noi:hover{background:var(--vai-sau)}
.st-kathy-noi-cham{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--dat);color:#fff;
  font-family:var(--chu-tieu-de);font-size:.95rem;font-weight:600}

/* ── 12. THANH HÀNH ĐỘNG DÍNH ĐÁY (mục XVII) ─────────────────────────────── */
.st-day{
  position:fixed;left:0;right:0;bottom:0;z-index:9995;
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom,0px));
  background:var(--the);border-top:1px solid var(--vien);box-shadow:var(--bong-noi);
  font-family:var(--chu-doc);color:var(--muc);
}
.st-day-lui{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;border:1px solid var(--vien-dam);
  border-radius:var(--bo-md);background:transparent;color:var(--muc);font:inherit;font-size:1.05rem;
  cursor:pointer}
.st-day-chu{flex:1 1 auto;min-width:0;display:grid;line-height:1.3}
.st-day-chu b{font-family:var(--chu-tieu-de);font-size:.95rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-day-chu span{font-size:.72rem;color:var(--than);font-variant-numeric:tabular-nums}
.st-day .st-nut{flex:0 0 auto;padding:.6rem .95rem;font-size:.9rem}
/* Mục XVII: ở BƯỚC CUỐI thanh đáy chỉ còn MỘT nút chính.
   Đo thật trên 375px: nút "GỬI YÊU CẦU MAY ĐO" chiếm ~200px, cộng [←] và nút "áo" thì
   phần chữ chỉ còn ~39px — "Bước 5 / 5" xuống 3 dòng và thanh đáy cao gấp ba.
   Bước 5 không cần nhãn bước (thanh tiến trình phía trên đã ghi) và không cần nút "áo"
   (ngay dưới đây là cả phiếu tóm tắt), nên bỏ hai thứ đó để nút chính rộng rãi. */
.st[data-buoc="5"] .st-day-chu,
.st[data-buoc="5"] .st-day-ao{display:none}
.st[data-buoc="5"] .st-day .st-nut{flex:1 1 auto}

/* ── 13. LỜI NHẮC LƯU ──────────────────────────────────────────────────── */
.st-nhac{
  position:fixed;left:.6rem;right:.6rem;z-index:9996;
  bottom:calc(var(--day-cao) + 10px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem .85rem;background:var(--muc);color:#fff;border-radius:var(--bo-md);
  box-shadow:var(--bong);font-family:var(--chu-doc);font-size:.85rem;line-height:1.4;
}
.st-nhac span{flex:1 1 auto;min-width:0}
.st-nhac .st-nut{background:#fff;color:var(--muc);flex:0 0 auto}
.st-nhac-dong{width:36px;height:36px;flex:0 0 36px;border:0;background:transparent;
  color:#fff;font:inherit;font-size:1.1rem;cursor:pointer}

/* ── 14. MÁY TÍNH ──────────────────────────────────────────────────────── */
@media (min-width:768px){
  .st-hero-nut{flex-direction:row;flex-wrap:wrap}
  .st-nut--to{width:auto;flex:1 1 220px}
  .st-luoi-o{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-luoi-o--mau{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st-vai-the{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-the-do-boc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-tc-nut{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st-cham button{font-size:.68rem}
}
@media (min-width:1024px){
  .st{padding:2rem clamp(1.5rem,3vw,2.5rem)}
  .st-luoi{grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start}
  .st-khung{position:sticky;top:1rem}
  /* máy tính: thanh đáy KHÔNG dùng — hàng nút trong thân bước mới là nút chính */
  .st-day{display:none!important}
  .st-nhac{left:auto;right:1.2rem;max-width:380px;bottom:1.2rem}
  .st-kathy-noi{bottom:1.2rem}
  .st-hero-nut{max-width:640px}
  .st-nut--to{flex:0 1 auto}
  /* Máy tính: gộp hàng chữ và hàng điểm bước vào MỘT hàng. Đo thật lúc đầu thanh này
     cao 152px — chiếm gần 1/5 màn hình máy tính chỉ để nói "đang ở bước 2". */
  .st-tien-trinh{display:flex;align-items:center;gap:1.1rem;position:sticky}
  .st-tt-trong{flex:0 0 auto;min-width:250px}
  .st-tt-thuong-hieu{display:none}
  .st-cham{display:flex;flex:1 1 auto;margin-top:0;gap:2px}
  .st-thanh{position:absolute;left:0;right:0;bottom:0;margin:0;border-radius:0}
  .st-vai-the{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st-the-vai-trong{grid-template-columns:1fr;justify-items:start;gap:.5rem;min-height:150px}
  .st-vai-hinh{width:100%;height:58px}
  .st-the-vai-chon{order:3}
  .st-vai-the .st-o-dau{position:absolute;top:.6rem;right:.6rem}
  .st-the-vai{position:relative}
}
@media (min-width:1440px){
  .st{max-width:1240px}
  .st-luoi{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
}

/* máy tính: hàng nút trong thân bước hiện; điện thoại: ẩn nút "Tiếp tục" VÌ thanh đáy đã có.
   Các nút khác (Quay lại · Bỏ qua) VẪN HIỆN — chúng không trùng chức năng với thanh đáy. */
.st-dieu-huong{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--k-md)}
@media (max-width:1023px){
  .st-chi-may-tinh{display:none!important}
  .st-dieu-huong .st-nut{flex:1 1 auto}
  /* điện thoại: BƯỚC lên trước, BẢN DỰNG xuống dưới — để khách chạm được vào lựa chọn
     ngay, không phải cuộn qua nửa màn hình ảnh áo trước (đây là lỗi lớn của bản cũ). */
  .st-luoi .st-cot{order:1}
  .st-luoi .st-khung{order:2}
}

/* ── 15. THẺ MẪU GẦN ĐÂY (mục XVI) ─────────────────────────────────────── */
.st-lich-su{display:grid;gap:.6rem}
.st-ls-o{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.2rem .7rem;
  align-items:center;padding:.65rem .7rem;border:1px solid var(--vien);border-radius:var(--bo-md);
  background:var(--vai)}
.st-ls-mau{width:44px;height:44px;border-radius:var(--bo-sm);border:1px solid var(--vien-dam)}
.st-ls-chu{display:grid;gap:.1rem;min-width:0}
.st-ls-chu b{font-size:.92rem;overflow-wrap:anywhere}
.st-ls-chu span{font-size:.78rem;color:var(--than)}
.st-ls-nut{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}

/* Nút "xem áo" trên thanh đáy — chỉ hiện trên điện thoại, vì trên máy tính bản dựng
   nằm ngay cột trái và luôn nhìn thấy. */
.st-day-ao{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;border:1px solid var(--vien-dam);
  border-radius:var(--bo-md);background:transparent;color:var(--muc);cursor:pointer}
.st-day-ao svg{display:block;width:22px;height:22px;stroke:currentColor;fill:none}
.st-day-ao:hover{background:var(--vai-sau)}
/* nút "Xem áo của tôi" trong khung bản dựng: máy tính không cần (đã thấy sẵn) */
@media (min-width:1024px){ .st-phieu-xem{display:none} }

/* ── 16. A11Y ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .st *,.st-day,.st-kb,.st-nhac,.st-kathy-noi{transition:none!important;animation:none!important}
}
/* Nhắm màn hẹp: chữ không nhỏ hơn 12px */
@media (max-width:374px){
  .st-cham button{font-size:.58rem}
  .st-the-vai-trong{grid-template-columns:52px minmax(0,1fr) auto;gap:.6rem}
  .st-vai-hinh{width:52px;height:52px}
}

/* ── 17. KHÔNG CÓ JS ──────────────────────────────────────────────────────
   Người tắt JS (và một số trình thu thập) vẫn phải ĐỌC ĐƯỢC đủ nội dung.
   Mở lại hết các màn để trang hành xử như bản danh sách cũ — không có màn rỗng. */
.st-noscript{font-size:.88rem;color:var(--muc);background:#FBF7EF;border:1px solid var(--vien);
  border-left:2px solid var(--dat);border-radius:var(--bo-md);padding:.8rem .9rem;margin-bottom:var(--k-md)}

/* ── 18. LUẬT CHẠM <body> — có chủ đích, CHỈ sống ở trang này ────────────
   Đo thật trên sbhtailor.vn (11/09/2026) cho thấy trang này có BA lớp che ở đáy màn hình,
   cả ba đều tranh chỗ với thanh hành động dính đáy bắt buộc ở mục XVII:

   | lớp | vị trí thật | z-index | chuyện gì xảy ra |
   |---|---|---|---|
   | `#sbh-pop`  | đáy 0, cao 236px, TỰ MỞ sau 8s hoặc khi cuộn 40% | 99997 | **che kín nút chính giữa thang thiết kế** |
   | `#sbh-lc`   | đáy 18px, TỰ MỞ sau 30s | 99998 | chồng lên thanh đáy |
   | `.sbh-zl`   | đáy 16px | — | chồng lên thanh đáy |

   Cách xử — KHÔNG xoá tính năng nào của website, chỉ chỉnh lại chỗ đứng ở TRANG NÀY:
   (a) `#sbh-pop` (popup xin email) ẨN HẲN ở trang này. Nó là một tấm trượt từ đáy lên, tự
       bật sau 8 giây — giữa lúc khách đang dở thang 5 bước. Trang này đã có một việc rõ
       ràng hơn nhiều là GỬI THIẾT KẾ, và chính việc đó mới là lead. Mục XXXV: giảm ma sát.
   (b) `#sbh-lc` (bong bóng liên hệ Zalo/FB/gọi) và `.sbh-zl` (nút Zalo) được NÂNG LÊN TRÊN
       thanh đáy và hạ z-index XUỐNG DƯỚI nó (9994 < 9995). Khách vẫn dùng được liên hệ,
       nhưng nút chính của trang luôn thắng khi hai bên tranh chỗ.
   (c) Băng-rôn cookie (CookieYes, z-index 9999999) KHÔNG bị đụng tới: đó là lớp đồng thuận
       pháp lý. Ở lần vào đầu tiên nó nằm trên thanh đáy — đúng, và phải để nguyên.
       Xem báo cáo cuối: đây là việc cấu hình toàn site, không phải việc của trang này.
   (d) Thanh đầu trang của website đang FIXED và cướp 88px trên điện thoại. Trên màn HẸP,
       trang này cho nó CUỘN ĐI — thanh tiến trình của Studio (có [←] và [?]) thay vai trò
       "header gọn" đúng như mục XVIII yêu cầu. Trên máy tính thì GIỮ header chung.
   (e) `position:sticky` KHÔNG CHẠY trong trang này: Flatsome đặt `body{overflow:hidden}` và
       `html{overflow:hidden auto}`. Một tổ tiên có overflow khác `visible` sẽ trở thành
       vùng cuộn của chính nó, và `sticky` bám vào vùng đó — mà vùng đó cao bằng nội dung
       nên KHÔNG BAO GIỜ dính. Đo thật: thanh tiến trình `position:sticky` mà ở scrollY=1400
       vẫn nằm ở -819px, tức không dính chút nào.
       Vá bằng `overflow:clip` chứ KHÔNG phải `visible`: `clip` không tạo vùng cuộn nên
       `sticky` chạy lại, mà vẫn chặn được tràn ngang như `hidden`. Đây là chỗ duy nhất
       phải chạm <body>, và chỉ ở trang này. */
body.sbh-studio-page{overflow:clip!important}
/* Ở dải chuyển tiếp (khách vừa tới đầu khối thiết kế) thanh đầu trang của website còn
   đang trong tầm nhìn và thanh tiến trình cũng vừa dính mép trên ⇒ hai bên chồng nhau.
   Cho thanh đầu trang NẰM TRÊN thanh tiến trình: chrome của website luôn thắng, và khi
   khách cuộn thêm thì JS đã đo được chiều cao thật của nó (94px) nên thanh tiến trình
   tự tụt xuống dưới, không còn chồng nữa.
   Phải `!important` vì Flatsome khai z-index bằng `#header` (độ ưu tiên ID cao hơn). */
body.sbh-studio-page #header,
body.sbh-studio-page .header-wrapper{z-index:70!important}
/* (f) ⚠️ XUNG ĐỘT VỚI PHIÊN KHÁC — phát hiện 11/09 16:05 lúc chạy lại bộ kiểm.
   Phiên khác thêm `mu-plugins/sbh-navigation.php` với một THANH ĐIỀU HƯỚNG ĐÁY
   `.sbh-bnav`: position:fixed, cao 70px, z-index 9995.
   Đo thật trên trang này: nó CHỒNG lên thanh hành động của trang (top 775 so với
   766..844) và vì TRÙNG z-index mà nó nằm sau trong DOM nên THẮNG —
   `elementFromPoint` tại tâm nút chính trả về thẻ <a> của nav, tức
   NÚT "Tiếp tục / Gửi yêu cầu may đo" KHÔNG BẤM ĐƯỢC.
   Cách xử: GIỮ CẢ HAI, xếp lại thứ tự — nav của website ở sát mép dưới, thanh hành
   động của trang nằm NGAY TRÊN nó và có z-index cao hơn. Chiều cao nav do JS đo thật
   và ghi vào `--sbh-bnav-cao` (nav có thể vắng ở trang khác, hoặc đổi chiều cao).
   Không ẩn nav: đó là tính năng của phiên khác, ngoài phạm vi trang này. */
body.sbh-studio-page .st-day{
  bottom:var(--sbh-bnav-cao,0px)!important;z-index:9996}
body.sbh-studio-page.sbh-co-day #sbh-lc{
  bottom:calc(var(--sbh-day-cao,86px) + 10px + env(safe-area-inset-bottom,0px))!important;z-index:9994}
body.sbh-studio-page #sbh-pop{display:none!important}
/* Nút Zalo nổi của website to ngang và trên điện thoại nó nằm đè lên chính các thẻ lựa
   chọn vải. Trang này đã có đường Zalo NGAY TRONG LUỒNG (bước 5 và bảng Kathy), nên ẩn
   nút nổi cho đỡ rối — chỉ ở trang này, và bỏ luật này là nó trở lại ngay. */
body.sbh-studio-page .sbh-zl{display:none!important}
/* Bong bóng liên hệ + lời nhắc lưu nằm TRÊN CẢ HAI thanh đáy (xem luật (f) ở dưới). */
@media (max-width:1023px){
  body.sbh-studio-page .header-wrapper,
  body.sbh-studio-page .header-wrapper.stuck{position:static!important;top:auto!important}
}
@media (min-width:1024px){
  body.sbh-studio-page.sbh-co-day #sbh-lc{bottom:18px!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   DẢI ÁO DÍNH — chỉ trên điện thoại/tablet nhỏ (máy tính đã có cột bản dựng bên trái).
   Đo 12/09/2026: khung bản dựng cách màn ~2.000px ⇒ khách chọn vải/màu mà không thấy áo.
   ══════════════════════════════════════════════════════════════════════════ */
.st-ao-dinh { display: none; }

@media (max-width: 1023px) {
  .st-ao-dinh[data-hien="1"] {
    display: flex; align-items: center; gap: .7rem;
    position: sticky; top: 0; z-index: 9996;
    margin: 0 0 .6rem; padding: .5rem .8rem .45rem;
    background: #fff; border-bottom: 1px solid var(--chi);
    box-shadow: 0 6px 14px rgba(27,42,74,.06);
  }
  .st-ao-dinh-hinh { width: 74px; height: 92px; flex: none; overflow: hidden; }
  .st-ao-dinh-hinh svg { width: 74px; height: 92px; display: block; }
  .st-ao-dinh-chu { min-width: 0; }
  .st-ao-dinh-chu b { display: block; font-family: var(--chu-tieu-de); font-size: .95rem; color: var(--muc); }
  .st-ao-dinh-chu span { display: block; font-size: .82rem; color: var(--than); margin-top: 2px; }
  /* Dải này đứng trên cùng ⇒ đẩy neo khi bấm "Sửa" xuống dưới nó, không thì tiêu đề màn bị che. */
  .st-man { scroll-margin-top: 116px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — CHẤT LIỆU: MỘT HÀNG 3 Ô, CHỈ TÊN (anh Tiền chốt 12/09/2026, giống app Zalo).
   Trước đây mỗi chất một hàng ngang kèm hình 64px + dòng đặc tính + chip "Chọn" ⇒ 3 chất chiếm
   3 hàng và rất nhiều chữ, trong khi khách chỉ cần biết chọn chất nào. Máy tính giữ nguyên bản cũ.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .st-vai-the { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .st-the-vai-trong {
    grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
    gap: .35rem; min-height: 100px; padding: .6rem .4rem;
  }
  .st-vai-hinh { width: 46px; height: 46px; }
  .st-the-vai-chu b { font-size: .9rem; }
  .st-the-vai-tinh { display: none; }        /* bỏ dòng đặc tính — bớt chữ */
  .st-the-vai-chon { display: none; }        /* bỏ chip "Chọn" — cả ô đã bấm được */
}

/* ── CHẤT LIỆU (máy tính) — CHỮ CĂN GIỮA CHO CÂN (anh Tiền chốt 12/09/2026, sau khi bỏ đặc tính + chip Chọn).
   Mobile (<1024px) đã căn giữa ở khối phía trên; đây chỉ bù cho bản máy tính đang justify-items:start. */
@media (min-width:1024px){
  .st-the-vai-trong{justify-items:center;text-align:center}
  .st-the-vai-chu{justify-items:center;text-align:center;width:100%}
}

/* ── BẢN DỰNG DÍNH KHI CUỘN (máy tính) — anh Tiền chốt 12/09/2026: "phần này luôn cố định khi khách lăn chuột".
   Đo thật 1400px: .st-khung cao 1.450px (áo + phiếu tóm tắt dài) = đúng chiều cao lưới .st-luoi ⇒ sticky
   không còn chỗ trượt, cuộn là áo đi mất. Vá: khoá chiều cao khung theo màn hình, phần phiếu tóm tắt cuộn
   bên trong khung; áo luôn ở trên. Mobile (<1024px) đã có dải áo dính riêng (.st-ao-dinh). */
@media (min-width:1024px){
  .st-khung{max-height:calc(100vh - 2rem);overflow:auto;overscroll-behavior:contain}
}

/* ── MAY THÊM MÀU KHÁC (bước 5, NK-363 12/09/2026) — ô màu chọn nhiều + bộ đếm −/+ dưới mỗi ô đã chọn. */
.st-mau-them-o{display:flex;flex-direction:column;min-width:0}
.st-mau-them-o[hidden]{display:none}
/* danh sách màu đã chọn: mỗi dòng = ô màu nhỏ + tên + "n áo" + nút −/+ 44px — nằm dưới lưới, không bao giờ bị cắt */
.st-mau-them-ds{display:grid;gap:.4rem;margin-top:.6rem}
.st-mau-them-ds:empty{display:none}
.st-mau-them-dong{display:flex;align-items:center;gap:.6rem;padding:.35rem .6rem;border:1px solid var(--vien-dam);border-radius:var(--bo-sm);background:var(--the)}
.st-mau-them-dong .st-mau{width:22px;height:22px;flex:none;border-radius:6px}
.st-mau-them-dong img.st-mau{width:34px;height:34px;object-fit:cover;border:1px solid var(--vien-dam)}
.st-vai-them .st-o-trong{padding:0 0 .35rem}
.st-vai-them .st-o-chu{padding:.25rem .3rem 0;line-height:1.25}
.st-vai-them .st-o-chu i{display:block;font-size:.68rem}
.st-mau-them-ten{flex:1 1 auto;min-width:0;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-mau-them-ten b{font-weight:600}
.st-mau-them-nut{width:44px;height:44px;flex:none;border:1px solid var(--vien-dam);border-radius:var(--bo-sm);background:#fff;color:var(--muc);font-size:1.15rem;line-height:1;cursor:pointer}
.st-mau-them-nut:active{background:var(--chi-nhat)}
.st-mau-them-so{font-size:.85rem;min-width:3.2rem;text-align:center;color:var(--than)}

/* ══════════════════════════════════════════════════════════════════════════
   19. GIÀNH LẠI KIỂU CHỮ TỪ THEME (13/09/2026, đợt tinh gọn — anh Tiền:
   "tối ưu trải nghiệm và thiết kế thật đơn giản và tinh tế hơn").
   Flatsome đặt text-transform:uppercase mặc định lên MỌI <button> và <legend>
   — đo bằng getComputedStyle trên trang thật: nguồn "Để chúng tôi thiết kế
   cho bạn" viết thường, hiển thị TOÀN HOA; legend "Kiểu cổ" cũng vậy. studio.css
   chưa từng tự đặt hoa cho nút hay legend — đây là chữ RÒ từ theme, cùng loại
   với vụ <dl> ở mục 8. Chữ hoa dày đặc trên MỌI nút của cả 5 bước làm trang đọc
   như biểu mẫu, ngược hẳn tông nghiêm túc + chữ Georgia của thương hiệu.
   Giữ hoa CHỈ ở 6 nhãn nhỏ đã cố ý (mục 3/4/9/10/11: st-nhan/st-tt-thuong-hieu/
   st-khung-nhan/st-tc-nhan/st-tc-phieu-nhan/st-kathy-nhan) và ở tên bước trên
   thanh tiến trình — đó là một dải điều hướng dạng nhãn nhỏ, không phải nút
   hành động, nên khai lại CHO CHẮC thay vì để ăn may từ theme. ═══════════ */
.st button,
.st legend{
  text-transform:none;
  letter-spacing:normal;
}
.st-cham button{
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* ══════════════════════════════════════════════════════════════════════════
   20. KHỐI GẤP GỌN (details/summary) — bước 5, đợt tinh gọn 13/09/2026.
   "Vải cụ thể trong kho" và "cuộn vải thật" lấy thẳng tồn kho KiotViet nên dài
   ngắn tuỳ ngày (đo thật 12/09: 10 cuộn) — bày hết ngay trên màn XÁC NHẬN làm
   bước chốt đơn (bước nặng nhất trang) rợp mắt. Cả hai đã ghi rõ "không bắt
   buộc" từ trước; nay gấp gọn mặc định, bấm "Xem" mới hiện — id, name, dữ liệu
   BÊN TRONG giữ y nguyên (chỉ đổi <div>/<h3> bọc ngoài thành <details>/<summary>),
   nên không đụng gì tới JS chọn lựa hay gửi phiếu. */
.st details{
  border:1px solid var(--vien);border-radius:var(--bo-md);
  padding:.75rem .85rem;margin-top:1.2rem;background:var(--vai);
}
.st details > :last-child{margin-bottom:0!important}
.st summary{
  cursor:pointer;display:flex;align-items:baseline;gap:.55rem;
  font-size:1.02rem;margin:0;
}
.st summary::marker,.st summary::-webkit-details-marker{display:none}
.st summary small{font-weight:400;font-size:.78rem;color:var(--than)}
.st summary .st-gg-nhan{margin-left:auto;flex:0 0 auto;font-size:.78rem;color:var(--chi);
  text-decoration:underline;align-self:center;white-space:nowrap}
.st summary .st-gg-nhan::after{content:"Xem"}
.st details[open] > summary .st-gg-nhan::after{content:"Ẩn bớt"}
.st details[open] > summary{margin-bottom:.75rem}
.st details > p.st-nhom-ta{margin-bottom:.85rem!important}
.st summary:focus-visible{outline:2px solid var(--chi);outline-offset:2px}