/* Xác nhận là chủ hồ sơ (/xac-nhan-chu/<slug>) + khu Xác minh hồ sơ (/tai-khoan/xac-minh).
   Màu bản sắc theo loại hồ sơ (nha khoa = mint, labo = xanh dương, vật tư = tím) chỉ chiếm phần lớn; chi tiết còn lại dùng màu phụ (cam, xanh, hồng). */
.xm{max-width:1040px;margin-left:auto;margin-right:auto;--xm:var(--mint);--xm-d:var(--mint-d);--xm-s:var(--mint-s);--xm-bg1:#dff4ec;--xm-bg2:#eef8ff}
.xm-lab{--xm:var(--blue);--xm-d:var(--blue-d);--xm-s:var(--blue-s);--xm-bg1:#e1ebfc;--xm-bg2:#eefaf6}
.xm-supplier{--xm:#7c5cd6;--xm-d:#5e3fb8;--xm-s:#efe9fb;--xm-bg1:#ece5fa;--xm-bg2:#eefaf6}
.xm-dentist{--xm:var(--blue);--xm-d:var(--blue-d);--xm-s:var(--blue-s);--xm-bg1:#e1ebfc;--xm-bg2:#eefaf6}
.xm .crumb{margin-bottom:10px}

/* đầu trang: gradient dịu 2 tông + vòng tròn nét mảnh LỚN, mờ, lệch góc (không đè chữ) */
.xm-hero{position:relative;overflow:hidden;border-radius:var(--r);padding:24px 28px;background:linear-gradient(120deg,var(--xm-bg1),var(--xm-bg2));border:1px solid color-mix(in srgb,var(--xm) 18%,#fff)}
.xm-hero::before,.xm-hero::after{content:"";position:absolute;border-radius:50%;border:3px solid var(--xm);opacity:.12;pointer-events:none}
.xm-hero::before{width:300px;height:300px;right:-70px;top:-120px}
.xm-hero::after{width:190px;height:190px;right:150px;bottom:-130px;border-width:2px;opacity:.09;border-color:var(--orange)}
.xm-hero-t{position:relative;max-width:640px}
.xm-hero .eyebrow{color:var(--xm-d)}
.xm-hero h1{margin:4px 0 8px}
.xm-hero p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.xm-hero .bdg{vertical-align:1px}
.xm-chip{margin-top:12px}

.xm-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;margin-top:16px}
.xm-main{display:grid;gap:14px;min-width:0}
.xm-main>.box,.xm-side>.box{margin:0}
.xm-side{display:grid;gap:12px;align-content:start;position:sticky;top:12px}
.xm-listwrap{margin-top:14px;max-width:720px}

/* thẻ hồ sơ đang xác nhận */
.xm-target{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-left:3px solid var(--xm);border-radius:var(--r);padding:12px 14px}
.xm-target .lg{width:46px;height:46px;border-radius:50%;background:var(--xm-s);color:var(--xm-d);display:grid;place-items:center;font-weight:800;font-size:15px;overflow:hidden}
.xm-target .lg img{width:100%;height:100%;object-fit:cover}
.xm-target b{display:block;font-size:16px;font-weight:700;letter-spacing:-.2px}
.xm-target small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.xm-target.xm-mini{grid-template-columns:40px minmax(0,1fr);border:0;border-left:0;padding:0 0 10px;background:none}
.xm-target.xm-mini .lg{width:38px;height:38px;font-size:18px}
.xm-target.xm-mini b{font-size:14px}

/* biểu mẫu */
.xm-form .bb,.xm .box .bb{font-size:14px}
.xm-pills{display:flex;gap:8px;flex-wrap:wrap}
.xm-pills label{position:relative;cursor:pointer;font-weight:600}
.xm-pills input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.xm-pills span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;color:var(--ink-2)}
.xm-pills span i{font-size:16px;color:var(--ink-3)}
.xm-pills input:checked+span{background:var(--xm-s);border-color:var(--xm);color:var(--xm-d)}
.xm-pills input:checked+span i{color:var(--xm)}
.xm-pills input:focus-visible+span{outline:2px solid color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:2px}
.xm-form textarea,.xm .xm-in{width:100%;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;font:inherit;font-size:13.5px;background:#fff;resize:vertical}
.xm .xm-in{height:36px;padding:0 10px}
.xm .inp input:disabled{color:var(--ink-2);-webkit-text-fill-color:var(--ink-2);background:transparent}
.xm .inp input{flex:1;min-width:0;border:0;background:transparent;font:inherit;outline:0;color:var(--ink)}
.xm .inp select{flex:1;min-width:0;height:100%;border:0!important;background:transparent!important;box-shadow:none!important;padding:0 8px 0 4px;font:inherit;color:var(--ink);outline:0}
.xm-lock{color:var(--ink-4)!important;font-size:15px}
.xm-send{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.xm-send small{font-size:12px;color:var(--ink-3)}
.xm .consent{font-size:12.5px;line-height:1.55}
.xm-note{display:flex;gap:8px;align-items:flex-start;background:var(--orange-s);border-radius:var(--r-s);padding:10px 12px;margin-bottom:12px;font-size:12.5px;color:#8a4a0c;line-height:1.55}
.xm-note i{font-size:16px;flex:none;margin-top:1px;color:var(--orange)}
.xm-state{display:flex;gap:12px;align-items:flex-start}
.xm-state>i{font-size:26px;flex:none}
.xm-state b{font-size:15px;font-weight:700}
.xm-state p{margin:3px 0 10px;font-size:13px;color:var(--ink-2);line-height:1.6}
.xm-fine{font-size:12px;line-height:1.55;color:var(--ink-3);margin:10px 0 0}
.xm-fine a{color:var(--blue);font-weight:600}

/* cột bên */
.xm-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.xm-steps li{display:grid;grid-template-columns:26px 1fr;gap:10px}
.xm-steps .n{width:24px;height:24px;border-radius:50%;background:var(--orange-s);color:var(--orange-ink,#b4570c);display:grid;place-items:center;font-size:12px;font-weight:800}
.xm-steps li:nth-child(2) .n{background:var(--blue-s);color:var(--blue-d)}
.xm-steps li:nth-child(3) .n{background:var(--xm-s);color:var(--xm-d)}
.xm-steps b{display:block;font-size:13.5px;font-weight:700}
.xm-steps small{display:block;font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:1px}
.xm-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xm-list li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.xm-list li i{font-size:16px;margin-top:2px;color:var(--xm)}
.xm-list li:nth-child(2n) i{color:var(--blue)}
.xm-list li:nth-child(3n) i{color:var(--orange)}

/* hai hướng sau khi gửi */
.xm-paths{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.xm-path{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}
.xm-path .ic{width:38px;height:38px;border-radius:var(--r-s);display:grid;place-items:center;font-size:20px;background:var(--blue-s);color:var(--blue)}
.xm-path.b .ic{background:var(--orange-s);color:var(--orange)}
.xm-path b{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
.xm-path small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-bottom:8px}
.xm-path ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.xm-path li{display:grid;grid-template-columns:16px 1fr;gap:6px;font-size:13px;color:var(--ink-2);line-height:1.5}
.xm-path li i{font-size:14px;color:var(--xm);margin-top:2px}

/* tiến độ */
.xm .st{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--bg-2);color:var(--ink-3)}
.xm .st.done,.xm .st.ok{background:var(--mint-s);color:var(--mint-d)}
.xm .st.wait{background:var(--blue-s);color:var(--blue-d)}
.xm .st.new{background:var(--rose-s);color:var(--rose)}
.xm-lv{margin-left:auto}
.xm .bh .xm-count{margin-left:auto;font-size:12px;color:var(--ink-3)}
.xm-tl{margin-bottom:4px}
.xm-tl li{padding-bottom:14px}
.xm-tl b{font-size:14px;font-weight:700}
.xm-tl small{font-size:12.5px;line-height:1.5}
.xm-tl li.warn .dot{background:var(--orange);color:#fff;box-shadow:0 0 0 4px var(--orange-s)}
.xm-tl li.bad .dot{background:var(--rose);color:#fff}
.xm-need{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--orange-s);border-radius:var(--r-s);padding:10px 12px;margin:4px 0 10px}
.xm-need>i{font-size:20px;color:var(--orange)}
.xm-need b{display:block;font-size:13.5px;color:#8a4a0c}
.xm-need small{display:block;font-size:12.5px;color:#8a4a0c;line-height:1.5}

/* giấy tờ */
.xm-files{display:grid;gap:8px;margin-bottom:12px}
.xm-file{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line-2,#eef1f5);border-radius:var(--r-s);padding:8px 10px;background:var(--bg-2)}
.xm-file .th{width:56px;height:56px;border-radius:var(--r-s);overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.xm-file .th img{width:100%;height:100%;object-fit:cover}
.xm-file .th.pdf i{font-size:26px;color:var(--rose)}
.xm-file b{display:block;font-size:13.5px;font-weight:700}
.xm-file small{display:block;font-size:12px;color:var(--ink-3);line-height:1.45}
.xm-check{margin:0 0 14px}
.xm-check li.got{color:var(--ink)}
.xm-check li.got i{color:var(--mint)}
.xm-check li:not(.got) i{color:var(--ink-4)}
.xm-up{border-top:1px dashed var(--line);padding-top:14px}
.xm-drop{display:flex;align-items:center;gap:10px;justify-content:center;border:1.5px dashed color-mix(in srgb,var(--xm) 45%,#fff);border-radius:var(--r-s);background:color-mix(in srgb,var(--xm-s) 55%,#fff);min-height:64px;padding:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--xm-d)}
.xm-drop i{font-size:22px}
.xm-drop input{font-size:12px;max-width:100%;color:var(--ink-2)}
.xm-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px;font-size:13px}
.xm-dl dt{color:var(--ink-3);font-size:12px}
.xm-dl dd{margin:0;font-weight:600;color:var(--ink);word-break:break-word}
.xm-withdraw{color:var(--rose)}

/* danh sách yêu cầu */
.xm-card{display:block;color:inherit;transition:border-color .15s}
.xm-card:hover{border-color:var(--xm)}
.xm-card .bb{display:grid;grid-template-columns:42px minmax(0,1fr) auto 16px;gap:12px;align-items:center}
.xm-card .lg{width:40px;height:40px;border-radius:50%;background:var(--xm-s);color:var(--xm-d);display:grid;place-items:center;font-size:20px}
.xm-card-t b{display:block;font-size:15px;font-weight:700}
.xm-card-t small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.xm-card .xm-warn{color:#8a4a0c}
.xm-card .xm-warn i{color:var(--orange)}
.xm-card>.bb>i{color:var(--ink-4)}
.xm-empty{text-align:center;display:grid;gap:6px;justify-items:center;padding:28px 16px!important}
.xm-empty>i{font-size:40px;color:var(--xm)}
.xm-empty b{font-size:16px}
.xm-empty p{margin:0 0 6px;font-size:13px;color:var(--ink-3)}

@media (max-width:900px){
  .xm-grid{grid-template-columns:minmax(0,1fr)}
  .xm-side{position:static}
  .xm-paths{grid-template-columns:1fr}
}
@media (max-width:560px){
  .xm-hero{padding:18px 16px}
  .xm-hero::before{width:200px;height:200px;right:-70px;top:-90px}
  .xm-target{grid-template-columns:44px minmax(0,1fr);}
  .xm-target>.btn{grid-column:1/-1;justify-content:center}
  .xm .fgrid{grid-template-columns:minmax(0,1fr)}
  .xm-send{justify-content:stretch}
  .xm-send .btn{width:100%;justify-content:center}
  .xm-need{grid-template-columns:22px minmax(0,1fr)}
  .xm-need .btn{grid-column:1/-1;justify-content:center}
  .xm-file{grid-template-columns:48px minmax(0,1fr)}
  .xm-file>form{grid-column:1/-1}
  .xm-file .th{width:48px;height:48px}
  .xm-card .bb{grid-template-columns:40px minmax(0,1fr) 14px}
  .xm-card .bb .st{grid-column:2;grid-row:2;justify-self:start}
  .xm-card .bb>i{grid-row:1;grid-column:3}
}
.xm-drop span{color:var(--ink);font-weight:700}
