/* ui-smile — tab SMILE DESIGN (R&D 02, 27/09/2026; hình Stitch docs/anh/stitch-smile/ màn 01, 02, 03b, 07, 08, 13).
   Nguyên tắc chủ dự án: không viền, phân vùng bằng tông nền; sân khấu ảnh nền tím than để ảnh sáng lên; icon một tông;
   một nút tím (Trình chiếu). Màu vẽ trên canvas khai ở đây vì web/*.js cấm mã màu. Tiền tố `sdx-`. */

:root{
  --sdx-san:#16131F; --sdx-san2:#221C33;
  --sdx-vach:rgba(201,184,255,.92); --sdx-luoi:rgba(201,184,255,.75);
  --sdx-trang:rgba(255,255,255,.96); --sdx-trang-mo:rgba(255,255,255,.62);
  --sdx-moi:rgba(255,200,120,.9); --sdx-cam:#FFB36B; --sdx-truc:rgba(255,230,140,.8); --sdx-hop:#E9B949;
  --sdx-hanh-lang:rgba(108,66,236,.28); --sdx-nen-so:rgba(22,19,31,.72); --sdx-toi:rgba(8,6,14,.72);
  --sdx-dau-nen:rgba(22,19,31,.62);
  /* nét thiết kế mảnh (27/09: "nét vẽ chưa đủ mảnh") — vẽ 1 px theo màn hình ở smile.js */
  --sdx-truc-mat:rgba(201,184,255,.55); --sdx-vien:rgba(255,255,255,.88); --sdx-cuoi:#D9CCFF;
  --sdx-khung:rgba(233,185,73,.95); --sdx-ranh-ai:#808080;
  /* hai hàm + khung thiết kế (27/09 tối: "bật tắt viền thiết kế / viền hiện tại", "còn hàm dưới") */
  --sdx-vien-duoi:rgba(170,215,255,.85); --sdx-khung-duoi:rgba(233,185,73,.78);
  /* nét khung thiết kế vẽ vào ô GỬI AI — xanh lơ thuần để AI thấy rõ và máy xoá vết sót chắc chắn (sdXoaVetCyan) */
  --sdx-khung-ai:#00FFFF;
  /* 28/09 — trục RĂNG (liền) cạnh trục MẶT (đứt) để bác sĩ kiểm, kéo chỉnh; vùng MÀI (răng thật nằm ngoài khuôn mới) và
     vùng ĐẮP (khuôn mới ngoài răng thật) — "phạm vi mài chỉnh càng nhỏ" phải NHÌN thấy được */
  --sdx-truc-rang:rgba(120,232,200,.95); --sdx-mai:rgba(255,86,86,.58); --sdx-dap:rgba(96,214,255,.42);
  /* mũi tên răng DỜI CHỖ khi niềng (lệch khung do nắn răng, không phải mài) */
  --sdx-doi-cho:rgba(255,255,255,.9);
}

.sdx{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.sdx-dai{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.sdx-o{position:relative;flex:none;border:0;padding:0;border-radius:12px;background:var(--chim);cursor:pointer;opacity:.72;transition:opacity .15s, transform .15s}
.sdx-o .o-anh{border-radius:12px;overflow:hidden}
.sdx-o:hover,.sdx-o:focus-visible{opacity:1}
.sdx-o.chon{opacity:1}
.sdx-o.chon::after{content:"";position:absolute;left:50%;bottom:-6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--nhan)}
.sdx-o-nhan{position:absolute;right:4px;bottom:4px;font-style:normal;font-size:12px;color:var(--nhan);background:var(--the);border-radius:999px;width:18px;height:18px;display:grid;place-items:center}
.sdx-ngan{width:1px;height:40px;background:var(--chim);flex:none;margin:0 4px}
.sdx-them{width:56px;height:56px;opacity:1;background:linear-gradient(135deg,var(--nhan-nhat),var(--the));color:var(--nhan);font-size:22px}

.sdx-luoi{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:16px;align-items:start}
@media (max-width:900px){.sdx-luoi{grid-template-columns:1fr}}

/* ---------- sân khấu ---------- */
.sdx-san{position:relative;background:radial-gradient(120% 90% at 30% 10%,var(--sdx-san2),var(--sdx-san));border-radius:18px;overflow:hidden;
  min-height:360px;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sdx-cv{display:block;max-width:100%;max-height:74vh;transition:transform .35s ease}
.sdx-lop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (max-width:900px){.sdx-cv{max-height:52vh}.sdx-san{min-height:260px}}
.sdx-tay{position:absolute;top:0;bottom:0;width:2px;background:var(--sdx-trang);cursor:ew-resize}
.sdx-tay::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
  background:var(--sdx-trang);color:var(--nhan);display:grid;place-items:center;font-size:17px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sdx-tay:focus-visible::after{box-shadow:0 0 0 3px var(--sdx-vach)}
.sdx-nhan{position:absolute;top:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;backdrop-filter:blur(6px);pointer-events:none}
.sdx-nhan.trai{left:12px}.sdx-nhan.phai{right:12px}
.sdx-quet{position:absolute;top:0;bottom:0;left:0;width:140px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(201,184,255,.38),transparent)}
.sdx-quet.chay{animation:sdx-quet 1.5s ease-in-out}
@keyframes sdx-quet{0%{opacity:0;transform:translateX(-160px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(var(--rong,800px))}}
/* đang chờ AI dựng: tia quét chạy vòng trên đúng vùng sẽ gửi */
.sdx-quet.lap{animation:sdx-quet 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sdx-quet.chay,.sdx-quet.lap{animation:none}.sdx-cv{transition:none}}
.sdx-canh{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:rgba(22,19,31,.6);color:#FFD27A;font-size:14px;backdrop-filter:blur(6px)}
.sdx-canh[hidden]{display:none}
.sdx-pa-the .sdx-dung{margin-left:auto;padding:5px 10px;border-radius:999px}
.sdx-buoc-quet{position:absolute;left:12px;bottom:56px;margin:0;padding:10px 12px;list-style:none;display:flex;flex-direction:column;gap:4px;
  background:rgba(22,19,31,.66);backdrop-filter:blur(8px);border-radius:14px;color:rgba(255,255,255,.62);font-size:12.5px}
.sdx-buoc-quet[hidden]{display:none}
.sdx-buoc-quet li::before{content:"◌";display:inline-block;width:18px;color:var(--sdx-vach)}
.sdx-buoc-quet li.xong{color:#fff}
.sdx-buoc-quet li.xong::before{content:"✓"}
.sdx-buoc-quet b{color:var(--sdx-vach);font-weight:600}
/* điện thoại: bảng năm bước che trọn khuôn mặt, đè cả nút ‹ và thanh công cụ (28/09) → một viên nhỏ dưới nhãn Trước/Sau,
   chỉ hiện bước đang chạy */
@media (max-width:600px){
  .sdx-buoc-quet{left:50%;bottom:auto;top:44px;transform:translateX(-50%);padding:4px 12px;border-radius:999px;font-size:12px;
    white-space:nowrap;pointer-events:none}
  .sdx-buoc-quet li.xong,.sdx-buoc-quet li:not(.xong)~li{display:none}
  .sdx-buoc-quet:not(:has(li:not(.xong))){display:none}
}
.sdx-cc{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(22,19,31,.55);backdrop-filter:blur(10px)}
.sdx-cc-nut{border:0;background:transparent;color:rgba(255,255,255,.72);min-width:50px;height:46px;padding:4px 6px;border-radius:14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit}
.sdx-cc-nut i{font-style:normal;font-size:16px;line-height:1}
.sdx-cc-nut small{font-size:10px;line-height:1;white-space:nowrap}
.sdx-cc-nut:hover{background:rgba(255,255,255,.12)}
.sdx-cc-nut.bat{background:rgba(201,184,255,.26);color:#fff}
.sdx-cc-nut[title="Thiết kế"].bat i{color:#F1C75B}
.sdx-cc-nut:focus-visible{outline:2px solid var(--sdx-vach)}
.sdx-cc{border-radius:18px;max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none}
.sdx-cc-ngan{width:1px;align-self:stretch;margin:6px 2px;background:rgba(255,255,255,.18);flex:none}
@media (max-width:560px){.sdx-cc-nut{min-width:42px;padding:4px 3px}.sdx-cc-nut small{font-size:9px}}
.sdx-dang-tach{position:absolute;top:10px;right:64px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:rgba(22,19,31,.62);color:rgba(255,255,255,.86);font-size:12px;backdrop-filter:blur(6px);pointer-events:none}
.sdx-dang-tach[hidden]{display:none}
.sdx-dang-tach i{width:10px;height:10px;border-radius:50%;border:2px solid var(--sdx-vach);border-right-color:transparent;animation:sdx-xoay .8s linear infinite}
@keyframes sdx-xoay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sdx-dang-tach i{animation:none}}

/* ---------- cột phải: lộ trình ---------- */
.sdx-ben{display:flex;flex-direction:column;gap:10px;min-width:0}
.sdx-ben-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sdx-ben-dau h3{margin:0;font-size:17px}
.sdx-mo{color:var(--chu3);font-size:13px}
.sdx-pa{display:flex;gap:4px;margin-left:auto}
.sdx-ds-the{display:flex;flex-direction:column;gap:8px}
.sdx-the{display:flex;flex-direction:column;gap:8px;background:var(--the);border-radius:16px;padding:12px 14px;border:0;text-align:left;font:inherit;color:inherit;width:100%}
.sdx-the.khoa{background:linear-gradient(135deg,var(--nen),var(--the));color:var(--chu3);cursor:pointer}
.sdx-the.khoa:hover{background:linear-gradient(135deg,var(--nhan-nhat),var(--the))}
.sdx-the-dau{display:flex;align-items:center;gap:10px;min-width:0}
.sdx-the-dau b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdx-ic{font-style:normal;width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan);font-size:15px}
.sdx-the.khoa .sdx-ic{background:var(--chim);color:var(--chu3)}
.sdx-tag{font-size:11.5px;color:var(--nhan);background:var(--nhan-nhat);border-radius:999px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sdx-khoa{font-style:normal;margin-left:auto;font-size:13px;opacity:.7}
.sdx-ct{margin-left:auto;flex:none;width:38px;height:22px;border-radius:999px;border:0;background:var(--chim);position:relative;cursor:pointer;transition:background .15s}
.sdx-ct::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--the);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.sdx-ct.bat{background:var(--nhan)}.sdx-ct.bat::after{left:19px}
.sdx-ct:focus-visible{outline:2px solid var(--nhan);outline-offset:2px}
.sdx-truot{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--chu2)}
.sdx-truot input{flex:1;accent-color:var(--nhan)}
.sdx-mau{display:flex;gap:4px;overflow-x:auto;padding:2px 0 4px}
.sdx-tab{flex:none;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:2px;border-radius:10px;font:inherit}
.sdx-tab::before{content:"";width:22px;height:30px;border-radius:9px 9px 11px 11px;background:linear-gradient(180deg,color-mix(in srgb,var(--tab) 88%,white),var(--tab));box-shadow:inset 0 -2px 3px rgba(0,0,0,.08)}
.sdx-tab span{font-size:10.5px;color:var(--chu3);font-family:"IBM Plex Mono",monospace}
.sdx-tab.goc span{color:var(--canh);font-weight:600}
.sdx-tab.chon{background:var(--nhan-nhat)}.sdx-tab.chon span{color:var(--nhan);font-weight:600}
.sdx-tab:focus-visible{outline:2px solid var(--nhan)}
.sdx-so{display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-size:13px;color:var(--chu2)}
.sdx-so b{font-weight:600;color:var(--chu);text-align:right}
.sdx-so b.tot{color:var(--tot)}.sdx-so b.canh{color:var(--canh)}
.sdx-chip-hang{display:flex;gap:6px;flex-wrap:wrap}
.sdx-chip{border:0;border-radius:999px;padding:6px 11px;background:var(--nen);color:var(--chu2);font:inherit;font-size:12.5px;cursor:pointer}
.sdx-chip.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.sdx-hanh-trinh{display:flex;gap:6px;overflow-x:auto;padding:4px 0}
.sdx-moc{flex:none;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--chu2);background:linear-gradient(135deg,var(--nhan-nhat),var(--the));border-radius:999px;padding:6px 11px}
.sdx-moc i{font-style:normal;color:var(--nhan)}
.sdx-moc.ai{background:var(--nen);color:var(--chu3)}.sdx-moc.ai i{color:var(--chu3)}
.sdx-hanh-dong{display:flex;gap:8px;justify-content:flex-end}
.sdx-hanh-dong .nut:last-child{flex:1;justify-content:center}
.sdx-xem{display:flex;flex-direction:column;gap:10px}

/* ---------- trình chiếu ---------- */
.sdx-tc{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;gap:14px;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(90% 70% at 20% 0%,#2A1F4A,var(--sdx-san) 60%);color:#fff}
.sdx-tc-dau{display:flex;align-items:center;gap:8px}
.sdx-tc-buoc{font-size:14px;color:rgba(255,255,255,.82);margin-right:auto;background:rgba(255,255,255,.08);border-radius:999px;padding:6px 12px}
.sdx-tc-x{border:0;background:rgba(255,255,255,.1);color:#fff;width:40px;height:40px;border-radius:50%;font-size:15px;cursor:pointer}
.sdx-tc-khung{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.sdx-tc-cv{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.sdx-tc-dai{display:flex;gap:8px;justify-content:center;overflow-x:auto;padding:4px}
.sdx-tc-moc{flex:none;border:0;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);border-radius:999px;padding:7px 13px 7px 7px;font:inherit;font-size:13px;display:flex;align-items:center;gap:8px;cursor:pointer}
.sdx-tc-moc i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:11.5px}
.sdx-tc-moc.chon{background:rgba(142,107,255,.38);color:#fff}
.sdx-tc-moc.chon i{background:#8E6BFF}
.sdx-tc-moc.ai{opacity:.55}
.sdx-tc-mien{align-self:center;font-size:11.5px;color:rgba(255,255,255,.55)}
.sdx-tc-than{flex:1;min-height:0;display:flex;gap:16px}
.sdx-tc-ben{width:min(340px,32%);flex:none;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:rgba(255,255,255,.06);overflow-y:auto}
.sdx-tc-ben h3{margin:0;font-size:19px;line-height:1.25;text-wrap:balance}
.sdx-tc-nhan{color:#C9B8FF;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.sdx-tc-gia{display:flex;align-items:baseline;gap:6px}.sdx-tc-gia b{font-size:22px;color:#C9B8FF;font-variant-numeric:tabular-nums}
.sdx-tc-gia small{color:rgba(255,255,255,.55)}
.sdx-tc-ds{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:b}
.sdx-tc-ds li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;color:rgba(255,255,255,.55);font-size:14px}
.sdx-tc-ds li i{width:22px;height:22px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-style:normal;font-size:11px}
.sdx-tc-ds li.xong{color:rgba(255,255,255,.82)}.sdx-tc-ds li.xong i::before{content:"✓"}
.sdx-tc-ds li.sdx-dang-xem{background:rgba(142,107,255,.3);color:#fff}.sdx-tc-ds li.sdx-dang-xem i{background:#8E6BFF}
.sdx-tc-un{display:flex;flex-direction:column;gap:3px;font-size:13px;color:rgba(255,255,255,.75)}
.sdx-tc-un b{color:#8FE0B5;font-size:12px}.sdx-tc-un.nhuoc b{color:#FFD27A}
.sdx-tc-un p{margin:0}
@media (max-width:900px){.sdx-tc-than{flex-direction:column}.sdx-tc-ben{width:auto;max-height:36vh}}

/* ===== Smile Design 27/09 tối — hai hàm, thiết kế trước khi dựng, thẻ phương án (màn Stitch 17 · 18 · 19) ===== */
.sdx-trai{display:flex;flex-direction:column;gap:10px;min-width:0}
.sdx-chang{display:flex;flex-direction:column;gap:6px;background:var(--the);border-radius:16px;padding:10px 12px}
.sdx-chang:empty{display:none}
.sdx-chang-dau{display:flex;align-items:baseline;gap:8px}
.sdx-chang-dau b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--chu2)}
.sdx-chang-dau small{color:var(--chu3);font-size:12px}
.sdx-chang-hang{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.sdx-chang-o{flex:none;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;padding:3px;border-radius:12px;cursor:pointer;font:inherit;color:var(--chu2);font-size:11.5px;max-width:110px}
.sdx-chang-o span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}
.sdx-chang-o .sdx-nho{width:96px;height:48px;border-radius:10px;display:block;background:var(--chim)}
.sdx-chang-o.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.sdx-chang-o.chon .sdx-nho{box-shadow:0 0 0 2px var(--nhan)}
.sdx-chang-o.chua{color:var(--chu3)}
.sdx-nho-cho{display:grid!important;place-items:center;color:var(--chu3);font-size:15px;font-style:normal}
.sdx-tab-hang{display:flex;gap:4px;background:var(--nen);border-radius:14px;padding:4px}
.sdx-tab-nut{flex:1;border:0;background:transparent;border-radius:11px;padding:8px 10px;font:inherit;font-size:13.5px;color:var(--chu2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.sdx-tab-nut i{font-style:normal;color:var(--nhan)}
.sdx-tab-nut.chon{background:var(--the);color:var(--chu);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.sdx-pa-the{display:flex;flex-direction:column;gap:8px;background:var(--the);border-radius:16px;padding:14px;border:0;text-align:left;font:inherit;color:inherit;width:100%}
.sdx-pa-the.gon{cursor:pointer;gap:4px}
.sdx-pa-the.gon:hover{background:linear-gradient(135deg,var(--nhan-nhat),var(--the))}
.sdx-pa-the.chon{background:linear-gradient(160deg,var(--nhan-nhat),var(--the) 55%)}
.sdx-pa-dong{display:flex;align-items:center;gap:8px;justify-content:space-between}
.sdx-pa-nhan{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--nhan);background:var(--the);border-radius:999px;padding:3px 9px}
.sdx-pa-the.gon .sdx-pa-nhan{background:var(--nen)}
.sdx-pa-gia{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.sdx-pa-gia b{font-size:19px;color:var(--nhan);font-variant-numeric:tabular-nums}
.sdx-pa-gia small,.sdx-pa-mot{color:var(--chu3);font-size:12px}
.sdx-pa-tien{font-variant-numeric:tabular-nums;font-size:14px}
.sdx-pa-ten{margin:0;font-size:16px;line-height:1.3;text-wrap:balance}
.sdx-pa-buoc{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px;background:var(--the);border-radius:12px}
.sdx-pa-buoc button{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;font:inherit;font-size:13.5px;color:var(--chu);text-align:left;cursor:pointer}
.sdx-pa-buoc button:hover{background:var(--nen)}
.sdx-pa-buoc i{width:22px;height:22px;flex:none;border-radius:50%;background:var(--nhan-nhat);color:var(--nhan);display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:600}
.sdx-pa-buoc em{margin-left:auto;font-style:normal;color:var(--chu3);font-size:12px}
.sdx-pa-buoc li.sdx-dang-xem button{background:var(--nhan-nhat);font-weight:600}
.sdx-pa-buoc li.sdx-dang-xem i{background:var(--nhan);color:var(--the)}
.sdx-pa-un{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){.sdx-pa-un{grid-template-columns:1fr}}
.sdx-pa-uu,.sdx-pa-nhuoc{border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--chu2)}
.sdx-pa-uu{background:color-mix(in srgb,var(--tot) 9%,var(--the))}.sdx-pa-nhuoc{background:color-mix(in srgb,var(--canh) 10%,var(--the))}
.sdx-pa-uu b{color:var(--tot);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}.sdx-pa-nhuoc b{color:var(--canh);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.sdx-pa-uu p,.sdx-pa-nhuoc p{margin:0}
.sdx-pa-so{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:12px}
.sdx-pa-so div{display:flex;flex-direction:column;gap:1px;background:var(--the);border-radius:10px;padding:6px 8px}
.sdx-pa-so span{color:var(--chu3)}.sdx-pa-so b{font-weight:600;color:var(--chu)}
.sdx-nho-de{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--chu2)}
.sdx-dang-hang{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sdx-dang{border:0;background:var(--nen);border-radius:12px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;font-size:12px;color:var(--chu2);cursor:pointer}
.sdx-dang i{width:16px;height:22px;background:var(--chu3);opacity:.55}
.sdx-dang[data-dang="Răng thật"] i{border-radius:7px 4px 8px 5px/6px 8px 5px 9px}
.sdx-dang[data-dang="Tự nhiên"] i{border-radius:5px 5px 7px 7px}
.sdx-dang[data-dang="Vuông"] i{border-radius:2px}
.sdx-dang[data-dang="Oval"] i{border-radius:50%/42%}
.sdx-dang[data-dang="Tam giác"] i{clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:0;transform:rotate(180deg)}
.sdx-dang.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}.sdx-dang.chon i{background:var(--nhan);opacity:1}
.sdx-nac{display:grid;grid-template-columns:1fr auto 88px auto;align-items:center;gap:8px;font-size:13.5px}
.sdx-nac-nut{width:30px;height:30px;border:0;border-radius:50%;background:var(--nen);color:var(--chu);font-size:16px;cursor:pointer}
.sdx-nac-nut:disabled{opacity:.4;cursor:default}
.sdx-nac-vach{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--nhan) calc(var(--p) * 100%),var(--chim) 0)}
.sdx-hanh-dong .sdx-dung{flex:1;justify-content:center}

/* màu ô thang VITA — đổi từ L*a*b* của SD_VITA (smile-xuly.js) bằng cùng phép đổi; JS không được chứa mã màu */
.sdx-tab[data-nac="BL1"]{--tab:#CEC9BD}
.sdx-tab[data-nac="BL2"]{--tab:#CBC6B7}
.sdx-tab[data-nac="BL3"]{--tab:#CAC4B3}
.sdx-tab[data-nac="B1"]{--tab:#C3BAA3}
.sdx-tab[data-nac="A1"]{--tab:#C7BCA3}
.sdx-tab[data-nac="B2"]{--tab:#C4B595}
.sdx-tab[data-nac="A2"]{--tab:#C4B494}
.sdx-tab[data-nac="A3"]{--tab:#C1AD8B}
.sdx-tab[data-nac="A3.5"]{--tab:#BCA57F}
.sdx-tab[data-nac="A4"]{--tab:#B39C76}
.sdx-pa-buoc em.lai{color:var(--canh);font-size:15px;cursor:pointer;padding:0 4px;border-radius:8px}
.sdx-pa-buoc em.lai:hover{background:color-mix(in srgb,var(--canh) 14%,transparent)}

/* ===== Smile Design 28/09 — kiểm TRỤC trước khi dựng · cách thiết kế · vùng MÀI / ĐẮP (màn Stitch 20) =====
   Chủ dự án 28/09: "cần thêm bước để bác sĩ điều chỉnh trục giữa khuôn mặt, trục giữa răng trước khi gen hình";
   "khuôn răng hiện tại và khuôn răng mới càng trùng khớp càng tốt để phạm vi mài chỉnh càng nhỏ". Mẫu màu chú thích đặt
   trên nền sân khấu tối để trùng đúng màu nét trên ảnh. */
.sdx-truc-tt{margin-left:auto;flex:none;font-size:11.5px;border-radius:999px;padding:2px 9px;background:color-mix(in srgb,var(--canh) 14%,var(--the));color:var(--canh);white-space:nowrap}
.sdx-truc-tt.xn{background:color-mix(in srgb,var(--tot) 14%,var(--the));color:var(--tot)}
.sdx-truc-the.nhac{background:linear-gradient(135deg,var(--nhan-nhat),var(--the))}
.sdx-truc-chu,.sdx-md-chu{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--chu2)}
.sdx-truc-chu span,.sdx-md-chu span{display:inline-flex;align-items:center;gap:6px}
.sdx-truc-mau{display:inline-block;width:24px;height:12px;border-radius:4px;background:var(--sdx-san);position:relative}
.sdx-truc-mau::after{content:"";position:absolute;left:4px;right:4px;top:5px;border-top:2px solid var(--sdx-truc-rang)}
.sdx-truc-mau.mat::after{border-top:2px dashed var(--sdx-vach)}
.sdx-truc-nut{display:flex;gap:6px}
.sdx-truc-nut .nut{flex:1;justify-content:center;min-height:34px;padding:6px 10px;font-size:13px}
.sdx-truc-nut .nut.phu.bat{background:var(--nhan-nhat);color:var(--nhan)}
.sdx-truc-nut .nut[aria-label="Về trục máy dò"]{flex:none;width:38px;padding:0}
.sdx-md-mau{display:inline-block;width:14px;height:12px;border-radius:4px;background:var(--sdx-san);position:relative;overflow:hidden}
.sdx-md-mau::after{content:"";position:absolute;inset:0}
.sdx-md-mau.mai::after{background:var(--sdx-mai)}.sdx-md-mau.dap::after{background:var(--sdx-dap)}
.sdx-md-mau.doi::after{background:none;border-top:2px solid var(--sdx-doi-cho);height:0;margin-top:6px}

/* ===== Smile Design 28/09 tối — credit AI cạnh nút Dựng (trừ credit của phòng khám như Chuyển đổi dữ liệu) ===== */
.sdx-credit{display:block;font-size:12px;color:var(--chu3);text-align:right;padding:0 4px}
.sdx-credit.thap{color:var(--canh)}

/* lối vào Smile Design (28/09/2026): lưới ca đã có ảnh mô phỏng — thẻ không viền, ảnh trên, tên + phương án dưới */
.sdx-dsca{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.sdx-dsca-the{display:flex;flex-direction:column;gap:6px;border:0;background:var(--the);border-radius:16px;padding:10px;text-align:left;font:inherit;color:var(--chu);cursor:pointer}
.sdx-dsca-the:hover{box-shadow:0 8px 20px -12px color-mix(in srgb,var(--nhan) 45%,transparent)}
.sdx-dsca-the .o-anh{width:100%;border-radius:12px;overflow:hidden}
.sdx-dsca-the small{color:var(--chu3);font-size:12px;line-height:1.35}
.sdx-dsca-the .chip{align-self:flex-start}